/* ============================================================
   System 3 Performance Consulting — design system
   Dark, electric, AI-forward. Brand: icy-blue star on deep navy.
   ============================================================ */

:root {
  --bg: #030110;
  --bg-2: #0b0620;
  --panel: rgba(19, 13, 48, 0.62);
  --panel-solid: #120c30;
  --line: rgba(140, 120, 235, 0.18);
  --ice: #d9e8f6;
  --text: #e9ecfb;
  --text-dim: #b3b5dd;
  --blue: #3a7bff;
  --cyan: #55b7ff;
  --purple: #8b3fd6;
  --violet: #b44bf0;
  --magenta: #d63fd9;
  --grad: linear-gradient(100deg, #55b7ff 0%, #3a7bff 35%, #8b3fd6 68%, #b44bf0 100%);
  --radius: 18px;
  --maxw: 1180px;
  --nav-h: 76px;
  --font-head: "Space Grotesk", "Avenir Next", system-ui, sans-serif;
  --font-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- galaxy backdrop: nebula + starfield ----------
   Colors sampled from the original site's nebula wave artwork:
   near-black indigo space, deep electric blue, magenta-violet glow. */
body::before {
  content: "";
  position: fixed; inset: -8%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1050px 760px at 85% -8%, rgba(124, 40, 220, 0.36), transparent 60%),
    radial-gradient(920px 700px at -10% 24%, rgba(36, 78, 220, 0.36), transparent 58%),
    radial-gradient(760px 600px at 106% 64%, rgba(170, 45, 215, 0.20), transparent 60%),
    radial-gradient(940px 760px at 28% 114%, rgba(120, 35, 200, 0.27), transparent 63%),
    radial-gradient(620px 500px at 48% 34%, rgba(70, 60, 230, 0.10), transparent 68%),
    radial-gradient(480px 400px at 62% 42%, rgba(214, 63, 217, 0.07), transparent 70%);
  animation: nebula-breathe 44s ease-in-out infinite alternate;
}
@keyframes nebula-breathe {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.5%, 1.2%, 0) scale(1.05); }
  100% { transform: translate3d(1.5%, -1.2%, 0) scale(1.08); }
}

/* ---------- soft drifting color blurs (elements injected by main.js) ----------
   Rendered at 1/3 size with 1/3 blur, scaled 3x via transform: identical look,
   ~9x less raster/GPU cost. */
.color-blurs {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
}
.blur-blob {
  position: absolute; border-radius: 50%;
  filter: blur(26px);
  will-change: transform;
}
.blur-blob--violet {
  width: 19.4vmax; height: 19.4vmax;
  left: calc(14vw - 9.7vmax); top: calc(22vh - 9.7vmax);
  background: radial-gradient(circle, rgba(124, 58, 237, 0.52), rgba(124, 58, 237, 0.18) 55%, transparent 72%);
  animation: blob-a 46s ease-in-out infinite alternate;
}
.blur-blob--blue {
  width: 18vmax; height: 18vmax;
  left: calc(88vw - 9vmax); top: calc(88vh - 9vmax);
  background: radial-gradient(circle, rgba(41, 87, 232, 0.5), rgba(41, 87, 232, 0.16) 55%, transparent 72%);
  animation: blob-b 58s ease-in-out infinite alternate;
}
.blur-blob--cyan {
  width: 12.7vmax; height: 12.7vmax;
  left: calc(94vw - 6.35vmax); top: calc(42vh - 6.35vmax);
  background: radial-gradient(circle, rgba(53, 195, 240, 0.30), rgba(53, 150, 240, 0.10) 55%, transparent 72%);
  animation: blob-c 41s ease-in-out infinite alternate;
}
.blur-blob--magenta {
  width: 14.7vmax; height: 14.7vmax;
  left: calc(30vw - 7.35vmax); top: calc(96vh - 7.35vmax);
  background: radial-gradient(circle, rgba(194, 43, 217, 0.32), rgba(194, 43, 217, 0.10) 55%, transparent 72%);
  animation: blob-b 63s ease-in-out infinite alternate-reverse;
}
.blur-blob--indigo {
  width: 16.7vmax; height: 16.7vmax;
  left: calc(52vw - 8.35vmax); top: calc(55vh - 8.35vmax);
  background: radial-gradient(circle, rgba(70, 50, 216, 0.38), rgba(70, 50, 216, 0.12) 55%, transparent 72%);
  animation: blob-c 52s ease-in-out infinite alternate-reverse;
}
.blur-blob--pink {
  width: 10vmax; height: 10vmax;
  left: calc(40vw - 5vmax); top: calc(2vh - 5vmax);
  background: radial-gradient(circle, rgba(233, 167, 245, 0.16), rgba(210, 120, 245, 0.06) 55%, transparent 72%);
  animation: blob-a 37s ease-in-out infinite alternate-reverse;
}
@keyframes blob-a {
  from { transform: translate3d(0, 0, 0) scale(3); }
  to   { transform: translate3d(9vw, 7vh, 0) scale(3.54); }
}
@keyframes blob-b {
  from { transform: translate3d(0, 0, 0) scale(3.3); }
  to   { transform: translate3d(-8vw, -6vh, 0) scale(2.82); }
}
@keyframes blob-c {
  from { transform: translate3d(0, 0, 0) scale(2.88); }
  to   { transform: translate3d(-6vw, 8vh, 0) scale(3.42); }
}

/* Milky-Way band, galactic core and star dust (elements injected by main.js) */
.galaxy {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.galaxy-band {
  position: absolute; left: 50%; top: 50%;
  width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
  will-change: transform;
  background:
    radial-gradient(ellipse 34% 5.5% at 50% 50%, rgba(130, 140, 235, 0.06), transparent 72%),
    radial-gradient(ellipse 52% 11% at 50% 50%, rgba(105, 105, 235, 0.06), rgba(135, 60, 215, 0.04) 55%, transparent 74%),
    radial-gradient(ellipse 68% 20% at 50% 50%, rgba(80, 80, 210, 0.05), transparent 76%),
    radial-gradient(ellipse 10% 5.5% at 50% 50%, rgba(185, 115, 245, 0.08), rgba(150, 70, 225, 0.04) 55%, transparent 75%);
  transform: rotate(-29deg) scale(1);
  animation: galaxy-sway 130s ease-in-out infinite alternate;
}
@keyframes galaxy-sway {
  from { transform: rotate(-32deg) scale(1); }
  to   { transform: rotate(-24deg) scale(1.06); }
}
.star-dust {
  position: absolute; inset: -214px;
  will-change: transform;
  background-image:
    radial-gradient(0.9px 0.9px at 31px 47px, rgba(255,255,255,0.55), transparent 100%),
    radial-gradient(0.8px 0.8px at 89px 12px, rgba(200,210,255,0.4), transparent 100%),
    radial-gradient(1px 1px at 142px 83px, rgba(230,220,255,0.5), transparent 100%),
    radial-gradient(0.7px 0.7px at 57px 129px, rgba(255,255,255,0.35), transparent 100%),
    radial-gradient(0.9px 0.9px at 173px 158px, rgba(190,180,255,0.45), transparent 100%),
    radial-gradient(0.7px 0.7px at 116px 191px, rgba(255,255,255,0.3), transparent 100%),
    radial-gradient(0.8px 0.8px at 201px 36px, rgba(215,190,255,0.4), transparent 100%);
  background-size: 214px 214px;
  animation: dust-drift 220s linear infinite;
}
@keyframes dust-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(214px, -214px, 0); }
}

.glow-star {
  position: absolute; border-radius: 50%;
  animation: star-pulse var(--tdur, 5s) ease-in-out var(--tdelay, 0s) infinite alternate;
}
.glow-star--white {
  background: radial-gradient(circle, #fff 0%, rgba(215, 225, 255, 0.9) 35%, transparent 75%);
  box-shadow: 0 0 10px 2px rgba(210, 220, 255, 0.6), 0 0 26px 7px rgba(150, 165, 255, 0.16);
}
.glow-star--blue {
  background: radial-gradient(circle, #eaf4ff 0%, rgba(130, 175, 255, 0.9) 40%, transparent 75%);
  box-shadow: 0 0 10px 2px rgba(110, 160, 255, 0.55), 0 0 26px 7px rgba(58, 123, 255, 0.18);
}
.glow-star--violet {
  background: radial-gradient(circle, #f6eaff 0%, rgba(190, 130, 250, 0.9) 40%, transparent 75%);
  box-shadow: 0 0 10px 2px rgba(180, 110, 250, 0.5), 0 0 26px 7px rgba(139, 63, 214, 0.18);
}
@keyframes star-pulse {
  from { opacity: 0.45; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1.2); }
}
body::after {
  content: "";
  position: fixed; inset: -310px; z-index: -1; pointer-events: none;
  will-change: transform, opacity;
  background-image:
    radial-gradient(5px 5px at 22px 34px, rgba(255,255,255,0.95) 0%, rgba(190,205,255,0.30) 30%, transparent 70%),
    radial-gradient(3.5px 3.5px at 128px 92px, rgba(214,230,255,0.85) 0%, rgba(150,175,255,0.22) 35%, transparent 70%),
    radial-gradient(6px 6px at 218px 156px, rgba(205,185,255,0.9) 0%, rgba(165,120,250,0.25) 30%, transparent 70%),
    radial-gradient(3px 3px at 66px 184px, rgba(255,255,255,0.7) 0%, rgba(200,210,255,0.18) 40%, transparent 70%),
    radial-gradient(4.5px 4.5px at 174px 226px, rgba(170,205,255,0.9) 0%, rgba(120,160,255,0.22) 35%, transparent 70%),
    radial-gradient(3px 3px at 250px 58px, rgba(235,220,255,0.75) 0%, rgba(190,150,250,0.18) 40%, transparent 70%),
    radial-gradient(5.5px 5.5px at 94px 274px, rgba(255,255,255,0.85) 0%, rgba(185,200,255,0.25) 32%, transparent 70%),
    radial-gradient(3px 3px at 288px 210px, rgba(185,195,255,0.65) 0%, transparent 65%);
  background-size: 310px 310px;
  animation:
    star-drift 140s linear infinite,
    twinkle 7s ease-in-out infinite alternate;
}
@keyframes star-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-310px, 310px, 0); }
}
@keyframes twinkle {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

/* ---------- shooting stars ---------- */
.shooting-stars {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.shooting-star {
  position: absolute;
  width: 150px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, #fff, rgba(190, 200, 255, 0.55) 30%, transparent);
  filter: drop-shadow(0 0 6px rgba(200, 210, 255, 0.9));
  opacity: 0;
  animation: shoot var(--dur, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.shooting-star--purple {
  background: linear-gradient(90deg, #f6ecff, rgba(178, 90, 250, 0.7) 25%, rgba(139, 63, 214, 0.35) 55%, transparent);
  filter: drop-shadow(0 0 6px rgba(185, 105, 250, 0.95));
}
.shooting-star--pink {
  background: linear-gradient(90deg, #fff0fb, rgba(246, 120, 224, 0.7) 25%, rgba(214, 63, 217, 0.35) 55%, transparent);
  filter: drop-shadow(0 0 6px rgba(246, 130, 225, 0.95));
}
.shooting-star--blue {
  background: linear-gradient(90deg, #edf5ff, rgba(100, 155, 255, 0.75) 25%, rgba(58, 123, 255, 0.38) 55%, transparent);
  filter: drop-shadow(0 0 6px rgba(110, 160, 255, 0.95));
}
@keyframes shoot {
  0%    { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--angle, -35deg)); }
  0.4%  { opacity: 1; }
  2.8%  { opacity: 0; transform: translate3d(var(--tx, -52vw), var(--ty, 36vw), 0) rotate(var(--angle, -35deg)); }
  100%  { opacity: 0; transform: translate3d(var(--tx, -52vw), var(--ty, 36vw), 0) rotate(var(--angle, -35deg)); }
}

/* ---------- featured event ---------- */
.event-card {
  position: relative;
  border-radius: calc(var(--radius) + 2px);
  padding: 2px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 20px 60px rgba(30, 12, 60, 0.6), 0 0 42px rgba(139, 63, 214, 0.22);
}
.event-card::before,
.event-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
}
.event-card::before {
  background: linear-gradient(120deg, #55b7ff, #8b3fd6 45%, #d63fd9);
}
.event-card::after {
  background: linear-gradient(300deg, #d63fd9, #3a7bff 55%, #55b7ff);
  opacity: 0;
  animation: border-fade 7s ease-in-out infinite alternate;
}
@keyframes border-fade {
  to { opacity: 1; }
}
.event-card-inner {
  position: relative; z-index: 1;
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(139, 63, 214, 0.16), transparent 60%),
    #090418;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.8rem);
  align-items: center;
}
@media (min-width: 960px) { .event-card-inner { grid-template-columns: 1.05fr 0.95fr; } }
.event-flyer {
  display: block; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(3, 8, 22, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-flyer:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 26px 60px rgba(3, 8, 22, 0.75), 0 0 34px rgba(139, 63, 214, 0.25); }
.event-flyer img { width: 100%; height: auto; display: block; }
.event-details h2 { font-size: clamp(1.45rem, 3vw, 2.05rem); }
.event-details .eyebrow {
  font-family: var(--font-head); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--magenta);
  margin-bottom: 0.8rem;
}
.event-facts { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.65rem; }
.event-facts li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--text-dim); }
.event-facts svg { width: 20px; height: 20px; flex: none; color: var(--cyan); margin-top: 0.22em; }
.event-learn { color: var(--text-dim); font-size: 0.99rem; margin-bottom: 1.6rem; }
.event-learn strong { color: var(--text); }

::selection { background: rgba(58, 123, 255, 0.45); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 600; }
p { margin: 0 0 1.1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: #7fc4ff; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 0.7rem 1.2rem;
  border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }

/* ---------- gradient text ---------- */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- nav ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(5, 2, 20, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-nav.scrolled {
  background: rgba(5, 2, 20, 0.88);
  border-bottom-color: var(--line);
}
.site-nav .wrap {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--text);
  font-family: var(--font-head); font-weight: 700; font-size: 1.12rem;
  letter-spacing: 0.04em;
}
.brand img { width: 52px; height: auto; filter: drop-shadow(0 0 10px rgba(139, 63, 214, 0.6)); }
.brand .brand-sub { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  position: relative;
  display: block; padding: 0.55rem 0.95rem;
  color: var(--text-dim); text-decoration: none; font-weight: 500; font-size: 0.98rem;
  border-radius: 10px;
  transition: color 0.25s ease, background 0.25s ease;
}
.nav-links a:hover { color: var(--text); background: rgba(58, 123, 255, 0.12); }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.25rem;
  height: 2px; border-radius: 2px; background: var(--grad);
}
.nav-cta {
  margin-left: 0.5rem;
}

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  padding: 0.5rem 0.65rem; cursor: pointer;
}
.nav-toggle .bar {
  display: block; width: 22px; height: 2px; background: var(--text);
  margin: 5px 0; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.2rem;
    background: rgba(5, 2, 20, 0.97);
    border-bottom: 1px solid var(--line);
    padding: 0.8rem 1.2rem 1.2rem;
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-links a { padding: 0.85rem 1rem; font-size: 1.05rem; }
  .nav-cta { margin: 0.5rem 0 0; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer; border: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.btn-primary {
  background: var(--grad); color: #071021;
  box-shadow: 0 6px 26px rgba(139, 63, 214, 0.42);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(139, 63, 214, 0.6); color: #071021; }
.btn-ghost {
  background: rgba(58, 123, 255, 0.08); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(120, 140, 235, 0.35);
}
.btn-ghost:hover { background: rgba(58, 123, 255, 0.18); transform: translateY(-2px); color: #fff; }
.btn-sm { padding: 0.55rem 1.15rem; font-size: 0.92rem; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(4rem, 10vh, 7rem)) 0 clamp(4rem, 9vh, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero-inner { position: relative; z-index: 3; max-width: 860px; }
.hero .kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-head); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan);
  border: 1px solid rgba(85, 183, 255, 0.35);
  background: rgba(85, 183, 255, 0.08);
  padding: 0.45rem 1rem; border-radius: 999px; margin-bottom: 1.5rem;
}
.hero .kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { opacity: 0.35; } }
.hero p.lede { font-size: clamp(1.08rem, 2vw, 1.3rem); color: var(--text-dim); max-width: 46em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.hero-actions .btn { padding: 0.7rem 1.35rem; font-size: 0.94rem; }

.orb {
  position: absolute; border-radius: 50%; filter: blur(52px); z-index: 0;
  opacity: 0.5; pointer-events: none;
}
.orb-1 { width: 560px; height: 560px; top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(130, 60, 225, 0.6), rgba(58, 123, 255, 0.28) 45%, transparent 68%);
  animation: drift1 16s ease-in-out infinite alternate; }
.orb-2 { width: 500px; height: 500px; bottom: -180px; left: -140px;
  background: radial-gradient(circle, rgba(160, 43, 214, 0.55), rgba(214, 63, 217, 0.16) 50%, transparent 68%);
  animation: drift2 19s ease-in-out infinite alternate; }
.orb-3 { width: 380px; height: 380px; top: 30%; left: 38%;
  background: radial-gradient(circle, rgba(58, 123, 255, 0.32), transparent 65%);
  animation: drift1 22s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(-60px, 50px) scale(1.12); } }
@keyframes drift2 { to { transform: translate(70px, -40px) scale(1.08); } }

.hero-star {
  position: absolute; z-index: 0; right: -4%; top: 12%;
  width: min(46vw, 560px); opacity: 0.16; pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(139,63,214,0.45));
}

.hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 920px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.hero-logo { display: flex; justify-content: center; }
.hero-logo img {
  width: min(100%, 540px);
  filter: drop-shadow(0 0 30px rgba(139, 63, 214, 0.55)) drop-shadow(0 0 90px rgba(58, 123, 255, 0.35));
  animation: logo-float 7s ease-in-out infinite;
}
@keyframes logo-float { 50% { transform: translateY(-14px); } }

/* mobile: logo leads the page */
@media (max-width: 919px) {
  .hero { padding-top: calc(var(--nav-h) + 1.6rem); }
  .hero-grid { gap: 1.4rem; }
  .hero-logo { order: -1; }
  .hero-logo img { width: min(90vw, 420px); }
  /* logo already announces the brand — drop the redundant pill (home hero only) */
  .hero-grid .kicker { display: none; }
  /* centered, evenly wrapped hero text beneath the centered logo */
  .hero-grid .hero-inner { text-align: center; }
  .hero-grid .hero-inner h1 { font-size: clamp(1.75rem, 7.4vw, 2.4rem); }
  .hero-grid .lede { margin-inline: auto; }
  .hero-grid .hero-actions { justify-content: center; }
}

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(3.4rem, 8vh, 5.5rem) 0; }
.section-alt {
  background:
    radial-gradient(900px 480px at 85% 0%, rgba(139, 63, 214, 0.12), transparent 60%),
    radial-gradient(700px 420px at 8% 90%, rgba(58, 123, 255, 0.10), transparent 60%),
    rgba(14, 10, 42, 0.55);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head { max-width: 760px; margin-bottom: clamp(1.8rem, 4vh, 3rem); }
.section-head .eyebrow {
  font-family: var(--font-head); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: 0.8rem;
}
.section-head p { color: var(--text-dim); }

/* ---------- cards ---------- */
.grid { display: grid; gap: 1.3rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad); opacity: 0; transition: opacity 0.3s ease;
}
.card:hover { transform: translateY(-6px); border-color: rgba(139, 63, 214, 0.5); box-shadow: 0 18px 44px rgba(30, 12, 60, 0.55), 0 0 30px rgba(139, 63, 214, 0.12); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--text-dim); margin-bottom: 0; }

.card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: rgba(139, 63, 214, 0.14);
  border: 1px solid rgba(139, 63, 214, 0.35);
  color: var(--cyan);
}
.card-icon svg { width: 26px; height: 26px; }

/* ---------- split layout ---------- */
.split { display: grid; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
@media (min-width: 920px) { .split { grid-template-columns: 1fr 1fr; } }
.split .media { position: relative; }
.split .media img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(3, 8, 22, 0.7);
}
.media-glow::after {
  content: ""; position: absolute; inset: -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,63,214,0.32), rgba(58,123,255,0.18) 55%, transparent 72%);
  filter: blur(30px);
}

/* ---------- team ---------- */
.team-card {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover { transform: translateY(-6px); border-color: rgba(139,63,214,0.5); box-shadow: 0 18px 44px rgba(30,12,60,0.55), 0 0 30px rgba(139,63,214,0.12); }
.team-photo { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.6s ease; }
.team-card:hover .team-photo img { transform: scale(1.045); }
.team-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(6,10,23,0.92), transparent);
}
.team-meta { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.1rem; z-index: 2; }
.team-meta .role {
  font-family: var(--font-head); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin: 0 0 0.2rem;
}
.team-meta h3 { margin: 0; font-size: 1.5rem; }
.team-body { padding: 1.5rem 1.6rem 1.8rem; }
.team-body p { color: var(--text-dim); margin-bottom: 0; }

/* ---------- services ---------- */
.program {
  display: grid; gap: 1.6rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem);
  margin-bottom: 1.6rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.program:hover { border-color: rgba(139,63,214,0.45); box-shadow: 0 18px 44px rgba(30,12,60,0.5), 0 0 30px rgba(139,63,214,0.1); }
@media (min-width: 880px) { .program { grid-template-columns: 64px 1fr; } }
.program-num {
  font-family: var(--font-head); font-size: 2rem; font-weight: 700;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.program h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.program .label {
  font-family: var(--font-head); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan);
  display: block; margin: 1.2rem 0 0.35rem;
}
.program p { color: var(--text-dim); margin-bottom: 0; }
.note {
  border-left: 3px solid var(--purple);
  background: rgba(139, 63, 214, 0.08);
  border-radius: 0 12px 12px 0;
  padding: 0.9rem 1.2rem; margin-top: 1.2rem;
  color: var(--text-dim); font-size: 0.98rem;
}

/* ---------- blog ---------- */
.post-card {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover { transform: translateY(-6px); border-color: rgba(139,63,214,0.5); box-shadow: 0 18px 44px rgba(30,12,60,0.55), 0 0 30px rgba(139,63,214,0.12); color: var(--text); }
.post-thumb { aspect-ratio: 16 / 9; overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.post-card:hover .post-thumb img { transform: scale(1.05); }
.post-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.post-body h3 { margin: 0; font-size: 1.22rem; }
.post-body .date { font-size: 0.86rem; color: var(--text-dim); letter-spacing: 0.06em; }
.post-body .readmore { margin-top: 0.4rem; font-weight: 600; color: var(--cyan); font-size: 0.95rem; }

.article {  max-width: 800px; }
.article-hero { border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 2.2rem; box-shadow: 0 24px 60px rgba(3,8,22,0.7); }
.comic-panel {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin: 1.6rem 0 2.1rem;
  box-shadow: 0 18px 44px rgba(20, 10, 50, 0.55), 0 0 26px rgba(139, 63, 214, 0.10);
}
.article h2 { margin-top: 2.2rem; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.article h3 { margin-top: 1.8rem; }
.article p, .article li { color: var(--text-dim); }
.article li { margin-bottom: 0.55rem; }
.article strong { color: var(--text); }
.article .prompt-block {
  background: rgba(85, 183, 255, 0.07);
  border: 1px solid rgba(85, 183, 255, 0.25);
  border-radius: 14px; padding: 1.2rem 1.4rem; margin: 1.4rem 0;
  font-size: 0.99rem;
}
.breadcrumb { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 1.6rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }
.breadcrumb a { color: var(--text-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--cyan); }

.article .byline { color: var(--text-dim); font-size: 0.95rem; letter-spacing: 0.04em; margin-bottom: 1.6rem; }
.article table {
  width: 100%; border-collapse: collapse; margin: 1.4rem 0 2rem;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  font-size: 0.98rem;
}
.article th {
  text-align: left; font-family: var(--font-head); font-size: 0.92rem;
  letter-spacing: 0.06em; color: var(--text);
  background: rgba(139, 63, 214, 0.16);
  padding: 0.8rem 1rem; border: 1px solid var(--line);
}
.article td { padding: 0.8rem 1rem; border: 1px solid var(--line); color: var(--text-dim); vertical-align: top; }
.article tr:nth-child(even) td { background: rgba(58, 123, 255, 0.05); }
.img-credit { color: var(--text-dim); font-size: 0.85rem; margin-top: 2rem; opacity: 0.8; }

/* ---------- charity ---------- */
.charity-card { text-align: left; }
.charity-card img { border-radius: 12px; border: 1px solid var(--line); margin-bottom: 1.1rem; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  text-align: center;
  background:
    radial-gradient(700px 360px at 50% 120%, rgba(160, 43, 214, 0.30), transparent 70%),
    radial-gradient(700px 360px at 50% -20%, rgba(58, 123, 255, 0.26), transparent 70%),
    radial-gradient(420px 260px at 18% 50%, rgba(214, 63, 217, 0.10), transparent 70%),
    rgba(14, 10, 42, 0.6);
  border-top: 1px solid var(--line);
}
.cta-band h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); max-width: 22em; margin-inline: auto; }
.cta-band .contact-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem;
}
.contact-chip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: rgba(58, 123, 255, 0.1);
  border: 1px solid rgba(120, 140, 235, 0.3);
  border-radius: 999px; padding: 0.75rem 1.5rem;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.02rem;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.contact-chip:hover { transform: translateY(-2px); background: rgba(58,123,255,0.2); border-color: rgba(58,123,255,0.55); color: #fff; }
.contact-chip svg { width: 19px; height: 19px; color: var(--cyan); flex: none; }
.cta-band .contact-name { margin-top: 1.6rem; color: var(--text-dim); font-size: 1rem; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.6rem 0 2.2rem;
  background: rgba(5, 3, 19, 0.85);
}
.site-footer .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.8rem; }
.footer-brand img { width: 64px; }
.footer-legal { color: var(--text-dim); font-size: 0.9rem; line-height: 1.9; max-width: 560px; }
.footer-legal a { color: var(--text-dim); }
.footer-legal a:hover { color: var(--cyan); }
.footer-nav ul { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-nav a { color: var(--text-dim); text-decoration: none; font-size: 0.95rem; }
.footer-nav a:hover { color: var(--text); }

/* ---------- reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

[data-parallax] { will-change: transform; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .hero-actions .btn { width: auto; justify-content: center; padding: 0.65rem 1.2rem; font-size: 0.9rem; }
}