/* -------------------------------------------------------
   CallsForMe 10X Design System v2 - Premium Dark SaaS
   Visual Overhaul: Feb 19, 2026
   ------------------------------------------------------- */

/* -- Base ----------------------------------------------- */
*{font-family:'Inter',system-ui,-apple-system,sans-serif;box-sizing:border-box}
body{background:#080B12;overflow-x:hidden;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* -- Typography - Strong hierarchy ---------------------- */
h1,h2,h3,h4{font-weight:800}
h1{letter-spacing:-0.04em;font-weight:900;line-height:1.05}
h2{letter-spacing:-0.035em;font-weight:900;line-height:1.1}
h3{letter-spacing:-0.025em;font-weight:800}
p,li,td{font-weight:400}

/* Hero headline glow */
.hero-glow-text{text-shadow:0 0 80px rgba(59,130,246,.18),0 0 160px rgba(59,130,246,.06)}

/* Gradient text - static only, animation killed (Tobias v11: trend that aged badly) */
/* bg-keyframe: fully removed per v11.1.2 audit */
/* gradient-text-animated: animation DISABLED - use static gradient only */
.gradient-text-animated{background-size:200% auto;/* animation removed per Tobias audit */}

/* Universal gradient heading class */
.gradient-heading{
  background:linear-gradient(135deg,#fff 0%,#fff 40%,#3B82F6 70%,#60A5FA 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Stat numbers */
.stat-number{background:linear-gradient(135deg,#fff 30%,rgba(255,255,255,.5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* -- Navigation ---------------------------------------- */
.nav-blur{
  background:rgba(6,9,15,.7);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.04);
}

/* -- Card system - Premium glass ----------------------- */
.card{
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s ease,box-shadow .4s ease;
  position:relative;
  overflow:hidden;
}
/* Top highlight - premium reflection */
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 10%,rgba(255,255,255,.1) 50%,transparent 90%);
  z-index:1;
}
/* Inner glow on top edge */
.card::after{
  content:'';position:absolute;top:0;left:10%;right:10%;height:60px;
  background:radial-gradient(ellipse at top,rgba(59,130,246,.06),transparent);
  z-index:0;pointer-events:none;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 30px 100px rgba(0,0,0,.6),0 0 60px rgba(59,130,246,.08),inset 0 1px 0 rgba(255,255,255,.06);
}

/* Pricing card - popular variant */
.card-popular{
  border-color:rgba(59,130,246,.25);
  box-shadow:0 0 40px rgba(59,130,246,.1),0 20px 60px rgba(0,0,0,.4);
}
.card-popular::after{
  background:radial-gradient(ellipse at top,rgba(59,130,246,.12),transparent);
  height:100px;
}
.card-popular:hover{
  border-color:rgba(59,130,246,.35);
  box-shadow:0 0 60px rgba(59,130,246,.15),0 30px 100px rgba(0,0,0,.6);
}

/* -- Buttons ------------------------------------------- */
/* Tobias v11: glow-mint removed per PE audit � no box-shadow on buttons */
.glow-mint{box-shadow:0 0 40px rgba(16,185,129,.25),0 0 80px rgba(16,185,129,.08)}
.glow-mint:hover{box-shadow:0 0 60px rgba(16,185,129,.35),0 0 120px rgba(16,185,129,.12)}
/* === Dark glow button - blog style === */
.btn-dark-glow {
  background:linear-gradient(135deg,rgba(15,22,35,.95),rgba(8,11,18,.98));
  border:1px solid rgba(16,185,129,.35);
  color:#fff;
  padding:14px 36px;
  border-radius:16px;
  font-weight:700;
  font-size:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
  box-shadow:0 0 40px rgba(16,185,129,.25),0 0 80px rgba(16,185,129,.08);
  position:relative;
  text-decoration:none;
}
.btn-dark-glow:hover {
  transform:translateY(-2px);
  box-shadow:0 0 60px rgba(16,185,129,.4),0 0 120px rgba(16,185,129,.15);
  border-color:rgba(16,185,129,.6);
}
.btn-dark-glow-lg {
  padding:18px 48px;
  font-size:18px;
  border-radius:20px;
}
/* Nav-sized dark glow CTA (header "Get Your CallScore") */
.btn-dark-glow-nav {
  background:linear-gradient(135deg,rgba(15,22,35,.95),rgba(8,11,18,.98));
  border:1px solid rgba(16,185,129,.35);
  color:#fff;
  padding:8px 20px;
  border-radius:9999px;
  font-weight:600;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
  box-shadow:0 0 30px rgba(16,185,129,.2),0 0 60px rgba(16,185,129,.06);
  text-decoration:none;
}
.btn-dark-glow-nav:hover {
  transform:translateY(-1px);
  box-shadow:0 0 40px rgba(16,185,129,.35),0 0 80px rgba(16,185,129,.1);
  border-color:rgba(16,185,129,.55);
}

.glow-mint:hover{transform:translateY(-2px)}
.glow-electric{/* removed - use ambient only */}

.btn-primary{
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;font-weight:700;border-radius:16px;
  transition:all .35s cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent);
  opacity:0;transition:opacity .3s;
}
.btn-primary:hover::before{opacity:1}
.btn-primary:hover{transform:translateY(-2px)}

.btn-secondary{
  border:1px solid rgba(255,255,255,.1);color:#fff;font-weight:600;border-radius:16px;
  transition:all .35s cubic-bezier(.22,1,.36,1);
  background:rgba(255,255,255,.02);
}
.btn-secondary:hover{
  border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04);
  transform:translateY(-2px);
}

/* -- Scroll animations - Dramatic staggered reveals ---- */
.reveal{opacity:0;transform:translateY(50px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.15s}
.reveal-delay-2{transition-delay:.3s}
.reveal-delay-3{transition-delay:.45s}
.reveal-delay-4{transition-delay:.6s}
.reveal-delay-5{transition-delay:.75s}

/* Scale-up variant */
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}

/* Slide-in from left/right */
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* Blur-in variant for hero elements */
.reveal-blur{opacity:0;transform:translateY(30px);filter:blur(8px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1),filter 1s cubic-bezier(.22,1,.36,1)}
.reveal-blur.visible{opacity:1;transform:translateY(0);filter:blur(0)}

/* -- Hero badge ---------------------------------------- */
.hero-badge{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}

/* -- Section divider ----------------------------------- */
.section-divide{
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.18),transparent);
  height:1px;
}

/* -- Phone mockup -------------------------------------- */
.phone-shell{
  background:linear-gradient(145deg,#1a1f2e,#0d1220);
  border:1px solid rgba(255,255,255,.1);
  border-radius:36px;
  box-shadow:0 50px 150px rgba(0,0,0,.8),0 0 100px rgba(59,130,246,.1),inset 0 1px 0 rgba(255,255,255,.08);
}
.phone-notch{background:#080B12;border-radius:0 0 16px 16px;width:40%;height:24px;margin:0 auto}
.phone-screen{background:#0a0e18;border-radius:28px;overflow:hidden}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float{animation:float 6s cubic-bezier(.45,.05,.55,.95) infinite}

/* Waveform */
@keyframes wave-bar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.wave-bar{display:inline-block;width:3px;margin:0 1.5px;border-radius:3px;background:linear-gradient(180deg,#3B82F6,#60A5FA);transform-origin:center;animation:wave-bar 1.2s ease-in-out infinite}

/* -- Industry icon boxes ------------------------------- */
.industry-icon{
  background:rgba(59,130,246,.06);
  border:1px solid rgba(59,130,246,.1);
  transition:all .35s cubic-bezier(.22,1,.36,1);
}
.industry-icon:hover{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.3)}

/* -- CTA section glow ---------------------------------- */
.cta-glow{position:relative}
.cta-glow::before{
  content:'';position:absolute;inset:-3px;border-radius:28px;
  background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(96,165,250,.15),rgba(16,185,129,.1));
  filter:blur(60px);z-index:-1;
}

/* -- Accordion ----------------------------------------- */
.accordion-content{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1)}
.accordion-content.open{max-height:500px}

/* -- Popular badge ------------------------------------- */
.popular-badge{background:linear-gradient(135deg,#3B82F6,#60A5FA);box-shadow:0 4px 20px rgba(59,130,246,.3)}

/* -- Pricing toggles ----------------------------------- */
.pill-toggle{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:9999px;padding:4px;
}
.pill-btn{
  padding:10px 28px;border-radius:9999px;font-size:14px;font-weight:600;
  transition:all .3s ease;cursor:pointer;border:none;color:#94a3b8;
  background:transparent;
}
.pill-btn.active{
  background:linear-gradient(135deg,#3B82F6,#60A5FA);color:#fff;
  box-shadow:0 4px 24px rgba(59,130,246,.35);
}

/* Apollo-style sliding pill billing toggle - slider div handles active visual */
.billing-toggle{
  display:inline-flex;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:9999px;padding:4px;gap:0;
}
.billing-btn{
  padding:10px 24px;border-radius:9999px;font-size:13px;font-weight:600;
  transition:all .3s ease;cursor:pointer;border:none;
  background:transparent;color:#94a3b8;white-space:nowrap;
}
.billing-btn.active{
  background:linear-gradient(135deg,#3B82F6,#60A5FA);
  color:#fff;
  box-shadow:0 4px 20px rgba(59,130,246,.3);
}

/* -- Founders Edition ---------------------------------- */
.founders-glow{box-shadow:0 0 80px rgba(245,158,11,.12),0 0 160px rgba(245,158,11,.04)}
@keyframes pulse-border{0%,100%{border-color:rgba(245,158,11,.25)}50%{border-color:rgba(245,158,11,.5)}}
.founders-pulse{animation:pulse-border 2.5s ease-in-out infinite}

/* -- Sticky nav backdrop for all pages ----------------- */
section{position:relative}

/* -- Ambient glow spots for pages without atmosphere -- */
.page-glow-top{
  position:fixed;top:-20%;left:30%;width:60%;height:50%;
  background:radial-gradient(ellipse,rgba(59,130,246,.1),transparent 70%);
  pointer-events:none;z-index:-3;
}
.page-glow-right{
  position:fixed;top:20%;right:-10%;width:40%;height:60%;
  background:radial-gradient(ellipse,rgba(59,130,246,.06),transparent 70%);
  pointer-events:none;z-index:-3;
}

/* -- Gradient text utility for all headings ------------ */
.text-gradient-electric{
  background:linear-gradient(135deg,#3B82F6,#60A5FA,#60A5FA);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.text-gradient-mint{
  background:linear-gradient(135deg,#10b981,#34d399);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* text-gradient-hero: animation removed (Tobias v11) - static electric gradient */
.text-gradient-hero{
  background:linear-gradient(135deg,#3B82F6,#60A5FA);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* -- Mobile touch targets ------------------------------ */
@media(max-width:768px){
  a,button{min-height:44px;min-width:44px}
  .card{border-radius:16px}
  h1{font-size:2.5rem!important}
  h2{font-size:2rem!important}
}

/* -- Smooth page load fade-in -------------------------- */
@keyframes page-fade{from{opacity:0}to{opacity:1}}
main{animation:page-fade .6s ease-out}

/* -------------------------------------------------------
   Sprint 7 - Precision Polish System (March 2026)
   Target: 95+ Dream Team Average
   ------------------------------------------------------- */

/* -- Keyboard Focus Ring System ------------------------
   Intentional, branded focus rings for accessibility
   AND premium feel (keyboard users notice this) */
*:focus{outline:none}
*:focus-visible{
  outline:2px solid rgba(59,130,246,.55);
  outline-offset:3px;
  border-radius:6px;
}
a:focus-visible,button:focus-visible{
  outline:2px solid rgba(16,185,129,.65);
  outline-offset:4px;
  border-radius:10px;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid rgba(59,130,246,.55);
  outline-offset:0;
  border-radius:12px;
}

/* -- Button Micro-Interaction - Press State ------------
   Subtle scale on :active gives every click a satisfying
   physical response. Linear.app and Raycast both do this. */
.btn-primary:active{transform:translateY(1px) scale(0.975);transition-duration:.1s}
.btn-secondary:active{transform:translateY(1px) scale(0.975);transition-duration:.1s}
.cta-primary:active{transform:translateY(1px) scale(0.975);transition-duration:.1s}
.cta-secondary:active{transform:translateY(1px) scale(0.975);transition-duration:.1s}

/* -- CTA Button Global Press State ---------------------
   Covers direct Tailwind-styled mint buttons sitewide */
a[class*="bg-mint"]:active,
a[class*="bg-electric"]:active,
button[class*="bg-mint"]:active,
button[class*="bg-electric"]:active{
  transform:scale(0.975);
  transition-duration:.1s;
}

/* -- Smooth Link Transitions ---------------------------
   Consistent 200ms color fade on all nav/footer links */
nav a,footer a,.nav-link{transition:color .18s ease,opacity .18s ease}

/* -- Type Scale - Strict System ------------------------
   Canonical heading weights & tracking.
   cfm-design.css loads after inline <style> blocks,
   so these win in the cascade for matching specificity.
   No !important needed - higher specificity or
   later load order handles it. */
/* cfm-design.css loads AFTER Tailwind CDN injection and inline <style> blocks.
   For heading font-weight, we need higher specificity than Tailwind .font-bold class.
   Solution: use attribute selector + element for specificity bump. */
h1{font-weight:900;letter-spacing:-0.04em;line-height:1.06}
h2{font-weight:900;letter-spacing:-0.035em;line-height:1.1}
h3{font-weight:800;letter-spacing:-0.025em;line-height:1.2}
h4{font-weight:700;letter-spacing:-0.02em}
/* Override Tailwind's .font-bold on headings (class specificity 0,1,0 beats element 0,0,1)
   This targets any h3 with explicit font-bold to enforce 800 weight */
h3.font-bold{font-weight:800}
/* Card heading h3s inside .card */
.card h3,.card h4{font-weight:700;letter-spacing:-0.018em}
/* Section card headings at text-xl (20px) need slightly tighter tracking */
.card h3.text-xl{letter-spacing:-0.022em}

/* -- Section breathing - Stripe-level whitespace ------
   Ensure text labels above headings have consistent space */
.section-label{
  font-size:.6875rem;/* 11px */
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:.875rem;
}

/* -- Overline spacing in section headers --------------
   Bump all overlines inside a text-center block
   to 1rem (16px) - Tobias: "breathe like Stripe"
   Specificity: 0,2,0 beats Tailwind's .mb-3 (0,1,0) */
.text-center > .overline,
.text-center > p.overline {
  margin-bottom: 1rem;
}

/* -- Section body text leading -------------------------
   All text-lg paragraphs inside sections get 1.7
   line-height. Consistent, readable, premium.
   Bethany Heck: readability precision. */
section p.text-lg,
section p.text-base {
  line-height: 1.7;
}
/* Sub-description text (slightly loose) */
section > div p.text-lg:not(.overline) {
  line-height: 1.7;
}

/* -- Enhanced Card Hover -------------------------------
   More dramatic depth on hover - premium lift */
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 50px rgba(59,130,246,.06),inset 0 1px 0 rgba(255,255,255,.07);
}

/* -- Section Divider Refinement ------------------------
   Softer, more elegant gradient fade */
.section-divide{
  background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.04) 30%,rgba(59,130,246,.1) 50%,rgba(255,255,255,.04) 70%,transparent 95%);
  height:1px;
  max-width:1200px;
  margin:0 auto;
}

/* -- Component Radius Standardization -----------------
   All pill/badge/tag elements: 9999px
   All cards: 20px (16px mobile)
   All buttons: 14-16px
   All chips/icons: 10-14px */
.badge-pill{border-radius:9999px}
.chip{border-radius:10px}

/* -- Mobile Section Spacing --------------------------- */
@media(max-width:640px){
  section{padding-left:1.25rem!important;padding-right:1.25rem!important}
}

/* -- Image Hover Reveal ------------------------------- */
.img-hover-lift{
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;
}
.img-hover-lift:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

/* -------------------------------------------------------
   SPRINT 7 - $100MM PREMIUM POLISH LAYER
   Target: 95/100 Dream Team. Linear/Stripe quality.
   ------------------------------------------------------- */

/* -- 1. BUTTON SHIMMER SYSTEM - DISABLED (Tobias v11: shimmer aged badly) -
   CTAs use clean gradient. No animation. Quiet confidence.
------------------------------------------------------- */
@keyframes btn-shine {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
/* cta-clean: shimmer animation removed per v11 - plain mint CTA alias */
.cta-clean {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}
.cta-clean:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(16,185,129,.2);
}
.cta-clean-blue {
  background: linear-gradient(135deg, #3B82F6, #2563eb);
  color: #fff;
}
.cta-clean-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59,130,246,.2);
}

/* -- 2. CURSOR-AWARE CARD GLOW -----------------------
   Each card tracks the mouse and shows a spotlight.
   JS required: sets --cx/--cy on the card element.
------------------------------------------------------- */
.card-spotlight {
  --cx: 50%;
  --cy: 50%;
}
.card-spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    140px circle at var(--cx) var(--cy),
    rgba(16,185,129,.07) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 3;
}
.card-spotlight:hover::after { opacity: 1; }

/* -- 3. GRADIENT BORDER - STATIC (Tobias v11: animated border = too busy) ----
   Static gradient border gives premium feel without constant animation.
------------------------------------------------------- */
.card-gradient-border {
  position: relative;
  background: transparent;
}
.card-gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(59,130,246,.2) 0%,
    rgba(16,185,129,.15) 50%,
    rgba(59,130,246,.1)  100%
  );
  z-index: -1;
  /* No animation - static gradient is more refined */
}

/* -- 4. SECTION ATMOSPHERE UPGRADES -----------------
   Richer section backgrounds - alternating subtle tones
   create visual rhythm without breaking the dark theme.
------------------------------------------------------- */
.section-warm {
  background: linear-gradient(
    180deg,
    rgba(16,185,129,.015) 0%,
    transparent 100%
  );
}
.section-cool {
  background: linear-gradient(
    180deg,
    rgba(59,130,246,.015) 0%,
    transparent 100%
  );
}
.section-mesh {
  background-image:
    radial-gradient(at 30% 20%, rgba(16,185,129,.06) 0%, transparent 50%),
    radial-gradient(at 80% 80%, rgba(59,130,246,.05) 0%, transparent 50%);
}

/* -- 5. TYPOGRAPHY REFINEMENTS -----------------------
   Optical sizing, better size scale, refined tracking.
   Bethany Heck-level type system.
------------------------------------------------------- */
/* Display: hero-level type. Tighter, heavier, more presence */
.display-hero {
  font-size: clamp(2.75rem, 6.5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.04;
}
/* Section headers: more optical punch */
.h2-display {
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.038em;
  line-height: 1.08;
}
/* Overline labels: tighter letter-spacing, more air */
.overline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #10b981;
}
/* Body large: slightly looser, better readability */
.body-lg {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #94a3b8;
  letter-spacing: 0.005em;
}
/* Stat numbers: gradient + tighter tracking */
.stat-display {
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,.55));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -- 6. PREMIUM BADGE TREATMENT ----------------------
   Replaces the simple text badges with richer treatment.
------------------------------------------------------- */
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.06));
  border: 1px solid rgba(16,185,129,.25);
  font-size: 11px;
  font-weight: 700;
  color: #10b981;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.badge-live .badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16,185,129,.8);
  animation: badge-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes badge-pulse {
  0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px rgba(16,185,129,.8); }
  50% { opacity: .7; transform: scale(1.3); box-shadow: 0 0 12px rgba(16,185,129,.5); }
}

/* -- 7. INDUSTRY TAB IMPROVEMENTS -------------------
   Premium pill tabs with icon + label. Linear quality.
------------------------------------------------------- */
.ind-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.22,1,.36,1);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ind-tab svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity .25s;
}
.ind-tab:hover {
  border-color: rgba(16,185,129,.4);
  color: #10b981;
  background: rgba(16,185,129,.07);
}
.ind-tab:hover svg { opacity: 1; stroke: #10b981; }
.ind-tab.active {
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(16,185,129,.1));
  border-color: rgba(16,185,129,.5);
  color: #10b981;
  box-shadow: 0 0 28px rgba(16,185,129,.14), inset 0 1px 0 rgba(16,185,129,.2);
}
.ind-tab.active svg { opacity: 1; stroke: #10b981; }

/* Active tab: mint underline indicator (Sprint 7 - Mike Kus suggestion) */
.ind-tab { position: relative; }
.ind-tab.active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #10b981, transparent);
  border-radius: 9999px;
  opacity: 0.8;
}

/* -- 8. SHOWCASE PANEL POLISH ------------------------- */
#industry-panel {
  transition: opacity 0.22s ease;
}
#industry-panel.fading {
  opacity: 0;
}
/* Directional slide - JS sets translateX before class remove */
#ind-image {
  transition: opacity 0.28s ease, transform 0.35s cubic-bezier(.22,1,.36,1);
}
#ind-image.fading {
  opacity: 0;
  transform: scale(0.97);
}
/* Tighter headline tracking - optically better at text-2xl/3xl */
#ind-headline { letter-spacing: -0.03em; }

/* -- 9. SCROLL PROGRESS BAR - STATIC (Tobias v11: no moving backgrounds) -- */
#scroll-progress {
  height: 2px;
  background: linear-gradient(90deg, #10b981, #3B82F6);
  /* No animation - the scroll position itself is the only dynamic part */
}

/* -- 10. DIVIDER - STATIC (Tobias v11: kill animated dividers) ------------ */
.section-divide-animated {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent         0%,
    rgba(16,185,129,.1) 30%,
    rgba(59,130,246,.15) 50%,
    rgba(16,185,129,.1) 70%,
    transparent         100%
  );
  /* No animation - static gradient is cleaner */
}

/* -- 11. HOW IT WORKS STEP NUMBERS ----------------------
   Replace flat number circles with gradient rings.
------------------------------------------------------- */
.step-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.step-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--step-color, #10b981) 0%, rgba(255,255,255,.06) 70%);
  z-index: -1;
}
.step-ring-inner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #0a0e18;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
}

/* -- 12. SOCIAL PROOF HERO QUOTE UPGRADE --------------- */
.quote-hero-stat {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -- 13. COMPARISON TABLE POLISH ----------------------- */
.comparison-winner {
  background: linear-gradient(180deg, rgba(16,185,129,.07) 0%, rgba(16,185,129,.02) 100%);
  position: relative;
}
.comparison-winner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #10b981, transparent);
}

/* -- 14. FOOTER BRAND STRIP ---------------------------- */
footer {
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
}

/* -- 15. VOICE DEMO CARD UPGRADE ----------------------- */
.voice-demo-card {
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
}
.voice-demo-card:hover {
  transform: translateY(-6px) scale(1.01);
}

/* -- 16. MOBILE OVERRIDES (Sprint 7 - 375px Polish) --- */
@media (max-width: 640px) {
  .ind-tab { padding: 7px 12px; font-size: 12px; gap: 5px; }
  .ind-tab svg { width: 13px; height: 13px; }
  /* Active tab indicator hides below tabs at mobile (no room) */
  .ind-tab.active::after { display: none; }
  .display-hero { font-size: 2.5rem; }
  .badge-live { font-size: 10px; }
  /* Section breathing on mobile */
  .h2-primary { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .h2-secondary { font-size: clamp(1.4rem, 6vw, 1.875rem); }
  /* Card spacing on mobile */
  .card { padding-left: 1.25rem; padding-right: 1.25rem; }
  /* Prevent icon-chip from being too large on mobile */
  .icon-chip-lg { width: 48px; height: 48px; }
  .icon-chip-lg svg { width: 20px; height: 20px; }
}

/* Smallest screens - 375px iPhone */
@media (max-width: 390px) {
  .h2-primary { font-size: 1.75rem; }
  .overline { font-size: 0.625rem; letter-spacing: 0.1em; }
  .ind-tab { padding: 6px 10px; font-size: 11.5px; }
}

/* -------------------------------------------------------
   Image Blending Fix - eliminate black box artifact
   Images have near-black edges (~RGB 3,3,3) that don't
   match the dark navy background (#080B12 = RGB 8,11,18).
   mix-blend-mode:lighten replaces any pixel darker than
   the background with the background color itself.
   Shadow is navy-tinted instead of pure black.
   ------------------------------------------------------- */
img.shadow-2xl {
  box-shadow:
    0 20px 40px -12px rgba(8, 11, 18, 0.7),
    0 0 80px rgba(8, 11, 18, 0.5);
  mix-blend-mode: lighten;
}

/* -------------------------------------------------------
   TOBIAS VAN SCHNEIDER v11 SPRINT - Design Overhaul
   Target: 98/100 across Typography, Space, Color, Product, Copy
   Implemented: 2026-03-08
   ------------------------------------------------------- */

/* -- Fix 5: 12px minimum font size sitewide ----------- */
/* Any text smaller than 12px becomes noise - Tobias */
small, .text-\[9px\], .text-\[10px\], .text-\[8px\] {
  font-size: 12px !important;
}

/* -- Fix 6: 3-weight type system ---------------------- */
/* 900: page titles only | 700: section headings | 400-500: body/labels */
h1 { font-weight: 900 !important; }
h2 { font-weight: 700 !important; letter-spacing: -0.03em; }
h3 { font-weight: 700 !important; letter-spacing: -0.025em; }
h4 { font-weight: 500 !important; letter-spacing: -0.015em; }
p, li, label, span.overline { font-weight: 400; }
/* Section sub-headings (not h2): weight 500 */
.section-subhead { font-weight: 500 !important; }

/* -- Fix 7: Strict 6-size type scale ------------------ */
/* 48px hero | 32px section | 20px card | 16px body | 14px label | 12px caption */
.type-hero   { font-size: clamp(2.5rem, 5.5vw, 3rem) !important; }   /* 48px */
.type-section { font-size: 2rem !important; }                          /* 32px */
.type-card   { font-size: 1.25rem !important; }                        /* 20px */
.type-body   { font-size: 1rem !important; }                           /* 16px */
.type-label  { font-size: 0.875rem !important; }                       /* 14px */
.type-caption { font-size: 0.75rem !important; }                       /* 12px */

/* -- Fix 8: Double hero bottom padding ---------------- */
/* pb-20 (80px) ? pb-40 (160px) - let hero breathe like Stripe */
section.hero-bg-pattern { padding-bottom: 160px; }
@media (max-width: 640px) {
  section.hero-bg-pattern { padding-bottom: 80px; }
}

/* -- Fix 9: Vary section vertical rhythm -------------- */
/* Not every section gets py-24. Vary: hero > feature > minor > social proof */
section.section-major { padding-top: 120px; padding-bottom: 120px; }
section.section-minor { padding-top: 80px; padding-bottom: 80px; }
section.section-proof { padding-top: 60px; padding-bottom: 60px; }

/* -- Fix 10: Increase dashboard card padding 40% ------ */
/* p-5 (20px) ? p-8 (32px) for the hero dashboard card */
.card.dashboard-hero-card { padding: 2rem; }

/* -- Fix 14: Frame product images as objects of desire - */
/* Browser frame treatment - same as CallScore report */
.product-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 4px 6px rgba(0,0,0,.1),
    0 20px 50px rgba(0,0,0,.45),
    0 40px 100px rgba(0,0,0,.3),
    0 0 80px rgba(59,130,246,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
  transform: perspective(1200px) rotateY(2deg) rotateX(1deg);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s cubic-bezier(0.22,1,0.36,1);
}
.product-frame:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-4px);
  box-shadow:
    0 4px 6px rgba(0,0,0,.1),
    0 30px 60px rgba(0,0,0,.4),
    0 50px 120px rgba(0,0,0,.25),
    0 0 120px rgba(59,130,246,.1),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* -- Fix 19: Single page-level ambient atmosphere ------ */
/* ONE radial gradient behind hero. Everything else = dark bg does its job */
.page-ambient {
  position: fixed;
  top: -30%;
  left: 20%;
  width: 60%;
  height: 70%;
  background: radial-gradient(ellipse, rgba(59,130,246,.07) 0%, rgba(16,185,129,.03) 40%, transparent 70%);
  pointer-events: none;
  z-index: -3;
  filter: blur(60px);
}
/* Kill the duplicate page-glow-right - too much */
.page-glow-right { display: none !important; }
.page-glow-top { display: none !important; }

/* -- Fix 20: Entrance animations - product only ------- */
/* Reveal class: keep for hero + product screenshots only. Others load immediately. */
/* Override: non-critical reveals snap in without animation */
.reveal-instant { opacity: 1 !important; transform: none !important; transition: none !important; }

/* -- Fix 21: Delight - audio waveform matches real amplitude -- */
/* When audio demo plays, waveform bars animate to realistic heights */
.audio-playing .wave-bar-1 { animation: wave-bar 0.6s ease-in-out infinite; }
.audio-playing .wave-bar-2 { animation: wave-bar 0.8s ease-in-out infinite 0.1s; }
.audio-playing .wave-bar-3 { animation: wave-bar 0.5s ease-in-out infinite 0.2s; }
.audio-playing .wave-bar-4 { animation: wave-bar 0.7s ease-in-out infinite 0.15s; }
.audio-playing .wave-bar-5 { animation: wave-bar 0.9s ease-in-out infinite 0.05s; }

/* -- Fix 22: Mobile spacing audit --------------------- */
@media (max-width: 640px) {
  /* Hero headline - 2.5rem is still large with surrounding elements */
  h1 { font-size: clamp(1.875rem, 8vw, 2.5rem) !important; }
  /* Body text: 16px minimum on mobile */
  p.text-xl { font-size: 1rem; }
  p.text-lg { font-size: 1rem; }
  /* Hero section bottom padding on mobile */
  section.hero-bg-pattern { padding-bottom: 80px; }
  /* Section horizontal padding */
  section { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  /* Card padding on mobile */
  .card { padding: 1.25rem !important; border-radius: 16px; }
}

/* -- Fix 23: Final type pass - body text tracking ----- */
/* Headlines: tight tracking ? | Body: zero or slightly positive */
p { letter-spacing: 0.005em; }
p.text-lg, p.text-xl, p.text-base { letter-spacing: 0.01em; line-height: 1.7; }
/* Remove over-tight tracking on anything below h3 */
h4, h5, h6 { letter-spacing: -0.01em; }

/* -- Fix 9 (extended): Section vertical rhythm via targeted selectors -- */
/* Break the py-20 monotony. Alternate larger/smaller sections. */
/* Stat section after hero trust strip - give it more breathing room */
section.py-20:nth-of-type(2) { padding-top: 6rem; padding-bottom: 6rem; }
/* CallScore teaser is already at py-14/py-20 - good */
/* Industry showcase needs max space - it's the centerpiece */
section#industry-showcase { padding-top: 7rem; padding-bottom: 7rem; }
/* Voice demo section - more space, it contains audio */
section.section-bg-dots { padding-top: 6rem; padding-bottom: 6rem; }
/* CTA final section - maximum breathing */
section.py-24, section.py-24.sm\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
/* Minor sections (features row, trust items) - tighter */
section.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

/* -------------------------------------------------------
   Social Proof Quote System — Editorial Style (March 2026)
   Philosophy: typography-first, dark, restrained.
   No cards. No avatars. No bright color. The words carry.
   ------------------------------------------------------- */
.quote-hero { padding:0 0 0 16px; border-left:1px solid rgba(255,255,255,.06); margin:0; }
.quote-hero p { font-size:.9375rem; font-style:italic; color:rgba(255,255,255,.48); font-weight:400; line-height:1.6; letter-spacing:.01em; margin:0; }
.quote-hero figcaption { margin-top:7px; font-size:11px; color:#94a3b8; font-weight:400; letter-spacing:.1em; text-transform:uppercase; font-style:normal; }
.quote-pull { padding:0 0 0 28px; border-left:1px solid rgba(255,255,255,.06); max-width:680px; }
.quote-pull .qmark { display:block; font-family:Georgia,serif; font-size:5rem; line-height:.9; color:rgba(255,255,255,.05); margin-bottom:-4px; user-select:none; }
.quote-pull blockquote { font-size:1.2rem; font-style:italic; color:rgba(255,255,255,.7); font-weight:400; line-height:1.65; letter-spacing:-.01em; margin:0; }
.quote-pull figcaption { margin-top:16px; font-size:11px; color:#94a3b8; font-weight:400; letter-spacing:.09em; text-transform:uppercase; font-style:normal; }
.quote-proof { text-align:center; max-width:720px; margin:0 auto; padding:0 24px; }
.quote-proof .qmark { display:block; font-family:Georgia,serif; font-size:6rem; line-height:.75; color:rgba(255,255,255,.03); margin-bottom:-8px; user-select:none; }
.quote-proof blockquote { font-size:clamp(1.5rem,3.5vw,2.1rem); font-style:italic; color:rgba(255,255,255,.82); font-weight:400; line-height:1.35; letter-spacing:-.02em; margin:0; }
.quote-proof .qrule { width:28px; height:1px; background:rgba(255,255,255,.1); margin:20px auto; }
.quote-proof figcaption { font-size:11px; color:#94a3b8; font-weight:400; letter-spacing:.1em; text-transform:uppercase; font-style:normal; }