:root{
  --bg:#f7f8fb;
  --surface:#ffffffcc;
  --text:#0d0f14;
  --muted:#5f6b7a;
  --primary:#2a67ff;
  --ring:#9db6ff;
  --card:#ffffffdd;
  --shadow:0 10px 30px rgba(17,23,41,.08);
  --radius:22px;
}
:root[data-theme="dark"]{
  --bg:#0b0f17;
  --surface:#0e1421cc;
  --text:#e9eefc;
  --muted:#a9b2c4;
  --primary:#6ca2ff;
  --ring:#3056ff;
  --card:#0f1626dd;
  --shadow:0 12px 36px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:var(--bg); overflow-x:hidden}
.bg-orbs{position:fixed; inset:0; z-index:-1; overflow:hidden; background: radial-gradient(1200px 800px at 10% -10%, #cde0ff 0%, transparent 60%), radial-gradient(900px 700px at 110% 10%, #ffd8e1 0%, transparent 60%), radial-gradient(700px 900px at 30% 120%, #d6ffe7 0%, transparent 60%)}
:root[data-theme="dark"] .bg-orbs{background: radial-gradient(1200px 800px at 10% -10%, #1a2646 0%, transparent 60%), radial-gradient(900px 700px at 110% 10%, #3a2030 0%, transparent 60%), radial-gradient(700px 900px at 30% 120%, #0f3b2b 0%, transparent 60%)}
.orb{position:absolute; filter:blur(40px); opacity:.6; mix-blend-mode:soft-light; border-radius:50%; animation:float 22s ease-in-out infinite}
.orb.o1{width:420px;height:420px; left:-60px; top:-80px; background:#cddcff}
.orb.o2{width:380px;height:380px; right:-80px; top:40px; background:#ffd3dc; animation-duration:28s}
.orb.o3{width:520px;height:520px; left:20%; bottom:-120px; background:#c9ffe6; animation-duration:26s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
header.nav{position:sticky; top:0; backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid rgba(20,23,35,.06); background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.6)); z-index:10}
:root[data-theme="dark"] header.nav{background:linear-gradient(180deg, rgba(20,26,43,.75), rgba(20,26,43,.6)); border-color:rgba(255,255,255,.06)}
.nav-inner{max-width:1100px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:18px}
.brand{font-family:'Exo 2',system-ui; font-weight:700; letter-spacing:.3px}
.nav-links{margin-left:auto; display:flex; gap:16px; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:500}
.nav-links a:hover{color:var(--text)}
.nav-controls{display:flex; gap:8px; margin-left:12px}
.icon-btn{background:#fff; color:var(--text); border:1px solid rgba(20,23,35,.08); border-radius:12px; padding:8px 10px; cursor:pointer; box-shadow:var(--shadow)}
:root[data-theme="dark"] .icon-btn{background:#121a2c; border-color:rgba(255,255,255,.08)}
.container{max-width:1100px; margin:0 auto; padding:48px 20px}
.hero{display:grid; grid-template-columns: 1.1fr 1fr; gap:36px; align-items:center; padding:64px 0}
.hero-card{background:var(--card); border:1px solid rgba(20,23,35,.06); border-radius: calc(var(--radius) + 4px); box-shadow:var(--shadow); padding:30px 26px; backdrop-filter:saturate(140%) blur(8px)}
.avatar-wrap{position:relative; width:190px; height:190px; border-radius:50%; margin:6px 0 18px}
.ring{position:absolute; inset:-8px; border-radius:inherit; background:conic-gradient(from 0deg, var(--ring), transparent 40%, var(--ring)); filter:blur(.5px); animation:ringSpin 12s linear infinite}
@keyframes ringSpin{to{transform:rotate(1turn)}}
.avatar{position:relative; width:100%; height:100%; border-radius:50%; object-fit:cover; border:6px solid #fff; box-shadow:0 12px 28px rgba(17,23,41,.10)}
h1{font-family:'Exo 2',system-ui; font-size:42px; line-height:1.1; margin:0 0 10px}
.subtitle{color:var(--muted); font-size:16px; margin-bottom:18px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{appearance:none; border:none; padding:12px 16px; border-radius:14px; font-weight:600; cursor:pointer; text-decoration:none; box-shadow:var(--shadow)}
.btn.primary{background:var(--primary); color:#fff}
.btn.ghost{background:#fff; color:var(--text); border:1px solid rgba(20,23,35,.08)}
:root[data-theme="dark"] .btn.ghost{background:#121a2c; border-color:rgba(255,255,255,.1)}
section{margin-top:36px}
.section-title{font-family:'Exo 2'; font-size:24px; margin:0 0 16px}
.card{background:var(--surface); border:1px solid rgba(20,23,35,.06); border-radius:var(--radius); padding:18px 18px; box-shadow:var(--shadow)}
.about{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px}
.about p{color:var(--muted)}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.chip{background:#fff; border:1px solid rgba(20,23,35,.08); border-radius:999px; padding:8px 12px; font-size:13px; font-weight:600}
:root[data-theme="dark"] .chip{background:#121a2c; border-color:rgba(255,255,255,.1)}
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.proj{padding:18px}
.proj h3{margin:6px 0 6px; font-size:16px}
.proj p{margin:0; color:var(--muted); font-size:14px}
.gallery-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:10px}
.gallery-grid img{width:100%; height:220px; object-fit:cover; border-radius:14px; border:1px solid rgba(20,23,35,.06); cursor:pointer; box-shadow:var(--shadow); transition: transform .2s ease}
.gallery-grid img:hover{transform:translateY(-3px)}
.lightbox{position:fixed; inset:0; background:rgba(8,12,20,.6); display:none; align-items:center; justify-content:center; z-index:50}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw; max-height:86vh; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.35); background:#fff}
.close{position:fixed; top:18px; right:18px; background:#fff; border-radius:50%; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(20,23,35,.08); font-weight:700; cursor:pointer}
footer{margin:48px 0 24px; text-align:center; color:var(--muted)}
@media (max-width: 980px){.hero{grid-template-columns:1fr}.about{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.gallery-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width: 640px){h1{font-size:34px}.gallery-grid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion: reduce){.orb, .ring{animation:none}}