/* =====================================================================
   HostingWalay design system  (hw.css)
   One stylesheet for the whole site. No page-scoped duplicates.
   Sections:
     1 tokens + fonts   2 reset + base   3 layout + utilities   4 buttons
     5 topbar + header + mega menu + mobile menu   6 hero variants
     7 bands, strips, trust   8 feature cards   9 pricing cards (hosting contract)
    10 plan tables (static)  11 domains  12 compare tables  13 steps + timeline
    14 FAQ  15 testimonials  16 CTA + contact + money back  17 forms
    18 tabs + badges + alerts  19 legal pages  20 quotation pages
    21 footer  22 motion + reveal  23 VIP layer (catalog, tools, network, modal)
    24 print
   Palette (unchanged): navy #152455  blue #2c5cf5  gold #ffc522  green #22c55e
   ===================================================================== */

/* ---------- 1. tokens + fonts ---------- */
@font-face{font-family:'Cera Pro';src:url('../fonts/cera-pro-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cera Pro';src:url('../fonts/cera-pro-medium.ttf') format('truetype');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Cera Pro';src:url('../fonts/cera-pro-bold.ttf') format('truetype');font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --navy:#152455;--navy-2:#0a1538;--navy-3:#1e2a5e;--ink:#0b1230;
  --blue:#2c5cf5;--blue-2:#1d4ed8;--blue-tint:#dbeafe;--blue-soft:#eef3ff;
  --gold:#ffc522;--gold-2:#f5a800;--gold-soft:#fff5cc;
  --green:#22c55e;--green-2:#16a34a;--green-soft:#dcfce7;--red:#ef4444;--red-soft:#fee2e2;--amber-soft:#fef3c7;
  --text:#1a2238;--muted:#5b6478;--muted-2:#8a93a6;--border:#e3e8f3;--soft:#f5f7fb;--cream:#f7f9fd;--white:#fff;
  --r:18px;--r-sm:12px;--r-xs:8px;--r-pill:999px;
  --sh-sm:0 4px 12px rgba(16,23,41,.06);--sh-md:0 14px 34px rgba(16,23,41,.12);--sh-lg:0 30px 70px rgba(10,21,56,.28);--sh-gold:0 10px 26px rgba(245,168,0,.32);--sh-blue:0 10px 26px rgba(44,92,245,.3);
  --ease:cubic-bezier(.16,1,.3,1);
  --display:'Cera Pro','Cera Pro','Inter',system-ui,sans-serif;
/* display:'Bricolage Grotesque','Cera Pro','Inter',system-ui,sans-serif; */
  --body:'Cera Pro','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','Consolas','SFMono-Regular',Menlo,monospace;
  --urdu:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq',serif;
  --wrap:1200px;--gutter:16px;--header-h:76px;
  /* aliases kept for the VIP layer (section 23) */
  --hv-navy:var(--navy);--hv-navy-2:var(--navy-2);--hv-navy-3:var(--navy-3);--hv-ink:var(--ink);--hv-blue:var(--blue);--hv-blue-2:var(--blue-2);--hv-blue-tint:var(--blue-tint);--hv-blue-soft:var(--blue-soft);
  --hv-gold:var(--gold);--hv-gold-2:var(--gold-2);--hv-gold-soft:var(--gold-soft);--hv-green:var(--green);--hv-green-2:var(--green-2);--hv-green-soft:var(--green-soft);--hv-red:var(--red);
  --hv-text:var(--text);--hv-muted:var(--muted);--hv-border:var(--border);--hv-soft:var(--soft);--hv-cream:var(--cream);
  --hv-r:var(--r);--hv-r-sm:var(--r-sm);--hv-r-pill:var(--r-pill);--hv-sh-sm:var(--sh-sm);--hv-sh-md:var(--sh-md);--hv-sh-lg:var(--sh-lg);--hv-ease:var(--ease);
  --hv-display:var(--display);--hv-body:var(--body);--hv-mono:var(--mono);--hv-urdu:var(--urdu);
}

/* ---------- 2. reset + base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
html.hw-mobile-menu-open,html.hw-modal-open{overflow:hidden}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.6;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img,svg,video{max-width:100%;height:auto;display:block}
img{vertical-align:middle}
a{color:var(--blue);text-decoration:none;transition:color .2s}
/* plain text links only; buttons keep their own colours on hover */
a:where(:not(.btn,.hv-btn,.hw-get-quote,.tb-wa,.hv-basket-btn)):hover{color:var(--blue-2)}
button{font-family:inherit;cursor:pointer}
input,select,textarea,button{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--display);letter-spacing:-.02em;line-height:1.12;margin:0 0 .5em;color:var(--navy);font-weight:800}
h1{font-size:clamp(32px,4.8vw,58px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(19px,2vw,24px)}
h4{font-size:18px}
h5{font-size:16px}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
strong,b{font-weight:700}
/*em.mark,h1 em,h2 em,.mark{font-style:normal;color:var(--blue);background:linear-gradient(transparent 60%,var(--gold) 60%,var(--gold) 86%,transparent 86%);padding:0 .08em}*/
em.mark,h1 em,h2 em,.mark{font-style:normal;color:var(--blue);padding:0 .08em}

.band-navy h2 em,.band-navy h1 em{color:var(--gold);background:none}
code,kbd,pre,.mono{font-family:var(--mono)}
hr{border:0;border-top:1px solid var(--border);margin:24px 0}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:3px solid rgba(44,92,245,.45);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. layout + utilities ---------- */
.wrap{width:min(var(--wrap),calc(100% - 2 * var(--gutter)));margin:0 auto}
.wrap-narrow{width:min(860px,calc(100% - 2 * var(--gutter)));margin:0 auto}
.sec{padding:56px 0}
.sec-sm{padding:36px 0}
@media(min-width:900px){.sec{padding:80px 0}.sec-sm{padding:48px 0}}
.sec-soft{background:var(--cream)}
.sec-head{max-width:760px;margin:0 0 34px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin:12px 0 12px}
.sec-head p{font-size:17px;color:var(--muted);margin:0}
.sec-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:none}
.sec-head.row>div{max-width:720px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-tint);padding:6px 12px 6px 8px;border-radius:var(--r-pill);font-family:var(--body)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.2);flex:none}
.eyebrow.yellow,.eyebrow.gold{color:#7a5200;background:var(--gold-soft);border-color:#ffe08a}
.eyebrow.yellow::before,.eyebrow.gold::before{background:var(--gold-2);box-shadow:0 0 0 3px rgba(245,168,0,.2)}
.band-navy .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:var(--gold)}
.lead{font-size:17px;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.center{text-align:center}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.grid-5{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:56px}.split.rev>:first-child{order:2}}
.flex{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.mb-1{margin-bottom:8px}.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}.mt-5{margin-top:56px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.hide-sm{display:initial}
@media(max-width:760px){.hide-sm{display:none !important}}
.show-sm{display:none}
@media(max-width:760px){.show-sm{display:initial}}
.ic{width:1em;height:1em;flex:none;vertical-align:-.15em}
.icon-box{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;box-shadow:0 10px 20px rgba(21,36,85,.22);flex:none}
.icon-box svg,.icon-box i{width:22px;height:22px;font-size:20px}
.icon-box.gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--ink);box-shadow:var(--sh-gold)}
.icon-box.green{background:linear-gradient(135deg,var(--green),var(--green-2));box-shadow:0 10px 20px rgba(34,197,94,.25)}
.icon-box.soft{background:var(--blue-soft);color:var(--blue);box-shadow:none;border:1px solid var(--blue-tint)}
.icon-box.lg{width:58px;height:58px;border-radius:18px}
.icon-box.lg svg,.icon-box.lg i{width:28px;height:28px;font-size:26px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--sh-sm)}
.card.hover{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.card.hover:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:rgba(44,92,245,.35)}
.card-navy{background:linear-gradient(160deg,var(--navy-2),var(--navy));color:#fff;border:0}
.card-navy h3,.card-navy h4{color:#fff}
.card-navy p{color:rgba(255,255,255,.8)}
.urdu{font-family:var(--urdu);direction:rtl;line-height:2}
.urdu-inline{font-family:var(--urdu);direction:rtl;display:inline-block;line-height:1.8;color:var(--navy)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;background:#fff;border:1px solid var(--border);color:var(--navy);box-shadow:var(--sh-sm)}
.chip.gold{background:var(--gold-soft);border-color:#ffe08a;color:#7a5200}
.chip.green{background:var(--green-soft);border-color:#bbf7d0;color:#166534}
.chip.blue{background:var(--blue-soft);border-color:var(--blue-tint);color:var(--blue-2)}
.chip .ic{color:var(--green)}
.band-navy .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.dots{display:flex;gap:5px}
.dots i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.dots i:nth-child(2){background:var(--gold)}
.dots i:nth-child(3){background:var(--green)}

/* ---------- 4. buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:var(--r-pill);font-weight:800;font-size:15px;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .2s;font-family:var(--body)}
.btn svg{width:18px;height:18px;flex:none}
.btn i{font-size:15px}
.btn-yellow,.btn-gold{background:linear-gradient(135deg,#ffd75c,var(--gold-2));color:var(--ink);box-shadow:var(--sh-gold)}
.btn-yellow:hover,.btn-gold:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(245,168,0,.42);color:var(--ink)}
.btn-blue{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;box-shadow:var(--sh-blue)}
.btn-blue:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(44,92,245,.4);color:#fff}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 10px 26px rgba(21,36,85,.28)}
.btn-navy:hover{transform:translateY(-3px);color:#fff;background:var(--navy-3)}
.btn-outline,.btn-ghost{background:#fff;border-color:rgba(21,36,85,.18);color:var(--navy)}
.btn-outline:hover,.btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px);color:var(--navy)}
.band-navy .btn-outline,.card-navy .btn-outline,.hero-card .btn-outline{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.band-navy .btn-outline:hover,.card-navy .btn-outline:hover,.hero-card .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff}
.btn-wa,.btn-whatsapp,.whatsapp-btn{background:#25d366;color:#fff;box-shadow:0 10px 24px rgba(37,211,102,.3)}
.btn-wa:hover,.btn-whatsapp:hover,.whatsapp-btn:hover{transform:translateY(-3px);color:#fff}
.btn-sm{padding:10px 16px;font-size:13px}
.btn-lg{padding:17px 30px;font-size:16px}
.btn-block{width:100%}
.btn[disabled],.btn.disabled{opacity:.55;pointer-events:none}
.btn-link{background:none;border:0;padding:0;color:var(--blue);font-weight:800;border-radius:0;box-shadow:none}
.btn-link:hover{text-decoration:underline;transform:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- 5. topbar + header + mega menu + mobile menu ---------- */
.topbar{background:var(--navy-2);color:#cfd6ea;font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:42px}
.tb-left,.tb-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tb-item{display:inline-flex;align-items:center;gap:7px;color:#e6eaf7;font-weight:600}
.tb-item svg{width:14px;height:14px;opacity:.85}
.tb-item:hover{color:#fff}
.tb-sep{width:1px;height:16px;background:rgba(255,255,255,.18)}
.tb-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.tb-wa{display:inline-flex;align-items:center;gap:7px;background:#25d366;color:#fff;padding:6px 12px;border-radius:var(--r-pill);font-weight:800;font-size:12.5px}
.tb-wa:hover{color:#fff;filter:brightness(1.06)}
.tb-wa svg{width:14px;height:14px}
@media(max-width:760px){.topbar .tb-left .tb-item:not(.keep),.tb-right .tb-item:not(.keep),.tb-sep{display:none}}
.hw-site-badge{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--navy);flex:none}
.hw-site-badge.sw{background:var(--green-2)}
.hw-site-badge.dw{background:var(--gold-2);color:var(--ink)}

.header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:box-shadow .3s}
.header.scrolled{box-shadow:var(--sh-md)}
.nav{display:flex;align-items:center;gap:20px;min-height:var(--header-h)}
.logo{display:inline-flex;align-items:center;flex:none}
.logo-img{height:44px;width:auto}
.menu{display:none;list-style:none;margin:0 auto;padding:0;gap:4px}
@media(min-width:1024px){.menu{display:flex}}
.menu>li{position:relative}
.menu>li>a{display:inline-flex;align-items:center;gap:5px;padding:10px 13px;border-radius:var(--r-xs);color:var(--navy);font-weight:700;font-size:15px}
.menu>li>a .chev{width:14px;height:14px;transition:.25s}
.menu>li:hover>a,.menu>li.open>a{background:var(--soft);color:var(--blue)}
.menu>li:hover>a .chev{transform:rotate(180deg)}
.panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-lg);padding:14px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:80;min-width:300px}
.panel::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.menu>li:hover>.panel,.menu>li.open>.panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.panel-mid{width:340px}
.panel-wide{width:760px}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 16px}
.panel-wide .mega-grid{grid-template-columns:repeat(3,1fr)}
.mega-col h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:8px 10px 6px;font-weight:700}
.mega-link{display:flex;gap:11px;align-items:flex-start;padding:10px;border-radius:12px;color:var(--navy);transition:.2s}
.mega-link:hover{background:var(--soft);color:var(--navy)}
.mega-link .mega-ico{width:36px;height:36px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.mega-link .mega-ico svg{width:18px;height:18px}
.mega-link.gold .mega-ico{background:var(--gold-soft);color:var(--gold-2)}
.mega-link b{display:block;font-size:14px;font-weight:800}
.mega-link span>span,.mega-link small{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:1px}
.panel-foot{margin-top:8px;padding:10px 10px 2px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted)}
.panel-foot a{font-weight:800}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.hw-get-quote{display:inline-flex;align-items:center;gap:6px;padding:10px 15px;border-radius:var(--r-pill);background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;font-size:13px;font-weight:800;box-shadow:var(--sh-blue);white-space:nowrap}
.hw-get-quote:hover{color:#fff;transform:translateY(-2px)}
.toggle{display:inline-flex;background:var(--soft);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px}
.toggle button{border:0;background:transparent;padding:7px 12px;border-radius:var(--r-pill);font-weight:800;font-size:12.5px;color:var(--muted);transition:.25s}
.toggle button.on{background:var(--navy);color:#fff;box-shadow:0 4px 10px rgba(21,36,85,.25)}
.hamburger{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--navy)}
.hamburger svg{width:22px;height:22px}
@media(min-width:1024px){.hamburger{display:none}}
@media(max-width:600px){.nav{gap:10px}.nav-right{gap:6px}.logo-img{height:36px;max-width:150px;object-fit:contain;object-position:left center}}
@media(max-width:480px){.toggle button{padding:6px 9px;font-size:11.5px}.hamburger{width:38px;height:38px}}
/* Small phones: the quotation button lives in the mobile menu and the sticky bottom bar instead */
@media(max-width:430px){.nav-right .hw-get-quote{display:none}.logo-img{height:32px;max-width:135px}}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:90;background:#fff;transform:translateX(100%);visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s;overflow-y:auto;display:flex;flex-direction:column}
.mobile-menu.open{transform:none;visibility:visible;transition:transform .4s var(--ease),visibility 0s}
.mm-top{display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter);border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:2}
.mm-top .logo-img{height:38px}
.logo-tile{width:38px;height:38px;border-radius:10px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:800;font-family:var(--display)}
.mm-close{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--soft);color:var(--navy);display:grid;place-items:center;font-size:20px}
.mm-menu{padding:8px var(--gutter) 20px}
.mm-dropdown{border-bottom:1px solid var(--border)}
.mm-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;color:var(--navy);font-weight:800;font-size:16px;background:none;border:0;text-align:left;font-family:var(--body)}
.mm-toggle .chev{width:16px;height:16px;transition:.25s}
.mm-dropdown.active .mm-toggle .chev{transform:rotate(180deg)}
.mm-sub{display:none;padding:0 0 12px}
.mm-dropdown.active .mm-sub{display:block}
.mm-sub-grid{display:grid;gap:4px}
.mm-cat-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px;font-weight:700}
.mm-sub-link{display:flex;gap:10px;align-items:center;padding:9px 8px;border-radius:10px;color:var(--navy)}
.mm-sub-link:hover{background:var(--soft);color:var(--navy)}
.mm-sub-link .m-ico{width:34px;height:34px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.mm-sub-link .m-ico svg{width:17px;height:17px}
.mm-sub-link.gold-link .m-ico{background:var(--gold-soft);color:var(--gold-2)}
.mm-sub-link b{display:block;font-size:14px}
.mm-sub-link small{display:block;font-size:12px;color:var(--muted)}
.mm-plain{display:block;padding:14px 0;color:var(--navy);font-weight:800;font-size:16px;border-bottom:1px solid var(--border)}
.hw-mobile-account{padding:16px var(--gutter);background:var(--soft);display:grid;gap:10px}
.hw-mobile-section-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.hw-mobile-account-actions{display:flex;gap:8px}
.hw-mobile-account-actions a{flex:1;text-align:center;padding:11px;border-radius:var(--r-pill);font-weight:800;font-size:14px;background:#fff;border:1px solid var(--border);color:var(--navy)}
.hw-mobile-account-actions a:last-child{background:var(--navy);color:#fff;border-color:var(--navy)}
.hw-mobile-sites{padding:0 var(--gutter) 24px}
.hw-mobile-site-link{display:flex;align-items:center;gap:10px;padding:10px 0;color:var(--navy);font-weight:700}
.hw-mobile-site-link small{color:var(--muted);font-weight:500;margin-left:auto}

/* ---------- 6. hero variants ---------- */
.hero{position:relative;overflow:hidden;padding:48px 0 60px;background:#fff;background-image:radial-gradient(900px 480px at 92% -10%,rgba(44,92,245,.16),transparent 60%),radial-gradient(640px 420px at -5% 105%,rgba(255,197,34,.22),transparent 58%),linear-gradient(180deg,#fff,var(--cream))}
@media(min-width:900px){.hero{padding:64px 0 84px}}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(21,36,85,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(21,36,85,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 30%,#000 25%,transparent 78%);pointer-events:none}
.hero>.wrap{position:relative;z-index:2}
.hero-grid{display:grid;gap:36px;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:56px}}
.hero-lt h1{margin:14px 0 16px}
.hero-lt,.hero-rt{min-width:0;position:relative}
.mini-c.dept-card.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(44,92,245,.15)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-tint);padding:6px 12px 6px 8px;border-radius:var(--r-pill)}
.hero-eyebrow .dot,.hero-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.hero-eyebrow .dot+*{margin-left:0}
.hero-sub{font-size:19px;line-height:1.5;color:var(--navy);font-weight:600;margin:0 0 10px}
.hero-body,.hero-copy{font-size:17px;line-height:1.65;color:var(--muted);max-width:620px;margin-bottom:24px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-trustrow,.hero-note{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted)}
.hero-trustrow span,.hero-note span{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.hero-trustrow svg,.hero-note svg{width:15px;height:15px;color:var(--green)}
.hero-price{display:flex;align-items:baseline;gap:8px;margin:18px 0 20px;flex-wrap:wrap}
.hero-price small{font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.hero-price .num{font-family:var(--display);font-size:40px;font-weight:800;color:var(--navy);line-height:1}
.hero-price .per{color:var(--muted);font-weight:700}
.hero-price .badge{margin-left:4px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted);margin:0 0 18px;padding:0;list-style:none;font-family:var(--mono)}
.crumbs a{color:var(--navy)}
.crumbs .sep,.crumbs li+li::before{opacity:.5}
.crumbs li+li::before{content:"/";margin-right:6px}
.crumbs .cur{color:var(--muted)}
/* navy console card used in heroes */
.hero-card{position:relative;border-radius:24px;padding:24px;background:linear-gradient(160deg,var(--navy-2),var(--navy) 70%,#1a2f6e);color:#fff;box-shadow:var(--sh-lg),inset 0 1px 0 rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.hero-card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse at 80% 0%,#000 10%,transparent 70%);pointer-events:none}
.hero-card>*{position:relative}
.hero-card h3,.hero-card h4{color:#fff}
.hero-card p{color:rgba(255,255,255,.78)}
.console-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.6);letter-spacing:.04em}
.console-bar .live{display:inline-flex;align-items:center;gap:6px;color:#7ef0a8}
.console-bar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite}
.console-rows{display:grid;gap:8px}
.console-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:14px}
.console-row b{font-family:var(--mono);font-size:12.5px;color:var(--gold);font-weight:600}
.console-row b.ok{color:#7ef0a8}
.console-row .lbl{color:rgba(255,255,255,.85)}
.leds{display:flex;gap:4px;align-items:center}
.leds i{width:6px;height:6px;border-radius:2px;background:rgba(255,255,255,.18)}
.leds i.on{background:var(--green);box-shadow:0 0 6px var(--green);animation:blink 1.6s infinite}
.leds i.on:nth-child(2n){animation-delay:.4s}
.leds i.gold{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.hero-card .big{font-family:var(--display);font-size:clamp(36px,4.6vw,52px);font-weight:800;line-height:1;color:var(--gold);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.hero-card .big small{font-size:15px;font-weight:600;color:rgba(255,255,255,.7);font-family:var(--body)}
.hero-card .lbl-sm{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero-card ul.ticks{list-style:none;margin:14px 0 18px;padding:14px 0 0;border-top:1px dashed rgba(255,255,255,.14);display:grid;gap:8px}
.hero-card ul.ticks li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.9)}
.hero-card ul.ticks li svg,.hero-card ul.ticks li i{color:var(--green);flex:none;margin-top:3px;width:16px;height:16px;font-size:13px}
.hero-card .pay{margin-top:14px;font-size:12px;color:rgba(255,255,255,.6);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hero-card .pay b{background:rgba(255,255,255,.1);padding:3px 8px;border-radius:6px;color:#fff;font-weight:700;font-size:11.5px}
.hero-card .tag{position:absolute;top:-1px;right:18px;background:var(--gold);color:var(--ink);font-weight:800;font-size:11px;padding:6px 12px;border-radius:0 0 10px 10px;letter-spacing:.06em;text-transform:uppercase}
/* terminal variant */
.terminal{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.85);white-space:pre-wrap;margin:0}
.terminal .p{color:#7ef0a8}.terminal .y{color:var(--gold)}.terminal .g{color:#7ef0a8}.terminal .m{color:rgba(255,255,255,.5)}
/* search hero (domains, whois) */
.hero-search{position:relative;max-width:760px}
.hero-search form,.input-row{display:flex;background:#fff;border-radius:16px;box-shadow:var(--sh-md);padding:6px;border:1.5px solid var(--border);gap:6px;flex-wrap:wrap}
.hero-search form:focus-within,.input-row:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(44,92,245,.12),var(--sh-md)}
.hero-search .prompt{display:none;align-items:center;padding:0 4px 0 14px;font-family:var(--mono);color:var(--blue);font-weight:700}
@media(min-width:600px){.hero-search .prompt{display:inline-flex}}
.hero-search input,.input-row input{flex:1 1 200px;border:0;outline:0;background:transparent;padding:12px 14px;font-size:16px;color:var(--text);min-width:0}
.hero-search .btn,.input-row .btn{border-radius:12px;padding:12px 22px}
.hero-search .tld-select,.input-row select{border:0;background:var(--soft);border-radius:12px;padding:0 14px;font-weight:800;color:var(--navy);outline:0}
.search-hint{margin-top:12px;font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.search-hint a{color:var(--navy);border-bottom:1px dotted var(--navy);font-weight:700}
.hero-tabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px;margin-bottom:14px}
.hero-tabs button{border:0;background:transparent;padding:8px 14px;border-radius:var(--r-pill);font-weight:800;font-size:13px;color:var(--muted)}
.hero-tabs button.on{background:#fff;color:var(--navy);box-shadow:var(--sh-sm)}
/* compact strip hero (legal, ticket, misc) */
.hero-strip{background:linear-gradient(160deg,var(--navy-2),var(--navy) 60%,#1a2f6e);color:#fff;padding:44px 0 48px;position:relative;overflow:hidden}
.hero-strip::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 80%);pointer-events:none}
.hero-strip .wrap{position:relative}
.hero-strip h1{color:#fff;font-size:clamp(28px,4vw,44px);margin:12px 0 10px}
.hero-strip p{color:rgba(255,255,255,.78);font-size:16.5px;max-width:720px;margin:0}
.hero-strip .crumbs{color:rgba(255,255,255,.6)}
.hero-strip .crumbs a{color:#fff}
/* slider hero (home) */
.hero-slider{position:relative}
.hero-slide{display:none}
.hero-slide.active{display:block;animation:fadeUp .7s var(--ease)}
.hero-nav{display:flex;gap:8px;margin-top:22px}
.hero-dot{width:34px;height:6px;border-radius:3px;background:var(--border);border:0;padding:0;transition:.3s}
.hero-dot.on{background:var(--gold);width:48px}
.hero-float{position:absolute;display:none;align-items:center;gap:10px;padding:10px 14px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-md);font-size:12px;z-index:3}
.hero-float b{display:block;font-size:14px;color:var(--navy)}
.hero-float small{color:var(--muted);letter-spacing:.06em}
.hero-float .ic{width:34px;height:34px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}
@media(min-width:1100px){.hero-float{display:flex}.hero-float.l{left:-40px;bottom:30px}.hero-float.r{right:-30px;top:20px}}

/* ---------- 7. bands, strips, trust ---------- */
.band-navy{background:linear-gradient(160deg,var(--navy-2),var(--navy) 60%,#1a2f6e);color:#fff;position:relative;overflow:hidden}
.band-navy::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 80%);pointer-events:none}
.band-navy>.wrap{position:relative}
.band-navy h2,.band-navy h3,.band-navy h4{color:#fff}
.band-navy p,.band-navy .lead{color:rgba(255,255,255,.8)}
.band-navy .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(8px)}
.band-navy .card p{color:rgba(255,255,255,.78)}
.band-navy .card h3,.band-navy .card h4{color:#fff}
.band-navy .icon-box{background:rgba(255,255,255,.1);box-shadow:none;color:var(--gold)}
.band-soft{background:var(--cream)}
.band-gold{background:linear-gradient(135deg,#ffe08a,var(--gold));color:var(--ink)}
.band-gold h2,.band-gold h3{color:var(--ink)}
.trustrow,.trust-strip{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;padding:18px 0;font-size:13.5px;color:var(--muted)}
.trustrow .trustcell,.trust-strip span,.trustcell{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:var(--text)}
.trustrow svg,.trust-strip svg,.trustcell svg,.trustcell i{width:16px;height:16px;color:var(--green);font-size:14px}
.trustcell .stars{color:var(--gold-2);letter-spacing:1px;font-size:12px}
.trustcell b{color:var(--navy)}
.stats{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--sh-sm)}
.stat b,.stat .num{display:block;font-family:var(--display);font-size:32px;font-weight:800;color:var(--navy);line-height:1}
.stat span{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
.band-navy .stat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.band-navy .stat b,.band-navy .stat .num{color:var(--gold)}
.band-navy .stat span{color:rgba(255,255,255,.72)}
.ticker{background:var(--ink);color:#e6eaf7;overflow:hidden;position:relative;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 48s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:10px;padding:11px 26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;white-space:nowrap;border-right:1px solid rgba(255,255,255,.08)}
.ticker-item b{color:var(--gold);font-weight:700}
.ticker-item b.pk{color:#7ef0a8}
.ticker-item i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);font-style:normal}
/* yellow offer bar (partials/offer_bar), original design */
.ystrip{background:linear-gradient(180deg,#ffd454,#ffc522);padding:14px 0}
.ystrip-row{display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap;color:#3a2900;font-weight:600;font-size:14px;text-align:center}
.ystrip-row .fire{font-size:18px;line-height:1}
.ystrip-row b{font-weight:800;color:#1a1a1a}
.countdown{display:inline-flex;gap:6px}
.countdown .seg{background:#fffbeb;padding:3px 9px;border-radius:6px;display:inline-flex;flex-direction:column;align-items:center;min-width:42px;line-height:1.1;font-size:11px;color:#7c5e10;font-weight:600}
.countdown .seg b{font-size:16px;font-weight:800;color:#1a1a1a;display:block;font-variant-numeric:tabular-nums}
.ystrip .code{background:#1a1a1a;color:#ffc522;padding:6px 14px;border-radius:8px;font-weight:800;font-size:13.5px;letter-spacing:.05em}
.ystrip .cta-btn{background:#1a1a1a;color:#fff;padding:9px 18px;border-radius:999px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.ystrip .cta-btn svg{width:14px;height:14px}
.ystrip .cta-btn:hover{background:#000;color:#ffc522;transform:translateX(3px)}
@media(max-width:640px){.ystrip-row{gap:10px;font-size:12.5px}.countdown .seg{min-width:36px;padding:2px 6px}}
.accent-line{height:5px;background:repeating-linear-gradient(90deg,var(--navy) 0 28px,var(--gold) 28px 44px,var(--blue) 44px 72px,var(--green) 72px 84px)}

/* ---------- 8. feature cards ---------- */
.feat-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.feat-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:24px;box-shadow:var(--sh-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;position:relative;overflow:hidden}
.feat-card::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;}
.feat-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:rgba(44,92,245,.35)}
.feat-card:hover::after{transform:scale(1.8)}
.feat-card .icon-box{margin-bottom:14px}
.feat-card h3,.feat-card h4{font-size:17.5px;margin:0 0 6px}
.feat-card p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.55}
.feat-card .more{display:inline-block;margin-top:10px;font-weight:800;font-size:13px}
.feat-card.gold{border-top:3px solid var(--gold)}
.feat-card.blue{border-top:3px solid var(--blue)}
.feat-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.feat-list li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--soft);border:1px solid transparent;border-radius:var(--r-sm);font-size:14.5px;line-height:1.45;transition:.25s}
.feat-list li:hover{background:#fff;border-color:var(--border);box-shadow:var(--sh-sm)}
.feat-list li svg,.feat-list li i{width:18px;height:18px;flex:none;color:var(--green);margin-top:2px;font-size:14px}
.feat-list li.no{color:var(--muted)}
.feat-list li.no svg,.feat-list li.no i{color:var(--red)}
.tick-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.tick-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.tick-list li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--green-soft);margin-top:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.band-navy .tick-list li{color:rgba(255,255,255,.9)}
.bento{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.bento .card.wide{grid-column:1/-1}
@media(min-width:900px){.bento .card.wide{grid-column:span 2}}
.flip{perspective:1000px}
.flip .flip-inner{position:relative;transition:transform .6s var(--ease);transform-style:preserve-3d;min-height:180px}
.flip:hover .flip-inner{transform:rotateY(180deg)}
.flip .front,.flip .back{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r);padding:22px}
.flip .front{background:#fff;border:1px solid var(--border);box-shadow:var(--sh-sm)}
.flip .back{background:linear-gradient(160deg,var(--navy-2),var(--navy));color:#fff;transform:rotateY(180deg)}
.flip .back p{color:rgba(255,255,255,.85)}
.why-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.why-card{padding:22px;border-radius:var(--r);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.why-card .em{font-size:28px;margin-bottom:10px}
.why-card h4{color:#fff;margin:0 0 6px;font-size:16.5px}
.why-card p{color:rgba(255,255,255,.75);font-size:14px;margin:0}

/* ---------- 9. pricing cards (hosting contract: ids and hook classes preserved) ---------- */
.pricing{position:relative}
.pr-sub{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:13.5px;color:var(--muted);margin:10px 0 18px}
.pr-sub span{display:inline-flex;gap:6px;align-items:center;font-weight:600}
.pr-sub i,.pr-sub svg{color:var(--green);width:14px;height:14px;font-size:13px}
.pr-toggle{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-pill);padding:4px;box-shadow:var(--sh-sm)}
.pr-toggle button{border:0;background:transparent;padding:9px 16px;border-radius:var(--r-pill);font-weight:800;font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:.25s}
.pr-toggle button .save{font-size:10.5px;background:var(--green-soft);color:#166534;padding:2px 7px;border-radius:var(--r-pill);font-weight:800}
.pr-toggle button.on{background:var(--navy);color:#fff;box-shadow:0 6px 14px rgba(21,36,85,.25)}
.pr-toggle button.on .save{background:var(--gold);color:var(--ink)}
.pr-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));align-items:start;margin-top:26px}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--border);border-radius:22px;padding:24px;box-shadow:var(--sh-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:rgba(44,92,245,.4)}
.pcard.best{border-color:var(--gold);background:linear-gradient(180deg,#fffbe9,#fff 30%);box-shadow:0 18px 44px rgba(245,168,0,.18)}
.pcard.max{border-color:var(--navy);background:linear-gradient(180deg,var(--blue-soft),#fff 30%)}
.pc-tag{position:absolute;top:-12px;left:20px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);background:var(--navy);color:#fff}
.pc-tag.best{background:var(--gold);color:var(--ink)}
.pc-tag.max{background:var(--blue);color:#fff}
.pc-head h4{font-family:var(--display);font-size:20px;margin:0 0 4px;color:var(--navy)}
.pc-head p{font-size:13.5px;color:var(--muted);margin:0 0 14px;min-height:20px}
.pc-price{padding:14px 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);margin-bottom:16px}
.pc-old,.hp-old-price{font-size:13px;color:var(--muted-2);text-decoration:line-through;margin-right:6px}
.pc-save,.hp-discount-badge{display:inline-block;font-size:11px;font-weight:800;background:var(--green-soft);color:#166534;padding:2px 8px;border-radius:var(--r-pill)}
.pc-amt{display:flex;align-items:baseline;gap:3px;margin:4px 0 2px}
.pc-amt .cur{font-size:15px;font-weight:800;color:var(--navy)}
.pc-amt .num{font-family:var(--display);font-size:38px;font-weight:800;color:var(--navy);line-height:1}
.pc-amt .per{font-size:13px;color:var(--muted);font-weight:700;margin-left:2px}
.pc-extra,.billing-text{display:block;font-size:12.5px;color:var(--muted);font-family:var(--mono)}
.pc-cta{display:grid;gap:8px;margin-bottom:16px}
.pc-cta .btn{width:100%}
.pc-cta .hw-quote-btn{background:#fff;border-color:rgba(21,36,85,.18);color:var(--navy)}
.pc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.pc-list li{display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.pc-list li i,.pc-list li svg{flex:none;width:16px;height:16px;color:var(--green);font-size:13px;margin-top:3px}
.pc-list li i.no,.pc-list li.no i{color:var(--red)}
.pc-list li.no{color:var(--muted-2)}
.features-container{margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.extra-features-wrapper{display:none;margin-top:10px}
.feature-category-box{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden}
.feature-category-header{background:var(--soft);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:800;font-size:13px;color:var(--navy)}
.feature-category-header i{font-size:11px;color:var(--blue);width:14px;text-align:center}
.feature-category-body{display:none;padding:10px 14px;background:#fff}
.feature-category-box.active .feature-category-body{display:block}
.inner-list li{font-size:13.5px}
.pc-features-toggle-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:800;color:var(--blue);cursor:pointer}
.pc-features-toggle-btn i{font-size:11px}
.pr-bottom{text-align:center;margin-top:22px;font-size:13.5px;color:var(--muted)}
.pr-bottom span{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center}
/* swiper hosts (vps) */
.pr-swiper{position:relative}
.pr-swiper .swiper{padding:16px 4px 40px}
.swiper-nav-prev,.swiper-nav-next{position:absolute;top:45%;z-index:5;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:var(--sh-md);display:grid;place-items:center;color:var(--navy);cursor:pointer}
.swiper-nav-prev{left:-14px}.swiper-nav-next{right:-14px}
.swiper-pagination-bullet-active{background:var(--navy)}
.pkg-toggle{display:inline-flex;gap:4px;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-pill);padding:4px;margin-bottom:10px}
.pkg-toggle button{border:0;background:transparent;padding:9px 18px;border-radius:var(--r-pill);font-weight:800;font-size:13.5px;color:var(--muted)}
.pkg-toggle button.on{background:var(--gold);color:var(--ink)}

/* ---------- 10. plan tables (static plans, licenses, backups, email) ---------- */
.plan-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));align-items:start}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--border);border-radius:22px;padding:24px;box-shadow:var(--sh-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plan:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.plan.featured,.plan.pro.featured{border-color:var(--gold);background:linear-gradient(180deg,#fffbe9,#fff 30%);box-shadow:0 18px 44px rgba(245,168,0,.18)}
.plan .tag{position:absolute;top:-12px;left:20px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);background:var(--gold);color:var(--ink)}
.plan h3,.plan h4,.plan .name{font-family:var(--display);font-size:20px;margin:0 0 4px;color:var(--navy)}
.plan .scope,.plan .desc{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.plan .price{padding:14px 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);margin-bottom:16px}
.plan .price .row{display:flex;align-items:baseline;gap:4px}
.plan .price b{font-family:var(--display);font-size:34px;font-weight:800;color:var(--navy);line-height:1}
.plan .price small{font-size:13px;color:var(--muted);font-weight:700}
.plan .price .old{text-decoration:line-through;color:var(--muted-2);font-size:13px;display:block;margin-bottom:4px}
.plan .feats{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;font-size:14px}
.plan .feats li{display:flex;gap:9px;align-items:flex-start}
.plan .feats li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat;margin-top:3px}
.plan .feats li.no::before{background:var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/9px no-repeat}
.plan .feats li.no{color:var(--muted-2)}
.plan .plan-actions,.plan .cta-row{margin-top:auto;display:grid;gap:8px}
.plan .plan-actions .btn,.plan .cta{width:100%}
.plan .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:var(--r-pill);font-weight:800;font-size:14px}
.plan .ticket-btn{background:var(--navy);color:#fff}
.plan .note{font-size:12.5px;color:var(--muted);margin-top:10px;font-family:var(--mono)}
.price-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-size:14.5px}
.price-table th,.price-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border)}
.price-table th{background:var(--soft);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.price-table tr:last-child td{border-bottom:0}
.price-table td b{color:var(--navy)}
.price-table .tld{font-family:var(--mono);font-weight:700;color:var(--navy);font-size:15px}
.table-wrap{overflow:auto;border-radius:var(--r);border:1px solid var(--border)}
.table-wrap .price-table{border:0;border-radius:0}

/* ---------- 11. domains ---------- */
.tld-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tld-pill,.pk-pill,.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);background:#fff;border:1.5px solid var(--border);font-weight:800;color:var(--navy);font-size:13.5px;box-shadow:var(--sh-sm)}
.tld-pill b,.pk-pill b,.pill b{font-family:var(--mono);color:var(--blue)}
.tld-pill span,.pk-pill span,.pill span{color:var(--muted);font-weight:600;font-size:12.5px}
.tld-pill.hot,.pk-pill.hot,.pill.hot{border-color: #22abff;background: #cce1ff73;}
.tld-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.tld-card{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--sh-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);display:flex;flex-direction:column;gap:6px}
.tld-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:rgba(44,92,245,.4)}
.tld-card.hot{border-color:var(--gold);background:linear-gradient(180deg,#fffbe9,#fff 40%)}
.tld-card .tld{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.tld-card .desc{font-size:13px;color:var(--muted);min-height:34px}
.tld-card .price{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.tld-card .price b{font-family:var(--display);font-size:24px;color:var(--navy)}
.tld-card .price small{font-size:12px;color:var(--muted);font-weight:700}
.tld-card .old{font-size:12px;color:var(--muted-2);text-decoration:line-through}
.tld-card .renew{font-size:12px;color:var(--muted);font-family:var(--mono)}
.tld-card .btn{margin-top:10px}
.tld-card .hot-tag{position:absolute;top:-11px;right:14px;background:var(--gold);color:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:var(--r-pill)}
.tld-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tld-filter button,.pck-frow button,.cat-pill{padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:#fff;font-weight:800;font-size:13px;color:var(--navy);transition:.25s}
.tld-filter button.on,.pck-frow button.on,.cat-pill.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.domain-result{margin-top:16px}
.domain-result .ok{background:var(--green-soft);color:#14532d;padding:14px 16px;border-radius:var(--r-sm);display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-weight:600}
.domain-result .taken{background:var(--amber-soft);color:#78350f;padding:14px 16px;border-radius:var(--r-sm);font-weight:600}
.domain-result .err{background:var(--red-soft);color:#7f1d1d;padding:14px 16px;border-radius:var(--r-sm)}
.whois-box{background:var(--ink);color:#e6eaf7;border-radius:var(--r);padding:20px;font-family:var(--mono);font-size:13px;line-height:1.7;border-left:4px solid var(--gold)}
.whois-box dt{color:var(--gold);font-weight:700;margin-top:8px}
.whois-box dd{margin:0;color:#fff;word-break:break-all}
.cp-select{position:relative}
.cp-select-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-pill);background:#fff;border:1.5px solid var(--border);font-weight:800;color:var(--navy)}
.cp-select-menu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--sh-lg);padding:6px;display:none;z-index:20;min-width:200px}
.cp-select.open .cp-select-menu{display:block}
.cp-select-opt{display:block;padding:9px 12px;border-radius:8px;font-weight:700;color:var(--navy);cursor:pointer}
.cp-select-opt:hover,.cp-select-opt.on{background:var(--soft)}

/* ---------- 12. compare tables ---------- */
.cmp-wrap{overflow:auto;border-radius:var(--r);border:1px solid var(--border);background:#fff;box-shadow:var(--sh-sm)}
.cmp-table,.compare-table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
.cmp-table th,.cmp-table td,.compare-table th,.compare-table td{padding:13px 16px;border-bottom:1px solid var(--border);text-align:center}
.cmp-table th:first-child,.cmp-table td:first-child,.compare-table th:first-child,.compare-table td:first-child{text-align:left;font-weight:700;color:var(--navy)}
.cmp-table thead th,.compare-table thead th{background:var(--soft);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);position:sticky;top:0}
.cmp-table th.us,.cmp-table td.us,.compare-table th.us,.compare-table td.us{background:var(--blue-soft);color:var(--navy);font-weight:800}
.cmp-table thead th.us,.compare-table thead th.us{background:var(--navy);color:#fff}
.cmp-table .sec-row td,.compare-table .sec-row td{background:var(--cream);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left}
.cmp-table tr:last-child td,.compare-table tr:last-child td{border-bottom:0}
.yes{color:var(--green-2);font-weight:800}
.no-x,.cmp-no{color:var(--red);font-weight:800}
.cmp-note{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}

/* ---------- 13. steps + timeline ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.55}
.steps li::before{content:"0" counter(s);flex:none;min-width:38px;height:34px;padding:0 8px;border-radius:9px;background:var(--navy);color:var(--gold);font-family:var(--mono);font-weight:700;display:grid;place-items:center;font-size:13px;box-shadow:0 8px 18px rgba(21,36,85,.25)}
.steps li b{display:block;color:var(--navy);margin-bottom:2px}
.band-navy .steps li{color:rgba(255,255,255,.9)}
.band-navy .steps li b{color:#fff}
.band-navy .steps li::before{background:var(--gold);color:var(--ink)}
.steps-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));counter-reset:sg}
.step-card{counter-increment:sg;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--sh-sm);position:relative}
.step-card::before{content:"0" counter(sg);display:inline-grid;place-items:center;min-width:38px;height:34px;padding:0 8px;border-radius:9px;background:var(--navy);color:var(--gold);font-family:var(--mono);font-weight:700;font-size:13px;margin-bottom:12px}
.step-card h4{font-size:16.5px;margin:0 0 6px}
.step-card p{font-size:14px;color:var(--muted);margin:0}
.band-navy .step-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.band-navy .step-card h4{color:#fff}
.band-navy .step-card p{color:rgba(255,255,255,.78)}
.band-navy .step-card::before{background:var(--gold);color:var(--ink)}
.timeline{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px dashed var(--border);display:grid;gap:18px}
.timeline li{position:relative;padding-left:14px}
.timeline li::before{content:"";position:absolute;left:-29px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.timeline li b{display:block;color:var(--navy)}
.timeline li span{font-size:14px;color:var(--muted)}

/* ---------- 14. FAQ (contract: .faq-item > .faq-q toggles .open) ---------- */
.faq-head{max-width:720px;margin:0 auto 26px;text-align:center}
.faq-list{display:grid;gap:10px;max-width:860px;margin:0 auto}
.faq.two-col .faq-list{max-width:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:start}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);transition:.3s}
.faq-item.open{border-color:var(--blue);box-shadow:var(--sh-sm)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;background:none;border:0;text-align:left;font-weight:800;font-size:15.5px;color:var(--navy);cursor:pointer;font-family:var(--body)}
.faq-q .chev,.faq-q i.chev{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:12px;transition:.3s}
.faq-q .chev::before{content:"+";font-size:16px;font-weight:400;line-height:1}
.faq-q i.chev::before{content:"+";font-family:var(--body);font-style:normal}
.faq-item.open .faq-q .chev{transform:rotate(45deg);background:var(--navy);color:#fff}
.faq-a{display:none;padding:0 18px 18px;font-size:15px;line-height:1.65;color:var(--text)}
.faq-item.open .faq-a{display:block;animation:fadeUp .35s var(--ease)}
.faq-a p:last-child{margin-bottom:0}
.faq-cta{text-align:center;margin-top:22px;font-size:14px;color:var(--muted)}

/* ---------- 15. testimonials ---------- */
.testi-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.testi{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:12px}
.testi .stars{color:var(--gold-2);font-size:13px;letter-spacing:2px}
.testi p{font-size:15px;line-height:1.6;margin:0;color:var(--text)}
.testi .who{display:flex;align-items:center;gap:10px;margin-top:auto}
.testi .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.testi .who b{display:block;font-size:14px;color:var(--navy)}
.testi .who small{color:var(--muted);font-size:12.5px}
.marquee{overflow:hidden;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
.sec-soft .marquee::before{background:linear-gradient(90deg,var(--cream),transparent)}
.sec-soft .marquee::after{background:linear-gradient(270deg,var(--cream),transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:ticker 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .testi{width:340px;flex:none}
.quote-big{font-family:var(--display);font-size:clamp(20px,2.4vw,28px);line-height:1.35;color:var(--navy);font-weight:700}
.quote-big::before{content:"\201C";color:var(--gold);font-size:1.6em;line-height:0;vertical-align:-.3em;margin-right:4px}

/* ---------- 16. CTA + contact + money back ---------- */
.fcta{background:linear-gradient(160deg,var(--navy-2),var(--navy) 60%,#1a2f6e);color:#fff;position:relative;overflow:hidden}
.fcta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 80%);pointer-events:none}
.fcta .wrap{position:relative;display:grid;gap:26px;align-items:center}
@media(min-width:900px){.fcta .wrap{grid-template-columns:1.2fr .8fr}}
.fcta h2{color:#fff;margin:12px 0 10px}
.fcta p{color:rgba(255,255,255,.8);font-size:17px;margin:0 0 20px}
.fcta .price{font-family:var(--display);font-size:42px;color:var(--gold);font-weight:800;line-height:1}
.fcta .price small{font-size:14px;color:rgba(255,255,255,.7);font-family:var(--body);font-weight:600}
.fcta-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:22px;backdrop-filter:blur(8px)}
.fcta-card .row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.14);font-size:14px}
.fcta-card .row:last-child{border-bottom:0}
.fcta-card .row b{color:var(--gold);font-family:var(--mono);font-weight:600}
.mini-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.mini-c{display:flex;gap:14px;align-items:center;padding:18px;background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-sm);color:var(--text);transition:.35s var(--ease)}
a.mini-c:hover{transform:translateY(-4px);box-shadow:var(--sh-md);color:var(--text)}
.mini-c b{display:block;color:var(--navy);font-size:15px}
.mini-c span{font-size:13px;color:var(--muted)}
.mini-c.wide{grid-column:1/-1;background:linear-gradient(135deg,var(--gold-soft),#fff)}
/* =========================================================
   APPLE-TIER ULTRA CLEAN CONTACT & GUARANTEE SECTION
============================================================ */

.contact-section-wrap {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  padding: 32px;
  border-radius: 28px;
}

/* 5 Columns Layout for Desktop */
.hw-contact-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

/* Luxury Card Base */
.hw-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
  border: 1px solid #f1f5f9;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}

.hw-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 32px -8px rgba(27, 91, 245, 0.12), 0 4px 8px rgba(0, 0, 0, 0.02);
  border-color: #cbd5e1;
}

/* Icons Squircle */
.hw-card .hw-icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: transform 0.3s ease;
}

.hw-card:hover .hw-icon-circle {
  transform: scale(1.1);
}

.hw-card .hw-icon-circle svg {
  width: 22px;
  height: 22px;
}

/* Individual Icon Aesthetic Accents */
.hw-icon-circle.chat { background: #eff6ff; color: #2563eb; }
.hw-icon-circle.whatsapp { background: #ecfdf5; color: #10b981; }
.hw-icon-circle.phone { background: #fef2f2; color: #ef4444; }
.hw-icon-circle.mail { background: #f8fafc; color: #475569; }

/* Card Typography */
.hw-card b {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}

.hw-card span.subtext {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 5th CTA Card (Glossy Royal Blue) */
.hw-card.cta-blue {
  background: linear-gradient(135deg, #1b5bf5 0%, #1043bc 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px -4px rgba(27, 91, 245, 0.38);
}

.hw-card.cta-blue:hover {
  box-shadow: 0 16px 34px -4px rgba(27, 91, 245, 0.48);
}

.hw-card.cta-blue .hw-icon-circle {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.hw-card.cta-blue b {
  color: #ffffff;
}

.hw-card.cta-blue span.subtext {
  color: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

.hw-card.cta-blue:hover span.subtext span.arrow {
  transform: translateX(4px);
}
.hw-card.cta-blue span.subtext span.arrow {
  transition: transform 0.25s ease;
}

/* -----------------------------------------------------------
   REFINED GUARANTEE BANNER (SLEEK GLASS CAPSULE)
-------------------------------------------------------------- */
.hw-guarantee-banner {
  max-width: 820px;
  margin: 0 auto;
  background: linear-gradient(135deg, #1b5bf5 0%, #0d3eb8 100%);
  border-radius: 22px;
  padding: 24px 34px;
  display: flex;
  align-items: center;
  gap: 26px;
  color: #ffffff;
  box-shadow: 0 14px 32px -8px rgba(27, 91, 245, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}

/* Light Shine Effect across Banner */
.hw-guarantee-banner::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 65%);
  pointer-events: none;
}

/* Left Seal Badge */
.hw-gb-badge {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
}

.hw-badge-svg {
  width: 90px;
  height: 90px;
  display: block;
}

/* Right Content */
.hw-gb-content h3 {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: -0.4px;
}

.hw-gb-content p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  font-weight: 400;
}

/* -----------------------------------------------------------
   RESPONSIVE DESIGN (Tablets & Mobile)
-------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hw-contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .hw-contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hw-guarantee-banner {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
    gap: 16px;
  }
  
  .hw-gb-badge {
    margin: 0 auto;
  }
}

@media (max-width: 500px) {
  .hw-contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-section-wrap {
    padding: 16px;
  }
}
.mb-banner,.mb-blue{display:flex;gap:16px;align-items:center;padding:20px 22px;border-radius:var(--r);background:linear-gradient(135deg,var(--blue-soft),#fff);border:1px solid var(--blue-tint);box-shadow:var(--sh-sm);margin-top:18px}
.mb-banner .icon-box,.mb-blue .icon-box{flex:none}
.mb-banner b,.mb-blue b{display:block;color:var(--navy);font-size:16px}
.mb-banner p,.mb-blue p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.handoff{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--r);background:linear-gradient(135deg,#fff8e1,#fff);border:1px solid #ffe08a;box-shadow:var(--sh-sm)}
.handoff b{color:var(--navy)}
.handoff p{margin:2px 0 0;font-size:14px}
.pay-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pay-badges span{display:inline-flex;align-items:center;padding:6px 11px;border-radius:8px;background:#fff;border:1px solid var(--border);font-weight:800;font-size:12px;color:var(--navy)}
.pay-badges span.jc{background:#d7262b;color:#fff;border-color:#d7262b}
.pay-badges span.ep{background:#1a8f3a;color:#fff;border-color:#1a8f3a}
.pay-badges span.visa{color:#1a1f71}
.pay-badges span.mc{color:#eb001b}
.band-navy .pay-badges span{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}

/* ---------- 17. forms ---------- */
.form{display:grid;gap:14px}
.form-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.form-grid .full{grid-column:1/-1}
.fld,.sel,.ta,.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=number],.form input[type=url],.form input[type=password],.form input[type=search],.form input[type=file],.form select,.form textarea{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:14px;font:inherit;font-size:15px;background:#fff;color:var(--text);outline:0;transition:.25s}
.form input:focus,.form select:focus,.form textarea:focus,.fld:focus,.sel:focus,.ta:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(44,92,245,.12)}
.form label,.lbl{display:block;font-size:13px;font-weight:800;color:var(--navy);margin-bottom:6px}
.form .hint,.hint{font-size:12.5px;color:var(--muted)}
.form .err,.err-text{font-size:13px;color:#b91c1c;font-weight:700}
.form .chk{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600}
.prio-pill,.pill-opt{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:#fff;font-weight:800;font-size:13px;color:var(--navy);cursor:pointer}
.prio-pill.on,.pill-opt.on,.prio-pill:has(input:checked),.pill-opt:has(input:checked){background:var(--navy);color:#fff;border-color:var(--navy)}
.prio-pill input,.pill-opt input{position:absolute;opacity:0;pointer-events:none}
.dropzone{border:2px dashed var(--border);border-radius:var(--r);padding:22px;text-align:center;color:var(--muted);font-size:14px;background:var(--soft);transition:.25s}
.dropzone.drag,.dropzone:hover{border-color:var(--blue);background:var(--blue-soft)}
.form-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:24px;box-shadow:var(--sh-md)}
@media(min-width:760px){.form-card{padding:32px}}
.form-card .top-line{height:5px;border-radius:24px 24px 0 0;background:linear-gradient(90deg,var(--navy),var(--blue) 50%,var(--gold));margin:-24px -24px 24px}
@media(min-width:760px){.form-card .top-line{margin:-32px -32px 28px}}
.alert{padding:14px 16px;border-radius:var(--r-sm);font-size:14.5px;line-height:1.5}
.alert.ok,.alert-success{background:var(--green-soft);color:#14532d}
.alert.bad,.alert-error{background:var(--red-soft);color:#7f1d1d}
.alert.warn{background:var(--amber-soft);color:#78350f}
.alert.info{background:var(--blue-tint);color:#1e3a8a}
.range{width:100%;accent-color:var(--blue)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--r-pill);overflow:hidden}
.qty button{width:40px;height:40px;border:0;background:var(--soft);font-size:18px;font-weight:800;color:var(--navy)}
.qty input{width:56px;text-align:center;border:0;font-weight:800;font-size:15px;outline:0}
.kv{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.kv div{background:var(--soft);border-radius:var(--r-sm);padding:12px 14px}
.kv small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kv b{display:block;font-size:15px;color:var(--navy);margin-top:3px;word-break:break-word}
.code-block{background:var(--ink);color:#e6eaf7;padding:16px 18px;border-radius:var(--r-sm);font-family:var(--mono);font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-all;margin:0;border-left:3px solid var(--gold)}

/* ---------- 18. tabs + badges ---------- */
.tabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-pill);padding:4px;box-shadow:var(--sh-sm)}
.tabs button,.tab{border:0;background:transparent;padding:9px 16px;border-radius:var(--r-pill);font-weight:800;font-size:13.5px;color:var(--muted);transition:.25s;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tabs button.on,.tab.on{background:var(--navy);color:#fff}
.tabs.gold button.on{background:var(--gold);color:var(--ink)}
.qb-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-radius:16px;width:100%}
.qb-tabs button{justify-content:center;border-radius:12px}
@media(max-width:640px){.qb-tabs button{padding:9px 6px;font-size:12.5px}}
.pane{display:none}
.pane.on{display:block;animation:fadeUp .4s var(--ease)}
.tabs-v{display:grid;gap:24px}
@media(min-width:900px){.tabs-v{grid-template-columns:260px 1fr}}
.tabs-v .tab-list{display:grid;gap:6px}
.tabs-v .tab-list button{text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;font-weight:800;color:var(--navy);display:flex;gap:10px;align-items:center}
.tabs-v .tab-list button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--blue-soft);color:var(--blue-2)}
.badge.gold{background:var(--gold);color:var(--ink)}
.badge.green{background:var(--green-soft);color:#166534}
.badge.red{background:var(--red-soft);color:#991b1b}
.badge.navy{background:var(--navy);color:#fff}
.badge.new{background:var(--gold);color:var(--ink)}
.num-head{display:flex;align-items:center;gap:10px}
.num-head .n{font-family:var(--mono);font-size:12px;color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-tint);padding:3px 8px;border-radius:6px;font-weight:700;letter-spacing:.06em}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.accordion .acc-item{border:1px solid var(--border);border-radius:var(--r-sm);background:#fff;margin-bottom:8px}
.accordion .acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:none;border:0;font-weight:800;color:var(--navy);text-align:left}
.accordion .acc-a{display:none;padding:0 16px 14px;font-size:14.5px;color:var(--text)}
.accordion .acc-item.open .acc-a{display:block}

/* ---------- 19. legal pages ---------- */
.legal-layout{display:grid;gap:36px;align-items:start}
@media(min-width:960px){.legal-layout{grid-template-columns:260px 1fr}}
.toc{position:sticky;top:calc(var(--header-h) + 16px);background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--sh-sm)}
.toc h4{font-size:11px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a{display:block;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--text);font-weight:600;border-left:3px solid transparent}
.toc a.on,.toc a:hover{background:var(--soft);color:var(--navy);border-left-color:var(--gold)}
.legal-body{max-width:820px;font-size:16px;line-height:1.75}
.legal-body h2{font-size:24px;margin:40px 0 12px;padding-top:8px;scroll-margin-top:calc(var(--header-h) + 20px)}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:18px;margin:22px 0 8px}
.legal-body ul,.legal-body ol{padding-left:1.4em}
.legal-body li{margin-bottom:6px}
.legal-body .meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:20px}
.legal-body table{width:100%;border-collapse:collapse;font-size:14.5px;margin:14px 0}
.legal-body th,.legal-body td{padding:10px 12px;border:1px solid var(--border);text-align:left;vertical-align:top}
.legal-body th{background:var(--soft)}
.reading-progress{position:fixed;left:0;top:0;height:3px;background:var(--gold);width:0;z-index:95;transition:width .15s}
.policy-switch{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 20. quotation pages ---------- */
.qb-layout{display:grid;gap:28px;align-items:start}
@media(min-width:1000px){.qb-layout{grid-template-columns:1.3fr .9fr}}
.qb-summary{position:sticky;top:calc(var(--header-h) + 16px)}
.qb-items{display:grid;gap:8px}
.qb-item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 14px;background:var(--soft);border-radius:var(--r-sm);font-size:14px;border-left:3px solid var(--blue)}
.qb-item b{display:block;color:var(--navy)}
.qb-item small{color:var(--muted)}
.qb-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;margin-top:12px;border-top:2px solid var(--navy);font-weight:800;font-size:18px;color:var(--navy)}
.quote-doc{background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-md);overflow:hidden}
.quote-doc .qd-head{background:linear-gradient(160deg,var(--navy-2),var(--navy));color:#fff;padding:26px 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.quote-doc .qd-head h1{color:#fff;font-size:26px;margin:0}
.quote-doc .qd-head .no{font-family:var(--mono);color:var(--gold);font-size:14px}
.quote-doc .qd-body{padding:26px 28px}
.quote-doc table{width:100%;border-collapse:collapse;font-size:14.5px}
.quote-doc th,.quote-doc td{padding:11px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.quote-doc th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.quote-doc td.r,.quote-doc th.r{text-align:right;white-space:nowrap}
.quote-doc .totals{margin-left:auto;max-width:340px;margin-top:16px}
.quote-doc .totals .row{display:flex;justify-content:space-between;padding:6px 0;font-size:14.5px}
.quote-doc .totals .grand{border-top:2px solid var(--navy);margin-top:6px;padding-top:10px;font-weight:800;font-size:18px;color:var(--navy)}
.status-pill{display:inline-flex;padding:4px 10px;border-radius:var(--r-pill);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.status-pill.sent,.status-pill.quoted{background:var(--blue-soft);color:var(--blue-2)}
.status-pill.accepted{background:var(--green-soft);color:#166534}
.status-pill.expired,.status-pill.cancelled{background:var(--red-soft);color:#991b1b}
.status-pill.draft,.status-pill.new{background:var(--soft);color:var(--muted)}
.success-box{text-align:center;padding:30px 20px}
.success-box .ok{width:76px;height:76px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;margin:0 auto 14px;color:var(--green-2)}
.success-box .ok svg{width:36px;height:36px}
.success-box .no{font-family:var(--mono);background:var(--soft);display:inline-block;padding:6px 12px;border-radius:8px;font-weight:800;color:var(--navy)}

/* ---------- 21. footer ---------- */
.hwf{background:var(--navy-2);color:#cfd6ea;padding:56px 0 0;position:relative;overflow:hidden}
.hwf::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 70%);pointer-events:none}
.hwf .wrap{position:relative}
.hwf-grid{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:700px){.hwf-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.hwf-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr}}
.hwf-brand .logo-img{height:42px;filter:brightness(0) invert(1);margin-bottom:14px}
.hwf-brand p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.72)}
.hwf-tp{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;margin:6px 0 14px;font-size:12.5px}
.hwf-tp b{color:#fff;font-size:15px}
.hwf-tp .stars{color:var(--gold);letter-spacing:1px}
.hwf-stats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.hwf-stats span{font-family:var(--mono);font-size:11px;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#e6eaf7}
.hwf-stats span b{color:var(--gold)}
.hwf-social{display:flex;gap:8px}
.hwf-social a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:#fff;transition:.25s}
.hwf-social a:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.hwf-social svg{width:16px;height:16px}
.hwf-sec h6{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 12px;font-weight:700}
.hwf-sec+.hwf-sec{margin-top:22px}
.hwf-sec ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.hwf-sec a{color:rgba(255,255,255,.78);font-size:14px;display:inline-flex;align-items:center;gap:6px}
.hwf-sec a:hover{color:#fff}
.hwf-sec a .badge{font-size:9.5px;padding:2px 6px}
.hwf-mbg{margin-top:16px;padding:14px;border-radius:12px;background:rgba(255,197,34,.1);border:1px solid rgba(255,197,34,.3);font-size:13px;color:#fff}
.hwf-mbg b{display:block;color:var(--gold);margin-bottom:3px}
.hw-footer-sites{margin-top:16px}
.hw-footer-sites-title{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-weight:700}
.hw-footer-sites-list{display:grid;gap:6px}
.hw-footer-site-link{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.85);font-size:14px;font-weight:700}
.hw-footer-site-badge{width:26px;height:26px;border-radius:7px;background:var(--navy);display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff}
.hw-footer-site-badge--sw{background:var(--green-2)}
.hw-footer-site-badge--dw{background:var(--gold-2);color:var(--ink)}
.hwf-bottom{margin-top:44px;border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.6)}
.hwf-bottom b{color:#fff}
.wapop{position:fixed;left:18px;bottom:22px;z-index:72;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px rgba(37,211,102,.4);transition:.3s}
.wapop:hover{transform:scale(1.06);color:#fff}
.wapop svg{width:28px;height:28px}
/*@media(max-width:820px){.wapop{display:none}}*/
/*.totop{position:fixed;right:18px;bottom:22px;z-index:72;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--border);box-shadow:var(--sh-md);color:var(--navy);display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s}*/
/*.totop.show{opacity:1;visibility:visible;transform:none}*/
/*.totop svg{width:20px;height:20px}*/
/*@media(max-width:820px){.totop{bottom:84px;right:12px}}*/

@media(max-width:820px) {
    .wapop {
        display: none;
    }
}

.totop {
    position: fixed;
    left: 50%;
    bottom: 22px;
    right: auto;
    z-index: 72;

    width: 44px;
    height: 44px;
    border-radius: 12px;

    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--sh-md);
    color: var(--navy);

    display: grid;
    place-items: center;

    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: .3s;
}

.totop.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.totop svg {
    width: 20px;
    height: 20px;
}

@media(max-width:820px) {
    .totop {
        bottom: 84px;
    }
}

.progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--gold));width:0;z-index:96;transition:width .1s linear}

/* ---------- 22. motion + reveal ---------- */
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.18)}50%{box-shadow:0 0 0 7px rgba(34,197,94,.05)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.spin{display:inline-block;width:18px;height:18px;border:2.5px solid rgba(44,92,245,.25);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}
.btn .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}[data-reveal]{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ---------- 23. VIP layer (catalog, tools, network, quotation modal, basket) ---------- */
/* appended below from the former hw-vip.css, unchanged class names */
.hv{font-family:var(--hv-body);color:var(--hv-text);line-height:1.6;-webkit-font-smoothing:antialiased}
.hv *{box-sizing:border-box}
.hv-ic{width:1em;height:1em;flex:none;vertical-align:-.15em}
/* scoped to page content + modal only, so header/footer/nav look the same on every page */
:where(.hv main,main .hv,.hv-modal) :is(h1,h2,h3),:where(.hv main,main .hv,.hv-modal) .hv-display{font-family:var(--hv-display);letter-spacing:-.02em;line-height:1.12;margin:0}
:where(.hv main,main .hv,.hv-modal) p{margin:0 0 1em}
.hv-mono{font-family:var(--hv-mono);font-size:12.5px;letter-spacing:.02em}
.hv-urdu{font-family:var(--hv-urdu);direction:rtl;line-height:2}
.hv-wrap{width:min(1200px,calc(100% - 32px));margin:0 auto}
.hv-section{padding:56px 0}
@media(min-width:900px){.hv-section{padding:76px 0}}
.hv-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hv-blue);background:var(--hv-blue-soft);border:1px solid var(--hv-blue-tint);padding:6px 12px 6px 8px;border-radius:var(--hv-r-pill)}
.hv-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hv-green);box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.hv-h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;color:var(--hv-navy);margin:12px 0 14px}
.hv-h2 em{font-style:normal;color:var(--hv-blue);}
.hv-lead{font-size:17px;color:var(--hv-muted);max-width:720px}
.hv-muted{color:var(--hv-muted)}
.hv-center{text-align:center}
.hv-center .hv-lead{margin-inline:auto}
.hv-navy-band{background:linear-gradient(160deg,var(--hv-navy-2),var(--hv-navy) 60%,#1a2f6e);color:#fff;position:relative;overflow:hidden}
.hv-navy-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 80%);pointer-events:none}
.hv-navy-band .hv-h2,.hv-navy-band h3{color:#fff}
.hv-navy-band .hv-lead{color:rgba(255,255,255,.78)}
.hv-navy-band .hv-eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:var(--hv-gold)}

/* ---------- buttons ---------- */
.hv-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:var(--hv-r-pill);font-weight:800;font-size:15px;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1;transition:transform .35s var(--hv-ease),box-shadow .35s var(--hv-ease),background .25s;font-family:var(--hv-body);white-space:nowrap}
.hv-btn svg{width:18px;height:18px;flex:none}
.hv-btn-gold{background:linear-gradient(135deg,#ffd75c,var(--hv-gold-2));color:var(--hv-ink);box-shadow:0 10px 26px rgba(245,168,0,.32)}
.hv-btn-gold:hover{color:var(--hv-ink);transform:translateY(-3px);box-shadow:0 18px 36px rgba(245,168,0,.42)}
.hv-btn-blue{background:linear-gradient(135deg,var(--hv-blue),var(--hv-blue-2));color:#fff;box-shadow:0 10px 26px rgba(44,92,245,.3)}
.hv-btn-blue:hover{color:#fff;transform:translateY(-3px);box-shadow:0 18px 36px rgba(44,92,245,.4)}
.hv-btn-navy{background:var(--hv-navy);color:#fff;box-shadow:0 10px 26px rgba(21,36,85,.28)}
.hv-btn-navy:hover{color:#fff;transform:translateY(-3px)}
.hv-btn-outline{background:#fff;border-color:rgba(21,36,85,.18);color:var(--hv-navy)}
.hv-btn-outline:hover{color:var(--hv-navy);border-color:var(--hv-navy);transform:translateY(-2px)}
.hv-navy-band .hv-btn-outline,.hv-console .hv-btn-outline{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.hv-navy-band .hv-btn-outline:hover,.hv-console .hv-btn-outline:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.06)}
.hv-btn-wa{background:#25d366;color:#fff;box-shadow:0 10px 24px rgba(37,211,102,.3)}
.hv-btn-wa:hover{color:#fff;transform:translateY(-3px)}
.hv-btn-sm{padding:10px 16px;font-size:13px}
.hv-btn-block{width:100%}
.hv-btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- network bar ---------- */
.hv-net{background:var(--hv-ink);color:#cfd6ea;font-family:var(--hv-body);font-size:12.5px;position:relative;z-index:60;border-bottom:1px solid rgba(255,255,255,.06)}
.hv-net .hv-wrap{display:flex;align-items:center;gap:14px;min-height:38px;flex-wrap:wrap}
.hv-net-label{display:flex;align-items:center;gap:8px;font-weight:800;color:#fff;letter-spacing:.02em}
.hv-net-label i{width:8px;height:8px;border-radius:50%;background:var(--hv-green);box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:hvPulse 2.4s infinite}
@keyframes hvPulse{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.18)}50%{box-shadow:0 0 0 7px rgba(34,197,94,.05)}}
.hv-net-links{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.hv-net-link{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--hv-r-pill);color:#e6eaf7;text-decoration:none;border:1px solid rgba(255,255,255,.1);transition:.25s;font-weight:700}
.hv-net-link b{width:7px;height:7px;border-radius:50%;background:var(--c,#2c5cf5);box-shadow:0 0 10px var(--c,#2c5cf5)}
.hv-net-link.is-self{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.hv-net-link:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.hv-net-link small{opacity:.65;font-weight:500}
@media(max-width:640px){.hv-net-link small{display:none}.hv-net-label{display:none}.hv-net-links{margin-left:0;width:100%;justify-content:space-between}.hv-net-link{padding:4px 9px;font-size:12px}.hv-net .hv-wrap{gap:6px;min-height:34px}}

/* ---------- light hero (same language as the home page) ---------- */
/*.hv-hero{position:relative;overflow:hidden;color:var(--hv-text);padding:48px 0 60px;background:#fff;background-image:radial-gradient(900px 480px at 92% -10%,rgba(44,92,245,.16),transparent 60%),radial-gradient(640px 420px at -5% 105%,rgba(255,197,34,.22),transparent 58%),linear-gradient(180deg,#fff,var(--hv-cream))}*/
.hv-hero {
    position: relative;
    overflow: visible;  
    z-index: 50;       
    color: var(--hv-text);
    padding: 48px 0 60px;
    background: #fff;
    background-image: radial-gradient(900px 480px at 92% -10%,rgba(44,92,245,.16),transparent 60%),radial-gradient(640px 420px at -5% 105%,rgba(255,197,34,.22),transparent 58%),linear-gradient(180deg,#fff,var(--hv-cream));
}
@media(min-width:900px){.hv-hero{padding:64px 0 84px}}
.hv-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(21,36,85,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(21,36,85,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 30%,#000 25%,transparent 78%);pointer-events:none}
.hv-hero .hv-wrap{position:relative;z-index:2}
.hv-hero-grid{display:grid;gap:36px;align-items:center}
@media(min-width:960px){.hv-hero-grid{grid-template-columns:1.1fr .9fr;gap:56px}}
.hv-crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--hv-muted);margin:0 0 18px;padding:0;list-style:none;font-family:var(--hv-mono)}
.hv-crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.hv-crumbs a{color:var(--hv-navy);text-decoration:none}
.hv-crumbs a:hover{text-decoration:underline}
.hv-hero h1{font-size:clamp(32px,4.8vw,58px);font-weight:800;color:var(--hv-navy);margin:14px 0 16px}
/*.hv-hero h1 em{font-style:normal;color:var(--hv-blue);background:linear-gradient(transparent 60%,var(--hv-gold) 60%,var(--hv-gold) 86%,transparent 86%);padding:0 .08em}*/
.hv-hero h1 em{font-style:normal;color:var(--hv-blue);padding:0 .08em}
.hv-hero-sub{font-size:17px;line-height:1.65;color:var(--hv-muted);max-width:620px;margin-bottom:24px}
.hv-hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hv-hero-note{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--hv-muted)}
.hv-hero-note span{display:inline-flex;align-items:center;gap:6px}
.hv-hero-note svg{width:15px;height:15px;color:var(--hv-green)}
.hv-hero-urdu{font-family:var(--hv-urdu);font-size:20px;color:var(--hv-navy);direction:rtl;display:inline-block;margin-left:10px;opacity:.9}
.hv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.hv-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--hv-r-pill);font-size:12.5px;font-weight:700;background:#fff;border:1px solid var(--hv-border);color:var(--hv-navy);box-shadow:var(--hv-sh-sm)}
.hv-chip.gold{background:var(--hv-gold-soft);border-color:#ffe08a;color:#7a5200}
.hv-chip.green{background:var(--hv-green-soft);border-color:#bbf7d0;color:#166534}
.hv-chip.blue{background:var(--hv-blue-soft);border-color:var(--hv-blue-tint);color:var(--hv-blue-2)}
.hv-hero-stack{position:relative}
.hv-orb{display:none}

/* ---------- ticker strip (tech + pakistan facts) ---------- */
.hv-ticker{background:var(--hv-ink);color:#e6eaf7;overflow:hidden;position:relative;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.hv-ticker::before,.hv-ticker::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.hv-ticker::before{left:0;background:linear-gradient(90deg,var(--hv-ink),transparent)}
.hv-ticker::after{right:0;background:linear-gradient(270deg,var(--hv-ink),transparent)}
.hv-ticker-track{display:flex;gap:0;width:max-content;animation:hvTicker 48s linear infinite}
.hv-ticker:hover .hv-ticker-track{animation-play-state:paused}
.hv-ticker-item{display:inline-flex;align-items:center;gap:10px;padding:11px 26px;font-family:var(--hv-mono);font-size:12.5px;letter-spacing:.03em;white-space:nowrap;border-right:1px solid rgba(255,255,255,.08)}
.hv-ticker-item b{color:var(--hv-gold);font-weight:700}
.hv-ticker-item i{width:7px;height:7px;border-radius:50%;background:var(--hv-green);box-shadow:0 0 8px var(--hv-green);font-style:normal}
.hv-ticker-item .pk{color:#7ef0a8}
@keyframes hvTicker{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hv-ticker-track{animation:none}}

/* ---------- console card (navy, 3D tilt) ---------- */
.hv-3d{transform-style:preserve-3d;transition:transform .5s var(--hv-ease);will-change:transform}
.hv-console{position:relative;border-radius:24px;padding:24px;background:linear-gradient(160deg,var(--hv-navy-2),var(--hv-navy) 70%,#1a2f6e);color:#fff;box-shadow:var(--hv-sh-lg),inset 0 1px 0 rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.hv-console::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse at 80% 0%,#000 10%,transparent 70%);pointer-events:none}
.hv-console>*{position:relative}
.hv-console-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;font-family:var(--hv-mono);font-size:11.5px;color:rgba(255,255,255,.6);letter-spacing:.04em}
.hv-console-bar .dots{display:flex;gap:5px}
.hv-console-bar .dots i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.hv-console-bar .dots i:nth-child(2){background:var(--hv-gold)}
.hv-console-bar .dots i:nth-child(3){background:var(--hv-green)}
.hv-console-bar .live{display:inline-flex;align-items:center;gap:6px;color:#7ef0a8}
.hv-console-bar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hv-green);box-shadow:0 0 8px var(--hv-green);animation:hvPulse 2s infinite}
.hv-price-card{transform:translateZ(0)}
.hv-price-card .lbl{font-family:var(--hv-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hv-price-card .big{font-family:var(--hv-display);font-size:clamp(38px,5vw,56px);font-weight:800;line-height:1;margin:8px 0 4px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;color:var(--hv-gold);transform:translateZ(30px)}
.hv-price-card .big small{font-size:15px;font-weight:600;color:rgba(255,255,255,.7);font-family:var(--hv-body)}
.hv-price-card .old{color:rgba(255,255,255,.5);text-decoration:line-through;font-size:14px}
.hv-price-card .save{display:inline-block;background:var(--hv-green);color:#052e16;font-weight:800;font-size:12px;padding:3px 9px;border-radius:var(--hv-r-pill);margin-left:8px;vertical-align:middle;font-family:var(--hv-body)}
.hv-price-card .cyc{margin:6px 0 14px;font-size:13px;color:rgba(255,255,255,.72)}
.hv-price-card ul{list-style:none;margin:0 0 18px;padding:14px 0 0;border-top:1px dashed rgba(255,255,255,.14);display:grid;gap:8px}
.hv-price-card li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.9)}
.hv-price-card li svg{width:16px;height:16px;color:var(--hv-green);flex:none;margin-top:3px}
.hv-price-card .hv-btn+.hv-btn{margin-top:10px}
.hv-price-card .pay{margin-top:14px;font-size:12px;color:rgba(255,255,255,.6);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hv-price-card .pay b{background:rgba(255,255,255,.1);padding:3px 8px;border-radius:6px;color:#fff;font-weight:700;font-size:11.5px}
.hv-owner-tag{position:absolute;top:-1px;right:18px;background:var(--hv-gold);color:var(--hv-ink);font-weight:800;font-size:11px;padding:6px 12px;border-radius:0 0 10px 10px;letter-spacing:.06em;text-transform:uppercase;transform:translateZ(40px)}
.hv-leds{display:flex;gap:4px;align-items:center}
.hv-leds i{width:6px;height:6px;border-radius:2px;background:rgba(255,255,255,.18)}
.hv-leds i.on{background:var(--hv-green);box-shadow:0 0 6px var(--hv-green);animation:hvBlink 1.6s infinite}
.hv-leds i.on:nth-child(2n){animation-delay:.4s}
.hv-leds i.on:nth-child(3n){animation-delay:.9s}
.hv-leds i.gold{background:var(--hv-gold);box-shadow:0 0 6px var(--hv-gold)}
@keyframes hvBlink{0%,100%{opacity:1}50%{opacity:.35}}

/* spec strip under the hero */
.hv-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--hv-border);border:1px solid var(--hv-border);border-radius:var(--hv-r);overflow:hidden;box-shadow:var(--hv-sh-sm)}
.hv-spec{background:#fff;padding:14px 16px;display:grid;gap:3px}
.hv-spec small{font-family:var(--hv-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hv-muted)}
.hv-spec b{font-size:15px;color:var(--hv-navy);font-weight:800;line-height:1.3}
.hv-spec b.pk{color:var(--hv-green-2)}

/* ---------- pakistan map ---------- */
.hv-pkmap{position:relative;width:100%;max-width:420px;margin:0 auto}
.hv-pkmap svg{width:100%;height:auto;display:block;overflow:visible}
.hv-pkmap .land{fill:var(--hv-blue-soft);stroke:var(--hv-blue);stroke-width:1.4;stroke-linejoin:round}
.hv-console .hv-pkmap .land,.hv-navy-band .hv-pkmap .land{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.45)}
.hv-pkmap .grid{stroke:var(--hv-blue);stroke-opacity:.12;stroke-width:.6}
.hv-console .hv-pkmap .grid,.hv-navy-band .hv-pkmap .grid{stroke:#fff;stroke-opacity:.1}
.hv-pkmap .pin{fill:var(--hv-gold);stroke:#fff;stroke-width:2}
.hv-pkmap .ring{fill:none;stroke:var(--hv-gold);stroke-width:1.5;opacity:0;transform-origin:center;transform-box:fill-box;animation:hvRing 2.6s ease-out infinite}
.hv-pkmap .pin.live{fill:var(--hv-green)}
.hv-pkmap .ring.live{stroke:var(--hv-green)}
.hv-pkmap .lbl{font-family:var(--hv-mono);font-size:10.5px;fill:var(--hv-navy);font-weight:700}
.hv-console .hv-pkmap .lbl,.hv-navy-band .hv-pkmap .lbl{fill:#fff}
.hv-pkmap .lbl small{font-size:9px;fill:var(--hv-muted)}
.hv-pkmap .link{fill:none;stroke:var(--hv-blue);stroke-width:1.2;stroke-dasharray:4 5;animation:hvDash 3s linear infinite;opacity:.7}
.hv-console .hv-pkmap .link,.hv-navy-band .hv-pkmap .link{stroke:var(--hv-gold)}
@keyframes hvRing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes hvDash{to{stroke-dashoffset:-36}}
@media(prefers-reduced-motion:reduce){.hv-pkmap .ring,.hv-pkmap .link,.hv-leds i.on,.hv-net-label i{animation:none}.hv-3d{transition:none}}

/* ---------- rack (css server rack decoration) ---------- */
.hv-rack{display:grid;gap:6px;padding:14px;border-radius:16px;background:linear-gradient(160deg,#101c48,#0b1333);border:1px solid rgba(255,255,255,.1);box-shadow:var(--hv-sh-lg)}
.hv-rack-unit{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;background:linear-gradient(180deg,#1b2b63,#15224f);border:1px solid rgba(255,255,255,.08)}
.hv-rack-unit span{font-family:var(--hv-mono);font-size:11px;color:rgba(255,255,255,.72);letter-spacing:.04em}
.hv-rack-unit b{font-family:var(--hv-mono);font-size:11px;color:#7ef0a8;font-weight:600}
.hv-rack-unit.gold b{color:var(--hv-gold)}

/* ---------- quick answer (AEO) ---------- */
.hv-qa{margin-top:-34px;position:relative;z-index:3}
.hv-qa-card{background:#fff;border:1px solid var(--hv-border);border-left:4px solid var(--hv-gold);border-radius:var(--hv-r);padding:22px 24px;box-shadow:var(--hv-sh-md);display:grid;gap:8px; margin-top:60px;}
.hv-qa-card .tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hv-blue);font-family:var(--hv-mono)}
.hv-qa-card .tag i{width:8px;height:8px;border-radius:50%;background:var(--hv-blue)}
.hv-qa-card p{font-size:16.5px;line-height:1.65;margin:0;color:var(--hv-text)}
.hv-qa-card .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--hv-muted);margin-top:4px;font-family:var(--hv-mono)}

/* ---------- product page layout ---------- */
.hv-prod{display:grid;gap:40px}
@media(min-width:960px){.hv-prod{grid-template-columns:1fr 340px;gap:56px;align-items:start}}
.hv-side{position:sticky;top:90px;display:grid;gap:18px}
.hv-box{background:#fff;border:1px solid var(--hv-border);border-radius:var(--hv-r);padding:20px;box-shadow:var(--hv-sh-sm)}
.hv-box h3{font-size:16px;font-weight:800;color:var(--hv-navy);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.hv-box h3::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--hv-gold)}
.hv-box .row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--hv-border);font-size:14px}
.hv-box .row:last-child{border-bottom:0}
.hv-box .row b{color:var(--hv-navy)}
.hv-box.navy{background:linear-gradient(160deg,var(--hv-navy-2),var(--hv-navy));color:#fff;border:0}
.hv-box.navy h3{color:#fff}
.hv-box.navy p{color:rgba(255,255,255,.8)}
.hv-h3{font-size:22px;font-weight:800;color:var(--hv-navy);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.hv-h3 .n{font-family:var(--hv-mono);font-size:12px;color:var(--hv-blue);background:var(--hv-blue-soft);border:1px solid var(--hv-blue-tint);padding:3px 8px;border-radius:6px;font-weight:700;letter-spacing:.06em}
.hv-prose{font-size:16.5px;line-height:1.75;color:var(--hv-text)}
.hv-prose p{margin-bottom:14px}
.hv-block{margin-bottom:44px}

/* cycles grid */
.hv-cycles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.hv-cycle{position:relative;border:1.5px solid var(--hv-border);border-radius:var(--hv-r-sm);padding:16px 14px;background:#fff;transition:.35s var(--hv-ease);text-decoration:none;color:inherit;display:block}
.hv-cycle:hover{transform:translateY(-4px);box-shadow:var(--hv-sh-md);border-color:var(--hv-blue)}
.hv-cycle.best{border-color:var(--hv-gold);background:linear-gradient(180deg,#fffaea,#fff);box-shadow:0 10px 24px rgba(245,168,0,.14)}
.hv-cycle .best-tag{position:absolute;top:-10px;left:12px;background:var(--hv-gold);color:var(--hv-ink);font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:var(--hv-r-pill)}
.hv-cycle .lbl{font-family:var(--hv-mono);font-size:11px;font-weight:700;color:var(--hv-muted);text-transform:uppercase;letter-spacing:.08em}
.hv-cycle .pm{font-family:var(--hv-display);font-size:24px;font-weight:800;color:var(--hv-navy);margin:6px 0 2px}
.hv-cycle .pm small{font-size:12px;font-family:var(--hv-body);font-weight:600;color:var(--hv-muted)}
.hv-cycle .tot{font-size:12.5px;color:var(--hv-muted)}
.hv-cycle .sv{display:inline-block;margin-top:6px;background:var(--hv-green-soft);color:#166534;font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--hv-r-pill)}
.hv-cycle .old{text-decoration:line-through;color:#98a2b3;font-size:12px;margin-left:4px}

/* feature list */
.hv-features{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));list-style:none;padding:0;margin:0}
.hv-features li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--hv-soft);border:1px solid transparent;border-radius:var(--hv-r-sm);font-size:14.5px;line-height:1.45;transition:.25s}
.hv-features li:hover{background:#fff;border-color:var(--hv-border);box-shadow:var(--hv-sh-sm)}
.hv-features li svg{width:18px;height:18px;flex:none;color:var(--hv-green);margin-top:2px}
.hv-features li.no svg{color:var(--hv-red)}
.hv-features li.no{color:var(--hv-muted)}

/* who for + steps */
.hv-who{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));list-style:none;padding:0;margin:0}
.hv-who li{padding:14px 16px;border-left:3px solid var(--hv-gold);background:#fff;border-radius:0 var(--hv-r-sm) var(--hv-r-sm) 0;box-shadow:var(--hv-sh-sm);font-size:14.5px}
.hv-steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.hv-steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.55}
.hv-steps li::before{content:"0" counter(s);flex:none;min-width:38px;height:34px;padding:0 8px;border-radius:9px;background:var(--hv-navy);color:var(--hv-gold);font-family:var(--hv-mono);font-weight:700;display:grid;place-items:center;font-size:13px;box-shadow:0 8px 18px rgba(21,36,85,.25)}

/* FAQ */
.hv-faq{display:grid;gap:10px}
.hv-faq details{background:#fff;border:1px solid var(--hv-border);border-radius:var(--hv-r-sm);padding:0 18px;transition:.3s}
.hv-faq details[open]{border-color:var(--hv-blue);box-shadow:var(--hv-sh-sm)}
.hv-faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:800;font-size:15.5px;color:var(--hv-navy);display:flex;justify-content:space-between;gap:14px;align-items:center}
.hv-faq summary::-webkit-details-marker{display:none}
.hv-faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--hv-blue);transition:.3s;flex:none}
.hv-faq details[open] summary::after{transform:rotate(45deg)}
.hv-faq .ans{padding:0 0 18px;font-size:15px;line-height:1.65;color:var(--hv-text)}

/* ---------- product cards ---------- */
.hv-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.hv-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--hv-border);border-top:3px solid var(--c,var(--hv-blue));border-radius:var(--hv-r);padding:20px;box-shadow:var(--hv-sh-sm);transition:transform .45s var(--hv-ease),box-shadow .45s var(--hv-ease),border-color .3s;text-decoration:none;color:inherit}
.hv-card:hover{transform:translateY(-6px);box-shadow:var(--hv-sh-md)}
.hv-card .type{display:inline-flex;align-items:center;gap:6px;font-family:var(--hv-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hv-muted)}
.hv-card .type i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--hv-blue))}
.hv-card h3{font-size:18px;font-weight:800;color:var(--hv-navy);margin:8px 0 4px;font-family:var(--hv-display)}
.hv-card .cat{font-size:13px;color:var(--hv-muted)}
.hv-card .price{margin:14px 0 10px;display:flex;align-items:baseline;gap:5px}
.hv-card .price b{font-family:var(--hv-display);font-size:24px;color:var(--hv-navy);font-weight:800}
.hv-card .price small{font-size:12.5px;color:var(--hv-muted);font-weight:600}
.hv-card ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:5px;font-size:13px;color:var(--hv-text)}
.hv-card li{display:flex;gap:7px;align-items:flex-start}
.hv-card li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--hv-green);margin-top:7px}
.hv-card .foot{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hv-card .foot .hv-btn{padding:10px 14px;font-size:13px}
.hv-card .ext{position:absolute;top:12px;right:12px;font-family:var(--hv-mono);font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--hv-r-pill);background:var(--hv-gold-soft);color:#7a5200;letter-spacing:.04em}
.hv-card.domain h3{font-size:26px;font-family:var(--hv-mono);letter-spacing:-.01em}
.hv-card.compact{padding:14px 16px}
.hv-card.compact h3{font-size:16px}
.hv-card.compact .price b{font-size:20px}

/* category cards */
.hv-cats{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.hv-cat{position:relative;display:flex;gap:14px;align-items:flex-start;padding:18px;background:#fff;border:1px solid var(--hv-border);border-radius:var(--hv-r);text-decoration:none;color:inherit;transition:.4s var(--hv-ease);box-shadow:var(--hv-sh-sm);overflow:hidden}
.hv-cat::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(44,92,245,.12),transparent 70%);transition:.4s}
.hv-cat:hover{transform:translateY(-5px);box-shadow:var(--hv-sh-md);border-color:rgba(44,92,245,.35)}
.hv-cat:hover::after{transform:scale(1.8)}
.hv-cat .ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--hv-navy),var(--hv-blue));color:#fff;box-shadow:0 10px 20px rgba(21,36,85,.25)}
.hv-cat .ic svg{width:22px;height:22px}
.hv-cat b{display:block;font-size:15.5px;color:var(--hv-navy);font-family:var(--hv-display);font-weight:800}
.hv-cat span{display:block;font-size:13px;color:var(--hv-muted);margin-top:3px;line-height:1.45}
.hv-cat .n{display:inline-block;margin-top:8px;font-family:var(--hv-mono);font-size:11.5px;font-weight:700;color:var(--hv-blue)}
.hv-type-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.hv-type-head .hv-h2{margin:10px 0 0}
.hv-type-head a.more{font-weight:800;text-decoration:none;color:var(--hv-blue);font-size:14px}
.hv-owner-note{font-size:12.5px;color:var(--hv-muted);display:inline-flex;gap:6px;align-items:center;margin-top:6px}
.hv-owner-note b{color:var(--hv-navy)}
.hv-owner-note .hv-ic{width:14px;height:14px}

/* toolbar (sort, filter) */
.hv-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:0 0 18px}
.hv-toolbar .cnt{font-size:13px;color:var(--hv-muted);font-family:var(--hv-mono)}
.hv-select{padding:10px 14px;border:1.5px solid var(--hv-border);border-radius:var(--hv-r-pill);font-family:inherit;font-size:14px;background:#fff;font-weight:700;color:var(--hv-navy)}
.hv-pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.hv-pill{padding:8px 14px;border-radius:var(--hv-r-pill);border:1.5px solid var(--hv-border);background:#fff;text-decoration:none;color:var(--hv-navy);font-size:13px;font-weight:700;transition:.25s}
.hv-pill:hover,.hv-pill.on{background:var(--hv-navy);color:#fff;border-color:var(--hv-navy)}
.hv-pill small{opacity:.65;font-weight:600;margin-left:4px;font-family:var(--hv-mono)}
.hv-pagination{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:30px 0 0}
.hv-pagination a,.hv-pagination span{min-width:40px;height:40px;display:inline-grid;place-items:center;padding:0 12px;border-radius:12px;border:1.5px solid var(--hv-border);background:#fff;text-decoration:none;color:var(--hv-navy);font-weight:700;font-size:14px}
.hv-pagination .on{background:var(--hv-navy);color:#fff;border-color:var(--hv-navy)}
.hv-pagination .dis{opacity:.45}

/* ---------- search ---------- */
/*.hv-search{position:relative;max-width:760px;margin:0 auto}*/
.hv-search{position:relative;max-width:760px;margin:0 auto;  z-index: 999;}

.hv-search form{display:flex;background:#fff;border-radius:16px;box-shadow:var(--hv-sh-md);padding:6px;border:1.5px solid var(--hv-border)}
.hv-search form:focus-within{border-color:var(--hv-blue);box-shadow:0 0 0 4px rgba(44,92,245,.12),var(--hv-sh-md)}
.hv-search .prompt{display:none;align-items:center;padding:0 4px 0 14px;font-family:var(--hv-mono);color:var(--hv-blue);font-weight:700}
@media(min-width:600px){.hv-search .prompt{display:inline-flex}}
.hv-search input{flex:1;border:0;outline:0;background:transparent;padding:12px 14px;font-size:16px;font-family:inherit;color:var(--hv-text);min-width:0}
.hv-search .hv-btn{padding:12px 22px;border-radius:12px}
/*.hv-search-dd{position:absolute;left:6px;right:6px;top:calc(100% + 8px);background:#fff;border-radius:var(--hv-r);box-shadow:var(--hv-sh-lg);border:1px solid var(--hv-border);overflow:hidden;z-index:50;display:none;text-align:left}*/
.hv-search-dd {
    position: absolute;
    left: 6px;
    right: 6px;
    top: calc(100% + 8px);
    background: #fff;
    border-radius: var(--hv-r);
    box-shadow: var(--hv-sh-lg);
    border: 1px solid var(--hv-border);
    display: none;
    text-align: left;
    
    z-index: 99999;         
    max-height: 380px;      
    overflow-y: auto;       
}
.hv-search-dd.open{display:block}
.hv-search-dd a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 16px;text-decoration:none;color:var(--hv-text);border-bottom:1px solid var(--hv-border);font-size:14px}
.hv-search-dd a:hover{background:var(--hv-soft)}
.hv-search-dd a b{color:var(--hv-navy)}
.hv-search-dd a small{color:var(--hv-muted);display:block;font-size:12px}
.hv-search-dd a .p{font-weight:800;color:var(--hv-blue);white-space:nowrap}
.hv-search-dd .empty{padding:14px 16px;color:var(--hv-muted);font-size:14px}
.hv-search-hint{margin-top:12px;font-size:13px;color:var(--hv-muted);display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.hv-search-hint a{color:var(--hv-navy);text-decoration:none;border-bottom:1px dotted var(--hv-navy);font-weight:700}

/* ---------- stats ---------- */
.hv-stats{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.hv-stats{grid-template-columns:repeat(4,1fr)}}
.hv-stat{background:#fff;border:1px solid var(--hv-border);border-radius:var(--hv-r);padding:18px;box-shadow:var(--hv-sh-sm);text-decoration:none;display:block;transition:.35s var(--hv-ease)}
a.hv-stat:hover{transform:translateY(-4px);box-shadow:var(--hv-sh-md)}
.hv-stat b{display:block;font-family:var(--hv-display);font-size:30px;font-weight:800;color:var(--hv-navy)}
.hv-stat span{font-size:12.5px;color:var(--hv-muted);font-family:var(--hv-mono);letter-spacing:.02em}
.hv-navy-band .hv-stat,.hv-console .hv-stat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.hv-navy-band .hv-stat b,.hv-console .hv-stat b{color:var(--hv-gold)}
.hv-navy-band .hv-stat span,.hv-console .hv-stat span{color:rgba(255,255,255,.72)}

/* ---------- brand cards (network page) ---------- */
.hv-brands{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.hv-brand{position:relative;padding:26px;border-radius:24px;background:#fff;border:1px solid var(--hv-border);box-shadow:var(--hv-sh-sm);overflow:hidden;transition:.45s var(--hv-ease)}
.hv-brand:hover{transform:translateY(-6px);box-shadow:var(--hv-sh-md)}
.hv-brand::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--c)}
.hv-brand .ic{width:52px;height:52px;border-radius:16px;background:var(--c);display:grid;place-items:center;color:#fff;margin-bottom:14px;box-shadow:0 10px 22px color-mix(in srgb,var(--c) 40%,transparent)}
.hv-brand .ic svg{width:26px;height:26px}
.hv-brand h3{font-size:22px;color:var(--hv-navy);font-weight:800}
.hv-brand .dom{font-family:var(--hv-mono);font-size:12.5px;color:var(--hv-muted);font-weight:700;margin:2px 0 10px}
.hv-brand p{font-size:14.5px;color:var(--hv-text)}
.hv-brand .owns{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px}
.hv-brand .owns span{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:var(--hv-r-pill);background:var(--hv-soft);color:var(--hv-navy)}
.hv-brand .self{position:absolute;top:16px;right:16px;font-size:11px;font-weight:800;background:var(--hv-gold);color:var(--hv-ink);padding:4px 9px;border-radius:var(--hv-r-pill)}
.hv-netmap{position:relative;max-width:620px;margin:0 auto}
.hv-netmap svg{width:100%;height:auto;overflow:visible}
.hv-netmap .node{fill:#fff;stroke:var(--c);stroke-width:3}
.hv-netmap .wire{fill:none;stroke:var(--hv-blue);stroke-width:2;stroke-dasharray:6 7;animation:hvDash 2.4s linear infinite;opacity:.8}
.hv-netmap .t{font-family:var(--hv-display);font-weight:800;font-size:15px;fill:var(--hv-navy)}
.hv-netmap .s{font-family:var(--hv-mono);font-size:10.5px;fill:var(--hv-muted)}

/* ---------- cross-site handoff card ---------- */
.hv-handoff{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--hv-r);background:linear-gradient(135deg,#fff8e1,#fff);border:1px solid #ffe08a;box-shadow:var(--hv-sh-sm)}
.hv-handoff .ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--c,var(--hv-gold));display:grid;place-items:center;color:#fff}
.hv-handoff .ic svg{width:22px;height:22px}
.hv-handoff b{color:var(--hv-navy)}
.hv-handoff p{margin:2px 0 0;font-size:14px;color:var(--hv-text)}

/* ---------- tools ---------- */
.hv-tools{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.hv-tool-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--hv-r);background:#fff;border:1px solid var(--hv-border);box-shadow:var(--hv-sh-sm);text-decoration:none;color:inherit;transition:.4s var(--hv-ease);position:relative;overflow:hidden}
.hv-tool-card::before{content:"$";position:absolute;right:16px;top:10px;font-family:var(--hv-mono);font-size:44px;font-weight:700;color:var(--hv-blue);opacity:.06}
.hv-tool-card:hover{transform:translateY(-5px);box-shadow:var(--hv-sh-md);border-color:rgba(44,92,245,.4)}
.hv-tool-card .ic{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--hv-navy),var(--hv-blue));display:grid;place-items:center;color:#fff}
.hv-tool-card .ic svg{width:22px;height:22px}
.hv-tool-card b{font-family:var(--hv-display);font-size:16.5px;color:var(--hv-navy);font-weight:800}
.hv-tool-card span{font-size:13.5px;color:var(--hv-muted);line-height:1.5}
.hv-tool-card .go{margin-top:auto;font-family:var(--hv-mono);font-size:12px;font-weight:700;color:var(--hv-blue)}
.hv-tool{background:#fff;border:1px solid var(--hv-border);border-radius:24px;padding:24px;box-shadow:var(--hv-sh-md);margin-top:0px;position:relative;z-index:3}
.hv-tool::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:24px 24px 0 0;background:linear-gradient(90deg,var(--hv-navy),var(--hv-blue) 50%,var(--hv-gold))}
@media(min-width:760px){.hv-tool{padding:32px}}
.hv-form{display:grid;gap:12px}
.hv-form .f{display:grid;gap:6px}
.hv-form label{font-size:13px;font-weight:800;color:var(--hv-navy)}
.hv-input,.hv-form input[type=text],.hv-form input[type=email],.hv-form input[type=tel],.hv-form input[type=number],.hv-form input[type=url],.hv-form input[type=search],.hv-form select,.hv-form textarea{width:100%;padding:13px 16px;border:1.5px solid var(--hv-border);border-radius:14px;font-family:inherit;font-size:15px;background:#fff;color:var(--hv-text);outline:0;transition:.25s}
.hv-form input:focus,.hv-form select:focus,.hv-form textarea:focus,.hv-input:focus{border-color:var(--hv-blue);box-shadow:0 0 0 4px rgba(44,92,245,.12)}
.hv-form .inline{display:flex;gap:10px;flex-wrap:wrap}
.hv-form .inline>*{flex:1 1 200px}
.hv-form .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hv-form .hint{font-size:12.5px;color:var(--hv-muted)}
.hv-form .chk{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600;color:var(--hv-text)}
.hv-result{margin-top:22px;display:grid;gap:12px}
.hv-result:empty{display:none}
.hv-rt{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:var(--hv-r-sm);overflow:hidden;border:1px solid var(--hv-border)}
.hv-rt th,.hv-rt td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--hv-border);vertical-align:top;word-break:break-word}
.hv-rt th{background:var(--hv-soft);font-family:var(--hv-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--hv-muted)}
.hv-rt tr:last-child td{border-bottom:0}
.hv-rt code{font-family:var(--hv-mono);font-size:12.5px;background:var(--hv-soft);padding:2px 6px;border-radius:6px}
.hv-ok{color:#166534;font-weight:800}.hv-bad{color:#b91c1c;font-weight:800}.hv-warn{color:#b45309;font-weight:800}
.hv-alert{padding:14px 16px;border-radius:var(--hv-r-sm);font-size:14.5px;line-height:1.5}
.hv-alert.ok{background:var(--hv-green-soft);color:#14532d}.hv-alert.bad{background:#fee2e2;color:#7f1d1d}.hv-alert.warn{background:#fef3c7;color:#78350f}.hv-alert.info{background:var(--hv-blue-tint);color:#1e3a8a}
.hv-kv{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.hv-kv div{background:var(--hv-soft);border-radius:var(--hv-r-sm);padding:12px 14px}
.hv-kv div small{display:block;font-family:var(--hv-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--hv-muted);font-weight:700}
.hv-kv div b{display:block;font-size:15px;color:var(--hv-navy);margin-top:3px;word-break:break-word}
.hv-score{display:flex;align-items:center;gap:16px}
.hv-score .ring{--p:0;width:86px;height:86px;border-radius:50%;background:conic-gradient(var(--hv-green) calc(var(--p)*1%),#e5e9f2 0);display:grid;place-items:center;flex:none}
.hv-score .ring b{width:66px;height:66px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--hv-display);font-size:22px;color:var(--hv-navy)}
.hv-copy{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--hv-blue);background:none;border:0;cursor:pointer;font-family:inherit}
.hv-code{background:var(--hv-ink);color:#e6eaf7;padding:16px 18px;border-radius:var(--hv-r-sm);font-family:var(--hv-mono);font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-all;margin:0;border-left:3px solid var(--hv-gold)}
.hv-spin{display:inline-block;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:hvSpin .7s linear infinite}
@keyframes hvSpin{to{transform:rotate(360deg)}}
.hv-loading{display:flex;gap:10px;align-items:center;color:var(--hv-muted);font-size:14px;font-family:var(--hv-mono)}
.hv-loading .hv-spin{border-color:rgba(44,92,245,.25);border-top-color:var(--hv-blue)}
.hv-range{width:100%}
.hv-related-tools{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- sticky mobile CTA ---------- */
.hv-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:8px;padding:10px 12px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--hv-border);box-shadow:0 -10px 30px rgba(16,23,41,.12)}
.hv-sticky .hv-btn{flex:1;padding:12px 10px;font-size:13.5px}
@media(max-width:820px){.hv-sticky.on{display:flex}body.hv-has-sticky{padding-bottom:70px}}

/* ---------- basket + modal ---------- */
.hv-basket-btn{position:fixed;right:18px;bottom:96px;z-index:71;display:none;align-items:center;gap:8px;padding:12px 16px;border-radius:var(--hv-r-pill);background:var(--hv-navy);color:#fff;font-weight:800;font-size:13.5px;border:0;cursor:pointer;box-shadow:var(--hv-sh-lg);font-family:var(--hv-body)}
.hv-basket-btn.on{display:inline-flex}
.hv-basket-btn i{background:var(--hv-gold);color:var(--hv-ink);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-style:normal;font-size:12px}
@media(max-width:820px){.hv-basket-btn{bottom:84px;right:12px}}
.hv-modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-end;justify-content:center;background:rgba(5,10,30,.62);backdrop-filter:blur(6px);padding:0}
@media(min-width:700px){.hv-modal{align-items:center;padding:24px}}
.hv-modal.open{display:flex}
.hv-modal-card{width:100%;max-width:640px;max-height:92vh;overflow:auto;background:#fff;border-radius:24px 24px 0 0;padding:24px;box-shadow:var(--hv-sh-lg);animation:hvUp .45s var(--hv-ease);font-family:var(--hv-body);border-top:5px solid var(--hv-gold)}
@media(min-width:700px){.hv-modal-card{border-radius:24px;padding:30px}}
@keyframes hvUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.hv-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.hv-modal-head h3{font-size:22px;color:var(--hv-navy);font-weight:800;font-family:var(--hv-display)}
.hv-modal-head p{margin:4px 0 0;font-size:14px;color:var(--hv-muted)}
.hv-x{border:0;background:var(--hv-soft);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:20px;color:var(--hv-navy);flex:none}
.hv-items{display:grid;gap:8px;margin-bottom:14px}
.hv-item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 14px;background:var(--hv-soft);border-radius:var(--hv-r-sm);font-size:14px;border-left:3px solid var(--hv-blue)}
.hv-item b{color:var(--hv-navy);display:block}
.hv-item small{color:var(--hv-muted)}
.hv-item .rm{border:0;background:none;color:var(--hv-red);cursor:pointer;font-weight:800;font-family:inherit;font-size:13px}
.hv-item select{padding:6px 8px;border-radius:8px;border:1px solid var(--hv-border);font-family:inherit;font-size:13px}
.hv-success{text-align:center;padding:10px 0}
.hv-success .ok{width:70px;height:70px;border-radius:50%;background:var(--hv-green-soft);display:grid;place-items:center;margin:0 auto 14px;color:var(--hv-green-2)}
.hv-success .ok svg{width:34px;height:34px}
.hv-success h4{font-size:22px;color:var(--hv-navy);font-family:var(--hv-display);margin:0 0 6px}
.hv-success .no{font-family:var(--hv-mono);background:var(--hv-soft);display:inline-block;padding:6px 12px;border-radius:8px;font-weight:800;color:var(--hv-navy)}
.hv-success .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.hv-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--hv-ink);color:#fff;padding:12px 18px;border-radius:var(--hv-r-pill);font-size:14px;font-weight:700;z-index:120;opacity:0;transition:.4s var(--hv-ease);pointer-events:none;box-shadow:var(--hv-sh-lg);font-family:var(--hv-body);border-left:3px solid var(--hv-gold)}
.hv-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* exit intent */
.hv-exit .hv-modal-card{max-width:520px;text-align:center}
.hv-exit .big{font-family:var(--hv-display);font-size:26px;color:var(--hv-navy);font-weight:800;margin:6px 0 8px}

/* reveal */
.hv-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--hv-ease),transform .8s var(--hv-ease)}
.hv-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hv-reveal{opacity:1;transform:none;transition:none}}

/* trust strip */
.hv-trust{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;padding:16px 0;font-size:13.5px;color:var(--hv-muted)}
.hv-trust span{display:inline-flex;gap:7px;align-items:center;font-weight:700}
.hv-trust svg{width:16px;height:16px;color:var(--hv-green)}

/* comparison table */
.hv-compare{overflow:auto;border-radius:var(--hv-r);border:1px solid var(--hv-border);background:#fff}
.hv-compare table{border-collapse:collapse;min-width:640px;width:100%;font-size:14px}
.hv-compare th,.hv-compare td{padding:12px 14px;border-bottom:1px solid var(--hv-border);text-align:left}
.hv-compare th{background:var(--hv-soft);position:sticky;top:0;font-family:var(--hv-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--hv-muted)}
.hv-compare td b{color:var(--hv-navy)}
.hv-compare a.nm{font-weight:800;color:var(--hv-navy);text-decoration:none}
.hv-compare .hv-btn{padding:8px 12px;font-size:12.5px}

/* truck-art inspired accent line (palette only) */
.hv-accent-line{height:5px;background:repeating-linear-gradient(90deg,var(--hv-navy) 0 28px,var(--hv-gold) 28px 44px,var(--hv-blue) 44px 72px,var(--hv-green) 72px 84px)}
.hv-navy-band .hv-steps li::before{background:var(--hv-gold);color:var(--hv-ink);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.hv-navy-band .hv-type-head a.more{color:var(--hv-gold)}


/* Google reCAPTCHA - Premium Left Side Design */
.grecaptcha-badge {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    bottom: 150px !important;

    width: 70px !important;
    height: 60px !important;

    opacity: 0.72;
    overflow: hidden !important;

    border-radius: 0 12px 12px 0 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);

    transition:
        width 0.35s ease,
        opacity 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease !important;

    z-index: 99999 !important;
}

/* Hover: Full badge visible */
.grecaptcha-badge:hover {
    width: 256px !important;
    opacity: 1 !important;
    background: #ffffff !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

/* Blue animated line: left to right */
.grecaptcha-badge::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background: linear-gradient(90deg, #168bff, #00c6ff);
    transition: width 0.4s ease;
    z-index: 10;
}

.grecaptcha-badge:hover::before {
    width: 100%;
}

/* Keep the original Google badge functional */
.grecaptcha-badge iframe {
    display: block !important;
}

/* Mobile adjustment */
@media (max-width: 576px) {
    .grecaptcha-badge {
        bottom: 20px !important;
    }

    .grecaptcha-badge:hover {
        width: 256px !important;
    }
}