*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0A0A09;
  --bg2:#111110;
  --bg3:#181816;
  --border:#2A2A27;
  --border2:#363632;
  --text:#F0EDE8;
  --text2:#9B9890;
  --text3:#5C5A55;
  --accent:#C8FF00;
  --accent-bg:rgba(200,255,0,0.06);
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
}

body{
  font-family:'Space Grotesk',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.6;
}

/* ── HERO ── */
.hero{
  padding:5rem 2rem 3rem;
  max-width:760px;margin:0 auto;
  text-align:center;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.12em;
  color:var(--accent);text-transform:uppercase;
  background:var(--accent-bg);
  border:1px solid rgba(200,255,0,0.15);
  padding:5px 14px;border-radius:20px;
  margin-bottom:1.5rem;
}
.hero h1{
  font-family:'Syne',sans-serif;
  font-size:clamp(2rem,5vw,3rem);
  font-weight:800;letter-spacing:-1.5px;
  line-height:1.1;color:var(--text);
  margin-bottom:1rem;
}
.hero p{
  font-size:15px;color:var(--text2);
  max-width:480px;margin:0 auto;line-height:1.7;
}

/* ── TABS ── */
.tabs-wrap{
  max-width:760px;margin:0 auto;
  padding:0 2rem 2rem;
}
.tabs{
  display:inline-flex;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:10px;padding:4px;gap:2px;
}
.tab{
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;font-weight:500;
  padding:8px 18px;border-radius:7px;
  border:none;cursor:pointer;
  background:none;color:var(--text2);
  transition:all .2s;
}
.tab:hover{color:var(--text);}
.tab.active{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border2);
}

/* ── PANEL ── */
.panel{display:none;}
.panel.active{display:block;}

/* ── CONTENT ── */
.content{
  max-width:760px;margin:0 auto;
  padding:0 2rem 5rem;
}
.doc-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.doc-header{
  padding:1.75rem 2rem;
  border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
}
.doc-header h2{
  font-family:'Syne',sans-serif;
  font-size:20px;font-weight:700;letter-spacing:-.3px;
  color:var(--text);
}
.doc-header p{
  font-size:12px;color:var(--text3);margin-top:4px;
  font-family:'Space Mono',monospace;
}
.updated-badge{
  font-size:11px;font-weight:500;
  padding:4px 12px;border-radius:20px;
  background:var(--bg3);border:1px solid var(--border2);
  color:var(--text3);white-space:nowrap;
  font-family:'Space Mono',monospace;
}
.doc-body{padding:2rem;}
.doc-section{margin-bottom:2rem;}
.doc-section:last-child{margin-bottom:0;}
.doc-section h3{
  font-family:'Syne',sans-serif;
  font-size:14px;font-weight:700;
  letter-spacing:-.1px;color:var(--accent);
  margin-bottom:.75rem;
  display:flex;align-items:center;gap:8px;
}
.doc-section h3::before{
  content:'';display:block;
  width:3px;height:14px;
  background:var(--accent);border-radius:2px;
  flex-shrink:0;
}
.doc-section p{
  font-size:14px;color:var(--text2);
  line-height:1.75;margin-bottom:.6rem;
}
.doc-section p:last-child{margin-bottom:0;}
.doc-section ul{
  list-style:none;
  display:flex;flex-direction:column;gap:6px;
  margin-top:.5rem;
}
.doc-section ul li{
  font-size:14px;color:var(--text2);
  line-height:1.6;
  display:flex;align-items:flex-start;gap:10px;
  padding-left:4px;
}
.doc-section ul li::before{
  content:'—';color:var(--text3);flex-shrink:0;margin-top:1px;
}
.highlight-box{
  background:rgba(200,255,0,0.04);
  border:1px solid rgba(200,255,0,0.12);
  border-radius:var(--radius-sm);
  padding:12px 16px;margin-top:.75rem;
  font-size:13px;color:var(--text2);line-height:1.65;
}
.highlight-box strong{color:var(--accent);font-weight:600;}
.contact-link{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(200,255,0,0.3);
  transition:border-color .15s;
}
.contact-link:hover{border-color:var(--accent);}

/* ── FOOTER ── */
.page-footer{
  border-top:1px solid var(--border);
  padding:1.5rem 2rem;
  text-align:center;font-size:12px;color:var(--text3);
}

@media(max-width:600px){
  .hero{padding:3.5rem 1.25rem 2rem;}
  .tabs-wrap,.content{padding-left:1.25rem;padding-right:1.25rem;}
  .doc-body{padding:1.25rem;}
  .tabs{width:100%;justify-content:stretch;}
  .tab{flex:1;text-align:center;}
}