@font-face{font-family:Manrope;src:url(/fonts/manrope-cyrillic.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(/fonts/manrope-latin.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+20BD,U+2122,U+2190-2193}
:root{--bg:#0A0A0C;--panel:#111214;--card:#17181B;--raise:#1F2125;--line:#26282C;--line2:#35383D;--text:#F2F3F4;--dim:#AEB2B8;--faint:#7C8087;--ink:#0E0F11;--ease:cubic-bezier(.2,.75,.25,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color-scheme:dark;scroll-padding-top:84px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{background:var(--bg);color:var(--text);font:500 16px/1.55 Manrope,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--dim);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 32px);margin:0 auto}

.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--text);transform:scaleX(0);transform-origin:left;z-index:60}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background-color .25s ease,border-color .25s ease;border-bottom:1px solid transparent}
.nav.solid{background:#0a0a0ccc;backdrop-filter:blur(14px);border-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:22px;letter-spacing:-.03em;text-decoration:none}
.logo i{width:11px;height:11px;border-radius:50%;background:var(--text)}
.links{display:flex;gap:24px;margin-left:auto}
.links a{color:var(--dim);text-decoration:none;font-weight:600;font-size:15px;transition:color .18s ease}
.links a:hover{color:var(--text)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;background:var(--text);color:var(--ink);font-weight:800;text-decoration:none;white-space:nowrap;transition:transform .16s ease,background-color .18s ease,color .18s ease}
.btn:hover{background:#fff;transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--raise);color:var(--text)}
.btn.ghost:hover{background:var(--line2)}
.btn.sm{height:40px;padding:0 18px;font-size:14px;font-weight:700}

.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;min-height:100svh;padding:110px 0 56px}
.tag{display:inline-block;background:var(--raise);color:var(--dim);font-size:14px;font-weight:600;padding:6px 14px;border-radius:999px;margin-bottom:20px}
h1{font-size:clamp(42px,6.4vw,76px);line-height:1.04;font-weight:800;letter-spacing:-.04em}
.lead{color:var(--dim);font-size:clamp(17px,2vw,20px);max-width:560px;margin:22px 0 30px}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.hint{margin-top:14px;font-size:14px;color:var(--faint)}

.demo{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 30px 80px #0008}
.demo-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.demo-model{display:inline-flex;align-items:center;gap:9px;background:var(--raise);padding:7px 14px;border-radius:999px;font-size:14px}
.demo-model b{font-weight:700}
.demo-note{font-size:12px;color:var(--faint)}
.demo-body{min-height:216px;display:flex;flex-direction:column;gap:12px}
.demo-user{align-self:flex-end;background:var(--raise);padding:10px 16px;border-radius:18px 18px 6px 18px;max-width:88%;min-height:44px;font-size:15px}
.demo-user:empty{visibility:hidden}
.demo-bot{font-size:15px;color:var(--text);line-height:1.6}
.demo-bot:after{content:"";display:inline-block;width:8px;height:15px;margin-left:3px;background:var(--text);border-radius:3px;vertical-align:-2px;animation:blink 1.1s ease-in-out infinite}
.demo-bill{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--dim);margin-top:12px}
.demo-bill b{background:var(--text);color:var(--ink);padding:2px 11px;border-radius:999px;font-weight:700}
@keyframes blink{50%{opacity:.2}}

.tape{border-block:1px solid var(--line);padding:18px 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tape-in{display:flex;gap:44px;width:max-content;animation:tape 42s linear infinite}
.tape:hover .tape-in{animation-play-state:paused}
.tape span{display:inline-flex;align-items:center;gap:10px;color:var(--dim);font-weight:600;white-space:nowrap}
@keyframes tape{to{transform:translateX(-50%)}}

.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:64px 0 0}
.num{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.num b{display:block;font-size:clamp(32px,4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.num span{color:var(--dim);font-size:15px}

.sect{padding:110px 0 0}
h2{font-size:clamp(32px,4.6vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.03em;margin-bottom:32px;max-width:760px}
.sub{color:var(--dim);font-size:18px;max-width:640px;margin:-14px 0 28px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.step span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--text);color:var(--ink);font-weight:800;margin-bottom:16px}
h3{font-size:19px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.step p,.card p{color:var(--dim);font-size:15px}

.show{height:420vh;margin-top:110px}
.show-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.show-in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:44px;align-items:center}
.show-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.show-list li{padding:14px 16px;border-radius:16px;opacity:.42;transition:opacity .35s ease,background-color .35s ease}
.show-list li.on{opacity:1;background:var(--card)}
.show-list p{color:var(--dim);font-size:15px}
.show-list li p{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.show-list li.on p{max-height:120px}
.show-list h3{margin-bottom:0}
.show-list li.on h3{margin-bottom:6px}
.show-frame{position:relative;aspect-ratio:1360/860;border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:var(--panel);box-shadow:0 30px 90px #000a}
.show-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .5s ease,transform .7s var(--ease)}
.show-frame img.on{opacity:1;transform:none}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;overflow:hidden;transition:transform .25s var(--ease),border-color .25s ease}
.grid .card:hover{transform:translateY(-4px);border-color:var(--line2)}
.grid .card:before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--x,50%) var(--y,0%),#ffffff12,transparent 70%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.grid .card:hover:before{opacity:1}

.video{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center}
.video-text p{color:var(--dim);font-size:17px}
.video-text h2{margin-bottom:18px}
.quote{color:var(--text)!important;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:20px 0 10px}
.note{color:var(--faint)!important;font-size:14px!important}
.video-box{border-radius:18px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 30px 90px #000a}
.video-box video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}

.prices{padding:0;margin-bottom:12px}
table{width:100%;border-collapse:collapse}
th{font-size:13px;font-weight:600;color:var(--faint);text-align:left;padding:13px 22px;border-bottom:1px solid var(--line)}
td{padding:13px 22px;border-bottom:1px solid var(--line);font-weight:600}
tr:last-child td{border-bottom:0}
.r{text-align:right;white-space:nowrap}
td .m{display:flex;align-items:center;gap:12px}

.faq{display:flex;flex-direction:column;gap:8px;max-width:820px}
.q{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.q button{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:17px 22px;font-weight:700;text-align:left}
.q button:after{content:"+";flex:none;font-size:22px;font-weight:500;color:var(--dim);line-height:1;transition:transform .28s var(--ease)}
.q button[aria-expanded=true]:after{transform:rotate(45deg)}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.a>div{overflow:hidden}
.a p{padding:0 22px 18px;color:var(--dim)}
.q.open .a{grid-template-rows:1fr}

.final{margin-top:110px;padding:64px 24px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:24px}
.final h2{margin:0 auto 10px}
.final p{color:var(--dim);margin-bottom:24px}

.foot{margin-top:80px;border-top:1px solid var(--line)}
.foot-in{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:30px 0 40px}
.foot p{color:var(--faint);font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 24px}
.foot nav a{color:var(--dim);text-decoration:none;font-size:15px;transition:color .18s ease}
.foot nav a:hover{color:var(--text)}

.cookie{position:fixed;left:16px;bottom:16px;z-index:70;width:min(420px,100% - 32px);background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:16px 18px;box-shadow:0 18px 50px #000a;animation:rise .4s var(--ease) both}
.cookie p{font-size:14px;color:var(--dim);margin-bottom:12px}
.cookie div{display:flex;flex-wrap:wrap;gap:8px}
.cookie[hidden]{display:none}

.doc{width:min(780px,100% - 32px);margin:0 auto;padding:120px 0 20px}
.doc h1{font-size:clamp(34px,5vw,48px);margin-bottom:10px}
.doc .date{color:var(--faint);margin-bottom:34px}
.doc h2{font-size:22px;margin:34px 0 10px;letter-spacing:-.015em}
.doc p,.doc li{color:var(--dim);margin-bottom:10px}
.doc ul{padding-left:22px;margin-bottom:10px}
.doc a{color:var(--text)}

.center{min-height:100svh;display:grid;place-items:center;padding:16px}
.note-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:36px;max-width:460px;text-align:center}
.note-card h1{font-size:30px;margin-bottom:10px;letter-spacing:-.02em}
.note-card p{color:var(--dim)}

.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:980px){
  .links{display:none}
  .nav .btn{margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:104px;gap:32px}
  .numbers{grid-template-columns:repeat(2,1fr)}
  .steps,.grid{grid-template-columns:1fr}
  .show{height:auto;margin-top:90px}
  .show-pin{position:static;height:auto;overflow:visible}
  .show-in{grid-template-columns:1fr;gap:20px}
  .show-frame{order:-1}
  .show-list li{opacity:1}
  .show-list li p{max-height:none}
  .show-list h3{margin-bottom:6px}
  .video{grid-template-columns:1fr;gap:24px}
  .sect{padding-top:80px}
  th,td{padding-inline:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}
