:root{
    --ground:#0F1117;
    --surface:#161923;
    --surface-2:#1D212C;
    --line:#272C39;
    --text:#EFECE5;
    --muted:#98A0B2;
    --hot:#FF4B2E;
    --hot-soft:rgba(255,75,46,.12);
    --cool:#7BE0AE;
    --tt:#25F4EE;

    --display:"Unbounded","Golos Text",system-ui,sans-serif;
    --body:"Golos Text",system-ui,-apple-system,"Helvetica Neue",sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;

    --col:min(640px,100% - 2rem);
  }

  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--ground);
    color:var(--text);
    font-family:var(--body);
    font-size:17px;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--hot);color:#fff}

  .wrap{display:grid;grid-template-columns:1fr var(--col) 1fr}
  .wrap > *{grid-column:2;min-width:0}
  .bleed{grid-column:1 / -1}

  section{padding:clamp(2.75rem,8vw,4.5rem) 0;border-top:1px solid var(--line)}
  section:first-of-type{border-top:0}

  h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.1;letter-spacing:-.02em}
  h1{font-size:clamp(1.95rem,7.4vw,3.2rem);font-weight:800}
  h2{font-size:clamp(1.45rem,5.4vw,2.1rem);font-weight:700}
  h3{font-size:1.02rem;font-weight:600}
  p{margin:0}

  .eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .stack{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
  .lede{font-size:1.02rem;color:var(--muted);max-width:56ch}
  .hot{color:var(--hot)}
  .tt{color:var(--tt)}
  .note{font-family:var(--mono);font-size:.75rem;color:var(--muted);line-height:1.5}

  .cta{
    display:block;width:100%;text-align:center;border:0;cursor:pointer;
    font-family:var(--display);font-weight:600;font-size:1rem;
    background:var(--hot);color:#fff;text-decoration:none;
    padding:1.05rem 1.4rem;border-radius:3px;
    transition:transform .15s ease,box-shadow .15s ease;
  }
  .cta:active{transform:scale(.985)}
  .cta.ghost{background:transparent;color:var(--text);border:1px solid var(--tt);font-size:.92rem;padding:.9rem 1.2rem}
  .cta.ghost:active{transform:scale(.985)}
  .ctas{display:flex;flex-direction:column;gap:.6rem;width:100%}

  .seg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);width:100%}
  .seg button{
    background:var(--ground);color:var(--muted);border:0;cursor:pointer;
    font-family:var(--body);font-size:.86rem;line-height:1.3;padding:.8rem .6rem;
  }
  .seg button[aria-pressed="true"]{background:var(--tt);color:#0F1117;font-weight:600}
  .seg button:focus-visible{outline:2px solid var(--tt);outline-offset:2px}
  .cta:focus-visible{outline:2px solid var(--tt);outline-offset:3px}

  /* ── hero + телефон ───────────────────────── */
  .hero{padding-top:2rem}
  .phone{
    width:min(300px,80vw);margin:0 auto;
    border:1px solid var(--line);border-radius:22px;background:#000;
    padding:8px;box-shadow:0 30px 60px -30px #000;
  }
  .feed{
    position:relative;aspect-ratio:9/16;border-radius:15px;overflow:hidden;
    background:var(--surface);touch-action:pan-y;
  }
  .clip{
    position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
    padding:14px;gap:6px;opacity:0;transform:translateY(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .2s;
  }
  .clip.on{opacity:1;transform:none}
  .clip.off{opacity:0;transform:translateY(-100%)}
  .clip .hook{font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1.25;text-shadow:0 2px 12px #000}
  .clip .who{font-family:var(--mono);font-size:.68rem;color:#fff;opacity:.75}
  .swipeHint{
    position:absolute;left:0;right:0;top:44%;text-align:center;z-index:3;
    font-family:var(--mono);font-size:.72rem;color:#fff;letter-spacing:.1em;
    text-shadow:0 2px 10px #000;animation:bob 1.6s ease-in-out infinite;pointer-events:none;
  }
  @keyframes bob{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(-7px);opacity:.5}}
  .timer{
    position:absolute;top:10px;left:10px;right:10px;z-index:3;display:flex;justify-content:space-between;
    font-family:var(--mono);font-size:.66rem;color:#fff;opacity:.85;text-shadow:0 1px 6px #000;
  }
  .verdict{
    width:100%;border:1px solid var(--line);border-left:2px solid var(--hot);
    background:var(--surface);padding:.9rem 1rem;
  }
  .verdict b{font-family:var(--mono);color:var(--hot);font-variant-numeric:tabular-nums}

  /* ── ledger ───────────────────────────────── */
  .ledger{width:100%;display:flex;flex-direction:column}
  .row{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--line)}
  .row:first-child{border-top:1px solid var(--line)}
  .row .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--hot);white-space:nowrap}

  /* ── калькулятор ──────────────────────────── */
  .calc{width:100%;background:var(--surface);border:1px solid var(--line);padding:1.1rem;display:flex;flex-direction:column;gap:1.1rem}
  .field{display:flex;flex-direction:column;gap:.5rem}
  .field .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
  .field label{font-size:.88rem;color:var(--muted)}
  .field output{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent}
  input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line)}
  input[type=range]::-moz-range-track{height:3px;background:var(--line)}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:var(--tt);border:0}
  input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--tt);border:0}
  input[type=range]:focus-visible{outline:2px solid var(--tt);outline-offset:4px}
  .result{border-top:1px solid var(--line);padding-top:1rem;display:flex;flex-direction:column;gap:.3rem}
  .result .big{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(1.7rem,8vw,2.4rem);color:var(--hot);line-height:1.1}
  .bar{height:6px;background:var(--line);display:flex;overflow:hidden;margin-top:.6rem}
  .bar i{display:block;height:100%;transition:width .25s ease}
  .bar .lost{background:var(--hot)}
  .bar .kept{background:var(--cool)}

  /* ── не таргетолог ────────────────────────── */
  .strike{position:relative;color:var(--muted)}
  .strike::after{
    content:"";position:absolute;left:-2%;right:-2%;top:52%;height:3px;
    background:var(--hot);transform:rotate(-3deg);
  }
  .vs{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
  .vs > div{background:var(--surface);padding:1rem .9rem;display:flex;flex-direction:column;gap:.55rem}
  .vs h3{font-size:.82rem;font-family:var(--mono);font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
  .vs .them h3{color:var(--muted)}
  .vs .me{background:var(--surface-2)}
  .vs .me h3{color:var(--tt)}
  .vs ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.45rem;font-size:.88rem;line-height:1.4}
  .vs .them li{color:var(--muted)}
  .vs li::before{content:"— ";color:var(--line)}
  .vs .me li::before{content:"✓ ";color:var(--cool);font-size:.8rem}
  .price{font-family:var(--mono);font-size:.76rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.55rem;margin-top:auto}

  /* ── steps ────────────────────────────────── */
  .steps{width:100%}
  .step{display:grid;grid-template-columns:2.2rem 1fr;gap:.8rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
  .step:first-child{border-top:1px solid var(--line)}
  .step .n{font-family:var(--mono);font-size:.78rem;color:var(--tt);padding-top:.3rem}
  .step p{color:var(--muted);font-size:.93rem;margin-top:.25rem}

  /* ── metrics ──────────────────────────────── */
  .metrics{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
  .metric{background:var(--surface);padding:1rem}
  .metric b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:600;color:var(--cool);line-height:1.1}
  .metric small{display:block;margin-top:.35rem;font-size:.78rem;color:var(--muted);line-height:1.4}

  .no{background:var(--surface);border-left:2px solid var(--hot);padding:1.1rem 1.2rem;width:100%}
  .no ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--muted);display:flex;flex-direction:column;gap:.4rem;font-size:.95rem}

  details{border-bottom:1px solid var(--line);padding:.9rem 0;width:100%}
  details:first-of-type{border-top:1px solid var(--line)}
  summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-size:.98rem}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-family:var(--mono);color:var(--tt)}
  details[open] summary::after{content:"−"}
  details p{margin-top:.6rem;color:var(--muted);font-size:.93rem}

  /* ── форма ────────────────────────────────── */
  .final{background:var(--surface-2)}
  form{width:100%;display:flex;flex-direction:column;gap:.85rem}
  .in{display:flex;flex-direction:column;gap:.35rem}
  .in label{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  input[type=text],input[type=tel],select{
    font-family:var(--body);font-size:16px;color:var(--text);
    background:var(--ground);border:1px solid var(--line);border-radius:3px;
    padding:.85rem .9rem;width:100%;appearance:none;
  }
  select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  input:focus,select:focus{outline:none;border-color:var(--tt)}
  .err{color:var(--hot);font-size:.8rem;font-family:var(--mono);display:none}
  .in.bad input{border-color:var(--hot)}
  .in.bad .err{display:block}

  #thanks{display:none;text-align:center;align-items:center;width:100%;gap:1.1rem}
  #thanks.show{display:flex;flex-direction:column}
  .check{width:64px;height:64px;border:2px solid var(--cool);border-radius:50%;display:grid;place-items:center;color:var(--cool);font-size:1.9rem;animation:pop .4s cubic-bezier(.2,1.4,.4,1)}
  @keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

  footer{padding:1.75rem 0 2.5rem;color:var(--muted);font-family:var(--mono);font-size:.72rem;display:flex;gap:1rem;flex-wrap:wrap}

  @media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}


/* ══════ общие элементы всех страниц ══════ */
a{color:var(--tt)}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--line);
}
.topbar .brand{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--text);text-decoration:none}
.topbar nav{display:flex;gap:1rem;font-family:var(--mono);font-size:.75rem}
.topbar nav a{color:var(--muted);text-decoration:none}

.sitefoot{border-top:1px solid var(--line);padding:2rem 0 2.5rem;display:flex;flex-direction:column;gap:1rem}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;font-family:var(--mono);font-size:.76rem}
.sitefoot nav a{color:var(--muted);text-decoration:none}
.sitefoot nav a:hover,.topbar nav a:hover{color:var(--tt)}
.sitefoot .legal{font-family:var(--mono);font-size:.72rem;color:var(--muted);line-height:1.6}

/* ══════ текстовые страницы ══════ */
.prose{padding:2.5rem 0 3rem;display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.prose h1{font-size:clamp(1.6rem,6vw,2.3rem)}
.prose h2{font-size:1.15rem;margin-top:1.2rem}
.prose p,.prose li{font-size:.97rem;color:var(--muted);max-width:66ch}
.prose ul,.prose ol{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem}
.prose strong{color:var(--text)}
.prose .meta{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.prose table{border-collapse:collapse;font-size:.88rem;width:100%}
.prose td,.prose th{border:1px solid var(--line);padding:.55rem .6rem;text-align:left;color:var(--muted)}
.prose th{color:var(--text);font-weight:600}
.tablewrap{width:100%;overflow-x:auto}
.backlink{font-family:var(--mono);font-size:.76rem;color:var(--muted);text-decoration:none}

/* ══════ блог ══════ */
.posts{width:100%;display:flex;flex-direction:column}
.post{
  display:block;text-decoration:none;color:inherit;
  padding:1.2rem 0;border-bottom:1px solid var(--line);
}
.post:first-child{border-top:1px solid var(--line)}
.post .date{font-family:var(--mono);font-size:.7rem;color:var(--tt);letter-spacing:.08em}
.post h2{font-size:1.1rem;margin:.35rem 0}
.post p{font-size:.9rem;color:var(--muted)}

/* ══════ баннер cookie ══════ */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--surface-2);border-top:1px solid var(--line);
  padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  display:none;flex-direction:column;gap:.7rem;
}
.cookiebar.show{display:flex}
.cookiebar p{font-size:.85rem;color:var(--muted);max-width:60ch;margin:0 auto;width:100%;max-width:640px}
.cookiebar .btns{display:flex;gap:.5rem;width:100%;max-width:640px;margin:0 auto}
.cookiebar button{
  flex:1;font-family:var(--body);font-size:.85rem;padding:.7rem .5rem;cursor:pointer;
  border:1px solid var(--line);background:var(--ground);color:var(--muted);border-radius:3px;
}
.cookiebar button.ok{background:var(--tt);color:#0F1117;border-color:var(--tt);font-weight:600}