/* Minimalist Light Sci-fi Design System */

:root {
  --bg-primary: #f8f9fa;
  --bg-secondary: #f1f3f5;
  --text-primary: #121314;
  --text-secondary: #606870;
  --accent-blue: #0066cc;
  --accent-blue-rgb: 0, 102, 204;
  --accent-cyan: #0099aa;
  --accent-cyan-rgb: 0, 153, 170;
  --accent-amber: #e65c00;
  --border-light: #e0e5eb;
  --border-medium: #cbd5e1;
  --border-dark: #121314;
  
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', "Courier New", Courier, monospace;
}

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

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Background dot grid overlay */
.grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Viewport corners */
.corner-crosshair {
  position: fixed;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 300;
  color: var(--border-medium);
  z-index: 10;
  pointer-events: none;
  user-select: none;
  opacity: 0.7;
}

.corner-crosshair.top-left { top: 20px; left: 20px; }
.corner-crosshair.top-right { top: 20px; right: 20px; }
.corner-crosshair.bottom-left { bottom: 20px; left: 20px; }
.corner-crosshair.bottom-right { bottom: 20px; right: 20px; }

/* Header/Status Bar */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  background-color: rgba(248, 249, 250, 0.8);
  backdrop-filter: blur(8px);
  z-index: 5;
}

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.system-divider {
  color: var(--border-medium);
}

.system-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pulse-glow 2s infinite ease-in-out;
}

.system-time {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Footer / Data Display */
.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-light);
  background-color: rgba(248, 249, 250, 0.8);
  backdrop-filter: blur(8px);
  z-index: 5;
  margin-top: auto;
}

.footer-center {
  display: flex;
  align-items: center;
}

.scifi-decoration-graph {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 12px;
}

.scifi-decoration-graph span {
  width: 2px;
  background-color: var(--border-medium);
  animation: bar-dance 1.5s infinite ease-in-out;
}

.scifi-decoration-graph span:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.scifi-decoration-graph span:nth-child(2) { height: 10px; animation-delay: 0.3s; }
.scifi-decoration-graph span:nth-child(3) { height: 4px; animation-delay: 0.5s; }
.scifi-decoration-graph span:nth-child(4) { height: 12px; animation-delay: 0.2s; }
.scifi-decoration-graph span:nth-child(5) { height: 8px; animation-delay: 0.4s; }

/* Main Container (Barba wrapper contents) */
.main-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  z-index: 1;
  position: relative;
}

/* Hero Section */
.landing-hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Scan line animation overlay */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 153, 170, 0.15), transparent);
  pointer-events: none;
  animation: scan-vertical 6s linear infinite;
  opacity: 0.7;
}

.hero-header {
  text-align: center;
  margin-bottom: 60px;
  width: 100%;
  max-width: 800px;
}

.hero-pretitle {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--accent-cyan);
  margin-bottom: 12px;
  font-weight: 500;
}

.hero-title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 20px;
  text-transform: uppercase;
  line-height: 1.1;
  opacity: 0; /* Animated by Anime.js */
}

.hero-underline {
  height: 1px;
  width: 80px;
  background-color: var(--border-dark);
  margin: 0 auto;
  opacity: 0.3;
}

/* Options Grid */
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  margin-top: 20px;
}

/* Option Card styling */
.option-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-light);
  padding: 36px 30px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  min-height: 280px;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.option-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 10%, rgba(var(--accent-cyan-rgb), 0.02), transparent 80%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Sci-fi corner line decorations inside card */
.option-border-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.border-line {
  position: absolute;
  background-color: var(--accent-cyan);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.line-t { top: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; }
.line-r { top: 0; right: 0; width: 2px; height: 100%; transform: scaleY(0); transform-origin: top; }
.line-b { bottom: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: right; }
.line-l { top: 0; left: 0; width: 2px; height: 100%; transform: scaleY(0); transform-origin: bottom; }

.option-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-num::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: var(--border-medium);
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.option-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.option-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 40px;
  font-weight: 300;
  flex-grow: 1;
}

.option-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid var(--border-light);
  padding-top: 18px;
  transition: border-color 0.4s ease;
}

.option-action {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.option-arrow {
  font-size: 16px;
  color: var(--text-secondary);
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover States for Option Cards */
.option-card:hover {
  background-color: #ffffff;
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 102, 204, 0.05);
}

.option-card:hover::before {
  opacity: 1;
}

.option-card:hover .border-line {
  transform: scale(1);
}

.option-card:hover .option-num::before {
  background-color: var(--accent-cyan);
}

.option-card:hover .option-num {
  color: var(--accent-cyan);
}

.option-card:hover .option-footer {
  border-color: var(--border-medium);
}

.option-card:hover .option-action {
  color: var(--text-primary);
}

.option-card:hover .option-arrow {
  transform: translateX(4px);
  color: var(--accent-cyan);
}

/* Focus style for accessibility */
.option-card:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 4px;
}

/* Keyframe Animations */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.6;
    box-shadow: 0 0 4px var(--accent-cyan);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 10px var(--accent-cyan);
  }
}

@keyframes bar-dance {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.4);
  }
}

@keyframes scan-vertical {
  0% {
    top: -5%;
  }
  100% {
    top: 105%;
  }
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .status-bar {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 12px 16px;
  }
  
  .status-right {
    width: 100%;
    justify-content: space-between;
  }
  
  .corner-crosshair {
    display: none;
  }
  
  .options-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .option-card {
    min-height: auto;
    padding: 28px 24px;
  }
  
  .main-container {
    padding: 24px 16px;
  }
  
  .hero-header {
    margin-bottom: 40px;
  }
  
  .footer-bar {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    text-align: center;
  }
  
  .footer-center {
    order: -1;
  }
}

/* Analyzer Simulation Overlay */
.analyzer-overlay-hidden {
  display: none;
  opacity: 0;
}

.analyzer-overlay-visible {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(248, 249, 250, 0.96);
  backdrop-filter: blur(12px);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.overlay-grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(0, 153, 170, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.analyzer-box {
  background-color: #ffffff;
  border: 1px solid var(--border-medium);
  width: 100%;
  max-width: 600px;
  padding: 40px;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(0, 102, 204, 0.08);
}

.analyzer-corners .ac {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent-cyan);
  font-weight: bold;
}

.analyzer-corners .ac-tl { top: 12px; left: 12px; }
.analyzer-corners .ac-tr { top: 12px; right: 12px; }
.analyzer-corners .ac-bl { bottom: 12px; left: 12px; }
.analyzer-corners .ac-br { bottom: 12px; right: 12px; }

.analyzer-header {
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 16px;
}

.analyzer-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-cyan);
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 8px;
}

.analyzer-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.analyzer-console {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
  padding: 20px;
  height: 180px;
  overflow-y: auto;
  margin-bottom: 24px;
  border-radius: 3px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02);
}

.console-line {
  margin-bottom: 6px;
  white-space: pre-wrap;
  opacity: 0; /* Animated dynamically */
}

.analyzer-progress-wrapper {
  margin-bottom: 30px;
}

.progress-bar-container {
  height: 4px;
  background-color: var(--border-light);
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 10px;
}

.analyzer-progress {
  height: 100%;
  background-color: var(--accent-cyan);
  width: 0%;
  transition: width 0.1s ease;
}

.progress-stats {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.analyzer-close-btn {
  width: 100%;
  background-color: var(--text-primary);
  color: #ffffff;
  border: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 16px;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  border-radius: 3px;
}

.analyzer-close-btn:hover:not(:disabled) {
  background-color: var(--accent-cyan);
}

.analyzer-close-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 576px) {
  .analyzer-box {
    padding: 24px 16px;
  }
}

/* Barba.js Page Transition Curtain */
.transition-curtain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.curtain-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(0, 153, 170, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.curtain-content {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.curtain-loader {
  width: 48px;
  height: 48px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spinner 0.8s linear infinite;
}

.curtain-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--text-primary);
  font-weight: 500;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* Subpages Specification Recommendations Styles */
.back-btn-container {
  align-self: flex-start;
  margin-bottom: 30px;
  width: 100%;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.back-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
  transform: translateX(-4px);
  background-color: #ffffff;
}

.spec-header {
  text-align: center;
  margin-bottom: 50px;
  width: 100%;
  max-width: 850px;
}

.spec-pretitle {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent-cyan);
  margin-bottom: 12px;
  font-weight: 500;
}

.spec-title {
  font-family: var(--font-sans);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 16px;
  text-transform: uppercase;
  line-height: 1.2;
}

.spec-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 300;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  margin-bottom: 50px;
}

.spec-card {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-light);
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
}

.spec-card:hover {
  background-color: #ffffff;
  border-color: var(--accent-cyan);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 102, 204, 0.04);
}

.spec-card-corners .scc {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--border-medium);
}

.spec-card-corners .scc-tl { top: 8px; left: 8px; }
.spec-card-corners .scc-tr { top: 8px; right: 8px; }
.spec-card-corners .scc-bl { bottom: 8px; left: 8px; }
.spec-card-corners .scc-br { bottom: 8px; right: 8px; }

.spec-card:hover .spec-card-corners .scc {
  color: var(--accent-cyan);
}

.spec-tier {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-amber);
  margin-bottom: 12px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.spec-card.highlighted .spec-tier {
  color: var(--accent-cyan);
}

.spec-card.highlighted {
  border-color: var(--border-medium);
  background-color: rgba(255, 255, 255, 0.8);
}

.spec-card-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: var(--text-primary);
}

.spec-card-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-weight: 300;
}

.spec-details-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
  flex-grow: 1;
}

.spec-item {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
}

.spec-item-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.spec-item-value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.spec-card-price {
  margin-top: auto;
  border-top: 1px solid var(--border-light);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.price-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

@media (max-width: 992px) {
  .spec-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ==========================================
   Ultra-Minimalist Wizard & Transitions Styles
   ========================================== */
.minimal-wizard-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 55vh;
  position: relative;
}

.minimal-wizard-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  padding: 48px 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.02), 
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  margin-bottom: 50px;
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.minimal-heading {
  font-family: var(--font-sans);
  font-size: clamp(24px, 4.5vw, 36px);
  font-weight: 300;
  color: var(--text-primary);
  margin-bottom: 12px;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.minimal-subheading {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-secondary);
  margin-bottom: 40px;
  text-align: center;
}

.minimal-options-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 900px;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Rounded rectangular cards matching reference mockup */
.minimal-option-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 24px 32px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 220px;
  max-width: 280px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015);
  animation: cardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.minimal-option-card:hover {
  background-color: #ffffff;
  border-color: var(--accent-cyan);
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 153, 170, 0.1);
}

.minimal-option-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.minimal-option-desc {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.35;
}

.minimal-slider-container {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 10px;
  animation: cardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.slider-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-light);
  padding: 12px 20px;
  border-radius: 12px;
  width: 100%;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.01);
}

.calc-range {
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--border-light);
  outline: none;
  border-radius: 3px;
  transition: background 0.3s;
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-cyan);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
  box-shadow: 0 2px 6px rgba(0, 153, 170, 0.3);
}

.calc-range::-webkit-slider-thumb:hover {
  transform: scale(1.3);
  box-shadow: 0 0 12px var(--accent-cyan);
}

.slider-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: bold;
  color: var(--accent-cyan);
  min-width: 48px;
  text-align: right;
  letter-spacing: 0.05em;
}

.minimal-next-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 14px 36px;
  background-color: var(--text-primary);
  color: #ffffff;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(18, 19, 20, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  outline: none;
}

.minimal-next-btn:hover {
  background-color: var(--accent-cyan);
  box-shadow: 0 8px 24px rgba(0, 153, 170, 0.35);
  transform: translateY(-3px);
}

.minimal-next-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 153, 170, 0.2);
}

/* Navigation footer */
.minimal-wizard-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
  font-family: var(--font-mono);
}

.minimal-back-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.08em;
  outline: none;
}

.minimal-back-btn:hover {
  color: var(--text-primary);
  transform: translateX(-4px);
}

.minimal-step-counter {
  font-size: 11px;
  font-weight: bold;
  color: var(--accent-cyan);
  letter-spacing: 0.1em;
}

/* Animations using smooth vertical slide-fades */
@keyframes minimalFadeOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-12px) scale(0.98); }
}

@keyframes minimalFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.minimal-fade-out {
  animation-name: minimalFadeOut;
}

.minimal-fade-in {
  animation-name: minimalFadeIn;
}

.hidden-pane {
  display: none !important;
}

/* Centered Results Dashboard */
.minimal-results-container {
  width: 100%;
  animation: minimalFadeIn 0.5s ease-out forwards;
}

.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.telemetry-box {
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 30px;
}

.telemetry-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.meter-group {
  margin-bottom: 20px;
}

.meter-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.meter-num {
  font-weight: bold;
  color: var(--text-primary);
}

.gauge-track {
  height: 6px;
  background-color: var(--border-light);
  border-radius: 3px;
  width: 100%;
  overflow: hidden;
}

.gauge-fill {
  height: 100%;
  width: 0%;
  background-color: var(--accent-cyan);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.simple-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.stat-col {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 12px 16px;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.diag-console {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--text-primary);
}

.console-line-header {
  color: var(--accent-cyan);
  margin-bottom: 12px;
  font-weight: bold;
}

.console-grid-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.val-mono {
  font-weight: 500;
  color: var(--text-secondary);
}

.console-divider {
  height: 1px;
  background-color: var(--border-light);
  margin: 10px 0;
}

/* Verdict Hardware Card */
.verdict-card {
  background-color: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  padding: 30px;
  position: relative;
  box-shadow: 0 10px 35px rgba(0, 102, 204, 0.03);
}

.verdict-corner {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent-cyan);
  font-weight: bold;
}

.verdict-corner.vc-tl { top: 8px; left: 8px; }
.verdict-corner.vc-tr { top: 8px; right: 8px; }
.verdict-corner.vc-bl { bottom: 8px; left: 8px; }
.verdict-corner.vc-br { bottom: 8px; right: 8px; }

.verdict-header {
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 16px;
}

.verdict-tier {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--accent-amber);
  font-weight: 700;
  margin-bottom: 6px;
}

.verdict-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
}

.verdict-specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.verdict-specs li {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 6px;
}

.verdict-specs li .label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.verdict-specs li .value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.verdict-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
  margin-bottom: 20px;
}

.verdict-price-row .price-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.verdict-price-row .price-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-cyan);
}

.buy-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background-color: var(--text-primary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(18, 19, 20, 0.15);
}

.buy-button:hover {
  background-color: var(--accent-cyan);
  box-shadow: 0 4px 15px rgba(0, 153, 170, 0.25);
  transform: translateY(-2px);
}

.buy-button .arrow {
  transition: transform 0.2s ease;
}

.buy-button:hover .arrow {
  transform: translateX(4px);
}

.component-affiliate-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.affiliate-comp-link {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 0;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed var(--border-light);
}

.affiliate-comp-link:hover {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}

.affiliate-comp-link .arrow {
  transition: transform 0.2s ease;
}

.affiliate-comp-link:hover .arrow {
  transform: translateX(2px);
}

.results-actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.restart-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.restart-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
  background-color: #ffffff;
}

/* Responsive grid for results screen */
@media (max-width: 992px) {
  .results-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 600px) {
  .minimal-option-card {
    min-width: 100%;
  }
}

/* ==========================================
   Creative Custom Step Component Layouts
   ========================================== */

/* Step 1 - Modern Vertical Objective Cards */
.objective-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .objective-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.objective-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 36px 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 240px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.015);
  animation: cardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.objective-card:nth-child(1) { animation-delay: 0.05s; }
.objective-card:nth-child(2) { animation-delay: 0.1s; }
.objective-card:nth-child(3) { animation-delay: 0.15s; }

.objective-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 0%, rgba(0, 153, 170, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.objective-card:hover {
  background: #ffffff;
  border-color: var(--accent-cyan);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 153, 170, 0.08);
}

.objective-card:hover::before {
  opacity: 1;
}

.objective-card.selected {
  background: #ffffff;
  border-color: var(--accent-cyan);
  box-shadow: 0 20px 40px rgba(0, 153, 170, 0.12), 0 0 0 1px var(--accent-cyan);
}

.objective-card.selected::before {
  opacity: 1;
  background: radial-gradient(circle at 50% 0%, rgba(0, 153, 170, 0.1), transparent 70%);
}

.objective-icon {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  background: rgba(0, 153, 170, 0.06);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 24px;
  border: 1px solid rgba(0, 153, 170, 0.15);
  transition: all 0.3s ease;
}

.objective-card:hover .objective-icon,
.objective-card.selected .objective-icon {
  background: var(--accent-cyan);
  color: #ffffff;
  border-color: var(--accent-cyan);
  box-shadow: 0 4px 12px rgba(0, 153, 170, 0.3);
  transform: scale(1.05);
}

.objective-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.objective-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  font-weight: 300;
}

/* Step 2 - Dynamic Model Catalog List */
.catalog-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}

.catalog-row {
  display: grid;
  grid-template-columns: 110px 1.5fr 80px 100px 3.5fr;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  animation: rowEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rowEntrance {
  from { opacity: 0; transform: translateX(-15px); }
  to { opacity: 1; transform: translateX(0); }
}

.catalog-row:nth-child(1) { animation-delay: 0.03s; }
.catalog-row:nth-child(2) { animation-delay: 0.06s; }
.catalog-row:nth-child(3) { animation-delay: 0.09s; }
.catalog-row:nth-child(4) { animation-delay: 0.12s; }
.catalog-row:nth-child(5) { animation-delay: 0.15s; }
.catalog-row:nth-child(6) { animation-delay: 0.18s; }
.catalog-row:nth-child(7) { animation-delay: 0.21s; }
.catalog-row:nth-child(8) { animation-delay: 0.24s; }
.catalog-row:nth-child(9) { animation-delay: 0.27s; }
.catalog-row:nth-child(10) { animation-delay: 0.3s; }

.catalog-row:hover {
  background: #ffffff;
  border-color: var(--accent-cyan);
  transform: translateX(6px);
  box-shadow: 0 6px 20px rgba(0, 153, 170, 0.06);
}

.catalog-row.selected {
  background: #ffffff;
  border-color: var(--accent-cyan);
  box-shadow: 0 6px 20px rgba(0, 153, 170, 0.08), 0 0 0 1px var(--accent-cyan);
}

.badge-creator {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  width: fit-content;
}

.badge-meta { background-color: rgba(0, 102, 204, 0.08); color: #0066cc; }
.badge-google { background-color: rgba(0, 153, 170, 0.08); color: #0099aa; }
.badge-alibaba { background-color: rgba(230, 92, 0, 0.08); color: #e65c00; }
.badge-deepseek { background-color: rgba(0, 68, 204, 0.08); color: #0044cc; }
.badge-mistral { background-color: rgba(204, 51, 0, 0.08); color: #cc3300; }
.badge-stability { background-color: rgba(120, 40, 200, 0.08); color: #7828c8; }
.badge-blackforest { background-color: rgba(230, 0, 120, 0.08); color: #e60078; }
.badge-microsoft { background-color: rgba(0, 164, 240, 0.08); color: #00a4f0; }
.badge-bigcode { background-color: rgba(0, 204, 136, 0.08); color: #00cc88; }
.badge-custom { background-color: rgba(96, 104, 112, 0.08); color: #606870; }

.model-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.model-size-label, .model-ctx-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  color: var(--text-primary);
}

.model-desc-text {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Step 3 - Quantization Visual Speed/Quality Scale */
.quant-scale-wrapper {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.quant-scale-bar {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: var(--border-light);
  height: 6px;
  border-radius: 3px;
  margin: 30px 0;
  padding: 0 10px;
}

.quant-scale-fill {
  position: absolute;
  left: 10px;
  height: 100%;
  background-color: var(--accent-cyan);
  border-radius: 3px;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  box-shadow: 0 0 8px rgba(0, 153, 170, 0.4);
}

.quant-scale-node {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 3px solid var(--border-medium);
  top: -6px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.quant-scale-node:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(0, 153, 170, 0.4);
}

.quant-scale-node.active {
  background-color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px rgba(0, 153, 170, 0.5);
}

.quant-node-label {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  font-weight: 600;
  transition: color 0.3s;
}

.quant-scale-node.active .quant-node-label {
  color: var(--accent-cyan);
}

.quant-details-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transform: translateY(10px);
  animation: detailsEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes detailsEntrance {
  to { transform: translateY(0); }
}

.quant-details-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.quant-details-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  font-weight: 300;
}

.quant-stats-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.quant-stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quant-stat-label {
  color: var(--text-secondary);
  font-size: 9px;
  letter-spacing: 0.05em;
}

.quant-stat-val {
  font-weight: bold;
  color: var(--accent-cyan);
}

.quant-stat-val.red-text {
  color: var(--accent-amber);
}

/* Step 4 - Context Length Range Slider Scale */
.context-scale-wrapper {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.context-details-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transform: translateY(10px);
  animation: detailsEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.context-details-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.context-details-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  font-weight: 300;
}

/* Responsive Re-alignments */
@media (max-width: 768px) {
  .catalog-row {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
    padding: 20px;
  }
  
  .catalog-row:hover {
    transform: translateY(-2px);
  }
  
  .badge-creator {
    margin: 0 auto;
  }
  
  .objective-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .objective-card {
    min-height: auto;
    padding: 24px;
  }
}

/* Futuristic Draggable Slider Control */
.futuristic-slider-wrapper {
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  animation: cardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.slider-control-group {
  width: 100%;
  position: relative;
  padding: 10px 0;
}

.futuristic-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.futuristic-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: transparent;
}

.futuristic-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid var(--accent-cyan);
  cursor: pointer;
  margin-top: -8px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(0, 153, 170, 0.3);
}

.futuristic-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 15px var(--accent-cyan);
}

.futuristic-slider::-webkit-slider-thumb:active {
  transform: scale(1.1);
  box-shadow: 0 0 20px var(--accent-cyan);
}

.futuristic-slider.unselected::-webkit-slider-thumb {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--border-medium);
  box-shadow: none;
}

/* Slider ticks */
.slider-ticks-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 13px;
  padding: 0 10px;
  pointer-events: none;
}

.slider-tick {
  width: 2px;
  height: 10px;
  background-color: var(--border-medium);
  border-radius: 1px;
}

.slider-tick.active {
  background-color: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
}

/* Slider labels */
.slider-labels-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 14px;
  padding: 0 2px;
}

.slider-label-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s ease;
  background: none;
  border: none;
  outline: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.slider-label-btn:hover {
  color: var(--text-primary);
}

.slider-label-btn.active {
  color: var(--accent-cyan);
  transform: scale(1.05);
  text-shadow: 0 0 10px rgba(0, 153, 170, 0.25);
}

/* Telemetry stats card */
.live-telemetry-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: all 0.3s ease;
}

.telemetry-header {
  border-bottom: 1px dashed var(--border-light);
  padding-bottom: 10px;
  margin-bottom: 4px;
  text-align: left;
}

.telemetry-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.telemetry-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  font-weight: 300;
  margin-top: 4px;
}

.telemetry-stats-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.live-stat-bar-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.live-stat-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.live-stat-val {
  color: var(--accent-cyan);
}

.live-stat-val.warning {
  color: var(--accent-amber);
}

.live-bar-track {
  height: 6px;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.live-bar-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s;
}

/* Custom Interactive Slider Styling */
.custom-slider-container {
  width: 100%;
  padding: 15px 0;
  position: relative;
  user-select: none;
}

.custom-slider-track {
  height: 8px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  position: relative;
}

.custom-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
  border-radius: 6px;
  width: 0%;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(0, 153, 170, 0.25);
}

.custom-slider-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border: 4px solid var(--accent-cyan);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 153, 170, 0.3);
  transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s, box-shadow 0.2s;
}

.custom-slider-handle:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 15px rgba(0, 153, 170, 0.5);
}

.custom-slider-handle.dragging {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 20px rgba(0, 153, 170, 0.6);
  transition: transform 0.1s, box-shadow 0.1s; /* No transition on left property during active drag */
}

/* Custom ticks */
.custom-slider-ticks {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.custom-slider-tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 10px;
  background-color: var(--border-medium);
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.custom-slider-tick.active {
  background-color: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  height: 12px;
}

/* Layout Split Grid for Slider & Visualizer */
.slider-grid-layout {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  width: 100%;
  align-items: center;
  margin-top: 10px;
}

@media (max-width: 600px) {
  .slider-grid-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Quantization Model Memory Footprint Visualizer */
.model-footprint-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 160px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.01);
  padding: 12px;
  backdrop-filter: blur(10px);
}

.footprint-box-container {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.footprint-box {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.footprint-box.q2 {
  width: 42px;
  height: 42px;
  border: 2px dashed var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 153, 170, 0.15);
  animation: pulse-q4 3s infinite ease-in-out;
}

.footprint-box.q4 {
  width: 55px;
  height: 55px;
  border: 2px solid var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(0, 153, 170, 0.2);
  animation: pulse-q4 2.5s infinite ease-in-out;
}

.footprint-box.q8 {
  width: 80px;
  height: 80px;
  border: 2px solid var(--accent-blue);
  color: var(--accent-blue);
  box-shadow: 0 0 25px rgba(0, 102, 204, 0.2);
  animation: pulse-q8 2.5s infinite ease-in-out;
}

.footprint-box.q16 {
  width: 110px;
  height: 90px;
  border: 2px solid var(--accent-amber);
  color: var(--accent-amber);
  background: rgba(230, 92, 0, 0.03);
  box-shadow: 0 0 35px rgba(230, 92, 0, 0.2);
  animation: pulse-q16 1.8s infinite ease-in-out;
}

@keyframes pulse-q4 {
  0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(0, 153, 170, 0.15); }
  50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(0, 153, 170, 0.3); }
}

@keyframes pulse-q8 {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(0, 102, 204, 0.15); }
  50% { transform: scale(1.04); box-shadow: 0 0 35px rgba(0, 102, 204, 0.35); }
}

@keyframes pulse-q16 {
  0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(230, 92, 0, 0.15); }
  50% { transform: scale(1.03); box-shadow: 0 0 45px rgba(230, 92, 0, 0.4); }
}

.footprint-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: 10px;
  letter-spacing: 0.05em;
  text-align: center;
}

/* Context Capacity Document Stack Visualizer */
.context-buffer-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 160px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.01);
  padding: 12px;
  backdrop-filter: blur(10px);
}

.pages-stack-container {
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.document-page {
  position: absolute;
  width: 48px;
  height: 64px;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 4px;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
}

.document-page.visible {
  opacity: 1;
}

.document-page::before {
  content: '';
  width: 80%;
  height: 2px;
  background-color: var(--border-light);
  display: block;
}

.document-page::after {
  content: '';
  width: 55%;
  height: 2px;
  background-color: var(--border-light);
  display: block;
}

.document-page-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  flex-grow: 1;
}

.document-page-lines span {
  display: block;
  height: 2px;
  background-color: var(--border-light);
  width: 100%;
}

.document-page-lines span:nth-child(2) { width: 85%; }
.document-page-lines span:nth-child(3) { width: 70%; }

.document-page.page-1 {
  z-index: 5;
  transform: translate(0, 0) rotate(0deg);
  border-color: var(--accent-cyan);
  box-shadow: 0 4px 12px rgba(0, 153, 170, 0.15);
}

.document-page.page-2 {
  z-index: 4;
  transform: translate(6px, 4px) rotate(4deg);
}

.document-page.page-3 {
  z-index: 3;
  transform: translate(-6px, -3px) rotate(-5deg);
}

.document-page.page-4 {
  z-index: 2;
  transform: translate(12px, -6px) rotate(8deg);
}

.document-page.page-5 {
  z-index: 1;
  transform: translate(-12px, 8px) rotate(-10deg);
}

.context-buffer-visual.extreme .document-page.page-1 {
  border-color: var(--accent-amber);
  box-shadow: 0 4px 12px rgba(230, 92, 0, 0.2);
}

/* ==========================================
   Creative Page Transitions & Swipe Deck CSS
   ========================================== */

/* Shutter Curtain Strips Layout */
.curtain-strips {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  pointer-events: none;
  z-index: 1;
}

.curtain-strip {
  flex: 1;
  height: 100%;
  background-color: var(--bg-primary);
  border-right: 1px solid rgba(0, 153, 170, 0.06);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.curtain-strip:last-child {
  border-right: none;
}

/* Glowing Neon Laser Scanning Beam */
.scanning-beam {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  box-shadow: 0 0 15px var(--accent-cyan), 0 0 5px var(--accent-cyan);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  top: 0%;
}

/* Fade animation for loaders and text */
.curtain-content {
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.curtain-content.visible {
  opacity: 1;
}

/* Direction-Aware Horizontal Deck Swipes */
@keyframes stepSwipeOut {
  0% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateX(-40px) scale(0.96); filter: blur(4px); }
}

@keyframes stepSwipeIn {
  0% { opacity: 0; transform: translateX(40px) scale(0.96); filter: blur(4px); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes stepSwipeBackOut {
  0% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateX(40px) scale(0.96); filter: blur(4px); }
}

@keyframes stepSwipeBackIn {
  0% { opacity: 0; transform: translateX(-40px) scale(0.96); filter: blur(4px); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

.step-swipe-out {
  animation: stepSwipeOut 0.35s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.step-swipe-in {
  animation: stepSwipeIn 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.step-swipe-back-out {
  animation: stepSwipeBackOut 0.35s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.step-swipe-back-in {
  animation: stepSwipeBackIn 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* ==========================================
   Tactile Step 1 Card Micro-Animations
   ========================================== */
.micro-anim {
  width: 100%;
  height: 70px;
  margin-bottom: 20px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.objective-card:hover .micro-anim {
  background: rgba(0, 153, 170, 0.03);
  border-color: rgba(0, 153, 170, 0.1);
}

/* ==========================================
   General Use Animated SVGs Hover Effects
   ========================================== */

/* Keyframes */
@keyframes doc-lines {
  0%, 100% { stroke-dasharray: 4, 12; }
  50% { stroke-dasharray: 12, 4; }
}
@keyframes cap-tilt {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg) translateY(-2px); }
}
@keyframes tassel-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
}
@keyframes cursor-blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
@keyframes arrow-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
@keyframes color-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--accent-cyan)); }
  50% { transform: scale(1.2); filter: drop-shadow(0 0 6px var(--accent-cyan)); }
}
@keyframes speaker-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.95); }
}
@keyframes wave-bounce {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes laptop-open {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.85); }
}
@keyframes led-blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes window-slide-med {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2px, 2px); }
}
@keyframes window-slide-heavy-1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-3px, 3px); }
}
@keyframes window-slide-heavy-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3px, -3px); }
}
@keyframes scanline {
  0% { transform: translateY(-4px); opacity: 0; }
  50% { opacity: 0.8; }
  100% { transform: translateY(4px); opacity: 0; }
}
@keyframes slide-window {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(11px); opacity: 0; }
}
@keyframes coin-spin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes coin-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes star-glow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--accent-cyan)); }
  50% { transform: scale(1.1) rotate(15deg); filter: drop-shadow(0 0 8px var(--accent-cyan)); }
}

/* Hover Selectors */
/* 1. Office Work: Typing Simulation */
.objective-card:hover .typing-doc .line-1 {
  animation: typing-line-1 1.5s infinite steps(10) alternate;
}
.objective-card:hover .typing-doc .line-2 {
  animation: typing-line-2 1.5s infinite steps(10) alternate;
  animation-delay: 0.2s;
}
.objective-card:hover .typing-doc .line-3 {
  animation: typing-line-3 1.5s infinite steps(8) alternate;
  animation-delay: 0.4s;
}
.objective-card:hover .typing-doc .chart-line {
  animation: draw-chart 2s infinite ease-in-out alternate;
}
.objective-card:hover .typing-doc .edit-cursor {
  animation: blink-cursor 0.75s infinite steps(2);
}

@keyframes typing-line-1 {
  0% { stroke-dasharray: 0 20; }
  100% { stroke-dasharray: 20 0; }
}
@keyframes typing-line-2 {
  0% { stroke-dasharray: 0 16; }
  100% { stroke-dasharray: 16 0; }
}
@keyframes typing-line-3 {
  0% { stroke-dasharray: 0 12; }
  100% { stroke-dasharray: 12 0; }
}
@keyframes draw-chart {
  0% { stroke-dasharray: 0 30; }
  100% { stroke-dasharray: 30 0; }
}
@keyframes blink-cursor {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* 2. Student Book: Stylus and pages */
.objective-card:hover .student-cap .stylus-pen {
  animation: stylus-draw 1.8s infinite ease-in-out alternate;
}
.objective-card:hover .student-cap .stylus-trail {
  animation: draw-trail 1.8s infinite ease-in-out alternate;
}
.objective-card:hover .student-cap .book-mark {
  animation: bookmark-pulse 1.2s infinite ease-in-out;
  transform-origin: 24px 8px;
}

@keyframes stylus-draw {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-2px, -3px); }
  100% { transform: translate(1px, 2px); }
}
@keyframes draw-trail {
  0% { stroke-dasharray: 0 10; opacity: 0.2; }
  100% { stroke-dasharray: 10 0; opacity: 1; }
}
@keyframes bookmark-pulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.15); }
}

/* 3. Dev IDE Brackets and Command prompt */
.objective-card:hover .code-brackets .brac-l {
  animation: brace-push-l 1.2s infinite ease-in-out alternate;
}
.objective-card:hover .code-brackets .brac-r {
  animation: brace-push-r 1.2s infinite ease-in-out alternate;
}
.objective-card:hover .code-brackets .cmd-cursor {
  animation: blink-cursor 0.75s infinite steps(2);
}
.objective-card:hover .code-brackets .cmd-prompt {
  animation: prompt-pulse 1.2s infinite ease-in-out;
}

@keyframes brace-push-l {
  0% { transform: translateX(0); }
  100% { transform: translateX(-2.5px); }
}
@keyframes brace-push-r {
  0% { transform: translateX(0); }
  100% { transform: translateX(2.5px); }
}
@keyframes prompt-pulse {
  0%, 100% { stroke: var(--accent-amber); filter: drop-shadow(0 0 0px var(--accent-amber)); }
  50% { stroke: var(--accent-cyan); filter: drop-shadow(0 0 2px var(--accent-cyan)); }
}

/* 4. Creator Design Canvas: Bezier curve drawing and anchor shift */
.objective-card:hover .creator-brush .pen-tool {
  animation: pen-write 2.5s infinite ease-in-out alternate;
}
.objective-card:hover .creator-brush .bezier-curve {
  animation: draw-curve 2.5s infinite ease-in-out alternate;
}
.objective-card:hover .creator-brush .handle-node-1,
.objective-card:hover .creator-brush .handle-node-2 {
  animation: node-giggle 1.2s infinite ease-in-out alternate;
}

@keyframes pen-write {
  0% { transform: translate(-3px, 2px); }
  100% { transform: translate(5px, -4px); }
}
@keyframes draw-curve {
  0% { stroke-dasharray: 0 40; }
  100% { stroke-dasharray: 40 0; }
}
@keyframes node-giggle {
  0% { transform: scale(1); }
  100% { transform: scale(1.25); }
}

/* 5. Media Hub: Equalizer Waves */
.objective-card:hover .media-wave .speaker-cone {
  animation: speaker-pulse 1s infinite ease-in-out;
}
.objective-card:hover .media-wave .speaker-cap {
  animation: speaker-pulse 1s infinite ease-in-out;
  animation-delay: 0.1s;
}
.objective-card:hover .media-wave .eq-1 { animation: eq-bounce 0.8s infinite ease-in-out alternate; }
.objective-card:hover .media-wave .eq-2 { animation: eq-bounce 1s infinite ease-in-out alternate; animation-delay: 0.15s; }
.objective-card:hover .media-wave .eq-3 { animation: eq-bounce 0.6s infinite ease-in-out alternate; animation-delay: 0.3s; }
.objective-card:hover .media-wave .eq-4 { animation: eq-bounce 0.7s infinite ease-in-out alternate; animation-delay: 0.1s; }
.objective-card:hover .media-wave .eq-5 { animation: eq-bounce 1.1s infinite ease-in-out alternate; animation-delay: 0.25s; }
.objective-card:hover .media-wave .eq-6 { animation: eq-bounce 0.85s infinite ease-in-out alternate; animation-delay: 0.4s; }

@keyframes eq-bounce {
  0% { stroke-dasharray: 0 10; y1: 24; y2: 24; }
  100% { stroke-dasharray: 10 0; y1: 17; y2: 31; }
}

/* 6. Thin & Light Laptop Screen rotation & WiFi waves */
.objective-card:hover .ultra-thin .laptop-ultra-screen {
  animation: lid-swing 1.8s infinite ease-in-out alternate;
  transform-origin: 24px 30px;
}
.objective-card:hover .ultra-thin .radar-dot {
  animation: radar-glow 1.2s infinite ease-in-out;
}
.objective-card:hover .ultra-thin .radar-wave-1 {
  animation: radar-wave 1.8s infinite ease-out;
  animation-delay: 0.2s;
}
.objective-card:hover .ultra-thin .radar-wave-2 {
  animation: radar-wave 1.8s infinite ease-out;
  animation-delay: 0.5s;
}

@keyframes lid-swing {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(15deg); }
}
@keyframes radar-glow {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); fill: var(--accent-cyan); }
}
@keyframes radar-wave {
  0% { opacity: 0; transform: scale(0.6); }
  30% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.4); }
}

/* 7. Standard Laptop dashboard screen breathing */
.objective-card:hover .laptop-icon .laptop-std-screen {
  animation: screen-breathe 2s infinite ease-in-out;
}
.objective-card:hover .laptop-icon .laptop-std-pad {
  animation: pad-pulse 1s infinite alternate;
}

@keyframes screen-breathe {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(0, 102, 204, 0.1)); }
  50% { filter: drop-shadow(0 0 5px rgba(0, 102, 204, 0.3)); }
}
@keyframes pad-pulse {
  0% { stroke: var(--accent-cyan); opacity: 0.5; }
  100% { stroke: var(--accent-blue); opacity: 1; }
}

/* 8. Desktop Tower Coolers and components */
.objective-card:hover .desktop-icon .pc-fan-1 {
  animation: rotate-cooler 0.4s infinite linear;
}
.objective-card:hover .desktop-icon .pc-fan-2 {
  animation: rotate-cooler 0.3s infinite linear;
}
.objective-card:hover .desktop-icon .pc-power {
  animation: blink-cursor 0.6s infinite alternate;
}
.objective-card:hover .desktop-icon .gpu-glowing-strip {
  animation: gpu-pulse 1.2s infinite ease-in-out alternate;
}

@keyframes rotate-cooler {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes gpu-pulse {
  0% { stroke: var(--accent-amber); filter: drop-shadow(0 0 1px var(--accent-amber)); }
  100% { stroke: var(--accent-cyan); filter: drop-shadow(0 0 4px var(--accent-cyan)); }
}

/* 9. Mini PC Power Ring breathing */
.objective-card:hover .minipc-icon .led-ring {
  animation: ring-flow 1.5s infinite linear;
}
.objective-card:hover .minipc-icon .led-center {
  animation: blink-cursor 0.5s infinite steps(2);
}

@keyframes ring-flow {
  0% { stroke-dashoffset: 32; }
  100% { stroke-dashoffset: 0; }
}

/* 10. Light Multitasking Orbit */
.objective-card:hover .light-tabs .orbiting-dot {
  animation: orbit-flow 2s infinite linear;
  transform-origin: 32px 27px;
}

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

/* 11. Med Multitasking Window slide */
.objective-card:hover .med-tabs .win-fg {
  animation: window-swap 1.6s infinite ease-in-out alternate;
}

@keyframes window-swap {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-3px, 3px); }
}

/* 12. Heavy Multitasking Servers */
.objective-card:hover .heavy-tabs .pb-1 { animation: flow-pb 1.2s infinite ease-in-out alternate; }
.objective-card:hover .heavy-tabs .pb-2 { animation: flow-pb 1.2s infinite ease-in-out alternate; animation-delay: 0.3s; }
.objective-card:hover .heavy-tabs .pb-3 { animation: flow-pb 1.2s infinite ease-in-out alternate; animation-delay: 0.6s; }
.objective-card:hover .heavy-tabs .busy-dot {
  animation: blink-cursor 0.3s infinite steps(2);
}

@keyframes flow-pb {
  0% { stroke-dasharray: 0 16; }
  100% { stroke-dasharray: 16 0; }
}

/* 13. Single Monitor Glare and Sweep */
.objective-card:hover .single-mon .scan-bar {
  animation: monitor-scan 1.5s infinite linear;
  opacity: 1;
}
.objective-card:hover .single-mon .mon-chart {
  animation: draw-chart 1.8s infinite ease-in-out alternate;
}

@keyframes monitor-scan {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translateY(22px); opacity: 0; }
}

/* 14. Multi Monitor Data Slide */
.objective-card:hover .multi-mon .slide-dot {
  animation: packet-slide 1.8s infinite ease-in-out;
  opacity: 1;
}
.objective-card:hover .multi-mon .mon-l {
  animation: skew-breath-l 1.5s infinite ease-in-out alternate;
  transform-origin: center;
}
.objective-card:hover .multi-mon .mon-r {
  animation: skew-breath-r 1.5s infinite ease-in-out alternate;
  transform-origin: center;
}

@keyframes skew-breath-l {
  0% { transform: skewY(2deg); }
  100% { transform: skewY(1deg); }
}
@keyframes skew-breath-r {
  0% { transform: skewY(-2deg); }
  100% { transform: skewY(-1deg); }
}
@keyframes packet-slide {
  0% { cx: 8; cy: 19; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 40; cy: 19; opacity: 0; }
}

/* 15 & 16. 13" and 15" Screens corner flashing */
.objective-card:hover .screen-size-13 .corner-caps,
.objective-card:hover .screen-size-15 .corner-caps {
  animation: corner-glow 1s infinite alternate;
}
.objective-card:hover .screen-size-13 .diag-guide,
.objective-card:hover .screen-size-15 .diag-guide {
  animation: draw-chart 1.5s infinite ease-in-out alternate;
}

@keyframes corner-glow {
  0% { stroke: var(--accent-cyan); opacity: 0.4; }
  100% { stroke: var(--accent-blue); opacity: 1; filter: drop-shadow(0 0 1px var(--accent-blue)); }
}

/* 17. Budget Coin Spinning */
.objective-card:hover .budget-money .coin-budget {
  animation: coin-flip-spin 1.8s infinite ease-in-out alternate;
}

@keyframes coin-flip-spin {
  0% { transform: rotateY(0deg) translateY(0); }
  100% { transform: rotateY(180deg) translateY(-2px); }
}

/* 18. Mid Coins offset floating */
.objective-card:hover .mid-money .coin-a {
  animation: float-coin-a 1.2s infinite ease-in-out alternate;
}
.objective-card:hover .mid-money .coin-b {
  animation: float-coin-b 1.2s infinite ease-in-out alternate;
}

@keyframes float-coin-a {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}
@keyframes float-coin-b {
  0% { transform: translateY(0); }
  100% { transform: translateY(3px); }
}

/* 19. Premium Faceted Diamond */
.objective-card:hover .prem-money .diamond-premium {
  animation: diamond-float-rotate 3s infinite linear alternate;
}
.objective-card:hover .prem-money .orbit-ring-1 {
  animation: orbit-spin-1 6s infinite linear;
}
.objective-card:hover .prem-money .orbit-ring-2 {
  animation: orbit-spin-2 4s infinite linear;
}

@keyframes diamond-float-rotate {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-4px) rotate(8deg); }
}
@keyframes orbit-spin-1 {
  0% { transform: rotate(-15deg) rotate(0deg); }
  100% { transform: rotate(-15deg) rotate(360deg); }
}
@keyframes orbit-spin-2 {
  0% { transform: rotate(25deg) rotate(360deg); }
  100% { transform: rotate(25deg) rotate(0deg); }
}

/* Prevent stagger and translation conflict during parent swipe animations */
.step-swipe-in .objective-card,
.step-swipe-back-in .objective-card {
  animation-delay: 0s !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 1. Text Type Animation */
.micro-anim.terminal-type::before {
  content: '> sys_init';
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent-cyan);
  text-align: left;
  display: block;
  width: 80%;
  animation: typing-console 4s infinite steps(1);
}

@keyframes typing-console {
  0%, 100% { content: '> sys_init\n> '; }
  33% { content: '> sys_init\n> thinking...\n> '; }
  66% { content: '> sys_init\n> thinking...\n> loaded_text_node'; }
}

/* 2. Code Autocomplete Animation */
.micro-anim.code-autocomplete {
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 20px;
  gap: 5px;
}

.code-line {
  height: 4px;
  border-radius: 2px;
  background-color: var(--border-medium);
}

.code-line.line-1 {
  width: 60%;
  background-color: var(--accent-blue);
}

.code-line.line-2 {
  width: 80%;
  margin-left: 10px;
  background-color: var(--accent-cyan);
}

.code-line.line-3 {
  width: 0%;
  margin-left: 10px;
  background-color: var(--accent-amber);
  animation: autocomplete-line 3s infinite ease-in-out;
}

@keyframes autocomplete-line {
  0%, 100% { width: 0%; opacity: 0; }
  15% { width: 0%; opacity: 1; }
  60%, 85% { width: 55%; opacity: 1; }
}

/* 3. Image Resolving Grid Canvas */
.micro-anim.image-render {
  position: relative;
}

.render-grid {
  width: 36px;
  height: 36px;
  border: 1px dashed var(--accent-cyan);
  border-radius: 4px;
  background-image: 
    linear-gradient(rgba(0,153,170,0.06) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(0,153,170,0.06) 1px, transparent 1px);
  background-size: 6px 6px;
  position: relative;
  overflow: hidden;
}

.render-grid::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 153, 170, 0.15);
  animation: render-fill 3s infinite ease-in-out;
}

@keyframes render-fill {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.9; }
}

.render-beam {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
  left: 0;
  animation: beam-move 3s infinite ease-in-out;
}

@keyframes beam-move {
  0%, 100% { top: 0%; }
  50% { top: 100%; }
}

/* 4. Audio Equalizer Waveform */
.micro-anim.audio-wave {
  gap: 4px;
}

.audio-wave span {
  width: 3px;
  height: 16px;
  background-color: var(--accent-cyan);
  border-radius: 1px;
  display: block;
  animation: audio-bounce 1.2s infinite ease-in-out;
}

.audio-wave span:nth-child(1) { animation-delay: 0.1s; height: 8px; }
.audio-wave span:nth-child(2) { animation-delay: 0.35s; height: 22px; background-color: var(--accent-blue); }
.audio-wave span:nth-child(3) { animation-delay: 0.5s; height: 14px; }
.audio-wave span:nth-child(4) { animation-delay: 0.2s; height: 28px; background-color: var(--accent-blue); }
.audio-wave span:nth-child(5) { animation-delay: 0.4s; height: 6px; }

@keyframes audio-bounce {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.25); }
}

/* 5. Vision Reticle Focus Crosshair */
.micro-anim.vision-focus {
  position: relative;
}

.focus-box {
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent-cyan);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: focus-pulse 2s infinite ease-in-out;
}

.focus-box::before, .focus-box::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid var(--accent-blue);
}

.focus-box::before { top: -3px; left: -3px; border-right: none; border-bottom: none; }
.focus-box::after { bottom: -3px; right: -3px; border-left: none; border-top: none; }

.focus-box span {
  width: 2px;
  height: 2px;
  background-color: var(--accent-amber);
  border-radius: 50%;
  animation: center-dot-blink 1s infinite alternate;
}

@keyframes focus-pulse {
  0%, 100% { transform: scale(1); border-color: var(--accent-cyan); }
  50% { transform: scale(0.8); border-color: var(--accent-blue); }
}

@keyframes center-dot-blink {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

/* 6. Vector Node Drifting Clusters */
.micro-anim.vector-dots {
  position: relative;
}

.vector-dots .dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  animation: dot-drift 4s infinite ease-in-out;
}

.vector-dots .dot-1 { top: 22px; left: 35px; animation-delay: 0s; }
.vector-dots .dot-2 { top: 38px; left: 75px; background-color: var(--accent-blue); animation-delay: 1.2s; }
.vector-dots .dot-3 { top: 18px; left: 115px; animation-delay: 2.4s; }

@keyframes dot-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(5px, -6px); }
}

.vector-line {
  position: absolute;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
  opacity: 0.15;
  top: 30px;
  left: 45px;
  transform: rotate(18deg);
  animation: line-pulse 3s infinite ease-in-out;
}

@keyframes line-pulse {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.35; }
}

/* ==========================================
   Gaming Analyzer Micro-Animations & UI Styles
   ========================================== */

/* 1. Esports Crosshair Animation */
.micro-anim.gaming-esports {
  position: relative;
}

.gaming-crosshair {
  width: 24px;
  height: 24px;
  border: 1.5px dashed var(--accent-cyan);
  border-radius: 50%;
  position: relative;
  animation: gaming-crosshair-pulse 1.8s infinite ease-in-out;
}

.gaming-crosshair::before, .gaming-crosshair::after {
  content: '';
  position: absolute;
  background-color: var(--accent-cyan);
}

.gaming-crosshair::before {
  top: 50%; left: -4px; width: 32px; height: 1px; transform: translateY(-50%);
}

.gaming-crosshair::after {
  left: 50%; top: -4px; height: 32px; width: 1px; transform: translateX(-50%);
}

.gaming-target-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: var(--accent-amber);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent-amber);
  animation: gaming-crosshair-snap 3s infinite ease-in-out;
}

@keyframes gaming-crosshair-pulse {
  0%, 100% { transform: scale(1); border-color: var(--accent-cyan); opacity: 0.8; }
  50% { transform: scale(1.15); border-color: var(--accent-blue); opacity: 1; }
}

@keyframes gaming-crosshair-snap {
  0%, 100% { transform: translate(-25px, -15px); }
  25% { transform: translate(20px, 10px); }
  50% { transform: translate(0, 0); }
  75% { transform: translate(-10px, 20px); }
}

/* 2. Ray Tracing Split Animation */
.micro-anim.gaming-aaa {
  position: relative;
}

.rt-split-container {
  width: 60px;
  height: 40px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.rt-split-rt-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 153, 170, 0.15), rgba(0, 102, 204, 0.15));
  border-right: 1.5px solid var(--accent-cyan);
  animation: gaming-rt-sweep 4s infinite ease-in-out;
}

.rt-glow-node {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-cyan);
  top: 40%;
  left: 20%;
  animation: gaming-rt-glow 4s infinite ease-in-out;
}

@keyframes gaming-rt-sweep {
  0%, 100% { width: 10%; }
  50% { width: 90%; }
}

@keyframes gaming-rt-glow {
  0%, 10%, 90%, 100% { opacity: 0.1; filter: scale(0.8); }
  50% { opacity: 1; filter: scale(1.2); }
}

/* 3. Strategy / Sim Grid Animation */
.micro-anim.gaming-simulation {
  position: relative;
  display: flex;
  gap: 4px;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
}

.sim-building {
  width: 10px;
  background-color: var(--border-medium);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 2px 2px 0 0;
  transition: all 0.3s ease;
  height: 10px;
}

.sim-building:nth-child(1) { height: 18px; animation: sim-grow-1 2.5s infinite alternate ease-in-out; }
.sim-building:nth-child(2) { height: 35px; animation: sim-grow-2 2.5s infinite alternate ease-in-out; background-color: var(--accent-cyan); }
.sim-building:nth-child(3) { height: 25px; animation: sim-grow-3 2.5s infinite alternate ease-in-out; }
.sim-building:nth-child(4) { height: 42px; animation: sim-grow-4 2.5s infinite alternate ease-in-out; background-color: var(--accent-blue); }

@keyframes sim-grow-1 { 0% { height: 10px; } 100% { height: 28px; } }
@keyframes sim-grow-2 { 0% { height: 15px; } 100% { height: 45px; } }
@keyframes sim-grow-3 { 0% { height: 8px; } 100% { height: 32px; } }
@keyframes sim-grow-4 { 0% { height: 20px; } 100% { height: 50px; } }

/* 4. VR Stereoscopic Animation */
.micro-anim.gaming-vr {
  position: relative;
  gap: 15px;
}

.vr-lens {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--accent-cyan);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vr-lens::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-blue);
  animation: vr-eye-move 3s infinite ease-in-out;
}

@keyframes vr-eye-move {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-3px, 2px); }
  66% { transform: translate(3px, -2px); }
}

/* 5. RPG Compass Animation */
.micro-anim.gaming-rpg {
  position: relative;
}

.rpg-compass {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--border-medium);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rpg-needle {
  width: 2px;
  height: 24px;
  background: linear-gradient(to bottom, var(--accent-amber) 50%, var(--accent-cyan) 50%);
  animation: compass-spin 4s infinite cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

@keyframes compass-spin {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(180deg); }
  55% { transform: rotate(120deg); }
  80% { transform: rotate(380deg); }
  100% { transform: rotate(360deg); }
}

/* 6. Casual Retro Block Jump */
.micro-anim.gaming-casual {
  position: relative;
  align-items: flex-end;
  padding-bottom: 12px;
}

.retro-floor {
  position: absolute;
  bottom: 10px;
  width: 80%;
  height: 2px;
  background-color: var(--border-medium);
}

.retro-sprite {
  width: 12px;
  height: 12px;
  background-color: var(--accent-cyan);
  border-radius: 2px;
  border: 1px solid var(--accent-blue);
  margin-bottom: 2px;
  animation: retro-jump 1.5s infinite cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 0 6px rgba(0, 153, 170, 0.3);
}

@keyframes retro-jump {
  0%, 100% { transform: translateY(0) scaleY(1); }
  45% { transform: translateY(-24px) scaleY(1); }
  50% { transform: translateY(-24px) scaleY(0.9); }
  90% { transform: translateY(0) scaleY(1.1); }
}

/* Platform Fans Spin Animation */
.fan-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-light);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fan-blade {
  position: absolute;
  width: 2px;
  height: 20px;
  background-color: var(--text-secondary);
  border-radius: 1px;
}

.fan-blade:nth-child(2) { transform: rotate(45deg); }
.fan-blade:nth-child(3) { transform: rotate(90deg); }
.fan-blade:nth-child(4) { transform: rotate(135deg); }

.objective-card:hover .fan-spinner {
  border-color: var(--accent-cyan);
}

.objective-card:hover .fan-blade {
  background-color: var(--accent-cyan);
  animation: spin-fan 0.8s infinite linear;
}

@keyframes spin-fan {
  to { transform: rotate(360deg); }
}

/* ==========================================
   Step 2 & 3 Dynamic Visualizers for Gaming
   ========================================== */

/* Monitor Aspect Ratio Stretching Bezel */
.monitor-bezel {
  background-color: #ffffff;
  border: 4px solid var(--border-dark);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  position: relative;
  transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  height: 76px;
}

.monitor-stand {
  width: 24px;
  height: 12px;
  background-color: var(--border-dark);
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px 2px 0 0;
}

.monitor-screen-lines {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  align-items: center;
}

.monitor-screen-lines span {
  display: block;
  height: 2px;
  background-color: var(--border-light);
  width: 90%;
  border-radius: 1px;
}

/* Resolution Specific Bezel Layouts */
.monitor-bezel.res-1080p {
  width: 100px;
}

.monitor-bezel.res-1440p {
  width: 110px;
  border-color: var(--accent-blue);
  box-shadow: 0 0 15px rgba(0, 102, 204, 0.15);
}

.monitor-bezel.res-1440p .monitor-screen-lines span {
  background-color: rgba(0, 102, 204, 0.2);
}

.monitor-bezel.res-4k {
  width: 120px;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px rgba(0, 153, 170, 0.3);
}

.monitor-bezel.res-4k .monitor-screen-lines span {
  background-color: rgba(0, 153, 170, 0.3);
}

.monitor-bezel.res-ultrawide {
  width: 154px;
  height: 60px; /* Slimmer bezel */
  border-color: var(--accent-amber);
  box-shadow: 0 0 25px rgba(230, 92, 0, 0.2);
  border-radius: 6px;
}

.monitor-bezel.res-ultrawide .monitor-screen-lines span {
  background-color: rgba(230, 92, 0, 0.2);
}

/* Motion Blur Particle Track */
.ball-track {
  width: 100%;
  height: 8px;
  background-color: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.ball-particle {
  width: 14px;
  height: 14px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 10px var(--accent-cyan);
  animation: slide-particle 1.2s infinite alternate ease-in-out;
  filter: blur(0px);
  left: 0%;
}

@keyframes slide-particle {
  0% { left: 5%; }
  100% { left: 90%; }
}

/* Hz Blur Classes */
.ball-particle.hz-60 {
  animation-duration: 2.0s;
  filter: blur(5px);
  background-color: var(--border-medium);
  box-shadow: 0 0 6px var(--border-medium);
}

.ball-particle.hz-144 {
  animation-duration: 1.2s;
  filter: blur(2px);
  background-color: var(--accent-blue);
  box-shadow: 0 0 10px var(--accent-blue);
}

.ball-particle.hz-240 {
  animation-duration: 0.8s;
  filter: blur(0.5px);
  background-color: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan);
}

.ball-particle.hz-360 {
  animation-duration: 0.5s;
  filter: blur(0px);
  background-color: var(--accent-amber);
  box-shadow: 0 0 15px var(--accent-amber);
}



/* ==========================================
   Custom Game Selection Workspace Styles
   ========================================== */

.custom-games-trigger-container {
  display: flex;
  justify-content: center;
  margin-top: -15px;
  margin-bottom: 25px;
  animation: cardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.scifi-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed var(--border-medium);
  border-radius: 8px;
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.scifi-btn-secondary:hover {
  background: #ffffff;
  border-color: var(--accent-cyan);
  border-style: solid;
  color: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 153, 170, 0.1);
}

.pulse-dot-green {
  width: 6px;
  height: 6px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent-cyan);
  animation: pulse-glow 2s infinite ease-in-out;
}

.btn-prefix {
  opacity: 0.5;
  font-size: 9px;
  font-weight: 400;
}

.custom-games-workspace {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  animation: cardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.custom-games-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-bottom: 1px dashed var(--border-light);
  padding-bottom: 15px;
}

@media (max-width: 680px) {
  .custom-games-search-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.scifi-back-link {
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.scifi-back-link:hover {
  color: var(--accent-cyan);
  transform: translateX(-4px);
}

.search-input-wrapper {
  position: relative;
  flex-grow: 1;
  max-width: 480px;
  width: 100%;
}

@media (max-width: 680px) {
  .search-input-wrapper {
    max-width: 100%;
  }
}

.scifi-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 10px 16px 10px 38px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.01);
}

.scifi-search-input:focus {
  border-color: var(--accent-cyan);
  background: #ffffff;
  box-shadow: 0 0 15px rgba(0, 153, 170, 0.08), inset 0 1px 4px rgba(0,0,0,0.01);
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.4;
  pointer-events: none;
}

.search-spinner {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 153, 170, 0.1);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spinner 0.8s linear infinite;
}

.selected-games-tray {
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(0, 153, 170, 0.03);
  border: 1px solid rgba(0, 153, 170, 0.08);
  border-radius: 12px;
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
}

@media (max-width: 580px) {
  .selected-games-tray {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.tray-label {
  color: var(--accent-cyan);
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.selected-games-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-grow: 1;
}

.no-games-placeholder {
  color: var(--text-secondary);
  font-style: italic;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
}

.game-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--accent-cyan);
  border-radius: 20px;
  padding: 4px 10px 4px 12px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 153, 170, 0.05);
  animation: cardEntrance 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.game-pill-remove {
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: bold;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
}

.game-pill-remove:hover {
  color: var(--accent-amber);
}

.games-grid-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.games-grid-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-align: left;
  border-left: 2px solid var(--accent-cyan);
  padding-left: 8px;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

@media (max-width: 850px) {
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .games-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.game-select-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
  animation: cardEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.game-select-card:hover {
  background: #ffffff;
  border-color: var(--accent-cyan);
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0, 153, 170, 0.08);
}

.game-select-card.selected {
  background: #ffffff;
  border-color: var(--accent-cyan);
  box-shadow: 0 12px 25px rgba(0, 153, 170, 0.12), 0 0 0 1px var(--accent-cyan);
}

.game-card-img-wrapper {
  position: relative;
  width: 100%;
  padding-top: 46.7%; /* 460x215 Aspect Ratio matching Steam Header Banners */
  background-color: var(--bg-secondary);
  overflow: hidden;
}

.game-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-select-card:hover .game-card-img {
  transform: scale(1.04);
}

.game-card-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 0.05em;
}

.game-card-info {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  flex-grow: 1;
}

.game-card-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

.game-card-desc {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.35;
}

.game-card-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  transition: all 0.2s ease;
}

.game-select-card.selected .game-card-checkbox {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 2px 6px rgba(0, 153, 170, 0.4);
}

.custom-games-footer {
  display: flex;
  justify-content: center;
  border-top: 1px dashed var(--border-light);
  padding-top: 20px;
  margin-top: 10px;
}

.scifi-confirm-btn {
  background: var(--border-light);
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: not-allowed;
  letter-spacing: 0.1em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.scifi-confirm-btn.active {
  background: var(--text-primary);
  color: #ffffff;
  cursor: pointer;
}

.scifi-confirm-btn.active:hover {
  background: var(--accent-cyan);
  box-shadow: 0 8px 25px rgba(0, 153, 170, 0.3);
  transform: translateY(-2px);
}

.no-results-msg {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.4);
  border: 1px dashed var(--border-medium);
  border-radius: 12px;
}

.warning-icon {
  font-size: 16px;
  margin-right: 4px;
}

/* Steam import styling */
.steam-import-toggle-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
  width: 100%;
}

.steam-import-pane {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  width: 100%;
  background: rgba(0, 153, 170, 0.02);
  border: 1px dashed rgba(0, 153, 170, 0.2);
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
  animation: cardEntrance 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (max-width: 580px) {
  .steam-import-pane {
    flex-direction: column;
    align-items: stretch;
  }
}

.scifi-steam-input {
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.3s ease;
}

.scifi-steam-input:focus {
  border-color: var(--accent-cyan);
  background: #ffffff;
}

.scifi-steam-btn {
  background: var(--text-primary);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scifi-steam-btn:hover {
  background: var(--accent-cyan);
  box-shadow: 0 4px 12px rgba(0, 153, 170, 0.2);
}

.scifi-steam-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.steam-import-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
  width: 100%;
  text-align: left;
}

/* Catalog Grouping styles */
.catalog-group-header {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  padding: 18px 8px 8px 8px;
  border-bottom: 1px solid var(--border-light);
  margin-top: 20px;
  margin-bottom: 8px;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.catalog-group-header .group-title {
  font-weight: 700;
}

.catalog-group-header .group-desc {
  font-size: 9px;
  color: var(--text-secondary);
  font-weight: normal;
  text-transform: none;
}

.model-desc-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
}

.model-tags {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.model-tag {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 153, 170, 0.05);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 153, 170, 0.15);
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .catalog-group-header {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding-bottom: 12px;
  }
  .model-desc-wrapper {
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }
  .model-tags {
    margin-left: 0;
  }
}

/* Grouped Layout Modifiers for Step 4 & 5 */
.objective-container.two-cols {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
}

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

.objective-group-header {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-cyan);
  border-bottom: 1px solid var(--border-light);
  padding: 24px 8px 8px 8px;
  margin-top: 15px;
  margin-bottom: 8px;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.objective-group-header .group-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.objective-group-header .group-desc {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 300;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
}

/* Custom Vector animations for gaming platforms & budgets */

/* Prebuilt PC Tower Animation */
.pc-chassis {
  width: 24px;
  height: 38px;
  border: 2px solid var(--border-medium);
  border-radius: 4px;
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc-rgb-line {
  position: absolute;
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-cyan), var(--accent-blue));
  border-radius: 1px;
}

.pc-fan-back {
  position: absolute;
  top: 6px;
  right: 4px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--border-medium);
  border-radius: 50%;
}

.pc-fan-back::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 6px;
  background: var(--text-secondary);
  transform: translate(-50%, -50%);
}

.objective-card:hover .pc-chassis {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 12px rgba(0, 153, 170, 0.25);
}

.objective-card:hover .pc-rgb-line {
  background: linear-gradient(180deg, var(--accent-amber), var(--accent-cyan));
  animation: rgb-slide 1.5s infinite linear;
}

.objective-card:hover .pc-fan-back::after {
  animation: spin-fan 0.6s infinite linear;
  background: var(--accent-cyan);
}

@keyframes rgb-slide {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Laptop Animation */
.gaming-laptop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.laptop-screen {
  width: 38px;
  height: 22px;
  border: 2px solid var(--border-medium);
  border-radius: 3px 3px 0 0;
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  transform-origin: bottom center;
  transition: all 0.3s ease;
}

.laptop-screen-content {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.laptop-screen-content::after {
  content: '';
  width: 8px;
  height: 4px;
  background-color: var(--accent-cyan);
  opacity: 0.3;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.laptop-keyboard {
  width: 48px;
  height: 4px;
  background-color: var(--border-medium);
  border-radius: 0 0 2px 2px;
  position: relative;
  margin-top: -1px;
  transition: all 0.3s ease;
}

.laptop-keyboard::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 6px;
  right: 6px;
  height: 1px;
  background-color: var(--text-secondary);
  opacity: 0.4;
}

.objective-card:hover .laptop-screen {
  border-color: var(--accent-cyan);
  transform: rotateX(-15deg);
  box-shadow: 0 -4px 12px rgba(0, 153, 170, 0.15);
}

.objective-card:hover .laptop-screen-content::after {
  background-color: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  opacity: 1;
  animation: laptop-screen-glow 1s infinite alternate;
}

.objective-card:hover .laptop-keyboard {
  background-color: var(--accent-cyan);
  box-shadow: 0 2px 8px rgba(0, 153, 170, 0.3);
}

@keyframes laptop-screen-glow {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* Handheld Console Animation */
.gaming-handheld {
  display: flex;
  align-items: center;
  justify-content: center;
}

.handheld-body {
  width: 50px;
  height: 24px;
  border: 2px solid var(--border-medium);
  border-radius: 6px;
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.handheld-screen {
  width: 26px;
  height: 16px;
  border: 1px solid var(--border-medium);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.handheld-pixel {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  opacity: 0.3;
  transition: all 0.3s ease;
}

.handheld-dpad {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background-color: var(--text-secondary);
  transition: all 0.3s ease;
}

.handheld-dpad::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 1px;
  height: 9px;
  background-color: var(--text-secondary);
}

.handheld-dpad::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 2px;
  width: 9px;
  height: 1px;
  background-color: var(--text-secondary);
}

.handheld-buttons {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.handheld-buttons::before, .handheld-buttons::after {
  content: '';
  width: 3px;
  height: 3px;
  background-color: var(--text-secondary);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.objective-card:hover .handheld-body {
  border-color: var(--accent-cyan);
  box-shadow: 0 4px 15px rgba(0, 153, 170, 0.15);
  transform: scale(1.05);
}

.objective-card:hover .handheld-screen {
  border-color: var(--accent-cyan);
  box-shadow: inset 0 0 5px rgba(0, 153, 170, 0.15);
}

.objective-card:hover .handheld-pixel {
  opacity: 1;
  animation: handheld-game-move 1.5s infinite linear;
}

.objective-card:hover .handheld-buttons::before,
.objective-card:hover .handheld-buttons::after,
.objective-card:hover .handheld-dpad,
.objective-card:hover .handheld-dpad::before,
.objective-card:hover .handheld-dpad::after {
  background-color: var(--accent-cyan);
}

@keyframes handheld-game-move {
  0% { left: 10%; top: 20%; }
  25% { left: 50%; top: 70%; }
  50% { left: 80%; top: 40%; }
  75% { left: 40%; top: 10%; }
  100% { left: 10%; top: 20%; }
}

/* Coin stack budget value */
.coin-stack {
  position: relative;
  width: 30px;
  height: 24px;
}

.coin {
  position: absolute;
  width: 20px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1.5px solid var(--border-medium);
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}

.coin-1 { bottom: 0; }
.coin-2 { bottom: 5px; }
.coin-3 { bottom: 10px; }

.objective-card:hover .coin {
  border-color: var(--accent-cyan);
}

.objective-card:hover .coin-1 {
  background-color: var(--accent-blue);
  animation: coin-bounce-1 1.2s infinite ease-in-out;
}

.objective-card:hover .coin-2 {
  background-color: var(--accent-cyan);
  animation: coin-bounce-2 1.2s infinite ease-in-out;
}

.objective-card:hover .coin-3 {
  background-color: var(--accent-amber);
  animation: coin-bounce-3 1.2s infinite ease-in-out;
}

@keyframes coin-bounce-1 {
  0%, 100% { bottom: 0; }
  50% { bottom: 2px; }
}

@keyframes coin-bounce-2 {
  0%, 100% { bottom: 5px; }
  50% { bottom: 9px; }
}

@keyframes coin-bounce-3 {
  0%, 100% { bottom: 10px; }
  50% { bottom: 16px; }
}

/* Energy core budget mid */
.energy-core {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-medium);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.energy-ring {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px dashed var(--accent-cyan);
  animation: ring-rotate 4s infinite linear;
}

.energy-spark {
  width: 6px;
  height: 6px;
  background-color: var(--accent-blue);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent-blue);
  transition: all 0.3s ease;
}

.objective-card:hover .energy-core {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 12px rgba(0, 153, 170, 0.2);
}

.objective-card:hover .energy-ring {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(0, 153, 170, 0.4);
  animation: ring-rotate 1.5s infinite linear;
}

.objective-card:hover .energy-spark {
  background-color: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
  animation: core-pulse 0.8s infinite alternate ease-in-out;
}

@keyframes core-pulse {
  0% { transform: scale(0.8); }
  100% { transform: scale(1.3); }
}

/* Flame container budget high */
.flame-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 28px;
  width: 40px;
  position: relative;
}

.flame {
  width: 8px;
  background: linear-gradient(to top, var(--accent-amber), var(--accent-cyan));
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.flame-left { height: 10px; }
.flame-center { height: 18px; width: 10px; background: linear-gradient(to top, var(--accent-amber), #ff3366); }
.flame-right { height: 12px; }

.objective-card:hover .flame-left {
  animation: flame-burn 0.8s infinite alternate ease-in-out;
}

.objective-card:hover .flame-center {
  animation: flame-burn 0.6s infinite alternate ease-in-out;
  opacity: 1;
}

.objective-card:hover .flame-right {
  animation: flame-burn 0.7s infinite alternate ease-in-out;
}

@keyframes flame-burn {
  0% { height: 8px; transform: scaleX(0.9); }
  50% { height: 26px; transform: scaleX(1.1); }
  100% { height: 14px; transform: scaleX(0.95); }
}

/* Elite diamond budget elite */
.elite-diamond {
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 2px solid var(--border-medium);
  transform: rotate(45deg);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.diamond-glow {
  position: absolute;
  width: 60%;
  height: 60%;
  background: var(--accent-amber);
  opacity: 0.2;
  transition: all 0.3s ease;
}

.objective-card:hover .elite-diamond {
  border-color: var(--accent-amber);
  box-shadow: 0 0 15px rgba(230, 92, 0, 0.3);
  transform: rotate(225deg) scale(1.1);
}

.objective-card:hover .diamond-glow {
  background: var(--accent-amber);
  opacity: 1;
  box-shadow: 0 0 12px var(--accent-amber);
  animation: diamond-pulse 1s infinite alternate ease-in-out;
}

@keyframes diamond-pulse {
  0% { transform: scale(0.7); }
  100% { transform: scale(1.2); }
}

/* Hardware Brand Badges */
.badge-nvidia {
  background-color: rgba(118, 185, 0, 0.08) !important;
  color: #76b900 !important;
  border: 1px solid rgba(118, 185, 0, 0.2) !important;
}
.badge-amd {
  background-color: rgba(237, 28, 36, 0.08) !important;
  color: #ed1c24 !important;
  border: 1px solid rgba(237, 28, 36, 0.2) !important;
}
.badge-intel {
  background-color: rgba(0, 113, 197, 0.08) !important;
  color: #0071c5 !important;
  border: 1px solid rgba(0, 113, 197, 0.2) !important;
}
.badge-apple {
  background-color: rgba(136, 136, 136, 0.08) !important;
  color: #888888 !important;
  border: 1px solid rgba(136, 136, 136, 0.2) !important;
}

/* Brand Group Headers */
.group-header-nvidia {
  color: #76b900 !important;
  border-bottom: 1px solid rgba(118, 185, 0, 0.15) !important;
}
.group-header-amd {
  color: #ed1c24 !important;
  border-bottom: 1px solid rgba(237, 28, 36, 0.15) !important;
}
.group-header-intel {
  color: #0071c5 !important;
  border-bottom: 1px solid rgba(0, 113, 197, 0.15) !important;
}
.group-header-apple {
  color: #888888 !important;
  border-bottom: 1px solid rgba(136, 136, 136, 0.15) !important;
}

/* Brand Row Hover and Selected Glows */
.row-nvidia {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.row-nvidia:hover {
  border-color: rgba(118, 185, 0, 0.5) !important;
  background: rgba(118, 185, 0, 0.02) !important;
  box-shadow: 0 8px 25px rgba(118, 185, 0, 0.08) !important;
  transform: translateX(6px);
}
.row-nvidia.selected {
  border-color: #76b900 !important;
  background: rgba(118, 185, 0, 0.03) !important;
  box-shadow: 0 8px 25px rgba(118, 185, 0, 0.12), 0 0 0 1px #76b900 !important;
}

.row-amd {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.row-amd:hover {
  border-color: rgba(237, 28, 36, 0.5) !important;
  background: rgba(237, 28, 36, 0.02) !important;
  box-shadow: 0 8px 25px rgba(237, 28, 36, 0.08) !important;
  transform: translateX(6px);
}
.row-amd.selected {
  border-color: #ed1c24 !important;
  background: rgba(237, 28, 36, 0.03) !important;
  box-shadow: 0 8px 25px rgba(237, 28, 36, 0.12), 0 0 0 1px #ed1c24 !important;
}

.row-intel {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.row-intel:hover {
  border-color: rgba(0, 113, 197, 0.5) !important;
  background: rgba(0, 113, 197, 0.02) !important;
  box-shadow: 0 8px 25px rgba(0, 113, 197, 0.08) !important;
  transform: translateX(6px);
}
.row-intel.selected {
  border-color: #0071c5 !important;
  background: rgba(0, 113, 197, 0.03) !important;
  box-shadow: 0 8px 25px rgba(0, 113, 197, 0.12), 0 0 0 1px #0071c5 !important;
}

.row-apple {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.row-apple:hover {
  border-color: rgba(136, 136, 136, 0.5) !important;
  background: rgba(136, 136, 136, 0.02) !important;
  box-shadow: 0 8px 25px rgba(136, 136, 136, 0.08) !important;
  transform: translateX(6px);
}
.row-apple.selected {
  border-color: #888888 !important;
  background: rgba(136, 136, 136, 0.03) !important;
  box-shadow: 0 8px 25px rgba(136, 136, 136, 0.12), 0 0 0 1px #888888 !important;
}

/* GPU Brand Pulse Keyframes */
@keyframes pulse-nvidia {
  0% { border-color: rgba(118, 185, 0, 0.4); box-shadow: 0 0 5px rgba(118, 185, 0, 0.2); }
  100% { border-color: rgba(118, 185, 0, 1); box-shadow: 0 0 20px rgba(118, 185, 0, 0.6); }
}
@keyframes pulse-amd {
  0% { border-color: rgba(237, 28, 36, 0.4); box-shadow: 0 0 5px rgba(237, 28, 36, 0.2); }
  100% { border-color: rgba(237, 28, 36, 1); box-shadow: 0 0 20px rgba(237, 28, 36, 0.6); }
}
@keyframes pulse-intel {
  0% { border-color: rgba(0, 113, 197, 0.4); box-shadow: 0 0 5px rgba(0, 113, 197, 0.2); }
  100% { border-color: rgba(0, 113, 197, 1); box-shadow: 0 0 20px rgba(0, 113, 197, 0.6); }
}
@keyframes pulse-apple {
  0% { border-color: rgba(136, 136, 136, 0.4); box-shadow: 0 0 5px rgba(136, 136, 136, 0.2); }
  100% { border-color: rgba(136, 136, 136, 1); box-shadow: 0 0 20px rgba(136, 136, 136, 0.6); }
}

/* GPU Row Interactive Animations (Fan Spinner & Apple Neural Engine) */
.row-gpu-anim {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.gpu-fan-spinner {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-medium);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.gpu-fan-blade {
  position: absolute;
  width: 2px;
  height: 16px;
  background-color: var(--text-secondary);
  border-radius: 1px;
}
.gpu-fan-blade:nth-child(2) { transform: rotate(60deg); }
.gpu-fan-blade:nth-child(3) { transform: rotate(120deg); }

/* PC GPU cooling fan spinning speeds */
.catalog-row:hover .gpu-fan-spinner.speed-extreme {
  border-color: var(--accent-amber);
}
.catalog-row:hover .gpu-fan-spinner.speed-extreme .gpu-fan-blade {
  background-color: var(--accent-amber);
  animation: spin-fan 0.25s infinite linear;
}

.catalog-row:hover .gpu-fan-spinner.speed-fast {
  border-color: var(--accent-cyan);
}
.catalog-row:hover .gpu-fan-spinner.speed-fast .gpu-fan-blade {
  background-color: var(--accent-cyan);
  animation: spin-fan 0.4s infinite linear;
}

.catalog-row:hover .gpu-fan-spinner.speed-moderate {
  border-color: var(--accent-blue);
}
.catalog-row:hover .gpu-fan-spinner.speed-moderate .gpu-fan-blade {
  background-color: var(--accent-blue);
  animation: spin-fan 0.7s infinite linear;
}

.catalog-row:hover .gpu-fan-spinner.speed-slow {
  border-color: var(--text-secondary);
}
.catalog-row:hover .gpu-fan-spinner.speed-slow .gpu-fan-blade {
  background-color: var(--text-secondary);
  animation: spin-fan 1.1s infinite linear;
}

/* Apple neural engine core pulsar */
.apple-core-pulsar {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background-color: var(--text-secondary);
  transition: all 0.3s ease;
}

.catalog-row:hover .apple-core-pulsar.speed-extreme {
  background-color: var(--accent-amber);
  box-shadow: 0 0 10px var(--accent-amber);
  animation: core-pulsate 0.4s infinite alternate ease-in-out;
}
.catalog-row:hover .apple-core-pulsar.speed-fast {
  background-color: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: core-pulsate 0.7s infinite alternate ease-in-out;
}
.catalog-row:hover .apple-core-pulsar.speed-moderate {
  background-color: var(--accent-blue);
  box-shadow: 0 0 6px var(--accent-blue);
  animation: core-pulsate 1.0s infinite alternate ease-in-out;
}
.catalog-row:hover .apple-core-pulsar.speed-slow {
  background-color: var(--text-secondary);
  box-shadow: 0 0 4px var(--text-secondary);
  animation: core-pulsate 1.5s infinite alternate ease-in-out;
}

@keyframes core-pulsate {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 1; }
}

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

/* Catalog Row Grid Override when GPU Animation & Brand Logo are present */
.catalog-row:has(.row-gpu-anim):has(.brand-logo-small) {
  grid-template-columns: 40px 40px 110px 1.5fr 80px 100px 3.5fr;
}

/* Catalog Row Grid Override when Brand Logo is present but GPU Animation is not (e.g. CPUs) */
.catalog-row:has(.brand-logo-small):not(:has(.row-gpu-anim)) {
  grid-template-columns: 40px 110px 1.5fr 80px 100px 3.5fr;
}

@media (max-width: 768px) {
  .catalog-row:has(.row-gpu-anim):has(.brand-logo-small),
  .catalog-row:has(.brand-logo-small):not(:has(.row-gpu-anim)) {
    grid-template-columns: 1fr;
  }
  .row-gpu-anim, .brand-logo-small {
    margin: 0 auto 8px auto !important;
  }
}

/* Brand Cards Hover and Selected Styles */
.objective-card.brand-nvidia:hover {
  border-color: #76b900 !important;
  box-shadow: 0 20px 40px rgba(118, 185, 0, 0.08) !important;
}
.objective-card.brand-nvidia.selected {
  border-color: #76b900 !important;
  box-shadow: 0 20px 40px rgba(118, 185, 0, 0.12), 0 0 0 1px #76b900 !important;
  animation: pulse-nvidia 1.5s infinite alternate ease-in-out !important;
}
.objective-card.brand-nvidia:hover .objective-icon,
.objective-card.brand-nvidia.selected .objective-icon {
  background: #76b900 !important;
  border-color: #76b900 !important;
  box-shadow: 0 4px 12px rgba(118, 185, 0, 0.3) !important;
}

.objective-card.brand-amd:hover {
  border-color: #ed1c24 !important;
  box-shadow: 0 20px 40px rgba(237, 28, 36, 0.08) !important;
}
.objective-card.brand-amd.selected {
  border-color: #ed1c24 !important;
  box-shadow: 0 20px 40px rgba(237, 28, 36, 0.12), 0 0 0 1px #ed1c24 !important;
  animation: pulse-amd 1.5s infinite alternate ease-in-out !important;
}
.objective-card.brand-amd:hover .objective-icon,
.objective-card.brand-amd.selected .objective-icon {
  background: #ed1c24 !important;
  border-color: #ed1c24 !important;
  box-shadow: 0 4px 12px rgba(237, 28, 36, 0.3) !important;
}

.objective-card.brand-intel:hover {
  border-color: #0071c5 !important;
  box-shadow: 0 20px 40px rgba(0, 113, 197, 0.08) !important;
}
.objective-card.brand-intel.selected {
  border-color: #0071c5 !important;
  box-shadow: 0 20px 40px rgba(0, 113, 197, 0.12), 0 0 0 1px #0071c5 !important;
  animation: pulse-intel 1.5s infinite alternate ease-in-out !important;
}
.objective-card.brand-intel:hover .objective-icon,
.objective-card.brand-intel.selected .objective-icon {
  background: #0071c5 !important;
  border-color: #0071c5 !important;
  box-shadow: 0 4px 12px rgba(0, 113, 197, 0.3) !important;
}

.objective-card.brand-apple:hover {
  border-color: #888888 !important;
  box-shadow: 0 20px 40px rgba(136, 136, 136, 0.08) !important;
}
.objective-card.brand-apple.selected {
  border-color: #888888 !important;
  box-shadow: 0 20px 40px rgba(136, 136, 136, 0.12), 0 0 0 1px #888888 !important;
  animation: pulse-apple 1.5s infinite alternate ease-in-out !important;
}
.objective-card.brand-apple:hover .objective-icon,
.objective-card.brand-apple.selected .objective-icon {
  background: #888888 !important;
  border-color: #888888 !important;
  box-shadow: 0 4px 12px rgba(136, 136, 136, 0.3) !important;
}

.objective-card.brand-generic:hover {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 20px 40px rgba(0, 153, 170, 0.08) !important;
}
.objective-card.brand-generic.selected {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 20px 40px rgba(0, 153, 170, 0.12), 0 0 0 1px var(--accent-cyan) !important;
  animation: core-pulse 1.5s infinite alternate ease-in-out !important;
}
.objective-card.brand-generic:hover .objective-icon,
.objective-card.brand-generic.selected .objective-icon {
  background: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 4px 12px rgba(0, 153, 170, 0.3) !important;
}

/* Responsive UI Adjustments for Wizard and Configurator */
@media (max-width: 600px) {
  .minimal-wizard-card {
    padding: 24px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 24px !important;
  }
  .minimal-options-grid {
    gap: 12px !important;
  }
  .objective-container {
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .simple-stats-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .restart-btn {
    padding: 10px 16px !important;
    font-size: 9px !important;
  }
}

.lang-toggle-btn {
  background: none;
  border: 1px dashed transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  transition: all 0.2s ease;
  user-select: none;
}

.lang-toggle-btn:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background-color: rgba(0, 153, 170, 0.05);
}

/* ===== Transparent VRAM math + fit verdict (the moat) ===== */
.vram-breakdown {
  width: 100%;
  max-width: 980px;
  margin: 0 auto 8px;
  border: 1px solid var(--border-light);
  background-color: var(--bg-secondary);
  padding: 18px 20px;
  box-sizing: border-box;
}

.vb-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.vb-title .vb-sub {
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
}

.vb-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

.vb-term {
  flex: 1 1 0;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  background-color: var(--bg-primary);
}

.vb-term-val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.vb-term-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.vb-term-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.vb-total-term {
  border-color: var(--accent-blue);
  background-color: rgba(var(--accent-blue-rgb), 0.04);
}

.vb-total-term .vb-term-val {
  color: var(--accent-blue);
}

.vb-op {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0 2px;
}

.vb-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.vb-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  white-space: nowrap;
}

.vb-badge.vb-ok {
  border-color: #1a8a4a;
  color: #1a8a4a;
  background-color: rgba(26, 138, 74, 0.06);
}

.vb-badge.vb-tight {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background-color: rgba(var(--accent-cyan-rgb), 0.06);
}

.vb-badge.vb-warn {
  border-color: var(--accent-amber);
  color: var(--accent-amber);
  background-color: rgba(230, 92, 0, 0.06);
}

.vb-badge.vb-bad {
  border-color: #c0392b;
  color: #c0392b;
  background-color: rgba(192, 57, 43, 0.06);
}

.vb-verdict-detail {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .vb-formula {
    flex-direction: column;
  }
  .vb-op {
    align-self: flex-start;
    padding: 0 0 0 6px;
  }
  .vb-term {
    min-width: 0;
  }
}

/* ===================== BLOG + ARTICLES ===================== */
.blog-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 90px 5% 80px;
}

.blog-head {
  margin-bottom: 36px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 24px;
}

.blog-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 10px;
}

.blog-title {
  font-family: var(--font-sans);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.blog-subtitle {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-secondary);
  margin-top: 14px;
  max-width: 640px;
}

/* Index list */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  background-color: var(--bg-secondary);
  padding: 22px;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.blog-card:hover {
  border-color: var(--accent-blue);
  transform: translateY(-2px);
}

.blog-card-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 12px;
}

.blog-card-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.blog-card-desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  flex: 1;
}

.blog-card-more {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-blue);
  margin-top: 16px;
}

/* Article body */
.article-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 90px 5% 80px;
}

.article-breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.article-breadcrumb a {
  color: var(--accent-cyan);
  text-decoration: none;
}

.article-breadcrumb a:hover {
  text-decoration: underline;
}

.article-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.article-h1 {
  font-family: var(--font-sans);
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 28px;
}

.article-body {
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-primary);
}

.article-body p {
  margin-bottom: 18px;
}

.article-body h2 {
  font-family: var(--font-sans);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 38px 0 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  color: var(--text-primary);
}

.article-body h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  margin: 26px 0 10px;
  color: var(--text-primary);
}

.article-body ul,
.article-body ol {
  margin: 0 0 18px 22px;
}

.article-body li {
  margin-bottom: 8px;
}

.article-body a {
  color: var(--accent-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body strong {
  font-weight: 700;
}

.article-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 1px 5px;
  border-radius: 3px;
}

.article-lead {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 26px;
}

/* Data table inside articles */
.article-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 14.5px;
}

.article-table th,
.article-table td {
  border: 1px solid var(--border-light);
  padding: 9px 12px;
  text-align: left;
}

.article-table th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
}

.article-table td {
  font-family: var(--font-sans);
}

.article-table .tcol-key {
  font-weight: 600;
}

/* Callout / key takeaway */
.article-callout {
  border: 1px solid var(--border-medium);
  border-left: 3px solid var(--accent-cyan);
  background-color: var(--bg-secondary);
  padding: 16px 18px;
  margin: 24px 0;
  font-size: 15px;
  line-height: 1.6;
}

.article-callout-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  display: block;
  margin-bottom: 6px;
}

/* CTA into calculator */
.article-cta {
  border: 1px solid var(--accent-blue);
  background-color: rgba(var(--accent-blue-rgb), 0.04);
  padding: 24px;
  margin: 40px 0 30px;
  text-align: center;
}

.article-cta-title {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.article-cta-desc {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.article-cta-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background-color: var(--accent-blue);
  padding: 13px 24px;
  transition: background-color 0.18s ease;
}

.article-cta-btn:hover {
  background-color: #0052a3;
}

.article-cta-btn .arrow {
  margin-left: 6px;
}

/* FAQ block */
.article-faq {
  margin: 36px 0;
}

.article-faq h2 {
  margin-bottom: 16px;
}

.faq-item {
  border-bottom: 1px solid var(--border-light);
  padding: 16px 0;
}

.faq-q {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.faq-a {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Related articles */
.article-related {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.article-related-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.article-related-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.article-related-list a {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--accent-blue);
  text-decoration: none;
  border: 1px solid var(--border-light);
  padding: 14px;
  transition: border-color 0.18s ease;
}

.article-related-list a:hover {
  border-color: var(--accent-blue);
}

.article-disclosure {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-medium);
  line-height: 1.5;
}

/* =====================================================================
   HOME — Wide Option Card (04 // OS_TUNING)
   ===================================================================== */
.option-card-wide {
  grid-column: 1 / -1;
  min-height: auto;
  padding: 30px 30px 26px;
}

.option-wide-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
}

.option-wide-text {
  flex: 1;
  min-width: 0;
}

.option-card-wide .option-num {
  margin-bottom: 14px;
}

.option-card-wide .option-desc {
  margin-bottom: 24px;
  max-width: 640px;
}

/* Decorative animated performance meters on the right side */
.option-wide-meter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 220px;
  flex-shrink: 0;
}

.owm-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.owm-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  width: 28px;
}

.owm-track {
  flex: 1;
  height: 4px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  overflow: hidden;
}

.owm-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
  transform-origin: left;
  animation: owm-oscillate 2.6s ease-in-out infinite alternate;
}

.owm-fill-1 { width: 84%; animation-delay: 0s; }
.owm-fill-2 { width: 62%; animation-delay: 0.5s; }
.owm-fill-3 { width: 73%; animation-delay: 1s; }

@keyframes owm-oscillate {
  0% { transform: scaleX(0.55); opacity: 0.7; }
  100% { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 768px) {
  .option-wide-meter {
    display: none;
  }

  .option-card-wide {
    padding: 28px 24px;
  }
}

/* =====================================================================
   OPTIMIZATION GUIDE PAGE (/optimize/) — .og-*
   ===================================================================== */
.og-page {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 40px;
}

/* --- Hero --- */
.og-hero {
  text-align: center;
  margin-bottom: 36px;
}

.og-title {
  font-family: var(--font-sans);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 16px;
}

.og-subtitle {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
}

/* --- Score HUD --- */
.og-hud {
  display: flex;
  align-items: stretch;
  gap: 32px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 22px 26px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.og-hud-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.og-hud-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.og-hud-score-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}

.og-hud-score {
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.og-hud-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  transition: color 0.4s ease;
}

.og-hud[data-level="1"] .og-hud-status { color: var(--accent-amber); }
.og-hud[data-level="2"] .og-hud-status { color: var(--accent-cyan); }
.og-hud[data-level="3"] .og-hud-status { color: var(--accent-blue); }
.og-hud[data-level="4"] .og-hud-status { color: #0a9d4f; }

.og-hud-track {
  position: relative;
  width: 100%;
  height: 10px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.og-hud-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.og-hud[data-level="4"] .og-hud-fill {
  background: linear-gradient(90deg, #0a9d4f, var(--accent-cyan));
}

.og-hud-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}

.og-hud-ticks span {
  flex: 1;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.og-hud-ticks span:last-child {
  border-right: none;
}

.og-hud-complete {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 24px rgba(var(--accent-cyan-rgb), 0.18);
}

.og-hud-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-light);
  padding-left: 32px;
}

.og-hud-counter {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.og-hud-counter-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--accent-cyan);
}

.og-hud-counter-sep,
.og-hud-counter-total {
  font-size: 15px;
  color: var(--text-secondary);
}

.og-hud-counter-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-secondary);
}

.og-reset-btn {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border-medium);
  border-radius: 3px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.og-reset-btn:hover {
  color: var(--accent-amber);
  border-color: var(--accent-amber);
  background-color: rgba(230, 92, 0, 0.05);
}

/* --- Phase Navigation --- */
.og-phase-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.og-phase-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  position: relative;
  font-family: var(--font-mono);
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 10px 14px 9px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 150px;
}

.og-phase-code {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}

.og-phase-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  text-align: left;
}

.og-phase-count {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 9px;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: 2px 5px;
  background-color: var(--bg-secondary);
  transition: all 0.3s ease;
}

.og-phase-btn:hover {
  border-color: var(--border-medium);
  background-color: #ffffff;
  transform: translateY(-2px);
}

.og-phase-btn.og-phase-active {
  background-color: var(--text-primary);
  border-color: var(--text-primary);
}

.og-phase-btn.og-phase-active .og-phase-code { color: rgba(255, 255, 255, 0.55); }
.og-phase-btn.og-phase-active .og-phase-name { color: #ffffff; }

.og-phase-btn.og-phase-active .og-phase-count {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.og-phase-btn.og-phase-full .og-phase-count {
  background-color: rgba(var(--accent-cyan-rgb), 0.1);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  font-weight: 700;
}

/* --- Phase intro line --- */
.og-phase-intro {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 18px;
  line-height: 1.6;
}

.og-intro-marker {
  color: var(--accent-cyan);
  font-weight: 700;
  margin-right: 4px;
}

/* --- Tweak Cards --- */
.og-tweak-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.og-card {
  position: relative;
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.og-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: var(--border-medium);
  transition: background-color 0.3s ease;
}

.og-card[data-impact="high"]::before { background-color: var(--accent-amber); }
.og-card[data-impact="med"]::before { background-color: var(--accent-cyan); }

.og-card:hover {
  border-color: var(--border-medium);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.og-card.og-completed {
  border-color: rgba(var(--accent-cyan-rgb), 0.45);
  background-color: rgba(var(--accent-cyan-rgb), 0.03);
}

.og-card.og-completed::before {
  background-color: var(--accent-cyan);
}

.og-card.og-completed .og-card-title {
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--accent-cyan-rgb), 0.5);
  text-decoration-thickness: 1.5px;
}

.og-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}

.og-card-head:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: -2px;
}

.og-check {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1.5px solid var(--border-medium);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}

.og-check-mark {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.25s ease;
  line-height: 1;
}

.og-check:hover {
  border-color: var(--accent-cyan);
}

.og-completed .og-check {
  background-color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(var(--accent-cyan-rgb), 0.35);
}

.og-completed .og-check-mark {
  opacity: 1;
  transform: scale(1);
}

@keyframes og-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.og-check-pop {
  animation: og-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.og-card-titles {
  flex: 1;
  min-width: 0;
}

.og-card-title {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 6px;
  transition: color 0.3s ease;
}

.og-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.og-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid;
}

.og-badge-high {
  color: var(--accent-amber);
  border-color: rgba(230, 92, 0, 0.4);
  background-color: rgba(230, 92, 0, 0.06);
}

.og-badge-med {
  color: var(--accent-cyan);
  border-color: rgba(var(--accent-cyan-rgb), 0.4);
  background-color: rgba(var(--accent-cyan-rgb), 0.06);
}

.og-badge-low {
  color: var(--text-secondary);
  border-color: var(--border-medium);
  background-color: var(--bg-secondary);
}

.og-badge-adv {
  color: #ffffff;
  border-color: var(--text-primary);
  background-color: var(--text-primary);
}

.og-meta-time {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.og-chevron {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 300;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.og-card:hover .og-chevron {
  color: var(--accent-cyan);
}

.og-open .og-chevron {
  transform: rotate(45deg);
  color: var(--accent-cyan);
}

/* Collapsible body via grid-rows trick */
.og-card-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.og-open .og-card-collapse {
  grid-template-rows: 1fr;
}

.og-card-inner {
  overflow: hidden;
  min-height: 0;
}

.og-card-body {
  padding: 2px 22px 22px 62px;
}

.og-card-desc {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 16px;
  max-width: 720px;
}

.og-steps-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--accent-cyan);
  margin-bottom: 10px;
}

.og-steps {
  list-style: none;
  counter-reset: og-step;
  margin: 0 0 16px;
  padding: 0;
}

.og-steps li {
  counter-increment: og-step;
  position: relative;
  padding-left: 34px;
  margin-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #3a424a;
}

.og-steps li::before {
  content: counter(og-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-cyan);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.35);
  border-radius: 2px;
  padding: 1px 4px;
  line-height: 1.4;
}

/* Terminal-style command block */
.og-cmd {
  margin-bottom: 16px;
}

.og-cmd-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.og-cmd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background-color: #11161b;
  border: 1px solid #232c34;
  border-radius: 4px;
  padding: 11px 14px;
}

.og-cmd-row code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #cfe3ec;
  white-space: pre;
  overflow-x: auto;
  flex: 1;
}

.og-cmd-row code::before {
  content: "> ";
  color: var(--accent-cyan);
}

.og-copy-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9fd3dd;
  background: transparent;
  border: 1px solid #2e3a44;
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.og-copy-btn:hover {
  background-color: #1b242c;
  border-color: var(--accent-cyan);
  color: #ffffff;
}

.og-copy-btn.og-copied {
  color: #2ee6a8;
  border-color: #2ee6a8;
}

/* Caution note */
.og-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: #6b5436;
  background-color: rgba(230, 92, 0, 0.05);
  border-left: 3px solid var(--accent-amber);
  border-radius: 0 3px 3px 0;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.og-note-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-amber);
  margin-right: 8px;
}

/* Apply / undo button */
.og-apply-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ffffff;
  background-color: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: 3px;
  padding: 11px 20px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.og-apply-btn:hover {
  background-color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.og-apply-btn.og-apply-done {
  background-color: transparent;
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.og-apply-btn.og-apply-done:hover {
  border-color: var(--accent-amber);
  color: var(--accent-amber);
  background-color: rgba(230, 92, 0, 0.04);
}

/* Disclaimer */
.og-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  border: 1px dashed var(--border-medium);
  border-radius: 4px;
  padding: 14px 16px;
  margin-top: 36px;
}

.og-disclaimer-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--accent-amber);
  border: 1px solid var(--accent-amber);
  border-radius: 2px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .og-hud {
    flex-direction: column;
    gap: 18px;
    padding: 18px;
  }

  .og-hud-right {
    border-left: none;
    border-top: 1px solid var(--border-light);
    padding-left: 0;
    padding-top: 14px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .og-reset-btn {
    margin-top: 0;
  }

  .og-phase-btn {
    min-width: calc(50% - 5px);
  }

  .og-card-head {
    padding: 14px 16px;
    gap: 12px;
  }

  .og-card-body {
    padding: 0 16px 18px 16px;
  }

  .og-cmd-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .og-cmd-row code {
    overflow-x: auto;
  }
}







/* ============================================
   PROMO BANNER (dismissible terminal strip)
   ============================================ */
.promo-banner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 18px;
  padding: 8px 14px;
  border: 1px solid var(--border-medium);
  border-left: 3px solid var(--accent-amber);
  background: var(--bg-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.promo-banner[hidden] {
  display: none;
}

.promo-banner-label {
  color: var(--accent-amber);
  font-weight: 700;
  white-space: nowrap;
}

.promo-banner-link {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  text-decoration: none;
}

.promo-banner-link:hover {
  color: var(--accent-blue);
}

.promo-banner-link .arrow {
  color: var(--accent-blue);
}

.promo-banner-dismiss {
  background: none;
  border: none;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.promo-banner-dismiss:hover {
  color: var(--accent-amber);
}

@media (max-width: 768px) {
  .promo-banner {
    flex-wrap: wrap;
    font-size: 0.68rem;
    gap: 8px;
  }
}

/* ============================================
   RTX SPARK BRANDED HERO BANNER
   Nvidia green: #76b900  /  dark: #0d0d0d
   ============================================ */
:root {
  --nvidia-green: #76b900;
  --nvidia-green-dim: rgba(118, 185, 0, 0.15);
  --nvidia-green-glow: rgba(118, 185, 0, 0.35);
  --spark-dark: #0d0d0d;
  --spark-dark2: #111a00;
}

.spark-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
  min-height: 220px;
  margin-bottom: 28px;
  background: var(--spark-dark);
  border: 1px solid var(--nvidia-green);
  box-shadow: 0 0 32px var(--nvidia-green-glow), inset 0 0 60px rgba(0,0,0,0.6);
}

/* animated dot-grid background */
.spark-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(118,185,0,0.18) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* scanning laser line */
.spark-hero-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--nvidia-green) 50%, transparent 100%);
  opacity: 0.7;
  animation: spark-scan 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes spark-scan {
  0%   { top: 0%;   opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { top: 100%; opacity: 0; }
}

/* left column */
.spark-hero-left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 28px 32px;
  flex: 1;
}

.spark-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--nvidia-green);
  opacity: 0.85;
}

.spark-hero-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1;
}

.spark-rtx {
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  color: var(--nvidia-green);
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px var(--nvidia-green-glow);
}

.spark-name {
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 0.18em;
}

.spark-hero-tagline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.6);
}

.spark-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.spark-chip {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid rgba(118,185,0,0.45);
  color: var(--nvidia-green);
  background: rgba(118,185,0,0.07);
}

/* right column — memory readout box */
.spark-hero-right {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 32px;
  min-width: 200px;
  border-left: 1px solid rgba(118,185,0,0.3);
  background: linear-gradient(135deg, rgba(118,185,0,0.06) 0%, transparent 70%);
}

.spark-mem-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.spark-mem-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
}

.spark-mem-value {
  font-family: var(--font-mono);
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--nvidia-green);
  line-height: 1;
  text-shadow: 0 0 24px var(--nvidia-green-glow);
}

.spark-mem-unit {
  font-size: 1.4rem;
  font-weight: 400;
  margin-left: 2px;
  vertical-align: baseline;
}

.spark-mem-sub {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
}

.spark-mem-bar-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.1);
  margin: 4px 0 2px;
}

.spark-mem-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--nvidia-green);
  box-shadow: 0 0 8px var(--nvidia-green);
  animation: spark-bar-fill 1.8s 0.3s ease-out forwards;
}

@keyframes spark-bar-fill {
  to { width: 80%; }
}

.spark-mem-footnote {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: rgba(118,185,0,0.5);
}

/* angular geometric accent */
.spark-geo-accent {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 48px 48px;
  border-color: transparent transparent var(--nvidia-green) transparent;
  opacity: 0.6;
}

/* responsive */
@media (max-width: 640px) {
  .spark-hero {
    flex-direction: column;
    min-height: auto;
  }
  .spark-hero-right {
    border-left: none;
    border-top: 1px solid rgba(118,185,0,0.3);
    padding: 20px;
  }
  .spark-hero-left {
    padding: 22px 20px 16px;
  }
  .spark-mem-value {
    font-size: 2.8rem;
  }
}

/* ============================================
   HARDWARE PLATFORM — animated icons
   ============================================ */
.plat-anim { gap: 0; }

/* Desktop tower */
.plat-desktop { gap: 10px; }
.plat-desktop .pc-tower {
  width: 26px; height: 40px;
  border: 2px solid var(--accent-blue);
  border-radius: 4px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 4px; padding-top: 6px;
  background: rgba(0, 102, 204, 0.04);
}
.plat-desktop .pc-led {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
  animation: plat-blink 1.4s infinite ease-in-out;
}
.plat-desktop .pc-slot { width: 14px; height: 2px; background: rgba(0, 102, 204, 0.4); border-radius: 1px; }
.plat-desktop .pc-airflow { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.plat-desktop .pc-airflow span {
  width: 2px; background: var(--accent-cyan); border-radius: 1px; opacity: 0.5;
  animation: plat-airflow 1.2s infinite ease-in-out;
}
.plat-desktop .pc-airflow span:nth-child(2) { animation-delay: 0.2s; }
.plat-desktop .pc-airflow span:nth-child(3) { animation-delay: 0.4s; }
@keyframes plat-airflow { 0%, 100% { height: 6px; } 50% { height: 18px; } }

/* Laptop */
.plat-laptop { flex-direction: column; gap: 2px; }
.plat-laptop .lp-screen {
  width: 40px; height: 26px;
  border: 2px solid var(--accent-blue); border-radius: 3px;
  position: relative; overflow: hidden;
  background: rgba(0, 102, 204, 0.05);
}
.plat-laptop .lp-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  animation: plat-scan 1.8s infinite ease-in-out;
}
@keyframes plat-scan { 0% { top: 0; } 100% { top: 100%; } }
.plat-laptop .lp-base { width: 52px; height: 4px; background: var(--accent-blue); border-radius: 0 0 4px 4px; }

/* Apple unified-memory pulse */
.plat-mac .mac-chip {
  width: 34px; height: 34px;
  border: 2px solid var(--accent-cyan); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  color: var(--accent-cyan); position: relative;
}
.plat-mac .mac-ring {
  position: absolute; inset: 0; border-radius: 7px;
  border: 1.5px solid var(--accent-cyan);
  animation: plat-ring 2s infinite ease-out;
}
.plat-mac .mac-ring.r2 { animation-delay: 1s; }
@keyframes plat-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Server rack */
.plat-server { flex-direction: column; gap: 4px; }
.plat-server .srv-unit {
  width: 46px; height: 11px;
  border: 1.5px solid var(--accent-blue); border-radius: 3px;
  display: flex; align-items: center; gap: 5px; padding: 0 5px;
  background: rgba(0, 102, 204, 0.04);
}
.plat-server .srv-led {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-cyan); box-shadow: 0 0 4px var(--accent-cyan);
  animation: plat-blink 1.2s infinite ease-in-out;
}
.plat-server .srv-led.d2 { animation-delay: 0.4s; }
.plat-server .srv-led.d3 { animation-delay: 0.8s; }
.plat-server .srv-bar { flex: 1; height: 2px; background: rgba(0, 102, 204, 0.3); border-radius: 1px; }
@keyframes plat-blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* Speed up platform anims on hover, matching the objective cards */
.objective-card:hover .plat-desktop .pc-airflow span { animation-duration: 0.7s; }
.objective-card:hover .plat-laptop .lp-scan { animation-duration: 1s; }
.objective-card:hover .plat-mac .mac-ring { animation-duration: 1.3s; }
.objective-card:hover .plat-server .srv-led { animation-duration: 0.7s; }

/* ============================================
   CATALOG FILTER BAR (GPU / CPU search)
   ============================================ */
.catalog-filter-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; margin-bottom: 4px;
  background: rgba(248, 249, 250, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  border-radius: 14px;
}
.catalog-search-wrap {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.2s ease;
}
.catalog-search-wrap:focus-within {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 153, 170, 0.1);
}
.catalog-search-icon { font-size: 18px; color: var(--accent-cyan); line-height: 1; }
.catalog-search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-sans); font-size: 14px; color: var(--text-primary);
}
.catalog-search-input::placeholder { color: var(--text-secondary); opacity: 0.7; }
.catalog-search-clear {
  border: none; background: var(--bg-secondary); color: var(--text-secondary);
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.catalog-search-clear:hover { background: var(--accent-cyan); color: #fff; }

.catalog-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.03em;
  padding: 6px 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border-medium);
  background: #fff; color: var(--text-secondary);
  transition: all 0.2s ease;
}
.catalog-chip:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.catalog-chip.active {
  background: var(--accent-cyan); border-color: var(--accent-cyan); color: #fff;
}

.catalog-no-results {
  text-align: center; padding: 24px;
  font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary);
}

/* When the filter is active, drop the staggered row entrance so typing feels instant */
.catalog-container.has-filter .catalog-row { animation: none; }

@media (max-width: 600px) {
  .catalog-filter-bar { padding: 10px; }
  .catalog-search-input { font-size: 13px; }
  .catalog-chip { font-size: 10px; padding: 5px 10px; }
}

/* ============================================
   EMBED MODE (?embed=true) — strips site chrome for iframing
   ============================================ */
body.embed-mode {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh;
}
.embed-mode .status-bar,
.embed-mode .footer-bar,
.embed-mode .back-btn-container,
.embed-mode .promo-banner,
.embed-mode .grid-overlay,
.embed-mode .corner-crosshair {
  display: none !important;
}
.embed-mode .main-container {
  padding-top: 1rem !important;
}
/* "Powered by" backlink — only shown in embed mode */
.embed-credit {
  display: none;
}
.embed-mode .embed-credit {
  display: block;
  text-align: center;
  margin: 18px auto 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}
.embed-mode .embed-credit a {
  color: var(--accent-cyan);
  text-decoration: none;
}
.embed-mode .embed-credit a:hover {
  text-decoration: underline;
}