/* ─────────────────────────────────────────────────────────────
   Erika · liquid-glass landing
   Palette : cream base + warm peach mesh + cool pale-blue mesh
             (Leonard / dreamy-mesh inspiration)
   Ink     : near-black charcoal · Buttons : solid black
   ───────────────────────────────────────────────────────────── */

:root {
  --bg: #ece4d2;

  --ink: #161616;
  --ink-soft: rgba(22, 22, 22, 0.72);
  --ink-mute: rgba(22, 22, 22, 0.50);
  --ink-faint: rgba(22, 22, 22, 0.32);
  --line: rgba(22, 22, 22, 0.10);

  --glass-bg: rgba(255, 255, 255, 0.42);
  --glass-bg-strong: rgba(255, 255, 255, 0.60);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 -1px 0 rgba(255, 255, 255, 0.22) inset,
    0 30px 60px -20px rgba(22, 22, 22, 0.16),
    0 8px 24px -12px rgba(22, 22, 22, 0.10);

  /* Atmospheric mesh accents — used together (peach + pale blue) for gradient surfaces */
  --warm: #ff9d7a;          /* peach */
  --warm-soft: #ffc6ad;     /* pale peach */
  --warm-deep: #ff7a51;     /* coral, mesh only */
  --cool: #a8bfe0;          /* pale blue */
  --cool-soft: #cdd9ec;     /* powder blue */
  --cream: #f5edd9;         /* cream highlight */

  /* The single UI accent — vivid blue (links, eyebrows, dots, status indicators). */
  --accent: #2f6bff;
  --accent-strong: #1c4ed8;
  --accent-soft: rgba(47, 107, 255, 0.14);
  --accent-ring: rgba(47, 107, 255, 0.22);

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  --max: 1200px;
  --pad: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Offset so #anchor jumps don't land under the sticky nav. */
  scroll-padding-top: 96px;
}
body {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* Consistent keyboard focus ring. Mouse clicks stay clean (focus-visible only). */
:where(a, button, input, textarea, [tabindex]):focus { outline: none; }
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible,
.chip:focus-visible,
.ctrl-btn:focus-visible,
.lang-btn:focus-visible,
.hero-input__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; font-weight: 600; color: var(--ink); letter-spacing: inherit; }

/* ─────────────────────────  AMBIENT BACKGROUND  ─────────────────────
   A big atmospheric mesh, repeated through the scroll. Warm peach
   anchors the right/top, cool pale blue anchors the left/bottom,
   cream base ties them together. Heavy blur + low saturation = dreamy. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    /* warm pops */
    radial-gradient(70% 55% at 92% 8%,  rgba(255, 130, 96, 0.85) 0%, transparent 55%),
    radial-gradient(55% 45% at 98% 75%, rgba(255, 165, 132, 0.55) 0%, transparent 55%),
    /* cool pops */
    radial-gradient(60% 50% at 6% 92%,  rgba(160, 188, 224, 0.85) 0%, transparent 55%),
    radial-gradient(50% 50% at 2% 28%,  rgba(195, 210, 232, 0.55) 0%, transparent 55%),
    /* cream wash */
    linear-gradient(180deg, #f4ecdb 0%, #ece4d2 50%, #e3d8be 100%);
}
.bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: drift 240s ease-in-out infinite alternate;
}
/* Floating accent blobs that drift slowly above the fixed mesh */
.bg__blob--peach    { width: 640px; height: 640px; top: 10vh;   right: -10vw; background: #ffb696; opacity: .6; }
.bg__blob--blue     { width: 580px; height: 580px; top: 60vh;   left:  -8vw;  background: #b8cce8; animation-delay: -60s;  animation-duration: 280s; opacity: .55; }
.bg__blob--magenta  { width: 480px; height: 480px; top: 110vh;  right: 25vw;  background: #f5c1a4; animation-delay: -110s; animation-duration: 320s; opacity: .35; }
.bg__blob--lavender { width: 520px; height: 520px; top: 200vh;  left:  20vw;  background: #c4d2ec; animation-delay: -150s; animation-duration: 300s; opacity: .35; }

@keyframes drift {
  0%   { transform: translate(0,0)       scale(1); }
  50%  { transform: translate(12px,-8px) scale(1.015); }
  100% { transform: translate(-10px,12px) scale(0.99); }
}

.bg__grain {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
  mix-blend-mode: multiply;
}

/* ─────────────────────────  GLASS PRIMITIVES  ─────────────────────── */
.glass-card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--glass-shadow);
}
.glass-card-inner {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 8px 22px -10px rgba(22, 22, 22, 0.18);
}
.glass-pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #79ffba, #14b66b);
  box-shadow: 0 0 0 4px rgba(20, 182, 107, 0.18);
}

/* ─────────────────────────  BUTTONS  ──────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn--lg { padding: 14px 22px; font-size: 15px; }
.btn--full { width: 100%; justify-content: center; }
.btn--solid {
  background: var(--ink);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 10px 24px -8px rgba(10,10,10,0.55);
}
.btn--solid:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 14px 30px -8px rgba(10,10,10,0.6);
}
.btn--ghost { color: var(--ink-soft); padding: 8px 12px; }
.btn--ghost:hover { color: var(--ink); }
.btn--glass {
  background: rgba(255,255,255,0.6);
  border-color: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 22px -10px rgba(10,10,10,0.16);
}
.btn--glass:hover { background: rgba(255,255,255,0.78); transform: translateY(-1px); }
.play-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
}

/* ─────────────────────────────  NAV  ───────────────────────── */
.nav {
  position: sticky;
  top: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(var(--max), calc(100% - 32px));
  margin: 16px auto 0;
  padding: 10px 14px 10px 22px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.75);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-radius: var(--radius-pill);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 10px 30px -12px rgba(10,10,10,0.16);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
}
.nav__brand img {
  height: 20px;
  width: auto;
  display: block;
}
.footer__brand-logo { height: 24px; width: auto; display: block; }
.compare-card__logo { height: 28px; width: auto; display: block; }
.nav__links {
  display: flex;
  gap: 22px;
  font-size: 14px;
  color: var(--ink-soft);
}
.nav__links a:hover { color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 6px; }
@media (max-width: 820px) {
  .nav__links { display: none; }
}
/* Below ~520px the nav has: brand + lang + Start sourcing. Sign in hides. */
@media (max-width: 520px) {
  .nav { padding: 8px 8px 8px 16px; gap: 8px; }
  .nav__cta .btn--ghost { display: none; }
  .nav__brand { font-size: 16px; }
}
/* Smallest screens: collapse the CTA label, keep just the arrow icon. */
@media (max-width: 420px) {
  .nav__cta .btn--solid span { display: none; }
  .nav__cta .btn--solid { padding: 10px 12px; }
}

/* ─────────────────────  LANGUAGE SWITCHER  ────────────────────── */
.lang-switcher { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: var(--radius-pill);
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background .15s, color .15s, transform .15s;
}
.lang-btn:hover { background: rgba(255,255,255,0.8); color: var(--ink); transform: translateY(-1px); }
.lang-btn svg:first-child { opacity: 0.7; }
.lang-btn svg:last-child {
  opacity: 0.6;
  transition: transform .2s ease;
}
.lang-switcher.is-open .lang-btn svg:last-child { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 18px;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 24px 50px -20px rgba(22,24,60,0.25);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
  animation: lang-pop .18s cubic-bezier(.2,.7,.2,1);
}
@keyframes lang-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lang-menu[hidden] { display: none; }
.lang-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
}
.lang-menu button:hover {
  background: rgba(255,255,255,0.7);
  color: var(--ink);
}
.lang-menu__code {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  min-width: 22px;
}
.lang-menu__label { flex: 1; font-weight: 500; }
@media (max-width: 560px) {
  .lang-btn svg:first-child { display: none; }
  .lang-btn { padding: 7px 10px; }
}

/* ─────────────────────────────  HERO  ──────────────────────── */
.hero {
  padding: clamp(48px, 8vw, 96px) var(--pad) 64px;
  max-width: var(--max);
  margin: 0 auto;
}
.hero--centered .hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}
.hero__title {
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 22px 0 18px;
  font-weight: 700;
  text-wrap: balance;
}
.hero__sub {
  font-size: clamp(16px, 1.4vw, 18.5px);
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.hero__sub strong { color: var(--ink); font-weight: 600; }
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  font-size: 13.5px; color: var(--ink-mute);
  margin-top: 28px;
}
.hero__meta strong { color: var(--ink); font-weight: 600; }
.hero__meta .dot { width: 4px; height: 4px; background: var(--ink-faint); border-radius: 50%; }

/* ───────────────────  HERO ACTIONS (primary CTAs)  ─────────────── */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.hero-actions__note {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}

/* ───────────────────  HERO INPUT (primary action)  ─────────────── */
.hero-input {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px;
  padding: 8px 8px 8px 20px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.65);
  gap: 12px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.hero-input:focus-within {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 4px var(--accent-ring),
    0 30px 60px -20px rgba(10,10,10,0.22);
}
.hero-input__icon {
  color: var(--ink);
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.55;
}
.hero-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
}
.hero-input input::placeholder { color: var(--ink-mute); }
.hero-input__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 10px 22px -8px rgba(10,10,10,0.5);
  transition: transform .15s ease;
}
.hero-input__submit:hover { transform: translateY(-1px); }
@media (max-width: 560px) {
  .hero-input__submit span { display: none; }
  .hero-input__submit { padding: 12px 14px; }
}

/* ──────────────────────  EXAMPLE CHIPS  ────────────────────── */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  max-width: 720px;
}
.hero-chips__label {
  font-size: 13px;
  color: var(--ink-mute);
  margin-right: 4px;
  letter-spacing: 0.04em;
}
.chip {
  font: inherit;
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(47, 107, 255, 0.08);
  border: 1px solid rgba(47, 107, 255, 0.22);
  color: var(--accent-strong);
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background .15s, transform .15s, color .15s, border-color .15s;
}
.chip:hover {
  background: rgba(47, 107, 255, 0.16);
  border-color: rgba(47, 107, 255, 0.4);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

/* ──────────────────────  DRAFT PREVIEW  ────────────────────── */
.draft-preview {
  width: 100%;
  max-width: 600px;
  margin: 22px auto 0;
}
.draft-preview[hidden] { display: none; }
.draft-preview__card {
  padding: 22px;
  text-align: left;
  animation: card-in .4s cubic-bezier(.2,.7,.2,1);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.draft-preview__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.draft-preview__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}
.draft-preview__title strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.draft-preview__title .erika-dot {
  margin-top: 5px;
  flex-shrink: 0;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 3px var(--accent-ring); }
  50%      { transform: scale(1.2); box-shadow: 0 0 0 6px var(--accent-soft); }
}
.draft-preview__role {
  display: block;
  color: var(--ink-mute);
  font-size: 13px;
  margin-top: 2px;
}
.draft-preview__close {
  background: rgba(10,10,10,0.06);
  border: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-mute);
  flex-shrink: 0;
  transition: background .15s;
}
.draft-preview__close:hover { background: rgba(10,10,10,0.12); color: var(--ink); }

.draft-preview__reels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.draft-reel {
  position: relative;
  aspect-ratio: 9/14;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--warm) 0%, var(--cool) 100%);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  animation: pop-in .55s cubic-bezier(.2,.7,.2,1) forwards;
}
.draft-reel:nth-child(1) { animation-delay: .05s; background: linear-gradient(160deg, #ff9d7a 0%, #ffd4b8 100%); }
.draft-reel:nth-child(2) { animation-delay: .15s; background: linear-gradient(160deg, #c4d2ec 0%, #161616 100%); }
.draft-reel:nth-child(3) { animation-delay: .25s; background: linear-gradient(160deg, #ff9d7a 0%, #a8bfe0 100%); }
.draft-reel:nth-child(4) { animation-delay: .35s; background: linear-gradient(160deg, #f5edd9 0%, #ff7a51 100%); }
.draft-reel::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 1.6s linear infinite;
}
.draft-preview.is-ready .draft-reel::before { animation: none; opacity: 0; }
.draft-reel__label {
  position: absolute;
  left: 8px; bottom: 8px;
  font-size: 10.5px;
  font-weight: 500;
  color: #fff;
  padding: 3px 7px;
  background: rgba(0,0,0,0.4);
  border-radius: 6px;
  backdrop-filter: blur(6px);
}
@keyframes pop-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shimmer {
  to { transform: translateX(100%); }
}

.draft-preview__gate p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.draft-preview__gate p strong { color: var(--ink); font-weight: 600; }
.signup-form {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.signup-form input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 10px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  min-width: 0;
}
.signup-form input::placeholder { color: var(--ink-mute); }
.signup-form button { flex-shrink: 0; }
.signup-fineprint {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-mute);
  text-align: center;
}

/* ──────────────  LIVE-IN-FEED PROOF SECTION  ──────────────── */
.section--live { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.live-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 860px) { .live-grid { grid-template-columns: 1fr; } }
.live-copy .section__title { margin-top: 14px; }
.live-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.live-stats div { display: flex; flex-direction: column; gap: 4px; }
.live-stats strong { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; }
.live-stats span { font-size: 12.5px; color: var(--ink-mute); }
.live-video { position: relative; justify-self: center; }

/* Phone module (used in live-in-feed section).
   Owns a named view-timeline so child demo elements can scrub their
   animations against the phone's scroll position in the viewport. */
.phone {
  position: relative;
  width: clamp(260px, 28vw, 340px);
  aspect-ratio: 9 / 19;
  border-radius: 42px;
  overflow: hidden;
  padding: 0;
  background: #000;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -1px 0 rgba(0,0,0,0.2) inset,
    0 50px 90px -30px rgba(10,10,10,0.4),
    0 20px 40px -20px rgba(10,10,10,0.3);
  view-timeline-name: --phone-view;
  view-timeline-axis: block;
}
.phone__notch {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 22px;
  background: #000;
  border-radius: 999px;
  z-index: 3;
}
.phone__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background:
    linear-gradient(155deg, #ff9d7a 0%, #f5b89d 35%, #c4d2ec 70%, #161616 100%);
}
.phone__overlay {
  position: absolute; inset: 0;
  padding: 18px 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.65) 100%);
  color: #fff;
  z-index: 2;
}
.phone__caption { margin-bottom: 12px; }
.phone__handle { font-size: 12px; opacity: 0.8; display: block; margin-bottom: 4px; }
.phone__caption p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.35; }
.phone__cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  border-radius: 999px;
  width: max-content;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, background 0.15s ease;
}
.phone__cta:hover { background: #fff; transform: translateY(-1px); }
.phone__cta:active { transform: translateY(0) scale(0.97); }

/* Tap-cursor that appears over the CTA — scroll-scrubbed. */
.phone__cta-tap {
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow:
    0 0 0 5px rgba(255,255,255,0.45),
    0 4px 12px rgba(10,10,10,0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: phone-tap linear both;
  animation-timeline: --phone-view;
  animation-range: cover 22% cover 34%;
}
.phone__cta {
  animation: phone-cta-press linear both;
  animation-timeline: --phone-view;
  animation-range: cover 28% cover 36%;
}
@keyframes phone-tap {
  0%   { opacity: 0; transform: translate(0, -180%) scale(0.6); }
  55%  { opacity: 1; transform: translate(0, 0) scale(1); }
  75%  { opacity: 1; transform: translate(0, 0) scale(0.8); }
  100% { opacity: 0; transform: translate(0, 0) scale(2); }
}
@keyframes phone-cta-press {
  0%   { transform: scale(1); background: rgba(255,255,255,0.95); box-shadow: none; }
  50%  { transform: scale(0.95); background: #fff; box-shadow: 0 0 0 3px rgba(47,107,255,0.3); }
  100% { transform: scale(1); background: rgba(255,255,255,0.95); box-shadow: none; }
}
.phone__hint {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
  animation: phone-hint-bob 2.4s ease-in-out infinite;
  transition: opacity 0.25s ease;
}
@keyframes phone-hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.78; }
  50%      { transform: translateY(2px); opacity: 1; }
}
.phone:has(.cflow--active) .phone__hint { opacity: 0; }

/* Candidate flow — the Meta/Instagram-style lead form that opens INSIDE the phone
   when the candidate taps "Apply in 30s". Sits on top of the video, slides
   up from the bottom. Animations only run when .cflow--active is set. */
/* Liquid-glass bottom sheet: covers the lower ~65% of the phone, lets the
   Reels video show through a heavy backdrop blur. Scrubbed up by scroll. */
.cflow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 65%;
  z-index: 5;
  padding: 26px 18px 20px;
  font-size: 13px;
  color: var(--ink);
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(28px) saturate(170%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.04);
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 22px 22px 0 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 -12px 40px -12px rgba(10, 10, 10, 0.25);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  animation: cflow-slide-up linear both;
  animation-timeline: --phone-view;
  animation-range: cover 34% cover 44%;
}
@keyframes cflow-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
/* iOS-style drag handle along the top edge of the sheet */
.cflow::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.22);
}
.cflow--active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cflow__head {
  display: flex; align-items: center; gap: 8px;
  padding-top: 4px;
}
.cflow__brand { display: inline-flex; align-items: center; gap: 8px; }
.cflow__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff url("logo.webp") center / 70% auto no-repeat;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.95);
  flex-shrink: 0;
}
.cflow__handle { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.cflow__title {
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em;
  margin-top: 0;
}

/* Glass-style fields — translucent over the form's own glass background */
.cflow__field {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 1px 2px rgba(22, 22, 22, 0.04);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  transform: translateY(6px);
}

.cflow__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 600;
}
.cflow__value {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

.cflow__submit {
  position: relative;
  margin-top: auto;
  padding: 12px 14px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  text-align: center;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 8px 22px -8px rgba(10,10,10,0.5);
}
.cflow__cursor {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.35);
  top: 50%; left: 50%;
  margin: -7px 0 0 -7px;
  opacity: 0;
}

.cflow__success {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-radius: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  pointer-events: none;
}
.cflow__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #14b66b;
  color: #fff;
  box-shadow: 0 0 0 8px rgba(20, 182, 107, 0.18);
}
.cflow__success strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.cflow__success small { font-size: 12px; color: var(--ink-mute); }

/* Scroll-driven timeline. Each beat is bound to a scroll range of the
   phone's view-timeline. Scrolling forward plays it, scrolling back
   rewinds, scrolling forward again replays — no JS, no time clocks.

   View ranges (cover X% to cover Y%) approximate scroll positions of
   the phone in the viewport: 0% = just entered, 100% = about to leave.
   22–36% : cursor + button press
   34–44% : form slides up
   42–58% : the three fields fade in (overlapping)
   54–62% : submit button appears
   60–70% : cursor inside the form taps, submit flashes blue
   65–80% : "Application received" success state fades in */
.cflow__field--1 {
  animation: cflow-in linear both;
  animation-timeline: --phone-view;
  animation-range: cover 42% cover 48%;
}
.cflow__field--2 {
  animation: cflow-in linear both;
  animation-timeline: --phone-view;
  animation-range: cover 47% cover 53%;
}
.cflow__field--3 {
  animation: cflow-in linear both;
  animation-timeline: --phone-view;
  animation-range: cover 52% cover 58%;
}
.cflow__submit {
  animation:
    cflow-in linear both,
    cflow-press linear both;
  animation-timeline: --phone-view, --phone-view;
  animation-range: cover 56% cover 62%, cover 62% cover 70%;
}
.cflow__cursor {
  animation: cflow-tap linear both;
  animation-timeline: --phone-view;
  animation-range: cover 60% cover 70%;
}
.cflow__success {
  animation: cflow-fade-in linear both;
  animation-timeline: --phone-view;
  animation-range: cover 66% cover 78%;
}

@keyframes cflow-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cflow-press {
  0%   { background: var(--ink); transform: translateY(0) scale(1); }
  40%  { background: #2f6bff; transform: translateY(0) scale(0.94); }
  100% { background: var(--ink); transform: translateY(0) scale(1); }
}
@keyframes cflow-tap {
  0%   { opacity: 0; transform: scale(0.5); }
  45%  { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes cflow-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* trustbar */
.trustbar {
  margin-top: clamp(56px, 8vw, 88px);
  padding: 14px 24px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
  max-height: 72px;
  overflow: hidden;
}
.trustbar__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  flex-shrink: 0;
}
.trustbar__logos {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Inner track holds the duplicated logo list and scrolls continuously. */
/* Track holds two identical groups; translating -50% lands group 2 exactly where
   group 1 started, so the loop is seamless. Per-group padding-right keeps the
   gap between groups (and at the seam) identical to the gap between logos. */
.trustbar__track {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.trustbar__group {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  flex-shrink: 0;
}
.trustbar:hover .trustbar__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.trustbar__logos img {
  display: block;
  width: 120px;
  height: 30px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter .25s ease, opacity .25s ease;
}
.trustbar__logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .trustbar__track { animation: none; }
  .trustbar__group { padding-right: 0; }
}

/* ─────────────────────────  SECTIONS  ──────────────────────── */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 128px) var(--pad);
}
.section--tight { padding-top: 24px; padding-bottom: 24px; }
.section__head { max-width: 820px; margin: 0 0 56px; }
.section__head--narrow { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
}
.section__title {
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 18px;
  text-wrap: balance;
}
.section__lede {
  font-size: clamp(15px, 1.3vw, 17.5px);
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0;
  text-wrap: pretty;
}
.section__head--narrow .section__lede { margin-left: auto; margin-right: auto; }

/* ─────────────────────────  HOW-IT-WORKS  ──────────────────── */
.how-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 760px) { .how-grid { grid-template-columns: 1fr; } }

.how-card {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 360px;
}
.how-card__num {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.how-card h3 {
  font-size: 24px;
  letter-spacing: -0.025em;
  margin: 0;
  font-weight: 700;
}
.how-card p { color: var(--ink-soft); margin: 0; font-size: 15px; }

.how-card__visual {
  margin-top: auto;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.75);
  padding: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.how-card__visual--chat { display: flex; flex-direction: column; gap: 8px; }
.chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  max-width: 90%;
  line-height: 1.4;
}
.chat-bubble--user {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.9);
  align-self: flex-start;
  border-bottom-left-radius: 6px;
}
.chat-bubble--erika {
  background: linear-gradient(135deg, rgba(255,157,122,0.22), rgba(168,191,224,0.22));
  border: 1px solid rgba(255,157,122,0.4);
  color: var(--ink);
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  display: flex; align-items: center; gap: 8px;
}
.erika-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.how-card__visual--reels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mini-reel {
  aspect-ratio: 9 / 14;
  border-radius: 10px;
  background: #161616;
  position: relative;
  overflow: hidden;
}
.mini-reel img,
.mini-reel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mini-reel::after {
  content: "";
  position: absolute;
  inset: auto 6px 6px 6px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.65);
}

.how-card__visual--graph {
  position: relative;
  height: 100px;
  display: flex; align-items: flex-end;
  padding: 12px;
}
.how-card__visual--graph svg { width: 100%; height: 100%; }
.graph-label {
  position: absolute; top: 12px; left: 14px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
}

.how-card__visual--profile {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
}
.profile-head {
  display: flex; align-items: center; gap: 10px;
}
.profile-head__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff url("logo.webp") center / 72% auto no-repeat;
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 4px 10px -6px rgba(22,22,22,0.2);
  flex-shrink: 0;
}
.profile-head__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-head__handle {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
}
.profile-head__verified { width: 13px; height: 13px; }
.profile-head__sub {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}
.profile-head__pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #21c47e;
  box-shadow: 0 0 0 3px rgba(33,196,126,0.22);
  animation: post-pulse 2.2s ease-in-out infinite;
}
@keyframes post-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(33,196,126,0.22); }
  50%      { box-shadow: 0 0 0 5px rgba(33,196,126,0.05); }
}
.profile-head__platform {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 4px 8px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  white-space: nowrap;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.profile-grid__cell {
  position: relative;
  aspect-ratio: 9 / 12;
  border-radius: 8px;
  overflow: hidden;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.6);
}
.profile-grid__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-grid__badge {
  position: absolute;
  top: 4px; right: 4px;
  width: 12px; height: 12px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}
.profile-grid__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #21c47e;
}

.how-card__visual--leaderboard {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
}
.lb-header {
  display: flex; align-items: center; gap: 8px;
}
.lb-handle {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  flex: 1; min-width: 0;
}
.lb-handle__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff url("logo.webp") center / 72% auto no-repeat;
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 6px -3px rgba(22,22,22,0.25);
  flex-shrink: 0;
}
.lb-handle__verified { width: 12px; height: 12px; flex-shrink: 0; }
.lb-platforms {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 4px 8px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  white-space: nowrap;
}
.lb-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.lb-row {
  display: grid;
  grid-template-columns: 22px 1fr minmax(70px, 1.2fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
  transition: background 0.2s ease;
}
.lb-row--up { background: rgba(47,107,255,0.06); border-color: rgba(47,107,255,0.18); }
.lb-row--paused { opacity: 0.62; }
.lb-rank {
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
}
.lb-row--up .lb-rank { color: var(--accent); }
.lb-rank--paused {
  display: inline-flex; align-items: center; justify-content: center;
}
.lb-rank--paused svg { width: 12px; height: 12px; fill: var(--ink-mute); }
.lb-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-bar {
  height: 6px;
  background: rgba(22,22,22,0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.lb-bar__fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--accent) 0%, #6a9bff 100%);
  border-radius: inherit;
  animation: lb-grow 1.1s ease-out;
}
.lb-row:not(.lb-row--up) .lb-bar__fill {
  background: rgba(22,22,22,0.28);
}
.lb-row--paused .lb-bar__fill {
  background: rgba(22,22,22,0.18);
}
@keyframes lb-grow {
  from { width: 0; }
  to   { width: var(--w, 0%); }
}
.lb-meta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lb-budget {
  font-weight: 700;
  color: var(--ink);
  font-size: 12px;
}
.lb-row--paused .lb-budget { color: var(--ink-mute); font-weight: 600; }
.lb-trend--up { color: #21c47e; font-size: 9px; }
.lb-footer {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 2px;
}
.lb-footer__pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #21c47e;
  box-shadow: 0 0 0 3px rgba(33,196,126,0.22);
  animation: post-pulse 2.2s ease-in-out infinite;
}

.how-card__visual--pipeline { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.pipe-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  padding: 8px 10px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 10px;
}
.dot--green { width: 8px; height: 8px; border-radius: 50%; background: #21c47e; box-shadow: 0 0 0 3px rgba(33,196,126,0.2); }
.dot--amber { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ─────────────────────────  WHAT ERIKA DOES  ──────────────── */
.what-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.what-card {
  padding: 28px;
  grid-column: span 3;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 280px;
}
.what-card--wide { grid-column: span 6; flex-direction: row; align-items: center; gap: 32px; }
.what-card--wide .what-card__copy { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.what-card--wide .what-card__visual { flex: 1; }
@media (max-width: 900px) {
  .what-card { grid-column: span 6; }
  .what-card--wide { flex-direction: column; }
}
.what-card h3 { margin: 0; font-size: 22px; letter-spacing: -0.025em; font-weight: 700; }
.what-card p { color: var(--ink-soft); margin: 0; font-size: 15px; }
.check-list { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.check-list li { padding-left: 24px; position: relative; font-size: 14px; color: var(--ink-soft); }
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--warm) 0%, var(--cool) 100%);
  box-shadow: 0 0 0 3px rgba(22,22,22,0.06);
}

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  padding: 16px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 16px;
}
.versus__col {
  display: flex; flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.versus__head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(22,22,22,0.08);
}
.versus__col--you .versus__head {
  color: var(--accent);
}
.versus__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.versus__list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.versus__col--agency .versus__list li {
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-color: rgba(22,22,22,0.18);
  text-decoration-thickness: 1px;
}
.versus__col--you .versus__list li {
  color: var(--ink);
  font-weight: 500;
}
.versus__icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-top: 1px;
}
.versus__icon--bad {
  background: rgba(22,22,22,0.08);
  color: var(--ink-mute);
}
.versus__icon--good {
  background: var(--accent-soft);
  color: var(--accent);
}
.versus__divider {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  width: 1px;
  background: rgba(22,22,22,0.08);
  margin: 0 2px;
}
.versus__vs {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(22,22,22,0.08);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
}
@media (max-width: 540px) {
  .versus { grid-template-columns: 1fr; }
  .versus__divider {
    width: auto; height: 1px;
    background: rgba(22,22,22,0.08);
    margin: 4px 0;
  }
}

.neural {
  position: relative;
  margin-top: auto;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 50%, rgba(47,107,255,0.18) 0%, transparent 55%),
    linear-gradient(160deg, #0b1020 0%, #131a33 70%, #1a2147 100%);
  border: 1px solid rgba(47,107,255,0.25);
  overflow: hidden;
  box-shadow: inset 0 0 60px -20px rgba(47,107,255,0.35);
}
.neural::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
}
.neural__svg {
  display: block;
  width: 100%;
  height: 180px;
  position: relative;
  z-index: 1;
}
.neural__lines line {
  opacity: 0.55;
}
.neural__nodes circle {
  filter: drop-shadow(0 0 6px rgba(47,107,255,0.55));
  animation: neural-node-pulse 3.6s ease-in-out infinite;
}
.neural__nodes circle:nth-child(2) { animation-delay: 0.3s; }
.neural__nodes circle:nth-child(3) { animation-delay: 0.6s; }
.neural__nodes circle:nth-child(4) { animation-delay: 0.9s; }
.neural__nodes circle:nth-child(5) { animation-delay: 1.2s; }
.neural__nodes circle:nth-child(6) { animation-delay: 1.5s; }
.neural__nodes circle:nth-child(7) { animation-delay: 1.8s; }
.neural__nodes circle:nth-child(8) { animation-delay: 2.1s; }
.neural__nodes circle:nth-child(9) { animation-delay: 2.4s; }
@keyframes neural-node-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.neural__erika-label {
  fill: #fff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.22em;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  paint-order: stroke;
  pointer-events: none;
}
.neural__pulse {
  filter: drop-shadow(0 0 8px rgba(47,107,255,0.95));
}
.neural__erika circle:first-child {
  filter: drop-shadow(0 0 16px rgba(47,107,255,0.85));
}
.neural__erika-ring {
  transform-origin: 280px 100px;
  animation: neural-ring 3s ease-in-out infinite;
}
.neural__erika-ring--2 {
  animation-delay: 0.8s;
  animation-duration: 4s;
}
@keyframes neural-ring {
  0%   { opacity: 0.5; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.35); }
}
.neural__outputs {
  list-style: none;
  margin: 0; padding: 0;
  position: absolute;
  left: 14px; top: 14px;
  display: flex; flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.neural__outputs li {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(47,107,255,0.12);
  border: 1px solid rgba(47,107,255,0.25);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.neural__outputs li::before {
  content: "›";
  color: var(--accent);
  font-weight: 700;
}
.neural__zeros {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  display: inline-flex; gap: 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  padding: 6px 10px;
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}
.neural__zeros span:not([aria-hidden]) {
  color: rgba(255,255,255,0.85);
}
.neural__zeros span[aria-hidden] {
  color: rgba(47,107,255,0.6);
}
@media (max-width: 420px) {
  .neural__svg { height: 150px; }
  .neural__outputs li { font-size: 9.5px; padding: 2px 6px; }
  .neural__zeros { font-size: 9px; padding: 5px 8px; }
}

.net-grid, .ats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.net-grid span, .ats-grid span {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.85);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
}

.leadform-mock {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: var(--radius-md);
}
.leadform-mock__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.75);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-mute);
}
.leadform-mock__row i {
  flex: 1; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(10,10,10,0.08), rgba(10,10,10,0.04));
}
.leadform-mock__submit {
  margin-top: 4px;
  text-align: center;
  padding: 10px;
  background: var(--ink); color: #fff;
  border-radius: 10px;
  font-weight: 600; font-size: 13px;
}

.leadform-flow {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.leadform-step {
  padding: 14px 10px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0;
}
.leadform-step__icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.9);
  color: var(--ink-soft);
}
.leadform-step__icon svg { width: 20px; height: 20px; }
.leadform-step__label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.leadform-step__sub {
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.3;
}
.leadform-step--accent .leadform-step__icon {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(47,107,255,0.2);
}
.leadform-step--accent .leadform-step__label { color: var(--accent); }
.leadform-flow__arrow {
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1;
  user-select: none;
}
@media (max-width: 520px) {
  .leadform-flow {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .leadform-flow__arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .leadform-step { padding: 10px; }
}

.qualify-mock {
  margin-top: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.qualify-mock__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.qualify-mock__list li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
}
.qualify-mock__list li.qualify-mock__fail {
  color: var(--ink-mute);
}
.qualify-mock__a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.qualify-mock__a--good {
  background: var(--accent-soft);
  color: var(--accent);
}
.qualify-mock__a--bad {
  background: rgba(22,22,22,0.08);
  color: var(--ink-mute);
}
.qualify-mock__verdict {
  display: flex; flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(22,22,22,0.06);
}
.qualify-mock__route {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.qualify-mock__route--good { color: var(--accent); }
.qualify-mock__route--bad { color: var(--ink-mute); }

.persona-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.persona { padding: 14px 16px; }
.persona span { display: block; font-weight: 600; font-size: 15px; }
.persona small { color: var(--ink-mute); font-size: 12.5px; }

/* ────────────────────────────  TESTIMONIALS  ─────────────────── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 720px) { .testi-grid { grid-template-columns: 1fr; max-width: 600px; } }
.testi-card {
  padding: 44px 44px 36px;
  display: flex; flex-direction: column; gap: 28px;
}
@media (max-width: 480px) { .testi-card { padding: 32px 28px 28px; } }
.testi-card__quote {
  margin: 0;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-weight: 500;
  flex: 1;
}
.testi-card__quote::before {
  content: "“";
  display: block;
  font-size: 64px;
  line-height: 0.5;
  color: var(--accent);
  opacity: 0.5;
  margin-bottom: 16px;
}
.testi-card__person {
  display: flex; align-items: center; gap: 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(22,22,22,0.07);
}
.testi-card__avatar {
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--warm) 0%, var(--cool) 100%);
}
.testi-card__meta { display: flex; flex-direction: column; min-width: 0; }
.testi-card__name { font-weight: 600; font-size: 16px; color: var(--ink); }
.testi-card__company { font-size: 13.5px; color: var(--ink-mute); }

/* ────────────────────────────  INDUSTRIES  ─────────────────── */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industries-grid { grid-template-columns: 1fr; } }
.industry {
  padding: 26px 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.industry h4 { margin: 0; font-size: 19px; letter-spacing: -0.02em; font-weight: 700; }
.industry p  { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.industry__icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,157,122,0.25), rgba(168,191,224,0.25));
  border: 1px solid rgba(255,255,255,0.85);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  box-shadow: 0 6px 18px -8px rgba(22,22,22,0.2);
}
.industry__icon svg { width: 22px; height: 22px; }
.industry--ghost { border-style: dashed; background: rgba(255,255,255,0.25); }
.industry__link {
  margin-top: auto;
  font-weight: 600; color: var(--accent);
  font-size: 14px;
}

/* ────────────────────────────  COMPARISON  ─────────────────── */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 760px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-col { padding: 30px 30px 24px; }
.compare-col h3 { margin: 0 0 18px; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }
.compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.compare-list li {
  display: flex; gap: 10px;
  font-size: 15px; color: var(--ink-soft);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.compare-list li:last-child { border-bottom: none; }
.compare-list li strong { color: var(--ink); }
.compare-col--old .x { color: var(--ink-faint); font-weight: 600; }
.compare-col--new .v { color: var(--accent); font-weight: 700; }
.compare-col--new {
  background:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 198, 173, 0.35) 50%,
      rgba(168, 191, 224, 0.30) 100%);
  border: 1px solid rgba(255,255,255,0.85);
}

/* ─────────────────────────────  PRICING  ───────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card {
  position: relative;
  padding: 26px 26px 24px;
  display: flex; flex-direction: column; gap: 22px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.price-card:hover { transform: translateY(-3px); }
.price-card header { display: flex; flex-direction: column; gap: 10px; }
.price-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.price-card header h3 {
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
}
.price-card__icon {
  width: 18px; height: 18px;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.price-card__desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.price { margin: 12px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.price__amount { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.price__per { font-size: 14px; font-weight: 500; color: var(--ink-mute); letter-spacing: -0.01em; }
.price-note { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-mute); }
@media (max-width: 860px) {
  .price-card:hover { transform: none; }
}
.price-tag {
  padding: 4px 12px;
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(22, 22, 22, 0.35);
}
.price-tag--inline {
  position: static;
  transform: none;
}
.btn--disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* ──────────────────────────────  BLOG  ──────────────────────── */
.section__head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  max-width: 100%;
  margin: 0 0 40px;
}
.section__head--row .section__title { margin-top: 8px; }
.blog-view-all { white-space: nowrap; flex-shrink: 0; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -1px 0 rgba(255,255,255,0.22) inset,
    0 40px 70px -22px rgba(22,22,22,0.20),
    0 12px 28px -14px rgba(22,22,22,0.14);
}
.blog-card__cover {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #161616;
}
.blog-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card__cover img { transform: scale(1.04); }
.blog-card__body {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.blog-card__tag {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-strong);
  padding: 4px 10px;
  background: var(--accent-soft);
  border-radius: 999px;
}
.blog-card__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--ink);
}
.blog-card__title a { color: inherit; }
.blog-card__title a:hover { color: var(--accent-strong); }
.blog-card__meta {
  margin-top: auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: var(--ink-mute);
}

/* Blog listing page */
.blog-page-hero {
  max-width: 820px;
  margin: 100px auto 56px;
  padding: 0 var(--pad);
  text-align: center;
}
.blog-page-hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-weight: 700;
  margin: 14px 0 16px;
  text-wrap: balance;
}
.blog-page-hero p {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
}
.blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--max);
  margin: 0 auto 80px;
  padding: 0 var(--pad);
}
@media (max-width: 900px) { .blog-list { grid-template-columns: 1fr; } }

/* Individual post page */
.post-page {
  max-width: 720px;
  margin: 100px auto 80px;
  padding: 0 var(--pad);
}
.post-page__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px;
  color: var(--ink-mute);
  margin-bottom: 32px;
}
.post-page__back:hover { color: var(--ink); }
.post-page__tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-strong);
  padding: 4px 10px;
  background: var(--accent-soft);
  border-radius: 999px;
  margin-bottom: 16px;
}
.post-page h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 700;
  margin: 0 0 16px;
  text-wrap: balance;
}
.post-page__meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--ink-mute);
  margin-bottom: 32px;
}
.post-page__cover {
  margin: 0 0 40px;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #161616;
}
.post-page__cover img { width: 100%; height: 100%; object-fit: cover; }
.post-page__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.post-page__body h2 {
  font-size: 26px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  margin: 40px 0 14px;
  line-height: 1.2;
}
.post-page__body h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 28px 0 10px;
}
.post-page__body p { margin: 0 0 18px; }
.post-page__body strong { color: var(--ink); font-weight: 600; }
.post-page__body ul, .post-page__body ol { margin: 0 0 18px; padding-left: 20px; }
.post-page__body li { margin-bottom: 8px; }
.post-page__body blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
  color: var(--ink);
  font-style: italic;
}
.post-page__footer {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
}

/* ──────────────────────────────  CTA  ──────────────────────── */
.section--cta { padding-top: clamp(48px, 8vw, 96px); }
.cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(36px, 5vw, 64px);
  background:
    linear-gradient(160deg,
      rgba(255, 198, 173, 0.55) 0%,
      rgba(255, 255, 255, 0.55) 45%,
      rgba(168, 191, 224, 0.50) 100%);
}
@media (max-width: 860px) { .cta-card { flex-direction: column; align-items: flex-start; } }
.cta-card__copy { max-width: 560px; }
.cta-card__copy h2 {
  margin: 12px 0 14px;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}
.cta-card__copy p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.cta-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─────────────────────────────  FOOTER  ────────────────────── */
.footer {
  max-width: var(--max);
  margin: 60px auto 24px;
  padding: 0 var(--pad);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 40px;
  padding: 40px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
@media (max-width: 760px) { .footer__top { grid-template-columns: 1fr; } }
.footer__brand { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.footer__brand strong { font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; }
.footer__brand p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; max-width: 280px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 560px) { .footer__cols { grid-template-columns: 1fr 1fr; } }
.footer__cols h5 {
  margin: 0 0 12px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
}
.footer__cols a {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 4px 0;
}
.footer__cols a:hover { color: var(--ink); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 18px 4px 0;
  font-size: 12.5px;
  color: var(--ink-mute);
}
@media (max-width: 560px) { .footer__bottom { flex-direction: column; } }

/* ─────────────────────────  SCROLL REVEAL  ─────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bg__blob { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}