:root{
  --bg: #0b1220;
  --bg-alt: #0e1628;
  --fg: #e6eaf2;
  --muted:#98a2b3;
  --primary:#0ea5e9;
  --card:#121a2e;
  --border:#1f2a44;
  --shadow: 0 10px 25px rgba(0,0,0,.25);
}

:root.light{
  --bg:#ffffff; --bg-alt:#f6f7fb; --fg:#16181d; --muted:#667085;
  --primary:#0ea5e9; --card:#ffffff; --border:#e6e8ee; --shadow: 0 8px 20px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color:var(--fg); background:radial-gradient(1200px 600px at 20% -10%, #0ea5e933, transparent 60%), var(--bg);
}

img{max-width:100%; height:auto; border-radius:16px}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px; margin:auto; padding:0 20px}
.section{padding:72px 0}
.section.alt{background:var(--bg-alt)}
h1,h2,h3{line-height:1.2; margin:0 0 12px}
h1{font-size:clamp(28px, 4vw, 44px)}
h2{font-size:clamp(22px, 3vw, 32px)}
h3{font-size:20px}
.lead{font-size:1.125rem; color:var(--muted); margin:12px 0 24px}

.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab, var(--bg), transparent 40%); border-bottom:1px solid var(--border)
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--fg)}
.brand-dot{width:12px; height:12px; border-radius:50%; background:var(--primary); box-shadow:0 0 18px var(--primary)}
.site-nav ul{display:flex; gap:12px; list-style:none; margin:0; padding:0; align-items:center}
.site-nav a, .site-nav .ghost{padding:8px 12px; border-radius:10px; border:1px solid transparent}
.site-nav a:hover{background:var(--card); border-color:var(--border); text-decoration:none}
.nav-toggle{display:none}

.hero{padding:88px 0 48px}
.grid2{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center}
.avatar img{box-shadow:var(--shadow)}
.meta{display:flex; gap:16px; flex-wrap:wrap; padding:0; margin:18px 0 0; list-style:none; color:var(--muted)}
.cta{display:flex; gap:12px}
.btn{display:inline-block; background:var(--primary); color:white; padding:10px 16px; border-radius:12px; border:1px solid transparent; box-shadow:var(--shadow)}
.btn:hover{opacity:.95; text-decoration:none}
.btn.ghost{background:transparent; color:var(--fg); border-color:var(--border)}
.btn.small{padding:8px 12px; font-size:.95rem}

.chips{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 24px}
.chip{background:var(--card); border:1px solid var(--border); padding:8px 10px; border-radius:999px}

.skills-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
progress{width:100%; height:10px; appearance:none}
progress::-webkit-progress-bar{background:#0f172a; border-radius:8px}
progress::-webkit-progress-value{background:var(--primary); border-radius:8px}

.timeline{display:grid; gap:18px}
.timeline article{display:grid; grid-template-columns:140px 1fr; gap:16px; align-items:start}
.time{color:var(--muted); font-weight:600}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.project .card-tag{display:inline-block; font-size:.8rem; color:var(--muted); margin-bottom:6px}

.form label{display:block; font-weight:600; margin:8px 0}
.form input,.form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:transparent; color:var(--fg)
}
.form input:focus,.form textarea:focus{outline:2px solid color-mix(in oklab, var(--primary), white 20%)}
.form-actions{display:flex; gap:12px; align-items:center}
.hp{position:absolute; left:-9999px; opacity:0}

.site-footer{border-top:1px solid var(--border); padding:24px 0; background:var(--bg-alt)}
.footer-inner{display:flex; align-items:center; justify-content:center}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:#fff; color:#000; padding:6px 10px; border-radius:8px}

@media (max-width: 920px){
  .grid2{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .site-nav ul{
    position:fixed; right:16px; top:72px; background:var(--card); border:1px solid var(--border);
    padding:12px; border-radius:14px; display:none; flex-direction:column; min-width:180px
  }
  .site-nav ul.open{display:flex}
  .nav-toggle{display:inline-block; background:transparent; border:1px solid var(--border); padding:8px 12px; border-radius:10px; color:var(--fg)}
}