:root{--bg:#0b0d10;--card:#12161b;--text:#e7edf3;--muted:#9fb0c3;--brand:#66c6ff;--accent:#8fffab;--ring:#2d6cdf;--shadow:0 10px 30px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.25)}
:root.light{--bg:#f7f9fc;--card:#ffffff;--text:#0e1116;--muted:#586271;--brand:#0057ff;--accent:#00b884;--ring:#2d6cdf}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin-inline:auto}
header.site{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--bg) 85%, transparent);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid color-mix(in srgb,var(--muted) 22%, transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.nav .brand{font-weight:800;letter-spacing:.5px}
.nav .actions{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--muted) 30%, transparent);background:linear-gradient(180deg, color-mix(in srgb,var(--card) 92%, transparent), var(--card));color:var(--text);box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 35px rgba(0,0,0,.38)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.active{outline:2px solid color-mix(in srgb,var(--brand) 50%, transparent)}
.grid{display:grid;gap:22px}
.hero{padding:70px 0 30px;display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--muted) 30%, transparent);font-size:.85rem;color:var(--muted)}
.headline{font-size:clamp(34px, 6vw, 56px);line-height:1.05;margin:.35em 0;font-weight:800}
.lead{color:var(--muted);font-size:1.1rem}
.hero-card{background:radial-gradient(1200px 600px at 100% 0%, color-mix(in srgb,var(--brand) 12%, transparent), transparent), var(--card);padding:28px;border-radius:22px;border:1px solid color-mix(in srgb,var(--muted) 22%, transparent);box-shadow:var(--shadow)}
.avatar{border-radius:18px;border:1px solid color-mix(in srgb,var(--muted) 22%, transparent)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.kpi{background:var(--card);border:1px solid color-mix(in srgb,var(--muted) 22%, transparent);border-radius:16px;padding:16px;text-align:center}
.kpi .num{font:800 26px Inter}
section{padding:38px 0}
.section-title{font-weight:800;font-size:1.6rem;margin:0 0 14px}
.card{background:var(--card);border:1px solid color-mix(in srgb,var(--muted) 22%, transparent);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.projects{display:grid;grid-template-columns:repeat(auto-fit, minmax(380px,1fr));gap:18px}
.tag{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--brand) 16%, transparent);border:1px solid color-mix(in srgb,var(--brand) 35%, transparent);color:var(--text);padding:6px 10px;border-radius:999px;font-size:.8rem}
.proj-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.proj-title{font-weight:700;margin:0}
.proj-desc{color:var(--muted);font-size:.95rem}
.pill-actions{display:flex;gap:10px;flex-wrap:wrap}
.skills{display:flex;flex-wrap:wrap;gap:2px}
.resume{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.timeline{border-left:2px dashed color-mix(in srgb,var(--muted) 40%, transparent);padding-left:14px}
.time-item{margin:0 0 16px}
.footer{padding:26px 0;color:var(--muted);border-top:1px solid color-mix(in srgb,var(--muted) 22%, transparent)}
@media (max-width:900px){ .hero{grid-template-columns:1fr} .resume{grid-template-columns:1fr} }
.u{background:linear-gradient(transparent 60%, color-mix(in srgb,var(--brand) 35%, transparent) 0);padding:0 2px;border-radius:6px}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:10px}
input, textarea {width:100%;margin-top:6px;padding:12px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--muted) 26%, transparent);background:var(--card);color:var(--text)}
label{font-weight:600}
.years {
  position: relative;
  display: block;
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--muted) 26%);
  border: 1px solid color-mix(in srgb, var(--muted) 26%);
  color: var(--text);
}
.years::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--pct, 0%);
  z-index: 0;
  border-radius: 12px;
  background: var(--bar, var(--brand));
  opacity: 1;
}
.years .yval, .yrs-label { position: relative; font-weight: 800; color: var(--text); z-index: 1;}
.years[data-skill="java"]{ --bar:#ff7b7b; }
.years[data-skill="python"]{ --bar:#6bd194; }
.years[data-skill="javascript"]{ --bar:#ffd569; }
.years[data-skill="maven"]{ --bar:#df2929; }
.years[data-skill="rest"]{ --bar:#8ca9ff; }
.years[data-skill="html"]{ --bar:#c0a003; }
.years[data-skill="sql"]{ --bar:#ff8a65; }
.years[data-skill="typescript"]{ --bar:#08c4a1; }
.years[data-skill="react"]{ --bar:#97046d; }
.years[data-skill="swift"]{ --bar:#039735; }
.years[data-skill="html"]{ --bar:#04a7b0; }
.years[data-skill="css"]{ --bar:#6ea8ff; }
.years[data-skill="git"]{ --bar:#f28b82; }
.years[data-skill="unity"]{ --bar:#b39ddb; }
.years[data-skill="csharp"]{ --bar:#9ccc65; }
.years[data-skill="threejs"]{ --bar:#80deea; }
.years[data-skill="figma"]{ --bar:#f48fb1; }
.years[data-skill="vfx"]{ --bar:#58447c; }