:root{
  --bg: #07080a;
  --bg-2: #0b0d10;
  --glass: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.12);
  --text: #e9eef7;
  --muted: #aab3c5;
  --brand: #7c5cff;
  --brand-2: #1de5e2;
  --ok: #3bd671;
  --danger:#ff5c8a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #120b2a 0%, transparent 40%),
             radial-gradient(1000px 800px at 120% 0%, #061a2b 0%, transparent 35%),
             var(--bg);
}

/* Animated blobs */
.bg{position:fixed; inset:0; overflow:hidden; z-index:-2;}
.blob{position:absolute; width:50vmax; height:50vmax; filter:blur(60px); opacity:.35; border-radius:50%;
  mix-blend-mode: screen; animation: float 18s ease-in-out infinite alternate;}
.b1{background: radial-gradient(circle at 30% 30%, #5b44ff, transparent 55%);
    left:-10vmax; top:-10vmax; animation-delay:0s;}
.b2{background: radial-gradient(circle at 70% 40%, #00e5ff, transparent 55%);
    right:-15vmax; top:-5vmax; animation-delay:3s;}
.b3{background: radial-gradient(circle at 50% 70%, #ff3d81, transparent 55%);
    left:10vmax; bottom:-15vmax; animation-delay:6s;}
@keyframes float{
  to{ transform: translate3d(0,-30px,0) scale(1.05); filter: blur(80px); opacity:.45;}
}

/* Grain noise */
.noise{
  position:absolute; inset:-200%;
  background-image:url('data:image/svg+xml;utf8,\
<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22>\
<filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.7%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter>\
<rect width=%22100%%22 height=%22100%%22 filter=%22url(%23n)%22 opacity=%220.045%22/></svg>');
  opacity:.35; animation: grain 1.2s steps(2) infinite;
  pointer-events:none; z-index:-1;
}
@keyframes grain{to{transform:translate3d(-10px,0,0)}}

/* Utilities */
.container{max-width:1200px; margin: 28px auto; padding: 0 20px;}
.glass{background:var(--glass); border:1px solid var(--stroke); border-radius:18px; box-shadow: var(--shadow); backdrop-filter: blur(10px); background-clip: padding-box;}
.card{padding:20px; overflow:hidden;}
h1,h2,h3,h4{margin:0 0 10px}
p{margin:0 0 10px; color:var(--muted)}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--stroke); background:#0f1116; color:var(--text); text-decoration:none; cursor:pointer}
.btn.primary{background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-color: transparent;}
.btn.ghost{background:transparent}
.btn.tiny{padding:7px 10px; font-size:.9rem;}
.btn.disabled{opacity:.55; cursor:not-allowed}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 6px; padding:0; list-style:none}
.chips li{padding:6px 10px; border:1px dashed var(--stroke); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.03)}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.badges{display:flex; gap:8px; margin-top:8px}
.badge{font-size:.85rem; padding:6px 8px; border-radius:8px; border:1px solid var(--stroke); background:rgba(255,255,255,.06)}

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:20px auto 12px; padding:12px 16px; max-width:1200px;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  background: linear-gradient(140deg, var(--brand), var(--brand-2)); color:#0b0d10; font-weight:800;
}
.name{font-size:1.25rem}
.tagline{font-size:.95rem; color:var(--muted)}

.navbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.nav-link{padding:8px 12px; border-radius:10px; border:1px solid var(--stroke); background:#0f1116; color:var(--text); cursor:pointer}
.nav-link.active, .nav-link:hover{background:#141823}
.theme-toggle{margin-left:8px; padding:8px 10px; border-radius:10px; border:1px solid var(--stroke); background:#0f1116; color:var(--text); cursor:pointer}

/* Pages */
.page{display:none; margin:12px 0;}
.page.active{display:block;}
/* NEW: vertical spacing between siblings to avoid cards sticking */
.page > * + * { margin-top: 20px; }
.grid + .card { margin-top: 20px; }

/* Grids */
.grid{display:grid; gap:20px}
.grid.two{grid-template-columns: 1.2fr .8fr}
.grid.three{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 980px){
  .grid.two{grid-template-columns: 1fr}
  .grid.three{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 640px){
  .grid.three{grid-template-columns: 1fr}
}

.hero img{width:100%; height:100%; object-fit:cover; border-radius:14px}

.stat-row .stat{display:flex; align-items:center; justify-content:center; gap:8px; padding:18px 12px; text-align:center}
.stat .big{font-size:1.8rem; font-weight:800; color:#fff}
.stat .cap{color:var(--muted)}

/* Timeline */
.timeline{display:grid; gap:12px}
.t-item{border:1px dashed var(--stroke); border-radius:14px; padding:12px}
.t-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.t-head h3{font-size:1rem}
.t-head span{font-size:.9rem; color:var(--muted)}

/* Skills */
.skills {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}
.skills div { line-height: 1.6; }
.skills h4 {
  margin-bottom: 8px;
  color: #fff;
  font-size: 1rem;
}
.skills p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
@media (max-width: 980px) { .skills { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .skills { grid-template-columns: 1fr; } }

/* Projects */
.seg-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.pill{padding:8px 12px; border-radius:999px; border:1px solid var(--stroke); background:#0f1116; color:var(--text); cursor:pointer}
.pill.active, .pill:hover{background:#141823}

.project-list .proj img { width:100%; height:220px; object-fit:contain; background:#0b0d10; border-radius:14px; }

.proj .p-body{margin-top:8px}
.p-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.p-tags span{padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--stroke); color:var(--muted)}
.p-cta{margin-top:8px}

/* Forms */
.form .row2{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (max-width:640px){ .form .row2{grid-template-columns: 1fr} }
.input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--stroke); background:#0f1116; color:var(--text); outline: none;
}
.input:focus{border-color: #2a2f3a; box-shadow: 0 0 0 4px rgba(124,92,255,.15)}

/* Links list */
.links{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.links a{display:inline-block; padding:6px 8px; border-bottom:1px dashed var(--stroke)}
.map{margin-top:10px}

/* Footer */
.site-footer{max-width:1200px; margin: 0 auto 28px; padding: 10px 16px; text-align:center}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .blob{animation: none}
  .noise{animation: none}
}

/* Light theme */
:root[data-theme="light"]{
  --bg: #f5f8ff;
  --bg-2:#eef2ff;
  --glass: rgba(255,255,255,0.7);
  --stroke: rgba(0,0,0,0.08);
  --text: #121625;
  --muted:#3a4155;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
:root[data-theme="light"] body{
  background: radial-gradient(1200px 800px at 10% -10%, #e9e4ff 0%, transparent 40%),
              radial-gradient(1000px 800px at 120% 0%, #e0faff 0%, transparent 35%),
              var(--bg);
}
:root[data-theme="light"] .btn{background:#fff}
:root[data-theme="light"] .nav-link,
:root[data-theme="light"] .theme-toggle{background:#fff}