/* ===================================================================
   Myelin v2 — dark hero, brain video bg, Inter, liquid glass nav,
   Studio-style giant heading, Higgsfield-generated background.
   =================================================================== */

:root {
  --bg:           #000;
  --ink:          #fff;
  --ink-soft:     rgba(255,255,255,0.72);
  --ink-mute:     rgba(255,255,255,0.5);
  --hair:         rgba(255,255,255,0.12);

  /* iridescent palette */
  --c-blue:       #5b6cff;
  --c-indigo:     #7a5bff;
  --c-violet:     #b08cff;
  --c-pink:       #ff7ec1;
  --c-rose:       #ff9a7e;
  --c-cyan:       #7ecbff;

  /* type */
  --sans:         "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif:        "Instrument Serif", ui-serif, Georgia, serif;

  /* layout */
  --maxw:         1200px;
  --pad:          clamp(20px, 4vw, 56px);
  --radius:       22px;
  --radius-sm:    14px;
  --radius-pill:  9999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ===================================================================
   LIQUID GLASS (from supplied source — adapted to dark theme)
   =================================================================== */
.liquid-glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-pill);
}
.liquid-glass::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.liquid-glass-strong, .btn-glass-strong {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: none;
  box-shadow:
    4px 4px 12px rgba(0,0,0,0.25),
    inset 0 1px 1px rgba(255,255,255,0.18);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-pill);
}
.liquid-glass-strong::before, .btn-glass-strong::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.22) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.22) 80%,
    rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* video background -------------------------------------------------- */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-video.ready { opacity: 1; }
.hero-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(120,130,255,0.15), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(255,140,200,0.12), transparent 60%),
    #000;
  transition: opacity .6s ease;
}
.hero-video.ready ~ .hero-fallback { opacity: 0; }
.hero-orb {
  position: absolute; left: 50%; top: 50%;
  width: min(70vw, 720px); height: min(70vw, 720px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 25%, transparent 50%),
    conic-gradient(from 200deg, #5b6cff, #b08cff, #ff7ec1, #7ecbff, #5b6cff);
  filter: blur(40px) saturate(140%);
  opacity: 0.55;
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 30%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 25%, transparent 65%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* nav --------------------------------------------------------------- */
.nav {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 10px 14px 10px 20px;
  width: min(calc(100% - 40px), 980px);
  border-radius: 9999px;
  /* dark-tinted glass so it stays legible over both dark + light sections */
  background: rgba(18, 20, 28, 0.62);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow:
    0 12px 36px -14px rgba(0,0,0,0.55),
    inset 0 1px 1px rgba(255,255,255,0.16);
}
.nav::before {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0)    50%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,255,255,0.55) 100%) !important;
}
.nav .nav-brand,
.nav .nav-links a,
.nav .link-quiet,
.nav .btn-glass-strong { color: #fff; }
.nav .nav-links a { color: rgba(255,255,255,0.78); }
.nav .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.10); }
.nav .link-quiet { color: rgba(255,255,255,0.78); }
.nav .link-quiet:hover { color: #fff; }
.nav .btn-glass-strong {
  background: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.22),
    0 4px 14px -6px rgba(0,0,0,0.5);
}
.nav .btn-glass-strong:hover {
  background: rgba(255,255,255,0.18);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-weight: 600; font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brand-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0%, rgba(255,255,255,0.3) 30%, transparent 60%),
    conic-gradient(from 220deg, var(--c-blue), var(--c-violet), var(--c-pink), var(--c-cyan), var(--c-blue));
  box-shadow: inset 0 0 6px rgba(255,255,255,0.55), 0 0 14px rgba(120,140,255,0.45);
  filter: saturate(150%);
}
.brand-word { font-family: var(--sans); }
.nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px; flex: 1; justify-content: center;
}
.nav-links a {
  padding: 8px 14px; border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.link-quiet {
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); padding: 8px 6px;
}
.link-quiet:hover { color: var(--ink); }

/* nav buttons inherit btn-glass-strong */
.nav .btn-glass-strong {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); padding: 10px 16px;
}
.nav-toggle { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

/* (eyebrow chip + stats row removed per user request) */

/* giant headline (bottom-right) ------------------------------------- */
/* "Myelin" mark — left side, huge company name */
.hero-mark {
  position: absolute; z-index: 10;
  left: var(--pad); top: 24vh;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
  pointer-events: none;
}
/* "Connect / The future." — bottom right, smaller so it clears the brain (no background) */
.hero-headline {
  position: absolute; z-index: 10;
  right: var(--pad);
  bottom: 12vh;
  text-align: right;
  margin: 0;
  font-size: clamp(42px, 6.8vw, 112px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.0;
  letter-spacing: -0.015em;
  text-transform: none;
  color: #fff;
  font-family: var(--serif);
  pointer-events: none;
}
/* masked word reveal — padding-bottom keeps descenders (y, g, p) from clipping */
.hero-mark .reveal, .hero-headline .reveal { display: block; overflow: hidden; padding-bottom: 0.16em; }
.hero-mark .reveal > span, .hero-headline .reveal > span {
  display: inline-block;
  transform: translateY(120%);
}
.loaded .hero-mark .reveal > span,
.loaded .hero-headline .reveal > span {
  animation: revealUp .9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-mark .reveal > span { animation-delay: .30s; }
.hero-headline .reveal:nth-child(1) > span { animation-delay: .46s; }
.hero-headline .reveal:nth-child(2) > span { animation-delay: .60s; }
@keyframes revealUp { to { transform: translateY(0); } }

/* centered subtitle + buttons cluster (bottom) ---------------------- */
.hero-cluster {
  position: absolute; z-index: 10;
  left: 50%; bottom: var(--pad);
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}
.hero-sub {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
  opacity: 0;
}
.loaded .hero-sub { animation: fadeUp .7s .8s both ease; }

.hero-cta {
  display: flex; gap: 12px;
  opacity: 0;
}
.loaded .hero-cta { animation: fadeUp .7s 1.0s both ease; }
.btn-glass, .btn-glass-strong {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  cursor: pointer; border: 0;
  border-radius: 9999px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .25s;
}
.btn-glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.12);
  position: relative; overflow: hidden;
}
.btn-glass::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.btn-glass:hover, .btn-glass-strong:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.22),
    0 0 24px 2px rgba(255,255,255,0.10);
}
.btn-glass:active, .btn-glass-strong:active { transform: scale(0.98); }
.btn-lg { padding: 16px 30px; font-size: 13.5px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ===================================================================
   LIGHT ZONE — everything below the hero
   (restores the original wireframe light-iridescent flow)
   =================================================================== */
.light-zone {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, transparent 50%),
    linear-gradient(180deg, #f7f8fb 0%, #eef0f5 100%);
  color: #0e1014;
  overflow: hidden;
  isolation: isolate;
}
/* drifting iridescent orbs across the light zone */
.light-zone::before,
.light-zone::after,
.light-zone .light-orb-c {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(90px) saturate(140%);
  opacity: 0.55; pointer-events: none; z-index: 0;
  mix-blend-mode: screen;
}
.light-zone::before {
  width: 720px; height: 720px; top: -100px; left: -160px;
  background: radial-gradient(circle at 30% 40%,
    var(--c-blue) 0%, var(--c-indigo) 35%, transparent 70%);
  animation: drift1 28s ease-in-out infinite;
}
.light-zone::after {
  width: 620px; height: 620px; top: 30vh; right: -180px;
  background: radial-gradient(circle at 60% 50%,
    var(--c-pink) 0%, var(--c-violet) 45%, transparent 75%);
  animation: drift2 34s ease-in-out infinite;
}
@keyframes drift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(60px,40px) scale(1.06); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-40px,80px) scale(1.08); }
}

/* light-theme text colors inside the light zone */
.light-zone .h2 { color: #0e1014; }
.light-zone .h2 em { color: #4a4d57; }
.light-zone .body { color: #4a4d57; }
.light-zone .band-sub { color: #4a4d57; }
.light-zone .kicker { color: var(--c-blue); }
.light-zone .link-arrow { color: #0e1014; }

/* light-theme buttons */
.light-zone .btn-glass-strong {
  color: #0e1014;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.5));
  box-shadow:
    0 10px 28px -10px rgba(60,40,120,0.25),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(120,100,180,0.1);
}
.light-zone .btn-glass-strong::before {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.9) 0%, rgba(180,180,220,0.4) 50%,
    rgba(255,255,255,0.9) 100%);
}

/* light-theme pillar tiles */
.light-zone .pillar {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 4px 16px -8px rgba(60,40,120,0.12);
}
.light-zone .pillar:hover {
  background: rgba(255,255,255,0.78);
  box-shadow: 0 12px 30px -14px rgba(60,40,120,0.22);
}
.light-zone .pillar.open { background: rgba(255,255,255,0.9); }
.light-zone .pillar-label { color: #0e1014; }
.light-zone .pillar-num { color: #8589a0; }
.light-zone .pillar-desc { color: #4a4d57; }

/* light-theme speaker / preview / glass cards */
.light-zone .liquid-glass,
.light-zone .speaker,
.light-zone .community-preview,
.light-zone .footer-newsletter,
.light-zone .about-visual,
.light-zone .travel-visual {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 14px 40px -16px rgba(40,30,80,0.18),
    0 2px 8px -2px rgba(40,30,80,0.08),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.light-zone .liquid-glass::before { display: none; }
.light-zone .cp-post {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(14,16,20,0.06);
}
.light-zone .cp-name { color: #0e1014; }
.light-zone .cp-meta { color: #8589a0; }
.light-zone .cp-text { color: #4a4d57; }
.light-zone .cp-actions { color: #8589a0; }
.light-zone .speaker h3 { color: #0e1014; }
.light-zone .speaker-role { color: #4a4d57; }

/* light-theme footer */
.light-zone .footer { color: #0e1014; }
.light-zone .footer-tag { color: #4a4d57; }
.light-zone .footer-cols h4 { color: #8589a0; }
.light-zone .footer-cols a { color: #4a4d57; }
.light-zone .footer-cols a:hover { color: #0e1014; }
.light-zone .footer-newsletter h4 { color: #0e1014; }
.light-zone .footer-newsletter p { color: #4a4d57; }
.light-zone .footer-newsletter input {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(14,16,20,0.08);
  color: #0e1014;
}
.light-zone .footer-newsletter input::placeholder { color: #8589a0; }
.light-zone .footer-base { color: #8589a0; }
.light-zone .footer-base a { color: #8589a0; }
.light-zone .footer-base a:hover { color: #0e1014; }
.light-zone .footer-inner { border-bottom-color: rgba(14,16,20,0.08); }

/* ===================================================================
   BANDS (page sections — structure only; colors come from light-zone)
   =================================================================== */
.band {
  padding: clamp(80px, 9vw, 140px) var(--pad);
  display: flex; justify-content: center;
  position: relative; z-index: 1;
}
.band-inner { max-width: var(--maxw); width: 100%; }
.band-head { margin-bottom: 56px; max-width: 760px; }
.band-head.row { display: flex; align-items: end; justify-content: space-between; max-width: none; gap: 24px; flex-wrap: wrap; }
.band-sub { color: var(--ink-soft); margin-top: 12px; font-size: 14px; }

.kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin: 0 0 16px;
  font-weight: 600;
}
.h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}
.h2 em { font-style: italic; font-family: var(--serif); font-weight: 400; color: var(--ink-soft); }
.body { color: var(--ink-soft); font-size: 16px; max-width: 560px; line-height: 1.65; margin-top: 20px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  margin-top: 24px;
}
.link-arrow span { transition: transform .2s; }
.link-arrow:hover span { transform: translateX(4px); }

/* about ----------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.about-visual { aspect-ratio: 1/1; max-width: 460px; padding: 0; overflow: hidden; position: relative; border-radius: 28px; }
.about-orb {
  position: absolute; inset: 6%;
  background:
    radial-gradient(circle at 35% 35%, #ffffff 0%, rgba(255,255,255,0.7) 18%, transparent 35%),
    conic-gradient(from 200deg at 50% 55%,
      var(--c-blue), var(--c-indigo), var(--c-violet), var(--c-pink), var(--c-cyan), var(--c-blue));
  filter: blur(8px) saturate(140%);
  border-radius: 50%;
  animation: spin2 36s linear infinite;
}
@keyframes spin2 { to { transform: rotate(360deg); } }

/* pillar grid ------------------------------------------ */
.pillar-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.pillar {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  padding: 18px 16px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .25s;
  position: relative; overflow: hidden;
}
.pillar:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 12px 30px -14px rgba(120,140,255,0.4);
}
.pillar-head { display: flex; align-items: center; gap: 10px; }
.pillar-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), transparent 60%),
    conic-gradient(from 200deg, var(--c-blue), var(--c-violet), var(--c-pink), var(--c-cyan), var(--c-blue));
  box-shadow: inset 0 0 6px rgba(255,255,255,0.5), 0 2px 8px rgba(120,120,200,0.3);
  flex: 0 0 auto;
}
.pillar-label {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.pillar-num {
  margin-left: auto;
  font-size: 10px; color: var(--ink-mute);
  font-weight: 500; letter-spacing: 0.1em;
}
.pillar-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,.2,.2,1), margin-top .35s, opacity .25s;
  opacity: 0;
}
.pillar.open .pillar-desc { max-height: 260px; opacity: 1; margin-top: 4px; }
.pillar.open { background: rgba(255,255,255,0.10); }

/* speakers ------------------------------------------- */
.speaker-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.speaker { padding: 22px; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid var(--hair); }
.speaker-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0%, rgba(255,255,255,0.5) 35%, transparent 65%),
    conic-gradient(from 220deg, var(--c-blue), var(--c-violet), var(--c-pink), var(--c-cyan), var(--c-blue));
  box-shadow: inset 0 0 6px rgba(255,255,255,0.5), 0 4px 14px rgba(120,120,200,0.35);
  margin-bottom: 16px;
}
.speaker h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
.speaker-role { margin: 0; color: var(--ink-soft); font-size: 13px; }
.speaker-cta { background: rgba(255,255,255,0.02); border-style: dashed; }

/* community ------------------------------------------ */
.community-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.community-preview { padding: 22px; display: flex; flex-direction: column; gap: 14px; border-radius: 24px; background: rgba(255,255,255,0.04); border: 1px solid var(--hair); }
.cp-post { display: flex; gap: 14px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid var(--hair); }
.cp-av {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(from 200deg, var(--c-blue), var(--c-indigo), var(--c-violet), var(--c-blue));
  filter: saturate(140%);
}
.cp-av-2 { background: conic-gradient(from 60deg, var(--c-pink), var(--c-rose), var(--c-violet), var(--c-pink)); }
.cp-body { flex: 1; }
.cp-name { margin: 0 0 6px; font-weight: 600; font-size: 13px; }
.cp-meta { color: var(--ink-mute); font-weight: 400; }
.cp-text { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.cp-actions { display: flex; gap: 16px; font-size: 12px; color: var(--ink-mute); }

/* travel --------------------------------------------- */
.travel-grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.travel-visual { aspect-ratio: 4/3; max-width: 460px; padding: 0; position: relative; overflow: hidden; border-radius: 28px; }
.travel-orb {
  position: absolute; inset: 12%;
  background:
    radial-gradient(circle at 60% 30%, #ffffff 0%, transparent 35%),
    conic-gradient(from 60deg at 50% 60%,
      var(--c-pink), var(--c-rose), var(--c-violet), var(--c-blue), var(--c-pink));
  filter: blur(6px) saturate(140%);
  border-radius: 50%;
  animation: spin2 40s linear infinite reverse;
}

/* footer ---------------------------------------------- */
.footer {
  padding: clamp(60px, 7vw, 100px) var(--pad) 30px;
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1;
}
.footer-inner {
  max-width: var(--maxw); width: 100%;
  display: grid; grid-template-columns: 1.1fr 2fr 1.2fr;
  gap: 60px; padding-bottom: 60px;
  border-bottom: 1px solid var(--hair);
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-tag { color: var(--ink-soft); font-size: 14px; max-width: 260px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; font-size: 13px; }
.footer-cols h4 { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; font-weight: 600; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-cols a { color: var(--ink-soft); }
.footer-cols a:hover { color: var(--ink); }
.footer-newsletter { padding: 22px; border-radius: 22px; background: rgba(255,255,255,0.04); border: 1px solid var(--hair); }
.footer-newsletter h4 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.footer-newsletter p { margin: 0 0 14px; color: var(--ink-soft); font-size: 13px; }
.footer-newsletter form { display: flex; gap: 8px; }
.footer-newsletter input {
  flex: 1; min-width: 0;
  padding: 10px 14px;
  border-radius: 9999px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.04);
  font: inherit; color: var(--ink); outline: none;
}
.footer-newsletter input::placeholder { color: var(--ink-mute); }
.footer-newsletter input:focus { border-color: var(--c-blue); }
.footer-base {
  max-width: var(--maxw); width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-mute);
  margin-top: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-base a { color: var(--ink-mute); }
.footer-base a:hover { color: var(--ink); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 900px) {
  .nav-links, .nav-cta .link-quiet { display: none; }
  .nav-toggle { display: block; }
  /* stack centered on phones: mark up top, headline lower, both clear of buttons */
  .hero-mark {
    left: var(--pad); right: var(--pad); top: 12vh;
    text-align: center; font-size: clamp(40px, 12vw, 84px);
  }
  .hero-headline {
    font-size: clamp(40px, 12vw, 84px);
    bottom: 28vh; left: var(--pad); right: var(--pad);
    text-align: center;
  }
  .hero-sub { font-size: 11px; letter-spacing: 0.15em; }
  /* cluster sits above the browser chrome; buttons stack as full-width pills */
  .hero-cluster {
    gap: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
    width: min(360px, 86vw); padding: 0;
  }
  .hero-cluster .hero-cta { flex-direction: column; width: 100%; gap: 10px; }
  .hero-cluster .hero-cta .btn-lg { width: 100%; justify-content: center; padding: 15px 24px; }
  .scroll-hint { display: none; }   /* avoid overlapping the buttons on phones */
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .community-grid, .travel-grid { grid-template-columns: 1fr; }
  .speaker-row { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .pillar-grid { grid-template-columns: 1fr 1fr; }
  .speaker-row { grid-template-columns: 1fr; }
  .stats { gap: 14px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-orb, .about-orb, .travel-orb { animation: none !important; }
  .hero-headline .reveal > span { transform: translateY(0) !important; animation: none !important; }
  .zoom-headline .reveal > span { transform: translateY(0) !important; animation: none !important; }
  .hero-cta, .hero-sub { animation: none !important; }
  .light-zone::before, .light-zone::after { animation: none !important; }
  .loader .brand-dot, .scroll-hint { animation: none !important; }
  .light-zone, .band, .footer { transition: none !important; }
}

/* ===================================================================
   LOADER — full-screen, preloads all media, reveals everything together
   =================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: #000;
  transition: opacity .45s ease, visibility .45s ease;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
/* lock scroll until media is ready */
body:not(.loaded) { overflow: hidden; height: 100vh; }
.loader-inner {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  width: min(78vw, 320px);
}
.loader-brand { display: inline-flex; align-items: center; gap: 12px; }
.loader-word {
  font-family: var(--sans); font-weight: 600; font-size: 20px;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.loader-logo { width: auto; height: 40px; }
.loader .brand-dot {
  width: 26px; height: 26px;
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1);    filter: saturate(150%); }
  50%      { transform: scale(1.18); filter: saturate(220%) brightness(1.2); }
}
.loader-bar {
  width: 100%; height: 3px; border-radius: 9999px;
  background: rgba(255,255,255,0.12); overflow: hidden;
}
.loader-fill {
  display: block; height: 100%; width: 0%; border-radius: inherit;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-violet), var(--c-pink));
  box-shadow: 0 0 12px rgba(176,140,255,0.6);
  transition: width .25s ease;
}
.loader-pct {
  font-size: 11px; letter-spacing: 0.22em; color: rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums;
}

/* ===================================================================
   ZOOM HERO — scroll pushes the camera into the brain → firing neurons
   =================================================================== */
.hero-scroll { position: relative; height: 560vh; background: #000; }
.hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* layer 1 — the crystal brain */
.brain-wrap {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transform-origin: center center;
  will-change: transform, filter, opacity;
}
.brain-video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s ease;
}
.brain-video.ready { opacity: 1; }
.brain-fallback { position: absolute; inset: 0; transition: opacity .8s ease; }
.brain-video.ready ~ .brain-fallback { opacity: 0; }

/* layer 2 — firing neuron field */
.neuro-layer {
  position: absolute; inset: 0; opacity: 0;
  transform-origin: center center;
  will-change: opacity, transform;
}
.neuro-video, .neuro-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.neuro-video { object-fit: cover; }
.neuro-video[hidden], .neuro-canvas[hidden] { display: none; }

.zoom-vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.55) 100%);
}

/* hero copy (fades up + out as you scroll in) */
.hero-copy {
  position: absolute; left: 0; right: 0; bottom: 15vh; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center; padding: 0 var(--pad);
  will-change: opacity, transform;
}
.zoom-headline {
  margin: 0; font-family: var(--sans); font-weight: 600;
  font-size: clamp(40px, 7vw, 96px); line-height: 0.9;
  letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink);
}
.zoom-headline .reveal { display: block; overflow: hidden; }
.zoom-headline .reveal > span { display: inline-block; transform: translateY(110%); }
.loaded .zoom-headline .reveal > span { animation: revealUp .85s cubic-bezier(0.22,1,0.36,1) forwards; }
.loaded .zoom-headline .reveal:nth-child(1) > span { animation-delay: .10s; }
.loaded .zoom-headline .reveal:nth-child(2) > span { animation-delay: .24s; }
.zoom-headline .grad > span {
  background: linear-gradient(100deg, var(--c-blue), var(--c-violet), var(--c-pink), var(--c-rose));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic; font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
}

/* "inside the brain" copy */
.hero-inside {
  position: absolute; left: 0; right: 0; top: 42%; z-index: 9;
  text-align: center; padding: 0 var(--pad); opacity: 0;
  will-change: opacity, transform;
}
.hero-inside .ik {
  margin: 0 0 10px; font-size: 12px; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.hero-inside h2 {
  margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(30px, 5vw, 64px); color: #fff;
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 4vh; z-index: 10;
  transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* reduced-motion / no-JS: collapse the long scroll track to a normal hero */
.hero-scroll.reduced { height: 100vh; }
.hero-scroll.reduced .hero-stage { position: relative; }
.hero-scroll.reduced .neuro-layer,
.hero-scroll.reduced .hero-inside,
.hero-scroll.reduced .scroll-hint { display: none; }

/* ===================================================================
   SMOOTH BRIDGE — dark neuron scene → light page (into About)
   =================================================================== */
.zone-bridge {
  position: relative; z-index: 1;
  height: 60vh; margin-top: -1px; pointer-events: none;
  /* dark at top (continues the neuron black) → fades to the light-zone bg */
  background: linear-gradient(180deg,
    #05060a 0%, #07080e 22%, rgba(20,22,30,0.55) 55%, rgba(247,248,251,0) 100%);
}

/* ===================================================================
   MOBILE MENU (full-screen overlay)
   =================================================================== */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  background: rgba(8, 9, 14, 0.86);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mobile-menu a {
  display: inline-block; padding: 12px 18px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff;
}
.mobile-menu .btn-glass-strong { margin-top: 10px; }
body.menu-open { overflow: hidden; }

/* ===================================================================
   MOBILE TUNING for the zoom hero
   =================================================================== */
@media (max-width: 900px) {
  .mobile-menu { display: flex; }
  /* fill the screen on mobile the same way it does on desktop */
  .brain-video { object-fit: cover; }
  /* perf: the big animated blurred orbs are expensive on phones — make them static + lighter */
  .light-zone::before, .light-zone::after {
    animation: none !important;
    filter: blur(60px) saturate(130%);
    opacity: 0.4;
  }
}
@media (min-width: 901px) {
  .mobile-menu { display: none; }
}
@media (max-width: 540px) {
  .hero-scroll { height: 460vh; }
}

/* ===================================================================
   SUB-PAGE COMPONENTS (Event / Speakers / Travel / Tickets / About)
   Reuses the home theme: dark page-hero → light-zone bands → footer.
   =================================================================== */

/* dark hero band at the top of every sub-page */
.page-hero {
  position: relative; min-height: 60vh;
  display: flex; align-items: flex-end;
  overflow: hidden; background: #000;
  padding: 140px var(--pad) clamp(44px, 6vw, 84px);
}
.page-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(120,130,255,0.16), transparent 60%),
    radial-gradient(90% 70% at 90% 100%, rgba(255,140,200,0.13), transparent 60%),
    #000;
}
.page-hero-bg .hero-orb { opacity: 0.4; }
.page-hero .hero-vignette { z-index: 1; }
.page-hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.page-hero .kicker { color: var(--c-cyan); }
.page-title {
  margin: 6px 0 0; font-family: var(--sans); font-weight: 600;
  font-size: clamp(40px, 7vw, 100px); line-height: 0.9;
  letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink);
}
.page-title .grad {
  background: linear-gradient(100deg, var(--c-blue), var(--c-violet), var(--c-pink), var(--c-rose));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic; font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
}
.page-lead { color: var(--ink-soft); max-width: 580px; margin-top: 18px; font-size: 16px; line-height: 1.6; }

/* generic two-column band layout */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

/* FORMAT icon row (Event) */
.format-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.format-item { padding: 24px 20px; border-radius: 18px; display: flex; flex-direction: column; gap: 12px; }
.format-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), transparent 60%),
    conic-gradient(from 200deg, var(--c-blue), var(--c-violet), var(--c-pink), var(--c-cyan), var(--c-blue));
  box-shadow: inset 0 0 6px rgba(255,255,255,0.5), 0 2px 8px rgba(120,120,200,0.3);
}
.format-item h3 { margin: 0; font-size: 15px; font-weight: 600; }
.format-item p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* SCHEDULE (Event) */
.schedule { display: flex; flex-direction: column; }
.sched-row {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 20px; align-items: center;
  padding: 20px 4px; border-bottom: 1px solid var(--hair);
}
.sched-row:first-child { border-top: 1px solid var(--hair); }
.sched-time { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; }
.sched-title { font-size: 15px; }
.sched-tag {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  padding: 5px 12px; border-radius: 9999px; white-space: nowrap;
  background: rgba(120,130,255,0.12); color: var(--c-indigo);
}
.light-zone .sched-tag { background: rgba(120,130,255,0.14); color: #5b54c8; }

/* VENUE (Event) */
.map-embed { aspect-ratio: 4/3; border-radius: 24px; overflow: hidden; position: relative; }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.2) contrast(1.05); }

/* FILTER chips (Speakers) */
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.chip {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 9px 16px; border-radius: 9999px; cursor: pointer;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.6); color: #4a4d57;
  transition: background .2s, color .2s, transform .2s;
}
.chip:hover { transform: translateY(-1px); }
.chip.active { background: #0e1014; color: #fff; border-color: #0e1014; }

/* SPEAKER grid */
.speaker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.speaker-grid .speaker { padding: 22px; border-radius: 18px; }
.speaker-pill {
  display: inline-block; margin-top: 12px; font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; padding: 5px 11px; border-radius: 9999px;
  background: rgba(120,130,255,0.12); color: #5b54c8;
}

/* TICKETS tiers */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier { padding: 32px 26px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.tier.featured { transform: scale(1.03); box-shadow: 0 24px 60px -22px rgba(90,80,200,0.45) !important; }
.tier-badge {
  position: absolute; top: 18px; right: 18px; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; padding: 5px 12px; border-radius: 9999px;
  background: linear-gradient(100deg, var(--c-blue), var(--c-violet), var(--c-pink)); color: #fff;
}
.tier-name { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--c-blue); margin: 0; }
.tier-price { font-size: clamp(36px, 4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.tier-price span { font-size: 15px; color: var(--ink-mute); font-weight: 500; }
.tier ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tier li { font-size: 14px; color: var(--ink-soft); display: flex; gap: 10px; align-items: flex-start; }
.tier li::before { content: "•"; color: var(--c-indigo); font-weight: 700; }
.tier .btn-glass-strong, .tier .btn-glass { width: 100%; justify-content: center; margin-top: 6px; }

/* HOTELS / TRAVEL */
.booking-widget { padding: 28px; border-radius: 24px; }
.booking-fields { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; margin-top: 18px; }
.bw-field { display: flex; flex-direction: column; gap: 7px; }
.bw-field label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.bw-field input, .bw-field select {
  font: inherit; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(14,16,20,0.1); color: #0e1014; outline: none;
}
.booking-note { margin-top: 14px; font-size: 12px; color: var(--ink-mute); }
.hotel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hotel { border-radius: 22px; overflow: hidden; }
.hotel-img { aspect-ratio: 4/3; position: relative; }
.hotel-img .about-orb, .hotel-img .travel-orb { inset: 18%; }
.hotel-body { padding: 18px 20px 22px; }
.hotel-body h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.hotel-meta { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.info-card { padding: 24px; border-radius: 18px; }
.info-card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.info-card p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* ABOUT cards */
.about-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.about-card { padding: 30px 28px; border-radius: 22px; }
.about-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.about-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.founder-note { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px,5vw,64px); align-items: center; }
.founder-portrait { aspect-ratio: 1/1; max-width: 360px; border-radius: 28px; overflow: hidden; position: relative; }

/* RESPONSIVE — sub-pages */
@media (max-width: 900px) {
  .split-grid, .founder-note, .venue-grid { grid-template-columns: 1fr; }
  .format-row { grid-template-columns: repeat(2, 1fr); }
  .speaker-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-grid { grid-template-columns: 1fr; }
  .tier.featured { transform: none; }
  .hotel-grid { grid-template-columns: 1fr 1fr; }
  .booking-fields { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .about-cards { grid-template-columns: 1fr; }
  .page-hero { min-height: 52vh; padding-top: 120px; }
}
@media (max-width: 540px) {
  .format-row, .speaker-grid, .hotel-grid, .booking-fields { grid-template-columns: 1fr; }
  .sched-row { grid-template-columns: 70px 1fr; }
  .sched-row .sched-tag { grid-column: 2; justify-self: start; }
}

/* light-theme text fixes for sub-page components (white→dark inside light-zone) */
.light-zone .format-item p,
.light-zone .tier li,
.light-zone .hotel-meta,
.light-zone .info-card p,
.light-zone .about-card p { color: #4a4d57; }
.light-zone .tier-price span,
.light-zone .booking-note,
.light-zone .bw-field label { color: #8589a0; }
.light-zone .format-item h3,
.light-zone .info-card h3,
.light-zone .about-card h3,
.light-zone .hotel-body h3,
.light-zone .tier-price,
.light-zone .sched-time,
.light-zone .sched-title { color: #0e1014; }

/* light-theme ghost button (.btn-glass) so it's visible on light sections */
.light-zone .btn-glass {
  color: #0e1014;
  background: rgba(255,255,255,0.5);
  box-shadow: inset 0 0 0 1px rgba(14,16,20,0.14);
}
.light-zone .btn-glass::before { display: none; }
.light-zone .btn-glass:hover { background: rgba(255,255,255,0.8); }

/* ===================================================================
   GOLDEN-CHILD-STYLE LAYOUT (Myelin-themed) — used on Event/Speakers/
   Travel/About. Editorial serif headings, image placeholders, splits,
   3-up rows, accent band, full-bleed band, FAQ, big-wordmark footer.
   =================================================================== */
.gc-h { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.03; margin: 0; }
.gc-h-xl { font-size: clamp(44px, 7vw, 104px); }
.gc-h-lg { font-size: clamp(30px, 4.4vw, 60px); }
.gc-kicker { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: var(--c-blue); margin: 0 0 16px; }
.light-zone .gc-kicker { color: #5b54c8; }

/* liquid-glass pill button — same dark-tinted glass as the nav, everywhere */
.gc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 28px; border-radius: 9999px;
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(18, 20, 28, 0.55);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow: 0 12px 36px -14px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.16);
  transition: transform .2s, background .25s; }
.gc-btn:hover { transform: translateY(-1px); background: rgba(30, 33, 44, 0.72); }

/* image placeholder */
.gc-ph { position: relative; border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, rgba(91,108,255,0.20), rgba(176,140,255,0.16) 45%, rgba(255,126,193,0.18) 100%), #e9ebf2; }
.gc-ph::after { content: "Image"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(14,16,20,0.34); font-weight: 600; }
.gc-ph.dark { background: linear-gradient(135deg, rgba(91,108,255,0.32), rgba(255,126,193,0.22)), #0a0c12; }
.gc-ph.dark::after { color: rgba(255,255,255,0.42); }
.gc-ph.no-label::after { content: ""; }

/* HERO */
.gc-hero { position: relative; min-height: 86vh; display: flex; align-items: flex-end; overflow: hidden;
  padding: 0 var(--pad) clamp(48px, 6vw, 92px); background: #000; }
.gc-hero-ph { position: absolute; inset: 0; border-radius: 0; }
.gc-hero-overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 30%, transparent 50%, rgba(0,0,0,0.65) 100%); }
.gc-hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; color: #fff; }
.gc-hero .gc-h { color: #fff; }
.gc-hero .gc-kicker { color: var(--c-cyan); }
.gc-hero-sub { color: rgba(255,255,255,0.88); max-width: 520px; margin: 18px 0 28px; font-size: 16px; line-height: 1.6; }
.gc-badges { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.gc-badge { display: flex; align-items: center; justify-content: center; text-align: center; width: 92px; height: 92px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.45); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff; padding: 10px; line-height: 1.3; }

/* SPLIT text + image */
.gc-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.gc-split.reverse .gc-split-media { order: -1; }
.gc-split-ph { aspect-ratio: 4/3; width: 100%; }
.gc-copy p { color: #4a4d57; font-size: 16px; line-height: 1.65; margin: 18px 0 0; max-width: 520px; }
.gc-copy .gc-btn { margin-top: 26px; }

/* media + floating checklist card */
.gc-split-media { position: relative; }
.gc-overlay-card { position: absolute; top: 18px; left: 18px; max-width: 60%;
  background: rgba(255,255,255,0.7); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.7); border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 14px 40px -16px rgba(40,30,80,0.3); }
.gc-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.gc-checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: #0e1014; line-height: 1.35; }
.gc-checklist li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; margin-top: 1px;
  background: radial-gradient(circle at 35% 35%, #fff, transparent 60%),
    conic-gradient(from 200deg, var(--c-blue), var(--c-violet), var(--c-pink), var(--c-cyan)); }

/* centered section head */
.gc-center { text-align: center; max-width: 700px; margin: 0 auto clamp(40px, 5vw, 70px); }
.gc-center .gc-kicker { color: #5b54c8; }
.gc-center p { color: #4a4d57; font-size: 16px; margin: 14px 0 0; }

/* 3-up features */
.gc-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.gc-three .gc-ph { aspect-ratio: 1/1; margin-bottom: 22px; }
.gc-three h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 10px; text-align: center; color: #0e1014; }
.gc-three p { color: #4a4d57; font-size: 14px; line-height: 1.55; text-align: center; margin: 0 0 16px; }
.gc-link { display: block; width: fit-content; margin: 0 auto; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: #0e1014; border-bottom: 1px solid #0e1014; padding-bottom: 3px; }

/* ACCENT band (iridescent, replaces GC yellow) */
.gc-accent { position: relative; padding: clamp(64px, 8vw, 120px) var(--pad);
  background: linear-gradient(120deg, #e6e8ff 0%, #f1e8ff 48%, #ffe8f1 100%); color: #0e1014; }
.gc-accent .band-inner { position: relative; z-index: 1; }
.gc-accent .gc-kicker { color: #5b54c8; }

/* FULL-BLEED band with overlay columns */
.gc-fullbleed { position: relative; min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden;
  padding: 0 var(--pad) clamp(40px, 5vw, 72px); background: #000; }
.gc-fb-cols { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; color: #fff; }
.gc-fb-cols .gc-kicker { color: #fff; }
.gc-fb-cols p { color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.55; margin: 0; }

/* STEPS */
.gc-steps { display: flex; flex-direction: column; gap: 24px; }
.gc-step-label { display: inline-block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: 6px 14px; border-radius: 9999px; background: rgba(14,16,20,0.06); color: #5b54c8; margin-bottom: 10px; }
.gc-step p { margin: 0; font-size: 16px; color: #0e1014; }

/* FAQ accordion */
.gc-faq-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.gc-faq { display: flex; flex-direction: column; }
.gc-faq details { border-bottom: 1px solid rgba(14,16,20,0.14); padding: 20px 4px; }
.gc-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px;
  font-size: 16px; font-weight: 500; color: #0e1014; }
.gc-faq summary::-webkit-details-marker { display: none; }
.gc-faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: #8589a0; }
.gc-faq details[open] summary::after { content: "\00D7"; }
.gc-faq p { margin: 14px 0 0; color: #4a4d57; font-size: 14.5px; line-height: 1.6; }
.gc-faq-aside h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 14px; color: #0e1014; }

/* BIG-WORDMARK FOOTER */
.gc-footer { position: relative; overflow: hidden; color: #0e1014;
  background: linear-gradient(120deg, #e6e8ff, #f1e8ff 50%, #ffe8f1); padding: clamp(56px, 6vw, 96px) var(--pad) 0; }
.gc-footer-cols { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.gc-footer-cols h4 { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #5b54c8; margin: 0 0 14px; }
.gc-footer-cols a { display: block; color: #4a4d57; font-size: 14px; margin-bottom: 9px; }
.gc-footer-cols a:hover { color: #0e1014; }
.gc-footer-legal { max-width: var(--maxw); margin: 36px auto 0; font-size: 12px; color: #8589a0; letter-spacing: 0.06em; }
.gc-wordmark { font-family: var(--serif); font-weight: 400; text-align: center; line-height: 0.78; letter-spacing: -0.01em;
  font-size: clamp(84px, 23vw, 360px); margin: clamp(24px, 4vw, 56px) 0 -0.1em;
  background: linear-gradient(180deg, #9 aa0c4 0%, #c9d2e0 100%); }
.gc-wordmark { background: linear-gradient(180deg, #9aa0c4 0%, #cdd6e4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .gc-split { grid-template-columns: 1fr; gap: 28px; }
  .gc-split.reverse .gc-split-media { order: 0; }
  .gc-three { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .gc-fb-cols { grid-template-columns: 1fr; gap: 22px; }
  .gc-faq-grid { grid-template-columns: 1fr; }
  .gc-footer-cols { grid-template-columns: 1fr 1fr; }
  .gc-hero { min-height: 74vh; }
  .gc-overlay-card { max-width: 78%; }
}
@media (max-width: 540px) {
  .gc-footer-cols { grid-template-columns: 1fr; }
  .gc-badges { gap: 10px; }
  .gc-badge { width: 78px; height: 78px; }
}

/* ===================================================================
   MOTION LAYER (NHM-style animations, Myelin-themed, vanilla)
   =================================================================== */
:root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); }

/* scroll reveal (fade + rise) */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* staggered children */
[data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo); }
[data-stagger].in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-stagger] > * { opacity: 1 !important; transform: none !important; } }

/* word-by-word headline reveal (slide up from below a mask) */
.reveal-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.16em; }
.reveal-words .w > span { display: inline-block; transform: translateY(115%); transition: transform 1.1s var(--ease-out-expo); }
.reveal-words.in .w > span { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal-words .w > span { transform: none !important; } }

/* section index ( 01 ──── ) */
.sec-index { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: 0.22em;
  font-weight: 600; color: #8589a0; margin-bottom: 22px; }
.gc-hero .sec-index { color: rgba(255,255,255,0.65); }
.sec-index .line { width: 56px; height: 1.5px; background: currentColor; opacity: 0.5; }

/* liquid-glass hairline edge on the pill (same as nav / .btn-glass-strong) */
.gc-btn { position: relative; overflow: hidden; }
.gc-btn > span { position: relative; z-index: 1; }
.gc-btn::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0) 50%, rgba(255,255,255,0.18) 80%, rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* action pills (invert on hover) */
.gc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 9999px;
  border: 1px solid rgba(14,16,20,0.22); background: rgba(255,255,255,0.55); color: #0e1014;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .2s; }
.gc-pill:hover { background: #0e1014; color: #fff; border-color: #0e1014; transform: translateY(-1px); }
.gc-pill-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* AUTO-CYCLING CHAPTERS (NHM section-3 style) */
.gc-chapters { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.gc-chapters-media { position: relative; display: flex; flex-direction: column; }
.gc-chapter-img { position: relative; flex: 1; min-height: 360px; border-radius: 22px; overflow: hidden; }
.gc-chapter-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 34px); color: rgba(255,255,255,0.92);
  transition: opacity .45s var(--ease-out-expo), filter .45s var(--ease-out-expo), transform .45s var(--ease-out-expo); }
.gc-chapter-img.swapping .gc-chapter-label { opacity: 0; filter: blur(8px); transform: translateY(10px) scale(1.02); }
.gc-chapter-count { margin-top: 16px; font-size: 12px; letter-spacing: 0.22em; color: #8589a0; font-weight: 600; }
.gc-chapter-count .cur { color: #0e1014; }
.gc-chapters-list { display: flex; flex-direction: column; }
.gc-chapter { text-align: left; background: none; border: 0; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; border-bottom: 1px solid rgba(14,16,20,0.12);
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.2vw, 30px);
  color: #b6b8c2; transition: color .3s, padding-left .3s; }
.gc-chapter:hover { color: #5b5e6b; }
.gc-chapter.active { color: #0e1014; padding-left: 12px; }
.gc-chapter .mark { opacity: 0; transition: opacity .3s; font-size: 20px; color: #8589a0; }
.gc-chapter.active .mark { opacity: 1; }

@media (max-width: 900px) {
  .gc-chapters { grid-template-columns: 1fr; }
  .gc-chapter-img { min-height: 240px; }
}

/* ===================================================================
   STAT ROW (replaces the circular badges) — label on top, big serif value
   =================================================================== */
.gc-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 38px; max-width: 660px; }
.gc-stats.cols-4 { grid-template-columns: repeat(4, 1fr); max-width: 820px; }
.gc-stat { padding: 4px 26px; border-left: 1px solid rgba(255,255,255,0.22); }
.gc-stat:first-child { padding-left: 0; border-left: 0; }
.gc-stat-label { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); }
.gc-stat-value { font-family: var(--serif); font-weight: 400; line-height: 0.9; color: #fff;
  font-size: clamp(38px, 5vw, 64px); }
/* light-context variant (if used outside the dark hero) */
.light-zone .gc-stat { border-left-color: rgba(14,16,20,0.14); }
.light-zone .gc-stat-label { color: #8589a0; }
.light-zone .gc-stat-value { color: #0e1014; }
@media (max-width: 540px) {
  .gc-stat { padding: 4px 14px; }
  .gc-stat-label { font-size: 10px; letter-spacing: 0.1em; }
  .gc-stat-value { font-size: clamp(28px, 9vw, 40px); }
}

/* ===================================================================
   COMING SOON (community placeholder)
   =================================================================== */
.cs-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; background: #000; padding: 140px var(--pad) 90px; }
.cs-bg { position: absolute; inset: 0; z-index: 0; }
.cs-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
  transform: scale(1.08); filter: saturate(120%); }
.cs-bg video.ready { opacity: 0.45; }
.cs-bg .hero-orb { opacity: 0.35; }
.cs-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(5,6,12,0.35) 0%, rgba(5,6,12,0.84) 100%); }
.cs-inner { position: relative; z-index: 2; max-width: 800px; width: 100%; }
.cs-kicker { font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-cyan); margin: 0 0 20px; }
.cs-title { font-family: var(--serif); font-weight: 400; color: #fff; line-height: 0.92; letter-spacing: -0.02em;
  font-size: clamp(56px, 13vw, 188px); margin: 0; }
.cs-sub { color: rgba(255,255,255,0.82); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; max-width: 560px; margin: 26px auto 0; }
.cs-form { display: flex; gap: 10px; max-width: 460px; margin: 36px auto 0; }
.cs-form input { flex: 1; min-width: 0; padding: 15px 20px; border-radius: 9999px; font: inherit; color: #fff; outline: none;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }
.cs-form input::placeholder { color: rgba(255,255,255,0.5); }
.cs-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 36px auto 0; max-width: 640px; }
.cs-pills .gc-pill { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.22); cursor: default; }
.cs-pills .gc-pill:hover { transform: none; background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.3); }
.cs-note { margin: 30px 0 0; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
@media (max-width: 540px) { .cs-form { flex-direction: column; } .cs-form .gc-btn { width: 100%; } }

/* ===================================================================
   PERFORMANCE PASS (low RAM / low GPU — "runs on a toaster")
   =================================================================== */
/* skip rendering off-screen sections until they're scrolled near */
.band { content-visibility: auto; contain-intrinsic-size: 1px 720px; }

/* the big background orbs: static (no continuous re-compositing) + smaller blur buffer */
.light-zone::before, .light-zone::after {
  animation: none !important;
  filter: blur(60px) saturate(130%);
  opacity: 0.4;
}

/* trim the most expensive backdrop-filter blur radii (frosted look kept, lighter buffers) */
.nav { backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
.liquid-glass-strong, .btn-glass-strong { backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }
.gc-btn { backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }

/* ===================================================================
   TRAVEL HERO — fullscreen Toronto skyline, water blends into the page
   =================================================================== */
.travel-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; overflow: hidden;   /* text vertically centered, left */
  padding: 120px var(--pad);
  background: #f7f8fb;   /* matches the light page + the image's pale water edge */
}
.travel-hero-img {
  position: absolute; inset: 0; z-index: 0;
  background: url("toronto-skyline.png") center 30% / cover no-repeat;
}
/* dark scrim on the left so WHITE text reads; skyline stays bright on the right */
.travel-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(8,10,18,0.74) 0%, rgba(8,10,18,0.5) 26%, rgba(8,10,18,0.18) 48%, rgba(8,10,18,0) 66%);
}
.travel-hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.travel-hero-title { color: #fff; text-shadow: 0 2px 28px rgba(0,0,0,0.45); max-width: 12ch; }
.travel-hero-sub {
  color: rgba(255,255,255,0.92); max-width: 480px; margin: 20px 0 30px; font-size: 17px; line-height: 1.6;
  text-shadow: 0 1px 18px rgba(0,0,0,0.55);
}
/* the water at the bottom dissolves into the light page below (seamless continuation) */
.travel-hero-fade {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 22vh; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, #f7f8fb 0%, rgba(247,248,251,0.5) 40%, rgba(247,248,251,0) 100%);
}
@media (max-width: 640px) {
  .travel-hero-img { background-position: center 30%; }
  /* phones: darken more broadly since text is centered over a narrow frame */
  .travel-hero-scrim {
    background: linear-gradient(180deg, rgba(8,10,18,0.55) 0%, rgba(8,10,18,0.3) 40%, rgba(8,10,18,0.5) 100%);
  }
  .travel-hero-title { max-width: none; }
}