:root {
  --duration: 500ms;
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --brand: #0ea5e9;
  --brand-strong: #0284c7;
  --brand-weak: #38bdf8;
}

html, body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji"; }

/* Icon utility */
.icon { width: 1.25rem; height: 1.25rem; display: inline-block; vertical-align: middle; }
.nav-btn .icon { width: 1rem; height: 1rem; }
.card-icon .icon { width: 1.5rem; height: 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Shared UI tokens layered over Tailwind utility classes */
.nav-link { color: rgb(82 82 91); transition: color var(--duration) var(--easing); }
.dark .nav-link { color: rgb(212 212 216); }
.nav-link:hover { color: rgb(14 165 233); text-decoration: none; }

.footer-link { color: rgb(82 82 91); }
.footer-link:hover { color: rgb(14 165 233); text-decoration: underline; text-underline-offset: 4px; }
.dark .footer-link { color: rgb(212 212 216); }

/* Brand gradients and utilities */
.gradient-bg {
  background-image: radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.25), transparent 60%),
                    radial-gradient(800px 400px at 90% 0%, rgba(14,165,233,.18), transparent 60%),
                    linear-gradient(180deg, rgba(2,132,199,.06), transparent 40%);
}
.dark .gradient-bg {
  background-image: radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.08), transparent 60%),
                    radial-gradient(800px 400px at 90% 0%, rgba(14,165,233,.06), transparent 60%),
                    linear-gradient(180deg, rgba(2,132,199,.08), transparent 40%);
}

.glow-ring { box-shadow: 0 0 0 8px rgba(14,165,233,.08); }

.glass {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgb(228 228 231 / .9);
}
.dark .glass {
  background: rgba(10,10,10,.6);
  border-color: rgb(38 38 38 / .9);
}

.card { background: white; border: 1px solid rgb(228 228 231); border-radius: 1rem; padding: 1rem; box-shadow: 0 10px 30px -12px rgba(2,132,199,.25); transition: transform var(--duration) var(--easing), box-shadow var(--duration) var(--easing), border-color var(--duration) var(--easing), background var(--duration) var(--easing); }
.dark .card { background: rgb(10 10 10); border-color: rgb(38 38 38); }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px -20px rgba(14,165,233,.45); border-color: rgba(14,165,233,.35); }

.card-icon { font-size: 1.5rem; }
.card-title { margin-top: .5rem; font-weight: 700; font-size: 1.125rem; }
.card-body { margin-top: .25rem; color: rgb(82 82 91); }
.dark .card-body { color: rgb(212 212 216); }

.badge { border: 1px solid rgb(228 228 231); background: white; color: rgb(39 39 42); padding: .375rem .75rem; border-radius: 9999px; }
.dark .badge { border-color: rgb(38 38 38); background: rgb(10 10 10); color: rgb(212 212 216); }

.btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: .625rem 1rem; border-radius: 9999px; background: rgb(2 132 199); color: white; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(14,165,233,.45); transition: transform var(--duration) var(--easing), background var(--duration) var(--easing); }
.btn-primary:hover { transform: translateY(-2px); background: rgb(14 165 233); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(14,165,233,.25); }

.btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: .625rem 1rem; border-radius: 9999px; border: 1px solid rgb(228 228 231); background: white; color: rgb(39 39 42); font-weight: 600; transition: background var(--duration) var(--easing), border-color var(--duration) var(--easing); }
.btn-secondary:hover { background: rgb(245 245 245); }
.dark .btn-secondary { border-color: rgb(38 38 38); background: rgb(10 10 10); color: rgb(229 229 229); }
.dark .btn-secondary:hover { background: rgb(23 23 23); }
.btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(14,165,233,.15); }

.label { display: block; font-size: .875rem; color: rgb(82 82 91); margin-bottom: .375rem; }
.dark .label { color: rgb(163 163 163); }

.input { width: 100%; border-radius: .75rem; border: 1px solid rgb(228 228 231); background: white; padding: .625rem .75rem; outline: none; transition: border-color var(--duration) var(--easing), box-shadow var(--duration) var(--easing), background var(--duration) var(--easing); }
.input:focus { border-color: rgb(14 165 233); box-shadow: 0 0 0 4px rgba(14,165,233,.15); }
.dark .input { border-color: rgb(38 38 38); background: rgb(10 10 10); color: rgb(229 229 229); }
.dark .input:focus { border-color: rgb(2 132 199); box-shadow: 0 0 0 4px rgba(2,132,199,.2); }

.nav-btn { border: 1px solid rgb(228 228 231); padding: .375rem .75rem; border-radius: .5rem; background: white; transition: background var(--duration) var(--easing); }
.nav-btn:hover { background: rgb(245 245 245); }
.dark .nav-btn { border-color: rgb(38 38 38); background: rgb(10 10 10); color: rgb(229 229 229); }
.dark .nav-btn:hover { background: rgb(23 23 23); }

/* Appear animations via IntersectionObserver */
[data-animate] { opacity: 0; transform: translateY(12px); transition: opacity var(--duration) var(--easing), transform var(--duration) var(--easing); }
[data-animate].in-view { opacity: 1; transform: translateY(0); }

/* Modal transitions */
#supportModal[aria-hidden="false"] { opacity: 1; visibility: visible; }
#supportModal[aria-hidden="false"] [data-modal-panel] { transform: none; opacity: 1; }
#supportModal [data-modal-panel] { transform: translateY(8px) scale(.98); opacity: .98; transition: transform var(--duration) var(--easing), opacity var(--duration) var(--easing); }

#successModal[aria-hidden="false"] { opacity: 1; visibility: visible; }
#successModal[aria-hidden="false"] [data-modal-panel] { transform: none; opacity: 1; }
#successModal [data-modal-panel] { transform: translateY(8px) scale(.98); opacity: .98; transition: transform var(--duration) var(--easing), opacity var(--duration) var(--easing); }

/* Hide scrollbars in the reviews track on WebKit */
#reviewsTrack::-webkit-scrollbar { display: none; }

/* Accessibility */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; background: #fff; color: #111; border: 1px solid #e5e7eb; padding: .5rem .75rem; border-radius: .5rem; z-index: 1000; }
.dark .skip-link:focus { background: #0a0a0a; color: #e5e7eb; border-color: #27272a; }

/* Mobile menu */
.mobile-menu { border-top: 1px solid rgb(228 228 231); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); }
.dark .mobile-menu { border-top-color: rgb(38 38 38); background: rgba(10,10,10,.9); }
.mobile-nav-link { display:block; padding: .75rem 1rem; border-radius: .5rem; color: rgb(63 63 70); font-weight: 600; }
.mobile-nav-link:hover { background: rgb(244 244 245); color: rgb(2 132 199); }
.dark .mobile-nav-link { color: rgb(212 212 216); }
.dark .mobile-nav-link:hover { background: rgb(17 17 17); }

/* Process steps */
.step { background: white; border: 1px solid rgb(228 228 231); border-radius: 1rem; padding: 1rem; transition: transform var(--duration) var(--easing), box-shadow var(--duration) var(--easing); }
.dark .step { background: rgb(10 10 10); border-color: rgb(38 38 38); }
.step:hover { transform: translateY(-3px); box-shadow: 0 18px 50px -20px rgba(14,165,233,.35); }
.step-index { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9999px; background: rgb(14 165 233 / .15); color: rgb(2 132 199); font-weight: 700; }
.dark .step-index { background: rgba(2,132,199,.2); color: rgb(125 211 252); }
.step-title { margin-top: .5rem; font-weight: 700; }
.step-body { margin-top: .25rem; color: rgb(82 82 91); }
.dark .step-body { color: rgb(212 212 216); }

/* Accordion */
.accordion { border: 1px solid rgb(228 228 231); border-radius: .75rem; padding: .75rem 1rem; background: white; }
.accordion + .accordion { margin-top: .5rem; }
.dark .accordion { background: rgb(10 10 10); border-color: rgb(38 38 38); }
.accordion summary { cursor: pointer; font-weight: 600; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion[open] { box-shadow: 0 10px 30px -20px rgba(14,165,233,.35); }
.accordion > div { margin-top: .5rem; color: rgb(82 82 91); }
.dark .accordion > div { color: rgb(212 212 216); }

/* Sticky CTA */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: .75rem; display: grid; grid-auto-flow: column; gap: .5rem; width: min(640px, 92%); margin: 0 auto; background: rgba(255,255,255,.8); backdrop-filter: blur(10px); border: 1px solid rgb(228 228 231); border-radius: 9999px; padding: .5rem; z-index: 40; box-shadow: 0 10px 30px -12px rgba(2,132,199,.25);
}
.dark .sticky-cta { background: rgba(10,10,10,.8); border-color: rgb(38 38 38); }
.cta-btn { border-radius: 9999px; border: 1px solid rgb(228 228 231); background: white; padding: .5rem .875rem; }
.cta-btn:hover { background: rgb(245 245 245); }
.dark .cta-btn { border-color: rgb(38 38 38); background: rgb(10 10 10); color: rgb(229 229 229); }
.dark .cta-btn:hover { background: rgb(23 23 23); }
.cta-btn-primary { border-radius: 9999px; background: rgb(2 132 199); color: white; padding: .5rem 1rem; font-weight: 700; box-shadow: 0 10px 30px -10px rgba(14,165,233,.45); }
.cta-btn-primary:hover { background: rgb(14 165 233); }

/* Animated accent blobs (decorative) */
.blob {
  position: absolute;
  width: 28rem;
  height: 28rem;
  filter: blur(60px);
  opacity: .35;
  background: radial-gradient(circle at 30% 30%, var(--brand-weak), transparent 60%),
              radial-gradient(circle at 70% 70%, var(--brand), transparent 60%);
  animation: floaty 16s var(--easing) infinite alternate;
}
.dark .blob { opacity: .22; }
@keyframes floaty {
  0% { transform: translate3d(-10%, -6%, 0) scale(1); }
  100% { transform: translate3d(6%, 10%, 0) scale(1.05); }
}

@media (min-width: 640px) {
  .sticky-cta { display: none; }
}

/* Hero headline polish */
.eyebrow { letter-spacing: .08em; text-transform: uppercase; font-weight: 700; font-size: .75rem; color: rgb(2 132 199); }
.dark .eyebrow { color: rgb(125 211 252); }

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(92deg, rgb(14 165 233) 0%, rgb(2 132 199) 60%, rgb(56 189 248) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtle section separators */
section + section { position: relative; }
section + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(96%, 72rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,.25), transparent);
  opacity: .35;
}