:root{
  --bg:#0A0E13;
  --panel:#121821;
  --panel-2:#0E141B;
  --border:#1D2934;
  --border-soft:#161F29;
  --text:#C7D3DB;
  --text-dim:#64778A;
  --text-bright:#EAF1F5;
  --amber:#E8A33D;
  --cyan:#39C0C9;
  --red:#C1483F;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --radius:3px;
  --maxw:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.mono{font-family:var(--font-mono);}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--text-bright);
  margin:0 0 0.5em 0;
  letter-spacing:-0.01em;
}

a{color:var(--cyan);}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

#mesh-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:0.5;
  pointer-events:none;
}

/* STATUS BAR */
.statusbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,14,19,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.statusbar-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px 24px;
  display:flex;
  align-items:center;
  gap:24px;
  font-size:12px;
  overflow-x:auto;
  white-space:nowrap;
}
.status-group{display:flex; align-items:center; gap:8px;}
.status-group--center{flex:1; justify-content:center;}
.status-label{color:var(--text-dim); letter-spacing:0.04em; font-family:var(--font-mono); font-size:11px;}
.status-value{color:var(--text-bright);}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block; background:var(--cyan);}
.dot-live{background:var(--cyan); box-shadow:0 0 0 0 rgba(57,192,201,0.6); animation:pulse 2s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(57,192,201,0.45);}
  70%{box-shadow:0 0 0 6px rgba(57,192,201,0);}
  100%{box-shadow:0 0 0 0 rgba(57,192,201,0);}
}

main{position:relative; z-index:1;}

/* HERO / TERMINAL */
.hero{
  padding:88px 24px 64px;
}
.hero-inner{
  max-width:var(--maxw);
  margin:0 auto;
}
.terminal{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 20px 60px -20px rgba(0,0,0,0.6);
}
.terminal-titlebar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:var(--panel-2);
  border-bottom:1px solid var(--border);
}
.tdot{width:10px; height:10px; border-radius:50%; display:inline-block;}
.td-r{background:#C1483F;}
.td-y{background:#E8A33D;}
.td-g{background:#39C0C9;}
.terminal-title{color:var(--text-dim); font-size:12px; margin-left:8px;}
.terminal-body{
  padding:24px;
  min-height:220px;
  font-size:14px;
}
.term-line{margin-bottom:4px; color:var(--text);}
.prompt{color:var(--cyan);}
.caret{
  display:inline-block;
  animation:blink 1s step-end infinite;
  color:var(--cyan);
}
@keyframes blink{
  0%,100%{opacity:1;}
  50%{opacity:0;}
}
.term-output{color:var(--text-dim); white-space:pre-wrap; margin:6px 0 14px;}
.term-output .out-line{color:var(--text); margin-bottom:2px;}
.term-output .out-accent{color:var(--amber);}
.term-output .out-good{color:var(--cyan);}
.term-input-row{display:flex; align-items:center; gap:8px;}
.term-input{
  flex:1;
  background:transparent;
  border:none;
  color:var(--text-bright);
  font-size:14px;
  caret-color:var(--cyan);
}
.term-input:focus{outline:none;}
.hero-hint{color:var(--text-dim); font-size:12px; margin-top:12px;}
.kbd{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:3px;
  padding:1px 6px;
  color:var(--text-bright);
}

/* SECTIONS */
.section{padding:72px 24px;}
.section--alt{background:linear-gradient(180deg, rgba(18,24,33,0.5), rgba(18,24,33,0) 60%);}
.section-inner{max-width:var(--maxw); margin:0 auto;}
.section-inner--narrow{max-width:640px;}
.eyebrow{
  color:var(--text-dim);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.section-title{font-size:clamp(24px,3vw,32px);}
.lede{max-width:640px; color:var(--text); font-size:16px;}

.badge-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.badge{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:12px;
  padding:7px 12px;
  border-radius:20px;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:32px;
}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
}
.card-head{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.card-icon{color:var(--amber); font-size:16px;}
.card h3{font-size:16px; margin:0;}
.card p{margin:0; color:var(--text-dim); font-size:14px;}

.note-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:32px;
}
.note-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
}
.note-tag{
  display:inline-block;
  color:var(--cyan);
  font-size:11px;
  letter-spacing:0.06em;
  border:1px solid var(--border);
  border-radius:3px;
  padding:2px 8px;
  margin-bottom:12px;
}
.note-card h3{font-size:15px; margin-bottom:8px;}
.note-card p{margin:0; color:var(--text-dim); font-size:13px;}

.logpanel{
  margin-top:36px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.logpanel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text-dim);
  font-size:12px;
}
.logpanel-live{display:flex; align-items:center; gap:6px; color:var(--cyan);}
.logpanel-body{padding:14px 16px; font-size:12px; overflow-x:auto;}
.logline{color:var(--text-dim); white-space:pre; margin-bottom:5px;}
.lv-info{color:var(--cyan);}
.lv-warn{color:var(--amber);}

/* DECODER */
.decoder-panel{
  margin-top:32px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  max-width:520px;
}
.decoder-head{
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text-dim);
  font-size:12px;
}
.decoder-body{padding:20px;}
.decoder-hint{color:var(--text-dim); font-size:13px; margin:0 0 16px;}
.decoder-row{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.decoder-row label{width:70px; color:var(--text-dim); font-size:12px; flex-shrink:0;}
.decoder-field{
  flex:1;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:3px;
  color:var(--text-bright);
  padding:8px 10px;
  font-size:14px;
  letter-spacing:0.06em;
}
.decoder-field--small{flex:0 0 80px;}

/* VAULT */
.vault-panel{
  margin-top:32px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  max-width:440px;
  padding:22px;
}
.vault-head{
  display:flex; align-items:center; gap:10px;
  color:var(--text-dim);
  font-size:12px;
  margin-bottom:14px;
}
.vault-hint{color:var(--text-dim); font-size:13px; margin:0 0 16px;}
.vault-panel label{display:block; color:var(--text-dim); font-size:12px; margin-bottom:6px;}
.vault-field{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:3px;
  color:var(--text-bright);
  padding:10px 12px;
  font-size:14px;
  margin-bottom:16px;
}
.vault-msg{min-height:18px; font-size:13px; margin-top:12px;}
.vault-msg.ok{color:var(--cyan);}
.vault-msg.err{color:var(--red);}

.btn{
  display:inline-block;
  background:var(--cyan);
  color:#08131a;
  border:none;
  border-radius:3px;
  padding:10px 20px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.08);}
.btn--outline{
  background:transparent;
  color:var(--text-bright);
  border:1px solid var(--border);
  text-decoration:none;
}
.btn--outline:hover{border-color:var(--cyan); color:var(--cyan);}

.contact-row{margin-top:24px;}

.site-footer{
  border-top:1px solid var(--border);
  padding:24px;
  position:relative;
  z-index:1;
}
.site-footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--text-dim);
}
.footer-dim{color:var(--text-dim);}

@media (max-width:800px){
  .card-grid{grid-template-columns:1fr;}
  .note-grid{grid-template-columns:1fr;}
  .statusbar-inner{gap:16px;}
  .status-group--center{display:none;}
}