/* Nightband website: charcoal #18181c, purple #9b5cff, electric blue #2fd6ff */
@font-face{font-family:"Archivo";font-weight:400;font-display:swap;src:url(Archivo-400.woff) format("woff")}
@font-face{font-family:"Archivo";font-weight:600;font-display:swap;src:url(Archivo-600.woff) format("woff")}
@font-face{font-family:"Archivo";font-weight:800;font-display:swap;src:url(Archivo-800.woff) format("woff")}
@font-face{font-family:"Martian Mono";font-weight:500;font-display:swap;src:url(MartianMono-500.woff) format("woff")}
@font-face{font-family:"Martian Mono";font-weight:700;font-display:swap;src:url(MartianMono-700.woff) format("woff")}

:root{
  --charcoal:#18181c; --panel:#212127; --panel-2:#2a2a31; --edge:#34343d;
  --purple:#9b5cff; --blue:#2fd6ff; --text:#ecebf3; --dim:#a9a6b8; --faint:#77748a;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--charcoal);color:var(--dim);font:16px/1.6 var(--sans);min-height:100vh;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(grunge.webp) repeat;background-size:384px 384px;opacity:.38}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:#8ceaff}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:880px;margin:0 auto;padding:0 16px}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.brand img{width:170px}
.nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.nav a{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-decoration:none;padding:10px 10px;border-radius:8px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--blue);background:rgba(47,214,255,.06)}

/* Panels */
.panel{background:linear-gradient(180deg,#2a2a31 0%,#212127 55%,#1c1c21 100%);border:1px solid #0e0e11;border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.45);padding:24px}
.kicker{font:500 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--purple);margin:0 0 10px}
h1,h2,h3{color:var(--text);line-height:1.2;margin:0}
h1{font:800 clamp(30px,6vw,46px)/1.1 var(--sans);letter-spacing:-.01em}
h2{font:800 clamp(22px,4.4vw,28px)/1.2 var(--sans);margin:0 0 12px}
h3{font:600 17px/1.3 var(--sans);margin:0 0 6px}
p{margin:0 0 12px}
.lead{font-size:clamp(17px,2.6vw,19px);color:var(--text);max-width:60ch}

/* Hero */
.hero{padding:34px 0 20px;display:grid;gap:22px}
.hero .icon{width:96px;border-radius:22px;box-shadow:0 0 0 1px #0e0e11,0 0 30px rgba(155,92,255,.35)}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:15px 20px;border-radius:12px;border:1px solid #0b5a70;color:#06222b;background:linear-gradient(180deg,#a6f0ff,var(--blue) 55%,#16a9cf);
  box-shadow:0 3px 0 #0c6f89,0 0 18px rgba(47,214,255,.35)}
.btn:hover{color:#06222b;filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--purple);border-color:rgba(155,92,255,.6);box-shadow:0 0 14px rgba(155,92,255,.2)}
.note{font:500 12px/1.5 var(--mono);color:var(--faint)}

/* Tool grid */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0 0}
.tool{background:linear-gradient(180deg,#2c2440 0%,#231d31 55%,#1c1826 100%);border:1px solid #120c1d;border-radius:14px;padding:18px;
  box-shadow:inset 0 1px 0 rgba(185,139,255,.15),0 6px 16px rgba(0,0,0,.35)}
.tool .tag{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;display:block}
.tool p{font-size:15px;margin:0}

section{margin:18px 0}
.promise{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.promise div{border-left:3px solid var(--purple);padding:2px 0 2px 14px}
.promise b{color:var(--text);display:block;margin-bottom:2px}

/* Documents (privacy, support) */
.doc h1{margin:6px 0 8px}
.doc .meta{font:500 12px/1.5 var(--mono);color:var(--faint);margin:0 0 22px}
.doc h3{font:700 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:28px 0 8px}
.doc ul{padding-left:20px;margin:8px 0}
.doc li{margin:6px 0}
.doc b,.doc i{color:var(--text)}
.pp-sum{background:rgba(155,92,255,.08);border:1px solid rgba(155,92,255,.35);border-radius:12px;padding:14px 16px;color:var(--text)}
.pp-ent{margin-top:28px;padding-top:14px;border-top:1px solid var(--edge);font-size:14px}
details.faq{border:1px solid var(--edge);border-radius:12px;padding:14px 16px;margin:10px 0;background:rgba(0,0,0,.15)}
details.faq summary{cursor:pointer;color:var(--text);font-weight:600}
details.faq p{margin:10px 0 0}

/* Footer */
footer{margin:34px 0 0;padding:22px 0 30px;border-top:1px solid var(--edge);font:500 12px/1.7 var(--mono);color:var(--faint)}
footer nav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--blue)}

@media (max-width:520px){
  .brand img{width:132px}
  .nav a{padding:9px 7px;letter-spacing:.1em}
  .panel{padding:18px}
}