/* ============================================================
   Deep Digital Marine — "Abyssal Descent" design system
   Pure CSS, no frameworks. 2026 features:
   @layer, oklch(), color-mix(), :has(), text-wrap: balance,
   scroll-driven animations (progressive enhancement).
   ============================================================ */

@layer reset, tokens, base, components, sections, motion;

/* ---------- fonts (self-hosted, latin + latin-ext + cyrillic) ---------- */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/unbounded-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100dvh; }
  img, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  h1, h2, h3, h4 { overflow-wrap: break-word; text-wrap: balance; }
  p, li { overflow-wrap: break-word; }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    /* Abyssal palette — hex fallback first, oklch upgrade below */
    --abyss:   #081018;
    --depth:   #0e1c30;
    --surface: #1a3050;
    --wave:    #2f6fb0;
    --biolum:  #3fe0e8;
    --beacon:  #f0b545;
    --foam:    #f2f7fa;

    --text:       var(--foam);
    --text-dim:   #b6c6d4;
    --text-faint: #7e93a6;

    --glass-bg:     rgb(26 48 80 / .34);
    --glass-border: rgb(63 224 232 / .16);
    --glass-blur:   14px;

    --font-display: "Unbounded", system-ui, sans-serif;
    --font-body:    "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

    --radius: 18px;
    --content: 68rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    --shadow-glow: 0 0 32px rgb(63 224 232 / .18);
  }

  @supports (color: oklch(0% 0 0)) {
    :root {
      --abyss:   oklch(16% .04 250);
      --depth:   oklch(22% .05 245);
      --surface: oklch(30% .06 240);
      --wave:    oklch(55% .13 240);
      --biolum:  oklch(85% .14 195);
      --beacon:  oklch(80% .15 75);
      --foam:    oklch(97% .01 220);
      --text-dim:   color-mix(in oklch, var(--foam) 72%, var(--wave));
      --text-faint: color-mix(in oklch, var(--foam) 46%, var(--depth));
    }
  }

  /* ---- светлая тема «Shallows» (мелководье, переключатель в шапке) ----
     Не «белая бумага», а подъём выше по глубине: фон — светлая вода
     с солнечным светом сверху и чуть более глубокой водой внизу.
     Семантика токенов переворачивается: --abyss = самый глубокий (нижний)
     слой воды, --foam = тёмный текст; компоненты работают на тех же токенах. */
  [data-theme="light"] {
    color-scheme: light;
    --surface: #ddf1f9; /* верх: солнечная поверхность */
    --depth:   #c2e2ef;
    --abyss:   #a8d2e5; /* низ: вода поглубже */
    --void:    #93c3da;
    --wave:    #2f6fb0;
    --biolum:  #0b6f7a; /* тёмная бирюза — контраст на светлой воде */
    --beacon:  #f0b545;
    --foam:    #0f2b3f; /* глубокий морской текст */
    --text-dim:   #2e4d63;
    --text-faint: #557891;
    --glass-bg:     rgb(255 255 255 / .48);
    --glass-border: rgb(11 111 122 / .22);
    --glass-blur:   10px;
    --shadow-glow: 0 0 26px rgb(11 111 122 / .18);
  }
}

/* ---------- base ---------- */
@layer base {
  html {
    color-scheme: dark;
    scroll-behavior: smooth;
    scrollbar-color: var(--surface) var(--abyss);
  }

  :root { --void: #04070c; }
  [data-theme="light"] { --void: #fbfdfe; }

  body {
    font-family: var(--font-body);
    font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
    line-height: 1.6;
    color: var(--text);
    background: linear-gradient(180deg, var(--surface) 0%, var(--depth) 26%, var(--abyss) 62%, var(--void) 100%) fixed;
    background-color: var(--abyss);
    overflow-x: clip;
  }

  ::selection { background: var(--biolum); color: var(--abyss); }

  a { color: var(--biolum); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: .2em; }

  :focus-visible {
    outline: 2px solid var(--biolum);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .sr-only {
    position: absolute; width: 1px; height: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }

  .skip-link {
    position: fixed; top: -100%; left: 1rem; z-index: 100;
    padding: .6rem 1rem; background: var(--beacon); color: var(--abyss);
    border-radius: 0 0 var(--radius) var(--radius); font-weight: 600;
    transition: top .2s;
  }
  .skip-link:focus { top: 0; }
}

/* ---------- components ---------- */
@layer components {
  .glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    /* liquid glass: светлое «преломление» по верхней кромке, тень по нижней */
    box-shadow:
      inset 0 1px 0 rgb(242 247 250 / .1),
      inset 0 -1px 0 rgb(0 0 0 / .2);
  }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: .8em 1.6em;
    border: 1px solid transparent; border-radius: 999px;
    font-family: var(--font-display); font-weight: 500; font-size: .92rem;
    cursor: pointer; white-space: nowrap;
    position: relative; overflow: hidden;
    transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease;
  }
  .btn:hover { text-decoration: none; transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }

  /* liquid glass: спекулярный блик, проезжающий по кнопке на hover */
  .btn::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / .5) 47%, transparent 62%);
    transform: translateX(-130%) skewX(-8deg);
    transition: transform .55s ease;
    pointer-events: none;
  }
  .btn:hover::after { transform: translateX(130%) skewX(-8deg); }

  .btn-beacon {
    background: var(--beacon); color: var(--abyss);
    border-top-color: rgb(255 255 255 / .55);
    border-bottom-color: rgb(0 0 0 / .2);
    box-shadow: 0 4px 22px rgb(240 181 69 / .35), inset 0 -2px 6px rgb(0 0 0 / .12);
  }
  .btn-beacon:hover {
    background: color-mix(in oklch, var(--beacon) 88%, white);
    box-shadow: 0 6px 30px rgb(240 181 69 / .5), inset 0 -2px 6px rgb(0 0 0 / .12);
  }

  .btn-ghost {
    border-color: var(--glass-border); color: var(--foam);
    background: rgb(63 224 232 / .06);
  }
  .btn-ghost:hover { background: rgb(63 224 232 / .14); box-shadow: var(--shadow-glow); }

  .brand-mark {
    width: 2.2rem; height: 2.2rem;
    fill: none; stroke: var(--biolum); stroke-width: 1.8; stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgb(63 224 232 / .55));
  }
  .brand-mark .wave { stroke: var(--beacon); }
  .brand-mark.big { width: 4.5rem; height: 4.5rem; margin-inline: auto; }

  .section-title {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem);
    text-align: center;
    margin-block: 0 clamp(1.6rem, 4vw, 3rem);
  }
}

/* ---------- sections ---------- */
@layer sections {
  /* --- fixed backdrop: rays & bubbles --- */
  .ocean-backdrop {
    position: fixed; inset: 0; z-index: -1;
    overflow: hidden; pointer-events: none;
  }
  .ray {
    position: absolute; top: -20vh; width: 18vw; height: 75vh;
    background: linear-gradient(185deg, rgb(63 224 232 / .10), transparent 75%);
    clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
    filter: blur(6px);
  }
  .ray-1 { left: 12vw; rotate: 8deg; }
  .ray-2 { left: 38vw; rotate: -4deg; width: 26vw; opacity: .7; }
  .ray-3 { right: 8vw; rotate: -12deg; opacity: .5; }

  .bubble {
    position: absolute; bottom: -4vh;
    width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgb(242 247 250 / .5), rgb(63 224 232 / .12) 70%);
  }
  .b1 { left: 8%;  scale: .7; }
  .b2 { left: 26%; scale: 1.1; }
  .b3 { left: 47%; scale: .5; }
  .b4 { left: 64%; scale: .9; }
  .b5 { left: 79%; scale: .6; }
  .b6 { left: 92%; scale: 1.3; }

  /* --- sea divider (layered drifting waves) --- */
  .sea-divider {
    position: relative;
    height: clamp(60px, 9vw, 120px);
    margin-top: clamp(2rem, 6vh, 4rem);
    overflow: hidden;
  }
  .sea-divider .wave {
    position: absolute; bottom: 0; left: 0;
    width: 2880px; height: 100%;
  }
  .wave-1 path { fill: rgb(63 224 232 / .10); }
  .wave-2 path { fill: rgb(47 111 176 / .16); }
  .wave-3 path { fill: rgb(26 48 80 / .45); }

  /* --- ship (идёт по волнам первого разделителя) --- */
  .ship {
    position: absolute; bottom: 26%; left: 11%;
    width: clamp(110px, 16vw, 210px);
    stroke: var(--biolum); stroke-width: 2;
    filter: drop-shadow(0 0 10px rgb(63 224 232 / .25));
    transform-origin: 50% 100%;
  }
  .ship .s-cargo { stroke: var(--wave); }
  .ship .s-light { fill: var(--beacon); stroke: none; }

  /* --- lighthouse (над глубоким CTA) --- */
  .lighthouse {
    width: clamp(140px, 18vw, 220px);
    margin-bottom: -.6rem;
    stroke-width: 2;
    overflow: visible;
  }
  .lighthouse .lh-tower, .lighthouse .lh-top, .lighthouse .lh-rock {
    stroke: var(--foam);
  }
  .lighthouse .lh-stripe { stroke: var(--biolum); }
  .lighthouse .lh-lamp {
    fill: var(--beacon); stroke: none;
    filter: drop-shadow(0 0 8px var(--beacon));
  }
  .lighthouse .lh-beam {
    fill: var(--beacon); opacity: .22;
  }
  .lh-beam-wrap { transform-origin: 110px 52px; }

  /* --- jellyfish (декор глубоких секций) --- */
  .jellyfish {
    position: absolute;
    width: clamp(38px, 5vw, 60px);
    stroke: var(--biolum); stroke-width: 1.6;
    opacity: .22;
    pointer-events: none;
  }
  .jellyfish.j-right { right: calc(var(--gutter) * .6); top: 14%; }
  .jellyfish.j-left { left: calc(var(--gutter) * .6); top: 30%; rotate: 8deg; }
  @media (max-width: 48rem) { .jellyfish { display: none; } }

  /* --- caustics (подводные блики света) --- */
  .caustics {
    position: absolute; inset: 0 0 auto 0;
    height: 72vh; width: 100%;
    mix-blend-mode: screen;
    opacity: .32;
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
    mask-image: linear-gradient(180deg, #000 30%, transparent);
    display: none; /* включается только на десктопе при разрешённом motion */
  }

  /* --- depth markers (отметки глубины у секций) --- */
  .trust, .features, .how, .support, .faq { position: relative; }
  .trust::after, .features::after, .how::after, .support::after, .faq::after {
    position: absolute; top: .4rem; left: var(--gutter);
    font-size: .7rem; letter-spacing: .28em;
    color: var(--text-faint); opacity: .55;
    pointer-events: none;
  }
  .trust::after    { content: "— 200 M"; top: -1.8rem; }
  .features::after { content: "— 1000 M"; }
  .how::after      { content: "— 2500 M"; }
  .support::after  { content: "— 3200 M"; }
  .faq::after      { content: "— 4000 M"; }

  /* --- depth meter (scroll progress) --- */
  .depth-meter {
    position: fixed; top: 0; right: 0; z-index: 60;
    width: 4px; height: 100dvh;
    background: rgb(63 224 232 / .08);
  }
  .depth-meter i {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(180deg, var(--biolum), var(--wave));
    transform-origin: top;
    scale: 1 0;
  }

  /* --- nav --- */
  .site-nav {
    position: sticky; top: .75rem; z-index: 50;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .6rem 1.25rem;
    max-width: var(--content);
    margin: .75rem auto 0;
    padding: .55rem 1.1rem;
    margin-inline: max(var(--gutter), calc((100% - var(--content)) / 2));
  }
  .brand {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--font-display); font-size: .95rem; color: var(--foam);
    margin-right: auto;
    white-space: nowrap;
  }
  .brand:hover { text-decoration: none; }
  .brand b { color: var(--biolum); font-weight: 600; }
  .nav-links { display: flex; align-items: center; gap: 1.1rem; }
  .nav-links a { color: var(--text-dim); font-size: .95rem; }
  .nav-links a:hover { color: var(--foam); text-decoration: none; }
  .nav-links .btn { padding: .45em 1.1em; font-size: .8rem; color: var(--foam); }
  .lang-switch { display: flex; gap: .15rem; }
  .lang-switch a {
    padding: .3em .55em; border-radius: 8px;
    font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    color: var(--text-faint);
  }
  .lang-switch a:hover { color: var(--foam); text-decoration: none; }
  .lang-switch a.active { color: var(--abyss); background: var(--biolum); }

  /* Узкие экраны: бренд + языки в первом ряду, ссылки — вторым рядом.
     Без этого шапка переполнялась и обрезала переключатель языков. */
  @media (max-width: 40rem) {
    .site-nav { padding: .55rem .9rem; top: .5rem; }
    .brand { font-size: .85rem; flex: 1 1 auto; margin-right: 0; }
    .lang-switch { order: 2; margin-left: auto; }
    .nav-links {
      order: 3; flex-basis: 100%;
      gap: 1rem;
      border-top: 1px solid rgb(63 224 232 / .1);
      padding-top: .55rem;
    }
    .nav-links .btn { margin-left: auto; }
  }
  @media (max-width: 22rem) {
    .brand span { display: none; } /* только якорь на сверхузких */
  }

  /* --- hero --- */
  .hero {
    display: grid; justify-items: center; text-align: center;
    max-width: var(--content); margin-inline: auto;
    padding: clamp(4rem, 12vh, 8rem) var(--gutter) clamp(4rem, 10vh, 6rem);
  }
  .hero-kicker {
    font-size: .85rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--biolum); margin-bottom: 1.2rem;
  }
  .hero-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(2rem, 1.2rem + 4.5vw, 4.2rem);
    line-height: 1.12;
    /* «Вода в буквах»: волнистая ватерлиния поверх базового градиента,
       обе картинки обрезаны по тексту. Волна дрейфует (см. @layer motion). */
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='100' viewBox='0 0 260 100'%3E%3Cpath d='M0 57 C 32 50, 66 64, 98 57 S 163 50, 195 57 S 244 64, 260 57 V100 H0 Z' fill='rgba(63,224,232,0.42)'/%3E%3Cpath d='M0 61 C 40 55, 90 68, 130 61 S 220 55, 260 61 V100 H0 Z' fill='rgba(47,111,176,0.35)'/%3E%3C/svg%3E"),
      linear-gradient(115deg, var(--foam) 55%, var(--biolum));
    background-size: 260px 100%, 100% 100%;
    background-repeat: repeat-x, no-repeat;
    background-clip: text; -webkit-background-clip: text; color: transparent;
    max-width: 17ch;
  }
  .hero-sub {
    max-width: 46ch; margin-top: 1.4rem;
    font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
    color: var(--text-dim);
  }
  .hero-note { margin-top: .9rem; font-size: .85rem; color: var(--text-faint); }

  .waitlist-form {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
    margin-top: 2.2rem; width: min(100%, 34rem);
  }
  .waitlist-form input[type="email"] {
    flex: 1 1 14rem;
    padding: .8em 1.2em;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgb(8 16 24 / .6);
    color: var(--foam);
    transition: border-color .2s, box-shadow .2s;
  }
  .waitlist-form input[type="email"]::placeholder { color: var(--text-faint); }
  .waitlist-form input[type="email"]:focus {
    outline: none; border-color: var(--biolum); box-shadow: var(--shadow-glow);
  }
  /* :has() — подсветить кнопку, когда email валиден */
  .waitlist-form:has(input:valid:not(:placeholder-shown)) .btn-beacon {
    box-shadow: 0 6px 34px rgb(240 181 69 / .6);
  }
  .waitlist-done {
    margin-top: 2.2rem; padding: 1rem 1.6rem;
    border-radius: var(--radius);
    background: rgb(63 224 232 / .1); border: 1px solid var(--glass-border);
    color: var(--biolum); font-weight: 500;
  }
  .waitlist-error { margin-top: .8rem; color: #ff9d7a; font-size: .9rem; }

  .scroll-hint {
    margin-top: clamp(2.5rem, 8vh, 5rem);
    display: grid; justify-items: center; gap: .5rem;
    font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--text-faint);
  }
  .scroll-hint span {
    width: 1px; height: 3.2rem;
    background: linear-gradient(180deg, transparent, var(--biolum));
  }

  /* --- trust strip --- */
  .trust {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    max-width: var(--content);
    margin-inline: max(var(--gutter), calc((100% - var(--content)) / 2));
    padding: 1.4rem 1.6rem;
    text-align: center;
  }
  .trust-item b {
    display: block;
    font-family: var(--font-display); font-size: 1.6rem; color: var(--biolum);
  }
  .trust-item span { font-size: .85rem; color: var(--text-dim); }

  /* --- generic section shell --- */
  .split, .features, .how, .support, .faq, .cta-deep {
    max-width: var(--content);
    margin-inline: auto;
    padding: clamp(3rem, 8vh, 5.5rem) var(--gutter) 0;
  }

  /* --- support & partnerships --- */
  .support { position: relative; text-align: center; }
  .support .section-title {
    display: flex; align-items: center; justify-content: center; gap: .7rem;
  }
  .support .section-title .cell-icon { width: 2rem; height: 2rem; }
  .support-lead {
    max-width: 52ch; margin: -1rem auto 2rem;
    color: var(--text-dim);
  }
  .support-grid {
    display: grid; gap: 1.1rem; text-align: left;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
  .support-ai {
    margin-top: 1.6rem;
    font-size: .9rem; color: var(--biolum);
  }
  .support-ai::before { content: "✦ "; }

  /* --- problem / solution --- */
  .split {
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }
  .split-col { padding: 1.8rem; border-radius: var(--radius); }
  .split-col h2 {
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
    margin-bottom: 1.1rem;
  }
  .split-col ul { padding-left: 1.1rem; display: grid; gap: .65rem; color: var(--text-dim); }
  .problem { border: 1px dashed rgb(255 157 122 / .25); }
  .problem h2 { color: #ffb59a; }
  .problem li::marker { content: "✗ "; color: #ff9d7a; }
  .solution h2 { color: var(--biolum); }
  .solution li::marker { content: "✓ "; color: var(--biolum); }

  /* --- bento --- */
  .features { max-width: 76rem; }
  .bento {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }
  .cell { padding: 1.6rem; transition: translate .25s ease, box-shadow .3s ease, border-color .3s ease; }
  .cell:hover {
    translate: 0 -4px;
    border-color: rgb(63 224 232 / .4);
    box-shadow: var(--shadow-glow);
  }
  .cell h3 {
    font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
    margin-bottom: .6rem;
    display: flex; align-items: center; gap: .6rem;
  }
  .cell-icon {
    width: 1.5rem; height: 1.5rem; flex: none;
    fill: none; stroke: var(--biolum); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgb(63 224 232 / .45));
  }
  .cell p { color: var(--text-dim); font-size: .95rem; }
  @media (min-width: 56rem) {
    .bento { grid-template-columns: repeat(4, 1fr); }
    .cell-wide { grid-column: span 2; }
  }

  /* --- how it works --- */
  .steps {
    list-style: none; padding: 0; counter-reset: step;
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
  .steps li { padding: 1.6rem; position: relative; }
  .steps li > b {
    display: grid; place-items: center;
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--wave); color: var(--foam);
    font-family: var(--font-display);
    margin-bottom: 1rem;
  }
  .steps h3 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
  .steps p { color: var(--text-dim); font-size: .93rem; }

  /* --- deep CTA --- */
  .cta-deep {
    text-align: center;
    display: grid; justify-items: center; gap: .9rem;
  }
  .cta-deep h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
    text-shadow: 0 0 40px rgb(63 224 232 / .35);
  }
  .cta-deep p { color: var(--text-dim); max-width: 42ch; }

  /* --- FAQ --- */
  .faq { display: grid; gap: .8rem; padding-bottom: 1rem; }
  .faq details { padding: 0; overflow: hidden; }
  .faq summary {
    padding: 1.1rem 1.4rem; cursor: pointer;
    font-weight: 600; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+"; font-family: var(--font-display);
    color: var(--biolum); transition: rotate .2s;
  }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq details p { padding: 0 1.4rem 1.2rem; color: var(--text-dim); }

  /* --- footer --- */
  .site-footer {
    margin-top: clamp(3rem, 8vh, 5rem);
    border-top: 1px solid rgb(63 224 232 / .1);
    background: rgb(4 7 12 / .6);
  }
  .footer-inner {
    max-width: var(--content); margin-inline: auto;
    padding: 1.6rem var(--gutter);
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
    font-size: .85rem; color: var(--text-faint);
  }
  .footer-inner nav { display: flex; gap: 1.2rem; }

  /* --- blog --- */
  .blog {
    max-width: var(--content); margin-inline: auto;
    padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) 0;
    min-height: 60dvh;
  }
  .blog-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  }
  .blog-grid .cell { color: var(--text); }
  .blog-grid .cell:hover { text-decoration: none; }
  .blog-date {
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-faint);
  }
  .blog-empty { padding: 2.2rem; text-align: center; color: var(--text-dim); }
  .blog-post { padding: clamp(1.6rem, 5vw, 3rem); }
  .blog-post h1 {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.4rem);
    margin: .4rem 0 1.4rem;
  }
  .blog-body { color: var(--text-dim); display: grid; gap: 1rem; }
  .blog-body h2, .blog-body h3 { color: var(--foam); margin-top: 1rem; }
  .blog-body img { border-radius: var(--radius); }
  .blog-body pre {
    overflow-x: auto; padding: 1rem;
    background: rgb(4 7 12 / .7); border-radius: 12px;
  }
  .blog-body blockquote {
    border-left: 3px solid var(--biolum);
    padding-left: 1rem; font-style: italic;
  }

  /* --- theme toggle (лендинг) --- */
  .theme-toggle {
    display: grid; place-items: center;
    width: 2.1rem; height: 2.1rem;
    border: 1px solid var(--glass-border); border-radius: 50%;
    background: transparent; color: var(--text-dim);
    cursor: pointer;
    transition: color .2s, box-shadow .2s;
  }
  .theme-toggle:hover { color: var(--foam); box-shadow: var(--shadow-glow); }
  .theme-toggle svg {
    width: 1.05rem; height: 1.05rem;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  }
  .theme-toggle .tt-moon { display: none; }
  [data-theme="light"] .theme-toggle .tt-sun { display: none; }
  [data-theme="light"] .theme-toggle .tt-moon { display: block; }

  /* --- light theme: точечные переопределения литеральных цветов --- */
  [data-theme="light"] .waitlist-form input[type="email"] {
    background: rgb(255 255 255 / .82);
    color: var(--foam);
  }
  [data-theme="light"] .btn-ghost { background: rgb(14 124 134 / .07); color: var(--foam); }
  [data-theme="light"] .btn-ghost:hover { background: rgb(14 124 134 / .14); }
  [data-theme="light"] .hero-title {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='100' viewBox='0 0 260 100'%3E%3Cpath d='M0 57 C 32 50, 66 64, 98 57 S 163 50, 195 57 S 244 64, 260 57 V100 H0 Z' fill='rgba(14,124,134,0.5)'/%3E%3Cpath d='M0 61 C 40 55, 90 68, 130 61 S 220 55, 260 61 V100 H0 Z' fill='rgba(47,111,176,0.4)'/%3E%3C/svg%3E"),
      linear-gradient(115deg, var(--foam) 55%, var(--biolum));
  }
  /* на мелководье --abyss светлый, поэтому тёмный текст задаём явно */
  [data-theme="light"] .btn-beacon { color: #0f2b3f; }
  [data-theme="light"] .lang-switch a.active { color: #fff; }
  [data-theme="light"] .skip-link { color: #0f2b3f; }
  [data-theme="light"] .cell-icon { filter: drop-shadow(0 0 4px rgb(255 255 255 / .6)); }
  [data-theme="light"] ::selection { background: var(--biolum); color: #fff; }
  [data-theme="light"] .waitlist-done { background: rgb(14 124 134 / .08); }
  [data-theme="light"] .waitlist-error { color: #b3400f; }
  [data-theme="light"] .problem { border-color: rgb(179 64 15 / .35); }
  [data-theme="light"] .problem h2 { color: #b3400f; }
  [data-theme="light"] .problem li::marker { color: #b3400f; }
  [data-theme="light"] .cell:hover { border-color: rgb(14 124 134 / .4); }
  [data-theme="light"] .steps li > b { color: #fff; }
  [data-theme="light"] .site-footer {
    background: rgb(255 255 255 / .5);
    border-top-color: rgb(22 40 58 / .12);
  }
  /* лучи в мелководье — солнечные, белые */
  [data-theme="light"] .ray {
    background: linear-gradient(185deg, rgb(255 255 255 / .5), transparent 75%);
    filter: blur(8px);
  }
  /* пузыри — серебристые, видимые на светлой воде */
  [data-theme="light"] .bubble {
    background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .9), rgb(47 111 176 / .25) 70%);
    box-shadow: 0 0 4px rgb(255 255 255 / .5);
  }
  [data-theme="light"] .caustics { display: none !important; }
  [data-theme="light"] .depth-meter { background: rgb(11 111 122 / .14); }
  /* волны остаются СИНИМИ — глубина под нами */
  [data-theme="light"] .wave-1 path { fill: rgb(20 70 110 / .14); }
  [data-theme="light"] .wave-2 path { fill: rgb(47 111 176 / .22); }
  [data-theme="light"] .wave-3 path { fill: rgb(20 70 110 / .3); }
  [data-theme="light"] .ship { filter: drop-shadow(0 0 8px rgb(255 255 255 / .5)); }
  [data-theme="light"] .lh-beam { opacity: .3; }
  [data-theme="light"] .blog-body pre { background: rgb(22 40 58 / .07); }
  [data-theme="light"] .faq details p,
  [data-theme="light"] .blog-body { color: var(--text-dim); }

  /* --- coming soon --- */
  .coming-soon {
    min-height: 100dvh;
    display: grid; place-content: center; justify-items: center;
    text-align: center;
    padding: 2rem var(--gutter);
  }
  .coming-soon .hero-kicker { margin-top: 1.4rem; }
  .coming-soon-foot { margin-top: 3rem; font-size: .8rem; color: var(--text-faint); }
}

/* ---------- motion ----------
   Двухуровневая политика:
   1) Мягкое ambient-движение (медленный дрейф малой амплитуды: волны, корабль,
      вода в буквах, луч маяка, медузы) — ВСЕГДА включено. Оно декоративно,
      плавно и не триггерит вестибулярку, а «уменьшить движение» у многих
      включено ОС/батарейным режимом без ведома пользователя.
   2) Существенное движение (пузыри через весь экран, мерцающая каустика,
      скролл-параллакс) — только при prefers-reduced-motion: no-preference. */
@layer motion {
  /* --- уровень 1: мягкий ambient, всегда --- */

  /* волны дрейфуют с разной скоростью (ширина слоя = 2 периода экрана) */
  .wave-1 { animation: wave-drift 22s linear infinite; }
  .wave-2 { animation: wave-drift 15s linear infinite reverse; }
  .wave-3 { animation: wave-drift 34s linear infinite; }
  @keyframes wave-drift {
    to { transform: translateX(-1440px); }
  }

  /* ватерлиния в буквах заголовка медленно плывёт */
  .hero-title { animation: title-water 14s linear infinite; }
  @keyframes title-water {
    to { background-position: 260px 0, 0 0; }
  }

  /* корабль покачивается на волнах */
  .ship { animation: ship-bob 7s ease-in-out infinite alternate; }
  @keyframes ship-bob {
    from { transform: translateY(0) rotate(-1.4deg); }
    to   { transform: translateY(7px) rotate(1.6deg); }
  }

  /* луч маяка медленно обводит горизонт */
  .lh-beam-wrap { animation: lh-sweep 9s ease-in-out infinite alternate; }
  @keyframes lh-sweep {
    from { transform: rotate(-14deg); }
    to   { transform: rotate(14deg); }
  }
  .lighthouse .lh-lamp { animation: lamp-pulse 3s ease-in-out infinite; }
  @keyframes lamp-pulse {
    50% { opacity: .5; }
  }

  /* медузы дрейфуют */
  .jellyfish { animation: jelly-drift 11s ease-in-out infinite alternate; }
  .jellyfish.j-left { animation-duration: 14s; animation-delay: -5s; }
  @keyframes jelly-drift {
    from { transform: translateY(0); }
    to   { transform: translateY(-26px) translateX(8px); }
  }

  /* лучи света плавно покачиваются */
  .ray { animation: sway 9s ease-in-out infinite alternate; }
  .ray-2 { animation-delay: -3s; }
  .ray-3 { animation-delay: -6s; }
  @keyframes sway {
    from { opacity: .55; translate: -1.5vw 0; }
    to   { opacity: 1;   translate: 1.5vw 0; }
  }

  .scroll-hint span { animation: drip 2.4s ease-in-out infinite; transform-origin: top; }
  @keyframes drip {
    0%   { scale: 1 0; }
    55%  { scale: 1 1; }
    100% { scale: 1 1; opacity: 0; }
  }

  /* --- уровень 2: только при разрешённом motion --- */
  @media (prefers-reduced-motion: no-preference) {
    /* bubbles rise forever */
    .bubble { animation: rise 14s linear infinite; }
    .b2 { animation-duration: 11s; animation-delay: -3s; }
    .b3 { animation-duration: 18s; animation-delay: -8s; }
    .b4 { animation-duration: 9s;  animation-delay: -5s; }
    .b5 { animation-duration: 16s; animation-delay: -11s; }
    .b6 { animation-duration: 12s; animation-delay: -2s; }
    @keyframes rise {
      to { translate: 0 -110vh; opacity: 0; }
    }

    /* каустика — только десктоп (фильтр дорогой для мобильных GPU) */
    @media (min-width: 64rem) {
      .caustics { display: block; }
    }

    /* scroll-driven (Chromium+, silently skipped elsewhere) */
    @supports (animation-timeline: scroll()) {
      .depth-meter i {
        animation: descend linear both;
        animation-timeline: scroll(root);
      }
      @keyframes descend { from { scale: 1 0; } to { scale: 1 1; } }

      /* deepen: rays fade away as you dive */
      .ocean-backdrop {
        animation: deepen linear both;
        animation-timeline: scroll(root);
      }
      @keyframes deepen {
        from { opacity: 1; }
        to   { opacity: .25; }
      }

      /* sections surface into view.
         ВАЖНО: только transform, БЕЗ opacity — если у браузера частичная
         поддержка scroll-timeline, контент никогда не окажется скрытым. */
      .trust, .split-col, .cell, .steps li, .faq details, .cta-deep {
        animation: surface .6s ease both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
      @keyframes surface {
        from { translate: 0 1.6rem; }
        to   { translate: 0 0; }
      }
    }
  }

  /* при явном reduce ambient-движение замедляем ещё сильнее */
  @media (prefers-reduced-motion: reduce) {
    .wave-1, .wave-2, .wave-3 { animation-duration: 60s; }
    .hero-title { animation-duration: 40s; }
    .ship { animation-duration: 14s; }
    .scroll-hint span { animation: none; scale: 1 1; }
  }
}