/* ================= TOKENS ================= */
:root{
  --brand:#5e8bff;
  --brand-secondary:#20e3b2;
  --bg:#0b1220;
  --surface:#121a2c;
  --border:#1e293b;
  --text:#eef2ff;
  --text-muted:#a2b1c6;
  --link:#8ab1ff;

  --radius-md:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 10px 25px rgba(0,0,0,.25);
  --nav-h:64px;
}
:root[data-bs-theme="light"]{
  --bg:#ffffff; --surface:#ffffff; --border:#e6e8ee;
  --text:#0b1220; --text-muted:#667085; --link:#5e8bff;
}
body.theme-dark{ color-scheme:dark; }

/* ================= BASE ================= */
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
}
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Skip-link hidden unless focused */
.skip-link{ position:absolute; transform:translateX(-9999px); }
.skip-link:focus{
  transform:none; position:fixed; left:1rem; top:.75rem; z-index:2000;
  padding:.6rem .9rem; background:rgba(94,139,255,.15);
  border-radius:10px; outline:2px solid var(--brand);
}

/* Global section spacing */
.section{ padding:56px 0; }
@media (min-width:992px){ .section{ padding:88px 0; } }

/* ================= NAVBAR ================= */
.navbar.nav-dark{
  min-height:var(--nav-h);
  background:rgba(13,22,38,.9);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.navbar-scrolled{ box-shadow:var(--shadow-sm); }
.navbar .navbar-brand{
  display:inline-flex; align-items:baseline; gap:.45rem; line-height:1;
  white-space:nowrap; text-decoration:none!important;
}
.logo-part-1{ color:var(--link); font-weight:800; letter-spacing:-.2px; }
.logo-part-2{
  font-weight:800; letter-spacing:-.2px;
  background:linear-gradient(90deg,var(--brand-secondary),#66ffd3);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.logo-accent{
  display:inline-block; width:.48em; height:.48em; border-radius:999px;
  background:radial-gradient(closest-side,#fff 0%,#c8fff0 45%,var(--brand-secondary) 46%,var(--brand-secondary) 100%);
  vertical-align:.08em; margin-left:.15em;
}

/* nav links */
.navbar .nav-link{
  color:var(--text-muted); font-weight:600;
  padding:.55rem .9rem; border-radius:10px;
}
.navbar .nav-link:hover{ background:rgba(138,177,255,.12); color:#fff; text-decoration:none; }
.navbar .nav-link.active{ background:rgba(138,177,255,.22); color:#fff; }

/* ================= HAMBURGER ================= */
.hamburger{
  width:42px; height:38px; border:1px solid var(--border); border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; background:transparent;
}
.hamburger:focus{ outline:2px solid var(--brand); }
.hamburger span{
  display:block; width:22px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--link),var(--brand-secondary));
  transition:transform .25s ease,opacity .2s ease,width .2s ease;
}
.hamburger span+span{ margin-top:5px; }
.hamburger:not(.collapsed) span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger:not(.collapsed) span:nth-child(2){ opacity:0; width:0%; }
.hamburger:not(.collapsed) span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:992px){ .navbar .navbar-toggler{ display:none !important; } }
@media (max-width:991.98px){
  .navbar .navbar-collapse{
    position:absolute; left:0; right:0; top:100%;
    background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:0 8px 24px rgba(0,0,0,.35); padding:.5rem;
  }
  .navbar .nav-link{ color:var(--text); padding:.9rem 1rem; border-radius:12px; }
}

/* ================= HERO ================= */
.hero{
  position:relative;
  background:
    radial-gradient(900px 560px at 15% -10%, rgba(32,227,178,.18), transparent 60%),
    radial-gradient(800px 560px at 85% -10%, rgba(94,139,255,.22), transparent 60%),
    linear-gradient(180deg, #0D1626 0%, #0D1626 100%); /* fallback */
  color:var(--text); text-align:center; padding:64px 0;
}
.hero--full{ min-height:calc(100vh - var(--nav-h)); display:flex; align-items:center; padding:0; }
.hero__title{ font-size:clamp(2rem, 3vw + 1rem, 3.25rem); font-weight:800; margin:0 0 1rem; }
.hero__lead{ max-width:980px; margin:0 auto 1.75rem; font-size:1.125rem; color:#e2e8ff; }
.hero__cta{ display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; }

/* ================= BUTTONS ================= */
.btn{ border-radius:12px; font-weight:700; letter-spacing:.2px; }
.btn-lg{ padding:.95rem 1.4rem; }
.btn-accent{
  background:linear-gradient(90deg,var(--brand-secondary),#66ffd3);
  color:#05251a; border:0; box-shadow:0 8px 20px rgba(32,227,178,.24);
}
.btn-accent:hover{ filter:brightness(.95); color:#05251a; }
.btn-outline-plan{
  background:transparent; color:#bcd4ff; border:1px solid rgba(138,177,255,.35);
}
.btn-outline-plan:hover{ background:rgba(138,177,255,.12); color:#fff; }

/* ================= SECTION HEAD ================= */
.section-head{ margin-bottom:2rem; text-align:center; }
.section-head .kicker{
  display:inline-block; font-weight:700; font-size:.9rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:.5rem;
}
.section-head h2{ font-size:clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); margin:.25rem 0 .5rem; }
.section-head p{ color:var(--text-muted); max-width:880px; margin:0 auto; }

/* ================= SURFACE / CARDS ================= */
.surface{
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow-sm);
}
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow-sm);
}

/* Ticks list */
.list-ticks{ list-style:none; padding-left:0; margin:0; }
.list-ticks li{ position:relative; padding-left:1.65rem; margin:.4rem 0; }
.list-ticks li::before{
  content:"\F26A"; /* bi-check2-circle */ font-family:"bootstrap-icons";
  position:absolute; left:0; top:.02rem; font-size:1rem; color:#7fdcc7;
}
/* ================= CAROUSEL & MEDIA ================= */
.rev-img-wrap{ overflow:hidden; border-radius:12px; border:1px solid var(--border); }
.rev-img{ width:100%; height:auto; display:block; }

/* ================= DIVIDERS ================= */
.divider{
  border:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  margin:0;
}

/* ================= UTILITIES ================= */
.text-muted{ color:var(--text-muted)!important; }
.seo-muted{ color:var(--text-muted); }

/* ================= MOBILE FIRST REFINEMENTS ================= */
@media (max-width:575.98px){
  /* tighter hero text & padding already handled by 100vh */
  .hero__title{ font-size:2rem; }
  .hero__lead{ font-size:1rem; padding:0 .25rem; }

  /* Make plan buttons full-width on phones */
  .btn, .btn-lg{ width:100%; }

  /* Badge: move above the card content and center it (no overlap) */
  .plan-card .badge{
    position:static; display:inline-block; margin:0 auto .6rem; 
  }
  .plan-card__header{ padding-top:0; } /* no space needed for absolute badge */
  .plan-card{ padding:1.1rem 1rem; border-radius:16px; }
  .plan-card__price .amount{ font-size:2rem; }
  .plan-card__title{ font-size:1.15rem; }

  /* Slightly larger feature tap targets */
  .plan-card__features li{ font-size:1rem; padding:.35rem 0; }
}

/* Medium screens – keep badge left but add top padding so it never clashes */
@media (min-width:576px) and (max-width:991.98px){
  .plan-card{ padding-top:1.8rem; }
}



/* ================= SHOP PAGE ================= */

/* --- Utilities used in this page --- */
.fw-900{font-weight:900!important;}
.fw-1000{font-weight:900!important;} /* browsers cap at 900 */
.accent{color:var(--brand-secondary);}
.list-ticks{list-style:none; padding:0; margin:0;}
.list-ticks li{
  position:relative; padding-left:1.75rem; margin:.6rem 0;
  color:var(--text); opacity:.9;
}
.list-ticks li::before{
  content:""; position:absolute; left:0; top:.25rem;
  width:1.05rem; height:1.05rem; border-radius:999px;
  background: radial-gradient(closest-side, #0b221a 40%, #1ce0b1 41% 60%, #1ce0b1 61% 100%);
  box-shadow:0 0 0 2px rgba(32,227,178,.20);
}

/* --- Section rhythm for the whole shop page --- */
.shop-hero,
.shop-trust,
.shop-grid,
.shop-info,
.shop-faq{ padding: 64px 0; }
@media (max-width: 575.98px){
  .shop-hero,
  .shop-trust,
  .shop-grid,
  .shop-info,
  .shop-faq{ padding: 44px 0; }
}

/* ================= HERO ================= */
.shop-hero{
  position:relative;
  background:
    radial-gradient(900px 560px at 15% -10%, rgba(32,227,178,.18), transparent 60%),
    radial-gradient(800px 560px at 85% -10%, rgba(94,139,255,.22), transparent 60%),
    linear-gradient(180deg, #0D1626 0%, #0D1626 100%); /* fallback */
  color:var(--text);
  text-align:center;
}
.shop-hero .kicker{
  letter-spacing:.12em;
  color:var(--text-muted);
}
.shop-hero h1{
  font-size:clamp(1.9rem, 3.2vw + 1rem, 3rem);
  font-weight:900;
  margin:0 0 .4rem;
}
.shop-hero .lead{
  max-width:860px; margin:0 auto; color:#cfe4ff;
}

/* ================= TRUST STRIP ================= */
.shop-trust .trust-pill{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; width:100%;
  padding:.65rem .9rem; border-radius:999px;
  color:var(--text);
  background:linear-gradient(180deg, rgba(138,177,255,.06), rgba(138,177,255,.03));
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* ================= PLANS GRID ================= */
.shop-grid .section-head .kicker{ color:var(--text-muted); text-transform:uppercase; letter-spacing:.12em; }
.shop-grid .section-head h2{ margin:.25rem 0 .25rem; }
.shop-grid .section-head p{ color:var(--text-muted); }

/* Card shell */
.price-card{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--border);
  border-radius:16px;
  background:
    radial-gradient(700px 420px at -10% -20%, rgba(32,227,178,.10), transparent 60%),
    radial-gradient(700px 420px at 110% -20%, rgba(94,139,255,.12), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #000 8%), var(--surface));
  box-shadow:
    0 10px 25px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
}
.price-card .price-head{
  padding:18px 18px 0;
  text-align:center;
}
.price-card .price-head .accent{
  display:inline-block;
  font-size:1.02rem;
  letter-spacing:.2px;
}

/* Inner card (to get nice padding + fill height) */
.price-card .card{
  background:transparent;
  border-radius:0 0 16px 16px;
}
.price-card .card-body{ padding:18px; }

/* Price block */
.price-card .price .amount{
  font-size:clamp(2rem, 3vw + 1rem, 2.75rem);
  font-weight:900; color:#8ab1ff;
  letter-spacing:.5px;
}
.price-card .price .meta{
  color:var(--text-muted); font-size:.98rem;
}

/* Gift badge */
.badge-accent{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .7rem; border-radius:999px;
  background: linear-gradient(90deg, rgba(32,227,178,.18), rgba(94,139,255,.18));
  color:var(--text);
  border:1px solid color-mix(in srgb, var(--brand-secondary) 40%, var(--link) 60%);
  font-size:.85rem; font-weight:700;
}

/* CTA buttons */
.btn-cta-accent, .btn-cta-outline{
  --btn-h: 50px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem; height:var(--btn-h); padding:0 1rem;
  border-radius:12px; font-weight:800; letter-spacing:.2px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn-cta-accent{
  color:#041315;
  background:linear-gradient(135deg, var(--brand-secondary), #6ef5d9);
  border:1px solid color-mix(in srgb, var(--brand-secondary) 65%, #fff 35%);
  box-shadow:0 10px 20px rgba(32,227,178,.22);
}
.btn-cta-accent:hover{ transform:translateY(-1px); box-shadow:0 14px 26px rgba(32,227,178,.28); text-decoration:none; }
.btn-cta-outline{
  color:var(--text);
  background:linear-gradient(180deg, rgba(138,177,255,.08), rgba(138,177,255,.04));
  border:1px solid color-mix(in srgb, var(--link) 50%, var(--border) 50%);
}
.btn-cta-outline:hover{
  background:linear-gradient(180deg, rgba(138,177,255,.12), rgba(138,177,255,.06));
  transform:translateY(-1px);
  text-decoration:none;
}
.price-cta .cta-note{
  margin-top:.6rem; font-size:.9rem; color:var(--text-muted); text-align:center;
}

/* Popular state */
.price-card.popular{
  border-color: color-mix(in srgb, var(--link) 60%, var(--border) 40%);
  box-shadow:
    0 14px 36px rgba(138,177,255,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* Ribbon (desktop default) */
.price-card .ribbon{
  position:absolute;
  top:14px; left:-8px;
  background: linear-gradient(90deg, var(--link), color-mix(in srgb, var(--brand-secondary) 60%, var(--link) 40%));
  color:#06121a; font-weight:900; font-size:.8rem;
  padding:.35rem .7rem .35rem 1.05rem;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  white-space:nowrap;
}

/* Mobile ribbon: center above card */
@media (max-width: 575.98px){
  .price-card{ padding-top:26px; }
  .price-card .ribbon{
    top:-12px; left:50%; transform:translateX(-50%);
    padding:.32rem .7rem; font-size:.78rem; border-radius:999px; white-space:nowrap;
  }
  .price-head{ padding-top: 1.1rem; }
  .btn-cta-accent, .btn-cta-outline{ --btn-h: 52px; }
}

/* Make columns equal height and spacing nice */
.shop-grid .row > [class*="col-"]{ display:flex; }
.shop-grid .price-card{ width:100%; }

/* ================= INFO STRIPE ================= */
.shop-info .shop-note{
  background:linear-gradient(180deg, rgba(138,177,255,.10), rgba(138,177,255,.05));
  border:1px dashed color-mix(in srgb, var(--link) 45%, var(--border) 55%);
  border-radius:12px;
  padding:1rem 1.1rem;
  color:#cfe4ff;
}

/* ================= FAQ ================= */
.shop-accordion .accordion-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.shop-accordion .accordion-item + .accordion-item{ margin-top:12px; }
.shop-accordion .accordion-button{
  background:linear-gradient(180deg, rgba(138,177,255,.05), rgba(138,177,255,.03));
  color:var(--text); font-weight:700;
}
.shop-accordion .accordion-button:not(.collapsed){
  color:#cfe4ff;
  box-shadow: inset 0 -1px 0 var(--border);
}
.shop-accordion .accordion-body{ color:#d7e6ff; }

/* ================= MISC ================= */
.section-head{ margin-bottom:28px; }
.section-head .kicker{ font-weight:800; font-size:.9rem; }
.section-head p{ color:var(--text-muted); }

.surface{
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 8px 22px rgba(0,0,0,.28);
}



@media (max-width: 575.98px){
  .price-card{
    /* give room for the ribbon and allow it to float above the card */
    padding-top: 44px;
    overflow: visible;               /* so the badge isn't clipped by the card */
  }
  .price-card .ribbon{
    top: 10px;                        /* inside the padding area */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;                       /* above inner borders/shadows */
    padding: .36rem .8rem;
    font-size: .8rem;
    border: 1px solid rgba(255,255,255,.12); /* subtle edge so it separates from the card */
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(0,0,0,.28);
    white-space: nowrap;
  }
  /* tighten the header padding now that the ribbon has its own space */
  .price-card .price-head{ padding-top: .25rem; }
}






/* =========================================================
   CHECKOUT — FULL CSS (Mobile-tuned intl-tel-input dropdown)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#0B1220;
  --surface:#121a2c;
  --surface-2:#0F172A;
  --surface-3:#0c1426;
  --border:#213047;
  --text:#EAF1FF;
  --text-muted:#9fb0c9;
  --accent:#5e8bff;
  --accent-2:#20e3b2;
  --danger:#ff6b6b;

  --radius-md:12px;
  --radius-lg:16px;
  --shadow-lg:0 18px 48px rgba(0,0,0,.45);
  --shadow-sm:0 2px 10px rgba(0,0,0,.25);
}

/* ---------- Page wrapper ---------- */
.checkout{ color:var(--text); background:var(--bg); }

/* ---------- HERO (requested colors) ---------- */
.checkout-hero{
  position:relative;
  background:
    radial-gradient(900px 560px at 15% -10%, rgba(32,227,178,.18), transparent 60%),
    radial-gradient(800px 560px at 85% -10%, rgba(94,139,255,.22), transparent 60%),
    linear-gradient(180deg, #0D1626 0%, #0D1626 100%);
  text-align:center; color:var(--text); padding:64px 0;
}
.checkout-hero .kicker{ letter-spacing:.12em; color:var(--text-muted); }
.checkout-hero h1{ font-weight:1000; letter-spacing:.2px; margin:0 0 .4rem; }
.checkout-hero .lead{ color:#cad6f3; margin:0; }

/* ---------- Surfaces & dividers ---------- */
.surface{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.surface-2{ background:var(--surface-2); border:1px solid var(--border); }
.surface-3{ background:var(--surface-3); border:1px solid var(--border); }
.divider{ border:0; height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); margin:1.5rem 0; }

/* =========================================================
   1) ORDER STEPS SLIDER — mobile friendly
   ========================================================= */
.checkout-flow{
  display:flex; gap:.6rem; margin:0 0 1rem; padding:0 .75rem;
  list-style:none; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scrollbar-width:none; position:relative;
  mask-image:linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.checkout-flow::-webkit-scrollbar{ display:none; }
.checkout-flow li{
  flex:0 0 auto; scroll-snap-align:start; white-space:nowrap;
  display:flex; align-items:center; gap:.5rem;
  padding:.54rem .9rem; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-muted); font-weight:800;
  transition:background .2s, color .2s, border-color .2s, transform .1s;
}
.checkout-flow li:active{ transform:scale(.98); }
.checkout-flow li.active{
  color:#eaf1ff; border-color:#2b4dff;
  background:linear-gradient(135deg, rgba(32,227,178,.16), rgba(94,139,255,.22));
}
@media (max-width:420px){
  .checkout-flow{ gap:.45rem; padding:0 .5rem; }
  .checkout-flow li{ padding:.46rem .68rem; font-size:.92rem; }
}
@media (max-width:360px){
  .checkout-flow li{ padding:.42rem .62rem; font-size:.88rem; }
}
.checkout-flow::before,
.checkout-flow::after{
  content:""; position:absolute; top:0; bottom:0; width:20px; pointer-events:none;
}
.checkout-flow::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.checkout-flow::after { right:0; background:linear-gradient(270deg, var(--bg), transparent); }

/* =========================================================
   2) FORM CONTROLS (simple, no placeholder icons)
   ========================================================= */
.form-control, textarea.form-control{
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:14px;
  padding:14px 16px;
  line-height:1.45;
}
.form-control:focus, textarea.form-control:focus{
  outline:none; border-color:#2b4dff; box-shadow:0 0 0 3px rgba(94,139,255,.18);
}
.form-control::placeholder{ color:#6e85a6; opacity:1; }
.form-hint, .tiny-muted{ color:var(--text-muted); font-size:.86rem; }

/* Floating labels (when using placeholder=" ") */
.float-group{ position:relative; }
.float-group label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#9bb1d3; pointer-events:none; transition:all .15s ease;
  background:transparent; padding:0 4px;
}
.float-group .form-control.has-float:placeholder-shown + label{ top:50%; font-size:1rem; opacity:.85; }
.float-group .form-control.has-float:not(:placeholder-shown) + label,
.float-group .form-control.has-float:focus + label{
  top:0; transform:translateY(-50%) scale(.88); font-weight:700; color:#cfe0ff;
  background:var(--surface-2);
}
/* No placeholder icons */
.float-group .float-icon{ display:none !important; }

/* Validation */
.is-invalid, .form-control.is-invalid{ border-color:var(--danger); }
.invalid-feedback{ color:#ffc9c9; }

/* =========================================================
   3) INTL-TEL-INPUT — DARK + MOBILE-CLAMPED DROPDOWN
   ========================================================= */
.iti{ width:100%; }
.iti input[type="tel"].form-control{ padding-left:3.25rem; } /* room for flag */
.iti--separate-dial-code .iti__selected-dial-code{ color:#cfe0ff; }

/* Container that is appended to body: keep it on top */
.iti--container{ z-index:99999 !important; background:transparent !important; }

/* Dropdown frame & width clamping */
.iti__dropdown-content{
  background:var(--surface-3) !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  box-shadow:var(--shadow-lg) !important;
  overflow:hidden;
  width:auto !important;            /* allow clamping below */
  max-width:min(420px, 94vw) !important;
}

/* Inner panes all match the clamped width */
.iti__country-container,
.iti__country-list{
  background:var(--surface-3) !important;
  border:none !important;
  color:var(--text) !important;
  width:100% !important;
  max-width:min(420px, 94vw) !important;
}

/* Country rows */
.iti__country{ color:var(--text) !important; }
.iti__country:hover,
.iti__country.iti__highlight{ background:rgba(94,139,255,.18) !important; }
.iti__country-name{ color:#e9f1ff !important; }
.iti__dial-code{ color:#a8c2ff !important; }
.iti__divider{ border-color:var(--border) !important; }

/* Search box in dropdown */
.iti__search-input{
  background:var(--surface-2) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  border-radius:10px !important;
  margin:.5rem .6rem .4rem !important;
}
.iti__search-input::placeholder{ color:#9fb0c9 !important; }

/* Mobile-specific tweaks: padding & sizing */
@media (max-width:576px){
  .iti__dropdown-content{ border-radius:14px !important; }
  .iti__country{ padding:10px 12px !important; }
  .iti__country-name{ font-size:.98rem !important; }
  .iti__dial-code{ font-size:.95rem !important; }
  .iti__country-list{
    max-height:min(60vh, 420px) !important;
    overscroll-behavior:contain; /* prevent body scroll while open */
  }
}

/* =========================================================
   4) CTA BUTTONS (with sticky mobile CTA)
   ========================================================= */
.btn-cta-accent{
  --g1:#20e3b2; --g2:#19c3f8;
  background:linear-gradient(135deg, var(--g1), var(--g2));
  color:#032023; font-weight:900;
  border:none; border-radius:14px; padding:14px 18px;
  box-shadow:0 14px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
  transition:transform .08s ease, filter .15s ease;
}
.btn-cta-accent:hover{ filter:brightness(1.05); text-decoration:none; }
.btn-cta-accent:active{ transform:translateY(1px); }

.btn-cta-outline{
  background:transparent; color:#cfe0ff; font-weight:800;
  border:1px solid #4262ff; border-radius:12px; padding:12px 16px;
}

/* Sticky CTA on small screens */
@media (max-width:540px){
  .checkout form.surface{ padding-bottom:120px; }
  .checkout form .btn-cta-accent{
    position:sticky; bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index:10; width:calc(100% - 16px); margin-inline:auto;
  }
  .checkout form .tiny-muted{ text-align:center; }
}

/* =========================================================
   5) ORDER SUMMARY
   ========================================================= */
aside .h5.text-accent{ color:#bcd1ff !important; }
.selected-plan{ border-radius:12px; background:rgba(94,139,255,.08); border:1px dashed #4463ff; }
.selected-plan .tiny-muted{ color:#95a8c7; }

.badge.bg-success-subtle{ background:rgba(32,227,178,.12) !important; color:#89ffe1 !important; }
.badge.bg-info-subtle{ background:rgba(94,139,255,.14) !important; color:#cfe0ff !important; }
.badge.bg-secondary-subtle{ background:rgba(148,163,184,.16) !important; color:#e5ecff !important; }

/* =========================================================
   6) ERROR SUMMARY
   ========================================================= */
.error-summary{
  background:rgba(255,107,107,.1);
  border:1px solid rgba(255,107,107,.45);
  color:#ffd9d9; border-radius:14px; padding:14px 16px;
}
.error-summary .error-title{ font-weight:900; margin-bottom:.25rem; }
.error-summary .error-list{ margin:0; padding-left:1rem; }

/* =========================================================
   7) UTILITIES
   ========================================================= */
.text-accent{ color:#96b5ff; }
.fw-900{ font-weight:900; }
.fw-1000{ font-weight:1000; }
.small{ font-size:.92rem; }
.tiny-muted{ font-size:.84rem; color:var(--text-muted); }

/* Nice width on large screens */
@media (min-width:1200px){
  .checkout .container{ max-width:1120px; }
}


/* Option A — targets the 3 feature cards in that section */
.section .card.h-100.text-center{
  padding-top: 16px;            /* space ABOVE the title inside the card */
}

/* (nice to have) keep a small gap below the title too */
.section .card.h-100.text-center .price-head{
  margin-bottom: 10px;
}

/* ===== Channel Categories (cards) ===== */
.cat-card{
  padding: 16px 14px;
  border-radius: var(--radius-lg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column; justify-content:flex-start;
  min-height: 148px; /* keeps rows even on mobile */
}
.cat-card:focus-within,
.cat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  border-color: rgba(138,177,255,.35);
}

.cat-icon{ font-size: 1.35rem; }
.cat-title{ letter-spacing:.1px; }
.cat-desc{ line-height: 1.35; }

/* tighten grid spacing on very small screens */
@media (max-width: 399.98px){
  .section .row.g-3.g-md-4{ --bs-gutter-x:.5rem; --bs-gutter-y:.5rem; }
  .cat-card{ padding: 14px 12px; min-height: 140px; }
}

/* add a bit more air on desktop for polish */
@media (min-width: 992px){
  .cat-card{ padding: 18px 16px; min-height: 160px; }
  .cat-icon{ font-size: 1.5rem; }
}

/* optional: make the icon bubble a touch brighter in dark theme */
body.theme-dark .cat-icon{
  background: rgba(138,177,255,.08);
  border-radius: 999px;
  padding: 10px;
}
/* ===== VOD / Movies & Series ===== */
.vod-card{
  padding: 16px 14px;
  border-radius: var(--radius-lg);
  display:flex; flex-direction:column; justify-content:flex-start;
  min-height: 140px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vod-card:hover,
.vod-card:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  border-color: rgba(138,177,255,.35);
}

.vod-icon{ font-size: 1.35rem; }
@media (max-width: 399.98px){
  .vod-card{ padding: 14px 12px; min-height: 132px; }
}
@media (min-width: 992px){
  .vod-card{ padding: 18px 16px; min-height: 150px; }
  .vod-icon{ font-size: 1.5rem; }
}

/* subtle glow for icons in dark theme */
body.theme-dark .vod-icon{
  background: rgba(138,177,255,.08);
  border-radius: 999px;
  padding: 10px;
}
/* ===== Customisation cards ===== */
.custom-card{
  padding: 18px 16px;
  border-radius: var(--radius-lg);
  display:flex; flex-direction:column; justify-content:flex-start;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 140px;
}
.custom-card:hover,
.custom-card:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  border-color: rgba(138,177,255,.35);
}

.custom-icon{ font-size: 1.35rem; }
@media (max-width: 399.98px){
  .custom-card{ padding: 16px 14px; min-height: 132px; }
}
@media (min-width: 992px){
  .custom-card{ padding: 20px 18px; min-height: 150px; }
  .custom-icon{ font-size: 1.5rem; }
}

/* gentle glow for icons on dark theme */
body.theme-dark .custom-icon{
  background: rgba(138,177,255,.08);
  border-radius: 999px;
  padding: 10px;
}
/* ===== Worldwide / Regions ===== */
.region-grid{
  --gap: 10px;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 576px){
  .region-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 992px){
  .region-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.region-pill{
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  cursor: default;
}
.region-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(138,177,255,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.region-dot{
  width: .55rem; height: .55rem; border-radius: 999px; flex: 0 0 auto;
  background: radial-gradient(closest-side,#b3e9ff 0%, #8ab1ff 50%, #5e8bff 100%);
  box-shadow: 0 0 0 4px rgba(138,177,255,.12);
}
.region-label{
  font-weight: 600;
  color: var(--text);
  letter-spacing: .1px;
}

/* small supporting text */
.tiny-muted{
  font-size: .78rem;
  color: var(--text-muted);
}
/* ===== Promo Block (Text + Image) ===== */
.promo-block { padding: 56px 0; }
.promo-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}

.promo-media{
  background: linear-gradient(180deg, rgba(94,139,255,.12), rgba(32,227,178,.10));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(10px, 1.8vw, 16px);
}
.promo-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius-lg) - 6px);
  box-shadow: var(--shadow-sm);
}

.promo-copy .kicker{ 
  font-size: .875rem; 
  text-transform: uppercase; 
  letter-spacing: .04em; 
  color: var(--text-muted); 
  margin-bottom: .4rem; 
  font-weight: 700;
}
.promo-title{
  margin: 0 0 .6rem;
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
}
.promo-lead{
  color: var(--text-muted);
  font-size: clamp(1rem, .96rem + .4vw, 1.125rem);
  margin: 0 0 1rem;
  line-height: 1.6;
}

.promo-list{
  margin: 0 0 1.25rem;
}
.promo-list li{
  color: var(--text-muted);
  margin-bottom: .4rem;
}

.promo-cta .btn{
  min-width: 240px;
}

/* Accent helper (already used across site) */
.promo-title .accent{
  background: linear-gradient(90deg, var(--brand), var(--brand-secondary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .promo-grid{
    grid-template-columns: 1fr;
  }
  .promo-media{ order: -1; }           /* image first on tablet/mobile */
  .promo-cta .btn{ width: 100%; }      /* full-width CTA on mobile */
}

@media (max-width: 575.98px){
  .promo-block{ padding: 40px 0; }
  .promo-media{ padding: 10px; }
}





/* ===== Footer (responsive, mobile-first) ===== */
.site-footer{
  --footer-bg:#0D1626;
  --footer-surface:#101a2b;
  --footer-border:#1b2a41;
  --text:#e6eeff;
  --muted:#a9b7d9;
  --link:#7db7ff;
  --link-hover:#20e3b2;
  --input-bg:#121c2e;
  --input-border:#2a3b59;
  --input-focus:#20e3b2;
  background:var(--footer-bg);
  color:var(--text);
  border-top:1px solid var(--footer-border);
  padding:40px 0 28px;
  font-size:14px;
}

.site-footer .container{max-width:1180px}

/* Top grid */
.footer-top{
  display:grid;
  gap:20px;
  grid-template-columns:1fr;            /* mobile: 1 col */
}
@media (min-width:620px){
  .footer-top{ grid-template-columns:1fr 1fr; } /* tablet: 2 cols */
}
@media (min-width:992px){
  .footer-top{ grid-template-columns:1.2fr .8fr .8fr 1fr; } /* desktop: 4 cols */
}

.footer-col{background:var(--footer-surface); border:1px solid var(--footer-border);
  border-radius:14px; padding:18px 18px;}
@media (min-width:992px){ .footer-col{ padding:20px; } }

.footer-title{
  margin:0 0 10px; font-weight:700; letter-spacing:.2px; color:#fff; font-size:16px;
}
.footer-brand .footer-title{ font-size:18px; }

.footer-desc, .footer-note{ color:var(--muted); margin:0 0 10px; line-height:1.6; }

/* Links */
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer-link{ color:var(--link); text-decoration:none; }
.footer-link:hover{ color:var(--link-hover); text-decoration:underline; }

/* Newsletter form */
.footer-form{ display:flex; gap:8px; align-items:center; }
.footer-form input{
  flex:1 1 auto; min-width:0;
  height:44px; padding:0 12px; border-radius:10px;
  background:var(--input-bg); color:var(--text);
  border:1px solid var(--input-border);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.footer-form input::placeholder{ color:#7b86a6; }
.footer-form input:focus{
  border-color:var(--input-focus);
  box-shadow:0 0 0 3px rgba(32,227,178,.15);
}
.footer-form .btn-accent{
  height:44px; padding:0 16px; border:0; cursor:pointer; border-radius:10px;
  font-weight:700; color:#0b1220;
  background:linear-gradient(90deg,#20e3b2,#5e8bff);
  box-shadow:0 8px 26px rgba(33,200,255,.18);
}
.footer-form .btn-accent:hover{ filter:brightness(1.05); }

/* Stack input/button on small phones */
@media (max-width:420px){
  .footer-form{ flex-direction:column; align-items:stretch; }
  .footer-form .btn-accent{ width:100%; }
}

/* Bottom strip */
.footer-bottom{
  display:flex; justify-content:center; align-items:center; text-align:center;
  padding-top:22px; margin-top:22px; border-top:1px dashed var(--footer-border);
}
.footer-bottom small{ color:var(--muted); }

/* Utility: visually hidden (for label) */
.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;
}








/* ===== FAQ page ===== */
.faq-hero{
  background:
    radial-gradient(900px 560px at 15% -10%, rgba(32,227,178,.18), transparent 60%),
    radial-gradient(800px 560px at 85% -10%, rgba(94,139,255,.22), transparent 60%),
    linear-gradient(180deg,#0D1626 0%,#0D1626 100%);
  color:var(--text); text-align:center; padding:64px 0;
}
.faq-links{ padding:24px 0; }
.faq-pill{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  width:100%; padding:.7rem .9rem; border-radius:999px;
  color:var(--text); background:linear-gradient(180deg, rgba(138,177,255,.08), rgba(138,177,255,.04));
  border:1px solid var(--border); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  text-decoration:none;
}
.faq-pill:hover{ text-decoration:none; background:rgba(138,177,255,.12); }

.faq-main{ padding:56px 0; }
.faq-sub{ padding:56px 0; }

/* reuse your shop accordion look */
.shop-accordion .accordion-item{ background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.shop-accordion .accordion-item + .accordion-item{ margin-top:12px; }
.shop-accordion .accordion-button{
  background:linear-gradient(180deg, rgba(138,177,255,.05), rgba(138,177,255,.03));
  color:var(--text); font-weight:700;
}
.shop-accordion .accordion-button:not(.collapsed){ color:#cfe4ff; box-shadow: inset 0 -1px 0 var(--border); }
.shop-accordion .accordion-body{ color:#d7e6ff; }


/* ===== Footer polish / consistency across pages ===== */
.site-footer{
  background: var(--bg);                 /* match page background */
  border-top: 1px solid var(--border);
  padding: 48px 0 30px;
}

.site-footer .container{ max-width: 1180px; }

.footer-top{
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;           /* mobile */
}
@media (min-width: 620px){
  .footer-top{ grid-template-columns: 1fr 1fr; }     /* tablet */
}
@media (min-width: 992px){
  .footer-top{ grid-template-columns: 1.2fr .8fr .8fr 1fr; } /* desktop */
}

.footer-col{
  background: var(--surface);            /* same card surface as site */
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  height: 100%;
}

.footer-title{ color: var(--text); }

.footer-desc, .footer-note{ color: var(--text-muted); }

/* Links */
.footer-link{ color: var(--link); text-decoration: none; }
.footer-link:hover{ color: var(--brand-secondary); text-decoration: underline; }

/* Newsletter form: stretch nicely and stack on small phones */
.footer-form{ display:flex; gap: 8px; align-items:center; }
.footer-form input{
  flex: 1 1 auto; min-width: 0;
  height: 44px; padding: 0 12px; border-radius: 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
}
.footer-form input:focus{
  border-color: #2b4dff;
  box-shadow: 0 0 0 3px rgba(94,139,255,.18);
}
.footer-form .btn-accent{ height: 44px; padding: 0 16px; border-radius: 10px; }

@media (max-width: 420px){
  .footer-form{ flex-direction: column; align-items: stretch; }
  .footer-form .btn-accent{ width: 100%; }
}

/* Bottom line harmony */
.footer-bottom{
  border-top: 1px dashed var(--border);
  padding-top: 22px; margin-top: 22px;
  display:flex; justify-content:center; text-align:center;
}
.footer-bottom small{ color: var(--text-muted); }




/* ===== Sticky footer foundation (works site-wide, harmless elsewhere) ===== */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The main content area should take the free space */
.page-main { flex: 1 0 auto; }

/* Footer sits after main; this keeps it at the bottom on short pages */
.site-footer { margin-top: auto; }

/* Optional: a little breathing room above the footer on simple pages */
.page-main + .site-footer { margin-top: 24px; }

/* Payments section visuals (keeps your existing look) */
.faq-sub{
  padding: 56px 0;
  background:
    radial-gradient(900px 560px at 15% -10%, rgba(32,227,178,.18), transparent 60%),
    radial-gradient(800px 560px at 85% -10%, rgba(94,139,255,.22), transparent 60%),
    linear-gradient(180deg, #0D1626 0%, #0D1626 100%);
  color: var(--text);
}
@media (max-width: 575.98px){
  .faq-sub{ padding: 42px 0; }
}
.faq-sub .surface{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.28);
}





/* --- Fixed header (removed from flow) --- */
.navbar.nav-dark{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
}

/* Push page content below fixed header */
body{ padding-top: var(--nav-h); }

/* Mobile menu still anchors to the navbar’s bottom edge */
@media (max-width:991.98px){
  .navbar .navbar-collapse{
    position: fixed;                /* keep it attached to the bar */
    top: var(--nav-h);
    left: 0; right: 0;
    max-height: calc(100dvh - var(--nav-h));
    overflow:auto;
    z-index: 1040;
  }
}

/* Stronger shadow when scrolled (optional) */
.navbar-scrolled{ box-shadow: 0 6px 18px rgba(0,0,0,.25); }

/* Element that has ALL four classes */
.tiny-muted.mt-3.mb-0.text-center {
  color: #0B1220;
}
/* ===== Legal pages ===== */
.legal-hero{
  background:
    radial-gradient(900px 560px at 15% -10%, rgba(32,227,178,.18), transparent 60%),
    radial-gradient(800px 560px at 85% -10%, rgba(94,139,255,.22), transparent 60%),
    linear-gradient(180deg,#0D1626 0%,#0D1626 100%);
  color:var(--text);
  text-align:center;
  padding:56px 0;
  border-bottom:1px solid var(--border);
}
.legal-title{
  margin:0 0 .4rem;
  font-weight:1000;
  letter-spacing:.2px;
  font-size:clamp(1.8rem, 1.2rem + 2.2vw, 2.4rem);
}
.legal-lead{
  margin:0 auto;
  max-width:900px;
  color:#cfe0ff;
}

/* Card-like article shell (reuses your surface look) */
.legal-doc{
  padding:clamp(18px, 2.4vw, 26px);
  line-height:1.75;
}
.legal-doc h2{ margin: 0 0 .35rem; }
.legal-doc p{ color:var(--text); opacity:.95; }

/* Numbered steps with nice spacing */
.dmca-steps{
  counter-reset: dmca;
  list-style:none; margin: .6rem 0 1rem; padding-left:0;
}
.dmca-steps > li{
  counter-increment: dmca;
  position:relative;
  padding-left:2.2rem;
  margin:.5rem 0;
  color:var(--text);
}
.dmca-steps > li::before{
  content: counter(dmca);
  position:absolute; left:0; top:.1rem;
  width:1.6rem; height:1.6rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900;
  background: linear-gradient(135deg, var(--brand-secondary), var(--link));
  color:#041315;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}

/* Notice panel for agent details */
.notice-box{
  background:linear-gradient(180deg, rgba(138,177,255,.08), rgba(138,177,255,.04));
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  margin:.8rem 0 1rem;
}
.notice-line + .notice-line{ margin-top:.25rem; }

/* Legal meta + disclaimer */
.legal-meta{ margin-top:1rem; }
.legal-disclaimer{
  margin-top:12px;
  padding:12px 14px;
  border:1px dashed color-mix(in srgb, var(--link) 45%, var(--border) 55%);
  border-radius:12px;
  color:#cfe0ff;
  background:linear-gradient(180deg, rgba(138,177,255,.06), rgba(138,177,255,.03));
}

/* Responsive tweaks */
@media (max-width:575.98px){
  .legal-hero{ padding:42px 0; }
  .legal-doc{ padding:16px; }
}


/* ===== 404 page ===== */
.error-hero{
  background:
    radial-gradient(900px 560px at 15% -10%, rgba(32,227,178,.18), transparent 60%),
    radial-gradient(800px 560px at 85% -10%, rgba(94,139,255,.22), transparent 60%),
    linear-gradient(180deg, #0D1626 0%, #0D1626 100%);
  color: var(--text);
  text-align: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}
.error-code{
  font-weight: 1000;
  font-size: clamp(3rem, 6vw + 1rem, 6rem);
  letter-spacing: 2px;
  line-height: 1;
  background: linear-gradient(90deg, var(--brand), var(--brand-secondary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: .25rem;
}
.error-title{
  font-weight: 900;
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem);
  margin: 0 0 .35rem;
}
.error-lead{
  color: #cfe0ff;
  max-width: 760px;
  margin: 0 auto 1.25rem;
}
.error-actions{
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem;
}
.error-search{
  display: flex; gap: .6rem; justify-content: center; align-items: center; margin: .4rem 0 1.1rem;
}
.error-search .form-control{
  width: min(560px, 92vw);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.error-links{
  display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap;
  margin-top: .25rem;
}
@media (max-width: 480px){
  .error-search{ flex-direction: column; align-items: stretch; }
  .error-search .btn{ width: 100%; }
}