:root {
  --success: #047857;
  --warning: #b45309;
  --danger: #b91c1c;
  --text3: #64748b;
}

html, body { max-width: 100%; }
img, svg, iframe { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { overflow-wrap: anywhere; }
.lang-btn, .region-btn { color: #475569; }
.cta-section p { color: #cbd5e1 !important; }
footer .footer-brand p, footer .footer-abn, footer .footer-col h5,
footer .footer-col a, footer .footer-bottom p, footer .footer-bottom a {
  color: #94a3b8 !important; opacity: 1 !important;
}
.header .meta { color: #fff !important; opacity: 1 !important; }
:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 20000;
  transform: translateY(-160%); background: #0f172a; color: #fff;
  padding: 12px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { transform: none; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.lang-option { width: 100%; border: 0; background: transparent; text-align: left; }
.platform-note, .region-note {
  max-width: 720px; margin: 18px auto 0; color: var(--text2); font-size: 13px;
  line-height: 1.6; text-align: center;
}
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 640px; }
.table-scroll:focus { outline: 3px solid #2563eb; outline-offset: 2px; }
.section-card > table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.section-card > table:focus { outline: 3px solid #2563eb; outline-offset: 2px; }
.section-card > table th, .section-card > table td { min-width: 150px; }
.link-button { background: none; border: 0; color: var(--primary); cursor: pointer; padding: 8px; text-decoration: underline; }

@media (max-width: 900px) {
  .nav-wrap nav { height: auto; min-height: 62px; border-radius: 24px; padding: 8px 10px; gap: 8px; }
  .nav-links { display: none; }
  .nav-right { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .btn-signin { display: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .section, .cta-section { padding: 72px 20px; }
  .stats-strip, footer { padding-left: 20px; padding-right: 20px; }
  .compare-grid, .hero-preview-body { grid-template-columns: 1fr 1fr; }
  .roadmap-item { gap: 12px; }
  .roadmap-card { padding: 22px 18px; min-width: 0; }
  .legal-wrap, .container { padding-left: 16px !important; padding-right: 16px !important; }
  nav { padding-left: 20px; padding-right: 20px; }
  .blog-list, .post-wrap { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 480px) {
  .nav-wrap { top: 8px; padding: 0 8px; }
  .nav-logo { font-size: 0; gap: 0; }
  .nav-logo-icon { width: 38px; height: 38px; }
  .nav-right { flex-wrap: nowrap; gap: 4px; }
  .lang-btn, .region-btn { min-width: 44px; min-height: 44px; padding: 8px; }
  .btn-getstarted { min-height: 44px; padding: 9px 12px; font-size: 12px; }
  .hero { padding: 126px 16px 64px; }
  .hero h1 { letter-spacing: -1px; }
  .hero-btn-row, .hero-store-btns { width: 100%; }
  .hero-btn-row > *, .hero-store-btns > * { width: 100%; justify-content: center; }
  .hero-preview { margin-top: 40px; }
  .hero-preview-body { grid-template-columns: 1fr; padding: 16px; }
  .features-grid, .plans-grid, .download-grid, .stats-inner, .chip-grid { grid-template-columns: minmax(0, 1fr); }
  .compare-grid { grid-template-columns: 1fr; }
  .feature-card, .plan-card, .download-card, .compare-card { padding: 22px 18px; }
  .roadmap-icon, .roadmap-line { display: none; }
  .roadmap-date { display: block; margin: 6px 0 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { align-items: flex-start; }
  .modal-box { padding: 26px 18px; }
  nav:not(.sidebar-nav) { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  nav:not(.sidebar-nav) .nav-links { display: none; }
  nav:not(.sidebar-nav) .btn-getstarted { margin-left: auto; }
  .post-title { font-size: 30px; }
  footer a { display: inline-block; padding: 8px 3px; margin: 0 3px; }
}

@media (pointer: coarse) {
  button, .btn, .store-btn, .nav-item, input, select { min-height: 44px; }
}