/* === Theme tokens (Bootstrap 5.3 data-bs-theme) === */
:root {
  --shx-bg-grad: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.08), transparent 60%),
                 radial-gradient(1000px 500px at 90% 10%, rgba(236,72,153,.07), transparent 60%);
  --shx-body-bg: #f8fafc;
  --shx-body-fg: #0b0d12;
  --shx-muted:   #525866;
  --shx-card-bg: #ffffff;
  --shx-card-border: rgba(0,0,0,.08);
  --shx-navbar-bg: rgba(255,255,255,.8);
  --shx-accent: #22c55e;
}
[data-bs-theme="dark"] {
  --shx-bg-grad: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.18), transparent 60%),
                 radial-gradient(1000px 500px at 90% 10%, rgba(236,72,153,.14), transparent 60%);
  --shx-body-bg: #0b0d12;
  --shx-body-fg: #e8eaef;
  --shx-muted:   #a3aab7;
  --shx-card-bg: rgba(255,255,255,.08);
  --shx-card-border: rgba(255,255,255,.12);
  --shx-navbar-bg: rgba(15,18,26,.55);
  --shx-accent: #22c55e;
}

body{
  background: var(--shx-body-bg);
  background-image: var(--shx-bg-grad);
  color: var(--shx-body-fg);
}
.navbar{ background: var(--shx-navbar-bg)!important; backdrop-filter: blur(10px); }
.hero{ padding: 4rem 0 2rem; }
.badge-premium{ background: linear-gradient(90deg,#f59e0b,#ef4444); color:#0c0c0c; font-weight:700; }
.card-premium{
  background: var(--shx-card-bg);
  border: 1px solid var(--shx-card-border);
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  border-radius: 18px;
}
.price-tag{ font-size: clamp(28px,4vw,44px); font-weight:800; letter-spacing:-.02em; }
.strike{ text-decoration: line-through; opacity:.6; }
.sticky-cta{ position: fixed; left:0; right:0; bottom:0; background: var(--shx-navbar-bg); backdrop-filter: blur(12px); border-top:1px solid var(--shx-card-border); padding:.75rem; z-index:1030; }
.icon-bullet{ width:1.35rem; height:1.35rem; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background: var(--shx-accent); color: var(--shx-body-bg); font-weight:900; margin-right:.5rem; }
.testimonial{ border-left:3px solid var(--shx-accent); padding-left:1rem; }
.countdown{ font-variant-numeric: tabular-nums; }

/* Toggle button visuals */
.theme-toggle { border: 1px solid var(--shx-card-border); color: var(--shx-body-fg); background: transparent; }
.theme-toggle:hover { opacity:.9; }

/* Make some dark-only utility classes adapt in light theme */
[data-bs-theme="light"] .text-white-50 { color: rgba(0,0,0,.55)!important; }
footer .link-light { color: inherit !important; } /* keep footer links visible in both themes */