@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;700&display=swap');

:root {
  --bg:      #07101f;
  --surface: #0d1e35;
  --panel:   #112240;
  --accent:  #00c6ff;
  --accent2: #0072ff;
  --green:   #00e5a0;
  --yellow:  #ffe066;
  --red:     #ff5f6d;
  --text:    #ccd6f6;
  --muted:   #8892b0;
  --white:   #e6f1ff;
  --border:  rgba(0,198,255,.18);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}

/* ─── ANIMATED BG ─── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(0,114,255,.12), transparent),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(0,229,160,.07), transparent),
    var(--bg);
}

/* ─── PROGRESS ─── */
#progress-bar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--accent2),var(--accent),var(--green));
  z-index:9999;
}

/* ─── BACK TOP ─── */
#back-top {
  position:fixed; bottom:28px; right:28px;
  width:44px; height:44px; border-radius:8px;
  background:var(--panel); color:var(--accent);
  border:1px solid var(--border); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2em; opacity:0; transform:translateY(15px);
  transition:opacity .3s,transform .3s;
}
#back-top.visible { opacity:1; transform:translateY(0); }
#back-top:hover { background:var(--accent); color:var(--bg); }

/* ─── LAYOUT ─── */
.container { max-width:1160px; margin:0 auto; padding:0 24px 60px; }

/* ─── HEADER ─── */
header {
  padding:80px 40px 60px;
  text-align:center;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
  animation:fadeDown .9s ease both;
}
header::before {
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(0,198,255,.04) 60px),
    repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(0,198,255,.04) 60px);
}
.badge {
  display:inline-block; font-family:'Space Mono',monospace;
  font-size:.75em; letter-spacing:.12em; color:var(--accent);
  border:1px solid var(--accent); border-radius:4px;
  padding:4px 12px; margin-bottom:20px;
  text-transform:uppercase;
}
h1 {
  font-family:'DM Sans',sans-serif; font-weight:700;
  font-size:clamp(2em,5vw,3.8em);
  color:var(--white);
  line-height:1.15;
  margin-bottom:18px;
  position:relative;
}
h1 span { color:var(--accent); }
.header-desc {
  font-size:1.1em; color:var(--muted); max-width:600px;
  margin:0 auto 30px; position:relative;
}
.header-tags { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.tag {
  font-size:.8em; font-family:'Space Mono',monospace;
  background:rgba(0,198,255,.1); border:1px solid rgba(0,198,255,.25);
  border-radius:4px; padding:4px 12px; color:var(--accent);
}

/* ─── NAV ─── */
.nav-tabs {
  display:flex; flex-wrap:wrap; gap:6px; padding:18px 0;
  border-bottom:1px solid var(--border); margin-bottom:0;
  position:sticky; top:0; z-index:100; background:var(--bg);
}
.nav-tab {
  font-size:.82em; font-family:'Space Mono',monospace;
  padding:6px 14px; border-radius:4px;
  background:transparent; border:1px solid var(--border);
  color:var(--muted); cursor:pointer; text-decoration:none;
  transition:all .2s;
}
.nav-tab:hover, .nav-tab.active {
  background:rgba(0,198,255,.12); border-color:var(--accent); color:var(--accent);
}

/* ─── SECTIONS ─── */
.section {
  margin:48px 0;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s ease, transform .5s ease;
}
.section.visible { opacity:1; transform:translateY(0); }

h2 {
  font-size:1.75em; font-weight:700; color:var(--white);
  margin-bottom:28px; padding-bottom:16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
h2 .icon { font-size:.9em; }
h3 {
  font-size:1.2em; font-weight:600; color:var(--accent);
  margin:28px 0 14px;
  font-family:'Space Mono',monospace;
  letter-spacing:.04em;
}
h3::before { content:'> '; opacity:.5; }
h4 { font-size:1em; font-weight:600; color:var(--white); margin:16px 0 8px; }
p  { margin-bottom:14px; color:var(--text); font-size:1em; }
ul, ol { margin-left:24px; margin-bottom:14px; }
li { margin-bottom:8px; }

/* ─── CARDS GRID ─── */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin:20px 0; }
.card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:22px;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover {
  border-color:var(--accent); transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(0,198,255,.12);
}
.card-icon { font-size:2em; margin-bottom:10px; }
.card h4 { color:var(--accent); margin-top:0; margin-bottom:8px; font-size:1em; }

/* ─── PANEL ─── */
.panel {
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:24px; margin:18px 0;
}
.panel.accent-border { border-left:3px solid var(--accent); }
.panel.green-border  { border-left:3px solid var(--green); }
.panel.red-border    { border-left:3px solid var(--red); }
.panel.yellow-border { border-left:3px solid var(--yellow); }

/* ─── TABLE ─── */
table { width:100%; border-collapse:collapse; margin:18px 0; }
th, td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); }
th { color:var(--accent); font-family:'Space Mono',monospace; font-size:.82em; letter-spacing:.06em; text-transform:uppercase; background:rgba(0,198,255,.05); }
tr:hover td { background:rgba(0,198,255,.04); }
td { color:var(--text); }

/* ─── STATS ─── */
.stats-row { display:flex; flex-wrap:wrap; gap:16px; margin:24px 0; }
.stat {
  flex:1; min-width:130px; text-align:center;
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:20px 12px;
}
.stat-num { font-family:'Space Mono',monospace; font-size:1.9em; color:var(--accent); font-weight:700; }
.stat-lbl { font-size:.8em; color:var(--muted); margin-top:4px; }

/* ─── DNA ANIM DIVIDER ─── */
.dna-divider {
  text-align:center; padding:10px 0; color:var(--border);
  font-family:'Space Mono',monospace; font-size:.75em; letter-spacing:.3em;
  margin:8px 0;
}

/* ─── CODE BLOCK ─── */
.code-block {
  background:#020c18; border:1px solid var(--border);
  border-radius:8px; padding:16px; margin:16px 0;
  font-family:'Space Mono',monospace; font-size:.85em;
  color:var(--accent); overflow-x:auto;
  white-space:pre;
}

/* ─── TIMELINE ─── */
.timeline { padding-left:24px; border-left:2px solid var(--border); margin:20px 0; }
.tl-item { position:relative; margin-bottom:24px; }
.tl-item::before {
  content:''; position:absolute; left:-30px; top:6px;
  width:10px; height:10px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
}
.tl-year { font-family:'Space Mono',monospace; font-size:.8em; color:var(--accent); margin-bottom:4px; }

/* ─── BADGES ─── */
.badge-row { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.b { font-size:.75em; font-family:'Space Mono',monospace; padding:3px 10px; border-radius:3px; }
.b-green  { background:rgba(0,229,160,.12); color:var(--green); border:1px solid rgba(0,229,160,.3); }
.b-blue   { background:rgba(0,198,255,.12); color:var(--accent); border:1px solid rgba(0,198,255,.3); }
.b-yellow { background:rgba(255,224,102,.1); color:var(--yellow); border:1px solid rgba(255,224,102,.3); }
.b-red    { background:rgba(255,95,109,.1); color:var(--red); border:1px solid rgba(255,95,109,.3); }

/* ─── ANIMATIONS ─── */
@keyframes fadeDown { from{opacity:0;transform:translateY(-24px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:700px) {
  h1 { font-size:2em; }
  .grid { grid-template-columns:1fr; }
  .stats-row { flex-direction:column; }
  .nav-tabs { position:relative; }
}