@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  color-scheme: light;
  --sx-bg: oklch(0.985 0.004 240);
  --sx-surface: oklch(1 0 0);
  --sx-surface-2: oklch(0.971 0.004 240);
  --sx-surface-3: oklch(0.930 0.006 240);
  --sx-line: oklch(0.45 0.03 250 / 0.20);
  --sx-line-soft: oklch(0.45 0.03 250 / 0.10);
  --sx-text: oklch(0.24 0.02 252);
  --sx-muted: oklch(0.44 0.02 252);
  --sx-faint: oklch(0.56 0.018 252);
  --sx-accent: oklch(0.575 0.115 205);
  --sx-accent-strong: oklch(0.495 0.115 205);
  --sx-accent-2: oklch(0.520 0.160 268);
  --sx-danger: oklch(0.560 0.200 28);
  --sx-radius: 16px;
  --sx-header: oklch(1 0 0 / 0.74);
  --sx-footer: oklch(0.965 0.004 240);
  --sx-shadow: oklch(0.24 0.02 252 / .18);
}

html[data-sx-theme="dark"] {
  color-scheme: dark;
  --sx-bg: oklch(0.158 0.014 252);
  --sx-surface: oklch(0.190 0.016 252);
  --sx-surface-2: oklch(0.225 0.018 252);
  --sx-surface-3: oklch(0.270 0.020 252);
  --sx-line: oklch(0.42 0.02 252 / 0.34);
  --sx-line-soft: oklch(0.42 0.02 252 / 0.18);
  --sx-text: oklch(0.965 0.006 250);
  --sx-muted: oklch(0.760 0.012 250);
  --sx-faint: oklch(0.585 0.014 252);
  --sx-accent: oklch(0.840 0.150 188);
  --sx-accent-strong: oklch(0.905 0.120 188);
  --sx-accent-2: oklch(0.700 0.160 268);
  --sx-danger: oklch(0.720 0.180 32);
  --sx-header: oklch(0.190 0.016 252 / .88);
  --sx-footer: oklch(0.158 0.014 252);
  --sx-shadow: oklch(0 0 0 / .9);
}

html { scroll-behavior: smooth; }
body {
  background: var(--sx-bg) !important;
  color: var(--sx-text) !important;
  font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: linear-gradient(var(--sx-line) 1px, transparent 1px), linear-gradient(90deg, var(--sx-line) 1px, transparent 1px);
  opacity: .25;
  background-size: 56px 56px;
}
h1, h2, h3, h4, h5, h6 { color: var(--sx-text) !important; font-family: 'Bricolage Grotesque', system-ui, sans-serif !important; letter-spacing:-.025em; }
p, li, small, label { color: var(--sx-muted); }
.eyebrow, .badge, .top-small, code, .mono { font-family:'IBM Plex Mono', ui-monospace, monospace !important; letter-spacing:.12em; }
a { transition: color .18s ease, border-color .18s ease, background .18s ease; }
.sx-brand-logo { width:min(190px, 44vw); height:auto; }
.sx-logo-dark { display:none; }
html[data-sx-theme="dark"] .sx-logo-light { display:none; }
html[data-sx-theme="dark"] .sx-logo-dark { display:block; }

header, .pricing-header {
  background: var(--sx-header) !important;
  border-bottom: 1px solid var(--sx-line);
  backdrop-filter: blur(16px);
}
.navbar, .navbar-collapse, .navbar-nav { background: transparent !important; }
.navbar .nav-link, header .nav-link { color: var(--sx-muted) !important; font-weight: 500; }
.navbar .nav-link:hover, header .nav-link:hover, .navbar .nav-link.active { color: var(--sx-accent) !important; }
.navbar-toggler { border-color: var(--sx-line) !important; background: var(--sx-surface-2) !important; }
.dropdown-menu {
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 70px var(--sx-shadow);
}
.dropdown-item { color: var(--sx-muted) !important; }
.dropdown-item:hover { color: var(--sx-accent) !important; background: rgba(66,227,207,.08) !important; }

.front-get-started, .btn-primary, button[type="submit"] {
  background: var(--sx-accent) !important;
  border: 1px solid var(--sx-accent-strong) !important;
  color: #10201f !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 18px 42px -20px rgba(66,227,207,.75);
}
.front-get-started:hover, .btn-primary:hover, button[type="submit"]:hover { transform: translateY(-2px); background: var(--sx-accent-strong) !important; }
.front-get-explore, .btn-outline-primary, .btn-outline-light {
  color: var(--sx-text) !important;
  border: 1px solid var(--sx-line) !important;
  background: var(--sx-surface-2) !important;
  border-radius: 999px !important;
}

section { position: relative; }
.banner, .inner-banner, .pricing-banner, .contact-banner, .blog-banner { background: transparent !important; }
.container { position: relative; }
.card, .blog-card, .modern-card, .feature-card, .pricing-card, .form-box, .accordion-item, .comparison-card {
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-line) !important;
  border-radius: var(--sx-radius) !important;
  color: var(--sx-text) !important;
  box-shadow: 0 26px 70px -45px var(--sx-shadow) !important;
}
.card:hover, .blog-card:hover, .modern-card:hover, .feature-card:hover { border-color: rgba(66,227,207,.46) !important; transform: translateY(-3px); }
.accordion-button { background: var(--sx-surface) !important; color: var(--sx-text) !important; box-shadow: none !important; }
.accordion-button:not(.collapsed) { color: var(--sx-accent) !important; }
.accordion-body { background: var(--sx-surface) !important; color: var(--sx-muted) !important; }

.form-control, .form-select, input, textarea, select {
  background: var(--sx-surface-2) !important;
  border: 1px solid var(--sx-line) !important;
  color: var(--sx-text) !important;
  border-radius: 11px !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #78879a !important; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--sx-accent) !important;
  box-shadow: 0 0 0 3px rgba(66,227,207,.14) !important;
}
.form-check-input:checked { background-color: var(--sx-accent) !important; border-color: var(--sx-accent) !important; }

.breadcrumb-item, .breadcrumb-item a { color: var(--sx-muted) !important; }
.breadcrumb-item.active { color: var(--sx-accent) !important; }
.pagination .page-link { background: var(--sx-surface) !important; border-color: var(--sx-line) !important; color: var(--sx-muted) !important; }
.pagination .active .page-link { background: var(--sx-accent) !important; color: #10201f !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--sx-text); --bs-table-border-color: var(--sx-line); }

footer, .footer {
  background: var(--sx-footer) !important;
  border-top: 1px solid var(--sx-line) !important;
  color: var(--sx-muted) !important;
}
footer a, .footer a { color: var(--sx-muted) !important; }
footer a:hover, .footer a:hover { color: var(--sx-accent) !important; }
footer h3, footer h4, .footer-title { color: var(--sx-text) !important; }
.banner-ready, .banner-ready.text-white { color: var(--sx-text) !important; }
.banner-ready p, .banner-ready small, .banner-ready .professional small { color: var(--sx-muted) !important; opacity:1 !important; }
.banner-ready .front-get-explore { color:var(--sx-text) !important; }
.comparison-banner p { color:var(--sx-muted) !important; opacity:1 !important; }
.comparison-banner strong { color:var(--sx-text) !important; font-weight:700 !important; }
.comparison-banner .top-small { color:var(--sx-accent) !important; }
.banner-modern > div > .container > .text-center > p,
.modern-card p { color:var(--sx-muted) !important; }
.sx-how-page p, .sx-how-page li, .sx-how-page small { color:var(--sx-muted) !important; opacity:1 !important; }
.sx-how-page strong { color:var(--sx-text) !important; }
.sx-how-page .badge { color:#fff !important; background:var(--sx-accent) !important; }
.case-study-section { margin-top:64px !important; padding:72px 20px !important; background:var(--sx-surface-2) !important; color:var(--sx-text) !important; border-block:1px solid var(--sx-line); text-align:center; }
.case-study-section > div { width:min(1160px,100%); margin-inline:auto; }
.case-study-section > div > .badge { padding:8px 13px !important; border-radius:999px !important; background:color-mix(in oklch,var(--sx-accent) 14%,transparent) !important; border:1px solid color-mix(in oklch,var(--sx-accent) 35%,transparent); color:var(--sx-accent-strong) !important; font:500 11px/1.2 'IBM Plex Mono',ui-monospace,monospace !important; letter-spacing:.1em; }
.case-study-section > div > h2 { margin:18px 0 30px !important; color:var(--sx-text) !important; }
.case-study-section .nav-tabs { display:flex; justify-content:center; gap:10px; margin:0 0 30px !important; border:0 !important; }
.case-study-section .nav-tabs .nav-link { display:inline-flex; align-items:center; gap:8px; margin:0 !important; padding:10px 16px !important; border:1px solid var(--sx-line) !important; border-radius:999px !important; background:var(--sx-surface) !important; color:var(--sx-muted) !important; font-size:14px !important; line-height:1.2; }
.case-study-section .nav-tabs .nav-link.active { background:var(--sx-accent) !important; border-color:var(--sx-accent-strong) !important; color:#fff !important; }
.case-study-section .tab-content { margin-top:0 !important; }
.case-study-section .tab-pane .row { align-items:stretch; text-align:left; }
.case-study-section .tab-pane .col-lg-5 > img { width:100%; height:100%; min-height:360px; max-height:440px !important; object-fit:cover; border:1px solid var(--sx-line); border-radius:var(--sx-radius); }
.case-study-section .card { height:100%; padding:8px; background:var(--sx-surface) !important; border:1px solid var(--sx-line) !important; }
.case-study-section .card-body { padding:28px !important; }
.case-study-section .card-body h3 { margin-bottom:20px; color:var(--sx-text) !important; font-size:clamp(1.25rem,2vw,1.6rem) !important; }
.case-study-section .card-body h4 { margin:16px 0 6px; color:var(--sx-text) !important; font-size:15px !important; }
.case-study-section .card-body p { margin-bottom:10px; color:var(--sx-muted) !important; font-size:14px !important; line-height:1.65 !important; }
.case-study-section .read-more { display:inline-flex; margin-top:14px; color:var(--sx-accent-strong) !important; font-weight:700; text-decoration:none !important; }
@media (max-width:991.98px) {
 .case-study-section { padding:54px 16px !important; }
 .case-study-section .tab-pane .col-lg-5 { margin-bottom:18px; }
 .case-study-section .tab-pane .col-lg-5 > img { height:300px; min-height:0; }
}
@media (max-width:575.98px) {
 .case-study-section .nav-tabs { gap:7px; }
 .case-study-section .nav-tabs .nav-link { padding:9px 11px !important; font-size:12px !important; }
 .case-study-section .card-body { padding:20px !important; }
 .case-study-section .tab-pane .col-lg-5 > img { height:230px; }
}
.calculator > div > .container { max-width:1200px; }
.calculator > div > .container > h2 { margin-bottom:10px !important; }
.calculator > div > .container > p { margin-bottom:38px !important; }
.calculator .row > .col-md-6 { display:flex; flex-direction:column; margin-bottom:30px; }
.calculator .row > .col-md-6 > label { display:flex; align-items:flex-end; min-height:52px; margin-bottom:10px; color:var(--sx-muted) !important; font-size:16px !important; font-weight:500; line-height:1.35; }
.calculator .row > .col-md-6 > input { width:100%; min-height:58px; padding:12px 18px !important; font-size:17px !important; line-height:1.2; }
.calculator .row > .col-12 { margin-top:6px !important; margin-bottom:48px !important; }
.calculator .row > .col-12 .front-get-started { min-width:300px; min-height:54px; }
@media (max-width:767.98px) {
 .calculator > div > .container > p { margin-bottom:26px !important; }
 .calculator .row > .col-md-6 { margin-bottom:20px; }
 .calculator .row > .col-md-6 > label { min-height:0; }
 .calculator .row > .col-12 .front-get-started { width:100%; min-width:0; }
}

.sx-theme-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sx-line);
  border-radius: 50%;
  background: var(--sx-surface);
  color: var(--sx-text);
  box-shadow: 0 12px 35px var(--sx-shadow);
  cursor: pointer;
  font-size: 21px;
}
.sx-theme-toggle:hover { color: var(--sx-accent); transform: translateY(-2px); }
.sx-theme-toggle .sx-sun { display: none; }
html[data-sx-theme="dark"] .sx-theme-toggle .sx-sun { display: inline; }
html[data-sx-theme="dark"] .sx-theme-toggle .sx-moon { display: none; }

@media (max-width: 991.98px) {
  .navbar-collapse { padding: 18px; margin-top: 10px; background: var(--sx-surface) !important; border: 1px solid var(--sx-line); border-radius: 14px; }
  header .d-flex { flex-wrap: wrap; gap: 10px; }
  .row > [class*="col-"] { margin-bottom: 18px; }
}
@media (max-width: 575.98px) {
  h1 { font-size: clamp(2rem, 12vw, 3rem) !important; }
  h2 { font-size: clamp(1.65rem, 9vw, 2.35rem) !important; }
  .container { padding-left: 18px !important; padding-right: 18px !important; }
  .front-get-started, .front-get-explore { width: 100%; text-align: center; justify-content: center; }
  footer .row > * { width: 100%; }
}
/* Shared responsive header and footer */
.sx-common-header { position:sticky; top:0; z-index:1000; background:var(--sx-header,var(--bg-1)); border-bottom:1px solid var(--sx-line,var(--line-soft)); backdrop-filter:blur(16px); }
.sx-statusbar { border-bottom:1px solid var(--sx-line-soft,var(--line-soft)); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.1em; }
.sx-header-wrap { width:min(1200px,calc(100% - 40px)); margin:auto; }
.sx-statusbar .sx-header-wrap { min-height:30px; display:flex; align-items:center; justify-content:space-between; color:var(--sx-faint,var(--text-faint)); }
.sx-statusbar span i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--sx-accent,var(--accent)); }
.sx-main-nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.sx-common-logo { display:inline-flex !important; flex-flow:row nowrap !important; align-items:center !important; gap:3px; width:max-content; text-decoration:none; }
.sx-common-logo img.sx-wordmark { width:150px !important; height:auto; display:block; flex:0 0 150px; }
.sx-common-logo .logo-o, .footer .sx-footer-logo .logo-o { display:block; overflow:visible; flex:none; margin:0 !important; transform:translateY(.5px); }
.sx-common-logo .logo-o .w, .footer .sx-footer-logo .logo-o .w { fill:none; stroke:var(--sx-accent,var(--accent)); stroke-width:1.7; }
.sx-common-logo .logo-o .dot, .footer .sx-footer-logo .logo-o .dot { fill:var(--sx-accent,var(--accent)); }
.sx-common-logo .logo-o .w1, .footer .sx-footer-logo .logo-o .w1 { animation:sxWifiPulse 2.1s ease-in-out infinite; }
.sx-common-logo .logo-o .w2, .footer .sx-footer-logo .logo-o .w2 { animation:sxWifiPulse 2.1s ease-in-out infinite .26s; }
.sx-common-logo .logo-o .w3, .footer .sx-footer-logo .logo-o .w3 { animation:sxWifiPulse 2.1s ease-in-out infinite .52s; }
@keyframes sxWifiPulse { 0%,100% { opacity:.18; } 45% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .sx-common-logo .logo-o .w, .footer .sx-footer-logo .logo-o .w { animation:none; opacity:.85; } }
.sx-common-header .sx-logo-dark { display:none !important; }
html[data-sx-theme="dark"] .sx-common-header .sx-logo-light, html[data-theme="dark"] .sx-common-header .sx-logo-light { display:none !important; }
html[data-sx-theme="dark"] .sx-common-header .sx-logo-dark, html[data-theme="dark"] .sx-common-header .sx-logo-dark { display:block !important; }
.sx-primary-links { display:flex; align-items:center; gap:24px; }
.sx-primary-links a { position:relative; color:var(--sx-muted,var(--text-dim)); text-decoration:none; font-weight:500; }
.sx-primary-links a:hover,
.sx-primary-links a.is-active { color:var(--sx-accent,var(--accent)); }
.sx-primary-links a.is-active { font-weight:700; }
.sx-primary-links a.is-active:not(.sx-header-cta)::after { content:""; position:absolute; left:0; right:0; bottom:-11px; height:2px; border-radius:999px; background:currentColor; }
.sx-header-cta { padding:11px 18px; border-radius:999px; background:var(--sx-accent,var(--accent)); color:#fff !important; font-weight:700 !important; }
.sx-header-cta.is-active { box-shadow:0 0 0 3px var(--sx-surface,var(--bg-1)),0 0 0 5px var(--sx-accent,var(--accent)); }
.banner-ready p, .banner-ready .professional small { color:var(--sx-muted,var(--text-dim)) !important; opacity:1 !important; }
.sx-menu-button { display:none; border:1px solid var(--sx-line,var(--line)); background:var(--sx-surface-2,var(--bg-2)); color:var(--sx-text,var(--text)); border-radius:10px; width:44px; height:40px; }
.sx-menu-button .sx-menu-close-icon { display:none; }
.sx-menu-button[aria-expanded="true"] .sx-menu-open-icon { display:none; }
.sx-menu-button[aria-expanded="true"] .sx-menu-close-icon { display:inline-block; }
.footer .wrap { width:min(1200px,calc(100% - 40px)); margin:auto; }
.footer { margin-top:30px; padding:56px 0 30px !important; }
.footer .foot-grid { display:grid; grid-template-columns:minmax(280px,1.5fr) repeat(2,minmax(180px,1fr)); gap:56px; }
.footer .sx-footer-logo { display:inline-flex; align-items:center; gap:3px; padding:0; text-decoration:none; }
.footer .sx-footer-logo img.sx-footer-wordmark { display:block; width:150px; height:auto; }
.footer .sx-footer-logo img.sx-footer-logo-dark { display:none; }
html[data-sx-theme="dark"] .footer .sx-footer-logo img.sx-footer-logo-light, html[data-theme="dark"] .footer .sx-footer-logo img.sx-footer-logo-light { display:none; }
html[data-sx-theme="dark"] .footer .sx-footer-logo img.sx-footer-logo-dark, html[data-theme="dark"] .footer .sx-footer-logo img.sx-footer-logo-dark { display:block; }
.footer h4 { margin:0 0 16px !important; font-family:'IBM Plex Mono',ui-monospace,monospace !important; font-size:11px !important; line-height:1.4 !important; letter-spacing:.16em; text-transform:uppercase; color:var(--sx-faint) !important; }
.footer .foot-grid > div > a:not(.btn):not(.sx-footer-logo) { display:block; width:max-content; max-width:100%; padding:5px 0; font-size:14px !important; line-height:1.45 !important; text-decoration:none !important; }
.footer .foot-brand p { max-width:32ch; margin:16px 0 14px; color:var(--sx-muted) !important; font-size:14px !important; line-height:1.65 !important; }
.footer .foot-mail { margin-bottom:18px; font-family:'IBM Plex Mono',ui-monospace,monospace; color:var(--sx-accent) !important; }
.footer .foot-brand .btn { display:inline-flex; width:auto; padding:11px 18px !important; border-radius:999px !important; color:#fff !important; font-size:14px !important; line-height:1.2 !important; text-decoration:none !important; }
.footer .foot-bottom { margin-top:42px; padding-top:22px; border-top:1px solid var(--sx-line); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.footer .foot-bottom span { font-family:'IBM Plex Mono',ui-monospace,monospace; color:var(--sx-faint); font-size:12px !important; line-height:1.5 !important; }
.footer .foot-bottom a { display:inline; padding:0; color:var(--sx-muted) !important; text-decoration:none !important; border-bottom:1px solid var(--sx-line); }
@media (max-width:991.98px) {
 .sx-menu-button { display:grid; place-items:center; margin-left:auto; }
 .sx-primary-links { display:none; position:absolute; left:20px; right:20px; top:72px; flex-direction:column; align-items:stretch; gap:4px; padding:16px; border:1px solid var(--sx-line,var(--line)); border-radius:14px; background:var(--sx-surface,var(--bg-1)); box-shadow:0 24px 60px var(--sx-shadow,rgba(0,0,0,.2)); }
 .sx-primary-links.is-open { display:flex; }
 .sx-primary-links a { padding:10px 12px; border-radius:10px; }
 .sx-primary-links a.is-active:not(.sx-header-cta) { background:rgba(13,153,167,.1); }
 .sx-primary-links a.is-active:not(.sx-header-cta)::after { left:0; right:auto; top:9px; bottom:9px; width:3px; height:auto; }
 .footer .foot-grid { grid-template-columns:1fr 1fr; gap:32px 40px; }
}
@media (max-width:760px) {
 .sx-header-wrap,.footer .wrap { width:min(100% - 32px,1200px); }
 .sx-statusbar b { display:none; }
 .sx-main-nav { min-height:64px; }
 .sx-primary-links { top:64px; }
 .footer .foot-grid { grid-template-columns:1fr 1fr; gap:28px; }
 .footer { padding:42px 0 24px !important; }
}
@media (max-width:520px) {
 .footer .foot-grid { grid-template-columns:1fr; }
 .footer .foot-bottom { align-items:flex-start; flex-direction:column; }
 .sx-theme-toggle { right:14px; bottom:14px; width:44px; height:44px; }
}

/* Reusable international phone field */
.sx-phone-field{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:stretch;width:100%;border:1px solid var(--sx-line,var(--line,#d5dbe1));border-radius:11px;background:var(--sx-surface-2,var(--bg-2,#f5f7f9));overflow:hidden;transition:border-color .18s,box-shadow .18s}
.sx-phone-field:focus-within{border-color:var(--sx-accent,var(--accent,#0095a3));box-shadow:0 0 0 3px rgba(0,149,163,.12)}
.sx-country-control{position:relative;min-width:0;border-right:1px solid var(--sx-line,var(--line,#d5dbe1));background:var(--sx-surface,var(--surface,#fff))}.sx-country-display{height:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;white-space:nowrap;color:var(--sx-text,var(--text,#182230))}.sx-country-display span{font-size:20px;line-height:1}.sx-country-display strong{font:500 16px/1 inherit}.sx-country-display i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6}.sx-country-picker{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;outline:0}
.sx-phone-field .sx-phone-input{width:100%;min-width:0;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
@media(max-width:520px){.sx-phone-field{grid-template-columns:105px minmax(0,1fr)}.sx-country-display{gap:6px;padding:0 7px}.sx-country-display span{font-size:18px}.sx-country-display strong{font-size:14px}.sx-phone-field .sx-phone-input{padding-left:12px!important;padding-right:8px!important}}