/* ============================================================
   HERO VISUAL — animated composition of 5 cards + GEO/AEO badge.
   Replaces the static homepage hero image.
   All styles scoped under .hero-viz so nothing leaks out.
   ============================================================ */

.hero-viz {
  /* Local palette + shadows — scoped here, does not clash with global :root */
  --hv-navy:#0F2B46;
  --hv-teal:#00B4D8;--hv-teal-dim:rgba(0,180,216,0.10);
  --hv-orange:#FF6B2B;--hv-orange-dim:rgba(255,107,43,0.08);
  --hv-green:#10B981;--hv-green-dim:rgba(16,185,129,0.08);
  --hv-blue:#2563EB;--hv-blue-dim:rgba(37,99,235,0.08);
  --hv-amber:#D97706;--hv-amber-dim:rgba(217,119,6,0.08);
  --hv-red:#EF4444;--hv-red-dim:rgba(239,68,68,0.08);
  --hv-white:#fff;
  --hv-g50:#F8FAFC;--hv-g100:#F1F5F9;--hv-g200:#E2E8F0;--hv-g300:#CBD5E1;
  --hv-g400:#94A3B8;--hv-g500:#64748B;--hv-g600:#475569;--hv-g700:#334155;
  --hv-shadow:0 8px 30px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.14);
  --hv-shadow-lg:0 16px 48px rgba(0,0,0,0.32),0 3px 10px rgba(0,0,0,0.18);

  position:relative;
  width:100%;
  max-width:660px;
  height:740px;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

.hero-viz *,
.hero-viz *::before,
.hero-viz *::after{
  box-sizing:border-box;
}

.hero-viz .card{
  position:absolute;
  background:var(--hv-white);
  border-radius:14px;
  box-shadow:var(--hv-shadow);
  border:1px solid var(--hv-g200);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease;
  will-change:transform;
}
.hero-viz .card:hover{box-shadow:var(--hv-shadow-lg);z-index:50!important;}

/* ============================================================
   1. GOOGLE LOCAL PACK + MINI MAP — Top Left
   ============================================================ */
.hero-viz .card-map{
  top:0;left:0;width:285px;z-index:10;
  animation:hvFloatA 6s ease-in-out infinite;
  overflow:hidden;
}
.hero-viz .map-visual{
  height:72px;position:relative;
  background:linear-gradient(135deg,#e8f4f8 0%,#dceef5 30%,#d4e8f0 60%,#cfe3ec 100%);
  border-bottom:1px solid var(--hv-g200);
  overflow:hidden;
}
.hero-viz .map-road{position:absolute;background:var(--hv-white);border-radius:1px;}
.hero-viz .road-h1{top:28px;left:0;width:100%;height:3px;opacity:.7;}
.hero-viz .road-h2{top:52px;left:0;width:100%;height:2px;opacity:.4;}
.hero-viz .road-v1{top:0;left:35%;width:2px;height:100%;opacity:.5;}
.hero-viz .road-v2{top:0;left:72%;width:2px;height:100%;opacity:.4;}
.hero-viz .map-pin{position:absolute;width:18px;height:18px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));}
.hero-viz .map-pin svg{width:100%;height:100%;}
.hero-viz .map-pin.you{top:18px;left:42%;animation:hvPinBounce 2s ease-in-out infinite;}
.hero-viz .map-pin.c1{top:38px;left:20%;opacity:.5;}
.hero-viz .map-pin.c2{top:14px;left:75%;opacity:.5;}
.hero-viz .map-label{
  position:absolute;bottom:4px;right:6px;
  font-size:7px;color:var(--hv-g400);font-weight:500;letter-spacing:.2px;
  display:flex;align-items:center;gap:3px;
}
.hero-viz .map-label svg{width:8px;height:8px;color:var(--hv-g400);}
.hero-viz .map-tooltip{
  position:absolute;top:4px;left:50%;transform:translateX(-50%);
  background:var(--hv-navy);color:var(--hv-white);
  font-size:7px;font-weight:700;
  padding:2px 7px;border-radius:3px;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.hero-viz .map-tooltip::after{
  content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid var(--hv-navy);
}

/* Search bar */
.hero-viz .lp-bar{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--hv-g100);}
.hero-viz .g-logo svg{width:16px;height:16px;display:block;}
.hero-viz .lp-bar-text{font-size:10px;color:var(--hv-g400);font-weight:500;letter-spacing:.2px;}

.hero-viz .lp-search{display:flex;align-items:center;gap:7px;padding:7px 12px;border-bottom:1px solid var(--hv-g100);background:var(--hv-g50);}
.hero-viz .lp-search svg{width:12px;height:12px;color:var(--hv-g400);flex-shrink:0;}
.hero-viz .lp-q{font-size:12px;color:var(--hv-g600);font-weight:500;}
.hero-viz .lp-q b{color:var(--hv-navy);font-weight:700;}
.hero-viz .lp-search-mic{margin-left:auto;}
.hero-viz .lp-search-mic svg{width:12px;height:12px;color:var(--hv-blue);}

/* Results */
.hero-viz .lp-list{padding:2px 0;}
.hero-viz .lp-row{display:flex;align-items:flex-start;gap:8px;padding:7px 12px;}
.hero-viz .lp-row.top{background:linear-gradient(135deg,var(--hv-teal-dim),rgba(0,180,216,.02));border-left:3px solid var(--hv-teal);margin-left:-1px;position:relative;}
.hero-viz .lp-row.top::after{content:'#1';position:absolute;top:6px;right:9px;font-size:8.5px;font-weight:800;color:var(--hv-teal);background:var(--hv-teal-dim);padding:2px 5px;border-radius:3px;}
.hero-viz .lp-row.dim .lp-name{color:var(--hv-g400);font-weight:600;}
.hero-viz .lp-row.dim .lp-type{color:var(--hv-g300);}

.hero-viz .lp-pin svg{width:18px;height:18px;display:block;flex-shrink:0;margin-top:1px;}
.hero-viz .lp-data{flex:1;min-width:0;}
.hero-viz .lp-name{font-size:11.5px;font-weight:700;color:var(--hv-navy);line-height:1.2;}
.hero-viz .lp-row.top .lp-name{color:#0891B2;}
.hero-viz .lp-type{font-size:8.5px;color:var(--hv-g400);margin-top:1px;}

.hero-viz .lp-stars-row{display:flex;align-items:center;gap:3px;margin-top:2px;}
.hero-viz .lp-rating{font-size:10px;font-weight:700;color:var(--hv-g700);}
.hero-viz .stars svg{width:9px;height:9px;display:inline-block;}
.hero-viz .lp-ct{font-size:9px;color:var(--hv-g400);}
.hero-viz .lp-dist{font-size:8.5px;color:var(--hv-g400);margin-left:2px;}

.hero-viz .gg{display:inline-flex;align-items:center;gap:3px;margin-top:3px;padding:2px 6px;background:var(--hv-green-dim);border:1px solid rgba(16,185,129,.12);border-radius:3px;}
.hero-viz .gg svg{width:8px;height:8px;color:var(--hv-green);}
.hero-viz .gg span{font-size:8px;font-weight:700;color:var(--hv-green);text-transform:uppercase;letter-spacing:.3px;}

.hero-viz .lp-details{display:flex;align-items:center;gap:6px;margin-top:3px;}
.hero-viz .lp-open{display:flex;align-items:center;gap:3px;}
.hero-viz .lp-open-dot{width:4px;height:4px;background:var(--hv-green);border-radius:50%;}
.hero-viz .lp-open-text{font-size:8px;color:var(--hv-green);font-weight:600;}
.hero-viz .lp-sep{color:var(--hv-g300);font-size:8px;}
.hero-viz .lp-addr{font-size:8px;color:var(--hv-g400);}

/* Action buttons */
.hero-viz .lp-actions{display:flex;border-top:1px solid var(--hv-g100);}
.hero-viz .lp-action{
  flex:1;display:flex;align-items:center;justify-content:center;gap:4px;
  padding:7px 0;font-size:9px;font-weight:600;color:var(--hv-blue);
  border-right:1px solid var(--hv-g100);
  cursor:pointer;transition:background .2s;
}
.hero-viz .lp-action:last-child{border-right:none;}
.hero-viz .lp-action:hover{background:var(--hv-g50);}
.hero-viz .lp-action svg{width:11px;height:11px;color:var(--hv-blue);}

/* AI Search citation row (GEO/AEO signal) */
.hero-viz .lp-ai{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 12px;
  border-top:1px solid var(--hv-g100);
  background:linear-gradient(135deg,rgba(124,58,237,0.06),rgba(0,180,216,0.03));
}
.hero-viz .lp-ai-label{
  display:flex;align-items:center;gap:4px;
  font-size:8.5px;font-weight:700;color:var(--hv-navy);
  text-transform:uppercase;letter-spacing:.3px;
}
.hero-viz .lp-ai-label svg{width:11px;height:11px;color:#7C3AED;flex-shrink:0;}
.hero-viz .lp-ai-logos{display:flex;align-items:center;gap:3px;}
.hero-viz .lp-ai-logo{
  width:19px;height:19px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:7.5px;font-weight:800;letter-spacing:.2px;
  flex-shrink:0;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.hero-viz .lp-ai-logo.gpt{background:#10A37F;}
.hero-viz .lp-ai-logo.ppx{background:#20808D;}
.hero-viz .lp-ai-logo.gai{background:linear-gradient(135deg,#4285F4,#EA4335);}

/* ============================================================
   2. INCOMING LEADS — Top Right (mixed trades)
   ============================================================ */
.hero-viz .card-leads{
  top:15px;right:0;width:250px;
  padding:12px 14px 10px;z-index:12;
  animation:hvFloatB 7s ease-in-out infinite;
}
.hero-viz .leads-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.hero-viz .leads-title{font-size:10px;font-weight:700;color:var(--hv-navy);text-transform:uppercase;letter-spacing:.7px;}
.hero-viz .leads-live{display:flex;align-items:center;gap:5px;background:var(--hv-orange);color:var(--hv-white);font-size:9px;font-weight:700;padding:3px 8px;border-radius:10px;animation:hvPulseBadge 2.5s ease-in-out infinite;}
.hero-viz .leads-live-dot{width:5px;height:5px;background:var(--hv-white);border-radius:50%;}
.hero-viz .leads-sub{font-size:8.5px;color:var(--hv-g400);margin-bottom:8px;}

.hero-viz .ld{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--hv-g100);opacity:0;animation:hvSlideIn .5s ease forwards;}
.hero-viz .ld:last-of-type{border-bottom:none;}

.hero-viz .ld-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hero-viz .ld-icon svg{width:13px;height:13px;}
.hero-viz .ld-icon.emergency{background:var(--hv-red-dim);color:var(--hv-red);}
.hero-viz .ld-icon.repair{background:var(--hv-orange-dim);color:var(--hv-orange);}
.hero-viz .ld-icon.maint{background:var(--hv-teal-dim);color:var(--hv-teal);}
.hero-viz .ld-icon.install{background:var(--hv-blue-dim);color:var(--hv-blue);}
.hero-viz .ld-icon.quote{background:var(--hv-green-dim);color:var(--hv-green);}

.hero-viz .ld-info{flex:1;min-width:0;}
.hero-viz .ld-name{font-size:11px;font-weight:600;color:var(--hv-navy);}
.hero-viz .ld-meta{font-size:9px;color:var(--hv-g400);display:flex;align-items:center;gap:4px;margin-top:1px;flex-wrap:wrap;}

.hero-viz .tag{font-size:7.5px;font-weight:700;padding:1.5px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.3px;}
.hero-viz .tag-ads{background:var(--hv-blue-dim);color:var(--hv-blue);}
.hero-viz .tag-lsa{background:var(--hv-green-dim);color:var(--hv-green);}
.hero-viz .tag-gbp{background:var(--hv-amber-dim);color:var(--hv-amber);}
.hero-viz .tag-seo{background:var(--hv-teal-dim);color:#0891B2;}
.hero-viz .tag-ref{background:rgba(139,92,246,.08);color:#7C3AED;}

.hero-viz .ld-status{font-size:8px;font-weight:700;padding:2px 6px;border-radius:3px;white-space:nowrap;}
.hero-viz .status-booked{background:var(--hv-green-dim);color:var(--hv-green);}
.hero-viz .status-urgent{background:var(--hv-red-dim);color:var(--hv-red);}
.hero-viz .status-new{background:var(--hv-blue-dim);color:var(--hv-blue);}
.hero-viz .status-quoted{background:var(--hv-amber-dim);color:var(--hv-amber);}

.hero-viz .leads-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px dashed var(--hv-g200);}
.hero-viz .leads-footer-label{font-size:9px;color:var(--hv-g400);font-weight:500;}
.hero-viz .leads-footer-val{display:flex;align-items:center;gap:4px;}
.hero-viz .leads-footer-num{font-size:14px;font-weight:800;color:var(--hv-navy);}
.hero-viz .leads-footer-change{font-size:8.5px;font-weight:700;color:var(--hv-green);background:var(--hv-green-dim);padding:1px 5px;border-radius:3px;}

/* ============================================================
   3. GBP STATS — Bottom Left
   ============================================================ */
.hero-viz .card-gbp{
  top:430px;left:0;width:210px;
  padding:12px 14px;z-index:8;
  animation:hvFloatC 8s ease-in-out infinite;
}
.hero-viz .gbp-head{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.hero-viz .gbp-g svg{width:16px;height:16px;display:block;}
.hero-viz .gbp-title{font-size:10px;font-weight:700;color:var(--hv-navy);text-transform:uppercase;letter-spacing:.5px;}
.hero-viz .gbp-period{font-size:8px;color:var(--hv-g400);font-weight:500;margin-left:auto;}

.hero-viz .gbp-stat{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:10px;}
.hero-viz .gbp-stat:last-child{margin-bottom:0;}
.hero-viz .gbp-num{font-size:18px;font-weight:800;color:var(--hv-navy);line-height:1;}
.hero-viz .gbp-label{font-size:8.5px;color:var(--hv-g400);margin-top:2px;}
.hero-viz .gbp-trend{font-size:8px;font-weight:700;color:var(--hv-green);background:var(--hv-green-dim);padding:1px 5px;border-radius:3px;margin-top:2px;display:inline-block;}
.hero-viz .gbp-bars{display:flex;align-items:flex-end;gap:2.5px;height:24px;}
.hero-viz .gb{width:4px;border-radius:2px;background:var(--hv-teal);opacity:.55;transform:scaleY(0);transform-origin:bottom;animation:hvGrowBar .6s ease forwards;}

/* Review summary row */
.hero-viz .gbp-reviews{display:flex;align-items:center;gap:5px;margin-top:10px;padding-top:8px;border-top:1px solid var(--hv-g100);}
.hero-viz .gbp-rev-stars svg{width:10px;height:10px;}
.hero-viz .gbp-rev-text{font-size:9px;color:var(--hv-g500);font-weight:500;}
.hero-viz .gbp-rev-text b{color:var(--hv-navy);font-weight:700;}
.hero-viz .gbp-rev-new{font-size:7.5px;font-weight:700;color:var(--hv-green);background:var(--hv-green-dim);padding:1px 5px;border-radius:3px;margin-left:auto;}

/* ============================================================
   4. AI AGENT CHAT — Bottom Right
   ============================================================ */
.hero-viz .card-ai{
  bottom:16px;right:0;width:275px;z-index:11;
  animation:hvFloatD 6.5s ease-in-out infinite;
  overflow:hidden;
}
.hero-viz .ai-header{background:linear-gradient(135deg,var(--hv-navy),#163a5c);padding:9px 13px;display:flex;align-items:center;gap:9px;}
.hero-viz .ai-av{width:28px;height:28px;background:linear-gradient(135deg,var(--hv-teal),#0891B2);border-radius:8px;display:flex;align-items:center;justify-content:center;}
.hero-viz .ai-av svg{width:15px;height:15px;color:var(--hv-white);}
.hero-viz .ai-name{font-size:11.5px;font-weight:700;color:var(--hv-white);}
.hero-viz .ai-status{font-size:9.5px;color:var(--hv-teal);font-weight:500;display:flex;align-items:center;gap:4px;}
.hero-viz .live-dot{width:5px;height:5px;background:var(--hv-green);border-radius:50%;animation:hvBlink 1.5s ease-in-out infinite;}

/* Caller info bar */
.hero-viz .ai-caller{display:flex;align-items:center;justify-content:space-between;padding:6px 13px;background:rgba(15,43,70,.5);}
.hero-viz .ai-caller-info{display:flex;align-items:center;gap:6px;}
.hero-viz .ai-caller-av{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;}
.hero-viz .ai-caller-av svg{width:10px;height:10px;color:var(--hv-g400);}
.hero-viz .ai-caller-name{font-size:9.5px;font-weight:600;color:var(--hv-g300);}
.hero-viz .ai-caller-loc{font-size:8.5px;color:var(--hv-g400);}
.hero-viz .ai-timer{font-size:11px;font-weight:700;color:var(--hv-teal);font-variant-numeric:tabular-nums;}

.hero-viz .ai-chat{padding:10px 13px;display:flex;flex-direction:column;gap:6px;}
.hero-viz .msg{max-width:88%;padding:8px 11px;border-radius:14px;font-size:10.5px;line-height:1.5;font-weight:500;opacity:0;animation:hvFadeMsg .4s ease forwards;}
.hero-viz .msg.c{align-self:flex-end;background:var(--hv-g100);color:var(--hv-g700);border-bottom-right-radius:4px;animation-delay:.5s;}
.hero-viz .msg.a{align-self:flex-start;background:linear-gradient(135deg,var(--hv-teal-dim),rgba(0,180,216,.04));color:var(--hv-navy);border:1px solid rgba(0,180,216,.10);border-bottom-left-radius:4px;animation-delay:1.3s;}
.hero-viz .msg.ok{align-self:center;width:fit-content;background:var(--hv-green-dim);color:var(--hv-green);font-weight:700;text-align:center;border-radius:10px;border:1px solid rgba(16,185,129,.15);display:flex;align-items:center;gap:5px;animation-delay:2.3s;}
.hero-viz .msg.ok svg{width:11px;height:11px;color:var(--hv-green);flex-shrink:0;}

/* ============================================================
   CONNECTOR DOTS (subtle)
   ============================================================ */
.hero-viz .dot{position:absolute;width:5px;height:5px;background:var(--hv-teal);border-radius:50%;opacity:.25;animation:hvPulseDot 3s ease-in-out infinite;}
.hero-viz .d1{top:210px;left:305px;animation-delay:0s;}
.hero-viz .d2{top:135px;left:320px;animation-delay:1s;}
.hero-viz .d3{top:360px;left:210px;animation-delay:.5s;}
.hero-viz .d4{bottom:200px;right:278px;animation-delay:1.5s;}

/* ============================================================
   ANIMATIONS (prefixed hv* to avoid global collisions)
   ============================================================ */
@keyframes hvFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hvFloatB{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(.3deg)}}
@keyframes hvFloatC{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes hvFloatD{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hvSlideIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes hvFadeMsg{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes hvGrowBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hvPulseBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes hvBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes hvPulseDot{0%,100%{opacity:.15;transform:scale(1)}50%{opacity:.4;transform:scale(1.6)}}
@keyframes hvPinBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ============================================================
   SIZING OVERRIDES so the composition plays nice inside
   .hero-visual (which was built around a 580px-wide <img>).
   ============================================================ */
.hero-visual .hero-viz{
  max-width:660px;
  width:100%;
}
/* Prevent the global .hero-visual picture placeholder styles from
   painting behind the composition if anything ever renders a <picture>. */
.hero-visual .hero-viz + picture,
.hero-visual .hero-viz ~ picture{display:none;}

/* The composition (740px) is taller than the left column (H1 + CTAs),
   so vertically center both grid columns rather than stretching them. */
.hero-section .hero-grid{align-items:center;}

/* ============================================================
   RESPONSIVE
   Below ~992px the hero-grid stacks into a single column and the
   visual has less horizontal room than the 4 absolute-positioned
   cards need. Switch the whole composition from absolute-positioning
   mode to a simple vertical stack: cards flow one after another,
   full-width, with a small gap between each. This reads cleanly
   on any narrow viewport and eliminates every overlap.
   ============================================================ */
@media (max-width:991px){
  .hero-viz{
    height:auto !important;
    max-width:440px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:20px;
    transform:none !important;
  }

  /* Turn off every card's absolute positioning so they stack naturally. */
  .hero-viz .card{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    /* Drop the float animations — they only make sense when cards are
       absolutely placed; in a stack they'd just bounce in place. */
    animation:none !important;
  }

  /* Decorative connector dots are desktop-only. */
  .hero-viz .dot{display:none;}
}

/* Smaller phones: tighten the gap a bit. */
@media (max-width:480px){
  .hero-viz{
    max-width:100%;
    gap:16px;
  }
}

/* ============================================================
   ACCESSIBILITY — respect user's reduced-motion preference.
   Keeps everything visible in final-frame state, just stops motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .hero-viz *,
  .hero-viz *::before,
  .hero-viz *::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    animation-delay:0ms!important;
    transition-duration:0.01ms!important;
  }
}