@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Baloo+2:wght@600;700;800&display=swap');
/* =====================================================================
   DigiMitra — THEME: "Playful Arcade / Bold"
   Loads AFTER dm.css + anim.css and overrides them. Deep-indigo base,
   blue→purple→pink gradient primary, hot-pink + lime pops, chunky
   rounded shapes, bold display type. Green is reserved for WhatsApp only.
   ===================================================================== */
:root{
  /* base (deep indigo night) */
  --bg:#0C0A1E; --bg-2:#141033; --surface:#1B1640; --surface-2:#251F5A;
  --line:#302A63; --line-2:#443C86;
  --text:#FFFFFF; --body:#C9C4EE; --muted:#8E88C4;

  /* accents */
  --blue:#5B8CFF; --purple:#9B5CF6; --pink:#FF4D9D; --lime:#B6FF3C;
  --gold:#FFD35C; --danger:#FF5C7A;
  --grad:linear-gradient(135deg,#5B8CFF 0%,#9B5CF6 52%,#FF4D9D 100%);
  --grad-soft:linear-gradient(135deg,rgba(91,140,255,.22),rgba(255,77,157,.22));

  /* keep --brand = WhatsApp green (used only on WhatsApp elements now) */
  --brand:#22C55E;

  /* chunkier arcade shapes + glows */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --shadow:0 16px 46px rgba(0,0,0,.55);
  --glow:0 10px 34px rgba(155,92,246,.45);
  --shadow-brand:0 10px 30px rgba(34,197,94,.35);

  /* display font → bold geometric */
  --font-serif:'Space Grotesk','Baloo 2','Inter',sans-serif;
}

/* Ambient aurora backdrop for depth (fixed, cheap, no image) */
body{
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(155,92,246,.20), transparent 60%),
    radial-gradient(900px 520px at -5% 12%, rgba(91,140,255,.16), transparent 55%),
    radial-gradient(800px 500px at 50% 120%, rgba(255,77,157,.12), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* ---------- Display type ---------- */
.hero h1, .sec-head h2, .pd-info h1, .footer-brand, .logo, .trust-cell .n,
h1, h2, h3{ font-family:var(--font-serif); letter-spacing:-.01em; }
.hero h1{ font-weight:700; }
.hero h1 em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow{ color:var(--pink); }

/* Gradient trust numbers */
.trust-cell .n{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Buttons: bold rounded pills ---------- */
.btn{ border-radius:100px; font-weight:700; }
.btn-primary{ background:var(--grad); color:#fff; box-shadow:var(--glow); }
.btn-primary:hover{ background:var(--grad); filter:brightness(1.08); transform:translateY(-2px); }
.btn-gold{ background:linear-gradient(135deg,#FFDE7A,#FFB020); color:#3a2600; box-shadow:0 10px 30px rgba(255,179,32,.35); }
.btn-ghost{ border:1.5px solid var(--line-2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--purple); color:#fff; background:rgba(155,92,246,.12); }

/* WhatsApp-specific stay GREEN (identity) */
.wa-btn{ color:var(--brand); border-color:rgba(34,197,94,.4); }
.fab{ background:var(--brand); color:#052e16; box-shadow:var(--shadow-brand); }

/* ---------- Announcement: gradient bar ---------- */
.announce{ background:var(--grad); color:#fff; font-weight:700; }
.announce a{ color:#fff; }

/* ---------- Header: glass ---------- */
.site-header{ background:rgba(12,10,30,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.logo span{ color:var(--pink); }

/* ---------- Cards: rounded, glow, gradient hairline ---------- */
.pcard{ border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); }
.pcard:hover{ border-color:transparent; box-shadow:0 20px 50px rgba(91,140,255,.28), 0 0 0 1.5px rgba(155,92,246,.5); }
.pcard-media{ background:linear-gradient(160deg,var(--surface-2),var(--surface)); }
.pcard-name{ color:#fff; }
.pcard-price .cur, .detail-cur, .tripwire .cur, .buybar-price .cur{ color:var(--gold); }
.pcard-off{ background:var(--lime); color:#152600; font-weight:800; }

/* ---------- Category tiles: emoji in a colorful gradient chip ---------- */
.catcard{ border-radius:var(--r-lg); background:var(--surface); }
.catcard:hover{ border-color:var(--purple); box-shadow:0 16px 36px rgba(155,92,246,.28); }
.catcard .ico{
  width:58px; height:58px; display:inline-flex; align-items:center; justify-content:center;
  font-size:28px; border-radius:16px; background:var(--grad-soft);
  border:1px solid var(--line-2); box-shadow:inset 0 0 18px rgba(155,92,246,.15);
}

/* ---------- Badges ---------- */
.badge{ border-radius:100px; font-weight:800; }
.badge-hot{ background:rgba(255,77,157,.16); color:#ff7fbc; border:1px solid rgba(255,77,157,.4); }
.badge-best{ background:rgba(255,211,92,.16); color:var(--gold); border:1px solid rgba(255,211,92,.4); }
.badge-new{ background:rgba(182,255,60,.14); color:#cfff7a; border:1px solid rgba(182,255,60,.35); }
.badge-free{ background:var(--lime); color:#152600; }
.eyebrow, .pcard-cat, .pd-cat{ color:var(--pink); }

/* ---------- Section surfaces ---------- */
.trustbar, .proof{ background:rgba(20,16,51,.6); }
.how-card, .review, .card, .flipbook, .tripwire, .pd-trust, .pop, .buybar{ border-radius:var(--r-lg); }
.tripwire{ background:linear-gradient(135deg,rgba(91,140,255,.10),rgba(255,77,157,.10)); border:1px solid var(--line-2); }

/* ---------- Value + countdown pops ---------- */
.value-note{ background:rgba(182,255,60,.12); border-color:rgba(182,255,60,.35); color:#cfff7a; }
.countdown{ color:var(--gold); background:rgba(255,211,92,.10); border-color:rgba(255,211,92,.3); }

/* ---------- Popup: gradient top ---------- */
.pop-top{ background:var(--grad); color:#fff; }
.pop-top h3{ color:#fff; }
.today{ background:rgba(255,255,255,.2); color:#fff; }

/* ---------- Filters / chips (shop) ---------- */
.filter-chip.active{ background:var(--grad); color:#fff; border-color:transparent; }
.link-arrow{ color:var(--blue); }
.link-arrow:hover{ color:var(--pink); }

/* ---------- Ambient glow recolor (override anim.css greens) ---------- */
.hero::before{ background:radial-gradient(circle, rgba(155,92,246,.28), transparent 62%); }
.hero::after{ background:radial-gradient(circle, rgba(255,77,157,.20), transparent 62%); }
.nav a::after{ background:var(--grad); }
.site-header.scrolled{ box-shadow:0 8px 30px rgba(91,140,255,.18); }

/* proof chat bubble → subtle purple instead of green */
.pc-bubble{ background:rgba(155,92,246,.16); border-color:rgba(155,92,246,.3); }
.pc-status, .pc-av{ color:var(--blue); }