:root{
  --brand-blue:#2563eb;
  --brand-navy:#0f172a;
  --brand-yellow:#facc15;
  --brand-red:#ef4444;
  --brand-orange:#f97316;
  --brand-slate:#334155;
  --surface:#ffffff;
  --soft:#eef5ff;
  --border:#dbe5f1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f8fbff;color:#0f172a}
img{max-width:100%;display:block}
[x-cloak]{display:none!important}
.site-shell{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
.shadow-soft{box-shadow:0 18px 45px rgba(15,23,42,.08)}
.shadow-card{box-shadow:0 8px 30px rgba(37,99,235,.09)}
.border-soft{border-color:rgba(148,163,184,.22)}
.hero-grid{
  background:
    radial-gradient(circle at 8px 8px, rgba(250,204,21,.42) 2px, transparent 2.5px) 0 0/28px 28px,
    linear-gradient(135deg, rgba(37,99,235,.98), rgba(14,165,233,.92) 40%, rgba(59,130,246,.86) 70%, rgba(99,102,241,.92));
}
.page-glow{
  background:
    radial-gradient(circle at 10% 10%, rgba(250,204,21,.14), transparent 25%),
    radial-gradient(circle at 90% 15%, rgba(37,99,235,.16), transparent 25%),
    radial-gradient(circle at 70% 90%, rgba(249,115,22,.14), transparent 25%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.section-kicker{
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:800;
  color:#2563eb;
}
.stat-pill{
  display:flex;align-items:center;gap:.65rem;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px)
}
.tag-chip{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.35rem .75rem;font-weight:700;font-size:.78rem}
.tag-outline{border:1px solid rgba(37,99,235,.15);background:#fff;color:#1e3a8a}
.tag-fill{background:rgba(37,99,235,.08);color:#1d4ed8}
.product-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.product-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px rgba(15,23,42,.11);border-color:rgba(37,99,235,.28)}
.category-card{transition:transform .2s ease, box-shadow .2s ease}
.category-card:hover{transform:translateY(-4px)}
.sticky-blur{backdrop-filter:saturate(160%) blur(14px);background:rgba(255,255,255,.88)}
.badge-dot::before{content:"";width:.42rem;height:.42rem;border-radius:999px;background:currentColor;display:inline-block}
.prose-lite p{color:#475569;line-height:1.72}
.prose-lite li{color:#475569}
.cart-drawer-shadow{box-shadow:-20px 0 50px rgba(15,23,42,.15)}
.focus-ring:focus{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.table-clean tr+tr td{border-top:1px solid rgba(148,163,184,.16)}
.table-clean td{padding:1rem .25rem;vertical-align:top}
.highlight-bar{background:linear-gradient(90deg,#facc15,#fb7185,#2563eb);height:4px;border-radius:999px}
.notice{border:1px solid rgba(37,99,235,.18);background:rgba(37,99,235,.05)}
.mega-scroll{scrollbar-width:none}
.mega-scroll::-webkit-scrollbar{display:none}
.step-card{position:relative}
.step-card::before{
  content:attr(data-step);position:absolute;top:-18px;right:18px;font-size:4.25rem;font-weight:900;color:rgba(37,99,235,.08)
}
.whatsapp-float{
  position:fixed;right:1rem;bottom:1rem;z-index:60
}
@media (min-width:1024px){
  .whatsapp-float{right:1.5rem;bottom:1.5rem}
}