/* =========================================================
   HostLaza — Premium UI System v3.0
   Brand Palette:
     Primary:      #2C9C4C   Dark Hero:   #081810
     Dark Surface: #10271A   Light BG:    #F4FBF6
     Card BG:      #FFFFFF   Accent:      #39B95A
     Badge Yellow: #FFD60A   Dark Text:   #10231A
     Light Text:   #A7CDB3   Border:      #D6EEDF
   ========================================================= */

:root {
  --bg:            #F4FBF6;
  --brand-50:      #edf9f1;
  --brand-100:     #D6EEDF;
  --brand-200:     #b8dfc9;
  --brand-300:     #84c9a0;
  --brand-400:     #39B95A;
  --brand-500:     #2C9C4C;
  --brand-600:     #2C9C4C;
  --brand-700:     #1f7a39;
  --brand-800:     #155c2a;
  --brand-900:     #0d3f1c;
  --dark-hero:     #081810;
  --dark-surface:  #10271A;
  --accent-green:  #39B95A;
  --badge-yellow:  #FFD60A;
  --dark-text:     #10231A;
  --light-text:    #A7CDB3;
  --border:        #D6EEDF;
  --card-bg:       #FFFFFF;
  --ink:           #10231A;
  --mint:          #F4FBF6;

  --shadow-sm:         0 2px 8px -2px rgba(16,35,26,.08);
  --shadow-card:       0 2px 4px -1px rgba(0,0,0,.04), 0 10px 36px -8px rgba(16,35,26,.1);
  --shadow-card-hover: 0 8px 20px -4px rgba(0,0,0,.08), 0 28px 60px -14px rgba(44,156,76,.22);
  --shadow-glow:       0 0 0 1px rgba(44,156,76,.2), 0 20px 50px -14px rgba(44,156,76,.5);
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--dark-text); }
::selection { background: var(--brand-500); color: #fff; }

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */
.section-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.5vw, 2.55rem);
  line-height: 1.12;
  text-align: center;
  letter-spacing: -.025em;
  color: var(--dark-text);
}
.section-sub {
  margin-top: .9rem;
  color: #4a6860;
  text-align: center;
  font-size: .96rem;
  line-height: 1.75;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}
.text-gradient {
  background: linear-gradient(110deg, #1f7a39, #2C9C4C 50%, #39B95A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-600);
  background: linear-gradient(135deg, #D6EEDF, #edf9f1);
  border: 1px solid rgba(44,156,76,.2);
  padding: .38rem .9rem;
  border-radius: 9999px;
  box-shadow: 0 2px 6px -2px rgba(44,156,76,.18);
}
.eyebrow-light {
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  box-shadow: none;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn-primary {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(135deg, #2C9C4C, #1f7a39);
  color: #fff; font-weight: 600; border-radius: .9rem;
  box-shadow: 0 4px 6px -2px rgba(44,156,76,.35), 0 12px 28px -8px rgba(31,122,57,.5);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  text-decoration: none;
}
.btn-primary::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 60%);
  border-radius: inherit; pointer-events: none;
}
.btn-primary::after {
  content: "";
  position: absolute; top: 0; left: -110%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease; pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -3px rgba(44,156,76,.42), 0 22px 44px -10px rgba(31,122,57,.6);
}
.btn-primary:hover::after { left: 130%; }
.btn-primary:active { transform: translateY(0) scale(.98); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid var(--border); color: var(--brand-700);
  font-weight: 600; border-radius: .9rem; padding: .72rem 1.6rem; background: #fff;
  box-shadow: 0 2px 6px -2px rgba(44,156,76,.1);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
}
.btn-outline:hover {
  background: var(--brand-600); color: #fff; border-color: var(--brand-600);
  transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(44,156,76,.45);
}

.btn-white {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--brand-800); font-weight: 700; border-radius: .9rem;
  box-shadow: 0 4px 8px -2px rgba(0,0,0,.12), 0 16px 32px -12px rgba(0,0,0,.22);
  transition: transform .25s, box-shadow .25s;
  text-decoration: none;
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -4px rgba(0,0,0,.15), 0 24px 40px -12px rgba(0,0,0,.28); }

.btn-ghost-light {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,.45); color: #fff; font-weight: 600; border-radius: .9rem;
  transition: background .25s, border-color .25s;
  text-decoration: none;
}
.btn-ghost-light:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.65); }

/* =====================================================================
   TOP BAR
   ===================================================================== */
.top-bar {
  background: linear-gradient(90deg, #081810, #10271A 30%, #2C9C4C 55%, #10271A 78%, #081810);
  background-size: 200% 100%;
  animation: topGlow 14s linear infinite;
}
@keyframes topGlow {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.top-bar-currency {
  appearance: none;
  background: rgba(255,255,255,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 1rem;
  padding: .26rem 1.85rem .26rem .65rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .5rem; color: #fff;
  font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: background-color .2s;
}
.top-bar-currency:focus { outline: none; }
.top-bar-currency:focus-visible { outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px; }
.top-bar-currency option { background: var(--dark-surface); color: #fff; }

/* =====================================================================
   HEADER
   ===================================================================== */
#header {
  background: transparent;
  transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
#header.scrolled {
  background: rgba(244,251,246,.94);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 0 rgba(214,238,223,.6), 0 8px 32px -16px rgba(16,35,26,.15);
}

.nav-link {
  background: none; border: none; cursor: pointer; font-family: inherit;
  position: relative; padding: .5rem .92rem; border-radius: .7rem;
  color: var(--dark-text); font-weight: 500; font-size: .88rem;
  transition: color .2s, background .2s;
  display: inline-flex; align-items: center; gap: .35rem;
}
.nav-link:hover { color: var(--brand-600); background: rgba(214,238,223,.6); }

.nav-caret {
  width: 14px; height: 14px; color: var(--light-text); flex-shrink: 0;
  transition: transform .25s ease, color .25s ease;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(180deg); color: var(--brand-600); }

.header-login {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1.5px solid var(--border);
  color: var(--brand-700); background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  font-weight: 600; font-size: .84rem; padding: .45rem 1.1rem; border-radius: .8rem;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; box-shadow: 0 2px 6px -2px rgba(44,156,76,.1);
  text-decoration: none;
}
.header-login:hover {
  background: var(--brand-50); border-color: var(--brand-400);
  transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(44,156,76,.22);
}

/* =====================================================================
   DROPDOWN NAV — Minimal + Primary Color Box Animation
   ===================================================================== */
.nav-item { position: relative; }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  box-shadow: 0 4px 6px -2px rgba(0,0,0,.04), 0 24px 60px -14px rgba(16,35,26,.14);
  padding: .5rem;
  min-width: 265px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1), visibility .22s;
  z-index: 200;
}
.dropdown-panel::before {
  content: "";
  position: absolute; top: -5px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: #fff;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 2px;
}
.nav-item:hover .dropdown-panel,
.nav-item:focus-within .dropdown-panel,
.nav-item.dp-open .dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dp-label {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--light-text); padding: .38rem .8rem .25rem;
}
.dp-divider { height: 1px; background: var(--border); margin: .38rem .6rem; }

/* Dropdown item: primary-color box slides in from left on hover */
.dp-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .62rem .8rem; border-radius: .82rem;
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.dp-item::before {
  content: '';
  position: absolute; inset: 0; border-radius: .82rem;
  background: linear-gradient(135deg, rgba(44,156,76,.1), rgba(57,185,90,.05));
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}
.dp-item:hover::before { transform: scaleX(1); }
.dp-item:hover .dp-name { color: var(--brand-600); }

.dp-item--highlight {
  background: linear-gradient(135deg, #edf9f1, #D6EEDF);
  border: 1px solid rgba(44,156,76,.12);
}
.dp-item--highlight::before { background: linear-gradient(135deg, rgba(44,156,76,.15), rgba(57,185,90,.08)); }

.dp-icon-wrap {
  width: 2.2rem; height: 2.2rem; border-radius: .65rem; flex-shrink: 0;
  background: linear-gradient(135deg, var(--border), #edf9f1);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s ease, border-color .25s ease;
  position: relative; z-index: 1;
}
.dp-item:hover .dp-icon-wrap {
  transform: scale(1.12) rotate(-5deg);
  background: linear-gradient(135deg, rgba(44,156,76,.18), rgba(57,185,90,.1));
  border-color: rgba(44,156,76,.25);
}

.dp-name {
  font-size: .855rem; font-weight: 600; color: var(--dark-text);
  display: flex; align-items: center; gap: .4rem; line-height: 1.3;
  transition: color .2s; position: relative; z-index: 1;
}
.dp-desc { font-size: .75rem; color: var(--light-text); margin-top: .1rem; line-height: 1.4; position: relative; z-index: 1; }

.dp-badge {
  font-size: .6rem; font-weight: 700; padding: .1rem .42rem; border-radius: 9999px;
  background: #D6EEDF; color: var(--brand-700); letter-spacing: .04em;
}

/* =====================================================================
   MOBILE ACCORDION NAV
   ===================================================================== */
.mob-acc { border-radius: .75rem; overflow: hidden; }
.mob-acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: .75rem .9rem; background: none; border: none; cursor: pointer;
  font-weight: 600; font-size: .93rem; color: var(--dark-text); font-family: inherit;
  border-radius: .75rem; transition: background .2s, color .2s;
}
.mob-acc-btn:hover { background: rgba(214,238,223,.5); color: var(--brand-600); }
.mob-acc-caret {
  flex-shrink: 0; color: var(--light-text);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), color .2s;
}
.mob-acc.open .mob-acc-caret { transform: rotate(180deg); color: var(--brand-600); }
.mob-acc.open .mob-acc-btn { color: var(--brand-700); }
.mob-acc-panel {
  max-height: 0;
  overflow: hidden;
  padding: 0 .45rem;
  transition: max-height .3s cubic-bezier(.2,.8,.2,1), padding .3s ease;
}
.mob-acc.open .mob-acc-panel {
  max-height: 500px;
  padding: .2rem .45rem .6rem 1rem;
}
.mob-sub-item {
  display: block; padding: .52rem .75rem; border-radius: .65rem;
  font-size: .9rem; color: #3a5a46; text-decoration: none;
  transition: background .18s, color .18s;
}
.mob-sub-item:hover { background: rgba(214,238,223,.5); color: var(--brand-600); }

/* =====================================================================
   FEATURE STRIP (horizontal marquee)
   ===================================================================== */
.feature-strip {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden; padding: .78rem 0; position: relative;
}
.feature-strip::before,
.feature-strip::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.feature-strip::before { left: 0;  background: linear-gradient(90deg, #fff, transparent); }
.feature-strip::after  { right: 0; background: linear-gradient(270deg, #fff, transparent); }
.feature-strip-track {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  animation: marqueeLoop 32s linear infinite;
  will-change: transform;
}
.feature-strip-track:hover { animation-play-state: paused; }
@keyframes marqueeLoop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.feature-item {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .28rem 1rem; border-radius: .55rem; cursor: default;
  font-size: .82rem; font-weight: 600; color: var(--dark-text); flex-shrink: 0;
  transition: background .2s;
}
.feature-item:hover { background: rgba(214,238,223,.4); }
.feature-icon {
  width: 1.72rem; height: 1.72rem; border-radius: .45rem;
  background: linear-gradient(135deg, var(--border), #edf9f1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .84rem; flex-shrink: 0; border: 1px solid var(--border);
}
.feature-sep {
  width: 4px; height: 4px; border-radius: 9999px;
  background: var(--border); flex-shrink: 0; margin: 0 .1rem;
}


/* ==========================================
   INCLUDED WITH EVERY PLAN
========================================== */

.incl-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:22px;
    align-items:stretch;
}

@media (max-width:1024px){
    .incl-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width:640px){
    .incl-grid{
        grid-template-columns:1fr;
    }
}

.incl-card{
    background:#fff;
    border:1.5px solid #D6EEDF;
    border-radius:22px;
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    height:100%;
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.incl-card:hover{
    border-color:#2C9C4C;
    transform:translateY(-4px);
    box-shadow:0 16px 40px -16px rgba(44,156,76,.22);
}

.incl-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    flex-shrink:0;
}

.incl-title{
    font-size:1rem;
    font-weight:700;
    line-height:1.3;
    color:#10231A;
    margin:0;
}

.incl-desc{
    font-size:.82rem;
    line-height:1.75;
    color:#6A8A78;
    margin:0;
}


/* =====================================================================
   PLAN CARDS
   ===================================================================== */
.plan-price-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--light-text);
  margin-bottom: .3rem;
}
.plan-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform .42s cubic-bezier(.16,.85,.3,1.15), box-shadow .42s ease, border-color .35s ease;
}
.plan-card:hover {
  transform: translateY(-10px) scale(1.012);
  box-shadow: 0 0 0 1.5px rgba(44,156,76,.28), 0 28px 60px -16px rgba(22,101,52,.35);
  border-color: rgba(44,156,76,.45);
}
.plan-card:hover .btn-primary {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  box-shadow: 0 6px 24px -6px rgba(44,156,76,.55);
  transform: translateY(-1px);
}
.plan-card::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(44,156,76,.08), transparent 60%);
  opacity: 0; pointer-events: none; transition: opacity .42s ease;
}
.plan-card:hover::after { opacity: 1; }
.plan-card.popular {
  border-color: var(--brand-500);
  box-shadow: 0 4px 6px -2px rgba(44,156,76,.12), 0 24px 56px -14px rgba(44,156,76,.28);
}
.plan-card.popular::before {
  content: "";
  position: absolute; inset: 0; border-radius: 1.4rem; padding: 1.5px;
  background: linear-gradient(135deg, #2C9C4C, #39B95A, #A7CDB3, #39B95A, #2C9C4C);
  background-size: 300% 300%;
  animation: borderFlow 5s ease-in-out infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
@keyframes borderFlow {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.badge-pill { font-size: .67rem; font-weight: 700; padding: .28rem .65rem; border-radius: 9999px; white-space: nowrap; letter-spacing: .02em; }
.badge-green { background: linear-gradient(135deg, var(--border), #edf9f1); color: var(--brand-700); border: 1px solid rgba(44,156,76,.15); }
.badge-orange { background: linear-gradient(135deg, #ffedd5, #fff7ed); color: #c2410c; border: 1px solid rgba(249,115,22,.15); }

/* =====================================================================
   WHY CHOOSE V2 — Premium Redesign with Animated Hover
   ===================================================================== */
.why-v2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .why-v2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .why-v2-grid { grid-template-columns: 1fr; } }

.why-v2-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1.6rem; padding: 2rem;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
  cursor: default;
}
/* Radial glow from top-left on hover */
.why-v2-card::before {
  content: '';
  position: absolute; top: -20px; left: -20px;
  width: 160px; height: 160px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(44,156,76,.12), transparent 70%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
/* Animated bottom border sweep */
.why-v2-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--accent-green), var(--brand-600));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.why-v2-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(44,156,76,.32);
}
.why-v2-card:hover::before { opacity: 1; }
.why-v2-card:hover::after  { transform: scaleX(1); }

.why-v2-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 1.25rem;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
  position: relative; z-index: 1;
}
.why-v2-card:hover .why-v2-icon {
  transform: scale(1.18) rotate(-8deg);
  box-shadow: 0 12px 30px -8px rgba(44,156,76,.4);
}
.why-v2-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 1.08rem; font-weight: 700; color: var(--dark-text);
  margin-bottom: .6rem; position: relative; z-index: 1;
  transition: color .3s ease;
}
.why-v2-card:hover .why-v2-title { color: var(--brand-700); }
.why-v2-desc { font-size: .875rem; color: #4a6860; line-height: 1.78; position: relative; z-index: 1; }

/* Why Icon — colored backgrounds preserved from HTML inline styles */

/* =====================================================================
   AI BUILDER FLOATING CARDS
   ===================================================================== */
.ai-float-card {
  position: absolute; background: #fff;
  border: 1px solid var(--border); border-radius: .9rem;
  padding: .6rem .95rem;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.04);
  display: flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 600; z-index: 10; white-space: nowrap;
}
.ai-float-card:first-child { animation: aiFloat 5s ease-in-out 0s infinite; }
.ai-float-card:nth-child(2) { animation: aiFloat 5s ease-in-out 2s infinite; }
@keyframes aiFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* =====================================================================
   CHECK / FEATURE DOTS
   ===================================================================== */
.check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.42rem; height: 1.42rem; border-radius: 9999px; flex-shrink: 0;
  background: linear-gradient(135deg, #2C9C4C, #1f7a39);
  color: #fff; font-size: .7rem; font-weight: 700;
  box-shadow: 0 3px 8px -2px rgba(44,156,76,.45);
}
.feat-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: .6rem; flex-shrink: 0; margin-top: 2px;
  background: linear-gradient(135deg, var(--border), #D6EEDF);
  color: var(--brand-700); font-weight: 800; font-size: .82rem;
  border: 1px solid rgba(44,156,76,.18); box-shadow: 0 2px 6px -2px rgba(44,156,76,.2);
}

/* =====================================================================
   DECORATIVE BLOBS
   ===================================================================== */
.blob { position: absolute; border-radius: 9999px; filter: blur(72px); z-index: 0; pointer-events: none; opacity: .32; }
.blob-1 { width: 400px; height: 400px; background: radial-gradient(circle, #A7CDB3, transparent 70%); top: -80px; left: -120px; }
.blob-2 { width: 460px; height: 460px; background: radial-gradient(circle, #39B95A, transparent 70%); bottom: -150px; right: -150px; }
.blob-3 { width: 360px; height: 360px; background: radial-gradient(circle, #D6EEDF, transparent 70%); top: 40px; right: -100px; }

/* =====================================================================
   IMAGE TILT
   ===================================================================== */
.img-tilt { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.img-tilt:hover { transform: translateY(-6px) scale(1.015); }

/* =====================================================================
   INFRASTRUCTURE / DATACENTER
   ===================================================================== */
.infra-section {
  background: linear-gradient(135deg, var(--dark-hero) 0%, var(--dark-surface) 55%, #0d2a17 100%);
  position: relative; overflow: hidden;
}
.infra-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(57,185,90,.07) 1px, transparent 0);
  background-size: 30px 30px; pointer-events: none;
}
.infra-stat {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(57,185,90,.16);
  border-radius: 1.1rem; padding: 1.6rem 1.25rem; text-align: center;
  backdrop-filter: blur(8px);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.infra-stat:hover { transform: translateY(-5px); border-color: rgba(57,185,90,.4); background: rgba(57,185,90,.08); }
.infra-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.6rem; font-weight: 800;
  color: #fff; line-height: 1;
}
.infra-stat-label {
  font-size: .75rem; font-weight: 700; color: var(--light-text);
  text-transform: uppercase; letter-spacing: .07em; margin-top: .45rem;
}
.dc-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(57,185,90,.18);
  border-radius: 1.4rem; padding: 1.75rem;
  position: relative; overflow: hidden;
  backdrop-filter: blur(8px);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.dc-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57,185,90,.55), transparent);
}
.dc-card:hover { transform: translateY(-7px); border-color: rgba(57,185,90,.5); background: rgba(57,185,90,.09); }
.dc-card--featured { border-color: rgba(57,185,90,.45); background: rgba(57,185,90,.1); }
.dc-status {
  display: flex; align-items: center; gap: .45rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent-green); margin-bottom: 1.1rem;
}
.dc-dot {
  width: .45rem; height: .45rem; border-radius: 9999px;
  background: var(--accent-green); box-shadow: 0 0 0 3px rgba(57,185,90,.22);
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 3px rgba(57,185,90,.22); }
  50%      { box-shadow: 0 0 0 7px rgba(57,185,90,.06); }
}
.dc-flag { font-size: 1.75rem; margin-bottom: .55rem; }
.dc-name { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: .4rem; }
.dc-desc { font-size: .83rem; color: var(--light-text); line-height: 1.7; margin-bottom: 1.25rem; }
.dc-uptime-label { font-size: .68rem; font-weight: 700; color: var(--light-text); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .38rem; }
.dc-uptime-bar { height: 4px; background: rgba(255,255,255,.1); border-radius: 9999px; margin-bottom: .3rem; overflow: hidden; }
.dc-uptime-fill { height: 100%; background: linear-gradient(90deg, var(--brand-500), var(--accent-green)); border-radius: 9999px; }
.dc-uptime-pct { font-size: .8rem; font-weight: 700; color: var(--accent-green); }
.infra-specs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(57,185,90,.15);
  border-radius: 1rem; padding: 1.1rem 1.5rem;
  backdrop-filter: blur(8px); gap: 0;
}
.infra-spec-item { display: flex; align-items: center; gap: .5rem; padding: .5rem 1.25rem; font-size: .84rem; color: #c8e8d5; }
.infra-spec-icon { font-size: 1.05rem; }
.infra-spec-divider { width: 1px; height: 2rem; background: rgba(57,185,90,.22); flex-shrink: 0; }
@media (max-width: 640px) { .infra-spec-divider { display: none; } }

/* =====================================================================
   MIGRATION V2 — Premium with Shine & Scale Animations
   ===================================================================== */
.mig-v2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; }
@media (max-width: 768px) { .mig-v2-grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) {
  .mig-v2-grid::before {
    content: ""; position: absolute; top: 2.7rem; left: 22%; right: 22%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--accent-green) 0 10px, transparent 10px 22px);
    z-index: 0; opacity: .6;
  }
}

.mig-v2-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1.6rem; padding: 2rem; text-align: center;
  position: relative; z-index: 1; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
/* Shine sweep on hover */
.mig-v2-card::after {
  content: '';
  position: absolute; top: -50%; left: -75%; width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
  pointer-events: none;
}
.mig-v2-card:hover::after { left: 130%; }
.mig-v2-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(44,156,76,.32);
}
/* Subtle top gradient on hover */
.mig-v2-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-600), var(--accent-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.mig-v2-card:hover::before { transform: scaleX(1); }

.mig-v2-num {
  position: absolute; top: .9rem; right: 1.2rem;
  font-size: 4.5rem; font-weight: 800; line-height: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  opacity: .06; color: var(--brand-500); pointer-events: none; user-select: none;
  transition: opacity .35s ease;
}
.mig-v2-card:hover .mig-v2-num { opacity: .14; }
.mig-v2-circle {
  width: 3.75rem; height: 3.75rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem; font-size: 1.55rem; position: relative; z-index: 1;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
.mig-v2-card:hover .mig-v2-circle {
  transform: scale(1.2) rotate(-5deg);
  box-shadow: 0 8px 24px -6px rgba(44,156,76,.3);
}
.mig-v2-circle--g { background: linear-gradient(135deg, #D6EEDF, #edf9f1); border: 2px solid rgba(44,156,76,.3); }
.mig-v2-circle--o { background: linear-gradient(135deg, #fff3e0, #fff8ed); border: 2px solid rgba(249,115,22,.3); }
.mig-v2-circle--b { background: linear-gradient(135deg, #e0f2fe, #f0f9ff); border: 2px solid rgba(59,130,246,.3); }
.mig-v2-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 1.05rem; font-weight: 700; color: var(--dark-text); margin-bottom: .5rem;
  position: relative; z-index: 1;
}
.mig-v2-desc { font-size: .875rem; color: #4a6860; line-height: 1.75; position: relative; z-index: 1; }

/* =====================================================================
   SUPPORT V2 — Fixed Clickable Buttons
   ===================================================================== */
.support-v2-card {
  background: linear-gradient(150deg, var(--dark-hero) 0%, var(--dark-surface) 50%, #1a5e36 100%);
  border-radius: 1.6rem; padding: 2.25rem;
  position: relative; overflow: hidden; height: 100%;
}
.support-v2-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size: 28px 28px; pointer-events: none;
}
.support-v2-avatar {
  width: 5rem; height: 5rem; border-radius: 9999px; margin-bottom: 1.5rem;
  background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.support-v2-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.5rem; position: relative; z-index: 1; }
.support-v2-stat {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: .9rem; padding: .85rem; text-align: center;
  transition: background .25s, border-color .25s, transform .25s;
}
.support-v2-stat:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
.support-v2-stat-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1; }
.support-v2-stat-lbl { font-size: .67rem; color: rgba(255,255,255,.6); margin-top: .25rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.support-v2-chips { display: flex; flex-wrap: wrap; gap: .45rem; position: relative; z-index: 1; }
.support-v2-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.88); font-size: .74rem; font-weight: 600;
  padding: .32rem .75rem; border-radius: .55rem; transition: background .2s; cursor: default;
}
.support-v2-chip:hover { background: rgba(255,255,255,.18); }

/* Support items as clickable links */
.support-v2-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.25rem; border-radius: 1rem;
  background: #fff; border: 1px solid var(--border);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  text-decoration: none; cursor: pointer;
}
.support-v2-item:hover {
  transform: translateX(6px);
  box-shadow: 0 4px 16px -4px rgba(44,156,76,.2);
  border-color: rgba(44,156,76,.3);
  background: #fafffe;
}
.support-v2-icon-wrap {
  width: 2.6rem; height: 2.6rem; border-radius: .75rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.support-v2-item:hover .support-v2-icon-wrap { transform: scale(1.12) rotate(-5deg); }
.sv2-green { background: rgba(44,156,76,.1); }
.sv2-wa    { background: rgba(37,211,102,.1); }
.sv2-blue  { background: rgba(59,130,246,.1); }
.sv2-mail  { background: rgba(245,158,11,.1); }
.support-v2-item-title { font-size: .93rem; font-weight: 700; color: var(--dark-text); }
.support-v2-item-desc  { font-size: .8rem; color: #6a8878; margin-top: .15rem; line-height: 1.5; }

/* =====================================================================
   TESTIMONIALS SLIDER — 5 cards, show 3, slide prev/next
   ===================================================================== */
.tst-slider-wrap {
  position: relative;
  overflow: hidden;
}
.tst-slider-track {
  display: flex;
  gap: 1.5rem;
  transition: transform .55s cubic-bezier(.25,.8,.25,1);
  will-change: transform;
}
.tst-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  padding: 1.75rem;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .38s ease;
  flex: 0 0 calc(33.333% - 1rem);
  min-width: 0;
}
@media (max-width: 1024px) { .tst-card { flex: 0 0 calc(50% - .75rem); } }
@media (max-width: 640px)  { .tst-card { flex: 0 0 100%; } }
.tst-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(44,156,76,.3);
}
.tst-card::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(44,156,76,.05), transparent 65%);
  opacity: 0; pointer-events: none; transition: opacity .38s ease;
}
.tst-card:hover::after { opacity: 1; }
.tst-stars { color: var(--badge-yellow); display: flex; gap: .15rem; }

/* Slider navigation */
.tst-nav {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; margin-top: 2.25rem;
}
.tst-nav-btn {
  width: 2.7rem; height: 2.7rem; border-radius: 9999px;
  border: 1.5px solid var(--border); background: var(--card-bg);
  color: var(--brand-600); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: var(--shadow-sm);
}
.tst-nav-btn:hover {
  background: var(--brand-600); color: #fff; border-color: var(--brand-600);
  transform: scale(1.08); box-shadow: 0 4px 14px -4px rgba(44,156,76,.4);
}
.tst-nav-btn svg { width: 1.1rem; height: 1.1rem; }

.tst-dots { display: flex; gap: .5rem; align-items: center; }
.tst-dot {
  width: .5rem; height: .5rem; border-radius: 9999px;
  background: var(--border); cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.tst-dot.active {
  background: var(--brand-500); width: 1.5rem;
}

/* =====================================================================
   FAQ SECTION — Redesigned
   ===================================================================== */
.faq-section { background: var(--bg); }

.faq-title-big {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
  color: var(--dark-text); text-align: center; margin-bottom: .5rem;
}
.faq-title-big span {
  background: linear-gradient(110deg, #1f7a39, var(--brand-500) 50%, var(--accent-green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 2px 8px -3px rgba(16,35,26,.06);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.faq-item:hover {
  border-color: rgba(44,156,76,.25);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.faq-item.open {
  border-color: rgba(44,156,76,.38);
  box-shadow: 0 4px 6px -2px rgba(44,156,76,.08), 0 14px 36px -12px rgba(44,156,76,.2);
}

.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  text-align: left; padding: 1.3rem 1.5rem; font-weight: 600; font-size: .95rem;
  cursor: pointer; transition: color .2s; color: var(--dark-text);
  background: none; border: none; font-family: inherit;
}
.faq-q:hover { color: var(--brand-700); }
.faq-item.open .faq-q { color: var(--brand-700); }

.faq-icon {
  flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 9999px;
  background: var(--border); color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.15rem;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease, box-shadow .3s ease;
}
.faq-item.open .faq-icon {
  transform: rotate(135deg);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  box-shadow: 0 3px 10px -2px rgba(44,156,76,.4);
}

.faq-a {
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height .45s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
}
.faq-item.open .faq-a { opacity: 1; }
.faq-a-inner {
  padding: 0 1.5rem 1.4rem; color: #4a6860; font-size: .92rem; line-height: 1.8;
  border-top: 1px solid var(--border); padding-top: .9rem;
}

/* =====================================================================
   CTA BANNER
   ===================================================================== */
.cta-banner {
  background: linear-gradient(140deg, var(--dark-hero) 0%, var(--dark-surface) 40%, #1a5e36 75%, var(--brand-700) 100%);
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size: 30px 30px; pointer-events: none;
}
.cta-banner-orb {
  position: absolute; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(57,185,90,.3), transparent 70%);
  border-radius: 9999px; top: -150px; right: -100px; filter: blur(60px); pointer-events: none;
}

/* =====================================================================
   PRE-FOOTER TRUST STRIP
   ===================================================================== */
.pre-footer-strip {
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
}
.pre-footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 1024px) { .pre-footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pre-footer-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }

.pre-footer-card {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem; border-radius: 1rem;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #fff, var(--bg));
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
  cursor: default;
}
.pre-footer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 28px -8px rgba(44,156,76,.2);
  border-color: rgba(44,156,76,.3);
}
.pre-footer-icon {
  width: 2.8rem; height: 2.8rem; border-radius: .75rem; flex-shrink: 0;
  background: linear-gradient(135deg, var(--border), #edf9f1);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  border: 1px solid var(--border);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pre-footer-card:hover .pre-footer-icon { transform: scale(1.15) rotate(-8deg); }
.pre-footer-title { font-size: .82rem; font-weight: 700; color: var(--dark-text); line-height: 1.3; }
.pre-footer-sub { font-size: .7rem; color: var(--light-text); margin-top: .15rem; }

/* =====================================================================
   FOOTER — Light #F4FBF6 bg, dark footer-bottom
   ===================================================================== */
.site-footer { background: var(--bg) !important; }
.footer-main { border-top: 1px solid var(--border); }
.footer-logo-inv { filter: none; }

.footer-trust-badge {
  font-size: .67rem; font-weight: 700; color: var(--brand-700);
  background: rgba(44,156,76,.08); border: 1px solid rgba(44,156,76,.18);
  border-radius: .5rem; padding: .28rem .65rem;
}

/* Social Icons — Real Brand Colors */
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: .75rem;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease;
  border: 1px solid transparent;
  text-decoration: none;
}
.footer-social[aria-label="Facebook"]   { background: #1877F2; color: #fff; }
.footer-social[aria-label="Instagram"]  { background: linear-gradient(135deg, #405DE6, #833AB4, #C13584, #E1306C, #F77737); color: #fff; }
.footer-social[aria-label="X (Twitter)"] { background: #000; color: #fff; border-color: #333; }
.footer-social[aria-label="LinkedIn"]   { background: #0A66C2; color: #fff; }
.footer-social[aria-label="YouTube"]    { background: #FF0000; color: #fff; }
.footer-social[aria-label="Telegram"]   { background: #2CA5E0; color: #fff; }
.footer-social:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.4);
  filter: brightness(1.1);
}

.footer-col-h {
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--dark-text); margin-bottom: .95rem;
}
.footer-col-list { display: flex; flex-direction: column; gap: .52rem; }
.footer-col-list a {
  font-size: .87rem; color: #2a3d35; text-decoration: none;
  display: inline-block;
  transition: color .22s ease;
  position: relative;
}
.footer-col-list a::after {
  content: '';
  position: absolute; bottom: -1px; left: 0;
  height: 1.5px; width: 0;
  background: var(--brand-600);
  transition: width .28s cubic-bezier(.2,.8,.2,1);
}
.footer-col-list a:hover { color: var(--brand-600); }
.footer-col-list a:hover::after { width: 100%; }

.footer-contact-item {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .87rem; color: #4a6860; margin-bottom: .65rem;
}
.footer-contact-item a { color: #4a6860; text-decoration: none; transition: color .2s; }
.footer-contact-item a:hover { color: var(--brand-600); }

.footer-newsletter-input {
  flex: 1; min-width: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: .7rem; padding: .6rem .85rem; font-size: .85rem; color: var(--dark-text);
  font-family: inherit; transition: border-color .2s, background .2s, box-shadow .2s;
}
.footer-newsletter-input::placeholder { color: var(--light-text); }
.footer-newsletter-input:focus {
  outline: none; border-color: var(--brand-400); background: #fff;
  box-shadow: 0 0 0 3px rgba(44,156,76,.1);
}
.footer-newsletter-btn {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; border: none; border-radius: .7rem;
  padding: .6rem 1rem; font-weight: 700; font-size: 1.05rem; cursor: pointer;
  flex-shrink: 0; font-family: inherit;
  transition: transform .2s, box-shadow .2s;
}
.footer-newsletter-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -4px rgba(44,156,76,.55); }
.footer-pay-badge {
  font-size: .62rem; font-weight: 700; color: #4a6860;
  background: rgba(44,156,76,.06); border: 1px solid var(--border);
  border-radius: .4rem; padding: .25rem .55rem; letter-spacing: .02em;
}
.footer-bottom {
  background: var(--dark-hero);
  border-top: 1px solid rgba(57,185,90,.1);
  font-size: .75rem;
}
.footer-bottom p { color: #ffffff; }
.footer-bottom-link { color: #ffffff; text-decoration: none; transition: color .2s; }
.footer-bottom-link:hover { color: var(--accent-green); }

/* =====================================================================
   HERO V2
   ===================================================================== */
.hero-v2 {
  background: linear-gradient(160deg, var(--dark-hero) 0%, var(--dark-surface) 40%, #1a4a28 80%, #2C9C4C 100%);
  position: relative; overflow: hidden;
  padding: 5rem 0 4rem;
}
@media (min-width: 1024px) { .hero-v2 { padding: 6rem 0 5rem; } }

.hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(57,185,90,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,185,90,.07) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridDrift 20s linear infinite;
  pointer-events: none; z-index: 0;
}
@keyframes gridDrift { from { transform: translateY(0); } to { transform: translateY(60px); } }

.hero-orb {
  position: absolute; border-radius: 9999px;
  filter: blur(80px); pointer-events: none; z-index: 0;
  animation: orbFloat 8s ease-in-out infinite;
}
.hero-orb-1 {
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(57,185,90,.35), rgba(44,156,76,.15), transparent 70%);
  top: -160px; right: -100px;
}
.hero-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(167,205,179,.2), rgba(57,185,90,.1), transparent 70%);
  bottom: -110px; left: -90px; animation-delay: 4s;
}
@keyframes orbFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-30px) scale(1.05); }
}
.hero-v2-inner {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 3rem; align-items: center; position: relative; z-index: 1;
}
@media (max-width: 1024px) { .hero-v2-inner { grid-template-columns: 1fr; gap: 2.5rem; } }

.hero-v2-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  padding: .38rem .92rem; border-radius: 9999px;
  font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.9);
  backdrop-filter: blur(4px); margin-bottom: 1.5rem;
}
.hero-badge-pulse {
  width: .48rem; height: .48rem; border-radius: 9999px; background: var(--badge-yellow);
  animation: pulseDot 2s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(255,214,10,.22);
}
.hero-v2-h1 {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.3rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  color: #fff; margin-bottom: 1.25rem;
}
.hero-v2-hl {
  background: linear-gradient(110deg, #A7CDB3, #39B95A 50%, #FFD60A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-v2-desc {
  color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.8;
  max-width: 500px; margin-bottom: 1.75rem;
}
.hero-v2-checks {
  display: grid; grid-template-columns: 1fr 1fr;
  list-style: none; gap: .7rem 1rem; margin-bottom: 2rem;
}
@media (max-width: 480px) {
  .hero-v2-checks { grid-template-columns: 1fr; }
  .hero-v2-h1 { font-size: clamp(1.75rem, 7.5vw, 2.3rem); }
}
.hero-v2-checks li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.82); }
.hero-v2-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 9999px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-green), var(--brand-600));
  color: #fff; font-size: .65rem; font-weight: 700;
  box-shadow: 0 3px 8px -2px rgba(57,185,90,.5);
}
.hero-v2-price {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.8rem; font-weight: 800; color: #fff; line-height: 1;
}
.hero-v2-period { color: rgba(255,255,255,.55); font-weight: 500; }
.same-price-badge-red {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .55rem;
  background: rgba(255,214,10,.12); border: 1.5px solid rgba(255,214,10,.38);
  color: var(--badge-yellow); font-size: .78rem; font-weight: 700;
  padding: .38rem .95rem; border-radius: 9999px; letter-spacing: .01em;
}
.hero-v2-wa {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid rgba(37,211,102,.45); color: #fff; font-weight: 600;
  font-size: .95rem; padding: .82rem 1.5rem; border-radius: .9rem;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
  background: rgba(37,211,102,.12); text-decoration: none;
}
.hero-v2-wa:hover {
  background: rgba(37,211,102,.24); border-color: rgba(37,211,102,.65);
  transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(37,211,102,.32);
}
.hero-v2-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem;
  margin-top: 1.5rem; font-size: .8rem; color: rgba(255,255,255,.5);
}
.hero-v2-trust strong { color: rgba(255,255,255,.82); }
.hero-v2-trust-sep { width: 3px; height: 3px; border-radius: 9999px; background: rgba(255,255,255,.25); flex-shrink: 0; }

/* Hero Card */
.hero-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(57,185,90,.25);
  border-radius: 1.6rem; padding: 1.75rem;
  backdrop-filter: blur(24px);
  position: relative; overflow: hidden;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
}
.hero-card-glow {
  position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(57,185,90,.32), transparent 70%); pointer-events: none;
}
.hero-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.2rem; }
.hero-stat-box {
  background: rgba(255,255,255,.06); border: 1px solid rgba(57,185,90,.18);
  border-radius: 1rem; padding: 1rem; text-align: center;
  transition: border-color .3s, background .3s;
}
.hero-stat-box:hover { border-color: rgba(57,185,90,.4); background: rgba(57,185,90,.1); }
.hero-stat-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.45rem; font-weight: 800; color: #fff; line-height: 1.1; }
.hero-stat-unit { font-size: .82rem; font-weight: 600; color: var(--accent-green); }
.hero-stat-lbl { font-size: .67rem; font-weight: 600; color: var(--light-text); margin-top: .25rem; text-transform: uppercase; letter-spacing: .05em; }
.hero-perf-bars {
  background: rgba(255,255,255,.04); border: 1px solid rgba(57,185,90,.14);
  border-radius: 1rem; padding: 1rem 1.1rem;
  margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .65rem;
}
.hero-perf-row { display: flex; align-items: center; gap: .6rem; }
.hero-perf-lbl { font-size: .7rem; font-weight: 600; color: var(--light-text); min-width: 115px; flex-shrink: 0; }
.hero-perf-bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,.1); border-radius: 9999px; overflow: hidden; }
.hero-perf-bar {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-green));
  transform-origin: left; transform: scaleX(0);
  animation: fillBarX .9s cubic-bezier(.25,1,.5,1) .6s forwards;
}
.hero-perf-bar--g { background: linear-gradient(90deg, var(--brand-700), var(--accent-green)); }
.hero-perf-bar--b { background: linear-gradient(90deg, #1d4ed8, #60a5fa); }
@keyframes fillBarX { to { transform: scaleX(1); } }
.hero-perf-val { font-size: .72rem; font-weight: 700; color: var(--accent-green); min-width: 20px; text-align: right; flex-shrink: 0; }
.hero-tech-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.hero-chip {
  background: rgba(57,185,90,.14); border: 1px solid rgba(57,185,90,.3);
  color: var(--light-text); font-size: .72rem; font-weight: 600;
  padding: .28rem .7rem; border-radius: .5rem;
  transition: background .2s, color .2s; cursor: default;
}
.hero-chip:hover { background: rgba(57,185,90,.3); color: #fff; }

/* =====================================================================
   SCROLL REVEAL
   ===================================================================== */
.reveal, .reveal-left, .reveal-right {
  will-change: opacity, transform;
  transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1);
}
.reveal       { opacity: 0; transform: translateY(28px); }
.reveal-left  { opacity: 0; transform: translateX(-45px); }
.reveal-right { opacity: 0; transform: translateX(45px); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .22s; }
.delay-3 { transition-delay: .38s; }
.delay-4 { transition-delay: .54s; }
.delay-5 { transition-delay: .7s; }

[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }

[data-stagger] > * {
  opacity: 0; transform: translateY(28px) scale(.98);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
[data-stagger].in > * { opacity: 1; transform: none; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal], [data-stagger] > *, .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important; transform: none !important;
  }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   TOPBAR — ANNOUNCEMENT BAR
   ===================================================================== */
.topbar-offer-center {
  flex: 1; display: flex; justify-content: center; align-items: center;
  min-width: 0;
}
.tb-anc {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap; row-gap: .28rem;
}
.tb-g1, .tb-g2 {
  display: flex; align-items: center; gap: .4rem; white-space: nowrap;
}
.tb-label {
  font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.8);
}
.tb-sep  { color: rgba(255,255,255,.28); font-weight: 400; font-size: .9rem; line-height: 1; }
.tb-desc { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.92); }
.tb-pct  { color: #FFD60A; font-weight: 800; }
/* Coupon pill */
.tb-coupon-grp {
  display: inline-flex; align-items: stretch;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: .42rem; overflow: hidden;
}
.tb-code {
  padding: .16rem .48rem;
  font-family: 'Courier New', monospace;
  font-size: .7rem; font-weight: 800;
  color: #FFD60A; letter-spacing: .08em;
}
.tb-copy {
  display: inline-flex; align-items: center; gap: .18rem;
  padding: .16rem .42rem;
  background: rgba(255,255,255,.13);
  border: none; border-left: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
  font-family: inherit; font-size: .66rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.tb-copy:hover  { background: rgba(255,255,255,.24); color: #fff; }
.tb-copy:focus-visible { outline: 2px solid rgba(255,255,255,.55); outline-offset: -2px; }
.tb-copy.tb-copied { background: rgba(57,185,90,.28); color: #6EE7A0; pointer-events: none; }
/* Timer group */
.tb-timer-grp { display: inline-flex; align-items: center; gap: .28rem; }
.tb-ends { font-size: .67rem; color: rgba(255,255,255,.58); font-weight: 500; }
.topbar-timer {
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  padding: .12rem .52rem; border-radius: .42rem;
  color: #FFD60A; letter-spacing: .06em; font-weight: 800; font-size: .71rem;
}
/* CTA button */
.tb-cta {
  display: inline-flex; align-items: center; gap: .26rem;
  padding: .22rem .62rem;
  background: linear-gradient(135deg, #2C9C4C 0%, #1f7a39 100%);
  color: #fff !important;
  font-size: .7rem; font-weight: 700; font-family: inherit;
  border-radius: .42rem; text-decoration: none !important; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 2px 8px -2px rgba(44,156,76,.5);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.tb-cta:hover {
  background: linear-gradient(135deg, #39b95a 0%, #2C9C4C 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(44,156,76,.62);
  color: #fff !important; text-decoration: none !important;
}
/* ── Mobile: single-line infinite-scroll ticker ── */
@keyframes tb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .topbar-offer-center {
    justify-content: flex-start;
    overflow: hidden;
  }
  /* Animated track: holds original + clone side-by-side */
  .tb-scroll-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: tb-marquee 26s linear infinite;
    will-change: transform;
    transform: translateZ(0);            /* GPU layer */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .tb-scroll-track.tb-paused { animation-play-state: paused; }
  /* Each copy inside the track */
  .tb-anc {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .4rem;
    padding-right: 3rem;                 /* gap between copy end and next copy start */
    white-space: nowrap;
  }
  .tb-g1, .tb-g2  { gap: .35rem; white-space: nowrap; }
  /* Scale items for the compact ticker */
  .tb-label        { font-size: .69rem; }
  .tb-ends         { font-size: .64rem; }
  .topbar-timer    { font-size: .68rem; }
  .tb-cta          { font-size: .66rem; padding: .2rem .5rem; }
}

/* =====================================================================
   CURRENCY SWITCHER (header)
   ===================================================================== */
.curr-switcher { position: relative; }
.curr-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .7rem; border: 1.5px solid var(--brand-500);
  border-radius: .75rem; background: rgba(255,255,255,.85);
  font-size: .8rem; font-weight: 600; color: var(--dark-text);
  cursor: pointer; transition: border-color .22s ease, background .22s ease, box-shadow .22s ease; font-family: inherit;
  backdrop-filter: blur(6px);
}
.curr-btn:hover {
  border-color: var(--brand-700);
  background: rgba(44,156,76,.06);
  box-shadow: 0 0 0 3px rgba(44,156,76,.1);
}
.curr-flag-svg {
  display: inline-block; width: 1.25rem; height: .9rem;
  border-radius: 2px; overflow: hidden; flex-shrink: 0;
  vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.curr-caret {
  width: 12px; height: 12px; color: var(--light-text);
  transition: transform .22s ease; flex-shrink: 0;
}
.curr-switcher.open .curr-caret { transform: rotate(180deg); }
.curr-drop {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: .9rem;
  box-shadow: 0 4px 24px -8px rgba(16,35,26,.18);
  padding: .4rem; min-width: 145px;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 300;
}
.curr-switcher.open .curr-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.curr-opt {
  display: flex; align-items: center; gap: .55rem;
  width: 100%; padding: .55rem .8rem; border-radius: .65rem;
  background: none; border: none; cursor: pointer;
  font-size: .84rem; font-weight: 600; color: var(--dark-text);
  font-family: inherit; transition: background .18s, color .18s; text-align: left;
}
.curr-opt:hover { background: var(--brand-50); color: var(--brand-600); }
.curr-opt.active { color: var(--brand-600); background: var(--brand-50); }

/* =====================================================================
   SECURITY SECTION
   ===================================================================== */
.sec-section {
  background: linear-gradient(135deg, var(--dark-hero) 0%, var(--dark-surface) 55%, #0d2a17 100%);
  position: relative; overflow: hidden;
}
.sec-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(57,185,90,.07) 1px, transparent 0);
  background-size: 30px 30px; pointer-events: none;
}
.sec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 1024px) { .sec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sec-grid { grid-template-columns: 1fr; } }
.sec-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(57,185,90,.18);
  border-radius: 1.4rem; padding: 1.75rem;
  backdrop-filter: blur(8px);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
  position: relative; overflow: hidden;
}
.sec-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(57,185,90,.55), transparent);
}
.sec-card:hover { transform: translateY(-6px); border-color: rgba(57,185,90,.5); background: rgba(57,185,90,.09); }
.sec-icon {
  width: 3rem; height: 3rem; border-radius: .9rem;
  background: rgba(57,185,90,.15); border: 1px solid rgba(57,185,90,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1rem;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.sec-card:hover .sec-icon { transform: scale(1.15) rotate(-8deg); }
.sec-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .45rem; }
.sec-desc { font-size: .84rem; color: var(--light-text); line-height: 1.7; }

/* =====================================================================
   TRUST & STATISTICS SECTION
   ===================================================================== */
.trust-stats-section {
  background: var(--dark-hero);
  position: relative; overflow: hidden;
}
.trust-stats-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(57,185,90,.07) 1px, transparent 0);
  background-size: 32px 32px; pointer-events: none;
}
.trust-glow {
  position: absolute; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(44,156,76,.18), transparent 70%);
  border-radius: 9999px; top: -200px; left: 50%; transform: translateX(-50%);
  filter: blur(60px); pointer-events: none;
}
.trust-counter-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
@media (max-width: 768px) { .trust-counter-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-counter-card {
  text-align: center; padding: 2rem 1.25rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(57,185,90,.16);
  border-radius: 1.4rem; backdrop-filter: blur(8px);
  position: relative; overflow: hidden;
  transition: transform .35s ease, border-color .35s, background .35s;
}
.trust-counter-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(57,185,90,.12), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.trust-counter-card:hover { transform: translateY(-6px); border-color: rgba(57,185,90,.4); background: rgba(57,185,90,.08); }
.trust-counter-card:hover::before { opacity: 1; }
.trust-counter-icon { font-size: 2rem; margin-bottom: .75rem; display: block; }
.trust-counter-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800; color: #fff; line-height: 1; margin-bottom: .4rem;
}
.trust-counter-val .trust-accent { color: var(--accent-green); }
.trust-counter-label {
  font-size: .78rem; font-weight: 700; color: var(--light-text);
  text-transform: uppercase; letter-spacing: .07em;
}
.trust-badge-row {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}
.trust-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.15rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(57,185,90,.25);
  border-radius: 9999px;
  font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.88);
  transition: background .2s, border-color .2s;
  cursor: default;
}
.trust-badge:hover { background: rgba(57,185,90,.15); border-color: rgba(57,185,90,.5); }

/* =====================================================================
   CTA TRUST CARDS (merged pre-footer)
   ===================================================================== */
.cta-trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-top: 3rem; padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 768px) { .cta-trust-grid { grid-template-columns: repeat(2, 1fr); } }
.cta-trust-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.1rem; padding: 1.4rem 1rem;
  text-align: center;
  transition: background .25s, border-color .25s, transform .25s;
}
.cta-trust-card:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); transform: translateY(-4px); }
.cta-trust-icon { font-size: 1.85rem; margin-bottom: .6rem; display: block; }
.cta-trust-title { font-size: .9rem; font-weight: 700; color: #fff; }
.cta-trust-sub { font-size: .74rem; color: rgba(255,255,255,.55); margin-top: .22rem; }

/* =====================================================================
   HERO VIEW PLANS BUTTON — text link style with arrow animation
   ===================================================================== */
.hero-v2-wp {
  display: inline-flex; align-items: center; gap: .45rem;
  color: rgba(255,255,255,.78); font-weight: 600; font-size: .95rem;
  text-decoration: none; padding: .25rem 0;
  background: transparent; border: none;
  border-bottom: 1.5px solid rgba(255,255,255,.22);
  transition: color .22s ease, border-color .22s ease;
}
.hero-v2-wp:hover {
  color: #fff; border-color: rgba(255,255,255,.6);
  background: transparent; transform: none; box-shadow: none;
}
.hero-v2-wp-arrow {
  display: inline-flex; align-items: center; flex-shrink: 0;
  transition: transform .22s ease;
}
.hero-v2-wp:hover .hero-v2-wp-arrow {
  transform: translateX(5px);
}

/* =====================================================================
   AI BUILDER FEATURE ICONS
   ===================================================================== */
.feat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: .65rem; flex-shrink: 0; margin-top: 2px;
  font-size: 1.1rem;
  border: 1px solid rgba(44,156,76,.18);
  box-shadow: 0 2px 6px -2px rgba(44,156,76,.2);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.feat-icon:hover { transform: scale(1.12) rotate(-5deg); }
.feat-icon--ai  { background: linear-gradient(135deg, #e0f7fa, #b2ebf2); }
.feat-icon--tpl { background: linear-gradient(135deg, #fce4ec, #f8bbd0); }
.feat-icon--dnd { background: linear-gradient(135deg, #fff3e0, #ffe0b2); }
.feat-icon--pub { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }

/* Support avatar — headphone person */
.support-v2-avatar-person {
  width: 5rem; height: 5rem; border-radius: 9999px; margin-bottom: 1.5rem;
  background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
  overflow: hidden;
}

/* ==========================================
   SHARED HOSTING PAGE ADDITIONAL CSS
   ========================================== */

/* ---- Billing Toggle ---- */
.billing-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  margin-bottom: 3rem;
}
.billing-toggle {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: .32rem;
  box-shadow: 0 2px 12px -4px rgba(16,35,26,.1);
  gap: .2rem;
}
.billing-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .52rem 1.2rem;
  border-radius: 9999px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: #4a6860;
  cursor: pointer;
  transition: color .28s cubic-bezier(.2,.8,.2,1), background .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}
.billing-btn:hover { color: var(--brand-600); }
.billing-btn.active {
  background: linear-gradient(135deg, #2C9C4C, #1f7a39);
  color: #fff;
  box-shadow: 0 3px 10px -3px rgba(44,156,76,.5);
}
.billing-save-badge {
  font-size: .62rem;
  font-weight: 700;
  padding: .14rem .48rem;
  border-radius: 9999px;
  background: #ef4444;
  color: #fff;
  border: 1px solid rgba(239,68,68,.6);
  letter-spacing: .02em;
}
.billing-btn.active .billing-save-badge {
  background: rgba(255,255,255,.25);
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.billing-note-text {
  font-size: .78rem;
  color: #6a8878;
  font-weight: 500;
  text-align: center;
  min-height: 1.2em;
}

/* ---- Shared Hosting Plan Cards (extends .plan-card) ---- */
.sh-plan-highlight-text {
  font-size: .72rem;
  font-weight: 700;
  color: var(--brand-600);
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .35rem;
}
.sh-billing-note {
  font-size: .74rem;
  color: #6a8878;
  margin-top: .3rem;
  font-weight: 500;
  min-height: 1.1em;
}
.sh-plan-value-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .84rem;
}
.sh-plan-value-row:last-child { border-bottom: none; }
.sh-val-label { color: #4a6860; font-weight: 500; flex: 1; }
.sh-val { font-weight: 700; color: var(--dark-text); text-align: right; }
.sh-val.unlimited { color: var(--brand-600); }

/* ======================================================
   PLAN COMPARISON v2 — Accordion design
   ====================================================== */
.pc-outer {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* ── Column grid used by header + rows (same proportions) ── */
.pc-cols { display: grid; grid-template-columns: 2.2fr 1fr 1.15fr 1fr; }

/* ── Header row ── */
.pc-head {
  background: #fff;
  border-bottom: 2px solid rgba(44,156,76,.18);
  box-shadow: 0 4px 18px -8px rgba(16,35,26,.12);
}
.pc-head-inner { display: grid; grid-template-columns: 2.2fr 1fr 1.15fr 1fr; }
.pc-head-feature {
  padding: 1.4rem 1.5rem;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--light-text);
  display: flex; align-items: flex-end;
}
.pc-head-plan {
  padding: 1.1rem .9rem 1.2rem;
  text-align: center;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.pc-head-plan.pc-featured {
  background: linear-gradient(180deg, rgba(44,156,76,.12), rgba(44,156,76,.04));
  border-left: 2px solid rgba(44,156,76,.45);
  border-right: 2px solid rgba(44,156,76,.45);
  position: relative;
}
.pc-featured-tag {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #2C9C4C, #1a6b35);
  color: #fff; font-size: .58rem; font-weight: 800;
  padding: .26rem .9rem; border-radius: 0 0 .75rem .75rem;
  letter-spacing: .07em; white-space: nowrap; text-transform: uppercase;
  box-shadow: 0 3px 10px -3px rgba(44,156,76,.45);
}
.pc-plan-name {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: .88rem; font-weight: 800; color: var(--dark-text);
  margin-top: .5rem;
}
.pc-featured .pc-plan-name { color: var(--brand-700); }
.pc-plan-price {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 1.55rem; font-weight: 900; color: #0f1f14; line-height: 1;
}
.pc-featured .pc-plan-price { color: var(--brand-600); }
.pc-plan-price span { font-size: .7rem; font-weight: 600; color: #6a8878; }
.pc-plan-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .73rem; font-weight: 700; padding: .42rem .9rem;
  border-radius: .55rem; text-decoration: none;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease; margin-top: .15rem;
}
.pc-plan-btn-outline {
  border: 1.5px solid var(--border); color: var(--brand-700); background: #fff;
}
.pc-plan-btn-outline:hover {
  background: var(--brand-600); color: #fff; border-color: var(--brand-600);
}
.pc-plan-btn-primary {
  background: linear-gradient(135deg, #2C9C4C, #1f7a39);
  color: #fff; border: none;
  box-shadow: 0 3px 12px -3px rgba(44,156,76,.5);
}
.pc-plan-btn-primary:hover {
  transform: translateY(-1px); box-shadow: 0 5px 18px -4px rgba(44,156,76,.58);
}

/* ── Accordion sections ── */
.pc-acc { border-top: 1px solid var(--border); }
.pc-acc:first-of-type { border-top: none; }

.pc-acc-trigger {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; padding: .75rem 1.5rem;
  background: linear-gradient(135deg, #1c3328 0%, #1e3b2b 100%);
  border: none; cursor: pointer; text-align: left; font-family: inherit;
  transition: background .2s;
  border-top: 1px solid rgba(255,255,255,.06);
}
.pc-acc-trigger:hover { background: linear-gradient(135deg, #203a2e, #264535); }
.pc-acc.open > .pc-acc-trigger { background: linear-gradient(135deg, #2C9C4C, #217a3b); }

.pc-acc-emoji { font-size: .95rem; flex-shrink: 0; }
.pc-acc-title {
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.92); flex: 1;
}
.pc-acc-badge {
  font-size: .63rem; font-weight: 700; color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.12); padding: .12rem .45rem; border-radius: .3rem;
}
.pc-acc-chevron {
  width: .95rem; height: .95rem; color: rgba(255,255,255,.75); flex-shrink: 0;
  transition: transform .3s ease;
}
.pc-acc.open > .pc-acc-trigger .pc-acc-chevron { transform: rotate(180deg); }

/* Accordion body animation */
.pc-acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height .38s cubic-bezier(.16,.85,.3,1);
}
.pc-acc.open > .pc-acc-body { max-height: 2200px; }

/* ── Feature rows (inside accordion body) ── */
.pc-row {
  display: grid; grid-template-columns: 2.2fr 1fr 1.15fr 1fr;
  border-bottom: 1px solid rgba(214,238,223,.65);
  transition: background .16s;
}
.pc-row:hover { background: rgba(244,251,246,.75); }
.pc-row:last-child { border-bottom: none; }

.pc-cell {
  padding: .8rem 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .845rem;
}
.pc-cell-feature {
  justify-content: flex-start; padding-left: 1.5rem;
  gap: .55rem; font-weight: 500; color: var(--dark-text);
}
.pc-cell-feat-icon {
  width: 1.5rem; height: 1.5rem; border-radius: .4rem;
  background: linear-gradient(135deg, var(--border), #edf9f1);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; flex-shrink: 0;
  color: var(--brand-700);
}
.pc-cell.pc-featured-col {
  background: rgba(44,156,76,.055);
  border-left: 1px solid rgba(44,156,76,.14);
  border-right: 1px solid rgba(44,156,76,.14);
}

/* ==========================================================
   ABOUT US PAGE
   ========================================================== */

/* Hero — Centered content block */
.about-hero-content {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

/* Hero trust badges row */
.about-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 2.5rem 0;
}
.about-hero-badge {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: 1rem; padding: 1rem 1.5rem;
  backdrop-filter: blur(8px); min-width: 120px;
  transition: background .25s, border-color .25s, transform .28s ease;
}
.about-hero-badge:hover {
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4);
  transform: translateY(-3px);
}
.about-hero-badge-icon { font-size: 1.4rem; line-height: 1; }
.about-hero-badge-val {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.2;
}
.about-hero-badge-lbl {
  font-size: .67rem; font-weight: 700; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .06em; text-align: center;
}

/* Vertical Timeline */
.about-timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.about-timeline::before {
  content: '';
  position: absolute; left: 20px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-300) 60%, var(--brand-100) 100%);
  border-radius: 9999px;
}
.about-timeline-item {
  display: flex; gap: 1.75rem; align-items: flex-start;
  position: relative; padding-bottom: 2rem;
}
.about-timeline-item:last-child { padding-bottom: 0; }
.about-timeline-dot {
  width: 42px; height: 42px; border-radius: 9999px;
  flex-shrink: 0; position: relative; z-index: 2;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(44,156,76,.2), 0 4px 14px -4px rgba(44,156,76,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.about-timeline-item:hover .about-timeline-dot {
  transform: scale(1.18);
  box-shadow: 0 0 0 6px rgba(44,156,76,.15), 0 8px 24px -6px rgba(44,156,76,.55);
}
.about-timeline-body {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 1.2rem; padding: 1.5rem 1.75rem; flex: 1;
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.about-timeline-body::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--accent-green), var(--brand-600));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.about-timeline-item:hover .about-timeline-body {
  transform: translateX(5px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(44,156,76,.3);
}
.about-timeline-item:hover .about-timeline-body::after { transform: scaleX(1); }
.about-timeline-year {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 700; color: var(--brand-600);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .45rem;
}
.about-timeline-year::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 9999px; background: var(--brand-500); flex-shrink: 0;
}
.about-timeline-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 1.05rem; font-weight: 700; color: var(--dark-text); margin-bottom: .5rem;
}
.about-timeline-desc { font-size: .875rem; color: #4a6860; line-height: 1.78; }

/* Principles — Featured (HostLaza green) card */
.about-principle-featured {
  background: linear-gradient(140deg, #2C9C4C 0%, #1f7a39 55%, #155c2a 100%);
  border-color: transparent;
  box-shadow: 0 16px 40px -12px rgba(44,156,76,.55);
}
.about-principle-featured .why-v2-title { color: #fff; }
.about-principle-featured .why-v2-desc { color: rgba(255,255,255,.78); }
.about-principle-featured::before {
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
}
.about-principle-featured:hover { border-color: transparent; }

/* Mission Card */
.about-mission-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 2rem; padding: 3.5rem;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 6px -2px rgba(0,0,0,.04), 0 24px 60px -14px rgba(16,35,26,.12);
  text-align: center; max-width: 860px; margin: 0 auto;
}
.about-mission-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-600), var(--accent-green), var(--brand-600));
}

/* By The Numbers — 6-item (3-column) grid */
.about-stats-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .about-stats-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .about-stats-6 { grid-template-columns: repeat(2, 1fr); } }

/* Mobile responsiveness */
@media (max-width: 640px) {
  .about-hero-badge   { min-width: calc(50% - .5rem); flex: 1 1 auto; }
  .about-hero-badges  { gap: .75rem; }
  .about-mission-card { padding: 2rem 1.5rem; border-radius: 1.5rem; }
  .about-timeline::before { left: 15px; }
  .about-timeline-dot { width: 32px; height: 32px; font-size: .85rem; }
  .about-timeline-item { gap: 1.25rem; }
  .about-timeline-body { padding: 1.1rem 1.25rem; }
}

.pc-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3rem; height: 1.3rem; border-radius: 9999px;
  background: linear-gradient(135deg, #2C9C4C, #1f7a39);
  color: #fff; font-size: .58rem; font-weight: 700;
  box-shadow: 0 2px 6px -2px rgba(44,156,76,.38); flex-shrink: 0;
}
.pc-cross {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3rem; height: 1.3rem; border-radius: 9999px;
  background: #f1f5f9; color: #94a3b8;
  font-size: .7rem; font-weight: 700; flex-shrink: 0;
}
.pc-val-text { font-size: .83rem; font-weight: 600; color: var(--dark-text); }
.pc-val-text.highlight { color: var(--brand-600); font-weight: 700; }

/* ── Footer CTA row ── */
.pc-footer {
  display: grid; grid-template-columns: 2.2fr 1fr 1.15fr 1fr;
  background: linear-gradient(135deg, #f8fdf9, #fff);
  border-top: 2px solid var(--border); padding: 1.2rem 0;
}
.pc-footer-label {
  padding: 0 1.5rem; display: flex; align-items: center;
  font-size: .82rem; font-weight: 600; color: #4a6860;
}
.pc-footer-cta { display: flex; align-items: center; justify-content: center; padding: 0 .75rem; }
.pc-footer-cta.pc-featured {
  border-left: 2px solid rgba(44,156,76,.2);
  border-right: 2px solid rgba(44,156,76,.2);
  background: rgba(44,156,76,.04);
}

/* Mobile comparison table */
@media (max-width: 768px) {
  .pc-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 1.6rem; }
  .pc-outer { min-width: 640px; border-radius: 1.6rem; }
}

/* ---- Shared Hosting Hero Card adaptation ---- */
.sh-hero-plan-strip {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(57,185,90,.15);
  border-radius: .9rem;
  padding: .85rem 1rem;
  margin-bottom: 1.1rem;
}
.sh-hero-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.sh-hero-plan-name {
  font-size: .75rem;
  font-weight: 600;
  color: var(--light-text);
}
.sh-hero-plan-price {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
}
.sh-hero-plan-divider {
  height: 1px;
  background: rgba(57,185,90,.15);
  margin: .1rem 0;
}
.sh-hero-active-plan {
  background: rgba(57,185,90,.12);
  border-radius: .5rem;
  padding: .2rem .5rem;
}
.sh-hero-active-plan .sh-hero-plan-name { color: var(--accent-green); }

/* Popular plan ribbon badge */
.sh-popular-ribbon {
  position: absolute;
  top: -1px;
  right: 1.25rem;
  background: linear-gradient(135deg, #f97316, #f59e0b);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  padding: .22rem .75rem;
  border-radius: 0 0 .6rem .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -4px rgba(249,115,22,.55);
}

/* ============================================================
   PLAN CARD v2 — Redesign
   ============================================================ */

/* Suppress initPriceLabels() "Starting At" label */
.plan-price-label { display: none !important; }

/* Card wrapper upgrades */
.sh-card-v2 {
  transition: transform .42s cubic-bezier(.16,.85,.3,1.15), box-shadow .42s, border-color .35s;
}
.sh-card-v2:hover {
  transform: translateY(-8px) scale(1.012);
  box-shadow: 0 0 0 1.5px rgba(44,156,76,.28), 0 28px 64px -18px rgba(22,101,52,.3);
  border-color: rgba(44,156,76,.4);
}
.sh-card-business {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(44,156,76,.18), 0 20px 52px -14px rgba(44,156,76,.28);
  transform: scale(1.022);
  z-index: 1;
  position: relative;
}
.sh-card-business:hover {
  transform: translateY(-8px) scale(1.034);
  box-shadow: 0 0 0 2px rgba(44,156,76,.35), 0 30px 68px -18px rgba(44,156,76,.38);
}

/* "Customer Favourite" badge — pill with decorative side lines */
.sh-fav-badge {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .52rem 1rem .38rem;
  z-index: 2;
  pointer-events: none;
}
.sh-fav-badge::before,
.sh-fav-badge::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44,156,76,.32));
}
.sh-fav-badge::after {
  background: linear-gradient(270deg, transparent, rgba(44,156,76,.32));
}
.sh-fav-pill {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  background: linear-gradient(135deg, #2C9C4C, #1a6b35);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  padding: .28rem .95rem;
  border-radius: 9999px;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 14px -3px rgba(44,156,76,.55), 0 0 0 2.5px rgba(44,156,76,.14);
  pointer-events: auto;
}
.sh-fav-star {
  font-size: .65rem;
  line-height: 1;
  color: #FFD60A;
}

/* Plan icon v2 */
.sh-plan-icon-v2 {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sh-icon-starter  { background: linear-gradient(135deg, #dbeafe, #eff6ff); border: 1px solid rgba(59,130,246,.2); }
.sh-icon-business { background: linear-gradient(135deg, #D6EEDF, #edf9f1); border: 1px solid rgba(44,156,76,.25); }
.sh-icon-pro      { background: linear-gradient(135deg, #fce7f3, #fdf2f8); border: 1px solid rgba(219,39,119,.18); }

/* Price display */
.sh-price-display {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  color: #0f1f14;
  letter-spacing: -0.04em;
}

/* Billing note v2 */
.sh-billing-note-v2 {
  font-size: .78rem;
  font-weight: 500;
  color: #6a8878;
  min-height: 1.3em;
}
.sh-save-badge {
  display: inline-flex;
  align-items: center;
  background: #ef4444;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  padding: .12rem .5rem;
  border-radius: 9999px;
  margin-left: .3rem;
  letter-spacing: .03em;
  vertical-align: middle;
}
.sh-monthly-note {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .76rem;
  font-weight: 500;
  color: #78716c;
  font-style: italic;
}

/* Feature list */
.sh-feat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sh-feat-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .815rem;
  font-weight: 500;
  padding: .42rem 0;
  border-bottom: 1px solid rgba(214,238,223,.6);
}
.sh-feat-item:last-child { border-bottom: none; }
.sh-feat-avail  { color: #10231a; }
.sh-feat-unavail { color: #b0bec5; }

.sh-feat-check {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #2C9C4C, #1f7a39);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(44,156,76,.28);
}
.sh-feat-cross {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 9999px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* "Show All Features" link */
.sh-show-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: none;
  padding: .55rem .5rem;
  border-radius: .55rem;
  transition: background .2s, color .2s;
  cursor: pointer;
}
.sh-show-all:hover { background: rgba(44,156,76,.07); color: var(--brand-700); }
.sh-show-all .sh-caret { transition: transform .2s; }
.sh-show-all:hover .sh-caret { transform: translateY(2px); }

/* ---- Free Domain Tooltip ---- */
.sh-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.sh-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(44,156,76,.12); color: var(--brand-700);
  border: 1.5px solid rgba(44,156,76,.22);
  cursor: pointer; padding: 0;
  font-size: .64rem; font-weight: 800; font-style: italic; line-height: 1;
  transition: background .18s, transform .18s; flex-shrink: 0;
}
.sh-info-btn:hover,
.sh-tooltip-wrap.sh-tooltip-open .sh-info-btn {
  background: rgba(44,156,76,.25); transform: scale(1.1);
}
.sh-tooltip-text {
  position: absolute; right: 0; bottom: calc(100% + 8px);
  width: 220px; background: #1a3324; color: #e2f5e8;
  font-size: .695rem; font-weight: 500; line-height: 1.55;
  padding: .65rem .8rem; border-radius: .65rem;
  pointer-events: none; z-index: 60;
  box-shadow: 0 8px 28px -8px rgba(0,0,0,.32);
  opacity: 0; transform: translateY(5px);
  transition: opacity .2s ease, transform .2s ease;
  white-space: normal;
}
.sh-tooltip-text::after {
  content: ''; position: absolute;
  top: 100%; right: 5px;
  border: 5px solid transparent;
  border-top-color: #1a3324;
}
.sh-tooltip-wrap:hover .sh-tooltip-text,
.sh-tooltip-wrap.sh-tooltip-open .sh-tooltip-text {
  opacity: 1; transform: translateY(0);
}

/* ---- Mobile billing toggle ---- */
@media (max-width: 600px) {
  .billing-toggle-wrap { padding: 0 .5rem; }
  .billing-toggle {
    display: flex;
    width: 100%;
    border-radius: 1rem;
  }
  .billing-btn {
    flex: 1;
    min-width: 0;
    padding: .55rem .2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: .2rem;
    font-size: .76rem;
    white-space: normal;
    line-height: 1.25;
  }
  .billing-save-badge {
    font-size: .54rem;
    padding: .1rem .3rem;
    margin-left: 0;
  }
}

/* ---- Currency switcher overrides ---- */
.curr-btn {
  border: 1.5px solid var(--brand-500);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.curr-btn:hover {
  border-color: var(--brand-700);
  background: rgba(44,156,76,.06);
  box-shadow: 0 0 0 3px rgba(44,156,76,.1);
}
.curr-flag-svg {
  display: inline-block;
  width: 1.25rem;
  height: .9rem;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

/* ============================================================
   COMPARISON TABLE — Dark Premium Override
   Transforms the comparison table to match the hero dark theme
   ============================================================ */
.pc-outer {
  background: linear-gradient(145deg, var(--dark-hero) 0%, var(--dark-surface) 55%, #0d2a17 100%);
  border: 1px solid rgba(57,185,90,.2);
  box-shadow: 0 24px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(57,185,90,.08);
}
.pc-head {
  background: rgba(255,255,255,.04);
  border-bottom: 2px solid rgba(57,185,90,.2);
  box-shadow: none;
}
.pc-head-feature {
  color: rgba(255,255,255,.38);
}
.pc-head-plan {
  border-left-color: rgba(57,185,90,.15);
}
.pc-head-plan.pc-featured {
  background: rgba(44,156,76,.15);
  border-left: 2px solid rgba(44,156,76,.45);
  border-right: 2px solid rgba(44,156,76,.45);
}
.pc-plan-name { color: rgba(255,255,255,.88); }
.pc-featured .pc-plan-name { color: var(--accent-green); }
.pc-plan-price { color: #fff; }
.pc-featured .pc-plan-price { color: var(--accent-green); }
.pc-plan-price span { color: rgba(255,255,255,.42); }

.pc-plan-btn-outline {
  border: 1.5px solid rgba(57,185,90,.35);
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.07);
}
.pc-plan-btn-outline:hover {
  background: var(--brand-600);
  color: #fff;
  border-color: var(--brand-600);
}

.pc-acc { border-top-color: rgba(57,185,90,.12); }
.pc-acc-trigger {
  background: rgba(255,255,255,.03);
  border-top-color: rgba(57,185,90,.1);
}
.pc-acc-trigger:hover { background: rgba(57,185,90,.08); }
.pc-acc.open > .pc-acc-trigger { background: rgba(44,156,76,.1); }

.pc-acc-title { color: rgba(57,185,90,.9); }
.pc-acc-badge { color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.pc-acc-chevron { color: var(--accent-green); }

.pc-row { border-bottom-color: rgba(57,185,90,.08); }
.pc-row:hover { background: rgba(255,255,255,.03); }

.pc-cell-feature { color: rgba(255,255,255,.82); }
.pc-cell-feat-icon {
  background: rgba(57,185,90,.1);
  border: 1px solid rgba(57,185,90,.2);
  color: var(--accent-green);
}
.pc-cell.pc-featured-col {
  background: rgba(44,156,76,.07);
  border-left-color: rgba(44,156,76,.18);
  border-right-color: rgba(44,156,76,.18);
}
.pc-val-text { color: rgba(255,255,255,.75); }
.pc-val-text.highlight { color: var(--accent-green); }

.pc-footer {
  background: rgba(255,255,255,.03);
  border-top: 2px solid rgba(57,185,90,.15);
}
.pc-footer-label { color: rgba(255,255,255,.55); }
.pc-footer-cta.pc-featured {
  border-left-color: rgba(57,185,90,.25);
  border-right-color: rgba(57,185,90,.25);
  background: rgba(44,156,76,.08);
}

/* About text that follows comparison */
.sh-about-text {
  max-width: 820px;
  margin: 0 auto;
  color: #4a6860;
  line-height: 1.9;
  font-size: .97rem;
}
.sh-about-text p { margin-bottom: 1.2rem; }


/* =====================================================================
   UNLIMITED HOSTING — Page-Specific Styles
   ===================================================================== */
/* ── Unlimited Hosting Hero Illustration ── */
    .uh-dash {
      background: linear-gradient(135deg, #0d1f14 0%, #1a3a24 50%, #0f2a1a 100%);
      border-radius: 20px;
      border: 1px solid rgba(44,156,76,.35);
      box-shadow: 0 0 0 1px rgba(57,185,90,.12), 0 32px 80px -20px rgba(10,50,25,.6);
      overflow: hidden;
      position: relative;
    }
    .uh-dash::before {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 220px; height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(57,185,90,.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .uh-dash-header {
      background: rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.08);
      padding: .55rem 1rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .uh-dot { width: 9px; height: 9px; border-radius: 50%; }
    .uh-dot-r { background: #ff5f57; }
    .uh-dot-y { background: #ffbd2e; }
    .uh-dot-g { background: #28c840; }
    .uh-dash-title {
      font-size: .65rem; font-weight: 700; color: rgba(255,255,255,.45);
      text-transform: uppercase; letter-spacing: .07em; margin-left: .4rem;
    }
    .uh-dash-body { padding: 1rem; }
    /* Resource meters */
    .uh-res-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .65rem;
      margin-bottom: .9rem;
    }
    .uh-res-card {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 10px;
      padding: .7rem .8rem;
      position: relative;
      overflow: hidden;
    }
    .uh-res-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, #2C9C4C, #39B95A);
      transform: scaleX(1);
      transform-origin: left;
    }
    .uh-res-label {
      font-size: .58rem; font-weight: 600; color: rgba(255,255,255,.45);
      text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem;
    }
    .uh-res-val {
      font-size: 1.1rem; font-weight: 800;
      font-family: 'Plus Jakarta Sans', sans-serif;
      color: #4ade80;
      line-height: 1;
    }
    .uh-res-sub { font-size: .6rem; color: rgba(255,255,255,.35); margin-top: .18rem; }
    /* Infinity symbol animated */
    .uh-inf-symbol {
      font-size: 1.5rem; font-weight: 900;
      color: #39B95A;
      line-height: 1;
      display: inline-block;
      animation: uh-pulse 2s ease-in-out infinite;
    }
    @keyframes uh-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .75; transform: scale(1.05); }
    }
    /* Website stack */
    .uh-site-row {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 8px;
      padding: .45rem .75rem;
      display: flex;
      align-items: center;
      gap: .65rem;
      margin-bottom: .45rem;
    }
    .uh-site-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #39B95A;
      box-shadow: 0 0 6px rgba(57,185,90,.6);
      flex-shrink: 0;
    }
    .uh-site-bar-wrap {
      flex: 1;
      height: 5px;
      border-radius: 9999px;
      background: rgba(255,255,255,.08);
      overflow: hidden;
    }
    .uh-site-bar {
      height: 100%;
      border-radius: 9999px;
      background: linear-gradient(90deg, #2C9C4C, #39B95A);
    }
    .uh-site-speed {
      font-size: .62rem; font-weight: 700; color: #4ade80; flex-shrink: 0;
    }
    /* Bottom stat strip */
    .uh-stat-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .5rem;
      margin-top: .9rem;
      padding-top: .8rem;
      border-top: 1px solid rgba(255,255,255,.07);
    }
    .uh-stat-item { text-align: center; }
    .uh-stat-val {
      font-size: .88rem; font-weight: 800;
      color: #fff; line-height: 1;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .uh-stat-val span { color: #4ade80; }
    .uh-stat-lbl {
      font-size: .55rem; font-weight: 600;
      color: rgba(255,255,255,.35);
      text-transform: uppercase; letter-spacing: .06em;
      margin-top: .18rem;
    }
    /* Plan icon containers */
    .uh-plan-icon {
      width: 52px; height: 52px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: .25rem;
      flex-shrink: 0;
    }
    .uh-icon-lite  { background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,.08)); border: 1.5px solid rgba(59,130,246,.3); }
    .uh-icon-turbo { background: linear-gradient(135deg, rgba(234,88,12,.18), rgba(234,88,12,.08));  border: 1.5px solid rgba(234,88,12,.3); }
    .uh-icon-inf   { background: linear-gradient(135deg, rgba(44,156,76,.18), rgba(44,156,76,.08)); border: 1.5px solid rgba(44,156,76,.3); }

    /* Billing toggle reuse */
    .uh-save-badge { display:inline-flex;align-items:center;gap:.25rem;font-size:.65rem;font-weight:700;background:rgba(44,156,76,.15);color:var(--brand-600);border:1px solid rgba(44,156,76,.25);border-radius:9999px;padding:.15rem .55rem;margin-left:.45rem;vertical-align:middle; }

    /* Unlimited badge chip in hero right */
    .uh-chip-unlimited {
      display: inline-flex; align-items: center; gap: .35rem;
      font-size: .68rem; font-weight: 700;
      background: rgba(57,185,90,.14);
      color: #4ade80;
      border: 1px solid rgba(57,185,90,.28);
      border-radius: 9999px;
      padding: .22rem .65rem;
    }

    /* ── Why Upgrade Section ── */
    .uh-why-panel-old { background: #f9fafb; }
    .uh-why-panel-new { background: linear-gradient(135deg,#f0faf4,#e8f7ed); border-left: 2px solid rgba(44,156,76,.2); }
    .uh-why-row { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); }
    .uh-why-row:last-child { border-bottom: none; }
    .uh-why-icon-no  { display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fef2f2;border:1.5px solid #fecaca;flex-shrink:0; }
    .uh-why-icon-yes { display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(44,156,76,.12);border:1.5px solid rgba(44,156,76,.25);flex-shrink:0; }
    .uh-why-label-old { font-size:.83rem;color:#9ca3af;font-weight:500;margin:0; }
    .uh-why-label-new { font-size:.83rem;color:var(--dark-text);font-weight:600;margin:0; }
    .uh-why-inf { color:var(--brand-500);font-weight:700; }

    /* ── Resource Overview Cards ── */
    .uh-ro-card {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(44,156,76,.22);
      border-radius: 16px;
      padding: 1.75rem 1.5rem;
      display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem;
      position: relative; overflow: hidden;
      transition: transform .25s ease, border-color .25s ease;
    }
    .uh-ro-card:hover { transform: translateY(-4px); border-color: rgba(44,156,76,.45); }
    .uh-ro-card::before {
      content:''; position:absolute; top:-40px; right:-40px;
      width:100px; height:100px; border-radius:50%;
      background:radial-gradient(circle,rgba(57,185,90,.1) 0%,transparent 70%);
      pointer-events:none;
    }
    .uh-ro-inf  { font-size:2.4rem;font-weight:900;color:#4ade80;line-height:1; }
    .uh-ro-title { font-size:.9rem;font-weight:700;color:#fff;margin:0; }
    .uh-ro-desc  { font-size:.75rem;color:rgba(255,255,255,.5);line-height:1.6;margin:0; }


/* =====================================================================
   CPANEL RESELLER HOSTING — Page-Specific Styles
   ===================================================================== */
/* ── cPanel Reseller Hosting Hero Illustration ── */
    .rh-dash {
      background: linear-gradient(135deg, #0a1a10 0%, #122212 50%, #0a1a10 100%);
      border-radius: 20px;
      border: 1px solid rgba(44,156,76,.35);
      box-shadow: 0 0 0 1px rgba(57,185,90,.12), 0 32px 80px -20px rgba(10,50,25,.6);
      overflow: hidden;
      position: relative;
    }
    .rh-dash::before {
      content: '';
      position: absolute;
      top: -50px; right: -50px;
      width: 200px; height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(57,185,90,.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .rh-dash-header {
      background: rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.08);
      padding: .55rem 1rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .rh-dash-title {
      font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.4);
      text-transform: uppercase; letter-spacing: .07em; margin-left: .4rem;
    }
    .rh-dash-body { padding: 1rem; }

    /* Stat row */
    .rh-stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .45rem; margin-bottom: .8rem; }
    .rh-stat-card {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 8px;
      padding: .5rem .6rem;
    }
    .rh-stat-lbl { font-size: .56rem; font-weight: 700; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .18rem; }
    .rh-stat-val { font-size: .95rem; font-weight: 800; color: #4ade80; font-family: 'Plus Jakarta Sans',sans-serif; line-height: 1.1; }
    .rh-stat-val span { font-size: .6rem; color: rgba(255,255,255,.3); font-weight: 500; }

    /* Account rows */
    .rh-acc-hdr { font-size: .58rem; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
    .rh-acc-row {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 7px;
      padding: .38rem .6rem;
      display: flex;
      align-items: center;
      gap: .45rem;
      margin-bottom: .32rem;
    }
    .rh-acc-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #39B95A;
      box-shadow: 0 0 6px rgba(57,185,90,.65);
      flex-shrink: 0;
      animation: rh-pulse 2s ease-in-out infinite;
    }
    @keyframes rh-pulse {
      0%,100% { opacity:1; box-shadow:0 0 6px rgba(57,185,90,.65); }
      50%      { opacity:.6; box-shadow:0 0 10px rgba(57,185,90,.4); }
    }
    .rh-acc-name { font-size: .62rem; font-weight: 600; color: rgba(255,255,255,.7); flex: 1; font-family: monospace; }
    .rh-acc-tag  { font-size: .52rem; font-weight: 700; background: rgba(44,156,76,.18); color: #4ade80; border: 1px solid rgba(44,156,76,.3); border-radius: 4px; padding: .1rem .3rem; flex-shrink:0; }
    .rh-acc-live { font-size: .52rem; font-weight: 600; color: rgba(255,255,255,.3); flex-shrink:0; }
    .rh-add-btn  {
      border: 1px dashed rgba(44,156,76,.35);
      border-radius: 7px;
      padding: .32rem .6rem;
      text-align: center;
      font-size: .6rem; font-weight: 600;
      color: rgba(44,156,76,.65);
      margin-bottom: .65rem;
    }

    /* Chips */
    .rh-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .65rem; }
    .rh-chip {
      font-size: .55rem; font-weight: 700;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 9999px;
      padding: .14rem .45rem;
      color: rgba(255,255,255,.5);
    }

    /* Bottom strip */
    .rh-strip { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.07); padding-top: .55rem; }
    .rh-strip-item { text-align: center; }
    .rh-strip-val  { font-size: .82rem; font-weight: 800; color: #fff; font-family: 'Plus Jakarta Sans',sans-serif; }
    .rh-strip-val span { color: #4ade80; }
    .rh-strip-lbl  { font-size: .5rem; font-weight: 600; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .06em; margin-top: .1rem; }

    /* ── Plan icons ── */
    .rh-plan-icon {
      width: 52px; height: 52px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .rh-icon-basic    { background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25); }
    .rh-icon-launch   { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25); }
    .rh-icon-scale    { background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.25); }
    .rh-icon-unlimited{ background: rgba(44,156,76,.12);  border: 1px solid rgba(44,156,76,.28);  }

    /* ── 4-option billing toggle: 2×2 on very small screens ── */
    @media (max-width: 479px) {
      .rh-billing-grid.billing-toggle {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: .3rem;
      }
      .rh-billing-grid .billing-btn {
        border-radius: 9px !important;
        font-size: .7rem !important;
        padding: .55rem .4rem !important;
        line-height: 1.25 !important;
      }
    }

    /* ── Save badge inside plan card ── */
    .rh-save-badge {
      display: inline-block;
      font-size: .65rem; font-weight: 700;
      background: linear-gradient(135deg, #dcfce7, #bbf7d0);
      color: #15803d;
      border-radius: 9999px;
      padding: .1rem .55rem;
      margin-left: .3rem;
    }

    /* ── Workflow / How It Works ── */
    .rh-wf-section { background: linear-gradient(160deg,#0a1a10 0%,#0d2016 50%,#081510 100%); }
    .rh-wf-track {
      display: grid;
      grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr;
      align-items: start;
      gap: .5rem;
    }
    @media (max-width: 767px) {
      .rh-wf-track { grid-template-columns: 1fr; gap: 1rem; }
      .rh-wf-connector { transform: rotate(90deg); margin: 0 auto; }
    }
    .rh-wf-step {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 16px;
      padding: 1.7rem 1.2rem;
      text-align: center;
      transition: border-color .25s;
    }
    .rh-wf-step:hover { border-color: rgba(44,156,76,.3); }
    .rh-wf-num {
      font-size: 2rem; font-weight: 900;
      color: rgba(57,185,90,.16);
      font-family: 'Plus Jakarta Sans',sans-serif;
      line-height: 1; margin-bottom: .55rem;
    }
    .rh-wf-icon {
      width: 50px; height: 50px;
      background: rgba(44,156,76,.15);
      border: 1.5px solid rgba(44,156,76,.3);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto .85rem;
    }
    .rh-wf-title { font-size: .98rem; font-weight: 800; color: #fff; font-family: 'Plus Jakarta Sans',sans-serif; margin-bottom: .45rem; }
    .rh-wf-desc  { font-size: .77rem; line-height: 1.65; color: rgba(255,255,255,.52); margin-bottom: .7rem; }
    .rh-wf-tag   { display: inline-block; font-size: .6rem; font-weight: 700; background: rgba(44,156,76,.2); color: #4ade80; border: 1px solid rgba(44,156,76,.3); border-radius: 9999px; padding: .2rem .6rem; }
    .rh-wf-connector { display: flex; align-items: center; justify-content: center; padding-top: 3.8rem; color: rgba(57,185,90,.35); }

    /* ── White Label Mock Panel ── */
    .rh-wl-mock {
      background: linear-gradient(135deg,#0a1a10 0%,#152818 100%);
      border: 1px solid rgba(44,156,76,.3);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 24px 60px -20px rgba(10,50,25,.5);
    }
    .rh-wl-mock-bar { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); padding: .5rem .9rem; display: flex; align-items: center; gap: .45rem; }
    .rh-wl-mock-body { padding: .9rem 1rem; }
    .rh-wl-brand-row { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: .6rem .85rem; display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }
    .rh-wl-logo-chip { width: 28px; height: 28px; background: rgba(44,156,76,.3); border: 1px solid rgba(44,156,76,.45); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 900; color: #4ade80; flex-shrink: 0; }
    .rh-wl-brand-name { font-size: .7rem; font-weight: 800; color: #fff; }
    .rh-wl-brand-sub  { font-size: .56rem; color: rgba(255,255,255,.4); }
    .rh-wl-client-row { display: flex; align-items: center; gap: .45rem; padding: .38rem .85rem; border-bottom: 1px solid rgba(255,255,255,.05); }
    .rh-wl-client-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 5px rgba(57,185,90,.5); flex-shrink: 0; }
    .rh-wl-client-name { font-size: .6rem; color: rgba(255,255,255,.65); flex: 1; font-family: monospace; }
    .rh-wl-client-tag  { font-size: .5rem; font-weight: 700; background: rgba(44,156,76,.15); color: #4ade80; border-radius: 4px; padding: .08rem .28rem; }
    .rh-wl-notice { background: rgba(44,156,76,.1); border: 1px solid rgba(44,156,76,.25); border-radius: 8px; padding: .5rem .8rem; font-size: .6rem; font-weight: 600; color: rgba(57,185,90,.9); text-align: center; margin-top: .7rem; }
    .rh-wl-point { display: flex; align-items: flex-start; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
    .rh-wl-point:last-child { border-bottom: none; }
    .rh-wl-check-wrap { width: 22px; height: 22px; border-radius: 50%; background: rgba(44,156,76,.15); border: 1.5px solid rgba(44,156,76,.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .15rem; }

    /* ── Who Is It For Cards ── */
    .rh-for-card { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 1.6rem 1.2rem; text-align: center; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
    .rh-for-card:hover { border-color: rgba(44,156,76,.4); box-shadow: 0 8px 32px -8px rgba(44,156,76,.18); transform: translateY(-4px); }
    .rh-for-icon { width: 56px; height: 56px; background: linear-gradient(135deg,#edf9f1,#d6eedf); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto .9rem; font-size: 1.5rem; }
    .rh-for-title { font-size: .97rem; font-weight: 800; color: var(--dark-text); margin-bottom: .3rem; }
    .rh-for-desc  { font-size: .78rem; color: #6b7280; line-height: 1.55; }

    /* ── Reseller Plan Comparison (4 columns) ── */
    .rh-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; }
    .rh-cmp-outer { min-width: 660px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; }
    .rh-cmp-head { position: sticky; top: 72px; z-index: 10; background: rgba(12,28,17,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.12); }
    .rh-cmp-head-row { display: grid; grid-template-columns: 185px repeat(4,1fr); }
    .rh-cmp-head-feat { padding: 1.1rem .85rem; display: flex; align-items: flex-end; }
    .rh-cmp-head-feat span { font-size: .67rem; font-weight: 700; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: .07em; }
    .rh-cmp-head-plan { text-align: center; padding: .85rem .55rem; border-left: 1px solid rgba(255,255,255,.07); }
    .rh-cmp-head-featured { background: rgba(44,156,76,.09); border-left: 1px solid rgba(44,156,76,.22) !important; border-right: 1px solid rgba(44,156,76,.22); }
    .rh-cmp-featured-tag { font-size: .56rem; font-weight: 700; background: rgba(44,156,76,.25); color: #4ade80; border-radius: 9999px; padding: .1rem .4rem; display: inline-block; margin-bottom: .28rem; }
    .rh-cmp-plan-name  { font-size: .8rem; font-weight: 800; color: #fff; margin-bottom: .2rem; }
    .rh-cmp-plan-price { font-size: 1.05rem; font-weight: 900; color: #4ade80; line-height: 1.15; margin-bottom: .42rem; }
    .rh-cmp-plan-price span { font-size: .7rem; color: rgba(255,255,255,.42); font-weight: 500; }
    .rh-cmp-btn-primary { display: block; font-size: .68rem; font-weight: 700; background: var(--brand-600); color: white; border-radius: 7px; padding: .38rem .6rem; transition: background .2s; text-align: center; }
    .rh-cmp-btn-primary:hover { background: var(--brand-700); }
    .rh-cmp-btn-outline { display: block; font-size: .68rem; font-weight: 700; border: 1.5px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); border-radius: 7px; padding: .36rem .6rem; transition: border-color .2s, color .2s; text-align: center; }
    .rh-cmp-btn-outline:hover { border-color: rgba(255,255,255,.4); color: #fff; }
    .rh-cmp-acc { border-bottom: 1px solid rgba(255,255,255,.07); }
    .rh-cmp-acc:last-child { border-bottom: none; }
    .rh-cmp-acc-trig { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; width: 100%; cursor: pointer; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.85); background: none; border: none; text-align: left; transition: background .2s; }
    .rh-cmp-acc-trig:hover { background: rgba(255,255,255,.04); }
    .rh-cmp-acc-body { display: none; }
    .rh-cmp-acc.open .rh-cmp-acc-body { display: block; }
    .rh-cmp-acc-chev { margin-left: auto; flex-shrink: 0; transition: transform .25s; color: rgba(255,255,255,.4); }
    .rh-cmp-acc.open .rh-cmp-acc-chev { transform: rotate(180deg); }
    .rh-cmp-acc-cnt { font-size: .6rem; color: rgba(255,255,255,.35); background: rgba(255,255,255,.07); border-radius: 9999px; padding: .1rem .38rem; font-weight: 600; }
    .rh-cmp-row { display: grid; grid-template-columns: 185px repeat(4,1fr); border-bottom: 1px solid rgba(255,255,255,.05); transition: background .15s; }
    .rh-cmp-row:last-child { border-bottom: none; }
    .rh-cmp-row:hover { background: rgba(255,255,255,.024); }
    .rh-cmp-cell { padding: .58rem .85rem; font-size: .73rem; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,.05); min-height: 38px; }
    .rh-cmp-cell:first-child { justify-content: flex-start; border-left: none; gap: .38rem; color: rgba(255,255,255,.68); font-weight: 500; }
    .rh-cmp-cell-icon { color: rgba(255,255,255,.28); flex-shrink: 0; }
    .rh-cmp-feat-col { background: rgba(44,156,76,.06); border-left: 1px solid rgba(44,156,76,.15) !important; border-right: 1px solid rgba(44,156,76,.15) !important; }
    .rh-cmp-check { color: #4ade80; font-weight: 800; font-size: .88rem; }
    .rh-cmp-cross { color: rgba(255,255,255,.2); font-size: .82rem; }
    .rh-cmp-val    { color: #fff; font-weight: 600; font-size: .73rem; text-align: center; }
    .rh-cmp-val-hl { color: #4ade80; font-weight: 700; font-size: .73rem; text-align: center; }
    .rh-cmp-footer-row { display: grid; grid-template-columns: 185px repeat(4,1fr); background: rgba(0,0,0,.15); border-top: 1px solid rgba(255,255,255,.1); }
    .rh-cmp-footer-cell { padding: .85rem .55rem; text-align: center; border-left: 1px solid rgba(255,255,255,.06); }
    .rh-cmp-footer-cell:first-child { border-left: none; }
    .rh-cmp-footer-featured { background: rgba(44,156,76,.07); border-left: 1px solid rgba(44,156,76,.15) !important; border-right: 1px solid rgba(44,156,76,.15) !important; }


/* =====================================================================
   HOME PAGE — Page-Specific Styles
   ===================================================================== */
/* ═══════════════════════════════════════════════════════
     HOSTING INFRASTRUCTURE ILLUSTRATION — SVG + CSS System
     ═══════════════════════════════════════════════════════ */
      .hvi-wrap {
        position: relative;
        width: 100%;
        max-width: 660px;
        margin: 0 auto;
        isolation: isolate;
      }

      @media (max-width:1280px) {
        .hvi-card {
          display: none !important
        }
      }

      @media (max-width:1024px) {
        .hvi-wrap {
          max-width: 500px
        }
      }

      @media (max-width:640px) {
        .hvi-wrap {
          max-width: 330px
        }
      }

      /* (old hv-wrap kept to avoid orphan refs) */
      .hv-wrap {
        position: relative;
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
        isolation: isolate;
        overflow: visible;
      }

      @media (max-width:1280px) {
        .hv-b {
          display: none !important;
        }
      }

      @media (max-width:1024px) {
        .hv-wrap {
          max-width: 480px;
        }

        .hv-p {
          display: none;
        }
      }

      @media (max-width:640px) {
        .hv-wrap {
          max-width: 320px;
        }
      }

      /* ── SVG background layer ── */
      .hv-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
        z-index: 1;
      }

      /* ── CSS glow halo behind image ── */
      .hv-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: 85%;
        border-radius: 50%;
        pointer-events: none;
        z-index: 2;
        background: radial-gradient(ellipse at 50% 52%, rgba(44, 156, 76, .30) 0%, rgba(44, 156, 76, .10) 46%, transparent 70%);
        animation: hvPulse 5.5s ease-in-out infinite;
      }

      .hv-floor {
        position: absolute;
        bottom: -3%;
        left: 8%;
        right: 8%;
        height: 90px;
        background: radial-gradient(ellipse at center, rgba(44, 156, 76, .38) 0%, transparent 70%);
        filter: blur(26px);
        pointer-events: none;
        z-index: 2;
      }

      /* ── Main PNG image ── */
      .hv-img {
        position: relative;
        z-index: 6;
        width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0 22px 55px rgba(44, 156, 76, .24)) drop-shadow(0 4px 14px rgba(0, 0, 0, .22));
        animation: hvFloat 7s ease-in-out infinite;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
      }

      /* ══ Glassmorphism floating badges ══ */
      .hv-b {
        position: absolute;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .48rem .75rem;
        border-radius: 12px;
        z-index: 7;
        white-space: nowrap;
        background: rgba(5, 16, 9, .76);
        backdrop-filter: blur(18px) saturate(1.6);
        -webkit-backdrop-filter: blur(18px) saturate(1.6);
        border: 1px solid rgba(57, 185, 90, .28);
        box-shadow: 0 4px 22px rgba(44, 156, 76, .20), 0 0 0 1px rgba(57, 185, 90, .07) inset;
        transition: transform .28s ease, box-shadow .28s ease;
        cursor: default;
      }

      .hv-b:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 38px rgba(44, 156, 76, .34) !important;
      }

      .hv-b-ic {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .82rem;
        background: rgba(44, 156, 76, .18);
        border: 1px solid rgba(57, 185, 90, .22);
      }

      .hv-b-info {
        display: flex;
        flex-direction: column;
        gap: .04rem;
      }

      .hv-b-label {
        font-size: .67rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: .024em;
        line-height: 1.25;
      }

      .hv-b-sub {
        font-size: .57rem;
        color: rgba(255, 255, 255, .46);
        font-weight: 500;
      }

      .hv-b-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #39B95A;
        box-shadow: 0 0 7px #39B95A;
        flex-shrink: 0;
        animation: hvPulseDot 2.5s ease-in-out infinite;
      }

      /* Badge positions — staggered float phases */
      .hvb-1 {
        top: 4%;
        left: -9%;
        animation: hvFloat 5.6s ease-in-out infinite;
      }

      .hvb-2 {
        top: 8%;
        right: -9%;
        animation: hvFloat 6.2s ease-in-out infinite 1s;
      }

      .hvb-3 {
        top: 43%;
        left: -10%;
        animation: hvFloat 5.9s ease-in-out infinite .5s;
      }

      .hvb-4 {
        top: 40%;
        right: -10%;
        animation: hvFloat 6.6s ease-in-out infinite 1.6s;
      }

      .hvb-5 {
        bottom: 19%;
        left: -8%;
        animation: hvFloat 5.3s ease-in-out infinite .8s;
      }

      .hvb-6 {
        bottom: 7%;
        right: -8%;
        animation: hvFloat 6.4s ease-in-out infinite .3s;
      }

      .hvb-7 {
        bottom: 35%;
        right: -11%;
        animation: hvFloat 5.7s ease-in-out infinite 2s;
      }

      /* CSS particles */
      .hv-p {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 8;
      }

      .hvp-1 {
        width: 7px;
        height: 7px;
        background: rgba(57, 185, 90, .65);
        top: 15%;
        left: 20%;
        animation: hvFloat 4.6s ease-in-out infinite, hvPulse 3.8s ease-in-out infinite;
      }

      .hvp-2 {
        width: 5px;
        height: 5px;
        background: rgba(44, 156, 76, .82);
        top: 36%;
        right: 9%;
        animation: hvFloat 5.4s ease-in-out infinite 1.2s;
      }

      .hvp-3 {
        width: 9px;
        height: 9px;
        background: rgba(57, 185, 90, .35);
        bottom: 36%;
        left: 4%;
        filter: blur(1.5px);
        animation: hvFloat 4.9s ease-in-out infinite .9s;
      }

      .hvp-4 {
        width: 5px;
        height: 5px;
        background: rgba(44, 156, 76, .72);
        bottom: 21%;
        right: 13%;
        animation: hvFloat 4.1s ease-in-out infinite 1.9s;
      }

      .hvp-5 {
        width: 11px;
        height: 11px;
        background: rgba(57, 185, 90, .18);
        top: 54%;
        left: 2%;
        filter: blur(3px);
        animation: hvPulse 5.8s ease-in-out infinite .5s;
      }

      /* ══ Keyframes ══ */
      @keyframes hvFloat {

        0%,
        100% {
          transform: translateY(0)
        }

        50% {
          transform: translateY(-13px)
        }
      }

      @keyframes hvPulse {

        0%,
        100% {
          opacity: .5;
          transform: scale(1)
        }

        50% {
          opacity: 1;
          transform: scale(1.2)
        }
      }

      @keyframes hvPulseDot {

        0%,
        100% {
          box-shadow: 0 0 5px #39B95A
        }

        50% {
          box-shadow: 0 0 12px #39B95A
        }
      }

      /* ── SVG illustration fill ── */
      .hvi-svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
      }

      /* ── Glass feature cards ── */
      .hvi-card {
        position: absolute;
        display: flex;
        align-items: center;
        gap: .44rem;
        padding: .44rem .7rem;
        background: rgba(4, 12, 6, .76);
        backdrop-filter: blur(18px) saturate(1.6);
        -webkit-backdrop-filter: blur(18px) saturate(1.6);
        border: 1px solid rgba(57, 185, 90, .28);
        border-radius: 10px;
        z-index: 10;
        white-space: nowrap;
        box-shadow: 0 4px 22px rgba(44, 156, 76, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
        transition: transform .25s ease, box-shadow .25s ease;
        cursor: default;
      }

      .hvi-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 36px rgba(44, 156, 76, .30) !important;
      }

      .hvi-c-ic {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(44, 156, 76, .18);
        border: 1px solid rgba(57, 185, 90, .22);
        font-size: .78rem;
        flex-shrink: 0;
      }

      .hvi-c-info {
        display: flex;
        flex-direction: column;
        gap: .02rem;
      }

      .hvi-c-lbl {
        font-size: .65rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: .022em;
        line-height: 1.3;
      }

      .hvi-c-sub {
        font-size: .56rem;
        color: rgba(255, 255, 255, .43);
        font-weight: 500;
      }

      .hvi-c-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #39B95A;
        box-shadow: 0 0 8px #39B95A;
        flex-shrink: 0;
        animation: hviDot 2.4s ease-in-out infinite;
      }

      /* card positions */
      .hvi-ca {
        top: 4%;
        left: -5%;
        animation: floatY 5.5s ease-in-out infinite;
      }

      .hvi-cb {
        top: 22%;
        right: -6%;
        animation: floatY 6.3s ease-in-out infinite .9s;
      }

      .hvi-cc {
        top: 42%;
        right: -6%;
        animation: floatY 5.8s ease-in-out infinite 1.6s;
      }

      .hvi-cd {
        top: 60%;
        right: -6%;
        animation: floatY 6.6s ease-in-out infinite .3s;
      }

      .hvi-ce {
        bottom: 25%;
        left: -6%;
        animation: floatY 5.2s ease-in-out infinite 1.2s;
      }

      .hvi-cf {
        bottom: 12%;
        left: -5%;
        animation: floatY 6.1s ease-in-out infinite 2s;
      }

      .hvi-cg {
        bottom: 3%;
        right: -5%;
        animation: floatY 5.6s ease-in-out infinite 2.6s;
      }

      /* CSS particles */
      .hvi-p {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 1;
      }

      .hvp1 {
        width: 6px;
        height: 6px;
        background: rgba(57, 185, 90, .6);
        top: 12%;
        left: 14%;
        animation: floatY 4.8s ease-in-out infinite, hvPulse 3.5s ease-in-out infinite;
      }

      .hvp2 {
        width: 4px;
        height: 4px;
        background: rgba(44, 156, 76, .75);
        top: 35%;
        right: 8%;
        animation: floatY 5.5s ease-in-out infinite 1.3s;
      }

      .hvp3 {
        width: 8px;
        height: 8px;
        background: rgba(57, 185, 90, .3);
        bottom: 32%;
        left: 5%;
        filter: blur(1.5px);
        animation: floatY 5s ease-in-out infinite .8s;
      }

      .hvp4 {
        width: 5px;
        height: 5px;
        background: rgba(44, 156, 76, .65);
        bottom: 18%;
        right: 11%;
        animation: floatY 4.3s ease-in-out infinite 1.9s;
      }

      .hvp5 {
        width: 10px;
        height: 10px;
        background: rgba(57, 185, 90, .18);
        top: 52%;
        left: 1%;
        filter: blur(2.5px);
        animation: hvPulse 6s ease-in-out infinite .4s;
      }

      @keyframes floatY {

        0%,
        100% {
          transform: translateY(0)
        }

        50% {
          transform: translateY(-11px)
        }
      }

      @keyframes hvPulse {

        0%,
        100% {
          opacity: .45;
          transform: scale(1)
        }

        50% {
          opacity: 1;
          transform: scale(1.22)
        }
      }

      @keyframes hviDot {

        0%,
        100% {
          box-shadow: 0 0 6px #39B95A
        }

        50% {
          box-shadow: 0 0 14px #39B95A
        }
      }


/* =====================================================================
   ALPHA RESELLER HOSTING — Page-Specific Styles
   ===================================================================== */
/* ══════════════════════════════════════════════
       ALPHA RESELLER — Hero Illustration
       Alpha Command Center · 4-tier multi-level network
       (UNIQUE to this page — not reused from any other)
    ══════════════════════════════════════════════ */
    .ar-dash {
      background: linear-gradient(135deg, #080f14 0%, #0e1e12 50%, #080f14 100%);
      border-radius: 20px;
      border: 1px solid rgba(44,156,76,.35);
      box-shadow: 0 0 0 1px rgba(57,185,90,.1), 0 32px 80px -20px rgba(5,30,15,.65);
      overflow: hidden;
      position: relative;
    }
    .ar-dash::before {
      content: '';
      position: absolute;
      top: -70px; left: 50%;
      transform: translateX(-50%);
      width: 300px; height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(57,185,90,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .ar-dash-header {
      background: rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.08);
      padding: .55rem 1rem;
      display: flex; align-items: center; gap: .5rem;
    }
    .ar-dash-title {
      font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.42);
      text-transform: uppercase; letter-spacing: .07em; margin-left: .4rem;
    }
    .ar-dash-live {
      margin-left: auto; display: inline-flex; align-items: center; gap: .3rem;
      font-size: .52rem; font-weight: 700; color: #fbbf24;
      background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3);
      border-radius: 9999px; padding: .12rem .45rem; text-transform: uppercase; letter-spacing: .06em;
    }
    .ar-dash-live::before { content:''; width:5px; height:5px; border-radius:50%; background:#fbbf24; box-shadow:0 0 5px rgba(251,191,36,.8); }
    .ar-dash-body { padding: 1rem; }

    /* Top metric row */
    .ar-stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: .4rem; margin-bottom: .75rem; }
    .ar-stat-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: .42rem .5rem; }
    .ar-stat-lbl { font-size: .5rem; font-weight: 700; color: rgba(255,255,255,.34); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .12rem; line-height: 1.2; }
    .ar-stat-val { font-size: .9rem; font-weight: 800; color: #4ade80; font-family: 'Plus Jakarta Sans',sans-serif; line-height: 1.1; }
    .ar-stat-val span { font-size: .52rem; color: rgba(255,255,255,.32); font-weight: 500; }

    /* ── 4-tier hierarchy ── */
    .ar-tier { position: relative; }
    /* Tier badge / level marker on the left */
    .ar-tier-label {
      display: inline-flex; align-items: center; gap: .3rem;
      font-size: .48rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
      color: rgba(255,255,255,.4); margin-bottom: .25rem;
    }
    .ar-tier-num { width: 13px; height: 13px; border-radius: 4px; display:flex; align-items:center; justify-content:center; font-size:.5rem; font-weight:900; }
    .ar-tier-num-1 { background: rgba(251,191,36,.2); color:#fbbf24; border:1px solid rgba(251,191,36,.4); }
    .ar-tier-num-2 { background: rgba(139,92,246,.2); color:#c4b5fd; border:1px solid rgba(139,92,246,.4); }
    .ar-tier-num-3 { background: rgba(59,130,246,.2); color:#93c5fd; border:1px solid rgba(59,130,246,.4); }
    .ar-tier-num-4 { background: rgba(44,156,76,.2); color:#4ade80; border:1px solid rgba(44,156,76,.4); }

    /* Alpha node (top, premium gold crown) */
    .ar-alpha-node {
      display: flex; align-items: center; gap: .55rem;
      background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(44,156,76,.12));
      border: 1.5px solid rgba(251,191,36,.45);
      border-radius: 11px; padding: .55rem .8rem; margin-bottom: .25rem;
      position: relative;
    }
    .ar-alpha-badge {
      width: 34px; height: 34px; flex-shrink: 0;
      background: rgba(251,191,36,.18); border: 1.5px solid rgba(251,191,36,.5);
      border-radius: 9px; display: flex; align-items: center; justify-content: center;
    }
    .ar-alpha-label { font-size: .72rem; font-weight: 800; color: #fcd34d; font-family: 'Plus Jakarta Sans',sans-serif; line-height: 1.15; }
    .ar-alpha-sub { font-size: .54rem; color: rgba(255,255,255,.42); margin-top: .05rem; }
    .ar-alpha-pill { margin-left: auto; font-size: .48rem; font-weight: 800; background: rgba(251,191,36,.22); color: #fcd34d; border: 1px solid rgba(251,191,36,.4); border-radius: 9999px; padding: .1rem .4rem; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }

    /* vertical flow connector */
    .ar-flow { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .2rem 0; }
    .ar-flow-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(57,185,90,.5); animation: ar-flow-pulse 1.8s ease-in-out infinite; }
    .ar-flow-dot.f2 { animation-delay: .3s; }
    .ar-flow-dot.f3 { animation-delay: .6s; }
    @keyframes ar-flow-pulse { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1.1)} }

    /* Master reseller row */
    .ar-master-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; margin-bottom: .25rem; }
    .ar-master-node { background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(139,92,246,.05)); border: 1px solid rgba(139,92,246,.3); border-radius: 8px; padding: .38rem .42rem; text-align: center; }
    .ar-master-node .ar-node-name { font-size: .54rem; font-weight: 800; color: #c4b5fd; margin-bottom: .1rem; }
    .ar-master-node .ar-node-stat { font-size: .46rem; color: rgba(255,255,255,.4); }
    .ar-node-dot { display:inline-block; width:4px; height:4px; border-radius:50%; background:#a78bfa; box-shadow:0 0 4px rgba(167,139,250,.7); margin-right:.2rem; vertical-align:middle; animation: ar-flow-pulse 2.2s ease-in-out infinite; }

    /* Reseller row */
    .ar-res-row { display: grid; grid-template-columns: repeat(4,1fr); gap: .3rem; margin-bottom: .25rem; }
    .ar-res-node { background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25); border-radius: 7px; padding: .3rem .25rem; text-align: center; }
    .ar-res-node .ar-res-name { font-size: .48rem; font-weight: 700; color: #93c5fd; }
    .ar-res-node .ar-res-sub { font-size: .42rem; color: rgba(255,255,255,.34); margin-top: .05rem; }

    /* Client chips */
    .ar-client-row { display: grid; grid-template-columns: repeat(6,1fr); gap: .25rem; margin-bottom: .65rem; }
    .ar-client-chip { background: rgba(44,156,76,.08); border: 1px solid rgba(44,156,76,.2); border-radius: 5px; padding: .2rem .1rem; text-align: center; font-size: .42rem; font-weight: 600; color: rgba(74,222,128,.85); font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Revenue flow strip */
    .ar-rev-strip { display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: .45rem .7rem; margin-bottom: .6rem; }
    .ar-rev-ico { width: 24px; height: 24px; border-radius: 7px; background: rgba(44,156,76,.18); border: 1px solid rgba(44,156,76,.35); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .ar-rev-txt { font-size: .56rem; font-weight: 700; color: rgba(255,255,255,.7); }
    .ar-rev-txt span { color: #4ade80; }
    .ar-rev-bar { margin-left: auto; display: flex; align-items: flex-end; gap: 2px; height: 20px; }
    .ar-rev-bar i { width: 4px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg,#4ade80,rgba(44,156,76,.3)); display:block; }

    /* Feature chips */
    .ar-chips { display: flex; flex-wrap: wrap; gap: .26rem; margin-bottom: .6rem; }
    .ar-chip { font-size: .52rem; font-weight: 700; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 9999px; padding: .12rem .42rem; color: rgba(255,255,255,.5); }

    /* Bottom strip */
    .ar-strip { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.07); padding-top: .5rem; }
    .ar-strip-item { text-align: center; }
    .ar-strip-val { font-size: .8rem; font-weight: 800; color: #fff; font-family: 'Plus Jakarta Sans',sans-serif; }
    .ar-strip-val span { color: #4ade80; }
    .ar-strip-lbl { font-size: .48rem; font-weight: 600; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .06em; margin-top: .08rem; }

    /* ── Plan card icons ── */
    .ar-plan-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .ar-icon-start     { background: rgba(59,130,246,.12);  border: 1px solid rgba(59,130,246,.25); }
    .ar-icon-core      { background: rgba(139,92,246,.12);  border: 1px solid rgba(139,92,246,.25); }
    .ar-icon-prime     { background: rgba(249,115,22,.12);  border: 1px solid rgba(249,115,22,.25); }
    .ar-icon-unlimited { background: rgba(44,156,76,.12);   border: 1px solid rgba(44,156,76,.28); }

    /* ── 4-option billing toggle: 2×2 on very small screens ── */
    @media (max-width: 479px) {
      .ar-billing-grid.billing-toggle {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: .3rem;
      }
      .ar-billing-grid .billing-btn {
        border-radius: 9px !important;
        font-size: .7rem !important;
        padding: .55rem .4rem !important;
        line-height: 1.25 !important;
      }
    }

    /* Hero hierarchy ribbon */
    .ar-hier-ribbon { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin-top: 1.1rem; }
    .ar-hier-step { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.72); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 9999px; padding: .2rem .6rem; white-space: nowrap; }
    .ar-hier-step.is-top { color: #fcd34d; background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.4); }
    .ar-hier-sep { color: rgba(74,222,128,.7); font-weight: 800; }

    @media (max-width: 380px) {
      .ar-stat-row { grid-template-columns: repeat(2,1fr); }
      .ar-client-row { grid-template-columns: repeat(4,1fr); }
    }

    /* ══════════════════════════════════════════════
       WINDOW CHROME DOTS (shared)
    ══════════════════════════════════════════════ */
    .uh-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .uh-dot-r { background: #ff5f57; }
    .uh-dot-y { background: #ffbd2e; }
    .uh-dot-g { background: #28c840; }

    /* ══════════════════════════════════════════════
       ALPHA — 4-TIER HOSTING HIERARCHY
    ══════════════════════════════════════════════ */
    .ar-h4-section { background: #fff; }
    .ar-h4-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; align-items: stretch; }
    @media (max-width: 1023px) { .ar-h4-grid { grid-template-columns: repeat(2,1fr); gap: 1.1rem; } }
    @media (max-width: 560px)  { .ar-h4-grid { grid-template-columns: 1fr; } }
    .ar-h4-card {
      border-radius: 20px; padding: 1.9rem 1.4rem; border: 2px solid transparent;
      position: relative; display: flex; flex-direction: column;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .ar-h4-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px -12px rgba(0,0,0,.14); }
    .ar-h4-card-1 { background: linear-gradient(135deg,#fffbeb,#fef3c7); border-color: rgba(251,191,36,.4); }
    .ar-h4-card-2 { background: linear-gradient(135deg,#faf5ff,#ede9fe); border-color: rgba(139,92,246,.3); }
    .ar-h4-card-3 { background: linear-gradient(135deg,#eff6ff,#dbeafe); border-color: rgba(59,130,246,.28); }
    .ar-h4-card-4 { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border-color: rgba(44,156,76,.3); }
    .ar-h4-rank {
      position: absolute; top: 1rem; right: 1rem;
      width: 26px; height: 26px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: .72rem; font-weight: 900; font-family: 'Plus Jakarta Sans',sans-serif;
    }
    .ar-h4-rank-1 { background: rgba(251,191,36,.25); color: #b45309; border: 1px solid rgba(251,191,36,.5); }
    .ar-h4-rank-2 { background: rgba(139,92,246,.2); color: #6d28d9; border: 1px solid rgba(139,92,246,.4); }
    .ar-h4-rank-3 { background: rgba(59,130,246,.2); color: #1d4ed8; border: 1px solid rgba(59,130,246,.4); }
    .ar-h4-rank-4 { background: rgba(44,156,76,.2); color: #15803d; border: 1px solid rgba(44,156,76,.4); }
    .ar-h4-icon { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
    .ar-h4-icon-1 { background: rgba(251,191,36,.16); border: 2px solid rgba(251,191,36,.4); }
    .ar-h4-icon-2 { background: rgba(139,92,246,.12); border: 2px solid rgba(139,92,246,.3); }
    .ar-h4-icon-3 { background: rgba(59,130,246,.12); border: 2px solid rgba(59,130,246,.28); }
    .ar-h4-icon-4 { background: rgba(44,156,76,.14); border: 2px solid rgba(44,156,76,.35); }
    .ar-h4-tier { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
    .ar-h4-tier-1 { color: #b45309; } .ar-h4-tier-2 { color: #6d28d9; } .ar-h4-tier-3 { color: #1d4ed8; } .ar-h4-tier-4 { color: #15803d; }
    .ar-h4-name { font-size: 1.1rem; font-weight: 900; font-family: 'Plus Jakarta Sans',sans-serif; color: var(--dark-text); margin-bottom: .5rem; }
    .ar-h4-desc { font-size: .8rem; color: #6b7280; line-height: 1.6; margin-bottom: 1rem; flex: 1; }
    .ar-h4-create-lbl { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin-bottom: .4rem; }
    .ar-h4-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
    .ar-h4-tag { font-size: .62rem; font-weight: 700; border-radius: 9999px; padding: .18rem .55rem; line-height: 1.4; background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.06); color: #4b5563; }
    .ar-h4-tag-none { font-size: .62rem; font-weight: 700; color: #9ca3af; font-style: italic; }

    /* ══════════════════════════════════════════════
       ALPHA — PREMIUM FEATURE CARDS (shared with multi-level mgmt)
    ══════════════════════════════════════════════ */
    .mr-feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
    @media (max-width: 1023px) { .mr-feat-grid { grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 639px)  { .mr-feat-grid { grid-template-columns: 1fr; } }
    .mr-feat-card { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 1.6rem 1.3rem; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
    .mr-feat-card:hover { border-color: rgba(44,156,76,.35); box-shadow: 0 8px 28px -8px rgba(44,156,76,.15); transform: translateY(-3px); }
    .mr-feat-icon-wrap { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
    .mr-feat-title { font-size: .97rem; font-weight: 800; color: var(--dark-text); margin-bottom: .35rem; font-family: 'Plus Jakarta Sans',sans-serif; }
    .mr-feat-desc { font-size: .8rem; color: #6b7280; line-height: 1.6; }

    /* ══════════════════════════════════════════════
       ALPHA — POSITIONING TABLE (Reseller vs Master vs Alpha)
    ══════════════════════════════════════════════ */
    .ar-vs-wrap { border: 1.5px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px -10px rgba(44,156,76,.10); }
    .ar-vs-row { display: grid; grid-template-columns: minmax(150px,1.5fr) 1fr 1fr 1fr; align-items: center; }
    .ar-vs-head { background: #f8fdf9; border-bottom: 1.5px solid var(--border); padding: 1rem 1.1rem; }
    .ar-vs-body-row { padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); transition: background .2s; }
    .ar-vs-body-row:last-child { border-bottom: none; }
    .ar-vs-body-row:nth-child(even) { background: #fafafa; }
    .ar-vs-body-row:hover { background: #f0fdf4; }
    .ar-vs-feat-h { font-size: .72rem; font-weight: 700; color: var(--light-text); text-transform: uppercase; letter-spacing: .06em; }
    .ar-vs-feat { font-size: .85rem; color: var(--dark-text); font-weight: 500; }
    .ar-vs-col { text-align: center; }
    .ar-vs-plan { font-size: .8rem; font-weight: 800; padding: .45rem .7rem; border-radius: 10px; display: inline-flex; align-items: center; gap: .35rem; font-family: 'Plus Jakarta Sans',sans-serif; flex-wrap: wrap; justify-content: center; line-height: 1.3; }
    .ar-vs-plan-a { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
    .ar-vs-plan-b { background: linear-gradient(135deg,#ede9fe,#faf5ff); color: #6d28d9; border: 1px solid rgba(139,92,246,.25); }
    .ar-vs-plan-c { background: linear-gradient(135deg,#fef3c7,#fffbeb); color: #b45309; border: 1px solid rgba(251,191,36,.4); }
    .ar-vs-top { font-size: .54rem; background: #fbbf24; color: #422006; border-radius: 9999px; padding: .1rem .5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
    .ar-vs-check { display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; color: var(--brand-600); }
    .ar-vs-cross { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fee2e2; color: #dc2626; font-size: .8rem; font-weight: 800; }
    .ar-vs-feat-c { background: rgba(251,191,36,.05); }
    @media (max-width: 639px) {
      .ar-vs-row { grid-template-columns: minmax(110px,1.3fr) 1fr 1fr 1fr; }
      .ar-vs-head, .ar-vs-body-row { padding: .7rem .55rem; }
      .ar-vs-feat { font-size: .74rem; }
      .ar-vs-plan { font-size: .62rem; padding: .3rem .4rem; }
    }

    /* ══════════════════════════════════════════════
       WORKFLOW / HOW IT WORKS (rh-wf-*)
    ══════════════════════════════════════════════ */
    .rh-wf-section { background: linear-gradient(160deg,#0a1a10 0%,#0d2016 50%,#081510 100%); }
    .rh-wf-track { display: grid; grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr; align-items: start; gap: .5rem; }
    @media (max-width: 767px) { .rh-wf-track { grid-template-columns: 1fr; gap: 1rem; } .rh-wf-connector { transform: rotate(90deg); margin: 0 auto; } }
    .rh-wf-step { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 1.7rem 1.2rem; text-align: center; transition: border-color .25s; }
    .rh-wf-step:hover { border-color: rgba(44,156,76,.3); }
    .rh-wf-num { font-size: 2rem; font-weight: 900; color: rgba(57,185,90,.16); font-family: 'Plus Jakarta Sans',sans-serif; line-height: 1; margin-bottom: .55rem; }
    .rh-wf-icon { width: 50px; height: 50px; background: rgba(44,156,76,.15); border: 1.5px solid rgba(44,156,76,.3); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto .85rem; }
    .rh-wf-title { font-size: .98rem; font-weight: 800; color: #fff; font-family: 'Plus Jakarta Sans',sans-serif; margin-bottom: .45rem; }
    .rh-wf-desc { font-size: .77rem; line-height: 1.65; color: rgba(255,255,255,.52); margin-bottom: .7rem; }
    .rh-wf-tag { display: inline-block; font-size: .6rem; font-weight: 700; background: rgba(44,156,76,.2); color: #4ade80; border: 1px solid rgba(44,156,76,.3); border-radius: 9999px; padding: .2rem .6rem; }
    .rh-wf-connector { display: flex; align-items: center; justify-content: center; padding-top: 3.8rem; color: rgba(57,185,90,.35); }

    /* ══════════════════════════════════════════════
       WHITE LABEL MOCK PANEL (rh-wl-*)
    ══════════════════════════════════════════════ */
    .rh-wl-mock { background: linear-gradient(135deg,#0a1a10 0%,#152818 100%); border: 1px solid rgba(44,156,76,.3); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(10,50,25,.5); }
    .rh-wl-mock-bar { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); padding: .5rem .9rem; display: flex; align-items: center; gap: .45rem; }
    .rh-wl-mock-body { padding: .9rem 1rem; }
    .rh-wl-brand-row { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: .6rem .85rem; display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }
    .rh-wl-logo-chip { width: 28px; height: 28px; background: rgba(251,191,36,.25); border: 1px solid rgba(251,191,36,.5); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 900; color: #fcd34d; flex-shrink: 0; }
    .rh-wl-brand-name { font-size: .7rem; font-weight: 800; color: #fff; }
    .rh-wl-brand-sub { font-size: .56rem; color: rgba(255,255,255,.4); }
    .rh-wl-client-row { display: flex; align-items: center; gap: .45rem; padding: .38rem .85rem; border-bottom: 1px solid rgba(255,255,255,.05); }
    .rh-wl-client-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 5px rgba(57,185,90,.5); flex-shrink: 0; }
    .rh-wl-client-name { font-size: .6rem; color: rgba(255,255,255,.65); flex: 1; font-family: monospace; }
    .rh-wl-client-tag { font-size: .5rem; font-weight: 700; background: rgba(44,156,76,.15); color: #4ade80; border-radius: 4px; padding: .08rem .28rem; flex-shrink: 0; }
    .rh-wl-notice { background: rgba(44,156,76,.1); border: 1px solid rgba(44,156,76,.25); border-radius: 8px; padding: .5rem .8rem; font-size: .6rem; font-weight: 600; color: rgba(57,185,90,.9); text-align: center; margin-top: .7rem; }
    .rh-wl-point { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
    .rh-wl-point:last-child { border-bottom: none; }
    .rh-wl-check-wrap { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; background: rgba(44,156,76,.12); border: 1.5px solid rgba(44,156,76,.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .18rem; }

    /* ══════════════════════════════════════════════
       WHO IS IT FOR CARDS (rh-for-*)
    ══════════════════════════════════════════════ */
    .rh-for-card { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 1.6rem 1.2rem; text-align: center; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
    .rh-for-card:hover { border-color: rgba(44,156,76,.4); box-shadow: 0 8px 32px -8px rgba(44,156,76,.18); transform: translateY(-4px); }
    .rh-for-icon { width: 56px; height: 56px; background: linear-gradient(135deg,#edf9f1,#d6eedf); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto .9rem; font-size: 1.5rem; }
    .rh-for-title { font-size: .97rem; font-weight: 800; color: var(--dark-text); margin-bottom: .3rem; }
    .rh-for-desc { font-size: .78rem; color: #6b7280; line-height: 1.55; }

    /* ══════════════════════════════════════════════
       ENTERPRISE INFRASTRUCTURE (mr-infra-*)
    ══════════════════════════════════════════════ */
    .mr-infra-section { background: linear-gradient(160deg,#0a1a10 0%,#0d2016 50%,#081510 100%); position: relative; overflow: hidden; }
    .mr-infra-section::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(57,185,90,.07) 1px, transparent 0); background-size: 28px 28px; pointer-events: none; }
    .mr-infra-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
    @media (max-width: 1023px) { .mr-infra-grid { grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 479px)  { .mr-infra-grid { grid-template-columns: 1fr; } }
    .mr-infra-card { background: rgba(255,255,255,.04); border: 1px solid rgba(57,185,90,.16); border-radius: 16px; padding: 1.8rem 1.3rem; text-align: center; position: relative; overflow: hidden; transition: transform .35s ease, border-color .35s, background .35s; }
    .mr-infra-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(57,185,90,.12), transparent 70%); opacity: 0; transition: opacity .35s ease; }
    .mr-infra-card:hover { transform: translateY(-6px); border-color: rgba(57,185,90,.4); background: rgba(57,185,90,.07); }
    .mr-infra-card:hover::before { opacity: 1; }
    .mr-infra-icon { font-size: 2.25rem; margin-bottom: .9rem; display: block; }
    .mr-infra-title { font-size: .97rem; font-weight: 800; color: #fff; font-family: 'Plus Jakarta Sans',sans-serif; margin-bottom: .55rem; }
    .mr-infra-desc { font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: 1.1rem; }
    .mr-infra-stat { display: inline-block; font-size: .68rem; font-weight: 800; color: #4ade80; background: rgba(57,185,90,.15); border: 1px solid rgba(57,185,90,.3); border-radius: 9999px; padding: .25rem .8rem; text-transform: uppercase; letter-spacing: .06em; }

    /* ══════════════════════════════════════════════
       BUILD YOUR EMPIRE — metric cards on dark band
    ══════════════════════════════════════════════ */
    .ar-empire-section { background: linear-gradient(160deg,#0a1a10 0%,#0d2016 50%,#081510 100%); position: relative; overflow: hidden; }
    .ar-empire-metric { background: rgba(255,255,255,.05); border: 1px solid rgba(57,185,90,.18); border-radius: 14px; padding: 1.2rem 1rem; text-align: center; }
    .ar-empire-metric-val { font-size: 1.6rem; font-weight: 900; color: #4ade80; font-family: 'Plus Jakarta Sans',sans-serif; line-height: 1; }
    .ar-empire-metric-lbl { font-size: .72rem; color: rgba(255,255,255,.55); margin-top: .4rem; font-weight: 500; }

    /* ══════════════════════════════════════════════
       PLAN COMPARISON TABLE (rh-cmp-*)
    ══════════════════════════════════════════════ */
    .rh-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; }
    .rh-cmp-outer { min-width: 660px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; }
    .rh-cmp-head { position: sticky; top: 72px; z-index: 10; background: rgba(12,28,17,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.12); }
    .rh-cmp-head-row { display: grid; grid-template-columns: 185px repeat(4,1fr); }
    .rh-cmp-head-feat { padding: 1.1rem .85rem; display: flex; align-items: flex-end; }
    .rh-cmp-head-feat span { font-size: .67rem; font-weight: 700; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: .07em; }
    .rh-cmp-head-plan { text-align: center; padding: .85rem .55rem; border-left: 1px solid rgba(255,255,255,.07); }
    .rh-cmp-head-featured { background: rgba(44,156,76,.09); border-left: 1px solid rgba(44,156,76,.22) !important; border-right: 1px solid rgba(44,156,76,.22); }
    .rh-cmp-featured-tag { font-size: .56rem; font-weight: 700; background: rgba(44,156,76,.25); color: #4ade80; border-radius: 9999px; padding: .1rem .4rem; display: inline-block; margin-bottom: .28rem; }
    .rh-cmp-plan-name { font-size: .8rem; font-weight: 800; color: #fff; margin-bottom: .2rem; }
    .rh-cmp-plan-price { font-size: 1.05rem; font-weight: 900; color: #4ade80; line-height: 1.15; margin-bottom: .42rem; }
    .rh-cmp-plan-price span { font-size: .7rem; color: rgba(255,255,255,.42); font-weight: 500; }
    .rh-cmp-btn-primary { display: block; font-size: .68rem; font-weight: 700; background: var(--brand-600); color: #fff; border-radius: 7px; padding: .38rem .6rem; transition: background .2s; text-align: center; }
    .rh-cmp-btn-primary:hover { background: var(--brand-700); }
    .rh-cmp-btn-outline { display: block; font-size: .68rem; font-weight: 700; border: 1.5px solid rgba(255,255,255,.22); color: rgba(255,255,255,.82); border-radius: 7px; padding: .36rem .6rem; transition: border-color .2s, color .2s; text-align: center; }
    .rh-cmp-btn-outline:hover { border-color: rgba(255,255,255,.45); color: #fff; }
    .rh-cmp-acc { border-bottom: 1px solid rgba(255,255,255,.07); }
    .rh-cmp-acc:last-of-type { border-bottom: none; }
    .rh-cmp-acc-trig { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; width: 100%; cursor: pointer; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.85); background: none; border: none; text-align: left; transition: background .2s; }
    .rh-cmp-acc-trig:hover { background: rgba(255,255,255,.04); }
    .rh-cmp-acc-body { display: none; }
    .rh-cmp-acc.open .rh-cmp-acc-body { display: block; }
    .rh-cmp-acc-chev { margin-left: auto; flex-shrink: 0; transition: transform .25s; color: rgba(255,255,255,.4); }
    .rh-cmp-acc.open .rh-cmp-acc-chev { transform: rotate(180deg); }
    .rh-cmp-acc-cnt { font-size: .6rem; color: rgba(255,255,255,.35); background: rgba(255,255,255,.07); border-radius: 9999px; padding: .1rem .38rem; font-weight: 600; flex-shrink: 0; }
    .rh-cmp-row { display: grid; grid-template-columns: 185px repeat(4,1fr); border-bottom: 1px solid rgba(255,255,255,.05); transition: background .15s; }
    .rh-cmp-row:last-child { border-bottom: none; }
    .rh-cmp-row:hover { background: rgba(255,255,255,.024); }
    .rh-cmp-cell { padding: .58rem .85rem; font-size: .73rem; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,.05); min-height: 38px; }
    .rh-cmp-cell:first-child { justify-content: flex-start; border-left: none; gap: .38rem; color: rgba(255,255,255,.7); font-weight: 500; }
    .rh-cmp-cell-icon { color: rgba(255,255,255,.28); flex-shrink: 0; }
    .rh-cmp-feat-col { background: rgba(44,156,76,.06); border-left: 1px solid rgba(44,156,76,.15) !important; border-right: 1px solid rgba(44,156,76,.15) !important; }
    .rh-cmp-check { color: #4ade80; font-weight: 800; font-size: .9rem; }
    .rh-cmp-cross { color: rgba(255,255,255,.22); font-size: .82rem; }
    .rh-cmp-val { color: #e5e7eb; font-weight: 600; font-size: .73rem; text-align: center; }
    .rh-cmp-val-hl { color: #4ade80; font-weight: 700; font-size: .73rem; text-align: center; }
    .rh-cmp-footer-row { display: grid; grid-template-columns: 185px repeat(4,1fr); background: rgba(0,0,0,.18); border-top: 1px solid rgba(255,255,255,.1); }
    .rh-cmp-footer-cell { padding: .85rem .55rem; text-align: center; border-left: 1px solid rgba(255,255,255,.06); }
    .rh-cmp-footer-cell:first-child { border-left: none; }
    .rh-cmp-footer-featured { background: rgba(44,156,76,.08); border-left: 1px solid rgba(44,156,76,.18) !important; border-right: 1px solid rgba(44,156,76,.18) !important; }


/* =====================================================================
   MASTER RESELLER HOSTING — Page-Specific Styles
   ===================================================================== */
/* ══════════════════════════════════════════════
       MASTER RESELLER — Hero Illustration
       Master Control Center with hierarchy nodes
    ══════════════════════════════════════════════ */
    .mr-dash {
      background: linear-gradient(135deg, #080f14 0%, #0e1e12 50%, #080f14 100%);
      border-radius: 20px;
      border: 1px solid rgba(44,156,76,.35);
      box-shadow: 0 0 0 1px rgba(57,185,90,.1), 0 32px 80px -20px rgba(5,30,15,.65);
      overflow: hidden;
      position: relative;
    }
    .mr-dash::before {
      content: '';
      position: absolute;
      top: -60px; left: 50%;
      transform: translateX(-50%);
      width: 260px; height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(57,185,90,.10) 0%, transparent 70%);
      pointer-events: none;
    }
    .mr-dash-header {
      background: rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.08);
      padding: .55rem 1rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .mr-dash-title {
      font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.4);
      text-transform: uppercase; letter-spacing: .07em; margin-left: .4rem;
    }
    .mr-dash-body { padding: 1rem; }

    /* Hierarchy network */
    .mr-hier-network { position: relative; padding: .4rem 0 .6rem; }

    /* Master node */
    .mr-master-node {
      display: flex;
      align-items: center;
      gap: .55rem;
      background: linear-gradient(135deg, rgba(44,156,76,.2), rgba(44,156,76,.08));
      border: 1.5px solid rgba(44,156,76,.45);
      border-radius: 10px;
      padding: .5rem .75rem;
      margin-bottom: .5rem;
    }
    .mr-master-badge {
      width: 32px; height: 32px;
      background: rgba(44,156,76,.3);
      border: 1.5px solid rgba(57,185,90,.5);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .mr-master-label { font-size: .68rem; font-weight: 800; color: #4ade80; font-family: 'Plus Jakarta Sans',sans-serif; }
    .mr-master-sub   { font-size: .54rem; color: rgba(255,255,255,.4); margin-top: .05rem; }
    .mr-master-badge-pill { margin-left: auto; font-size: .5rem; font-weight: 700; background: rgba(44,156,76,.25); color: #4ade80; border: 1px solid rgba(44,156,76,.4); border-radius: 9999px; padding: .08rem .35rem; white-space: nowrap; }

    /* Connector line */
    .mr-connector { display: flex; align-items: center; gap: .4rem; padding: 0 .5rem .35rem; }
    .mr-connector-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(44,156,76,.3), rgba(44,156,76,.08)); }
    .mr-connector-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(44,156,76,.5); flex-shrink: 0; }

    /* Reseller row */
    .mr-reseller-row { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-bottom: .45rem; }
    .mr-res-node {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 8px;
      padding: .38rem .55rem;
    }
    .mr-res-node:hover { border-color: rgba(44,156,76,.3); }
    .mr-res-title { font-size: .58rem; font-weight: 700; color: rgba(255,255,255,.75); margin-bottom: .18rem; }
    .mr-res-stat  { font-size: .52rem; color: rgba(255,255,255,.38); }
    .mr-res-dot   { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 4px rgba(57,185,90,.6); margin-right: .25rem; vertical-align: middle; animation: mr-pulse 2.2s ease-in-out infinite; }
    .mr-res-dot.d2 { animation-delay: .5s; }
    .mr-res-dot.d3 { animation-delay: 1s; }
    .mr-res-dot.d4 { animation-delay: 1.5s; }
    @keyframes mr-pulse {
      0%,100% { opacity:1; box-shadow:0 0 4px rgba(57,185,90,.6); }
      50%      { opacity:.5; box-shadow:0 0 8px rgba(57,185,90,.3); }
    }

    /* Client grid */
    .mr-client-row { display: grid; grid-template-columns: repeat(4,1fr); gap: .28rem; margin-bottom: .55rem; }
    .mr-client-chip {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 6px;
      padding: .22rem .35rem;
      text-align: center;
      font-size: .5rem; font-weight: 600;
      color: rgba(255,255,255,.45);
      font-family: monospace;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Stat row */
    .mr-stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .42rem; margin-bottom: .7rem; }
    .mr-stat-card {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 8px;
      padding: .45rem .55rem;
    }
    .mr-stat-lbl { font-size: .54rem; font-weight: 700; color: rgba(255,255,255,.32); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .15rem; }
    .mr-stat-val { font-size: .92rem; font-weight: 800; color: #4ade80; font-family: 'Plus Jakarta Sans',sans-serif; line-height: 1.1; }
    .mr-stat-val span { font-size: .58rem; color: rgba(255,255,255,.3); font-weight: 500; }

    /* Chips */
    .mr-chips { display: flex; flex-wrap: wrap; gap: .28rem; margin-bottom: .6rem; }
    .mr-chip {
      font-size: .54rem; font-weight: 700;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 9999px;
      padding: .13rem .42rem;
      color: rgba(255,255,255,.48);
    }

    /* Bottom strip */
    .mr-strip { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.07); padding-top: .5rem; }
    .mr-strip-item { text-align: center; }
    .mr-strip-val { font-size: .8rem; font-weight: 800; color: #fff; font-family: 'Plus Jakarta Sans',sans-serif; }
    .mr-strip-val span { color: #4ade80; }
    .mr-strip-lbl { font-size: .49rem; font-weight: 600; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .06em; margin-top: .08rem; }

    /* ── Plan icons ── */
    .mr-plan-icon {
      width: 52px; height: 52px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .mr-icon-basic    { background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25); }
    .mr-icon-advance  { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25); }
    .mr-icon-supreme  { background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.25); }
    .mr-icon-unlimited{ background: rgba(44,156,76,.12);  border: 1px solid rgba(44,156,76,.28);  }

    /* ── 4-option billing toggle: 2×2 on very small screens ── */
    @media (max-width: 479px) {
      .mr-billing-grid.billing-toggle {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: .3rem;
      }
      .mr-billing-grid .billing-btn {
        border-radius: 9px !important;
        font-size: .7rem !important;
        padding: .55rem .4rem !important;
        line-height: 1.25 !important;
      }
    }

    /* ── Save badge inside plan card ── */
    .mr-save-badge {
      display: inline-block;
      font-size: .65rem; font-weight: 700;
      background: linear-gradient(135deg, #dcfce7, #bbf7d0);
      color: #15803d;
      border-radius: 9999px;
      padding: .1rem .55rem;
      margin-left: .3rem;
    }

    /* ══════════════════════════════════════════════
       MASTER RESELLER — Hierarchy Section
    ══════════════════════════════════════════════ */
    .mr-hier-section { background: #fff; }
    .mr-hier-grid {
      display: grid;
      grid-template-columns: 1fr 52px 1fr 52px 1fr;
      align-items: center;
      gap: 1rem;
    }
    /* Tablet: collapse to single column earlier */
    @media (max-width: 900px) {
      .mr-hier-grid { grid-template-columns: 1fr; gap: 0; }
      .mr-hier-arrow { transform: rotate(90deg); margin: .75rem auto; display: flex; justify-content: center; }
    }
    .mr-hier-card {
      border-radius: 20px;
      padding: 2rem 1.5rem;
      text-align: center;
      border: 2px solid transparent;
      transition: transform .25s ease, box-shadow .25s ease;
      /* Prevent overlap by ensuring block display */
      display: block;
      position: relative;
      z-index: 1;
    }
    .mr-hier-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px -10px rgba(0,0,0,.12); }
    .mr-hier-card-1 { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border-color: rgba(44,156,76,.3); }
    .mr-hier-card-2 { background: linear-gradient(135deg,#eff6ff,#dbeafe); border-color: rgba(59,130,246,.25); }
    .mr-hier-card-3 { background: linear-gradient(135deg,#faf5ff,#ede9fe); border-color: rgba(139,92,246,.25); }
    .mr-hier-icon-wrap {
      width: 64px; height: 64px;
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1rem;
      flex-shrink: 0;
    }
    .mr-hier-icon-1 { background: rgba(44,156,76,.15); border: 2px solid rgba(44,156,76,.35); }
    .mr-hier-icon-2 { background: rgba(59,130,246,.12); border: 2px solid rgba(59,130,246,.28); }
    .mr-hier-icon-3 { background: rgba(139,92,246,.12); border: 2px solid rgba(139,92,246,.28); }
    .mr-hier-label { font-size: 1.05rem; font-weight: 900; font-family: 'Plus Jakarta Sans',sans-serif; margin-bottom: .4rem; line-height: 1.3; }
    .mr-hier-label-1 { color: #15803d; }
    .mr-hier-label-2 { color: #1d4ed8; }
    .mr-hier-label-3 { color: #7c3aed; }
    .mr-hier-desc  { font-size: .8rem; color: #6b7280; line-height: 1.65; margin-bottom: 1rem; }
    .mr-hier-tags  { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
    .mr-hier-tag   { font-size: .6rem; font-weight: 700; border-radius: 9999px; padding: .18rem .6rem; line-height: 1.4; }
    .mr-hier-tag-1 { background: rgba(44,156,76,.12); color: #15803d; border: 1px solid rgba(44,156,76,.25); }
    .mr-hier-tag-2 { background: rgba(59,130,246,.1); color: #1d4ed8; border: 1px solid rgba(59,130,246,.2); }
    .mr-hier-tag-3 { background: rgba(139,92,246,.1); color: #7c3aed; border: 1px solid rgba(139,92,246,.2); }
    .mr-hier-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      color: rgba(44,156,76,.5);
    }

    /* ══════════════════════════════════════════════
       MASTER RESELLER — Workflow
       Reusing rh-wf-* classes from cpanel page
    ══════════════════════════════════════════════ */
    .mr-wf-section { background: linear-gradient(160deg,#0a1a10 0%,#0d2016 50%,#081510 100%); }

    /* ══════════════════════════════════════════════
       MASTER RESELLER — Comparison Table
       Reusing rh-cmp-* classes
    ══════════════════════════════════════════════ */

    /* ══════════════════════════════════════════════
       MASTER RESELLER — Who Is It For Cards
       Reusing rh-for-* classes
    ══════════════════════════════════════════════ */

    /* ══════════════════════════════════════════════
       MASTER RESELLER — White Label Mock
       Reusing rh-wl-* classes
    ══════════════════════════════════════════════ */

    /* ══════════════════════════════════════════════
       MASTER RESELLER — Benefits Feature Cards
    ══════════════════════════════════════════════ */
    .mr-feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
    @media (max-width: 1023px) { .mr-feat-grid { grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 639px)  { .mr-feat-grid { grid-template-columns: 1fr; } }
    .mr-feat-card {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 1.6rem 1.3rem;
      transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .mr-feat-card:hover { border-color: rgba(44,156,76,.35); box-shadow: 0 8px 28px -8px rgba(44,156,76,.15); transform: translateY(-3px); }
    .mr-feat-icon-wrap { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
    .mr-feat-title { font-size: .97rem; font-weight: 800; color: var(--dark-text); margin-bottom: .35rem; font-family: 'Plus Jakarta Sans',sans-serif; }
    .mr-feat-desc  { font-size: .8rem; color: #6b7280; line-height: 1.6; }

    /* ══════════════════════════════════════════════
       MASTER RESELLER — vs Standard Reseller Table
    ══════════════════════════════════════════════ */
    .mr-vs-wrap {
      border: 1.5px solid var(--border);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 8px 30px -10px rgba(44,156,76,.10);
    }
    .mr-vs-header-row {
      display: grid; grid-template-columns: 1fr 180px 220px;
      background: #f8fdf9;
      border-bottom: 1.5px solid var(--border);
      padding: 1rem 1.5rem;
      align-items: center;
    }
    .mr-vs-row {
      display: grid; grid-template-columns: 1fr 180px 220px;
      padding: .85rem 1.5rem;
      border-bottom: 1px solid var(--border);
      align-items: center;
      transition: background .2s;
    }
    .mr-vs-row:last-child { border-bottom: none; }
    .mr-vs-row:nth-child(even) { background: #fafafa; }
    .mr-vs-row:hover { background: #f0fdf4; }
    .mr-vs-feature-col { font-size: .75rem; font-weight: 700; color: var(--light-text); text-transform: uppercase; letter-spacing: .06em; }
    .mr-vs-std-col, .mr-vs-master-col { text-align: center; }
    .mr-vs-feature { font-size: .88rem; color: var(--dark-text); font-weight: 500; }
    .mr-vs-std, .mr-vs-master { text-align: center; }
    .mr-vs-plan-label { font-size: .85rem; font-weight: 800; padding: .5rem 1rem; border-radius: 10px; display: inline-flex; align-items: center; gap: .45rem; font-family: 'Plus Jakarta Sans',sans-serif; flex-wrap: wrap; justify-content: center; }
    .mr-vs-plan-std { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
    .mr-vs-plan-master { background: linear-gradient(135deg,#d6eedf,#edf9f1); color: var(--brand-700); border: 1px solid rgba(44,156,76,.25); }
    .mr-vs-recommended { font-size: .58rem; background: var(--brand-500); color: #fff; border-radius: 9999px; padding: .1rem .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
    .mr-vs-check { display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; color: var(--brand-600); }
    .mr-vs-cross { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fee2e2; color: #dc2626; font-size: .8rem; font-weight: 800; }
    .mr-vs-partial { font-size: .72rem; font-weight: 700; color: #d97706; background: #fef9c3; border-radius: 9999px; padding: .15rem .55rem; border: 1px solid #fde68a; }
    @media (max-width: 639px) {
      .mr-vs-header-row, .mr-vs-row { grid-template-columns: 1fr 80px 100px; padding: .7rem .85rem; gap: .5rem; }
      .mr-vs-feature { font-size: .78rem; }
      .mr-vs-plan-label { font-size: .7rem; padding: .35rem .5rem; }
    }

    /* ══════════════════════════════════════════════
       MASTER RESELLER — Infrastructure Section
    ══════════════════════════════════════════════ */
    .mr-infra-section {
      background: linear-gradient(160deg,#0a1a10 0%,#0d2016 50%,#081510 100%);
      position: relative; overflow: hidden;
    }
    .mr-infra-section::before {
      content: "";
      position: absolute; inset: 0;
      background-image: radial-gradient(circle at 1px 1px, rgba(57,185,90,.07) 1px, transparent 0);
      background-size: 28px 28px;
      pointer-events: none;
    }
    .mr-infra-grid {
      display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem;
    }
    @media (max-width: 1023px) { .mr-infra-grid { grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 479px)  { .mr-infra-grid { grid-template-columns: 1fr; } }
    .mr-infra-card {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(57,185,90,.16);
      border-radius: 16px;
      padding: 1.8rem 1.3rem;
      text-align: center;
      position: relative; overflow: hidden;
      transition: transform .35s ease, border-color .35s, background .35s;
    }
    .mr-infra-card::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(57,185,90,.12), transparent 70%);
      opacity: 0; transition: opacity .35s ease;
    }
    .mr-infra-card:hover { transform: translateY(-6px); border-color: rgba(57,185,90,.4); background: rgba(57,185,90,.07); }
    .mr-infra-card:hover::before { opacity: 1; }
    .mr-infra-icon { font-size: 2.25rem; margin-bottom: .9rem; display: block; }
    .mr-infra-title { font-size: .97rem; font-weight: 800; color: #fff; font-family: 'Plus Jakarta Sans',sans-serif; margin-bottom: .55rem; }
    .mr-infra-desc { font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: 1.1rem; }
    .mr-infra-stat { display: inline-block; font-size: .68rem; font-weight: 800; color: #4ade80; background: rgba(57,185,90,.15); border: 1px solid rgba(57,185,90,.3); border-radius: 9999px; padding: .25rem .8rem; text-transform: uppercase; letter-spacing: .06em; }

    /* ══════════════════════════════════════════════
       WINDOW CHROME DOTS  (shared uh-dot / traffic-light)
    ══════════════════════════════════════════════ */
    .uh-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .uh-dot-r { background: #ff5f57; }
    .uh-dot-y { background: #ffbd2e; }
    .uh-dot-g { background: #28c840; }

    /* ══════════════════════════════════════════════
       WORKFLOW / HOW IT WORKS  (rh-wf-*)
    ══════════════════════════════════════════════ */
    .rh-wf-section { background: linear-gradient(160deg,#0a1a10 0%,#0d2016 50%,#081510 100%); }
    .rh-wf-track {
      display: grid;
      grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr;
      align-items: start;
      gap: .5rem;
    }
    @media (max-width: 767px) {
      .rh-wf-track { grid-template-columns: 1fr; gap: 1rem; }
      .rh-wf-connector { transform: rotate(90deg); margin: 0 auto; }
    }
    .rh-wf-step {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 16px;
      padding: 1.7rem 1.2rem;
      text-align: center;
      transition: border-color .25s;
    }
    .rh-wf-step:hover { border-color: rgba(44,156,76,.3); }
    .rh-wf-num {
      font-size: 2rem; font-weight: 900;
      color: rgba(57,185,90,.16);
      font-family: 'Plus Jakarta Sans',sans-serif;
      line-height: 1; margin-bottom: .55rem;
    }
    .rh-wf-icon {
      width: 50px; height: 50px;
      background: rgba(44,156,76,.15);
      border: 1.5px solid rgba(44,156,76,.3);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto .85rem;
    }
    .rh-wf-title { font-size: .98rem; font-weight: 800; color: #fff; font-family: 'Plus Jakarta Sans',sans-serif; margin-bottom: .45rem; }
    .rh-wf-desc  { font-size: .77rem; line-height: 1.65; color: rgba(255,255,255,.52); margin-bottom: .7rem; }
    .rh-wf-tag   { display: inline-block; font-size: .6rem; font-weight: 700; background: rgba(44,156,76,.2); color: #4ade80; border: 1px solid rgba(44,156,76,.3); border-radius: 9999px; padding: .2rem .6rem; }
    .rh-wf-connector { display: flex; align-items: center; justify-content: center; padding-top: 3.8rem; color: rgba(57,185,90,.35); }

    /* ══════════════════════════════════════════════
       WHITE LABEL MOCK PANEL  (rh-wl-*)
    ══════════════════════════════════════════════ */
    .rh-wl-mock {
      background: linear-gradient(135deg,#0a1a10 0%,#152818 100%);
      border: 1px solid rgba(44,156,76,.3);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 24px 60px -20px rgba(10,50,25,.5);
    }
    .rh-wl-mock-bar { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); padding: .5rem .9rem; display: flex; align-items: center; gap: .45rem; }
    .rh-wl-mock-body { padding: .9rem 1rem; }
    .rh-wl-brand-row { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: .6rem .85rem; display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }
    .rh-wl-logo-chip { width: 28px; height: 28px; background: rgba(44,156,76,.3); border: 1px solid rgba(44,156,76,.45); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 900; color: #4ade80; flex-shrink: 0; }
    .rh-wl-brand-name { font-size: .7rem; font-weight: 800; color: #fff; }
    .rh-wl-brand-sub  { font-size: .56rem; color: rgba(255,255,255,.4); }
    .rh-wl-client-row { display: flex; align-items: center; gap: .45rem; padding: .38rem .85rem; border-bottom: 1px solid rgba(255,255,255,.05); }
    .rh-wl-client-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 5px rgba(57,185,90,.5); flex-shrink: 0; }
    .rh-wl-client-name { font-size: .6rem; color: rgba(255,255,255,.65); flex: 1; font-family: monospace; }
    .rh-wl-client-tag  { font-size: .5rem; font-weight: 700; background: rgba(44,156,76,.15); color: #4ade80; border-radius: 4px; padding: .08rem .28rem; flex-shrink: 0; }
    .rh-wl-notice { background: rgba(44,156,76,.1); border: 1px solid rgba(44,156,76,.25); border-radius: 8px; padding: .5rem .8rem; font-size: .6rem; font-weight: 600; color: rgba(57,185,90,.9); text-align: center; margin-top: .7rem; }
    .rh-wl-point { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
    .rh-wl-point:last-child { border-bottom: none; }
    .rh-wl-check-wrap { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; background: rgba(44,156,76,.12); border: 1.5px solid rgba(44,156,76,.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .18rem; }

    /* ══════════════════════════════════════════════
       WHO IS IT FOR CARDS  (rh-for-*)
    ══════════════════════════════════════════════ */
    .rh-for-card {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 1.6rem 1.2rem;
      text-align: center;
      transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .rh-for-card:hover {
      border-color: rgba(44,156,76,.4);
      box-shadow: 0 8px 32px -8px rgba(44,156,76,.18);
      transform: translateY(-4px);
    }
    .rh-for-icon {
      width: 56px; height: 56px;
      background: linear-gradient(135deg,#edf9f1,#d6eedf);
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto .9rem;
      font-size: 1.5rem;
    }
    .rh-for-title { font-size: .97rem; font-weight: 800; color: var(--dark-text); margin-bottom: .3rem; }
    .rh-for-desc  { font-size: .78rem; color: #6b7280; line-height: 1.55; }

    /* ══════════════════════════════════════════════
       PLAN COMPARISON TABLE  (rh-cmp-*)
    ══════════════════════════════════════════════ */
    .rh-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; }
    .rh-cmp-outer { min-width: 660px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; }
    .rh-cmp-head { position: sticky; top: 72px; z-index: 10; background: rgba(12,28,17,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.12); }
    .rh-cmp-head-row { display: grid; grid-template-columns: 185px repeat(4,1fr); }
    .rh-cmp-head-feat { padding: 1.1rem .85rem; display: flex; align-items: flex-end; }
    .rh-cmp-head-feat span { font-size: .67rem; font-weight: 700; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: .07em; }
    .rh-cmp-head-plan { text-align: center; padding: .85rem .55rem; border-left: 1px solid rgba(255,255,255,.07); }
    .rh-cmp-head-featured { background: rgba(44,156,76,.09); border-left: 1px solid rgba(44,156,76,.22) !important; border-right: 1px solid rgba(44,156,76,.22); }
    .rh-cmp-featured-tag { font-size: .56rem; font-weight: 700; background: rgba(44,156,76,.25); color: #4ade80; border-radius: 9999px; padding: .1rem .4rem; display: inline-block; margin-bottom: .28rem; }
    .rh-cmp-plan-name  { font-size: .8rem; font-weight: 800; color: #fff; margin-bottom: .2rem; }
    .rh-cmp-plan-price { font-size: 1.05rem; font-weight: 900; color: #4ade80; line-height: 1.15; margin-bottom: .42rem; }
    .rh-cmp-plan-price span { font-size: .7rem; color: rgba(255,255,255,.42); font-weight: 500; }
    .rh-cmp-btn-primary { display: block; font-size: .68rem; font-weight: 700; background: var(--brand-600); color: #fff; border-radius: 7px; padding: .38rem .6rem; transition: background .2s; text-align: center; }
    .rh-cmp-btn-primary:hover { background: var(--brand-700); }
    .rh-cmp-btn-outline { display: block; font-size: .68rem; font-weight: 700; border: 1.5px solid rgba(255,255,255,.22); color: rgba(255,255,255,.82); border-radius: 7px; padding: .36rem .6rem; transition: border-color .2s, color .2s; text-align: center; }
    .rh-cmp-btn-outline:hover { border-color: rgba(255,255,255,.45); color: #fff; }
    .rh-cmp-acc { border-bottom: 1px solid rgba(255,255,255,.07); }
    .rh-cmp-acc:last-of-type { border-bottom: none; }
    .rh-cmp-acc-trig { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; width: 100%; cursor: pointer; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.85); background: none; border: none; text-align: left; transition: background .2s; }
    .rh-cmp-acc-trig:hover { background: rgba(255,255,255,.04); }
    .rh-cmp-acc-body { display: none; }
    .rh-cmp-acc.open .rh-cmp-acc-body { display: block; }
    .rh-cmp-acc-chev { margin-left: auto; flex-shrink: 0; transition: transform .25s; color: rgba(255,255,255,.4); }
    .rh-cmp-acc.open .rh-cmp-acc-chev { transform: rotate(180deg); }
    .rh-cmp-acc-cnt { font-size: .6rem; color: rgba(255,255,255,.35); background: rgba(255,255,255,.07); border-radius: 9999px; padding: .1rem .38rem; font-weight: 600; flex-shrink: 0; }
    .rh-cmp-row { display: grid; grid-template-columns: 185px repeat(4,1fr); border-bottom: 1px solid rgba(255,255,255,.05); transition: background .15s; }
    .rh-cmp-row:last-child { border-bottom: none; }
    .rh-cmp-row:hover { background: rgba(255,255,255,.024); }
    .rh-cmp-cell { padding: .58rem .85rem; font-size: .73rem; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,.05); min-height: 38px; }
    .rh-cmp-cell:first-child { justify-content: flex-start; border-left: none; gap: .38rem; color: rgba(255,255,255,.7); font-weight: 500; }
    .rh-cmp-cell-icon { color: rgba(255,255,255,.28); flex-shrink: 0; }
    .rh-cmp-feat-col { background: rgba(44,156,76,.06); border-left: 1px solid rgba(44,156,76,.15) !important; border-right: 1px solid rgba(44,156,76,.15) !important; }
    .rh-cmp-check { color: #4ade80; font-weight: 800; font-size: .9rem; }
    .rh-cmp-cross { color: rgba(255,255,255,.22); font-size: .82rem; }
    .rh-cmp-val    { color: #e5e7eb; font-weight: 600; font-size: .73rem; text-align: center; }
    .rh-cmp-val-hl { color: #4ade80; font-weight: 700; font-size: .73rem; text-align: center; }
    .rh-cmp-footer-row { display: grid; grid-template-columns: 185px repeat(4,1fr); background: rgba(0,0,0,.18); border-top: 1px solid rgba(255,255,255,.1); }
    .rh-cmp-footer-cell { padding: .85rem .55rem; text-align: center; border-left: 1px solid rgba(255,255,255,.06); }
    .rh-cmp-footer-cell:first-child { border-left: none; }
    .rh-cmp-footer-featured { background: rgba(44,156,76,.08); border-left: 1px solid rgba(44,156,76,.18) !important; border-right: 1px solid rgba(44,156,76,.18) !important; }


/* =====================================================================
   WHM ROOT SERVER — Page-Specific Styles
   ===================================================================== */
/* ══════════════════════════════════════════════
       WHM ROOT SERVER — Hero Illustration
       Root Control Panel · server rack + resource gauges
       (UNIQUE to this page — not reused from any other)
    ══════════════════════════════════════════════ */
    .ws-dash {
      background: linear-gradient(135deg, #070d12 0%, #0c1a13 50%, #070d12 100%);
      border-radius: 20px;
      border: 1px solid rgba(44,156,76,.35);
      box-shadow: 0 0 0 1px rgba(57,185,90,.1), 0 32px 80px -20px rgba(5,30,15,.65);
      overflow: hidden;
      position: relative;
    }
    .ws-dash::before {
      content: '';
      position: absolute; top: -70px; left: 50%;
      transform: translateX(-50%);
      width: 300px; height: 300px; border-radius: 50%;
      background: radial-gradient(circle, rgba(57,185,90,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .ws-dash-header { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); padding: .55rem 1rem; display: flex; align-items: center; gap: .5rem; }
    .ws-dash-title { font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.42); text-transform: uppercase; letter-spacing: .07em; margin-left: .4rem; }
    .ws-dash-root { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .52rem; font-weight: 700; color: #4ade80; background: rgba(57,185,90,.12); border: 1px solid rgba(57,185,90,.3); border-radius: 6px; padding: .12rem .45rem; font-family: monospace; }
    .ws-dash-root::before { content:''; width:5px; height:5px; border-radius:50%; background:#4ade80; box-shadow:0 0 5px rgba(57,185,90,.8); }
    .ws-dash-body { padding: 1rem; }

    /* Server rack + status */
    .ws-rack-row { display: flex; gap: .7rem; margin-bottom: .7rem; }
    .ws-rack { width: 88px; flex-shrink: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .5rem; display: flex; flex-direction: column; gap: .3rem; }
    .ws-rack-unit { height: 14px; border-radius: 4px; background: linear-gradient(90deg, rgba(57,185,90,.16), rgba(57,185,90,.04)); border: 1px solid rgba(57,185,90,.2); display: flex; align-items: center; padding: 0 .3rem; gap: .25rem; }
    .ws-rack-led { width: 4px; height: 4px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 4px rgba(57,185,90,.7); flex-shrink: 0; animation: ws-blink 1.8s ease-in-out infinite; }
    .ws-rack-unit:nth-child(2) .ws-rack-led { animation-delay: .35s; }
    .ws-rack-unit:nth-child(3) .ws-rack-led { animation-delay: .7s; }
    .ws-rack-unit:nth-child(4) .ws-rack-led { animation-delay: 1.05s; }
    .ws-rack-line { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); }
    @keyframes ws-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    .ws-rack-cap { font-size: .46rem; color: rgba(255,255,255,.4); text-align: center; margin-top: .15rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
    .ws-status { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
    .ws-status-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: .4rem .55rem; flex: 1; display: flex; align-items: center; gap: .45rem; }
    .ws-status-ico { width: 22px; height: 22px; border-radius: 6px; background: rgba(57,185,90,.15); border: 1px solid rgba(57,185,90,.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .ws-status-lbl { font-size: .5rem; color: rgba(255,255,255,.4); font-weight: 600; }
    .ws-status-val { font-size: .68rem; color: #fff; font-weight: 800; font-family: 'Plus Jakarta Sans',sans-serif; }
    .ws-status-val span { color: #4ade80; }

    /* Resource gauges */
    .ws-gauge-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .45rem; margin-bottom: .7rem; }
    .ws-gauge { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: .5rem .55rem; }
    .ws-gauge-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .3rem; }
    .ws-gauge-lbl { font-size: .5rem; font-weight: 700; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .05em; }
    .ws-gauge-val { font-size: .62rem; font-weight: 800; color: #4ade80; font-family: 'Plus Jakarta Sans',sans-serif; }
    .ws-gauge-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
    .ws-gauge-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2C9C4C, #4ade80); }

    /* CloudLinux limit chips */
    .ws-cl-head { font-size: .5rem; font-weight: 700; color: rgba(255,255,255,.32); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; display: flex; align-items: center; gap: .3rem; }
    .ws-cl-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; margin-bottom: .7rem; }
    .ws-cl-chip { background: rgba(57,185,90,.06); border: 1px solid rgba(57,185,90,.2); border-radius: 7px; padding: .32rem .4rem; text-align: center; }
    .ws-cl-chip-lbl { font-size: .45rem; color: rgba(255,255,255,.42); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
    .ws-cl-chip-val { font-size: .6rem; color: #e5e7eb; font-weight: 700; margin-top: .1rem; }

    /* Hosting accounts network */
    .ws-net { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: .5rem .6rem; margin-bottom: .65rem; }
    .ws-net-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
    .ws-net-title { font-size: .54rem; font-weight: 700; color: rgba(255,255,255,.55); }
    .ws-net-badge { font-size: .46rem; font-weight: 700; background: rgba(57,185,90,.15); color: #4ade80; border: 1px solid rgba(57,185,90,.3); border-radius: 9999px; padding: .08rem .35rem; }
    .ws-net-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: .26rem; }
    .ws-net-node { height: 16px; border-radius: 4px; background: rgba(57,185,90,.1); border: 1px solid rgba(57,185,90,.22); display: flex; align-items: center; justify-content: center; font-size: .4rem; font-weight: 700; color: rgba(74,222,128,.85); font-family: monospace; }

    /* Bottom strip */
    .ws-strip { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.07); padding-top: .5rem; }
    .ws-strip-item { text-align: center; }
    .ws-strip-val { font-size: .8rem; font-weight: 800; color: #fff; font-family: 'Plus Jakarta Sans',sans-serif; }
    .ws-strip-val span { color: #4ade80; }
    .ws-strip-lbl { font-size: .48rem; font-weight: 600; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .06em; margin-top: .08rem; }

    /* ── Plan card icons ── */
    .ws-plan-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .ws-icon-1 { background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25); }
    .ws-icon-2 { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25); }
    .ws-icon-3 { background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.25); }
    .ws-icon-4 { background: rgba(44,156,76,.12);  border: 1px solid rgba(44,156,76,.28); }

    /* ── 4-option billing toggle: 2×2 on very small screens ── */
    @media (max-width: 479px) {
      .ws-billing-grid.billing-toggle { display: grid !important; grid-template-columns: 1fr 1fr; gap: .3rem; }
      .ws-billing-grid .billing-btn { border-radius: 9px !important; font-size: .7rem !important; padding: .55rem .4rem !important; line-height: 1.25 !important; }
    }

    /* Hero spec ribbon */
    .ws-spec-ribbon { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin-top: 1.1rem; }
    .ws-spec-chip { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.78); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 9999px; padding: .2rem .65rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
    .ws-spec-chip svg { color: #4ade80; }

    @media (max-width: 380px) {
      .ws-gauge-row { grid-template-columns: 1fr; }
      .ws-net-grid { grid-template-columns: repeat(4,1fr); }
    }

/* Plan Comparison redesign */
    .wpc-wrap { background:#fff;border-radius:22px;border:1px solid rgba(44,156,76,.14);box-shadow:0 4px 6px -1px rgba(0,0,0,.04),0 24px 60px -20px rgba(16,94,48,.12);overflow:hidden }
    .wpc-grid { display:grid;grid-template-columns:minmax(120px,2fr) repeat(4,minmax(80px,1fr));min-width:580px }
    .wpc-hd-feat { background:#f8fdf9;padding:1rem 1.25rem;font-size:.65rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:flex-end }
    .wpc-hd-plan { padding:.85rem .6rem;text-align:center;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.3rem;border-left:1px solid #f0f9f2 }
    .wpc-hd-plan-name { font-size:.72rem;font-weight:800;color:#111827;line-height:1.2 }
    .wpc-hd-plan-sub  { font-size:.6rem;font-weight:600;color:#9ca3af }
    .wpc-hd-biz { background:linear-gradient(160deg,#166534 0%,#2C9C4C 100%);position:relative;border-left:none }
    .wpc-hd-biz .wpc-hd-plan-name { color:#fff }
    .wpc-hd-biz .wpc-hd-plan-sub  { color:rgba(255,255,255,.65) }
    .wpc-hd-biz::before { content:'★ Best Value';position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:#fff;color:#166534;font-size:.55rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .7rem;border-radius:0 0 8px 8px;white-space:nowrap;box-shadow:0 2px 6px rgba(22,101,52,.15) }
    /* Category trigger */
    .wpc-cat-trigger { width:100%;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.25rem;background:#f8fdf9;border:none;cursor:pointer;text-align:left;border-top:1px solid #e9f5ee;transition:background .15s }
    .wpc-cat-trigger:hover { background:#edf9f1 }
    .wpc-cat-icon { width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
    .wpc-cat-label { font-size:.8rem;font-weight:700;color:#1f2937;flex:1 }
    .wpc-cat-chevron { width:16px;height:16px;color:#2C9C4C;transition:transform .2s;flex-shrink:0 }
    .wpc-cat-trigger[aria-expanded="true"] .wpc-cat-chevron { transform:rotate(180deg) }
    /* Rows */
    .wpc-row { display:grid;grid-template-columns:minmax(120px,2fr) repeat(4,minmax(80px,1fr));border-top:1px solid #f3faf5;min-width:580px }
    .wpc-row:nth-child(even) { background:#fafffe }
    .wpc-row:nth-child(even) .wpc-cell-biz { background:rgba(44,156,76,.07) }
    .wpc-row:nth-child(odd)  .wpc-cell-biz { background:rgba(44,156,76,.05) }
    .wpc-feat-name { padding:.85rem 1.25rem;font-size:.78rem;font-weight:500;color:#374151 }
    .wpc-cell { padding:.85rem .5rem;text-align:center;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600;color:#374151;border-left:1px solid #f0f9f2 }
    .wpc-cell-biz { border-left:1px solid rgba(44,156,76,.14) }
    .wpc-val-green { color:#166534;font-weight:700 }
    /* Icons */
    .wpc-check { width:22px;height:22px;border-radius:50%;background:#2C9C4C;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0 }
    .wpc-cross { width:22px;height:22px;border-radius:50%;background:#fee2e2;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0 }
    /* Scroll container */
    .wpc-scroll { overflow-x:auto;-webkit-overflow-scrolling:touch }
    .wpc-scroll::-webkit-scrollbar { height:4px }
    .wpc-scroll::-webkit-scrollbar-track { background:#f0fdf4 }
    .wpc-scroll::-webkit-scrollbar-thumb { background:#a7f3d0;border-radius:4px }
    /* Body panel animation */
    .wpc-body { overflow:hidden;transition:max-height .3s ease }
    .wpc-body.wpc-collapsed { max-height:0 }

/* =====================================================================
   DOMAIN PAGE ADDITIONAL CSS
   ===================================================================== */

/* ---- Responsive breakpoints ---- */
@media (max-width: 1023px) {
  .hero-v2-inner { grid-template-columns: 1fr !important; }
  .dhv-right-col { display: none !important; }
}
@media (max-width: 767px) {
  .domain-transfer-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
}
@media (max-width: 1023px) {
  .why-domain-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .domain-search-btn { padding: 11px 16px !important; font-size: .82rem !important; }
  .tld-chips { gap: 6px; }
  .tld-chip { padding: 4px 11px; font-size: .73rem; }
  .alt-tld-grid { grid-template-columns: 1fr !important; }
  .ext-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .why-domain-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .ext-grid { grid-template-columns: 1fr !important; }
}

/* ---- Hero right side ---- */
.dhv-right-col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 460px;
  overflow: hidden;
}
.dhv-right-col::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(57,185,90,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,185,90,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: dhvGridShift 25s linear infinite;
  pointer-events: none;
}
.dhv-right-col::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(57,185,90,.2) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
@keyframes dhvGridShift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 40px 40px, 40px 40px; }
}
.dhv-chip-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 360px;
}
.dhv-chip-g {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(57,185,90,.2);
  border-radius: 14px;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.dhv-chip-g:hover { border-color: rgba(57,185,90,.5); box-shadow: 0 8px 28px rgba(57,185,90,.22); }
.dhv-chip-g.dhv-chip-feat { background: rgba(57,185,90,.13); border-color: rgba(57,185,90,.42); box-shadow: 0 4px 18px rgba(57,185,90,.18); }
.dhv-chip-g-tld { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: .95rem; color: #39B95A; line-height: 1; }
.dhv-chip-g-price { display: block; font-size: .62rem; font-weight: 500; color: rgba(255,255,255,.4); margin-top: 4px; }
.dhv-chip-g:nth-child(1) { animation: gFloat 4.2s ease-in-out infinite 0s; }
.dhv-chip-g:nth-child(2) { animation: gFloat 3.8s ease-in-out infinite .6s; }
.dhv-chip-g:nth-child(3) { animation: gFloat 4.5s ease-in-out infinite 1.2s; }
.dhv-chip-g:nth-child(4) { animation: gFloat 4.0s ease-in-out infinite 0.3s; }
.dhv-chip-g:nth-child(5) { animation: gFloat 3.6s ease-in-out infinite 0.9s; }
.dhv-chip-g:nth-child(6) { animation: gFloat 4.3s ease-in-out infinite 1.5s; }
.dhv-chip-g:nth-child(7) { animation: gFloat 4.1s ease-in-out infinite 0.5s; }
.dhv-chip-g:nth-child(8) { animation: gFloat 3.9s ease-in-out infinite 1.1s; }
.dhv-chip-g:nth-child(9) { animation: gFloat 4.4s ease-in-out infinite 1.7s; }
@keyframes gFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.dhv-chip-g:hover { animation: none; transform: translateY(-4px); }
.dhv-stats-bar {
  position: relative; z-index: 2;
  display: flex;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(57,185,90,.18);
  border-radius: 14px;
  overflow: hidden;
  width: 100%; max-width: 360px;
}
.dhv-stat { flex: 1; padding: 13px 8px; text-align: center; border-right: 1px solid rgba(57,185,90,.12); }
.dhv-stat:last-child { border-right: none; }
.dhv-stat-num { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1rem; color: #39B95A; line-height: 1; }
.dhv-stat-lbl { display: block; font-size: .6rem; color: rgba(255,255,255,.4); margin-top: 3px; }
.domain-search-box {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(57,185,90,.28);
  border-radius: 100px;
  padding: 6px 6px 6px 24px;
  display: flex; align-items: center; gap: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
.domain-search-box:focus-within { border-color: rgba(57,185,90,.75); box-shadow: 0 0 0 3px rgba(57,185,90,.14), 0 8px 32px rgba(57,185,90,.18); }
.domain-search-input { flex: 1; background: transparent; border: none; outline: none !important; -webkit-appearance: none; appearance: none; color: #fff; font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 500; min-width: 0; caret-color: #39B95A; -webkit-tap-highlight-color: transparent; }
.domain-search-input::placeholder { color: rgba(255,255,255,.3); font-weight: 400; }
.domain-search-input:focus, .domain-search-input:focus-visible { outline: none !important; box-shadow: none !important; }
.domain-search-btn { flex-shrink: 0; background: linear-gradient(135deg, #39B95A 0%, #2C9C4C 100%); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .9rem; border: none; border-radius: 100px; padding: 13px 28px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; white-space: nowrap; box-shadow: 0 4px 16px rgba(44,156,76,.35); }
.domain-search-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(44,156,76,.5); }
.domain-search-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(44,156,76,.3); }
.domain-search-btn:focus { outline: none; }
.domain-search-btn:focus-visible { outline: 2px solid rgba(255,255,255,.65); outline-offset: 3px; }
.tld-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tld-chip { background: rgba(255,255,255,.07); border: 1px solid rgba(57,185,90,.2); border-radius: 999px; padding: 5px 14px; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.6); cursor: pointer; transition: background .2s, border-color .2s, color .2s; user-select: none; }
.tld-chip:hover, .tld-chip.active { background: rgba(57,185,90,.18); border-color: rgba(57,185,90,.6); color: #fff; }
.tld-chip.active { color: #39B95A; }
#searchLoading { display: none; margin-top: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(57,185,90,.2); border-radius: 16px; padding: 24px 28px; text-align: center; }
.loading-spinner { width: 40px; height: 40px; border: 3px solid rgba(57,185,90,.2); border-top-color: #39B95A; border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-msg { font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.7); transition: opacity .4s ease; }
#resultPanel { display: none; margin-top: 20px; }
.result-available { background: rgba(57,185,90,.1); border: 1.5px solid rgba(57,185,90,.45); border-radius: 16px; padding: 20px 24px; }
.result-unavailable { background: rgba(255,100,80,.06); border: 1.5px solid rgba(255,100,80,.25); border-radius: 16px; padding: 20px 24px; }
.result-domain-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.25rem; color: #fff; }
.result-status-avail { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: #39B95A; background: rgba(57,185,90,.15); border: 1px solid rgba(57,185,90,.3); border-radius: 999px; padding: 3px 12px; }
.result-status-taken { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: #ff6450; background: rgba(255,100,80,.12); border: 1px solid rgba(255,100,80,.25); border-radius: 999px; padding: 3px 12px; }
.result-register-btn { background: linear-gradient(135deg, #39B95A, #2C9C4C); color: #fff; font-weight: 700; font-size: .85rem; border: none; border-radius: 10px; padding: 11px 22px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: transform .2s, box-shadow .2s; white-space: nowrap; }
.result-register-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(44,156,76,.45); }
.alt-tld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.alt-tld-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.alt-tld-name { font-weight: 700; font-size: .9rem; color: #fff; }
.alt-tld-price { font-size: .75rem; color: rgba(255,255,255,.5); margin-top: 1px; }
.alt-tld-btn { background: rgba(57,185,90,.15); border: 1px solid rgba(57,185,90,.35); color: #39B95A; font-weight: 700; font-size: .75rem; border-radius: 8px; padding: 6px 12px; cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s; white-space: nowrap; flex-shrink: 0; }
.alt-tld-btn:hover { background: rgba(57,185,90,.28); border-color: rgba(57,185,90,.6); }
.ext-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1023px) { .ext-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.ext-card { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 18px; padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 8px; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; position: relative; overflow: hidden; }
.ext-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(57,185,90,.04) 0%, transparent 60%); pointer-events: none; }
.ext-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(57,185,90,.35); }
.ext-card-tld { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--brand-500); }
.ext-card-desc { font-size: .8rem; color: #6b8a74; line-height: 1.4; flex: 1; }
.ext-card-price { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--dark-text); }
.ext-card-period { font-size: .75rem; font-weight: 500; color: #6b8a74; }
.ext-card-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: 6px; padding: 10px 0; background: var(--brand-500); color: #fff; font-weight: 700; font-size: .82rem; border-radius: 10px; text-decoration: none; border: none; cursor: pointer; width: 100%; transition: background .2s, transform .2s; }
.ext-card-btn:hover { background: #1f7a39; transform: translateY(-1px); }
.ext-card-popular { position: absolute; top: 14px; right: 14px; background: #FFD60A; color: #081810; font-size: .62rem; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
.why-domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why-domain-card { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 18px; padding: 28px; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.why-domain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(57,185,90,.35); }
.why-domain-icon { width: 52px; height: 52px; background: linear-gradient(135deg, #edf9f1, #D6EEDF); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 16px; }
.why-domain-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--dark-text); margin-bottom: 8px; }
.why-domain-desc { font-size: .85rem; line-height: 1.6; color: #6b8a74; }

/* =====================================================================
   DOMAIN TRANSFER PAGE ADDITIONAL CSS
   ===================================================================== */

@media (max-width: 767px) {
  .transfer-steps-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
}
@media (max-width: 639px) {
  .why-transfer-grid { grid-template-columns: 1fr !important; }
}
.dhv-chip-g-icon { display: block; font-size: 1.4rem; line-height: 1; margin-bottom: 4px; }
.dhv-chip-g-label { display: block; font-size: .6rem; font-weight: 600; color: rgba(255,255,255,.55); margin-top: 2px; line-height: 1.2; }
.why-transfer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.why-transfer-card { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 18px; padding: 28px; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.why-transfer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(57,185,90,.35); }
.why-transfer-icon { width: 52px; height: 52px; background: linear-gradient(135deg, #edf9f1, #D6EEDF); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 16px; }
.why-transfer-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--dark-text); margin-bottom: 8px; }
.why-transfer-desc { font-size: .85rem; line-height: 1.6; color: #6b8a74; }
.transfer-steps-wrap { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto; }
.transfer-step { display: flex; gap: 20px; align-items: flex-start; position: relative; }
.transfer-step:not(:last-child)::after { content: ''; position: absolute; left: 22px; top: 54px; width: 2px; height: calc(100% - 14px); background: linear-gradient(180deg, rgba(57,185,90,.4) 0%, rgba(57,185,90,.1) 100%); }
.transfer-step-num { flex-shrink: 0; width: 44px; height: 44px; background: linear-gradient(135deg, #39B95A, #2C9C4C); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1rem; color: #fff; box-shadow: 0 4px 16px rgba(44,156,76,.35); position: relative; z-index: 1; }
.transfer-step-body { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 16px; padding: 22px 24px; flex: 1; margin-bottom: 20px; transition: border-color .25s ease, box-shadow .25s ease; }
.transfer-step-body:hover { border-color: rgba(57,185,90,.35); box-shadow: var(--shadow-card-hover); }
.transfer-step-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1rem; color: var(--dark-text); margin-bottom: 6px; }
.transfer-step-desc { font-size: .85rem; line-height: 1.6; color: #6b8a74; }
.hosting-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1023px) { .hosting-plans-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 639px) { .hosting-plans-grid { grid-template-columns: 1fr !important; } }
.hosting-plan-card { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 0; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; position: relative; overflow: hidden; }
.hosting-plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(57,185,90,.35); }
.hosting-plan-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hosting-plan-icon { width: 42px; height: 42px; background: linear-gradient(135deg, #edf9f1, #D6EEDF); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.hosting-plan-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1rem; color: var(--dark-text); line-height: 1.2; }
.hosting-plan-price { font-size: .75rem; color: #fff; background: var(--brand-500); border-radius: 999px; padding: 2px 10px; font-weight: 700; display: inline-block; margin-bottom: 14px; }
.hosting-plan-features { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hosting-plan-features li { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; color: #6b8a74; line-height: 1.4; }
.hosting-plan-features li::before { content: '✓'; color: #39B95A; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.hosting-plan-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.hosting-plan-badge { font-size: .65rem; font-weight: 700; border-radius: 999px; padding: 3px 8px; background: #edf9f1; color: #1f7a39; border: 1px solid #D6EEDF; }
.hosting-plan-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 0; background: var(--brand-500); color: #fff; font-weight: 700; font-size: .82rem; border-radius: 10px; text-decoration: none; border: none; cursor: pointer; width: 100%; transition: background .2s, transform .2s; }
.hosting-plan-btn:hover { background: #1f7a39; transform: translateY(-1px); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.testimonial-card { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 18px; padding: 28px; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(57,185,90,.35); }
.testimonial-quote-icon { font-size: 2.2rem; color: #39B95A; line-height: 1; margin-bottom: 14px; display: block; }
.testimonial-text { font-size: .88rem; line-height: 1.75; color: #6b8a74; margin-bottom: 22px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #D6EEDF, #39B95A); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.testimonial-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .9rem; color: var(--dark-text); }
.testimonial-location { font-size: .75rem; color: #6b8a74; margin-top: 1px; }
.testimonial-stars { color: #FFD60A; font-size: .8rem; letter-spacing: 1px; margin-bottom: 2px; }

/* =====================================================================
   ABOUT US PAGE — Stage 1 CSS
   ===================================================================== */

/* ── Breadcrumb ── */
.ab-breadcrumb {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.55);
  margin-bottom: 1.5rem;
}
.ab-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.ab-breadcrumb a:hover { color: var(--accent-green); }
.ab-breadcrumb-sep { color: rgba(255,255,255,.25); }
.ab-breadcrumb-cur { color: rgba(255,255,255,.88); }

/* ── About Hero ── */
.ab-hero {
  background: linear-gradient(160deg, var(--dark-hero) 0%, var(--dark-surface) 45%, #1a4a28 80%, #2C9C4C 100%);
  position: relative; overflow: hidden;
  padding: 5.5rem 0 4.5rem;
}
@media (min-width: 1024px) { .ab-hero { padding: 7rem 0 6rem; } }

.ab-hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(57,185,90,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,185,90,.07) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridDrift 20s linear infinite;
  pointer-events: none; z-index: 0;
}
.ab-hero-orb-1 {
  position: absolute; border-radius: 9999px; filter: blur(80px); pointer-events: none; z-index: 0;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(57,185,90,.3), rgba(44,156,76,.12), transparent 70%);
  top: -160px; right: -100px;
  animation: orbFloat 8s ease-in-out infinite;
}
.ab-hero-orb-2 {
  position: absolute; border-radius: 9999px; filter: blur(80px); pointer-events: none; z-index: 0;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(167,205,179,.18), rgba(57,185,90,.08), transparent 70%);
  bottom: -100px; left: -80px;
  animation: orbFloat 8s ease-in-out infinite 4s;
}

/* ── About Hero — Centered Premium Layout ── */
.ab-hero-center {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  position: relative; z-index: 1;
}

.ab-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(57,185,90,.14); border: 1px solid rgba(57,185,90,.32);
  color: rgba(255,255,255,.92); font-size: .72rem; font-weight: 700;
  padding: .42rem 1.1rem; border-radius: 9999px;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1.75rem; backdrop-filter: blur(8px);
}
.ab-hero-badge-dot {
  width: .42rem; height: .42rem; border-radius: 9999px;
  background: #FFD60A; box-shadow: 0 0 0 3px rgba(255,214,10,.25);
  flex-shrink: 0; display: inline-block;
}

.ab-hero-title-center {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: clamp(2.1rem, 4.8vw, 3.55rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
  color: #fff; margin-bottom: 1.5rem;
}
.ab-hero-hl {
  background: linear-gradient(110deg, #A7CDB3, #39B95A 50%, #FFD60A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ab-hero-desc-center {
  color: rgba(255,255,255,.72); font-size: 1.05rem; line-height: 1.82;
  max-width: 640px; margin: 0 auto 2.25rem;
}

.ab-hero-cta-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .85rem; margin-bottom: 2.75rem;
}

/* Trust statistics row */
.ab-hero-trust-row {
  display: inline-flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  background: rgba(255,255,255,.06); border: 1px solid rgba(57,185,90,.22);
  border-radius: 1.25rem; padding: 1.3rem 1.5rem;
  backdrop-filter: blur(12px); gap: 0;
}
.ab-trust-item { text-align: center; padding: 0 1.6rem; }
.ab-trust-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1.1;
}
.ab-trust-unit { color: var(--accent-green); }
.ab-trust-lbl {
  font-size: .62rem; font-weight: 700; color: var(--light-text);
  margin-top: .25rem; text-transform: uppercase; letter-spacing: .06em;
}
.ab-trust-divider { width: 1px; height: 2.4rem; background: rgba(57,185,90,.28); flex-shrink: 0; }
@media (max-width: 640px) {
  .ab-hero-trust-row { padding: 1rem; gap: 0; }
  .ab-trust-item { padding: .55rem .9rem; }
  .ab-trust-divider { display: none; }
  .ab-trust-val { font-size: 1.1rem; }
}


/* ── Our Story Section ── */
.ab-story-section { background: #fff; }
.ab-story-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 4rem; align-items: center;
}
@media (max-width: 1024px) { .ab-story-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.ab-story-body { font-size: .95rem; color: #4a6860; line-height: 1.85; }
.ab-story-body p { margin-bottom: 1.15rem; }
.ab-story-body p:last-child { margin-bottom: 0; }

.ab-story-highlight {
  background: linear-gradient(135deg, #edf9f1, #f4fbf6);
  border: 1.5px solid rgba(44,156,76,.2);
  border-left: 4px solid var(--brand-500);
  border-radius: 0 1rem 1rem 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  position: relative;
}
.ab-story-quote {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 700; color: var(--brand-700); line-height: 1.6;
}

/* Story right column — visual card */
.ab-story-visual {
  background: linear-gradient(145deg, var(--dark-hero) 0%, var(--dark-surface) 55%, #1a4a28 100%);
  border-radius: 1.6rem; padding: 2rem;
  position: relative; overflow: hidden;
}
.ab-story-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(57,185,90,.08) 1px, transparent 0);
  background-size: 24px 24px; pointer-events: none;
}
.ab-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; position: relative; z-index: 1; }
.ab-stat-box {
  background: rgba(255,255,255,.06); border: 1px solid rgba(57,185,90,.2);
  border-radius: 1rem; padding: 1.25rem 1rem; text-align: center;
  transition: border-color .3s, background .3s;
}
.ab-stat-box:hover { border-color: rgba(57,185,90,.4); background: rgba(57,185,90,.1); }
.ab-stat-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.65rem; font-weight: 800; color: #fff; line-height: 1;
  margin-bottom: .3rem;
}
.ab-stat-val span { color: var(--accent-green); }
.ab-stat-lbl { font-size: .67rem; font-weight: 700; color: var(--light-text); text-transform: uppercase; letter-spacing: .05em; }
.ab-story-mission {
  position: relative; z-index: 1; margin-top: 1.25rem;
  background: rgba(57,185,90,.1); border: 1px solid rgba(57,185,90,.28);
  border-radius: 1rem; padding: 1.25rem;
}
.ab-story-mission-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .78rem; font-weight: 700; color: var(--accent-green); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .5rem; }
.ab-story-mission-text { font-size: .84rem; color: rgba(255,255,255,.72); line-height: 1.7; }

/* ── Timeline ── */
.ab-timeline-section {
  background: linear-gradient(160deg, var(--dark-hero) 0%, var(--dark-surface) 55%, #0d2a17 100%);
  position: relative; overflow: hidden;
}
.ab-timeline-section::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(57,185,90,.07) 1px, transparent 0);
  background-size: 30px 30px; pointer-events: none;
}
.ab-timeline {
  position: relative; max-width: 800px; margin: 0 auto; padding: 1rem 0;
}
.ab-timeline::before {
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(57,185,90,.0), rgba(57,185,90,.5) 15%, rgba(57,185,90,.5) 85%, rgba(57,185,90,.0));
  transform: translateX(-50%);
}
@media (max-width: 640px) { .ab-timeline::before { left: 1.25rem; } }

.ab-timeline-item {
  display: grid; grid-template-columns: 1fr 3rem 1fr;
  gap: 0; align-items: start; margin-bottom: 3rem;
  position: relative;
}
@media (max-width: 640px) {
  .ab-timeline-item { grid-template-columns: 2.5rem 1fr; gap: 0; }
}
.ab-timeline-item:last-child { margin-bottom: 0; }

/* HTML explicitly places card in ab-tl-left (odd items) or ab-tl-right (even items).
   No order reordering needed for desktop — grid auto-places cols 1/2/3 correctly.
   Mobile: 2-col grid (2.5rem + 1fr). Center dot → col1; card → col2; hide empty side. */
@media (max-width: 640px) {
  .ab-timeline-item:nth-child(odd) .ab-tl-left  { grid-column: 2; grid-row: 1; padding-right: 0; padding-left: 1rem; align-items: flex-start; }
  .ab-timeline-item:nth-child(odd) .ab-tl-center { grid-column: 1; grid-row: 1; }
  .ab-timeline-item:nth-child(odd) .ab-tl-right  { display: none; }
  .ab-timeline-item:nth-child(even) .ab-tl-left  { display: none; }
  .ab-timeline-item:nth-child(even) .ab-tl-center { grid-column: 1; grid-row: 1; }
  .ab-timeline-item:nth-child(even) .ab-tl-right  { grid-column: 2; grid-row: 1; padding-left: 1rem; }
}

.ab-tl-left { padding-right: 1.5rem; display: flex; flex-direction: column; align-items: flex-end; padding-top: .9rem; }
.ab-tl-right { padding-left: 1.5rem; padding-top: .9rem; }

.ab-tl-center { display: flex; flex-direction: column; align-items: center; gap: .2rem; z-index: 2; }
.ab-tl-dot {
  width: 2.75rem; height: 2.75rem; border-radius: 9999px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-600), var(--accent-green));
  border: 3px solid var(--dark-hero);
  box-shadow: 0 0 0 3px rgba(57,185,90,.35), 0 4px 16px -4px rgba(57,185,90,.6);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  z-index: 2;
}
.ab-tl-year {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .62rem; font-weight: 800; color: var(--accent-green);
  text-transform: uppercase; letter-spacing: .07em; margin-top: .35rem;
  background: rgba(57,185,90,.12); border: 1px solid rgba(57,185,90,.28);
  padding: .15rem .6rem; border-radius: 9999px;
}
.ab-tl-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(57,185,90,.2);
  border-radius: 1.2rem; padding: 1.5rem;
  backdrop-filter: blur(8px);
  position: relative; overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.ab-tl-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(57,185,90,.55), transparent);
}
.ab-tl-card:hover { transform: translateY(-4px); border-color: rgba(57,185,90,.45); background: rgba(57,185,90,.08); }
.ab-tl-card-year { font-size: .65rem; font-weight: 700; color: var(--accent-green); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.ab-tl-card-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .98rem; font-weight: 700; color: #fff; margin-bottom: .55rem; }
.ab-tl-card-desc { font-size: .82rem; color: var(--light-text); line-height: 1.7; }

/* empty placeholder for alternating side */
.ab-tl-empty { padding-top: .9rem; }

/* ── Hosting Principles ── */
.ab-principle-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 1024px) { .ab-principle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ab-principle-grid { grid-template-columns: 1fr; } }

.ab-principle-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 1.6rem; padding: 2rem;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
  cursor: default;
}
.ab-principle-card::before {
  content: '';
  position: absolute; top: -20px; left: -20px;
  width: 160px; height: 160px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(44,156,76,.1), transparent 70%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.ab-principle-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--accent-green), var(--brand-600));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.ab-principle-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover); border-color: rgba(44,156,76,.32);
}
.ab-principle-card:hover::before { opacity: 1; }
.ab-principle-card:hover::after  { transform: scaleX(1); }
.ab-principle-icon {
  width: 3.25rem; height: 3.25rem; border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1.25rem;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
  position: relative; z-index: 1;
}
.ab-principle-card:hover .ab-principle-icon {
  transform: scale(1.18) rotate(-8deg);
  box-shadow: 0 10px 28px -6px rgba(44,156,76,.4);
}
.ab-principle-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 1rem; font-weight: 700; color: var(--dark-text);
  margin-bottom: .55rem; position: relative; z-index: 1;
  transition: color .3s ease;
}
.ab-principle-card:hover .ab-principle-title { color: var(--brand-700); }
.ab-principle-desc { font-size: .875rem; color: #4a6860; line-height: 1.78; position: relative; z-index: 1; }

/* =====================================================================
   ABOUT US PAGE — Stage 2 CSS
   ===================================================================== */

/* ── By The Numbers ── */
.ab-numbers-section {
  background: linear-gradient(160deg, var(--dark-hero) 0%, var(--dark-surface) 55%, #0d2a17 100%);
  position: relative; overflow: hidden;
}
.ab-numbers-section::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(57,185,90,.07) 1px, transparent 0);
  background-size: 30px 30px; pointer-events: none;
}
.ab-num-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
@media (max-width: 1024px) { .ab-num-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .ab-num-grid { grid-template-columns: 1fr 1fr; } }
.ab-num-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(57,185,90,.18);
  border-radius: 1.2rem; padding: 2rem 1.25rem; text-align: center;
  backdrop-filter: blur(8px); position: relative; overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.ab-num-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(57,185,90,.6), transparent);
}
.ab-num-card:hover { transform: translateY(-6px); border-color: rgba(57,185,90,.45); background: rgba(57,185,90,.1); }
.ab-num-icon { font-size: 1.65rem; margin-bottom: .65rem; display: block; }
.ab-num-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.4rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: .4rem;
}
.ab-num-val span { color: var(--accent-green); }
.ab-num-label {
  font-size: .7rem; font-weight: 700; color: var(--light-text);
  text-transform: uppercase; letter-spacing: .07em;
}

/* ── Mission Banner ── */
.ab-mission-card {
  background: linear-gradient(140deg, var(--dark-hero) 0%, #1a4a28 55%, var(--dark-surface) 100%);
  border-radius: 2rem; padding: 3.5rem 3rem;
  position: relative; overflow: hidden;
  border: 1px solid rgba(57,185,90,.25);
}
@media (max-width: 640px) { .ab-mission-card { padding: 2.5rem 1.5rem; border-radius: 1.4rem; } }
.ab-mission-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(57,185,90,.07) 1px, transparent 0);
  background-size: 28px 28px; pointer-events: none;
}
.ab-mission-card-orb {
  position: absolute; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(57,185,90,.28), transparent 70%);
  border-radius: 9999px; top: -130px; right: -80px; filter: blur(60px); pointer-events: none;
}
.ab-mission-quote {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem); font-weight: 800;
  color: #fff; line-height: 1.5; letter-spacing: -.02em;
  position: relative; z-index: 1;
}
.ab-mission-quote em {
  font-style: normal;
  background: linear-gradient(110deg, #A7CDB3, #39B95A 50%, #FFD60A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================
   Refund Policy Page
========================== */

/* ── Breadcrumb ── */
.rp-breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: 2rem;
}
.rp-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.rp-breadcrumb a:hover { color: var(--accent-green); }
.rp-breadcrumb-sep { color: rgba(255,255,255,.25); }
.rp-breadcrumb-cur { color: rgba(255,255,255,.88); }

/* ── Hero ── */
.rp-hero {
  background: linear-gradient(160deg, var(--dark-hero) 0%, var(--dark-surface) 55%, #0d2a17 100%);
  padding: 4.5rem 0 3.75rem;
  position: relative; overflow: hidden;
}
.rp-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(57,185,90,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,185,90,.06) 1px, transparent 1px);
  background-size: 50px 50px; pointer-events: none; z-index: 0;
}
.rp-hero-orb {
  position: absolute; border-radius: 9999px; filter: blur(80px);
  pointer-events: none; z-index: 0;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(57,185,90,.22), rgba(44,156,76,.08), transparent 70%);
  top: -150px; right: -100px;
}
.rp-hero-center {
  text-align: center; max-width: 680px;
  margin: 0 auto; position: relative; z-index: 1;
}
.rp-hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(57,185,90,.13); border: 1px solid rgba(57,185,90,.3);
  color: rgba(255,255,255,.9); font-size: .7rem; font-weight: 700;
  padding: .38rem 1rem; border-radius: 9999px;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1.5rem; backdrop-filter: blur(8px);
}
.rp-hero-badge-dot {
  width: .38rem; height: .38rem; border-radius: 9999px;
  background: #FFD60A; box-shadow: 0 0 0 3px rgba(255,214,10,.22);
  flex-shrink: 0; display: inline-block;
}
.rp-hero-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  color: #fff; margin-bottom: 1.1rem;
}
.rp-hero-desc {
  color: rgba(255,255,255,.68); font-size: 1rem; line-height: 1.8;
  max-width: 560px; margin: 0 auto 2rem;
}

/* ── Refunds at a Glance ── */
.rp-glance-section {
  padding: 3.5rem 0;
  background: #fff; border-bottom: 1px solid var(--border);
}
.rp-glance-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 900px)  { .rp-glance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .rp-glance-grid { grid-template-columns: 1fr; } }

.rp-glance-card {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 1rem; padding: 1.1rem 1.1rem .9rem;
  display: flex; align-items: flex-start; gap: .8rem;
  transition: box-shadow .25s, transform .25s;
}
.rp-glance-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.rp-glance-card.gc-eligible { border-color: rgba(44,156,76,.28); background: linear-gradient(135deg, #f0fdf4, #edf9f1); }
.rp-glance-card.gc-ineligible { border-color: rgba(220,38,38,.22); background: linear-gradient(135deg, #fff5f5, #fef2f2); }
.rp-glance-card.gc-info { border-color: rgba(59,130,246,.2); background: linear-gradient(135deg, #eff6ff, #f0f9ff); }

.rp-glance-icon {
  width: 2.2rem; height: 2.2rem; border-radius: .55rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0; margin-top: .1rem;
}
.rp-glance-icon.gi-green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.rp-glance-icon.gi-red   { background: linear-gradient(135deg, #fee2e2, #fecaca); }
.rp-glance-icon.gi-blue  { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.rp-glance-icon.gi-yellow { background: linear-gradient(135deg, #fef9c3, #fde68a); }

.rp-glance-label { font-size: .82rem; font-weight: 700; color: var(--dark-text); line-height: 1.3; }
.rp-glance-sub   { font-size: .72rem; color: #6b7280; margin-top: .18rem; line-height: 1.4; }
.rp-glance-tag   { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: .35rem; display: inline-block; padding: .12rem .5rem; border-radius: 9999px; }
.rp-glance-tag.t-green { color: #15803d; background: #dcfce7; }
.rp-glance-tag.t-red   { color: #dc2626; background: #fee2e2; }
.rp-glance-tag.t-blue  { color: #1d4ed8; background: #dbeafe; }
.rp-glance-tag.t-yellow{ color: #92400e; background: #fef3c7; }

/* ── Policy Content Section ── */
.rp-policy-section { padding: 4.5rem 0 5rem; background: var(--bg); }
.rp-policy-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }

/* Policy Cards */
.rp-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 1.25rem; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .28s;
}
.rp-card:hover { box-shadow: var(--shadow-card-hover); }
.rp-card-head {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.5rem 1.75rem 0;
}
.rp-card-icon {
  width: 2.6rem; height: 2.6rem; border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.rp-card-icon.ci-green  { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.rp-card-icon.ci-red    { background: linear-gradient(135deg, #fee2e2, #fecaca); }
.rp-card-icon.ci-yellow { background: linear-gradient(135deg, #fef9c3, #fde68a); }
.rp-card-icon.ci-blue   { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.rp-card-icon.ci-orange { background: linear-gradient(135deg, #fed7aa, #fdba74); }
.rp-card-icon.ci-purple { background: linear-gradient(135deg, #e9d5ff, #d8b4fe); }

.rp-card-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 1.02rem; font-weight: 700; color: var(--dark-text); line-height: 1.3;
}
.rp-card-body {
  padding: 1.1rem 1.75rem 1.75rem;
  font-size: .9rem; color: #4a6860; line-height: 1.75;
}
.rp-card-body p { margin-bottom: .9rem; }
.rp-card-body p:last-child { margin-bottom: 0; }

/* Highlight boxes inside cards */
.rp-info-box {
  background: linear-gradient(135deg, #edf9f1, #f0fdf4);
  border: 1.5px solid rgba(44,156,76,.22);
  border-left: 4px solid var(--brand-500);
  border-radius: .75rem; padding: 1rem 1.15rem;
  margin-bottom: 1rem; font-size: .88rem; color: #155c2a; line-height: 1.75;
}
.rp-warn-box {
  background: linear-gradient(135deg, #fff5f5, #fef2f2);
  border: 1.5px solid rgba(220,38,38,.2);
  border-left: 4px solid #dc2626;
  border-radius: .75rem; padding: 1rem 1.15rem;
  margin-bottom: 1rem; font-size: .88rem; color: #991b1b; line-height: 1.75;
}
.rp-note-box {
  background: linear-gradient(135deg, #fffbeb, #fef9c3);
  border: 1.5px solid rgba(202,138,4,.22);
  border-left: 4px solid #d97706;
  border-radius: .75rem; padding: 1rem 1.15rem;
  margin-bottom: 1rem; font-size: .88rem; color: #78350f; line-height: 1.75;
}
.rp-blue-box {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1.5px solid rgba(59,130,246,.2);
  border-left: 4px solid #3b82f6;
  border-radius: .75rem; padding: 1rem 1.15rem;
  margin-bottom: 1rem; font-size: .88rem; color: #1e3a8a; line-height: 1.75;
}
.rp-orange-box {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1.5px solid rgba(234,88,12,.2);
  border-left: 4px solid #ea580c;
  border-radius: .75rem; padding: 1rem 1.15rem;
  margin-bottom: 1rem; font-size: .88rem; color: #7c2d12; line-height: 1.75;
}

.rp-box-title { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .45rem; display: block; }

/* Lists */
.rp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.rp-list li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .88rem; color: #4a6860; line-height: 1.65;
}
.rp-list-dot { flex-shrink: 0; margin-top: .38rem; width: .4rem; height: .4rem; border-radius: 9999px; }
.rp-list-dot.ld-green  { background: var(--brand-500); }
.rp-list-dot.ld-red    { background: #dc2626; }
.rp-list-dot.ld-yellow { background: #d97706; }
.rp-list-dot.ld-neutral{ background: #6b7280; }

/* Numbered conditions */
.rp-conditions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.rp-conditions li { display: flex; gap: .85rem; align-items: flex-start; font-size: .88rem; color: #4a6860; line-height: 1.65; }
.rp-cond-num {
  width: 1.65rem; height: 1.65rem; border-radius: 9999px;
  background: var(--brand-500); color: #fff;
  font-size: .7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .1rem;
}

/* Section divider label */
.rp-divider-label {
  display: flex; align-items: center; gap: .75rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--light-text); margin: .5rem 0 1rem;
}
.rp-divider-label::before, .rp-divider-label::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ── How to Request a Refund ── */
.rp-how-section { padding: 4rem 0; background: #fff; border-top: 1px solid var(--border); }
.rp-how-steps {
  display: flex; flex-direction: column; gap: 1rem;
  max-width: 700px; margin: 2rem auto 0;
}
.rp-how-step {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 1rem; padding: 1.25rem;
  transition: box-shadow .25s, transform .25s;
}
.rp-how-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.rp-how-num {
  width: 2.1rem; height: 2.1rem; border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand-600), var(--accent-green));
  color: #fff; font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .05rem;
}
.rp-how-step-title { font-size: .9rem; font-weight: 700; color: var(--dark-text); margin-bottom: .2rem; }
.rp-how-step-desc { font-size: .83rem; color: #4a6860; line-height: 1.65; }
.rp-channel-wrap { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.rp-channel-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600; padding: .18rem .6rem;
  border-radius: .4rem;
}
.rp-channel-tag.ct-allow { background: #dcfce7; color: #15803d; border: 1px solid rgba(21,128,61,.18); }
.rp-channel-tag.ct-deny  { background: #fee2e2; color: #dc2626; border: 1px solid rgba(220,38,38,.18); text-decoration: line-through; }

/* ── Need Help Card ── */
.rp-help-section { padding: 3.5rem 0 5rem; background: var(--bg); }
.rp-help-card {
  background: linear-gradient(160deg, var(--dark-hero), var(--dark-surface) 70%, #0d2a17);
  border: 1px solid rgba(57,185,90,.28);
  border-radius: 1.5rem; padding: 2.75rem 2rem;
  text-align: center; position: relative; overflow: hidden;
  max-width: 580px; margin: 0 auto;
}
.rp-help-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(57,185,90,.07) 1px, transparent 0);
  background-size: 24px 24px; pointer-events: none;
}
.rp-help-card-orb {
  position: absolute; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(57,185,90,.22), transparent 70%);
  border-radius: 9999px; top: -80px; right: -60px;
  filter: blur(50px); pointer-events: none;
}
.rp-help-icon { font-size: 2.2rem; margin-bottom: 1rem; position: relative; z-index: 1; }
.rp-help-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; font-weight: 700;
  color: #fff; margin-bottom: .45rem; position: relative; z-index: 1;
}
.rp-help-desc { font-size: .88rem; color: var(--light-text); margin-bottom: 1.6rem; position: relative; z-index: 1; line-height: 1.65; }

/* ── Responsive tweaks ── */
@media (max-width: 640px) {
  .rp-hero { padding: 3.5rem 0 3rem; }
  .rp-card-head { padding: 1.25rem 1.25rem 0; }
  .rp-card-body { padding: .9rem 1.25rem 1.25rem; }
  .rp-glance-section { padding: 2.5rem 0; }
  .rp-policy-section { padding: 3rem 0 4rem; }
  .rp-help-card { padding: 2.25rem 1.5rem; }
  .rp-how-section { padding: 3rem 0; }
  .rp-help-section { padding: 2.5rem 0 3.5rem; }
  .rp-policy-wrap { gap: 1rem; }
  .rp-conditions { gap: .6rem; }
  .rp-channel-wrap { gap: .3rem; }
  .rp-how-steps { margin-top: 1.5rem; gap: .75rem; }
  .rp-how-step { padding: 1rem; gap: .75rem; }
}

/* ── Skip link & focus target ── */
#main-content:focus { outline: none; }
.rp-skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--brand-600); color: #fff;
  padding: .6rem 1.1rem; font-size: .85rem; font-weight: 600;
  border-radius: 0 0 .5rem .5rem; z-index: 9999;
  text-decoration: none; transition: top .15s;
}
.rp-skip-link:focus { top: 0; }

/* ── Scroll margin for sticky header offset ── */
#policy-content,
#eligible-services, #ineligible-services, #seven-day-policy,
#special-offers, #whm-root-server, #approval-process,
#processing-time, #deductions, #renewals, #exclusions,
#important-notes { scroll-margin-top: 88px; }

/* ── Focus-visible rings for rp-* interactive elements ── */
.rp-breadcrumb a:focus-visible,
.rp-how-step a:focus-visible,
.rp-help-card a:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
  border-radius: 3px;
}
.rp-glance-card:focus-within { outline: 2px solid var(--accent-green); outline-offset: 3px; }

/* ── Print styles ── */
@media print {
  .top-bar, #header, #toTop, .rp-help-section { display: none !important; }
  .rp-hero {
    background: #fff !important; color: #000 !important;
    padding: 1.5rem 0 1rem !important; border-bottom: 2px solid #15803d;
  }
  .rp-hero-title, .rp-hero-badge { color: #000 !important; }
  .rp-hero-desc { color: #333 !important; }
  .rp-hero-grid, .rp-hero-orb { display: none !important; }
  .rp-breadcrumb, .rp-breadcrumb a, .rp-breadcrumb-cur, .rp-breadcrumb-sep { color: #333 !important; }
  .rp-glance-section { border: 1px solid #ccc; background: #fff !important; }
  .rp-glance-card { box-shadow: none !important; border: 1px solid #ccc !important; background: #fff !important; }
  .rp-card { box-shadow: none !important; border: 1px solid #d1d5db !important; page-break-inside: avoid; }
  .rp-warn-box, .rp-info-box, .rp-note-box, .rp-blue-box, .rp-orange-box {
    border: 1px solid #d1d5db !important; background: #f9f9f9 !important;
  }
  .rp-how-section { background: #fff !important; }
  .rp-how-step { box-shadow: none !important; border: 1px solid #d1d5db !important; background: #fff !important; }
  .rp-channel-tag.ct-deny { text-decoration: line-through; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7rem; color: #555; }
  .btn-primary, .btn-ghost-light { display: none !important; }
  footer.site-footer .footer-main { display: none !important; }
  .footer-bottom { border-top: 1px solid #ccc !important; background: #fff !important; }
  .footer-bottom p, .footer-bottom a { color: #333 !important; }
}

/* ======================================
   Terms & Conditions Page
====================================== */

/* ── Hero ── */
.tc-hero {
  background: linear-gradient(160deg, var(--dark-hero) 0%, var(--dark-surface) 55%, #0d2a17 100%);
  padding: 3.5rem 0 2.75rem;
  position: relative; overflow: hidden;
}
.tc-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(57,185,90,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,185,90,.06) 1px, transparent 1px);
  background-size: 50px 50px; pointer-events: none; z-index: 0;
}
.tc-hero-orb {
  position: absolute; border-radius: 9999px; filter: blur(80px);
  pointer-events: none; z-index: 0;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(57,185,90,.2), rgba(44,156,76,.07), transparent 70%);
  top: -120px; right: -80px;
}
.tc-hero-center {
  text-align: center; max-width: 680px;
  margin: 0 auto; position: relative; z-index: 1;
}
.tc-hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(57,185,90,.13); border: 1px solid rgba(57,185,90,.3);
  color: rgba(255,255,255,.9); font-size: .7rem; font-weight: 700;
  padding: .38rem 1rem; border-radius: 9999px;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1.4rem; backdrop-filter: blur(8px);
}
.tc-hero-badge-dot {
  width: .38rem; height: .38rem; border-radius: 9999px;
  background: #FFD60A; box-shadow: 0 0 0 3px rgba(255,214,10,.22);
  flex-shrink: 0; display: inline-block;
}
.tc-hero-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  color: #fff; margin-bottom: 1rem;
}
.tc-hero-desc {
  color: rgba(255,255,255,.68); font-size: .97rem; line-height: 1.8;
  max-width: 560px; margin: 0 auto 1.75rem;
}

/* ── Main Content ── */
.tc-policy-section { padding: 4rem 0 5rem; background: var(--bg); }
.tc-policy-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
#tc-content { scroll-margin-top: 88px; }

/* Spacing after list → box */
.tc-policy-wrap .rp-list + .rp-info-box,
.tc-policy-wrap .rp-list + .rp-warn-box,
.tc-policy-wrap .rp-list + .rp-note-box,
.tc-policy-wrap .rp-list + .rp-blue-box,
.tc-policy-wrap .rp-list + .rp-orange-box { margin-top: .85rem; }

/* ── Prohibited Materials two-column list ── */
.tc-prohibited-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 .75rem; align-items: start;
}
@media (max-width: 600px) { .tc-prohibited-cols { grid-template-columns: 1fr; } }

/* ── Cancellation timeline ── */
.tc-cancel-steps { display: flex; flex-direction: column; gap: .65rem; }
.tc-cancel-step {
  display: flex; align-items: flex-start; gap: .85rem;
  font-size: .87rem; color: #4a6860; line-height: 1.65;
}
.tc-cancel-tag {
  flex-shrink: 0; padding: .18rem .55rem; border-radius: .4rem;
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.tc-cancel-tag.ct-red { background: #fee2e2; color: #dc2626; }
.tc-cancel-tag.ct-orange { background: #ffedd5; color: #c2410c; }
.tc-cancel-tag.ct-yellow { background: #fef9c3; color: #92400e; }

/* ── Related Policies ── */
.tc-related-section { padding: 3.5rem 0 4rem; background: #fff; border-top: 1px solid var(--border); }
.tc-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; max-width: 860px; margin: 1.75rem auto 0;
}
@media (max-width: 768px) { .tc-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tc-related-grid { grid-template-columns: 1fr; } }
.tc-related-card {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 1rem; padding: 1.15rem 1.1rem;
  display: flex; flex-direction: column; gap: .35rem;
  text-decoration: none;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.tc-related-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: rgba(44,156,76,.32); }
.tc-related-icon { font-size: 1.35rem; margin-bottom: .1rem; }
.tc-related-title { font-size: .85rem; font-weight: 700; color: var(--dark-text); }
.tc-related-desc { font-size: .73rem; color: #6b7280; line-height: 1.45; }

/* ── Bottom CTA ── */
.tc-cta-section { padding: 2.5rem 0 5rem; background: var(--bg); }
.tc-cta-card {
  background: linear-gradient(160deg, var(--dark-hero), var(--dark-surface) 70%, #0d2a17);
  border: 1px solid rgba(57,185,90,.28); border-radius: 1.5rem;
  padding: 2.75rem 2rem; text-align: center; position: relative; overflow: hidden;
  max-width: 620px; margin: 0 auto;
}
.tc-cta-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(57,185,90,.07) 1px, transparent 0);
  background-size: 24px 24px; pointer-events: none;
}
.tc-cta-orb {
  position: absolute; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(57,185,90,.22), transparent 70%);
  border-radius: 9999px; top: -70px; right: -50px;
  filter: blur(50px); pointer-events: none;
}
.tc-cta-icon { font-size: 2rem; margin-bottom: .9rem; position: relative; z-index: 1; }
.tc-cta-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; font-weight: 700;
  color: #fff; margin-bottom: .4rem; position: relative; z-index: 1;
}
.tc-cta-desc {
  font-size: .87rem; color: var(--light-text);
  margin-bottom: 1.5rem; position: relative; z-index: 1; line-height: 1.65;
}
.tc-cta-btns { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; position: relative; z-index: 1; }

/* ── Mobile tweaks ── */
@media (max-width: 640px) {
  .tc-hero { padding: 3rem 0 2.25rem; }
  .tc-policy-section { padding: 3rem 0 4rem; }
  .tc-policy-wrap { gap: 1rem; }
  .tc-related-section { padding: 2.5rem 0 3rem; }
  .tc-cta-section { padding: 2rem 0 3.5rem; }
  .tc-cta-card { padding: 2.25rem 1.5rem; }
}

/* ── Scroll margin for anchor links (sticky header = 88px) ── */
#tc-introduction, #tc-general, #tc-eligibility,
#tc-migration, #tc-user-content, #tc-security,
#tc-billing, #tc-refunds, #tc-domains, #tc-chargebacks,
#tc-cancellation, #tc-prohibited-use, #tc-prohibited-materials,
#tc-resources, #tc-email, #tc-backups,
#tc-ip, #tc-liability, #tc-third-party, #tc-force-majeure,
#tc-governing-law, #tc-changes, #tc-entire-agreement {
  scroll-margin-top: 88px;
}

/* ── Focus-visible rings ── */
.tc-related-card:focus-visible {
  outline: 2.5px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: 1rem;
}
.tc-cta-btns a:focus-visible {
  outline: 2.5px solid #fff;
  outline-offset: 3px;
}

/* ── Print styles ── */
@media print {
  .top-bar, #header, #toTop, .tc-cta-section, .tc-related-section { display: none !important; }
  .tc-hero {
    background: #fff !important; padding: 1.5rem 0 !important;
    border-bottom: 2px solid #d1d5db;
  }
  .tc-hero-grid, .tc-hero-orb { display: none !important; }
  .tc-hero-badge {
    background: #f3f4f6 !important; color: #374151 !important;
    border-color: #d1d5db !important; backdrop-filter: none !important;
  }
  .tc-hero-badge-dot { background: #6b7280 !important; box-shadow: none !important; }
  .tc-hero-title { color: #111827 !important; font-size: 1.8rem !important; }
  .tc-hero-desc { color: #4b5563 !important; }
  .tc-hero-center .btn-primary { display: none !important; }
  .tc-policy-section { background: #fff !important; padding: 1rem 0 !important; }
  .tc-policy-wrap { gap: .75rem !important; }
  .rp-card { box-shadow: none !important; border: 1px solid #d1d5db !important; page-break-inside: avoid; }
  .rp-warn-box, .rp-info-box, .rp-note-box, .rp-blue-box, .rp-orange-box {
    border: 1px solid #d1d5db !important; background: #f9fafb !important;
  }
  .rp-card-icon { filter: grayscale(1); }
  .rp-divider-label { background: #f3f4f6 !important; color: #374151 !important; border-color: #d1d5db !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .68rem; color: #6b7280; }
  footer.site-footer .footer-main { display: none !important; }
  .footer-bottom { border-top: 1px solid #d1d5db !important; background: #fff !important; }
  .footer-bottom p, .footer-bottom a { color: #374151 !important; }
}

/* ======================================
   Privacy Policy Page
====================================== */

/* ── Hero ── */
.pp-hero {
  background: linear-gradient(160deg, var(--dark-hero) 0%, var(--dark-surface) 55%, #0d2a17 100%);
  padding: 3.25rem 0 2.5rem;
  position: relative; overflow: hidden;
}
.pp-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(57,185,90,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,185,90,.06) 1px, transparent 1px);
  background-size: 50px 50px; pointer-events: none; z-index: 0;
}
.pp-hero-orb {
  position: absolute; border-radius: 9999px; filter: blur(80px);
  pointer-events: none; z-index: 0;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(57,185,90,.18), rgba(44,156,76,.07), transparent 70%);
  top: -110px; right: -70px;
}
.pp-hero-center {
  text-align: center; max-width: 680px;
  margin: 0 auto; position: relative; z-index: 1;
}
.pp-hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(57,185,90,.13); border: 1px solid rgba(57,185,90,.3);
  color: rgba(255,255,255,.9); font-size: .7rem; font-weight: 700;
  padding: .38rem 1rem; border-radius: 9999px;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1.35rem; backdrop-filter: blur(8px);
}
.pp-hero-badge-dot {
  width: .38rem; height: .38rem; border-radius: 9999px;
  background: #FFD60A; box-shadow: 0 0 0 3px rgba(255,214,10,.22);
  flex-shrink: 0; display: inline-block;
}
.pp-hero-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  color: #fff; margin-bottom: 1rem;
}
.pp-hero-desc {
  color: rgba(255,255,255,.68); font-size: .97rem; line-height: 1.8;
  max-width: 560px; margin: 0 auto 1.75rem;
}

/* ── Policy Content ── */
.pp-policy-section { padding: 4rem 0 5rem; background: var(--bg); }
.pp-policy-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
#pp-content { scroll-margin-top: 88px; }

/* ── Policy inline links ── */
.pp-policy-link {
  color: var(--brand-600); font-weight: 600;
  text-decoration: none; transition: color .2s;
}
.pp-policy-link:hover { color: var(--brand-700); text-decoration: underline; }

/* ── Spacing: list → box ── */
.pp-policy-wrap .rp-list + .rp-info-box,
.pp-policy-wrap .rp-list + .rp-warn-box,
.pp-policy-wrap .rp-list + .rp-note-box,
.pp-policy-wrap .rp-list + .rp-blue-box,
.pp-policy-wrap .rp-list + .rp-orange-box { margin-top: .85rem; }

/* ── Scroll margin for anchor links ── */
#pp-introduction, #pp-personal-info, #pp-account-info,
#pp-payment-info, #pp-auto-data, #pp-use-info,
#pp-legal-basis, #pp-cookies, #pp-sharing,
#pp-third-party, #pp-legal-disclosure, #pp-security,
#pp-data-retention, #pp-email-comms, #pp-customer-rights,
#pp-children, #pp-server-logs, #pp-client-area,
#pp-domain-info, #pp-international-transfers,
#pp-policy-changes, #pp-contact {
  scroll-margin-top: 88px;
}

/* ── Focus-visible rings ── */
.pp-policy-link:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Mobile tweaks ── */
@media (max-width: 640px) {
  .pp-hero { padding: 2.75rem 0 2rem; }
  .pp-policy-section { padding: 3rem 0 4rem; }
  .pp-policy-wrap { gap: 1rem; }
}

/* ======================================
   Unlimited Usage Policy Page
   ====================================== */

/* Scroll anchor offset — accounts for sticky header height */
#up-content { scroll-margin-top: 88px; }

/* Mobile tweaks */
@media (max-width: 640px) {
  #up-content .tc-policy-wrap { gap: 1rem; }
}

/* Print styles */
@media print {
  .top-bar, #header, #toTop, .tc-cta-section, .tc-related-section, .rp-glance-section { display: none !important; }
  .tc-hero {
    background: #fff !important; padding: 1.5rem 0 !important;
    border-bottom: 2px solid #d1d5db;
  }
  .tc-hero-grid, .tc-hero-orb { display: none !important; }
  .tc-hero-badge {
    background: #f3f4f6 !important; color: #374151 !important;
    border-color: #d1d5db !important; backdrop-filter: none !important;
  }
  .tc-hero-badge-dot { background: #6b7280 !important; box-shadow: none !important; }
  .tc-hero-title { color: #111827 !important; font-size: 1.8rem !important; }
  .tc-hero-desc { color: #4b5563 !important; }
  .tc-hero-center .btn-primary { display: none !important; }
  .tc-policy-section { background: #fff !important; padding: 1rem 0 !important; }
  .tc-policy-wrap { gap: .75rem !important; }
}

/* ======================================
   Acceptable Use Policy Page
   ====================================== */
#aup-content { scroll-margin-top: 88px; }
@media (max-width: 640px) {
  #aup-content .tc-policy-wrap { gap: 1rem; }
}

/* ======================================
   DMCA Policy Page
   ====================================== */
#dmca-content { scroll-margin-top: 88px; }
@media (max-width: 640px) {
  #dmca-content .tc-policy-wrap { gap: 1rem; }
}

/* ======================================
   Affiliate Program Page
   ====================================== */

/* Hero */
.af-hero {
  position: relative;
  background: linear-gradient(160deg, #051209 0%, #081810 40%, #0d2818 70%, #081810 100%);
  padding: 5rem 0 4.5rem;
  overflow: hidden;
}
.af-hero-grid-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(57,185,90,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(57,185,90,.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.af-hero-orb-1 {
  position: absolute; top: -6rem; right: -6rem; z-index: 0;
  width: 36rem; height: 36rem; border-radius: 9999px;
  background: radial-gradient(circle, rgba(44,156,76,.18) 0%, transparent 70%);
  pointer-events: none;
}
.af-hero-orb-2 {
  position: absolute; bottom: -8rem; left: -8rem; z-index: 0;
  width: 32rem; height: 32rem; border-radius: 9999px;
  background: radial-gradient(circle, rgba(57,185,90,.10) 0%, transparent 70%);
  pointer-events: none;
}
.af-hero-center {
  text-align: center;
  max-width: 840px;
  margin: 0 auto;
}
.af-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #86efac;
  background: rgba(44,156,76,.15); border: 1px solid rgba(44,156,76,.35);
  border-radius: 9999px; padding: .35rem 1rem;
  margin-bottom: 1.5rem;
}
.af-hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #39B95A;
  box-shadow: 0 0 0 3px rgba(57,185,90,.25);
  animation: pulse 2s ease-in-out infinite;
}
.af-hero-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1.25rem;
}
.af-hero-desc {
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  line-height: 1.75;
  color: rgba(167,205,179,.9);
  max-width: 600px;
  margin: 0 auto 2rem;
}
.af-hero-desc strong { color: #A7CDB3; font-weight: 700; }
.af-hero-cta-row {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.af-hero-stats-row {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: center; align-items: center;
  padding: 1.5rem 2rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(57,185,90,.15);
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  max-width: 640px;
  margin: 0 auto;
}
.af-hero-stat { text-align: center; }
.af-hero-stat-val {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  line-height: 1.2;
}
.af-hero-stat-lbl {
  font-size: .72rem; font-weight: 600;
  color: rgba(167,205,179,.8);
  text-transform: uppercase; letter-spacing: .06em;
  margin-top: .2rem;
}
.af-hero-stat-divider {
  width: 1px; height: 2.5rem;
  background: rgba(57,185,90,.22);
}
@media (max-width: 480px) {
  .af-hero-stat-divider { display: none; }
  .af-hero-stats-row { gap: 1rem; padding: 1.25rem 1rem; }
  .af-hero-stat-val { font-size: 1.05rem; }
}

/* Commission Modal */
.af-modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.af-modal-overlay--active {
  opacity: 1; pointer-events: auto;
}
.af-modal {
  background: #fff; border-radius: 1.25rem;
  width: 100%; max-width: 680px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 80px -20px rgba(0,0,0,.4), 0 0 0 1px rgba(44,156,76,.1);
  transform: scale(.96) translateY(8px);
  transition: transform .25s ease;
}
.af-modal-overlay--active .af-modal {
  transform: scale(1) translateY(0);
}
.af-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: #fff; z-index: 1;
  border-radius: 1.25rem 1.25rem 0 0;
}
.af-modal-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-weight: 800; font-size: 1.3rem;
  color: var(--dark-text);
  margin: 0 0 .2rem;
}
.af-modal-subtitle { font-size: .82rem; color: #6b7280; margin: 0; }
.af-modal-close {
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: .5rem; border: 1px solid var(--border);
  color: #6b7280; background: transparent;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
  margin-left: 1rem;
}
.af-modal-close:hover { background: #f3f4f6; color: var(--dark-text); }
.af-modal-body { padding: 1.5rem 1.75rem 2rem; }
.af-modal-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
  border-radius: .75rem;
  border: 1px solid var(--border);
}
.af-commission-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.af-commission-table thead { background: var(--brand-50); }
.af-commission-table th {
  padding: .75rem 1rem;
  text-align: left;
  font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand-700);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.af-commission-table td {
  padding: .75rem 1rem;
  color: var(--dark-text);
  border-bottom: 1px solid rgba(214,238,223,.5);
  vertical-align: middle;
}
.af-commission-table tbody tr:last-child td { border-bottom: none; }
.af-commission-table tbody tr:hover { background: rgba(237,249,241,.5); }
.af-com-badge {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 9999px;
  letter-spacing: .02em; white-space: nowrap;
}
.af-com-badge--green  { background: #dcfce7; color: #15803d; }
.af-com-badge--red    { background: #fef2f2; color: #dc2626; }
.af-com-badge--yellow { background: #fef9c3; color: #a16207; }
.af-com-row--muted td { opacity: .65; }
.af-modal-cta { display: flex; justify-content: center; padding-top: .5rem; }

/* How It Works */
.af-steps-section { background: var(--bg); }
.af-steps-grid {
  display: flex; align-items: stretch; justify-content: center;
  flex-wrap: wrap;
}
.af-step-card {
  background: #fff; border-radius: 1.25rem;
  padding: 2.25rem 2rem;
  flex: 1; min-width: 240px; max-width: 320px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.af-step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.af-step-num {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: .72rem; font-weight: 800;
  color: var(--brand-500); letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: .9rem;
}
.af-step-icon { font-size: 2.5rem; margin-bottom: 1rem; line-height: 1; }
.af-step-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-weight: 700; font-size: 1.05rem;
  color: var(--dark-text); margin-bottom: .6rem;
}
.af-step-desc { font-size: .875rem; line-height: 1.7; color: #4b5563; margin-bottom: 1.25rem; }
.af-step-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 700;
  color: var(--brand-500); text-decoration: none;
  transition: gap .15s ease, color .15s ease;
}
.af-step-link:hover { color: var(--brand-700); gap: .55rem; }
.af-step-connector {
  display: flex; align-items: center; justify-content: center;
  width: 48px; flex-shrink: 0; opacity: .4; align-self: center;
}
@media (max-width: 800px) {
  .af-steps-grid { flex-direction: column; gap: 1rem; align-items: stretch; }
  .af-step-card { max-width: 100%; }
  .af-step-connector { transform: rotate(90deg); width: 100%; height: 32px; }
}

/* Why Join Features Grid */
.af-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.af-feature-card {
  background: #fff; border-radius: 1.25rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.af-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.af-feature-icon {
  width: 3rem; height: 3rem;
  border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1rem;
}
.af-feature-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-weight: 700; font-size: 1rem;
  color: var(--dark-text); margin-bottom: .5rem;
}
.af-feature-desc { font-size: .875rem; line-height: 1.7; color: #4b5563; }
@media (max-width: 1024px) { .af-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .af-features-grid { grid-template-columns: 1fr; } }

/* Why Promote HostLaza */
.af-promote-section {
  background: linear-gradient(160deg, #051209 0%, #081810 50%, #0d2818 100%);
  position: relative; overflow: hidden;
}
.af-promote-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items: start;
}
.af-promote-list { display: flex; flex-direction: column; gap: 1.75rem; }
.af-promote-item { display: flex; gap: 1rem; align-items: flex-start; }
.af-promote-item-icon {
  font-size: 1.3rem; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(44,156,76,.15);
  border: 1px solid rgba(44,156,76,.3);
  border-radius: .75rem;
}
.af-promote-item-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-weight: 700; font-size: .975rem;
  color: #fff; margin-bottom: .35rem;
}
.af-promote-item-desc { font-size: .86rem; line-height: 1.7; color: rgba(167,205,179,.85); }
.af-promote-stat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(57,185,90,.2);
  border-radius: 1.5rem; padding: 2rem;
  backdrop-filter: blur(8px);
}
.af-promote-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.af-promote-stat {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(57,185,90,.12);
  border-radius: 1rem; padding: 1.25rem;
  text-align: center;
}
.af-promote-stat-val {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-weight: 800; font-size: 1.6rem;
  color: #fff; line-height: 1.2;
}
.af-promote-stat-val span { color: var(--accent-green); font-size: 1.1rem; }
.af-promote-stat-lbl {
  font-size: .72rem; font-weight: 600;
  color: var(--light-text); text-transform: uppercase;
  letter-spacing: .06em; margin-top: .3rem;
}
.af-promote-badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.af-promote-badge {
  font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(57,185,90,.18);
  border-radius: 9999px; padding: .3rem .75rem;
  color: rgba(167,205,179,.9);
}
@media (max-width: 1024px) { .af-promote-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* Affiliate Benefits */
.af-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.af-benefit-item {
  display: flex; align-items: flex-start; gap: 1rem;
  background: #fff; border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.af-benefit-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.af-benefit-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; margin-top: .1rem; }
.af-benefit-title { font-weight: 700; font-size: .875rem; color: var(--dark-text); margin-bottom: .3rem; }
.af-benefit-desc { font-size: .8rem; line-height: 1.6; color: #6b7280; }
@media (max-width: 1024px) { .af-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .af-benefits-grid { grid-template-columns: 1fr; } }

/* Scroll anchors */
#how-it-works, #why-join, #why-promote, #affiliate-benefits, #affiliate-faq, #affiliate-cta {
  scroll-margin-top: 88px;
}

/* ── Print styles ── */
@media print {
  .top-bar, #header, #toTop, .tc-cta-section, .tc-related-section { display: none !important; }
  .pp-hero {
    background: #fff !important; padding: 1.5rem 0 !important;
    border-bottom: 2px solid #d1d5db;
  }
  .pp-hero-grid, .pp-hero-orb { display: none !important; }
  .pp-hero-badge {
    background: #f3f4f6 !important; color: #374151 !important;
    border-color: #d1d5db !important; backdrop-filter: none !important;
  }
  .pp-hero-badge-dot { background: #6b7280 !important; box-shadow: none !important; }
  .pp-hero-title { color: #111827 !important; font-size: 1.8rem !important; }
  .pp-hero-desc { color: #4b5563 !important; }
  .pp-hero-center .btn-primary { display: none !important; }
  .pp-policy-section { background: #fff !important; padding: 1rem 0 !important; }
  .pp-policy-wrap { gap: .75rem !important; }
  .rp-card { box-shadow: none !important; border: 1px solid #d1d5db !important; page-break-inside: avoid; }
  .rp-warn-box, .rp-info-box, .rp-note-box, .rp-blue-box {
    border: 1px solid #d1d5db !important; background: #f9fafb !important;
  }
  .rp-card-icon { filter: grayscale(1); }
  .rp-divider-label { background: #f3f4f6 !important; color: #374151 !important; border-color: #d1d5db !important; }
  .rp-glance-section { border: 1px solid #ccc; background: #fff !important; }
  .rp-glance-card { box-shadow: none !important; border: 1px solid #ccc !important; background: #fff !important; }
  footer.site-footer .footer-main { display: none !important; }
  .footer-bottom { border-top: 1px solid #d1d5db !important; background: #fff !important; }
  .footer-bottom p, .footer-bottom a { color: #374151 !important; }
}

/* ======================================
   Contact Us Page
====================================== */

/* ── Section scroll offset (sticky header) ── */
#cu-form-section,
#cu-contact { scroll-margin-top: 88px; }

/* ── Get In Touch section ── */
.cu-info-section { padding: 4rem 0 1rem; background: var(--bg); }
.cu-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  max-width: 1080px;
  margin: 2rem auto 0;
}
.cu-info-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.85rem 1.35rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  box-shadow: var(--shadow-card);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
  position: relative;
  overflow: hidden;
}
.cu-info-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--accent-green));
  opacity: 0;
  transition: opacity .28s ease;
}
.cu-info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(44,156,76,.32);
}
.cu-info-card:hover::before { opacity: 1; }
.cu-info-icon {
  width: 3.4rem; height: 3.4rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #D6EEDF, #edf9f1);
  border: 1px solid rgba(44,156,76,.18);
  box-shadow: 0 6px 16px -8px rgba(44,156,76,.45);
  margin-bottom: .3rem;
}
.cu-info-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 1rem; font-weight: 700; color: var(--dark-text);
}
.cu-info-text {
  font-size: .86rem; line-height: 1.6; color: #4a6860;
}
.cu-info-text a { color: var(--brand-600); font-weight: 600; text-decoration: none; transition: color .2s; }
.cu-info-text a:hover { color: var(--brand-700); text-decoration: underline; }

/* ── Contact Form section ── */
.cu-form-section { padding: 3.5rem 0 4.5rem; background: var(--bg); }
.cu-form-shell {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* Left intro panel (dark) */
.cu-form-aside {
  background: linear-gradient(160deg, var(--dark-hero) 0%, var(--dark-surface) 60%, #0d2a17 100%);
  padding: 2.75rem 2.25rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cu-form-aside-orb {
  position: absolute; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(57,185,90,.22), transparent 70%);
  border-radius: 9999px; bottom: -80px; left: -60px;
  filter: blur(55px); pointer-events: none;
}
.cu-form-aside-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(57,185,90,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,185,90,.05) 1px, transparent 1px);
  background-size: 42px 42px; pointer-events: none;
}
.cu-aside-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(57,185,90,.13); border: 1px solid rgba(57,185,90,.3);
  color: rgba(255,255,255,.9); font-size: .68rem; font-weight: 700;
  padding: .35rem .9rem; border-radius: 9999px;
  letter-spacing: .06em; text-transform: uppercase;
  position: relative; z-index: 1; width: fit-content; margin-bottom: 1.1rem;
}
.cu-aside-badge-dot {
  width: .38rem; height: .38rem; border-radius: 9999px;
  background: #FFD60A; box-shadow: 0 0 0 3px rgba(255,214,10,.22);
  flex-shrink: 0; display: inline-block;
}
.cu-aside-title {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em;
  color: #fff; margin-bottom: .75rem; position: relative; z-index: 1;
}
.cu-aside-desc {
  font-size: .88rem; line-height: 1.7; color: rgba(255,255,255,.68);
  position: relative; z-index: 1; margin-bottom: 1.5rem;
}
.cu-aside-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .7rem;
  position: relative; z-index: 1;
}
.cu-aside-list li {
  display: flex; align-items: center; gap: .65rem;
  font-size: .85rem; color: rgba(255,255,255,.82);
}
.cu-aside-check {
  flex-shrink: 0; width: 1.35rem; height: 1.35rem; border-radius: 9999px;
  background: rgba(57,185,90,.18); border: 1px solid rgba(57,185,90,.4);
  display: flex; align-items: center; justify-content: center;
  color: #6ee7a0; font-size: .7rem;
}

/* Right form panel */
.cu-form-body { padding: 2.75rem 2.25rem; }
.cu-form-heading {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 1.3rem; font-weight: 800; color: var(--dark-text);
  margin-bottom: .35rem;
}
.cu-form-subheading {
  font-size: .87rem; color: #4a6860; line-height: 1.6; margin-bottom: 1.6rem;
}
.cu-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem 1rem;
}
.cu-field { position: relative; }
.cu-field--full { grid-column: 1 / -1; }

/* Floating-label inputs */
.cu-input,
.cu-select,
.cu-textarea {
  width: 100%;
  font-family: inherit;
  font-size: .9rem;
  color: var(--dark-text);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: .85rem;
  padding: 1.25rem .95rem .5rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.cu-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.cu-input::placeholder,
.cu-textarea::placeholder { color: transparent; }
.cu-input:focus,
.cu-select:focus,
.cu-textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(44,156,76,.12);
  background: #fff;
}

/* Floating label */
.cu-flabel {
  position: absolute;
  left: 1rem; top: .95rem;
  font-size: .9rem; color: #8aa597;
  pointer-events: none;
  transition: top .18s ease, font-size .18s ease, color .18s ease, letter-spacing .18s ease;
  background: transparent;
  font-weight: 500;
}
.cu-input:focus + .cu-flabel,
.cu-input:not(:placeholder-shown) + .cu-flabel,
.cu-textarea:focus + .cu-flabel,
.cu-textarea:not(:placeholder-shown) + .cu-flabel,
.cu-select:focus + .cu-flabel,
.cu-select.cu-has-value + .cu-flabel {
  top: .42rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--brand-600);
  letter-spacing: .02em;
}
.cu-flabel .cu-req { color: #dc2626; }

/* Select caret */
.cu-select-wrap { position: relative; }
.cu-select { padding-right: 2.4rem; cursor: pointer; color: var(--dark-text); }
.cu-select.cu-placeholder { color: #8aa597; }
.cu-select-caret {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 1.1rem; height: 1.1rem; color: #6b8a78; pointer-events: none;
}

/* Error states */
.cu-error-msg {
  display: none;
  font-size: .72rem; font-weight: 600; color: #dc2626;
  margin-top: .35rem; padding-left: .15rem;
}
.cu-field.cu-invalid .cu-input,
.cu-field.cu-invalid .cu-select,
.cu-field.cu-invalid .cu-textarea {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,.1);
}
.cu-field.cu-invalid .cu-error-msg { display: block; }
.cu-field.cu-invalid .cu-flabel { color: #dc2626; }

/* CAPTCHA placeholder */
.cu-captcha {
  grid-column: 1 / -1;
  margin-top: .25rem;
}
.cu-captcha-box {
  min-height: 78px;
  border: 1.5px dashed var(--border);
  border-radius: .85rem;
  background: linear-gradient(135deg, #f8fdfa, #edf9f1);
  display: flex; align-items: center; justify-content: center;
  gap: .6rem;
  color: #6b8a78; font-size: .82rem; font-weight: 500;
  text-align: center; padding: .85rem 1rem;
}
.cu-captcha-box svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--brand-500); }

/* Consent + submit */
.cu-consent {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .8rem; color: #4a6860; line-height: 1.5;
}
.cu-consent input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; margin-top: .1rem;
  accent-color: var(--brand-600); flex-shrink: 0; cursor: pointer;
}
.cu-consent a { color: var(--brand-600); font-weight: 600; text-decoration: none; }
.cu-consent a:hover { text-decoration: underline; }
.cu-submit { grid-column: 1 / -1; width: 100%; padding: .95rem 1.5rem; font-size: .95rem; margin-top: .25rem; }

/* Success / status message */
.cu-form-status {
  grid-column: 1 / -1;
  display: none;
  align-items: center; gap: .6rem;
  padding: .9rem 1.1rem;
  border-radius: .85rem;
  font-size: .85rem; font-weight: 600;
  line-height: 1.5;
}
.cu-form-status.cu-status-success {
  display: flex;
  background: #ecfdf3; border: 1px solid #abefc6; color: #15803d;
}
.cu-form-status.cu-status-error {
  display: flex;
  background: #fef2f2; border: 1px solid #fecaca; color: #dc2626;
}
.cu-form-status svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }

/* ── Why Contact HostLaza ── */
.cu-why-section { padding: 1.5rem 0 4.5rem; background: var(--bg); }
.cu-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1080px;
  margin: 2rem auto 0;
}
.cu-why-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 1.1rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cu-why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(44,156,76,.32);
}
.cu-why-icon {
  width: 2.9rem; height: 2.9rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; border-radius: .9rem;
  background: linear-gradient(135deg, #D6EEDF, #edf9f1);
  border: 1px solid rgba(44,156,76,.18);
}
.cu-why-title { font-size: .92rem; font-weight: 700; color: var(--dark-text); }
.cu-why-desc { font-size: .76rem; color: #6b7280; line-height: 1.5; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .cu-form-shell { grid-template-columns: 1fr; }
  .cu-form-aside { padding: 2.25rem 2rem; }
}
@media (max-width: 860px) {
  .cu-info-grid { grid-template-columns: repeat(2, 1fr); }
  .cu-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cu-info-section { padding: 3rem 0 .5rem; }
  .cu-form-section { padding: 2.5rem 0 3.5rem; }
  .cu-form-body { padding: 2rem 1.4rem; }
  .cu-form-aside { padding: 2rem 1.5rem; }
  .cu-form-grid { grid-template-columns: 1fr; }
  .cu-why-section { padding: 1rem 0 3.5rem; }
}
@media (max-width: 480px) {
  .cu-info-grid { grid-template-columns: 1fr; }
  .cu-why-grid { grid-template-columns: 1fr; }
  .cu-form-shell { border-radius: 1.25rem; }
  .cu-aside-title { font-size: 1.3rem; }
}

/* ── Submit button spinner ── */
@keyframes cu-rotate { to { transform: rotate(360deg); } }
.cu-spin { animation: cu-rotate .75s linear infinite; flex-shrink: 0; }

/* ── Accessibility: focus-visible rings ── */
.cu-input:focus-visible,
.cu-select:focus-visible,
.cu-textarea:focus-visible { outline: none; }
.cu-consent input[type="checkbox"]:focus-visible,
.cu-submit:focus-visible {
  outline: 2.5px solid var(--brand-600);
  outline-offset: 3px;
}
.cu-info-text a:focus-visible,
.cu-consent a:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: .25rem;
}

/* ── Honour reduced-motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  .cu-info-card,
  .cu-why-card,
  .cu-input,
  .cu-select,
  .cu-textarea,
  .cu-flabel { transition: none !important; }
  .cu-info-card:hover,
  .cu-why-card:hover { transform: none; }
}

/* =====================================================================
   SHARED HOSTING — HERO IMAGE + FLOATING FEATURE CARDS
   ===================================================================== */

.sh-hero-right { position: relative; }

.sh-hero-img-wrap {
  position: relative;
  width: 100%;
}

.sh-hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 24px 64px rgba(0,0,0,.52),
    0 0 0 1px rgba(57,185,90,.16),
    0 0 70px rgba(57,185,90,.09);
  position: relative;
  z-index: 1;
}

/* Card columns – compact, absolutely positioned over image edges */
.sh-cards-left,
.sh-cards-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 116px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 10px 0;
  z-index: 5;
}
.sh-cards-left  { left:  -72px; }
.sh-cards-right { right: -62px; }

/* Float wrappers — independent rotation + vertical float per card */
.sh-float-1 { rotate: -3deg; animation: shFloatY 4.5s ease-in-out infinite 0.00s; }
.sh-float-2 { rotate:  1deg; animation: shFloatY 5.0s ease-in-out infinite 0.70s; }
.sh-float-3 { rotate: -2deg; animation: shFloatY 4.7s ease-in-out infinite 1.40s; }
.sh-float-4 { rotate:  3deg; animation: shFloatY 5.2s ease-in-out infinite 0.35s; }
.sh-float-5 { rotate: -2deg; animation: shFloatY 4.8s ease-in-out infinite 1.05s; }
.sh-float-6 { rotate:  2deg; animation: shFloatY 5.1s ease-in-out infinite 1.75s; }

@keyframes shFloatY {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-8px); }
}

/* ── Individual feature card ── */
.sh-feat-card {
  background: linear-gradient(145deg, rgba(10,30,16,.97) 0%, rgba(5,18,10,.95) 100%);
  border: 1px solid rgba(57,185,90,.30);
  border-radius: 17px;
  padding: 6px 11px;
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow:
    0 4px 20px rgba(0,0,0,.55),
    0 0 18px rgba(57,185,90,.1),
    0 0 0 1px rgba(57,185,90,.07),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: default;
  position: relative;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* Top-edge shimmer */
.sh-feat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57,185,90,.48), transparent);
  pointer-events: none;
}

.sh-feat-card:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(57,185,90,.58);
  box-shadow:
    0 12px 36px rgba(0,0,0,.6),
    0 0 28px rgba(57,185,90,.22),
    0 0 0 1px rgba(57,185,90,.22),
    inset 0 1px 0 rgba(255,255,255,.09);
}

/* ── Circular icon container ── */
.sh-feat-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    rgba(57,185,90,.60) 0%,
    rgba(44,156,76,.35) 45%,
    rgba(8,32,16,.85) 100%);
  border: 1px solid rgba(57,185,90,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 0 14px rgba(57,185,90,.35),
    0 0 6px rgba(57,185,90,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
  position: relative;
}

/* India mini-flag badge */
.sh-india-flag {
  position: absolute;
  bottom: -4px;
  right: -4px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  line-height: 0;
  display: block;
}

/* ── Card text ── */
.sh-feat-text { flex: 1; min-width: 0; }

.sh-feat-title {
  font-family: 'Poppins', sans-serif;
  font-size: .67rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.22;
  letter-spacing: -.01em;
}

.sh-feat-sub {
  font-family: 'Poppins', sans-serif;
  font-size: .585rem;
  font-weight: 600;
  color: #39B95A;
  line-height: 1.3;
  margin-top: 2px;
}

.sh-feat-sub2 {
  font-family: 'Poppins', sans-serif;
  font-size: .545rem;
  font-weight: 500;
  color: rgba(255,255,255,.38);
  line-height: 1.25;
}

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
  .sh-cards-left, .sh-cards-right { width: 104px; padding: 8px 0; }
  .sh-feat-card { padding: 8px 9px; gap: 7px; border-radius: 14px; }
  .sh-feat-icon { width: 28px; height: 28px; min-width: 28px; }
  .sh-feat-title { font-size: .6rem; }
  .sh-feat-sub  { font-size: .54rem; }
  .sh-feat-sub2 { font-size: .5rem; }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .sh-cards-left  { left: -5px; width: 90px; }
  .sh-cards-right { right: -5px; width: 90px; }
  .sh-float-1,.sh-float-2,.sh-float-3,
  .sh-float-4,.sh-float-5,.sh-float-6 { rotate: 0deg; }
  .sh-feat-card { padding: 7px 8px; gap: 5px; border-radius: 12px; }
  .sh-feat-icon { width: 24px; height: 24px; min-width: 24px; }
  .sh-feat-icon svg { width: 12px; height: 12px; }
  .sh-feat-title { font-size: .54rem; }
  .sh-feat-sub  { font-size: .5rem; }
  .sh-feat-sub2 { font-size: .46rem; }
  .sh-india-flag svg { width: 10px; height: 7px; }
}

/* Honour reduced-motion for floating cards */
@media (prefers-reduced-motion: reduce) {
  .sh-float-1, .sh-float-2, .sh-float-3,
  .sh-float-4, .sh-float-5, .sh-float-6 { animation: none; }
}

/* ── Print styles ── */
@media print {
  .cu-form-section, .tc-cta-section { background: #fff !important; }
  .cu-form-aside {
    background: #f3f4f6 !important;
  }
  .cu-form-aside-grid, .cu-form-aside-orb { display: none !important; }
  .cu-aside-badge, .cu-aside-title, .cu-aside-desc, .cu-aside-list li { color: #374151 !important; }
  .cu-info-card, .cu-why-card, .cu-form-shell {
    box-shadow: none !important; border: 1px solid #d1d5db !important;
    page-break-inside: avoid;
  }
  .cu-captcha-box { display: none !important; }
}

/* ======================================
   Login Page
====================================== */

/* ── Section wrapper ── */
.login-section {
  min-height: calc(100vh - 108px);
  display: flex; align-items: center; justify-content: center;
  padding: 3.5rem 1rem 5rem;
  position: relative; overflow: hidden;
  background: var(--bg);
}

/* Subtle background decorations */
.login-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(44,156,76,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,156,76,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none; z-index: 0;
}
.login-bg-orb-1 {
  position: absolute; border-radius: 9999px; filter: blur(100px);
  pointer-events: none; z-index: 0;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(57,185,90,.11), rgba(44,156,76,.04), transparent 70%);
  top: -180px; right: -100px;
}
.login-bg-orb-2 {
  position: absolute; border-radius: 9999px; filter: blur(80px);
  pointer-events: none; z-index: 0;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(57,185,90,.08), transparent 70%);
  bottom: -80px; left: -80px;
}

/* ── Card ── */
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 468px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 1.75rem;
  padding: 2.85rem 2.6rem;
  box-shadow: 0 4px 6px -2px rgba(44,156,76,.06), 0 28px 64px -18px rgba(16,35,26,.14);
  animation: loginCardEntrance .55s cubic-bezier(.2,.8,.2,1) both;
}
.login-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500), var(--accent-green));
  border-radius: 1.75rem 1.75rem 0 0;
}
@keyframes loginCardEntrance {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Card logo ── */
.login-logo { margin-bottom: 1.75rem; }
.login-logo img { height: 2.15rem; width: auto; }

/* ── Badge ── */
.login-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-600);
  background: linear-gradient(135deg, #D6EEDF, #edf9f1);
  border: 1px solid rgba(44,156,76,.22);
  padding: .35rem .85rem; border-radius: 9999px;
  box-shadow: 0 2px 6px -2px rgba(44,156,76,.18);
  margin-bottom: 1rem;
}
.login-badge-dot {
  width: .35rem; height: .35rem; border-radius: 9999px;
  background: var(--brand-500); flex-shrink: 0;
}

/* ── Heading ── */
.login-heading {
  font-family: 'Plus Jakarta Sans', Poppins, sans-serif;
  font-size: 1.7rem; font-weight: 800;
  color: var(--dark-text); line-height: 1.18;
  letter-spacing: -.025em; margin-bottom: .45rem;
}
.login-sub {
  font-size: .88rem; color: #4a6860;
  line-height: 1.65; margin-bottom: 1.85rem;
}

/* ── Alert banner (error / success) ── */
.login-alert {
  display: none;
  align-items: flex-start; gap: .6rem;
  padding: .85rem 1rem;
  border-radius: .85rem;
  font-size: .82rem; font-weight: 500;
  line-height: 1.55;
  margin-bottom: 1.2rem;
}
.login-alert svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.login-alert--error  { display: flex; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.login-alert--success { display: flex; background: #ecfdf3; border: 1px solid #abefc6; color: #15803d; }

/* ── Form fields ── */
.login-fields { display: flex; flex-direction: column; gap: 1.2rem; }
.login-field { position: relative; }

.login-label {
  display: block;
  font-size: .79rem; font-weight: 600;
  color: var(--dark-text); margin-bottom: .42rem;
  letter-spacing: .01em;
}
.login-label .login-req { color: #dc2626; }

.login-label-row {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: .5rem;
  margin-bottom: .42rem;
}
.login-label-row .login-label { margin-bottom: 0; }

.login-input {
  width: 100%;
  font-family: inherit; font-size: .92rem;
  color: var(--dark-text);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: .85rem;
  padding: .82rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none; -webkit-appearance: none;
}
.login-input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(44,156,76,.12);
}
.login-input::placeholder { color: #b0cabb; }

/* Password wrapper + toggle */
.login-pwd-wrap { position: relative; }
.login-pwd-wrap .login-input { padding-right: 3rem; }
.login-pwd-toggle {
  position: absolute; right: .82rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; padding: .3rem;
  cursor: pointer; color: #7ba896;
  display: flex; align-items: center;
  transition: color .2s; border-radius: .4rem;
  line-height: 0;
}
.login-pwd-toggle:hover { color: var(--brand-600); }
.login-pwd-toggle:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.login-pwd-toggle svg { width: 1.1rem; height: 1.1rem; pointer-events: none; }
/* Toggle icon swap via wrapper class */
.login-pwd-wrap .icon-eye-off { display: none; }
.login-pwd-wrap.pwd-visible .icon-eye { display: none; }
.login-pwd-wrap.pwd-visible .icon-eye-off { display: block; }

/* Field error state */
.login-error-msg {
  display: none;
  font-size: .72rem; font-weight: 600; color: #dc2626;
  margin-top: .35rem; padding-left: .1rem;
}
.login-field.login-field--invalid .login-input {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,.1);
}
.login-field.login-field--invalid .login-error-msg { display: block; }

/* Forgot password link */
.login-forgot {
  font-size: .79rem; font-weight: 600;
  color: var(--brand-600); text-decoration: none;
  transition: color .2s; white-space: nowrap;
  flex-shrink: 0;
}
.login-forgot:hover { color: var(--brand-700); text-decoration: underline; }

/* ── Remember me ── */
.login-remember-row { margin-top: 1rem; }
.login-remember {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .81rem; color: #4a6860; cursor: pointer;
  user-select: none;
}
.login-remember input[type="checkbox"] {
  width: 1rem; height: 1rem;
  accent-color: var(--brand-600); cursor: pointer; flex-shrink: 0;
}

/* ── Submit button ── */
.login-btn {
  width: 100%; padding: .95rem 1.5rem;
  font-size: .95rem; margin-top: 1.6rem;
  border: none; cursor: pointer;
}

/* ── Divider ── */
.login-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.75rem 0 1.4rem;
  font-size: .76rem; font-weight: 600; color: #b0cabb;
}
.login-divider::before,
.login-divider::after {
  content: ""; flex: 1;
  height: 1px; background: var(--border);
}

/* ── Sign-up prompt ── */
.login-signup {
  text-align: center;
  font-size: .86rem; color: #4a6860;
}
.login-signup a {
  font-weight: 700; color: var(--brand-600);
  text-decoration: none; transition: color .2s;
}
.login-signup a:hover { color: var(--brand-700); text-decoration: underline; }
.login-signup a:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: .25rem; }

/* ── Security note ── */
.login-secure {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: 1.65rem;
  font-size: .73rem; color: #a7c5b4; font-weight: 500;
}
.login-secure svg { width: .9rem; height: .9rem; flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 520px) {
  .login-section { padding: 2.5rem .85rem 4rem; }
  .login-card { padding: 2.25rem 1.5rem; border-radius: 1.35rem; }
  .login-heading { font-size: 1.5rem; }
}
@media (max-width: 360px) {
  .login-card { padding: 1.85rem 1.15rem; }
  .login-heading { font-size: 1.35rem; }
}

/* Issue 4: Extracted repeating inline styles */
.review-verified-badge {
  font-size: .65rem; font-weight: 700;
  background: linear-gradient(135deg, #D6EEDF, #edf9f1);
  color: var(--brand-700); border: 1px solid var(--border);
  padding: .2rem .7rem; border-radius: 9999px;
}
.review-verified-dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand-500); border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
}
.reviewer-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.pc-5col { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
.check-sm { width: 1.15rem; height: 1.15rem; font-size: .65rem; }
.footer-trust-logos {
  display: flex; align-items: center; gap: 1.25rem; margin-top: 1.125rem;
  flex-wrap: nowrap;
}
.footer-trust-logos img {
  height: 38px; width: auto; display: block; object-fit: contain; flex-shrink: 0;
}
/* Keep the DMCA anchor inline-flex so the badge helper script can't push it to block */
.dmca-badge { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
/* Stack logos only on very narrow screens where both can't fit side-by-side */
@media (max-width: 360px) {
  .footer-trust-logos { flex-wrap: wrap; justify-content: flex-start; gap: .75rem; }
}

/* ═══════════════════════════════════════════════════════════
   Hero Image Redesign — New image + floating cards
   Replaces the SVG server rack illustration (preserved in <template>)
═══════════════════════════════════════════════════════════ */
.hero-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Main hero image — static, no animation */
.hero-img {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  border-radius: 1.5rem;
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,.65),
    0 0 0 1px rgba(44,156,76,.18),
    0 0 80px -25px rgba(44,156,76,.40);
}

/* ── Floating card base ─────────────────────────────── */
.hero-fc {
  position: absolute;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 1.1rem;
  box-shadow: 0 16px 52px -8px rgba(0,0,0,.20), 0 0 0 1px rgba(255,255,255,.55);
  padding: .88rem 1.05rem;
  z-index: 2;
  transition: box-shadow .3s ease;
  will-change: transform;
}

.hero-fc:hover {
  box-shadow: 0 28px 72px -8px rgba(0,0,0,.30), 0 0 0 1.5px rgba(44,156,76,.22);
  animation-play-state: paused;
}

/* ── Top-right pricing card ─────────────────────────── */
.hero-fc-top {
  top: -4.5rem;
  right: -1.5rem;
  min-width: 162px;
  animation: fcTopFloat 5s ease-in-out infinite;
}

@keyframes fcTopFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

.hero-fc-tag {
  display: inline-block;
  background: #2C9C4C;
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .07em;
  padding: .2rem .6rem;
  border-radius: 9999px;
  margin-bottom: .52rem;
}

.hero-fc-price-row {
  display: flex;
  align-items: baseline;
  gap: .1rem;
  line-height: 1;
  margin-bottom: .3rem;
}

.hero-fc-cur  { font-size: .9rem; font-weight: 700; color: #111827; }
.hero-fc-amt  { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.88rem; font-weight: 800; color: #111827; }
.hero-fc-yr   { font-size: .75rem; color: #6b7280; font-weight: 500; }
.hero-fc-save { font-size: .72rem; font-weight: 700; color: #2C9C4C; margin: 0 0 .18rem; }
.hero-fc-was  { font-size: .67rem; color: #9ca3af; margin: 0; }
.hero-fc-was s { text-decoration: line-through; }

/* ── Bottom-left features card ──────────────────────── */
.hero-fc-bot {
  bottom: -3.8rem;
  left: -4rem;
  min-width: 185px;
  animation: fcBotFloat 5.5s ease-in-out 0.9s infinite;
}

@keyframes fcBotFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.hero-fc-feat {
  display: flex;
  align-items: center;
  gap: .62rem;
  padding: .38rem 0;
  font-size: .8rem;
  color: #1f2937;
}

.hero-fc-feat + .hero-fc-feat { border-top: 1px solid rgba(0,0,0,.07); }
.hero-fc-feat strong { color: #111827; }

.hero-fc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1200px) {
  .hero-img { max-width: 100%; }
}

@media (max-width: 1024px) {
  .hero-img-wrap { justify-content: center; }
  .hero-fc-top { top: -2.25rem; right: 0; min-width: 148px; padding: .78rem .9rem; }
  .hero-fc-bot { bottom: -2rem; left: 0; min-width: 168px; padding: .78rem .9rem; }
  .hero-fc-amt { font-size: 1.68rem; }
}

@media (max-width: 640px) {
  .hero-fc {
    position: static !important;
    animation: none !important;
    margin: .7rem auto 0;
    max-width: 240px;
    width: 100%;
  }
  .hero-img-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* =====================================================================
   UNLIMITED HOSTING — FLOATING PRICING CARD OVERRIDES
   ===================================================================== */

/* HOT DEAL badge: green gradient variant */
.uh-fc-tag {
  background: linear-gradient(135deg, #1f7a39 0%, #39B95A 100%);
  box-shadow: 0 2px 8px rgba(44,156,76,.32);
}

/* Card sub-headline above price */
.uh-fc-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 .28rem;
  line-height: 1.2;
}

/* Was price + save badge inline */
.uh-fc-was-row {
  display: flex;
  align-items: center;
  gap: .38rem;
  font-size: .67rem;
  color: #9ca3af;
  margin: .12rem 0 .28rem;
}
.uh-fc-was-row s { text-decoration: line-through; }

/* Save percentage pill */
.uh-fc-save-badge {
  background: #dcfce7;
  color: #166534;
  font-size: .59rem;
  font-weight: 700;
  padding: .1rem .44rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* Promotional tagline */
.uh-fc-promo {
  font-size: .61rem;
  font-weight: 600;
  color: #2C9C4C;
  margin: 0;
  letter-spacing: .02em;
}

/* ======================================
   FLOATING WHATSAPP BUTTON
   ====================================== */
#hlz-wa-float {
  position: fixed;
  bottom: 1.75rem;
  left: 1.75rem;
  z-index: 9990;
  width: 3.25rem;
  height: 3.25rem;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 20px -4px rgba(37,211,102,.55), 0 2px 8px rgba(0,0,0,.18);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .2s ease;
  animation: hlz-wa-pulse 2.4s ease-in-out infinite;
}
#hlz-wa-float:hover {
  background: #1ebe5c;
  transform: scale(1.12);
  box-shadow: 0 8px 30px -4px rgba(37,211,102,.65), 0 4px 12px rgba(0,0,0,.2);
  animation: none;
  text-decoration: none;
  color: #fff;
}
@keyframes hlz-wa-pulse {
  0%, 100% { box-shadow: 0 4px 20px -4px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.42); }
  55%       { box-shadow: 0 4px 20px -4px rgba(37,211,102,.55), 0 0 0 11px rgba(37,211,102,0); }
}
@media (max-width: 768px) {
  #hlz-wa-float {
    bottom: 1.25rem;
    left: 1.25rem;
    width: 3rem;
    height: 3rem;
  }
  #hlz-wa-float svg { width: 24px; height: 24px; }
}
@media (max-width: 380px) {
  #hlz-wa-float {
    bottom: 1rem;
    left: 1rem;
    width: 2.75rem;
    height: 2.75rem;
  }
  #hlz-wa-float svg { width: 22px; height: 22px; }
}
@supports (bottom: env(safe-area-inset-bottom)) {
  #hlz-wa-float {
    bottom: calc(1.75rem + env(safe-area-inset-bottom));
    left: calc(1.75rem + env(safe-area-inset-left));
  }
}
@media (max-width: 768px) {
  @supports (bottom: env(safe-area-inset-bottom)) {
    #hlz-wa-float {
      bottom: calc(1.25rem + env(safe-area-inset-bottom));
      left: calc(1.25rem + env(safe-area-inset-left));
    }
  }
}