:root {
  --bg: #070b16;
  --bg-soft: #0d1324;
  --panel: rgba(14, 21, 40, 0.78);
  --panel-strong: rgba(14, 21, 40, 0.94);
  --text: #eef3ff;
  --muted: #b2bfdc;
  --line: rgba(167, 184, 223, 0.16);
  --accent: #6ea8ff;
  --accent-2: #7bf2d4;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  --radius: 24px;
  --radius-sm: 16px;
  --container: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(110,168,255,0.12), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(123,242,212,0.12), transparent 25%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 2rem), var(--container)); margin: 0 auto; }
.skip-link {
  position: absolute; left: -9999px; top: auto;
}
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 9999; background: #fff; color: #000; padding: .75rem 1rem; border-radius: .5rem;
}
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px);
  background: rgba(6, 9, 18, 0.72);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 1rem; }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.brand-mark {
  display:inline-grid; place-items:center; width:2.6rem; height:2.6rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#07101b; font-weight: 800;
}
.brand-text { font-weight: 700; letter-spacing: .01em; }
.site-nav { display:flex; align-items:center; gap:1rem; }
.site-nav a {
  text-decoration:none; color: var(--muted); padding:.6rem .8rem; border-radius: 999px;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-toggle {
  display:none; background:transparent; border:0; padding:.25rem; cursor:pointer;
}
.nav-toggle span { display:block; width:1.55rem; height:2px; background: var(--text); margin: 5px 0; }
.hero { position:relative; overflow:hidden; }
.hero-content {
  min-height: calc(100vh - 76px);
  display:grid; grid-template-columns: 1.4fr .9fr; gap:2rem; align-items:center; padding: 6rem 0 4rem;
}
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,.1));
}
.glow { position:absolute; border-radius:999px; filter:blur(80px); opacity:.4; }
.glow-a { width:22rem; height:22rem; background: var(--accent); top:12%; left:-4rem; }
.glow-b { width:18rem; height:18rem; background: var(--accent-2); right:-2rem; bottom:8%; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem; margin:0 0 1rem; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; font-weight:700;
}
.hero h1 { font-size: clamp(2.7rem, 7vw, 5.5rem); line-height: .95; margin: 0 0 1rem; }
.lead { font-size: clamp(1.05rem, 2vw, 1.35rem); max-width: 44rem; color: var(--muted); }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top: 2rem; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; min-height: 3.25rem;
  padding: .9rem 1.2rem; border-radius: 999px; text-decoration:none; font-weight:700;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--accent), #8dc0ff); color:#08111d; }
.btn-secondary { border:1px solid var(--line); background: rgba(255,255,255,.03); }
.hero-points {
  list-style:none; padding:0; margin: 2rem 0 0; display:flex; flex-wrap:wrap; gap:.75rem;
}
.hero-points li {
  padding:.55rem .9rem; border:1px solid var(--line); border-radius:999px; color: var(--muted); background: rgba(255,255,255,.02);
}
.hero-card, .card, .project-card, .skill-panel, .contact-box, .legal-card {
  border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow);
}
.hero-card {
  border-radius: var(--radius); padding: 1.5rem; justify-self:end; width:min(100%, 25rem);
}
.hero-badge {
  display:inline-flex; padding:.45rem .75rem; border-radius:999px; margin-bottom: 1rem;
  background: rgba(110,168,255,.12); color: #d5e4ff; border:1px solid rgba(110,168,255,.26);
}
.hero-card dl { margin:0; display:grid; gap:1rem; }
.hero-card dt { color: var(--muted); font-size:.95rem; }
.hero-card dd { margin:.2rem 0 0; font-weight:700; }
.section { padding: 5.5rem 0; }
.section-alt { background: rgba(255,255,255,.02); }
.section-heading { max-width: 52rem; margin-bottom: 2rem; }
.section-heading h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin: 0 0 1rem; }
.section-heading p { color: var(--muted); margin: 0; }
.align-left { margin-bottom: 1rem; }
.card-grid, .project-grid { display:grid; gap:1rem; }
.card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  border-radius: var(--radius-sm); padding: 1.4rem;
}
.card-icon { font-size:1.6rem; display:inline-block; margin-bottom:.8rem; }
.card h3 { margin:.15rem 0 .5rem; }
.card p { margin:0; color: var(--muted); }
.project-grid { grid-template-columns: 1.2fr 1fr 1fr; }
.project-card {
  border-radius: var(--radius); padding: 1.5rem;
}
.project-card-featured {
  background: linear-gradient(180deg, rgba(110,168,255,.16), rgba(14,21,40,.9));
}
.project-tag {
  display:inline-block; margin:0 0 .8rem; padding:.35rem .7rem; border-radius:999px; font-size:.8rem;
  color:#dbe7ff; background: rgba(255,255,255,.07);
}
.project-card h3 { margin:.2rem 0 .75rem; }
.project-card p, .project-card li { color: var(--muted); }
.project-card ul { margin: .9rem 0 0 1rem; padding:0; }
.profile-grid { display:grid; grid-template-columns: 1.25fr .85fr; gap: 2rem; align-items:start; }
.skill-panel { border-radius: var(--radius); padding: 1.25rem; }
.skill-row { display:flex; justify-content:space-between; gap:1rem; padding:.95rem 0; border-bottom: 1px solid var(--line); }
.skill-row:last-child { border-bottom:0; }
.skill-row span { color: var(--muted); }
.contact-box {
  border-radius: var(--radius); padding: 2rem; display:grid; grid-template-columns: 1.2fr .8fr; gap:1.5rem; align-items:center;
}
.contact-note { margin:.8rem 0 0; color: var(--muted); }
.site-footer { padding: 1.6rem 0 2.5rem; border-top:1px solid rgba(255,255,255,.06); }
.footer-grid { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-grid p { margin:.15rem 0 0; color: var(--muted); }
.footer-nav { display:flex; gap:1rem; flex-wrap:wrap; }
.footer-nav a { color: var(--muted); text-decoration:none; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--text); }
.legal-main { padding: 4rem 0; }
.legal-card { border-radius: var(--radius); padding: 2rem; max-width: 58rem; }
.legal-card h1 { margin-top:0; font-size: clamp(2rem, 4vw, 3rem); }
.legal-card h2 { margin-top:2rem; }
.legal-card p, .legal-card li { color: var(--muted); }
.code-like {
  display:inline-block; padding:.15rem .4rem; border-radius:.5rem; background: rgba(255,255,255,.05); color:#fff; font-family: ui-monospace, SFMono-Regular, monospace;
}
.placeholder { color:#ffda80; font-weight:700; }
@media (max-width: 980px) {
  .hero-content, .profile-grid, .contact-box, .project-grid, .card-grid { grid-template-columns: 1fr; }
  .hero-card { justify-self:stretch; }
}
@media (max-width: 760px) {
  .nav-toggle { display:block; }
  .site-nav {
    position:absolute; right:1rem; top: calc(100% + .75rem); width:min(20rem, calc(100vw - 2rem));
    flex-direction:column; align-items:stretch; padding:.75rem; border-radius: 18px; border:1px solid var(--line);
    background: var(--panel-strong); box-shadow: var(--shadow); display:none;
  }
  .site-nav.open { display:flex; }
  .site-nav a { padding:.85rem 1rem; }
  .hero-content { padding-top: 4.5rem; }
  .section { padding: 4.25rem 0; }
}