/* ==========================================================================
       1. CORE DESIGN SYSTEM & CONTROL ROOM ARCHITECTURE
       ========================================================================== */
    :root {
      --primary-dark-base: #050E3C;
      --deep-blue-layer: #000080;
      --neon-accent: #00F7FF;
      --soft-support-green: #C1E59F;
      --white-pure: #FFFFFF;
      --font-play: "Play", sans-serif;
      --system-glitch-speed: 0.3s;
      --terminal-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }

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

    body {
      background-color: var(--primary-dark-base);
      color: var(--white-pure);
      font-family: var(--font-play);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* Custom Scrollbar Interface Tracks */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: var(--primary-dark-base);
    }
    ::-webkit-scrollbar-thumb {
      background: var(--neon-accent);
      border-radius: 3px;
    }

    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    p {
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.7);
    }

    /* System Operational Utilities */
    .neon-pulse-glow {
      box-shadow: 0 0 15px rgba(0, 247, 255, 0.4);
    }
    
    .neon-text-glow {
      text-shadow: 0 0 10px rgba(0, 247, 255, 0.6);
    }

    /* Route Transition Stage Engine */
    .system-route-stage {
      display: none;
      opacity: 0;
      transform: scale(0.99) translateY(10px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .system-route-stage.stage-operational {
      display: block;
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    /* ==========================================================================
       2. FLOATING CONTROL STRIP NAVIGATION (HEADER)
       ========================================================================== */
    header {
      position: fixed;
      top: 1.5rem;
      left: 50%;
      height: 100px;
      transform: translateX(-50%);
      width: 90%;
      max-width: 1400px;
      background: rgba(5, 14, 60, 0.8);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(0, 247, 255, 0.2);
      padding: 1rem 2.5rem;
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: var(--terminal-transition);
      border-radius: 4px;
    }

    header.collapsed-status-mode {
      top: 0;
      width: 100%;
      max-width: 100%;
      padding: 0.6rem 4rem;
      height: 100px;
      border-left: none;
      border-right: none;
      border-top: none;
      border-bottom: 2px solid var(--neon-accent);
      background: var(--primary-dark-base);
    }

.system-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  padding: 6px 10px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

/* LOGO IMAGE */
.system-logo img {
  height: 238px;
  width: auto;
  filter: drop-shadow(0 0 6px rgba(0, 247, 255, 0.4));
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* OPTIONAL TEXT TAG */
.system-logo span {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--neon-accent);
  opacity: 0.9;
}

/* HOVER STATE (neon system feel) */
.system-logo:hover {
  background: rgba(0, 247, 255, 0.06);
  box-shadow: 0 0 18px rgba(0, 247, 255, 0.25);
}

.system-logo:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px rgba(0, 247, 255, 0.7));
}

/* ACTIVE CLICK FEEDBACK */
.system-logo:active {
  transform: scale(0.98);
}
    .control-strip-links {
      display: flex;
      gap: 2.5rem;
      list-style: none;
    }

    .control-strip-links a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      font-size: 0.9rem;
      text-transform: uppercase;
      font-weight: 700;
      cursor: pointer;
      position: relative;
      padding: 0.2rem 0;
      transition: var(--terminal-transition);
    }

    .control-strip-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--neon-accent);
      box-shadow: 0 0 8px var(--neon-accent);
      transition: var(--terminal-transition);
    }

    .control-strip-links a:hover::after,
    .control-strip-links a.active-strip-node::after {
      width: 100%;
    }

    .control-strip-links a:hover {
      color: var(--neon-accent);
    }

    .header-system-action-btn {
      background: transparent;
      border: 1px solid var(--neon-accent);
      color: var(--neon-accent);
      padding: 0.6rem 1.5rem;
      font-family: var(--font-play);
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.8rem;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(0, 247, 255, 0.1);
      transition: var(--terminal-transition);
      border-radius: 2px;
    }

    .header-system-action-btn:hover {
      background: var(--neon-accent);
      color: var(--primary-dark-base);
      box-shadow: 0 0 20px rgba(0, 247, 255, 0.5);
    }

    /* Responsible Mobile Responsive Controls */
    .hamburger-action-node {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      flex-direction: column;
      gap: 5px;
      z-index: 1100;
    }

    .hamburger-action-node span {
      display: block;
      width: 25px;
      height: 2px;
      background-color: var(--neon-accent);
      transition: var(--terminal-transition);
    }

    .mobile-drawer-system-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: 320px;
      height: 100vh;
      background: var(--primary-dark-base);
      border-left: 2px solid var(--neon-accent);
      z-index: 1050;
      padding: 8rem 2.5rem 3rem 2.5rem;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      transform: translateX(100%);
      transition: var(--terminal-transition);
    }

    .mobile-drawer-system-panel.drawer-operational {
      transform: translateX(0);
    }

    .mobile-drawer-system-panel a {
      font-size: 1.2rem;
      color: var(--white-pure);
      text-transform: uppercase;
      text-decoration: none;
      font-weight: 700;
    }

    /* ==========================================================================
       3. SECTION 01: CREDIT ENTRY GATE (HERO)
       ========================================================================== */
    .credit-entry-gate {
      height: 100vh;
      background: linear-gradient(180deg, var(--primary-dark-base) 0%, var(--deep-blue-layer) 100%);
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: 0 8rem;
      position: relative;
      overflow: hidden;
    }

    .entry-gate-left h1 {
      font-size: 5rem;
      line-height: 0.95;
      color: var(--white-pure);
      margin-bottom: 2rem;
    }

    .entry-gate-left h1 span {
      color: var(--neon-accent);
      display: block;
    }

    .live-system-telemetry-box {
      min-height: 50px;
      font-family: var(--font-play);
      font-size: 1.4rem;
      color: var(--soft-support-green);
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .telemetry-cursor {
      width: 12px;
      height: 2px;
      background-color: var(--soft-support-green);
      animation: systemBlink 0.8s infinite;
    }

    @keyframes systemBlink {
      50% { opacity: 0; }
    }

    .entry-gate-right {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    /* Interactive Credit Tunnel Simulation Graphics */
    .credit-tunnel-visual-chamber {
      width: 450px;
      height: 450px;
      border: 1px solid rgba(0, 247, 255, 0.15);
      border-radius: 50%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .tunnel-energy-ring {
      position: absolute;
      border: 2px dashed rgba(0, 247, 255, 0.3);
      border-radius: 50%;
      animation: tunnelRotate 20s linear infinite;
    }

    .ring-layer-1 { width: 90%; height: 90%; animation-duration: 15s; }
    .ring-layer-2 { width: 70%; height: 70%; animation-duration: 25s; animation-direction: reverse; border-color: var(--soft-support-green); }
    .ring-layer-3 { width: 50%; height: 50%; border-style: dotted; }

    @keyframes tunnelRotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .digital-approval-pulse-core {
      width: 80px;
      height: 80px;
      background: rgba(0, 247, 255, 0.1);
      border: 2px solid var(--neon-accent);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
      color: var(--neon-accent);
      font-size: 0.8rem;
      animation: pulseCoreBlast 2.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    }

    @keyframes pulseCoreBlast {
      0% { box-shadow: 0 0 0 0 rgba(0, 247, 255, 0.6); }
      100% { box-shadow: 0 0 0 40px rgba(0, 247, 255, 0); }
    }

    .stream-number-particle {
      position: absolute;
      font-size: 0.85rem;
      color: rgba(0, 247, 255, 0.4);
      font-weight: 700;
    }

    .trigger-flow-btn-container {
      grid-column: span 2;
      margin-top: 2rem;
    }

    .pulse-glow-action-trigger {
      background: var(--neon-accent);
      color: var(--primary-dark-base);
      border: none;
      padding: 1.2rem 3rem;
      font-family: var(--font-play);
      font-weight: 700;
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      cursor: pointer;
      position: relative;
      box-shadow: 0 0 25px rgba(0, 247, 255, 0.5);
      animation: globalGlowPulse 2s infinite alternate;
      border-radius: 2px;
    }

    @keyframes globalGlowPulse {
      0% { box-sizing: border-box; box-shadow: 0 0 15px rgba(0, 247, 255, 0.4); }
      100% { box-shadow: 0 0 35px rgba(0, 247, 255, 0.8); }
    }

    /* ==========================================================================
       4. SECTION 02: ELIGIBILITY FLOW PATH (PIPELINE)
       ========================================================================== */
    .eligibility-flow-path {
      background-color: var(--deep-blue-layer);
      padding: 8rem 4rem;
      overflow-x: auto;
      position: relative;
    }

    .pipeline-main-axis-line {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 4px;
      background: rgba(0, 247, 255, 0.15);
      z-index: 1;
      transform: translateY(-50%);
    }

    .pipeline-data-pulse-train {
      position: absolute;
      top: 0;
      left: 0;
      width: 80px;
      height: 100%;
      background: linear-gradient(90deg, rgba(0,247,255,0) 0%, rgba(0,247,255,1) 50%, rgba(0,247,255,0) 100%);
      animation: dataPipelineFlow 4s linear infinite;
    }

    @keyframes dataPipelineFlow {
      0% { left: -10%; }
      100% { left: 110%; }
    }

    .pipeline-nodes-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 2;
      min-width: 1100px;
      padding: 0 4rem;
    }

    .glowing-pipeline-node {
      background: var(--primary-dark-base);
      border: 2px solid rgba(0, 247, 255, 0.4);
      width: 180px;
      height: 180px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 1.5rem;
      transition: var(--terminal-transition);
      cursor: help;
    }

    .glowing-pipeline-node .node-index {
      font-size: 0.8rem;
      color: var(--neon-accent);
      margin-bottom: 0.5rem;
    }

    .glowing-pipeline-node h4 {
      font-size: 1rem;
      color: var(--white-pure);
    }

    .glowing-pipeline-node .node-expanded-telemetry {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      font-size: 0.75rem;
      margin-top: 0.5rem;
      color: var(--soft-support-green);
      transition: var(--terminal-transition);
    }

    .glowing-pipeline-node:hover {
      border-color: var(--neon-accent);
      box-shadow: 0 0 25px rgba(0, 247, 255, 0.4);
      transform: scale(1.1) translateY(-10px);
      background: #061352;
    }

    .glowing-pipeline-node:hover .node-expanded-telemetry {
      max-height: 60px;
      opacity: 1;
    }

    /* ==========================================================================
       5. SECTION 03: CREDIT SIMULATION ROOM (INTERACTIVE MODELLING CORE)
       ========================================================================== */
    .credit-simulation-room {
      background-color: var(--primary-dark-base);
      padding: 10rem 8rem;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 6rem;
      align-items: center;
    }

    .simulation-control-deck h2 {
      font-size: 3rem;
      margin-bottom: 3rem;
      color: var(--white-pure);
    }

    .sim-slider-group {
      margin-bottom: 2.5rem;
    }

    .sim-slider-group .slider-telemetry-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.8rem;
      text-transform: uppercase;
      font-size: 0.85rem;
      letter-spacing: 0.05em;
    }

    .sim-slider-group .slider-telemetry-row span:last-child {
      color: var(--neon-accent);
      font-weight: 700;
    }

    .engine-terminal-slider {
      width: 100%;
      -webkit-appearance: none;
      background: rgba(0, 247, 255, 0.1);
      height: 6px;
      outline: none;
      border: 1px solid rgba(0, 247, 255, 0.2);
    }

    .engine-terminal-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      background: var(--neon-accent);
      border: 2px solid var(--primary-dark-base);
      cursor: pointer;
      box-shadow: 0 0 10px var(--neon-accent);
      border-radius: 2px;
    }

    .glowing-result-core {
      background: linear-gradient(135deg, #040b30 0%, #00005a 100%);
      border: 1px solid rgba(0, 247, 255, 0.3);
      padding: 4rem;
      text-align: center;
      position: relative;
      border-radius: 4px;
    }

    .ring-svg-container {
      width: 180px;
      height: 180px;
      margin: 0 auto 2.5rem auto;
      position: relative;
    }

    .ring-svg-container svg {
      transform: rotate(-90deg);
    }

    .ring-svg-container .output-value-display {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--neon-accent);
    }

    .core-telemetry-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      border-top: 1px dashed rgba(255, 255, 255, 0.1);
      padding-top: 2rem;
    }

    .core-metric-node label {
      font-size: 0.75rem;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.5);
      display: block;
      margin-bottom: 0.4rem;
    }

    .core-metric-node span {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--soft-support-green);
    }

    /* ==========================================================================
       6. SECTION 04: OFFER STREAM WALL (HIGH CONTRAST FLOW VERTICAL)
       ========================================================================== */
    .offer-stream-wall {
      background-color: var(--soft-support-green);
      color: var(--primary-dark-base);
      padding: 8rem;
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 4rem;
      align-items: center;
      max-height: 800px;
      overflow: hidden;
    }

    .stream-wall-prose h2 {
      font-size: 3.5rem;
      line-height: 1.1;
      color: var(--primary-dark-base);
      margin-bottom: 1.5rem;
    }

    .vertical-scrolling-stream-channel {
      height: 600px;
      overflow-y: hidden;
      position: relative;
    }

    .stream-sliding-track-wrapper {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      animation: verticalStreamScroll 25s linear infinite;
    }

    .stream-sliding-track-wrapper:hover {
      animation-play-state: paused;
    }

    @keyframes verticalStreamScroll {
      0% { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }

    .streaming-offer-card {
      background: var(--primary-dark-base);
      color: var(--white-pure);
      padding: 2.5rem;
      border-left: 4px solid var(--neon-accent);
      transition: var(--terminal-transition);
      cursor: pointer;
      border-radius: 2px;
    }

    .streaming-offer-card h3 {
      font-size: 1.6rem;
      color: var(--neon-accent);
      margin-bottom: 1rem;
    }

    .streaming-offer-card .offer-spec-row {
      display: flex;
      justify-content: space-between;
      margin-top: 1.5rem;
      font-size: 0.9rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 1rem;
    }

    .streaming-offer-card:hover {
      transform: scale(1.03);
      box-shadow: 0 15px 30px rgba(5, 14, 60, 0.3);
    }

    /* ==========================================================================
       7. SECTION 05: CREDIT SPEED ENGINE (ROTATING SEGMENT CONTROL WHEEL)
       ========================================================================== */
    .credit-speed-engine {
      background-color: var(--deep-blue-layer);
      padding: 10rem 4rem;
      text-align: center;
    }

    .credit-speed-engine h2 {
      font-size: 3rem;
      margin-bottom: 5rem;
    }

    .spinning-engine-wheel-ui {
      width: 400px;
      height: 400px;
      margin: 0 auto;
      border: 4px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.1s ease;
    }

    .engine-wheel-segment {
      position: absolute;
      width: 140px;
      height: 140px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1rem;
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      border: 1px solid rgba(0, 247, 255, 0.2);
      background: var(--primary-dark-base);
      transition: var(--terminal-transition);
      border-radius: 4px;
    }

    .segment-north { top: 10px; }
    .segment-east { right: 10px; }
    .segment-south { bottom: 10px; }
    .segment-west { left: 10px; }

    .engine-wheel-segment.segment-active-glow {
      border-color: var(--neon-accent);
      box-shadow: 0 0 30px var(--neon-accent);
      color: var(--neon-accent);
    }

    /* ==========================================================================
       8. SECTION 06: BORROWING JOURNEY VISUAL (TUNNEL PROGRESSION MAPPED)
       ========================================================================== */
    .borrowing-journey-visual {
      background-color: var(--primary-dark-base);
      padding: 12rem 4rem;
      text-align: center;
      position: relative;
    }

    .glowing-path-tunnel-container {
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      height: 350px;
    }

    .tunnel-stage-card {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transform: scale(0.8) translateZ(-100px);
      transition: opacity 0.8s ease, transform 0.8s ease;
      pointer-events: none;
    }

    .tunnel-stage-card.stage-visible-in-view {
      opacity: 1;
      transform: scale(1) translateZ(0);
      pointer-events: auto;
    }

    .tunnel-stage-card .stage-num {
      font-size: 1.5rem;
      color: var(--neon-accent);
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .tunnel-stage-card h3 {
      font-size: 3.5rem;
      margin-bottom: 1.5rem;
    }

    .tunnel-navigation-row {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .tunnel-step-index-dot {
      width: 40px;
      height: 4px;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      cursor: pointer;
      transition: var(--terminal-transition);
    }

    .tunnel-step-index-dot.dot-active-pulse {
      background: var(--neon-accent);
      box-shadow: 0 0 10px var(--neon-accent);
    }

    /* ==========================================================================
       9. SECTION 07: SMART BORROW DASHBOARD (MINIMAL INTERFACE FLUID)
       ========================================================================== */
    .smart-borrow-dashboard {
      background-color: var(--soft-support-green);
      color: var(--primary-dark-base);
      padding: 8rem 6rem;
    }

    .smart-borrow-dashboard h2 {
      font-size: 3rem;
      text-align: center;
      margin-bottom: 5rem;
    }

    .floating-neon-data-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2.5rem;
      max-width: 1400px;
      margin: 0 auto;
    }

    .floating-neon-data-tile {
      background: var(--primary-dark-base);
      color: var(--white-pure);
      padding: 3rem 2rem;
      border: 1px solid rgba(0, 247, 255, 0.1);
      position: relative;
      border-radius: 4px;
      animation: tileSoftPulse 3s infinite ease-in-out alternate;
    }

    @keyframes tileSoftPulse {
      0% { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
      100% { box-shadow: 0 5px 25px rgba(0, 247, 255, 0.15); border-color: rgba(0, 247, 255, 0.3); }
    }

    .floating-neon-data-tile label {
      font-size: 0.8rem;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 0.1em;
      display: block;
      margin-bottom: 1rem;
    }

    .floating-neon-data-tile .tile-metric-output {
      font-size: 2.4rem;
      font-weight: 700;
      color: var(--neon-accent);
    }

    /* ==========================================================================
       10. SECTION 08: REAL-TIME APPROVAL STREAM (SYSTEM FEED SYSTEM LOGS)
       ========================================================================== */
    .real-time-approval-stream {
      background-color: var(--primary-dark-base);
      padding: 10rem 8rem;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 6rem;
      align-items: center;
    }

    .stream-feed-terminal-box {
      background: #020720;
      border: 1px solid rgba(0, 247, 255, 0.2);
      border-radius: 4px;
      padding: 2.5rem;
      font-family: monospace;
      height: 350px;
      overflow-y: hidden;
      position: relative;
    }

    .live-scrolling-system-logs {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .log-line-node {
      font-size: 0.95rem;
      color: var(--soft-support-green);
      display: flex;
      gap: 1rem;
    }

    .log-line-node .timestamp {
      color: rgba(255, 255, 255, 0.3);
    }

    .log-line-node.alert-status {
      color: var(--neon-accent);
    }

    /* ==========================================================================
       11. SECTION 09: BORROWING BENEFITS GRID (ASYMMETRICAL LAYOUTS)
       ========================================================================== */
    .borrowing-benefits-grid {
      background-color: var(--deep-blue-layer);
      padding: 10rem 6rem;
    }

    .borrowing-benefits-grid h2 {
      font-size: 3rem;
      text-align: center;
      margin-bottom: 6rem;
    }

    .asymmetrical-floating-grid-matrix {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 3rem;
      max-width: 1300px;
      margin: 0 auto;
    }

    .asymmetric-benefit-card {
      background: var(--primary-dark-base);
      padding: 3rem;
      border: 1px solid rgba(255, 255, 255, 0.05);
      transition: var(--terminal-transition);
      border-radius: 2px;
    }

    .asymmetric-benefit-card h4 {
      font-size: 1.4rem;
      color: var(--neon-accent);
      margin-bottom: 1rem;
    }

    .asymmetric-benefit-card:hover {
      box-shadow: 0 0 30px rgba(0, 247, 255, 0.3);
      border-color: var(--neon-accent);
      transform: translateY(-5px);
    }

    /* Grid Position Modifications for Asymmetric Fluidity */
    .benefit-span-3 { grid-column: span 3; }
    .benefit-span-2 { grid-column: span 2; }
    .benefit-span-4 { grid-column: span 4; }

    /* ==========================================================================
       12. SECTION 10: FUNDS FLOW VISUAL (MOTION ENGINE COMPONENT)
       ========================================================================== */
    .funds-flow-visual {
      background-color: var(--primary-dark-base);
      padding: 10rem 4rem;
      text-align: center;
    }

    .funds-flow-visual h2 {
      font-size: 3rem;
      margin-bottom: 6rem;
    }

    .animated-flow-lines-viewport {
      max-width: 1000px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding: 2rem 0;
    }

    .flow-processing-node {
      background: var(--deep-blue-layer);
      border: 2px solid rgba(255, 255, 255, 0.1);
      padding: 2rem 3rem;
      z-index: 2;
      border-radius: 4px;
      transition: var(--terminal-transition);
    }

    .flow-processing-node h5 {
      font-size: 1.2rem;
      color: var(--white-pure);
    }

    .flow-processing-node .node-status-flag {
      font-size: 0.75rem;
      color: var(--neon-accent);
      text-transform: uppercase;
      margin-top: 0.5rem;
      display: block;
    }

    .animated-flow-lines-viewport svg.vector-flow-track {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 20px;
      transform: translateY(-50%);
      z-index: 1;
    }

    .animated-flow-lines-viewport svg.vector-flow-track line {
      stroke: var(--neon-accent);
      stroke-dasharray: 10, 15;
      animation: dashMovementTrack 2s linear infinite;
    }

    @keyframes dashMovementTrack {
      to { stroke-dashoffset: -50; }
    }

    .flow-processing-node:hover {
      border-color: var(--neon-accent);
      box-shadow: 0 0 20px rgba(0, 247, 255, 0.4);
    }

    /* ==========================================================================
       13. SECTION 11: SUBSCRIPTION PANEL
       ========================================================================== */
    .subscription-panel {
      background-color: var(--soft-support-green);
      padding: 8rem 4rem;
      display: flex;
      justify-content: center;
    }

    .center-glowing-form-card {
      background-color: var(--primary-dark-base);
      border: 2px solid rgba(0, 247, 255, 0.2);
      padding: 4rem;
      max-width: 700px;
      width: 100%;
      text-align: center;
      position: relative;
      border-radius: 4px;
    }

    .center-glowing-form-card h2 {
      font-size: 2.5rem;
      color: var(--white-pure);
      margin-bottom: 1rem;
    }

    .center-glowing-form-card p {
      margin-bottom: 2.5rem;
    }

    .terminal-input-row {
      display: flex;
      gap: 1rem;
      background: rgba(255, 255, 255, 0.05);
      padding: 0.5rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 2px;
    }

    .terminal-input-row input {
      flex: 1;
      background: transparent;
      border: none;
      padding: 1rem;
      color: var(--white-pure);
      font-family: var(--font-play);
      font-size: 1.1rem;
      outline: none;
    }

    .action-sub-btn, .action-unsub-btn {
      font-family: var(--font-play);
      font-weight: 700;
      text-transform: uppercase;
      padding: 0 2rem;
      cursor: pointer;
      border: none;
      transition: var(--terminal-transition);
    }

    .action-sub-btn {
      background: var(--neon-accent);
      color: var(--primary-dark-base);
    }

    .action-sub-btn:hover {
      box-shadow: 0 0 15px var(--neon-accent);
    }

    .action-unsub-btn {
      background: transparent;
      color: rgba(255, 255, 255, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .action-unsub-btn:hover {
      color: var(--white-pure);
      border-color: var(--white-pure);
    }

    /* Interface Validation States Animations */
    .validation-feedback-line {
      margin-top: 1rem;
      font-size: 0.9rem;
      font-weight: 700;
      display: none;
    }

    .center-glowing-form-card.state-error-shake {
      animation: errorShakeGlow 0.4s ease-in-out;
      border-color: #FF0055;
    }

    @keyframes errorShakeGlow {
      0%, 100% { transform: translateX(0); box-shadow: none; }
      20%, 60% { transform: translateX(-10px); box-shadow: 0 0 20px rgba(255, 0, 85, 0.4); }
      40%, 80% { transform: translateX(10px); box-shadow: 0 0 20px rgba(255, 0, 85, 0.4); }
    }

    /* ==========================================================================
       14. INTERIOR ROUTES STAGE STRUCTURES (ABOUT, OFFERS, SUPPORT, CONTACT)
       ========================================================================== */
    .interior-route-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 14rem 4rem 8rem 4rem;
    }

    .interior-route-container h1 {
      font-size: 4rem;
      color: var(--white-pure);
      margin-bottom: 1.5rem;
      border-left: 4px solid var(--neon-accent);
      padding-left: 1.5rem;
    }

    .system-concept-lead-p {
      font-size: 1.3rem;
      color: var(--neon-accent);
      margin-bottom: 4rem;
    }

    .architecture-report-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4rem;
      margin-top: 4rem;
    }

    .report-block-node {
      background: var(--deep-blue-layer);
      border: 1px solid rgba(255, 255, 255, 0.05);
      padding: 3rem;
      border-radius: 4px;
    }

    .report-block-node h3 {
      font-size: 1.6rem;
      color: var(--neon-accent);
      margin-bottom: 1.2rem;
    }

    /* Live Market Terminal Interfaces */
    .live-market-stream-container {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin-top: 4rem;
    }

    .market-stream-row {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(0, 247, 255, 0.1);
      padding: 2rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      transition: var(--terminal-transition);
    }

    .market-stream-row:hover {
      background: rgba(0, 247, 255, 0.05);
      border-color: var(--neon-accent);
    }

    /* Support Chat Interface Elements */
    .terminal-chat-chamber {
      background: #020720;
      border: 1px solid rgba(0, 247, 255, 0.3);
      height: 500px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .chat-messages-scroll-area {
      flex: 1;
      padding: 2.5rem;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .chat-msg-bubble {
      max-width: 70%;
      padding: 1.2rem 1.8rem;
      font-size: 0.95rem;
      border-radius: 4px;
    }

    .chat-msg-bubble.system-incoming {
      background: var(--deep-blue-layer);
      color: var(--white-pure);
      align-self: flex-start;
      border-left: 3px solid var(--neon-accent);
    }

    .chat-msg-bubble.user-outgoing {
      background: var(--neon-accent);
      color: var(--primary-dark-base);
      align-self: flex-end;
      font-weight: 700;
    }

    .chat-terminal-input-bar {
      border-top: 1px solid rgba(0, 247, 255, 0.2);
      display: flex;
      background: var(--primary-dark-base);
    }

    .chat-terminal-input-bar input {
      flex: 1;
      background: transparent;
      border: none;
      padding: 1.5rem;
      color: var(--white-pure);
      font-family: var(--font-play);
      outline: none;
    }

    .chat-send-trigger-btn {
      background: var(--neon-accent);
      color: var(--primary-dark-base);
      border: none;
      padding: 0 2.5rem;
      font-family: var(--font-play);
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
    }

    /* Form Modules for Contact Engine Channels */
    .secure-channel-form {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      max-width: 800px;
      margin-top: 4rem;
    }

    .secure-form-group {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .secure-form-group label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--neon-accent);
    }

    .secure-form-group input, .secure-form-group textarea {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 1.2rem;
      color: var(--white-pure);
      font-family: var(--font-play);
      font-size: 1.1rem;
      outline: none;
      transition: var(--terminal-transition);
    }

    .secure-form-group input:focus, .secure-form-group textarea:focus {
      border-color: var(--neon-accent);
      box-shadow: 0 0 15px rgba(0, 247, 255, 0.2);
    }

    /* ==========================================================================
       15. UNIVERSAL NEON FOOTER & TICKER STRIP
       ========================================================================== */
    footer {
      background-color: var(--deep-blue-layer);
      padding: 6rem 4rem 2rem 4rem;
      border-top: 1px solid rgba(0, 247, 255, 0.1);
    }

    .footer-matrix-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4rem;
      max-width: 1400px;
      margin: 0 auto 5rem auto;
    }

    .footer-col h5 {
      font-size: 1.1rem;
      color: var(--neon-accent);
      margin-bottom: 1.5rem;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    .footer-col ul a {
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      font-size: 0.9rem;
      transition: var(--terminal-transition);
      cursor: pointer;
    }

    .footer-col ul a:hover {
      color: var(--neon-accent);
      padding-left: 4px;
    }

    .neon-marquee-ticker-strip {
      background: var(--primary-dark-base);
      border-top: 1px solid var(--neon-accent);
      border-bottom: 1px solid var(--neon-accent);
      padding: 1rem 0;
      overflow: hidden;
      position: relative;
    }

    .marquee-scrolling-content {
      display: flex;
      white-space: nowrap;
      gap: 4rem;
      animation: marqueeRunInfinite 20s linear infinite;
    }

    @keyframes marqueeRunInfinite {
      0% { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(-33.33%, 0, 0); }
    }

    .marquee-scrolling-content span {
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--neon-accent);
      letter-spacing: 0.2em;
    }

    /* ==========================================================================
       16. COMPLETE RESPONSIVE TERMINAL ORDINANCES
       ========================================================================== */
    @media (max-width: 1200px) {
      .credit-entry-gate { grid-template-columns: 1fr; padding: 0 4rem; height: auto; padding-top: 14rem; padding-bottom: 6rem; }
      .entry-gate-right { margin-top: 4rem; }
      .credit-simulation-room { grid-template-columns: 1fr; padding: 6rem 4rem; }
      .offer-stream-wall { grid-template-columns: 1fr; max-height: none; padding: 6rem 4rem; }
      .floating-neon-data-grid { grid-template-columns: repeat(2, 1fr); }
      .real-time-approval-stream { grid-template-columns: 1fr; padding: 6rem 4rem; }
      .asymmetrical-floating-grid-matrix { grid-template-columns: 1fr; }
      .benefit-span-3, .benefit-span-2, .benefit-span-4 { grid-column: span 1; }
    }

    @media (max-width: 768px) {
      header .control-strip-links, header .header-system-action-btn { display: none; }
      .hamburger-action-node { display: flex; }
      .entry-gate-left h1 { font-size: 3.2rem; }
      .credit-tunnel-visual-chamber { width: 300px; height: 300px; }
      .floating-neon-data-grid { grid-template-columns: 1fr; }
      .animated-flow-lines-viewport { flex-direction: column; gap: 3rem; }
      .animated-flow-lines-viewport svg.vector-flow-track { display: none; }
      .footer-matrix-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .architecture-report-grid { grid-template-columns: 1fr; }
      .market-stream-row { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
    }

    /* Chat improvements */
.chat-msg-bubble {
  max-width: 80%;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  border-radius: 8px;
  line-height: 1.5;
}

.chat-msg-bubble.system-incoming {
  background: rgba(0, 247, 255, 0.1);
  border-left: 3px solid var(--neon-accent);
  align-self: flex-start;
}

.chat-msg-bubble.user-outgoing {
  background: var(--neon-accent);
  color: var(--primary-dark-base);
  align-self: flex-end;
  font-weight: 600;
}

.chat-messages-scroll-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#typing-indicator {
  background: rgba(0, 247, 255, 0.05);
  font-size: 1.2rem;
  letter-spacing: 2px;
}

.suggested-replies-container {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 247, 255, 0.1);
}

.suggested-replies-container button {
  font-family: var(--font-play);
}

.system-route-stage {
  padding: 60px 40px;
  background: radial-gradient(circle at top, #0b1020, #05070f);
  color: #d7e1ff;
  font-family: 'Play', sans-serif;
}

.system-concept-lead-p {
  max-width: 900px;
  opacity: 0.8;
  line-height: 1.6;
}

.architecture-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.report-block-node {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,247,255,0.15);
  border-radius: 14px;
  padding: 20px;
  backdrop-filter: blur(10px);
  transition: 0.3s ease;
}

.report-block-node:hover {
  transform: translateY(-4px);
  border-color: rgba(0,247,255,0.4);
}

.report-block-node h3 {
  color: #00f7ff;
  font-size: 1rem;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.system-metrics-panel {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.metric-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(193,229,159,0.2);
  padding: 15px;
  border-radius: 12px;
}

.metric-label {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
}

.metric-value {
  font-size: 1.2rem;
  font-weight: bold;
  color: #c1e59f;
}