/* Токены. Палитра: фон и текст нейтральные; один акцент (янтарь, цвет логотипа);
   яркие цвета есть только в самих роликах фоновой стены, потому что это содержимое. */
:root{
  --bg:#0b0b10;
  --fg:#f4f1ec;
  --dim:#bdb8ae;
  --accent:#ffb84d;
  --accent-hover:#ffc670;
  --accent-ink:#14110d;
  --line:rgba(255,255,255,.14);
  --veil:11,11,16;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;--s32:128px;
  --r1:8px;--r2:12px;

  --t-body:17px;--t-small:15px;--t-h3:20px;--t-lead:clamp(18px,1.6vw,21px);--t-h2:clamp(28px,3.2vw,40px);--t-h1:clamp(36px,5.6vw,68px);

  --font:-apple-system,"Segoe UI Variable","Segoe UI",Ubuntu,Cantarell,"Helvetica Neue","Noto Sans",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{margin:0;overflow-x:hidden}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font:var(--t-body)/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r1)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* ---------- фон: стена роликов ---------- */
.wall{position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;overflow:hidden;z-index:0;background:var(--bg);contain:strict}
.off .wall{visibility:hidden}
.off .wall *,.off .wall *::after{animation-play-state:paused!important}
.wall-cols{position:absolute;inset:-12% -8%;display:flex;gap:var(--s3);transform:rotate(-6deg) scale(1.12);transform-origin:50% 40%}
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--s3);will-change:transform;animation:up var(--dur,60s) linear infinite}
.col.down{animation-name:down}
@keyframes up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes down{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}

/* ролик: сюжет нарисован фигурами, а не абстрактными пятнами */
.reel{position:relative;aspect-ratio:9/16;border-radius:var(--r2);overflow:hidden;flex:none;contain:paint;background:linear-gradient(180deg,var(--a),var(--b))}
.reel span{position:absolute;display:block}
.sun{left:30%;top:30%;width:40%;aspect-ratio:1;border-radius:50%;background:var(--c);animation:rise var(--fd,16s) ease-in-out infinite alternate}
@keyframes rise{from{transform:translate3d(0,18%,0)}to{transform:translate3d(0,-18%,0)}}
.hill{left:-10%;right:-10%;bottom:0;height:42%;background:var(--d);clip-path:polygon(0 38%,18% 18%,36% 34%,58% 6%,78% 30%,100% 14%,100% 100%,0 100%)}
.hill.far{height:52%;opacity:.55;clip-path:polygon(0 30%,24% 8%,46% 28%,68% 0,100% 22%,100% 100%,0 100%)}
.water{left:0;right:0;bottom:0;height:40%;background:var(--d);overflow:hidden}
.wave{left:0;top:-6px;width:200%;height:14px;background:var(--a);clip-path:polygon(0 0,5% 100%,10% 0,15% 100%,20% 0,25% 100%,30% 0,35% 100%,40% 0,45% 100%,50% 0,55% 100%,60% 0,65% 100%,70% 0,75% 100%,80% 0,85% 100%,90% 0,95% 100%,100% 0,100% 0);opacity:.5;animation:pan var(--fd,16s) linear infinite}
@keyframes pan{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.city{left:0;right:0;bottom:0;height:50%;background:var(--d);clip-path:polygon(0 40%,12% 40%,12% 22%,24% 22%,24% 48%,34% 48%,34% 10%,46% 10%,46% 36%,58% 36%,58% 0,66% 0,66% 30%,78% 30%,78% 18%,90% 18%,90% 44%,100% 44%,100% 100%,0 100%)}
.dish{left:12%;top:24%;width:76%;aspect-ratio:1;border-radius:50%;background:var(--c);border:8px solid rgba(255,255,255,.75);animation:turn var(--fd,16s) linear infinite}
.dish::after{content:"";position:absolute;left:18%;top:22%;width:40%;height:34%;border-radius:50%;background:var(--d)}
@keyframes turn{to{transform:rotate(360deg)}}

.side{right:var(--s2);bottom:60px;display:flex!important;flex-direction:column;gap:var(--s3);font:600 11px/1 var(--font);color:#fff;text-align:center}
.side b{position:static;display:block;font-weight:600}
.side i{display:block;width:24px;height:24px;margin:0 auto var(--s1);border-radius:50%;background:rgba(255,255,255,.3)}
.cap{left:var(--s3);right:44px;bottom:20px;color:#fff;font:600 12px/1.3 var(--font);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.cap small{display:block;font-weight:400;opacity:.9;margin-top:var(--s1)}
.bar{left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.22)}
.bar::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:0 50%;animation:prog var(--pd,9s) linear infinite;animation-delay:var(--pdl,0s)}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.still .wall *,.still .wall *::after,.hidden-tab .wall *,.hidden-tab .wall *::after{animation-play-state:paused!important}

/* затемнение: виньетка за текстом первого экрана */
.veil{position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 30% 35%,rgba(var(--veil),.92) 0%,rgba(var(--veil),.74) 55%,rgba(var(--veil),.48) 100%),
    linear-gradient(180deg,rgba(var(--veil),.55),rgba(var(--veil),.35) 40%,rgba(var(--veil),.9))}

/* ---------- каркас ---------- */
.top,main,.foot{position:relative;z-index:2}
.wrap{max-width:1160px;margin:0 auto;padding:0 max(var(--s6),env(safe-area-inset-left)) 0 max(var(--s6),env(safe-area-inset-right))}
.top{display:flex;align-items:center;gap:var(--s4);max-width:1160px;margin:0 auto;padding:var(--s4) var(--s6)}
.brand{display:flex;align-items:center;gap:var(--s3);min-height:44px;text-decoration:none;font-weight:700;font-size:var(--t-h3)}
.logo{width:32px;height:32px}
.nav{display:flex;gap:var(--s2);margin-left:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);text-decoration:none;color:var(--dim);font-size:var(--t-small);border-radius:var(--r1)}
.nav a:hover{color:var(--fg)}
.still-btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:transparent;color:var(--dim);font:inherit;font-size:var(--t-small);cursor:pointer}
.still-btn:hover{color:var(--fg);border-color:var(--dim)}
.still-btn svg{width:18px;height:18px;fill:currentColor}

/* первый экран */
.hero{padding:var(--s24) 0 var(--s32);max-width:800px}
h1{margin:0;font-size:var(--t-h1);line-height:1.08;letter-spacing:-.025em;font-weight:750}
.lead{margin:var(--s6) 0 0;max-width:58ch;font-size:var(--t-lead);color:var(--dim)}
.btn{display:inline-flex;align-items:center;min-height:48px;margin-top:var(--s8);padding:0 var(--s6);border-radius:var(--r1);background:var(--accent);color:var(--accent-ink);font-weight:650;text-decoration:none;transition:background-color .15s ease-out}
.btn:hover{background:var(--accent-hover)}

/* ниже первого экрана стена уходит под сплошной фон */
.below{background:linear-gradient(180deg,rgba(var(--veil),0),var(--bg) var(--s32));padding-top:var(--s24)}
h2{margin:0 0 var(--s8);font-size:var(--t-h2);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:28ch}
h3{margin:0 0 var(--s2);font-size:var(--t-h3);line-height:1.25;font-weight:650}
p{margin:0}

.what{padding:var(--s16) 0 var(--s24)}
.what-body{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s16);align-items:start}
.what-main{font-size:var(--t-lead);line-height:1.5;max-width:46ch}
.what-side p{color:var(--dim);max-width:44ch}
.what-side p+h3{margin-top:var(--s8)}

.how{padding:var(--s12) 0 var(--s24)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s12)}
.n{display:block;margin-bottom:var(--s3);color:var(--accent);font-size:var(--t-h2);line-height:1;font-weight:300}
.steps p{color:var(--dim);max-width:40ch}

.foot{background:var(--bg);border-top:1px solid var(--line);color:var(--dim);font-size:var(--t-small)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);padding-top:var(--s6);padding-bottom:max(var(--s8),env(safe-area-inset-bottom))}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);border-radius:var(--r1)}

/* ---------- заявка на подключение ---------- */
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s8)}
.hero-act .btn{margin-top:0}
.link{display:inline-flex;align-items:center;min-height:44px;color:var(--dim);text-underline-offset:4px}
.link:hover{color:var(--fg)}
.join{display:grid;grid-template-columns:1fr 1.1fr;grid-auto-flow:dense;gap:var(--s16);align-items:start;padding:var(--s12) 0 var(--s24);scroll-margin-top:var(--s6)}
.join-text p{color:var(--dim);max-width:44ch}
.join-text .join-note{margin-top:var(--s4);font-size:var(--t-small)}
.form,.done{background:#15141a;border:1px solid var(--line);border-radius:var(--r2);padding:var(--s8)}
.form{display:flex;flex-direction:column;gap:var(--s6)}
.field{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.field label{font-size:var(--t-small);font-weight:600}
.opt{font-weight:400;color:var(--dim)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:var(--s3) var(--s4);border:1px solid rgba(255,255,255,.22);border-radius:var(--r1);background:var(--bg);color:var(--fg);font:inherit;font-size:16px}
.field textarea{resize:vertical;min-height:112px;line-height:1.45}
.field input::placeholder,.field textarea::placeholder{color:#8f8a81}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field [aria-invalid="true"]{border-color:#ff7a6b}
.err{font-size:var(--t-small);color:#ff9a8d}
.btn-submit{margin-top:0;border:0;font:inherit;font-weight:650;cursor:pointer;justify-content:center}
.btn-submit[disabled]{opacity:.6;cursor:progress}
.form-fail{font-size:var(--t-small);color:#ff9a8d}
.done{display:flex;flex-direction:column;gap:var(--s2);grid-column:-2}
.done svg{width:40px;height:40px;margin-bottom:var(--s2);fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.done p{color:var(--dim)}
@media (max-width:900px){.join{grid-template-columns:1fr;gap:var(--s8)}.done{grid-column:auto}}
@media (max-width:600px){
  .join{padding:var(--s8) 0 var(--s16)}
  .form,.done{padding:var(--s6) var(--s4)}
  .hero-act{flex-direction:column;align-items:stretch;gap:var(--s2)}
  .link{justify-content:center}
}

@media (max-width:900px){
  .what-body{grid-template-columns:1fr;gap:var(--s8)}
  .steps{grid-template-columns:1fr;gap:var(--s8)}
}
@media (max-width:600px){
  .wrap{padding-left:max(var(--s4),env(safe-area-inset-left));padding-right:max(var(--s4),env(safe-area-inset-right))}
  .top{padding:var(--s2) var(--s4)}
  .nav{display:none}
  .still-btn{margin-left:auto;width:44px;justify-content:center;padding:0}
  .still-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hero{padding:var(--s12) 0 var(--s16)}
  .btn{width:100%;justify-content:center}
  .below{padding-top:var(--s12)}
  .what{padding:var(--s8) 0 var(--s16)}
  .how{padding:var(--s8) 0 var(--s16)}
  .veil{background:linear-gradient(180deg,rgba(var(--veil),.8),rgba(var(--veil),.84) 50%,rgba(var(--veil),.94))}
  .wall-cols,.col{gap:var(--s2)}
}
/* телефоны и планшеты: двигаются только колонки, сюжеты внутри роликов стоят */
@media (max-width:900px),(pointer:coarse){
  .reel span,.bar::after{animation:none!important}
  .bar::after{transform:scaleX(.4)}
  .reel{contain:strict}
}
.off .veil{visibility:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .col,.reel span,.bar::after{animation:none!important}
  .bar::after{transform:scaleX(.4)}
  .still-btn{display:none}
}