/* WAVES: основные стили */
:root{
  --bg:#ffffff;
  --surface:#f5f5f7;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#a1a1a6;
  --line:#e6e6ea;
  --accent:#3b7bff;
  --radius:14px;
  --pad:clamp(20px,4vw,56px);
  --max:1280px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* Типографика */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.032em;color:var(--ink)}
h1{font-size:clamp(40px,5vw,72px);line-height:1.03}
h2{font-size:clamp(28px,2.8vw,40px);line-height:1.1}
h3{font-size:24px;line-height:1.15;letter-spacing:-.02em}
p{margin:0}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--ink)}
.muted{color:var(--ink-2)}
.sec-num{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-bottom:28px}
.sec-num::after{content:"";width:28px;height:1px;background:var(--line)}

/* Кнопки */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:500;border:1px solid transparent;cursor:pointer;transition:background .25s,transform .25s var(--ease),border-color .25s}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-light{background:#fff;border-color:var(--line)}
.btn-light:hover{border-color:var(--ink)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(3px)}
.link-u{border-bottom:1px solid currentColor;padding-bottom:1px}

/* Шапка */
.header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s}
.header.scrolled{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 var(--line)}
.header .wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;flex-direction:column;line-height:1}
.logo b{font-size:22px;font-weight:600;letter-spacing:.2em;display:flex;white-space:nowrap}
.logo .w{position:relative;z-index:2}
.logo .corp-clip{display:inline-block;overflow:hidden;margin-left:.45em}
.logo .corp{display:inline-block;will-change:transform,opacity}
.logo small{font-size:11px;color:var(--ink-2);margin-top:6px;letter-spacing:0}
.header-right{display:flex;align-items:center;gap:28px}
.nav{display:flex;gap:28px;font-size:14px;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.lang{display:flex;gap:2px;font-size:13px}
.lang a{padding:4px 8px;border-radius:8px;color:var(--ink-3)}
.lang a[aria-current]{color:var(--ink);background:var(--surface)}
.lang a:hover{color:var(--ink)}

/* Указатель секций */
.dots{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--line)}
.dots a{font-size:11px;color:var(--ink-3);padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;font-variant-numeric:tabular-nums;transition:color .3s,border-color .3s}
.dots a.on{color:var(--ink);border-left-color:var(--ink)}
@media (max-width:1180px){.dots{display:none}}

/* Сетка секций */
.sec{padding:clamp(80px,9vw,128px) 0;border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 32px}
.col-l{grid-column:1 / span 4}
.col-r{grid-column:5 / span 8}
.col-l h2+p{margin-top:24px;max-width:34ch}

/* 01 Hero */
.hero{position:relative;height:230vh;background:#fff}
.hero-stick{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden}
.hero .wrap{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:72px}
.hero-text{position:relative;z-index:2;max-width:500px}
.hero h1 .sub{display:block;color:var(--ink-3)}
.hero .lead{margin-top:28px;max-width:38ch}
.hero-cta{display:flex;align-items:center;gap:28px;margin-top:40px;flex-wrap:wrap}
.play{display:inline-flex;align-items:center;gap:14px;font-size:15px}
.play span:first-child{border-bottom:1px solid currentColor}
.play i{width:36px;height:36px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center}
.play i svg{width:10px;height:10px;margin-left:2px}
.watch{--wl:max(calc(40vw + 24px),calc((100vw - var(--max)) / 2 + 620px));position:absolute;z-index:1;left:calc(var(--wl) - (100vw - min(100vw,var(--max))) / 2);top:50%;width:min(calc(100vw - var(--wl) - 88px),1000px);aspect-ratio:1176/846;transform:translateY(-46%)}
.watch img{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.watch .crown{z-index:6}.watch .case{z-index:5}.watch .p1{z-index:3}.watch .p2{z-index:2}.watch .p3{z-index:1}
.watch .p1,.watch .p2,.watch .p3{opacity:0}
.hero.static .watch .p1,.hero.static .watch .p2,.hero.static .watch .p3{opacity:1}
.hero-foot{position:absolute;left:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));right:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));bottom:36px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;color:var(--ink-2);z-index:2}
.scroll-hint{display:flex;align-items:center;gap:14px}
.scroll-hint i{width:1px;height:36px;background:linear-gradient(var(--ink-3),transparent)}
.hero-cap{text-align:right;line-height:1.6}

/* 02 Контекст */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 16px;list-style:none;margin:0;padding:0}
.tile{text-align:center;opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in .tile{opacity:1;transform:none}
.tile .glass{width:88px;height:88px;margin:0 auto 18px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(236,239,244,.7));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px rgba(20,30,50,.07),0 22px 34px -20px rgba(30,45,70,.38);
  transform:perspective(420px) rotateY(-16deg) rotateX(8deg);transition:transform .8s var(--ease)}
.tile:hover .glass{transform:perspective(420px) rotateY(-4deg) rotateX(2deg)}
.tile svg{width:30px;height:30px;stroke:var(--ink);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tile span{font-size:14px;line-height:1.35;color:var(--ink);display:block}

/* 03 Продукты */
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{padding:0 28px;border-left:1px solid var(--line);display:flex;flex-direction:column}
.card .n{font-size:12px;color:var(--ink-3);margin-bottom:10px}
.card p{font-size:15px;color:var(--ink-2);margin-top:12px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;list-style:none;padding:0}
.chips li{font-size:12px;padding:4px 10px;border-radius:8px;background:var(--surface);color:var(--ink)}
.card figure{margin:auto 0 0;padding-top:24px;height:250px;display:flex;align-items:center;justify-content:center}
.card figure img{max-height:100%;width:auto;transition:transform 1.2s var(--ease),filter 1.2s var(--ease)}
.card:hover figure img{transform:scale(1.05) translateY(-6px);filter:drop-shadow(0 18px 24px rgba(59,123,255,.18))}
.card .link{margin-top:20px}
.col-l .all{margin-top:40px}
.col-l .all p{font-size:15px;color:var(--ink-2);margin-bottom:16px;max-width:30ch}

/* 04 Инфраструктура */
.infra{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 32px;align-items:center}
.infra .col-l{grid-column:1 / span 4}
.flow{grid-column:5 / span 5;display:grid;grid-template-columns:minmax(0,1fr) 56px 128px 56px minmax(0,1fr);align-items:stretch}
.pills{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}
.pills li{height:42px;display:grid;place-items:center;border-radius:10px;font-size:13px;background:linear-gradient(#fff,#f7f7f9);box-shadow:0 0 0 1px var(--line),0 6px 14px -10px rgba(20,30,50,.25);white-space:nowrap;padding:0 10px}
.wires{width:100%;height:100%;overflow:visible}
.wires path{fill:none;stroke:#cfd3da;stroke-width:1;vector-effect:non-scaling-stroke}
.wires path.pulse{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:3 14;animation:flow 3.6s linear infinite;opacity:.8}
@keyframes flow{to{stroke-dashoffset:-68}}
.core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.core img{width:128px;height:auto}
.core b{font-size:14px;letter-spacing:.14em;font-weight:600}
.stay{grid-column:10 / span 3;margin-left:24px;border-left:1px solid var(--line);padding-left:24px;font-size:19px;line-height:1.3;letter-spacing:-.01em;font-weight:500}

/* 05 Новое поколение */
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0}
.benefits li{padding:0 28px;border-left:1px solid var(--line);display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto 1fr;gap:0 18px;align-items:start;align-content:start}
.benefits .ic{width:52px;height:52px;border-radius:50%;background:var(--surface);display:grid;place-items:center;grid-row:span 2}
.benefits svg{width:22px;height:22px;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.benefits b{font-weight:500;font-size:18px;line-height:1.25;letter-spacing:-.01em}
.benefits p{font-size:14px;color:var(--ink-2);margin-top:10px}

/* 06 Контакт */
.form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.field{position:relative}
.field.full{grid-column:1 / -1}
.form input[type=text],.form input[type=email],.form textarea{width:100%;height:52px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 16px;font-size:15px;transition:border-color .2s}
.form textarea{height:112px;padding:14px 16px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--ink)}
.form ::placeholder{color:var(--ink-3)}
.consent{grid-column:1 / -1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2)}
.consent input{margin:3px 0 0;accent-color:var(--ink)}
.consent a{border-bottom:1px solid currentColor}
.actions{grid-column:1 / -1;display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-top:6px}
.tg svg{width:18px;height:18px}
.status{grid-column:1 / -1;font-size:14px;min-height:20px;color:var(--ink-2)}
.status.err{color:#c4312b}
.status.ok{color:#1f7a3f}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* Подвал */
.footer{border-top:1px solid var(--line);padding:32px 0}
.footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer .brand{display:flex;align-items:center;gap:32px}
.footer .brand small{font-size:12px;color:var(--ink-2)}
.footer nav{display:flex;gap:28px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.footer nav a:hover{color:var(--ink)}
.copy{font-size:12px;color:var(--ink-3)}

/* Простая страница */
.page{padding:160px 0 120px;min-height:70vh}
.page h1{font-size:clamp(32px,4vw,52px);margin-bottom:24px}

/* Адаптив */
@media (max-width:1100px){
  .col-l,.col-r,.infra .col-l{grid-column:1 / -1}
  .col-r{margin-top:48px}
  .flow{grid-column:1 / span 12;margin-top:48px;max-width:680px}
  .stay{grid-column:1 / -1;margin:40px 0 0;border-left:0;padding-left:0;max-width:22ch}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 16px}
}
@media (max-width:900px){
  .nav{display:none}
  .hero{height:auto}
  .hero-stick{position:relative;height:auto;min-height:0}
  .hero .wrap{padding-top:120px;padding-bottom:32px}
  .watch{position:relative;left:auto;top:auto;transform:none;width:118%;margin:40px 0 0 -9%}
  .hero-foot{position:relative;left:0;right:0;bottom:0;margin-top:8px}
  .scroll-hint{display:none}
  .products,.benefits{grid-template-columns:1fr}
  .card,.benefits li{border-left:0;border-top:1px solid var(--line);padding:32px 0}
  .card:first-child,.benefits li:first-child{border-top:0;padding-top:0}
  .form{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .header .wrap{height:64px}
  .logo small{display:none}
  .logo .corp-clip{display:none}
  .header-right{gap:12px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:minmax(0,1fr) 22px 84px 22px minmax(0,1fr)}
  .pills li{font-size:11.5px;padding:0 6px;height:38px}
  .core img{width:84px}
  .hero-cta{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .tile{opacity:1;transform:none}
}
.hero.static{height:auto}
.hero.static .hero-stick{position:relative;height:100vh}
@media (min-width:901px) and (max-height:820px){.hero-foot{display:none}.hero .wrap{padding-top:64px}}
@media (max-width:900px){
  .hero-foot{display:none}
  .watch{width:130%;margin:32px 0 0 -8%}
}

/* Выпадающее меню продуктов */
.nav .has-sub{position:relative;display:inline-flex}
.nav .sub{position:absolute;top:100%;left:-16px;margin-top:10px;min-width:180px;padding:8px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 40px -18px rgba(20,30,50,.35);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav .sub a{padding:9px 12px;border-radius:9px;font-size:14px;color:var(--ink)}
.nav .sub a:hover{background:var(--surface)}

/* Страница продукта */
.prod .col-a{grid-column:1 / span 6}
.prod .col-b{grid-column:8 / span 5;margin:0;display:flex;align-items:center;justify-content:center}
.prod .col-b img{width:100%;height:auto;max-height:340px;object-fit:contain}
.prod-hero{border-top:0;padding-top:clamp(120px,12vw,168px)}
.prod-hero h1{font-size:clamp(40px,4.6vw,64px)}
.status-pill{display:inline-block;margin-top:28px;padding:7px 14px;border-radius:999px;background:var(--surface);font-size:13px;color:var(--ink-2)}
.prod .col-l h2+p.note{margin-top:20px;font-size:14px;line-height:1.5}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0}
.cols3 li{padding:0 26px;border-left:1px solid var(--line)}
.cols3 b{font-weight:500;font-size:17px;line-height:1.25;letter-spacing:-.01em;display:block}
.cols3 p{font-size:14px;color:var(--ink-2);margin-top:10px}
.does{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.does li{break-inside:avoid;padding:16px 0 16px 26px;border-top:1px solid var(--line);position:relative;font-size:16px;line-height:1.45}
.does li::before{content:"";position:absolute;left:4px;top:25px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0;gap:0}
.steps li{padding:0 26px;border-left:1px solid var(--line)}
.steps .n{font-size:12px;color:var(--ink-3);display:block;margin-bottom:10px}
.steps b{font-weight:500;font-size:17px;letter-spacing:-.01em;display:block}
.steps p{font-size:14px;color:var(--ink-2);margin-top:10px}
.demo{margin-top:48px;display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;gap:0}
.demo .pane{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff;min-height:210px}
.demo .pane.out{background:var(--surface);border-color:transparent}
.demo .pane b{font-size:13px;font-weight:500;letter-spacing:.02em;display:block;margin-bottom:14px}
.demo .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.85;color:var(--ink-2)}
.demo .mono span{display:block}
.demo-arrow{display:grid;place-items:center;color:var(--ink-3)}
.demo-arrow svg{width:20px;height:20px}
.prod .products .card{padding:0 26px}
.prod .products .card figure{height:180px}
.prod .products .card p{margin-top:10px}
@media (max-width:1100px){
  .prod .col-a,.prod .col-b{grid-column:1 / -1}
  .prod .col-b{margin-top:40px}
  .does{columns:1}
}
@media (max-width:900px){
  .cols3,.steps{grid-template-columns:1fr}
  .cols3 li,.steps li{border-left:0;border-top:1px solid var(--line);padding:26px 0}
  .cols3 li:first-child,.steps li:first-child{border-top:0;padding-top:0}
  .demo{grid-template-columns:1fr;gap:14px}
  .demo-arrow{transform:rotate(90deg)}
  .prod .products .card{padding:32px 0}
}
@media (max-width:900px){
  .prod .products .card figure{height:auto;padding-top:20px}
  .prod .products .card figure img{max-height:150px}
}