:root{
  --bg:#0b1020;
  --panel:#0f172a;
  --muted:#9aa3b2;
  --text:#e6edf6;
  --brand:#0ea5e9;
  --brand-2:#22d3ee;
  --accent:#a78bfa;
  --ring: rgba(34,211,238,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, rgba(34,211,238,.08), transparent 60%),
             radial-gradient(1200px 600px at 90% -20%, rgba(167,139,250,.08), transparent 60%),
             var(--bg);
  line-height:1.6;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(to bottom, rgba(10,15,35,.8), rgba(10,15,35,.5));
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:700}
.brand-logo{width:32px;height:32px;border-radius:8px}
nav a{margin:0 10px;text-decoration:none;color:var(--muted)}
nav a:hover{color:#fff}
.theme-toggle{margin-left:8px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#fff;border-radius:8px;padding:8px 10px;cursor:pointer}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;min-height:72vh;padding:80px 20px}
.eyebrow{color:var(--brand);font-weight:600;letter-spacing:.4px;margin-bottom:8px}
h1{font-size:clamp(32px,5vw,52px);line-height:1.1;margin:.1em 0 .35em}
.lead{font-size:18px;color:#d6deea;max-width:60ch}
.cta{display:flex;gap:12px;margin:24px 0 10px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:12px 18px;text-decoration:none;border:1px solid rgba(255,255,255,.1);transition:.2s;cursor:pointer}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#081220;border-color:transparent;font-weight:700;box-shadow:0 6px 30px rgba(34,211,238,.18)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:#fff}
.btn.small{padding:8px 12px;border-radius:10px}
.grad{background:linear-gradient(135deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.stack{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:16px;color:var(--muted)}
.hero-art{position:relative;min-height:360px}
.blob{position:absolute;filter:blur(40px);opacity:.6;border-radius:50%}
.blob.b1{background:radial-gradient(circle at 30% 30%, var(--brand), transparent);
  width:300px;height:300px;top:30px;left:-40px}
.blob.b2{background:radial-gradient(circle at 60% 60%, var(--accent), transparent);
  width:260px;height:260px;top:180px;right:-30px}
.blob.b3{background:radial-gradient(circle at 50% 50%, var(--brand-2), transparent);
  width:220px;height:220px;bottom:0;left:140px}
.device{position:absolute;inset:40px 10px 0 10px;display:flex;align-items:center;justify-content:center}
.screen{width:320px;height:600px;border-radius:36px;padding:12px;background:linear-gradient(180deg,#0c1428,#121a30);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 0 0 6px rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.5)}
.status-bar{height:24px;border-radius:16px;background:rgba(255,255,255,.06);margin:6px}
.app{padding:16px;display:grid;gap:14px}
.chip{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;width:max-content;color:#0b1020;font-weight:700}
.chip.blue{background:#38bdf8}
.chip.green{background:#34d399}
.chip.purple{background:#c084fc}
.card-demo{border-radius:16px;padding:16px;background:linear-gradient(180deg,#0b1226,#0d1730);border:1px solid rgba(255,255,255,.08)}
.card-demo .title{font-weight:700}
.card-demo .subtitle{color:var(--muted);font-size:14px}
.progress{height:8px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}

.section{padding:70px 20px}
.section h2{font-size:28px;margin:0 0 16px}
.muted{color:var(--muted)}
.small{font-size:12px}
.highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:12px}
.hi{background:linear-gradient(180deg,#0c152b,#0f1a34);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.skill-group{background:#0e1731;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px}
.skill-group h4{margin:0 0 10px;font-size:16px}
.skill-group ul{margin:0;padding-left:18px;color:#cbd5e1;line-height:1.8}

.grid.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:linear-gradient(180deg,#0c152b,#0f1a34);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:18px;display:grid;gap:6px}
.card .badge{font-size:12px;color:#081220;background:#38bdf8;width:max-content;padding:6px 10px;border-radius:999px;font-weight:700}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.tags span{background:rgba(255,255,255,.06);padding:6px 10px;border-radius:999px;color:#d1d8e6;font-size:12px}
.cta-section .cta-card{background:linear-gradient(90deg, rgba(14,165,233,.25), rgba(167,139,250,.25));border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px;text-align:center}
.cta-section h2{margin-bottom:8px}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:14px}
.contact-card{background:#0e1731;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px}
.contact-form{display:grid;gap:12px;margin-top:10px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input, textarea{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0b1226;color:#fff;outline:none}
input:focus, textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
label{display:grid;gap:6px;color:#cbd5e1}

.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:28px 0;color:#b8c2d5}
.site-footer .container{display:flex;align-items:center;justify-content:center;text-align:center}

@media (max-width: 920px){
  .hero{grid-template-columns:1fr;gap:20px;padding-top:40px}
  .hero-art{order:-1;min-height:320px}
  .form-row{grid-template-columns:1fr}
}
/* Light theme */
:root.light{
  --bg:#f7fafc;--panel:#ffffff;--text:#0b1020;--muted:#667085;
  --ring:rgba(14,165,233,.25);
}
:root.light body{
  background: radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.15), transparent 60%),
             radial-gradient(1200px 600px at 90% -20%, rgba(167,139,250,.15), transparent 60%),
             #f7fafc;
}
:root.light .card, :root.light .hi, :root.light .skill-group, :root.light .contact-card{
  background: #ffffff;
  border-color: rgba(10,20,40,.08);
}
:root.light .screen{background:linear-gradient(180deg,#f1f5ff,#e8edfb)}
:root.light .status-bar{background:rgba(0,0,0,.06)}
:root.light nav a{color:#475569}
:root.light .btn.ghost{border-color:rgba(0,0,0,.12)}