/* ============================================================
   AVERYANOVA — digital studio
   Concept: "Глубина". Abyss dark + bioluminescent accent + gold.
   ============================================================ */

:root{
  --abyss:      #04080E;
  --abyss-2:    #070E18;
  --abyss-3:    #0A1523;
  --deep:       #0E1C2C;
  --line:       rgba(150, 200, 220, .12);
  --line-2:     rgba(150, 200, 220, .22);
  --text:       #E6F1F4;
  --muted:      #8FA6B4;
  --muted-2:    #6A8291;
  --biolum:     #55E3C8;
  --biolum-2:   #2BB9A6;
  --gold:       #D4AF37;
  --gold-2:     #EFD07A;
  --coral:      #F2726F;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Manrope", -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --e-out: cubic-bezier(.19, 1, .22, 1);
  --e-soft: cubic-bezier(.4, 0, .2, 1);

  --pad: clamp(20px, 4vw, 64px);
  --maxw: 1280px;
}

*, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:96px;
}

body{
  font-family:var(--sans);
  background:var(--abyss);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-weight:400;
}

body.is-loading{ overflow:hidden; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul, ol{ list-style:none; }
svg{ display:block; }
::selection{ background:var(--biolum); color:#03211D; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.skip{
  position:fixed; top:-100px; left:16px; z-index:9999;
  background:var(--biolum); color:#03211D;
  padding:12px 20px; border-radius:999px;
  font-size:14px; font-weight:700;
  transition:top .25s;
}
.skip:focus{ top:16px; }

/* ===== ATMOSPHERE ===== */
.depths{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
  opacity:.9;
}

.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(85,227,200,.07), transparent 60%),
    radial-gradient(80% 60% at 50% 110%, rgba(43,185,166,.10), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(2,4,8,.65) 100%);
}

.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0) }
  25%{ transform:translate(-2%,1%) }
  50%{ transform:translate(1%,-2%) }
  75%{ transform:translate(-1%,-1%) }
  100%{ transform:translate(0,0) }
}

.rays{
  position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.rays span{
  position:absolute; top:-30vh; left:50%;
  width:22vw; height:140vh;
  background:linear-gradient(to bottom, rgba(85,227,200,.10), transparent 70%);
  filter:blur(40px);
  transform-origin:top center;
  animation:raySway 18s ease-in-out infinite;
}
.rays span:nth-child(1){ margin-left:-40vw; transform:rotate(14deg); opacity:.5; animation-delay:0s; }
.rays span:nth-child(2){ margin-left:-8vw;  transform:rotate(-6deg); opacity:.75; animation-delay:-6s; }
.rays span:nth-child(3){ margin-left:22vw;  transform:rotate(9deg);  opacity:.35; animation-delay:-11s; }
.rays span:nth-child(4){ margin-left:-58vw; transform:rotate(-16deg); opacity:.28; animation-delay:-3s; }
@keyframes raySway{
  0%,100%{ opacity:.28 }
  50%{ opacity:.7 }
}

/* custom cursor */
.cursor{
  position:fixed; top:0; left:0; z-index:9000;
  pointer-events:none; mix-blend-mode:screen;
  opacity:0; transition:opacity .3s;
}
body.has-cursor .cursor{ opacity:1; }
.cursor-dot{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--biolum); transform:translate(-50%,-50%);
  box-shadow:0 0 12px var(--biolum);
}
.cursor-ring{
  position:absolute; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(85,227,200,.45);
  transform:translate(-50%,-50%);
  transition:width .28s var(--e-out), height .28s var(--e-out), border-color .28s, background .28s;
}
.cursor.is-hot .cursor-ring{
  width:64px; height:64px;
  background:rgba(85,227,200,.10);
  border-color:rgba(85,227,200,.8);
}

/* scroll line */
.scroll-line{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  height:2px; width:100%;
  pointer-events:none;
}
.scroll-line span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--biolum-2), var(--biolum), var(--gold));
  box-shadow:0 0 14px rgba(85,227,200,.6);
}
/* ===== PRELOADER ===== */
.preloader{
  position:fixed; inset:0; z-index:9500;
  background:var(--abyss);
  display:grid; place-items:center;
  transition:opacity .8s var(--e-soft), visibility .8s;
}
.preloader.done{ opacity:0; visibility:hidden; }
.pre-inner{ text-align:center; width:min(320px, 70vw); }
.pre-mark{
  width:64px; height:64px; margin:0 auto 22px;
  color:var(--gold);
  animation:preSpin 6s linear infinite;
}
@keyframes preSpin{ to{ transform:rotate(360deg) } }
.pre-word{
  font-family:var(--serif);
  font-style:italic;
  font-size:26px;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:20px;
}
.pre-bar{
  height:1px; width:100%;
  background:rgba(150,200,220,.15);
  overflow:hidden;
}
.pre-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--biolum), var(--gold));
  box-shadow:0 0 10px var(--biolum);
  transition:width .25s linear;
}
.pre-depth{
  margin-top:14px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted-2);
}

/* ===== HEADER ===== */
.head{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  transition:background .5s var(--e-soft), backdrop-filter .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.head.scrolled{
  background:rgba(4,8,14,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.head-in{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad);
  height:84px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:height .4s var(--e-out);
}
.head.scrolled .head-in{ height:68px; }

.logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-mark{
  width:38px; height:38px; color:var(--gold);
  transition:transform .7s var(--e-out), color .4s;
}
.logo:hover .logo-mark{ transform:rotate(72deg); color:var(--gold-2); }
.logo-txt{ display:flex; flex-direction:column; line-height:1.1; }
.logo-main{
  font-size:15px; font-weight:800; letter-spacing:.22em;
  color:var(--text);
}
.logo-sub{
  font-family:var(--mono);
  font-size:9px; letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-top:4px;
}

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  position:relative;
  padding:10px 14px;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--muted);
  transition:color .3s;
  white-space:nowrap;
}
.nav a::after{
  content:"";
  position:absolute; left:14px; right:14px; bottom:4px;
  height:1px; background:var(--biolum);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--e-out);
}
.nav a:hover, .nav a.active{ color:var(--text); }
.nav a:hover::after, .nav a.active::after{ transform:scaleX(1); }

.head-right{ display:flex; align-items:center; gap:14px; }

.sound{
  display:flex; align-items:center; gap:9px;
  padding:9px 14px;
  border:1px solid var(--line-2);
  border-radius:999px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2);
  transition:border-color .3s, color .3s, background .3s;
}
.sound:hover{ border-color:rgba(85,227,200,.55); color:var(--text); }
.sound-bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.sound-bars i{
  display:block; width:2px; height:4px;
  background:currentColor;
  border-radius:1px;
  transition:height .3s var(--e-out), background .3s;
}
.sound[aria-pressed="true"]{ color:var(--biolum); border-color:rgba(85,227,200,.5); }
.sound[aria-pressed="true"] .sound-bars i{ animation:soundPulse 1.6s ease-in-out infinite; background:var(--biolum); }
.sound[aria-pressed="true"] .sound-bars i:nth-child(2){ animation-delay:.12s; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(3){ animation-delay:.24s; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(4){ animation-delay:.36s; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(5){ animation-delay:.48s; }
@keyframes soundPulse{ 0%,100%{ height:4px } 50%{ height:12px } }

/* ===== BUTTONS ===== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px;
  border-radius:999px;
  font-size:13.5px; font-weight:700;
  letter-spacing:.02em;
  overflow:hidden;
  transition:transform .35s var(--e-out), box-shadow .35s, color .35s, border-color .35s;
  will-change:transform;
}
.btn svg{
  width:16px; height:16px; fill:none;
  stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s var(--e-out);
}
.btn:hover svg{ transform:translateX(4px); }

.btn-gold{
  background:linear-gradient(135deg, var(--gold-2), var(--gold) 55%, #A9791F);
  color:#1A1305;
  box-shadow:0 10px 34px -12px rgba(212,175,55,.65);
}
.btn-gold::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s var(--e-out);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 44px -12px rgba(212,175,55,.8); }
.btn-gold:hover::after{ transform:translateX(120%); }

.btn-ghost{
  border:1px solid var(--line-2);
  color:var(--text);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{
  border-color:rgba(85,227,200,.6);
  color:var(--biolum);
  transform:translateY(-2px);
}

.head-cta{ padding:12px 22px; font-size:12.5px; }

.burger{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--line-2);
  border-radius:12px;
  position:relative;
}
.burger span{
  position:absolute; left:12px; right:12px; height:1.5px;
  background:var(--text); border-radius:2px;
  transition:transform .4s var(--e-out);
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ bottom:17px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-5.5px) rotate(-45deg); }

.head-progress span{
  display:block; height:1px; width:0%;
  background:linear-gradient(90deg, var(--biolum), var(--gold));
  transition:width .15s linear;
}

/* ===== DEPTH GAUGE ===== */
.gauge{
  position:fixed; left:26px; top:50%;
  transform:translateY(-50%);
  z-index:6000;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:0; transition:opacity .6s var(--e-soft);
  pointer-events:none;
}
.gauge.on{ opacity:1; }
.gauge-ticks{
  width:1px; height:150px;
  background:linear-gradient(to bottom, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
  position:relative;
}
.gauge-ticks::after{
  content:"";
  position:absolute; left:-3px;
  top:calc(var(--p, 0) * 100%);
  width:7px; height:7px; border-radius:50%;
  background:var(--biolum);
  box-shadow:0 0 12px var(--biolum);
}
.gauge-val{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--biolum);
  white-space:nowrap;
}
.gauge-label{
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted-2);
  text-align:center;
  line-height:1.5;
}
/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:150px 0 130px;
  overflow:hidden;
}
.hero-body{ position:relative; z-index:3; }

.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px;
  border:1px solid var(--line-2);
  border-radius:999px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  background:rgba(7,14,24,.5);
  backdrop-filter:blur(8px);
  margin-bottom:clamp(26px, 4vh, 44px);
  opacity:0; animation:fadeUp .9s var(--e-out) .5s forwards;
}
.dot-live{
  width:6px; height:6px; border-radius:50%;
  background:var(--biolum);
  box-shadow:0 0 10px var(--biolum);
  animation:livePulse 2.2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes livePulse{
  0%,100%{ opacity:1; transform:scale(1) }
  50%{ opacity:.35; transform:scale(.8) }
}

/* ============================================================
   ATMOSPHERE — реальные фото студии как полупрозрачный фон
   Слой лежит за контентом (z-index:-1), тяжёлое размытие + маска
   по краям: фото читается как фактура, а не как картинка.
   ============================================================ */
.has-atmo{ isolation:isolate; }

.atmo{
  position:absolute;
  inset:0;
  z-index:-1;
  margin:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  animation:atmoIn 2.4s var(--e-out) forwards;
}
.atmo picture,
.atmo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.atmo img{
  object-fit:cover;
  object-position:center;
  /* обесцвечиваем и подкрашиваем под палитру — уходит «фотографичность» */
  filter:grayscale(.72) contrast(.9) brightness(.78) blur(1.2px);
  opacity:.16;
  transform:scale(1.06);
  animation:atmoDrift 46s ease-in-out infinite alternate;
  will-change:transform;
  /* мягкие края: фото растворяется, не обрывается линией */
  -webkit-mask-image:radial-gradient(78% 82% at 50% 46%, #000 0%, rgba(0,0,0,.55) 52%, transparent 100%);
  mask-image:radial-gradient(78% 82% at 50% 46%, #000 0%, rgba(0,0,0,.55) 52%, transparent 100%);
}
/* бирюзовый и золотой «перекрас» поверх серого */
.atmo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 70% at 22% 18%, rgba(85,227,200,.14), transparent 62%),
    radial-gradient(52% 62% at 82% 82%, rgba(212,175,55,.11), transparent 64%),
    linear-gradient(to bottom, rgba(4,8,14,.55), rgba(4,8,14,.2) 40%, rgba(4,8,14,.6));
  mix-blend-mode:screen;
  opacity:.85;
}
/* тонкая зернистость, чтобы фото не выглядело «цифровым» */
.atmo-grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* варианты: у контактов фото чуть заметнее, у процесса — тише */
.atmo--contact img{ opacity:.2; filter:grayscale(.62) contrast(.94) brightness(.72) blur(1.4px); }
.atmo--soft img{ opacity:.11; }

@keyframes atmoIn{ to{ opacity:1 } }
@keyframes atmoDrift{
  from{ transform:scale(1.06) translate3d(-1.4%, -1.1%, 0) }
  to  { transform:scale(1.13) translate3d(1.4%, 1.2%, 0) }
}

/* ============================================================
   SEA — фауна Индийского океана
   Оригинальные силуэты из спрайта (index.html), очень низкая
   прозрачность и медленный дрейф: читаются как жизнь в толще
   воды, а не как иллюстрация. Слой всегда за контентом.
   ============================================================ */
.sea-defs{
  position:absolute;
  width:0; height:0;
  overflow:hidden;
  pointer-events:none;
}
.sea{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:paint;
  /* цвет по умолчанию наследуется силуэтами — на самом контейнере,
     чтобы варианты ниже могли переопределять его на svg напрямую */
  color:var(--biolum);
}
/* контент всегда над фауной */
.chap > .container,
.hero > .container,
.contact > .container{
  position:relative;
  z-index:1;
}
.sea svg{
  position:absolute;
  display:block;
  fill:currentColor;
  will-change:transform;
}

/* — скат манта: медленно планирует по диагонали — */
.sea-manta{
  width:clamp(200px, 22vw, 340px);
  height:auto;
  top:12%;
  left:0;
  opacity:.085;
  filter:blur(.4px);
  animation:mantaGlide 58s var(--e-soft) infinite;
}
@keyframes mantaGlide{
  0%   { transform:translate3d(-18vw, 8vh, 0) rotate(-6deg) scale(.9); opacity:0 }
  12%  { opacity:.09 }
  50%  { transform:translate3d(46vw, 34vh, 0) rotate(4deg) scale(1.04); opacity:.10 }
  88%  { opacity:.05 }
  100% { transform:translate3d(112vw, 12vh, 0) rotate(-3deg) scale(.94); opacity:0 }
}

/* — косяк рыб: проходит вдоль, слегка покачиваясь — */
.sea-school{
  width:clamp(160px, 19vw, 300px);
  height:auto;
  top:6vh;
  left:0;
  opacity:.06;
  animation:schoolSwim 74s linear infinite;
}
@keyframes schoolSwim{
  0%   { transform:translate3d(108vw, 46vh, 0) scale(.86); opacity:0 }
  10%  { opacity:.07 }
  50%  { transform:translate3d(52vw, 40vh, 0) scale(.98) }
  90%  { opacity:.05 }
  100% { transform:translate3d(-24vw, 48vh, 0) scale(.84); opacity:0 }
}

/* — китовая акула: огромная, проходит низко и медленно — */
.sea-whale{
  width:clamp(300px, 40vw, 620px);
  height:auto;
  top:38%;
  left:0;
  opacity:.05;
  filter:blur(.8px);
  animation:whaleCruise 96s linear infinite;
}
@keyframes whaleCruise{
  0%   { transform:translate3d(-46vw, 0, 0) scale(.9); opacity:0 }
  14%  { opacity:.055 }
  50%  { transform:translate3d(30vw, 3vh, 0) scale(1) }
  86%  { opacity:.035 }
  100% { transform:translate3d(112vw, -2vh, 0) scale(.92); opacity:0 }
}

/* — морская звезда: лежит у нижнего края секции, чуть дышит — */
.sea-star{
  width:clamp(56px, 6vw, 96px);
  height:auto;
  bottom:6%;
  left:6%;
  color:var(--gold);
  opacity:.10;
  animation:starBreathe 16s ease-in-out infinite;
}
@keyframes starBreathe{
  0%,100%{ transform:rotate(-8deg) scale(1); opacity:.09 }
  50%    { transform:rotate(-2deg) scale(1.05); opacity:.14 }
}

/* — водоросли: качаются от «течения» — */
.sea-kelp{
  bottom:-4%;
  height:clamp(180px, 30vh, 380px);
  width:auto;
  opacity:.07;
  transform-origin:bottom center;
  animation:kelpSway 13s ease-in-out infinite;
}
.sea-kelp--a{ left:2%;  color:var(--biolum-2); animation-duration:13s }
.sea-kelp--b{ left:88%; color:var(--biolum);   animation-duration:17s; animation-delay:-4s }
.sea-kelp--c{ left:72%; color:var(--biolum-2); animation-duration:15s; animation-delay:-9s; height:clamp(140px, 22vh, 280px) }
@keyframes kelpSway{
  0%,100%{ transform:rotate(-3.5deg) skewX(2deg) }
  50%    { transform:rotate(3deg) skewX(-2deg) }
}

/* — каустика: блики света на воде, только в hero — */
.sea-caustic{
  position:absolute;
  inset:0;
  background:
    radial-gradient(38% 26% at 22% 12%, rgba(85,227,200,.10), transparent 70%),
    radial-gradient(30% 22% at 68% 6%,  rgba(160,240,230,.07), transparent 72%),
    radial-gradient(26% 18% at 46% 26%, rgba(85,227,200,.05), transparent 74%);
  mix-blend-mode:screen;
  animation:causticShift 21s ease-in-out infinite alternate;
}
@keyframes causticShift{
  from{ transform:translate3d(-2%, 0, 0) scale(1); opacity:.75 }
  to  { transform:translate3d(2%, 1.5%, 0) scale(1.06); opacity:1 }
}

/* вариации по секциям: разная скорость, чтобы слои не «шагали» в такт */
.sea--services .sea-school{ animation-duration:88s; }
.sea--services .sea-star{ left:auto; right:8%; bottom:8%; }
.sea--cases .sea-manta{ animation-duration:66s; }
.sea--cases .sea-star{ left:auto; right:5%; bottom:5%; width:clamp(44px,4.5vw,72px); }
.sea--process .sea-whale{ animation-duration:104s; }
.sea--contact .sea-kelp{ opacity:.05; }

/* ============================================================
   HERO — rotating keyword above the headline
   Трек сдвигается на проценты ОТ СВОЕЙ ЖЕ высоты (-25% = ровно
   одно слово), поэтому слова никогда не «уезжают» друг за другом.
   ============================================================ */
.hero-word{
  --hw-fs: clamp(10px, 1.02vw, 12.5px);
  --hw-lh: 1.7;
  position:relative;
  height:calc(var(--hw-fs) * var(--hw-lh));
  overflow:hidden;
  font-size:var(--hw-fs);
  line-height:var(--hw-lh);
  margin-bottom:clamp(10px, 1.6vh, 18px);
  opacity:0;
  animation:fadeUp .9s var(--e-out) .55s forwards;
}

.hw-track{
  display:block;
  animation:wordCycle 14s var(--e-soft) infinite;
  will-change:transform;
}
.hw-track > span{
  display:flex;
  align-items:center;
  gap:.72em;
  height:calc(var(--hw-fs) * var(--hw-lh));
  font-family:var(--mono);
  font-size:var(--hw-fs);
  line-height:1;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--biolum);
  white-space:nowrap;
}
.hw-track > span::before{
  content:"";
  width:20px; height:1px;
  background:currentColor;
  opacity:.5;
  flex-shrink:0;
}

/* 5 строк: 4 слова + копия первого. Шаг ровно 20% высоты трека,
   поэтому -20% всегда равно высоте одной строки, а -80% совпадает
   с началом — цикл замкнут без рывка. */
@keyframes wordCycle{
  0%,  16%{ transform:translateY(0) }
  20%, 36%{ transform:translateY(-20%) }
  40%, 56%{ transform:translateY(-40%) }
  60%, 76%{ transform:translateY(-60%) }
  80%, 100%{ transform:translateY(-80%) }
}

.hero-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(46px, 9.4vw, 132px);
  line-height:.92;
  letter-spacing:-.025em;
  color:var(--text);
  margin-bottom:clamp(30px, 5vh, 54px);
}
.hero-title .line{
  display:block;
  overflow:hidden;
  padding-bottom:.06em;
  margin-bottom:-.06em;
}
.hero-title .w{
  display:inline-block;
  transform:translateY(110%);
  animation:lineUp 1.1s var(--e-out) forwards;
}
.hero-title .line:nth-child(1) .w{ animation-delay:.65s; }
.hero-title .line:nth-child(2) .w:nth-of-type(1){ animation-delay:.78s; }
.hero-title .line:nth-child(3) .w{ animation-delay:.95s; }

.hero-title em{
  font-style:italic;
  color:var(--gold-2);
  display:inline-block;
  transform:translateY(110%);
  animation:lineUp 1.1s var(--e-out) .86s forwards;
  position:relative;
}
.hero-title em::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.08em; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
  opacity:.6;
}

@keyframes lineUp{ to{ transform:translateY(0) } }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(20px) }
  to{ opacity:1; transform:translateY(0) }
}

.hero-bottom{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:clamp(24px, 5vw, 70px);
  align-items:end;
  padding-bottom:clamp(30px, 5vh, 48px);
  border-bottom:1px solid var(--line);
  opacity:0; animation:fadeUp 1s var(--e-out) 1.05s forwards;
}
.hero-lead{
  max-width:560px;
  font-size:clamp(14.5px, 1.15vw, 17px);
  line-height:1.68;
  color:var(--muted);
}
.hero-lead::first-line{ color:var(--text); }

.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

.hero-strip{
  display:flex; flex-wrap:wrap;
  gap:clamp(24px, 5vw, 64px);
  padding-top:clamp(24px, 4vh, 34px);
  opacity:0; animation:fadeUp 1s var(--e-out) 1.2s forwards;
}
.hs-item{ display:flex; align-items:baseline; gap:9px; }
.hs-item b{
  font-family:var(--serif);
  font-size:clamp(24px, 2.6vw, 36px);
  font-weight:400;
  color:var(--gold-2);
  line-height:1;
}
.hs-item span{
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2);
}

.hero-scroll{
  position:absolute; left:50%; bottom:16px; z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; animation:fadeUp 1s var(--e-out) 1.5s forwards;
}
/* короткие экраны: индикатор «листайте вниз» убираем, чтобы он
   не наезжал на строку фактов (×3,5 и т.д.) */
@media (max-height:840px){
  .hero-scroll{ display:none; }
}
.hero-scroll span{
  font-family:var(--mono);
  font-size:8.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted-2);
}
.hero-scroll i{
  display:block; width:1px; height:46px;
  background:linear-gradient(to bottom, var(--biolum), transparent);
  position:relative; overflow:hidden;
}
.hero-scroll i::after{
  content:"";
  position:absolute; top:0; left:0; width:100%; height:14px;
  background:var(--biolum);
  box-shadow:0 0 8px var(--biolum);
  animation:scrollDot 2.2s var(--e-soft) infinite;
}
@keyframes scrollDot{
  0%{ top:-14px; opacity:0 }
  30%{ opacity:1 }
  100%{ top:46px; opacity:0 }
}
.hero-depth-word{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  font-family:var(--serif);
  font-size:clamp(84px, 19vw, 300px);
  font-weight:300;
  letter-spacing:.06em;
  color:transparent;
  -webkit-text-stroke:1px rgba(150,200,220,.07);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  animation:breathe 14s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.8; transform:translate(-50%,-50%) scale(1) }
  50%{ opacity:.4; transform:translate(-50%,-50%) scale(1.03) }
}

/* ===== CHAPTERS ===== */
.chap{
  position:relative;
  z-index:3;
  padding:clamp(70px, 11vh, 140px) 0;
}
.chap--alt::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, transparent, rgba(10,21,35,.55) 25%, rgba(10,21,35,.55) 75%, transparent);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.chap-head{
  display:flex; align-items:center; gap:16px;
  margin-bottom:clamp(30px, 5vh, 52px);
}
.chap-num{
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.1em;
  color:var(--gold);
  padding:6px 12px;
  border:1px solid rgba(212,175,55,.35);
  border-radius:6px;
  line-height:1;
}
.chap-label{
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted-2);
}
.chap-head::after{
  content:"";
  flex:1; height:1px;
  background:linear-gradient(90deg, var(--line-2), transparent);
}

.chap-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(30px, 5.2vw, 68px);
  line-height:1.03;
  letter-spacing:-.02em;
  color:var(--text);
}
.chap-title em{
  font-style:italic;
  color:var(--gold-2);
}

.chap-intro{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px, 5vw, 72px);
  align-items:end;
  margin-bottom:clamp(36px, 6vh, 64px);
}
.chap-sub{
  font-size:clamp(13.5px, 1.05vw, 15.5px);
  line-height:1.72;
  color:var(--muted);
  max-width:480px;
}

/* ===== REVEAL ===== */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1s var(--e-out), transform 1s var(--e-out);
}
.reveal.in{ opacity:1; transform:none; }

/* interactive cards finish revealing fast, then respond to pointer snappily */
.serv.reveal.in{
  transition:opacity .6s var(--e-soft), transform .28s var(--e-out),
             border-color .45s, box-shadow .45s;
}
.case.reveal.in{
  transition:opacity .6s var(--e-soft), transform .45s var(--e-out),
             border-color .5s, box-shadow .5s;
}

/* ===== NO-JS FALLBACK ===== */
.no-js .reveal,
html.no-js .reveal{ opacity:1; transform:none; }

/* If JS is unavailable the preloader and JS-only chrome must never block the page */
html:not(.js) .preloader,
html:not(.js) .cursor,
html:not(.js) .gauge{ display:none !important; }
html:not(.js) body{ overflow:auto !important; }
html:not(.js) .reveal{ opacity:1 !important; transform:none !important; }
html:not(.js) .hero-title .w,
html:not(.js) .hero-title em{ transform:none !important; }
html:not(.js) .hero-kicker,
html:not(.js) .hero-bottom,
html:not(.js) .hero-strip,
html:not(.js) .hero-scroll{ opacity:1 !important; }

/* ===== MANIFEST ===== */
.manifest-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:clamp(28px, 5vw, 72px);
  align-items:start;
}
.manifest-txt p{
  font-size:clamp(15px, 1.2vw, 18px);
  line-height:1.72;
  color:var(--muted);
  margin-bottom:22px;
  max-width:620px;
}
.manifest-txt p:first-child{
  font-size:clamp(17px, 1.5vw, 22px);
  color:var(--text);
  font-weight:400;
}
.manifest-txt p:first-child::first-letter{
  font-family:var(--serif);
  font-size:2.6em;
  line-height:.8;
  float:left;
  margin:.06em .12em 0 0;
  color:var(--gold-2);
}

.sign{
  display:flex; align-items:center; gap:16px;
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.sign-line{
  width:52px; height:1px;
  background:var(--gold);
  flex-shrink:0;
}
.sign-txt{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.9;
}
.sign-txt i{ color:var(--muted-2); font-style:normal; letter-spacing:.06em; }

.aside-card{
  position:relative;
  padding:clamp(24px, 3vw, 36px);
  border:1px solid var(--line-2);
  border-radius:18px;
  background:linear-gradient(160deg, rgba(14,28,44,.85), rgba(7,14,24,.7));
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.aside-glow{
  position:absolute; width:260px; height:260px;
  top:-110px; right:-90px;
  background:radial-gradient(circle, rgba(85,227,200,.28), transparent 70%);
  filter:blur(30px);
  pointer-events:none;
}
.aside-top{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:24px;
}
.aside-big{
  font-family:var(--serif);
  font-size:clamp(64px, 7vw, 96px);
  line-height:.85;
  font-weight:300;
  color:var(--gold-2);
  margin-bottom:14px;
}
.aside-big span{
  font-size:.34em;
  margin-left:.1em;
  color:var(--gold);
}
.aside-card > p{
  font-size:13.5px;
  line-height:1.65;
  color:var(--muted);
  margin-bottom:24px;
}
.aside-rows{ display:flex; flex-direction:column; }
.aside-rows > div{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0;
  border-top:1px solid var(--line);
  font-size:12.5px;
}
.aside-rows b{ color:var(--text); font-weight:600; }
.aside-rows span{ color:var(--muted-2); text-align:right; }
/* ===== SERVICES ===== */
.serv-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px, 1.6vw, 22px);
}
.serv{
  position:relative;
  padding:clamp(22px, 2.4vw, 32px);
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(165deg, rgba(14,28,44,.6), rgba(6,12,20,.4));
  overflow:hidden;
  transition:border-color .45s, transform .45s var(--e-out), box-shadow .45s;
  will-change:transform;
}
.serv::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(85,227,200,.12), transparent 65%);
  opacity:0; transition:opacity .45s;
  pointer-events:none;
}
.serv:hover::before{ opacity:1; }
.serv:hover{
  border-color:rgba(85,227,200,.35);
  box-shadow:0 24px 60px -30px rgba(85,227,200,.45);
}
.serv--hit{
  border-color:rgba(212,175,55,.3);
  background:linear-gradient(165deg, rgba(30,24,10,.55), rgba(8,14,22,.5));
}
.serv--hit:hover{
  border-color:rgba(212,175,55,.6);
  box-shadow:0 24px 60px -30px rgba(212,175,55,.5);
}
.serv-badge{
  position:absolute; top:18px; right:18px;
  font-family:var(--mono);
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#1A1305;
  background:linear-gradient(135deg, var(--gold-2), var(--gold));
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
}
.serv-idx{
  display:block;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.2em;
  color:var(--muted-2);
  margin-bottom:clamp(20px, 3vh, 34px);
  transition:color .4s;
}
.serv:hover .serv-idx{ color:var(--biolum); }
.serv h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(21px, 1.9vw, 27px);
  line-height:1.15;
  margin-bottom:12px;
  color:var(--text);
}
.serv > p{
  font-size:13.5px;
  line-height:1.62;
  color:var(--muted);
  margin-bottom:20px;
}
.serv-list{
  display:flex; flex-direction:column; gap:7px;
  margin-bottom:24px;
}
.serv-list li{
  position:relative;
  padding-left:15px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--muted-2);
}
.serv-list li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:5px; height:1px;
  background:var(--biolum);
  opacity:.65;
}
.serv-foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.serv-foot b{
  font-size:14px; font-weight:700;
  color:var(--gold-2);
  letter-spacing:-.01em;
}
.serv-foot span{
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.1em;
  color:var(--muted-2);
}
/* ============================================================
   CREOVIBE — собственная разработка студии
   ============================================================ */
.product-sec{ overflow:hidden; }
.sea--product .sea-school{ animation-duration:96s; }
.sea--product .sea-kelp{ opacity:.055; }

.product-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(22px, 3.4vw, 56px);
  align-items:start;
}

/* — макет окна студии — */
.product-shot{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:18px;
  background:linear-gradient(165deg, rgba(14,28,44,.82), rgba(6,12,20,.6));
  overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(85,227,200,.5);
}
.product-shot::before{
  content:"";
  position:absolute; top:-45%; left:50%;
  width:130%; height:130%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(85,227,200,.10), transparent 70%);
  pointer-events:none;
}
.pv-top{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(4,8,14,.5);
}
.pv-dots{ display:flex; gap:5px; flex-shrink:0; }
.pv-dots i{
  display:block; width:7px; height:7px; border-radius:50%;
  background:rgba(150,200,220,.25);
}
.pv-dots i:first-child{ background:rgba(242,114,111,.5); }
.pv-dots i:nth-child(2){ background:rgba(212,175,55,.5); }
.pv-dots i:last-child{ background:rgba(85,227,200,.55); }
.pv-name{
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  color:var(--text);
}
.pv-tag{
  margin-left:auto;
  font-family:var(--mono);
  font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2);
}

.pv-body{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:12px;
  padding:clamp(16px, 2vw, 22px);
}
.pv-msg{
  max-width:min(100%, 42ch);
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(10,21,35,.7);
}
.pv-msg--user{
  align-self:flex-end;
  border-color:rgba(212,175,55,.28);
  background:linear-gradient(165deg, rgba(30,24,10,.7), rgba(8,14,22,.6));
  border-bottom-right-radius:5px;
}
.pv-msg--ai{
  align-self:flex-start;
  border-color:rgba(85,227,200,.24);
  background:linear-gradient(165deg, rgba(14,32,44,.75), rgba(6,12,20,.6));
  border-bottom-left-radius:5px;
}
.pv-who{
  display:block;
  margin-bottom:6px;
  font-family:var(--mono);
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2);
}
.pv-msg--user .pv-who{ color:rgba(239,208,122,.85); }
.pv-msg--ai .pv-who{ color:var(--biolum); }
.pv-msg p{
  font-size:12.5px;
  line-height:1.55;
  color:var(--muted);
}
.pv-msg--user p{ color:#D7C9A4; }

.pv-chips{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:2px;
}
.pv-chips span{
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--mono);
  font-size:9px; letter-spacing:.1em;
  color:var(--muted-2);
}

.pv-input{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  padding:14px clamp(16px, 2vw, 22px);
  border-top:1px solid var(--line);
  background:rgba(4,8,14,.45);
  font-size:12.5px;
  color:var(--muted-2);
}
.pv-caret{
  width:1px; height:14px;
  background:var(--biolum);
  animation:caretBlink 1.15s steps(1) infinite;
}
@keyframes caretBlink{
  0%,49%{ opacity:1 }
  50%,100%{ opacity:0 }
}
.pv-cap{
  position:relative; z-index:1;
  padding:12px clamp(16px, 2vw, 22px) 16px;
  font-family:var(--mono);
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2);
  border-top:1px solid var(--line);
}

/* — правая колонка: смысл продукта — */
.product-side{ display:flex; flex-direction:column; gap:clamp(20px, 2.4vw, 30px); }
.product-points{ display:flex; flex-direction:column; gap:14px; }
.product-points li{
  position:relative;
  padding-left:18px;
  font-size:13.5px;
  line-height:1.66;
  color:var(--muted);
}
.product-points li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:8px; height:1px;
  background:var(--biolum);
  opacity:.8;
}
.product-points b{ color:var(--text); font-weight:600; }

.product-facts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.product-facts div{ display:flex; flex-direction:column; gap:4px; }
.product-facts b{
  font-family:var(--serif);
  font-size:clamp(26px, 3vw, 34px);
  font-weight:400;
  line-height:1;
  color:var(--gold-2);
}
.product-facts span{
  font-family:var(--mono);
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2);
  line-height:1.5;
}
.product-side .btn{ align-self:flex-start; }

/* — четыре режима студии — */
.product-modes{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(14px, 1.6vw, 22px);
  margin-top:clamp(30px, 4.5vh, 54px);
  padding-top:clamp(24px, 3.5vh, 38px);
  border-top:1px solid var(--line);
}
.pmode{
  padding:clamp(18px, 1.9vw, 24px);
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(165deg, rgba(14,28,44,.5), rgba(6,12,20,.3));
  transition:border-color .4s, transform .4s var(--e-out);
}
.pmode:hover{
  border-color:rgba(85,227,200,.35);
  transform:translateY(-3px);
}
.pmode-i{
  display:block;
  margin-bottom:14px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.2em;
  color:var(--muted-2);
}
.pmode h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(17px, 1.45vw, 21px);
  line-height:1.2;
  margin-bottom:8px;
  color:var(--text);
}
.pmode p{
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
}

/* ===== CASES ===== */
.cases{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px, 1.6vw, 22px);
}
.case{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(6,12,20,.55);
  transition:border-color .5s, transform .5s var(--e-out), box-shadow .5s;
}
.case:hover{
  border-color:rgba(85,227,200,.35);
  transform:translateY(-4px);
  box-shadow:0 30px 70px -40px rgba(85,227,200,.5);
}
.case--wide{ grid-column:span 2; }

.case-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--abyss-2);
  flex-shrink:0;
}
.case--wide .case-media{ aspect-ratio:16/8.2; }
.case-media img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  filter:grayscale(.65) brightness(.72) contrast(1.06);
  transform:scale(1.02);
  transition:filter .7s var(--e-soft), transform .9s var(--e-out);
}
.case:hover .case-media img{
  filter:grayscale(0) brightness(.94) contrast(1);
  transform:scale(1.06);
}
.case-glow{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(4,8,14,.92) 2%, rgba(4,8,14,.25) 45%, transparent 75%),
    radial-gradient(60% 50% at 50% 100%, rgba(85,227,200,.18), transparent 70%);
  pointer-events:none;
  transition:opacity .6s;
}
.case:hover .case-glow{ opacity:.7; }

.case-body{
  padding:clamp(18px, 2vw, 26px);
  display:flex; flex-direction:column; flex:1;
}
.case-cat{
  font-family:var(--mono);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--biolum);
  opacity:.85;
  margin-bottom:10px;
}
.case h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px, 1.7vw, 25px);
  line-height:1.15;
  margin-bottom:10px;
}
.case p{
  font-size:12.8px;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:18px;
}
.case-metric{
  display:flex; align-items:baseline; gap:9px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line);
  position:relative;
}
.case-metric::after{
  content:"";
  position:absolute; left:0; bottom:-8px;
  height:1px; width:0%;
  background:linear-gradient(90deg, var(--biolum), transparent);
  transition:width 1.4s var(--e-out) .2s;
}
.case.in .case-metric::after,
.case:hover .case-metric::after{ width:60%; }
.case-metric b{
  font-family:var(--serif);
  font-size:clamp(24px, 2.2vw, 32px);
  font-weight:400;
  color:var(--gold-2);
  line-height:1;
  letter-spacing:-.01em;
}
.case-metric span{
  font-size:11px;
  color:var(--muted-2);
  letter-spacing:.04em;
}
.case-go{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:14px;
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2);
  transition:color .35s;
}
.case-go svg{
  width:13px; height:13px; fill:none;
  stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s var(--e-out);
}
.case:hover .case-go{ color:var(--biolum); }
.case:hover .case-go svg{ transform:translateX(4px); }
/* marquee */
.marquee{
  margin-top:clamp(36px, 6vh, 64px);
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{
  display:flex; gap:38px;
  width:max-content;
  animation:marq 42s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.24em;
  color:var(--muted-2);
  white-space:nowrap;
  display:flex; align-items:center; gap:38px;
}
.marquee-track span::after{
  content:"◆";
  font-size:6px;
  color:var(--gold);
  opacity:.6;
}
@keyframes marq{ to{ transform:translateX(-50%) } }

/* ===== PROCESS ===== */
.steps{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  border-top:1px solid var(--line);
}
.step{
  position:relative;
  padding:clamp(22px, 2.2vw, 32px) clamp(14px, 1.4vw, 22px) clamp(22px, 2.2vw, 32px) 0;
  border-right:1px solid var(--line);
  transition:background .5s;
}
.step:last-child{ border-right:0; }
.step::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--biolum);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--e-out);
  box-shadow:0 0 12px rgba(85,227,200,.7);
}
.step.in::before{ transform:scaleX(1); }
.step:hover{ background:rgba(85,227,200,.035); }

.step-i{
  display:block;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.2em;
  color:var(--gold);
  margin-bottom:clamp(18px, 3vh, 30px);
}
.step-body h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(19px, 1.6vw, 23px);
  line-height:1.15;
  margin-bottom:10px;
}
.step-body p{
  font-size:12.5px;
  line-height:1.62;
  color:var(--muted);
  margin-bottom:16px;
}
.step-time{
  font-family:var(--mono);
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2);
  display:inline-block;
  margin-top:8px;
}
/* ===== ARTIFACT / LETTER ===== */
.artifact-sec{ overflow:hidden; }
.artifact-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(30px, 5vw, 80px);
  align-items:center;
}
.artifact-txt p{
  font-size:clamp(14px, 1.1vw, 16px);
  line-height:1.7;
  color:var(--muted);
  margin:20px 0 28px;
  max-width:440px;
}

.letter{
  position:relative;
  aspect-ratio:1.5/1;
  perspective:1400px;
  cursor:pointer;
}
.letter-flap{
  position:absolute; inset:0;
  z-index:4;
  display:grid; place-items:center;
  border:1px solid rgba(212,175,55,.35);
  border-radius:14px;
  background:linear-gradient(150deg, #101E2E, #0A1420);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9), inset 0 0 60px rgba(85,227,200,.05);
  transition:transform .9s var(--e-out), opacity .6s .3s, border-color .5s;
  transform-origin:top center;
  overflow:hidden;
}
.letter-flap::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 40%, rgba(85,227,200,.10) 50%, transparent 60%);
  transform:translateX(-100%);
  transition:transform 1.2s var(--e-out);
}
.letter-flap:hover::before{ transform:translateX(100%); }
.letter-flap svg{
  width:70px; height:70px;
  fill:none; stroke:var(--gold);
  stroke-width:1; stroke-linecap:round; stroke-linejoin:round;
  opacity:.85;
  filter:drop-shadow(0 0 16px rgba(212,175,55,.4));
  transition:transform .5s var(--e-out), stroke .4s;
}
.letter-flap:hover svg{ transform:scale(1.08); stroke:var(--gold-2); }
.letter:hover .letter-flap{ border-color:rgba(212,175,55,.6); }

.letter[data-open="true"] .letter-flap{
  transform:rotateX(-155deg);
  opacity:0;
  pointer-events:none;
}

.letter-paper{
  position:absolute; inset:0;
  z-index:3;
  padding:clamp(18px, 2.4vw, 30px);
  border-radius:14px;
  border:1px solid rgba(212,175,55,.28);
  background:linear-gradient(160deg, rgba(226,214,184,.96), rgba(206,192,158,.94));
  color:#1B1A14;
  overflow:auto;
  transform:rotateX(28deg) scale(.94);
  opacity:0;
  transition:transform .9s var(--e-out), opacity .6s;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.letter[data-open="true"] .letter-paper{
  transform:rotateX(0) scale(1);
  opacity:1;
}
.letter-stamp{
  float:right;
  width:54px; height:54px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1.5px solid rgba(160,40,30,.5);
  border-radius:6px;
  color:#9E2B20;
  font-size:13px; font-weight:800; letter-spacing:.05em;
  line-height:1;
  transform:rotate(7deg);
  opacity:.75;
}
.letter-stamp span{
  font-size:6.5px; letter-spacing:.14em; margin-top:5px;
  text-transform:uppercase;
}
.letter-to{
  font-family:var(--mono);
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(27,26,20,.55);
  margin-bottom:14px;
}
.letter-text{
  font-family:var(--serif);
  font-size:clamp(13.5px, 1.35vw, 17.5px);
  line-height:1.58;
  color:#211F18;
  max-width:44ch;
}
.letter-sign{
  margin-top:16px;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(12px, 1.1vw, 14px);
  color:rgba(27,26,20,.7);
}
  color:var(--muted-2);
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  display:inline-block;
}
/* ===== CONTACT ===== */
.contact{ position:relative; overflow:hidden; }
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px, 5vw, 80px);
  align-items:start;
}
.contact-left .chap-sub{ margin-top:18px; }

.contacts{
  display:flex; flex-direction:column;
  margin-top:clamp(28px, 4vh, 44px);
  border-top:1px solid var(--line);
}
.c-row{
  position:relative;
  display:flex; align-items:center; gap:16px;
  padding:18px 4px;
  border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--e-out), background .4s;
}
.c-row:hover{ padding-left:12px; background:rgba(85,227,200,.03); }
.c-ic{
  width:36px; height:36px;
  display:grid; place-items:center;
  border:1px solid var(--line-2);
  border-radius:10px;
  flex-shrink:0;
  transition:border-color .4s, color .4s, background .4s;
  color:var(--muted);
}
.c-ic svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.c-row:hover .c-ic{
  border-color:rgba(85,227,200,.5);
  color:var(--biolum);
  background:rgba(85,227,200,.08);
}
.c-txt{ display:flex; flex-direction:column; gap:3px; }
.c-txt i{
  font-style:normal;
  font-family:var(--mono);
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2);
}
.c-txt b{
  font-size:clamp(14px, 1.15vw, 16.5px);
  font-weight:600;
  color:var(--text);
}
.c-arr{
  margin-left:auto;
  color:var(--muted-2);
  font-size:15px;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .4s, transform .4s var(--e-out), color .4s;
}
.c-row:hover .c-arr{ opacity:1; transform:translateX(0); color:var(--biolum); }

.contact-meta{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:26px;
}
.contact-meta span{
  font-family:var(--mono);
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2);
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
}

/* form */
.form{
  padding:clamp(22px, 2.8vw, 38px);
  border:1px solid var(--line-2);
  border-radius:20px;
  background:linear-gradient(165deg, rgba(14,28,44,.75), rgba(6,12,20,.55));
  backdrop-filter:blur(12px);
  box-shadow:0 40px 90px -60px rgba(0,0,0,.9);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.field > span{
  font-family:var(--mono);
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  background:rgba(4,8,14,.6);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  transition:border-color .35s, background .35s, box-shadow .35s;
  outline:none;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--muted-2); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(85,227,200,.6);
  background:rgba(4,8,14,.85);
  box-shadow:0 0 0 3px rgba(85,227,200,.09);
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA6B4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:42px;
  cursor:pointer;
}
.field select option{ background:#0A1523; color:var(--text); }

.check{
  display:flex; align-items:flex-start; gap:10px;
  margin:6px 0 22px;
  cursor:pointer;
  font-size:12px;
  line-height:1.5;
  color:var(--muted-2);
}
.check input{
  appearance:none;
  -webkit-appearance:none;
  width:17px; height:17px;
  margin-top:1px;
  border:1px solid var(--line-2);
  border-radius:5px;
  flex-shrink:0;
  cursor:pointer;
  transition:border-color .3s, background .3s;
  position:relative;
}
.check input:checked{
  background:var(--biolum);
  border-color:var(--biolum);
}
.check input:checked::after{
  content:"";
  position:absolute; left:5px; top:1.5px;
  width:5px; height:9px;
  border:solid #03211D;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.check input:focus-visible{ outline:2px solid var(--biolum); outline-offset:2px; }

.form-btn{ width:100%; justify-content:center; }
.form-btn[disabled]{ opacity:.55; pointer-events:none; }

.form-note{
  margin-top:14px;
  font-size:12px;
  line-height:1.5;
  color:var(--biolum);
  min-height:18px;
  text-align:center;
}
.form-note.err{ color:var(--coral); }

.contact-depth{
  position:absolute; right:-2vw; bottom:-4vh;
  font-family:var(--serif);
  font-size:clamp(140px, 26vw, 380px);
  font-weight:300;
  line-height:.75;
  color:transparent;
  -webkit-text-stroke:1px rgba(150,200,220,.06);
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.contact-depth span{
  font-size:.32em;
  margin-left:.08em;
}

/* ===== FOOTER ===== */
.foot{
  position:relative; z-index:3;
  padding:clamp(44px, 7vh, 80px) 0 26px;
  border-top:1px solid var(--line);
  background:linear-gradient(to bottom, transparent, rgba(3,6,11,.85));
}
.foot-in{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(24px, 4vw, 60px);
  align-items:start;
  padding-bottom:clamp(30px, 5vh, 48px);
}
.foot-brand{ display:flex; align-items:center; gap:14px; }
.foot-mark{ width:34px; height:34px; color:var(--gold); flex-shrink:0; }
.foot-name{
  font-size:14px; font-weight:800; letter-spacing:.22em;
  margin-bottom:4px;
}
.foot-sub{
  font-family:var(--mono);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2);
}
.foot-nav{
  display:flex; flex-wrap:wrap; gap:18px;
  justify-content:center;
}
.foot-nav a{
  font-size:12.5px;
  color:var(--muted);
  transition:color .3s;
}
.foot-nav a:hover{ color:var(--biolum); }
.foot-links{
  display:flex; flex-direction:column; gap:8px;
  align-items:flex-end;
}
.foot-links a{
  font-size:12.5px;
  color:var(--muted);
  transition:color .3s;
}
.foot-links a:hover{ color:var(--gold-2); }

.foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.12em;
  color:var(--muted-2);
  text-transform:uppercase;
}
.foot-quote{ color:var(--gold); opacity:.65; letter-spacing:.16em; }

.to-top{
  position:fixed; right:24px; bottom:24px; z-index:6500;
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--line-2);
  border-radius:50%;
  background:rgba(7,14,24,.8);
  backdrop-filter:blur(10px);
  color:var(--muted);
  opacity:0; visibility:hidden;
  transform:translateY(14px);
  transition:opacity .4s, visibility .4s, transform .4s var(--e-out), border-color .3s, color .3s;
}
.to-top.on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ border-color:rgba(85,227,200,.6); color:var(--biolum); }
.to-top svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ===== MOBILE STICKY CTA ===== */
.m-cta{
  display:none;
  position:fixed; left:14px; right:14px; bottom:14px;
  z-index:6600;
  align-items:center; justify-content:center; gap:10px;
  padding:15px 20px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--gold-2), var(--gold) 55%, #A9791F);
  color:#1A1305;
  font-size:14px; font-weight:700;
  box-shadow:0 14px 40px -12px rgba(212,175,55,.75), 0 4px 14px rgba(0,0,0,.4);
  transform:translateY(140%);
  transition:transform .5s var(--e-out), opacity .4s;
  opacity:0;
}
.m-cta.on{ transform:translateY(0); opacity:1; }
.m-cta svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.m-cta.hide{ transform:translateY(140%); opacity:0; pointer-events:none; }

/* ===== FOCUS VISIBLE ===== */
:focus-visible{
  outline:2px solid var(--biolum);
  outline-offset:3px;
  border-radius:6px;
}
a:focus-visible,
button:focus-visible{ outline-offset:4px; }

/* ===== RESPONSIVE ===== */
@media (max-width:1180px){
  .serv-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .product-modes{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cases{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .case--wide{ grid-column:span 2; }
  .case--wide .case-media{ aspect-ratio:16/8.6; }

  .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .step{ border-right:0; border-bottom:1px solid var(--line); padding-right:18px; }
  .step:nth-child(odd){ border-right:1px solid var(--line); padding-right:20px; }
  .step:last-child{ border-bottom:0; }
  .gauge{ display:none; }
}

@media (max-width:980px){
  .nav{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch;
    gap:0;
    padding:14px var(--pad) 26px;
    background:rgba(4,8,14,.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    transform:translateY(-115%);
    transition:transform .55s var(--e-out);
    z-index:6900;
    pointer-events:none;
  }
  .nav.open{ transform:translateY(0); pointer-events:auto; }
  .nav a{
    padding:15px 0;
    font-size:16px;
    border-bottom:1px solid var(--line);
  }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }
  .burger{ display:block; }
  .head-cta{ display:none; }

  .hero-bottom{ grid-template-columns:1fr; align-items:start; }
  .hero-lead{ max-width:none; }

  .manifest-grid{ grid-template-columns:1fr; }
  .manifest-aside{ max-width:420px; }

  .cases{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .case--wide{ grid-column:span 2; }

  .chap-intro{ grid-template-columns:1fr; align-items:start; }
  .chap-sub{ max-width:none; }

  .product-grid{ grid-template-columns:1fr; }
  .product-shot{ max-width:560px; }

  .artifact-wrap{ grid-template-columns:1fr; }
  .letter{ max-width:520px; }

  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }

  .foot-in{ grid-template-columns:1fr; gap:26px; }
  .foot-nav{ justify-content:flex-start; }
  .foot-links{ align-items:flex-start; }
}

/* tablets: keep the quiz readable in a single column */
@media (max-width:820px){
  .quiz-opts{ grid-template-columns:1fr; }
  .quiz-opts button{ padding:14px 15px; font-size:13px; }
  .quiz-top{ flex-wrap:wrap; gap:10px; }
  .quiz-track{ order:3; flex-basis:100%; }
  .voices-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .voices-ctrl{ align-self:flex-end; }
}

@media (max-width:720px){
  :root{ --pad:18px; }
  .head-in{ height:66px; }
  .logo-mark{ width:32px; height:32px; }
  .logo-main{ font-size:13px; letter-spacing:.18em; }
  .sound-txt{ display:none; }
  .sound{ padding:10px; }

  /* sticky CTA takes over the bottom, so drop the floating arrow */
  .m-cta{ display:flex; }
  .to-top{ bottom:78px; }
  .to-top.on{ opacity:.85; }

  .hero{ padding:120px 0 80px; min-height:auto; }
  .hero-scroll{ display:none; }
  .hero-strip{ gap:18px 28px; }
  .hs-item{ flex-direction:column; align-items:flex-start; gap:2px; }

  .serv-grid{ grid-template-columns:1fr; }
  .cases{ grid-template-columns:1fr; }
  .case--wide{ grid-column:span 1; }
  .case--wide .case-media{ aspect-ratio:16/10; }

  .steps{ grid-template-columns:1fr; }
  .step, .step:nth-child(odd){ border-right:0; padding-right:0; }
  .step{ padding:22px 0; }

  .letter{ aspect-ratio:1.25/1; }
  .letter-text{ font-size:13px; }

  .contact-meta{ gap:7px; }
  .contact-meta span{ font-size:8px; padding:5px 9px; }

  .foot-bottom{ flex-direction:column; gap:8px; }
  .to-top{ right:16px; bottom:16px; width:42px; height:42px; }
  .contact-depth{ font-size:150px; opacity:.7; }
}

/* phones: tighter rhythm, bigger tap targets */
@media (max-width:560px){
  :root{ --pad:16px; }

  .hero-title{ font-size:clamp(38px, 12vw, 62px); line-height:.96; }
  .hero-lead{ font-size:14px; line-height:1.66; }
  .hero-kicker{ font-size:8.5px; letter-spacing:.12em; padding:7px 13px; }
  .hero-actions{ width:100%; }
  .hero-actions .btn{ flex:1; justify-content:center; }
  .hero-strip{ display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; }
  .hs-item b{ font-size:26px; }

  .chap{ padding:60px 0; }
  .chap-head{ margin-bottom:24px; gap:12px; }
  .chap-title{ font-size:clamp(27px, 8vw, 40px); }
  .chap-sub{ font-size:13.5px; }
  .chap-head::after{ display:none; }

  .quiz-stage{ padding:18px; }
  .quiz-top{ padding:14px 18px; }
  .quiz-item h3{ font-size:19px; margin-bottom:16px; }
  .qr-actions{ flex-direction:column; }
  .qr-actions .btn{ width:100%; justify-content:center; }

  .case-body{ padding:16px; }
  .case p{ font-size:12.5px; }
  .case-metric b{ font-size:26px; }

  .voice blockquote{ font-size:16.5px; line-height:1.55; }
  .voices-dots{ padding-left:20px; }
  .v-ava{ width:38px; height:38px; }

  .serv{ padding:20px; }
  .serv h3{ font-size:21px; }
  .serv-foot{ flex-wrap:wrap; gap:6px; }

  .product-modes{ grid-template-columns:1fr; gap:10px; }
  .product-facts{ gap:8px; padding:14px 0; }
  .product-facts b{ font-size:24px; }
  .product-facts span{ font-size:8px; }
  .product-side .btn{ align-self:stretch; justify-content:center; }
  .pv-msg{ max-width:100%; }

  .form{ padding:20px; border-radius:16px; }
  /* 16px keeps iOS from zooming the page on focus */
  .field input, .field select, .field textarea{ font-size:16px; }

  .contacts{ margin-top:22px; }
  .c-row{ padding:15px 2px; gap:12px; }
  .c-txt b{ font-size:14px; }
  .c-ic{ width:32px; height:32px; }

  .foot-in{ gap:20px; }
  .foot-nav{ gap:12px; }
  .foot-quote{ letter-spacing:.08em; }

  /* фауна на мобильных: мельче и тише, чтобы не мешать чтению */
  .sea-manta{ width:150px; opacity:.06; }
  .sea-school{ width:130px; opacity:.05; }
  .sea-whale{ width:250px; opacity:.045; }
  .sea-star{ width:44px; bottom:3%; left:3%; }
  .sea-kelp{ height:120px; opacity:.05; }
  .sea-kelp--b{ left:86%; }
  .sea-kelp--c{ display:none; }
}

/* very small / older Android */
@media (max-width:380px){
  .hero-title{ font-size:34px; }
  .btn{ padding:13px 20px; font-size:12.5px; }
  .quiz-opts button{ font-size:12.5px; padding:13px 14px; }
  .logo-main{ letter-spacing:.12em; }
  .logo-sub{ letter-spacing:.2em; }
}

/* touch devices: no hover-only affordances */
@media (hover:none){
  .cursor{ display:none !important; }
  .case:hover{ transform:none; }
  .btn:hover{ transform:none; }
  .case:hover .case-media img{ filter:grayscale(.3) brightness(.85) contrast(1.05); }
}

/* ===== iOS / SAFARI ===== */
@supports (-webkit-touch-callout: none){
  /* stops the rubber-band overscroll from painting the page white */
  html{ background:var(--abyss); }
  body{ min-height:-webkit-fill-available; }

  .head,
  .to-top,
  .form,
  .quiz,
  .aside-card{
    /* Safari needs the prefix for backdrop blur */
    -webkit-backdrop-filter:blur(18px) saturate(140%);
  }

  .btn,
  .quiz-opts button,
  .c-row,
  .v-arrow,
  .voices-dots button{
    -webkit-tap-highlight-color:transparent;
  }

  .hero{ min-height:100svh; }

  /* animated filters over fixed layers flicker on iOS — keep them cheap */
  .case-shots img{ transform:translateZ(0); }
}

/* landscape phones: hero must not hide behind the header */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding:110px 0 56px; }
  .hero-scroll{ display:none; }
  .hero-depth-word{ font-size:72px; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero-title .w, .hero-title em{ transform:none; }
  .hero-kicker, .hero-bottom, .hero-strip, .hero-scroll{ opacity:1; }
  .hw-track{ animation:none !important; transform:none !important; }
  .hero-word{ opacity:1 !important; }
  .atmo img{ animation:none !important; }
  .sea svg, .sea-caustic{ animation:none !important; }
  /* статичные, но осмысленные позиции вместо схлопывания в угол */
  .sea-manta{ opacity:.08 !important; transform:none !important; top:16%; left:8%; }
  .sea-school{ opacity:.06 !important; transform:none !important; top:44%; left:56%; }
  .sea-whale{ opacity:.05 !important; transform:none !important; top:52%; left:14%; }
  .sea-star{ opacity:.10 !important; transform:none !important; }
  .sea-kelp{ opacity:.06 !important; transform:none !important; }
  .sea-caustic{ opacity:.85 !important; }
}

/* ============================================================
   QUIZ  «На какой глубине ваш бренд»
   ============================================================ */
.quiz-sec{ position:relative; overflow:hidden; }
.quiz-sec::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:radial-gradient(70% 60% at 50% 0%, rgba(85,227,200,.07), transparent 70%);
  pointer-events:none;
}
.quiz-sec > .container{ position:relative; z-index:1; }

.quiz{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:20px;
  background:linear-gradient(165deg, rgba(14,28,44,.72), rgba(6,12,20,.55));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}
.quiz::before{
  content:"";
  position:absolute; top:-40%; left:50%;
  width:120%; height:120%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(85,227,200,.10), transparent 70%);
  pointer-events:none;
}

.quiz-top{
  display:flex; align-items:center; gap:16px;
  padding:18px clamp(18px,2.4vw,30px);
  border-bottom:1px solid var(--line);
  position:relative; z-index:1;
}
.quiz-step, .quiz-depth{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
  white-space:nowrap;
  flex-shrink:0;
}
.quiz-step b{ color:var(--gold-2); font-size:12px; }
.quiz-depth b{ color:var(--biolum); font-size:12px; }
.quiz-track{
  flex:1; height:2px;
  background:rgba(150,200,220,.14);
  border-radius:2px;
  overflow:hidden;
}
.quiz-track span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--biolum-2), var(--biolum));
  box-shadow:0 0 10px rgba(85,227,200,.7);
  transition:width .5s var(--e-out);
}

.quiz-stage{ position:relative; padding:clamp(22px,3vw,38px); }
.quiz-item{ display:none; }
.quiz-item.is-active{
  display:block;
  animation:quizIn .5s var(--e-out) both;
}
@keyframes quizIn{
  from{ opacity:0; transform:translateY(14px) }
  to{ opacity:1; transform:none }
}

.quiz-item h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px, 2.2vw, 30px);
  line-height:1.2;
  margin-bottom:clamp(18px,2.6vh,26px);
  color:var(--text);
}

.quiz-opts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
.quiz-opts button{
  display:flex; align-items:center; gap:12px;
  padding:15px 17px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(4,8,14,.4);
  font-size:13.5px;
  line-height:1.45;
  color:var(--muted);
  transition:border-color .3s, color .3s, background .3s, transform .3s var(--e-out);
}
.quiz-opts button > span{
  flex-shrink:0;
  width:22px; height:22px;
  display:grid; place-items:center;
  border:1px solid var(--line-2);
  border-radius:6px;
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--muted-2);
  transition:border-color .3s, color .3s, background .3s;
}
.quiz-opts button:hover{
  border-color:rgba(85,227,200,.5);
  color:var(--text);
  background:rgba(85,227,200,.05);
  transform:translateY(-2px);
}
.quiz-opts button:hover > span{
  border-color:rgba(85,227,200,.6);
  color:var(--biolum);
}
.quiz-opts button.is-picked{
  border-color:var(--biolum);
  background:rgba(85,227,200,.10);
  color:var(--text);
}
.quiz-opts button.is-picked > span{
  background:var(--biolum);
  border-color:var(--biolum);
  color:#03211D;
}

/* result */
.quiz-result{ text-align:center; padding:clamp(10px,2vh,24px) 0; }
.qr-depth{
  font-family:var(--serif);
  line-height:.9;
  color:var(--gold-2);
  margin-bottom:14px;
}
.qr-num{ font-size:clamp(54px, 9vw, 96px); font-weight:300; }
.qr-m{ font-size:clamp(18px, 2.4vw, 28px); margin-left:6px; color:var(--gold); }
.qr-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(22px, 2.6vw, 34px);
  color:var(--text);
  margin-bottom:14px;
}
.qr-text{
  max-width:560px;
  margin:0 auto;
  font-size:clamp(13.5px, 1.05vw, 15.5px);
  line-height:1.7;
  color:var(--muted);
}
.qr-actions{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:clamp(20px,3vh,30px);
}
.quiz-result[hidden]{ display:none; }
/* ============================================================
   CASE SHOT SLIDER (real screenshots inside cards)
   ============================================================ */
.case-shots{
  position:absolute; inset:0;
  display:block;
}
.case-shots img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .9s var(--e-soft), transform 1.2s var(--e-out),
             filter .7s var(--e-soft);
  filter:grayscale(.3) brightness(.78) contrast(1.05);
}
.case-shots img.is-on{
  opacity:1;
  transform:scale(1);
  animation:shotDrift 9s linear both;
}
@keyframes shotDrift{
  from{ transform:scale(1) translateY(0) }
  to{ transform:scale(1.05) translateY(-1.5%) }
}
.case:hover .case-shots img.is-on{
  filter:grayscale(0) brightness(.95) contrast(1);
  animation-play-state:paused;
}

/* single-image cards keep absolute fill */
.case-media > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
}

.case-media .shot-dots{
  position:absolute; left:14px; bottom:11px;
  display:flex; gap:5px;
  z-index:3;
}
.case-media .shot-dots i{
  display:block;
  width:14px; height:2px;
  border-radius:2px;
  background:rgba(230,241,244,.24);
  transition:background .4s, width .4s var(--e-out);
}
.case-media .shot-dots i.is-on{
  background:var(--biolum);
  width:22px;
  box-shadow:0 0 8px rgba(85,227,200,.8);
}
/* ============================================================
   VOICES / отзывы
   ============================================================ */
.voices{
  margin-top:clamp(40px, 7vh, 72px);
  padding-top:clamp(28px, 5vh, 44px);
  border-top:1px solid var(--line);
}
.voices-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-bottom:clamp(22px, 3vh, 34px);
}
.voices-head h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px, 2.2vw, 30px);
  line-height:1.2;
  color:var(--text);
}
.voices-ctrl{ display:flex; gap:8px; }
.v-arrow{
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--line-2);
  border-radius:50%;
  color:var(--muted);
  transition:border-color .3s, color .3s, background .3s;
}
.v-arrow svg{
  width:15px; height:15px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.v-arrow:hover{
  border-color:rgba(85,227,200,.6);
  color:var(--biolum);
  background:rgba(85,227,200,.06);
}

.voices-track{ position:relative; }
.voice{ display:none; margin:0; }
.voice.is-active{
  display:block;
  animation:voiceIn .55s var(--e-out) both;
}
@keyframes voiceIn{
  from{ opacity:0; transform:translateY(16px) }
  to{ opacity:1; transform:none }
}
.voice blockquote{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(17px, 2.1vw, 27px);
  line-height:1.5;
  color:var(--text);
  max-width:820px;
  margin:0 0 24px;
  position:relative;
  padding-left:clamp(20px, 3vw, 40px);
}
.voice blockquote::before{
  content:"\201C";
  position:absolute; left:0; top:-.2em;
  font-family:var(--serif);
  font-size:2.4em;
  line-height:1;
  color:var(--gold);
  opacity:.5;
}
.voice figcaption{
  display:flex; align-items:center; gap:14px;
  padding-left:clamp(20px, 3vw, 40px);
}
.v-ava{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid rgba(212,175,55,.35);
  border-radius:50%;
  background:rgba(212,175,55,.07);
  font-family:var(--mono);
  font-size:12px;
  color:var(--gold-2);
  flex-shrink:0;
}
.v-meta{ display:flex; flex-direction:column; gap:3px; }
.v-meta b{ font-size:14px; font-weight:600; color:var(--text); }
.v-meta i{
  font-style:normal;
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
}

.voices-dots{
  display:flex; gap:8px;
  margin-top:26px;
  padding-left:clamp(20px, 3vw, 40px);
}
.voices-dots button{
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(150,200,220,.25);
  transition:background .3s, transform .3s var(--e-out);
}
.voices-dots button:hover{ background:rgba(85,227,200,.6); }
.voices-dots button.is-active{
  background:var(--biolum);
  transform:scale(1.3);
  box-shadow:0 0 10px rgba(85,227,200,.8);
}

/* ============================================================
   RESPONSIVE OVERRIDES FOR NEW BLOCKS
   (must come after the base rules above to actually win)
   ============================================================ */
@media (max-width:560px){
  /* высоту задаём только через переменную — keyframes двигает проценты,
     поэтому переопределять их на мобильном больше не нужно */
  .hero-word{ --hw-fs:10px; --hw-lh:1.8; margin-bottom:10px; }
  .hw-track > span{ letter-spacing:.24em; gap:.6em; }
  .hw-track > span::before{ width:14px; }
  .hero-depth-word{ font-size:clamp(36px, 10.5vw, 84px); }
}
@media (max-width:980px){
  .quiz-opts{ grid-template-columns:1fr; }
  .quiz-opts button{ padding:14px 15px; font-size:13px; }
  .quiz-top{ flex-wrap:wrap; gap:10px; }
  .quiz-track{ order:3; flex-basis:100%; }
  .voices-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .voices-ctrl{ align-self:flex-end; }
  .case--wide .case-media{ aspect-ratio:16/9; }
}

@media (max-width:720px){
  .voice blockquote{
    font-size:17px;
    line-height:1.55;
    padding-left:20px;
    margin-bottom:18px;
  }
  .voice figcaption{ padding-left:20px; }
  .voices-dots{ padding-left:20px; margin-top:18px; }
}

@media (max-width:560px){
  .quiz-stage{ padding:18px; }
  .quiz-top{ padding:14px 16px; }
  .quiz-item h3{ font-size:19px; margin-bottom:16px; }
  .quiz-opts{ gap:8px; }
  .quiz-opts button{ padding:13px 14px; font-size:13px; }
  .qr-actions{ flex-direction:column; }
  .qr-actions .btn{ width:100%; justify-content:center; }
  .qr-depth{ margin-bottom:10px; }
  .voices{ margin-top:36px; padding-top:24px; }
  .v-arrow{ width:36px; height:36px; }
}

@media (prefers-reduced-motion:reduce){
  .case-shots img.is-on{ animation:none; }
  .pv-caret{ animation:none; opacity:1; }
}