/* =========================================================
   AdVantage Media — Premium Design System v2
   Inspired by: Stripe, Linear, Vercel, Framer
   Mesh gradients · Glassmorphism · 3D · Scroll FX
   ========================================================= */

/* --------- Brand tokens (Brand Guidelines — Jelyn Molina, 2025) --------- */
:root{
  /* Primary palette (exact from guideline) */
  --av-blue:        #0D1989;   /* Primary navy */
  --av-blue-2:      #1B27A8;
  --av-blue-3:      #4A5BC9;
  --av-blue-50:     #EAECF7;
  --av-red:         #B40023;   /* Primary red */
  --av-red-2:       #D11A3A;
  --av-red-3:       #FF6B7E;
  --av-sky:         #6B9EBD;   /* Sky blue accent — 3rd brand color */
  --av-sky-2:       #8AB5CE;
  --av-sky-50:      #EEF4F8;
  --av-charcoal:    #1D1E1E;   /* Brand dark */
  --av-black:       #1D1E1E;   /* Aliased to charcoal */
  --av-black-2:     #2A2C2C;
  --av-cream:       #FCEFE9;   /* Soft cream from brand */
  --av-white:       #FFFFFF;

  --gray-50:        #F8F9FB;
  --gray-100:       #F1F2F6;
  --gray-200:       #E4E6ED;
  --gray-300:       #CCD0DB;
  --gray-400:       #9098AB;
  --gray-500:       #6B7280;
  --gray-600:       #4B5563;
  --gray-700:       #374151;
  --gray-800:       #1F2937;
  --gray-900:       #0F172A;

  --bg:             #FFFFFF;
  --bg-soft:        #FAFBFE;
  --text:           var(--av-black);
  --text-muted:     var(--gray-600);
  --border:         rgba(15,23,42,0.08);
  --border-strong:  rgba(15,23,42,0.14);

  /* Typography (Cabinet Grotesk = closest free alternative to Creato Display Black) */
  --font-display: 'Cabinet Grotesk','Inter Tight','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-sans: 'Inter Tight','Cabinet Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono: 'JetBrains Mono','Geist Mono',ui-monospace,SFMono-Regular,monospace;

  /* Layout */
  --container: 1240px;
  --container-narrow: 920px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Easings */
  --ease-out: cubic-bezier(.22,.7,.18,1);
  --ease-in:  cubic-bezier(.7,.05,.86,.5);
  --spring:   cubic-bezier(.34,1.56,.64,1);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04);
  --shadow:    0 4px 20px -4px rgba(15,23,42,.08), 0 12px 40px -8px rgba(15,23,42,.06);
  --shadow-lg: 0 24px 60px -16px rgba(15,23,42,.18), 0 8px 24px -8px rgba(15,23,42,.08);
  --shadow-xl: 0 40px 100px -20px rgba(15,23,42,.28), 0 12px 40px -10px rgba(15,23,42,.12);
  --shadow-glow-blue: 0 0 0 1px rgba(26,35,126,.1), 0 8px 32px -4px rgba(26,35,126,.32);
  --shadow-glow-red:  0 0 0 1px rgba(200,16,46,.12), 0 12px 40px -8px rgba(200,16,46,.42);
}

/* --------- Reset & base --------- */
*,*::before,*::after { box-sizing: border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html, body{ overflow-x: clip; }
body{
  margin:0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg,video{ max-width:100%; display:block; }
a{ color: var(--av-blue); text-decoration:none; transition: color .25s var(--ease-out); }
a:hover{ color: var(--av-red); }

h1,h2,h3,h4,h5{
  margin: 0 0 .5em;
  line-height: 1.02;
  font-weight: 900;
  color: var(--av-black);
  letter-spacing: -0.04em;
  font-family: var(--font-display);
}
h1{ font-size: clamp(2.6rem, 6vw, 5.4rem); font-weight: 900; }
h2{ font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; }
h3{ font-size: clamp(1.35rem, 2vw, 1.75rem); }
h4{ font-size: 1.15rem; }
p { margin: 0 0 1rem; }
.muted{ color: var(--text-muted); }

::selection{ background: var(--av-blue); color:#fff; }

/* --------- Helpers --------- */
.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 24px; position:relative; }
.container-narrow{ width:100%; max-width: var(--container-narrow); margin:0 auto; padding: 0 24px; }
.section{ padding: clamp(72px, 9vw, 140px) 0; position:relative; }
.section-tight{ padding: clamp(48px, 6vw, 96px) 0; position:relative; }
.center{ text-align:center; }
.grid{ display:grid; gap: 24px; }
.flex{ display:flex; gap:16px; align-items:center; }
.flex-between{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }

/* --------- Eyebrow / chips --------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--av-blue);
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(26,35,126,.08), rgba(26,35,126,.02));
  border: 1px solid rgba(26,35,126,.18);
  border-radius: 999px;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
}
.eyebrow.red{ color: var(--av-red); background: linear-gradient(135deg, rgba(200,16,46,.08), rgba(200,16,46,.02)); border-color: rgba(200,16,46,.2); }
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background: currentColor;
  box-shadow: 0 0 0 4px currentColor;
  opacity:.4;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ box-shadow: 0 0 0 0 currentColor; opacity:.5; } 50%{ box-shadow: 0 0 0 6px transparent; opacity:.2; } }

/* --------- Gradient text --------- */
.grad-text{
  background: linear-gradient(135deg, var(--av-blue) 0%, var(--av-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.grad-text-blue{
  background: linear-gradient(135deg, var(--av-blue) 0%, var(--av-blue-3) 100%);
  -webkit-background-clip: text; background-clip:text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.grad-text-red{
  background: linear-gradient(135deg, var(--av-red) 0%, var(--av-red-3) 100%);
  -webkit-background-clip: text; background-clip:text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* --------- Buttons --------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 24px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .95rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  transition: all .35s var(--ease-out);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -.01em;
  isolation: isolate;
  will-change: transform;
}
.btn::before{
  content:''; position:absolute; inset:0; border-radius: inherit;
  opacity:0; transition: opacity .35s var(--ease-out); z-index:-1;
}
.btn-primary{
  background: linear-gradient(135deg, var(--av-red) 0%, var(--av-red-2) 100%);
  color:#fff;
  box-shadow: var(--shadow-glow-red);
}
.btn-primary::before{
  background: linear-gradient(135deg, var(--av-red-2) 0%, var(--av-red) 100%);
}
.btn-primary:hover{ color:#fff; transform: translateY(-2px); box-shadow: 0 16px 50px -10px rgba(200,16,46,.55); }
.btn-primary:hover::before{ opacity: 1; }
.btn-primary .arrow{ transition: transform .3s var(--spring); }
.btn-primary:hover .arrow{ transform: translateX(4px); }

.btn-secondary{
  background: var(--av-black);
  color:#fff;
  box-shadow: 0 4px 16px -4px rgba(10,14,26,.4);
}
.btn-secondary:hover{ background:#000; color:#fff; transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(0,0,0,.55); }

.btn-ghost{
  background: rgba(255,255,255,.7);
  color: var(--av-black);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover{ background: #fff; border-color: var(--av-black); color: var(--av-black); transform: translateY(-2px); }

.btn-glass{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(20px);
}
.btn-glass:hover{ background: rgba(255,255,255,.16); color:#fff; transform: translateY(-2px); }

.btn-link{
  background: none; padding: 6px 0; border-radius:0;
  color: var(--av-blue); font-weight:700;
  position:relative;
}
.btn-link::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--av-blue), var(--av-red));
  transition: right .35s var(--ease-out);
}
.btn-link:hover{ color: var(--av-red); }
.btn-link:hover::after{ right:0; }

.btn-block{ width:100%; }
.btn-sm{ padding: 10px 18px; font-size:.88rem; }

/* --------- Header / Nav (premium glass) --------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  transition: all .35s var(--ease-out);
}
.site-header.scrolled{ background: rgba(255,255,255,.92); box-shadow: 0 1px 0 var(--border), 0 4px 24px -8px rgba(15,23,42,.06); }
.nav{ display:flex; align-items:center; justify-content:space-between; height: 76px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height: 38px; width:auto; transition: transform .35s var(--spring); }
.brand:hover img{ transform: rotate(-6deg) scale(1.05); }

.nav-links{
  display:flex; gap: 6px; list-style:none; margin:0; padding:0;
  background: rgba(241,242,246,.5);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}
.nav-links a{
  display:inline-flex; align-items:center; padding: 8px 16px;
  color: var(--gray-700); font-weight: 500; font-size: .92rem;
  border-radius: 999px; transition: all .25s var(--ease-out);
}
.nav-links a:hover{ color: var(--av-blue); background: #fff; box-shadow: var(--shadow-xs); }
.nav-links a.active{ color: #fff; background: var(--av-black); }

.nav-cta{ display:flex; gap:10px; align-items:center; }
.nav-toggle{
  display:none; background:transparent; border:1px solid var(--border-strong);
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer; align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:18px; height:2px; background: var(--av-black); position:relative; transition: all .3s; }
.nav-toggle span::before, .nav-toggle span::after{ content:''; position:absolute; left:0; width:18px; height:2px; background: var(--av-black); transition: all .3s; }
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.site-header.open .nav-toggle span{ background: transparent; }
.site-header.open .nav-toggle span::before{ top:0; transform: rotate(45deg); }
.site-header.open .nav-toggle span::after{ top:0; transform: rotate(-45deg); }

@media (max-width: 980px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position: fixed; top:76px; left:16px; right:16px;
    flex-direction: column; align-items: stretch;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(20px);
    padding: 16px;
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    transform: translateY(-12px) scale(.98);
    opacity:0; pointer-events: none;
    transition: all .35s var(--ease-out);
  }
  .nav-links a{ width: 100%; padding: 14px 18px; }
  .site-header.open .nav-links{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }
  .nav-cta .btn:not(.btn-primary){ display:none; }
}

/* --------- Hero (cinematic) --------- */
.hero{
  position: relative;
  padding: clamp(80px, 11vw, 160px) 0 clamp(80px, 10vw, 140px);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 80% 0%, rgba(26,35,126,.18) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(200,16,46,.12) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(74,91,201,.18) 0%, transparent 50%),
    linear-gradient(180deg, #fff 0%, #FAFBFE 100%);
}
.hero-bg::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 90%);
}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(15,23,42,.4) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity:.04;
  mask-image: radial-gradient(ellipse 50% 50% at 80% 30%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 80% 30%, #000 10%, transparent 70%);
}

.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:center; }
@media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; gap: 40px; } }

.hero h1{ position: relative; }
.hero h1 .word{ display: inline-block; opacity:0; transform: translateY(36px) rotate(-2deg); animation: heroIn .9s var(--ease-out) forwards; }
.hero h1 .word:nth-child(1){ animation-delay: .1s; }
.hero h1 .word:nth-child(2){ animation-delay: .18s; }
.hero h1 .word:nth-child(3){ animation-delay: .26s; }
.hero h1 .word:nth-child(4){ animation-delay: .34s; }
.hero h1 .word:nth-child(5){ animation-delay: .42s; }
.hero h1 .word:nth-child(6){ animation-delay: .50s; }
.hero h1 .word:nth-child(7){ animation-delay: .58s; }
.hero h1 .word:nth-child(8){ animation-delay: .66s; }
.hero h1 .word:nth-child(9){ animation-delay: .74s; }
@keyframes heroIn{ to{ opacity:1; transform: translateY(0) rotate(0); } }

.hero p.lead{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--gray-700); max-width: 56ch; margin-top: 18px;
  opacity:0; transform: translateY(20px); animation: heroIn .9s .8s var(--ease-out) forwards;
}
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 32px; opacity:0; transform: translateY(20px); animation: heroIn .9s 1s var(--ease-out) forwards; }
.hero-meta{ margin-top: 20px; color: var(--gray-500); font-size:.9rem; display:flex; align-items:center; gap:10px; opacity:0; animation: heroIn .9s 1.15s var(--ease-out) forwards; }
.hero-meta .check-mini{
  display:inline-flex; align-items:center; gap:6px; color: var(--gray-700); font-weight: 500;
}
.hero-meta .check-mini::before{ content:'✓'; color: var(--av-blue); font-weight: 800; }

/* Hero visual: dashboard mock con perspectiva 3D */
.hero-visual{
  position: relative;
  perspective: 1400px;
  transform-style: preserve-3d;
  opacity:0; transform: translateY(40px); animation: heroIn 1.1s 0.5s var(--ease-out) forwards;
}
.dash{
  position: relative;
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(248,249,251,.92) 100%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(26,35,126,.04);
  padding: 24px;
  transform: rotateY(-8deg) rotateX(6deg);
  transition: transform .8s var(--ease-out);
  backdrop-filter: blur(20px);
}
.dash:hover{ transform: rotateY(-3deg) rotateX(2deg); }
.dash::before{
  content:''; position:absolute; inset:-2px; border-radius: inherit; z-index:-1;
  background: conic-gradient(from 180deg at 50% 50%, var(--av-blue), var(--av-red), var(--av-blue-3), var(--av-blue));
  filter: blur(28px); opacity:.25; animation: spin 12s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.dash-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; padding-bottom:14px; border-bottom: 1px solid var(--border); }
.dash-title{ display:flex; align-items:center; gap:10px; font-weight: 700; color: var(--av-black); font-size:.95rem; letter-spacing:-.01em; }
.dash-title::before{
  content:''; width:10px; height:10px; border-radius:50%;
  background: #16A34A;
  box-shadow: 0 0 0 4px rgba(22,163,74,.18);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse{ 50%{ box-shadow: 0 0 0 8px rgba(22,163,74,0); } }
.dash-tabs{ display:flex; gap:4px; }
.dash-tabs span{ width: 8px; height:8px; border-radius:50%; background: var(--gray-300); }

.dash-stat{
  display:grid; grid-template-columns: 1.4fr 1fr; gap:14px; margin-bottom: 14px;
}
.stat-card{
  background: linear-gradient(180deg, #fff 0%, #FAFBFE 100%);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 18px; position:relative; overflow:hidden;
}
.stat-label{ font-size:.74rem; font-weight: 600; color: var(--gray-500); text-transform:uppercase; letter-spacing:.06em; }
.stat-num{
  font-size: 2.2rem; font-weight: 800;
  letter-spacing: -.03em;
  color: var(--av-black);
  font-variant-numeric: tabular-nums;
  display:flex; align-items:baseline; gap:8px; margin-top:4px;
}
.stat-num .delta{ font-size:.78rem; padding: 3px 8px; border-radius: 999px; font-weight: 800; background: rgba(22,163,74,.12); color:#15803D; letter-spacing:0; }
.stat-num .delta.red{ background: rgba(200,16,46,.12); color: var(--av-red); }
.spark{ position:absolute; right:18px; top:18px; bottom:18px; width: 80px; }

.dash-bars{
  background: linear-gradient(180deg, #fff 0%, #FAFBFE 100%);
  border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px;
}
.dash-bars .row{ display:grid; grid-template-columns: 90px 1fr 60px; align-items:center; gap:12px; padding: 6px 0; font-size:.86rem; }
.dash-bars .row .name{ color: var(--gray-700); font-weight:600; display:flex; align-items:center; gap:6px; }
.dash-bars .row .name::before{ content:''; width:8px; height:8px; border-radius:50%; }
.dash-bars .row.blue .name::before{ background: var(--av-blue); }
.dash-bars .row.red .name::before{ background: var(--av-red); }
.dash-bars .row.green .name::before{ background: #16A34A; }
.bar{ height: 8px; background: var(--gray-100); border-radius: 8px; overflow:hidden; }
.bar i{ display:block; height:100%; border-radius: 8px; transform: scaleX(0); transform-origin: left; animation: barIn 1.4s 1.2s var(--ease-out) forwards; }
.dash-bars .blue i{ background: linear-gradient(90deg, var(--av-blue), var(--av-blue-3)); }
.dash-bars .red i{ background: linear-gradient(90deg, var(--av-red), var(--av-red-2)); }
.dash-bars .green i{ background: linear-gradient(90deg, #16A34A, #4ADE80); }
@keyframes barIn{ to{ transform: scaleX(1); } }
.dash-bars .row .val{ text-align:right; font-weight: 700; color: var(--av-black); font-variant-numeric: tabular-nums; }

.dash-foot{
  margin-top: 14px;
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(135deg, var(--av-blue) 0%, var(--av-blue-2) 100%);
  color:#fff; border-radius: var(--r); padding: 14px 18px;
  position:relative; overflow:hidden;
}
.dash-foot::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 100% 0%, rgba(255,107,126,.4), transparent 50%);
}
.dash-foot strong{ font-size:.95rem; }
.dash-foot small{ opacity:.8; font-size:.78rem; }
.dash-chip{
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.24);
  padding: 6px 12px; border-radius: 999px; font-size:.78rem; font-weight: 600;
  display:inline-flex; align-items:center; gap:6px;
  z-index:1;
}
.dash-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:#4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.3); }

/* Floating badges around dash */
.float-badge{
  position:absolute; background: #fff; border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-lg);
  font-size:.82rem; font-weight: 600; display:flex; align-items:center; gap:10px;
  animation: float 5s ease-in-out infinite;
}
.float-badge .ico{
  width: 32px; height:32px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
}
.float-badge.b1{ top: -16px; right: -28px; animation-delay: .2s; }
.float-badge.b1 .ico{ background: rgba(26,35,126,.1); color: var(--av-blue); }
.float-badge.b2{ bottom: -20px; left: -32px; animation-delay: 1.6s; }
.float-badge.b2 .ico{ background: rgba(200,16,46,.1); color: var(--av-red); }
@media (max-width: 980px){ .float-badge{ display:none; } }
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

/* --------- Marquee (logos / industries ticker) --------- */
.marquee{
  position: relative; overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fff 0%, #FAFBFE 100%);
  padding: 28px 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-label{ text-align:center; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color: var(--gray-500); font-weight:700; margin-bottom: 18px; }
.marquee-track{
  display:flex; gap: 56px; width: max-content;
  animation: scrollX 40s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-item{
  display:flex; align-items:center; gap:10px;
  font-weight: 700; color: var(--gray-700); font-size: 1.05rem;
  white-space: nowrap;
}
.marquee-item .ico{
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(26,35,126,.06); color: var(--av-blue);
  display:inline-flex; align-items:center; justify-content:center;
}
.marquee-item .dot{ width: 4px; height:4px; border-radius:50%; background: var(--gray-400); margin: 0 12px; }
@keyframes scrollX{ to{ transform: translateX(-50%); } }

/* --------- Trust grid (alt to marquee) --------- */
.trust-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 980px){ .trust-grid{ grid-template-columns: repeat(2,1fr); } }
.trust-item{
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding: 16px 14px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--r); transition: all .3s var(--ease-out);
}
.trust-item:hover{ border-color: var(--av-blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.trust-item .ico{
  width:36px; height:36px; border-radius:10px;
  background: rgba(26,35,126,.08); display:inline-flex; align-items:center; justify-content:center;
  color: var(--av-blue);
}
.trust-item .name{ font-weight:600; font-size:.92rem; color: var(--av-black); }

/* --------- Stats counters --------- */
.stats{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 24px;
  padding: 32px; background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}
@media (max-width: 760px){ .stats{ grid-template-columns: repeat(2,1fr); } }
.stat{
  display:flex; flex-direction:column; gap:6px; padding: 8px 16px;
  border-right: 1px solid var(--border);
}
.stat:last-child{ border-right: 0; }
@media (max-width: 760px){ .stat{ border-right:0; border-bottom: 1px solid var(--border); padding-bottom: 16px; } .stat:last-child{ border-bottom:0; } }
.stat .num{
  font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 900; letter-spacing:-.04em;
  background: linear-gradient(135deg, var(--av-blue), var(--av-red));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  font-variant-numeric: tabular-nums;
}
.stat .lbl{ color: var(--gray-600); font-size:.92rem; font-weight:500; }

/* --------- Pain section (problem) --------- */
.problem{
  position: relative; overflow:hidden;
}
.problem-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(200,16,46,.08), transparent 60%),
    var(--bg-soft);
}
.pain-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap: 14px;
}
@media (max-width: 720px){ .pain-grid{ grid-template-columns: 1fr; } }
.pain{
  display:flex; align-items:flex-start; gap:14px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--border);
  padding: 20px 22px; border-radius: var(--r);
  backdrop-filter: blur(16px);
  transition: all .3s var(--ease-out);
  position:relative; overflow:hidden;
}
.pain::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width: 3px;
  background: linear-gradient(180deg, var(--av-red), var(--av-red-2));
  transform: scaleY(0); transform-origin:top; transition: transform .4s var(--ease-out);
}
.pain:hover{ border-color: var(--border-strong); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.pain:hover::before{ transform: scaleY(1); }
.pain .x{
  flex:none; width: 28px; height: 28px; border-radius:50%;
  background: linear-gradient(135deg, var(--av-red), var(--av-red-2));
  color: #fff; display:inline-flex; align-items:center; justify-content:center;
  font-weight: 800; box-shadow: 0 4px 12px -2px rgba(200,16,46,.4);
  font-size:.86rem;
}
.pain p{ margin:0; color: var(--gray-700); font-weight: 500; }

/* --------- Bento grid (services / differentiators) --------- */
.bento{
  display:grid; gap: 18px;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
}
@media (max-width: 920px){ .bento{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .bento{ grid-template-columns: 1fr; } }
.bento-card{
  position: relative; overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: all .4s var(--ease-out);
  display:flex; flex-direction:column; gap: 14px;
  isolation: isolate;
}
.bento-card::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(26,35,126,.08), transparent 50%);
  opacity:0; transition: opacity .35s var(--ease-out);
}
.bento-card:hover{ transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.bento-card:hover::before{ opacity:1; }
.bento-card .ico{
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(26,35,126,.08), rgba(26,35,126,.02));
  border: 1px solid rgba(26,35,126,.12);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--av-blue);
  position: relative; overflow:hidden;
}
.bento-card .ico::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 50%);
}
.bento-card.red .ico{ background: linear-gradient(135deg, rgba(200,16,46,.08), rgba(200,16,46,.02)); border-color: rgba(200,16,46,.18); color: var(--av-red); }
.bento-card h3{ margin:0; font-size: 1.4rem; }
.bento-card p{ margin:0; color: var(--gray-600); font-size: 1rem; line-height: 1.55; }
.bento-card .meta{ margin-top: auto; font-size: .85rem; color: var(--gray-500); display:flex; align-items:center; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--border); }

/* Bento layout (asymmetric) */
.bento-card.span-3{ grid-column: span 3; }
.bento-card.span-4{ grid-column: span 4; }
.bento-card.span-2{ grid-column: span 2; }
.bento-card.span-6{ grid-column: span 6; }
.bento-card.row-2{ grid-row: span 2; }
@media (max-width: 920px){
  .bento-card.span-3,.bento-card.span-4,.bento-card.span-2,.bento-card.span-6{ grid-column: span 2; }
  .bento-card.row-2{ grid-row: auto; }
}
@media (max-width: 540px){
  .bento-card.span-3,.bento-card.span-4,.bento-card.span-2,.bento-card.span-6{ grid-column: span 1; }
}

/* Featured bento (dark) */
.bento-card.dark{
  background: linear-gradient(135deg, var(--av-black) 0%, var(--av-black-2) 100%);
  color:#fff; border-color: rgba(255,255,255,.06);
}
.bento-card.dark::before{ background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(74,91,201,.18), transparent 60%); }
.bento-card.dark h3, .bento-card.dark p{ color:#fff; }
.bento-card.dark p{ color: rgba(255,255,255,.7); }
.bento-card.dark .ico{ background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border-color: rgba(255,255,255,.12); color:#fff; }

/* --------- Service detail cards (full-width tiles) --------- */
.svc-tile{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start;
  padding: 56px;
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  position: relative; overflow: hidden;
  transition: all .4s var(--ease-out);
}
.svc-tile + .svc-tile{ margin-top: 24px; }
@media (max-width: 920px){ .svc-tile{ grid-template-columns: 1fr; gap: 28px; padding: 32px; } }
.svc-tile::before{
  content:''; position:absolute; top:0; right:0; width: 50%; height: 100%;
  background: radial-gradient(ellipse at 100% 50%, rgba(26,35,126,.05), transparent 70%);
  pointer-events: none;
}
.svc-tile.red::before{ background: radial-gradient(ellipse at 100% 50%, rgba(200,16,46,.05), transparent 70%); }
.svc-tile h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); }
.svc-tile h2 .num{
  display: inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--av-blue), var(--av-blue-2));
  color: #fff; font-size: 1rem; font-weight: 800; margin-right: 12px; vertical-align: middle;
  box-shadow: 0 8px 24px -6px rgba(26,35,126,.35);
}
.svc-tile.red h2 .num{ background: linear-gradient(135deg, var(--av-red), var(--av-red-2)); box-shadow: 0 8px 24px -6px rgba(200,16,46,.4); }
.svc-tile .key{
  margin-top: 18px; padding: 16px 20px;
  background: rgba(26,35,126,.05); border-left: 3px solid var(--av-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size:.95rem;
}
.svc-tile.red .key{ background: rgba(200,16,46,.05); border-left-color: var(--av-red); }
.svc-tile .timeline{
  display:inline-flex; align-items:center; gap:8px; margin-top: 16px;
  padding: 10px 16px; background: #fff; border: 1px solid var(--border); border-radius: 999px;
  color: var(--av-blue); font-weight: 700; font-size:.92rem;
}
.svc-tile.red .timeline{ color: var(--av-red); }

.included{
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
}
.included h4{
  font-size:.78rem; letter-spacing:.12em; text-transform: uppercase;
  font-weight: 800; color: var(--av-blue); margin: 0 0 16px;
}
.svc-tile.red .included h4{ color: var(--av-red); }
.included ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap: 12px; }
.included ul li{
  display:flex; gap: 12px; align-items:flex-start; font-size:.95rem; color: var(--gray-700);
}
.included ul li::before{
  content:''; flex:none; width: 20px; height: 20px; border-radius: 6px;
  background: linear-gradient(135deg, rgba(26,35,126,.1), rgba(26,35,126,.04));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231A237E'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 011.4-1.4l3.8 3.8 6.8-6.8a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 14px; background-repeat:no-repeat; background-position:center;
  margin-top: 2px;
}

/* --------- Steps (timeline vertical) --------- */
.steps{
  position: relative; max-width: 920px; margin: 0 auto;
}
.steps::before{
  content:''; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px;
  background: linear-gradient(180deg, var(--av-blue), var(--av-red));
  border-radius: 2px;
}
@media (max-width: 720px){ .steps::before{ left: 22px; } }
.step{
  display:grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start;
  padding: 12px 0 36px;
  position: relative;
}
.step:last-child{ padding-bottom: 0; }
.step .badge{
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--av-blue);
  color: var(--av-blue);
  display: inline-flex; align-items:center; justify-content:center;
  font-weight: 900; font-size: 1.25rem;
  position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--bg);
}
.step:nth-child(2) .badge{ border-color: var(--av-red-2); color: var(--av-red); }
.step:nth-child(3) .badge{ border-color: var(--av-red); color: var(--av-red); background: var(--av-red); color: #fff; box-shadow: 0 0 0 6px var(--bg), 0 8px 24px -6px rgba(200,16,46,.4); }
@media (max-width: 720px){ .step{ grid-template-columns: 46px 1fr; gap: 16px; } .step .badge{ width:46px; height:46px; font-size: 1.05rem; } }

.step .body{
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px 28px; transition: all .35s var(--ease-out);
}
.step .body:hover{ box-shadow: var(--shadow-lg); border-color: var(--border-strong); transform: translateX(4px); }
.step h3{ margin: 0 0 8px; font-size: 1.3rem; }
.step p{ margin: 0; color: var(--gray-600); }

/* --------- Pricing toggle (animated) --------- */
.toggle-wrap{
  display:flex; justify-content: center; align-items: center; gap: 14px;
  margin: 24px 0 40px; flex-wrap: wrap;
}
.toggle{
  display:inline-flex; padding: 5px;
  background: rgba(241,242,246,.7);
  border: 1px solid var(--border);
  border-radius: 999px;
  position: relative; overflow:hidden;
  backdrop-filter: blur(10px);
}
.toggle button{
  position: relative; z-index: 1;
  border: 0; background: transparent; padding: 12px 24px; border-radius: 999px;
  font-weight: 700; color: var(--gray-600); cursor: pointer;
  font-size: .92rem; transition: color .3s var(--ease-out);
  letter-spacing: -.01em;
}
.toggle button.active{ color: #fff; }
.toggle .pill{
  position: absolute; top: 5px; bottom: 5px;
  background: linear-gradient(135deg, var(--av-blue), var(--av-blue-2));
  border-radius: 999px; z-index: 0;
  transition: all .45s var(--spring);
  box-shadow: var(--shadow-glow-blue);
}
.save-pill{
  background: linear-gradient(135deg, rgba(200,16,46,.1), rgba(200,16,46,.05));
  border: 1px solid rgba(200,16,46,.2);
  color: var(--av-red);
  font-size: .82rem; font-weight: 800;
  padding: 8px 14px; border-radius: 999px;
  display:inline-flex; align-items:center; gap:6px;
  letter-spacing: .02em;
}
.save-pill::before{ content:'✦'; }

/* --------- Plans (premium cards) --------- */
.plans{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: stretch;
}
@media (max-width: 980px){ .plans{ grid-template-columns: 1fr; max-width: 460px; margin:0 auto; } }
.plan{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  transition: all .4s var(--ease-out);
  isolation: isolate;
}
.plan:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.plan.popular{
  border-color: transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, var(--av-blue), var(--av-red)) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-xl);
  transform: translateY(-6px);
}
.plan.popular::before{
  content:'★ Most popular'; position:absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--av-blue), var(--av-blue-2));
  color: #fff; padding: 7px 16px; border-radius: 999px;
  font-size: .76rem; font-weight: 800; letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 8px 24px -4px rgba(26,35,126,.45);
}
.plan-name{ font-weight: 700; color: var(--av-blue); font-size: 1.05rem; letter-spacing: -.01em; }
.plan-price{
  display: flex; align-items: baseline; gap: 6px;
  transition: transform .4s var(--spring);
}
.plan-price .num{
  font-size: 3rem; font-weight: 900; letter-spacing: -.04em;
  color: var(--av-black);
  font-variant-numeric: tabular-nums;
}
.plan-price .per{ color: var(--gray-500); font-weight: 500; font-size: .95rem; }
.plan-save{ font-size: .85rem; color: var(--av-red); font-weight: 700; }
.plan-desc{ color: var(--gray-600); font-size: .95rem; }
.plan ul{
  margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px;
  border-top: 1px dashed var(--border); padding-top: 18px;
}
.plan ul li{
  display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--gray-700);
}
.plan ul li::before{
  content:''; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(26,35,126,.12), rgba(26,35,126,.04));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231A237E'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 011.4-1.4l3.8 3.8 6.8-6.8a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
  margin-top: 2px;
}
.plan .btn{ margin-top: auto; }
.plan-note{ font-size: .8rem; color: var(--gray-500); margin-top: 10px; }

/* --------- FAQ (animated accordion) --------- */
.faq{ display:flex; flex-direction:column; gap: 12px; max-width: 880px; margin: 0 auto; }
.faq-item{
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
  transition: all .35s var(--ease-out);
}
.faq-item[open]{ border-color: var(--border-strong); box-shadow: var(--shadow); }
.faq-q{
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 28px; cursor: pointer; font-weight: 700;
  color: var(--av-black); font-size: 1.05rem; list-style: none;
  user-select: none;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q .plus{
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(26,35,126,.08); color: var(--av-blue);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; transition: all .35s var(--ease-out);
}
.faq-q .plus::before, .faq-q .plus::after{
  content:''; position:absolute; background: currentColor;
  transition: transform .35s var(--ease-out);
}
.faq-q .plus::before{ width: 12px; height: 2px; border-radius: 2px; }
.faq-q .plus::after{ width: 2px; height: 12px; border-radius: 2px; }
.faq-item[open] .faq-q .plus{ background: var(--av-red); color: #fff; transform: rotate(135deg); }
.faq-a{
  padding: 0 28px 24px; color: var(--gray-700); font-size: .98rem;
  animation: faqIn .35s var(--ease-out);
}
@keyframes faqIn{ from{ opacity:0; transform: translateY(-8px); } to{ opacity:1; transform: translateY(0); } }

/* --------- Industries (premium grid) --------- */
.industries{ display:grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
@media (max-width: 980px){ .industries{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 540px){ .industries{ grid-template-columns: repeat(2,1fr); } }
.industry{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 18px; text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  transition: all .4s var(--ease-out);
  position: relative; overflow: hidden;
}
.industry::before{
  content:''; position:absolute; inset:0; z-index:0;
  background: radial-gradient(circle at 50% 0%, rgba(26,35,126,.08), transparent 70%);
  opacity:0; transition: opacity .35s var(--ease-out);
}
.industry > *{ position: relative; z-index: 1; }
.industry:hover{ transform: translateY(-4px); border-color: var(--av-blue); box-shadow: var(--shadow-lg); }
.industry:hover::before{ opacity: 1; }
.industry .ico{
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(26,35,126,.1), rgba(26,35,126,.02));
  border: 1px solid rgba(26,35,126,.12);
  color: var(--av-blue);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .35s var(--spring);
}
.industry:hover .ico{ transform: scale(1.1) rotate(-6deg); background: linear-gradient(135deg, var(--av-blue), var(--av-blue-2)); color: #fff; }
.industry .name{ font-weight: 700; font-size: .95rem; color: var(--av-black); }

/* --------- Cinematic CTA banner (final) --------- */
.cta-banner{
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl);
  padding: clamp(48px, 6vw, 88px);
  background: linear-gradient(135deg, var(--av-black) 0%, #161B33 100%);
  color: #fff;
}
.cta-banner::before{
  content:''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 50% 40% at 80% 0%, rgba(200,16,46,.45), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(26,35,126,.6), transparent 60%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(74,91,201,.4), transparent 60%);
  filter: blur(40px);
  animation: aurora 12s ease-in-out infinite;
}
@keyframes aurora{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(2%, 2%) scale(1.05); }
  66%{ transform: translate(-2%, -1%) scale(.98); }
}
.cta-banner::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 90%);
}
.cta-banner h2{ color: #fff; max-width: 22ch; }
.cta-banner p{ color: rgba(255,255,255,.78); max-width: 60ch; }
.cta-banner .eyebrow{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.85); }

/* --------- Form (glass) --------- */
.form-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  box-shadow: var(--shadow-xl);
}
.form-card h3{ color: #fff; margin: 0 0 6px; font-size: 1.25rem; }
.form-card .muted{ color: rgba(255,255,255,.65); }
.field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label{ font-weight: 600; font-size: .88rem; color: rgba(255,255,255,.85); letter-spacing:-.005em; }
.field input, .field select, .field textarea{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius: 12px; padding: 13px 16px;
  font-size: .95rem; font-family: inherit; color: #fff;
  transition: all .25s var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(255,255,255,.4); }
.field select{ background-color: rgba(255,255,255,.06); color: #fff; }
.field select option{ color: var(--av-black); background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px){ .form-row{ grid-template-columns: 1fr; } }

/* --------- Comparison table --------- */
.compare-wrap{ overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.compare-table{ width: 100%; border-collapse: collapse; min-width: 720px; background: #fff; }
.compare-table th, .compare-table td{
  text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--border); font-size: .95rem;
}
.compare-table thead th{
  font-size: .76rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gray-500); background: var(--bg-soft); font-weight: 800;
}
.compare-table .yes{ color: #15803D; font-weight: 800; }
.compare-table .no{ color: var(--av-red); font-weight: 800; }
.compare-table .av, .compare-table thead th.av{
  background: linear-gradient(135deg, rgba(26,35,126,.04), rgba(26,35,126,.0));
  border-left: 2px solid var(--av-blue);
  font-weight: 700;
}

/* --------- Blog cards --------- */
.blog-filters{ display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 32px; justify-content: center; }
.blog-filters button{
  border: 1px solid var(--border); background: #fff; color: var(--gray-700);
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: all .25s var(--ease-out);
}
.blog-filters button:hover{ border-color: var(--av-blue); color: var(--av-blue); }
.blog-filters button.active{ background: var(--av-black); color: #fff; border-color: var(--av-black); }

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

.post-card{
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: all .35s var(--ease-out);
  position: relative;
}
.post-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.post-cover{
  position: relative; height: 220px;
  background-size: cover; background-position: center;
  overflow:hidden;
}
.post-cover::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.post-cover.gradient-1{ background: linear-gradient(135deg, var(--av-blue) 0%, var(--av-blue-3) 100%); }
.post-cover.gradient-2{ background: linear-gradient(135deg, var(--av-red) 0%, var(--av-red-2) 100%); }
.post-cover.gradient-3{ background: linear-gradient(135deg, var(--av-blue) 0%, var(--av-red) 100%); }
.post-cover.gradient-4{ background: linear-gradient(135deg, var(--av-charcoal) 0%, var(--av-blue) 100%); }
.post-cover.gradient-5{ background: linear-gradient(135deg, var(--av-sky) 0%, var(--av-blue) 100%); }
.post-cover.gradient-6{ background: linear-gradient(135deg, var(--av-red) 0%, var(--av-blue) 100%); }
.post-cover.with-photo{ position:relative; }
.post-cover.with-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.post-card:hover .post-cover.with-photo img{ transform: scale(1.06); }
.post-cover.with-photo::before{
  content:''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13,25,137,.55) 90%);
  z-index: 1;
}
.post-cover.with-photo .post-tag{ z-index: 2; }
.post-tag{
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,.95); color: var(--av-blue);
  padding: 6px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.post-body{ padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-title{ font-weight: 800; color: var(--av-black); font-size: 1.15rem; line-height: 1.3; letter-spacing:-.02em; }
.post-excerpt{ color: var(--gray-600); font-size: .95rem; }
.post-meta{ display: flex; gap: 10px; align-items: center; color: var(--gray-500); font-size: .82rem; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border); }

/* --------- Footer (premium dark) --------- */
.site-footer{
  background: linear-gradient(180deg, #0A0E1A 0%, #06080F 100%);
  color: #c9cfde;
  padding: 72px 0 28px;
  position: relative; overflow: hidden;
}
.site-footer::before{
  content:''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 80%; height: 80%;
  background: radial-gradient(ellipse, rgba(26,35,126,.4), transparent 60%);
  filter: blur(80px); pointer-events: none;
}
.site-footer .container{ position: relative; z-index: 1; }
.site-footer a{ color: #c9cfde; }
.site-footer a:hover{ color: #fff; }
.footer-grid{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px;
}
@media (max-width: 920px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand img{ height: 44px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-tag{ color: #93a1bb; max-width: 36ch; }
.footer-col h5{ color: #fff; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; margin: 6px 0 16px; font-weight: 800; }
.footer-col ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.footer-bottom{
  margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .82rem; color: #93a1bb;
}

/* --------- Sticky mobile CTA --------- */
.sticky-cta{
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  background: rgba(10,14,26,.92);
  color: #fff; padding: 14px 18px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(16px);
  transform: translateY(150%); transition: transform .45s var(--spring);
  border: 1px solid rgba(255,255,255,.1);
}
.sticky-cta.visible{ transform: translateY(0); }
.sticky-cta span{ font-size: .85rem; font-weight: 600; }
@media (min-width: 720px){ .sticky-cta{ display:none; } }

/* --------- Reveal-on-scroll --------- */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal.delay-1{ transition-delay: .1s; }
.reveal.delay-2{ transition-delay: .2s; }
.reveal.delay-3{ transition-delay: .3s; }
.reveal.delay-4{ transition-delay: .4s; }
.reveal.scale{ transform: translateY(28px) scale(.97); }
.reveal.scale.in{ transform: translateY(0) scale(1); }

/* --------- Page hero (inner pages) --------- */
.page-hero{
  position: relative; overflow: hidden;
  padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 5vw, 70px);
}
.page-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(26,35,126,.14), transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(200,16,46,.08), transparent 60%),
    var(--bg);
}
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 90%);
}
.page-hero .lead{ font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--gray-700); max-width: 60ch; margin: 18px auto 0; }
.page-hero.center{ text-align: center; }

/* --------- Values (about page) --------- */
.values{ display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 920px){ .values{ grid-template-columns: 1fr; } }
.value{
  padding: 32px;
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  border-radius: var(--r-lg); border: 1px solid var(--border);
  transition: all .35s var(--ease-out);
  position: relative; overflow:hidden;
}
.value::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width: 4px;
  background: linear-gradient(180deg, var(--av-blue), var(--av-red));
}
.value:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.value h4{ color: var(--av-black); margin-bottom: 10px; font-size: 1.15rem; }

.states{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.state{
  background: linear-gradient(135deg, rgba(26,35,126,.06), rgba(26,35,126,.02));
  color: var(--av-blue); border: 1px solid rgba(26,35,126,.15);
  font-size: .82rem; font-weight: 700;
  padding: 8px 14px; border-radius: 999px;
}

/* --------- Custom scrollbar (subtle) --------- */
@media (pointer: fine){
  ::-webkit-scrollbar{ width: 10px; height: 10px; }
  ::-webkit-scrollbar-track{ background: var(--bg); }
  ::-webkit-scrollbar-thumb{ background: var(--gray-300); border-radius: 999px; border: 2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover{ background: var(--gray-400); }
}

/* =========================================================
   ===== v3 PREMIUM LAYER — Linear/Vercel-tier features =====
   ========================================================= */

/* --------- Scroll progress indicator --------- */
.scroll-progress{
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  background: linear-gradient(90deg, var(--av-blue), var(--av-red), var(--av-blue-3));
  background-size: 200% 100%;
  transform-origin: left; transform: scaleX(0);
  transition: transform .12s linear;
  animation: progressGrad 4s linear infinite;
  pointer-events: none;
}
@keyframes progressGrad{ to{ background-position: 200% 0; } }

/* --------- Custom cursor (desktop only) --------- */
.cursor-dot, .cursor-ring{
  position: fixed; top: 0; left: 0; pointer-events: none;
  z-index: 9999; mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 0;
  transition: opacity .2s var(--ease-out);
}
.cursor-dot.ready, .cursor-ring.ready{ opacity: 1; }
.cursor-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
}
.cursor-ring{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid #fff;
  transition: width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.cursor-ring.hover{ width: 60px; height: 60px; background: rgba(255,255,255,.05); }
.cursor-ring.click{ width: 30px; height: 30px; }
@media (pointer: coarse){ .cursor-dot, .cursor-ring{ display: none; } }
body.has-custom-cursor, body.has-custom-cursor *{ cursor: none !important; }
body.has-custom-cursor input[type="text"], body.has-custom-cursor input[type="email"], body.has-custom-cursor input[type="tel"], body.has-custom-cursor textarea{ cursor: text !important; }

/* --------- Aurora hero canvas --------- */
.hero-aurora{
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: .9;
}

/* --------- Hero rotating ring badge --------- */
.hero-ring{
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 20px 8px 8px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 24px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}
.hero-ring .ring-iso{
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--border);
  flex: none;
}
.hero-ring .ring-iso img{ width: 24px; height: 24px; object-fit: contain; }
.hero-ring .ring-iso::after{
  content:''; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--av-blue), var(--av-red), var(--av-blue-3), var(--av-blue));
  z-index: -1; animation: spin 6s linear infinite;
}
.hero-ring .ring-text{
  font-size: .82rem; font-weight: 600; color: var(--av-black); letter-spacing: -.005em;
  display: flex; align-items: center; gap: 8px;
}
.hero-ring .live-dot{
  width: 8px; height: 8px; border-radius: 50%; background: #16A34A;
  box-shadow: 0 0 0 4px rgba(22,163,74,.18);
  animation: livePulse 1.6s ease-in-out infinite;
  flex: none;
}

/* --------- Hero floating activity toasts --------- */
.toast-stack{
  position: absolute; left: -32px; top: 38%; z-index: 2;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
@media (max-width: 980px){ .toast-stack{ display: none; } }
.toast{
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  display: flex; align-items: center; gap: 12px;
  min-width: 220px;
  font-size: .82rem;
  opacity: 0; transform: translateX(-20px) scale(.95);
  animation: toastIn .6s var(--spring) forwards;
}
.toast.t1{ animation-delay: 1.2s; }
.toast.t2{ animation-delay: 2.2s; }
.toast.t3{ animation-delay: 3.2s; }
.toast .ico{
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.toast.green .ico{ background: rgba(22,163,74,.12); color: #15803D; }
.toast.blue .ico{ background: rgba(26,35,126,.1); color: var(--av-blue); }
.toast.red .ico{ background: rgba(200,16,46,.1); color: var(--av-red); }
.toast .meta{ font-size: .7rem; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.toast strong{ display: block; color: var(--av-black); font-weight: 700; }
@keyframes toastIn{
  0%{ opacity: 0; transform: translateX(-30px) scale(.92); }
  60%{ opacity: 1; transform: translateX(4px) scale(1.02); }
  100%{ opacity: 1; transform: translateX(0) scale(1); }
}

/* --------- Logo wall (clients section) --------- */
.logo-wall{
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  padding: 28px;
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}
@media (max-width: 920px){ .logo-wall{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 540px){ .logo-wall{ grid-template-columns: repeat(2,1fr); } }
.logo-cell{
  height: 80px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r); position: relative; overflow: hidden;
  transition: all .35s var(--ease-out);
}
.logo-cell:hover{ background: rgba(26,35,126,.04); }
.logo-cell .mono{
  font-weight: 800; letter-spacing: -.04em; color: var(--gray-400);
  font-size: 1.05rem; transition: color .3s var(--ease-out);
  display: flex; align-items: center; gap: 8px;
}
.logo-cell:hover .mono{ color: var(--av-black); }
.logo-cell .mono .badge{
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gray-300), var(--gray-200));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800;
  transition: all .3s var(--ease-out);
}
.logo-cell:hover .mono .badge{
  background: linear-gradient(135deg, var(--av-blue), var(--av-red));
  transform: rotate(-6deg);
}

/* --------- ROI Calculator --------- */
.roi-card{
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background:
    linear-gradient(135deg, rgba(13,25,137,.94) 0%, rgba(29,30,30,.92) 100%),
    url('https://images.pexels.com/photos/590016/pexels-photo-590016.jpeg?auto=compress&cs=tinysrgb&w=1400&h=600&fit=crop') center/cover;
  color: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  position: relative;
  isolation: isolate;
}
.roi-card::before{
  content:''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(200,16,46,.32), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(74,91,201,.36), transparent 60%);
  filter: blur(40px);
  animation: aurora 14s ease-in-out infinite;
}
@media (max-width: 920px){ .roi-card{ grid-template-columns: 1fr; } }
.roi-inputs{
  padding: clamp(28px, 4vw, 48px);
  border-right: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 920px){ .roi-inputs{ border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); } }
.roi-inputs h3{ color: #fff; font-size: 1.5rem; margin-bottom: 6px; }
.roi-inputs .muted{ color: rgba(255,255,255,.6); font-size: .92rem; }
.roi-input{
  margin-top: 22px;
}
.roi-input label{
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .85rem; color: rgba(255,255,255,.85); font-weight: 600; margin-bottom: 8px;
}
.roi-input label .val{
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: #fff;
}
.roi-input input[type="range"]{
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.1);
  outline: none;
  cursor: pointer;
}
.roi-input input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--av-red), var(--av-red-2));
  border: 2px solid #fff;
  cursor: grab;
  box-shadow: 0 4px 16px rgba(200,16,46,.5);
  transition: transform .2s var(--ease-out);
}
.roi-input input[type="range"]::-webkit-slider-thumb:hover{ transform: scale(1.15); }
.roi-input input[type="range"]::-moz-range-thumb{
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--av-red), var(--av-red-2));
  border: 2px solid #fff; cursor: grab;
  box-shadow: 0 4px 16px rgba(200,16,46,.5);
}
.roi-industries{
  display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.roi-industries button{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  padding: 6px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: all .25s var(--ease-out);
}
.roi-industries button:hover{ background: rgba(255,255,255,.1); color: #fff; }
.roi-industries button.active{
  background: linear-gradient(135deg, var(--av-red), var(--av-red-2));
  border-color: transparent;
  color: #fff;
}

.roi-results{
  padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
}
.roi-results .label{
  font-size: .76rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.roi-results .big{
  font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -.04em;
  background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.roi-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.roi-mini{
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r); padding: 16px;
}
.roi-mini .num{
  font-size: 1.8rem; font-weight: 800; color: #fff; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.roi-mini .lbl{ font-size: .82rem; color: rgba(255,255,255,.6); margin-top: 2px; }
.roi-disclaimer{ font-size: .72rem; color: rgba(255,255,255,.4); margin-top: auto; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,.08); }

/* --------- Testimonials carousel --------- */
.testimonials{ position: relative; }
.testimonial-track{
  display: flex; gap: 22px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 24px;
  scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar{ display: none; }
.testimonial{
  flex: 0 0 calc(33.333% - 16px);
  min-width: 320px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  transition: all .35s var(--ease-out);
  position: relative;
}
.testimonial::before{
  content: '"';
  position: absolute; top: 12px; right: 22px;
  font-size: 4rem; line-height: 1;
  color: var(--av-blue-50); font-family: serif; font-weight: 900;
}
.testimonial:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.testimonial .stars{ display: inline-flex; gap: 2px; color: #F59E0B; }
.testimonial blockquote{
  margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--gray-800); font-weight: 500;
}
.testimonial .author{
  display: flex; align-items: center; gap: 12px; margin-top: auto;
  padding-top: 16px; border-top: 1px dashed var(--border);
}
.testimonial .avatar{
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--av-blue), var(--av-red));
  font-size: 1rem; flex: none;
}
.testimonial .who strong{ display: block; color: var(--av-black); font-weight: 700; font-size: .95rem; }
.testimonial .who span{ display: block; color: var(--gray-500); font-size: .82rem; }

.car-controls{
  display: flex; gap: 10px; justify-content: center; margin-top: 18px;
}
.car-btn{
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border-strong);
  color: var(--av-black); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .25s var(--ease-out);
}
.car-btn:hover{ background: var(--av-black); color: #fff; transform: translateY(-2px); }

/* --------- Spotlight (mouse-follow on dark) --------- */
.spotlight{ position: relative; isolation: isolate; }
.spotlight::after{
  content:''; position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.08), transparent 40%);
  pointer-events: none; z-index: 0; opacity: 0; transition: opacity .35s var(--ease-out);
}
.spotlight:hover::after{ opacity: 1; }
.spotlight > *{ position: relative; z-index: 1; }

/* --------- Card glow halo (Vercel-style) --------- */
.glow-card{
  position: relative; isolation: isolate;
}
.glow-card::before{
  content:''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, transparent, transparent);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude; -webkit-mask-composite: xor;
  opacity: 0; transition: opacity .35s var(--ease-out);
}
.glow-card:hover::before{
  background: conic-gradient(from var(--ang, 0deg), transparent 0deg, var(--av-blue) 60deg, var(--av-red) 120deg, transparent 200deg);
  opacity: 1;
  animation: rotateGlow 4s linear infinite;
}
@keyframes rotateGlow{ to{ --ang: 360deg; } }

/* --------- Char reveal animation (text mask) --------- */
.char-reveal{ display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.1; }
.char-reveal .char{
  display: inline-block; transform: translateY(110%);
  animation: charUp .9s var(--ease-out) forwards;
}
@keyframes charUp{ to{ transform: translateY(0); } }

/* --------- Number scramble --------- */
.scramble{ font-variant-numeric: tabular-nums; }

/* --------- Section eyebrow line decoration --------- */
.section-deco{
  display: flex; align-items: center; gap: 14px;
  justify-content: center;
  margin-bottom: 14px;
}
.section-deco .line{
  height: 1px; width: 56px;
  background: linear-gradient(90deg, transparent, var(--av-blue));
}
.section-deco .line.r{ background: linear-gradient(90deg, var(--av-blue), transparent); }

/* --------- Live activity ribbon --------- */
.live-ribbon{
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(22,163,74,.1), rgba(22,163,74,.04));
  border: 1px solid rgba(22,163,74,.25);
  color: #15803D; font-weight: 700; font-size: .82rem; letter-spacing: -.005em;
  padding: 7px 14px; border-radius: 999px;
}
.live-ribbon::before{
  content:''; width: 7px; height: 7px; border-radius: 50%; background: #16A34A;
  box-shadow: 0 0 0 3px rgba(22,163,74,.25);
  animation: livePulse 1.6s ease-in-out infinite;
}

/* --------- Smooth scroll lerp container (no JS lib) --------- */
html.has-smooth{ scroll-behavior: auto; }

/* =========================================================
   ===== IMAGERY LAYER — photos, photo strips, splits ======
   ========================================================= */

/* ----- Generic photo card ----- */
.photo-card{
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg);
  background: var(--av-charcoal);
  aspect-ratio: 4/5;
  transition: all .45s var(--ease-out);
}
.photo-card img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.photo-card:hover img{ transform: scale(1.06); }
.photo-card::after{
  content:''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13,25,137,.55) 90%, rgba(13,25,137,.85) 100%);
  pointer-events: none;
}
.photo-card .pc-body{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px;
  color: #fff;
}
.photo-card .pc-tag{
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.92); color: var(--av-blue);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  margin-bottom: 10px;
  backdrop-filter: blur(10px);
}
.photo-card h4{ color: #fff; margin: 0 0 4px; font-size: 1.1rem; line-height: 1.2; }
.photo-card .pc-meta{ color: rgba(255,255,255,.72); font-size: .82rem; }

/* ----- Photo strip (horizontal scroll) ----- */
.photo-strip-wrap{
  position: relative;
  padding: 8px 0 0;
  mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent);
}
@media (max-width: 720px){
  /* Full-bleed on mobile for natural touch scroll */
  .photo-strip-wrap{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 8px 16px;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}
.photo-strip{
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 18px;
  scrollbar-width: none;
}
.photo-strip::-webkit-scrollbar{ display: none; }
.photo-strip .photo-card{
  flex: 0 0 280px;
  scroll-snap-align: start;
  aspect-ratio: 3/4;
}
@media (max-width: 720px){ .photo-strip .photo-card{ flex: 0 0 220px; } }

/* ----- Industry photo card (replaces icon-only when desired) ----- */
.industry-photo{
  position: relative; aspect-ratio: 4/5;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--av-charcoal);
  transition: all .4s var(--ease-out);
}
.industry-photo img{
  width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out);
}
.industry-photo:hover img{ transform: scale(1.05); }
.industry-photo::after{
  content:''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,25,137,.05) 0%, rgba(29,30,30,.8) 100%);
}
.industry-photo .label{
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; font-weight: 800; letter-spacing: -.01em;
}
.industry-photo .label .arrow{
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  transition: all .35s var(--spring);
}
.industry-photo:hover .label .arrow{ background: var(--av-red); border-color: var(--av-red); transform: rotate(-45deg); }

/* ----- Industries photo grid ----- */
.industries-photo-grid{
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
@media (max-width: 980px){ .industries-photo-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px){ .industries-photo-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ----- Image + content split ----- */
.split{
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
@media (max-width: 920px){ .split{ grid-template-columns: 1fr; gap: 32px; } }
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }
.split-image{
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4/3.2;
  box-shadow: var(--shadow-xl);
  background: var(--av-charcoal);
}
.split-image img{ width: 100%; height: 100%; object-fit: cover; }
.split-image::after{
  content:''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(13,25,137,.3) 100%);
}
.split-image .badge-float{
  position: absolute; top: 18px; right: 18px;
  background: rgba(255,255,255,.95); border-radius: 14px;
  padding: 12px 16px; font-size: .85rem; font-weight: 800; color: var(--av-blue);
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.split-image .badge-float .live-dot{
  width: 8px; height: 8px; border-radius: 50%; background: #16A34A;
  box-shadow: 0 0 0 4px rgba(22,163,74,.18);
  animation: livePulse 1.6s ease-in-out infinite;
}
.split-image .stat-pill{
  position: absolute; bottom: 18px; left: 18px;
  background: rgba(13,25,137,.92); color: #fff;
  padding: 14px 18px; border-radius: 16px;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.15);
}
.split-image .stat-pill .num{ font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; display: block; line-height: 1; }
.split-image .stat-pill .lbl{ font-size: .76rem; color: rgba(255,255,255,.78); margin-top: 2px; display: block; }

/* ----- Hero photo overlay ----- */
.hero-photo{
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--av-charcoal);
  box-shadow: var(--shadow-xl);
}
.hero-photo img{
  width: 100%; height: 100%; object-fit: cover;
}
.hero-photo::after{
  content:''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(13,25,137,.4) 100%),
    linear-gradient(135deg, transparent 60%, rgba(180,0,35,.2) 100%);
}

/* ----- Background section image ----- */
.bg-image-section{
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
}
.bg-image-section .bg-image{
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.bg-image-section::before{
  content:''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(135deg, rgba(13,25,137,.92) 0%, rgba(29,30,30,.85) 100%);
}
.bg-image-section h1, .bg-image-section h2, .bg-image-section h3{ color: #fff; }
.bg-image-section .muted{ color: rgba(255,255,255,.78); }

/* ----- Service tile with photo (3-col layout) ----- */
.svc-tile.with-photo{
  grid-template-columns: 1fr 0.85fr 0.95fr;
  gap: 36px;
}
@media (max-width: 1080px){ .svc-tile.with-photo{ grid-template-columns: 1fr 1fr; gap: 28px; } .svc-tile.with-photo .svc-tile-photo{ grid-column: 1 / -1; } }
@media (max-width: 920px){ .svc-tile.with-photo{ grid-template-columns: 1fr; } }

/* ----- Service hero side image ----- */
.svc-tile-photo{
  position: relative; aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden;
  background: var(--av-charcoal);
}
.svc-tile-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.svc-tile-photo:hover img{ transform: scale(1.05); }
.svc-tile-photo::after{
  content:''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(29,30,30,.6) 100%);
}
.svc-tile-photo .float-tag{
  position: absolute; top: 18px; left: 18px;
  background: rgba(255,255,255,.95); padding: 8px 14px; border-radius: 999px;
  font-size: .76rem; font-weight: 800; color: var(--av-blue);
  letter-spacing: .04em; text-transform: uppercase;
  backdrop-filter: blur(10px);
}

/* ----- Avatar with photo (testimonials upgrade) ----- */
.avatar-photo{
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  flex: none;
  background: var(--av-charcoal);
  border: 2px solid #fff; box-shadow: var(--shadow-sm);
}
.avatar-photo img{ width: 100%; height: 100%; object-fit: cover; }

/* ----- Floating decorative elements ----- */
.deco-blob{
  position: absolute; pointer-events: none; z-index: -1;
  border-radius: 50%; filter: blur(60px); opacity: .3;
}

/* ----- Sky gradient bg variant ----- */
.bg-sky{
  background: linear-gradient(135deg, var(--av-sky-50) 0%, #fff 50%, var(--av-cream) 100%);
}

/* ----- Image grid (3-col clean mosaic, no gaps) ----- */
.image-mosaic{
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
}
@media (max-width: 920px){ .image-mosaic{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 240px; } }
@media (max-width: 540px){ .image-mosaic{ grid-template-columns: 1fr; grid-auto-rows: 220px; } }
.image-mosaic .photo-card{ aspect-ratio: auto; }
/* Override .tall to keep a clean 3x2 grid (avoids auto-flow gaps with mixed tall items) */
.image-mosaic .photo-card.tall{ grid-row: auto; }

/* ----- Hero side photo (sits behind dashboard) ----- */
.hero-side-photo{
  position: absolute; left: -8%; top: 50%; transform: translateY(-50%);
  width: 280px; aspect-ratio: 4/5;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-xl);
  z-index: 0;
  border: 6px solid #fff;
  rotate: -6deg;
  animation: heroIn 1.1s 0.7s var(--ease-out) backwards;
}
.hero-side-photo img{ width: 100%; height: 100%; object-fit: cover; }
.hero-side-photo::after{
  content:''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13,25,137,.4) 100%);
}
@media (max-width: 1080px){ .hero-side-photo{ display: none; } }

/* ----- Problem section image+content split ----- */
.problem-grid{
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
@media (max-width: 920px){ .problem-grid{ grid-template-columns: 1fr; gap: 32px; } }
.problem-photo{
  position: relative; aspect-ratio: 4/4.5;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--av-charcoal);
}
.problem-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.problem-photo:hover img{ transform: scale(1.05); }
.problem-photo::after{
  content:''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(180,0,35,.05) 0%, rgba(13,25,137,.55) 100%);
}
.problem-photo .quote-tag{
  position: absolute; bottom: 22px; left: 22px; right: 22px;
  background: rgba(255,255,255,.96);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: .92rem; font-weight: 600; color: var(--av-charcoal);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  z-index: 1;
}
.problem-photo .quote-tag .who{ display: block; margin-top: 6px; font-size: .76rem; color: var(--gray-500); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ----- Bento card with bg photo ----- */
.bento-card.with-bg{
  background-size: cover; background-position: center;
  color: #fff;
  border: 0;
  position: relative; isolation: isolate;
}
.bento-card.with-bg::after{
  content:''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(135deg, rgba(13,25,137,.92) 0%, rgba(29,30,30,.85) 100%);
}
.bento-card.with-bg h3, .bento-card.with-bg p{ color: #fff; }
.bento-card.with-bg p{ color: rgba(255,255,255,.78); }
.bento-card.with-bg .ico{
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff;
}
.bento-card.with-bg .meta{ color: rgba(255,255,255,.6); border-top-color: rgba(255,255,255,.1); }

/* ----- How it works step thumbnails ----- */
.step .body .step-thumb{
  width: 100%; height: 160px; border-radius: var(--r); overflow: hidden;
  margin-top: 14px; position: relative;
  background: var(--av-charcoal);
}
.step .body .step-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.step .body:hover .step-thumb img{ transform: scale(1.05); }
.step .body .step-thumb::after{
  content:''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13,25,137,.35) 100%);
}

/* ----- CTA banner with background image ----- */
.cta-banner.with-bg-image{
  background:
    linear-gradient(135deg, rgba(13,25,137,.9) 0%, rgba(29,30,30,.88) 100%),
    var(--bg-url, none) center/cover;
}

/* ----- Stats bar with photo accent (testimonials section deco) ----- */
.testi-photo-deco{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 32px; opacity: .9;
}
@media (max-width: 720px){ .testi-photo-deco{ grid-template-columns: repeat(2,1fr); } }
.testi-photo-deco .photo-card{ aspect-ratio: 16/10; }

/* =========================================================
   ===== BRAND COLOR SECTIONS (less white) =================
   ========================================================= */
.bg-cream{
  background: linear-gradient(180deg, var(--av-cream) 0%, #FFF6F1 100%);
  position: relative;
}
.bg-cream::before{
  content:''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 80% 0%, rgba(180,0,35,.04), transparent 60%);
}
.bg-sky{
  background: linear-gradient(180deg, var(--av-sky-50) 0%, #F8FBFD 100%);
  position: relative;
}
.bg-sky::before{
  content:''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 0% 100%, rgba(107,158,189,.08), transparent 60%);
}
.bg-blue-tint{
  background: linear-gradient(180deg, var(--av-blue-50) 0%, #fff 100%);
  position: relative;
}

/* Brand color stripe (between sections, accent divider) */
.brand-stripe{
  height: 4px;
  background: linear-gradient(90deg, var(--av-blue) 0%, var(--av-red) 50%, var(--av-sky) 100%);
}

/* Section with side gradient color block (visual richness) */
.section-with-corner-deco{ position: relative; overflow: hidden; }
.section-with-corner-deco::before{
  content:''; position: absolute; top:-100px; right:-100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(13,25,137,.12) 0%, transparent 70%);
  pointer-events: none;
}
.section-with-corner-deco::after{
  content:''; position: absolute; bottom:-100px; left:-100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(180,0,35,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* =========================================================
   ===== TOOLS WE MANAGE LOGO STRIP =========================
   ========================================================= */
.tools-strip{
  background: linear-gradient(135deg, var(--av-blue) 0%, var(--av-charcoal) 100%);
  color: #fff; border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-xl);
}
.tools-strip::before{
  content:''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 50% 50% at 0% 0%, rgba(74,91,201,.4), transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(180,0,35,.3), transparent 60%);
  filter: blur(40px); animation: aurora 14s ease-in-out infinite;
}
.tools-head{
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 24px; gap: 24px; flex-wrap: wrap;
}
.tools-head h3{ color: #fff; font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0; }
.tools-head .muted{ color: rgba(255,255,255,.7); font-size: .92rem; max-width: 38ch; }
.tools-grid{
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 12px;
}
@media (max-width: 1100px){ .tools-grid{ grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 720px){ .tools-grid{ grid-template-columns: repeat(3, 1fr); } }
.tool-cell{
  aspect-ratio: 1.2/1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 12px;
  transition: all .35s var(--ease-out);
  text-align: center;
}
.tool-cell:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-3px);
}
.tool-cell .ico{
  width: 36px; height: 36px;
  background: rgba(255,255,255,.92); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.tool-cell .name{
  font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.85);
  letter-spacing: -.005em;
}

/* =========================================================
   ===== HERO SIDE PHOTO ACCENT (small floating photo) =====
   ========================================================= */
.hero-photo-accent{
  position: absolute; right: -24px; bottom: -32px;
  width: 180px; aspect-ratio: 4/5;
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 5px solid #fff;
  rotate: 4deg;
  z-index: 3;
  animation: float 6s ease-in-out infinite;
}
.hero-photo-accent img{ width: 100%; height: 100%; object-fit: cover; }
.hero-photo-accent::after{
  content:''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13,25,137,.3) 100%);
}
.hero-photo-accent .corner-tag{
  position: absolute; top: 10px; left: 10px;
  background: var(--av-red); color: #fff; padding: 4px 10px;
  border-radius: 999px; font-size: .68rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}
@media (max-width: 980px){ .hero-photo-accent{ display: none; } }

/* =========================================================
   ===== BIG STATS WITH PHOTO BG ============================
   ========================================================= */
.big-stats-row{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 920px){ .big-stats-row{ grid-template-columns: 1fr; } }
.big-stat{
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg);
  padding: 32px;
  color: #fff;
  background: var(--av-charcoal);
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-lg);
  transition: all .4s var(--ease-out);
}
.big-stat::after{
  content:''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, rgba(13,25,137,.85) 0%, rgba(29,30,30,.92) 100%);
}
.big-stat > *{ position: relative; z-index: 1; }
.big-stat:hover{ transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.big-stat .top{
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.big-stat .top::before{
  content:''; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80;
  box-shadow: 0 0 0 4px rgba(74,222,128,.25);
  animation: livePulse 1.6s ease-in-out infinite;
}
.big-stat .num{
  font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 900; letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  margin: 12px 0 6px;
}
.big-stat .lbl{ font-size: 1rem; color: rgba(255,255,255,.85); font-weight: 500; }
.big-stat.red{ background: var(--av-red); }
.big-stat.red::after{ background: linear-gradient(135deg, rgba(180,0,35,.95) 0%, rgba(13,25,137,.85) 100%); }
.big-stat.sky{ background: var(--av-sky); }
.big-stat.sky::after{ background: linear-gradient(135deg, rgba(107,158,189,.92) 0%, rgba(13,25,137,.85) 100%); }

/* Optional photo bg variant */
.big-stat.with-photo[style*="background-image"]::after{
  background: linear-gradient(135deg, rgba(13,25,137,.88) 0%, rgba(29,30,30,.85) 100%);
}

/* =========================================================
   ===== RESPONSIVE REINFORCEMENTS — mobile + tablet QA =====
   ========================================================= */

/* ----- Tablet (768–980px) ----- */
@media (max-width: 980px){
  .container{ padding: 0 22px; }
  /* Reduce dash 3D tilt on tablet for cleaner look */
  .dash{ transform: rotateY(-4deg) rotateX(3deg); }
  /* Tighten hero spacing */
  .hero{ padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 7vw, 100px); }
  /* Compare tables: smaller paddings */
  .compare-table th, .compare-table td{ padding: 14px 18px; font-size: .9rem; }
}

/* ----- Mobile L (480–720px) ----- */
@media (max-width: 720px){
  .container{ padding: 0 18px; }
  /* Hero h1 clamp tighter for narrow screens */
  h1{ font-size: clamp(2.1rem, 8vw, 3rem); }
  h2{ font-size: clamp(1.7rem, 6vw, 2.4rem); }

  /* Hero ring badge — shorter copy on mobile */
  .hero-ring .ring-text{ font-size: .76rem; }
  .hero-ring{ padding: 6px 16px 6px 6px; gap: 10px; }
  .hero-ring .ring-iso{ width: 30px; height: 30px; }
  .hero-ring .ring-iso img{ width: 20px; height: 20px; }

  /* Dash mock — kill 3D rotation on mobile, fits better */
  .dash{ transform: none; padding: 18px; border-radius: var(--r-lg); }
  .dash:hover{ transform: none; }
  .stat-num{ font-size: 1.8rem; }
  .spark{ display: none; }
  .dash-stat{ grid-template-columns: 1fr; }

  /* Hide floating badges on small screens */
  .float-badge, .toast-stack{ display: none !important; }

  /* Hero CTA — buttons stack full width */
  .hero-cta{ flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn{ width: 100%; }
  .hero-meta{ flex-wrap: wrap; }

  /* Section padding tightened */
  .section{ padding: clamp(56px, 9vw, 100px) 0; }
  .section-tight{ padding: clamp(40px, 6vw, 72px) 0; }

  /* Service tiles padding */
  .svc-tile{ padding: 28px 22px; gap: 20px; }
  .svc-tile h2{ font-size: clamp(1.5rem, 5vw, 2rem); }
  .svc-tile h2 .num{ width: 36px; height: 36px; font-size: .9rem; margin-right: 10px; }
  .included{ padding: 22px; }

  /* CTA banner padding */
  .cta-banner{ padding: 36px 24px; }
  .cta-banner > .grid{ gap: 24px; }

  /* Pricing toggle - center wrap */
  .toggle-wrap{ flex-direction: column; gap: 10px; }
  .toggle button{ padding: 11px 22px; font-size: .9rem; }

  /* Plan card padding */
  .plan{ padding: 26px 22px; }
  .plan-price .num{ font-size: 2.6rem; }

  /* ROI: rows 1 col */
  .roi-row{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .roi-mini{ padding: 14px; }
  .roi-mini .num{ font-size: 1.5rem; }
  .roi-results .big{ font-size: clamp(2rem, 8vw, 2.8rem); }
  .roi-industries button{ flex: 1 1 calc(50% - 6px); padding: 8px 10px; }

  /* Stats counters — 2 cols not 4 */
  .stats{ grid-template-columns: 1fr 1fr; padding: 24px 20px; gap: 18px; }
  .stat{ padding: 8px 4px; border-right: 0; border-bottom: 0; }
  .stat:nth-child(odd){ border-right: 1px solid var(--border); }
  .stat:nth-child(-n+2){ border-bottom: 1px solid var(--border); padding-bottom: 16px; }

  /* Logo wall — slightly smaller cells */
  .logo-cell{ height: 64px; }
  .logo-cell .mono{ font-size: .85rem; }
  .logo-cell .mono .badge{ width: 24px; height: 24px; font-size: .72rem; }

  /* Testimonials — single column scroll */
  .testimonial{ flex: 0 0 calc(100% - 4px); min-width: 0; padding: 22px; }

  /* FAQ paddings */
  .faq-q{ padding: 18px 22px; font-size: 1rem; }
  .faq-a{ padding: 0 22px 20px; }

  /* Form glass: smaller padding */
  .form-card{ padding: 22px; }

  /* Footer: tighter */
  .footer-grid{ gap: 24px; }
  .footer-bottom{ font-size: .78rem; flex-direction: column; gap: 8px; }

  /* Page hero */
  .page-hero{ padding: clamp(56px, 9vw, 100px) 0 clamp(28px, 4vw, 50px); }

  /* Industries 2 cols on small mobile */
  .industries{ gap: 10px; }
  .industry{ padding: 22px 14px; }
  .industry .ico{ width: 48px; height: 48px; }

  /* Steps tighter */
  .step .body{ padding: 20px 22px; }
  .step h3{ font-size: 1.15rem; }
}

/* ----- Mobile S (≤414px iPhone Plus) ----- */
@media (max-width: 414px){
  .container{ padding: 0 16px; }
  h1{ font-size: clamp(1.95rem, 9vw, 2.6rem); }
  .hero h1 .word{ display: inline; }   /* tighter wrap */
  .roi-row{ grid-template-columns: 1fr; }
  .roi-industries button{ flex: 1 1 calc(50% - 6px); }
  .nav-cta .btn-primary{ padding: 10px 14px; font-size: .82rem; }
  .brand img{ height: 32px; }
  .footer-bottom span{ text-align: center; width: 100%; }
}

/* ----- Mobile XS (≤360px Galaxy / iPhone SE) ----- */
@media (max-width: 360px){
  .container{ padding: 0 14px; }
  .hero-ring .ring-text{ font-size: .7rem; }
  .marquee-track{ gap: 36px; }
  .plan-price .num{ font-size: 2.2rem; }
}

/* =========================================================
   ===== v5: Meeting feedback fixes (8 May 2026) ===========
   ========================================================= */

/* ----- Blog "Coming soon" treatment ----- */
.post-card.coming-soon{ cursor: default; }
.post-card.coming-soon:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.post-card.coming-soon .post-cover::after{
  content:''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(13,25,137,.4) 0%, rgba(29,30,30,.5) 100%);
  pointer-events: none;
}
.post-card .coming-soon-badge{
  position: absolute; top: 16px; right: 16px; z-index: 3;
  background: rgba(29,30,30,.85);
  color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  backdrop-filter: blur(10px);
  display: inline-flex; align-items: center; gap: 6px;
}
.post-card .coming-soon-badge::before{
  content:''; width: 6px; height: 6px; border-radius: 50%;
  background: #FBBF24; box-shadow: 0 0 0 3px rgba(251,191,36,.25);
  animation: livePulse 1.6s ease-in-out infinite;
}

/* ----- Comparison table: better segmentation + bold headers ----- */
.compare-table thead th{
  background: linear-gradient(135deg, var(--av-charcoal) 0%, #2A2C2C 100%);
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  border-bottom: 0;
}
.compare-table thead th.av{
  background: linear-gradient(135deg, var(--av-blue) 0%, var(--av-blue-2) 100%);
  color: #fff;
  position: relative;
}
.compare-table thead th.av::after{
  content: '★ Recommended'; display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.85); margin-top: 4px; text-transform: none;
}
.compare-table tbody td:first-child{
  font-weight: 700;
  color: var(--av-charcoal);
  background: var(--bg-soft);
}
.compare-table tbody tr:hover td{ background: rgba(13,25,137,.03); }
.compare-table tbody tr:hover td.av{ background: linear-gradient(135deg, rgba(13,25,137,.08), rgba(13,25,137,.04)); }

/* ----- Pricing card hover: gradient border on ALL cards ----- */
.plan{
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: all .35s var(--ease-out);
}
.plan:not(.popular):hover{
  transform: translateY(-6px);
  border-color: transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, var(--av-blue), var(--av-red)) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-xl);
}
/* Popular card already has the gradient border baseline, intensify on hover */
.plan.popular:hover{
  transform: translateY(-10px);
  box-shadow: 0 32px 80px -20px rgba(13,25,137,.35);
}

/* =========================================================
   ===== Modal (Stripe checkout flow) =======================
   ========================================================= */
.modal-backdrop{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13,25,137,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility .35s var(--ease-out);
}
.modal-backdrop.open{ opacity: 1; visibility: visible; }
.modal-card{
  background: #fff;
  border-radius: var(--r-xl);
  max-width: 520px; width: 100%;
  box-shadow: var(--shadow-xl);
  transform: scale(.94) translateY(20px);
  transition: transform .4s var(--spring);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  isolation: isolate;
}
.modal-backdrop.open .modal-card{ transform: scale(1) translateY(0); }
.modal-card::before{
  content:''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--av-blue) 0%, var(--av-red) 50%, var(--av-sky) 100%);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  z-index: 1;
}
.modal-close{
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gray-100); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease-out);
  color: var(--av-charcoal);
  z-index: 2;
}
.modal-close:hover{ background: var(--gray-200); transform: rotate(90deg); }
.modal-header{
  padding: 36px 32px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header .eyebrow{ margin-bottom: 10px; }
.modal-header h3{ margin: 0; font-size: 1.45rem; line-height: 1.15; color: var(--av-charcoal); }
.modal-header .price-tag{
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 14px;
}
.modal-header .price-tag .num{
  font-size: 2.4rem; font-weight: 900; color: var(--av-blue);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.modal-header .price-tag .per{ color: var(--gray-500); font-weight: 500; }
.modal-body{ padding: 24px 32px 8px; }
.modal-body .summary{
  background: linear-gradient(135deg, var(--av-blue-50), var(--av-sky-50));
  border: 1px solid rgba(13,25,137,.1);
  border-radius: var(--r); padding: 14px 16px;
  font-size: .88rem; color: var(--gray-700);
  margin-bottom: 18px;
}
.modal-body .summary strong{ color: var(--av-charcoal); }
.modal-body .field{ margin-bottom: 14px; }
.modal-body .field label{ font-weight: 600; font-size: .88rem; color: var(--gray-700); margin-bottom: 6px; display: block; }
.modal-body .field input{
  width: 100%;
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
  border-radius: 10px; padding: 12px 14px;
  font-size: .95rem; font-family: inherit;
  color: var(--av-charcoal);
  transition: all .2s var(--ease-out);
}
.modal-body .field input:focus{
  outline: none;
  background: #fff;
  border-color: var(--av-blue);
  box-shadow: 0 0 0 4px var(--av-blue-50);
}
.modal-body .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px){ .modal-body .form-row{ grid-template-columns: 1fr; gap: 0; } }
.modal-footer{
  padding: 16px 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.modal-footer .stripe-badge{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--gray-500); font-size: .8rem;
}
.modal-footer .stripe-badge svg{ flex: none; }
.modal-footer .stripe-badge .stripe-logo{
  font-family: var(--font-sans);
  font-weight: 800; color: #635BFF; letter-spacing: -.02em;
}

/* Modal mobile */
@media (max-width: 540px){
  .modal-backdrop{ padding: 12px; align-items: flex-end; }
  .modal-card{ border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 95vh; }
  .modal-header{ padding: 32px 22px 18px; }
  .modal-body{ padding: 20px 22px 6px; }
  .modal-footer{ padding: 14px 22px 22px; }
}

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

/* =========================================================
   ===== BLOG ARTICLE PAGES =================================
   ========================================================= */
.blog-article{
  background: #fff;
}
.article-hero{
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(48px, 6vw, 80px);
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(13,25,137,.1), transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(180,0,35,.06), transparent 60%),
    linear-gradient(180deg, var(--av-cream) 0%, #fff 100%);
  text-align: center;
}
.article-hero::after{
  content:''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 90%);
}
.article-hero .container-narrow{ position: relative; z-index: 1; }
.article-hero .post-tag{
  /* Block-level flex container with fit-content width = guaranteed own line,
     no overlap with the H1 below, even on small viewports with huge titles */
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: fit-content;
  margin: 0 auto 40px;          /* centered + breathing room before H1 */
  background: rgba(13,25,137,.08); color: var(--av-blue);
  padding: 8px 16px; border-radius: 999px;
  font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid rgba(13,25,137,.18);
  position: relative; z-index: 2;   /* keep above any decorative overlays */
}
.article-hero h1{
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.12; letter-spacing: -.03em;
  max-width: 28ch;              /* wider so titles wrap less awkwardly */
  margin: 0 auto 24px;
}
.article-meta{
  display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: .92rem; color: var(--gray-600);
  padding: 12px 22px; background: #fff;
  border: 1px solid var(--border); border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.article-meta .author-mini{
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--av-charcoal);
}
.article-meta .author-mini::before{
  content:''; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--av-blue), var(--av-red));
  flex: none;
}
.article-meta .dot-sep{ width: 3px; height: 3px; border-radius:50%; background: var(--gray-300); }

.article-cover{
  margin: 0 auto clamp(40px, 6vw, 64px);
  width: calc(100% - 48px);     /* 24px breathing on each side */
  max-width: 920px;             /* match body width for visual harmony */
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  position: relative;
  aspect-ratio: 16/9;
  background: var(--av-charcoal);
}
.article-cover img{ width: 100%; height: 100%; object-fit: cover; }

.article-body{
  max-width: 920px;          /* match cover width for visual harmony */
  margin: 0 auto;            /* center within the article */
  padding: 0 24px 80px;
  font-family: var(--font-sans);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--gray-800);
}
.article-body > *{ max-width: 100%; }
/* Prose elements — wide enough to feel breathing, narrow enough to read */
.article-body p, .article-body h2, .article-body h3, .article-body ul, .article-body ol, .article-body blockquote, .article-body .callout, .article-body .share-row{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.article-body p.lead{ max-width: 820px; }
/* Wide elements (full-width within the 920px container) */
.article-body .stat-row,
.article-body .inline-cta,
.article-body table,
.article-body .article-image-full{
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.article-body p.lead{
  font-size: 1.32rem; line-height: 1.5; color: var(--av-charcoal);
  font-weight: 500;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.article-body h2{
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--av-charcoal);
  margin: 48px 0 16px;
  scroll-margin-top: 100px;
}
.article-body h3{
  font-size: 1.25rem; font-weight: 800;
  color: var(--av-charcoal);
  margin: 32px 0 12px;
  letter-spacing: -.02em;
}
.article-body p{ margin: 0 0 18px; }
.article-body ul, .article-body ol{
  padding-left: 24px; margin: 0 0 22px;
}
.article-body ul li, .article-body ol li{ margin-bottom: 10px; }
.article-body ul li::marker{ color: var(--av-blue); }
.article-body ol li::marker{ font-weight: 800; color: var(--av-blue); }

.article-body strong{ color: var(--av-charcoal); }
.article-body a{ color: var(--av-blue); text-decoration: underline; text-decoration-color: rgba(13,25,137,.3); text-underline-offset: 3px; transition: all .2s; }
.article-body a:hover{ color: var(--av-red); text-decoration-color: var(--av-red); }

.article-body blockquote{
  margin: 32px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--av-red);
  background: var(--av-cream);
  border-radius: 0 var(--r) var(--r) 0;
  font-style: italic;
  color: var(--av-charcoal);
  font-size: 1.1rem;
}
.article-body blockquote p:last-child{ margin-bottom: 0; }

.article-body .callout{
  margin: 32px 0;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--av-blue-50) 0%, var(--av-sky-50) 100%);
  border: 1px solid rgba(13,25,137,.12);
  border-radius: var(--r-lg);
}
.article-body .callout h4{
  display: flex; align-items: center; gap: 10px;
  color: var(--av-blue); font-size: 1.02rem;
  margin: 0 0 10px;
}
.article-body .callout h4::before{
  content:'💡'; font-size: 1.2rem;
}
.article-body .callout p:last-child{ margin-bottom: 0; }

.article-body .stat-row{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 32px 0;
}
@media (max-width: 540px){ .article-body .stat-row{ grid-template-columns: 1fr; } }
.article-body .stat-row .stat-cell{
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  padding: 20px;
}
.article-body .stat-row .stat-cell .num{
  font-size: 2rem; font-weight: 900; letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--av-blue), var(--av-red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.article-body .stat-row .stat-cell .lbl{
  font-size: .88rem; color: var(--gray-600); margin-top: 4px;
}

.article-body .inline-cta{
  margin: 40px 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--av-charcoal) 0%, var(--av-blue) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.article-body .inline-cta h4{
  margin: 0; color: #fff; font-size: 1.1rem; max-width: 36ch;
}
.article-body .inline-cta .btn{ flex: none; }

.related-posts{
  background: var(--bg-soft);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--border);
}
.related-posts .center{ margin-bottom: 32px; }
.related-posts .blog-grid{ max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.share-row{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 48px auto 0; padding-top: 32px;
  border-top: 1px dashed var(--border);
}
.share-row span{ color: var(--gray-500); font-size: .9rem; font-weight: 600; }
.share-row a{
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--av-charcoal); transition: all .2s var(--ease-out);
}
.share-row a:hover{ background: var(--av-blue); color: #fff; border-color: var(--av-blue); transform: translateY(-2px); }

/* Tools strip */
@media (max-width: 720px){
  .tools-head{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .tools-head h3{ font-size: 1.4rem; }
  .tools-strip{ padding: 28px 22px; }
  .tools-grid{ gap: 8px; }
  .tool-cell{ padding: 10px 8px; }
  .tool-cell .ico{ width: 30px; height: 30px; }
  .tool-cell .name{ font-size: .68rem; }
}
@media (max-width: 414px){
  .tools-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Big stats row */
@media (max-width: 720px){
  .big-stat{ padding: 26px 22px; min-height: 180px; }
  .big-stat .num{ font-size: clamp(2.2rem, 9vw, 3rem); }
}

/* Problem section split */
@media (max-width: 720px){
  .problem-photo{ aspect-ratio: 4/3.5; }
  .problem-photo .quote-tag{ font-size: .85rem; padding: 12px 14px; }
}

/* Bento card with bg image — stack content on mobile */
@media (max-width: 720px){
  .bento-card.span-6 .grid{ grid-template-columns: 1fr !important; gap: 22px !important; }
  .bento-card{ padding: 24px; }
  .bento-card h3{ font-size: 1.25rem !important; }
}

/* Industries dark section — image grid on mobile */
@media (max-width: 720px){
  .industries-photo-grid{ gap: 10px; }
}

/* Image mosaic & photo strip already handled above */

/* Photo strip header centered also on small */
@media (max-width: 720px){
  .photo-strip .photo-card{ flex: 0 0 240px; }
}

/* Behind-the-work header tight on mobile */
@media (max-width: 540px){
  .image-mosaic{ grid-auto-rows: 220px; }
}

/* --------- Reduced motion --------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior: auto; }
  .marquee-track, .dash::before, .scroll-progress, .hero-ring .ring-iso::after, .toast{ animation: none !important; }
  .hero h1 .word, .hero p.lead, .hero-cta, .hero-meta, .hero-visual{ opacity:1; transform: none; animation: none; }
}