/* Global Menu + Large Screen Enhancements */

:root {
  /* Brand palette based on your selected combo */
  --ha-brand-primary: #22d3c5;
  --ha-brand-secondary: #16b8e8;
  --ha-brand-bright: #67e8f9;
  --ha-brand-gradient: linear-gradient(135deg, var(--ha-brand-secondary), var(--ha-brand-primary));
  --ha-brand-soft-bg: rgba(34, 211, 197, 0.14);
  --ha-brand-soft-border: rgba(34, 211, 197, 0.5);
  --ha-brand-glow: rgba(22, 184, 232, 0.36);
}

.newsletter-bg,
.newsletter-bg-lite {
  background: none !important;
}

/* Stay Connected: compact, image-free, animated premium gradient */
.newsletter.parallax-section {
  min-height: 420px !important;
  padding: 56px 0 !important;
  background: linear-gradient(130deg, #081a31 0%, #0a2848 52%, #0a3257 100%) !important;
  overflow: hidden;
  isolation: isolate;
}

.newsletter.parallax-section::before {
  content: "";
  position: absolute;
  inset: -25% -10% auto -10%;
  height: 160%;
  background:
    radial-gradient(44% 36% at 12% 18%, rgba(45, 212, 191, 0.28) 0%, rgba(45, 212, 191, 0.06) 46%, transparent 72%),
    radial-gradient(40% 34% at 86% 18%, rgba(14, 165, 233, 0.26) 0%, rgba(14, 165, 233, 0.06) 48%, transparent 74%),
    radial-gradient(30% 24% at 48% 92%, rgba(96, 165, 250, 0.18) 0%, transparent 68%);
  animation: newsletterGradientFlow 18s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

.newsletter.parallax-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(2, 8, 23, 0.5), rgba(6, 26, 47, 0.34)),
    repeating-linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.035) 0,
      rgba(148, 163, 184, 0.035) 1px,
      transparent 1px,
      transparent 86px
    );
  z-index: 0;
  pointer-events: none;
}

.newsletter.parallax-section .parallax-bg,
.newsletter.parallax-section .newsletter-accent-shape {
  display: none !important;
}

.newsletter.parallax-section .newsletter-overlay {
  background: linear-gradient(110deg, rgba(2, 11, 28, 0.45), rgba(5, 34, 57, 0.28)) !important;
}

.newsletter.parallax-section .newsletter-content {
  position: relative;
  z-index: 2;
  padding: 20px 0 !important;
}

.newsletter.parallax-section .newsletter-content .row {
  display: flex;
  align-items: stretch;
}

.newsletter.parallax-section .newsletter-form-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  background: linear-gradient(150deg, rgba(7, 28, 50, 0.5), rgba(9, 38, 63, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.newsletter.parallax-section .newsletter-form {
  margin: 0;
}

.newsletter.parallax-section .newsletter-note {
  margin: 12px 2px 0 !important;
  opacity: 0.92;
  text-align: center;
}

.newsletter.parallax-section .newsletter-form-box::after {
  content: "Secure signup  •  Weekly tips  •  Exclusive offers";
  margin-top: 14px;
  display: block;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(191, 219, 254, 0.88);
  text-align: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  background: linear-gradient(135deg, rgba(8, 33, 58, 0.44), rgba(8, 46, 73, 0.32));
}

@keyframes newsletterGradientFlow {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.86;
  }
  50% {
    transform: translate3d(1.2%, 1.1%, 0) scale(1.03);
    opacity: 0.96;
  }
  100% {
    transform: translate3d(-1.2%, 0.8%, 0) scale(1.02);
    opacity: 0.9;
  }
}

@media (max-width: 991px) {
  .newsletter.parallax-section {
    min-height: 360px !important;
    padding: 44px 0 !important;
  }

  .newsletter.parallax-section .newsletter-content {
    padding: 8px 0 !important;
  }

  .newsletter.parallax-section .newsletter-content .row {
    display: block;
  }

  .newsletter.parallax-section .newsletter-form-box {
    margin-top: 14px;
    padding: 14px;
    min-height: 0;
  }

  .newsletter.parallax-section .newsletter-form-box::after {
    font-size: 11px;
    margin-top: 10px;
    padding: 8px 10px;
  }
}

header {
  position: relative;
  z-index: 1200;
  background: #07192f;
}

.top_header {
  background: linear-gradient(90deg, #0b1c35 0%, #0a2948 45%, #0a3d5b 100%) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  max-height: 62px;
  overflow: hidden;
  transition: max-height 0.26s ease, opacity 0.22s ease, border-color 0.22s ease;
}

.top_header .container,
#header .container {
  width: 100% !important;
  max-width: 1240px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

body.header-compact .top_header .container,
body.header-compact #header .container {
  max-width: 100% !important;
}

.top_menu li,
.top_link ul li a,
.social_icon ul li a {
  color: rgba(226, 232, 240, 0.9) !important;
}

.top_header .top_menu li a {
  color: inherit !important;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.top_header .top_menu li a:hover,
.top_header .top_menu li a:focus {
  color: #ffffff !important;
  opacity: 1;
}

/* Top utility header polish (social + login/register) */
.top_header .row {
  display: flex;
  align-items: center;
}

.top_header ul.top_menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 6px 0;
}

.top_header ul.top_menu li {
  margin: 0 !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

.top_header .col-md-6.col-sm-6.col-xs-12:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;   /* keep everything on ONE line */
  gap: 10px;
  min-width: 0;
}

/* Let the utility bar split space by need, not a fixed 50/50, so the
   "Talk to Sales" button is never clipped on mid-size desktops. */
@media (min-width: 992px) {
  .top_header .row {
    flex-wrap: nowrap;
  }

  .top_header .row > .col-md-6 {
    min-width: 0;
  }

  .top_header .row > .col-md-6:first-child {
    flex: 0 1 auto;
    width: auto !important;
    overflow: hidden;
  }

  .top_header .row > .col-md-6.col-sm-6.col-xs-12:last-child {
    flex: 0 0 auto;
    width: auto !important;
    margin-left: auto;
  }
}

.top_header .social_icon,
.top_header .top_link {
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0;      /* don't squish the button groups */
}

.top_header .social_icon ul,
.top_header .top_link ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;   /* items stay on single row */
  gap: 8px;
}

.top_header .social_icon ul li,
.top_header .top_link ul li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.top_header .social_icon ul li a {
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 8px;
  background: rgba(22, 184, 232, 0.16) !important;
  border: 1px solid rgba(103, 232, 249, 0.28);
  color: #dbeafe !important;
  transition: all 0.2s ease;
}

.top_header .social_icon ul li a:hover {
  background: var(--ha-brand-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.top_header .top_link ul li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px !important;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  box-shadow: none !important;
}

.top_header .top_link ul li.login {
  background: transparent !important;
}

.top_header .top_link ul li.login a {
  background: linear-gradient(135deg, rgba(22, 184, 232, 0.96), rgba(34, 211, 197, 0.96)) !important;
  border: 1px solid rgba(103, 232, 249, 0.4) !important;
  color: #ecfeff !important;
}

.top_header .top_link ul li.login a:hover {
  background: linear-gradient(135deg, #16b8e8, #22d3c5) !important;
  border-color: rgba(103, 232, 249, 0.55) !important;
  color: #04243d !important;
}

.top_header .top_link ul li.register {
  background: transparent !important;
}

.top_header .top_link ul li.register a {
  background: rgba(15, 23, 42, 0.62) !important;
  border: 1px solid rgba(148, 163, 184, 0.44) !important;
  color: #e2e8f0 !important;
}

.top_header .top_link ul li.register a:hover {
  background: rgba(22, 184, 232, 0.24);
  border-color: rgba(103, 232, 249, 0.38);
  color: #ffffff !important;
}

/* AI-style Blog CTA buttons (stable content + rotating gradient border) */
.ha-ai-cta-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px !important;
  border-radius: 999px;
  border: none !important;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ecfeff !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, rgba(6, 16, 35, 0.9), rgba(5, 25, 47, 0.92)) !important;
  box-shadow:
    0 10px 24px rgba(2, 8, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.ha-ai-cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(34, 211, 238, 0.98),
    rgba(94, 234, 212, 0.98),
    rgba(129, 140, 248, 0.98),
    rgba(56, 189, 248, 0.98),
    rgba(34, 211, 238, 0.98)
  );
  background-size: 260% 260%;
  z-index: -1;
  animation: haAiBtnBorderFlow 5.8s ease infinite;
}

.ha-ai-cta-btn::after {
  content: "";
  position: absolute;
  inset: 1.6px;
  border-radius: inherit;
  background: radial-gradient(140% 180% at 18% 14%, rgba(56, 189, 248, 0.18), rgba(6, 13, 28, 0.06) 48%, rgba(6, 13, 28, 0.02) 70%),
    linear-gradient(135deg, rgba(6, 16, 35, 0.9), rgba(5, 25, 47, 0.92));
  z-index: -2;
}

.ha-ai-cta-btn:hover {
  transform: translateY(-1px);
  color: #ffffff !important;
  box-shadow:
    0 13px 28px rgba(2, 8, 23, 0.42),
    0 0 22px rgba(34, 211, 238, 0.2);
}

.ha-ai-cta-btn:active {
  transform: translateY(0);
}

.top_header .top_link ul li.blog-link-btn-item {
  margin-right: 2px !important;
}

.top_header .top_link ul li.blog-link-btn-item a.ha-ai-cta-btn {
  min-width: 138px;
}

.footer-payments .footer-blog-cta-wrap {
  margin-bottom: 12px;
  display: flex;
  justify-content: flex-end;
}

.footer-payments .footer-blog-ai-btn {
  min-width: 170px;
  height: 42px;
}

@keyframes haAiBtnBorderFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (max-width: 991px) {
  .top_header .top_link ul li.blog-link-btn-item {
    width: 100%;
  }

  .top_header .top_link ul li.blog-link-btn-item a.ha-ai-cta-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .footer-payments .footer-blog-cta-wrap {
    justify-content: center;
    margin-bottom: 10px;
  }

  .footer-payments .footer-blog-ai-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ha-ai-cta-btn::before {
    animation: none !important;
  }
}

.top_header .dark-mode-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
}

#header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1250;
  padding: 12px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: padding 0.24s ease, transform 0.24s ease, opacity 0.24s ease;
}

#header .row {
  margin: 0;
}

#header .col-md-12 {
  float: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 14px;
  border-radius: 0;
  border: none;
  background: linear-gradient(140deg, rgba(8, 24, 47, 0.9), rgba(6, 31, 51, 0.86));
  box-shadow: 0 14px 36px rgba(2, 8, 23, 0.42);
  backdrop-filter: blur(10px);
  transition: padding 0.24s ease, box-shadow 0.24s ease, border-radius 0.24s ease, background 0.24s ease;
}

#header .logo {
  padding-right: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

#header .logo #logo {
  max-height: 40px;
  width: auto;
  transition: max-height 0.22s ease, transform 0.24s ease, filter 0.24s ease;
  animation: logoIntroFloat 0.55s ease both;
  transform-origin: center left;
}

#header .logo a {
  display: inline-block;
  border-radius: 10px;
}

#header .logo a:hover #logo {
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 6px 14px rgba(34, 211, 197, 0.2));
}

@keyframes logoIntroFloat {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #header .logo #logo {
    animation: none !important;
    transition: max-height 0.22s ease !important;
  }

  #header .logo a:hover #logo {
    transform: none !important;
    filter: none !important;
  }
}

#header .header-right,
#header .main-navigation,
#header .navbar-default,
#header .navbar-collapse,
#header .nav.navbar-nav,
#header .scrollspy.smooth-scroll,
#header .no_padding {
  background: transparent !important;
  box-shadow: none !important;
}

#header .header-right {
  flex: 1 1 auto;
}

#header .main-navigation {
  width: 100%;
}

#header .navbar {
  min-height: auto;
  margin: 0;
  border: none !important;
  background: transparent !important;
}

#header .navbar-collapse {
  padding: 0 !important;
}

#header .navbar-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  float: none !important;
}

#header .navbar-nav > li {
  float: none;
}

#header .navbar-nav > li > a {
  padding: 8px 12px !important;
  border-radius: 10px;
  color: rgba(226, 232, 240, 0.96) !important;
  font-size: 14px;
  font-weight: 600;
  opacity: 1 !important;
  transition: all 0.22s ease;
}

/* Compact sticky header on scroll */
body.header-compact .top_header {
  max-height: 0;
  opacity: 0;
  border-bottom-color: transparent !important;
}

body.header-compact #header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  padding: 2px 0 !important;
  animation: headerCompactReveal 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
}

body.header-compact {
  padding-top: var(--header-compact-offset, 84px);
}

body.header-compact #header .col-md-12 {
  padding: 4px 10px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(2, 8, 23, 0.34);
}

body.header-compact.header-scroll-down #header {
  transform: translateY(-1px);
}

body.header-compact.header-scroll-down #header .col-md-12 {
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.4);
}

body.header-compact.header-scroll-up #header {
  transform: translateY(0);
}

/* Scroll Glass Effect (Termius-like): apply only while scrolled */
body.header-compact #header .col-md-12 {
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  background: linear-gradient(
    140deg,
    rgba(8, 24, 47, 0.28),
    rgba(7, 31, 53, 0.22),
    rgba(8, 44, 70, 0.2)
  ) !important;
  backdrop-filter: blur(20px) saturate(1.22);
  -webkit-backdrop-filter: blur(20px) saturate(1.22);
  box-shadow:
    0 12px 26px rgba(2, 8, 23, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.header-compact #header .col-md-12::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
}

body.header-compact.header-scroll-down #header .col-md-12 {
  background: linear-gradient(
    140deg,
    rgba(8, 24, 47, 0.34),
    rgba(7, 31, 53, 0.28),
    rgba(8, 44, 70, 0.25)
  ) !important;
}

body.dark-mode.header-compact #header .col-md-12 {
  border-color: rgba(125, 211, 252, 0.28) !important;
  background: linear-gradient(
    140deg,
    rgba(5, 16, 31, 0.34),
    rgba(6, 23, 42, 0.29),
    rgba(7, 35, 55, 0.26)
  ) !important;
}

/* Compact header: force single-layer transparent glass (no extra dark slab) */
body.header-compact #header {
  padding: 0 !important;
}

body.header-compact #header .col-md-12 {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(
    140deg,
    rgba(8, 24, 47, 0.24),
    rgba(7, 31, 53, 0.19),
    rgba(8, 44, 70, 0.16)
  ) !important;
  backdrop-filter: blur(22px) saturate(1.24) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.24) !important;
}

body.header-compact #header .col-md-12::before {
  display: none !important;
}

body.dark-mode.header-compact #header .col-md-12 {
  background: linear-gradient(
    140deg,
    rgba(5, 16, 31, 0.28),
    rgba(6, 23, 42, 0.24),
    rgba(7, 35, 55, 0.2)
  ) !important;
}

body.header-compact.ha-home-global .market-global #header .col-md-12,
body.header-compact.ha-market-global #header .col-md-12,
body.header-compact.ha-market-bd #header .col-md-12 {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(
    140deg,
    rgba(8, 24, 47, 0.24),
    rgba(7, 31, 53, 0.19),
    rgba(8, 44, 70, 0.16)
  ) !important;
}

@keyframes headerCompactReveal {
  0% {
    transform: translateY(-12px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

body.header-compact #header .logo #logo {
  max-height: 32px;
}

body.header-compact #header .navbar-nav > li > a {
  padding: 6px 10px !important;
  font-size: 13px;
  white-space: nowrap;
}

body.header-compact #header .header-right {
  min-width: 0;
}

body.header-compact #header .navbar-collapse {
  min-width: 0;
  overflow: visible;
}

body.header-compact #header .navbar-nav {
  flex-wrap: nowrap;
  overflow: visible;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body.header-compact #header .navbar-nav::-webkit-scrollbar {
  display: none;
}

/* Top login/register hide in compact state; show in main nav */
body.header-compact .top_header .top_link {
  display: none !important;
}

#header .navbar-nav > li.compact-auth-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  font-weight: 700;
}

#header .navbar-nav > li.compact-info-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px !important;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #cfe8ff !important;
  background: rgba(22, 184, 232, 0.14);
  border: 1px solid rgba(103, 232, 249, 0.24);
  line-height: 1;
}

#header .navbar-nav > li.compact-info-item > a:hover {
  color: #ffffff !important;
  background: rgba(22, 184, 232, 0.24);
  border-color: rgba(103, 232, 249, 0.4);
}

#header .navbar-nav > li.compact-theme-item {
  display: none;
}

#header .navbar-nav > li.main-blog-btn-item {
  display: list-item !important;
}

#header .navbar-nav > li.main-blog-btn-item > a.ha-ai-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 130px;
  height: 36px;
  padding: 0 14px !important;
  font-size: 14px;
  line-height: 1 !important;
  vertical-align: middle;
}

#header .navbar-nav > li.main-blog-btn-item > a.ha-ai-cta-btn .fa {
  font-size: 15px;
  line-height: 1;
  position: relative;
  top: 0;
  transform: none;
}

#header .navbar-nav > li.compact-blog-item {
  display: none;
}

#header .navbar-nav > li.compact-theme-item > .compact-theme-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(103, 232, 249, 0.35);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.92), rgba(6, 182, 212, 0.92));
  color: #ecfeff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(2, 8, 23, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

#header .navbar-nav > li.compact-theme-item > .compact-theme-btn .theme-label {
  display: none;
}

#header .navbar-nav > li.compact-theme-item > .compact-theme-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 18px rgba(2, 8, 23, 0.34);
}

#header .navbar-nav > li.compact-auth-item.compact-login > a {
  background: rgba(22, 184, 232, 0.18);
  border: 1px solid rgba(103, 232, 249, 0.34);
  color: #ecfeff !important;
}

#header .navbar-nav > li.compact-auth-item.compact-register > a {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #e2e8f0 !important;
}

body:not(.header-compact) #header .navbar-nav > li.compact-auth-item {
  display: none !important;
}

body.header-compact #header .navbar-nav > li.compact-auth-item {
  display: list-item !important;
}

body:not(.header-compact) #header .navbar-nav > li.compact-info-item {
  display: none !important;
}

body.header-compact #header .navbar-nav > li.compact-info-item {
  display: list-item !important;
}

body.header-compact #header .navbar-nav > li.compact-theme-item {
  display: list-item !important;
}

body.header-compact #header .navbar-nav > li.main-blog-btn-item {
  display: none !important;
}

body.header-compact #header .navbar-nav > li.compact-blog-item {
  display: list-item !important;
}

body.header-compact #header .navbar-nav > li.compact-blog-item > a.ha-ai-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px;
  min-width: 126px;
  padding: 0 14px !important;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1 !important;
  text-align: center;
  vertical-align: middle;
}

body.header-compact #header .navbar-nav > li.compact-blog-item > a.ha-ai-cta-btn .fa {
  font-size: 13px;
  line-height: 1;
  position: relative;
  top: 0;
  transform: none;
}

/* Prevent compact menu overflow on medium-large screens */
@media (max-width: 1720px) {
  body.header-compact #header .navbar-nav > li.compact-info-item.compact-email {
    display: none !important;
  }
}

@media (max-width: 2100px) {
  body.header-compact #header .navbar-nav > li.compact-info-item.compact-email {
    display: none !important;
  }
}

@media (max-width: 1520px) {
  body.header-compact #header .navbar-nav > li.compact-info-item.compact-phone {
    display: none !important;
  }

  body.header-compact #header .navbar-nav > li > a {
    padding: 6px 8px !important;
    font-size: 12px;
  }

  body.header-compact #header .logo #logo {
    max-height: 30px;
  }
}

@media (max-width: 1850px) {
  body.header-compact #header .navbar-nav > li.compact-info-item.compact-phone {
    display: none !important;
  }
}

@media (max-width: 1320px) {
  body.header-compact #header .navbar-nav > li.compact-auth-item.compact-register {
    display: none !important;
  }
}

/* ── Top-bar single-row preservation at medium widths ──────────────────── */
/* Reduce auth-button padding so all items stay on ONE line when the
   viewport is reduced from full-desktop down to ~900px.                   */
@media (max-width: 1300px) {
  .top_header .top_link ul li a {
    padding: 0 12px !important;
    font-size: 13px;
  }
  .top_header .col-md-6.col-sm-6.col-xs-12:last-child {
    gap: 8px;
  }
}

@media (max-width: 1100px) {
  .top_header .top_link ul li a {
    padding: 0 10px !important;
    font-size: 12.5px;
  }
  .top_header .social_icon ul {
    gap: 6px;
  }
  .top_header .social_icon ul li a {
    width: 28px;
    height: 28px;
    line-height: 28px;
  }
}

@media (max-width: 1260px) {
  body.header-compact #header .navbar-nav > li.compact-blog-item {
    display: none !important;
  }
}

/* Keep compact desktop dropdowns usable; apply horizontal-scroll fallback only on tighter widths */
@media (max-width: 1260px) {
  body.header-compact #header .navbar-collapse {
    overflow: hidden;
  }

  body.header-compact #header .navbar-nav {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Compact hover polish */
body.header-compact #header .navbar-nav > li > a:hover,
body.header-compact #header .navbar-nav > li > a:focus {
  border-radius: 10px;
  transform: none;
}

#header .navbar-nav > li > a:hover {
  color: var(--ha-brand-bright) !important;
  background: var(--ha-brand-soft-bg);
}

#header .navbar-nav > li.active > a {
  color: #fff !important;
  background: var(--ha-brand-gradient);
  box-shadow: 0 8px 18px var(--ha-brand-glow);
}

#header .navbar-nav > li > ul {
  margin-top: 10px;
  min-width: 244px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(165deg, rgba(3, 13, 30, 0.998), rgba(6, 23, 44, 0.996)) !important;
  box-shadow:
    0 22px 40px rgba(2, 8, 23, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#header .navbar-nav > li.open > a,
#header .navbar-nav > li > a[aria-expanded="true"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(45, 212, 191, 0.16));
  border-radius: 10px;
}

#header .navbar-nav > li.open > ul {
  margin-top: 8px;
}

#header .navbar-nav > li > ul > li + li {
  margin-top: 2px;
}

#header .navbar-nav > li > ul li a {
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f1f7ff !important;
  text-shadow: none;
  border: 1px solid transparent !important;
  opacity: 1 !important;
}

#header .navbar-nav > li > ul > li:not(:last-child) > a {
  box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.24);
}

#header .navbar-nav > li > ul li a:hover {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(45, 212, 191, 0.2)) !important;
  border-color: rgba(125, 211, 252, 0.52) !important;
  color: #ffffff !important;
}

#header .navbar-nav > li > ul li a:focus,
#header .navbar-nav > li > ul li a:active {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(45, 212, 191, 0.2));
  border-color: rgba(125, 211, 252, 0.48);
  color: #ffffff !important;
  outline: none;
}

body.header-compact #header .navbar-nav > li > ul {
  background: linear-gradient(165deg, rgba(3, 13, 30, 0.998), rgba(6, 23, 44, 0.996)) !important;
  border-color: rgba(125, 211, 252, 0.38);
  box-shadow:
    0 22px 42px rgba(2, 8, 23, 0.66),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

#header .navbar-toggle {
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  background: rgba(8, 24, 47, 0.92);
}

#header .navbar-toggle .icon-bar {
  background: #e2e8f0;
}

@media (max-width: 991px) {
  /* Mobile menu UX upgrade */
  #header .navbar-collapse.in,
  #header .navbar-collapse.collapsing {
    border-radius: 14px !important;
    margin-top: 10px !important;
    padding: 8px !important;
    background: linear-gradient(180deg, rgba(10, 30, 56, 0.98), rgba(12, 42, 72, 0.97)) !important;
    border: 1px solid rgba(125, 211, 252, 0.24) !important;
    box-shadow: 0 16px 34px rgba(2, 8, 23, 0.46) !important;
  }

  #header .navbar-nav > li {
    border-bottom: none !important;
    margin-bottom: 6px;
  }

  #header .navbar-nav > li:last-child {
    margin-bottom: 0;
  }

  #header .navbar-nav > li > a {
    min-height: 46px;
    border-radius: 10px;
    padding: 11px 14px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.25;
    background: rgba(15, 23, 42, 0.24);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #eaf4ff !important;
  }

  #header .navbar-nav > li.active > a,
  #header .navbar-nav > li > a:hover,
  #header .navbar-nav > li > a:focus {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(45, 212, 191, 0.22)) !important;
    border-color: rgba(125, 211, 252, 0.5) !important;
    color: #ffffff !important;
  }

  #header .navbar-nav > li > ul {
    margin: 6px 0 0 0 !important;
    padding: 6px !important;
    border-radius: 10px !important;
    background: rgba(2, 6, 23, 0.42) !important;
    border: 1px solid rgba(125, 211, 252, 0.24) !important;
    box-shadow: none !important;
  }

  #header .navbar-nav > li > ul > li {
    margin-bottom: 4px;
  }

  #header .navbar-nav > li > ul > li:last-child {
    margin-bottom: 0;
  }

  #header .navbar-nav > li > ul > li > a {
    border-radius: 8px !important;
    padding: 10px 12px !important;
    line-height: 1.35;
    background: rgba(15, 23, 42, 0.3) !important;
    border: 1px solid transparent;
    color: #dbeafe !important;
  }

  #header .navbar-nav > li > ul > li > a:hover {
    background: rgba(34, 211, 238, 0.18) !important;
    border-color: rgba(125, 211, 252, 0.42);
    color: #ffffff !important;
  }

  /* Remove night-mode option from mobile menu/header utility */
  .top_header .dark-mode-toggle-li,
  #header .navbar-nav > li.compact-theme-item {
    display: list-item !important;
  }

  .top_header .container,
  #header .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .top_header {
    background: linear-gradient(90deg, #0a1a32 0%, #0a2a46 100%) !important;
  }

  .top_header .row {
    display: block;
  }

  .top_header ul.top_menu {
    justify-content: center;
    gap: 10px 16px;
    padding-bottom: 6px;
  }

  .top_header .col-md-6.col-sm-6.col-xs-12:last-child {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 6px;
  }

  .top_header .social_icon ul,
  .top_header .top_link ul {
    justify-content: center;
  }

  .top_header .top_link ul li a {
    height: 34px;
    padding: 0 14px !important;
    font-size: 13px;
  }

  #header {
    padding: 10px 0 !important;
  }

  #header .col-md-12 {
    padding: 10px 12px;
    border-radius: 0;
  }

  #header .logo #logo {
    max-height: 40px;
  }

  #header .navbar-collapse {
    margin-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    padding-top: 8px !important;
  }

  #header .navbar-nav {
    display: block;
  }

  #header .navbar-nav > li > a {
    padding: 11px 12px !important;
    color: #e2e8f0 !important;
  }

  body.header-compact .top_header {
    max-height: 0;
  }

  body.header-compact #header .logo #logo {
    max-height: 30px;
  }

  body.header-compact #header .navbar-nav > li.compact-auth-item > a {
    margin-top: 6px;
  }

  #header .navbar-nav > li.compact-info-item {
    display: none !important;
  }

  #header .navbar-nav > li.compact-theme-item {
    display: none !important;
  }

  /* Mobile menu toggle polish for light mode */
  #header .navbar-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(103, 232, 249, 0.45) !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(8, 47, 73, 0.88)) !important;
    box-shadow: 0 8px 18px rgba(2, 8, 23, 0.32) !important;
  }

  #header .navbar-toggle:hover,
  #header .navbar-toggle:focus {
    background: linear-gradient(135deg, rgba(22, 184, 232, 0.96), rgba(34, 211, 197, 0.95)) !important;
    border-color: rgba(103, 232, 249, 0.6) !important;
  }

  #header .navbar-toggle .icon-bar {
    background: #ecfeff !important;
    height: 3px !important;
    border-radius: 999px !important;
    opacity: 1 !important;
  }
}

/* Ultra-modern pricing cards (Global + BD home) */
.pricing-modern-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 480px at 15% -10%, rgba(34, 211, 197, 0.14), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(59, 130, 246, 0.15), transparent 58%),
    linear-gradient(180deg, #030b1a 0%, #061429 52%, #081a32 100%) !important;
  padding: 92px 0 96px !important;
}

.pricing-modern-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.06) 0%, transparent 45%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 72px);
}

.pricing-modern-section .pricing-header {
  margin-bottom: 44px !important;
}

.pricing-modern-section .pricing-main-title {
  color: #f8fbff !important;
  letter-spacing: -0.02em;
  font-weight: 800 !important;
  text-wrap: balance;
}

.pricing-modern-section .pricing-subtitle {
  color: rgba(226, 232, 240, 0.9) !important;
  max-width: 760px;
  margin: 14px auto 0 !important;
}

.pricing-modern-section .pricing-cards-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px !important;
  align-items: stretch;
}

.pricing-modern-section .pricing-cards-wrapper > div {
  width: auto !important;
  float: none !important;
}

.pricing-modern-section .pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 22px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background:
    linear-gradient(160deg, rgba(8, 20, 41, 0.92) 0%, rgba(8, 24, 49, 0.86) 44%, rgba(7, 30, 59, 0.92) 100%) !important;
  box-shadow:
    0 30px 80px rgba(2, 8, 24, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  padding: 24px 22px 22px !important;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease !important;
}

.pricing-modern-section .pricing-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(650px 160px at 20% -20%, rgba(34, 211, 197, 0.2), transparent 60%);
  opacity: 0.9;
}

.pricing-modern-section .pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(34, 211, 197, 0.5) !important;
  box-shadow:
    0 34px 90px rgba(2, 8, 24, 0.58),
    0 0 0 1px rgba(34, 211, 197, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.pricing-modern-section .pricing-card.featured {
  transform: scale(1.02);
  border-color: rgba(34, 211, 197, 0.62) !important;
  background:
    linear-gradient(152deg, rgba(4, 35, 64, 0.98) 0%, rgba(7, 45, 81, 0.95) 55%, rgba(8, 57, 97, 0.96) 100%) !important;
  box-shadow:
    0 38px 95px rgba(2, 8, 24, 0.66),
    0 0 0 1px rgba(34, 211, 197, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.17) !important;
}

.pricing-modern-section .pricing-card.featured:hover {
  transform: translateY(-10px) scale(1.02);
}

.pricing-modern-section .card-badge {
  position: relative;
  z-index: 2;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  background: rgba(10, 19, 37, 0.85) !important;
  color: #dbeafe !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 11px !important;
}

.pricing-modern-section .pricing-card.featured .card-badge {
  border-color: rgba(34, 211, 197, 0.55) !important;
  color: #d1fae5 !important;
  background: linear-gradient(125deg, rgba(34, 211, 197, 0.22), rgba(14, 116, 144, 0.35)) !important;
}

.pricing-modern-section .card-title {
  color: #f8fbff !important;
  font-weight: 800 !important;
  font-size: clamp(1.2rem, 1.2vw, 1.34rem) !important;
  letter-spacing: -0.01em;
}

.pricing-modern-section .card-subtitle,
.pricing-modern-section .price-original,
.pricing-modern-section .card-link {
  color: rgba(203, 213, 225, 0.84) !important;
}

.pricing-modern-section .card-price {
  margin: 18px 0 14px !important;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}

.pricing-modern-section .price-currency,
.pricing-modern-section .price-period {
  color: #cbd5e1 !important;
}

.pricing-modern-section .price-main {
  color: #ffffff !important;
  font-size: clamp(2rem, 2.9vw, 2.65rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pricing-modern-section .pricing-card.featured .price-main {
  color: #67e8f9 !important;
  text-shadow: 0 0 26px rgba(103, 232, 249, 0.28);
}

.pricing-modern-section .card-features {
  margin: 10px 0 20px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.pricing-modern-section .card-features li {
  color: rgba(241, 245, 249, 0.96) !important;
}

.pricing-modern-section .card-features li i {
  color: #22d3c5 !important;
}

.pricing-modern-section .card-button {
  margin-top: auto;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(8, 47, 73, 0.6)) !important;
  color: #f8fbff !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.pricing-modern-section .pricing-card.featured .card-button,
.pricing-modern-section .featured-button {
  border-color: rgba(34, 211, 197, 0.58) !important;
  background: linear-gradient(90deg, #0ea5e9 0%, #22d3c5 100%) !important;
  color: #032138 !important;
  box-shadow: 0 14px 34px rgba(34, 211, 197, 0.28);
}

.pricing-modern-section .card-button:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 197, 0.6) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.48);
}

.pricing-modern-section .card-link:hover {
  color: #67e8f9 !important;
}

body.dark-mode .pricing-modern-section {
  background:
    radial-gradient(1100px 470px at 20% -10%, rgba(34, 211, 197, 0.18), transparent 60%),
    radial-gradient(900px 380px at 92% 0%, rgba(59, 130, 246, 0.2), transparent 58%),
    linear-gradient(180deg, #02060f 0%, #040d1c 50%, #071326 100%) !important;
}

@media (max-width: 1199px) {
  .pricing-modern-section .pricing-cards-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-modern-section .pricing-card.featured {
    transform: none;
  }

  .pricing-modern-section .pricing-card.featured:hover {
    transform: translateY(-8px);
  }
}

/* ── Mobile topbar: single compact row, phone/email hidden ─────────────── */
@media (max-width: 640px) {
  .top_header {
    max-height: 46px !important;
    overflow: hidden !important;
  }

  /* Keep row as flex so nothing stacks to a second line */
  .top_header .row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
  }

  /* Hide phone / email column entirely on small mobile */
  .top_header .col-md-6.col-sm-6.col-xs-12:first-child {
    display: none !important;
  }

  /* Right column (auth buttons + icons) takes remaining space */
  .top_header .col-md-6.col-sm-6.col-xs-12:last-child {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  /* Hide social icons on mobile — save horizontal space */
  .top_header .social_icon {
    display: none !important;
  }

  /* Compact auth buttons */
  .top_header .top_link ul li a {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  .top_header .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ================================================================
   HOMEPAGE DESIGN SYSTEM HARDENING — Global + Bangladesh
   Shared geometry, readable type, touch targets, and mobile rhythm.
   ================================================================ */
body.ha-page-home {
  font-family: var(--ha-font-sans, "Open Sans", "Segoe UI", Arial, sans-serif);
}

@media (min-width: 992px) {
  body.ha-home-global .home_banner,
  body.ha-market-bd.ha-page-home .home_banner {
    height: 94vh !important;
    min-height: 720px !important;
    max-height: 940px !important;
  }

  body.ha-home-global .home_banner .hero-copy .parallax-title,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-title {
    max-width: 24ch;
    font-size: clamp(42px, 4.35vw, 59px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
  }

  body.ha-home-global .home_banner .hero-copy .parallax-subtitle,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-subtitle {
    max-width: 64ch;
    font-size: 17px !important;
    line-height: 1.62 !important;
  }
}

.market-header .dark-mode-btn,
.market-header .social_icon a,
.shared-market-footer .social-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px !important;
  min-height: 44px !important;
}

.market-header #navbar-collapse-1 > ul > li > a {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
}

.pricing-modern-section .pricing-card,
.why-feature-card,
.solution-card,
.best-services-card,
.service-stack-card {
  border-radius: var(--ha-radius-card, 18px) !important;
}

.pricing-modern-section .pricing-main-title,
body.ha-page-home #dedicatedintro .datacenter-top h2,
body.ha-page-home #main-content .modern-section h2,
body.ha-page-home #main-content .best_services h2 {
  font-size: clamp(32px, 3.2vw, 44px) !important;
  line-height: 1.15 !important;
}

.pricing-modern-section .card-title {
  font-size: 20px !important;
}

.pricing-modern-section .card-subtitle,
.pricing-modern-section .card-features li,
.pricing-modern-section .card-link {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.pricing-modern-section .price-main {
  font-size: clamp(34px, 3vw, 46px) !important;
}

.pricing-modern-section .price-currency,
.pricing-modern-section .price-period {
  font-size: 14px !important;
}

.shared-market-footer .footer-title {
  font-size: 18px !important;
  line-height: 1.35 !important;
}

body.ha-page-home #dedicatedintro .datacenter-top p,
body.ha-page-home #main-content .best_services .parallax-subtitle {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.market-header .top_link a,
.market-header .navbar-brand,
body.ha-page-home #main-content .card-link,
body.ha-page-home #main-content .best-services-card a,
body.ha-page-home #main-content .service-stack-card a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  body.ha-home-global .home_banner,
  body.ha-market-bd.ha-page-home .home_banner {
    height: auto !important;
    min-height: 880px !important;
  }

  body.ha-home-global .home_banner .hero-copy .parallax-title,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-title {
    max-width: 18ch !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: clamp(36px, 5.6vw, 44px) !important;
    line-height: 1.12 !important;
  }

  body.ha-home-global .home_banner .hero-copy .parallax-subtitle,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-subtitle {
    max-width: 62ch !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
}

@media (max-width: 767px) {
  body.ha-home-global .home_banner,
  body.ha-market-bd.ha-page-home .home_banner {
    min-height: 700px !important;
    height: auto !important;
  }

  body.ha-home-global .home_banner .hero-copy .parallax-title,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-title {
    max-width: 15ch;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: clamp(32px, 9.5vw, 42px) !important;
    line-height: 1.12 !important;
  }

  body.ha-home-global .home_banner .hero-copy .parallax-subtitle,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-subtitle {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  body.ha-page-home #dedicatedintro,
  body.ha-page-home #main-content .background-grey.modern-section,
  body.ha-page-home #main-content .service_box.modern-section,
  body.ha-page-home #main-content .best_services,
  body.ha-page-home #main-content .bottom_padding.modern-section {
    padding-top: 64px !important;
    padding-bottom: 56px !important;
  }

  body.ha-page-home .pricing-modern-section {
    padding-top: 72px !important;
    padding-bottom: 64px !important;
  }

  body.ha-page-home #dedicatedintro .datacenter-top p,
  body.ha-page-home #main-content .modern-section p,
  body.ha-page-home #main-content .best_services p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .pricing-modern-section .pricing-main-title,
  body.ha-page-home #dedicatedintro .datacenter-top h2,
  body.ha-page-home #main-content .modern-section h2,
  body.ha-page-home #main-content .best_services h2 {
    font-size: clamp(28px, 8vw, 34px) !important;
  }

  body.ha-page-home #dedicatedintro .location-map.location-map-lg .location-name span {
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
  }

  .market-header #navbar-collapse-1 > ul > li > a,
  .market-header #navbar-collapse-1 > ul > li > ul a {
    width: 100% !important;
    min-height: 48px !important;
  }

  .shared-market-footer .social-link {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Responsive utility header: below desktop width the contact and action
   groups get their own rows, so Sales/Login/social controls never overlap. */
@media (max-width: 1199px) {
  body:not(.header-compact) .market-header .top_header {
    max-height: none !important;
    overflow: visible !important;
  }

  body.header-compact .market-header .top_header {
    max-height: 0 !important;
    overflow: hidden !important;
  }

  .market-header .top_header .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 8px 0 9px !important;
  }

  .market-header .top_header .row > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  .market-header .top_header .top_menu,
  .market-header .top_header .row > [class*="col-"]:last-child,
  .market-header .top_header .top_link ul,
  .market-header .top_header .social_icon ul {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .market-header .top_header .top_menu {
    gap: 6px 22px !important;
    padding: 0 !important;
  }

  .market-header .top_header .top_menu li {
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .market-header .top_header .row > [class*="col-"]:last-child {
    gap: 7px 10px !important;
    overflow: visible !important;
  }

  .market-header .top_header .top_link,
  .market-header .top_header .social_icon {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  .market-header .top_header .top_link ul,
  .market-header .top_header .social_icon ul {
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .market-header .top_header .top_link ul li,
  .market-header .top_header .social_icon ul li {
    float: none !important;
    margin: 0 !important;
  }

  /* Premium mobile/tablet menu control: static surfaces keep it inexpensive. */
  .market-header #header .navbar-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 58px !important;
    height: 52px !important;
    min-width: 58px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 7px 10px 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(165, 243, 252, 0.72) !important;
    border-radius: 15px !important;
    background:
      radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.3), transparent 34%),
      linear-gradient(145deg, #0ea5e9 0%, #06b6d4 46%, #6366f1 100%) !important;
    box-shadow:
      0 10px 24px rgba(14, 165, 233, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    color: #04243d !important;
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease !important;
  }

  .market-header #header .navbar-toggle:hover,
  .market-header #header .navbar-toggle:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(224, 231, 255, 0.94) !important;
    box-shadow:
      0 13px 28px rgba(79, 70, 229, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  }

  .market-header #header .navbar-toggle-glyph {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 16px;
  }

  .market-header #header .navbar-toggle .icon-bar {
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #ffffff, #ccfbf1) !important;
    box-shadow: 0 1px 5px rgba(255, 255, 255, 0.24);
    transition: transform 190ms ease, opacity 150ms ease, width 190ms ease;
  }

  .market-header #header .navbar-toggle .icon-bar:nth-child(1) {
    width: 19px !important;
  }

  .market-header #header .navbar-toggle .icon-bar:nth-child(3) {
    width: 22px !important;
  }

  .market-header #header .navbar-toggle-label {
    color: rgba(255, 255, 255, 0.94);
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .market-header #header .navbar-toggle.active .icon-bar:nth-child(1) {
    width: 25px !important;
    transform: translateY(6px) rotate(45deg);
  }

  .market-header #header .navbar-toggle.active .icon-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.3);
  }

  .market-header #header .navbar-toggle.active .icon-bar:nth-child(3) {
    width: 25px !important;
    transform: translateY(-6px) rotate(-45deg);
  }

  .market-header #header .navbar-toggle.active .navbar-toggle-label {
    font-size: 0;
    letter-spacing: 0.1em;
  }

  .market-header #header .navbar-toggle.active .navbar-toggle-label::after {
    content: "Close";
    font-size: 8px;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 479px) {
  .market-header .top_header .top_menu {
    gap: 5px 12px !important;
  }

  .market-header .top_header .top_menu li {
    font-size: 11px !important;
  }

  .market-header .top_header .row > [class*="col-"]:last-child {
    gap: 8px !important;
  }
}

/* Homepage hero content must define the section height.
   A fixed 94vh/940px frame clipped the domain TLD cards on short,
   wide desktop monitors because the hero itself hides overflow. */
@media (min-width: 992px) {
  body.ha-home-global #main-content .home_banner,
  body.ha-market-bd.ha-page-home #main-content .home_banner {
    height: auto !important;
    min-height: max(720px, 94vh) !important;
    max-height: none !important;
    padding-bottom: 56px !important;
  }
}

/* ==========================================================
   Responsive stability layer
   Keeps legacy 10px-rem pages readable without changing the
   Bootstrap root scale, and prevents uncontrolled 4K stretching.
   ========================================================== */

/* Product hero type uses an optical pixel scale because legacy
   Bootstrap defines html at 10px. */
#main-content .ha-hero-h1 {
  max-width: 16ch;
  font-size: clamp(38px, 4.2vw, 60px) !important;
  overflow-wrap: anywhere;
}

#main-content .ha-hero-sub {
  font-size: clamp(15px, 1.15vw, 17px) !important;
}

#main-content .ha-hero-stat-num {
  font-size: clamp(22px, 1.8vw, 28px) !important;
}

/* Keep long-form content and card grids comfortably readable on QHD/4K. */
@media (min-width: 1600px) {
  .container,
  .ha-container {
    width: min(1480px, calc(100% - 80px)) !important;
  }

  #main-content #ha-hero .ha-hero-content,
  .pricing-modern-section .container {
    width: min(1480px, calc(100% - 80px)) !important;
  }
}

@media (min-width: 2200px) {
  body {
    font-size: 16px !important;
  }

  .container,
  .ha-container {
    width: min(1560px, calc(100% - 120px)) !important;
  }

  #main-content #ha-hero .ha-hero-content,
  .pricing-modern-section .container {
    width: min(1560px, calc(100% - 120px)) !important;
  }
}

@media (min-width: 2560px) {
  .container,
  .ha-container {
    width: min(1600px, calc(100% - 120px)) !important;
  }

  #main-content #ha-hero .ha-hero-content,
  .pricing-modern-section .container {
    width: min(1600px, calc(100% - 120px)) !important;
  }
}

@media (min-width: 3200px) {
  body {
    font-size: 17px !important;
  }

  .container,
  .ha-container {
    width: min(1680px, calc(100% - 160px)) !important;
  }

  #main-content #ha-hero .ha-hero-content,
  .pricing-modern-section .container {
    width: min(1680px, calc(100% - 160px)) !important;
  }
}

@media (min-width: 3840px) {
  .container,
  .ha-container {
    width: min(1760px, calc(100% - 200px)) !important;
  }

  #main-content #ha-hero .ha-hero-content,
  .pricing-modern-section .container {
    width: min(1760px, calc(100% - 200px)) !important;
  }

  #main-content .ha-hero-h1 {
    font-size: 64px !important;
  }

  #main-content .ha-hero-sub {
    font-size: 18px !important;
  }
}

/* Lightweight AI-style orbit for the homepage domain-search glass panel.
   Only the masked edge is repainted; no JavaScript, image, or layout work. */
@property --ha-domain-edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes ha-domain-edge-orbit {
  to {
    --ha-domain-edge-angle: 360deg;
  }
}

body.ha-home-global .domain-search-panel,
body.ha-market-bd.ha-page-home .domain-search-panel {
  border-color: rgba(125, 211, 252, 0.24) !important;
  box-shadow:
    0 26px 70px rgba(2, 8, 23, 0.28),
    0 0 22px rgba(34, 211, 238, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body.ha-home-global .domain-search-panel::before,
body.ha-market-bd.ha-page-home .domain-search-panel::before {
  padding: 2px;
  background: conic-gradient(
    from var(--ha-domain-edge-angle),
    rgba(34, 211, 238, 0.18) 0deg,
    rgba(34, 211, 238, 0.18) 230deg,
    rgba(34, 211, 238, 0.42) 246deg,
    #22d3ee 260deg,
    #38bdf8 275deg,
    #6366f1 291deg,
    #a855f7 307deg,
    #ec4899 323deg,
    #f97316 338deg,
    #fde047 350deg,
    #34d399 358deg,
    #cffafe 360deg
  );
  opacity: 0.96;
  animation: ha-domain-edge-orbit 11s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.ha-home-global .domain-search-panel::before,
  body.ha-market-bd.ha-page-home .domain-search-panel::before {
    --ha-domain-edge-angle: 135deg;
    animation: none;
  }
}

/* One-time premium section entrance. IntersectionObserver adds the state;
   the browser animates only opacity and transform on the compositor. */
@media (prefers-reduced-motion: no-preference) {
  section.ha-scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.997);
    transition:
      opacity 560ms ease-out,
      transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  section.ha-scroll-reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  section.ha-scroll-reveal,
  section.ha-scroll-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Homepage domain search: the desktop flex declaration is !important,
   so the narrow-screen stack must carry equal cascade strength. */
@media (max-width: 767px) {
  body.ha-page-home .domain-search-panel .custom-search-forvm {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.ha-page-home .domain-search-panel .input-group-btn {
    display: block !important;
    width: 100% !important;
  }

  body.ha-page-home .domain-search-panel .domainsearchprefix,
  body.ha-page-home .domain-search-panel .domainsearchdomainname,
  body.ha-page-home .domain-search-panel .domainsearchsubmit {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    box-sizing: border-box !important;
  }
}

/* About page: remove the hidden 400–440px mobile hero canvas and
   convert inherited rem values to the same readable scale as the site. */
body.ha-page-about-us #main-content .ha-section-title {
  font-size: clamp(30px, 3.2vw, 44px) !important;
}

body.ha-page-about-us #main-content .ha-section-sub,
body.ha-page-about-us #main-content .ha-manifesto-sub,
body.ha-page-about-us #main-content .ha-founder-bio,
body.ha-page-about-us #main-content .ha-about-cta-sub,
body.ha-page-about-us #main-content .ha-faq-about-a,
body.ha-page-about-us #main-content .ha-testi-quote,
body.ha-page-about-us #main-content .ha-glass-card p,
body.ha-page-about-us #main-content .ha-feature-card p,
body.ha-page-about-us #main-content .ha-value-card p {
  font-size: 15px !important;
  line-height: 1.75 !important;
}

body.ha-page-about-us #main-content .ha-glass-card h3,
body.ha-page-about-us #main-content .ha-glass-card h4,
body.ha-page-about-us #main-content .ha-feature-card h3,
body.ha-page-about-us #main-content .ha-feature-card h4,
body.ha-page-about-us #main-content .ha-value-card h3,
body.ha-page-about-us #main-content .ha-value-card h4 {
  font-size: 18px !important;
}

body.ha-page-about-us #main-content .ha-stat-number {
  font-size: clamp(34px, 3.5vw, 48px) !important;
}

body.ha-page-about-us #main-content .ha-stat-label,
body.ha-page-about-us #main-content .ha-manifesto-pillar-label,
body.ha-page-about-us #main-content .ha-founder-role-badge span,
body.ha-page-about-us #main-content .ha-founder-chip,
body.ha-page-about-us #main-content .ha-founder-social-link {
  font-size: 13px !important;
}

body.ha-page-about-us #main-content .ha-founder-name {
  font-size: clamp(26px, 2.4vw, 34px) !important;
}

body.ha-page-about-us #main-content .ha-founder-chip,
body.ha-page-about-us #main-content .ha-founder-social-link {
  min-height: 44px !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  #main-content .ha-hero-h1 {
    max-width: 100%;
    font-size: clamp(31px, 8.6vw, 40px) !important;
  }

  #main-content .ha-hero-sub {
    font-size: 15px !important;
  }

  #main-content #ha-hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow: clip !important;
  }

  #main-content #ha-hero .ha-hero-content {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
  }

  #main-content #ha-hero .ha-hero-content > .row {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #main-content #ha-hero .ha-hero-content > .row > [class*="col-"] {
    right: auto !important;
    left: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
  }

  #main-content #ha-hero .ha-hero-h1,
  #main-content #ha-hero .ha-hero-sub,
  #main-content #ha-hero .ha-hero-btns,
  #main-content #ha-hero .ha-server-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.ha-page-about-us #main-content .ha-manifesto-statement {
    font-size: clamp(30px, 8.4vw, 40px) !important;
    overflow-wrap: anywhere;
  }

  body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-name span {
    min-height: 20px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body.ha-page-about-us #main-content .ha-founder-socials {
    flex-wrap: wrap !important;
  }

  body.ha-page-domain-search #main-content .ha-ds-how [data-reveal-group] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.ha-page-domain-search #main-content .ha-ds-how [data-reveal-group] > [class*="col-"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Common interactive controls remain finger-friendly without resizing cards. */
.shared-market-footer a:not(.social-link),
#main-content .ha-hero-btn-primary,
#main-content .ha-hero-btn-outline,
#main-content .ha-urgency-cta,
#main-content .ha-wp-urgency-cta,
#main-content .ha-seo-related-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  #main-content .ha-orb,
  #main-content .ha-scanline,
  #main-content .ha-server-card,
  #main-content .ha-progress-fill {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 767px) {
  .pricing-modern-section {
    padding: 72px 0 76px !important;
  }

  .pricing-modern-section .pricing-cards-wrapper {
    grid-template-columns: 1fr;
    gap: 16px !important;
  }

  .pricing-modern-section .pricing-header {
    margin-bottom: 30px !important;
  }

  .pricing-modern-section .pricing-card {
    border-radius: 16px !important;
    padding: 20px 16px 18px !important;
  }
}

/* Pricing V3: premium light enterprise look + no ranking badges */
.pricing-modern-section {
  background:
    radial-gradient(900px 300px at 5% 0%, rgba(14, 165, 233, 0.14), transparent 60%),
    radial-gradient(900px 340px at 98% 5%, rgba(34, 211, 197, 0.12), transparent 58%),
    linear-gradient(180deg, #f7fbff 0%, #f2f8ff 52%, #edf5ff 100%) !important;
}

.pricing-modern-section::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.66) 0%, transparent 45%),
    repeating-linear-gradient(90deg, rgba(11, 43, 89, 0.028) 0, rgba(11, 43, 89, 0.028) 1px, transparent 1px, transparent 72px) !important;
}

.pricing-modern-section .pricing-main-title {
  color: #0b2340 !important;
}

.pricing-modern-section .pricing-subtitle {
  color: #425977 !important;
}

.pricing-modern-section .card-badge {
  display: none !important;
}

.pricing-modern-section .pricing-cards-wrapper {
  gap: 22px !important;
}

.pricing-modern-section .pricing-card,
.pricing-modern-section .pricing-card.featured {
  transform: none !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 250, 255, 0.88) 52%, rgba(237, 246, 255, 0.92) 100%) !important;
  box-shadow:
    0 20px 45px rgba(15, 23, 42, 0.11),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pricing-modern-section .pricing-card::after {
  background: radial-gradient(500px 120px at 18% -20%, rgba(14, 165, 233, 0.12), transparent 62%) !important;
}

.pricing-modern-section .pricing-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(14, 165, 233, 0.34) !important;
  box-shadow:
    0 26px 55px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(14, 165, 233, 0.12) !important;
}

.pricing-modern-section .card-title {
  color: #0f2746 !important;
}

.pricing-modern-section .card-subtitle,
.pricing-modern-section .price-original,
.pricing-modern-section .card-link {
  color: #5a6f8d !important;
}

.pricing-modern-section .card-price {
  margin-top: 14px !important;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(34, 211, 197, 0.05));
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.pricing-modern-section .price-currency,
.pricing-modern-section .price-period {
  color: #4a607f !important;
}

.pricing-modern-section .price-main {
  color: #0b2644 !important;
}

.pricing-modern-section .pricing-card.featured .price-main {
  color: #0f6ec6 !important;
  text-shadow: none !important;
}

.pricing-modern-section .price-original {
  width: 100%;
  display: block !important;
  margin: 4px 0 0 0 !important;
  text-align: left !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  opacity: 0.88;
}

.pricing-modern-section .card-features {
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.pricing-modern-section .card-features li {
  color: #1e3653 !important;
}

.pricing-modern-section .card-features li i {
  color: #0ea5e9 !important;
}

.pricing-modern-section .card-button {
  border: 1px solid rgba(14, 165, 233, 0.3) !important;
  background: linear-gradient(90deg, #0ea5e9 0%, #22d3c5 100%) !important;
  color: #04243d !important;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.22);
}

.pricing-modern-section .card-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.32);
}

body.dark-mode .pricing-modern-section {
  background:
    radial-gradient(900px 340px at 8% -5%, rgba(14, 165, 233, 0.18), transparent 60%),
    radial-gradient(900px 360px at 95% 0%, rgba(34, 211, 197, 0.14), transparent 58%),
    linear-gradient(180deg, #071427 0%, #0a1d36 52%, #0c2342 100%) !important;
}

body.dark-mode .pricing-modern-section .pricing-main-title {
  color: #f8fbff !important;
}

body.dark-mode .pricing-modern-section .pricing-subtitle {
  color: rgba(226, 232, 240, 0.9) !important;
}

body.dark-mode .pricing-modern-section .pricing-card,
body.dark-mode .pricing-modern-section .pricing-card.featured {
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  background:
    linear-gradient(160deg, rgba(7, 24, 46, 0.88) 0%, rgba(8, 31, 57, 0.84) 58%, rgba(8, 35, 64, 0.86) 100%) !important;
  box-shadow:
    0 24px 54px rgba(2, 8, 24, 0.52),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode .pricing-modern-section .card-title {
  color: #f4f9ff !important;
}

body.dark-mode .pricing-modern-section .card-subtitle,
body.dark-mode .pricing-modern-section .price-original,
body.dark-mode .pricing-modern-section .card-link {
  color: rgba(203, 213, 225, 0.82) !important;
}

body.dark-mode .pricing-modern-section .card-price {
  border-color: rgba(125, 211, 252, 0.3);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(34, 211, 197, 0.1));
}

body.dark-mode .pricing-modern-section .price-main {
  color: #f8fbff !important;
}

body.dark-mode .pricing-modern-section .pricing-card.featured .price-main {
  color: #67e8f9 !important;
}

body.dark-mode .pricing-modern-section .price-original {
  opacity: 0.9;
}

body.dark-mode .pricing-modern-section .card-features {
  border-top-color: rgba(148, 163, 184, 0.28);
}

body.dark-mode .pricing-modern-section .card-features li {
  color: rgba(241, 245, 249, 0.96) !important;
}

/* ── International Homepage Premium Polish (video stays enabled) ─────────── */
body.ha-home-global .market-global .top_header {
  background: linear-gradient(95deg, rgba(8, 21, 44, 0.96), rgba(7, 44, 70, 0.92), rgba(7, 66, 92, 0.9)) !important;
  border-bottom-color: rgba(125, 211, 252, 0.28) !important;
}

body.ha-home-global .market-global #header .col-md-12 {
  background: linear-gradient(140deg, rgba(6, 24, 50, 0.92), rgba(4, 33, 56, 0.9)) !important;
  border: none !important;
  box-shadow: 0 20px 45px rgba(1, 9, 27, 0.46), 0 0 0 1px rgba(125, 211, 252, 0.05) inset;
}

body.ha-home-global .market-global #header .navbar-nav > li > a {
  font-weight: 650;
  letter-spacing: 0.01em;
}

body.ha-home-global .home_banner,
body.ha-market-bd.ha-page-home .home_banner {
  min-height: 94vh !important;
}

body.ha-home-global .home_banner .hero-bg-video-wrap::before,
body.ha-market-bd.ha-page-home .home_banner .hero-bg-video-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(75% 58% at 72% 18%, rgba(34, 211, 238, 0.14), transparent 72%),
    linear-gradient(112deg, rgba(2, 8, 23, 0.58), rgba(3, 17, 39, 0.42) 48%, rgba(4, 31, 52, 0.5));
  pointer-events: none;
}

body.ha-home-global .home_banner .hero-bg-video,
body.ha-market-bd.ha-page-home .home_banner .hero-bg-video {
  filter: saturate(1.06) contrast(1.08) brightness(0.8);
  transform: scale(1.06);
}

body.ha-home-global .home_banner .parallax-overlay {
  background: linear-gradient(105deg, rgba(3, 12, 32, 0.4), rgba(7, 34, 56, 0.3)) !important;
}

body.ha-home-global .home_banner .hero-copy .parallax-title,
body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-title {
  font-size: clamp(2.05rem, 4.35vw, 3.7rem) !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 12px 34px rgba(2, 6, 23, 0.55);
  max-width: 24ch;
}

body.ha-home-global .home_banner .hero-copy .parallax-subtitle,
body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-subtitle {
  max-width: 64ch;
  line-height: 1.62;
  color: rgba(226, 232, 240, 0.96) !important;
  text-shadow: 0 5px 16px rgba(2, 6, 23, 0.5);
}

body.ha-home-global .home_banner .hero-mini-proof,
body.ha-market-bd.ha-page-home .home_banner .hero-mini-proof {
  gap: 10px;
}

body.ha-home-global .home_banner .hero-proof-pill,
body.ha-market-bd.ha-page-home .home_banner .hero-proof-pill {
  border-color: rgba(125, 211, 252, 0.34);
  background: rgba(8, 20, 42, 0.5);
  color: rgba(226, 232, 240, 0.96);
}

body.ha-home-global .home_banner .hero-proof-pill i,
body.ha-market-bd.ha-page-home .home_banner .hero-proof-pill i {
  color: #67e8f9;
}

body.ha-home-global .home_banner .hero-stat-card,
body.ha-market-bd.ha-page-home .home_banner .hero-stat-card {
  background: linear-gradient(165deg, rgba(9, 23, 44, 0.84), rgba(8, 37, 58, 0.7));
  border: 1px solid rgba(125, 211, 252, 0.26);
  box-shadow: 0 16px 36px rgba(2, 8, 23, 0.42);
  backdrop-filter: blur(8px);
}

body.ha-home-global .home_banner .hero-stat-value,
body.ha-market-bd.ha-page-home .home_banner .hero-stat-value {
  color: #67e8f9;
}

body.ha-home-global .home_banner .hero-domain-item,
body.ha-market-bd.ha-page-home .home_banner .hero-domain-item {
  background: rgba(6, 20, 41, 0.74);
  border-color: rgba(125, 211, 252, 0.3);
  color: #e2e8f0;
}

body.ha-home-global .home_banner .hero-domain-item small,
body.ha-market-bd.ha-page-home .home_banner .hero-domain-item small {
  color: rgba(148, 163, 184, 0.9);
}

body.ha-home-global .trust-ribbon,
body.ha-market-bd.ha-page-home .trust-ribbon {
  margin-top: -22px;
  position: relative;
  z-index: 3;
}

body.ha-home-global .trust-ribbon .trust-ribbon-shell,
body.ha-market-bd.ha-page-home .trust-ribbon .trust-ribbon-shell {
  border: 1px solid rgba(125, 211, 252, 0.24);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.99), rgba(244, 251, 255, 0.98));
  box-shadow: 0 20px 44px rgba(8, 15, 35, 0.18);
}

body.ha-home-global .trust-ribbon .trust-chip,
body.ha-market-bd.ha-page-home .trust-ribbon .trust-chip {
  border-color: rgba(14, 165, 233, 0.3);
  background: rgba(14, 165, 233, 0.08);
  color: #0f172a;
}

body.ha-home-global .trust-ribbon .trust-chip i,
body.ha-market-bd.ha-page-home .trust-ribbon .trust-chip i {
  color: #0284c7;
}

@media (max-width: 991px) {
  body.ha-home-global .trust-ribbon,
  body.ha-market-bd.ha-page-home .trust-ribbon {
    margin-top: 0;
  }

  body.ha-home-global .home_banner .hero-bg-video,
  body.ha-market-bd.ha-page-home .home_banner .hero-bg-video {
    transform: scale(1.1);
  }

  body.ha-home-global .home_banner .hero-copy .parallax-title,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-title {
    max-width: 18ch;
    font-size: clamp(1.95rem, 7vw, 3.05rem) !important;
  }

  body.ha-home-global .home_banner .hero-copy .parallax-subtitle,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-subtitle {
    max-width: 44ch;
    line-height: 1.56;
  }
}

/* Final mobile dropdown usability overrides */
@media (max-width: 991px) {
  /* Reset compact desktop flex behavior on mobile to prevent blank gap/offset */
  body.header-compact #header .navbar-nav {
    display: block !important;
    flex-wrap: initial !important;
    overflow: visible !important;
  }

  body.header-compact #header .navbar-collapse {
    overflow-y: auto !important;
  }

  #header .navbar-collapse.in .navbar-nav,
  #header .navbar-collapse.collapsing .navbar-nav {
    margin: 0 !important;
  }

  #header .navbar-collapse.in .navbar-nav > li,
  #header .navbar-collapse.collapsing .navbar-nav > li {
    margin: 0 0 8px 0 !important;
  }

  #header .navbar-collapse.in .navbar-nav > li:last-child,
  #header .navbar-collapse.collapsing .navbar-nav > li:last-child {
    margin-bottom: 0 !important;
  }

  #header .navbar-collapse.in .navbar-nav > li.has-submenu > a.dropdown-toggle,
  #header .navbar-collapse.collapsing .navbar-nav > li.has-submenu > a.dropdown-toggle {
    position: relative;
    padding-right: 42px !important;
  }

  #header .navbar-collapse.in .navbar-nav > li.has-submenu > a.dropdown-toggle::after,
  #header .navbar-collapse.collapsing .navbar-nav > li.has-submenu > a.dropdown-toggle::after {
    content: '\f107';
    font-family: 'FontAwesome';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.42), rgba(16, 185, 129, 0.32));
    border: 1px solid rgba(125, 211, 252, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #f0f9ff;
    box-shadow: 0 6px 12px rgba(2, 8, 23, 0.26);
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  #header .navbar-collapse.in .navbar-nav > li.open.has-submenu > a.dropdown-toggle::after,
  #header .navbar-collapse.collapsing .navbar-nav > li.open.has-submenu > a.dropdown-toggle::after {
    content: '\f106';
    transform: translateY(-50%) scale(1.03);
    filter: brightness(1.08);
  }

  #header .navbar-collapse.in .navbar-nav > li:not(.has-submenu) > a.dropdown-toggle::after,
  #header .navbar-collapse.collapsing .navbar-nav > li:not(.has-submenu) > a.dropdown-toggle::after {
    content: none !important;
    display: none !important;
  }

  #header .navbar-collapse.in .navbar-nav > li > ul,
  #header .navbar-collapse.collapsing .navbar-nav > li > ul {
    display: none !important;
    position: static !important;
    width: 100% !important;
    margin: 6px 0 0 0 !important;
    padding: 8px !important;
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: rgba(2, 6, 23, 0.5) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease !important;
  }

  #header .navbar-collapse.in .navbar-nav > li.open > ul,
  #header .navbar-collapse.collapsing .navbar-nav > li.open > ul {
    display: block !important;
    max-height: 420px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow-y: auto !important;
  }

  #header .navbar-collapse.in .navbar-nav > li > ul > li > a,
  #header .navbar-collapse.collapsing .navbar-nav > li > ul > li > a {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 4px;
    line-height: 1.35 !important;
    color: #dbeafe !important;
    background: rgba(15, 23, 42, 0.34) !important;
    border: 1px solid transparent !important;
  }

  #header .navbar-collapse.in .navbar-nav > li > ul > li,
  #header .navbar-collapse.collapsing .navbar-nav > li > ul > li {
    border-radius: 8px !important;
    overflow: hidden;
  }

  #header .navbar-collapse.in .navbar-nav > li > ul > li > a:hover,
  #header .navbar-collapse.collapsing .navbar-nav > li > ul > li > a:hover {
    background: rgba(22, 184, 232, 0.16) !important;
    border-color: rgba(103, 232, 249, 0.35) !important;
    border-radius: 8px !important;
  }

  /* Force-hide theme toggle from top utility row on mobile */
  .top_header .social_icon .dark-mode-toggle-li,
  .top_header .dark-mode-toggle-li {
    display: none !important;
  }

  /* Mobile menu utility rows: Login -> Register -> Theme toggle */
  #header .navbar-collapse.in .navbar-nav > li.compact-info-item,
  #header .navbar-collapse.collapsing .navbar-nav > li.compact-info-item {
    display: none !important;
  }

  #header .navbar-collapse.in .navbar-nav > li.compact-auth-item,
  #header .navbar-collapse.collapsing .navbar-nav > li.compact-auth-item,
  #header .navbar-collapse.in .navbar-nav > li.compact-theme-item,
  #header .navbar-collapse.collapsing .navbar-nav > li.compact-theme-item {
    display: list-item !important;
  }

  #header .navbar-collapse.in .navbar-nav > li.compact-auth-item > a,
  #header .navbar-collapse.collapsing .navbar-nav > li.compact-auth-item > a,
  #header .navbar-collapse.in .navbar-nav > li.compact-theme-item > .compact-theme-btn,
  #header .navbar-collapse.collapsing .navbar-nav > li.compact-theme-item > .compact-theme-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 10px;
    padding: 11px 14px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  #header .navbar-collapse.in .navbar-nav > li.compact-theme-item > .compact-theme-btn,
  #header .navbar-collapse.collapsing .navbar-nav > li.compact-theme-item > .compact-theme-btn {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.35), rgba(16, 185, 129, 0.3));
    border: 1px solid rgba(125, 211, 252, 0.45);
    color: #ecfeff;
    box-shadow: none;
    height: auto;
  }

  #header .navbar-collapse.in .navbar-nav > li.compact-theme-item > .compact-theme-btn .theme-label,
  #header .navbar-collapse.collapsing .navbar-nav > li.compact-theme-item > .compact-theme-btn .theme-label {
    display: inline;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
}

/* Datacenter map: single-frame desktop + responsive map with pins on mobile */
#dedicatedintro .container {
  width: min(1380px, calc(100% - 24px)) !important;
}

#dedicatedintro .datacenter-panel {
  overflow: hidden;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#dedicatedintro .datacenter-top {
  padding: 0 12px;
}

#dedicatedintro .datacenter-benefits {
  padding: 0 12px;
}

#dedicatedintro .location-map {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

#dedicatedintro .location-map:hover {
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 991px) {
  #dedicatedintro .datacenter-panel {
    padding: 0 !important;
  }

  #dedicatedintro .location-map.location-map-lg {
    height: 430px !important;
    min-height: 430px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }

  /* Keep original map and pins, scale whole scene to mobile width */
  #dedicatedintro .location-map.location-map-lg .location-container {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 1174px !important;
    height: 580px !important;
    margin: -290px 0 0 -587px !important;
    padding: 0 !important;
    max-width: 1174px !important;
    transform-origin: center center !important;
    transform: scale(0.74) !important;
  }

  #dedicatedintro .location-map.location-map-lg .map {
    display: block !important;
    width: 1174px !important;
    height: 580px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  #dedicatedintro .location-map.location-map-lg .location {
    display: block !important;
    position: absolute !important;
    float: none !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-pin {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    background: linear-gradient(135deg, #1d9bf0, #2dd4bf) !important;
    box-shadow: 0 0 0 5px rgba(29, 155, 240, 0.28) !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Show labels on mobile (always visible with compact style) */
  #dedicatedintro .location-map.location-map-lg .location-name {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: -24px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) !important;
    height: auto !important;
    z-index: 1000 !important;
    pointer-events: none !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-name:after {
    display: none !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-name span {
    display: inline-block !important;
    height: 18px !important;
    line-height: 18px !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    /* White on rgba(30,144,255,.9) was 2.9:1 at 9px — below WCAG AA.
       Same hue family, dark enough for white text on the pale map. */
    background: rgba(15, 92, 184, 0.94) !important;
    color: #fff !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 10px rgba(2, 8, 23, 0.26) !important;
  }

  /* Force proper mobile coordinates (legacy CSS resets them to auto) */
  #dedicatedintro .location-map.location-map-lg .location-seattle { left: 12.8% !important; top: 31% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-silicon-valley { left: 12.6% !important; top: 37.1% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-los-angeles { left: 14% !important; top: 40% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-dallas { left: 19.8% !important; top: 41% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-miami { left: 24.5% !important; top: 45.7% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-atlanta { left: 23.5% !important; top: 40.3% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-new-jersey { left: 25.6% !important; top: 36.2% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-chicago { left: 22.7% !important; top: 34.5% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-london { left: 44.7% !important; top: 23.1% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-amsterdam { left: 46.4% !important; top: 22.6% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-frankfurt { left: 47.9% !important; top: 24.5% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-paris { left: 45.8% !important; top: 26.6% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-tokyo { left: 86.2% !important; top: 34.7% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-singapore { left: 75.7% !important; top: 54.8% !important; right: auto !important; bottom: auto !important; }
  #dedicatedintro .location-map.location-map-lg .location-sydney { left: 92.9% !important; top: 82.4% !important; right: auto !important; bottom: auto !important; }
}

@media (max-width: 767px) {
  #dedicatedintro .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #dedicatedintro .datacenter-panel {
    overflow: visible !important;
  }

  #dedicatedintro .datacenter-top,
  #dedicatedintro .datacenter-benefits {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* True full-bleed map on mobile */
  #dedicatedintro .location-map.location-map-lg {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}

@media (max-width: 767px) and (min-width: 568px) {
  #dedicatedintro .location-map.location-map-lg {
    height: 320px !important;
    min-height: 320px !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-container {
    transform: scale(0.56) !important;
  }
}

@media (max-width: 567px) and (min-width: 421px) {
  #dedicatedintro .location-map.location-map-lg {
    height: 270px !important;
    min-height: 270px !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-container {
    transform: scale(0.46) !important;
  }
}

@media (max-width: 420px) {
  #dedicatedintro .location-map.location-map-lg {
    height: 238px !important;
    min-height: 238px !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-container {
    transform: scale(0.4) !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-name {
    top: -21px !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-name span {
    font-size: 8px !important;
    padding: 0 5px !important;
    height: 16px !important;
    line-height: 16px !important;
  }
}

/* Final mobile map lock: responsive canvas (no cropping, all pins visible) */
@media (max-width: 767px) {
  #dedicatedintro .location-map.location-map-lg {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1174 / 580 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    max-width: 100% !important;
  }

  #dedicatedintro .location-map.location-map-lg .map {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
  }

  #dedicatedintro .location-map.location-map-lg .map.map-grey {
    min-height: 0 !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  #dedicatedintro .location-map.location-map-lg .location {
    width: 10px !important;
    height: 10px !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-pin {
    width: 10px !important;
    height: 10px !important;
    box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.24) !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-sydney {
    left: 91.2% !important;
  }

  /* Keep labels closer to pins in mobile (prevent floating too high) */
  #dedicatedintro .location-map.location-map-lg .location-name {
    top: 10px !important;
    left: 0 !important;
    transform: none !important;
  }

  #dedicatedintro .location-map.location-map-lg .location-name span {
    font-size: 7px !important;
    height: 15px !important;
    line-height: 15px !important;
    padding: 0 4px !important;
    border-radius: 10px !important;
    letter-spacing: 0.01em !important;
  }

  /* Small stagger for dense regions */
  #dedicatedintro .location-map.location-map-lg .location-seattle .location-name { top: -10px !important; left: -14px !important; z-index: 1004 !important; }
  #dedicatedintro .location-map.location-map-lg .location-silicon-valley .location-name { top: 12px !important; left: -48px !important; z-index: 1001 !important; }
  #dedicatedintro .location-map.location-map-lg .location-los-angeles .location-name { top: 34px !important; left: -46px !important; z-index: 1002 !important; }
  #dedicatedintro .location-map.location-map-lg .location-chicago .location-name { top: -16px !important; left: -6px !important; z-index: 1006 !important; }
  #dedicatedintro .location-map.location-map-lg .location-dallas .location-name { top: 14px !important; left: -2px !important; z-index: 1003 !important; }
  #dedicatedintro .location-map.location-map-lg .location-new-jersey .location-name { top: -2px !important; left: 24px !important; z-index: 1005 !important; }
  #dedicatedintro .location-map.location-map-lg .location-atlanta .location-name { top: 30px !important; left: 26px !important; z-index: 1002 !important; }
  #dedicatedintro .location-map.location-map-lg .location-miami .location-name { top: 50px !important; left: 12px !important; z-index: 1001 !important; }

  #dedicatedintro .location-map.location-map-lg .location-london .location-name { top: -12px !important; left: -36px !important; z-index: 1004 !important; }
  #dedicatedintro .location-map.location-map-lg .location-amsterdam .location-name { top: -30px !important; left: -10px !important; z-index: 1006 !important; }
  #dedicatedintro .location-map.location-map-lg .location-frankfurt .location-name { top: -8px !important; left: 26px !important; z-index: 1005 !important; }
  #dedicatedintro .location-map.location-map-lg .location-paris .location-name { top: 14px !important; left: -18px !important; z-index: 1003 !important; }

  #dedicatedintro .location-map.location-map-lg .location-tokyo .location-name { top: -16px !important; left: 10px !important; }
  #dedicatedintro .location-map.location-map-lg .location-singapore .location-name { top: -18px !important; left: 6px !important; }
  #dedicatedintro .location-map.location-map-lg .location-sydney .location-name { top: -18px !important; left: 10px !important; }
}

@media (max-width: 575px) {
  .top_header ul.top_menu {
    gap: 8px;
  }

  .top_header .top_menu li {
    font-size: 12px;
  }

  .top_header .social_icon ul,
  .top_header .top_link ul {
    gap: 6px;
  }
}

/* Large screen scaling (Mac / 2K / 4K) */
@media (min-width: 1600px) {
  .container {
    width: min(1480px, calc(100% - 80px)) !important;
  }

  #ha-hero {
    min-height: 96vh;
  }

  .ha-hero-h1 {
    font-size: 4.6rem;
  }

  .ha-hero-sub {
    font-size: 1.2rem;
    max-width: 700px;
  }

  .ha-hero-btn-primary,
  .ha-hero-btn-outline {
    font-size: 16px;
    padding: 16px 34px;
  }

  .ha-pricing-title,
  .ha-section-title-light,
  .ha-section-title-dark {
    font-size: 3rem;
  }

  .ha-pricing-subtitle,
  .ha-section-sub-light,
  .ha-section-sub-dark {
    font-size: 1.06rem;
  }

  .ha-vps-row {
    grid-template-columns: 210px 1fr 210px 220px;
    padding: 22px 22px 22px 20px;
  }

  .ha-vps-price strong {
    font-size: 38px;
  }

  .ha-feature-card,
  .ha-spec-card,
  .ha-why-card {
    padding: 36px 30px;
  }
}

@media (min-width: 2200px) {
  .container {
    width: min(1780px, calc(100% - 120px)) !important;
  }

  body {
    font-size: 18px;
  }

  .ha-hero-h1 {
    font-size: 5.2rem;
  }

  .ha-pricing-title,
  .ha-section-title-light,
  .ha-section-title-dark {
    font-size: 3.4rem;
  }
}

/* ── QHD / 2560px ──────────────────────────────────────────── */
@media (min-width: 2560px) {
  .container {
    width: min(1900px, calc(100% - 120px)) !important;
  }

  body {
    font-size: 20px;
  }

  .ha-hero-h1 {
    font-size: 6rem;
  }

  .ha-hero-sub {
    font-size: 1.4rem;
    max-width: 860px;
  }

  .ha-hero-btn-primary,
  .ha-hero-btn-outline {
    font-size: 18px;
    padding: 18px 40px;
  }

  .ha-pricing-title,
  .ha-section-title-light,
  .ha-section-title-dark {
    font-size: 3.8rem;
  }

  .ha-pricing-subtitle,
  .ha-section-sub-light,
  .ha-section-sub-dark {
    font-size: 1.15rem;
  }

  .ha-feature-card,
  .ha-spec-card,
  .ha-why-card {
    padding: 42px 34px;
  }
}

/* ── 4K / 3840px ───────────────────────────────────────────── */
@media (min-width: 3200px) {
  .container {
    width: min(2200px, calc(100% - 160px)) !important;
  }

  body {
    font-size: 22px;
  }

  .ha-hero-h1 {
    font-size: 7rem;
  }

  .ha-hero-sub {
    font-size: 1.6rem;
    max-width: 1000px;
  }

  .ha-hero-btn-primary,
  .ha-hero-btn-outline {
    font-size: 20px;
    padding: 22px 48px;
  }

  .ha-pricing-title,
  .ha-section-title-light,
  .ha-section-title-dark {
    font-size: 4.4rem;
  }

  .ha-pricing-subtitle,
  .ha-section-sub-light,
  .ha-section-sub-dark {
    font-size: 1.25rem;
  }

  .ha-feature-card,
  .ha-spec-card,
  .ha-why-card {
    padding: 52px 42px;
  }
}

@media (min-width: 3840px) {
  .container {
    width: min(2600px, calc(100% - 200px)) !important;
  }

  body {
    font-size: 24px;
  }

  .ha-hero-h1 {
    font-size: 8rem;
  }

  .ha-hero-sub {
    font-size: 1.8rem;
    max-width: 1200px;
  }

  .ha-hero-btn-primary,
  .ha-hero-btn-outline {
    font-size: 22px;
    padding: 26px 56px;
  }

  .ha-pricing-title,
  .ha-section-title-light,
  .ha-section-title-dark {
    font-size: 5rem;
  }
}

/* Page sync: Windows VPS + Legal pages */
body.page-windows-vps .pricing_table2 {
  background: linear-gradient(180deg, #071a33 0%, #0c2745 52%, #0f3f54 100%) !important;
  padding: 88px 0 90px !important;
}

body.page-windows-vps .pricing_table2 .heading h2 {
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f8fafc !important;
}

body.page-windows-vps .pricing_table2 .heading p {
  color: rgba(226, 232, 240, 0.84) !important;
  font-size: 1.05rem;
}

body.page-windows-vps .ha-vps-list-wrap {
  max-width: 1140px;
  margin: 0 auto;
}

body.page-windows-vps .ha-vps-list {
  display: grid;
  gap: 14px;
}

body.page-windows-vps .ha-vps-row {
  display: grid;
  grid-template-columns: 180px 1fr 180px 190px;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 18px 16px;
  border-radius: 18px;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.page-windows-vps .ha-vps-row:hover {
  transform: translateY(-3px);
  border-color: var(--ha-brand-soft-border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

body.page-windows-vps .ha-vps-row.featured {
  border-color: var(--ha-brand-soft-border);
  background: linear-gradient(130deg, rgba(22, 184, 232, 0.24), rgba(34, 211, 197, 0.14));
  box-shadow: 0 0 0 1px rgba(22, 184, 232, 0.22), 0 18px 42px rgba(0, 0, 0, 0.35);
}

body.page-windows-vps .ha-plan-name-wrap h3 {
  margin: 9px 0 0;
  color: #f8fafc;
  font-size: 24px;
  font-weight: 700;
}

body.page-windows-vps .ha-plan-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(15, 23, 42, 0.45);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.page-windows-vps .ha-vps-row.featured .ha-plan-chip {
  background: rgba(22, 184, 232, 0.22);
  border-color: var(--ha-brand-soft-border);
  color: #fff;
}

body.page-windows-vps .ha-vps-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-windows-vps .ha-vps-spec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 600;
}

body.page-windows-vps .ha-vps-spec i {
  color: #34d399;
  font-size: 11px;
}

body.page-windows-vps .ha-vps-price {
  text-align: right;
}

body.page-windows-vps .ha-vps-price strong {
  display: block;
  font-size: 31px;
  line-height: 1;
  background: var(--ha-brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

body.page-windows-vps .ha-vps-price span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

body.page-windows-vps .ha-btn-solid-cyan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px !important;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff !important;
  background: var(--ha-brand-gradient);
  box-shadow: 0 10px 24px var(--ha-brand-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.page-windows-vps .ha-btn-solid-cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px var(--ha-brand-glow);
}

body.page-windows-vps #pricing-table .heading {
  padding-bottom: 72px !important;
}

body.page-windows-vps .page_banner {
  position: relative;
  overflow: hidden;
}

body.page-windows-vps .page_banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(102deg, rgba(6, 24, 46, 0.84), rgba(8, 75, 114, 0.58));
}

body.page-windows-vps .page_banner .container,
body.page-windows-vps .page_banner .row,
body.page-windows-vps .page_banner .col-md-12 {
  position: relative;
  z-index: 2;
}

body.page-windows-vps .order_now .btn_primary {
  border-radius: 999px !important;
  font-weight: 700;
  padding: 12px 24px;
}

body.page-windows-vps .services_boxs .sboxs_f,
body.page-windows-vps .services_boxs .sboxs_b {
  background: linear-gradient(160deg, #f8fcff 0%, #e8f2fb 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

body.page-windows-vps .services_boxs .sboxs_f i {
  color: var(--ha-brand-secondary) !important;
}

body.page-windows-vps .services_boxs .sboxs_f h5,
body.page-windows-vps .services_boxs .sboxs_b h5 {
  color: #0f172a !important;
  font-weight: 700;
}

body.page-windows-vps .services_boxs .sboxs_b p {
  color: #475569 !important;
  line-height: 1.75;
}

body.page-windows-vps .right_icon_box {
  background: linear-gradient(160deg, #ffffff 0%, #ecf4fb 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.page-windows-vps .right_icon_box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

body.page-windows-vps .right_icon_box .icon_right {
  background: var(--ha-brand-gradient) !important;
}

body.page-windows-vps .right_icon_box h3, body.page-windows-vps .right_icon_box h5 {
  color: #0f172a !important;
  font-weight: 700;
}

body.page-windows-vps .right_icon_box p {
  color: #475569 !important;
}

body.page-legal .page_banner {
  position: relative;
  overflow: hidden;
}

body.page-legal .page_banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(9, 21, 48, 0.86), rgba(9, 84, 129, 0.58));
  pointer-events: none;
}

body.page-legal .page_banner .container,
body.page-legal .page_banner .row,
body.page-legal .page_banner .col-md-12 {
  position: relative;
  z-index: 2;
}

body.page-legal section.text-center {
  background: linear-gradient(180deg, #f7fbff 0%, #ecf4fb 100%);
  padding-bottom: 84px;
}

body.page-legal section.text-center .heading {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  padding: 42px clamp(20px, 3.2vw, 52px) 44px !important;
  margin-top: 26px;
}

body.page-legal section.text-center .heading h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.35;
}

body.page-legal section.text-center .heading p {
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  line-height: 1.85;
  color: #334155;
}

@media (max-width: 767px) {
  body.page-windows-vps .pricing_table2 {
    padding: 56px 0 64px !important;
  }

  body.page-windows-vps .ha-vps-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  body.page-windows-vps .ha-vps-price {
    text-align: left;
  }

  body.page-windows-vps .ha-vps-cta a {
    width: 100%;
  }

  body.page-windows-vps .services_boxs,
  body.page-windows-vps .right_icon_box {
    margin-bottom: 18px;
  }

  body.page-legal section.text-center .heading {
    border-radius: 16px;
    padding: 28px 16px 30px !important;
  }
}

/* ── Mobile menu open: full-width solid background fix ───────────────────────
   Problem: nav.navbar is position:relative but only ~137px wide (flex item).
   .navbar-collapse is position:absolute relative to it → narrow + transparent.

   Fix: make .navbar position:static so the nearest positioned ancestor becomes
   #header .col-md-12 (which is full viewport width + position:relative).
   Then the collapse stretches 100% of that container.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  /* Step 1: remove navbar as containing block */
  #header .navbar {
    position: static !important;
  }

  /* Step 2: ensure col-md-12 is the containing block */
  #header .col-md-12 {
    position: relative !important;
  }

  /* Step 3: stretch the open menu to full width with solid background */
  #header .navbar-collapse.in,
  #header .navbar-collapse.collapsing {
    background: #0d1f3c !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    border-radius: 0 0 10px 10px !important;
    padding-bottom: 8px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
}

/* Data center block premium tuning (light by default, dark in dark-mode only) */
#dedicatedintro .datacenter-panel {
  position: relative;
  padding: 28px 24px 20px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(14, 165, 233, 0.18) !important;
  background:
    radial-gradient(680px 220px at 8% -22%, rgba(56, 189, 248, 0.16), transparent 64%),
    radial-gradient(640px 210px at 100% -18%, rgba(45, 212, 191, 0.12), transparent 66%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 250, 255, 0.94) 55%, rgba(238, 246, 255, 0.95) 100%) !important;
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
}

#dedicatedintro .datacenter-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(14, 165, 233, 0.03) 0,
    rgba(14, 165, 233, 0.03) 1px,
    transparent 1px,
    transparent 74px
  );
}

#dedicatedintro .datacenter-top h2 {
  color: #0d2a4d !important;
  letter-spacing: -0.02em;
  font-weight: 800 !important;
}

#dedicatedintro .datacenter-top p {
  color: #4b617d !important;
  max-width: 820px;
  margin: 12px auto 0 !important;
}

#dedicatedintro .datacenter-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 18px !important;
}

#dedicatedintro .datacenter-benefit {
  border: 1px solid rgba(14, 165, 233, 0.26) !important;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(34, 211, 197, 0.08)) !important;
  color: #0f3f65 !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  padding: 7px 12px !important;
}

#dedicatedintro .location-map {
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(252, 254, 255, 0.96), rgba(242, 248, 255, 0.96)) !important;
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.78) !important;
}

#dedicatedintro .location-map .map {
  filter: saturate(1.04) contrast(1.03) brightness(1.03);
}

#dedicatedintro .location-pin {
  background: linear-gradient(135deg, #0ea5e9, #22d3c5) !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18), 0 0 16px rgba(14, 165, 233, 0.28) !important;
}

#dedicatedintro .location-pin::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, 0.34);
  opacity: 0.8;
  animation: haDcPulse 2.2s ease-out infinite;
}

#dedicatedintro .location-name span {
  border-radius: 999px !important;
  border: 1px solid rgba(14, 165, 233, 0.22) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #113353 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.13);
}

body.dark-mode #dedicatedintro .datacenter-panel {
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  background:
    radial-gradient(640px 180px at 10% -20%, rgba(34, 211, 197, 0.2), transparent 65%),
    linear-gradient(155deg, rgba(7, 24, 46, 0.9) 0%, rgba(8, 34, 62, 0.88) 58%, rgba(7, 25, 48, 0.9) 100%) !important;
  box-shadow:
    0 30px 70px rgba(2, 8, 24, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode #dedicatedintro .datacenter-panel::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(125, 211, 252, 0.04) 0,
    rgba(125, 211, 252, 0.04) 1px,
    transparent 1px,
    transparent 74px
  );
}

body.dark-mode #dedicatedintro .datacenter-top h2 {
  color: #f8fbff !important;
}

body.dark-mode #dedicatedintro .datacenter-top p {
  color: rgba(226, 232, 240, 0.88) !important;
}

body.dark-mode #dedicatedintro .datacenter-benefit {
  border: 1px solid rgba(125, 211, 252, 0.38) !important;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(34, 211, 197, 0.14)) !important;
  color: #dbf8ff !important;
}

body.dark-mode #dedicatedintro .location-map {
  border: 1px solid rgba(125, 211, 252, 0.26) !important;
  background: linear-gradient(180deg, rgba(3, 12, 26, 0.82), rgba(4, 18, 34, 0.86)) !important;
  box-shadow:
    0 20px 50px rgba(2, 8, 24, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode #dedicatedintro .location-name span {
  border: 1px solid rgba(125, 211, 252, 0.35) !important;
  background: rgba(7, 26, 49, 0.9) !important;
  color: #eaf6ff !important;
}

@keyframes haDcPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.95;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@media (max-width: 991px) {
  #dedicatedintro .datacenter-panel {
    border-radius: 18px !important;
    padding: 20px 0 0 !important;
  }

  #dedicatedintro .location-map {
    border-radius: 14px !important;
  }
}

/* Final fix: ensure compact header stays transparent over light sections */
body.header-compact #header .col-md-12,
body.header-compact.ha-home-global .market-global #header .col-md-12,
body.header-compact.ha-market-global #header .col-md-12,
body.header-compact.ha-market-bd #header .col-md-12 {
  background: linear-gradient(
    140deg,
    rgba(8, 24, 47, 0.16),
    rgba(7, 31, 53, 0.12),
    rgba(8, 44, 70, 0.1)
  ) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
}

body.dark-mode.header-compact #header .col-md-12,
body.dark-mode.header-compact.ha-home-global .market-global #header .col-md-12,
body.dark-mode.header-compact.ha-market-global #header .col-md-12,
body.dark-mode.header-compact.ha-market-bd #header .col-md-12 {
  background: linear-gradient(
    140deg,
    rgba(5, 16, 31, 0.24),
    rgba(6, 23, 42, 0.2),
    rgba(7, 35, 55, 0.18)
  ) !important;
}

/* Datacenter Signature Polish v3 (final visual layer) */
#dedicatedintro {
  position: relative;
  padding-top: 8px;
}

#dedicatedintro .datacenter-panel {
  position: relative;
  overflow: hidden;
  border-radius: 26px !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  background:
    radial-gradient(900px 280px at 8% -18%, rgba(56, 189, 248, 0.2), transparent 62%),
    radial-gradient(760px 260px at 95% -20%, rgba(45, 212, 191, 0.16), transparent 66%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 251, 255, 0.95) 52%, rgba(238, 247, 255, 0.97) 100%) !important;
  box-shadow:
    0 26px 60px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  padding: 30px 26px 22px !important;
}

#dedicatedintro .datacenter-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, rgba(14, 165, 233, 0.022) 0, rgba(14, 165, 233, 0.022) 1px, transparent 1px, transparent 68px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
}

#dedicatedintro .datacenter-top {
  position: relative;
  z-index: 2;
}

#dedicatedintro .datacenter-top h2 {
  color: #0c2847 !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

#dedicatedintro .datacenter-top h2 .gradient-text {
  background: linear-gradient(100deg, #0ea5e9, #22d3c5 52%, #4f46e5 100%) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#dedicatedintro .datacenter-top p {
  color: #4f6481 !important;
  font-size: clamp(1rem, 1.1vw, 1.14rem);
  line-height: 1.75;
  max-width: 860px;
}

#dedicatedintro .datacenter-benefits {
  position: relative;
  z-index: 2;
  gap: 12px;
  margin: 22px 0 18px !important;
}

#dedicatedintro .datacenter-benefit {
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.88), rgba(235, 247, 255, 0.84)) !important;
  color: #164163 !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.12);
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
}

#dedicatedintro .location-map {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(14, 165, 233, 0.24) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.98), rgba(241, 248, 255, 0.97)) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#dedicatedintro .location-map::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
}

#dedicatedintro .location-map .map {
  filter: saturate(1.08) contrast(1.04) brightness(1.04);
}

#dedicatedintro .location-pin {
  width: 14px !important;
  height: 14px !important;
  background: linear-gradient(135deg, #0ea5e9, #22d3c5) !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15), 0 0 18px rgba(34, 211, 197, 0.3) !important;
}

#dedicatedintro .location-pin::after {
  border-color: rgba(14, 165, 233, 0.34) !important;
}

#dedicatedintro .location-name span {
  border: 1px solid rgba(14, 165, 233, 0.24) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #153a5b !important;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14) !important;
}

#dedicatedintro .location:hover .location-name span {
  border-color: rgba(14, 165, 233, 0.48) !important;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.22) !important;
}

body.dark-mode #dedicatedintro .datacenter-panel {
  border-color: rgba(125, 211, 252, 0.25) !important;
  background:
    radial-gradient(900px 280px at 8% -18%, rgba(56, 189, 248, 0.2), transparent 62%),
    radial-gradient(760px 260px at 95% -20%, rgba(45, 212, 191, 0.14), transparent 66%),
    linear-gradient(158deg, rgba(6, 22, 41, 0.9) 0%, rgba(8, 31, 57, 0.88) 54%, rgba(9, 37, 66, 0.9) 100%) !important;
  box-shadow: 0 30px 68px rgba(2, 8, 24, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode #dedicatedintro .datacenter-panel::after {
  background:
    repeating-linear-gradient(90deg, rgba(125, 211, 252, 0.04) 0, rgba(125, 211, 252, 0.04) 1px, transparent 1px, transparent 68px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}

body.dark-mode #dedicatedintro .datacenter-top h2 {
  color: #f5fbff !important;
}

body.dark-mode #dedicatedintro .datacenter-top p {
  color: rgba(214, 227, 242, 0.88) !important;
}

body.dark-mode #dedicatedintro .datacenter-benefit {
  border-color: rgba(125, 211, 252, 0.34) !important;
  background: linear-gradient(140deg, rgba(8, 31, 57, 0.78), rgba(10, 43, 71, 0.74)) !important;
  color: #d8f5ff !important;
  box-shadow: 0 8px 20px rgba(2, 8, 24, 0.34);
}

body.dark-mode #dedicatedintro .location-map {
  border-color: rgba(125, 211, 252, 0.28) !important;
  background: linear-gradient(180deg, rgba(3, 14, 30, 0.86), rgba(4, 20, 38, 0.88)) !important;
  box-shadow: 0 24px 54px rgba(2, 8, 24, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode #dedicatedintro .location-name span {
  border-color: rgba(125, 211, 252, 0.34) !important;
  background: rgba(7, 26, 49, 0.9) !important;
  color: #eaf6ff !important;
}

@media (max-width: 991px) {
  #dedicatedintro .datacenter-panel {
    border-radius: 18px !important;
    padding: 22px 0 0 !important;
  }

  #dedicatedintro .datacenter-top,
  #dedicatedintro .datacenter-benefits {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #dedicatedintro .location-map {
    border-radius: 14px !important;
  }
}

/* Datacenter final cleanup: remove color patch + full-width no side borders */
#dedicatedintro .datacenter-top h2 .gradient-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #0ea5e9 !important;
}

body.dark-mode #dedicatedintro .datacenter-top h2 .gradient-text {
  color: #67e8f9 !important;
}

#dedicatedintro .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#dedicatedintro .datacenter-panel {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#dedicatedintro .datacenter-panel::before,
#dedicatedintro .datacenter-panel::after {
  background: none !important;
}

#dedicatedintro .location-map {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 991px) {
  #dedicatedintro .datacenter-top,
  #dedicatedintro .datacenter-benefits {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Scroll Sticky Menu: transparent glass polish */
body.header-compact #header .col-md-12,
body.header-compact.ha-home-global .market-global #header .col-md-12,
body.header-compact.ha-market-global #header .col-md-12,
body.header-compact.ha-market-bd #header .col-md-12 {
  background: linear-gradient(
    135deg,
    rgba(8, 24, 47, 0.22),
    rgba(8, 33, 56, 0.18),
    rgba(9, 45, 68, 0.16)
  ) !important;
  border: 1px solid rgba(125, 211, 252, 0.2) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.2) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}

body.header-compact #header .col-md-12::before,
body.header-compact #header .col-md-12::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

body.header-compact #header .col-md-12::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
}

body.header-compact #header .col-md-12::after {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}

body.dark-mode.header-compact #header .col-md-12,
body.dark-mode.header-compact.ha-home-global .market-global #header .col-md-12,
body.dark-mode.header-compact.ha-market-global #header .col-md-12,
body.dark-mode.header-compact.ha-market-bd #header .col-md-12 {
  background: linear-gradient(
    135deg,
    rgba(5, 16, 31, 0.3),
    rgba(6, 23, 42, 0.24),
    rgba(7, 35, 55, 0.22)
  ) !important;
  border-color: rgba(125, 211, 252, 0.24) !important;
}

/* Final single-layer sticky header fix (remove double background) */
body.header-compact .top_header {
  display: none !important;
}

body.header-compact #header,
body.header-compact #header .container,
body.header-compact #header .row,
body.header-compact #header .header-right,
body.header-compact #header .main-navigation,
body.header-compact #header .navbar,
body.header-compact #header .navbar-default,
body.header-compact #header .navbar-collapse,
body.header-compact #header .nav.navbar-nav,
body.header-compact #header .scrollspy.smooth-scroll,
body.header-compact #header .no_padding {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.header-compact #header .col-md-12,
body.header-compact.ha-home-global .market-global #header .col-md-12,
body.header-compact.ha-market-global #header .col-md-12,
body.header-compact.ha-market-bd #header .col-md-12 {
  background: rgba(8, 24, 47, 0.18) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
}

body.dark-mode.header-compact #header .col-md-12,
body.dark-mode.header-compact.ha-home-global .market-global #header .col-md-12,
body.dark-mode.header-compact.ha-market-global #header .col-md-12,
body.dark-mode.header-compact.ha-market-bd #header .col-md-12 {
  background: rgba(6, 18, 34, 0.24) !important;
}

/* Sticky menu full-width + denser blackish glass */
body.header-compact #header {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  padding: 0 !important;
}

body.header-compact #header .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.header-compact #header .col-md-12,
body.header-compact.ha-home-global .market-global #header .col-md-12,
body.header-compact.ha-market-global #header .col-md-12,
body.header-compact.ha-market-bd #header .col-md-12 {
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 20px !important;
  background: rgba(4, 14, 28, 0.58) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
}

body.dark-mode.header-compact #header .col-md-12,
body.dark-mode.header-compact.ha-home-global .market-global #header .col-md-12,
body.dark-mode.header-compact.ha-market-global #header .col-md-12,
body.dark-mode.header-compact.ha-market-bd #header .col-md-12 {
  background: rgba(2, 9, 20, 0.74) !important;
}

@media (max-width: 991px) {
  body.header-compact #header .col-md-12 {
    padding: 8px 12px !important;
  }
}

/* Datacenter Ultra Modern Background v4 */
#dedicatedintro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 420px at 8% -8%, rgba(14, 165, 233, 0.22), transparent 62%),
    radial-gradient(1000px 420px at 92% -12%, rgba(34, 211, 197, 0.2), transparent 64%),
    linear-gradient(180deg, #edf5ff 0%, #eaf3ff 45%, #e7f1ff 100%) !important;
}

#dedicatedintro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(30, 64, 175, 0.03) 0, rgba(30, 64, 175, 0.03) 1px, transparent 1px, transparent 84px),
    repeating-linear-gradient(0deg, rgba(30, 64, 175, 0.02) 0, rgba(30, 64, 175, 0.02) 1px, transparent 1px, transparent 84px);
  opacity: 0.7;
}

#dedicatedintro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0));
}

#dedicatedintro .datacenter-panel {
  position: relative;
  z-index: 2;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.58)) !important;
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
}

#dedicatedintro .location-map {
  background:
    radial-gradient(900px 240px at 10% -20%, rgba(14, 165, 233, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(246, 250, 255, 0.96), rgba(237, 246, 255, 0.94)) !important;
}

body.dark-mode #dedicatedintro {
  background:
    radial-gradient(1200px 420px at 8% -8%, rgba(14, 165, 233, 0.26), transparent 62%),
    radial-gradient(1000px 420px at 92% -12%, rgba(34, 211, 197, 0.2), transparent 64%),
    linear-gradient(180deg, #071629 0%, #0a1f38 45%, #0b233f 100%) !important;
}

body.dark-mode #dedicatedintro::before {
  background:
    repeating-linear-gradient(90deg, rgba(125, 211, 252, 0.045) 0, rgba(125, 211, 252, 0.045) 1px, transparent 1px, transparent 84px),
    repeating-linear-gradient(0deg, rgba(125, 211, 252, 0.03) 0, rgba(125, 211, 252, 0.03) 1px, transparent 1px, transparent 84px);
  opacity: 0.55;
}

body.dark-mode #dedicatedintro::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01) 42%, rgba(255, 255, 255, 0));
}

body.dark-mode #dedicatedintro .datacenter-panel {
  background: linear-gradient(160deg, rgba(7, 24, 46, 0.62), rgba(8, 31, 57, 0.54)) !important;
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
}

body.dark-mode #dedicatedintro .location-map {
  background:
    radial-gradient(900px 240px at 10% -20%, rgba(14, 165, 233, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(4, 16, 31, 0.92), rgba(5, 21, 40, 0.9)) !important;
}

/* Datacenter background unification fix (single visual background across full block) */
#dedicatedintro,
#dedicatedintro .datacenter-panel,
#dedicatedintro .location-map {
  background:
    radial-gradient(1200px 420px at 8% -8%, rgba(14, 165, 233, 0.2), transparent 62%),
    radial-gradient(1000px 420px at 92% -12%, rgba(34, 211, 197, 0.18), transparent 64%),
    linear-gradient(180deg, #edf5ff 0%, #eaf3ff 45%, #e7f1ff 100%) !important;
}

#dedicatedintro .datacenter-panel,
#dedicatedintro .location-map {
  border: 0 !important;
  box-shadow: none !important;
}

#dedicatedintro .datacenter-panel::before,
#dedicatedintro .datacenter-panel::after,
#dedicatedintro .location-map::before,
#dedicatedintro .location-map::after {
  background: none !important;
}

body.dark-mode #dedicatedintro,
body.dark-mode #dedicatedintro .datacenter-panel,
body.dark-mode #dedicatedintro .location-map {
  background:
    radial-gradient(1200px 420px at 8% -8%, rgba(14, 165, 233, 0.24), transparent 62%),
    radial-gradient(1000px 420px at 92% -12%, rgba(34, 211, 197, 0.16), transparent 64%),
    linear-gradient(180deg, #071629 0%, #0a1f38 45%, #0b233f 100%) !important;
}

/* Datacenter background lock (single-layer only) */
#dedicatedintro {
  background: linear-gradient(180deg, #eaf3ff 0%, #eaf3ff 100%) !important;
  position: relative !important;
}

#dedicatedintro::before,
#dedicatedintro::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

#dedicatedintro .datacenter-panel,
#dedicatedintro .location-map,
#dedicatedintro .location-map .map,
#dedicatedintro .location-container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.dark-mode #dedicatedintro {
  background: linear-gradient(180deg, #0b2038 0%, #0b2038 100%) !important;
}

body.dark-mode #dedicatedintro::before,
body.dark-mode #dedicatedintro::after {
  content: none !important;
  display: none !important;
}

/* Datacenter ambient animation + helmet/security badge */
#dedicatedintro {
  isolation: isolate;
}

#dedicatedintro::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 520px;
  height: 520px;
  left: -140px;
  top: -170px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  background:
    radial-gradient(circle at 35% 35%, rgba(34, 211, 197, 0.34), rgba(34, 211, 197, 0.08) 45%, transparent 68%),
    radial-gradient(circle at 65% 65%, rgba(14, 165, 233, 0.26), transparent 62%);
  animation: haDcFloat 14s ease-in-out infinite;
}

#dedicatedintro::after {
  content: "\f132" !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  right: 72px;
  top: 84px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  font-family: FontAwesome;
  font-size: 20px;
  color: rgba(14, 58, 94, 0.9);
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.88), rgba(231, 245, 255, 0.86));
  border: 1px solid rgba(14, 165, 233, 0.28);
  box-shadow: 0 10px 26px rgba(14, 165, 233, 0.18);
  animation: haDcPulseBadge 3.2s ease-in-out infinite;
}

#dedicatedintro .datacenter-panel {
  position: relative;
  z-index: 2;
}

@keyframes haDcFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(18px, 12px, 0) scale(1.05);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes haDcPulseBadge {
  0% {
    transform: scale(1);
    box-shadow: 0 10px 26px rgba(14, 165, 233, 0.18);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 14px 30px rgba(14, 165, 233, 0.28);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 10px 26px rgba(14, 165, 233, 0.18);
  }
}

body.dark-mode #dedicatedintro::before {
  opacity: 0.36;
  background:
    radial-gradient(circle at 35% 35%, rgba(34, 211, 197, 0.26), rgba(34, 211, 197, 0.06) 45%, transparent 70%),
    radial-gradient(circle at 65% 65%, rgba(14, 165, 233, 0.24), transparent 62%);
}

body.dark-mode #dedicatedintro::after {
  color: rgba(219, 243, 255, 0.9);
  background: linear-gradient(140deg, rgba(8, 31, 57, 0.85), rgba(7, 26, 49, 0.82));
  border-color: rgba(125, 211, 252, 0.3);
  box-shadow: 0 10px 26px rgba(2, 8, 24, 0.4);
}

@media (max-width: 991px) {
  #dedicatedintro::after {
    right: 18px;
    top: 72px;
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}

/* Datacenter final vibe: subtle animated gradient (no badge/icon) */
#dedicatedintro {
  isolation: isolate;
  position: relative !important;
  overflow: hidden;
}

#dedicatedintro::after {
  content: none !important;
  display: none !important;
}

#dedicatedintro::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -18% -8% -12% -8%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.72;
  background:
    radial-gradient(58% 52% at 12% 14%, rgba(45, 212, 191, 0.22) 0%, rgba(45, 212, 191, 0.06) 38%, transparent 72%),
    radial-gradient(52% 48% at 88% 10%, rgba(56, 189, 248, 0.2) 0%, rgba(56, 189, 248, 0.05) 42%, transparent 76%),
    radial-gradient(44% 40% at 52% 86%, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0.04) 46%, transparent 80%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 44%, rgba(255, 255, 255, 0.16));
  filter: blur(0.3px);
  animation: haDcGradientDrift 22s ease-in-out infinite alternate;
}

#dedicatedintro .datacenter-panel,
#dedicatedintro .location-map,
#dedicatedintro .location-container {
  position: relative;
  z-index: 2;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@keyframes haDcGradientDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.66;
  }
  50% {
    transform: translate3d(1.8%, 1.2%, 0) scale(1.035);
    opacity: 0.78;
  }
  100% {
    transform: translate3d(-1.2%, 0.8%, 0) scale(1.02);
    opacity: 0.7;
  }
}

body.dark-mode #dedicatedintro::before {
  opacity: 0.66;
  background:
    radial-gradient(58% 52% at 12% 14%, rgba(45, 212, 191, 0.2) 0%, rgba(45, 212, 191, 0.05) 40%, transparent 74%),
    radial-gradient(52% 48% at 88% 10%, rgba(56, 189, 248, 0.22) 0%, rgba(56, 189, 248, 0.06) 42%, transparent 76%),
    radial-gradient(44% 40% at 52% 86%, rgba(14, 165, 233, 0.18) 0%, rgba(14, 165, 233, 0.04) 46%, transparent 80%),
    linear-gradient(110deg, rgba(4, 14, 30, 0.28), rgba(4, 14, 30, 0.08) 44%, rgba(4, 14, 30, 0.22));
}

@media (max-width: 991px) {
  #dedicatedintro::before {
    inset: -24% -14% -16% -14%;
    opacity: 0.68;
  }
}

/* Datacenter visibility boost: guaranteed animated gradient */
#dedicatedintro {
  background:
    radial-gradient(70% 58% at 8% 14%, rgba(45, 212, 191, 0.26) 0%, rgba(45, 212, 191, 0.08) 36%, transparent 72%),
    radial-gradient(62% 50% at 92% 10%, rgba(56, 189, 248, 0.24) 0%, rgba(56, 189, 248, 0.07) 40%, transparent 76%),
    linear-gradient(118deg, #e9f4ff 0%, #e4f1ff 38%, #eef7ff 68%, #e8f3ff 100%) !important;
  background-size: 130% 130%, 130% 130%, 220% 220% !important;
  background-position: 0% 0%, 100% 0%, 0% 50% !important;
  animation: haDcBgSweep 20s ease-in-out infinite alternate !important;
}

#dedicatedintro::before {
  opacity: 0.86;
  mix-blend-mode: normal;
}

@keyframes haDcBgSweep {
  0% {
    background-position: 0% 0%, 100% 0%, 0% 50%;
  }
  50% {
    background-position: 10% 8%, 92% 6%, 100% 50%;
  }
  100% {
    background-position: 4% 14%, 96% 14%, 0% 50%;
  }
}

body.dark-mode #dedicatedintro {
  background:
    radial-gradient(70% 58% at 8% 14%, rgba(45, 212, 191, 0.2) 0%, rgba(45, 212, 191, 0.05) 36%, transparent 72%),
    radial-gradient(62% 50% at 92% 10%, rgba(56, 189, 248, 0.24) 0%, rgba(56, 189, 248, 0.06) 40%, transparent 76%),
    linear-gradient(118deg, #081c33 0%, #0a223d 38%, #0c2746 68%, #09213c 100%) !important;
  background-size: 130% 130%, 130% 130%, 220% 220% !important;
  background-position: 0% 0%, 100% 0%, 0% 50% !important;
}

/* Datacenter map visibility fix (ensure world silhouette is clearly visible) */
#dedicatedintro .location-map .map,
#dedicatedintro .location-map .map.map-grey {
  background-image: url(../global/map-grey.svg) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  opacity: 0.86 !important;
  filter: contrast(1.18) brightness(0.84) saturate(0.82) !important;
}

body.dark-mode #dedicatedintro .location-map .map,
body.dark-mode #dedicatedintro .location-map .map.map-grey {
  opacity: 0.8 !important;
  filter: contrast(1.14) brightness(1.02) saturate(0.9) !important;
}

/* Homepage Background System v2 (Global + BD) */
body.ha-home-global,
body.ha-market-bd {
  --ha-home-bg-0: #f7fbff;
  --ha-home-bg-1: #edf6ff;
  --ha-home-bg-2: #e7f2ff;
  --ha-home-bg-3: #f4f9ff;
  --ha-home-cyan: rgba(14, 165, 233, 0.2);
  --ha-home-teal: rgba(45, 212, 191, 0.17);
  --ha-home-indigo: rgba(37, 99, 235, 0.12);
}

body.ha-home-global .home_banner,
body.ha-market-bd .home_banner {
  background: linear-gradient(115deg, #071428 0%, #0a213c 46%, #0b2c47 100%) !important;
}

body.ha-home-global .home_banner .hero-bg-video-wrap::before,
body.ha-market-bd .home_banner .hero-bg-video-wrap::before {
  background:
    radial-gradient(70% 55% at 84% 16%, rgba(45, 212, 191, 0.2), transparent 72%),
    radial-gradient(58% 48% at 12% 86%, rgba(14, 165, 233, 0.14), transparent 70%),
    linear-gradient(112deg, rgba(2, 8, 23, 0.64), rgba(3, 17, 39, 0.5) 46%, rgba(4, 31, 52, 0.52)) !important;
}

body.ha-home-global .home_banner .parallax-overlay,
body.ha-market-bd .home_banner .parallax-overlay {
  background: linear-gradient(110deg, rgba(2, 11, 28, 0.44), rgba(5, 34, 57, 0.32)) !important;
}

body.ha-home-global .trust-ribbon,
body.ha-market-bd .trust-ribbon {
  background:
    radial-gradient(900px 220px at 10% 0%, var(--ha-home-cyan), transparent 70%),
    linear-gradient(180deg, var(--ha-home-bg-0) 0%, var(--ha-home-bg-1) 100%) !important;
}

body.ha-home-global .trust-ribbon .trust-ribbon-shell,
body.ha-market-bd .trust-ribbon .trust-ribbon-shell {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(246, 251, 255, 0.95)) !important;
  border-color: rgba(125, 211, 252, 0.3) !important;
  box-shadow: 0 18px 40px rgba(9, 30, 66, 0.14) !important;
}

body.ha-home-global .pricing-modern-section,
body.ha-market-bd .pricing-modern-section {
  background:
    radial-gradient(1100px 360px at 10% 0%, var(--ha-home-cyan), transparent 64%),
    radial-gradient(980px 340px at 95% 8%, var(--ha-home-teal), transparent 62%),
    linear-gradient(180deg, var(--ha-home-bg-0) 0%, var(--ha-home-bg-1) 52%, var(--ha-home-bg-2) 100%) !important;
}

body.ha-home-global .pricing-modern-section::before,
body.ha-market-bd .pricing-modern-section::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.62) 0%, transparent 45%),
    repeating-linear-gradient(90deg, rgba(11, 43, 89, 0.022) 0, rgba(11, 43, 89, 0.022) 1px, transparent 1px, transparent 72px) !important;
}

body.ha-home-global #dedicatedintro,
body.ha-market-bd #dedicatedintro {
  background:
    radial-gradient(74% 58% at 8% 14%, rgba(45, 212, 191, 0.2) 0%, rgba(45, 212, 191, 0.06) 38%, transparent 74%),
    radial-gradient(66% 52% at 92% 10%, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0.05) 42%, transparent 76%),
    linear-gradient(118deg, #eff7ff 0%, #e9f3ff 38%, #edf6ff 68%, #e8f2ff 100%) !important;
}

body.ha-home-global .background-grey.text-center.bottom_padding_xs.modern-section,
body.ha-market-bd .background-grey.text-center.bottom_padding_xs.modern-section {
  background:
    radial-gradient(900px 300px at 12% 0%, var(--ha-home-indigo), transparent 66%),
    linear-gradient(180deg, #f8fcff 0%, #f1f7ff 100%) !important;
}

body.ha-home-global .service_box.text-center.reveal.modern-section,
body.ha-market-bd .service_box.text-center.reveal.modern-section,
body.ha-home-global .bottom_padding.text-center.reveal.modern-section,
body.ha-market-bd .bottom_padding.text-center.reveal.modern-section {
  background:
    radial-gradient(900px 260px at 88% -8%, rgba(14, 165, 233, 0.1), transparent 64%),
    linear-gradient(180deg, #f6fbff 0%, #eef6ff 100%) !important;
}

body.dark-mode.ha-home-global,
body.dark-mode.ha-market-bd {
  --ha-home-bg-0: #071427;
  --ha-home-bg-1: #0b1f37;
  --ha-home-bg-2: #0d2744;
  --ha-home-bg-3: #0a1b31;
}

body.dark-mode.ha-home-global .trust-ribbon,
body.dark-mode.ha-market-bd .trust-ribbon {
  background:
    radial-gradient(900px 220px at 10% 0%, rgba(14, 165, 233, 0.18), transparent 70%),
    linear-gradient(180deg, var(--ha-home-bg-3) 0%, var(--ha-home-bg-1) 100%) !important;
}

body.dark-mode.ha-home-global .trust-ribbon .trust-ribbon-shell,
body.dark-mode.ha-market-bd .trust-ribbon .trust-ribbon-shell {
  background: linear-gradient(150deg, rgba(8, 24, 46, 0.9), rgba(8, 31, 57, 0.82)) !important;
  border-color: rgba(125, 211, 252, 0.22) !important;
  box-shadow: 0 22px 48px rgba(2, 8, 24, 0.4) !important;
}

body.dark-mode.ha-home-global .pricing-modern-section,
body.dark-mode.ha-market-bd .pricing-modern-section {
  background:
    radial-gradient(1100px 360px at 10% 0%, rgba(14, 165, 233, 0.18), transparent 64%),
    radial-gradient(980px 340px at 95% 8%, rgba(45, 212, 191, 0.14), transparent 62%),
    linear-gradient(180deg, var(--ha-home-bg-0) 0%, var(--ha-home-bg-1) 52%, var(--ha-home-bg-2) 100%) !important;
}

body.dark-mode.ha-home-global #dedicatedintro,
body.dark-mode.ha-market-bd #dedicatedintro {
  background:
    radial-gradient(74% 58% at 8% 14%, rgba(45, 212, 191, 0.17) 0%, rgba(45, 212, 191, 0.04) 38%, transparent 74%),
    radial-gradient(66% 52% at 92% 10%, rgba(56, 189, 248, 0.2) 0%, rgba(56, 189, 248, 0.05) 42%, transparent 76%),
    linear-gradient(118deg, #081b31 0%, #0a223c 38%, #0c2947 68%, #09203a 100%) !important;
}

body.dark-mode.ha-home-global .background-grey.text-center.bottom_padding_xs.modern-section,
body.dark-mode.ha-market-bd .background-grey.text-center.bottom_padding_xs.modern-section,
body.dark-mode.ha-home-global .service_box.text-center.reveal.modern-section,
body.dark-mode.ha-market-bd .service_box.text-center.reveal.modern-section,
body.dark-mode.ha-home-global .bottom_padding.text-center.reveal.modern-section,
body.dark-mode.ha-market-bd .bottom_padding.text-center.reveal.modern-section {
  background:
    radial-gradient(920px 300px at 86% -8%, rgba(14, 165, 233, 0.1), transparent 66%),
    linear-gradient(180deg, #08182d 0%, #0b213a 100%) !important;
}

/* Datacenter spacing compact tune */
#dedicatedintro {
  padding: 0 0 38px !important;
}

#dedicatedintro .datacenter-panel {
  padding: 24px 0 0 !important;
}

#dedicatedintro .datacenter-top {
  margin-bottom: 14px !important;
}

#dedicatedintro .datacenter-top p {
  margin: 10px auto 0 !important;
  line-height: 1.62 !important;
}

#dedicatedintro .datacenter-benefits {
  margin: 10px 0 14px !important;
}

#dedicatedintro .location-map {
  margin-top: 0 !important;
}

@media (max-width: 991px) {
  #dedicatedintro {
    padding: 0 0 24px !important;
  }

  #dedicatedintro .datacenter-panel {
    padding: 16px 0 0 !important;
  }

  #dedicatedintro .datacenter-top {
    margin-bottom: 10px !important;
  }

  #dedicatedintro .datacenter-benefits {
    margin: 8px 0 10px !important;
    gap: 8px !important;
  }
}

/* Footer Premium Upgrade v2 */
.footer-modern {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(820px 260px at 12% -6%, rgba(34, 211, 197, 0.16), transparent 70%),
    radial-gradient(760px 240px at 88% 8%, rgba(56, 189, 248, 0.14), transparent 68%),
    linear-gradient(140deg, #08182d 0%, #0c2440 48%, #0b1f37 100%) !important;
  border-top: 1px solid rgba(125, 211, 252, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.footer-modern::before,
.footer-modern::after {
  pointer-events: none;
}

.footer-main {
  padding: 64px 0 40px !important;
  position: relative;
  z-index: 2;
}

.footer-logo-box {
  border-bottom: 1px solid rgba(125, 211, 252, 0.26) !important;
  padding-bottom: 16px;
  margin-bottom: 18px;
}

.footer-description {
  color: rgba(226, 232, 240, 0.9) !important;
  font-size: 13px;
  line-height: 1.72;
}

.footer-title {
  color: #f8fbff !important;
  letter-spacing: 0.08em;
  font-size: 13px;
  margin-bottom: 18px;
}

.footer-title::after {
  width: 52px !important;
  height: 2px !important;
  border-radius: 99px;
  background: linear-gradient(90deg, #0ea5e9, #22d3c5) !important;
}

.footer-menu li {
  margin-bottom: 9px;
}

.footer-menu li a {
  color: rgba(203, 213, 225, 0.92) !important;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-menu li a:hover {
  color: #67e8f9 !important;
  transform: translateX(2px);
}

.footer-contact {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 36px rgba(2, 8, 24, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-item i {
  color: #22d3c5 !important;
}

.contact-item span,
.contact-item a {
  color: rgba(226, 232, 240, 0.92) !important;
}

.contact-item a:hover {
  color: #67e8f9 !important;
}

.footer-social {
  gap: 10px;
}

.footer-social .social-link,
.social-link {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background: linear-gradient(150deg, rgba(8, 30, 54, 0.76), rgba(10, 42, 64, 0.64)) !important;
  color: #c8f3ff !important;
  box-shadow: 0 8px 16px rgba(2, 8, 24, 0.25);
}

.footer-social .social-link:hover,
.social-link:hover {
  background: linear-gradient(135deg, #0ea5e9, #22d3c5) !important;
  border-color: rgba(103, 232, 249, 0.7) !important;
  color: #04243d !important;
  transform: translateY(-2px);
}

.footer-bottom-modern {
  background: linear-gradient(180deg, rgba(2, 9, 20, 0.52), rgba(2, 8, 18, 0.6)) !important;
  border-top: 1px solid rgba(125, 211, 252, 0.18) !important;
  padding: 20px 0 !important;
}

.footer-copyright p,
.footer-tagline,
.payment-text,
.payment-icons i {
  color: rgba(203, 213, 225, 0.9) !important;
}

.footer-copyright p strong {
  color: #67e8f9 !important;
}

.payment-icons i:hover {
  color: #22d3c5 !important;
}

/* Premium payment trust badges */
.footer-payments {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.payment-text {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(165, 243, 252, 0.92) !important;
}

.payment-icons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.payment-icons .pay-badge {
  width: 92px;
  height: 56px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 14px;
  border: 1px solid rgba(125, 211, 252, 0.26);
  background: linear-gradient(145deg, rgba(8, 30, 54, 0.8), rgba(8, 39, 61, 0.68)) !important;
  box-shadow: 0 12px 26px rgba(2, 8, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.24s ease, border-color 0.24s ease, background-color 0.24s ease;
}

.payment-icons .pay-badge i {
  font-size: 24px !important;
  line-height: 1;
  color: #e7f7ff !important;
}

.payment-icons .pay-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
  filter: drop-shadow(0 2px 6px rgba(2, 8, 24, 0.35));
}

.payment-icons .pay-icon-img--googlepay {
  width: 36px;
  height: 20px;
  border-radius: 0;
  filter: drop-shadow(0 2px 5px rgba(2, 8, 24, 0.28));
}

.payment-icons .pay-badge > span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  color: rgba(203, 213, 225, 0.94);
  white-space: nowrap;
  text-transform: uppercase;
}

.payment-icons .pay-badge:hover {
  border-color: rgba(103, 232, 249, 0.58);
  box-shadow: 0 14px 26px rgba(14, 165, 233, 0.24), 0 0 0 1px rgba(34, 211, 197, 0.2);
}

.payment-icons i:hover {
  color: #ffffff !important;
}

.payment-icons .pay-paypal i {
  color: #60a5fa !important;
}

.payment-icons .pay-visa i {
  color: #93c5fd !important;
}

.payment-icons .pay-mastercard i {
  color: #fca5a5 !important;
}

.payment-icons .pay-googlepay i {
  color: #93c5fd !important;
}

.payment-icons .pay-bitcoin,
.payment-icons .pay-usdt,
.payment-icons .pay-ethereum,
.payment-icons .pay-googlepay {
  background: linear-gradient(145deg, rgba(9, 34, 58, 0.86), rgba(8, 38, 62, 0.72)) !important;
}

/* Guard: if any legacy footer leaks inside main content, hide it to prevent duplicate payment rows */
#main-content .footer-modern {
  display: none !important;
}

.shared-market-footer .footer-bottom-modern {
  overflow: hidden;
}

.footer-modern .scroll-to-top {
  background: linear-gradient(135deg, #0ea5e9, #22d3c5) !important;
  border: 1px solid rgba(103, 232, 249, 0.55) !important;
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.34);
}

body:not(.dark-mode) .footer-modern {
  background:
    radial-gradient(860px 260px at 8% -8%, rgba(14, 165, 233, 0.14), transparent 70%),
    radial-gradient(760px 230px at 88% 4%, rgba(34, 211, 197, 0.12), transparent 68%),
    linear-gradient(145deg, #0c223a 0%, #133556 52%, #0f2843 100%) !important;
}

body.dark-mode .footer-modern {
  background:
    radial-gradient(860px 260px at 8% -8%, rgba(14, 165, 233, 0.16), transparent 70%),
    radial-gradient(760px 230px at 88% 4%, rgba(34, 211, 197, 0.12), transparent 68%),
    linear-gradient(145deg, #071427 0%, #0a1f37 52%, #081b31 100%) !important;
}

@media (max-width: 991px) {
  .footer-main {
    padding: 50px 0 30px !important;
  }

  .footer-widget {
    margin-bottom: 24px;
  }

  .footer-contact {
    padding: 18px !important;
    border-radius: 14px !important;
  }

  .footer-payments {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    margin-top: 12px;
  }

  .payment-icons {
    justify-content: flex-start;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .payment-icons .pay-badge {
    width: 100%;
    height: 52px;
  }

  .payment-icons .pay-badge i {
    font-size: 22px !important;
  }

  .payment-icons .pay-icon-img {
    width: 22px;
    height: 22px;
  }

  .payment-icons .pay-icon-img--googlepay {
    width: 34px;
    height: 18px;
  }

  .shared-market-footer .payment-icons .pay-badge:nth-child(n+7) {
    display: none !important;
  }
}

/* Sticky header flash fix: remove side white flash during scroll transitions */
#header {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

#header .container,
#header .row,
#header .col-md-12 {
  width: 100% !important;
  max-width: 100% !important;
}

#header .col-md-12 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

body.header-compact #header {
  width: 100% !important;
  overflow: hidden !important;
}

body.header-compact #header .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.header-compact #header .col-md-12::before,
body.header-compact #header .col-md-12::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Header full-width hard fix (normal + compact) */
#header {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
}

#header > .container,
#header .container,
#header .row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#header .col-md-12,
body.header-compact #header .col-md-12 {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

body.header-compact #header {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

body.header-compact.header-scroll-down #header,
body.header-compact.header-scroll-up #header {
  transform: none !important;
}

/* Header stability + dropdown visibility hard override */
#header,
body.header-compact #header {
  overflow: visible !important;
}

#header .container,
#header .row,
#header .col-md-12,
#header .main-navigation,
#header .navbar,
#header .navbar-collapse,
#header .nav.navbar-nav {
  overflow: visible !important;
}

#header .col-md-12 {
  position: relative;
  z-index: 1300 !important;
}

#header .navbar-nav > li {
  position: relative;
}

#header .navbar-nav > li > ul {
  z-index: 5000 !important;
}

/* Dropdown readability hard-fix (all submenu levels) */
#header .navbar-nav li > ul,
#header .navbar-nav li > ul ul {
  background: linear-gradient(165deg, #071a35, #0a2748) !important;
  background-color: #0a1f3d !important;
  border: 1px solid rgba(125, 211, 252, 0.38) !important;
  border-radius: 12px !important;
  box-shadow:
    0 22px 42px rgba(2, 8, 23, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#header .navbar-nav li > ul > li > a,
#header .navbar-nav li > ul ul > li > a {
  color: #f3f9ff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
}

#header .navbar-nav li > ul > li > a:hover,
#header .navbar-nav li > ul > li > a:focus,
#header .navbar-nav li > ul ul > li > a:hover,
#header .navbar-nav li > ul ul > li > a:focus {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(45, 212, 191, 0.24)) !important;
  border-color: rgba(125, 211, 252, 0.52) !important;
}

#header .navbar-nav li > ul > li:not(:last-child) > a,
#header .navbar-nav li > ul ul > li:not(:last-child) > a {
  box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.24) !important;
}

/* ==========================================================================
   Non-scroll header color presets (A/B/C)
   - Switch via URL: ?navstyle=a | ?navstyle=b | ?navstyle=c
   ========================================================================== */
body:not(.header-compact).ha-navstyle-a #header .col-md-12 {
  background:
    radial-gradient(120% 180% at 10% 0%, rgba(56, 189, 248, 0.18), transparent 48%),
    radial-gradient(120% 180% at 92% 0%, rgba(45, 212, 191, 0.14), transparent 52%),
    linear-gradient(140deg, rgba(5, 24, 48, 0.9), rgba(9, 48, 82, 0.88)) !important;
  border: none !important;
  box-shadow: 0 14px 36px rgba(2, 8, 23, 0.42) !important;
}

body:not(.header-compact).ha-navstyle-a .top_header {
  background: linear-gradient(90deg, rgba(10, 32, 61, 0.88), rgba(11, 57, 87, 0.84)) !important;
  border-bottom-color: rgba(125, 211, 252, 0.46) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
}

body:not(.header-compact).ha-navstyle-a #header .navbar-nav > li > a {
  color: rgba(238, 247, 255, 0.98) !important;
  text-shadow: none;
}

body:not(.header-compact).ha-navstyle-a #header .navbar-nav > li > a:hover {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(45, 212, 191, 0.16)) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: none;
}

body:not(.header-compact).ha-navstyle-a #header .navbar-nav > li.active > a {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.98), rgba(45, 212, 191, 0.96)) !important;
  border: none !important;
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.22);
}

body:not(.header-compact).ha-navstyle-b #header .col-md-12 {
  background: linear-gradient(140deg, rgba(8, 44, 46, 0.95), rgba(11, 77, 73, 0.93)) !important;
  box-shadow: 0 14px 34px rgba(2, 18, 20, 0.4), inset 0 1px 0 rgba(182, 255, 246, 0.15) !important;
}

body:not(.header-compact).ha-navstyle-b .top_header {
  background: linear-gradient(90deg, rgba(8, 39, 43, 0.96), rgba(10, 71, 74, 0.95)) !important;
  border-bottom-color: rgba(94, 234, 212, 0.42) !important;
}

body:not(.header-compact).ha-navstyle-b #header .navbar-nav > li > a {
  color: rgba(234, 255, 252, 0.97) !important;
}

body:not(.header-compact).ha-navstyle-b #header .navbar-nav > li > a:hover {
  background: rgba(94, 234, 212, 0.22) !important;
  color: #ffffff !important;
}

body:not(.header-compact).ha-navstyle-b #header .navbar-nav > li.active > a {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.98), rgba(45, 212, 191, 0.98)) !important;
}

body:not(.header-compact).ha-navstyle-c #header .col-md-12 {
  background: linear-gradient(140deg, rgba(9, 20, 57, 0.95), rgba(24, 45, 106, 0.93)) !important;
  box-shadow: 0 15px 36px rgba(1, 7, 20, 0.52), inset 0 1px 0 rgba(188, 204, 255, 0.16) !important;
}

body:not(.header-compact).ha-navstyle-c .top_header {
  background: linear-gradient(90deg, rgba(11, 24, 66, 0.96), rgba(24, 43, 99, 0.95)) !important;
  border-bottom-color: rgba(147, 197, 253, 0.45) !important;
}

body:not(.header-compact).ha-navstyle-c #header .navbar-nav > li > a {
  color: rgba(238, 244, 255, 0.97) !important;
}

body:not(.header-compact).ha-navstyle-c #header .navbar-nav > li > a:hover {
  background: rgba(96, 165, 250, 0.22) !important;
  color: #ffffff !important;
}

body:not(.header-compact).ha-navstyle-c #header .navbar-nav > li.active > a {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(96, 165, 250, 0.96)) !important;
}

/* Legacy style.css high-specificity override: force readable hover-open dropdowns */
#header .navbar-default #navbar-collapse-1 ul ul,
#header .navbar-default #navbar-collapse-1 ul ul ul {
  background: linear-gradient(165deg, #071a35, #0a2748) !important;
  background-color: #0a1f3d !important;
  border: 1px solid rgba(125, 211, 252, 0.38) !important;
  box-shadow:
    0 22px 42px rgba(2, 8, 23, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  opacity: 1 !important;
  visibility: visible;
}

#header .navbar-default #navbar-collapse-1 ul li:hover ul a,
#header .navbar-default #navbar-collapse-1 ul ul a,
#header .navbar-default #navbar-collapse-1 ul ul li a {
  color: #f3f9ff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

#header .navbar-default #navbar-collapse-1 ul ul li:hover,
#header .navbar-default #navbar-collapse-1 ul ul li:focus-within {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(45, 212, 191, 0.24)) !important;
}

#header .navbar-default #navbar-collapse-1 ul ul li:hover > a,
#header .navbar-default #navbar-collapse-1 ul ul li > a:hover,
#header .navbar-default #navbar-collapse-1 ul ul li > a:focus {
  color: #ffffff !important;
}

/* Best services desktop gap fix: fill right-side empty area */
@media (min-width: 992px) {
  body.ha-home-global .best_services .parallax-content > .row,
  body.ha-market-bd .best_services .parallax-content > .row {
    display: flex;
    align-items: stretch;
  }

  body.ha-home-global .best_services .parallax-content > .row > .col-md-6,
  body.ha-market-bd .best_services .parallax-content > .row > .col-md-6 {
    display: flex;
    flex-direction: column;
  }

  body.ha-home-global .best_services .parallax-content > .row > .col-md-6:last-child,
  body.ha-market-bd .best_services .parallax-content > .row > .col-md-6:last-child {
    min-height: 100%;
  }

  body.ha-home-global .best_services .best-services-card,
  body.ha-market-bd .best_services .best-services-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.ha-home-global .best_services .best-services-card ul,
  body.ha-market-bd .best_services .best-services-card ul {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}

/* Best services compact height tuning (desktop) */
@media (min-width: 992px) {
  body.ha-home-global .best_services,
  body.ha-market-bd .best_services {
    padding: 56px 0 !important;
    min-height: auto !important;
  }

  body.ha-home-global .best_services .parallax-title,
  body.ha-market-bd .best_services .parallax-title {
    margin-bottom: 10px !important;
    font-size: clamp(1.95rem, 2.55vw, 2.5rem) !important;
  }

  body.ha-home-global .best_services .parallax-subtitle,
  body.ha-market-bd .best_services .parallax-subtitle {
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
  }

  body.ha-home-global .best_services .best-service-points,
  body.ha-market-bd .best_services .best-service-points {
    margin: 12px 0 8px !important;
    gap: 8px !important;
  }

  body.ha-home-global .best_services .best-service-point,
  body.ha-market-bd .best_services .best-service-point {
    padding: 11px 12px !important;
  }

  body.ha-home-global .best_services .best-services-card ul li,
  body.ha-market-bd .best_services .best-services-card ul li {
    padding: 6px 0 !important;
  }
}

/* ==========================================================================
   Premium Header + Footer Final Layer
   ========================================================================== */
:root {
  --ha-header-shell: linear-gradient(128deg, rgba(6, 22, 45, 0.95) 0%, rgba(10, 37, 67, 0.92) 55%, rgba(9, 32, 59, 0.94) 100%);
  --ha-header-utility: linear-gradient(90deg, rgba(8, 29, 55, 0.9) 0%, rgba(11, 48, 77, 0.88) 100%);
  --ha-header-border: rgba(125, 211, 252, 0.24);
  --ha-header-text: #eaf4ff;
  --ha-header-muted: rgba(203, 219, 238, 0.92);
  --ha-header-hover: rgba(34, 211, 238, 0.16);
  --ha-header-active: linear-gradient(135deg, rgba(14, 165, 233, 0.96), rgba(45, 212, 191, 0.92));
}

.market-header .top_header {
  background: var(--ha-header-utility) !important;
  border-bottom: 1px solid rgba(125, 211, 252, 0.16) !important;
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
}

.market-header .top_header .top_menu li {
  color: var(--ha-header-muted) !important;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.market-header .top_header .top_menu li i {
  color: rgba(125, 211, 252, 0.92);
}

.market-header #header .col-md-12 {
  background: var(--ha-header-shell) !important;
  border-bottom: 1px solid var(--ha-header-border);
  box-shadow:
    0 14px 30px rgba(2, 8, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.market-header #header .logo #logo {
  max-height: 44px;
  width: auto;
}

.market-header #header .navbar-nav > li > a {
  color: var(--ha-header-text) !important;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.01em;
  padding: 9px 13px !important;
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.market-header #header .navbar-nav > li > a:hover,
.market-header #header .navbar-nav > li > a:focus-visible {
  color: #ffffff !important;
  background: var(--ha-header-hover) !important;
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.18);
}

.market-header #header .navbar-nav > li.active > a {
  background: var(--ha-header-active) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(14, 165, 233, 0.24);
}

.market-header #header .navbar-nav > li.has-dropdown > a.dropdown-toggle::after {
  content: "\f107";
  font-family: "FontAwesome";
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.92;
}

.market-header #header .navbar-nav > li > ul {
  margin-top: 12px;
  padding: 10px;
  min-width: 236px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(6, 20, 41, 0.995), rgba(8, 31, 58, 0.99)) !important;
  border: 1px solid rgba(125, 211, 252, 0.28) !important;
  box-shadow:
    0 18px 34px rgba(2, 8, 23, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Linux Shared Hosting - Light mode layer polish
   ========================================================================== */
body:not(.dark-mode).ha-page-linux-shared-hosting .pricing-modern-section {
  background: linear-gradient(180deg, #eef6ff 0%, #f7fbff 50%, #ecf5ff 100%) !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .pricing-modern-section::before {
  background: radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.12), transparent 48%),
    radial-gradient(circle at 86% 22%, rgba(45, 212, 191, 0.1), transparent 45%) !important;
  opacity: 1 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .best_services {
  background: linear-gradient(150deg, #edf6ff 0%, #f8fbff 55%, #eef7ff 100%) !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .best_services .parallax-overlay {
  background: linear-gradient(140deg, rgba(236, 246, 255, 0.86), rgba(245, 251, 255, 0.8)) !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .best_services .parallax-title,
body:not(.dark-mode).ha-page-linux-shared-hosting .best_services .parallax-subtitle {
  color: #123765 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section {
  background:
    linear-gradient(180deg, #f6fbff 0%, #edf6ff 52%, #f8fcff 100%) !important;
  position: relative;
  overflow: hidden;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section::before,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section::before,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section::before {
  background:
    radial-gradient(circle at 16% 22%, rgba(56, 189, 248, 0.16), transparent 52%),
    radial-gradient(circle at 86% 80%, rgba(99, 102, 241, 0.1), transparent 50%) !important;
  opacity: 1 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section::after,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section::after,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section::after {
  content: "";
  position: absolute;
  inset: -8% -6%;
  background:
    radial-gradient(40% 52% at 84% 14%, rgba(59, 130, 246, 0.18), transparent 72%),
    radial-gradient(34% 46% at 10% 84%, rgba(14, 165, 233, 0.16), transparent 74%),
    linear-gradient(120deg, rgba(255, 255, 255, 0) 20%, rgba(191, 219, 254, 0.16) 50%, rgba(255, 255, 255, 0) 80%);
  animation: haNewsletterDrift 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-overlay::before,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-overlay::before,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.18) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.05) 0px,
      rgba(148, 163, 184, 0.05) 1px,
      transparent 1px,
      transparent 16px
    );
  opacity: 0.58;
  pointer-events: none;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-overlay,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-overlay,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-overlay {
  background: linear-gradient(140deg, rgba(235, 246, 255, 0.78), rgba(246, 251, 255, 0.72)) !important;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(191, 219, 254, 0.38);
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-text-box,
body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-form-box,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-text-box,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-form-box,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-text-box,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-form-box {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-title,
body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-lead,
body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-benefits p,
body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-note,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-text-box h2,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-text-box h4,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-text-box > p,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-benefits p,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-form p,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-text-box h2,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-text-box h4,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-text-box > p,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-benefits p,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-form p {
  color: #163556 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-title,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-text-box h2,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-text-box h2,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-text-box h4,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-text-box h4 {
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-lead,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-text-box > p,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-text-box > p {
  color: #274b71 !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-benefits p,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-benefits p,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-benefits p {
  color: #2a4f76 !important;
  font-weight: 600 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-note,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-form p,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-form p {
  color: #47698f !important;
  font-weight: 600 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter_text::placeholder,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter_text::placeholder,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter_text::placeholder {
  color: #7e93ad !important;
  opacity: 1 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-benefits i,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-benefits i,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-benefits i {
  color: #0ea5e9 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .color-white,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .color-white,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .color-white {
  color: #234a73 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-content,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-content,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-content {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 22px rgba(37, 99, 235, 0.08));
}

body:not(.dark-mode).ha-page-linux-shared-hosting section.newsletter.parallax-section .newsletter-form-box::after,
body:not(.dark-mode) .ha-why-section + section.newsletter.parallax-section .newsletter-form-box::after,
body:not(.dark-mode) .ha-why-section + center + section.newsletter.parallax-section .newsletter-form-box::after {
  color: #2f557d !important;
  border-color: rgba(147, 197, 253, 0.35) !important;
  background: linear-gradient(135deg, rgba(226, 239, 253, 0.86), rgba(214, 231, 248, 0.9)) !important;
  font-weight: 600;
}

@keyframes haNewsletterDrift {
  0% {
    transform: translate3d(-1.5%, -1.2%, 0) scale(1);
    opacity: 0.85;
  }
  100% {
    transform: translate3d(1.2%, 1.4%, 0) scale(1.03);
    opacity: 1;
  }
}

/* Fallback: ensure service layers never appear dark in light mode */
body:not(.dark-mode) .pricing-modern-section {
  background: linear-gradient(180deg, #eef6ff 0%, #f7fbff 52%, #edf6ff 100%) !important;
}

body:not(.dark-mode) .pricing-modern-section .pricing-card,
body:not(.dark-mode) .pricing-modern-section .pricing-card.featured {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(239, 248, 255, 0.88)) !important;
  border-color: rgba(125, 211, 252, 0.34) !important;
}

body:not(.dark-mode) .parallax-section.best_services {
  background: linear-gradient(145deg, #edf6ff 0%, #f6fbff 55%, #eef7ff 100%) !important;
}

body:not(.dark-mode) .parallax-section.best_services .parallax-overlay {
  background: linear-gradient(135deg, rgba(234, 245, 255, 0.88), rgba(245, 251, 255, 0.84)) !important;
}

body:not(.dark-mode) .parallax-section.best_services .service-box,
body:not(.dark-mode) .parallax-section.best_services .service-card,
body:not(.dark-mode) .parallax-section.best_services .best-services-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(239, 248, 255, 0.82)) !important;
  border-color: rgba(125, 211, 252, 0.28) !important;
}

/* Fast Deployment block (home + all pages): force readable light-mode contrast */
body:not(.dark-mode) .parallax-section.best_services .parallax-title,
body:not(.dark-mode) .parallax-section.best_services .parallax-subtitle,
body:not(.dark-mode) .parallax-section.best_services .color-white,
body:not(.dark-mode) .parallax-section.best_services h2,
body:not(.dark-mode) .parallax-section.best_services h4,
body:not(.dark-mode) .parallax-section.best_services p {
  color: #173b64 !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .parallax-section.best_services .parallax-title {
  color: #0f2f54 !important;
  font-weight: 800 !important;
}

body:not(.dark-mode) .parallax-section.best_services .parallax-subtitle {
  color: #34587f !important;
  font-weight: 500 !important;
}

body:not(.dark-mode) .parallax-section.best_services .service-stack-card,
body:not(.dark-mode) .parallax-section.best_services .service-stack-item,
body:not(.dark-mode) .parallax-section.best_services .service-flip-shell {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(240, 248, 255, 0.86)) !important;
  border: 1px solid rgba(125, 211, 252, 0.34) !important;
  box-shadow: 0 12px 28px rgba(15, 39, 70, 0.08) !important;
}

body:not(.dark-mode) .parallax-section.best_services .service-stack-card h3, body:not(.dark-mode) .parallax-section.best_services .service-stack-card h5,
body:not(.dark-mode) .parallax-section.best_services .service-stack-item h5,
body:not(.dark-mode) .parallax-section.best_services .service-stack-card p,
body:not(.dark-mode) .parallax-section.best_services .service-stack-item p {
  color: #1e4268 !important;
}

body:not(.dark-mode) .newsletter.parallax-section {
  background: linear-gradient(145deg, #edf7ff 0%, #f6fbff 55%, #edf8ff 100%) !important;
}

body:not(.dark-mode) .newsletter.parallax-section .newsletter-overlay {
  background: linear-gradient(120deg, rgba(239, 248, 255, 0.84), rgba(246, 251, 255, 0.78)) !important;
}

/* Linux shared: match light-mode section palette with other light layers */
body:not(.dark-mode).ha-page-linux-shared-hosting .background-grey.text-center.bottom_padding_xs.modern-section {
  background: linear-gradient(180deg, #f3f8ff 0%, #edf6ff 52%, #f6fbff 100%) !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .background-grey.text-center.bottom_padding_xs.modern-section .why-feature-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(240, 248, 255, 0.9)) !important;
  border: 1px solid rgba(147, 197, 253, 0.3) !important;
  box-shadow: 0 18px 42px rgba(30, 64, 175, 0.08) !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .background-grey.text-center.bottom_padding_xs.modern-section .modern-heading h2,
body:not(.dark-mode).ha-page-linux-shared-hosting .background-grey.text-center.bottom_padding_xs.modern-section .modern-heading p,
body:not(.dark-mode).ha-page-linux-shared-hosting .background-grey.text-center.bottom_padding_xs.modern-section .why-feature-card h5,
body:not(.dark-mode).ha-page-linux-shared-hosting .background-grey.text-center.bottom_padding_xs.modern-section .why-feature-card p {
  color: #183153 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-cta-section,
body:not(.dark-mode) .ha-specs-section + .ha-cta-section {
  background: linear-gradient(125deg, #eef6ff 0%, #e6f4ff 45%, #dff4ff 100%) !important;
  position: relative;
  overflow: hidden;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-cta-section::before,
body:not(.dark-mode) .ha-specs-section + .ha-cta-section::before {
  content: "";
  position: absolute;
  inset: -18% auto auto -6%;
  width: 42%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(14, 165, 233, 0.2), rgba(14, 165, 233, 0) 68%);
  pointer-events: none;
  z-index: 0;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-cta-section::after,
body:not(.dark-mode) .ha-specs-section + .ha-cta-section::after {
  content: "";
  position: absolute;
  right: -8%;
  top: -26%;
  width: 46%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(34, 211, 197, 0.18), rgba(34, 211, 197, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-cta-section > .container,
body:not(.dark-mode) .ha-specs-section + .ha-cta-section > .container {
  position: relative;
  z-index: 1;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-cta-section h3,
body:not(.dark-mode).ha-page-linux-shared-hosting .ha-cta-section p,
body:not(.dark-mode) .ha-specs-section + .ha-cta-section h3,
body:not(.dark-mode) .ha-specs-section + .ha-cta-section p {
  color: #17345a !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-cta-section [style*="background:rgba(255,255,255,.15)"],
body:not(.dark-mode) .ha-specs-section + .ha-cta-section [style*="background:rgba(255,255,255,.15)"] {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(125, 211, 252, 0.42) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-cta-section [style*="color:#fff"],
body:not(.dark-mode) .ha-specs-section + .ha-cta-section [style*="color:#fff"] {
  color: #1e3a5f !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-cta-section [style*="color:rgba(255,255,255,.8)"],
body:not(.dark-mode) .ha-specs-section + .ha-cta-section [style*="color:rgba(255,255,255,.8)"] {
  color: #4b6688 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-why-section,
body:not(.dark-mode) .ha-features-section + .ha-why-section {
  background: linear-gradient(180deg, #f2f8ff 0%, #ecf6ff 52%, #f7fbff 100%) !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-why-section .row[style*="border-bottom"],
body:not(.dark-mode) .ha-features-section + .ha-why-section .row[style*="border-bottom"] {
  border-bottom: 1px solid rgba(148, 190, 226, 0.45) !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-why-section .ha-stat-label,
body:not(.dark-mode).ha-page-linux-shared-hosting .ha-why-section .ha-section-sub-dark,
body:not(.dark-mode) .ha-features-section + .ha-why-section .ha-stat-label,
body:not(.dark-mode) .ha-features-section + .ha-why-section .ha-section-sub-dark {
  color: #5d7696 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-why-section .ha-section-title-dark,
body:not(.dark-mode) .ha-features-section + .ha-why-section .ha-section-title-dark {
  color: #17345a !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-why-section .ha-why-card,
body:not(.dark-mode) .ha-features-section + .ha-why-section .ha-why-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(240, 248, 255, 0.9)) !important;
  border: 1px solid rgba(147, 197, 253, 0.3) !important;
  box-shadow: 0 16px 36px rgba(30, 64, 175, 0.08) !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-why-section .ha-why-card h3,
body:not(.dark-mode).ha-page-linux-shared-hosting .ha-why-section .ha-why-card h5,
body:not(.dark-mode) .ha-features-section + .ha-why-section .ha-why-card h3,
body:not(.dark-mode) .ha-features-section + .ha-why-section .ha-why-card h5 {
  color: #153357 !important;
}

body:not(.dark-mode).ha-page-linux-shared-hosting .ha-why-section .ha-why-card p,
body:not(.dark-mode) .ha-features-section + .ha-why-section .ha-why-card p {
  color: #5a7393 !important;
}

.market-header #header .navbar-nav > li > ul > li > a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(235, 246, 255, 0.96) !important;
  border-radius: 9px !important;
  padding: 10px 13px !important;
}

.market-header #header .navbar-nav > li > ul > li > a:hover,
.market-header #header .navbar-nav > li > ul > li > a:focus {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.26), rgba(45, 212, 191, 0.2)) !important;
}

.market-header #header .navbar-nav > li.main-blog-btn-item > a.ha-ai-cta-btn {
  min-width: 136px;
  height: 38px;
  border-radius: 999px;
  letter-spacing: 0.015em;
  box-shadow: 0 10px 20px rgba(2, 8, 23, 0.28), 0 0 0 1px rgba(125, 211, 252, 0.2);
}

body .shared-market-footer .footer-main {
  padding-top: 62px !important;
  padding-bottom: 36px !important;
  background: transparent !important;
}

body .shared-market-footer .footer-about {
  padding: 0 !important;
  background: transparent !important;
}

.shared-market-footer .footer-about .footer-description {
  margin-top: 10px;
}

.shared-market-footer .footer-about .footer-social {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

.shared-market-footer .footer-about .footer-social .social-link {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid rgba(125, 211, 252, 0.3);
  color: #dbf2ff !important;
  background: linear-gradient(145deg, rgba(8, 33, 58, 0.76), rgba(8, 40, 63, 0.64)) !important;
  box-shadow: 0 10px 18px rgba(2, 8, 23, 0.24);
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.shared-market-footer .footer-about .footer-social .social-link:hover {
  transform: translateY(-2px);
  color: #ffffff !important;
  border-color: rgba(103, 232, 249, 0.58);
}

.shared-market-footer .footer-contact address {
  margin: 0;
  font-style: normal;
}

.shared-market-footer .footer-contact .contact-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}

.shared-market-footer .footer-contact .contact-item:last-child {
  margin-bottom: 0;
}

.shared-market-footer .footer-bottom-modern {
  padding: 18px 0 !important;
}

.shared-market-footer .footer-payments {
  gap: 10px;
}

.shared-market-footer .payment-icons {
  gap: 8px;
}

.shared-market-footer .payment-icons .pay-badge {
  border-radius: 12px;
  height: 54px;
}

.shared-market-footer .scroll-to-top {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

@media (max-width: 991px) {
  .market-header .top_header .row {
    gap: 8px;
  }

  .market-header #header .col-md-12 {
    padding: 8px 12px !important;
  }

  .market-header #header .navbar-collapse.in,
  .market-header #header .navbar-collapse.collapsing {
    border-radius: 14px !important;
    border: 1px solid rgba(125, 211, 252, 0.22) !important;
    background: linear-gradient(160deg, rgba(6, 20, 41, 0.98), rgba(9, 33, 59, 0.97)) !important;
  }

  .shared-market-footer .footer-about .footer-social {
    margin-bottom: 8px;
  }
}

/* Lightweight SEO FAQ block for linux shared hosting */
body.ha-page-linux-shared-hosting .ha-seo-faq-lite {
  padding: 64px 0 42px;
  background: linear-gradient(180deg, #f4f8ff 0%, #eef4ff 100%);
}

body.ha-page-linux-shared-hosting .ha-seo-faq-head {
  max-width: 100%;
  margin: 0 auto 34px;
}

body.ha-page-linux-shared-hosting .ha-seo-faq-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0ea5e9;
  border: 1px solid rgba(14, 165, 233, 0.25);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 10px;
}

body.ha-page-linux-shared-hosting .ha-seo-faq-head h2 {
  margin: 0 0 10px;
  font-size: 38px;
  font-weight: 800;
  color: #0f2746;
  letter-spacing: -0.02em;
}

body.ha-page-linux-shared-hosting .ha-seo-faq-head p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #456180;
}

body.ha-page-linux-shared-hosting .ha-seo-faq-list {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  align-items: start;
}

body.ha-page-linux-shared-hosting .ha-seo-faq-item {
  border: 1px solid rgba(148, 176, 214, 0.44);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(245, 251, 255, 0.88));
  border-radius: 16px;
  padding: 0 20px;
  box-shadow: 0 14px 34px rgba(15, 39, 70, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  align-self: start;
}

body.ha-page-linux-shared-hosting .ha-seo-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 700;
  color: #16375b;
  padding: 20px 30px 20px 0;
  position: relative;
}

body.ha-page-linux-shared-hosting .ha-seo-faq-item summary::-webkit-details-marker {
  display: none;
}

body.ha-page-linux-shared-hosting .ha-seo-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 23px;
  line-height: 1;
  color: #0ea5e9;
  transition: transform 0.2s ease;
}

body.ha-page-linux-shared-hosting .ha-seo-faq-item[open] summary::after {
  content: "\2212";
}

body.ha-page-linux-shared-hosting .ha-seo-faq-item p {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.8;
  color: #3d5776;
}

body.ha-page-linux-shared-hosting .ha-seo-faq-item:hover {
  border-color: rgba(56, 189, 248, 0.42);
  box-shadow: 0 16px 38px rgba(14, 165, 233, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

body.ha-page-linux-shared-hosting .ha-seo-faq-item[open] {
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.96), rgba(237, 248, 255, 0.9));
}

body.dark-mode.ha-page-linux-shared-hosting .ha-seo-faq-lite {
  background: linear-gradient(180deg, #071428 0%, #081a31 100%);
}

body.dark-mode.ha-page-linux-shared-hosting .ha-seo-faq-eyebrow {
  background: rgba(11, 28, 52, 0.82);
}

body.dark-mode.ha-page-linux-shared-hosting .ha-seo-faq-head h2 {
  color: #e7f2ff;
}

body.dark-mode.ha-page-linux-shared-hosting .ha-seo-faq-head p {
  color: #a8bfd9;
}

body.dark-mode.ha-page-linux-shared-hosting .ha-seo-faq-item {
  border-color: rgba(83, 126, 175, 0.38);
  background: linear-gradient(140deg, rgba(11, 28, 52, 0.86), rgba(8, 24, 46, 0.82));
  box-shadow: 0 14px 28px rgba(2, 8, 24, 0.28);
}

body.dark-mode.ha-page-linux-shared-hosting .ha-seo-faq-item summary {
  color: #e5efff;
}

body.dark-mode.ha-page-linux-shared-hosting .ha-seo-faq-item p {
  color: #b8cbe3;
}

body.ha-page-linux-shared-hosting .faq-section {
  display: none !important;
}

@media (min-width: 992px) {
  body.ha-page-linux-shared-hosting .ha-seo-faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 16px;
  }

  body.ha-page-linux-shared-hosting .ha-seo-faq-list .ha-seo-faq-item:first-child,
  body.ha-page-linux-shared-hosting .ha-seo-faq-list .ha-seo-faq-item:nth-child(2) {
    grid-column: span 2;
  }
}

@media (max-width: 767px) {
  body.ha-page-linux-shared-hosting .ha-seo-faq-lite {
    padding: 46px 0 28px;
  }

  body.ha-page-linux-shared-hosting .ha-seo-faq-head h2 {
    font-size: 30px;
  }

  body.ha-page-linux-shared-hosting .ha-seo-faq-item summary {
    font-size: 16px;
    padding-right: 24px;
  }
}

/* Global newsletter palette sync (all pages): keep same look as linux-shared-hosting */
body:not(.dark-mode) section.newsletter.parallax-section {
  background: linear-gradient(180deg, #f6fbff 0%, #edf6ff 52%, #f8fcff 100%) !important;
}

body:not(.dark-mode) section.newsletter.parallax-section::before {
  background:
    radial-gradient(circle at 16% 22%, rgba(56, 189, 248, 0.16), transparent 52%),
    radial-gradient(circle at 86% 80%, rgba(99, 102, 241, 0.1), transparent 50%) !important;
  opacity: 1 !important;
}

body:not(.dark-mode) section.newsletter.parallax-section::after {
  content: "";
  position: absolute;
  inset: -8% -6%;
  background:
    radial-gradient(40% 52% at 84% 14%, rgba(59, 130, 246, 0.18), transparent 72%),
    radial-gradient(34% 46% at 10% 84%, rgba(14, 165, 233, 0.16), transparent 74%),
    linear-gradient(120deg, rgba(255, 255, 255, 0) 20%, rgba(191, 219, 254, 0.16) 50%, rgba(255, 255, 255, 0) 80%);
  animation: haNewsletterDrift 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

body:not(.dark-mode) section.newsletter.parallax-section .newsletter-overlay {
  background: linear-gradient(140deg, rgba(235, 246, 255, 0.78), rgba(246, 251, 255, 0.72)) !important;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(191, 219, 254, 0.38);
}

body:not(.dark-mode) section.newsletter.parallax-section .newsletter-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.18) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.05) 0px,
      rgba(148, 163, 184, 0.05) 1px,
      transparent 1px,
      transparent 16px
    );
  opacity: 0.58;
  pointer-events: none;
}

body:not(.dark-mode) section.newsletter.parallax-section .newsletter-text-box h2,
body:not(.dark-mode) section.newsletter.parallax-section .newsletter-text-box h4,
body:not(.dark-mode) section.newsletter.parallax-section .newsletter-text-box > p,
body:not(.dark-mode) section.newsletter.parallax-section .newsletter-benefits p,
body:not(.dark-mode) section.newsletter.parallax-section .newsletter-form p,
body:not(.dark-mode) section.newsletter.parallax-section .newsletter-title,
body:not(.dark-mode) section.newsletter.parallax-section .newsletter-lead,
body:not(.dark-mode) section.newsletter.parallax-section .newsletter-note {
  color: #163556 !important;
}

body:not(.dark-mode) section.newsletter.parallax-section .newsletter-lead,
body:not(.dark-mode) section.newsletter.parallax-section .newsletter-text-box > p {
  color: #274b71 !important;
}

body:not(.dark-mode) section.newsletter.parallax-section .newsletter-note,
body:not(.dark-mode) section.newsletter.parallax-section .newsletter-form p {
  color: #47698f !important;
}

body:not(.dark-mode) section.newsletter.parallax-section .newsletter-form-box::after {
  color: #2f557d !important;
  border-color: rgba(147, 197, 253, 0.35) !important;
  background: linear-gradient(135deg, rgba(226, 239, 253, 0.86), rgba(214, 231, 248, 0.9)) !important;
  font-weight: 600;
}

body.dark-mode section.newsletter.parallax-section {
  background: linear-gradient(180deg, #071428 0%, #081a31 100%) !important;
}

body.dark-mode section.newsletter.parallax-section .newsletter-overlay {
  background: linear-gradient(140deg, rgba(9, 24, 44, 0.82), rgba(9, 28, 51, 0.78)) !important;
}

body.dark-mode section.newsletter.parallax-section .newsletter-text-box h2,
body.dark-mode section.newsletter.parallax-section .newsletter-text-box h4,
body.dark-mode section.newsletter.parallax-section .newsletter-text-box > p,
body.dark-mode section.newsletter.parallax-section .newsletter-benefits p,
body.dark-mode section.newsletter.parallax-section .newsletter-form p,
body.dark-mode section.newsletter.parallax-section .newsletter-title,
body.dark-mode section.newsletter.parallax-section .newsletter-lead,
body.dark-mode section.newsletter.parallax-section .newsletter-note {
  color: #e6f1ff !important;
}

/* Force-consistent newsletter shell on all pages (including home + bd home) */
body section.newsletter.parallax-section .parallax-bg,
body section.newsletter.parallax-section .newsletter-accent-shape {
  display: none !important;
  background: none !important;
}

body section.newsletter.parallax-section .newsletter-text-box,
body section.newsletter.parallax-section .newsletter-form-box {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body section.newsletter.parallax-section .newsletter-content {
  position: relative;
  z-index: 2;
}

/* Responsive hardening across generated global + BD pages */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

#main-content,
main#main-content {
  max-width: 100%;
  overflow-x: clip;
}

section,
header,
footer {
  max-width: 100%;
}

body section.newsletter.parallax-section .newsletter-content .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body section.newsletter.parallax-section .newsletter-text-box,
body section.newsletter.parallax-section .newsletter-form-box {
  max-width: 100% !important;
}

#main-content .ha-orb,
.ha-orb {
  max-width: min(72vw, 360px) !important;
  max-height: min(72vw, 360px) !important;
  overflow: hidden !important;
}

@media (max-width: 991px) {
  body section.newsletter.parallax-section .newsletter-content {
    width: min(100%, calc(100vw - 24px)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body section.newsletter.parallax-section .newsletter-input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  body section.newsletter.parallax-section .newsletter_text,
  body section.newsletter.parallax-section .newsletter-subscribe-btn {
    width: 100% !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 767px) {
  #main-content .ha-orb,
  .ha-orb {
    max-width: 260px !important;
    max-height: 260px !important;
    filter: blur(56px) !important;
  }

  .ha-hero-stats-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ha-hero-stat {
    min-width: 0 !important;
    padding: 14px 10px !important;
    border-right: 0 !important;
  }

  .ha-hero-stat-num {
    font-size: clamp(1.1rem, 5vw, 1.55rem) !important;
  }

  .ha-hero-stat-label {
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
  }
}

/* ── Tablet compact nav (992–1199px): hamburger dropdown ──────────────────
   Same containing-block fix as the <991px block above:
   Bootstrap 3 sets .navbar { position:relative } but at this breakpoint the
   .navbar shrinks to just the toggle button (~44px wide) because
   .navbar-collapse is hidden.  An absolutely-positioned .navbar-collapse.in
   would therefore anchor to that tiny element.
   Fix: force .navbar static → col-md-12 (full-width, position:relative)
   becomes the containing block → right:0 / top:100% work correctly.
   ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Step 1: remove navbar as containing block */
  #header .navbar {
    position: static !important;
  }

  /* Step 2: col-md-12 is full-width and becomes the anchor */
  #header .col-md-12 {
    position: relative !important;
  }

  /* Show the hamburger toggle */
  #header .navbar-toggle {
    display: block !important;
    float: right !important;
    position: relative !important;
    z-index: 10001 !important;
  }

  /* Collapsed state: truly hidden */
  #header .navbar-collapse.collapse {
    display: none !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* Open/animating state: visible */
  #header .navbar-collapse.collapse.in,
  #header .navbar-collapse.collapsing {
    display: block !important;
    overflow-y: auto !important;
  }

  /* Shrink header-right / main-navigation so the toggle can float right */
  #header .header-right,
  #header .main-navigation {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* Step 3: dropdown panel — anchored to col-md-12.
     Use .collapse.in (3 classes) to beat the global
     #header .scrollspy.smooth-scroll transparent rule (2 classes). */
  #header .navbar-collapse.collapse.in,
  #header .navbar-collapse.collapsing {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    width: min(420px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 120px) !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(10, 30, 56, 0.99), rgba(12, 42, 72, 0.98)) !important;
    border: 1px solid rgba(125, 211, 252, 0.24) !important;
    box-shadow: 0 16px 34px rgba(2, 8, 23, 0.5) !important;
    z-index: 10000 !important;
    overflow-x: hidden !important;
  }

  /* Nav list: stacked layout inside the panel */
  #header .navbar-nav {
    display: block !important;
    float: none !important;
    margin: 0 !important;
  }

  #header .navbar-nav > li {
    float: none !important;
    margin: 0 0 2px !important;
  }

  #header .navbar-nav > li:last-child {
    margin-bottom: 0 !important;
  }

  /* Nav link text color inside the dark panel */
  #header .navbar-collapse.collapse.in .navbar-nav > li > a,
  #header .navbar-collapse.collapsing .navbar-nav > li > a {
    padding: 11px 14px !important;
    color: rgba(226, 232, 240, 0.96) !important;
    border-radius: 8px !important;
    display: block !important;
  }

  #header .navbar-collapse.collapse.in .navbar-nav > li > a:hover,
  #header .navbar-collapse.collapse.in .navbar-nav > li > a:focus,
  #header .navbar-collapse.collapsing .navbar-nav > li > a:hover {
    background: rgba(125, 211, 252, 0.14) !important;
    color: #e2e8f0 !important;
  }

  /* Dropdown arrow indicator for items that have sub-menus */
  #header .navbar-collapse.collapse.in .navbar-nav > li.has-submenu > a.dropdown-toggle::after,
  #header .navbar-collapse.collapsing .navbar-nav > li.has-submenu > a.dropdown-toggle::after {
    content: '▾';
    float: right;
    font-size: 12px;
    opacity: 0.7;
    margin-top: 2px;
    transition: transform 0.2s ease;
  }

  #header .navbar-collapse.collapse.in .navbar-nav > li.has-submenu.open > a.dropdown-toggle::after {
    content: '▴';
  }

  /* Sub-menus: hidden by default, shown when parent li.open */
  #header .navbar-collapse.collapse.in .navbar-nav > li > ul,
  #header .navbar-collapse.collapsing .navbar-nav > li > ul {
    display: none !important;
    position: static !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    transform: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
    padding: 4px 0 !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: none !important;
  }

  #header .navbar-collapse.collapse.in .navbar-nav > li.open > ul,
  #header .navbar-collapse.collapsing .navbar-nav > li.open > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 480px !important;
    overflow-y: auto !important;
  }

  #header .navbar-collapse.collapse.in .navbar-nav > li > ul li a,
  #header .navbar-collapse.collapsing .navbar-nav > li > ul li a {
    color: rgba(203, 213, 225, 0.9) !important;
    padding: 10px 20px !important;
    display: block !important;
    border-radius: 6px !important;
  }

  #header .navbar-collapse.collapse.in .navbar-nav > li > ul li a:hover,
  #header .navbar-collapse.collapsing .navbar-nav > li > ul li a:hover {
    background: rgba(125, 211, 252, 0.12) !important;
    color: #e2e8f0 !important;
  }

  /* Hide nav items when panel is closed */
  #header .navbar-collapse:not(.in):not(.collapsing) .navbar-nav {
    display: none !important;
  }

  /* ── Compact (sticky) header: keep panel opaque while open ───────────────
     When body.header-compact is active (user scrolled), the global compact
     rule sets navbar-collapse background:transparent.  This higher-specificity
     override (body + #header + 3 classes = 141 > 121) locks the panel dark. */
  body.header-compact #header .navbar-collapse.collapse.in,
  body.header-compact #header .navbar-collapse.collapsing {
    background: linear-gradient(180deg, rgb(8, 24, 52), rgb(10, 36, 64)) !important;
    border: 1px solid rgba(125, 211, 252, 0.26) !important;
    box-shadow: 0 20px 40px rgba(2, 8, 23, 0.6) !important;
    overflow: visible !important;   /* undo compact overflow:hidden at ≤1260px */
    overflow-y: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: transform;         /* own compositing layer */
  }
}

/* ── Compact header + open hamburger: lock panel opaque on ALL breakpoints ─
   The compact-transparent rule has specificity (0,1,2,1)=121.
   This rule (body + #header + .navbar-collapse + .in) = (0,1,3,1)=131 wins.
   No media query needed: .in is only on the element when hamburger is open,
   which only happens at ≤1199px where the toggle is visible.            */
body.header-compact #header .navbar-collapse.in,
body.header-compact #header .navbar-collapse.collapsing {
  background: linear-gradient(180deg, rgb(8, 24, 52), rgb(10, 36, 64)) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  box-shadow: 0 18px 38px rgba(2, 8, 23, 0.55) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: transform;
}

/* Submenu links stay visible in compact mode too */
body.header-compact #header .navbar-collapse.in .navbar-nav > li > ul li a,
body.header-compact #header .navbar-collapse.collapsing .navbar-nav > li > ul li a {
  visibility: visible !important;
  color: rgba(203, 213, 225, 0.9) !important;
}

body.header-compact #header .navbar-collapse.in .navbar-nav > li.open > ul,
body.header-compact #header .navbar-collapse.collapsing .navbar-nav > li.open > ul {
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
}

/* ── Linux VPS — FAQ same design as Linux Shared Hosting ──────────────── */
body.ha-page-linux-vps .ha-seo-faq-lite {
  padding: 64px 0 42px;
  background: linear-gradient(180deg, #f4f8ff 0%, #eef4ff 100%);
}
body.ha-page-linux-vps .ha-seo-faq-head {
  max-width: 100%;
  margin: 0 auto 34px;
}
body.ha-page-linux-vps .ha-seo-faq-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0ea5e9;
  border: 1px solid rgba(14, 165, 233, 0.25);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 10px;
}
body.ha-page-linux-vps .ha-seo-faq-head h2 {
  margin: 0 0 10px;
  font-size: 38px;
  font-weight: 800;
  color: #0f2746;
  letter-spacing: -0.02em;
}
body.ha-page-linux-vps .ha-seo-faq-head p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #456180;
}
body.ha-page-linux-vps .ha-seo-faq-list {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
body.ha-page-linux-vps .ha-seo-faq-item {
  border: 1px solid rgba(148, 176, 214, 0.44);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(245, 251, 255, 0.88));
  border-radius: 16px;
  padding: 0 20px;
  box-shadow: 0 14px 34px rgba(15, 39, 70, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body.ha-page-linux-vps .ha-seo-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 700;
  color: #16375b;
  padding: 20px 30px 20px 0;
  position: relative;
}
body.ha-page-linux-vps .ha-seo-faq-item summary::-webkit-details-marker { display: none; }
body.ha-page-linux-vps .ha-seo-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 23px;
  line-height: 1;
  color: #0ea5e9;
  transition: transform 0.2s ease;
}
body.ha-page-linux-vps .ha-seo-faq-item[open] summary::after { content: "\2212"; }
body.ha-page-linux-vps .ha-seo-faq-item p {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.8;
  color: #3d5776;
}
body.ha-page-linux-vps .ha-seo-faq-item:hover {
  border-color: rgba(56, 189, 248, 0.42);
  box-shadow: 0 16px 38px rgba(14, 165, 233, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
body.ha-page-linux-vps .ha-seo-faq-item[open] {
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.96), rgba(237, 248, 255, 0.9));
}

/* Dark mode */
body.dark-mode.ha-page-linux-vps .ha-seo-faq-lite {
  background: linear-gradient(180deg, #071428 0%, #081a31 100%);
}
body.dark-mode.ha-page-linux-vps .ha-seo-faq-eyebrow {
  background: rgba(11, 28, 52, 0.82);
}
body.dark-mode.ha-page-linux-vps .ha-seo-faq-head h2 { color: #e7f2ff; }
body.dark-mode.ha-page-linux-vps .ha-seo-faq-head p { color: #a8bfd9; }
body.dark-mode.ha-page-linux-vps .ha-seo-faq-item {
  border-color: rgba(83, 126, 175, 0.38);
  background: linear-gradient(140deg, rgba(11, 28, 52, 0.86), rgba(8, 24, 46, 0.82));
  box-shadow: 0 14px 28px rgba(2, 8, 24, 0.28);
}
body.dark-mode.ha-page-linux-vps .ha-seo-faq-item summary { color: #e5efff; }
body.dark-mode.ha-page-linux-vps .ha-seo-faq-item p { color: #b8cbe3; }

/* 2-column grid on desktop */
@media (min-width: 992px) {
  body.ha-page-linux-vps .ha-seo-faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 16px;
  }
  body.ha-page-linux-vps .ha-seo-faq-list .ha-seo-faq-item:first-child,
  body.ha-page-linux-vps .ha-seo-faq-list .ha-seo-faq-item:nth-child(2) {
    grid-column: span 2;
  }
}
@media (max-width: 767px) {
  body.ha-page-linux-vps .ha-seo-faq-lite { padding: 46px 0 28px; }
  body.ha-page-linux-vps .ha-seo-faq-head h2 { font-size: 30px; }
  body.ha-page-linux-vps .ha-seo-faq-item summary { font-size: 16px; padding-right: 24px; }
}

/* Final light-mode visibility fix for Fast Deployment section */
body:not(.dark-mode) .best_services.parallax-section .parallax-bg {
  display: block !important;
  opacity: 0.78 !important;
  filter: saturate(1.05) contrast(1.03) brightness(0.96) !important;
}

body:not(.dark-mode) .best_services.parallax-section .parallax-overlay {
  background: linear-gradient(
    125deg,
    rgba(231, 242, 255, 0.62) 0%,
    rgba(224, 238, 252, 0.48) 52%,
    rgba(214, 232, 250, 0.58) 100%
  ) !important;
}

body:not(.dark-mode) .best_services.parallax-section .parallax-content {
  position: relative;
  z-index: 2;
}

body:not(.dark-mode) .best_services.parallax-section .section-eyebrow,
body:not(.dark-mode) .best_services.parallax-section .parallax-title,
body:not(.dark-mode) .best_services.parallax-section .parallax-subtitle,
body:not(.dark-mode) .best_services.parallax-section .best-service-point strong,
body:not(.dark-mode) .best_services.parallax-section .best-service-point span,
body:not(.dark-mode) .best_services.parallax-section .best-services-card li,
body:not(.dark-mode) .best_services.parallax-section .best-services-card li span,
body:not(.dark-mode) .best_services.parallax-section p {
  color: #123a63 !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .best_services.parallax-section .parallax-title {
  color: #0d2f56 !important;
}

body:not(.dark-mode) .best_services.parallax-section .parallax-subtitle {
  color: #2d547c !important;
}

body:not(.dark-mode) .best_services.parallax-section .best-service-point,
body:not(.dark-mode) .best_services.parallax-section .best-services-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.84), rgba(240, 249, 255, 0.78)) !important;
  border: 1px solid rgba(125, 211, 252, 0.34) !important;
  box-shadow: 0 12px 28px rgba(15, 39, 70, 0.1) !important;
}

/* Premium polish pass: divider glow + typography rhythm + richer card surface */
body .best_services.parallax-section {
  position: relative;
}

body .best_services.parallax-section::before,
body .best_services.parallax-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 3;
}

body .best_services.parallax-section::before {
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.45), transparent);
}

body .best_services.parallax-section::after {
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.34), transparent);
}

body .best_services.parallax-section .parallax-title {
  letter-spacing: -0.02em !important;
  line-height: 1.14 !important;
}

body .best_services.parallax-section .parallax-subtitle {
  max-width: 62ch;
  line-height: 1.7 !important;
  font-size: clamp(1.02rem, 1.25vw, 1.16rem) !important;
}

body .best_services.parallax-section .best-service-point,
body .best_services.parallax-section .best-services-card {
  position: relative;
  overflow: hidden;
}

body .best_services.parallax-section .best-service-point::before,
body .best_services.parallax-section .best-services-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 90% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 52%),
    repeating-linear-gradient(
      120deg,
      rgba(148, 163, 184, 0.05) 0px,
      rgba(148, 163, 184, 0.05) 1px,
      transparent 1px,
      transparent 12px
    );
  opacity: 0.44;
  pointer-events: none;
}

body .best_services.parallax-section .best-service-point > *,
body .best_services.parallax-section .best-services-card > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   Newsletter — hide from main content, show above footer only
   ══════════════════════════════════════════════════════════ */
main#main-content .newsletter.parallax-section {
  display: none !important;
}

main#main-content .post-newsletter-ribbon {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   Linux VPS — Premium Pricing Card Enhancements
   ══════════════════════════════════════════════════════════ */

/* ── Wrapper glow background ── */
.ha-vps-list-wrap {
  position: relative;
}

.ha-vps-list-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.055) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.ha-vps-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Row number — monogram accent ── */
.ha-row-num {
  font-size: 10px !important;
  font-weight: 900 !important;
  color: rgba(34, 211, 238, 0.22) !important;
  letter-spacing: 0.5px;
  font-family: monospace;
}

.ha-vps-row.featured .ha-row-num {
  color: rgba(34, 211, 238, 0.55) !important;
}

/* ── Plan chip — richer pill ── */
.ha-plan-chip {
  border-radius: 14px !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  padding: 10px 18px !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}

.ha-vps-row:hover .ha-plan-chip {
  background: rgba(34, 211, 238, 0.1) !important;
  border-color: rgba(34, 211, 238, 0.28) !important;
}

/* ── Featured plan chip — gradient glow ── */
.ha-vps-row.featured .ha-plan-chip {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.28), rgba(16, 185, 129, 0.18)) !important;
  border-color: rgba(34, 211, 238, 0.55) !important;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.18) !important;
}

/* ── Spec chips — tighter, more polished ── */
.ha-vps-spec {
  font-size: 11.5px !important;
  padding: 7px 13px !important;
  border-radius: 9px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.ha-vps-row:hover .ha-vps-spec {
  transform: translateY(-1px);
}

.ha-spec-cpu { box-shadow: 0 2px 8px rgba(34, 211, 238, 0.12) !important; }
.ha-spec-ram { box-shadow: 0 2px 8px rgba(167, 139, 250, 0.12) !important; }
.ha-spec-ssd { box-shadow: 0 2px 8px rgba(52, 211, 153, 0.12) !important; }
.ha-spec-bw  { box-shadow: 0 2px 8px rgba(251, 191, 36,  0.12) !important; }
.ha-spec-feat{ box-shadow: 0 2px 8px rgba(244, 114, 182, 0.12) !important; }

/* ── Price — bigger, more impact ── */
.ha-vps-price strong {
  font-size: 36px !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
}

.ha-vps-price span {
  font-size: 10px !important;
  letter-spacing: 1px !important;
  margin-top: 5px !important;
  color: rgba(255, 255, 255, 0.38) !important;
}

/* ── CTA buttons — stronger presence ── */
.ha-btn-vps-outline,
.ha-btn-vps-outline-green {
  font-size: 12.5px !important;
  padding: 12px 20px !important;
  letter-spacing: 0.5px !important;
}

.ha-btn-vps-solid {
  font-size: 13px !important;
  padding: 13px 20px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 8px 28px rgba(6, 182, 212, 0.5) !important;
}

.ha-btn-vps-solid:hover {
  box-shadow: 0 14px 40px rgba(6, 182, 212, 0.65) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

.ha-btn-vps-outline:hover {
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.22) !important;
  transform: translateY(-1px) !important;
}

.ha-btn-vps-outline-green:hover {
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.22) !important;
  transform: translateY(-1px) !important;
}

/* ── Featured row — animated glow border ── */
.ha-vps-row.featured {
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.22),
    0 20px 56px rgba(0, 0, 0, 0.34),
    0 0 70px rgba(6, 182, 212, 0.1) !important;
}

.ha-vps-row.featured:hover {
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.36),
    0 28px 68px rgba(0, 0, 0, 0.42),
    0 0 90px rgba(6, 182, 212, 0.18) !important;
  transform: translateY(-3px) !important;
}

/* ── Popular badge — more premium ── */
.ha-vps-popular-badge {
  font-size: 9px !important;
  letter-spacing: 2.5px !important;
  padding: 6px 18px !important;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.55) !important;
  gap: 7px !important;
}

.ha-vps-popular-badge i {
  color: #fde68a !important;
  font-size: 9px !important;
}

/* ── Trust bar — premium look ── */
.ha-trust-bar {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(34, 211, 238, 0.12) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(14px) !important;
}

.ha-trust-item {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

.ha-trust-item i {
  color: #22d3ee !important;
}

/* ── Pricing note ── */
.ha-pricing-note {
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.48) !important;
  margin-top: 24px !important;
}

/* ══════════════════════════════════════════════════════════
   Linux VPS — Hero & Page Premium Polish
   ══════════════════════════════════════════════════════════ */

/* ── Hero badge pulse ── */
.ha-hero-badge {
  backdrop-filter: blur(8px) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

.ha-hero-badge .dot {
  animation: dotPulse 2s ease-in-out infinite !important;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.75); }
}

/* ── Hero H1 — tighter, more impact ── */
.ha-hero-h1 {
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}

/* ── Hero pills — more refined ── */
.ha-hero-pill {
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  backdrop-filter: blur(6px) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.ha-hero-pill:hover {
  background: rgba(34, 211, 238, 0.12) !important;
  border-color: rgba(34, 211, 238, 0.3) !important;
}

/* ── Primary hero button — stronger glow ── */
.ha-hero-btn-primary {
  letter-spacing: 0.3px !important;
  font-size: 15px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.ha-hero-btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 40px rgba(6, 182, 212, 0.65), 0 0 0 0 rgba(6, 182, 212, 0) !important;
}

/* ── Outline button — cleaner ── */
.ha-hero-btn-outline {
  backdrop-filter: blur(6px) !important;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease !important;
}

.ha-hero-btn-outline:hover {
  transform: translateY(-2px) !important;
}

/* ── Server status card — deeper glow ── */
.ha-server-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.ha-server-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.55), 0 0 80px rgba(6,182,212,0.15) !important;
}

/* ── Stats bar numbers — sharper ── */
.ha-hero-stat-num {
  font-size: clamp(20px, 2.8vw, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.ha-hero-stat-label {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

/* ── Spec cards (Tech Specs section) ── */
.ha-spec-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.ha-spec-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 48px rgba(6,182,212,0.14) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
}

.ha-spec-icon-vps {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.ha-spec-card:hover .ha-spec-icon-vps {
  transform: scale(1.1) rotate(-4deg) !important;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.45) !important;
}

.ha-spec-body h3,.ha-spec-body h5 {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* ── How It Works steps ── */
.ha-hiw-step {
  transition: transform 0.22s ease !important;
}

.ha-hiw-step:hover {
  transform: translateY(-4px) !important;
}

.ha-hiw-num {
  transition: box-shadow 0.22s ease !important;
}

.ha-hiw-step:hover .ha-hiw-num {
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.5) !important;
}

/* ── Pricing eyebrow & title ── */
.ha-pricing-eyebrow {
  font-size: 11px !important;
  letter-spacing: 4.5px !important;
}

.ha-pricing-title {
  font-size: clamp(28px, 3.5vw, 42px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}

.ha-pricing-subtitle {
  font-size: 15px !important;
  line-height: 1.75 !important;
}

/* ── FAQ section ── */
.ha-faq-item {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ha-faq-item:hover {
  border-color: rgba(6, 182, 212, 0.3) !important;
  box-shadow: 0 8px 32px rgba(6, 182, 212, 0.08) !important;
}

/* ── CTA section button ── */
.ha-cta-btn-primary {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.ha-cta-btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 48px rgba(6, 182, 212, 0.55) !important;
}

/* Domain search page readability fixes */
body.ha-page-domain-search #main-content {
  overflow-x: hidden;
}

body.ha-page-domain-search .ha-hero-sub {
  color: rgba(235, 248, 255, 0.86) !important;
  font-size: clamp(14px, 1.4vw, 16px) !important;
  line-height: 1.75 !important;
  max-width: 620px !important;
}

body.ha-page-domain-search .ha-hero-pill {
  color: #eaf8ff !important;
  background: rgba(15, 23, 42, 0.76) !important;
  border-color: rgba(34, 211, 238, 0.32) !important;
}

body.ha-page-domain-search .ha-server-title,
body.ha-page-domain-search .ha-domain-search-form,
body.ha-page-domain-search .ha-domain-input,
body.ha-page-domain-search .ha-domain-select {
  color: #eef9ff !important;
}

body.ha-page-domain-search .ha-server-title {
  opacity: 1 !important;
}

body.ha-page-domain-search .ha-domain-input {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(34, 211, 238, 0.38) !important;
}

body.ha-page-domain-search .ha-domain-input::placeholder {
  color: rgba(226, 244, 255, 0.72) !important;
}

body.ha-page-domain-search .ha-domain-select {
  background-color: rgba(15, 23, 42, 0.84) !important;
  border-color: rgba(34, 211, 238, 0.38) !important;
}

body.ha-page-domain-search .ha-hero-stat-label {
  color: rgba(226, 244, 255, 0.82) !important;
  text-transform: none !important;
}

body.ha-page-domain-search .ha-domain-card {
  min-height: 100%;
}

body:not(.dark-mode).ha-page-domain-search .ha-domain-card {
  background: #ffffff !important;
  border-color: rgba(8, 145, 178, 0.18) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08) !important;
}

body:not(.dark-mode).ha-page-domain-search .ha-domain-card-popular {
  background: linear-gradient(150deg, #ffffff 0%, #ecfeff 100%) !important;
  border-color: rgba(8, 145, 178, 0.42) !important;
  box-shadow: 0 18px 42px rgba(8, 145, 178, 0.16) !important;
}

body:not(.dark-mode).ha-page-domain-search .ha-domain-ext {
  color: #0f172a !important;
}

body:not(.dark-mode).ha-page-domain-search .ha-domain-price-row {
  border-color: rgba(15, 23, 42, 0.09) !important;
}

body:not(.dark-mode).ha-page-domain-search .ha-domain-price-label {
  color: #475569 !important;
  font-weight: 600 !important;
}

body:not(.dark-mode).ha-page-domain-search .ha-domain-price-val {
  color: #0f172a !important;
}

body.dark-mode.ha-page-domain-search .ha-domain-card {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(34, 211, 238, 0.22) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34) !important;
}

body.dark-mode.ha-page-domain-search .ha-domain-ext,
body.dark-mode.ha-page-domain-search .ha-domain-price-val {
  color: #f8fbff !important;
}

body.dark-mode.ha-page-domain-search .ha-domain-price-label {
  color: #c9d9e8 !important;
  font-weight: 600 !important;
}

body.dark-mode.ha-page-domain-search .ha-domain-price-row {
  border-color: rgba(226, 244, 255, 0.13) !important;
}

@media (max-width: 767px) {
  body.ha-page-domain-search .ha-hero-content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.ha-page-domain-search .ha-hero-h1 {
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.08 !important;
  }

  body.ha-page-domain-search .ha-domain-search-form {
    padding: 22px 16px !important;
  }

  body.ha-page-domain-search .ha-domain-input,
  body.ha-page-domain-search .ha-domain-select,
  body.ha-page-domain-search .ha-domain-search-btn {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 14px !important;
  }

  body.ha-page-domain-search .ha-hero-stats-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* About us light theme fixes */
body:not(.dark-mode).ha-page-about-us #main-content {
  background: #f8fafc !important;
  color: #1e293b !important;
}

body:not(.dark-mode).ha-page-about-us #main-content #ha-hero {
  background: linear-gradient(135deg, #f8fbff 0%, #eef7ff 54%, #ffffff 100%) !important;
  color: #0f172a !important;
}

body:not(.dark-mode).ha-page-about-us #main-content #ha-particles,
body:not(.dark-mode).ha-page-about-us #main-content .ha-grid,
body:not(.dark-mode).ha-page-about-us #main-content .ha-scanline {
  opacity: 0.16 !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-orb {
  opacity: 0.2 !important;
  filter: blur(72px) !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section,
body:not(.dark-mode).ha-page-about-us #main-content .ha-manifesto,
body:not(.dark-mode).ha-page-about-us #main-content .ha-stats-section,
body:not(.dark-mode).ha-page-about-us #main-content .ha-partners-section,
body:not(.dark-mode).ha-page-about-us #main-content .ha-tech-section,
body:not(.dark-mode).ha-page-about-us #main-content .ha-dcmap-section,
body:not(.dark-mode).ha-page-about-us #main-content .ha-eeat,
body:not(.dark-mode).ha-page-about-us #main-content .ha-testi-section,
body:not(.dark-mode).ha-page-about-us #main-content .ha-timeline-section,
body:not(.dark-mode).ha-page-about-us #main-content .ha-faq-about-section,
body:not(.dark-mode).ha-page-about-us #main-content .ha-about-cta {
  background: #f8fafc !important;
  color: #1e293b !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:nth-child(even),
body:not(.dark-mode).ha-page-about-us #main-content .ha-partners-section,
body:not(.dark-mode).ha-page-about-us #main-content .ha-dcmap-section,
body:not(.dark-mode).ha-page-about-us #main-content .ha-timeline-section {
  background: #ffffff !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-glass-card,
body:not(.dark-mode).ha-page-about-us #main-content .ha-feature-card,
body:not(.dark-mode).ha-page-about-us #main-content .ha-value-card,
body:not(.dark-mode).ha-page-about-us #main-content .ha-founder-card,
body:not(.dark-mode).ha-page-about-us #main-content .ha-tech-card,
body:not(.dark-mode).ha-page-about-us #main-content .ha-dcmap-region-card,
body:not(.dark-mode).ha-page-about-us #main-content .ha-eeat-card,
body:not(.dark-mode).ha-page-about-us #main-content .ha-eeat-score-card,
body:not(.dark-mode).ha-page-about-us #main-content .ha-testi-card,
body:not(.dark-mode).ha-page-about-us #main-content .ha-timeline-event,
body:not(.dark-mode).ha-page-about-us #main-content .ha-faq-about-card,
body:not(.dark-mode).ha-page-about-us #main-content .ha-manifesto-pillar,
body:not(.dark-mode).ha-page-about-us #main-content .ha-server-card {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
  color: #1e293b !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-cta-inner {
  background: linear-gradient(135deg, #ffffff 0%, #eef7ff 100%) !important;
  border-color: rgba(8, 145, 178, 0.22) !important;
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.1) !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-hero-h1,
body:not(.dark-mode).ha-page-about-us #main-content .ha-section-title,
body:not(.dark-mode).ha-page-about-us #main-content .ha-manifesto-statement,
body:not(.dark-mode).ha-page-about-us #main-content .ha-founder-name,
body:not(.dark-mode).ha-page-about-us #main-content .ha-about-cta-h2,
body:not(.dark-mode).ha-page-about-us #main-content .ha-faq-about-q,
body:not(.dark-mode).ha-page-about-us #main-content .ha-timeline-year,
body:not(.dark-mode).ha-page-about-us #main-content .ha-stat-number,
body:not(.dark-mode).ha-page-about-us #main-content .ha-metric-value,
body:not(.dark-mode).ha-page-about-us #main-content h1,
body:not(.dark-mode).ha-page-about-us #main-content h2,
body:not(.dark-mode).ha-page-about-us #main-content h3,
body:not(.dark-mode).ha-page-about-us #main-content h4,
body:not(.dark-mode).ha-page-about-us #main-content h5,
body:not(.dark-mode).ha-page-about-us #main-content h6 {
  color: #0f172a !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-hero-sub,
body:not(.dark-mode).ha-page-about-us #main-content .ha-section-sub,
body:not(.dark-mode).ha-page-about-us #main-content .ha-manifesto-sub,
body:not(.dark-mode).ha-page-about-us #main-content .ha-founder-bio,
body:not(.dark-mode).ha-page-about-us #main-content .ha-about-cta-sub,
body:not(.dark-mode).ha-page-about-us #main-content .ha-faq-about-a,
body:not(.dark-mode).ha-page-about-us #main-content .ha-testi-quote,
body:not(.dark-mode).ha-page-about-us #main-content .ha-timeline-event p,
body:not(.dark-mode).ha-page-about-us #main-content .ha-stat-label,
body:not(.dark-mode).ha-page-about-us #main-content .ha-metric-label,
body:not(.dark-mode).ha-page-about-us #main-content p,
body:not(.dark-mode).ha-page-about-us #main-content li {
  color: #475569 !important;
}

/* #64748b measured 3.99-4.34:1 on the tinted pills these sit on. */
body:not(.dark-mode).ha-page-about-us #main-content .ha-section-badge,
body:not(.dark-mode).ha-page-about-us #main-content .ha-founder-role,
body:not(.dark-mode).ha-page-about-us #main-content .ha-about-cta-trust span {
  color: #4e5a72 !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-founder-socials,
body:not(.dark-mode).ha-page-about-us #main-content .ha-metric,
body:not(.dark-mode).ha-page-about-us #main-content .ha-server-card-header,
body:not(.dark-mode).ha-page-about-us #main-content .ha-eeat-comply-div,
body:not(.dark-mode).ha-page-about-us #main-content .ha-domain-price-row {
  border-color: rgba(15, 23, 42, 0.1) !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-timeline-track {
  background: rgba(15, 23, 42, 0.12) !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-founder-img-wrap::after {
  background: linear-gradient(to top, rgba(248, 250, 252, 0.76), transparent) !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-cta-btn2 {
  background: #ffffff !important;
  border-color: rgba(8, 145, 178, 0.35) !important;
  color: #0891b2 !important;
}

body:not(.dark-mode).ha-page-about-us #main-content #ha-hero {
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.22), transparent 32%),
    radial-gradient(circle at 78% 12%, rgba(34, 211, 238, 0.18), transparent 30%),
    linear-gradient(135deg, #050b1a 0%, #071426 52%, #020617 100%) !important;
  color: #f8fbff !important;
}

body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-grid,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-scanline,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero #ha-particles {
  opacity: 0.45 !important;
}

body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-orb {
  opacity: 0.42 !important;
}

body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-hero-h1,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero h1,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero h2,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero h3,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-stat-number,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-metric-value {
  color: #ffffff !important;
}

body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-hero-sub,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero p,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero li,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-stat-label,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-metric-label {
  color: rgba(226, 232, 240, 0.78) !important;
}

body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-server-card {
  background: rgba(15, 23, 42, 0.82) !important;
  border-color: rgba(34, 211, 238, 0.2) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34) !important;
  color: #f8fbff !important;
}

body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-server-card-header,
body:not(.dark-mode).ha-page-about-us #main-content #ha-hero .ha-metric {
  border-color: rgba(226, 244, 255, 0.12) !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) {
  background:
    radial-gradient(circle at 18% 18%, rgba(139, 92, 246, 0.16), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.12), transparent 34%),
    #0a1128 !important;
  color: #f8fbff !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) .ha-section-title,
body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) .ha-founder-name,
body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) h2,
body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) h3 {
  color: #ffffff !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) .ha-section-sub,
body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) .ha-founder-bio,
body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) p {
  color: rgba(226, 232, 240, 0.72) !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) .ha-founder-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
  border-color: rgba(139, 92, 246, 0.18) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  color: #f8fbff !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) .ha-founder-chip,
body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) .ha-founder-social-link {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) .ha-founder-socials {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) .ha-founder-img {
  border-color: rgba(139, 92, 246, 0.25) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

body:not(.dark-mode).ha-page-about-us #main-content .ha-about-section:has(.ha-founder-card) .ha-founder-img-wrap::after {
  background: linear-gradient(to top, rgba(6, 13, 31, 0.8), transparent) !important;
}

/* About us data center map: full-width and always-readable labels */
body.ha-page-about-us #main-content .ha-dcmap-section {
  overflow: visible !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: #f6fbff !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro,
body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .container,
body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .datacenter-panel {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .datacenter-panel {
  border-radius: 0 !important;
  padding: 28px 0 30px !important;
  box-shadow: none !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .datacenter-benefits {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-map.location-map-lg {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  aspect-ratio: 1174 / 580 !important;
  height: auto !important;
  min-height: 0 !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-container,
body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-map .map,
body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-map .map.map-grey {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 30 !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-name {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 60 !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-name span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 18px !important;
  line-height: 1 !important;
  padding: 4px 7px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: #04243d !important;
  background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22) !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  body.ha-page-about-us #main-content .ha-dcmap-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-name span {
    font-size: 8px !important;
    min-height: 16px !important;
    padding: 3px 5px !important;
  }

  body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-pin {
    width: 12px !important;
    height: 12px !important;
  }
}

/* About us data center map final layout lock: homepage structure, no side overflow */
body.ha-page-about-us {
  overflow-x: hidden !important;
}

body.ha-page-about-us #main-content .ha-dcmap-section {
  overflow: hidden !important;
}

body.ha-page-about-us #main-content .ha-dcmap-section > .container {
  width: 100% !important;
  max-width: 1400px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap {
  width: 100% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border-radius: 24px !important;
  border-left: 0 !important;
  border-right: 0 !important;
  overflow: hidden !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .datacenter-panel {
  padding: 30px 26px 22px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-map.location-map-lg {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-container {
  overflow: visible !important;
}

@media (max-width: 767px) {
  body.ha-page-about-us #main-content .ha-dcmap-section > .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.ha-page-about-us #main-content .ha-dcmap-section > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.ha-page-about-us #main-content .ha-dcmap-wrap {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .datacenter-panel {
    border-radius: 0 !important;
    padding: 20px 0 18px !important;
  }

  body.ha-page-about-us #main-content .ha-dcmap-wrap #dedicatedintro .location-map.location-map-lg {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

/* About us timeline readability and wide-screen structure */
body.ha-page-about-us #main-content .ha-timeline-section {
  overflow: hidden !important;
}

body.ha-page-about-us #main-content .ha-timeline-section > .container {
  width: 100% !important;
  max-width: 1380px !important;
}

body.ha-page-about-us #main-content .ha-timeline-track {
  max-width: 1320px !important;
  margin: 64px auto 0 !important;
  padding: 42px 28px 34px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background:
    radial-gradient(900px 180px at 50% 0%, rgba(139, 92, 246, 0.1), transparent 62%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(241, 245, 249, 0.92) 100%) !important;
  box-shadow:
    0 28px 70px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  overflow: visible !important;
}

body.ha-page-about-us #main-content .ha-timeline-track::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.56), transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 42%) !important;
}

body.ha-page-about-us #main-content .ha-timeline-track::before {
  left: 42px !important;
  right: 42px !important;
  top: 74px !important;
}

body.ha-page-about-us #main-content .ha-timeline-items {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: start !important;
}

body.ha-page-about-us #main-content .ha-timeline-item {
  min-width: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

body.ha-page-about-us #main-content .ha-timeline-node {
  position: relative !important;
  z-index: 2 !important;
}

body.ha-page-about-us #main-content .ha-timeline-year {
  margin-top: 4px !important;
  margin-bottom: 14px !important;
}

body.ha-page-about-us #main-content .ha-timeline-event {
  display: block !important;
  width: 100% !important;
  min-height: 96px !important;
  margin: 0 !important;
  padding: 16px 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)) !important;
  color: #475569 !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1199px) {
  body.ha-page-about-us #main-content .ha-timeline-items {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.ha-page-about-us #main-content .ha-timeline-track::before {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.ha-page-about-us #main-content .ha-timeline-track {
    margin-top: 42px !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  body.ha-page-about-us #main-content .ha-timeline-items {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body.ha-page-about-us #main-content .ha-timeline-item {
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    gap: 16px !important;
    text-align: left !important;
    align-items: start !important;
  }

  body.ha-page-about-us #main-content .ha-timeline-node {
    grid-row: span 2 !important;
    margin: 0 !important;
  }

  body.ha-page-about-us #main-content .ha-timeline-year {
    margin: 4px 0 8px !important;
  }

  body.ha-page-about-us #main-content .ha-timeline-event {
    min-height: 0 !important;
  }
}

/* About us timeline premium surface refinement */
body.ha-page-about-us #main-content .ha-timeline-track {
  border-radius: 30px !important;
  background:
    radial-gradient(900px 220px at 18% 8%, rgba(139, 92, 246, 0.11), transparent 58%),
    radial-gradient(820px 220px at 82% 10%, rgba(34, 211, 238, 0.1), transparent 58%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.72) 0%, rgba(241, 245, 249, 0.54) 100%) !important;
  box-shadow:
    0 34px 90px rgba(15, 23, 42, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.86) inset !important;
}

body.ha-page-about-us #main-content .ha-timeline-track::after {
  background:
    linear-gradient(90deg, transparent 4%, rgba(255, 255, 255, 0.72) 22%, rgba(255, 255, 255, 0.72) 78%, transparent 96%) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 46%) !important;
}

body.ha-page-about-us #main-content .ha-timeline-node {
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.12),
    0 0 0 10px rgba(255, 255, 255, 0.56) !important;
}

body.ha-page-about-us #main-content .ha-timeline-event {
  border-color: rgba(255, 255, 255, 0.72) !important;
  border-left-color: rgba(255, 255, 255, 0.42) !important;
  border-right-color: rgba(255, 255, 255, 0.42) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)) !important;
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

/* Cloud hosting feature grid: stop Bootstrap float wrapping from creating masonry gaps */
body.ha-page-cloud-hosting #main-content .ha-features-section > .container > .row[style*="margin-top:50px"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: stretch !important;
}

body.ha-page-cloud-hosting #main-content .ha-features-section > .container > .row[style*="margin-top:50px"]::before,
body.ha-page-cloud-hosting #main-content .ha-features-section > .container > .row[style*="margin-top:50px"]::after {
  content: none !important;
  display: none !important;
}

body.ha-page-cloud-hosting #main-content .ha-features-section > .container > .row[style*="margin-top:50px"] > [class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
}

body.ha-page-cloud-hosting #main-content .ha-features-section .ha-feature-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 292px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 991px) {
  body.ha-page-cloud-hosting #main-content .ha-features-section > .container > .row[style*="margin-top:50px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.ha-page-cloud-hosting #main-content .ha-features-section > .container > .row[style*="margin-top:50px"] {
    grid-template-columns: 1fr !important;
  }

  body.ha-page-cloud-hosting #main-content .ha-features-section .ha-feature-card {
    min-height: 0 !important;
  }
}

/* Homepage final cascade lock — intentionally last in this stylesheet. */
@media (min-width: 992px) {
  body.ha-home-global .home_banner,
  body.ha-market-bd.ha-page-home .home_banner {
    height: 94vh !important;
    min-height: 720px !important;
    max-height: 940px !important;
  }

  body.ha-home-global .home_banner .hero-copy .parallax-title,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-title {
    max-width: 24ch !important;
    font-size: clamp(42px, 4.35vw, 59px) !important;
    line-height: 1.1 !important;
  }

  body.ha-home-global .home_banner .hero-copy .parallax-subtitle,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-subtitle {
    max-width: 64ch !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
  }
}

.market-header .dark-mode-btn,
.market-header .social_icon a,
.shared-market-footer .social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

.market-header #navbar-collapse-1 > ul > li > a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
}

.pricing-modern-section .pricing-card,
.why-feature-card,
.solution-card,
.best-services-card,
.service-stack-card {
  border-radius: var(--ha-radius-card, 18px) !important;
}

.pricing-modern-section .pricing-main-title,
body.ha-page-home #dedicatedintro .datacenter-top h2,
body.ha-page-home #main-content .modern-section h2,
body.ha-page-home #main-content .best_services h2 {
  font-size: clamp(32px, 3.2vw, 44px) !important;
  line-height: 1.15 !important;
}

.pricing-modern-section .card-title {
  font-size: 20px !important;
}

.pricing-modern-section .card-subtitle,
.pricing-modern-section .card-features li,
.pricing-modern-section .card-link {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.pricing-modern-section .price-main {
  font-size: clamp(34px, 3vw, 46px) !important;
}

.pricing-modern-section .price-currency,
.pricing-modern-section .price-period {
  font-size: 14px !important;
}

.shared-market-footer .footer-title {
  font-size: 18px !important;
  line-height: 1.35 !important;
}

/* Header targets must stay comfortably clickable after all legacy rules. */
.market-header .top_menu a,
.market-header .top_link a,
.market-header .navbar-brand,
.market-header .logo > a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
}

/* Keep Global and BD hero typography identical throughout the tablet range. */
@media (min-width: 768px) and (max-width: 991px) {
  body.ha-home-global #main-content .home_banner,
  body.ha-market-bd.ha-page-home #main-content .home_banner {
    height: auto !important;
    min-height: 880px !important;
  }

  body.ha-home-global #main-content .home_banner .hero-copy .parallax-title,
  body.ha-market-bd.ha-page-home #main-content .home_banner .hero-copy .parallax-title {
    max-width: 18ch !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: clamp(36px, 5.6vw, 44px) !important;
    line-height: 1.12 !important;
  }

  body.ha-home-global #main-content .home_banner .hero-copy .parallax-subtitle,
  body.ha-market-bd.ha-page-home #main-content .home_banner .hero-copy .parallax-subtitle {
    max-width: 62ch !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
}

@media (max-width: 767px) {
  body.ha-home-global .home_banner,
  body.ha-market-bd.ha-page-home .home_banner {
    height: auto !important;
    min-height: 700px !important;
  }

  body.ha-home-global .home_banner .hero-copy .parallax-title,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-title {
    max-width: 15ch !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: clamp(32px, 9.5vw, 42px) !important;
    line-height: 1.12 !important;
  }

  body.ha-home-global .home_banner .hero-copy .parallax-subtitle,
  body.ha-market-bd.ha-page-home .home_banner .hero-copy .parallax-subtitle {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  body.ha-page-home #dedicatedintro,
  body.ha-page-home #main-content .background-grey.modern-section,
  body.ha-page-home #main-content .service_box.modern-section,
  body.ha-page-home #main-content .best_services,
  body.ha-page-home #main-content .bottom_padding.modern-section {
    padding-top: 64px !important;
    padding-bottom: 56px !important;
  }

  body.ha-page-home .pricing-modern-section {
    padding-top: 72px !important;
    padding-bottom: 64px !important;
  }

  body.ha-page-home #dedicatedintro .datacenter-top p,
  body.ha-page-home #main-content .modern-section p,
  body.ha-page-home #main-content .best_services p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .pricing-modern-section .pricing-main-title,
  body.ha-page-home #dedicatedintro .datacenter-top h2,
  body.ha-page-home #main-content .modern-section h2,
  body.ha-page-home #main-content .best_services h2 {
    font-size: clamp(28px, 8vw, 34px) !important;
  }

  body.ha-page-home #dedicatedintro .location-map.location-map-lg .location-name span {
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
  }

  .market-header #navbar-collapse-1 > ul > li > a,
  .market-header #navbar-collapse-1 > ul > li > ul a {
    width: 100% !important;
    min-height: 48px !important;
  }

  .shared-market-footer .social-link {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   FAST DEPLOYMENT SECTION — premium layout (final authority)

   Three full-width rows — header, capability cards, assurance panel — so no
   column can end up taller than its neighbour. The band is painted purely in
   CSS; the remote photograph was removed from the markup so the homepage
   carries no extra image request. It stays dark in both themes by choice;
   the token block below only retunes it so the band still separates from the
   page behind it. The legacy parallax container caps itself at 1200px, well
   short of the 1480px every other section uses, so it is widened to match.
   Appended last on purpose: it has to outrank the patches above.
   ══════════════════════════════════════════════════════════ */

body:not(.dark-mode) .best_services.parallax-section {
  --bs-band:
    repeating-linear-gradient(90deg, rgba(148, 197, 255, 0.05) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(148, 197, 255, 0.04) 0 1px, transparent 1px 84px),
    radial-gradient(1250px 560px at 0% -26%, rgba(56, 189, 248, 0.26), transparent 60%),
    radial-gradient(880px 480px at 74% 38%, rgba(45, 212, 191, 0.12), transparent 64%),
    radial-gradient(1000px 540px at 104% 126%, rgba(99, 102, 241, 0.2), transparent 62%),
    linear-gradient(177deg, #051222 0%, #0a2039 46%, #04162a 100%);
  --bs-surface: linear-gradient(158deg, rgba(34, 66, 108, 0.72), rgba(11, 29, 55, 0.54));
  --bs-surface-border: rgba(125, 211, 252, 0.22);
  --bs-panel: linear-gradient(158deg, rgba(40, 77, 124, 0.68), rgba(9, 26, 51, 0.66));
  --bs-panel-border: rgba(125, 211, 252, 0.28);
}

body.dark-mode .best_services.parallax-section {
  /* The page behind is already dark, so the band lifts slightly and leans
     cooler to keep its own edge. */
  --bs-band:
    repeating-linear-gradient(90deg, rgba(148, 197, 255, 0.055) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(148, 197, 255, 0.045) 0 1px, transparent 1px 84px),
    radial-gradient(1250px 560px at 0% -26%, rgba(56, 189, 248, 0.22), transparent 60%),
    radial-gradient(880px 480px at 74% 38%, rgba(45, 212, 191, 0.14), transparent 64%),
    radial-gradient(1000px 540px at 104% 126%, rgba(99, 102, 241, 0.18), transparent 62%),
    linear-gradient(177deg, #0a1e35 0%, #0e2947 46%, #091f38 100%);
  --bs-surface: linear-gradient(158deg, rgba(44, 80, 126, 0.66), rgba(14, 36, 65, 0.52));
  --bs-surface-border: rgba(125, 211, 252, 0.26);
  --bs-panel: linear-gradient(158deg, rgba(48, 88, 138, 0.62), rgba(12, 33, 60, 0.64));
  --bs-panel-border: rgba(125, 211, 252, 0.32);
}

body:not(.dark-mode) .best_services.parallax-section,
body.dark-mode .best_services.parallax-section {
  --bs-rule: rgba(148, 197, 255, 0.16);
  --bs-title: #f7fbff;
  --bs-body: rgba(203, 224, 250, 0.72);
  --bs-strong: #ffffff;
  --bs-accent: #7dd3fc;
  --bs-accent-bright: #22d3ee;
  --bs-chip-bg: rgba(8, 47, 73, 0.62);
  --bs-chip-border: rgba(103, 232, 249, 0.34);
  --bs-surface-shadow: 0 16px 34px rgba(2, 10, 26, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --bs-surface-shadow-hover: 0 24px 48px rgba(2, 10, 26, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --bs-panel-shadow: 0 30px 66px rgba(2, 10, 26, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --bs-icon-bg: linear-gradient(150deg, rgba(34, 211, 238, 0.22), rgba(37, 99, 235, 0.16));
  --bs-icon-border: rgba(103, 232, 249, 0.36);
  --bs-cta: linear-gradient(96deg, #22d3ee 0%, #38bdf8 54%, #0ea5e9 100%);
  --bs-cta-text: #04121f;
  --bs-cta-shadow: 0 16px 34px rgba(14, 165, 233, 0.34);
  --bs-cta-shadow-hover: 0 24px 50px rgba(14, 165, 233, 0.44);

  display: block !important;
  min-height: 0 !important;
  padding: clamp(52px, 4.4vw, 78px) 0 !important;
  overflow: hidden;
  isolation: isolate;
}

body:not(.dark-mode) .best_services.parallax-section .parallax-overlay,
body.dark-mode .best_services.parallax-section .parallax-overlay {
  background: var(--bs-band) !important;
}

/* Match the width every other section on the page uses. */
body:not(.dark-mode) .best_services.parallax-section .container.parallax-content,
body.dark-mode .best_services.parallax-section .container.parallax-content {
  width: min(1480px, calc(100% - 60px)) !important;
  max-width: none !important;
  padding: 0 !important;
}

/* ── Row 1 · header ── */
body:not(.dark-mode) .best_services.parallax-section .bs-head,
body.dark-mode .best_services.parallax-section .bs-head {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: end;
  margin-bottom: clamp(28px, 2.8vw, 44px);
}

body:not(.dark-mode) .best_services.parallax-section .section-eyebrow,
body.dark-mode .best_services.parallax-section .section-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  max-width: max-content;
  margin: 0 0 15px !important;
  padding: 7px 17px !important;
  border-radius: 999px !important;
  border: 1px solid var(--bs-chip-border) !important;
  background: var(--bs-chip-bg) !important;
  color: var(--bs-accent) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase;
  text-align: left !important;
}

body:not(.dark-mode) .best_services.parallax-section .section-eyebrow i,
body.dark-mode .best_services.parallax-section .section-eyebrow i {
  color: var(--bs-accent-bright) !important;
}

body:not(.dark-mode) .best_services.parallax-section .parallax-title,
body.dark-mode .best_services.parallax-section .parallax-title {
  margin: 0 !important;
  color: var(--bs-title) !important;
  font-size: clamp(29px, 2.9vw, 46px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.032em !important;
  text-align: left !important;
  text-transform: none !important;
}

body:not(.dark-mode) .best_services.parallax-section .bs-head-aside,
body.dark-mode .best_services.parallax-section .bs-head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

body:not(.dark-mode) .best_services.parallax-section .parallax-subtitle,
body.dark-mode .best_services.parallax-section .parallax-subtitle {
  max-width: 44ch !important;
  margin: 0 !important;
  color: var(--bs-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
  text-align: left !important;
}

body:not(.dark-mode) .best_services.parallax-section .hero-primary-btn,
body.dark-mode .best_services.parallax-section .hero-primary-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  max-width: max-content;
  padding: 15px 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--bs-cta) !important;
  color: var(--bs-cta-text) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  box-shadow: var(--bs-cta-shadow) !important;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

body:not(.dark-mode) .best_services.parallax-section .hero-primary-btn:hover,
body.dark-mode .best_services.parallax-section .hero-primary-btn:hover {
  transform: translateY(-3px);
  color: var(--bs-cta-text) !important;
  box-shadow: var(--bs-cta-shadow-hover) !important;
}

/* ── Row 2 · capability cards, four equal columns ── */
body:not(.dark-mode) .best_services.parallax-section .best-service-points,
body.dark-mode .best_services.parallax-section .best-service-points {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.3vw, 20px) !important;
  margin: 0 0 clamp(14px, 1.3vw, 20px) !important;
}

body:not(.dark-mode) .best_services.parallax-section .best-service-point,
body.dark-mode .best_services.parallax-section .best-service-point {
  display: flex !important;
  flex-direction: column;
  padding: 26px 24px 28px !important;
  border-radius: 20px !important;
  border: 1px solid var(--bs-surface-border) !important;
  background: var(--bs-surface) !important;
  box-shadow: var(--bs-surface-shadow) !important;
  text-align: left !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

body:not(.dark-mode) .best_services.parallax-section .best-service-point::before,
body.dark-mode .best_services.parallax-section .best-service-point::before {
  opacity: 0.16 !important;
}

body:not(.dark-mode) .best_services.parallax-section .best-service-point:hover,
body.dark-mode .best_services.parallax-section .best-service-point:hover {
  transform: translateY(-5px);
  border-color: var(--bs-icon-border) !important;
  box-shadow: var(--bs-surface-shadow-hover) !important;
}

body:not(.dark-mode) .best_services.parallax-section .best-service-point .bs-icon,
body.dark-mode .best_services.parallax-section .best-service-point .bs-icon {
  display: grid !important;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 17px;
  border-radius: 13px;
  border: 1px solid var(--bs-icon-border);
  background: var(--bs-icon-bg);
  color: var(--bs-accent-bright) !important;
  font-size: 16px;
}

body:not(.dark-mode) .best_services.parallax-section .best-service-point strong,
body.dark-mode .best_services.parallax-section .best-service-point strong {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--bs-strong) !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.012em !important;
  text-align: left !important;
}

body:not(.dark-mode) .best_services.parallax-section .best-service-point .bs-icon i,
body.dark-mode .best_services.parallax-section .best-service-point .bs-icon i {
  color: var(--bs-accent-bright) !important;
}

body:not(.dark-mode) .best_services.parallax-section .best-service-point .bs-copy,
body.dark-mode .best_services.parallax-section .best-service-point .bs-copy {
  display: block !important;
  color: var(--bs-body) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  text-align: left !important;
}

/* ── Row 3 · assurance panel ── */
body:not(.dark-mode) .best_services.parallax-section .best-services-card,
body.dark-mode .best_services.parallax-section .best-services-card {
  display: grid !important;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 2.18fr);
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: 0;
  align-items: center;
  height: auto !important;
  padding: clamp(24px, 2vw, 32px) !important;
  border-radius: 22px !important;
  border: 1px solid var(--bs-panel-border) !important;
  background: var(--bs-panel) !important;
  box-shadow: var(--bs-panel-shadow) !important;
}

body:not(.dark-mode) .best_services.parallax-section .best-services-card::before,
body.dark-mode .best_services.parallax-section .best-services-card::before {
  opacity: 0.16 !important;
}

body:not(.dark-mode) .best_services.parallax-section .bsc-head,
body.dark-mode .best_services.parallax-section .bsc-head {
  padding: 0 !important;
  text-align: left !important;
}

body:not(.dark-mode) .best_services.parallax-section .bsc-kicker,
body.dark-mode .best_services.parallax-section .bsc-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--bs-accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body:not(.dark-mode) .best_services.parallax-section .bsc-head strong,
body.dark-mode .best_services.parallax-section .bsc-head strong {
  display: block;
  color: var(--bs-strong) !important;
  font-size: 19.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.022em;
}

body:not(.dark-mode) .best_services.parallax-section .best-services-card ul,
body.dark-mode .best_services.parallax-section .best-services-card ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(24px, 3vw, 48px);
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body:not(.dark-mode) .best_services.parallax-section .best-services-card li,
body.dark-mode .best_services.parallax-section .best-services-card li {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
}

body:not(.dark-mode) .best_services.parallax-section .best-services-card li span,
body.dark-mode .best_services.parallax-section .best-services-card li span {
  color: var(--bs-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

body:not(.dark-mode) .best_services.parallax-section .best-services-card li i,
body.dark-mode .best_services.parallax-section .best-services-card li i {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  margin: 0 !important;
  border-radius: 50%;
  border: 1px solid var(--bs-icon-border);
  background: var(--bs-icon-bg);
  color: var(--bs-accent-bright) !important;
  font-size: 11px;
}

/* ── Stats strip, spanning the panel ── */
body:not(.dark-mode) .best_services.parallax-section .bsc-foot,
body.dark-mode .best_services.parallax-section .bsc-foot {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 36px);
  margin-top: clamp(20px, 2vw, 28px);
  padding: clamp(18px, 1.8vw, 24px) 0 0 !important;
  border-top: 1px solid var(--bs-rule) !important;
}

body:not(.dark-mode) .best_services.parallax-section .bsc-foot span,
body.dark-mode .best_services.parallax-section .bsc-foot span {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: var(--bs-body) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

body:not(.dark-mode) .best_services.parallax-section .bsc-foot strong,
body.dark-mode .best_services.parallax-section .bsc-foot strong {
  margin: 0;
  color: var(--bs-strong) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.022em;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  body:not(.dark-mode) .best_services.parallax-section .best-services-card,
  body.dark-mode .best_services.parallax-section .best-services-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: 22px;
  }
}

@media (max-width: 991px) {
  body:not(.dark-mode) .best_services.parallax-section .bs-head,
  body.dark-mode .best_services.parallax-section .bs-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 22px;
  }

  body:not(.dark-mode) .best_services.parallax-section .best-service-points,
  body.dark-mode .best_services.parallax-section .best-service-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  body:not(.dark-mode) .best_services.parallax-section .container.parallax-content,
  body.dark-mode .best_services.parallax-section .container.parallax-content {
    width: calc(100% - 30px) !important;
  }

  body:not(.dark-mode) .best_services.parallax-section .best-service-points,
  body.dark-mode .best_services.parallax-section .best-service-points,
  body:not(.dark-mode) .best_services.parallax-section .best-services-card ul,
  body.dark-mode .best_services.parallax-section .best-services-card ul {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.dark-mode) .best_services.parallax-section .bsc-foot,
  body.dark-mode .best_services.parallax-section .bsc-foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body:not(.dark-mode) .best_services.parallax-section .hero-primary-btn,
  body.dark-mode .best_services.parallax-section .hero-primary-btn {
    width: 100% !important;
    max-width: none;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════
   CTA CONTRAST PASS

   Audited in both themes by measuring each button's label against every
   stop of its own gradient. Two systemic faults turned up:

   1. The bright cyan family (hero, domain search, solution cards, pricing,
      header "Talk to Sales") carried white labels — 1.88:1 at the teal end,
      effectively unreadable. They now take the deep navy label that the
      footer's primary CTA already used and that measured well.
   2. `body.dark-mode a { color: #8b9dff !important }` in dark-mode-modern.css
      repaints every link, buttons included, which is how a cyan pill ended
      up with an indigo label at 1.2:1. Links styled as buttons get their own
      colour back below. That blanket rule is still there — a new button
      built as an <a> will need the same treatment.
   ══════════════════════════════════════════════════════════ */

/* ── Bright cyan/teal fills → deep navy label ── */
body .home_banner .hero-primary-btn,
body .domainsearchsubmit,
body .top_link ul li.login > a:first-child,
body .pricing-card .card-button,
body [class*="MarketFooter"][class*="primaryCta"],
body.dark-mode .home_banner .hero-primary-btn,
body.dark-mode .domainsearchsubmit,
body.dark-mode .top_link ul li.login > a:first-child,
body.dark-mode .pricing-card .card-button,
body.dark-mode [class*="MarketFooter"][class*="primaryCta"] {
  color: #04243d !important;
  text-shadow: none !important;
}

body .home_banner .hero-primary-btn:hover,
body .domainsearchsubmit:hover,
body .top_link ul li.login > a:first-child:hover,
body .pricing-card .card-button:hover,
body [class*="MarketFooter"][class*="primaryCta"]:hover,
body.dark-mode .home_banner .hero-primary-btn:hover,
body.dark-mode .domainsearchsubmit:hover,
body.dark-mode .top_link ul li.login > a:first-child:hover,
body.dark-mode .pricing-card .card-button:hover,
body.dark-mode [class*="MarketFooter"][class*="primaryCta"]:hover {
  color: #04243d !important;
}

body .home_banner .hero-primary-btn i,
body .domainsearchsubmit i,
body .pricing-card .card-button i,
body [class*="MarketFooter"][class*="primaryCta"] i,
body.dark-mode .home_banner .hero-primary-btn i,
body.dark-mode .domainsearchsubmit i,
body.dark-mode .pricing-card .card-button i,
body.dark-mode [class*="MarketFooter"][class*="primaryCta"] i {
  color: inherit !important;
}

/* ── Deep indigo fills → white label (the blanket link rule stole these) ── */
body.dark-mode [class*="SharedFaqSection"][class*="ctaBtn"],
body.dark-mode [class*="SharedFaqSection"][class*="seeMoreBtn"],
body.dark-mode [class*="GlobalHomeSeo"][class*="ctaBtn1"],
body.dark-mode [class*="SharedFaqSection"][class*="ctaBtn"]:hover,
body.dark-mode [class*="SharedFaqSection"][class*="seeMoreBtn"]:hover,
body.dark-mode [class*="GlobalHomeSeo"][class*="ctaBtn1"]:hover {
  color: #ffffff !important;
}

/* Small uppercase label on a near-white panel; the brand cyan measured
   2.3:1 at 12px. */
body:not(.dark-mode) .section-eyebrow.dark {
  color: #0369a1 !important;
}

/* The solution-card CTA is a dark navy pill with a white label in light mode
   and passes there. Dark mode swapped it to the bright cyan fill while some
   `!important` further up kept the label white — 1.88:1. Keeping the navy
   pill in both themes fixes the contrast and makes the button read the same
   either way. */
body.dark-mode .service_box .solution-card .btn_primary {
  background: linear-gradient(135deg, #0b2545 0%, #14406e 100%) !important;
  color: #ffffff !important;
}

body.dark-mode .service_box .solution-card .btn_primary:hover {
  background: linear-gradient(135deg, #14406e 0%, #0b2545 100%) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   DARK-MODE CHROME FIXES

   Three artefacts, all from broad rules further up the stack.
   ══════════════════════════════════════════════════════════ */

/* 1 — Every navbar link carried an opaque #1a1a2e fill from
   dark-mode-modern.css. Once the navbar itself picks up its blue gradient
   those fills read as a black box drawn around each menu item. */
body.dark-mode .navbar-nav > li > a,
body.dark-mode .market-header nav ul > li > a {
  background-color: transparent !important;
}

body.dark-mode .navbar-nav > li > a:hover,
body.dark-mode .navbar-nav > li > a:focus,
body.dark-mode .market-header nav ul > li > a:hover,
body.dark-mode .market-header nav ul > li > a:focus {
  background-color: rgba(103, 232, 249, 0.13) !important;
}

/* 2 — The service card is drawn by its inner .sboxs shell, which carries the
   28px radius, border and shadow. The outer .services_boxs wrapper was
   painting the same surface again at radius 0, so a square frame appeared
   around the rounded card. The wrapper is now purely structural. */
body .services_boxs,
body.dark-mode .services_boxs,
body .services_boxs:hover,
body.dark-mode .services_boxs:hover {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 3 — bootstrap.css re-underlines every link on `:hover`, which out-specifies
   the site's `a { text-decoration: none }`. Designed links then look like
   they are mid-click. Links with a class, and anything in the header, footer
   or a card, opt out; a bare <a> inside prose keeps its underline. */
a[class]:hover,
a[class]:focus,
header a:hover,
header a:focus,
footer a:hover,
footer a:focus,
.services_boxs a:hover,
.solution-card a:hover,
.pricing-card a:hover,
.best-services-card a:hover {
  text-decoration: none !important;
}

/* Product-page solid CTA: white on #0891b2 measured 3.7:1. Several inline
   page blocks redefine this button, so the final value is pinned here. */
body:not(.dark-mode) .ha-btn-solid,
body.dark-mode .ha-btn-solid,
body:not(.dark-mode) .ha-btn-solid:hover,
body.dark-mode .ha-btn-solid:hover {
  background: linear-gradient(135deg, #0e7490, #155e75) !important;
  color: #ffffff !important;
}

/* The domain-search button is redefined in several places, including a
   `.domain-search-panel`-scoped rule that outranks a plain class selector.
   Pinned here for both markets and both themes. */
html body:not(.dark-mode) .domain-search-panel .domainsearchsubmit,
html body.dark-mode .domain-search-panel .domainsearchsubmit,
html body:not(.dark-mode) .domainsearchsubmit,
html body.dark-mode .domainsearchsubmit,
html body:not(.dark-mode) .domainsearchsubmit:hover,
html body.dark-mode .domainsearchsubmit:hover {
  color: #04243d !important;
}

/* The "Client Login" pill sits on a translucent dark fill but inherited a
   black label on pages that render the utility bar standalone — 1.2:1. */
html body .top_link ul li.register > a,
html body.dark-mode .top_link ul li.register > a,
html body .top_link ul li.register > a:hover,
html body.dark-mode .top_link ul li.register > a:hover {
  color: #f1f7ff !important;
}


/* Linux VPS hero: the stats bar is pinned to the bottom of #ha-hero, which left
   the CTA buttons sitting tight against it on wide screens. The hero centres its
   content, so extra padding-bottom lifts the buttons clear of the bar. */
body.ha-page-linux-vps #ha-hero {
  padding-bottom: 170px;
}

@media (max-width: 991px) {
  body.ha-page-linux-vps #ha-hero {
    padding-bottom: 140px;
  }
}

/* Feature / why card grids use floated Bootstrap columns, so a card that is one
   line taller than its neighbours breaks the next row's alignment and leaves
   gaps. Making the row a flex container keeps every card in a row the same
   height regardless of copy length. */
.ha-features-section .row,
.ha-why-section .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Card columns only — the section heading sits in a col-md-12 that must stay
   a normal block, or the eyebrow, H2 and sub-line end up side by side. */
.ha-features-section .row > [class*="col-md-4"],
.ha-why-section .row > [class*="col-md-4"] {
  display: flex;
  float: none;
}

.ha-features-section .row > [class*="col-md-4"] > *,
.ha-why-section .row > [class*="col-md-4"] > * {
  width: 100%;
}

.ha-features-section .ha-feature-card,
.ha-why-section .ha-why-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Dropdown note — the nav has no spare width for a longer label, so the
   clarification that these are paid services open to non-customers lives at
   the top of the panel instead. */
#header .navbar-nav > li > ul > li.nav-dropdown-note {
  margin: 2px 4px 8px;
  padding: 0 9px 9px;
  border-bottom: 1px solid rgba(125, 211, 252, 0.18);
  color: #8fb4cc;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

#header .navbar-nav > li > ul > li.nav-dropdown-note + li {
  margin-top: 0;
}

/* These card titles were <h5> (22px) and became <h3> so the homepage heading
   outline runs H1 → H2 → H3 without skipping a level. Without this they would
   inherit the generic 34px h3 size and dwarf the cards. */
.right_icon_box h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

/* ── Light-mode text contrast ─────────────────────────────────────────────
   Bootstrap's default link blue (#337ab7) is 4.56:1 on white but drops to
   4.16:1 on the tinted section backgrounds this site uses, so in-content
   links fell under WCAG AA there. Slightly darker blue, same hue. Scoped to
   light mode and to prose links, so nav, buttons and badges keep their own
   colours. */
body:not(.dark-mode) .ha-seo-block a:not([class]),
body:not(.dark-mode) .ha-seo-compare-fit a:not([class]),
body:not(.dark-mode) .ha-ds-article a:not([class]),
body:not(.dark-mode) .ha-wsh-article a:not([class]),
body:not(.dark-mode) .ha-seo-col-card a:not([class]) {
  color: #2f6fa5;
}

/* ── /about-us: rem sizing against a 10px root ────────────────────────────
   This page's inline CSS sizes almost everything in rem, but the document
   root is 62.5% (10px). That put card titles at 10px and micro-labels as low
   as 6.5px. The existing overrides above rescued the glass/feature/value
   cards; these cover the sections they missed. Sizes in px so the 10px root
   cannot shrink them again. */

body.ha-page-about-us #main-content .ha-tech-card h3,
body.ha-page-about-us #main-content .ha-tech-card h5 {
  font-size: 17px !important;
}

body.ha-page-about-us #main-content .ha-tech-card p,
body.ha-page-about-us #main-content .ha-eeat-info-val,
body.ha-page-about-us #main-content .ha-tl-text {
  font-size: 14.5px !important;
}

body.ha-page-about-us #main-content .ha-testi-name,
body.ha-page-about-us #main-content .ha-partner-name strong,
body.ha-page-about-us #main-content .ha-eeat-cert-name {
  font-size: 14.5px !important;
}

body.ha-page-about-us #main-content .ha-testi-role,
body.ha-page-about-us #main-content .ha-stat-context,
body.ha-page-about-us #main-content .ha-eeat-cert-role,
body.ha-page-about-us #main-content .ha-partner-name span,
body.ha-page-about-us #main-content .ha-eeat-comply-item {
  font-size: 13px !important;
}

/* Uppercase micro-labels: kept small and tracked, but above the ~7px they
   were rendering at. */
body.ha-page-about-us #main-content .ha-eeat-card-label,
body.ha-page-about-us #main-content .ha-eeat-info-label,
body.ha-page-about-us #main-content .ha-eeat-stat-lbl,
body.ha-page-about-us #main-content .ha-eeat-cert-badge,
body.ha-page-about-us #main-content .ha-dcmap-stat span,
body.ha-page-about-us #main-content .ha-founder-since,
body.ha-page-about-us #main-content .ha-founder-role-badge span {
  font-size: 11.5px !important;
}