/* Секции главной и служебных страниц. */
section { position: relative; }
.sec { padding: clamp(88px, 11vw, 160px) 0; }
.sec--line { border-top: 1px solid var(--line); }
.sec__head { display: grid; gap: 20px; justify-items: start; margin-bottom: clamp(44px, 6vw, 80px); }
.sec__head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 960px) { .sec__head--split { grid-template-columns: 1.1fr 0.9fr; gap: 48px; } .sec__head--split .lead { justify-self: end; } }

/* ── герой ── */
.hero { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 56px) 0 72px; overflow: clip; isolation: isolate; }
.hero__light { position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 70% 0%, rgb(139 133 255 / 12%), transparent 70%),
    radial-gradient(40% 40% at 10% 100%, rgb(139 133 255 / 6%), transparent 70%); }
.hero__lines { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: calc((min(100vw, var(--container) + var(--gutter) * 2) - var(--gutter) * 2) / 6) 100%;
  background-position: center; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.hero__grid { display: grid; gap: 56px; align-items: center; }
.hero__copy { display: grid; gap: 28px; justify-items: start; }
.hero__lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--fg-2); max-width: 30em; text-wrap: pretty; }
.hero__lead strong { color: var(--fg); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--line); width: 100%; max-width: 560px; }
.hero__meta li { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.hero__meta li::before { content: ""; width: 4px; height: 4px; background: var(--acc); }
.hero__cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.hero__cue i { width: 1px; height: 36px; background: linear-gradient(var(--line-3), transparent); }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.12fr 0.88fr; gap: 56px; } }
@media (max-width: 999px) { .hero__cue { display: none; } .recall { justify-self: stretch; max-width: none; } }

/* ── утверждение ── */
.statement { padding: clamp(96px, 12vw, 180px) 0; }
.statement__in { display: grid; gap: 36px; }
.statement__text { font-size: clamp(30px, 4.4vw, 62px); line-height: 1.12; font-weight: 600; letter-spacing: -0.035em; text-wrap: pretty; max-width: 20em; }
.statement__text .sw { color: var(--fg); opacity: var(--o, 1); transition: none; }
.statement__text .sw--acc { color: var(--acc); }
.statement__foot { display: flex; flex-wrap: wrap; gap: 12px 32px; color: var(--fg-3); font-size: 15px; }
@media (min-width: 900px) { .statement { min-height: 100svh; display: flex; align-items: center; } }

/* ── бенто ── */
.bento { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-3); overflow: hidden; }
.tile { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 340px; padding: clamp(24px, 2.6vw, 36px); background: var(--card); transition: background 0.4s var(--ease); }
.tile__i { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.08em; color: var(--fg-3); }
.tile__t { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; font-weight: 650; letter-spacing: -0.022em; max-width: 16em; }
.tile__x { font-size: 15.5px; line-height: 1.55; color: var(--fg-2); max-width: 30em; }
.tile__v { margin-top: auto; transition: transform 0.6s var(--ease); }
.tile__x { margin-bottom: 20px; }
@media (hover: hover) { .tile:hover { background: var(--card-2); } .tile:hover .tile__v { transform: translateY(-3px); } }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, 1fr); } .tile--wide { grid-column: span 2; } }
@media (min-width: 1100px) { .bento { grid-template-columns: repeat(6, 1fr); } .tile { grid-column: span 2; } .tile--wide { grid-column: span 4; } }

/* мини-визуалы плиток */
.v-facts { display: grid; border-top: 1px solid var(--line); }
.v-facts li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.v-facts b { font-weight: 600; }
.v-facts span { color: var(--fg-2); }
.v-facts time { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-3); white-space: nowrap; }
.v-search { display: grid; gap: 10px; }
.v-search__q { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14.5px; }
.v-search__q svg { width: 15px; height: 15px; color: var(--fg-3); }
.v-search__hit { padding: 11px 13px; border-radius: var(--r-2); background: var(--acc-wash); box-shadow: inset 2px 0 0 var(--acc); font-size: 14.5px; line-height: 1.45; }
.v-search__hit em { font-style: normal; font-weight: 600; color: var(--acc-ink); }
.v-search__src { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-3); }
.v-fmts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.v-fmts span { display: grid; place-items: center; height: 56px; background: var(--card); font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; color: var(--fg-2); }
.v-note { padding: 14px 15px; border-radius: var(--r-3); background: var(--card); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-pop); }
.v-note__k { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.v-note__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #18a596; }
.v-note__t { margin-top: 6px; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.v-note__s { margin-top: 2px; font-size: 13.5px; color: var(--fg-2); }
.v-quiet { display: grid; gap: 10px; }
.v-quiet__bar { position: relative; height: 34px; border-radius: var(--r-2); background: var(--bg-2); overflow: hidden; }
.v-quiet__bar i { position: absolute; top: 0; bottom: 0; left: 62%; right: 0; background: var(--acc-soft); box-shadow: inset 2px 0 0 var(--acc); }
.v-quiet__bar b { position: absolute; top: 0; bottom: 0; left: 0; width: 22%; background: var(--acc-soft); }
.v-quiet__lbl { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--fg-2); }
.v-quiet__lbl b { font-weight: 600; color: var(--fg); }
.v-quiet__ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--fg-3); }
.v-role { display: grid; gap: 8px; }
.v-role__q { padding: 12px 14px; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }
.v-role__q b { color: var(--fg); font-weight: 600; }
.v-role__list { display: flex; flex-wrap: wrap; gap: 6px; }
.v-role__list span { padding: 5px 10px; border-radius: var(--r-1); background: var(--bg-2); font-size: 13px; font-weight: 550; color: var(--fg-2); }
.v-sync { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.v-sync__w { padding: 12px 14px; border-radius: var(--r-3); background: var(--card); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-pop); }
.v-sync__w .cap { display: block; margin-bottom: 8px; }
.v-sync__w p { font-size: 14px; line-height: 1.45; }
.v-sync__mid { display: grid; justify-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc); }
.v-sync__mid i { width: 40px; height: 1px; background: var(--acc); }

/* ── сцены ── */
.scene { overflow-x: clip; }
.scene--line { border-top: 1px solid var(--line); }
.scene__stage { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 48px; }
.scene__stage > .wrap { width: 100%; }
.split { display: grid; gap: 48px; align-items: center; }
.split__copy { display: grid; gap: 22px; justify-items: start; align-content: center; }
.stage-r { justify-self: center; width: 100%; }
@media (min-width: 960px) { .split { grid-template-columns: 0.85fr 1.15fr; gap: 72px; } .split--phone { grid-template-columns: 1.1fr 0.9fr; } }
@media (max-width: 899px) { .scene__stage { min-height: 0; padding: clamp(80px, 12vw, 120px) 0; } }

.steps { display: grid; margin-top: 6px; width: 100%; max-width: 32em; border-top: 1px solid var(--line); }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 16px 0 16px; border-bottom: 1px solid var(--line); }
.step::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--acc); transform: scaleX(var(--on, 0)); transform-origin: 0 50%; }
html:not(.pinned) .step::before { display: none; }
.step__n { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; color: var(--acc); padding-top: 3px; }
.step__t { font-size: 17px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; }
.step__x { margin-top: 3px; color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.stage-cap { margin-top: 18px; text-align: center; }
.fmts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 26px; }
.fmts li { padding: 6px 11px; border-radius: var(--r-1); box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--fg-2); }

/* роли */
.army { display: flex; gap: 8px; }
.army img { width: 44px; height: auto; }
.roles { width: 100%; max-width: 32em; display: grid; border-top: 1px solid var(--line); }
.role {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; text-align: left; cursor: pointer; font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: -0.018em;
  color: color-mix(in srgb, var(--fg) calc(var(--on, 0) * 100%), var(--fg-3)); transition: color var(--dur-ui) var(--ease);
}
.role::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--acc); transform: scaleX(var(--on, 0)); transform-origin: 0 50%; transition: transform 0.5s var(--ease); }
.role[aria-selected="true"] { --on: 1; }
.role__n { flex: none; width: 28px; font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.04em; color: color-mix(in srgb, var(--acc) calc(var(--on, 0) * 100%), var(--fg-3)); }
.role__arr { margin-left: auto; width: 16px; height: 16px; opacity: var(--on, 0); transform: translateX(calc((1 - var(--on, 0)) * -6px)); transition: opacity var(--dur-ui) var(--ease), transform 0.4s var(--ease); color: var(--acc); }
@media (hover: hover) { .role:hover { color: var(--fg); } }
.role:focus-visible { outline-offset: 0; }
.details { display: grid; max-width: 32em; }
.detail { grid-area: 1 / 1; display: grid; gap: 8px; visibility: hidden; opacity: 0; transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s; }
.detail.is-active { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease); }
.detail__t { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.detail__x { color: var(--fg-2); font-size: 15.5px; line-height: 1.55; }
.detail__c { justify-self: start; margin-top: 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--acc); }
.note { font-size: 13.5px; color: var(--fg-3); }

/* разговор и каналы */
.pair { position: relative; display: grid; gap: 20px; justify-items: center; }
.pair__r { display: grid; gap: 14px; justify-items: center; width: min(100%, 360px); }
.sync { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-2); background: var(--acc-soft); color: var(--acc-ink); font-size: 13.5px; font-weight: 600; }
.sync__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.ios { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.ruler { display: none; position: relative; height: 34px; margin-top: 22px; }
.ruler__line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line-2); }
.ruler__head { position: absolute; left: 0; top: 3px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.ruler span { position: absolute; top: 18px; transform: translateX(-50%); font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
@media (min-width: 900px) {
  .pair { justify-items: start; }
  .phone--t { margin: 0; justify-self: start; }
  .pair__r { position: absolute; right: 0; top: 56px; width: min(300px, 50%); justify-items: end; }
  .ruler { display: block; }
}
.phone--t { max-width: 330px; }
.phone--t .phone__body { height: auto; }
.phone--t .p-chat { flex: none; -webkit-mask-image: none; mask-image: none; }
.phone--t .chat__in { position: static; padding: 10px 14px 8px; gap: 9px; }
.phone--t .m { font-size: 13.5px; line-height: 1.4; }
.phone--t .m--u { padding: 8px 12px 7px; }
.phone--t .p-head { padding: 46px 16px 10px; }
.phone--t .p-input { min-height: 42px; margin: 4px 12px 14px; }

/* напоминания */
.night { display: grid; gap: 24px; justify-items: center; align-items: center; }
.clock { width: min(100%, 320px); }
.night__cards { display: grid; gap: 12px; width: min(100%, 360px); align-content: center; }
.tz { margin-top: 10px; text-align: center; font-size: 13px; color: var(--fg-3); }
@media (min-width: 900px) { .night { grid-template-columns: 300px 1fr; gap: 28px; justify-items: stretch; } .clock { width: 100%; } }

/* ── цифры (кинозал) ── */
.figs-sec { padding: clamp(96px, 12vw, 168px) 0; overflow: clip; isolation: isolate; }
.figs-sec__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 50% 0%, rgb(139 133 255 / 10%), transparent 70%); }
.figs { display: grid; border-top: 1px solid var(--line-2); }
.fig { display: grid; gap: 14px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.fig__v { font-size: clamp(64px, 9vw, 136px); line-height: 0.92; font-weight: 650; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.fig__l { color: var(--fg-2); font-size: 16px; line-height: 1.45; max-width: 18em; }
.figs__note { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--fg-3); font-size: 14px; }
@media (min-width: 900px) { .figs { grid-template-columns: repeat(3, 1fr); } .fig { padding: 40px 32px 40px 0; border-bottom: 0; } .fig + .fig { padding-left: 32px; border-left: 1px solid var(--line); } }

/* ── честно ── */
.honest { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.honest__i { display: grid; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.honest__i .tile__i { color: var(--acc); }
.honest__t { font-size: 20px; font-weight: 650; letter-spacing: -0.018em; }
.honest__x { color: var(--fg-2); font-size: 15.5px; line-height: 1.55; max-width: 26em; }
@media (min-width: 900px) { .honest { grid-template-columns: repeat(3, 1fr); } .honest__i { padding: 32px 32px 0 0; border-bottom: 0; } .honest__i + .honest__i { padding-left: 32px; border-left: 1px solid var(--line); } }

/* ── как начать ── */
.start { display: grid; counter-reset: s; border: 1px solid var(--line-2); border-radius: var(--r-3); overflow: hidden; }
.start__i { position: relative; display: grid; gap: 12px; padding: clamp(24px, 3vw, 40px); background: var(--card); }
.start__i + .start__i { border-top: 1px solid var(--line-2); }
.start__n { font-size: clamp(44px, 5vw, 72px); line-height: 1; font-weight: 650; letter-spacing: -0.05em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.start__i:first-child .start__n { color: var(--acc); }
.start__t { font-size: 20px; font-weight: 650; letter-spacing: -0.018em; }
.start__x { color: var(--fg-2); font-size: 15.5px; line-height: 1.55; }
.start__arr { position: absolute; right: 24px; top: 28px; width: 18px; height: 18px; color: var(--fg-3); }
@media (min-width: 900px) { .start { grid-template-columns: repeat(3, 1fr); } .start__i + .start__i { border-top: 0; border-left: 1px solid var(--line-2); } }

/* ── вопросы ── */
.faq { display: grid; gap: 40px; }
.faq__list { border-top: 1px solid var(--line-2); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa__ic { position: relative; flex: none; width: 14px; height: 14px; }
.qa__ic::before, .qa__ic::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--fg); transition: transform 0.45s var(--ease); }
.qa__ic::after { transform: rotate(90deg); }
.qa[open] .qa__ic::after { transform: rotate(0deg); }
.qa__a { overflow: hidden; }
.qa__a p { padding: 0 48px 24px 0; color: var(--fg-2); font-size: 16px; line-height: 1.6; max-width: 40em; }
@media (hover: hover) { .qa summary:hover { color: var(--acc-ink); } }
@media (min-width: 960px) { .faq { grid-template-columns: 0.8fr 1.2fr; gap: 72px; } .faq__head { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; } }

/* ── финал (кинозал с формой) ── */
.final { padding: clamp(96px, 12vw, 168px) 0; overflow: clip; isolation: isolate; }
.final__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 60% at 20% 0%, rgb(139 133 255 / 12%), transparent 70%); }
.final__grid { display: grid; gap: 56px; align-items: start; }
.final__copy { display: grid; gap: 24px; justify-items: start; }
.final__list { display: grid; gap: 12px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); width: 100%; }
.final__list li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; color: var(--fg-2); font-size: 15.5px; line-height: 1.5; }
.final__list li span { font-family: var(--mono); font-size: 12px; color: var(--acc); padding-top: 3px; }
.card { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-3); background: var(--card); box-shadow: 0 0 0 1px var(--line-2); }
[data-theme="night"] .card { background: rgb(255 255 255 / 3%); box-shadow: 0 0 0 1px var(--line-2), 0 60px 120px -50px rgb(0 0 0 / 70%); }
@media (min-width: 1000px) { .final__grid { grid-template-columns: 0.95fr 1.05fr; gap: 80px; } .final__copy { position: sticky; top: calc(var(--nav-h) + 48px); } }

/* ── служебные страницы ── */
.page-top { padding: calc(var(--nav-h) + clamp(56px, 8vw, 104px)) 0 clamp(80px, 10vw, 128px); }
.apply { display: grid; gap: 48px; align-items: start; }
.apply__copy { display: grid; gap: 22px; justify-items: start; }
@media (min-width: 960px) { .apply { grid-template-columns: 0.85fr 1.15fr; gap: 80px; } .apply__copy { position: sticky; top: calc(var(--nav-h) + 40px); } }
.facts { display: grid; gap: 12px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line); width: 100%; }
.facts li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--fg-2); font-size: 15.5px; line-height: 1.5; }
.facts li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; background: var(--acc); }
.rows { display: grid; margin-top: 8px; border-top: 1px solid var(--line-2); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; }
.row[hidden] { display: none; }
.row__k { display: block; margin-bottom: 6px; }
.row__v { font-size: clamp(22px, 3vw, 34px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; }
.row svg { flex: none; width: 22px; height: 22px; color: var(--fg-3); transition: transform 0.4s var(--ease), color var(--dur-ui) var(--ease); }
@media (hover: hover) { a.row:hover svg { transform: translateX(6px); color: var(--acc); } a.row:hover .row__v { color: var(--acc-ink); } }
.policy { display: grid; gap: 32px; max-width: 46em; }
.policy h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.018em; margin-bottom: 8px; }
.policy p { color: var(--fg-2); font-size: 16px; line-height: 1.65; }
.policy ul { margin-top: 8px; display: grid; gap: 6px; }
.policy li { position: relative; padding-left: 18px; color: var(--fg-2); font-size: 16px; line-height: 1.6; }
.policy li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; background: var(--acc); }