:root{
  --bg:#070b1a;--bg2:#0b1024;--surface:rgba(255,255,255,.04);--surface2:rgba(255,255,255,.06);
  --text:#eaf0ff;--muted:#a8b3d1;--border:rgba(255,255,255,.10);
  --accent:#6d7dff;--accent2:#22c55e;--shadow:0 24px 80px rgba(0,0,0,.45);
  --ring:0 0 0 4px rgba(109,125,255,.18);
}
:root[data-theme="light"]{
  --bg:#f6f8ff;--bg2:#eef2ff;--surface:rgba(15,23,42,.04);--surface2:rgba(15,23,42,.06);
  --text:#0b1224;--muted:#475569;--border:rgba(15,23,42,.14);
  --accent:#3347ff;--accent2:#16a34a;--shadow:0 18px 64px rgba(2,6,23,.12);
  --ring:0 0 0 4px rgba(51,71,255,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 70% 0%, rgba(109,125,255,.22) 0%, transparent 55%),
    radial-gradient(700px 420px at 15% 12%, rgba(34,197,94,.16) 0%, transparent 55%),
    linear-gradient(180deg,var(--bg2),var(--bg));
  line-height:1.55;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(900px 520px at 70% 0%, rgba(51,71,255,.16) 0%, transparent 55%),
    radial-gradient(700px 420px at 15% 12%, rgba(22,163,74,.10) 0%, transparent 55%),
    linear-gradient(180deg,var(--bg2),var(--bg));
}

a{color:inherit}
.container{width:min(1120px,92%);margin-inline:auto}

/* a11y */
.skip{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:1rem;top:1rem;width:auto;height:auto;z-index:50;background:var(--bg);border:1px solid var(--border);padding:.6rem .8rem;border-radius:.75rem;box-shadow:var(--shadow)}

/* topbar */
.topbar{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--bg) 75%, transparent);
  border-bottom:1px solid var(--border);
}
.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{font-weight:800;letter-spacing:.2px;text-decoration:none}
.menu{display:flex;gap:.25rem;align-items:center}
.menu a{
  text-decoration:none;color:var(--muted);
  padding:.55rem .75rem;border-radius:.8rem;
}
.menu a:hover{color:var(--text);background:var(--surface)}
.menu a[aria-current="page"]{color:var(--text);background:var(--surface2);border:1px solid var(--border)}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:.9rem;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
}
.icon-btn:hover{background:var(--surface2)}
.icon{width:18px;height:18px;opacity:.92}

/* hero */
.hero{padding:5.25rem 0 3rem;display:grid;grid-template-columns:1.12fr .88fr;gap:2.25rem;align-items:center}
.badge{
  display:inline-flex;align-items:center;gap:.55rem;
  color:var(--accent2);
  border:1px solid color-mix(in srgb,var(--accent2) 35%, transparent);
  background:color-mix(in srgb,var(--accent2) 10%, transparent);
  padding:.4rem .85rem;border-radius:999px;font-weight:600;font-size:.92rem
}
.dot{width:8px;height:8px;border-radius:999px;background:var(--accent2)}

h1{font-size:clamp(2.15rem,4.6vw,3.9rem);line-height:1.06;margin:.9rem 0 .7rem}
.lead{color:var(--muted);max-width:62ch;font-size:1.06rem}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.35rem}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.78rem 1.05rem;border-radius:.95rem;
  text-decoration:none;font-weight:650;
  border:1px solid var(--border);
  background:var(--surface);
}
.btn:hover{background:var(--surface2)}
.btn.primary{border:none;color:#fff;background:linear-gradient(135deg,var(--accent),#5564ff)}
.btn.primary:focus{outline:none;box-shadow:var(--ring)}
.btn:focus{outline:none;box-shadow:var(--ring)}

.portrait-wrap{
  width:min(430px,100%);
  border-radius:1.4rem;
  padding:.75rem;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  box-shadow:var(--shadow);
}
.portrait{width:100%;height:auto;border-radius:1.05rem;display:block}

/* sections */
.section{padding:3.5rem 0}
.section h2{margin:0 0 .7rem;font-size:clamp(1.55rem,2.6vw,2.25rem)}
.section p{color:var(--muted);max-width:80ch}

/* cards */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.card{
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  border-radius:1.1rem;
  padding:1.1rem;
  box-shadow:0 8px 30px rgba(0,0,0,.20);
}
.card h3{margin:0 0 .35rem;font-size:1.05rem}
.card p{margin:0 0 .9rem;color:var(--muted)}
.card a{color:var(--accent);text-decoration:none;font-weight:650}
.card a:hover{text-decoration:underline}
.tags{display:flex;gap:.4rem;flex-wrap:wrap;margin:.75rem 0 0}
.tag{font-size:.78rem;color:var(--muted);border:1px solid var(--border);background:var(--surface);padding:.2rem .5rem;border-radius:999px}

/* portfolio page */
.page-hero{padding:2.75rem 0 1.25rem}
.page-hero h1{margin:0 0 .4rem;font-size:clamp(1.9rem,3.2vw,2.6rem)}
.page-hero p{margin:0;color:var(--muted)}

/* contact */
.contact-card{margin-top:1.25rem;max-width:720px}
.kv{display:grid;grid-template-columns:180px 1fr;gap:.6rem 1rem;align-items:center}
.kv div{color:var(--muted)}
.kv a{color:var(--text);text-decoration:none}
.kv a:hover{text-decoration:underline}

.footer{border-top:1px solid var(--border);padding:2rem 0 2.5rem;color:var(--muted)}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}