html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; color: #27374d; }

/* Global readability boosts */
p, li { line-height: 1.75; }
.text-ink-500 { color: #3d4f63 !important; }   /* was #52617a — bumped darker */
.text-ink-400 { color: #52617a !important; }   /* was #71809b — bumped darker */

/* ── Scroll progress bar ───────────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, #173f70, #2563a8, #0ea5e9, #38bdf8);
  background-size: 200% 100%;
  z-index: 9999;
  box-shadow: 0 0 12px rgba(14,165,233,.65);
  transition: width .1s linear;
  animation: progressShimmer 2s linear infinite;
}
@keyframes progressShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ── Glossy / Glass primitives ─────────────────────────────── */
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.58));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 40px -22px rgba(23,63,112,.28);
}

/* Glass variant for dark / photo backgrounds */
.glass-dark {
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 24px -8px rgba(0,0,0,.28);
}

/* Chip variant — solid enough to read on any dark bg */
.chip-hero {
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.40);
  color: #fff;
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .02em;
}
.chip-hero:hover { background: rgba(255,255,255,.24); }
.glossy { position: relative; overflow: hidden; }
.glossy::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.14) 22%, rgba(255,255,255,0) 48%);
}
.sheen::after {
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); transition: left .75s ease; pointer-events:none;
}
.sheen:hover::after { left:140%; }

/* gradient ring/border via mask */
.ring-gradient { position: relative; }
.ring-gradient::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(140deg, rgba(143,182,227,.9), rgba(255,255,255,.2) 40%, rgba(56,189,248,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
  transition: opacity .3s;
}
.ring-gradient:hover::after { opacity: 1.4; }

/* Floating color orbs */
.orb { position:absolute; border-radius:9999px; filter: blur(60px); opacity:.5; pointer-events:none; }

@keyframes orbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  30%     { transform: translate(22px,-16px) scale(1.06); }
  70%     { transform: translate(-16px,22px) scale(.95); }
}
@keyframes orbDriftAlt {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(-20px,14px) scale(1.04); }
  80%     { transform: translate(18px,-20px) scale(.97); }
}
.orb-ambient     { animation: orbDrift    14s ease-in-out infinite; }
.orb-ambient-alt { animation: orbDriftAlt 18s ease-in-out infinite; }

/* Grid texture */
.grid-texture {
  background-image:
    linear-gradient(to right, rgba(37,99,168,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37,99,168,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, #000 30%, transparent 78%);
}

/* ── Hero load animations ───────────────────────────────────── */
@keyframes rise { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
.reveal { opacity:0; animation: rise .75s cubic-bezier(.16,1,.3,1) forwards; }
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.30s}.d4{animation-delay:.42s}.d5{animation-delay:.54s}

/* ── Animated gradient headline text ───────────────────────── */
@keyframes gradientFlow {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* For light / white backgrounds (About section etc.) */
.gradient-animated {
  background: linear-gradient(270deg, #173f70, #2563a8, #0ea5e9, #38bdf8, #0ea5e9, #1d4f8c);
  background-size: 400% 400%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradientFlow 5s ease infinite;
}

/* For dark / photo backgrounds (Hero) — bright white-to-cyan */
.gradient-animated-hero {
  background: linear-gradient(270deg, #ffffff, #7dd3fc, #38bdf8, #bae6fd, #7dd3fc, #ffffff);
  background-size: 400% 400%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradientFlow 5s ease infinite;
  filter: drop-shadow(0 2px 12px rgba(56,189,248,.55));
}

/* ── Floating chips ─────────────────────────────────────────── */
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.float-slow   { animation: floaty 6s ease-in-out infinite; }
.float-slower { animation: floaty 8s ease-in-out infinite; }

/* ── Premium footer ────────────────────────────────────────── */
.footer-link {
  position: relative;
  display: inline-block;
  transition: color .22s;
}
.footer-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: #2563a8;
  transition: width .28s cubic-bezier(.22,1,.36,1);
}
.footer-link:hover::after { width: 100%; }

/* ── Dropdown ───────────────────────────────────────────────── */
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu {
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-menu {
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

/* ── Scroll-reveal system (JS adds .is-visible) ─────────────── */
.reveal-up    { opacity:0; transform:translateY(36px);  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal-left  { opacity:0; transform:translateX(-36px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal-right { opacity:0; transform:translateX(36px);  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal-scale { opacity:0; transform:scale(.92);        transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1); }
.is-visible   { opacity:1 !important; transform:none !important; }

/* Stagger grid — children animate in sequence */
.stagger > * {
  opacity:0; transform:translateY(28px) scale(0.96);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.stagger.is-visible > *:nth-child(1){ opacity:1; transform:none; transition-delay:.00s; }
.stagger.is-visible > *:nth-child(2){ opacity:1; transform:none; transition-delay:.09s; }
.stagger.is-visible > *:nth-child(3){ opacity:1; transform:none; transition-delay:.18s; }
.stagger.is-visible > *:nth-child(4){ opacity:1; transform:none; transition-delay:.27s; }
.stagger.is-visible > *:nth-child(5){ opacity:1; transform:none; transition-delay:.36s; }
.stagger.is-visible > *:nth-child(6){ opacity:1; transform:none; transition-delay:.45s; }

/* ── Pulse-ring on primary CTA ──────────────────────────────── */
@keyframes pulseRing {
  0%   { transform:scale(1); opacity:.55; }
  100% { transform:scale(1.65); opacity:0; }
}
.pulse-cta { position:relative; }
.pulse-cta::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: rgba(37,99,168,.38);
  animation: pulseRing 2.4s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events:none;
}

/* ── Floating hero particles ────────────────────────────────── */
.particle-field { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.particle {
  position:absolute; border-radius:50%;
  background: rgba(37,99,168,.18);
  animation: particleDrift linear infinite;
}
@keyframes particleDrift {
  0%   { transform:translateY(110vh) translateX(0);  opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { transform:translateY(-80px) translateX(40px); opacity:0; }
}

/* ── 3-D card tilt ──────────────────────────────────────────── */
.card-tilt {
  transition: transform .28s ease, box-shadow .28s ease;
  will-change: transform;
  transform-style: preserve-3d;
}

/* ── Magnetic button base ───────────────────────────────────── */
.magnetic { transition: transform .25s cubic-bezier(.16,1,.3,1); }

/* ── Stat counter ───────────────────────────────────────────── */
.count-num { font-variant-numeric: tabular-nums; }

/* ── Section label — dark background variant ───────────────── */
.section-label-dark {
  display:inline-flex; align-items:center; gap:.6rem;
  color: #7dd3fc; font-weight:600; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
}
.section-label-dark::before {
  content:''; display:block; width:1.75rem; height:2.5px;
  background: linear-gradient(90deg,#38bdf8,#7dd3fc);
  border-radius:2px;
}

/* ── Navbar backdrop on scroll ──────────────────────────────── */
header.scrolled {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 1px 0 rgba(15,27,45,.06), 0 4px 20px -8px rgba(15,27,45,.12);
}

/* ── Section divider line ───────────────────────────────────── */
.section-label {
  display:inline-flex; align-items:center; gap:.6rem;
  color: #1d4f8c; font-weight: 600; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
}
.section-label::before {
  content:''; display:block; width:1.75rem; height:2.5px;
  background: linear-gradient(90deg, #1d4f8c, #0ea5e9);
  border-radius:2px;
}

/* Trust bar icon wrapper — more vivid */
.trust-icon {
  background: linear-gradient(135deg, #dbe7f6, #eef4fb);
  border: 1px solid rgba(37,99,168,.14);
}

/* ── Glow ring on icon badges ───────────────────────────────── */
.icon-badge {
  position:relative;
  transition: transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.icon-badge::after {
  content:''; position:absolute; inset:-3px; border-radius:inherit;
  background: linear-gradient(135deg, rgba(37,99,168,.3), rgba(14,165,233,.15));
  filter: blur(6px); opacity:0; transition: opacity .3s;
  pointer-events:none; z-index:-1;
}
.group:hover .icon-badge {
  transform: scale(1.18) rotate(-8deg);
  box-shadow: 0 12px 32px -6px rgba(37,99,168,.55);
}
.group:hover .icon-badge::after { opacity:1; }

/* ── Animated gradient border on card hover ─────────────────── */
@keyframes borderRotate {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
.ring-gradient::after {
  background-size: 200% 200%;
}
.group:hover.ring-gradient::after {
  animation: borderRotate 2.5s linear infinite;
  opacity: 1;
}

/* ── Floating animation for CTA card ───────────────────────── */
@keyframes floatCard {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}
.value-cta-card {
  animation: floatCard 4.5s ease-in-out infinite;
}

/* ── Pulsing background orb ─────────────────────────────────── */
@keyframes orbPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%       { opacity: .9;  transform: scale(1.15); }
}
.orb-pulse { animation: orbPulse 6s ease-in-out infinite; }


/* ══════════════════════════════════════════════════════════════
   SOLUTIONS SECTION — animations
   ══════════════════════════════════════════════════════════════ */

/* ── Cursor spotlight inside each card ──────────────────────── */
.sol-card {
  --sx: 50%; --sy: 50%;
  position: relative;
  transition: transform .38s cubic-bezier(.16,1,.3,1),
              box-shadow .38s ease,
              border-left-color .3s ease;
  border-left: 3px solid transparent;
}
.sol-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: radial-gradient(
    circle at var(--sx) var(--sy),
    rgba(56,189,248,.18) 0%,
    rgba(37,99,168,.10) 35%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.sol-card:hover::before { opacity: 1; }
.sol-card > * { position: relative; z-index: 1; }

/* Card lift + left accent */
.sol-card:hover {
  transform: translateY(-6px) translateX(4px);
  box-shadow: 0 24px 52px -14px rgba(23,63,112,.28);
  border-left-color: #2563a8;
}

/* Watermark step number */
.sol-card::after {
  content: attr(data-step);
  position: absolute; top: 1rem; right: 1.25rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.4rem; font-weight: 700; line-height: 1;
  color: rgba(37,99,168,.06);
  transition: color .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none; z-index: 0;
}
.sol-card:hover::after {
  color: rgba(37,99,168,.16);
  transform: scale(1.14) translateY(-3px);
}

/* Title tints brand on hover */
.sol-card h3 { transition: color .25s ease; }
.sol-card:hover h3 { color: #1d4f8c; }

/* ── SVG icon stroke-draw on hover ──────────────────────────── */
.sol-icon path, .sol-icon circle, .sol-icon rect {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset .55s cubic-bezier(.16,1,.3,1);
}
.sol-card:hover .sol-icon path,
.sol-card:hover .sol-icon circle,
.sol-card:hover .sol-icon rect {
  stroke-dashoffset: 0;
}

/* Icon badge — scale + glow (no rotate, let stroke-draw be the effect) */
.sol-card:hover .icon-badge {
  transform: scale(1.15);
  box-shadow: 0 14px 36px -6px rgba(37,99,168,.6);
  transition: transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}

/* ── Clip-path wipe entrance (overrides translateY stagger for sol-cards) */
.sol-clip {
  clip-path: inset(110% 0 0 0 round 24px);
  opacity: 1 !important;
  transform: none !important;
  transition: clip-path .65s cubic-bezier(.16,1,.3,1) !important;
}
.stagger.is-visible .sol-clip:nth-child(1) { clip-path: inset(0% 0 0 0 round 24px); transition-delay: .00s; }
.stagger.is-visible .sol-clip:nth-child(2) { clip-path: inset(0% 0 0 0 round 24px); transition-delay: .10s; }
.stagger.is-visible .sol-clip:nth-child(3) { clip-path: inset(0% 0 0 0 round 24px); transition-delay: .20s; }
.stagger.is-visible .sol-clip:nth-child(4) { clip-path: inset(0% 0 0 0 round 24px); transition-delay: .30s; }

/* ── Image panel ─────────────────────────────────────────────── */
.sol-image-wrap { overflow: hidden; }
.sol-image-wrap img {
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}
.sol-image-wrap:hover img { transform: scale(1.05); }

.sol-caption {
  transition: transform .42s cubic-bezier(.16,1,.3,1);
}
.sol-image-wrap:hover .sol-caption { transform: translateY(-8px); }

/* ── Floating badge ─────────────────────────────────────────── */
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0)   rotate(-1.5deg); }
  50%       { transform: translateY(-9px) rotate(1.5deg); }
}
.sol-badge {
  animation: badgeFloat 4s ease-in-out infinite;
  transition: box-shadow .3s ease, transform .3s ease;
}
.sol-badge:hover {
  box-shadow: 0 18px 44px -8px rgba(37,99,168,.38) !important;
  animation-play-state: paused;
  transform: scale(1.06);
}

/* ── Background orb drift ───────────────────────────────────── */
@keyframes orbDrift {
  0%, 100% { transform: translate(0,    0)   scale(1);    opacity: .55; }
  33%       { transform: translate(28px,-18px) scale(1.12); opacity: .8;  }
  66%       { transform: translate(-18px,14px) scale(.93); opacity: .6;  }
}
.sol-orb { animation: orbDrift 11s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════
   FEATURED PRODUCT CARDS — unique animations
   ══════════════════════════════════════════════════════════════ */

/* ── 3-D rotateX entrance (overrides generic stagger for prod-cards) */
.stagger > .prod-card {
  opacity: 0;
  transform: perspective(900px) rotateX(22deg) translateY(48px) scale(.94);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.stagger.is-visible > .prod-card:nth-child(1){ opacity:1; transform:none; transition-delay:.00s; }
.stagger.is-visible > .prod-card:nth-child(2){ opacity:1; transform:none; transition-delay:.12s; }
.stagger.is-visible > .prod-card:nth-child(3){ opacity:1; transform:none; transition-delay:.24s; }
.stagger.is-visible > .prod-card:nth-child(4){ opacity:1; transform:none; transition-delay:.36s; }
.stagger.is-visible > .prod-card:nth-child(5){ opacity:1; transform:none; transition-delay:.48s; }

/* ── Magnetic directional shadow ─────────────────────────────── */
.prod-card {
  --ms-x: 0px; --ms-y: 20px;
  transition: transform .38s cubic-bezier(.16,1,.3,1), box-shadow .28s ease;
}
.prod-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--ms-x) var(--ms-y) 52px -10px rgba(23,63,112,.30),
              0 2px 8px -2px rgba(15,27,45,.08);
}

/* ── Scroll-driven image parallax ───────────────────────────── */
.prod-img {
  --py: 0px;
  transform: translateY(var(--py)) scale(1.1);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.prod-card:hover .prod-img {
  transform: translateY(var(--py)) scale(1.16);
}

/* ── Reveal panel ───────────────────────────────────────────── */
.prod-reveal {
  max-height: 0; overflow: hidden; opacity: 0;
  border-top: 1px solid transparent; margin-top: 0; padding-top: 0;
  transition: max-height .44s cubic-bezier(.16,1,.3,1),
              opacity .32s ease,
              margin .32s ease,
              padding .32s ease,
              border-color .32s ease;
  font-size: .8rem; font-weight: 600; color: #1d4f8c;
  display: flex; align-items: center; gap: .4rem;
}
.prod-card:hover .prod-reveal {
  max-height: 48px; opacity: 1;
  border-top-color: rgba(37,99,168,.14);
  margin-top: .875rem; padding-top: .875rem;
}
.prod-reveal svg { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.prod-reveal:hover svg { transform: translateX(4px); }

/* ── Heading word-split reveal ───────────────────────────────── */
.feat-word {
  display: inline-block; overflow: hidden;
  vertical-align: bottom; line-height: 1.1;
}
.feat-word-inner {
  display: inline-block;
  transform: translateY(110%); opacity: 0;
  transition: transform .72s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.feat-word-inner.revealed { transform: translateY(0); opacity: 1; }

/* One-shot shimmer sweep across card on hover */
.prod-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.28) 50%, transparent 75%);
  transform: translateX(-130%);
  pointer-events: none; border-radius: inherit;
  transition: none;
}
.prod-card:hover::before {
  transform: translateX(130%);
  transition: transform .7s cubic-bezier(.25,1,.5,1);
}

/* Image overlay — subtly lifts on hover */
.prod-img-overlay {
  transition: background .4s ease;
}
.prod-card:hover .prod-img-overlay {
  background: linear-gradient(to bottom, transparent, transparent, rgba(255,255,255,.55)) !important;
}

/* Tag badge — spring bounce on hover */
.prod-tag {
  transition: transform .42s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.prod-card:hover .prod-tag {
  transform: translateY(-5px) scale(1.06);
  box-shadow: 0 8px 20px -4px rgba(37,99,168,.28);
}

/* Grade text — animated underline draws in */
.prod-grade {
  position: relative;
  display: inline-block;
}
.prod-grade::after {
  content: ''; position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1.5px;
  background: #1d4f8c; border-radius: 1px;
  transition: width .38s cubic-bezier(.16,1,.3,1);
}
.prod-card:hover .prod-grade::after { width: 100%; }

/* "Request spec sheet" link — reveal underline on hover */
.prod-link {
  position: relative; display: inline-flex;
}
.prod-link::after {
  content: ''; position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: #2563a8;
  transition: width .3s ease;
}
.prod-card:hover .prod-link::after { width: 100%; }

/* CTA card — breathing glow pulse */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 10px 40px -12px rgba(37,99,168,.45); }
  50%       { box-shadow: 0 18px 56px -8px rgba(37,99,168,.75), 0 0 0 6px rgba(37,99,168,.08); }
}
.prod-cta-card {
  animation: ctaGlow 3.5s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.prod-cta-card:hover { transform: translateY(-8px); }

/* CTA card arrow link — slide right on hover */
.prod-cta-card .cta-arrow {
  transition: gap .3s cubic-bezier(.34,1.56,.64,1);
}
.prod-cta-card:hover .cta-arrow { gap: .75rem; }

/* ── Footer newsletter input focus ─────────────────────────── */
.newsletter-input:focus-within {
  box-shadow: 0 0 0 3px rgba(37,99,168,.18);
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE ANIMATION PASS — 10 new layers
   ══════════════════════════════════════════════════════════════ */

/* ── 1. HERO RIGHT CARD: periodic glint sweep ───────────────── */
@keyframes heroGlint {
  0%, 78%, 100% { transform: translateX(-140%) skewX(-14deg); opacity: 0; }
  80%            { opacity: 1; }
  95%            { opacity: 1; }
  97%            { transform: translateX(250%) skewX(-14deg); opacity: 0; }
}
.hero-card-glint {
  position: absolute; inset: 0; z-index: 8; border-radius: inherit;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.44) 50%, transparent 72%);
  animation: heroGlint 6s ease-in-out 1.8s infinite;
  pointer-events: none;
}

/* ── 2. TRUST BAR: icon spring + row shift on hover ──────────── */
.trust-icon {
  transition: transform .38s cubic-bezier(.34,1.56,.64,1),
              box-shadow .3s ease, background .28s ease, color .28s ease;
}
.trust-item {
  padding: .45rem .65rem; margin: -.45rem -.65rem;
  border-radius: .875rem;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1), background .22s ease;
  cursor: default;
}
.trust-item:hover { transform: translateX(5px); background: rgba(37,99,168,.07); }
.trust-item:hover .trust-icon {
  transform: scale(1.22) rotate(-8deg);
  box-shadow: 0 8px 24px -4px rgba(37,99,168,.42);
  background: linear-gradient(135deg, #2563a8, #173f70) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── 3. INTRO STATS: perspective flip-in entrance ───────────── */
.stat-card {
  opacity: 0;
  transform: perspective(700px) rotateY(-58deg) translateX(-10px) scale(.92);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1);
  cursor: default;
}
.stat-card.visible { opacity: 1; transform: none; }
.stat-card:nth-child(1) { transition-delay: .00s; }
.stat-card:nth-child(2) { transition-delay: .10s; }
.stat-card:nth-child(3) { transition-delay: .20s; }
.stat-card:nth-child(4) { transition-delay: .30s; }
.stat-card:hover {
  transform: translateY(-6px) scale(1.04) !important;
  box-shadow: 0 20px 48px -14px rgba(23,63,112,.22) !important;
}

/* ── 5. CALLOUT BANNER: continuous scan ray ─────────────────── */
@keyframes scanRay {
  0%, 66%  { transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  68%       { opacity: 1; }
  93%       { opacity: 1; }
  100%     { transform: translateX(270%) skewX(-18deg); opacity: 0; }
}
.callout-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 20; border-radius: 2rem;
  background: linear-gradient(100deg, transparent 28%, rgba(255,255,255,.28) 50%, transparent 72%);
  animation: scanRay 5.5s ease-in-out -1s infinite;
  pointer-events: none;
}

/* ── 7. MARKET INTEL ROWS: perspective slide entrance ────────── */
.mkt-row {
  opacity: 0;
  transform: translateX(-30px) perspective(700px) rotateX(10deg);
  border-left: 3px solid transparent;
  padding-left: calc(1.25rem - 3px) !important;
  cursor: default;
  transition: opacity .58s ease, transform .58s cubic-bezier(.16,1,.3,1),
              background .22s ease, border-left-color .25s ease;
}
.mkt-row.visible { opacity: 1; transform: none; }
.mkt-row:nth-child(1) { transition-delay: .00s; }
.mkt-row:nth-child(2) { transition-delay: .13s; }
.mkt-row:nth-child(3) { transition-delay: .26s; }
.mkt-row:hover {
  background: rgba(255,255,255,.22) !important;
  transform: translateX(7px) !important;
  border-left-color: #38bdf8 !important;
}

/* ── 8. MARKETS REGION CARDS: cursor spotlight ───────────────── */
.mkt-region {
  --rx: 50%; --ry: 50%;
  position: relative;
}
.mkt-region::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: radial-gradient(
    circle at var(--rx) var(--ry),
    rgba(37,99,168,.22) 0%, rgba(14,165,233,.08) 45%, transparent 70%
  );
  opacity: 0; transition: opacity .22s ease; pointer-events: none;
}
.mkt-region:hover::before { opacity: 1; }
.mkt-region > * { position: relative; z-index: 1; }
.mkt-region:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 28px 56px -16px rgba(23,63,112,.28) !important;
}

/* ── 9. TEAM GALLERY: rotateX flip entrance + brand tint ─────── */
.stagger > .team-photo {
  opacity: 0;
  transform: perspective(900px) rotateX(-20deg) translateY(44px) scale(.94);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.stagger.is-visible > .team-photo:nth-child(1) { opacity:1; transform:none; transition-delay:.00s; }
.stagger.is-visible > .team-photo:nth-child(2) { opacity:1; transform:none; transition-delay:.18s; }
/* Brand tint overlay */
.team-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit;
  background: linear-gradient(140deg, rgba(29,79,140,.52), rgba(56,189,248,.18));
  opacity: 0; transition: opacity .42s ease; pointer-events: none;
}
.team-photo:hover::before { opacity: 1; }
/* Caption lift */
.team-caption { transition: transform .42s cubic-bezier(.16,1,.3,1); }
.team-photo:hover .team-caption { transform: translateY(-10px); }

/* ── 10. CTA HEADING: typewriter cursor blink ────────────────── */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.cta-cursor {
  display: inline-block; width: 3px; height: .85em;
  background: rgba(255,255,255,.88); margin-left: 3px;
  vertical-align: middle; border-radius: 1px;
  animation: cursorBlink .75s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .reveal{animation:none;opacity:1}
  .float-slow,.float-slower,.orb-ambient,.orb-ambient-alt,.particle{animation:none}
  .gradient-animated{animation:none; background: linear-gradient(90deg,#2563a8,#0ea5e9); -webkit-background-clip:text; background-clip:text;}
  html{scroll-behavior:auto}
  #scroll-progress{animation:none}
  .hero-card-glint,.callout-card::after,.scanRay{animation:none}
}