/* ==========================================================================
   AgencyFix Hero layer (afx-hero.css) — the canonical .afx page hero.
   Extracted from the verified live hero on /local-seo/ (#ls), cross-checked
   against /websites/ (#wb). Loads site-wide after afx.css so the [afx_hero]
   shortcode renders identically on every page (and every white-label client
   site) — the CSS lives HERE, never in a page-local <style>. That page-local
   pattern is exactly what drifted /ai-receptionist/ and rendered unstyled on
   mobile (doc 169). Scoped to .afx like the rest of the system.
   ========================================================================== */

/* Full-bleed bright gradient stage. */
.afx .hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#f4f2ff 0%,#f8f7ff 55%,#fff 100%);}

/* Animated AURA — radial indigo/cyan wash, blurred, slowly drifting. */
.afx .hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;
  background:radial-gradient(40% 50% at 20% 20%,rgba(99,102,241,.35),transparent),
             radial-gradient(40% 50% at 80% 10%,rgba(34,211,238,.28),transparent);
  filter:blur(30px);animation:afxAura 16s ease-in-out infinite;z-index:0;pointer-events:none;}
@keyframes afxAura{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-4%,3%) scale(1.08);}}

/* Content sits above the aura. */
.afx .hero .wrap{position:relative;z-index:1;}
.afx .hero{padding-block:clamp(64px,9vw,130px);}

/* Two-column hero grid: copy + mockup. Single column on mobile. */
.afx .hgrid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,44px);align-items:center;}
@media(min-width:920px){.afx .hgrid{grid-template-columns:1.1fr .9fr;}}

/* Copy column. */
.afx .hero .hcopy .eyebrow{margin-bottom:var(--sp-stack);}
.afx .hero h1{margin:0;}
.afx .hero .lead{margin-top:var(--sp-head-copy);color:var(--muted);max-width:34ch;}
.afx .hero .btn-row{margin-top:var(--sp-copy-cta);}
.afx .hero .htrust{margin-top:clamp(16px,2vw,22px);font-size:.9rem;color:var(--muted);
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.afx .hero .htrust::before{content:"";width:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ac),var(--ac2));}

/* Signature gradient headline accent — the <em> the shortcode wraps `highlight` in. */
.afx .hero h1 em,.afx .grad{font-style:inherit;
  background:linear-gradient(120deg,var(--ac),var(--ac2));
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* Mockup column — a clean animated "rank rows" card (map-pack style). */
.afx .hmock{position:relative;}
.afx .hmock .mock{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow-card);
  padding:clamp(1rem,2vw,1.4rem);animation:afxBob 7s ease-in-out infinite;}
.afx .hmock .mock-hd{display:flex;align-items:center;gap:.5rem;
  font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:.7rem;}
.afx .hmock .mock-hd .dot{width:8px;height:8px;border-radius:50%;
  background:var(--ok2);box-shadow:0 0 0 4px rgba(52,211,153,.18);}
.afx .hmock .mrow{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;
  border:1px solid var(--line);border-radius:12px;margin-top:.5rem;background:var(--soft);
  opacity:0;transform:translateY(8px);animation:afxSeq .6s ease forwards;}
.afx .hmock .mrow:nth-child(2){animation-delay:.15s;}
.afx .hmock .mrow:nth-child(3){animation-delay:.30s;}
.afx .hmock .mrow:nth-child(4){animation-delay:.45s;}
.afx .hmock .mrow:nth-child(5){animation-delay:.60s;}
.afx .hmock .mrow.win{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(34,211,238,.08));
  border-color:rgba(99,102,241,.35);}
.afx .hmock .mrank{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:.78rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--ac),var(--ac-d));}
.afx .hmock .mrow:not(.win) .mrank{background:#c7ccd8;color:#fff;}
.afx .hmock .mlabel{font-size:.9rem;font-weight:600;color:var(--ink);}

@keyframes afxBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes afxSeq{to{opacity:1;transform:none;}}

@media(prefers-reduced-motion:reduce){
  .afx .hero::before,.afx .hmock .mock,.afx .hmock .mrow{animation:none;}
  .afx .hmock .mrow{opacity:1;transform:none;}
}