/* TEVOMA: блоки нижче сцени шаблону, у його системі (osnova.css): Inter Tight 400/500, радіус 12px,
   ті самі криві й тривалості. Уся сторінка світла: кремовий фон, графітовий текст; ролики зняті у світлій
   спальні. Колір поза цим лише світло самої маски в блоці «Хвилі». */

@property --glow {
  syntax: '<color>';
  inherits: true;
  initial-value: #ff3b30;
}

@layer tokens {
  :root {
    --cream: #f6f0e9;
    --graphite: #26211d;
    --field-bg: color-mix(in oklab, var(--white) 7%, transparent);
    --field-bg-focus: color-mix(in oklab, var(--white) 11%, transparent);
    --err: #ff8a80;
    --todo: #ffb4a8;
    --sec-py: 96px;          /* ритм секцій: телефон 96, комп'ютер 144 */
    --w-415: #6d5cff;
    --w-630: #ff3b30;
    --w-660: #d6142e;
    --w-850: #7a0f1f;
    --w-1072: #4d0814;
    --sticky-h: 0px;
    --dur-word: 1.1s;        /* проявлення тексту швидше, ніж у шаблоні (1.6 / 1.4 / 1.2) */
    --dur-line: 1s;
    --dur-image: .9s;         /* висота нижньої кнопки на телефоні, щоб нічого не ховалося під нею */
  }
  @media (min-width: 48rem) { :root { --sec-py: 144px; } }
  @media (max-width: 47.99rem) { :root { --btn-h: 2.75rem; } }   /* кнопки на телефоні від 44px під палець */
}

@layer base {
  @media (max-width: 639px) { html { font-size: 16px; } }   /* текст на телефоні від 16px */
}

@layer components {
  /* ── шапка: замість годинника рядок про відправку; на телефоні лише лого, кнопка, меню ── */
  .header__info { white-space: nowrap; margin-right: 1.5rem; color: var(--ink-55); }
  .header.is-compact .header__info { display: none; }
  @media (max-width: 63.99rem) { .header__nav, .header__info { display: none; } }
  @media (max-width: 47.99rem) { .header__cta .btn__label { display: none; } .header__cta { width: var(--btn-h); padding: 0; } }

  /* ── меню (бургер) ── */
  .menu {
    position: fixed; inset: 0; z-index: calc(var(--z-header) + 1);
    display: grid; grid-template-rows: auto 1fr auto; padding: var(--header-py) var(--pad-x) 1.5rem;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    opacity: 0; visibility: hidden; transition: opacity var(--dur-mid) var(--ease-magic), visibility 0s linear var(--dur-mid);
  }
  .menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-mid) var(--ease-magic); }
  .menu__top { display: flex; justify-content: space-between; align-items: center; }
  .menu__list { align-self: center; display: grid; gap: .5rem; }
  .menu__list a { display: inline-block; }
  .menu__list .word { transform: translateY(110%); transition: transform var(--dur-word) var(--ease-out-expo); }
  .menu.is-open .menu__list .word { transform: none; transition-delay: calc(var(--i) * 60ms + 80ms); }
  .menu__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; color: var(--ink-55); }
  .menu__foot a { color: var(--ink); }

  /* ── перший екран: ціна у правій колонці, над кнопкою ── */
  .hero__lead { grid-row: 1; align-self: end; padding-bottom: 1.25rem; }
  .hero__price { grid-column: 9 / 13; grid-row: 2; align-self: end; padding-bottom: 1rem; }
  .hero__price b { font-weight: var(--w-ui); }
  /* соцмережі шаблону з першого екрана прибрано: довга кнопка займає їхнє місце, а посилання є в меню й підвалі */
  .hero__social { display: none; }
  .hero__cta { grid-column: 9 / 13; grid-row: 3; }
  .hero__safe { grid-column: 9 / 13; grid-row: 4; margin-top: .75rem; color: var(--caption-ink); max-width: 24em; }
  .hero__grid { grid-template-rows: 1fr auto auto auto; }
  .hero__title { grid-row: 1 / 5; }
  @media (min-width: 48rem) and (max-width: 63.99rem) { .hero__title { grid-column: 1 / 8; } .hero__lead, .hero__price, .hero__cta, .hero__safe { grid-column: 8 / 13; } }
  .hero__price span { color: var(--ink-55); }
  @media (max-width: 47.99rem) {
    .hero__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; row-gap: 1.25rem; bottom: calc(var(--hero-pb) + env(safe-area-inset-bottom)); }
    .hero__grid { grid-template-rows: auto auto auto auto auto; row-gap: 1rem; }
    .hero__title { grid-column: 1 / 5; grid-row: 1; }
    .hero__lead  { grid-column: 1 / 5; grid-row: 2; max-width: 24em; color: var(--caption-ink); }
    .hero__price { grid-column: 1 / 5; grid-row: 3; align-self: center; padding: 0; }
    .hero__safe  { grid-column: 1 / 5; grid-row: 5; margin: 0; }
    .hero::after { content: ''; position: absolute; inset: auto 0 0; height: 75svh; pointer-events: none; z-index: -1;
                   background: linear-gradient(transparent, rgb(246 240 233 / .72) 45%, rgb(246 240 233 / .88)); }
    .hero__cta   { grid-column: 1 / 5; grid-row: 4; width: 100%; height: 3.25rem; }
  }

  /* ── 02 на телефоні: інтро й цифри в стовпчик, фраза на всю ширину ── */
  @media (max-width: 47.99rem) {
    .about__top { grid-template-columns: 1fr; row-gap: 1.5rem; align-items: start; }
    .about__intro, .about__stats { grid-column: 1 / -1; justify-self: start; text-align: left; }
    .about__statement { grid-column: 1 / 13; padding-left: 0; }
    .about__vline { display: none; }
    .product__title { grid-column: 1 / 13; }
  }

  /* ── загальне для нових секцій ── */
  .sec { position: relative; padding-block: var(--sec-py); }
  /* сцена шаблону (sticky, margin-bottom −100lvh) стоїть ще екран після свого розділу:
     наступні блоки чорною завісою наїжджають на останній кадр */
  main > .sec, main > .footer { position: relative; z-index: 1; background: var(--bg); }
  .sec__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); row-gap: 1.5rem; align-items: end; }
  .sec__title { grid-column: 1 / 9; margin-left: -.03em; }
  .sec__lead { grid-column: 1 / 7; color: var(--ink-55); max-width: 34em; }
  @media (max-width: 47.99rem) { .sec__title, .sec__lead { grid-column: 1 / -1; } }
  .hair { height: 1px; background: var(--line-faint); }
  .glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border-radius: var(--radius); }
  @supports (corner-shape: squircle) { .glass, .sq { corner-shape: squircle; } }
  .note { color: var(--ink-55); }
  .btn--lg { height: 3.25rem; padding-inline: 1.5rem; font-size: var(--fs-body-lg); }
  .ico { font-size: 1.25em; line-height: 1; display: inline-flex; }

  /* ── 04 · Хвилі: спектр, сторінка світиться кольором хвилі ── */
  .waves { --glow: var(--w-630); overflow: clip; }
  .waves__glow {
    position: absolute; z-index: -1; pointer-events: none;
    left: -30%; right: -40%; top: 5%; bottom: 5%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--glow) 30%, transparent) 0%, color-mix(in oklab, var(--glow) 10%, transparent) 45%, transparent 100%);
    transition: --glow 1.1s var(--ease-magic);
  }
  .waves__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); margin-top: 4rem; }
  .waves__stick { grid-column: 1 / 7; position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; align-self: start; isolation: isolate; }
  .waves__nm { font-size: clamp(5rem, 13vw, 14rem); line-height: .85; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
  .waves__nm small { font-size: .28em; letter-spacing: -.02em; margin-left: .15em; color: var(--ink-55); }
  .waves__name { color: var(--ink-55); }
  .spectrum { position: relative; height: 2.5rem; margin-top: 1rem; max-width: 34rem; }
  .spectrum__bar { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, var(--w-415), var(--w-630) 40%, var(--w-660) 50%, var(--w-850) 78%, var(--w-1072)); opacity: .7; }
  .spectrum__tick { position: absolute; top: 50%; width: 1px; height: .75rem; translate: 0 -50%; background: var(--ink-40); }
  .spectrum__mark { position: absolute; top: 50%; width: .75rem; height: .75rem; border-radius: 50%; background: var(--ink); translate: -50% -50%; left: var(--mark, 30%); transition: left .9s var(--ease-magic); }
  .spectrum__lbl { position: absolute; top: calc(50% + .75rem); translate: -50% 0; color: var(--ink-40); font-size: var(--fs-meta); }
  .waves__list { grid-column: 7 / 13; padding-block: 30svh; }
  .wave { padding-block: 2.25rem; min-height: 46svh; display: grid; align-content: center; gap: .75rem; opacity: .32; transition: opacity var(--dur-mid) var(--ease-magic); }
  .wave.is-active { opacity: 1; }
  .wave__head { display: flex; align-items: baseline; gap: .75rem; }
  .wave__dot { width: .625rem; height: .625rem; border-radius: 50%; background: var(--c); flex: none; translate: 0 -.1em; box-shadow: 0 0 18px var(--c); }
  .wave p { max-width: 30em; }
  .waves__foot { margin-top: 2rem; }
  @media (max-width: 47.99rem) {
    .waves__body { display: block; margin-top: 2.5rem; }
    .waves__stick { height: auto; top: 3.75rem; padding-block: 1.25rem 1.75rem; gap: .75rem; background: linear-gradient(var(--bg) 78%, transparent); z-index: 2; }
    .waves__nm { font-size: 4.5rem; }
    .waves__list { padding-block: 0 20svh; }
    .wave { min-height: 40svh; padding-block: 1.5rem; }
    .waves__glow { left: -40%; right: -10%; top: -30%; bottom: -10%; }
  }

  /* ── 05 · Як користуватися: таймер 10:00 тане з прокруткою ── */
  .use { min-height: 260svh; padding-block: 0; }
  .use__screen { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-content: center; row-gap: 2rem; }
  .use__title { grid-column: 1 / 13; color: var(--ink-55); }
  .use__timer { grid-column: 1 / 8; font-size: clamp(6rem, 21vw, 24rem); line-height: .8; letter-spacing: -.07em; font-variant-numeric: tabular-nums; margin-left: -.05em; }
  .use__steps { grid-column: 8 / 13; display: grid; gap: 1.25rem; align-content: end; }
  .step { display: grid; grid-template-columns: 2.5rem 1fr; gap: .25rem 1rem; opacity: .3; transition: opacity var(--dur-mid) var(--ease-magic); }
  .step.is-on { opacity: 1; }
  .step__ico { grid-row: 1 / 3; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; }
  .step__t { font-weight: var(--w-ui); }
  .step__d { color: var(--ink-55); }
  .use__bar { grid-column: 1 / 13; height: 1px; background: var(--line-faint); position: relative; }
  .use__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .use__foot { grid-column: 1 / 13; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
  .use__foot p { max-width: 36em; }
  @media (max-width: 47.99rem) {
    .use { min-height: 300svh; }
    .use__screen { grid-template-columns: 1fr; align-content: start; padding-top: 5rem; padding-bottom: calc(1.25rem + var(--sticky-h)); row-gap: 1.25rem; }
    .use__title, .use__timer, .use__steps, .use__bar, .use__foot { grid-column: 1 / -1; }
    .use__timer { font-size: 30vw; }
    .use__steps { gap: .9rem; }
    .use__foot .btn { width: 100%; }
  }

  /* ── 06 · Порівняння: три ціни, наша в склі ── */
  .cmp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); margin-top: 4rem; }
  .cmp__col { padding: 1.75rem 1.5rem 1.5rem; display: grid; grid-template-rows: auto auto 1fr; gap: 1.5rem; border-radius: var(--radius); }
  .cmp__col:not(.glass) { color: var(--ink-55); }
  .cmp__name { font-weight: var(--w-ui); }
  .cmp__price { font-size: clamp(2.5rem, 4.2vw, 4.25rem); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cmp__price small { font-size: .3em; letter-spacing: 0; margin-left: .3em; }
  .cmp__sub { display: block; margin-top: .6rem; font-size: var(--fs-caption); letter-spacing: 0; }
  .cmp__rows { display: grid; gap: .9rem; align-content: end; padding-top: 1.25rem; border-top: 1px solid var(--line-faint); }
  .cmp__row { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; }
  .cmp__row dt { color: var(--ink-40); }
  .glass .cmp__row dt { color: var(--ink-55); }
  .why { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); row-gap: 2rem; margin-top: 6rem; align-items: end; }
  .why__text { grid-column: 1 / 8; }
  .why__docs { grid-column: 8 / 13; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
  .why__docs .chip { height: 2.25rem; padding-inline: .875rem; }
  @media (max-width: 47.99rem) {
    .cmp { grid-template-columns: 1fr; margin-top: 2.5rem; }
    .cmp__col { grid-template-rows: auto; padding: 1.25rem; }
    .why { margin-top: 3.5rem; }
    .why__text, .why__docs { grid-column: 1 / -1; justify-content: flex-start; }
  }

  /* ── 07 · Що в коробці: рендер на світлій пластині + картки характеристик ── */
  .box { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); row-gap: 2rem; margin-top: 4rem; align-items: stretch; }
  .box__img { grid-column: 1 / 6; border-radius: var(--radius); overflow: hidden; background: #fff; position: relative; }
  .box__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
  .box__cap { position: absolute; left: 1rem; bottom: .9rem; color: #56626b; }
  .specs { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); align-content: start; }
  .spec { padding: 1.25rem; display: grid; gap: .5rem; align-content: space-between; min-height: 10rem; border-radius: var(--radius); background: var(--glass-bg); }
  .spec__v { font-size: clamp(2rem, 3.2vw, 3.25rem); line-height: .95; letter-spacing: -.045em; white-space: nowrap; }
  .spec__v small { font-size: .45em; letter-spacing: -.01em; margin-left: .15em; }
  .spec__l { color: var(--ink-55); font-size: var(--fs-caption); line-height: var(--lh-caption); }
  .inbox { grid-column: 6 / 13; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
  .inbox .ico { color: var(--ink-55); margin-right: .4rem; }
  @media (max-width: 47.99rem) {
    .box { margin-top: 2.5rem; }
    .box__img { grid-column: 1 / -1; aspect-ratio: 1 / 1; }
    .specs { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .spec { min-height: 8rem; padding: 1rem; }
    .spec__v { font-size: 2rem; }
    .inbox { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: .75rem; }
  }

  /* ── 08 · Для кого не підходить: стан пігулками ── */
  .nofit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); row-gap: 2.5rem; margin-top: 4rem; }
  .nofit__pills { grid-column: 1 / 9; display: flex; flex-wrap: wrap; gap: .625rem; align-content: start; }
  .pill { display: inline-flex; align-items: center; gap: .6rem; height: 3rem; padding-inline: 1.1rem; border-radius: var(--radius); background: var(--glass-bg); font-size: var(--fs-body-lg); letter-spacing: -.01em; }
  .pill .ico { color: var(--ink-55); }
  .nofit__side { grid-column: 9 / 13; display: grid; gap: 1.25rem; align-content: start; }
  .alert { padding: 1.25rem; border-radius: var(--radius); background: color-mix(in oklab, var(--w-415) 16%, transparent); display: grid; gap: .5rem; }
  .alert--eye { background: var(--glass-bg); }
  @media (max-width: 47.99rem) {
    .nofit { margin-top: 2.5rem; }
    .nofit__pills, .nofit__side { grid-column: 1 / -1; }
    .pill { height: auto; min-height: 2.75rem; padding-block: .55rem; font-size: var(--fs-body); }
    .nofit__side .btn { width: 100%; }
  }

  /* ── 09 · Передзамовлення ── */
  .order { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); row-gap: 2.5rem; margin-top: 4rem; align-items: start; }
  .order__offer { grid-column: 1 / 7; display: grid; gap: 2rem; }
  .order__price { font-size: clamp(4rem, 9vw, 9.5rem); line-height: .82; letter-spacing: -.06em; white-space: nowrap; }
  .order__price small { font-size: .22em; letter-spacing: -.01em; margin-left: .2em; }
  .order__after { color: var(--ink-55); margin-top: .9rem; }
  .terms { display: grid; gap: 1rem; }
  .term { display: grid; grid-template-columns: 1.75rem 1fr; gap: 1rem; align-items: start; }
  .term .ico { color: var(--ink-55); translate: 0 .1em; }
  .term b { font-weight: var(--w-ui); }
  .form { grid-column: 8 / 13; padding: 1.5rem; display: grid; gap: 1.25rem; position: sticky; top: 5rem; }
  .form__title { font-size: var(--fs-sublead); line-height: 1.05; letter-spacing: -.02em; }
  .field { display: grid; gap: .5rem; }
  .field label, .field legend { color: var(--caption-ink); font-size: var(--fs-caption); font-weight: var(--w-ui); }
  .field input {
    height: 3.25rem; padding-inline: 1rem; border-radius: var(--radius); font-size: 16px;
    background: var(--field-bg); color: var(--ink);
    outline: 1px solid transparent; transition: outline-color var(--dur-tap), background-color var(--dur-tap);
  }
  .field input::placeholder { color: var(--ink-40); }
  .field input:focus { outline-color: var(--ink-55); background: var(--field-bg-focus); }
  .field.is-bad input { outline-color: var(--err); }
  .field__err { color: var(--err); font-size: var(--fs-caption); display: none; }
  .field.is-bad .field__err { display: block; }
  .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; }
  .seg input { position: absolute; opacity: 0; pointer-events: none; }
  .seg label { height: 2.75rem; display: grid; place-items: center; border-radius: var(--radius); background: var(--field-bg); cursor: pointer; font-size: var(--fs-ui); color: var(--ink); transition: background-color var(--dur-tap), color var(--dur-tap); }
  .seg input:checked + label { background: var(--ink); color: var(--bg); }
  .seg input:focus-visible + label { outline: 2px solid var(--ink-55); }
  .form .btn--solid { width: 100%; }
  .form__safe { color: var(--caption-ink); margin-top: -.5rem; }
  .form__pay { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--ink-55); font-size: var(--fs-caption); text-align: center; }
  .form__legal { color: var(--ink-55); font-size: var(--fs-caption); line-height: var(--lh-caption); }
  .form__legal a { text-decoration: underline; text-underline-offset: .15em; color: var(--caption-ink); }
  .form__done { display: none; gap: 1rem; }
  .form.is-done > :not(.form__done) { display: none; }
  .form.is-done .form__done { display: grid; }
  .form.is-busy .btn--solid { opacity: .6; pointer-events: none; }
  .counter { color: var(--ink-55); }
  .order__img { grid-column: 1 / 7; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; }
  .order__img picture { display: block; height: 100%; }
  .order__img img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 47.99rem) {
    .order { margin-top: 2.5rem; }
    .order__offer, .form, .order__img { grid-column: 1 / -1; }
    .form { position: static; padding: 1.25rem; }
    .order__img { aspect-ratio: 4 / 5; }
  }

  /* ── 10 · Питання ── */
  .faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); row-gap: 2rem; }
  .faq__head { grid-column: 1 / 5; display: grid; gap: 1.25rem; align-content: start; position: sticky; top: 5rem; align-self: start; }
  .faq__list { grid-column: 6 / 13; }
  .qa { border-top: 1px solid var(--line-faint); }
  .qa:last-child { border-bottom: 1px solid var(--line-faint); }
  .qa__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1.25rem; text-align: left; font-size: var(--fs-body-lg); line-height: 1.3; letter-spacing: -.01em; font-weight: var(--w-ui); }
  .qa__q .bi { font-size: 1.25rem; transition: transform var(--dur-mid) var(--ease-magic); flex: none; }
  .qa.is-open .qa__q .bi { transform: rotate(45deg); }
  .qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-mid) var(--ease-magic); }
  .qa.is-open .qa__a { grid-template-rows: 1fr; }
  .qa__a > div { overflow: hidden; }
  .qa__a p { padding-bottom: 1.5rem; color: var(--caption-ink); max-width: 40em; line-height: 1.5; }
  @media (max-width: 47.99rem) {
    .faq__head, .faq__list { grid-column: 1 / -1; position: static; }
  }

  /* ── підвал ── */
  .footer { padding-top: var(--sec-py); padding-bottom: calc(2rem + var(--sticky-h)); overflow: clip; }
  .footer__mark { font-size: 21vw; line-height: .78; letter-spacing: -.075em; margin-left: -.04em; white-space: nowrap; }
  .footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); row-gap: 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-faint); }
  .footer__legal { grid-column: 1 / 7; display: grid; gap: .75rem; color: var(--ink-55); font-size: var(--fs-caption); line-height: var(--lh-caption); }
  .footer__legal b { color: var(--ink); font-weight: var(--w-ui); }
  .footer__links { grid-column: 8 / 10; display: grid; gap: .5rem; align-content: start; }
  .footer__social { grid-column: 10 / 13; display: grid; gap: .5rem; align-content: start; justify-items: end; }
  .todo { color: var(--todo); }
  @media (max-width: 47.99rem) {
    .footer__legal, .footer__links, .footer__social { grid-column: 1 / -1; justify-items: start; }
  }

  /* ── нижня кнопка на телефоні ── */
  .stick { position: fixed; inset-inline: 0; bottom: 0; z-index: calc(var(--z-header) - 1); padding: .625rem var(--pad-x) calc(.625rem + env(safe-area-inset-bottom)); display: none;
           background: linear-gradient(transparent, color-mix(in oklab, var(--bg) 92%, transparent) 40%); transform: translateY(110%); transition: transform var(--dur-mid) var(--ease-magic); }
  .stick .btn { width: 100%; height: 3.25rem; }
  .stick.is-on { transform: none; }
  @media (max-width: 47.99rem) { .stick { display: block; } :root { --sticky-h: 4.5rem; } }

  /* ── опитувальник ── */
  .quiz { position: fixed; inset: 0; z-index: calc(var(--z-header) + 2); background: var(--bg); display: grid; grid-template-rows: auto auto 1fr; padding: var(--header-py) var(--pad-x) calc(1.25rem + env(safe-area-inset-bottom));
          opacity: 0; visibility: hidden; transition: opacity var(--dur-mid) var(--ease-magic), visibility 0s linear var(--dur-mid); overflow-y: auto; }
  .quiz.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-mid) var(--ease-magic); }
  .quiz__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .quiz__prog { height: 1px; background: var(--line-faint); margin-top: 1rem; position: relative; }
  .quiz__prog i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform var(--dur-mid) var(--ease-magic); }
  .quiz__body { width: 100%; max-width: 44rem; margin: 0 auto; align-self: center; display: grid; gap: 1.5rem; padding-block: 2rem; }
  .quiz__q { font-size: var(--fs-statement); line-height: 1.02; letter-spacing: var(--ls-statement); }
  .quiz__hint { color: var(--ink-55); }
  .quiz__opts { display: grid; gap: .5rem; }
  .opt { min-height: 3.5rem; padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--glass-bg); text-align: left; font-size: var(--fs-body-lg); letter-spacing: -.01em; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: background-color var(--dur-tap), color var(--dur-tap); }
  .opt .bi { opacity: 0; transition: opacity var(--dur-tap); }
  .opt.is-picked { background: var(--ink); color: var(--bg); }
  .opt.is-picked .bi { opacity: 1; }
  @media (hover: hover) { .opt:hover:not(.is-picked) { background: var(--glass-bg-hover); } }
  .quiz__nav { display: flex; gap: .5rem; }
  .quiz__nav .btn--solid { flex: 1; }
  .light { display: inline-flex; align-items: center; gap: .6rem; }
  .light i { width: .875rem; height: .875rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 16px var(--c); }

  /* ── службові сторінки ── */
  .doc { padding: 7rem var(--pad-x) 4rem; max-width: 46rem; margin: 0 auto; display: grid; gap: 1.25rem; }
  .doc h1 { font-size: var(--fs-statement); line-height: 1; letter-spacing: var(--ls-statement); margin-bottom: 1rem; }
  .doc h2 { font-size: var(--fs-body-lg); font-weight: var(--w-ui); margin-top: 1.25rem; }
  .doc p, .doc li { color: var(--caption-ink); line-height: 1.55; }
  .doc ul { display: grid; gap: .5rem; padding-left: 1.1rem; list-style: disc; }
  .doc a { text-decoration: underline; text-underline-offset: .15em; }
}

@media (prefers-reduced-motion: reduce) {
  .waves__glow, .spectrum__mark, .wave, .step, .menu, .quiz, .stick, .qa__a, .menu__list .word { transition: none !important; }
  .menu__list .word { transform: none; }
}

/* читабельність: пояснювальний текст не дрібніше 16px на будь-якій ширині */
@layer utilities {
  .spec__l, .waves__foot, .inbox .note, .form__pay, .box__cap, .footer__legal, .form__legal, .faq__head .note { font-size: max(1rem, 16px); line-height: 1.4; }
  .footer__links > *, .footer__social > * { min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; }
}
@layer tokens {
  /* телефон: коротші паузи сцени шаблону, щоб до форми було ближче */
  @media (max-width: 47.99rem) { :root { --hold: 30svh; --product-run: 170svh; } }
}
@layer utilities {
  .hero__safe { font-size: max(.875rem, 15px); line-height: 1.4; }
  .form__safe { font-size: max(1rem, 16px); line-height: 1.4; }
  @media (max-width: 47.99rem) { .hero__safe, .form__safe { font-size: 16px; } }
  .why__facts { color: var(--ink-55); }
}

@layer utilities { .box__img.reveal-image { background-color: #fff; } }

/* справжні фото зразка в «Хвилях», вирізані з підлоги: маска на чорному сторінки, сяє кольором хвилі,
   повільно «дихає» і злегка нахиляється за курсором (лише transform, без бібліотек) */
@layer components {
  .waves__photo { position: relative; width: min(100%, 30rem); margin: 0 0 .5rem; perspective: 900px; }
  .waves__photo .waves__float { position: relative; aspect-ratio: 1000 / 440; transform-style: preserve-3d;
    transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .9s var(--ease-magic); }
  .waves__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0;
    filter: drop-shadow(0 14px 26px color-mix(in oklab, var(--glow) 38%, rgb(60 40 30 / .2))); transition: opacity .7s var(--ease-magic); }
  .waves__photo img.is-on { opacity: 1; }
  .waves__photo figcaption { margin-top: .75rem; color: var(--ink-55); }
  .wave__photo { display: none; }
  .waves__float, .wave__photo img { animation: maska-breathe 7s ease-in-out infinite; }
  @keyframes maska-breathe { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: -1.2deg; } }
  @media (max-width: 47.99rem) {
    .waves__photo { display: none; }
    .wave__photo { display: block; margin: 1.25rem 0 0; width: 100%; }
    .wave__photo img { width: 100%; height: auto; filter: drop-shadow(0 12px 22px color-mix(in oklab, var(--c) 38%, rgb(60 40 30 / .2))); }
    .wave__photo figcaption { margin-top: .5rem; color: var(--ink-55); }
  }
  @media (prefers-reduced-motion: reduce) { .waves__float, .wave__photo img { animation: none; } .waves__photo .waves__float { transform: none; } }
}

/* сцена: перший кадр картинкою одразу; відео проявляється, коли має свій кадр (на телефоні не чорніє) */
@layer utilities {
  .stage__par { background: center / cover no-repeat var(--bg); }
  .stage__media { opacity: 0; }
  .stage__media.is-ready { opacity: 1; }
  .stage__media--2.is-ready { opacity: 0; }
  .stage.is-second .stage__media--2.is-ready { opacity: 1; }
}
@layer utilities { .waves__photo figcaption, .wave__photo figcaption { font-size: max(1rem, 16px); } }

/* світла частина сторінки: усе після сцени, нижня кнопка, опитувальник, службові сторінки,
   шапка над світлим. Токени ті самі, лише інші значення, тож компоненти не переписуються. */
@layer tokens {
  :is(:root, main > .sec, main > .footer, .stick, .quiz, .is-light, .header.is-on-light) {
    --bg: var(--cream);
    --ink: var(--graphite);
    --display-ink: var(--ink);
    --ink-55: color-mix(in oklab, var(--ink) 68%, transparent);
    --ink-40: color-mix(in oklab, var(--ink) 56%, transparent);
    --tint-image: color-mix(in oklab, var(--ink) 6%, transparent);
    --line-faint: color-mix(in oklab, var(--ink) 15%, transparent);
    --caption-ink: color-mix(in oklab, var(--ink) 86%, transparent);
    --glass-bg: rgb(255 255 255 / .66);
    --glass-bg-hover: rgb(255 255 255 / .9);
    --field-bg: color-mix(in oklab, var(--ink) 6%, transparent);
    --field-bg-focus: color-mix(in oklab, var(--ink) 9%, transparent);
    --err: #b3261e;
    --todo: #b3261e;
    color: var(--ink);
  }
}
@layer utilities {
  body.is-light { background-color: var(--bg); }
  ::selection, .is-light ::selection, main > .sec ::selection, main > .footer ::selection { background-color: var(--graphite); color: var(--cream); }
  /* вуаль над роликами кремова: ролики світлі (спальня вранці), текст поверх темний */
  :root { --scene-scrim-top: .18; --scene-scrim-mid: .04; --scene-scrim-bottom: .42; }
  .stage__scrim { background: linear-gradient(180deg,
      rgb(246 240 233 / var(--scene-scrim-top)) 0%, rgb(246 240 233 / var(--scene-scrim-mid)) 35%,
      rgb(246 240 233 / var(--scene-scrim-mid)) 65%, rgb(246 240 233 / var(--scene-scrim-bottom)) 100%); }
  .header { transition: color var(--dur-mid) var(--ease-magic); }
  .header.is-on-light .header__bar { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
  .wave__dot, .light i { box-shadow: 0 0 10px color-mix(in oklab, var(--c) 60%, transparent); }
}
/* текст над світлими роликами: м'яке кремове світіння, щоб читався навіть на темному волоссі */
@layer utilities {
  .stage .hero__title, .stage .hero__lead, .stage .hero__price, .stage .hero__safe,
  .stage .about__statement, .stage .about__top, .stage .product__title, .callout__box {
    text-shadow: 0 0 18px rgb(246 240 233 / .9), 0 0 4px rgb(246 240 233 / .7);
  }
}
/* довгий напис на кнопці форми не розпирає картку на вузькому телефоні */
@layer utilities {
  .form { min-width: 0; }
  .form .btn--solid { white-space: normal; height: auto; min-height: 3.25rem; padding-block: .75rem; text-align: center; line-height: 1.2; }
}

/* ── «Під маскою» (06.11): покадровий стоп-скрол між About і Product. Кадри малюються на canvas
      у сцені; секція лише задає довжину прокрутки й тримає підписи глав на липкому екрані. ── */
@layer utilities {
  .stage__seq { opacity: 0; }
  .stage.is-story .stage__seq { opacity: 1; }
  .story { position: relative; height: var(--story-run, 760svh); margin-top: var(--section-gap); }
  .story__screen { position: sticky; top: 0; height: 100svh; pointer-events: none; }
  .story__ch {
    position: absolute; left: var(--pad-x); bottom: var(--hero-pb);
    width: min(36rem, calc(100% - 2 * var(--pad-x)));
    opacity: 0; visibility: hidden; will-change: opacity, transform;
  }
  .story__kick { color: var(--ink-55); margin-bottom: 1rem; }
  .story__txt { max-width: 30em; }
  .story__tag {
    position: absolute; right: var(--pad-x); top: 6rem; color: var(--ink-55);
    opacity: 0; transition: opacity var(--dur-mid, .4s) ease;
  }
  .story.is-illu .story__tag { opacity: 1; }
  .story__ch--split { inset: 0; width: auto; }
  .story__ch--split .story__note { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: var(--hero-pb); }
  .story__split {
    position: absolute; inset-inline: 0; bottom: 38%; display: grid; grid-template-columns: 1fr 1fr;
    text-align: center;
  }
  .story__note { max-width: 34em; color: var(--ink-55); }
  .story__ch, .story__tag, .story__split { text-shadow: 0 0 18px rgb(246 240 233 / .9), 0 0 4px rgb(246 240 233 / .7); }
  @media (max-width: 47.99rem) { :root { --story-run: 640svh; } .story__tag { top: 5rem; } .story__split { bottom: 30%; } }
}