/* ==========================================================================
   NextGen Download Manager (NextGen-DLM)
   Clean Light-Mode Stylesheet — Google Sans Flex Exact UI Replication
   ========================================================================== */

/* --- Import Google Sans Flex Variable Font --- */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,slnt,wdth,wght,ROND@8..144,-10..0,25..150,100..900,0..100&display=swap');

:root {
  /* Clean Typography Tokens */
  --font-main: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Vibrant Light HSL Palette */
  --bg-main: #ffffff;
  --bg-card: #fcfcfd;
  --bg-hover: #f4f4f5;
  
  --border-color: #e4e4e7;       /* zinc-200 */
  --border-light: #f4f4f5;       /* zinc-100 */
  
  --color-primary: #0033ff;      /* Vibrant Royal Blue brand */
  --color-primary-hover: #0022cc;
  --color-secondary: #00ddff;    /* Sky Blue/Cyan */
  --color-success: #10b981;      /* Emerald Green */
  --color-muted: #71717a;        /* zinc-500 */
  
  --text-primary: #09090b;       /* zinc-950 */
  --text-secondary: #52525b;     /* zinc-600 */
  --text-muted: #a1a1aa;         /* zinc-400 */

  /* Shadows */
  --shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  --shadow-hover: 0 20px 40px -15px rgba(0, 51, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
  
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Resets --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* --- Layout --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* --- Navigation Header --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  border-bottom: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  padding: 1rem 0;
}

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

.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.nav-brand:hover {
  opacity: 0.85;
}

.nav-logo-img {
  height: 24px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-version {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.btn-primary-sm {
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 99px;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 51, 255, 0.15);
  transition: var(--transition-fast);
}

.btn-primary-sm:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* --- Hero Section --- */
.hero {
  padding: 8rem 0 4rem 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 {
  font-size: 3.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  max-width: 900px;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.hero h1 span {
  color: var(--color-primary);
}

.hero p {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 750px;
  line-height: 1.6;
}

/* --- Hero Redesigned CTA Row --- */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-get-dlm {
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.9rem 2.2rem;
  border-radius: 99px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0, 51, 255, 0.18), 0 2px 6px rgba(0, 51, 255, 0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.3s ease;
}

.btn-get-dlm:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 51, 255, 0.25), 0 4px 10px rgba(0, 51, 255, 0.12);
}

.btn-get-dlm:active {
  transform: translateY(0) scale(0.98);
}

.btn-install-ext {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.btn-install-ext:hover {
  transform: translateY(-1px);
  opacity: 0.85;
}

.btn-install-ext:hover .ext-icon {
  transform: translateY(1.5px);
}

.btn-install-ext .bracket {
  color: var(--color-primary);
  font-weight: 500;
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-install-ext:hover .bracket:first-child {
  transform: translateX(-2px);
}

.btn-install-ext:hover .bracket:last-child {
  transform: translateX(2px);
}

.btn-install-content {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.25rem;
}

.ext-icon {
  transition: transform 0.2s ease;
}

/* --- Hero Visualizer Interactive Container --- */
.visualizer-wrapper {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 5rem auto 2rem auto;
  padding-top: 15rem; /* Space for absolute floating cards above */
}

/* --- SVG Dotted Connections Canvas --- */
.dotted-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* --- Floating Cards (Connected Mockups) --- */
.floating-cards-grid {
  display: grid;
  grid-template-columns: 280px 1.25fr 280px;
  gap: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: auto;
}

.float-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: var(--transition-smooth);
}

.float-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-primary);
}

/* Left Card: Local Storage */
.storage-card {
  align-items: flex-start;
  gap: 0.85rem;
}

.storage-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.storage-icon-wrapper {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.storage-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Middle Card: 16-Segment Engine */
.segment-card {
  align-items: stretch;
  gap: 1rem;
}

.segment-card-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.segment-grid-16 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 52px;
  margin: 0.25rem 0;
}

.segment-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.seg-pill-vertical {
  width: 6px;
  height: 32px;
  background-color: var(--color-primary);
  border-radius: 1px;
  transition: height 0.3s ease;
}

.seg-lbl {
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-primary);
}

.segment-card-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
}

.status-dot-blue {
  width: 7px;
  height: 7px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
}

/* Right Card: Media Sniffer */
.sniffer-card {
  align-items: flex-start;
  gap: 0.85rem;
  position: relative;
}

.sniffer-active-badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
}

.sniffer-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.sniffer-icon-wrapper {
  color: var(--color-primary);
}

.sniffer-status-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sniffer-lbl-active {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.sniffer-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* --- App Dashboard Mockup Layout --- */
.app-mock-frame {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  height: auto;
  overflow: hidden;
  text-align: left;
  z-index: 5;
  position: relative;
}

/* Mock Title Bar (macOS/Clean style for native premium look) */
.mock-window-bar {
  background-color: #f4f4f5;
  border-bottom: 1px solid var(--border-color);
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  position: relative;
  flex-shrink: 0;
}

.mock-dots {
  display: flex;
  gap: 0.5rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.dot-close {
  background-color: #ff5f56;
}

.dot-minimize {
  background-color: #ffbd2e;
}

.dot-maximize {
  background-color: #27c93f;
}

.mock-window-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-main);
  pointer-events: none;
}

.screenshot-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
  background-color: #ffffff;
}

.screenshot-img {
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  display: block;
}

/* ==========================================================================
   FEATURES SECTION STYLES (Engineered for Absolute Control)
   ========================================================================== */

.features-section {
  padding: 8rem 0;
  background: radial-gradient(circle at top center, rgba(0, 51, 255, 0.02) 0%, rgba(255, 255, 255, 0) 60%);
  border-top: 1px solid var(--border-light);
}

.features-header {
  text-align: center;
  margin-bottom: 5rem;
}

.features-header h2 {
  font-size: 3.25rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.features-subhead {
  font-size: 1.25rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: 385px 1fr;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}

/* Base Card Design */
.feature-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 2.25rem;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 20px 40px -15px rgba(0, 51, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.01);
}

.card-header {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.card-header h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.card-subtitle {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Left Column: 16-Segment Connections --- */
.connections-card {
  height: 100%;
}

.connections-file-info {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 0.9rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.file-icon-blue {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.file-name-mono, .file-size-mono {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Connections Streams Diagram styling */
.connections-diagram {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 2.25rem;
}

.central-node-wiring {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 40px;
  margin-bottom: 0.5rem;
}

.central-point {
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
  z-index: 2;
}

.central-line-down {
  width: 1.5px;
  height: 100%;
  background-color: var(--color-primary);
  z-index: 1;
}

.connections-tracks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.connections-tracks::before {
  content: '';
  position: absolute;
  top: 0;
  left: 80px;
  width: 1.5px;
  height: calc(100% - 15px);
  background-color: var(--color-primary);
  opacity: 0.6;
}

.track-row {
  display: flex;
  align-items: center;
  height: 12px;
  width: 100%;
}

.track-num {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  width: 20px;
  text-align: left;
}

.track-connector {
  width: 60px;
  height: 1.5px;
  background-color: var(--color-primary);
  position: relative;
  opacity: 0.6;
}

.track-connector::before {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.track-row:nth-child(even) .track-connector {
  opacity: 0.85;
}

.track-segments {
  flex: 1;
  display: flex;
  gap: 2.5px;
  padding: 0 0.85rem;
  overflow: hidden;
  align-items: center;
}

.seg {
  width: 6px;
  height: 7px;
  background-color: var(--color-primary);
  border-radius: 1px;
  display: inline-block;
  opacity: 0.95;
  transition: opacity 0.2s ease;
}

/* Simulate dynamic segment variances */
.track-row:nth-child(3n) .seg:nth-child(even),
.track-row:nth-child(5n) .seg:nth-child(3n) {
  opacity: 0.15;
  background-color: var(--border-color);
}

.track-arrow {
  font-family: monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  width: 14px;
}

.connections-footer {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 0.9rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
}

.metrics-check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metrics-text-mono {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
}

/* --- Right Column Stack --- */
.features-right-stack {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* --- Right Column Top: Universal Media Sniffer Card --- */
.sniffer-feature-card {
  flex: 1;
}

.browser-mockup {
  background: #ffffff;
  border: 1.5px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-premium);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.browser-toolbar {
  background-color: #f4f4f5;
  border-bottom: 1px solid var(--border-color);
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  gap: 1.5rem;
  flex-shrink: 0;
}

.browser-dots {
  display: flex;
  gap: 0.4rem;
}

.b-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.browser-tab {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  height: 28px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: 0 -2px 5px rgba(0,0,0,0.02);
  position: relative;
}

.tab-play-icon {
  color: var(--color-primary);
}

.tab-close {
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 700;
}

.tab-new-plus {
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 4px;
}

.browser-navbar {
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-color);
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  gap: 1rem;
  flex-shrink: 0;
}

.nav-arrows {
  display: flex;
  gap: 0.85rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 700;
  cursor: pointer;
}

.url-input-field {
  flex: 1;
  background-color: #f4f4f5;
  border: 1px solid var(--border-color);
  border-radius: 99px;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
  position: relative;
}

.lock-icon {
  color: var(--color-success);
}

.url-text {
  font-family: var(--font-main);
  font-weight: 500;
}

.url-star {
  margin-left: auto;
  color: var(--text-muted);
  cursor: pointer;
}

.nav-extensions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
}

/* Video Player area styles */
.video-player-container {
  height: 280px;
  background-color: #18181b;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.video-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.2s ease;
  padding-left: 2.5px;
}

.center-play-btn:hover {
  transform: scale(1.08);
}

/* Custom Right-Click Context Menu */
.video-context-menu {
  position: absolute;
  top: 30px;
  left: 210px;
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
  width: 220px;
  z-index: 100;
  padding: 0.5rem 0;
  font-family: var(--font-main);
  text-align: left;
}

.menu-item {
  padding: 0.45rem 1.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.menu-item:hover {
  background-color: var(--bg-hover);
}

.check-item {
  padding-left: 0.65rem;
  gap: 0.35rem;
}

.check-mark {
  color: var(--color-primary);
  width: 14px;
  font-weight: 800;
}

.menu-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 0.4rem 0;
}

.menu-shortcut {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.dl-action-item {
  background-color: var(--color-primary);
  color: #ffffff !important;
  font-weight: 700;
  gap: 0.5rem;
}

.dl-action-item:hover {
  background-color: var(--color-primary-hover);
}

.menu-dl-icon {
  color: #ffffff;
  flex-shrink: 0;
}

/* Video controls bar */
.video-controls {
  height: 38px;
  background-color: rgba(9, 9, 11, 0.95);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  gap: 0.85rem;
  flex-shrink: 0;
}

.controls-left, .controls-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.control-btn {
  color: #ffffff;
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.control-btn:hover {
  opacity: 1;
}

.video-time-mono {
  font-family: monospace;
  font-size: 0.72rem;
  color: #ffffff;
  opacity: 0.8;
}

.video-timeline-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
}

.video-timeline-track {
  height: 4px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 99px;
  flex: 1;
  position: relative;
  cursor: pointer;
}

.video-timeline-active {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: 99px;
}

.video-timeline-knob {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-primary);
  position: absolute;
  top: -3px;
  transform: translateX(-50%);
  transition: transform 0.15s ease;
}

.video-timeline-track:hover .video-timeline-knob {
  transform: translateX(-50%) scale(1.2);
}

/* --- Right Column Bottom: Snail Mode Card --- */
.snail-feature-card {
  margin-top: 0.5rem;
}

.snail-mode-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.snail-graphics-box {
  width: 120px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.snail-svg {
  width: 100%;
  height: 100%;
}

.snail-divider {
  width: 1px;
  border-left: 1.5px dashed var(--border-color);
  height: 60px;
  align-self: center;
  margin: 0 2rem;
  flex-shrink: 0;
}

.snail-status-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}

/* Snail Mode active badge */
.snail-active-badge-out {
  border: 1.5px solid var(--color-primary);
  background-color: rgba(0, 51, 255, 0.02);
  color: var(--color-primary);
  border-radius: 12px;
  padding: 0.65rem 1.15rem;
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}

.badge-snail-icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

/* Speed Cap box style */
.snail-speed-cap-badge {
  border: 1.5px solid var(--color-primary);
  border-radius: 12px;
  padding: 0.65rem 1.15rem;
  width: 100%;
  max-width: 250px;
  text-align: center;
  background-color: #ffffff;
}

.cap-lbl-mono {
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ==========================================================================
   RESPONSIVENESS (Features Section)
   ========================================================================== */
@media (max-width: 900px) {
  .dotted-canvas {
    display: none;
  }
  
  .visualizer-wrapper {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .floating-cards-grid {
    position: relative;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .connections-card {
    max-width: 100%;
  }
}

/* ==========================================================================
   COMPARISON SECTION STYLES (Built for Pure Performance)
   ========================================================================== */

.comparison-section {
  padding: 8rem 0;
  background: radial-gradient(circle at bottom center, rgba(0, 51, 255, 0.015) 0%, rgba(255, 255, 255, 0) 70%);
  border-top: 1px solid var(--border-light);
}

.comparison-header {
  text-align: center;
  margin-bottom: 5rem;
}

.comparison-header h2 {
  font-size: 3.25rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.comparison-subhead {
  font-family: monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.15em;
}

/* Wrapper to allow clean horizontal overflow scroll on small viewports */
.comparison-table-wrapper {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 240px 1.25fr 1fr 1fr;
  align-items: stretch;
  position: relative;
}

/* Rounded, elevated card backdrop overlay (Disabled to prevent grid auto-placement offset bugs) */
.highlight-column-card {
  display: none !important;
}

/* Highlighted Column Stripe Styles (Cross-browser bulletproof implementation) */
.highlighted-header,
.cell-primary {
  background-color: rgba(0, 51, 255, 0.04) !important;
  transition: background-color 0.3s ease;
}

/* Rounded top corners on Column 2 Header */
.highlighted-header {
  border-radius: 12px 12px 0 0;
}

/* Rounded bottom corners on Column 2 Last Cell */
.cell-last-primary {
  border-radius: 0 0 12px 12px;
}

/* Hover dynamic highlight stripe glow */
.comparison-grid:hover .highlighted-header,
.comparison-grid:hover .cell-primary {
  background-color: rgba(0, 51, 255, 0.07) !important;
}

/* Cell styles */
.table-header, .table-cell {
  position: relative; /* Enable z-index & correct absolute sibling layering */
  z-index: 2; /* Sit on top of the highlighter backdrop card */
  display: flex;
  align-items: center;
  height: 100%; /* Force perfect stretch across grid rows, aligning all bottom borders */
  transition: var(--transition-fast);
}

.table-header {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 1.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.table-cell {
  font-size: 0.92rem;
  padding: 1.35rem 1rem;
  border-bottom: 1px solid #f4f4f5; /* zinc-100 */
}

/* Remove bottom border on the last row */
.table-cell:nth-last-child(-n+4) {
  border-bottom: none;
}

/* Column specific text alignment */
.cell-left {
  text-align: left;
  justify-content: flex-start;
  font-weight: 600;
}

.cell-feature {
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 700; /* Bold label style matching the reference benchmark headers */
}

.cell-center {
  text-align: center;
  justify-content: center;
}

.cell-primary {
  color: var(--text-primary);
  font-weight: 700;
}

.cell-secondary {
  color: var(--text-secondary);
  font-weight: 400;
}

/* NextGen DLM column title & badge formatting */
.highlighted-header {
  position: relative; /* Enable z-index & absolute positioning context */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1rem; /* Match the exact same padding as normal headers */
}

.highlighted-header .header-title {
  font-size: 1.18rem;
  font-weight: 850;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.badge-recommended {
  display: none !important; /* Muted for flat reference image design */
}

/* Muted peer column headers */
.legacy-header, .native-header {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Responsive Styles for small viewports */
@media (max-width: 820px) {
  .comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1.5rem;
  }
  
  .comparison-grid {
    width: 820px; /* Keep exact table dimensions readable */
  }
}


/* ==========================================================================
   ARCHITECTURE SECTION STYLES (Bare-Metal Infrastructure)
   ========================================================================== */

.architecture-section {
  padding: 8rem 0;
  background: radial-gradient(circle at top center, rgba(0, 51, 255, 0.015) 0%, rgba(255, 255, 255, 0) 70%);
  border-top: 1px solid var(--border-light);
}

.architecture-header {
  text-align: center;
  margin-bottom: 5rem;
}

.architecture-header h2 {
  font-size: 3.25rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.architecture-subhead-mono {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.architecture-subhead {
  font-size: 1.25rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* Architecture Main Grid Layout */
.architecture-grid {
  display: grid;
  grid-template-columns: 260px 1fr 420px 1fr 260px; /* Perfectly calibrated card widths to fit smaller screens */
  align-items: center;
  row-gap: 2.5rem;
  column-gap: 0; /* Let the 1fr connector columns touch the cards flush, so the SVGs span the full distance without clipping or floating */
  width: 100%;
  max-width: 1200px; /* Expand to fill the full container width */
  margin: 0 auto;
}

/* Base Architecture Card Styles */
.architecture-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 2.25rem 1.75rem;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  height: 100%; /* Stretch cards vertically to equal height */
}

.architecture-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 20px 40px -15px rgba(0, 51, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.01);
}

.arch-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.arch-card-subtitle-mono {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* --- CARD 1: Manifest V3 Extension Specific Styles --- */
.ext-card {
  justify-content: flex-start;
  gap: 1.5rem;
}

.arch-inner-box {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  transition: var(--transition-fast);
}

.arch-inner-box:hover {
  background: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 51, 255, 0.03);
}

.arch-box-title {
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}

.api-flow-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  width: 100%;
  color: var(--color-primary);
}

.pulsing-arrow {
  color: var(--color-primary);
  animation: pulseArrow 1.6s infinite ease-in-out;
}

@keyframes pulseArrow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.api-mono-label {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(0, 51, 255, 0.04);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 51, 255, 0.08);
}

.arch-card-footer-mono {
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin-top: auto;
}

/* --- CONNECTORS STYLES --- */
.arch-connector-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0; /* Let SVG span the entire column width to touch card borders perfectly */
  position: relative;
  z-index: 10;
}

.connector-label {
  position: absolute;
  top: -1.75rem; /* Float the label cleanly above the connection line */
  left: 50%;
  transform: translateX(-50%);
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
  z-index: 15;
}

.connector-svg {
  width: 100%;
  height: 24px;
  display: block;
  overflow: visible; /* Prevents boundary circles on grid cells from being clipped on edge boundaries */
}

.connector-line {
  stroke: var(--color-primary);
  stroke-width: 1.5;
  opacity: 0.6;
}

.connector-boundary {
  fill: #ffffff;
  stroke: var(--color-primary);
  stroke-width: 1.5;
}

.connector-particle {
  fill: var(--color-primary);
  filter: drop-shadow(0 0 4px var(--color-primary));
}

/* --- CARD 2: Rust Core Engine Specific Styles --- */
.engine-card {
  justify-content: flex-start;
}

.global-queue-container {
  background: rgba(0, 51, 255, 0.02);
  border: 1.5px solid var(--color-primary);
  border-radius: 16px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.queue-title-mono {
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

.queue-slots {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  justify-content: center;
}

.queue-slot {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  background: #ffffff;
  transition: var(--transition-fast);
}

.queue-slot.active {
  background: var(--color-primary);
  box-shadow: 0 0 6px rgba(0, 51, 255, 0.15);
}

.queue-slot-dots {
  font-family: monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  width: 16px;
  text-align: center;
  line-height: 1;
}

/* Workers columns container */
.workers-columns-container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.worker-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.worker-column-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20px;
}

.worker-column .stealing-arrow,
.worker-column .thread-arrow {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0.35rem 0;
  display: inline-block;
  text-align: center;
}

.worker-column .stealing-arrow {
  animation: bounceArrowVertical 1.6s infinite ease-in-out;
}

.worker-column .thread-arrow {
  animation: bounceArrowVertical 1.6s infinite ease-in-out;
  animation-delay: 0.4s;
}

@keyframes bounceArrowVertical {
  0%, 100% {
    transform: translateY(-2px);
    opacity: 0.4;
  }
  50% {
    transform: translateY(2px);
    opacity: 1;
  }
}

.worker-column .worker-box {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-fast);
}

.worker-column .worker-box:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 10px rgba(0, 51, 255, 0.02);
}

.worker-lbl-mono {
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-secondary);
}

.worker-slots {
  display: flex;
  align-items: center;
  gap: 3px;
}

.w-slot {
  width: 12px;
  height: 12px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: #ffffff;
}

.w-slot.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.w-slot-dots {
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
}

.worker-box-dots {
  font-family: monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-secondary);
  width: 12px;
  text-align: center;
}

.worker-column .thread-pill {
  width: 100%;
  border: 1.5px solid var(--color-primary);
  background-color: rgba(0, 51, 255, 0.02);
  color: var(--color-primary);
  border-radius: 99px;
  padding: 0.45rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 750;
  text-align: center;
  font-family: monospace;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.worker-column .thread-pill:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 51, 255, 0.1);
}

.thread-dots {
  font-family: monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  width: 16px;
  text-align: center;
}

/* Engine dashed feature box */
.engine-features-dashbox {
  border: 1.5px dashed var(--border-color);
  border-radius: 16px;
  padding: 1rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.dash-feat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  text-align: center;
}

.feat-icon {
  color: var(--color-primary);
  transition: transform 0.3s ease;
}

.dash-feat-item:hover .feat-icon {
  transform: scale(1.15);
}

.dash-feat-item span {
  font-size: 0.65rem;
  font-weight: 750;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* --- CARD 3: Pre-allocated Byte Offsets Specific Styles --- */
.disk-card {
  justify-content: flex-start;
}

.disk-grid-wrapper {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.15rem 0.75rem; /* Balanced horizontal padding to prevent blocks from touching margins */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: var(--transition-fast);
}

.disk-card:hover .disk-grid-wrapper {
  border-color: var(--color-primary);
  background: #ffffff;
}

.disk-grid {
  display: grid;
  grid-template-columns: repeat(8, 16px); /* Scaled from 20px to prevent card horizontal overflow */
  grid-gap: 4px; /* Slightly tighter gap to save horizontal space and create clean margins */
  align-items: center;
  justify-content: center;
}

.disk-block {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-color);
  border-radius: 3px; /* Tighter border radius for 16px blocks */
  background-color: #ffffff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.disk-block.active {
  border-color: rgba(0, 51, 255, 0.3);
  background-color: rgba(0, 51, 255, 0.05);
}

.disk-block-dots {
  grid-column: 4;
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  line-height: 1;
  height: 16px; /* Matched to 16px block height */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sequential glowing wave on disk blocks when card is hovered */
.disk-card:hover .disk-block {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  box-shadow: 0 0 8px rgba(0, 51, 255, 0.4);
}

/* Apply beautiful staggered transition delays on hover to generate a sequential wave effect */
.disk-card:hover .disk-block:nth-child(8n+1) { transition-delay: 0.02s; }
.disk-card:hover .disk-block:nth-child(8n+2) { transition-delay: 0.06s; }
.disk-card:hover .disk-block:nth-child(8n+3) { transition-delay: 0.1s; }
.disk-card:hover .disk-block:nth-child(8n+5) { transition-delay: 0.14s; }
.disk-card:hover .disk-block:nth-child(8n+6) { transition-delay: 0.18s; }
.disk-card:hover .disk-block:nth-child(8n+7) { transition-delay: 0.22s; }
.disk-card:hover .disk-block:nth-child(8n+8) { transition-delay: 0.26s; }

/* File Allocation Map timeline style */
.allocation-map-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 2rem;
  padding: 0 0.5rem;
}

.alloc-title-mono {
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.alloc-timeline {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  height: 16px;
}

.alloc-node-circle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  background: #ffffff;
  flex-shrink: 0;
}

.alloc-node-square {
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--color-primary);
  background: var(--color-primary);
  flex-shrink: 0;
}

.alloc-dash-line {
  flex: 1;
  height: 1.5px;
  border-top: 1.5px dashed var(--color-primary);
  opacity: 0.5;
}

.alloc-node-dots {
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

/* Disk features footer */
.disk-features-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  width: 100%;
}

.disk-feat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  text-align: center;
}

.disk-feat-icon {
  color: var(--color-primary);
  transition: transform 0.3s ease;
}

.disk-feat-item:hover .disk-feat-icon {
  transform: scale(1.15);
}

.disk-feat-lbl-mono {
  font-family: monospace;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* --- LEGEND STYLES --- */
.architecture-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-top: 5rem;
  border-top: 1px solid var(--border-light);
  padding-top: 2rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.legend-line {
  height: 2px;
  width: 32px;
  display: inline-block;
}

.legend-dashed-blue {
  border-top: 2px dashed var(--color-primary);
}

.legend-solid-blue {
  background-color: var(--color-primary);
  position: relative;
}

.legend-solid-blue::after {
  content: '→';
  position: absolute;
  right: -2px;
  top: -8.5px;
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.legend-node {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-node-circle {
  border: 1.5px solid var(--color-primary);
  background-color: #ffffff;
}

.legend-text-mono {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* ==========================================================================
   RESPONSIVENESS (Architecture Section)
   ========================================================================== */
@media (max-width: 1180px) { /* Increased breakpoint to guarantee perfect fit on all landscape views without overflow */
  .architecture-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 480px;
    margin: 0 auto;
  }
  
  .architecture-card {
    height: auto;
  }
  
  .arch-connector-wrapper {
    height: 60px;
    padding: 0;
  }
  
  .con1-wrapper .connector-svg {
    transform: rotate(90deg) scaleY(1.5);
    height: 32px;
    margin-top: 10px;
  }
  
  .con2-wrapper .connector-svg {
    transform: rotate(90deg) scaleY(1.5);
    height: 32px;
    margin-top: 10px;
  }
  
  .connector-label {
    margin-bottom: 0.25rem;
  }
  
  .architecture-legend {
    gap: 1.5rem;
    justify-content: center; /* Horizontally center diagram legend items on tablet/mobile screens */
    max-width: 480px;
    margin: 4rem auto 0 auto;
  }
}

/* ==========================================================================
   TESTIMONIALS SECTION STYLES (Validated by Power Users)
   ========================================================================== */

.testimonials-section {
  padding: 8rem 0;
  background: radial-gradient(circle at bottom center, rgba(0, 51, 255, 0.01) 0%, rgba(255, 255, 255, 0) 70%);
  border-top: 1px solid var(--border-light);
}

.testimonials-header {
  text-align: center;
  margin-bottom: 5rem;
}

.testimonials-header h2 {
  font-size: 3.25rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.testimonials-subhead-mono {
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* Carousel Outer Container */
.testimonials-carousel-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

/* Slider Wrapper */
.testimonials-slider {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
  transition: all 0.4s ease;
}

/* Base Card Style */
.testimonial-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 2.5rem 2.25rem;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.4s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Card hover scaling and brand glow */
.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-color);
  box-shadow: var(--shadow-hover);
}

/* Highlighted Card Style (Marcus L. - Rust Dev) */
.highlighted-testi-card {
  border-color: var(--color-primary);
  background-color: rgba(0, 51, 255, 0.01);
  box-shadow: 0 15px 35px -10px rgba(0, 51, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.01);
}

.highlighted-testi-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 25px 50px -15px rgba(0, 51, 255, 0.1), 0 1px 4px rgba(0, 0, 0, 0.02);
}

/* Top user row */
.testi-user-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  width: 100%;
}

.testi-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
}

.testi-user-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.testi-name-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.testi-username {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.testi-dev-badge {
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.testi-usertitle {
  font-family: monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Quote marks */
.testi-quote-mark {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  font-family: inherit;
  margin-top: -0.5rem;
  margin-bottom: 0.75rem;
  user-select: none;
  opacity: 0.85;
}

/* Testimonial body text */
.testi-body {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 2.25rem;
  flex-grow: 1;
  font-family: var(--font-main);
}

.testi-body-bold {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Card footer separator line and verified row */
.testi-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-light);
  padding-top: 1.25rem;
  width: 100%;
  font-family: monospace;
}

.testi-check-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.testi-sep {
  color: var(--border-color);
  font-weight: 400;
}

/* Carousel control arrows */
.carousel-arrow {
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
  z-index: 20;
  flex-shrink: 0;
}

.carousel-arrow:hover {
  background: #ffffff;
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 8px 16px rgba(0, 51, 255, 0.08);
  transform: scale(1.05);
}

.carousel-arrow:active {
  transform: scale(0.95);
}

/* Desktop Arrow Hiding */
.carousel-arrow {
  display: none;
}

/* Responsiveness for Tablets and Mobile */
@media (max-width: 1024px) {
  .testimonials-carousel-container {
    gap: 0.75rem;
    padding: 0 1rem;
  }
  
  .carousel-arrow {
    display: flex; /* Show arrows on smaller viewports where content overflows */
  }
  
  .testimonials-slider {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Hide standard firefox scrollbar */
    padding: 1.5rem 0.25rem;
    width: calc(100% - 110px); /* Leave room for arrows */
  }
  
  .testimonials-slider::-webkit-scrollbar {
    display: none; /* Hide standard chrome/safari scrollbar */
  }
  
  .testimonial-card {
    flex: 0 0 100%; /* Take full available slide width */
    scroll-snap-align: center;
  }
}

@media (max-width: 600px) {
  .testimonials-carousel-container {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 1rem;
  }
  
  .testimonials-slider {
    width: 100%;
  }
  
  .carousel-arrow {
    display: none; /* Hide arrows on absolute mobile, rely on swiping */
  }
  
  .testimonials-header h2 {
    font-size: 2.25rem;
  }
}

/* ==========================================================================
   DEEP DIVES & ENGINEERING INSIGHTS SECTION STYLES (Technical Chronicles)
   ========================================================================== */

.deep-dives-section {
  padding: 8rem 0;
  background: radial-gradient(circle at top center, rgba(0, 51, 255, 0.015) 0%, rgba(255, 255, 255, 0) 65%), #fafafa;
  border-top: 1px solid var(--border-light);
}

.deep-dives-header {
  text-align: center;
  margin-bottom: 5rem;
}

.deep-dives-header h2 {
  font-size: 3.25rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.deep-dives-subhead-mono {
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* 3-Column Grid */
.deep-dives-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}

/* Base Card Style (Standard Light Grey Cards) */
.insight-card {
  background: #f7f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 2.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.4s ease;
  height: 100%;
  position: relative;
  box-shadow: none;
}

.insight-card:hover {
  transform: translateY(-4px);
  border-color: #d1d5db;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.02);
}

/* Highlighted Card Style (Why We Abandoned Electron - Solid White with Blue Border) */
.highlighted-insight-card {
  background: #ffffff;
  border: 2px solid #0033ff;
  box-shadow: 0 20px 40px rgba(0, 51, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.01);
}

.highlighted-insight-card:hover {
  border-color: #0033ff;
  box-shadow: 0 25px 50px rgba(0, 51, 255, 0.1), 0 1px 4px rgba(0, 0, 0, 0.02);
}

/* Tags & Badges */
.insight-tag {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0033ff;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.featured-badge {
  background-color: #0033ff;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
  white-space: nowrap;
  display: inline-block;
}

/* Titles */
.insight-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.insight-title-large {
  font-size: 1.85rem;
  line-height: 1.2;
}

/* Divider line */
.insight-divider {
  width: 100%;
  height: 1px;
  background-color: #e5e7eb;
  margin-bottom: 1.5rem;
}

/* Description (Monospace Technical Logs) */
.insight-desc {
  font-family: monospace;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 2rem;
  flex-grow: 1;
}

/* Inline Diagram (Transparent directly on card background) */
.insight-diagram-container {
  width: 100%;
  margin: 1.5rem 0 2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.insight-diagram-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Footer (Time to Read) */
.insight-footer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0033ff;
}

.insight-clock-icon {
  width: 14px;
  height: 14px;
  stroke: #0033ff;
  stroke-width: 2.5;
}

/* Responsiveness */
@media (max-width: 992px) {
  .deep-dives-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .deep-dives-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 480px;
  }
  
  .deep-dives-header h2 {
    font-size: 2.25rem;
  }
  
  .insight-title-large {
    font-size: 1.45rem;
  }
}


/* ==========================================================================
   BOTTOM CTA SECTION STYLES
   ========================================================================== */

.bottom-cta-section {
  padding: 8rem 0;
  background-color: #ffffff;
  text-align: center;
  border-top: 1px solid var(--border-light, #e5e7eb);
}

.bottom-cta-heading {
  font-size: 3.25rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary, #0f172a);
  line-height: 1.1;
  margin-bottom: 3rem;
  text-align: center;
}

.bottom-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.btn-bottom-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #0033ff;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 700;
  padding: 0.95rem 2.5rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.25s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 51, 255, 0.08);
}

.btn-bottom-primary:hover {
  transform: translateY(-2px);
  background-color: #0022cc;
  box-shadow: 0 12px 24px rgba(0, 51, 255, 0.2);
}

.btn-bottom-primary:active {
  transform: translateY(0);
}

.btn-bottom-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1.5px solid #0033ff;
  background-color: #ffffff;
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 700;
  padding: 0.95rem 2.5rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.btn-bottom-secondary:hover {
  transform: translateY(-2px);
  border-color: #0022cc;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
}

.btn-bottom-secondary:active {
  transform: translateY(0);
}

/* Secondary Button Custom Brackets & Arrow Styles */
.btn-bottom-secondary .btn-bracket {
  color: #0033ff;
  font-weight: 700;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.btn-bottom-secondary .btn-arrow {
  color: #0033ff;
  margin-right: 0.1rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.btn-bottom-secondary .btn-text {
  color: #0f172a;
}

/* Micro-animations on hover */
.btn-bottom-secondary:hover .btn-bracket:first-child {
  transform: translateX(-3px);
}

.btn-bottom-secondary:hover .btn-bracket:last-child {
  transform: translateX(3px);
}

.btn-bottom-secondary:hover .btn-arrow {
  transform: translateY(2px);
}


/* ==========================================================================
   FOOTER SECTION STYLES
   ========================================================================== */

.footer-section {
  background-color: #fafafa;
  padding: 6rem 0 3rem 0;
  border-top: 1px solid var(--border-light, #e5e7eb);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 4rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 5rem auto;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-logo {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.footer-logo-img {
  height: 24px;
  width: auto;
  display: block;
  transition: opacity 0.2s ease;
}

.footer-logo-img:hover {
  opacity: 0.85;
}

.footer-tagline {
  font-family: monospace;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  margin: 0;
}

.footer-col h3 {
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--text-primary, #0f172a);
  margin: 0 0 1.25rem 0;
  letter-spacing: -0.01em;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 0.75rem;
}

.footer-col li:last-child {
  margin-bottom: 0;
}

.footer-col a {
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--text-secondary, #475569);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: #0033ff;
}

/* Footer Bottom Bar */
.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-light, #e5e7eb);
  padding-top: 2rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-copyright {
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
}

.status-indicator {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
  display: inline-block;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}


/* ==========================================================================
   BOTTOM CTA & FOOTER RESPONSIVENESS
   ========================================================================== */

@media (max-width: 900px) {
  .footer-grid {
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .bottom-cta-heading {
    font-size: 2.5rem;
  }
  
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-bottom: 4rem;
  }
  
  .footer-bottom-bar {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }
}

@media (max-width: 500px) {
  .bottom-cta-heading {
    font-size: 2.25rem;
    margin-bottom: 2rem;
  }
  
  .bottom-cta-actions {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .btn-bottom-primary, .btn-bottom-secondary {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .footer-brand-col {
    align-items: center;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .footer-col {
    text-align: center;
  }
}


/* ==========================================================================
   NAVIGATION BRAND & STATUS PILL POLISH (Navbar Linkages)
   ========================================================================== */

.nav-status-linked {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  background: #f1f5f9;
  padding: 0.4rem 0.95rem;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
}

.status-linked-dot {
  width: 7px;
  height: 7px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  display: inline-block;
  animation: pulse-linked-dot 2s infinite;
}

@keyframes pulse-linked-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}


/* ==========================================================================
   FEATURES PAGE HERO & GRID DIAGRAM STYLES
   ========================================================================== */

.feature-page-hero {
  padding: 10rem 0 7rem 0;
  background: radial-gradient(circle at top center, rgba(0, 51, 255, 0.015) 0%, rgba(255, 255, 255, 0) 65%), #ffffff;
  border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.feature-page-header {
  text-align: center;
  margin-bottom: 5.5rem;
}

.feature-title-flex {
  font-size: 3.25rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary, #0f172a);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.feature-subhead-mono {
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  letter-spacing: 0.08em;
}

/* Centered Interactive Diagram Wrapper */
.feature-diagram-wrapper {
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.diagram-column {
  width: 100%;
}

.window-label {
  font-family: monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1rem;
}


/* ==========================================================================
   1. MOCK CHROME BROWSER WINDOW STYLES
   ========================================================================== */

.mock-window-frame {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.01);
  overflow: hidden;
  width: 100%;
}

/* Chrome Header Bar */
.chrome-frame .mock-window-bar {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.window-dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.window-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.dot-close { background-color: #ff5f56; }
.dot-minimize { background-color: #ffbd2e; }
.dot-maximize { background-color: #27c93f; }

.chrome-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.chrome-tab {
  background: #e2e8f0;
  border-radius: 6px 6px 0 0;
  padding: 0.4rem 1.25rem;
  font-family: var(--font-main, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 26px;
}

.chrome-tab.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.01);
}

.tab-close-icon {
  width: 10px;
  height: 10px;
  stroke: #94a3b8;
  stroke-width: 2.5;
  cursor: pointer;
}

.chrome-tab-add {
  font-size: 1rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  padding: 0 0.25rem;
}

/* Chrome Address Bar Row */
.chrome-address-bar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-arrows {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-arrow, .nav-refresh {
  width: 14px;
  height: 14px;
  stroke: #64748b;
  stroke-width: 2;
  cursor: pointer;
}

.chrome-url-bar {
  flex-grow: 1;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 82%;
}

.url-lock-icon {
  width: 11px;
  height: 11px;
  stroke: #16a34a;
  stroke-width: 2.5;
}

.url-text {
  font-family: var(--font-main, sans-serif);
  font-size: 0.72rem;
  font-weight: 550;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}

.url-icons {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.url-star, .url-dots {
  width: 12px;
  height: 12px;
  stroke: #64748b;
  stroke-width: 2;
  cursor: pointer;
}

/* Browser Page Content Area */
.chrome-content {
  padding: 1.5rem;
  background-color: #ffffff;
  position: relative;
  min-height: 290px;
}

.browser-video-box {
  aspect-ratio: 16 / 9;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  width: 100%;
}

.video-play-btn {
  width: 32px;
  height: 32px;
  stroke: #64748b;
  fill: rgba(100, 116, 139, 0.05);
  stroke-width: 1.75;
  cursor: pointer;
  transition: transform 0.2s ease, stroke 0.2s ease;
}

.browser-video-box:hover .video-play-btn {
  transform: scale(1.1);
  stroke: #0033ff;
}

.browser-video-details h3 {
  font-size: 0.95rem;
  font-weight: 750;
  color: #0f172a;
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.01em;
}

.video-format {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 0.85rem 0;
  letter-spacing: 0.02em;
}

.video-link-container {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.link-icon {
  width: 12px;
  height: 12px;
  stroke: #0033ff;
  stroke-width: 2.5;
}

.video-link-url {
  font-family: var(--font-main, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  color: #0033ff;
  text-decoration: underline;
  cursor: pointer;
}

/* Absolute Positioning Dropdown Context Menu Overlay */
.chrome-context-menu {
  position: absolute;
  left: 35px;
  bottom: 20px;
  z-index: 100;
  width: 220px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.45rem 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 2px 5px rgba(0, 0, 0, 0.02);
}

.context-item {
  padding: 0.45rem 1rem;
  font-family: var(--font-main, sans-serif);
  font-size: 0.76rem;
  font-weight: 550;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.context-item:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.context-divider {
  height: 1px;
  background-color: #e2e8f0;
  margin: 0.35rem 0;
}

/* Highlighted Context Menu Downloader CTA */
.highlighted-context-item {
  background-color: #0033ff !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.highlighted-context-item:hover {
  background-color: #0022cc !important;
}

.menu-download-icon {
  width: 12px;
  height: 12px;
  stroke: #ffffff;
  stroke-width: 2.75;
}


/* ==========================================================================
   CENTER SOCKET PIPELINE CAPSULE STYLES
   ========================================================================== */

.socket-pipeline-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.pipeline-line-left, .pipeline-line-right {
  height: 2px;
  background-color: #0033ff;
  flex-grow: 1;
  position: relative;
}

/* Dot connectors linking exact window edges */
.pipeline-line-left::before {
  content: '';
  width: 8px;
  height: 8px;
  background-color: #0033ff;
  border-radius: 50%;
  position: absolute;
  top: -3px;
  left: 0;
}

.pipeline-line-right::after {
  content: '';
  width: 8px;
  height: 8px;
  background-color: #0033ff;
  border-radius: 50%;
  position: absolute;
  top: -3px;
  right: 0;
}

.pipeline-capsule {
  background-color: #0033ff;
  color: #ffffff;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 8px 20px rgba(0, 51, 255, 0.12);
  flex-shrink: 0;
}

.pipeline-lock-icon {
  width: 12px;
  height: 12px;
  stroke: #ffffff;
  stroke-width: 2.5;
}

.pipeline-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.p-title {
  font-family: monospace;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  opacity: 0.9;
}

.p-status {
  font-family: monospace;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
}


/* ==========================================================================
   2. MOCK DESKTOP TAURI APP WINDOW STYLES
   ========================================================================== */

.app-frame {
  display: flex;
  flex-direction: column;
}

/* Title Bar */
.app-frame .mock-window-bar {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-brand-title {
  font-family: var(--font-main, sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0033ff;
  letter-spacing: -0.01em;
}

.window-controls {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.control-btn {
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s ease;
}

.control-btn:hover {
  color: #0f172a;
}

.control-btn.close:hover {
  color: #ef4444;
}

/* App Workspace Inner Layout */
.app-workspace {
  display: flex;
  height: 290px;
  background-color: #ffffff;
  width: 100%;
}

/* Left Sidebar */
.app-sidebar {
  width: 155px;
  border-right: 1px solid #f1f5f9;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background-color: #ffffff;
  flex-shrink: 0;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  font-family: var(--font-main, sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-item:hover {
  background-color: #f8fafc;
  color: #0f172a;
}

.sidebar-item.active {
  background-color: #eff6ff;
  color: #0033ff;
  font-weight: 700;
}

.sidebar-icon {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.25;
}

/* Sidebar Monospace Indicator Box */
.sidebar-status-box {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.status-box-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.status-dot {
  width: 6px;
  height: 6px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
}

.status-label {
  font-family: monospace;
  font-size: 0.64rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: -0.01em;
}

.status-sub {
  font-family: monospace;
  font-size: 0.64rem;
  font-weight: 800;
  color: #16a34a;
}

/* App Download Content Panel */
.app-content-area {
  flex-grow: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  overflow: hidden;
}

.panel-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 1rem 0;
  letter-spacing: -0.01em;
}

/* Download Row Card */
.active-download-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.95rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #ffffff;
  width: 100%;
}

.file-icon-wrapper {
  position: relative;
  flex-shrink: 0;
}

.file-svg-icon {
  width: 32px;
  height: 32px;
  stroke: #94a3b8;
  stroke-width: 1.5;
}

.file-badge {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0033ff;
  color: #ffffff;
  font-family: var(--font-main, sans-serif);
  font-size: 0.52rem;
  font-weight: 800;
  padding: 0.1rem 0.25rem;
  border-radius: 3px;
  letter-spacing: 0.02em;
}

.file-info-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex-grow: 1;
  width: 100%;
}

.file-name {
  font-size: 0.82rem;
  font-weight: 750;
  color: #0f172a;
  margin-bottom: 0.1rem;
}

.file-source {
  font-size: 0.66rem;
  font-weight: 550;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.file-specs-mono {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 800;
  color: #64748b;
  margin-bottom: 0.45rem;
  width: 100%;
}

.specs-sep {
  color: #cbd5e1;
}

.file-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.file-status-text {
  font-family: monospace;
  font-size: 0.66rem;
  font-weight: 800;
  color: #0033ff;
}

.file-speed-val {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0033ff;
  flex-shrink: 0;
}

/* App Footer Status Bar */
.app-status-bar {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 800;
  color: #64748b;
  width: 100%;
}

.status-item-sep {
  color: #e2e8f0;
}

.speed-highlight {
  color: #0033ff;
}


/* ==========================================================================
   BOTTOM CALLOUT CARD BANNER STYLES
   ========================================================================== */

.bottom-callout-card {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  margin: 3.5rem auto 0 auto;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  background-color: #ffffff;
  width: 100%;
  max-width: 1100px;
}

.callout-icon-wrapper {
  background-color: rgba(0, 51, 255, 0.04);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.callout-shield-icon {
  width: 16px;
  height: 16px;
  stroke: #0033ff;
  stroke-width: 2.5;
}

.callout-text {
  font-family: var(--font-main, sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.6;
  text-align: left;
  margin: 0;
}


/* ==========================================================================
   FEATURES RESPONSIVE LAYOUT BREAKPOINTS
   ========================================================================== */

@media (max-width: 1100px) {
  .feature-diagram-wrapper {
    grid-template-columns: 1fr 100px 1fr;
  }
}

@media (max-width: 1024px) {
  /* Rotates the layout to stack vertically: Chrome -> Pipeline -> Tauri App */
  .feature-diagram-wrapper {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
    max-width: 580px;
  }
  
  .socket-pipeline-wrapper {
    flex-direction: column;
    height: 140px;
    width: 100%;
  }
  
  .pipeline-line-left, .pipeline-line-right {
    width: 2px;
    height: auto;
    flex-grow: 1;
  }
  
  /* Reposition dot connectors for vertical lines */
  .pipeline-line-left::before {
    left: -3px;
    top: 0;
  }
  
  .pipeline-line-right::after {
    left: -3px;
    bottom: 0;
    top: auto;
    right: auto;
  }
  
  .pipeline-capsule {
    padding: 0.8rem 1.25rem;
  }
  
  .bottom-callout-card {
    max-width: 580px;
  }
}

@media (max-width: 768px) {
  .feature-title-flex {
    font-size: 2.5rem;
  }
}

@media (max-width: 600px) {
  /* Dynamic sizing for small screens */
  .chrome-context-menu {
    width: 190px;
    left: 20px;
    bottom: 15px;
  }
  
  .context-item {
    padding: 0.4rem 0.75rem;
    font-size: 0.72rem;
  }
  
  .app-sidebar {
    width: 44px;
    padding: 0.75rem 0.25rem;
    align-items: center;
  }
  
  .sidebar-item span, .sidebar-status-box {
    display: none;
  }
  
  .sidebar-item {
    padding: 0.55rem;
    justify-content: center;
    border-radius: 50%;
  }
  
  .active-download-card {
    flex-direction: column;
    padding: 0.85rem;
    align-items: center;
    text-align: center;
  }
  
  .file-info-details {
    align-items: center;
    text-align: center;
    margin-top: 0.25rem;
  }
  
  .file-speed-val {
    margin-top: 0.45rem;
  }
  
  .app-status-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.75rem;
  }
  
  .status-item-sep {
    display: none;
  }
  
  .bottom-callout-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem;
  }
  
  .callout-text {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .feature-title-flex {
    font-size: 2rem;
  }
  
  .chrome-url-bar {
    max-width: 65%;
  }
}


/* ==========================================================================
   STEP 2 SECTION STYLES (Point. Click. Stream Captured.)
   ========================================================================== */

.step-two-section {
  padding: 8rem 0;
  background: radial-gradient(circle at top center, rgba(0, 51, 255, 0.01) 0%, rgba(255, 255, 255, 0) 70%), #fafafa;
  border-top: 1px solid var(--border-light, #e5e7eb);
  border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.step-two-header {
  text-align: center;
  margin-bottom: 5rem;
}

.step-two-header h2 {
  font-size: 3.25rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary, #0f172a);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.step-two-subhead-mono {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  letter-spacing: 0.05em;
}

.step-two-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}

.step-two-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.streamtube-frame {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  box-shadow: var(--shadow-premium, 0 10px 30px rgba(0, 0, 0, 0.03));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.streamtube-frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.streamtube-frame .mock-window-bar {
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
}

.bar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.icon-menu {
  width: 18px;
  height: 18px;
  color: #64748b;
  cursor: pointer;
  stroke-width: 2.25;
}

.brand-streamtube {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.st-logo-box {
  background-color: #ff0000;
  width: 24px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-logo-box svg {
  width: 8px;
  height: 8px;
}

.st-text {
  font-size: 0.98rem;
  font-weight: 800;
  color: #000000;
  letter-spacing: -0.03em;
  font-family: var(--font-main, sans-serif);
}

.bar-center {
  flex-grow: 1;
  max-width: 220px;
  margin: 0 auto;
}

.search-box {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 99px;
  padding: 0 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  width: 100%;
}

.search-placeholder {
  font-size: 0.78rem;
  color: #94a3b8;
  font-family: var(--font-main, sans-serif);
  font-weight: 500;
}

.icon-search {
  width: 12px;
  height: 12px;
  color: #64748b;
  stroke-width: 2.5;
}

.bar-right {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  color: #64748b;
}

.bar-right svg {
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition: var(--transition-fast, 0.2s ease);
}

.bar-right svg:hover {
  color: #0f172a;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.user-avatar svg {
  width: 13px;
  height: 13px;
}

.streamtube-content {
  display: flex;
  flex-direction: column;
}

.st-video-player {
  position: relative;
  width: 100%;
  height: 250px;
  background-color: #090d16;
  overflow: hidden;
}

.st-skyline-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
  pointer-events: none;
}

/* Hover to Capture Button Overlay */
.hover-btn-overlay {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: #ffffff;
  border: 1.5px solid #0033ff;
  border-radius: 6px;
  padding: 0.45rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #0033ff;
  font-size: 0.78rem;
  font-weight: 750;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 51, 255, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-btn-overlay:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 51, 255, 0.28);
}

.down-arrow-svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

/* Compact Download Button Outline */
.hover-btn-overlay-compact {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: #ffffff;
  border: 1.5px solid #0033ff;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0033ff;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 51, 255, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-btn-overlay-compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 51, 255, 0.28);
}

.down-arrow-svg-compact {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

/* Resolution Dropdown Menu */
.st-resolution-dropdown {
  position: absolute;
  top: 54px;
  right: 16px;
  width: 245px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  z-index: 100;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.res-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.95rem;
  font-size: 0.72rem;
  font-weight: 650;
  color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-align: left;
}

.res-item:last-child {
  border-bottom: none;
}

.res-item:hover {
  background-color: #f8fafc;
}

.res-item.active {
  background-color: #0033ff;
  color: #ffffff;
  border-bottom-color: #0033ff;
}

.res-item.active:hover {
  background-color: #0022cc;
}

.res-download-icon, .res-music-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
  flex-shrink: 0;
}

/* Cursor Pointers */
.st-cursor {
  position: absolute;
  z-index: 200;
  pointer-events: none;
  animation: cursorPulse 2s infinite ease-in-out;
}

.st-cursor-left {
  top: 32px;
  right: 22px;
}

.st-cursor-right {
  top: 68px;
  right: 22px;
}

.st-cursor-svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 5px rgba(0, 51, 255, 0.35));
}

@keyframes cursorPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08) translate(-1px, -1px);
  }
}

/* Video Controls Bar */
.st-controls-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
  padding: 0.65rem 0.85rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.st-progress-bar {
  width: 100%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
}

.st-progress-loaded {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 65%;
  background-color: rgba(255, 255, 255, 0.35);
}

.st-progress-played {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 25%;
  background-color: #ff0000;
}

.st-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
}

.controls-left, .controls-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.st-controls-row svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
  color: #ffffff;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.st-controls-row svg:hover {
  opacity: 1;
  transform: scale(1.1);
}

.st-time {
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.9;
}

.c-cc {
  font-family: monospace;
  font-size: 0.62rem;
  font-weight: 800;
  border: 1.5px solid #ffffff;
  border-radius: 2px;
  padding: 0 0.15rem;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  opacity: 0.9;
  user-select: none;
}

/* Stats Block */
.st-title-block {
  padding: 1.25rem 1rem;
  background-color: #ffffff;
  border-top: 1px solid #f1f5f9;
  text-align: left;
}

.st-title-block h3 {
  font-size: 0.88rem;
  font-weight: 750;
  color: #0f172a;
  margin: 0 0 0.45rem 0;
  letter-spacing: -0.015em;
  font-family: var(--font-main, sans-serif);
}

.st-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.st-stats-left {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 550;
}

.st-dot-sep {
  color: #cbd5e1;
}

.st-stats-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.st-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 750;
  color: #475569;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.st-btn:hover {
  opacity: 1;
  color: #0f172a;
}

.st-btn svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.25;
}

.st-more {
  font-weight: 800;
}

/* Bottom Tagline Banner */
.step-two-bottom-banner {
  border-top: 1px solid var(--border-light, #e5e7eb);
  margin-top: 4.5rem;
  padding-top: 2.5rem;
  text-align: center;
}

.tagline-text {
  font-family: monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  margin: 0;
}

/* ==========================================================================
   STEP 2 RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 1024px) {
  .step-two-grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
    max-width: 580px;
  }
}

@media (max-width: 600px) {
  .search-box {
    max-width: 130px;
  }
  
  .bar-right {
    gap: 0.75rem;
  }
  
  .st-title-block h3 {
    font-size: 0.82rem;
  }
  
  .st-stats-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .st-stats-right {
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid #f1f5f9;
    padding-top: 0.65rem;
  }
  
  .st-cursor-left {
    right: 12px;
  }
  
  .st-cursor-right {
    right: 12px;
  }
}

@media (max-width: 480px) {
  .search-box {
    display: none;
  }
  
  .st-resolution-dropdown {
    width: 210px;
    right: 12px;
  }
  
  .res-item {
    padding: 0.55rem 0.75rem;
    font-size: 0.68rem;
  }
}


/* ==========================================================================
   STEP 3 SECTION STYLES (Intelligent Sorting)
   ========================================================================== */

.step-three-section {
  padding: 8rem 0;
  background: radial-gradient(circle at bottom center, rgba(0, 51, 255, 0.01) 0%, rgba(255, 255, 255, 0) 70%), #ffffff;
  border-top: 1px solid var(--border-light, #e5e7eb);
}

.step-three-header {
  text-align: center;
  margin-bottom: 5rem;
}

.step-three-header h2 {
  font-size: 3.25rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary, #0f172a);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.step-three-subhead-mono {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  letter-spacing: 0.05em;
}

.step-three-container {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 4rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  box-shadow: var(--shadow-premium, 0 10px 30px rgba(0, 0, 0, 0.02));
}

.step-three-cols-header {
  display: flex;
  justify-content: space-between;
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.05em;
  padding: 0 0.5rem;
  border-bottom: 1px dashed #cbd5e1;
  padding-bottom: 1rem;
}

.step-three-rows {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.step-three-row {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  align-items: center;
  gap: 1.5rem;
  position: relative;
}

.routing-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 84px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.routing-card:hover {
  transform: translateY(-2px);
  border-color: #0033ff;
  box-shadow: 0 12px 25px rgba(0, 51, 255, 0.04);
}

.file-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.ppt-icon-box {
  background-color: rgba(234, 88, 12, 0.06);
  color: #ea580c;
  border: 1px solid rgba(234, 88, 12, 0.12);
}

.mp4-icon-box {
  background-color: rgba(0, 51, 255, 0.06);
  color: #0033ff;
  border: 1px solid rgba(0, 51, 255, 0.12);
}

.exe-icon-box {
  background-color: rgba(71, 85, 105, 0.06);
  color: #475569;
  border: 1px solid rgba(71, 85, 105, 0.12);
}

.file-icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

.file-letter {
  position: absolute;
  font-weight: 800;
  font-size: 0.72rem;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-main, sans-serif);
}

.file-play-box {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #0033ff;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2.5px;
}

.file-play-box svg {
  width: 100%;
  height: 100%;
}

.file-exe-box {
  position: absolute;
  width: 12px;
  height: 12px;
  color: #ffffff;
  background-color: #475569;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px;
}

.file-exe-box svg {
  width: 8px;
  height: 8px;
  stroke-width: 3;
}

.file-name-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  font-family: var(--font-main, sans-serif);
}

.connector-dot-right {
  position: absolute;
  right: -5.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #0033ff;
  border: 2px solid #ffffff;
  z-index: 5;
  box-shadow: 0 0 0 2px rgba(0, 51, 255, 0.15);
}

.routing-connector-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.routing-arrow-svg {
  width: 100%;
  height: 20px;
  overflow: visible;
  display: block;
}

/* Pulsing animated traveling dots */
.routing-pulse-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0033ff;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  box-shadow: 0 0 8px #0033ff, 0 0 12px rgba(0, 51, 255, 0.4);
}

.routing-pulse-dot.dot-1 {
  animation: slideDot 2.8s infinite linear;
}

.routing-pulse-dot.dot-2 {
  animation: slideDot 2.8s infinite linear;
  animation-delay: 0.9s;
}

.routing-pulse-dot.dot-3 {
  animation: slideDot 2.8s infinite linear;
  animation-delay: 1.8s;
}

@keyframes slideDot {
  0% {
    left: 0;
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
  8% {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }
  90% {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }
  98%, 100% {
    left: calc(100% - 10px);
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
}

.folder-card {
  justify-content: flex-start;
  gap: 1.25rem;
}

.folder-icon {
  width: 26px;
  height: 26px;
  color: #0033ff;
  stroke-width: 2.25;
  flex-shrink: 0;
}

.folder-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  justify-content: space-between;
}

.folder-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  font-family: var(--font-main, sans-serif);
}

.folder-badge {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0033ff;
  margin-left: auto;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   STEP 3 RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 1024px) {
  .step-three-container {
    padding: 2.5rem 2rem;
    max-width: 580px;
  }
  
  .step-three-cols-header {
    display: none;
  }
  
  .step-three-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.5rem;
    text-align: center;
  }
  
  .connector-dot-right {
    display: none;
  }
  
  .routing-connector-wrapper {
    height: 50px;
    width: 20px;
    margin: 0.5rem 0;
  }
  
  .routing-arrow-svg {
    transform: rotate(90deg) scaleY(1.4);
    height: 20px;
    width: 50px;
    margin-left: -15px; /* Offset rotation centering */
  }
  
  .routing-pulse-dot {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 0;
    box-shadow: 0 0 6px #0033ff;
  }
  
  .routing-pulse-dot.dot-1 {
    animation: slideDotVertical 2.8s infinite linear;
  }

  .routing-pulse-dot.dot-2 {
    animation: slideDotVertical 2.8s infinite linear;
    animation-delay: 0.9s;
  }

  .routing-pulse-dot.dot-3 {
    animation: slideDotVertical 2.8s infinite linear;
    animation-delay: 1.8s;
  }
  
  @keyframes slideDotVertical {
    0% {
      top: 0;
      opacity: 0;
      transform: translateX(-50%) scale(0.8);
    }
    8% {
      opacity: 1;
      transform: translateX(-50%) scale(1.1);
    }
    90% {
      opacity: 1;
      transform: translateX(-50%) scale(1.1);
    }
    98%, 100% {
      top: calc(100% - 10px);
      opacity: 0;
      transform: translateX(-50%) scale(0.8);
    }
  }
  
  .routing-card {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
  
  .folder-info {
    justify-content: center;
    gap: 1rem;
    width: auto;
  }
  
  .folder-badge {
    margin-left: 0;
  }
}


/* ==========================================================================
   STEP 4 SECTION STYLES (Dynamic Segment Merger & Hash Integrity)
   ========================================================================== */

.step-four-section {
  padding: 8rem 0;
  background: radial-gradient(circle at top center, rgba(0, 51, 255, 0.015) 0%, rgba(255, 255, 255, 0) 70%), #fafafa;
  border-top: 1px solid var(--border-light, #e5e7eb);
}

.step-four-header {
  text-align: center;
  margin-bottom: 5rem;
}

.step-four-header h2 {
  font-size: 3.25rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary, #0f172a);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.step-four-subhead-mono {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  letter-spacing: 0.05em;
}

.step-four-container {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  padding: 4rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: var(--shadow-premium, 0 10px 30px rgba(0, 0, 0, 0.02));
}

.step-four-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.7fr 1.15fr;
  gap: 2.5rem;
  align-items: stretch;
}

.step-four-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.panel-label-mono {
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.05em;
  border-bottom: 1px dashed #e2e8f0;
  padding-bottom: 0.85rem;
  text-align: left;
}

.assembly-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.segment-block-item {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, background-color 0.25s ease;
}

.segment-block-item:hover {
  transform: translateY(-1px);
  border-color: #0033ff;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 51, 255, 0.03);
}

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

.seg-id-mono {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
}

.seg-status-badge {
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 800;
  background-color: #e2e8f0;
  color: #475569;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.completed .seg-status-badge {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.merging .seg-status-badge {
  background-color: rgba(0, 51, 255, 0.1);
  color: #0033ff;
}

.active-download .seg-status-badge {
  background-color: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}

.pulse-blue {
  animation: pulseBlueText 1.6s infinite ease-in-out;
}

@keyframes pulseBlueText {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.seg-progress-bar-wrapper {
  width: 100%;
  height: 5px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}

.seg-progress-bar {
  height: 100%;
  background-color: #0033ff;
  border-radius: 99px;
}

.completed .seg-progress-bar {
  background-color: #10b981;
}

.merging .seg-progress-bar {
  background-color: #0033ff;
}

.active-download .seg-progress-bar {
  background-color: #ea580c;
}

.seg-footer-row-mono {
  display: flex;
  justify-content: space-between;
  font-family: monospace;
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
}

/* Merging bar stripes animation */
.animate-stripes {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progressStripes 1s infinite linear;
}

@keyframes progressStripes {
  0% { background-position: 0 0; }
  100% { background-position: 1rem 0; }
}

/* Column 2: Merge Core */
.merge-engine-col {
  justify-content: flex-start;
}

.engine-core-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  gap: 2rem;
  min-height: 280px;
}

.circular-core-visual {
  position: relative;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-rotator-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.core-outer-ring {
  transform-origin: 50px 50px;
  animation: spinCoreRing 12s infinite linear;
}

.core-inner-ring {
  transform-origin: 50px 50px;
  animation: spinCoreRingBack 6s infinite linear;
}

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

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

.core-text-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  z-index: 5;
}

.core-speed-mono {
  font-family: monospace;
  font-size: 1.25rem;
  font-weight: 850;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.core-percent-lbl {
  font-size: 0.65rem;
  font-weight: 800;
  color: #0033ff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.engine-connector-arrows {
  width: 60px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.engine-flow-arrow {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.engine-flow-arrow path {
  stroke-dasharray: 6 4;
  animation: dashMoveArrow 1.2s infinite linear;
}

@keyframes dashMoveArrow {
  0% { stroke-dashoffset: 10; }
  100% { stroke-dashoffset: 0; }
}

/* Column 3: Hash Validation */
.hash-validation-box {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.console-box {
  background: #090d16;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1e293b;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.console-header {
  background: #1e293b;
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.con-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.con-dot.red { background-color: #ef4444; }
.con-dot.yellow { background-color: #eab308; }
.con-dot.green { background-color: #10b981; }

.con-title {
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  margin-left: 0.45rem;
}

.console-body-mono {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: monospace;
  font-size: 0.66rem;
  color: #cbd5e1;
  line-height: 1.4;
  text-align: left;
}

.console-line {
  word-break: break-all;
}

.console-line.text-muted {
  color: #64748b;
}

.console-line.text-success {
  color: #10b981;
}

.bold-console-line {
  font-weight: 800;
  margin-top: 0.25rem;
  animation: blinkConsoleLine 1.4s infinite ease-in-out;
}

@keyframes blinkConsoleLine {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.integrity-badge-card {
  background-color: rgba(16, 185, 129, 0.02);
  border: 1px dashed rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.badge-icon-shield {
  background-color: rgba(16, 185, 129, 0.08);
  color: #10b981;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: pulseShieldGlow 2s infinite ease-in-out;
}

.shield-check {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}

@keyframes pulseShieldGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.15);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}

.badge-text-details {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
}

.badge-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #10b981;
  letter-spacing: 0.05em;
}

.badge-sub {
  font-size: 0.66rem;
  font-weight: 600;
  color: #64748b;
}

/* ==========================================================================
   STEP 4 RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 1024px) {
  .step-four-container {
    padding: 2.5rem 2rem;
    max-width: 580px;
  }
  
  .step-four-grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
    justify-items: center;
  }
  
  .step-four-col {
    width: 100%;
    max-width: 480px;
  }
  
  .engine-core-wrapper {
    min-height: auto;
    gap: 1.5rem;
  }
  
  .engine-connector-arrows {
    transform: rotate(90deg);
    margin: 0.5rem 0;
  }
}


/* ==========================================================================
   STEP 5 SECTION STYLES (Smart Bandwidth Scheduler)
   ========================================================================== */

.step-five-section {
  padding: 8rem 0;
  background: radial-gradient(circle at bottom center, rgba(0, 51, 255, 0.01) 0%, rgba(255, 255, 255, 0) 70%), #ffffff;
  border-top: 1px solid var(--border-light, #e5e7eb);
  border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.step-five-header {
  text-align: center;
  margin-bottom: 5rem;
}

.step-five-header h2 {
  font-size: 3.25rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary, #0f172a);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.step-five-subhead-mono {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  letter-spacing: 0.05em;
}

.step-five-container {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 4rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: var(--shadow-premium, 0 10px 30px rgba(0, 0, 0, 0.02));
}

.step-five-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.7fr 1.15fr;
  gap: 2.5rem;
  align-items: stretch;
}

.step-five-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tuner-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 1.75rem;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
}

.speedometer-widget {
  position: relative;
  width: 150px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.speedometer-arc-svg {
  width: 100%;
  height: 100%;
}

.speed-val-box {
  position: absolute;
  bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.speed-num-mono {
  font-family: monospace;
  font-size: 1.5rem;
  font-weight: 850;
  color: #0f172a;
}

.speed-unit-lbl {
  font-size: 0.65rem;
  font-weight: 800;
  color: #0033ff;
  margin-top: 0.15rem;
  letter-spacing: 0.02em;
}

.speed-slider-control {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-family: monospace;
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
}

.slider-active-lbl {
  color: #0033ff;
  font-weight: 800;
}

.slider-track-wrapper {
  position: relative;
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 99px;
}

.slider-track-filled {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #0033ff;
  border-radius: 99px;
}

.slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0033ff;
  box-shadow: 0 2px 6px rgba(0, 51, 255, 0.2);
  cursor: pointer;
}

.speed-mode-selection {
  display: flex;
  width: 100%;
  gap: 0.5rem;
}

.speed-mode-btn {
  flex: 1;
  font-size: 0.72rem;
  font-weight: 750;
  padding: 0.5rem 0.35rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #475569;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.speed-mode-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.speed-mode-btn.active {
  background: rgba(0, 51, 255, 0.05);
  border-color: #0033ff;
  color: #0033ff;
}

/* Protocol Router visual styling */
.router-visual-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 2rem;
  min-height: 280px;
}

.incoming-protocols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  width: 100%;
}

.proto-tag {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.45rem;
  border-radius: 6px;
  text-align: center;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.01);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.proto-tag:hover {
  border-color: #0033ff;
  transform: translateY(-1px);
}

.tag-http3 {
  background-color: rgba(234, 88, 12, 0.04);
  color: #ea580c;
  border-color: rgba(234, 88, 12, 0.12);
}

.tag-https {
  background-color: rgba(16, 185, 129, 0.04);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.12);
}

.tag-sftp {
  background-color: rgba(71, 85, 105, 0.04);
  color: #475569;
  border-color: rgba(71, 85, 105, 0.12);
}

.tag-ipfs {
  background-color: rgba(0, 51, 255, 0.04);
  color: #0033ff;
  border-color: rgba(0, 51, 255, 0.12);
}

.bypass-tunnel-capsule {
  background-color: rgba(0, 51, 255, 0.03);
  border: 1.5px solid #0033ff;
  border-radius: 99px;
  padding: 0.65rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  box-shadow: 0 4px 15px rgba(0, 51, 255, 0.05);
}

.tunnel-shield-icon {
  background-color: #0033ff;
  color: #ffffff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-shield-tunnel {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
  color: #ffffff;
}

.tunnel-details {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-align: left;
}

.t-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
}

.t-sub {
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: #0033ff;
}

.outbound-flow-bar {
  width: 2px;
  height: 45px;
  background-color: transparent;
  position: relative;
}

.outbound-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0033ff;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 6px #0033ff;
}

.outbound-dot.dot-a { animation: tunnelFlowParticles 1.6s infinite linear; }
.outbound-dot.dot-b { animation: tunnelFlowParticles 1.6s infinite linear; animation-delay: 0.5s; }
.outbound-dot.dot-c { animation: tunnelFlowParticles 1.6s infinite linear; animation-delay: 1s; }

@keyframes tunnelFlowParticles {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* 24 Hour calendar grid visual */
.calendar-widget-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
  height: 100%;
}

.hours-calendar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.45rem;
  width: 100%;
}

.hour-block {
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hour-block::after {
  content: attr(data-time);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #ffffff;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  font-size: 0.58rem;
  font-family: monospace;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.hour-block:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hour-block span {
  z-index: 5;
}

.mode-unlimited {
  background-color: rgba(0, 51, 255, 0.08);
  border: 1px solid rgba(0, 51, 255, 0.2);
  color: #0033ff;
}

.mode-unlimited:hover {
  background-color: #0033ff;
  color: #ffffff;
}

.mode-work {
  background-color: #ffffff;
  border: 1.5px dashed #cbd5e1;
  color: #64748b;
}

.mode-work:hover {
  border-color: #0033ff;
  color: #0033ff;
}

.mode-work.active {
  border-color: #ea580c;
  color: #ea580c;
  background-color: rgba(234, 88, 12, 0.02);
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15);
}

.mode-balanced {
  background-color: rgba(0, 51, 255, 0.03);
  border: 1px solid rgba(0, 51, 255, 0.15);
  color: #0033ff;
}

.mode-balanced:hover {
  background-color: #0033ff;
  color: #ffffff;
}

.calendar-legend-box {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 1px dashed #e2e8f0;
  padding-top: 1rem;
  margin-top: 0.5rem;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.legend-dot-bg {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.color-unlimited {
  background-color: rgba(0, 51, 255, 0.4);
  border: 1px solid rgba(0, 51, 255, 0.2);
}

.color-work {
  border: 1.5px dashed #cbd5e1;
}

.color-balanced {
  background-color: rgba(0, 51, 255, 0.15);
}

.legend-label {
  font-size: 0.68rem;
  font-weight: 650;
  color: #475569;
  text-align: left;
}

/* ==========================================================================
   STEP 5 RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 1024px) {
  .step-five-container {
    padding: 2.5rem 2rem;
    max-width: 580px;
  }
  
  .step-five-grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
    justify-items: center;
  }
  
  .step-five-col {
    width: 100%;
    max-width: 480px;
  }
  
  .router-visual-body {
    min-height: auto;
  }
  
  .outbound-flow-bar {
    transform: rotate(90deg);
    margin: 1rem 0;
  }
}








/* ==========================================================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================================================== */

/* Navbar Mobile Toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

@media (max-width: 768px) {
  /* Container Padding */
  .container {
    padding: 0 1rem;
  }
  
  /* Navbar Overhauls */
  .mobile-menu-toggle {
    display: block;
  }
  
  .nav-links, .nav-right {
    display: none;
    flex-direction: column;
    width: 100%;
    text-align: center;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    padding: 1rem 0;
  }
  
  .navbar.mobile-menu-active {
    background: rgba(255, 255, 255, 1);
  }
  
  .navbar.mobile-menu-active .nav-container {
    flex-wrap: wrap;
  }
  
  .navbar.mobile-menu-active .nav-links {
    display: flex;
    order: 3;
    padding-top: 2rem;
    gap: 1.5rem;
  }
  
  .navbar.mobile-menu-active .nav-right {
    display: flex;
    order: 4;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
  }

  /* Hero Section */
  .hero {
    padding-top: 7rem;
    padding-bottom: 3rem;
  }

  .hero h1 {
    font-size: 2.2rem;
  }
  
  .hero p {
    font-size: 1rem;
  }
  
  .hero-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  
  .btn-get-dlm, .btn-install-ext {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Grids */
  .architecture-grid, 
  .deep-dives-grid, 
  .footer-grid, 
  .step-two-grid,
  .step-three-cols,
  .step-four-grid,
  .step-five-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  /* Visualizer */
  .visualizer-wrapper {
    margin-top: 2rem;
  }
  
  .dotted-canvas {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  
  img, svg, video {
    max-width: 100%;
    height: auto;
  }
}