:root {
    /* Midnight + Aurora */
    --bg:        #08070d;
    --bg-2:      #0d0c14;
    --bg-3:      #15131e;
    --ink:       #0a0a0a;
    --cream:     #f5f1ea;
    --cream-d:   #e7e1d4;
    --mute:      rgba(245,241,234,0.55);
    --mute-2:    rgba(245,241,234,0.32);
    --line:      rgba(245,241,234,0.10);
    --line-2:    rgba(245,241,234,0.16);

    --sky:       #d4af37;   /* champagne gold */
    --sky-deep:  #b8941f;   /* deep gold */
    --silver:    #c0c5cb;   /* silver */
    --platinum:  #a8a8a8;   /* platinum */
    --champagne: #d4af37;   /* champagne (alias) */
    --champagne-deep: #b8941f; /* deep champagne */
    --aurora-1:  #d4af37;   /* champagne gold (alias) */
    --aurora-2:  #ffe28a;   /* pale buttery gold */
    --aurora-3:  #ffc870;   /* gold */
    --aurora-4:  #ffa53d;   /* warm orange */
    --aurora-5:  #ff7a1f;   /* deep orange */

    --grad-aurora:      linear-gradient(120deg, #e8eaed 0%, #ffe9b0 26%, #d4af37 58%, #b8941f 100%);
    --grad-aurora-h:    linear-gradient(90deg, #e8eaed 0%, #d4af37 52%, #b8941f 100%);
    --grad-aurora-soft: linear-gradient(120deg, rgba(232,234,237,0.85) 0%, rgba(255,233,176,0.85) 30%, rgba(212,175,55,0.9) 65%, rgba(184,148,31,0.92) 100%);
    --grad-sunset:      linear-gradient(180deg, #ffe9b0 0%, #d4af37 50%, #b8941f 100%);

    --r-md: 16px; --r-lg: 24px; --r-xl: 36px;
    --container: 1280px; --gutter: 24px;

    --cursor-x: 50vw; --cursor-y: 50vh;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; background: var(--bg); }
  body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 17px; line-height: 1.55;
    color: var(--cream);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection { background: var(--aurora-3); color: var(--ink); }
  h1, h2, h3, h4 {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    letter-spacing: -0.045em;
    margin: 0;
    color: var(--cream);
  }
  p { margin: 0; color: var(--mute); }
  a { color: inherit; text-decoration: none; }
  .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }

  .serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

  /* ====== AURORA — fixed background atmosphere ====== */
  .atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .blob {
    position: absolute; border-radius: 50%;
    filter: blur(120px); opacity: 0.18;
    will-change: transform;
    animation: drift 28s ease-in-out infinite alternate;
  }
  .blob.b1 { width: 60vw; height: 60vw; left: -10vw; top: -10vw; background: var(--aurora-1); animation-duration: 30s; }
  .blob.b2 { width: 55vw; height: 55vw; right: -15vw; top: 10vh; background: var(--silver); animation-duration: 38s; animation-delay: -8s; }
  .blob.b3 { width: 50vw; height: 50vw; left: 20vw; bottom: -20vw; background: var(--champagne-deep); animation-duration: 34s; animation-delay: -16s; }
  .blob.b4 { width: 45vw; height: 45vw; right: 5vw; bottom: -15vw; background: var(--aurora-4); animation-duration: 42s; animation-delay: -22s; }
  @keyframes drift {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(8vw,-6vh,0) scale(1.12); }
    100% { transform: translate3d(-6vw,6vh,0) scale(0.92); }
  }
  /* dimming veil to keep contrast (intensity ties to scroll) */
  .veil {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(ellipse 80% 50% at var(--cursor-x) var(--cursor-y), rgba(255,255,255,0.04), transparent 60%),
      linear-gradient(180deg, rgba(8,7,13,0.55) 0%, rgba(8,7,13,0.78) 60%, rgba(8,7,13,0.92) 100%);
  }
  /* film grain */
  .grain {
    position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  main { position: relative; z-index: 3; }

  /* ====== Sun-glow cursor halo (desktop, native cursor still visible) ====== */
  @media (pointer: fine) and (min-width: 880px) {
    .cursor {
      position: fixed;
      left: var(--cursor-x); top: var(--cursor-y);
      width: 36px; height: 36px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 9999;
      /* Illuminated silver glow — soft radial halo + outer rays */
      background: radial-gradient(circle at 50% 50%,
        rgba(255,255,255,0.55) 0%,
        rgba(214,219,224,0.30) 35%,
        rgba(168,168,168,0.12) 60%,
        transparent 80%);
      box-shadow: 0 0 22px rgba(232,234,237,0.50), 0 0 50px rgba(192,197,203,0.30);
      mix-blend-mode: screen;
      transition: width 0.3s, height 0.3s, opacity 0.3s;
      opacity: 0.92;
    }
    .cursor::before, .cursor::after {
      content: ""; position: absolute; inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(232,234,237,0.40);
      animation: cursor-ray-pulse 2.2s ease-in-out infinite;
    }
    .cursor::after { animation-delay: 1.1s; }
    @keyframes cursor-ray-pulse {
      0%   { transform: scale(0.85); opacity: 0.8; border-color: rgba(232,234,237,0.60); }
      100% { transform: scale(1.9);  opacity: 0;   border-color: rgba(232,234,237,0); }
    }
    .cursor.is-hover {
      width: 72px; height: 72px;
      background: radial-gradient(circle at 50% 50%,
        rgba(255,255,255,0.72) 0%,
        rgba(214,219,224,0.38) 35%,
        rgba(168,168,168,0.16) 60%,
        transparent 80%);
      box-shadow: 0 0 40px rgba(232,234,237,0.68), 0 0 80px rgba(192,197,203,0.42);
    }
    /* Native cursor stays visible — we're additive, not replacing */
  }
  @media (prefers-reduced-motion: reduce) {
    .cursor::before, .cursor::after { animation: none !important; }
  }
  @media (max-width: 879px), (pointer: coarse) {
    .cursor { display: none; }
  }

  /* ====== NAV ====== */
  nav.top {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 50;
    background: transparent;
    transition: background 0.35s, backdrop-filter 0.35s, border-color 0.35s;
    border-bottom: 1px solid transparent;
  }
  nav.top.scrolled {
    background: rgba(8,7,13,0.6);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-bottom-color: var(--line);
  }
  nav.top .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
  .logo { display: inline-flex; align-items: center; color: var(--cream); line-height: 1; }
  .logo-svg { height: 24px; width: auto; display: block; color: inherit; }
  .nav-links { display: none; align-items: center; gap: 36px; }
  .nav-links a { font-size: 0.9rem; color: var(--mute); font-weight: 500; transition: color 0.15s; letter-spacing: -0.005em; }
  .nav-links a:hover { color: var(--cream); }
  @media (min-width: 980px) { .nav-links { display: flex; } }
  .nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    background: var(--cream); color: var(--ink);
    font-size: 0.9rem; font-weight: 600; letter-spacing: -0.005em;
    transition: background 0.2s, transform 0.18s, box-shadow 0.3s;
    border: 1px solid transparent;
  }
  .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(212,175,55,0.22); }
  .nav-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

  .menu-toggle { display: none; background: transparent; border: 1px solid var(--line-2); border-radius: 12px; width: 44px; height: 44px; cursor: pointer; padding: 0; position: relative; color: var(--cream); }
  .menu-toggle .bar, .menu-toggle .bar::before, .menu-toggle .bar::after { display: block; position: absolute; width: 18px; height: 1.5px; background: currentColor; transition: transform 0.25s, top 0.25s, background 0.2s; }
  .menu-toggle .bar { left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .menu-toggle .bar::before { content: ""; left: 0; top: -7px; }
  .menu-toggle .bar::after { content: ""; left: 0; top: 7px; }
  nav.top.menu-open .menu-toggle .bar { background: transparent; }
  nav.top.menu-open .menu-toggle .bar::before { top: 0; transform: rotate(45deg); }
  nav.top.menu-open .menu-toggle .bar::after { top: 0; transform: rotate(-45deg); }
  @media (max-width: 979px) { .menu-toggle { display: block; } .nav-cta { display: none; } }
  .mobile-menu { position: fixed; top: 72px; left: 0; right: 0; height: calc(100dvh - 72px); background: rgba(8,7,13,0.97); backdrop-filter: blur(28px); z-index: 49; padding: 40px 28px 48px; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s, visibility 0.4s; display: flex; flex-direction: column; overflow-y: auto; }
  .mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .mobile-menu a:not(.btn) { display: block; font-family: 'Inter Tight', sans-serif; font-size: 1.75rem; color: var(--cream); font-weight: 700; padding: 22px 0; border-bottom: 1px solid var(--line); letter-spacing: -0.035em; }
  .mobile-menu .mobile-cta { margin-top: 36px; align-self: stretch; text-align: center; justify-content: center; background: var(--cream); color: var(--ink); padding: 18px 24px; font-size: 1.05rem; font-weight: 600; border-radius: 999px; }
  body.menu-open { overflow: hidden; }

  /* ====== PEAK BREADCRUMB ====== */
  .peak-breadcrumb {
    max-width: var(--container); margin: 0 auto;
    padding: 92px var(--gutter) 2px;
    display: flex; align-items: center; gap: 11px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .peak-breadcrumb a {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--mute); text-decoration: none; transition: color 0.2s;
  }
  .peak-breadcrumb a::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
    background: radial-gradient(circle at 38% 32%, #fff4d1, #d4af37 70%, #8a6d12);
    box-shadow: 0 0 8px rgba(212,175,55,0.5);
  }
  .peak-breadcrumb a:hover { color: var(--cream); }
  .peak-breadcrumb .pb-sep { color: var(--line-2); font-weight: 400; }
  .peak-breadcrumb .pb-here { color: var(--cream); }
  @media (max-width: 600px) { .peak-breadcrumb { padding-top: 86px; font-size: 0.66rem; gap: 9px; } }

  /* ====== SCROLL PROGRESS ====== */
  .progress {
    position: fixed; top: 0; left: 0; height: 2px;
    width: var(--p, 0%);
    background: var(--grad-aurora);
    z-index: 60;
    transition: width 0.1s linear;
  }

  /* ====== HERO ====== */
  .hero {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 140px 24px 100px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  /* ===== Hero sun — rises and crests just over the bottom of "Go UP." ===== */
  .hero-sun {
    position: absolute;
    left: 50%; top: 80%;
    width: clamp(380px, 54vw, 560px);
    aspect-ratio: 1 / 1;
    z-index: 0;
    pointer-events: none;
    transform: translate(-50%, 40%);
    opacity: 0;
    filter: blur(8px);
    animation: sunRise 4.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
    will-change: transform, opacity, filter;
  }
  @keyframes sunRise {
    0%   { transform: translate(-50%, 42%);  opacity: 0;   filter: blur(12px); }
    35%  { opacity: 0.55; filter: blur(5px); }
    100% { transform: translate(-50%, -50%); opacity: 1;   filter: blur(0); }
  }

  .hero-sun .rays {
    position: absolute; inset: -12%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
      transparent 0deg, rgba(255,217,122,0.10) 4deg, transparent 8deg,
      transparent 22deg, rgba(255,181,90,0.07) 26deg, transparent 30deg,
      transparent 44deg, rgba(255,217,122,0.06) 48deg, transparent 52deg,
      transparent 66deg, rgba(255,181,90,0.09) 70deg, transparent 74deg,
      transparent 88deg, rgba(255,217,122,0.07) 92deg, transparent 96deg,
      transparent 110deg, rgba(255,181,90,0.08) 114deg, transparent 118deg,
      transparent 132deg, rgba(255,217,122,0.06) 136deg, transparent 140deg,
      transparent 154deg, rgba(255,181,90,0.07) 158deg, transparent 162deg,
      transparent 176deg, rgba(255,217,122,0.10) 180deg, transparent 184deg,
      transparent 198deg, rgba(255,181,90,0.06) 202deg, transparent 206deg,
      transparent 220deg, rgba(255,217,122,0.07) 224deg, transparent 228deg,
      transparent 242deg, rgba(255,181,90,0.08) 246deg, transparent 250deg,
      transparent 264deg, rgba(255,217,122,0.06) 268deg, transparent 272deg,
      transparent 286deg, rgba(255,181,90,0.09) 290deg, transparent 294deg,
      transparent 308deg, rgba(255,217,122,0.07) 312deg, transparent 316deg,
      transparent 330deg, rgba(255,181,90,0.08) 334deg, transparent 338deg,
      transparent 352deg, rgba(255,217,122,0.06) 356deg, transparent 360deg);
    animation: raysSpin 110s linear infinite;
    mix-blend-mode: screen;
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 32%, #000 42%, #000 92%, transparent 100%);
            mask: radial-gradient(circle at 50% 50%, transparent 32%, #000 42%, #000 92%, transparent 100%);
  }
  @keyframes raysSpin { to { transform: rotate(360deg); } }

  .hero-sun .halo {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      rgba(255,217,122,0.40) 0%,
      rgba(255,181,90,0.22) 24%,
      rgba(255,165,61,0.12) 48%,
      rgba(255,200,112,0.06) 66%,
      transparent 85%);
    filter: blur(18px);
  }

  .hero-sun .disc {
    position: absolute; inset: 22%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      #fff7d8 0%,
      #ffe5a8 22%,
      #ffc06b 52%,
      #ff7a1f 82%,
      rgba(255,165,61,0) 100%);
    box-shadow:
      0 0 40px rgba(255,181,90,0.35),
      0 0 100px rgba(255,165,61,0.20),
      0 0 180px rgba(255,200,112,0.12);
  }
  .hero-sun .core {
    position: absolute;
    left: 50%; top: 50%;
    width: 30%; height: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%,
      #fffce8 0%, #fff0c4 40%, #ffd385 95%);
    box-shadow: 0 0 32px rgba(255,217,122,0.55);
    animation: corePulse 5.5s ease-in-out infinite alternate;
  }
  @keyframes corePulse {
    from { transform: translate(-50%, -50%) scale(1);    opacity: 0.90; }
    to   { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  }

  /* lift hero content above the sun */
  .hero .pill, .hero h1, .hero .sub, .hero .scroll-cue { position: relative; z-index: 2; }
  .hero h1 {
    text-shadow: 0 2px 22px rgba(8,7,13,0.30);
  }

  .hero .pill {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--mute);
    padding: 9px 18px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgba(245,241,234,0.025);
    backdrop-filter: blur(10px);
    margin-bottom: 40px;
    opacity: 0; transform: translateY(12px);
    animation: rise 0.9s cubic-bezier(0.16,1,0.3,1) 0.25s forwards;
  }
  .hero .pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--grad-aurora);
    box-shadow: 0 0 12px var(--aurora-3);
  }

  .hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
    font-weight: 800;
    color: var(--cream);
    margin: 0;
    padding: 0.05em 0.08em;       /* breathing room so gradient glyphs don't clip */
    overflow: visible;
  }
  .hero h1 .char {
    display: inline-block;
    opacity: 0; transform: translateY(0.55em) scale(0.9);
    animation: charRise 1.25s cubic-bezier(0.16,1,0.3,1) forwards;
    padding: 0 0.01em;             /* tiny per-char buffer */
  }
  .hero h1 .gradient {
    background: var(--grad-aurora);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 28px rgba(255,165,61,0.20));
    padding-right: 0.06em;         /* keep the P (and other gradient chars) from clipping */
  }
  @keyframes charRise { to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes rise { to { opacity: 1; transform: translateY(0); } }

  .hero .sub {
    margin: 36px auto 0;
    max-width: 580px;
    padding: 18px 28px;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.55;
    color: rgba(245,241,234,0.82);
    font-weight: 400;
    opacity: 0; transform: translateY(12px);
    animation: rise 0.9s cubic-bezier(0.16,1,0.3,1) 1.6s forwards;
    /* Subtle dark scrim behind the text — no orange, just legibility */
    background: radial-gradient(ellipse 90% 100% at 50% 50%, rgba(8,7,13,0.55), rgba(8,7,13,0.20) 60%, transparent 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 999px;
    text-shadow: 0 2px 18px rgba(8,7,13,0.65);
  }
  .hero .sub .serif { color: var(--cream); }

  /* Value-prop eyebrow override — slightly amber-tinted to differentiate from the generic pill */
  .hero .pill.value-prop {
    color: rgba(255,217,122,0.95);
    border-color: rgba(255,217,122,0.32);
    background: rgba(255,217,122,0.06);
    letter-spacing: 0.16em;
    text-transform: none;
    font-size: 0.82rem;
  }
  .hero .pill.value-prop sup {
    font-size: 0.7em;
    font-weight: 700;
    margin-left: 1px;
    color: var(--aurora-3);
  }
  .hero .pill.value-prop::before {
    background: var(--aurora-3);
    box-shadow: 0 0 12px rgba(255,165,61,0.85);
  }

  /* "Go HIGH." second beat — softer, smaller, rises after the sub */
  .hero .go-high {
    margin: 22px auto 0;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--cream);
    opacity: 0; transform: translateY(8px);
    animation: rise 1.0s cubic-bezier(0.16,1,0.3,1) 2.6s forwards;
  }
  .hero .go-high em {
    font-style: normal;
    color: var(--mute);
    font-weight: 500;
    margin-right: 0.3em;
  }
  .hero .go-high .HIGH {
    background: var(--grad-aurora);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(255,165,61,0.35));
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    padding: 0 0.04em;
  }
  .hero .go-high .dot { color: var(--cream); }

  .scroll-cue {
    position: absolute;
    bottom: 36px;
    left: calc(50% - 30px);
    transform: translateX(-50%);
    color: var(--mute-2);
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    opacity: 0;
    animation: rise 1.2s ease 2.6s forwards;
  }
  .scroll-cue .setting {
    position: relative;
    width: 28px; height: 64px;
  }
  .scroll-cue .horizon {
    position: absolute;
    bottom: 0; left: -10px; right: -10px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,200,112,0.55), transparent);
  }
  .scroll-cue .sun {
    position: absolute;
    left: 50%; top: 0;
    width: 13px; height: 13px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 40%, #fff7d8 0%, #ffc870 55%, #ff8732 100%);
    box-shadow: 0 0 14px rgba(255,200,112,0.7), 0 0 30px rgba(255,165,61,0.35);
    /* Bobs in place when at top of page; otherwise position driven by JS via --sun-pos */
    top: calc(var(--sun-pos, 0%) - 4px);
    transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    animation: sun-bob 2.6s ease-in-out infinite;
  }
  @keyframes sun-bob {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255,200,112,0.7)); }
    50%      { filter: drop-shadow(0 0 12px rgba(255,200,112,1)); }
  }

  /* ===== Big descending sun — tracks scroll position across the whole page ===== */
  .sun-track {
    position: fixed;
    right: 32px; top: 0; bottom: 0;
    width: 4px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s;
  }
  .sun-track.is-active { opacity: 1; }
  .sun-track .track-line {
    position: absolute;
    left: 50%; top: 80px; bottom: 80px;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(212,175,55,0.30), rgba(255,165,61,0.30) 50%, rgba(255,122,31,0.55));
    border-radius: 999px;
  }
  .sun-track .sun-orb {
    position: absolute;
    left: 50%;
    top: var(--sun-y, 80px);
    width: 22px; height: 22px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 38%, #fff7d8 0%, #ffe28a 35%, #ffc870 65%, #ff8732 100%);
    box-shadow: 0 0 22px rgba(255,200,112,0.75), 0 0 50px rgba(255,165,61,0.45), 0 0 100px rgba(255,122,31,0.25);
    transition: top 0.18s linear, background 0.6s, box-shadow 0.6s;
  }
  /* Sun shifts warmer as it descends (--sun-progress 0 to 1) */
  .sun-track .sun-orb {
    background:
      radial-gradient(circle at 50% 38%, #fff7d8 0%, #ffe28a calc(35% - var(--sun-progress, 0) * 5%), #ffc870 65%, #ff8732 100%);
  }
  @media (max-width: 720px) { .sun-track { right: 12px; width: 3px; } .sun-track .sun-orb { width: 18px; height: 18px; } }
  @media (prefers-reduced-motion: reduce) {
    .sun-track .sun-orb { transition: none; }
    .scroll-cue .sun { animation: none; }
  }

  /* ====== BRIDGE ====== */
  .bridge {
    min-height: auto;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 48px 24px 32px;
    position: relative;
  }
  .ghost-word {
    position: absolute;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(18rem, 42vw, 44rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.09em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    white-space: nowrap;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(120deg, rgba(212,175,55,0.06), rgba(255,200,112,0.06) 40%, rgba(255,165,61,0.06) 70%, rgba(255,180,114,0.06));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .bridge-lines { position: relative; z-index: 2; max-width: 1000px; }
  .bridge-line {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: clamp(2.2rem, 5.6vw, 4.6rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: var(--mute);
    margin: 0;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1), color 0.6s;
  }
  .bridge-line.in { opacity: 1; transform: translateY(0); color: var(--cream); }
  .bridge-line + .bridge-line { margin-top: 12px; }
  .bridge-line .UP, .bridge-line .HIGH {
    display: inline-block;
    font-weight: 900;
    background: var(--grad-aurora);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.05em;
    padding: 0 0.04em;
    filter: drop-shadow(0 0 24px rgba(255,200,112,0.25));
  }
  .bridge-line .HIGH { font-size: 1.4em; letter-spacing: 0.06em; }
  .bridge-line .UP { font-size: 1.15em; }

  .bridge-marquee {
    margin-top: 36px;
    overflow: hidden;
    width: 100%;
    padding: 26px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .bridge-track {
    display: inline-flex;
    gap: 0;
    white-space: nowrap;
    animation: marquee 42s linear infinite;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-d);
  }
  .bridge-track span { display: inline-flex; align-items: center; gap: 56px; padding-right: 56px; }
  .bridge-track .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--grad-aurora);
    flex-shrink: 0;
  }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ====== CHOOSE ====== */
  .choose { padding: 100px 0 120px; position: relative; }
  .choose-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
  .choose-head .ey {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 26px;
  }
  .choose-head .ey::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-aurora); box-shadow: 0 0 12px var(--aurora-3); }
  .choose-head h2 {
    font-size: clamp(2.4rem, 5.2vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    margin: 0;
  }
  .choose-head h2 .gradient {
    background: var(--grad-aurora);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .choose-head p { margin-top: 26px; font-size: 1.125rem; color: var(--mute); line-height: 1.55; max-width: 560px; margin-left: auto; margin-right: auto; }

  .panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    perspective: 1600px;
  }
  @media (min-width: 880px) { .panels { grid-template-columns: 1fr 1fr; gap: 28px; } }

  .panel {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-xl);
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s, border-color 0.3s;
    display: block;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    box-shadow: 0 40px 100px rgba(0,0,0,0.45);
    will-change: transform;
  }
  @media (min-width: 880px) { .panel { aspect-ratio: 4 / 5.4; } }
  .panel:hover {
    border-color: rgba(245,241,234,0.28);
    box-shadow: 0 60px 140px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,200,112,0.2), 0 0 80px rgba(255,200,112,0.18);
  }

  .panel-bg {
    position: absolute; inset: 0; z-index: 0;
    transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
    will-change: transform;
  }
  .panel:hover .panel-bg { transform: scale(1.08); }

  .panel.community .panel-bg {
    background:
      radial-gradient(ellipse 80% 80% at 25% 30%, rgba(212,175,55,0.45), transparent 60%),
      radial-gradient(ellipse 80% 70% at 80% 80%, rgba(255,200,112,0.5), transparent 60%),
      linear-gradient(160deg, #0a1822 0%, #1a1a3a 60%, #060812 100%);
  }
  .panel.community .net {
    position: absolute; inset: 0;
    background-image:
      radial-gradient(circle 1.4px at 22% 30%, rgba(255,255,255,0.95), transparent),
      radial-gradient(circle 1.4px at 70% 22%, rgba(212,175,55,0.95), transparent),
      radial-gradient(circle 1.6px at 86% 60%, rgba(255,255,255,0.95), transparent),
      radial-gradient(circle 1.4px at 14% 76%, rgba(255,200,112,0.95), transparent),
      radial-gradient(circle 1.8px at 55% 48%, rgba(255,255,255,0.95), transparent),
      radial-gradient(circle 1.2px at 40% 18%, rgba(212,175,55,0.7), transparent),
      radial-gradient(circle 1.2px at 90% 30%, rgba(255,255,255,0.6), transparent),
      radial-gradient(circle 1.4px at 30% 88%, rgba(255,200,112,0.8), transparent);
    opacity: 0.95;
  }
  .panel.community .ring {
    position: absolute;
    width: 360px; height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,0.18);
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 6s ease-in-out infinite;
  }
  .panel.community .ring.r2 { width: 480px; height: 480px; border-color: rgba(255,200,112,0.14); animation-delay: -2s; }
  .panel.community .ring.r3 { width: 600px; height: 600px; border-color: rgba(255,165,61,0.10); animation-delay: -4s; }
  @keyframes pulse { 0%,100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.5; } }

  /* === Four Peaks Mountain Range — silhouette catching the sunset === */
  .panel.community .peaks {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 70%;
    z-index: 2;
    pointer-events: none;
    /* The peaks reveal from below on load */
    transform: translateY(20%);
    opacity: 0;
    animation: peaks-rise 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  }
  .panel.community .peaks svg {
    width: 100%; height: 100%; display: block;
  }
  @keyframes peaks-rise {
    to { transform: translateY(0); opacity: 1; }
  }

  /* Camp glow dots fade in one by one after the peaks settle */
  .panel.community .peaks .camp {
    opacity: 0;
    animation: camp-glow 4s ease-in-out infinite alternate;
    transform-origin: center;
  }
  .panel.community .peaks .camp.c1 { animation-delay: 1.6s; }
  .panel.community .peaks .camp.c2 { animation-delay: 1.8s; }
  .panel.community .peaks .camp.c3 { animation-delay: 2.0s; }
  .panel.community .peaks .camp.c4 { animation-delay: 2.2s; }
  .panel.community .peaks .camp.c5 { animation-delay: 2.4s; }
  .panel.community .peaks .camp.c6 { animation-delay: 2.6s; }
  .panel.community .peaks .camp.c7 { animation-delay: 2.8s; }
  .panel.community .peaks .camp.c8 { animation-delay: 3.0s; }
  .panel.community .peaks .camp.c9 { animation-delay: 3.2s; }
  @keyframes camp-glow {
    0%   { opacity: 0.55; }
    100% { opacity: 1; }
  }

  /* Summit beacon — the highest camp, brightest */
  .panel.community .peaks .summit-beacon {
    transform-origin: center;
    animation: summit-pulse 2.8s ease-in-out infinite alternate;
  }
  @keyframes summit-pulse {
    0%   { transform: scale(0.9); filter: drop-shadow(0 0 4px rgba(255,217,122,0.85)); }
    100% { transform: scale(1.2); filter: drop-shadow(0 0 14px rgba(255,217,122,1)) drop-shadow(0 0 26px rgba(255,165,61,0.7)); }
  }

  /* On hover: trail dashes start flowing toward the summit */
  .panel.community .peaks .trail {
    stroke-dasharray: 3 4;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.6s;
  }
  .panel.community:hover .peaks .trail {
    animation: trail-flow 4s linear infinite;
  }
  @keyframes trail-flow {
    to { stroke-dashoffset: -56; }
  }

  /* Subtle horizon glow at the very base — where mountain meets earth */
  .panel.community .peaks-horizon {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,200,112,0.55), rgba(255,165,61,0.45), transparent);
    box-shadow: 0 0 24px rgba(255,165,61,0.45);
    z-index: 3;
  }

  /* Caption under the mountains */
  .panel.community .peaks-caption {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    text-align: center;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    color: rgba(255,200,112,0.85);
    letter-spacing: 0.02em;
    z-index: 4;
    text-shadow: 0 1px 12px rgba(8,7,13,0.7);
    opacity: 0;
    animation: caption-fade 1s ease 2.6s forwards;
  }
  @keyframes caption-fade { to { opacity: 1; } }

  @media (prefers-reduced-motion: reduce) {
    .panel.community .peaks { animation: none !important; opacity: 1; transform: none; }
    .panel.community .peaks .camp,
    .panel.community .peaks .summit-beacon,
    .panel.community .peaks-caption { animation: none !important; opacity: 1; transform: none; }
  }

  .panel.high .panel-bg {
    background:
      radial-gradient(ellipse 100% 70% at 50% 0%, rgba(255,180,114,0.55), transparent 65%),
      radial-gradient(ellipse 80% 80% at 50% 90%, rgba(255,165,61,0.35), transparent 60%),
      linear-gradient(180deg, #1a1018 0%, #3a1a28 60%, #0a0612 100%);
  }
  .panel.high .horizon {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 60%;
    background:
      radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255,180,114,0.45), transparent 70%),
      linear-gradient(180deg, transparent 0%, rgba(255,180,114,0.10) 80%, rgba(255,180,114,0.30) 100%);
  }
  .panel.high .disc {
    position: absolute;
    left: 50%; bottom: -90px;
    transform: translateX(-50%);
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #fff8e8 0%, var(--aurora-4) 35%, rgba(255,180,114,0) 70%);
    transition: bottom 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s, filter 0.5s;
    filter: blur(0.5px);
  }
  .panel.high:hover .disc { bottom: -50px; }

  .panel.high .scan {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(255,180,114,0.06) 50%, transparent 55%, transparent 100%);
    background-size: 100% 200%;
    animation: scan 6s ease-in-out infinite;
    mix-blend-mode: screen;
  }
  @keyframes scan { 0% { background-position: 0 -100%; } 100% { background-position: 0 200%; } }

  .panel-content {
    position: absolute; inset: 0; z-index: 2;
    padding: 36px 32px;
    display: flex; flex-direction: column; justify-content: space-between;
    color: var(--cream);
  }
  @media (min-width: 720px) { .panel-content { padding: 48px 44px; } }

  .panel-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--cream);
    background: rgba(8,7,13,0.4);
    border: 1px solid rgba(245,241,234,0.18);
    backdrop-filter: blur(10px);
    padding: 8px 14px;
    border-radius: 999px;
    width: fit-content;
  }
  .panel-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-aurora); box-shadow: 0 0 8px var(--aurora-3); }

  .panel-body { display: flex; flex-direction: column; gap: 20px; }
  .panel h3 {
    font-size: clamp(1.7rem, 4vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
    font-weight: 800;
    color: var(--cream);
    margin: 0;
    text-wrap: balance;        /* Modern browsers balance line lengths automatically */
    overflow-wrap: break-word; /* Fallback for very narrow widths */
  }
  .panel h3 .gradient {
    background: var(--grad-aurora);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;       /* Keep "One return." together — never break inside the gradient phrase */
  }
  .panel-tease {
    font-size: 1.0625rem;
    color: rgba(245,241,234,0.85);
    line-height: 1.55;
    max-width: 400px;
  }
  .panel-cta {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 1rem; font-weight: 600;
    color: var(--cream);
    padding: 14px 22px;
    border-radius: 999px;
    background: rgba(8,7,13,0.5);
    border: 1px solid rgba(245,241,234,0.22);
    backdrop-filter: blur(10px);
    width: fit-content;
    transition: background 0.3s, color 0.3s, transform 0.3s, padding 0.3s, border-color 0.3s;
  }
  .panel:hover .panel-cta {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
    padding-right: 28px;
  }
  .panel-cta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s; }
  .panel:hover .panel-cta svg { transform: translateX(5px); }

  .panel-meta {
    display: flex; gap: 22px;
    margin-top: 24px; padding-top: 24px;
    border-top: 1px solid rgba(245,241,234,0.14);
  }
  .panel-meta .item { display: flex; flex-direction: column; gap: 3px; }
  .panel-meta .item .v { font-family: 'Inter Tight', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--cream); letter-spacing: -0.02em; }
  .panel-meta .item .k { font-size: 0.7rem; color: var(--mute); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }

  /* ====== TRIO ====== */
  /* ============ BUILT-TO-BUILD-HIGH STACK
     Two foundations + two tools. Brand explainer for first-time visitors. */
  .b2h { padding: 90px 0 60px; text-align: center; position: relative; }
  .b2h::before { content: ""; position: absolute; left: 50%; top: 0; width: 80%; max-width: 800px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
  .b2h-eyebrow {
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--aurora-3); margin: 0 0 14px;
  }
  .b2h-head {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.18;
    margin: 0 auto 42px; max-width: 720px; color: var(--cream);
  }
  .b2h-head em {
    font-style: normal;
    background: var(--grad-aurora-h);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .b2h-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 920px;
    margin: 0 auto;
  }
  @media (max-width: 720px) {
    .b2h-grid { grid-template-columns: 1fr; gap: 14px; max-width: 480px; }
  }
  .b2h-card {
    display: flex; flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
    padding: 26px 26px 22px;
    border-radius: 20px;
    background: rgba(13,12,20,0.92);
    border: 1px solid rgba(245,241,234,0.10);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
  }
  .b2h-card::before {
    content: ""; position: absolute; inset: 0;
    pointer-events: none; border-radius: 20px;
    background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(212,175,55,0.10), transparent 70%);
    opacity: 0; transition: opacity 0.4s var(--ease);
  }
  .b2h-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,217,122,0.32);
    background: rgba(13,12,20,0.72);
  }
  .b2h-card:hover::before { opacity: 1; }
  .b2h-tag {
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.20em; text-transform: uppercase;
    color: var(--mute-2);
  }
  .b2h-name {
    margin: 0;
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.35rem; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.1;
    color: var(--cream);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .b2h-sub {
    margin: 4px 0 8px;
    font-size: 0.92rem; line-height: 1.55;
    color: var(--mute);
  }
  .b2h-sub em { color: var(--cream); font-style: italic; }
  .b2h-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--sky);
    margin-top: auto;
    transition: color 0.3s var(--ease), gap 0.3s var(--ease);
  }
  .b2h-card:hover .b2h-cta { color: var(--aurora-3); gap: 11px; }

  /* H² mark — sky → amber gradient, amber exponent */
  .b2h-mark-h2 {
    font-size: 1.8rem; font-weight: 900;
    letter-spacing: -0.04em;
    display: inline-flex; align-items: flex-start;
    background: linear-gradient(120deg, #b8941f 0%, #d4af37 30%, #c89678 65%, #ffc870 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(212,175,55,0.32));
    line-height: 1;
  }
  .b2h-mark-h2 sup {
    font-size: 0.5em; font-weight: 800; margin-left: 0.04em;
    background: linear-gradient(120deg, #ffe28a, #ffc870 60%, #ffa53d);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateY(-0.05em);
    display: inline-block; line-height: 1;
  }
  /* AI² mark — cream → sky gradient, sky exponent */
  .b2h-mark-ai2 {
    font-size: 1.5rem; font-weight: 900;
    letter-spacing: -0.03em;
    display: inline-flex; align-items: flex-start;
    background: linear-gradient(120deg, #f5f1ea 0%, #c8e0f5 50%, #d4af37 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(212,175,55,0.28));
    line-height: 1;
  }
  .b2h-mark-ai2 sup {
    font-size: 0.5em; font-weight: 800; margin-left: 0.04em;
    background: linear-gradient(120deg, #d4af37, #b8941f);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateY(-0.05em);
    display: inline-block; line-height: 1;
  }
  .b2h-name-text {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700; letter-spacing: 0.02em;
    color: var(--cream); font-size: 1rem;
  }
  /* Per-card subtle accent borders */
  .b2h-found { border-color: rgba(255,217,122,0.18); }
  .b2h-fwk   { border-color: rgba(255,165,61,0.22); }
  .b2h-h2    { border-color: rgba(212,175,55,0.22); }
  .b2h-ai2   { border-color: rgba(255,217,122,0.18); }

  .b2h-tag-line {
    margin-top: 36px;
    font-size: 0.95rem; color: var(--mute);
    letter-spacing: 0.02em;
  }
  .b2h-tag-line em {
    color: var(--cream); font-style: italic;
    font-weight: 500;
  }

  /* Light theme — same structure, ink-on-paper palette */
  body.theme-light .b2h-card {
    background: rgba(255,253,248,0.78) !important;
    border-color: rgba(26,24,32,0.12) !important;
  }
  body.theme-light .b2h-card:hover {
    background: rgba(255,253,248,0.95) !important;
    border-color: rgba(216,102,24,0.36) !important;
  }
  body.theme-light .b2h-name-text { color: var(--cream) !important; }

  .trio { padding: 80px 0; text-align: center; position: relative; }
  .trio::before { content: ""; position: absolute; left: 50%; top: 0; width: 80%; max-width: 800px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
  .trio-words {
    display: inline-flex; flex-wrap: wrap; justify-content: center;
    gap: 18px 36px;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--cream);
  }
  .trio-words .w {
    position: relative;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    cursor: default;
  }
  .trio-words .w:hover { transform: translateY(-4px); }
  .trio-words .w::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -8px;
    height: 2px;
    background: var(--grad-aurora);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
  }
  .trio-words .w:hover::after { transform: scaleX(1); }
  .trio-words .sep { color: var(--mute-2); font-weight: 300; }

  .trio-tag { margin-top: 44px; font-size: 0.95rem; color: var(--mute); letter-spacing: 0.04em; max-width: 480px; margin-left: auto; margin-right: auto; }

  /* ====== FINAL ====== */
  .final { padding: 90px 0 70px; text-align: center; position: relative; }
  .final h2 {
    font-size: clamp(2.4rem, 5.2vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
    font-weight: 700;
    max-width: 880px; margin: 0 auto;
  }
  .final h2 .serif {
    background: var(--grad-aurora);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .final p { margin: 28px auto 0; max-width: 540px; color: var(--mute); font-size: 1.0625rem; line-height: 1.55; }
  .final .ctas { display: inline-flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 44px; }

  .magnetic {
    position: relative;
    will-change: transform;
    transition: transform 0.18s ease-out;
  }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 17px 28px;
    border-radius: 999px;
    background: var(--cream);
    color: var(--ink);
    font-weight: 600; font-size: 1rem;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
  }
  .btn-primary::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--grad-aurora);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 0;
  }
  .btn-primary:hover { box-shadow: 0 18px 50px rgba(212,175,55,0.32); }
  .btn-primary:hover::before { opacity: 1; }
  .btn-primary span, .btn-primary svg { position: relative; z-index: 1; }
  .btn-primary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  .btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 26px;
    border-radius: 999px;
    background: transparent;
    color: var(--cream);
    font-weight: 500; font-size: 1rem;
    border: 1px solid var(--line-2);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
  }
  .btn-ghost:hover { background: rgba(245,241,234,0.05); border-color: rgba(245,241,234,0.35); }

  /* ====== FOOTER ====== */
  footer { padding: 60px 0 48px; border-top: 1px solid var(--line); position: relative; z-index: 3; }
  footer .container { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; }
  footer .legal { font-size: 0.8125rem; color: var(--mute-2); }
  footer .flinks { display: flex; gap: 22px; flex-wrap: wrap; }
  footer .flinks a { font-size: 0.8125rem; color: var(--mute); transition: color 0.15s; }
  footer .flinks a:hover { color: var(--cream); }
  footer .logo-svg { height: 26px; color: var(--cream); }

  @media (prefers-reduced-motion: reduce) {
    .blob, .hero h1 .char, .hero .sub, .hero .pill, .hero .go-high, .scroll-cue,
    .hero-sun, .hero-sun .core, .hero-sun .rays, .hero-sun .disc, .hero-sun .halo,
    .bridge-line, .bridge-track, .ghost-word,
    .panel-bg, .panel.high .disc, .panel.high .scan, .panel.community .ring,
    .panel.community .peaks, .panel.community .peaks .camp,
    .panel.community .peaks .summit-beacon, .panel.community .peaks-caption,
    .reveal, .reveal.in {
      animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    /* Bridge IntersectionObserver triggers .in — make sure final state is immediate-visible */
    .bridge-line { opacity: 1 !important; transform: none !important; color: var(--cream) !important; }
  }

/* CTA arrow icons — ensure #i-arrow renders as a thin stroked arrow, never a filled black triangle. Coins (.coin-ic) are exempt. */
.btn svg:not(.coin-ic), .door-cta svg, .panel-cta svg, .b2h-cta svg,
.read-more svg, .nav-cta svg, .hero-actions .btn svg, .im-btn-primary svg {
  width: 1em; height: 1em; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.12em; flex-shrink: 0;
}
.coin-ic { vertical-align: -0.34em; }

/* ===== Illuminated quote capsule — floating 3D gold-lit pop-up ===== */
.quote-capsule { position: relative; max-width: 720px; margin: 72px auto; padding: 30px 44px 32px; border-radius: 46px; text-align: center;
  background: linear-gradient(150deg, rgba(212,175,55,0.16), rgba(9,8,14,0.97) 55%);
  border: 1px solid rgba(212,175,55,0.55);
  box-shadow: 0 0 50px rgba(212,175,55,0.22), 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: qcFloat 6.5s ease-in-out infinite; }
@keyframes qcFloat {
  0%,100% { transform: translateY(0); box-shadow: 0 0 44px rgba(212,175,55,0.18), 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.10); }
  50%     { transform: translateY(-7px); box-shadow: 0 0 64px rgba(212,175,55,0.30), 0 30px 72px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.13); }
}
.quote-capsule .qc-mark { display:block; font-family:'Instrument Serif',Georgia,serif; font-size:3rem; line-height:1; color:#f0c44e; opacity:1; margin-bottom:2px; }
.quote-capsule blockquote { margin:0; font-family:'Inter Tight',sans-serif; font-size:clamp(1.2rem,2.4vw,1.6rem); font-weight:700; line-height:1.45; color:#fbf8f2; letter-spacing:-0.015em; text-shadow:0 1px 3px rgba(0,0,0,0.45); }
.quote-capsule .qc-by { margin-top:18px; font-family:'Inter Tight',sans-serif; font-size:0.8rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#f0c44e; }
@media (prefers-reduced-motion: reduce) { .quote-capsule { animation: none; } }
@media (max-width:600px) { .quote-capsule { margin:48px 14px; padding:26px 22px; border-radius:32px; } }

/* ===== Teri leader quote — recurring signature line ===== */
.teri-quote { max-width: 780px; margin: 60px auto; padding: 28px 32px; display: flex; gap: 22px; align-items: center;
  background: linear-gradient(150deg, rgba(212,175,55,0.10), rgba(13,12,20,0.7) 70%);
  border: 1px solid var(--line-2); border-left: 3px solid var(--sky); border-radius: 20px; }
.teri-quote .tq-av { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #b8941f, #ffe28a); color: #1a1408;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 1rem;
  overflow: hidden; position: relative; box-shadow: 0 0 18px rgba(212,175,55,0.3); }
.teri-quote .tq-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.teri-quote blockquote { margin: 0; font-family: 'Inter Tight', sans-serif; font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 1.42; color: var(--cream); letter-spacing: -0.01em; }
.teri-quote blockquote em { font-style: normal; background: var(--grad-aurora-h);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.teri-quote .tq-by { margin-top: 12px; font-family: 'Inter Tight', sans-serif; font-size: 0.74rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); }
@media (max-width: 560px) { .teri-quote { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; } }

/* ===== Email lead capture (starter-guide magnet) ===== */
.lead-capture { max-width: 820px; margin: 64px auto; padding: 42px 36px; text-align: center;
  border: 1px solid rgba(212,175,55,0.35); border-radius: var(--r-xl, 36px);
  background: linear-gradient(150deg, rgba(212,175,55,0.10), rgba(13,12,20,0.7) 70%);
  box-shadow: 0 0 50px rgba(212,175,55,0.10), inset 0 1px 0 rgba(255,255,255,0.06); }
.lead-capture .lc-eyebrow { display:inline-block; font-family:'Inter Tight',sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--sky); margin-bottom:14px; }
.lead-capture h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing:-0.03em; color:var(--cream); margin:0 0 12px; line-height:1.1; }
.lead-capture .lc-sub { max-width: 52ch; margin:0 auto; color:var(--mute); font-size:1rem; line-height:1.6; }
.lead-capture .lc-sub em { color:var(--cream); font-style:italic; }
.lead-capture form { display:flex; gap:10px; max-width:500px; margin:24px auto 0; flex-wrap:wrap; justify-content:center; }
.lead-capture input[type=email] { flex:1 1 240px; padding:14px 18px; border-radius:999px; border:1px solid var(--line-2); background:rgba(245,241,234,0.06); color:var(--cream); font-family:'Inter',sans-serif; font-size:1rem; }
.lead-capture input[type=email]::placeholder { color:var(--mute-2); }
.lead-capture input[type=email]:focus { outline:none; border-color:var(--sky); }
.lead-capture button { padding:14px 26px; border-radius:999px; border:0; background:var(--cream); color:var(--ink); font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.95rem; cursor:pointer; transition:transform .18s, box-shadow .3s; }
.lead-capture button:hover { transform:translateY(-1px); box-shadow:0 12px 30px rgba(212,175,55,0.3); }
.lead-capture .lc-fine { margin-top:14px; font-size:0.78rem; color:var(--mute-2); }
.lead-capture .lc-hp { position:absolute; left:-9999px; }