/* =====================================================================
   ABS VENDOR — "Vault" design system (marketing pages)
   Loaded only on pages that opt in (body.vault). All classes are
   namespaced `v-` so they never collide with Bootstrap / style.css /
   dark-theme.css, which are still loaded globally from head.php.
   Display: Bricolage Grotesque · Body: Plus Jakarta Sans · Data: JetBrains Mono
   ===================================================================== */
body.vault {
    --vf-d: "Bricolage Grotesque", system-ui, sans-serif;
    --vf-b: "Plus Jakarta Sans", system-ui, sans-serif;
    --vf-m: "JetBrains Mono", ui-monospace, monospace;
    /* LIGHT THEME — white bg, cobalt brand (ABS logo). Was a dark ramp; see light overrides at EOF. */
    --v-bg: #FFFFFF; --v-bg2: #F3F6FC; --v-panel: #FFFFFF; --v-surface: #FFFFFF;
    --v-ink: #0C1B3A; --v-muted: #4E5B78; --v-muted2: #8791A8;
    --v-line: rgba(12,27,58,.10); --v-line2: rgba(12,27,58,.17);
    --v-brand: #1466E0; --v-brand-b: #1F6FD6; --v-gold: #B8860B; --v-mint: #12A56C; --v-coral: #E85427; --v-violet: #7C5CE0;
    --v-maxw: 1140px;
    margin: 0; background: var(--v-bg) !important; color: var(--v-ink) !important;
    font-family: var(--vf-b) !important; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.vault * { box-sizing: border-box; }
body.vault a { color: inherit; text-decoration: none; }
body.vault img { max-width: 100%; }
body.vault h1, body.vault h2, body.vault h3, body.vault h4 { color: var(--v-ink) !important; font-family: var(--vf-d); }
body.vault p { color: inherit; }

.v-wrap { max-width: var(--v-maxw); margin: 0 auto; padding: 0 clamp(18px,4vw,40px); }
.v-sec { padding: clamp(56px,8vw,104px) 0; position: relative; }
.v-sec--tight { padding-top: 0; }
.v-bg2 { background: var(--v-bg2); }
.v-eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--vf-m); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--v-muted); }
.v-eyebrow b { color: var(--v-gold); font-weight: 600; }
.v-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--v-mint); box-shadow:0 0 0 4px rgba(31,209,138,.2); }
.v-title { font-family: var(--vf-d); font-weight: 700; letter-spacing: -.025em; line-height: 1.02; font-size: clamp(2rem,4.4vw,3.2rem); margin: 16px 0 0; }
.v-title em, .v-grad { font-style: normal; background: linear-gradient(100deg, var(--v-brand-b), var(--v-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v-shead { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom: clamp(30px,5vw,52px); }
.v-shead__sub { color: var(--v-muted); font-size: 1.02rem; line-height: 1.6; max-width: 38ch; }

.v-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--vf-b); font-weight:700; font-size:15px; padding:13px 22px; border-radius:999px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease; }
.v-btn:hover { transform: translateY(-2px); color: #fff; }
.v-btn--primary { background: var(--v-brand); color:#fff; box-shadow:0 12px 26px rgba(20,102,224,.4); }
.v-btn--ghost { color: var(--v-ink); border-color: var(--v-line2); }
.v-btn--ghost:hover { background: rgba(255,255,255,.05); color: var(--v-ink); }
.v-btn--white { background:#fff; color:#0B1020; } .v-btn--white:hover { color:#0B1020; }
.v-btn--sm { padding:10px 16px; font-size:13.5px; }

/* ===== NAV ===== */
.v-nav { position: sticky; top: 0; z-index: 1000; transition: background .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; }
.v-nav.is-stuck { background: rgba(7,14,36,.85); backdrop-filter: blur(12px); border-bottom-color: var(--v-line); }
.v-nav__in { display:flex; align-items:center; gap:18px; max-width: var(--v-maxw); margin: 0 auto; padding: 14px clamp(18px,4vw,40px); }
.v-brand { display:flex; align-items:center; gap:10px; font-family:var(--vf-d); font-weight:700; color: var(--v-ink); }
.v-brand img { width:34px; height:34px; border-radius:9px; object-fit:cover; }
.v-brand span { font-size:17px; }
.v-nav__links { display:flex; gap:22px; margin-left:14px; }
.v-nav__links a { color:var(--v-muted); font-size:14.5px; font-weight:600; }
.v-nav__links a:hover, .v-nav__links a.is-active { color:var(--v-ink); }
.v-nav__cta { margin-left:auto; display:flex; gap:10px; align-items:center; }
.v-nav__signin { color: var(--v-muted); font-weight:700; font-size:14.5px; }
.v-nav__signin:hover { color: var(--v-ink); }
.v-nav__burger { display:none; background:none; border:0; color:var(--v-ink); font-size:26px; margin-left:auto; cursor:pointer; line-height:1; }
.v-nav__mobile { display:none; flex-direction:column; gap:4px; padding:8px clamp(18px,4vw,40px) 18px; border-top:1px solid var(--v-line); background: rgba(7,14,36,.96); }
.v-nav__mobile.open { display:flex; }
.v-nav__mobile a { color:var(--v-muted); font-weight:600; padding:12px 6px; border-bottom:1px solid var(--v-line); }
.v-nav__mobile a:last-child { border-bottom:0; }

/* ===== HERO ===== */
.v-stage { position:relative; overflow:hidden; padding: clamp(28px,5vw,56px) clamp(18px,4vw,44px) clamp(44px,6vw,84px);
    background: radial-gradient(78% 52% at 50% -10%, rgba(20,102,224,.26), transparent 62%), radial-gradient(50% 38% at 86% 16%, rgba(245,179,1,.10), transparent 60%), radial-gradient(46% 40% at 12% 88%, rgba(31,209,138,.08), transparent 62%), var(--v-bg); }
.v-stage::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-image:linear-gradient(var(--v-line) 1px,transparent 0),linear-gradient(90deg,var(--v-line) 1px,transparent 0); background-size:54px 54px; mask-image:radial-gradient(72% 64% at 50% 32%,#000,transparent 78%); -webkit-mask-image:radial-gradient(72% 64% at 50% 32%,#000,transparent 78%); opacity:.6; }
.v-head { position:relative; z-index:2; text-align:center; max-width:980px; margin:0 auto; }
.v-head .v-eyebrow { border:1px solid var(--v-line2); border-radius:999px; padding:7px 15px; }
.v-htitle { font-family:var(--vf-d); font-weight:700; letter-spacing:-.03em; line-height:.98; font-size:clamp(2.7rem,8vw,5.4rem); margin:26px 0 0; color: var(--v-ink) !important; }
.v-htitle em { font-style:normal; background:linear-gradient(100deg,var(--v-brand-b) 10%,var(--v-gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.v-hsub { color:var(--v-muted); font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.6; max-width:60ch; margin:22px auto 0; }
.v-cmd { position:relative; z-index:2; max-width:660px; margin:34px auto 0; display:flex; align-items:center; gap:10px; border-radius:18px; padding:9px 9px 9px 18px;
    background: linear-gradient(var(--v-surface),var(--v-surface)) padding-box, linear-gradient(120deg, rgba(62,139,255,.55), rgba(245,179,1,.25) 60%, transparent) border-box; border:1px solid transparent; box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 4px rgba(20,102,224,.07); }
.v-cmd__icon { color:var(--v-muted); font-size:20px; }
.v-cmd__field { position:relative; flex:1; height:26px; overflow:hidden; text-align:left; }
.v-cmd__type { position:absolute; left:0; top:0; white-space:nowrap; font-size:15.5px; color:var(--v-ink); font-weight:500; opacity:0; }
.v-cmd__type b { color:var(--v-muted); font-weight:500; }
.v-cmd__type:nth-child(1){animation:vcycle 12s infinite 0s}.v-cmd__type:nth-child(2){animation:vcycle 12s infinite 3s}.v-cmd__type:nth-child(3){animation:vcycle 12s infinite 6s}.v-cmd__type:nth-child(4){animation:vcycle 12s infinite 9s}
.v-cmd__caret { width:2px; height:20px; background:var(--v-brand-b); display:inline-block; vertical-align:middle; animation:vblink 1.1s steps(1) infinite; }
.v-cmd__go { flex-shrink:0; display:inline-flex; align-items:center; gap:7px; font-family:var(--vf-b); font-weight:700; font-size:15px; color:#fff; background:var(--v-brand); border:0; border-radius:12px; padding:12px 20px; cursor:pointer; box-shadow:0 10px 24px rgba(20,102,224,.4); }
.v-hmeta { position:relative; z-index:2; margin:18px auto 0; text-align:center; font-family:var(--vf-m); font-size:12.5px; color:var(--v-muted2); }
.v-hmeta b { color:var(--v-gold); } .v-hmeta i { color:var(--v-mint); font-style:normal; }

.v-board { position:relative; z-index:2; max-width:1080px; margin:clamp(40px,6vw,64px) auto 0; overflow:hidden; border-radius:26px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 26%, rgba(15,23,51,.92)) padding-box, linear-gradient(135deg, rgba(62,139,255,.55), rgba(245,179,1,.22) 55%, rgba(31,209,138,.25)) border-box; border:1px solid transparent; box-shadow:0 40px 100px rgba(0,0,0,.55); }
.v-board__sheen { position:absolute; top:0; left:0; width:55%; height:100%; z-index:1; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.07) 45%,rgba(255,255,255,.12) 50%,transparent 70%); transform:translateX(-120%) skewX(-14deg); animation:vsheen 7.5s ease-in-out infinite; }
.v-board > * { position:relative; z-index:2; }
.v-board__bar { display:flex; align-items:center; gap:10px; padding:15px 22px; border-bottom:1px solid var(--v-line); font-family:var(--vf-m); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--v-muted); }
.v-live { width:8px; height:8px; border-radius:50%; background:var(--v-mint); position:relative; }
.v-live::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--v-mint); opacity:.5; animation:vpulse 2.2s ease-out infinite; }
.v-spark { margin-left:auto; display:flex; align-items:flex-end; gap:3px; height:20px; }
.v-spark i { width:4px; border-radius:2px; background:linear-gradient(var(--v-brand-b),rgba(20,102,224,.25)); display:block; }
.v-board__count { letter-spacing:.04em; color:var(--v-ink); margin-left:14px; } .v-board__count b { color:var(--v-gold); font-weight:700; }
.v-cols, .v-brow { display:grid; grid-template-columns:1.5fr 1.4fr .9fr .9fr; align-items:center; gap:14px; padding:13px 22px; }
.v-cols { font-family:var(--vf-m); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--v-muted2); border-bottom:1px solid var(--v-line); }
.v-cols span:nth-child(3),.v-cols span:nth-child(4){text-align:right}
.v-brow { border-bottom:1px solid var(--v-line); position:relative; } .v-brow:last-of-type{border-bottom:0}
.v-brow--live::before { content:""; position:absolute; inset:0; background:rgba(31,209,138,.07); opacity:0; animation:vsweep 4.4s ease-in-out infinite; }
.v-svcc { display:flex; align-items:center; gap:11px; min-width:0; }
.v-logo { width:34px; height:34px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; font-family:var(--vf-d); font-weight:800; font-size:13px; color:#111; }
.v-logo--mtn{background:#FFC400}.v-logo--glo{background:#5FBE2C;color:#08350f}.v-logo--airtel{background:#E40000;color:#fff}.v-logo--ikedc{background:rgba(20,102,224,.16);color:var(--v-brand-b)}.v-logo--order{background:linear-gradient(135deg,#FF6B35,#F7931E);color:#fff}
.v-svcc__t { font-weight:700; font-size:14.5px; }
.v-detail { font-family:var(--vf-m); font-size:12.5px; color:var(--v-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-detail--token { color:var(--v-gold); letter-spacing:.06em; }
.v-amt { font-family:var(--vf-m); font-weight:700; font-size:14px; text-align:right; font-variant-numeric:tabular-nums; }
.v-status { text-align:right; font-family:var(--vf-m); font-size:12.5px; font-weight:600; }
.v-ok{color:var(--v-mint);display:inline-flex;align-items:center;gap:5px;justify-content:flex-end}.v-out{color:var(--v-coral);display:inline-flex;align-items:center;gap:5px;justify-content:flex-end}
.v-stack{position:relative;display:inline-grid}.v-stack>*{grid-area:1/1}
.v-pending{color:var(--v-muted);display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;animation:vswapP 4.4s ease-in-out infinite}.v-pending i{animation:vspin 1s linear infinite}
.v-done{color:var(--v-mint);display:inline-flex;align-items:center;gap:5px;justify-content:flex-end;opacity:0;animation:vswapD 4.4s ease-in-out infinite}
.v-board__foot{display:flex;align-items:center;justify-content:center;gap:8px 26px;flex-wrap:wrap;padding:16px 22px;border-top:1px solid var(--v-line);font-family:var(--vf-m);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--v-muted2)}
.v-board__foot span{display:inline-flex;align-items:center;gap:6px}.v-board__foot i{color:var(--v-mint)}

/* ===== TICKER ===== */
.v-ticker { border-top:1px solid var(--v-line); border-bottom:1px solid var(--v-line); background: var(--v-bg2); overflow:hidden; padding:16px 0; }
.v-ticker__track { display:flex; width:max-content; animation: vmarquee 32s linear infinite; }
.v-ticker__set { display:flex; align-items:center; }
.v-ticker__item { font-family:var(--vf-m); font-size:14px; color:var(--v-muted); padding:0 22px; white-space:nowrap; letter-spacing:.04em; }
.v-ticker__item--hot { color: var(--v-coral); font-weight:700; }
.v-ticker__sep { color: var(--v-muted2); }

/* ===== SERVICES switchboard ===== */
.v-svcboard { display:grid; grid-template-columns: 320px 1fr; gap: 20px; background: var(--v-panel); border:1px solid var(--v-line); border-radius:24px; padding:14px; }
.v-svctabs { display:flex; flex-direction:column; gap:2px; }
.v-svctab { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; cursor:pointer; color:var(--v-muted); font-weight:700; font-size:15px; transition: background .15s ease, color .15s ease; }
.v-svctab i { font-size:19px; width:24px; text-align:center; }
.v-svctab .chev { margin-left:auto; opacity:0; transition:opacity .15s; }
.v-svctab:hover { color: var(--v-ink); background: rgba(255,255,255,.03); }
.v-svcpanel { display:none; padding: clamp(24px,3vw,40px); }
.v-svcpanel__icon { width:62px; height:62px; border-radius:18px; display:grid; place-items:center; font-size:30px; margin-bottom:20px; background: rgba(20,102,224,.14); color: var(--v-brand-b); }
.v-svcpanel h3 { font-family:var(--vf-d); font-weight:700; font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0 0 12px; }
.v-svcpanel p { color:var(--v-muted); font-size:1.04rem; line-height:1.6; max-width:44ch; margin:0 0 22px; }
.v-svcpanel__row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.v-svcprice { font-family:var(--vf-m); font-weight:700; color:var(--v-gold); background:rgba(245,179,1,.1); border:1px solid rgba(245,179,1,.25); border-radius:999px; padding:8px 16px; font-size:14px; }
.v-svcsec input { position:absolute; opacity:0; pointer-events:none; }
.v-svcsec input:checked ~ .v-svcboard .v-svcpanel { display:none; }
#vsv1:checked ~ .v-svcboard .v-svcp--1,#vsv2:checked ~ .v-svcboard .v-svcp--2,#vsv3:checked ~ .v-svcboard .v-svcp--3,#vsv4:checked ~ .v-svcboard .v-svcp--4,#vsv5:checked ~ .v-svcboard .v-svcp--5,#vsv6:checked ~ .v-svcboard .v-svcp--6,#vsv7:checked ~ .v-svcboard .v-svcp--7,#vsv8:checked ~ .v-svcboard .v-svcp--8,#vsv9:checked ~ .v-svcboard .v-svcp--9 { display:block; }
#vsv1:checked ~ .v-svcboard label[for=vsv1],#vsv2:checked ~ .v-svcboard label[for=vsv2],#vsv3:checked ~ .v-svcboard label[for=vsv3],#vsv4:checked ~ .v-svcboard label[for=vsv4],#vsv5:checked ~ .v-svcboard label[for=vsv5],#vsv6:checked ~ .v-svcboard label[for=vsv6],#vsv7:checked ~ .v-svcboard label[for=vsv7],#vsv8:checked ~ .v-svcboard label[for=vsv8],#vsv9:checked ~ .v-svcboard label[for=vsv9] { background: linear-gradient(135deg, rgba(20,102,224,.22), rgba(20,102,224,.06)); color:#fff; }
#vsv1:checked ~ .v-svcboard label[for=vsv1] .chev,#vsv2:checked ~ .v-svcboard label[for=vsv2] .chev,#vsv3:checked ~ .v-svcboard label[for=vsv3] .chev,#vsv4:checked ~ .v-svcboard label[for=vsv4] .chev,#vsv5:checked ~ .v-svcboard label[for=vsv5] .chev,#vsv6:checked ~ .v-svcboard label[for=vsv6] .chev,#vsv7:checked ~ .v-svcboard label[for=vsv7] .chev,#vsv8:checked ~ .v-svcboard label[for=vsv8] .chev,#vsv9:checked ~ .v-svcboard label[for=vsv9] .chev { opacity:1; }

/* ===== BENEFITS ===== */
.v-sec--glow { background: radial-gradient(60% 50% at 80% 0%, rgba(20,102,224,.10), transparent 60%), radial-gradient(50% 50% at 10% 100%, rgba(245,179,1,.06), transparent 60%); }
.v-switch { display:inline-flex; background:var(--v-panel); border:1px solid var(--v-line2); border-radius:999px; padding:5px; gap:4px; }
.v-switch label { font-family:var(--vf-b); font-weight:700; font-size:14px; color:var(--v-muted); padding:10px 22px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:color .2s,background .2s; }
.v-switch label i { font-size:16px; }
.v-benefitsec input { position:absolute; opacity:0; pointer-events:none; }
#v-aud-you:checked ~ .v-shead .v-switch label[for=v-aud-you], #v-aud-agent:checked ~ .v-shead .v-switch label[for=v-aud-agent] { background:linear-gradient(135deg,var(--v-brand),var(--v-brand-b)); color:#fff; box-shadow:0 8px 20px rgba(20,102,224,.35); }
.v-panel { display:none; }
#v-aud-you:checked ~ .v-benefits .v-panel--you { display:block; }
#v-aud-agent:checked ~ .v-benefits .v-panel--agent { display:block; }
.v-bgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.v-bcard { background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--v-surface); border:1px solid var(--v-line); border-radius:18px; padding:24px; transition:transform .18s,border-color .2s; }
.v-bcard:hover { transform:translateY(-4px); border-color:var(--v-line2); }
.v-bchip { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:21px; margin-bottom:16px; }
.v-bchip--brand{background:rgba(20,102,224,.15);color:var(--v-brand-b)}.v-bchip--mint{background:rgba(31,209,138,.14);color:var(--v-mint)}.v-bchip--gold{background:rgba(245,179,1,.14);color:var(--v-gold)}.v-bchip--coral{background:rgba(255,107,53,.14);color:var(--v-coral)}.v-bchip--violet{background:rgba(167,139,250,.16);color:var(--v-violet)}
.v-bcard h3 { font-family:var(--vf-d); font-weight:700; font-size:1.12rem; margin:0 0 7px; }
.v-bcard p { color:var(--v-muted); font-size:.94rem; line-height:1.55; margin:0; }
.v-bcard__tag { font-family:var(--vf-m); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--v-muted2); margin-top:14px; display:inline-flex; align-items:center; gap:6px; }

/* ===== MILESTONES ===== */
.v-ladder { position:relative; margin-top:8px; }
.v-rail { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.v-rail__line { position:absolute; top:27px; left:6%; right:6%; height:3px; background:var(--v-line2); border-radius:3px; z-index:0; }
.v-rail__fill { position:absolute; top:27px; left:6%; width:42%; height:3px; border-radius:3px; z-index:1; background:linear-gradient(90deg,var(--v-mint),var(--v-brand-b)); box-shadow:0 0 16px rgba(31,209,138,.5); }
.v-node { position:relative; z-index:2; text-align:center; }
.v-node__dot { width:54px; height:54px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; font-size:22px; background:var(--v-panel); border:2px solid var(--v-line2); color:var(--v-muted); }
.v-node--done .v-node__dot { background:rgba(31,209,138,.16); border-color:var(--v-mint); color:var(--v-mint); }
.v-node--active .v-node__dot { background:linear-gradient(135deg,var(--v-gold),#FFD15C); border-color:var(--v-gold); color:#1a1300; box-shadow:0 0 0 6px rgba(245,179,1,.16),0 12px 28px rgba(245,179,1,.3); }
.v-node__card { background:var(--v-surface); border:1px solid var(--v-line); border-radius:16px; padding:16px 14px; }
.v-node--active .v-node__card { border-color:rgba(245,179,1,.4); }
.v-node__trig { font-size:.9rem; font-weight:700; line-height:1.3; color: var(--v-ink); }
.v-node__sub { font-family:var(--vf-m); font-size:11px; color:var(--v-muted2); margin-top:4px; }
.v-node__reward { font-family:var(--vf-m); font-weight:700; font-size:1.05rem; color:var(--v-gold); margin-top:12px; font-variant-numeric:tabular-nums; }
.v-node__state { font-family:var(--vf-m); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; margin-top:8px; display:inline-flex; align-items:center; gap:5px; }
.v-node--done .v-node__state{color:var(--v-mint)}.v-node--active .v-node__state{color:var(--v-gold)}.v-node--locked .v-node__state{color:var(--v-muted2)}
.v-rail__foot { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:40px; font-family:var(--vf-m); font-size:13px; color:var(--v-muted); flex-wrap:wrap; }
.v-rail__foot b { color:var(--v-gold); }

/* ===== REVIEWS ===== */
.v-gphead { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--v-panel); border:1px solid var(--v-line); border-radius:20px; padding:20px 24px; }
.v-gphead__store { display:flex; align-items:center; gap:12px; }
.v-gphead__name { font-family:var(--vf-d); font-weight:700; font-size:1.1rem; } .v-gphead__sub { color:var(--v-muted); font-size:.85rem; }
.v-gphead__score { display:flex; align-items:center; gap:10px; margin-left:auto; }
.v-gphead__num { font-family:var(--vf-m); font-weight:700; font-size:2rem; color:var(--v-gold); }
.v-gpstars { color:var(--v-gold); } .v-gpcount { color:var(--v-muted); font-size:.82rem; }
.v-rgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; }
.v-rcard { background:var(--v-surface); border:1px solid var(--v-line); border-radius:18px; padding:22px; }
.v-rcard__head { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.v-ravatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#0B1020; flex-shrink:0; }
.v-rname { font-weight:700; font-size:.95rem; } .v-rstars { color:var(--v-gold); font-size:.85rem; }
.v-rtext { color:var(--v-muted); font-size:.95rem; line-height:1.6; margin:0; }
.v-rverify { margin-left:auto; }
.v-tpstrip { margin-top:18px; text-align:center; font-family:var(--vf-m); font-size:13px; color:var(--v-muted); }
.v-tpstrip i { color:#00B67A; }

/* ===== APP ===== */
.v-appcard { background: linear-gradient(135deg, var(--v-panel), #14122e 70%, #2a1746); border:1px solid var(--v-line2); border-radius:28px; padding: clamp(28px,4vw,52px); display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center; overflow:hidden; position:relative; }
.v-appcard h2 { font-family:var(--vf-d); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.6rem); margin:14px 0 0; line-height:1.06; }
.v-appcard p { color:var(--v-muted); font-size:1.05rem; line-height:1.6; margin:16px 0 0; max-width:40ch; }
.v-appfeat { list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:9px; }
.v-appfeat li { display:flex; align-items:center; gap:9px; color:var(--v-ink); font-size:.96rem; } .v-appfeat i { color:var(--v-mint); }
.v-stores { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.v-store { display:flex; align-items:center; gap:10px; background:#0b1020; border:1px solid var(--v-line2); border-radius:14px; padding:11px 18px; color:var(--v-ink); }
.v-store i { font-size:24px; } .v-store span { display:block; font-size:10.5px; color:var(--v-muted); } .v-store strong { font-size:14px; }
.v-appvisual { display:flex; justify-content:center; }
.v-phone { width:240px; aspect-ratio: 9/19; border-radius:34px; border:1px solid var(--v-line2); background:#05080f; padding:8px; box-shadow:0 40px 80px rgba(0,0,0,.5); }
.v-phone img { width:100%; height:100%; object-fit:cover; border-radius:26px; display:block; }

/* ===== FAQ ===== */
.v-faqgrid { display:grid; grid-template-columns: .9fr 1.2fr; gap: clamp(24px,4vw,56px); align-items:start; }
.v-faq details { border-bottom:1px solid var(--v-line); }
.v-faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; font-family:var(--vf-d); font-weight:700; font-size:1.08rem; color: var(--v-ink); }
.v-faq summary::-webkit-details-marker { display:none; }
.v-faq summary .ico { width:30px; height:30px; border-radius:50%; border:1px solid var(--v-line2); display:grid; place-items:center; flex-shrink:0; transition:transform .2s; color:var(--v-brand-b); }
.v-faq details[open] summary .ico { transform: rotate(45deg); }
.v-faq .ans { color:var(--v-muted); line-height:1.65; padding:0 0 20px; font-size:.98rem; }
.v-faq .ans b { color: var(--v-ink); }

/* ===== BANDS ===== */
.v-band { border-radius:26px; padding: clamp(30px,5vw,54px); position:relative; overflow:hidden; }
.v-band--hire { background:linear-gradient(135deg,#0f172a,#1e293b 55%,#312e81); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px; }
.v-band--cta { background: radial-gradient(120% 140% at 0% 0%, rgba(20,102,224,.35), transparent 55%), linear-gradient(135deg, #11163a, #1a1248); text-align:center; }
.v-band h2 { font-family:var(--vf-d); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.7rem); line-height:1.1; margin:.4em 0 .3em; }
.v-band--hire p { color:rgba(234,240,255,.82); max-width:560px; margin:0; }
.v-band--cta .v-btns { display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap; }

/* ===== PAGE HERO (sub-pages) ===== */
.v-phero { position:relative; overflow:hidden; padding: clamp(56px,9vw,120px) 0 clamp(36px,5vw,56px); text-align:center;
    background: radial-gradient(70% 60% at 50% -10%, rgba(20,102,224,.22), transparent 62%), var(--v-bg); border-bottom:1px solid var(--v-line); }
.v-phero h1 { font-family:var(--vf-d); font-weight:700; letter-spacing:-.02em; font-size:clamp(2.2rem,5vw,3.6rem); margin:18px 0 0; }
.v-phero p { color:var(--v-muted); font-size:1.08rem; line-height:1.6; max-width:60ch; margin:18px auto 0; }
.v-crumbs { font-family:var(--vf-m); font-size:12px; color:var(--v-muted2); }
.v-crumbs a:hover { color:var(--v-ink); }

/* ===== PROSE (about/articles) ===== */
.v-prose { color:var(--v-muted); line-height:1.8; font-size:1.05rem; max-width:72ch; }
.v-prose h2, .v-prose h3 { color:var(--v-ink); margin:1.6em 0 .5em; }
.v-prose p { margin:0 0 1.1em; }
.v-prose a { color:var(--v-brand-b); }
.v-prose img { border-radius:16px; margin:1.2em 0; }
.v-prose ul, .v-prose ol { padding-left:1.2em; margin:0 0 1.1em; }
.v-prose blockquote { border-left:3px solid var(--v-brand); padding-left:18px; color:var(--v-ink); margin:1.2em 0; }

/* ===== BLOG GRID ===== */
.v-bloggrid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.v-post { background:var(--v-surface); border:1px solid var(--v-line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s,border-color .2s; }
.v-post:hover { transform:translateY(-4px); border-color:var(--v-line2); }
.v-post__media { aspect-ratio:16/10; overflow:hidden; position:relative; display:block; }
.v-post__media img { width:100%; height:100%; object-fit:cover; }
.v-post__tag { position:absolute; top:12px; left:12px; font-family:var(--vf-m); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:rgba(7,14,36,.8); border:1px solid var(--v-line2); color:var(--v-ink); padding:5px 10px; border-radius:999px; }
.v-post__body { padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.v-post__meta { font-family:var(--vf-m); font-size:11.5px; color:var(--v-muted2); }
.v-post__title { font-family:var(--vf-d); font-weight:700; font-size:1.12rem; line-height:1.25; margin:0; }
.v-post__title a:hover { color:var(--v-brand-b); }
.v-post__summary { color:var(--v-muted); font-size:.92rem; line-height:1.55; margin:0; flex:1; }
.v-post__link { font-family:var(--vf-m); font-size:13px; color:var(--v-brand-b); display:inline-flex; align-items:center; gap:6px; }

/* ===== FORM (contact) ===== */
.v-form { background:var(--v-panel); border:1px solid var(--v-line); border-radius:22px; padding: clamp(24px,4vw,40px); }
.v-field { margin-bottom:18px; }
.v-field label { display:block; font-size:13px; font-weight:700; color:var(--v-ink); margin-bottom:8px; }
.v-input, .v-textarea, .v-select { width:100%; background:var(--v-bg2); border:1px solid var(--v-line2); border-radius:12px; padding:14px 16px; color:var(--v-ink); font-family:var(--vf-b); font-size:15px; }
.v-input:focus, .v-textarea:focus, .v-select:focus { outline:2px solid var(--v-brand); outline-offset:1px; border-color:transparent; }
.v-input::placeholder, .v-textarea::placeholder { color:var(--v-muted2); }
.v-textarea { min-height:130px; resize:vertical; }
.v-contactcard { background:var(--v-surface); border:1px solid var(--v-line); border-radius:18px; padding:22px; display:flex; gap:14px; align-items:flex-start; }
.v-contactcard__icon { width:46px; height:46px; border-radius:13px; background:rgba(20,102,224,.14); color:var(--v-brand-b); display:grid; place-items:center; font-size:22px; flex-shrink:0; }
.v-contactcard h4 { margin:0 0 4px; font-size:1rem; } .v-contactcard p { color:var(--v-muted); margin:0; font-size:.92rem; }

/* ===== FOOTER ===== */
.v-foot { background:#05080f; border-top:1px solid var(--v-line); padding: clamp(48px,6vw,72px) 0 30px; }
.v-foot__top { display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap:30px; }
.v-foot__about p { color:var(--v-muted); font-size:.92rem; line-height:1.6; margin:14px 0 18px; max-width:34ch; }
.v-foot__col h4 { font-family:var(--vf-m); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--v-muted2); margin:0 0 16px; }
.v-foot__col a { display:block; color:var(--v-muted); font-size:.92rem; margin-bottom:11px; }
.v-foot__col a:hover { color:var(--v-ink); }
.v-foot__bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; padding-top:24px; border-top:1px solid var(--v-line); color:var(--v-muted2); font-size:.85rem; }
.v-foot__social { display:flex; gap:10px; }
.v-foot__social a { width:36px; height:36px; border-radius:10px; border:1px solid var(--v-line2); display:grid; place-items:center; color:var(--v-muted); }
.v-foot__social a:hover { color:var(--v-ink); border-color:var(--v-line2); }
.v-foot__license { font-family:var(--vf-m); font-size:11.5px; color:var(--v-mint); display:inline-flex; align-items:center; gap:6px; }

/* ===== keyframes ===== */
@keyframes vpulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.1);opacity:0}}
@keyframes vspin{to{transform:rotate(360deg)}}
@keyframes vblink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes vcycle{0%,2%{opacity:0;transform:translateY(6px)}6%,22%{opacity:1;transform:translateY(0)}26%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes vswapP{0%,40%{opacity:1}48%,100%{opacity:0}}
@keyframes vswapD{0%,42%{opacity:0}52%,92%{opacity:1}100%{opacity:0}}
@keyframes vsweep{0%,40%{opacity:0}49%{opacity:1}72%,100%{opacity:0}}
@keyframes vsheen{0%,18%{transform:translateX(-120%) skewX(-14deg)}42%,100%{transform:translateX(320%) skewX(-14deg)}}
@keyframes vmarquee{to{transform:translateX(-50%)}}

/* ===== responsive ===== */
@media (max-width: 980px){
    .v-nav__links, .v-nav__signin { display:none; }
    .v-nav__burger { display:block; }
    .v-svcboard { grid-template-columns:1fr; }
    .v-svctabs { flex-direction:row; overflow-x:auto; }
    .v-appcard { grid-template-columns:1fr; } .v-appvisual { order:-1; }
    .v-faqgrid { grid-template-columns:1fr; }
    .v-foot__top { grid-template-columns:1fr 1fr; }
    .v-bloggrid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 820px){
    .v-cols { display:none; }
    .v-brow { grid-template-columns:1fr auto; grid-template-areas:"svc status" "detail amt"; row-gap:6px; }
    .v-svcc{grid-area:svc}.v-status{grid-area:status}.v-detail{grid-area:detail;padding-left:45px}.v-amt{grid-area:amt}
    .v-bgrid { grid-template-columns:repeat(2,1fr); }
    .v-rgrid { grid-template-columns:1fr; }
    .v-rail { grid-auto-flow:column; grid-auto-columns:230px; grid-template-columns:none; overflow-x:auto; padding-bottom:12px; }
    .v-rail__line,.v-rail__fill { display:none; }
}
@media (max-width: 540px){ .v-bgrid{grid-template-columns:1fr} .v-shead{flex-direction:column;align-items:flex-start} .v-foot__top{grid-template-columns:1fr} .v-bloggrid{grid-template-columns:1fr} }
body.vault a:focus-visible, body.vault button:focus-visible, body.vault label:focus-visible, body.vault summary:focus-visible { outline:2px solid var(--v-brand-b); outline-offset:3px; border-radius:8px; }
@media (prefers-reduced-motion: reduce){
    .v-pending{opacity:0!important;animation:none}.v-done{opacity:1!important;animation:none}
    .v-cmd__type:nth-child(1){opacity:1!important;animation:none}.v-cmd__type:nth-child(n+2){display:none}
    .v-board__sheen,.v-brow--live::before,.v-live::after,.v-cmd__caret,.v-pending i,.v-ticker__track{animation:none}
}

/* =====================================================================
   LIGHT THEME (white background) — patches for spots that hardcoded
   dark surfaces / white text / dark-only overlays. Delete this block
   + restore the dark token ramp above to revert to the dark vault.
   ===================================================================== */
/* Softer hero halo on white */
.v-stage { background:
    radial-gradient(78% 52% at 50% -8%, rgba(20,102,224,.10), transparent 60%),
    radial-gradient(50% 38% at 86% 16%, rgba(245,179,1,.05), transparent 60%),
    var(--v-bg); }
/* Translucent nav → white */
.v-nav.is-stuck { background: rgba(255,255,255,.86); box-shadow: 0 1px 0 var(--v-line); }
.v-nav__mobile { background: rgba(255,255,255,.98); }
/* Cards/panels: white needs a soft lift to separate from the page */
.v-svcboard, .v-bcard, .v-node__card, .v-post, .v-rcard, .v-gphead, .v-form,
.v-contactcard, .v-appcard, .v-switch {
    box-shadow: 0 1px 2px rgba(12,27,58,.05), 0 14px 34px -20px rgba(12,27,58,.22); }
.v-bcard { background: var(--v-surface); }               /* drop white-on-white top wash */
/* Ghost button + service-tab hover need dark tint on light */
.v-btn--ghost:hover { background: rgba(12,27,58,.05); }
.v-svctab:hover { background: rgba(12,27,58,.05); color: var(--v-ink); }
/* Selected service tab: readable brand text (was white on pale-blue) */
#vsv1:checked ~ .v-svcboard label[for=vsv1],#vsv2:checked ~ .v-svcboard label[for=vsv2],
#vsv3:checked ~ .v-svcboard label[for=vsv3],#vsv4:checked ~ .v-svcboard label[for=vsv4],
#vsv5:checked ~ .v-svcboard label[for=vsv5],#vsv6:checked ~ .v-svcboard label[for=vsv6],
#vsv7:checked ~ .v-svcboard label[for=vsv7],#vsv8:checked ~ .v-svcboard label[for=vsv8],
#vsv9:checked ~ .v-svcboard label[for=vsv9] {
    background: linear-gradient(135deg, rgba(20,102,224,.14), rgba(20,102,224,.05)); color: var(--v-brand); }
/* App showcase card → light; store pills + phone stay legible */
.v-appcard { background: linear-gradient(160deg, #F7FAFF, #EDF3FD); }
.v-store { background: var(--v-bg2); color: var(--v-ink); border-color: var(--v-line); }
.v-store span { color: var(--v-muted); }
/* CTA + Hire bands → bold cobalt islands with white text (were dark navy) */
.v-band--hire, .v-band--cta { background: linear-gradient(135deg, #1466E0, #0B3C97) !important; color: rgba(255,255,255,.9); }
.v-band--cta { text-align:center; }
.v-band h2 { color: #fff !important; }
.v-band--hire p, .v-band--cta p { color: rgba(255,255,255,.86); }
.v-band .v-eyebrow { color: rgba(255,255,255,.82); }
.v-band .v-eyebrow b { color: #FFDD8A; }
.v-band .v-grad { -webkit-text-fill-color:#fff; color:#fff; background:none; }
.v-band .v-btn--primary { background:#fff; color: var(--v-brand); }   /* blue-on-blue would vanish */
/* Footer → light */
.v-foot { background: var(--v-bg2); }
/* Inputs on white */
.v-input, .v-textarea, .v-select { background: #fff; }