/* ==========================================================================
   premium.css - SLK Media Agency premium design layer
   Loaded AFTER styles.css / podcast-multiplier-styles.css in every layout.
   One source of truth for tokens, typography, rhythm, surfaces, and motion
   utilities across every page. Copy and CTAs are untouched by this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens: remap the legacy variable set to the refined palette so the
      entire existing CSS inherits the new look without a rewrite.
   -------------------------------------------------------------------------- */
:root {
  /* refined palette */
  --bg-base: #0a0a0b;
  --bg-raised: #111114;
  --bg-overlay: #17171c;
  --text-primary: #f5f6f8;
  --text-secondary: #b6bac3;
  --text-muted-2: #8b8f99;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --accent: #4cb2f0;
  --accent-strong: #7cc6f5;
  --accent-ink: #071019; /* text on accent surfaces */

  /* legacy remap */
  --primary-color: var(--accent);
  --primary-dark: #2f9de0;
  --primary-light: var(--accent-strong);
  --bg-color: var(--bg-base);
  --bg-color-light: var(--bg-raised);
  --bg-color-lighter: var(--bg-overlay);
  --text-color: var(--text-primary);
  --text-color-muted: var(--text-secondary);
  --border-color: var(--hairline);
  --border-soft: var(--hairline-strong);
  --surface-1: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border-radius: 12px;
  --shadow-card: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  --magic-color: var(--accent);
  --accent-grad: linear-gradient(135deg, #7cc6f5 0%, #4cb2f0 55%, #2f9de0 100%);

  /* Sections are transparent: the whole page shares ONE continuous
     atmosphere painted on html plus the fixed soundfield layer below. */
  --gradient-dark-purple: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  --gradient-dark-red: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  --gradient-dark-blue: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  --pattern-opacity: 0.16;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --dur-quick: 0.28s;
  --dur-reveal: 0.85s;
  --transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);

  /* rhythm */
  --space-section: clamp(84px, 11vh, 132px);
  --radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   2. Base: page canvas, selection, scrollbar, grain, focus
   -------------------------------------------------------------------------- */
html {
  background:
    radial-gradient(90rem 56rem at 80% -18%, rgba(76, 178, 240, 0.07), transparent 55%),
    radial-gradient(72rem 48rem at -12% 112%, rgba(76, 178, 240, 0.04), transparent 60%),
    var(--bg-base);
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* Lenis owns scrolling when active; native smooth would fight it */
html.lenis {
  scroll-behavior: auto;
}

html.lenis body {
  min-height: 100vh;
}

body {
  font-family: var(--font-body, Inter), Inter, system-ui, sans-serif;
  background: transparent;
  color: var(--text-secondary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* the site-wide atmosphere: one fixed soundfield behind every page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/generated/hero-soundfield.webp") center 70% / cover no-repeat;
  background-image: image-set(
    url("/generated/hero-soundfield.avif") type("image/avif"),
    url("/generated/hero-soundfield.webp") type("image/webp")
  );
  opacity: 0.42;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes page-breathe {
    0% { transform: scale(1.03) translate3d(-0.7%, 0.4%, 0); }
    100% { transform: scale(1.09) translate3d(0.7%, -0.6%, 0); }
  }

  body::before {
    animation: page-breathe 34s ease-in-out infinite alternate;
    will-change: transform;
  }
}

::selection {
  background: rgba(76, 178, 240, 0.32);
  color: #ffffff;
}

/* fine film grain over everything, quiet enough to feel, not see */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 3000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.accordion-header:focus-visible,
.menu-toggle:focus-visible,
.video-overlay:focus-visible,
.control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link:focus {
  background: var(--accent);
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   3. Typography: the original Inter format, tuned for rhythm only
   -------------------------------------------------------------------------- */
h1, h2,
.headline,
.section-title,
.footer-cta-heading {
  font-family: var(--font-body, Inter), Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

h3, h4, h5, h6 {
  color: var(--text-primary);
  text-wrap: balance;
}

.headline,
.hero h1,
.hero-section h1,
.portfolio-hero h1,
.tpage-hero h1,
.cs-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 24px;
}

.section-title {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.18;
  font-weight: 700;
}

/* Highlighted spans keep the original flat accent color */
.highlight {
  color: var(--accent);
}

.subheadline,
.section-subtitle {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

p {
  color: var(--text-secondary);
}

strong {
  color: var(--text-primary);
  font-weight: 620;
}

/* overline/eyebrow labels */
.sub-headline-blue,
.tpage-badge {
  font-family: var(--font-body, Inter), Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 620;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.tpage-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(76, 178, 240, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(76, 178, 240, 0.07);
}

/* --------------------------------------------------------------------------
   4. Rhythm and layout
   -------------------------------------------------------------------------- */
section {
  padding: var(--space-section) 0;
}

.navbar,
.sticky-cta {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar { padding: 14px 0; }
.navbar.scrolled { padding: 10px 0; }
.sticky-cta { padding: 14px 0; }

/* --------------------------------------------------------------------------
   5. Navigation: quiet glass, hairline, precise links
   -------------------------------------------------------------------------- */
.navbar {
  background: rgba(10, 10, 11, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), padding 0.4s var(--ease-out);
}

.navbar.scrolled {
  background: rgba(10, 10, 11, 0.78);
  border-bottom-color: var(--hairline);
  box-shadow: 0 12px 40px -20px rgba(0, 0, 0, 0.8);
}

.nav-menu a:not(.cta-button) {
  position: relative;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
}

.nav-menu a:not(.cta-button):hover {
  color: var(--text-primary);
}

/* animated underline for nav + inline text links */
.nav-menu a:not(.cta-button)::after,
.accordion-content a::after,
.footer-legal .legal-link::after,
.pt-intake-link a::after,
.pt-step-link::after,
.hero-pricing-peek a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s var(--ease-out);
}

.nav-menu a:not(.cta-button),
.accordion-content a,
.footer-legal .legal-link,
.pt-intake-link a,
.pt-step-link,
.hero-pricing-peek a {
  position: relative;
  text-decoration: none;
}

.nav-menu a:not(.cta-button):hover::after,
.accordion-content a:hover::after,
.footer-legal .legal-link:hover::after,
.pt-intake-link a:hover::after,
.pt-step-link:hover::after,
.hero-pricing-peek a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   6. Buttons: one accent, dark ink, spring feel
   -------------------------------------------------------------------------- */
.primary-cta,
.btn-primary,
.cta-button {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  font-weight: 620;
  letter-spacing: 0.005em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 30px -12px rgba(76, 178, 240, 0.55);
  transition: transform 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out), background 0.32s var(--ease-out);
  will-change: transform;
}

.primary-cta:hover,
.btn-primary:hover,
.cta-button:hover {
  background: var(--accent-strong);
  color: var(--accent-ink);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 16px 40px -14px rgba(76, 178, 240, 0.7);
}

.primary-cta:active,
.btn-primary:active,
.cta-button:active {
  transform: translateY(0) scale(0.985);
}

.primary-cta::before { display: none; }

.secondary-cta {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline-strong);
  color: var(--text-primary);
  border-radius: 10px;
  font-weight: 560;
  transition: transform 0.32s var(--ease-spring), border-color 0.32s var(--ease-out), background 0.32s var(--ease-out);
}

.secondary-cta:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   7. Surfaces: cards, panels, hairline structure
   -------------------------------------------------------------------------- */
.feature,
.problem-point,
.qualification-item,
.accordion-item,
.stat-card,
.case-card,
.cs-card,
.ba-card,
.problem-card,
.pricing-tier,
.pt-deliverable,
.pt-vtest,
.pt-step,
.pt-pricing-card,
.testimonial-mini,
.cost-callout,
.solution-highlight,
.limited-spots,
.t-feature-quote,
.problem-item,
.solution-item,
.truth-item,
.steps-list li,
.guarantee-content,
.proof-item,
.check-list li,
.x-list li,
.add-on-card,
.comparison-content,
.rave-card,
.testimonial-card,
.contact-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.feature,
.case-card,
.cs-card,
.ba-card,
.problem-card,
.pt-deliverable,
.pt-step,
.pt-vtest {
  transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.feature:hover,
.case-card:hover,
.cs-card:hover,
.ba-card:hover,
.problem-card:hover,
.pt-deliverable:hover,
.pt-step:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-strong);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
}

.accordion-item:hover {
  border-color: var(--hairline-strong);
}

/* founder photos: quiet ring instead of a bright outline */
.founder-photo,
.founder-mini-photo {
  border: 1px solid var(--hairline-strong);
  box-shadow:
    0 0 0 3px rgba(76, 178, 240, 0.16),
    0 24px 60px -24px rgba(0, 0, 0, 0.7);
}

/* featured pricing card: confident but not loud */
.pricing-tier.featured {
  border-color: rgba(76, 178, 240, 0.35);
  box-shadow:
    0 0 0 1px rgba(76, 178, 240, 0.18),
    0 30px 80px -36px rgba(76, 178, 240, 0.3);
}

/* stat presentation */
.stat-number {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.stat-label {
  color: var(--text-muted-2);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 540;
}

/* sections that hardcode the old purple wash */
.problem {
  background: var(--gradient-dark-red);
}

/* hamburger: consistent reset across both route groups */
button.menu-toggle {
  background: transparent;
  border: 0;
  padding: 0;
}

button.menu-toggle span {
  background-color: var(--text-primary);
}

/* mobile slide-down menu panel */
@media (max-width: 768px) {
  .nav-menu {
    background: rgba(10, 10, 11, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hairline);
  }
}

/* --------------------------------------------------------------------------
   8. Accordion: smoother open, precise icon
   -------------------------------------------------------------------------- */
.accordion-content {
  transition: max-height 0.6s var(--ease-out), padding 0.4s var(--ease-out);
}

.accordion-item.active .accordion-content {
  max-height: 2400px;
}

.accordion-icon {
  transition: transform 0.45s var(--ease-spring), color 0.3s var(--ease-out);
}

/* --------------------------------------------------------------------------
   9. Tables: editorial rules, featured column
   -------------------------------------------------------------------------- */
.comparison-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-raised);
}

.comparison-table th,
.comparison-table td {
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  border-right: none;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.comparison-table td {
  background: transparent;
}

.comparison-table th.featured,
.comparison-table td.positive {
  background: rgba(76, 178, 240, 0.07);
}

.comparison-table td.negative {
  background: rgba(239, 68, 68, 0.05);
}

.comparison-table td.warning {
  background: rgba(255, 183, 0, 0.045);
}

/* --------------------------------------------------------------------------
   10. Video and media containers
   -------------------------------------------------------------------------- */
.client-video,
.portfolio-video,
.clip-card,
.video-wrapper,
.t-feature-media,
.pt-vtest-video {
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-raised);
  transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.client-video:hover,
.portfolio-video:hover,
.clip-card:hover {
  transform: translateY(-4px) scale(1.012);
  border-color: var(--hairline-strong);
  box-shadow: 0 32px 70px -30px rgba(0, 0, 0, 0.75);
}

/* --------------------------------------------------------------------------
   10b. CTA bands: hairline top, focused accent light, measured prose
   -------------------------------------------------------------------------- */
.footer-cta,
.footer-cta-section,
.final-cta-section,
.mid-cta,
.t-cta {
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(56rem 30rem at 50% 0%, rgba(76, 178, 240, 0.09), transparent 62%);
  text-align: center;
}

.footer-cta p,
.footer-cta-section p,
.mid-cta p,
.next-steps-section .limited-spots p,
.portfolio-cta p {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   11. Footer: quiet, structured
   -------------------------------------------------------------------------- */
.footer,
.footer-section {
  border-top: 1px solid var(--hairline);
  background: transparent;
  padding: 64px 0 40px;
}

.footer .contact-item,
.footer-section .contact-item {
  color: var(--text-muted-2);
}

.footer .contact-item i,
.footer-section .contact-item i {
  color: var(--accent);
  opacity: 0.85;
}

.footer-bottom p {
  color: var(--text-muted-2);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   12. Sticky CTA: overlay glass
   -------------------------------------------------------------------------- */
.sticky-cta {
  background: rgba(16, 16, 20, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid var(--hairline-strong);
  transition: transform 0.55s var(--ease-out);
}

/* --------------------------------------------------------------------------
   13. Motion utilities (driven by MotionLayer)
       Reveal states only apply once JS marks <html data-motion="on">,
       so content is never hidden if JS fails or motion is reduced.
   -------------------------------------------------------------------------- */
html[data-motion="on"] .rv {
  opacity: 0;
  transform: translate3d(var(--rv-x, 0px), 30px, 0) scale(0.985);
  filter: blur(5px);
}

html[data-motion="on"] .rv.rv-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out),
    filter var(--dur-reveal) var(--ease-out);
  transition-delay: var(--rv-delay, 0s);
}

html[data-motion="on"] .rv-fade {
  opacity: 0;
  transform: none;
}

html[data-motion="on"] .rv-fade.rv-in {
  opacity: 1;
  transition: opacity 0.9s var(--ease-out);
  transition-delay: var(--rv-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion="on"] .rv,
  html[data-motion="on"] .rv-fade {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* --------------------------------------------------------------------------
   13a-2. Micro-life: accent rule draws under section titles on reveal,
          play buttons breathe gently.
   -------------------------------------------------------------------------- */
.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 18px auto 0;
  border-radius: 2px;
  background: var(--accent-grad);
}

html[data-motion="on"] .section-title.rv::after {
  transform: scaleX(0);
}

html[data-motion="on"] .section-title.rv.rv-in::after {
  transform: scaleX(1);
  transition: transform 0.9s var(--ease-out) 0.35s;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes play-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
  }

  .video-overlay .play-icon {
    animation: play-breathe 2.6s ease-in-out infinite;
  }
}

/* --------------------------------------------------------------------------
   13a-3. Liveliness layer: always-on ambient life, added 2026-07-11.
          Accent shimmer on highlighted spans, a soft pulse plus sheen sweep
          on primary CTAs, a scroll progress hairline, and a gentle parallax
          on the home hero cards. Everything sits inside the reduced-motion
          gate; the static render is unchanged.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* accent shimmer: a lighter tint slides through the highlight gradient */
  @keyframes highlight-sheen {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: 0% 0; }
  }

  .highlight {
    background: linear-gradient(100deg, #2f9de0 0%, #4cb2f0 30%, #a8d9f9 50%, #4cb2f0 70%, #2f9de0 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: highlight-sheen 6s ease-in-out infinite;
  }

  /* primary CTAs: a quiet pulse ring so the main action never sits dead */
  @keyframes cta-pulse {
    0% { outline: 3px solid rgba(76, 178, 240, 0.34); outline-offset: 0px; }
    62% { outline: 3px solid rgba(76, 178, 240, 0); outline-offset: 13px; }
    100% { outline: 3px solid rgba(76, 178, 240, 0); outline-offset: 13px; }
  }

  .primary-cta:not(:hover):not(:focus-visible),
  .btn-primary:not(:hover):not(:focus-visible),
  .cta-button:not(:hover):not(:focus-visible) {
    animation: cta-pulse 3.4s var(--ease-out) infinite;
  }

  /* sheen sweep across primary CTAs */
  @keyframes cta-sheen {
    0% { transform: translateX(-130%) skewX(-18deg); }
    14% { transform: translateX(230%) skewX(-18deg); }
    100% { transform: translateX(230%) skewX(-18deg); }
  }

  .primary-cta,
  .btn-primary,
  .cta-button {
    position: relative;
    overflow: hidden;
  }

  .primary-cta::after,
  .btn-primary::after,
  .cta-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 42%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.32) 50%, transparent 100%);
    transform: translateX(-130%) skewX(-18deg);
    animation: cta-sheen 4.6s ease-in-out infinite;
  }
}

/* aurora orbs: two large accent glows drifting behind every page */
@media (prefers-reduced-motion: no-preference) {
  @keyframes orb-a {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-9rem, 8rem, 0) scale(1.18); }
  }

  @keyframes orb-b {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(11rem, -7rem, 0) scale(1.14); }
  }

  html::before,
  html::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(64px);
    will-change: transform;
  }

  html::before {
    width: 56rem;
    height: 56rem;
    top: -20rem;
    right: -16rem;
    background: radial-gradient(circle, rgba(76, 178, 240, 0.17) 0%, transparent 62%);
    animation: orb-a 21s ease-in-out infinite alternate;
  }

  html::after {
    width: 46rem;
    height: 46rem;
    bottom: -18rem;
    left: -14rem;
    background: radial-gradient(circle, rgba(47, 157, 224, 0.14) 0%, transparent 62%);
    animation: orb-b 27s ease-in-out infinite alternate;
  }
}

/* equalizer dividers: audio bars marking the break between long sections
   (elements injected by MotionLayer, aria-hidden, motion-on only) */
.eq-divider {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  height: 40px;
  padding-top: 4px;
  position: relative;
  z-index: 1;
}

@keyframes eq-bounce {
  0% { transform: scaleY(0.2); }
  100% { transform: scaleY(1); }
}

.eq-divider span {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--accent-grad);
  box-shadow: 0 0 12px rgba(76, 178, 240, 0.5);
  transform-origin: bottom center;
  animation: eq-bounce 0.9s ease-in-out infinite alternate;
}

.eq-divider span:nth-child(1) { animation-duration: 0.82s; animation-delay: -0.30s; height: 55%; }
.eq-divider span:nth-child(2) { animation-duration: 1.04s; animation-delay: -0.65s; height: 80%; }
.eq-divider span:nth-child(3) { animation-duration: 0.72s; animation-delay: -0.10s; height: 100%; }
.eq-divider span:nth-child(4) { animation-duration: 1.12s; animation-delay: -0.45s; height: 70%; }
.eq-divider span:nth-child(5) { animation-duration: 0.92s; animation-delay: -0.80s; height: 88%; }
.eq-divider span:nth-child(6) { animation-duration: 1.20s; animation-delay: -0.22s; height: 62%; }
.eq-divider span:nth-child(7) { animation-duration: 0.78s; animation-delay: -0.55s; height: 46%; }

/* platform marquee: distribution icons gliding under the hero
   (element injected by MotionLayer on / and /podcast-multiplier) */
.platform-marquee {
  overflow: hidden;
  padding: 26px 0 10px;
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

@keyframes marquee-glide {
  to { transform: translateX(-50%); }
}

/* MotionLayer sizes the track so one half always spans the viewport. The auto
   margins are a fallback: if it ever comes up narrower than the page, the icons
   stay centered instead of bunching against the left edge. */
.platform-marquee .marquee-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  margin: 0 auto;
  padding-right: 72px;
  animation: marquee-glide 30s linear infinite;
  will-change: transform;
}

.platform-marquee i {
  font-size: 2rem;
  color: var(--text-muted-2);
  opacity: 0.85;
}

/* scroll progress hairline (element injected by MotionLayer) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 4000;
  pointer-events: none;
  background: var(--accent-grad);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  box-shadow: 0 0 12px rgba(76, 178, 240, 0.55);
}

/* gentle parallax: home hero cards ride the scroll slightly slower */
html[data-motion="on"] .floating-cards {
  transform: translateY(calc(var(--sy, 0) * -0.07px));
}

/* --------------------------------------------------------------------------
   13b. Generated atmosphere imagery (public/generated), site-wide.
        Layered as pseudo-elements so no markup changes; slow ambient drift
        keeps the pages feeling alive, disabled under reduced motion.
   -------------------------------------------------------------------------- */
.hero,
.hero-section,
.portfolio-hero,
.tpage-hero,
.cs-hero {
  position: relative;
}

/* Heroes ride the page-wide fixed soundfield (body::before); the canvas
   waveform and spotlight supply the hero-level life. A soft glow anchors
   the headline area. */
.hero::before,
.hero-section::before,
.portfolio-hero::before,
.tpage-hero::before,
.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(52rem 30rem at 50% 18%, rgba(76, 178, 240, 0.11), transparent 65%);
}

/* subtle mesh wash behind alternating content sections */
.usp::before,
.case-showcase::before,
.solution-section::before,
.proof-results-section::before,
.pricing-section::before,
.steps-section::before,
.results-section::before,
.t-features::before,
.cs-section--alt::before,
.pt-vtest-section::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
  background: url("/generated/section-mesh.webp") center / cover no-repeat;
  background-image: image-set(
    url("/generated/section-mesh.avif") type("image/avif"),
    url("/generated/section-mesh.webp") type("image/webp")
  );
  opacity: 0.35;
}

/* one elegant light ribbon across the CTA bands */
.footer-cta::before,
.footer-cta-section::before,
.final-cta-section::before,
.mid-cta::before,
.t-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
  background: url("/generated/ribbon-accent.webp") center / cover no-repeat;
  background-image: image-set(
    url("/generated/ribbon-accent.avif") type("image/avif"),
    url("/generated/ribbon-accent.webp") type("image/webp")
  );
  opacity: 0.4;
  will-change: transform;
}

.usp, .case-showcase, .solution-section, .proof-results-section,
.pricing-section, .steps-section, .results-section, .t-features,
.cs-section--alt, .pt-vtest-section,
.footer-cta, .footer-cta-section, .final-cta-section, .mid-cta, .t-cta {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ribbon-drift {
    0% { transform: translate3d(-4%, 0, 0) scale(1.1); }
    100% { transform: translate3d(4%, 0, 0) scale(1.1); }
  }

  .footer-cta::before,
  .footer-cta-section::before,
  .final-cta-section::before,
  .mid-cta::before,
  .t-cta::before {
    animation: ribbon-drift 18s ease-in-out infinite alternate;
    will-change: transform;
  }

  @keyframes mesh-drift {
    0% { transform: translate3d(-2%, 0, 0) scale(1.08); }
    100% { transform: translate3d(2%, 1.2%, 0) scale(1.08); }
  }

  .usp::before,
  .case-showcase::before,
  .solution-section::before,
  .proof-results-section::before,
  .pricing-section::before,
  .steps-section::before,
  .results-section::before,
  .t-features::before,
  .cs-section--alt::before,
  .pt-vtest-section::before {
    animation: mesh-drift 28s ease-in-out infinite alternate;
    will-change: transform;
  }

  @keyframes hero-glow-breathe {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
  }

  .hero::before,
  .hero-section::before,
  .portfolio-hero::before,
  .tpage-hero::before,
  .cs-hero::before {
    animation: hero-glow-breathe 8s ease-in-out infinite;
    will-change: opacity;
  }
}

/* --------------------------------------------------------------------------
   14. Hero atmosphere: canvas waveform + pointer spotlight
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-atmosphere canvas {
  position: absolute;
  inset: 0;
  display: block;
}

.hero-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 178, 240, 0.07) 0%, transparent 62%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  will-change: transform;
}

.hero .container {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   14b. Home hero floating cards: generated podcast artwork, caption on a
        bottom scrim
   -------------------------------------------------------------------------- */
.floating-cards .card {
  background: var(--bg-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}

.floating-cards .card-content {
  padding: 0;
}

.floating-cards .mockup-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
}

.card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.floating-cards .mockup-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 7, 9, 0.88) 100%);
  pointer-events: none;
}

.floating-cards .mockup-title {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  z-index: 1;
  color: var(--text-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   14c. Price anchor reveal (/podcast-toolkits): the $500 takes the strike,
        then the $100 lands. Only runs when motion is on.
   -------------------------------------------------------------------------- */
.pt-old-price,
.pt-price-old {
  position: relative;
}

.pt-old-price::after,
.pt-price-old::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 52%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left center;
  border-radius: 2px;
}

html[data-motion="on"] .price-anchor-wait .pt-old-price::after,
html[data-motion="on"] .price-anchor-wait .pt-price-old::after {
  transform: scaleX(0);
}

html[data-motion="on"] .price-anchor-go .pt-old-price::after,
html[data-motion="on"] .price-anchor-go .pt-price-old::after {
  transform: scaleX(1);
  transition: transform 0.55s var(--ease-out) 0.25s;
}

html[data-motion="on"] .price-anchor-wait .pt-new-price,
html[data-motion="on"] .price-anchor-wait .pt-price-now {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
}

html[data-motion="on"] .price-anchor-go .pt-new-price,
html[data-motion="on"] .price-anchor-go .pt-price-now {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease-out) 0.7s, transform 0.6s var(--ease-spring) 0.7s;
}

/* --------------------------------------------------------------------------
   15. Legal and long-form reading comfort
   -------------------------------------------------------------------------- */
.privacy-content {
  max-width: 720px;
  margin: 0 auto;
}

.privacy-content h1 {
  font-size: clamp(2.1rem, 4vw, 3rem);
}

.privacy-content h2 {
  font-size: 1.35rem;
  margin-top: 40px;
}

.privacy-content p,
.privacy-content li {
  line-height: 1.75;
  color: var(--text-secondary);
}

.policy-section {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 28px;
  margin-bottom: 28px;
}

/* 404 keeps its original gradient numerals, Inter weight */
.error-code {
  font-weight: 800;
}

/* ---------------------------------------------------------------
   PRICING
   Base pricing layout lives only in podcast-multiplier-styles.css,
   which the (main) group does not load. The home page pricing
   section would otherwise render as an unstyled stack, so the
   layout is ported here (this file loads in both route groups).
   Values mirror podcast-multiplier-styles.css so that
   /podcast-multiplier renders exactly as it did before, which matters
   because this file loads AFTER that stylesheet: at equal specificity
   anything declared here wins. Card background, radius and the
   .featured accent glow stay with the shared card rules above. These
   are layout and typography only.
   --------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto 60px;
  padding-bottom: 20px;
}

.pricing-tier {
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* The card lift lived only in the multiplier sheet, so the home card
   would have sat dead on hover. Shadow and border are deliberately NOT
   set here: .pricing-tier.featured above carries the accent glow at the
   same specificity (0,2,0), and this rule is later in the file, so
   declaring them would silently overwrite that glow on hover. */
.pricing-tier:hover {
  transform: translateY(-5px);
}

.pricing-tier:not(.featured):hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-color: rgba(76, 178, 240, 0.3);
}

/* .featured is a 2px accent border on the multiplier. Without this the
   home card falls back to the 1px generic card border. No-op on the
   multiplier, which already resolves to 2px. */
.pricing-tier.featured {
  border-width: 2px;
}

.pricing-tier.compact {
  padding: 18px;
  max-width: 720px;
  margin: 0 auto;
}

.pricing-header {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 20px;
}

.pricing-tier.compact .pricing-header {
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.pricing-header h3 {
  color: var(--text-primary);
  font-size: 1.3rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.pricing-tier.compact .pricing-header h3 {
  font-size: 1.2rem;
}

.pricing-price {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 5px;
}

.pricing-tier.compact .pricing-price {
  font-size: 2rem;
}

/* --text-secondary, not --text-muted-2: the multiplier sets
   var(--text-color-muted), which :root remaps to --text-secondary */
.pricing-period {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.pricing-content {
  flex-grow: 1;
  text-align: left;
}

.pricing-tier.compact .pricing-content {
  padding: 0 6px;
}

.pricing-content ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.pricing-tier.compact .pricing-content ul {
  margin-bottom: 12px;
}

.pricing-content li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  color: var(--text-secondary);
}

.pricing-tier.compact .pricing-content li {
  margin-bottom: 8px;
  font-size: 0.95rem;
  padding-left: 20px;
  line-height: 1.4;
}

.pricing-content li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.pricing-footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pricing-footer .btn-primary {
  width: 100%;
  padding: 12px;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-tier.compact .pricing-footer .btn-primary {
  width: 70%;
  max-width: 320px;
  padding: 10px 16px;
  font-size: 0.95rem;
}

/* cost anchor: the price never stands alone, it is read against
   what an in-house hire would cost */
.pricing-cost-anchor {
  margin: 14px auto 0;
  max-width: 56ch;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.pricing-cost-anchor strong {
  color: var(--text-primary);
  font-weight: 640;
}

.pricing-cost-anchor-figure {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* outcome line: ties the spend to what actually ships */
.pricing-outcome {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.pricing-outcome strong {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

/* The compact card keeps its 18px padding and its 70%/320px CTA at every
   width (top-level .pricing-tier.compact is (0,2,0) and beats the (0,1,0)
   .pricing-tier rule below, since a media query adds no specificity), so
   nothing here overrides it. Only the two new sub-components tighten up. */
@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pricing-tier {
    padding: 20px;
  }

  .pricing-cost-anchor {
    padding: 11px 12px;
    font-size: 0.86rem;
  }

  .pricing-outcome {
    font-size: 0.9rem;
  }
}

/* --------------------------------------------------------------------------
   VERTICAL (9:16) TESTIMONIAL VIDEOS
   --------------------------------------------------------------------------
   The legacy aspect-ratio scale in styles.css stops at 16:9 (.ar-169), 4:5
   (.ar-45) and 1:1 (.ar-11). Preston Hurd's testimonial is a vertical 9:16
   reel, so it needs its own rung. The !important matches its .ar-* siblings
   and beats the .client-video base rule, which hard-codes aspect-ratio:16/9
   at the same specificity.
   -------------------------------------------------------------------------- */
.ar-916 {
  aspect-ratio: 9 / 16 !important;
}

/* 320px is the width the feature grid already falls back to below 880px;
   300px matches the 9:16 cards in .social-proof and .cs-showcase. */
.t-feature-media.ar-916 {
  max-width: 320px;
}

.client-video.ar-916 {
  max-width: 300px;
  margin: 0 auto;
  width: 100%;
}

/* The home "See What Our Clients Say" row was a hard-coded 4-column grid built
   for exactly four videos. Preston makes five, and five is prime: every column
   count below five strands an orphan, which grid parks against the left edge.
   Flex wraps instead and centres whatever lands on the last row, so the row
   stays balanced from 1440px down to the 768px breakpoint where the legacy
   single-column rule takes over. The row tops out at roughly 1103px of inner
   width, so 190px keeps five cards plus four 30px gaps (1070px) comfortably
   inside it rather than tipping a card onto a second row; narrower viewports
   wrap to a centred 4+1 or 3+2. */
.video-testimonials .client-videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.video-testimonials .client-video {
  flex: 0 1 190px;
}

/* grid-template-columns:1fr stops applying once the row is flex, so the legacy
   single-column mobile layout has to be restated here. */
@media (max-width: 768px) {
  .video-testimonials .client-video {
    flex-basis: 100%;
  }
}

/* --------------------------------------------------------------------------
   Known bug, deliberately scoped: .t-feature on /testimonials never collapses
   to one column on phones. styles.css stacks it under max-width:880px, but a
   later unscoped .t-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
   overrides that at equal specificity (a media query adds none), so every
   block renders as two ~139px columns at 390px wide.

   The six original blocks are left exactly as they are. A 9:16 reel is
   unreadable at 137px, so the vertical block opts into the stack the base CSS
   already intended, via a class rather than :nth-child so that appending a
   testimonial later cannot move this rule onto the wrong block. Widening the
   fix to every block is a one-line change here: drop .t-feature-vertical.
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .t-feature.t-feature-vertical {
    grid-template-columns: 1fr;
  }
}