/* ─── RESET ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
a{color:inherit;text-decoration:none}

/* ─── TOKENS ─────────────────────────────────────────────── */
:root{
  /* Blue palette */
  --blue-950:#0000C8;
  --blue-900:#0000FB;
  --blue-700:#2929FC;
  --blue-500:#5555FD;
  --blue-300:#9999FE;
  --blue-100:#D9D9FF;
  --blue-050:#EEEEFF;
  --blue-020:#F6F6FF;
  --blue-brand:#132ef5;

  /* Ink */
  --ink-900:#202124;
  --ink-700:#3C3F43;
  --ink-500:#5F6368;
  --ink-300:#9AA0A6;
  --ink-100:#E8EAED;
  --ink-050:#F8F9FA;

  /* Card tints */
  --tint-blue:#EEF0FF;
  --tint-teal:#E6F4F1;
  --tint-amber:#FEF7E0;
  --tint-coral:#FCE8E6;
  --tint-green:#E6F4EA;
  --tint-purple:#F3E8FD;

  /* Accent */
  --green-accent:#00C07A;

  /* Spacing */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;
  --sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;--sp-24:96px;
  --section-pad:clamp(48px,8vw,96px);
  --card-gap:clamp(16px,2vw,24px);
  --gutter:clamp(20px,4vw,80px);
  --content-max:1360px;

  /* Typography */
  --font-display:'Outfit',sans-serif;
  --font-body:'DM Sans',sans-serif;
  --text-h1:clamp(40px,5.5vw,72px);
  --text-h2:clamp(28px,3.5vw,48px);
  --text-h3:clamp(20px,2vw,28px);
  --text-body:clamp(15px,1.1vw,17px);
  --text-stat:clamp(36px,4.5vw,64px);
  --text-xs:12px;

  /* Radius */
  --r-xs:clamp(4px,0.3vw,6px);
  --r-sm:clamp(8px,0.6vw,10px);
  --r-md:clamp(12px,1vw,16px);
  --r-lg:clamp(16px,1.5vw,24px);
  --r-xl:clamp(24px,2.5vw,40px);
  --r-2xl:clamp(32px,3.5vw,56px);
  --r-full:9999px;

  /* Glass */
  --glass-bg:rgba(255,255,255,0.65);
  --glass-border:1px solid rgba(255,255,255,0.45);
  --glass-shadow:0 2px 32px rgba(32,33,36,0.07),0 1px 4px rgba(32,33,36,0.04);

  /* Motion */
  --ease-spring:cubic-bezier(0.22,1,0.36,1);
  --ease-out:cubic-bezier(0,0,0.2,1);
  --dur-fast:150ms;
  --dur-mid:300ms;
  --dur-slow:500ms;
}

/* ─── BASE ───────────────────────────────────────────────── */
body{
  font-family:var(--font-body);
  font-size:var(--text-body);
  color:var(--ink-700);
  background:#fff;
  overflow-x:hidden;
  line-height:1.7;
}

.wrap{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--gutter);
}

section{padding:var(--section-pad) 0;}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink-900);
  line-height:1.08;
}
h1{font-size:var(--text-h1);}
h2{font-size:var(--text-h2);line-height:1.12;}
h3{font-size:var(--text-h3);line-height:1.2;}

/* ─── CURSOR GLOW ────────────────────────────────────────── */
#cursor-glow{
  position:fixed;
  width:700px;height:700px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(19,46,245,0.055) 0%,transparent 68%);
  pointer-events:none;
  /* Start far off-screen until first mousemove positions it */
  left:-9999px;top:-9999px;
  transform:translate(-50%,-50%);
  z-index:0;
  mix-blend-mode:multiply;
  transition:left 0.12s var(--ease-out),top 0.12s var(--ease-out);
}
@media(pointer:coarse){#cursor-glow{display:none;}}

/* ─── REVEAL ANIMATIONS ──────────────────────────────────── */
@keyframes revealFallback{
  from{opacity:0;transform:translateY(24px);}
  to  {opacity:1;transform:translateY(0);}
}
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease-spring),
              transform var(--dur-slow) var(--ease-spring);
  /* CSS fallback: if IntersectionObserver doesn't fire within 600ms, animate in automatically */
  animation:revealFallback 0.6s var(--ease-spring) 0.6s both;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
  animation:none; /* JS took over — cancel the CSS fallback */
}





/* ─── HERO CLASSY REVEAL (blur-focus-in) ─────────────────── */
@keyframes heroRevealFallback{
  from{filter:blur(10px);}
  to  {filter:blur(0);}
}
.hero-reveal{
  filter:blur(10px);
  transform:translateY(32px);
  transition:opacity 1s var(--ease-spring),
              transform 1s var(--ease-spring),
              filter 0.95s ease-out;
  animation:heroRevealFallback 0.95s ease-out 0.6s both;
}
.hero-reveal.visible{
  filter:blur(0);
  animation:none;
}
/* Stagger fallback delays to match reveal-delay-N transition-delays */
.reveal-delay-1{transition-delay:70ms; animation-delay:0.67s;}
.reveal-delay-2{transition-delay:140ms;animation-delay:0.74s;}
.reveal-delay-3{transition-delay:210ms;animation-delay:0.81s;}
.reveal-delay-4{transition-delay:280ms;animation-delay:0.88s;}


/* ─── BADGES / PILLS ─────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;
  letter-spacing:0.05em;text-transform:uppercase;
  padding:5px 14px;
  border-radius:var(--r-full);
}
.badge-blue{background:var(--tint-blue);color:var(--blue-700);}
.badge-teal{background:var(--tint-teal);color:#0F6E56;}
.badge-amber{background:var(--tint-amber);color:#92400E;}
.badge-coral{background:var(--tint-coral);color:#991B1B;}
.badge-green{background:var(--tint-green);color:#065F46;}
.badge-ink{background:var(--ink-050);color:var(--ink-500);}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-display);font-weight:600;font-size:15px;
  padding:14px 28px;
  border-radius:var(--r-full);
  border:none;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-mid) var(--ease-spring);
}
.btn-primary{
  background:var(--blue-900);color:#fff;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,251,0.28);
}
.btn-ghost{
  background:transparent;color:var(--blue-900);
  border:1.5px solid var(--blue-900);
}
.btn-ghost:hover{
  background:var(--blue-020);
  transform:translateY(-2px);
}
.btn-white{
  background:#fff;color:var(--blue-900);
}
.btn-white:hover{transform:translateY(-2px);}

/* ─── CARDS ──────────────────────────────────────────────── */
.card{
  border-radius:var(--r-lg);
  transition:transform var(--dur-mid) var(--ease-spring),
              box-shadow var(--dur-mid) var(--ease-spring);
  will-change:transform;
  position:relative;overflow:hidden;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(32,33,36,0.10),0 2px 8px rgba(32,33,36,0.05);
}
.card-glass{
  background:var(--glass-bg);
  border:var(--glass-border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--glass-shadow);
}
.card-white{background:#fff;border:1px solid var(--ink-100);}
.card-teal{background:var(--tint-teal);border:1px solid #C2EBE0;}
.card-teal:hover{background:#D8EEE9;}
.card-blue{background:var(--tint-blue);border:1px solid var(--blue-100);}
.card-blue:hover{background:#E4E7FF;}
.card-coral{background:var(--tint-coral);border:1px solid #FBCFCA;}
.card-coral:hover{background:#F8DCDA;}
.card-amber{background:var(--tint-amber);border:1px solid #FDE68A;}
.card-green{background:var(--tint-green);border:1px solid #A8D5B5;}

/* ─── NAV — floating glass island ───────────────────────── */
#nav{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  width:calc(100% - 48px);
  max-width:1240px;
  height:56px;
  border-radius:20px;
  /* Glass base — always on, subtle */
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(255,255,255,0.55);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:
    0 4px 24px rgba(32,33,36,0.09),
    0 1px 0 rgba(255,255,255,0.8) inset;
  display:flex;align-items:center;
  transition:background var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
#nav.scrolled{
  background:rgba(255,255,255,0.88);
  box-shadow:
    0 8px 40px rgba(32,33,36,0.12),
    0 1px 0 rgba(255,255,255,0.9) inset;
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:0 var(--sp-6);
}
.nav-logo-full {
  display: block;
  height: 22px;
  overflow: hidden;
  line-height: 0;
}
.nav-logo-full svg { height: 32px; width: auto; display: block; max-height: 32px; }
.nav-logo-short {
  display: none;
  height: 30px;
  overflow: hidden;
  line-height: 0;
}
.nav-logo-short svg { height: 30px; width: auto; display: block; max-height: 30px; }

@media (max-width: 480px) {
  .nav-logo-short { display: block; }
  .nav-logo-full  { display: none; }
  #nav { width: calc(100% - 24px); top: 12px; border-radius: 16px; }
}
.nav-links{
  display:flex;gap:var(--sp-8);
  font-family:var(--font-body);font-size:14px;font-weight:500;
  color:var(--ink-500);
}
.nav-links a{
  position:relative;padding:4px 0;
  transition:color var(--dur-fast);
}
.nav-links a::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;
  background:var(--blue-900);border-radius:2px;
  transform:scaleX(0);transition:transform var(--dur-fast) var(--ease-spring);
}
.nav-links a:hover,
.nav-links a.active{color:var(--ink-900);}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1);}
.nav-cta{white-space:nowrap; margin-left: var(--sp-4); padding: 10px 22px; font-size: 14px;}


/* ─── HERO ───────────────────────────────────────────────── */
#hero {
  /* push hero content below island nav: 16px top offset + 56px height + 24px gap */
  padding-top: calc(96px + var(--section-pad));
  padding-bottom: var(--section-pad);
  background: #fff;
  position: relative;
  overflow: hidden;
}
.hero-inner {
  display: grid;
  /* text column shrinks freely; phone column is always exactly its own width */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
  text-align: left;
  min-width: 0; /* critical: lets column shrink below content width, prevents overlap */
}
.hero-h1 {
  letter-spacing: -0.02em;
}
.hero-h1 .accent { color: var(--blue-900); }
.hero-sub {
  color: var(--ink-500);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  /* no max-width — text fills the column and extends toward the phone */
}
.hero-ctas {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}
.hero-trust {
  font-size: 13px;
  color: var(--ink-300);
  letter-spacing: 0.01em;
}
.hero-trust strong { color: var(--ink-500); }

/* ── iPhone mockup (right column) ──────────────────────── */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 288px;
  flex-shrink: 0;
  position: relative;
  /* Animated dot-grid pattern fills the empty hero-right area */
  background-image: radial-gradient(circle, rgba(19,46,245,0.09) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  animation: patternDrift 10s ease-in-out infinite alternate;
  border-radius: 20px;
}
@keyframes patternDrift {
  from { background-position: 0 0; }
  to   { background-position: 11px 11px; }
}
/* Soft blue glow centred behind the phone */
.hero-right::before {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(19,46,245,0.07) 0%, transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: glowPulse 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes glowPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.6; }
  50%       { transform: translate(-50%,-50%) scale(1.15); opacity: 1;   }
}
.iphone-wrap {
  position: relative;
  z-index: 1;                /* sits above the dot pattern and glow */
  width: 260px;
  flex-shrink: 0;
  filter: drop-shadow(0 20px 40px rgba(19,46,245,0.14))
          drop-shadow(0 4px 12px rgba(32,33,36,0.10));
}

/* ── Tablet (769-1100px): phone column is fixed at 288px, no scaling needed ──
   The minmax(0,1fr) text column absorbs all size changes naturally.         */

/* ── Mobile: stack layout ── */
@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px; /* generous breathing room between trusted-by and phone */
  }
  .hero-left {
    align-items: flex-start;
    text-align: left;
  }
  .hero-sub {
    text-align: justify;
    max-width: 100%;
  }
  .hero-trust {
    text-align: center;
    width: 100%;
  }
  .hero-right {
    order: 1;
    width: 100%;
    /* Turn off pattern on mobile — too busy when stacked */
    background-image: none;
    animation: none;
  }
  .hero-right::before { display: none; }
  .iphone-wrap {
    margin: 0 auto;
    transform: scale(0.9);
    transform-origin: top center;
    /* Negative margin collapses the layout overhang so 'trusted by'
       sits flush with the phone's visual bottom, not below it.
       564px natural frame × (1 − 0.9) = −56px */
    margin-bottom: -56px;
  }
}

/* ── Small mobile (≤420px): scale further for compact screens ── */
@media (max-width: 420px) {
  .iphone-wrap {
    transform: scale(0.76);
    /* 564 × (1 − 0.76) = −135px */
    margin-bottom: -135px;
  }
}
.iphone-frame {
  width: 100%;
  border-radius: 46px; /* iPhone 17 Pro corner radius, proportionally scaled */
  background: linear-gradient(160deg, #2e2e33 0%, #1a1a1f 55%);
  padding: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.09),
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 0 0 1px rgba(0,0,0,0.55);
  position: relative;
}
/* Side buttons */
.iphone-frame::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 100px;
  width: 3px;
  height: 32px;
  background: #2a2a30;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 42px 0 #2a2a30, 0 -2px 0 rgba(255,255,255,0.05);
}
.iphone-frame::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 128px;
  width: 3px;
  height: 60px;
  background: #2a2a30;
  border-radius: 0 2px 2px 0;
}
.iphone-screen {
  border-radius: 40px; /* inner screen */
  background: #fff;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  /* 548px screen + 16px frame padding = 564px frame total.
     564 / 260 = 2.169 — matches iPhone 17 Pro aspect ratio exactly. */
  height: 548px;
}

/* Dynamic Island */
.iphone-notch {
  width: 84px;
  height: 22px;
  background: #1a1a1f;
  border-radius: 20px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* Status bar */
.iphone-status {
  background: #f2f2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 16px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #1a1a1f;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.2px;
}

.iphone-url-pill {
  flex: 1;
  background: #e5e5ea;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 10px;
  color: #3c3c43;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.iphone-url-pill svg { flex-shrink: 0; color: #8e8e93; }
.iphone-url-text { color: #1a1a1f; font-weight: 500; font-size: 10.5px; }

/* Search bar inside phone */
.iphone-search-bar {
  margin: 12px 12px 0;
  background: #fff;
  border: 1.5px solid #e5e5ea;
  border-radius: 10px;
  padding: 8px 8px 8px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.iphone-search-bar > svg { flex-shrink: 0; color: #8e8e93; }

/* Wrapper holds placeholder + typed text in the same space */
.iphone-search-input-wrap {
  flex: 1;
  position: relative;
  height: 16px;
  overflow: hidden;
}

/* "Search" placeholder — visible at t=0, fades before typing */
.iphone-search-placeholder {
  position: absolute;
  top: 0; left: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #8e8e93;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  white-space: nowrap;
  animation: placeholder-fade 0.25s ease-out 0.4s forwards;
}
@keyframes placeholder-fade {
  to { opacity: 0; }
}

/* Typed text — 23 chars, faster + smoother */
.iphone-typed-text {
  position: absolute;
  top: 0; left: 0;
  width: max-content;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--blue-900);
  animation:
    typing 1.4s steps(23, end) 0.55s both,
    cursor-blink 0.5s step-end 3 1.95s,
    cursor-hide 0.08s linear 2.7s forwards;
  font-size: 11.5px;
  color: #1a1a1f;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.4;
}
@keyframes typing {
  from { max-width: 0; }
  to   { max-width: 300px; }
}
@keyframes cursor-blink {
  0%, 100% { border-color: var(--blue-900); }
  50%      { border-color: transparent; }
}
@keyframes cursor-hide {
  to { border-color: transparent; border-width: 0; }
}

/* Search button — press fires right after typing finishes */
.iphone-search-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: var(--blue-900);
  color: #fff;
  border: none;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  opacity: 1;
  animation: btn-press 0.22s var(--ease-spring) 2.1s both;
}
@keyframes btn-press {
  0%   { transform: scale(1);    background: var(--blue-900); }
  45%  { transform: scale(0.82); background: var(--blue-700); }
  100% { transform: scale(1);    background: var(--blue-900); }
}

/* AI answer card — smooth, fast fade-up after press */
.iphone-answer {
  margin: 8px 12px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  opacity: 0;
  transform: translateY(8px);
  animation: answer-appear 0.6s cubic-bezier(0.22,1,0.36,1) 2.45s forwards;
}
@keyframes answer-appear {
  to { opacity: 1; transform: translateY(0); }
}
.iphone-answer-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 5px;
  background: #f9f9f9;
  border-bottom: 1px solid #f0f0f0;
  font-size: 9.5px;
  font-weight: 600;
  color: #5f6368;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.iphone-ai-dot {
  width: 15px; height: 15px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 7.5px; font-weight: 900; color: #fff;
  flex-shrink: 0;
}
.iphone-answer-body {
  padding: 8px 10px;
  font-size: 10px;
  line-height: 1.6;
  color: #3c3f43;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.iphone-answer-body .phone-brand {
  color: var(--blue-900);
  font-weight: 700;
}
.iphone-perp-section {
  border-top: 1px solid #f0f0f0;
}
.iphone-perp-section .iphone-answer-header {
  background: #f0fdf9;
  border-bottom: 1px solid #e0f7f0;
}
.iphone-perp-section .iphone-answer-body {
  background: #f9fffe;
}

/* Generic blurred web results below the cards */
.iphone-web-results {
  margin: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  animation: answer-appear 0.55s cubic-bezier(0.22,1,0.36,1) 2.8s forwards;
}
.iphone-web-result {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.iphone-web-result-site {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #5f6368;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.iphone-site-favicon {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--blue-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.iphone-site-favicon.fav-green { background: #34A853; }
.iphone-site-favicon.fav-orange { background: #FF6D00; }
.iphone-web-result-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--blue-900);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.3;
}
.iphone-web-result-snippet {
  font-size: 9.5px;
  color: #5f6368;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  /* blur the generic results to not distract */
  filter: blur(1.5px);
  user-select: none;
}
/* First result is NOT blurred — it's the DOC site */
.iphone-web-result:first-child .iphone-web-result-snippet {
  filter: none;
  color: #3c3f43;
}
.iphone-web-result:first-child .iphone-web-result-title {
  color: #1558d6;
}

/* Divider between results */
.iphone-results-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 0;
}

/* ─── STATS CARD ──────────────────────────────────────────── */
#stats{
  background:var(--ink-050);
  padding:var(--section-pad) 0;
}
.stats-card{
  background:#fff;
  border:1px solid var(--ink-100);
  border-radius:16px;
  padding:var(--sp-12) var(--sp-8) var(--sp-8);
  box-shadow:0 4px 24px rgba(32,33,36,0.06);
  transition:transform 0.5s var(--ease-spring),
             box-shadow 0.5s var(--ease-spring);
  transform-style:preserve-3d;
  will-change:transform;
}
.stats-card:hover{
  transform:perspective(1200px) rotateX(4deg) translateY(-4px);
  box-shadow:0 20px 56px rgba(32,33,36,0.11);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-bottom:var(--sp-8);
}
.stat-item{
  text-align:center;
  padding:var(--sp-6) var(--sp-4);
  position:relative;
}
.stat-item+.stat-item::before{
  content:'';position:absolute;left:0;top:15%;bottom:15%;
  width:1px;background:var(--ink-100);
}
.stat-num{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(32px,4vw,56px);
  color:var(--blue-900);
  line-height:1;margin-bottom:var(--sp-2);
  display:flex;align-items:baseline;justify-content:center;gap:2px;
}
.stat-pre{
  font-size:0.55em;
  color:var(--ink-500);
  font-weight:500;
  margin-right:1px;
}
.stat-sfx{
  font-size:0.55em;
  color:var(--ink-400,#7A8086);
  font-weight:500;
  margin-left:1px;
  letter-spacing:-0.02em;
}
.stat-count{
  display:inline-block;
}
.stat-label{
  font-size:13px;color:var(--ink-500);
  line-height:1.4;
}
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr 1fr;}
  .stat-item:nth-child(3){
    grid-column:1/-1;
    border-top:1px solid var(--ink-100);
  }
  .stat-item:nth-child(3)::before{display:none;}
  .stats-card{padding:var(--sp-8) var(--sp-4) var(--sp-6);}
  .ticker-wrap{
    flex-wrap:wrap;
    width:100%;
    border-radius:16px;
    padding:var(--sp-4);
    gap:var(--sp-2);
    row-gap:4px;
    text-align:center;
    justify-content:center;
  }
  .ticker-label{font-size:12px;line-height:1.5;}
  .ticker-count{font-size:18px;}
}

/* ─── MARQUEE / LOGO SLIDER ──────────────────────────────── */
#clients{
  background:var(--ink-050);
  padding:var(--section-pad) 0;
  overflow:hidden;
}
.clients-headline{
  text-align:center;margin-bottom:var(--sp-12);
}
.clients-headline h3{font-size:clamp(22px,2vw,30px);}
.marquee-outer{
  position:relative;overflow:hidden;
  mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
}
.marquee-track{
  display:flex;align-items:center;
  gap:clamp(56px,5vw,88px);
  width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee-track:hover{animation-play-state:paused;}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.logo-item{
  flex-shrink:0;
  height:48px;
  display:flex;align-items:center;
  filter:grayscale(100%) opacity(0.45);
  transition:filter var(--dur-mid);
}
.logo-item:hover{filter:none;}
.logo-item img,.logo-item svg{height:100%;width:auto;}
.logo-text{
  font-family:var(--font-display);font-weight:600;
  font-size:15px;color:var(--ink-300);
  white-space:nowrap;
}

#seo,#aeo,#work,#about{scroll-margin-top: 64px;}

/* ─── PROBLEM SECTION ────────────────────────────────────── */
#seo{
  background:#fff;
  container-type:inline-size;
  container-name:seo-section;
}
.seo-grid{
  display:grid;
  /* heading + chips share left column; illustration spans full right column */
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto 1fr;
  column-gap:clamp(32px,6vw,80px);
  row-gap:0;
}
/* left col, row 1 — badge + heading */
.seo-heading{
  grid-column:1;
  grid-row:1;
  padding-bottom:var(--sp-6);
}
.seo-heading h2{margin:var(--sp-4) 0 0;}
/* left col, row 2 — stat chips */
.seo-chips{
  grid-column:1;
  grid-row:2;
  align-self:start;
}
/* right col, rows 1–2 — illustration fills full height */
.burst-wrap{
  grid-column:2;
  grid-row:1 / 3;
  display:flex;
  justify-content:center;
  align-items:center;
  align-self:stretch;
  min-height:420px;
}
.burst-wrap svg{width:100%;height:100%;max-width:none;}

/* Mobile: heading → illustration → chips */
@container seo-section (max-width:700px){
  .seo-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    row-gap:var(--sp-8);
  }
  .seo-heading{grid-column:1;grid-row:1;padding-bottom:0;}
  .burst-wrap {grid-column:1;grid-row:2;min-height:280px;align-self:auto;}
  .seo-chips  {grid-column:1;grid-row:3;}
}
.seo-source{font-size:13px;color:var(--ink-300);margin-top:var(--sp-4);font-style:italic;}
.seo-stat-chips{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.seo-chip{
  padding:var(--sp-4) var(--sp-6);
  border-radius:var(--r-md);
  font-size:14px;font-weight:500;color:var(--ink-900);
  border:1px solid transparent;
}
.seo-chip span{font-size:12px;color:var(--ink-500);display:block;margin-top:2px;font-weight:400;}

/* ─── FRAMEWORK / AEO SECTION ────────────────────────────── */
#aeo{
  background:var(--ink-050);
  container-type:inline-size;
  container-name:aeo-section;
}
.aeo-intro{text-align:center;max-width:640px;margin:0 auto var(--sp-12);}
.aeo-intro h2{margin:var(--sp-4) 0 var(--sp-4);}
.aeo-intro p{color:var(--ink-500);}

/* SVG growth graph */
.growth-graph-wrap{
  margin-bottom:var(--sp-12);
  padding:var(--sp-8) var(--sp-8) var(--sp-6);
  background:#fff;
  border-radius:var(--r-xl);
  border:1px solid var(--ink-100);
  box-shadow:0 2px 24px rgba(32,33,36,0.05);
}

.pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--card-gap);
}
/* Single column below 900px — no intermediate 2-col step */
@container aeo-section (max-width:900px){
  .pillar-grid{grid-template-columns:1fr;}
}
.pillar-card{
  padding:var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-4);
  border-radius:16px;
}

/* Icon container */
.pillar-icon-wrap{
  width:48px;height:48px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.pillar-icon-wrap svg{width:24px;height:24px;}

/* Icon + badge on same row */
.pillar-card-header{
  display:flex;align-items:center;gap:var(--sp-3);
}
.card-teal  .pillar-icon-wrap{background:rgba(15,110,86,0.13);  color:#0F6E56;}
.card-coral .pillar-icon-wrap{background:rgba(153,27,27,0.10);  color:#B91C1C;}
.card-blue  .pillar-icon-wrap{background:rgba(0,0,251,0.10);    color:var(--blue-900);}

.pillar-label{font-size:20px;font-family:var(--font-display);font-weight:600;margin-bottom:var(--sp-2);}
.pillar-body{font-size:14px;line-height:1.65;color:var(--ink-700);flex:1;}
.pillar-metric{
  display:flex;align-items:center;justify-content:center;
  width:100%;
  font-size:13px;font-weight:600;
  padding:10px 16px;
  border-radius:var(--r-full);
  margin-top:auto;
  text-align:center;
  white-space:nowrap;
  box-sizing:border-box;
}
.metric-green{background:var(--green-accent);color:#fff;}
.metric-blue{background:var(--blue-900);color:#fff;}

/* geo section removed — anchor redirects to #aeo */

/* ─── PROOF OF WORK ──────────────────────────────────────── */
#work{
  background:var(--ink-050);
  container-type:inline-size;
  container-name:work-section;
}
.work-intro{text-align:center;margin-bottom:var(--sp-12);}
.work-intro h2{margin-bottom:var(--sp-4);}
.work-intro p{color:var(--ink-500);max-width:520px;margin:0 auto;}

.case-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--card-gap);
}
@container work-section (max-width:700px){
  .case-grid{grid-template-columns:1fr;}
}

.case-card{
  background:#fff;
  border:1px solid var(--ink-100);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:row;
  transition:transform var(--dur-mid) var(--ease-spring),
              box-shadow var(--dur-mid) var(--ease-spring);
}
.case-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(32,33,36,0.10);
}
.case-left{
  flex:0 0 42%;
  background:var(--ink-050);
  border-right:1px solid var(--ink-100);
  padding:var(--sp-6);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:var(--sp-3);
}
.case-right{
  flex:1;
  padding:var(--sp-6);
  display:flex;flex-direction:column;justify-content:space-between;
}
.case-logo-wrap{
  height:36px;
  display:flex;align-items:center;
}
.case-logo-text{
  font-family:var(--font-display);font-weight:600;
  font-size:22px;color:var(--ink-900);
}
.case-industry{font-size:12px;color:var(--ink-300);}
/* Plain-text industry label — aligns flush with brand name and challenge text */
.case-industry-tag{
  font-size:11px;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-400,#7A8086);
  line-height:1;
}
.case-challenge{font-size:13px;color:var(--ink-700);line-height:1.5;}
.case-metric-big{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(44px,5vw,64px);
  line-height:1;margin-bottom:var(--sp-2);
}
.case-metric-label{font-size:13px;color:var(--ink-500);margin-bottom:var(--sp-4);}
.case-method{font-size:12px;color:var(--ink-300);line-height:1.5;margin-bottom:var(--sp-4);}
.case-cta{
  /* reset button defaults */
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:13px;font-weight:500;color:var(--blue-900);
  display:inline-flex;align-items:center;gap:4px;
  transition:gap var(--dur-fast);
}
.case-cta:hover{gap:8px;}

/* Responsive case card */
@container work-section (max-width:500px){
  .case-card{flex-direction:column;}
  .case-left{flex:none;border-right:none;border-bottom:1px solid var(--ink-100);}
}

/* ─── COMPARISON TABLE ─ redesigned ──────────────────────── */
#about{background:#fff;}
.compare-intro{text-align:center;margin-bottom:var(--sp-12);}
.compare-intro h2{margin-bottom:var(--sp-4);}
.compare-intro p{color:var(--ink-500);max-width:540px;margin:0 auto;font-size:clamp(15px,1.1vw,17px);}

.compare-wrap{
  max-width:880px;margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--ink-100);
}

/* Column header bar */
.compare-header-row{
  display:grid;
  grid-template-columns:220px 1fr 1fr;
  background:var(--ink-050);
  border-bottom:1px solid var(--ink-100);
}
.compare-col-head{
  padding:var(--sp-4) var(--sp-6);
  font-family:var(--font-display);font-weight:600;font-size:14px;
}
.compare-col-head.ch-label{color:transparent;} /* spacer */
.compare-col-head.ch-standard{
  color:var(--ink-500);font-size:13px;font-weight:500;
  border-left:1px solid var(--ink-100);
  display:flex;align-items:center;gap:var(--sp-2);
}
.compare-col-head.ch-doc{
  color:var(--blue-900);font-size:14px;
  border-left:1px solid var(--ink-100);
  display:flex;align-items:center;gap:var(--sp-2);
}
.ch-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}

/* Rows */
.compare-row-item{
  display:grid;
  grid-template-columns:220px 1fr 1fr;
  border-bottom:1px solid var(--ink-100);
  transition:background var(--dur-fast);
}
.compare-row-item:last-child{border-bottom:none;}
.compare-row-item:hover{background:var(--blue-020);}

.cr-label{
  padding:var(--sp-4) var(--sp-6);
  font-size:12px;font-weight:600;
  color:var(--ink-400,#7A8086);
  letter-spacing:0.04em;text-transform:uppercase;
  display:flex;align-items:flex-start;padding-top:18px;
}
.cr-standard{
  padding:var(--sp-4) var(--sp-6);
  font-size:14px;color:var(--ink-500);
  border-left:1px solid var(--ink-100);
  line-height:1.5;
  display:flex;align-items:flex-start;gap:var(--sp-2);
}
.cr-doc{
  padding:var(--sp-4) var(--sp-6);
  font-size:14px;color:var(--ink-900);font-weight:500;
  border-left:1px solid var(--ink-100);
  line-height:1.5;
  display:flex;align-items:flex-start;gap:var(--sp-2);
}
.cr-doc .check{
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  width:16px;height:16px;border-radius:50%;
  background:var(--tint-green);
  color:#065F46;
  font-size:9px;font-weight:700;
  line-height:1;
  margin-top:2px;
}
.cr-standard .dash{
  display:block;
  flex-shrink:0;
  color:var(--ink-300);
  margin-top:0;
  line-height:1.5;
}

@media (max-width: 680px) {
  .compare-wrap { border: none; background: transparent; }
  .compare-header-row { display: none; }
  .compare-row-item {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--ink-100);
    border-radius: 16px;
    margin-bottom: var(--sp-3);
    overflow: hidden;
  }
  .cr-label {
    background: var(--ink-050);
    padding: var(--sp-2) var(--sp-4);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    display: block;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink-100);
  }
  .cr-standard {
    padding: var(--sp-3) var(--sp-4);
    border: none;
    border-bottom: 1px solid var(--ink-100);
    font-size: 13px;
  }
  .cr-standard::before { content: 'Standard  '; font-weight: 600; color: var(--ink-300); }
  .cr-doc {
    padding: var(--sp-3) var(--sp-4);
    border: none;
    background: var(--blue-020);
    font-size: 13px;
  }
  .cr-doc::before { content: 'DOC  '; font-weight: 600; color: var(--blue-900); }
}

/* ─── ROADMAP ────────────────────────────────────────────── */
#roadmap{background:var(--ink-050);padding:var(--section-pad) 0;}
.roadmap-intro{text-align:center;margin-bottom:var(--sp-12);}
.roadmap-intro h2{margin-bottom:var(--sp-4);}
.roadmap-intro p{color:var(--ink-500);max-width:520px;margin:0 auto;}

.roadmap-outer{overflow:hidden;padding:0 var(--gutter);}
.roadmap-track{
  display:flex;
  gap:var(--card-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:var(--sp-6);
}
.roadmap-track::-webkit-scrollbar{display:none;}
.roadmap-card{
  flex:0 0 320px;
  scroll-snap-align:start;
  padding:var(--sp-8);
  border-radius:16px;
  position:relative;overflow:hidden;
  /* flex column so milestone always pins to bottom */
  display:flex;flex-direction:column;
}
.roadmap-card .phase-bg-num{
  position:absolute;right:-8px;bottom:-16px;
  font-family:var(--font-display);font-weight:600;
  font-size:120px;line-height:1;
  color:rgba(0,0,0,0.05);
  pointer-events:none;user-select:none;
}
.roadmap-phase-label{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-300);margin-bottom:var(--sp-3);}
.roadmap-months{
  font-size:12px;color:var(--ink-500);margin-bottom:var(--sp-2);
}
.roadmap-title{
  font-family:var(--font-display);font-weight:600;
  font-size:22px;color:var(--ink-900);margin-bottom:var(--sp-4);
}
.roadmap-points{
  list-style:none;display:flex;flex-direction:column;gap:var(--sp-2);
  font-size:13px;color:var(--ink-700);
  flex:1; /* grows to fill card height */
}
.roadmap-points li{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:4px;
  line-height:1.5;
}
.roadmap-points li::before{
  content:'→';
  color:var(--blue-900);
  padding-top:1px;
  line-height:1.5;
}
.roadmap-milestone{
  margin-top:var(--sp-4); /* consistent gap from bullet list */
  padding:var(--sp-3) var(--sp-4);
  background:#fff;
  border-radius:var(--r-md);
  font-size:12px;font-weight:600;color:var(--ink-900);
  border:1px solid rgba(0,0,0,0.06);
}

/* Dots nav */
.roadmap-dots{
  display:flex;justify-content:center;gap:var(--sp-2);
  margin-top:var(--sp-6);
}
.rdot{
  width:24px;height:4px;border-radius:4px;
  background:var(--ink-100);cursor:pointer;
  transition:background var(--dur-fast),width var(--dur-fast);
}
.rdot.active{background:var(--blue-900);width:32px;}

@media(min-width:1024px){
  .roadmap-track{overflow:visible;display:grid;grid-template-columns:repeat(4,1fr);}
  .roadmap-card{flex:none;}
  .roadmap-dots{display:none;}
}
@media(max-width:480px){
  .roadmap-card{flex:0 0 85vw;}
}

/* ─── CONTACT FORM ───────────────────────────────────────── */
#contact{
  background:var(--ink-900);
  position:relative;overflow:hidden;
}
.contact-bg-blob{
  position:absolute;top:-30%;right:-20%;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(19,46,245,0.12) 0%,transparent 65%);
  pointer-events:none;
}
.contact-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-6);text-align:center;
}
.contact-inner h2{color:#fff;}
.contact-sub{color:rgba(255,255,255,0.6);max-width:480px;font-size:16px;}

.form-card{
  width:100%;max-width:560px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:var(--r-xl);
  padding:clamp(24px,4vw,40px);
  text-align:left;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
@media(max-width:500px){.form-row{grid-template-columns:1fr;}}

.form-group{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4);}
.form-label{
  font-size:13px;font-weight:500;color:rgba(255,255,255,0.75);
  font-family:var(--font-body);
}
.form-input,.form-textarea{
  background:rgba(255,255,255,0.90);
  border:1px solid var(--ink-100);
  border-radius:var(--r-sm);
  padding:12px 16px;
  font-size:15px;color:var(--ink-900);
  font-family:var(--font-body);
  outline:none;width:100%;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.form-input:focus,.form-textarea:focus{
  border-color:var(--blue-900);
  box-shadow:0 0 0 3px rgba(0,0,251,0.15);
}
.form-textarea{resize:vertical;min-height:100px;line-height:1.6;}
.form-input::placeholder,.form-textarea::placeholder{color:var(--ink-300);}

.btn-submit{
  width:100%;padding:16px;
  background:var(--blue-900);color:#fff;
  border:none;border-radius:var(--r-full);
  font-family:var(--font-display);font-weight:600;font-size:16px;
  cursor:pointer;
  transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-mid);
  margin-top:var(--sp-2);
}
.btn-submit:hover{
  background:var(--blue-700);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,251,0.35);
}
.form-disclaimer{
  text-align:center;margin-top:var(--sp-4);
  font-size:12px;color:rgba(255,255,255,0.35);
}

/* Diagnostic options inside the white form card — override dark-theme colours */
.form-diag.diag-options { margin-top: var(--sp-2); }
.form-diag .diag-option{
  border:1px solid var(--ink-100);
  background:#fff;
}
.form-diag .diag-option:hover{background:var(--blue-020);border-color:var(--blue-300);}
.form-diag .diag-option.selected{background:var(--blue-020);border-color:var(--blue-500);}
.form-diag .diag-radio{
  border:2px solid var(--ink-200,#D0D4D8);
}
.form-diag .diag-option.selected .diag-radio{border-color:var(--blue-900);background:var(--blue-900);}
.form-diag .diag-text{color:var(--ink-700);}
#faq{background:var(--ink-050);}
.faq-intro{text-align:center;margin-bottom:var(--sp-12);}
.faq-intro h2{margin-bottom:var(--sp-4);}
.faq-list{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:0;}
.faq-item{
  border-bottom:1px solid var(--ink-100);
}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  padding:var(--sp-6) 0;cursor:pointer;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(15px,1.2vw,17px);color:var(--ink-900);
  list-style:none;
  transition:color var(--dur-fast);
}
.faq-q:hover{color:var(--blue-900);}
.faq-icon{
  flex-shrink:0;width:24px;height:24px;
  border-radius:50%;border:1.5px solid var(--ink-100);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-mid) var(--ease-spring),
              border-color var(--dur-fast),background var(--dur-fast);
}
.faq-item.open .faq-icon{
  transform:rotate(45deg);
  border-color:var(--blue-900);background:var(--blue-900);
  color:#fff;
}
.faq-a{
  max-height:0;overflow:hidden;
  font-size:15px;color:var(--ink-500);line-height:1.7;
  transition:max-height var(--dur-slow) var(--ease-spring),
              padding var(--dur-mid);
}
.faq-item.open .faq-a{max-height:300px;padding-bottom:var(--sp-6);}

/* ─── FOOTER ─────────────────────────────────────────────── */
#footer { background: var(--ink-900); padding: var(--section-pad) 0 var(--sp-8); }

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
  flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-logo-text { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: #fff; }
.footer-tagline { color: rgba(255,255,255,0.45); font-size: 14px; max-width: 280px; line-height: 1.6; }
.footer-cta-col { display: flex; flex-direction: column; align-items: flex-end; }
@media (max-width: 600px) { .footer-top { flex-direction: column; } .footer-cta-col { align-items: flex-start; } }

.footer-offices { margin-bottom: var(--sp-12); }  /* was --sp-10 which is undefined */
.footer-offices-title {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer-addr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 768px) { .footer-addr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .footer-addr-grid { grid-template-columns: 1fr; } }

.footer-addr-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.footer-addr-city {
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; color: #fff; margin-bottom: var(--sp-2);
}
.footer-addr-detail { font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.5; }

.footer-bar {
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--sp-4);
  font-size: 13px; color: rgba(255,255,255,0.3);
}
.footer-bar a { color: rgba(255,255,255,0.3); transition: color var(--dur-fast); }
.footer-bar a:hover { color: rgba(255,255,255,0.7); }
.footer-bar-links { display: flex; gap: var(--sp-6); }

/* ─── UTILITY ────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.text-center{text-align:center;}
.mt-2{margin-top:var(--sp-2);}
.mt-4{margin-top:var(--sp-4);}
.mt-6{margin-top:var(--sp-6);}
.mb-4{margin-bottom:var(--sp-4);}

/* ─── LIVE TICKER (stats card) ───────────────────────────── */
.ticker-wrap{
  display:flex;align-items:center;justify-content:center;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-6);
  background:var(--ink-050);
  border:1px solid var(--ink-100);
  border-radius:var(--r-full);
  margin:0 auto;
  width:fit-content;
}
.ticker-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green-accent);
  animation:tickerPulse 1.4s ease-in-out infinite;
}
@keyframes tickerPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.7);}}
.ticker-label{font-size:13px;color:var(--ink-500);}
.ticker-count{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--green-accent);}

/* ─── TESTIMONIALS ───────────────────────────────────────── */
#testimonials{background:#fff;}
.test-intro{text-align:center;margin-bottom:var(--sp-12);}
.test-intro h2{margin-bottom:var(--sp-3);}
.test-intro p{color:var(--ink-500);}
.test-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--card-gap);
}
@media(max-width:900px){.test-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.test-grid{grid-template-columns:1fr;}}
.test-card{
  padding:var(--sp-6);
  border-radius:16px;
  border:1px solid #E8E0CE;
  background:#FDFAF4;
  display:flex;flex-direction:column;gap:var(--sp-4);
  transition:transform var(--dur-mid) var(--ease-spring),box-shadow var(--dur-mid);
}
.test-card:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(180,150,80,0.10);}
.test-stars{
  display:flex;gap:3px;
  color:#D4940A;
  font-size:15px;
  line-height:1;
  letter-spacing:1px;
}
.test-metric{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(28px,3vw,40px);color:var(--blue-900);
  line-height:1;
}
.test-quote{
  font-size:14px;line-height:1.7;color:var(--ink-700);
  flex:1;
  position:relative;
  padding-top:var(--sp-3);
}
.test-quote::before{
  content:'"';
  position:absolute;top:-8px;left:-4px;
  font-size:48px;line-height:1;
  color:var(--ink-100);
  font-family:Georgia,serif;
}
.test-author{
  display:flex;align-items:center;gap:var(--sp-3);
  padding-top:var(--sp-4);
  border-top:1px solid var(--ink-100);
}
.test-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--blue-050);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--blue-700);
  flex-shrink:0;
}
.test-avatar-img{
  width:36px;height:36px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.test-name{font-size:13px;font-weight:600;color:var(--ink-900);}
.test-role{font-size:12px;color:var(--ink-300);}
.test-brand-tag{
  display:inline-block;margin-top:2px;
  font-size:11px;font-weight:500;color:var(--blue-700);
  background:var(--blue-050);border-radius:var(--r-full);
  padding:2px 8px;
}

/* ─── DIAGNOSTIC / PRE-QUALIFIER ─────────────────────────── */
.diagnostic-wrap{
  max-width:560px;margin:0 auto var(--sp-10);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-xl);
  padding:var(--sp-6) var(--sp-8);
}
.diagnostic-q{
  font-family:var(--font-display);font-weight:600;
  font-size:16px;color:#fff;
  margin-bottom:var(--sp-4);text-align:center;
}
.diag-options{display:flex;flex-direction:column;gap:var(--sp-3);}
.diag-option{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.diag-option:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.25);}
.diag-option.selected{background:rgba(0,0,251,0.18);border-color:var(--blue-300);}
.diag-radio {
  width: 18px; height: 18px;
  border-radius: 5px;  /* was 50% circle, now rounded square */
  border: 2px solid rgba(255,255,255,0.3);
  flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.diag-option.selected .diag-radio{border-color:var(--blue-300);background:var(--blue-900);}
.diag-option.selected .diag-radio::after {
  content: '✓';
  font-size: 11px; font-weight: 700; color: #fff;
  /* Remove the circle dot, use checkmark instead */
}
.diag-text{font-size:14px;color:rgba(255,255,255,0.8);line-height:1.45;}

/* ─── PAGESPEED BADGE ────────────────────────────────────── */
.cwv-badge{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  background:var(--tint-green);border:1px solid #A8D5B5;
  border-radius:var(--r-full);padding:5px 14px;
  font-size:12px;font-weight:600;color:#065F46;
}
.cwv-badge svg{flex-shrink:0;}

/* ─── CONSENT BANNER ─────────────────────────────────────── */
#consent-banner{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  z-index:500;
  background:var(--ink-900);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-6);
  max-width:580px;width:calc(100% - 40px);
  display:flex;align-items:center;gap:var(--sp-4);
  box-shadow:0 8px 40px rgba(0,0,0,0.35);
  animation:slideUp 0.5s var(--ease-spring) 1.5s both;
}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
#consent-banner.hidden{display:none;}
.consent-text{font-size:13px;color:rgba(255,255,255,0.7);line-height:1.5;flex:1;}
.consent-text a{color:var(--blue-300);text-decoration:underline;}
.consent-btns{display:flex;gap:var(--sp-2);flex-shrink:0;}
.consent-accept{
  background:var(--blue-900);color:#fff;
  border:none;border-radius:var(--r-full);
  padding:8px 16px;font-size:13px;font-weight:600;
  font-family:var(--font-body);cursor:pointer;
  transition:background var(--dur-fast);white-space:nowrap;
}
.consent-accept:hover{background:var(--blue-700);}
.consent-decline{
  background:transparent;color:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.15);border-radius:var(--r-full);
  padding:8px 14px;font-size:13px;font-family:var(--font-body);
  cursor:pointer;transition:color var(--dur-fast);white-space:nowrap;
}
.consent-decline:hover{color:rgba(255,255,255,0.9);}


/* ─── CASE STUDY MODALS ──────────────────────────────────── */
.cs-modal{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4);
}
.cs-modal[hidden]{display:none;}
.cs-modal.cs-modal--open{display:flex;}

.cs-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(32,33,36,0.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:fadeInBd var(--dur-mid) var(--ease-out) forwards;
}
@keyframes fadeInBd{from{opacity:0;}to{opacity:1;}}

.cs-modal-panel{
  position:relative;z-index:1;
  background:#fff;
  border-radius:16px;
  width:100%;max-width:680px;
  max-height:90vh;
  overflow-y:auto;
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* IE/Edge */
  box-shadow:0 24px 80px rgba(32,33,36,0.22);
  animation:slideUpPanel var(--dur-slow) var(--ease-spring) forwards;
  display:flex;flex-direction:column;
}
.cs-modal-panel::-webkit-scrollbar{display:none;} /* Chrome/Safari */
@keyframes slideUpPanel{from{opacity:0;transform:translateY(32px);}to{opacity:1;transform:translateY(0);}}

.cs-modal-close{
  position:absolute;top:var(--sp-4);right:var(--sp-4);
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--ink-100);color:var(--ink-500);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);
  z-index:2;
}
.cs-modal-close:hover{background:var(--ink-900);color:#fff;}

.cs-modal-header{
  padding:var(--sp-8) var(--sp-8) var(--sp-6);
  border-bottom:1px solid var(--ink-100);
}
.cs-modal-kicker{
  display:flex;gap:var(--sp-2);flex-wrap:wrap;
  margin-bottom:var(--sp-4);
}
.cs-modal-title{
  font-size:clamp(20px,2.8vw,28px);
  line-height:1.15;
  margin-bottom:var(--sp-6);
}
.cs-accent{color:var(--blue-900);}

.cs-modal-hero-stat{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-6);
  background:var(--blue-020);
  border:1px solid var(--blue-100);
  border-radius:var(--r-lg);
}
.cs-hero-number{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(36px,5vw,56px);
  color:var(--blue-900);line-height:1;
  flex-shrink:0;
}
.cs-hero-label{
  font-size:14px;color:var(--ink-700);line-height:1.5;
}
.cs-hero-label span{
  display:block;font-size:12px;color:var(--ink-300);margin-top:4px;
}

.cs-modal-body{
  padding:var(--sp-6) var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-6);
  flex:1;
}

.cs-section-title{
  font-family:var(--font-display);font-weight:600;font-size:15px;
  color:var(--ink-500);letter-spacing:0.05em;text-transform:uppercase;
  margin-bottom:var(--sp-3);
}
.cs-section p{font-size:14px;line-height:1.7;color:var(--ink-700);}

.cs-steps{display:flex;flex-direction:column;gap:var(--sp-4);}
.cs-step{
  display:flex;gap:var(--sp-4);
  padding:var(--sp-4);
  background:var(--ink-050);
  border-radius:var(--r-md);
  border:1px solid var(--ink-100);
}
.cs-step-tag{
  flex-shrink:0;
  padding:4px 10px;
  background:var(--blue-900);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:11px;
  border-radius:var(--r-full);
  height:fit-content;
  letter-spacing:0.04em;
}
.cs-step-tag--teal{background:#0F6E56;}
.cs-step-content{flex:1;}
.cs-step-content strong{
  display:block;font-size:14px;font-weight:600;
  color:var(--ink-900);margin-bottom:var(--sp-2);
}
.cs-step-content p{font-size:13px;line-height:1.65;color:var(--ink-700);}

.cs-result-band{
  display:flex;gap:0;
  background:var(--blue-020);
  border:1px solid var(--blue-100);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.cs-result-band--teal{
  background:var(--tint-teal);
  border-color:#A8D5C5;
}
.cs-result-stat{
  flex:1;padding:var(--sp-4) var(--sp-6);
  display:flex;flex-direction:column;gap:4px;
  text-align:center;
}
.cs-result-num{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(20px,2.5vw,28px);
  color:var(--blue-900);line-height:1;
}
.cs-result-desc{font-size:11px;color:var(--ink-500);line-height:1.4;}
.cs-result-divider{width:1px;background:var(--blue-100);flex-shrink:0;}

.cs-conclusion{
  padding:var(--sp-4) var(--sp-6);
  border-left:3px solid var(--blue-900);
  background:var(--blue-020);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.cs-conclusion p{font-size:14px;font-style:italic;color:var(--ink-700);}

.cs-modal-footer{
  padding:var(--sp-4) var(--sp-8) var(--sp-8);
  border-top:1px solid var(--ink-100);
  display:flex;justify-content:flex-end;
}

/* Prevent body scroll when modal is open */
body.modal-open{overflow:hidden;}

/* Mobile adjustments */
@media(max-width:600px){
  .cs-modal-header{padding:var(--sp-6) var(--sp-6) var(--sp-4);}
  .cs-modal-body{padding:var(--sp-4) var(--sp-6);}
  .cs-modal-footer{padding:var(--sp-4) var(--sp-6) var(--sp-6);justify-content:center;}
  .cs-result-band{flex-direction:column;}
  .cs-result-divider{height:1px;width:auto;}
  .cs-modal-hero-stat{flex-direction:column;text-align:center;gap:var(--sp-2);}
}