/* ═══════════════════════════════════════════════════════════════════
   OBSIDIAN LIGHT — Premium 2026 Design System
   Philosophy: Precision, depth, and intentional luxury.
   Every element earns its space. Every animation has purpose.
   Loaded after style.css — all overrides use !important
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap');

/* ─── 1. Design Tokens ─────────────────────────────────────────── */
:root {
  /* Canvas */
  --canvas:       #f5f7ff;
  --surface:      #ffffff;
  --surface-up:   #f0f3ff;
  --surface-deep: #e8ecff;

  /* Brand */
  --primary:      #2546D0;
  --primary-dark: #1a35b8;
  --primary-deep: #0f1f8a;
  --primary-glow: rgba(37, 70, 208, 0.18);
  --primary-tint: rgba(37, 70, 208, 0.07);

  /* Accents */
  --cyan:         #06b6d4;
  --cyan-glow:    rgba(6, 182, 212, 0.22);
  --violet:       #7c3aed;
  --violet-light: #ede9fe;

  /* Dark surfaces */
  --dark:         #0c1322;
  --dark-2:       #111827;
  --dark-border:  rgba(255,255,255,0.07);

  /* Text */
  --text:         #090d1a;
  --text-2:       #4b5675;
  --text-muted:   #8b95b0;

  /* Borders */
  --border:       #dde2f2;
  --border-mid:   #c7ceea;

  /* Radii */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 100px;

  /* Shadows */
  --s-xs:   0 1px 3px rgba(0,0,0,.05);
  --s-sm:   0 2px 10px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --s-md:   0 6px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --s-lg:   0 16px 52px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.05);
  --s-xl:   0 24px 72px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06);
  --s-glow: 0 8px 32px var(--primary-glow);
  --s-glow-lg: 0 20px 60px rgba(37,70,208,.3), 0 8px 24px rgba(37,70,208,.18);

  /* Transitions */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── 2. Base Reset ────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Space Grotesk', 'Catamaran', sans-serif !important;
  background: var(--canvas) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(37, 70, 208, 0.14);
  color: var(--primary);
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(37, 70, 208, 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(37, 70, 208, 0.36); }

/* ─── 3. Typography ────────────────────────────────────────────── */
.main-color  { color: var(--primary) !important; }
.second-color { color: #1a2451 !important; }

.static-h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -1.8px !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
}

.paragraph {
  color: var(--text-2) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  font-weight: 450 !important;
}

span.top-header {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
}

/* ─── 4. Navbar ─────────────────────────────────────────────────── */
div.navbar {
  background: rgba(245, 247, 255, 0.88) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-bottom: 1px solid rgba(37, 70, 208, 0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 4px 24px rgba(37,70,208,.05) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  transition: box-shadow 0.3s var(--ease) !important;
}

.navbar .right-links > ul li a {
  font-family: 'Space Grotesk', sans-serif !important;
  color: #2d3558 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.1px !important;
  transition: color 0.2s var(--ease) !important;
}

.navbar .right-links > ul li a:hover,
.navbar .right-links > ul li a.hover {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

.navbar .right-links > ul .price {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--s-xs) !important;
  transition: all 0.22s var(--ease) !important;
}

.navbar .right-links > ul .price:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: var(--s-glow) !important;
  transform: translateY(-1px) !important;
}

.navbar .right-links > ul .price:hover a { color: #fff !important; }

/* Dropdown */
.dropdown-menu {
  border: 1px solid rgba(37,70,208,0.1) !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 20px 56px rgba(37,70,208,.12), 0 4px 12px rgba(0,0,0,.06) !important;
  padding: 6px !important;
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(24px) !important;
  animation: dropdown-in 0.18s var(--ease-out) both !important;
}

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.dropdown-item {
  border-radius: 9px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  color: #2d3558 !important;
  transition: all 0.14s !important;
}

.dropdown-item:hover {
  background: rgba(37, 70, 208, 0.07) !important;
  color: var(--primary) !important;
}

.dropdown-divider { border-color: var(--border) !important; margin: 4px 6px !important; }

/* Mobile navbar */
.navbar.bg-light {
  background: rgba(245,247,255,0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 16px rgba(37,70,208,.07) !important;
}

.offcanvas {
  background: var(--surface) !important;
  border-left: 1px solid var(--border) !important;
}

.offcanvas .nav-link {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  border-radius: 10px !important;
  transition: all 0.15s !important;
  padding: 10px 14px !important;
}

.offcanvas .nav-link:hover {
  background: var(--surface-up) !important;
  color: var(--primary) !important;
}

/* ─── 5. Hero (top-page) ─────────────────────────────────────────── */
.top-page {
  background:
    radial-gradient(ellipse 90% 70% at  8% 15%, rgba(37, 70, 208, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse 60% 55% at 92% 85%, rgba(124,58,237, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 55% 45% at 50% -5%, rgba(6, 182, 212, 0.07) 0%, transparent 50%),
    var(--canvas) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Dot-grid — editorial luxury marker */
.top-page::before {
  background-color: transparent !important;
  background-image: radial-gradient(circle, rgba(37, 70, 208, 0.14) 1px, transparent 1px) !important;
  background-size: 30px 30px !important;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, black 20%, transparent 75%) !important;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, black 20%, transparent 75%) !important;
  opacity: 0.55 !important;
}

/* Skewed background base */
.top-page::after {
  background-color: #eef0ff !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.top-page::before {
  z-index: 0 !important;
  pointer-events: none !important;
}

.top-page h1,
.top-page .static-p,
.top-page .ways,
.top-page .container {
  position: relative !important;
  z-index: 2 !important;
}

.top-page .images {
  position: relative !important;
  z-index: 2 !important;
}

.top-page .top-bg { opacity: 0.035 !important; }

/* Gradient headline — the signature visual */
.top-page h1 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 76px !important;
  font-weight: 800 !important;
  letter-spacing: -3px !important;
  line-height: 0.97 !important;
  background: linear-gradient(145deg, #090d1a 0%, #1c34bc 38%, #7c3aed 75%, #06b6d4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: headline-reveal 1s var(--ease-out) both !important;
}

@keyframes headline-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.top-page h1 span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

.top-page .static-p {
  font-size: 18px !important;
  color: var(--text-2) !important;
  font-weight: 450 !important;
  line-height: 1.7 !important;
  animation: headline-reveal 1s 0.15s var(--ease-out) both !important;
}

/* ── Hero Pills ─────────────────────────────────────────────── */
.hero-pills {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  animation: headline-reveal 1s 0.3s var(--ease-out) both !important;
}

.hero-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(37, 70, 208, 0.14) !important;
  border-radius: var(--r-pill) !important;
  padding: 9px 20px 9px 12px !important;
  box-shadow: 0 2px 12px rgba(37,70,208,.08), 0 1px 3px rgba(0,0,0,.04) !important;
  cursor: default !important;
  /* staggered entrance */
  opacity: 0;
  animation: pill-in 0.5s var(--ease-spring) forwards !important;
}

.hero-pill--1 { animation-delay: 0.35s !important; }
.hero-pill--2 { animation-delay: 0.50s !important; }
.hero-pill--3 { animation-delay: 0.65s !important; }

@keyframes pill-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.hero-pill:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(37,70,208,.16) !important;
  border-color: rgba(37,70,208,.3) !important;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s var(--ease), border-color 0.22s !important;
}

/* Icon bubble */
.hero-pill__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(37, 70, 208, 0.1) !important;
  color: var(--primary) !important;
  flex-shrink: 0 !important;
  transition: background 0.2s, transform 0.2s var(--ease-spring) !important;
}

.hero-pill:hover .hero-pill__icon {
  background: var(--primary) !important;
  color: #fff !important;
  transform: scale(1.12) rotate(-5deg) !important;
}

/* Icon subtle pulse on idle */
.hero-pill--1 .hero-pill__icon { animation: icon-pulse 4s 1s ease-in-out infinite !important; }
.hero-pill--2 .hero-pill__icon { animation: icon-pulse 4s 1.6s ease-in-out infinite !important; }
.hero-pill--3 .hero-pill__icon { animation: icon-pulse 4s 2.2s ease-in-out infinite !important; }

@keyframes icon-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,70,208,0); }
  50%       { box-shadow: 0 0 0 6px rgba(37,70,208,0.1); }
}

.hero-pill__text {
  font-family: 'Space Grotesk', sans-serif !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  margin: 0 !important;
  letter-spacing: -0.1px !important;
  white-space: nowrap !important;
}

/* Hide the old number spans — no longer used */
.top-page .ways div > span:not(.hero-pill__icon):not(.hero-pill__text) {
  display: none !important;
}

/* Ensure wave canvas is visible above hero pseudo-elements */
#waves {
  position: relative !important;
  z-index: 2 !important;
}

/* eSIM sits above the wave canvas */
.sim_home {
  position: relative !important;
  z-index: 3 !important;
}

/* eSIM — cinematic float */
.sim_home img {
  animation: esim-float 7s ease-in-out infinite !important;
  filter:
    drop-shadow(0 24px 60px rgba(37, 70, 208, 0.28))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12)) !important;
}

@keyframes esim-float {
  0%,  100% { transform: translateY(0px)   rotate(-1.5deg) scale(1.00); }
  35%        { transform: translateY(-14px) rotate( 0.5deg) scale(1.01); }
  65%        { transform: translateY(-18px) rotate( 1.5deg) scale(1.01); }
}

/* ─── 6. Plan Cards ────────────────────────────────────────────── */
.plans {
  position: relative !important;
  margin-top: 0 !important;
}

.plans .plan {
  border-radius: var(--r-lg) !important;
  transition: transform 0.32s var(--ease-spring), box-shadow 0.32s var(--ease) !important;
}

/* Country badges */
.plans .plan .us,
.plans .plan .gb {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* Plan name label */
.plans .plan .top-plan {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
}

/* Price — flexbox alignment (fixes dollar sign) */
.plans .plan .price {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  position: static !important;
  margin: 6px 0 !important;
}

.plans .plan .price .dollor {
  position: static !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-top: 14px !important;
  line-height: 1 !important;
  opacity: 0.8 !important;
}

.plans .plan .price .number {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 64px !important;
  font-weight: 800 !important;
  letter-spacing: -4px !important;
  line-height: 1 !important;
}

/* ── Card 1: Pristine ──────────────────────────────────────────── */
.plans .first {
  background: #ffffff !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--s-md) !important;
}

.plans .first:hover {
  transform: translateY(-10px) !important;
  box-shadow: var(--s-lg), 0 0 0 3px rgba(37,70,208,.08) !important;
  border-color: rgba(37,70,208,.25) !important;
}

.plans .first .top-plan { color: var(--text-2) !important; }
.plans .first .price    { color: var(--text) !important;   }
.plans .first .price .dollor { color: var(--text-2) !important; }

.plans .first ul li {
  background: var(--surface-up) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: var(--text-2) !important;
  font-weight: 500 !important;
  transition: background 0.15s !important;
}

.plans .first ul li:hover { background: var(--surface-deep) !important; }
.plans .first ul li .fa-check { color: var(--primary) !important; }

/* ── Card 2: Hero (featured) ──────────────────────────────────── */
.plans .second {
  background-size: 300% 300% !important;
  background-image: linear-gradient(
    150deg,
    #0f1f8a 0%,
    #1a35b8 20%,
    #2546D0 40%,
    #3b2fc4 62%,
    #4c1db8 80%,
    #2546D0 100%
  ) !important;
  animation: card-shimmer 12s ease infinite !important;
  border: none !important;
  box-shadow:
    0 28px 72px rgba(37, 70, 208, 0.42),
    0 10px 28px rgba(37, 70, 208, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  transform: scale(1.05) !important;
}

@keyframes card-shimmer {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Decorative orbs */
.plans .second::before {
  content: '' !important;
  position: absolute !important;
  top: -50px !important; right: -50px !important;
  width: 240px !important; height: 240px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.09) !important;
  pointer-events: none !important;
}

.plans .second::after {
  content: '' !important;
  position: absolute !important;
  bottom: -90px !important; left: -50px !important;
  width: 300px !important; height: 300px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.05) !important;
  pointer-events: none !important;
}

.plans .second:hover {
  transform: scale(1.14) translateY(-12px) !important;
  box-shadow:
    0 36px 96px rgba(37, 70, 208, 0.5),
    0 14px 40px rgba(37, 70, 208, 0.3) !important;
}

.plans .second .top-plan { color: rgba(255,255,255,0.85) !important; }
.plans .second .price    { color: #ffffff !important; }
.plans .second .price .dollor { color: rgba(255,255,255,0.75) !important; }

.plans .second ul li {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: var(--r-sm) !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  backdrop-filter: blur(6px) !important;
  transition: background 0.15s !important;
}

.plans .second ul li:hover { background: rgba(255,255,255,0.18) !important; }
.plans .second ul li .fa-check { color: #7ee8ff !important; }

.plans .second button,
.plans .second select {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Card 3: Obsidian ──────────────────────────────────────────── */
.plans .third {
  background: var(--dark) !important;
  border: 1.5px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 20px 56px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.12) !important;
}

.plans .third:hover {
  transform: translateY(-10px) !important;
  box-shadow:
    0 28px 72px rgba(0,0,0,.28),
    0 0 0 2px rgba(6,182,212,0.3) !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
}

.plans .third .top-plan { color: rgba(255,255,255,.8) !important; }
.plans .third .price    { color: #f8faff !important; }
.plans .third .price .dollor { color: rgba(255,255,255,.65) !important; }

.plans .third ul li {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: var(--r-sm) !important;
  color: #94a3c4 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background 0.15s !important;
}

.plans .third ul li:hover { background: rgba(255,255,255,.08) !important; }
.plans .third ul li .fa-check { color: var(--cyan) !important; }

/* ── All plan buttons ────────────────────────────────────────── */
.plans .first button,
.plans .first select {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  box-shadow: 0 4px 16px var(--primary-glow) !important;
  transition: all 0.24s var(--ease) !important;
}

.plans .first button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(37,70,208,.38) !important;
}

.plans .second button,
.plans .second select {
  background: rgba(255,255,255,0.14) !important;
  border: 1.5px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.24s var(--ease) !important;
}

.plans .second button:hover {
  background: #fff !important;
  color: var(--primary) !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.18) !important;
}

.plans .third button,
.plans .third select {
  background: linear-gradient(135deg, var(--cyan), #0077a8) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  box-shadow: 0 4px 16px var(--cyan-glow) !important;
  transition: all 0.24s var(--ease) !important;
}

.plans .third button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(6,182,212,.42) !important;
}

/* ─── 7. Content Background ─────────────────────────────────── */
.content { background: var(--canvas) !important; }
.content.fqa { background: var(--canvas) !important; }

/* Skewed section dividers */
.content .choose_country::before,
.content .choose_country::after,
.how-works::before,
.how-works::after {
  background-color: #eef0ff !important;
}

/* ─── 8. Calls / Disclaimer ─────────────────────────────────── */
.calls {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s-sm) !important;
}

.calls ul li .icon {
  background: rgba(37,70,208,.09) !important;
  color: var(--primary) !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 4px rgba(37,70,208,.05) !important;
}

.calls ul li .text {
  color: var(--text-2) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* ─── 9. How It Works ────────────────────────────────────────── */
.how-works .static-header {
  position: relative !important;
}

/* Giant step number — accent watermark */
.how-works .parent .text div > span {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 56px !important;
  font-weight: 800 !important;
  letter-spacing: -3px !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: 4px !important;
  margin-left: 0 !important;
  background: linear-gradient(135deg, var(--primary), var(--violet)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  opacity: 0.9 !important;
}

.how-works .parent h4 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: var(--text) !important;
  line-height: 1.15 !important;
}

.how-works .parent .text .paragraph {
  max-width: 420px !important;
  color: var(--text-2) !important;
}

/* Lottie depth */
.how-works .parent lottie-player {
  filter: drop-shadow(0 20px 48px rgba(37,70,208,.14)) !important;
  transition: transform 0.4s var(--ease) !important;
}

.how-works .parent lottie-player:hover {
  transform: scale(1.04) !important;
}

/* ─── 10. FAQ (Learn More) ────────────────────────────────────── */
.question {
  padding: 28px 0 24px !important;
}

.question h3 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.2px !important;
  transition: color 0.18s !important;
}

.question h3:hover { color: var(--primary) !important; }

.question p {
  color: var(--text-2) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.question p a {
  color: var(--primary) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(37,70,208,.3) !important;
  transition: border-color 0.15s !important;
}

.question p a:hover {
  border-bottom-color: var(--primary) !important;
}

.question .fa-plus {
  background: var(--primary) !important;
  padding: 6px !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  box-shadow: 0 2px 8px var(--primary-glow) !important;
  transition: transform 0.2s var(--ease) !important;
}

.question .fa-minus {
  background: rgba(37,70,208,.1) !important;
  color: var(--primary) !important;
  padding: 6px !important;
  border-radius: 50% !important;
  font-size: 12px !important;
}

.question h3:hover .fa-plus {
  transform: rotate(45deg) scale(1.1) !important;
}

.border {
  border-color: var(--border) !important;
  opacity: 0.7 !important;
}

.see-more .btn-more {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 32px !important;
  border-radius: var(--r-pill) !important;
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-2) !important;
  box-shadow: var(--s-xs) !important;
  transition: all 0.24s var(--ease) !important;
  letter-spacing: -0.1px !important;
}

.see-more .btn-more:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: var(--s-glow) !important;
  transform: translateY(-2px) !important;
}

.fa-arrow-right { transition: transform 0.2s var(--ease) !important; }
.see-more .btn-more:hover .fa-arrow-right { transform: rotate(-45deg) translateX(3px) !important; }

/* ─── 11. CTA Block ──────────────────────────────────────────── */
.four-g {
  background: linear-gradient(
    140deg,
    #0d1e82 0%,
    #1a35b8 22%,
    var(--primary) 48%,
    #3b2fc4 74%,
    #4c1db8 100%
  ) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Overlay div already sits at z-index:-2; make it transparent
   since the gradient now lives on the container itself */
.four-g .overlay {
  background: transparent !important;
}

/* Grid line texture */
.four-g::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Ambient glow orb */
.four-g::after {
  content: '' !important;
  position: absolute !important;
  top: -80px !important; right: -80px !important;
  width: 520px !important; height: 520px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,0.09) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.four-g p {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  line-height: 1.2 !important;
  position: relative !important;
  z-index: 1 !important;
}

.four-g button {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 12px 36px !important;
  border-radius: var(--r-pill) !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1.5px solid rgba(255,255,255,0.32) !important;
  color: #fff !important;
  backdrop-filter: blur(8px) !important;
  position: relative !important;
  z-index: 1 !important;
  transition: all 0.24s var(--ease) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
}

.four-g button:hover {
  background: #fff !important;
  color: var(--primary) !important;
  border-color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.2) !important;
}

/* ─── 12. Footer ─────────────────────────────────────────────── */
.footer {
  background: var(--dark) !important;
  border-top: none !important;
  padding: 44px 0 !important;
  margin-bottom: 0 !important;
}

.bottom .links li {
  color: #5a6890 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color 0.18s !important;
}

.bottom .links li:hover { color: var(--cyan) !important; }

.bottom .links li::after { background-color: #1d2641 !important; }

.bottom .social li {
  color: #5a6890 !important;
  transition: color 0.18s, transform 0.18s !important;
}

.bottom .social li:hover {
  color: var(--cyan) !important;
  transform: translateY(-2px) !important;
}

.bottom .social a {
  color: inherit !important;
  transition: color 0.18s !important;
}

.bottom .social a:hover { color: var(--cyan) !important; }

.points { opacity: 0.3 !important; }

/* ─── 13. Inner Pages ─────────────────────────────────────────── */

/* Page titles */
.content .container > h2,
.content .container .static-header .static-h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  color: var(--text) !important;
}

/* Cards — no background override so inline gradient styles are preserved */
.content .card {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--s-sm) !important;
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease) !important;
}

.content .card:hover {
  box-shadow: var(--s-md) !important;
  border-color: rgba(37,70,208,.14) !important;
}

/* Nav pills */
.nav-pills .nav-link {
  font-family: 'Space Grotesk', sans-serif !important;
  border-radius: var(--r-pill) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--text-2) !important;
  padding: 7px 20px !important;
  border: 1.5px solid transparent !important;
  transition: all 0.2s var(--ease) !important;
}

.nav-pills .nav-link:hover:not(.active) {
  background: var(--surface-up) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px var(--primary-glow) !important;
}

/* Tables */
.table > thead th {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  border-bottom: 2px solid var(--border) !important;
}

.table > tbody td {
  font-size: 14px !important;
  vertical-align: middle !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.table > tbody tr { transition: background 0.12s !important; }

.table > tbody tr:hover > td {
  background: var(--surface-up) !important;
}

/* ─── 14. Forms & Buttons ─────────────────────────────────────── */
.form-control, .form-select {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  background: #fff !important;
  color: var(--text) !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

.form-control::placeholder { color: var(--text-muted) !important; }

.form-control:focus, .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37,70,208,.12) !important;
  outline: none !important;
}

.form-label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--text) !important;
}

/* Button — primary */
.btn-primary {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border: none !important;
  box-shadow: 0 4px 16px var(--primary-glow) !important;
  transition: all 0.24s var(--ease) !important;
  letter-spacing: -0.1px !important;
}

.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(37,70,208,.36) !important;
}

.btn-primary:active { transform: translateY(0) !important; }

/* Button — outline secondary */
.btn-outline-secondary {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
  transition: all 0.18s var(--ease) !important;
}

.btn-outline-secondary:hover {
  background: var(--surface-up) !important;
  color: var(--text) !important;
  border-color: var(--border-mid) !important;
}

/* Button — outline primary */
.btn-outline-primary {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  border-color: rgba(37,70,208,.35) !important;
  color: var(--primary) !important;
  transition: all 0.18s var(--ease) !important;
}

.btn-outline-primary:hover {
  background: rgba(37,70,208,.07) !important;
  border-color: var(--primary) !important;
}

/* Button — outline danger */
.btn-outline-danger {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  border-color: rgba(220,38,38,.35) !important;
  color: #dc2626 !important;
  transition: all 0.18s var(--ease) !important;
}

.btn-outline-danger:hover {
  background: rgba(220,38,38,.07) !important;
  border-color: #dc2626 !important;
}

/* Button — warning */
.btn-warning {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
}

/* Button — sm */
.btn-sm {
  font-size: 13px !important;
  padding: 6px 16px !important;
  letter-spacing: -0.1px !important;
}

/* ─── 15. Alerts ─────────────────────────────────────────────── */
.alert {
  border-radius: var(--r-sm) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-width: 1.5px !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.alert-success {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

.alert-danger {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

.alert-warning {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

.alert-info {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1e40af !important;
}

/* ─── 16. Badges ─────────────────────────────────────────────── */
.badge {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
  font-size: 11px !important;
}

/* ─── 17. Chat Widget ─────────────────────────────────────────── */
#chat-bubble {
  background: linear-gradient(135deg, var(--primary), #3d2fa0) !important;
  box-shadow: 0 4px 20px var(--primary-glow) !important;
  transition: transform 0.18s var(--ease-spring), box-shadow 0.18s !important;
}

#chat-bubble:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 8px 28px rgba(37,70,208,.45) !important;
}

#chat-popup {
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 64px rgba(37,70,208,.16), 0 4px 16px rgba(0,0,0,.08) !important;
}

#chat-popup-header {
  background: linear-gradient(135deg, var(--primary), #3d2fa0) !important;
}

/* ─── 18. Readability Safeguards ─────────────────────────────── */

/* Select dropdowns — always white bg + dark text so OS dropdown list is readable */
.plans .second select,
.plans .third  select,
.plans .first  select {
  background: #ffffff !important;
  color: #111827 !important;
}

/* Native select option text is always dark (browser-rendered) — no override needed */

/* Ensure all plan card text has contrast */
.plans .second .top-header span,
.plans .second .top-header p,
.plans .second ul li,
.plans .second .top-plan {
  color: rgba(255,255,255,.88) !important;
}

.plans .third .top-header span,
.plans .third .top-header p,
.plans .third ul li,
.plans .third .top-plan {
  color: rgba(255,255,255,.8) !important;
}

/* First card — everything dark on light */
.plans .first .top-header span,
.plans .first .top-header p,
.plans .first .top-plan {
  color: #2d3558 !important;
}

/* Footer dark bg — force light text */
.footer,
.footer * {
  color: inherit;
}

.bottom .links li,
.bottom .social li,
.bottom .social a {
  color: #5a6890 !important;
}

/* CTA block — all children white */
.four-g p,
.four-g button {
  color: #fff !important;
}

/* How-works on pale bg — ensure heading contrast */
.how-works .parent h4 { color: var(--text) !important; }
.how-works .parent p  { color: var(--text-2) !important; }

/* ─── 20. Section Entrance Animations ────────────────────────── */
.how-works .parent {
  animation: section-in 0.6s var(--ease-out) both !important;
}

.how-works .parent:nth-child(2) { animation-delay: 0.1s !important; }
.how-works .parent:nth-child(3) { animation-delay: 0.2s !important; }
.how-works .parent:nth-child(4) { animation-delay: 0.3s !important; }

@keyframes section-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ═══════════════════════════════════════════════════════════════
   21. RESPONSIVE — Mobile-first overrides
   All media queries live here so !important from desktop rules
   are properly overridden at the right breakpoints.
   ═══════════════════════════════════════════════════════════════ */

/* ── Desktop nav / mobile nav visibility ─────────────────────── */
.hide-desktop { display: none !important; }
.show-tablet  { display: none !important; }

/* ── Mobile nav link style ───────────────────────────────────── */
.mob-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.mob-nav-link i { width: 18px; text-align: center; opacity: .65; font-size: 13px; }
.mob-nav-link:hover,
.mob-nav-link:focus { background: #f0f4ff; color: #2546D0; text-decoration: none; }
.mob-nav-link--active { color: #2546D0; background: #eff4ff; font-weight: 700; }
.mob-nav-link--active i { opacity: 1; }
.mob-nav-link--logout { color: #dc2626; }
.mob-nav-link--logout i { opacity: .7; }
.mob-nav-link--logout:hover { background: #fef2f2; color: #b91c1c; }

/* ── Footer link helper ───────────────────────────────────────── */
.ft-link {
  color: #d1d5db;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ft-link:hover,
.ft-link:focus { color: #fff; text-decoration: none; outline-offset: 3px; }

/* ── Footer grid (class-based so media queries can override) ──── */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-bottom {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── Trust strip ─────────────────────────────────────────────── */
.trust-strip-wrap {
  position: relative;
  z-index: 101;
  margin-top: 56px;
  margin-bottom: 16px;
}
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: #f8faff;
  border: 1.5px solid #e0e7ff;
  border-radius: 16px;
  padding: 14px 24px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  flex: 1 1 160px;
  justify-content: center;
}
.trust-item--bordered { border-right: 1px solid #e0e7ff; }
.trust-emoji { font-size: 18px; line-height: 1; }
.trust-text  { font-size: 12px; font-weight: 700; color: #182044; line-height: 1.3; }
.trust-sub   { font-weight: 400; color: #6b7280; }

/* ── Order page stat row ─────────────────────────────────────── */
.order-stat-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.order-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── "Most Popular" badge — sits inside the card ─────────────── */
.popular-badge {
  display: inline-block;
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #fff;
  border-radius: 100px;
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(6, 182, 212, .4);
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   ≤ 800px  Tablet
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {

  /* Prevent any element from breaking out of the viewport */
  body { overflow-x: hidden !important; }

  /* Show mobile nav, hide desktop nav */
  .hide-desktop { display: block !important; }
  .show-tablet  { display: block !important; }
  .hide-tablet  { display: none  !important; }
  .right-links  { display: none  !important; }

  /* Body offset for fixed mobile navbar (~60px tall) */
  body { padding-top: 60px; }

  /* ── Hero ── */
  .top-page h1 {
    font-size: 36px !important;
    letter-spacing: -1.5px !important;
    line-height: 1.1 !important;
  }
  .top-page .static-p { font-size: 14px !important; margin-top: 8px !important; }
  .top-page .images {
    grid-template-columns: 1fr !important;
    margin-top: 12px !important;
  }
  /* Keep sim image but smaller */
  .sim_home { display: flex !important; justify-content: center !important; }
  .sim_home img { width: 180px !important; }

  /* ── Hero pills: wrap on tablet ── */
  .hero-pills {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
  }
  .hero-pill { flex: 0 1 auto !important; }

  /* ── Plans ── */
  .plans {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 16px !important;
    margin-top: 0 !important;
  }
  .plans .second { transform: none !important; }
  .plans .second:hover, .plans .plan:hover { transform: none !important; }

  /* ── How it works ── */
  .how-works .parent {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
  /* Steps 2 & 4: lottie is first child in HTML but should appear BELOW the text on mobile */
  .how-works .parent:nth-child(2) > div:first-child,
  .how-works .parent:nth-child(4) > div:first-child { order: 2 !important; }
  .how-works .parent:nth-child(2) > div:last-child,
  .how-works .parent:nth-child(4) > div:last-child  { order: 1 !important; }

  .how-works .parent h4 { font-size: 20px !important; }
  .how-works .parent lottie-player {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto !important;
  }
  .how-works .parent .text div > span { font-size: 32px !important; }
  .how-works .parent .text .paragraph { max-width: 100% !important; }

  /* ── Footer grid ── */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* ── Trust strip: 2×2 grid ── */
  .trust-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 12px !important;
    gap: 0 !important;
  }
  .trust-item {
    justify-content: flex-start !important;
    padding: 8px 10px !important;
    border-right: none !important;
    border-bottom: none !important;
    flex: none !important;
  }
  .trust-item--bordered { border-right: none !important; }

  /* ── Order info grid ── */
  .order-info-grid { grid-template-columns: 1fr !important; }

  /* ── Four-G CTA ── */
  .four-g { padding: 32px 16px !important; text-align: center !important; }
  .four-g p { font-size: 20px !important; }

  /* ── Manual setup grid ── */
  .mobile-info .all-details {
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
  }
  .mobile-info .all-details label { grid-column: 1 / -1 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ≤ 600px  Mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Hard lock: nothing can overflow the screen */
  *, *::before, *::after { box-sizing: border-box !important; }
  body { overflow-x: hidden !important; max-width: 100vw !important; }

  /* ── Hero: compact ── */
  .top-page {
    padding-top: 24px !important;
    padding-bottom: 80px !important;
    min-height: unset !important;
  }
  .top-page h1 {
    font-size: 28px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
    padding: 0 12px !important;
  }
  .top-page .static-p {
    font-size: 13px !important;
    margin-bottom: 12px !important;
    padding: 0 16px !important;
  }
  .top-page .images { margin-top: 4px !important; }
  #waves { max-height: 80px !important; }

  /* Keep sim image, shrink further */
  .sim_home img { width: 120px !important; }

  /* ── Hero pills: wrapped, smaller ── */
  .hero-pills {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 12px 4px !important;
  }
  .hero-pill {
    flex: 0 1 auto !important;
    padding: 6px 10px !important;
  }
  .hero-pill__icon { width: 26px !important; height: 26px !important; }
  .hero-pill__icon svg { width: 14px !important; height: 14px !important; }
  .hero-pill__text { font-size: 11px !important; white-space: nowrap !important; }

  /* ── Plans section header ── */
  .plans-wrap { margin-top: -60px !important; }
  .plans-wrap > div:first-child { padding-bottom: 10px !important; }
  .plans-wrap > div:first-child h2 { font-size: 20px !important; }
  .plans-wrap > div:first-child p  { font-size: 12px !important; margin-top: 3px !important; }
  .plans { gap: 12px !important; }

  /* ── Plan card internals ── */
  .plans .plan .top-header { padding: 16px 14px 8px !important; }
  .plans .plan ul { padding: 0 10px 10px !important; gap: 5px !important; }
  .plans .plan ul li { padding: 7px 10px !important; font-size: 12px !important; }
  .plans .plan .price { margin: 4px 0 2px !important; }
  .plans .plan .price .number { font-size: 44px !important; letter-spacing: -2px !important; }
  .plans .plan .price .dollor { font-size: 17px !important; margin-top: 9px !important; }
  /* Buttons: full width, comfortable tap target */
  .plans .plan .top-header button,
  .plans .plan .top-header select {
    font-size: 13px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ── How it works: column layout, keep lottie small ── */
  .how-works { padding: 28px 0 20px !important; margin-top: 0 !important; }
  .how-works .static-header { margin-bottom: 12px !important; }
  .how-works .static-header .static-h2 { font-size: 20px !important; }
  .how-works .parent {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 16px 0 !important;
    margin-bottom: 0 !important;
  }
  .how-works .parent lottie-player {
    width: 120px !important;
    height: 120px !important;
    display: block !important;
    margin: 0 auto !important;
  }
  /* Reset base misalignment offsets so text is centred in one clean column */
  .how-works .parent .text {
    width: 100% !important;
    text-align: center !important;
    align-items: center !important;
  }
  .how-works .parent .text div {
    padding-left: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }
  .how-works .parent .text div > span {
    font-size: 26px !important;
    margin-left: 0 !important;
    margin-bottom: 2px !important;
    display: block !important;
    text-align: center !important;
  }
  .how-works .parent h4 {
    font-size: 16px !important;
    margin: 4px 0 6px !important;
    text-align: center !important;
  }
  .how-works .parent .paragraph {
    font-size: 13px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .how-works .parent + .parent { border-top: 1px solid #e8ecff !important; }

  /* ── Learn More (home FAQ) ── */
  .content.home { padding-top: 8px !important; }
  .learn-more { margin-top: 16px !important; }
  .question { padding: 14px 0 12px !important; }
  .question h3 { font-size: 14px !important; }
  .question p  { font-size: 13px !important; }
  .learn-more .static-header { margin-bottom: 8px !important; }
  .learn-more .static-header .static-h2 { font-size: 20px !important; }

  /* ── Trust strip: 2×2 ── */
  .trust-strip-wrap { margin-top: 20px !important; margin-bottom: 4px !important; }
  .trust-text { font-size: 11px !important; }
  .trust-emoji { font-size: 16px !important; }

  /* ── CTA block ── */
  .four-g {
    padding: 24px 14px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .four-g p { font-size: 16px !important; line-height: 1.35 !important; }
  .four-g button { font-size: 13px !important; padding: 10px 20px !important; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* ── Order page QR ── */
  .QR-code { flex-direction: column !important; }
  .QR-code .Qr-image { text-align: center !important; margin-top: 16px !important; }
  .QR-code .Qr-image svg { max-width: 200px !important; height: auto !important; }

  /* ── Order stat row ── */
  .order-stat-row { flex-wrap: wrap !important; }
  .order-stat-row > div, .order-stat-row > a {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
  }

  /* ── Order page: bookmark bar ── */
  .static-header > div[style*="inline-flex"] {
    flex-wrap: wrap !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  /* ── Order page: inputs overflow fix ── */
  .mobile-info input,
  .QR-code .input input,
  .first-buuton input {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── Manual setup ── */
  .mobile-info .all-details { grid-template-columns: 1fr !important; }
  .mobile-info .all-details input { width: 100% !important; text-align: center !important; }
  .mobile-info h3 { font-size: 15px !important; line-height: 1.4 !important; }

  /* ── FAQ page ── */
  #faqSearch { font-size: 16px !important; } /* prevents iOS zoom on input focus */

  /* ── Modals ── */
  .modal-dialog  { margin: 8px !important; }
  .modal-content { border-radius: 16px !important; }

  /* ── Chat ── */
  #chat-popup {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    bottom: 80px !important;
  }
  #chat-bubble { bottom: 16px !important; right: 16px !important; }

  /* ── Subscription extend form ── */
  .extend-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ≤ 400px  Very small phones
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .top-page h1   { font-size: 24px !important; }
  .sim_home img  { width: 100px !important; }
  .plans .plan .price .number { font-size: 38px !important; letter-spacing: -1.5px !important; }
  .four-g p { font-size: 15px !important; }
  .offcanvas { width: 92vw !important; }
  .hero-pill__text { font-size: 10px !important; }
  .popular-badge { font-size: 10px !important; padding: 3px 12px !important; }
}

/* ── Utility: screen-reader only (WCAG) ──────────────────────── */
.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;
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Override responsive.css conflicts ───────────────────────── */
/* responsive.css adds margin-top:50px to .plans and .plan — cancel it */
@media (max-width: 800px) {
  .plans        { margin-top: 0 !important; }
  .plans .plan  { margin-top: 0 !important; }
  /* .space div after mobile nav: cut the 100px bottom margin */
  .space        { margin-bottom: 0 !important; }
}

/* ── Ensure nothing ever breaks out of the viewport ─────────── */
html { overflow-x: hidden !important; }

/* ── Order page: manual setup grid responsive ─────────────────── */
@media (max-width: 800px) {
  .mobile-info .all-details {
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
  }
  .mobile-info .all-details label { grid-column: 1 / -1 !important; }
}
@media (max-width: 480px) {
  .mobile-info .all-details { grid-template-columns: 1fr !important; }
  .mobile-info h3 { font-size: 15px !important; line-height: 1.4 !important; }
}