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

/* ── VARIABLES ── */
:root{
  --bg:       #050505;
  --bg2:      #0c0c0c;
  --bg3:      #111;
  --border:   #1a1a1a;
  --border2:  #222;
  --accent:   #00c896;
  --accent2:  #006eff;
  --amber:    #f5a623;
  --text:     #e4e4e4;
  --text2:    #999;
  --text3:    #555;
  --serif:    'Instrument Serif', Georgia, serif;
  --mono:     'Fragment Mono', 'Courier New', monospace;
  --sans:     'Manrope', sans-serif;
  --radius:   4px;
  --max:      1200px;
}

/* ── BASE ── */
html { scroll-behavior:smooth; font-size:16px; }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body { background:var(--bg); color:var(--text); font-family:var(--sans); font-weight:300; line-height:1.6; overflow-x:hidden; min-height:100vh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
ul,ol { list-style:none; }
::selection { background:rgba(0,200,150,.25); color:#fff; }

/* ── SKIP LINK ── */
.skip { position:absolute; top:-9999px; left:1rem; background:var(--accent); color:#000; font-family:var(--mono); font-size:.75rem; padding:.5rem 1rem; border-radius:var(--radius); z-index:9999; transition:top .15s; }
.skip:focus { top:1rem; }

/* ── FOCUS ── */
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius); }
:focus:not(:focus-visible) { outline:none; }

/* ════════════════════════════════
   NAV
════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:60px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 3rem;
  background:rgba(5,5,5,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s, background .3s;
}
.nav.scrolled {
  background:rgba(5,5,5,.97);
  box-shadow:0 1px 20px rgba(0,0,0,.4);
}
.nav-brand {
  font-family:var(--mono); font-size:.75rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent);
}
.nav-links { display:flex; gap:2rem; align-items:center; }
.nav-links a {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text2);
  padding:.25rem 0; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-links a:hover { color:#fff; }
.nav-links a.active,
.nav-links a[aria-current="page"] { color:var(--accent); border-bottom-color:var(--accent); }
.nav-toggle {
  display:none; background:none; border:1px solid var(--border2);
  color:var(--text2); padding:.4rem .5rem; border-radius:var(--radius);
  cursor:pointer; flex-direction:column; gap:4px; align-items:center; justify-content:center;
}
.nav-toggle span { display:block; width:16px; height:1px; background:var(--text2); transition:all .2s; }
.nav-toggle[aria-expanded=true] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded=true] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded=true] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
.nav-drawer {
  display:none; position:fixed; top:60px; left:0; right:0;
  background:rgba(5,5,5,.98); border-bottom:1px solid var(--border);
  z-index:199; padding:1.5rem 2rem; flex-direction:column; gap:0;
}
.nav-drawer.open { display:flex; }
.nav-drawer a {
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text2);
  padding:.85rem 0; border-bottom:1px solid var(--border);
  transition:color .2s;
}
.nav-drawer a:last-child { border-bottom:none; }
.nav-drawer a:hover { color:var(--accent); }
.nav-drawer a.active,
.nav-drawer a[aria-current="page"] { color:var(--accent); }

/* ════════════════════════════════
   LAYOUT
════════════════════════════════ */
.page { padding-top:60px; min-height:100vh; }
.container { max-width:var(--max); margin:0 auto; padding:0 3rem; }

/* Page header (used on sub-pages) */
.page-header {
  border-bottom:1px solid var(--border);
  padding:4rem 0 3rem;
}
.page-header-label {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.75rem;
  display:flex; align-items:center; gap:.75rem;
}
.page-header-label::before {
  content:''; display:block; width:1.5rem; height:1px; background:var(--accent);
}
.page-header h1 {
  font-family:var(--serif); font-size:clamp(2.5rem,5vw,4.5rem);
  color:#fff; line-height:1.05; font-weight:400;
}
.page-header h1 em { font-style:italic; color:var(--accent); }
.page-header p {
  margin-top:1rem; font-size:.95rem; color:var(--text2);
  max-width:540px; line-height:1.8;
}

/* Sections */
.section { padding:4rem 0; border-bottom:1px solid var(--border); }
.section:last-child { border-bottom:none; }
.section-label {
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text3); margin-bottom:2.5rem;
  display:flex; align-items:center; gap:1rem;
}
.section-label::after { content:''; flex:1; height:1px; background:var(--border2); }
.section-title {
  font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.8rem);
  color:#fff; font-weight:400; margin-bottom:.5rem;
}
.section-title em { font-style:italic; color:var(--accent); }

/* ════════════════════════════════
   CARDS
════════════════════════════════ */
.card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.75rem;
  transition:border-color .25s, transform .25s;
  position:relative; overflow:hidden;
}
.card:hover { border-color:var(--border2); transform:translateY(-2px); }
.card-accent::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

/* ════════════════════════════════
   BUTTONS
════════════════════════════════ */
.btn {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.7rem 1.5rem;
  display:inline-block; border-radius:var(--radius);
  transition:all .2s; cursor:pointer;
}
.btn-fill { background:var(--accent); color:#000; font-weight:500; border:1px solid var(--accent); }
.btn-fill:hover { background:#00e8b0; border-color:#00e8b0; box-shadow:0 4px 20px rgba(0,200,150,.25); transform:translateY(-1px); }
.btn-outline { border:1px solid var(--border2); color:var(--text2); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }

/* ════════════════════════════════
   STATS ROW
════════════════════════════════ */
.stats-row { display:flex; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.stat-item {
  flex:1; padding:1.5rem 1.25rem; border-right:1px solid var(--border);
  text-align:center;
}
.stat-item:last-child { border-right:none; }
.stat-num {
  font-family:var(--serif); font-size:2.2rem; color:#fff; line-height:1;
  margin-bottom:.25rem; display:flex; align-items:baseline; justify-content:center; gap:.1rem;
}
.stat-num sup { font-family:var(--mono); font-size:.9rem; color:var(--accent); margin-left:.1rem; }
.stat-lbl { font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text2); }

/* ════════════════════════════════
   BADGE TAGS
════════════════════════════════ */
.tag {
  font-family:var(--mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.2rem .55rem;
  border-radius:2px; display:inline-block;
}
.tag-ieee { background:rgba(0,110,255,.1); color:#5599ff; border:1px solid rgba(0,110,255,.2); }
.tag-journal { background:rgba(0,200,150,.08); color:var(--accent); border:1px solid rgba(0,200,150,.2); }
.tag-conf { background:rgba(180,120,255,.08); color:#b47fff; border:1px solid rgba(180,120,255,.2); }
.tag-book { background:rgba(245,166,35,.08); color:var(--amber); border:1px solid rgba(245,166,35,.2); }
.tag-chapter { background:rgba(245,166,35,.06); color:#d4961e; border:1px solid rgba(245,166,35,.15); }

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
footer {
  border-top:1px solid var(--border); padding:2rem 3rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.75rem;
  font-family:var(--mono); font-size:.62rem; color:var(--text3);
  letter-spacing:.1em;
}
footer a { color:var(--text2); transition:color .2s; }
footer a:hover { color:var(--accent); }

/* ════════════════════════════════
   REVEAL ANIMATIONS
════════════════════════════════ */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in { opacity:1; transform:none; }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media(max-width:768px){
  .nav { padding:0 1.25rem; }
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  .container { padding:0 1.25rem; }
  .page-header { padding:3rem 0 2rem; }
  .stats-row { flex-wrap:wrap; }
  .stat-item { flex:1 1 45%; border-bottom:1px solid var(--border); }
  footer { flex-direction:column; text-align:center; padding:1.5rem; }
}
@media(max-width:480px){
  .stat-item { flex:1 1 100%; }
  .page-header h1 { font-size:2.2rem; }
}

/* ════════════════════════════════
   EXPLORE / QUICK-LINK GRID
════════════════════════════════ */
.explore-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.explore-item {
  background:var(--bg2); padding:2rem; display:block;
  transition:background .2s;
}
.explore-item:hover { background:var(--bg3); }
.explore-icon { font-size:1.5rem; margin-bottom:.75rem; }
.explore-title { font-family:var(--serif); font-size:1.1rem; color:#fff; margin-bottom:.4rem; }
.explore-desc { font-family:var(--mono); font-size:.62rem; color:var(--text2); }

/* ════════════════════════════════
   BACK TO TOP
════════════════════════════════ */
.back-to-top {
  position:fixed; bottom:2rem; right:2rem; z-index:150;
  width:40px; height:40px;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--radius); color:var(--text2);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer;
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s, background .2s, color .2s, border-color .2s;
}
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover { background:var(--accent); color:#000; border-color:var(--accent); }

/* ════════════════════════════════
   BODY SCROLL LOCK (mobile nav)
════════════════════════════════ */
body.nav-open { overflow:hidden; }

/* ════════════════════════════════
   RESPONSIVE (additional)
════════════════════════════════ */
@media(max-width:768px){
  .explore-grid { grid-template-columns:1fr; }
  .back-to-top { bottom:1.25rem; right:1.25rem; }
}