/* =============================================================
   ClipGrowth · Design System
   Inspired by wondermakers.digital — premium, dark/light, motion-first.
   #1e93f3 is reserved as a glow/blur accent only (never on text).
   ============================================================= */

/* ---------- THEME TOKENS ---------- */
:root {
  /* Light theme (default) */
  --bg: #EFEDE6;
  --bg-elev: #FFFFFF;
  --bg-soft: #E6E3DC;
  --fg: #0A0A0B;
  --fg-muted: #5A5A5C;
  --fg-faint: #9B9B9E;
  --line: rgba(10, 10, 11, 0.10);
  --line-soft: rgba(10, 10, 11, 0.05);

  --accent: #1e93f3;
  --accent-glow: rgba(30, 147, 243, 0.55);
  --accent-blob: rgba(30, 147, 243, 0.40);

  --pill-bg: #0A0A0B;
  --pill-fg: #EFEDE6;
  --pill-track: rgba(10, 10, 11, 0.06);

  --shadow-card: 0 1px 0 rgba(0,0,0,0.04), 0 24px 60px -20px rgba(0,0,0,0.18);
  --shadow-soft: 0 6px 24px rgba(0,0,0,0.06);

  /* Type */
  --f-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-italic: 'Instrument Serif', Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Mockup colors (theme-adaptive) — phones/panels look like premium product shots */
  --mk-body: #18181C;
  --mk-stroke: rgba(255, 255, 255, 0.08);
  --mk-screen: rgba(255, 255, 255, 0.04);
  --mk-text-strong: rgba(255, 255, 255, 0.78);
  --mk-text-medium: rgba(255, 255, 255, 0.42);
  --mk-text-soft: rgba(255, 255, 255, 0.18);
  --mk-shadow-alpha: 0.22;

  /* Radii */
  --r-pill: 999px;
  --r-card: 28px;
  --r-input: 14px;
  --r-tile: 18px;

  /* Layout */
  --container: 1440px;
  --gutter: clamp(20px, 4vw, 56px);

  /* `only` keyword tells the browser to use this scheme regardless of the
     system preference — keeps iOS Safari's chrome bars matching the page
     when the user is on a dark-mode device but viewing the light theme. */
  color-scheme: only light;
}

[data-theme="dark"] {
  --bg: #0A0A0B;
  --bg-elev: #141416;
  --bg-soft: #18181B;
  --fg: #ECECEC;
  --fg-muted: #9B9B9E;
  --fg-faint: #555558;
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.05);

  --accent-glow: rgba(30, 147, 243, 0.65);
  --accent-blob: rgba(30, 147, 243, 0.55);

  --pill-bg: #ECECEC;
  --pill-fg: #0A0A0B;
  --pill-track: rgba(255, 255, 255, 0.06);

  --shadow-card: 0 1px 0 rgba(255,255,255,0.04), 0 24px 60px -20px rgba(0,0,0,0.6);
  --shadow-soft: 0 6px 24px rgba(0,0,0,0.4);

  /* Mockup colors in dark theme — phones look like real white-bodied product shots */
  --mk-body: #FFFFFF;
  --mk-stroke: rgba(0, 0, 0, 0.08);
  --mk-screen: rgba(0, 0, 0, 0.05);
  --mk-text-strong: rgba(0, 0, 0, 0.55);
  --mk-text-medium: rgba(0, 0, 0, 0.32);
  --mk-text-soft: rgba(0, 0, 0, 0.14);
  --mk-shadow-alpha: 0.45;

  color-scheme: only dark;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Solid bg as the fallback color (also covers iOS Safari overscroll). */
  background-color: var(--bg);
  transition: background-color .8s var(--ease-out);
}
html, body { height: 100%; }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--fg);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  transition: background-color .8s var(--ease-out), color .8s var(--ease-out);
}
body.is-loading { overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--fg); color: var(--bg); }

/* ---------- LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

/* ---------- TYPOGRAPHY ---------- */
.display-xxl {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 12vw, 13rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
}
.display-xl {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 8.5vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.display-l {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 5.2vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.display-m {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.italic-accent {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-muted);
}
.body-l { font-size: 1.125rem; line-height: 1.55; color: var(--fg-muted); }
.body-m { font-size: 1rem; color: var(--fg-muted); }
.mono { font-family: var(--f-mono); }

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  /* Add iOS notch inset to the top padding so the logo / toggle clear the
     status bar once `viewport-fit=cover` lets the page extend under it. */
  padding: calc(20px + env(safe-area-inset-top, 0px)) var(--gutter) 20px;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.brand__mark {
  width: 22px; height: 22px;
  display: inline-block;
}

.nav {
  justify-self: end;
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav a {
  font-family: var(--f-display);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  padding: 6px 2px;
  transition: opacity .3s var(--ease-out);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); }

/* Theme toggle pill */
.theme-toggle {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
  position: relative;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px);
}
.theme-toggle__btn {
  position: relative;
  z-index: 2;
  padding: 7px 18px;
  font-family: var(--f-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg-muted);
  border-radius: var(--r-pill);
  transition: color .4s var(--ease-out);
}
.theme-toggle__btn[aria-pressed="true"] { color: var(--pill-fg); }
.theme-toggle__indicator {
  position: absolute;
  z-index: 1;
  top: 4px; bottom: 4px;
  background: var(--pill-bg);
  border-radius: var(--r-pill);
  transition: left .55s var(--ease-out), width .55s var(--ease-out);
  pointer-events: none;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  background: var(--fg);
  color: var(--bg);
  transition: transform .35s var(--ease-out), background-color .8s var(--ease-out), color .8s var(--ease-out);
  position: relative;
  white-space: nowrap;
  will-change: transform;
}
.btn:hover { transform: scale(0.98); }
.btn:active { transform: scale(0.96); }
.btn .btn__arrow {
  width: 14px; height: 14px; flex: 0 0 14px;
  transition: transform .35s var(--ease-out);
}
.btn:hover .btn__arrow { transform: translate(3px, -3px); }
.btn--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
}
.btn--lg { padding: 22px 36px; font-size: 1.06rem; }
.btn--block { display: flex; justify-content: center; width: 100%; }

/* Magnetic wrapper */
.magnetic { display: inline-block; }

/* ---------- CARDS / TILES ---------- */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 36px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: background-color .8s var(--ease-out), border-color .8s var(--ease-out);
}

/* ---------- ACCENT BLOBS (the only place #1e93f3 lives heavily) ---------- */
.blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--accent-blob), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: blob-drift 24s ease-in-out infinite;
  will-change: transform;
}
.blob--xl { width: 900px;  height: 900px;  animation-duration: 30s; }
.blob--l  { width: 620px;  height: 620px;  animation-duration: 26s; animation-direction: reverse; }
.blob--m  { width: 380px;  height: 380px;  animation-duration: 22s; }

@keyframes blob-drift {
  0%   { transform: translate(0, 0)        scale(1); }
  25%  { transform: translate(40px, -30px) scale(1.06); }
  50%  { transform: translate(-20px, 20px) scale(0.96); }
  75%  { transform: translate(30px, 40px)  scale(1.03); }
  100% { transform: translate(0, 0)        scale(1); }
}

/* Small blue accent dot (used as graphic flourish) */
.dot-accent {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 24px var(--accent-glow);
  vertical-align: middle;
}

/* ---------- CHAR / WORD REVEAL ---------- */
.split-line { display: block; overflow: hidden; }
.split-word { display: inline-block; overflow: hidden; vertical-align: top; }
.split-char {
  display: inline-block;
  transform: translateY(110%) rotate(6deg);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 1.05s var(--ease-out), opacity .55s ease;
}
.split-revealed .split-char {
  transform: translateY(0) rotate(0);
  opacity: 1;
}

/* Generic fade/slide reveal — transition is on the BASE so it always plays */
.reveal-up {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .9s var(--ease-out), transform 1.05s var(--ease-out);
  will-change: transform, opacity;
}
.reveal-up.is-in {
  opacity: 1;
  transform: none;
}
.reveal-mask {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--ease-out);
}
.reveal-mask.is-in { clip-path: inset(0 0 0 0); }

/* Card scroll-in: silky ease-out-quint glide (GPU-cheap, no blur filter) */
.reveal-card {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-card.is-in {
  opacity: 1;
  transform: none;
}
/* Inner pieces cascade in once the card has settled */
.reveal-card .card__numeral {
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1) .35s,
              transform 1s cubic-bezier(0.16, 1, 0.3, 1) .35s;
}
.reveal-card.is-in .card__numeral { opacity: 0.92; transform: translateY(0); }

.reveal-card .card__meta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1) .5s,
              transform 1s cubic-bezier(0.16, 1, 0.3, 1) .5s;
}
.reveal-card.is-in .card__meta { opacity: 1; transform: none; }

/* SVG stroke-draw on scroll-in (used by icons) */
.draw-on-view path,
.draw-on-view circle,
.draw-on-view line,
.draw-on-view polyline,
.draw-on-view rect {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.draw-on-view.is-in path,
.draw-on-view.is-in circle,
.draw-on-view.is-in line,
.draw-on-view.is-in polyline,
.draw-on-view.is-in rect {
  stroke-dashoffset: 0;
}

/* ---------- CUSTOM CURSOR ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  /* Always near-white so mix-blend-mode: difference inverts in both themes. */
  background: #ECECEC;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), opacity .3s;
  will-change: transform;
}
.cursor.is-hover { width: 60px; height: 60px; }
.cursor.is-hidden { opacity: 0; }
@media (max-width: 900px) { .cursor { display: none; } }

/* ---------- SECTION INDEX LABEL ---------- */
.section-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.section-index__num {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
}
.section-index__line {
  flex: 0 0 28px;
  height: 1px;
  background: var(--line);
}
.section-index__label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fg-muted);
}

/* ---------- MARQUEE ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}
.marquee__track {
  display: inline-flex;
  gap: 80px;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  align-items: center;
}
.marquee__star {
  display: inline-block;
  color: var(--accent);
  filter: drop-shadow(0 0 12px var(--accent-glow));
  font-size: 0.8em;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- LOADER ---------- */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9998;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--gutter);
  transition: transform 1.1s var(--ease-in-out);
}
.loader.is-done { transform: translateY(-101%); }
.loader__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.loader__count {
  font-family: var(--f-display);
  font-size: clamp(5rem, 16vw, 14rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.loader__count::after {
  content: '%';
  font-size: 0.32em;
  font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: 0;
  margin-bottom: 0.6em;
}
.loader__label {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.loader__label .dot-accent { animation: pulse 1.4s ease-in-out infinite; }
.loader__bottom {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.loader__bar {
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.loader__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.loader__brand {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------- FORMS (used by /try and /join later) ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field__label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field__input,
.field__textarea {
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  color: var(--fg);
  font-size: 1rem;
  transition: border-color .3s, background-color .3s;
}
.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--fg);
  background: var(--bg-elev);
}

/* ---------- SECTION (shared layout for content sections) ---------- */
.section {
  padding: clamp(56px, 8vh, 100px) 0;
  position: relative;
}
.section--with-blob { overflow: hidden; }
.section__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(48px, 7vh, 96px);
}
.section__title {
  /* Wider cap + greedy wrap (pretty) so headings fill the column instead of
     leaving a large empty gap on the right that `balance` produced. */
  max-width: 1180px;
  text-wrap: pretty;
}
.section__title em { font-family: var(--f-italic); font-style: italic; font-weight: 400; }
/* On phones the balanced wrap reads better for the pricing & "why" headings;
   the "Что вы сможете в итоге." heading keeps the greedy `pretty` wrap. */
@media (max-width: 600px) {
  #pricing .section__title,
  #why .section__title { text-wrap: balance; }
}
@media (max-width: 700px) {
  .section__head { grid-template-columns: 1fr; }
  /* Tighten section gaps on mobile */
  .section { padding: clamp(36px, 5vh, 56px) 0; }
}

/* ---------- POSTER CARD (premium, wondermakers-style abstract) ---------- */
.card--poster {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(460px, 58vh, 600px);
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--r-card);
  transition: transform .6s var(--ease-out);
}
.card--poster:hover { transform: translateY(-6px); }

/* Big corner numeral */
.card__numeral {
  position: absolute;
  top: clamp(18px, 2.4vh, 30px);
  right: clamp(22px, 2.6vw, 36px);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(3.6rem, 6.4vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--fg);
  opacity: 0.92;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  z-index: 3;
  pointer-events: none;
  transition: transform .6s var(--ease-out), opacity .55s ease;
}
.card--poster:hover .card__numeral { transform: translate(-4px, -2px); opacity: 1; }

/* Subtle film-grain noise texture (premium editorial feel) */
.card--poster::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}
[data-theme="dark"] .card--poster::before { opacity: 0.07; }

/* VISUAL — gradient mesh + central accent fills the entire card */
.card__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: block;
  /* Match the card's border-radius — WebKit/Safari and iOS don't reliably clip
     absolutely-positioned, GPU-composited descendants to the parent's rounded
     overflow:hidden, so the inner layer must round itself. */
  border-radius: var(--r-card);
}

/* Card surface gets a very subtle uniform ambient gradient — no visible corner blobs */
.card__visual {
  background:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 70%, transparent) 0%, var(--bg-elev) 100%);
}

/* The main visual (SVG mockup) fills the card */
.card__visual svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: block;
  color: var(--fg);
  /* (transform may be overridden per-card on small screens — see below) */
  z-index: 1;
  overflow: visible;
}

/* Card 04 (role pills): on phones the card is short, so the pill mockup
   overlaps the title — lift it up to clear the text. */
@media (max-width: 600px) {
  .feature--span8 .card__visual svg { transform: translateY(-9%); }
}

/* Premium 3D icon (loaded via Iconify CDN) — main focal point in each card */
.card__hero-icon {
  position: absolute;
  top: 46%;
  left: 50%;
  width: clamp(180px, 32%, 280px);
  height: clamp(180px, 32%, 280px);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 14px 36px rgba(0, 0, 0, 0.18));
  animation: hero-icon-float 6.5s ease-in-out infinite;
  user-select: none;
}
[data-theme="dark"] .card__hero-icon {
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.55));
}
@keyframes hero-icon-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1.5deg); }
  50%      { transform: translate(-50%, calc(-50% - 14px)) rotate(1.5deg); }
}
/* Subtle ambient glow behind the icon */
.card__hero-icon-glow {
  position: absolute;
  top: 46%;
  left: 50%;
  width: clamp(220px, 38%, 340px);
  height: clamp(220px, 38%, 340px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--accent), transparent 65%);
  filter: blur(60px);
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
  animation: hero-glow-breathe 5s ease-in-out infinite;
}
[data-theme="dark"] .card__hero-icon-glow { opacity: 0.35; }
@keyframes hero-glow-breathe {
  0%, 100% { opacity: 0.18; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.32; transform: translate(-50%, -50%) scale(1.08); }
}

/* Bottom fade so the title stays readable on top */
.card__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg,
      transparent 55%,
      color-mix(in srgb, var(--bg-elev) 92%, transparent) 100%);
}

/* Meta zone (eyebrow + title) — sits at the bottom over the visual */
.card__meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
}
.card__eyebrow {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card__eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  border-radius: 50%;
}
.card__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--fg);
}
.card__title em { font-family: var(--f-italic); font-style: italic; font-weight: 400; }

/* ---------- MOCKUP-STYLE VISUALS (Figma-card aesthetic) ---------- */
/* Phone mockup floating + neon outline pulse */
.mockup .phone-back {
  transform-origin: center;
  transform-box: fill-box;
  animation: mockup-drift-back 9s ease-in-out infinite;
}
.mockup .phone-front {
  transform-origin: center;
  transform-box: fill-box;
  animation: mockup-drift-front 7.5s ease-in-out infinite;
}
@keyframes mockup-drift-back {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-8px) rotate(-7.4deg); }
}
@keyframes mockup-drift-front {
  0%, 100% { transform: translateY(0) rotate(4deg); }
  50%      { transform: translateY(-6px) rotate(4.5deg); }
}
.mockup .neon-outline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px var(--accent-glow));
  animation: neon-pulse 3.4s ease-in-out infinite;
}
@keyframes neon-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}
.mockup .play-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: play-pulse 2.6s ease-in-out infinite;
}
@keyframes play-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.mockup .bar-x {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  transform-origin: bottom;
  transform-box: fill-box;
  animation: bar-oscillate 1.5s ease-in-out infinite;
}
.mockup .bar-x.bar-1 { animation-delay: 0s; }
.mockup .bar-x.bar-2 { animation-delay: 0.08s; }
.mockup .bar-x.bar-3 { animation-delay: 0.16s; }
.mockup .bar-x.bar-4 { animation-delay: 0.24s; }
.mockup .bar-x.bar-5 { animation-delay: 0.32s; }
.mockup .bar-x.bar-6 { animation-delay: 0.4s; }
.mockup .bar-x.bar-7 { animation-delay: 0.48s; }
.mockup .bar-x.bar-8 { animation-delay: 0.56s; }
.mockup .rec-live {
  fill: #ff4f4f;
  animation: rec-pulse 1.4s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Stacked panel drift (Scripts card) */
.mockup .panel {
  transform-origin: center;
  transform-box: fill-box;
}
.mockup .panel-1 { animation: panel-float-1 8s ease-in-out infinite; }
.mockup .panel-2 { animation: panel-float-2 9s ease-in-out infinite; }
.mockup .panel-3 { animation: panel-float-3 10s ease-in-out infinite; }
@keyframes panel-float-1 {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50%      { transform: translate(0, -8px) rotate(-5.4deg); }
}
@keyframes panel-float-2 {
  0%, 100% { transform: translate(0, 0) rotate(2deg); }
  50%      { transform: translate(0, -6px) rotate(2.6deg); }
}
@keyframes panel-float-3 {
  0%, 100% { transform: translate(0, 0) rotate(8deg); }
  50%      { transform: translate(0, -10px) rotate(7.2deg); }
}
.mockup .cursor-blink {
  fill: var(--accent);
  animation: cursor-fade 1.1s steps(2) infinite;
}
@keyframes cursor-fade {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 3D Glass sphere (Scale card) */
.mockup .sphere-body {
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.18));
}
.mockup .sphere-glow {
  filter: blur(40px);
  opacity: 0.7;
  animation: sphere-glow-breathe 5s ease-in-out infinite;
}
@keyframes sphere-glow-breathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.06); }
}
.mockup .sphere-shine {
  animation: sphere-shine-drift 8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes sphere-shine-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.85; }
  50%      { transform: translate(8px, -6px); opacity: 1; }
}
.mockup .sphere-ring {
  fill: none;
  stroke: currentColor;
  opacity: 0.15;
  stroke-width: 1;
  transform-origin: center;
  transform-box: fill-box;
  animation: sphere-ring-rotate 22s linear infinite;
}
.mockup .sphere-ring-2 { animation-duration: 28s; animation-direction: reverse; }
@keyframes sphere-ring-rotate {
  from { transform: rotate(0deg) scaleY(0.3); }
  to   { transform: rotate(360deg) scaleY(0.3); }
}

/* Stacked role pills (Team card) */
.mockup .pill {
  transform-origin: center;
  transform-box: fill-box;
}
.mockup .pill-1 { animation: pill-drift-1 9s ease-in-out infinite; }
.mockup .pill-2 { animation: pill-drift-2 10s ease-in-out infinite; }
.mockup .pill-3 { animation: pill-drift-3 8.5s ease-in-out infinite; }
.mockup .pill-4 { animation: pill-drift-4 11s ease-in-out infinite; }
.mockup .pill-5 { animation: pill-drift-5 9.5s ease-in-out infinite; }
@keyframes pill-drift-1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-6px,-4px)} }
@keyframes pill-drift-2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(8px,-6px)} }
@keyframes pill-drift-3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-4px,-7px)} }
@keyframes pill-drift-4 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(6px,-5px)} }
@keyframes pill-drift-5 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-7px,-3px)} }

/* Coin stack flip (Income card) */
.mockup .coin-flip {
  transform-origin: center;
  transform-box: fill-box;
}
.mockup .coin-flip-1 { animation: coin-flip-anim 5s ease-in-out infinite; }
.mockup .coin-flip-2 { animation: coin-flip-anim 5s ease-in-out 0.6s infinite; }
.mockup .coin-flip-3 { animation: coin-flip-anim 5s ease-in-out 1.2s infinite; }
.mockup .coin-flip-4 { animation: coin-flip-anim 5s ease-in-out 1.8s infinite; }
@keyframes coin-flip-anim {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(-0.15); }
}

/* Clock hands — pivot at the clock face center (200, 240) in viewBox coords */
.mockup .hand-h,
.mockup .hand-m {
  transform-box: view-box;
  transform-origin: 200px 240px;
}
.mockup .hand-h { animation: clock-spin 30s linear infinite; }
.mockup .hand-m { animation: clock-spin 6s linear infinite; }
@keyframes clock-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- ABSTRACT VISUAL ANIMATIONS ---------- */
/* All visuals use viewBox 0 0 280 300 so they scale uniformly */

/* 1. Phone frame with emanating waves + waveform bars (REACH) */
.viz-reach .wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transform-origin: center;
  transform-box: fill-box;
  animation: wave-emit 5.5s ease-out infinite;
}
.viz-reach .wave-1 { animation-delay: 0s; }
.viz-reach .wave-2 { animation-delay: 1.4s; }
.viz-reach .wave-3 { animation-delay: 2.8s; }
.viz-reach .wave-4 { animation-delay: 4.2s; }
@keyframes wave-emit {
  0%   { opacity: 0;    transform: scale(0.25); }
  20%  { opacity: 0.5; }
  100% { opacity: 0;    transform: scale(3.4); }
}
.viz-reach .float-dot {
  fill: currentColor;
  opacity: 0.4;
  transform-origin: center;
  transform-box: fill-box;
  animation: float-drift 6s ease-in-out infinite;
}
.viz-reach .float-dot:nth-of-type(1) { animation-delay: 0s; }
.viz-reach .float-dot:nth-of-type(2) { animation-delay: 1s; }
.viz-reach .float-dot:nth-of-type(3) { animation-delay: 2s; }
.viz-reach .float-dot:nth-of-type(4) { animation-delay: 3s; }
.viz-reach .float-dot:nth-of-type(5) { animation-delay: 4s; }
.viz-reach .float-dot:nth-of-type(6) { animation-delay: 5s; }
@keyframes float-drift {
  0%, 100% { transform: translateY(0); opacity: 0.25; }
  50%      { transform: translateY(-7px); opacity: 0.7; }
}
.viz-reach .phone-frame {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.viz-reach .phone-screen {
  fill: currentColor;
  opacity: 0.04;
}
.viz-reach .play-btn {
  fill: currentColor;
  opacity: 0.3;
  transform-origin: 140px 150px;
  transform-box: fill-box;
  animation: play-breathe 3s ease-in-out infinite;
}
@keyframes play-breathe {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.08); }
}
.viz-reach .bar {
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  transform-origin: bottom;
  transform-box: fill-box;
  animation: bar-oscillate 1.6s ease-in-out infinite;
}
.viz-reach .bar-1 { animation-delay: 0s;    }
.viz-reach .bar-2 { animation-delay: 0.1s;  }
.viz-reach .bar-3 { animation-delay: 0.2s;  }
.viz-reach .bar-4 { animation-delay: 0.3s;  }
.viz-reach .bar-5 { animation-delay: 0.4s;  }
.viz-reach .bar-6 { animation-delay: 0.5s;  }
.viz-reach .bar-7 { animation-delay: 0.6s;  }
@keyframes bar-oscillate {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1.15); }
}
.viz-reach .record-dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
  transform-origin: 140px 92px;
  transform-box: fill-box;
  animation: record-pulse 1.8s ease-in-out infinite;
}
@keyframes record-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}
.viz-reach .caption-line {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.35;
  stroke-dasharray: 60;
  animation: caption-flow 5s ease-in-out infinite;
}
.viz-reach .caption-line-2 { animation-delay: 1s; }
@keyframes caption-flow {
  0%   { stroke-dashoffset: 60; opacity: 0; }
  30%  { opacity: 0.35; }
  70%  { opacity: 0.35; }
  100% { stroke-dashoffset: -60; opacity: 0; }
}

/* 2. Flowing script lines (SCRIPTS) */
.viz-script .line {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.45;
}
.viz-script .line-1 { animation: line-pulse 4s ease-in-out infinite 0s; }
.viz-script .line-2 { animation: line-pulse 4s ease-in-out infinite 0.3s; }
.viz-script .line-3 { animation: line-pulse 4s ease-in-out infinite 0.6s; }
.viz-script .line-4 { animation: line-pulse 4s ease-in-out infinite 0.9s; }
.viz-script .line-5 { animation: line-pulse 4s ease-in-out infinite 1.2s; }
.viz-script .line-6 { animation: line-pulse 4s ease-in-out infinite 1.5s; }
.viz-script .line-7 { animation: line-pulse 4s ease-in-out infinite 1.8s; }
.viz-script .line-8 { animation: line-pulse 4s ease-in-out infinite 2.1s; }
.viz-script .line-9 { animation: line-pulse 4s ease-in-out infinite 2.4s; }
@keyframes line-pulse {
  0%, 100% { opacity: 0.18; transform: translateX(0); }
  50%      { opacity: 0.85; transform: translateX(-3px); }
}
.viz-script .cursor {
  fill: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent-glow));
  animation: cursor-blink 1.2s steps(2) infinite;
}
@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.viz-script .sweep {
  fill: url(#sweep-grad);
  opacity: 0.18;
  transform-origin: center;
  transform-box: fill-box;
  animation: sweep-anim 8s ease-in-out infinite;
}
@keyframes sweep-anim {
  0%, 100% { transform: translateY(-30px); }
  50%      { transform: translateY(80px); }
}

/* 3. Concentric sphere (SCALE) */
.viz-sphere .ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transform-origin: center;
  transform-box: fill-box;
}
.viz-sphere .ring-h    { opacity: 0.35; animation: sphere-rotate-h 22s linear infinite; }
.viz-sphere .ring-v    { opacity: 0.35; animation: sphere-rotate-v 28s linear infinite; }
.viz-sphere .ring-d1   { opacity: 0.3;  animation: sphere-rotate-d1 30s linear infinite; }
.viz-sphere .ring-d2   { opacity: 0.3;  animation: sphere-rotate-d2 26s linear infinite; }
.viz-sphere .ring-outer { opacity: 0.15; }
.viz-sphere .core {
  fill: currentColor;
  transform-origin: center;
  transform-box: fill-box;
  animation: core-breathe 3.5s ease-in-out infinite;
}
@keyframes core-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%      { transform: scale(1.4);  opacity: 1; }
}
@keyframes sphere-rotate-h {
  from { transform: rotate(0deg) scaleY(1); }
  to   { transform: rotate(360deg) scaleY(1); }
}
@keyframes sphere-rotate-v {
  from { transform: rotate(0deg) scaleX(1); }
  to   { transform: rotate(360deg) scaleX(1); }
}
@keyframes sphere-rotate-d1 {
  from { transform: rotate(45deg)  scaleX(1); }
  to   { transform: rotate(405deg) scaleX(1); }
}
@keyframes sphere-rotate-d2 {
  from { transform: rotate(-45deg)  scaleY(1); }
  to   { transform: rotate(-405deg) scaleY(1); }
}
/* Orbit group: rotates around its own center, satellite is offset */
.viz-sphere .orbit {
  transform-origin: center;
  transform-box: fill-box;
}
.viz-sphere .orbit-1 { animation: orbit-spin 14s linear infinite; }
.viz-sphere .orbit-2 { animation: orbit-spin 18s linear infinite reverse; }
.viz-sphere .orbit-3 { animation: orbit-spin 22s linear infinite; }
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.viz-sphere .satellite { fill: currentColor; }

/* 4. Constellation network (TEAM) */
.viz-net .connect-faint {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 2 6;
  opacity: 0.15;
}
.viz-net .connect {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.35;
  animation: connect-flow 4s linear infinite;
}
.viz-net .connect-2 { animation-delay: 0.8s; }
.viz-net .connect-3 { animation-delay: 1.6s; }
.viz-net .connect-4 { animation-delay: 2.4s; }
.viz-net .connect-5 { animation-delay: 3.2s; }
.viz-net .connect-6 { animation-delay: 0.4s; }
.viz-net .float-dot {
  fill: currentColor;
  opacity: 0.4;
  transform-origin: center;
  transform-box: fill-box;
  animation: float-drift 7s ease-in-out infinite;
}
.viz-net .float-dot:nth-of-type(1) { animation-delay: 0s; }
.viz-net .float-dot:nth-of-type(2) { animation-delay: 1.5s; }
.viz-net .float-dot:nth-of-type(3) { animation-delay: 3s; }
.viz-net .float-dot:nth-of-type(4) { animation-delay: 4.5s; }
@keyframes connect-flow {
  0%   { stroke-dashoffset: 32; opacity: 0.15; }
  50%  { opacity: 0.55; }
  100% { stroke-dashoffset: 0;  opacity: 0.15; }
}
.viz-net .node {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 2.6s ease-in-out infinite;
}
.viz-net .node-2 { animation-delay: 0.3s; }
.viz-net .node-3 { animation-delay: 0.6s; }
.viz-net .node-4 { animation-delay: 0.9s; }
.viz-net .node-5 { animation-delay: 1.2s; }
.viz-net .node-6 { animation-delay: 1.5s; }
.viz-net .hub-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transform-origin: center;
  transform-box: fill-box;
  animation: hub-spin 18s linear infinite;
}
.viz-net .hub-core {
  fill: currentColor;
  transform-origin: 140px 150px;
  transform-box: fill-box;
  animation: hub-breathe 3s ease-in-out infinite;
}
@keyframes hub-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hub-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* 5. Coin/income flow (INCOME — creators 01) */
.viz-income .coin {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transform-origin: center;
  transform-box: fill-box;
}
.viz-income .coin-rotate { animation: coin-flip 5s ease-in-out infinite; }
.viz-income .coin-1 { animation-delay: 0s; }
.viz-income .coin-2 { animation-delay: 0.6s; }
.viz-income .coin-3 { animation-delay: 1.2s; }
.viz-income .coin-4 { animation-delay: 1.8s; }
@keyframes coin-flip {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(-0.2); }
}
.viz-income .stack-line {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.5;
}
.viz-income .arrow-up {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--accent-glow));
  animation: arrow-rise 3.5s ease-in-out infinite;
}
@keyframes arrow-rise {
  0%, 100% { opacity: 0.4; transform: translateY(8px); }
  50%      { opacity: 1;   transform: translateY(-4px); }
}

/* 6. Clock / time (CLOCK — creators 04) */
.viz-clock .face {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.viz-clock .hand-h {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  transform-origin: 140px 150px;
  transform-box: fill-box;
  animation: clock-hour 30s linear infinite;
}
.viz-clock .hand-m {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  transform-origin: 140px 150px;
  transform-box: fill-box;
  animation: clock-minute 6s linear infinite;
}
@keyframes clock-hour {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes clock-minute {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.viz-clock .tick {
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.4;
}
.viz-clock .tick-glow {
  fill: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent-glow));
  animation: tick-cycle 4s steps(8) infinite;
}
@keyframes tick-cycle {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Reduced motion: slow everything down rather than killing it */
@media (prefers-reduced-motion: reduce) {
  .viz-reach .wave, .viz-reach .bar, .viz-reach .play-btn, .viz-reach .record-dot, .viz-reach .caption-line,
  .viz-script .line-1, .viz-script .line-2, .viz-script .line-3, .viz-script .line-4, .viz-script .line-5, .viz-script .line-6, .viz-script .line-7, .viz-script .line-8, .viz-script .line-9, .viz-script .cursor, .viz-script .sweep,
  .viz-sphere .ring-h, .viz-sphere .ring-v, .viz-sphere .ring-d1, .viz-sphere .ring-d2, .viz-sphere .core, .viz-sphere .satellite,
  .viz-net .connect, .viz-net .node, .viz-net .hub-ring, .viz-net .hub-core,
  .viz-income .coin-rotate, .viz-income .arrow-up,
  .viz-clock .hand-h, .viz-clock .hand-m, .viz-clock .tick-glow {
    animation-duration: 30s;
  }
}

/* ---------- PREMIUM CARD BACKGROUND (used by feature/why tiles) ---------- */
.card--premium {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Dot-grid texture layer */
.card--premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(currentColor 0.7px, transparent 0.7px);
  background-size: 18px 18px;
  background-position: 0 0;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  color: var(--fg);
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 70%);
}
/* Bottom-right giant watermark number */
.card__watermark {
  position: absolute;
  right: -14px;
  bottom: -38px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(8rem, 14vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--fg);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  transition: opacity .55s var(--ease-out), transform .8s var(--ease-out);
}
[data-theme="dark"] .card__watermark { opacity: 0.06; }
.card--premium:hover .card__watermark {
  opacity: 0.085;
  transform: translate(-6px, -6px);
}
[data-theme="dark"] .card--premium:hover .card__watermark { opacity: 0.12; }
/* Corner glow */
.card--premium::after {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  top: -120px; right: -120px;
  background: radial-gradient(circle at center, var(--accent-blob), transparent 70%);
  filter: blur(40px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity .8s var(--ease-out);
}
.card--premium:hover::after { opacity: 0.7; }
/* Push direct children above background layers (but NOT the watermark — it stays absolute) */
.card--premium > *:not(.card__watermark) { position: relative; z-index: 1; }
.card--premium > .card__watermark { position: absolute; z-index: 0; }

/* ---------- ICON IDLE ANIMATIONS ---------- */
@keyframes ring-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes frame-shift { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(2px, -2px); } }
@keyframes draw-loop {
  0%   { stroke-dasharray: 0 200; }
  45%  { stroke-dasharray: 200 200; }
  55%  { stroke-dasharray: 200 200; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 200 200; stroke-dashoffset: -200; }
}
@keyframes node-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
@keyframes idle-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.icon-rings circle:nth-child(2) { animation: ring-pulse 2.6s ease-in-out infinite; }
.icon-rings path:nth-of-type(1)  { animation: ring-pulse 2.6s ease-in-out 0.25s infinite; }
.icon-rings path:nth-of-type(2)  { animation: ring-pulse 2.6s ease-in-out 0.5s  infinite; }
.icon-rings path:nth-of-type(3)  { animation: ring-pulse 2.6s ease-in-out 0.75s infinite; }

.icon-frames rect:nth-child(1) { animation: frame-shift 4s ease-in-out infinite; }
.icon-frames rect:nth-child(2) { animation: frame-shift 4s ease-in-out 0.6s infinite; }
.icon-frames rect:nth-child(3) { animation: frame-shift 4s ease-in-out 1.2s infinite; }

.icon-chart path:first-child {
  stroke-dasharray: 200;
  animation: draw-loop 5s ease-in-out infinite;
}

.icon-network circle { transform-box: fill-box; transform-origin: center; }
.icon-network circle:nth-of-type(1) { animation: node-pulse 2.4s ease-in-out infinite; }
.icon-network circle:nth-of-type(2) { animation: node-pulse 2.4s ease-in-out 0.4s infinite; }
.icon-network circle:nth-of-type(3) { animation: node-pulse 2.4s ease-in-out 0.8s infinite; }

.icon-clock path:last-child { transform-origin: 40px 42px; animation: idle-spin 18s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .icon-rings circle, .icon-rings path,
  .icon-frames rect, .icon-chart path,
  .icon-network circle, .icon-clock path {
    animation-duration: 12s;
  }
}

/* ---------- FORM CARD (shared by /try /join /payment) ---------- */
.form-card {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  z-index: 2;
  transition: background-color .8s var(--ease-out), border-color .8s var(--ease-out);
}
.form-card__head {
  margin-bottom: 36px;
}
.form-card__head .eyebrow { margin-bottom: 16px; display: inline-block; }
.form-card__title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--fg);
  margin-bottom: 12px;
}
.form-card__title em { font-family: var(--f-italic); font-style: italic; font-weight: 400; }
.form-card__sub {
  color: var(--fg-muted);
  font-size: 1rem;
  max-width: 420px;
}
.form-card__form { display: flex; flex-direction: column; gap: 20px; }

/* ---------- TOGGLE SWITCH ---------- */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  padding: 14px 0;
  user-select: none;
}
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  flex: 0 0 44px;
  width: 44px; height: 24px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  transition: background-color .35s var(--ease-out);
  margin-top: 2px;
}
.toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg-elev);
  transition: transform .35s var(--ease-out);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.toggle-row input:checked ~ .toggle-track { background: var(--fg); }
.toggle-row input:checked ~ .toggle-track .toggle-thumb { transform: translateX(20px); }
.toggle-label {
  font-size: 0.95rem;
  color: var(--fg-muted);
  line-height: 1.5;
}
.toggle-label a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CHECKBOX (consent) ---------- */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}
.checkbox-box {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  position: relative;
  margin-top: 1px;
  transition: background-color .25s, border-color .25s;
}
.checkbox-box::after {
  content: ''; position: absolute;
  top: 4px; left: 7px;
  width: 5px; height: 9px;
  border: solid var(--bg);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .25s var(--ease-back);
}
.checkbox-row.is-checked .checkbox-box {
  background: var(--fg);
  border-color: var(--fg);
}
.checkbox-row.is-checked .checkbox-box::after { transform: rotate(45deg) scale(1); }
.checkbox-label {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fg-muted);
}
.checkbox-label a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero {
  position: relative;
  padding: clamp(140px, 22vh, 240px) 0 clamp(40px, 6vh, 80px);
  overflow: hidden;
}
.page-hero__inner { position: relative; z-index: 2; max-width: 920px; }
.page-hero__title em { font-family: var(--f-italic); font-style: italic; font-weight: 400; }

/* ---------- PAY METHOD GRID ---------- */
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.method-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 20px;
  background: var(--bg-elev);
  border: 1.5px solid var(--line);
  border-radius: var(--r-tile);
  cursor: pointer;
  transition: border-color .35s, transform .35s var(--ease-out);
  text-align: left;
  font-family: var(--f-display);
  font-weight: 500;
}
.method-tile:hover { transform: translateY(-2px); }
.method-tile.is-active { border-color: var(--fg); }
.method-tile__icon { width: 32px; height: 32px; object-fit: contain; }
.method-tile__name { font-size: 0.96rem; color: var(--fg); }
.method-tile__commission { font-family: var(--f-mono); font-size: 0.72rem; color: var(--fg-muted); letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 720px) { .method-grid { grid-template-columns: 1fr; } }

/* ---------- FOOTER (shared across all pages) ---------- */
.footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding: clamp(60px, 9vh, 110px) 0 32px;
  overflow: hidden;
  background: var(--bg);
}
@media (max-width: 700px) {
  .footer { padding: clamp(28px, 4vh, 48px) 0 20px; }
  .footer__giant-wrap { margin: clamp(8px, 2vh, 20px) 0 clamp(18px, 3vh, 32px) !important; }
}
.footer__giant-wrap {
  width: 100%;
  overflow: hidden;
  margin: clamp(20px, 4vh, 50px) 0 clamp(36px, 6vh, 64px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.footer__giant-track {
  display: inline-flex;
  white-space: nowrap;
  gap: 80px;
  animation: footer-marquee 38s linear infinite;
  align-items: center;
}
@keyframes footer-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.footer__giant {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(5rem, 16vw, 18rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--fg);
}
.footer__giant-star {
  display: inline-block;
  color: var(--accent);
  filter: drop-shadow(0 0 24px var(--accent-glow));
  font-size: clamp(2.5rem, 6vw, 6rem);
  vertical-align: middle;
}
.footer__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.footer__brand {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.footer__email {
  justify-self: center;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 500;
}
.footer__email a {
  position: relative;
  padding-bottom: 2px;
}
.footer__email a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: 0 50%;
  transition: transform .5s var(--ease-out);
}
.footer__email a:hover::after { transform: scaleX(0); transform-origin: 100% 50%; }
.footer__legal {
  justify-self: end;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  max-width: 460px;
  text-align: right;
  line-height: 1.6;
}
@media (max-width: 800px) {
  .footer__row { grid-template-columns: 1fr; text-align: center; }
  .footer__legal, .footer__email { justify-self: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .footer__giant-track { animation-duration: 80s; }
}

/* ---------- A11Y ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- REDUCED MOTION ----------
   We respect the user's preference but keep reveals + ambient motion alive
   (motion is the brand). Only the most extreme effects are killed.        */
@media (prefers-reduced-motion: reduce) {
  /* Disable cursor-following + magnetic + parallax — they can be disorienting */
  .cursor { display: none; }
  .blob { animation-duration: 60s; } /* slower, gentler */
}

/* ---------- RESPONSIVE NAV ---------- */
@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .theme-toggle { justify-self: end; }
}