@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url(GolosText-cyrillic-0.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url(GolosText-latin-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url(GolosText-cyrillic-0.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url(GolosText-latin-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(JetBrainsMono-cyrillic-4.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(JetBrainsMono-latin-5.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(JetBrainsMono-cyrillic-4.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(JetBrainsMono-latin-5.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(Oswald-cyrillic-8.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(Oswald-latin-9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(Oswald-cyrillic-8.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(Oswald-latin-9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik Mono One';font-style:normal;font-weight:400;font-display:swap;src:url(RubikMonoOne-cyrillic-10.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Rubik Mono One';font-style:normal;font-weight:400;font-display:swap;src:url(RubikMonoOne-latin-11.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  --paper:#E7E1D1; --paper2:#DDD5C2; --red:#C7261D; --red-d:#9E1C15; --ink:#141312; --ink2:#3F3B35; --ink3:#6E685E;
  --cc:#D77757; --term:#191817; --term2:#232220; --tfg:#E9E6DF; --tdim:#8B877F; --tline:#3A3833; --tok:#7DBB6E;
  --head:"Oswald","Golos Text",sans-serif; --mono1:"Rubik Mono One","Oswald",sans-serif;
  --text:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,"DejaVu Sans Mono",monospace;
  --ease:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 var(--text);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:radial-gradient(rgba(60,40,20,.07) 1px,transparent 1.2px) 0 0/5px 5px;mix-blend-mode:multiply}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}

/* ===================== первый экран ===================== */
.hero{position:relative;width:100%;aspect-ratio:1200/640;overflow:hidden;max-height:92vh}
.hero.narrow{aspect-ratio:600/956;max-height:none}
.hs{position:absolute;left:0;top:0;width:1200px;height:640px;transform-origin:0 0}
.hero.narrow .hs{width:600px;height:956px}
.hs *{box-sizing:border-box}
.hs .sun{position:absolute;right:-100px;top:-130px;width:540px;height:540px;border-radius:50%;background:var(--red)}
.hs .wedge{position:absolute;left:0;top:150px;width:600px;height:150px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%)}
.hs .band{position:absolute;left:-140px;top:318px;width:1560px;height:226px;background:var(--ink);transform:rotate(-14deg);transform-origin:0 0}
.hs .word{position:absolute;left:78px;top:350px;transform:rotate(-14deg);transform-origin:0 0;font:400 164px/1 var(--mono1);color:var(--paper);letter-spacing:-.01em;white-space:nowrap}
.hs .word .u{font-size:30px;color:var(--red);margin-right:12px;vertical-align:baseline}
.hs .word .o{display:inline-block;transform:rotate(19deg) translateY(.05em)}
.hs h1{position:absolute;left:60px;top:30px;margin:0;font:700 66px/.98 var(--head);text-transform:uppercase;color:var(--ink);letter-spacing:.005em}
.hs h1 em{font-style:normal;color:var(--red);display:block}
.hs .lead{position:absolute;left:62px;top:522px;margin:0;font:500 30px/1.15 var(--head);text-transform:uppercase;letter-spacing:.03em;color:var(--ink);z-index:2}
.hs .vpn{position:absolute;left:62px;top:186px;margin:0;font:700 38px/1 var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--paper);z-index:1}
.hs .cc{right:64px;bottom:58px;width:480px;height:288px}
.hs .in{position:absolute;right:64px;top:40px;padding:6px 0 4px;font:700 28px/1 var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--paper);text-decoration:none;border-bottom:3px solid currentColor;z-index:3}
.hs .in:hover,.hs .in:focus-visible{color:var(--ink);background:var(--paper);box-shadow:0 0 0 10px var(--paper);outline:none}

.hero.narrow .sun{right:-130px;top:300px;width:380px;height:380px}
.hero.narrow .wedge{top:150px;width:380px;height:110px}
.hero.narrow .band{left:-80px;top:520px;width:900px;height:150px}
.hero.narrow .word{left:36px;top:542px;font-size:100px}
.hero.narrow .word .u{font-size:22px;margin-right:8px}
.hero.narrow h1{left:34px;top:34px;font-size:56px}
.hero.narrow .lead{left:34px;top:300px;font-size:30px}
.hero.narrow .vpn{left:34px;top:186px;font-size:34px}
.hero.narrow .cc{left:34px;right:auto;top:664px;bottom:auto;width:532px;height:270px}
.hero.narrow .in{right:34px;top:44px;color:var(--ink);font-size:30px}
.hero.narrow .in:hover,.hero.narrow .in:focus-visible{color:var(--red);background:none;box-shadow:none}
.hs .cc .spin{display:none}

/* ===================== окно Claude Code ===================== */
.cc{position:absolute;background:var(--term);color:var(--tfg);font:15px/1.5 var(--mono);overflow:hidden;box-shadow:14px 14px 0 var(--red)}
.cc .bar{height:32px;background:var(--term2);display:flex;align-items:center;padding:0 14px;gap:8px;font:600 13px var(--text);color:var(--tdim)}
.cc .bar b{color:var(--tfg)}
.cc .body{padding:14px 18px 0}
.cc .hd{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.cc .hd .t{line-height:1.35;font-size:14px}
.cc .hd .t b{font-weight:700}
.cc .hd .t span{color:var(--tdim)}
.cc .ln{white-space:pre-wrap;margin:0 0 6px}
.me{color:var(--tdim)}
.me::before{content:"❯ "}
.ai{padding-left:16px;position:relative}
.ai::before{content:"●";position:absolute;left:0;color:var(--tfg)}
.ai.tool::before{color:var(--tok)}
.ai.cont::before{content:none}
/* ответ про файлы: кнопки пульта прямо в ответе */
.fx{display:grid;gap:9px;margin:2px 0}
.fx .row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;white-space:nowrap}
.fx .btn{border:1.5px solid var(--red);padding:0 11px;font:600 12.5px/24px var(--text);color:#F1ECE3;transition:background-color .15s,transform .15s}
.fx .btn.on{background:var(--red);transform:scale(.95)}
.fx .badge{display:inline-block;margin-left:7px;padding:0 6px;background:#F1ECE3;color:#141312;font:700 11px/16px var(--text);font-style:normal;vertical-align:1px;opacity:0;transition:opacity .25s}
.fx .btn.has .badge,.fx.done .badge{opacity:1}
.fx .file{padding:0 8px;border:1px solid #4A453E;background:#26231F;color:var(--tfg);font-size:.92em;line-height:22px;opacity:0;transform:translateX(-16px);transition:transform .8s var(--ease),opacity .35s}
.fx .file.in,.fx.done .file{opacity:1;transform:none}
.fx .dir,.fx .arr{color:var(--tdim)}
.ai.tool b{font-weight:700}
.ai.tool .sub{display:block;color:var(--tdim)}
.spin{color:var(--cc)}
.cc .inp{border-top:1px solid var(--tline);border-bottom:1px solid var(--tline);margin:12px -18px 0;padding:6px 18px}
.cc .inp::before{content:"❯ ";color:var(--tdim)}
.caret{display:inline-block;width:9px;height:17px;background:var(--tfg);vertical-align:-3px;animation:bl 1s steps(1) infinite}
.cc .st{padding:6px 0 10px;font-size:12.5px;color:var(--tdim)}
.px{display:grid;flex:none}
.px i{display:block}
@keyframes bl{50%{opacity:0}}

/* ===================== путь: вход, пульт, сессия ===================== */
section.wrap{margin-top:96px}

.frame{position:relative;width:100%;aspect-ratio:920/598;overflow:hidden;background:var(--ink);box-shadow:14px 14px 0 var(--red)}
.frame.narrow{aspect-ratio:520/720}
.stage{position:absolute;left:0;top:0;width:920px;height:598px;transform-origin:0 0;font-family:var(--text)}
.frame.narrow .stage{width:520px;height:720px}
.stage *{box-sizing:border-box}

/* браузер */
.chrome{position:absolute;left:0;top:0;right:0;height:44px;background:#26231F;display:flex;align-items:center;padding:0 16px;gap:14px}
.chrome .dots{display:flex;gap:7px}
.chrome .dots i{width:11px;height:11px;border-radius:50%;background:#4A453E;display:block}
.chrome .addr{flex:1;height:26px;border-radius:13px;background:#1A1816;color:#B4AC9D;font:500 13px/26px var(--text);padding:0 14px;white-space:nowrap;overflow:hidden}
.loadbar{position:absolute;left:0;top:44px;height:3px;width:0;background:var(--red);z-index:9}
.screen{position:absolute;left:0;top:44px;right:0;bottom:0;background:#0F0E0D;overflow:hidden;color:#E6E1D6}

/* вход */
.login{position:absolute;inset:0;background:#0F0E0D;z-index:6;display:flex;align-items:center;justify-content:center;transition:opacity .45s var(--ease)}
.stage[data-scene="pult"] .login,.stage[data-scene="session"] .login{opacity:0;pointer-events:none}
.login .card{width:330px;padding:26px;border:1px solid #34302A;background:#181614}
.login h4{margin:0 0 4px;font:700 22px var(--head);text-transform:uppercase;letter-spacing:.02em}
.login p{margin:0 0 16px;font-size:13px;color:#958E80}
.login .field{height:40px;border:1px solid #3F3A33;padding:0 12px;font:18px/38px var(--mono);letter-spacing:3px}
.login .field.mail{font-size:15px;letter-spacing:0;margin-bottom:10px;color:#E6E1D6}
.login .field:empty::before{content:attr(data-ph);color:#6E685E;letter-spacing:0;font:15px/38px var(--text)}
.login .go{margin-top:12px;height:40px;background:var(--red);color:#fff;font:600 15px/40px var(--text);text-align:center;transition:transform .15s var(--ease),filter .15s}
.stage.go-hover .login .go{filter:brightness(1.12)}
.stage.go-down .login .go{transform:scale(.96)}

/* пульт */
.pult{position:absolute;inset:0;padding:18px}
.pcard{border:1px solid #34302A;background:#161412;padding:16px 18px;margin-bottom:14px;position:relative}
.pcard .t{display:flex;align-items:baseline;gap:10px;font:600 15px var(--text)}
.pcard .t small{font:500 12px var(--text);color:#958E80;text-transform:uppercase;letter-spacing:.06em}
.pcard .t b{font:700 19px var(--head);text-transform:uppercase;letter-spacing:.02em}
.q{display:grid;grid-template-columns:70px 1fr 44px;align-items:center;gap:12px;font-size:13px;color:#A9A193;margin-top:10px;max-width:420px}
.q i{display:block;height:5px;background:#2C2925;position:relative}
.q i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--q,0%);background:#8FBCE6;transition:width .6s var(--ease)}
.q span:last-child{text-align:right;color:#E6E1D6}
.newbtn{position:absolute;right:18px;top:14px;height:36px;padding:0 14px;border:1.5px solid var(--red);color:#F1ECE3;font:600 14px/33px var(--text);background:transparent;transition:transform .15s var(--ease),background-color .15s}
.sess{min-height:168px}
.tile{position:absolute;left:18px;top:76px;width:214px;height:72px;border:1px solid #3F3A33;background:#1D1A17;padding:12px 14px;transition:border-color .2s}
#tile{left:244px}
.stage.tile-hover #tile{border-color:var(--red)}
.tile .r1{display:flex;align-items:center;gap:9px;font:600 15px var(--text)}
.tile .r1 i{width:10px;height:10px;border-radius:50%;border:2px solid #7DBB6E;display:block}
.tile .r2{margin-top:6px;font-size:12.5px;color:#958E80}

/* сессия */
.session{position:absolute;left:12px;top:12px;right:12px;bottom:12px;background:var(--term);color:var(--tfg);font:14px/1.55 var(--mono);overflow:hidden;
  transform-origin:0 0;transform:translate(var(--tx,20px),var(--ty,200px)) scale(var(--sx,.3),var(--sy,.15));opacity:0;
  transition:transform .6s var(--ease),opacity .25s var(--ease)}
.stage[data-scene="session"] .session{transform:none;opacity:1}
.session .bar{height:32px;background:var(--term2);display:flex;align-items:center;padding:0 14px;gap:8px;font:600 13px var(--text);color:var(--tdim)}
.session .bar b{color:var(--tfg)}
.session .hd{display:flex;align-items:center;gap:16px;padding:14px 18px 6px}
.session .hd .t{line-height:1.35;font-size:13.5px}
.session .hd .t b{font-weight:700}
.session .hd .t span{color:var(--tdim)}
.log{position:absolute;left:0;right:0;top:100px;bottom:86px;padding:6px 18px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44px);mask-image:linear-gradient(to bottom,transparent 0,#000 44px)}
.log .ln{white-space:pre-wrap;word-break:break-word}
.session .inp{position:absolute;left:0;right:0;bottom:30px;border-top:1px solid var(--tline);border-bottom:1px solid var(--tline);padding:7px 18px;white-space:nowrap;overflow:hidden}
.session .inp::before{content:"❯ ";color:var(--tdim)}
.session .st{position:absolute;left:18px;right:18px;bottom:7px;font-size:12px;color:var(--tdim);white-space:nowrap}
.frame.narrow .session{font-size:16px}
.frame.narrow .log{top:104px;bottom:92px}

/* курсор */
.cursor{position:absolute;left:0;top:0;width:26px;height:30px;z-index:20;pointer-events:none;transform:translate(700px,470px);opacity:0;transition:transform .9s var(--ease),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.cursor.on{opacity:1}
.cursor svg{display:block}
.ripple{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid var(--red);opacity:0}
.cursor.click .ripple{animation:rp .5s ease-out}
@keyframes rp{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.6)}}
.stage.instant,.stage.instant *{transition:none!important}
.shot .stage,.shot .stage *{animation:none!important}

/* для чтения с экрана */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* тарифы */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:34px 36px 36px;border:3px solid var(--ink);background:var(--paper)}
.plan.prem{background:var(--ink);color:var(--paper);box-shadow:14px 14px 0 var(--red)}
.plan .pn{font:700 30px/1 var(--head);text-transform:uppercase;letter-spacing:.03em}
.plan .pp{margin:26px 0 0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.plan .pp b{font:700 104px/.9 var(--head);letter-spacing:-.01em}
.plan .pp span{font:500 20px/1.2 var(--text);color:var(--ink2)}
.plan.prem .pp span{color:#CFC7B6}
.plan p{margin:22px 0 30px;font-size:18px;line-height:1.45;color:var(--ink2);max-width:34ch}
.plan.prem p{color:#CFC7B6}
.buy{margin-top:auto;align-self:flex-start;display:inline-block;padding:14px 26px 15px;background:var(--red);color:#fff;text-decoration:none;font:600 20px/1 var(--head);text-transform:uppercase;letter-spacing:.04em;transition:background-color .15s,color .15s}
.buy:hover{background:var(--ink)}
.plan.prem .buy:hover{background:var(--paper);color:var(--ink)}

footer.wrap{margin-top:88px;margin-bottom:56px}
footer .row{border-top:3px solid var(--ink);padding-top:22px}
footer .row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 40px}
footer .mark{font:700 22px/1 var(--head);text-transform:uppercase;letter-spacing:.03em}
footer .mark i{font-style:normal;color:var(--red)}
footer .docs{display:flex;flex-wrap:wrap;gap:6px 26px;font:500 15px/1.4 var(--text)}
footer a{color:var(--ink2);text-decoration-thickness:1px;text-underline-offset:3px}
footer a:hover{color:var(--red)}
footer .req{margin:16px 0 0;font:14px/1.6 var(--text);color:var(--ink3)}
footer .req a{color:inherit}

@media (max-width:860px){
  .plans{grid-template-columns:1fr;gap:28px}
  .plan .pp b{font-size:84px}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  body{font-size:17px}
  section.wrap{margin-top:64px}
  .frame,.plan.prem{box-shadow:8px 8px 0 var(--red)}
  .plan{padding:26px 24px 28px}
}
@media (prefers-reduced-motion:reduce){
  .stage,.stage *{transition:none!important;animation:none!important}
}