/* ==========================================================================
   LEADBAIT — Premium corporate stylesheet
   Brand teal extracted from leads-bait.com logo (#1591AE)
   ========================================================================== */

:root {
  --navy: #0A1520;
  --navy-2: #0C1A28;
  --surface: #12222F;
  --surface-2: #16293A;
  --teal: #1591AE;
  --teal-bright: #2BB4D6;
  --teal-deep: #0F6E85;
  --mist: #F4F8F9;
  --ink: #0B1A24;
  --slate: #55707E;
  --slate-d: #8CA6B4;
  --line-dark: rgba(255, 255, 255, 0.09);
  --line-light: rgba(11, 26, 36, 0.10);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--mist); }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: transparent;
  color: var(--ink);
  margin: 0;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, .display { font-family: 'Plus Jakarta Sans', sans-serif; }

/* Smooth scroll via Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: var(--teal-deep); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }

/* ---------- Eyebrow label ---------- */
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--teal);
  display: inline-block;
}
.eyebrow--center::before { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 600; font-size: 0.95rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s, color .3s, box-shadow .3s;
  cursor: pointer; border: none; text-decoration: none; line-height: 1;
}
.btn:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }
.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 10px 30px -10px rgba(21,145,174,.7); }
.btn-primary:hover { background: var(--teal-bright); transform: translateY(-3px); box-shadow: 0 18px 40px -12px rgba(43,180,214,.8); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-light); }
.btn-ghost:hover { background: rgba(11,26,36,.05); transform: translateY(-3px); border-color: var(--teal); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--teal); transform: translateY(-3px); }
.btn .ph { font-size: 1.15rem; transition: transform .3s; }
.btn:hover .ph-arrow-right { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background-color .4s, backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line-light);
}
.brand-logo { height: 30px; width: auto; display: block; }
.nav-link {
  position: relative; color: rgba(11,26,36,.68); font-weight: 500;
  font-size: 0.95rem; text-decoration: none; padding: 0.4rem 0;
  transition: color .3s;
}
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--teal-bright); transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ---------- Hero reveal ---------- */
.reveal-line { overflow: hidden; display: block; }
.reveal-line > span { display: block; transform: translateY(110%); }

.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Section scroll reveal (JS toggles .in) */
[data-reveal] { opacity: 0; transform: translateY(42px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
[data-reveal].in { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: .12s; }
[data-reveal-delay="2"] { transition-delay: .24s; }
[data-reveal-delay="3"] { transition-delay: .36s; }
[data-reveal-delay="4"] { transition-delay: .48s; }

/* ---------- Bento / cards ---------- */
.card {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.18), transparent 46%),
    linear-gradient(150deg, #2FB2CE 0%, #1591AE 58%, #1187A2 100%);
  color: #EAF7FB; border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px; padding: 2rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 24px 60px -34px rgba(21,145,174,.55);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s;
}
/* Cursor-follow highlight */
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s; z-index: 0;
  background: radial-gradient(360px circle at var(--mx,80%) var(--my,0%), rgba(255,255,255,.22), transparent 46%);
}
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 34px 70px -30px rgba(21,145,174,.6); }
.card h1, .card h2, .card h3, .card h4 { color: #fff; }
.card .text-slate2 { color: #E4F5FA; }
.card .text-ink { color: #FFFFFF; }
.card .divider { background: rgba(255,255,255,.18); }

/* Intent Engine section — white icons on teal cards */
.engine-section .icon-badge, .card .icon-badge { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); color: #fff; }
.card .icon-badge-solid { background: rgba(255,255,255,.22); color: #fff; }
.testi-card .text-teal { color: #FFC53D; }

/* White ecosystem (Partners & Integrations) cards */.eco-card { background: #fff; color: var(--ink); border: 1px solid var(--line-light); box-shadow: 0 1px 2px rgba(11,26,36,.05); }
.eco-card:hover { border-color: rgba(21,145,174,.35); box-shadow: 0 30px 60px -30px rgba(11,26,36,.22); }
.eco-card .text-slate2 { color: var(--slate); }
.eco-card .eyebrow { color: var(--teal); }
.card-light {
  background: #fff; border: 1px solid var(--line-light);
  border-radius: 20px; padding: 2rem; color: var(--ink);
  box-shadow: 0 1px 2px rgba(11,26,36,.04);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
}
.card-light:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(11,26,36,.25); border-color: rgba(21,145,174,.35); }

.icon-badge {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(43,180,214,.18), rgba(21,145,174,.06));
  border: 1px solid rgba(43,180,214,.28); color: var(--teal-bright); font-size: 1.5rem;
}
.icon-badge-solid { background: var(--teal); color: #fff; border: none; }

/* Numbered chapter */
.chapter-no {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600;
  color: transparent; -webkit-text-stroke: 1px rgba(43,180,214,.45);
  font-size: clamp(3rem, 8vw, 6rem); line-height: 1;
}

/* ---------- Logo zoom columns ---------- */
.zoom-viewport {
  position: relative; height: 460px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.logo-track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.logo-chip {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.15rem 1.4rem; margin: 0.55rem 0;
  background: #fff; border: 1px solid var(--line-light);
  border-radius: 16px; will-change: transform, opacity;
  box-shadow: 0 10px 30px -22px rgba(11,26,36,.4);
}
.logo-chip .lc-mark {
  width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: rgba(43,180,214,.10); border: 1px solid rgba(43,180,214,.22);
  color: var(--teal-bright); font-size: 1.2rem;
}
.logo-chip .lc-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); letter-spacing: -.01em; }
.logo-chip .lc-sub { font-size: .72rem; color: var(--slate); letter-spacing: .04em; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 3.5rem; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: clamp(1.4rem,3vw,2.4rem); color: rgba(11,26,36,.16); display: inline-flex; align-items: center; gap: 1rem; }
.marquee-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* ---------- Stat ---------- */
.stat-num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: clamp(2.6rem,5vw,3.8rem); line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.stat-num.on-light { color: var(--ink); }

/* ---------- Process tracing ---------- */
.trace-item { position: relative; padding-left: 2.2rem; }
.trace-item::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: -1.5rem; width: 1px; background: var(--line-light); }
.trace-item:last-child::before { display: none; }
.trace-dot { position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--teal); background: #fff; }
.trace-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--teal-bright); }

/* ---------- Forms ---------- */
.field label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--slate); margin-bottom: .5rem; text-transform: uppercase; }
.field input, .field textarea, .field select {
  width: 100%; background: #fff; border: 1px solid var(--line-light);
  border-radius: 12px; padding: .9rem 1rem; font-size: 1rem; color: var(--ink);
  font-family: 'Inter', sans-serif; transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21,145,174,.15);
}

.contact-link {
  display: flex; align-items: center; gap: 1.2rem; padding: 1.4rem 1.6rem;
  border-radius: 16px; border: 1px solid rgba(43,180,214,.35); background: #2FA5BD; color: #E6EDF0;
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.55);
  transition: transform .35s, border-color .35s, box-shadow .35s; text-decoration: none;
}
.contact-link:hover { transform: translateY(-4px); border-color: var(--teal-bright); box-shadow: 0 34px 70px -30px rgba(0,0,0,.65); }
.contact-link .text-slate2 { color:#C6E6EE; }
/* White icons + arrows on teal contact cards */
.contact-link .icon-badge { color:#fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); }
.contact-link .text-teal { color:#fff; }

/* Custom cursor dot (desktop) */
/* Default system cursor */


/* Footer */
.footer-link { color: var(--slate); text-decoration: none; transition: color .3s; font-size: .95rem; }
.footer-link:hover { color: var(--teal-bright); }

/* Mobile nav */
.mobile-nav { transform: translateY(-100%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.mobile-nav.open { transform: translateY(0); }

/* Utility */
.text-teal { color: var(--teal); }
.bg-navy { background: var(--navy); }
.bg-surface { background: var(--surface); }
/* Dark footer with call-center backdrop */
.site-footer .text-slate2 { color:#C6E6EE; }
.site-footer .footer-link { color:#C6E6EE; }
.site-footer .footer-link:hover { color: var(--teal-bright); }
.site-footer h4 { color:#fff; }
.site-footer .brand-logo { filter: brightness(0) invert(1); height: 48px; }
.site-footer .divider { background: rgba(255,255,255,.12); }
/* White social icons in footer */
.site-footer .icon-badge { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); }
.site-footer .icon-badge:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.7); }
/* White stat numbers on teal photo cards */
.card .stat-num { color: #fff; }

.divider { height: 1px; background: var(--line-light); width: 100%; }
.underline-teal { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ==========================================================================
   EXCLUSIVE ANIMATIONS — animated background, buttons, cards, headings
   ========================================================================== */

/* Translucent section surface so the animated background shows through behind content */
.frost { background: rgba(255,255,255,.7); }

/* Qualifier pills */
.pill { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.05rem; border-radius:999px; border:1px solid var(--line-light); background:rgba(255,255,255,.72); font-size:.82rem; font-weight:600; color:var(--ink); transition: transform .3s, border-color .3s; }
.pill:hover { transform: translateY(-2px); border-color: rgba(21,145,174,.4); }
.pill .ph { color: var(--teal); font-size:1rem; }

/* Big editorial index number */
.vrow-no { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:clamp(3rem,7vw,5.5rem); line-height:.9; color:transparent; -webkit-text-stroke:1.5px rgba(21,145,174,.4); }

/* Comparison table */
.compare { border:1px solid var(--line-light); border-radius:22px; overflow:hidden; background:rgba(255,255,255,.85); }
.compare-row { display:grid; grid-template-columns:1.4fr 1fr 1fr; align-items:stretch; }
.compare-row + .compare-row { border-top:1px solid var(--line-light); }
.compare-cell { padding:1.15rem 1.3rem; font-size:.95rem; display:flex; align-items:center; gap:.55rem; }
.compare-head .compare-cell { font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; }
.compare-col-us { background:linear-gradient(180deg, rgba(21,145,174,.10), rgba(21,145,174,.02)); }
.compare-col-us .compare-cell { font-weight:600; color:var(--ink); }
.compare-x { color:#C0554E; } .compare-check { color:var(--teal); }
.compare-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--teal); color:#fff; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; padding:.25rem .7rem; border-radius:999px; }

/* Intent Grade meter */
.grade-track { height:10px; border-radius:999px; background:rgba(255,255,255,.2); overflow:hidden; }
.grade-fill { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#7FD3E4,#FFFFFF,#7FD3E4); background-size:200% 100%; width:0; transition:width 1.6s cubic-bezier(.2,.8,.2,1) .2s; animation:gradeFlow 2.6s linear infinite; }
@keyframes gradeFlow { to { background-position:-200% 0; } }
[data-reveal].in .grade-fill { width:var(--w,90%); }

/* Hero particle network canvas */
/* Hero animation: slow Ken Burns zoom + live connecting-lines network */
.hero-kb { animation: heroKb 26s ease-in-out infinite alternate; will-change: transform; transform-origin: 70% 40%; }
@keyframes heroKb { from { transform: scale(1); } to { transform: scale(1.09); } }
.hero-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero-kb { animation: none; } }

/* Decorative floating circles for select sections */
.deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.deco-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(21,145,174,.18); }
.deco-soft { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(43,180,214,.14), transparent 70%); filter: blur(4px); }
.deco-float { animation: decoFloat 16s ease-in-out infinite alternate; will-change: transform; }
.deco-float.d2 { animation-duration: 20s; animation-delay: -5s; }
.deco-float.d3 { animation-duration: 24s; animation-delay: -9s; }
@keyframes decoFloat { from { transform: translate(0,0); } to { transform: translate(26px,-32px); } }
@media (prefers-reduced-motion: reduce) { .deco-float { animation: none; } }

/* Big outlined-text marquee */
.outline-marquee { overflow:hidden; padding:2.5rem 0; }
.outline-track { display:inline-flex; white-space:nowrap; will-change:transform; animation: outlineScroll 34s linear infinite; }
.outline-marquee:hover .outline-track { animation-play-state:paused; }
.outline-text { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(2.6rem,9vw,7rem); line-height:1; letter-spacing:-.01em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1.4px rgba(21,145,174,.55); display:inline-flex; align-items:center; gap:2.5rem; padding-right:2.5rem; }
.outline-text .odot { width:18px; height:18px; border-radius:50%; background:var(--teal); -webkit-text-stroke:0; flex:none; }
@keyframes outlineScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* Testimonials right-to-left marquee */
.testi-marquee { overflow:hidden; }
.testi-track { display:flex; gap:1.5rem; width:max-content; animation:testiScroll 52s linear infinite; }
.testi-marquee:hover .testi-track { animation-play-state:paused; }
.testi-card { flex:0 0 380px; width:380px; }
@keyframes testiScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (max-width:640px){ .testi-card { flex-basis:300px; width:300px; } }

/* --- Animated background layer (injected by JS) --- */
.bg-fx {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(58% 46% at 84% 6%, rgba(43,180,214,.12), transparent 62%),
    radial-gradient(52% 44% at 8% 26%, rgba(21,145,174,.10), transparent 60%),
    radial-gradient(48% 40% at 92% 58%, rgba(43,180,214,.09), transparent 58%),
    radial-gradient(60% 46% at 20% 82%, rgba(21,145,174,.09), transparent 60%),
    radial-gradient(46% 40% at 50% 108%, rgba(43,180,214,.10), transparent 55%),
    var(--mist);
}
/* Soft dot texture across the whole page */
.bg-fx .dot-layer {
  position: absolute; inset: -40px;
  background-image: radial-gradient(rgba(21,145,174,.14) 1.3px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  opacity: .5;
  animation: gridShift 40s linear infinite;
}
.bg-fx .grid-layer {
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(rgba(21,145,174,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,145,174,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  animation: gridShift 22s linear infinite;
}
@keyframes gridShift { to { background-position: 72px 72px, 72px 72px; } }

.bg-fx .fx-blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .42;
  background: radial-gradient(circle, rgba(43,180,214,.8), transparent 70%);
  animation: blobDrift 16s ease-in-out infinite alternate; will-change: transform;
}
.bg-fx .fx-blob.b1 { width: 520px; height: 520px; top: -120px; left: -80px; }
.bg-fx .fx-blob.b2 { width: 440px; height: 440px; bottom: -140px; right: -60px; animation-duration: 20s; animation-delay: -6s; background: radial-gradient(circle, rgba(21,145,174,.6), transparent 70%); }
@keyframes blobDrift { from { transform: translate(0,0) scale(1); } to { transform: translate(70px,-50px) scale(1.18); } }

.bg-fx .fx-block {
  position: absolute; border-radius: 20px;
  border: 1px solid rgba(21,145,174,.36);
  background: linear-gradient(145deg, rgba(43,180,214,.24), rgba(21,145,174,.05));
  box-shadow: 0 26px 60px -26px rgba(21,145,174,.55);
  will-change: transform; opacity: .92;
  animation: floatBlock ease-in-out infinite alternate;
}
@keyframes floatBlock {
  from { transform: translate(0,0) rotate(var(--r,0deg)); }
  to   { transform: translate(var(--dx,0px), var(--dy,-80px)) rotate(calc(var(--r,0deg) + var(--dr,14deg))); }
}
.bg-fx .fx-block.k1  { width:132px; height:132px; top:13%; left:6%;   --r:-8deg;  --dx:44px;  --dy:-90px; --dr:16deg;  animation-duration:11s; }
.bg-fx .fx-block.k2  { width:72px;  height:72px;  top:60%; left:12%;  --r:12deg;  --dx:-34px; --dy:-64px; --dr:-12deg; animation-duration:13s; animation-delay:-4s; }
.bg-fx .fx-block.k3  { width:152px; height:152px; top:27%; right:8%;  --r:6deg;   --dx:-46px; --dy:-96px; --dr:14deg;  animation-duration:15s; animation-delay:-6s; }
.bg-fx .fx-block.k4  { width:64px;  height:64px;  top:72%; right:16%; --r:-14deg; --dx:32px;  --dy:-58px; --dr:18deg;  animation-duration:9s;  animation-delay:-2s; }
.bg-fx .fx-block.k5  { width:98px;  height:98px;  top:8%;  right:27%; --r:4deg;   --dx:-24px; --dy:-76px; --dr:-10deg; animation-duration:12s; animation-delay:-7s; }
.bg-fx .fx-block.k6  { width:56px;  height:56px;  top:44%; left:44%;  --r:-6deg;  --dx:42px;  --dy:-66px; --dr:20deg;  animation-duration:10s; animation-delay:-3s; border-radius:50%; }
.bg-fx .fx-block.k7  { width:90px;  height:90px;  top:82%; left:30%;  --r:8deg;   --dx:-30px; --dy:-74px; --dr:-16deg; animation-duration:14s; animation-delay:-5s; }
.bg-fx .fx-block.k8  { width:60px;  height:60px;  top:20%; left:26%;  --r:-4deg;  --dx:26px;  --dy:-60px; --dr:12deg;  animation-duration:10s; animation-delay:-8s; }
.bg-fx .fx-block.k9  { width:112px; height:112px; top:52%; right:29%; --r:10deg;  --dx:-38px; --dy:-86px; --dr:-14deg; animation-duration:13s; animation-delay:-1s; }
.bg-fx .fx-block.k10 { width:72px;  height:72px;  top:34%; left:68%;  --r:-10deg; --dx:30px;  --dy:-64px; --dr:16deg;  animation-duration:11s; animation-delay:-6s; border-radius:50%; }
.bg-fx .fx-block.k11 { width:128px; height:128px; top:66%; right:6%;  --r:5deg;   --dx:-42px; --dy:-94px; --dr:12deg;  animation-duration:16s; animation-delay:-3s; }
.bg-fx .fx-block.k12 { width:58px;  height:58px;  top:90%; left:58%;  --r:-8deg;  --dx:22px;  --dy:-62px; --dr:-18deg; animation-duration:9s;  animation-delay:-4s; }

/* --- Buttons: shine sweep + press --- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.btn:hover::after { animation: btnSheen .85s ease; }
@keyframes btnSheen { from { left: -130%; } to { left: 140%; } }
.btn:active { transform: translateY(-1px) scale(.98); }
.btn-ghost::after { background: linear-gradient(120deg, transparent, rgba(21,145,174,.18), transparent); }

/* --- Cards: cursor-follow spotlight + icon pop --- */
.card, .card-light { position: relative; }
.card::before, .card-light::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(460px circle at var(--mx,50%) var(--my,50%), rgba(21,145,174,.12), transparent 42%);
}
.card:hover::before, .card-light:hover::before { opacity: 1; }
.icon-badge { transition: transform .45s cubic-bezier(.2,.8,.2,1), background-color .45s, color .45s; }
.card:hover .icon-badge, .card-light:hover .icon-badge { transform: translateY(-3px) scale(1.08) rotate(-3deg); }
.icon-badge-solid { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.card:hover .icon-badge-solid { transform: translateY(-3px) scale(1.08); }

/* --- Headings: clip reveal on scroll (paired with [data-reveal].in) --- */
[data-reveal] h1, [data-reveal] h2 {
  clip-path: inset(0 0 105% 0); transform: translateY(18px);
  transition: clip-path 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
  transition-delay: .1s;
}
[data-reveal].in h1, [data-reveal].in h2 { clip-path: inset(0 0 -6% 0); transform: translateY(0); }

/* --- Headings: shimmering teal accent --- */
h1 .text-teal, h2 .text-teal {
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-bright) 50%, var(--teal) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: tealShimmer 6s linear infinite;
}
@keyframes tealShimmer { to { background-position: 220% center; } }

/* --- Hero stat blocks (stretched, block-style reveal) --- */
.stat-block {
  position: relative; padding: 1.6rem 1.7rem;
  border: 1px solid var(--line-light); border-radius: 16px;
  background: rgba(255,255,255,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  opacity: 0; transform: translateY(34px) scaleX(.92);
  animation: statBlockIn .95s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, .85s);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
.stat-block:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(11,26,36,.28); border-color: rgba(21,145,174,.45); }
.stat-block::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal-bright));
  transform: scaleX(0); transform-origin: left;
  animation: statBarIn .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d, .85s) + .28s);
}
.stat-block::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(21,145,174,.14), transparent 46%);
}
.stat-block:hover::after { opacity: 1; }
.stat-block .stat-num { font-size: clamp(2.1rem, 3.6vw, 3rem); }
@keyframes statBlockIn { to { opacity: 1; transform: translateY(0) scaleX(1); } }
@keyframes statBarIn { to { transform: scaleX(1); } }

/* ---------- Blog (Medium sync) ---------- */
.blog-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line-light); border-radius: 20px;
  text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 2px rgba(11,26,36,.04);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(11,26,36,.28); border-color: rgba(21,145,174,.35); }
.blog-thumb { position: relative; height: 200px; background-size: cover; background-position: center; }
.blog-thumb-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,26,36,0) 40%, rgba(11,26,36,.35)); }
.blog-body { padding: 1.5rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.blog-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.blog-date { font-size: .78rem; color: var(--slate); display: inline-flex; align-items: center; gap: .35rem; }
.blog-tag { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--teal-deep); background: rgba(21,145,174,.1); border: 1px solid rgba(21,145,174,.2); padding: .28rem .6rem; border-radius: 999px; }
.blog-tag-solid { color: #fff; background: var(--teal); border-color: transparent; }
.blog-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
.blog-excerpt { color: var(--slate); font-size: .92rem; line-height: 1.6; flex: 1; }
.blog-read { margin-top: .4rem; font-weight: 600; font-size: .9rem; color: var(--teal-deep); display: inline-flex; align-items: center; gap: .45rem; }
.blog-card:hover .blog-read .ph-arrow-right { transform: translateX(4px); }
.blog-read .ph { transition: transform .3s; }

/* Featured post */
.blog-feature { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid var(--line-light); text-decoration: none; box-shadow: 0 24px 60px -40px rgba(11,26,36,.4); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.blog-feature:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -44px rgba(11,26,36,.5); }
.blog-feature-media { position: relative; min-height: 340px; background-size: cover; background-position: center; }
.blog-feature-body { padding: 2.6rem 2.8rem; display: flex; flex-direction: column; align-items: flex-start; }
.blog-feature-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); margin: 1rem 0 .8rem; }
.blog-feature-excerpt { color: var(--slate); line-height: 1.7; }
@media (max-width: 860px) { .blog-feature { grid-template-columns: 1fr; } .blog-feature-media { min-height: 220px; } .blog-feature-body { padding: 2rem 1.6rem; } }

/* Skeleton */
.blog-skeleton { pointer-events: none; }
.blog-skeleton .blog-thumb { background: linear-gradient(100deg, #eef3f5 30%, #e2eaee 50%, #eef3f5 70%); background-size: 200% 100%; animation: skShimmer 1.4s linear infinite; }
.blog-skeleton .blog-body { padding: 1.5rem 1.6rem 1.8rem; }
.sk-line { display: block; height: 12px; width: 100%; border-radius: 6px; margin-bottom: .7rem; background: linear-gradient(100deg, #eef3f5 30%, #e2eaee 50%, #eef3f5 70%); background-size: 200% 100%; animation: skShimmer 1.4s linear infinite; }
@keyframes skShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.blog-in { opacity: 0; transform: translateY(24px); animation: blogIn .7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes blogIn { to { opacity: 1; transform: translateY(0); } }

/* Icon spinner (contact form sending state) */
.ph-spin { display: inline-block; animation: phSpin .8s linear infinite; }
@keyframes phSpin { to { transform: rotate(360deg); } }

/* Teal heading chip — white text on brand teal (matches vertical cards) */
.heading-teal { display: inline-block; background: linear-gradient(150deg, #2FB2CE 0%, #1591AE 65%, #1187A2 100%); color: #fff; padding: .28em .5em; border-radius: 16px; box-shadow: 0 14px 30px -18px rgba(21,145,174,.65); }

/* ---------- US coverage map ---------- */
.us-map { width: 100%; }
.us-map .us-map-svg { width: 100%; height: auto; display: block; overflow: visible; }
.us-map .us-state {
  fill: rgba(21,145,174,.06);
  stroke: rgba(21,145,174,.55);
  stroke-width: 1.1;
  stroke-linejoin: round;
  transition: fill .3s ease, stroke .3s ease;
}
.us-map .us-state:hover {
  cursor: pointer;
  transform-box: fill-box; transform-origin: center;
  animation: stateBlink 1s ease-in-out infinite;
}
@keyframes stateBlink {
  0%, 100% { fill: rgba(43,180,214,.28); stroke: rgba(21,145,174,.6); filter: none; }
  50% { fill: rgba(43,180,214,.85); stroke: #2BB4D6; filter: drop-shadow(0 0 7px rgba(43,180,214,.8)); }
}
@media (prefers-reduced-motion: reduce) {
  .us-map .us-state:hover { animation: none; fill: rgba(43,180,214,.6); stroke: #2BB4D6; }
}


@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .stat-block { opacity: 1 !important; transform: none !important; }
  .stat-block::before { transform: scaleX(1) !important; }
  .reveal-line > span { transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
}