/* === TagDrop /beta Alt Background Override === */
/* 1) Nuke legacy zebra/white backgrounds that may be winning by specificity */
body .impact, body .how, body .why, body .social, body .pricing, body .faq, body .demo,
body section.alt, body section.section--alt,
body section:nth-of-type(odd), body section:nth-of-type(even) {
  background: transparent !important;
}

/* 2) Apply our dark "alt" surface where intended */
body .section-tint,
body section.section-tint {
  background: rgba(255,255,255,0.04) !important;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: saturate(130%) blur(6px);
}

/* 3) Make sure nested wrappers don't reintroduce light backgrounds */
body .wrap, body .container, body .content {
  background: transparent !important;
}


/* Beta theme force */
body .impact, body .how, body .why, body .social, body .pricing, body .faq, body .demo,
body section.alt, body section.section--alt, body section:nth-of-type(odd), body section:nth-of-type(even){background:transparent!important;}
.section-tint{background:rgba(255,255,255,.04)!important;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:saturate(130%) blur(6px);}
body{background:
 radial-gradient(1200px 600px at 20% -10%, rgba(147,51,234,.20), transparent 60%),
 radial-gradient(900px 500px at 90% 10%, rgba(37,99,235,.18), transparent 60%),
 linear-gradient(180deg, rgba(30,58,138,.65) 0%, rgba(37,99,235,.35) 40%, rgba(147,51,234,.25) 100%),
 #0B1220!important;color:#F8FAFC!important;}
.site-header img{width:44px!important;height:44px!important;border-radius:8px;}
.grad-gold{background:linear-gradient(90deg,#FFD700,#FFB347);-webkit-background-clip:text;background-clip:text;color:transparent!important;}


/* === TagDrop Zebra Alternation (force) === */
:root{
  --td-alt-0: rgba(255,220,140,0.08); /* Warm gold tint to echo brand */
  --td-alt-1: rgba(255,255,255,0.07);  /* Cool white for contrast */
  --td-alt-border: rgba(255,255,255,0.16);
}

/* neutralize any leftover section backgrounds */
body section { background: transparent !important; }

/* explicit alternation */
body .bg-alt-0 { 
  background: var(--td-alt-0) !important;
  border-top: 1px solid var(--td-alt-border);
  border-bottom: 1px solid var(--td-alt-border);
  backdrop-filter: saturate(130%) blur(6px);
}
body .bg-alt-1 { 
  background: var(--td-alt-1) !important;
  border-top: 1px solid var(--td-alt-border);
  border-bottom: 1px solid var(--td-alt-border);
  backdrop-filter: saturate(130%) blur(6px);
}

/* keep nested wrappers transparent */
body .bg-alt-0 .wrap, body .bg-alt-1 .wrap,
body .bg-alt-0 .container, body .bg-alt-1 .container { background: transparent !important; }

/* never zebra the hero */
body #hero.bg-alt-0, body #hero.bg-alt-1 { background: unset !important; border: none !important; }



/* === TagDrop Minimal Sparkle (CSS-only) === */
:root{
  --td-gold-start: #FFD700;
  --td-gold-end:   #FFB347;
}

/* ensure sections can host pseudo-elements without layout shift */
.bg-alt-0, .bg-alt-1 { position: relative; overflow: clip; }

/* Corner glow (brand) — subtle and non-animated */
.bg-alt-0::before,
.bg-alt-1::before{
  content: "";
  position: absolute;
  inset: -1px;             /* bleed to edges */
  pointer-events: none;
  border-radius: 16px;
  opacity: .7;
}
.bg-alt-0::before{
  background:
    radial-gradient(600px 240px at 100% 0%, rgba(255,179,71,0.12), transparent 60%),
    radial-gradient(420px 200px at 0% 100%, rgba(37,99,235,0.10), transparent 60%);
}
.bg-alt-1::before{
  background:
    radial-gradient(600px 240px at 0% 0%, rgba(147,51,234,0.12), transparent 60%),
    radial-gradient(420px 200px at 100% 100%, rgba(255,179,71,0.10), transparent 60%);
}

/* Micro-dot texture for purple sections - more visible */
.bg-alt-1::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:16px;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  opacity:.8;
}

/* Section headings: tiny gold underline for hierarchy */
.section__head h2{
  position:relative; display:inline-block;
}
.section__head h2::after{
  content:""; position:absolute; left:0; bottom:-8px; height:3px; width:28px;
  border-radius:2px;
  background: linear-gradient(90deg, var(--td-gold-start), var(--td-gold-end));
  opacity:.95;
}
/* On darker row, keep the underline; on lighter row, slight blue/purple mix to vary the look */
.bg-alt-1 .section__head h2::after{
  background: linear-gradient(90deg, rgba(147,51,234,.9), rgba(37,99,235,.9));
}

/* Gentle hover lift on cards/pricing */
.card, .price{
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.card:hover, .price:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08) inset;
}

/* Chip polish (no layout change) */
.chip{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}
.chip--accent{
  background: linear-gradient(90deg, #FFD70022, #FFB34722);
  border-color: rgba(255,179,71,0.38);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card, .price { transition: none; }
}