:root {
      --bg: #0b0e14; --bg-soft: #0f1422; --card: #0f172a; --text: #e6e8ee; --muted: #9aa4b2;
      --brand-a: #0ea5e9; --brand-b: #8b5cf6; --brand-c: #14b8a6; --ring: rgba(79,70,229,.55);
      --shadow: 0 10px 30px rgba(2,8,23,.55); --radius: 22px;
    }
    @media (prefers-color-scheme: light) {
      :root { --bg:#f7f8fb; --bg-soft:#f1f5fb; --card:#fff; --text:#0b1020; --muted:#516071; --shadow:0 12px 24px rgba(10,12,16,.06); }
    }
    *{box-sizing:border-box} html,body{height:100%}
    body{
      margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 10% -20%, rgba(14,165,233,.15), transparent 60%),
        radial-gradient(900px 600px at 110% 10%, rgba(139,92,246,.12), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg-soft));
      line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }
    .container{width:min(1200px,92vw); margin:0 auto}
    .grid{display:grid; gap:20px}
    .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    @media (max-width:980px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:720px){.grid.cols-3{grid-template-columns:1fr}}
    .pill{padding:6px 12px; border-radius:999px; background:rgba(148,163,184,.12); color:var(--text); border:1px solid rgba(148,163,184,.18)}
    .tag{padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted); background:rgba(148,163,184,.1); border:1px solid rgba(148,163,184,.18)}
    header{position:sticky; top:0; z-index:50; backdrop-filter:blur(8px); background:linear-gradient(180deg, rgba(15,16,26,.6), rgba(15,16,26,.15)); border-bottom:1px solid rgba(148,163,184,.12)}
    nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
    .brand{display:flex; gap:12px; align-items:center; font-weight:700; letter-spacing:.2px}
    .logo{width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
      background:conic-gradient(from 210deg at 50% 50%, var(--brand-a), var(--brand-b), var(--brand-c), var(--brand-a));
      color:white; font-weight:900; box-shadow:0 6px 18px rgba(14,165,233,.25), inset 0 0 24px rgba(255,255,255,.22);
    }
    .nav-links{display:flex; gap:18px; align-items:center}
    .nav-links a{color:var(--muted); text-decoration:none; font-weight:600; font-size:14px}
    .nav-links a:hover{color:var(--text)}
    .btn{display:inline-flex; gap:10px; align-items:center; justify-content:center; padding:10px 16px; border-radius:14px; border:1px solid rgba(148,163,184,.2); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:var(--text); text-decoration:none; font-weight:700; box-shadow:var(--shadow)}
    .btn:hover{transform:translateY(-1px)}
    .hero{padding:64px 0 24px; position:relative; overflow:clip}
    .headline{font-size:clamp(36px,4.8vw,58px); line-height:1.05; margin:0 0 12px;
      background:linear-gradient(92deg, var(--brand-a), var(--brand-b) 55%, var(--brand-c));
      -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900; letter-spacing:.4px;
    }
    .subhead{color:var(--muted); font-size:clamp(16px,2.4vw,18px); margin:0 0 20px}
    .badge-row{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 22px}
    .cta-row{display:flex; gap:12px; flex-wrap:wrap}
    .cta-primary{background:linear-gradient(92deg, var(--brand-a), var(--brand-b) 55%, var(--brand-c)); border:none; color:white; box-shadow:0 8px 24px rgba(14,165,233,.35)}
    section{padding:36px 0}
    .section-title{font-size:22px; letter-spacing:.6px; margin:0 0 12px}
    .section-sub{color:var(--muted); margin:0 0 22px}
    .filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
    .filters button{cursor:pointer}
    .filters .active{outline:2px solid var(--ring); box-shadow:0 0 0 6px rgba(79,70,229,.16) inset}
    .card{display:flex; flex-direction:column; gap:14px; padding:18px; border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(148,163,184,.16); box-shadow:var(--shadow); transition:transform .2s ease; position:relative; overflow:hidden}
    .card:hover{transform:translateY(-2px)}
    .card .title{margin:0; font-weight:800; letter-spacing:.2px}
    .card .desc{margin:0; color:var(--muted)}
    .links{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
    .link{font-weight:700; text-decoration:none; color:var(--text); border-bottom:1px dashed rgba(148,163,184,.4)}
    .link:hover{color:var(--brand-a); border-bottom-color:var(--brand-a)}
    .skills{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
    @media (max-width:980px){.skills{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:640px){.skills{grid-template-columns:1fr}}
    .skill{padding:16px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(148,163,184,.16)}
    .skill h4{margin:0 0 8px}
    .skill .stack{display:flex; gap:8px; flex-wrap:wrap}
    .timeline{position:relative; margin-top:8px}
    .timeline::before{content:""; position:absolute; left:14px; top:0; bottom:0; width:2px; background:linear-gradient(var(--brand-a), var(--brand-b)); opacity:.4}
    .tl-item{position:relative; margin-left:44px; padding:10px 0 16px}
    .tl-item::before{content:""; position:absolute; left:-32px; top:12px; width:12px; height:12px; border-radius:50%; background:linear-gradient(var(--brand-a), var(--brand-b)); box-shadow:0 0 0 4px rgba(79,70,229,.25)}
    .tl-title{margin:0; font-weight:800}
    .tl-meta{margin:2px 0 6px; color:var(--muted); font-size:14px}
    .contact{display:grid; grid-template-columns:1.2fr 1fr; gap:20px}
    @media (max-width:980px){.contact{grid-template-columns:1fr}}
    .contact .card form{display:grid; gap:12px}
    input,textarea{width:100%; padding:12px 14px; color:var(--text); background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.2); border-radius:12px}
    textarea{min-height:120px; resize:vertical}
    footer{padding:24px 0 40px; color:var(--muted); border-top:1px solid rgba(148,163,184,.12); margin-top:30px}
    @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}