/* =============================================================================
   PEERYX — peeryx-v120-system.css
   Design system tokens + premium homepage overhaul (correct selectors)
   Cascade position: after v119-responsive.css (highest specificity layer)
   Uses html body prefix (0,1,1) to win over v113's single-class rules.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────
   §0  DESIGN TOKENS
───────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --px120-bg-base:      #020814;
  --px120-bg-surface:   #060F20;
  --px120-bg-elevated:  #0A1628;
  --px120-bg-card:      rgba(8, 18, 40, 0.72);
  --px120-bg-card-alt:  rgba(5, 14, 32, 0.85);

  /* Accents */
  --px120-teal:         #00C896;
  --px120-teal-bright:  #00E0A8;
  --px120-blue:         #157CFF;
  --px120-blue-bright:  #36E2FF;
  --px120-cta-bg:       #008F6B;
  --px120-cta-hover:    #009E78;

  /* Gradient */
  --px120-grad:         linear-gradient(135deg, #157CFF 0%, #00C896 100%);
  --px120-grad-hero:    linear-gradient(100deg, #4F7BFF 0%, #36E2FF 52%, #8A78FF 100%);
  --px120-grad-card:    linear-gradient(135deg, rgba(21,124,255,0.08) 0%, rgba(0,200,150,0.08) 100%);

  /* Borders */
  --px120-border:       rgba(0, 200, 150, 0.12);
  --px120-border-blue:  rgba(54, 130, 255, 0.14);
  --px120-border-glow:  rgba(0, 224, 168, 0.30);

  /* Text */
  --px120-text:         #F5FBFF;
  --px120-text-muted:   #8DAABE;
  --px120-text-dim:     #536880;

  /* Radius */
  --px120-r-sm:   8px;
  --px120-r-md:   12px;
  --px120-r-lg:   16px;
  --px120-r-xl:   20px;

  /* Shadow */
  --px120-shadow-card:  0 4px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  --px120-shadow-glow:  0 0 0 1px var(--px120-border), 0 8px 40px rgba(0, 200, 150, 0.12);
  --px120-shadow-btn:   0 0 0 1px rgba(0,180,130,0.35), 0 4px 22px rgba(0,143,107,0.30);

  /* Timing */
  --px120-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --px120-t-fast:       0.18s;
  --px120-t-med:        0.35s;
  --px120-t-slow:       0.55s;

  /* Section spacing */
  --px120-section-py:   80px;
  --px120-section-gap:  56px;
}


/* ─────────────────────────────────────────────────────────────
   §1  SCROLL REVEAL ANIMATIONS
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html body .pxv93-home .reveal,
  html body .pxv93-home .pxv99-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity var(--px120-t-slow) var(--px120-ease),
      transform var(--px120-t-slow) var(--px120-ease);
  }

  html body .pxv93-home .reveal.visible,
  html body .pxv93-home .reveal.pxv99-in,
  html body .pxv93-home .pxv99-reveal.pxv99-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger for card groups */
  html body .pxv93-home .pxv93-pillars > article,
  html body .pxv93-home .pxv93-solutions-grid > a,
  html body .pxv93-home .pxv93-benefits > article,
  html body .pxv93-home .pxv93-articles > a,
  html body .pxv93-home .pxv93-expertise-grid > article,
  html body .pxv93-home .pxv93-mode-card,
  html body .pxv93-home .pxv93-uc-card {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.50s var(--px120-ease),
      transform 0.50s var(--px120-ease),
      background var(--px120-t-med) var(--px120-ease),
      box-shadow var(--px120-t-med) var(--px120-ease),
      border-color var(--px120-t-med) var(--px120-ease);
  }

  html body .pxv93-home .pxv93-pillars > article.pxv99-in,
  html body .pxv93-home .pxv93-solutions-grid > a.pxv99-in,
  html body .pxv93-home .pxv93-benefits > article.pxv99-in,
  html body .pxv93-home .pxv93-articles > a.pxv99-in,
  html body .pxv93-home .pxv93-expertise-grid > article.pxv99-in,
  html body .pxv93-home .pxv93-mode-card.pxv99-in,
  html body .pxv93-home .pxv93-uc-card.pxv99-in {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Always show when JS is disabled */
html body .pxv93-home .reveal,
html body .pxv93-home .pxv99-reveal,
html body .pxv93-home .pxv93-pillars > article,
html body .pxv93-home .pxv93-solutions-grid > a,
html body .pxv93-home .pxv93-benefits > article,
html body .pxv93-home .pxv93-articles > a,
html body .pxv93-home .pxv93-expertise-grid > article,
html body .pxv93-home .pxv93-mode-card,
html body .pxv93-home .pxv93-uc-card {
  visibility: visible;
}


/* ─────────────────────────────────────────────────────────────
   §2  GLOBAL SECTION BASE
───────────────────────────────────────────────────────────── */
html body .pxv93-home section {
  position: relative;
}

html body .pxv93-home .pxv93-section-head {
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto var(--px120-section-gap) auto !important;
}

html body .pxv93-home .pxv93-section-head > span,
html body .pxv93-home .pxv93-eyebrow {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  background: rgba(0, 200, 150, 0.08) !important;
  border: 1px solid rgba(0, 200, 150, 0.20) !important;
  border-radius: 100px !important;
  padding: 4px 12px !important;
  margin-bottom: 14px !important;
}

html body .pxv93-home .pxv93-section-head h2,
html body .pxv93-home .pxv93-section-head > h2 {
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin: 0 0 16px !important;
}

html body .pxv93-home .pxv93-section-head p {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--px120-text-muted) !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}


/* ─────────────────────────────────────────────────────────────
   §3  HOW IT WORKS  (.pxv93-how)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-how {
  background: var(--px120-bg-base) !important;
  padding: var(--px120-section-py) 0 !important;
}

html body .pxv93-home .pxv93-how-grid {
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 40px !important;
  align-items: start !important;
}

/* Pillar cards */
html body .pxv93-home .pxv93-pillars {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

html body .pxv93-home .pxv93-pillars > article {
  background: var(--px120-bg-card) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-lg) !important;
  padding: 24px !important;
  box-shadow: var(--px120-shadow-card) !important;
  backdrop-filter: blur(12px) !important;
}

html body .pxv93-home .pxv93-pillars > article:hover {
  border-color: var(--px120-border-glow) !important;
  box-shadow: var(--px120-shadow-glow) !important;
  transform: translateY(-3px) !important;
}

html body .pxv93-home .pxv93-pillars article i {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(21,124,255,0.15), rgba(0,200,150,0.15)) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-sm) !important;
  margin-bottom: 14px !important;
  color: var(--px120-teal) !important;
}

html body .pxv93-home .pxv93-pillars article h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em !important;
}

html body .pxv93-home .pxv93-pillars article p {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--px120-text-muted) !important;
  margin: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   §3b  ARCHITECTURE DASHBOARD  (.pxv93-dashboard.pxv93-arch)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-dashboard.pxv93-arch {
  background: var(--px120-bg-elevated) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-xl) !important;
  padding: 28px !important;
  box-shadow: var(--px120-shadow-card) !important;
  position: sticky !important;
  top: 88px !important;
}

html body .pxv93-home .pxv93-dash-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--px120-border) !important;
}

html body .pxv93-home .pxv93-dash-top strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
}

html body .pxv93-home .pxv93-dash-top span {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  font-weight: 600 !important;
}

html body .pxv93-home .pxv93-arch-flow {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 20px !important;
}

html body .pxv93-home .pxv93-arch-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: var(--px120-r-sm) !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

html body .pxv93-home .pxv93-arch-num {
  min-width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--px120-grad) !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  flex-shrink: 0 !important;
}

html body .pxv93-home .pxv93-arch-body strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin-bottom: 3px !important;
}

html body .pxv93-home .pxv93-arch-body span {
  font-size: 12px !important;
  color: var(--px120-text-muted) !important;
  line-height: 1.5 !important;
}

html body .pxv93-home .pxv93-dash-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

html body .pxv93-home .pxv93-dash-stats > div {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: var(--px120-r-sm) !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

html body .pxv93-home .pxv93-dash-stats strong {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

html body .pxv93-home .pxv93-dash-stats span {
  font-size: 11px !important;
  color: var(--px120-text-muted) !important;
  line-height: 1.3 !important;
}

html body .pxv93-home .pxv93-dash-stats > div.ok strong {
  color: #4AD87C !important;
  -webkit-text-fill-color: #4AD87C !important;
}


/* ─────────────────────────────────────────────────────────────
   §4  SOLUTIONS  (.pxv93-solutions)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-solutions {
  padding: var(--px120-section-py) 0 !important;
}

html body .pxv93-home .pxv93-solutions-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-top: 40px !important;
}

html body .pxv93-home .pxv93-solution {
  display: flex !important;
  flex-direction: column !important;
  background: var(--px120-bg-card) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-lg) !important;
  padding: 24px !important;
  text-decoration: none !important;
  box-shadow: var(--px120-shadow-card) !important;
  backdrop-filter: blur(10px) !important;
  transition:
    transform var(--px120-t-med) var(--px120-ease),
    border-color var(--px120-t-med) var(--px120-ease),
    box-shadow var(--px120-t-med) var(--px120-ease) !important;
}

html body .pxv93-home .pxv93-solution:hover {
  transform: translateY(-4px) !important;
  border-color: var(--px120-border-glow) !important;
  box-shadow: 0 0 0 1px var(--px120-border-glow), 0 16px 48px rgba(0,200,150,0.15) !important;
  text-decoration: none !important;
}

html body .pxv93-home .pxv93-sol-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

html body .pxv93-home .pxv93-sol-top i {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--px120-grad-card) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-sm) !important;
  color: var(--px120-teal) !important;
  flex-shrink: 0 !important;
}

html body .pxv93-home .pxv93-sol-top span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  background: rgba(0, 200, 150, 0.10) !important;
  border: 1px solid rgba(0, 200, 150, 0.20) !important;
  border-radius: 100px !important;
  padding: 3px 9px !important;
}

html body .pxv93-home .pxv93-solution h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em !important;
}

html body .pxv93-home .pxv93-solution p {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--px120-text-muted) !important;
  margin: 0 0 16px !important;
  flex: 1 !important;
}

html body .pxv93-home .pxv93-solution ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

html body .pxv93-home .pxv93-solution li {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12.5px !important;
  color: var(--px120-text-muted) !important;
}

html body .pxv93-home .pxv93-solution li svg {
  color: var(--px120-teal) !important;
  flex-shrink: 0 !important;
}

html body .pxv93-home .pxv93-solution strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  margin-top: auto !important;
}


/* ─────────────────────────────────────────────────────────────
   §5  DELIVERY MODES  (.pxv93-modes)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-modes {
  background: var(--px120-bg-surface) !important;
  padding: var(--px120-section-py) 0 !important;
  border-top: 1px solid var(--px120-border) !important;
  border-bottom: 1px solid var(--px120-border) !important;
}

html body .pxv93-home .pxv93-modes-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

html body .pxv93-home .pxv93-mode-card {
  background: var(--px120-bg-card) !important;
  border: 1px solid var(--px120-border-blue) !important;
  border-radius: var(--px120-r-lg) !important;
  padding: 24px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--px120-shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

html body .pxv93-home .pxv93-mode-card:hover {
  border-color: rgba(54, 130, 255, 0.40) !important;
  box-shadow: 0 0 0 1px rgba(54,130,255,0.25), 0 12px 40px rgba(21,124,255,0.12) !important;
  transform: translateY(-3px) !important;
}

html body .pxv93-home .pxv93-mode-icon {
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(21,124,255,0.15), rgba(54,226,255,0.10)) !important;
  border: 1px solid var(--px120-border-blue) !important;
  border-radius: var(--px120-r-sm) !important;
  color: var(--px120-blue-bright) !important;
  flex-shrink: 0 !important;
}

html body .pxv93-home .pxv93-mode-card h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

html body .pxv93-home .pxv93-mode-desc {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--px120-text-muted) !important;
  margin: 0 !important;
  flex: 1 !important;
}

html body .pxv93-home .pxv93-mode-best {
  font-size: 12.5px !important;
  color: var(--px120-text-muted) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

html body .pxv93-home .pxv93-mode-best strong {
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  font-weight: 600 !important;
}

html body .pxv93-home .pxv93-mode-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

html body .pxv93-home .pxv93-mode-tags span {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--px120-blue-bright) !important;
  -webkit-text-fill-color: var(--px120-blue-bright) !important;
  background: rgba(21, 124, 255, 0.10) !important;
  border: 1px solid rgba(54, 130, 255, 0.20) !important;
  border-radius: 100px !important;
  padding: 3px 9px !important;
}


/* ─────────────────────────────────────────────────────────────
   §6  WHY BENEFITS  (.pxv93-why / .pxv93-benefits)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-why {
  padding: var(--px120-section-py) 0 !important;
  background: var(--px120-bg-base) !important;
}

html body .pxv93-home .pxv93-why h2 {
  font-size: clamp(24px, 3vw, 38px) !important;
  font-weight: 800 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  text-align: center !important;
  margin-bottom: 48px !important;
  letter-spacing: -0.025em !important;
}

html body .pxv93-home .pxv93-benefits {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 20px !important;
}

html body .pxv93-home .pxv93-benefits > article {
  background: var(--px120-bg-card) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-lg) !important;
  padding: 24px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--px120-shadow-card) !important;
  transition:
    transform var(--px120-t-med) var(--px120-ease),
    border-color var(--px120-t-med) var(--px120-ease) !important;
}

html body .pxv93-home .pxv93-benefits > article:hover {
  transform: translateY(-3px) !important;
  border-color: var(--px120-border-glow) !important;
}

html body .pxv93-home .pxv93-benefits i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--px120-r-sm) !important;
  margin-bottom: 16px !important;
  color: var(--px120-teal) !important;
  background: linear-gradient(135deg, rgba(0,200,150,0.14), rgba(21,124,255,0.10)) !important;
  border: 1px solid rgba(0,200,150,0.18) !important;
}

html body .pxv93-home .pxv93-benefits strong {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
}

html body .pxv93-home .pxv93-benefits p {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: var(--px120-text-muted) !important;
  margin: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   §7  USE CASES  (.pxv93-usecases)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-usecases {
  background: var(--px120-bg-surface) !important;
  padding: var(--px120-section-py) 0 !important;
  border-top: 1px solid var(--px120-border) !important;
}

html body .pxv93-home .pxv93-uc-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

html body .pxv93-home .pxv93-uc-card {
  background: var(--px120-bg-card) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-lg) !important;
  padding: 28px 24px !important;
  text-align: center !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--px120-shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  transition:
    transform var(--px120-t-med) var(--px120-ease),
    border-color var(--px120-t-med) var(--px120-ease),
    box-shadow var(--px120-t-med) var(--px120-ease) !important;
}

html body .pxv93-home .pxv93-uc-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--px120-border-glow) !important;
  box-shadow: var(--px120-shadow-glow) !important;
}

html body .pxv93-home .pxv93-uc-icon {
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--px120-grad-card) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-md) !important;
  color: var(--px120-teal) !important;
}

html body .pxv93-home .pxv93-uc-card h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

html body .pxv93-home .pxv93-uc-card p {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--px120-text-muted) !important;
  margin: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   §8  INFRASTRUCTURE SECTION  (.pxv93-infra)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-infra {
  padding: var(--px120-section-py) 0 !important;
  background: var(--px120-bg-base) !important;
}

html body .pxv93-home .pxv93-infra-card {
  background: var(--px120-bg-elevated) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-xl) !important;
  padding: 48px !important;
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 48px !important;
  align-items: center !important;
  box-shadow: var(--px120-shadow-card) !important;
  overflow: hidden !important;
  position: relative !important;
}

html body .pxv93-home .pxv93-infra-card::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important;
  right: -60px !important;
  width: 240px !important;
  height: 240px !important;
  background: radial-gradient(circle, rgba(0,200,150,0.06) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

html body .pxv93-home .pxv93-infra-copy > span {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  background: rgba(0, 200, 150, 0.08) !important;
  border: 1px solid rgba(0, 200, 150, 0.20) !important;
  border-radius: 100px !important;
  padding: 4px 12px !important;
  margin-bottom: 16px !important;
}

html body .pxv93-home .pxv93-infra-copy h2 {
  font-size: clamp(22px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

html body .pxv93-home .pxv93-infra-copy p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--px120-text-muted) !important;
  margin: 0 0 24px !important;
}

html body .pxv93-home .pxv93-infra-copy ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

html body .pxv93-home .pxv93-infra-copy li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: var(--px120-text-muted) !important;
}

html body .pxv93-home .pxv93-infra-copy li i.live {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #4AD87C !important;
  box-shadow: 0 0 0 3px rgba(74, 216, 124, 0.20) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

html body .pxv93-home .pxv93-infra-copy li i.road {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--px120-blue-bright) !important;
  box-shadow: 0 0 0 3px rgba(54, 226, 255, 0.15) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

html body .pxv93-home .pxv93-infra-copy li i.future {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--px120-text-dim) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

html body .pxv93-home .pxv93-map {
  border-radius: var(--px120-r-md) !important;
  overflow: hidden !important;
  opacity: 0.88 !important;
}

html body .pxv93-home .pxv93-map img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}


/* ─────────────────────────────────────────────────────────────
   §9  BLOG / ARTICLES  (.pxv93-blog)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-blog {
  padding: var(--px120-section-py) 0 !important;
  background: var(--px120-bg-surface) !important;
  border-top: 1px solid var(--px120-border) !important;
}

html body .pxv93-home .pxv93-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 40px !important;
  gap: 16px !important;
}

html body .pxv93-home .pxv93-title-row h2 {
  font-size: clamp(22px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

html body .pxv93-home .pxv93-title-row a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color var(--px120-t-fast) !important;
}

html body .pxv93-home .pxv93-title-row a:hover {
  color: var(--px120-teal-bright) !important;
  -webkit-text-fill-color: var(--px120-teal-bright) !important;
}

html body .pxv93-home .pxv93-articles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

html body .pxv93-home .pxv93-articles > a {
  display: flex !important;
  flex-direction: column !important;
  background: var(--px120-bg-card) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-lg) !important;
  padding: 24px !important;
  text-decoration: none !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--px120-shadow-card) !important;
  transition:
    transform var(--px120-t-med) var(--px120-ease),
    border-color var(--px120-t-med) var(--px120-ease),
    box-shadow var(--px120-t-med) var(--px120-ease) !important;
}

html body .pxv93-home .pxv93-articles > a:hover {
  transform: translateY(-4px) !important;
  border-color: var(--px120-border-glow) !important;
  box-shadow: var(--px120-shadow-glow) !important;
  text-decoration: none !important;
}

html body .pxv93-home .pxv93-articles > a > span {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  margin-bottom: 10px !important;
  display: block !important;
}

html body .pxv93-home .pxv93-articles h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin: 0 0 10px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  flex: 1 !important;
}

html body .pxv93-home .pxv93-articles p {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--px120-text-muted) !important;
  margin: 0 0 16px !important;
  flex: 1 !important;
}

html body .pxv93-home .pxv93-articles small {
  font-size: 12px !important;
  color: var(--px120-text-dim) !important;
  margin-top: auto !important;
}


/* ─────────────────────────────────────────────────────────────
   §10  FAQ  (.pxv93-faq)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-faq {
  padding: var(--px120-section-py) 0 !important;
  background: var(--px120-bg-base) !important;
}

html body .pxv93-home .pxv93-faq-list {
  max-width: 800px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html body .pxv93-home .pxv93-faq-item {
  background: var(--px120-bg-card) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-md) !important;
  overflow: hidden !important;
  transition: border-color var(--px120-t-fast) var(--px120-ease) !important;
}

html body .pxv93-home .pxv93-faq-item[open] {
  border-color: var(--px120-border-glow) !important;
}

html body .pxv93-home .pxv93-faq-item summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
  gap: 16px !important;
}

html body .pxv93-home .pxv93-faq-item summary::-webkit-details-marker {
  display: none !important;
}

html body .pxv93-home .pxv93-faq-item summary:hover {
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
}

html body .pxv93-home .pxv93-faq-plus {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(0, 200, 150, 0.10) !important;
  border: 1px solid var(--px120-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform var(--px120-t-fast), background var(--px120-t-fast) !important;
  position: relative !important;
}

html body .pxv93-home .pxv93-faq-plus::before,
html body .pxv93-home .pxv93-faq-plus::after {
  content: '' !important;
  position: absolute !important;
  background: var(--px120-teal) !important;
  border-radius: 2px !important;
}

html body .pxv93-home .pxv93-faq-plus::before {
  width: 10px !important;
  height: 1.5px !important;
}

html body .pxv93-home .pxv93-faq-plus::after {
  width: 1.5px !important;
  height: 10px !important;
  transition: transform var(--px120-t-fast), opacity var(--px120-t-fast) !important;
}

html body .pxv93-home .pxv93-faq-item[open] .pxv93-faq-plus::after {
  transform: rotate(90deg) !important;
  opacity: 0 !important;
}

html body .pxv93-home .pxv93-faq-item[open] .pxv93-faq-plus {
  background: rgba(0, 200, 150, 0.18) !important;
  transform: rotate(45deg) !important;
}

html body .pxv93-home .pxv93-faq-a {
  padding: 0 22px 18px !important;
  border-top: 1px solid var(--px120-border) !important;
}

html body .pxv93-home .pxv93-faq-a p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--px120-text-muted) !important;
  margin: 14px 0 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   §11  CTA BAND  (.pxv93-cta)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-cta {
  padding: var(--px120-section-py) 0 !important;
  background: var(--px120-bg-base) !important;
  border-top: 1px solid var(--px120-border) !important;
}

html body .pxv93-home .pxv93-cta-card {
  background: var(--px120-bg-elevated) !important;
  border: 1px solid var(--px120-border-glow) !important;
  border-radius: var(--px120-r-xl) !important;
  padding: 48px 56px !important;
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
  box-shadow: 0 0 0 1px var(--px120-border-glow), 0 16px 64px rgba(0, 200, 150, 0.12) !important;
  position: relative !important;
  overflow: hidden !important;
}

html body .pxv93-home .pxv93-cta-card::before {
  content: '' !important;
  position: absolute !important;
  top: -80px !important;
  left: -80px !important;
  width: 300px !important;
  height: 300px !important;
  background: radial-gradient(circle, rgba(0,200,150,0.08) 0%, transparent 65%) !important;
  pointer-events: none !important;
}

html body .pxv93-home .pxv93-cta-card > i {
  width: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--px120-grad-card) !important;
  border: 1px solid var(--px120-border-glow) !important;
  border-radius: var(--px120-r-md) !important;
  color: var(--px120-teal) !important;
  flex-shrink: 0 !important;
}

html body .pxv93-home .pxv93-cta-card > div:nth-child(2) {
  flex: 1 !important;
}

html body .pxv93-home .pxv93-cta-card h2 {
  font-size: clamp(20px, 2.4vw, 30px) !important;
  font-weight: 800 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}

html body .pxv93-home .pxv93-cta-card p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--px120-text-muted) !important;
  margin: 0 !important;
}

html body .pxv93-home .pxv93-cta-card > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start !important;
  flex-shrink: 0 !important;
}

html body .pxv93-home .pxv93-cta-card .pxv93-btn.pxv93-primary,
html body .pxv93-home .pxv93-cta-card a.pxv93-primary {
  background: var(--px120-cta-bg) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 13px 28px !important;
  border-radius: var(--px120-r-sm) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  box-shadow: var(--px120-shadow-btn) !important;
  transition:
    background var(--px120-t-fast),
    transform var(--px120-t-fast),
    box-shadow var(--px120-t-fast) !important;
}

html body .pxv93-home .pxv93-cta-card .pxv93-btn.pxv93-primary:hover,
html body .pxv93-home .pxv93-cta-card a.pxv93-primary:hover {
  background: var(--px120-cta-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 1px rgba(0,180,130,0.40), 0 8px 28px rgba(0,143,107,0.38) !important;
}

html body .pxv93-home .pxv93-cta-card .pxv93-plain,
html body .pxv93-home .pxv93-cta-card a.pxv93-plain {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  text-decoration: none !important;
  transition: color var(--px120-t-fast) !important;
  padding: 8px 0 !important;
}

html body .pxv93-home .pxv93-cta-card .pxv93-plain:hover {
  color: var(--px120-teal-bright) !important;
  -webkit-text-fill-color: var(--px120-teal-bright) !important;
}


/* ─────────────────────────────────────────────────────────────
   §12  EXPERTISE  (.pxv93-expertise)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-expertise {
  padding: var(--px120-section-py) 0 !important;
  background: var(--px120-bg-surface) !important;
  border-top: 1px solid var(--px120-border) !important;
}

html body .pxv93-home .pxv93-expertise h2 {
  font-size: clamp(22px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  text-align: center !important;
  margin-bottom: 40px !important;
  letter-spacing: -0.02em !important;
}

html body .pxv93-home .pxv93-expertise-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

html body .pxv93-home .pxv93-expertise-grid > article {
  background: var(--px120-bg-card) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-lg) !important;
  padding: 28px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--px120-shadow-card) !important;
  display: flex !important;
  gap: 16px !important;
  transition:
    transform var(--px120-t-med) var(--px120-ease),
    border-color var(--px120-t-med) var(--px120-ease) !important;
}

html body .pxv93-home .pxv93-expertise-grid > article:hover {
  transform: translateY(-3px) !important;
  border-color: var(--px120-border-glow) !important;
}

html body .pxv93-home .pxv93-expertise i {
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--px120-grad-card) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-sm) !important;
  color: var(--px120-teal) !important;
  flex-shrink: 0 !important;
}

html body .pxv93-home .pxv93-expertise h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  margin: 0 0 12px !important;
}

html body .pxv93-home .pxv93-expertise ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

html body .pxv93-home .pxv93-expertise li {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  color: var(--px120-text-muted) !important;
  line-height: 1.5 !important;
}

html body .pxv93-home .pxv93-expertise li svg {
  color: var(--px120-teal) !important;
  flex-shrink: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   §13  PARTNERS  (.pxv93-partners)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-partners {
  padding: 48px 0 !important;
  background: var(--px120-bg-base) !important;
  border-top: 1px solid var(--px120-border) !important;
}

html body .pxv93-home .pxv93-partner-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-top: 32px !important;
}

html body .pxv93-home .pxv93-partner-grid > article {
  background: var(--px120-bg-card) !important;
  border: 1px solid var(--px120-border) !important;
  border-radius: var(--px120-r-md) !important;
  padding: 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  backdrop-filter: blur(8px) !important;
  transition:
    border-color var(--px120-t-med),
    transform var(--px120-t-med) var(--px120-ease) !important;
}

html body .pxv93-home .pxv93-partner-grid > article:hover {
  border-color: var(--px120-border-glow) !important;
  transform: translateY(-2px) !important;
}

html body .pxv93-home .pxv93-partner-grid i {
  color: var(--px120-teal) !important;
  opacity: 0.85 !important;
}

html body .pxv93-home .pxv93-partner-grid strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
}

html body .pxv93-home .pxv93-partner-grid span {
  font-size: 12.5px !important;
  color: var(--px120-text-muted) !important;
  line-height: 1.5 !important;
}


/* ─────────────────────────────────────────────────────────────
   §14  GHOST BUTTON (global)
───────────────────────────────────────────────────────────── */
html body .pxv93-home .pxv93-btn.pxv93-ghost,
html body .pxv93-home a.pxv93-ghost {
  background: transparent !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  padding: 13px 24px !important;
  border-radius: var(--px120-r-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition:
    border-color var(--px120-t-fast),
    background var(--px120-t-fast),
    transform var(--px120-t-fast) !important;
}

html body .pxv93-home .pxv93-btn.pxv93-ghost:hover,
html body .pxv93-home a.pxv93-ghost:hover {
  border-color: rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.05) !important;
  transform: translateY(-1px) !important;
}


/* ─────────────────────────────────────────────────────────────
   §15  RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  html body .pxv93-home .pxv93-how-grid {
    grid-template-columns: 1fr !important;
  }

  html body .pxv93-home .pxv93-dashboard.pxv93-arch {
    position: static !important;
  }

  html body .pxv93-home .pxv93-modes-grid,
  html body .pxv93-home .pxv93-solutions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  html body .pxv93-home .pxv93-uc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  html body .pxv93-home .pxv93-partner-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 900px) {
  :root {
    --px120-section-py: 64px;
    --px120-section-gap: 40px;
  }

  html body .pxv93-home .pxv93-expertise-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  html body .pxv93-home .pxv93-infra-card {
    grid-template-columns: 1fr !important;
    padding: 32px !important;
    gap: 32px !important;
  }

  html body .pxv93-home .pxv93-cta-card {
    flex-direction: column !important;
    padding: 36px 28px !important;
    text-align: center !important;
    align-items: center !important;
  }

  html body .pxv93-home .pxv93-cta-card > div:last-child {
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

@media (max-width: 640px) {
  :root {
    --px120-section-py: 48px;
    --px120-section-gap: 32px;
  }

  html body .pxv93-home .pxv93-solutions-grid,
  html body .pxv93-home .pxv93-modes-grid,
  html body .pxv93-home .pxv93-uc-grid,
  html body .pxv93-home .pxv93-articles,
  html body .pxv93-home .pxv93-expertise-grid,
  html body .pxv93-home .pxv93-partner-grid {
    grid-template-columns: 1fr !important;
  }

  html body .pxv93-home .pxv93-pillars {
    grid-template-columns: 1fr !important;
  }

  html body .pxv93-home .pxv93-benefits {
    grid-template-columns: 1fr !important;
  }

  html body .pxv93-home .pxv93-cta-card > div:last-child {
    flex-direction: column !important;
    width: 100% !important;
  }

  html body .pxv93-home .pxv93-cta-card .pxv93-btn.pxv93-primary,
  html body .pxv93-home .pxv93-cta-card a.pxv93-primary {
    width: 100% !important;
    justify-content: center !important;
  }

  html body .pxv93-home .pxv93-title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   §16  SKIP LINK + ACCESSIBILITY
───────────────────────────────────────────────────────────── */
.peeryx-skip-link {
  position: absolute !important;
  top: -100% !important;
  left: 16px !important;
  z-index: 9999 !important;
  background: var(--px120-cta-bg) !important;
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: 0 0 var(--px120-r-sm) var(--px120-r-sm) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: top 0.15s !important;
}

.peeryx-skip-link:focus {
  top: 0 !important;
}

html body *:focus-visible {
  outline: 2px solid var(--px120-teal) !important;
  outline-offset: 3px !important;
}

html body .pxv93-home button,
html body .pxv93-home a,
html body .pxv93-home summary {
  transition:
    outline-color var(--px120-t-fast),
    outline-offset var(--px120-t-fast) !important;
}


/* ─────────────────────────────────────────────────────────────
   §17  HEADER PREMIUM IMPROVEMENTS
───────────────────────────────────────────────────────────── */

/* CTA button in header actions */
html body .site-header .account-link.account-link-register,
html body .site-header a.account-link-register {
  background: var(--px120-cta-bg) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: var(--px120-r-sm) !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: background var(--px120-t-fast), transform var(--px120-t-fast) !important;
  box-shadow: 0 0 0 1px rgba(0,180,130,0.35) !important;
}

html body .site-header .account-link.account-link-register:hover {
  background: var(--px120-cta-hover) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Login link — subtle ghost style */
html body .site-header .account-link.account-link-login,
html body .site-header a.account-link-login {
  color: rgba(245,251,255,0.75) !important;
  -webkit-text-fill-color: rgba(245,251,255,0.75) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: color var(--px120-t-fast) !important;
}

html body .site-header .account-link.account-link-login:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Active nav link pill */
html body .site-header .desktop-nav .nav-link.active,
html body .site-header .desktop-nav a.nav-link[aria-current="page"] {
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  background: rgba(0, 200, 150, 0.08) !important;
}

/* Smooth nav link hover */
html body .site-header .desktop-nav .nav-link:hover {
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
}


/* ─────────────────────────────────────────────────────────────
   §18  FOOTER PREMIUM IMPROVEMENTS
───────────────────────────────────────────────────────────── */

html body .site-footer {
  background: var(--px120-bg-base) !important;
  border-top: 1px solid var(--px120-border) !important;
  padding: 64px 0 0 !important;
}

html body .site-footer .footer-grid.footer-grid-rich {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1.4fr !important;
  gap: 48px !important;
  padding-bottom: 48px !important;
  border-bottom: 1px solid var(--px120-border) !important;
}

html body .site-footer .footer-brand-block > p {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: var(--px120-text-muted) !important;
  margin: 12px 0 10px !important;
  max-width: 260px !important;
}

html body .site-footer .footer-highlight {
  font-size: 12px !important;
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  line-height: 1.6 !important;
  opacity: 0.8 !important;
}

html body .site-footer h3 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--px120-text-dim) !important;
  -webkit-text-fill-color: var(--px120-text-dim) !important;
  margin: 0 0 16px !important;
}

html body .site-footer .footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

html body .site-footer .footer-links a {
  font-size: 13.5px !important;
  color: var(--px120-text-muted) !important;
  -webkit-text-fill-color: var(--px120-text-muted) !important;
  text-decoration: none !important;
  display: block !important;
  padding: 4px 0 !important;
  transition: color var(--px120-t-fast) !important;
  line-height: 1.8 !important;
}

html body .site-footer .footer-links a:hover {
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
}

html body .site-footer .footer-contact-block p {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: var(--px120-text-muted) !important;
  margin: 0 0 16px !important;
}

html body .site-footer .footer-link-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--px120-cta-bg) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border-radius: var(--px120-r-sm) !important;
  text-decoration: none !important;
  transition: background var(--px120-t-fast), transform var(--px120-t-fast) !important;
  margin-top: 12px !important;
  box-shadow: var(--px120-shadow-btn) !important;
}

html body .site-footer .footer-link-cta:hover {
  background: var(--px120-cta-hover) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body .site-footer .footer-inline-link {
  font-size: 13.5px !important;
  color: var(--px120-teal) !important;
  -webkit-text-fill-color: var(--px120-teal) !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 12px !important;
  word-break: break-all !important;
}

html body .site-footer .footer-legal-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 0 !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

html body .site-footer .footer-legal-strip span {
  font-size: 12px !important;
  color: var(--px120-text-dim) !important;
}

html body .site-footer .footer-legal-strip nav {
  display: flex !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

html body .site-footer .footer-legal-strip a {
  font-size: 12px !important;
  color: var(--px120-text-dim) !important;
  -webkit-text-fill-color: var(--px120-text-dim) !important;
  text-decoration: none !important;
  transition: color var(--px120-t-fast) !important;
  line-height: normal !important;
}

html body .site-footer .footer-legal-strip a:hover {
  color: var(--px120-text-muted) !important;
  -webkit-text-fill-color: var(--px120-text-muted) !important;
}

/* Footer brand area */
html body .site-footer .footer-brand .brand-name {
  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body .site-footer .footer-brand .brand-sub {
  font-size: 9px !important;
  color: var(--px120-text-muted) !important;
  -webkit-text-fill-color: var(--px120-text-muted) !important;
}

/* Responsive footer */
@media (max-width: 1024px) {
  html body .site-footer .footer-grid.footer-grid-rich {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px !important;
  }
}

@media (max-width: 600px) {
  html body .site-footer .footer-grid.footer-grid-rich {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  html body .site-footer .footer-legal-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   §19  FOOTER PARTNER RAIL
───────────────────────────────────────────────────────────── */
html body .site-footer .footer-partners {
  padding: 32px 0 !important;
  border-bottom: 1px solid var(--px120-border) !important;
}

html body .site-footer .footer-partners-eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--px120-text-dim) !important;
  -webkit-text-fill-color: var(--px120-text-dim) !important;
  text-align: center !important;
  display: block !important;
  margin-bottom: 24px !important;
}

html body .site-footer .footer-partner-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: var(--px120-r-md) !important;
  padding: 16px !important;
  text-decoration: none !important;
  transition:
    border-color var(--px120-t-fast),
    background var(--px120-t-fast) !important;
}

html body .site-footer .footer-partner-card:hover {
  border-color: var(--px120-border) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--px120-text) !important;
  -webkit-text-fill-color: var(--px120-text) !important;
}


/* ─────────────────────────────────────────────────────────────
   §20  GLOBAL TYPOGRAPHY REFINEMENTS
───────────────────────────────────────────────────────────── */

/* Ensure Sora on headings across the whole site */
html body h1,
html body h2,
html body h3 {
  font-family: 'Sora', 'Hanken Grotesk', system-ui, sans-serif;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Better text rendering */
html body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Better link defaults */
html body .pxv93-home a {
  text-underline-offset: 3px;
}

/* Selection color */
html body ::selection {
  background: rgba(0, 200, 150, 0.25);
  color: #fff;
}