:root{
  --bg:#0b0d10;
  --card:#0f0f11;
  --text:#f4f4f5;
  --muted:#b0b0b8;
  --ring:rgba(255,255,255,.08);
  --shadow:0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  --radius:22px;
  --container:1100px;
  --hdr-h:64px;

  /* строгий цвет для LABS */
  --labs:#9BB0D9; /* steel-blue */
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* === BACKDROP (лёгкие туманности) === */
body{
  margin:0; color:var(--text);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.45; letter-spacing:.01em;
  background:#050608; position:relative;
}
body::before{
  content:""; position:fixed; inset:-30vh -30vw; z-index:-3; pointer-events:none;
  background:
    radial-gradient(1100px 800px at 50% 125%, rgba(11,32,58,.68), rgba(7,10,14,0) 82%),
    radial-gradient(900px 700px  at 15% 10%,  rgba(40,12,63,.22), rgba(14,17,24,0) 72%),
    radial-gradient(1000px 760px at 85% 20%, rgba(11,54,86,.20), rgba(14,17,24,0) 70%),
    radial-gradient(800px 620px  at 80% 80%, rgba(16,61,71,.14), rgba(14,17,24,0) 70%),
    linear-gradient(180deg, rgba(8,12,18,.28), rgba(8,12,18,0));
  background-repeat:no-repeat;
  filter:saturate(108%);
}

/* === STARFIELD CANVAS (на весь вьюпорт) === */
/* Starfield fullscreen without iOS address bar jank */
.starfield{
  position:fixed; inset:0; width:100%;
  height:100vh;           /* базовый фолбек */
  pointer-events:none; z-index:-1;
}
@supports (height: 100dvh){ .starfield{ height:100dvh; } } /* если есть dvh */
@supports (height: 100svh){ .starfield{ height:100svh; } } /* предпочитаем стабильную высоту */
.starfield canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

/* LAYOUT */
.container{width:min(var(--container), 92%); margin-inline:auto}
.section{scroll-margin-top:calc(var(--hdr-h) + 12px); content-visibility:auto; contain-intrinsic-size: 800px 1000px;}

/* HEADER */
.site-header{
  position:sticky; top:0; height:var(--hdr-h); z-index:10;
  background:linear-gradient(180deg, rgba(8,12,18,.7), rgba(8,12,18,.35));
  border-bottom:1px solid rgba(255,255,255,.06);
}
@supports (backdrop-filter: blur(6px)){
  body:not(.ultra) .site-header{ backdrop-filter:saturate(120%) blur(8px); }
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:var(--hdr-h);}
.logo{
  font-family:"Space Grotesk", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800; font-size:21px; letter-spacing:.2px;
  text-decoration:none; color:var(--text);
  display:inline-flex; align-items:center; gap:6px;
}
.logo span{
  color:var(--labs);
  text-shadow:0 0 10px color-mix(in oklab, var(--labs) 15%, transparent);
}
.logo:hover span{ text-shadow:0 0 18px color-mix(in oklab, var(--labs) 25%, transparent); }
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:#cfd3db; text-decoration:none; font-weight:600; opacity:.9}
.nav a:hover{opacity:1}
.nav-cta{padding:8px 12px; border-radius:10px; background:#fff; color:#0b0d10 !important;}

/* HERO */
.hero{position:relative; min-height:calc(100vh - var(--hdr-h)); display:grid; place-items:center; overflow:hidden;}
.hero .ring{position:absolute; inset:12px; border:1px solid var(--ring); border-radius:28px; pointer-events:none}
.hero-inner{position:relative; z-index:1; text-align:center; padding-block:110px 80px}
.hero h1{margin:0 0 24px; font-size: clamp(38px, 7.2vw, 80px); font-weight:800; letter-spacing:-.02em;}
.hero h1 .way{display:inline-block}
.hero h1 em{font-family:"Playfair Display", Georgia, serif; font-weight:700; font-style:italic;}
.tagline{max-width:720px; margin:0 auto 22px; color:var(--muted); font-size:clamp(14px, 1.6vw, 18px)}
.scroll-note{margin:22px auto 24px; color:#cdd0d6; opacity:.7; font-weight:600}
.signup-inline{display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap}
.signup-inline .btn-ghost{background:transparent; border:1px solid rgba(255,255,255,.12); color:#e9edf6}
.input{width:min(420px, 80vw); background:#0e0f12; color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:16px 16px; outline:none; font-size:16px}
.input::placeholder{color:#8d93a1}
.btn{padding:15px 18px; border-radius:12px; background:#ffffff; color:#0a0a0a; font-weight:700; border:none; cursor:pointer}
.btn:hover{filter:brightness(.95)}
.form-success{margin-top:12px; color:#d3ecff; font-weight:700; letter-spacing:.01em}

/* GRID */
.grid{padding:90px 0 40px}
.grid .wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border-radius:var(--radius); box-shadow:var(--shadow); min-height:320px; position:relative; overflow:hidden}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.card.content{display:flex; align-items:flex-end}
.card .pad{padding:38px}
h2{margin:0 0 12px; font-weight:800; letter-spacing:-.02em; font-size:clamp(26px, 3.5vw, 44px)}
p{margin:0; color:#aeb2bb; font-size:clamp(14px, 1.6vw, 17px)}

/* === VIDEO CARD: scale-box (масштаб без изменения пропорций) === */
.card.video{display:flex; align-items:center; justify-content:center;}
.card.video .video-frame{
  position:relative;
  width:100%;
  /* Плейсхолдер до инициализации JS/метаданных */
  aspect-ratio:16/9;
  border-radius:inherit; overflow:hidden;
  background:
    radial-gradient(900px 650px at 30% 20%, rgba(168,200,255,.06), transparent 70%),
    radial-gradient(720px 560px at 70% 75%, rgba(120,70,200,.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  display:block;
}

/* Внутренняя сцена фиксированного размера — масштабируется JS-ом */
.card.video .scale-inner{
  position:relative;
  width:var(--baseW,1280px);
  height:var(--baseH,720px);
  transform-origin: top left;
}
.card.video video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;                 /* без обрезки; можно data-fit="cover" в JS */
  display:block; background:#070a10;
  border-radius:inherit;
}
.card.video .video-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:#e9edf6; font-weight:700; letter-spacing:.02em; opacity:.7; transition:opacity .25s;
  pointer-events:none;
}
.card.video .playmark{
  display:inline-block; font-size:18px; padding:10px 12px; border-radius:999px;
  background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)
}
.card.video:hover .video-overlay{opacity:.45}

/* PROMISE & FINAL */
.promise{padding:120px 0 30px; text-align:center}
.promise h3{margin:0 auto 16px; font-size:clamp(26px, 4.2vw, 44px); font-weight:900; letter-spacing:-.02em; max-width:980px}
.promise p{max-width:820px; margin:0 auto; color:var(--muted)}

.final{padding:60px 0 120px; text-align:center}
.final h4{margin:0 0 10px; font-size:clamp(22px, 3vw, 36px); font-weight:900}
.final p{margin:0 0 22px; color:var(--muted)}
.final form{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.final .input{background:#0d0f12}
.final .btn{padding:14px 28px}

/* FOOTER */
.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:24px 0 40px; background:linear-gradient(180deg, rgba(8,12,18,.25), rgba(8,12,18,.05))}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:16px}
.footer-brand{display:flex; flex-direction:column; gap:6px; color:#cfd3db}
.footer-nav{display:flex; gap:16px}
.footer-nav a{color:#cfd3db; text-decoration:none; opacity:.9}
.footer-nav a:hover{opacity:1}

/* RESPONSIVE */
@media (max-width: 900px){
  .grid .wrap{grid-template-columns:1fr;}
  .card{min-height:240px}
  .card.content{align-items:flex-start}
  .nav{gap:12px}
  .nav-cta{display:none}
}

/* ultra-режим для совсем слабых девайсов */
body.ultra .site-header{backdrop-filter:none !important}