:root{
  --bg1:#e0f2fe; --bg2:#f1f5f9; --accent:#0284c7; --accent2:#38bdf8;
  --text:#334155; --card:#ffffff; --border:#e2e8f0; --muted:#64748b; --ash-dark:#475569;
  --danger:#dc2626; --ok:#16a34a; --warn:#b45309;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter','Segoe UI',system-ui,sans-serif;}
[hidden]{display:none!important;}
:focus-visible{outline:3px solid #0077b5;outline-offset:3px;}
body{background:linear-gradient(180deg,var(--bg1),var(--bg2)); color:var(--text); overflow-x:hidden; min-height:100vh;}
a{color:var(--accent);}
code{background:#f1f5f9; padding:1px 6px; border-radius:6px; font-size:0.9em;}

/* ---------- Header ---------- */
header{padding:16px 4%; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0;
  background:rgba(255,255,255,0.92); border-bottom:1px solid var(--border); backdrop-filter:blur(12px); z-index:10; flex-wrap:wrap; gap:8px;}
.logo{display:flex; align-items:center; gap:10px; font-size:24px; font-weight:800;}
.logo img{height:40px; width:auto; display:block; flex-shrink:0;}
.logo-text{background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.logo-text.plain{background:none; -webkit-text-fill-color:currentColor;}
nav a{color:var(--ash-dark); text-decoration:none; margin-left:20px; font-weight:600; font-size:14px; transition:0.2s;}
nav a:hover{color:var(--accent);}

/* ---------- Top bar ---------- */
.top-bar{background:#f8fafc; border-bottom:1px solid var(--border); padding:10px 4%; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--muted);}
.top-bar a{color:var(--accent); font-weight:700; text-decoration:none;}

/* ---------- Hero ---------- */
.hero{padding:70px 4% 40px; text-align:center;}
.hero h1{font-size:42px; line-height:1.1; color:#0f172a;}
.hero p{font-size:17px; margin:16px auto 24px; max-width:640px; color:var(--muted);}
.info-panel{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; text-align:left;}
.info-card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:20px;
  box-shadow:0 8px 30px rgba(148,163,184,0.1);}
.info-card h3{color:#0f172a; margin-bottom:8px;}

/* ---------- Buttons ---------- */
.btn{background:linear-gradient(90deg,var(--accent),var(--accent2)); color:white; padding:12px 24px; border-radius:999px;
  border:none; font-weight:700; cursor:pointer; transition:0.15s; box-shadow:0 8px 20px rgba(2,132,199,0.25);
  text-decoration:none; display:inline-block; font-size:14px;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:scale(0.94);}
.btn:disabled{opacity:0.6; cursor:not-allowed;}
.btn-secondary{background:white; color:var(--ash-dark); border:1px solid var(--border); box-shadow:none;}
.btn-danger{background:linear-gradient(90deg,#dc2626,#f87171); box-shadow:0 8px 20px rgba(220,38,38,0.2);}
.btn-ghost{background:#f1f5f9; color:var(--ash-dark); border:1px solid var(--border); box-shadow:none;}
.btn-sm{padding:8px 14px; font-size:12px; border-radius:10px;}

/* ---------- Sections ---------- */
.section{padding:50px 4%;}
.section h2{text-align:center; color:#0f172a; font-size:28px; margin-bottom:8px;}
.section > p{text-align:center; color:var(--muted); margin-bottom:24px;}
.product-section{display:grid; grid-template-columns:1.4fr 0.9fr; gap:24px; align-items:start;}
.card{background:var(--card); padding:24px; border-radius:20px; border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(148,163,184,0.1);}

/* ---------- Provider & package selection ---------- */
.provider-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.provider-btn{border:1px solid var(--border); background:#f8fafc; color:var(--ash-dark); padding:10px 16px;
  border-radius:10px; cursor:pointer; font-weight:600; transition:0.2s; font-size:13px;}
.provider-btn.active,.provider-btn:hover{border-color:var(--accent); background:#e0f2fe; color:var(--accent);}
/* ---------- Bundle cards (network-colored pricing grid) ---------- */
.bundle-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:8px;}
.bundle-grid.compact{grid-template-columns:repeat(3,minmax(110px,1fr));}
.bundle-card{--c1:#ffd400; --c2:#ffbe00; --ink:#141414; --ink-soft:rgba(20,20,20,0.6);
  --ink-v:rgba(20,20,20,0.58); --pill-bg:#0f172a; --pill-fg:#ffd400; --card-border:#f2c200;
  --glow:rgba(255,190,0,0.22); --glow-h:rgba(255,190,0,0.38); --glow-a:rgba(255,190,0,0.42);
  --share-bg:rgba(20,20,20,0.12); position:relative;
  background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 100%); border-radius:18px;
  padding:14px 14px 12px; color:var(--ink); cursor:pointer; border:1px solid var(--card-border);
  box-shadow:0 4px 14px var(--glow); transition:transform .15s, box-shadow .15s;
  display:flex; flex-direction:column; min-height:142px;}
.bundle-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px var(--glow-h);}
.bundle-card.active{box-shadow:0 0 0 3px #0f172a, 0 10px 26px var(--glow-a);}
.bundle-card .bc-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.bundle-card .bc-logo{background:var(--pill-bg); color:var(--pill-fg); font-size:8px; font-weight:800; padding:3px 8px;
  border-radius:999px; letter-spacing:0.6px; text-transform:uppercase; line-height:1.3;}
.bundle-card .bc-share{width:26px; height:26px; border-radius:50%; background:var(--share-bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; transition:.15s; padding:0;}
.bundle-card .bc-share:hover{background:var(--pill-bg); color:var(--pill-fg);}
.bundle-card .bc-share svg{width:13px; height:13px; fill:currentColor;}
.bundle-card .bc-size{font-size:30px; font-weight:800; line-height:1; color:var(--ink);}
.bundle-card .bc-sub{font-size:11px; color:var(--ink-soft); font-weight:700; margin-top:3px;}
.bundle-card .bc-bottom{display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; padding-top:12px;}
.bundle-card .bc-price{font-size:21px; font-weight:800; color:var(--ink);}
.bundle-card .bc-validity{font-size:10px; color:var(--ink-v); font-weight:700; text-align:right;}

/* MTN — brand yellow */
.bundle-card.provider-mtn{--c1:#ffd400; --c2:#ffbe00; --ink:#141414; --pill-bg:#0f172a; --pill-fg:#ffd400;
  --card-border:#f2c200; --glow:rgba(255,190,0,0.22); --glow-h:rgba(255,190,0,0.38); --glow-a:rgba(255,190,0,0.42);}
/* Telecel — brand red */
.bundle-card.provider-telecel{--c1:#f43f5e; --c2:#e11d48; --ink:#ffffff; --ink-soft:rgba(255,255,255,0.85);
  --ink-v:rgba(255,255,255,0.8); --pill-bg:#ffffff; --pill-fg:#e11d48; --card-border:#fb7185;
  --glow:rgba(244,63,94,0.28); --glow-h:rgba(244,63,94,0.45); --glow-a:rgba(244,63,94,0.5);
  --share-bg:rgba(255,255,255,0.22);}
/* AirtelTigo — red → blue gradient */
.bundle-card.provider-airteltigo{--c1:#ef4444; --c2:#2563eb; --ink:#ffffff; --ink-soft:rgba(255,255,255,0.85);
  --ink-v:rgba(255,255,255,0.8); --pill-bg:#ffffff; --pill-fg:#1d4ed8; --card-border:#93c5fd;
  --glow:rgba(239,68,68,0.28); --glow-h:rgba(37,99,235,0.45); --glow-a:rgba(59,130,246,0.5);
  --share-bg:rgba(255,255,255,0.22);}

.bundle-share-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:6px;}
.bundle-share-row .btn{padding:8px 14px; border-radius:10px; font-size:12px;}
.product-meta{display:grid; gap:8px; margin-bottom:18px; font-size:14px;}
.tag{display:inline-block; font-size:11px; padding:4px 10px; border-radius:999px; background:#e0f2fe; color:#0284c7; font-weight:700;}

/* ---------- Forms ---------- */
input,select,textarea{width:100%; padding:12px; border-radius:10px; border:1px solid var(--border);
  background:#f8fafc; margin:6px 0; outline:none; font-size:14px; color:var(--text);}
input:focus,select:focus,textarea:focus{border-color:var(--accent2); box-shadow:0 0 0 3px #e0f2fe;}
label{font-size:13px; font-weight:600; color:var(--ash-dark);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; margin-top:16px; background:white; border-radius:12px;
  overflow:hidden; border:1px solid var(--border);}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid #f1f5f9; font-size:13px; vertical-align:top;}
th{background:#f8fafc; color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:0.4px;}
tr:last-child td{border-bottom:none;}

/* ---------- Badges / status ---------- */
.badge{font-size:11px; padding:4px 10px; border-radius:999px; background:#e0f2fe; color:#0284c7; font-weight:700; white-space:nowrap;}
.badge.ok{background:#dcfce7; color:#166534;}
.badge.warn{background:#fef3c7; color:#92400e;}
.badge.bad{background:#fee2e2; color:#991b1b;}
.badge.gray{background:#f1f5f9; color:#475569;}
.status-pill{font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; text-transform:capitalize;}
.st-pending{background:#fef3c7; color:#92400e;}
.st-paid{background:#dbeafe; color:#1d4ed8;}
.st-fulfilling{background:#e0e7ff; color:#4338ca;}
.st-fulfilled{background:#dcfce7; color:#166534;}
.st-failed{background:#fee2e2; color:#991b1b;}
.st-rejected{background:#f1f5f9; color:#475569;}
.st-refund_required{background:#fef3c7; color:#b45309;}
.st-refunded{background:#ffe4e6; color:#9f1239;}
.comm-badge{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 8px;
  border-radius:999px; background:#fef9c3; color:#854d0e; border:1px solid #fde68a; white-space:nowrap;}
.comm-badge.credited{background:#dcfce7; color:#166534; border-color:#bbf7d0;}
.agent-tag{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 8px;
  border-radius:999px; background:#e0e7ff; color:#4338ca; border:1px solid #c7d2fe; white-space:nowrap;}

/* ---------- Toast ---------- */
#click-toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:#0f172a; color:white;
  padding:10px 20px; border-radius:999px; font-size:13px; font-weight:600; z-index:99999; display:none;
  box-shadow:0 10px 30px rgba(0,0,0,0.3); max-width:90vw; text-align:center;}

/* ---------- Banners ---------- */
.banner{padding:14px 16px; border-radius:12px; margin:12px 0; font-size:13px; border:1px solid;}
.banner.warn{background:#fffbeb; border-color:#fde68a; color:#92400e;}
.banner.bad{background:#fef2f2; border-color:#fecaca; color:#991b1b;}
.banner.ok{background:#f0fdf4; border-color:#bbf7d0; color:#166534;}
.banner.info{background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8;}

/* ---------- Wallet / receipt ---------- */
.wallet-box{background:var(--card); padding:24px; border-radius:16px; max-width:760px; margin:16px auto;
  border:1px solid var(--border); text-align:left; box-shadow:0 10px 30px rgba(148,163,184,0.08);}
.receipt{background:#e0f2fe; border:1px solid #bae6fd; padding:16px; border-radius:12px; text-align:left; line-height:1.7;}

/* ---------- Footer ---------- */
footer{padding:30px 4%; text-align:center; font-size:12px; color:var(--muted); border-top:1px solid var(--border);
  background:#f8fafc; line-height:1.8;}

/* ---------- Admin layout ---------- */
.admin-shell{display:flex; min-height:100vh; background:var(--bg2);}
.admin-side{width:230px; background:#0f172a; color:#e2e8f0; padding:20px 0; flex-shrink:0;}
.admin-side .brand{display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800;
  padding:0 20px 18px; color:white;}
.admin-side .brand-logo{background:#fff; border-radius:8px; padding:4px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.admin-side .brand-logo img{height:28px; width:auto; display:block;}
.admin-side a{display:block; padding:11px 20px; color:#cbd5e1; text-decoration:none; font-size:14px; cursor:pointer; border-left:3px solid transparent;}
.admin-side a:hover{background:#1e293b; color:white;}
.admin-side a.active{background:#1e293b; color:white; border-left-color:var(--accent2);}
.admin-main{flex:1; padding:26px; min-width:0;}
.admin-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px;}
.stat{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:0 6px 20px rgba(148,163,184,0.08);}
.stat .num{font-size:26px; font-weight:800; color:#0f172a;}
.stat .lbl{font-size:12px; color:var(--muted); margin-top:4px;}
.panel{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; margin-bottom:20px;
  box-shadow:0 6px 20px rgba(148,163,184,0.08);}
.panel h3{color:#0f172a; margin-bottom:12px; font-size:16px;}
.row-actions{display:flex; gap:6px; flex-wrap:wrap;}
.table-wrap{overflow-x:auto;}
.hidden{display:none !important;}
.muted{color:var(--muted); font-size:12px;}
.filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.filters input,.filters select{width:auto; margin:0;}
.spinner{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.5);
  border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; vertical-align:-2px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Login screen ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--bg1);}
.login-card{width:100%; max-width:380px; background:var(--card); border-radius:20px; padding:30px;
  border:1px solid var(--border); box-shadow:0 20px 60px rgba(2,132,199,0.15);}

/* ---------- Share feature ---------- */
.share-btn{display:inline-flex; align-items:center; gap:7px; cursor:pointer;}
.share-btn svg{width:17px; height:17px; fill:#0f172a;}
.btn-secondary.share-btn{color:var(--ash-dark);}
/* Build 40: WhatsApp Channel + header Share — real, clickable with focus states. */
#whatsapp-link{display:inline-flex; align-items:center; gap:5px; color:var(--accent); font-weight:700;
  text-decoration:none; border-radius:8px; padding:2px 6px; transition:color .15s ease, background-color .15s ease, transform .1s ease;}
#whatsapp-link:hover{color:var(--accent2); background:rgba(56,189,248,0.12); text-decoration:none;}
#whatsapp-link:active{transform:scale(0.95);}
#whatsapp-link:focus{outline:none;}
#whatsapp-link:focus-visible{outline:2px solid var(--accent2); outline-offset:2px; border-radius:8px;}
#foot-wa{color:var(--accent); font-weight:700; text-decoration:none; border-radius:8px; padding:2px 6px;
  transition:color .15s ease, background-color .15s ease, transform .1s ease;}
#foot-wa:hover{color:var(--accent2); background:rgba(56,189,248,0.12); text-decoration:none;}
#foot-wa:active{transform:scale(0.95);}
#foot-wa:focus{outline:none;}
#foot-wa:focus-visible{outline:2px solid var(--accent2); outline-offset:2px; border-radius:8px;}
#topbar-share{color:var(--ash-dark); border-radius:6px; padding:2px 6px; transition:color .15s ease, transform .1s ease;}
#topbar-share:hover{color:var(--accent); text-decoration:underline;}
#topbar-share:active{transform:scale(0.96);}
#topbar-share:focus{outline:none;}
#topbar-share:focus-visible{outline:2px solid var(--accent2); outline-offset:2px;}
.share-btn:focus-visible{outline:2px solid var(--accent2); outline-offset:2px; border-radius:6px;}
.share-overlay{position:fixed; inset:0; background:rgba(15,23,42,0.55); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:20px; z-index:100000;}
.share-overlay.show{display:flex; animation:fadeIn 0.2s ease;}
.share-modal{background:var(--card); width:100%; max-width:420px; border-radius:22px; padding:26px;
  border:1px solid var(--border); box-shadow:0 30px 80px rgba(0,0,0,0.3); max-height:90vh; overflow-y:auto;
  animation:pop 0.22s ease;}
.share-modal h3{color:#0f172a; font-size:20px; margin-bottom:4px; text-align:center;}
.share-modal .share-sub{text-align:center; color:var(--muted); font-size:13px; margin-bottom:18px;}
.share-close{float:right; background:transparent; border:none; font-size:22px; line-height:1; cursor:pointer;
  color:var(--muted); padding:2px; margin:-6px -6px 0 0;}
.share-close:hover{color:#0f172a;}
.share-native{width:100%; margin-bottom:16px;}
.share-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.share-opt{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border-radius:14px;
  border:1px solid var(--border); background:#f8fafc; cursor:pointer; transition:0.15s; font-size:12px;
  font-weight:600; color:var(--ash-dark); text-align:center;}
.share-opt:hover{transform:translateY(-2px); border-color:var(--accent2); background:#e0f2fe; color:var(--accent);}
.share-opt:active{transform:scale(0.96);}
.share-opt .ico{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;}
.share-opt .ico svg{width:20px; height:20px; fill:#fff;}
.ico-wa{background:#25d366;} .ico-fb{background:#1877f2;} .ico-x{background:#0f172a;}
.ico-tg{background:#229ed9;} .ico-em{background:var(--accent);} .ico-cp{background:#64748b;}
.share-copy{display:flex; gap:8px; margin-top:16px; align-items:center;}
.share-copy input{flex:1; margin:0; font-size:12px; background:#f1f5f9; color:var(--muted);}
.share-copy .btn{padding:12px 16px; border-radius:10px;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(0.97);}to{opacity:1; transform:none;}}

@media(max-width:840px){
  .product-section,.info-panel,.form-grid{grid-template-columns:1fr;}
  .package-buttons{grid-template-columns:repeat(2,1fr);}
  .bundle-grid.compact{grid-template-columns:repeat(2,1fr);}
  .admin-shell{flex-direction:column;}
  .admin-side{width:100%; display:flex; overflow-x:auto;}
  .admin-side a{border-left:none; white-space:nowrap;}
  header{justify-content:center;}
}

/* ---------- Cinematic Home hero ---------- */
.cinematic-hero{position:relative; overflow:hidden; color:#eef2f0; padding:64px 4% 72px;
  background:radial-gradient(1200px 700px at 74% 4%, #123319 0%, rgba(18,51,25,0) 55%),
             radial-gradient(900px 600px at 12% 84%, #0e1f30 0%, rgba(14,31,48,0) 54%),
             linear-gradient(160deg,#060b09 0%, #0b1710 45%, #050906 100%);}
.cinematic-hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 45%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);}
.cin-bg{position:absolute; inset:0; overflow:hidden;}
.cin-grid{position:absolute; inset:0; opacity:0.10;
  background-image:linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 75%);
          mask-image:radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 75%);}
.orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:0.5; mix-blend-mode:screen;}
.orb-1{width:420px; height:420px; background:#f43f5e; top:-120px; right:4%; animation:orbFloat 14s ease-in-out infinite;}
.orb-2{width:360px; height:360px; background:#2563eb; bottom:-120px; left:2%; animation:orbFloat 17s ease-in-out infinite reverse;}
.orb-3{width:300px; height:300px; background:#ffd400; top:30%; left:40%; opacity:0.25; animation:orbFloat 20s ease-in-out infinite;}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,-26px) scale(1.12);}}

/* drifting clouds (CSS shapes) */
.cloud{position:absolute; width:120px; height:40px; background:rgba(255,255,255,0.06); border-radius:999px;
  filter:blur(6px); animation:cloudDrift linear infinite;}
.cloud::before,.cloud::after{content:""; position:absolute; background:inherit; border-radius:50%;}
.cloud::before{width:46px; height:46px; top:-20px; left:28px;}
.cloud::after{width:32px; height:32px; top:-12px; left:66px;}
.c1{top:16%; left:-140px; animation-duration:52s;}
.c2{top:44%; left:-160px; animation-duration:70s; animation-delay:-22s; transform:scale(1.4);}
.c3{top:70%; left:-120px; animation-duration:60s; animation-delay:-40s; transform:scale(0.8);}
@keyframes cloudDrift{from{transform:translateX(0);}to{transform:translateX(calc(100vw + 320px));}}

/* floating particles */
.particle{position:absolute; width:6px; height:6px; border-radius:50%; background:#fff; opacity:0.35;
  animation:floatP 7s ease-in-out infinite;}
.p1{top:20%; left:12%;} .p2{top:36%; left:70%; animation-delay:-1s;} .p3{top:60%; left:24%; animation-delay:-2s;}
.p4{top:24%; left:52%; animation-delay:-3s;} .p5{top:76%; left:60%; animation-delay:-4s;} .p6{top:50%; left:90%; animation-delay:-5s;}
.p7{top:14%; left:84%; animation-delay:-2.5s;} .p8{top:66%; left:44%; animation-delay:-5.5s;}
@keyframes floatP{0%,100%{transform:translateY(0);opacity:0.25;}50%{transform:translateY(-22px);opacity:0.7;}}

.cin-content{position:relative; z-index:3; display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;}
.cin-left{max-width:560px;}
.cin-eyebrow{display:inline-block; font-size:12px; font-weight:800; letter-spacing:2px; color:#a7f3d0;
  background:rgba(16,185,129,0.14); border:1px solid rgba(16,185,129,0.35); padding:6px 14px; border-radius:999px;
  margin-bottom:16px; text-transform:uppercase;}
.cin-left h1{font-size:46px; line-height:1.08; font-weight:800; color:#ffffff; margin-bottom:18px;}
.cin-left .grad{background:linear-gradient(90deg,#38bdf8,#a7f3d0,#fbbf24); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;}
.cin-left p{font-size:17px; line-height:1.6; color:#c7d2cf; margin-bottom:26px;}
.cin-cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px;}
.cin-cta .btn-secondary{background:rgba(255,255,255,0.08); color:#eef2f0; border-color:rgba(255,255,255,0.22); box-shadow:none;}
.cin-cta .btn-secondary:hover{background:rgba(255,255,255,0.16);}
.cin-cta .share-btn svg{fill:#eef2f0;}
.cin-trust{display:flex; flex-wrap:wrap; gap:10px;}
.trust-chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#d7e3df;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); padding:7px 12px; border-radius:999px;}
.trust-chip b{font-size:14px;}

/* Phone */
.cin-right{display:flex; align-items:center; justify-content:center;}
.phone-wrap{position:relative; width:300px;}
.phone-glow{position:absolute; inset:-70px; border-radius:50%; background:radial-gradient(circle,rgba(56,189,248,0.35) 0%,rgba(56,189,248,0) 60%);
  filter:blur(10px); animation:glowPulse 5s ease-in-out infinite; z-index:0;}
@keyframes glowPulse{0%,100%{opacity:0.5; transform:scale(1);}50%{opacity:1; transform:scale(1.08);}}
/* data stream rising from phone to cloud */
.data-stream{position:absolute; top:-30px; left:50%; width:2px; height:120px; transform:translateX(-50%);
  z-index:3; opacity:0.8;}
.data-stream i{position:absolute; left:0; top:0; width:6px; height:6px; border-radius:50%;
  background:#a7f3d0; box-shadow:0 0 10px #38bdf8; animation:streamUp 2.4s linear infinite;}
.data-stream i:nth-child(2){animation-delay:.4s; background:#38bdf8;}
.data-stream i:nth-child(3){animation-delay:.8s; background:#fbbf24;}
.data-stream i:nth-child(4){animation-delay:1.2s; background:#a7f3d0;}
.data-stream i:nth-child(5){animation-delay:1.6s; background:#f43f5e;}
@keyframes streamUp{from{transform:translateY(0); opacity:0;}10%{opacity:1;}to{transform:translateY(-120px); opacity:0;}}

.phone{position:relative; z-index:2; width:300px; height:600px; border-radius:46px; padding:12px;
  background:linear-gradient(160deg,#1a1f1c,#0c100e); border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 30px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.06);
  animation:phoneFloat 6s ease-in-out infinite;}
@keyframes phoneFloat{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-16px) rotate(1deg);}}
.phone-notch{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:26px; border-radius:999px;
  background:#0c100e; z-index:5;}
.phone-screen{position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden;
  background:linear-gradient(180deg,#0d1a14 0%,#0a1013 100%); display:flex; flex-direction:column; padding:44px 16px 14px;}

.ps-statusbar{display:flex; justify-content:space-between; font-size:11px; color:#9fb3ad; margin-bottom:10px;}
.ps-top{display:flex; align-items:center; gap:8px; margin-bottom:16px;}
.ps-logo{width:28px; height:28px; border-radius:7px; object-fit:cover;}
.ps-brand{font-size:13px; font-weight:800; color:#fff; letter-spacing:0.5px;}
.ps-select{display:flex; gap:6px; margin-bottom:14px;}
.ps-provider{font-size:11px; font-weight:700; color:#9fb3ad; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1); padding:6px 10px; border-radius:999px;}
.ps-provider.active{background:linear-gradient(90deg,#f43f5e,#e11d48); color:#fff; border-color:transparent;}
.ps-network{background:linear-gradient(180deg,#ffd400,#ffbe00); color:#141414; border-radius:16px; padding:14px; margin-bottom:12px;}
.ps-size{font-size:30px; font-weight:800; display:block;}
.ps-label{font-size:12px; font-weight:700; color:rgba(20,20,20,0.6);}
.ps-buy{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:12px; margin-bottom:12px;}
.ps-row{display:flex; justify-content:space-between; font-size:12px; color:#9fb3ad; margin-bottom:8px;}
.ps-num{font-weight:700; color:#eef2f0; letter-spacing:1px;}
.ps-price{font-size:20px; font-weight:800; color:#fff; margin-bottom:10px;}
.ps-paybtn{background:linear-gradient(90deg,#0284c7,#38bdf8); color:#fff; text-align:center; font-weight:800; font-size:14px;
  padding:11px; border-radius:12px; box-shadow:0 8px 18px rgba(2,132,199,0.4);}
.ps-loading{margin-top:auto;}
.ps-bar{height:6px; border-radius:999px; background:rgba(255,255,255,0.1); overflow:hidden; margin-bottom:8px;}
.ps-fill{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#a7f3d0,#38bdf8,#fbbf24); animation:fillBar 4s ease-in-out infinite;}
@keyframes fillBar{0%{width:0;}55%{width:82%;}90%{width:100%;}100%{width:100%;}}
.ps-loading-label{font-size:11px; color:#9fb3ad; font-weight:600;}
.phone-shadow{position:absolute; bottom:-26px; left:50%; transform:translateX(-50%); width:220px; height:26px;
  background:radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,0.6), transparent 70%); z-index:1;}

@media(max-width:840px){
  .cin-content{grid-template-columns:1fr; gap:40px; text-align:center;}
  .cin-left{max-width:none;}
  .cin-left p{margin-left:auto; margin-right:auto; max-width:34em;}
  .cin-cta,.cin-trust{justify-content:center;}
  .cin-left h1{font-size:34px;}
  .phone{width:260px; height:520px;}
  .phone-wrap{width:260px;}
  .cin-right{order:-1;}
}

/* ---------- Trust strip ---------- */
.trust-strip{background:#0a0f0d; border-block:1px solid rgba(255,255,255,0.08); overflow:hidden; padding:16px 0;}
.trust-track{display:flex; gap:40px; white-space:nowrap; animation:trackScroll 28s linear infinite; width:max-content;}
@keyframes trackScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.tt-item{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#d7e3df; letter-spacing:0.3px;}
.tt-dot{width:20px; height:20px; border-radius:50%; display:inline-block; box-shadow:0 0 12px currentColor;}
.dot-telecel{background:#f43f5e; color:#f43f5e;}
.dot-mtn{background:#ffd400; color:#ffd400;}
.dot-at{background:linear-gradient(135deg,#ef4444,#2563eb); color:#ef4444;}

/* ---------- Sections shared ---------- */
.section h2{text-align:center; color:#0f172a;}
.section > p{color:#64748b; margin-bottom:28px;}

/* How it works */
.steps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1080px; margin:0 auto;}
.step{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px; position:relative;
  box-shadow:0 10px 30px rgba(148,163,184,0.1); transition:transform .15s;}
.step:hover{transform:translateY(-4px);}
.step-num{position:absolute; top:14px; right:16px; font-size:12px; font-weight:800; color:#cbd5e1;}
.step-icon{width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#e0f2fe,#bae6fd);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:12px;}
.step h3{font-size:16px; color:#0f172a; margin-bottom:6px;}
.step p{font-size:13px; color:var(--muted); line-height:1.5;}

/* Features */
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:0 auto;}
.feature{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:24px;
  box-shadow:0 10px 30px rgba(148,163,184,0.1); text-align:left; transition:transform .15s;}
.feature:hover{transform:translateY(-4px);}
.f-ico{display:inline-flex; width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,#e0f2fe,#bae6fd);
  align-items:center; justify-content:center; font-size:20px; margin-bottom:12px;}
.feature h3{font-size:16px; color:#0f172a; margin-bottom:6px;}
.feature p{font-size:13px; color:var(--muted); line-height:1.5;}

/* Stats */
.stats-section{background:linear-gradient(160deg,#060b09,#0b1710 55%,#060b09);}
.stats-section h2,.stats-section > p{color:#fff;}
.stats-wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:960px; margin:0 auto; text-align:center;}
.stat-big{padding:18px;}
.sb-num{font-size:44px; font-weight:800; line-height:1; background:linear-gradient(90deg,#38bdf8,#a7f3d0,#fbbf24);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.sb-lbl{margin-top:8px; font-size:13px; font-weight:600; color:#9fb3ad;}

/* Testimonials */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:0 auto;}
.testi{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:24px;
  box-shadow:0 10px 30px rgba(148,163,184,0.1);}
.testi p{font-size:14px; color:#334155; line-height:1.6; margin-bottom:16px;}
.testi-who{display:flex; align-items:center; gap:12px;}
.t-ava{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#0284c7,#38bdf8); color:#fff;
  font-weight:800; display:flex; align-items:center; justify-content:center; font-size:18px;}
.testi-who strong{display:block; font-size:14px; color:#0f172a;}
.t-role{font-size:12px; color:var(--muted);}

/* FAQ accordion */
.faq-list{max-width:760px; margin:0 auto; display:grid; gap:12px;}
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  box-shadow:0 6px 20px rgba(148,163,184,0.08);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:18px 20px; font-size:15px; font-weight:700;
  color:#0f172a; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-x{font-size:20px; color:var(--accent); transition:transform .2s; line-height:1;}
.faq-item.open .faq-x{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 20px;}
.faq-item.open .faq-a{max-height:300px; padding-bottom:18px;}
.faq-a p{font-size:14px; color:var(--muted); line-height:1.6;}

/* Footer */
.site-footer{background:#070c0a; color:#c7d2cf; padding:48px 4% 24px; border-top:1px solid rgba(255,255,255,0.08);}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; max-width:1080px; margin:0 auto 30px;}
.f-brand .logo{margin-bottom:14px;}
.f-brand p{font-size:13px; color:#8ea39d; line-height:1.6; margin-bottom:16px; max-width:300px;}
.footer-badges{display:flex; gap:8px; flex-wrap:wrap;}
.footer-badges span{font-size:11px; font-weight:700; color:#d7e3df; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12); padding:5px 10px; border-radius:999px;}
.f-col h4{font-size:13px; color:#fff; text-transform:uppercase; letter-spacing:1px; margin-bottom:14px;}
.f-col a{display:block; color:#9fb3ad; font-size:13px; margin-bottom:10px; text-decoration:none; transition:color .15s;}
.f-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08); padding-top:20px; text-align:center; font-size:12px;
  color:#6b7f79; display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}

.site-menu-toggle{width:44px;height:44px;flex:0 0 44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.06);color:#f8fafc;cursor:pointer;}
.site-menu-toggle span{display:block;width:21px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s;}
.site-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg);}
.site-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.site-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.site-menu-toggle:focus-visible,.site-menu-close:focus-visible,.site-navigation a:focus-visible{outline:3px solid #0A9CFF;outline-offset:3px;}
.site-menu-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.52);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}
.site-menu-backdrop.is-open{opacity:1;visibility:visible;}
.site-navigation{position:fixed;top:0;right:0;bottom:0;z-index:1001;width:min(320px,86vw);padding:20px 18px max(20px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:#fff;color:#0A1931;box-shadow:-18px 0 48px rgba(0,0,0,.22);transform:translateX(105%);transition:transform .3s ease;visibility:hidden;display:flex;flex-direction:column;gap:4px;}
.site-navigation.is-open{transform:translateX(0);visibility:visible;}
.site-navigation-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 16px;margin-bottom:8px;border-bottom:1px solid #e5eaf1;}
.site-navigation-title{font-size:15px;font-weight:800;color:#0A1931;}
.site-menu-close{width:40px;height:40px;border:0;border-radius:10px;background:#f1f5f9;color:#0A1931;font-size:27px;line-height:1;cursor:pointer;}
.site-navigation a{display:flex;align-items:center;min-height:46px;margin:0;padding:10px 12px;border-radius:10px;color:#26384f;text-decoration:none;font-size:15px;font-weight:650;transition:background .16s,color .16s,transform .16s;}
.site-navigation a:hover{background:#eaf5ff;color:#087fc9;transform:translateX(2px);}
.site-navigation a[style*="display:none"]{display:none!important;}
.site-navigation .admin-link{margin-top:8px;border-top:1px solid #e5eaf1;border-radius:0;padding-top:16px;}
body.site-menu-open{overflow:hidden;}
.agent-menu-toggle{display:none;}
.agent-tab-active{background:#0A9CFF!important;color:#fff!important;border-color:#0A9CFF!important;}
.agent-tab-panel{min-width:0;}
.agent-quick-amounts button{flex:1 1 62px;}
.agent-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0;border-bottom:1px solid var(--border);padding-bottom:8px;background:#0A1931;border-radius:12px;padding:4px;}
.agent-tabs [data-agent-tab]{border-radius:9px;}

@media(max-width:840px){
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .features-grid,.testi-grid,.stats-wrap{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:700px){
  header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;}
  .logo{font-size:clamp(16px,5vw,24px);gap:7px;min-width:0;}
  .logo img{height:34px;}
  .h-left{min-width:0;}
  .agent-tabs{display:none!important;position:relative;flex-direction:column;flex-wrap:nowrap!important;gap:4px!important;padding:8px!important;margin:6px 0 12px!important;background:#0A1931;border:1px solid rgba(10,156,255,.25)!important;border-radius:12px;}
  .agent-tabs.agent-tabs-open{display:flex!important;}
  .agent-tabs [data-agent-tab]{width:100%;min-height:42px;text-align:left;}
  .agent-menu-toggle{width:100%;height:auto;min-height:44px;flex-direction:row;justify-content:flex-start;gap:5px;padding:8px 12px;background:#0A1931;color:#fff;border-color:rgba(10,156,255,.35);}
  .agent-menu-toggle .agent-menu-label{margin-left:9px;font-size:14px;font-weight:700;}
  .agent-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #agent-dashboard-extra>div:nth-of-type(2){grid-template-columns:1fr!important;}
  #agent-dashboard-extra>div:nth-of-type(3){flex-wrap:wrap;}
  #agent-dashboard-extra>div:nth-of-type(3)>button{flex:1 1 125px!important;}
}/* ====== DESKTOP vs MOBILE VISION - YOUR CONCEPT ====== */
@media(min-width: 769px){
  header, .top-bar, .section, .cinematic-hero, .site-footer, footer{padding-left:2% !important; padding-right:2% !important;}
  .hero{padding:80px 6% 50px !important;}
  .hero h1{font-size:48px !important;}
  .product-section{grid-template-columns:1.4fr 0.9fr !important;}
  .bundle-grid{grid-template-columns:repeat(4, 1fr) !important;}
  .steps-grid{grid-template-columns:repeat(4, 1fr) !important;}
  .features-grid{grid-template-columns:repeat(3, 1fr) !important;}
  .mobile-only{display:none !important;}
}
@media(max-width: 768px){
  header, .top-bar, .section, .cinematic-hero, .site-footer, footer{padding-left:16px !important; padding-right:16px !important;}
  .hero{padding:40px 16px 30px !important;}
  .hero h1{font-size:28px !important;}
  .hero p{font-size:15px !important;}
  .product-section, .steps-grid, .features-grid, .testi-grid, .stats-wrap, .footer-grid, .cin-content, .info-panel{grid-template-columns:1fr !important;}
  .bundle-grid{grid-template-columns:repeat(2, 1fr) !important;}
  .top-bar.desktop-only, .desktop-only{display:none !important;}
  .mobile-only{display:block !important;}
  .cin-left h1{font-size:32px !important;}
  .cin-right{order:-1;}
}
/* FIX LEFT SHIFT - CENTER EVERYTHING */
header{
  width:100% !important;
  max-width:100% !important;
  justify-content:space-between !important;
  padding-left:4% !important;
  padding-right:4% !important;
  margin:0 auto !important;
}
.cinematic-hero{
  display:flex !important;
  justify-content:center !important;
  padding-left:4% !important;
  padding-right:4% !important;
}
.cin-content{
  max-width:1280px !important;
  width:100% !important;
  margin:0 auto !important;
  justify-content:center !important;
}
.cin-left{
  max-width:100% !important;
}
.cin-right{
  justify-content:center !important;
}

/* DESKTOP CENTER */
@media(min-width: 769px){
  .cin-content{
    grid-template-columns:1.1fr 0.9fr !important;
    gap:60px !important;
  }
}/* ===== MAKE WIDE ON DESKTOP - FULL BLEED ===== */
@media(min-width: 769px){
  .cinematic-hero{
    padding-left:2% !important;
    padding-right:2% !important;
  }
  .cin-content{
    max-width:95% !important;
    width:95% !important;
    gap:80px !important;
  }
  .cin-left h1{
    font-size:52px !important;
  }
  .section{
    max-width:95% !important;
    padding-left:2% !important;
    padding-right:2% !important;
  }
  .steps-grid, .features-grid, .testi-grid, .stats-wrap, .footer-grid{
    max-width:100% !important;
  }
  .product-section{
    max-width:100% !important;
    grid-template-columns:1.6fr 0.8fr !important;
  }
  .bundle-grid{
    grid-template-columns:repeat(5, 1fr) !important;
  }
}/* === FINAL 100% FULL SCREEN DESKTOP === */
@media(min-width: 769px){
  .cin-content{
    max-width:100% !important;
    width:100% !important;
  }
}
.site-navigation{
  transition: transform 0.4s ease !important;
  transform: translateX(110%) !important;
}
.site-navigation.is-open{
  transform: translateX(0) !important;
}
.site-menu-backdrop{
  transition: opacity 0.35s ease !important;
}
html, body{
  overflow-x:hidden !important;
  margin:0 !important;
  padding:0 !important;
}/* =========================================
   INSTANTDATAPLUG RESPONSIVE LAYOUT FIX
   Desktop + Tablet + Mobile
   ========================================= */

/* 1. Consistent viewport and sizing */
html {
  width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* 2. Prevent children from forcing layouts wider */
img,
video,
iframe {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

button,
.btn {
  touch-action: manipulation;
}

/* 3. Full-width main sections */
header,
.top-bar,
.hero,
.section,
.cinematic-hero,
.site-footer,
footer {
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* 4. Keep the cinematic hero content centered
      while using the available desktop width */
.cin-content {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  min-width: 0;
}

.cin-left,
.cin-right {
  min-width: 0;
}

/* 5. Responsive product layout */
.product-section {
  width: 100%;
  min-width: 0;
}

.product-section > *,
.card,
.panel,
.info-card,
.stat {
  min-width: 0;
}

.bundle-grid {
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

.bundle-grid.compact {
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 110px), 1fr));
}

/* 6. Dashboard tables scroll inside their containers */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  min-width: 600px;
}

/* 7. Admin dashboard uses available desktop space */
.admin-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.admin-main {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-main > * {
  max-width: 100%;
}

/* 8. Prevent long text from breaking cards */
.card,
.panel,
.stat,
.bundle-card,
.info-card,
.feature,
.step,
.testi {
  overflow-wrap: anywhere;
}

/* 9. Tablet and mobile */
@media (max-width: 768px) {
  header {
    padding: 12px 16px !important;
    gap: 10px;
  }

  .top-bar,
  .section,
  .cinematic-hero,
  .site-footer,
  footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero {
    padding: 40px 16px 30px !important;
  }

  .hero h1 {
    font-size: clamp(26px, 6vw, 36px) !important;
    overflow-wrap: anywhere;
  }

  .cinematic-hero {
    padding-top: 44px;
    padding-bottom: 48px;
  }

  .cin-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .cin-left h1 {
    font-size: clamp(30px, 7vw, 42px) !important;
    overflow-wrap: anywhere;
  }

  .cin-left p {
    font-size: 15px;
  }

  .cin-right {
    max-width: 100%;
  }

  .phone-wrap {
    width: min(260px, 100%);
  }

  .phone {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 2;
  }

  .product-section,
  .info-panel,
  .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .steps-grid,
  .features-grid,
  .testi-grid,
  .stats-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bundle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bundle-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-shell {
    flex-direction: column;
  }

  .admin-side {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-side a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .admin-main {
    width: 100%;
    padding: 16px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel,
  .card {
    padding: 16px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 10. Small mobile phones */
@media (max-width: 480px) {
  header {
    padding: 10px 12px !important;
  }

  .logo {
    font-size: clamp(15px, 4.5vw, 20px);
    gap: 6px;
  }

  .logo img {
    height: 30px;
  }

  .top-bar,
  .section,
  .cinematic-hero,
  .site-footer,
  footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .steps-grid,
  .features-grid,
  .testi-grid,
  .stats-wrap,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .bundle-grid,
  .bundle-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .bundle-card {
    padding: 11px 10px;
    min-height: 130px;
  }

  .bundle-card .bc-size {
    font-size: clamp(22px, 7vw, 30px);
  }

  .bundle-card .bc-price {
    font-size: clamp(17px, 5vw, 21px);
  }

  .admin-main {
    padding: 12px;
  }

  .stat-grid,
  .agent-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stat {
    padding: 12px;
  }

  .stat .num {
    font-size: 21px;
  }

  .share-modal {
    padding: 20px 16px;
    max-height: 85dvh;
  }

  .share-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .share-opt {
    padding: 12px 5px;
  }

  .share-copy {
    flex-wrap: wrap;
  }

  .share-copy input {
    min-width: 0;
  }

  .cin-cta .btn {
    max-width: 100%;
  }
}

/* 11. Respect users who prefer reduced motion */
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}/* =========================================
   INSTANTDATAPLUG — FINAL LAYOUT CORRECTIONS
   Desktop | Tablet | Mobile
   ========================================= */

/* Base sizing */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

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

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

button,
input,
select,
textarea {
  max-width: 100%;
  min-width: 0;
}

/* Use the full available viewport width */
header,
.top-bar,
.hero,
.section,
.cinematic-hero,
.site-footer,
footer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Keep content centered without unnecessarily narrowing sections */
.cin-content {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  min-width: 0;
}

.cin-left,
.cin-right,
.product-section,
.product-section > *,
.card,
.panel,
.info-card {
  min-width: 0;
}

/* Bundle cards */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 160px), 1fr)
  );
  gap: 12px;
}

.bundle-grid.compact {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 110px), 1fr)
  );
}

/* Tables scroll inside their own container */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  min-width: 600px;
}

/* Prevent long text from stretching layouts */
.card,
.panel,
.stat,
.bundle-card,
.info-card,
.feature,
.step,
.testi,
.admin-main {
  overflow-wrap: anywhere;
}

/* Desktop */
@media (min-width: 1024px) {
  .cinematic-hero {
    padding-left: 3%;
    padding-right: 3%;
  }

  .cin-content {
    max-width: 100%;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(30px, 5vw, 80px);
  }

  .cin-left {
    max-width: 760px;
  }

  .product-section {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  }

  .steps-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .features-grid,
  .testi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats-wrap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }

  .mobile-only {
    display: none !important;
  }
}

/* Tablets and mobile phones */
@media (max-width: 1023px) {
  .product-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .cin-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .cin-left {
    max-width: 100%;
  }

  .cin-right {
    order: -1;
    max-width: 100%;
  }

  .phone-wrap {
    width: min(260px, 100%);
  }

  .phone {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 2;
  }

  .admin-shell {
    flex-direction: column;
  }

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

  .admin-side a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .admin-main {
    width: 100%;
    padding: 16px;
  }

  .top-bar.desktop-only,
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  header {
    justify-content: space-between !important;
    flex-wrap: nowrap;
    padding: 12px 16px !important;
    gap: 10px;
  }

  .logo {
    min-width: 0;
    font-size: clamp(15px, 4.5vw, 21px);
  }

  .logo img {
    height: 32px;
  }

  .hero {
    padding: 40px 16px 30px !important;
  }

  .hero h1 {
    font-size: clamp(26px, 6vw, 36px) !important;
    overflow-wrap: anywhere;
  }

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

  .section,
  .cinematic-hero,
  .site-footer,
  footer,
  .top-bar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cinematic-hero {
    padding-top: 42px;
    padding-bottom: 48px;
  }

  .cin-left h1 {
    font-size: clamp(29px, 7vw, 40px) !important;
  }

  .cin-left p {
    font-size: 15px;
  }

  .cin-cta {
    justify-content: center;
  }

  .info-panel,
  .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .steps-grid,
  .features-grid,
  .testi-grid,
  .stats-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bundle-grid,
  .bundle-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-grid,
  .agent-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .share-modal {
    width: 100%;
    max-height: 85dvh;
    overflow-y: auto;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .section,
  .cinematic-hero,
  .site-footer,
  footer,
  .top-bar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .bundle-card {
    padding: 10px 8px;
  }

  .bundle-card .bc-size {
    font-size: 22px;
  }

  .bundle-card .bc-price {
    font-size: 17px;
  }

  .footer-grid,
  .steps-grid,
  .features-grid,
  .testi-grid,
  .stats-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------- Press "dip" animation on every button (main website) ---------- */
button,[role="button"],.btn,.provider-btn,.share-btn,a.btn,input[type="button"],input[type="submit"],summary{
  transition:transform .12s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease,opacity .15s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; cursor:pointer;
}
button:disabled,.btn:disabled{cursor:not-allowed;}
button:not(:disabled):active,[role="button"]:active,.btn:not(:disabled):active,.provider-btn:active,.share-btn:active,a.btn:active,input[type="button"]:active,input[type="submit"]:active{
  transform:scale(.94);
}
@media (prefers-reduced-motion:reduce){button,[role="button"],.btn{transition:none;}button:active,.btn:active{transform:none;}}