/**
 * CYBERDUDEBIVASH SENTINEL APEX — Mobile-First Design System v1.0
 * ═══════════════════════════════════════════════════════════════════
 * Strategy: Mobile base → tablet → desktop (min-width progression)
 * Principles: Single-column, no overflow, clear hierarchy, 1 sticky CTA
 * Load order: after apex-v13.css — overrides where needed
 */

/* ═══════════════════════════════════════════════════════════════════
   § 0. GLOBAL RESETS & BASE
═══════════════════════════════════════════════════════════════════ */
:root {
  --apex-cyan:   #00ffe0;
  --apex-red:    #ff3b3b;
  --apex-green:  #00ff88;
  --apex-bg:     #07090f;
  --apex-surface:#0d1117;
  --apex-border: #1f2937;
  --apex-text:   #e2e8f0;
  --apex-muted:  #6b7280;
  /* spacing scale */
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;
  /* touch targets */
  --tap-min: 44px;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent layout shift from scrollbar */
html { scrollbar-gutter: stable; }

/* ═══════════════════════════════════════════════════════════════════
   § 1. TYPOGRAPHY SCALE
═══════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
}

p, li, span {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Fluid type for hero headline */
.hero h1 {
  font-size: clamp(26px, 7vw, 60px);
  line-height: 1.15;
}

/* ═══════════════════════════════════════════════════════════════════
   § 2. TOUCH TARGETS — all interactive elements min 44px
═══════════════════════════════════════════════════════════════════ */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
.nav-cta,
.btn-primary,
.btn-secondary,
.hub-tab,
.cta-btn,
.rcb-card-btn,
.ctx-btn-primary,
.ctx-btn-secondary,
.nl-btn,
.rcb-nl-btn {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* Override display:block CTAs that break flex */
.rcb-card-btn,
.ctx-btn-primary,
.ctx-btn-secondary,
a.btn-primary,
a.btn-secondary,
a.cta-btn,
a.rcb-nl-btn {
  display: inline-flex !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 2.5  GLOBAL BANNER ORCHESTRATION — ALL VIEWPORTS
   Prevents the 3-banner stack that buries the nav on every screen size.
   Rule: only ONE promotional banner is visible at a time.
   Header/nav is always authoritative above all injected elements.
═══════════════════════════════════════════════════════════════════ */

/* ── Header always on top regardless of injected banners ───────── */
header,
.site-header,
nav.main-nav {
  z-index: 10000 !important;
  position: sticky !important;
  top: 0 !important;
}

/* ── APEX Sticky bar — single announcement slot ────────────────── */
/* Sits just below the header (header ~56px). One at a time. */
#apex-sticky {
  z-index: 9950 !important;
  top: 0 !important;
  max-height: 52px;
  overflow: hidden;
}

/* ── CX4 return banner — below apex-sticky if both exist ─────── */
/* We push it to var(--banner-top, 56px) — JS will set this */
#cx4-return-banner {
  z-index: 9940 !important;
  top: var(--cx4-banner-top, 56px) !important;
}

/* ── Second-tier promo strip (aim medium / high) ─────────────── */
#aim-medium-card,
#aim-high-intent-strip,
[id^="aim-"] [style*="position:fixed"][style*="top"] {
  z-index: 9930 !important;
}

/* ── Bottom-anchored strips — never overlap header ──────────── */
#apex-bottom-bar,
#aim-high-intent-strip {
  z-index: 9920 !important;
  bottom: 0 !important;
  top: auto !important;
}

/* ── Bundle/toast prompts — corner, never covering header ───── */
#aim-bundle-prompt,
#apex-toast {
  z-index: 9910 !important;
  bottom: 80px !important;
  top: auto !important;
}

/* ── Exit overlays — fullscreen, highest possible ──────────── */
#cx4-exit-overlay,
#apex-exit-overlay {
  z-index: 99998 !important;
}

/* ── Body padding guard — never let JS padding push content ── */
/* banner-orchestrator.js sets --banner-offset accurately       */
body {
  padding-top: var(--body-banner-offset, 0px) !important;
}

/* ── BANNER VISIBILITY CLASSES set by banner-orchestrator.js ─ */
/* When .bo-hidden, the element is off-screen but not display:none
   so JS transitions still work */
.bo-hidden {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ── DESKTOP: suppress the duplicative CX4 visit-count banner
   when the apex-sticky is already visible (they say same thing) ─ */
body.has-apex-sticky #cx4-return-banner {
  display: none !important;
}

/* ── Ensure scrollbar indicator never overlaps header ────────── */
#cx4-scroll-bar {
  z-index: 10001 !important;
  top: 0 !important;
  height: 3px !important;
}

/* ── Visual calming: slow/reduce animation aggression ────────── */
#apex-sticky *,
#cx4-return-banner *,
#aim-high-intent-strip * {
  animation-duration: 2s !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 3. REDUCED MOTION SUPPORT
═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   § 4. MOBILE BASE (≤ 767px) — PRIMARY EXPERIENCE
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 4.1 Global spacing reset ───────────────────────────────── */
  .main {
    padding: var(--sp-md) var(--sp-md) 80px !important;
    grid-template-columns: 1fr !important;
    gap: var(--sp-lg) !important;
  }

  .featured-intel-section,
  .stats-bar,
  .newsletter-bar {
    padding-left:  var(--sp-md) !important;
    padding-right: var(--sp-md) !important;
  }

  /* ── 4.2 MOBILE OVERLAY SUPPRESSION (CRITICAL) ─────────────────
     These injected banners all fire at once and collide on mobile.
     On mobile we use ONLY: hero CTA + journey soft CTA + aim-high-intent-strip.
     Everything else is suppressed to prevent text collision.
  ────────────────────────────────────────────────────────────── */

  /* monetization.js — fixed sticky promo bar at top:0 z-index:99999 */
  #apex-sticky              { display: none !important; }

  /* monetization.js — exit overlay popup */
  #apex-exit-overlay        { display: none !important; }

  /* monetization.js — bottom bar (conflicts with aim-high-intent-strip) */
  #apex-bottom-bar          { display: none !important; }

  /* monetization.js — toast popup bottom-left */
  #apex-toast               { display: none !important; }

  /* conversion-engine.js — "Welcome back! Visit #8x — claim VIP90" */
  /* fires at top:56px, overlaps the header nav completely */
  #cx4-return-banner        { display: none !important; }

  /* conversion-engine.js — "Start 7-Day Free Trial / Claim Offer" slide-in */
  #cx4-overlay              { display: none !important; }

  /* conversion-engine.js — exit intent fullscreen overlay */
  #cx4-exit-overlay         { display: none !important; }

  /* conversion-engine.js — progress scroll bar at top */
  #cx4-scroll-bar           { display: none !important; }

  /* ai-monetization-engine.js — bundle prompt popup */
  #aim-bundle-prompt        { display: none !important; }

  /* ai-monetization-engine.js — "You've visited X times" fixed top strip (top:64px z-index:9997) */
  #aim-upgrade-strip        { display: none !important; }

  /* ai-monetization-engine.js — intent-driven inline banner injected before main content */
  #aim-intent-banner        { display: none !important; }

  /* ai-monetization-engine.js — social proof toasts bottom-left */
  #aim-toast-container      { display: none !important; }

  /* Legacy cx- return banner (pre-cx4 engine) — overlaps header at top:130px */
  #cx-return-banner         { display: none !important; }

  /* Legacy cx- scroll progress bar and smart overlay */
  #cx-scroll-bar            { display: none !important; }
  #cx-smart-overlay         { display: none !important; }

  /* Paywall overlay — suppressed on mobile (reading gated content defeats mobile UX) */
  #cx4-paywall-overlay      { display: none !important; }

  /* Remove body padding injected by apex-sticky JS */
  body                      { padding-top: 0 !important; }

  /* ── 4.3 Header — authoritative, no overlap ─────────────────── */
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;  /* must beat all injected banners (aim-upgrade-strip: 9997) */
    background: var(--apex-bg) !important;
    border-bottom: 1px solid rgba(0,255,224,.1) !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .header-inner {
    padding: 10px var(--sp-md) !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Logo: hide badge, show brand name as a single clean horizontal line ── */
  .logo-badge {
    display: none !important;
  }

  .logo-wrap {
    flex-shrink: 0 !important;
    min-width: 0 !important;
    max-width: none !important;   /* no max-width constraint — let it be its natural size */
    display: flex !important;
    align-items: center !important;
  }

  .logo {
    font-size: 16px !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;     /* CRITICAL: prevents letter wrapping */
    overflow: hidden !important;
    text-overflow: clip !important;
    display: inline-flex !important;
    align-items: center !important;
    color: var(--apex-cyan) !important;
    text-decoration: none !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  /* BIVASH span — always inline, never block, never on its own line */
  .logo span {
    color: #fff !important;
    display: inline !important;
    white-space: nowrap !important;
  }

  /* Nav: show only 2 key links on mobile, rest hidden */
  nav {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 2px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    align-items: center !important;
  }

  /* Show only first 2 nav links on mobile, rest via hamburger */
  nav a:nth-child(n+3):not(.nav-cta):not(#mobile-nav-toggle) {
    display: none !important;
  }

  /* Hide all nav links except the CTA on very small screens */
  nav a:not(.nav-cta) {
    display: none !important;
  }

  /* Mobile-nav-toggle (hamburger) always visible */
  #mobile-nav-toggle {
    display: flex !important;
    flex-shrink: 0 !important;
  }

  nav a {
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    min-height: 36px !important;
  }

  /* Keep nav CTA always visible */
  .nav-cta {
    display: inline-flex !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0;
  }

  /* ── Section nav bar: hide on mobile (reduces header clutter) ── */
  .section-nav-bar-outer {
    display: none !important;
  }

  /* ── LCAB (Live Threats bar): compact single scroll row ─────── */
  #live-critical-alert-bar {
    padding: 7px var(--sp-md) !important;
  }
  .lcab-inner {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  .lcab-time {
    display: none !important; /* remove "Updated: HH:MM" on mobile */
  }
  .lcab-threats {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    scrollbar-width: none !important;
  }
  .lcab-threats::-webkit-scrollbar { display: none !important; }
  .lcab-ttext {
    max-width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* ── 4.3 Ticker — compact single-line ──────────────────────── */
  .ticker-wrap {
    padding: 6px 0 !important;
  }

  .ticker-item {
    font-size: 11px !important;
    padding: 0 24px !important;
    font-weight: 600 !important;
  }

  .ticker-label {
    font-size: 11px !important;
  }

  /* ── 4.4 Section nav bar — scrollable, no pipe separators ──── */
  .section-nav-bar-outer {
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .section-nav-bar-outer::-webkit-scrollbar { display: none !important; }

  .section-nav-bar {
    flex-wrap: nowrap !important;
    padding: 6px var(--sp-md) !important;
    gap: 6px !important;
  }

  /* Hide pipe separators */
  .section-nav-bar span[style*="color:#374151"] {
    display: none !important;
  }

  /* ── 4.5 Intel hub bar — NOT sticky on mobile (avoid double sticky) */
  .intel-hub-bar {
    position: static !important;
    top: auto !important;
  }

  .hub-bar-inner {
    padding: 0 var(--sp-md) !important;
    gap: 6px !important;
  }

  .hub-label {
    font-size: 10px !important;
  }

  .hub-tab {
    font-size: 9px !important;
    padding: 5px 10px !important;
    min-height: 32px !important;
  }

  /* ── 4.6 Live critical alert bar — 2-column on mobile ──────── */
  #live-critical-alert-bar {
    padding: 8px var(--sp-md) !important;
  }

  .lcab-inner {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .lcab-threats {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  .lcab-threats::-webkit-scrollbar { display: none; }

  .lcab-threat {
    flex-shrink: 0 !important;
    min-height: 36px !important;
  }

  .lcab-ttext {
    font-size: 11px !important;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lcab-divider { display: none !important; }

  .lcab-time { font-size: 10px !important; align-self: flex-end; }

  /* ── 4.7 HERO — simplified, single CTA focus ────────────────── */
  .hero {
    padding: 40px var(--sp-md) 36px !important;
  }

  /* Hide decorative/secondary hero elements on mobile */
  .hero-terminal { display: none !important; }
  .hero-label { font-size: 10px !important; letter-spacing: 1.5px !important; padding: 5px 12px !important; }

  .hero-desc {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }

  /* Hero CTAs: stack vertically, full-width */
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
  }

  /* Hide secondary hero CTA on mobile — single conversion path */
  .hero-actions .btn-secondary {
    display: none !important;
  }

  /* Live stats row — compact */
  .hero-live-stats {
    gap: 12px !important;
    font-size: 11px !important;
    margin-top: 16px !important;
    justify-content: center !important;
  }

  .hls-item { gap: 5px !important; }

  /* Daily digest in hero — hide on mobile */
  #apex-daily-digest {
    display: none !important;
  }

  /* ── 4.8 Stats bar — horizontal scroll carousel ─────────────── */
  .stats-bar {
    padding: 10px var(--sp-md) !important;
  }

  .stats-inner {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: var(--sp-lg) !important;
    scrollbar-width: none !important;
    padding-bottom: 4px;
  }

  .stats-inner::-webkit-scrollbar { display: none !important; }

  .stat-num { font-size: 18px !important; }
  .stat-lbl { font-size: 10px !important; }
  .stat-item { flex-shrink: 0; }

  /* ── 4.9 Newsletter bar — vertical stack ────────────────────── */
  .newsletter-bar {
    padding: var(--sp-md) !important;
  }

  .newsletter-form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .nl-label { text-align: center; }
  .nl-input  { width: 100% !important; font-size: 16px !important; /* prevent iOS zoom */ }
  .nl-btn    { width: 100% !important; }

  /* ── 4.10 Featured intel grid — 2 columns on mobile ────────── */
  .fi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: var(--sp-lg) !important;
  }

  .fi-card {
    padding: 12px !important;
  }

  .fi-icon  { font-size: 20px !important; }
  .fi-name  { font-size: 9px !important; }
  .fi-desc  { font-size: 10px !important; }

  /* ── 4.11 Sidebar — pushed below main content ───────────────── */
  .sidebar {
    order: 2 !important;
  }

  /* ── 4.12 Post cards / intel feed — full width ──────────────── */
  .intel-post {
    border-radius: 8px !important;
    margin-bottom: 12px !important;
  }

  .post-header { padding: 12px 14px 8px !important; }
  .post-body-wrap { padding: 10px 14px 12px !important; }
  .post-title { font-size: 1rem !important; }
  .post-meta-row { gap: 4px !important; }

  /* ── 4.13 Context CTA row — stack on mobile ─────────────────── */
  .ctx-cta-row,
  .post-cta-row {
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    gap: 6px !important;
  }

  .ctx-btn-primary,
  .ctx-btn-secondary,
  .cta-btn {
    flex: 1 1 calc(50% - 3px) !important;
    font-size: .75rem !important;
    padding: 8px 6px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .ctx-share-btn,
  .share-btn {
    margin-left: 0 !important;
    flex: 0 1 auto !important;
  }

  /* ── 4.14 Revenue CTA block — single column ─────────────────── */
  .rcb-section {
    padding: var(--sp-lg) var(--sp-md) !important;
  }

  .rcb-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .rcb-card {
    padding: 1rem !important;
  }

  .rcb-newsletter {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .rcb-nl-form {
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .rcb-nl-input {
    font-size: 16px !important; /* prevent iOS zoom */
    min-width: 0 !important;
    width: 100% !important;
  }

  .rcb-nl-btn {
    width: 100% !important;
  }

  /* ── 4.15 Trust footer — wrap tightly ───────────────────────── */
  .intel-trust-footer,
  .rcb-trust {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  /* ── 4.16 Analyst note / defensive block ────────────────────── */
  .analyst-note,
  .defensive-block {
    margin: 10px 0 !important;
  }

  .defensive-list {
    padding-left: 1rem !important;
  }

  /* ── 4.17 Pricing section ───────────────────────────────────── */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-md) !important;
  }

  .pricing-section {
    padding: 0 var(--sp-md) !important;
  }

  /* ── 4.18 Compare table — horizontal scroll ─────────────────── */
  .compare-section {
    padding: var(--sp-xl) var(--sp-md) !important;
    overflow-x: auto !important;
  }

  .compare-table {
    min-width: 560px !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   § 5. EXTRA SMALL MOBILE (≤ 399px)
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 399px) {
  .hero h1 { font-size: 24px !important; }
  .hero-desc { font-size: 14px !important; }
  .fi-grid { grid-template-columns: 1fr !important; }

  nav a:nth-child(n+3):not(.nav-cta) { display: none !important; }

  .rcb-badge { font-size: .65rem !important; padding: .25rem .75rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   § 6. TABLET (768px – 1023px)
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .main {
    grid-template-columns: 1fr !important;
    padding: var(--sp-xl) var(--sp-lg) 80px !important;
  }

  .header-inner {
    padding: 14px var(--sp-xl) !important;
  }

  .hero { padding: 56px var(--sp-xl) !important; }

  nav a { font-size: 12px !important; padding: 6px 10px !important; }

  .fi-grid { grid-template-columns: repeat(3, 1fr) !important; }

  .rcb-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   § 7. DESKTOP (1024px+) — enhancement layer
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .main {
    grid-template-columns: 1fr 340px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   § 8. Z-INDEX CONSOLIDATION
   Clear stacking context — NO more competing fixed layers
═══════════════════════════════════════════════════════════════════ */

/* Header is the ONLY sticky top element */
header {
  z-index: 1000 !important;
}

/* Section nav and intel hub bar — below header, NOT sticky on mobile */
.intel-hub-bar {
  z-index: 990 !important;
}

/* ONE sticky bottom CTA — all others subordinate */
#aim-high-intent-strip {
  z-index: 500 !important;
}

/* Toast notifications — low-level, non-blocking */
#aim-toast-container {
  z-index: 400 !important;
  bottom: 80px !important; /* above any bottom sticky */
  left: var(--sp-md) !important;
  max-width: min(300px, calc(100vw - 32px)) !important;
}

/* Return banner — below header sticky */
#cx-return-banner {
  top: 0 !important;
  z-index: 600 !important;
}

/* Paywall overlay */
#cx-smart-overlay,
.cx4-paywall-overlay {
  z-index: 800 !important;
}

/* Exit intent */
.cx4-exit-overlay {
  z-index: 900 !important;
}

/* Scroll progress bar — topmost non-modal element */
#cx-scroll-bar {
  z-index: 950 !important;
  height: 2px !important;
}

/* Bundle prompt — hide on mobile, show only on desktop */
#aim-bundle-prompt {
  display: none !important;
}

@media (min-width: 1024px) {
  #aim-bundle-prompt {
    display: block !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   § 9. CTA STACKING PREVENTION
   One sticky bottom CTA at a time
═══════════════════════════════════════════════════════════════════ */

/* When high-intent strip is visible, hide upgrade strip (no double bottom bar) */
#aim-high-intent-strip ~ #aim-upgrade-strip,
#aim-upgrade-strip + #aim-high-intent-strip {
  display: none !important;
}

/* Low-intent newsletter bar — don't show if high-intent strip is showing */
body.has-sticky-cta #aim-low-intent-bar {
  display: none !important;
}

/* Max inline CTAs: hide 3rd+ AIM inject */
.aim-product-inject:nth-of-type(n+3) {
  display: none !important;
}

/* On mobile: hide bottom CTA bar from monetization.js if high-intent strip present */
@media (max-width: 767px) {
  body.has-sticky-cta .apex-sticky-bar,
  body.has-sticky-cta #cx-sticky-bar {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   § 10. VISUAL AUTHORITY UPGRADE
   Reduce neon overload, improve contrast, consistent palette
═══════════════════════════════════════════════════════════════════ */

/* Body copy: softer, more readable */
.post-body,
.rcb-sub,
.analyst-text {
  color: #b0bec5 !important;
  line-height: 1.75 !important;
}

/* Section labels: consistent sizing */
.section-label,
.fi-title,
.hub-label {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
}

/* Reduce excessive glow animations on mobile */
@media (max-width: 767px) {
  .live-tab,
  @keyframes livePulse {
    0%, 100% { box-shadow: none !important; }
  }

  /* Dim matrix canvas on mobile — performance */
  #matrixCanvas { display: none !important; }

  /* No hover transforms on mobile (they look jarring on tap) */
  .fi-card:hover,
  .rcb-card:hover,
  .intel-post:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   § 11. CLICKABLE CARDS — entire card tappable
═══════════════════════════════════════════════════════════════════ */
.fi-card,
.rcb-card,
.intel-post,
.lcab-threat {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,255,224,0.1);
}

/* Ensure anchor cards cover full area */
.fi-card[href] {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 12. SCROLL FATIGUE REDUCTION
   Limit height of collapsed sections, add expand affordance
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Truncate long post bodies with graceful fade */
  .post-body.truncated {
    max-height: 120px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  }

  /* Intel section: show fewer items initially */
  .intel-feed .intel-post:nth-child(n+4) {
    display: none;
  }

  .intel-feed.expanded .intel-post {
    display: block !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   § 13. MOBILE BOTTOM NAV SAFE AREA (iPhone notch/home bar)
═══════════════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #aim-high-intent-strip,
  #aim-upgrade-strip,
  #aim-low-intent-bar {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   § 14. FORM USABILITY — prevent iOS auto-zoom
═══════════════════════════════════════════════════════════════════ */
input,
input[type="email"],
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
  font-size: 16px !important; /* iOS zooms on < 16px — covers all input types */
}

/* ═══════════════════════════════════════════════════════════════════
   § 15. CONTENT HIERARCHY — enforce visual weight
═══════════════════════════════════════════════════════════════════ */

/* Section spacing */
.rcb-section,
.defensive-block,
.analyst-note {
  margin-top: var(--sp-lg) !important;
}

/* Clear breathing room between post sections */
.post-body-wrap > * + * {
  margin-top: var(--sp-sm);
}

/* CTA section always gets extra top space */
.ctx-cta-row {
  margin-top: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* Trust footer subtle */
.intel-trust-footer {
  background: rgba(0,0,0,0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 16. ACCESSIBILITY
═══════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--apex-cyan) !important;
  outline-offset: 2px !important;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--apex-cyan);
  color: #000;
  padding: 8px 16px;
  z-index: 9999;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.1s;
}

.skip-link:focus {
  top: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   § 17. TRUST DOMINATION — Phase 4
   Persistent social-proof bar, always visible
═══════════════════════════════════════════════════════════════════ */

/* Global trust bar — sits between stats-bar and intel-hub-bar */
#global-trust-bar {
  background: rgba(0,255,136,.04);
  border-bottom: 1px solid rgba(0,255,136,.1);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #64748b;
}
.gtb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.gtb-item strong { color: #e2e8f0; }
.gtb-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--apex-green);
  display: inline-block; box-shadow: 0 0 5px rgba(0,255,136,.4);
  animation: uxc-blink 1.5s ease-in-out infinite;
}

@media (max-width: 767px) {
  #global-trust-bar { gap: 12px 20px; padding: 7px 16px; font-size: 11px; }
  .gtb-item:nth-child(4) { display: none; } /* hide 4th item on very small screens */
}

/* ═══════════════════════════════════════════════════════════════════
   § 18. VISUAL CALMING — Phase 6
   Reduce neon overload, red flash density, alert stacking.
   Keep authority without overwhelm.
═══════════════════════════════════════════════════════════════════ */

/* Calm down livePulse animation — remove infinite blinking from hero CTA */
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.85; } }

/* Reduce blink frequency — everything blinks at most twice per 3s */
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.blink { animation: blink 2s ease-in-out infinite !important; }

/* Tone down red density — make critical badges solid not pulsing */
.badge-crit, .dbadge-zd, .dbadge-rsm {
  animation: none !important;
  box-shadow: none !important;
}

/* Reduce neon glow on borders globally */
.post-card,
.fi-card,
.ips-card,
.sidebar-widget {
  box-shadow: none !important;
}
.post-card:hover,
.fi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.4) !important;
}

/* Calm the ticker — reduce density */
.ticker-wrap {
  opacity: 0.75;
}

/* Reduce matrix canvas opacity */
#matrixCanvas, #matrix-canvas {
  opacity: 0.06 !important;
}

/* Remove multiple simultaneous flashing elements — keep only live indicator */
.hls-dot.blink,
.hero-trust-dot.blink {
  animation: uxc-blink 1.5s ease-in-out infinite !important;
}

/* Improved text contrast — lift muted text slightly */
.post-excerpt,
.hero-desc,
.fi-desc {
  color: #94a3b8 !important;
  line-height: 1.65 !important;
}

/* Calmer section labels */
.section-label-text {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: #475569 !important;
}

/* Alert stacking prevention — limit visible toast count */
#aim-toast-container .aim-toast:nth-child(n+3) {
  display: none !important;
}

/* Remove double-border effect on nested elements */
.cbd-ecosystem-ad,
.cbd-carousel-slide {
  border: none !important;
  box-shadow: none !important;
}

/* Calm authority: consistent quiet hover states */
a:hover,
button:hover {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   § 19. PRINT STYLES — hide revenue UI
═══════════════════════════════════════════════════════════════════ */
@media print {
  #aim-toast-container,
  #aim-high-intent-strip,
  #aim-upgrade-strip,
  #aim-bundle-prompt,
  .rcb-section,
  .ticker-wrap,
  .intel-hub-bar,
  header nav,
  .hero-actions {
    display: none !important;
  }

  .main {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   § 20. GOD-LEVEL UI/UX ENHANCEMENTS
   Complete visual polish pass — clarity, hierarchy, breathing room.
   Applied after all other rules so they take precedence cleanly.
═══════════════════════════════════════════════════════════════════ */

/* ── 20.1 TICKER — proper single-row layout, no text collision ── */
.ticker-wrap {
  position: relative !important;
  z-index: 180 !important;
  opacity: 1 !important;
  background: rgba(7,9,15,.98) !important;
  border-bottom: 1px solid rgba(255,43,85,.15) !important;
}

.ticker-content {
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* ── 20.2 HERO SECTION — maximum clarity ─────────────────────── */
.hero {
  padding-top: clamp(40px, 6vw, 80px) !important;
  padding-bottom: clamp(40px, 6vw, 80px) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Hero headline — always readable, never clipped */
.hero h1,
.hero-title {
  font-size: clamp(28px, 5.5vw, 62px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.6) !important;
}

/* Hero description */
.hero-desc,
.hero p {
  font-size: clamp(14px, 2vw, 17px) !important;
  line-height: 1.65 !important;
  color: #94a3b8 !important;
  max-width: 680px !important;
  margin-bottom: 28px !important;
}

/* Hero CTA area — clean button row */
.hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
}

/* Primary CTA — solid, confident */
#hero-primary-cta,
.hero-actions .btn-primary {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
  animation: none !important;
  box-shadow: 0 4px 20px rgba(0,180,216,.25) !important;
  transition: transform .15s, box-shadow .15s !important;
}
#hero-primary-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 28px rgba(0,180,216,.35) !important;
}

/* Trust strip — horizontal, no wrapping, clean spacing */
.hero-trust-strip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 16px !important;
}

.hero-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.hero-trust-sep { color: #1f2937 !important; }

/* ── 20.3 GLOBAL TRUST BAR — always visible ──────────────────── */
#global-trust-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, 3vw, 32px) !important;
  padding: 10px 20px !important;
  background: rgba(0,180,216,.04) !important;
  border-top: 1px solid rgba(0,180,216,.1) !important;
  border-bottom: 1px solid rgba(0,180,216,.1) !important;
  flex-wrap: wrap !important;
}

.gtr-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

.gtr-item strong { color: #e2e8f0 !important; }

/* ── 20.4 SECTION LABELS — clean, authoritative ──────────────── */
.section-label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 32px 0 16px !important;
  padding: 0 !important;
}

.section-label-text {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

.section-label-line {
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, #1f2937, transparent) !important;
}

/* ── 20.5 POST CARDS — clear visual hierarchy ────────────────── */
.post-card {
  transition: transform .15s ease, background .15s ease !important;
  border-radius: 10px !important;
}
.post-card:hover {
  transform: translateY(-2px) !important;
}

.post-card-title {
  font-size: clamp(16px, 2.2vw, 20px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.post-excerpt {
  font-size: 13px !important;
  line-height: 1.6 !important;
  -webkit-line-clamp: 3 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ── 20.6 SIDEBAR — tighter, cleaner ─────────────────────────── */
.sidebar-widget {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* ── 20.7 STATS / KPI NUMBERS — prominent but calm ───────────── */
.stats-number,
.kpi-number,
.stat-number {
  font-size: clamp(28px, 4vw, 48px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}

/* ── 20.8 NAVIGATION — always readable ───────────────────────── */
header nav a,
.nav-link {
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}

/* ── 20.9 SCROLLBAR — subtle dark ────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #07090f; }
::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ── 20.10 FOCUS STYLES — accessibility ─────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #00b4d8 !important;
  outline-offset: 2px !important;
}

/* ── 20.11 LIVE INTEL WIDGET INTEGRATION ─────────────────────── */
#live-intel-feed {
  width: 100% !important;
  margin: 24px 0 !important;
}

/* Section label above live feed */
#lfw-section-label {
  padding: 0 !important;
  margin: 28px 0 10px !important;
}

/* ── 20.12 MOBILE: suppress cx4-return-banner on ALL views ────── */
/* The apex-sticky bar covers the same messaging. One is enough. */
@media (max-width: 1023px) {
  #cx4-return-banner {
    display: none !important;
  }
}

/* ── 20.13 RESPONSIVE MAIN GRID — proper content width ─────── */
@media (min-width: 1024px) {
  .main {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── 20.14 ANIMATION PERFORMANCE — GPU-only animations ─────── */
.ticker-content,
.lfw-dot,
.hero-trust-dot,
.blink {
  will-change: opacity, transform !important;
}

/* ── 20.15 SELECTION COLOR ───────────────────────────────────── */
::selection {
  background: rgba(0,180,216,.3) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 21. SCROLL-SHRINK HEADER & BRAND LOGO
═══════════════════════════════════════════════════════════════════ */

/* Brand logo in header */
.hdr-logo-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #00ffe0;
  box-shadow: 0 0 10px rgba(0,255,224,.25);
  flex-shrink: 0;
  transition: width .25s, height .25s, opacity .25s;
}

header.hdr-compact .hdr-logo-img {
  width: 28px !important;
  height: 28px !important;
}

header.hdr-compact {
  box-shadow: 0 2px 24px rgba(0,0,0,.6) !important;
}

header.hdr-compact .header-inner {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

header.hdr-compact .logo-badge {
  display: none !important;
}

header.hdr-compact .logo {
  font-size: 16px !important;
}

header.hdr-compact nav a:not(.nav-cta) {
  font-size: 11px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 22. HERO LABEL ANIMATED TAGLINE
═══════════════════════════════════════════════════════════════════ */

.hero-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.hero-label-rotate {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: 1.2em;
  position: relative;
}

.hero-label-rotate span {
  display: block;
  position: absolute;
  left: 0; right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}

.hero-label-rotate span.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 23. MOBILE COMPLETE FIX (≤ 767px)
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Header compact on mobile always */
  .hdr-logo-img {
    width: 32px !important;
    height: 32px !important;
  }

  .logo-badge {
    display: none !important;
  }

  .logo {
    font-size: 18px !important;
    white-space: nowrap !important;
  }

  /* Hero label — shorter text on mobile */
  .hero-label {
    font-size: 9px !important;
    padding: 5px 12px !important;
    letter-spacing: 1px !important;
  }

  .hero-label-static {
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  .hero-label-rotate span {
    font-size: 9px !important;
  }

  /* Hero section padding */
  .hero {
    padding: 24px 16px 32px !important;
  }

  .hero h1 {
    font-size: clamp(26px, 8vw, 38px) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }

  .hero-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }

  /* Live intel widget on mobile */
  #live-intel-feed {
    margin: 16px 0 !important;
  }

  .lfw-wrap {
    border-radius: 8px !important;
  }

  .lfw-hdr {
    padding: 12px 14px 10px !important;
  }

  .lfw-card {
    padding: 14px !important;
  }

  .lfw-cve {
    font-size: 13px !important;
  }

  .lfw-desc {
    display: none !important; /* hide desc on mobile to save space */
  }

  /* Section label */
  #lfw-label {
    margin: 20px 0 8px !important;
  }

  /* Hero actions CTA */
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #hero-primary-cta {
    text-align: center !important;
    justify-content: center !important;
  }

  /* Trust strip on mobile */
  .hero-trust-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .hero-trust-sep {
    display: none !important;
  }

  /* Featured intel section */
  .featured-intel-section {
    padding: 0 16px !important;
  }

  /* Post cards — full width */
  .post-card {
    margin: 0 0 12px !important;
  }

  /* Today's critical threats digest */
  #apex-daily-digest {
    padding: 12px 14px !important;
  }

  .digest-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 8px 0 !important;
  }

  .digest-text {
    font-size: 11px !important;
    width: 100% !important;
  }

  /* Sidebar on mobile — full width below main */
  .sidebar {
    width: 100% !important;
    order: 2 !important;
  }

  /* Ecosystem grid */
  .ips-grid {
    grid-template-columns: 1fr !important;
  }

  /* Global trust bar */

  #global-trust-bar {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 12px !important;
    padding: 10px 16px !important;
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   § 2.5  GLOBAL BANNER ORCHESTRATION — OUTSIDE ALL MEDIA QUERIES
   Ensures single-top-banner policy on EVERY viewport (desktop, tablet, mobile)
   ═══════════════════════════════════════════════════════════════════════ */

/* Header is always king */
header, .site-header, nav.main-nav {
  z-index: 10000 !important;
  position: sticky !important;
  top: 0 !important;
}

/* apex-sticky banner — just below header */
#apex-sticky {
  z-index: 9950 !important;
  top: var(--header-height, 56px) !important;
  max-height: 52px !important;
  overflow: hidden !important;
}

/* cx4 return banner — below apex if coexisting (orchestrator suppresses it) */
#cx4-return-banner {
  z-index: 9940 !important;
  top: var(--cx4-banner-top, 56px) !important;
}

/* If apex-sticky is live, cx4 is always hidden (enforced by JS + CSS) */
body.has-apex-sticky #cx4-return-banner {
  display: none !important;
}

/* Bottom bar never competes with top banners */
#apex-bottom-bar,
#aim-high-intent-strip {
  z-index: 9900 !important;
  bottom: 0 !important;
  top: auto !important;
}

/* Body padding — never programmatically pushed down by banner JS */
body {
  padding-top: var(--body-banner-offset, 0px) !important;
}

/* Banner height CSS variables — set by banner-orchestrator.js */
:root {
  --header-height: 56px;
  --active-banner-height: 0px;
  --cx4-banner-top: 56px;
  --body-banner-offset: 0px;
}


/* ═══════════════════════════════════════════════════════════════════════
   § 20  GOD-LEVEL UI/UX ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════ */

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

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0a1628;
}
::-webkit-scrollbar-thumb {
  background: #00ffe0;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00ccb8;
}

/* Focus visible — keyboard accessibility */
*:focus-visible {
  outline: 2px solid #00ffe0 !important;
  outline-offset: 2px !important;
}

/* Post card hover elevation */
.post-card, .intel-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.post-card:hover, .intel-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(0, 255, 224, 0.15) !important;
}

/* Selection highlight */
::selection {
  background: rgba(0, 255, 224, 0.25) !important;
  color: #fff !important;
}

/* Smooth link transitions */
a {
  transition: color 0.15s ease, opacity 0.15s ease !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   § 21  SCROLL-SHRINK HEADER (compact state on scroll)
   ═══════════════════════════════════════════════════════════════════════ */

header .header-inner,
.site-header .header-inner {
  transition: padding 0.3s ease, height 0.3s ease !important;
}

header.hdr-compact,
header.hdr-compact .header-inner {
  padding: 6px 40px !important;
  height: auto !important;
  min-height: 44px !important;
}

header.hdr-compact .logo-badge {
  display: none !important;
}

header.hdr-compact .logo,
header.hdr-compact .site-title {
  font-size: 17px !important;
}

header.hdr-compact .hdr-logo-img {
  width: 28px !important;
  height: 28px !important;
}

header.hdr-compact .nav-cta,
header.hdr-compact .header-cta {
  padding: 5px 14px !important;
  font-size: 12px !important;
}

/* Logo image sizing (default) */
.hdr-logo-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: contain;
  transition: width 0.3s ease, height 0.3s ease;
  vertical-align: middle;
  margin-right: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════
   § 22  HERO LABEL ANIMATED TAGLINE
   ═══════════════════════════════════════════════════════════════════════ */

.hero-label-rotate {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  height: 1.4em;
  position: relative;
  min-width: 180px;
}

.hero-label-rotate span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  white-space: nowrap;
  font-weight: 700;
  color: #00ffe0;
  letter-spacing: 0.02em;
}

.hero-label-rotate span.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.hero-label-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #00ff66;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  animation: pulseDot 1.4s ease-in-out infinite;
  box-shadow: 0 0 8px #00ff66, 0 0 16px rgba(0,255,102,0.4);
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}


/* ═══════════════════════════════════════════════════════════════════════
   § 23  MOBILE COMPLETE FIX (≤ 767px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Header compact on mobile always */
  header .header-inner,
  .site-header .header-inner {
    padding: 10px 16px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .hdr-logo-img {
    width: 30px !important;
    height: 30px !important;
  }

  /* Hero section */
  .hero, .hero-section {
    padding: 20px 16px 24px !important;
    min-height: auto !important;
    text-align: center !important;
  }

  .hero h1, .hero-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .hero p, .hero-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .hero-cta-group {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .hero-cta-group a, .hero-cta-group button {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
  }

  /* Label rotation on mobile */
  .hero-label-rotate {
    min-width: 140px !important;
    max-width: 200px !important;
    font-size: 11px !important;
  }

  /* Post cards */
  .post-card, .intel-card {
    margin: 0 0 16px 0 !important;
    padding: 16px !important;
  }

  .posts-grid, .intel-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Live intel widget */
  #live-intel-widget, .live-intel-widget {
    margin: 0 -16px !important;
    border-radius: 0 !important;
    padding: 16px !important;
  }

  .intel-item {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .intel-score {
    align-self: flex-start !important;
  }

  /* Trust bar */
  .trust-bar, #global-trust-bar {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    font-size: 11px !important;
  }

  /* Digest */
  #apex-daily-digest {
    padding: 12px 14px !important;
  }

  .digest-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 8px 0 !important;
  }

  /* Nav on mobile */
  .main-nav, nav.site-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .nav-links {
    gap: 6px !important;
    font-size: 12px !important;
  }

  /* Banners on mobile */
  #apex-sticky {
    font-size: 12px !important;
    padding: 8px 12px !important;
    max-height: 48px !important;
  }

  #apex-bottom-bar {
    font-size: 12px !important;
    padding: 10px 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   § 24  TABLET FIX (768px – 1023px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {
  header .header-inner,
  .site-header .header-inner {
    padding: 12px 24px !important;
  }

  .hdr-logo-img {
    width: 34px !important;
    height: 34px !important;
  }

  .hero h1, .hero-title {
    font-size: 28px !important;
  }

  .posts-grid, .intel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .hero-cta-group {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* Banners on tablet */
  #apex-sticky {
    font-size: 13px !important;
    padding: 10px 20px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   § 25  HEADER SCROLL READABILITY
   ═══════════════════════════════════════════════════════════════════════ */

header, .site-header {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background-color: rgba(10, 22, 40, 0.97) !important;
  border-bottom: 1px solid rgba(0, 255, 224, 0.12) !important;
  transition: all 0.3s ease !important;
}

header.hdr-compact {
  background-color: rgba(10, 22, 40, 0.99) !important;
  border-bottom: 1px solid rgba(0, 255, 224, 0.2) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}