/* HERO - premium background */
  .hero-blob{
    position:absolute; border-radius:9999px; filter: blur(48px);
    opacity:.9; transform: translateZ(0);
    animation: heroFloat 10s ease-in-out infinite;
  }
  .hero-blob--1{ width:320px; height:320px; left:-80px; top:-90px; background: rgba(255,2,2,.12); animation-delay:0s;}
  .hero-blob--2{ width:420px; height:420px; right:-130px; top:10px; background: rgba(15,23,42,.06); animation-delay:1.5s;}
  .hero-blob--3{ width:520px; height:220px; left:50%; bottom:-120px; transform: translateX(-50%); background: rgba(255,2,2,.10); animation-delay:2.2s;}

  @keyframes heroFloat{
    0%,100%{ transform: translate3d(0,0,0) scale(1); }
    50%{ transform: translate3d(0,-14px,0) scale(1.03); }
  }

  /* Subtle grid */
  .hero-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,23,42,.06) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse at 50% 35%, black 40%, transparent 70%);
    opacity:.35;
  }

  /* Noise overlay */
  .hero-noise{
    position:absolute; inset:0; opacity:.06; mix-blend-mode:multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  }

  /* Gradient text accent */
  .hero-gradient-text{
    background: linear-gradient(90deg, #3B484D, #FF0202);
    -webkit-background-clip: text;
    background-clip:text;
    color: transparent;
  }

  /* CTA micro interaction */
  .hero-cta{ position:relative; overflow:hidden; }
  .hero-cta::after{
    content:""; position:absolute; inset:-2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: translateX(-140%);
    animation: shimmer 3.2s ease-in-out infinite;
    opacity:.6;
  }
  @keyframes shimmer{
    0%{ transform: translateX(-140%); }
    60%{ transform: translateX(140%); }
    100%{ transform: translateX(140%); }
  }
  .hero-cta-arrow{ display:inline-block; margin-left:.5rem; transition: transform .2s ease; }
  .hero-cta:hover .hero-cta-arrow{ transform: translateX(4px); }

  /* KPI pills */
  .hero-pill{
    border:1px solid rgba(148,163,184,.4);
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
    transition: transform .2s ease, box-shadow .2s ease;
    animation: pillPop .9s ease both;
  }
  .hero-pill:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(15,23,42,.10);
  }
  .hero-pill-top{ font-weight: 800; font-size: 18px; color:#3B484D; line-height:1.1; }
  .hero-pill-bottom{ font-size: 12px; font-weight: 600; color: rgba(71,85,105,1); margin-top:4px; }

  @keyframes pillPop{
    from{ opacity:0; transform: translateY(8px); }
    to{ opacity:1; transform: translateY(0); }
  }

  /* Floating mini cards on hero image */
  .hero-float-card{
    position:absolute;
    border: 1px solid rgba(226,232,240,1);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 18px 45px rgba(15,23,42,.12);
    width: min(240px, 78%);
    animation: floatCard 7s ease-in-out infinite;
  }
  .hero-float-card--a{ top: 18px; left: 18px; animation-delay: .2s; }
  .hero-float-card--b{ bottom: 18px; left: 18px; animation-delay: 1.2s; }
  .hero-float-card--c{ bottom: 22px; right: 18px; animation-delay: .8s; }

  @keyframes floatCard{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }

  .hero-shimmer{
    height: 6px;
    background: linear-gradient(90deg, rgba(255,2,2,.2), rgba(255,2,2,.06), rgba(15,23,42,.06));
  }

  /* Ping effect */
  .hero-ping{
    animation: ping 1.4s cubic-bezier(0,0,.2,1) infinite;
  }
  @keyframes ping{
    75%,100%{ transform: scale(2.2); opacity: 0; }
  }
@media (max-width: 640px){
  .hero-float-card{
    padding: 10px 12px;
    border-radius: 14px;
    width: min(220px, 84%);
  }
  .hero-float-card--a{ top: 10px; left: 10px; }
  .hero-float-card--b{ bottom: 10px; left: 10px; }
  .hero-float-card--c{ display:none; } /* already for 480px, make it earlier */
}

  /* Small screens: keep float cards inside nicely */
  @media (max-width: 480px){
    .hero-float-card--c{ display:none; }
  }