/* Base styles and design tokens */
:root{
  --bg: #f9fafb;
  --panel: #ffffff;
  --text: #0b0f19;
  --muted: #6b7280;
  --line: #e5e7eb;
  --brand: #4338ca;
  --brand-2: #6366f1;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(2,6,23,0.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f19;
    --panel: #0f172a;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --line: #1f2937;
    --brand: #a5b4fc;
    --brand-2: #818cf8;
    --shadow: 0 10px 30px rgba(0,0,0,0.45);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font:16px/1.6 ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); background:var(--bg)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1120px,92vw); margin-inline:auto}

/* Header/Nav */
header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(8px);
  background: color-mix(in oklab, var(--panel) 80%, transparent); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:34px; height:34px; border-radius:8px; background:conic-gradient(from 180deg, var(--brand), var(--brand-2));
  box-shadow: inset 0 0 0 2px color-mix(in oklab, black 6%, transparent);}
.brand span{font-weight:700; letter-spacing:.2px}
nav ul{display:flex; gap:14px; list-style:none; margin:0; padding:0}
nav a{padding:8px 12px; border-radius:12px; color:var(--muted)}
nav a.active, nav a:hover{color:var(--text); background: color-mix(in oklab, var(--brand-2) 12%, transparent)}

/* Sections */
section{padding:64px 0; border-bottom:1px solid var(--line)}
.hero{padding:96px 0}
h1{font-size:clamp(28px, 3vw + 1rem, 48px); line-height:1.15; margin:0 0 12px}
h2{font-size:28px; margin:0 0 8px}
p.lead{font-size:18px; color:var(--muted); margin:0}

/* Layout/Components */
.grid{display:grid; gap:18px}
@media(min-width:780px){.grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.tag{display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:12px}
.row{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--panel)}
.btn.primary{border-color: color-mix(in oklab, var(--brand-2) 40%, var(--line)); box-shadow:var(--shadow)}
footer{padding:32px 0; color:var(--muted)}

/* CV */
.timeline{position:relative; margin:8px 0 0; padding-left:16px}
.timeline::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line);}
.ti{position:relative; margin:18px 0 0}
.ti::before{content:""; position:absolute; left:-7px; top:.5em; width:10px; height:10px; border-radius:50%; background:var(--brand-2)}
.ti h3{margin:0} .ti .where{color:var(--muted)}

/* Print CV only */
@media print{ header, #home, #portfolio, #contact, footer{display:none} #cv{border:0; padding:0} body{background:white} }