/* Base: old-computer mono vibe + hyper-modern layout */
:root{
  --bg-0:#0f1012;
  --bg-1:#14161a;
  --bg-2:#1b1e24;
  --txt:#e5e7eb;
  --muted:#9aa0a6;
  --brand:#9aa7ff;
  --brand-2:#a7ffc9;
  --card:#17191f;
  --glass:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 70% -20%, #2a2e37 0%, var(--bg-0) 40%) no-repeat fixed, var(--bg-0);
  color:var(--txt);
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height:1.6;
  letter-spacing:.15px;
}

.container{width:min(1100px, 92vw); margin:0 auto;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 4vw; backdrop-filter:saturate(1.2) blur(8px);
  background: linear-gradient(180deg, rgba(20,22,26,.75), rgba(20,22,26,.35));
  border-bottom:1px solid var(--border);
}
.logo{font-weight:600; text-decoration:none; color:var(--txt); letter-spacing:.6px}
.logo span{color:var(--brand)}
.nav{display:flex; gap:18px; align-items:center}
.nav a{
  color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px;
}
.nav a.active, .nav a:hover{color:var(--txt); background:var(--glass)}
#themeToggle{width:38px; height:34px; border-radius:12px; border:1px solid var(--border); background:var(--bg-2); cursor:pointer}

/* Hero Parallax */
.hero{position:relative; min-height:72vh; display:grid; place-items:center; overflow:hidden}
.hero-bg{
  position:absolute; inset:-10%; background-image:url('hero.svg'), radial-gradient(900px 600px at 30% -10%, #3b3f48 0%, transparent 60%);
  background-size:cover; background-repeat:no-repeat; background-position:center;
  transform:translateZ(0);
  will-change:transform;
  filter:contrast(1.05) saturate(1.05);
}
.hero-content{position:relative; text-align:center; padding:8vh 2rem; z-index:2}
.hero .subtitle{color:var(--muted); max-width:760px; margin:10px auto 22px}
.glitch{font-size: clamp(28px, 7vw, 64px); position:relative; display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute; left:0; top:0; width:100%; overflow:hidden; clip-path:inset(0 0 50% 0);
}
.glitch::before{transform:translate(2px, -1px); color:var(--brand); opacity:.6; mix-blend-mode:screen}
.glitch::after{transform:translate(-2px, 1px); color:var(--brand-2); opacity:.55; mix-blend-mode:screen}
.scroll-indicator{position:absolute; bottom:18px; letter-spacing:.4em; font-size:12px; color:var(--muted)}

.cta-row{display:flex; gap:12px; justify-content:center}
.btn{border:1px solid var(--border); background:var(--bg-2); color:var(--txt); padding:12px 18px; border-radius:14px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; box-shadow:var(--shadow); cursor:pointer}
.btn.primary{background:linear-gradient(180deg, #2c2f36, #1c2026); border-color:#2a2f39}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px; border-radius:10px; box-shadow:none}
.btn.link{box-shadow:none; background:transparent; border:none; padding:0; color:var(--txt); opacity:.85}
.btn-group{display:flex; gap:10px}

.section-title{font-size: clamp(22px, 4vw, 34px); margin:40px 0 14px}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.2));
  border:1px solid var(--border);
  border-radius:22px; padding:22px; box-shadow:var(--shadow);
}
.card.glass{backdrop-filter: blur(12px) saturate(1.1); background:var(--glass)}

.tags{display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:14px 0 0}
.tags li{list-style:none; font-size:13px; color:var(--muted); border:1px dashed var(--border); border-radius:999px; padding:6px 10px}

.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0 8px}
.stat{padding:18px; text-align:center; background:var(--card); border:1px solid var(--border); border-radius:18px}
.stat .num{display:block; font-size: clamp(22px, 6vw, 40px); font-weight:600}
.stat .label{color:var(--muted); font-size:12px}

/* Grid */
.grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:16px}
.grid > *{grid-column: span 4}
.grid.single > *{grid-column: span 8}
@media (max-width: 900px){
  .grid > *{grid-column: span 6}
  .grid.single > *{grid-column: span 12}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

/* Project cards */
.project{
  position:relative; overflow:hidden; border-radius:20px; background:var(--card); border:1px solid var(--border);
  transition:transform .2s ease, box-shadow .2s ease;
}
.project:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.35)}
.project .cover{aspect-ratio:16/10; background:linear-gradient(135deg, #3a3f46, #22262e)}
.project .body{padding:16px}
.project h3{margin:0 0 6px 0; font-size:18px}
.meta{display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font-size:12px}

/* Inputs & modal */
.input{width:100%; padding:12px 14px; background:#12151a; color:var(--txt); border:1px solid var(--border); border-radius:12px; outline:none}
.field{display:grid; gap:6px; margin:10px 0}
.inline{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.checkbox{display:flex; align-items:center; gap:8px; color:var(--muted)}

.modal{border:none; padding:0; background:transparent}
.modal[open]::backdrop{backdrop-filter: blur(6px) brightness(.7)}
.modal-card{width:min(720px, 92vw); border-radius:20px; border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow)}
.modal-card header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border)}
.modal-card .content{padding:16px}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; padding:14px 16px; border-top:1px solid var(--border)}
.icon.close{background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:18px}

/* Footer */
.site-footer{padding:40px 4vw; text-align:center; color:var(--muted); border-top:1px solid var(--border); background:linear-gradient(0deg, rgba(0,0,0,.2), transparent)}

/* Utilities */
.center{text-align:center; margin:18px 0}

/* Light theme */
.light{
  --bg-0:#f3f4f6; --bg-1:#ffffff; --bg-2:#f5f7fa;
  --txt:#101316; --muted:#4b5563; --brand:#4f46e5; --brand-2:#00b894; --card:#ffffff; --glass:rgba(255,255,255,.55); --border:rgba(0,0,0,.08);
  background: radial-gradient(1200px 800px at 70% -20%, #e5e7eb 0%, var(--bg-0) 40%) no-repeat fixed, var(--bg-0);
}
.light .input{background:#fff}