/* Client landing: shared styles and responsive Figma layout. */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Cyrillic.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --lime: #ccf31e;
  --lime-hover: #2fec6f;
  --lime-text: #446300;
  --blue: #143aff;
  --blue-2: #006dff;
  --navy: #12112f;
  --font-tt: "Hero TT Travels Text", "Montserrat", Arial, sans-serif;
  --font-actay: "Hero TT Travels Text", "Montserrat", Arial, sans-serif;
  --font-body: "Montserrat", Arial, sans-serif;
  --dot-size: 6px;
  --dot-period: 28.42px;
  --dot-color: rgba(255,255,255,.6);
  --perforation-width: 2px;
  --perforation-color: rgba(245,245,245,.6);
  --perforation-dash: 6px;
  --perforation-period: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.mobile-hero { display: none; }
@media (max-width: 600px) {
  :root { --dot-size: 2.5px; --dot-period: 13px; --perforation-width: 1px; --perforation-dash: 3px; --perforation-period: 6px; }
  body { position: relative; padding-bottom: 20px; }
  #viewport { display: none; }
  .stage > div:first-child { display: none; }
  .stage > .tk, .stage .hero { display: none; }
  .mobile-hero { display: block; position: relative; width: 100%; overflow: hidden; background: transparent; }
  .mobile-hero-canvas { position: absolute; left: 0; top: 0; width: 402px; height: 814px; transform-origin: 0 0; color: #fff; }
  .mobile-hero-canvas > * { position: absolute; margin: 0; }
  .mobile-ticket-cover { left: 382px; top: 100px; width: 614px; height: 362px; opacity: .65; max-width: none; transform: rotate(90deg); transform-origin: top left; }
  .mobile-conference { left: 53px; top: 195px; font: 500 17px/1.2 var(--font-body); white-space: nowrap; }
  .mobile-premiere { left: 49.42px; top: 238px; font: 500 35.598px/1 "Hero TT Travels Text", var(--font-tt); letter-spacing: -.712px; }
  .mobile-new-word { left: 53px; top: 294px; width: 169.709px; height: 42.997px; max-width: none; }
  .mobile-logo { left: 53px; top: 344px; width: 300.447px; height: 53.9px; }
  .mobile-logo img { position: absolute; display: block; max-width: none; }
  .mobile-logo img:first-child { left: 0; top: .643px; width: 202.673px; height: 53.255px; }
  .mobile-logo img:last-child { left: 206.788px; top: 0; width: 93.6587px; height: 39.5214px; }
  .mobile-date { left: 53px; top: 145px; width: 195px; height: 36px; border-radius: 70.608px; background: rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: #fff; font: 700 14.4px/1.2 var(--font-body); letter-spacing: .432px; white-space: nowrap; }
  .mobile-date img { width: 8.473px; height: 8.473px; flex: none; }
  .mobile-place { left: 198.47px; top: 384px; width: 71.186px; font: 500 14px/1.2 var(--font-body); }
  .mobile-register { left: 53.09px; top: 448px; width: 300.785px; height: 60px; border-radius: 67.248px; font-size: 20.336px; }
  .mobile-perforation { left: 44px; top: 593px; width: 314px; height: var(--dot-size); }
  .mobile-perforation img { display: block; max-width: none; }
  /* SVG экспортированы с разными пропорциями: приводим обводки к одному квадрату. */
  .mobile-icon { top: 629px; width: 45px; height: 45px; max-width: none; }
  .mobile-icon-ai { left: 69.834px; transform: scaleX(-1); }
  .mobile-icon-code { left: 142px; }
  .mobile-icon-pointer { left: 214px; }
  .mobile-icon-agents { left: 286px; transform: scaleX(-1); }
}

/* Сцена фиксированной ширины 1920, масштабируется под окно (см. script.js) */
.viewport { position: relative; width: 100%; overflow: clip; }
.stage {
  position: relative;
  width: 1920px;
  height: var(--page-height, 8601px);
  transform-origin: 0 0;
}
.abs { position: absolute; left: 0; top: 0; transform-origin: 0 0; margin: 0; }
.stage img { max-width: none; }
.abs > img.abs { position: absolute; max-width: none; display: block; }

/* Text shared with the hero. */
.t { margin: 0; color: #fff; }
.tt-m { font-family: var(--font-tt); font-weight: 500; }
.tt-b { font-family: var(--font-tt); font-weight: 700; }

/* Мелкая точка фрейма */
.dot9 { left: 1019px; top: 199px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }

/* Кнопки */
.btn {
  display: flex; align-items: center; justify-content: center;
  background: var(--lime); color: var(--lime-text); text-decoration: none;
  font-family: var(--font-body); font-weight: 600; white-space: nowrap;
  transition: background-color .15s ease;
}
.btn:hover, .btn:active { background-color: var(--lime-hover); }
button:not(.tab):not(.ml-program-tab):active, .faq-card summary:active, a[aria-label="Следующий зал"]:active { filter: brightness(1.12); }
.btn:focus-visible, .tab:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* Шапка */
.header {
  position: fixed;
  z-index: 1000;
  transform-origin: top left;
  border-radius: 43.66px;
  background: rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
@media (max-width: 600px) {
  .header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 8px 10px 8px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 30px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; }
  .header::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255,255,255,.15); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); pointer-events: none; }
  .header.has-scrolled { opacity: 1; visibility: visible; pointer-events: auto; }
  .header > a[aria-label="Битрикс24"] {
    grid-column: 1; grid-row: 1; position: relative;
    left: auto !important; top: auto !important;
    width: clamp(96px, 25vw, 140px) !important; height: auto !important;
    aspect-ratio: 271.852 / 48.906; transform: none;
  }
  .header > a[aria-label="Битрикс24"] img { height: auto !important; }
  .header > a[aria-label="Битрикс24"] img:nth-child(1) { left: 0 !important; top: 1.184% !important; width: 67.392% !important; }
  .header > a[aria-label="Битрикс24"] img:nth-child(2) { left: 68.743% !important; top: .912% !important; width: 19.559% !important; }
  .header > a[aria-label="Битрикс24"] img:nth-child(3) { left: 89.832% !important; top: 0 !important; width: 10.168% !important; }
  .header > a[aria-label="Битрикс24"] img:nth-child(4) { left: 94.270% !important; top: 13.728% !important; width: 3.347% !important; }
  .header > .btn {
    grid-column: 2; grid-row: 1; position: relative;
    left: auto !important; right: auto; top: auto !important;
    width: clamp(166px, 46vw, 192px) !important; height: 36px !important;
  }
  .header > .btn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  .header > .btn span { font-size: clamp(12px, 2.7vw, 14px) !important; }

}
@media (max-width: 360px) {
  .header > a[aria-label="Битрикс24"] { width: 80px !important; }
  .header > .btn { width: 166px !important; }
}

/* Первый экран */
@font-face {
  font-family: "Hero TT Travels Text";
  src: url("assets/fonts/TT-Travels-Text-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hero TT Travels Text";
  src: url("assets/fonts/TT-Travels-Text-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.hero .tt-m, .hero .tt-b { font-family: "Hero TT Travels Text", var(--font-tt); }
.ticket-cover { max-width: none; }
.client-hero-date { left: 309px; top: 405px; width: 369px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 176.53px; background: rgba(255,255,255,.3); font: 700 27.2px/1.2 var(--font-body); letter-spacing: .816px; white-space: nowrap; }
.client-hero-format { left: 720px; top: 422px; width: 770px; font: 500 46px/1.2 var(--font-body); text-box-trim: trim-both; text-box-edge: cap alphabetic; white-space: nowrap; }
.client-hero-cta { left: 314px; top: 956px; width: 566px; height: 89px; border-radius: 125.662px; font-size: 38px; line-height: 32.649px; }
.client-ticket-perforation { left: 1423.096px; top: 356.855px; }

.anim .reveal { opacity: 0; }
.anim .r1 { animation: rise-in .8s cubic-bezier(.2, .8, .2, 1) .65s both; }
.anim .r2 { animation: rise-in .8s cubic-bezier(.2, .8, .2, 1) .8s both; }
.anim .r3 { animation: rise-in .8s cubic-bezier(.2, .8, .2, 1) .95s both; }
.anim .r4 { animation: rise-in .8s cubic-bezier(.2, .8, .2, 1) 1.1s both; }
@keyframes rise-in {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

/* Появление билета: спокойно проявляется и чуть «доезжает» до своего размера,
   затем по нему проходит блик прожектора. Все слои билета анимируются одинаково. */
.tk { width: 0; height: 0; transform-origin: 961px 727px; }
.anim .tk { animation: tk-enter 1.1s cubic-bezier(.25, .8, .3, 1) .3s both; }
@keyframes tk-enter {
  from { opacity: 0; scale: .96; }
  to   { opacity: 1; scale: 1; }
}
.glare {
  left: 210.636px; top: 305px; width: 1501.6px; height: 844px; border-radius: 80px;
  pointer-events: none; opacity: 0; display: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.08) 44%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.08) 56%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  mix-blend-mode: overlay;
}
.anim .glare { display: block; animation: glare 1.3s cubic-bezier(.4, 0, .2, 1) .95s both; }
@keyframes glare {
  0% { opacity: 1; background-position: 130% 0; }
  85% { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .anim .reveal { animation: none !important; opacity: 1 !important; }
}

.stub { width: 0; height: 0; }

.client-intro { left: 210px; top: 1342px; width: 1500px; height: auto; display: flex; flex-direction: column; align-items: center; gap: var(--intro-gap, 80px); }
.client-intro-title { width: 1500px; flex-shrink: 0; margin: 0; font: 700 100px/1 var(--font-tt); letter-spacing: .02em; text-align: center; text-transform: none; }
.client-intro-rule { position: relative; display: flex; align-items: center; gap: 20px; flex-shrink: 0; width: 100%; height: var(--dot-size); }
.client-intro-rule-dots { flex: 1; min-width: 0; }
.client-intro-rule img { position: static; flex-shrink: 0; display: block; }
.client-intro-rule-bottom { top: auto; }
.client-intro-divider { width: 0; height: 730.043152px; pointer-events: none; }
.client-intro-divider .client-divider-dots { position: absolute; left: calc(var(--dot-size) / -2); top: -5.263px; display: block; max-width: none; }
.client-following { top: 4484px; width: 1920px; height: 4117px; }
.client-audience { left: 212px; top: 2052px; width: 1500px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 120px; }
.client-audience-title { position: relative; left: 0; flex-shrink: 0; width: 100%; height: 100px; margin: 0; }
.client-audience-title img { display: block; max-width: none; }
.client-audience-grid { position: relative; left: -1.5px; flex-shrink: 0; width: 1495px; display: grid; grid-template-columns: repeat(3,465px); align-items: stretch; gap: 50px; }
.client-audience-card { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; min-height: 0; padding: 65px 57px; border-radius: 80px; background: rgba(8,166,255,.2); }
.client-audience-icon { display: block; flex-shrink: 0; width: 113.55px; height: 113.55px; }
.client-audience-icon img { display: block; max-width: none; }
.client-audience-copy { width: 100%; min-width: 0; margin: 32px 0 0; font: 500 36px/1.2 var(--font-tt); }
.client-audience-cta { position: relative; left: -2px; flex-shrink: 0; width: 566px; height: 89px; border-radius: 125.662px; font-size: 38px; line-height: 32.649px; }
/* декоративные слои и картинки не выделяются и не перетаскиваются; текст выделяется как обычно */
img, svg, .tk, .stub, .glare, [aria-hidden="true"] { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
h1, h2, h3, h4, p, .t { -webkit-user-select: text; user-select: text; }
img::selection, svg::selection { background: transparent; }

/* Как это было */
.past-photo { overflow: hidden; border-radius: 56.186px; }
.past-video-cover { position: absolute; inset: 0; display: block; color: #fff; background: #071d58; }
.past-video-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.past-video-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 7, 32, .35), transparent 55%); }
.past-video-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.past-photo.is-video-ready .past-video-player { opacity: 1; pointer-events: auto; }
.past-photo.is-video-ready .past-video-cover { pointer-events: none; }

/* Figma 43182:12: one shared layout follows the live registration form. */
.client-speakers, .client-past, .client-closing { position: absolute; margin: 0; }
.client-speakers { left: 212px; top: 167px; width: 1500px; height: 1279px; }
.client-speakers-title, .client-past-title, .client-closing-title { position: absolute; margin: 0; }
.client-speakers-title { left: 0; top: 0; width: 1500px; height: 100px; }
.client-following h2 img { display: block; max-width: none; transform-origin: 0 0; }
.client-speaker-grid { position: absolute; left: 0; top: 217px; width: 1500px; display: grid; grid-template-columns: 414px 126px 414px 132px 414px; align-items: start; }
.client-speaker:nth-child(1) { grid-column: 1; }
.client-speaker:nth-child(2) { grid-column: 3; }
.client-speaker:nth-child(3) { grid-column: 5; }
.client-speaker-photo { display: block; width: 414px; height: 641.140564px; object-fit: cover; border-radius: 69.373px; }
.client-speaker-name { margin: 73.859436px 0 0; font: 700 40px/1.2 var(--font-tt); letter-spacing: -.03em; text-transform: uppercase; }
.client-speaker:first-child .client-speaker-name { letter-spacing: .02em; }
.client-speaker:nth-child(3) .client-speaker-name { margin-top: 68.859436px; }
.client-speaker-role { margin: 18px 0 0; font: 500 var(--speaker-role-size, 21px)/1.35 var(--font-tt); }
.client-speaker:first-child .client-speaker-role { width: 427px; margin-left: -3px; }
.client-speaker:nth-child(2) .client-speaker-role { width: 409px; margin-left: 5px; }
.client-speaker:nth-child(3) .client-speaker-role { margin-top: 23px; }
.client-following-cta { position: absolute; width: 566px; height: 89px; border-radius: 125.662px; font: 600 38px/32.649px var(--font-body); }
.client-speakers-cta { left: 465px; top: 1190px; }
.client-past { left: 0; top: 1937px; width: 1920px; height: 1072px; }
.client-past-title { left: 210px; top: 0; width: 1500px; height: 200px; }
.client-past-video { position: absolute; left: 214px; top: 264px; width: 1500px; height: 808px; border-radius: 56.186px; }
.client-past-video .past-video-cover::after { content: none; }
.client-video-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; padding-left: 7px; background: rgba(18,17,47,.65); color: #fff; font-size: 44px; opacity: 0; transition: opacity .2s; }
.past-video-cover:hover .client-video-play, .past-video-cover:focus-visible .client-video-play { opacity: 1; }
.client-past-video.is-video-ready .past-video-cover { opacity: 0; }
.client-closing { left: 0; top: 3386px; width: 1920px; height: 592px; }
.client-closing-title { left: 210px; top: 0; width: 1500px; height: 200px; }
.client-closing-cta { left: 677px; top: 300px; }
.client-questions { position: absolute; left: 658px; top: 489px; width: 605px; text-align: center; }
.client-questions p { margin: 0; font: 500 36px/1.2 var(--font-tt); }
.client-questions a { display: inline-block; margin-top: 17px; color: #fff; font: 500 36px/1.2 var(--font-body); text-decoration: underline; text-underline-offset: .12em; }
.client-questions a:hover { color: var(--lime); }
.client-following > .ad-disclosure { position: absolute; left: 0; top: 4078px; bottom: auto; width: 1920px; margin: 0; color: rgba(255,255,255,.3); font: 500 16px/1.2 var(--font-tt); text-align: center; white-space: nowrap; }
@media (max-width: 600px) {
  .mobile-content .client-following { position: relative; left: auto; top: auto !important; width: 100%; height: auto; }
  .mobile-content :is(.client-speakers,.client-past,.client-closing) { position: relative; left: auto; top: auto; width: 100%; height: auto; margin: 0; }
  .mobile-content :is(.client-speakers-title,.client-past-title,.client-closing-title) { position: relative; left: auto; top: auto; width: 100%; height: auto; margin: 0 auto 40px; }
  .mobile-content .client-speakers-title { width: 76%; max-width: 320px; aspect-ratio: 512/100; }
  .mobile-content .client-past-title { aspect-ratio: 914/200; }
  .mobile-content .client-closing-title { aspect-ratio: 1193/200; }
  .mobile-content .client-speaker-grid { position: relative; left: auto; top: auto; width: 100%; max-width: 414px; margin: 0 auto; grid-template-columns: minmax(0,1fr); gap: 44px; }
  .mobile-content .client-speaker { grid-column: auto; }
  .mobile-content .client-speaker-photo { width: 100%; height: auto; aspect-ratio: 414/641.140564; border-radius: 38px; }
  .mobile-content .client-speaker-name, .mobile-content .client-speaker:nth-child(3) .client-speaker-name { margin: 24px 0 0; font-size: 25px; }
  .mobile-content .client-speaker .client-speaker-role { width: 100%; margin: 12px 0 0; font-size: 14px; }
  .mobile-content .client-following-cta { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 50px; margin: 34px auto 0; padding: 14px 12px; font-size: 16px; line-height: 1.3; }
  .mobile-content .client-section-divider { position: relative; left: auto; top: auto; width: 50%; height: 4px; margin: 56px auto; transform: none !important; background: radial-gradient(circle,rgba(255,255,255,.6) 1.6px,transparent 1.9px) center/13px 4px repeat-x; }
  .mobile-content .client-section-divider .client-divider-dots { display: none; }
  .mobile-content .client-past-video { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1500/808; border-radius: 24px; }
  .mobile-content .client-video-play { width: 64px; height: 64px; font-size: 25px; opacity: 1; }
  .mobile-content .client-closing-title { margin-bottom: 0; }
  .mobile-content .client-questions { position: relative; left: auto; top: auto; width: 100%; margin: 42px 0 0; }
  .mobile-content .client-questions p { font-size: 18px; }
  .mobile-content .client-questions a { margin-top: 15px; font-size: 17px; }
  .mobile-content .client-following > .ad-disclosure { position: relative; left: auto; top: auto; width: 100%; margin: 56px 0 0; font-size: 10px; line-height: 1.3; }
}
.client-following > .ad-disclosure { white-space: nowrap; }
@media (max-width: 600px) {
  .mobile-content .client-following h2 { overflow: clip; }
}

@media (max-width: 600px) {
  .mobile-content .client-registration { margin-bottom: 0; }
  .mobile-content .client-following { display: flow-root; }
  .mobile-content .client-section-divider { margin: 48px auto; }
  .mobile-content .client-registration.scroll-fade { opacity: 1; transition: none; }
  .mobile-content .client-following > .ad-disclosure { margin-top: 20px; }
}

/* One dot pattern for ticket perforation and all section dividers. */
.dot-line, .mobile-content .client-section-divider {
  height: var(--dot-size);
  background: radial-gradient(circle, var(--dot-color) 0 calc(var(--dot-size) / 2 - .25px), transparent calc(var(--dot-size) / 2)) center / var(--dot-period) var(--dot-size) space no-repeat;
  pointer-events: none;
}
.dot-line { display: block; }
.dot-line-vertical { width: var(--dot-size); height: 740.569px; background-size: var(--dot-size) var(--dot-period); background-repeat: no-repeat space; }
@media (max-width: 600px) {
  .mobile-content .client-section-divider { height: var(--dot-size); }
}

@media (max-width: 600px) {
  .mobile-content .client-past-title { margin-bottom: 24px; }
}

/* Figma 43285:1403 — FAQ with native disclosure controls. */
.client-faq { position: absolute; left: 210px; width: 1500px; display: flex; flex-direction: column; gap: 131px; }
.client-faq-title { position: relative; flex-shrink: 0; width: 100%; height: 100px; margin: 0 auto; }
.client-faq-title img { position: absolute; left: 0; top: 0; display: block; max-width: none; transform-origin: top left; }
.client-faq-list { display: grid; gap: 33px; width: 100%; }
.client-faq-card { overflow: hidden; border-radius: 49.089px; background: rgba(255,255,255,.15); -webkit-backdrop-filter: blur(6.683px); backdrop-filter: blur(6.683px); }
.client-faq-card summary { display: flex; align-items: center; justify-content: space-between; gap: 48px; min-height: 170px; padding: 43px 34px 43px 57px; list-style: none; cursor: pointer; }
.client-faq-card summary::-webkit-details-marker { display: none; }
.client-faq-card summary:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: 49.089px; }
.client-faq-question { min-width: 0; font: 800 52px/1.6 var(--font-tt); }
.client-faq-answer { margin: 0 57px; color: #fff; font: 500 32px/1.2 var(--font-body); }
.client-faq-card[open] { padding-bottom: 48px; }
.client-faq-toggle { display: block; position: relative; flex: 0 0 62.9297px; width: 62.9297px; height: 62.9297px; }
.client-faq-toggle-art { position: relative; display: block; width: 62.9297px; height: 62.9297px; }
.client-faq-toggle img { position: absolute; left: 0; top: 0; display: block; max-width: none; }
.client-faq-toggle .client-faq-plus, .client-faq-toggle .client-faq-minus { left: 11px; top: 11px; }
.client-faq-card[open] .client-faq-plus, .client-faq-card:not([open]) .client-faq-minus { display: none; }
@media (max-width: 600px) {
  .mobile-content .client-faq { position: relative; left: auto; top: auto !important; width: 100%; gap: 32px; }
  .mobile-content .client-faq-title { width: 100%; height: auto; aspect-ratio: 1026/90; margin: 0; }
  .mobile-content .client-faq-list { gap: 12px; }
  .mobile-content .client-faq-card { border-radius: 26px; }
  .mobile-content .client-faq-card summary { min-height: 76px; gap: 16px; padding: 20px; }
  .mobile-content .client-faq-question { font-size: 18px; line-height: 1.35; }
  .mobile-content .client-faq-card .client-faq-answer { margin: 0 20px; font-size: 16px; line-height: 1.5; }
  .mobile-content .client-faq-card[open] { min-height: 0; padding-bottom: 24px; }
  .mobile-content .client-faq-toggle { flex-basis: 32px; width: 32px; height: 32px; }
  .mobile-content .client-faq-toggle-art { transform: scale(.508504956); transform-origin: top left; }
}

/* Shared typography for every section heading. */
.client-section-title { font: 700 100px/1 var(--font-tt); letter-spacing: .02em; color: #fff; text-align: center; text-transform: none; }
@media (max-width: 600px) {
  .mobile-content .client-section-title { width: 100%; max-width: none; height: auto; aspect-ratio: auto; font: 700 clamp(32px,8.5vw,50px)/1.05 var(--font-tt); letter-spacing: .02em; text-align: center; text-transform: none; }
}
.client-faq-card[data-expanded="false"] .client-faq-plus { display: block; }
.client-faq-card[data-expanded="false"] .client-faq-minus { display: none; }

/* Mobile-only navigation; the desktop header keeps its single CTA. */
.mobile-menu-toggle, .mobile-nav, .mobile-speaker-controls { display: none; }
@media (max-width: 600px) {
  .header { grid-template-columns: minmax(0,1fr) 44px; }
  .header > a[aria-label="Битрикс24"] { width: clamp(120px,34vw,160px) !important; }
  .header > .btn { display: none; }
  .mobile-menu-toggle { display: flex; grid-column: 2; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
  .mobile-menu-icon { position: relative; width: 22px; height: 18px; }
  .mobile-menu-icon > span { position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .mobile-menu-icon > span:nth-child(1) { top: 1px; }
  .mobile-menu-icon > span:nth-child(2) { top: 8px; }
  .mobile-menu-icon > span:nth-child(3) { top: 15px; }
  .menu-open .mobile-menu-icon > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .mobile-menu-icon > span:nth-child(2) { opacity: 0; }
  .menu-open .mobile-menu-icon > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu-toggle:focus-visible { outline: 2px solid #fff; }
  .mobile-nav { display: flex; position: absolute; left: 0; top: 70px; width: 100%; max-height: calc(100dvh - 120px); overflow-y: auto; flex-direction: column; gap: 4px; padding: 16px; border-radius: 28px; background: rgba(18,17,47,.86); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 18px 45px rgba(0,7,31,.3); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  .menu-open .mobile-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .mobile-nav > a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 14px; color: #fff; text-decoration: none; font: 500 16px/1.3 var(--font-body); }
  .mobile-nav > a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .mobile-nav > .btn { justify-content: center; margin-top: 8px; border-radius: 24px; color: var(--lime-text); font-weight: 600; }
  .mobile-content .client-speaker-grid { display: flex; width: calc(100% + 40px); max-width: none; margin: 0 -20px; padding: 0 20px 8px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .mobile-content .client-speaker-grid::-webkit-scrollbar { display: none; }
  .mobile-content .client-speaker { flex: 0 0 78%; min-width: 0; max-width: 300px; scroll-snap-align: start; scroll-snap-stop: always; }
  .mobile-content .client-speaker-grid:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 24px; }
  .mobile-speaker-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 12px; }
  .mobile-speaker-dots { display: flex; align-items: center; gap: 0; }
  .mobile-speaker-dot { display: grid; place-items: center; width: 24px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; cursor: pointer; transition: width .25s ease; }
  .mobile-speaker-dot::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.4); transition: width .25s ease, background-color .25s ease; }
  .mobile-speaker-dot[aria-pressed="true"] { width: 42px; }
  .mobile-speaker-dot[aria-pressed="true"]::before { width: 28px; background: #fff; }
  .mobile-content .client-speakers-cta { margin-top: 54px; }
  .mobile-speaker-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-icon > span, .mobile-nav, .mobile-speaker-dot, .mobile-speaker-dot::before { transition: none; }
}

@media (max-width: 600px) {
  .header { grid-template-columns: minmax(0,1fr) auto 36px; gap: 4px; padding: 8px 8px 8px 12px; }
  .header > a[aria-label="Битрикс24"] { width: 100% !important; max-width: 110px; }
  .header > .btn { display: flex; grid-column: 2; width: clamp(140px,41vw,180px) !important; height: 36px !important; }
  .header > .btn span { font-size: clamp(10.5px,2.9vw,13px) !important; }
  .mobile-menu-toggle { grid-column: 3; width: 36px; }
}

/* One pre-rendered Figma background; the ticket entrance is independent. */
body { background-image: url("assets/client-unified-background.webp?v=1"); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: scroll; }
@media (max-width: 600px) {
  body { background-image: url("assets/client-unified-background-mobile.webp?v=1"); }
}

/* The original single hero ray uses its original transform and no live effects. */
.client-ticket-single-beam { width:1920px; height:3400px; overflow:visible; pointer-events:none; opacity:.30; }

/* Same entrance timing as the ticket; shimmer belongs only to the ticket. */
@media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  .header.ticket-header-intro { animation:header-fade-in 1.1s ease .3s both; }
}

@keyframes header-fade-in { from { opacity:0; } to { opacity:1; } }

/* Scroll reveals affect opacity only and never hide an already revealed block. */
.scroll-fade { opacity:0; transition:opacity .85s ease; }
.scroll-fade.is-revealed { opacity:1; }
@media (prefers-reduced-motion:reduce) {
  .scroll-fade { opacity:1; transition:none; }
}

@media (prefers-reduced-motion:no-preference) {
  .scroll-fade.scroll-fade-later { transition:opacity .9s ease-in-out .05s; }
}