/* 9amLeads - shared "lead page" extras.
   Self-contained + namespaced so it is SAFE to add to standalone landing pages
   (city pages) without dragging in product-page theming. Adds an ambient accent
   backdrop + the lead-type showcase band styling (3D art + gradient). */

/* Rich ambient backdrop (colourful + patterned - never a flat plain colour) */
body{
  background-color:#eef5fd;
  background-image:
    radial-gradient(1400px 820px at 6% -10%, rgba(14,165,233,.22), transparent 55%),
    radial-gradient(1300px 820px at 98% 110%, rgba(99,102,241,.20), transparent 55%),
    radial-gradient(1000px 720px at 62% 42%, rgba(56,189,248,.11), transparent 60%),
    radial-gradient(circle, rgba(14,165,233,.13) 1px, transparent 1.7px);
  background-size:auto,auto,auto,24px 24px;
  background-attachment:fixed;
}
@media (prefers-color-scheme:dark){
  body{
    background-color:#0a1120;
    background-image:
      radial-gradient(1400px 820px at 6% -10%, rgba(14,165,233,.28), transparent 55%),
      radial-gradient(1300px 820px at 98% 110%, rgba(99,102,241,.28), transparent 55%),
      radial-gradient(circle, rgba(125,211,252,.12) 1px, transparent 1.7px);
  }
}

/* Lead-type showcase band */
.lead-showcase{position:relative;overflow:hidden;padding:60px 24px;background:linear-gradient(135deg,#0b1220 0%,#111c33 55%,#0b1220 100%)}
.lead-showcase::before{content:"";position:absolute;inset:-30% -10%;pointer-events:none;background:radial-gradient(620px 320px at 14% 18%,rgba(14,165,233,.30),transparent 70%),radial-gradient(560px 320px at 86% 82%,rgba(99,102,241,.30),transparent 70%)}
.lead-showcase::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.lead-showcase .ls-grid{position:relative;z-index:2;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.lead-showcase .ls-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#7dd3fc;margin-bottom:10px}
.lead-showcase h2{margin:0 0 10px;font-size:clamp(22px,3vw,34px);font-weight:900;line-height:1.12;color:#fff;letter-spacing:-.6px}
.lead-showcase p{margin:0 0 16px;color:rgba(226,234,255,.84);font-size:16px;line-height:1.65;max-width:560px}
.lead-showcase .ls-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.lead-showcase .ls-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:rgba(226,234,255,.92)}
.lead-showcase .ls-list i{color:#38bdf8}
.lead-showcase .ls-cta{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:50px;font-weight:800;font-size:14.5px;text-decoration:none;background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff;box-shadow:0 14px 34px rgba(14,165,233,.35);transition:transform .2s ease,box-shadow .25s ease}
.lead-showcase .ls-cta:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(14,165,233,.5)}
.lead-showcase .ls-media{position:relative;display:flex;align-items:center;justify-content:center}
.lead-showcase .ls-media::after{content:"";position:absolute;width:72%;height:72%;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.4),transparent 70%);filter:blur(44px);z-index:0}
.lead-showcase .ls-media img{position:relative;z-index:1;width:100%;max-width:420px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));animation:lsFloat 6s ease-in-out infinite}
@keyframes lsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:820px){.lead-showcase{padding:44px 20px}.lead-showcase .ls-grid{grid-template-columns:1fr;gap:26px}.lead-showcase .ls-media{order:-1}.lead-showcase .ls-media img{max-width:290px}}
@media (prefers-reduced-motion:reduce){.lead-showcase .ls-media img{animation:none}}

/* Second-band variant (deeper "why 9amLeads" band) */
.lead-showcase.ls-soft{background:linear-gradient(135deg,#0f1a2e 0%,#16284a 55%,#0f1a2e 100%)}
.lead-showcase .ls-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.lead-showcase .ls-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:13px;color:#e8eefb;font-weight:600}
.lead-showcase .ls-chip i{color:#7dd3fc}
@media(min-width:821px){.lead-showcase.ls-flip .ls-media{order:-1}}

/* Lead-types picture strip (band 3) */
.lead-showcase.is-types{text-align:center}
.lead-showcase.is-types .ls-types{position:relative;z-index:2;max-width:1120px;margin:0 auto}
.lead-showcase.is-types p{max-width:620px;margin:0 auto 20px}
.lead-showcase .ls-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-top:8px}
.lead-showcase .ls-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-decoration:none;color:#e8eefb;font-weight:700;font-size:13px;transition:transform .25s ease,background .25s ease}
.lead-showcase .ls-tile:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)}
.lead-showcase .ls-tile img{width:64px;height:64px;object-fit:contain}

/* ===== RICHER SECTION BACKGROUNDS (light tints; text stays readable) ===== */
section:not(.hero):not(.lead-showcase):not(.no-tint),
.section:not(.hero):not(.lead-showcase):not(.no-tint){
  background-image:
    radial-gradient(980px 460px at 88% -8%, rgba(56,189,248,.20), transparent 62%),
    radial-gradient(820px 460px at 4% 108%, rgba(129,140,248,.20), transparent 62%),
    linear-gradient(180deg, rgba(14,165,233,.10), rgba(99,102,241,.07)) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}
:root.dark section:not(.hero):not(.lead-showcase):not(.no-tint),
html.dark section:not(.hero):not(.lead-showcase):not(.no-tint),
:root.dark .section:not(.hero):not(.lead-showcase):not(.no-tint),
html.dark .section:not(.hero):not(.lead-showcase):not(.no-tint){
  background-image:
    radial-gradient(980px 460px at 88% -8%, rgba(56,189,248,.30), transparent 62%),
    radial-gradient(820px 460px at 4% 108%, rgba(129,140,248,.30), transparent 62%),
    linear-gradient(180deg, rgba(14,165,233,.14), rgba(99,102,241,.10)) !important;
}
/* ===== EXTRA HOVER + MOTION EFFECTS (interactivity site-wide) ===== */
/* Buttons: sheen sweep + lift + press feedback */
.btn,.ls-cta,.btn-pill{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .28s ease,filter .2s ease}
.btn:hover,.ls-cta:hover,.btn-pill:hover{transform:translateY(-2px) scale(1.02)}
.btn::after,.ls-cta::after,.btn-pill::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn:hover::after,.ls-cta:hover::after,.btn-pill:hover::after{left:120%}
.btn:active,.ls-cta:active{transform:translateY(0) scale(.985)}
/* Cards + tiles: lift + accent glow */
.card,.feat-card,.photo-card,.ls-tile{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease,background .3s ease}
.card:hover,.feat-card:hover,.photo-card:hover{transform:translateY(-6px);box-shadow:0 22px 52px rgba(14,165,233,.22)}
.lead-showcase .ls-tile:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(14,165,233,.30);background:rgba(255,255,255,.14);border-color:rgba(125,211,252,.55)}
/* Lead-type tile art pops */
.lead-showcase .ls-tile img{transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.lead-showcase .ls-tile:hover img{transform:scale(1.14) translateY(-5px);filter:drop-shadow(0 10px 20px rgba(0,0,0,.45))}
/* Floating 3D art in the bands */
.lead-showcase .ls-media img{animation:lsFloat 6s ease-in-out infinite}
.lead-showcase.ls-flip .ls-media img{animation:hxDrift2 7s ease-in-out infinite}
/* Animated band glows */
.lead-showcase::before{animation:hxGlow 20s ease-in-out infinite alternate}
@keyframes hxGlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(3%,-3%,0)}}
@keyframes hxDrift2{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}
/* Links: animated underline */
.links a,footer a,main p a,.card a{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s ease}
.links a:hover,footer a:hover,main p a:hover,.card a:hover{background-size:100% 1px}
/* Heading hover glow */
.section-title,.lead-showcase h2,.section h2{transition:text-shadow .3s ease}
.section-title:hover,.lead-showcase h2:hover{text-shadow:0 0 26px rgba(56,189,248,.4)}
@media (prefers-reduced-motion:reduce){.btn:hover,.ls-cta:hover,.card:hover,.feat-card:hover,.photo-card:hover,.ls-tile:hover{transform:none}.lead-showcase::before{animation:none}.lead-showcase .ls-media img{animation:none}}
/* ===== "WHY IT WORKS FOR YOU" benefit cards (band 4) ===== */
.lead-showcase.is-why .ls-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0 0}
.lead-showcase.is-why .ls-benefit{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 16px;text-align:left;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.lead-showcase.is-why .ls-benefit:hover{transform:translateY(-4px);background:rgba(255,255,255,.11);border-color:rgba(125,211,252,.45)}
.lead-showcase.is-why .ls-benefit i{font-size:18px;color:#7dd3fc;display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:rgba(56,189,248,.14);margin-bottom:10px}
.lead-showcase.is-why .ls-benefit h3{margin:0 0 6px;font-size:15.5px;color:#fff;font-weight:800}
.lead-showcase.is-why .ls-benefit p{margin:0;font-size:13.5px;color:rgba(226,234,255,.82);line-height:1.6}
.lead-showcase.is-why .ls-copy{max-width:none;text-align:left}
.lead-showcase.is-why p.ls-intro{max-width:820px}
/* ===== LEAD-SHOWCASE → LIGHT THEME (matches the light site) ===== */
.lead-showcase{background:linear-gradient(135deg,#f2f8ff 0%,#eef2ff 55%,#f2f8ff 100%)!important;border-top-color:#e2e8f0!important;border-bottom-color:#e2e8f0!important}
.lead-showcase.ls-soft{background:linear-gradient(135deg,#eef4ff 0%,#e8efff 55%,#eef4ff 100%)!important}
.lead-showcase::before{background:radial-gradient(620px 320px at 14% 18%,rgba(14,165,233,.14),transparent 70%),radial-gradient(560px 320px at 86% 82%,rgba(99,102,241,.14),transparent 70%)!important}
.lead-showcase::after{background-image:linear-gradient(rgba(15,23,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.05) 1px,transparent 1px)!important;opacity:.55!important}
.lead-showcase .ls-eyebrow{color:#0284c7!important}
.lead-showcase h2{color:#0f172a!important}
.lead-showcase p,.lead-showcase p.ls-intro{color:#475569!important}
.lead-showcase .ls-list li{color:#334155!important}
.lead-showcase .ls-list i{color:#0ea5e9!important}
.lead-showcase .ls-media img{filter:drop-shadow(0 24px 44px rgba(14,165,233,.22))!important}
.lead-showcase .ls-tile{background:#ffffff!important;border-color:#e2e8f0!important;color:#0f172a!important;box-shadow:0 4px 14px rgba(2,8,23,.06)!important}
.lead-showcase .ls-tile:hover{background:#ffffff!important;border-color:#93c5fd!important;box-shadow:0 16px 36px rgba(14,165,233,.20)!important}
.lead-showcase .ls-tile img{filter:none!important}
.lead-showcase.is-why .ls-benefit{background:#ffffff!important;border-color:#e2e8f0!important;box-shadow:0 4px 14px rgba(2,8,23,.06)!important}
.lead-showcase.is-why .ls-benefit:hover{background:#ffffff!important;border-color:#93c5fd!important}
.lead-showcase.is-why .ls-benefit h3{color:#0f172a!important}
.lead-showcase.is-why .ls-benefit p{color:#475569!important}
.lead-showcase.is-why .ls-benefit i{background:rgba(14,165,233,.12)!important;color:#0284c7!important}
.lead-showcase .ls-chip{background:#ffffff!important;border-color:#e2e8f0!important;color:#334155!important}
.lead-showcase .ls-chip i{color:#0ea5e9!important}