/* ==========================================================================
   PHASE 0: MOBILE DESIGN SYSTEM (Variables)
   ========================================================================== */
:root {
  /* 1. Global Spacing Scale */
  --mobile-padding: clamp(16px, 5vw, 24px);
  --section-padding-y: clamp(64px, 12vw, 120px);
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 40px;
  --gap-xl: 64px;

  /* 2. Container Maximum Widths */
  --content-width-max: 1400px;
  --content-width-narrow: 1000px;
  --content-width-reading: 800px;

  /* 3. Global Typography Scale (Fluid) */
  --text-h1: clamp(2.5rem, 6vw, 4.5rem);
  --text-h2: clamp(2rem, 5vw, 3.5rem);
  --text-h3: clamp(1.5rem, 3vw, 2.2rem);
  --text-body-lg: clamp(1.1rem, 2vw, 1.25rem);
  --text-body: 1rem;
  
  /* 4. Touch Targets & UI Sizing */
  --btn-height: 48px; /* Minimum 44px for accessibility */
  --btn-padding-x: 32px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 24px;
}


/* ==========================================================================
   PHASE 2: GLOBAL OVERFLOW PROTECTIONS
   ========================================================================== */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

* {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, p, a, code {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Extracted Desktop Classes */
.funnel-container { width: 100%; }
@media (min-width: 1024px) { .funnel-container { min-width: 950px; margin: 0 -75px; } }

.dark-card-left { width: 100%; }
@media (min-width: 1024px) { .dark-card-left { margin-left: -75px; min-width: 400px; } }

.dark-card-right { width: 100%; }
@media (min-width: 1024px) { .dark-card-right { margin-right: -75px; min-width: 400px; } }

.ai-bleed-right { width: 100%; }
@media (min-width: 1024px) { .ai-bleed-right { margin-right: -75px; min-width: 450px; } }

.ai-bleed-left { width: 100%; }
@media (min-width: 1024px) { .ai-bleed-left { margin-left: -75px; min-width: 350px; } }

/* ==========================================================================
   STANDARD BREAKPOINTS (Documentation Only)
   Do not use random px values. Use these standard breakpoints:
   - Small Phones:   max-width: 479px
   - Large Phones:   max-width: 767px
   - Tablets:        max-width: 1023px
   - Desktop:        min-width: 1024px
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: #e5e5e5;
  
  /* Static Dark & Bright Orange Spider Web with Center Fade-Out */
  background-image: 
    /* Layer 1: Fade mask matching the background color to erase the web behind the logo */
    /* Layer 2: Macro web strands (809px tile) - Bright Orange */
    url("data:image/svg+xml,%3Csvg width='800' height='800' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='rgba(255,102,0,0.15)' fill='none' stroke-width='3'%3E%3Cpath d='M200 200 L600 200 L400 500 Z M400 500 L200 700 L600 700 Z M200 200 L0 300 M600 200 L800 300 M200 700 L0 600 M600 700 L800 600 M200 200 L250 0 M200 700 L250 800 M600 200 L550 0 M600 700 L550 800'/%3E%3Ccircle cx='200' cy='200' r='5' fill='rgba(255,102,0,0.25)'/%3E%3Ccircle cx='600' cy='200' r='5' fill='rgba(255,102,0,0.25)'/%3E%3Ccircle cx='400' cy='500' r='8' fill='rgba(255,102,0,0.30)'/%3E%3Ccircle cx='200' cy='700' r='5' fill='rgba(255,102,0,0.25)'/%3E%3Ccircle cx='600' cy='700' r='5' fill='rgba(255,102,0,0.25)'/%3E%3C/g%3E%3C/svg%3E"),
    /* Layer 3: Micro web clusters (347px tile) - Subtle Black */
    url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='rgba(0,0,0,0.15)' fill='none' stroke-width='1.5'%3E%3Cpath d='M100 100 L200 200 L300 100 M100 300 L200 200 L300 300 M100 100 L100 300 M300 100 L300 300 M100 100 L0 50 M300 100 L400 50 M100 300 L0 350 M300 300 L400 350 M100 100 L50 0 M100 300 L50 400 M300 100 L350 0 M300 300 L350 400'/%3E%3Ccircle cx='100' cy='100' r='2.5' fill='rgba(0,0,0,0.25)'/%3E%3Ccircle cx='300' cy='100' r='2.5' fill='rgba(0,0,0,0.25)'/%3E%3Ccircle cx='200' cy='200' r='4' fill='rgba(0,0,0,0.30)'/%3E%3Ccircle cx='100' cy='300' r='2.5' fill='rgba(0,0,0,0.25)'/%3E%3Ccircle cx='300' cy='300' r='2.5' fill='rgba(0,0,0,0.25)'/%3E%3C/g%3E%3C/svg%3E");
  
  background-size: 800px 800px, 400px 400px;
  background-position: 0px 0px, 0px 0px;
  animation: webDrift 120s linear infinite;
  background-repeat: repeat, repeat;
  
  overflow-x: hidden;
  font-family: 'Space Grotesk', sans-serif;
  position: relative;
}

#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0; /* Background layer */
}

/* Scroll Architecture */
.scroll-container {
  position: relative;
  width: 100%;
  z-index: 10;
}

.hero-section {
  width: 100%;
  height: 100vh;
  position: relative;
  pointer-events: none; /* Let clicks pass to the canvas unless on buttons */
}

.logo-container {
  position: fixed;
  top: 50vh;
  top: 50dvh; /* visible viewport; main.js then sets the exact centre */
  left: 50vw;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  pointer-events: auto;
  z-index: 100;
  
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(500px, 92vw);
  height: 200px;
}

.hero-title {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 1.1;
  color: #000000;
  letter-spacing: -2px;
  user-select: none;
  text-shadow: none;
  opacity: 1; /* Default state */
  will-change: opacity;
  position: relative; /* Needed for absolute positioning of child normal-layer */
}

/* InkBleed Effect Classes */
.ink-normal-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}
/* Fade out the normal text near the cursor so the goop reveals underneath.
   Only while the effect is running: at rest the title must be plain, unmasked
   text (a zero-radius mask + SVG filter stack left it unpainted on iPad Safari). */
.ink-active .ink-normal-layer {
  mask-image: radial-gradient(circle calc(45px * var(--spot-on, 0)) at var(--mx, -9999px) var(--my, -9999px), rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  -webkit-mask-image: radial-gradient(circle calc(45px * var(--spot-on, 0)) at var(--mx, -9999px) var(--my, -9999px), rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

.ink-goop-layer {
  position: relative;
  display: inline-flex;
  z-index: 1;
  visibility: hidden; /* keeps the hover target's size; not painted at rest */
}
.ink-active .ink-goop-layer {
  visibility: visible;
  filter: url(#ink-goo);
  text-shadow: none; /* DO NOT goop the drop shadow */
  mix-blend-mode: darken; /* Neutralizes the faint black WebKit rendering artifact */
  /* The goop layer is only visible near the cursor to prevent the font from looking goopy everywhere */
  mask-image: radial-gradient(circle calc(60px * var(--spot-on, 0)) at var(--mx, -9999px) var(--my, -9999px), rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle calc(60px * var(--spot-on, 0)) at var(--mx, -9999px) var(--my, -9999px), rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  will-change: filter, mask-image, transform;
  transform: translateZ(0); /* Force GPU layer */
}
.ink-wrapper {
  position: relative;
  display: inline-block;
  white-space: pre;
  cursor: default;
  overflow: visible;
}

.ink-layer {
  display: inline-block;
  white-space: pre;
}

.ink-abs {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: mask-image;
}

.ink-sharp {
  mask-image: radial-gradient(circle calc(35px * var(--spot-on, 0)) at var(--mx, -9999px) var(--my, -9999px), transparent 0%, transparent 0%, rgba(0,0,0,1) 100%);
  -webkit-mask-image: radial-gradient(circle calc(35px * var(--spot-on, 0)) at var(--mx, -9999px) var(--my, -9999px), transparent 0%, transparent 0%, rgba(0,0,0,1) 100%);
}

.ink-spot {
  mask-image: radial-gradient(circle calc(35px * var(--spot-on, 0)) at var(--mx, -9999px) var(--my, -9999px), rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle calc(35px * var(--spot-on, 0)) at var(--mx, -9999px) var(--my, -9999px), rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, transparent 100%);
}

.ink-blur {
  filter: blur(10px);
}

.ink-left {
  mask-image: radial-gradient(circle calc(35px * var(--spot-on, 0)) at calc(var(--mx, -9999px) + 10px) var(--my, -9999px), rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle calc(35px * var(--spot-on, 0)) at calc(var(--mx, -9999px) + 10px) var(--my, -9999px), rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, transparent 100%);
}

.ink-right {
  mask-image: radial-gradient(circle calc(35px * var(--spot-on, 0)) at calc(var(--mx, -9999px) - 10px) var(--my, -9999px), rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle calc(35px * var(--spot-on, 0)) at calc(var(--mx, -9999px) - 10px) var(--my, -9999px), rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, transparent 100%);
}

.hero-logo-img {
  position: fixed;
  top: 38px;
  left: 40px;
  width: auto;
  height: 40px;
  opacity: 0;
  pointer-events: none;
  z-index: 1001;
  will-change: opacity, transform;
}

.header-nav {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 15px;
  z-index: 100;
  pointer-events: auto;
  
}

.glass-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #000000;
  padding: 12px 32px;
  border-radius: 30px;
  
  /* Phase 17a Exact Glass Styling */
  background: rgba(0, 0, 0, 0.04) !important; /* Subtle grey tint to stand out from the off-white page */
  backdrop-filter: blur(12px) !important; /* the build adds -webkit- for Safari automatically */
  transform: translateZ(0);
  
  /* 3D Glass Edge Effect */
  border: 1px solid rgba(0, 0, 0, 0.15) !important; /* Complete dark outline so all 4 sides are visible */
  
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; /* Sharp light reflection just inside the top edge */
  
  cursor: pointer;
  transition: all 0.3s ease;
}

.glass-btn:hover {
  background: rgba(255, 120, 0, 0.6);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 120, 0, 0.3);
}

/* MARKETING SECTION */
.marketing-section {
  width: 100%;
  min-height: 100vh;
  margin-top: -400px;
  padding: 520px 5% 120px 5%;
  background: linear-gradient(180deg, rgba(229, 229, 229, 0) 0px, rgba(229, 229, 229, 0) 400px, rgba(229, 229, 229, 0.4) 550px, rgba(229, 229, 229, 0.85) 750px);
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.marketing-content {
  pointer-events: auto;
  max-width: 1400px;
  width: 100%;
  margin-top: 0;
}

#router-view {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  transform: translateY(0);
}

.marketing-headline {
  font-size: clamp(2.4rem, 4.56vw, 4.08rem);
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: -1.5px;
}

.marketing-sub {
  font-size: 1.5rem;
  color: #666;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
}

/* Slate Grey Glassmorphism Cards */
.slate-card {
  background: rgba(17, 24, 39, 0.9); /* Dark Navy Blue with slight transparency */
  backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  padding: 40px;
  color: #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.slate-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.slate-card h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.slate-card p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

/* --- Architecture Diagram Styles --- */
.arch-diagram-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  margin: 60px auto;
  font-family: 'Space Grotesk', sans-serif;
  color: #1a1a1a;
  position: relative;
}

.zone-label {
  font-weight: 800;
  letter-spacing: 2px;
  color: #ff6600;
  margin-bottom: 15px;
  text-align: center;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.arch-node {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);

  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 20px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 2;
  position: relative;
}

.arch-node:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(255, 102, 0, 0.15);
  border-color: rgba(255, 102, 0, 0.4);
}

.nekron-node {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.1), rgba(255, 255, 255, 0.6));
  border: 2px solid rgba(255, 102, 0, 0.3);
}

.synapse-node {
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.05), rgba(255, 255, 255, 0.6));
  border: 2px solid rgba(0, 0, 0, 0.8);
}

.sentinel-node {
  padding: 15px 20px;
  font-weight: 700;
  font-size: 1.1rem;
}
.sentinel-node span {
  font-size: 0.8rem;
  font-weight: 400;
  color: #666;
}

.special-forces-node {
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.05), rgba(255, 255, 255, 0.6));
  border: 2px solid rgba(255, 0, 0, 0.4);
}

.node-title {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #000;
}

.node-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #444;
}

.arch-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 80px;
  width: 2px;
}
.arch-connector.short {
  height: 40px;
}

.connector-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 50%, transparent 50%);
  background-size: 100% 10px;
  animation: march 1s linear infinite;
}

.connector-line.fast {
  animation: march 0.5s linear infinite;
}

.connector-line.red {
  background: linear-gradient(to bottom, rgba(255,0,0,0.6) 50%, transparent 50%);
  background-size: 100% 10px;
}

@keyframes march {
  0% { background-position: 0 0; }
  100% { background-position: 0 10px; }
}

.connector-label {
  background: #e5e5e5;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #666;
  z-index: 1;
  border: 1px solid rgba(0,0,0,0.1);
}

.warning-text {
  color: #cc0000;
  border-color: rgba(255,0,0,0.2);
  animation: pulse-warn 2s infinite;
}

@keyframes pulse-warn {
  0% { box-shadow: 0 0 0 0 rgba(255,0,0,0.4); }
  70% { box-shadow: 0 0 0 10px rgba(255,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); }
}

.arch-boundary {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.boundary-line {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.1);
}

.boundary-label {
  background: #e5e5e5;
  padding: 5px 15px;
  font-weight: 800;
  font-size: 0.9rem;
  color: #000;
  z-index: 1;
  letter-spacing: 2px;
}

.arch-customer-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.arch-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.branch-horizontal {
  width: 60%;
  height: 2px;
  background: #000;
  opacity: 0.3;
  position: relative;
}
.branch-horizontal::before, .branch-horizontal::after {
  content: '';
  position: absolute;
  top: 0;
  width: 2px;
  height: 20px;
  background: #000;
}
.branch-horizontal::before { left: 0; }
.branch-horizontal::after { right: 0; }

.sentinels-row {
  display: flex;
  justify-content: space-between;
  width: 65%;
  margin-top: 20px;
}

.arch-kernel-zone {
  width: 65%;
  border-top: 2px dashed rgba(0,0,0,0.3);
  margin-top: -10px;
  padding-top: 20px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 0;
}

.kernel-label {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #666;
  background: #e5e5e5;
  padding: 0 10px;
  margin-top: -30px;
}


/* MEGA MENU CSS */


.nav-item {
  position: relative;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  padding: 10px 0;
}

.nav-label {
  font-size: 1rem;
  transition: color 0.3s;
  
}

.nav-item:hover .nav-label {
  color: #ff6600;
}

.dropdown-panel {
   /* Reset blending for dropdown children */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  pointer-events: none;
}

.nav-item:hover .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.dropdown-panel a {
  text-decoration: none;
  color: #444;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s;
}

.dropdown-panel a:hover {
  background: rgba(255, 102, 0, 0.1);
  color: #ff6600;
}

/* NARRATIVE SECTIONS */
.narrative-block {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.narrative-title {
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.narrative-text {
  font-size: 1.25rem;
  color: #555;
  max-width: 1050px;
  line-height: 1.8;
  margin-bottom: 40px;
}

.stat-box {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.05);
  display: inline-block;
  margin: 20px 0;
}

.stat-number {
  font-size: 5rem;
  font-weight: 800;
  color: #ff6600;
  line-height: 1;
  margin-bottom: 10px;
  font-family: 'Montserrat Alternates', sans-serif;
}

.stat-desc {
  font-size: 1.1rem;
  color: #1a1a1a;
  font-weight: 700;
  max-width: 300px;
  margin: 0 auto;
}

.primary-cta {
  background: #ff6600;
  color: white;
  border: none;
  padding: 16px 40px;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(255, 102, 0, 0.3);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
}

.primary-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(255, 102, 0, 0.4);
  background: #ff771a;
}

/* FLOWCHARTS */
.flowchart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin: 40px 0;
}

.flow-node {
  background: #fff;
  border: 2px solid rgba(0,0,0,0.1);
  padding: 15px 30px;
  border-radius: 12px;
  font-weight: 700;
  color: #1a1a1a;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  width: 300px;
}

.flow-node.highlight {
  border-color: #ff6600;
  background: rgba(255, 102, 0, 0.05);
  color: #ff6600;
}

.flow-arrow {
  height: 30px;
  width: 2px;
  background: rgba(0,0,0,0.2);
  position: relative;
}
.flow-arrow::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: -4px;
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: rgba(0,0,0,0.2) transparent transparent transparent;
}


.glass-btn:hover .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}


.dropdown-panel {
  top: 100%; 
  margin-top: 15px; 
}

/* Invisible bridge to prevent hover loss between pill and dropdown */
.dropdown-panel::before {
  content: '';
  position: absolute;
  top: -20px; 
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
}


/* NEW COMPONENT STYLES FOR SUB-PAGES */

/* :where() = default only; pages that style .comparison-grid themselves win in the production bundle too */
:where(.comparison-grid) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
  max-width: 1000px;
  margin: 40px auto;
}

.compare-card {
  background: rgba(255,255,255,0.7);
  border-radius: 20px;
  padding: 40px;
  border: 1px solid rgba(0,0,0,0.1);
  text-align: left;
}

.compare-card.bad {
  border-top: 4px solid #ff4444;
}

.compare-card.good {
  background: rgba(17, 24, 39, 0.9);
  color: white;
  border-top: 4px solid #ff6600;
  box-shadow: 0 20px 40px rgba(255,102,0,0.1);
}

.compare-card h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  font-family: 'Montserrat Alternates', sans-serif;
}

.compare-card ul {
  list-style: none;
  padding: 0;
}

.compare-card ul li {
  margin-bottom: 15px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.terminal {
  background: #111;
  border-radius: 10px;
  width: 100%;
  max-width: 700px;
  margin: 40px auto;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  text-align: left;
}

.term-header {
  background: #333;
  padding: 12px 32px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.term-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.term-dot.r { background: #ff5f56; }
.term-dot.y { background: #ffbd2e; }
.term-dot.g { background: #27c93f; }

.term-body {
  padding: 30px;
  color: #00ff00;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  line-height: 1.8;
}

.term-line {
  opacity: 0;
  animation: typeLine 0.1s forwards;
}

.term-line:nth-child(1) { animation-delay: 0.5s; }
.term-line:nth-child(2) { animation-delay: 1.0s; }
.term-line:nth-child(3) { animation-delay: 1.5s; }
.term-line:nth-child(4) { animation-delay: 2.0s; }
.term-line:nth-child(5) { animation-delay: 2.5s; }
.term-line:nth-child(6) { animation-delay: 3.0s; color: #fff;}

@keyframes typeLine {
  to { opacity: 1; }
}

.funnel-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 40px 0;
}

.funnel-layer {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 15px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.funnel-layer.l1 { width: 400px; background: rgba(255,102,0,0.05); }
.funnel-layer.l2 { width: 300px; background: rgba(255,102,0,0.1); }
.funnel-layer.l3 { width: 200px; background: rgba(255,102,0,0.2); }
.funnel-layer.l4 { width: 150px; background: rgba(255,102,0,0.8); color: white; border: none; }


/* IMPACT SECTION (CATCHY LAYOUT) */
.impact-section {
  width: 100%;
  max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.impact-heading {
  
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.5rem, 4vw, 4.2rem);
  font-weight: 700;
  color: #000;
  line-height: 1.05;
  letter-spacing: -2.5px;
  max-width: 1200px;
  margin-bottom: 22px;
  text-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.impact-subheading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: -0.5px;
  color: #555;
  line-height: 1.6;
  max-width: 1150px; text-wrap: balance;
  margin: 0 auto;
}

/* INTERACTIVE STATS GRID */
.stats-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}
.interactive-stat {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(0,0,0,0.1);
  padding: 30px 40px;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.02);
}
.interactive-stat:hover {
  transform: translateY(-8px) scale(1.02);
  background: #fff;
  border-color: rgba(255,102,0,0.4);
  box-shadow: 0 20px 40px rgba(255,102,0,0.15);
}
.interactive-stat::after {
  content: 'Explore →';
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #ff6600;
  transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  padding: 20px 0 10px 0;
}
.interactive-stat:hover::after {
  bottom: 0px;
}
.stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #ff6600;
  margin-bottom: 5px;
  letter-spacing: -1.5px;
}
.stat-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #1a1a1a;
}

/* STATS MODAL */
.stat-modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100vh;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(15px);

  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.stat-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.stat-modal-content {
  background: #0f1219; /* Deep slate */
  color: #fff;
  padding: 50px;
  border-radius: 24px;
  max-width: 600px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 4px solid #ff6600;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  transform: scale(0.95) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  text-align: left;
}
.stat-modal-overlay.active .stat-modal-content {
  transform: scale(1) translateY(0);
}
.close-modal {
  position: absolute;
  top: 25px; right: 25px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px; height: 40px;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.close-modal:hover {
  background: #ff6600;
  transform: rotate(90deg);
}
.modal-title { 
  font-family: 'Space Grotesk', sans-serif; 
  font-size: 2.2rem; 
  margin-bottom: 20px; 
  color: #fff; 
  letter-spacing: -1px;
}
.modal-desc { 
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem; 
  line-height: 1.7; 
  color: #b0b5c0; 
}

/* HERO ACTIONS (BUTTONS) */
.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 50px;
  margin-top: 15px;
}
.btn-primary {
  background: #ff6600;
  color: white;
  padding: 16px 36px;
  border-radius: 30px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(255,102,0,0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 2px solid #ff6600;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(255,102,0,0.4);
  background: #e65c00;
}
.btn-secondary {
  background: transparent;
  color: #ff6600;
  padding: 16px 36px;
  border-radius: 30px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  border: 2px solid rgba(255,102,0,0.5);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255,102,0,0.05);
}
.btn-secondary:hover {
  background: rgba(255,102,0,0.15);
  border-color: #ff6600;
  transform: translateY(-3px);
}

/* STATIC STAT CARDS */
.static-stat {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(0,0,0,0.1);
  padding: 30px 40px;
  border-radius: 24px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
  text-align: left;
  max-width: 320px;
}
.static-stat:hover {
  transform: translateY(-5px);
  background: #fff;
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}
.stat-desc-inline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  color: #666;
  line-height: 1.5;
  margin-top: 15px;
  font-weight: 600;
}

.dropdown-category {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 12px 2px 12px;
  margin-top: 5px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  margin-bottom: 5px;
  text-align: left;
}

/* MEGA DROPDOWN (HORIZONTAL) */
.dropdown-panel.mega-dropdown {
  flex-direction: row;
  gap: 30px;
  padding: 20px 25px;
  transform: translateX(-50%) translateY(10px);
}
.glass-btn:hover .dropdown-panel.mega-dropdown {
  transform: translateX(-50%) translateY(0);
}
.mega-column {
  display: flex;
  flex-direction: column;
  min-width: 160px;
}


/* =========================================
   OPSONANCE ARCADE (PACMAN PUZZLE THEME)
   ========================================= */

.ops-arcade {
  width: 100%;
  max-width: 900px;
  height: 420px;
  margin: 0 auto 50px auto;
  background: #050510;
  border-radius: 24px;
  border: 4px solid #1a1a3a;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.4), inset 0 0 80px rgba(0,229,255,0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Space Grotesk', monospace;
}

/* Retro CRT scanline effect */
.ops-arcade::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 3px 100%;
  pointer-events: none;
  z-index: 100;
}

.arcade-score {
  position: absolute;
  top: 20px;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
  color: #ffcc00;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.maze-container {
  position: relative;
  width: 700px;
  height: 250px;
  margin-top: 40px;
}

/* Neon Maze Lines */
.maze-base {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 40px;
  border: 3px solid #00e5ff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00e5ff;
  font-weight: 800;
  box-shadow: 0 0 15px rgba(0,229,255,0.4), inset 0 0 10px rgba(0,229,255,0.2);
  background: rgba(48, 56, 65, 0.05);
}

.maze-shaft {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 120px;
  border-left: 3px solid #00e5ff;
  border-right: 3px solid #00e5ff;
  box-shadow: -5px 0 10px rgba(0,229,255,0.2), 5px 0 10px rgba(0,229,255,0.2);
}

.maze-track {
  position: absolute;
  top: 160px;
  left: 0;
  width: 100%;
  height: 60px;
  border: 3px solid #00e5ff;
  border-top: none;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 5px 15px rgba(0,229,255,0.3), inset 0 -5px 10px rgba(0,229,255,0.2);
}
.maze-track::before, .maze-track::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 317px;
  height: 3px;
  background: #00e5ff;
  box-shadow: 0 0 10px #00e5ff;
}
.maze-track::before { left: 0; }
.maze-track::after { right: 0; }

.pellets {
  position: absolute;
  top: 28px;
  left: 30px;
  right: 30px;
  height: 6px;
  background-image: radial-gradient(circle, #ffaabb 3px, transparent 4px);
  background-size: 40px 10px;
  background-repeat: repeat-x;
  opacity: 0.5;
}

/* THE SENTINEL (Pacman) */
.sentinel-pacman {
  position: absolute;
  top: 170px;
  left: 20px;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-top: 20px solid #ffcc00;
  border-left: 20px solid #ffcc00;
  border-bottom: 20px solid #ffcc00;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 204, 0, 0.8);
  animation: patrol-chomp 0.3s infinite alternate, patrol-move 12s infinite;
  z-index: 10;
}

/* THREATS (Ghosts/Bugs) */
.threat-minor {
  position: absolute;
  top: 175px;
  left: 550px;
  width: 30px;
  height: 30px;
  background: #ff0055;
  border-radius: 50% 50% 0 0;
  box-shadow: 0 0 20px #ff0055;
  animation: minor-threat-life 12s infinite;
}
/* Ghost legs */
.threat-minor::after {
  content: '';
  position: absolute;
  bottom: -5px;
  width: 100%;
  height: 10px;
  background-image: linear-gradient(45deg, transparent 33.333%, #ff0055 33.333%, #ff0055 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ff0055 33.333%, #ff0055 66.667%, transparent 66.667%);
  background-size: 10px 20px;
}

.threat-major {
  position: absolute;
  top: 165px;
  left: 325px; /* Center intersection */
  width: 50px;
  height: 50px;
  background: #ff0055;
  border-radius: 10px;
  box-shadow: 0 0 40px #ff0055;
  animation: major-threat-life 12s infinite;
}
/* Evil eyes */
.threat-major::before, .threat-major::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 12px;
  height: 6px;
  background: #fff;
  border-radius: 10px;
  transform: rotate(20deg);
}
.threat-major::before { left: 8px; transform: rotate(20deg); }
.threat-major::after { right: 8px; transform: rotate(-20deg); }

/* SPECIAL FORCES (Freeze Block) */
.special-forces-pod {
  position: absolute;
  top: 45px;
  left: 325px;
  width: 50px;
  height: 50px;
  background: #00e5ff;
  border: 4px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 30px #00e5ff;
  animation: special-forces-drop 12s infinite;
  z-index: 15;
}
.special-forces-pod::after {
  content: '❄';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5rem;
}

/* =========================================
   ANIMATION KEYFRAMES (12s Loop)
   ========================================= */

/* Pacman Chomping */
@keyframes patrol-chomp {
  0% { border-right: 20px solid transparent; }
  100% { border-right: 20px solid #ffcc00; }
}

/* Pacman Patrol Path */
@keyframes patrol-move {
  0% { left: 20px; transform: scaleX(1); }
  /* Moves to eat minor threat */
  20% { left: 550px; transform: scaleX(1); }
  22% { left: 550px; transform: scaleX(-1); } /* Turn around */
  /* Moves to center to find major threat */
  35% { left: 260px; transform: scaleX(-1); } 
  40% { left: 260px; transform: scaleX(1); } /* Wait for special forces */
  70% { left: 260px; transform: scaleX(1); } 
  /* Resume patrol */
  85% { left: 630px; transform: scaleX(1); }
  87% { left: 630px; transform: scaleX(-1); }
  100% { left: 20px; transform: scaleX(-1); }
}

/* Minor Threat */
@keyframes minor-threat-life {
  0%, 15% { opacity: 0; transform: scale(0); }
  16% { opacity: 1; transform: scale(1); } /* Spawns */
  19.5% { opacity: 1; transform: scale(1); }
  20% { opacity: 0; transform: scale(1.5); box-shadow: 0 0 50px #ffcc00; } /* Eaten! */
  100% { opacity: 0; }
}

/* Major Threat */
@keyframes major-threat-life {
  0%, 30% { opacity: 0; transform: scale(0); }
  32% { opacity: 1; transform: scale(1); background: #ff0055; box-shadow: 0 0 40px #ff0055; } /* Spawns */
  60% { opacity: 1; transform: scale(1); background: #ff0055; box-shadow: 0 0 40px #ff0055; }
  /* Hit by Special Forces */
  62%, 75% { opacity: 1; transform: scale(1); background: #00e5ff; box-shadow: 0 0 40px #00e5ff; } /* Frozen */
  77% { opacity: 0; transform: scale(1.5); } /* Shatters */
  100% { opacity: 0; }
}

/* Special Forces Drop */
@keyframes special-forces-drop {
  0%, 45% { opacity: 0; top: 45px; }
  50% { opacity: 1; top: 45px; } /* Deploys from Synapse */
  60% { opacity: 1; top: 165px; } /* Drops onto Major Threat */
  75% { opacity: 1; top: 165px; }
  80% { opacity: 0; top: 180px; } /* Melts away */
  100% { opacity: 0; }
}

/* NETWORK WEB CONTAINER */
.network-web-container {
  width: 100%;
  max-width: 1000px;
  height: 400px;
  margin: 0 auto 50px auto;
  background: transparent;
  border-radius: 24px;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow: none;
}
#opsonanceWeb {
  width: 100%;
  height: 100%;
  display: block;
}

/* FINAL CTA BLOCK */
.final-cta-block {
  margin: 100px auto 150px auto;
  max-width: 1200px;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 0 40px;
}

.cta-text-content {
  flex: 1;
  min-width: 300px;
  text-align: left;
  border-left: 3px solid #ff6600;
  padding-left: 24px;
}

.cta-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #111;
  line-height: 1.1;
  margin-bottom: 0;
  letter-spacing: -1px;
  position: relative;
}

.cta-subtitle {
  color: #555;
  font-weight: 500;
  display: block;
  margin-top: 12px;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.pill-btn {
  padding: 16px 40px;
  border-radius: 8px; /* Professional rounded corners rather than full pills */
  font-family: 'Inter', sans-serif; /* Cleaner enterprise font if available, fallback to sans-serif */
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.primary-pill {
  background: #ff6600;
  color: white;
  border: 1px solid #ff6600;
}
.primary-pill:hover {
  background: #e65c00;
  border-color: #e65c00;
}

.secondary-pill {
  background: transparent;
  color: #444;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.secondary-pill:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.4);
}


/* =========================================
   STUNNING OPSONANCE FOOTER 
   ========================================= */
.opsonance-footer {
  position: relative;
  background-color: #303841;
  color: #fff;
  padding: 40px 40px 20px 40px;
  overflow: hidden;
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 50vh 0 50vh #303841; /* Bulletproof overscroll bleed */
}


/* Ambient Floating Background Graphic */
.footer-glow-bg {
  position: absolute;
  bottom: -200px;
  right: -100px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.02) 0%, rgba(255, 102, 0, 0.01) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: footerFloatGlow 15s infinite alternate ease-in-out;
  z-index: 0;
  pointer-events: none;
}
@keyframes footerFloatGlow {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-50px, -100px) scale(1.1); }
}

/* Main Layout Grid */
.footer-content {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 2fr;
  gap: 30px;
  position: relative;
  z-index: 1;
  align-items: start;
}
@media (max-width: 1100px) {
  .footer-content { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-links-group { display: flex; flex-wrap: wrap; gap: 30px; grid-column: 1 / 3; }
}
@media (max-width: 600px) {
  .footer-content { grid-template-columns: 1fr; }
  .footer-links-group { grid-column: 1; flex-direction: column; }
}

/* Branding Column */
.footer-logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.footer-logo {
  height: 36px;
  filter: drop-shadow(0 0 8px rgba(255,102,0,0.5));
}
.footer-company-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}
.footer-tagline {
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Sitemap Links Column */
.footer-links-group {
  display: contents; /* Forces children into the main grid */
}
.footer-col-title {
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  margin-bottom: 20px;
  font-weight: 600;
  letter-spacing: 0px;
}
.footer-link-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-link-col a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
  position: relative;
  width: fit-content;
}
.footer-link-col a:hover { color: #ff6600; }
.footer-link-col a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; width: 0; height: 1px;
  background: #ff6600;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-link-col a:hover::after { width: 100%; }

/* Newsletter / Contact Column */
.footer-contact-desc {
  color: #cbd5e1;
  font-size: 0.95rem;
  margin-bottom: 20px;
  line-height: 1.5;
}
.footer-input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 4px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.footer-input-wrapper:focus-within {
  border-color: #ff6600;
  box-shadow: 0 0 20px rgba(255,102,0,0.2);
  background: rgba(0, 0, 0, 0.3);
}
.footer-email-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 16px;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}
.footer-email-input::placeholder { color: #94a3b8; }
.footer-submit-btn {
  background: #ff6600;
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.footer-submit-btn:hover {
  background: #e65c00;
  transform: translateX(2px);
}

/* Footer Bottom (Legal) */
.footer-bottom {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #94a3b8;
  font-size: 0.85rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 600px) {
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: #94a3b8; text-decoration: none; transition: color 0.2s; }
.footer-legal a:hover { color: #ff6600; }

/* =========================================
   PLATFORM FEATURE SECTIONS
   ========================================= */
.platform-features-container {
    width: 100%;
    background: transparent;
    position: relative;
    z-index: 2;
    padding-bottom: 80px;
}
.platform-feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 100px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 80px 20px;
    position: relative;
}
.platform-feature-row.reverse {
    flex-direction: row-reverse;
}
.platform-feature-text {
    flex: 1.2;
    position: relative;
}

/* Add aesthetic glowing dividers between text and graphics */
@media (min-width: 901px) {
    .platform-feature-row:not(.reverse) .platform-feature-text::after {
        content: '';
        position: absolute;
        right: -50px;
        top: -10%;
        bottom: -10%;
        width: 2px;
        background: linear-gradient(to bottom, transparent, rgba(255, 102, 0, 1), transparent);
        box-shadow: 0 0 15px rgba(255, 102, 0, 0.6);
    }
    .platform-feature-row.reverse .platform-feature-text::after {
        content: '';
        position: absolute;
        left: -50px;
        top: -10%;
        bottom: -10%;
        width: 2px;
        background: linear-gradient(to bottom, transparent, rgba(255, 102, 0, 1), transparent);
        box-shadow: 0 0 15px rgba(255, 102, 0, 0.6);
    }
}
.platform-feature-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #111;
    margin-bottom: 24px;
    letter-spacing: -1px;
    line-height: 1.1;
}
.platform-feature-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    color: #555;
    line-height: 1.8;
    margin: 0;
    text-wrap: pretty;
}
.platform-feature-graphic {
    flex: 0.8;
    max-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 300px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);

    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.11);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, border-color 0.6s ease;
}
.platform-feature-graphic:hover {
    transform: scale(1.02) translateY(-4px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.06);
    border-color: rgba(255, 102, 0, 0.2);
}

/* Graphic 1: Threat Detection (Radar) */
.radar-container {
    position: relative; width: 220px; height: 220px; border-radius: 50%;
    border: 2px solid rgba(48, 56, 65, 0.2);
    box-shadow: 0 0 60px rgba(48, 56, 65, 0.05) inset;
}
.radar-sweep {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(48, 56, 65, 0.3) 100%);
    animation: radar-sweep-anim 3s linear infinite;
}
.radar-grid {
    position: absolute; inset: 0; border-radius: 50%;
    background-image: radial-gradient(circle, rgba(48, 56, 65, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
}
.radar-blip {
    position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(48, 56, 65, 0.6);
}
.radar-blip.b1 { left: 30%; top: 40%; animation: blipPulse 3s infinite 0.5s; }
.radar-blip.b2 { left: 70%; top: 60%; animation: blipPulse 3s infinite 1.2s; }
.radar-blip.threat {
    background: #ff3333; box-shadow: 0 0 15px #ff3333;
    width: 10px; height: 10px; left: 55%; top: 25%;
    animation: blipThreat 3s infinite 2s;
}
@keyframes radar-sweep-anim { to { transform: rotate(360deg); } }
@keyframes blipPulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes blipThreat { 0% { opacity: 0; transform: scale(1); } 10% { opacity: 1; transform: scale(1.5); } 50% { opacity: 0; } }

/* Graphic 2: Automated Response (Shield) */
.ar-scene { display: flex; align-items: center; width: 50%; height: 100%; position: relative; }
.ar-workload {
    width: 80px; height: 80px; background: rgba(0,229,255,0.05);
    border: 2px solid rgba(48, 56, 65, 0.5); border-radius: 16px;
    position: absolute; right: 20px; display: flex; justify-content: center; align-items: center;
}
.ar-workload svg { color: #303841; }
.ar-shield {
    position: absolute; right: 130px; height: 140px; width: 4px; border-radius: 4px;
    background: #ff6600; box-shadow: 0 0 20px rgba(255, 102, 0, 0.8);
    animation: shieldPulse 2s infinite;
}
.ar-threat {
    position: absolute; left: 0; width: 24px; height: 24px;
    background: #ff3333; border-radius: 6px; box-shadow: 0 0 10px rgba(255,51,51,0.5);
    animation: attackDrop 2s infinite;
}
@keyframes shieldPulse { 0%, 100% { opacity: 0.7; height: 120px; } 50% { opacity: 1; height: 150px; } }
@keyframes attackDrop {
    0% { left: 0; opacity: 1; transform: scale(1) translateY(0); }
    40% { left: calc(100% - 170px); opacity: 1; transform: scale(1) translateY(0); }
    45% { left: calc(100% - 150px); opacity: 1; transform: scale(1) translateY(0); background: #ff6600; }
    50% { left: calc(100% - 145px); opacity: 0; transform: scale(1.5) translateY(30px) rotate(45deg); }
    100% { opacity: 0; left: calc(100% - 145px); }
}

/* Graphic 3: Local Control (Edge Processing) */
.lc-scene { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; }
.lc-edge {
    width: 120px; height: 120px; border-radius: 20px; background: rgba(255, 102, 0, 0.1);
    border: 2px solid #ff6600; position: relative; box-shadow: 0 0 30px rgba(255,102,0,0.2);
}
.lc-edge::after {
    content:''; position:absolute; inset: 10px; border: 2px dashed rgba(255,102,0,0.5);
    animation: spinDash 4s linear infinite; border-radius: 50%;
}
.lc-particle {
    position: absolute; width: 8px; height: 8px; background: #ff6600; border-radius: 50%; box-shadow: 0 0 10px #ff6600;
    left: 45%; top: 45%; animation: localProcess 0.3s infinite alternate ease-in-out;
}
.lc-cloud {
    width: 100px; height: 70px; border-radius: 999px; border: 2px dashed rgba(48, 56, 65, 0.3);
    display: flex; justify-content: center; align-items: center; color: rgba(48, 56, 65, 0.6); font-size: 0.9rem;
}
.lc-connection {
    flex: 1; height: 2px; background: repeating-linear-gradient(90deg, rgba(48, 56, 65, 0.1) 0, rgba(48, 56, 65, 0.1) 10px, transparent 10px, transparent 20px);
    margin: 0 20px; position: relative;
}
.lc-cross {
    position: absolute; left: 50%; top: -14px; color: #ff3333; font-weight: bold; font-size: 1.5rem; text-shadow: 0 0 10px #ff3333;
}
@keyframes spinDash { to { transform: rotate(360deg); } }
@keyframes localProcess { 0% { transform: translate(-25px, -25px); } 100% { transform: translate(25px, 25px); } }

/* Graphic 4: Tiered Architecture */
.ta-scene { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 50px; position: relative; }
.ta-global {
    width: 80px; height: 80px; border-radius: 20px; background: rgba(48, 56, 65, 0.05);
    border: 2px solid #303841; box-shadow: 0 0 30px rgba(48, 56, 65, 0.15);
    display: flex; align-items: center; justify-content: center; z-index: 2;
}
.ta-global svg { color: #303841; }
.ta-edges { display: flex; gap: 40px; z-index: 2; }
.ta-edge {
    width: 50px; height: 50px; border-radius: 12px; border: 2px solid #ff6600;
    background: transparent; display: flex; align-items: center; justify-content: center;
    animation: edgePulse 2s infinite alternate;
}
.ta-edge svg { color: #ff6600; width: 24px; height: 24px; }
.ta-edge:nth-child(2) { animation-delay: 0.3s; }
.ta-edge:nth-child(3) { animation-delay: 0.6s; }
.ta-lines { display: flex; position: absolute; top: 100px; gap: 85px; z-index: 1; }
.ta-line {
    width: 2px; height: 60px; background: linear-gradient(to bottom, #303841, transparent);
    animation: streamDown 2s infinite; opacity: 0;
}
.ta-line:nth-child(2) { animation-delay: 0.5s; }
.ta-line:nth-child(3) { animation-delay: 1s; }
@keyframes edgePulse { 0% { box-shadow: 0 0 5px rgba(255,102,0,0.2); } 100% { box-shadow: 0 0 25px rgba(255,102,0,0.6); } }
@keyframes streamDown { 0% { transform: translateY(-20px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }

@media (max-width: 900px) {
    .step-left::before, .step-right::before { display: none; }
    .esc-content { width: 100% !important; height: auto !important; }
    .platform-feature-row, .platform-feature-row.reverse {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }
    .platform-feature-graphic { width: 100%; height: 300px; }
    .platform-feature-text { text-align: center; } 
    
}



/* =========================================
   EXECUTION LAYER SECTION
   ========================================= */
.exec-layer-section {
    display: flex;
    align-items: stretch; /* Forces equal height */
    justify-content: space-between;
    gap: 80px;
    max-width: 1300px;
    margin: 75px auto;
    padding: 0 5%;
    position: relative;
}
.exec-text-block {
    flex: 1.1;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center text vertically if graphic is taller, or vice versa */
}
.exec-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 24px;
    letter-spacing: -1px;
    line-height: 1.1;
}
.exec-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    color: #555;
    line-height: 1.6;
    max-width: 1000px;
    margin-bottom: 20px;
}
.exec-desc strong {
    color: #111;
}

.sleek-arch {
    flex: 0.9;
    min-width: 450px;
    background: #161922;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.sleek-layer {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 30px 20px;
}

.sleek-ring3 {
    justify-content: flex-start;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
}

.sleek-ring0 {
    justify-content: flex-end;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 102, 0, 0.05) 100%);
}

.sleek-label {
    position: absolute;
    top: 15px;
    left: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #e2e8f0;
    text-transform: uppercase;
}

.opso-label {
    top: auto;
    bottom: 15px;
}

.sleek-nodes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    z-index: 2;
    margin-top: 25px;
    max-width: 380px;
}

.sleek-node {
    padding: 6px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    animation: subtle-float 4s ease-in-out infinite alternate;
    
}
.sleek-node:nth-child(1) { animation-delay: 0s; }
.sleek-node:nth-child(2) { animation-delay: 0.8s; }
.sleek-node:nth-child(3) { animation-delay: 1.6s; }
.sleek-node:nth-child(4) { animation-delay: 2.4s; }
.sleek-node:nth-child(5) { animation-delay: 3.2s; }

@keyframes subtle-float {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.4); background: rgba(255,255,255,0.1); }
}

.sleek-boundary {
    height: 1px;
    width: 100%;
    background: rgba(255,255,255,0.3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
}

.sleek-boundary-text {
    background: #161922;
    padding: 4px 16px;
    color: #cbd5e1;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
}

.sleek-connections {
    position: absolute;
    top: 95px;
    bottom: 0;
    width: 85%;
    display: flex;
    justify-content: space-evenly;
    z-index: 1;
}

.bottom-connections {
    top: 0;
    bottom: 80px;
}

.sleek-line {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
    position: relative;
}
.bottom-connections .sleek-line {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255, 102, 0, 0.3) 50%, rgba(255,255,255,0) 100%);
}

.sleek-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1.5px;
    width: 4px;
    height: 25px;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    will-change: transform, opacity;
    animation: flow-down 3s infinite linear;
}

.sleek-line:nth-child(1)::before { animation-delay: 0s; }
.sleek-line:nth-child(2)::before { animation-delay: 1.2s; }
.sleek-line:nth-child(3)::before { animation-delay: 0.4s; }
.sleek-line:nth-child(4)::before { animation-delay: 2.1s; }
.sleek-line:nth-child(5)::before { animation-delay: 0.9s; }

.bottom-connections .sleek-line::before {
    background: #ff6600;
    box-shadow: 0 0 8px #ff6600;
}

@keyframes flow-down {
    0% { transform: translateY(-30px); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(180px); opacity: 0; }
}

.sleek-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 2;
    margin-bottom: 5px;
}

.sleek-shield {
    width: 32px;
    height: 32px;
    stroke: #ff6600;
    will-change: filter, transform;
    animation: sleek-pulse 3s infinite alternate ease-in-out;
}

.sleek-core-text {
    color: #ff6600;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    font-family: 'Inter', sans-serif;
    text-shadow: 0 0 10px rgba(255,102,0, 0.3);
}

@keyframes sleek-pulse {
    0% { filter: drop-shadow(0 0 5px rgba(255,102,0, 0.4)); transform: scale(1); }
    100% { filter: drop-shadow(0 0 20px rgba(255,102,0, 0.9)); transform: scale(1.05); }
}

@media (max-width: 900px) {
    .exec-layer-section { flex-direction: column; padding: 40px 20px; gap: 40px; }
    .sleek-arch { width: 100%; min-width: 0; min-height: 400px; }
    .sleek-nodes { margin-top: 35px; }
}



/* Core */
.b-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; height: 100px;
    background: linear-gradient(135deg, #ff6600, #cc5200);
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 0 40px rgba(255,102,0,0.5), inset 0 0 15px rgba(255,255,255,0.4);
    border: 4px solid #fff;
}
.b-core::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 1px solid rgba(255,102,0,0.3);
    animation: core-ripple 3s infinite;
}
@keyframes core-ripple {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Nodes */
.b-node-container {
    position: absolute;
    width: 80px; height: 80px;
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: pointer;
}
.b-node-container.n-1 { top: 10%; left: 50%; }
.b-node-container.n-2 { top: 50%; left: 90%; }
.b-node-container.n-3 { top: 90%; left: 50%; }
.b-node-container.n-4 { top: 50%; left: 10%; }

.b-node {
    width: 100%; height: 100%;
    background: #303841;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    position: relative;
}
.b-node-container:hover .b-node {
    transform: scale(1.1);
    border-color: rgba(255,255,255,0.4);
}
.b-node-container.active .b-node {
    transform: scale(1.2);
    border-color: var(--active-color, #ff6600);
    box-shadow: 0 0 30px var(--active-color, #ff6600), inset 0 0 15px rgba(255,255,255,0.1);
    background: #1f252b;
}

/* Node Labels */
.b-label {
    position: absolute;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: #555;
    white-space: nowrap;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.n-1 .b-label { bottom: 110%; left: 50%; transform: translateX(-50%); }
.n-2 .b-label { left: 120%; top: 50%; transform: translateY(-50%); }
.n-3 .b-label { top: 110%; left: 50%; transform: translateX(-50%); }
.n-4 .b-label { right: 120%; top: 50%; transform: translateY(-50%); }

.b-node-container.active .b-label {
    color: #111;
}

/* Readout Panel */
.signal-readout {
    flex: 1;
    max-width: 500px;
    background: rgba(30, 35, 40, 0.95);
    backdrop-filter: blur(20px);

    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 6px solid var(--active-color, #ff6600);
    padding: 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.readout-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.readout-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}
.readout-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}
.readout-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    color: #c4c4c4;
    line-height: 1.7;
    margin: 0;
}

/* Fade animation for text updates */
.fade-text {
    animation: text-appear 0.5s ease forwards;
}
@keyframes text-appear {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 950px) {
    .signals-layout { flex-direction: column; gap: 40px; }
    .bubble-radar { transform: scale(0.8); }
    .signal-readout { max-width: 100%; }
}


/* =========================================
   ACCORDION WORKFLOW DIAGRAM
   ========================================= */
.accordion-container {
    display: flex;
    width: 100%;
    height: 480px;
    gap: 20px;
    margin: 0 auto;
}
.acc-card {
    flex: 1;
    position: relative;
    background: rgba(30, 35, 40, 0.85);
    backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.25, 1, 0.2, 1);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.acc-card:hover {
    background: rgba(48, 56, 65, 0.9);
}
.acc-card.active {
    flex: 6;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    cursor: default;
}
.acc-bg {
    position: absolute; inset: 0;
    background: radial-gradient(circle at bottom right, var(--card-color), transparent 70%);
    opacity: 0; 
    transition: opacity 0.8s ease;
}
.acc-card.active .acc-bg { 
    opacity: 0.15; 
}

.acc-content {
    padding: 50px;
    width: 100%;
    min-width: 500px; /* Prevents text from squishing during transition */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0s;
    pointer-events: none;
    position: relative;
    z-index: 2;
}
.acc-card.active .acc-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s; /* Waits for the card to expand before showing text */
    pointer-events: auto;
}
.acc-icon {
    margin-bottom: 25px;
    color: var(--icon-color);
    filter: drop-shadow(0 0 10px var(--icon-color));
}
.acc-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 15px 0;
    letter-spacing: -1px;
}
.acc-content p {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    color: #d0d0d0;
    line-height: 1.7;
    margin: 0;
    max-width: 450px;
}

.acc-title-vertical {
    position: absolute;
    bottom: 30px; left: 0;
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #777;
    white-space: nowrap;
    transition: all 0.4s ease;
    letter-spacing: 1px;
    pointer-events: none;
}
.acc-card.active .acc-title-vertical {
    opacity: 0; 
    transform: rotate(180deg) scale(0.8);
    pointer-events: none;
}

@media (max-width: 900px) {
    .accordion-container {
        flex-direction: column;
        height: 800px;
    }
    .acc-content { min-width: 100%; padding: 30px; }
    .acc-title-vertical {
        bottom: 50%; left: 30px;
        transform: translateY(50%);
    }
    .acc-card.active .acc-title-vertical {
        transform: translateY(50%) scale(0.8);
    }
}


/* =========================================
   ACCORDION GRAPHIC ANIMATIONS 
   ========================================= */
.acc-anim-graphic {
    position: absolute;
    top: 40px; right: 40px;
    width: 120px; height: 120px;
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0s;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.acc-card.active .acc-anim-graphic {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.3s;
}

/* 1. Process Anim */

.proc-node { position: absolute; width: 16px; height: 16px; background: #00e5ff; border-radius: 50%; box-shadow: 0 0 15px #00e5ff; animation: proc-pulse 2s infinite alternate;}
.proc-node.root { top: 10px; left: 52px; }
.proc-node.c1 { top: 80px; left: 10px; animation-delay: 0.5s; }
.proc-node.c2 { top: 80px; left: 94px; animation-delay: 1s; }
.proc-line { position: absolute; background: rgba(0,229,255,0.4); height: 2px; transform-origin: left center; }
.proc-line.l1 { width: 80px; top: 18px; left: 60px; transform: rotate(120deg); animation: draw-line 2s infinite; }
.proc-line.l2 { width: 80px; top: 18px; left: 60px; transform: rotate(60deg); animation: draw-line 2s infinite 0.5s; }
@keyframes proc-pulse { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 1; } }
@keyframes draw-line { 0% { width: 0; } 50%, 100% { width: 80px; } }

/* 2. System Anim */
.system-anim { display: flex; gap: 8px; align-items: center; }
.sys-bar { width: 12px; background: #b464ff; border-radius: 6px; box-shadow: 0 0 15px #b464ff; animation: sys-osc 1s infinite alternate ease-in-out; }
.sys-bar.b1 { height: 30px; animation-delay: 0.1s; }
.sys-bar.b2 { height: 60px; animation-delay: 0.3s; }
.sys-bar.b3 { height: 100px; animation-delay: 0.5s; }
.sys-bar.b4 { height: 70px; animation-delay: 0.7s; }
.sys-bar.b5 { height: 40px; animation-delay: 0.9s; }
@keyframes sys-osc { 0% { transform: scaleY(0.5); } 100% { transform: scaleY(1.2); } }

/* 3. Network Anim */

.net-core { width: 24px; height: 24px; background: #ff6600; border-radius: 50%; box-shadow: 0 0 20px #ff6600; z-index: 2; position: relative; }
.net-ping { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border: 2px solid #ff6600; border-radius: 50%; opacity: 1; animation: ping-out 2s infinite; }
.net-ping.p2 { animation-delay: 1s; }
@keyframes ping-out { 0% { width: 24px; height: 24px; opacity: 1; } 100% { width: 120px; height: 120px; opacity: 0; border-width: 1px; } }

/* 4. Workload Anim */

.work-cube { width: 80px; height: 80px; border: 2px dashed rgba(0,255,102,0.4); border-radius: 12px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.work-scan { position: absolute; top: 0; left: 0; width: 100%; height: 30px; background: linear-gradient(180deg, transparent, rgba(0,255,102,0.4), transparent); animation: scan-box 2s infinite linear; border-bottom: 1px solid #00ff66; box-shadow: 0 5px 15px rgba(0,255,102,0.5); }
@keyframes scan-box { 0% { top: -30px; } 100% { top: 100%; } }


/* =========================================
   NEKRON AI SECTION (DARK SLATE THEME)
   ========================================= */
.nekron-section { 
    display: flex; 
    align-items: stretch;
    justify-content: center;
    gap: 80px; 
    max-width: 1440px;
    margin: 75px auto; 
    padding: 0 60px; 
}
.nekron-content { 
    flex: 1.1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.nk-main-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1px;
}
.nk-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #555;
    line-height: 1.6;
    max-width: 1000px;
    margin-bottom: 30px;
}
.nk-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 45px;
}
.nk-feature {
    margin-bottom: 35px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.nk-feature:last-child {
    margin-bottom: 0;
}
.nk-icon-box {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    background: #242930;
    color: #ff6600;
    border: 1px solid #3a4149;
}
.nk-icon-box.orange-theme {
    color: #ff6600;
}
.nk-feature h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 8px 0;
}
.nk-feature p {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Nekron Visualizer - Premium Dark Slate Theme */
.nekron-visual { 
    flex: 0.9; 
    background: rgba(15, 20, 25, 0.45); /* Reverted to solid but transparent slate */
    backdrop-filter: blur(24px);

    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 24px; 
    padding: 50px; 
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15); 
    position: relative;
}

/* Inject an ambient light behind the visualizer to make the glass transparency instantly obvious */
.nekron-visual::before {
    content: '';
    position: absolute;
    top: 40px; /* Centered perfectly behind the Nekron Tier */
    left: 50%;
    transform: translateX(-50%);
    width: 140px; height: 140px;
    background: rgba(255,102,0, 0.5); /* Amber glow */
    filter: blur(45px); /* Reduced spread */
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
.ng-tier { 
    background: rgba(0, 0, 0, 0.25); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 16px; 
    padding: 25px; 
    text-align: center; 
    position: relative; 
    z-index: 2; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.tier-nekron {
    border-top: 4px solid #ff6600; /* Amber */
}
.tier-synapse {
    border-top: 4px solid #88929e; /* Silver */
}
.tier-kernel {
    border-top: 4px solid #ff6600; /* Orange */
}

/* Orb - Solid and Professional */
.nk-orb { 
    width: 56px; height: 56px; 
    background: #ff6600; 
    border-radius: 50%; 
    margin: 0 auto 15px auto; 
    display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 4px 15px rgba(255,102,0, 0.2); 
    animation: orb-float 4s infinite ease-in-out; 
}
.nk-orb svg { stroke: #111; }
@keyframes orb-float { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-5px); } 
}

.nk-label { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: 1px; }
.tier-nekron .nk-label { color: #ffca4d; }
.tier-synapse .nk-label { color: #c4d1de; }
.tier-kernel .nk-label { color: #ff8c40; }

.nk-label-sub { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: #ffffff; font-weight: 500; margin-top: 6px; }

/* Elastic Bridges */
.ng-bridge { 
    flex-grow: 1; 
    min-height: 40px; 
    display: flex; justify-content: center; gap: 80px; position: relative; 
}
.ng-bridge.short { gap: 40px; }
.stream { width: 1px; height: 100%; position: relative; overflow: hidden; background: #3a4149; }
.stream::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; }

/* Subtle professional data flow animations */
.down-stream::after { background: linear-gradient(180deg, transparent, #ff6600); animation: drop 2s infinite linear; }
.up-stream::after { background: linear-gradient(0deg, transparent, #ff6600); animation: rise 2.5s infinite linear; }
.d2::after { animation-delay: 0.4s; }
.d3::after { animation-delay: 0.8s; }

@keyframes drop { 0% { top: -50%; } 100% { top: 100%; } }
@keyframes rise { 0% { top: 100%; } 100% { top: -50%; } }

/* Sentinel Nodes */
.sentinel-nodes { display: flex; justify-content: center; gap: 15px; }
.s-node { 
    background: #2a3038; 
    border: 1px solid rgba(255, 102, 0, 0.4); 
    padding: 8px 18px; 
    border-radius: 8px; 
    color: #ff8c40; 
    font-family: 'Space Grotesk', sans-serif; 
    font-size: 0.85rem; 
    font-weight: 700; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (max-width: 1000px) {
    .nekron-section { flex-direction: column; gap: 40px; padding: 0 20px; }
    .nekron-visual { min-height: 500px; }
}

/* =========================================
   ESCALATION PIPELINE SECTION
   ========================================= */
.escalation-section {
    padding: 0;
    margin: 75px 0;
    background: transparent;
    position: relative;
    overflow: hidden;
    /* Removed border and background for seamless flow */
}
.esc-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.esc-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -1px;
    margin-bottom: 24px;
}
.esc-header p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    color: #555;
    line-height: 1.6;
}

.esc-pipeline {
    position: relative;
    max-width: 100%;
    width: 100%;
    height: 880px; /* Highly compressed lightning bolt */
    margin: 60px auto 0 auto; /* Push down away from heading */
    padding: 0;
}

/* S-Curve SVG River */
.esc-svg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.zz-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
}
.zz-track-path {
    stroke: rgba(15, 23, 42, 0.12); /* Visible main river bed */
    stroke-width: 4px;
    fill: none;
}
.zz-pulse-path {
    stroke: #ff6600; /* Bright Amber River Flow */
    stroke-width: 6px;
    fill: none;
    filter: drop-shadow(0 0 10px rgba(255,102,0, 0.8));
}
.zz-pulse-svg {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, transparent 80%);
    -webkit-mask-size: 100% 30%;
    -webkit-mask-repeat: no-repeat;
    animation: zig-pulse 3.5s infinite linear;
}

@keyframes zig-pulse {
    0% { -webkit-mask-position: center -30%; }
    100% { -webkit-mask-position: center 130%; }
}

.esc-step {
    position: absolute;
    width: 35%; /* Increased SVG river width */
    height: 12.5%; /* Exactly 1/5th height to guarantee perfect node alignment */
    display: flex;
    align-items: center;
    z-index: 2;
}

.step-left {
    left: 0;
    justify-content: center;
}

.step-right {
    right: 0;
    justify-content: center;
}
.step-left .esc-content {
    margin-right: 50px !important;
}
.step-right .esc-content {
    margin-left: 50px !important;
}


/* Perfectly mapped vertical layout */
.step-1 { top: 0%; }
.step-2 { top: 12.5%; }
.step-3 { top: 25%; }
.step-4 { top: 37.5%; }
.step-5 { top: 50%; }
.step-6 { top: 62.5%; }
.step-7 { top: 75%; }
.step-8 { top: 87.5%; }

/* Place nodes perfectly on the 35% and 65% path coordinates */
.step-left .esc-node {
    position: absolute;
    right: -31px;
}
.step-right .esc-node {
    position: absolute;
    left: -31px;
}

.esc-node {
    width: 62px;
    height: 62px;
    background: #fff;
    border: 3px solid #222; /* Subtle black border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Stronger shadow for visibility */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5; /* Forces node to render ABOVE the connecting line so the line stops cleanly at the border */
}

.esc-step:hover .esc-node {
    border-color: #ff6600;
    transform: scale(1.25);
    box-shadow: 0 10px 30px rgba(255,102,0, 0.3);
}
.esc-step:hover .esc-node svg {
    color: #ff6600 !important;
}

.esc-node svg {
    width: 28px;
    height: 28px;
    transition: color 0.4s ease;
}

/* Color escalation to represent increasing risk */
.step-1 .esc-node svg { color: #88929e; }
.step-2 .esc-node svg { color: #af9d74; }
.step-3 .esc-node svg { color: #d1a546; }
.step-4 .esc-node svg { color: #ff6600; }
.step-5 .esc-node svg { color: #ff8800; }
.step-6 .esc-node svg { color: #ff6600; }
.step-7 .esc-node svg { color: #ef4422; }
.step-8 .esc-node svg { color: #db2727; }

.esc-content {
    background: #fff;
    padding: 15px 25px;
    border-radius: 35px;
    border: 3px solid #222; /* Matched to symbols */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Matched to symbols */
    
    width: 300px; /* Extended to fit longer headings */
    height: 60px; /* Restored sleek height since wider width prevents wrapping */
    
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-start; /* Keeps heading at top center */
    
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: default;
    overflow: hidden;
    position: relative;
    z-index: 2;
}








/* Structural connecting lines */
.step-left::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 50%;
    height: 2px;
    background: rgba(15, 23, 42, 0.1);
    z-index: 1;
    transition: background 0.4s ease;
}
.step-right::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 50%;
    height: 2px;
    background: rgba(15, 23, 42, 0.1);
    z-index: 1;
    transition: background 0.4s ease;
}
.esc-step:hover::before {
    background: rgba(255,102,0, 0.4);
}



.esc-step:hover .esc-content {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255,102,0, 0.3); /* Amber glow matched to symbols */
    border-color: #ff6600;
    width: 430px; /* Reduced by 50px overall to pull in edges */
    height: 175px; /* Extended to accommodate long new text */
}

.esc-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 0;
    flex: none;
    white-space: normal;
    transition: color 0.4s ease;
}
.esc-step:hover .esc-content h3 {
    color: #ff6600;
}



/* Hover Expansions */






.esc-content p {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
    margin-top: 60px; /* Physically pushed outside the idle container */
    width: 100%; /* Auto scale to container */
    opacity: 0;
    visibility: hidden;
    white-space: normal !important;
    text-align: center;
    transition: visibility 0s linear 0s, opacity 0.4s ease 0.1s, margin-top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.esc-step:hover .esc-content p {
    opacity: 1;
    visibility: visible;
    margin-top: 15px;
    transition: visibility 0s linear 0s, opacity 0.5s ease 0.2s, margin-top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Responsive Mobile Layout */
@media (max-width: 900px) {
    .esc-pipeline {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding-left: 20px;
        margin-top: 40px;
    }
    .esc-svg-wrapper {
        display: none; /* Hide S-Curve on mobile */
    }
    
    .esc-pipeline::before {
        content: '';
        position: absolute;
        top: 0; bottom: 0;
        left: 44px; /* Align with nodes */
        width: 3px;
        background: rgba(15,23,42,0.12);
        z-index: 1;
    }

    .esc-step {
        position: relative;
        width: 100%;
        height: auto;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        padding-left: 60px;
        padding-right: 20px;
        justify-content: flex-start;
    }
    
    .step-left, .step-right {
        justify-content: flex-start;
        padding-right: 20px;
    }

    .step-left .esc-node, .step-right .esc-node {
        position: absolute;
        left: 0;
        right: auto;
    }

    .esc-content, .step-right .esc-content {
    margin-left: 50px !important; /* Shifted to avoid overlap */
        align-items: flex-start;
        text-align: left;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        flex-direction: column;
    }
}

@media (max-width: 1000px) {
    .exec-layer-section {
        flex-direction: column;
        padding: 40px 20px;
        gap: 40px;
    }
    .exec-graphic-block, .exec-text-block {
        width: 100%;
        flex: none;
    }
}


/* Final Description Block */
.final-desc-block {
    max-width: 850px;
    margin: 60px auto 0 auto;
    padding: 0 20px;
    text-align: center;
}

.final-desc-block p {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    color: #334155;
    line-height: 1.75;
    letter-spacing: -0.01em;
    margin: 0;
}

@media (max-width: 900px) {
    .final-desc-block {
        margin: 40px auto 0 auto;
        padding: 0 30px;
    }
    .final-desc-block p {
        font-size: 1.1rem;
        text-align: left;
    }
}

.exec-desc:last-child { margin-bottom: 0; }

/* ==========================================================================
   detection-and-response.html — aligned to the adaptive-coverage design language.
   Everything is scoped under .dr-page so nothing leaks to other pages.
   Values mirror adaptive-coverage.html's inline styles 1:1.
   ========================================================================== */
.dr-page .dr-stack { width: calc(100% + 40px); max-width: none; margin: 0 -20px 100px -20px; padding: 0 20px; display: flex; flex-direction: column; gap: 100px; box-sizing: border-box; }
.dr-page .dr-row { display: flex; flex-wrap: wrap; gap: 60px; align-items: stretch; }
.dr-page .dr-col { flex: 1; min-width: 400px; display: flex; flex-direction: column; justify-content: center; }
.dr-page .dr-col-visual { flex: 1; min-width: 400px; display: flex; }
.dr-page .dr-col-visual > * { flex: 1; }
.dr-page .dr-accent { padding-left: 32px; border-left: 4px solid #ff6600; position: relative; margin-bottom: 30px; }
.dr-page .dr-eyebrow { color: #ff6600; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 2px; margin: 0 0 15px 0; text-transform: uppercase; }
.dr-page .dr-h2 { color: #1a1a1a; font-family: 'Space Grotesk', sans-serif; font-size: 3.2rem; font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 0 0 24px 0; }
.dr-page .dr-p { color: #555; font-family: 'Nunito', sans-serif; font-size: 1.15rem; line-height: 1.7; margin: 0 0 20px 0; }
.dr-page .dr-p strong { color: #111; }
.dr-page .dr-close { color: #111; font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.5; margin: 0; }

/* Cards (AC white frosted + AC dark) */
.dr-page .dr-card-light { background: rgba(255,255,255,0.6); backdrop-filter: blur(12px);border: 1px solid rgba(0,0,0,0.05); border-radius: 30px; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
.dr-page .dr-card-dark { background: #111; color: #fff; border-radius: 30px; padding: 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.dr-page .dr-card-title { color: #111; font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; text-align: center; margin: 0 0 20px 0; }
.dr-page .dr-card-title-dark { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: 2px; text-align: center; margin: 0 0 24px 0; }
.dr-page .dr-card-caption-dark { color: #aaa; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 700; text-align: center; margin: 24px 0 0 0; }
.dr-page .dr-arrow { text-align: center; color: #ff6600; font-weight: 700; line-height: 1; margin: 6px 0; }

/* Risk bands (AC "Security Density Follows Risk") */
.dr-page .dr-band { display: flex; justify-content: space-between; gap: 16px; padding: 15px 25px; border-radius: 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; }
.dr-page .dr-band span:last-child { text-align: right; }
.dr-page .dr-band-neutral { background: rgba(0,0,0,0.04); color: #555; border: 1px solid rgba(0,0,0,0.08); }
.dr-page .dr-band-low { background: rgba(76,175,80,0.1); color: #2e7d32; border: 1px solid rgba(76,175,80,0.3); }
.dr-page .dr-band-anomaly { background: rgba(255,170,0,0.1); color: #cc7700; border: 1px solid rgba(255,170,0,0.3); }
.dr-page .dr-band-elevated { background: rgba(255,102,0,0.1); color: #ff6600; border: 1px solid rgba(255,102,0,0.3); }
.dr-page .dr-band-strong { background: rgba(255,102,0,0.16); color: #ff6600; border: 2px solid #ff6600; }
.dr-page .dr-band-high { background: rgba(255,68,68,0.1); color: #cc0000; border: 2px solid #ff4444; }
.dr-page .dr-band-critical { background: #111; color: #ff4444; border: 1px solid #ff4444; box-shadow: 0 5px 15px rgba(255,68,68,0.2); }
.dr-page .dr-band-decision { background: #111; color: #ff6600; border: 1px solid #ff6600; box-shadow: 0 5px 15px rgba(255,102,0,0.25); }

/* Dark pill flow (AC "Risk Flow") */
.dr-page .dr-flow { display: flex; flex-direction: column; justify-content: space-between; width: 100%; max-width: 300px; flex: 1; }
.dr-page .dr-flow .dr-arrow { margin: 5px 0; }
.dr-page .dr-pill { padding: 12px 20px; border-radius: 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; text-align: center; }
.dr-page .dr-pill-muted { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.dr-page .dr-pill-amber { background: rgba(255,170,0,0.1); color: #ffaa00; border: 1px solid rgba(255,170,0,0.4); }
.dr-page .dr-pill-orange-soft { background: rgba(255,102,0,0.1); color: #ff6600; border: 1px solid rgba(255,102,0,0.4); }
.dr-page .dr-pill-orange { background: rgba(255,102,0,0.2); color: #ff6600; border: 1px solid #ff6600; }
.dr-page .dr-pill-red-soft { background: rgba(255,68,68,0.12); color: #ff4444; border: 1px solid rgba(255,68,68,0.5); }
.dr-page .dr-pill-red { background: #ff4444; color: #fff; border: 1px solid #ff4444; box-shadow: 0 0 15px rgba(255,68,68,0.4); }

/* Question rows (dark card) */
.dr-page .dr-qlist { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.dr-page .dr-qrow { display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 12px 18px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); box-sizing: border-box; }
.dr-page .dr-qlabel { flex: 0 0 92px; color: #ff6600; font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.dr-page .dr-qtext { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.4; }
.dr-page .dr-qrow-key { background: rgba(255,102,0,0.15); border-color: #ff6600; }
.dr-page .dr-qrow-key .dr-qtext { color: #ff6600; font-weight: 700; }

/* Graph rows (light card) */
.dr-page .dr-grow { display: flex; align-items: center; gap: 20px; padding: 14px 22px; border-radius: 12px; background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); }
.dr-page .dr-glabel { flex: 0 0 76px; color: #ff6600; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: 2px; }
.dr-page .dr-gtext { color: #555; font-family: 'Nunito', sans-serif; font-size: 1rem; line-height: 1.45; }
.dr-page .dr-grow-key { background: rgba(255,102,0,0.1); border: 1px solid rgba(255,102,0,0.4); }
.dr-page .dr-grow-key .dr-gtext { color: #111; font-weight: 700; }

/* Question-reframe callout (AC intro callout) */
.dr-page .dr-callout { background: rgba(255,102,0,0.05); border-left: 4px solid #ff6600; padding: 28px 36px; border-radius: 0 20px 20px 0; box-shadow: 0 10px 30px rgba(255,102,0,0.05); box-sizing: border-box; margin: 4px 0 28px 0; }
.dr-page .dr-callout-kicker { color: #ff6600; font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 10px 0; }
.dr-page .dr-callout-from { color: #888; font-family: 'Nunito', sans-serif; font-size: 1.1rem; text-decoration: line-through; text-decoration-color: rgba(136,136,136,0.6); margin: 0 0 10px 0; }
.dr-page .dr-callout-to { color: #111; font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1.35; margin: 0; }
.dr-page .dr-callout-to span { color: #ff6600; }

/* Numbered steps (AC feedback-loop card, laid out horizontally) */
.dr-page .dr-steps { display: flex; align-items: flex-start; margin: 6px 0 30px 0; }
.dr-page .dr-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.dr-page .dr-step-num { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,102,0,0.1); color: #ff6600; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.dr-page .dr-step-name { color: #111; font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; }
.dr-page .dr-step-desc { color: #666; font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; }
.dr-page .dr-step-key .dr-step-num { background: #ff6600; color: #fff; box-shadow: 0 0 10px rgba(255,102,0,0.4); }
.dr-page .dr-step-key .dr-step-name, .dr-page .dr-step-key .dr-step-desc { color: #ff6600; }
.dr-page .dr-step-link { flex: 0 0 28px; height: 2px; background: rgba(255,102,0,0.25); margin-top: 15px; }

/* Predictability list */
.dr-page .dr-plist { list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 10px; }
.dr-page .dr-plist li { color: #333; font-family: 'Nunito', sans-serif; font-size: 1.1rem; line-height: 1.5; padding-left: 16px; border-left: 2px solid rgba(255,102,0,0.5); }

/* Predictable vs adaptive matrix (AC stochastic-coverage card) */
.dr-page .dr-matrix-wrap { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px);border: 1px solid rgba(0,0,0,0.05); border-radius: 30px; padding: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.03); display: flex; flex-wrap: wrap; gap: 40px; }
.dr-page .dr-matrix { flex: 1; min-width: 300px; padding: 30px; border-radius: 20px; }
.dr-page .dr-matrix-static { background: rgba(255,68,68,0.02); border-top: 4px solid #ff4444; }
.dr-page .dr-matrix-adaptive { background: rgba(255,102,0,0.02); border-top: 4px solid #ff6600; }
.dr-page .dr-mx-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.dr-page .dr-mx-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 1px; text-transform: uppercase; }
.dr-page .dr-mx-tag { font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 12px; letter-spacing: 1px; white-space: nowrap; }
.dr-page .dr-mx-rows { display: flex; flex-direction: column; gap: 15px; }
.dr-page .dr-mx-row { display: flex; align-items: center; gap: 15px; }
.dr-page .dr-mx-label { width: 112px; flex-shrink: 0; color: #888; font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; text-align: right; text-transform: uppercase; transition: color 0.3s ease; }
.dr-page .dr-mx-track { flex: 1; height: 16px; border-radius: 8px; background: rgba(0,0,0,0.05); position: relative; overflow: hidden; }
.dr-page .dr-mx-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 8px; transition: background 0.35s ease, box-shadow 0.35s ease; }
.dr-page .dr-mx-fill-static { width: 100%; background: rgba(255,68,68,0.15); box-shadow: inset 0 0 0 1px rgba(255,68,68,0.3); animation: drStaticPulse 2s infinite; }
@keyframes drStaticPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.dr-page .dr-mx-fill-adaptive { background: rgba(255,102,0,0.1); box-shadow: inset 0 0 0 1px rgba(255,102,0,0.3); }
.dr-page .dr-mx-row.is-active .dr-mx-fill-adaptive { background: #ff6600; box-shadow: 0 0 15px rgba(255,102,0,0.6); }
.dr-page .dr-mx-row.is-active .dr-mx-label { color: #ff6600; }
.dr-page .dr-mx-note { margin-top: 30px; background: #fff; padding: 15px; border-radius: 12px; font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ---- Existing diagrams restyled into AC's card language ---- */
/* Ring 3 / Ring 0 diagram -> AC dark card */
.dr-page .sleek-arch { flex: 1; width: 100%; min-width: 0; min-height: 460px; background: #111; border: none; border-radius: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); box-sizing: border-box; }
.dr-page .sleek-boundary-text { background: #111; font-family: 'Space Grotesk', sans-serif; }
.dr-page .sleek-label { font-family: 'Space Grotesk', sans-serif; top: 24px; left: 28px; }
.dr-page .opso-label { top: auto; bottom: 22px; }
.dr-page .sleek-ring0 { padding-bottom: 60px; }
.dr-page .sleek-node { font-family: 'Space Grotesk', sans-serif; }

/* Signal accordion -> AC dark cards, orange only */
.dr-page .accordion-container { height: 460px; }
.dr-page .acc-card { background: #111; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
.dr-page .acc-card:hover { background: #1a1a1a; }
.dr-page .acc-card.active { border-color: rgba(255,102,0,0.35); }
.dr-page .acc-card.active .acc-bg { opacity: 0.12; }
.dr-page .acc-content h3 { font-size: 2rem; }
.dr-page .acc-content p { font-family: 'Nunito', sans-serif; color: #bbb; }
.dr-page .acc-title-vertical { color: #888; }
.dr-page .acc-card:hover .acc-title-vertical { color: #ff6600; }
.dr-page .proc-node { background: #ff6600; box-shadow: 0 0 15px rgba(255,102,0,0.8); }
.dr-page .proc-line { background: rgba(255,102,0,0.4); }
.dr-page .sys-bar { background: #ff6600; box-shadow: 0 0 15px rgba(255,102,0,0.6); }
.dr-page .work-cube { border-color: rgba(255,102,0,0.45); }
.dr-page .work-scan { background: linear-gradient(180deg, transparent, rgba(255,102,0,0.35), transparent); border-bottom-color: #ff6600; box-shadow: 0 5px 15px rgba(255,102,0,0.4); }

/* Nekron tiers -> AC dark card */
.dr-page .nekron-visual { flex: 1; width: 100%; box-sizing: border-box; background: #111; backdrop-filter: none;border: none; border-radius: 30px; padding: 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
.dr-page .nekron-visual::before { opacity: 0.35; }
.dr-page .ng-tier { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); box-shadow: none; }
.dr-page .tier-nekron, .dr-page .tier-kernel { border-top: 3px solid #ff6600; }
.dr-page .tier-synapse { border-top: 3px solid rgba(255,255,255,0.3); }
.dr-page .nk-label { letter-spacing: 2px; }
.dr-page .tier-nekron .nk-label, .dr-page .tier-kernel .nk-label { color: #ff6600; }
.dr-page .tier-synapse .nk-label { color: #fff; }
.dr-page .nk-label-sub { color: #aaa; font-family: 'Space Grotesk', sans-serif; }
.dr-page .stream { background: rgba(255,255,255,0.12); }
.dr-page .s-node { background: rgba(255,102,0,0.1); border-color: rgba(255,102,0,0.4); color: #ff6600; }
.dr-page .nk-feature { gap: 20px; margin-bottom: 28px; }
.dr-page .nk-icon-box { background: rgba(255,102,0,0.1); border: 1px solid rgba(255,102,0,0.25); color: #ff6600; box-shadow: none; }
.dr-page .nk-feature h4 { font-size: 1.2rem; color: #111; }
.dr-page .nk-feature p { font-family: 'Nunito', sans-serif; font-size: 1.05rem; line-height: 1.6; color: #555; }

/* Escalation pipeline -> inside an AC light card, standard colors */
.dr-page .esc-pipeline { margin: 0 auto; }
@media (min-width: 901px) {
  .dr-page .esc-content { width: 320px; }
  .dr-page .esc-content h3 { white-space: nowrap; font-size: 1.15rem; }
  .dr-page .esc-step:hover .esc-content { height: 195px; }
}
.dr-page .esc-content p { font-family: 'Nunito', sans-serif; font-size: 1rem; }
.dr-page .step-1 .esc-node svg, .dr-page .step-2 .esc-node svg { color: #888; }
.dr-page .step-3 .esc-node svg { color: #cc7700; }
.dr-page .step-4 .esc-node svg, .dr-page .step-5 .esc-node svg, .dr-page .step-6 .esc-node svg { color: #ff6600; }
.dr-page .step-7 .esc-node svg, .dr-page .step-8 .esc-node svg { color: #ff4444; }

@media (max-width: 1100px) {
  .dr-page .dr-steps { flex-wrap: wrap; row-gap: 20px; }
  .dr-page .dr-step { flex: 1 1 45%; }
  .dr-page .dr-step-link { display: none; }
}
@media (max-width: 900px) {
  .dr-page .accordion-container { height: 900px; gap: 14px; }
  .dr-page .acc-anim-graphic { display: none; }
  .dr-page .acc-content { padding: 30px 26px; }
  .dr-page .acc-title-vertical { writing-mode: horizontal-tb; transform: none; top: 0; bottom: 0; left: 0; height: 100%; padding-left: 28px; justify-content: flex-start; align-items: center; font-size: 1.1rem; }
  .dr-page .acc-card.active .acc-title-vertical { transform: none; }
  .dr-page .dr-col, .dr-page .dr-col-visual { min-width: 100%; }
  .dr-page .dr-h2 { font-size: 2.4rem; }
  /* Escalation steps: no hover on touch, so show each step as a compact card with its description */
  .dr-page .esc-pipeline { padding-left: 0; gap: 22px; }
  .dr-page .esc-pipeline::before { display: none; }
  .dr-page .esc-step { padding: 0 !important; align-items: flex-start; }
  .dr-page .esc-step::before { display: none; }
  .dr-page .esc-step .esc-node { width: 48px; height: 48px; margin: 0 0 10px 0 !important; }
  .dr-page .esc-step .esc-node svg { width: 22px; height: 22px; }
  .dr-page .esc-content, .dr-page .step-right .esc-content, .dr-page .step-left .esc-content,
  .dr-page .esc-step:hover .esc-content { width: 100% !important; height: auto !important; margin: 0 !important; padding: 16px 20px; border-radius: 20px; border-width: 2px; align-items: flex-start !important; text-align: left; transform: none; }
  .dr-page .esc-content p, .dr-page .esc-step:hover .esc-content p { opacity: 1; visibility: visible; margin-top: 6px; text-align: left; }
  .dr-page .dr-col-visual { order: 2 !important; }
  .dr-page .dr-col { order: 1 !important; }
}
@media (max-width: 640px) {
  .dr-page .dr-stack { padding: 0 10px; }
  .dr-page .dr-card-light, .dr-page .dr-card-dark, .dr-page .dr-matrix-wrap { padding: 28px 20px; }
  .dr-page .dr-matrix { padding: 24px 18px; }
  .dr-page .dr-band { flex-direction: column; gap: 4px; }
  .dr-page .dr-band span:last-child { text-align: left; }
  .dr-page .dr-mx-label { width: 86px; font-size: 0.68rem; }
  .dr-page .dr-callout { padding: 22px; }
  .dr-page .dr-callout-to { font-size: 1.3rem; }
  .dr-page .dr-qrow { flex-direction: column; gap: 4px; }
  .dr-page .dr-qlabel, .dr-page .dr-glabel { flex: none; }
  .dr-page .dr-grow { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dr-page .dr-matrix { min-width: 100%; }
  .dr-page .dr-mx-header { flex-direction: column; align-items: flex-start; }
  .dr-page .s-node { padding: 6px 10px; font-size: 0.75rem; white-space: nowrap; }
  .dr-page .sentinel-nodes { gap: 8px; flex-wrap: wrap; }
  .dr-page .nekron-visual { padding: 28px 20px; }
  .dr-page .dr-step { flex: 1 1 100%; }
}

@keyframes webDrift {
  0% {
    background-position: 0px 0px, 0px 0px;
  }
  100% {
    /* Layer 1 moves top-left, Layer 2 moves bottom-right to create parallax */
    background-position: -800px -800px, 400px 400px;
  }
}

/* Agentic Security - Dynamic Grid */
.agent-capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.capability-card {
  background: rgba(15, 15, 20, 0.7);
  backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.4s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  animation: pulse-glow 4s ease-in-out infinite alternate;
}

.capability-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(255, 102, 0, 0.5);
  box-shadow: 0 10px 30px rgba(255, 102, 0, 0.15);
  background: rgba(20, 20, 25, 0.85);
}

.capability-icon {
  margin-bottom: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.capability-icon svg {
  width: 100%;
  height: 100%;
}

.capability-label {
  font-family: 'Space Grotesk', sans-serif;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 4px 20px rgba(255, 102, 0, 0.08);
  }
}

/* Agentic Security - VS Layout */
.vs-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .vs-container {
    grid-template-columns: 1fr;
  }
}

.vs-column {
  border-radius: 24px;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 250px;
}

.vs-traditional {
  background: #f0f0f0;
  border: 1px solid #dcdcdc;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.02);
}

.vs-traditional .vs-header {
  color: #666;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.vs-traditional p {
  color: #555;
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0;
}

.vs-agentic {
  background: #111;
  border: 1px solid rgba(255, 102, 0, 0.3);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2), inset 0 0 60px rgba(255,102,0,0.05);
  position: relative;
  overflow: hidden;
}

.vs-agentic::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(255,102,0,0.1) 0%, transparent 60%);
  animation: rotate-gradient 15s linear infinite;
}

@keyframes rotate-gradient {
  100% { transform: rotate(360deg); }
}

.vs-agentic .vs-header {
  color: #ff6600;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.vs-agentic p {
  color: #f8f9fa;
  font-family: 'Nunito', sans-serif;
  font-size: 1.35rem;
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Agentic Security - Dynamic Grid */
.agent-capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.capability-card {
  background: rgba(15, 15, 20, 0.7);
  backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.4s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  animation: pulse-glow 4s ease-in-out infinite alternate;
}

.capability-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(255, 102, 0, 0.5);
  box-shadow: 0 10px 30px rgba(255, 102, 0, 0.15);
  background: rgba(20, 20, 25, 0.85);
}

.capability-icon {
  margin-bottom: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.capability-icon svg {
  width: 100%;
  height: 100%;
}

.capability-label {
  font-family: 'Space Grotesk', sans-serif;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 4px 20px rgba(255, 102, 0, 0.08);
  }
}

/* Agentic Security - VS Layout */
.vs-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .vs-container {
    grid-template-columns: 1fr;
  }
}

.vs-column {
  border-radius: 24px;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 250px;
}

.vs-traditional {
  background: #f0f0f0;
  border: 1px solid #dcdcdc;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.02);
}

.vs-traditional .vs-header {
  color: #666;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.vs-traditional p {
  color: #555;
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0;
}

.vs-agentic {
  background: #111;
  border: 1px solid rgba(255, 102, 0, 0.3);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2), inset 0 0 60px rgba(255,102,0,0.05);
  position: relative;
  overflow: hidden;
}

.vs-agentic::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(255,102,0,0.1) 0%, transparent 60%);
  animation: rotate-gradient 15s linear infinite;
}

@keyframes rotate-gradient {
  100% { transform: rotate(360deg); }
}

.vs-agentic .vs-header {
  color: #ff6600;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.vs-agentic p {
  color: #f8f9fa;
  font-family: 'Nunito', sans-serif;
  font-size: 1.35rem;
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Section 2: Agent Relationship Intelligence */
.graph-comparison-container {
  display: flex;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto 80px auto;
}

@media (max-width: 900px) {
  .graph-comparison-container {
    flex-direction: column;
  }
}

.graph-pane {
  flex: 1;
  border-radius: 24px;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.pane-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 2;
}

/* Blind Spot (Left) */
.blind-spot {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.02);
}

.blind-spot .pane-title {
  color: #666;
}

.static-graph {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.static-node-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 30px;
}

.static-node, .static-server {
  background: #e9ecef;
  border: 1px solid #ced4da;
  color: #495057;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
}

.static-server {
  width: 250px;
  text-align: center;
}

.static-arrow-group {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 30px;
}

.static-arrow {
  color: #adb5bd;
  font-size: 2rem;
  font-weight: bold;
}

/* Reality Mesh (Right) */
.reality-mesh {
  background: #111;
  border: 1px solid rgba(255, 102, 0, 0.3);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2), inset 0 0 80px rgba(255,102,0,0.05);
}

.animated-graph-wrapper {
  position: relative;
  width: 400px;
  height: 380px;
  margin: 0 auto;
}

.graph-connections {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

.base-line {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2;
  fill: none;
}

.pulse-line {
  stroke: #ff6600;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 20 200;
  stroke-dashoffset: 0;
  animation: pulse-travel 3s linear infinite;
}

.pulse-1 { animation-delay: 0s; }
.pulse-2 { animation-delay: 1s; }
.pulse-3 { animation-delay: 1.5s; stroke-dasharray: 20 150; animation-duration: 2s; }
.pulse-4 { animation-delay: 0.5s; }
.pulse-5 { animation-delay: 2s; }
.pulse-6 { animation-delay: 1.2s; stroke-dasharray: 30 100; animation-duration: 1.5s; }

@keyframes pulse-travel {
  from { stroke-dashoffset: 220; }
  to { stroke-dashoffset: -20; }
}

.mesh-node, .mesh-server {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(15, 15, 20, 0.9);
  border: 1px solid rgba(255, 102, 0, 0.5);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  z-index: 2;
  white-space: nowrap;
  box-shadow: 0 0 15px rgba(255,102,0,0.2);
}

.mesh-server {
  background: #ff6600;
  color: #fff;
  border-color: #ff6600;
  box-shadow: 0 0 25px rgba(255,102,0,0.4);
}

/* Interrogation Console */
.interrogation-console {
  background: #0d0d12;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}

.console-header {
  background: #1a1a24;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.console-dots {
  display: flex;
  gap: 8px;
  margin-right: 20px;
}

.console-dots span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ff5f56;
}
.console-dots span:nth-child(2) { background: #ffbd2e; }
.console-dots span:nth-child(3) { background: #27c93f; }

.console-title {
  color: #888;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.console-body {
  padding: 30px 40px;
}

.console-intro {
  color: #ff6600;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.query-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.query-list li {
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.radar-icon {
  display: inline-block;
  width: 8px; height: 8px;
  background: #ff6600;
  border-radius: 50%;
  margin-right: 15px;
  box-shadow: 0 0 10px #ff6600;
  animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes radar-ping {
  75%, 100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Section 2: Agent Relationship Intelligence */
.graph-comparison-container {
  display: flex;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto 80px auto;
}

@media (max-width: 900px) {
  .graph-comparison-container {
    flex-direction: column;
  }
}

.graph-pane {
  flex: 1;
  border-radius: 24px;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.pane-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 2;
}

/* Blind Spot (Left) */
.blind-spot {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.02);
}

.blind-spot .pane-title {
  color: #666;
}

.static-graph {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.static-node-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 30px;
}

.static-node, .static-server {
  background: #e9ecef;
  border: 1px solid #ced4da;
  color: #495057;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
}

.static-server {
  width: 250px;
  text-align: center;
}

.static-arrow-group {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 30px;
}

.static-arrow {
  color: #adb5bd;
  font-size: 2rem;
  font-weight: bold;
}

/* Reality Mesh (Right) */
.reality-mesh {
  background: #111;
  border: 1px solid rgba(255, 102, 0, 0.3);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2), inset 0 0 80px rgba(255,102,0,0.05);
}

.animated-graph-wrapper {
  position: relative;
  width: 400px;
  height: 380px;
  margin: 0 auto;
}

.graph-connections {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

.base-line {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2;
  fill: none;
}

.pulse-line {
  stroke: #ff6600;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 20 200;
  stroke-dashoffset: 0;
  animation: pulse-travel 3s linear infinite;
}

.pulse-1 { animation-delay: 0s; }
.pulse-2 { animation-delay: 1s; }
.pulse-3 { animation-delay: 1.5s; stroke-dasharray: 20 150; animation-duration: 2s; }
.pulse-4 { animation-delay: 0.5s; }
.pulse-5 { animation-delay: 2s; }
.pulse-6 { animation-delay: 1.2s; stroke-dasharray: 30 100; animation-duration: 1.5s; }

@keyframes pulse-travel {
  from { stroke-dashoffset: 220; }
  to { stroke-dashoffset: -20; }
}

.mesh-node, .mesh-server {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(15, 15, 20, 0.9);
  border: 1px solid rgba(255, 102, 0, 0.5);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  z-index: 2;
  white-space: nowrap;
  box-shadow: 0 0 15px rgba(255,102,0,0.2);
}

.mesh-server {
  background: #ff6600;
  color: #fff;
  border-color: #ff6600;
  box-shadow: 0 0 25px rgba(255,102,0,0.4);
}

/* Interrogation Console */
.interrogation-console {
  background: #0d0d12;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}

.console-header {
  background: #1a1a24;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.console-dots {
  display: flex;
  gap: 8px;
  margin-right: 20px;
}

.console-dots span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ff5f56;
}
.console-dots span:nth-child(2) { background: #ffbd2e; }
.console-dots span:nth-child(3) { background: #27c93f; }

.console-title {
  color: #888;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.console-body {
  padding: 30px 40px;
}

.console-intro {
  color: #ff6600;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.query-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.query-list li {
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.radar-icon {
  display: inline-block;
  width: 8px; height: 8px;
  background: #ff6600;
  border-radius: 50%;
  margin-right: 15px;
  box-shadow: 0 0 10px #ff6600;
  animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes radar-ping {
  75%, 100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
.pulse-3-reverse { 
  stroke: #ff6600;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 40 160; 
  animation: pulse-travel-reverse 2.5s linear infinite; 
  animation-delay: 0.2s;
}

@keyframes pulse-travel-reverse {
  from { stroke-dashoffset: 220; }
  to { stroke-dashoffset: -20; }
}

.pulse-line, .pulse-3-reverse {
  stroke: #ff6600;
  stroke-width: 3;
  fill: none;
  /* Short line, long gap */
  stroke-dasharray: 15 65; 
  animation: laser-flow 1.5s linear infinite;
}

/* Slightly offset the start times so they don't look perfectly synced */
.pulse-1 { animation-delay: 0s; }
.pulse-2 { animation-delay: -0.4s; }
.pulse-3 { animation-delay: -0.8s; }
.pulse-3-reverse { animation-delay: -1.2s; }
.pulse-4 { animation-delay: -0.2s; }
.pulse-5 { animation-delay: -0.6s; }
.pulse-6 { animation-delay: -1.0s; }

/* 15 (line) + 65 (gap) = 80 total loop length. 
   Animating from 80 to 0 creates a perfectly seamless infinite loop! */
@keyframes laser-flow {
  from { stroke-dashoffset: 80; }
  to { stroke-dashoffset: 0; }
}

/* Force override for ALL pulse modifiers */
.pulse-1, .pulse-2, .pulse-3, .pulse-4, .pulse-5, .pulse-6, .pulse-3-reverse {
  stroke-dasharray: 15 65 !important;
  animation-duration: 1.5s !important;
  animation-name: laser-flow !important;
}

.pulse-1 { animation-delay: 0s !important; }
.pulse-2 { animation-delay: -0.4s !important; }
.pulse-3 { animation-delay: -0.8s !important; }
.pulse-3-reverse { animation-delay: -1.2s !important; }
.pulse-4 { animation-delay: -0.2s !important; }
.pulse-5 { animation-delay: -0.6s !important; }
.pulse-6 { animation-delay: -1.0s !important; }

/* Card Hover Effect */
.capability-card {
  display: grid !important;
  place-items: center !important;
}

.card-front {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  width: 100%;
}

.card-back {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s ease;
  color: #ccc;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}

.capability-card:hover .card-front {
  opacity: 0;
  transform: translateY(-15px);
}

.capability-card:hover .card-back {
  opacity: 1;
  transform: translateY(0);
}

/* UX Skill Injections: Professional Refinements */

.cursor-pointer {
  cursor: pointer;
}

/* Improve Card Hover Accessibility (Touch & Keyboard) */
.capability-card:hover .card-front,
.capability-card:focus .card-front,
.capability-card:active .card-front {
  opacity: 0;
  transform: translateY(-10px); /* Reduced movement for stability */
}

.capability-card:hover .card-back,
.capability-card:focus .card-back,
.capability-card:active .card-back {
  opacity: 1;
  transform: translateY(0);
}

.capability-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Faster, smoother transition (UX rule) */
}
.capability-card:hover, .capability-card:focus {
  transform: translateY(-4px) scale(1.01) !important; /* Stable layout shift */
  outline: none; /* Removed default outline, replaced with border glow */
  border-color: rgba(255, 102, 0, 0.8) !important;
  box-shadow: 0 10px 40px rgba(255, 102, 0, 0.2) !important;
}

.card-front, .card-back {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; /* 200ms standard */
}

/* Consistent Section Containers */
.section-block {
  max-width: 1440px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Improve traditional vs agentic contrast layout for readability */
.vs-traditional, .vs-agentic {
  transition: transform 0.2s ease;
}
.vs-traditional:hover, .vs-agentic:hover {
  transform: translateY(-2px);
}

/* 3-Column Full Width Layout Refinements */
.graph-comparison-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  width: calc(100vw - 80px) !important;
  max-width: none !important;
  margin: 0 calc(-50vw + 50% + 40px) 80px calc(-50vw + 50% + 40px) !important;
}

@media (max-width: 1200px) {
  .graph-comparison-container {
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 0 80px 0 !important;
  }
}

.graph-pane {
  flex: 1 1 0 !important; /* Force equal 3 columns */
  min-width: 0 !important;
  padding: 30px 20px !important; /* Reduced padding */
}

/* Make animated graph truly scalable */
.animated-graph-wrapper {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 400 / 350 !important;
  position: relative;
}

/* Ensure font sizes shrink gracefully in the nodes */
.mesh-node, .mesh-server {
  font-size: clamp(0.7rem, 1vw, 1rem) !important;
  padding: 6px 10px !important;
}
.static-node, .static-server {
  font-size: clamp(0.8rem, 1.2vw, 1.1rem) !important;
  padding: 8px 12px !important;
}
.static-server {
  width: 80% !important;
}
.pane-title {
  font-size: clamp(1rem, 1.5vw, 1.3rem) !important;
  margin-bottom: 20px !important;
}

/* Interrogation console refinements for the 3rd column */
.interrogation-console-pane {
  background: #0d0d12 !important;
  border: 1px solid rgba(255, 102, 0, 0.3) !important;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5) !important;
}
.query-list li {
  font-size: clamp(0.8rem, 1vw, 1.15rem) !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
  white-space: normal !important;
}

/* Section 3: Capability Propagation Detection */
@media (max-width: 900px) {
  .prop-grid-container {
    flex-direction: column !important;
  }
}

.stagger-item {
  opacity: 0;
  transform: translateX(-20px);
  animation: slide-in-right 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0.2s; }
.stagger-item:nth-child(2) { animation-delay: 0.4s; }
.stagger-item:nth-child(3) { animation-delay: 0.6s; }

@keyframes slide-in-right {
  to { opacity: 1; transform: translateX(0); }
}

.openai-link:hover {
  background: rgba(255,102,0,0.15) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255,102,0,0.2);
}

.prop-timeline {
  padding: 20px 0;
}

.prop-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #111;
  border: 1px solid rgba(255,102,0,0.3);
  padding: 20px 30px;
  border-radius: 16px;
  width: 80%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prop-step:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(255,102,0,0.15);
  border-color: rgba(255,102,0,0.6);
}

.prop-agent {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.prop-agent-alert {
  color: #ff5f56;
}

.prop-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.action-text {
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  color: #888;
  font-style: italic;
}

.prop-asset {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}

.asset-credential {
  background: rgba(255,255,255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255,255,255, 0.3);
  box-shadow: 0 0 15px rgba(255,255,255, 0.1);
}

.asset-exploit {
  background: rgba(255, 189, 46, 0.1);
  color: #ffbd2e;
  border: 1px solid rgba(255, 189, 46, 0.3);
  box-shadow: 0 0 15px rgba(255, 189, 46, 0.1);
}

.asset-privilege {
  background: rgba(255, 95, 86, 0.1);
  color: #ff5f56;
  border: 1px solid rgba(255, 95, 86, 0.3);
  box-shadow: 0 0 15px rgba(255, 95, 86, 0.1);
}

.prop-flow-arrow {
  font-family: 'Space Grotesk', sans-serif;
  color: #555;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 15px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* The upward tracing beam */
.tracing-beam {
  stroke: url(#beamGrad);
  stroke-width: 4;
  stroke-dasharray: 60 200;
  animation: trace-up 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes trace-up {
  0% { stroke-dashoffset: 260; }
  100% { stroke-dashoffset: 0; }
}

/* Section 4, 5, 6 UI/UX Designs */

/* Intent Drift Chart */
.drift-stat-card {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drift-stat-card.border-red {
  background: rgba(255, 95, 86, 0.05);
  border-color: rgba(255, 95, 86, 0.3);
}
.stat-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: #666;
}
.stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}
.text-cyan { color: #008888; }
.text-yellow { color: #d97706; }
.text-red { color: #dc2626; }

.animated-drift-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw-drift 3s ease-out forwards infinite alternate;
}
@keyframes draw-drift {
  0% { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0; }
}
.drift-pulse-node {
  animation: pulse-node 2s infinite;
}
@keyframes pulse-node {
  0% { transform: scale(1); opacity: 1; transform-origin: 380px 50px; }
  50% { transform: scale(1.5); opacity: 0.8; transform-origin: 380px 50px; }
  100% { transform: scale(1); opacity: 1; transform-origin: 380px 50px; }
}

/* Disposable Agent Graphic */
.kc-node {
  background: #111;
  border: 1px solid #333;
  padding: 20px 30px;
  border-radius: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.kc-quarantined {
  border-color: #ff5f56;
  color: #ff5f56;
}
.kc-x {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: rgba(255, 95, 86, 0.8);
  pointer-events: none;
}
.kc-active {
  border-color: #ffffff;
  color: #ffffff;
}
.kc-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.kc-path-label {
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.payload-runner {
  animation: run-payload 2s linear infinite;
}
@keyframes run-payload {
  0% { cx: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { cx: 100; opacity: 0; }
}

/* Collective Memory Graphic */
.substrate-pill {
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  color: #555;
  font-weight: 600;
}
.substrate-core {
  position: absolute;
  width: 140px; height: 140px;
  background: #1a1a24;
  border: 2px solid #a855f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
}
.core-text {
  font-family: 'Space Grotesk', sans-serif;
  color: #d8b4fe;
  font-weight: 700;
  text-align: center;
  font-size: 1.1rem;
}
.core-glow {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 20px #a855f7;
  animation: pulse-core 3s infinite alternate;
}
@keyframes pulse-core {
  to { transform: scale(1.1); box-shadow: 0 0 60px #a855f7; opacity: 0.7; }
}

.orbit-node {
  position: absolute;
  width: 80px; height: 40px;
  background: #222;
  border: 1px solid #444;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 600;
}
.orbit-1 { top: 40px; left: 50px; }
.orbit-2 { top: 40px; right: 50px; }
.orbit-3 { bottom: 60px; left: 50%; transform: translateX(-50%); }

.orbit-pulse {
  position: absolute;
  width: 10px; height: 10px;
  background: #ff6600;
  border-radius: 50%;
  box-shadow: 0 0 10px #ff6600;
}
/* Rough CSS path animations relative to the node */
.pulse-in {
  animation: move-in 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.pulse-out {
  animation: move-out 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 1s;
}
.pulse-out-delayed {
  animation: move-out-btm 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 1.5s;
}

@keyframes move-in {
  0% { transform: translate(40px, 20px) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(120px, 100px) scale(1.5); opacity: 0; }
}
@keyframes move-out {
  0% { transform: translate(-40px, 100px) scale(1.5); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-80px, 20px) scale(0.5); opacity: 0; }
}
@keyframes move-out-btm {
  0% { transform: translate(40px, -100px) scale(1.5); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(40px, -20px) scale(0.5); opacity: 0; }
}

/* Section 7 Final Epic CSS */
.final-epic-section {
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.scanner-bar {
  animation: sweep 4s linear infinite;
}

@keyframes sweep {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(800px); }
}

.attack-path-line {
  animation: draw-attack-path 8s ease-in-out infinite;
}

@keyframes draw-attack-path {
  0%, 20% { stroke-dashoffset: 1000; opacity: 0; }
  40%, 80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.attack-node, .attack-text {
  opacity: 0;
  animation: reveal-node 8s ease-in-out infinite;
}
.node-1 { animation-delay: 2.2s; }
.node-2 { animation-delay: 2.5s; }
.node-3 { animation-delay: 2.8s; }
.node-4 { animation-delay: 3.1s; }
.attack-text { animation-delay: 3.2s; }

@keyframes reveal-node {
  0%, 10% { opacity: 0; transform: scale(0); transform-origin: center; }
  15%, 70% { opacity: 1; transform: scale(1); transform-origin: center; }
  80%, 100% { opacity: 0; transform: scale(0); transform-origin: center; }
}

.finale-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255,255,255,0.2);
}
.finale-card:nth-child(3):hover {
  border-color: rgba(255,102,0,0.6) !important;
}

.cta-pulse-btn:hover {
  background: #ff7a22;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 40px rgba(255,102,0,0.5);
}


/* Frosty Glass Cards for Final Section */
.frosty-card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px) !important;

  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04), inset 0 0 20px rgba(255,255,255,0.6) !important;
  padding: 40px 30px !important;
  border-radius: 20px !important;
  text-align: left !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.frosty-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), inset 0 0 30px rgba(255,255,255,0.9) !important;
  border-color: rgba(255,102,0,0.3) !important;
}

/* Custom CSS for Infrastructure Security Page */
.iso-layer:hover {
  transform: translateZ(20px) scale(1.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.08) !important;
}
.iso-glow {
  animation: pulseOpsonanceLayer 4s infinite alternate;
}
@keyframes pulseOpsonanceLayer {
  0% { box-shadow: 0 0 20px rgba(255,102,0,0.1); border-color: rgba(255,102,0,0.2); }
  100% { box-shadow: 0 0 50px rgba(255,102,0,0.4); border-color: rgba(255,102,0,0.6); }
}

.risk-node {
  transition: all 0.3s ease;
}
.risk-node:hover {
  transform: scale(1.05);
}

/* Custom CSS for Infrastructure Security Page */
.iso-layer:hover {
  transform: translateZ(20px) scale(1.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.08) !important;
}
.iso-glow {
  animation: pulseOpsonanceLayer 4s infinite alternate;
}
@keyframes pulseOpsonanceLayer {
  0% { box-shadow: 0 0 20px rgba(255,102,0,0.1); border-color: rgba(255,102,0,0.2); }
  100% { box-shadow: 0 0 50px rgba(255,102,0,0.4); border-color: rgba(255,102,0,0.6); }
}

.risk-node {
  transition: all 0.3s ease;
}
.risk-node:hover {
  transform: scale(1.05);
}

/* ARCHITECTURE ADDITIONS */

/* Sentinels Markov Grid */
.markov-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 400px;
}
.markov-node {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  transition: all 0.5s ease;
}
.m-idle {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.m-active {
  background: rgba(255,102,0,0.8);
  border: 1px solid #ff6600;
  box-shadow: 0 0 15px rgba(255,102,0,0.6);
  animation: pulse-node 2s infinite alternate;
}
@keyframes pulse-node {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 25px rgba(255,102,0,0.9); }
}

/* Synapse Hot/Cold Path */
.hot-cold-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hcd-zone {
  width: 100%;
  border: 1px dashed;
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.hcd-cold {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.02);
}
.hcd-hot {
  border-color: rgba(255,102,0,0.3);
  background: rgba(255,102,0,0.02);
}
.hcd-label {
  position: absolute;
  top: -12px;
  left: 20px;
  background: #08080c;
  padding: 0 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
}
.hcd-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid;
  border-radius: 8px;
  padding: 15px 20px;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
}
.dash-anim {
  animation: march 1s linear infinite;
}
@keyframes march {
  to { stroke-dashoffset: -8; }
}

/* Special Forces Cascade */
.cascade-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.c-node {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 12px 24px;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  text-align: center;
  width: 200px;
}
.c-normal { border-color: rgba(255,255,255,0.2); }
.c-warning { border-color: #ff6600; color: #ff6600; background: rgba(255,102,0,0.1); }
.c-danger { border-color: #ff4444; color: #ff4444; background: rgba(255,68,68,0.1); box-shadow: 0 0 20px rgba(255,68,68,0.2); }
.c-path {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 40px;
}
.c-path-label {
  position: absolute;
  left: 30px;
  width: max-content;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  color: #888;
}
.c-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.c-action-node {
  background: rgba(255,68,68,0.1);
  border: 1px solid #ff4444;
  color: #ff4444;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Synthesis Pipeline */
.synthesis-pipeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.syn-layer {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 12px 24px;
  color: #ccc;
  font-family: 'Space Grotesk', sans-serif;
  text-align: center;
  width: 280px;
  transition: all 0.3s ease;
}


/* ARCHITECTURE ADDITIONS */

/* Sentinels Markov Grid */
.markov-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 400px;
}
.markov-node {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  transition: all 0.5s ease;
}
.m-idle {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.m-active {
  background: rgba(255,102,0,0.8);
  border: 1px solid #ff6600;
  box-shadow: 0 0 15px rgba(255,102,0,0.6);
  animation: pulse-node 2s infinite alternate;
}
@keyframes pulse-node {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 25px rgba(255,102,0,0.9); }
}

/* Synapse Hot/Cold Path */
.hot-cold-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hcd-zone {
  width: 100%;
  border: 1px dashed;
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.hcd-cold {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.02);
}
.hcd-hot {
  border-color: rgba(255,102,0,0.3);
  background: rgba(255,102,0,0.02);
}
.hcd-label {
  position: absolute;
  top: -12px;
  left: 20px;
  background: #08080c;
  padding: 0 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
}
.hcd-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid;
  border-radius: 8px;
  padding: 15px 20px;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
}
.dash-anim {
  animation: march 1s linear infinite;
}
@keyframes march {
  to { stroke-dashoffset: -8; }
}

/* Special Forces Cascade */
.cascade-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.c-node {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 12px 24px;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  text-align: center;
  width: 200px;
}
.c-normal { border-color: rgba(255,255,255,0.2); }
.c-warning { border-color: #ff6600; color: #ff6600; background: rgba(255,102,0,0.1); }
.c-danger { border-color: #ff4444; color: #ff4444; background: rgba(255,68,68,0.1); box-shadow: 0 0 20px rgba(255,68,68,0.2); }
.c-path {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 40px;
}
.c-path-label {
  position: absolute;
  left: 30px;
  width: max-content;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  color: #888;
}
.c-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.c-action-node {
  background: rgba(255,68,68,0.1);
  border: 1px solid #ff4444;
  color: #ff4444;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Synthesis Pipeline */
.synthesis-pipeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.syn-layer {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 12px 24px;
  color: #ccc;
  font-family: 'Space Grotesk', sans-serif;
  text-align: center;
  width: 280px;
  transition: all 0.3s ease;
}

/* Global Internal Page Navigation Bar */
.global-nav {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 40px;
  box-sizing: border-box;
  background: transparent;
  border-bottom: none;
  z-index: 9999;
  pointer-events: none;
}

.global-nav.dark-mode {
  background: transparent;
  border-bottom: none;
}

.global-nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}

.global-nav-logo img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(255,102,0,0.3));
}

.global-nav-links {
  display: flex;
  align-items: center;
  gap: 15px;
  pointer-events: auto;
}

/* Ensure body padding accommodates the fixed header */
body.has-global-nav {
  padding-top: 100px;
}



.glass-btn:hover .nav-label {
  
  color: #ffffff;
}




/* ==========================================================================
   PHASE 1: MOBILE NAVIGATION & FOOTER
   ========================================================================== */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: none;
  color: #111;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 5px 10px;
  z-index: 10000;
  pointer-events: auto;
}
.mobile-drawer {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);

  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: calc(64px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)) 20px;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  overflow-y: auto;
}
.mobile-drawer.open {
  transform: translateY(0);
  opacity: 1;
}
.mobile-drawer-link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
  text-decoration: none;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.mobile-drawer-close {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top));
  right: 20px;
  background: transparent;
  border: none;
  font-size: 2.5rem;
  cursor: pointer;
  color: #111;
}
.footer-accordion-btn {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  padding: 15px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-accordion-btn::after {
  content: '+';
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}
.footer-accordion-btn[aria-expanded="true"]::after {
  content: '−';
  transform: rotate(180deg);
}
.footer-accordion-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.footer-accordion-content.open {
  max-height: 500px;
  padding-bottom: 15px;
}

@media (max-width: 1023px) {
  .nav-btn:not(.join-beta-btn) {
    display: none !important;
  }
  .mobile-menu-btn {
    display: block;
  }
  .footer-links-group {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .footer-col-title {
    display: none !important;
  }
  .footer-accordion-btn {
    display: flex;
  }
}
@media (min-width: 1024px) {
  .footer-accordion-btn {
    display: none;
  }
  .footer-accordion-content {
    max-height: none !important;
  }
}

/* ==========================================================================
   PHASE 3 & 4: TECHNICAL CONTENT & RESPONSIVE ARCHITECTURE
   ========================================================================== */

/* Phase 3: Master Templates
   :where() keeps this a zero-specificity DEFAULT. In the production build Vite
   moves this bundled stylesheet AFTER each page's own \3c style>, so a plain
   .article-container rule here silently overrode every insight article's own
   width (1200px -> 800px) on the live site while localhost looked right. */
:where(.article-container) {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--mobile-padding, 20px);
}
.article-header {
  margin-bottom: var(--gap-lg, 40px);
}

/* Phase 4: Code Block Protection */
pre, .code-block-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #1a1a1a;
  padding: 15px;
  border-radius: 8px;
  color: #eaeaea;
}
p > code, li > code, a > code {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  word-break: break-word;
}

/* Phase 4: Responsive Tables */
.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
  border-radius: 12px;
}
.table-responsive-wrapper table {
  min-width: 600px; /* Forces scroll on mobile instead of squishing text */
  width: 100%;
}
/* Sticky first column for context */
.table-responsive-wrapper th:first-child, 
.table-responsive-wrapper td:first-child {
  position: sticky;
  left: 0;
  background: #fff; /* Match the wrapper background */
  z-index: 10;
  box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* Phase 4: Diagram Architecture */
.diagram-type-a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
@media (max-width: 767px) {
  .diagram-type-a {
    flex-direction: column;
  }
  .diagram-type-a .diagram-arrow {
    transform: rotate(90deg); /* Point down instead of right */
  }
}
.diagram-type-b {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  padding-bottom: 20px;
}

/* ==========================================================================
   PHASE 5: HOMEPAGE BESPOKE REFACTORING
   ========================================================================== */
.conclusion-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
@media (max-width: 767px) {
  .conclusion-banner {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
  }
}

.cta-grid-cards {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .cta-grid-cards {
    flex-direction: column;
    width: 100%;
  }
  .cta-grid-cards > div {
    width: 100% !important;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .dark-zone {
    padding: var(--mobile-padding, 20px) !important;
  }
}

/* ==========================================================================
   PHASE 6: QA & OVERFLOW PATCHES
   ========================================================================== */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 25px;
}
@media (max-width: 767px) {
  .capability-grid {
    grid-template-columns: 1fr;
  }
}

.marketing-section, .impact-section, .opsonance-footer {
  box-sizing: border-box;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ==========================================================================
   PHASE 7: GLOBAL PADDING & FLOWCHART LAYOUT
   ========================================================================== */
@media (max-width: 1023px) {
  .header-nav {
    justify-content: flex-end; /* Hamburger on the right */
  }
  .nav-btn.join-beta-btn {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* Flowchart vertical stacking */
  .flowchart-container > div {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .flowchart-container [style*="rotate(-25deg)"], 
  .flowchart-container [style*="rotate(25deg)"] {
    transform: rotate(90deg) !important;
    margin: 5px 0 !important;
  }
  .bottom-path-flow {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .bottom-path-flow [style*="font-size: 1.2rem"] {
    transform: rotate(90deg) !important;
  }
  
  /* Global padding normalization */
  .problem-section, .adaptive-security-block, [style*="padding: 0 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hero-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .dark-zone {
    min-width: 0 !important;
  }
}

/* ==========================================================================
   PHASE 7B: QA ITERATION (Arrows, Navbar, Padding)
   ========================================================================== */
@media (max-width: 1023px) {
  /* Nuke all nav buttons on mobile */
  .header-nav .nav-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

@media (max-width: 767px) {
  /* Force vertical flowchart */
  .flowchart-container > div {
    flex-direction: column !important;
    align-items: center !important;
  }
  .flowchart-container .flowchart-arrow {
    transform: rotate(90deg) !important;
    margin: 10px 0 !important;
  }
  
  /* The branch container */
  .flowchart-container > div > div:nth-child(4) {
    flex-direction: column !important;
  }
  
  /* Top path inner flex */
  .flowchart-container > div > div:nth-child(4) > div:nth-child(1) {
    flex-direction: column !important;
  }
  
  /* Bottom path inner flex */
  .bottom-path-flow {
    flex-direction: column !important;
  }
  
  /* Global padding brute force */
  .flowchart-container,
  .problem-section,
  .adaptive-security-block,
  .impact-section,
  .hero-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   PHASE 7C: BULLETPROOF MOBILE FIXES
   ========================================================================== */
@media (max-width: 767px) {
  .mobile-flow-stack {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .flowchart-arrow {
    transform: rotate(90deg) !important;
    margin: 10px auto !important;
    display: block !important;
  }
  
  /* Bulletproof global padding */
  .opsonance-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  body {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }
  .marketing-section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .hero-section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ==========================================================================
   PHASE 8: MENU & LOGIC REFACTOR
   ========================================================================== */
.mobile-drawer-section {
  margin-bottom: 14px;
  width: 100%;
}
.mobile-drawer-title {
  font-family: 'Space Grotesk', sans-serif;
  color: #ff6600;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 6px;
}
.mobile-drawer-link {
  font-size: 1.05rem !important;
  padding: 6px 0 !important;
  display: block;
}
.mobile-drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
  margin-top: 4px;
  padding: 14px 24px;
  background: #ff6600;
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(255,102,0,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.mobile-drawer-cta:hover,
.mobile-drawer-cta:focus-visible {
  background: #ff7a1a;
  box-shadow: 0 12px 30px rgba(255,102,0,0.45);
  transform: translateY(-1px);
}
.mobile-drawer-cta:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(255,102,0,0.3);
}

@media (max-width: 767px) {
  /* Fix Velocity Gap squishing */
  .velocity-gap-container {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .velocity-gap-container > div {
    min-width: 0 !important;
    width: 100% !important;
  }
  
  /* Stack the AI Model flow */
  .ai-model-flow {
    flex-direction: column !important;
    min-width: 0 !important;
    gap: 15px !important;
  }
  .ai-model-flow > div {
    width: 100%;
    text-align: center;
  }
  /* The flowchart arrows inside ai-model-flow are already rotated by Phase 7c, 
     which is exactly what we want now that it's a vertical column! */
}

/* ==========================================================================
   PHASE 9: POINTER EVENTS FIX
   ========================================================================== */
.mobile-drawer {
  pointer-events: auto !important;
}
.mobile-drawer-link {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.mobile-drawer-close {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ==========================================================================
   PHASE 9B: ULTIMATE Z-INDEX & POINTER EVENTS FIX
   ========================================================================== */
#app {
  pointer-events: none !important;
  z-index: -1 !important;
}

.mobile-drawer {
  pointer-events: auto !important;
  z-index: 99999 !important;
}

.mobile-drawer * {
  pointer-events: auto !important;
}

.mobile-drawer-close, .mobile-drawer-link {
  cursor: pointer !important;
}

@media (max-width: 1023px) {
  .global-nav-links {
    display: none !important;
  }
  .global-nav {
    padding: 20px 20px 0 20px !important;
    top: 20px !important;
  }
}

/* ==========================================================================


/* ==========================================================================
   MOBILE INLINE-STYLE OVERRIDES (The Definitive Fix)
   ========================================================================== */
@media (max-width: 1023px) {
  /* Neutralize all desktop bleeding margins */
  div[style*="-75px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Neutralize all desktop flex min-widths so they can wrap/squish */
  div[style*="min-width"] {
    min-width: 0 !important;
  }
  
  /* Ensure the conclusion banner wrapper loses its negative margin shorthand */
  .conclusion-banner-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* For elements that had inline flex-direction: row, force column */
  .ai-model-flow {
    flex-direction: column !important;
  }
}

/* Also ensure flowchart width constraints don't break mobile */
@media (max-width: 767px) {
  div[style*="min-width: 950px"] {
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* Force structural rows to stack on mobile */
@media (max-width: 1023px) {
  .responsive-stack {
    flex-direction: column !important;
  }
  .responsive-stack > div {
    width: 100% !important; /* Force children to take full width instead of squishing */
  }
  
  .responsive-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Rotate arrows for stacked elements on mobile */
@media (max-width: 1023px) {
  .flowchart-arrow {
    transform: rotate(90deg) !important;
    display: block !important;
    margin: 5px auto !important;
    text-align: center;
  }
}

@media (max-width: 1023px) {
  .fork-arrow-top, .fork-arrow-bottom {
    transform: rotate(90deg) !important;
    display: block !important;
    margin: 10px auto !important;
  }
  .bottom-path-flow {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .bottom-path-flow > div {
    width: 100%;
  }
  /* The inline arrows in the bottom path */
  .bottom-path-flow div[style*="font-size: 1.2rem;"] {
    transform: rotate(90deg) !important;
    margin: 5px auto !important;
  }
}

/* Toggle Logic Diagrams */
.mobile-diagram { display: none !important; }
@media (max-width: 1023px) {
  .desktop-diagram { display: none !important; }
  .mobile-diagram { display: flex !important; }
  
  /* Fix Issue 1: text going off screen */
  h3[style*="nowrap"] {
    white-space: normal !important;
  }
}

/* Footer tags dot styling */
@media (max-width: 1023px) {
    .footer-dot {
        display: none !important;
    }
    .footer-text:not(:first-child)::before {
        content: "·";
        color: #ff6600;
        margin-right: 15px;
    }
}
/* Cache bust */
/* Cache bust 2 */

/* Custom Hover State for Top Navbar Dropdown Buttons (Requested by User) */
.glass-btn.nav-group:hover {
  background: rgba(0, 0, 0, 0.04) !important; /* Keep frosty background instead of orange block */
  border-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.glass-btn.nav-group:hover .nav-label {
  color: #ff6600 !important;
}
/* ==========================================================================
   site.css — shared responsive/QA fixes, loaded on every page after style.css.
   Scope: layout bugs that broke pages at mobile widths (see qa/baseline.txt):
   fixed-px diagram/card widths, an over-eager word-break rule, and an
   oversized decorative footer graphic that pushed pages into horizontal
   scroll. Nothing here touches visual language (color/type/spacing intent);
   it only makes the existing design survive a narrow viewport.
   ========================================================================== */

/* Only break inside a word when there is truly no other way to fit it —
   the previous `word-break: break-word` breaks words that would have
   wrapped fine on their own (e.g. "COVERAGE" -> "COVERA" / "GE"). */
h1, h2, h3, h4, h5, p, a, code, span, li, button {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Anything that can hold an image, table, code block or SVG must not be
   able to force the page wider than the viewport. */
img, svg, video, canvas, table, pre, iframe {
  max-width: 100%;
}

/* The ambient footer glow graphic (`.footer-glow-bg`, ~18 pages) is
   absolutely positioned at a fixed 700x700px and bleeds outside the
   footer's clipping box on phone widths. Scale it down with the viewport
   instead of clipping it purely with overflow:hidden. */
.footer-glow-bg {
  width: min(700px, 70vw);
  height: min(700px, 70vw);
  right: max(-100px, -15vw);
}
@media (max-width: 480px) {
  .footer-glow-bg {
    width: 60vw;
    height: 60vw;
    right: -10vw;
    bottom: -120px;
  }
}

/* Card grids that used a hard pixel width per card (e.g. .finale-card at
   400px on infrastructure-security.html) instead of a fluid track. */
.finale-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Tablets: two cards per row rather than one narrow column. */
@media (min-width: 641px) and (max-width: 1100px) {
  div:has(> .finale-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Narrative sections/stat rows: let long headlines and stat groups wrap
   rather than hold a wide fixed max-width on narrow screens. */
.narrative-block {
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
.narrative-text {
  max-width: min(1050px, 100%);
}

/* Legend / badge rows built from inline spans (adaptive-coverage,
   insight-04, insight-09, research stat strip): wrap instead of running
   past the viewport edge. */
.stat-box,
.legend,
.legend-row,
.badge-row {
  flex-wrap: wrap;
}

/* Generic safety net for the flex/grid rows used throughout the shared
   style sheet: once space runs out, wrap rather than overflow. Scoped to
   flex/grid containers only, so it never fights an intentional single-row
   layout on desktop widths. */
@media (max-width: 640px) {
  .stat-box,
  .diagram-row,
  .diagram-legend,
  .comparison-row,
  .flow-row,
  .tag-row {
    flex-wrap: wrap;
  }
}

/* Fluid type for the largest display headings so a long word/phrase in a
   narrow column doesn't force overflow before it gets a chance to wrap. */
.narrative-title {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
}

/* Most pages set h1/h2/h3 size per-page in their own inline \3c style> block,
   several at a fixed 3-3.5rem, which is why words like "Consolidation" or
   "Infrastructure" were splitting mid-word on a 390px phone: the word
   genuinely didn't fit, so overflow-wrap did what it's told and broke it.
   The real fix is a smaller, fluid size at that width, not more breaking.
   !important because several page-local \3c style> blocks are injected after
   this file in the document and use the same bare element selector. */
@media (max-width: 640px) {
  h1, .article-title, .hero-title {
    font-size: clamp(1.85rem, 9vw, 2.75rem) !important;
    line-height: 1.15 !important;
  }
  h2 {
    font-size: clamp(1.4rem, 7vw, 2rem) !important;
    line-height: 1.2 !important;
  }
  h3 {
    font-size: clamp(1.15rem, 5.5vw, 1.5rem) !important;
    line-height: 1.25 !important;
  }
}

/* Long inline code / pre blocks: allow wrapping instead of a hard scrollbar
   fight with the rest of the page (table wrapper already handles tables). */
pre, code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Belt-and-suspenders: nothing in the main content column should be able
   to establish a wider horizontal scroll region than the viewport. */
main {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Several article pages lay out short feature/spec lists as inline
   `style="flex:1; min-width:200px"` cards side by side. With flex-basis
   resolved from `flex:1` (0%), the browser's flex-wrap check runs before
   min-width is enforced, so on a narrow phone the two cards get squeezed
   to ~120px each instead of wrapping to their own line — and single words
   like "resources" or "bandwidth" then get hard mid-word breaks inside
   that squeezed column. Force those specific inline-flex cards to their
   own full-width row below tablet width. */
@media (max-width: 640px) {
  [style*="flex: 1"][style*="min-width"] {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
}

/* detection-and-response.html's escalation pipeline (.esc-step /
   .esc-node / .esc-content): the page's own mobile media query moves the
   node icon to position:absolute, but it still competes with the text
   card for row space, so the card's flex-shrink collapses it down to its
   own min-content width and single words like "Observe" get hard-broken.
   Stacking the icon above the text removes the competition entirely. */
@media (max-width: 900px) {
  .esc-step {
    flex-direction: column !important;
  }
  .esc-step .esc-node {
    position: static !important;
    margin: 0 0 12px 0 !important;
  }
  .esc-content {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* platform.html's cascade diagram: .c-path is a connector between fixed-
   width .c-node boxes, itself given no width. Its container centers items
   at their intrinsic size, and .c-path's only child is absolutely
   positioned (so it doesn't count toward that intrinsic size) - the
   connector collapses to ~0px and its label then has nowhere to lay out,
   breaking mid-word. Give the connector real width to lay its label in. */
.cascade-diagram .c-path {
  width: 100%;
}
.c-path-label {
  white-space: nowrap;
}

/* ai-threat-defense.html's animated status readout: the word cycling
   through NOMINAL/ELEVATED/CRITICAL is boxed to a width sized for the
   shortest state. Let it size to content instead of breaking mid-word. */
.score-text-wrapper {
  min-width: max-content;
}
.score-state {
  white-space: nowrap;
}

/* Large inline-styled stat/display spans (e.g. `style="font-size: 2.2rem"`
   headline text) used throughout the insight articles: fine on desktop,
   too wide for their column on a phone. */
@media (max-width: 640px) {
  span[style*="font-size: 2"] {
    font-size: clamp(1.3rem, 7.5vw, 2rem) !important;
  }
}

/* ---------- Nav bar corrections ----------
   The nav dropdowns (Platform / AI Security / Resources) used to be plain
   <span class="nav-label"> text inside the .glass-btn pill. Making them
   real <button class="nav-label nav-trigger"> elements for keyboard/screen
   reader access pulled in the browser's default button chrome (its own
   font, padding, border, background), which fought the pill's own font
   and sizing. Strip that chrome back to nothing so the button looks
   exactly like the plain text it replaced. */
.nav-trigger {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  font: inherit;
  font-family: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  line-height: inherit;
  cursor: pointer;
}

/* The "Join Beta" pill was previously hand-styled per page with a big
   inline `style=""` attribute (orange-tinted glass, glowing label). Now
   that it's one shared partial, that treatment belongs here instead. */
.glass-btn.nav-cta {
  /* .glass-btn.nav-cta (2 classes): on the home page main.js imports style.css, which
     lands AFTER this file, so a bare .nav-cta lost to .glass-btn's !important border/background. */
  background: rgba(255, 102, 0, 0.1) !important;
  border-color: rgba(255, 102, 0, 0.4) !important;
  text-decoration: none;
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.15) !important;
}
.nav-cta .nav-label {
  color: #ff6600;
  text-shadow: 0 0 10px rgba(255, 102, 0, 0.3);
  font-weight: 700;
}
.nav-cta:hover {
  background: rgba(255, 120, 0, 0.6) !important;
}
.nav-cta:hover .nav-label {
  color: #fff;
  text-shadow: none;
}

/* Skip-to-content link: meant to be invisible until a keyboard user tabs
   to it, not a permanent link sitting in the corner of every page. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 10001;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
}

/* ==========================================================================
   Insights + Research articles (and their two index pages): small-screen
   responsiveness. Scoped to <main class="doc-responsive">, which only those
   32 pages carry, and only inside media queries — desktop is untouched.
   Most diagrams in these articles are hand-built with inline styles, so the
   rules below target the recurring inline patterns (fixed-height hero SVGs,
   auto-fit grids with 280–320px minimums, flex chains with flex:1 boxes,
   fixed-width labels, and 30–80px desktop padding stacked 2–3 boxes deep).
   ========================================================================== */
/* insights.html "Deep Dive" band: full-bleed via left:50% + margin-left:-50vw,
   but its parent is a centered flex column, so it was shifted twice and hung
   half off-screen at every width. The flex centering alone already makes a
   100vw child full-bleed. */
.doc-responsive [style*="width: 100vw"][style*="margin-left: -50vw"] { left: 0 !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }

@media (max-width: 900px) {
  /* Hero diagram: the SVG is 1200x450 (8:3) in a fixed 450px box, so on a
     phone it shrank to a thin strip floating in empty black. Size the box to
     the drawing instead. */
  .doc-responsive .article-hero-graphic { height: auto !important; aspect-ratio: 8 / 3; }
  .doc-responsive .delta-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .doc-responsive .delta-grid > :nth-child(2) { justify-self: center; transform: rotate(90deg); }
  .doc-responsive .comparison-grid { grid-template-columns: 1fr !important; }
  /* HTML axis labels overlaid on a scaled SVG chart (insight-13 hero). */
  .doc-responsive .article-hero-graphic .axis-label { font-size: 0.55rem !important; letter-spacing: 1px !important; white-space: nowrap; }
  .doc-responsive .article-hero-graphic .x-axis { bottom: 6px !important; right: 12px !important; }
  .doc-responsive .article-hero-graphic .y-axis { left: 10px !important; top: 4px !important; font-size: 0.38rem !important; letter-spacing: 0 !important; }
}

@media (max-width: 640px) {
  /* Research template never got the earlier safety net (it targeted
     .article-body; research pages use .report-body / .report-header). */
  .doc-responsive .report-body *,
  .doc-responsive .report-header * { max-width: 100% !important; }
  .doc-responsive .report-body { padding: 0 !important; }

  /* Multi-column card grids -> one column (a 280–320px minimum column
     can't fit inside a ~300px article column). Small 120px tiles stay. */
  .doc-responsive [style*="grid-template-columns: repeat(auto-fit, minmax("]:not([style*="minmax(120px"]),
  .doc-responsive [style*="grid-template-columns: repeat(2, 1fr)"],
  .doc-responsive .research-grid { grid-template-columns: 1fr !important; }
  .doc-responsive .casino-grid { gap: 3px !important; padding: 14px !important; }

  /* Side-by-side columns with desktop min-widths (300–500px) -> stack. */
  .doc-responsive [style*="min-width: 200px"],
  .doc-responsive [style*="min-width: 250px"],
  .doc-responsive [style*="min-width: 300px"],
  .doc-responsive [style*="min-width: 350px"],
  .doc-responsive [style*="min-width: 400px"],
  .doc-responsive [style*="min-width: 500px"] { min-width: 0 !important; flex: 1 1 100% !important; }

  /* Horizontal diagram chains (A -> B -> C): let them wrap instead of
     clipping, and let flex:1 boxes size to their content so wrapping can
     actually happen (flex:1 has a 0 basis and never wraps). */
  .doc-responsive .article-body div[style*="display: flex"]:not([style*="column"]),
  .doc-responsive .report-body div[style*="display: flex"]:not([style*="column"]),
  .doc-responsive .control-loop { flex-wrap: wrap !important; row-gap: 12px; }
  .doc-responsive .article-body div[style*="display: flex"]:not([style*="column"]) > [style*="flex: 1;"],
  .doc-responsive .report-body div[style*="display: flex"]:not([style*="column"]) > [style*="flex: 1;"] { flex: 1 1 auto !important; }
  .doc-responsive .control-loop { justify-content: center !important; }
  /* Right-aligned fixed-width row labels ("runc expects:") -> own line. */
  .doc-responsive [style*="text-align: right"][style*="width: 1"] { width: 100% !important; text-align: left !important; }
  .doc-responsive .evo-box { width: 100% !important; }

  /* Research header metadata table: label above value. */
  .doc-responsive .report-header div[style*="display: flex; gap: 20px"] { flex-direction: column; gap: 2px !important; }
  .doc-responsive .report-header div[style*="width: 140px"] { width: auto !important; }

  /* Desktop padding stacks 2–3 boxes deep and squeezed text to ~80px. */
  .doc-responsive [style*="padding: 30px"] { padding: 20px !important; }
  .doc-responsive [style*="padding: 40px"] { padding: 22px 18px !important; }
  .doc-responsive [style*="padding: 50px"],
  .doc-responsive [style*="padding: 60px"],
  .doc-responsive [style*="padding: 80px 60px"] { padding: 28px 20px !important; }
  .doc-responsive .blockquote { padding: 20px 22px !important; }
  .doc-responsive .callout-box { padding: 20px !important; }
  .doc-responsive .diagram-box { padding: 24px 16px !important; }
  .doc-responsive .assumption-card,
  .doc-responsive .delta-box,
  .doc-responsive .control-loop { padding: 24px 18px !important; }
  .doc-responsive .comparison-col,
  .doc-responsive .stat-card,
  .doc-responsive .research-card { padding: 20px !important; }
  .doc-responsive .heatmap-row { padding: 14px 16px !important; }
  .doc-responsive .thesis-grid > div { padding: 12px 12px !important; font-size: 0.85rem !important; }

  .doc-responsive .visual-block,
  .doc-responsive .visual-dark-block { padding: 26px 18px !important; }
  /* Tree diagrams whose columns must stay side by side (deep-dive's
     Global -> Synapse -> Sentinels graph): tighten instead of wrapping. */
  .doc-responsive .article-body .dist-graph div[style*="display: flex"]:not([style*="column"]) { flex-wrap: nowrap !important; gap: 6px !important; justify-content: center; }
  .doc-responsive .article-body .dist-graph div[style*="display: flex"] > div:not([style*="width: 2px"]) { padding-left: 8px !important; padding-right: 8px !important; font-size: 0.68rem !important; }
  .doc-responsive .dist-graph > div:first-child { padding: 12px 18px !important; }
  /* Letter-spaced monospace timelines (A ─ B ─ C ...): scale the type down
     so each line stays on one line and the columns stay aligned. */
  .doc-responsive [style*="font-family: monospace; font-size: 1.5rem"] { font-size: 0.85rem !important; gap: 20px !important; }
  .doc-responsive [style*="letter-spacing: 6px"] { letter-spacing: 2px !important; white-space: nowrap; }

  /* ASCII/box-character diagrams (already horizontally scrollable by
     design): never wrap their rows, which would break the alignment;
     shrink the type so they fit or barely scroll. */
  .doc-responsive [style*="monospace"][style*="white-space: nowrap"] { font-size: 0.7rem !important; }
  .doc-responsive .article-body [style*="white-space: nowrap"] div[style*="display: flex"]:not([style*="column"]) { flex-wrap: nowrap !important; }
  .doc-responsive [style*="white-space: nowrap"] span[style*="width: 120px"] { width: 96px !important; flex-shrink: 0; }
  .doc-responsive [style*="white-space: nowrap"] [style*="margin-left: 170px"] { margin-left: 40px !important; }
  /* Narrow fixed-width tree branches whose pills are wider than 120px. */
  .doc-responsive [style*="flex-direction: column"][style*="width: 120px"] { width: auto !important; }
  /* Side labels pinned outside their box (insight-08 enforcement line). */
  .doc-responsive [style*="right: -150px"] { right: 0 !important; top: -20px !important; white-space: nowrap; font-size: 0.7rem !important; }
  .doc-responsive [style*="background: #1a1a1a"][style*="font-family: monospace"] { overflow-x: auto; font-size: 0.64rem !important; }
  .doc-responsive [style*="background: #1a1a1a"][style*="font-family: monospace"] > div { white-space: nowrap; }

  .doc-responsive .article-meta { flex-wrap: wrap; row-gap: 6px; }

  /* Long unbroken identifiers (CVE lists, npm package names, paths). */
  .doc-responsive code,
  .doc-responsive [style*="monospace"] { overflow-wrap: anywhere; }
}

/* Standard visually-hidden utility: keeps content available to screen
   readers (e.g. the footer newsletter label) without showing it visually. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* .card-grid instances sometimes carry an inline grid-template-columns
   override (e.g. "1fr 1fr") for desktop layout. Grid items default to
   min-width: auto, so that override can force the grid wider than its
   container on narrow screens instead of shrinking, pushing a column off
   the right edge. Stack to one column below tablet width, where a fixed
   multi-column split never has room anyway. */
@media (max-width: 700px) {
  .card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* .comparison-grid (Legacy vs. Opsonance style comparisons) has no
   built-in mobile breakpoint, so its 1fr 1fr columns blow out past the
   viewport on phones the same way .card-grid did above. Stack it too. */
@media (max-width: 700px) {
  .comparison-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Footer: tablet layout (601–1279px) ----------
   Previously this range fell into a 2-column grid where the brand sat alone
   top-left, the link accordions spanned the full width, and the newsletter
   landed half-width in a third row, leaving empty holes on tablets.
   Tablet: brand | newsletter on top, the three link columns open below.
   Phones (<=600px) keep the single-column accordion stack. */
@media (min-width: 601px) and (max-width: 1279px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brand contact" "links links";
    gap: 36px 48px;
  }
  .footer-brand { grid-area: brand; }
  .footer-contact { grid-area: contact; }
  .footer-links-group {
    grid-area: links;
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 32px !important;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer-link-col .footer-col-title,
  .footer-col-title--always { display: block !important; margin-bottom: 16px; }
  .footer-accordion-btn { display: none !important; }
  .footer-accordion-content {
    max-height: none !important;
    overflow: visible;
    gap: 12px;
    padding-bottom: 0;
  }
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* Footer wordmark is a link: it was rendering as a default underlined
   blue link on every page. */
.footer-logo-container,
.footer-logo-container:visited {
  color: inherit;
  text-decoration: none;
}
/* "Stay updated" heading belongs with the newsletter at every width. */
.footer-col-title--always { display: block !important; }

/* ---------- Footer: phones (<=600px) ----------
   A later bare `.footer-links-group { display: contents }` rule in style.css
   beat the media-query layout, so each accordion row became its own grid row
   separated by the 40px grid gap. Keep the three accordions as one tight
   group, and stop the phone h2 upscaling from enlarging footer headings. */
@media (max-width: 600px) {
  .footer-links-group {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
  }
  .footer-link-col { gap: 0; }
  .footer-content { gap: 32px; }
}
.opsonance-footer h2.footer-col-title {
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
}

/* Desktop footer: the link lists had no spacing between links. */
@media (min-width: 1280px) {
  .footer-accordion-content { gap: 12px; }
}

/* ---------- Opsonance AI: attack-chain loop (ai-threat-defense.html) ----------
   A 6-step row, a turn arrow, then a 5-step row running back right-to-left:
   ~1250px wide at every screen size. Below 1300px the snake is rotated 90deg
   (first leg down the left, turn right, second leg up the right), which keeps
   the reading path. On phones it becomes one column in flow order. */
@media (max-width: 1299px) {
  .attack-loop {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    column-gap: 14px;
    width: min(100%, 580px) !important;
    padding: 28px !important;
    overflow: visible !important;
  }
  .attack-loop-row {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  .attack-loop > .attack-loop-row:first-of-type { grid-column: 1; grid-row: 1; }
  .attack-loop-turn { grid-column: 2; grid-row: 1; width: auto !important; margin: 0 !important; align-items: flex-end; justify-content: center !important; padding-bottom: 12px; }
  .attack-loop-row--back { grid-column: 3; grid-row: 1; justify-content: flex-end !important; }
  .attack-loop .timeline-step { width: 100% !important; min-height: 48px; }
  .attack-loop .timeline-arrow { width: auto !important; text-align: center; line-height: 1; }
  .attack-loop-row .timeline-arrow { transform: rotate(90deg) !important; }
  .attack-loop-row--back .timeline-arrow { transform: rotate(-90deg) !important; }
  .attack-loop-turn .timeline-arrow { transform: none !important; align-self: flex-end; }
}
@media (max-width: 560px) {
  .attack-loop {
    grid-template-columns: minmax(0, 1fr);
    width: 100% !important;
    padding: 20px !important;
  }
  .attack-loop > .attack-loop-row:first-of-type { grid-column: 1; grid-row: 1; }
  .attack-loop-turn { grid-column: 1; grid-row: 2; padding: 6px 0 !important; align-items: center; }
  .attack-loop-turn .timeline-arrow { align-self: center; }
  .attack-loop-row--back { grid-column: 1; grid-row: 3; flex-direction: column-reverse !important; }
  .attack-loop-turn .timeline-arrow,
  .attack-loop-row--back .timeline-arrow { transform: rotate(90deg) !important; }
  .attack-loop .timeline-step { max-width: 280px; margin: 0 auto; }
}

/* ---------- Opsonance AI: "The Context Gap" bento ----------
   Fixed 2 columns + a 4-up row of reasoning cards + a side-by-side verdict
   banner; none of it could shrink below ~600px. */
@media (max-width: 1100px) {
  .context-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .context-gap { grid-template-columns: minmax(0, 1fr) !important; }
  .context-verdict {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 20px;
    padding: 40px 32px !important;
  }
  .context-verdict > div:last-child { text-align: left !important; max-width: none !important; }
}
@media (max-width: 560px) {
  .context-reasons { grid-template-columns: minmax(0, 1fr) !important; }
  .context-gap > div:not(.context-reasons),
  .context-reasons > div { padding: 28px 24px !important; }
  .context-verdict-word { font-size: clamp(2.6rem, 14vw, 4.5rem) !important; letter-spacing: 2px !important; }
}

/* Inline icons inside flex rows were being squeezed to zero width on
   narrow screens (e.g. the PERMITS check marks on Opsonance AI). */
[style*="display: flex"] > svg,
[style*="display:flex"] > svg { flex-shrink: 0; }

/* ---------- Infrastructure Security: AI control plane diagram ----------
   40px panel padding + a 40px gap between the two cluster boxes left the
   GPU/GPU/CPU chips no room on phones, so both clusters spilled out. */
@media (max-width: 1023px) {
  div:has(> .network-diagram) { padding: 24px 16px !important; }
  .network-diagram > div[style*="gap: 40px"] { gap: 12px !important; }
  .network-diagram > div[style*="gap: 40px"] > div { min-width: 0; padding: 12px 8px !important; }
  .network-diagram div[style*="gap: 8px"] { flex-wrap: wrap; gap: 6px !important; }
}

/* ---------- Adaptive Coverage: live scaling simulation ----------
   The four control cards overlay the left 420px of a 600px-tall canvas.
   On phones they covered the whole simulation and were cut off at the
   right edge. Below 900px the controls sit in normal flow above the
   simulation (2x2), and the simulation gets its own area underneath. */
@media (max-width: 900px) {
  .k8s-demo-container {
    height: auto !important;
    display: flex;
    flex-direction: column;
  }
  .k8s-hud {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    padding: 20px 20px 0;
  }
  .k8s-hud > div {
    width: auto !important;
    min-width: 0;
    padding: 14px 16px !important;
  }
  .k8s-canvas {
    position: relative !important;
    height: 360px !important;
    flex: none;
  }
}
@media (max-width: 560px) {
  .k8s-hud { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 0; gap: 10px !important; }
  .k8s-hud > div > div:first-child { font-size: 0.72rem !important; letter-spacing: 1.2px !important; }
  #hud-nodes, #hud-agents, #hud-dwell, #hud-tax { font-size: 1.7rem !important; }
  .k8s-canvas { height: 300px !important; }
}

/* Adaptive Coverage matrix cards: title + badge side by side ran out of
   room on small phones and the badge was clipped. */
@media (max-width: 480px) {
  .matrix-header { flex-wrap: wrap; gap: 8px; }
}

/* ---------- Platform: Synapse hot/cold diagram + Nekron synthesis stack ----------
   Dark diagram panels keep 40px padding at every width; on phones the two
   120px Sentinels/Special Forces boxes no longer fit, and the top layer of
   the synthesis stack (scaled to 110%) poked out of its panel. */
@media (max-width: 700px) {
  div:has(> .hot-cold-diagram),
  div:has(> .synthesis-pipeline) { padding: 28px 18px !important; }
  .hot-cold-diagram div[style*="gap: 20px"] { gap: 10px !important; width: 100%; }
  .hot-cold-diagram div[style*="gap: 20px"] > .hcd-box { width: auto !important; flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
  .hot-cold-diagram .hcd-box { max-width: 100%; }
}
@media (max-width: 1023px) {
  .synthesis-pipeline { padding: 0 6%; box-sizing: border-box; width: 100%; }
}

/* Two-up "diagram + text" sections (Platform and others) only require
   300px per side, so at phone-landscape / small-tablet widths they sat side
   by side and squeezed the diagram into a tall narrow strip. Stack them. */
@media (max-width: 900px) {
  .section-block div[style*="flex-wrap: wrap"] > div[style*="min-width: min(300px"] { flex-basis: 100% !important; }
  /* Same for the wider text + diagram halves (350-500px minimums) used on
     Adaptive Coverage, Infrastructure Security, Insights, Research, etc. */
  div[style*="flex-wrap: wrap"] > div[style*="min-width: min(350px"],
  div[style*="flex-wrap: wrap"] > div[style*="min-width: min(380px"],
  div[style*="flex-wrap: wrap"] > div[style*="min-width: min(400px"],
  div[style*="flex-wrap: wrap"] > div[style*="min-width: min(450px"],
  div[style*="flex-wrap: wrap"] > div[style*="min-width: min(500px"] { flex-basis: 100% !important; }
}
.syn-layer { max-width: 100%; box-sizing: border-box; }

/* Homepage "AI MODEL -> ... -> KUBERNETES" chain: one forced 950px row that
   had to be swiped sideways on every tablet. Between phone (stacked) and
   wide desktop, wrap it into centered rows instead. */
@media (min-width: 768px) and (max-width: 1199px) {
  .exec-chain {
    min-width: 0 !important;
    flex-wrap: wrap;
    row-gap: 14px !important;
    column-gap: 10px !important;
  }
}

/* Homepage on tablets: five nested wrappers (marketing-section, impact-section,
   ai-security-section, dark-zone, card) each added 38-60px per side, leaving
   ~330px for diagrams on a 768px screen. The outer section already provides
   the page gutter, so the inner wrappers drop their side padding here. */
@media (max-width: 1023px) {
  .marketing-section .impact-section,
  .marketing-section .ai-security-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .marketing-section .dark-zone {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .marketing-section .dark-zone > div[style*="padding: 40px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (min-width: 768px) {
  .exec-chain .flowchart-arrow { transform: none !important; margin: 0 !important; display: inline-block !important; }
}

/* Homepage Identity/Capability/Behavior/Context cards: auto-fit gave a
   3 + 1 orphan on tablets. Four cards read best as 2x2 there. */
@media (min-width: 481px) and (max-width: 1099px) {
  .lens-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Homepage "The attack chain is the signal" card: heading and button sit
   side by side; on phones stack them so the button keeps its width. */
@media (max-width: 640px) {
  .signal-cta {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 24px;
    padding: 36px 24px !important;
  }
}
/* Hero buttons ("Join Beta", "Start Exploring") broke onto two lines on phones. */
.btn-primary, .btn-secondary { white-space: nowrap; }
.hero-actions { flex-wrap: wrap; justify-content: center; max-width: 100%; }
@media (max-width: 400px) { .hero-actions { gap: 12px !important; } .hero-actions .btn-primary, .hero-actions .btn-secondary { padding-left: 22px; padding-right: 22px; } }

/* ---------- Platform: Multi-Tiered Architecture diagram ----------
   A 5-column grid (Nekron | link | Synapse | link | Sentinels) that below
   1000px was simply given min-width:1100px and a sideways scroll. Below
   1000px it now reads top to bottom: Opsonance Cloud (Nekron) -> links ->
   Customer Deployment (Synapse -> graphs -> Special Forces) -> links ->
   Sentinels. Same components, labels and animated connectors, rotated. */
@media (max-width: 1000px) {
  .arch-diagram-wrapper { overflow: visible !important; padding: 48px 20px 40px !important; }
  .arch-master-grid {
    min-width: 0 !important;
    max-width: 440px;
    margin: 0 auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    row-gap: 0 !important;
  }
  .arch-master-grid > * { grid-column: 1 !important; }
  .arch-master-grid .cloud-title { grid-row: 1 !important; margin: 0 0 16px !important; }
  .arch-master-grid .g-nekron { grid-row: 2 !important; }
  .arch-master-grid .g-conn1 { grid-row: 3 !important; }
  .arch-master-grid .customer-title { grid-row: 4 !important; margin: 28px 0 16px !important; }
  .arch-master-grid .g-synapse { grid-row: 5 !important; }
  .arch-master-grid .g-vconn { grid-row: 6 !important; height: 64px !important; }
  .arch-master-grid .g-special { grid-row: 7 !important; }
  .arch-master-grid .g-sfpill { grid-row: 8 !important; }
  .arch-master-grid .lbl-control { grid-row: 9 !important; margin-top: 14px !important; }
  .arch-master-grid .g-conn2 { grid-row: 10 !important; }
  .arch-master-grid .g-sentinels { grid-row: 11 !important; }
  .arch-master-grid .lbl-nodes { grid-row: 12 !important; border-left: none !important; padding-left: 0 !important; margin-top: 14px !important; }
  .arch-master-grid .customer-bg { grid-row: 4 / 13 !important; margin: -14px 0 -18px !important; }
  .arch-master-grid .g-synapse, .arch-master-grid .g-special, .arch-master-grid .g-sentinels,
  .arch-master-grid .g-vconn, .arch-master-grid .g-sfpill, .arch-master-grid .g-conn2 {
    margin-left: 14px !important; margin-right: 14px !important; width: auto !important;
  }
  .arch-master-grid .g-desc { grid-row: 13 !important; margin-top: 40px !important; padding-right: 0 !important; transform: none !important; font-size: 0.95rem; }
  .arch-master-grid .node-card { height: auto; }

  /* horizontal links -> vertical links */
  .g-conn1, .g-conn2 {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 96px !important;
    height: 104px;
    padding: 0 !important;
  }
  .g-conn1 .h-line, .g-conn2 .h-line { width: 2px !important; height: 100% !important; }
  .g-conn1 .h-line.march-r, .g-conn2 .h-line.march-r {
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 50%, transparent 50%) !important;
    background-size: 100% 15px !important;
    animation: march-v 1s linear infinite !important;
  }
  .g-conn1 .h-line.march-l, .g-conn2 .h-line.march-l {
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 50%, transparent 50%) !important;
    background-size: 100% 15px !important;
    animation: march-v-up 1s linear infinite !important;
  }
  .g-conn1 .particle, .g-conn2 .particle { display: none; }
  .g-conn1 .connector-label, .g-conn2 .connector-label { top: 50% !important; bottom: auto !important; }
  .g-conn1 .lbl-top, .g-conn2 .lbl-top { left: auto !important; right: 12px; transform: translateY(-50%) !important; }
  .g-conn1 .lbl-bottom, .g-conn2 .lbl-bottom { left: 12px !important; transform: translateY(-50%) !important; }

  /* Special Forces pill: drop the elbow connector drawn for the grid */
  .g-sfpill { height: auto !important; display: flex; justify-content: center; margin-top: 16px; }
  .g-sfpill > .node-card { position: static !important; transform: none !important; width: auto !important; }
  .g-sfpill > .node-card > div { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g-conn1 .h-line, .g-conn2 .h-line { animation: none !important; }
}

/* ---------- Agentic Security: comparison panes ----------
   The desktop 3-column layout forces `.graph-pane { flex: 1 1 0 !important }`.
   Below 1200px the container becomes a column, where a zero flex-basis plus
   overflow:hidden collapsed every pane to ~60px: the diagrams disappeared
   on all tablets and phones. Size panes by their content when stacked. */
@media (max-width: 1200px) {
  .graph-comparison-container > .graph-pane,
  .graph-comparison-container > * { flex: 0 0 auto !important; }
}
/* Same collapse on the Intent Drift and Collective Memory diagrams
   (flex: 1.3 1 0% inside a column on narrower screens). */
.drift-graph-container, .memory-graph-container { flex-basis: auto !important; }
/* Their contents are absolutely positioned (so they have no natural
   height); side by side they borrowed the text column's height. Stacked,
   give them the shape they have on desktop. */
.drift-graph-container { min-height: min(420px, 75vw); }
.memory-graph-container { min-height: min(440px, 85vw); }
@media (max-width: 480px) {
  .memory-graph-container .substrate-core { transform: scale(0.72); }
}

/* ---------- Research: threat report list ----------
   Five fixed columns per row squeezed the title and summary on tablets.
   Below 1000px the category/date line moves under the summary. */
@media (max-width: 1000px) {
  #threat-archive-container .research-card {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 22px 24px !important;
  }
  #threat-archive-container .research-card > div:last-child {
    gap: 16px !important;
    padding-left: 90px;
  }
  #threat-archive-container .research-card > div:last-child > div:first-child { width: auto !important; }
  #threat-archive-container .research-card > div:last-child > div:nth-child(2) { width: auto !important; text-align: left !important; }
  #threat-archive-container .research-card > div:last-child > div:last-child { margin-left: auto; }
  #threat-archive-container .research-card > div:first-child > div:first-child { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 560px) {
  #threat-archive-container .research-card > div:first-child { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  #threat-archive-container .research-card > div:last-child { padding-left: 0; }
}

/* ==========================================================================
   Beta Signup Modal
   ========================================================================== */
.beta-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);

  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.beta-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.beta-modal-container {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 24px;
  width: 90%;
  max-width: 500px;
  padding: 40px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.beta-modal-overlay.open .beta-modal-container {
  transform: translateY(0) scale(1);
}

.beta-modal-close {
  position: absolute;
  top: 24px; right: 24px;
  background: none; border: none;
  cursor: pointer;
  color: #999;
  padding: 8px;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
  display: flex; align-items: center; justify-content: center;
}

.beta-modal-close:hover {
  background: rgba(0,0,0,0.05);
  color: #111;
}

.beta-modal-header {
  margin-bottom: 32px;
}

.beta-modal-header h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #111;
}

.beta-modal-header p {
  color: #666;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.beta-modal-form .form-group {
  margin-bottom: 24px;
}

.beta-modal-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.beta-modal-form input,
.beta-modal-form select {
  width: 100%;
  padding: 14px 16px;
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1rem;
  color: #111;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.beta-modal-form select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23111111%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px top 50%;
  background-size: 12px auto;
}

.beta-modal-form input:focus,
.beta-modal-form select:focus {
  outline: none;
  border-color: #ff6600;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,102,0,0.1);
}

.beta-modal-form input[aria-invalid="true"] {
  border-color: #ff4444;
  background: rgba(255,68,68,0.05);
}

.beta-modal-submit {
  width: 100%;
  padding: 16px;
  background: #ff6600;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.beta-modal-submit:hover {
  background: #e65c00;
  transform: translateY(-2px);
}

.beta-modal-submit:active {
  transform: translateY(0);
}

.beta-modal-submit[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.beta-form-status {
  margin-top: 16px;
  font-size: 0.95rem;
  text-align: center;
  min-height: 20px;
}
.beta-form-status[data-kind="error"] { color: #ff4444; }
.beta-form-status[data-kind="success"] { color: #00C851; font-weight: 600; }

@media (max-width: 600px) {
  .beta-modal-container { padding: 30px 20px; }
}

/* "The attack chain is the signal" READ MORE button: never wider than
   its card on the narrowest phones. */
@media (max-width: 640px) {
  .signal-cta a {
    white-space: normal !important;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.05rem !important;
    padding: 14px 24px !important;
  }
}

/* ---------- Homepage: "Separate security presence from security intensity"
   flow (Infrastructure -> Risk Assessment -> Normal / Anomaly branches) ----
   Its row needs ~825px. On iPad landscape (1024-1299px) the horizontal
   version was still used but wrapped, dropping the branches under the first
   two boxes and breaking the left-to-right logic. Keep it on one line and
   tighten it slightly instead. Below 1024px the vertical version takes over. */
@media (min-width: 1024px) and (max-width: 1299px) {
  .flowchart-container:has(> .presence-flow) { padding: 32px 22px !important; }
  .presence-flow { flex-wrap: nowrap !important; gap: 8px !important; }
  .presence-flow .desktop-diagram div { flex-wrap: nowrap !important; }
  .presence-flow .desktop-diagram > div { gap: 6px !important; }
  .presence-flow [style*="padding: 15px 20px"] { padding: 11px 13px !important; }
  .presence-flow h4 { font-size: 0.92rem !important; white-space: nowrap; }
  .presence-flow p { font-size: 0.72rem !important; white-space: nowrap; }
  .presence-flow .flowchart-arrow, .presence-flow [style*="font-size: 1.5rem"] { font-size: 1.2rem !important; }
}
@media (min-width: 1024px) and (max-width: 1139px) {
  .presence-flow { zoom: 0.92; }
}

/* ---------- Adaptive Coverage: "Risk moves. Coverage should too." ----------
   Replaces the plain caption card. Same visual family as the page's other
   dark chart panels (The Scaling Curve, Risk Flow): #111 panel, 30px radius,
   white spaced heading, orange = Opsonance, red = risk, grey = static. */
.coverage-panel {
  background: #111;
  color: #fff;
  border-radius: 30px;
  padding: 36px 36px 30px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: 'Space Grotesk', sans-serif;
}
.coverage-panel-title {
  color: #fff;
  text-align: center;
  margin: 0;
  font-size: 1.2rem !important;
  letter-spacing: 2px;
  line-height: 1.3 !important;
}
.coverage-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #bbb;
}
.coverage-legend li { display: inline-flex; align-items: center; gap: 8px; }
.coverage-legend .swatch { width: 22px; height: 0; border-top: 3px solid; display: inline-block; }
.coverage-legend .swatch-risk { border-color: #ff4444; }
.coverage-legend .swatch-static { border-top-style: dashed; border-color: #bbb; }
.coverage-legend .swatch-ops { border-color: #ff6600; box-shadow: 0 0 8px rgba(255, 102, 0, 0.8); }
.coverage-panel-caption {
  text-align: center;
  color: #aaa;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .coverage-panel { padding: 26px 18px 22px; border-radius: 24px; gap: 18px; }
  .coverage-panel-title { font-size: 1rem !important; letter-spacing: 1.5px; }
  .coverage-legend { font-size: 0.78rem; gap: 8px 14px; }
  .coverage-panel-caption { font-size: 0.92rem; }
}
.cov-chart--compact { display: none !important; }
@media (max-width: 560px) {
  .cov-chart--wide { display: none !important; }
  .cov-chart--compact { display: block !important; }
  .coverage-panel-title { font-size: 0.95rem !important; letter-spacing: 1px; }
}
.coverage-panel-caption { text-wrap: balance; }
.coverage-panel-title { text-wrap: balance; }

/* ---------- Footer: desktop layout (>=1280px) ----------
   The base grid had six columns for five items, so the last column sat
   empty and everything bunched to the left; the copyright bar spanned the
   full width while the content above was capped, so edges never lined up.
   Five real columns, one shared max-width for both rows. */
@media (min-width: 1280px) {
  .footer-content {
    max-width: 1320px;
    grid-template-columns: minmax(200px, 1.3fr) repeat(3, minmax(max-content, 1fr)) minmax(270px, 1.4fr) !important;
    column-gap: clamp(32px, 3.2vw, 56px) !important;
    row-gap: 0 !important;
  }
  .footer-link-col a { white-space: nowrap; }
  .footer-contact { justify-self: stretch; }
  .footer-contact .footer-input-wrapper { width: 100%; box-sizing: border-box; }
  .footer-tagline { max-width: 260px; }
}
.footer-bottom {
  max-width: 1320px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Footer newsletter: the status message sat inside the input's flex row,
   squeezing the input into a square and the text into a tall column.
   Put it on its own full-width line under the field. */
.footer-input-wrapper { flex-wrap: wrap; position: relative; }
.footer-input-wrapper .footer-email-input { flex: 1 1 0; min-width: 0; }
.footer-input-wrapper .form-status {
  flex: 0 0 100%;
  order: 3;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #cbd5e1;
}
.footer-input-wrapper .form-status:empty { display: none; }
.footer-input-wrapper .form-status:not(:empty) { padding: 8px 12px 6px; }
.footer-input-wrapper .form-status[data-kind="success"] { color: #4ade80; }
.footer-input-wrapper .form-status[data-kind="error"] { color: #ff7a7a; }

/* Early-access modal on short screens (phones held sideways, small laptops):
   the card is taller than the viewport, so its top and bottom were cut off
   with no way to scroll. Let the overlay scroll and align to the top. */
.beta-modal-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.beta-modal-container { margin: auto; }
@media (max-height: 760px) {
  .beta-modal-overlay { align-items: flex-start; padding: 16px 0; }
  .beta-modal-container { padding: 28px 28px 24px; }
  .beta-modal-header { margin-bottom: 20px; }
  .beta-modal-form .form-group { margin-bottom: 16px; }
}

/* --- Nav buttons: no "transparent -> frosted" flash on load ---
   .glass-btn has `transition: all`, so any style that settles after first paint
   (fonts, late CSS, scripts) animated the frost in over 0.3s. Transitions stay off
   until the page has settled (site.js adds .nav-ready), then hover effects work as before. */
html:not(.nav-ready) .glass-btn { transition: none !important; }



/* --- White cards on Adaptive Coverage and Detection & Response ---
   Their 5% border disappeared against the off-white page, so the cards had no edge.
   A subtle dark hairline defines them. (The Adaptive Coverage cards are inline-styled,
   hence !important; coloured note boxes and the black-outlined escalation steps keep
   their own borders.) */
.dr-page .dr-card-light,
.dr-page .dr-matrix-wrap,
.ac-card-light {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* --- Detection & Response: "From events to attack path" card ---
   With 7 steps and 6 arrows its natural height was ~140px taller than the text beside it,
   so the whole row grew to fit the card. Tighter spacing brings the card's natural height
   below the text column; the row's align-items:stretch then makes the card exactly as tall
   as the description, and .dr-flow (space-between) spreads the steps to fill it. */
.dr-page .dr-card-fit { padding: 30px 36px; }
.dr-page .dr-card-fit .dr-card-title-dark { margin-bottom: 16px; }
.dr-page .dr-card-fit .dr-card-caption-dark { margin-top: 16px; }
.dr-page .dr-card-fit .dr-pill { padding: 8px 18px; font-size: 0.95rem; }
.dr-page .dr-card-fit .dr-flow .dr-arrow { margin: 1px 0; font-size: 0.9rem; }
@media (max-width: 640px) {
  .dr-page .dr-card-fit { padding: 28px 20px; }
}

/* D&R "Persistent Monitoring" / "Adaptive Patrol" cards: same subtle dark edge as the
   matching Adaptive Coverage cards. Sides and bottom only, so the red/orange top stripe stays. */
.dr-page .dr-matrix {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* --- Publication dates: Insights and Research listings ---
   Grid cards show the date on the right of the READ row; the featured insight and
   the deep-dive teaser show it beside their eyebrow label. */
.insight-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.insight-date {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.insight-date-inline {
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid rgba(0, 0, 0, 0.18);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: inherit;
}
.insight-date-dark { border-left-color: rgba(255, 255, 255, 0.25); }
.tr-date { white-space: nowrap; }
@media (max-width: 560px) {
  /* The publish date ("30 JUN 2026") is wider than the old "JUN 2026"; tighten the
     category/date/arrow line so "Runtime Manipulation" stays on one line on phones. */
  #threat-archive-container .research-card > div:last-child { gap: 12px !important; }
  #threat-archive-container .research-card > div:last-child > div:first-child,
  #threat-archive-container .research-card .tr-date { font-size: 0.85rem !important; }
}
@media (max-width: 400px) {
  #threat-archive-container .research-card > div:last-child { gap: 10px !important; }
  #threat-archive-container .research-card > div:last-child > div:first-child,
  #threat-archive-container .research-card .tr-date { font-size: 0.8rem !important; }
}
@media (max-width: 374px) {
  /* Smallest phones: the whole card is the link, so drop the decorative arrow to keep the line intact. */
  #threat-archive-container .research-card > div:last-child > div:last-child { display: none; }
}

/* Article byline row (author | date): on phones the full publish date no longer fits
   beside the author, so stack them instead of squeezing both into two-line columns. */
@media (max-width: 600px) {
  .article-authors {
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px;
  }
}