:root{
  --bg: #0a0e14;
  --bg-panel: #0d1117;
  --bg-card: #11161d;
  --border: #1e2733;
  --accent: #39ff9c;
  --accent-2: #58a6ff;
  --text: #e6edf3;
  --text-2: #8b949e;
  font-family: 'Inter', sans-serif;
}

*{scroll-behavior:smooth;}

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.fw-800{font-weight:800;}
.text-secondary-2{color:var(--text-2);}
.text-accent{color:var(--accent);}

/* NAVBAR */
#mainNav{
  background: rgba(10,14,20,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background .2s ease;
}
.navbar-brand{display:flex;align-items:center;gap:.5rem;}
.brand-mark{
  background: var(--accent);
  color:#03130a;
  font-weight:800;
  font-family:'JetBrains Mono',monospace;
  padding:.15rem .45rem;
  border-radius:6px;
  font-size:.85rem;
}
.brand-text{color:var(--text);font-weight:500;}
.brand-text strong{color:var(--accent);font-weight:700;}
.nav-link{color:var(--text-2)!important;font-weight:500;}
.nav-link:hover{color:var(--accent)!important;}
.btn-outline-accent{
  color:var(--accent);
  border:1px solid var(--accent);
  background:transparent;
}
.btn-outline-accent:hover{background:var(--accent);color:#03130a;}
.btn-accent{
  background: var(--accent);
  color:#03130a;
  font-weight:700;
  border:none;
}
.btn-accent:hover{background:#2be085;color:#03130a;}
.btn-outline-light{border-color:#3a4552;color:var(--text);}
.btn-outline-light:hover{background:#1a222c;color:var(--text);border-color:#3a4552;}

/* HERO */
.hero{
  min-height: 100vh;
  padding-top:80px;
  position:relative;
  background: radial-gradient(ellipse at top right, rgba(57,255,156,0.08), transparent 55%),
              radial-gradient(ellipse at bottom left, rgba(88,166,255,0.08), transparent 55%),
              var(--bg);
  overflow:hidden;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.badge-tag{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--accent);
  border:1px solid rgba(57,255,156,0.35);
  background:rgba(57,255,156,0.06);
  padding:.35rem .7rem;
  border-radius:20px;
}
.hero-stats{font-family:'JetBrains Mono',monospace;}
.hero-stats > div{display:flex;flex-direction:column;}
.stat-num{color:var(--accent);font-weight:700;font-size:1.1rem;}
.stat-label{color:var(--text-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;}

.hero-panel{
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.hero-panel-head{
  background:#161b22;
  padding:.6rem 1rem;
  display:flex;align-items:center;
  border-bottom:1px solid var(--border);
}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;}
.dot-red{background:#ff5f56;}
.dot-yellow{background:#ffbd2e;}
.dot-green{background:#27c93f;}
.hero-console{
  font-family:'JetBrains Mono',monospace;
  font-size:.8rem;
  line-height:1.7;
  padding:1.25rem;
  margin:0;
  color:var(--text-2);
  white-space:pre-wrap;
}
.c-prompt{color:var(--accent-2);}
.c-ok{color:var(--accent);}
.c-cursor{animation: blink 1s step-start infinite;}
@keyframes blink{50%{opacity:0;}}

/* SECTIONS */
.section-pad{padding:6rem 0;}
.bg-panel{background:var(--bg-panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  color:var(--accent);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:block;
  margin-bottom:.75rem;
}

/* COMPONENT CARDS */
.comp-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:2rem;
  transition:transform .2s ease, border-color .2s ease;
}
.comp-card:hover{transform:translateY(-4px);border-color:var(--accent);}
.comp-icon{
  width:52px;height:52px;
  border-radius:10px;
  background:rgba(57,255,156,0.1);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  margin-bottom:1.25rem;
}

/* FEATURE CARDS */
.feat-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.75rem;
  height:100%;
  transition:border-color .2s ease;
}
.feat-card:hover{border-color:var(--accent-2);}
.feat-icon{font-size:1.6rem;color:var(--accent-2);margin-bottom:1rem;display:block;}

/* CONSOLE */
.console-frame{
  border:1px solid var(--border);
  border-radius:14px;
  padding:.75rem;
  background:var(--bg-card);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.console-points li{
  padding:.4rem 0;
  color:var(--text-2);
}
.console-points i{color:var(--accent);margin-right:.6rem;}

/* SECURITY CARDS */
.sec-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:2rem;
  text-align:center;
}
.sec-icon{font-size:2rem;color:var(--accent);margin-bottom:1rem;display:block;}

/* STEPS */
.step-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.5rem;
  height:100%;
}
.step-num{
  font-family:'JetBrains Mono',monospace;
  color:var(--accent);
  font-weight:700;
  font-size:1.4rem;
  display:block;
  margin-bottom:.5rem;
  opacity:.6;
}

/* CTA */
.cta-section{
  background: linear-gradient(180deg, var(--bg-panel), var(--bg));
  border-top:1px solid var(--border);
}
.cta-form .form-control{
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text);
}
.cta-form .form-control:focus{
  background:var(--bg-card);
  color:var(--text);
  border-color:var(--accent);
  box-shadow:0 0 0 .2rem rgba(57,255,156,0.15);
}
.cta-form .form-control::placeholder{color:var(--text-2);}

/* FOOTER */
.footer{background:var(--bg-panel);border-top:1px solid var(--border);}
.footer-links li{margin-bottom:.5rem;}
.footer-links a{color:var(--text-2);text-decoration:none;font-size:.9rem;}
.footer-links a:hover{color:var(--accent);}