@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700;8..60,800&display=swap');

:root {
  --bg: #fbfbf7 !important;
  --bg2: #f2f5f1 !important;
  --surface: #ffffff !important;
  --border: #d5d0bf !important;
  --accent: #2f6f62 !important;
  --accent-light: #e7f0eb !important;
  --accent2: #b2783c !important;
  --accent-dark: #173f38 !important;
  --accent-glow: #9fc4b4 !important;
  --text: #17211f !important;
  --muted: #5c6762 !important;
  --muted2: #7d8782 !important;
  --white: #ffffff !important;
  --shadow: 0 14px 42px rgba(23, 33, 31, .08) !important;
  --shadow-md: 0 22px 70px rgba(23, 33, 31, .12) !important;
}

*, *::before, *::after { letter-spacing: 0 !important; }
html { background: var(--bg); }
body {
  background:
    linear-gradient(90deg, rgba(23,33,31,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(23,33,31,.035) 1px, transparent 1px),
    var(--bg) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
  color: var(--text) !important;
  font-family: Inter, Arial, sans-serif !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(178,120,60,.12), transparent 28%, transparent 72%, rgba(47,111,98,.1));
  opacity: .55;
  z-index: -1;
}

nav {
  position: sticky !important;
  top: 0 !important;
  height: 76px !important;
  padding: 0 clamp(20px, 5vw, 72px) !important;
  background: #101715 !important;
  border-bottom: 1px solid rgba(23, 33, 31, .16) !important;
  box-shadow: 0 10px 30px rgba(23,33,31,.04) !important;
  gap: 18px !important;
  overflow: hidden !important;
}
.nav-logo, .footer-logo {
  font-family: Inter, Arial, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
  gap: 12px !important;
  color: #fff !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.nav-logo span, .footer-logo span { color: var(--text) !important; }
.nav-logo .arc, .footer-logo .arc {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid var(--text) !important;
  border-radius: 50% !important;
  background: var(--text) !important;
  display: inline-grid !important;
  place-items: center !important;
}
.nav-logo .arc::before, .footer-logo .arc::before {
  content: "1" !important;
  position: static !important;
  border: 0 !important;
  clip-path: none !important;
  width: auto !important;
  height: auto !important;
  color: #fff !important;
  font-family: Source Serif 4, Georgia, serif !important;
  font-size: 19px !important;
  line-height: 1 !important;
}
.nav-logo .arc::after, .footer-logo .arc::after { display: none !important; }
.nav-links {
  gap: 4px !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
  min-width: 0 !important;
}
.nav-links a {
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 10px 13px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--text) !important;
  background: rgba(47,111,98,.1) !important;
}
.nav-actions {
  gap: 10px !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}
.btn-outline, .btn-solid, .btn-primary, .btn-hero, .btn-white, .form-submit, .route-cta, .hero-btn-email {
  border-radius: 999px !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.btn-outline {
  border: 1px solid rgba(23,33,31,.22) !important;
  color: #fff !important;
  background: transparent !important;
}
.btn-outline:hover { background: #fff !important; }
.btn-solid, .btn-primary, .btn-hero, .form-submit, .route-cta, .hero-btn-email {
  background: var(--text) !important;
  color: #fff !important;
}
.btn-solid:hover, .btn-primary:hover, .btn-hero:hover, .form-submit:hover, .route-cta:hover, .hero-btn-email:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-1px) !important;
}

.hero, .page-hero {
  padding: clamp(86px, 10vw, 130px) clamp(20px, 5vw, 72px) clamp(58px, 8vw, 96px) !important;
  background:
    linear-gradient(135deg, rgba(47,111,98,.12), transparent 34%),
    linear-gradient(315deg, rgba(178,120,60,.14), transparent 32%),
    var(--bg) !important;
  border-bottom: 1px solid rgba(23,33,31,.16) !important;
  text-align: left !important;
}
.hero::before, .hero::after, .page-hero::before, .page-hero::after, .cta-banner::before { display: none !important; }
.hero-grid {
  max-width: 1240px !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(340px, .72fr) !important;
  gap: clamp(36px, 7vw, 96px) !important;
  align-items: stretch !important;
}
.hero-badge, .section-tag, .svc-tag, .route-tag, .office-tag, .hc-badge, .use-tag, .quote-row .val.tag {
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(23,33,31,.18) !important;
  color: var(--accent-dark) !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.hero-badge::before, .section-tag::before, .svc-tag::before, .route-tag::before { background: var(--accent2) !important; animation: none !important; }
h1, h2, h3, .section-h, .svc-h, .offices-h, .faq-h, .route-name, .footer-logo, .hc-stat-num, .metric-val, .cc-value, .quote-foot .val {
  font-family: Source Serif 4, Georgia, serif !important;
  letter-spacing: 0 !important;
}
h1, .hero h1 {
  max-width: 980px !important;
  font-size: clamp(42px, 7vw, 90px) !important;
  line-height: .94 !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}
h1 span, .hero h1 span, .section-h span, .svc-h span, .offices-h span, .faq-h span, .uptime-val {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--accent) !important;
}
.hero-sub, .page-hero p, .section-sub, .svc-desc, .route-desc, .factor-desc, .step-content p, .faq-a, .contact-info, .office-detail {
  color: var(--muted) !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}
.page-hero p { margin-left: 0 !important; margin-right: 0 !important; max-width: 720px !important; }
.hero-actions, .hero-trust { margin-bottom: 0 !important; }
.btn-hero-ghost, .office-link, .cc-arrow, .info-detail a { color: var(--accent-dark) !important; }

.hero-card, .form-card, .info-card, .office-card, .factor-card, .route-card, .quote-card, .cc-card, .faq-item, .svc-visual, .svc-visual-dark, .stat-card, .country-card, .client-card, .api-card, .bcard, .voice-card {
  border-radius: 4px !important;
  border: 1px solid rgba(23,33,31,.18) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 18px 46px rgba(23,33,31,.08) !important;
}
.hero-card {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(28px, 5vw, 54px) !important;
}
.hero-card::before {
  content: "ONE MESSAGE";
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted2);
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(23,33,31,.18);
  padding-bottom: 12px;
}
.hero-float-1, .hero-float-2 { display: none !important; }
.hc-bar { background: linear-gradient(90deg, var(--accent), var(--accent2)) !important; }
.hc-divider, .metric-row, .step, .quote-row { border-color: rgba(23,33,31,.16) !important; }

.svc-section, .factors, .routes, .how, .contact-cta, .faq, .offices, .contact-section, .trust, .features, .stats, .clients-section, .countries-section, .api-section, .bulk-section, .voice-section {
  padding: clamp(64px, 9vw, 112px) clamp(20px, 5vw, 72px) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(23,33,31,.14) !important;
}
.svc-section:nth-child(even), .routes, .offices, .contact-cta {
  background: rgba(242,245,241,.72) !important;
}
.svc-grid, .how-grid, .contact-grid, .route-grid, .cc-grid, .offices-grid, .factor-grid {
  max-width: 1200px !important;
}
.svc-grid {
  grid-template-columns: minmax(0, .92fr) minmax(320px, .72fr) !important;
  align-items: stretch !important;
}
.svc-grid.reverse { direction: ltr !important; }
.svc-grid.reverse > .svc-visual, .svc-grid.reverse > .svc-visual-dark { order: -1 !important; }
.svc-features li svg, .route-features li svg { color: var(--accent) !important; }
.svc-visual-dark .code-block { color: #23302d !important; }
.code-key { color: var(--accent-dark) !important; }
.code-val, .code-success { color: var(--accent2) !important; }
.code-comment { color: var(--muted2) !important; }

.cta-banner {
  background: var(--text) !important;
  padding: clamp(64px, 8vw, 96px) clamp(20px, 5vw, 72px) !important;
  border-top: 6px solid var(--accent2) !important;
}
.cta-banner h2 { color: #fff !important; }
.cta-banner p { color: rgba(255,255,255,.72) !important; }
.btn-white { background: #fff !important; color: var(--text) !important; }
.btn-white-outline { border-radius: 999px !important; }

footer {
  background: #111816 !important;
  padding: 72px clamp(20px, 5vw, 72px) 36px !important;
}
.footer-top { border-bottom: 1px solid rgba(255,255,255,.12) !important; }
.footer-logo .arc { border-color: #fff !important; background: #fff !important; }
.footer-logo .arc::before { color: #111816 !important; }
.footer-logo, .footer-logo span { color: #fff !important; }
.fbadge { border-radius: 999px !important; }

.form-group input, .form-group select, .form-group textarea {
  border-radius: 0 !important;
  border: 1px solid rgba(23,33,31,.22) !important;
  background: #fff !important;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent) !important; }
.info-icon, .factor-icon, .cc-icon, .hero-float-1 .f-icon, .step-num {
  border-radius: 50% !important;
  background: var(--accent-light) !important;
  color: var(--accent-dark) !important;
}
.wa-float, .hero-btn-wa { background: #2f6f62 !important; box-shadow: 0 18px 44px rgba(47,111,98,.24) !important; }
.mobile-menu { background: var(--bg) !important; }
.mobile-menu .mm-cta { background: var(--text) !important; border-radius: 999px !important; }

@media (max-width: 1100px) {
  nav { padding-left: 24px !important; padding-right: 24px !important; gap: 10px !important; }
  .nav-links a { padding-left: 8px !important; padding-right: 8px !important; font-size: 12px !important; }
  .btn-outline, .btn-solid { padding-left: 16px !important; padding-right: 16px !important; }
  .hero-grid, .svc-grid, .contact-grid, .how-grid, .route-grid, .cc-grid { grid-template-columns: 1fr !important; }
  .svc-grid.reverse > .svc-visual, .svc-grid.reverse > .svc-visual-dark { order: 0 !important; }
  .page-hero, .hero { text-align: left !important; }
  .footer-top { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  nav { height: 68px !important; }
  .nav-logo { font-size: 13px !important; }
  .nav-logo .arc { width: 30px !important; height: 30px !important; }
  h1, .hero h1 { font-size: clamp(40px, 15vw, 58px) !important; }
  .hero-actions, .cta-actions, .hero-cta { align-items: stretch !important; flex-direction: column !important; }
  .btn-hero, .btn-hero-ghost, .btn-white, .btn-white-outline, .hero-btn-wa, .hero-btn-email { width: 100% !important; justify-content: center !important; text-align: center !important; }
  .footer-top { grid-template-columns: 1fr !important; }
}

/* 2026 console layout refresh */
:root {
  --bg: #f6f5ef !important;
  --bg2: #ebe9dd !important;
  --surface: #fffdf6 !important;
  --border: #d6d0bf !important;
  --accent: #008f7a !important;
  --accent-light: #dff5ef !important;
  --accent2: #ff6f4e !important;
  --accent-dark: #006957 !important;
  --accent-glow: #7be2c9 !important;
  --text: #101715 !important;
  --muted: #62736d !important;
  --muted2: #84918c !important;
  --shadow: 0 20px 60px rgba(16,23,21,.1) !important;
  --shadow-md: 0 30px 90px rgba(16,23,21,.16) !important;
  --rail: 268px;
}

body {
  margin-left: var(--rail) !important;
  background:
    linear-gradient(90deg, rgba(16,23,21,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(16,23,21,.035) 1px, transparent 1px),
    var(--bg) !important;
  background-size: 40px 40px, 40px 40px, auto !important;
  font-family: Inter, Arial, sans-serif !important;
}

body::before {
  background:
    linear-gradient(135deg, rgba(0,143,122,.16), transparent 32%),
    linear-gradient(315deg, rgba(255,111,78,.13), transparent 38%) !important;
  opacity: 1 !important;
}

nav {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: var(--rail) !important;
  height: 100vh !important;
  padding: 24px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  background: #101715 !important;
  border-right: 1px solid rgba(255,255,255,.1) !important;
  border-bottom: 0 !important;
  box-shadow: 18px 0 58px rgba(16,23,21,.18) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.nav-logo, .footer-logo {
  color: #fff !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  gap: 12px !important;
}

.nav-logo span, .footer-logo span { color: var(--accent-glow) !important; }
.nav-logo .arc, .footer-logo .arc {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(123,226,201,.55) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
}
.nav-logo .arc::before, .footer-logo .arc::before {
  content: "1" !important;
  color: #fff !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.nav-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  width: 100% !important;
  padding: 18px 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}

.nav-links li, .nav-actions { width: 100% !important; }
.nav-links a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 11px 12px 11px 40px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 14px !important;
  text-transform: none !important;
}

.nav-links a::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(123,226,201,.5);
  border-radius: 50%;
  transform: translateY(-50%);
}

.nav-links a:hover, .nav-links a.active {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(123,226,201,.25) !important;
}

.nav-links a.active::before { background: var(--accent-glow) !important; }
.nav-actions { display: grid !important; gap: 10px !important; margin-top: auto !important; min-width: 0 !important; }

.btn-outline, .btn-solid, .btn-primary, .btn-hero, .btn-hero-outline, .btn-white, .btn-white-outline, .form-submit, .route-cta, .hero-btn-wa, .hero-btn-email, .mobile-menu .mm-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  border-radius: 8px !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.btn-outline, .btn-white-outline {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.06) !important;
}
.btn-outline:hover, .btn-white-outline:hover { border-color: var(--accent-glow) !important; background: rgba(255,255,255,.1) !important; }
section .btn-outline,
.services .btn-outline,
.svc-section .btn-outline,
.features .btn-outline,
.usecases .btn-outline,
.clients-section .btn-outline,
.contact-section .btn-outline,
.routes .btn-outline,
.how .btn-outline,
.faq .btn-outline,
.offices .btn-outline {
  color: var(--text) !important;
  border-color: rgba(16,23,21,.26) !important;
  background: rgba(255,253,246,.78) !important;
  min-height: 38px !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
section .btn-outline:hover,
.services .btn-outline:hover,
.svc-section .btn-outline:hover,
.features .btn-outline:hover,
.usecases .btn-outline:hover,
.clients-section .btn-outline:hover,
.contact-section .btn-outline:hover,
.routes .btn-outline:hover,
.how .btn-outline:hover,
.faq .btn-outline:hover,
.offices .btn-outline:hover {
  color: #101715 !important;
  border-color: rgba(0,143,122,.55) !important;
  background: var(--accent-light) !important;
}
.btn-solid, .btn-primary, .btn-hero, .form-submit, .route-cta, .hero-btn-email, .mobile-menu .mm-cta {
  color: #101715 !important;
  border: 1px solid var(--accent-glow) !important;
  background: var(--accent-glow) !important;
}
.btn-solid:hover, .btn-primary:hover, .btn-hero:hover, .form-submit:hover, .route-cta:hover, .hero-btn-email:hover { background: #a5f3de !important; color: #101715 !important; }
.btn-white { color: #101715 !important; background: #fff !important; border: 1px solid #fff !important; }

.hero, .page-hero {
  min-height: min(760px, 100vh) !important;
  display: flex !important;
  align-items: center !important;
  color: #fff !important;
  text-align: left !important;
  background:
    linear-gradient(135deg, rgba(16,23,21,.96), rgba(16,23,21,.86)),
    radial-gradient(circle at 78% 22%, rgba(123,226,201,.24), transparent 34%),
    radial-gradient(circle at 18% 88%, rgba(255,111,78,.18), transparent 32%) !important;
  border-bottom: 6px solid var(--accent2) !important;
}

.page-hero { min-height: 430px !important; }
.page-hero { flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; }
.hero::before, .hero::after, .page-hero::before, .page-hero::after, .cta-banner::before, .cta-banner::after { display: none !important; }
.hero-grid, .svc-grid, .how-grid, .contact-grid, .route-grid, .cc-grid, .offices-grid, .factor-grid, .services-header, .faq-wrap, .head, .partner-grid, .region-tabs, .country-grid {
  width: min(100%, 1240px) !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) !important;
  gap: clamp(30px, 5vw, 64px) !important;
  align-items: center !important;
}

.hero-visual {
  justify-self: end !important;
  width: min(100%, 400px) !important;
  padding: 74px 18px 34px !important;
  isolation: isolate !important;
}

.page-hero > * { width: min(100%, 980px) !important; margin-left: auto !important; margin-right: auto !important; }
.page-hero > .section-tag {
  width: fit-content !important;
  max-width: 100% !important;
  align-self: center !important;
  white-space: normal !important;
}
.hero-badge, .section-tag, .svc-tag, .route-tag, .office-tag, .hc-badge, .use-tag, .quote-row .val.tag, .svc-featured-tag, .fbadge, .country-route, .partner-tier {
  border-radius: 999px !important;
  padding: 6px 11px !important;
  border: 1px solid rgba(0,143,122,.28) !important;
  background: var(--accent-light) !important;
  color: var(--accent-dark) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.hero-badge, .page-hero .section-tag { background: rgba(123,226,201,.12) !important; color: var(--accent-glow) !important; border-color: rgba(123,226,201,.34) !important; }

h1, h2, h3, .section-h, .svc-h, .offices-h, .faq-h, .route-name, .svc-name, .hc-stat-num, .stat-num, .metric-val, .metric-num, .cc-value, .quote-foot .val {
  font-family: Inter, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

h1, .hero h1, .page-hero h1 {
  max-width: 1050px !important;
  margin: 18px 0 24px !important;
  color: inherit !important;
  font-size: clamp(44px, 7vw, 96px) !important;
  line-height: .9 !important;
  font-weight: 800 !important;
}
.page-hero h1 { font-size: clamp(40px, 6vw, 74px) !important; }
h1 span, .hero h1 span, .page-hero h1 span, .section-h span, .svc-h span, .offices-h span, .faq-h span, .uptime-val {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--accent2) !important;
}

.hero .hero-sub, .page-hero p { color: rgba(255,255,255,.74) !important; max-width: 720px !important; }
.hero strong, .page-hero strong { color: #fff !important; }
.hero .btn-hero-ghost, .page-hero .btn-hero-ghost, .hero .btn-hero-outline, .page-hero .btn-hero-outline { color: var(--accent-glow) !important; }
.hero-actions, .hero-cta, .cta-actions { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: center !important; }
.hero-trust { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 32px !important; }
.trust-item { padding: 12px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 8px !important; background: rgba(255,255,255,.06) !important; }
.trust-item span { color: rgba(255,255,255,.72) !important; font-size: 12px !important; }
.trust-item svg { color: var(--accent-glow) !important; }

.hero-card, .form-card, .info-card, .office-card, .factor-card, .route-card, .quote-card, .cc-card, .faq-item, .svc-visual, .svc-visual-dark, .stat-card, .country-card, .client-card, .api-card, .bcard, .voice-card, .svc-card, .uc-card, .t-card, .partner-card, .price-card, .case-card, .ind-card, .qs-card, .sdk-card, .endpoint-wrap, .code-card, .how-terminal, .metrics-strip, .client-cell {
  border-radius: 10px !important;
  border: 1px solid rgba(16,23,21,.14) !important;
  background: rgba(255,253,246,.94) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}

.hero-card { background: #fffdf6 !important; color: var(--text) !important; padding: clamp(22px, 3vw, 34px) !important; transform: rotate(.6deg) !important; width: 100% !important; position: relative !important; z-index: 2 !important; }
.hero-card::before { content: "LIVE ROUTING BOARD" !important; margin: -8px -8px 22px !important; padding: 10px 12px !important; border: 0 !important; border-radius: 8px !important; background: #101715 !important; color: var(--accent-glow) !important; font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; }
.hero-float-1, .hero-float-2 { border-radius: 8px !important; background: var(--accent2) !important; color: #101715 !important; box-shadow: var(--shadow-md) !important; }
.hero-float-1 { display: flex !important; right: 22px !important; top: 0 !important; z-index: 4 !important; transform: none !important; }
.hero-float-1 .f-text { color: rgba(16, 23, 21, .78) !important; opacity: 1 !important; font-weight: 800 !important; }
.hero-float-1 .f-val { color: #101715 !important; font-weight: 900 !important; }
.hero-float-2 { display: block !important; left: -10px !important; bottom: 18px !important; max-width: calc(100% - 34px) !important; position: absolute !important; z-index: 4 !important; }
.hc-bar { background: linear-gradient(90deg, var(--accent), var(--accent2)) !important; }

.stats-bar, .metrics-strip { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important; background: var(--surface) !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.stat-item, .metric-item { padding: 30px 22px !important; text-align: left !important; border-right: 1px solid rgba(16,23,21,.12) !important; }
.stat-item::after { display: none !important; }
.stat-num, .metric-num, .hc-stat-num, .metric-val, .route-stat-val { color: var(--accent-dark) !important; }
.stat-label, .metric-label { color: var(--muted) !important; }

.svc-section, .factors, .routes, .how, .contact-cta, .faq, .offices, .contact-section, .trust, .features, .stats, .clients-section, .countries-section, .api-section, .bulk-section, .voice-section, .coverage, .partners, .pricing-section, .case-section, .industry-section, .endpoint-section, .sdk-section, .quickstart-section, .services, .testimonials, .usecases {
  padding: clamp(58px, 7vw, 104px) clamp(24px, 6vw, 84px) !important;
  border-bottom: 1px solid rgba(16,23,21,.12) !important;
}
.services, .svc-section:nth-child(even), .routes, .offices, .contact-cta, .testimonials, .usecases, .features, .pricing-section, .case-section, .bulk-section, .voice-section, .api-section, .coverage { background: rgba(235,233,221,.72) !important; }
.section-h, .svc-h, .offices-h, .faq-h { color: var(--text) !important; font-size: clamp(30px, 4vw, 54px) !important; line-height: .98 !important; font-weight: 800 !important; }

.services-header { display: flex !important; align-items: end !important; justify-content: space-between !important; gap: 24px !important; margin-bottom: 34px !important; }
.services-grid, .uc-grid, .country-grid, .partner-grid, .sdk-grid, .industry-grid, .pricing-grid, .clients-grid, .client-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
.services-grid.routing-tiers, .route-grid, .offices-grid, .case-grid, .cc-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
.svc-card, .route-card, .price-card, .case-card, .ind-card, .client-card, .api-card, .bcard, .voice-card, .qs-card, .sdk-card, .country-card, .partner-card, .office-card, .info-card, .uc-card, .t-card, .cc-card, .factor-card { padding: clamp(22px, 3vw, 34px) !important; }
.svc-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.svc-card.featured, .route-card.premium, .price-card.featured, .client-card.featured { background: #101715 !important; color: #fff !important; border-color: rgba(123,226,201,.35) !important; }
.svc-card.featured .svc-name, .route-card.premium .route-name { color: #fff !important; }
.svc-card.featured .svc-desc, .route-card.premium .route-desc { color: rgba(255,255,255,.72) !important; }
.svc-card.featured .svc-features li, .route-card.premium .route-features li { color: rgba(255,255,255,.9) !important; }
.svc-card.featured .svc-features li svg, .route-card.premium .route-features li svg { color: var(--accent-glow) !important; }
.route-card.premium .route-stat-val { color: var(--accent-glow) !important; }
.route-card.premium .route-stat-label { color: rgba(255,255,255,.55) !important; }
.svc-card:hover, .route-card:hover, .country-card:hover, .partner-card:hover, .office-card:hover, .info-card:hover, .client-card:hover, .sdk-card:hover, .uc-card:hover { border-color: rgba(0,143,122,.55) !important; transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important; }

.svc-featured-tag {
  position: static !important;
  inset: auto !important;
  align-self: center !important;
  margin: 0 auto 18px !important;
  display: inline-flex !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 28px !important;
  box-shadow: none !important;
}
.svc-featured-tag::before {
  content: "★";
  display: inline-block;
  color: var(--accent2) !important;
  font-size: 11px;
  line-height: 1;
}
.svc-icon, .uc-icon, .info-icon, .factor-icon, .cc-icon, .ind-icon, .step-num { width: 46px !important; height: 46px !important; border-radius: 10px !important; background: var(--accent-light) !important; color: var(--accent-dark) !important; }
.svc-icon {
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 18px !important;
  flex: 0 0 auto !important;
}
.svc-icon svg {
  width: 23px !important;
  height: 23px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}
.svc-card.featured .svc-featured-tag {
  color: var(--accent-glow) !important;
  background: rgba(123,226,201,.1) !important;
  border-color: rgba(123,226,201,.34) !important;
}
.svc-card.featured .svc-icon {
  color: var(--accent-glow) !important;
  background: rgba(123,226,201,.12) !important;
  border: 1px solid rgba(123,226,201,.22) !important;
}
.svc-grid, .how-grid, .contact-grid, .api-grid, .bulk-grid, .voice-grid { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr) !important; gap: clamp(28px, 5vw, 70px) !important; align-items: center !important; }
.svc-grid.reverse { direction: ltr !important; }
.svc-grid.reverse > .svc-visual, .svc-grid.reverse > .svc-visual-dark { order: -1 !important; }

.svc-visual, .svc-visual-dark, .how-terminal, .code-card, .endpoint-wrap { background: #101715 !important; color: #d8fff4 !important; border-color: rgba(123,226,201,.2) !important; }
.svc-visual .metric-label, .svc-visual-dark .metric-label { color: rgba(255,255,255,.62) !important; }
.svc-visual .metric-val, .svc-visual-dark .metric-val { color: var(--accent-glow) !important; }
.code-block, .ht-body, .qs-code, .sdk-install, .ep-path { font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; }
.code-key, .ht-key, .c-k, .ep-method.post { color: var(--accent-glow) !important; }
.code-val, .ht-val, .c-s, .c-st { color: #f5b942 !important; }
.code-success, .ht-success { color: #88f0a4 !important; }
.code-comment, .ht-comment { color: rgba(255,255,255,.38) !important; }

.clients-row { display: flex !important; gap: 10px !important; min-width: max-content !important; }
.client-cell { min-width: 146px !important; padding: 18px 24px !important; display: grid !important; place-items: center !important; }
.client-cell span { color: var(--text) !important; font-weight: 800 !important; }
.clients-label { color: var(--muted) !important; font-weight: 800 !important; text-align: left !important; }
.t-track { display: flex !important; gap: 16px !important; padding: 6px clamp(24px, 6vw, 84px) 28px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; }
.t-card { flex: 0 0 340px !important; scroll-snap-align: start !important; }

.cta-banner { background: #101715 !important; color: #fff !important; text-align: left !important; border-top: 6px solid var(--accent2) !important; }
.cta-banner h2, .cta-banner p, .cta-actions { width: min(100%, 980px) !important; margin-left: auto !important; margin-right: auto !important; }
.cta-banner h2 { color: #fff !important; font-size: clamp(36px, 5vw, 72px) !important; line-height: .94 !important; }
.cta-banner p { color: rgba(255,255,255,.72) !important; }
.cta-actions { justify-content: flex-start !important; }

.form-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
.form-group input, .form-group select, .form-group textarea { border-radius: 8px !important; border: 1px solid #bcb49f !important; background: #fff !important; color: var(--text) !important; min-height: 44px !important; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent) !important; outline: 3px solid rgba(0,143,122,.12) !important; }
.region-tabs { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: flex-start !important; }
.region-tab { border: 1px solid #bcb49f !important; border-radius: 999px !important; background: var(--surface) !important; color: var(--text) !important; padding: 10px 14px !important; font-weight: 800 !important; }
.region-tab.active, .region-tab:hover { background: #101715 !important; color: #fff !important; }

footer { background: #101715 !important; color: #fff !important; }
.footer-top { display: grid !important; grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(140px, 1fr)) !important; gap: 32px !important; width: min(100%, 1240px) !important; margin: 0 auto 36px !important; padding-bottom: 36px !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
.footer-bottom { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 20px !important; flex-wrap: wrap !important; width: min(100%, 1240px) !important; margin: 0 auto !important; }
.footer-col h5 { color: rgba(255,255,255,.46) !important; font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; font-size: 11px !important; }
.footer-col a, .footer-brand p, .footer-bottom p { color: rgba(255,255,255,.66) !important; }
.footer-col a:hover { color: #fff !important; }
.fbadge { color: rgba(255,255,255,.72) !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.14) !important; }
.wa-float { right: 24px !important; bottom: 24px !important; width: 54px !important; height: 54px !important; border-radius: 16px !important; background: var(--accent) !important; box-shadow: 0 18px 44px rgba(0,143,122,.28) !important; }

.mobile-menu { background: #101715 !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
.mobile-menu a { color: rgba(255,255,255,.8) !important; border-color: rgba(255,255,255,.1) !important; }
.mobile-menu a:hover { color: #fff !important; }
.mobile-menu .mm-group { color: var(--accent-glow) !important; }
.mobile-menu .mm-login { border-color: rgba(255,255,255,.18) !important; color: #fff !important; }

@media (max-width: 1180px) {
  :root { --rail: 232px; }
  .nav-logo { font-size: 18px !important; }
  .hero-grid, .svc-grid, .how-grid, .contact-grid, .api-grid, .bulk-grid, .voice-grid { grid-template-columns: 1fr !important; }
  .services-grid, .uc-grid, .country-grid, .partner-grid, .sdk-grid, .industry-grid, .pricing-grid, .clients-grid, .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-trust, .stats-bar, .metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 761px) and (max-width: 1380px) {
  .hero h1 { font-size: clamp(56px, 5.8vw, 78px) !important; }
  .hero-visual { width: min(100%, 360px) !important; padding: 18px 8px !important; }
  .hero-float-1, .hero-float-2 { display: none !important; }
}

@media (max-width: 760px) {
  body { margin-left: 0 !important; padding-top: 68px !important; }
  nav { inset: 0 0 auto 0 !important; width: 100% !important; height: 68px !important; padding: 0 18px !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; overflow: visible !important; border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; }
  .nav-logo { font-size: 18px !important; }
  .nav-logo .arc { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
  .nav-links, .nav-actions { display: none !important; }
  .nav-burger { display: flex !important; }
  .nav-burger span { background: #fff !important; }
  .mobile-menu { top: 68px !important; left: 0 !important; right: 0 !important; max-height: calc(100vh - 68px) !important; padding: 12px 20px 20px !important; overflow-y: auto !important; }
  .hero, .page-hero, section, .stats-bar, .clients-section, .cta-banner, footer, .svc-section, .factors, .routes, .how, .contact-cta, .faq, .offices, .contact-section, .trust, .features, .stats, .countries-section, .api-section, .bulk-section, .voice-section, .coverage, .partners, .pricing-section, .case-section, .industry-section, .endpoint-section, .sdk-section, .quickstart-section { padding-left: 20px !important; padding-right: 20px !important; }
  .hero, .page-hero { min-height: auto !important; padding-top: 64px !important; padding-bottom: 64px !important; }
  h1, .hero h1, .page-hero h1 { font-size: clamp(36px, 12vw, 54px) !important; line-height: .96 !important; }
  .hero-card { transform: none !important; }
  .hero-float-1, .hero-float-2 { display: none !important; }
  .wa-float { width: 48px !important; height: 48px !important; right: 14px !important; bottom: 14px !important; border-radius: 14px !important; }
  .wa-float svg { width: 24px !important; height: 24px !important; }
  .hero-trust, .stats-bar, .metrics-strip, .services-grid, .services-grid.routing-tiers, .route-grid, .offices-grid, .case-grid, .cc-grid, .uc-grid, .country-grid, .partner-grid, .sdk-grid, .industry-grid, .pricing-grid, .clients-grid, .client-grid { grid-template-columns: 1fr !important; }
  .stat-item, .metric-item { border-right: 0 !important; border-bottom: 1px solid rgba(16,23,21,.12) !important; }
  .services-header { align-items: flex-start !important; flex-direction: column !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .hero-actions, .hero-cta, .cta-actions { flex-direction: column !important; align-items: stretch !important; }
  .btn-hero, .btn-hero-ghost, .btn-white, .btn-white-outline, .hero-btn-wa, .hero-btn-email, .btn-primary, .btn-outline, .btn-solid { width: 100% !important; }
  .footer-top { grid-template-columns: 1fr !important; }
  .footer-bottom { align-items: flex-start !important; flex-direction: column !important; }
}