:root{
      --brand:#1DA1F2;
      --brand-hover:#0d8fe0;
      --ink:#ffffff;
      --muted:#9aa4b2;
      --soft:#1f232a;
      --card:#262b33;
      --border:#2f3540;
    }

    body{ background:var(--soft); color:var(--ink); }
    .text-muted-2{ color:var(--muted)!important; }

    .sticky-top-blur{
      background: rgba(31,35,42,.9);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--border);
    }

    .hero{
      background:
        radial-gradient(900px 500px at 20% 10%, rgba(29,161,242,.18), transparent 60%),
        radial-gradient(700px 400px at 90% 10%, rgba(29,161,242,.10), transparent 55%),
        linear-gradient(180deg, #1f232a, #1b1f26);
      border-bottom:1px solid var(--border);
    }

    .btn-primary{ background:var(--brand); border-color:var(--brand); }
    .btn-primary:hover{ background:var(--brand-hover); border-color:var(--brand-hover); }

    .btn-outline-primary{ color:var(--brand); border-color:var(--brand); }
    .btn-outline-primary:hover{ background:var(--brand); color:#fff; }

    .btn-rounded{ border-radius:999px; }

    .cardx{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:16px;
    }

    .badge-soft{
      background: rgba(29,161,242,.12);
      color: var(--brand);
      border: 1px solid rgba(29,161,242,.22);
    }

    .small-note{ font-size:.92rem; }
    .section-pad{ padding: 56px 0; }

    .table{
      --bs-table-bg: transparent;
      --bs-table-color: var(--ink);
      --bs-table-border-color: var(--border);
    }
    .table thead th{
      background:#20242b;
      border-bottom:1px solid var(--border);
      color:#dbe4ee;
      white-space: nowrap;
    }
    .table td, .table th{ border-color: var(--border); }

    a{ color: var(--brand); }
    a:hover{ color: #7cc9ff; }

    /* RTL helpers */
    .rtl .ms-auto{ margin-left:0!important; margin-right:auto!important; }
    .rtl .text-start{ text-align:right!important; }
    .rtl .text-end{ text-align:left!important; }

    /* Best Value highlight */
    .best-value{
      outline: 2px solid rgba(29,161,242,.55);
      box-shadow: 0 0 0 6px rgba(29,161,242,.12);
      border-radius: 12px;
    }
    .best-value td{
      background: rgba(29,161,242,.08) !important;
    }

/* --- Extra helpers for homepage (added without changing pricing styles) --- */
.section-pad{padding:64px 0;}
.section-pad-sm{padding:40px 0;}
.text-muted-2{color:var(--muted)!important;}
.cardx{background:var(--card);border:1px solid var(--border);border-radius:16px;}
.cardx-hover{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.cardx-hover:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.25);border-color:rgba(29,161,242,.35);}
.btn-rounded{border-radius:999px;}
.icon-bubble{
  width:44px;height:44px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(29,161,242,.12);border:1px solid rgba(29,161,242,.22);color:var(--brand);
}
.hero{
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(29,161,242,.18), transparent 60%),
    radial-gradient(700px 400px at 90% 10%, rgba(29,161,242,.10), transparent 55%),
    linear-gradient(180deg,#1f232a,#1b1f26);
  border-bottom:1px solid var(--border);
}

/* --- Homepage enrichments --- */
.kpi{
  padding:18px 16px;border-radius:16px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
}
.kpi .num{font-size:1.35rem;font-weight:800;letter-spacing:.2px;}
.kpi .lbl{color:var(--muted);font-size:.95rem;}
.accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--ink);
  --bs-accordion-border-color: var(--border);
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-btn-bg: rgba(255,255,255,.02);
  --bs-accordion-active-bg: rgba(29,161,242,.10);
  --bs-accordion-active-color: var(--ink);
}
.accordion-button::after{filter: invert(1) opacity(.85);}
.callout{
  background: radial-gradient(700px 350px at 15% 10%, rgba(29,161,242,.18), transparent 60%),
              radial-gradient(600px 350px at 90% 20%, rgba(29,161,242,.10), transparent 55%),
              rgba(255,255,255,.02);
  border:1px solid rgba(29,161,242,.22);
}

/* Pills + steps for API/OTP pages */
.pill{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--ink);
  border-radius: 999px;
  padding: .55rem .85rem;
  font-size: .95rem;
}
.steps{
  margin:0;
  padding-left: 1.25rem;
  color: var(--muted);
}
.steps li{ margin-bottom: .5rem; }

/* Unified Navbar (Option A) */
.top-nav{
  position: sticky; top:0; z-index: 1030;
  background: rgba(12,16,22,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: .75rem 0;
}
.top-nav a{ color: var(--ink); text-decoration:none; opacity:.9; }
.top-nav a:hover{ opacity:1; }
/* Mobile (default) */
.top-nav .brand img {
  height: 35px;
  width: auto;
  display: block;
  transition: height 0.25s ease;
}

/* Tablet */
@media (min-width: 768px) {
  .top-nav .brand img {
    height: 55px;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .top-nav .brand img {
    height: 75px;
  }
}


.nav-drop{
  color: var(--ink) !important;
  text-decoration:none !important;
  padding: 0;
  opacity:.9;
}
.nav-drop:hover{ opacity:1; }
.lang-pill{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--ink);
  border-radius: 10px;
  padding: .35rem .6rem;
  font-size: .85rem;
  line-height: 1;
}
.lang-pill.is-active{
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(0,196,180,.15);
}
.site-footer a{ color: var(--ink); opacity:.85; text-decoration:none; }
.site-footer a:hover{ opacity:1; text-decoration: underline; }

/* RTL Enhancements */
body.rtl{direction:rtl;}
.rtl header .display-6,
.rtl header .lead,
.rtl header .badge{ text-align:right; }
.rtl header .d-flex.gap-2{ justify-content:flex-end; }
.rtl .cardx{ text-align:right; }
.rtl .kpi{ text-align:right; }
.rtl .kpi .num{ margin-left:10px; margin-right:0; }


/* Improve mobile horizontal spacing */
@media (max-width: 575.98px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 575.98px) {
  .hero {
    padding-left: 4px;
    padding-right: 4px;
  }

  .hero .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 575.98px) {
  .cardx {
    margin-left: 0;
    margin-right: 0;
    border-radius: 16px;
  }
}
@media (max-width: 575.98px) {
  .hero h1 {
    line-height: 1.25;
  }

  .hero p {
    line-height: 1.6;
  }
}