/* ================================================================
   WHISP DRIVE — Static CSS export (HubSpot-ready)
   Mirrors the live site exactly. All colors in OKLCH with HEX fallbacks.
   ================================================================ */

:root{
  /* Brand — OKLCH source of truth */
  --brand-yellow:  oklch(0.88 0.18 95);    /* ~#F7CC4A */
  --brand-purple:  oklch(0.62 0.22 295);   /* ~#7C46F0 */
  --brand-purple-2:oklch(0.55 0.24 290);   /* ~#6A2BE6 */
  --brand-green:   oklch(0.78 0.18 165);   /* ~#3FD9B0 */
  --brand-red:     oklch(0.68 0.22 25);    /* ~#F2624A */

  /* Dark surface system */
  --background:    oklch(0.13 0.03 270);   /* ~#0F1020 */
  --foreground:    oklch(0.98 0.005 250);  /* ~#F8F9FB */
  --card:          oklch(0.17 0.035 270);  /* ~#16182C */
  --muted:         oklch(0.22 0.04 270);   /* ~#1F2238 */
  --muted-fg:      oklch(0.72 0.02 260);   /* ~#A6ACBE */
  --accent:        oklch(0.25 0.06 285);   /* ~#262446 */
  --border:        oklch(0.28 0.04 270);   /* ~#2A2D45 */

  --radius: 0.75rem;
  --radius-2xl: 1.25rem;

  /* Shadows / glows */
  --shadow-btn:  0 10px 30px -10px oklch(0.55 0.24 290 / 0.6);
  --shadow-card: 0 1px 0 0 oklch(1 0 0 / 0.02) inset, 0 20px 50px -20px rgba(0,0,0,0.6);

  /* Gradients */
  --gradient-purple-text: linear-gradient(90deg, oklch(0.7 0.22 295), oklch(0.62 0.24 285));
  --gradient-btn:         linear-gradient(135deg, oklch(0.55 0.24 290), oklch(0.62 0.22 295));
  --gradient-card:        linear-gradient(180deg, oklch(0.18 0.035 270), oklch(0.15 0.035 270));
  --gradient-final-cta:   linear-gradient(135deg, oklch(0.22 0.08 285 / 0.6), oklch(0.18 0.04 270 / 0.6));
}

/* Reset & base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-color:var(--border)}
html,body{background:var(--background);color:var(--foreground)}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4{letter-spacing:-0.02em;font-weight:700}

/* Layout */
.container{max-width:80rem;margin:0 auto;padding:0 1.25rem}
.section{padding:5rem 1.25rem}
.maxw-2xl{max-width:42rem}.maxw-xl{max-width:36rem}.maxw-xs{max-width:18rem}
.center{text-align:center}
.mt-lg{margin-top:2rem}.pad-lg{padding:2.5rem}

/* Typography helpers */
.h1{font-size:clamp(2.5rem,4.5vw,3.75rem);line-height:1.05;font-weight:700}
.h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.1;margin-top:.75rem}
.h3{font-size:clamp(1.5rem,2.4vw,1.875rem)}
.lead{margin-top:1.5rem;color:var(--muted-fg);font-size:1.125rem;max-width:36rem}
.muted{color:var(--muted-fg)}.muted-text{color:var(--muted-fg)}
.small{font-size:.875rem}.tiny-label{font-size:.625rem;letter-spacing:.2em;color:var(--muted-fg)}
.text-gradient-purple{background:var(--gradient-purple-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-purple{color:var(--brand-purple)}

/* Eyebrow */
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.25em}
.eyebrow-purple{color:var(--brand-purple)}
.eyebrow-green{color:var(--brand-green)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;padding:.75rem 1.5rem;font-weight:600;transition:filter .15s ease,transform .15s ease;border:1px solid transparent}
.btn-sm{padding:.5rem 1rem;font-size:.875rem}
.btn-primary{background:var(--gradient-btn);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--border);background:oklch(0.17 0.035 270 / 0.6)}
.btn-ghost:hover{background:var(--card)}
.chev{font-size:1rem;line-height:1}

/* Header */
.site-header{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);background:oklch(0.13 0.03 270 / 0.7);border-bottom:1px solid var(--border)}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem}
.logo img{height:70px;width:auto;mix-blend-mode:screen}
.main-nav{display:none;gap:2rem;font-size:.875rem;color:var(--muted-fg)}
.main-nav a:hover{color:var(--foreground)}
@media (min-width:768px){.main-nav{display:flex}}

/* Hero */
.hero{position:relative;overflow:hidden}
.dot-grid{position:absolute;inset:0;opacity:.4;pointer-events:none;background-image:radial-gradient(oklch(0.6 0.2 260 / 0.18) 1px,transparent 1px);background-size:14px 14px}
.glow-purple{position:absolute;border-radius:9999px;background:oklch(0.62 0.22 295 / 0.3);filter:blur(80px);pointer-events:none}
.glow-hero{right:0;top:5rem;width:420px;height:420px}
.hero-grid{position:relative;display:grid;gap:2.5rem;align-items:center;padding-top:4rem;padding-bottom:6rem}
@media (min-width:768px){.hero-grid{grid-template-columns:1fr 1fr}}
.cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero-image{display:flex;justify-content:center}
.hero-image img{max-width:520px;width:100%}

/* Cards */
.card{background:var(--gradient-card);border:1px solid var(--border);border-radius:var(--radius-2xl);padding:1.25rem;box-shadow:var(--shadow-card)}
.card-red{border-color:oklch(0.68 0.22 25 / 0.4)}
.card-green{border-color:oklch(0.78 0.18 165 / 0.4)}

/* Problem grid */
.problem-grid{margin-top:2.5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:768px){.problem-grid{grid-template-columns:repeat(5,1fr)}}
.icon-chip{height:2.5rem;width:2.5rem;border-radius:.5rem;background:oklch(0.62 0.22 295 / 0.15);color:var(--brand-purple);display:flex;align-items:center;justify-content:center}
.icon-chip svg{width:1.25rem;height:1.25rem}
.problem-grid h3{margin-top:1rem;font-weight:600;font-size:1rem;line-height:1.2}

/* Compare grid */
.compare-grid{margin-top:2.5rem;display:grid;gap:1rem}
@media (min-width:768px){.compare-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.compare-head{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;letter-spacing:.2em;margin-bottom:1rem}
.compare-head.red{color:var(--brand-red)}.compare-head.green{color:var(--brand-green)}
.compare-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}
.compare-list li{display:flex;gap:.75rem;align-items:flex-start}
.compare-list b{display:block;font-size:.875rem;font-weight:600}
.compare-list .small{display:block}
.dot{width:1.75rem;height:1.75rem;border-radius:.375rem;flex-shrink:0;margin-top:.125rem}
.dot-red{background:oklch(0.68 0.22 25 / 0.13)}
.dot-green{background:oklch(0.78 0.18 165 / 0.13)}

/* Stat rows inside compare middle card */
.stat-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--border)}
.stat-row:last-child{border-bottom:0}
.stat-red{font-size:1.5rem;font-weight:700;color:var(--brand-red)}
.stat-green{font-size:1.125rem;font-weight:700;color:var(--brand-green)}
.arrow{color:var(--brand-purple)}.arrow.big{font-size:1.5rem;align-self:center}
.right{text-align:right}

/* Mazda bar */
.mazda-bar{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.mazda-left{display:flex;align-items:center;gap:1rem}
.mazda-left img{width:80px;height:80px;object-fit:contain}
.mazda-title{font-size:.875rem;font-weight:700;letter-spacing:.1em}
.mazda-word{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--muted-fg)}

/* Stats grid */
.stats-grid{margin-top:2.5rem;display:grid;gap:1.25rem}
@media (min-width:768px){.stats-grid{grid-template-columns:repeat(3,1fr)}}
.stat-big{font-size:3.75rem;font-weight:700;line-height:1}
.stat-title{margin-top:1rem;font-size:1.25rem;font-weight:600}

/* Mobile-first section */
.mobile-first{display:grid;gap:2.5rem;align-items:center}
@media (min-width:768px){.mobile-first{grid-template-columns:1fr 1fr}}
.oldnew{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem}
.fake-field{margin-bottom:.5rem;border-radius:.375rem;background:oklch(0.13 0.03 270 / 0.5);border:1px solid var(--border);padding:.5rem .75rem;font-size:.75rem;color:var(--muted-fg)}
.fake-submit{margin-top:.5rem;width:100%;border-radius:.375rem;background:var(--muted);padding:.5rem 0;font-weight:600;font-size:.875rem}
.fake-textus{width:100%;border-radius:.375rem;padding:.625rem 0;font-size:.875rem;font-weight:700;color:var(--brand-green);background:oklch(0.78 0.18 165 / 0.2);border:1px solid oklch(0.78 0.18 165 / 0.4)}
.footnote{margin-top:.75rem;text-align:center;font-size:.6875rem;font-weight:600}
.footnote.red{color:var(--brand-red)}.footnote.green{color:var(--brand-green)}

/* Final CTA */
.final-cta{border-radius:var(--radius-2xl);border:1px solid oklch(0.62 0.22 295 / 0.4);padding:2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--gradient-final-cta)}

/* Footer */
.site-footer{border-top:1px solid var(--border)}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding:2rem 1.25rem}
.footer-brand{display:flex;align-items:center;gap:1rem}
.footer-logo{height:70px;width:auto;mix-blend-mode:screen}
.footer-social{display:flex;gap:.75rem}
.social{height:2.25rem;width:2.25rem;border-radius:9999px;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.footer-links{display:flex;gap:1.5rem;font-size:.875rem;color:var(--muted-fg)}
.footer-links a:hover{color:var(--foreground)}