*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#0b1220; --panel:#0f172a; --panel-2:#0c1629; --text:#e5e7eb; --muted:#94a3b8;
  --brand:#38bdf8; --accent:#22d3ee; --stroke:#1f2a3a;
  --mtn:#fbbf24; --tigo:#60a5fa; --telecel:#ef4444; --netflix:#dc2626; --audio:#f59e0b;
  --good:#22c55e; --warn:#f59e0b; --danger:#ef4444;
  --topbar-grad:linear-gradient(90deg,#0b1220,#0d1426 50%,#0b1220);
  --input-bg:#0e172a; --toast-bg:#0f172a; --box-bg:#0b1220;
  --shadow-soft:rgba(0,0,0,.2); --shadow-strong:rgba(0,0,0,.35);
  --overlay-border:rgba(255,255,255,.09); --overlay-bg:rgba(255,255,255,.035); --overlay-bg-hover:rgba(56,189,248,.055);
  --grid-line:rgba(255,255,255,.06); --spinner-track:rgba(255,255,255,.08); --footer-bg:#0a111f;
}
html[data-theme="light"]{
  --bg:#f8fafc; --panel:#ffffff; --panel-2:#f1f5f9; --text:#0f172a; --muted:#475569;
  --brand:#0284c7; --accent:#0891b2; --stroke:#e2e8f0;
  --topbar-grad:linear-gradient(90deg,#ffffff,#f1f5f9 50%,#ffffff);
  --input-bg:#ffffff; --toast-bg:#ffffff; --box-bg:#f1f5f9;
  --shadow-soft:rgba(15,23,42,.08); --shadow-strong:rgba(15,23,42,.15);
  --overlay-border:rgba(15,23,42,.10); --overlay-bg:rgba(15,23,42,.03); --overlay-bg-hover:rgba(2,132,199,.06);
  --grid-line:rgba(15,23,42,.06); --spinner-track:rgba(15,23,42,.10); --footer-bg:#f1f5f9;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;transition:background-color .2s ease,color .2s ease}
button,input,select,textarea{font-family:inherit}
.container{max-width:1100px;margin:0 auto;padding:20px}
/* Promo */
.promo{margin:0 0 18px}
.promo.hidden{display:none}
.promo-inner{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:999px;padding:7px 7px 7px 7px;box-shadow:0 10px 26px var(--shadow-soft)}
.promo-icon{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff}
.promo-track{flex:1;overflow:hidden;position:relative;height:20px}
.promo-text{position:absolute;top:0;left:100%;white-space:nowrap;color:#fff;font-weight:700;font-size:14px;animation:promo-scroll 16s linear infinite}
.promo-inner:hover .promo-text{animation-play-state:paused}
@keyframes promo-scroll{from{left:100%}to{left:-100%}}
.promo-close{flex-shrink:0;background:rgba(255,255,255,.22);border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
.promo-close:hover{background:rgba(255,255,255,.35)}
@media (prefers-reduced-motion: reduce){.promo-track{height:auto;min-width:0}.promo-text{animation:none;position:static;left:0;white-space:normal;line-height:1.35;padding:2px 0}}
/* Topbar */
.topbar{position:sticky;top:0;z-index:40;background:var(--topbar-grad);border-bottom:1px solid var(--stroke)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand .name,
#footerBrandName{
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.09em;
  padding-right:.15em;
  background:linear-gradient(90deg,var(--text) 0%,var(--text) 36%,var(--brand) 62%,var(--accent) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.brand .name{font-size:20px}
.brand .lock{filter:drop-shadow(0 0 12px rgba(56,189,248,.3))}
.topbar-actions{display:flex;align-items:center;gap:10px}
.topbar-buy-btn{padding:9px 18px;font-size:14px}
.theme-toggle{background:var(--panel);border:1px solid var(--stroke);color:var(--text);border-radius:10px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1;flex-shrink:0}
.theme-toggle:hover{border-color:var(--brand)}
.theme-toggle .icon-moon{display:inline}
.theme-toggle .icon-sun{display:none}
html[data-theme="light"] .theme-toggle .icon-moon{display:none}
html[data-theme="light"] .theme-toggle .icon-sun{display:inline}
/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--stroke);background:radial-gradient(1200px 400px at 20% -10%, rgba(56,189,248,.2), transparent 60%), radial-gradient(1000px 320px at 80% 0%, rgba(34,211,238,.18), transparent 60%)}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(to right, var(--grid-line) 1px, transparent 1px),linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);background-size:40px 40px;opacity:.15}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:center;padding:28px 0 14px}
.hero-text{min-width:0}
.hero-text h1{font-size:40px;margin:0 0 8px}
.hero-text h1 span{color:var(--brand)}
.hero-text p{color:var(--muted);margin:0 0 16px;max-width:650px}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cta .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-family:inherit;font-size:17px;font-weight:700;line-height:1}
.cta .btn-primary{background:linear-gradient(135deg,#38bdf8,#22d3ee);color:#04202c;box-shadow:0 10px 26px rgba(56,189,248,.22)}
.cta .btn-primary:hover{box-shadow:0 12px 30px rgba(56,189,248,.34)}
.cta .btn svg{flex-shrink:0}
.cta .btn-track{background:var(--panel);border:1px solid var(--stroke);color:var(--text);box-shadow:none}
.cta .btn-track:hover{border-color:var(--brand)}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;max-width:420px}
.badge-feature{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--stroke);background:var(--panel);border-radius:14px;padding:14px 8px;color:var(--muted);font-weight:700;font-size:12.5px;text-align:center}
.badge-feature svg{color:var(--brand)}
.hero-card{background:var(--panel);border:1px solid var(--stroke);border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes fgFadeIn{from{opacity:0}to{opacity:1}}
@keyframes fgSlideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fgScaleFade{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.fastgig-logo{animation:fgFadeIn .6s ease both}
.hero-text h1{animation:fgSlideUp .6s ease .1s both}
.hero-text p{animation:fgSlideUp .6s ease .22s both}
.hero-text .cta{animation:fgSlideUp .6s ease .34s both}
.hero-card.float{animation:fgScaleFade .7s cubic-bezier(.2,.8,.2,1) .42s both, float 6s ease-in-out infinite 1.1s}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.card-head{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--stroke)}
.dot{width:10px;height:10px;border-radius:50%}
.dot-green{background:#22c55e}.dot-yellow{background:#f59e0b}.dot-red{background:#ef4444}
.card-body{padding:14px}
.card-body h3{margin:0 0 6px}
/* Sections */
.section{padding:32px 0;border-top:1px solid var(--stroke)}
.section-alt{background:var(--panel-2)}
.section-head{margin-bottom:12px}
.eyebrow{margin:0 0 4px;color:var(--brand);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.section-title-with-icon{display:flex;align-items:center;gap:10px;margin:0}
.section-icon-badge{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(45,212,191,.15);color:#2dd4bf;flex-shrink:0}
.section-head h2{margin:0 0 4px}
.section-head .muted{color:var(--muted)}
/* Cards */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards-grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:16px;box-shadow:0 8px 30px rgba(0,0,0,.2);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card-title{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.logo{height:28px}.logo.small{height:24px}
.network-logo{
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:10px;
  display:block;
  flex-shrink:0;
  background:#fff;
}

.card-title h3{
  margin:0;
}

.card-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.logo-text{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:800;color:#fff;background:#111}
.label{display:block;margin:8px 0 6px;color:var(--text);font-weight:700}
.input,.select{width:100%;padding:12px;border-radius:12px;border:1px solid var(--stroke);background:var(--input-bg);color:var(--text);margin:6px 0 8px;outline:none;transition:border-color .15s ease, box-shadow .15s ease}
.input:focus,.select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.btn{border:none;border-radius:12px;padding:12px 16px;font-weight:800;text-decoration:none;display:inline-block;text-align:center;cursor:pointer;transition:transform .05s ease, box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(180deg,#47c7fb,#2aa9df);color:#001a26;box-shadow:0 8px 18px rgba(56,189,248,.25)}
.btn-primary:hover{box-shadow:0 10px 22px rgba(56,189,248,.35)}
.btn-ghost{background:transparent;border:1px solid var(--stroke);color:var(--text)}
.btn-whatsapp{background:linear-gradient(180deg,#25d366,#1faa5a);color:#fff;border:none;box-shadow:0 8px 20px rgba(37,211,102,.35)}
.btn-whatsapp:hover{box-shadow:0 10px 24px rgba(37,211,102,.45)}
.hover-lift:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(0,0,0,.35)}
.card-brand.mtn{border-color:var(--mtn)}
.card-brand.tigo{border-color:var(--tigo)}
.card-brand.telecel{border-color:var(--telecel)}
.card-brand.netflix{border-color:var(--netflix)}
.card-brand.audiomack{border-color:var(--audio)}
/* Bundle picker: network tabs + accordion cards */
.bundle-shell{grid-column:1/-1}
.network-tabs{display:flex;border-radius:999px;overflow:hidden;background:var(--panel);border:1px solid var(--stroke);padding:4px;gap:2px}
.network-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;padding:12px 8px;font-weight:700;font-size:14.5px;cursor:pointer;color:var(--muted);background:transparent;transition:background-color .15s ease,color .15s ease}
@media (max-width:380px){.network-tab{font-size:12.5px;padding:10px 2px;gap:5px}}
.network-tab::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0}
.network-tab.mtn::before{background:#facc15}
.network-tab.tigo::before{background:#3b82f6}
.network-tab.telecel::before{background:#ef4444}
.network-tab.active{background:var(--panel-2);color:var(--text)}
.network-meta{display:flex;gap:18px;flex-wrap:wrap;margin:12px 2px 16px;color:var(--muted);font-size:14px;font-weight:600}
.network-meta .meta-item{display:inline-flex;align-items:center;gap:6px}
.network-meta .meta-icon{flex-shrink:0}
.network-meta .meta-icon-bolt{color:#f59e0b}
.network-meta .meta-icon-shield{color:#10b981}
.bundle-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:420px){.bundle-list{gap:10px}}

.pkg-card{position:relative;background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:16px;transition:transform .2s ease, box-shadow .2s ease}
.pkg-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.pkg-card.pkg-reveal:not(.is-visible){opacity:0}
.pkg-card.pkg-reveal.is-visible{animation:pkgFadeUp .55s ease var(--d,0s) backwards}
@keyframes pkgFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.pkg-card.pkg-reveal:not(.is-visible){opacity:1}.pkg-card.pkg-reveal.is-visible{animation:none}}
.pkg-card-oos{opacity:.7}
.pkg-badge{display:inline-block;position:absolute;top:14px;right:14px;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.02em;border:1px solid}
.pkg-badge-mtn{color:#eab308;border-color:#eab308}
.pkg-badge-tigo{color:#3b82f6;border-color:#3b82f6}
.pkg-badge-telecel{color:#ef4444;border-color:#ef4444}
.pkg-size{margin-top:4px;line-height:1}
.pkg-size-num{font-size:34px;font-weight:800}
.pkg-size-unit{font-size:15px;font-weight:800;color:var(--muted);margin-left:2px}
.pkg-sub{color:var(--muted);font-size:13px;margin:4px 0 16px}
.pkg-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pkg-price{color:var(--brand);font-weight:800;font-size:17px}
.pkg-buy-btn{background:var(--panel-2);border:1px solid var(--stroke);color:var(--text);font-weight:700;font-size:13px;padding:7px 16px;border-radius:999px;cursor:pointer;font-family:inherit}
.pkg-buy-btn:hover{border-color:var(--brand);color:var(--brand)}
.pkg-soldout{background:var(--panel-2);color:var(--muted);font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:999px;text-align:center}
/* Network-colored bundle cards + site-colored Buy button */
.pkg-card-mtn{background:linear-gradient(145deg,#fcd34d,#fbbf24);border-color:#f59e0b;color:#1a1300}
.pkg-card-tigo{background:linear-gradient(145deg,#2f52b8,#25408f);border-color:#3b5bb5;color:#eef2ff}
.pkg-card-telecel{background:linear-gradient(145deg,#ef4444,#dc2626);border-color:#b91c1c;color:#fff}
.pkg-card .pkg-badge{color:inherit;border-color:currentColor;background:rgba(255,255,255,.18)}
.pkg-card-mtn .pkg-badge{background:rgba(0,0,0,.08)}
.pkg-card .pkg-size-unit,.pkg-card .pkg-sub{color:inherit;opacity:.8}
.pkg-card .pkg-price{color:inherit;font-size:19px}
.pkg-card .pkg-buy-btn{background:#000;border:none;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.28);padding:8px 18px;min-height:36px}.pkg-card .pkg-buy-btn:hover{background:#1a1a1a;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.4);transform:translateY(-1px)}
.pkg-card .pkg-soldout{background:rgba(0,0,0,.25);color:inherit;white-space:nowrap}

/* Confirm purchase: header + bundle chip */
#confirmModal .modal-head{margin-bottom:20px}
#confirmModal .modal-head h3{font-family:Roboto,system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em}
#confirmModal .modal-close{width:36px;height:36px;min-height:0;padding:0;border:0;border-radius:50%;background:#1b2538;font-size:15px}
#confirmModal .modal-close:hover{background:#243049}
.confirm-pkg-row{display:flex;align-items:center;gap:15px;padding:15px 16px;margin-bottom:18px;border-radius:22px;background:#1b2538;font-family:Roboto,system-ui,sans-serif}
.confirm-pkg-row.mtn{--net:var(--mtn)}
.confirm-pkg-row.tigo{--net:var(--tigo)}
.confirm-pkg-row.telecel{--net:var(--telecel)}
.confirm-pkg-icon{flex-shrink:0;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;border:2px solid var(--net,var(--mtn));color:var(--net,var(--mtn));font-family:Roboto,system-ui,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em}
.confirm-pkg-name{font-weight:800;font-size:19px;line-height:1.2;color:var(--text)}
.confirm-pkg-sub{margin-top:3px;color:var(--muted);font-size:14.5px;font-weight:500}
html[data-theme="light"] #confirmModal .modal-close,html[data-theme="light"] .confirm-pkg-row{background:#eef2f8}
.confirm-label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 6px}
.confirm-price-rows{margin-top:18px;padding-top:14px;border-top:1px solid var(--stroke);display:flex;flex-direction:column;gap:10px}
.confirm-price-row{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14.5px}
.confirm-total{color:var(--text);font-weight:800;font-size:16px;padding-top:6px;border-top:1px solid var(--stroke)}
.confirm-pay-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px}

.bundle-list.bundle-list-enter{animation:bundleListIn .35s ease both}
.bundle-list.bundle-list-leave{animation:bundleListOut .18s ease forwards}
@keyframes bundleListIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes bundleListOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}

.bundle-card{border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .25s ease, box-shadow .25s ease}
.bundle-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(0,0,0,.3)}
.bundle-card-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 0}
.bundle-network-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.bundle-network-icon img{width:100%;height:100%;object-fit:cover;display:block}
.bundle-chevron{width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.18);color:inherit;font-size:16px;font-weight:800;cursor:pointer;display:grid;place-items:center;line-height:1}
.bundle-info{padding:10px 18px 18px;cursor:pointer}
.bundle-size{font-size:30px;font-weight:800;line-height:1.15}
.bundle-sub{font-size:14px;opacity:.85;margin-top:2px}
.bundle-price-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px}
.bundle-price{font-size:26px;font-weight:800}
.bundle-validity{font-size:14px;opacity:.8}
.bundle-form{padding:16px 18px 18px}
.bundle-form-label{display:block;font-weight:700;margin-bottom:8px;font-size:14px}
.bundle-input{background:rgba(255,255,255,.92);color:#1f2937;border:none;margin:0 0 6px}
.bundle-input::placeholder{color:#6b7280}
.bundle-hint{font-size:12.5px;opacity:.75;margin:0 0 14px}
.bundle-buy-btn{background:rgba(0,0,0,.35);color:#fff;box-shadow:none;transition:transform .2s ease, background .2s ease}
.bundle-card:hover .bundle-buy-btn{transform:scale(1.04)}
.bundle-buy-btn:hover{background:rgba(0,0,0,.5)}

.bundle-card.mtn{background:var(--mtn);color:#1a1300}
.bundle-card.mtn .bundle-form{background:rgba(0,0,0,.08)}
.bundle-card.mtn .bundle-buy-btn{background:#1a1300;color:var(--mtn)}
.bundle-card.mtn .bundle-buy-btn:hover{background:#241b03}

.bundle-card.tigo{background:#25408f;color:#eef2ff}
.bundle-card.tigo .bundle-form{background:rgba(255,255,255,.06)}

.bundle-card.telecel{background:#dc2626;color:#fff}
.bundle-card.telecel .bundle-form{background:rgba(0,0,0,.14)}
.coming-soon-badge{display:inline-block;margin:0.5rem 0 0.75rem;padding:0.4rem 0.8rem;border-radius:999px;background:rgba(245,158,11,.12);color:#f7c75d;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
button:disabled{opacity:.8;cursor:not-allowed}


/* Tracker */
.tracker-note{display:flex;align-items:center;gap:7px;margin:8px 0 0;color:var(--muted);font-size:13px}
.tracker-note-icon{flex-shrink:0;color:#f59e0b}
.tracker{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.track-result{margin-top:10px}
/* FAQ */
.faq-section-toggle{display:flex;align-items:center;gap:8px;background:transparent;border:none;cursor:pointer;color:inherit;padding:0;width:100%;text-align:left;font:inherit}
.faq-section-toggle h2{margin:0}
.faq-toggle-icon{flex-shrink:0;color:var(--brand);transition:transform .25s ease}
.faq-section-toggle[aria-expanded="true"] .faq-toggle-icon{transform:rotate(180deg)}
.faq-list-wrap{overflow:hidden;max-height:0;transition:max-height .35s ease}
.faq-list-wrap.open{max-height:2000px}
.faq-item{background:var(--panel);border:1px solid var(--stroke);border-radius:14px;overflow:hidden}
.faq-question{width:100%;padding:16px 18px;background:transparent;border:none;color:var(--text);text-align:left;font-weight:700;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.faq-question::after{content:'+';font-size:1.4rem;color:var(--brand);font-weight:700}
.faq-item.active .faq-question::after{content:'−'}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .25s ease, padding .25s ease;padding:0 18px}
.faq-item.active .faq-answer{max-height:220px;padding:0 18px 16px}
.faq-answer p{margin:0;color:var(--muted);line-height:1.6}

/* Legal pages */
.legal-page{background:var(--bg);color:var(--text)}
.legal-topbar{background:var(--topbar-grad);border-bottom:1px solid var(--stroke)}
.legal-container{padding-top:40px;padding-bottom:60px}
.legal-shell{max-width:900px;margin:0 auto;padding:30px 24px;border:1px solid var(--stroke);background:var(--panel);border-radius:18px;box-shadow:0 10px 35px rgba(0,0,0,.18)}
.eyebrow{display:inline-block;margin:0 0 12px;padding:7px 12px;border-radius:999px;background:rgba(56,189,248,.12);color:var(--brand);font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.legal-shell h1{margin:0 0 16px;font-size:2.2rem;line-height:1.2}
.legal-shell h2{margin-top:24px;margin-bottom:10px;font-size:1.2rem}
.legal-shell p{color:var(--muted);line-height:1.8;margin:10px 0}
.back-link{color:var(--brand);text-decoration:none;font-weight:700}
.back-link:hover{text-decoration:underline}
.not-found-inner{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:40px 20px}
.not-found-code{font-size:72px;font-weight:800;color:var(--brand);margin:0;line-height:1}
.not-found-inner h1{margin:0 0 4px;font-size:26px}
.not-found-inner .muted{margin:0 0 20px;max-width:360px}

/* Contact */
.contact{display:flex;align-items:center;justify-content:space-between;gap:12px}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
.muted{color:var(--muted)}
.tiny{color:#8a93a6;font-size:12px}
.footer{border-top:1px solid var(--stroke);padding:40px 0 0;background:var(--footer-bg);text-align:left}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:28px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-col h4{margin:0 0 4px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.footer-col a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .15s ease}
.footer-col a:hover{color:var(--brand)}
.footer-col a{display:inline-flex;align-items:center;gap:10px}
.footer-col a .fi{flex-shrink:0;opacity:.85}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:.3px}
.footer-logo{width:38px;height:38px;object-fit:contain;border-radius:8px;display:block}
.footer-tagline{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5;max-width:260px}
.footer-bottom{border-top:1px solid var(--stroke);padding:16px 0;text-align:center}
.footer-bottom p{margin:0;color:var(--muted);font-size:13.5px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand-col{grid-column:1/-1}}
@media (max-width:480px){.footer{padding-top:32px}.footer-grid{gap:26px 16px}}

/* Floating WhatsApp */
.floating-whatsapp{position:fixed;right:20px;bottom:20px;z-index:70;display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(180deg,#25d366,#1faa5a);color:#fff;text-decoration:none;box-shadow:0 12px 28px rgba(37,211,102,.4);transition:transform .2s ease, box-shadow .2s ease}
.floating-whatsapp:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 16px 32px rgba(37,211,102,.5)}
.floating-whatsapp svg{width:28px;height:28px;fill:currentColor}

/* Toast */
.toast{position:fixed;z-index:10003;left:50%;width:max-content;bottom:calc(28px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px);padding:13px 22px;border-radius:999px;background:var(--toast-bg);border:1px solid var(--stroke);color:var(--text);font-size:14.5px;font-weight:600;text-align:center;box-shadow:0 14px 34px var(--shadow-strong);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,18px) scale(.96);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.9,.3,1.2),visibility 0s linear .3s}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.9,.3,1.2),visibility 0s}
body:has(#confirmModal:not(.hidden)) .toast{bottom:calc(100px + env(safe-area-inset-bottom))}
/* Modal */
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,6,23,.6);z-index:60}
.modal.hidden{display:none}
.modal-inner{background:var(--panel);border:1px solid var(--stroke);padding:18px;border-radius:12px;max-width:480px;width:92%}
.modal .confirm-body{margin:12px 0;color:var(--muted)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.modal-head h3{margin:0;display:flex;align-items:center;gap:8px}
.modal-close{background:var(--panel-2);border:1px solid var(--stroke);color:var(--text);width:30px;height:30px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.modal-close:hover{border-color:var(--brand)}

/* Confirm purchase: bottom sheet */
#confirmModal{
  place-items:end center;
  z-index:10001;
  background:rgba(3,8,16,.62);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  animation:sheetFade .25s ease both;
}
#confirmModal .modal-inner{
  width:100%;
  max-width:520px;
  max-height:92vh;
  overflow-y:auto;
  border-bottom:0;
  border-radius:26px 26px 0 0;
  padding:26px 22px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 50px rgba(0,0,0,.35);
  animation:sheetUp .32s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes sheetFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  #confirmModal,#confirmModal .modal-inner{animation:none}
}

.section-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tracker-trigger{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--stroke);color:var(--text);padding:9px 14px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;transition:border-color .2s ease,transform .15s ease}
.tracker-trigger:hover{border-color:var(--brand);transform:translateY(-1px)}
.tracker-trigger-icon{flex-shrink:0;color:var(--brand)}

@media (max-width:480px){
  .section-head-row{flex-direction:column;align-items:stretch}
  .tracker-trigger{justify-content:center}
}
.section-alt .card{background:var(--panel-2)}
/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:minmax(0,1fr)}
  .cards-grid{grid-template-columns:1fr 1fr}
  .menu-btn{display:block;transition:transform .3s ease,border-color .2s ease}
  .menu-btn.open{transform:rotate(90deg);border-color:var(--brand)}
  .tracker{grid-template-columns:1fr}

  /* Mobile dropdown menu */
  .nav{
    display:flex;
    flex-direction:column;
    gap:0;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:6px 20px 12px;
    background:var(--panel);
    border-bottom:1px solid var(--stroke);
    box-shadow:0 18px 30px var(--shadow-strong);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-12px);
    transition:opacity .25s ease,transform .3s ease,visibility 0s linear .3s;
  }
  .nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .25s ease,transform .3s ease,visibility 0s;
  }
  .nav a{
    padding:15px 4px;
    font-size:16px;
    border-bottom:1px solid var(--stroke);
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .25s ease,transform .3s ease,color .2s ease;
  }
  .nav a:last-child{border-bottom:none}
  .nav a::after{display:none}
  .nav a:hover,.nav a:active{color:var(--brand)}
  .nav.open a{opacity:1;transform:translateY(0)}
  .nav.open a:nth-child(1){transition-delay:.05s}
  .nav.open a:nth-child(2){transition-delay:.10s}
  .nav.open a:nth-child(3){transition-delay:.15s}
  .nav.open a:nth-child(4){transition-delay:.20s}
}
@media (max-width: 640px){
  .cards-grid{grid-template-columns:1fr}
  .hero-text h1{font-size:32px}
}
/* ================================
   WhatsApp Floating Button
   ================================ */

.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;

  width: 58px;
  height: 58px;

  background: #25D366;
  color: #ffffff;
  border: none;
  font: inherit;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  text-decoration: none;

  z-index: 9999;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.whatsapp-icon {
  width: 30px;
  height: 30px;

  display: block;
  flex-shrink: 0;
}

.whatsapp-float:hover {
  transform: scale(1.08);

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.30);
}

.whatsapp-float:active {
  transform: scale(0.94);
}

/* Blink animation */
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
  animation: waPulse 1.8s ease-out infinite;
}

.whatsapp-float:hover::before,
.whatsapp-float[aria-expanded="true"]::before {
  animation: none;
  opacity: 0;
}

@keyframes waPulse {
  0% {
    transform: scale(1);
    opacity: .55;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float::before {
    animation: none;
    opacity: 0;
  }
}

/* Desktop label */
.whatsapp-label {
  display: none;
}

/* Mobile */
@media (max-width: 600px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;

    width: 58px;
    height: 58px;
  }

  .whatsapp-icon {
    width: 30px;
    height: 30px;
  }
}

/* WhatsApp Popup */
.wa-popup{position:fixed;right:22px;bottom:90px;width:320px;max-width:calc(100vw - 32px);background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35);z-index:10000;transform-origin:bottom right;transition:opacity .18s ease,transform .18s ease}
.wa-popup.hidden{opacity:0;pointer-events:none;transform:translateY(12px) scale(.96)}
.wa-popup-header{background:linear-gradient(135deg,#0a7c6b,#075e50);padding:20px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wa-popup-header-left{display:flex;align-items:center;gap:12px}
.wa-popup-icon{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-popup-icon svg{width:24px;height:24px;color:#fff}
.wa-popup-kicker{color:rgba(255,255,255,.75);font-size:11px;font-weight:800;letter-spacing:1.5px}
.wa-popup-title{color:#fff;font-size:19px;font-weight:800;margin-top:2px}
.wa-popup-close{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-popup-close:hover{background:rgba(255,255,255,.25)}
.wa-popup-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.wa-option{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;border:1px solid #e3f5ef;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.wa-option:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.wa-option-channel{background:#eafaf3}
.wa-option-admin{background:#fff;border-color:#e5e7eb}
.wa-option-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.wa-option-icon svg{width:22px;height:22px}
.wa-option-icon-bell{background:linear-gradient(135deg,#16a34a,#0d9488)}
.wa-option-icon-phone{background:linear-gradient(135deg,#22c55e,#16a34a)}
.wa-option-title{display:block;font-weight:800;color:#0f172a;font-size:15px}
.wa-option-sub{display:block;color:#16a34a;font-size:13px;margin-top:2px}
.wa-option-admin .wa-option-sub{color:#64748b}
@media (max-width:600px){.wa-popup{right:16px;bottom:86px}}
/* =========================================
   D-PLUG GH - Data Plans Loading Animation
   ========================================= */

.plans-loading {
  min-height: 180px;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

/* Main spinner */
.dplug-spinner {
  width: 46px;
  height: 46px;

  border-radius: 50%;

  border: 4px solid rgba(53, 189, 242, 0.15);
  border-top-color: #35bdf2;
  border-right-color: #35bdf2;

  box-shadow:
    0 0 15px rgba(53, 189, 242, 0.25);

  animation: dplugSpin 0.8s linear infinite;
}

@keyframes dplugSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Loading text */
.plans-loading-title {
  margin-top: 18px;

  color: var(--text);

  font-size: 17px;
  font-weight: 600;
}

/* Animated dots */
#loadingDots {
  display: inline-block;
  width: 24px;
  text-align: left;
}

/* Subtitle */
.plans-loading-subtitle {
  margin-top: 7px;

  color: var(--muted);

  font-size: 12px;
}

/* =========================================
   D-PLUG GH - Global Scroll Fade Effect
   ========================================= */

html {
  scroll-behavior: smooth;
}

body {
  transition: filter 0.12s ease;
}

/* =========================================================
   D-PLUG GH — MOBILE RESPONSIVE IMPROVEMENTS
   Paste this at the VERY BOTTOM of style.css
   ========================================================= */

@media (max-width: 768px) {

    /* ---------- GLOBAL MOBILE ---------- */

    html {
        width: 100%;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        -webkit-text-size-adjust: 100%;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }

    button,
    a {
        -webkit-tap-highlight-color: transparent;
    }


    /* ---------- CONTAINERS ---------- */

    .container,
    .wrapper,
    .content,
    main {
        width: 100%;
        max-width: 100%;
    }

    section {
        width: 100%;
        max-width: 100%;
    }


    /* ---------- HEADER ---------- */

    header {
        width: 100%;
        max-width: 100%;
    }

    nav {
        max-width: 100%;
    }

    .nav-container,
    .navbar,
    .nav-content {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Prevent logo from becoming too large */
    header img,
    .logo img,
    .site-logo img {
        max-width: 150px;
        width: auto;
        height: auto;
    }


    /* ---------- LOGO ---------- */

    .logo {
        max-width: 150px;
    }

    .logo img {
        display: block;
    }


    /* ---------- HERO ---------- */

    .hero {
        width: 100%;
        min-height: auto;
        padding: 70px 18px 45px;
        text-align: center;
    }

    .hero h1 {
        font-size: clamp(32px, 9vw, 48px);
        line-height: 1.08;
        margin-bottom: 16px;
    }

    .hero h2 {
        font-size: clamp(24px, 7vw, 36px);
        line-height: 1.15;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.6;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }


    /* ---------- HERO BUTTONS ---------- */

    .hero-buttons,
    .hero-actions,
    .cta-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .hero-buttons a,
    .hero-buttons button,
    .hero-actions a,
    .hero-actions button,
    .cta-buttons a,
    .cta-buttons button {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* ---------- GENERAL SECTIONS ---------- */

    section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .section-title {
        font-size: clamp(26px, 7vw, 36px);
        line-height: 1.15;
        text-align: center;
    }

    .section-subtitle {
        font-size: 15px;
        line-height: 1.6;
        text-align: center;
    }


    /* ---------- CARDS ---------- */

    .cards,
    .card-grid,
    .products-grid,
    .bundle-grid,
    .plans-grid,
    .services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
    }

    .card,
    .product-card,
    .bundle-card,
    .plan-card,
    .service-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    /* ---------- DATA BUNDLES ---------- */

    .bundle-container,
    .bundles-container,
    .data-bundles {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .bundle-card {
        padding: 18px;
        border-radius: 14px;
    }

    .bundle-card h3,
    .bundle-card h4 {
        font-size: 20px;
        line-height: 1.25;
    }

    .bundle-card p {
        font-size: 14px;
        line-height: 1.5;
    }


    /* ---------- FORMS ---------- */

    form {
        width: 100%;
        max-width: 100%;
    }

    input,
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        min-height: 48px;
        font-size: 16px;
        border-radius: 10px;
    }

    textarea {
        min-height: 110px;
    }

    label {
        display: block;
        margin-bottom: 7px;
        font-size: 14px;
    }


    /* ---------- FORM ROWS ---------- */

    .form-row,
    .input-row,
    .form-group-row,
    .checkout-row {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .form-row > *,
    .input-row > *,
    .form-group-row > *,
    .checkout-row > * {
        width: 100%;
        min-width: 0;
    }


    /* ---------- BUTTONS ---------- */

    button,
    .btn,
    .button,
    a.btn {
        min-height: 48px;
        max-width: 100%;
    }

    button {
        cursor: pointer;
    }


    /* ---------- ORDER TRACKER ---------- */

    .order-tracker,
    .tracker,
    .tracking-section {
        width: 100%;
        padding: 20px 0;
    }

    .order-tracker input,
    .tracker input,
    .tracking-section input {
        width: 100%;
        margin-bottom: 10px;
    }

    .order-tracker button,
    .tracker button,
    .tracking-section button {
        width: 100%;
        min-height: 48px;
    }


    /* ---------- STATUS / TIMELINE ---------- */

    .timeline,
    .status-timeline {
        width: 100%;
        overflow-x: hidden;
    }

    .timeline-item,
    .status-item {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }


    /* ---------- FAQ ---------- */

    .faq,
    .faq-container {
        width: 100%;
    }

    .faq-item {
        width: 100%;
    }

    .faq-question {
        width: 100%;
        min-height: 52px;
        padding: 14px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        text-align: left;
    }



    /* ---------- WHATSAPP / FLOATING BUTTON ---------- */

    .whatsapp-button,
    .whatsapp-float,
    .floating-whatsapp {
        max-width: calc(100vw - 32px);
    }


    /* ---------- FOOTER ---------- */

    footer {
        width: 100%;
        padding: 35px 16px 25px;
        text-align: center;
    }

    .footer-container,
    .footer-content {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }


    /* ---------- PREVENT LONG TEXT OVERFLOW ---------- */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a {
        overflow-wrap: anywhere;
    }


    /* ---------- TABLES ---------- */

    table {
        width: 100%;
        max-width: 100%;
    }

    .table-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* ---------- MOBILE SPACING ---------- */

    .py-large {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .py-medium {
        padding-top: 35px;
        padding-bottom: 35px;
    }


    /* ---------- SMALL PHONES ---------- */

    @media (max-width: 400px) {

        .hero {
            padding-left: 14px;
            padding-right: 14px;
        }

        section {
            padding-left: 14px;
            padding-right: 14px;
        }

        .hero h1 {
            font-size: 32px;
        }

        .hero p {
            font-size: 15px;
        }

        .bundle-card {
            padding: 15px;
        }

        input,
        select,
        textarea,
        button {
            font-size: 16px;
        }
    }
}

/* =========================================
   FAST GIG - PAYMENT SUCCESS
   ========================================= */

.payment-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(10px);

  animation: paymentOverlayIn 0.3s ease forwards;
}


.payment-success-card {
  width: min(420px, 100%);

  padding: 32px 24px;

  text-align: center;

  background: var(--panel);

  border: 1px solid rgba(34, 197, 94, 0.35);

  border-radius: 22px;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(34, 197, 94, 0.08);

  animation: paymentCardIn 0.45s cubic-bezier(.2,.8,.2,1) forwards;
}


/* Animated green check */

.success-check {
  width: 76px;
  height: 76px;

  margin: 0 auto 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(34, 197, 94, 0.12);

  border: 2px solid #22c55e;

  color: #22c55e;

  font-size: 42px;
  font-weight: 900;

  box-shadow:
    0 0 0 0 rgba(34, 197, 94, 0.35);

  animation:
    successCheckPop 0.55s cubic-bezier(.17,.67,.32,1.3) forwards,
    successCheckPulse 1.8s ease-in-out 0.6s infinite;
}


.payment-success-card h2 {
  margin: 0 0 18px;

  font-size: 27px;

  font-weight: 800;

  color: var(--text);
}


.success-reference-label {
  margin: 0 0 8px;

  color: var(--muted);

  font-size: 14px;

  font-weight: 600;
}


.reference-box {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  width: 100%;

  padding: 10px;

  background: var(--box-bg);

  border: 1px solid var(--stroke);

  border-radius: 12px;
}


#successReference {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: var(--text);

  font-size: 14px;

  font-weight: 800;

  letter-spacing: 0.4px;
}


.copy-reference-btn {
  flex-shrink: 0;

  border: none;

  border-radius: 9px;

  padding: 9px 13px;

  background: var(--brand);

  color: #001a26;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    background 0.2s ease;
}


.copy-reference-btn:hover {
  transform: translateY(-1px);
}


.copy-reference-btn:active {
  transform: scale(0.96);
}


.copy-reference-btn.copied {
  background: #22c55e;

  color: #052e16;
}


.payment-success-done-btn{width:100%;margin-top:22px;border:none;border-radius:12px;padding:14px;background:#22c55e;color:#052e16;font-weight:800;font-size:15px;cursor:pointer;transition:transform .15s ease,background .2s ease}
.payment-success-done-btn:hover{background:#16a34a}
.payment-success-done-btn:active{transform:scale(.97)}


/* Overlay entrance */

@keyframes paymentOverlayIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* Card entrance */

@keyframes paymentCardIn {

  from {
    opacity: 0;
    transform: translateY(25px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

}


/* Check animation */

@keyframes successCheckPop {

  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-20deg);
  }

  70% {
    opacity: 1;
    transform: scale(1.12) rotate(3deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }

}


/* Check pulse */

@keyframes successCheckPulse {

  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0.30);
  }

  50% {
    box-shadow:
      0 0 0 12px rgba(34, 197, 94, 0);
  }

}


/* Disappearing animation */

.payment-success-hide {
  animation: paymentOverlayOut 0.4s ease forwards;
}


@keyframes paymentOverlayOut {

  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }

}


/* Mobile */

@media (max-width: 480px) {

  .payment-success-card {
    padding: 28px 18px;
  }

  .payment-success-card h2 {
    font-size: 24px;
  }

  .success-check {
    width: 68px;
    height: 68px;
    font-size: 36px;
  }

  .reference-box {
    padding: 8px;
  }

  #successReference {
    font-size: 12px;
  }

  .copy-reference-btn {
    padding: 8px 11px;
    font-size: 13px;
  }

}

/* =========================================
   FAST GIG - PAYMENT LOADING
   ========================================= */

.payment-status-overlay {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(2, 6, 23, 0.84);

  backdrop-filter: blur(10px);

  animation:
    paymentOverlayIn
    0.3s ease
    forwards;
}


/* Loading card */

.payment-loading-card {
  width: min(400px, 100%);

  padding: 34px 24px;

  text-align: center;

  background: var(--panel);

  border: 1px solid
    rgba(34, 197, 94, 0.30);

  border-radius: 22px;

  box-shadow:
    0 25px 70px
    rgba(0, 0, 0, 0.45),

    0 0 40px
    rgba(34, 197, 94, 0.08);

  animation:
    paymentCardIn
    0.4s
    cubic-bezier(.2,.8,.2,1)
    forwards;
}


/* Loading spinner */

.payment-loading-spinner {
  width: 76px;
  height: 76px;

  margin: 0 auto 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border: 3px solid
    rgba(34, 197, 94, 0.15);

  border-top-color:
    #22c55e;

  border-right-color:
    var(--brand);

  animation:
    paymentSpinner
    0.9s
    linear
    infinite;

  box-shadow:
    0 0 25px
    rgba(34, 197, 94, 0.18);
}


/* Inner spinner ring */

.payment-loading-spinner div {
  width: 48px;
  height: 48px;

  border-radius: 50%;

  border: 2px solid
    var(--spinner-track);

  border-bottom-color:
    #22c55e;

  animation:
    paymentSpinnerReverse
    0.7s
    linear
    infinite;
}


/* Loading title */

.payment-loading-card h2 {
  margin: 0 0 10px;

  color: var(--text);

  font-size: 25px;

  font-weight: 800;
}


/* Loading message */

.payment-loading-card p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}


/* Spinner animation */

@keyframes paymentSpinner {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


/* Reverse inner animation */

@keyframes paymentSpinnerReverse {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }

}


/* Mobile */

@media (max-width: 480px) {

  .payment-loading-card {
    padding: 30px 20px;
  }

  .payment-loading-spinner {
    width: 68px;
    height: 68px;
  }

  .payment-loading-card h2 {
    font-size: 23px;
  }

}

/* FAST GIG logo in header */

.fastgig-logo {
  width: 42px;
  height: 42px;

  object-fit: contain;

  border-radius: 12px;
  
  display: block;

  flex-shrink: 0;
}

@media (max-width: 600px) {

  .brand {
    gap: 7px;
  }

  .fastgig-logo {
    width: 38px;
    height: 38px;
  }

  .brand .name {
    font-size: 17px;
    line-height: 1.05;
  }

}

/* ===== Tracker progress + timer ===== */
.track-steps{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0 14px}
.track-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.track-step:not(:first-child)::before{content:"";position:absolute;top:7px;right:50%;width:100%;height:3px;border-radius:3px;background:var(--stroke)}
.track-step.done:not(:first-child)::before,
.track-step.active:not(:first-child)::before{background:var(--brand)}
.track-step.failed:not(:first-child)::before{background:#ef4444}
.track-dot{position:relative;z-index:1;width:17px;height:17px;border-radius:50%;box-sizing:border-box;background:var(--stroke);border:3px solid var(--stroke)}
.track-step.done .track-dot{background:var(--brand);border-color:var(--brand)}
.track-step.active .track-dot{background:var(--panel);border-color:var(--brand);box-shadow:0 0 0 6px rgba(56,189,248,.16)}
.track-step.failed .track-dot{background:#ef4444;border-color:#ef4444}
.track-step-label{font-size:14px;font-weight:700;color:var(--muted)}
.track-step.done .track-step-label{color:var(--text)}
.track-step.active .track-step-label{color:var(--brand)}
.track-step.failed .track-step-label{color:#ef4444}
.track-timer{margin:0 0 14px;padding:12px 14px;border-radius:14px;text-align:center;font-size:15px;line-height:1.4;background:var(--panel-2);border:1px solid var(--stroke);color:var(--text)}
.track-timer b{color:var(--brand)}
.track-timer.ok{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.35)}
.track-timer.ok b{color:#16a34a}
.track-timer.bad{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.30);color:#ef4444}

/* ===== Out of stock bundles ===== */
.bundle-card.out-of-stock{position:relative}
.bundle-card.out-of-stock:hover{transform:none}
.bundle-card.out-of-stock .bundle-card-top{margin-top:22px}
.bundle-card.out-of-stock .bundle-card-top,
.bundle-card.out-of-stock .bundle-info{opacity:.85}
.bundle-oos-banner{position:absolute;top:0;left:0;right:0;background:#f78f96;color:#fff;text-align:center;font-weight:800;font-size:13px;letter-spacing:.05em;padding:8px 0}
.bundle-oos{margin:0 14px 16px;padding:16px;border-radius:16px;background:#fff;color:#1a1a2e;border:1px solid rgba(139,92,246,.35)}
.bundle-oos-head{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:18px;margin-bottom:12px}
.bundle-oos-head img{width:34px;height:34px;border-radius:10px;object-fit:cover}
.bundle-oos-dash{opacity:.4}
.bundle-oos-price{color:#7c3aed}
.bundle-oos-msg{background:#fff1f2;border:1px solid #fecdd3;color:#c81e1e;border-radius:12px;padding:14px;text-align:center;font-size:15px}

/* Keep anchor sections clear of the fixed header */
html{scroll-padding-top:96px}

/* ===== Mobile fit: stop sideways overflow on narrow phones ===== */
.bundle-shell{min-width:0;max-width:100%}
.network-tabs{max-width:100%}
.network-tab{min-width:0}
.bundle-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.pkg-card{min-width:0}
@media (max-width:480px){
  .pkg-card{padding:12px}
  .pkg-badge{top:10px;right:10px;padding:2px 8px;font-size:10px}
  .pkg-card .pkg-price{font-size:17px}
  .pkg-card .pkg-buy-btn{padding:8px 14px}
  .pkg-card .pkg-soldout{padding:7px 12px;font-size:12px;white-space:nowrap}
  .pkg-bottom-row{gap:6px;flex-wrap:wrap}
}

/* ===== Light theme polish ===== */
html[data-theme="light"]{
  --bg:#f1f6fb; --panel-2:#e9f0f8; --muted:#4b5b73; --stroke:#d9e3ef;
  --accent:#06b6d4; --footer-bg:#e8f0f8;
  --shadow-soft:rgba(15,23,42,.08); --shadow-strong:rgba(15,23,42,.16);
}
html[data-theme="light"] body{background:radial-gradient(900px 480px at 10% -8%,rgba(14,165,233,.14),transparent 62%),radial-gradient(800px 420px at 95% 0%,rgba(6,182,212,.12),transparent 60%),var(--bg);background-attachment:fixed}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 18px rgba(15,23,42,.07)}
html[data-theme="light"] .hero{background:radial-gradient(1100px 420px at 15% -10%,rgba(14,165,233,.24),transparent 62%),radial-gradient(900px 340px at 90% 0%,rgba(6,182,212,.20),transparent 60%)}
html[data-theme="light"] .badge-feature{box-shadow:0 8px 22px rgba(15,23,42,.07)}
html[data-theme="light"] .card{box-shadow:0 12px 32px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.05)}
html[data-theme="light"] .btn-ghost{background:#fff;box-shadow:0 6px 16px rgba(15,23,42,.07)}
html[data-theme="light"] .cta .btn-primary{box-shadow:0 12px 28px rgba(14,165,233,.35)}
html[data-theme="light"] .network-tabs{background:#e6eef7;border-color:#d4e0ee}
html[data-theme="light"] .network-tab.active{background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.12)}
html[data-theme="light"] .pkg-card{box-shadow:0 12px 26px rgba(15,23,42,.14)}
html[data-theme="light"] .pkg-card:hover{box-shadow:0 16px 32px rgba(15,23,42,.22)}
html[data-theme="light"] .eyebrow{background:rgba(2,132,199,.12)}
html[data-theme="light"] .footer{background:linear-gradient(180deg,#eaf1f9,#e1ebf6)}

/* ===== Compact header ===== */
.topbar .topbar-inner{padding-top:14px;padding-bottom:14px;gap:10px}
.topbar .brand{gap:8px}
.topbar .fastgig-logo{width:36px;height:36px;border-radius:11px}
.topbar .brand .name{font-size:17px}
.topbar .theme-toggle{width:38px;height:38px!important;min-height:0!important;font-size:17px;border-radius:10px}
.topbar .topbar-buy-btn{display:inline-flex;align-items:center;justify-content:center;min-height:0!important;height:40px!important;padding:0 18px;font-size:14px;border-radius:11px}


/* ===== Premium look: main page ===== */

/* feature badges under the hero */
.badge-feature{border-radius:22px;padding:16px 8px;gap:10px;font-weight:700}
.badge-feature svg{box-sizing:content-box;width:18px;height:18px;padding:10px;border-radius:15px;background:rgba(56,189,248,.14);color:#0ea5e9}
.badge-feature:nth-child(1) svg{background:rgba(245,158,11,.16);color:#f59e0b}
.badge-feature:nth-child(2) svg{background:rgba(16,185,129,.16);color:#10b981}
.badge-feature:nth-child(3) svg{background:rgba(99,102,241,.16);color:#6366f1}

/* section heading and network tabs */
.section-head h2{font-size:28px;font-weight:800}
.network-tabs{padding:5px;gap:4px;border-radius:999px}
.network-tab{padding:13px 8px;font-size:15px;border-radius:999px}
.network-tab.active{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px rgba(56,189,248,.35),0 6px 16px rgba(0,0,0,.18)}
html[data-theme="light"] .network-tab.active{box-shadow:0 6px 16px rgba(15,23,42,.14)}

/* bundle cards */
.pkg-card{border-radius:24px}

/* inputs */
.input,.select{height:54px;padding:0 16px;border-radius:16px;font-size:16px}
html[data-theme="light"] .input,html[data-theme="light"] .select{background-color:#f3f6fb;border-color:#dfe6f1}
html[data-theme="light"] .input:focus{background-color:#fff}
.input:focus,.select:focus{border-color:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.18)}

/* pop-ups as bottom sheets */
.modal{background:rgba(2,6,23,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-inner{position:relative;overflow:hidden;padding:26px 22px 24px;border-radius:30px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.modal-inner::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#22d3ee,#6366f1)}
html[data-theme="light"] .modal-inner{background:#fff;border-color:#e3e9f3}
.modal-head{margin-bottom:8px}
.modal-head h3{font-size:21px;font-weight:800}
.modal-close{width:38px;height:38px;border-radius:50%}
@media (max-width:640px){
  .modal{place-items:end center}
  .modal-inner{width:100%;max-width:none;border-radius:30px 30px 0 0;padding-bottom:calc(26px + env(safe-area-inset-bottom));animation:fgSheetUp .35s cubic-bezier(.2,.9,.3,1) both}
}
@keyframes fgSheetUp{from{transform:translateY(46px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.modal-inner{animation:none}}

/* purchase pop-up */
.confirm-pkg-row{padding:16px;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--net,var(--mtn)) 24%,var(--panel-2)),var(--panel-2));border:1px solid color-mix(in srgb,var(--net,var(--mtn)) 35%,transparent)}
.confirm-pkg-icon{width:54px;height:54px;border:0;border-radius:18px;background:var(--net,var(--mtn));color:#111827;box-shadow:0 10px 22px color-mix(in srgb,var(--net,var(--mtn)) 45%,transparent)}
.confirm-label{margin:18px 0 4px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.confirm-price-rows{padding:16px;border:1px solid var(--stroke);border-radius:20px;background:var(--panel-2)}
html[data-theme="light"] .confirm-price-rows{background:#f6f9fd}
.confirm-total{font-size:18px;color:var(--brand)}
.confirm-pay-btn{height:56px;font-size:17px;border-radius:18px}

/* tracking pop-up */
.tracker{gap:12px}
.tracker .btn{height:54px;border-radius:16px;font-size:16px}
.track-result{border-radius:20px}


/* ===== Pop-up scroll fix ===== */
.modal{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal.hidden{display:none}
.modal-inner{margin:auto;flex:none}
html:has(.modal:not(.hidden)),
body:has(.modal:not(.hidden)){overflow:hidden}
@media (max-width:640px){
  .modal-inner{margin:auto 0 0}
}
#confirmModal .modal-inner{margin:auto auto 0;max-height:92vh;max-height:92dvh;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ===== Confirm purchase: payment note ===== */
.confirm-secure{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;margin:14px 0 0;font-size:13px;font-weight:500;color:var(--muted);text-align:center}
.confirm-secure-lock{display:inline-flex;align-items:center;gap:5px}
.confirm-secure-icon{flex-shrink:0;color:#10b981}