:root {
  --bg: #070a12;
  --bg-2: #0b1020;
  --panel: #101625;
  --panel-2: #121a2a;
  --text: #f3f6fb;
  --muted: #9ca8bb;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --accent: #8be9fd;
  --accent-2: #7cf6c5;
  --warm: #d7ff7b;
  --max: 1180px;
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(70,109,255,.10), transparent 26%),
    radial-gradient(circle at 85% 12%, rgba(124,246,197,.08), transparent 22%),
    var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section-pad { padding: 112px 0; }
.section-alt { border-block: 1px solid var(--line); background: rgba(255,255,255,.018); }

.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .025; z-index: 99;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(7,10,18,.72);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 11px;
  font: 800 12px/1 "Manrope", sans-serif; letter-spacing: .06em;
  background: linear-gradient(135deg, rgba(139,233,253,.13), rgba(124,246,197,.04));
}
.brand-name { font-family: "Manrope", sans-serif; font-size: 14px; letter-spacing: -.01em; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; color: #cbd3df; }
.site-nav a { transition: color .2s ease, opacity .2s ease; }
.site-nav a:hover { color: white; }
.nav-cta { border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; }
.menu-button { display: none; background: transparent; border: 0; width: 42px; height: 42px; position: relative; }
.menu-button span { position: absolute; left: 10px; right: 10px; height: 1px; background: white; transition: .2s ease; }
.menu-button span:first-child { top: 16px; }.menu-button span:last-child { top: 24px; }

.hero { padding-top: 92px; min-height: calc(100vh - 76px); display: grid; align-items: center; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center; }
.eyebrow, .section-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--accent-2);
}
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 5px rgba(124,246,197,.08); }
h1,h2,h3 { font-family: "Manrope", sans-serif; margin: 0; line-height: 1.06; letter-spacing: -.04em; }
h1 { font-size: clamp(48px, 6.1vw, 86px); max-width: 860px; }
h1 span { color: var(--accent); }
.hero-lede { max-width: 760px; margin: 28px 0 0; font-size: 20px; color: #b8c1d0; line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 19px; border-radius: 999px; font-size: 14px; font-weight: 700;
  border: 1px solid var(--line-strong); transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.32); }
.button.primary { background: var(--text); color: #070a12; border-color: var(--text); }
.button.secondary { background: rgba(255,255,255,.03); }
.hero-links { display: flex; gap: 22px; margin-top: 30px; color: var(--muted); font-size: 14px; }
.hero-links a:hover, .text-link:hover { color: var(--accent); }

.hero-visual { position: relative; }
.orbit-card {
  min-height: 560px; border: 1px solid var(--line); border-radius: 32px;
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  position: relative; overflow: hidden; padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.orbit-card::before { content:""; position:absolute; width:320px; height:320px; border-radius:50%; background: rgba(139,233,253,.06); filter: blur(45px); top: 58px; left: 50%; transform: translateX(-50%); }
.orbit-label { font: 700 10px/1 "Manrope", sans-serif; letter-spacing: .18em; color: var(--muted); }
.orbital-stage { height: 380px; position: relative; display: grid; place-items: center; }
.core {
  position: absolute; width: 94px; height: 94px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, #e9f7ff, #8be9fd); color: #081019; font: 800 24px/1 "Manrope", sans-serif;
  box-shadow: 0 0 60px rgba(139,233,253,.22);
}
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.orbit-a { width: 205px; height: 205px; animation: spin 16s linear infinite; }
.orbit-b { width: 300px; height: 300px; border-style: dashed; animation: spin-rev 24s linear infinite; }
.orbit-c { width: 365px; height: 365px; opacity: .55; }
.node { position: absolute; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: #0f1625; font: 700 9px/1 "Manrope",sans-serif; letter-spacing: .12em; color: #dce3ed; }
.n1 { top: 85px; left: 45px; }.n2 { top: 68px; right: 36px; }.n3 { bottom: 58px; left: 55px; }.n4 { bottom: 78px; right: 26px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.metric-grid div { border-top: 1px solid var(--line); padding-top: 15px; min-width: 0; }
.metric-grid strong { display: block; font-family:"Manrope"; font-size: 20px; }
.metric-grid span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin-rev { to { transform: rotate(-360deg); } }

.impact-strip { border-block: 1px solid var(--line); background: rgba(255,255,255,.02); }
.impact-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.impact-grid div { padding: 27px 24px; border-right: 1px solid var(--line); }
.impact-grid div:first-child { padding-left: 0; }.impact-grid div:last-child { border-right: 0; }
.impact-grid span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:5px; }
.impact-grid strong { font-size:13px; font-weight:600; }

.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; margin-bottom: 56px; }
.section-heading h2, .about-title h2 { font-size: clamp(38px, 4.5vw, 64px); max-width: 760px; }
.section-heading > p { color: var(--muted); font-size: 16px; margin: 0 0 4px; max-width: 500px; }
.section-kicker { margin: 0 0 14px; }

.project-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; background: linear-gradient(145deg, rgba(139,233,253,.045), rgba(255,255,255,.018)); }
.project-index, .card-top, .system-title { color: var(--muted); font: 700 10px/1 "Manrope",sans-serif; letter-spacing: .14em; }
.project-copy h3, .project-card h3 { font-size: clamp(28px, 3vw, 42px); margin: 12px 0 16px; }
.project-copy > p, .project-card > p { color: #b8c1d0; font-size: 16px; }
.project-points { padding-left: 18px; color: #d5dce7; }
.project-points li { margin: 9px 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tags span { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: #c9d2df; padding: 6px 9px; border-radius: 999px; font-size: 11px; }
.system-board { min-height: 390px; border: 1px solid var(--line); border-radius: 18px; background: #090e18; padding: 22px; position: relative; overflow: hidden; display:flex; flex-direction:column; justify-content:center; }
.system-board::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:28px 28px; }
.system-title { position:absolute; top:20px; left:22px; }
.system-row { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto 1.2fr auto 1fr; gap:10px; align-items:center; }
.sys-block { border:1px solid var(--line-strong); border-radius:14px; padding:20px 12px; text-align:center; background:#0d1422; font:700 13px/1.35 "Manrope"; }
.sys-block small { color:var(--muted); font-weight:500; }.sys-block.accent { border-color:rgba(139,233,253,.45); box-shadow:0 0 40px rgba(139,233,253,.06); }
.sys-arrow { color:var(--accent); }.signal-line { position:absolute; left:8%; right:8%; bottom:64px; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.mini-readouts { position:absolute; bottom:20px; left:22px; right:22px; display:flex; justify-content:space-between; color:var(--accent-2); font:700 9px/1 "Manrope"; letter-spacing:.12em; }

.project-grid { margin-top: 26px; display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.project-card { min-height: 470px; border:1px solid var(--line); border-radius:var(--radius); padding:30px; background:rgba(255,255,255,.018); display:flex; flex-direction:column; overflow:hidden; }
.project-card:hover, .resume-card:hover, .skill-card:hover { border-color: rgba(139,233,253,.28); }
.card-top { display:flex; justify-content:space-between; }.arrow { color:var(--accent); font-size:18px; }
.muted-card { background: rgba(255,255,255,.012); }
.text-link { margin-top:auto; color:#dce5f1; font-weight:700; font-size:14px; }

.pcb-art, .terminal-art, .api-art { margin-top:auto; min-height:155px; border:1px solid var(--line); border-radius:16px; background:#090e18; position:relative; overflow:hidden; }
.pcb-art { background-image: radial-gradient(circle at 20% 20%, rgba(124,246,197,.07), transparent 30%), linear-gradient(rgba(124,246,197,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(124,246,197,.028) 1px,transparent 1px); background-size:auto,20px 20px,20px 20px; }
.chip { position:absolute; border:1px solid rgba(124,246,197,.28); color:#bdfae2; background:#0d1718; border-radius:8px; padding:9px; font:700 9px/1 "Manrope"; letter-spacing:.08em; }
.chip-main { left:50%; top:50%; transform:translate(-50%,-50%); padding:17px; }.chip-a{left:10%;bottom:15%;}.chip-b{right:8%;top:15%;}
.trace { position:absolute; height:1px; background:rgba(124,246,197,.34); transform-origin:left; }.t1{width:130px;left:24%;top:50%;}.t2{width:110px;left:55%;top:51%;transform:rotate(-30deg)}.t3{width:90px;left:48%;top:70%;transform:rotate(140deg)}
.terminal-art { padding:16px 18px; }.terminal-art > div { display:flex; gap:5px; margin-bottom:16px; }.terminal-art i{width:7px;height:7px;border-radius:50%;background:#354156;display:block}.terminal-art code{font:500 12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#aab5c6}.terminal-art b{color:var(--accent-2);font-weight:500}
.api-art { display:grid; grid-template-columns:auto 1fr auto; gap:12px; padding:18px; align-content:center; font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.api-art span{color:var(--accent)}.api-art code{color:#c4cedd}.api-art b{color:var(--accent-2);font-weight:500}

.timeline { border-top:1px solid var(--line); }
.timeline-item { display:grid; grid-template-columns:.34fr 1fr; gap:56px; padding:42px 0; border-bottom:1px solid var(--line); }
.time-meta { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:11px; letter-spacing:.08em; }
.role-org { color:var(--accent-2); font-weight:700; margin:0 0 7px; }
.time-content h3 { font-size:30px; letter-spacing:-.03em; }
.time-content > p:not(.role-org) { color:#b8c1d0; max-width:800px; }

.skill-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.skill-card { border:1px solid var(--line); border-radius:18px; padding:24px; min-height:220px; background:rgba(255,255,255,.015); transition:border-color .2s ease; }
.skill-num { color:var(--muted); font:700 10px/1 "Manrope"; letter-spacing:.1em; }
.skill-card h3 { font-size:22px; margin:48px 0 12px; }
.skill-card p { color:var(--muted); font-size:14px; margin:0; }

.about-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }
.big-copy { font:600 clamp(25px,3vw,38px)/1.35 "Manrope",sans-serif; color:#e8edf5; letter-spacing:-.025em; margin-top:0; }
.about-copy > p:not(.big-copy) { color:var(--muted); font-size:16px; }
.education-list { margin-top:36px; border-top:1px solid var(--line); }
.education-list div { padding:18px 0; border-bottom:1px solid var(--line); display:grid; gap:3px; }
.education-list strong { font-size:14px; }.education-list span{color:var(--muted);font-size:13px}

.resume-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.resume-card { border:1px solid var(--line); border-radius:18px; padding:26px; background:rgba(255,255,255,.015); min-height:230px; display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease; }
.resume-card:hover { transform:translateY(-3px); }
.resume-card > span { color:var(--muted); font:700 10px/1 "Manrope"; }.resume-card h3{font-size:26px;margin:30px 0 10px}.resume-card p{color:var(--muted);margin:0}.resume-card b{margin-top:auto;font-size:13px;color:var(--accent)}

.contact-box { border:1px solid var(--line); border-radius:28px; padding:46px; background:linear-gradient(120deg,rgba(139,233,253,.07),rgba(124,246,197,.025)); display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; }
.contact-box h2 { font-size:clamp(40px,5vw,70px); }.contact-box p:not(.section-kicker){color:var(--muted);max-width:700px}.contact-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
footer { border-top:1px solid var(--line); padding:25px 0; color:var(--muted); font-size:12px; }
.footer-row { display:flex; justify-content:space-between; gap:20px; }

.reveal { opacity:0; transform:translateY(16px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.08s; }

@media (max-width: 980px) {
  .hero { min-height:auto; }
  .hero-grid, .section-heading, .project-feature, .about-grid { grid-template-columns:1fr; }
  .hero-grid { gap:48px; }.section-heading{gap:20px}.project-feature{gap:28px}.about-grid{gap:34px}
  .hero-visual { max-width:680px; }
  .skill-grid { grid-template-columns:1fr 1fr; }
  .impact-grid { grid-template-columns:1fr 1fr; }.impact-grid div:nth-child(2){border-right:0}.impact-grid div:nth-child(-n+2){border-bottom:1px solid var(--line)}.impact-grid div:nth-child(3){padding-left:0}
  .timeline-item { grid-template-columns:1fr; gap:18px; }
  .time-meta { flex-direction:row; justify-content:space-between; }
}

@media (max-width: 760px) {
  .shell { width:min(calc(100% - 28px),var(--max)); }
  .section-pad { padding:82px 0; }
  .brand-name { display:none; }
  .menu-button { display:block; }
  .site-nav { position:fixed; inset:76px 0 auto 0; height:calc(100vh - 76px); background:rgba(7,10,18,.98); display:flex; flex-direction:column; align-items:flex-start; padding:32px 24px; gap:24px; transform:translateX(100%); transition:transform .25s ease; font-size:22px; }
  .site-nav.open { transform:none; }.nav-cta{padding:10px 16px}.menu-button.open span:first-child{top:20px;transform:rotate(45deg)}.menu-button.open span:last-child{top:20px;transform:rotate(-45deg)}
  .hero { padding-top:60px; }.hero-lede{font-size:17px}.hero-links{flex-wrap:wrap}
  .orbit-card{min-height:470px}.orbital-stage{height:320px}.orbit-a{width:175px;height:175px}.orbit-b{width:250px;height:250px}.orbit-c{width:300px;height:300px}.node{font-size:8px}.metric-grid{grid-template-columns:1fr 1fr;gap:14px}.metric-grid strong{font-size:18px}
  .impact-grid, .project-grid, .skill-grid, .resume-grid, .contact-box { grid-template-columns:1fr; }
  .impact-grid div{border-right:0!important;border-bottom:1px solid var(--line)!important;padding-left:0!important}.impact-grid div:last-child{border-bottom:0!important}
  .project-feature, .project-card { padding:22px; }.project-card{min-height:430px}.system-row{grid-template-columns:1fr}.sys-arrow{transform:rotate(90deg);text-align:center}.system-board{min-height:480px}
  .section-heading { margin-bottom:38px; }.section-heading h2,.about-title h2{font-size:40px}
  .timeline-item { padding:32px 0; }.time-content h3{font-size:25px}
  .contact-box{padding:28px}.contact-actions{width:100%}.button{width:100%}
  .footer-row{flex-direction:column}.footer-row span:last-child{max-width:300px}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}