/* ============================================================
   web-hosting.css — Page-specific styles for web-hosting.php
   All shared components (pricing, FAQ, nav, footer) are in
   base.css + theme.css + components.css.
   ============================================================ */

/* ── HERO ────────────────────────────────────────────────── */
.header.web-hero-bg {
  padding: 160px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

body.light-mode .header.web-hero-bg {
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(47,134,255,.08), transparent), #f8fafc !important;
}

/* ── FEATURE CARDS (web-hosting variant) ────────────────── */
.feature-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: rgba(47,134,255,.1);
  color: var(--brand-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1.5rem;
  transition: transform .4s ease, background .4s ease;
}
.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(-5deg);
  background: linear-gradient(135deg, var(--brand-blue), var(--accent-cyan));
  color: #fff;
  box-shadow: 0 10px 20px rgba(47,134,255,.3);
}

/* Top accent line on hover */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--accent-cyan));
  opacity: 0;
  transition: opacity .3s ease;
}
.feature-card:hover::before { opacity: 1; }

/* Section background */
.features-section-bg {
  background: radial-gradient(circle at center, rgba(47,134,255,.08), transparent 40%), #07101e;
}

/* ── CPANEL SECTION LIGHT MODE ───────────────────────────── */
body.light-mode .cpanel-section { background: #f1f5f9 !important; }
body.light-mode .cpanel-title   { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }
body.light-mode .cpanel-title .blu { color: var(--brand-blue) !important; -webkit-text-fill-color: var(--brand-blue) !important; }
body.light-mode .cpanel-header-right { color: #475569 !important; }

/* ── PRICING SECTION ─────────────────────────────────────── */
body.light-mode .hmk-pricing-section {
  background: #f1f5f9 !important;
  border-color: rgba(0,0,0,.05) !important;
}
body.light-mode .hmk-pricing-title    { color: #0f172a !important; }
body.light-mode .hmk-pricing-subtitle { color: #475569 !important; }

/* Popular card variant for web-hosting */
.hmk-price-card.hmk-card-blue.hmk-popular-card {
  border: 2px solid var(--brand-blue) !important;
}

/* ── HERO HEADING (hosting pages) LIGHT MODE ────────────── */
body.light-mode .hosting-hero-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
body.light-mode .hosting-blue-text {
  color: var(--brand-blue) !important;
  -webkit-text-fill-color: var(--brand-blue) !important;
  background: linear-gradient(90deg, var(--brand-blue), #6f63ff);
  -webkit-background-clip: text;
  background-clip: text;
}
body.light-mode .hosting-hero-description {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}
body.light-mode .hosting-hero-description strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* ── DARK MODE ENFORCEMENT ───────────────────────────────── */
body:not(.light-mode) .hosting-hero-title,
body:not(.light-mode) .cpanel-title,
body:not(.light-mode) .cta-text h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body:not(.light-mode) .hosting-hero-description,
body:not(.light-mode) .cpanel-header-right,
body:not(.light-mode) .cta-text p {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

/* ── FEATURE CARD LIGHT MODE ─────────────────────────────── */
body.light-mode .feature-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
}
body.light-mode .feature-card:hover {
  background: #f8fafc !important;
  border-color: rgba(47,134,255,.3) !important;
}
body.light-mode .feature-title { color: #0f172a !important; }
body.light-mode .feature-text  { color: #475569 !important; }
body.light-mode .feature-icon  { background: rgba(47,134,255,.1); color: var(--brand-blue); }

/* ── VPS SECTION HEADING LIGHT MODE ─────────────────────── */
body.light-mode .vps-feature-title { color: #0f172a !important; }