/* Base variables and resets */
:root{
  --bs-primary:#0A84FF;
  --bs-body-color:#0F172A;
  --bs-secondary:#334155;
  --bs-body-bg:#FFFFFF;
  --surface:#F8FAFC;
}
@media (prefers-color-scheme: dark){
  :root{
    --bs-body-color:#E2E8F0;
    --bs-body-bg:#0F172A;
    --surface:#111827;
  }
  .bg-body,.bg-body-tertiary{background-color:var(--bs-body-bg)!important}
}

body{font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}

.bg-hero{
  background: radial-gradient(1200px 400px at 10% 10%, rgba(10,132,255,.12), transparent),
              linear-gradient(180deg, var(--surface), #fff 60%);
}

.icon-hex{font-size:1.75rem; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:12px; background:#E2E8F0;}
.step{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#E2E8F0;font-weight:700}

.sticky-cta{position:sticky;bottom:0;padding:.75rem;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-top:1px solid #e5e7eb}

/* Focus visibility */
a:focus, button:focus{outline:2px solid var(--bs-primary); outline-offset:2px}

/* Utilities */
.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}
.rounded-4{border-radius:1rem!important}

/* Footer */
footer .link-secondary{text-decoration:none}
footer .link-secondary:hover{text-decoration:underline}