@charset "UTF-8";
/* ============================================================================
   Hosting Partners — Premium Enhancement Layer  (enhancements.css)
   Loaded AFTER style.css. Additive only: it upgrades the existing Zhost V3
   theme without removing original classes. Brand colour preserved (#1995ad).
   Author: Site upgrade pass — 2026
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --hp-teal:        #1995ad;
  --hp-teal-dark:   #137386;
  --hp-teal-darker: #0d5a6b;
  --hp-teal-light:  #a1d6e2;
  --hp-teal-50:     #eef9fb;
  --hp-ink:         #14222b;
  --hp-slate:       #4c575e;
  --hp-muted:       #6b7785;
  --hp-line:        #e6edf1;
  --hp-amber:       #ff9f1c;
  --hp-green:       #2bae78;
  --hp-grad:        linear-gradient(135deg, #1995ad 0%, #0d5a6b 100%);
  --hp-grad-soft:   linear-gradient(135deg, #eef9fb 0%, #ffffff 60%);
  --hp-shadow-sm:   0 4px 14px rgba(16, 56, 67, .08);
  --hp-shadow-md:   0 14px 38px rgba(16, 56, 67, .12);
  --hp-shadow-lg:   0 28px 70px rgba(16, 56, 67, .18);
  --hp-radius:      16px;
  --hp-head:        'Poppins', 'Roboto', sans-serif;
}

/* ---------------------------------------------------------------------------
   01. Typography hierarchy — bolder, more engaging headings
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, .banner-heading h1, .banner-heading h2 {
  font-family: var(--hp-head);
  letter-spacing: -0.01em;
}
.banner-heading h1 { font-weight: 700 !important; line-height: 1.12; color: var(--hp-ink); }
.banner-heading h2 { font-weight: 600 !important; line-height: 1.18; color: var(--hp-ink); }
.banner-heading h3 { font-weight: 600; color: var(--hp-ink); }
.banner-heading p  { color: var(--hp-slate); line-height: 1.6; }
.b-line { border-bottom-width: 4px; border-radius: 2px; }

.section-gap { padding: 72px 0; }
@media (max-width: 768px){ .section-gap { padding: 48px 0; } }

/* Reusable section eyebrow + heading helpers (new, optional) */
.hp-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--hp-head); font-weight:600; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--hp-teal);
  background: var(--hp-teal-50); padding:7px 16px; border-radius:50px; margin-bottom:16px;
}
.hp-eyebrow i{ font-size:14px; }
.hp-section-title{ font-family:var(--hp-head); font-weight:700; font-size:38px; color:var(--hp-ink); line-height:1.14; }
.hp-section-sub{ color:var(--hp-muted); font-size:18px; max-width:680px; margin:14px auto 0; }
@media (max-width:768px){ .hp-section-title{ font-size:30px; } .hp-section-sub{ font-size:16px; } }

/* ---------------------------------------------------------------------------
   02. Buttons — gradient, lift, secondary + ghost variants
   ------------------------------------------------------------------------- */
.btn-01{
  background: var(--hp-teal) !important;
  border: none;
  font-family: var(--hp-head);
  font-weight: 600 !important;
  letter-spacing:.01em;
  box-shadow: none;
  transition: background-color .2s ease;
}
.btn-01:hover{
  color:#fff !important;
  background: var(--hp-teal-dark) !important;
  transform: none;
  box-shadow: none;
}
/* shine sweep removed for a flat corporate look */
.btn-01::after{ content:none; display:none; }

.hp-btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--hp-head); font-weight:600; font-size:17px;
  padding:11px 30px; border-radius:8px;
  color:var(--hp-teal); background:#fff; border:2px solid var(--hp-teal-light);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hp-btn-ghost:hover{ background:var(--hp-teal-50); border-color:var(--hp-teal); color:var(--hp-teal-dark); transform:none; }
.hp-btn-light{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--hp-head); font-weight:600; font-size:17px;
  padding:12px 32px; border-radius:8px; color:var(--hp-teal-dark) !important; background:#fff;
  box-shadow: none; transition: background-color .2s ease, color .2s ease;
}
.hp-btn-light:hover{ transform:none; box-shadow:none; background:#f4f8fa; color:var(--hp-teal-darker) !important; }

/* ---------------------------------------------------------------------------
   03. Sticky / scrolled header  (custom.js toggles .header-fixed on .main-menu)
   ------------------------------------------------------------------------- */
.main-menu{ margin-bottom:0 !important; transition: box-shadow .3s ease, padding .3s ease, background .3s ease; }
.main-menu.header-fixed{
  position: sticky; top:0; z-index: 1000;
  padding:6px 0; background:rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 6px 24px rgba(16,56,67,.10);
  animation: hpSlideDown .35s ease;
}
@keyframes hpSlideDown{ from{ transform:translateY(-100%);} to{ transform:translateY(0);} }
.main-menu .logo img{ transition: max-height .3s ease; max-height:46px; }

/* Top button in header */
.top-button{
  background: var(--hp-teal); color:#fff !important; font-family:var(--hp-head); font-weight:600;
  padding:10px 24px; border-radius:8px; box-shadow:none;
  transition: background-color .2s ease;
}
.top-button:hover{ transform:none; box-shadow:none; background:var(--hp-teal-dark); color:#fff !important; }

/* ---------------------------------------------------------------------------
   04. Mega / dropdown menu polish
   ------------------------------------------------------------------------- */
.navbar .dropdown ul{
  border:1px solid var(--hp-line);
  box-shadow: var(--hp-shadow-md);
  border-radius: 12px;
  padding:10px;
  min-width: 240px;
}
.navbar .dropdown ul li a{
  border-radius:8px; padding:9px 14px !important; font-weight:500;
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.navbar .dropdown ul li a:hover{ background: var(--hp-teal-50); color: var(--hp-teal-dark); padding-left:18px !important; }

/* Wide mega panel variant */
.hp-mega{ position:relative; }
.hp-mega > ul.hp-mega-panel{
  display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap:4px;
  min-width: 520px !important; left:0 !important;
}
.hp-mega-panel .hp-mega-link{
  display:flex !important; gap:12px; align-items:flex-start; padding:10px 12px !important;
  justify-content:flex-start !important;
}
.hp-mega-panel .hp-mega-link i{ color:var(--hp-teal); font-size:20px !important; margin-top:2px; }
.hp-mega-panel .hp-mega-link .hp-mega-t{ display:block; font-weight:600; color:var(--hp-ink); font-size:15px; }
.hp-mega-panel .hp-mega-link .hp-mega-d{ display:block; font-weight:400; color:var(--hp-muted); font-size:12.5px; line-height:1.35; }
@media (max-width:1199px){
  .hp-mega > ul.hp-mega-panel{ grid-template-columns:1fr; min-width:auto !important; }
}

/* ---------------------------------------------------------------------------
   04b. Mobile navigation — full-screen blurred overlay
   ------------------------------------------------------------------------- */
body.hp-menu-open{ overflow:hidden; }

@media (max-width:1199px){
  /* The overlay itself */
  #navbar.navbar-mobile{
    position:fixed; inset:0; z-index:1100;
    background:rgba(11,33,40,.86);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    backdrop-filter:blur(14px) saturate(120%);
    display:flex; align-items:center; justify-content:center;
    overflow-y:auto; padding:80px 24px;
    animation:hpMenuFade .28s ease both;
  }

  /* Centered stack of top-level links */
  #navbar.navbar-mobile > ul{
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px;
    position:static; inset:auto; width:100%; max-width:440px;
    margin:0; padding:0; background:transparent;
    border-radius:0; box-shadow:none; overflow:visible;
  }
  #navbar.navbar-mobile > ul > li{
    width:100%; opacity:0; transform:translateY(14px);
    animation:hpMenuItem .45s cubic-bezier(.2,.7,.2,1) forwards;
  }
  #navbar.navbar-mobile > ul > li:nth-child(1){ animation-delay:.05s; }
  #navbar.navbar-mobile > ul > li:nth-child(2){ animation-delay:.10s; }
  #navbar.navbar-mobile > ul > li:nth-child(3){ animation-delay:.15s; }
  #navbar.navbar-mobile > ul > li:nth-child(4){ animation-delay:.20s; }
  #navbar.navbar-mobile > ul > li:nth-child(5){ animation-delay:.25s; }
  #navbar.navbar-mobile > ul > li:nth-child(6){ animation-delay:.30s; }
  #navbar.navbar-mobile > ul > li:nth-child(7){ animation-delay:.35s; }

  #navbar.navbar-mobile > ul > li > a{
    display:flex; align-items:center; justify-content:center; gap:8px;
    text-align:center; color:#fff !important;
    font-family:var(--hp-head); font-weight:500; font-size:21px; line-height:1.2;
    letter-spacing:.005em; padding:16px 24px !important;
    border-bottom:1px solid rgba(255,255,255,.10);
    transition:color .2s ease, background .2s ease;
  }
  #navbar.navbar-mobile > ul > li:last-child > a{ border-bottom:none; }
  #navbar.navbar-mobile > ul > li > a:hover,
  #navbar.navbar-mobile > ul > li > a:focus{
    color:#bff0f8 !important; background:rgba(255,255,255,.06);
  }
  #navbar.navbar-mobile .dropdown > a i{ font-size:13px; transition:transform .25s ease; }
  #navbar.navbar-mobile .dropdown > a .dropdown-active ~ i,
  #navbar.navbar-mobile .dropdown:has(.dropdown-active) > a i{ transform:rotate(180deg); }

  /* Nested submenu — hidden until its parent is tapped */
  #navbar.navbar-mobile .dropdown ul{
    display:none; position:static; width:100%; margin:0; padding:0;
    background:transparent; border:none; box-shadow:none; border-radius:0;
  }
  #navbar.navbar-mobile .dropdown ul.dropdown-active{
    display:flex; flex-direction:column; align-items:center;
    padding:2px 0 8px;
  }
  #navbar.navbar-mobile .dropdown ul li a{
    display:block; text-align:center; color:#cfeaf0 !important;
    font-family:var(--hp-head); font-weight:400; font-size:16.5px;
    padding:11px 24px !important;
  }
  #navbar.navbar-mobile .dropdown ul li a:hover{ color:#fff !important; }

  /* Close (X) button floats top-right above the overlay */
  #navbar.navbar-mobile .mobile-nav-toggle{
    position:fixed; top:20px; right:22px;
    font-size:34px; color:#fff !important; z-index:1110; line-height:1;
  }
}
@keyframes hpMenuFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes hpMenuItem{ to{ opacity:1; transform:translateY(0); } }

/* ---------------------------------------------------------------------------
   05. HOMEPAGE animated hero  (new .hp-hero structure)
   ------------------------------------------------------------------------- */
.hp-hero{
  position: relative; overflow: hidden;
  background: linear-gradient(135deg,#0d5a6b 0%, #1995ad 55%, #15a7c4 100%);
  color:#fff;
}
.hp-hero::before{   /* flowing aurora blobs */
  content:""; position:absolute; inset:-30% -10% auto -10%; height:160%;
  background:
    radial-gradient(40% 50% at 18% 28%, rgba(161,214,226,.40), transparent 60%),
    radial-gradient(38% 46% at 82% 22%, rgba(43,174,120,.30), transparent 60%),
    radial-gradient(45% 55% at 70% 85%, rgba(255,255,255,.16), transparent 60%);
  animation: hpAurora 16s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes hpAurora{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-3%,2%,0) scale(1.08); }
  100%{ transform: translate3d(3%,-2%,0) scale(1.04); }
}
.hp-hero::after{   /* subtle grid lines */
  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: 56px 56px;
  mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%);
  pointer-events:none;
}
.hp-hero .container{ position:relative; z-index:2; }

.hp-hero-slide{ padding: 84px 0 96px; }
@media (max-width:991px){ .hp-hero-slide{ padding:56px 0 64px; text-align:center; } }

.hp-hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  color:#eafaffff; font-weight:600; font-family:var(--hp-head); font-size:13px;
  letter-spacing:.06em; padding:7px 16px; border-radius:50px; backdrop-filter: blur(6px);
}
.hp-hero h1, .hp-hero .hp-hero-h1{
  font-family:var(--hp-head); font-weight:700; color:#fff;
  font-size: 52px; line-height:1.08; margin:18px 0 16px; letter-spacing:-0.015em;
}
.hp-hero .hp-hero-h1 .hl{ color:#bff0f8; position:relative; white-space:nowrap; }
.hp-hero .hp-hero-h1 .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:10px; z-index:-1;
  background: rgba(43,174,120,.55); border-radius:6px;
}
.hp-hero p.hp-hero-lead{ color: rgba(255,255,255,.90); font-size:19px; line-height:1.6; max-width:560px; }
@media (max-width:991px){ .hp-hero p.hp-hero-lead{ margin-inline:auto; } }
@media (max-width:768px){ .hp-hero h1, .hp-hero .hp-hero-h1{ font-size:36px; } }

.hp-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
@media (max-width:991px){ .hp-hero-cta{ justify-content:center; } }

.hp-hero-trust{ display:flex; gap:26px; flex-wrap:wrap; margin-top:30px; }
@media (max-width:991px){ .hp-hero-trust{ justify-content:center; } }
.hp-hero-trust .it{ display:flex; align-items:center; gap:9px; font-size:14.5px; color:rgba(255,255,255,.92); font-weight:500; }
.hp-hero-trust .it i{ color:#9bf0c9; font-size:18px; }

/* Hero visual: floating glass cards */
.hp-hero-visual{ position:relative; min-height:360px; }
.hp-hero-art{
  width:100%; max-width:480px; filter: drop-shadow(0 30px 50px rgba(0,0,0,.30));
  animation: hpFloat 6s ease-in-out infinite;
}
.hp-glass{
  position:absolute; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  border-radius:14px; padding:14px 18px; backdrop-filter: blur(8px); color:#fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.22); font-family:var(--hp-head);
}
.hp-glass .hp-glass-row{ display:flex; align-items:center; gap:10px; }
.hp-glass i{ font-size:22px; }
.hp-glass .v{ font-weight:700; font-size:18px; line-height:1; }
.hp-glass .l{ font-size:11.5px; opacity:.85; letter-spacing:.04em; text-transform:uppercase; }
.hp-glass--a{ top:8%; left:-6%; animation: hpFloat 5s ease-in-out infinite; }
.hp-glass--b{ bottom:14%; right:-4%; animation: hpFloat 7s ease-in-out infinite .4s; }
.hp-glass--c{ bottom:-2%; left:14%; animation: hpFloat 6.4s ease-in-out infinite .8s; }
@media (max-width:991px){ .hp-hero-visual{ display:none; } }
@keyframes hpFloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }

/* Swiper hero pagination */
.hp-hero .swiper-pagination{ position:absolute; bottom:20px; }
.hp-hero .swiper-pagination-bullet{ background:#fff; opacity:.5; width:9px; height:9px; }
.hp-hero .swiper-pagination-bullet-active{ opacity:1; width:26px; border-radius:6px; }

/* Hero entrance animations (run on active slide OR static hero) */
.hp-anim{ opacity:0; transform: translateY(22px); }
.swiper-slide-active .hp-anim,
.hp-hero--static .hp-anim{ animation: hpFadeUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
.swiper-slide-active .hp-anim.d1,
.hp-hero--static .hp-anim.d1{ animation-delay:.08s; }
.swiper-slide-active .hp-anim.d2,
.hp-hero--static .hp-anim.d2{ animation-delay:.20s; }
.swiper-slide-active .hp-anim.d3,
.hp-hero--static .hp-anim.d3{ animation-delay:.32s; }
.swiper-slide-active .hp-anim.d4,
.hp-hero--static .hp-anim.d4{ animation-delay:.44s; }
@keyframes hpFadeUp{ to{ opacity:1; transform: translateY(0);} }

/* Static hero: flush to header (removes white gap) + comfortable padding */
.hp-hero--static{ margin-top:0; }
.hp-hero--static .hp-hero-slide{ padding:64px 0 72px; }
@media (max-width:991px){ .hp-hero--static .hp-hero-slide{ padding:40px 0 48px; text-align:center; } }

/* ---------------------------------------------------------------------------
   05b. SERVICE-PAGE hero (.hero-banner) — premium soft treatment
   ------------------------------------------------------------------------- */
.hero-banner{
  background: var(--hp-grad-soft);
  border-bottom: 1px solid var(--hp-line);
  padding: 70px 35px 64px !important;
  position: relative;
}
.hero-banner::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background:
    radial-gradient(38% 60% at 88% 12%, rgba(25,149,173,.12), transparent 60%),
    radial-gradient(30% 50% at 10% 95%, rgba(43,174,120,.10), transparent 60%);
}
.hero-banner .container{ position:relative; z-index:2; }
.hero-banner span{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--hp-teal-50); color:var(--hp-teal) !important; font-weight:600;
  padding:7px 16px; border-radius:50px; font-size:13px !important; letter-spacing:.08em; text-transform:uppercase;
}
.hero-banner h1{ margin-top:16px; }
.hero-banner .banner-group-img img{ animation: hpFloat 6s ease-in-out infinite; }
@media (max-width:991px){ .hero-banner{ text-align:center; } .hero-banner .grp-btns{ justify-content:center; } .hero-banner span{ margin-inline:auto; } }

/* billing-cycle pricing tabs (.nav-item-tabs) used on service pages */
.nav-item-tabs{ display:inline-flex; gap:6px; background:#fff; border:1px solid var(--hp-line); border-radius:50px; padding:6px; box-shadow:var(--hp-shadow-sm); margin:0 auto; }
.nav-item-tabs .nav-links{ border:none; background:transparent; font-family:var(--hp-head); font-weight:600; color:var(--hp-muted); padding:9px 22px; border-radius:50px; cursor:pointer; transition:all .25s ease; }
.nav-item-tabs .nav-links.active{ background:var(--hp-teal); color:#fff; box-shadow:none; }
.row .nav-item-tabs{ display:flex; width:fit-content; }

/* ---------------------------------------------------------------------------
   05c. Related-services / cross-sell strip (includes/hp-related.tpl)
   ------------------------------------------------------------------------- */
.hp-related .hp-rel-card{
  display:flex; align-items:center; gap:14px; height:100%;
  background:#fff; border:1px solid var(--hp-line); border-radius:14px; padding:18px 20px;
  box-shadow:var(--hp-shadow-sm); transition: all .3s ease; color:var(--hp-ink);
}
.hp-related .hp-rel-card:hover{ transform:translateY(-5px); box-shadow:var(--hp-shadow-md); border-color:var(--hp-teal-light); }
.hp-related .hp-rel-card .ic{ width:48px; height:48px; min-width:48px; border-radius:12px; display:grid; place-items:center; background:var(--hp-teal-50); color:var(--hp-teal); font-size:22px; }
.hp-related .hp-rel-card .tt{ font-family:var(--hp-head); font-weight:600; font-size:15.5px; color:var(--hp-ink); display:block; }
.hp-related .hp-rel-card .dd{ font-size:12.5px; color:var(--hp-muted); }
.hp-related .hp-rel-card .go{ margin-left:auto; color:var(--hp-teal); font-size:18px; }

/* ---------------------------------------------------------------------------
   06. Integrated domain search bar (hero + page)
   ------------------------------------------------------------------------- */
.hp-domain{
  background:#fff; border-radius:14px; padding:10px; box-shadow: var(--hp-shadow-lg);
  display:flex; align-items:center; gap:8px; max-width:600px;
}
@media (max-width:991px){ .hp-domain{ margin-inline:auto; } }
.hp-domain .pfx{ color:var(--hp-muted); padding-left:12px; font-size:20px; }
.hp-domain input{
  flex:1; border:none; outline:none; font-size:17px; color:var(--hp-ink);
  padding:12px 6px; background:transparent; min-width:0;
}
.hp-domain input::placeholder{ color:#9aa7b1; }
.hp-domain button{
  border:none; white-space:nowrap; background:var(--hp-teal); color:#fff;
  font-family:var(--hp-head); font-weight:600; font-size:16px;
  padding:13px 26px; border-radius:10px; transition: background-color .2s ease; cursor:pointer;
}
.hp-domain button:hover{ transform:none; box-shadow:none; background:var(--hp-teal-dark); }
@media (max-width:480px){
  .hp-domain{ flex-wrap:wrap; }
  .hp-domain input{ width:100%; }
  .hp-domain button{ width:100%; }
}
.hp-tlds{ display:flex; gap:20px; flex-wrap:wrap; margin-top:16px; align-items:center; }
@media (max-width:991px){ .hp-tlds{ justify-content:center; } }
.hp-tld{ display:flex; align-items:center; gap:7px; font-weight:600; font-family:var(--hp-head); color:#fff; font-size:14px; }
.hp-tld .ext{ background:rgba(255,255,255,.16); padding:3px 10px; border-radius:6px; }

/* Existing .banner-top-search — modernise to match */
.banner-top-search{ background:#fff; border-radius:14px; box-shadow:var(--hp-shadow-md); padding:6px 6px 6px 0; }
.banner-top-search input{ border:none !important; border-radius:14px; }
.banner-top-search button{ position:absolute; border:none !important; background:var(--hp-teal) !important; color:#fff !important; border-radius:10px !important; font-size:16px !important; right:6px !important; top:6px !important; bottom:6px; font-family:var(--hp-head); font-weight:600; transition:background-color .2s ease; }
.banner-top-search button:hover{ background:var(--hp-teal-dark) !important; }

/* ----------------------------------------------------------------------------
   DOMAIN SEARCH INPUT — always clearly visible; button stacks below on mobile
   ------------------------------------------------------------------------- */
.hp-domain-form{ gap:8px; }
.hp-domain-form input, .banner-top-search input{ color:#1d1d1f; }
.hp-domain-form input::placeholder, .banner-top-search input::placeholder{ color:#9aa3a8; opacity:1; }
@media (max-width:767px){
  /* Layout: input (full width, fully visible) → spacing → full-width button */
  .hp-domain-form, .banner-top-search{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important; position:static !important; padding:8px !important; }
  .banner-top-search img{ display:none !important; }
  .hp-domain-form input, .banner-top-search input{ width:100% !important; padding:14px 16px !important; font-size:16px !important; border-radius:11px !important; }
  .hp-domain-form input::placeholder, .banner-top-search input::placeholder{ font-size:14px !important; }
  .hp-domain-form button, .banner-top-search button{ position:static !important; right:auto !important; left:auto !important; top:auto !important; bottom:auto !important; width:100% !important; margin:0 !important; padding:14px 18px !important; border-radius:11px !important; }
}

/* ---------------------------------------------------------------------------
   07. Trust badge strip + stat counters
   ------------------------------------------------------------------------- */
.hp-trustbar{ background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius); box-shadow:var(--hp-shadow-sm); padding:6px; }
.hp-trustbar .row{ --bs-gutter-x:0; }
.hp-trust-item{ display:flex; align-items:center; gap:14px; padding:20px 22px; }
.hp-trust-item + .hp-trust-item{ border-left:1px solid var(--hp-line); }
.hp-trust-item i{ font-size:30px; color:var(--hp-teal); }
.hp-trust-item .t{ font-family:var(--hp-head); font-weight:700; font-size:20px; color:var(--hp-ink); line-height:1; }
.hp-trust-item .s{ font-size:13.5px; color:var(--hp-muted); margin-top:3px; }
@media (max-width:767px){ .hp-trust-item{ border-left:none !important; border-top:1px solid var(--hp-line); justify-content:center; } .hp-trust-item:first-child{ border-top:none; } }

.hp-stats{ background: var(--hp-grad); border-radius:var(--hp-radius); color:#fff; padding:38px 20px; }
.hp-stat{ text-align:center; padding:10px; }
.hp-stat .n{ font-family:var(--hp-head); font-weight:700; font-size:42px; line-height:1; }
.hp-stat .l{ font-size:14.5px; opacity:.9; margin-top:6px; }
@media (max-width:768px){ .hp-stat .n{ font-size:32px; } }

/* ---------------------------------------------------------------------------
   08. Feature cards & plan cards — premium polish
   ------------------------------------------------------------------------- */
.feature-style-two-card{
  border:1px solid var(--hp-line); border-radius:var(--hp-radius);
  box-shadow: var(--hp-shadow-sm); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  background:#fff;
}
.feature-style-two-card:hover{ transform: translateY(-8px); box-shadow: var(--hp-shadow-md); border-color: var(--hp-teal-light); }

.plan-style-one{
  border:1px solid var(--hp-line);
  box-shadow: var(--hp-shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative; overflow:hidden;
}
.plan-style-one::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--hp-grad); opacity:0; transition:opacity .3s ease; }
.plan-style-one:hover{ transform: translateY(-10px); box-shadow: var(--hp-shadow-lg); border-color:var(--hp-teal-light); }
.plan-style-one:hover::before{ opacity:1; }
.plan-style-one h4{ font-family:var(--hp-head); font-weight:700; color:var(--hp-ink); }
.plan-style-one span.price{ font-family:var(--hp-head); font-weight:700; color:var(--hp-teal-dark); }
.plan-style-one.is-popular{ border:2px solid var(--hp-teal); box-shadow: var(--hp-shadow-md); }
.plan-style-one .hp-pop-badge{
  position:absolute; top:14px; right:-34px; transform: rotate(45deg);
  background:var(--hp-amber); color:#3a2400; font-family:var(--hp-head); font-weight:700;
  font-size:11px; letter-spacing:.08em; padding:5px 40px; box-shadow:0 4px 10px rgba(0,0,0,.15);
}
ul.list li{ position:relative; padding-left:26px; text-align:left; line-height:1.6; }
ul.list li::before{ content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:1px; color:var(--hp-green); font-size:15px; }

/* Generic icon feature (new) */
.hp-feature{ background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius); padding:28px; height:100%; box-shadow:var(--hp-shadow-sm); transition: all .3s ease; }
.hp-feature:hover{ transform:translateY(-6px); box-shadow:var(--hp-shadow-md); border-color:var(--hp-teal-light); }
.hp-feature .ic{ width:58px; height:58px; border-radius:14px; display:grid; place-items:center; background:var(--hp-teal-50); color:var(--hp-teal); font-size:26px; margin-bottom:16px; }
.hp-feature h4{ font-family:var(--hp-head); font-weight:700; font-size:19px; color:var(--hp-ink); margin-bottom:8px; }
.hp-feature p{ color:var(--hp-muted); font-size:15px; line-height:1.6; margin:0; }

/* Service selector cards (homepage "Our Services") */
.hp-service-card{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius);
  padding:26px 24px; box-shadow:var(--hp-shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hp-service-card:hover{ transform:translateY(-5px); box-shadow:var(--hp-shadow-md); border-color:var(--hp-teal-light); }
.hp-service-card .ic{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:var(--hp-teal-50); color:var(--hp-teal); font-size:24px; margin-bottom:16px;
}
.hp-service-card h4{ font-family:var(--hp-head); font-weight:700; font-size:18px; color:var(--hp-ink); margin:0 0 8px; }
.hp-service-card p{ color:var(--hp-muted); font-size:14.5px; line-height:1.6; margin:0 0 16px; flex:1; }
.hp-service-card .go{ font-family:var(--hp-head); font-weight:600; font-size:14.5px; color:var(--hp-teal-dark); display:inline-flex; align-items:center; gap:6px; }
.hp-service-card .go i{ transition:transform .2s ease; }
.hp-service-card:hover .go i{ transform:translateX(4px); }

/* ---------------------------------------------------------------------------
   09. Feature comparison table
   ------------------------------------------------------------------------- */
.hp-compare-wrap{ overflow-x:auto; border-radius:var(--hp-radius); box-shadow:var(--hp-shadow-sm); border:1px solid var(--hp-line); background:#fff; }
.hp-compare{ width:100%; border-collapse:collapse; min-width:680px; }
.hp-compare th, .hp-compare td{ padding:16px 18px; text-align:center; border-bottom:1px solid var(--hp-line); }
.hp-compare thead th{ background:var(--hp-teal-50); font-family:var(--hp-head); font-weight:700; color:var(--hp-ink); font-size:16px; position:sticky; top:0; }
.hp-compare tbody th{ text-align:left; font-family:var(--hp-head); font-weight:600; color:var(--hp-ink); background:#fbfdfe; }
.hp-compare td .yes{ color:var(--hp-green); font-size:20px; }
.hp-compare td .no{ color:#cfd6db; font-size:18px; }
.hp-compare tbody tr:hover td, .hp-compare tbody tr:hover th{ background:var(--hp-teal-50); }
.hp-compare .col-hl{ background:rgba(25,149,173,.06); }

/* ---------------------------------------------------------------------------
   10. Reviews (Google-style cards)
   ------------------------------------------------------------------------- */
.hp-review{ background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius); padding:26px; height:100%; box-shadow:var(--hp-shadow-sm); display:flex; flex-direction:column; }
.hp-review-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.hp-review-avatar{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; color:#fff;
  font-family:var(--hp-head); font-weight:600; font-size:17px; letter-spacing:.02em;
}
.hp-review-id{ display:flex; flex-direction:column; line-height:1.3; margin-right:auto; }
.hp-review-id .nm{ font-family:var(--hp-head); font-weight:600; color:var(--hp-ink); font-size:15px; }
.hp-review-id .dt{ font-size:12.5px; color:var(--hp-muted); }
.hp-review-g{ display:inline-flex; align-items:center; flex-shrink:0; }
.hp-review .stars{ color:#fbbc04; font-size:17px; margin-bottom:10px; letter-spacing:2px; }
.hp-review .stars .empty{ color:#dbe1e6; }
.hp-review p{ color:var(--hp-slate); font-size:15px; line-height:1.7; margin:0; flex:1; }

/* Legacy testimonial card (kept for compatibility) */
.hp-testi{ background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius); padding:28px; height:100%; box-shadow:var(--hp-shadow-sm); display:flex; flex-direction:column; }
.hp-testi .stars{ color:var(--hp-amber); font-size:16px; margin-bottom:12px; letter-spacing:2px; }
.hp-testi p{ color:var(--hp-slate); font-size:15.5px; line-height:1.7; flex:1; }
.hp-testi .who{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.hp-testi .who img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.hp-testi .who .nm{ font-family:var(--hp-head); font-weight:700; color:var(--hp-ink); font-size:15px; }
.hp-testi .who .rl{ font-size:13px; color:var(--hp-muted); }
.hp-testi .quote-ic{ font-size:34px; color:var(--hp-teal-light); line-height:1; }

/* ---------------------------------------------------------------------------
   11. CTA banner
   ------------------------------------------------------------------------- */
.hp-cta{ position:relative; overflow:hidden; background:var(--hp-grad); border-radius:22px; color:#fff; padding:54px 48px; }
.hp-cta::before{ content:""; position:absolute; right:-60px; top:-60px; width:320px; height:320px; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); }
.hp-cta h2{ font-family:var(--hp-head); font-weight:700; color:#fff; font-size:34px; margin:0 0 8px; }
.hp-cta p{ color:rgba(255,255,255,.9); font-size:17px; margin:0; }
@media (max-width:768px){ .hp-cta{ padding:38px 24px; text-align:center; } .hp-cta h2{ font-size:26px; } }

/* ---------------------------------------------------------------------------
   12. FAQ accordion polish (bootstrap 5 accordion used on pages)
   ------------------------------------------------------------------------- */
.accordion-item{ border:1px solid var(--hp-line) !important; border-radius:12px !important; overflow:hidden; margin-bottom:12px; box-shadow:var(--hp-shadow-sm); }
.accordion-button{ font-family:var(--hp-head); font-weight:600; color:var(--hp-ink); font-size:16.5px; padding:18px 20px; }
.accordion-button:not(.collapsed){ background:var(--hp-teal-50); color:var(--hp-teal-dark); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; border-color:var(--hp-teal-light); }
.accordion-button::after{ background-size:1rem; }
.accordion-body{ color:var(--hp-slate); line-height:1.7; font-size:15px; }

/* ---------------------------------------------------------------------------
   13. Logo / payment / brand strip
   ------------------------------------------------------------------------- */
.hp-brandstrip{ display:flex; align-items:center; justify-content:center; gap:42px; flex-wrap:wrap; opacity:.8; }
.hp-brandstrip img{ height:30px; width:auto; filter:grayscale(1); transition:filter .3s ease, opacity .3s ease; opacity:.8; }
.hp-brandstrip img:hover{ filter:none; opacity:1; }

/* ---------------------------------------------------------------------------
   14. Section backgrounds & dividers
   ------------------------------------------------------------------------- */
.bg-five{ background:#f4f8fa !important; }
.hp-bg-soft{ background: var(--hp-grad-soft); }
.hp-bg-ink{ background:#0f2630; color:#cfe6ec; }
.hp-divider-wave{ display:block; width:100%; height:auto; }

/* ---------------------------------------------------------------------------
   15. Scroll reveal (enhancements.js adds .hp-in when in view)
   ------------------------------------------------------------------------- */
.hp-reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.hp-reveal.hp-in{ opacity:1; transform:none; }
.hp-reveal.d1{ transition-delay:.08s; } .hp-reveal.d2{ transition-delay:.16s; } .hp-reveal.d3{ transition-delay:.24s; } .hp-reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .hp-reveal{ opacity:1 !important; transform:none !important; }
  .hp-hero::before, .hp-hero-art, .hp-glass{ animation:none !important; }
}

/* ---------------------------------------------------------------------------
   16. Footer polish
   ------------------------------------------------------------------------- */
.main-footer{ background:#0f2630; }
.main-footer .footer-content h5{ font-family:var(--hp-head); font-weight:700; color:#fff; position:relative; padding-bottom:12px; margin-bottom:16px; }
.main-footer .footer-content h5::after{ content:""; position:absolute; left:0; bottom:0; width:38px; height:3px; background:var(--hp-teal); border-radius:2px; }
.main-footer .footer-content ul li{ margin-bottom:9px; }
.main-footer .footer-content ul li a{ color:#9fb4bd; transition: color .2s ease, padding-left .2s ease; font-size:14.5px; }
.main-footer .footer-content ul li a:hover{ color:#fff; padding-left:5px; }
.footer-social-media a{ width:38px; height:38px; border-radius:9px; display:inline-grid; place-items:center; background:rgba(255,255,255,.08); color:#cfe0e6 !important; margin-right:8px; transition: all .25s ease; }
.footer-social-media a:hover{ background:var(--hp-teal); color:#fff !important; transform:translateY(-3px); }
.main-footer .footer-bottom-link a{ color:#9fb4bd; } .main-footer .footer-bottom-link a:hover{ color:#fff; }
.main-footer .border{ border-color:rgba(255,255,255,.12) !important; }

/* ---------------------------------------------------------------------------
   17. Back-to-top button
   ------------------------------------------------------------------------- */
.scroll-top{ background:var(--hp-teal) !important; box-shadow:0 4px 14px rgba(16,56,67,.18); }

/* ---------------------------------------------------------------------------
   18. MOBILE bottom navigation  (Home · Support · WhatsApp · Account)
   ------------------------------------------------------------------------- */
.hp-bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:1080;
  display:flex; background:#fff;
  border-top:1px solid var(--hp-line);
  box-shadow:0 -6px 24px rgba(16,56,67,.12);
  padding-bottom:env(safe-area-inset-bottom);
}
.hp-bottomnav__item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 4px 8px; text-decoration:none;
  color:var(--hp-muted); font-family:var(--hp-head); font-weight:500; font-size:11px; letter-spacing:.01em;
  transition:color .2s ease, background .2s ease;
}
.hp-bottomnav__item i{ font-size:21px; line-height:1; }
.hp-bottomnav__item span{ line-height:1; }
.hp-bottomnav__item:hover,
.hp-bottomnav__item:active{ color:var(--hp-teal); background:var(--hp-teal-50); }
.hp-bottomnav__item--wa{ color:var(--hp-muted); }
.hp-bottomnav__item--wa:hover,
.hp-bottomnav__item--wa:active{ color:var(--hp-teal); background:var(--hp-teal-50); }
/* keep page content clear of the fixed bottom nav on mobile */
@media (max-width:991px){ body{ scroll-padding-bottom:80px; } .main-footer{ padding-bottom:80px; } }

/* Desktop floating WhatsApp pill (base styles moved here from footer inline CSS) */
.floating-whatsapp{
  position:fixed; bottom:22px; left:22px; z-index:1080;
  align-items:center; gap:10px;
  background:#25D366; color:#fff !important; text-decoration:none !important;
  padding:12px 20px; border-radius:50px;
  box-shadow:0 12px 28px rgba(37,211,102,.35);
  font-family:var(--hp-head); font-size:15px; font-weight:600;
  transition: background-color .2s ease;
}
.floating-whatsapp:hover{ transform:none; box-shadow:0 6px 18px rgba(16,56,67,.18); color:#fff !important; }
.floating-whatsapp i{ font-size:22px; line-height:1; }
/* Hide the desktop pill on mobile — the floating action menu replaces it there */
@media (max-width:991px){ .floating-whatsapp{ display:none !important; } }

/* ---------------------------------------------------------------------------
   19. Misc fixes — icon font fallbacks, image rendering, links
   ------------------------------------------------------------------------- */
img{ height:auto; }
a{ transition: color .2s ease; }
.rating{ background:var(--hp-teal-50); }
.rating-content i{ color:var(--hp-amber); }
/* Ensure FA brand icons (whatsapp) render even if only FA6 loaded */
.fa-whatsapp:before{ font-family:"Font Awesome 6 Brands","Font Awesome 5 Brands"; }

/* Breadcrumb / page header spacing on inner WHMCS pages */
#main-body{ padding-top:18px; }

/* Utility */
.hp-mt-6{ margin-top:6px;} .hp-mt-2{ margin-top:2rem;} .hp-mb-2{ margin-bottom:2rem;}
.hp-text-teal{ color:var(--hp-teal) !important; }

/* ---------------------------------------------------------------------------
   20. Split-screen LOGIN / AUTH page (.hp-auth)
   ------------------------------------------------------------------------- */
.hp-auth{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  padding:48px 20px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0d5a6b 0%, #1995ad 55%, #15a7c4 100%);
}
.hp-auth::after{ /* subtle grid overlay — same treatment as the homepage hero */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
  mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
}

/* Centered glass card holding the form (vertically + horizontally centered) */
.hp-auth__left{
  position:relative; z-index:2;
  display:flex; flex-direction:column; width:100%; max-width:420px; color:#fff;
  background:rgba(8,34,41,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:18px;
  padding:40px 34px; box-shadow:0 24px 60px rgba(0,0,0,.30);
}
.hp-auth__brand{ display:inline-flex; align-items:center; gap:10px; }
.hp-auth__brand img{ height:36px; width:auto; }
.hp-auth__formwrap{ width:100%; }
.hp-auth h1{ font-family:var(--hp-head); font-weight:600; font-size:28px; line-height:1.1; color:#fff; margin:0 0 24px; letter-spacing:-.01em; }
.hp-auth .label{ display:block; color:#d7e3e7; font-family:var(--hp-head); font-weight:600; font-size:14px; margin:0 0 8px; }
.hp-auth .label .req{ color:#ff8585; }
.hp-auth .input{ width:100%; background:#15323b; border:1px solid #294952; color:#fff; border-radius:11px; padding:14px 16px; font-size:15px; transition:border-color .2s ease, box-shadow .2s ease; }
.hp-auth .input::placeholder{ color:#728b94; }
.hp-auth .input:focus{ outline:none; border-color:var(--hp-teal); box-shadow:0 0 0 3px rgba(25,149,173,.28); }
.hp-auth__field{ margin-bottom:18px; }
.hp-auth__pw{ position:relative; }
.hp-auth__pw .input{ padding-right:48px; }
.hp-auth__pw .toggle{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:grid; place-items:center; background:none; border:none; color:#8aa2ab; cursor:pointer; font-size:18px; border-radius:8px; }
.hp-auth__pw .toggle:hover{ color:#fff; background:rgba(255,255,255,.06); }
.hp-auth__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 22px; flex-wrap:wrap; }
.hp-auth__remember{ display:inline-flex; align-items:center; gap:8px; color:#aebfc6; font-size:14px; cursor:pointer; }
.hp-auth__remember input{ width:16px; height:16px; accent-color:var(--hp-teal); }
.hp-auth__forgot{ color:#bfeaf2; font-weight:600; font-size:14px; text-decoration:underline; }
.hp-auth__forgot:hover{ color:#fff; }
.hp-auth__btn{ width:100%; border:none; border-radius:11px; padding:15px 18px; font-family:var(--hp-head); font-weight:600; font-size:17px; color:#fff; cursor:pointer; background:var(--hp-teal); box-shadow:none; transition:background-color .2s ease; }
.hp-auth__btn:hover{ transform:none; box-shadow:none; background:var(--hp-teal-dark); }
.hp-auth__alt{ text-align:center; margin-top:22px; color:#9fb2ba; font-size:14.5px; }
.hp-auth__alt a{ color:#fff; font-weight:600; text-decoration:underline; }
.hp-auth__alt .forgot-only{ display:block; margin-top:10px; }
.hp-auth__social{ margin-top:18px; }
.hp-auth__foot{ margin-top:auto; padding-top:28px; color:#6f8790; font-size:12.5px; }
.hp-auth .alert{ border-radius:10px; }

/* Right: branded promo panel */
.hp-auth__right{ position:relative; overflow:hidden; padding:54px clamp(36px,4vw,64px); display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(150deg,#bfe7cf 0%,#3aa9b9 38%,#1995ad 62%,#0d5a6b 100%); }
.hp-auth__right::before{ content:""; position:absolute; inset:-20% -10% auto -10%; height:150%; pointer-events:none;
  background:radial-gradient(40% 50% at 20% 20%,rgba(255,255,255,.35),transparent 60%), radial-gradient(40% 50% at 85% 80%,rgba(13,90,107,.5),transparent 60%);
  animation:hpAurora 16s ease-in-out infinite alternate; }
.hp-auth__inner{ position:relative; z-index:2; max-width:560px; margin:0 auto; width:100%; }
.hp-auth__media{ position:relative; height:330px; margin-bottom:34px; }
.hp-auth__photo{ position:absolute; border-radius:18px; object-fit:cover; box-shadow:0 24px 60px rgba(6,40,48,.35); border:4px solid rgba(255,255,255,.5); }
.hp-auth__photo--main{ width:62%; height:74%; top:0; left:6%; }
.hp-auth__photo--sec{ width:46%; height:52%; bottom:0; right:4%; }
.hp-auth__glass{ position:absolute; left:0; bottom:6%; width:220px; background:rgba(8,40,48,.62); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:16px 18px; color:#fff; box-shadow:0 18px 40px rgba(0,0,0,.3); }
.hp-auth__glass .cap{ font-size:12px; color:#bfeaf2; }
.hp-auth__glass .amt{ font-family:var(--hp-head); font-weight:700; font-size:26px; color:#7fe6bf; line-height:1.1; }
.hp-auth__glass .sub{ font-size:11.5px; color:#cfe6ec; margin-bottom:10px; }
.hp-auth__glass .acts{ display:flex; gap:10px; }
.hp-auth__glass .acts span{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; color:#cfe6ec; }
.hp-auth__glass .acts i{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.12); font-size:15px; }
.hp-auth__toast{ position:absolute; top:2%; right:0; display:flex; align-items:center; gap:10px; background:rgba(8,40,48,.7); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:10px 14px; color:#fff; box-shadow:0 14px 30px rgba(0,0,0,.28); }
.hp-auth__toast i{ color:#7fe6bf; font-size:20px; }
.hp-auth__toast .tt{ font-family:var(--hp-head); font-weight:600; font-size:13px; }
.hp-auth__toast .td{ font-size:11px; color:#cfe6ec; }
.hp-auth__promo h3{ font-family:var(--hp-head); font-weight:700; color:#fff; font-size:24px; margin:0 0 14px; }
.hp-auth__promo p{ color:rgba(255,255,255,.92); font-size:15.5px; line-height:1.6; margin:0 0 10px; }
.hp-auth__promo a.refbtn{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; color:#06343f; background:#fff; font-family:var(--hp-head); font-weight:600; padding:11px 22px; border-radius:10px; }

@media (max-width:991px){
  .hp-auth{ grid-template-columns:1fr; padding:28px 16px; overflow:visible; }
  .hp-auth__right{ display:none; }
  /* keep the form a centred card (no full-height top-align, no clipping) */
  .hp-auth__left{ padding:30px 22px; min-height:auto; width:100%; max-width:440px; margin:auto; }
}

/* ---------------------------------------------------------------------------
   21. Two-tier header — black promo/utility bar + white main nav (Bluehost-style)
   ------------------------------------------------------------------------- */
.topbar{
  background:#0c1417 !important; color:#fff; padding:7px 0 !important; margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar-flex{ position:relative; display:flex; align-items:center; justify-content:flex-end; min-height:26px; gap:10px; }
.topbar-promo{ position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:13.5px; color:#e7eef0; font-weight:500; }
.topbar-promo i{ color:#7fe6bf; margin-right:4px; }
.topbar-promo strong{ color:#fff; }
.topbar-promo a{ color:var(--hp-amber); font-weight:700; text-decoration:underline; text-underline-offset:3px; margin-left:4px; }
.topbar-promo a:hover{ color:#ffba50; }
@media (max-width:1300px){ .topbar-promo{ position:static; transform:none; } .topbar-flex{ justify-content:center; } }

.topbar-utils{ display:flex; align-items:center; gap:4px; }
.topbar-contact{
  display:inline-flex; align-items:center; gap:7px; color:#fff !important; font-weight:600; font-size:13px;
  border:1px solid rgba(255,255,255,.35); border-radius:50px; padding:6px 16px; margin-right:8px; transition:all .2s ease;
}
.topbar-contact:hover{ background:#fff; color:#0c1417 !important; border-color:#fff; }

/* white text for topbar dropdown buttons (Help / Account / Currency / Language) */
.topbar .top-bar-dropdown > button{ color:#dfe7ea !important; background:transparent; border:none; font-size:13px; font-weight:500; padding:6px 12px; display:inline-flex; align-items:center; gap:6px; transition:color .2s ease; }
.topbar .top-bar-dropdown > button:hover{ color:#fff !important; }
.topbar .top-bar-dropdown > button i{ font-size:14px; }
.topbar .cart-icon-header{ display:inline-flex; align-items:center; margin-left:6px; position:relative; }
.topbar .cart-icon-header img{ width:20px; filter:brightness(0) invert(1); opacity:.9; }
.topbar .cart-icon-header .count{ background:var(--hp-teal); color:#fff; font-size:10px; font-weight:700; border-radius:50px; padding:0 6px; min-width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; margin-left:-6px; margin-top:-10px; }
.topbar .dropdown-menu{ border-radius:12px; border:1px solid var(--hp-line); box-shadow:var(--hp-shadow-md); padding:8px; }
.topbar .dropdown-menu li a{ border-radius:8px; padding:8px 12px; font-size:14px; color:var(--hp-ink); display:block; }
.topbar .dropdown-menu li a:hover{ background:var(--hp-teal-50); color:var(--hp-teal-dark); }

/* White main nav CTA cluster */
.cart-bar-header{ gap:18px; }
.top-link-secondary{ color:var(--hp-ink); font-family:var(--hp-head); font-weight:600; font-size:15px; transition:color .2s ease; }
.top-link-secondary:hover{ color:var(--hp-teal); }
.top-button i{ margin-left:6px; font-size:14px; transition:transform .2s ease; }
.top-button:hover i{ transform:translateX(3px); }

/* ============================================================================
   CHECKOUT & ICON UPGRADE PASS — 2026-06  (site-wide layer, appended)
   1. Deterministic Font Awesome resolution (fixes FA5/FA6 blank-glyph conflict)
   2. Smaller, better-proportioned Client Area button
   3. Desktop floating WhatsApp button removed (mobile keeps bottom-nav WhatsApp)
   ========================================================================== */

/* --- 1. ICON FIX ------------------------------------------------------------
   The header loads Font Awesome 6 (CDN) while WHMCS core ships FA5; that cascade
   collision left many glyphs blank. Pin every FA class to the FA6 webfonts
   (always loaded in <head>) so icons render consistently across the client
   area, product, cart, checkout and navigation. Duotone (fad, a Pro-only style)
   is mapped to solid so it can never render as an empty square. */
.fa, .fas, .fa-solid,
.far, .fa-regular,
.fab, .fa-brands,
.fad, .fa-duotone {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
.fa, .fas, .fa-solid,
.fad, .fa-duotone { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.far, .fa-regular { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; }
.fab, .fa-brands  { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* --- 2. CLIENT AREA BUTTON (smaller, more refined proportions) -------------- */
.top-button{
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  line-height: 1.2 !important;
}
.top-button i{ font-size: 12px !important; margin-left: 5px !important; }

/* --- 3. REMOVE DESKTOP FLOATING WHATSAPP ------------------------------------
   It previously showed on desktop only; the mobile bottom-nav already carries
   WhatsApp, so hide the floating pill on desktop too (≥992px). */
@media (min-width:992px){ .floating-whatsapp{ display:none !important; } }

/* --- 4. CLIENT AREA BUTTON — smaller still ----------------------------------
   High-specificity + !important so it wins over style.css and isn't left large
   by a cached stylesheet. Compact pill, lighter weight. */
header .main-menu .cart-bar-header .top-button,
.main-menu .cart-bar-header .top-button,
.cart-bar-header .top-button,
.top-button{
  padding: 7px 17px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  line-height: 1.2 !important;
}
.cart-bar-header .top-button i,
.top-button i{ font-size: 14px !important; margin-left: 6px !important; }

/* ============================================================================
   SUPPORT CENTRE — submit-ticket redesign (step 1 cards + step 2 form)
   Scoped to .hp-support / .hp-support-form so nothing else is affected.
   ========================================================================== */
.hp-support{ max-width:1060px; margin:0 auto; padding:6px 0 52px; }
.hp-support-head{ text-align:center; margin:6px 0 26px; }
.hp-support-head h1{ font-family:var(--hp-head); font-size:27px; font-weight:700; color:var(--hp-ink); margin:0 0 8px; letter-spacing:-.01em; }
.hp-support-head p{ color:var(--hp-muted); font-size:15px; line-height:1.6; max-width:600px; margin:0 auto; }

/* Department cards */
.hp-dept-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.hp-dept-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  background:#fff; border:1px solid var(--hp-line); border-radius:16px;
  padding:22px 20px; text-decoration:none !important; box-shadow:var(--hp-shadow-sm);
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-dept-card:hover{ transform:translateY(-3px); box-shadow:var(--hp-shadow-md); border-color:var(--hp-teal-light); }
.hp-dept-ic{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--hp-teal-50),#ffffff); color:var(--hp-teal);
  font-size:20px; border:1px solid var(--hp-line); transition:background .2s ease, color .2s ease;
}
.hp-dept-card:hover .hp-dept-ic{ background:var(--hp-grad); color:#fff; border-color:transparent; }
.hp-dept-name{ font-family:var(--hp-head); font-weight:600; font-size:16px; color:var(--hp-ink); }
.hp-dept-desc{ color:var(--hp-muted); font-size:13.5px; line-height:1.5; }
.hp-dept-go{ margin-top:auto; padding-top:4px; color:var(--hp-teal); font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.hp-dept-go i{ transition:transform .2s ease; }
.hp-dept-card:hover .hp-dept-go i{ transform:translateX(3px); }

/* Section headings */
.hp-section-h{ font-family:var(--hp-head); font-size:18px; font-weight:600; color:var(--hp-ink); margin:0 0 14px; }
.hp-before{ margin-top:36px; }

/* Before-you-submit info cards */
.hp-info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.hp-info-card{ background:var(--hp-teal-50); border:1px solid var(--hp-line); border-radius:14px; padding:18px; }
.hp-info-card h3{ font-size:14px; font-weight:600; color:var(--hp-ink); margin:0 0 7px; display:flex; align-items:center; gap:8px; }
.hp-info-card h3 i{ color:var(--hp-teal); font-size:16px; }
.hp-info-card p{ color:var(--hp-slate); font-size:13px; line-height:1.55; margin:0; }
.hp-info-card a{ color:var(--hp-teal); font-weight:600; }

/* Trust statistics */
.hp-stats{ margin-top:36px; }
.hp-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.hp-stat{ background:#fff; border:1px solid var(--hp-line); border-radius:14px; padding:18px 14px; text-align:center; box-shadow:var(--hp-shadow-sm); }
.hp-stat .num{ display:block; font-family:var(--hp-head); font-size:23px; font-weight:700; color:var(--hp-teal); line-height:1.1; }
.hp-stat .lbl{ display:block; color:var(--hp-muted); font-size:12.5px; margin-top:4px; }

/* Step 2 — ticket form restyle (functionality untouched) */
.hp-support-form{ max-width:900px; margin:0 auto; }
.hp-support-form h3.card-title{ font-family:var(--hp-head); font-size:20px; font-weight:600; color:var(--hp-ink); margin:4px 0 16px; }
.hp-support-form .card{ background:#fff !important; border:1px solid var(--hp-line); border-radius:16px; box-shadow:var(--hp-shadow-sm); }
.hp-support-form .card-body{ padding:24px; }
.hp-support-form label{ font-family:var(--hp-head); font-weight:600; font-size:13.5px; color:var(--hp-ink); margin-bottom:6px; }
.hp-support-form .form-control{ border:1px solid var(--hp-line); border-radius:10px; padding:11px 14px; font-size:14px; }
.hp-support-form .form-control:focus{ border-color:var(--hp-teal); box-shadow:0 0 0 3px rgba(25,149,173,.12); }
.hp-support-form textarea.form-control,
.hp-support-form .markdown-editor{ min-height:220px; }
.hp-support-form .form-group{ margin-bottom:18px; }
.hp-support-form .btn-primary{ background:var(--hp-teal) !important; border-color:var(--hp-teal) !important; border-radius:10px; padding:11px 22px; font-weight:600; }
.hp-support-form .btn-primary:hover{ background:var(--hp-teal-dark) !important; }
.hp-support-form .btn-default{ border-radius:10px; padding:11px 20px; }

@media (max-width:600px){
  .hp-support-head h1{ font-size:23px; }
  .hp-support-form .card-body{ padding:18px; }
}

/* ============================================================================
   WORDPRESS HOSTING — free-website-with-annual-plan offer section (.wp-offer)
   ========================================================================== */
.wp-offer{ padding:48px 0 8px; }
.wp-offer-card{
  background:linear-gradient(135deg,#0f5a6b 0%, #1995ad 100%);
  border-radius:22px; padding:38px; color:#fff;
  display:grid; grid-template-columns:1.08fr .92fr; gap:34px; align-items:center;
  box-shadow:var(--hp-shadow-md);
}
.wp-offer-badge{
  display:inline-block; background:rgba(255,255,255,.16); color:#fff;
  font-family:var(--hp-head); font-weight:600; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; padding:6px 13px; border-radius:30px; margin-bottom:14px;
}
.wp-offer-main h2{ font-family:var(--hp-head); font-size:30px; font-weight:700; line-height:1.18; margin:0 0 12px; color:#fff; }
.wp-offer-main h2 span{ color:#bdf0fa; }
.wp-offer-main > p{ color:rgba(255,255,255,.92); font-size:15px; line-height:1.65; margin:0 0 18px; }
.wp-offer-main strong{ color:#fff; font-weight:600; }
.wp-offer-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.wp-offer-cta .btn-01{ background:#fff !important; color:#0f5a6b !important; border:none !important; }
.wp-offer-cta .btn-01:hover{ background:#eafaff !important; color:#0d5060 !important; }
.wp-offer-link{ color:#fff; font-weight:600; font-size:14px; text-decoration:none; }
.wp-offer-link:hover{ color:#bdf0fa; }
.wp-offer-note{ margin:16px 0 0; font-size:13px; color:rgba(255,255,255,.82); }
.wp-offer-note strong{ color:#fff; }
.wp-offer-points{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wp-offer-point{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:14px; padding:16px 16px 15px; }
.wp-offer-point h4{ font-family:var(--hp-head); font-size:15px; font-weight:600; margin:0 0 5px; color:#fff; }
.wp-offer-point p{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.88); margin:0; }
@media (max-width:900px){ .wp-offer-card{ grid-template-columns:1fr; padding:28px; gap:24px; } }
@media (max-width:520px){ .wp-offer-points{ grid-template-columns:1fr; } .wp-offer-main h2{ font-size:24px; } }

/* ============================================================================
   PRICING PLANS — clean toggle + consistent bonus messaging
   ========================================================================== */
/* Remove the glitchy radio-circle marks on the price toggle (clean pills) */
.nav-item-tabs .nav-links::after,
.nav-item-tabs .nav-links.active::after{ content:none !important; }

/* Per-cycle bonus badges inside each plan card's price */
.plan-style-one .hp-bonus{
  display:inline-block; margin-top:10px; font-family:var(--hp-head);
  font-size:11.5px; font-weight:600; line-height:1.3;
  color:var(--hp-teal-darker); background:var(--hp-teal-50);
  border:1px solid var(--hp-teal-light); border-radius:30px; padding:5px 12px;
}
.plan-style-one .hp-bonus--best{ color:#8a5300; background:#fff6e3; border-color:#ffd98a; }
.plan-style-one .hp-bonus-hint{ display:block; margin-top:10px; font-size:11.5px; color:var(--hp-muted); }

/* Clear value line under the price toggle */
.hp-plan-bonusline{
  text-align:center; max-width:660px; margin:14px auto 0;
  font-size:13px; line-height:1.55; color:var(--hp-slate);
}
.hp-plan-bonusline strong{ color:var(--hp-teal-dark); font-weight:600; }
.hp-plan-bonusline em{ font-style:normal; color:#8a5300; font-weight:600; }

/* ============================================================================
   CLIENT AREA — remove all icons (per request)
   Scoped to the logged-in client-area body (#main-body) so the top nav, footer
   and marketing pages keep their icons. Covers Font Awesome + Bootstrap Icons.
   ========================================================================== */
#main-body i.fa,  #main-body i.fas, #main-body i.far, #main-body i.fab,
#main-body i.fal, #main-body i.fad, #main-body i[class^="fa-"], #main-body i[class*=" fa-"],
#main-body i.bi,  #main-body i[class^="bi-"], #main-body i[class*=" bi-"]{ display:none !important; }
/* tidy the gaps the icons used to occupy */
#main-body .hpd-welcome .hpd-btn{ gap:0; }
#main-body .list-group-item > i + *,
#main-body .card-title > i{ margin-left:0; }

/* ============================================================================
   CLIENT AREA — remove the sidebar, content goes full width (per request)
   ========================================================================== */
#main-body .row > .col-lg-4.col-xl-3{ display:none !important; }
#main-body .primary-content{ flex:0 0 100% !important; max-width:100% !important; }

/* ============================================================================
   SUPPORT PAGE — keep its Bootstrap icons (the client-area icon removal above
   would otherwise blank the department / info-card icons). Same reliable icon
   set the contact page uses, so they render.
   ========================================================================== */
#main-body .hp-support i.bi,
#main-body .hp-support i[class*="bi-"]{ display:inline-block !important; }

/* ============================================================================
   PHONE FIELDS (intl-tel-input) — typed number must clear the flag + "+27"
   Works site-wide (checkout, register, account details) and across both
   intl-tel-input class conventions (.iti / .intl-tel-input), with a :has()
   fallback that detects the separate dial-code element directly.
   ========================================================================== */
.iti, .intl-tel-input{ display:block; width:100%; }
.iti > input, .iti input.form-control,
.intl-tel-input > input, .intl-tel-input input.form-control{ padding-left:52px !important; }
.iti--separate-dial-code input,
.intl-tel-input.separate-dial-code input,
.iti:has(.iti__selected-dial-code) input,
.iti:has(.selected-dial-code) input{ padding-left:94px !important; }
#order-standard_cart .iti--separate-dial-code input.form-control,
#order-standard_cart .iti:has(.iti__selected-dial-code) input.form-control{ padding-left:94px !important; }