:root {
  --bg: #03060a;
  --panel: #080d13;
  --panel-light: #0b121b;
  --text: #f4f7fa;
  --muted: #7d8997;
  --line: rgba(151, 179, 205, 0.2);
  --blue: #78c9ff;
  --orange: #ff7247;
  --mono: "Space Mono", monospace;
  --sans: "Inter", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { --scroll-shift: 0px; }
a { color: inherit; text-decoration: none; }

.space-field {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.55) .5px, transparent .5px);
  background-size: 82px 82px; opacity: .12;
  animation: starDrift 45s linear infinite;
}
.space-field::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 15%, rgba(42, 112, 161, .15), transparent 30%), linear-gradient(180deg, transparent 60%, #03060a);
}
.orbital { position: fixed; z-index: -2; border: 1px solid rgba(120,201,255,.08); border-radius: 50%; pointer-events: none; }
.orbital::after { content: ""; position: absolute; width: 4px; height: 4px; top: 50%; left: -2px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.orbital-a { width: 80vw; height: 80vw; top: -58vw; right: -20vw; animation: orbitBackground 55s linear infinite; }
.orbital-b { width: 55vw; height: 55vw; bottom: -45vw; left: -25vw; animation: orbitBackground 42s linear infinite reverse; }

.section-shell, .site-header { width: min(1320px, calc(100% - 64px)); margin-inline: auto; }
.site-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 96px; border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 13px; }
.logo-mark { position: relative; display: grid; overflow: hidden; width: 38px; height: 38px; border: 1px solid var(--text); place-items: center; font-family: var(--mono); font-size: .7rem; font-weight: 700; }
.logo-mark::after { content: ""; position: absolute; width: 60px; height: 1px; background: var(--blue); transform: translateX(-55px) rotate(-45deg); animation: logoScan 5s ease-in-out infinite; }
.logo-copy { font-size: .62rem; font-weight: 600; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; }
nav { display: flex; gap: 42px; }
nav a, .header-cta { color: var(--muted); font-family: var(--mono); font-size: .59rem; letter-spacing: .12em; text-transform: uppercase; transition: color 180ms ease; }
nav a span { margin-right: 7px; color: var(--blue); }
nav a:hover, .header-cta:hover { color: var(--text); }
.header-cta { padding: 11px 15px; border: 1px solid var(--line); color: var(--text); }
.header-cta span { margin-left: 12px; color: var(--orange); }

.hero { min-height: calc(100vh - 96px); padding: 35px 0 0; }
.mission-status { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; color: var(--muted); font-family: var(--mono); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; }
.status-light { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: pulse 2s infinite; }
.status-coordinate { margin-left: auto; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; min-height: calc(100vh - 225px); border-top: 1px solid var(--line); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 8vh 5vw 8vh 0; border-right: 1px solid var(--line); }
.eyebrow, .section-index, .panel-id, .label { color: var(--blue); font-family: var(--mono); font-size: .61rem; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { margin: 25px 0 35px; font-size: clamp(4rem, 7.2vw, 7.4rem); font-weight: 300; letter-spacing: -.075em; line-height: .91; text-transform: uppercase; }
em { color: var(--orange); font-style: normal; }
.hero-intro { max-width: 600px; margin: 0; color: var(--muted); font-size: clamp(.95rem, 1.15vw, 1.12rem); line-height: 1.8; }
.hero-actions, .contact-actions { display: flex; align-items: center; gap: 30px; margin-top: 45px; }
.primary-button { position: relative; display: flex; overflow: hidden; align-items: center; justify-content: space-between; min-width: 210px; padding: 16px 18px; border: 1px solid var(--blue); background: rgba(120,201,255,.06); color: var(--text); font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.primary-button::before { content: ""; position: absolute; width: 35%; height: 200%; top: -50%; left: -60%; background: linear-gradient(90deg, transparent, rgba(120,201,255,.2), transparent); transform: skewX(-22deg); transition: left 500ms ease; }
.primary-button span { color: var(--orange); }
.primary-button:hover { border-color: var(--text); background: rgba(120,201,255,.12); box-shadow: 0 0 25px rgba(120,201,255,.12); }
.primary-button:hover::before { left: 125%; }
.secondary-link { color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.secondary-link:hover { color: var(--text); }

.hero-visual { position: relative; overflow: hidden; min-height: 520px; }
.planet { position: absolute; width: min(44vw, 650px); height: min(44vw, 650px); top: 50%; left: 54%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #253541 0%, #0e1820 38%, #04070a 72%); box-shadow: inset -45px -35px 70px #000, -30px 0 70px rgba(120,201,255,.12); transform: translate(-50%, calc(-50% + var(--scroll-shift))); animation: planetBreath 8s ease-in-out infinite; }
.planet::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .28; background: repeating-linear-gradient(100deg, transparent 0 16px, rgba(120,201,255,.08) 17px, transparent 18px 28px); animation: planetSurface 26s linear infinite; }
.planet::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(120,201,255,.24); border-radius: 50%; clip-path: inset(0 47% 0 0); animation: planetSignal 4s ease-in-out infinite; }
.trajectory { position: absolute; top: 50%; left: 54%; border: 1px solid rgba(120,201,255,.2); border-radius: 50%; transform: translate(-50%,-50%) rotate(-18deg); }
.trajectory::after { content: ""; position: absolute; width: 5px; height: 5px; top: 50%; left: -3px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 14px var(--blue); }
.trajectory-one { width: 80%; height: 24%; animation: trajectoryOne 16s linear infinite; }
.trajectory-two { width: 105%; height: 45%; border-color: rgba(255,114,71,.14); animation: trajectoryTwo 24s linear infinite reverse; }
.trajectory-two::after { background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.telemetry { position: absolute; display: grid; overflow: hidden; min-width: 130px; padding: 11px; border-left: 1px solid var(--blue); background: rgba(3,6,10,.65); backdrop-filter: blur(5px); }
.telemetry::after { content: ""; position: absolute; width: 100%; height: 1px; top: 0; left: 0; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: .65; animation: telemetryScan 3.5s ease-in-out infinite; }
.telemetry-a { top: 18%; right: 3%; animation: telemetryFloat 6s ease-in-out infinite; }
.telemetry-b { bottom: 17%; left: 8%; animation: telemetryFloat 7s 1.2s ease-in-out infinite reverse; }
.telemetry span, .telemetry small { color: var(--muted); font-family: var(--mono); font-size: .45rem; letter-spacing: .12em; }
.telemetry strong { margin: 3px 0; font-family: var(--mono); font-size: 1.15rem; font-weight: 400; }
.crosshair { position: absolute; width: 9px; height: 9px; top: 50%; left: 54%; border: 1px solid var(--orange); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 16px var(--orange); animation: crosshairPing 2.6s ease-out infinite; }
.hero-data { display: grid; grid-template-columns: repeat(4,1fr); border-block: 1px solid var(--line); }
.hero-data div { padding: 16px 18px; border-right: 1px solid var(--line); }
.hero-data div:last-child { border: 0; }
.hero-data span { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--mono); font-size: .46rem; letter-spacing: .14em; }
.hero-data strong { font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }

.profile, .experience, .projects, .principles { padding-top: 160px; }
.section-heading { display: grid; grid-template-columns: .55fr 1.45fr .7fr; gap: 50px; align-items: end; padding-bottom: 55px; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin: 0; font-size: clamp(3rem, 5.2vw, 5.4rem); font-weight: 300; letter-spacing: -.065em; line-height: .98; text-transform: uppercase; }
.section-heading p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.profile-grid { display: grid; grid-template-columns: 1.6fr .7fr; gap: 1px; margin-top: 1px; background: var(--line); }
.profile-main, .credential { padding: clamp(30px,5vw,70px); background: var(--panel); }
.large-copy { max-width: 780px; margin: 50px 0 30px; color: var(--text) !important; font-size: clamp(1.65rem,3vw,3.1rem) !important; font-weight: 300; letter-spacing: -.045em; line-height: 1.3 !important; }
.large-copy strong { font-weight: 400; color: var(--blue); }
.profile-main > p:not(.large-copy) { max-width: 620px; color: var(--muted); font-size: .87rem; line-height: 1.9; }
.profile-main a { display: inline-block; margin-top: 30px; color: var(--blue); font-family: var(--mono); font-size: .57rem; letter-spacing: .1em; text-transform: uppercase; }
.credential { display: flex; flex-direction: column; }
.credential-mark { display: grid; width: 145px; height: 145px; margin: 50px 0 35px; border: 1px solid var(--line); border-radius: 50%; place-items: center; background: repeating-radial-gradient(circle, transparent 0 17px, rgba(120,201,255,.06) 18px 19px); animation: credentialPulse 7s ease-in-out infinite; }
.credential-mark span { color: var(--orange); font-family: var(--mono); font-size: 1rem; letter-spacing: .14em; }
.credential h3 { margin: 0; font-size: 1.1rem; font-weight: 400; line-height: 1.5; }
.credential p { margin: 14px 0 35px; color: var(--muted); font-size: .7rem; line-height: 1.7; }
.credential-status { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .48rem; letter-spacing: .1em; text-transform: uppercase; }
.credential-status span { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.capabilities { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 1px; background: var(--line); }
.capability { position: relative; min-height: 360px; padding: 34px; background: var(--bg); transition: background 200ms ease, transform 250ms ease; }
.capability::before { content: ""; position: absolute; width: 0; height: 1px; top: 0; left: 0; background: var(--blue); transition: width 400ms ease; }
.capability:hover { z-index: 1; background: var(--panel); transform: translateY(-5px); }
.capability:hover::before { width: 100%; }
.capability > span, .principle > span { color: var(--orange); font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; }
.capability h3 { margin: 90px 0 18px; font-size: 1.25rem; font-weight: 400; letter-spacing: -.025em; text-transform: uppercase; }
.capability p, .principle p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.75; }
.capability ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 30px 0 0; padding: 0; list-style: none; }
.capability li { padding: 6px 8px; border: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .44rem; letter-spacing: .08em; text-transform: uppercase; }
.technology-matrix { display: grid; grid-template-columns: 1.2fr repeat(2,1fr); gap: 1px; margin-top: 1px; background: var(--line); }
.matrix-intro, .matrix-group { min-height: 175px; padding: 28px; background: var(--panel); }
.matrix-intro { grid-row: span 2; }
.matrix-intro h3 { margin: 38px 0 12px; font-size: 1.35rem; font-weight: 400; letter-spacing: -.03em; text-transform: uppercase; }
.matrix-intro p, .matrix-group p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.8; }
.matrix-group span { display: block; margin-bottom: 45px; color: var(--blue); font-family: var(--mono); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; }

.mission-list { margin-top: 1px; }
.mission { position: relative; display: grid; grid-template-columns: .55fr 1.45fr .7fr; gap: 50px; padding: 55px 0; border-bottom: 1px solid var(--line); transition: padding 250ms ease, background 250ms ease; }
.mission::before { content: ""; position: absolute; width: 1px; height: 0; left: 0; top: 0; background: var(--orange); transition: height 350ms ease; }
.mission:hover { padding-inline: 18px; background: linear-gradient(90deg, rgba(120,201,255,.035), transparent 70%); }
.mission:hover::before { height: 100%; }
.mission-code { display: flex; flex-direction: column; justify-content: space-between; }
.mission-code span { font-family: var(--mono); font-size: .68rem; color: var(--blue); }
.mission-code small { color: var(--muted); font-family: var(--mono); font-size: .47rem; letter-spacing: .13em; }
.mission-copy h3 { max-width: 700px; margin: 17px 0 24px; font-size: clamp(1.5rem,2.5vw,2.4rem); font-weight: 300; letter-spacing: -.04em; line-height: 1.3; }
.mission-copy p { max-width: 670px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.8; }
.mission-outcome { align-self: end; padding-left: 18px; border-left: 1px solid var(--orange); }
.mission-outcome span { display: block; margin-bottom: 8px; color: var(--muted); font-family: var(--mono); font-size: .46rem; letter-spacing: .12em; }
.mission-outcome strong { font-family: var(--mono); font-size: .68rem; font-weight: 400; text-transform: uppercase; }

.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 1px; background: var(--line); }
.project-card { position: relative; min-height: 470px; padding: clamp(28px,4vw,52px); background: var(--panel); transition: background 250ms ease, transform 250ms ease; }
.project-card::before { content: ""; position: absolute; width: 0; height: 1px; top: 0; left: 0; background: var(--orange); transition: width 500ms ease; }
.project-card:hover { z-index: 1; background: var(--panel-light); transform: translateY(-5px); }
.project-card:hover::before { width: 100%; }
.project-topline { display: flex; justify-content: space-between; color: var(--blue); font-family: var(--mono); font-size: .52rem; letter-spacing: .1em; }
.project-topline small { color: var(--muted); font-size: .45rem; }
.project-card h3 { max-width: 500px; margin: 85px 0 22px; font-size: clamp(1.6rem,2.7vw,2.7rem); font-weight: 300; letter-spacing: -.05em; line-height: 1.1; text-transform: uppercase; }
.project-card > p { max-width: 590px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.8; }
.project-card ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 50px; padding: 0; list-style: none; }
.project-card li { padding: 6px 8px; border: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .43rem; letter-spacing: .08em; text-transform: uppercase; }
.project-result { position: absolute; right: clamp(28px,4vw,52px); bottom: clamp(28px,4vw,52px); left: clamp(28px,4vw,52px); display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); }
.project-result span { color: var(--orange); font-family: var(--mono); font-size: .45rem; letter-spacing: .12em; }
.project-result strong { font-family: var(--mono); font-size: .52rem; font-weight: 400; letter-spacing: .06em; text-align: right; text-transform: uppercase; }

.section-heading.compact { grid-template-columns: .55fr 2.15fr; }
.principle-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 1px; background: var(--line); }
.principle { min-height: 260px; padding: 30px; background: var(--panel); }
.principle h3 { margin: 90px 0 14px; font-size: 1.1rem; font-weight: 400; letter-spacing: -.02em; text-transform: uppercase; }

.contact { position: relative; overflow: hidden; padding-block: 230px 200px; text-align: center; }
.contact-orbit { position: absolute; z-index: -1; width: 700px; height: 700px; top: 50%; left: 50%; border: 1px solid rgba(120,201,255,.12); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 100px rgba(120,201,255,.03), inset 0 0 100px rgba(120,201,255,.03); animation: contactOrbit 30s linear infinite; }
.contact-orbit::before, .contact-orbit::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(255,114,71,.08); border-radius: 50%; }
.contact-orbit::after { inset: 32%; border-color: rgba(120,201,255,.12); }
.contact h2 { margin: 25px 0 30px; font-size: clamp(4rem,8vw,8.5rem); font-weight: 300; letter-spacing: -.08em; line-height: .9; text-transform: uppercase; }
.contact-copy { color: var(--muted); font-size: .82rem; }
.contact-actions { justify-content: center; }
.site-footer { display: flex; justify-content: space-between; padding-block: 23px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .48rem; letter-spacing: .1em; text-transform: uppercase; }

.reveal { opacity: 0; filter: blur(5px); transform: translateY(24px); transition: opacity 850ms ease, transform 850ms cubic-bezier(.2,.75,.2,1), filter 850ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.is-visible { filter: blur(0); }
.capabilities .reveal:nth-child(2), .principle-grid .reveal:nth-child(2) { transition-delay: 90ms; }
.capabilities .reveal:nth-child(3), .principle-grid .reveal:nth-child(3) { transition-delay: 180ms; }
.principle-grid .reveal:nth-child(4) { transition-delay: 270ms; }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes starDrift { to { background-position: 82px 164px; } }
@keyframes orbitBackground { to { transform: rotate(360deg); } }
@keyframes logoScan { 0%, 70% { transform: translateX(-55px) rotate(-45deg); } 90%, 100% { transform: translateX(55px) rotate(-45deg); } }
@keyframes planetBreath { 50% { box-shadow: inset -45px -35px 70px #000, -30px 0 95px rgba(120,201,255,.2); } }
@keyframes planetSurface { to { background-position: 220px 0; } }
@keyframes planetSignal { 50% { opacity: .45; } }
@keyframes trajectoryOne { to { transform: translate(-50%,-50%) rotate(342deg); } }
@keyframes trajectoryTwo { from { transform: translate(-50%,-50%) rotate(31deg); } to { transform: translate(-50%,-50%) rotate(391deg); } }
@keyframes telemetryScan { 0%, 15% { top: 0; opacity: 0; } 40% { opacity: .8; } 85%, 100% { top: 100%; opacity: 0; } }
@keyframes telemetryFloat { 50% { transform: translateY(-8px); } }
@keyframes crosshairPing { 0% { box-shadow: 0 0 0 0 rgba(255,114,71,.45), 0 0 16px var(--orange); } 70%, 100% { box-shadow: 0 0 0 22px rgba(255,114,71,0), 0 0 16px var(--orange); } }
@keyframes credentialPulse { 50% { border-color: rgba(120,201,255,.4); box-shadow: 0 0 35px rgba(120,201,255,.06); } }
@keyframes contactOrbit { to { transform: translate(-50%,-50%) rotate(360deg); } }

@media (max-width: 980px) {
  nav { display: none; }
  .hero-grid, .section-heading, .section-heading.compact, .mission { grid-template-columns: 1fr; }
  .hero-copy { border-right: 0; }
  .hero-visual { min-height: 450px; border-top: 1px solid var(--line); }
  .planet { width: 520px; height: 520px; }
  .profile-grid { grid-template-columns: 1fr; }
  .capabilities, .principle-grid { grid-template-columns: 1fr 1fr; }
  .technology-matrix { grid-template-columns: 1fr 1fr; }
  .matrix-intro { grid-column: span 2; grid-row: auto; }
  .mission { gap: 28px; }
  .mission-code { flex-direction: row; }
}

@media (max-width: 620px) {
  .section-shell, .site-header { width: min(100% - 28px,1320px); }
  .site-header { height: 78px; }
  .logo-copy { display: none; }
  .hero { padding-top: 25px; }
  .mission-status .status-coordinate { display: none; }
  .hero-grid { min-height: auto; }
  .hero-copy { padding: 13vh 0 60px; }
  .hero h1 { font-size: clamp(3.4rem,16vw,5rem); }
  .hero-actions, .contact-actions { align-items: flex-start; flex-direction: column; }
  .hero-visual { min-height: 370px; }
  .planet { width: 390px; height: 390px; }
  .telemetry-a { right: 0; }
  .telemetry-b { left: 0; }
  .hero-data { grid-template-columns: 1fr 1fr; }
  .hero-data div:nth-child(2) { border-right: 0; }
  .hero-data div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .profile, .experience, .projects, .principles { padding-top: 110px; }
  .section-heading { gap: 25px; padding-bottom: 40px; }
  .section-heading h2 { font-size: clamp(2.7rem,13vw,4rem); }
  .profile-main, .credential { padding: 28px; }
  .large-copy { margin-top: 38px; }
  .capabilities, .principle-grid { grid-template-columns: 1fr; }
  .technology-matrix, .project-grid { grid-template-columns: 1fr; }
  .matrix-intro { grid-column: auto; }
  .matrix-intro, .matrix-group { min-height: auto; }
  .matrix-group span { margin-bottom: 24px; }
  .capability { min-height: 310px; }
  .project-card { min-height: 500px; }
  .mission { padding: 40px 0; }
  .contact { padding-block: 170px 150px; }
  .contact h2 { font-size: clamp(3.5rem,16vw,5rem); }
  .site-footer { align-items: center; flex-direction: column; gap: 12px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .status-light, .space-field, .orbital, .logo-mark::after, .planet, .planet::before, .planet::after, .trajectory, .telemetry, .telemetry::after, .crosshair, .credential-mark, .contact-orbit { animation: none; }
}