/* ==========================================================================
   Monkey Engineering - Technical Blueprint Stylesheet (2026 Standards)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Blueprint Theme Color System */
  --bg-carbon: #08080c;
  --bg-grid-blue: rgba(37, 99, 235, 0.04);
  --bg-grid-major: rgba(37, 99, 235, 0.09);
  
  --blueprint-blue: #1e40af;       /* Classic Blueprint Navy */
  --electric-blue: #2563eb;        /* Electric Blueprint Blue */
  --electric-glow: rgba(37, 99, 235, 0.45);
  
  --monkey-purple: #644af1;        /* Original Monkey DNA Purple */
  --monkey-glow: rgba(100, 74, 241, 0.45);
  
  --safety-orange: #f97316;        /* Safety Orange Accent */
  --safety-glow: rgba(249, 115, 22, 0.35);
  
  --engineering-gold: #fbbf24;     /* Engineering Gold Accent */
  --gold-glow: rgba(251, 191, 36, 0.35);
  
  --emerald-green: #10b981;
  --rose-crimson: #ef4444;
  --white-clean: #f8fafc;
  --slate-dimmed: #94a3b8;
  --slate-darker: #0f172a;

  /* High-Contrast Logo Overhaul variables */
  --blueprint-white: #f1f5f9;
  --electric-silver: #e2e8f0;
  --logo-glow: rgba(37, 99, 235, 0.55);
  
  /* Modern Typography Pairing */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Animation Timers */
  --t-fast: 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  --t-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --t-shutter: 0.75s cubic-bezier(0.85, 0, 0.15, 1);
}

/* --------------------------------------------------------------------------
   Reset & Base Grid Blueprint Styling
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-carbon);
}

body {
  font-family: var(--font-body);
  color: var(--white-clean);
  background-color: var(--bg-carbon);
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Blueprint CSS Grid Background */
.blueprint-grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -20;
  background-color: var(--bg-carbon);
  background-image: 
    linear-gradient(var(--bg-grid-major) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--bg-grid-major) 1.5px, transparent 1.5px),
    linear-gradient(var(--bg-grid-blue) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid-blue) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: center center;
}

/* Subtle static SVG circuit/blueprint overlay */
.blueprint-circuit-pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -18;
  opacity: 0.15;
  filter: drop-shadow(0 0 1px var(--electric-blue));
}

/* Technical Font Helper classes */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }

/* Containers */
.header-container,
.primary-hero-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Chamfered (angled-cut) corner variables & utilities */
/* Polygon paths to slice corners */
.chamfer-clip-outer {
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.chamfer-clip-inner {
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.chamfer-clip-btn {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Technical readout helper borders */
.readout-border {
  position: relative;
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: rgba(10, 10, 15, 0.85);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 0 12px rgba(37, 99, 235, 0.05);
}

/* Technical Corner Brackets */
.corner-brackets::before,
.corner-brackets::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border-style: solid;
  border-color: var(--electric-blue);
  z-index: 10;
}
.corner-brackets::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}
.corner-brackets::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

/* Secondary opposite brackets inside custom layouts */
.secondary-brackets {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.secondary-brackets::before,
.secondary-brackets::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: var(--electric-blue);
}
.secondary-brackets::before {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0;
}
.secondary-brackets::after {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px;
}

/* --------------------------------------------------------------------------
   Header & Dynamic Match Counter
   -------------------------------------------------------------------------- */
.main-header {
  position: relative;
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  z-index: 100;
  border-bottom: 1px solid rgba(37, 99, 235, 0.15);
  background: rgba(8, 8, 12, 0.8);
  backdrop-filter: blur(12px);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mascot-v3 {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(0, 242, 255, 0.35));
  will-change: filter;
  display: inline-block;
  vertical-align: middle;
}

.logo-text {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--white-clean);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Live nodes active indicator block */
.live-nodes-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid var(--electric-blue);
  box-shadow: 0 0 12px var(--electric-glow);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.indicator-scan-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--safety-orange);
  box-shadow: 0 0 8px var(--safety-orange);
  animation: telemetryPulse 1.8s infinite ease-in-out;
}

@keyframes telemetryPulse {
  0% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.4; transform: scale(0.85); }
}

.nodes-counter-text {
  font-family: var(--font-mono);
  font-size: 0.785rem;
  font-weight: 500;
  color: var(--white-clean);
}

.nodes-counter-text span {
  color: var(--safety-orange);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Interim floating gears & mechanical banana patterns
   -------------------------------------------------------------------------- */
.blueprint-floating-assets {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -10;
  overflow: hidden;
}

.floating-gear {
  position: absolute;
  color: rgba(37, 99, 235, 0.08); /* faint blueprint color */
  animation: rotatingGear 25s infinite linear;
}

@keyframes rotatingGear {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.floating-banana-schematic {
  position: absolute;
  width: 60px;
  height: 60px;
  opacity: 0.08;
  color: var(--electric-blue);
  filter: drop-shadow(0 0 2px var(--electric-glow));
}

/* --------------------------------------------------------------------------
   Primary Hero Section & Interactive Gatekeeper Card
   -------------------------------------------------------------------------- */
.primary-hero-container {
  padding-top: 60px;
  padding-bottom: 80px;
}

.gatekeeper-layout-section {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 96px;
}

@media (max-width: 991px) {
  .gatekeeper-layout-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.intro-headline-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tag-badge-engineering {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid var(--electric-blue);
  color: var(--white-clean);
  text-transform: uppercase;
}

.main-heading-seo {
  font-family: var(--font-display);
  font-size: clamp(2.0rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white-clean);
}

.split-gradient-text {
  background: linear-gradient(135deg, var(--electric-blue) 0%, var(--monkey-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(100, 74, 241, 0.15));
}

.hero-paragraph-sub {
  color: var(--slate-dimmed);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 580px;
}

/* --------------------------------------------------------------------------
   The Gatekeeper Card Module (Technical Decryption Terminal)
   -------------------------------------------------------------------------- */
.technical-gatekeeper-card {
  position: relative;
  background: rgba(10, 11, 18, 0.92);
  border: 1px solid rgba(37, 99, 235, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  transition: all var(--t-smooth);
}

.technical-gatekeeper-card::after {
  content: "SYS_PROTOCOL_P2P";
  position: absolute;
  top: 6px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(37, 99, 235, 0.45);
  letter-spacing: 0.05em;
}

/* Activated active border on input interact */
.technical-gatekeeper-card.processing-pulse {
  border-color: var(--safety-orange);
  box-shadow: 0 0 30px var(--safety-glow);
}

.card-interior-wrapper {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-title-gate {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white-clean);
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.15);
}

/* --------------------------------------------------------------------------
   Interest input & Presets
   -------------------------------------------------------------------------- */
.manual-interest-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tag-label-lead {
  font-family: var(--font-mono);
  font-size: 0.785rem;
  font-weight: 600;
  color: var(--white-clean);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.interest-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.manual-interest-input {
  width: 100%;
  padding: 16px 54px 16px 18px;
  font-size: 0.9rem;
  font-family: var(--font-mono);
  color: var(--white-clean);
  background: rgba(4, 5, 10, 0.85);
  border: 1.5px solid rgba(37, 99, 235, 0.25);
  outline: none;
  transition: all var(--t-fast);
}

/* Blueprint active state on typing */
.manual-interest-input:focus,
.manual-interest-input.active-glow {
  border-color: var(--electric-blue);
  background: rgba(4, 5, 10, 0.95);
  box-shadow: 0 0 16px var(--electric-glow);
}

.manual-interest-input.typing-pulse {
  animation: blueprintPulse 1.2s infinite alternate ease-in-out;
}

@keyframes blueprintPulse {
  0% { box-shadow: 0 0 6px var(--electric-glow); }
  100% { box-shadow: 0 0 18px var(--electric-glow); border-color: var(--electric-blue); }
}

.char-countdown {
  position: absolute;
  right: 18px;
  font-size: 0.725rem;
  font-family: var(--font-mono);
  color: var(--electric-blue);
  user-select: none;
}

.input-instruction-sub {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--slate-dimmed);
  margin-top: 4px;
}

.presets-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clickable-preset-pill {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 12px;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.22);
  color: var(--slate-dimmed);
  cursor: pointer;
  user-select: none;
  transition: all var(--t-fast);
}

.clickable-preset-pill:hover {
  border-color: var(--electric-blue);
  color: var(--white-clean);
  background: rgba(37, 99, 235, 0.15);
}

.clickable-preset-pill.active-preset-pill {
  background: var(--electric-blue);
  border-color: var(--engineering-gold);
  color: var(--white-clean);
  box-shadow: 0 0 10px var(--electric-glow);
}

/* --------------------------------------------------------------------------
   ToS Checkbox Security Panel
   -------------------------------------------------------------------------- */
.security-clearance-panel {
  position: relative;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(15, 23, 42, 0.45);
  padding: 14px;
}

.security-clearance-panel::after {
  content: "SECURITY_CLEARANCE_REQUIRED";
  position: absolute;
  bottom: 2px;
  right: 8px;
  font-size: 0.5rem;
  font-family: var(--font-mono);
  color: var(--slate-dimmed);
  opacity: 0.4;
}

.hybrid-custom-checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.native-hidden-checkbox {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.styled-checkbox-frame {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(37, 99, 235, 0.45);
  background: rgba(4, 5, 10, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all var(--t-fast);
}

.native-hidden-checkbox:checked + .styled-checkbox-frame {
  background: var(--electric-blue);
  border-color: var(--electric-blue);
}

.native-hidden-checkbox:checked + .styled-checkbox-frame::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 9px;
  border: solid var(--white-clean);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  top: 2px;
  left: 5px;
}

.checkbox-legal-phrase {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--slate-dimmed);
  user-select: none;
  line-height: 1.4;
}

/* Warnings Bubble style */
.dynamic-warn-feedback-bubble {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  margin-top: 10px;
  border-radius: 0;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: var(--rose-crimson);
  font-size: 0.75rem;
  transition: all var(--t-smooth);
}

.dynamic-warn-feedback-bubble.active-error {
  max-height: 48px;
  opacity: 1;
  padding: 8px 12px;
}

.warn-svg-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Haptic structure shaking animation keyframe */
.gatekeeper-shake {
  animation: gateShake 0.45s ease-in-out;
}

@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-6px); }
  30%, 60%, 90% { transform: translateX(6px); }
}

/* START VIDEO CHAT BUTTON (Industrial Cyberpunk CTA) */
.primary-portal-power-button {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 16px 24px;
  border: none;
  outline: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--slate-darker);
  background: radial-gradient(circle at center, var(--engineering-gold) 20%, #d97706 100%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 15px var(--gold-glow);
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  will-change: transform, box-shadow;
  /* Breathe pulse animation */
  animation: startButtonBreathe 2.4s infinite ease-in-out;
}

@keyframes startButtonBreathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px var(--gold-glow), 0 0 0 0px rgba(251, 191, 36, 0.4);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.6), 0 0 0 10px rgba(251, 191, 36, 0);
  }
}

.primary-portal-power-button:hover {
  transform: translateY(-2px) scale(1.03);
  animation-play-state: paused;
  background: radial-gradient(circle at center, var(--safety-orange) 20%, #c2410c 100%);
  color: var(--white-clean);
  box-shadow: 0 8px 24px var(--safety-glow);
}

.primary-portal-power-button:active {
  transform: translateY(1px) scale(0.98);
}

/* Start Button Shake Animation on click error */
.button-shake {
  animation: errorButtonShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

@keyframes errorButtonShake {
  10%, 90% { transform: translate3d(-3px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Checkbox Warning Amber Flash */
.flash-warning {
  animation: checkboxWarningFlash 0.5s ease-in-out infinite alternate;
}

@keyframes checkboxWarningFlash {
  0%, 100% {
    color: var(--slate-dimmed);
    text-shadow: none;
  }
  50% {
    color: var(--engineering-gold);
    text-shadow: 0 0 8px var(--gold-glow);
  }
}

.btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: shinySlide 4s infinite linear;
}

@keyframes shinySlide {
  0% { left: -100%; }
  25%, 100% { left: 150%; }
}

.chevron-right-svg {
  width: 16px;
  height: 16px;
}

.encryption-subtext {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--electric-blue);
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Semantic Core Layout Sections (Features Grid / Comparison)
   -------------------------------------------------------------------------- */
.block-centering-header {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.sub-lead-caps {
  font-family: var(--font-mono);
  font-size: 0.725rem;
  color: var(--electric-blue);
  letter-spacing: 0.15em;
  padding: 4px 8px;
  border-bottom: 2px solid var(--electric-blue);
  text-transform: uppercase;
}

.section-title-premium {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--white-clean);
}

.section-description-text {
  color: var(--slate-dimmed);
  max-width: 680px;
  font-size: 0.95rem;
}

/* Capabilities features grid */
.capabilities-grid-section {
  margin-bottom: 112px;
}

.cards-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

@keyframes rotateBorderSweep {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.feature-lens-card.chamfer-clip-outer {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
}

/* Semi-transparent dark glass inside padding-box mask */
.feature-lens-card.chamfer-clip-outer::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: rgba(8, 8, 12, 0.65) !important;
  backdrop-filter: blur(12px);
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: background var(--t-smooth);
}

/* Running high-intensity Cyber Purple / Engineering Gold scanline beam */
.feature-lens-card.chamfer-clip-outer::after {
  content: "";
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: conic-gradient(
    from 180deg,
    transparent 60%,
    var(--monkey-purple) 75%,
    var(--engineering-gold) 90%,
    transparent 100%
  );
  animation: rotateBorderSweep 6s infinite linear;
  z-index: 0;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}

/* Ensure the card content sits above the pseudo borders */
.feature-lens-card.chamfer-clip-outer > * {
  position: relative;
  z-index: 2;
}

.feature-icon-wrapper {
  align-self: flex-start;
  padding: 10px;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid var(--electric-blue);
  color: var(--electric-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon-wrapper svg {
  width: 22px;
  height: 22px;
}

.feature-title-lead {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white-clean);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.feature-paragraph-body {
  color: var(--slate-dimmed);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Authority Content & Bento Sidebar layout
   -------------------------------------------------------------------------- */
.authority-bento-flexible {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr;
  gap: 32px;
  margin-bottom: 112px;
}

@media (max-width: 991px) {
  .authority-bento-flexible {
    grid-template-columns: 1fr;
  }
}

.authority-article-wrapper {
  padding: 40px;
}

.seo-lead-category {
  font-family: var(--font-mono);
  font-size: 0.725rem;
  color: var(--safety-orange);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-broad-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 24px;
}

.rich-typography-field {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--slate-dimmed);
  font-size: 0.95rem;
}

.rich-typography-field p {
  line-height: 1.6;
}

.rich-typography-field h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white-clean);
  font-size: 1.15rem;
  margin-top: 14px;
  border-left: 3px solid var(--electric-blue);
  padding-left: 10px;
}

.authority-aside-sidebar-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.aside-widget-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.widget-heading-lead {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white-clean);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(37, 99, 235, 0.18);
  padding-bottom: 8px;
}

.policy-list-aside {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.policy-list-aside li {
  display: flex;
  gap: 14px;
}

.step-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--safety-orange);
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.35);
  padding: 2px 6px;
  height: max-content;
}

.rule-lbl {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white-clean);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.rule-desc {
  font-size: 0.8rem;
  color: var(--slate-dimmed);
  line-height: 1.4;
}

/* Statistics node block widgets */
.spec-metrics-highlight {
  border-color: var(--electric-blue);
}

.metric-block-flex {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.single-indicator-point {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.border-top-divider {
  border-top: 1px solid rgba(37, 99, 235, 0.15);
  padding-top: 14px;
}

.metric-num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--electric-blue);
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--slate-dimmed);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Industrial Specifications Comparison Table
   -------------------------------------------------------------------------- */
.comparison-table-section {
  margin-bottom: 112px;
}

.table-outer-wrapper {
  overflow-x: auto;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 8px 0;
}

.premium-comparison-sheet {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 680px;
  background: transparent !important;
}

.premium-comparison-sheet th,
.premium-comparison-sheet td {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.15); /* Clean horizontal row divider */
}

.premium-comparison-sheet th {
  font-family: var(--font-display);
  font-size: 0.825rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--slate-dimmed);
  background: transparent !important; /* Sit completely naked */
  border-bottom: 2px solid rgba(37, 99, 235, 0.3);
}

.premium-comparison-sheet tbody tr {
  transition: background var(--t-fast);
}

.premium-comparison-sheet tbody tr:hover {
  background: rgba(37, 99, 235, 0.04) !important;
}

.category-col {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white-clean);
  width: 30%;
  text-transform: uppercase;
}

.legacy-col {
  color: var(--slate-dimmed);
  font-size: 0.85rem;
}

.premium-col {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.text-color-green { color: var(--emerald-green); }
.text-color-cyan { color: var(--electric-blue); }
.text-color-gold { color: var(--engineering-gold); }
.text-color-orange { color: var(--safety-orange); }

/* --------------------------------------------------------------------------
   FAQ Section Accordions
   -------------------------------------------------------------------------- */
.frequently-asked-accordion-section {
  margin-bottom: 96px;
}

.faq-container-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.faq-details-bubble {
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(10, 10, 15, 0.8);
  transition: border-color var(--t-smooth), background-color var(--t-smooth);
}

.faq-details-bubble[open] {
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(15, 15, 25, 0.9);
}

/* FAQ expanded panel wrapper for smooth height/opacity logic */
.faq-expanded-content-wrapper {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(-8px);
  will-change: height, opacity, transform;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* First/opened faq elements default active rule */
.faq-details-bubble[open]:not(.is-animating) .faq-expanded-content-wrapper {
  height: auto;
  opacity: 1;
  transform: translateY(0);
}

.faq-trigger-summary {
  padding: 20px 24px;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  outline: none;
  user-select: none;
}

.summary-phrase {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white-clean);
  letter-spacing: 0.02em;
}

.accordion-chevron-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--electric-blue);
  transition: transform var(--t-fast);
}

.faq-plus-svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5px;
}

.faq-details-bubble[open] .accordion-chevron-icon {
  transform: rotate(45deg);
  color: var(--safety-orange);
}

.faq-expanded-content {
  padding: 0; /* managed within parent and js offsets */
}

.faq-para {
  font-size: 0.875rem;
  color: var(--slate-dimmed);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Footer styling
   -------------------------------------------------------------------------- */
.footer-block-layout {
  border-top: 1.5px solid var(--electric-blue);
  padding: 72px 0 36px 0;
  background: rgba(6, 6, 10, 0.96);
  position: relative;
}

.footer-block-layout::after {
  content: "MONKEY_ENG_RESOURCES";
  position: absolute;
  top: 8px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(37, 99, 235, 0.3);
}

.footer-column-grid-flex {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 48px 24px;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
}

@media (max-width: 991px) {
  .footer-column-grid-flex {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .footer-column-grid-flex {
    grid-template-columns: 1fr;
  }
}

.footer-identity-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-brand-statement {
  font-size: 0.85rem;
  color: var(--slate-dimmed);
  max-width: 320px;
  line-height: 1.5;
}

.p_18_indicator {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.725rem;
  color: var(--safety-orange);
  border: 1px solid var(--safety-orange);
  padding: 2px 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.footer-links-column-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.menu-col-heading {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white-clean);
}

.nav-links-flex-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot-anchor {
  font-size: 0.8rem;
  color: var(--slate-dimmed);
  text-decoration: none;
  transition: color var(--t-fast);
}

.foot-anchor:hover {
  color: var(--safety-orange);
}

.footer-bottom-statement {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 24px 0 24px;
  border-top: 1px solid rgba(37, 99, 235, 0.12);
  font-size: 0.75rem;
  color: var(--slate-dimmed);
  text-align: center;
}

/* --------------------------------------------------------------------------
   App Shell Layout (P2P Frame Container Screen)
   -------------------------------------------------------------------------- */
#chat-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background-color: var(--bg-carbon);
  transition: opacity var(--t-smooth);
}

.concealed-view {
  display: none !important;
  opacity: 0;
}

.chat-immersive-viewport-shell {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #030305;
}

/* Slim High-Tech Top Navigation Bar */
.chat-immersive-header {
  height: 56px;
  min-height: 56px;
  background-color: #06060a;
  border-bottom: 1.5px solid rgba(0, 242, 255, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  position: relative;
}

/* Left side of header */
.chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Footer & header custom styling variations for the brand-mascot-v3 */
.brand-logo.footer-logo {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.brand-logo.footer-logo .brand-mascot-v3 {
  height: 56px !important;
  filter: drop-shadow(0 0 12px rgba(79, 70, 229, 0.45)) drop-shadow(0 0 4px rgba(0, 242, 255, 0.2));
}

.chat-brand-name-text {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--white-clean);
  display: flex;
  align-items: center;
}

/* Glowing square pixel dot */
.glowing-square-dot {
  color: var(--engineering-gold, #fbbf24);
  font-family: monospace;
  font-size: 0.8em;
  display: inline-block;
  margin: 0 0.15em;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
  animation: squareDotBreathe 2s infinite ease-in-out;
}

@keyframes squareDotBreathe {
  0%, 100% {
    text-shadow: 0 0 4px rgba(251, 191, 36, 0.5);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.9), 0 0 4px rgba(251, 191, 36, 0.6);
    transform: scale(1.1);
  }
}

/* Center of header */
.chat-header-center {
  display: flex;
  align-items: center;
  gap: 20px;
}

.secure-node-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 242, 255, 0.06);
  border: 1px solid rgba(0, 242, 255, 0.25);
  padding: 4px 10px;
  border-radius: 2px;
  font-size: 0.725rem;
  color: #00F2FF;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(0, 242, 255, 0.1);
}

.pulse-indicator-blue {
  width: 8px;
  height: 8px;
  background-color: #00F2FF;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px #00F2FF, 0 0 4px #00F2FF;
  animation: secureNodePulse 1.8s infinite ease-in-out;
}

@keyframes secureNodePulse {
  0%, 100% {
    opacity: 0.4;
    box-shadow: 0 0 4px rgba(0, 242, 255, 0.4);
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 12px #00F2FF, 0 0 4px rgba(0, 242, 255, 0.8);
    transform: scale(1.05);
  }
}

.chat-header-session-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #fbbf24;
  font-weight: 700;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.2);
  padding: 4px 10px;
  border-radius: 2px;
}

/* Right side of header */
.chat-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-header-active-tag {
  font-size: 0.75rem;
  background-color: rgba(37, 99, 235, 0.15);
  color: var(--safety-orange);
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.chat-header-op-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  height: 34px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none;
  cursor: pointer;
  transition: all var(--t-fast);
  border-radius: 2px;
}

.chat-header-op-btn .control-icon {
  width: 14px;
  height: 14px;
}

.chat-header-op-btn.primary-action-glow {
  background: var(--safety-orange);
  color: var(--white-clean);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
}

.chat-header-op-btn.primary-action-glow:hover {
  background: var(--engineering-gold);
  color: var(--slate-darker);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.7);
}

.chat-header-op-btn.danger-action-outline {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: var(--rose-crimson);
}

.chat-header-op-btn.danger-action-outline:hover {
  background: var(--rose-crimson);
  color: var(--white-clean);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

/* Immersive Frame Containers */
.immersive-iframe-wrapper {
  flex: 1;
  width: 100%;
  height: calc(100vh - 56px);
  position: relative;
  background-color: #030305;
  overflow: hidden;
}

.immersive-stream-box-carrier {
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
}

/* Ensure the appended iframe takes absolute 100% of the viewport shell */
.immersive-stream-box-carrier .uncompressed-stream-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  z-index: 10;
}

/* Shutter Scanline curtains and loader */
.loader-preflight-curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: #050608;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loader-preflight-curtain.loaded-finish {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.curtain-interior {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

/* High-tech geometric blueprint scan spinners */
.tech-radial-spinner {
  position: relative;
  width: 80px;
  height: 80px;
  border: 2px dashed var(--electric-blue);
  border-radius: 50%;
  animation: rotateGear 10s infinite linear;
}

.tech-radial-spinner::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1.5px solid var(--safety-orange);
  border-radius: 50%;
  border-right-color: transparent;
  border-left-color: transparent;
  animation: rotatingGear 2s infinite ease-in-out;
}

.tech-spinner-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
}

.loader-vibe-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white-clean);
  letter-spacing: 0.05em;
}

.loader-vibe-sub {
  font-family: var(--font-mono);
  font-size: 0.725rem;
  color: var(--electric-blue);
}

/* --------------------------------------------------------------------------
   Blueprint Vertical shutter curtain panels (Slide transition)
   -------------------------------------------------------------------------- */
.transition-shutter-door-top, 
.transition-shutter-door-bottom {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 50vh;
  background-color: #030406;
  border-color: var(--electric-blue);
  border-style: solid;
  z-index: 10000;
  transition: transform var(--t-shutter);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.transition-shutter-door-top {
  top: -50vh; /* slides down to cover */
  border-width: 0 0 3px 0;
}

.transition-shutter-door-bottom {
  bottom: -50vh; /* slides up to cover */
  border-width: 3px 0 0 0;
}

/* Active sweep laser scanline */
.scanning-shutter-laser {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--safety-orange);
  box-shadow: 0 0 14px var(--safety-orange);
  opacity: 0;
}

.transition-shutter-door-top .scanning-shutter-laser {
  bottom: -2.5px;
}
.transition-shutter-door-bottom .scanning-shutter-laser {
  top: -2.5px;
}

/* Trigger states for shutters covering up the viewport */
body.shutter-active .transition-shutter-door-top {
  transform: translateY(50vh);
}
body.shutter-active .transition-shutter-door-bottom {
  transform: translateY(-50vh);
}
body.shutter-active .scanning-shutter-laser {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Device/Mobile Viewport responsive layout overrides
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .app-shell-container {
    grid-template-columns: 1fr;
  }

  .app-shell-sidebar {
    display: none !important; /* vanishes entirely to let iframe take up full width */
  }

  /* Full screen 100vh overlay mobile */
  .app-shell-main {
    width: 100vw;
    height: 100vh;
  }

  .app-shell-topbar {
    position: absolute;
    top: 14px;
    right: 14px;
    left: auto;
    width: auto;
    height: auto;
    border-bottom: none;
    background: transparent;
    z-index: 1002;
    padding: 0;
  }

  .topbar-left-meta,
  .live-counter-shell {
    display: none !important;
  }

  .exit-gate-danger-control {
    background: rgba(10, 11, 18, 0.9);
    backdrop-filter: blur(8px);
    border-color: rgba(239, 68, 68, 0.8);
    color: var(--white-clean);
    padding: 8px 12px;
    font-size: 0.7rem;
  }

  /* Absolute full viewport stream box on Mobile */
  .immersive-iframe-wrapper {
    height: calc(100vh - 50px);
  }
}

/* --------------------------------------------------------------------------
   Responsive Override for the Immersive Cyborg Simian Layout
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .chat-immersive-header {
    height: 50px;
    min-height: 50px;
    padding: 0 10px;
  }
  
  .brand-mascot-v3 {
    height: 34px !important;
  }
  
  .chat-brand-name-text {
    font-size: 0.8rem;
  }

  /* Hide center HUD on mobile to prevent layout squishing */
  .chat-header-center {
    display: none !important;
  }

  .chat-header-right {
    gap: 6px;
  }

  .chat-header-op-btn {
    padding: 4px 10px;
    height: 32px;
    font-size: 0.7rem;
  }
  
  /* Show only high-tech icons on tiny mobile screens to maximize space */
  .chat-header-op-btn .btn-lbl {
    display: none;
  }

  .chat-header-op-btn .control-icon {
    margin: 0;
  }
}

/* Brand Pulse Animation */
.brand-pulse-heavy {
  animation: brandPulseHeavyAnim 1.6s cubic-bezier(0.25, 1, 0.5, 1) ease-out;
}

@keyframes brandPulseHeavyAnim {
  0% {
    text-shadow: 0 0 0px transparent;
    opacity: 0.3;
    letter-spacing: 0.25em;
    color: #38bdf8;
  }
  30% {
    text-shadow: 0 0 25px #00F2FF, 0 0 10px rgba(0, 242, 255, 0.8);
    opacity: 1;
    letter-spacing: 0.15em;
    color: #ffffff;
  }
  100% {
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.3);
    letter-spacing: 0.08em;
  }
}