:root {
  --blue: #2b88ff;
  --cyan: #19d6ff;
  --purple: #a246ff;
  --text: #f7fbff;
  --muted: #c9d4e6;
  --panel: rgba(3, 12, 26, .56);
  --line: rgba(64, 151, 255, .58);
  --astro-x: 0px;
  --astro-y: 0px;
  --bg-x: 0px;
  --bg-y: 0px;
  --audio-level: 0;
  --audio-glow: 0px;
  --earth-scroll: 0px;
  --earth-phase: 0deg;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #020711;
}
a { color: inherit; text-decoration: none; }
body.music-active { --audio-glow: calc(var(--audio-level) * 32px); }

.scene, .space-bg, .scene > div {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.scene { z-index: -2; overflow: hidden; background: #020711; }
.space-bg {
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.50), rgba(0,0,0,.14) 45%, rgba(0,0,0,.02)),
    url("assets/space-reference.png");
  background-size: cover;
  background-position: center;
  filter: saturate(1.12) contrast(1.06);
  transform: translate3d(var(--bg-x), var(--bg-y), 0) scale(1.025);
}
.space-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 36% 48%, rgba(65,20,110,.22), transparent 28%),
              radial-gradient(circle at 84% 4%, rgba(90,38,180,.24), transparent 24%);
}
.nebula, .stars, .earth-glow, .earth-rotation, .earth-terminator, .orbital-rings { z-index: 1; }
.stars { opacity: .7; animation: drift 38s linear infinite; }
.stars-a { background-image: radial-gradient(#fff 1px, transparent 1.4px); background-size: 91px 91px; }
.stars-b { background-image: radial-gradient(rgba(71,155,255,.85) 1px, transparent 1.5px); background-size: 137px 137px; animation-duration: 62s; }
.nebula { filter: blur(40px); mix-blend-mode: screen; opacity: .34; }
.nebula-a { background: radial-gradient(circle at 48% 35%, rgba(121,50,255,.55), transparent 18%); animation: nebula-drift-a 24s ease-in-out infinite, pulse 9s ease-in-out infinite; }
.nebula-b { background: radial-gradient(circle at 88% 16%, rgba(0,123,255,.45), transparent 16%); animation: nebula-drift-b 30s ease-in-out infinite, pulse 11s ease-in-out infinite reverse; }
.earth-glow {
  background: radial-gradient(ellipse at 78% 100%, rgba(40,125,255,.62) 0 9%, rgba(40,125,255,.22) 18%, transparent 39%);
  filter: blur(12px);
  opacity: calc(.72 + (var(--audio-level) * .16));
  animation: earth-breathe 6.5s ease-in-out infinite;
}
.earth-rotation,
.earth-terminator {
  position: fixed;
  inset: auto -10vw -26vh auto;
  width: min(78vw, 1080px);
  height: min(40vw, 520px);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: rotate(-18deg);
  transform-origin: 58% 72%;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse at 52% 100%, #000 0 58%, rgba(0,0,0,.74) 64%, transparent 72%);
  mask-image: radial-gradient(ellipse at 52% 100%, #000 0 58%, rgba(0,0,0,.74) 64%, transparent 72%);
}
.earth-rotation {
  opacity: calc(.18 + (var(--audio-level) * .08));
  mix-blend-mode: screen;
}
.earth-rotation::before {
  content: "";
  position: absolute;
  inset: 8% -80% -18% -80%;
  background:
    repeating-linear-gradient(88deg, transparent 0 54px, rgba(70,164,255,.12) 65px, transparent 92px),
    repeating-linear-gradient(103deg, transparent 0 120px, rgba(255,176,111,.18) 126px, rgba(255,176,111,.08) 132px, transparent 150px),
    linear-gradient(90deg, transparent, rgba(72,151,255,.18), transparent);
  filter: blur(.8px);
  transform: translate3d(var(--earth-scroll), 0, 0);
  animation: earth-sidereal-scroll 86164s linear infinite;
}
.earth-terminator {
  opacity: .26;
  mix-blend-mode: multiply;
  background: linear-gradient(calc(90deg + var(--earth-phase)), rgba(0,0,0,.62), transparent 42%, transparent 68%, rgba(4,10,24,.48));
}
.earth-terminator::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(calc(90deg + var(--earth-phase)), transparent 42%, rgba(98,190,255,.24) 50%, transparent 58%);
  mix-blend-mode: screen;
}

.orbital-rings {
  position: fixed;
  inset: auto -18vw -38vh auto;
  width: min(74vw, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(from 18deg, transparent 0 19%, rgba(70,160,255,.28) 20%, transparent 23% 56%, rgba(162,70,255,.22) 58%, transparent 61% 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 56% 56.5%, transparent 57% 62%, #000 63% 63.4%, transparent 64%);
  mask: radial-gradient(circle, transparent 0 55%, #000 56% 56.5%, transparent 57% 62%, #000 63% 63.4%, transparent 64%);
  opacity: calc(.38 + (var(--audio-level) * .28));
  filter: blur(.2px) drop-shadow(0 0 calc(14px + var(--audio-glow)) rgba(43,136,255,.42));
  animation: orbit-rotate 48s linear infinite;
}
.visor-reflection, .audio-orb, .shooting-star { z-index: 2; }

.visor-reflection {
  position: fixed;
  inset: auto;
  right: clamp(305px, 27.8vw, 520px);
  top: clamp(150px, 21.8vh, 232px);
  width: clamp(42px, 4.9vw, 78px);
  aspect-ratio: 1.45 / 1;
  border-radius: 55% 45% 48% 52%;
  background:
    linear-gradient(115deg, transparent 0 24%, rgba(255,255,255,.72) 42%, rgba(75,203,255,.32) 54%, transparent 72%),
    radial-gradient(ellipse at 66% 44%, rgba(28,177,255,.42), transparent 54%);
  filter: blur(1.6px) drop-shadow(0 0 calc(10px + var(--audio-glow)) rgba(63,189,255,.55));
  mix-blend-mode: screen;
  opacity: calc(.42 + (var(--audio-level) * .24));
  transform: rotate(-18deg);
  pointer-events: none;
  animation: visor-glint 5.8s ease-in-out infinite;
}


.audio-orb {
  position: fixed;
  inset: auto 19vw 23vh auto;
  z-index: 2;
  width: calc(70px + (var(--audio-level) * 42px));
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,214,255,.22), rgba(43,136,255,.11) 42%, transparent 72%);
  filter: blur(12px);
  opacity: calc(.24 + (var(--audio-level) * .48));
  transform: translate3d(var(--astro-x), var(--astro-y), 0);
}

.shooting-star {
  position: fixed;
  z-index: 2;
  left: var(--shoot-x);
  top: var(--shoot-y);
  width: var(--shoot-length, 150px);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(84,178,255,.9) 42%, transparent);
  box-shadow: 0 0 12px rgba(84,178,255,.7);
  opacity: 0;
  transform: rotate(var(--shoot-angle, -18deg));
  animation: shooting-star var(--shoot-life, 1.4s) ease-out forwards;
}

.page-shell {
  width: min(1080px, calc(100% - 48px));
  min-height: 100vh;
  padding: 42px 0 34px 34px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-style: italic; font-weight: 950; letter-spacing: -3px; transform: skew(-8deg); }
.brand-word { font-size: clamp(2.2rem, 4vw, 3.7rem); text-shadow: 0 3px 18px rgba(255,255,255,.18); }
.brand-mark { color: #ff3d31; font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -8px; margin-left: 5px; }
.hero { margin-top: 58px; max-width: 720px; }
.eyebrow { color: var(--cyan); text-transform: uppercase; letter-spacing: .25em; font-size: .72rem; font-weight: 800; margin: 12px 0; opacity: .78; }
h1 { margin: 0; font-size: clamp(1.6rem, 3.5vw, 3.1rem); line-height: 1.02; letter-spacing: -2px; font-weight: 920; }
h1 span { color: var(--blue); text-shadow: 0 0 34px rgba(43,136,255,.45); }

.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 300px)); gap: 18px; margin-top: 28px; max-width: 620px; }
.quick-card[hidden] { display: none; }
.quick-card, .glass-panel, .stat-card {
  background: linear-gradient(135deg, rgba(8,19,39,.84), rgba(5,14,29,.62));
  border: 0;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.quick-card { min-height: 72px; border-radius: 10px; padding: 16px 18px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; transition: transform .25s ease, box-shadow .25s ease; isolation: isolate; }
.quick-card:hover, .ghost-button:hover, .email-button:hover { transform: translateY(-3px); box-shadow: 0 0 32px rgba(43,136,255,.25); }
.card-icon svg, .panel-icon svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-card .card-icon svg { width: 32px; height: 32px; }
.quick-card.purple .card-icon { color: var(--purple); filter: drop-shadow(0 0 12px var(--purple)); }
.quick-card.cyan .card-icon { color: var(--cyan); filter: drop-shadow(0 0 12px var(--cyan)); }
.quick-card strong { display: block; font-size: 1rem; }
.quick-card small { display: block; color: var(--muted); margin-top: 3px; font-size: .85rem; }
.quick-card b { color: #dcecff; font-size: 1.8rem; font-weight: 300; transition: transform .25s ease; }

.ghost-button::before, .email-button::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, transparent 0 28%, rgba(255,255,255,.85), rgba(25,214,255,.85), transparent 68% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transform: translateX(-35%);
  transition: opacity .25s ease, transform .65s ease;
  pointer-events: none;
}
.quick-card::after, .ghost-button::after, .email-button::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -35%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-22deg);
  opacity: 0;
  transition: left .75s ease, opacity .25s ease;
  pointer-events: none;
}
.ghost-button:hover::before, .email-button:hover::before { opacity: .95; transform: translateX(0); }
.quick-card:hover::after, .ghost-button:hover::after, .email-button:hover::after { left: 110%; opacity: 1; }
.quick-card:hover b, .ghost-button:hover span, .email-button:hover span { transform: translateX(5px); }
.quick-card:hover .card-icon { animation: icon-energy 1.05s ease-in-out infinite; }

.glass-panel { border-radius: 12px; display: grid; align-items: center; gap: 24px; }
.about { margin-top: 48px; padding: 28px 24px; grid-template-columns: 70px 1fr auto; max-width: 965px; transition: max-width .35s ease, padding .35s ease, box-shadow .35s ease; }
.panel-icon { color: var(--blue); justify-self: center; filter: drop-shadow(0 0 12px var(--blue)); }
.purple-icon { color: var(--purple); filter: drop-shadow(0 0 12px var(--purple)); }
.section-kicker { color: #3c9aff; font-weight: 800; margin: 0 0 4px; }
h2 { margin: 0; line-height: 1.15; font-size: clamp(1.15rem, 1.85vw, 1.55rem); }
.about p, .contact p { color: var(--muted); line-height: 1.48; margin: 12px 0 0; }
.about-copy { min-width: 0; }
.about-toggle { cursor: pointer; font: inherit; }
.about-toggle span { display: inline-block; transition: transform .25s ease; }
.about-more { grid-column: 2 / 4; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px); transition: max-height .45s ease, opacity .3s ease, transform .3s ease, padding-top .3s ease; }
.about-more p { max-width: 850px; font-size: .96rem; }
.about.is-expanded { max-width: 1040px; padding-bottom: 32px; box-shadow: 0 22px 55px rgba(0,0,0,.3), 0 0 34px rgba(43,136,255,.13); }
.about.is-expanded .about-more { max-height: 1600px; opacity: 1; transform: translateY(0); padding-top: 4px; }
.about.is-expanded .about-toggle span { transform: rotate(90deg); }
.about-pillars { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.about-pillars span { border: 1px solid rgba(43,136,255,.45); border-radius: 999px; padding: 8px 12px; color: #dcecff; background: rgba(43,136,255,.1); box-shadow: inset 0 0 18px rgba(43,136,255,.06); font-size: .92rem; }
.ghost-button, .email-button { border: 1px solid var(--blue); border-radius: 8px; color: #eef7ff; padding: 14px 22px; min-width: 185px; text-align: center; transition: .25s ease; background: rgba(5,16,34,.45); position: relative; overflow: hidden; isolation: isolate; }
.ghost-button span, .email-button span { color: #55a4ff; font-size: 1.6rem; vertical-align: -2px; margin-left: 18px; transition: transform .25s ease; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 965px; margin-top: 22px; }
.stat-card { min-height: 92px; border-radius: 10px; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: 1fr 1fr; align-items: center; padding: 18px 24px; }
.stat-icon { grid-row: 1 / 3; color: var(--blue); font-weight: 900; font-size: 2.25rem; text-shadow: 0 0 14px var(--blue); }
.stat-card strong { font-size: 1.85rem; line-height: 1; }
.stat-card small { color: var(--muted); font-size: .98rem; }
.cube::before { content: "◇"; } .calendar::before { content: "▣"; } .infinity { font-size: 3rem; }

.contact { margin-top: 26px; max-width: 965px; padding: 22px 24px; grid-template-columns: 70px 1fr auto; }
.email-button { color: #4aa2ff; }
.audio-toggle { position: fixed; right: 24px; bottom: 22px; z-index: 5; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(43,136,255,.6); color: #eaf4ff; background: rgba(2,8,18,.72); border-radius: 999px; padding: 12px 16px; cursor: pointer; backdrop-filter: blur(12px); box-shadow: 0 0 22px rgba(43,136,255,.14); }
.audio-toggle[aria-pressed="true"] { border-color: rgba(162,70,255,.95); box-shadow: 0 0 calc(22px + var(--audio-glow)) rgba(162,70,255,.34); animation: audio-button-pulse 2.2s ease-in-out infinite; }
.audio-icon { color: var(--cyan); }

@keyframes icon-energy { 0%,100% { filter: drop-shadow(0 0 10px currentColor); transform: scale(1); } 50% { filter: drop-shadow(0 0 20px currentColor); transform: scale(1.08); } }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-120px, 80px, 0); } }
@keyframes pulse { 0%,100% { opacity: .2; transform: scale(1); } 50% { opacity: .42; transform: scale(1.08); } }

@keyframes orbit-rotate { to { transform: rotate(360deg); } }
@keyframes earth-sidereal-scroll { to { transform: translate3d(calc(var(--earth-scroll) - 920px), 0, 0); } }
@keyframes visor-glint { 0%,100% { opacity: calc(.28 + (var(--audio-level) * .18)); transform: translateX(-8px) rotate(-18deg) scale(.96); } 45% { opacity: calc(.72 + (var(--audio-level) * .22)); transform: translateX(10px) rotate(-18deg) scale(1.04); } 70% { opacity: calc(.36 + (var(--audio-level) * .18)); } }
@keyframes shooting-star { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(var(--shoot-angle, -18deg)); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--shoot-dx, -520px), var(--shoot-dy, 170px), 0) rotate(var(--shoot-angle, -18deg)); } }
@keyframes earth-breathe { 0%,100% { filter: blur(12px); } 50% { filter: blur(15px) saturate(1.15); } }
@keyframes nebula-drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2vw,-1.5vh,0) scale(1.06); } }
@keyframes nebula-drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-1.5vw,1vh,0) scale(1.04); } }
@keyframes audio-button-pulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }

@media (max-width: 980px) {
  .page-shell { padding-left: 0; }
  .space-bg { background-position: 58% center; }
  .visor-reflection { right: clamp(210px, 34vw, 340px); top: clamp(118px, 18.5vh, 190px); }
  .audio-orb { right: 6vw; bottom: 34vh; }
  .about, .contact { grid-template-columns: 54px 1fr; }
  .ghost-button, .email-button { grid-column: 2; justify-self: start; }
  .about-more { grid-column: 2; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .page-shell { width: min(100% - 28px, 1080px); padding-top: 24px; padding-bottom: 100px; }
  .hero { margin-top: 42px; }
  h1 { letter-spacing: -2px; }
  .quick-links, .stats { grid-template-columns: 1fr; }
  .about, .contact { grid-template-columns: 1fr; }
  .panel-icon { justify-self: start; }
  .ghost-button, .email-button { grid-column: 1; width: 100%; }
  .about-more { grid-column: 1; }
  .about.is-expanded .about-more { max-height: 2200px; }
  .orbital-rings, .earth-rotation, .earth-terminator { display: none; }
  .visor-reflection { right: 35vw; top: 18vh; opacity: .26; }
  .audio-orb { right: -6vw; bottom: 42vh; }
  .audio-toggle { left: 14px; right: auto; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}