/* SOOT — KARUBO brandbook §3/§4: NIGHT is the base; DAY (bone and olive,
   art-direction §2) follows the system light mode. One accent per screen. */
:root{
  color-scheme:dark;
  --bg:#0A0A0C; --surface:#101014; --surface-2:#17171C; --line:#26262E;
  --text:#E9E3D6; --dim:#A9A498; --muted:#8F8A7C;
  --accent:#C6FF3D; --on-accent:#0A0A0C; --gold:#F5A623; --err:#FF3DA6;
  --bar-r:#C6FF3D; --bar-w:#6E8A2A; --bar-o:#4A4740;
  --ui:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --display:"Outfit",system-ui,sans-serif;
  --display-uk:"Manrope",system-ui,sans-serif;
  --pad:clamp(16px,5vw,40px);
}
@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --bg:#E8E2D2; --surface:#DED7C4; --surface-2:#D3CBB5; --line:#BFB69C;
    --text:#23251A; --dim:#4E5139; --muted:#5C5E48;
    --accent:#4F5E14; --on-accent:#F1ECDF; --gold:#9A5F00; --err:#A3135F;
    --bar-r:#4F5E14; --bar-w:#9AA35A; --bar-o:#B8AE92;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{background:var(--bg);color:var(--text);font-family:var(--ui);font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit}
code{font-family:var(--ui);font-size:.92em;background:var(--surface-2);border:1px solid var(--line);
  padding:1px 6px;white-space:nowrap}
.sprite{position:absolute;width:0;height:0}

/* language: both texts live in the page, the inactive one is hidden */
html[data-l="en"] [lang="uk"], html[data-l="uk"] [lang="en"]{display:none!important}

.wrap{max-width:1100px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap.narrow{max-width:760px}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.08}
html[data-l="uk"] h1, html[data-l="uk"] h2, html[data-l="uk"] h3{font-family:var(--display-uk);letter-spacing:-.025em}
h1{font-size:clamp(40px,7vw,78px);font-weight:900;letter-spacing:-.035em;max-width:13ch}
h2{font-size:clamp(26px,4vw,40px);margin-bottom:28px;max-width:22ch}
h3{font-size:18px;margin-bottom:8px}
p{max-width:64ch}
.sub{color:var(--dim);margin:-14px 0 26px}
.fine{font-size:12.5px;color:var(--muted);margin-top:14px}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;
  font-size:20px;letter-spacing:.02em;text-decoration:none}
.logo svg{width:26px;height:26px;color:var(--accent)}
.langbtn{font:500 13px var(--ui);letter-spacing:.12em;color:var(--text);background:none;
  border:1px solid var(--line);padding:9px 14px;min-height:40px;cursor:pointer}
.langbtn:hover{border-color:var(--text)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;
  font:700 14px var(--ui);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:none;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--text);filter:none}
.btn[disabled]{opacity:.6;cursor:progress}

/* hero */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;
  padding-top:clamp(28px,6vw,72px);padding-bottom:clamp(56px,8vw,96px)}
.lead{font-size:17px;color:var(--dim);margin-top:24px;max-width:52ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.receipt{background:var(--surface);border:1px solid var(--line);padding:26px 26px 22px}
.rc-h{font-size:15px;font-family:var(--ui)!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-bottom:14px}
.receipt dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px dashed var(--line)}
.receipt dt{color:var(--dim);font-size:13.5px}
.receipt dd{font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.receipt .save dd,.receipt .save dt{color:var(--accent)}
.receipt dd small{font-family:var(--ui);font-size:13px;font-weight:700;margin-left:4px}
.rc-cap{margin-top:22px;font-size:13px;color:var(--dim)}
.bar{display:flex;height:16px;gap:2px;margin-top:10px}
.bar i{display:block}
.bar .r{flex:68;background:var(--bar-r)}.bar .w{flex:21;background:var(--bar-w)}.bar .o{flex:11;background:var(--bar-o)}
.bar-key{list-style:none;margin-top:12px;font-size:13px;color:var(--dim)}
.bar-key li{padding:2px 0}
.bar-key b{display:inline-block;min-width:44px;color:var(--text)}

/* sections */
.sec{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px);border-top:1px solid var(--line)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.card,.plan{background:var(--bg);padding:26px 24px 28px}
.card .num{display:block;font-family:var(--display);font-weight:900;font-size:44px;letter-spacing:-.04em;
  line-height:1;margin-bottom:18px;color:var(--accent)}
.card p,.plan p,.case p{color:var(--dim);font-size:14px}
.plan h3{font-size:24px;margin-bottom:12px}
.plan p + p{margin-top:12px}

.frame{border:1px solid var(--line);background:var(--surface);height:min(640px,78vh);margin-bottom:18px}
.frame iframe{display:block;width:100%;height:100%;border:0}

.cases{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.case{background:var(--bg);padding:24px}
.case code{display:inline-block;margin:4px 0 12px;color:var(--accent);font-weight:700}

.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.steps li{background:var(--bg);padding:24px;display:flex;gap:16px;align-items:flex-start}
.steps li b{font-family:var(--display);font-weight:900;font-size:36px;line-height:1;color:var(--accent)}
.notes{margin-top:28px;background:none;border:0;gap:24px}
.notes p{color:var(--dim);font-size:14px}

/* download */
.price{font-family:var(--display);font-weight:900;font-size:clamp(56px,10vw,96px);letter-spacing:-.04em;line-height:1;
  margin:-8px 0 20px;color:var(--accent)}
.get{margin-top:30px}
.get label{display:block;font-size:13px;color:var(--dim);margin-bottom:8px}
.get .row{display:flex;gap:10px}
.get input{flex:1;min-width:0;min-height:50px;padding:0 16px;font:500 16px var(--ui);color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-radius:0}
.get input:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.get input[aria-invalid="true"]{border-color:var(--err)}
.msg{min-height:1.7em;margin-top:12px;font-size:14px}
.msg.err{color:var(--err)}
.msg.err::before{content:"✕ "}
.msg.ok{color:var(--accent)}
.msg.ok::before{content:"✓ "}

.foot{padding-top:28px;padding-bottom:calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  color:var(--muted);font-size:12.5px}

@media (max-width:980px){
  .grid4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .grid4,.grid2,.cases,.steps{grid-template-columns:1fr}
  .notes{gap:14px}
  .get .row{flex-direction:column}
  .cta .btn{flex:1 1 auto}
  .receipt{padding:20px 18px 18px}
  .receipt dd{font-size:22px}
}