/* =================================================
   NOLONA CLIPS, Editorial / Magazine maximalist
   Display: Fraunces (variable optical sizing)
   Body:    Geist
   Mono:    Geist Mono
   ================================================= */

:root {
  --brand: #ff751f;
  --brand-soft: #ff8a3d;
  --brand-deep: #cc5a14;
  --brand-glow: rgba(255, 117, 31, 0.45);

  --paper: #f5efe6;
  --paper-2: #ebe3d4;
  --ink: #0c0c0d;
  --ink-2: #1a1a1d;
  --ink-3: #28282d;
  --text: #f5efe6;
  --text-2: #a8a39c;
  --text-3: #6e6963;
  --line: rgba(245, 239, 230, 0.10);
  --line-strong: rgba(245, 239, 230, 0.18);

  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --r-4: 32px;
  --r-full: 999px;

  --max: 1280px;
  --pad-x: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  --font-display: "Fraunces", "Georgia", ui-serif, serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--brand); color: var(--ink); }

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;
  font-feature-settings: "ss01", "ss03";
}
@media (pointer: coarse), (hover: none) { body { cursor: auto; } }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: none; border: none; background: none; color: inherit; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); width: 100%; }

/* =================================================
   CUSTOM CURSOR
   ================================================= */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1.5px solid var(--brand);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease), height 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease);
  mix-blend-mode: difference;
  opacity: 0;
}
.cursor--dot {
  width: 5px; height: 5px;
  background: var(--brand);
  border: none;
  z-index: 10000;
}
.cursor.is-hover {
  width: 64px; height: 64px;
  background: rgba(255, 117, 31, 0.12);
  border-color: var(--brand);
}
.cursor.is-visible { opacity: 1; }
@media (pointer: coarse), (hover: none) { .cursor { display: none; } }

/* =================================================
   SCROLL PROGRESS + GRAIN + MESH
   ================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), #ffd60a, var(--brand));
  background-size: 200% 100%;
  z-index: 200;
  transition: width 0.05s linear;
  animation: shimmer-bg 4s linear infinite;
}
@keyframes shimmer-bg { to { background-position: -200% 0; } }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 150;
  opacity: 0.08;
  mix-blend-mode: overlay;
  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.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.mesh { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.mesh__blob {
  position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
  will-change: transform;
}
.mesh__blob--1 { top: -20%; left: -10%; background: radial-gradient(circle, rgba(255, 117, 31, 0.7), transparent 60%); animation: mesh-1 22s var(--ease) infinite alternate; }
.mesh__blob--2 { top: 30%; right: -15%; background: radial-gradient(circle, rgba(255, 59, 59, 0.4), transparent 60%); animation: mesh-2 28s var(--ease) infinite alternate; }
.mesh__blob--3 { bottom: -10%; left: 20%; background: radial-gradient(circle, rgba(168, 85, 247, 0.3), transparent 60%); animation: mesh-3 32s var(--ease) infinite alternate; }
.mesh__blob--4 { bottom: 40%; left: -20%; background: radial-gradient(circle, rgba(59, 130, 246, 0.25), transparent 60%); animation: mesh-4 26s var(--ease) infinite alternate; }

@keyframes mesh-1 { to { transform: translate(20vw, 10vh) scale(1.2); } }
@keyframes mesh-2 { to { transform: translate(-15vw, 20vh) scale(1.1); } }
@keyframes mesh-3 { to { transform: translate(10vw, -15vh) scale(1.3); } }
@keyframes mesh-4 { to { transform: translate(25vw, -10vh) scale(1.15); } }

/* =================================================
   PERFORMANCE , no design changes, only perf hints
   Pattern from AI Creator OS globals.css lines 121-161.
   Goal: faster paint + instant scroll, animations stay.
   ================================================= */

/* iOS rubber-band overscroll causes layout reflow at page edges */
html { overscroll-behavior: none; }

/* Pre-promote anything GSAP/JS animates onto its own GPU
   compositor layer , transforms no longer trigger paints of
   surrounding content. */
[data-tilt],
[data-magnetic],
[data-parallax-y],
[data-reveal],
.word,
.morph-tile,
.morph-app,
.clip-tile,
.clip-chip {
  will-change: transform, opacity;
}

/* Layout containment only (no content-visibility: auto , that was
   causing sections to render at 800px placeholder then "snap" to
   their real height when scrolled near, which the user saw as
   half-rendered cards). `contain: layout style` keeps paint
   isolated to each section without any size virtualization. */
.section,
.tickers,
.stats-bar,
.cta-band,
.footer {
  contain: layout style;
}

/* Mobile: kill backdrop-filter globally. It's the #1 GPU killer
   on mobile , every scroll frame repaints everything behind
   each blurred surface. Compensate with slightly more opaque
   backgrounds so nav + chips stay legible. Design unchanged. */
@media (max-width: 820px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav { background: rgba(12, 12, 13, 0.92) !important; }
  .eyebrow,
  .clip-chip,
  .clip-cover__live,
  .morph-tile__live,
  .morph-tile__metric { background: rgba(12, 12, 13, 0.85) !important; }

  /* MOBILE RULE: every element renders fully on page load. No
     "wait for scroll, then fade in" behavior. Reveal animations
     stay defined for desktop, but on mobile the initial hidden
     state is overridden so content is visible immediately. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .word,
  [data-word-stagger] {
    transform: none !important;
    transition: none !important;
  }
  .word-wrap { overflow: visible !important; }
  html { scroll-behavior: auto; }

  /* MOBILE-ONLY video swap for the morph section + hero clip tiles:
     show static WebP poster instead of the autoplaying MP4.
     Hero: saves ~1.4MB + 3 video decoders. Morph: saves ~2.5MB + 6 decoders.
     CSS-keyframe float animation on hero tiles is untouched.
     Desktop is unchanged (videos still play). */
  .morph-tile__media video,
  .clip-tile__media video { display: none !important; }
  .morph-tile__media .morph-tile__poster,
  .clip-tile__media .clip-tile__poster {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
  }
}

/* Desktop: hide both posters (videos play instead) */
@media (min-width: 821px) {
  .morph-tile__media .morph-tile__poster,
  .clip-tile__media .clip-tile__poster { display: none !important; }
}

/* =================================================
   TYPOGRAPHY
   ================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-variation-settings: "opsz" 144;
}
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 800;
  font-variation-settings: "opsz" 144;
}
em { font-style: italic; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: rgba(255, 117, 31, 0.04);
  backdrop-filter: blur(8px);
}
.eyebrow__pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 var(--brand-glow);
  animation: ring-pulse 2s ease-out infinite;
}
.eyebrow__issue { margin-left: auto; opacity: 0.5; font-size: 10px; padding-left: 10px; border-left: 1px solid var(--line-strong); }

@keyframes ring-pulse {
  0% { box-shadow: 0 0 0 0 var(--brand-glow); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.section__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}

/* Word stagger reveal, used on every headline.
   Vertical padding gives room for descenders (g, y, p, ?, ,) so
   overflow:hidden doesn't clip the bottom of italic Fraunces glyphs.
   Negative margin negates the padding so layout isn't pushed. */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.08em 2px 0.22em;
  margin: -0.08em -2px -0.22em;
}
.word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out);
  will-change: transform;
}
.word.is-in { transform: translateY(0); }
.word-wrap + .word-wrap { margin-left: 0.2em; }

/* Italic Fraunces in section titles (e.g. the "Clips?" line) has descenders
   (?, ,, g/y/p/q tails) that exceed the .word-wrap 0.22em bottom buffer at
   large h2 sizes. Scoped opt-out preserves the slide-up reveal on every
   non-italic .word-wrap while letting the italic tail show through. */
.section__title em .word-wrap { overflow: visible; }

/* =================================================
   BUTTONS (magnetic, with arrow swap on hover)
   ================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
  will-change: transform;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease);
  z-index: 0;
}
.btn:hover::before { transform: translateX(100%); }
.btn__label, .btn__icon { position: relative; z-index: 1; display: inline-flex; }
.btn__icon { transition: transform 0.4s var(--ease); }
.btn:hover .btn__icon { transform: translate(3px, -3px) rotate(0deg); }

.btn--primary {
  background: var(--brand);
  color: var(--ink);
  box-shadow: 0 10px 26px -10px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn--primary:hover {
  background: var(--brand-soft);
  box-shadow: 0 16px 36px -8px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.btn--ghost:hover { background: rgba(245, 239, 230, 0.04); border-color: rgba(245, 239, 230, 0.3); }
.btn--lg { padding: 15px 26px; font-size: 15px; }
.btn--xl { padding: 19px 34px; font-size: 16px; }

/* =================================================
   NAV
   ================================================= */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 10px 12px 10px 22px;
  width: calc(100% - 32px);
  max-width: 1200px;
  background: rgba(12, 12, 13, 0.65);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  transition: top 0.4s var(--ease), background 0.3s var(--ease), border-color 0.3s;
}
.nav.is-scrolled { background: rgba(12, 12, 13, 0.85); border-color: var(--line-strong); }
.nav__logo img { height: 38px; width: auto; transition: filter 0.3s; }
.nav__links {
  display: flex;
  gap: 6px;
  font-size: 14px;
  color: var(--text-2);
}
.nav__links a {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--r-full);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 36px;
}
.nav__links a span {
  display: inline-block;
  transition: transform 0.4s var(--ease), color 0.3s;
}
.nav__links a::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
  color: var(--text);
}
.nav__links a:hover span { color: var(--text); }
.nav__cta { padding: 10px 18px; font-size: 13px; }
.nav__ctas { display: flex; align-items: center; gap: 8px; }
.nav__cta--ghost { color: var(--brand); }

/* App auth pills — link to app.nolonallc.com */
.nav__auth {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  border: 1px solid transparent;
  color: var(--text);
}
.nav__auth--login {
  color: var(--text);
  background: transparent;
}
.nav__auth--login:hover { background: rgba(255,255,255,0.06); }
.nav__auth--signup {
  color: #0b0b0d;
  background: var(--brand);
}
.nav__auth--signup:hover { background: #ff8a3d; }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav { padding: 8px 10px 8px 18px; }
  .nav__logo img { height: 32px; }
  /* Two CTAs side-by-side would crowd the small nav, hide the ghost one,
     the user can still reach /fund via the hero CTA or the footer link. */
  .nav__cta--ghost { display: none; }
}

/* =================================================
   HERO
   ================================================= */
.hero {
  position: relative;
  padding: 170px 0 60px;
  min-height: 100vh;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero__copy { max-width: 640px; }
.hero__title {
  font-size: clamp(46px, 7.2vw, 104px);
  font-weight: 800;
  margin-top: 22px;
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.hero__title-italic {
  display: block;
  background: linear-gradient(100deg, var(--brand) 0%, #ffb066 40%, var(--brand) 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-text 6s linear infinite;
}
@keyframes shimmer-text { to { background-position: -200% 0; } }

.hero__sub {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--text-2);
  margin-top: 28px;
  max-width: 540px;
  line-height: 1.55;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.hero__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero__trust-avatars { display: flex; }
.hero__trust-avatar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--c);
  border: 2px solid var(--ink);
  letter-spacing: 0;
}
.hero__trust-avatar + .hero__trust-avatar { margin-left: -10px; }
.hero__trust-stars { color: var(--brand); font-size: 14px; letter-spacing: 2px; }
.hero__trust-text { font-size: 12px; color: var(--text-2); font-family: var(--font-mono); }
.hero__trust-text > div:last-child { margin-top: 2px; }

/* hero scroll cue */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  z-index: 2;
  animation: hint 2s ease-in-out infinite;
}
.hero__scroll-dot { animation: scroll-dot 2.2s ease-in-out infinite; }
@keyframes scroll-dot { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.4; } }
@keyframes hint { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* =================================================
   HERO 3D clip space
   ================================================= */
.hero__visual { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 580px; margin-left: auto; }
.clip-space {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.clip-cover {
  position: absolute;
  top: 18%;
  left: 8%;
  width: 80%;
  z-index: 2;
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow:
    0 40px 100px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px var(--line-strong),
    0 0 80px -10px var(--brand-glow);
  transform: translateZ(40px) rotate(-3deg);
  transition: transform 0.8s var(--ease);
}
.clip-cover img { width: 100%; height: auto; display: block; }
.clip-cover__live {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  background: rgba(12, 12, 13, 0.7);
  backdrop-filter: blur(8px);
  color: var(--text);
  border-radius: var(--r-full);
  text-transform: uppercase;
}
.clip-cover__live-dot { width: 6px; height: 6px; background: #ff3b3b; border-radius: 50%; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* Floating clip tiles */
.clip-tile {
  position: absolute;
  width: 35%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.6s var(--ease);
}
.clip-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.35), transparent 70%);
  pointer-events: none;
}
.clip-tile > * { position: relative; z-index: 1; }
.clip-tile > .clip-tile__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.clip-tile__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  background: #000;
}
.clip-tile--1 { top: 6%; right: -2%; transform: translateZ(60px) rotate(8deg); animation: float-a 7s ease-in-out infinite; }
.clip-tile--2 { top: 32%; right: -16%; transform: translateZ(80px) rotate(6deg); animation: float-b 8s ease-in-out infinite; }
.clip-tile--3 { bottom: 4%; right: 4%; transform: translateZ(40px) rotate(-2deg); animation: float-c 9s ease-in-out infinite; }

@keyframes float-a { 0%, 100% { transform: translateZ(60px) rotate(8deg) translateY(0); } 50% { transform: translateZ(60px) rotate(8deg) translateY(-14px); } }
@keyframes float-b { 0%, 100% { transform: translateZ(80px) rotate(6deg) translateY(0); } 50% { transform: translateZ(80px) rotate(6deg) translateY(12px); } }
@keyframes float-c { 0%, 100% { transform: translateZ(40px) rotate(-2deg) translateY(0); } 50% { transform: translateZ(40px) rotate(-2deg) translateY(-10px); } }

.clip-tile__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--r-full);
  align-self: flex-start;
  font-size: 8px;
}
.clip-tile__live-dot { width: 4px; height: 4px; background: #ff3b3b; border-radius: 50%; animation: blink 1.4s ease-in-out infinite; }
.clip-tile__metric {
  position: absolute;
  top: 12px; right: 12px;
  padding: 3px 7px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--r-full);
  font-size: 9px;
  letter-spacing: 0.05em;
}
.clip-tile__play {
  align-self: center;
  width: 36px; height: 36px;
  color: #fff;
  opacity: 0.9;
}
.clip-tile__caption { font-size: 9px; line-height: 1.4; letter-spacing: 0.02em; text-transform: none; font-family: var(--font-body); font-weight: 600; }
.clip-tile__stats { display: flex; justify-content: space-between; font-size: 9px; opacity: 0.7; }

/* floating chips */
.clip-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(12, 12, 13, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.clip-chip__dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.clip-chip--reach { bottom: 6%; left: -8%; animation: float-a 6s ease-in-out infinite; }
.clip-chip--views { top: 8%; left: -2%; animation: float-b 7s ease-in-out infinite; }

@media (max-width: 920px) {
  .hero { padding: 140px 0 40px; min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: 50px; }
  .hero__visual { max-width: 460px; margin: 0 auto; }
  .hero__scroll { display: none; }
}

/* =================================================
   TICKERS, dual marquees, one reverse
   ================================================= */
.tickers {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
}
.ticker {
  overflow: hidden;
  white-space: nowrap;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker:last-child { border-bottom: 0; }
.ticker__rail { display: inline-flex; gap: 36px; animation: tickerL 30s linear infinite; }
.ticker--reverse .ticker__rail { animation: tickerR 32s linear infinite; }
.ticker__group {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 36px);
  color: var(--text);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.ticker--brand .ticker__group { color: var(--brand); font-style: normal; font-weight: 800; }
.ticker__sep { font-size: 0.6em; opacity: 0.4; }
@keyframes tickerL { to { transform: translateX(-50%); } }
@keyframes tickerR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* =================================================
   STATS BAR
   ================================================= */
.stats-bar {
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.stats-bar__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 64px;
  padding-bottom: 64px;
}
.stat-big {
  padding: 0 56px;
  border-left: 1px solid var(--line);
  text-align: center;
}
.stat-big:first-child { border-left: 0; }
.stat-big__value { display: inline-flex; align-items: baseline; gap: 2px; }
.stat-big__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 84px);
  color: var(--brand);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144;
}
.stat-big__value em { font-size: 0.55em; font-style: italic; opacity: 0.7; margin-left: 4px; }
.stat-big__label {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
@media (max-width: 820px) {
  .stats-bar__inner { flex-wrap: wrap; gap: 32px 0; }
  .stat-big { padding: 0 24px; flex: 0 1 50%; }
}
@media (max-width: 520px) {
  .stat-big { flex: 0 1 100%; border-left: 0; }
}

/* =================================================
   SECTIONS
   ================================================= */
.section { padding: 130px 0; position: relative; }
.section__head { max-width: 760px; margin-bottom: 72px; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head--center .eyebrow,
.section__head--center .section__num { margin-left: auto; margin-right: auto; display: inline-flex; }
.section__title {
  font-size: clamp(38px, 5.5vw, 80px);
  font-weight: 800;
  margin-top: 18px;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.section__sub { margin-top: 22px; color: var(--text-2); font-size: 17px; max-width: 580px; line-height: 1.55; }
.section__head--center .section__sub { margin-left: auto; margin-right: auto; }

/* =================================================
   SERVICES
   ================================================= */
.services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .services__grid { grid-template-columns: 1fr; } }

.svc-card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 30px 26px 28px;
  transition: border-color 0.4s, background 0.4s, transform 0.6s var(--ease);
  overflow: hidden;
  will-change: transform;
  transform-style: preserve-3d;
}
.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 117, 31, 0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.svc-card:hover { border-color: rgba(255, 117, 31, 0.35); background: var(--ink-3); }
.svc-card:hover::before { opacity: 1; }

.svc-card--featured {
  background: linear-gradient(180deg, rgba(255, 117, 31, 0.1), transparent 50%), var(--ink-2);
  border-color: rgba(255, 117, 31, 0.3);
}
.svc-card__badge {
  position: absolute;
  top: 20px; right: 20px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: var(--brand);
  color: var(--ink);
  border-radius: var(--r-full);
}
.svc-card__num {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--text-3);
  font-weight: 700;
}
.svc-card--featured .svc-card__num { display: none; }
.svc-card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(255, 117, 31, 0.1);
  border: 1px solid rgba(255, 117, 31, 0.25);
  border-radius: 14px;
  color: var(--brand);
  margin-bottom: 26px;
  transition: transform 0.5s var(--ease);
}
.svc-card:hover .svc-card__icon { transform: rotate(-8deg) scale(1.05); }
.svc-card__icon svg { width: 22px; height: 22px; }
.svc-card h3 { font-size: 22px; margin-bottom: 12px; font-family: var(--font-display); font-weight: 700; }
.svc-card p { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.svc-card__list { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); }
.svc-card__list li { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 9px; }
.svc-card__list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

/* =================================================
   MORPH: scattered tiles -> unified dashboard
   ================================================= */
.morph {
  position: relative;
  /* tall enough for the scroll-pinned scrub to play out */
  height: 320vh;
  background: var(--ink);
}
.morph__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-top: 90px;
}
.morph__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  z-index: 5;
  position: relative;
}
.morph__head .eyebrow { margin: 0 auto; }
.morph__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin-top: 18px;
}
.morph__title em {
  background: linear-gradient(100deg, var(--brand) 0%, #ffb066 50%, var(--brand) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-text 6s linear infinite;
}
/* Plain white variant, no shimmer/italic emphasis */
.morph__title--plain,
.morph__title--plain em { color: #ffffff; }
.morph__title--plain em {
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
  font-style: normal;
}
.morph__sub { color: var(--text-2); margin-top: 18px; font-size: 16px; }

.morph__scene {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1600px;
  transform-style: preserve-3d;
}

/* Scattered video tiles */
.morph-tile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  aspect-ratio: 9 / 16;
  margin: -195px 0 0 -110px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow:
    0 40px 90px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.morph-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(0, 0, 0, 0.32), transparent 70%);
  pointer-events: none;
  z-index: 2;
}
.morph-tile > * { position: relative; z-index: 3; }

/* Video layer, sits behind chips/caption. Inline iframes load at parse time. */
.morph-tile__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  background-size: cover;
  background-position: center;
}
.morph-tile__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
  background: #000;
}
/* Landscape 16:9 source inside 9:16 tile, scale to cover, crop sides */
.morph-tile--landscape .morph-tile__media iframe {
  width: 316%; /* (16/9) / (9/16) ≈ 3.16 */
  height: 100%;
}
/* Subtle darken so caption + chips stay readable on busy video frames */
.morph-tile__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 28%, transparent 60%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 2;
}

.morph-tile__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--r-full);
  align-self: flex-start;
  font-size: 9px;
}
.morph-tile__dot { width: 5px; height: 5px; background: #ff3b3b; border-radius: 50%; animation: blink 1.4s ease-in-out infinite; }
.morph-tile__metric {
  position: absolute;
  top: 14px; right: 14px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--r-full);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.morph-tile__play { align-self: center; width: 44px; height: 44px; color: #fff; opacity: 0.92; }
.morph-tile__caption {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: none;
  font-family: var(--font-body);
  font-weight: 600;
}
.morph-tile__stats { display: flex; justify-content: space-between; font-size: 10px; opacity: 0.72; }

/* Featured (center) tile is larger */
.morph-tile--featured { width: 280px; margin: -248px 0 0 -140px; }

/* Initial scattered positions, each tile placed via class data-mt + JS transforms.
   These CSS defaults serve as fallbacks if JS is disabled. */
[data-mt="0"] { transform: translate(-340px, -120px) rotate(-12deg); }
[data-mt="1"] { transform: translate(340px, -100px) rotate(10deg); }
[data-mt="2"] { transform: translate(0, 0) rotate(0deg) scale(1.05); z-index: 2; }
[data-mt="3"] { transform: translate(-380px, 140px) rotate(-6deg); }
[data-mt="4"] { transform: translate(380px, 130px) rotate(8deg); }
[data-mt="5"] { transform: translate(-60px, 200px) rotate(-3deg); z-index: 1; }

/* Merged app frame (final state), Campaigns dashboard, Whop-style dark */
.morph-app {
  position: absolute;
  top: 50%; left: 50%;
  width: min(1060px, 94vw);
  background: #0f0f12;
  color: #e7e4dd;
  border-radius: 18px;
  box-shadow:
    0 50px 120px -20px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
  opacity: 0;
  will-change: opacity, transform;
  font-family: var(--font-body);
  padding: 26px 24px 22px;
}

.morph-app__head { margin-bottom: 14px; }
.morph-app__head h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.025em;
  line-height: 1;
}
.morph-app__head p {
  margin-top: 8px;
  font-size: 13px;
  color: #8b8782;
  letter-spacing: 0;
}

.morph-app__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-full);
  color: #6e6963;
  font-size: 12px;
  margin-bottom: 16px;
  min-width: 200px;
}
.morph-app__search-icon { color: #6e6963; }

.morph-app__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Campaign card */
.camp {
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.camp__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.camp__thumb {
  display: block;
  width: 44px; height: 36px;
  border-radius: 6px;
  flex-shrink: 0;
}
.camp__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.camp__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
}
.camp__status i {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.camp__status--clip { color: var(--brand); }
.camp__status--clip i { background: var(--brand); box-shadow: 0 0 8px var(--brand); }
.camp__status--ugc { color: #3b82f6; }
.camp__status--ugc i { background: #3b82f6; box-shadow: 0 0 8px #3b82f6; }
.camp__time { font-size: 10px; color: #6e6963; }

.camp__title {
  font-size: 12.5px;
  font-weight: 700;
  color: #f0ede5;
  line-height: 1.25;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.camp__brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.camp__brand-name {
  font-size: 11px;
  color: #b8b3aa;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.camp__brand-name svg { color: var(--brand); }
.camp__icons { display: inline-flex; gap: 6px; color: #6e6963; }
.camp__icons svg { color: #6e6963; }

.camp__finance { display: flex; flex-direction: column; gap: 3px; }
.camp__finance-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.camp__label {
  font-size: 10px;
  color: #6e6963;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0;
}
.camp__label svg { color: #6e6963; }
.camp__amount { font-size: 11px; color: #8b8782; }
.camp__amount strong { font-size: 14px; color: #ffffff; font-weight: 700; display: inline-block; margin-right: 2px; }
.camp__amount em { font-style: normal; color: #6e6963; font-size: 11px; }
.camp__cpm { text-align: right; font-size: 11px; }
.camp__cpm strong { font-size: 14px; color: #ffffff; font-weight: 700; display: block; line-height: 1; }
.camp__cpm em { font-style: normal; color: #6e6963; font-size: 10px; }

.camp__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.04);
}
.camp__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), #ffb066);
  border-radius: 0 2px 2px 0;
}

/* Responsive collapse */
@media (max-width: 980px) {
  .morph-app__grid { grid-template-columns: repeat(2, 1fr); }
  .morph-app { width: min(700px, 94vw); padding: 22px 18px 18px; }
}
@media (max-width: 600px) {
  .morph-app__grid { grid-template-columns: 1fr; gap: 8px; }
  .morph-app { width: min(380px, 94vw); padding: 18px 14px 14px; }
  .morph-app__head h3 { font-size: 22px; }
  .morph-app__head p { font-size: 12px; }
  .morph-app__grid .camp:nth-child(n+5) { display: none; } /* show top 4 on mobile to fit viewport */
}

@media (max-width: 720px) {
  .morph { height: 280vh; }
  .morph__stage { padding-top: 80px; }
  .morph-tile { width: 130px; margin: -116px 0 0 -65px; }
  .morph-tile--featured { width: 160px; margin: -142px 0 0 -80px; }
  [data-mt="0"] { transform: translate(-130px, -90px) rotate(-12deg); }
  [data-mt="1"] { transform: translate(130px, -80px) rotate(10deg); }
  [data-mt="3"] { transform: translate(-150px, 110px) rotate(-6deg); }
  [data-mt="4"] { transform: translate(150px, 100px) rotate(8deg); }
  [data-mt="5"] { transform: translate(-40px, 170px) rotate(-3deg); }
  .morph-app__row { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 12px 16px; }
  .morph-app__platform, .morph-app__status { display: none; }
  .morph-app__thumb { width: 44px; height: 28px; }
  .morph-app__title { font-size: 13px; }
  .morph-app__head { padding: 16px 16px 12px; }
  .morph-app__tabs span { padding: 5px 9px; font-size: 10px; }
}

/* =================================================
   HOW IT WORKS, sticky scroll
   ================================================= */
.how__stage {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) { .how__stage { grid-template-columns: 1fr; gap: 30px; } }

.how__progress { position: sticky; top: 120px; }
.how__progress-line {
  position: relative;
  width: 2px;
  height: 320px;
  background: var(--line);
  margin: 0 auto 24px;
}
.how__progress-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(var(--brand), #ffd60a);
  transition: height 0.4s var(--ease);
}
.how__progress-dots { display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 30px; }
.how__progress-dot {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  transition: all 0.4s var(--ease);
  background: var(--ink-2);
}
.how__progress-dot.is-active {
  color: var(--ink);
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 117, 31, 0.18);
}
@media (max-width: 900px) { .how__progress { display: none; } }

.how__steps { display: flex; flex-direction: column; gap: 18px; }
.how-step {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 36px 40px;
  transition: border-color 0.4s, background 0.4s;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 36px;
  align-items: start;
}
.how-step.is-active { border-color: rgba(255, 117, 31, 0.35); background: var(--ink-3); }
.how-step__num {
  grid-row: 1 / span 3;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 64px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.04em;
}
.how-step h3 { grid-column: 2; font-size: 28px; margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.how-step p { grid-column: 2; color: var(--text-2); font-size: 16px; line-height: 1.55; max-width: 780px; margin: 0; }
.how-step__bullets { grid-column: 2; list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.how-step__bullets li {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: rgba(255, 117, 31, 0.08);
  color: var(--brand);
  border: 1px solid rgba(255, 117, 31, 0.15);
}
@media (max-width: 600px) { .how-step { grid-template-columns: 1fr; padding: 28px 22px; } .how-step__num { font-size: 40px; } }

/* =================================================
   CALCULATOR
   ================================================= */
.calc__shell {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: 60px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  column-gap: 80px;
  row-gap: 80px;
  position: relative;
  overflow: hidden;
}
.calc__shell > .calc__cta { grid-column: 1 / -1; justify-self: center; }
.calc__shell::before {
  content: '';
  position: absolute;
  top: -20%; right: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(255, 117, 31, 0.18), transparent 70%);
  pointer-events: none;
}
.calc__head { position: relative; z-index: 1; }
.calc__title {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  margin-top: 18px;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.calc__title em {
  background: linear-gradient(100deg, var(--brand) 0%, #ffb066 50%, var(--brand) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-text 6s linear infinite;
}
.calc__head p { color: var(--text-2); margin-top: 18px; max-width: 380px; }

.calc__body { position: relative; z-index: 1; }

/* New: multi-slider blocks (creatorxchange-style) */
.calc-slider { margin-bottom: 22px; }
.calc-slider__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 12px;
}
.calc-slider__head label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.calc-slider__value {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  padding: 4px 10px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}

.calc__slider {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 6px;
  background: var(--ink-3);
  border-radius: var(--r-full);
  outline: none;
}
.calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px;
  background: var(--brand);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 0 0 6px rgba(255, 117, 31, 0.2), 0 6px 16px -2px var(--brand-glow);
  border: 3px solid var(--ink);
  transition: transform 0.2s;
}
.calc__slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.calc__slider::-moz-range-thumb {
  width: 26px; height: 26px;
  background: var(--brand);
  border-radius: 50%;
  cursor: grab;
  border: 3px solid var(--ink);
}

.calc__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; margin-bottom: 30px; }
.calc__results--big { grid-template-columns: 1fr; gap: 14px; }
.calc__result {
  padding: 22px 20px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.calc__result--xl {
  padding: 26px 26px;
  background: linear-gradient(180deg, rgba(255, 117, 31, 0.08), var(--ink));
  border-color: rgba(255, 117, 31, 0.22);
}
.calc__result-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.calc__result-num { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--text); line-height: 1; letter-spacing: -0.025em; font-variation-settings: "opsz" 144; }
.calc__result--xl .calc__result-num { font-size: 44px; color: var(--brand); }
.calc__result-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-3); margin-top: 10px; }
.calc__result-suffix {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-2);
  letter-spacing: 0.01em;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .calc__shell { grid-template-columns: 1fr; gap: 40px; padding: 36px 26px; }
  .calc__results { grid-template-columns: 1fr; }
  .calc__result--xl .calc__result-num { font-size: 36px; }
}

/* =================================================
   WHY US, editorial numbered list
   ================================================= */
.why-list {
  border-top: 1px solid var(--line);
}
.why-item {
  display: grid;
  /* was 140px 1fr 180px; the 140px numeral column is retired with the
     ghost numbers (v7), copy gets the full width again (v8) */
  grid-template-columns: 1fr 180px;
  gap: 48px;
  padding: 40px 28px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  position: relative;
  transition: background 0.5s var(--ease), padding-left 0.5s var(--ease);
}
.why-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.5s var(--ease);
}
.why-item:hover {
  background: linear-gradient(90deg, rgba(255, 117, 31, 0.06), transparent 60%);
  padding-left: 44px;
}
.why-item:hover::before { transform: scaleY(1); }

.why-item__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(72px, 9vw, 120px);
  color: var(--brand);
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variation-settings: "opsz" 144;
}

.why-item__copy h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 14px;
  font-variation-settings: "opsz" 144;
  color: var(--text);
}
.why-item__copy p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
  max-width: 680px;
}

.why-item__stat {
  text-align: right;
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
.why-item__stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 52px);
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-variation-settings: "opsz" 144;
}
.why-item__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 8px;
}

@media (max-width: 860px) {
  .why-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 16px 24px;
    padding: 28px 16px;
  }
  .why-item:hover { padding-left: 24px; }
  .why-item__num { font-size: 64px; grid-row: 1 / 3; }
  .why-item__copy { grid-column: 2; grid-row: 1; }
  .why-item__stat {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    border-left: 0;
    padding-left: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .why-item__stat-num { font-size: 28px; }
  .why-item__stat-label { margin-top: 0; }
}

/* =================================================
   CASES
   ================================================= */
.cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .cases__grid { grid-template-columns: 1fr; } }

/* Single-card variant: center the lone case study and let it grow */
.cases__grid--single {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}
.cases__grid--single .case { padding: 44px 40px; }
.cases__grid--single .case__title { font-size: 30px; }
.cases__grid--single .case__body { font-size: 16px; }
.cases__grid--single .case__stats { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) {
  .cases__grid--single .case { padding: 30px 22px; }
  .cases__grid--single .case__title { font-size: 22px; }
  .cases__grid--single .case__stats { grid-template-columns: 1fr; gap: 12px; }
}

.case {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 34px 30px;
  transition: border-color 0.4s, background 0.4s, transform 0.6s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
  will-change: transform;
  transform-style: preserve-3d;
}
.case::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 117, 31, 0.13), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.case:hover { border-color: rgba(255, 117, 31, 0.3); background: var(--ink-3); }
.case:hover::before { opacity: 1; }
.case__meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; }
.case__tag { color: var(--brand); text-transform: uppercase; letter-spacing: 0.12em; }
.case__time { color: var(--text-3); letter-spacing: 0.08em; }
.case__title { font-size: 24px; line-height: 1.15; font-family: var(--font-display); font-weight: 700; }
.case__body { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.case__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
.case__stat-num { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--brand); line-height: 1; letter-spacing: -0.02em; font-variation-settings: "opsz" 144; }
.case__stat-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }

/* =================================================
   ABOUT
   ================================================= */
.about__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 920px) { .about__grid { grid-template-columns: 1fr; gap: 40px; } }
.about__copy p { font-size: 17px; color: var(--text-2); margin-top: 22px; line-height: 1.6; max-width: 560px; }
.about__cta { margin-top: 36px; }
.about__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.about__pill {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 7px 13px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
}

/* concentric ring graphic */
.about__visual { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 460px; margin-left: auto; display: grid; place-items: center; }
.about__rings { position: absolute; inset: 0; }
.about__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed var(--line-strong);
  animation: spin 60s linear infinite;
}
.about__ring--1 { inset: 0%; animation-duration: 80s; }
.about__ring--2 { inset: 12%; animation-duration: 50s; animation-direction: reverse; border-style: solid; border-color: var(--line); }
.about__ring--3 { inset: 26%; animation-duration: 40s; border-style: dotted; border-width: 2px; border-color: rgba(255, 117, 31, 0.3); }
@keyframes spin { to { transform: rotate(360deg); } }

.about__rings { position: absolute; inset: 0; animation: spin 80s linear infinite; }
.about__dot {
  --r: 200px;
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 18px currentColor;
  top: 50%; left: 50%;
  margin: -9px 0 0 -9px;
}
@media (max-width: 600px) { .about__dot { --r: 130px; } }
.about__dot--a { background: #ff3b3b; color: #ff3b3b; transform: translate(0, calc(var(--r) * -1)); }
.about__dot--b { background: var(--brand); color: var(--brand); transform: translate(calc(var(--r) * 0.707), calc(var(--r) * -0.707)); }
.about__dot--c { background: #ffd60a; color: #ffd60a; transform: translate(var(--r), 0); }
.about__dot--d { background: #4ade80; color: #4ade80; transform: translate(calc(var(--r) * 0.707), calc(var(--r) * 0.707)); }
.about__dot--e { background: #06b6d4; color: #06b6d4; transform: translate(0, var(--r)); }
.about__dot--f { background: #3b82f6; color: #3b82f6; transform: translate(calc(var(--r) * -0.707), calc(var(--r) * 0.707)); }
.about__dot--g { background: #a855f7; color: #a855f7; transform: translate(calc(var(--r) * -1), 0); }
.about__dot--h { background: #ec4899; color: #ec4899; transform: translate(calc(var(--r) * -0.707), calc(var(--r) * -0.707)); }

.about__icon {
  width: 38%;
  height: auto;
  filter: drop-shadow(0 20px 50px var(--brand-glow));
  animation: float-icon 6s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes float-icon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* =================================================
   CTA BAND
   ================================================= */
.cta-band {
  position: relative;
  padding: 140px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink) 0%, #1a110a 100%);
}
.cta-band__glow { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255, 117, 31, 0.22) 0%, transparent 50%); pointer-events: none; }
.cta-band__inner { position: relative; text-align: center; max-width: 880px; margin: 0 auto; padding: 0 var(--pad-x); }
.cta-band__inner .eyebrow { margin: 0 auto; }
.cta-band__title { font-size: clamp(40px, 5.5vw, 78px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; margin-top: 18px; }
.cta-band__title em {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
.cta-band p { font-size: 17px; color: var(--text-2); margin-top: 22px; max-width: 580px; margin-left: auto; margin-right: auto; }
.cta-band .btn { margin-top: 40px; }

/* =================================================
   FOOTER
   ================================================= */
.footer { background: var(--ink-2); border-top: 1px solid var(--line); padding: 80px 0 28px; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.footer__brand img { height: 46px; width: auto; margin-bottom: 20px; }
.footer__brand p { color: var(--text-2); font-size: 14px; max-width: 380px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; color: var(--text-3); font-weight: 500; }
.footer__col a { color: var(--text-2); font-size: 14px; transition: color 0.2s; position: relative; overflow: hidden; display: inline-block; }
.footer__col a span { display: inline-block; transition: transform 0.4s var(--ease); }
.footer__col a:hover { color: var(--brand); }
.footer__col a:hover span { transform: translateX(4px); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 28px;
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}
.footer__mono { color: var(--brand); opacity: 0.7; }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: 36px; } .footer__bottom { flex-direction: column; gap: 8px; text-align: center; } }

/* =================================================
   REVEALS
   ================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal], .word { opacity: 1; transform: none; }
  .cursor { display: none; }
  body { cursor: auto; }
  button { cursor: pointer; }
}

/* =================================================
   BOOK PAGE
   ================================================= */
.book-hero {
  padding: 150px 0 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.book-hero__inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 0 var(--pad-x); }
.book-hero__inner .eyebrow { margin: 0 auto; }
.book-hero__title { font-size: clamp(40px, 5.5vw, 72px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; margin-top: 18px; font-family: var(--font-display); }
.book-hero__title em {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
.book-hero__sub { margin-top: 22px; color: var(--text-2); font-size: 17px; max-width: 580px; margin-left: auto; margin-right: auto; }
.book-hero__bullets { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-top: 32px; font-size: 14px; color: var(--text-2); font-family: var(--font-mono); }
.book-hero__bullet { display: inline-flex; align-items: center; gap: 8px; }
.book-hero__bullet svg { color: var(--brand); flex-shrink: 0; }

.book-embed { padding: 50px 0 120px; }
.book-embed__inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--pad-x); }
.book-embed__frame {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 16px;
  min-height: 760px;
  overflow: hidden;
}
#my-cal-inline-nolona-clips-intro-call { width: 100%; min-height: 720px; border-radius: var(--r-2); overflow: hidden; }
@media (max-width: 720px) { .book-embed__frame { padding: 6px; min-height: 820px; } #my-cal-inline-nolona-clips-intro-call { min-height: 800px; } }

/* =================================================
   FUND CAMPAIGN PAGE (/fund) , Plisio crypto checkout
   Editorial dark card. Scoped via .fund-* classes; zero impact on landing.
   ================================================= */

/* Restore the native cursor on /fund , index.html runs a custom-cursor JS
   that needs `cursor: none` globally, but /fund doesn't load that script.
   Without this override the page would have no visible mouse pointer. */
.fund-body, .fund-body * { cursor: auto; }
.fund-body button,
.fund-body a,
.fund-body label,
.fund-body input[type="range"] { cursor: pointer; }
.fund-body input[type="text"],
.fund-body input[type="email"],
.fund-body input[type="number"] { cursor: text; }

.fund-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  background: rgba(10, 8, 12, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.fund-nav .nav__logo img { display: block; }
.fund-nav__back {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.fund-nav__back:hover { color: var(--brand); }

/* Test-mode banner , only visible when ?test=1 is in the URL. */
.test-banner {
  position: sticky;
  top: 0;
  z-index: 49;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 22px;
  background: linear-gradient(180deg, rgba(255, 214, 10, 0.16), rgba(255, 214, 10, 0.08));
  border-bottom: 1px solid rgba(255, 214, 10, 0.35);
  color: #ffd60a;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.test-banner[hidden] { display: none; }
.test-banner__tag {
  background: #ffd60a;
  color: #0c0a08;
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 10px;
}
.test-banner__msg { color: #f7e58a; text-transform: none; letter-spacing: 0.04em; font-size: 12px; }
.test-banner__msg code {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 214, 10, 0.25);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.fund-page { padding: 60px 0 120px; }

/* Onboarding page (/onboarding) — single Typeform embed, centered. The
   Typeform loader rewrites .onboarding-shell into an iframe that sets its
   own height per form step, so we do NOT force a min-height (that produced
   a giant empty rectangle below the welcome card). Instead we use flex to
   center the iframe both axes; it grows naturally as the form progresses. */
.onboarding-page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 24px 60px;
  min-height: calc(100vh - 96px);
}
.onboarding-shell {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.onboarding-shell iframe { display: block; width: 100% !important; }
@media (max-width: 820px) {
  .onboarding-page { padding: 16px 12px 40px; min-height: calc(100vh - 80px); }
}
.fund-page .calc__shell--fund { row-gap: 0; }

/* ---------- Drop-down checkout panel ---------- */
.fund-panel {
  position: relative;
  margin-top: 32px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: 56px clamp(28px, 5vw, 72px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out, ease), transform 0.5s var(--ease-out, ease);
}
.fund-panel[hidden] { display: none; }
.fund-panel.is-in { opacity: 1; transform: translateY(0); }

/* Aurora glow blob behind content , same vocabulary as cta-band__glow */
.fund-panel__aurora {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(255, 117, 31, 0.18), transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}
.fund-panel__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 36px;
}

.fund-panel__head { text-align: center; }
.fund-panel__head .eyebrow { margin: 0 auto 14px; }
.fund-panel__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.5vw, 52px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--text);
}
.fund-panel__title em {
  font-style: italic;
  color: var(--brand);
  font-variation-settings: "opsz" 144;
}
.fund-panel__sub {
  color: var(--text-2);
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 520px;
}

/* ---------- Live summary tile (mirrors the budget + projected reach) ---------- */
.fund-summary {
  background: rgba(255, 117, 31, 0.04);
  border: 1px solid rgba(255, 117, 31, 0.22);
  border-radius: var(--r-3);
  padding: 24px 28px;
  display: grid;
  gap: 14px;
}
.fund-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.fund-summary__rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 117, 31, 0.22), transparent);
}
.fund-summary__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.fund-summary__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variation-settings: "opsz" 144;
}
.fund-summary__num--brand { color: var(--brand); }
.fund-summary__suffix {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-2);
  letter-spacing: 0;
  margin-left: 6px;
}
.fund-summary__row--minor .fund-summary__label,
.fund-summary__row--minor .fund-summary__num--minor {
  font-size: 13px;
  color: var(--text-2);
}
.fund-summary__num--minor {
  font-family: var(--font-body);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.fund-summary__row--total {
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 117, 31, 0.22);
}
.fund-summary__num--total {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 30px);
  color: var(--text);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  font-variant-numeric: tabular-nums;
}

/* ---------- Form ---------- */
.fund-form { display: grid; gap: 22px; }
.fund-form__row { display: flex; flex-direction: column; gap: 10px; }
.fund-form__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}
.fund-form__hint {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-3);
  font-style: italic;
}
.fund-form__input {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 0 18px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.fund-form__input:focus-within {
  border-color: var(--brand);
  background: rgba(255, 117, 31, 0.05);
  box-shadow: 0 0 0 4px rgba(255, 117, 31, 0.12);
}
.fund-form__adornment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  margin-right: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--brand);
  font-variation-settings: "opsz" 144;
}
.fund-form__adornment--icon { color: var(--text-3); }
.fund-form__input:focus-within .fund-form__adornment--icon { color: var(--brand); }
.fund-form__input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text);
  padding: 20px 0;
  width: 100%;
  min-width: 0;
}
.fund-form__input input::placeholder { color: var(--text-3); }
.fund-form__input input[type="number"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144;
}
.fund-form__input input[type="number"]::-webkit-outer-spin-button,
.fund-form__input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fund-form__input input[type="number"] { -moz-appearance: textfield; }

.fund-form__submit {
  margin-top: 6px;
  justify-self: stretch;
  width: 100%;
}
.fund-form__submit.is-loading { opacity: 0.7; pointer-events: none; }

.fund-form__status {
  min-height: 1.3em;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-2);
  margin: 0;
}
.fund-form__status[data-kind="error"]   { color: #ff7676; }
.fund-form__status[data-kind="success"] { color: #4ade80; }
.fund-form__status[data-kind="pending"] { color: var(--brand); }

/* ---------- Trust strip ---------- */
.fund-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.fund-trust__sep {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--line);
}
.fund-trust__coins { letter-spacing: 0.10em; color: var(--text-2); }

/* ---------- Dual payment options ---------- */
.pay-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 36px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.pay-options[hidden] { display: none; }
.pay-options.is-in { opacity: 1; transform: translateY(0); }
/* When the test-campaign card is hidden (UK visitors), the remaining crypto
   card spans the full width instead of being stranded in a half-column. */
.pay-options--single {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.pay-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 38px 32px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  text-align: left;
  font: inherit;
  color: var(--text);
  appearance: none;
  overflow: hidden;
  transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.pay-option::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 92% -8%, rgba(255, 117, 31, 0.18), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.pay-option:hover {
  border-color: rgba(255, 117, 31, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(255, 117, 31, 0.10);
}
.pay-option:hover::before { opacity: 1; }
.pay-option:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pay-option > * { position: relative; z-index: 1; }
.pay-option__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pay-option__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.8vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--text);
  margin: 6px 0 4px;
  font-variation-settings: "opsz" 144;
}
.pay-option__title em {
  font-style: italic;
  color: var(--brand);
}
.pay-option__sub {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0 0 4px;
}
.pay-option__amount {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.pay-option__amount-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pay-option__amount-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--brand);
  font-variation-settings: "opsz" 144;
  line-height: 1;
}
.pay-option__breakdown {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.pay-option__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.pay-option__row-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pay-option__row-value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.pay-option__row--total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.pay-option__row--total .pay-option__row-label { color: var(--text-2); }

.pay-options__regional-note {
  grid-column: 1 / -1;
  margin-top: -8px;
  padding: 14px 18px;
  background: rgba(255, 117, 31, 0.06);
  border: 1px solid rgba(255, 117, 31, 0.2);
  border-radius: var(--r-2);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.pay-options__regional-note[hidden] { display: none; }
.pay-option__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-top: 8px;
  align-self: flex-start;
}
.pay-option:hover .pay-option__cta {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ---------- Test-campaign embedded checkout frame ---------- */
.test-frame {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 10px;
  overflow: hidden;
}
.test-frame > div { width: 100%; }
#test-checkout { min-height: 260px; }
.test-frame__pay {
  display: flex;
  width: 100%;
  margin: 18px auto 0;
  justify-content: center;
}
.test-frame__pay[disabled] { opacity: 0.55; cursor: not-allowed; }
.test-frame__pay.is-loading { pointer-events: none; }

/* Button spinner + state icons.
   The submit/test-pay buttons hold three glyphs (arrow, check, spinner) and
   we swap which is visible per state. Default = arrow. Loading = spinner.
   Success (is-done) = check. */
.btn .btn__icon-check,
.btn .btn__spinner { display: none; }
.btn.is-loading .btn__icon-arrow,
.btn.is-loading .btn__icon-check { display: none; }
.btn.is-loading .btn__spinner { display: inline-block; }
.btn.is-done .btn__icon-arrow,
.btn.is-done .btn__spinner { display: none; }
.btn.is-done .btn__icon-check { display: inline-block; }
.btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.test-frame__tos {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-3);
  margin: 10px 0 0;
}
.test-frame__fallback {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 18px 0 4px;
}
.test-frame__fallback a {
  color: var(--brand);
  text-decoration: none;
  margin-left: 6px;
}
.test-frame__fallback a:hover { text-decoration: underline; }

/* ---------- Plisio iframe drop-in ---------- */
.fund-invoice { margin-top: 8px; }
.fund-invoice[hidden] { display: none; }
.fund-invoice__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.fund-invoice__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.fund-invoice__newtab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--brand);
  text-decoration: none;
}
.fund-invoice__newtab:hover { text-decoration: underline; }
.fund-invoice__frame {
  width: 100%;
  height: 720px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: #fff;
}

@media (max-width: 820px) {
  .fund-nav { padding: 16px 20px; }
  .fund-page { padding: 28px 0 80px; }
  .fund-panel { padding: 36px 22px; margin-top: 22px; }
  .fund-panel__inner { gap: 28px; }
  .fund-summary { padding: 20px 22px; }
  .fund-summary__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fund-trust { flex-wrap: wrap; gap: 8px; }
  .fund-invoice__frame { height: 640px; }
  .pay-options { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .pay-option { padding: 28px 22px; }
}


/* Operator request (T-016): the section index numbers are retired. */
.section__num { display: none !important; }

/* Grid width modifiers for the platform sections (app domain). */
@media (min-width: 1024px) {
  .services__grid--3 { grid-template-columns: repeat(3, 1fr); }
  .services__grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* Operator request (T-017): all decorative ghost numerals retired. */
.svc-card__num, .how-step__num, .why-item__num, .eyebrow__issue { display: none !important; }