/* ============================================================
   PEERYX NETWORK — v116  (all-pages design system)
   Direction: Premium telecom operator · NOC aesthetic
   Teal-on-slate. Technical. Trustworthy. Not AI-glow.
   ============================================================ */

/* ══ 0. FONT FACE ALIASES ════════════════════════════════════ */
:root {
  --px-mono: 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace;
  --px-sans: 'Sora', 'Hanken Grotesk', system-ui, sans-serif;
}

/* ══ 1. GLOBAL TYPOGRAPHY ════════════════════════════════════ */
html body h1 { font-family: var(--px-sans) !important; font-weight: 800 !important; letter-spacing: -.032em !important; color: #EDF5FF !important; }
html body h2 { font-family: var(--px-sans) !important; font-weight: 700 !important; letter-spacing: -.024em !important; color: #EDF5FF !important; }
html body h3 { font-family: var(--px-sans) !important; font-weight: 700 !important; letter-spacing: -.018em !important; color: #D8EDFF !important; }
html body p   { color: #8AAAC8 !important; line-height: 1.72 !important; }
html body strong { color: #EDF5FF !important; }

/* ══ 2. HERO SUBPAGES — kill glows, professional backdrop ════ */
.hero-subpage {
  min-height: 72vh !important;
  background: #070F1A !important;
  padding: 0 !important;
}
.hero-subpage .hero-backdrop .glow,
.hero-subpage .hero-backdrop .glow-1,
.hero-subpage .hero-backdrop .glow-2,
.transit-hero-backdrop-v81 .glow,
.transit-hero-backdrop-v81 .glow-1,
.transit-hero-backdrop-v81 .glow-2 {
  display: none !important;
  opacity: 0 !important;
}
.hero-subpage .hero-backdrop .grid-lines,
.transit-hero-backdrop-v81 .grid-lines {
  background-image: radial-gradient(circle, rgba(255,255,255,0.072) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  opacity: .85 !important;
  animation: none !important;
}
/* Fade grid toward bottom */
.hero-subpage .hero-backdrop::after,
.transit-hero-backdrop-v81::after {
  content: "" !important;
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(180deg, rgba(7,15,26,0) 50%, #070F1A 100%) !important;
  pointer-events: none !important;
}

/* ── Hero copy ── */
.hero-subpage .hero-copy h1,
.hero .hero-copy h1 {
  font-size: clamp(28px, 3.4vw, 54px) !important;
  line-height: 1.06 !important;
  margin-bottom: 18px !important;
}
.hero-subpage .eyebrow,
.hero .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-family: var(--px-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
  background: rgba(0,224,168,.07) !important;
  border: 1px solid rgba(0,224,168,.22) !important;
  border-radius: 4px !important;
  padding: 5px 11px !important;
  margin-bottom: 22px !important;
}
.hero-subpage .eyebrow::before,
.hero .eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important; height: 6px !important;
  background: #00E0A8 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  animation: p15-blink 2.4s ease-in-out infinite !important;
}
.hero-subpage .hero-text { font-size: clamp(15px,1.35vw,18px) !important; line-height: 1.68 !important; color: #8AAAC8 !important; max-width: 520px !important; margin-bottom: 28px !important; }
.hero-subpage .hero-actions { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; margin-top: 24px !important; }

/* ── Hero container layout ── */
.hero-subpage .hero-grid,
.v12-hero-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 52px !important;
  align-items: center !important;
  padding-top: 100px !important;
  padding-bottom: 80px !important;
  position: relative !important;
  z-index: 2 !important;
}
@media (max-width: 960px) {
  .hero-subpage .hero-grid,
  .v12-hero-grid { grid-template-columns: 1fr !important; padding-top: 80px !important; padding-bottom: 56px !important; }
  .hero-subpage .hero-panel { order: -1 !important; }
}

/* ══ 3. V12 PRICE/INFO CARD ══════════════════════════════════ */
.v12-price-card {
  background: #0D1E30 !important;
  border: 1px solid rgba(0,224,168,0.28) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  box-shadow: 0 0 0 1px rgba(0,224,168,0.05), 0 24px 64px rgba(0,0,0,0.55) !important;
  overflow: hidden !important;
  position: relative !important;
}
.v12-price-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,224,168,.55), transparent) !important;
  pointer-events: none !important;
}
.v12-price-card .panel-kicker {
  display: block !important;
  padding: 12px 20px 10px !important;
  background: rgba(0,224,168,.04) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  font-family: var(--px-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(0,224,168,.75) !important;
  -webkit-text-fill-color: rgba(0,224,168,.75) !important;
}
.v12-price-card .price {
  padding: 20px 20px 4px !important;
  font-family: var(--px-mono) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  letter-spacing: -.02em !important;
}
.v12-price-card > p {
  padding: 4px 20px 16px !important;
  font-size: 12px !important;
  color: #4C6480 !important;
  -webkit-text-fill-color: #4C6480 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}
.v12-price-card .check-list { padding: 14px 20px 18px !important; margin: 0 !important; list-style: none !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.v12-price-card .check-list li { display: flex !important; align-items: center !important; gap: 9px !important; font-size: 13px !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; }
.v12-price-card .check-list li svg { color: #00E0A8 !important; flex-shrink: 0 !important; width: 14px !important; height: 14px !important; }

/* ══ 4. ENTERPRISE BULLETS ════════════════════════════════════ */
.enterprise-bullets { display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 20px 0 !important; }
.enterprise-bullet {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 13.5px !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
}
.enterprise-bullet svg { color: #00E0A8 !important; flex-shrink: 0 !important; width: 14px !important; }

/* ══ 5. SECTION HEADINGS ══════════════════════════════════════ */
html body .section-head,
html body .section-heading {
  text-align: center !important;
  margin-bottom: 48px !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body .section-head span,
html body .section-heading span {
  display: inline-block !important;
  font-family: var(--px-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
  margin-bottom: 12px !important;
}
html body .section-head h2,
html body .section-heading h2 {
  font-size: clamp(22px, 2.6vw, 38px) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  margin-bottom: 14px !important;
  color: #EDF5FF !important;
}
html body .section-head p,
html body .section-heading p {
  font-size: 16px !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  line-height: 1.70 !important;
}

/* ══ 6. GLASS CARDS — universal ══════════════════════════════ */
html body .glass-card {
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,0.085) !important;
  border-radius: 12px !important;
  transition: border-color .2s, box-shadow .2s !important;
  position: relative !important;
  overflow: hidden !important;
}
html body .glass-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
  pointer-events: none !important;
}
html body .glass-card:hover {
  border-color: rgba(0,224,168,0.28) !important;
  box-shadow: 0 0 0 1px rgba(0,224,168,.06), 0 8px 32px rgba(0,0,0,0.40) !important;
}
html body .glass-card h3 { font-size: 15px !important; font-weight: 700 !important; color: #EDF5FF !important; margin-bottom: 10px !important; }
html body .glass-card p  { font-size: 13.5px !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; line-height: 1.65 !important; margin: 0 !important; }

/* Long cards (4-col features) */
html body .long-card { padding: 24px 22px !important; }
html body .long-card h3::before {
  content: "" !important;
  display: block !important;
  width: 24px !important; height: 2px !important;
  background: #00E0A8 !important;
  border-radius: 2px !important;
  margin-bottom: 12px !important;
}

/* Option/comparison cards */
html body .option-card,
html body .v12-comparison-card {
  padding: 26px 24px !important;
}
html body .v12-comparison-card h3 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body .v12-comparison-card h3::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important; height: 8px !important;
  background: #00E0A8 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* ══ 7. OFFER LINEUP ══════════════════════════════════════════ */
html body .v12-offer-lineup { background: #0C1828 !important; border-top: 1px solid rgba(255,255,255,.06) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
html body .offer-lineup-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 8px !important;
}
html body .offer-lineup-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 22px 20px !important;
  text-decoration: none !important;
}
html body .offer-lineup-card .card-icon { color: #00E0A8 !important; animation: none !important; }
html body .offer-lineup-card h3 { font-size: 14.5px !important; font-weight: 700 !important; color: #EDF5FF !important; margin: 0 !important; }
html body .offer-lineup-card strong {
  display: inline-block !important;
  font-family: var(--px-mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
}
html body .offer-lineup-card p { font-size: 12.5px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; flex: 1 !important; }

/* ══ 8. PROOF / STAT STRIPS ═══════════════════════════════════ */
/* Transit proof strip */
html body .transit-proof-strip-v81 {
  background: rgba(13,30,48,.70) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 24px 0 !important;
}
html body .transit-proof-grid-v81 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}
html body .transit-proof-item-v81 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 24px !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
}
html body .transit-proof-item-v81:last-child { border-right: none !important; }
html body .transit-proof-item-v81 strong {
  font-family: var(--px-mono) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  letter-spacing: -.02em !important;
}
html body .transit-proof-item-v81 span { font-size: 11.5px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; text-align: center !important; }
@media (max-width: 640px) {
  html body .transit-proof-grid-v81 { grid-template-columns: 1fr !important; gap: 16px !important; }
  html body .transit-proof-item-v81 { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; padding-bottom: 16px !important; }
  html body .transit-proof-item-v81:last-child { border-bottom: none !important; }
}

/* Architecture ribbon */
html body .px83-architecture-ribbon {
  background: #0C1828 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 28px 0 !important;
}
html body .px83-ribbon-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;
}
@media (max-width: 840px) { html body .px83-ribbon-grid { grid-template-columns: 1fr 1fr !important; gap: 1px !important; } }
@media (max-width: 560px) { html body .px83-ribbon-grid { grid-template-columns: 1fr !important; } }
html body .px83-ribbon-card {
  padding: 20px 24px !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  display: flex !important; flex-direction: column !important; gap: 6px !important;
  background: transparent !important; border-radius: 0 !important;
}
html body .px83-ribbon-card:last-child { border-right: none !important; }
html body .px83-ribbon-card .px83-mini-label { font-family: var(--px-mono) !important; font-size: 10px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #00E0A8 !important; -webkit-text-fill-color: #00E0A8 !important; }
html body .px83-ribbon-card span:first-child:not(.px83-mini-label) { font-family: var(--px-mono) !important; font-size: 22px !important; font-weight: 700 !important; color: rgba(255,255,255,.12) !important; -webkit-text-fill-color: rgba(255,255,255,.12) !important; line-height: 1 !important; }
html body .px83-ribbon-card strong { font-size: 14px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; line-height: 1.3 !important; }
html body .px83-ribbon-card p { font-size: 12.5px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; margin: 0 !important; line-height: 1.55 !important; }
html body .px83-ribbon-card-main .px83-mini-label { margin-bottom: 4px !important; }
html body .px83-ribbon-card-main strong { font-size: 16px !important; line-height: 1.35 !important; }

/* ══ 9. TRANSIT HERO VISUAL ═══════════════════════════════════ */
html body .transit-hero-visual-v81 {
  background: #0D1E30 !important;
  border: 1px solid rgba(0,224,168,0.24) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(0,224,168,.04), 0 20px 60px rgba(0,0,0,.55) !important;
  position: relative !important;
}
html body .transit-hero-visual-v81::before {
  content: "" !important;
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,224,168,.50), transparent) !important;
}
html body .transit-visual-head-v81 {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 13px 18px !important;
  background: rgba(0,224,168,.04) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
html body .transit-visual-head-v81 span { font-family: var(--px-mono) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: rgba(0,224,168,.80) !important; -webkit-text-fill-color: rgba(0,224,168,.80) !important; }
html body .transit-visual-head-v81 small { font-family: var(--px-mono) !important; font-size: 10px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; }
html body .transit-path-v81 {
  display: flex !important; align-items: center !important; gap: 0 !important;
  padding: 20px 20px 16px !important;
  justify-content: space-between !important;
}
html body .transit-node-v81 {
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  min-width: 72px !important;
}
html body .transit-node-v81.scrub {
  background: rgba(0,224,168,.07) !important;
  border-color: rgba(0,224,168,.32) !important;
}
html body .transit-node-v81 span { font-family: var(--px-mono) !important; font-size: 11px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; }
html body .transit-node-v81.scrub span { color: #00E0A8 !important; -webkit-text-fill-color: #00E0A8 !important; }
html body .transit-node-v81 small { font-family: var(--px-mono) !important; font-size: 9px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; text-align: center !important; }
html body .transit-line-v81 {
  flex: 1 !important; height: 2px !important; position: relative !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
html body .transit-line-v81.attack { background: linear-gradient(90deg, rgba(255,61,80,.35), rgba(255,61,80,.20)) !important; }
html body .transit-line-v81.clean  { background: linear-gradient(90deg, rgba(0,224,168,.20), rgba(0,224,168,.45)) !important; }
html body .transit-line-v81 span {
  position: absolute !important; top: -18px !important;
  font-family: var(--px-mono) !important; font-size: 9px !important; text-transform: uppercase !important; letter-spacing: .08em !important; white-space: nowrap !important;
}
html body .transit-line-v81.attack span { color: rgba(255,61,80,.65) !important; -webkit-text-fill-color: rgba(255,61,80,.65) !important; }
html body .transit-line-v81.clean span  { color: rgba(0,224,168,.65) !important; -webkit-text-fill-color: rgba(0,224,168,.65) !important; }
html body .transit-visual-grid-v81 {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.04) !important;
}
html body .transit-visual-grid-v81 > div {
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  padding: 11px 14px !important; background: #0D1E30 !important;
}
html body .transit-visual-grid-v81 strong { font-family: var(--px-mono) !important; font-size: 11.5px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; }
html body .transit-visual-grid-v81 span  { font-family: var(--px-mono) !important; font-size: 9.5px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; }

/* ══ 10. V9 DIAGRAM ═══════════════════════════════════════════ */
html body .v9-diagram,
html body .solution-diagram {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 32px 0 !important;
}
html body .v9-diagram-node,
html body .diagram-node {
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 10px !important;
  padding: 20px 18px !important;
  text-align: center !important;
}
html body .v9-diagram-node.core,
html body .diagram-node.core {
  background: rgba(0,224,168,.07) !important;
  border-color: rgba(0,224,168,.30) !important;
}
html body .v9-diagram-node strong { font-size: 13px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; display: block !important; margin-bottom: 6px !important; }
html body .v9-diagram-node p     { font-size: 11.5px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; margin: 0 !important; line-height: 1.5 !important; }
html body .v9-diagram-arrow { text-align: center !important; padding: 0 8px !important; color: #00E0A8 !important; font-size: 20px !important; opacity: .60 !important; }

/* ══ 11. FEATURE GRID ════════════════════════════════════════ */
html body .feature-grid { display: grid !important; gap: 16px !important; }
html body .feature-grid-four { grid-template-columns: repeat(4, 1fr) !important; }
html body .feature-grid-three { grid-template-columns: repeat(3, 1fr) !important; }
html body .feature-grid-two   { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 960px) {
  html body .feature-grid-four  { grid-template-columns: repeat(2, 1fr) !important; }
  html body .feature-grid-three { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  html body .feature-grid-four,
  html body .feature-grid-three,
  html body .feature-grid-two  { grid-template-columns: 1fr !important; }
}

/* ══ 12. CTA BAND ════════════════════════════════════════════ */
html body .cta-band {
  background: linear-gradient(135deg, #0C1828, #0F2138) !important;
  border-top: 1px solid rgba(0,224,168,.15) !important;
  border-bottom: 1px solid rgba(0,224,168,.08) !important;
  padding: 64px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
html body .cta-band::before {
  content: "" !important;
  position: absolute !important; inset: 0 !important;
  background: radial-gradient(ellipse at 60% 50%, rgba(0,224,168,.06), transparent 60%) !important;
  pointer-events: none !important;
}
html body .cta-band-inner {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 40px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1 !important;
}
@media (max-width: 720px) {
  html body .cta-band-inner { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center !important; }
  html body .cta-band-actions { justify-content: center !important; }
}
html body .cta-band h2 { font-size: clamp(18px, 2.2vw, 30px) !important; margin-bottom: 10px !important; color: #EDF5FF !important; }
html body .cta-band p  { font-size: 15px !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; max-width: 520px !important; }
html body .cta-band-actions { display: flex !important; gap: 12px !important; flex-wrap: nowrap !important; flex-shrink: 0 !important; }

/* ══ 13. FAQ ══════════════════════════════════════════════════ */
html body .faq-layout { max-width: 780px !important; margin: 0 auto !important; }
html body .faq-item,
html body details.faq-item {
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  background: #0D1E30 !important;
  overflow: hidden !important;
  transition: border-color .2s !important;
}
html body .faq-item:hover,
html body details.faq-item:hover { border-color: rgba(0,224,168,.25) !important; }
html body .faq-item summary,
html body details.faq-item > summary {
  padding: 16px 20px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}
html body .faq-item summary::-webkit-details-marker { display: none !important; }
html body .faq-item summary::after {
  content: "+" !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
  flex-shrink: 0 !important;
  transition: transform .2s !important;
}
html body details.faq-item[open] > summary::after { content: "−" !important; }
html body .faq-item .faq-answer,
html body details.faq-item > p,
html body details.faq-item > div {
  padding: 0 20px 18px !important;
  font-size: 13.5px !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ══ 14. BLOG HOME ════════════════════════════════════════════ */
html body .blog-home-band { padding: 48px 0 !important; }
html body .blog-home-band .section-head,
html body .blog-home-band .section-heading { text-align: left !important; margin-bottom: 28px !important; }
html body .resource-card,
html body .blog-card {
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  padding: 22px 20px !important;
  transition: border-color .2s, background .2s !important;
  text-decoration: none !important;
  display: flex !important; flex-direction: column !important; gap: 8px !important;
}
html body .resource-card:hover,
html body .blog-card:hover { border-color: rgba(0,224,168,.25) !important; background: #112135 !important; }
html body .resource-card .eyebrow,
html body .blog-card .eyebrow { font-family: var(--px-mono) !important; font-size: 9.5px !important; letter-spacing: .12em !important; color: #00E0A8 !important; -webkit-text-fill-color: #00E0A8 !important; margin: 0 !important; background: none !important; border: none !important; padding: 0 !important; }
html body .resource-card h3 { font-size: 14.5px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; margin: 0 !important; }
html body .resource-card p  { font-size: 13px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; margin: 0 !important; }

/* ══ 15. BLOG / ARTICLES — editorial ════════════════════════ */
html body.page-blog main,
html body[class*="page-article"] main { background: #070F1A !important; color: #EDF5FF !important; }
html body[class*="page-article"] .article-body p,
html body[class*="page-article"] .post-body p { font-size: 16px !important; line-height: 1.78 !important; color: #C5DBF5 !important; -webkit-text-fill-color: #C5DBF5 !important; }
html body[class*="page-article"] .article-body h2,
html body[class*="page-article"] .post-body h2 { font-size: clamp(18px,2vw,26px) !important; margin: 40px 0 14px !important; padding-top: 8px !important; border-top: 1px solid rgba(255,255,255,.07) !important; }
html body[class*="page-article"] .article-body code,
html body[class*="page-article"] .post-body code {
  background: rgba(0,224,168,.08) !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: var(--px-mono) !important;
  font-size: .88em !important;
}
html body[class*="page-article"] .article-body pre,
html body[class*="page-article"] .post-body pre {
  background: #0C1828 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  overflow-x: auto !important;
}

/* ══ 16. TRUST STRIP ══════════════════════════════════════════ */
html body .trust-strip { padding: 18px 0 !important; }
html body .trust-strip .container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px 24px !important;
}
html body .trust-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-family: var(--px-mono) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  padding: 6px 14px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  letter-spacing: .04em !important;
}
html body .trust-pill::before {
  content: "" !important;
  width: 5px !important; height: 5px !important;
  background: #00E0A8 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* ══ 17. SECTION SPACING ══════════════════════════════════════ */
html body .section { padding: 72px 0 !important; background: #070F1A !important; }
html body .section-alt { padding: 72px 0 !important; background: #0C1828 !important; border-top: 1px solid rgba(255,255,255,.05) !important; border-bottom: 1px solid rgba(255,255,255,.05) !important; }

/* Teal accent line at top of sections */
html body .section-alt::before {
  content: "" !important;
  display: block !important;
  width: 48px !important; height: 2px !important;
  background: linear-gradient(90deg, #00E0A8, transparent) !important;
  border-radius: 2px !important;
  margin: -72px auto 72px !important;
  opacity: .60 !important;
}

/* ══ 18. CONTACT / FORM ═══════════════════════════════════════ */
html body .contact-form,
html body form.form-v2 {
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  padding: 32px !important;
}
html body .form-group label { font-size: 12.5px !important; font-weight: 600 !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; margin-bottom: 6px !important; display: block !important; letter-spacing: .04em !important; }
html body .form-group input,
html body .form-group textarea,
html body .form-group select {
  background: #0A1825 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 7px !important;
  padding: 11px 14px !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  font-size: 14px !important;
  width: 100% !important;
  transition: border-color .2s !important;
}
html body .form-group input:focus,
html body .form-group textarea:focus,
html body .form-group select:focus {
  border-color: rgba(0,224,168,.45) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,224,168,.08) !important;
}
html body .form-group textarea { min-height: 120px !important; resize: vertical !important; }

/* ══ 19. QUICK NAV / JUMP NAV ════════════════════════════════ */
html body .transit-quick-nav-v81 {
  background: rgba(13,30,48,.50) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
html body .transit-quick-nav-v81::-webkit-scrollbar { display: none !important; }
html body .transit-quick-nav-v81 ul { display: flex !important; gap: 0 !important; list-style: none !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; }
html body .transit-quick-nav-v81 a {
  display: block !important;
  padding: 13px 18px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  transition: color .15s, border-color .15s !important;
}
html body .transit-quick-nav-v81 a:hover,
html body .transit-quick-nav-v81 a.active { color: #00E0A8 !important; -webkit-text-fill-color: #00E0A8 !important; border-bottom-color: #00E0A8 !important; }

/* ══ 20. FOOTER IMPROVEMENTS ══════════════════════════════════ */
html body .site-footer { padding: 56px 0 32px !important; }
html body .site-footer .footer-logo { margin-bottom: 16px !important; }
html body .site-footer .footer-desc { font-size: 13px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; line-height: 1.65 !important; max-width: 280px !important; }
html body .site-footer .footer-heading { font-size: 11px !important; font-weight: 700 !important; font-family: var(--px-mono) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; margin-bottom: 14px !important; }
html body .site-footer a { color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; font-size: 13.5px !important; text-decoration: none !important; line-height: 2.0 !important; }
html body .site-footer a:hover { color: #00E0A8 !important; -webkit-text-fill-color: #00E0A8 !important; }
html body .site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.07) !important; margin-top: 40px !important; padding-top: 20px !important; }
html body .site-footer .footer-bottom p { font-size: 12px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; margin: 0 !important; }
html body .site-footer .footer-asn { font-family: var(--px-mono) !important; font-size: 11px !important; color: rgba(0,224,168,.45) !important; -webkit-text-fill-color: rgba(0,224,168,.45) !important; }

/* ══ 21. BUTTONS — subpages ═══════════════════════════════════ */
html body .button,
html body a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 22px !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  transition: background .18s, border-color .18s, transform .15s, box-shadow .18s !important;
  letter-spacing: .01em !important;
}
html body .button-primary {
  background: #00E0A8 !important;
  color: #040F1A !important;
  -webkit-text-fill-color: #040F1A !important;
  border: none !important;
  box-shadow: none !important;
}
html body .button-primary:hover {
  background: #1AEDB8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,224,168,.28) !important;
}
html body .button-ghost {
  background: transparent !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
html body .button-ghost:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
}

/* ══ 22. PRICING TABLES / TIERS ═══════════════════════════════ */
html body .tier-card,
html body .pricing-tier {
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 14px !important;
  padding: 28px 24px !important;
  position: relative !important;
  overflow: hidden !important;
}
html body .tier-card.featured,
html body .pricing-tier.featured {
  background: #0F2540 !important;
  border-color: rgba(0,224,168,.32) !important;
  box-shadow: 0 0 0 1px rgba(0,224,168,.08) !important;
}
html body .tier-card.featured::before,
html body .pricing-tier.featured::before {
  content: "" !important;
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #00E0A8, transparent) !important;
}
html body .tier-name { font-family: var(--px-mono) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; margin-bottom: 12px !important; }
html body .tier-price { font-family: var(--px-mono) !important; font-size: 28px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; letter-spacing: -.02em !important; }
html body .tier-price span { font-size: 14px !important; font-weight: 400 !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; }
html body .check-list { list-style: none !important; padding: 0 !important; margin: 16px 0 0 !important; display: flex !important; flex-direction: column !important; gap: 9px !important; }
html body .check-list li { display: flex !important; align-items: flex-start !important; gap: 9px !important; font-size: 13.5px !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; line-height: 1.5 !important; }
html body .check-list li svg { color: #00E0A8 !important; flex-shrink: 0 !important; margin-top: 2px !important; width: 13px !important; height: 13px !important; }

/* ══ 23. INFRA / MAP PAGE ════════════════════════════════════ */
html body .infra-map-card,
html body .pxv93-infra-card {
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 14px !important;
  padding: 28px !important;
}
html body .pop-card {
  background: #0C1828 !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 10px !important;
  padding: 20px !important;
}
html body .pop-card.active { border-color: rgba(0,224,168,.30) !important; background: rgba(0,224,168,.04) !important; }
html body .pop-badge { font-family: var(--px-mono) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .10em !important; text-transform: uppercase !important; color: #00E0A8 !important; -webkit-text-fill-color: #00E0A8 !important; }

/* ══ 24. REVEALS ══════════════════════════════════════════════ */
html body .reveal { opacity: 0 !important; transform: translateY(14px) !important; transition: opacity .50s cubic-bezier(.22,.68,.2,1), transform .50s cubic-bezier(.22,.68,.2,1) !important; }
html body .reveal.revealed,
html body .reveal.visible { opacity: 1 !important; transform: none !important; }

/* ══ 25. PAGE-SPECIFIC HERO — DDoS tech page ════════════════ */
html body.page-ddos .hero-subpage,
html body.page-ddos .hero { background: #070F1A !important; }

/* ══ 26. PXVS93 HOME METRICS (stats row in hero copy) ════════ */
html body .pxv93-metrics { display: flex !important; gap: 24px !important; flex-wrap: wrap !important; margin-top: 28px !important; padding-top: 24px !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
html body .pxv93-metrics > div { display: flex !important; flex-direction: column !important; gap: 3px !important; }
html body .pxv93-metrics i { display: none !important; }
html body .pxv93-metrics strong { font-family: var(--px-mono) !important; font-size: 18px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; letter-spacing: -.01em !important; }
html body .pxv93-metrics span  { font-size: 11px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; }

/* ══ 27. PARTNERS BAND ════════════════════════════════════════ */
html body .partners-band,
html body .pxv93-partners { padding: 40px 0 !important; border-top: 1px solid rgba(255,255,255,.06) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; background: rgba(13,30,48,.35) !important; }
html body .partner-logos { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 24px 40px !important; }
html body .partner-logo { opacity: .35 !important; filter: grayscale(1) !important; transition: opacity .2s, filter .2s !important; }
html body .partner-logo:hover { opacity: .70 !important; filter: grayscale(0) !important; }

/* ══ 28. MOBILE TWEAKS ════════════════════════════════════════ */
@media (max-width: 480px) {
  html body .section, html body .section-alt { padding: 48px 0 !important; }
  html body .cta-band { padding: 40px 0 !important; }
  html body .hero-subpage { min-height: auto !important; }
}

/* ══ 29. DASHBOARD / v93 SUB-SECTIONS ═══════════════════════ */
html body .pxv93-section-head span { font-family: var(--px-mono) !important; font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #00E0A8 !important; -webkit-text-fill-color: #00E0A8 !important; }
html body .pxv93-section-head h2  { font-size: clamp(20px,2.4vw,34px) !important; font-weight: 800 !important; margin-bottom: 10px !important; }
html body .pxv93-section-head p   { font-size: 15px !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; }
html body .pxv93-head-actions { display: flex !important; gap: 16px !important; margin-top: 14px !important; flex-wrap: wrap !important; }
html body .pxv93-head-actions a { font-size: 13px !important; font-weight: 600 !important; color: #00E0A8 !important; -webkit-text-fill-color: #00E0A8 !important; text-decoration: none !important; }
html body .pxv93-head-actions a:hover { text-decoration: underline !important; }

/* Dashboard card */
html body .pxv93-dashboard { background: #0D1E30 !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 12px !important; overflow: hidden !important; }
html body .pxv93-dash-top { padding: 14px 18px 12px !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; background: rgba(0,224,168,.03) !important; }
html body .pxv93-dash-top strong { font-size: 13px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; }
html body .pxv93-dash-top span  { font-family: var(--px-mono) !important; font-size: 10px !important; color: rgba(0,224,168,.65) !important; -webkit-text-fill-color: rgba(0,224,168,.65) !important; display: flex !important; align-items: center !important; gap: 5px !important; }

/* pillars cards in the how-section */
html body .pxv93-pillars { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 14px !important; }
html body .pxv93-pillars article { background: #0D1E30 !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 10px !important; padding: 20px 18px !important; transition: border-color .2s !important; }
html body .pxv93-pillars article:hover { border-color: rgba(0,224,168,.25) !important; }
html body .pxv93-pillars h3 { font-size: 13.5px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; margin-bottom: 7px !important; }
html body .pxv93-pillars p  { font-size: 12.5px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; margin: 0 !important; line-height: 1.6 !important; }
html body .pxv93-pillars i  { color: #00E0A8 !important; display: block !important; margin-bottom: 12px !important; }

/* ══ 30. SOLUTION SECTION — home ═════════════════════════════ */
html body .pxv93-solutions { background: #0C1828 !important; padding: 72px 0 !important; border-top: 1px solid rgba(255,255,255,.06) !important; }
html body .pxv93-solutions-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)) !important; gap: 14px !important; margin-top: 32px !important; }
html body .pxv93-solution-card {
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 24px 20px !important;
  text-decoration: none !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
html body .pxv93-solution-card:hover { border-color: rgba(0,224,168,.28) !important; box-shadow: 0 4px 24px rgba(0,0,0,.35) !important; }

/* ══ 31. ANTI-DDOS TECHNOLOGY PAGE (px-antiddos-*) ══════════ */
html body .px-antiddos-page { background: #070F1A !important; }
html body .px-antiddos-bg {
  display: block !important;
  position: absolute !important; inset: 0 !important;
  background-image: radial-gradient(circle, rgba(255,255,255,.072) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  opacity: .60 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
html body .px-antiddos-hero {
  position: relative !important;
  background: #070F1A !important;
  padding: 0 !important;
  overflow: hidden !important;
  min-height: 75vh !important;
}
html body .px-antiddos-hero-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 52px !important;
  align-items: center !important;
  padding: 100px 0 80px !important;
  position: relative !important;
  z-index: 2 !important;
}
@media (max-width: 960px) {
  html body .px-antiddos-hero-grid { grid-template-columns: 1fr !important; padding: 80px 0 56px !important; }
}
html body .px-antiddos-hero-copy { display: flex !important; flex-direction: column !important; gap: 0 !important; }
html body .px-antiddos-lead {
  font-size: clamp(16px,1.45vw,20px) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: #D8EDFF !important;
  -webkit-text-fill-color: #D8EDFF !important;
  margin: 0 0 16px !important;
  max-width: 560px !important;
}
html body .px-antiddos-intro {
  font-size: 15px !important;
  line-height: 1.72 !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  max-width: 540px !important;
  margin-bottom: 28px !important;
}
/* Hero panel: diagram box */
html body .px-antiddos-hero-panel {
  background: #0D1E30 !important;
  border: 1px solid rgba(0,224,168,0.28) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(0,224,168,0.05), 0 24px 64px rgba(0,0,0,.55) !important;
  position: relative !important;
}
html body .px-antiddos-hero-panel::before {
  content: "" !important;
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,224,168,.55), transparent) !important;
  pointer-events: none !important;
}
html body .px-antiddos-diagram {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px 20px 18px !important;
  gap: 4px !important;
  background: rgba(0,0,0,.18) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
html body .px-antiddos-diagram .diagram-node {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  font-family: var(--px-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 10px 10px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  min-width: 62px !important;
  text-align: center !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
}
html body .px-antiddos-diagram .node-flowspec { background: rgba(0,224,168,.06) !important; border-color: rgba(0,224,168,.25) !important; color: #00E0A8 !important; -webkit-text-fill-color: #00E0A8 !important; }
html body .px-antiddos-diagram .node-dpdk { background: rgba(53,120,255,.06) !important; border-color: rgba(53,120,255,.22) !important; color: #6EAAFF !important; -webkit-text-fill-color: #6EAAFF !important; }
html body .px-antiddos-diagram .node-clean { background: rgba(0,224,168,.08) !important; border-color: rgba(0,224,168,.32) !important; color: #00E0A8 !important; -webkit-text-fill-color: #00E0A8 !important; }
html body .px-antiddos-diagram .diagram-line { flex: 1 !important; height: 1.5px !important; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(0,224,168,.30)) !important; position: relative !important; }
html body .px-antiddos-panel-note {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  background: rgba(0,224,168,.04) !important;
}
html body .px-antiddos-panel-note strong { font-size: 12px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; }
html body .px-antiddos-panel-note span   { font-family: var(--px-mono) !important; font-size: 10px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; }

/* Stats strip */
html body .px-antiddos-stats-section {
  background: rgba(13,30,48,.70) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 28px 0 !important;
}
html body .px-antiddos-stats {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 0 !important;
}
@media (max-width: 720px) { html body .px-antiddos-stats { grid-template-columns: repeat(2,1fr) !important; } }
html body .px-antiddos-stat {
  display: flex !important; flex-direction: column !important; gap: 4px !important;
  padding: 0 24px !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  align-items: center !important; text-align: center !important;
}
html body .px-antiddos-stat:last-child { border-right: none !important; }
html body .px-antiddos-stat strong {
  font-family: var(--px-mono) !important;
  font-size: 18px !important; font-weight: 700 !important;
  color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important;
  letter-spacing: -.01em !important;
}
html body .px-antiddos-stat span { font-size: 11.5px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; line-height: 1.45 !important; }

/* Flow section (pipeline diagram with moving packets) */
html body .px-flow-section { background: #070F1A !important; padding: 72px 0 !important; }
html body .px-flow-head { text-align: center !important; margin-bottom: 40px !important; }
html body .px-flow-head h2 { font-size: clamp(20px,2.4vw,32px) !important; font-weight: 800 !important; color: #EDF5FF !important; margin-bottom: 10px !important; }
html body .px-flow-head p  { color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; font-size: 15px !important; }
html body .px-flow {
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  padding: 36px 28px 24px !important;
  overflow: hidden !important;
}
html body .px-flow-track {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  overflow-x: auto !important;
  padding-bottom: 8px !important;
  scrollbar-width: thin !important;
}
html body .px-flow-node {
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important;
  text-align: center !important; min-width: 100px !important; flex-shrink: 0 !important;
}
html body .px-flow-dot {
  width: 48px !important; height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.04) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #8AAAC8 !important;
}
html body .px-flow-node.n3 .px-flow-dot { background: rgba(0,224,168,.08) !important; border-color: rgba(0,224,168,.35) !important; color: #00E0A8 !important; }
html body .px-flow-node.n5 .px-flow-dot { background: rgba(0,224,168,.08) !important; border-color: rgba(0,224,168,.25) !important; color: #00E0A8 !important; }
html body .px-flow-node strong { font-size: 12px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; }
html body .px-flow-sub { font-family: var(--px-mono) !important; font-size: 9.5px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; }
html body .px-flow-link {
  flex: 1 !important; min-width: 32px !important;
  height: 2px !important;
  position: relative !important;
  align-self: center !important;
  margin-bottom: 42px !important;
}
html body .px-flow-link:not(.is-clean) { background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.18)) !important; }
html body .px-flow-link.is-clean { background: linear-gradient(90deg, rgba(0,224,168,.20), rgba(0,224,168,.45)) !important; }
/* Animated packets on the flow */
html body .px-flow-link .pkt {
  position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  animation: px-flow-move 1.8s linear infinite !important;
}
html body .px-flow-link .pkt-legit { background: rgba(0,224,168,.85) !important; top: calc(50% - 5px) !important; }
html body .px-flow-link .pkt-attack { background: rgba(255,61,80,.85) !important; top: calc(50% + 5px) !important; animation-delay: .9s !important; }
@keyframes px-flow-move { from { left: 0 } to { left: calc(100% - 7px) } }
html body .px-flow-legend {
  display: flex !important; gap: 20px !important; justify-content: center !important;
  margin-top: 20px !important; padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  flex-wrap: wrap !important;
}
html body .px-flow-legend .lg {
  display: flex !important; align-items: center !important; gap: 7px !important;
  font-size: 12px !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important;
}
html body .px-flow-legend .lg::before { content:"" !important; width:8px !important; height:8px !important; border-radius:50% !important; flex-shrink:0 !important; }
html body .px-flow-legend .lg-legit::before { background: rgba(0,224,168,.85) !important; }
html body .px-flow-legend .lg-attack::before { background: rgba(255,61,80,.85) !important; }
html body .px-flow-legend .lg-clean::before { background: #00E0A8 !important; }

/* Summary card */
html body .px-antiddos-summary-section { background: #0C1828 !important; padding: 64px 0 !important; border-top: 1px solid rgba(255,255,255,.06) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
html body .px-antiddos-summary-card {
  display: grid !important; grid-template-columns: 1fr 1.5fr !important; gap: 52px !important; align-items: center !important;
  background: #0D1E30 !important; border: 1px solid rgba(0,224,168,.18) !important; border-radius: 16px !important;
  padding: 36px !important; position: relative !important; overflow: hidden !important;
}
html body .px-antiddos-summary-card::before {
  content:"" !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  height:1px !important; background:linear-gradient(90deg,transparent,rgba(0,224,168,.45),transparent) !important;
}
@media (max-width: 720px) { html body .px-antiddos-summary-card { grid-template-columns: 1fr !important; padding: 24px !important; } }
html body .px-antiddos-summary-card .eyebrow { margin-bottom: 10px !important; }
html body .px-antiddos-summary-card h2 { font-size: clamp(16px,2vw,22px) !important; margin: 0 !important; }
html body .px-antiddos-summary-card p { font-size: 14.5px !important; line-height: 1.72 !important; }

/* Flow steps grid (cycle section) */
html body .px-antiddos-flow-section { background: #070F1A !important; padding: 72px 0 !important; }
html body .px-antiddos-flow-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  margin-top: 32px !important;
}
@media (max-width: 960px) { html body .px-antiddos-flow-grid { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 560px) { html body .px-antiddos-flow-grid { grid-template-columns: repeat(2,1fr) !important; } }
html body .px-antiddos-flow-card {
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 22px 18px !important;
  position: relative !important;
  transition: border-color .2s !important;
  overflow: hidden !important;
}
html body .px-antiddos-flow-card:hover { border-color: rgba(0,224,168,.28) !important; }
html body .px-antiddos-flow-card > span {
  display: inline-block !important;
  font-family: var(--px-mono) !important; font-size: 28px !important; font-weight: 700 !important;
  color: rgba(0,224,168,.12) !important; -webkit-text-fill-color: rgba(0,224,168,.12) !important;
  line-height: 1 !important; margin-bottom: 10px !important;
}
html body .px-antiddos-flow-card h3 { font-size: 13.5px !important; font-weight: 700 !important; color: #00E0A8 !important; -webkit-text-fill-color: #00E0A8 !important; margin-bottom: 7px !important; }
html body .px-antiddos-flow-card p  { font-size: 12.5px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; margin: 0 !important; line-height: 1.6 !important; }

/* Content sections (numbered article cards) */
html body .px-antiddos-content-section { background: #0C1828 !important; padding: 72px 0 !important; }
html body .px-antiddos-article-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 16px !important;
}
@media (max-width: 960px) { html body .px-antiddos-article-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 600px) { html body .px-antiddos-article-grid { grid-template-columns: 1fr !important; } }
html body .px-antiddos-article-card {
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important; flex-direction: column !important;
  transition: border-color .2s !important;
}
html body .px-antiddos-article-card.featured {
  grid-column: span 1 !important;
  border-color: rgba(0,224,168,.22) !important;
}
html body .px-antiddos-article-card:hover { border-color: rgba(0,224,168,.28) !important; }
html body .px-antiddos-card-index {
  padding: 14px 20px 0 !important;
  font-family: var(--px-mono) !important;
  font-size: 24px !important; font-weight: 700 !important;
  color: rgba(0,224,168,.15) !important; -webkit-text-fill-color: rgba(0,224,168,.15) !important;
  line-height: 1 !important;
}
html body .px-antiddos-card-body { padding: 12px 20px 22px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
html body .px-antiddos-card-body h2 { font-size: 14px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; line-height: 1.35 !important; margin: 0 !important; }
html body .px-antiddos-card-body p  { font-size: 12.5px !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; margin: 0 !important; line-height: 1.65 !important; }
html body .px-antiddos-card-body ul { list-style: none !important; padding: 0 !important; margin: 4px 0 0 !important; display: flex !important; flex-direction: column !important; gap: 7px !important; }
html body .px-antiddos-card-body li { display: flex !important; align-items: flex-start !important; gap: 8px !important; font-size: 12.5px !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; line-height: 1.5 !important; }
html body .px-antiddos-card-body li svg { color: #00E0A8 !important; flex-shrink: 0 !important; margin-top: 2px !important; width: 12px !important; height: 12px !important; }

/* Final CTA */
html body .px-antiddos-final-cta { background: #070F1A !important; padding: 72px 0 !important; }
html body .px-antiddos-final-card {
  background: linear-gradient(135deg, #0D1E30, #0F2540) !important;
  border: 1px solid rgba(0,224,168,.20) !important;
  border-radius: 16px !important;
  padding: 48px !important;
  display: grid !important; grid-template-columns: 1fr auto !important; gap: 48px !important; align-items: center !important;
  position: relative !important; overflow: hidden !important;
}
html body .px-antiddos-final-card::before {
  content:"" !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  height:1px !important; background:linear-gradient(90deg,transparent,rgba(0,224,168,.50),transparent) !important;
}
@media (max-width: 720px) { html body .px-antiddos-final-card { grid-template-columns: 1fr !important; padding: 28px !important; } }
html body .px-antiddos-final-card h2 { font-size: clamp(18px,2.2vw,28px) !important; margin-bottom: 12px !important; }
html body .px-antiddos-final-card p  { font-size: 15px !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; max-width: 500px !important; }
html body .px-antiddos-final-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; flex-shrink: 0 !important; min-width: 180px !important; }

/* Dashboard in home band */
html body .px-antiddos-home-band { padding: 80px 0 !important; background: #0C1828 !important; border-top: 1px solid rgba(255,255,255,.06) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
html body .px-antiddos-heading { margin-bottom: 40px !important; }
html body .px-antiddos-heading h2 { font-size: clamp(20px,2.6vw,36px) !important; font-weight: 800 !important; margin-bottom: 12px !important; }
html body .px-antiddos-heading p  { font-size: 16px !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; max-width: 600px !important; }
html body .px-antiddos-home-actions { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; margin-top: 20px !important; }
html body .px-antiddos-home-card {
  display: grid !important; grid-template-columns: 1.1fr 0.9fr !important; gap: 24px !important;
}
@media (max-width: 900px) { html body .px-antiddos-home-card { grid-template-columns: 1fr !important; } }
html body .px-antiddos-pillar-grid {
  display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important;
  align-content: start !important;
}
html body .px-antiddos-pillar {
  display: flex !important; align-items: flex-start !important; gap: 12px !important;
  padding: 14px 16px !important;
  background: #0D1E30 !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 10px !important;
  transition: border-color .2s !important;
}
html body .px-antiddos-pillar:hover { border-color: rgba(0,224,168,.22) !important; }
html body .px-antiddos-pillar-icon { color: #00E0A8 !important; flex-shrink: 0 !important; margin-top: 2px !important; }
html body .px-antiddos-pillar strong { font-size: 13.5px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; display: block !important; margin-bottom: 4px !important; }
html body .px-antiddos-pillar p      { font-size: 12.5px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; margin: 0 !important; line-height: 1.55 !important; }

/* Dashboard widget */
html body .px-antiddos-dashboard {
  background: #0D1E30 !important; border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 12px !important; overflow: hidden !important;
}
html body .px-antiddos-dash-top {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 13px 16px !important; background: rgba(0,224,168,.04) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
html body .px-antiddos-dash-top strong { font-size: 12px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; }
html body .px-antiddos-dash-top span  { display: flex !important; align-items: center !important; gap: 6px !important; font-family: var(--px-mono) !important; font-size: 10px !important; color: rgba(0,224,168,.75) !important; -webkit-text-fill-color: rgba(0,224,168,.75) !important; }
html body .px-antiddos-dash-top span i { display: inline-block !important; width: 6px !important; height: 6px !important; background: #00E0A8 !important; border-radius: 50% !important; animation: p15-blink 2s infinite !important; }
html body .px-antiddos-dash-main { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1px !important; background: rgba(255,255,255,.04) !important; }
html body .px-antiddos-traffic-card,
html body .px-antiddos-vector-card { background: #0D1E30 !important; padding: 12px 14px !important; }
html body .px-antiddos-traffic-card > span,
html body .px-antiddos-vector-card > span { display: block !important; font-family: var(--px-mono) !important; font-size: 9.5px !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; margin-bottom: 8px !important; }
html body .px-antiddos-traffic-numbers { display: flex !important; gap: 12px !important; margin-bottom: 8px !important; }
html body .px-antiddos-traffic-numbers strong { font-family: var(--px-mono) !important; font-size: 13px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; }
html body .px-antiddos-traffic-numbers .is-red { color: rgba(255,61,80,.75) !important; -webkit-text-fill-color: rgba(255,61,80,.75) !important; }
html body .px-antiddos-chart { display: flex !important; align-items: flex-end !important; gap: 3px !important; height: 36px !important; }
html body .px-antiddos-chart span { flex: 1 !important; min-width: 4px !important; height: var(--h,40%) !important; background: linear-gradient(180deg,rgba(53,120,255,.55),rgba(53,120,255,.25)) !important; border-radius: 2px 2px 0 0 !important; }
html body .px-antiddos-time { display: flex !important; justify-content: space-between !important; margin-top: 4px !important; }
html body .px-antiddos-time small { font-family: var(--px-mono) !important; font-size: 8px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; }
html body .px-antiddos-vector { display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 6px !important; }
html body .px-antiddos-vector small { font-family: var(--px-mono) !important; font-size: 9.5px !important; color: #8AAAC8 !important; -webkit-text-fill-color: #8AAAC8 !important; min-width: 100px !important; }
html body .px-antiddos-vector b { flex: 1 !important; height: 4px !important; background: linear-gradient(90deg, rgba(255,61,80,.60) var(--w,50%), rgba(255,255,255,.06) var(--w,50%)) !important; border-radius: 2px !important; }
html body .px-antiddos-vector em { font-family: var(--px-mono) !important; font-style: normal !important; font-size: 9.5px !important; color: rgba(255,61,80,.65) !important; -webkit-text-fill-color: rgba(255,61,80,.65) !important; min-width: 36px !important; text-align: right !important; }
html body .px-antiddos-dash-stats { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 1px !important; background: rgba(255,255,255,.04) !important; border-top: 1px solid rgba(255,255,255,.06) !important; }
html body .px-antiddos-dash-stats > div { background: #0D1E30 !important; padding: 10px 12px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; align-items: center !important; }
html body .px-antiddos-dash-stats strong { font-family: var(--px-mono) !important; font-size: 11px !important; font-weight: 700 !important; color: #EDF5FF !important; -webkit-text-fill-color: #EDF5FF !important; }
html body .px-antiddos-dash-stats span { font-family: var(--px-mono) !important; font-size: 8.5px !important; color: #4C6480 !important; -webkit-text-fill-color: #4C6480 !important; text-align: center !important; }