/* ──────────────────────────────────────────────────────────
   Sidetake — coming soon
   1:1 with BridgeAI: bright cream wash, big two-tone headline,
   pill nav, BL info card + dual CTAs, BR preview card.
   ────────────────────────────────────────────────────────── */

:root {
  --ink:        #0f1814;       /* dark text — used inside light surfaces (modals, white CTA) */
  --forest:     #244836;
  --sage:       #b8d8c4;       /* brightened sage — survives on dark */
  --sage-deep:  #8fc6a3;
  --paper:      #f3efe5;       /* cream surface (modal cards, white CTA fill) */
  --paper-warm: #ebe4d4;
  --cream:      #f3efe5;       /* primary text on dark canvas */
  --canvas:     #08120e;       /* dark canvas — base for the new spotlight composition */
  --canvas-2:   #0d1a14;
  /* dark-on-cream tokens — used inside the modal/form, which sits on cream paper.
     For text on the dark canvas, components use var(--cream) directly instead. */
  --mute:       rgba(15, 24, 20, 0.62);
  --soft:       rgba(15, 24, 20, 0.78);

  --glass:        rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.10);
  --glass-line:   rgba(255, 255, 255, 0.20);
  --glass-shadow:
    0 30px 80px -28px rgba(0, 0, 0, 0.65),
    0 8px 24px -10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.18);

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --pad: clamp(20px, 4vw, 56px);
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--cream);
  background: #efe6cf; /* illustrated cream-warm pavement under the scene */
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  cursor: none;
}
@media (pointer: coarse) { body { cursor: auto; } }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: none; border: 0; color: inherit; background: transparent; }
@media (pointer: coarse) { button { cursor: pointer; } }
sup { font-size: 0.45em; vertical-align: super; font-weight: 500; opacity: 0.7; }

/* ──────────────────────────────────────────────────────────
   Stage — illustrated top-down "creative campus" scene.
   The SVG fills the viewport; everything else (vignette, grain)
   sits on top to gently focus the hero in the centre.
   ────────────────────────────────────────────────────────── */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: #efe6cf;
}

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* allow shapes to transform around their own centre */
.scene * { transform-box: fill-box; }

/* ──────────────────────────────────────────────────────────
   Micro-animations — calm, ambient, "afternoon in the park".
   Everything is slow and small so it reads as life, not motion.
   ────────────────────────────────────────────────────────── */

/* drifting cloud shadows — large, soft, slow. They sway across the field
   so the whole lawn feels alive and integrated (no figures needed). */
.cloud--1 { animation: cloud1 64s ease-in-out infinite; }
.cloud--2 { animation: cloud2 82s ease-in-out infinite; }
.cloud--3 { animation: cloud3 54s ease-in-out infinite; }
.cloud--4 { animation: cloud4 96s ease-in-out infinite; }
.cloud--5 { animation: cloud5 74s ease-in-out infinite; }
@keyframes cloud1 {
  0%, 100% { transform: translate(160px, 280px); }
  50%      { transform: translate(780px, 350px); }
}
@keyframes cloud2 {
  0%, 100% { transform: translate(1180px, 650px); }
  50%      { transform: translate(540px, 560px); }
}
@keyframes cloud3 {
  0%, 100% { transform: translate(840px, 150px); }
  50%      { transform: translate(1280px, 240px); }
}
@keyframes cloud4 {
  0%, 100% { transform: translate(300px, 720px); }
  50%      { transform: translate(1080px, 640px); }
}
@keyframes cloud5 {
  0%, 100% { transform: translate(1360px, 430px); }
  50%      { transform: translate(760px, 500px); }
}

/* dog trotting across the lawn, off-screen wrap = seamless. Tiny bob. */
.scene__dog { animation: dogTrot 34s linear infinite; }
.scene__dogInner {
  transform-origin: center;
  animation: dogBob 0.5s ease-in-out infinite;
}
@keyframes dogTrot {
  0%   { transform: translate(-80px, 695px)  rotate(180deg); }
  48%  { transform: translate(900px, 672px)  rotate(180deg); }
  52%  { transform: translate(900px, 672px)  rotate(180deg); }
  100% { transform: translate(1700px, 700px) rotate(180deg); }
}
@keyframes dogBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}

/* trees — gentle leaf sway; --d staggers each canopy */
.scene__trees .tree {
  transform-origin: center;
  animation: treeSway 7.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes treeSway {
  0%, 100% { transform: rotate(-0.8deg); }
  50%      { transform: rotate( 0.8deg); }
}

/* butterflies — wander in a closed loop (seamless) while their wings flutter */
.scene__bfly--1 { animation: bfly1 24s ease-in-out infinite; }
.scene__bfly--2 { animation: bfly2 30s ease-in-out infinite; animation-delay: -11s; }
.scene__bflyInner {
  transform-origin: center;
  animation: flutter 0.26s ease-in-out infinite;
}
@keyframes flutter {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.45); }
}
@keyframes bfly1 {
  0%   { transform: translate(330px, 560px); }
  25%  { transform: translate(560px, 430px); }
  50%  { transform: translate(900px, 540px); }
  75%  { transform: translate(620px, 660px); }
  100% { transform: translate(330px, 560px); }
}
@keyframes bfly2 {
  0%   { transform: translate(1280px, 360px); }
  25%  { transform: translate(1040px, 470px); }
  50%  { transform: translate(1260px, 600px); }
  75%  { transform: translate(1430px, 470px); }
  100% { transform: translate(1280px, 360px); }
}

/* dappled tree-shade — the leaf-gaps drift/twinkle very gently */
.scene__dapple {
  transform-origin: center;
  animation: dappleDrift 9s ease-in-out infinite;
}
@keyframes dappleDrift {
  0%, 100% { transform: translate(0, 0);     opacity: 0.30; }
  50%      { transform: translate(6px, 4px); opacity: 0.40; }
}

/* a playground ball rolling slowly across the open grass */
.scene__ball {
  animation: ballRoll 11s ease-in-out infinite;
}
.scene__ballInner {
  transform-origin: center;
  animation: ballSpin 11s ease-in-out infinite;
}
@keyframes ballRoll {
  0%, 100% { transform: translate(905px, 632px); }
  50%      { transform: translate(990px, 660px); }
}
@keyframes ballSpin {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(150deg); }
}

/* leaves drifting through the shade on the right */
.scene__leaf--1 { animation: leaf1 17s linear infinite; }
.scene__leaf--2 { animation: leaf2 23s linear infinite; animation-delay: -9s; }
.scene__leaf--3 { animation: leaf3 20s linear infinite; animation-delay: -5s; }
@keyframes leaf1 {
  0%   { transform: translate(1180px, 180px) rotate(0deg);   opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translate(1560px, 540px) rotate(420deg); opacity: 0; }
}
@keyframes leaf2 {
  0%   { transform: translate(1500px, 220px) rotate(0deg);    opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translate(1240px, 640px) rotate(-360deg); opacity: 0; }
}
@keyframes leaf3 {
  0%   { transform: translate(1360px, 150px) rotate(0deg);   opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translate(1620px, 600px) rotate(540deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud--1, .cloud--2, .cloud--3, .cloud--4, .cloud--5,
  .scene__bfly--1, .scene__bfly--2, .scene__bflyInner,
  .scene__dog, .scene__dogInner,
  .scene__trees .tree,
  .scene__dapple,
  .scene__ball, .scene__ballInner,
  .scene__leaf--1, .scene__leaf--2, .scene__leaf--3 {
    animation: none !important;
  }
}

/* soft vignette over the illustrated scene — pulls focus to centre,
   keeps the cards in their pool of softer light. */
.stage__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 55%,
      transparent 48%,
      rgba(15, 30, 22, 0.22) 78%,
      rgba(15, 30, 22, 0.42) 100%);
  mix-blend-mode: multiply;
}

/* warm film grain — finer than before, sits on cream nicely */
.stage__grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ──────────────────────────────────────────────────────────
   Cursor
   ────────────────────────────────────────────────────────── */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.4px solid rgba(243, 239, 229, 0.70);
  background: rgba(243, 239, 229, 0.04);
  pointer-events: none;
  z-index: 1000;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition:
    width 0.35s var(--ease), height 0.35s var(--ease),
    background 0.35s var(--ease), border-color 0.35s var(--ease);
  /* dark halo + light ring — visible on both dark canvas and cream surfaces
     without resorting to a colour-inverting blend mode that carves the icon. */
  box-shadow:
    0 0 0 0.5px rgba(15, 24, 20, 0.30),
    0 1px 6px rgba(15, 24, 20, 0.22);
}
.cursor.is-hover {
  width: 56px; height: 56px;
  background: rgba(243, 239, 229, 0.10);
  border-color: rgba(243, 239, 229, 0.92);
}
@media (pointer: coarse) { .cursor { display: none; } }

/* ──────────────────────────────────────────────────────────
   Top bar — brand · pill nav · login (BridgeAI 1:1)
   ────────────────────────────────────────────────────────── */
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: calc(22px + var(--safe-top)) calc(var(--pad) + var(--safe-right))
           22px calc(var(--pad) + var(--safe-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.top > * { pointer-events: auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 22px;
  white-space: nowrap;
  flex-shrink: 0;
  /* logo presented clean — no drop shadow */
  text-shadow: none;
}
.brand:hover { opacity: 0.92; }
.brand__mark {
  width: 26px;
  height: 26px;
  display: inline-flex;
  transition: transform 0.4s var(--ease);
}
/* playful wiggle on the logo when you hover the brand */
.brand:hover .brand__mark { animation: logoWiggle 0.6s var(--ease); }
@keyframes logoWiggle {
  0%   { transform: rotate(0deg)  scale(1); }
  28%  { transform: rotate(-12deg) scale(1.12); }
  60%  { transform: rotate(9deg)  scale(1.07); }
  100% { transform: rotate(0deg)  scale(1); }
}
.brand__mark svg { width: 100%; height: 100%; color: var(--cream); }
.brand__word { font-family: 'Geist', 'Inter', sans-serif; }

/* single top-right CTA — dark see-through glass pill */
.cta-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(15, 28, 22, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: none;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  box-shadow:
    0 18px 36px -10px rgba(15, 28, 22, 0.55),
    0 6px 14px -4px rgba(15, 28, 22, 0.30),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.20);
}
@media (pointer: coarse) { .cta-top { cursor: pointer; } }
.cta-top:hover {
  background: rgba(15, 24, 20, 0.88);
  transform: translateY(-2px) scale(1.04);
}
.cta-top__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 10px var(--sage);
  flex-shrink: 0;
}
.cta-top__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.5;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0;    }
}
.cta-top svg {
  width: 14px;
  height: 14px;
  transition: transform 0.4s var(--ease);
}
.cta-top:hover svg { transform: translateX(3px); }

/* ──────────────────────────────────────────────────────────
   Letter-bounce wave (subtle, on hover)
   ────────────────────────────────────────────────────────── */
.ltr {
  display: inline-block;
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.34, 1.5, 0.64, 1);
}
/* Letter-jump-on-hover removed — the per-letter bounce on "Reserve your spot"
   and the buttons read as janky. Hovers now use clean whole-element states. */
/* slight color shift on brand hover for extra delight */
.brand:hover .ltr { color: var(--sage-deep); }

/* ──────────────────────────────────────────────────────────
   Hero — big two-tone headline, dead center
   ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding: clamp(140px, 18vh, 200px)
           calc(var(--pad) + var(--safe-right))
           calc(clamp(40px, 6vh, 60px) + var(--safe-bottom))
           calc(var(--pad) + var(--safe-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
}

/* headline — sized to fit two clean lines without wrapping mid-line */
.head {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: clamp(52px, 8vw, 132px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0;
  color: #ffffff;
  text-align: center;
  max-width: 1320px;
  /* no shadow at all — the deep grass gives the white type its contrast */
  text-shadow: none;
}
.head__line {
  display: block;
  padding: 0 0.04em;
}
.head__line--pill { padding: 0 0.04em; }
.head .word {
  display: inline-block;
  margin-right: 0.06em;
}
.head .word:last-child { margin-right: 0; }

/* "confused and curious." sits inline — the gradient text and the spotlight
   beam do the work, no glass capsule. .head__pill is now a transparent click
   wrapper so taps anywhere across the phrase still cycle the theme. */
.head__pill {
  position: relative;
  display: inline-block;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: none;
  isolation: isolate;
}
@media (pointer: coarse) { .head__pill { cursor: pointer; } }

/* glow halo kept off — let the god-ray light the words */
.head__pill-glow { display: none; }

/* click flash — a brief brightening of the gradient text itself, no capsule */
.head__pill.is-flashed .head__char {
  animation: charFlash 0.6s cubic-bezier(0.22, 1.4, 0.36, 1);
}
@keyframes charFlash {
  0%   { filter: none; }
  35%  { filter: drop-shadow(0 0 14px color-mix(in oklab, var(--grad-from, #b8d8c4) 80%, transparent)); }
  100% { filter: none; }
}
/* gradient color vars — animate smoothly via @property where supported */
@supports (background: paint(something)) {
  @property --grad-from { syntax: '<color>'; inherits: true; initial-value: #3d6a4d; }
  @property --grad-to   { syntax: '<color>'; inherits: true; initial-value: #2a5538; }
}
.head {
  --grad-from: #ffffff;
  --grad-to:   #ffffff;
  --grad-shimmer: rgba(255, 255, 255, 0.55);
}

/* darker, richer sage with a tighter gradient — reads cleanly over bright bg.
   The gradient lives on each per-letter .head__char so we can transform letters
   independently while keeping the gradient unbroken. */
.head__accent {
  position: relative;
  display: inline-block;
  cursor: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    --grad-from 0.9s var(--ease),
    --grad-to   0.9s var(--ease),
    filter      0.5s var(--ease);
}
@media (pointer: coarse) { .head__accent { cursor: pointer; } }

/* per-letter container — JS splits each accent word into .head__char.
   Each letter carries its own clipped gradient so transforms don't break the
   look. The 180deg gradient is identical per letter, so visually it reads as
   one continuous gradient across the word. */
.head__char {
  display: inline-block;
  transform-origin: 50% 100%;
  /* solid colour rendering (not background-clip) — gives true pure white at
     default and avoids the sub-pixel haze that gradient-clipped text picks up. */
  color: var(--grad-from);
  transition:
    transform 0.55s cubic-bezier(0.34, 1.5, 0.64, 1),
    filter   0.4s var(--ease),
    color    0.9s var(--ease);
}

/* hover lift wave — kept very subtle: a small staggered rise, barely any
   rotation or scale, so the letters lift gently instead of jumping out. */
.head__accent:hover .head__char {
  transform: translateY(-4px) rotate(var(--rot, 0deg)) scale(1.008);
  transition-delay: calc(var(--i) * 26ms);
}
.head__accent:hover .head__char:nth-child(odd)  { --rot: -1.5deg; }
.head__accent:hover .head__char:nth-child(even) { --rot:  1.5deg; }

/* leave: reverse-stagger as the letters drop back */
.head__accent .head__char {
  transition-delay: calc((var(--n) - var(--i)) * 14ms);
}

/* click pulse — punchy scale-bounce on the whole word */
.head__accent.is-clicked {
  animation: wordPulse 0.55s cubic-bezier(0.22, 1.4, 0.36, 1);
}
@keyframes wordPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  70%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

/* dotted underline that draws in on hover — invites interaction */
.head__accent::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0.06em;
  height: 6px;
  background-image: radial-gradient(circle, var(--grad-from) 1.4px, transparent 1.6px);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  opacity: 0;
  transform: translateY(4px) scaleX(0.6);
  transform-origin: left center;
  transition:
    opacity 0.35s var(--ease),
    transform 0.5s var(--ease),
    background-image 0.9s var(--ease);
  pointer-events: none;
}
.head__accent:hover::after,
.head__accent:focus-visible::after {
  opacity: 0.55;
  transform: translateY(0) scaleX(1);
}

.head__accent:focus-visible {
  outline: none;
}
.head__accent:focus-visible .head__char {
  filter: drop-shadow(0 0 0.45em rgba(127, 166, 138, 0.55));
}

/* sparkle particle — short-lived bursts spawned on click */
.spark {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 90;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* lede */
.lede {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--cream);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  max-width: 600px;
  /* no shadow — clean text on the deep grass */
  text-shadow: none;
}

/* ──────────────────────────────────────────────────────────
   Bottom-left info card + dual CTAs (BridgeAI: BridgeCore™)
   ────────────────────────────────────────────────────────── */
.info {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  bottom: clamp(28px, 4vh, 56px);
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 20px 20px;
  background: var(--cream);
  /* flat illustrated card: thin border, a small flat "lip" and one soft,
     green-tinted ground shadow that matches the scene's contact shadows. */
  border: 1px solid rgba(31, 50, 30, 0.10);
  border-radius: 20px;
  box-shadow:
    0 3px 0 0 rgba(31, 50, 30, 0.10),
    0 22px 44px -22px rgba(20, 42, 20, 0.45);
  isolation: isolate;
}
.info::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 32%);
  pointer-events: none;
  z-index: -1;
}
.info__head {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.info__chip {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4d7c5e;
  flex-shrink: 0;
  transition: transform 0.5s var(--ease), color 0.3s var(--ease);
}
/* the little target icon rotates + brightens when you're on the card */
.info:hover .info__chip { transform: rotate(180deg) scale(1.12); color: var(--forest); }
.info__chip svg { width: 100%; height: 100%; }
.info__title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.info__copy {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(15, 24, 20, 0.66);
  letter-spacing: 0.005em;
}
.info__copy strong { color: var(--ink); font-weight: 600; }

.actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}

/* buttons (white pill primary + ghost text — BridgeAI 1:1) */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
  overflow: hidden;
}
.btn--primary {
  background: var(--ink);
  color: var(--cream);
  border: 1px solid rgba(15, 24, 20, 0.85);
  font-weight: 600;
  box-shadow:
    0 12px 28px -10px rgba(15, 24, 20, 0.60),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.40);
}
.btn--primary:hover {
  background: #1a2c22;
  transform: translateY(-2px) scale(1.035);
  box-shadow:
    0 16px 36px -10px rgba(15, 24, 20, 0.70),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.45);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  padding: 12px 12px 12px 4px;
}
.btn--ghost:hover { color: var(--sage-deep); transform: scale(1.04); }
.btn--ghost svg {
  width: 14px;
  height: 14px;
  transition: transform 0.4s var(--ease);
}
.btn--ghost:hover svg { transform: translateX(4px); }
.btn--full { width: 100%; padding: 14px 22px; font-weight: 600; }

.btn__inner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.1em;
  line-height: 1.1;
}
.btn__t {
  display: block;
  transition: transform 0.5s var(--ease);
}
.btn__t--alt {
  position: absolute;
  inset: 0;
  transform: translateY(110%);
}
.btn--primary:hover .btn__t       { transform: translateY(-110%); }
.btn--primary:hover .btn__t--alt  { transform: translateY(0); }

/* ──────────────────────────────────────────────────────────
   Bottom-right preview card (BridgeAI's video card)
   ────────────────────────────────────────────────────────── */
.preview {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(28px, 4vh, 56px);
  display: flex;
  align-items: stretch;
}
/* Cream surface — SAME design language as the bottom-left info card. */
.preview__card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 12px;
  background: var(--cream);
  border: 1px solid rgba(31, 50, 30, 0.10);
  border-radius: 18px;
  text-align: left;
  cursor: none;
  transition: transform 0.4s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow:
    0 3px 0 0 rgba(31, 50, 30, 0.10),
    0 22px 44px -22px rgba(20, 42, 20, 0.45);
  isolation: isolate;
}
.preview__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 32%);
  pointer-events: none;
  z-index: -1;
}
@media (pointer: coarse) { .preview__card { cursor: pointer; } }
.preview__card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 3px 0 0 rgba(31, 50, 30, 0.10),
    0 26px 50px -22px rgba(20, 42, 20, 0.5);
}
.preview__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2c4736 0%, #1a2c22 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
  transition: transform 0.45s var(--ease);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.25),
    0 4px 12px -4px rgba(15, 24, 20, 0.4);
}
/* logo tile gives a little spin-pop when you hover the card */
.preview__card:hover .preview__thumb { transform: scale(1.1) rotate(-8deg); }
.preview__mark { width: 26px; height: 26px; }
.preview__body {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.preview__eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4d7c5e;
}
.preview__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.preview__platforms {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(15, 24, 20, 0.58);
  margin-top: 1px;
}
.preview__platforms svg {
  width: 11px;
  height: 11px;
}
.preview__dot {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: rgba(15, 24, 20, 0.35);
  margin: 0 2px;
}

/* ──────────────────────────────────────────────────────────
   Responsive — desktop · iPad · mobile · landscape
   Layered: each breakpoint refines the previous tier.
   ────────────────────────────────────────────────────────── */

/* iPad landscape & smaller laptops (≤ 1180px):
   keep absolute card layout, tighten cards, prevent overlap with headline. */
@media (max-width: 1180px) {
  .info {
    max-width: 320px;
    padding: 16px 18px 16px 16px;
  }
  .info__copy { font-size: 12px; }
  .actions { gap: 8px; }
  .btn { padding: 11px 18px; font-size: 13.5px; }
  .btn--ghost { padding: 11px 8px 11px 4px; }
  .preview__card {
    padding: 11px 16px 11px 11px;
    gap: 12px;
  }
  .preview__thumb { width: 44px; height: 44px; }
}

/* iPad portrait & large phone landscape (≤ 980px):
   stack info + preview at the bottom of the hero,
   keep both visible — preview is part of the value prop. */
@media (max-width: 980px) {
  .hero {
    padding-top: clamp(120px, 16vh, 180px);
    padding-bottom: clamp(28px, 4vh, 48px);
    gap: 20px;
  }
  .info, .preview {
    position: static;
    margin: 0 auto;
    align-items: center;
    text-align: center;
  }
  .info {
    width: min(420px, 100%);
    max-width: none;
  }
  .info__copy { text-align: center; }
  .actions { justify-content: center; flex-wrap: wrap; }
  .preview { width: min(420px, 100%); }
  .preview__card { width: 100%; justify-content: flex-start; }
}

/* Mid tablets / large phones (≤ 768px) */
@media (max-width: 768px) {
  .top {
    padding-top: calc(16px + var(--safe-top));
    padding-bottom: 16px;
  }
  .brand { font-size: 19px; }
  .brand__mark { width: 22px; height: 22px; }
  .cta-top {
    padding: 10px 16px 10px 14px;
    font-size: 12.5px;
  }
  .cta-top svg { width: 12px; height: 12px; }

  .hero {
    padding-top: clamp(96px, 14vh, 140px);
    gap: 18px;
  }
  .head .word { margin-right: 0.05em; }
  .lede { max-width: 92%; }
}

/* Phones (≤ 560px) */
@media (max-width: 560px) {
  .hero {
    padding-top: clamp(88px, 13vh, 120px);
    gap: 16px;
  }
  .head { letter-spacing: -0.035em; }
  .head .word { margin-right: 0.04em; }

  .cta-top { padding: 9px 14px 9px 12px; font-size: 12px; }
  .cta-top svg { width: 11px; height: 11px; }

  .info {
    padding: 16px 16px 18px;
    gap: 12px;
    border-radius: 16px;
  }
  .info__title { font-size: 13px; }
  .info__copy { font-size: 12px; line-height: 1.55; }
  .actions { gap: 10px; }
  .btn { padding: 11px 18px; font-size: 13.5px; min-height: 44px; }
  .btn--ghost { padding: 11px 10px 11px 4px; }

  .preview__card {
    padding: 10px 14px 10px 10px;
    gap: 11px;
    border-radius: 14px;
  }
  .preview__thumb { width: 42px; height: 42px; border-radius: 11px; }
  .preview__mark { width: 22px; height: 22px; }
  .preview__title { font-size: 13.5px; }
  .preview__eyebrow { font-size: 10px; }
  .preview__platforms { font-size: 11px; }

  /* modal — fill more of the screen on small phones */
  .modal__card {
    width: calc(100% - 24px);
    padding: 28px 22px 22px;
    border-radius: 16px;
    gap: 12px;
  }
  .modal__title { font-size: 22px; }
  .modal__sub { font-size: 12.5px; }
  .field__row { height: 46px; padding: 0 12px; }
  .field__prefix { font-size: 12.5px; }
  .field__input { font-size: 16px; } /* prevent iOS auto-zoom on focus */
  .submit-btn { height: 48px; font-size: 14px; }
  .thanks__card {
    padding: 30px 22px 24px;
    width: calc(100% - 24px);
    border-radius: 16px;
  }
  .thanks__title { font-size: 26px; }
}

/* Small phones (≤ 380px) — iPhone SE, mini etc. */
@media (max-width: 380px) {
  :root { --pad: 14px; }
  .top { gap: 8px; }
  .brand { font-size: 17px; gap: 6px; }
  .brand__mark { width: 20px; height: 20px; }
  .brand__word sup { display: none; }
  .cta-top {
    padding: 8px 12px 8px 11px;
    font-size: 11.5px;
    gap: 7px;
  }
  .cta-top__dot { width: 6px; height: 6px; }
  .cta-top svg { width: 10px; height: 10px; }
  .head { font-size: clamp(36px, 11.5vw, 46px); }
  .lede { font-size: 14px; }
  .info { padding: 14px 14px 16px; }
  .info__copy { font-size: 11.5px; }
  .modal__card { padding: 24px 18px 20px; }
  .modal__title { font-size: 20px; }
  .field__prefix { font-size: 11.5px; }
}

/* Landscape phones (short viewport):
   reclaim vertical space — hero isn't tall enough for headline + cards. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    padding-top: clamp(80px, 18vh, 110px);
    padding-bottom: 24px;
    gap: 14px;
  }
  .head { font-size: clamp(36px, 7vw, 64px); line-height: 1.0; }
  .lede { font-size: 14px; max-width: 560px; }
  .info, .preview {
    width: min(360px, 100%);
  }
  .info__copy { font-size: 12px; }
}

/* Touch devices (no hover) — make sure tap targets are comfortable
   and disable cursor-only / parallax-only visual effects for perf. */
@media (pointer: coarse) {
  .btn, .cta-top, .submit-btn, .tab, .modal__close { min-height: 44px; }
  .preview__card { min-height: 56px; }
  /* drop expensive backdrop blur on touch — half the gpu cost */
  .info, .preview__card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* fewer animation layers on small/mobile */
  .stage__beam::before, .stage__beam::after { filter: blur(4px); }
  .stage__bg img, .stage__fg img { filter: brightness(0.45); }
}

/* Containment hints — limited to elements whose paint is genuinely contained.
   .info and .preview wrappers can't use paint-containment because their cards'
   outer box-shadow extends beyond the wrapper bounds and would get clipped. */
.modal__card, .thanks__card { contain: layout; }
.head__accent { contain: layout style; }

/* Very large screens — keep content from getting lost in width. */
@media (min-width: 1600px) {
  .hero { padding-top: clamp(160px, 18vh, 220px); }
  .head { max-width: 1440px; }
}

/* ──────────────────────────────────────────────────────────
   Modal — opens with role pre-selected
   ────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 24, 20, 0.32);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 0;
  cursor: none;
}
@media (pointer: coarse) { .modal__scrim { cursor: pointer; } }

.modal__card {
  position: relative;
  z-index: 2;
  width: calc(100% - 32px);
  max-width: 420px;
  padding: 32px 28px 24px;
  background: #fbf7ed;
  border: 1px solid rgba(15, 24, 20, 0.06);
  border-radius: 18px;
  box-shadow:
    0 40px 100px -24px rgba(15, 24, 20, 0.45),
    0 8px 24px -10px rgba(15, 24, 20, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.5s var(--ease);
}
.modal.is-open .modal__card { transform: translateY(0) scale(1); }

.modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mute);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.modal__close:hover { background: rgba(15, 24, 20, 0.06); color: var(--ink); }
.modal__close svg { width: 14px; height: 14px; }

.modal__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 2px;
}
.modal__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.modal__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--forest);
}
.modal__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--soft);
}

/* tabs (modal) */
.tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(15, 24, 20, 0.05);
  border-radius: 9px;
  padding: 3px;
}
.tab {
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--mute);
  border-radius: 7px;
  transition: color 0.3s var(--ease);
}
.tab.is-active { color: var(--ink); }
.tabs__pill {
  position: absolute;
  top: 3px; left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: #fff;
  border-radius: 7px;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(15, 24, 20, 0.10);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.tabs[data-role="mentor"] .tabs__pill {
  transform: translateX(100%);
}
.tabs[data-role="mentor"] .tab[data-role="mentor"] {
  color: var(--ink);
}

/* form fields — clean label-above pattern */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field__label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--soft);
  padding-left: 2px;
}
.field__row {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(15, 24, 20, 0.12);
  border-radius: 10px;
  padding: 0 14px;
  height: 44px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field__row:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(15, 24, 20, 0.08);
}
.field__prefix {
  font-size: 13.5px;
  color: var(--mute);
  user-select: none;
  letter-spacing: -0.005em;
  white-space: nowrap;
  padding-right: 1px;
}
.field__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  letter-spacing: -0.005em;
  cursor: none;
  min-width: 0;
  height: 100%;
  padding: 0;
}
.field__input::placeholder { color: var(--mute); font-weight: 400; }
@media (pointer: coarse) { .field__input { cursor: text; } }

/* Mentor-only field: collapsed by default, expanded when JS toggles
   .is-visible. max-height + overflow:hidden gives reliable collapse + smooth
   transition. */
.field--mentor {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 0;
  margin-top: -14px; /* eat the parent's gap when hidden */
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.45s var(--ease),
    opacity   0.30s var(--ease),
    margin-top 0.45s var(--ease);
}
.field--mentor.is-visible {
  max-height: 240px;
  margin-top: 0;
  opacity: 1;
  pointer-events: auto;
}

/* Textarea row — auto-height, scrollable, padded like the input rows */
.field__row--textarea {
  height: auto;
  align-items: flex-start;
  padding: 12px 14px;
}
.field__textarea {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  letter-spacing: -0.005em;
  cursor: none;
  min-height: 64px;
  max-height: 160px;
  resize: vertical;
  width: 100%;
  line-height: 1.45;
  padding: 0;
}
.field__textarea::placeholder { color: var(--mute); font-weight: 400; }
@media (pointer: coarse) {
  .field__textarea { cursor: text; font-size: 16px; } /* prevent iOS zoom */
}
.field__counter {
  font-size: 11px;
  color: var(--mute);
  align-self: flex-end;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.field__counter.is-near-limit { color: #b94a4a; }

/* clean submit button — full-width dark pill */
.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: 4px;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.submit-btn:hover { background: #1f2c25; transform: translateY(-2px) scale(1.02); }
.submit-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}
.submit-btn:hover svg { transform: translateX(3px); }

/* global guard so any .btn svg never blows up to viewBox-default size */
.btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0;
  text-align: center;
  line-height: 1.4;
}
.hint.is-error { color: #b94a4a; }
.hint strong { color: var(--ink); font-weight: 600; }

/* ──────────────────────────────────────────────────────────
   Thanks
   ────────────────────────────────────────────────────────── */
.thanks {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 24, 20, 0.32);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.thanks.is-open { opacity: 1; pointer-events: auto; }
.thanks__card {
  background: #fbf7ed;
  border: 1px solid rgba(15, 24, 20, 0.06);
  border-radius: 18px;
  padding: 36px 32px 28px;
  width: calc(100% - 40px);
  max-width: 400px;
  text-align: center;
  box-shadow:
    0 40px 100px -24px rgba(15, 24, 20, 0.45),
    0 8px 24px -10px rgba(15, 24, 20, 0.18);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.6s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.thanks__card .submit-btn { margin-top: 14px; }
.thanks.is-open .thanks__card { transform: translateY(0) scale(1); }
.thanks__mark {
  display: inline-flex;
  width: 56px; height: 56px;
  color: var(--sage-deep);
  margin-bottom: 10px;
}
.thanks__mark svg { width: 100%; height: 100%; }
.thanks__mark circle, .thanks__mark path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
.thanks.is-open .thanks__mark circle { animation: stroke 0.7s var(--ease-out) forwards; }
.thanks.is-open .thanks__mark path   { animation: stroke 0.6s 0.4s var(--ease-out) forwards; }
@keyframes stroke { to { stroke-dashoffset: 0; } }
.thanks__title {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--forest);
}
.thanks__copy {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--soft);
}
.thanks__copy strong {
  color: var(--ink);
  font-weight: 600;
  background: rgba(127, 166, 138, 0.22);
  padding: 1px 7px;
  border-radius: 6px;
}

/* ──────────────────────────────────────────────────────────
   Reveal
   ────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
[data-reveal="0"].is-revealed { transition-delay: 0.10s; }
[data-reveal="1"].is-revealed { transition-delay: 0.25s; }
[data-reveal="2"].is-revealed { transition-delay: 0.55s; }
[data-reveal="3"].is-revealed { transition-delay: 0.75s; }
[data-reveal="4"].is-revealed { transition-delay: 0.90s; }

.head .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  transition:
    transform 1.0s var(--ease-out),
    opacity   0.9s var(--ease-out);
}
.head.is-revealed .word { opacity: 1; transform: translateY(0); }
.head__pill {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition:
    opacity   0.9s var(--ease-out) 0.5s,
    transform 1.0s var(--ease-out) 0.5s,
    background 0.5s var(--ease),
    border-color 0.5s var(--ease),
    box-shadow 0.7s var(--ease);
}
.head.is-revealed .head__pill { opacity: 1; transform: translateY(0) scale(1); }
.head.is-revealed .head__line:nth-child(1) .word:nth-child(1) { transition-delay: 0.30s; }
.head.is-revealed .head__line:nth-child(1) .word:nth-child(2) { transition-delay: 0.36s; }
.head.is-revealed .head__line:nth-child(1) .word:nth-child(3) { transition-delay: 0.42s; }
.head.is-revealed .head__line:nth-child(1) .word:nth-child(4) { transition-delay: 0.48s; }
.head.is-revealed .head__line:nth-child(2) .word:nth-child(1) { transition-delay: 0.58s; }

/* ──────────────────────────────────────────────────────────
   Reduced motion
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
  }
  body { cursor: auto; }
  .cursor { display: none; }
  .stage__photo img { animation: none; }
}