:root{--fg:#e9eef8;--bg:#0b0f17;--muted:#9ab;--card:#121826;--accent:#8b5cf6;--overlay-day:rgba(255,255,255,.0);--overlay-dawn:rgba(255,180,80,.18);--overlay-dusk:rgba(240,120,60,.22);--overlay-night:rgba(10,14,26,.45);--bg-image:none}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--fg);background:#0b0f17 url() no-repeat center/cover fixed;background-image:var(--bg-image);transition:background-color .6s ease,color .3s ease}
body.light{--fg:#101318;--bg:#f7f9fc;--card:#ffffff;--muted:#5a677a}
header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:20px clamp(16px,5vw,48px);position:sticky;top:0;z-index:5;backdrop-filter:saturate(120%) blur(6px);background:color-mix(in oklab,var(--bg) 88%,transparent);border-bottom:1px solid color-mix(in oklab,var(--fg) 10%,transparent)}
h1{margin:0;font-size:clamp(28px,4vw,40px);font-weight:800}.tag{margin:.25rem 0 0;color:var(--muted)}
.controls{display:flex;gap:.5rem;align-items:center}.city-label{opacity:.8;font-weight:700;letter-spacing:.3px}
.btn{border:1px solid color-mix(in oklab,var(--fg) 12%,transparent);background:linear-gradient(180deg,color-mix(in oklab,var(--card) 70%,transparent),var(--card));color:var(--fg);padding:8px 12px;border-radius:12px;cursor:pointer;font-weight:600}
.btn:hover{border-color:var(--accent)}
nav.contact{display:flex;gap:10px;flex-wrap:wrap;padding:8px clamp(16px,5vw,48px)}
nav.contact a{text-decoration:none;color:var(--fg);background:color-mix(in oklab,var(--card) 85%,transparent);padding:6px 10px;border-radius:10px}
main{padding:12px clamp(16px,5vw,48px) 72px;max-width:1200px;margin:0 auto}
section{margin:18px 0 12px;background:var(--card);border:1px solid color-mix(in oklab,var(--fg) 10%,transparent);border-radius:18px;padding:18px}
h2{margin:0 0 8px;font-size:clamp(22px,3vw,28px)}
.skill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.skill-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.skill-grid{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:color-mix(in oklab,var(--card) 90%,transparent);border:1px solid color-mix(in oklab,var(--fg) 10%,transparent);border-radius:14px;padding:14px;transition:transform .2s ease}
.card:hover{transform:translateY(-2px)}
.impact{padding-left:18px}
footer{text-align:center;color:var(--muted);padding:24px}
.credits{font-size:.85rem;opacity:.8}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.theme-day .hero-overlay{background:var(--overlay-day)}.theme-dawn .hero-overlay{background:var(--overlay-dawn)}.theme-dusk .hero-overlay{background:var(--overlay-dusk)}.theme-night .hero-overlay{background:var(--overlay-night)}
.hero-overlay{position:fixed;inset:0;pointer-events:none;z-index:0;transition:background .6s ease}
.stars{position:fixed;inset:0;z-index:0;display:none}.theme-night .stars{display:block}
header,nav,main,footer{position:relative;z-index:1}

/* Recruiter Mode (compact) */
.short-bullets{display:none;margin:0 0 6px 18px}
.recruiter .short-bullets{display:block}
.recruiter .long-copy{display:none}
.recruiter .projects .cards .card p{display:none}
.recruiter section{padding:14px}
.recruiter h2{margin-bottom:4px}