/* ═══════════ ШРИФТЫ ═══════════ */
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/onest-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:'JB';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/jetbrainsmono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JB';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}

/* ═══════════ ОСНОВА ═══════════ */
:root{
  --bg:#050505;
  --bg-1:#0b0d10;
  --bg-2:#111418;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.17);
  --ink:#f2f5f8;
  --ink-2:#98a2ae;
  --ink-3:#626c78;
  --lime:#c9fb45;
  --coral:#ff6b45;
  --mono:'JB',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* зерно */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
  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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
a{color:inherit; text-decoration:none}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px; position:relative; z-index:2}
.narrow{max-width:820px}
section{padding:110px 0; position:relative}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.05}
p{margin:0 0 1.1em} p:last-child{margin-bottom:0}
.dim{color:var(--ink-2)}

.mono{font-family:var(--mono); font-weight:500; letter-spacing:.13em; text-transform:uppercase; font-size:.7rem}
.mono-lime{color:var(--lime)}

/* ═══════════ НАВИГАЦИЯ ═══════════ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; backdrop-filter:blur(14px);
  background:rgba(5,5,5,.72); border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
nav.stuck{border-bottom-color:var(--line)}
.brand{display:flex; align-items:center; gap:13px}
.brand-sq{width:26px; height:26px; border-radius:7px; background:var(--lime); display:block}
.brand-sq path{fill:#0b0f14}
.nav-links{display:flex; gap:30px}
.nav-links a{font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.13em;
             text-transform:uppercase; color:var(--ink-2); transition:color .2s ease}
.nav-links a:hover{color:var(--lime)}

/* ═══════════ ПЕРВЫЙ ЭКРАН ═══════════ */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:120px 0 90px; position:relative; overflow:hidden; text-align:center;
}
.hero::before{
  content:""; position:absolute; top:-46%; left:50%; transform:translateX(-50%);
  width:1250px; height:900px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(201,251,69,.115), transparent 70%);
}
h1{
  font-family:var(--mono); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.05rem,6.2vw,4.9rem); letter-spacing:-.045em; line-height:1.08;
  margin:26px auto 0; max-width:17ch;
}
h1 em{font-style:normal; color:var(--lime); position:relative; display:inline-block}
h1 em::after{content:""; position:absolute; left:2%; right:2%; bottom:.05em; height:.07em;
             background:var(--lime); opacity:.32}
.hero-lead{
  font-size:clamp(1.02rem,1.9vw,1.22rem); color:var(--ink-2);
  max-width:58ch; margin:32px auto 0;
}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:44px}

.corner{
  position:absolute; bottom:34px; z-index:3; color:var(--ink-3);
  font-family:var(--mono); font-size:.65rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}
.corner.l{left:32px} .corner.r{right:32px}
.scrollhint{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; color:var(--ink-3);
}
.scrollhint i{display:block; width:1px; height:32px; background:linear-gradient(var(--ink-3), transparent)}

/* ═══════════ КНОПКИ ═══════════ */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  background:var(--lime); color:#080b04; padding:17px 30px; border:1px solid var(--lime);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 34px -12px rgba(201,251,69,.6)}
.btn svg{width:15px; height:15px}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.05); border-color:var(--ink-3); box-shadow:none}

/* ═══════════ ЗАГОЛОВКИ СЕКЦИЙ ═══════════ */
.sec-head{margin-bottom:52px}
.sec-head .mono{display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--lime)}
.sec-head .mono::before{content:""; width:24px; height:1px; background:var(--lime); opacity:.6}
h2{font-size:clamp(1.75rem,4vw,2.85rem); max-width:20ch}

/* ═══════════ СХЕМА ═══════════ */
.scheme{border:1px solid var(--line); background:var(--bg-1); padding:36px 32px 32px}
.scheme-cap{display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; margin-bottom:28px}
.scheme-cap h3{font-size:1.02rem; font-weight:700; letter-spacing:-.02em}
.nodes{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.node{border:1px solid var(--line); background:var(--bg-2); padding:15px 14px 14px;
      position:relative; transition:border-color .25s ease, transform .25s ease}
.node:hover{border-color:var(--line-2); transform:translateY(-2px)}
.node-name{font-size:.95rem; font-weight:650; letter-spacing:-.01em; margin-bottom:10px}
.bar{height:3px; background:rgba(255,255,255,.1); overflow:hidden}
.bar i{display:block; height:100%; background:var(--lime); width:0;
       transition:width 1.05s cubic-bezier(.2,.75,.3,1)}
.node.gap{border-color:rgba(255,107,69,.45); background:rgba(255,107,69,.06)}
.node.gap .bar i{background:var(--coral)}
.node-tag{position:absolute; top:9px; right:10px; font-family:var(--mono); font-size:.55rem;
          font-weight:700; letter-spacing:.12em; color:var(--coral)}
.scheme-note{margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
             display:grid; grid-template-columns:auto 1fr; gap:14px; color:var(--ink-2); font-size:.97rem}
.scheme-note b{color:var(--ink); font-weight:650}
.dot{width:8px; height:8px; background:var(--coral); margin-top:.55em; flex:none}

/* ═══════════ РЕЗУЛЬТАТЫ ═══════════ */
.results{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
         border:1px solid var(--line)}
.res{background:var(--bg-1); padding:32px 28px; transition:background .25s ease}
.res:hover{background:var(--bg-2)}
.res .mono{color:var(--lime); display:block; margin-bottom:18px}
.res q{quotes:none; font-style:normal; display:block; font-size:1.14rem; font-weight:700;
       letter-spacing:-.022em; line-height:1.3; margin-bottom:11px}
.res p{font-size:.95rem; color:var(--ink-2); margin:0}

/* ═══════════ ШАГИ ═══════════ */
.steps{border:1px solid var(--line); display:grid; gap:1px; background:var(--line)}
.step{display:grid; grid-template-columns:96px 1fr; gap:28px; padding:36px 34px;
      background:var(--bg-1); transition:background .25s ease}
.step:hover{background:var(--bg-2)}
.step-n{font-family:var(--mono); font-size:2.3rem; font-weight:700; line-height:1;
        color:transparent; -webkit-text-stroke:1.3px var(--line-2)}
.step h3{font-size:1.2rem; margin-bottom:.5em; letter-spacing:-.025em}
.step p{color:var(--ink-2); font-size:1rem}
.step-out{display:inline-flex; align-items:center; gap:9px; margin-top:15px;
          font-family:var(--mono); font-size:.63rem; font-weight:600; letter-spacing:.13em;
          text-transform:uppercase; color:var(--lime)}
.step-out::before{content:"→"}

/* ═══════════ КОМУ ═══════════ */
.who{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
     border:1px solid var(--line); margin-bottom:34px}
.who-card{background:var(--bg-1); padding:28px 26px}
.who-card h3{font-size:1.02rem; margin-bottom:.45em; letter-spacing:-.02em}
.who-card p{font-size:.94rem; color:var(--ink-2); margin:0}
.common{border-left:2px solid var(--lime); padding:6px 0 6px 24px; font-size:1.05rem; color:var(--ink-2)}
.common b{color:var(--ink); font-weight:650}

/* ═══════════ ЦЕНА ═══════════ */
.price{border:1px solid rgba(201,251,69,.28);
       background:linear-gradient(155deg, rgba(201,251,69,.075), transparent 60%), var(--bg-1)}
.price-top{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
           padding:42px 38px; border-bottom:1px solid var(--line)}
.price-num{font-family:var(--mono); font-size:clamp(2.4rem,5.6vw,3.5rem); font-weight:700;
           letter-spacing:-.05em; line-height:1}
.price-num span{font-size:.4em; color:var(--ink-2)}
.price-cap{color:var(--ink-2); font-size:.97rem; margin-top:12px}
.price-list{padding:34px 38px 38px; display:grid; gap:16px}
.pitem{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; font-size:1rem}
.pitem svg{width:15px; height:15px; margin-top:.3em; flex:none}
.pitem b{font-weight:650} .pitem i{font-style:normal; color:var(--ink-2)}

/* ═══════════ НЕ ПОДОЙДЁТ ═══════════ */
.nf{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
    border:1px solid var(--line); padding:22px 24px; background:var(--bg-1);
    color:var(--ink-2); font-size:1rem; margin-bottom:12px}
.nf-x{font-family:var(--mono); color:var(--ink-3); font-size:.85rem; margin-top:.15em}

/* ═══════════ ФИНАЛ ═══════════ */
.final{border:1px solid var(--line); padding:70px 44px; text-align:center;
       background:radial-gradient(760px 320px at 50% -40px, rgba(201,251,69,.1), transparent 70%), var(--bg-1)}
.final h2{margin:0 auto .5em; max-width:16ch}
.final p{max-width:50ch; margin:0 auto 34px; color:var(--ink-2); font-size:1.06rem}
.final .hero-cta{margin-top:0}

footer{border-top:1px solid var(--line); padding:40px 0 56px}
footer .wrap{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center}
footer .mono{color:var(--ink-3)}
footer a:hover{color:var(--lime)}

/* ═══════════ ПОЯВЛЕНИЕ ═══════════ */
.rise{opacity:0; transform:translateY(26px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.8,.3,1)}
.rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1; transform:none; transition:none}
  .bar i{transition:none}
}

/* ═══════════ АДАПТИВ ═══════════ */
@media (max-width:900px){
  .results,.who{grid-template-columns:1fr}
  .nodes{grid-template-columns:repeat(2,1fr)}
  .price-top{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  section{padding:76px 0}
  nav{padding:16px 20px}
  .hero{padding:100px 0 110px}
  h1{font-size:clamp(1.7rem,8.4vw,2.5rem); letter-spacing:-.035em}
  .step{grid-template-columns:1fr; gap:14px; padding:28px 22px}
  .step-n{font-size:1.8rem}
  .scheme{padding:24px 18px}
  .price-top,.price-list{padding:28px 22px}
  .final{padding:46px 22px}
  .btn{width:100%; justify-content:center}
  .hero-cta{flex-direction:column; align-items:stretch}
  .corner{display:none}
}

/* ═══════════ ОБЩЕЕ ДЛЯ ВСЕХ СТРАНИЦ (добавлено 10.09.2026) ═══════════ */

/* --- карточки продуктов на главной --- */
.prods{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.prod{background:var(--bg-1); padding:32px 30px; display:flex; flex-direction:column; gap:12px;
      transition:background .25s ease; position:relative}
a.prod:hover{background:var(--bg-2)}
.prod-top{display:flex; align-items:center; justify-content:space-between; gap:14px}
.prod h3{font-size:1.22rem; letter-spacing:-.028em}
.prod p{font-size:.96rem; color:var(--ink-2); margin:0; flex:1}
.prod-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px}
.prod-price{font-family:var(--mono); font-size:.78rem; font-weight:600; color:var(--lime)}
.prod-soon{font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.13em;
           text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line);
           padding:5px 10px}
.prod-arrow{font-family:var(--mono); color:var(--lime); font-size:.9rem; opacity:0; transform:translateX(-6px);
            transition:opacity .25s ease, transform .25s ease}
a.prod:hover .prod-arrow{opacity:1; transform:none}

/* --- путь / этапы --- */
.path{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.path-item{background:var(--bg-1); padding:26px 30px; display:grid; grid-template-columns:auto 1fr auto;
           gap:22px; align-items:center; transition:background .25s ease}
.path-item:hover{background:var(--bg-2)}
.path-n{font-family:var(--mono); font-size:.7rem; font-weight:600; color:var(--lime); letter-spacing:.1em}
.path-item h3{font-size:1.04rem; letter-spacing:-.02em; margin-bottom:.25em}
.path-item p{font-size:.94rem; color:var(--ink-2); margin:0}
.path-mark{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}

/* --- список «что вижу» --- */
.see{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.see div{background:var(--bg-1); padding:20px 24px; font-size:.98rem; color:var(--ink-2);
         display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start}
.see span{color:var(--lime); font-family:var(--mono); font-size:.75rem; margin-top:.15em}

/* --- цитата-манифест --- */
.manifest{border-left:2px solid var(--lime); padding:10px 0 10px 28px; margin:0;
          font-size:clamp(1.15rem,2.6vw,1.5rem); font-weight:650; letter-spacing:-.025em; line-height:1.4}
.manifest-src{display:block; margin-top:14px; font-family:var(--mono); font-size:.65rem;
              letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500}

/* --- о себе --- */
.about{display:grid; grid-template-columns:1.15fr 1fr; gap:60px; align-items:start}
.about-facts{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.about-fact{background:var(--bg-1); padding:22px 24px}
.about-fact b{display:block; font-family:var(--mono); font-size:1.5rem; font-weight:700;
              letter-spacing:-.03em; margin-bottom:6px}
.about-fact span{font-size:.9rem; color:var(--ink-2)}

@media (max-width:900px){
  .prods,.see{grid-template-columns:1fr}
  .about{grid-template-columns:1fr; gap:36px}
  .path-item{grid-template-columns:auto 1fr; gap:16px}
  .path-mark{display:none}
}