/* Layout: full-bleed dark brand bands (header, hero, closing CTA) over a light content ground; gold taken from the StreamKube logo. Three hash-routed pages. */
:root{
  --bg:#F3F4F5; --surface:#FFFFFF; --ink:#101820; --muted:#55626B; --line:#D9DEE1;
  --accent:#86601C; --gold:#C4A04A; --gold-grad:linear-gradient(135deg,#B8903C 0%,#EBD88C 52%,#B8903C 100%); --on-gold:#1A1405;
  --band:#0D1318; --band-2:#151E25; --band-ink:#ECEFF1; --band-muted:#9FADB6; --band-line:#26333C; --band-gold:#D8B45C;
  --risk:#E08A3C; --risk-bg:#3A2A17;
  --f-display:'Manrope','Helvetica Neue',Arial,sans-serif;
  --f-body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0F13; --surface:#111A20; --ink:#E9EEF0; --muted:#93A3AC; --line:#223039;
  --accent:#D8B45C; --band:#070B0E; --band-2:#111A20; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A0F13; --surface:#111A20; --ink:#E9EEF0; --muted:#93A3AC; --line:#223039;
  --accent:#D8B45C; --band:#070B0E; --band-2:#111A20; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.65;padding-inline:0;padding-block:0}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:var(--f-display);line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5.4vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.lede{font-size:1.12rem;color:var(--muted);max-width:62ch}
.note{color:var(--muted);font-size:.92rem}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--band);border-bottom:1px solid var(--band-line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--band)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding-block:12px}
.brand img{height:38px;width:auto;display:block}
nav{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
nav a{color:var(--band-ink);text-decoration:none;padding:8px 14px;font-size:.93rem;font-weight:500;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--band-line)}
nav a[aria-current="page"]{border-color:var(--band-gold)}
nav a.cta{background:var(--gold-grad);color:var(--on-gold);font-weight:700;margin-left:10px;border:0}
nav a.cta:hover{filter:brightness(1.06)}

/* buttons */
.btn{display:inline-block;background:var(--gold-grad);color:var(--on-gold);padding:13px 24px;font:inherit;font-weight:700;font-size:.95rem;text-decoration:none;border:0;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.band .btn.ghost,.hero-band .btn.ghost{color:var(--band-ink);box-shadow:inset 0 0 0 1.5px var(--band-muted)}
.row{display:flex;gap:12px;flex-wrap:wrap}

/* dark bands */
.hero-band,.dark-band{background:var(--band);color:var(--band-ink)}
.hero-band .eyebrow,.dark-band .eyebrow{color:var(--band-gold)}
.hero-band .lede,.dark-band .lede{color:var(--band-muted)}
.hero-band{padding-block:72px 0}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding-bottom:64px}
.hero h1{margin:16px 0 22px}
.hero .row{margin-top:32px}
.gold{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.map{background:var(--band-2);border:1px solid var(--band-line);padding:16px;margin:0}
.map svg{display:block;width:100%;height:auto}
.map figcaption{font-family:var(--f-mono);font-size:.68rem;color:var(--band-muted);padding:10px 2px 0;letter-spacing:.06em}
.node{fill:var(--band);stroke:#5B6B76;stroke-width:1.2}
.nodet{fill:var(--band-ink);font:500 12px var(--f-mono)}
.nodes{fill:var(--band-muted);font:400 10px var(--f-mono)}
.flow{stroke:#8FA0AB;stroke-width:1.2;fill:none}
.hub{stroke:var(--band-gold);stroke-width:1.6}
.pin{fill:var(--risk)}
.pint{fill:#1A1006;font:700 11px var(--f-mono)}
.tag{fill:var(--risk-bg);stroke:var(--risk);stroke-width:1}
.tagt{fill:var(--band-ink);font:500 10.5px var(--f-mono)}
.proof{border-top:1px solid var(--band-line);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.proof div{padding:22px 24px 22px 0;display:grid;gap:2px;min-width:0;align-content:start}
.proof b{font-family:var(--f-display);font-size:1.05rem;color:var(--band-gold)}
.proof span{color:var(--band-muted);font-size:.9rem}

/* content */
section.page{padding-block:0}
.block{padding-block:72px}
.block+.block{border-top:1px solid var(--line)}
.head{display:grid;gap:12px;margin-bottom:36px;max-width:70ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.grid>*{min-width:0}
.card{background:var(--surface);border:1px solid var(--line);padding:28px;display:grid;gap:12px;align-content:start}
.card p{color:var(--muted)}
.card .kicker{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.card ul{margin:4px 0 0;padding-left:1.1em;color:var(--muted);display:grid;gap:4px}
.rule{border-top:2px solid var(--gold);padding-top:16px}
.rule p{color:var(--muted);margin-top:6px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));background:var(--surface);border:1px solid var(--line);counter-reset:s}
.step{padding:26px;border-right:1px solid var(--line);min-width:0}
.step:last-child{border-right:0}
.step::before{counter-increment:s;content:"Step " counter(s);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px}
.step p{color:var(--muted);font-size:.95rem;margin-top:6px}

.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px}
.offers>*{min-width:0}
.offer{background:var(--surface);border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;gap:12px}
.offer.lead{border-color:var(--gold);box-shadow:inset 0 3px 0 var(--gold)}
.offer p{color:var(--muted)}
.offer .link{margin-top:auto;font-weight:600;padding-top:8px}
.price{font-family:var(--f-display);font-size:2.1rem;font-weight:800;letter-spacing:-.02em}
.price small{font-family:var(--f-body);font-size:.88rem;font-weight:400;color:var(--muted);letter-spacing:0}
.badge{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-gold);background:var(--gold-grad);padding:3px 10px;align-self:flex-start;font-weight:500}

/* page header on inner pages */
.page-head{background:var(--band);color:var(--band-ink);padding-block:64px 56px;border-bottom:1px solid var(--band-line)}
.page-head h1{margin:14px 0 18px}
.page-head .eyebrow{color:var(--band-gold)}
.page-head .lede{color:var(--band-muted)}

/* services */
.svc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;padding-block:56px}
.svc,#contact{scroll-margin-top:70px}
.svc+.svc{border-top:1px solid var(--line)}
.svc dl{margin:20px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.95rem;border-top:1px solid var(--line);padding-top:16px}
.svc dt{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-top:3px}
.svc dd{margin:0}
ul.tick{list-style:none;margin:0;padding:0;display:grid;gap:12px}
ul.tick li{padding-left:28px;position:relative}
ul.tick li::before{content:"";position:absolute;left:1px;top:.5em;width:12px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
ul.cross li::before{width:12px;height:0;border-left:0;border-bottom:2px solid var(--risk);transform:none;top:.85em}
.tbl{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.94rem}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--bg)}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:600}
td.num{font-family:var(--f-mono);white-space:nowrap}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:start}
.facts{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);padding:28px;display:grid;gap:20px}
.facts div{display:grid;gap:2px}
.facts b{font-family:var(--f-display);font-size:1.7rem;line-height:1.1;letter-spacing:-.02em}
.facts span{color:var(--muted);font-size:.92rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{font-family:var(--f-mono);font-size:.76rem;border:1px solid var(--line);background:var(--surface);padding:5px 11px}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}
.form{background:var(--band-2);border:1px solid var(--band-line);padding:28px;display:grid;gap:16px;color:var(--band-ink)}
label{display:grid;gap:6px;font-weight:500;font-size:.9rem}
select,textarea,input{font:inherit;color:var(--band-ink);background:var(--band);border:1px solid var(--band-line);padding:11px;width:100%;border-radius:0}
textarea{min-height:100px;resize:vertical}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.errs{margin:0;padding:12px 14px 12px 30px;border:1px solid var(--risk);background:var(--risk-bg);color:var(--band-ink);font-size:.9rem}
.btn[disabled]{opacity:.6;cursor:wait}
input::placeholder,textarea::placeholder{color:var(--band-muted);opacity:.8}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.form .note{color:var(--band-muted)}
.addr{font-family:var(--f-mono);font-size:1.05rem;overflow-wrap:anywhere;color:var(--band-ink)}
.dark-band .note{color:var(--band-muted)}

/* closing cta */
.cta-band{padding-block:64px}
.cta-band .wrap{display:flex;gap:24px 48px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{max-width:24ch}

footer{background:var(--band);color:var(--band-muted);border-top:1px solid var(--band-line);padding-block:32px 40px;font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px 32px;flex-wrap:wrap}
footer img{height:34px;width:auto;display:block}

@media(max-width:860px){
  .hero,.svc,.about,.contact{grid-template-columns:1fr;gap:36px}
  .hero-band{padding-block:48px 0}
  .block{padding-block:52px}
  .page-head{padding-block:44px 40px}
  .step{border-right:0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .svc{padding-block:40px}
  .brand img{height:32px}
  nav a{padding:8px 10px}
}