/* ============================================================================
   LeadCRM — clean light marketing system  (leadhub.sbs / mlsons.in inspired)
   Builds on public/layout.php vars: --bg --surface --text --muted --border --card
   Light-first, professional, conversion-focused. Dark toggle still supported.
   ========================================================================== */

:root{
  --c-brand:#2563eb; --c-violet:#7c3aed; --c-accent:#06b6d4; --c-green:#16a34a;
  --ease:cubic-bezier(.16,1,.3,1);
  --ring:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(37,99,235,.18);
  --ring-lg:0 1px 2px rgba(15,23,42,.05),0 30px 60px -24px rgba(37,99,235,.28);
}

/* soft light page wash (very subtle, professional) */
html:not(.dark) body{
  background:
    radial-gradient(900px 500px at 85% -8%,rgba(37,99,235,.07),transparent 60%),
    radial-gradient(800px 460px at -10% 8%,rgba(6,182,212,.07),transparent 55%),
    #f8fafc;
}

/* keep real content above the soft background blobs */
nav,header,section,footer{position:relative;z-index:2}

/* ---- subtle ambient blobs (light) ---- */
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:0}
.fx-mesh{overflow:hidden}
.fx-mesh::before,.fx-mesh::after{content:"";position:absolute;width:46vw;height:46vw;border-radius:50%;filter:blur(80px);opacity:.5}
.fx-mesh::before{top:-8vw;right:-8vw;background:radial-gradient(circle,rgba(37,99,235,.14),transparent 60%)}
.fx-mesh::after{bottom:-12vw;left:-10vw;background:radial-gradient(circle,rgba(124,58,237,.12),transparent 60%)}
html.dark .fx-mesh::before{background:radial-gradient(circle,rgba(37,99,235,.4),transparent 60%);opacity:.5}
html.dark .fx-mesh::after{background:radial-gradient(circle,rgba(124,58,237,.4),transparent 60%);opacity:.5}

.kicker{background:linear-gradient(135deg,#2563eb,#06b6d4 55%,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ----------------------------------------------------------------------------
   HERO — clean illustration stage with soft floating cards (no WebGL)
   ---------------------------------------------------------------------------- */
.stage{position:relative;width:100%;max-width:460px;margin-inline:auto;aspect-ratio:1/1}
.stage-glow{position:absolute;inset:14%;border-radius:50%;filter:blur(46px);opacity:.22;
  background:conic-gradient(from 0deg,#2563eb,#06b6d4,#7c3aed,#2563eb);animation:spin 26s linear infinite}
html.dark .stage-glow{opacity:.5}
.stage-disc{position:absolute;left:50%;bottom:10%;translate:-50% 0;width:74%;height:16%;border-radius:50%;
  background:radial-gradient(50% 60% at 50% 40%,rgba(37,99,235,.22),transparent 70%);filter:blur(10px)}
.holo-ring{position:absolute;inset:12%;border-radius:50%;border:1.5px dashed rgba(37,99,235,.18);animation:spin 30s linear infinite reverse}
.holo-ring::after{content:"";position:absolute;inset:9%;border-radius:50%;border:1.5px dashed rgba(124,58,237,.16);animation:spin 20s linear infinite}
.char{position:absolute;inset:0;display:grid;place-items:center;filter:drop-shadow(0 24px 30px rgba(15,23,42,.18))}
.char svg{width:60%;height:auto;animation:bob 6s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-12px) rotate(.4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

.orbit{position:absolute;z-index:3;border-radius:.95rem;padding:.65rem .8rem;background:var(--card);
  border:1px solid var(--border);box-shadow:var(--ring);animation:bob 7s var(--ease) infinite}
.orbit small{color:var(--muted);font-size:10px;display:block;line-height:1.1}
.orbit b{font-family:'Manrope',sans-serif;font-size:14px}
.orbit.o1{top:4%;left:-6%;animation-delay:.2s}
.orbit.o2{top:20%;right:-8%;animation-delay:1.1s}
.orbit.o3{bottom:18%;left:-9%;animation-delay:.6s}
.orbit.o4{bottom:2%;right:-3%;animation-delay:1.6s}

/* ----------------------------------------------------------------------------
   METRICS strip (50M+ Leads · 5K+ Teams · 98% style)
   ---------------------------------------------------------------------------- */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.metric .num{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(1.6rem,4vw,2.2rem);line-height:1;
  background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.metric .lbl{color:var(--muted);font-size:12px;margin-top:.25rem}

/* ----------------------------------------------------------------------------
   HOW IT WORKS — 3 steps (leadhub-style numbered flow)
   ---------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;position:relative}
.step{background:var(--card);border:1px solid var(--border);border-radius:1.25rem;padding:1.6rem;box-shadow:var(--ring);position:relative}
.step .no{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-family:'Manrope',sans-serif;
  background:linear-gradient(135deg,#2563eb,#7c3aed);box-shadow:0 8px 20px -8px rgba(37,99,235,.6)}
@media (min-width:880px){
  .steps::before{content:"";position:absolute;top:60px;left:16%;right:16%;height:2px;
    background:linear-gradient(90deg,rgba(37,99,235,.25),rgba(124,58,237,.25));z-index:0}
  .step{z-index:1}
}
@media (max-width:880px){.steps{grid-template-columns:1fr}}
/* keep hero metrics as a compact horizontal row on phones (don't stack) */
@media (max-width:880px){.metrics{gap:.85rem}}
@media (max-width:420px){.metrics{gap:.55rem}.metric .num{font-size:1.5rem}.metric .lbl{font-size:10.5px}}

/* ----------------------------------------------------------------------------
   Buttons — magnetic + sheen
   ---------------------------------------------------------------------------- */
.magnetic{will-change:transform;transition:transform .25s var(--ease)}
.btn-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-weight:600;
  padding:.85rem 1.6rem;border-radius:.85rem;box-shadow:0 10px 24px -10px rgba(37,99,235,.65);
  transition:transform .15s var(--ease),box-shadow .25s,filter .2s}
.btn-cta:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 32px -10px rgba(37,99,235,.7)}
.btn-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn-cta:hover::after{transform:translateX(130%)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:.85rem;font-weight:600;
  background:var(--card);border:1px solid var(--border);color:var(--text);box-shadow:var(--ring);transition:.2s var(--ease)}
.btn-ghost:hover{border-color:rgba(37,99,235,.45);color:var(--c-brand);transform:translateY(-2px)}

/* soft white feature card */
.tile{background:var(--card);border:1px solid var(--border);border-radius:1.25rem;box-shadow:var(--ring);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.tile:hover{transform:translateY(-6px);box-shadow:var(--ring-lg);border-color:rgba(37,99,235,.3)}

/* trust badges */
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .85rem;border-radius:.7rem;background:var(--card);border:1px solid var(--border);font-size:12px;color:var(--muted);box-shadow:var(--ring)}

/* live mini-feed pill (kept, subtle) */
.live-feed{display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .85rem;border-radius:999px;background:var(--card);border:1px solid var(--border);font-size:13px;box-shadow:var(--ring);overflow:hidden}
.live-feed .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:ping2 1.8s infinite}
@keyframes ping2{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}100%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}

/* ----------------------------------------------------------------------------
   AI CHAT assistant (kept; clean light)
   ---------------------------------------------------------------------------- */
.chat-fab{position:fixed;left:1.1rem;bottom:1.1rem;z-index:61;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;border:none;
  background:linear-gradient(135deg,#2563eb,#7c3aed);box-shadow:0 16px 36px -10px rgba(37,99,235,.6);transition:transform .25s var(--ease)}
.chat-fab:hover{transform:scale(1.07) rotate(-4deg)}
.chat-fab .pulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(124,58,237,.5);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.chat-panel{position:fixed;left:1.1rem;bottom:5rem;z-index:61;width:330px;max-width:calc(100vw - 2.2rem);border-radius:1.2rem;overflow:hidden;background:var(--card);border:1px solid var(--border);box-shadow:0 30px 70px -24px rgba(15,23,42,.4);transform:translateY(16px) scale(.96);opacity:0;visibility:hidden;transform-origin:bottom left;transition:.35s var(--ease)}
/* lift chat above the mobile bottom action bar so nothing overlaps */
@media (max-width:1023px){ .chat-fab{bottom:5.6rem} .chat-panel{bottom:9.6rem} }
.chat-panel.open{transform:none;opacity:1;visibility:visible}
.chat-top{padding:.9rem 1rem;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff}
.chat-body{padding:1rem;display:flex;flex-direction:column;gap:.6rem;max-height:46vh;overflow:auto}
.bubble{max-width:84%;padding:.6rem .8rem;border-radius:1rem;font-size:13px;line-height:1.45}
.bubble.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:.3rem}
html:not(.dark) .bubble.bot{background:#f1f5f9}
.bubble.me{align-self:flex-end;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border-bottom-right-radius:.3rem}
.chat-quick{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem 1rem}
.chat-quick button{font-size:11px;padding:.35rem .6rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:.2s}
html:not(.dark) .chat-quick button{background:#f1f5f9}
.chat-quick button:hover{border-color:var(--c-brand);color:var(--c-brand)}
.typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted);margin:0 1px;animation:typing 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* ============================================================================
   VIBRANT HERO BACKGROUND  (colorful animated aurora + grid)
   ========================================================================== */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}

/* floating colored aurora blobs (pink · red · blue · violet · cyan)
   normal blending + opacity so they're reliably visible (no blend-mode that
   the header's stacking context would swallow) */
.hb-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.6;will-change:transform}
html.dark .hb-blob{opacity:.55;filter:blur(86px)}
.hb1{width:34vw;height:34vw;background:radial-gradient(circle,#ec4899,transparent 67%);top:-8vw;left:-5vw;animation:hbFloat 19s var(--ease) infinite}
.hb2{width:30vw;height:30vw;background:radial-gradient(circle,#3b82f6,transparent 67%);top:-6vw;right:-4vw;animation:hbFloat 23s var(--ease) infinite reverse}
.hb3{width:30vw;height:30vw;background:radial-gradient(circle,#8b5cf6,transparent 67%);bottom:-12vw;left:24%;animation:hbFloat 21s var(--ease) infinite}
.hb4{width:25vw;height:25vw;background:radial-gradient(circle,#06b6d4,transparent 67%);bottom:-7vw;right:12%;animation:hbFloat 27s var(--ease) infinite}
.hb5{width:22vw;height:22vw;background:radial-gradient(circle,#f43f5e,transparent 70%);top:34%;left:46%;opacity:.4;animation:hbFloat 25s var(--ease) infinite reverse}
@keyframes hbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(3vw,-2.2vw) scale(1.09)}66%{transform:translate(-2.6vw,2vw) scale(.93)}}

/* faint grid for depth, faded with a radial mask */
.hb-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(99,102,241,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.07) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000,transparent 76%);
          mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000,transparent 76%)}
html.dark .hb-grid{background-image:linear-gradient(rgba(148,163,184,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.09) 1px,transparent 1px)}

/* soft fade into the page below so the hero blends seamlessly */
.hb-veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,var(--bg) 99%)}

/* tiny twinkling sparkles */
.hb-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(255,255,255,.8);opacity:.7;animation:twinkle 4s ease-in-out infinite}
html:not(.dark) .hb-spark{background:#fff;box-shadow:0 0 10px 2px rgba(236,72,153,.55)}
.hb-spark.k1{top:22%;left:18%;animation-delay:.2s}
.hb-spark.k2{top:30%;right:22%;animation-delay:1.2s;background:#a5f3fc;box-shadow:0 0 10px 2px rgba(6,182,212,.7)}
.hb-spark.k3{bottom:26%;left:40%;animation-delay:2.1s;background:#fbcfe8;box-shadow:0 0 10px 2px rgba(236,72,153,.7)}
.hb-spark.k4{top:48%;right:34%;animation-delay:3s;background:#bfdbfe;box-shadow:0 0 10px 2px rgba(59,130,246,.7)}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.95;transform:scale(1)}}

/* ---- unique hero typography (Space Grotesk display) ---- */
#product h1{font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif;font-weight:700;
  letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
#product h1 .kicker{font-weight:700;font-style:italic;letter-spacing:-.04em;padding-right:.06em}
#product .hero-badge{font-family:'Space Grotesk',sans-serif;letter-spacing:.04em;text-transform:uppercase}
#product .metric .num{font-family:'Space Grotesk','Manrope',sans-serif;letter-spacing:-.02em}
#product .btn-cta{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.01em}
@media (max-width:880px){#product h1{letter-spacing:-.03em}}

/* animated multi-color headline accent (overrides the static kicker) */
.kicker{background:linear-gradient(90deg,#ec4899,#f43f5e,#3b82f6,#8b5cf6,#ec4899);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:heroFlow 7s linear infinite}
@keyframes heroFlow{to{background-position:300% 50%}}

/* colorful gradient-ring badge */
.hero-badge{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:999px;
  font-size:12px;font-weight:600;color:#db2777;border:1px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(90deg,#ec4899,#3b82f6,#8b5cf6) border-box;
  box-shadow:0 8px 24px -12px rgba(236,72,153,.5)}
html.dark .hero-badge{color:#f9a8d4}

/* vibrant hero CTA (scoped — leaves site-wide buttons untouched) */
#product .btn-cta{background:linear-gradient(120deg,#ec4899,#f43f5e 42%,#3b82f6);background-size:170% 100%;
  box-shadow:0 14px 34px -12px rgba(236,72,153,.6);animation:heroFlow 6s linear infinite}
#product .btn-cta:hover{filter:brightness(1.07) saturate(1.05)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}