:root {
  --canvas: #07111f;
  --surface: #0b192a;
  --surface-raised: #10243a;
  --ink: #f1f7ff;
  --muted: #a9bbcf;
  --dim: #7188a0;
  --line: rgba(169, 202, 231, .16);
  --cyan: #61d8ec;
  --violet: #9d8cff;
  --gold: #e4b86a;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--canvas); }
body::before { position: fixed; z-index: -2; inset: 0; content: ""; background: radial-gradient(circle at 84% 0%, rgba(67, 122, 183, .23), transparent 28rem), radial-gradient(circle at 2% 54%, rgba(105, 81, 188, .12), transparent 32rem), var(--canvas); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { letter-spacing: -.062em; }
em { color: var(--cyan); font-style: normal; }
.shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: fixed; z-index: 20; top: -100px; left: 18px; padding: 10px 14px; border-radius: 8px; color: #06101d; background: var(--cyan); font-weight: 800; }
.skip-link:focus { top: 18px; }

.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 88px; gap: 28px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: white; font-size: 17px; font-weight: 800; letter-spacing: -.035em; }
.wordmark-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(97, 216, 236, .72); border-radius: 10px; color: var(--cyan); background: rgba(80, 207, 230, .09); box-shadow: 0 0 22px rgba(84, 209, 232, .18); font-size: 18px; font-weight: 900; }
nav { display: flex; gap: 26px; color: var(--muted); font-size: 13px; font-weight: 700; }
nav a:hover, .site-footer a:hover { color: var(--cyan); }
.header-contact { padding: 10px 14px; border: 1px solid rgba(97, 216, 236, .38); border-radius: 9px; color: #d8fbff; background: rgba(76, 207, 230, .08); font-size: 13px; font-weight: 800; transition: .2s ease; }
.header-contact:hover { transform: translateY(-2px); border-color: var(--cyan); background: rgba(76, 207, 230, .16); }

.hero { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; min-height: 654px; gap: 68px; padding: 65px 0 82px; }
.eyebrow, .section-label { display: flex; align-items: center; gap: 10px; color: #c0d8ea; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span { width: 22px; height: 2px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.hero h1 { max-width: 690px; margin-bottom: 23px; font-size: clamp(51px, 6.1vw, 78px); line-height: .98; }
.hero-lead { max-width: 610px; margin-bottom: 30px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.hero-actions, .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 19px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-3px); }
.primary { color: #06111d; background: linear-gradient(105deg, #70e1ef, #8cb7ff); box-shadow: 0 14px 33px rgba(70, 184, 224, .2); }
.primary:hover { box-shadow: 0 17px 36px rgba(70, 184, 224, .34); }
.secondary { border-color: var(--line); color: #e2edf8; background: rgba(255,255,255,.025); }
.secondary:hover { border-color: rgba(151, 199, 236, .48); background: rgba(255,255,255,.07); }
.social-links { display: flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 31px 0 0; list-style: none; }
.social-links a { padding-bottom: 4px; border-bottom: 1px solid rgba(97, 216, 236, .35); color: #cfe4f2; font-size: 13px; font-weight: 750; }
.social-links a:hover { border-color: var(--cyan); color: white; }

.portrait-wrap { position: relative; min-height: 500px; display: grid; place-items: center; }
.portrait-grid { position: absolute; inset: 18px; opacity: .32; background-image: linear-gradient(rgba(114, 194, 224, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 194, 224, .14) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle, black 22%, transparent 74%); }
.portrait { position: relative; z-index: 2; width: min(335px, 72%); aspect-ratio: 1 / 1.17; margin: 0; overflow: hidden; border: 1px solid rgba(159, 221, 239, .46); border-radius: 49% 51% 44% 56% / 46% 42% 58% 54%; background: #17242e; box-shadow: 26px 31px 0 rgba(83, 105, 201, .13), 0 26px 70px rgba(0, 0, 0, .35); transform: rotate(2.5deg); }
.portrait::after { position: absolute; inset: 0; content: ""; background: linear-gradient(135deg, rgba(89, 220, 235, .15), transparent 36%, rgba(82, 66, 166, .18)); pointer-events: none; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: rotate(-2.5deg) scale(1.08); }
.portrait-orbit { position: absolute; z-index: 1; border: 1px solid rgba(113, 209, 231, .22); border-radius: 50%; }
.orbit-a { width: 470px; height: 235px; transform: rotate(-32deg); background: radial-gradient(ellipse, rgba(82, 216, 235, .1), transparent 68%); }.orbit-b { width: 375px; height: 375px; border-color: rgba(155, 128, 255, .2); transform: rotate(19deg); }
.portrait-note { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(168, 207, 234, .25); border-radius: 8px; background: rgba(8, 22, 39, .88); box-shadow: 0 11px 26px rgba(0, 0, 0, .25); color: #cfeaf5; font-size: 11px; font-weight: 800; backdrop-filter: blur(10px); }
.portrait-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }.note-top { top: 74px; right: -1px; }.note-bottom { bottom: 74px; left: 0; }.note-bottom span { background: var(--gold); box-shadow: 0 0 12px var(--gold); }

.signal-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(9, 25, 43, .55); }.signal-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 25px 0; }.signal-inner p { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }.signal-inner p + p { border-left: 1px solid var(--line); }.signal-inner strong { color: #eef8ff; font-size: 14px; }

.section { padding: 146px 0; }.section-label { gap: 12px; margin-bottom: 28px; }.section-label span { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }.section-label p { margin: 0; }
.about-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; }.about h2, .trajectory h2, .skills h2, .impact h2, .credentials h2, .contact h2 { margin: 0; font-size: clamp(39px, 4.8vw, 62px); line-height: 1.01; }.about-copy { max-width: 575px; }.about-copy > p { color: var(--muted); font-size: 16px; line-height: 1.75; }.fact-list { display: grid; gap: 13px; margin: 32px 0 0; }.fact-list div { display: grid; grid-template-columns: 100px 1fr; gap: 16px; padding-top: 13px; border-top: 1px solid var(--line); }.fact-list dt { color: var(--dim); font-size: 12px; font-weight: 700; }.fact-list dd { margin: 0; color: #dceaf6; font-size: 13px; font-weight: 650; }

.trajectory { position: relative; overflow: hidden; padding: 130px 0 145px; border-top: 1px solid var(--line); background: linear-gradient(135deg, rgba(11, 35, 56, .8), rgba(12, 20, 46, .7)); }.trajectory::after { position: absolute; inset: 0; z-index: 0; content: ""; opacity: .35; background-image: radial-gradient(rgba(133, 211, 236, .2) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(90deg, transparent, black 24%, black 78%, transparent); pointer-events: none; }.trajectory .shell { position: relative; z-index: 1; }.trajectory-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 94px; align-items: end; }.trajectory-heading p, .skills-heading > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.journey-graphic { position: relative; height: 355px; margin-top: 74px; }.journey-line { position: absolute; inset: 46px 0 auto; width: 100%; height: 187px; overflow: visible; }.journey-step { position: absolute; width: 178px; padding: 14px; border: 1px solid rgba(163, 211, 238, .2); border-radius: 10px; background: rgba(7, 19, 34, .86); box-shadow: 0 13px 28px rgba(0, 0, 0, .16); }.journey-step::before { position: absolute; width: 11px; height: 11px; border: 3px solid #d7f9ff; border-radius: 50%; content: ""; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }.journey-step .year { display: block; margin-bottom: 6px; color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 800; }.journey-step h3 { margin: 0 0 6px; color: white; font-size: 15px; letter-spacing: -.03em; }.journey-step p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.48; }.step-one { top: 169px; left: 0; }.step-one::before { top: -33px; left: 27px; }.step-two { top: 17px; left: 20.8%; }.step-two::before { bottom: -34px; left: 47px; }.step-three { top: 150px; left: 41.2%; }.step-three::before { top: -32px; left: 76px; }.step-four { top: 0; left: 61.4%; }.step-four::before { bottom: -33px; left: 66px; }.step-five { top: 102px; right: 0; border-color: rgba(228, 184, 106, .43); }.step-five::before { top: -31px; left: 87px; border-color: #fff1cd; background: var(--gold); box-shadow: 0 0 16px var(--gold); }.step-five .year { color: #f0cf91; }

.skills-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 94px; align-items: end; }.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 61px; }.skill-card { min-height: 230px; padding: 27px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); transition: transform .2s, border-color .2s; }.skill-card:hover { transform: translateY(-5px); border-color: rgba(104, 214, 235, .42); }.skill-index { margin-bottom: 35px; color: var(--violet); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 800; }.skill-card h3 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.045em; }.skill-card p:last-child { max-width: 420px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.66; }

.impact { padding: 120px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #091829; }.impact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 92px; }.impact-list { border-top: 1px solid var(--line); }.impact-list article { display: grid; grid-template-columns: 43px 1fr; gap: 15px; padding: 21px 0; border-bottom: 1px solid var(--line); }.impact-list span { color: var(--gold); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 800; }.impact-list p { margin: 0; color: #d5e3f0; font-size: 14px; line-height: 1.62; }

.project-card { display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden; border: 1px solid rgba(112, 221, 235, .25); border-radius: 18px; background: linear-gradient(135deg, rgba(5, 70, 80, .75), rgba(29, 15, 63, .86)); box-shadow: 0 28px 58px rgba(0,0,0,.2); }.project-visual { position: relative; min-height: 440px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 48% 42%, rgba(109, 65, 207, .56), transparent 26%), linear-gradient(145deg, #073940, #161139); }.project-visual::before { position: absolute; inset: 0; content: ""; opacity: .36; background-image: linear-gradient(rgba(145, 250, 255, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(145, 250, 255, .22) 1px, transparent 1px); background-size: 26px 26px; transform: perspective(420px) rotateX(58deg) scale(1.5) translateY(20%); transform-origin: bottom; }.project-visual svg { position: absolute; width: 112%; height: 92%; overflow: visible; }.project-visual path { fill: rgba(150, 94, 255, .2); stroke: #b980ff; stroke-width: 2; filter: drop-shadow(0 0 9px rgba(190, 139, 255, .8)); }.project-visual strong { position: relative; z-index: 2; display: grid; width: 90px; height: 90px; place-items: center; border: 2px solid var(--cyan); border-radius: 25px; color: white; background: rgba(9, 22, 47, .76); box-shadow: 0 0 36px rgba(58, 231, 239, .27); font-size: 52px; }.project-pin { position: absolute; z-index: 2; width: 15px; height: 15px; border: 3px solid #e9e2ff; border-radius: 50%; background: #b875ff; box-shadow: 0 0 19px #bd81ff; }.pin-one { top: 17%; left: 14%; }.pin-two { top: 21%; right: 14%; }.pin-three { right: 20%; bottom: 17%; }.pin-four { bottom: 24%; left: 18%; }.project-copy { padding: 61px; }.project-kicker { color: #a9f5fb; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.project-copy h2 { margin: 11px 0 21px; font-size: clamp(41px, 4.6vw, 58px); }.project-copy h2 a:hover { color: var(--cyan); }.project-copy > p:not(.project-kicker) { max-width: 540px; color: #c8ddeb; font-size: 16px; line-height: 1.68; }.project-copy ul { display: grid; gap: 9px; padding: 0; margin: 27px 0; color: #e5f2fc; font-size: 13px; list-style: none; }.project-copy li::before { margin-right: 10px; color: var(--cyan); content: "✦"; }.text-link { display: inline-flex; gap: 8px; padding-bottom: 3px; border-bottom: 1px solid rgba(97, 216, 236, .4); color: #b9f2f8; font-size: 13px; font-weight: 800; }.text-link:hover { border-color: var(--cyan); color: white; }

.credentials { display: grid; grid-template-columns: .83fr 1.17fr; gap: 94px; }.credential-list { border-top: 1px solid var(--line); }.credential-list article { display: grid; grid-template-columns: 48px 1fr auto; gap: 15px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }.credential-list span { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 800; }.credential-list p { margin: 0; color: #dfeef8; font-size: 14px; font-weight: 680; line-height: 1.45; }.credential-list small { color: var(--dim); font-size: 11px; white-space: nowrap; }

.contact { margin-top: 25px; padding: 107px 72px; border-radius: 20px 20px 0 0; background: radial-gradient(circle at 72% 20%, rgba(118, 94, 240, .43), transparent 30%), radial-gradient(circle at 12% 90%, rgba(58, 211, 229, .23), transparent 29%), linear-gradient(135deg, #0b3041, #111331 58%, #25114a); }.contact h2 { max-width: 830px; margin: 0 0 30px; font-size: clamp(41px, 5vw, 66px); }.contact .eyebrow { color: #d2f7fb; }
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; min-height: 116px; color: var(--dim); font-size: 12px; }.site-footer p { margin: 0; text-align: center; }.site-footer > div { display: flex; justify-content: flex-end; gap: 17px; }.site-footer > div a { color: var(--muted); font-weight: 700; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 20px; padding-top: 52px; text-align: center; }.hero .eyebrow, .hero-actions, .social-links { justify-content: center; }.hero-lead { margin-right: auto; margin-left: auto; }.portrait-wrap { min-height: 405px; }.portrait { width: 255px; }.orbit-a { width: 390px; height: 205px; }.orbit-b { width: 315px; height: 315px; }.note-top { right: 6%; }.note-bottom { left: 6%; }
  .about-layout, .trajectory-heading, .skills-heading, .impact-layout, .credentials { grid-template-columns: 1fr; gap: 31px; }.about-copy { max-width: 670px; }.journey-graphic { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 45px; }.journey-line { display: none; }.journey-step { position: relative; inset: auto !important; width: auto; min-height: 142px; }.journey-step::before { position: static; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-width: 2px; vertical-align: middle; }.journey-step .year { display: inline; }.skill-grid { margin-top: 43px; }.project-card { grid-template-columns: 1fr; }.project-visual { min-height: 330px; }.project-copy { padding: 45px; }.contact { padding: 76px 44px; }.site-footer { grid-template-columns: 1fr; padding: 28px 0; text-align: center; }.site-footer .wordmark, .site-footer > div { justify-content: center; }.site-footer p { order: 3; }
}

@media (max-width: 620px) {
  .shell { width: min(100% - 32px, 540px); }.site-header { min-height: 75px; }.site-header nav { display: none; }.header-contact { padding: 9px 11px; }.hero h1 { font-size: 48px; }.hero-lead { font-size: 16px; }.portrait-wrap { min-height: 345px; }.portrait { width: 218px; }.orbit-a { width: 315px; height: 175px; }.orbit-b { width: 268px; height: 268px; }.portrait-note { padding: 8px 9px; font-size: 10px; }.note-top { top: 40px; right: 0; }.note-bottom { bottom: 38px; left: 0; }.signal-inner { grid-template-columns: 1fr; gap: 11px; }.signal-inner p + p { border-top: 1px solid var(--line); border-left: 0; padding-top: 11px; }.section { padding: 90px 0; }.about h2, .trajectory h2, .skills h2, .impact h2, .credentials h2, .contact h2 { font-size: 40px; }.fact-list div { grid-template-columns: 84px 1fr; }.trajectory { padding: 85px 0; }.journey-graphic, .skill-grid { grid-template-columns: 1fr; }.journey-step { min-height: 0; }.skill-card { min-height: 0; }.impact { padding: 80px 0; }.project-copy { padding: 32px 25px; }.project-visual { min-height: 280px; }.credentials { padding-bottom: 85px; }.credential-list article { grid-template-columns: 42px 1fr; }.credential-list small { grid-column: 2; }.contact { width: 100%; padding: 73px 24px; border-radius: 17px 17px 0 0; }.contact h2 { font-size: 39px; }
}