/* ===== Sluice — shared design system ===== */
:root{
  --ink:#000; --ink-2:#060708; --panel:#0e1114; --panel-2:#14181d;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --glass:rgba(14,17,20,.55);
  --paper:#f6f7f9; --paper-dim:#98a0aa; --paper-faint:#5f6771;
  --gold:#4db8ff; --gold-bright:#93e0ff; --gold-deep:#2a86d6; --gold-ink:#04121f;
  --glow:rgba(77,184,255,.5);
  --maxw:1220px;
  --f:"Clash Display","Inter Tight","Inter",-apple-system,system-ui,sans-serif;
  --fb:"Inter",-apple-system,system-ui,sans-serif;
  --m:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--fb);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--gold-ink)}
img,svg{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--m);font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.gold{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--f);font-weight:700;line-height:1.03;letter-spacing:-.015em}
.mono{font-family:var(--m)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-weight:600;font-size:14px;padding:11px 20px;border-radius:999px;
  cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .25s,background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold:hover{background:var(--gold-bright);box-shadow:0 8px 34px -8px var(--glow);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--paper)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-white{background:#fff;color:#000}.btn-white:hover{transform:translateY(-1px);box-shadow:0 8px 30px -10px rgba(255,255,255,.4)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(0,0,0,.72);backdrop-filter:blur(14px);border-color:var(--line)}
.nav-in{max-width:1340px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--f);font-weight:600;font-size:21px;letter-spacing:-.01em}
.brand img.mark{height:28px;width:auto;flex:none;filter:drop-shadow(0 2px 7px rgba(3,10,20,.55))}
.brand{padding:5px 16px 5px 6px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035);width:fit-content;transition:border-color .2s,background .2s}
.brand:hover{border-color:var(--line-2);background:rgba(255,255,255,.06)}
.nav-mid{display:flex;gap:34px;font-size:14px;color:var(--paper-dim);position:absolute;left:50%;transform:translateX(-50%)}
.nav-mid a{transition:color .2s;position:relative}
.nav-mid a:hover,.nav-mid a.active{color:var(--paper)}
.nav-mid a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold)}
@media(max-width:900px){.nav-mid{display:none}}

/* generic section + editorial header */
.section{position:relative;padding:120px 0}
.section.panel{background:linear-gradient(180deg,rgba(0,0,0,.4),var(--ink-2) 26%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kicker{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.kicker .idx{font-family:var(--m);font-size:13px;color:var(--gold-deep);letter-spacing:.1em}
.kicker .rule{flex:1;height:1px;background:var(--line)}
.h-lead{font-size:clamp(2.1rem,5vw,3.6rem);max-width:15ch}
.p-lead{color:var(--paper-dim);font-size:18px;line-height:1.55;max-width:52ch;margin-top:20px}

/* cards */
.card{background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}

/* footer */
footer{border-top:1px solid var(--line);padding:64px 0 40px;background:var(--ink);position:relative;z-index:2}
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot .tagline{color:var(--paper-dim);font-size:14px;max-width:300px;margin-top:14px}
.ca{display:flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--m);font-size:12px;color:var(--paper-dim)}
.ca button{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 11px;color:var(--paper-dim);cursor:pointer;font-family:var(--m);font-size:12px;transition:border-color .2s,color .2s}
.ca button:hover{border-color:var(--gold);color:var(--paper)}
.foot-cols{display:flex;gap:60px}
.foot-cols p{font-family:var(--m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:14px}
.foot-cols a{display:block;color:var(--paper-dim);font-size:14px;padding:5px 0;transition:color .2s}
.foot-cols a:hover{color:var(--gold)}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--paper-faint);font-family:var(--m)}
@media(max-width:640px){.foot-cols{gap:34px}}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}