/*
 * Hostavvy WHMCS Twenty-One Child Theme
 * Update-safe custom layer: visual system, marketing pages, client area polish, cart/order styling.
 * v5.1 - cleaned up inline styles, JS/CSS cookie bar sync, parent-nav suppression, deduplication pass.
 */

/* -- PARENT / BOOTSTRAP NAV SUPPRESSION --------------------------------------
   WHMCS may render the Twenty-One parent's Bootstrap navbar alongside the
   custom ha-header. Suppress it here so only ha-header is visible.
   --------------------------------------------------------------------------- */
.navbar.navbar-default,
.navbar-static-top,
.main-navbar-wrapper,
.topbar,
#nav-wrapper,
.hw-page-hero + .navbar,
.twenty-one-primary-nav { display: none !important; }

/* -- MEGA MENU SECTION SPACING UTILITY --------------------------------------*/
.hw-mega-section--spaced { margin-top: 12px; }

/* -- MODAL THEMING (replaces inline styles in footer.tpl) -------------------*/
.hw-modal-content {
  background: #1a2240;
  border: 1px solid rgba(255,255,255,0.1);
  color: #f1f5f9;
}
.hw-modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hw-modal-close {
  color: #fff;
  opacity: 0.7;
}
.hw-modal-close:hover { opacity: 1; }
.hw-modal-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* -- ADMIN RETURN BUTTON (replaces inline style in footer.tpl) ------------- */
.hw-admin-return-btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 999;
  font-size: 0.8125rem;
}

/* -- PRODUCT ICON COLOR VARIANTS (replaces inline styles in homepage.tpl) -- */
.hw-product-icon--indigo { background: rgba(79,70,229,0.15);  color: #818CF8; }
.hw-product-icon--cyan   { background: rgba(6,182,212,0.15);  color: #67E8F9; }
.hw-product-icon--green  { background: rgba(16,185,129,0.15); color: #34D399; }
.hw-product-icon--amber  { background: rgba(245,158,11,0.15); color: #FCD34D; }
.hw-product-icon--red    { background: rgba(244,63,94,0.15);  color: #FB7185; }
.hw-product-icon--violet { background: rgba(124,58,237,0.15); color: #C084FC; }

/* -- SECTION UTILITY SPACING ----------------------------------------------- */
.hw-section-sub-centered { margin: 0 auto 40px; }
.hw-text-muted-sm        { font-size: 0.875rem; color: var(--ha-muted); }

/* -- STICKY HEADER SCROLL STATE (toggled by JS on .ha-header) ------------- */
.ha-header--scrolled {
  box-shadow: 0 4px 24px rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.ha-header--scrolled .ha-logo-img {
  height: 28px;
  transition: height 0.25s ease;
}
:root {
  --ha-bg: #050816;
  --ha-bg-soft: #0b1024;
  --ha-surface: #10172f;
  --ha-surface-2: #151f3d;
  --ha-border: rgba(148, 163, 184, 0.18);
  --ha-border-strong: rgba(25, 211, 255, 0.28);
  --ha-text: #f8fafc;
  --ha-muted: #94a3b8;
  --ha-blue: #2f80ff;
  --ha-cyan: #19d3ff;
  --ha-purple: #8b5cf6;
  --ha-success: #22c55e;
  --ha-warning: #f59e0b;
  --ha-danger: #ef4444;
  --ha-radius: 24px;
  --ha-shadow: 0 22px 70px rgba(2, 6, 23, 0.45);
  --ha-glow: 0 0 32px rgba(25, 211, 255, 0.22);
}

html { scroll-behavior: smooth; }
body.primary-bg-color,
body { background: var(--ha-bg); color: var(--ha-text); }
a { color: var(--ha-cyan); transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
a:hover { color: #7dd3fc; text-decoration: none; }

.header, .navbar, .main-navbar-wrapper, .topbar {
  background: rgba(5, 8, 22, 0.88) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ha-border);
}
.logo-img { max-height: 42px; }
.navbar-light .navbar-nav .nav-link, .navbar .btn, .topbar .btn { color: var(--ha-text) !important; }
.navbar-light .navbar-nav .nav-link:hover, .navbar .dropdown-item:hover { color: var(--ha-cyan) !important; }
.dropdown-menu { background: var(--ha-surface); border: 1px solid var(--ha-border); box-shadow: var(--ha-shadow); }
.dropdown-item { color: var(--ha-text); }
.dropdown-divider { border-color: var(--ha-border); }
.cart-btn .badge { background: linear-gradient(135deg, var(--ha-cyan), var(--ha-purple)); color: white; }
.master-breadcrumb { background: var(--ha-bg-soft); border-bottom: 1px solid var(--ha-border); }
.breadcrumb { background: transparent; }
.breadcrumb, .breadcrumb a, .breadcrumb-item.active { color: var(--ha-muted); }

#main-body { background: radial-gradient(circle at 20% 0%, rgba(47, 128, 255, .18), transparent 32%), var(--ha-bg); color: var(--ha-text); min-height: 65vh; }
.primary-content { color: var(--ha-text); }
.main-content, .card, .panel, .modal-content, .list-group-item, .tile, .well { color: var(--ha-text); }

.btn, .form-control, .input-group-text { border-radius: 12px; }
.btn-primary, .btn-success, .btn-info, .btn-outline-primary:hover {
  background: linear-gradient(135deg, var(--ha-blue), var(--ha-cyan) 48%, var(--ha-purple));
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(47, 128, 255, .25);
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-outline-primary { border-color: var(--ha-border-strong); color: var(--ha-cyan); }
.btn-default, .btn-secondary { background: var(--ha-surface-2); border-color: var(--ha-border); color: var(--ha-text); }
.btn-link { color: var(--ha-cyan); }

.form-control, select.form-control, textarea.form-control, .input-group-text {
  background: rgba(15, 23, 42, .84);
  border: 1px solid var(--ha-border);
  color: var(--ha-text);
}
.form-control:focus {
  background: rgba(15, 23, 42, .96);
  border-color: var(--ha-cyan);
  color: var(--ha-text);
  box-shadow: 0 0 0 .2rem rgba(25, 211, 255, .16);
}
.form-control::placeholder { color: rgba(148, 163, 184, .72); }
label, .field-label, .control-label { color: #dbeafe; }

.card, .panel, .modal-content, .client-home-cards .card, .sidebar .card {
  background: linear-gradient(180deg, rgba(16, 23, 47, .96), rgba(11, 16, 36, .96));
  border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius);
  box-shadow: 0 16px 48px rgba(2, 6, 23, .22);
}
.card-header, .panel-heading, .card-footer, .panel-footer { background: rgba(15, 23, 42, .48); border-color: var(--ha-border); color: var(--ha-text); }
.card-title, .panel-title, h1, h2, h3, h4, h5, h6 { color: var(--ha-text); font-weight: 800; letter-spacing: -.02em; }
p, .text-muted, .help-block, .small, small { color: var(--ha-muted) !important; }
.table { color: var(--ha-text); }
.table th, .table td { border-color: var(--ha-border); }
.table thead th { background: rgba(15, 23, 42, .75); color: #dbeafe; border-bottom-color: var(--ha-border); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(148, 163, 184, .04); }
.alert { border-radius: 18px; border-width: 1px; }

/* Hostavvy marketing layout */
.ha-shell { overflow: hidden; }
.ha-section { position: relative; padding: 88px 0; }
.ha-section-sm { padding: 56px 0; }
.ha-section-title { max-width: 780px; margin: 0 auto 42px; text-align: center; }
.ha-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--ha-border-strong); border-radius: 999px; background: rgba(25, 211, 255, .08); color: var(--ha-cyan); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ha-hero { position: relative; padding: 106px 0 84px; background: radial-gradient(circle at 12% 12%, rgba(25, 211, 255, .2), transparent 30%), radial-gradient(circle at 82% 4%, rgba(139, 92, 246, .24), transparent 33%), linear-gradient(180deg, #050816 0%, #0b1024 100%); }
.ha-hero:after { content: ""; position: absolute; inset: auto -10% -2px; height: 120px; background: linear-gradient(180deg, transparent, var(--ha-bg)); pointer-events: none; }
.ha-hero h1 { font-size: clamp(2.45rem, 5.2vw, 4.7rem); line-height: .98; margin: 18px 0 22px; }
.ha-gradient-text { background: linear-gradient(135deg, var(--ha-cyan), var(--ha-blue), var(--ha-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ha-lead { font-size: clamp(1.06rem, 2vw, 1.28rem); line-height: 1.7; max-width: 680px; color: #cbd5e1 !important; }
.ha-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.ha-hero-art { position: relative; z-index: 1; }
.ha-hero-art img { width: 100%; max-width: 620px; border-radius: 34px; box-shadow: var(--ha-shadow), var(--ha-glow); }
.ha-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 42px; }
.ha-stat { padding: 18px; border: 1px solid var(--ha-border); border-radius: 20px; background: rgba(16, 23, 47, .62); }
.ha-stat strong { display: block; color: var(--ha-text); font-size: 1.45rem; }
.ha-stat span { color: var(--ha-muted); font-size: .9rem; }
.ha-grid { display: grid; gap: 24px; }
.ha-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ha-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ha-card, .ha-price-card, .ha-testimonial, .ha-feature-card {
  background: linear-gradient(180deg, rgba(16, 23, 47, .94), rgba(10, 16, 36, .94));
  border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius);
  padding: 28px;
  box-shadow: 0 16px 50px rgba(2, 6, 23, .22);
}
.ha-card:hover, .ha-price-card:hover, .ha-feature-card:hover { transform: translateY(-3px); border-color: var(--ha-border-strong); box-shadow: var(--ha-shadow); }
.ha-icon { width: 54px; height: 54px; display: inline-grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg, rgba(25, 211, 255, .14), rgba(139, 92, 246, .14)); color: var(--ha-cyan); margin-bottom: 18px; }
.ha-price-card { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.ha-price-card.featured { border-color: rgba(25, 211, 255, .55); box-shadow: 0 24px 80px rgba(47, 128, 255, .22); }
.ha-badge { display: inline-flex; width: fit-content; padding: 7px 11px; border-radius: 999px; background: rgba(47, 128, 255, .14); color: var(--ha-cyan); font-size: 12px; font-weight: 800; }
.ha-price { margin: 18px 0; font-size: 3rem; font-weight: 900; letter-spacing: -.05em; color: var(--ha-text); }
.ha-price small { font-size: 1rem; color: var(--ha-muted) !important; font-weight: 700; }
.ha-list { list-style: none; padding: 0; margin: 22px 0; }
.ha-list li { position: relative; padding: 8px 0 8px 28px; color: #cbd5e1; }
.ha-list li:before { content: ""; position: absolute; left: 0; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--ha-cyan), var(--ha-blue)); box-shadow: 0 0 16px rgba(25, 211, 255, .35); }
.ha-cta-band { border: 1px solid var(--ha-border-strong); border-radius: 32px; padding: 44px; background: radial-gradient(circle at 20% 0%, rgba(25, 211, 255, .18), transparent 36%), linear-gradient(135deg, rgba(47, 128, 255, .16), rgba(139, 92, 246, .14)); }
.ha-domain-box { margin-top: -34px; position: relative; z-index: 4; padding: 22px; border: 1px solid var(--ha-border); border-radius: 26px; background: rgba(16, 23, 47, .9); box-shadow: var(--ha-shadow); }

/* Client area redesign */
.tiles .tile { background: linear-gradient(180deg, rgba(16, 23, 47, .96), rgba(11, 16, 36, .96)); border: 1px solid var(--ha-border); border-radius: 22px; margin: 8px; color: var(--ha-text); box-shadow: 0 14px 36px rgba(2,6,23,.18); }
.tiles .tile:hover { transform: translateY(-2px); border-color: var(--ha-border-strong); }
.tiles .tile .stat { color: var(--ha-text); font-weight: 900; }
.tiles .tile .title { color: var(--ha-muted); }
.tiles .tile i { color: var(--ha-cyan); }
.bg-color-blue, .bg-color-green, .bg-color-red, .bg-color-gold { background: linear-gradient(135deg, var(--ha-cyan), var(--ha-purple)) !important; }
.sidebar .panel, .sidebar .card { overflow: hidden; }
.list-group-item { background: rgba(15, 23, 42, .6); border-color: var(--ha-border); }
.list-group-item-action:hover, .list-group-item.active { background: linear-gradient(135deg, rgba(47,128,255,.22), rgba(139,92,246,.16)); border-color: var(--ha-border-strong); color: var(--ha-text); }

/* Cart and order styling */
#order-standard_cart, .order-form, .products, .cart-body { color: var(--ha-text); }
#order-standard_cart .products .product, #order-standard_cart .field-container, #order-standard_cart .view-cart-items, #order-standard_cart .summary-container, #order-standard_cart .order-summary, .domain-checker-container, .domain-pricing, .product-info { background: linear-gradient(180deg, rgba(16,23,47,.95), rgba(11,16,36,.95)) !important; border: 1px solid var(--ha-border) !important; border-radius: 22px !important; color: var(--ha-text) !important; box-shadow: 0 14px 42px rgba(2,6,23,.18); }
#order-standard_cart .product-title, #order-standard_cart h2, #order-standard_cart h3, #order-standard_cart h4 { color: var(--ha-text) !important; }
#order-standard_cart .price, #order-standard_cart .pricing, .domain-price { color: var(--ha-cyan) !important; }
#order-standard_cart .btn-primary { border-radius: 14px; }
#order-standard_cart .order-summary { position: sticky; top: 96px; }

/* SEO/page-manager concepts */
.ha-section-library .ha-card { min-height: 100%; }
.ha-meta-preview { border: 1px solid var(--ha-border); border-radius: 20px; padding: 22px; background: #fff; color: #111827; }
.ha-meta-preview .title { color: #1a0dab; font-size: 20px; }
.ha-meta-preview .url { color: #006621; font-size: 14px; }
.ha-meta-preview .desc { color: #4b5563; }

.footer { background: #030712; color: var(--ha-muted); border-top: 1px solid var(--ha-border); }
.footer .nav-link, .footer .copyright { color: var(--ha-muted); }

@media (max-width: 991.98px) {
  .ha-section { padding: 64px 0; }
  .ha-grid-3, .ha-grid-4, .ha-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-hero { padding: 72px 0 64px; }
  .ha-hero-art { margin-top: 36px; }
  #order-standard_cart .order-summary { position: static; }
}
@media (max-width: 575.98px) {
  .ha-grid-3, .ha-grid-4, .ha-stat-row { grid-template-columns: 1fr; }
  .ha-actions .btn { width: 100%; }
  .ha-cta-band { padding: 28px; }
  .ha-card, .ha-price-card, .ha-testimonial, .ha-feature-card { padding: 22px; }
}

/* Additional WHMCS cart and checkout polish: visual only, no checkout logic overrides. */
#order-standard_cart .categories-collapsed,
#order-standard_cart .categories,
#order-standard_cart .prepend-icon .field,
#order-standard_cart .sub-heading,
#order-standard_cart .domain-selection-options .option,
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .total-due-today,
#order-standard_cart .view-cart-tabs .tab-content {
  background: rgba(16, 23, 47, .88) !important;
  border-color: var(--ha-border) !important;
  color: var(--ha-text) !important;
}
#order-standard_cart .categories a,
#order-standard_cart .categories-collapsed a,
#order-standard_cart .view-cart-tabs .nav-tabs > li > a { color: var(--ha-muted) !important; }
#order-standard_cart .categories a:hover,
#order-standard_cart .categories .active a,
#order-standard_cart .view-cart-tabs .nav-tabs > li.active > a {
  color: var(--ha-cyan) !important;
  background: rgba(25, 211, 255, .08) !important;
  border-color: var(--ha-border-strong) !important;
}
#order-standard_cart .summary-container .clearfix,
#order-standard_cart .order-summary .summary-totals { border-color: var(--ha-border) !important; }
#order-standard_cart .total-due-today .amt,
#order-standard_cart .order-summary .total-due-today span { color: var(--ha-cyan) !important; }
#order-standard_cart .domain-checker-result-headline,
#order-standard_cart .domain-available { color: var(--ha-success) !important; }
#order-standard_cart .domain-unavailable { color: var(--ha-danger) !important; }
#order-standard_cart .promo-code-cart-container { background: rgba(139, 92, 246, .1) !important; border: 1px solid rgba(139, 92, 246, .24) !important; border-radius: 18px; }

/* --------------------------------------------------------------------------
 * Hostavvy v1.1 premium header, navigation, footer, and accessibility layer.
 * These styles support the custom header/footer overrides while preserving
 * WHMCS transactional behavior.
 * -------------------------------------------------------------------------- */
.ha-v11 { --ha-header-height: 86px; }
.ha-skip-link {
  position: fixed;
  left: 18px;
  top: 12px;
  z-index: 9999;
  transform: translateY(-140%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--ha-cyan);
  color: #03111f !important;
  font-weight: 900;
  box-shadow: var(--ha-shadow);
}
.ha-skip-link:focus { transform: translateY(0); outline: 3px solid #fff; }
.ha-v11 :focus-visible {
  outline: 3px solid rgba(25, 211, 255, .72);
  outline-offset: 3px;
  border-radius: 12px;
}
.ha-account-bar {
  position: relative;
  z-index: 1031;
  background: linear-gradient(90deg, rgba(47,128,255,.18), rgba(139,92,246,.16));
  border-bottom: 1px solid var(--ha-border);
  color: var(--ha-text);
  font-size: .92rem;
}
.ha-account-bar-inner { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ha-account-alert, .ha-active-client a, .ha-return-admin, .ha-switch-account {
  color: var(--ha-text) !important;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
}
.ha-account-alert { cursor: pointer; padding: 7px 0; }
.ha-alert-count { min-width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, var(--ha-cyan), var(--ha-purple)); color: #fff; font-size: .78rem; }
.ha-account-label { color: var(--ha-muted); margin-right: 6px; }
.ha-active-client { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ha-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(5, 8, 22, .9);
  border-bottom: 1px solid var(--ha-border);
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 38px rgba(2, 6, 23, .28);
}
.ha-header-inner { min-height: var(--ha-header-height); display: flex; align-items: center; gap: 22px; }
.ha-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ha-brand .logo-img, .ha-footer-logo .logo-img { max-height: 46px; width: auto; }
.ha-nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }
.ha-nav-item { position: relative; }
.ha-mobile-nav { display: none; }
.ha-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 13px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #dbeafe !important;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.ha-nav-link:hover, .ha-nav-link[aria-expanded="true"] { background: rgba(25, 211, 255, .09); color: var(--ha-cyan) !important; }
.ha-mega {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  width: min(850px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
  border: 1px solid var(--ha-border-strong);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(16,23,47,.98), rgba(5,8,22,.98));
  box-shadow: var(--ha-shadow), var(--ha-glow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.ha-support-menu .ha-mega { right: 0; left: auto; width: min(560px, calc(100vw - 32px)); grid-template-columns: 1fr; }
.ha-has-mega:hover > .ha-mega,
.ha-has-mega:focus-within > .ha-mega,
.ha-has-mega.is-open > .ha-mega,
.ha-nav-item:hover > .ha-mega,
.ha-nav-item:focus-within > .ha-mega,
.ha-nav-item.is-open > .ha-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.ha-mega-intro { padding: 4px; }
.ha-mega-intro strong { display: block; margin: 16px 0 10px; color: var(--ha-text); font-size: 1.28rem; line-height: 1.25; }
.ha-mega-intro p { margin: 0; }
.ha-mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ha-mega-compact { gap: 12px; }
.ha-mega-compact .ha-mega-card { margin-bottom: 10px; }
.ha-mega-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 3px;
  padding: 14px;
  border: 1px solid var(--ha-border);
  border-radius: 20px;
  background: rgba(15, 23, 42, .62);
  color: var(--ha-text) !important;
}
.ha-mega-card:hover { transform: translateY(-2px); border-color: var(--ha-border-strong); background: rgba(25, 211, 255, .08); }
.ha-mega-card i { grid-row: span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, rgba(25,211,255,.14), rgba(139,92,246,.16)); color: var(--ha-cyan); }
.ha-mega-card span { font-weight: 900; }
.ha-mega-card small { color: var(--ha-muted); line-height: 1.45; }
.ha-header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ha-header-search { display: flex; align-items: center; min-width: 190px; border: 1px solid var(--ha-border); border-radius: 999px; background: rgba(15,23,42,.7); overflow: hidden; }
.ha-header-search input { width: 150px; min-height: 42px; padding: 0 6px 0 15px; border: 0; background: transparent; color: var(--ha-text); outline: 0; }
.ha-header-search button { width: 42px; height: 42px; border: 0; background: transparent; color: var(--ha-cyan); }
.ha-icon-btn, .ha-account-btn, .ha-login-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ha-border);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(15,23,42,.72);
  color: var(--ha-text) !important;
  font-weight: 850;
}
.ha-icon-btn { width: 46px; padding: 0; position: relative; }
.ha-cart-count { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, var(--ha-cyan), var(--ha-purple)); color: #fff; font-size: .72rem; font-weight: 900; }
.ha-start-btn { white-space: nowrap; }
.ha-mobile-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--ha-border); border-radius: 16px; background: rgba(15,23,42,.74); }
.ha-mobile-toggle span:not(.sr-only) { display: block; width: 20px; height: 2px; margin: 4px auto; border-radius: 999px; background: var(--ha-text); }
.ha-breadcrumb { background: rgba(5, 8, 22, .86); }
.ha-footer { position: relative; background: radial-gradient(circle at 10% 0%, rgba(25,211,255,.16), transparent 32%), #030712; border-top: 1px solid var(--ha-border); color: var(--ha-muted); }
.ha-footer-cta { padding: 70px 0 34px; }
.ha-footer-cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 34px; border: 1px solid var(--ha-border-strong); border-radius: 32px; background: linear-gradient(135deg, rgba(47,128,255,.15), rgba(139,92,246,.12)); box-shadow: 0 24px 70px rgba(2,6,23,.35); }
.ha-footer-cta h2 { margin: 14px 0 10px; font-size: clamp(1.7rem, 3vw, 2.7rem); }
.ha-footer-cta p { max-width: 760px; margin: 0; }
.ha-footer-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ha-footer-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 18px; border: 1px solid var(--ha-border); border-radius: 26px; background: rgba(16,23,47,.72); }
.ha-footer-trust div { display: flex; align-items: center; gap: 10px; color: #cbd5e1; font-weight: 800; }
.ha-footer-trust i { color: var(--ha-cyan); }
.ha-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 30px; padding: 54px 0 38px; }
.ha-footer-brand p { margin: 18px 0; }
.ha-footer-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ha-footer-badges span { padding: 7px 10px; border-radius: 999px; border: 1px solid var(--ha-border); background: rgba(25,211,255,.07); color: #cbd5e1; font-weight: 800; font-size: .78rem; }
.ha-footer-col h3 { margin-bottom: 16px; font-size: .92rem; color: var(--ha-text); text-transform: uppercase; letter-spacing: .08em; }
.ha-footer-col a { display: block; padding: 6px 0; color: var(--ha-muted) !important; }
.ha-footer-col a:hover, .ha-footer-trust a:hover { color: var(--ha-cyan) !important; }
.ha-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0 32px; border-top: 1px solid var(--ha-border); }
.ha-footer-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ha-footer-tools .list-inline-item { margin: 0; }
.ha-locale-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--ha-text) !important; border: 1px solid var(--ha-border); border-radius: 999px; background: rgba(15,23,42,.8); }
@media (max-width: 1199.98px) {
  .ha-header-inner { min-height: 74px; }
  .ha-mobile-toggle { display: inline-block; order: 3; margin-left: auto; }
  .ha-nav { position: absolute; top: 100%; left: 12px; right: 12px; display: none; flex-direction: column; align-items: stretch; padding: 16px; border: 1px solid var(--ha-border); border-radius: 24px; background: rgba(5,8,22,.98); box-shadow: var(--ha-shadow); }
  .ha-nav.is-open { display: flex; }
  .ha-mobile-nav { position: absolute; top: 100%; left: 12px; right: 12px; display: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px; border: 1px solid var(--ha-border); border-radius: 24px; background: rgba(5,8,22,.98); box-shadow: var(--ha-shadow); }
  .ha-mobile-nav.is-open { display: flex; }
  .ha-mobile-nav a { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 12px; border-radius: 14px; color: var(--ha-text) !important; font-weight: 800; }
  .ha-mobile-nav a:hover { background: rgba(25,211,255,.09); color: var(--ha-cyan) !important; }
  .ha-mobile-nav-section { padding: 12px 12px 4px; color: var(--ha-muted); font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .ha-nav-link { width: 100%; justify-content: space-between; border-radius: 16px; }
  .ha-mega { position: static; width: 100%; display: none; grid-template-columns: 1fr; margin-top: 8px; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
  .ha-has-mega.is-open > .ha-mega, .ha-nav-item.is-open > .ha-mega { display: grid; }
  .ha-mega-grid { grid-template-columns: 1fr; }
  .ha-header-search { display: none; }
  .ha-header-actions { margin-left: auto; }
}
@media (max-width: 991.98px) {
  .ha-footer-cta-inner, .ha-footer-grid { grid-template-columns: 1fr; }
  .ha-footer-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-footer-cta-actions, .ha-footer-tools { justify-content: flex-start; }
  .ha-footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 575.98px) {
  .ha-account-bar-inner { align-items: flex-start; flex-direction: column; padding: 8px 0; }
  .ha-header-actions .ha-login-link,
  .ha-header-actions .ha-account-btn span,
  .ha-start-btn,
  .ha-header-actions .hw-btn-ghost.hw-btn-sm,
  .ha-header-actions .hw-btn-primary.hw-btn-sm { display: none; }
  .ha-footer-trust { grid-template-columns: 1fr; }
  .ha-footer-cta-inner { padding: 24px; }
  .ha-footer-cta-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .ha-card:hover, .ha-price-card:hover, .ha-feature-card:hover, .ha-mega-card:hover, .btn-primary:hover, .btn-success:hover, .btn-info:hover { transform: none; }
}

/* --------------------------------------------------------------------------
 * Hostavvy v1.1 homepage conversion sections.
 * -------------------------------------------------------------------------- */
.ha-home-v11 .ha-hero-v11 { overflow: hidden; }
.ha-home-v11 .ha-hero-v11 h1 { max-width: 760px; }
.ha-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.ha-proof-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid var(--ha-border);
  border-radius: 999px;
  background: rgba(15, 23, 42, .68);
  color: #dbeafe;
  font-weight: 850;
  font-size: .88rem;
}
.ha-proof-strip i { color: var(--ha-cyan); }
.ha-dashboard-card {
  position: relative;
  max-width: 520px;
  margin: 40px auto 0;
  padding: 16px;
  border: 1px solid var(--ha-border-strong);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(16, 23, 47, .92), rgba(5, 8, 22, .92));
  box-shadow: var(--ha-shadow), var(--ha-glow);
  text-align: left;
}
.ha-dashboard-card::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: 44px;
  background: radial-gradient(circle at 30% 20%, rgba(25,211,255,.2), transparent 35%), radial-gradient(circle at 80% 80%, rgba(139,92,246,.2), transparent 38%);
  filter: blur(10px);
}
.ha-dashboard-top { display: flex; gap: 8px; padding: 6px 8px 14px; }
.ha-dashboard-top span { width: 11px; height: 11px; border-radius: 999px; background: rgba(148, 163, 184, .4); }
.ha-dashboard-top span:first-child { background: var(--ha-cyan); }
.ha-dashboard-top span:nth-child(2) { background: var(--ha-purple); }
.ha-dashboard-body { padding: 18px; border-radius: 24px; background: rgba(3, 7, 18, .68); }
.ha-dashboard-main { padding: 20px; border: 1px solid var(--ha-border); border-radius: 22px; background: linear-gradient(135deg, rgba(47,128,255,.16), rgba(139,92,246,.12)); }
.ha-dashboard-main strong { display: block; color: var(--ha-text); font-size: 1.35rem; }
.ha-dashboard-main p { margin: 10px 0 16px; }
.ha-dashboard-meter { height: 10px; border-radius: 999px; background: rgba(148, 163, 184, .16); overflow: hidden; }
.ha-dashboard-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ha-cyan), var(--ha-purple)); }
.ha-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ha-dashboard-grid div { display: flex; align-items: center; gap: 10px; min-height: 74px; padding: 14px; border: 1px solid var(--ha-border); border-radius: 18px; background: rgba(15, 23, 42, .72); color: #dbeafe; font-weight: 900; }
.ha-dashboard-grid i { color: var(--ha-cyan); }
.ha-domain-v11 { margin-top: -44px; position: relative; z-index: 3; }
.ha-product-grid .ha-feature-card { min-height: 100%; }
.ha-audience-section { background: radial-gradient(circle at 0 50%, rgba(25,211,255,.1), transparent 30%); }
.ha-audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ha-audience-grid article { min-height: 132px; padding: 20px; border: 1px solid var(--ha-border); border-radius: 24px; background: rgba(16, 23, 47, .72); box-shadow: 0 18px 48px rgba(2,6,23,.2); }
.ha-audience-grid strong { display: block; margin-bottom: 8px; color: var(--ha-text); font-size: 1.03rem; }
.ha-audience-grid span { color: var(--ha-muted); }
.ha-infra-section { background: linear-gradient(180deg, rgba(15,23,42,.34), rgba(5,8,22,.2)); }
.ha-spec-card { position: relative; padding: 28px; border: 1px solid var(--ha-border); border-radius: 28px; background: rgba(16, 23, 47, .74); overflow: hidden; }
.ha-spec-card::after { content: ""; position: absolute; width: 160px; height: 160px; right: -70px; top: -70px; border-radius: 999px; background: radial-gradient(circle, rgba(25,211,255,.18), transparent 65%); }
.ha-spec-card > span { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(25,211,255,.18), rgba(139,92,246,.16)); color: var(--ha-cyan); font-weight: 950; }
.ha-spec-card h3 { color: var(--ha-text); }
.ha-faq-list { max-width: 920px; margin: 0 auto; display: grid; gap: 12px; }
.ha-faq-list details { border: 1px solid var(--ha-border); border-radius: 22px; background: rgba(16, 23, 47, .72); overflow: hidden; }
.ha-faq-list summary { cursor: pointer; padding: 20px 24px; color: var(--ha-text); font-weight: 900; list-style: none; }
.ha-faq-list summary::-webkit-details-marker { display: none; }
.ha-faq-list summary::after { content: "+"; float: right; color: var(--ha-cyan); font-size: 1.25rem; }
.ha-faq-list details[open] summary::after { content: "-"; }
.ha-faq-list p { padding: 0 24px 22px; margin: 0; }
.ha-help-actions a { min-height: 135px; border-radius: 24px !important; border: 1px solid var(--ha-border) !important; background: rgba(16,23,47,.76) !important; color: var(--ha-text) !important; box-shadow: 0 16px 44px rgba(2,6,23,.2); }
.ha-help-actions a:hover { transform: translateY(-3px); border-color: var(--ha-border-strong) !important; }
.ha-final-cta { padding: clamp(34px, 6vw, 70px); border: 1px solid var(--ha-border-strong); border-radius: 36px; background: radial-gradient(circle at 20% 0, rgba(25,211,255,.16), transparent 36%), linear-gradient(135deg, rgba(47,128,255,.13), rgba(139,92,246,.12)); text-align: center; box-shadow: var(--ha-shadow); }
.ha-final-cta h2 { max-width: 780px; margin: 14px auto 12px; font-size: clamp(1.8rem, 4vw, 3.2rem); }
.ha-final-cta p { max-width: 700px; margin: 0 auto 24px; }
@media (max-width: 991.98px) {
  .ha-domain-v11 { margin-top: 24px; }
  .ha-audience-grid { grid-template-columns: 1fr; }
  .ha-dashboard-card { margin-top: 34px; }
}
@media (max-width: 575.98px) {
  .ha-dashboard-body { padding: 12px; }
  .ha-dashboard-grid { grid-template-columns: 1fr; }
  .ha-proof-strip span { width: 100%; }
}

/* --------------------------------------------------------------------------
 * Hostavvy v1.1 product vertical pages.
 * -------------------------------------------------------------------------- */
.ha-product-page .ha-product-hero { padding-bottom: clamp(60px, 8vw, 120px); }
.ha-product-aside { position: relative; overflow: hidden; }
.ha-product-aside::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; bottom: -90px; border-radius: 999px; background: radial-gradient(circle, rgba(25,211,255,.2), transparent 64%); }
.ha-section-soft { background: radial-gradient(circle at 100% 20%, rgba(139,92,246,.12), transparent 36%), linear-gradient(180deg, rgba(15,23,42,.28), rgba(5,8,22,.18)); }
.ha-mini-grid { align-items: stretch; }
.ha-mini-card { min-height: 154px; padding: 22px; border: 1px solid var(--ha-border); border-radius: 24px; background: rgba(16, 23, 47, .72); box-shadow: 0 16px 42px rgba(2,6,23,.18); }
.ha-mini-card strong { display: block; margin-bottom: 8px; color: var(--ha-text); font-size: 1.02rem; }
.ha-mini-card span { display: block; color: var(--ha-muted); }
.ha-compare-table-wrap { overflow-x: auto; border: 1px solid var(--ha-border); border-radius: 28px; background: rgba(16, 23, 47, .72); box-shadow: 0 18px 56px rgba(2,6,23,.22); }
.ha-compare-table { width: 100%; min-width: 620px; margin: 0; border-collapse: collapse; color: var(--ha-muted); }
.ha-compare-table th,
.ha-compare-table td { padding: 20px 24px; border-bottom: 1px solid rgba(148,163,184,.14); vertical-align: top; }
.ha-compare-table tr:last-child td { border-bottom: 0; }
.ha-compare-table th { color: var(--ha-text); background: rgba(15,23,42,.82); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.ha-compare-table td:first-child { width: 32%; color: var(--ha-text); font-weight: 900; }
.ha-product-page .ha-card .ha-icon i.fa-check-circle { color: var(--ha-cyan); }
@media (max-width: 991.98px) {
  .ha-product-page .ha-product-hero { padding-top: 64px; }
  .ha-product-aside { margin-top: 18px; }
}

/* --------------------------------------------------------------------------
 * Hostavvy v1.1 WHMCS store, order, cart, checkout, and domain flow polish.
 * These rules intentionally style inherited WHMCS templates instead of copying
 * brittle transactional files unless a future product requirement demands it.
 * -------------------------------------------------------------------------- */
.store-order-container,
#order-standard_cart,
.domain-checker-container,
.cart-container,
.checkout-container,
.product-selection-sidebar,
.products,
.products .product,
.panel-sidebar,
.domain-pricing,
.product-details,
#frmConfigureProduct,
#frmCheckout,
#frmAddToCart {
  color: var(--ha-body);
}
.store-order-container,
#order-standard_cart .products .product,
#order-standard_cart .view-cart-items,
#order-standard_cart .view-cart-tabs,
#order-standard_cart .sub-heading,
#order-standard_cart .summary-container,
#order-standard_cart .order-summary,
#order-standard_cart .checkout-security-msg,
.domain-checker-container,
.domain-pricing,
.cart-sidebar,
.product-details,
#frmConfigureProduct .panel,
#frmCheckout .panel,
.store-promoted-product {
  border: 1px solid var(--ha-border);
  border-radius: 24px;
  background: rgba(16, 23, 47, .74);
  box-shadow: 0 18px 54px rgba(2, 6, 23, .2);
}
.store-order-container {
  padding: clamp(24px, 4vw, 44px);
  margin-top: 24px;
}
.store-order-container h2,
.store-order-container h3,
.store-order-container h4,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
.domain-checker-container h2,
.domain-pricing h2 {
  color: var(--ha-text);
}
.store-order-container p,
#order-standard_cart p,
#order-standard_cart .product-desc,
#order-standard_cart .description,
.domain-checker-container p,
.domain-pricing p,
.store-promoted-product p {
  color: var(--ha-muted);
}
.payment-term,
#order-standard_cart .prepend-icon,
#order-standard_cart .field,
#order-standard_cart .form-group {
  position: relative;
}
.store-order-container .form-control,
.store-order-container .custom-select,
#order-standard_cart .form-control,
#order-standard_cart .custom-select,
.domain-checker-container .form-control,
#frmCheckout .form-control,
#frmConfigureProduct .form-control {
  min-height: 48px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 16px;
  background: rgba(3, 7, 18, .62);
  color: var(--ha-text);
  box-shadow: none;
}
.store-order-container .form-control:focus,
.store-order-container .custom-select:focus,
#order-standard_cart .form-control:focus,
#order-standard_cart .custom-select:focus,
.domain-checker-container .form-control:focus,
#frmCheckout .form-control:focus,
#frmConfigureProduct .form-control:focus {
  border-color: var(--ha-cyan);
  box-shadow: 0 0 0 .2rem rgba(25, 211, 255, .18);
}
.store-domain-tabs,
#order-standard_cart .nav-tabs {
  gap: 8px;
  border-bottom: 0;
}
.store-domain-tabs .nav-link,
#order-standard_cart .nav-tabs .nav-link {
  border: 1px solid var(--ha-border) !important;
  border-radius: 16px !important;
  background: rgba(15, 23, 42, .72);
  color: #cbd5e1;
  font-weight: 900;
}
.store-domain-tabs .nav-item.active .nav-link,
.store-domain-tabs .nav-link.active,
#order-standard_cart .nav-tabs .nav-link.active,
#order-standard_cart .nav-tabs .nav-item.active .nav-link {
  border-color: var(--ha-border-strong) !important;
  background: linear-gradient(135deg, rgba(47,128,255,.22), rgba(139,92,246,.18));
  color: var(--ha-text);
}
.responsive-tabs-sm-connector,
.responsive-tabs-sm-connector .channel,
.responsive-tabs-sm-connector .bottom-border { display: none !important; }
.store-domain-tab-content,
#order-standard_cart .tab-content,
#order-standard_cart .domain-selection-options,
#order-standard_cart .domain-lookup-result {
  margin-top: 14px;
  padding: 24px;
  border: 1px solid var(--ha-border);
  border-radius: 22px;
  background: rgba(3, 7, 18, .42) !important;
  color: var(--ha-body);
}
.domain-validation.ok,
.domain-validation.available,
#order-standard_cart .domain-available,
#order-standard_cart .text-success {
  color: #34d399 !important;
  font-weight: 900;
}
.domain-validation.invalid,
#order-standard_cart .domain-unavailable,
#order-standard_cart .text-danger {
  color: #fb7185 !important;
  font-weight: 900;
}
#order-standard_cart .products .product {
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#order-standard_cart .products .product:hover {
  transform: translateY(-4px);
  border-color: var(--ha-border-strong);
  box-shadow: 0 24px 70px rgba(2,6,23,.28);
}
#order-standard_cart .products .product header,
#order-standard_cart .products .product .header {
  background: linear-gradient(135deg, rgba(47,128,255,.22), rgba(139,92,246,.16)) !important;
  color: var(--ha-text) !important;
  border-bottom: 1px solid var(--ha-border);
}
#order-standard_cart .products .product .price,
#order-standard_cart .price,
#order-standard_cart .total-due-today,
.store-order-container .payment-term {
  color: var(--ha-text);
  font-weight: 950;
}
#order-standard_cart .btn,
.store-order-container .btn,
.domain-checker-container .btn,
#frmCheckout .btn,
#frmConfigureProduct .btn {
  border-radius: 999px;
  font-weight: 950;
}
#order-standard_cart .btn-primary,
.store-order-container .btn-primary,
.domain-checker-container .btn-primary,
#frmCheckout .btn-primary,
#frmConfigureProduct .btn-primary {
  border: 0;
  background: linear-gradient(135deg, var(--ha-blue), var(--ha-purple));
  box-shadow: 0 14px 36px rgba(47,128,255,.28);
}
#order-standard_cart .btn-primary:hover,
.store-order-container .btn-primary:hover,
.domain-checker-container .btn-primary:hover,
#frmCheckout .btn-primary:hover,
#frmConfigureProduct .btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
#order-standard_cart .btn-default,
.store-order-container .btn-default,
#frmCheckout .btn-default,
#frmConfigureProduct .btn-default {
  border: 1px solid var(--ha-border);
  background: rgba(15, 23, 42, .72);
  color: var(--ha-text);
}
#order-standard_cart table,
.view-cart-items table,
.domain-pricing table {
  color: var(--ha-body);
}
#order-standard_cart table th,
.view-cart-items table th,
.domain-pricing table th {
  border-color: rgba(148,163,184,.16) !important;
  background: rgba(15, 23, 42, .86) !important;
  color: var(--ha-text) !important;
}
#order-standard_cart table td,
.view-cart-items table td,
.domain-pricing table td {
  border-color: rgba(148,163,184,.12) !important;
}
#order-standard_cart .order-summary,
#order-standard_cart .summary-container,
.cart-sidebar {
  position: sticky;
  top: 98px;
  padding: 24px;
}
#order-standard_cart .summary-container .subtotal,
#order-standard_cart .summary-container .total,
#order-standard_cart .order-summary .total,
.cart-sidebar .total-due-today {
  border-top: 1px solid var(--ha-border);
  color: var(--ha-text);
}
#order-standard_cart .promo .form-control,
#order-standard_cart .promotion-code .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.checkout-security-msg,
#order-standard_cart .checkout-security-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #bbf7d0;
  font-weight: 850;
}
.store-promoted-product {
  padding: clamp(22px, 4vw, 44px) !important;
  background: radial-gradient(circle at 0 0, rgba(25,211,255,.14), transparent 34%), rgba(16,23,47,.78);
}
.store-promoted-product h3,
.store-promoted-product h4 { color: var(--ha-text); }
.store-promoted-product .features li { color: var(--ha-body); }
.store-promoted-product img { max-width: 100%; height: auto; border-radius: 18px; }
#order-standard_cart .alert,
.store-order-container .alert,
#frmCheckout .alert {
  border-radius: 18px;
  border-width: 1px;
}
#order-standard_cart .alert-info,
.store-order-container .alert-info {
  border-color: rgba(25,211,255,.22);
  background: rgba(25,211,255,.1);
  color: #cffafe;
}
#order-standard_cart .alert-danger,
.store-order-container .alert-danger {
  border-color: rgba(251,113,133,.32);
  background: rgba(251,113,133,.12);
  color: #fecdd3;
}
@media (max-width: 991.98px) {
  #order-standard_cart .order-summary,
  #order-standard_cart .summary-container,
  .cart-sidebar { position: static; }
  .store-domain-tabs,
  #order-standard_cart .nav-tabs { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .store-order-container,
  .store-domain-tab-content,
  #order-standard_cart .tab-content { padding: 18px; border-radius: 20px; }
  #order-standard_cart .products .product { margin-bottom: 18px; }
}

/* --------------------------------------------------------------------------
 * Hostavvy v1.1 client area, account, support, knowledgebase, invoice, domain,
 * and status page polish. This keeps WHMCS functional templates inherited.
 * -------------------------------------------------------------------------- */
.ha-client-hero .ha-cta-band,
.ha-dashboard-tiles .tile,
.ha-client-panels .card,
.client-home-cards .card,
.clientarea-dashboard .card,
.clientarea-services .card,
.clientarea-domains .card,
#Primary_Sidebar-My_Services_Status_Filter,
.logincontainer,
.register-container,
#registration,
.ticket-reply,
.ticket-replies .reply,
.knowledgebase-cat-list,
.knowledgebase-article,
.announcement-single,
.network-status,
.invoice-container,
.clientarea-container .card,
.clientarea-container .panel,
.main-content .card,
.main-content .panel {
  border: 1px solid var(--ha-border);
  border-radius: 24px;
  background: rgba(16, 23, 47, .74);
  color: var(--ha-body);
  box-shadow: 0 18px 52px rgba(2, 6, 23, .18);
}
.ha-client-hero .ha-cta-band { overflow: hidden; }
.ha-client-hero h1,
.client-home-cards h2,
.client-home-cards h3,
.client-home-cards .card-title,
.clientarea-container h1,
.clientarea-container h2,
.clientarea-container h3,
.logincontainer h1,
.logincontainer h2,
.register-container h1,
#registration h1,
.knowledgebase-article h1,
.announcement-single h1,
.invoice-container h1,
.network-status h1,
.main-content .card-title,
.main-content .panel-title {
  color: var(--ha-text);
}
.ha-client-hero p,
.client-home-cards p,
.clientarea-container p,
.logincontainer p,
.register-container p,
.knowledgebase-article p,
.announcement-single p,
.network-status p,
.invoice-container p,
.main-content .card p,
.main-content .panel p {
  color: var(--ha-muted);
}
.ha-dashboard-tiles.tiles .tile,
.tiles .tile {
  min-height: 138px;
  padding: 22px 18px;
  border: 1px solid var(--ha-border) !important;
  background: linear-gradient(180deg, rgba(16, 23, 47, .9), rgba(7, 12, 30, .9)) !important;
  color: var(--ha-text) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ha-dashboard-tiles.tiles .tile:hover,
.tiles .tile:hover {
  transform: translateY(-4px);
  border-color: var(--ha-border-strong) !important;
  box-shadow: 0 24px 68px rgba(2, 6, 23, .3);
  text-decoration: none;
}
.tiles .tile i { color: var(--ha-cyan) !important; }
.tiles .tile .stat { color: var(--ha-text) !important; font-weight: 950; }
.tiles .tile .title { color: var(--ha-muted) !important; font-weight: 850; }
.ha-client-panels .card,
.client-home-cards .card { margin-bottom: 24px; overflow: hidden; }
.ha-client-panels .card-header,
.client-home-cards .card-header,
.clientarea-container .card-header,
.main-content .card-header,
.main-content .panel-heading {
  border-bottom: 1px solid var(--ha-border);
  background: linear-gradient(135deg, rgba(47,128,255,.18), rgba(139,92,246,.12));
  color: var(--ha-text);
}
.ha-client-panels .card-footer,
.client-home-cards .card-footer,
.clientarea-container .card-footer,
.main-content .card-footer,
.main-content .panel-footer {
  border-top: 1px solid var(--ha-border);
  background: rgba(3, 7, 18, .36);
}
.client-home-cards .list-group-item,
.clientarea-container .list-group-item,
.panel-sidebar .list-group-item,
.list-group-item {
  border-color: rgba(148, 163, 184, .12);
  background: rgba(3, 7, 18, .28);
  color: var(--ha-body);
}
.client-home-cards .list-group-item:hover,
.clientarea-container .list-group-item:hover,
.panel-sidebar .list-group-item:hover,
.list-group-item:hover {
  background: rgba(47, 128, 255, .12);
  color: var(--ha-text);
}
.client-home-cards .list-group-item.active,
.clientarea-container .list-group-item.active,
.panel-sidebar .list-group-item.active,
.list-group-item.active {
  border-color: var(--ha-border-strong);
  background: linear-gradient(135deg, rgba(47,128,255,.32), rgba(139,92,246,.24));
  color: var(--ha-text);
}
.logincontainer,
.register-container,
#registration {
  max-width: 980px;
  margin: 32px auto;
  padding: clamp(24px, 4vw, 42px);
}
.logincontainer .form-control,
.register-container .form-control,
#registration .form-control,
.clientarea-container .form-control,
.main-content .form-control,
.ticket-reply .form-control,
#frmSupportTicket .form-control,
#frmLogin .form-control,
#frmRegister .form-control {
  min-height: 48px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 16px;
  background: rgba(3, 7, 18, .62);
  color: var(--ha-text);
  box-shadow: none;
}
.logincontainer .form-control:focus,
.register-container .form-control:focus,
#registration .form-control:focus,
.clientarea-container .form-control:focus,
.main-content .form-control:focus,
.ticket-reply .form-control:focus,
#frmSupportTicket .form-control:focus,
#frmLogin .form-control:focus,
#frmRegister .form-control:focus {
  border-color: var(--ha-cyan);
  box-shadow: 0 0 0 .2rem rgba(25, 211, 255, .18);
}
.logincontainer .btn,
.register-container .btn,
#registration .btn,
.clientarea-container .btn,
.main-content .btn,
.ticket-reply .btn,
#frmSupportTicket .btn {
  border-radius: 999px;
  font-weight: 950;
}
.logincontainer .btn-primary,
.register-container .btn-primary,
#registration .btn-primary,
.clientarea-container .btn-primary,
.main-content .btn-primary,
.ticket-reply .btn-primary,
#frmSupportTicket .btn-primary {
  border: 0;
  background: linear-gradient(135deg, var(--ha-blue), var(--ha-purple));
  box-shadow: 0 14px 36px rgba(47,128,255,.28);
}
.logincontainer .btn-default,
.register-container .btn-default,
#registration .btn-default,
.clientarea-container .btn-default,
.main-content .btn-default,
.ticket-reply .btn-default,
#frmSupportTicket .btn-default {
  border: 1px solid var(--ha-border);
  background: rgba(15, 23, 42, .72);
  color: var(--ha-text);
}
.table,
.dataTable,
.clientarea-container table,
.invoice-container table,
.main-content table {
  color: var(--ha-body);
}
.table thead th,
.dataTable thead th,
.clientarea-container table thead th,
.invoice-container table thead th,
.main-content table thead th {
  border-color: rgba(148, 163, 184, .16) !important;
  background: rgba(15, 23, 42, .86) !important;
  color: var(--ha-text) !important;
}
.table td,
.table th,
.dataTable td,
.dataTable th,
.clientarea-container table td,
.clientarea-container table th,
.invoice-container table td,
.invoice-container table th,
.main-content table td,
.main-content table th {
  border-color: rgba(148, 163, 184, .12) !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 12px;
  background: rgba(3, 7, 18, .62);
  color: var(--ha-text);
}
.badge,
.label,
.status,
.clientarea-container .badge,
.main-content .badge {
  border-radius: 999px;
  font-weight: 900;
}
.label-success,
.badge-success,
.status-active,
.status-open { background: rgba(34,197,94,.16) !important; color: #bbf7d0 !important; }
.label-warning,
.badge-warning,
.status-pending { background: rgba(245,158,11,.16) !important; color: #fde68a !important; }
.label-danger,
.badge-danger,
.status-suspended,
.status-unpaid { background: rgba(251,113,133,.16) !important; color: #fecdd3 !important; }
.label-info,
.badge-info { background: rgba(25,211,255,.14) !important; color: #cffafe !important; }
.knowledgebase-cat-list,
.kbarticles,
.announcements,
.ticket-replies,
.network-status,
.invoice-container { padding: clamp(22px, 4vw, 38px); }
.kbarticles a,
.knowledgebase-cat-list a,
.announcements a,
.ticket-replies a,
.network-status a,
.invoice-container a { color: var(--ha-cyan); font-weight: 850; }
.ticket-replies .reply,
.ticket-reply { padding: 24px; margin-bottom: 20px; }
.ticket-replies .reply.staff { border-color: rgba(25,211,255,.26); background: rgba(25,211,255,.08); }
.ticket-replies .reply.client { border-color: rgba(139,92,246,.24); background: rgba(139,92,246,.08); }
.invoice-container {
  background: #ffffff;
  color: #0f172a;
}
.invoice-container h1,
.invoice-container h2,
.invoice-container h3,
.invoice-container p,
.invoice-container table { color: #0f172a; }
.invoice-container .table thead th { background: #f8fafc !important; color: #0f172a !important; }
.network-status .status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
@media (max-width: 991.98px) {
  .logincontainer,
  .register-container,
  #registration { margin: 18px auto; }
  .ha-dashboard-tiles.tiles .tile,
  .tiles .tile { min-height: 124px; }
}
@media (max-width: 575.98px) {
  .client-home-cards .card,
  .clientarea-container .card,
  .main-content .card,
  .main-content .panel,
  .logincontainer,
  .register-container,
  #registration { border-radius: 20px; }
  .table-responsive { border: 0; }
}

/* ============================================================
   Hostavvy v3 Extension: hw-* component classes
   Used by client area, auth, support, and order form templates
   ============================================================ */
/*
 * -----------------------------------------------------------------------
 *  HOSTAVVY WHMCS THEME - hostavvy-whmcs.css v2.0
 *  Pure CSS (no build step required) - drop into WHMCS templates/hostavvy/
 *  Design: "Dark Precision" - Sora - DM Sans - Fira Code
 *  Accent: Electric Indigo #4F46E5 | Amber #F59E0B | Game Green #10B981
 * -----------------------------------------------------------------------
 */

/* -- 1. CSS Custom Properties ------------------------------------------ */

/* ================================================================
   hw-* Component System (consolidated from v3 + v3-extensions)
   ================================================================ */

:root {
  /* Hostavvy brand tokens */
  --hw-indigo:        #4F46E5;
  --hw-indigo-light:  rgba(79,70,229,0.12);
  --hw-indigo-glow:   rgba(79,70,229,0.35);
  --hw-violet:        #7C3AED;
  --hw-violet-light:  rgba(124,58,237,0.12);
  --hw-cyan:          #06B6D4;
  --hw-green:         #10B981;
  --hw-amber:         #F59E0B;
  --hw-red:           #EF4444;
  --hw-game-green:    #00FF88;
  --hw-game-blue:     #00D4FF;

  /* Dark palette */
  --hw-base:          #0A0A0F;
  --hw-surface:       #12121A;
  --hw-surface-2:     #1A1A28;
  --hw-surface-3:     #22223A;
  --hw-border:        rgba(255,255,255,0.08);
  --hw-border-bright: rgba(255,255,255,0.14);

  /* Text */
  --hw-text-primary:  #F0F0FF;
  --hw-text-secondary:#A0A0C0;
  --hw-text-muted:    #606080;

  /* Radius */
  --hw-radius-sm:     6px;
  --hw-radius:        10px;
  --hw-radius-lg:     16px;
  --hw-radius-xl:     24px;

  /* Easing */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Tailwind/shadcn tokens */
  --radius: 0.625rem;
  --background: oklch(0.07 0.01 280);
  --foreground: oklch(0.94 0.005 280);
  --card: oklch(0.1 0.01 280);
  --card-foreground: oklch(0.94 0.005 280);
  --popover: oklch(0.1 0.01 280);
  --popover-foreground: oklch(0.94 0.005 280);
  --primary: oklch(0.55 0.22 264);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.15 0.01 280);
  --secondary-foreground: oklch(0.85 0.005 280);
  --muted: oklch(0.15 0.01 280);
  --muted-foreground: oklch(0.6 0.01 280);
  --accent: oklch(0.18 0.02 280);
  --accent-foreground: oklch(0.94 0.005 280);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 8%);
  --input: oklch(1 0 0 / 10%);
  --ring: oklch(0.55 0.22 264);
  --sidebar: oklch(0.1 0.01 280);
  --sidebar-foreground: oklch(0.94 0.005 280);
  --sidebar-primary: oklch(0.55 0.22 264);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent: oklch(0.15 0.01 280);
  --sidebar-accent-foreground: oklch(0.94 0.005 280);
  --sidebar-border: oklch(1 0 0 / 8%);
  --sidebar-ring: oklch(0.55 0.22 264);
}

/* --- Base Reset ------------------------------------------------------ */
@layer base {
  * { @apply border-border outline-ring/50; }
  html { scroll-behavior: smooth; }
  body {
    @apply bg-background text-foreground;
    font-family: 'DM Sans', system-ui, sans-serif;
    background: var(--hw-base);
    color: var(--hw-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4, h5 {
    font-family: 'Sora', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  code, pre, .mono {
    font-family: 'Fira Code', 'Cascadia Code', monospace;
  }
  button:not(:disabled), [role="button"]:not([aria-disabled="true"]),
  a[href], select:not(:disabled) { @apply cursor-pointer; }
}

/* --- Container ------------------------------------------------------- */
@layer components {
  .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  @media (min-width: 640px)  { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }
  @media (min-width: 1024px) { .container { padding-left: 2rem; padding-right: 2rem; max-width: 1320px; } }
  .flex { min-height: 0; min-width: 0; }
}

/* -----------------------------------------------------------------------
   NAVIGATION
   ----------------------------------------------------------------------- */
.hw-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 68px;
  display: flex;
  align-items: center;
  transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.hw-nav.scrolled {
  background: rgba(10,10,15,0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: var(--hw-border);
  box-shadow: 0 4px 32px rgba(0,0,0,0.4);
}
.hw-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}
.hw-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Sora', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--hw-text-primary);
  text-decoration: none;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.hw-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.hw-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0; padding: 0;
}
.hw-nav-link {
  display: block;
  padding: 0.4rem 0.875rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hw-text-secondary);
  text-decoration: none;
  border-radius: var(--hw-radius-sm);
  transition: color 0.18s, background 0.18s;
  position: relative;
}
.hw-nav-link:hover, .hw-nav-link.active {
  color: var(--hw-text-primary);
  background: var(--hw-indigo-light);
}
.hw-nav-dropdown {
  position: relative;
}
.hw-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border-bright);
  border-radius: var(--hw-radius-lg);
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.hw-nav-dropdown:hover .hw-nav-dropdown-menu,
.hw-nav-dropdown:focus-within .hw-nav-dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.hw-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--hw-radius-sm);
  text-decoration: none;
  color: var(--hw-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.hw-nav-dropdown-item:hover { background: var(--hw-indigo-light); color: var(--hw-text-primary); }
.hw-nav-dropdown-item-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--hw-indigo-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--hw-indigo);
  flex-shrink: 0;
}
.hw-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   BUTTONS
   ----------------------------------------------------------------------- */
.hw-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--hw-radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.18s var(--ease-out);
  white-space: nowrap;
  line-height: 1.3;
}
.hw-btn:active { transform: scale(0.97); }
.hw-btn-primary {
  background: var(--hw-indigo);
  color: #fff;
  box-shadow: 0 0 0 0 var(--hw-indigo-glow);
}
.hw-btn-primary:hover {
  background: #5B52F0;
  box-shadow: 0 0 24px var(--hw-indigo-glow);
  transform: translateY(-1px);
}
.hw-btn-secondary {
  background: var(--hw-surface-3);
  color: var(--hw-text-primary);
  border: 1px solid var(--hw-border-bright);
}
.hw-btn-secondary:hover {
  background: var(--hw-surface-2);
  border-color: var(--hw-indigo);
  color: #fff;
}
.hw-btn-ghost {
  background: transparent;
  color: var(--hw-text-secondary);
  border: 1px solid transparent;
}
.hw-btn-ghost:hover {
  background: var(--hw-indigo-light);
  color: var(--hw-text-primary);
  border-color: var(--hw-border);
}
.hw-btn-game {
  background: linear-gradient(135deg, #00FF88 0%, #00D4FF 100%);
  color: #000;
  font-weight: 700;
}
.hw-btn-game:hover {
  box-shadow: 0 0 32px rgba(0,255,136,0.4);
  transform: translateY(-1px);
}
.hw-btn-enterprise {
  background: linear-gradient(135deg, var(--hw-amber) 0%, #F97316 100%);
  color: #000;
  font-weight: 700;
}
.hw-btn-enterprise:hover {
  box-shadow: 0 0 32px rgba(245,158,11,0.4);
  transform: translateY(-1px);
}
.hw-btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; border-radius: var(--hw-radius-lg); }
.hw-btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; border-radius: var(--hw-radius-sm); }
.hw-btn-xl { padding: 1rem 2.25rem; font-size: 1.0625rem; border-radius: var(--hw-radius-lg); }

/* -----------------------------------------------------------------------
   HERO SECTIONS
   ----------------------------------------------------------------------- */
.hw-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 68px;
}
.hw-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hw-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,10,15,0.85) 0%, rgba(10,10,15,0.5) 50%, rgba(10,10,15,0.75) 100%);
}
.hw-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 5rem;
}
@media (max-width: 900px) {
  .hw-hero-content { grid-template-columns: 1fr; gap: 2.5rem; }
}
.hw-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--hw-indigo-light);
  border: 1px solid rgba(79,70,229,0.3);
  color: #A5B4FC;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}
.hw-hero-headline {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--hw-text-primary);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  letter-spacing: -0.03em;
}
.hw-hero-headline em {
  font-style: normal;
  background: linear-gradient(135deg, var(--hw-indigo) 0%, var(--hw-violet) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hw-hero-headline .game-accent {
  background: linear-gradient(135deg, var(--hw-game-green) 0%, var(--hw-game-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hw-hero-headline .enterprise-accent {
  background: linear-gradient(135deg, var(--hw-amber) 0%, #F97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hw-hero-sub {
  font-size: 1.125rem;
  color: var(--hw-text-secondary);
  line-height: 1.7;
  margin-bottom: 2.25rem;
  max-width: 520px;
}
.hw-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
}
.hw-hero-visual {
  position: relative;
}
.hw-hero-visual img {
  width: 100%;
  border-radius: var(--hw-radius-xl);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px var(--hw-border);
}
.hw-hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hw-border);
}
.hw-hero-stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--hw-text-primary);
  display: block;
}
.hw-hero-stat-label {
  font-size: 0.8rem;
  color: var(--hw-text-muted);
  display: block;
  margin-top: 0.125rem;
}

/* Page hero (non-full-height) */
.hw-page-hero {
  position: relative;
  padding: 7rem 0 5rem;
  overflow: hidden;
}
.hw-page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hw-page-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,15,0.7) 0%, rgba(10,10,15,0.95) 100%);
}
.hw-page-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

/* -----------------------------------------------------------------------
   TRUST BAND
   ----------------------------------------------------------------------- */
.hw-trust-band {
  background: var(--hw-surface);
  border-top: 1px solid var(--hw-border);
  border-bottom: 1px solid var(--hw-border);
  padding: 1.25rem 0;
  overflow: hidden;
}
.hw-trust-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.hw-trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  flex: 1;
  min-width: 80px;
}
.hw-trust-stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--hw-text-primary);
  letter-spacing: -0.02em;
}
.hw-trust-stat-label {
  font-size: 0.75rem;
  color: var(--hw-text-muted);
  font-weight: 500;
  text-align: center;
}
.hw-trust-divider {
  width: 1px;
  height: 36px;
  background: var(--hw-border);
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   SECTIONS
   ----------------------------------------------------------------------- */
.hw-section {
  padding: 5rem 0;
}
.hw-section-alt {
  background: var(--hw-surface);
}
.hw-section-dark {
  background: var(--hw-base);
}
.hw-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hw-indigo);
  margin-bottom: 1rem;
}
.hw-section-label::before {
  content: '';
  width: 16px;
  height: 2px;
  background: var(--hw-indigo);
  border-radius: 2px;
}
.hw-section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: var(--hw-text-primary);
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.hw-section-desc {
  font-size: 1.0625rem;
  color: var(--hw-text-secondary);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 3rem;
}

/* -----------------------------------------------------------------------
   FEATURE CARDS
   ----------------------------------------------------------------------- */
.hw-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.hw-feature-card {
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-lg);
  padding: 1.75rem;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s var(--ease-out);
}
.hw-feature-card:hover {
  border-color: var(--hw-indigo);
  box-shadow: 0 0 32px var(--hw-indigo-glow);
  transform: translateY(-2px);
}
.hw-feature-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--hw-indigo-light);
  border: 1px solid rgba(79,70,229,0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--hw-indigo);
  margin-bottom: 1.125rem;
}
.hw-feature-icon-wrap.game {
  background: rgba(0,255,136,0.1);
  border-color: rgba(0,255,136,0.25);
  color: var(--hw-game-green);
}
.hw-feature-icon-wrap.enterprise {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.25);
  color: var(--hw-amber);
}
.hw-feature-title {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--hw-text-primary);
  margin-bottom: 0.5rem;
}
.hw-feature-desc {
  font-size: 0.875rem;
  color: var(--hw-text-secondary);
  line-height: 1.65;
}

/* -----------------------------------------------------------------------
   PLAN CARDS
   ----------------------------------------------------------------------- */
.hw-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  align-items: start;
}
.hw-plan-card {
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-xl);
  padding: 2rem;
  position: relative;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s var(--ease-out);
}
.hw-plan-card:hover {
  border-color: var(--hw-border-bright);
  transform: translateY(-2px);
}
.hw-plan-card.featured {
  border-color: var(--hw-indigo);
  background: linear-gradient(160deg, rgba(79,70,229,0.12) 0%, var(--hw-surface-2) 60%);
  box-shadow: 0 0 60px var(--hw-indigo-glow), 0 0 0 1px var(--hw-indigo);
}
.hw-plan-card.game-featured {
  border-color: var(--hw-game-green);
  background: linear-gradient(160deg, rgba(0,255,136,0.08) 0%, var(--hw-surface-2) 60%);
  box-shadow: 0 0 60px rgba(0,255,136,0.2);
}
.hw-plan-badge {
  display: inline-block;
  background: var(--hw-indigo);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}
.hw-plan-badge.game { background: var(--hw-game-green); color: #000; }
.hw-plan-badge.enterprise { background: var(--hw-amber); color: #000; }
.hw-plan-name {
  font-family: 'Sora', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--hw-text-primary);
  margin-bottom: 0.25rem;
}
.hw-plan-tagline {
  font-size: 0.875rem;
  color: var(--hw-text-muted);
  margin-bottom: 1.5rem;
}
.hw-plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
  margin-bottom: 1.75rem;
}
.hw-plan-price-currency {
  font-family: 'Sora', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hw-text-secondary);
  align-self: flex-start;
  margin-top: 0.375rem;
}
.hw-plan-price-amount {
  font-family: 'Sora', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: var(--hw-text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
}
.hw-plan-price-period {
  font-size: 0.875rem;
  color: var(--hw-text-muted);
  margin-left: 0.25rem;
}
.hw-plan-features {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.hw-plan-feature {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--hw-text-secondary);
}
.hw-plan-feature-icon { color: var(--hw-green); flex-shrink: 0; }
.hw-plan-feature-icon.na { color: var(--hw-text-muted); }
.hw-plan-divider {
  height: 1px;
  background: var(--hw-border);
  margin: 1.25rem 0;
}

/* -----------------------------------------------------------------------
   DOMAIN SEARCH
   ----------------------------------------------------------------------- */
.hw-domain-section {
  padding: 5rem 0;
  background: var(--hw-surface);
  border-top: 1px solid var(--hw-border);
  border-bottom: 1px solid var(--hw-border);
}
.hw-domain-search-bar {
  display: flex;
  gap: 0;
  max-width: 620px;
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border-bright);
  border-radius: var(--hw-radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hw-domain-search-bar:focus-within {
  border-color: var(--hw-indigo);
  box-shadow: 0 0 0 3px var(--hw-indigo-light);
}
.hw-domain-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.875rem 1.25rem;
  font-size: 1rem;
  color: var(--hw-text-primary);
  font-family: 'DM Sans', sans-serif;
}
.hw-domain-search-input::placeholder { color: var(--hw-text-muted); }
.hw-domain-search-btn {
  background: var(--hw-indigo);
  color: #fff;
  border: none;
  padding: 0.875rem 1.5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.hw-domain-search-btn:hover { background: #5B52F0; }
.hw-domain-tlds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.hw-domain-tld {
  background: var(--hw-surface-3);
  border: 1px solid var(--hw-border);
  color: var(--hw-text-secondary);
  font-family: 'Fira Code', monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hw-domain-tld:hover {
  border-color: var(--hw-indigo);
  color: var(--hw-text-primary);
  background: var(--hw-indigo-light);
}

/* -----------------------------------------------------------------------
   TESTIMONIALS
   ----------------------------------------------------------------------- */
.hw-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.hw-testimonial-card {
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-lg);
  padding: 1.75rem;
  transition: border-color 0.22s;
}
.hw-testimonial-card:hover { border-color: var(--hw-border-bright); }
.hw-testimonial-stars {
  display: flex;
  gap: 0.25rem;
  color: var(--hw-amber);
  margin-bottom: 1rem;
}
.hw-testimonial-quote {
  font-size: 0.9375rem;
  color: var(--hw-text-secondary);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  font-style: italic;
}
.hw-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hw-testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--hw-indigo-light);
  border: 1px solid rgba(79,70,229,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hw-indigo);
  flex-shrink: 0;
}
.hw-testimonial-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--hw-text-primary);
}
.hw-testimonial-role {
  font-size: 0.75rem;
  color: var(--hw-text-muted);
}

/* -----------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------- */
.hw-footer {
  background: var(--hw-surface);
  border-top: 1px solid var(--hw-border);
  padding: 4rem 0 2rem;
}
.hw-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 1024px) {
  .hw-footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
  .hw-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.hw-footer-brand { grid-column: span 1; }
.hw-footer-tagline {
  font-size: 0.875rem;
  color: var(--hw-text-muted);
  line-height: 1.65;
  margin-top: 0.875rem;
  max-width: 260px;
}
.hw-footer-col-title {
  font-family: 'Sora', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--hw-text-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.hw-footer-links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.hw-footer-links a {
  font-size: 0.875rem;
  color: var(--hw-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.hw-footer-links a:hover { color: var(--hw-text-primary); }
.hw-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--hw-border);
  font-size: 0.8125rem;
  color: var(--hw-text-muted);
  flex-wrap: wrap;
  gap: 1rem;
}
.hw-footer-bottom a { color: var(--hw-text-muted); text-decoration: none; }
.hw-footer-bottom a:hover { color: var(--hw-text-secondary); }
.hw-uptime-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--hw-green);
  font-weight: 500;
}
.hw-uptime-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hw-green);
  box-shadow: 0 0 8px var(--hw-green);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* -----------------------------------------------------------------------
   CLIENT AREA / DASHBOARD
   ----------------------------------------------------------------------- */
.hw-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--hw-surface);
  border-right: 1px solid var(--hw-border);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
  min-height: 100vh;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.hw-sidebar-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hw-text-muted);
  padding: 0.875rem 1.25rem 0.375rem;
}
.hw-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hw-text-secondary);
  text-decoration: none;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
  border-left: 2px solid transparent;
}
.hw-sidebar-link:hover { background: var(--hw-indigo-light); color: var(--hw-text-primary); }
.hw-sidebar-link.active {
  background: var(--hw-indigo-light);
  color: var(--hw-indigo);
  border-left-color: var(--hw-indigo);
  font-weight: 600;
}

/* --- Account Cards --------------------------------------------------- */
.hw-account-card {
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-lg);
  padding: 1.5rem;
  transition: border-color 0.2s;
}
.hw-account-stat { display: flex; flex-direction: column; }
.hw-account-stat-label { font-size: 0.8125rem; color: var(--hw-text-muted); }
.hw-account-stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--hw-text-primary);
  letter-spacing: -0.03em;
}

/* --- Tables ---------------------------------------------------------- */
.hw-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-lg);
}
.hw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.hw-table th {
  background: var(--hw-surface-3);
  color: var(--hw-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--hw-border);
  white-space: nowrap;
}
.hw-table td {
  padding: 0.875rem 1.25rem;
  color: var(--hw-text-secondary);
  border-bottom: 1px solid var(--hw-border);
  vertical-align: middle;
}
.hw-table tr:last-child td { border-bottom: none; }
.hw-table tr:hover td { background: rgba(255,255,255,0.02); }

/* --- Status Badges --------------------------------------------------- */
.hw-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  white-space: nowrap;
}
.hw-status-badge.active { background: rgba(16,185,129,0.12); color: var(--hw-green); }
.hw-status-badge.pending { background: rgba(245,158,11,0.12); color: var(--hw-amber); }
.hw-status-badge.suspended { background: rgba(239,68,68,0.12); color: var(--hw-red); }
.hw-status-badge.terminated { background: rgba(100,100,120,0.12); color: var(--hw-text-muted); }
.hw-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --- Alerts ---------------------------------------------------------- */
.hw-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-radius: var(--hw-radius);
  font-size: 0.875rem;
  line-height: 1.6;
}
.hw-alert.warning {
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.25);
  color: #FCD34D;
}
.hw-alert.success {
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.25);
  color: #6EE7B7;
}
.hw-alert.error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  color: #FCA5A5;
}
.hw-alert.info {
  background: var(--hw-indigo-light);
  border: 1px solid rgba(79,70,229,0.25);
  color: #A5B4FC;
}

/* --- Breadcrumb ------------------------------------------------------ */
.hw-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--hw-text-muted);
  margin-bottom: 1.5rem;
}
.hw-breadcrumb a { color: var(--hw-text-muted); text-decoration: none; }
.hw-breadcrumb a:hover { color: var(--hw-text-secondary); }
.hw-breadcrumb-sep { color: var(--hw-text-muted); display: flex; align-items: center; }
.hw-breadcrumb-current { color: var(--hw-text-secondary); font-weight: 500; }

/* --- Pagination ------------------------------------------------------ */
.hw-pagination {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}
.hw-page-btn {
  width: 32px; height: 32px;
  border-radius: var(--hw-radius-sm);
  background: var(--hw-surface-3);
  border: 1px solid var(--hw-border);
  color: var(--hw-text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.hw-page-btn:hover { border-color: var(--hw-indigo); color: var(--hw-text-primary); }
.hw-page-btn.active { background: var(--hw-indigo); border-color: var(--hw-indigo); color: #fff; }

/* --- Tags ------------------------------------------------------------ */
.hw-tag {
  display: inline-block;
  background: var(--hw-indigo-light);
  border: 1px solid rgba(79,70,229,0.25);
  color: #A5B4FC;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
}
.hw-tag.game {
  background: rgba(0,255,136,0.1);
  border-color: rgba(0,255,136,0.25);
  color: var(--hw-game-green);
}
.hw-tag.enterprise {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.25);
  color: var(--hw-amber);
}

/* -----------------------------------------------------------------------
   FORMS
   ----------------------------------------------------------------------- */
.hw-form-group { margin-bottom: 1.25rem; }
.hw-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hw-text-secondary);
  margin-bottom: 0.5rem;
}
.hw-input {
  width: 100%;
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border-bright);
  border-radius: var(--hw-radius);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--hw-text-primary);
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.hw-input:focus {
  border-color: var(--hw-indigo);
  box-shadow: 0 0 0 3px var(--hw-indigo-light);
}
.hw-input::placeholder { color: var(--hw-text-muted); }
.hw-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23606080' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
}

/* -----------------------------------------------------------------------
   SCROLL ANIMATIONS
   ----------------------------------------------------------------------- */
.hw-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.hw-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .hw-fade-up { opacity: 1; transform: none; transition: none; }
}

/* -----------------------------------------------------------------------
   GLOW DIVIDERS & DECORATIVE
   ----------------------------------------------------------------------- */
.hw-glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hw-indigo), transparent);
  margin: 0;
}
.hw-glow-line.game {
  background: linear-gradient(90deg, transparent, var(--hw-game-green), transparent);
}
.hw-gradient-text {
  background: linear-gradient(135deg, var(--hw-indigo) 0%, var(--hw-violet) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hw-gradient-text-game {
  background: linear-gradient(135deg, var(--hw-game-green) 0%, var(--hw-game-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -----------------------------------------------------------------------
   BILLING TOGGLE
   ----------------------------------------------------------------------- */
.hw-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border);
  border-radius: 100px;
  padding: 0.25rem;
}
.hw-billing-btn {
  padding: 0.4rem 1.125rem;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--hw-text-muted);
  transition: all 0.18s var(--ease-out);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hw-billing-btn.active {
  background: var(--hw-indigo);
  color: #fff;
  box-shadow: 0 2px 8px var(--hw-indigo-glow);
}
.hw-save-badge {
  background: var(--hw-green);
  color: #000;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 100px;
  letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------
   AI BUILDER SPECIFIC
   ----------------------------------------------------------------------- */
.hw-ai-chat-bubble {
  background: var(--hw-surface-3);
  border: 1px solid var(--hw-border);
  border-radius: 16px 16px 16px 4px;
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
  color: var(--hw-text-secondary);
  max-width: 340px;
  line-height: 1.6;
}
.hw-ai-chat-bubble.user {
  background: var(--hw-indigo-light);
  border-color: rgba(79,70,229,0.25);
  border-radius: 16px 16px 4px 16px;
  color: #C7D2FE;
  align-self: flex-end;
}
.hw-ai-prompt-bar {
  display: flex;
  gap: 0;
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border-bright);
  border-radius: var(--hw-radius-lg);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hw-ai-prompt-bar:focus-within {
  border-color: var(--hw-indigo);
  box-shadow: 0 0 0 3px var(--hw-indigo-light);
}
.hw-ai-prompt-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--hw-text-primary);
  font-family: 'DM Sans', sans-serif;
}
.hw-ai-prompt-input::placeholder { color: var(--hw-text-muted); }

/* -----------------------------------------------------------------------
   GAME SERVER SPECIFIC
   ----------------------------------------------------------------------- */
.hw-game-card {
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-xl);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s var(--ease-out);
}
.hw-game-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--hw-game-green), var(--hw-game-blue));
  opacity: 0;
  transition: opacity 0.22s;
}
.hw-game-card:hover {
  border-color: var(--hw-game-green);
  box-shadow: 0 0 40px rgba(0,255,136,0.15);
  transform: translateY(-2px);
}
.hw-game-card:hover::before { opacity: 1; }
.hw-ping-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.8125rem;
  font-weight: 500;
}
.hw-ping-indicator.good { color: var(--hw-game-green); }
.hw-ping-indicator.ok { color: var(--hw-amber); }
.hw-ping-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

/* -----------------------------------------------------------------------
   ENTERPRISE SPECIFIC
   ----------------------------------------------------------------------- */
.hw-enterprise-card {
  background: linear-gradient(160deg, rgba(245,158,11,0.06) 0%, var(--hw-surface-2) 60%);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: var(--hw-radius-xl);
  padding: 2rem;
  transition: border-color 0.22s, box-shadow 0.22s;
}
.hw-enterprise-card:hover {
  border-color: var(--hw-amber);
  box-shadow: 0 0 40px rgba(245,158,11,0.15);
}

/* -----------------------------------------------------------------------
   CART / ORDER FLOW
   ----------------------------------------------------------------------- */
.hw-cart-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hw-text-muted);
}
.hw-cart-step.active { color: var(--hw-indigo); }
.hw-cart-step.done { color: var(--hw-green); }
.hw-cart-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--hw-surface-3);
  border: 1px solid var(--hw-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.hw-cart-step.active .hw-cart-step-num {
  background: var(--hw-indigo);
  border-color: var(--hw-indigo);
  color: #fff;
}
.hw-cart-step.done .hw-cart-step-num {
  background: var(--hw-green);
  border-color: var(--hw-green);
  color: #000;
}
.hw-cart-step-connector {
  flex: 1;
  height: 1px;
  background: var(--hw-border);
  max-width: 60px;
}

/* -----------------------------------------------------------------------
   MOBILE RESPONSIVE
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hw-nav-links { display: none; }
  .hw-hero-content { grid-template-columns: 1fr; }
  .hw-hero-visual { display: none; }
  .hw-footer-grid { grid-template-columns: 1fr 1fr; }
  .hw-plans-grid { grid-template-columns: 1fr; }
  .hw-features-grid { grid-template-columns: 1fr; }
  .hw-trust-band-inner { justify-content: center; gap: 1.5rem; }
  .hw-trust-divider { display: none; }
  .hw-sidebar { display: none; }
}


/* =============================================================
   HOSTAVVY v3 PREMIUM EXTENSION -- appended 2026
   All missing components: announcement bar, stats band, trust
   strip, feature tabs, comparison table, order steps, quick
   actions, checkout trust, carousel, scroll reveal, footer CTA,
   social buttons, cookie bar, back-to-top, spec table, award
   badges, flash bar, section header.
   ============================================================= */

/* --- ANNOUNCEMENT BAR ---------------------------------------- */
.hw-announce-bar {
  background: linear-gradient(90deg, rgba(79,70,229,0.92) 0%, rgba(139,92,246,0.92) 100%);
  backdrop-filter: blur(8px);
  padding: 10px 24px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.hw-announce-bar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hw-announce-bar a:hover { color: #E0E7FF; }
.hw-announce-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: 4px;
  transition: color 0.2s ease;
}
.hw-announce-close:hover { color: #fff; }

/* --- STATS BAND ---------------------------------------------- */
.hw-stats-band {
  background: rgba(8,13,31,0.8);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 40px 0;
  position: relative;
  overflow: hidden;
}
.hw-stats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(79,70,229,0.05), transparent);
  pointer-events: none;
}
.hw-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.hw-stat-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 20px 24px; position: relative;
}
.hw-stat-item + .hw-stat-item::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: rgba(255,255,255,0.08);
}
.hw-stat-number {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #F1F5F9, #818CF8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hw-stat-label { font-size: 0.875rem; color: #64748B; margin-top: 6px; font-weight: 500; }

/* --- TRUST STRIP --------------------------------------------- */
.hw-trust-strip {
  padding: 40px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hw-trust-strip-label {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #334155;
  margin-bottom: 28px;
}
.hw-trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.hw-trust-logo {
  opacity: 0.35;
  filter: grayscale(1) brightness(2);
  transition: opacity 0.3s ease, filter 0.3s ease;
  height: 28px; width: auto; object-fit: contain;
}
.hw-trust-logo:hover { opacity: 0.7; filter: grayscale(0.3) brightness(1.5); }

/* --- AWARD BADGES -------------------------------------------- */
.hw-award-badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hw-award-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}
.hw-award-badge:hover { border-color: rgba(255,255,255,0.15); }
.hw-award-badge-icon {
  width: 32px; height: 32px; border-radius: 6px;
  background: rgba(245,158,11,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.hw-award-badge-text { font-size: 0.8125rem; font-weight: 700; color: #F1F5F9; line-height: 1.2; }
.hw-award-badge-sub { font-size: 0.6875rem; color: #64748B; font-weight: 500; }

/* --- FEATURE TABS -------------------------------------------- */
.hw-feature-tabs {
  display: flex; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 40px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.hw-feature-tabs::-webkit-scrollbar { display: none; }
.hw-feature-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.9375rem; font-weight: 600;
  color: #64748B;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
  margin-bottom: -1px;
}
.hw-feature-tab:hover { color: #CBD5E1; }
.hw-feature-tab.active { color: #F1F5F9; border-bottom-color: #4F46E5; }
.hw-tab-panel { display: none; }
.hw-tab-panel.active { display: block; }

/* --- COMPARISON TABLE ---------------------------------------- */
.hw-compare-table {
  width: 100%; border-collapse: collapse;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.hw-compare-table th {
  padding: 20px 24px;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.875rem; font-weight: 700;
  color: #64748B; text-align: left;
  background: rgba(8,13,31,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.hw-compare-table td {
  padding: 16px 24px; font-size: 0.9375rem;
  color: #CBD5E1;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: middle;
}
.hw-compare-table tr:last-child td { border-bottom: none; }
.hw-compare-table tr:hover td { background: rgba(255,255,255,0.02); }
.hw-compare-table td:first-child { font-weight: 600; color: #F1F5F9; }
.hw-compare-table .check { color: #10B981; font-size: 1.125rem; }
.hw-compare-table .cross { color: #334155; font-size: 1.125rem; }
.hw-compare-table .highlight-col {
  background: rgba(79,70,229,0.05);
  border-left: 1px solid rgba(79,70,229,0.35);
  border-right: 1px solid rgba(79,70,229,0.35);
}

/* --- SECTION HEADER ------------------------------------------ */
.hw-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 4rem;
}
.hw-section-header p { margin-top: 1rem; font-size: 1.125rem; color: #64748B; }

/* --- ORDER STEPS --------------------------------------------- */
.hw-order-steps {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 40px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.hw-order-steps::-webkit-scrollbar { display: none; }
.hw-order-step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hw-order-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.875rem; font-weight: 700; color: #64748B;
  transition: all 0.3s ease;
}
.hw-order-step.active .hw-order-step-num {
  background: #4F46E5; border-color: #4F46E5; color: #fff;
  box-shadow: 0 0 16px rgba(79,70,229,0.4);
}
.hw-order-step.done .hw-order-step-num { background: #10B981; border-color: #10B981; color: #fff; }
.hw-order-step-label {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.875rem; font-weight: 600; color: #64748B; white-space: nowrap;
}
.hw-order-step.active .hw-order-step-label { color: #F1F5F9; }
.hw-order-step-connector {
  flex: 1; min-width: 40px; height: 1px;
  background: rgba(255,255,255,0.08); margin: 0 8px;
}

/* --- QUICK ACTIONS ------------------------------------------- */
.hw-quick-actions {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 24px;
}
.hw-quick-action {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 12px;
  background: rgba(12,18,40,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
  text-align: center;
}
.hw-quick-action:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}
.hw-quick-action-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(79,70,229,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; color: #818CF8;
}
.hw-quick-action-label {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.8125rem; font-weight: 600; color: #CBD5E1;
}

/* --- CHECKOUT TRUST ------------------------------------------ */
.hw-checkout-trust {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hw-checkout-trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; color: #64748B;
}
.hw-checkout-trust-item i { color: #10B981; font-size: 0.9375rem; width: 16px; flex-shrink: 0; }

/* --- SPEC TABLE ---------------------------------------------- */
.hw-spec-table { width: 100%; border-collapse: collapse; }
.hw-spec-table tr { border-bottom: 1px solid rgba(255,255,255,0.08); }
.hw-spec-table tr:last-child { border-bottom: none; }
.hw-spec-table td { padding: 14px 0; font-size: 0.9375rem; vertical-align: middle; }
.hw-spec-table td:first-child { color: #64748B; width: 40%; font-weight: 500; }
.hw-spec-table td:last-child { color: #F1F5F9; font-weight: 600; text-align: right; }

/* --- TLD PILLS ----------------------------------------------- */
.hw-tld-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9999px;
  font-size: 0.875rem; font-weight: 600; color: #64748B;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.hw-tld-pill:hover {
  background: rgba(79,70,229,0.15);
  border-color: rgba(79,70,229,0.35);
  color: #818CF8;
}
.hw-tld-pill .price { color: #06B6D4; font-size: 0.8125rem; }

/* --- CAROUSEL DOTS ------------------------------------------- */
.hw-carousel-dots { display: flex; gap: 8px; }
.hw-carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}
.hw-carousel-dot.active {
  width: 24px; border-radius: 9999px;
  background: #4F46E5;
}
.hw-carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 32px;
}
.hw-carousel-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #64748B; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.hw-carousel-btn:hover {
  background: rgba(79,70,229,0.15);
  border-color: rgba(79,70,229,0.35);
  color: #818CF8;
}

/* --- SCROLL REVEAL ------------------------------------------- */
.hw-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.23,1,0.32,1),
              transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.hw-reveal.visible { opacity: 1; transform: translateY(0); }
.hw-reveal-left  { opacity: 0; transform: translateX(-24px); transition: opacity 0.5s cubic-bezier(0.23,1,0.32,1), transform 0.5s cubic-bezier(0.23,1,0.32,1); }
.hw-reveal-right { opacity: 0; transform: translateX(24px);  transition: opacity 0.5s cubic-bezier(0.23,1,0.32,1), transform 0.5s cubic-bezier(0.23,1,0.32,1); }
.hw-reveal-left.visible, .hw-reveal-right.visible { opacity: 1; transform: translateX(0); }
.hw-reveal-delay-1 { transition-delay: 80ms; }
.hw-reveal-delay-2 { transition-delay: 160ms; }
.hw-reveal-delay-3 { transition-delay: 240ms; }
.hw-reveal-delay-4 { transition-delay: 320ms; }
.hw-reveal-delay-5 { transition-delay: 400ms; }
.hw-reveal-delay-6 { transition-delay: 480ms; }

/* --- FOOTER CTA BAND ----------------------------------------- */
.hw-footer-cta {
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(79,70,229,0.12), transparent 70%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 64px 0;
  margin-bottom: 64px;
}
.hw-footer-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.hw-footer-cta h2 { max-width: 600px; }
.hw-footer-cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* --- SOCIAL BUTTONS ------------------------------------------ */
.hw-footer-social { display: flex; gap: 10px; }
.hw-social-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #64748B; text-decoration: none; font-size: 0.875rem;
  transition: all 0.2s ease;
}
.hw-social-btn:hover {
  background: rgba(79,70,229,0.15);
  border-color: rgba(79,70,229,0.35);
  color: #818CF8;
  transform: translateY(-2px);
}

/* --- NEWSLETTER ---------------------------------------------- */
.hw-newsletter { display: flex; gap: 8px; margin-top: 20px; }
.hw-newsletter input {
  flex: 1; padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; font-size: 0.875rem;
  color: #F1F5F9; font-family: 'DM Sans', system-ui, sans-serif;
  transition: border-color 0.2s ease; min-width: 0;
}
.hw-newsletter input::placeholder { color: #334155; }
.hw-newsletter input:focus {
  outline: none;
  border-color: #4F46E5;
  background: rgba(79,70,229,0.05);
}

/* --- FLASH BAR ----------------------------------------------- */
.hw-flash-bar {
  padding: 12px 24px; font-size: 0.9375rem;
  font-weight: 500; text-align: center;
}
.hw-flash-bar.error   { background: rgba(239,68,68,.12); border-bottom: 1px solid rgba(239,68,68,.25); color: #FCA5A5; }
.hw-flash-bar.success { background: rgba(16,185,129,.12); border-bottom: 1px solid rgba(16,185,129,.25); color: #6EE7B7; }
.hw-flash-bar.info    { background: rgba(79,70,229,.12); border-bottom: 1px solid rgba(79,70,229,.25); color: #A5B4FC; }

/* --- COOKIE CONSENT BAR -------------------------------------- */
.hw-cookie-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
  background: rgba(8,13,31,0.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.23,1,0.32,1);
}
.hw-cookie-bar.visible { transform: translateY(0); }
.hw-cookie-text { font-size: 0.875rem; color: #64748B; flex: 1; min-width: 200px; }
.hw-cookie-text a { color: #4F46E5; }
.hw-cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* --- BACK TO TOP --------------------------------------------- */
.hw-back-to-top {
  position: fixed; bottom: 32px; right: 32px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #4F46E5; color: #fff; border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
  box-shadow: 0 4px 20px rgba(79,70,229,0.4);
  opacity: 0; transform: translateY(16px);
  transition: all 0.3s cubic-bezier(0.23,1,0.32,1);
  z-index: 80;
}
.hw-back-to-top.visible { opacity: 1; transform: translateY(0); }
.hw-back-to-top:hover {
  background: #4338CA;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(79,70,229,0.5);
}

/* --- RESPONSIVE ADDITIONS ------------------------------------ */
@media (max-width: 1024px) {
  .hw-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hw-stat-item:nth-child(3)::before { display: none; }
  .hw-quick-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hw-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hw-trust-logos { gap: 24px; }
  .hw-footer-cta-inner { flex-direction: column; }
  .hw-quick-actions { grid-template-columns: repeat(2, 1fr); }
  .hw-order-step-label { display: none; }
  .hw-back-to-top { bottom: 80px; right: 20px; }
}
@media (max-width: 480px) {
  .hw-quick-actions { grid-template-columns: repeat(2, 1fr); }
  .hw-announce-bar { font-size: 0.8125rem; padding: 10px 40px 10px 16px; }
}

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */
[data-theme="light"] {
  --hw-bg-primary: #F8FAFC;
  --hw-bg-secondary: #F1F5F9;
  --hw-bg-card: rgba(255,255,255,0.95);
  --hw-text-primary: #0F172A;
  --hw-text-secondary: #334155;
  --hw-text-muted: #64748B;
  --hw-border-subtle: rgba(0,0,0,0.08);
  --hw-border-medium: rgba(0,0,0,0.12);
  --hw-glass-bg: rgba(255,255,255,0.85);
  --hw-glass-border: rgba(0,0,0,0.08);
  --hw-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --hw-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --hw-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --hw-shadow-glow: 0 0 40px rgba(79,70,229,0.15);
}

[data-theme="light"] body {
  background-color: var(--hw-bg-primary);
  color: var(--hw-text-primary);
}

[data-theme="light"] .ha-header {
  background: rgba(248,250,252,0.95);
  border-bottom-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .ha-nav-link {
  color: #334155;
}

[data-theme="light"] .ha-nav-link:hover {
  color: var(--hw-indigo);
}

[data-theme="light"] .hw-card {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .hw-plan-card {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .ha-footer {
  background: #1E293B;
}

[data-theme="light"] .hw-hero {
  background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 50%, #E0E7FF 100%);
}

[data-theme="light"] .hw-hero-title {
  color: #0F172A;
}

[data-theme="light"] .hw-hero-sub {
  color: #475569;
}

[data-theme="light"] .hw-announce-bar {
  background: linear-gradient(90deg, #4F46E5, #7C3AED);
}

[data-theme="light"] .hw-trust-strip {
  background: #F1F5F9;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

[data-theme="light"] .hw-trust-band-item {
  color: #334155;
}

[data-theme="light"] .hw-eyebrow {
  background: rgba(79,70,229,0.1);
  color: #4F46E5;
}

[data-theme="light"] .hw-section-title {
  color: #0F172A;
}

[data-theme="light"] .hw-section-sub {
  color: #64748B;
}

[data-theme="light"] .hw-stat-number {
  color: #0F172A;
}

[data-theme="light"] .hw-stat-label {
  color: #64748B;
}

[data-theme="light"] .hw-feature-card {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .hw-feature-title {
  color: #0F172A;
}

[data-theme="light"] .hw-feature-desc {
  color: #64748B;
}

[data-theme="light"] .hw-testimonial-card {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .hw-testimonial-text {
  color: #334155;
}

[data-theme="light"] .hw-plan-name {
  color: #0F172A;
}

[data-theme="light"] .hw-plan-price {
  color: #0F172A;
}

[data-theme="light"] .hw-plan-feature {
  color: #475569;
}

[data-theme="light"] .hw-faq-item {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .hw-faq-question {
  color: #0F172A;
}

[data-theme="light"] .hw-faq-answer {
  color: #64748B;
}

[data-theme="light"] .hw-domain-search-bar {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.12);
}

[data-theme="light"] .hw-domain-search-bar input {
  color: #0F172A;
  background: transparent;
}

[data-theme="light"] .hw-tld-pill {
  background: rgba(79,70,229,0.08);
  color: #4F46E5;
  border-color: rgba(79,70,229,0.15);
}

[data-theme="light"] .hw-comparison-table th,
[data-theme="light"] .hw-comparison-table td {
  border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .hw-cookie-bar {
  background: #1E293B;
}

[data-theme="light"] .hw-back-to-top {
  background: #4F46E5;
}

[data-theme="light"] .ha-breadcrumb {
  background: #F1F5F9;
  border-bottom-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .ha-breadcrumb a,
[data-theme="light"] .ha-breadcrumb span {
  color: #64748B;
}

[data-theme="light"] .ha-mega {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .ha-mega-card {
  color: #334155;
}

[data-theme="light"] .ha-mega-card:hover {
  background: rgba(79,70,229,0.06);
}

[data-theme="light"] .ha-mega-card span {
  color: #0F172A;
}

[data-theme="light"] .ha-mega-card small {
  color: #64748B;
}

[data-theme="light"] .hw-mega-section {
  color: #94A3B8;
}

[data-theme="light"] .ha-account-bar {
  background: #E2E8F0;
  border-bottom-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .ha-account-bar a,
[data-theme="light"] .ha-account-bar button,
[data-theme="light"] .ha-account-bar span {
  color: #334155;
}

[data-theme="light"] .hw-footer-cta {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
}

[data-theme="light"] .hw-newsletter input {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

[data-theme="light"] .ha-footer-col h3 {
  color: #CBD5E1;
}

[data-theme="light"] .ha-footer-col a {
  color: #94A3B8;
}

[data-theme="light"] .ha-footer-col a:hover {
  color: #fff;
}

[data-theme="light"] .ha-footer-bottom {
  border-top-color: rgba(255,255,255,0.08);
}

[data-theme="light"] .copyright {
  color: #94A3B8;
}


/* ============================================================
   EXTRACTED FROM TEMPLATES (moved here to prevent Smarty errors)
   ============================================================ */

/* From: header.tpl */
body,p,li,td,th,input,select,textarea,button{font-family:'DM Sans',system-ui,sans-serif}h1,h2,h3,h4,h5,h6,.hw-brand-name,.ha-nav-link,.hw-btn,.hw-plan-name{font-family:'Sora',system-ui,sans-serif}

/* From: homepage.tpl */
.hw-product-card{background:rgba(12,18,40,0.8);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:28px;transition:all 0.25s cubic-bezier(0.23,1,0.32,1);display:flex;flex-direction:column;text-decoration:none;color:inherit}
.hw-product-card:hover{border-color:rgba(79,70,229,0.35);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,0.3);text-decoration:none;color:inherit}
.hw-product-card-icon{width:48px;height:48px;border-radius:14px;background:rgba(79,70,229,0.15);color:#818CF8;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:16px}
.hw-product-card-title{font-family:'Sora',system-ui,sans-serif;font-size:1.0625rem;font-weight:700;color:#F1F5F9;margin:0 0 8px}
.hw-product-card-desc{font-size:0.9375rem;color:#64748B;line-height:1.6;margin:0 0 16px;flex:1}
.hw-product-card-price{font-size:0.875rem;color:#64748B;margin-bottom:12px}
.hw-product-card-price strong{color:#F1F5F9;font-size:1.0625rem}
.hw-product-card-link{font-size:0.875rem;font-weight:600;color:#818CF8;display:flex;align-items:center;gap:6px}
.hw-feature-card{background:rgba(12,18,40,0.6);border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:28px;transition:all 0.25s ease}
.hw-feature-card:hover{border-color:rgba(255,255,255,0.12);background:rgba(12,18,40,0.9)}
.hw-feature-icon{width:48px;height:48px;border-radius:14px;background:rgba(79,70,229,0.15);color:#818CF8;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:16px}
.hw-feature-title{font-family:'Sora',system-ui,sans-serif;font-size:1.0625rem;font-weight:700;color:#F1F5F9;margin:0 0 8px}
.hw-feature-desc{font-size:0.9375rem;color:#64748B;line-height:1.6;margin:0}
.hw-plan-card{background:rgba(12,18,40,0.8);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:28px;display:flex;flex-direction:column}
.hw-plan-card-featured{border-color:rgba(79,70,229,0.35);background:rgba(79,70,229,0.05)}
.hw-plan-badge{display:inline-block;padding:4px 12px;background:rgba(79,70,229,0.15);color:#818CF8;border-radius:9999px;font-size:0.75rem;font-weight:700;margin-bottom:12px}
.hw-plan-name{font-family:'Sora',system-ui,sans-serif;font-size:1.125rem;font-weight:700;color:#F1F5F9;margin:0}
.hw-plan-features{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:8px;font-size:0.9375rem;color:#64748B}
@media(max-width:1024px){.hw-products-grid,.hw-features-grid{grid-template-columns:repeat(2,1fr)!important}.hw-plans-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:768px){.hw-products-grid,.hw-features-grid,.hw-plans-grid{grid-template-columns:1fr!important}.hw-ai-grid{grid-template-columns:1fr!important}}

/* From: hostavvy-about.tpl */
.hw-feature-card{background:rgba(12,18,40,0.6);border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:28px;transition:all 0.25s ease}.hw-feature-icon{width:48px;height:48px;border-radius:14px;background:rgba(79,70,229,0.15);color:#818CF8;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:16px}.hw-feature-title{font-family:'Sora',sans-serif;font-size:1.0625rem;font-weight:700;color:#F1F5F9;margin:0 0 8px}.hw-feature-desc{font-size:0.9375rem;color:#64748B;line-height:1.6;margin:0}

/* From: hostavvy-affiliate.tpl */
.hw-feature-card{background:rgba(12,18,40,0.6);border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:28px;transition:all 0.25s ease}.hw-feature-title{font-family:'Sora',sans-serif;font-size:1.0625rem;font-weight:700;color:#F1F5F9;margin:0 0 8px}.hw-feature-desc{font-size:0.9375rem;color:#64748B;line-height:1.6;margin:0}

/* From: hostavvy-ai-builder.tpl */
.hw-pricing-card{background:rgba(12,18,40,0.8);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:28px;position:relative;display:flex;flex-direction:column}
.hw-pricing-card-featured{border-color:rgba(79,70,229,0.4);background:rgba(79,70,229,0.05)}
.hw-pricing-badge{font-size:0.875rem;font-weight:700;color:#64748B;margin-bottom:12px}
.hw-pricing-price{font-size:2.5rem;font-weight:800;color:#F1F5F9;font-family:'Sora',sans-serif;line-height:1}
.hw-pricing-price span{font-size:1rem;font-weight:400;color:#64748B}
.hw-pricing-period{font-size:0.8125rem;color:#64748B;margin:4px 0 20px}
.hw-pricing-features{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;font-size:0.9375rem;color:#94A3B8;flex:1}
.hw-pricing-features li{display:flex;align-items:center;gap:10px}
@media(max-width:1024px){.hw-pricing-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:768px){.hw-pricing-grid{grid-template-columns:1fr!important}}

/* -----------------------------------------------------------------------
   COMPLETENESS PASS - INFO BLOCKS, COMPARISON TABLES, FUNCTIONAL UI
   ----------------------------------------------------------------------- */
.hw-section-info {
  background:
    linear-gradient(180deg, rgba(4,9,24,.88), rgba(7,13,33,.72)),
    radial-gradient(circle at 12% 18%, rgba(125,211,252,.08), transparent 32%);
}

.hw-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.hw-info-card {
  min-height: 100%;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,23,42,.84), rgba(8,13,31,.8));
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 24px 70px rgba(2,6,23,.22);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.hw-info-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #7dd3fc;
  background: rgba(14,165,233,.13);
  margin-bottom: 1rem;
}

.hw-info-card h3 {
  color: #f8fafc;
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  margin: 0 0 .7rem;
}

.hw-info-card p,
.hw-small-muted {
  color: rgba(226,232,240,.76);
  line-height: 1.7;
  margin: 0;
}

.hw-check-list {
  list-style: none;
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
}

.hw-check-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: rgba(226,232,240,.78);
  line-height: 1.55;
}

.hw-check-list i {
  color: #34d399;
  margin-top: .2rem;
}

.hw-copy-row {
  display: flex;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-md);
  background: var(--hw-surface-3);
}

.hw-copy-input {
  border: 0 !important;
  background: transparent !important;
  font-family: 'Fira Code', monospace;
  font-size: .875rem;
}

.hw-copy-btn {
  flex-shrink: 0;
  border-radius: 0 !important;
}

.hw-comparison-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 24px 70px rgba(2,6,23,.2);
}

.hw-comparison-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: rgba(8,13,31,.82);
}

.hw-comparison-table th,
.hw-comparison-table td {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(148,163,184,.12);
  text-align: left;
}

.hw-comparison-table th {
  color: #f8fafc;
  font-family: 'Sora', sans-serif;
  font-size: .9rem;
}

.hw-comparison-table td {
  color: rgba(226,232,240,.78);
}

.hw-notice {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  border-radius: 16px;
  background: rgba(14,165,233,.1);
  border: 1px solid rgba(125,211,252,.22);
  padding: 1rem 1.15rem;
  color: rgba(226,232,240,.82);
}

.hw-notice i {
  color: #7dd3fc;
  margin-top: .2rem;
}

.hw-notice p {
  margin: 0;
  line-height: 1.65;
}

.hw-domain-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
}

@media(max-width:900px) {
  .hw-info-grid {
    grid-template-columns: 1fr;
  }
}

[data-theme="light"] .hw-section-info {
  background: linear-gradient(180deg, #f8fafc, #eef6ff);
}

[data-theme="light"] .hw-info-card,
[data-theme="light"] .hw-comparison-table {
  background: #fff;
}

[data-theme="light"] .hw-info-card h3,
[data-theme="light"] .hw-comparison-table th {
  color: #0f172a;
}

[data-theme="light"] .hw-info-card p,
[data-theme="light"] .hw-check-list li,
[data-theme="light"] .hw-comparison-table td,
[data-theme="light"] .hw-small-muted {
  color: #475569;
}

[data-theme="light"] .hw-notice {
  background: #eff6ff;
  color: #334155;
}

/* -----------------------------------------------------------------------
   2026 PRODUCTION POLISH - MEDIA, HEROES, RHYTHM
   ----------------------------------------------------------------------- */

/* -- hw-* components unique to v3 first-pass (not superseded) --- */

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

body.hw-body {
  background: var(--hw-base);
  color: var(--hw-text-primary);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

a { color: var(--hw-indigo); text-decoration: none; transition: color 0.18s; }

a:hover { color: var(--hw-text-primary); }

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

h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-weight: 800;
  color: var(--hw-text-primary);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

@media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }

@media (min-width: 1024px) { .container { padding-left: 2rem; padding-right: 2rem; } }

.hw-nav-dropdown:hover .hw-nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.hw-mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--hw-surface);
  border-top: 1px solid var(--hw-border);
  padding: 0.5rem 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-out);
}

.hw-mobile-menu.open {
  display: flex;
  max-height: 100vh;
}

.hw-mobile-link {
  display: block;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--hw-text-secondary);
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
}

.hw-mobile-link:hover { color: var(--hw-text-primary); background: var(--hw-surface-2); }

@media (max-width: 1023px) {
  .hw-nav-links { display: none; }
  #hw-mobile-toggle { display: flex !important; }
}

.hw-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, var(--hw-base) 38%, transparent 75%);
}

.hw-hero-overlay-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--hw-base) 0%, transparent 40%);
}

.hw-hero-title {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  font-weight: 900;
  color: var(--hw-text-primary);
  line-height: 1.03;
  letter-spacing: -0.04em;
  max-width: 760px;
  margin-bottom: 1.5rem;
}

.hw-hero-title .gradient {
  background: linear-gradient(135deg, var(--hw-indigo) 0%, var(--hw-violet) 50%, var(--hw-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hw-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--hw-text-secondary);
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: 2.5rem;
}

.hw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hw-indigo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--hw-indigo-light);
  border: 1px solid rgba(79,70,229,0.2);
  border-radius: 100px;
  padding: 0.3rem 0.875rem;
  margin-bottom: 1rem;
}

.hw-section-subtitle {
  font-size: 1.0625rem;
  color: var(--hw-text-secondary);
  line-height: 1.7;
  margin-bottom: 0;
}

.hw-sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--hw-indigo);
  border-radius: 0 2px 2px 0;
}

.hw-badge-count {
  margin-left: auto;
  background: var(--hw-red);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 100px;
  font-family: 'Fira Code', monospace;
}

.hw-account-card:hover { border-color: var(--hw-border-bright); }

.hw-account-card-title {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--hw-text-primary);
  margin-bottom: 0.25rem;
}

.hw-table thead {
  background: var(--hw-surface-3);
}

.hw-table tbody tr:hover { background: var(--hw-surface-2); }

.hw-table .status-active { color: var(--hw-green); font-weight: 600; }

.hw-table .status-pending { color: var(--hw-amber); font-weight: 600; }

.hw-table .status-suspended { color: var(--hw-red); font-weight: 600; }

.hw-table .status-cancelled { color: var(--hw-text-muted); }

.hw-input, .hw-select, .hw-textarea {
  width: 100%;
  background: var(--hw-surface-3);
  border: 1px solid var(--hw-border-bright);
  border-radius: var(--hw-radius);
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--hw-text-primary);
  font-family: 'DM Sans', sans-serif;
  transition: border-color 0.18s, box-shadow 0.18s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.hw-input:focus, .hw-select:focus, .hw-textarea:focus {
  border-color: var(--hw-indigo);
  box-shadow: 0 0 0 3px var(--hw-indigo-light);
}

.hw-textarea { resize: vertical; min-height: 120px; }

.hw-input-group {
  display: flex;
  gap: 0.5rem;
}

.hw-input-group .hw-input { flex: 1; }

.hw-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.625rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  letter-spacing: 0.04em;
}

.hw-badge-green { background: rgba(16,185,129,0.12); color: var(--hw-green); }

.hw-badge-amber { background: rgba(245,158,11,0.12); color: var(--hw-amber); }

.hw-badge-red   { background: rgba(239,68,68,0.12);  color: var(--hw-red);   }

.hw-badge-indigo { background: var(--hw-indigo-light); color: var(--hw-indigo); }

.hw-badge-muted { background: var(--hw-surface-3); color: var(--hw-text-muted); }

.hw-faq-item {
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-lg);
  overflow: hidden;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s;
}

.hw-faq-item.open { border-color: var(--hw-indigo); }

.hw-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 1rem;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--hw-text-primary);
}

.hw-faq-question .icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  color: var(--hw-text-muted);
  transition: transform 0.22s var(--ease-out), color 0.18s;
}

.hw-faq-item.open .hw-faq-question .icon {
  transform: rotate(180deg);
  color: var(--hw-indigo);
}

.hw-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.23,1,0.32,1);
}

.hw-faq-answer-inner {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--hw-text-secondary);
  line-height: 1.75;
  border-top: 1px solid var(--hw-border);
  padding-top: 1rem;
}

.hw-domain-search {
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border-bright);
  border-radius: var(--hw-radius-xl);
  padding: 0.5rem;
  display: flex;
  gap: 0.5rem;
  max-width: 680px;
}

.hw-domain-search .hw-input {
  border: none;
  background: transparent;
  font-size: 1rem;
  padding: 0.625rem 1rem;
  flex: 1;
}

.hw-domain-search .hw-input:focus { box-shadow: none; }

.hw-billing-toggle [data-billing] {
  padding: 0.375rem 1.25rem;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hw-text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background 0.18s, color 0.18s;
  font-family: 'DM Sans', sans-serif;
}

.hw-billing-toggle [data-billing].active {
  background: var(--hw-indigo);
  color: #fff;
}

.hw-plan-save {
  display: none;
  background: rgba(16,185,129,0.12);
  color: var(--hw-green);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  margin-left: 0.5rem;
  font-family: 'Fira Code', monospace;
}

@media (max-width: 1023px) {
  .hw-footer-grid { grid-template-columns: 1fr 1fr; }
  .hw-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 639px) {
  .hw-footer-grid { grid-template-columns: 1fr; }
}

.hw-stat-card {
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-xl);
  padding: 1.5rem;
}

.hw-stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--hw-text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
}

.hw-stat-sub {
  font-size: 0.8125rem;
  color: var(--hw-text-muted);
  margin-top: 0.375rem;
}

.hw-progress {
  height: 6px;
  background: var(--hw-surface-3);
  border-radius: 100px;
  overflow: hidden;
}

.hw-progress-bar {
  height: 100%;
  background: var(--hw-indigo);
  border-radius: 100px;
  transition: width 0.6s var(--ease-out);
}

.hw-tabs {}

.hw-tab-list {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--hw-border);
  margin-bottom: 1.5rem;
}

.hw-tab-btn {
  padding: 0.625rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hw-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: -1px;
}

.hw-tab-btn:hover { color: var(--hw-text-primary); }

.hw-tab-btn.active { color: var(--hw-indigo); border-bottom-color: var(--hw-indigo); }

.hw-page-hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,0.08) 0%, transparent 70%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .hw-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .hw-hero { min-height: 80vh; }
  .hw-plans-grid { grid-template-columns: 1fr; }
  .hw-features-grid { grid-template-columns: 1fr; }
  .hw-testimonials-grid { grid-template-columns: 1fr; }
  .hw-trust-band-inner { justify-content: flex-start; overflow-x: auto; }
  .hw-sidebar { display: none; }
  .hw-domain-search { flex-direction: column; }
}

body.hw-body .panel { background: var(--hw-surface-2); border-color: var(--hw-border); border-radius: var(--hw-radius-xl); }

body.hw-body .panel-heading { background: var(--hw-surface-3); border-color: var(--hw-border); color: var(--hw-text-primary); font-family: 'Sora', sans-serif; font-weight: 700; }

body.hw-body .panel-body { color: var(--hw-text-secondary); }

body.hw-body .table { color: var(--hw-text-secondary); }

body.hw-body .table > thead > tr > th { border-color: var(--hw-border); color: var(--hw-text-muted); background: var(--hw-surface-3); font-family: 'Sora', sans-serif; font-size: 0.8125rem; }

body.hw-body .table > tbody > tr > td { border-color: var(--hw-border); }

body.hw-body .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.02); }

body.hw-body .table-hover > tbody > tr:hover { background: var(--hw-surface-2); }

body.hw-body .btn-primary { background: var(--hw-indigo); border-color: var(--hw-indigo); font-family: 'Sora', sans-serif; font-weight: 700; }

body.hw-body .btn-primary:hover { background: var(--hw-indigo-hover); border-color: var(--hw-indigo-hover); }

body.hw-body .btn-default { background: var(--hw-surface-2); border-color: var(--hw-border-bright); color: var(--hw-text-primary); }

body.hw-body .btn-default:hover { background: var(--hw-surface-3); color: var(--hw-text-primary); }

body.hw-body .btn-success { background: var(--hw-green); border-color: var(--hw-green); }

body.hw-body .btn-danger  { background: var(--hw-red);   border-color: var(--hw-red);   }

body.hw-body .btn-warning { background: var(--hw-amber); border-color: var(--hw-amber); color: #000; }

body.hw-body .form-control { background: var(--hw-surface-3); border-color: var(--hw-border-bright); color: var(--hw-text-primary); border-radius: var(--hw-radius); }

body.hw-body .form-control:focus { border-color: var(--hw-indigo); box-shadow: 0 0 0 3px var(--hw-indigo-light); }

body.hw-body .form-control::placeholder { color: var(--hw-text-muted); }

body.hw-body .label-success { background: var(--hw-green); }

body.hw-body .label-warning { background: var(--hw-amber); color: #000; }

body.hw-body .label-danger  { background: var(--hw-red); }

body.hw-body .label-default { background: var(--hw-surface-3); color: var(--hw-text-muted); }

body.hw-body .alert-success { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.25); color: #6EE7B7; }

body.hw-body .alert-danger  { background: rgba(239,68,68,0.1);  border-color: rgba(239,68,68,0.25);  color: #FCA5A5; }

body.hw-body .alert-warning { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: #FCD34D; }

body.hw-body .alert-info    { background: var(--hw-indigo-light); border-color: rgba(79,70,229,0.25); color: #A5B4FC; }

body.hw-body .nav-tabs { border-color: var(--hw-border); }

body.hw-body .nav-tabs > li > a { color: var(--hw-text-muted); border-color: transparent; }

body.hw-body .nav-tabs > li > a:hover { background: var(--hw-surface-2); color: var(--hw-text-primary); border-color: var(--hw-border); }

body.hw-body .nav-tabs > li.active > a { background: var(--hw-surface-2); color: var(--hw-indigo); border-color: var(--hw-border); border-bottom-color: var(--hw-surface-2); }

body.hw-body .breadcrumb { background: transparent; padding: 0; margin: 0 0 1.5rem; font-size: 0.8125rem; color: var(--hw-text-muted); }

body.hw-body .breadcrumb > li + li::before { color: var(--hw-text-muted); }

body.hw-body .breadcrumb > .active { color: var(--hw-text-secondary); }

body.hw-body .pagination > li > a { background: var(--hw-surface-2); border-color: var(--hw-border); color: var(--hw-text-secondary); }

body.hw-body .pagination > li > a:hover { background: var(--hw-surface-3); color: var(--hw-text-primary); }

body.hw-body .pagination > .active > a { background: var(--hw-indigo); border-color: var(--hw-indigo); color: #fff; }

body.hw-body .modal-content { background: var(--hw-surface-2); border-color: var(--hw-border); border-radius: var(--hw-radius-xl); }

body.hw-body .modal-header { border-color: var(--hw-border); }

body.hw-body .modal-footer { border-color: var(--hw-border); }

body.hw-body .modal-title { color: var(--hw-text-primary); font-family: 'Sora', sans-serif; font-weight: 700; }

body.hw-body .close { color: var(--hw-text-muted); opacity: 1; }

body.hw-body .close:hover { color: var(--hw-text-primary); }

body.hw-body .well { background: var(--hw-surface-2); border-color: var(--hw-border); border-radius: var(--hw-radius-xl); }

body.hw-body .list-group-item { background: var(--hw-surface-2); border-color: var(--hw-border); color: var(--hw-text-secondary); }

body.hw-body .list-group-item:hover { background: var(--hw-surface-3); color: var(--hw-text-primary); }

body.hw-body .list-group-item.active { background: var(--hw-indigo); border-color: var(--hw-indigo); color: #fff; }

body.hw-body .dropdown-menu { background: var(--hw-surface-2); border-color: var(--hw-border); border-radius: var(--hw-radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,0.5); }

body.hw-body .dropdown-menu > li > a { color: var(--hw-text-secondary); }

body.hw-body .dropdown-menu > li > a:hover { background: var(--hw-surface-3); color: var(--hw-text-primary); }

body.hw-body .divider { background: var(--hw-border); }

body.hw-body .input-group-addon { background: var(--hw-surface-3); border-color: var(--hw-border-bright); color: var(--hw-text-muted); }

body.hw-body select.form-control option { background: var(--hw-surface-2); color: var(--hw-text-primary); }

body.hw-body .checkbox label, body.hw-body .radio label { color: var(--hw-text-secondary); }

body.hw-body h1, body.hw-body h2, body.hw-body h3, body.hw-body h4, body.hw-body h5, body.hw-body h6 { color: var(--hw-text-primary); font-family: 'Sora', sans-serif; }

body.hw-body p { color: var(--hw-text-secondary); }

body.hw-body hr { border-color: var(--hw-border); }

body.hw-body .text-muted { color: var(--hw-text-muted) !important; }

body.hw-body .bg-white, body.hw-body .bg-light { background: var(--hw-surface-2) !important; }

body.hw-body .card { background: var(--hw-surface-2); border-color: var(--hw-border); border-radius: var(--hw-radius-xl); }

body.hw-body .card-header { background: var(--hw-surface-3); border-color: var(--hw-border); color: var(--hw-text-primary); font-family: 'Sora', sans-serif; font-weight: 700; }

body.hw-body .card-body { color: var(--hw-text-secondary); }

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}


/* ================================================================
   2026 Production Polish
   ================================================================ */

:root {
  --hw-hero-home-image: url('../images/heroes/hero-home-platform.webp');
  --hw-hero-hosting-image: url('../images/heroes/hero-hosting-managed.webp');
  --hw-hero-infrastructure-image: url('../images/heroes/hero-infrastructure.webp');
  --hw-hero-domains-image: url('../images/heroes/hero-domains-security.webp');
  --hw-hero-ai-image: url('../images/heroes/hero-ai-seo.webp');
  --hw-hero-game-image: url('../images/heroes/hero-game-servers.webp');
  --hw-hero-team-image: url('../images/heroes/hero-support-team.webp');
  --hw-active-hero-image: var(--hw-hero-hosting-image);
}

body.hw-page-index,
body.hw-page-home { --hw-active-hero-image: var(--hw-hero-home-image); }
body.hw-page-hostavvy-shared-hosting,
body.hw-page-hostavvy-wordpress,
body.hw-page-hostavvy-reseller,
body.hw-page-hostavvy-email { --hw-active-hero-image: var(--hw-hero-hosting-image); }
body.hw-page-hostavvy-vps,
body.hw-page-hostavvy-dedicated-servers,
body.hw-page-hostavvy-cloud-hosting,
body.hw-page-hostavvy-enterprise,
body.hw-page-hostavvy-pricing { --hw-active-hero-image: var(--hw-hero-infrastructure-image); }
body.hw-page-hostavvy-domains,
body.hw-page-domain-pricing,
body.hw-page-hostavvy-security { --hw-active-hero-image: var(--hw-hero-domains-image); }
body.hw-page-hostavvy-ai-builder,
body.hw-page-hostavvy-seo-manager { --hw-active-hero-image: var(--hw-hero-ai-image); }
body.hw-page-hostavvy-game-servers { --hw-active-hero-image: var(--hw-hero-game-image); }
body.hw-page-hostavvy-about,
body.hw-page-hostavvy-affiliate,
body.hw-page-hostavvy-migration,
body.hw-page-contact,
body.hw-page-privacy-policy,
body.hw-page-terms-of-service,
body.hw-page-acceptable-use,
body.hw-page-refund-policy,
body.hw-page-sla,
body.hw-page-gdpr { --hw-active-hero-image: var(--hw-hero-team-image); }

.hw-hero,
.hw-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #050816;
}

.hw-hero {
  min-height: min(850px, calc(100vh - 1px));
  padding: clamp(6.5rem, 10vw, 9rem) 0 clamp(4rem, 7vw, 6rem);
}

.hw-page-hero {
  min-height: clamp(440px, 54vw, 620px);
  display: flex;
  align-items: center;
  padding: clamp(5.5rem, 9vw, 8rem) 0 clamp(4rem, 7vw, 6rem);
}

.hw-page-hero-sm {
  min-height: clamp(360px, 45vw, 500px);
}

.hw-hero::before,
.hw-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: var(--hw-active-hero-image);
  background-size: cover;
  background-position: center right;
  opacity: .86;
  transform: scale(1.01);
}

.hw-hero::after,
.hw-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.9) 36%, rgba(5,8,22,.5) 64%, rgba(5,8,22,.82) 100%),
    linear-gradient(180deg, rgba(5,8,22,.2) 0%, rgba(5,8,22,.25) 45%, rgba(5,8,22,.96) 100%);
}

.hw-hero .container,
.hw-page-hero .container {
  position: relative;
  z-index: 1;
}

.hw-hero-inner {
  max-width: 760px;
  margin-left: 0;
  text-align: left;
}

.hw-page-hero .container {
  text-align: left;
}

.hw-page-hero .container > .hw-eyebrow,
.hw-page-hero .container > .hw-page-hero-title,
.hw-page-hero .container > .hw-page-hero-sub,
.hw-page-hero .container > .hw-hero-trust,
.hw-page-hero .container > .hw-flex-center {
  max-width: 760px;
  margin-left: 0;
}

.hw-page-hero .hw-flex-center {
  justify-content: flex-start;
}

.hw-hero-title,
.hw-page-hero-title {
  max-width: 780px;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 18px 60px rgba(0,0,0,.4);
}

.hw-hero-title {
  font-size: clamp(2.75rem, 6vw, 5.65rem);
}

.hw-page-hero-title {
  font-size: clamp(2.35rem, 5vw, 4.75rem);
  line-height: 1.02;
  margin-bottom: 1.25rem;
}

.hw-hero-sub,
.hw-page-hero-sub,
.hw-section-sub {
  color: rgba(226,232,240,.82);
  text-wrap: pretty;
}

.hw-page-hero-sub {
  max-width: 640px;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.72;
}

.hw-eyebrow {
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(6,182,212,.08);
}

.hw-gradient-text {
  background: linear-gradient(135deg, #7dd3fc 0%, #a7f3d0 42%, #c4b5fd 78%, #fcd34d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hw-btn {
  min-height: 44px;
}

.hw-btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 48%, #10b981 100%);
  border: 0;
  box-shadow: 0 16px 44px rgba(14,165,233,.22);
}

.hw-btn-primary:hover {
  box-shadow: 0 22px 58px rgba(16,185,129,.24);
}

.hw-card,
.hw-feature-card,
.hw-plan-card,
.hw-testimonial-card,
.hw-stat-card,
.hw-kb-category-card,
.hw-contact-channel {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.82), rgba(8,13,31,.78)),
    rgba(15,23,42,.72);
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 24px 70px rgba(2,6,23,.22);
}

.hw-feature-card:hover,
.hw-plan-card:hover,
.hw-testimonial-card:hover,
.hw-kb-category-card:hover {
  border-color: rgba(125,211,252,.28);
  box-shadow: 0 28px 90px rgba(2,6,23,.34);
}

.hw-plan-card.hw-plan-featured,
.hw-plan-card.featured {
  border-color: rgba(16,185,129,.44);
  box-shadow: 0 34px 100px rgba(16,185,129,.13), 0 0 0 1px rgba(125,211,252,.08) inset;
}

.hw-section {
  position: relative;
}

.hw-section-alt {
  background:
    linear-gradient(180deg, rgba(7,12,30,.72), rgba(3,7,18,.94)),
    radial-gradient(circle at 80% 10%, rgba(16,185,129,.09), transparent 34%);
}

.hw-section-header {
  max-width: 820px;
}

.hw-section-title {
  letter-spacing: 0;
  text-wrap: balance;
}

.hw-trust-strip,
.hw-footer-cta {
  background:
    linear-gradient(135deg, rgba(14,165,233,.14), rgba(16,185,129,.08)),
    rgba(8,13,31,.82);
  border-block: 1px solid rgba(148,163,184,.13);
}

.hw-footer-cta {
  border-radius: 22px;
  margin-bottom: 1rem;
  padding: clamp(2rem, 4vw, 3rem);
}

.hw-domain-search-bar,
.hw-kb-search-bar,
.hw-newsletter {
  box-shadow: 0 22px 70px rgba(2,6,23,.28);
}

.hw-legal-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.hw-legal-summary {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 1rem;
}

.hw-legal-card {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,23,42,.84), rgba(8,13,31,.82));
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 24px 70px rgba(2,6,23,.22);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.hw-legal-card h2 {
  color: #f8fafc;
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.2;
  margin: 0 0 .85rem;
}

.hw-legal-card h2:not(:first-child) {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.hw-legal-card p {
  color: rgba(226,232,240,.76);
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 1rem;
}

.hw-legal-card p:last-child {
  margin-bottom: 0;
}

.hw-legal-card a,
.hw-legal-summary a {
  color: #7dd3fc;
  font-weight: 700;
}

@media (max-width: 900px) {
  .hw-hero::before,
  .hw-page-hero::before {
    background-position: 62% center;
    opacity: .52;
  }

  .hw-hero::after,
  .hw-page-hero::after {
    background:
      linear-gradient(180deg, rgba(5,8,22,.88) 0%, rgba(5,8,22,.78) 45%, rgba(5,8,22,.98) 100%),
      linear-gradient(90deg, rgba(5,8,22,.92), rgba(5,8,22,.74));
  }

  .hw-hero-inner {
    max-width: 100%;
  }

  .hw-hero-trust {
    align-items: flex-start;
  }

  .hw-legal-layout {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   NEW TEMPLATE COMPONENTS  v5.1
   Client-area pages: invoice, domain, security, contacts, etc.
   Public: server status, network issues, KB article, announcements
   ============================================================ */

/* -- CLIENT PAGE HEADER --------------------------------------- */
.hw-client-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.hw-back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  color: var(--hw-text-muted, #94a3b8);
  text-decoration: none;
  margin-bottom: .5rem;
}
.hw-back-link:hover { color: var(--ha-cyan, #19d3ff); }
.hw-client-page-title {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.03em;
  margin: 0;
}
.hw-client-page-sub {
  font-size: .875rem;
  color: var(--hw-text-muted, #94a3b8);
  margin: .25rem 0 0;
}

/* -- STATUS BADGES -------------------------------------------- */
.hw-status-badge,
.hw-invoice-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 700;
  padding: .3rem .75rem;
  border-radius: 99px;
  white-space: nowrap;
}
.hw-status-paid,   .hw-status-active,
.hw-status-completed { background: rgba(16,185,129,.12); color: #34d399; }
.hw-status-unpaid, .hw-status-overdue,
.hw-status-cancelled { background: rgba(239,68,68,.12); color: #fb7185; }
.hw-status-pending, .hw-status-delivered { background: rgba(245,158,11,.12); color: #fcd34d; }
.hw-status-accepted, .hw-status-resolved  { background: rgba(16,185,129,.12); color: #34d399; }
.hw-status-scheduled { background: rgba(99,102,241,.12); color: #a5b4fc; }

.hw-badge { display: inline-flex; align-items: center; gap:.25rem; font-size:.7rem; font-weight:700; padding:.2rem .55rem; border-radius:99px; }
.hw-badge-info    { background: rgba(56,189,248,.12); color: #7dd3fc; }
.hw-badge-success { background: rgba(16,185,129,.12); color: #34d399; }
.hw-badge-outline { background: transparent; border: 1px solid var(--ha-border,.18); color: var(--hw-text-muted,#94a3b8); }

/* -- INVOICE LAYOUT ------------------------------------------- */
.hw-invoice-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.5rem;
  align-items: start;
}
.hw-invoice-header {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--ha-border, rgba(148,163,184,.18));
}
.hw-invoice-meta-label { font-size: .75rem; color: var(--hw-text-muted,#94a3b8); text-transform: uppercase; letter-spacing: .05em; }
.hw-invoice-meta-value { font-weight: 700; margin-top: .2rem; }
.hw-invoice-meta-sub   { font-size: .8125rem; color: var(--hw-text-muted,#94a3b8); }

.hw-invoice-table tfoot tr { border-top: 1px solid var(--ha-border, rgba(148,163,184,.18)); }
.hw-invoice-total-row td   { font-weight: 700; padding-top: .75rem !important; }
.hw-invoice-total-amount   { font-size: 1.125rem; }
.hw-invoice-balance-row td { color: #fb7185; font-weight: 700; }
.hw-invoice-credit         { color: #34d399; }
.hw-invoice-item-amount    { font-weight: 600; }
.hw-invoice-item-desc      { font-weight: 500; }
.hw-invoice-item-notes     { font-size: .8125rem; color: var(--hw-text-muted,#94a3b8); margin-top: .2rem; }
.hw-invoice-notes          { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ha-border, rgba(148,163,184,.18)); }
.hw-invoice-notes-label    { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--hw-text-muted,#94a3b8); margin-bottom: .5rem; }
.hw-text-right             { text-align: right !important; }

.hw-invoice-pay-card       { text-align: center; }
.hw-invoice-pay-amount     { font-size: 1.75rem; font-weight: 900; color: var(--ha-cyan,#19d3ff); margin: .5rem 0 1rem; }
.hw-invoice-paid-card      { text-align: center; padding: 2rem; }
.hw-invoice-paid-icon      { font-size: 2.5rem; color: #34d399; }
.hw-invoice-paid-label     { font-size: 1rem; font-weight: 700; color: #34d399; margin-top: .5rem; }
.hw-invoice-actions        { display: flex; flex-direction: column; gap: .5rem; }
.hw-btn-block              { width: 100%; justify-content: center; }

/* -- QUOTE ---------------------------------------------------- */
.hw-quote-subject {
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: var(--hw-radius-md, 12px);
  padding: .75rem 1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

/* -- DOMAIN MANAGEMENT ---------------------------------------- */
.hw-domain-layout { display: flex; flex-direction: column; gap: 1.25rem; }
.hw-domain-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.hw-domain-info-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--hw-text-muted,#94a3b8); }
.hw-domain-info-value { font-weight: 700; margin-top: .2rem; }
.hw-domain-info-item  { }

.hw-toggle-switch  { position: relative; display: inline-flex; width: 42px; height: 24px; cursor: pointer; }
.hw-toggle-switch input { opacity: 0; width: 0; height: 0; }
.hw-toggle-slider  {
  position: absolute; inset: 0;
  background: var(--ha-surface-2, #151f3d);
  border: 1px solid var(--ha-border, rgba(148,163,184,.18));
  border-radius: 99px;
  transition: background .2s;
}
.hw-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.hw-toggle-switch input:checked + .hw-toggle-slider { background: var(--ha-cyan, #19d3ff); border-color: var(--ha-cyan,#19d3ff); }
.hw-toggle-switch input:checked + .hw-toggle-slider::before { transform: translateX(18px); }

.hw-domain-lock-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hw-epp-code-display { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.hw-code            { font-family: 'JetBrains Mono', 'Fira Code', monospace; background: var(--ha-surface-2,#151f3d); padding: .375rem .75rem; border-radius: 8px; font-size: .875rem; word-break: break-all; }
.hw-code-secret     { display: block; font-size: 1rem; letter-spacing: .1em; margin: .5rem 0; }
.hw-domain-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hw-domain-contact-section + .hw-domain-contact-section { margin-top: 1.25rem; }
.hw-form-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }
.hw-input-mono     { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
.hw-text-warning   { color: var(--ha-warning, #f59e0b) !important; }

/* -- CONTACTS GRID -------------------------------------------- */
.hw-contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.25rem; }
.hw-contact-card  { display: flex; flex-direction: column; gap: .5rem; }
.hw-contact-avatar { font-size: 2.25rem; color: var(--ha-cyan,#19d3ff); }
.hw-contact-name  { font-weight: 700; }
.hw-contact-email { font-size: .875rem; color: var(--hw-text-muted,#94a3b8); }
.hw-contact-phone { font-size: .8125rem; color: var(--hw-text-muted,#94a3b8); }
.hw-contact-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.hw-contact-actions { display: flex; gap: .5rem; margin-top: .25rem; }
.hw-btn-danger    { color: #fb7185 !important; }

/* -- EMAIL LOG ------------------------------------------------ */
.hw-email-subject { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.hw-email-icon    { color: var(--hw-text-muted,#94a3b8); }
.hw-email-body-card .hw-email-meta { font-size: .8125rem; color: var(--hw-text-muted,#94a3b8); margin-bottom: 1rem; }
.hw-email-body    { line-height: 1.7; }
.hw-pagination    { display: flex; gap: .5rem; justify-content: center; margin-top: 1.25rem; flex-wrap: wrap; }
.hw-pagination a  { padding: .375rem .75rem; border-radius: 8px; background: var(--ha-surface,#10172f); border: 1px solid var(--ha-border); color: var(--ha-text); text-decoration: none; font-size: .875rem; transition: background .2s; }
.hw-pagination a:hover, .hw-pagination .current { background: var(--ha-cyan,#19d3ff); color: #050816; }

/* -- TWO-FACTOR AUTH CHALLENGE -------------------------------- */
.hw-auth-main { min-height: 80vh; display: flex; align-items: center; padding: 3rem 0; }
.hw-auth-card-wrap { width: 100%; display: flex; justify-content: center; }
.hw-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--ha-surface, #10172f);
  border: 1px solid var(--ha-border, rgba(148,163,184,.18));
  border-radius: var(--ha-radius, 24px);
  padding: 2.5rem 2rem;
}
.hw-auth-logo   { text-align: center; margin-bottom: 1rem; }
.hw-2fa-icon    { font-size: 2.5rem; color: var(--ha-cyan, #19d3ff); }
.hw-auth-title  { font-size: 1.375rem; font-weight: 900; text-align: center; letter-spacing: -.03em; margin: 0 0 .5rem; }
.hw-auth-sub    { font-size: .875rem; color: var(--hw-text-muted,#94a3b8); text-align: center; margin: 0 0 1.75rem; }
.hw-input-center { text-align: center; font-size: 1.5rem; letter-spacing: .25em; }
.hw-input-lg    { padding: .75rem 1rem !important; font-size: 1.25rem !important; }
.hw-btn-lg      { padding: .75rem 1.5rem !important; font-size: 1rem !important; }
.hw-auth-alt-links { margin-top: 1.25rem; text-align: center; }
.hw-link-muted  { font-size: .875rem; color: var(--hw-text-muted,#94a3b8); text-decoration: none; }
.hw-link-muted:hover { color: var(--ha-cyan,#19d3ff); }

/* -- ACCOUNT SECURITY ----------------------------------------- */
.hw-security-status {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--hw-radius-md, 12px);
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.hw-security-status p { font-size: .8125rem; color: var(--hw-text-muted,#94a3b8); margin: .25rem 0 0; }
.hw-security-status--enabled  { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color: #34d399; }
.hw-security-status--disabled { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); color: #fcd34d; }
.hw-security-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.hw-2fa-providers    { display: flex; flex-direction: column; gap: .75rem; }
.hw-2fa-provider-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--ha-surface-2, #151f3d);
  border: 1px solid var(--ha-border);
  border-radius: var(--hw-radius-md, 12px);
  text-decoration: none; color: inherit;
  transition: border-color .2s;
}
.hw-2fa-provider-card:hover { border-color: var(--ha-cyan,#19d3ff); }
.hw-2fa-provider-card > i:first-child { font-size: 1.5rem; color: var(--ha-cyan,#19d3ff); width: 1.5rem; text-align: center; }
.hw-card-arrow { margin-left: auto; color: var(--hw-text-muted,#94a3b8); }
.hw-2fa-qr-wrap { text-align: center; margin-bottom: 1.25rem; }
.hw-2fa-qr      { max-width: 200px; border-radius: 12px; margin-bottom: .75rem; }
.hw-narrow-form-layout { max-width: 520px; }

/* -- PAYMENT METHODS ------------------------------------------ */
.hw-payment-methods-list { display: flex; flex-direction: column; gap: .75rem; }
.hw-payment-method-card  { display: flex; align-items: center; gap: 1rem; }
.hw-payment-method-icon  { font-size: 2rem; width: 2.5rem; text-align: center; flex-shrink: 0; }
.hw-payment-method-info  { flex: 1; min-width: 0; }
.hw-payment-method-name  { font-weight: 700; }
.hw-payment-method-sub   { font-size: .8125rem; color: var(--hw-text-muted,#94a3b8); margin-top: .15rem; }
.hw-payment-method-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.hw-btn-xs { padding: .25rem .6rem !important; font-size: .75rem !important; }

/* -- DOWNLOADS ------------------------------------------------ */
.hw-downloads-list  { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.hw-download-item   { display: flex; align-items: center; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--ha-border); }
.hw-download-item:last-child { border-bottom: none; padding-bottom: 0; }
.hw-download-icon   { font-size: 1.5rem; color: var(--ha-cyan,#19d3ff); width: 1.5rem; text-align: center; flex-shrink: 0; }
.hw-download-info   { flex: 1; min-width: 0; }
.hw-download-name   { font-weight: 600; }
.hw-download-meta   { margin-top: .2rem; }

/* -- STATUS PAGES (server/network) ---------------------------- */
.hw-overall-status {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--hw-radius-md, 12px);
  margin-bottom: 1.75rem;
  font-size: 1.25rem;
}
.hw-overall-status strong { display: block; font-size: 1rem; font-weight: 700; }
.hw-overall-status span   { font-size: .8125rem; color: var(--hw-text-muted,#94a3b8); }
.hw-overall-ok      { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color: #34d399; }
.hw-overall-degraded { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); color: #fcd34d; }

.hw-server-status-grid { display: flex; flex-direction: column; gap: .6rem; }
.hw-server-status-card {
  display: flex; align-items: center; gap: 1rem;
  padding: .875rem 1.25rem;
  background: var(--ha-surface, #10172f);
  border: 1px solid var(--ha-border);
  border-radius: var(--hw-radius-md, 12px);
}
.hw-server-status-indicator {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.hw-status-dot-green  { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.5); }
.hw-status-dot-amber  { background: #fcd34d; box-shadow: 0 0 8px rgba(252,211,77,.5); }
.hw-status-dot-red    { background: #fb7185; box-shadow: 0 0 8px rgba(251,113,133,.5); }
.hw-server-status-info { flex: 1; min-width: 0; }
.hw-server-name { font-weight: 600; }
.hw-server-location, .hw-server-type { margin-top: .15rem; }
.hw-server-status-label { font-size: .8125rem; font-weight: 700; flex-shrink: 0; }
.hw-text-green { color: #34d399; }
.hw-text-amber { color: #fcd34d; }
.hw-text-red   { color: #fb7185; }

.hw-status-all-clear {
  text-align: center; padding: 4rem 2rem;
}
.hw-status-all-clear-icon { font-size: 3.5rem; color: #34d399; margin-bottom: 1rem; display: block; }
.hw-status-links {
  display: flex; gap: .75rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap;
}

.hw-incidents-list { display: flex; flex-direction: column; gap: 1.25rem; }
.hw-incident-card {
  background: var(--ha-surface, #10172f);
  border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius, 24px);
  padding: 1.5rem;
}
.hw-incident-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.hw-incident-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; padding: .25rem .65rem; border-radius: 99px; }
.hw-status-resolved  { background: rgba(16,185,129,.12); color: #34d399; }
.hw-status-degraded  { background: rgba(245,158,11,.12); color: #fcd34d; }
.hw-status-major-outage { background: rgba(239,68,68,.12); color: #fb7185; }
.hw-incident-title   { font-size: 1.125rem; font-weight: 700; margin: 0 0 .75rem; }
.hw-incident-body    { color: var(--hw-text-muted,#94a3b8); line-height: 1.7; }
.hw-incident-updates { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ha-border); display: flex; flex-direction: column; gap: .75rem; }
.hw-incident-update  { }
.hw-incident-update-time { display: block; margin-bottom: .2rem; }

/* -- KNOWLEDGE BASE ARTICLE ----------------------------------- */
.hw-page-hero-xs .container { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.hw-section-tight { padding-top: 2rem; }
.hw-kb-article-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 2rem;
  align-items: start;
}
.hw-kb-article-header { margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ha-border); }
.hw-kb-article-title  { font-size: 1.75rem; font-weight: 900; letter-spacing: -.03em; margin: 0 0 .75rem; }
.hw-kb-article-meta   { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hw-kb-article-tags   { display: flex; gap: .4rem; flex-wrap: wrap; }
.hw-kb-article-body   { line-height: 1.8; color: rgba(248,250,252,.85); }
.hw-kb-article-body h2, .hw-kb-article-body h3 { margin-top: 2rem; font-weight: 800; }
.hw-kb-article-body p  { margin: 0 0 1rem; }
.hw-kb-article-body ul, .hw-kb-article-body ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.hw-kb-article-body pre, .hw-kb-article-body code { background: var(--ha-surface-2,#151f3d); border-radius: 8px; font-size: .875rem; }
.hw-kb-article-body pre { padding: 1rem 1.25rem; overflow-x: auto; }
.hw-kb-article-body code { padding: .1em .4em; }
.hw-kb-article-rating   { margin: 2rem 0; padding: 1.25rem; background: var(--ha-surface, #10172f); border: 1px solid var(--ha-border); border-radius: var(--hw-radius-md,12px); }
.hw-kb-article-rating p { margin: 0 0 .75rem; font-weight: 600; }
.hw-kb-rating-actions   { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.hw-kb-article-footer   { display: flex; align-items: center; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--ha-border); margin-top: 1.5rem; flex-wrap: wrap; }
.hw-kb-related { background: var(--ha-surface, #10172f); border: 1px solid var(--ha-border); border-radius: var(--ha-radius,24px); padding: 1.25rem; position: sticky; top: 80px; }
.hw-kb-related-title    { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--hw-text-muted,#94a3b8); font-weight: 700; margin-bottom: 1rem; }
.hw-kb-related-list     { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.hw-kb-related-list a   { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; color: inherit; text-decoration: none; line-height: 1.4; }
.hw-kb-related-list a i { color: var(--ha-cyan,#19d3ff); margin-top: .15rem; flex-shrink: 0; }
.hw-kb-related-list a:hover { color: var(--ha-cyan,#19d3ff); }

/* -- ANNOUNCEMENTS ARTICLE ------------------------------------ */
.hw-article-layout { max-width: 760px; margin: 0 auto; }
.hw-announcement-article-header { margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ha-border); }
.hw-announcement-article-title  { font-size: 1.875rem; font-weight: 900; letter-spacing: -.04em; margin: .5rem 0 0; line-height: 1.2; }
.hw-announcement-article-body   { line-height: 1.8; color: rgba(248,250,252,.85); }
.hw-announcement-article-body p { margin: 0 0 1rem; }
.hw-announcement-article-footer { padding-top: 1.5rem; margin-top: 2rem; border-top: 1px solid var(--ha-border); }
.hw-announcement-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ha-border);
}
.hw-announcement-nav-link  { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; background: var(--ha-surface,#10172f); border: 1px solid var(--ha-border); border-radius: var(--hw-radius-md,12px); text-decoration: none; color: inherit; transition: border-color .2s; }
.hw-announcement-nav-link:hover { border-color: var(--ha-cyan,#19d3ff); }
.hw-announcement-nav-next  { text-align: right; }
.hw-announcement-nav-dir   { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hw-text-muted,#94a3b8); }
.hw-announcement-nav-title { font-size: .9rem; font-weight: 600; line-height: 1.4; }

/* -- RADIO / CHECKBOX FORM ELEMENTS --------------------------- */
.hw-radio-label, .hw-checkbox-label {
  display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .9rem;
}

/* -- EMPTY STATE ---------------------------------------------- */
.hw-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--hw-text-muted, #94a3b8);
}
.hw-empty-icon { font-size: 3rem; display: block; margin-bottom: 1rem; opacity: .4; }
.hw-empty-state h2 { font-size: 1.25rem; font-weight: 700; color: var(--ha-text,#f8fafc); margin: 0 0 .5rem; }
.hw-empty-state p  { margin: 0 0 1.25rem; }

/* -- RESPONSIVE: NEW TEMPLATES -------------------------------- */
@media (max-width: 900px) {
  .hw-invoice-layout     { grid-template-columns: 1fr; }
  .hw-kb-article-layout  { grid-template-columns: 1fr; }
  .hw-domain-contact-grid { grid-template-columns: 1fr; }
  .hw-announcement-nav   { grid-template-columns: 1fr; }
  .hw-kb-related         { position: static; }
}
@media (max-width: 640px) {
  .hw-invoice-header       { flex-direction: column; gap: .75rem; }
  .hw-auth-card            { padding: 2rem 1.25rem; }
  .hw-client-page-header   { flex-direction: column; }
}

/* ============================================================
   VISUAL DESIGN POLISH  v5.1
   Card hovers, focus rings, form glow, typography, animations
   ============================================================ */

/* -- PAGE LOAD FADE-IN ---------------------------------------- */
html.hostavvy-ready body {
  animation: hw-page-fadein .28s ease both;
}
@keyframes hw-page-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- CARD HOVER LIFT ------------------------------------------ */
.hw-account-card,
.hw-kb-category-card,
.hw-announcement-card,
.hw-download-item,
.hw-contact-card,
.hw-server-status-card,
.hw-incident-card {
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.hw-account-card:hover {
  box-shadow: 0 8px 32px rgba(2,6,23,.45), 0 0 0 1px rgba(25,211,255,.12);
  transform: translateY(-2px);
}
.hw-kb-category-card:hover,
.hw-announcement-card:hover {
  border-color: rgba(25,211,255,.28);
  box-shadow: 0 8px 32px rgba(2,6,23,.35);
  transform: translateY(-2px);
}

/* Mega-menu cards already have transitions - just refine the glow */
.ha-mega-card {
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.ha-mega-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(2,6,23,.3);
}

/* -- BUTTON FOCUS RINGS (accessibility) ----------------------- */
.hw-btn:focus-visible {
  outline: 2px solid var(--ha-cyan, #19d3ff);
  outline-offset: 3px;
}
.hw-btn-primary:focus-visible  { outline-color: var(--ha-cyan, #19d3ff); }
.hw-btn-ghost:focus-visible    { outline-color: var(--ha-border-strong, rgba(25,211,255,.28)); }

/* -- BUTTON ACTIVE PRESS FEEDBACK ----------------------------- */
.hw-btn:active {
  transform: scale(.97);
  transition: transform .08s ease;
}

/* -- FORM INPUT GLOW ON FOCUS --------------------------------- */
.hw-input:focus,
.hw-select:focus,
.hw-form-input:focus {
  outline: none;
  border-color: var(--ha-cyan, #19d3ff) !important;
  box-shadow: 0 0 0 3px rgba(25,211,255,.18);
}

/* -- SCROLL REVEAL BASE STYLES -------------------------------- */
.hw-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.hw-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children when parent has hw-reveal-group */
.hw-reveal-group > *:nth-child(1) { transition-delay: .05s; }
.hw-reveal-group > *:nth-child(2) { transition-delay: .12s; }
.hw-reveal-group > *:nth-child(3) { transition-delay: .19s; }
.hw-reveal-group > *:nth-child(4) { transition-delay: .26s; }
.hw-reveal-group > *:nth-child(5) { transition-delay: .33s; }
.hw-reveal-group > *:nth-child(6) { transition-delay: .40s; }

/* -- TRUST STRIP BADGE ANIMATION ------------------------------ */
.hw-trust-badge,
.hw-trust-item {
  transition: transform .2s ease, opacity .2s ease;
}
.hw-trust-badge:hover,
.hw-trust-item:hover {
  transform: translateY(-3px);
  opacity: 1 !important;
}

/* -- IMPROVED HERO SUB-TEXT ----------------------------------- */
.hw-hero-sub,
.hw-page-hero-sub {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.65;
  max-width: 600px;
}

/* -- HEADING LETTER-SPACING CONSISTENCY ----------------------- */
.hw-section-title,
.hw-kb-article-title,
.hw-announcement-article-title,
.hw-client-page-title {
  letter-spacing: -.03em;
}

/* -- SMOOTH LINK TRANSITIONS ---------------------------------- */
.ha-footer-brand p,
.ha-footer-col a,
.hw-footer-legal a {
  transition: color .18s ease;
}

/* -- BACK TO TOP BUTTON POLISH -------------------------------- */
.hw-back-to-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
  transform: translateY(8px);
}
.hw-back-to-top.hw-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hw-back-to-top:hover {
  box-shadow: 0 6px 24px rgba(25,211,255,.35);
  transform: translateY(-2px);
}

/* -- COOKIE BAR TRANSITION ------------------------------------ */
.hw-cookie-bar {
  transition: transform .38s cubic-bezier(.23,1,.32,1);
}

/* -- ANNOUNCEMENT BAR ICON ------------------------------------ */
.hw-announce-bar a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -- INVOICE STATUS COLOUR GLOW ------------------------------- */
.hw-status-paid   { box-shadow: 0 0 10px rgba(52,211,153,.18); }
.hw-status-unpaid { box-shadow: 0 0 10px rgba(251,113,133,.18); }
.hw-status-overdue { box-shadow: 0 0 10px rgba(252,211,77,.18); }

/* -- SPEC TABLE ROW HOVER -------------------------------------- */
.hw-spec-table tbody tr {
  transition: background .15s ease;
}
.hw-spec-table tbody tr:hover {
  background: rgba(25,211,255,.04);
}

/* -- NAVIGATION ACTIVE INDICATOR ------------------------------ */
.ha-nav-link.active {
  color: var(--ha-cyan, #19d3ff) !important;
  position: relative;
}
.ha-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 2px;
  background: var(--ha-cyan, #19d3ff);
  border-radius: 99px;
}

/* -- MOBILE CONTENT SPACING ----------------------------------- */
@media (max-width: 640px) {
  .hw-section { padding-top: 3rem; padding-bottom: 3rem; }
  .hw-page-hero { padding: 3.5rem 0 2.5rem; }
  .hw-client-main .container { padding-top: 1.5rem; padding-bottom: 2rem; }
  .hw-account-card { padding: 1.25rem; }
  .hw-account-card:hover { transform: none; } /* disable lift on touch */
}

/* -- LIGHT MODE OVERRIDES -------------------------------------- */
[data-theme="light"] .hw-account-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 0 0 1px rgba(47,128,255,.15);
}
[data-theme="light"] .hw-input:focus,
[data-theme="light"] .hw-select:focus {
  border-color: var(--ha-blue, #2f80ff) !important;
  box-shadow: 0 0 0 3px rgba(47,128,255,.18);
}
[data-theme="light"] .ha-nav-link.active {
  color: var(--ha-blue, #2f80ff) !important;
}
[data-theme="light"] .ha-nav-link.active::after {
  background: var(--ha-blue, #2f80ff);
}

/* ============================================================
   DOMAIN CHECKER  v5.1
   ============================================================ */
.hw-domain-checker-hero .hw-domain-search-bar--lg {
  max-width: 640px;
  margin: 1.5rem auto 1rem;
}
.hw-tld-shortcuts {
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.hw-tld-pill {
  display: inline-block;
  padding: .25rem .7rem;
  background: rgba(25,211,255,.08);
  border: 1px solid rgba(25,211,255,.2);
  border-radius: 99px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ha-cyan, #19d3ff);
  text-decoration: none;
  transition: background .18s, transform .18s;
}
.hw-tld-pill:hover {
  background: rgba(25,211,255,.18);
  transform: translateY(-2px);
}

/* Primary result */
.hw-domain-primary-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
  border-radius: var(--ha-radius, 24px);
  border: 2px solid;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.hw-domain-result-available {
  background: rgba(16,185,129,.06);
  border-color: rgba(16,185,129,.3);
}
.hw-domain-result-taken {
  background: rgba(239,68,68,.05);
  border-color: rgba(239,68,68,.2);
}
.hw-domain-primary-name {
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  font-weight: 900;
  letter-spacing: -.03em;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.hw-domain-available-badge {
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .65rem;
  background: rgba(16,185,129,.18);
  color: #34d399;
  border-radius: 99px;
}
.hw-domain-taken-badge {
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .65rem;
  background: rgba(239,68,68,.14);
  color: #fb7185;
  border-radius: 99px;
}
.hw-domain-primary-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.hw-domain-primary-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ha-cyan, #19d3ff);
}
.hw-domain-renew-note {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  color: var(--hw-text-muted, #94a3b8);
  margin-top: .15rem;
}
.hw-domain-taken-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Results grid */
.hw-domain-suggestions-header { margin: 1.5rem 0 1rem; }
.hw-section-title-sm { font-size: 1.125rem; font-weight: 800; }
.hw-domain-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
  margin-bottom: 2rem;
}
.hw-domain-result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 1.25rem;
  background: var(--ha-surface, #10172f);
  border: 1px solid var(--ha-border);
  border-radius: var(--hw-radius-md, 12px);
  transition: border-color .2s, transform .2s;
}
.hw-domain-result-card:hover { transform: translateY(-1px); border-color: rgba(25,211,255,.2); }
.hw-domain-result-card.hw-domain-result-available:hover { border-color: rgba(16,185,129,.3); }
.hw-domain-result-name { font-weight: 600; font-size: .9375rem; }
.hw-domain-result-price { font-size: .8125rem; color: var(--ha-cyan, #19d3ff); font-weight: 700; margin-top: .15rem; }
.hw-domain-result-action { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.hw-domain-available-dot, .hw-domain-taken-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.hw-domain-available-dot { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,.5); }
.hw-domain-taken-dot     { background: #fb7185; }
.hw-domain-result-taken-label { font-size: .8125rem; color: var(--hw-text-muted, #94a3b8); }

/* TLD pricing grid */
.hw-tld-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.hw-tld-pricing-card {
  background: var(--ha-surface, #10172f);
  border: 1px solid var(--ha-border);
  border-radius: var(--hw-radius-md, 12px);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: border-color .2s, transform .2s;
}
.hw-tld-pricing-card:hover { border-color: rgba(25,211,255,.25); transform: translateY(-2px); }
.hw-tld-pricing-ext  { font-size: 1.5rem; font-weight: 900; color: var(--ha-cyan, #19d3ff); }
.hw-tld-pricing-from { font-size: .7rem; text-transform: uppercase; color: var(--hw-text-muted, #94a3b8); margin: .35rem 0 .1rem; }
.hw-tld-pricing-price { font-size: 1.125rem; font-weight: 800; margin-bottom: .2rem; }
.hw-tld-pricing-renew { margin-bottom: .75rem; }

/* Domain trust strip */
.hw-domain-trust-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  border-top: 1px solid var(--ha-border);
  margin-top: 2rem;
}
.hw-domain-trust-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--hw-text-muted, #94a3b8);
}
.hw-domain-trust-item i { color: var(--ha-cyan, #19d3ff); }

/* ============================================================
   DOMAIN RENEWALS  v5.1
   ============================================================ */
.hw-row-warning td { background: rgba(245,158,11,.04); }
.hw-select-sm { padding: .3rem .6rem !important; font-size: .8125rem !important; }
.hw-badge-danger  { background: rgba(239,68,68,.12); color: #fb7185; }
.hw-badge-warning { background: rgba(245,158,11,.12); color: #fcd34d; }
.hw-domain-renew-name { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.hw-domain-renew-price { font-weight: 700; color: var(--ha-cyan, #19d3ff); }
.hw-domain-renew-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }
.hw-checkbox {
  width: 1rem; height: 1rem; cursor: pointer;
  accent-color: var(--ha-cyan, #19d3ff);
}

/* ============================================================
   DNS MANAGEMENT  v5.1
   ============================================================ */
.hw-dns-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: .5rem;
}
.hw-dns-group { margin-bottom: 1rem; }
.hw-dns-group-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: .75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--ha-border);
}
.hw-dns-type-badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.hw-dns-type-a    { background: rgba(47,128,255,.15); color: #93c5fd; }
.hw-dns-type-aaaa { background: rgba(99,102,241,.15); color: #a5b4fc; }
.hw-dns-type-cname { background: rgba(16,185,129,.15); color: #6ee7b7; }
.hw-dns-type-mx   { background: rgba(245,158,11,.15); color: #fcd34d; }
.hw-dns-type-txt  { background: rgba(124,58,237,.15); color: #c4b5fd; }
.hw-dns-type-ns   { background: rgba(6,182,212,.15); color: #67e8f9; }
.hw-dns-type-srv  { background: rgba(244,63,94,.15); color: #fb7185; }
.hw-dns-type-caa  { background: rgba(52,211,153,.15); color: #34d399; }

.hw-dns-records-list { display: flex; flex-direction: column; gap: .5rem; }
.hw-dns-record-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: .625rem .875rem;
  background: var(--ha-surface-2, #151f3d);
  border-radius: 8px;
  font-size: .875rem;
}
.hw-dns-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hw-text-muted, #94a3b8); margin-bottom: .1rem; }
.hw-dns-value { font-family: 'JetBrains Mono', 'Fira Code', monospace; word-break: break-all; }
.hw-dns-record-actions { display: flex; gap: .4rem; }

/* ============================================================
   TICKET THREAD  v5.1
   ============================================================ */
.hw-ticket-header-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .4rem;
}
.hw-ticket-status-wrap { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hw-ticket-status-badge { }
.hw-ticket-status-open     { background: rgba(16,185,129,.12); color: #34d399; }
.hw-ticket-status-answered { background: rgba(47,128,255,.12); color: #93c5fd; }
.hw-ticket-status-in-progress { background: rgba(245,158,11,.12); color: #fcd34d; }
.hw-ticket-status-closed   { background: rgba(148,163,184,.12); color: #94a3b8; }
.hw-ticket-status-on-hold  { background: rgba(245,158,11,.12); color: #fcd34d; }
.hw-ticket-priority-badge {
  font-size: .7rem; font-weight: 700; padding: .2rem .6rem; border-radius: 99px;
  background: var(--ha-surface-2, #151f3d);
}
.hw-priority-low    { color: #67e8f9; }
.hw-priority-medium { color: #fcd34d; }
.hw-priority-high   { color: #fb7185; }

.hw-ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.hw-ticket-reply {
  border-radius: var(--ha-radius, 24px);
  border: 1px solid var(--ha-border);
  overflow: hidden;
}
.hw-ticket-reply-admin {
  border-color: rgba(25,211,255,.2);
  background: rgba(25,211,255,.03);
}
.hw-ticket-reply-client {
  background: var(--ha-surface, #10172f);
}
.hw-reply-header {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--ha-border);
}
.hw-reply-avatar {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 800;
  text-transform: uppercase;
  flex-shrink: 0;
}
.hw-reply-avatar-admin  { background: rgba(25,211,255,.15); color: var(--ha-cyan, #19d3ff); }
.hw-reply-avatar-client { background: rgba(139,92,246,.15); color: #c4b5fd; }
.hw-reply-meta { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.hw-reply-name { font-weight: 700; }
.hw-reply-role-badge {
  font-size: .7rem; font-weight: 700; padding: .15rem .55rem;
  background: rgba(25,211,255,.12); color: var(--ha-cyan, #19d3ff);
  border-radius: 99px;
}
.hw-reply-date { }
.hw-reply-body {
  padding: 1.25rem;
  line-height: 1.75;
}
.hw-reply-body p { margin: 0 0 .75rem; }
.hw-reply-body p:last-child { margin-bottom: 0; }
.hw-reply-attachments {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--ha-border);
  background: var(--ha-surface-2, #151f3d);
}
.hw-reply-attachment {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  color: var(--ha-cyan, #19d3ff);
  text-decoration: none;
  padding: .2rem .55rem;
  border-radius: 8px;
  background: rgba(25,211,255,.08);
  transition: background .18s;
}
.hw-reply-attachment:hover { background: rgba(25,211,255,.18); }
.hw-ticket-reply-form { margin-top: 1.5rem; }

/* File input */
.hw-file-input {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  background: var(--ha-surface-2, #151f3d);
  border: 1px dashed var(--ha-border);
  border-radius: 10px;
  font-size: .875rem;
  color: var(--ha-text, #f8fafc);
  cursor: pointer;
}
.hw-file-input:hover { border-color: var(--ha-cyan, #19d3ff); }

/* Textarea */
.hw-textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
  line-height: 1.6;
}

/* -- Responsive -------------------------------------------- */
@media (max-width: 768px) {
  .hw-domain-primary-result { flex-direction: column; align-items: flex-start; }
  .hw-dns-record-row { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .hw-dns-record-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ============================================================
   Hostavvy v5.1 - Client Area Dashboard & New Template Classes
   ============================================================ */

/* -- Text Utilities ------------------------------------------- */
.hw-mono    { font-family: 'Fira Code', 'Courier New', monospace; }
.hw-mono-sm { font-family: 'Fira Code', 'Courier New', monospace; font-size: .8125rem; }
.hw-table-link {
  color: var(--hw-indigo, #818cf8);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
.hw-table-link:hover { color: var(--ha-cyan, #19d3ff); }
.hw-amount-cell { font-weight: 700; font-variant-numeric: tabular-nums; }
.hw-table-card  { padding: 0 !important; overflow: hidden; }

/* -- Status badge additions ----------------------------------- */
.hw-status-suspended,
.hw-status-terminated,
.hw-status-expired        { background: rgba(239,68,68,.12);  color: #fb7185; }
.hw-status-transferred-away { background: var(--ha-surface-3, #1e2d4d); color: var(--hw-text-muted, #94a3b8); }

/* -- Alert compact variant ------------------------------------ */
.hw-alert--compact {
  padding: .5rem 1rem;
  margin: 0;
  font-size: .875rem;
}
.hw-alert-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  margin-left: .5rem;
  opacity: .9;
  transition: opacity .15s;
}
.hw-alert-link:hover { opacity: 1; }

/* -- Outline button ------------------------------------------- */
.hw-btn-outline {
  background: transparent;
  border: 1.5px solid var(--hw-indigo, #818cf8);
  color: var(--hw-indigo, #818cf8);
}
.hw-btn-outline:hover {
  background: rgba(129,140,248,.08);
}
.hw-btn-full { width: 100%; justify-content: center; }

/* -- Dashboard header ----------------------------------------- */
.hw-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.hw-dashboard-greeting {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.2;
  margin: 0 0 .35rem;
}
.hw-dashboard-wave { display: inline-block; }
.hw-dashboard-sub {
  font-size: .9375rem;
  color: var(--hw-text-muted, #94a3b8);
  margin: 0;
}

/* -- Stat grid ------------------------------------------------ */
.hw-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}
/* Override the older plain hw-stat-card with full layout */
.hw-stat-grid .hw-stat-card {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1.125rem 1.25rem;
}
.hw-stat-icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--hw-radius-md, 10px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.hw-stat-icon--blue    { background: rgba(99,102,241,.15); color: #818cf8; }
.hw-stat-icon--cyan    { background: rgba(25,211,255,.12); color: #19d3ff; }
.hw-stat-icon--green   { background: rgba(16,185,129,.12); color: #34d399; }
.hw-stat-icon--amber   { background: rgba(245,158,11,.12); color: #fcd34d; }
.hw-stat-icon--violet  { background: rgba(167,139,250,.15); color: #c4b5fd; }
.hw-stat-icon--emerald { background: rgba(52,211,153,.12); color: #6ee7b7; }
.hw-stat-body { flex: 1; min-width: 0; }
.hw-stat-value {
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--hw-text-primary);
}
.hw-stat-value--warn { color: #fb7185; }
.hw-stat-value--sm   { font-size: 1.125rem; }
.hw-stat-label {
  font-size: .8rem;
  color: var(--hw-text-muted, #94a3b8);
  margin-top: .25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.hw-stat-action {
  display: inline-block;
  font-size: .75rem;
  color: var(--hw-indigo, #818cf8);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
.hw-stat-action:hover { color: var(--ha-cyan, #19d3ff); }

/* -- Dashboard 2-col grid ------------------------------------- */
.hw-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* -- Card row header (title + view-all) ----------------------- */
.hw-card-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ha-border, rgba(148,163,184,.12));
}
.hw-card-view-all {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--hw-indigo, #818cf8);
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}
.hw-card-view-all:hover { color: var(--ha-cyan, #19d3ff); }
.hw-card-row-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* -- Item list rows ------------------------------------------- */
.hw-item-list { padding: .5rem 0; }
.hw-item-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--ha-border, rgba(148,163,184,.08));
  transition: background .15s;
}
.hw-item-row:last-child  { border-bottom: none; }
.hw-item-row:hover       { background: var(--ha-surface-2, rgba(255,255,255,.025)); }
.hw-item-icon {
  width: 2rem; height: 2rem;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem;
  flex-shrink: 0;
}
.hw-item-icon--server { background: rgba(99,102,241,.12); color: #818cf8; }
.hw-item-info  { flex: 1; min-width: 0; }
.hw-item-name  { font-weight: 600; font-size: .9375rem; color: var(--hw-text-primary); }
.hw-item-link  { text-decoration: none; transition: color .15s; }
.hw-item-link:hover { color: var(--ha-cyan, #19d3ff); }
.hw-item-sub   { font-size: .8125rem; color: var(--hw-text-muted, #94a3b8); margin-top: .1rem; }
.hw-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex-shrink: 0; }
.hw-item-amount { font-weight: 700; font-size: .9375rem; font-variant-numeric: tabular-nums; }

/* -- Card empty states ---------------------------------------- */
.hw-card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--hw-text-muted, #94a3b8);
  font-size: .9375rem;
}
.hw-card-empty i     { font-size: 1.5rem; opacity: .4; }
.hw-card-empty p     { margin: 0; }
.hw-card-empty--lg   { padding: 3rem 1.25rem; }
.hw-card-empty-icon--green { color: #34d399 !important; opacity: 1 !important; }

/* -- Quick links row ------------------------------------------ */
.hw-dashboard-quick-links {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .75rem;
  margin-top: 1.5rem;
}
.hw-quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem .75rem;
  background: var(--hw-surface-2, #151f3d);
  border: 1px solid var(--ha-border, rgba(148,163,184,.12));
  border-radius: var(--hw-radius-xl, 16px);
  text-decoration: none;
  color: var(--hw-text-primary);
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
  transition: background .18s, border-color .18s, transform .18s;
}
.hw-quick-link i {
  font-size: 1.25rem;
  color: var(--hw-indigo, #818cf8);
  transition: color .18s;
}
.hw-quick-link:hover {
  background: rgba(99,102,241,.1);
  border-color: var(--hw-indigo, #818cf8);
  transform: translateY(-2px);
}
.hw-quick-link:hover i { color: var(--ha-cyan, #19d3ff); }

/* -- Service cards (clientareaservices.tpl) ------------------- */
.hw-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.hw-service-card {
  background: var(--hw-surface-2, #151f3d);
  border: 1px solid var(--ha-border, rgba(148,163,184,.12));
  border-radius: var(--hw-radius-xl, 16px);
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: border-color .2s, transform .2s;
}
.hw-service-card:hover {
  border-color: var(--hw-indigo, #818cf8);
  transform: translateY(-2px);
}
.hw-service-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.hw-service-icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: 10px;
  background: rgba(99,102,241,.12);
  color: #818cf8;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.hw-service-name   { font-weight: 700; font-size: 1rem; }
.hw-service-domain { font-size: .8125rem; color: var(--hw-text-muted, #94a3b8); }
.hw-service-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hw-service-price {
  font-weight: 700;
  color: var(--hw-text-primary);
  font-size: .9375rem;
}

/* -- Domain-specific classes ---------------------------------- */
.hw-domain-name { font-weight: 600; }
.hw-expiry-warn {
  color: #fcd34d;
  font-weight: 600;
}
.hw-expiry-label {
  font-size: .6875rem;
  color: #fcd34d;
  margin-top: .2rem;
}
.hw-autorenew-badge { font-size: .8125rem; display: inline-flex; align-items: center; gap: .3rem; }
.hw-autorenew-on  { color: #34d399; }
.hw-autorenew-off { color: var(--hw-text-muted, #94a3b8); }

/* -- Auth page ------------------------------------------------ */
.hw-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.hw-form-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--hw-text-primary);
  margin-bottom: .4rem;
}
.hw-form-input {
  display: block;
  width: 100%;
  padding: .625rem .875rem;
  background: var(--ha-surface-2, #151f3d);
  border: 1px solid var(--ha-border, rgba(148,163,184,.18));
  border-radius: 10px;
  font-size: .9375rem;
  color: var(--ha-text, #f8fafc);
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.hw-form-input:focus {
  outline: none;
  border-color: var(--hw-indigo, #818cf8);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.hw-input-icon-wrap {
  position: relative;
}
.hw-input-icon-wrap .hw-input-icon {
  position: absolute;
  left: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hw-text-muted, #94a3b8);
  pointer-events: none;
}
.hw-input-icon-wrap .hw-form-input,
.hw-input-icon-wrap .hw-input {
  padding-left: 2.5rem;
}

/* -- Responsive adjustments ----------------------------------- */
@media (max-width: 1100px) {
  .hw-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .hw-dashboard-quick-links { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .hw-dashboard-grid { grid-template-columns: 1fr; }
  .hw-stat-grid      { grid-template-columns: repeat(2, 1fr); }
  .hw-dashboard-quick-links { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .hw-stat-grid      { grid-template-columns: 1fr 1fr; }
  .hw-service-grid   { grid-template-columns: 1fr; }
  .hw-dashboard-quick-links { grid-template-columns: repeat(2, 1fr); }
  .hw-dashboard-greeting { font-size: 1.375rem; }
  .hw-item-row { padding: .625rem 1rem; }
  .hw-card-row-header { padding: .875rem 1rem; }
}

/* Utility */
.hw-hidden { display: none !important; }
.sidebar-menu-item-icon-wrapper .loading { display: none; }
.hw-alert--mb { margin-bottom: 1.5rem; }
.hw-section-sub--cta { margin: 0 auto 2rem; }

/* -- Add Funds page -------------------------------------------- */
.hw-addfunds-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}
.hw-funds-presets {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .4rem;
}
.hw-funds-preset-btn {
  padding: .45rem 1.1rem;
  background: var(--hw-surface-2, #151f3d);
  border: 1.5px solid var(--ha-border, rgba(148,163,184,.18));
  border-radius: 99px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--hw-text-primary);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
.hw-funds-preset-btn:hover {
  background: rgba(99,102,241,.12);
  border-color: var(--hw-indigo, #818cf8);
  color: var(--hw-indigo, #818cf8);
}
.hw-payment-methods {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .4rem;
}
.hw-payment-method-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--hw-surface-2, #151f3d);
  border: 1.5px solid var(--ha-border, rgba(148,163,184,.18));
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.hw-payment-method-option:hover,
.hw-payment-method-option--selected { border-color: var(--hw-indigo, #818cf8); }
.hw-payment-method-option--selected { background: rgba(99,102,241,.06); }
.hw-radio { accent-color: var(--hw-indigo, #818cf8); }
.hw-payment-method-label { font-weight: 600; font-size: .9375rem; display: flex; align-items: center; gap: .5rem; }
.hw-addfunds-balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.25rem;
  gap: .3rem;
  text-align: center;
}
.hw-addfunds-balance-amount {
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -.05em;
  color: #34d399;
}
.hw-addfunds-benefits { margin-top: 1rem; }
.hw-benefits-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .5rem 1.25rem 1.25rem;
}
.hw-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  color: var(--hw-text-muted, #94a3b8);
  line-height: 1.5;
}
.hw-benefit-icon { color: #34d399; flex-shrink: 0; margin-top: .15rem; }

@media (max-width: 768px) {
  .hw-addfunds-layout { grid-template-columns: 1fr; }
}

/* -- Product / Service Detail page ---------------------------- */
.hw-product-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.5rem;
  align-items: start;
}
.hw-product-main    { display: flex; flex-direction: column; gap: 1.25rem; }
.hw-product-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.hw-product-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem 1.25rem 1.25rem;
}
.hw-product-stat-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hw-text-muted, #94a3b8);
  margin-bottom: .3rem;
}
.hw-product-stat-value { font-weight: 700; }
.hw-product-credentials {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem 1.25rem 1.25rem;
}
.hw-credential-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .625rem .875rem;
  background: var(--ha-surface-3, #1e2d4d);
  border-radius: 8px;
}
.hw-credential-label {
  font-size: .75rem;
  color: var(--hw-text-muted, #94a3b8);
  flex-shrink: 0;
}
.hw-credential-value {
  font-size: .875rem;
  background: none;
  color: var(--hw-text-primary);
  overflow-x: auto;
  max-width: 280px;
}
.hw-spec-rows { display: flex; flex-direction: column; }
.hw-spec-row {
  display: flex;
  justify-content: space-between;
  padding: .625rem 1.25rem;
  border-bottom: 1px solid var(--ha-border, rgba(148,163,184,.08));
  font-size: .875rem;
}
.hw-spec-row:last-child { border-bottom: none; }
.hw-spec-row-label { color: var(--hw-text-muted, #94a3b8); }
.hw-spec-row-value { font-weight: 600; }
.hw-product-actions-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .5rem 1.25rem 1.25rem;
}
.hw-product-quick-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem 1.25rem 1.25rem;
}
.hw-btn-danger { color: #fb7185 !important; }
.hw-btn-danger:hover { background: rgba(239,68,68,.08) !important; }
.hw-product-package-name {
  font-weight: 700;
  font-size: 1.0625rem;
  padding: .5rem 1.25rem 1.25rem;
}
.hw-client-page-sub {
  font-size: .875rem;
  color: var(--hw-text-muted, #94a3b8);
  margin-top: .2rem;
}

/* -- Account Details page -------------------------------------- */
.hw-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.hw-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.hw-security-options {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: .5rem 1.25rem 1.25rem;
}
.hw-security-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem;
  background: var(--ha-surface-3, #1e2d4d);
  border-radius: 10px;
}
.hw-security-option-name { font-weight: 700; font-size: .9rem; }
.hw-security-option-desc { font-size: .8125rem; color: var(--hw-text-muted, #94a3b8); margin-top: .15rem; }
.hw-inline-form { display: inline; }

@media (max-width: 900px) {
  .hw-product-layout { grid-template-columns: 1fr; }
  .hw-details-grid   { grid-template-columns: 1fr; }
  .hw-product-overview-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hw-form-row { grid-template-columns: 1fr; }
  .hw-product-overview-grid { grid-template-columns: 1fr; }
}

/* -- Affiliate dashboard --------------------------------------- */
.hw-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hw-stat-value--amber { color: #fcd34d; }
.hw-stat-value--green { color: #34d399; }
.hw-affiliate-link-hint {
  font-size: .8125rem;
  color: var(--hw-text-muted, #94a3b8);
  margin: .625rem 0 0;
}
.hw-withdrawal-form { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding: .5rem 1.25rem 1.25rem; }
.hw-form-group--inline { flex: 1; min-width: 140px; }
.hw-input-sm { max-width: 200px; }
.hw-empty-state--card {
  background: var(--hw-surface-2, #151f3d);
  border: 1px solid var(--ha-border, rgba(148,163,184,.12));
  border-radius: var(--hw-radius-xl, 16px);
  padding: 3rem 2rem;
}

/* -- Misc utility / badge helpers ------------------------------ */
.hw-badge--ml        { margin-left: .4rem; }
.hw-badge-danger     { background: rgba(239,68,68,.12); color: #fb7185; }
.hw-badge-warning    { background: rgba(245,158,11,.12); color: #fcd34d; }
.hw-text-red         { color: #fb7185; }
.hw-text-amber       { color: #fcd34d; }
.hw-text-muted       { color: var(--hw-text-muted, #94a3b8); }
.hw-text-center      { text-align: center; }
.hw-mb-5             { margin-bottom: 1.25rem; }
.hw-mb-8             { margin-bottom: 2rem; }
.hw-mt-2             { margin-top: .5rem; }
.hw-th-checkbox      { width: 2.5rem; }
.hw-row-warning      { background: rgba(245,158,11,.04); }
.hw-checkbox         { accent-color: var(--hw-indigo, #818cf8); width: 1rem; height: 1rem; cursor: pointer; }

/* -- viewticket.tpl state helpers ------------------------------ */
.hw-empty-state--compact { padding: 2rem 0; }
.hw-account-card--centered { text-align: center; padding: 1.5rem; }
.hw-icon-success     { color: #34d399; }
.hw-icon-lg          { font-size: 1.5rem; margin-bottom: .5rem; display: block; }

/* -- contact.tpl success + alert list -------------------------- */
.hw-contact-success  { text-align: center; padding: 2.5rem 1rem; }
.hw-contact-success h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.hw-contact-success p  { color: var(--hw-text-muted, #94a3b8); margin-bottom: 1.25rem; }
.hw-alert-list       { margin: .25rem 0 0 1.25rem; padding: 0; list-style: disc; }
.hw-alert-list li    { margin-bottom: .2rem; }

/* -- Service preview banner (hostavvy-*.tpl v6.0 service pages) --- */
.hw-coming-soon-banner {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .9rem;
    background: rgba(245,158,11,.12);
    color: #fcd34d;
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 99px;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: 1rem;
}

/* -- Trust bar (hostavvy-shared-hosting.tpl) -------------------- */
.hw-trust-bar {
    background: rgba(8,13,31,.72);
    border-top: 1px solid rgba(148,163,184,.1);
    border-bottom: 1px solid rgba(148,163,184,.1);
    padding: 1rem 0;
}
.hw-trust-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}
.hw-trust-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--hw-text-muted, #94a3b8);
    white-space: nowrap;
}
.hw-trust-item i {
    color: #34d399;
    font-size: .875rem;
}

/* -- Stats row (shared-hosting social proof) -------------------- */
.hw-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
    text-align: center;
}
.hw-stat-card--flat {
    padding: 1.5rem 1rem;
    background: rgba(15,23,42,.5);
    border: 1px solid rgba(148,163,184,.1);
    border-radius: 14px;
}
.hw-stat-card--flat .hw-stat-value {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #19d3ff, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: .35rem;
}
.hw-stat-card--flat .hw-stat-label {
    font-size: .8125rem;
    color: var(--hw-text-muted, #94a3b8);
    font-weight: 500;
}

/* -- Fine-print below CTA buttons ----------------------------- */
.hw-section-fine-print {
    margin-top: 1rem;
    font-size: .8125rem;
    color: var(--hw-text-muted, #94a3b8);
    text-align: center;
}

/* ============================================================
   Hostavvy v5.2 refinement layer
   Premium polish without changing WHMCS behavior or page flow.
   ============================================================ */

:root {
  --ha-surface-glass: rgba(10, 16, 36, .78);
  --ha-surface-raised: rgba(16, 24, 48, .94);
  --ha-surface-hover: rgba(22, 34, 67, .98);
  --ha-line-soft: rgba(148, 163, 184, .14);
  --ha-line-bright: rgba(25, 211, 255, .36);
  --ha-shadow-soft: 0 18px 42px rgba(2, 6, 23, .24);
  --ha-shadow-strong: 0 26px 72px rgba(2, 6, 23, .38);
  --ha-cyan-soft: rgba(25, 211, 255, .13);
  --ha-blue-soft: rgba(47, 128, 255, .16);
  --ha-green-soft: rgba(34, 197, 94, .12);
}

body {
  text-rendering: optimizeLegibility;
  background:
    linear-gradient(180deg, rgba(7, 12, 30, 1) 0%, rgba(5, 8, 22, 1) 58%, rgba(4, 7, 18, 1) 100%);
}

#main-body,
.hw-client-main {
  background:
    linear-gradient(180deg, rgba(10, 16, 36, .72), rgba(5, 8, 22, .98));
}

.container {
  max-width: 1180px;
}

.hw-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.hw-section-sm {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}

.hw-section-alt {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .58), rgba(7, 12, 30, .72));
  border-top: 1px solid rgba(148, 163, 184, .06);
  border-bottom: 1px solid rgba(148, 163, 184, .06);
}

.hw-section-header {
  margin-bottom: 2.75rem;
}

.hw-section-title,
.hw-page-hero-title,
.hw-hero-title {
  letter-spacing: 0;
}

.hw-section-sub,
.hw-page-hero-sub,
.hw-hero-sub {
  color: #c6d3e3 !important;
}

.hw-eyebrow {
  border-color: var(--ha-line-bright);
  background: linear-gradient(135deg, rgba(25, 211, 255, .12), rgba(139, 92, 246, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.ha-header {
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  background: rgba(5, 8, 22, .84);
  box-shadow: 0 10px 34px rgba(2, 6, 23, .18);
}

.ha-header-inner {
  min-height: 78px;
  gap: 1rem;
}

.ha-logo-img {
  max-height: 34px;
}

.ha-nav {
  gap: .2rem;
}

.ha-nav-link {
  min-height: 40px;
  padding: .55rem .8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #dbeafe;
  font-weight: 700;
  letter-spacing: 0;
}

.ha-nav-link:hover,
.ha-nav-item:focus-within > .ha-nav-link {
  color: #ffffff;
  background: rgba(25, 211, 255, .08);
  border-color: rgba(25, 211, 255, .2);
}

.ha-mega {
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: linear-gradient(180deg, rgba(13, 20, 42, .98), rgba(8, 13, 31, .98));
  box-shadow: 0 24px 60px rgba(2, 6, 23, .42);
}

.ha-mega-card {
  min-height: 86px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .62);
  border-color: rgba(148, 163, 184, .12);
}

.ha-mega-card:hover {
  background: rgba(25, 211, 255, .08);
  border-color: rgba(25, 211, 255, .28);
}

.ha-icon-btn,
.hw-theme-toggle,
.ha-mobile-toggle {
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.ha-icon-btn:hover,
.hw-theme-toggle:hover,
.ha-mobile-toggle:hover {
  border-color: rgba(25, 211, 255, .32);
  background: rgba(25, 211, 255, .1);
}

.hw-announce-bar {
  background: linear-gradient(90deg, rgba(25, 211, 255, .14), rgba(47, 128, 255, .18), rgba(139, 92, 246, .13));
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}

.hw-hero {
  padding: 7rem 0 5.75rem;
  min-height: 0;
  border-bottom: 1px solid rgba(148, 163, 184, .08);
}

.hw-hero .container {
  position: relative;
  z-index: 2;
}

.hw-hero-inner {
  max-width: 820px;
}

.hw-hero-title {
  max-width: 780px;
  margin-bottom: 1.3rem;
  font-size: 4.25rem;
  line-height: 1.04;
}

.hw-hero-sub {
  max-width: 700px;
  font-size: 1.12rem;
  line-height: 1.75;
}

.hw-hero-actions {
  gap: .85rem;
  margin-top: 2rem;
}

.hw-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
}

.hw-hero-trust-item,
.hw-trust-item {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 999px;
  background: rgba(10, 16, 36, .62);
  color: #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.hw-hero-trust-item {
  padding: .55rem .85rem;
  font-size: .9rem;
  font-weight: 700;
}

.hw-hero-trust-item i,
.hw-trust-item i {
  color: #67e8f9;
}

.hw-btn {
  min-height: 42px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: none;
}

.hw-btn-primary,
.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 52%, #7c3aed 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 32px rgba(37, 99, 235, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.hw-btn-primary:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(37, 99, 235, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.hw-btn-ghost,
.hw-btn-outline,
.hw-btn-outline-white,
.btn-default,
.btn-secondary {
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(15, 23, 42, .64) !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.hw-btn-ghost:hover,
.hw-btn-outline:hover,
.hw-btn-outline-white:hover,
.btn-default:hover,
.btn-secondary:hover {
  border-color: rgba(25, 211, 255, .28) !important;
  background: rgba(25, 211, 255, .09) !important;
  color: #ffffff !important;
}

.hw-product-card,
.hw-feature-card,
.hw-info-card,
.hw-testimonial-card,
.hw-plan-card,
.hw-card,
.hw-account-card,
.hw-stat-card,
.hw-quick-link,
.ha-card,
.ha-price-card {
  position: relative;
  border: 1px solid var(--ha-line-soft);
  background:
    linear-gradient(180deg, rgba(18, 28, 56, .94), rgba(9, 14, 33, .94));
  box-shadow: var(--ha-shadow-soft);
  overflow: hidden;
}

.hw-product-card::before,
.hw-feature-card::before,
.hw-info-card::before,
.hw-testimonial-card::before,
.hw-plan-card::before,
.hw-account-card::before,
.hw-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25, 211, 255, .42), transparent);
  pointer-events: none;
}

.hw-product-card:hover,
.hw-feature-card:hover,
.hw-info-card:hover,
.hw-testimonial-card:hover,
.hw-plan-card:hover,
.hw-card:hover,
.hw-account-card:hover,
.hw-quick-link:hover,
.ha-card:hover,
.ha-price-card:hover {
  transform: translateY(-3px);
  border-color: rgba(25, 211, 255, .3);
  background:
    linear-gradient(180deg, rgba(22, 34, 67, .98), rgba(10, 16, 36, .98));
  box-shadow: var(--ha-shadow-strong);
}

.hw-product-icon,
.hw-feature-icon,
.hw-info-icon,
.hw-contact-channel-icon,
.hw-stat-icon {
  border: 1px solid rgba(148, 163, 184, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 28px rgba(2, 6, 23, .22);
}

.hw-product-name,
.hw-feature-title,
.hw-plan-name,
.hw-account-card-title {
  color: #f8fafc;
  letter-spacing: 0;
}

.hw-product-desc,
.hw-feature-desc,
.hw-plan-desc,
.hw-info-card p {
  color: #b8c5d8;
}

.hw-product-link {
  color: #67e8f9;
  font-weight: 800;
}

.hw-plan-card {
  min-height: 100%;
}

.hw-plan-card.hw-plan-featured,
.hw-plan-card.featured,
.hw-plan-card-featured {
  border-color: rgba(25, 211, 255, .42);
  background:
    linear-gradient(180deg, rgba(28, 39, 76, .98), rgba(11, 17, 38, .98));
  box-shadow: 0 24px 70px rgba(37, 99, 235, .22);
}

.hw-plan-card.hw-plan-featured::after,
.hw-plan-card.featured::after,
.hw-plan-card-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.hw-plan-price {
  color: #f8fafc;
}

.hw-plan-feature {
  color: #d7e2f2;
}

.hw-plan-feature i {
  color: #34d399;
}

.hw-plan-badge,
.ha-badge,
.hw-status-badge {
  border: 1px solid rgba(25, 211, 255, .22);
  background: rgba(25, 211, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.hw-domain-search-wrap {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.hw-domain-search-bar {
  border: 1px solid rgba(25, 211, 255, .28);
  background: rgba(7, 12, 30, .78);
  box-shadow: 0 22px 56px rgba(2, 6, 23, .28);
}

.hw-domain-search-bar input {
  color: #f8fafc;
}

.hw-domain-search-bar button {
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  box-shadow: 0 14px 32px rgba(37, 99, 235, .24);
-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.hw-btn-ghost:hover,
.hw-btn-outline:hover,
.hw-btn-outline-white:hover,
.btn-default:hover,
.btn-secondary:hover {
  background: rgba(37, 99, 235, .08) !important;
  border-color: rgba(148, 163, 184, .3) !important;
  transform: translateY(-1px);
}

/* ============================================================
   CODEX ADDITIONS: Plan card extras + CRO micro-proof
   ============================================================ */

.hw-plan-fit {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: .25rem;
}

.hw-plan-microcopy {
  font-size: .78rem;
  color: #94a3b8;
  line-height: 1.45;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(148, 163, 184, .1);
}

.hw-plan-guarantee {
  font-size: .72rem;
  color: #94a3b8;
  margin-top: .5rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.hw-plan-guarantee i {
  color: #22c55e;
}

.hw-cro-mini-proof {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.hw-cro-mini-proof span {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: #94a3b8;
}

.hw-cro-mini-proof img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: .8;
}

/* ============================================================
   CHECKOUT: Codex confidence strip + submit note
   ============================================================ */

.hw-checkout-confidence {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: rgba(15, 23, 42, .55);
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: .75rem;
}

.hw-checkout-confidence--wide {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-start;
}

.hw-checkout-confidence-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  flex: 1 1 220px;
}

.hw-checkout-confidence-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: .1rem;
  opacity: .85;
}

.hw-checkout-confidence-item span {
  font-size: .82rem;
  color: #94a3b8;
  line-height: 1.5;
}

.hw-checkout-submit-note {
  font-size: .78rem;
  color: #94a3b8;
  text-align: center;
  margin-top: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.hw-checkout-submit-note i {
  color: #22c55e;
  font-size: .8rem;
}

@media (max-width: 640px) {
  .hw-checkout-confidence--wide {
    flex-direction: column;
  }
  .hw-cro-mini-proof {
    gap: .5rem 1rem;
  }
}

/* ============================================================
   HOSTAVVY NAV v6.1 - DEFINITIVE NAVIGATION & MENU STYLES
   Fixes: mega layout, hover dead-zone, logo sizing, mobile nav,
   hw-theme-toggle, announce bar, section headers, grid variants
   ============================================================ */

/* Logo anchor + image */
.ha-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none !important;
  outline-offset: 4px;
}
.ha-logo-img {
  height: 36px;
  max-height: 36px;
  width: auto;
  display: block;
  transition: height .25s ease;
}
.ha-header--scrolled .ha-logo-img {
  height: 30px;
}

/* Header base */
.ha-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1040 !important;
  background: rgba(5, 8, 22, .92) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 2px 20px rgba(2, 6, 23, .2) !important;
  transition: box-shadow .25s ease, background .25s ease !important;
}
.ha-header--scrolled {
  background: rgba(5, 8, 22, .97) !important;
  box-shadow: 0 4px 32px rgba(2, 6, 23, .5) !important;
}

/* Header inner row */
.ha-header-inner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 72px !important;
  padding: 0 !important;
}

/* Desktop nav row */
.ha-nav {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
}

/* Nav item container */
.ha-nav-item {
  position: relative !important;
}

/* Bridge: keeps hover alive while mouse travels to mega panel */
.ha-nav-item::after {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -10px;
  height: 10px;
  background: transparent;
}

/* Nav link pill */
.ha-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #dbeafe !important;
  font-size: .875rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}
.ha-nav-link:hover,
.ha-nav-item:focus-within > .ha-nav-link,
.ha-nav-item.is-open > .ha-nav-link {
  background: rgba(25, 211, 255, .09) !important;
  border-color: rgba(25, 211, 255, .2) !important;
  color: #19d3ff !important;
}

/* Chevron rotation on open */
.ha-nav-link .fa-chevron-down {
  font-size: .65em;
  opacity: .65;
  transition: transform .2s ease, opacity .2s ease;
}
.ha-nav-item:hover > .ha-nav-link .fa-chevron-down,
.ha-nav-item:focus-within > .ha-nav-link .fa-chevron-down,
.ha-nav-item.is-open > .ha-nav-link .fa-chevron-down {
  transform: rotate(180deg);
  opacity: 1;
}

/* Mega menu panel */
.ha-mega {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  width: min(720px, calc(100vw - 24px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 20px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(13, 20, 42, .99), rgba(5, 8, 22, .99)) !important;
  box-shadow: 0 24px 60px rgba(2, 6, 23, .5) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  z-index: 1050 !important;
}

/* Show states */
.ha-nav-item:hover > .ha-mega,
.ha-nav-item:focus-within > .ha-mega,
.ha-nav-item.is-open > .ha-mega {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Right-align for last nav items (Support) */
.ha-nav-item:last-child > .ha-mega,
.ha-nav-item:nth-last-child(2) > .ha-mega {
  left: auto !important;
  right: 0 !important;
  width: min(560px, calc(100vw - 24px)) !important;
}

/* Mega section labels */
.hw-mega-section {
  display: block;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #64748b;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
  margin-bottom: 12px;
}
.hw-mega-section--spaced {
  margin-top: 20px;
  padding-top: 0;
  margin-bottom: 12px;
}

/* Card grid inside mega */
.ha-mega-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.ha-mega-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Individual mega card */
.ha-mega-card {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 11px !important;
  row-gap: 2px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(148, 163, 184, .1) !important;
  border-radius: 16px !important;
  background: rgba(15, 23, 42, .5) !important;
  color: #e2e8f0 !important;
  text-decoration: none !important;
  transition: transform .15s ease, border-color .15s ease, background .15s ease !important;
}
.ha-mega-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(25, 211, 255, .28) !important;
  background: rgba(25, 211, 255, .07) !important;
  color: #f8fafc !important;
}
.ha-mega-card i {
  grid-row: 1 / 3 !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(25,211,255,.14), rgba(139,92,246,.16)) !important;
  color: #19d3ff !important;
  font-size: 1rem !important;
  align-self: center !important;
}
.ha-mega-card span {
  font-weight: 800 !important;
  font-size: .875rem !important;
  color: #f1f5f9 !important;
  align-self: end !important;
}
.ha-mega-card small {
  font-size: .75rem !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  align-self: start !important;
}

/* Header action buttons */
.ha-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

/* Icon buttons (cart, account) */
.ha-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, .72) !important;
  color: #dbeafe !important;
  position: relative !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease !important;
}
.ha-icon-btn:hover {
  background: rgba(25, 211, 255, .1) !important;
  border-color: rgba(25, 211, 255, .3) !important;
  color: #19d3ff !important;
}

/* Cart badge */
.ha-cart-count {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  min-width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #19d3ff, #8b5cf6) !important;
  color: #fff !important;
  font-size: .66rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  padding: 0 3px !important;
}

/* Theme toggle */
.hw-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, .72) !important;
  color: #dbeafe !important;
  cursor: pointer !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease !important;
  font-size: .95rem !important;
}
.hw-theme-toggle:hover {
  background: rgba(25, 211, 255, .1) !important;
  border-color: rgba(25, 211, 255, .3) !important;
  color: #19d3ff !important;
}

/* Mobile hamburger toggle */
.ha-mobile-toggle {
  display: none !important;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, .72) !important;
  color: #dbeafe !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease !important;
  flex-shrink: 0 !important;
}
.ha-mobile-toggle:hover {
  background: rgba(25, 211, 255, .1) !important;
  border-color: rgba(25, 211, 255, .3) !important;
  color: #19d3ff !important;
}

/* Announce bar */
.hw-announce-bar {
  position: relative !important;
  z-index: 1035 !important;
  background: linear-gradient(90deg, rgba(37,99,235,.85) 0%, rgba(79,70,229,.88) 50%, rgba(139,92,246,.82) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: blur(8px) !important;
  padding: 10px 48px 10px 24px !important;
  text-align: center !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
  color: #fff !important;
  line-height: 1.5 !important;
}
.hw-announce-bar a {
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  white-space: nowrap !important;
}
.hw-announce-bar a:hover { color: #e0e7ff !important; }
.hw-announce-close {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,.7) !important;
  cursor: pointer !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  padding: 6px 7px !important;
  border-radius: 6px !important;
  transition: color .15s ease, background .15s ease !important;
}
.hw-announce-close:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
}

/* Mobile nav shown under 1200px */
@media (max-width: 1199.98px) {
  .ha-nav { display: none !important; }
  .ha-mobile-toggle { display: inline-flex !important; }

  .ha-mobile-nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 8px !important;
    right: 8px !important;
    display: none !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 12px !important;
    max-height: calc(100svh - 100px) !important;
    overflow-y: auto !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 20px !important;
    background: rgba(5, 8, 22, .98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .55) !important;
    z-index: 1039 !important;
  }
  .ha-mobile-nav.is-open { display: flex !important; }

  .ha-mobile-nav a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    color: #dbeafe !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease !important;
  }
  .ha-mobile-nav a:hover {
    background: rgba(25, 211, 255, .09) !important;
    color: #19d3ff !important;
  }
  .ha-mobile-nav a i {
    width: 20px !important;
    text-align: center !important;
    color: #19d3ff !important;
    opacity: .8 !important;
    flex-shrink: 0 !important;
  }
  .ha-mobile-nav-section {
    padding: 14px 14px 6px !important;
    color: #475569 !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
  }

  .ha-header-inner { gap: 10px !important; }
  .ha-header-actions { gap: 6px !important; }
}

@media (max-width: 575.98px) {
  .hw-announce-bar {
    font-size: .78rem !important;
    padding-left: 12px !important;
  }
  .ha-header-inner { min-height: 64px !important; }
  .ha-logo-img { height: 30px !important; max-height: 30px !important; }
  .ha-header-actions .hw-btn-ghost,
  .ha-header-actions .hw-btn-primary,
  .ha-header-actions .hw-btn-sm { display: none !important; }
}

/* Light theme nav overrides */
[data-theme="light"] .ha-header {
  background: rgba(248, 250, 252, .95) !important;
  border-bottom-color: rgba(15, 23, 42, .1) !important;
  box-shadow: 0 2px 16px rgba(15, 23, 42, .08) !important;
}
[data-theme="light"] .ha-header--scrolled {
  background: rgba(248, 250, 252, .99) !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, .12) !important;
}
[data-theme="light"] .ha-nav-link { color: #1e293b !important; }
[data-theme="light"] .ha-nav-link:hover,
[data-theme="light"] .ha-nav-item:focus-within > .ha-nav-link,
[data-theme="light"] .ha-nav-item.is-open > .ha-nav-link {
  color: #2563eb !important;
  background: rgba(37, 99, 235, .07) !important;
  border-color: rgba(37, 99, 235, .2) !important;
}
[data-theme="light"] .ha-mega {
  background: linear-gradient(180deg, #fff, #f8fafc) !important;
  border-color: rgba(15, 23, 42, .12) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .14) !important;
}
[data-theme="light"] .ha-mega-card {
  background: rgba(15, 23, 42, .03) !important;
  border-color: rgba(15, 23, 42, .08) !important;
  color: #1e293b !important;
}
[data-theme="light"] .ha-mega-card:hover {
  background: rgba(37, 99, 235, .06) !important;
  border-color: rgba(37, 99, 235, .2) !important;
}
[data-theme="light"] .ha-mega-card span { color: #0f172a !important; }
[data-theme="light"] .ha-mega-card small { color: #64748b !important; }
[data-theme="light"] .hw-mega-section {
  color: #94a3b8 !important;
  border-bottom-color: rgba(15,23,42,.08) !important;
}
[data-theme="light"] .ha-icon-btn,
[data-theme="light"] .hw-theme-toggle,
[data-theme="light"] .ha-mobile-toggle {
  background: rgba(15, 23, 42, .05) !important;
  border-color: rgba(15, 23, 42, .12) !important;
  color: #1e293b !important;
}
[data-theme="light"] .ha-icon-btn:hover,
[data-theme="light"] .hw-theme-toggle:hover,
[data-theme="light"] .ha-mobile-toggle:hover {
  background: rgba(37, 99, 235, .08) !important;
  border-color: rgba(37, 99, 235, .25) !important;
  color: #2563eb !important;
}
[data-theme="light"] .ha-mobile-nav {
  background: rgba(255, 255, 255, .98) !important;
  border-color: rgba(15, 23, 42, .1) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .16) !important;
}
[data-theme="light"] .ha-mobile-nav a { color: #1e293b !important; }
[data-theme="light"] .ha-mobile-nav a:hover {
  background: rgba(37,99,235,.06) !important;
  color: #2563eb !important;
}
[data-theme="light"] .ha-mobile-nav a i { color: #2563eb !important; }
[data-theme="light"] .ha-mobile-nav-section { color: #94a3b8 !important; }
[data-theme="light"] .hw-announce-bar {
  background: linear-gradient(90deg, rgba(37,99,235,.9), rgba(79,70,229,.88), rgba(124,58,237,.85)) !important;
}

/* end nav v6.1 */

/* ============================================================
   HOSTAVVY CART / ORDERFORM — v6.2
   Complete styles for viewcart, checkout, products, configure
   ============================================================ */

/* --- Layout scaffold --- */
#order-standard_cart { padding: 0 0 60px; }
#order-standard_cart .row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.cart-sidebar { padding: 0 12px; width: 260px; min-width: 220px; flex-shrink: 0; }
.cart-body { flex: 1 1 0; padding: 0 12px; min-width: 0; }
@media (max-width: 768px) {
  .cart-sidebar { width: 100%; order: 2; }
  .cart-body { width: 100%; order: 1; }
}

/* --- Header --- */
.header-lined { border-bottom: 2px solid rgba(148,163,184,.15); margin-bottom: 24px; padding-bottom: 12px; }
.header-lined h1.font-size-36 { font-size: 2rem; font-weight: 700; color: var(--hw-text-primary, #f1f5f9); margin: 0; }

/* --- Cart body two-column (items + summary sidebar) --- */
.secondary-cart-body { flex: 1 1 0; min-width: 0; padding-right: 24px; }
.secondary-cart-sidebar { width: 300px; flex-shrink: 0; }
@media (max-width: 900px) {
  .secondary-cart-body { padding-right: 0; width: 100%; }
  .secondary-cart-sidebar { width: 100%; margin-top: 24px; }
}

/* --- Order summary box --- */
.order-summary { background: rgba(15,23,42,.7); border: 1px solid rgba(148,163,184,.15); border-radius: 16px; padding: 24px; position: sticky; top: 90px; }
.order-summary h2.font-size-30 { font-size: 1.35rem; font-weight: 700; color: var(--hw-text-primary, #f1f5f9); margin: 0 0 16px; }
.summary-container { display: flex; flex-direction: column; gap: 12px; }
.order-summary .subtotal { display: flex; justify-content: space-between; font-size: .9rem; color: var(--hw-text-muted, #94a3b8); padding-bottom: 8px; border-bottom: 1px solid rgba(148,163,184,.1); }
.bordered-totals { border-top: 1px solid rgba(148,163,184,.1); border-bottom: 1px solid rgba(148,163,184,.1); padding: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.bordered-totals .clearfix { display: flex; justify-content: space-between; font-size: .85rem; color: var(--hw-text-muted, #94a3b8); }
.recurring-totals { display: flex; justify-content: space-between; font-size: .85rem; color: var(--hw-text-muted, #94a3b8); }
.recurring-totals .cost { color: var(--hw-text-primary, #f1f5f9); font-weight: 600; }
.total-due-today { background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.3); border-radius: 10px; padding: 14px 16px; text-align: center; }
.total-due-today .amt { display: block; font-size: 1.6rem; font-weight: 800; color: #818cf8; }
.total-due-today span:last-child { font-size: .8rem; color: var(--hw-text-muted, #94a3b8); text-transform: uppercase; letter-spacing: .05em; }
#orderSummaryLoader { text-align: center; padding: 8px; color: var(--hw-text-muted, #94a3b8); }

/* --- Checkout + continue buttons in summary --- */
.btn-checkout { display: block; width: 100%; margin-top: 12px; font-weight: 700; font-size: 1rem; padding: 12px 20px; border-radius: 10px; }
.btn-continue-shopping { display: block; text-align: center; margin-top: 8px; font-size: .82rem; color: var(--hw-text-muted, #94a3b8) !important; }
.btn-continue-shopping:hover { color: #818cf8 !important; }

/* --- Express checkout --- */
.express-checkout-buttons { display: flex; flex-direction: column; gap: 10px; }
.express-checkout-buttons .separator { text-align: center; font-size: .75rem; color: var(--hw-text-muted, #94a3b8); padding: 4px 0; }

/* --- Cart items list --- */
.view-cart-items-header { background: rgba(148,163,184,.06); border-radius: 8px 8px 0 0; padding: 10px 14px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hw-text-muted, #94a3b8); }
.view-cart-items { border: 1px solid rgba(148,163,184,.12); border-radius: 0 0 10px 10px; overflow: hidden; }
.view-cart-items .item { padding: 14px 16px; border-bottom: 1px solid rgba(148,163,184,.08); transition: background .15s; }
.view-cart-items .item:last-child { border-bottom: none; }
.view-cart-items .item:hover { background: rgba(148,163,184,.04); }
.item-title { display: block; font-weight: 600; color: var(--hw-text-primary, #f1f5f9); font-size: .95rem; }
.item-group { display: block; font-size: .78rem; color: var(--hw-text-muted, #94a3b8); margin-top: 2px; }
.item-domain { display: block; font-size: .82rem; color: #818cf8; font-family: monospace; margin-top: 2px; }
.item-price { text-align: right; font-weight: 700; color: var(--hw-text-primary, #f1f5f9); font-size: .9rem; }
.item-price .cycle { display: block; font-size: .75rem; font-weight: 400; color: var(--hw-text-muted, #94a3b8); }
.view-cart-empty { padding: 40px 20px; text-align: center; color: var(--hw-text-muted, #94a3b8); font-size: .9rem; }
.empty-cart { padding: 10px 16px; text-align: right; border-top: 1px solid rgba(148,163,184,.08); }
.btn-remove-from-cart { color: rgba(148,163,184,.5) !important; padding: 2px 6px !important; }
.btn-remove-from-cart:hover { color: #f87171 !important; }
.row-upgrade-credit .item-group { font-style: italic; }
.upgrade-calc-msg { font-size: .75rem; color: var(--hw-text-muted, #94a3b8); }

/* --- Promo / tax tabs --- */
.view-cart-tabs { margin-top: 20px; }
.view-cart-tabs .nav-tabs { border-bottom: 1px solid rgba(148,163,184,.15); }
.view-cart-tabs .nav-tabs .nav-link { color: var(--hw-text-muted, #94a3b8); border: none; border-bottom: 2px solid transparent; padding: 8px 16px; font-size: .85rem; }
.view-cart-tabs .nav-tabs .nav-link.active { color: #818cf8; border-bottom-color: #818cf8; background: transparent; }
.view-cart-tabs .tab-content { padding: 16px; background: rgba(15,23,42,.5); border: 1px solid rgba(148,163,184,.1); border-top: none; border-radius: 0 0 10px 10px; }
.view-cart-promotion-code { background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.25); border-radius: 8px; padding: 10px 14px; font-size: .85rem; color: #818cf8; margin-bottom: 10px; }
.view-cart-gateway-checkout { margin: 16px 0; }

/* --- Already registered / checkout controls --- */
.already-registered { background: rgba(148,163,184,.05); border: 1px solid rgba(148,163,184,.1); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; }
.already-registered p { margin: 0; font-size: .88rem; color: var(--hw-text-muted, #94a3b8); }
.checkout-error-feedback { margin-bottom: 16px; }
.checkout-error-feedback ul { margin: 0; padding-left: 18px; }
.checkout-security-msg { margin-top: 20px; font-size: .82rem; }

/* --- Sub-headings (section separators in checkout) --- */
.sub-heading { margin: 24px 0 14px; }
.sub-heading .primary-bg-color { display: inline-block; background: linear-gradient(135deg, #6366f1, #818cf8); color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 4px 12px; border-radius: 20px; }

/* --- Payment gateway area --- */
#paymentGatewaysContainer { margin-bottom: 16px; }
#paymentGatewaysContainer .radio-inline { margin: 4px 8px; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; cursor: pointer; }
.gateway-errors { margin-top: 8px; }
#paymentGatewayInput { min-height: 0; }
.cc-input-container { background: rgba(15,23,42,.5); border: 1px solid rgba(148,163,184,.12); border-radius: 10px; padding: 20px; margin-top: 12px; }
.existing-cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cvv-input { margin-bottom: 12px; }
.apply-credit-container { background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.2); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; font-size: .88rem; }
.apply-credit-container .radio { margin: 6px 0; }

/* --- Password strength --- */
.password-strength-meter { margin-top: 8px; }
.password-strength-meter .progress { height: 8px; border-radius: 4px; background: rgba(148,163,184,.15); }
.password-strength-meter .progress-bar { border-radius: 4px; transition: width .3s; }
#passwordStrengthTextLabel { margin-top: 4px; font-size: .75rem; }

/* --- Marketing opt-in --- */
.marketing-email-optin { background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.15); border-radius: 10px; padding: 16px; margin: 16px 0; }
.marketing-email-optin h4 { font-size: 1rem; font-weight: 700; color: var(--hw-text-primary, #f1f5f9); margin: 0 0 6px; }
.marketing-email-optin p { font-size: .85rem; color: var(--hw-text-muted, #94a3b8); margin: 0 0 10px; }

/* --- Order confirmation (complete.tpl) --- */
.order-confirmation { font-size: 1.1rem; font-weight: 700; text-align: center; }
.order-confirmation span { color: #818cf8; }
.order-confirmation-addon-output { margin: 12px 0; }

/* --- Cart trust strip (viewcart sidebar) --- */
.hw-cart-trust { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(148,163,184,.1); }
.hw-cart-trust span { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--hw-text-muted, #94a3b8); }
.hw-cart-trust i { color: #4ade80; font-size: .8rem; }

/* --- Responsive cart adjustments --- */
@media (max-width: 640px) {
  .header-lined h1.font-size-36 { font-size: 1.4rem; }
  .view-cart-items-header { display: none; }
  .item-price { font-size: .85rem; }
  .order-summary { position: static; margin-top: 24px; }
  .btn-checkout { font-size: .9rem; padding: 10px; }
}

/* ============================================================
   HOSTAVVY v6.3 — PREMIUM VISUAL OVERHAUL
   World-class hosting aesthetic: deep space + electric accents
   All missing hw-* classes + full design system elevation
   ============================================================ */

/* --- DESIGN TOKEN SUPPLEMENTS --- */
:root {
  --hw-bg:         #03071a;
  --hw-bg-soft:    #060c20;
  --hw-surface:    #0d1530;
  --hw-surface-2:  #111d3a;
  --hw-border:     rgba(148,163,184,.14);
  --hw-border-glow:rgba(99,102,241,.45);
  --hw-text:       #f1f5f9;
  --hw-muted:      #94a3b8;
  --hw-cyan:       #38bdf8;
  --hw-indigo:     #818cf8;
  --hw-purple:     #a78bfa;
  --hw-green:      #34d399;
  --hw-amber:      #fbbf24;
  --hw-red:        #f87171;
  --hw-radius-sm:  10px;
  --hw-radius:     16px;
  --hw-radius-lg:  24px;
  --hw-radius-xl:  32px;
  --hw-shadow:     0 20px 60px rgba(3,7,26,.6);
  --hw-shadow-sm:  0 8px 24px rgba(3,7,26,.4);
  --hw-glow-cyan:  0 0 40px rgba(56,189,248,.18);
  --hw-glow-indigo:0 0 40px rgba(129,140,248,.18);
  --hw-transition: .2s cubic-bezier(.4,0,.2,1);
}

/* --- UTILITY SPACING --- */
.hw-mt-12 { margin-top: 12px; }
.hw-mt-16 { margin-top: 16px; }
.hw-mt-24 { margin-top: 24px; }
.hw-mt-32 { margin-top: 32px; }
.hw-mt-48 { margin-top: 48px; }
.hw-text-sm { font-size: .875rem; }
.hw-required { color: var(--hw-red); }
.hw-label-required::after { content: " *"; color: var(--hw-red); }

/* --- GLOBAL BODY REFINEMENT --- */
body {
  background: var(--hw-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99,102,241,.14), transparent),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(56,189,248,.08), transparent);
  font-family: 'DM Sans', 'Sora', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* noise texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* --- SCROLLBAR STYLING --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--hw-bg); }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,.4); }

/* --- SELECTION --- */
::selection { background: rgba(99,102,241,.35); color: #fff; }

/* ============================================================
   HEADER ELEVATION
   ============================================================ */
.ha-header {
  background: rgba(3,7,26,.88) !important;
  border-bottom: 1px solid rgba(148,163,184,.1) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}
.ha-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.4), rgba(56,189,248,.4), transparent);
}
.ha-logo-img { height: 36px; width: auto; }

/* nav link pill hover — brighter */
.ha-nav-link:hover, .ha-nav-link.is-active {
  background: rgba(99,102,241,.12) !important;
  color: var(--hw-indigo) !important;
}

/* mega menu glow */
.ha-mega {
  background: linear-gradient(160deg, rgba(13,21,48,.98), rgba(3,7,26,.98)) !important;
  border: 1px solid rgba(99,102,241,.25) !important;
  box-shadow: var(--hw-shadow), var(--hw-glow-indigo) !important;
  border-radius: 28px !important;
}
.ha-mega-card {
  background: rgba(13,21,48,.7) !important;
  border: 1px solid rgba(148,163,184,.1) !important;
  border-radius: 16px !important;
  transition: all var(--hw-transition);
}
.ha-mega-card:hover {
  background: rgba(99,102,241,.1) !important;
  border-color: rgba(99,102,241,.35) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99,102,241,.15);
}
.ha-mega-card i {
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(56,189,248,.15)) !important;
  color: var(--hw-indigo) !important;
}

/* announce bar */
.hw-announce-bar {
  background: linear-gradient(90deg, rgba(99,102,241,.18), rgba(56,189,248,.12));
  border-bottom: 1px solid rgba(99,102,241,.22);
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  color: #dbeafe;
  padding: 10px 20px;
  position: relative;
  z-index: 1031;
}
.hw-announce-bar a { color: var(--hw-cyan); font-weight: 700; }
.hw-announce-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--hw-muted); cursor: pointer; font-size: 1rem; padding: 4px 8px; border-radius: 6px; }
.hw-announce-close:hover { color: var(--hw-text); background: rgba(148,163,184,.1); }

/* --- HEADER BUTTONS --- */
.hw-btn, .hw-btn-primary, .hw-btn-secondary, .hw-btn-ghost,
.hw-btn-outline-white {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; border-radius: var(--hw-radius);
  transition: all var(--hw-transition); cursor: pointer;
  text-decoration: none !important; white-space: nowrap;
  border: 1px solid transparent;
}
.hw-btn-primary {
  background: linear-gradient(135deg, #4f46e5, #6366f1 48%, #38bdf8);
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(79,70,229,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.hw-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(79,70,229,.45), inset 0 1px 0 rgba(255,255,255,.12); filter: brightness(1.06); }
.hw-btn-secondary { background: rgba(13,21,48,.8); border-color: rgba(148,163,184,.2); color: var(--hw-text) !important; }
.hw-btn-secondary:hover { border-color: rgba(99,102,241,.5); background: rgba(99,102,241,.08); color: var(--hw-indigo) !important; }
.hw-btn-ghost { background: transparent; border-color: rgba(148,163,184,.18); color: var(--hw-muted) !important; }
.hw-btn-ghost:hover { background: rgba(148,163,184,.08); color: var(--hw-text) !important; border-color: rgba(148,163,184,.3); }
.hw-btn-outline-white { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); color: #fff !important; }
.hw-btn-outline-white:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.hw-btn-sm  { padding: 8px 16px; font-size: .82rem; border-radius: 10px; }
.hw-btn-lg  { padding: 13px 28px; font-size: 1rem; border-radius: 14px; }
.hw-btn-xl  { padding: 15px 32px; font-size: 1.05rem; border-radius: 16px; }

/* ============================================================
   HERO SECTION — WORLD CLASS
   ============================================================ */
.hw-hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 8% 0%, rgba(99,102,241,.22), transparent 55%),
    radial-gradient(ellipse 50% 50% at 92% 0%, rgba(56,189,248,.16), transparent 50%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(79,70,229,.1), transparent 60%),
    var(--hw-bg);
}
.hw-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: .5;
  pointer-events: none;
}
.hw-hero-inner { position: relative; z-index: 2; max-width: 640px; }
.hw-hero-title {
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -.04em;
  color: var(--hw-text);
  margin: 20px 0 22px;
}
.hw-gradient-text {
  background: linear-gradient(135deg, var(--hw-indigo) 0%, var(--hw-cyan) 50%, #60a5fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline;
}
.hw-hero-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.72;
  color: #94a3b8 !important;
  max-width: 580px;
  margin: 0 0 28px;
}
.hw-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hw-hero-trust {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px;
}
.hw-hero-trust-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: rgba(13,21,48,.7);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: #cbd5e1;
  backdrop-filter: blur(8px);
}
.hw-hero-trust-item i { color: var(--hw-green); font-size: .75rem; }

/* hero panel */
.hw-home-command-panel {
  position: relative; z-index: 2;
  margin-top: 40px;
  padding: 2px;
  border-radius: var(--hw-radius-xl);
  background: linear-gradient(135deg, rgba(99,102,241,.4), rgba(56,189,248,.3), rgba(99,102,241,.2));
}
.hw-home-command-panel::after {
  content: ''; position: absolute; inset: -24px;
  z-index: -1; border-radius: 50px;
  background: radial-gradient(ellipse at 50% 50%, rgba(99,102,241,.2), transparent 65%);
  filter: blur(20px);
}
.hw-home-command-panel img {
  width: 100%; border-radius: calc(var(--hw-radius-xl) - 2px);
  display: block;
}
.hw-command-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(99,102,241,.15);
  border-top: 1px solid rgba(99,102,241,.2);
  border-radius: 0 0 calc(var(--hw-radius-xl) - 2px) calc(var(--hw-radius-xl) - 2px);
  overflow: hidden;
}
.hw-command-metrics span {
  padding: 12px 16px;
  font-size: .78rem; color: #94a3b8;
  background: rgba(3,7,26,.82);
  backdrop-filter: blur(12px);
}
.hw-command-metrics span strong { display: block; color: var(--hw-indigo); font-size: .9rem; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.hw-trust-strip {
  background: linear-gradient(180deg, rgba(3,7,26,0), rgba(13,21,48,.6));
  border-top: 1px solid rgba(148,163,184,.06);
  border-bottom: 1px solid rgba(148,163,184,.08);
  padding: 18px 0;
}
.hw-trust-strip-inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 28px;
}
.hw-trust-band-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .83rem; font-weight: 700; color: #94a3b8;
}
.hw-trust-band-item i { color: var(--hw-green); font-size: .8rem; }

/* ============================================================
   SECTION SYSTEM
   ============================================================ */
.hw-section { padding: 88px 0; }
.hw-section-sm { padding: 56px 0; }
.hw-section-alt {
  background:
    radial-gradient(ellipse 60% 50% at 0% 50%, rgba(99,102,241,.06), transparent 60%),
    rgba(13,21,48,.45);
  border-top: 1px solid rgba(148,163,184,.06);
  border-bottom: 1px solid rgba(148,163,184,.06);
}
.hw-section-header { text-align: center; max-width: 780px; margin: 0 auto 52px; }
.hw-section-title {
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  font-weight: 900; letter-spacing: -.035em;
  color: var(--hw-text); margin: 14px 0 16px;
}
.hw-section-sub {
  font-size: 1.05rem; line-height: 1.72;
  color: #64748b !important; max-width: 640px; margin: 0 auto;
}
.hw-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--hw-indigo);
}
.hw-eyebrow i { font-size: .7rem; }
.hw-flex-center { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hw-text-center { text-align: center; }

/* ============================================================
   CARD SYSTEM
   ============================================================ */
.hw-card {
  background: linear-gradient(160deg, rgba(13,21,48,.95), rgba(6,12,32,.95));
  border: 1px solid rgba(148,163,184,.1);
  border-radius: var(--hw-radius-lg);
  padding: 28px;
  transition: all var(--hw-transition);
  position: relative; overflow: hidden;
}
.hw-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.3), transparent);
  opacity: 0; transition: opacity var(--hw-transition);
}
.hw-card:hover { transform: translateY(-4px); border-color: rgba(99,102,241,.25); box-shadow: 0 24px 64px rgba(3,7,26,.5), var(--hw-glow-indigo); }
.hw-card:hover::before { opacity: 1; }
.hw-card-alt { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.15); }
.hw-card-body { padding: 20px; }
.hw-card-header { padding: 16px 20px; border-bottom: 1px solid rgba(148,163,184,.08); font-weight: 700; color: var(--hw-text); }
.hw-card-grid   { display: grid; gap: 20px; }
.hw-card-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.hw-card-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 768px) {
  .hw-card-grid-3, .hw-card-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .hw-card-grid-3, .hw-card-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   STATS + PLAN CARDS
   ============================================================ */
.hw-stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
@media (max-width: 768px) { .hw-stats-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .hw-stats-grid { grid-template-columns: 1fr 1fr; } }

.hw-stat-card {
  text-align: center; padding: 28px 20px;
  background: linear-gradient(160deg, rgba(13,21,48,.9), rgba(6,12,32,.9));
  border: 1px solid rgba(148,163,184,.1); border-radius: var(--hw-radius-lg);
  position: relative; overflow: hidden;
  transition: all var(--hw-transition);
}
.hw-stat-card::after {
  content: ''; position: absolute;
  inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(99,102,241,.1), transparent 60%);
  opacity: 0; transition: opacity var(--hw-transition);
}
.hw-stat-card:hover { border-color: rgba(99,102,241,.3); transform: translateY(-3px); }
.hw-stat-card:hover::after { opacity: 1; }
.hw-stat-number { font-size: 2.2rem; font-weight: 900; letter-spacing: -.04em; color: var(--hw-text); }
.hw-stat-label { font-size: .82rem; font-weight: 600; color: #64748b; margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }

.hw-plan-card {
  background: linear-gradient(160deg, rgba(13,21,48,.96), rgba(6,12,32,.96));
  border: 1px solid rgba(148,163,184,.1);
  border-radius: var(--hw-radius-xl);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: all var(--hw-transition);
}
.hw-plan-card:hover { transform: translateY(-5px); box-shadow: 0 28px 72px rgba(3,7,26,.55); border-color: rgba(99,102,241,.3); }
.hw-plan-card.hw-plan-featured {
  border-color: rgba(99,102,241,.5);
  background: linear-gradient(160deg, rgba(17,25,52,.98), rgba(9,14,38,.98));
  box-shadow: 0 24px 64px rgba(79,70,229,.2), inset 0 1px 0 rgba(99,102,241,.2);
}
.hw-plan-card.hw-plan-featured::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.12), transparent 60%);
  pointer-events: none;
}
.hw-plan-name { font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-indigo); margin-bottom: 6px; }
.hw-plan-price { font-size: 3rem; font-weight: 900; letter-spacing: -.05em; color: var(--hw-text); line-height: 1; margin: 12px 0 4px; }
.hw-plan-price sup { font-size: 1.2rem; vertical-align: super; font-weight: 700; }
.hw-plan-price sub { font-size: .9rem; color: #64748b; font-weight: 500; }
.hw-plan-period { font-size: .82rem; color: #64748b; margin-bottom: 20px; }
.hw-plan-fit { font-size: .88rem; color: #94a3b8; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(148,163,184,.08); line-height: 1.6; }
.hw-plan-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.hw-plan-features li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: .9rem; color: #cbd5e1; }
.hw-plan-features li i.fa-check { color: var(--hw-green); margin-top: 3px; flex-shrink: 0; }
.hw-plan-features li i.fa-xmark { color: #334155; margin-top: 3px; flex-shrink: 0; }
.hw-plan-features li.hw-muted { color: #475569; }
.hw-plan-cta { margin-top: auto; }
.hw-plan-microcopy { font-size: .75rem; color: #475569; text-align: center; margin-top: 10px; }
.hw-plan-guarantee { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: .75rem; color: #64748b; margin-top: 8px; }
.hw-plan-guarantee i { color: var(--hw-green); }
.hw-plan-product-price { font-size: .92rem; color: var(--hw-muted); }
.hw-plan-product-price strong { color: var(--hw-cyan); }
.hw-product-price { font-size: 1.5rem; font-weight: 900; color: var(--hw-cyan); }
.hw-product-price-live { font-size: .78rem; color: #64748b; }
.hw-product-fit { font-size: .88rem; color: #94a3b8; line-height: 1.6; }
.hw-pricing-more { margin-top: 24px; text-align: center; font-size: .88rem; color: #64748b; }
.hw-pricing-more a { color: var(--hw-indigo); font-weight: 700; }

/* ============================================================
   FEATURE / PRODUCT CARDS
   ============================================================ */
.hw-feature-card {
  padding: 28px;
  background: linear-gradient(160deg, rgba(13,21,48,.92), rgba(6,12,32,.92));
  border: 1px solid rgba(148,163,184,.09);
  border-radius: var(--hw-radius-lg);
  transition: all var(--hw-transition);
  height: 100%;
}
.hw-feature-card:hover { transform: translateY(-4px); border-color: rgba(99,102,241,.28); box-shadow: 0 20px 56px rgba(3,7,26,.45); }
.hw-feature-icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 16px; margin-bottom: 18px; font-size: 1.3rem;
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(56,189,248,.14));
  color: var(--hw-indigo);
}
.hw-feature-title { font-size: 1.05rem; font-weight: 800; color: var(--hw-text); margin: 0 0 8px; }
.hw-feature-desc { font-size: .88rem; color: #64748b; line-height: 1.7; margin: 0; }

/* product icon color variants */
.hw-product-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; margin-bottom: 18px; font-size: 1.2rem; }

/* ============================================================
   HOMEPAGE CRO SECTIONS
   ============================================================ */
.hw-cro-launch-path { padding: 48px 0; }
.hw-cro-launch-card {
  background: linear-gradient(135deg, rgba(13,21,48,.9), rgba(6,12,32,.9));
  border: 1px solid rgba(99,102,241,.18);
  border-radius: var(--hw-radius-xl);
  padding: 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  box-shadow: 0 24px 64px rgba(3,7,26,.45);
  position: relative; overflow: hidden;
}
.hw-cro-launch-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 0% 0%, rgba(99,102,241,.1), transparent 50%);
  pointer-events: none;
}
.hw-cro-launch-copy { display: flex; gap: 20px; align-items: flex-start; }
.hw-cro-launch-art { width: 64px; flex-shrink: 0; border-radius: 16px; }
.hw-cro-flow { display: flex; flex-direction: column; gap: 16px; }
.hw-cro-flow-step {
  display: grid; grid-template-columns: 40px 1fr; column-gap: 14px;
  align-items: start; padding: 16px;
  background: rgba(3,7,26,.6); border: 1px solid rgba(148,163,184,.08);
  border-radius: 14px;
}
.hw-cro-flow-step span {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  border-radius: 12px; font-weight: 900; font-size: .9rem; color: #fff;
  grid-row: span 2;
}
.hw-cro-flow-step strong { font-size: .95rem; color: var(--hw-text); display: block; }
.hw-cro-flow-step small { color: #64748b; font-size: .82rem; }

/* proof row */
.hw-cro-proof-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hw-cro-proof-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: rgba(13,21,48,.72); border: 1px solid rgba(148,163,184,.1);
  border-radius: 999px; font-size: .8rem; font-weight: 600; color: #cbd5e1;
}
.hw-cro-proof-item img { width: 18px; height: 18px; }
.hw-cro-mini-proof { font-size: .78rem; color: #475569; display: flex; align-items: center; gap: 6px; margin-top: 10px; }

/* domain search widget */
.hw-domain-search-wrap { max-width: 700px; margin: 0 auto; }
.hw-domain-search-bar {
  display: flex; align-items: center; gap: 0;
  background: rgba(13,21,48,.9);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 4px rgba(99,102,241,.08), var(--hw-shadow-sm);
  transition: all var(--hw-transition);
}
.hw-domain-search-bar:focus-within { border-color: rgba(99,102,241,.6); box-shadow: 0 0 0 4px rgba(99,102,241,.12), var(--hw-shadow-sm); }
.hw-domain-search-bar input {
  flex: 1; min-height: 52px; padding: 0 18px;
  background: transparent; border: none; outline: none;
  font-size: 1rem; color: var(--hw-text);
}
.hw-domain-search-bar input::placeholder { color: #475569; }
.hw-domain-search-bar button {
  min-height: 52px; padding: 0 22px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  border: none; color: #fff; font-weight: 700; font-size: .9rem;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  border-radius: 0 12px 12px 0; transition: all var(--hw-transition);
}
.hw-domain-search-bar button:hover { background: linear-gradient(135deg, #4338ca, #4f46e5); }
.hw-cro-domain-art { width: 56px; margin: 0 auto 16px; display: block; }
.hw-cro-domain-note { font-size: .78rem; color: #475569; text-align: center; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.hw-domain-input { flex: 1; min-height: 48px; padding: 0 16px; background: transparent; border: none; outline: none; color: var(--hw-text); font-size: .95rem; }

/* TLD pills */
.hw-tld-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.hw-tld-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: rgba(13,21,48,.7); border: 1px solid rgba(148,163,184,.1);
  border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--hw-text);
  cursor: pointer; transition: all var(--hw-transition);
}
.hw-tld-pill:hover { border-color: rgba(99,102,241,.4); background: rgba(99,102,241,.08); color: var(--hw-indigo); }
.hw-tld-pill span { font-size: .7rem; color: #475569; font-weight: 500; }

/* steps */
.hw-steps-grid { display: grid; gap: 20px; }
.hw-steps-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 768px) { .hw-steps-grid-3 { grid-template-columns: 1fr; } }
.hw-step-card {
  padding: 28px; text-align: center;
  background: rgba(13,21,48,.8); border: 1px solid rgba(148,163,184,.09);
  border-radius: var(--hw-radius-lg);
}
.hw-step-num {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  display: grid; place-items: center; margin: 0 auto 16px;
  font-weight: 900; font-size: 1.1rem; color: #fff;
  box-shadow: 0 8px 20px rgba(79,70,229,.35);
}
.hw-step-text { font-size: .9rem; color: #94a3b8; line-height: 1.65; }
.hw-step { display: flex; gap: 14px; align-items: flex-start; }

/* FAQ */
.hw-faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.hw-faq-list details {
  background: rgba(13,21,48,.8); border: 1px solid rgba(148,163,184,.09);
  border-radius: var(--hw-radius); overflow: hidden; transition: border-color var(--hw-transition);
}
.hw-faq-list details[open] { border-color: rgba(99,102,241,.25); }
.hw-faq-list summary {
  padding: 18px 22px; font-weight: 700; font-size: .95rem; color: var(--hw-text);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.hw-faq-list summary::-webkit-details-marker { display: none; }
.hw-faq-list summary::after { content: "+"; color: var(--hw-indigo); font-size: 1.3rem; font-weight: 300; }
.hw-faq-list details[open] summary::after { content: "−"; }
.hw-faq-list .hw-faq-answer { padding: 0 22px 18px; color: #64748b !important; line-height: 1.72; font-size: .92rem; }
.hw-faq-list p { padding: 0 22px 18px; margin: 0; color: #64748b !important; line-height: 1.72; }

/* ============================================================
   PAGE HEADERS (client area, marketing pages)
   ============================================================ */
.hw-page-header {
  padding: 52px 0 42px;
  background:
    radial-gradient(ellipse 60% 80% at 10% -20%, rgba(99,102,241,.14), transparent 55%),
    rgba(6,12,32,.6);
  border-bottom: 1px solid rgba(148,163,184,.07);
}
.hw-page-title { font-size: clamp(1.7rem, 3.5vw, 2.8rem); font-weight: 900; letter-spacing: -.04em; color: var(--hw-text); margin: 10px 0 12px; }
.hw-page-sub { font-size: 1.02rem; color: #64748b !important; max-width: 620px; line-height: 1.7; }

/* ============================================================
   ALERT SYSTEM
   ============================================================ */
.hw-alert {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--hw-radius);
  border: 1px solid; margin-bottom: 16px;
}
.hw-alert-content { flex: 1; font-size: .9rem; }
.hw-alert-success { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.25); color: #6ee7b7; }
.hw-alert-error   { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.25); color: #fca5a5; }
.hw-alert-warning { background: rgba(251,191,36,.08);  border-color: rgba(251,191,36,.25);  color: #fde68a; }
.hw-alert-info    { background: rgba(56,189,248,.08);  border-color: rgba(56,189,248,.25);  color: #7dd3fc; }

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.hw-form-group { margin-bottom: 20px; }
.hw-form-label { display: block; font-size: .82rem; font-weight: 700; color: #dbeafe; margin-bottom: 7px; letter-spacing: .01em; }
.hw-form-input, .hw-form-select {
  width: 100%; min-height: 46px; padding: 0 14px;
  background: rgba(6,12,32,.8); border: 1px solid rgba(148,163,184,.14);
  border-radius: var(--hw-radius-sm); color: var(--hw-text);
  font-size: .92rem; transition: all var(--hw-transition);
  outline: none;
}
.hw-form-input:focus, .hw-form-select:focus {
  border-color: rgba(99,102,241,.5);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
  background: rgba(6,12,32,.95);
}
.hw-form-input::placeholder { color: #334155; }
.hw-form-textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
.hw-generate-password { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--hw-indigo); cursor: pointer; background: none; border: none; padding: 0; }
.hw-generate-password:hover { color: var(--hw-cyan); }
.hw-form-reassurance { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: #475569; margin-top: 8px; }
.hw-form-reassurance i { color: var(--hw-green); }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.hw-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase;
}
.hw-badge-active, .hw-status-active    { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.2); }
.hw-badge-pending, .hw-status-pending  { background: rgba(251,191,36,.1);  color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }
.hw-badge-suspended                    { background: rgba(248,113,113,.1); color: #f87171; border: 1px solid rgba(248,113,113,.2); }
.hw-badge-cancelled                    { background: rgba(100,116,139,.1); color: #94a3b8; border: 1px solid rgba(100,116,139,.2); }
.hw-badge-paid                         { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.2); }
.hw-badge-unpaid                       { background: rgba(248,113,113,.1); color: #f87171; border: 1px solid rgba(248,113,113,.2); }
.hw-badge-overdue                      { background: rgba(248,113,113,.15); color: #fca5a5; border: 1px solid rgba(248,113,113,.3); }
.hw-badge-open                         { background: rgba(56,189,248,.1);  color: #38bdf8; border: 1px solid rgba(56,189,248,.2); }
.hw-badge-answered                     { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.2); }
.hw-badge-closed                       { background: rgba(100,116,139,.1); color: #94a3b8; border: 1px solid rgba(100,116,139,.2); }
.hw-badge-in-progress                  { background: rgba(129,140,248,.1); color: #818cf8; border: 1px solid rgba(129,140,248,.2); }
/* dynamic status classes */
[class*="hw-status-"] { display: inline-flex; }
[class*="hw-ticket-status-"] { display: inline-flex; }
[class*="hw-priority-high"]   { color: #f87171; }
[class*="hw-priority-medium"] { color: #fbbf24; }
[class*="hw-priority-low"]    { color: #34d399; }

/* ============================================================
   CLIENT AREA / ACCOUNT PAGES
   ============================================================ */
.hw-clientarea-page { min-height: 60vh; }
.hw-account-card {
  background: linear-gradient(160deg, rgba(13,21,48,.95), rgba(6,12,32,.95));
  border: 1px solid rgba(148,163,184,.1); border-radius: var(--hw-radius-lg);
  padding: 24px; margin-bottom: 20px;
  transition: border-color var(--hw-transition);
}
.hw-account-card:hover { border-color: rgba(99,102,241,.2); }
.hw-account-card-title { font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-indigo); margin-bottom: 14px; }
.hw-client-name { font-size: 1.05rem; font-weight: 700; color: var(--hw-text); }
.hw-client-footer { background: rgba(6,12,32,.7); border-top: 1px solid rgba(148,163,184,.07); padding: 16px 0; }
.hw-client-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: #475569; }

/* invoice cards */
.hw-invoice-card {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px;
  padding: 16px 20px; background: rgba(13,21,48,.8);
  border: 1px solid rgba(148,163,184,.09); border-radius: var(--hw-radius);
  transition: all var(--hw-transition);
}
.hw-invoice-card:hover { border-color: rgba(99,102,241,.2); background: rgba(13,21,48,.95); }
.hw-invoice-sidebar { background: rgba(6,12,32,.7); border: 1px solid rgba(148,163,184,.08); border-radius: var(--hw-radius-lg); padding: 20px; }
.hw-invoice-notes-body { font-size: .88rem; color: #64748b; line-height: 1.65; }
.hw-invoice-subtotal-label { font-size: .78rem; color: #475569; }

/* payment */
.hw-payment-badge { display: inline-flex; padding: 4px 10px; border: 1px solid rgba(148,163,184,.15); border-radius: 6px; font-size: .72rem; font-weight: 800; color: #94a3b8; background: rgba(13,21,48,.8); }
.hw-payment-radio { display: flex; align-items: center; gap: 10px; padding: 14px; background: rgba(13,21,48,.8); border: 1px solid rgba(148,163,184,.1); border-radius: var(--hw-radius); cursor: pointer; transition: all var(--hw-transition); }
.hw-payment-radio:hover { border-color: rgba(99,102,241,.3); }
.hw-payment-radio input[type="radio"] { accent-color: var(--hw-indigo); }

/* addfunds */
.hw-addfunds-form-card { background: rgba(13,21,48,.9); border: 1px solid rgba(148,163,184,.1); border-radius: var(--hw-radius-lg); padding: 28px; }
.hw-addfunds-info { background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.18); border-radius: var(--hw-radius); padding: 16px; font-size: .88rem; color: #a5b4fc; }

/* 2FA */
.hw-2fa-form { max-width: 420px; margin: 0 auto; }
.hw-2fa-provider-select { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 24px; }

/* ============================================================
   SUPPORT / TICKETS
   ============================================================ */
.hw-support-layout { display: grid; grid-template-columns: 1fr 280px; gap: 28px; }
.hw-support-sidebar { background: rgba(13,21,48,.9); border: 1px solid rgba(148,163,184,.09); border-radius: var(--hw-radius-lg); padding: 20px; }
.hw-support-form-wrap { background: rgba(13,21,48,.9); border: 1px solid rgba(148,163,184,.09); border-radius: var(--hw-radius-lg); padding: 28px; }
.hw-support-link {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: rgba(6,12,32,.7); border: 1px solid rgba(148,163,184,.08);
  border-radius: var(--hw-radius); font-size: .88rem; font-weight: 700; color: var(--hw-text);
  transition: all var(--hw-transition); margin-bottom: 8px;
}
.hw-support-link:hover { border-color: rgba(99,102,241,.3); color: var(--hw-indigo) !important; background: rgba(99,102,241,.06); }
.hw-support-link i { color: var(--hw-indigo); width: 20px; text-align: center; }
.hw-support-response-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.2); border-radius: 999px; font-size: .75rem; font-weight: 700; color: #34d399; }
.hw-response-time { font-size: .78rem; color: #475569; }
.hw-ticket-guidance { background: rgba(56,189,248,.06); border: 1px solid rgba(56,189,248,.15); border-radius: var(--hw-radius); padding: 16px; font-size: .88rem; color: #7dd3fc; margin-bottom: 20px; }
.hw-ticket-subject-cell { font-weight: 700; color: var(--hw-text); }
[class*="hw-ticket-reply-"] { margin-bottom: 16px; }
[class*="hw-ticket-status-"] { display: inline-flex; }
@media (max-width: 768px) { .hw-support-layout { grid-template-columns: 1fr; } }

/* dept grid */
.hw-dept-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
@media (max-width: 768px) { .hw-dept-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .hw-dept-grid { grid-template-columns: 1fr; } }
.hw-dept-card { position: relative; cursor: pointer; }
.hw-dept-radio { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hw-dept-card-inner { padding: 20px; background: rgba(13,21,48,.9); border: 1px solid rgba(148,163,184,.1); border-radius: var(--hw-radius); transition: all var(--hw-transition); }
.hw-dept-radio:checked + .hw-dept-card-inner { border-color: rgba(99,102,241,.5); background: rgba(99,102,241,.08); }
.hw-dept-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(99,102,241,.12); color: var(--hw-indigo); margin-bottom: 10px; }
.hw-dept-name { font-size: .95rem; font-weight: 800; color: var(--hw-text); margin-bottom: 4px; }
.hw-dept-desc { font-size: .78rem; color: #475569; }

/* contact */
.hw-contact-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; }
.hw-contact-form-wrap { background: rgba(13,21,48,.9); border: 1px solid rgba(148,163,184,.09); border-radius: var(--hw-radius-lg); padding: 32px; }
.hw-contact-info { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 768px) { .hw-contact-layout { grid-template-columns: 1fr; } }

/* ============================================================
   DOMAIN / DNS
   ============================================================ */
.hw-dns-add-form { background: rgba(13,21,48,.8); border: 1px solid rgba(148,163,184,.09); border-radius: var(--hw-radius-lg); padding: 24px; margin-top: 20px; }
.hw-dns-type-select { min-width: 100px; }
.hw-dns-record-host, .hw-dns-record-address { flex: 1; }
.hw-dns-record-ttl { width: 80px; }
.hw-dns-record-priority, .hw-dns-priority { width: 80px; }
[class*="hw-dns-type-"] { font-family: monospace; font-size: .82rem; }
.hw-domain-renew-check { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(13,21,48,.8); border: 1px solid rgba(148,163,184,.08); border-radius: var(--hw-radius); margin-bottom: 10px; }

/* ============================================================
   ANNOUNCEMENTS
   ============================================================ */
.hw-announcements-list { display: flex; flex-direction: column; gap: 14px; }
.hw-announcement-title { font-size: 1.05rem; font-weight: 800; color: var(--hw-text); margin: 0 0 6px; }
.hw-announcement-date  { font-size: .75rem; color: #475569; }
.hw-announcement-excerpt { font-size: .9rem; color: #64748b; line-height: 1.65; }
.hw-announcement-nav-prev { margin-top: 24px; }

/* ============================================================
   KB / KNOWLEDGEBASE
   ============================================================ */
.hw-kb-cro-header { text-align: center; padding: 24px; background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.15); border-radius: var(--hw-radius-lg); margin-bottom: 28px; }
.hw-kb-cro-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: rgba(99,102,241,.12); color: var(--hw-indigo); font-size: 1.4rem; margin: 0 auto 14px; }
.hw-downloads-category { margin-bottom: 32px; }
.hw-premium-intel { background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.15); border-radius: var(--hw-radius-lg); padding: 20px; margin-top: 24px; }

/* ============================================================
   SERVER STATUS PAGE
   ============================================================ */
.hw-status-dot-green  { color: #34d399; }
.hw-status-dot-red    { color: #f87171; }
.hw-status-dot-orange { color: #fbbf24; }
.hw-status-dot-grey   { color: #94a3b8; }
[class*="hw-text-green"]  { color: #34d399 !important; }
[class*="hw-text-red"]    { color: #f87171 !important; }
[class*="hw-text-orange"] { color: #fbbf24 !important; }
.hw-operation-map     { width: 100%; border-radius: var(--hw-radius-lg); overflow: hidden; }
.hw-operation-copy    { max-width: 580px; }
.hw-operation-art     { width: 100%; border-radius: var(--hw-radius-lg); }
.hw-operation-signals { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 20px; }
[class*="hw-incident-"] { padding: 16px; background: rgba(13,21,48,.8); border: 1px solid rgba(148,163,184,.09); border-radius: var(--hw-radius); margin-bottom: 12px; }
[class*="hw-overall-"] { padding: 16px 20px; border-radius: var(--hw-radius); margin-bottom: 20px; font-weight: 700; }
.hw-incident-date { font-size: .75rem; color: #475569; margin-top: 6px; }

/* ============================================================
   ERROR PAGE
   ============================================================ */
.hw-error-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; }
.hw-error-icon  { font-size: 4rem; color: var(--hw-indigo); opacity: .6; margin-bottom: 24px; }
.hw-error-code  { font-size: 7rem; font-weight: 900; letter-spacing: -.08em; color: var(--hw-indigo); opacity: .15; line-height: 1; }
.hw-error-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; color: var(--hw-text); margin: -20px 0 14px; }
.hw-error-sub   { font-size: 1rem; color: #64748b !important; max-width: 480px; margin: 0 auto 28px; line-height: 1.7; }
.hw-error-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hw-error-popular { margin-top: 40px; }
.hw-error-msg { color: #64748b; }

/* ============================================================
   FOOTER ELEVATION
   ============================================================ */
.ha-footer {
  background:
    radial-gradient(ellipse 60% 40% at 5% 0%, rgba(99,102,241,.1), transparent 50%),
    #030712 !important;
}
.hw-footer-copy { font-size: .8rem; color: #334155; }
.hw-footer-payments { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hw-footer-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hw-footer-legal a { font-size: .78rem; color: #334155 !important; }
.hw-footer-legal a:hover { color: var(--hw-indigo) !important; }

/* footer CTA box */
.hw-footer-cta {
  border: 1px solid rgba(99,102,241,.22);
  border-radius: var(--hw-radius-xl);
  padding: 40px;
  background: linear-gradient(135deg, rgba(79,70,229,.12), rgba(56,189,248,.07));
  margin-bottom: 40px;
  text-align: center;
}
.hw-footer-cta h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); margin: 0 0 12px; }
.hw-footer-cta p { color: #64748b !important; max-width: 560px; margin: 0 auto 24px; }
.hw-footer-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   CHECKOUT TRUST + CONFIDENCE
   ============================================================ */
.hw-checkout-confidence {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 20px 0;
}
.hw-checkout-confidence--wide { gap: 12px; }
.hw-checkout-confidence-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  background: rgba(52,211,153,.07); border: 1px solid rgba(52,211,153,.18);
  border-radius: 999px; font-size: .8rem; font-weight: 700; color: #6ee7b7;
}
.hw-checkout-confidence-item i { font-size: .78rem; }
.hw-checkout-submit-note { font-size: .8rem; color: #64748b !important; margin-top: 10px; }

/* ============================================================
   SCROLL REVEAL ANIMATION
   ============================================================ */
.hw-reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.hw-reveal.hw-revealed { opacity: 1; transform: translateY(0); }

/* ============================================================
   TABLE STYLING
   ============================================================ */
.hw-table { width: 100%; border-collapse: collapse; }
.hw-table th { padding: 12px 16px; background: rgba(13,21,48,.85); color: #dbeafe; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid rgba(148,163,184,.1); text-align: left; }
.hw-table td { padding: 14px 16px; border-bottom: 1px solid rgba(148,163,184,.06); color: var(--hw-text); font-size: .9rem; vertical-align: middle; }
.hw-table tr:last-child td { border-bottom: none; }
.hw-table tr:hover td { background: rgba(99,102,241,.04); }
.hw-table-wrap { background: rgba(13,21,48,.8); border: 1px solid rgba(148,163,184,.09); border-radius: var(--hw-radius-lg); overflow: hidden; }

/* ============================================================
   BACK TO TOP + COOKIE BAR
   ============================================================ */
.hw-back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(13,21,48,.95); border: 1px solid rgba(99,102,241,.3);
  color: var(--hw-indigo); cursor: pointer; opacity: 0; transform: translateY(8px);
  transition: all var(--hw-transition); display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(3,7,26,.4);
}
.hw-back-to-top.hw-visible { opacity: 1; transform: translateY(0); }
.hw-back-to-top:hover { background: rgba(99,102,241,.15); transform: translateY(-2px); }
.hw-cookie-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: rgba(6,12,32,.97);
  border-top: 1px solid rgba(99,102,241,.2);
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  backdrop-filter: blur(16px);
  box-shadow: 0 -8px 32px rgba(3,7,26,.5);
}
.hw-cookie-text { font-size: .85rem; color: #94a3b8; margin: 0; }
.hw-cookie-text a { color: var(--hw-indigo); }
.hw-cookie-actions { display: flex; gap: 8px; }

/* ============================================================
   QUICK LINKS (CLIENT AREA DASHBOARD)
   ============================================================ */
.hw-quick-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 20px 0; }
.hw-quick-link {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px; text-align: center;
  background: rgba(13,21,48,.8); border: 1px solid rgba(148,163,184,.09);
  border-radius: var(--hw-radius); font-size: .82rem; font-weight: 700;
  color: var(--hw-text) !important; transition: all var(--hw-transition);
}
.hw-quick-link:hover { border-color: rgba(99,102,241,.3); background: rgba(99,102,241,.07); color: var(--hw-indigo) !important; transform: translateY(-2px); }
.hw-quick-link i { font-size: 1.3rem; color: var(--hw-indigo); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.hw-empty-state { text-align: center; padding: 52px 20px; }
.hw-empty-asset { width: 100px; opacity: .5; margin: 0 auto 20px; display: block; }
.hw-empty-asset--sm { width: 64px; }
.hw-empty-state h2 { font-size: 1.3rem; margin-bottom: 10px; }
.hw-empty-state p { color: #64748b; max-width: 360px; margin: 0 auto 20px; }

/* ============================================================
   RESPONSIVE FINAL ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  .hw-hero { padding: 68px 0 56px; }
  .hw-hero-title { font-size: 2.4rem; }
  .hw-section { padding: 60px 0; }
  .hw-section-sm { padding: 40px 0; }
  .hw-cro-launch-card { grid-template-columns: 1fr; gap: 24px; }
  .hw-plan-card { padding: 22px 20px; }
  .hw-page-header { padding: 36px 0 28px; }
  .hw-command-metrics { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hw-hero-actions { flex-direction: column; }
  .hw-hero-actions .hw-btn { width: 100%; justify-content: center; }
  .hw-tld-pills { justify-content: flex-start; }
}

/* ============================================================
   DARK THEME REFINEMENTS — force consistent rendering
   ============================================================ */
.panel, .well, .jumbotron { background: rgba(13,21,48,.9) !important; border-color: rgba(148,163,184,.1) !important; color: var(--hw-text) !important; }
.text-muted { color: #64748b !important; }
.text-success { color: #34d399 !important; }
.text-danger  { color: #f87171 !important; }
.text-warning { color: #fbbf24 !important; }
.text-info    { color: #38bdf8 !important; }
.text-primary { color: var(--hw-indigo) !important; }
.bg-success   { background: rgba(52,211,153,.12) !important; }
.bg-danger    { background: rgba(248,113,113,.1) !important; }
.bg-warning   { background: rgba(251,191,36,.1) !important; }
.bg-info      { background: rgba(56,189,248,.1) !important; }
.alert-success { background: rgba(52,211,153,.1) !important; border-color: rgba(52,211,153,.25) !important; color: #6ee7b7 !important; }
.alert-danger  { background: rgba(248,113,113,.1) !important; border-color: rgba(248,113,113,.25) !important; color: #fca5a5 !important; }
.alert-warning { background: rgba(251,191,36,.08) !important; border-color: rgba(251,191,36,.25) !important; color: #fde68a !important; }
.alert-info    { background: rgba(56,189,248,.08) !important; border-color: rgba(56,189,248,.25) !important; color: #7dd3fc !important; }
hr { border-color: rgba(148,163,184,.08); }
code, pre { background: rgba(13,21,48,.9); border: 1px solid rgba(148,163,184,.1); border-radius: 8px; color: var(--hw-cyan); }

/* --- final 3 missing classes --- */
.ha-header-client {
  background: rgba(3,7,26,.92);
  border-bottom: 1px solid rgba(148,163,184,.09);
  backdrop-filter: blur(24px);
}
.hw-cro-proof-row--hero {
  margin-top: 26px;
}
.hw-security-option-info {
  font-size: .82rem;
  color: #64748b;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hw-security-option-info i { color: var(--hw-green); }

/* ============================================================
   HOSTAVVY v6.4 — LAYOUT FIXES + COMPONENT POLISH
   Hero split layout, product cards, testimonials, info cards,
   service pages, client area elevation
   ============================================================ */

/* ============================================================
   HERO — TWO-COLUMN SPLIT LAYOUT
   ============================================================ */
.hw-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 991px) {
  .hw-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hw-home-command-panel {
    max-width: 560px;
    margin: 0 auto;
  }
}

/* command panel floating effect */
.hw-home-command-panel {
  animation: hw-float 6s ease-in-out infinite;
}
@keyframes hw-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .hw-home-command-panel { animation: none; }
}

/* ============================================================
   PRODUCT CARDS — fix class-name mismatch + premium upgrade
   Template uses .hw-product-card with children:
   .hw-product-icon, .hw-product-name, .hw-product-fit,
   .hw-product-desc, .hw-product-price/.hw-product-price-live,
   .hw-product-link
   ============================================================ */
.hw-product-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: linear-gradient(160deg, rgba(13,21,48,.96), rgba(6,12,32,.96));
  border: 1px solid rgba(148,163,184,.1);
  border-radius: 22px;
  text-decoration: none !important;
  color: inherit !important;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.hw-product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(99,102,241,.1), transparent 60%);
  opacity: 0;
  transition: opacity .22s ease;
}
.hw-product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(99,102,241,.35);
  box-shadow: 0 24px 64px rgba(3,7,26,.5), 0 0 0 1px rgba(99,102,241,.12);
  color: inherit !important;
  text-decoration: none !important;
}
.hw-product-card:hover::before { opacity: 1; }
.hw-product-card:hover .hw-product-link { color: var(--hw-indigo); gap: 10px; }

.hw-product-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  margin-bottom: 18px;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform .22s ease;
}
.hw-product-card:hover .hw-product-icon { transform: scale(1.08); }
.hw-product-icon img { width: 28px; height: 28px; object-fit: contain; }

/* icon color variants */
.hw-product-icon--indigo { background: rgba(99,102,241,.15);  color: #818cf8; }
.hw-product-icon--cyan   { background: rgba(56,189,248,.12);  color: #38bdf8; }
.hw-product-icon--green  { background: rgba(52,211,153,.12);  color: #34d399; }
.hw-product-icon--amber  { background: rgba(251,191,36,.1);   color: #fbbf24; }
.hw-product-icon--red    { background: rgba(248,113,113,.1);  color: #f87171; }
.hw-product-icon--violet { background: rgba(167,139,250,.12); color: #a78bfa; }

.hw-product-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.hw-product-fit {
  font-size: .75rem;
  font-weight: 700;
  color: var(--hw-indigo);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
}
.hw-product-desc {
  font-size: .88rem;
  color: #64748b;
  line-height: 1.68;
  flex: 1;
  margin-bottom: 18px;
}
.hw-product-price {
  font-size: .88rem;
  color: #94a3b8;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.hw-product-price strong { color: #f1f5f9; font-size: 1.1rem; font-weight: 800; }
.hw-product-price span   { color: #64748b; font-size: .78rem; }
.hw-product-price-live {
  font-size: .78rem;
  font-weight: 700;
  color: var(--hw-green);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 14px;
}
.hw-product-price-live span { color: #64748b; font-weight: 400; }
.hw-product-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .83rem;
  font-weight: 700;
  color: #818cf8;
  transition: gap .2s ease, color .2s ease;
  margin-top: auto;
}

/* ============================================================
   INFO CARDS — 2×2 grid (4 items)
   ============================================================ */
.hw-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 768px) { .hw-info-grid { grid-template-columns: 1fr; } }

.hw-section-info {
  background:
    radial-gradient(ellipse 70% 60% at 100% 50%, rgba(99,102,241,.07), transparent 55%),
    rgba(6,12,32,.5);
  border-top: 1px solid rgba(148,163,184,.06);
  border-bottom: 1px solid rgba(148,163,184,.06);
}

.hw-info-card {
  padding: 30px;
  background: linear-gradient(160deg, rgba(13,21,48,.9), rgba(6,12,32,.9));
  border: 1px solid rgba(148,163,184,.09);
  border-radius: 22px;
  transition: all .22s ease;
  position: relative;
  overflow: hidden;
}
.hw-info-card:hover {
  border-color: rgba(99,102,241,.25);
  transform: translateY(-3px);
  box-shadow: 0 20px 52px rgba(3,7,26,.45);
}
.hw-info-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(99,102,241,.08), transparent 70%);
}
.hw-info-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 15px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(56,189,248,.12));
  color: var(--hw-indigo);
  font-size: 1.2rem;
}
.hw-info-card h3 {
  font-size: 1.08rem;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0 0 10px;
  letter-spacing: -.02em;
}
.hw-info-card p { font-size: .88rem; color: #64748b; line-height: 1.7; margin: 0 0 16px; }

.hw-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hw-check-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .85rem; color: #94a3b8; line-height: 1.55;
}
.hw-check-list li i.fa-check { color: var(--hw-green); margin-top: 2px; flex-shrink: 0; font-size: .78rem; }

/* ============================================================
   TESTIMONIAL CARDS — premium upgrade
   ============================================================ */
.hw-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}
@media (max-width: 900px)  { .hw-testimonials-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .hw-testimonials-grid { grid-template-columns: 1fr; } }

.hw-testimonial-card {
  padding: 30px;
  background: linear-gradient(160deg, rgba(13,21,48,.95), rgba(6,12,32,.95));
  border: 1px solid rgba(148,163,184,.1);
  border-radius: 22px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
  transition: all .22s ease;
}
.hw-testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -10px; right: 20px;
  font-size: 7rem; line-height: 1;
  color: rgba(99,102,241,.08);
  font-family: Georgia, serif;
  pointer-events: none;
}
.hw-testimonial-card:hover {
  border-color: rgba(99,102,241,.22);
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(3,7,26,.45);
}
.hw-testimonial-stars {
  color: #fbbf24;
  font-size: .9rem;
  letter-spacing: 2px;
}
.hw-testimonial-text {
  font-size: .93rem;
  color: #cbd5e1;
  line-height: 1.75;
  flex: 1;
  margin: 0;
}
.hw-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(148,163,184,.08);
}
.hw-testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5, #6366f1, #38bdf8);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 900; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(79,70,229,.35);
}
.hw-testimonial-name { font-size: .9rem; font-weight: 800; color: #f1f5f9; }
.hw-testimonial-role { font-size: .75rem; color: #475569; margin-top: 2px; }

/* ============================================================
   SECTION FINE PRINT + MISC HOMEPAGE ITEMS
   ============================================================ */
.hw-section-fine-print {
  margin-top: 18px;
  font-size: .78rem;
  color: #334155 !important;
}
.hw-section-fine-print a { color: var(--hw-indigo); }

/* ============================================================
   FEATURE CARDS — override previous partial rules
   ============================================================ */
.hw-feature-card {
  padding: 28px;
  background: linear-gradient(160deg, rgba(13,21,48,.9), rgba(6,12,32,.9));
  border: 1px solid rgba(148,163,184,.09);
  border-radius: 22px;
  transition: all .22s ease;
  position: relative;
  overflow: hidden;
}
.hw-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99,102,241,.28);
  box-shadow: 0 20px 56px rgba(3,7,26,.45);
}
.hw-feature-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 16px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(56,189,248,.12));
  color: var(--hw-indigo);
  font-size: 1.25rem;
  transition: transform .22s ease;
}
.hw-feature-card:hover .hw-feature-icon { transform: scale(1.1) rotate(-5deg); }
.hw-feature-title { font-size: 1rem; font-weight: 800; color: #f1f5f9; margin: 0 0 8px; }
.hw-feature-desc  { font-size: .875rem; color: #64748b; line-height: 1.68; margin: 0; }

/* ============================================================
   STAT CARDS — animated glow on hover
   ============================================================ */
.hw-stat-card {
  text-align: center; padding: 32px 20px;
  background: linear-gradient(160deg, rgba(13,21,48,.9), rgba(6,12,32,.9));
  border: 1px solid rgba(148,163,184,.1); border-radius: 22px;
  position: relative; overflow: hidden;
  transition: all .22s ease;
}
.hw-stat-card::before {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--hw-indigo), transparent);
  opacity: 0; transition: opacity .22s ease;
}
.hw-stat-card:hover { border-color: rgba(99,102,241,.3); transform: translateY(-3px); }
.hw-stat-card:hover::before { opacity: 1; }
.hw-stat-number { font-size: 2.4rem; font-weight: 900; letter-spacing: -.04em; color: #f1f5f9; }
.hw-stat-label  { font-size: .78rem; font-weight: 700; color: #475569; margin-top: 6px; text-transform: uppercase; letter-spacing: .08em; }

/* ============================================================
   CTA SECTIONS
   ============================================================ */
.hw-cta-section {
  padding: 80px 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(79,70,229,.12), transparent 65%),
    rgba(6,12,32,.4);
}
.hw-cta-box {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 40px;
  background: linear-gradient(160deg, rgba(13,21,48,.98), rgba(6,12,32,.98));
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 28px;
  box-shadow: 0 24px 72px rgba(3,7,26,.5), 0 0 0 1px rgba(99,102,241,.08);
  position: relative; overflow: hidden;
}
.hw-cta-box::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,.1), transparent 55%);
  pointer-events: none;
}
.hw-cta-box h2  { font-size: clamp(1.7rem, 3.5vw, 2.8rem); margin: 0 0 14px; }
.hw-cta-box p   { color: #64748b !important; max-width: 540px; margin: 0 auto 28px; font-size: 1.02rem; }
.hw-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   SERVICE PAGE HERO SECTIONS
   ============================================================ */
.hw-product-hero {
  padding: 80px 0 72px;
  background:
    radial-gradient(ellipse 60% 70% at 0% 0%, rgba(99,102,241,.18), transparent 55%),
    radial-gradient(ellipse 50% 50% at 100% 20%, rgba(56,189,248,.12), transparent 50%),
    var(--hw-bg);
  position: relative; overflow: hidden;
}
.hw-product-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(to bottom, transparent, var(--hw-bg));
  pointer-events: none;
}
.hw-product-hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 52px;
  align-items: center;
}
.hw-product-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hw-indigo); margin-bottom: 20px;
}
.hw-product-hero-title {
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 900; letter-spacing: -.04em;
  color: #f1f5f9; line-height: 1.05;
  margin: 0 0 20px;
}
.hw-product-hero-sub {
  font-size: 1.05rem; line-height: 1.72;
  color: #64748b !important; max-width: 520px;
  margin: 0 0 28px;
}
.hw-product-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hw-product-hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.hw-product-hero-trust span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; color: #64748b; font-weight: 600;
}
.hw-product-hero-trust i { color: var(--hw-green); font-size: .7rem; }

/* product hero aside card */
.hw-product-hero-aside {
  background: linear-gradient(160deg, rgba(13,21,48,.98), rgba(6,12,32,.98));
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 24px; padding: 28px;
  box-shadow: 0 24px 64px rgba(3,7,26,.5), 0 0 0 1px rgba(99,102,241,.08);
  position: relative; overflow: hidden;
}
.hw-product-hero-aside::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.1), transparent 60%);
  pointer-events: none;
}
.hw-aside-label {
  font-size: .7rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hw-indigo);
  margin-bottom: 14px; display: block;
}
.hw-aside-price {
  font-size: 2.8rem; font-weight: 900;
  letter-spacing: -.05em; color: #f1f5f9;
  line-height: 1;
}
.hw-aside-price sup { font-size: 1.2rem; vertical-align: super; font-weight: 700; }
.hw-aside-price sub { font-size: .9rem; color: #475569; font-weight: 500; }
.hw-aside-period { font-size: .82rem; color: #475569; margin: 6px 0 20px; }
.hw-aside-features { list-style: none; padding: 0; margin: 0 0 20px; }
.hw-aside-features li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; font-size: .88rem; color: #cbd5e1;
  border-bottom: 1px solid rgba(148,163,184,.06);
}
.hw-aside-features li:last-child { border-bottom: none; }
.hw-aside-features i.fa-check { color: var(--hw-green); font-size: .8rem; }
.hw-aside-guarantee {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: .75rem; color: #475569; margin-top: 12px;
}
.hw-aside-guarantee i { color: var(--hw-green); }

@media (max-width: 991px) {
  .hw-product-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hw-product-hero-aside { max-width: 480px; }
}

/* ============================================================
   PRICING SECTION — make it stand out
   ============================================================ */
.hw-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
  align-items: start;
}
.hw-pricing-grid.hw-pricing-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px)  {
  .hw-pricing-grid, .hw-pricing-grid.hw-pricing-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px)  {
  .hw-pricing-grid, .hw-pricing-grid.hw-pricing-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   COMPARISON TABLE — premium redesign
   ============================================================ */
.hw-compare-wrap {
  overflow-x: auto;
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(13,21,48,.98), rgba(6,12,32,.98));
  box-shadow: 0 20px 56px rgba(3,7,26,.45);
}
.hw-compare-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.hw-compare-table th {
  padding: 16px 20px;
  background: rgba(99,102,241,.08);
  color: #dbeafe; font-size: .72rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid rgba(148,163,184,.1);
  text-align: left;
}
.hw-compare-table th:first-child { border-radius: 22px 0 0 0; }
.hw-compare-table th:last-child  { border-radius: 0 22px 0 0; }
.hw-compare-table td {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(148,163,184,.06);
  color: #94a3b8; font-size: .88rem; vertical-align: middle;
}
.hw-compare-table td:first-child { color: #f1f5f9; font-weight: 700; }
.hw-compare-table tr:last-child td { border-bottom: none; }
.hw-compare-table tr:hover td { background: rgba(99,102,241,.04); }
.hw-compare-table .fa-check { color: var(--hw-green); }
.hw-compare-table .fa-xmark { color: #334155; }

/* ============================================================
   CLIENT AREA — PREMIUM DASHBOARD
   ============================================================ */
.hw-dashboard {
  padding: 32px 0 60px;
}
.hw-dashboard-welcome {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(148,163,184,.07);
}
.hw-dashboard-welcome h1 {
  font-size: 1.8rem; font-weight: 900; color: #f1f5f9;
  margin: 0 0 6px; letter-spacing: -.03em;
}
.hw-dashboard-welcome p { color: #64748b; margin: 0; }

/* service cards in dashboard */
.hw-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.hw-service-card {
  background: linear-gradient(160deg, rgba(13,21,48,.95), rgba(6,12,32,.95));
  border: 1px solid rgba(148,163,184,.09);
  border-radius: 18px; padding: 20px;
  transition: all .2s ease;
  position: relative; overflow: hidden;
}
.hw-service-card:hover { border-color: rgba(99,102,241,.25); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(3,7,26,.4); }
.hw-service-card-name { font-size: .95rem; font-weight: 800; color: #f1f5f9; margin-bottom: 4px; }
.hw-service-card-domain { font-size: .82rem; color: var(--hw-indigo); font-family: monospace; margin-bottom: 12px; }
.hw-service-card-meta { display: flex; align-items: center; justify-content: space-between; }
.hw-service-card-cycle { font-size: .75rem; color: #475569; }

/* client area sidebar */
.hw-sidebar-nav { list-style: none; padding: 0; margin: 0; }
.hw-sidebar-nav li { margin-bottom: 2px; }
.hw-sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  font-size: .88rem; font-weight: 600; color: #94a3b8;
  transition: all .18s ease;
}
.hw-sidebar-nav a:hover { background: rgba(99,102,241,.08); color: var(--hw-indigo) !important; }
.hw-sidebar-nav a.active { background: rgba(99,102,241,.1); color: var(--hw-indigo) !important; font-weight: 700; }
.hw-sidebar-nav i { width: 18px; text-align: center; font-size: .88rem; }

/* ============================================================
   LOGIN / AUTH PAGE
   ============================================================ */
.hw-auth-page {
  min-height: 80vh; display: flex;
  align-items: center; justify-content: center;
  padding: 40px 16px;
  background:
    radial-gradient(ellipse 60% 60% at 20% 20%, rgba(99,102,241,.12), transparent 55%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(56,189,248,.08), transparent 50%),
    var(--hw-bg);
}
.hw-auth-card {
  width: 100%; max-width: 460px;
  background: linear-gradient(160deg, rgba(13,21,48,.98), rgba(6,12,32,.98));
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 28px; padding: 40px;
  box-shadow: 0 24px 72px rgba(3,7,26,.55), 0 0 0 1px rgba(99,102,241,.06);
  position: relative; overflow: hidden;
}
.hw-auth-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.08), transparent 55%);
  pointer-events: none;
}
.hw-auth-logo { text-align: center; margin-bottom: 28px; }
.hw-auth-logo img { height: 36px; }
.hw-auth-title { font-size: 1.5rem; font-weight: 900; color: #f1f5f9; text-align: center; margin: 0 0 6px; }
.hw-auth-sub   { font-size: .88rem; color: #64748b; text-align: center; margin: 0 0 28px; }
.hw-auth-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: .75rem; color: #334155; margin: 20px 0;
}
.hw-auth-divider::before, .hw-auth-divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(148,163,184,.1);
}
.hw-auth-footer { text-align: center; margin-top: 20px; font-size: .83rem; color: #475569; }
.hw-auth-footer a { color: var(--hw-indigo); font-weight: 700; }

/* ============================================================
   ANIMATED GRADIENT BORDER (featured cards)
   ============================================================ */
@keyframes hw-border-spin {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.hw-glow-border {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.hw-glow-border::after {
  content: '';
  position: absolute;
  inset: -1px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--angle), #4f46e5, #6366f1, #38bdf8, #34d399, #4f46e5);
  animation: hw-border-spin 4s linear infinite;
  opacity: 0;
  transition: opacity .3s ease;
}
.hw-glow-border:hover::after { opacity: 0.7; }

/* ============================================================
   FOOTER — final layer improvements
   ============================================================ */
.ha-footer-brand p { color: #475569; font-size: .88rem; line-height: 1.65; }
.ha-footer-col h3 {
  font-size: .7rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  color: #64748b; margin-bottom: 16px;
}
.ha-footer-col ul { list-style: none; padding: 0; margin: 0; }
.ha-footer-col li { margin-bottom: 4px; }
.ha-footer-col a {
  font-size: .85rem; color: #475569 !important;
  transition: color .18s ease; display: block; padding: 3px 0;
}
.ha-footer-col a:hover { color: #f1f5f9 !important; }
.ha-footer-bottom .copyright { font-size: .78rem; color: #334155; }
.hw-footer-grid {
  display: grid;
  grid-template-columns: 1.8fr repeat(5, 1fr);
  gap: 28px;
  padding: 48px 0 36px;
}
@media (max-width: 1100px) { .hw-footer-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px)  { .hw-footer-grid { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   MOBILE FINAL ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  .hw-hero-grid { grid-template-columns: 1fr; }
  .hw-hero-title { font-size: 2.3rem; }
  .hw-product-hero-title { font-size: 2rem; }
  .hw-pricing-grid { grid-template-columns: 1fr; }
  .hw-testimonials-grid { grid-template-columns: 1fr; }
  .hw-info-grid { grid-template-columns: 1fr; }
  .hw-cta-box { padding: 36px 24px; }
  .hw-service-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   UTILITY: Ensure consistent p/small color in cards
   ============================================================ */
.hw-product-card p,
.hw-feature-card p,
.hw-info-card p,
.hw-testimonial-card p,
.hw-plan-card p { color: #64748b !important; }

.hw-product-card strong,
.hw-feature-card strong,
.hw-plan-card strong { color: #f1f5f9; }

/* ============================================================
   HOSTAVVY v6.5 — SERVICE PAGE + CLIENT AREA FINAL POLISH
   ============================================================ */

/* plan-desc — missing rule */
.hw-plan-desc {
  font-size: .85rem;
  color: #64748b;
  margin-bottom: 14px;
  line-height: 1.6;
}

/* plan-feature — individual item (template uses hw-plan-feature, CSS had hw-plan-features) */
.hw-plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: .88rem;
  color: #cbd5e1;
}
.hw-plan-feature i.fa-check { color: var(--hw-green); margin-top: 3px; font-size: .8rem; flex-shrink: 0; }
.hw-plan-feature i.fa-xmark { color: #334155; margin-top: 3px; font-size: .8rem; flex-shrink: 0; }

/* ============================================================
   PAGE HERO — service pages (hw-page-hero family)
   Make it visually stunning
   ============================================================ */
.hw-page-hero {
  position: relative;
  padding: 76px 0 60px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(99,102,241,.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 50%,  rgba(56,189,248,.09),  transparent 50%),
    var(--hw-bg);
}
.hw-page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236366f1' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.hw-page-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(to bottom, transparent, var(--hw-bg));
  pointer-events: none;
}
.hw-page-hero .hw-eyebrow { margin-bottom: 16px; }
.hw-page-hero-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900; letter-spacing: -.04em;
  color: #f1f5f9; line-height: 1.05;
  max-width: 800px; margin: 12px auto 18px;
}
.hw-page-hero-sub {
  font-size: 1.05rem; line-height: 1.72;
  color: #64748b !important;
  max-width: 620px; margin: 0 auto 28px;
}
.hw-cro-mini-proof {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 18px;
}
.hw-cro-mini-proof span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  background: rgba(13,21,48,.72);
  border: 1px solid rgba(148,163,184,.1);
  border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: #94a3b8;
}
.hw-cro-mini-proof img { width: 16px; height: 16px; }

/* ============================================================
   TRUST BAR — service pages
   ============================================================ */
.hw-trust-bar {
  background: rgba(13,21,48,.5);
  border-top: 1px solid rgba(148,163,184,.06);
  border-bottom: 1px solid rgba(148,163,184,.06);
  padding: 16px 0;
}
.hw-trust-items {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 6px 24px;
}
.hw-trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; color: #64748b;
}
.hw-trust-item i { color: var(--hw-green); font-size: .75rem; }

/* ============================================================
   PLAN BADGE + DIVIDER
   ============================================================ */
.hw-plan-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 999px;
  font-size: .68rem; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(56,189,248,.15));
  color: var(--hw-indigo);
  border: 1px solid rgba(99,102,241,.25);
  margin-bottom: 10px;
  width: fit-content;
}
.hw-plan-divider {
  width: 100%; height: 1px;
  background: rgba(148,163,184,.08);
  margin: 16px 0;
}

/* ============================================================
   PLAN CARD — elevated from v6.3 base
   ============================================================ */
.hw-plan-card {
  background: linear-gradient(160deg, rgba(13,21,48,.97), rgba(6,12,32,.97));
  border: 1px solid rgba(148,163,184,.1);
  border-radius: 24px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: all .24s cubic-bezier(.4,0,.2,1);
}
.hw-plan-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.07), transparent 60%);
  opacity: 0; transition: opacity .24s ease;
}
.hw-plan-card:hover {
  transform: translateY(-6px);
  border-color: rgba(99,102,241,.3);
  box-shadow: 0 28px 72px rgba(3,7,26,.55);
}
.hw-plan-card:hover::before { opacity: 1; }

.hw-plan-card.hw-plan-featured {
  border-color: rgba(99,102,241,.4);
  background: linear-gradient(160deg, rgba(17,22,54,.98), rgba(9,14,38,.98));
  box-shadow: 0 20px 56px rgba(79,70,229,.18),
              inset 0 1px 0 rgba(99,102,241,.15);
}
.hw-plan-card.hw-plan-featured::before { opacity: 1; }
.hw-plan-card.hw-plan-featured .hw-plan-name { color: var(--hw-indigo); }

/* ============================================================
   PRICING GRID — final 3-col base
   ============================================================ */
.hw-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
  align-items: start;
}
.hw-pricing-grid.hw-pricing-4 {
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 920px) {
  .hw-pricing-grid, .hw-pricing-grid.hw-pricing-4 {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 560px) {
  .hw-pricing-grid, .hw-pricing-grid.hw-pricing-4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION INCLUDE BLOCKS (product-detail-block, section-cta, section-hero)
   ============================================================ */
.hw-section-soft {
  background:
    radial-gradient(ellipse 80% 60% at 100% 30%, rgba(99,102,241,.06), transparent 55%),
    rgba(6,12,32,.45);
  border-top: 1px solid rgba(148,163,184,.05);
  border-bottom: 1px solid rgba(148,163,184,.05);
}

/* ============================================================
   MINI CARDS / FEATURE HIGHLIGHT STRIPS
   ============================================================ */
.hw-mini-feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.hw-mini-feature {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px;
  background: rgba(13,21,48,.75);
  border: 1px solid rgba(148,163,184,.08);
  border-radius: 14px;
}
.hw-mini-feature i { color: var(--hw-indigo); font-size: .95rem; margin-top: 2px; flex-shrink: 0; }
.hw-mini-feature strong { display: block; font-size: .88rem; color: #f1f5f9; margin-bottom: 2px; }
.hw-mini-feature span { font-size: .78rem; color: #475569; line-height: 1.5; }

/* ============================================================
   ABOUT PAGE SPECIFICS
   ============================================================ */
.hw-about-hero { padding: 76px 0 56px; text-align: center; }
.hw-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .hw-about-grid { grid-template-columns: 1fr; }
}
.hw-about-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-top: 32px;
}
.hw-value-card {
  padding: 24px; border-radius: 18px;
  background: rgba(13,21,48,.8);
  border: 1px solid rgba(148,163,184,.09);
  transition: all .2s ease;
}
.hw-value-card:hover { border-color: rgba(99,102,241,.2); transform: translateY(-2px); }
.hw-value-card i { font-size: 1.3rem; color: var(--hw-indigo); margin-bottom: 12px; display: block; }
.hw-value-card h3 { font-size: .95rem; font-weight: 800; color: #f1f5f9; margin: 0 0 6px; }
.hw-value-card p  { font-size: .83rem; color: #475569; margin: 0; line-height: 1.6; }

/* ============================================================
   CONTACT PAGE SPECIFICS
   ============================================================ */
.hw-contact-card {
  padding: 24px;
  background: rgba(13,21,48,.85);
  border: 1px solid rgba(148,163,184,.09);
  border-radius: 18px;
  display: flex; align-items: flex-start; gap: 16px;
  transition: all .2s ease;
}
.hw-contact-card:hover { border-color: rgba(99,102,241,.2); }
.hw-contact-card-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(99,102,241,.12); color: var(--hw-indigo);
  font-size: 1.1rem;
}
.hw-contact-card h3 { font-size: .92rem; font-weight: 800; color: #f1f5f9; margin: 0 0 4px; }
.hw-contact-card p  { font-size: .82rem; color: #475569; margin: 0; line-height: 1.6; }

/* ============================================================
   COMPARISON PAGES (vs Hostinger etc.)
   ============================================================ */
.hw-vs-hero { padding: 72px 0 56px; text-align: center; }
.hw-vs-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px; border-radius: 999px;
  background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2);
  font-size: .82rem; font-weight: 800; color: var(--hw-indigo);
  margin-bottom: 20px;
}
.hw-vs-score {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: center; max-width: 640px;
  margin: 32px auto;
  padding: 24px; border-radius: 22px;
  background: rgba(13,21,48,.85);
  border: 1px solid rgba(99,102,241,.18);
}
.hw-vs-score-item { text-align: center; }
.hw-vs-score-num { font-size: 2rem; font-weight: 900; color: var(--hw-indigo); }
.hw-vs-score-label { font-size: .72rem; color: #475569; text-transform: uppercase; letter-spacing: .08em; }
.hw-vs-divider { font-size: .78rem; color: #334155; font-weight: 700; }

/* ============================================================
   AFFILIATE PAGE
   ============================================================ */
.hw-affiliate-hero { text-align: center; padding: 72px 0 56px; }
.hw-commission-card {
  text-align: center; padding: 32px 24px;
  background: linear-gradient(160deg, rgba(13,21,48,.95), rgba(6,12,32,.95));
  border: 1px solid rgba(99,102,241,.2); border-radius: 22px;
  transition: all .22s ease;
}
.hw-commission-card:hover { transform: translateY(-4px); box-shadow: 0 20px 56px rgba(3,7,26,.45); }
.hw-commission-rate { font-size: 2.8rem; font-weight: 900; color: var(--hw-green); margin-bottom: 8px; }
.hw-commission-label { font-size: .82rem; color: #64748b; text-transform: uppercase; letter-spacing: .08em; }

/* ============================================================
   PRICING TOGGLE (annual/monthly if used)
   ============================================================ */
.hw-billing-toggle {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px; background: rgba(13,21,48,.9);
  border: 1px solid rgba(148,163,184,.12); border-radius: 999px;
  margin-bottom: 32px;
}
.hw-billing-option {
  padding: 8px 20px; border-radius: 999px; cursor: pointer;
  font-size: .85rem; font-weight: 700; color: #64748b;
  transition: all .18s ease;
}
.hw-billing-option.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  box-shadow: 0 4px 12px rgba(79,70,229,.35);
}
.hw-billing-save {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.2);
  font-size: .7rem; font-weight: 700; color: #34d399; margin-left: 4px;
}

/* ============================================================
   ANNOUNCEMENT PAGE
   ============================================================ */
.hw-announcement-card {
  padding: 24px;
  background: rgba(13,21,48,.85);
  border: 1px solid rgba(148,163,184,.09);
  border-radius: 18px; margin-bottom: 14px;
  transition: all .2s ease;
}
.hw-announcement-card:hover { border-color: rgba(99,102,241,.2); transform: translateX(4px); }
.hw-announcement-card .hw-announcement-title { color: #f1f5f9; font-weight: 800; margin-bottom: 8px; }
.hw-announcement-card .hw-announcement-date { font-size: .75rem; color: #334155; margin-bottom: 10px; }
.hw-announcement-card .hw-announcement-excerpt { font-size: .88rem; color: #64748b; line-height: 1.65; }

/* ============================================================
   FINAL WHMCS PARENT OVERRIDES
   Ensure Bootstrap 4 components look native with our theme
   ============================================================ */
.pagination .page-link {
  background: rgba(13,21,48,.85);
  border-color: rgba(148,163,184,.12);
  color: #94a3b8;
  border-radius: 8px !important;
  margin: 0 2px;
}
.pagination .page-link:hover { background: rgba(99,102,241,.1); color: var(--hw-indigo); border-color: rgba(99,102,241,.25); }
.pagination .page-item.active .page-link { background: linear-gradient(135deg, #4f46e5, #6366f1); border-color: transparent; color: #fff; }
.pagination .page-item.disabled .page-link { opacity: .4; }

.modal-content { background: rgba(13,21,48,.98) !important; border: 1px solid rgba(99,102,241,.2) !important; border-radius: 22px !important; }
.modal-header { border-bottom: 1px solid rgba(148,163,184,.08) !important; }
.modal-footer { border-top: 1px solid rgba(148,163,184,.08) !important; }
.modal-title { color: #f1f5f9 !important; font-weight: 800; }
.close { color: #94a3b8 !important; text-shadow: none; opacity: .7; }
.close:hover { color: #f1f5f9 !important; opacity: 1; }

.nav-tabs { border-bottom: 1px solid rgba(148,163,184,.1); }
.nav-tabs .nav-link { color: #64748b; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 18px; font-weight: 700; }
.nav-tabs .nav-link:hover { color: var(--hw-indigo); border-bottom-color: rgba(99,102,241,.3); background: transparent; }
.nav-tabs .nav-link.active { color: var(--hw-indigo) !important; border-bottom-color: var(--hw-indigo); background: transparent; }
.tab-content { padding: 20px 0; }

.badge { border-radius: 6px; font-weight: 700; }
.badge-success { background: rgba(52,211,153,.15) !important; color: #34d399 !important; }
.badge-danger  { background: rgba(248,113,113,.12) !important; color: #f87171 !important; }
.badge-warning { background: rgba(251,191,36,.1)  !important; color: #fbbf24 !important; }
.badge-info    { background: rgba(56,189,248,.1)   !important; color: #38bdf8 !important; }
.badge-default, .badge-secondary { background: rgba(100,116,139,.15) !important; color: #94a3b8 !important; }
.badge-primary { background: rgba(99,102,241,.15)  !important; color: #818cf8 !important; }

.progress { background: rgba(148,163,184,.1); border-radius: 999px; height: 8px; }
.progress-bar { background: linear-gradient(90deg, #4f46e5, #6366f1, #38bdf8); border-radius: 999px; }

input[type="radio"], input[type="checkbox"] {
  accent-color: #6366f1;
}
.form-check-label { color: #cbd5e1; font-size: .88rem; }
.input-group-text { background: rgba(6,12,32,.85); border-color: rgba(148,163,184,.14); color: #94a3b8; }
select option { background: #0d1530; color: #f1f5f9; }

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .ha-header, .ha-footer, .hw-trust-strip, .hw-announce-bar,
  .hw-back-to-top, .hw-cookie-bar { display: none !important; }
  body { background: #fff !important; color: #111 !important; }
  .hw-plan-card, .hw-feature-card, .hw-card { border: 1px solid #ddd !important; background: #fff !important; }
}

/* ============================================================
   HOSTAVVY v6.6 — CLIENT AREA ROW COMPONENTS + FINAL GAPS
   ============================================================ */

/* --- Service rows --- */
.hw-service-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(6,12,32,.6);
  border: 1px solid rgba(148,163,184,.07);
  border-radius: var(--hw-radius);
  transition: all var(--hw-transition);
  margin-bottom: 8px;
}
.hw-service-row:last-child { margin-bottom: 0; }
.hw-service-row:hover { border-color: rgba(99,102,241,.2); background: rgba(13,21,48,.9); }
.hw-service-name   { font-weight: 700; font-size: .92rem; color: #f1f5f9; }
.hw-service-domain { font-size: .78rem; color: var(--hw-indigo); font-family: monospace; margin-top: 2px; }
.hw-service-status { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

/* --- Invoice rows --- */
.hw-invoice-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(6,12,32,.6);
  border: 1px solid rgba(148,163,184,.07);
  border-radius: var(--hw-radius);
  transition: all var(--hw-transition);
  margin-bottom: 8px;
  text-decoration: none !important;
  color: inherit !important;
}
.hw-invoice-row:hover { border-color: rgba(99,102,241,.2); background: rgba(13,21,48,.9); color: inherit !important; }
.hw-invoice-id    { font-size: .78rem; color: #475569; font-family: monospace; white-space: nowrap; }
.hw-invoice-total { font-weight: 800; font-size: .9rem; color: #f1f5f9; white-space: nowrap; }

/* ============================================================
   HOSTAVVY v6.7 — BOOTSTRAP 4 MODAL + UTILITY FORCE-FIXES
   Ensures modals hide, d-none works, Bootstrap compat even
   when WHMCS assets load from wrong path
   ============================================================ */

/* --- Force-hide Bootstrap modals (override any conflict) --- */
.modal          { display: none !important; overflow: hidden; }
.modal.show     { display: block !important; overflow-x: hidden; overflow-y: auto; }
.modal-open     { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(0,0,0,.5); }
.modal-backdrop.show { opacity: 1; }
.modal-backdrop.fade { opacity: 0; }

/* --- Bootstrap 4 utility classes (ensure they work) --- */
.d-none    { display: none !important; }
.d-block   { display: block !important; }
.d-flex    { display: flex !important; }
.d-grid    { display: grid !important; }
.d-inline  { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.invisible { visibility: hidden !important; }
.visible   { visibility: visible !important; }

/* w-hidden is used by WHMCS orderforms */
.w-hidden  { display: none !important; }

/* --- Bootstrap 4 responsive display utilities --- */
@media (max-width: 575.98px) {
  .d-sm-none  { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex  { display: flex !important; }
}
@media (min-width: 576px) {
  .d-sm-none  { display: none !important; }
  .d-sm-block { display: block !important; }
}
@media (max-width: 767.98px) {
  .hidden-xs { display: none !important; }
  .visible-xs-inline { display: inline !important; }
}
@media (min-width: 768px) {
  .hidden-xs { display: none !important; }
  .d-sm-none  { display: none !important; }
}

/* --- Bootstrap grid alignment helpers --- */
.text-right  { text-align: right !important; }
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.float-right { float: right !important; }
.float-left  { float: left !important; }
.pull-right  { float: right !important; }
.pull-left   { float: left !important; }
.clearfix::after { content: ''; display: table; clear: both; }
.overflow-hidden { overflow: hidden !important; }

/* --- WHMCS cart specific Bootstrap overrides --- */
.prepend-icon { position: relative; }
.prepend-icon .field-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  z-index: 2; color: #64748b; pointer-events: none;
}
.prepend-icon .field { padding-left: 38px; }
.field.form-control {
  background: rgba(6,12,32,.85) !important;
  border: 1px solid rgba(148,163,184,.15) !important;
  color: #f1f5f9 !important;
  border-radius: 10px !important;
  height: 46px;
}
.field.form-control:focus {
  border-color: rgba(99,102,241,.5) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
  background: rgba(6,12,32,.95) !important;
}
select.field.form-control { height: 46px !important; }
textarea.field.form-control { height: auto !important; min-height: 100px !important; padding: 12px !important; padding-left: 38px !important; }

/* WHMCS cart rows/sections */
.header-lined { border-bottom: 1px solid rgba(148,163,184,.1); margin-bottom: 24px; padding-bottom: 14px; }
.header-lined h1 { font-size: 2rem; font-weight: 900; color: #f1f5f9; margin: 0; }
.sub-heading { margin: 24px 0 14px; }
.sub-heading .primary-bg-color {
  display: inline-block;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 12px; border-radius: 20px;
}

/* Order summary styling */
.order-summary {
  background: linear-gradient(160deg, rgba(13,21,48,.97), rgba(6,12,32,.97)) !important;
  border: 1px solid rgba(99,102,241,.2) !important;
  border-radius: 20px !important;
  padding: 24px !important;
}
.order-summary h2 { color: #f1f5f9 !important; font-size: 1.2rem !important; font-weight: 800 !important; }
.order-summary .subtotal { display: flex; justify-content: space-between; color: #64748b; padding-bottom: 10px; border-bottom: 1px solid rgba(148,163,184,.08); }
.total-due-today {
  background: rgba(99,102,241,.1) !important;
  border: 1px solid rgba(99,102,241,.2) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  text-align: center !important;
}
.total-due-today .amt { display: block; font-size: 1.8rem !important; font-weight: 900 !important; color: #818cf8 !important; }
#totalDueToday strong, #totalCartPrice { color: #818cf8 !important; font-weight: 900 !important; }

/* Checkout button in summary */
.btn-checkout {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  padding: 13px 20px !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 14px !important;
  font-size: .95rem !important;
  transition: filter .2s ease, transform .2s ease !important;
}
.btn-checkout:hover { filter: brightness(1.08) !important; transform: translateY(-1px) !important; color: #fff !important; }
.btn-checkout.disabled, .btn-checkout[class*="disabled"] { opacity: .5 !important; cursor: not-allowed !important; }

/* Cart items */
.view-cart-items { border: 1px solid rgba(148,163,184,.1) !important; border-radius: 12px !important; overflow: hidden !important; }
.view-cart-items .item { padding: 14px 16px !important; border-bottom: 1px solid rgba(148,163,184,.06) !important; }
.view-cart-items .item:last-child { border-bottom: none !important; }
.item-title { display: block !important; font-weight: 700 !important; color: #f1f5f9 !important; }
.item-group, .item-domain { display: block !important; font-size: .8rem !important; color: #64748b !important; }
.item-price { text-align: right !important; font-weight: 700 !important; color: #f1f5f9 !important; }
.item-price .cycle { display: block !important; font-size: .75rem !important; color: #475569 !important; font-weight: 400 !important; }
.view-cart-empty { padding: 40px !important; text-align: center !important; color: #64748b !important; }

/* Cart promo tabs */
.view-cart-tabs .nav-tabs { border-bottom: 1px solid rgba(148,163,184,.1); }
.view-cart-tabs .nav-link { color: #64748b !important; border: none !important; border-bottom: 2px solid transparent !important; font-weight: 700; }
.view-cart-tabs .nav-link.active { color: #818cf8 !important; border-bottom-color: #818cf8 !important; background: transparent !important; }
.view-cart-tabs .tab-content { background: rgba(6,12,32,.6); border: 1px solid rgba(148,163,184,.08); border-top: none; border-radius: 0 0 10px 10px; padding: 16px; }
.view-cart-promotion-code { background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2); border-radius: 8px; padding: 10px 14px; font-size: .85rem; color: #818cf8; margin-bottom: 10px; }

/* Modal styling (when actually visible/active) */
.modal-dialog { max-width: 480px; margin: 60px auto; }
.modal-content { background: rgba(10,16,36,.98) !important; border: 1px solid rgba(99,102,241,.25) !important; border-radius: 20px !important; }
.modal-body { padding: 24px !important; color: #94a3b8 !important; }
.modal-footer { padding: 14px 24px !important; border-top: 1px solid rgba(148,163,184,.08) !important; }
.modal-title { color: #f1f5f9 !important; font-weight: 800 !important; }
.close { color: #64748b !important; text-shadow: none !important; opacity: 1 !important; font-size: 1.4rem !important; }
.close:hover { color: #f1f5f9 !important; }

/* Continue link */
.btn-continue-shopping { color: #64748b !important; font-size: .82rem !important; display: block !important; text-align: center !important; margin-top: 8px !important; }
.btn-continue-shopping:hover { color: #818cf8 !important; }

/* Scrolling panel */
#scrollingPanelContainer { position: sticky; top: 100px; }

/* ============================================================
   CSS VERSION BUMP — v6.7
   ============================================================ */

/* ============================================================
   HOSTAVVY v6.8 — PRODUCT LISTING + CART SIDEBAR
   ============================================================ */

/* --- Product listing grid --- */
.hw-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 8px 0 24px;
}

/* --- Product listing card --- */
.hw-product-listing-card {
  background: linear-gradient(160deg, rgba(13,21,48,.96), rgba(6,12,32,.96));
  border: 1px solid rgba(148,163,184,.1);
  border-radius: 22px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: all .22s cubic-bezier(.4,0,.2,1);
}
.hw-product-listing-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.08), transparent 60%);
  opacity: 0; transition: opacity .22s ease;
}
.hw-product-listing-card:hover {
  transform: translateY(-5px);
  border-color: rgba(99,102,241,.3);
  box-shadow: 0 24px 64px rgba(3,7,26,.5);
}
.hw-product-listing-card:hover::before { opacity: 1; }

.hw-product-listing-card--featured {
  border-color: rgba(99,102,241,.4);
  background: linear-gradient(160deg, rgba(17,22,54,.98), rgba(9,14,38,.98));
  box-shadow: 0 20px 56px rgba(79,70,229,.18), inset 0 1px 0 rgba(99,102,241,.15);
}
.hw-product-listing-card--featured::before { opacity: 1; }

/* badge */
.hw-plc-badge {
  position: absolute;
  top: -1px; right: 20px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  font-size: .65rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 12px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 12px rgba(79,70,229,.4);
}

/* header */
.hw-plc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hw-plc-name { font-size: 1.12rem; font-weight: 800; color: #f1f5f9; letter-spacing: -.02em; line-height: 1.3; }
.hw-plc-stock { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: #34d399; white-space: nowrap; }

/* pricing */
.hw-plc-pricing { text-align: center; padding: 14px 0; border-top: 1px solid rgba(148,163,184,.07); border-bottom: 1px solid rgba(148,163,184,.07); }
.hw-plc-from  { font-size: .72rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 2px; }
.hw-plc-label { font-size: .82rem; color: var(--hw-indigo); font-weight: 700; display: block; margin-bottom: 4px; }
.hw-plc-price {
  font-size: 2.4rem; font-weight: 900; letter-spacing: -.05em;
  color: #f1f5f9; line-height: 1.1;
  background: linear-gradient(135deg, #818cf8, #38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hw-plc-cycle { font-size: .78rem; color: #475569; margin-top: 2px; }
.hw-plc-setup { font-size: .72rem; color: #334155; margin-top: 4px; }

/* description */
.hw-plc-desc { font-size: .88rem; color: #64748b; line-height: 1.65; margin: 0; }

/* features list */
.hw-plc-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.hw-plc-features li { display: flex; align-items: flex-start; gap: 9px; font-size: .85rem; color: #cbd5e1; line-height: 1.5; }
.hw-plc-features li .fas.fa-check { color: #34d399; font-size: .78rem; margin-top: 3px; flex-shrink: 0; }
.hw-plc-features li strong { color: #f1f5f9; }

/* footer */
.hw-plc-footer { margin-top: auto; }
.hw-plc-order {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  padding: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  transition: all .2s ease !important;
  text-decoration: none !important;
  font-size: .95rem !important;
}
.hw-plc-order:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff !important; box-shadow: 0 8px 24px rgba(79,70,229,.4) !important; }
.hw-plc-guarantee { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .72rem; color: #475569; margin-top: 8px; }
.hw-plc-guarantee i { color: #34d399; font-size: .68rem; }

/* ============================================================
   CART SIDEBAR — polished dark theme
   ============================================================ */
.cart-sidebar.sidebar,
.cart-sidebar {
  padding-right: 20px;
}
#cart-sidebar,
.categories, .categories-wrapper {
  background: linear-gradient(160deg, rgba(13,21,48,.95), rgba(6,12,32,.95)) !important;
  border: 1px solid rgba(148,163,184,.09) !important;
  border-radius: 18px !important;
  overflow: hidden;
  margin-bottom: 16px;
}
.categories > .category-title,
.categories .panel-heading,
.categories-wrapper > .panel-heading {
  background: rgba(99,102,241,.1) !important;
  border-bottom: 1px solid rgba(99,102,241,.15) !important;
  padding: 14px 18px !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--hw-indigo) !important;
}
.categories ul, .categories-wrapper ul, #cart-sidebar ul {
  list-style: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}
.categories li, .categories-wrapper li { margin: 0 !important; }
.categories a, .categories-wrapper a {
  display: block !important;
  padding: 10px 18px !important;
  color: #94a3b8 !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  transition: all .18s ease !important;
  text-decoration: none !important;
}
.categories a:hover, .categories-wrapper a:hover { background: rgba(99,102,241,.08) !important; color: var(--hw-indigo) !important; }
.categories .active a, .categories li.active a { background: rgba(99,102,241,.1) !important; color: var(--hw-indigo) !important; font-weight: 700 !important; }
.categories a .fa, .categories a i { margin-right: 8px; }
/* Action links */
.categories .action-add-domain a, .categories .action-transfer-domain a, .categories .action-view-cart a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ============================================================
   PRODUCTS PAGE — configureproduct form (add to cart step)
   ============================================================ */
.product-info-container, .product-configuration {
  background: linear-gradient(160deg, rgba(13,21,48,.95), rgba(6,12,32,.95));
  border: 1px solid rgba(148,163,184,.1);
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 20px;
}
.configoption { padding: 14px 0; border-bottom: 1px solid rgba(148,163,184,.06); }
.configoption:last-child { border-bottom: none; }
.configoption label { color: #f1f5f9 !important; font-weight: 700; font-size: .92rem; }
.configoption .form-control { background: rgba(6,12,32,.85) !important; border-color: rgba(148,163,184,.15) !important; color: #f1f5f9 !important; }
.billing-cycle-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.billing-cycle-options .radio label {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 12px;
  background: rgba(6,12,32,.8);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 12px; cursor: pointer;
  transition: all .18s ease; font-size: .85rem; text-align: center;
}
.billing-cycle-options .radio label:hover { border-color: rgba(99,102,241,.3); }
.billing-cycle-options input[type="radio"]:checked + label, .billing-cycle-options .radio.active label {
  border-color: rgba(99,102,241,.5) !important;
  background: rgba(99,102,241,.1) !important;
  color: var(--hw-indigo) !important;
}
.billing-cycle-options .price { font-size: 1rem; font-weight: 800; color: #f1f5f9; display: block; margin: 4px 0; }

/* ============================================================
   HOSTAVVY v6.9 — ILLUSTRATION PLACEHOLDERS
   Replace broken SVGs with premium CSS visuals
   ============================================================ */

/* Command center hero illustration */
.hw-illus-command {
  width: 100%;
  min-height: 320px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(99,102,241,.3), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(56,189,248,.2), transparent 45%),
    linear-gradient(160deg, rgba(13,21,48,.98), rgba(6,12,32,.98));
  border: 1px solid rgba(99,102,241,.25);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 32px;
  box-shadow: 0 32px 80px rgba(3,7,26,.6), 0 0 0 1px rgba(99,102,241,.1);
  position: relative;
  overflow: hidden;
}
.hw-illus-command::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 39px,
    rgba(148,163,184,.03) 40px
  ),
  repeating-linear-gradient(
    90deg, transparent, transparent 39px,
    rgba(148,163,184,.03) 40px
  );
}
.hw-illus-command i {
  display: grid; place-items: center;
  font-size: 2.5rem;
  aspect-ratio: 1;
  border-radius: 20px;
  position: relative; z-index: 1;
  transition: transform .3s ease;
}
.hw-illus-command i:nth-child(1) {
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(56,189,248,.15));
  color: #818cf8;
  box-shadow: 0 8px 24px rgba(99,102,241,.25);
  animation: hw-pulse-1 3s ease-in-out infinite;
}
.hw-illus-command i:nth-child(2) {
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(52,211,153,.12));
  color: #38bdf8;
  box-shadow: 0 8px 24px rgba(56,189,248,.2);
  animation: hw-pulse-2 3s ease-in-out infinite .5s;
}
.hw-illus-command i:nth-child(3) {
  background: linear-gradient(135deg, rgba(52,211,153,.16), rgba(99,102,241,.12));
  color: #34d399;
  box-shadow: 0 8px 24px rgba(52,211,153,.2);
  animation: hw-pulse-3 3s ease-in-out infinite 1s;
}
@keyframes hw-pulse-1 { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes hw-pulse-2 { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes hw-pulse-3 { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
@media (prefers-reduced-motion:reduce) {
  .hw-illus-command i { animation: none !important; }
}

/* Small illustration icons */
.hw-illustration-icon, .fa-cloud-bolt.hw-cro-launch-art, .fa-globe.hw-cro-domain-art {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(56,189,248,.1));
  color: var(--hw-indigo);
  font-size: 1.4rem;
}
.hw-cro-launch-art { flex-shrink: 0; }

/* proof item icons (replace broken SVGs) */
.hw-cro-proof-item i, .hw-cro-mini-proof span i {
  font-size: .9rem;
  color: var(--hw-green);
}

/* empty state icons (replace broken SVGs) */
.hw-empty-asset, .hw-empty-asset--sm {
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(99,102,241,.08);
  color: var(--hw-indigo);
  margin: 0 auto 16px;
}
.hw-empty-asset { width: 72px; height: 72px; font-size: 1.8rem; }
.hw-empty-asset--sm { width: 52px; height: 52px; font-size: 1.3rem; }

/* KB header icon */
.hw-kb-cro-icon {
  display: grid; place-items: center;
  width: 60px; height: 60px;
  border-radius: 18px;
  background: rgba(99,102,241,.1);
  color: var(--hw-indigo);
  font-size: 1.6rem;
  margin: 0 auto 14px;
}

/* Support ticket icon */
.hw-support-form-wrap img, .hw-ticket-guidance img {
  width: 40px; height: 40px;
  border-radius: 12px;
}

/* Contact channel icon */
.hw-contact-channel-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(99,102,241,.1);
  color: var(--hw-indigo);
  font-size: 1.1rem;
  flex-shrink: 0;
}