/* ===== COMPONENTS — REUSABLE UI BLOCKS ===== *//* === SURFACE GLASS SYSTEM === */.surface-card {  background: var(--surface-card);  border: var(--border-glass-medium);  backdrop-filter: blur(var(--blur));  border-radius: var(--radius-lg);  padding: var(--space-lg);}.surface-panel {  background: var(--surface-panel);  border: var(--border-glass-light);  backdrop-filter: blur(var(--blur-strong));  border-radius: var(--radius-xl);  padding: var(--space-xl);}.surface-overlay {  background: var(--surface-overlay);  border: var(--border-glass-medium);  backdrop-filter: blur(var(--blur-strong));  border-radius: var(--radius-lg);}/* === SVG ICON SYSTEM === */.icon {  width: var(--icon-md);  height: var(--icon-md);  display: inline-block;  vertical-align: -0.125em;  line-height: 0;  color: currentColor;  flex-shrink: 0;  transition: transform var(--motion-fast) var(--ease-spring), color var(--motion-fast) var(--ease-spring);}.icon svg {  width: 100%;  height: 100%;}.icon--xs { width: var(--icon-xs); height: var(--icon-xs); }.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }.icon--md { width: var(--icon-md); height: var(--icon-md); }.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }.icon--2xl { width: var(--icon-2xl); height: var(--icon-2xl); }/* Icon in badges/labels */.badge .icon,.label .icon {  width: var(--icon-sm);  height: var(--icon-sm);  margin-right: 0.35em;  vertical-align: -0.12em;}/* Icon in buttons */button .icon {  width: var(--icon-md);  height: var(--icon-md);  margin-right: 0.5em;}/* Icon in headings — use lg (not huge) */h1 .icon, h2 .icon, h3 .icon, h4 .icon {  width: var(--icon-lg);  height: var(--icon-lg);  margin-right: 0.3em;  vertical-align: -0.12em;}/* === NAVIGATION === */.nav {  display: flex;  justify-content: space-between;  align-items: center;  padding: var(--space-md) var(--wrap-pad-inline);  padding-left: calc(var(--wrap-pad-inline) + env(safe-area-inset-left));  padding-right: calc(var(--wrap-pad-inline) + env(safe-area-inset-right));  border-bottom: 1px solid rgba(124,92,255,0.1);  margin-bottom: var(--space-xl);  position: sticky;  top: calc(env(safe-area-inset-top) + 0px);  z-index: 20;  backdrop-filter: blur(var(--blur));  background: rgba(5,7,13,0.65);  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);  margin-left: calc(-1 * var(--wrap-pad-inline));  margin-right: calc(-1 * var(--wrap-pad-inline));}/* Low-end mode: reduce heavy effects */.low-end .nav {  backdrop-filter: none;}.nav.nav-scrolled {  background: rgba(5,7,13,0.9);  border-color: rgba(124,92,255,0.25);  box-shadow: var(--shadow-md);}.brand {  display: flex;  align-items: center;  gap: 0.5rem;  font-size: var(--text-xl);  font-weight: 700;  color: var(--text);  letter-spacing: 0.05em;}.brand a {  color: var(--text);  text-decoration: none;}.pulse-dot {  width: 8px;  height: 8px;  background: var(--good);  border-radius: 50%;  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;}@keyframes pulse-ring {  0%, 100% { opacity: 1; transform: scale(1); }  50% { opacity: 0.5; transform: scale(1.1); }}.navlinks {  display: flex;  align-items: center;  gap: var(--space-md);}.nav-link {  color: var(--text-muted);  font-size: var(--text-sm);  font-weight: 500;  transition: color var(--transition);}.nav-link:hover {  color: var(--text);}@media (max-width: 768px) {  .navlinks { gap: var(--space-sm); flex-wrap: wrap; }  .nav-link { font-size: var(--text-xs); }}/* === BUTTONS === */.btn {  display: inline-block;  padding: 0.75rem 1.5rem;  font-size: var(--text-base);  font-weight: 600;  text-align: center;  border-radius: var(--radius-md);  cursor: pointer;  transition: all var(--transition);  border: none;  text-decoration: none;  background: rgba(124,92,255,0.1);  color: var(--text);  border: 1px solid rgba(124,92,255,0.3);}.btn:hover {  background: rgba(124,92,255,0.2);  border-color: rgba(124,92,255,0.5);  transform: translateY(-2px);  box-shadow: 0 8px 30px rgba(124,92,255,0.25);}/* Premium focus rings */.btn:focus-visible,a:focus-visible,button:focus-visible,[tabindex]:focus-visible {  outline: 2px solid rgba(34,211,238,0.8);  outline-offset: 3px;  box-shadow: 0 0 0 4px rgba(34,211,238,0.15), 0 0 20px rgba(34,211,238,0.3);  transition: all 0.15s ease;}.btn:focus-visible {  outline-color: rgba(0,255,136,0.9);  box-shadow: 0 0 0 4px rgba(0,255,136,0.12), 0 0 25px rgba(0,255,136,0.35);}.btn:active {  border-color: var(--brand);  transform: translateY(-2px);  box-shadow: var(--shadow-sm);}.btn-primary {  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-glow) 100%);  color: white;  border: none;  box-shadow: var(--shadow-md);}.btn-primary:hover {  box-shadow: var(--shadow-lg);  transform: translateY(-3px);}.btn-secondary {  background: transparent;  border: 1px solid var(--brand-glow);  color: var(--brand-glow);}.btn-secondary:hover {  background: rgba(34,211,238,0.1);  border-color: var(--brand-glow);}.btn-icon {  display: inline-flex;  align-items: center;  justify-content: center;  margin-right: 0.5rem;}.btn-magnetic {  position: relative;  overflow: hidden;}.btn-magnetic::after {  content: "";  position: absolute;  inset: -1px;  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), rgba(124,92,255,0.0) 55%);  opacity: 0;  transition: opacity var(--motion-fast) var(--ease-out-premium), transform var(--motion-fast) var(--ease-out-premium);  pointer-events: none;}.btn-magnetic:hover::after { opacity: 0.35; transform: scale(1.03); }.low-end .btn-magnetic::after { display: none; }.btn-arm {  display: inline-flex;  align-items: center;  gap: 0.5rem;  padding: 0.65rem 1.3rem;  border-radius: var(--radius-full);  border: 1px solid rgba(0,255,136,0.3);  background: linear-gradient(135deg, rgba(0,255,136,0.08), rgba(124,92,255,0.1));  color: var(--good);  position: relative;  overflow: hidden;}.btn-arm .arm-dot {  width: 10px;  height: 10px;  border-radius: 50%;  background: var(--good);  box-shadow: 0 0 0 0 rgba(0,255,136,0.35);  animation: dot-pulse 1.6s var(--ease-spring) infinite;}.low-end .btn-arm .arm-dot { animation: none; }.btn-arm .arm-progress {  position: absolute;  left: 0;  top: 0;  height: 100%;  width: 0%;  background: linear-gradient(90deg, rgba(0,255,136,0.18), rgba(124,92,255,0.15));  opacity: 0.7;  pointer-events: none;  transition: width 0.15s linear;}.btn-arm .phase-progress {  position: absolute;  left: 0;  top: 0;  height: 100%;  width: 0%;  background: linear-gradient(90deg, rgba(0,255,136,0.18), rgba(124,92,255,0.15));  opacity: 0.7;  pointer-events: none;  transition: width 0.15s linear;}.btn-arm .phase-label,.btn-arm .arm-label {  position: relative;  z-index: 1;  font-size: var(--text-sm);  letter-spacing: 0.02em;}.btn-arm .phase-badge {  position: relative;  z-index: 1;  font-size: var(--text-xs);  opacity: 0.8;  margin-right: 4px;}.btn-arm.is-armed,.btn-arm.is-holding {  border-color: rgba(0,255,136,0.6);  box-shadow: 0 0 0 8px rgba(0,255,136,0.12), var(--shadow-md);}/* === PHASE OVERLAY === */.phase-overlay {  position: fixed;  bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));  left: 50%;  transform: translateX(-50%);  max-width: 600px;  padding: var(--space-lg);  background: rgba(15,20,37,0.95);  backdrop-filter: blur(var(--blur));  border: 1px solid rgba(124,92,255,0.3);  border-radius: var(--radius-xl);  box-shadow: var(--shadow-lg);  text-align: center;  pointer-events: none;  z-index: 100;  opacity: 0;  transition: opacity var(--motion-med) var(--ease-out-quint);}.phase-overlay.visible {  opacity: 1;}.phase-overlay.rm-hidden {  display: none !important;}.phase-content .section-label {  margin-bottom: var(--space-xs);}.phase-bullets {  list-style: none;  display: grid;  gap: 6px;  margin: var(--space-sm) 0 0;  color: var(--text-muted);  font-size: var(--text-sm);  text-align: left;}.low-end .phase-overlay {  backdrop-filter: none;}@media (max-width: 768px) {  .phase-overlay {    bottom: var(--space-md);    left: var(--space-md);    right: var(--space-md);    transform: none;    max-width: none;  }}.btn-sm {  padding: 0.5rem 1rem;  font-size: var(--text-sm);}.btn-lg {  padding: 1rem 2rem;  font-size: var(--text-lg);}/* === CARDS === */.card {  background: rgba(15, 20, 37, 0.7);  backdrop-filter: blur(var(--blur));  border: 1px solid rgba(124,92,255,0.2);  border-radius: var(--radius-lg);  padding: var(--space-lg);  transition: all var(--transition);  box-shadow: var(--shadow-sm);}.low-end .card { backdrop-filter: none; box-shadow: var(--shadow-sm); }.card:hover {  border-color: rgba(124,92,255,0.35);  box-shadow: var(--shadow-md);  transform: translateY(-2px);}.card h3, .card h4 {  margin-bottom: var(--space-sm);}.card p {  color: var(--text-muted);  line-height: var(--leading-relaxed);  margin-bottom: 0;}.card,.story-card,.product-card,.principle-card,.use-card,.radar-card,.proof-card,.sample-card,.step-card,.price-card,.preview-terminal,.rule-panel {  background: linear-gradient(140deg, rgba(12,16,28,0.82), rgba(9,12,22,0.78));  border: 1px solid rgba(124,92,255,0.18);  box-shadow: var(--shadow-soft);}/* === BADGES === */.badge {  display: inline-block;  padding: 0.375rem 0.75rem;  font-size: var(--text-xs);  font-weight: 600;  border-radius: var(--radius-full);  background: rgba(124,92,255,0.15);  color: var(--brand-glow);  border: 1px solid rgba(124,92,255,0.3);}.status-badge {  display: inline-flex;  align-items: center;  gap: 0.5rem;  padding: 0.5rem 1rem;  background: rgba(0,255,136,0.1);  border: 1px solid rgba(0,255,136,0.3);  border-radius: var(--radius-full);  font-size: var(--text-sm);  font-weight: 600;  color: var(--good);}.pulse-ring {  width: 8px;  height: 8px;  background: var(--good);  border-radius: 50%;  position: relative;  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;}.low-end .pulse-ring { animation: none; }/* === GRID LAYOUTS === */.grid-2 {  display: grid;  grid-template-columns: repeat(2, 1fr);  gap: var(--space-lg);}.grid-3 {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: var(--space-lg);}.grid-4 {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: var(--space-lg);}@media (max-width: 768px) {  .grid-2, .grid-3, .grid-4 {    grid-template-columns: 1fr;    gap: var(--space-md);  }}/* === SECTIONS === */.section-label {  display: inline-block;  font-size: var(--text-xs);  font-weight: 700;  text-transform: uppercase;  letter-spacing: 0.1em;  color: var(--brand-glow);  margin-bottom: var(--space-sm);}.section-title {  font-size: var(--text-4xl);  font-weight: 700;  margin-bottom: var(--space-lg);  background: linear-gradient(135deg, var(--text) 0%, var(--brand-glow) 100%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-clip: text;}@media (max-width: 768px) {  .section-title { font-size: var(--text-3xl); }}/* === HERO === */.hero { padding: var(--space-2xl) 0; margin: var(--space-xl) 0; }.hero-split {  display: grid;  grid-template-columns: 1.05fr 0.95fr;  align-items: center;  gap: var(--space-xl);}.hero-col { text-align: left; }.hero-title {  font-size: var(--text-5xl);  font-weight: 800;  line-height: var(--leading-tight);  margin-bottom: var(--space-md);  background: linear-gradient(135deg, var(--text) 0%, var(--brand-glow) 100%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-clip: text;}.hero-sub {  font-size: var(--text-xl);  color: var(--text-muted);  line-height: var(--leading-relaxed);  margin-bottom: var(--space-lg);  max-width: 800px;  margin-left: auto;  margin-right: auto;}.hero-ctas {  display: flex;  gap: var(--space-md);  justify-content: flex-start;  margin-bottom: var(--space-md);}.hero-proof {  font-size: var(--text-sm);  color: var(--text-muted);  margin-top: var(--space-md);}@media (max-width: 768px) {  .hero { padding: var(--space-xl) 0; }  .hero-split { grid-template-columns: 1fr; }  .hero-col { text-align: center; }  .hero-title { font-size: var(--text-3xl); }  .hero-sub { font-size: var(--text-base); }  .hero-ctas { flex-direction: column; align-items: center; }}.hero-cinematic {  position: relative;  --lock-flash: 0;  --breath-offset: 0;}.hero-cinematic::before {  content: "";  position: absolute;  inset: 0;  background: radial-gradient(ellipse 60% 40% at 50% 48%, rgba(124,92,255, calc(var(--lock-flash) * 0.25)), transparent);  pointer-events: none;  z-index: 10;  opacity: var(--lock-flash);  mix-blend-mode: screen;  transition: opacity 0.15s ease-out;}.hero-cinematic::after {  content: "NEXUS";  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size: clamp(180px, 25vw, 320px);  font-weight: 900;  font-family: 'Space Grotesk', system-ui, sans-serif;  letter-spacing: 0.15em;  background: linear-gradient(135deg, rgba(34,211,238,0.03) 0%, rgba(124,92,255,0.04) 100%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;  filter: blur(2px);  opacity: 0.4;  z-index: -1;  pointer-events: none;  user-select: none;}.low-end .hero-cinematic::after {   filter: blur(1px);  opacity: 0.25;}.status-inline {  display: flex;  align-items: center;  gap: var(--space-sm);  margin-bottom: var(--space-sm);  flex-wrap: wrap;}.status-chips {  display: inline-flex;  gap: 0.5rem;  flex-wrap: wrap;}.chip {  display: inline-flex;  align-items: center;  gap: 6px;  padding: 0.4rem 0.75rem;  border-radius: var(--radius-full);  background: rgba(124,92,255,0.14);  border: 1px solid rgba(124,92,255,0.25);  font-size: var(--text-xs);  letter-spacing: 0.04em;  color: var(--text);}.chip .icon,.metric-pill .icon,.proof-badge .icon,.preview-instrumentation .icon,.preview-matrix .icon,.rule-pill .icon,.use-card .icon {  width: var(--icon-sm);  height: var(--icon-sm);}.micro-slogans {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));  gap: 0.5rem;  margin-top: var(--space-md);  color: var(--text-muted);  font-size: var(--text-xs);  letter-spacing: 0.02em;}.micro-slogans span {  padding: 0.65rem 0.75rem;  border: var(--border-glass);  border-radius: var(--radius-md);  background: rgba(15,20,37,0.7);}.hero-metrics {  display: flex;  gap: var(--space-sm);  flex-wrap: wrap;  margin-bottom: var(--space-sm);}.metric-pill {  display: inline-flex;  align-items: center;  gap: 8px;  padding: 0.55rem 0.85rem;  border-radius: var(--radius-full);  border: var(--border-glass);  background: rgba(15,20,37,0.7);  color: var(--text);  font-size: var(--text-sm);  letter-spacing: 0.01em;}.metric-pill .icon { color: var(--brand-glow); }.ticker-line {  width: 100%;  padding: 0.5rem 0.75rem;  margin-bottom: var(--space-md);  border: 1px solid rgba(124,92,255,0.2);  border-radius: var(--radius-full);  background: linear-gradient(90deg, rgba(34,211,238,0.08), rgba(124,92,255,0.08));  font-size: var(--text-xs);  letter-spacing: 0.08em;  text-transform: uppercase;  overflow: hidden;}.ticker-line span { display: inline-block; animation: ticker-move 18s linear infinite; white-space: nowrap; }@keyframes ticker-move { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }/* === PHASE RIBBON & SOUND PILL === */.phase-ribbon {  position: fixed;  top: calc(12px + env(safe-area-inset-top));  left: calc(16px + env(safe-area-inset-left));  z-index: 30;  padding: 0.55rem 0.75rem;  border-radius: var(--radius-lg);  border: 1px solid rgba(124,92,255,0.35);  background: rgba(8,10,18,0.75);  backdrop-filter: blur(10px);  box-shadow: 0 10px 40px rgba(0,0,0,0.35);  min-width: 220px;}.phase-ribbon-row {  display: flex;  justify-content: space-between;  align-items: center;  gap: var(--space-sm);  font-size: var(--text-xs);  text-transform: uppercase;  letter-spacing: 0.06em;  color: var(--text-muted);}.phase-ribbon-label { color: var(--text); font-weight: 700; }.phase-ribbon-status { color: var(--brand-glow); font-weight: 600; }.phase-ribbon-progress {  margin-top: 6px;  width: 100%;  height: 4px;  background: rgba(255,255,255,0.06);  border-radius: 999px;  overflow: hidden;}.phase-ribbon-progress span {  display: block;  height: 100%;  background: linear-gradient(90deg, #22d3ee, #7c5cff);  box-shadow: 0 0 12px rgba(124,92,255,0.5);  transform-origin: left center;  transform: scaleX(0);  transition: transform 0.35s ease;}.sound-pill {  position: fixed;  top: calc(12px + env(safe-area-inset-top));  right: calc(16px + env(safe-area-inset-right));  z-index: 30;  display: inline-flex;  align-items: center;  gap: 8px;  padding: 0.55rem 0.9rem;  border-radius: var(--radius-full);  border: 1px solid rgba(34,211,238,0.35);  background: rgba(8,10,18,0.8);  color: var(--text);  cursor: pointer;  transition: all 0.2s ease;}.sound-pill:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(34,211,238,0.18); }.sound-pill.active { border-color: rgba(124,92,255,0.6); box-shadow: 0 0 0 1px rgba(124,92,255,0.25), 0 12px 30px rgba(124,92,255,0.18); }.pill-dot {  width: 10px;  height: 10px;  border-radius: 50%;  background: rgba(255,255,255,0.25);  box-shadow: 0 0 0 4px rgba(34,211,238,0.12);  transition: all 0.25s ease;}.pill-dot.active { background: #22d3ee; box-shadow: 0 0 0 4px rgba(34,211,238,0.25), 0 0 16px rgba(34,211,238,0.35); }@media (max-width: 768px) {  .phase-ribbon { top: 8px; left: 10px; padding: 0.45rem 0.6rem; }  .sound-pill { top: 8px; right: 10px; }}/* === HERO BADGE + CTA GLOW === */.phase-inline-badge {  display: inline-flex;  align-items: center;  gap: 8px;  padding: 0.5rem 0.75rem;  border-radius: var(--radius-full);  border: 1px solid rgba(124,92,255,0.35);  background: rgba(10,14,24,0.85);  font-size: var(--text-xs);  letter-spacing: 0.05em;  text-transform: uppercase;  margin-bottom: var(--space-md);  box-shadow: 0 6px 18px rgba(0,0,0,0.25);}.hero-ctas .btn-primary { animation: cta-pulse 4.5s ease-in-out infinite; }@keyframes cta-pulse {  0%, 100% { box-shadow: 0 10px 30px rgba(124,92,255,0.25); transform: translateY(0); }  50% { box-shadow: 0 14px 40px rgba(34,211,238,0.35); transform: translateY(-2px); }}/* === PHASE WIPE OVERLAY === */.phase-wipe {  position: fixed;  inset: 0;  pointer-events: none;  background: radial-gradient(120% 80% at 30% 40%, rgba(34,211,238,0.25), transparent 60%),              linear-gradient(120deg, rgba(124,92,255,0.25), rgba(34,211,238,0.15));  opacity: 0;  filter: blur(10px);  transition: opacity 0.6s ease;  z-index: 15;}.phase-wipe.active {  opacity: 0.6;  animation: phase-wipe-anim 0.65s ease;}@keyframes phase-wipe-anim {  0% { transform: translateX(-8%); opacity: 0.7; }  50% { transform: translateX(2%); opacity: 0.6; }  100% { transform: translateX(0); opacity: 0; }}/* === DIAGNOSTICS PILL === */.diag-pill {  position: fixed;  right: calc(16px + env(safe-area-inset-right));  bottom: calc(16px + env(safe-area-inset-bottom));  z-index: 30;  min-width: 180px;  padding: 0.65rem 0.8rem;  border-radius: var(--radius-lg);  border: 1px solid rgba(255,255,255,0.08);  background: rgba(8,10,18,0.78);  box-shadow: 0 10px 30px rgba(0,0,0,0.35);  backdrop-filter: blur(10px);  font-size: var(--text-xs);}.diag-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }.diag-row:last-child { margin-bottom: 0; }.diag-label { color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }.diag-value { color: var(--text); font-weight: 700; }.diag-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.25); box-shadow: 0 0 0 4px rgba(255,255,255,0.08); }.diag-dot.good { background: #00e58f; box-shadow: 0 0 0 4px rgba(0,229,143,0.2); }.diag-dot.warn { background: #ffd166; box-shadow: 0 0 0 4px rgba(255,209,102,0.2); }.diag-dot.bad { background: #ff6b6b; box-shadow: 0 0 0 4px rgba(255,107,107,0.2); }@media (max-width: 768px) {  .diag-pill { right: 10px; bottom: 10px; }}/* === GLYPH ORBIT OVERLAY === */.glyph-orbits {  position: fixed;  inset: 0;  pointer-events: none;  z-index: 12;  opacity: 0.65;  display: none; /* default hidden */}.glyph {  position: absolute;  font-size: clamp(16px, 2.4vw, 28px);  color: rgba(255,255,255,0.18);  text-shadow: 0 0 12px rgba(124,92,255,0.25);  filter: blur(0.1px);  animation: orbit 18s linear infinite;}.glyph-a { top: 18%; left: 18%; animation-duration: 22s; }.glyph-b { top: 30%; right: 16%; animation-duration: 20s; }.glyph-c,.glyph-d,.glyph-e { display: none; }@keyframes orbit {  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0.55; }  50% { transform: translate(-48%, -52%) rotate(180deg) scale(1.04); opacity: 0.75; }  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); opacity: 0.55; }}.quality-high.desktop .glyph-orbits { display: block; }@media (max-width: 1024px) {  .quality-high.desktop .glyph-orbits { display: none; }}.low-end .glyph-orbits { display: none; }/* Reduced-motion/static hero: light tweaks */.hero-static .hero-title { letter-spacing: 0.01em; }.hero-static .preview-card { transform: none; box-shadow: var(--shadow-md); }/* === TERMINAL PREVIEW CARD === */.preview-card {  background: radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,0.12) 0%, rgba(124,92,255,0.08) 35%, rgba(15,20,37,0.85) 65%), rgba(15,20,37,0.8);  border: 1px solid rgba(124,92,255,0.25);  border-radius: var(--radius-xl);  box-shadow: var(--shadow-md);  overflow: hidden;  transform: translateY(calc(var(--breath-offset, 0) * 1px));  transition: transform 0.15s ease-out;}.preview-header {  display: flex;  justify-content: space-between;  align-items: center;  padding: var(--space-md);  border-bottom: 1px solid rgba(124,92,255,0.2);}.preview-title { font-weight: 700; letter-spacing: 0.06em; color: var(--text); }.preview-badges { display: flex; gap: var(--space-sm); align-items: center; }.badge-sci { background: rgba(124,92,255,0.15); border: 1px solid rgba(124,92,255,0.35); color: var(--text); padding: 0.3rem 0.6rem; border-radius: var(--radius-full); font-size: var(--text-xs); }.badge-good { background: rgba(0,255,136,0.12); border: 1px solid rgba(0,255,136,0.35); color: var(--good); padding: 0.3rem 0.6rem; border-radius: var(--radius-full); font-size: var(--text-xs); }.preview-instrumentation {  display: grid;  grid-template-columns: repeat(4, auto);  gap: 0.5rem;  padding: 0 var(--space-md) var(--space-sm);  align-items: center;  flex-wrap: wrap;}.preview-instrumentation .pill {  display: inline-flex;  align-items: center;  gap: 6px;  padding: 0.35rem 0.7rem;  border-radius: var(--radius-full);  border: 1px solid rgba(124,92,255,0.25);  background: rgba(124,92,255,0.12);  font-size: var(--text-xs);  color: var(--text);}.preview-instrumentation .pill-ghost {  background: rgba(255,255,255,0.05);  border-color: rgba(255,255,255,0.1);  color: var(--text-muted);}.is-hidden { display: none !important; }.more-count { cursor: pointer; user-select: none; }.status-chips.expanded .chip,.signal-pills.expanded .proof-badge { display: inline-flex; }.preview-instrumentation .dot {  width: 8px;  height: 8px;  border-radius: 50%;  background: var(--good);  box-shadow: 0 0 0 0 rgba(0,255,136,0.4);  animation: dot-pulse 1.8s var(--ease-spring) infinite;}.low-end .preview-instrumentation .dot { animation: none; }@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,255,136,0.35);} 60% { box-shadow: 0 0 0 10px rgba(0,255,136,0);} 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0);} }@media (max-width: 1024px) {  .preview-instrumentation { grid-template-columns: repeat(2, minmax(0, 1fr)); }}@media (max-width: 640px) {  .preview-instrumentation { grid-template-columns: 1fr; }  .preview-signals { grid-template-columns: 1fr; }}.preview-body { display: grid; grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-md); }.preview-sparkline {  height: 90px;  background: linear-gradient(180deg, rgba(34,211,238,0.08), rgba(124,92,255,0.06));  border: 1px solid rgba(124,92,255,0.25);  border-radius: var(--radius-md);  position: relative;}.sparkline-canvas { width: 100%; height: 100%; display: block; }.preview-matrix {  display: grid;  grid-template-columns: repeat(2, minmax(0, 1fr));  gap: 8px;}.preview-matrix div {  display: flex;  align-items: center;  justify-content: space-between;  padding: 0.6rem 0.75rem;  border-radius: var(--radius-md);  border: 1px solid rgba(124,92,255,0.2);  background: rgba(10,14,24,0.8);  font-size: var(--text-xs);  color: var(--text-muted);}.preview-matrix strong { color: var(--text); letter-spacing: 0.01em; }.preview-matrix span { display: inline-flex; align-items: center; gap: 6px; }.preview-signals { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }.signal-card {  background: rgba(15,20,37,0.6);  border: 1px solid rgba(124,92,255,0.25);  border-radius: var(--radius-md);  padding: 0.5rem 0.6rem;  display: flex;  flex-direction: column;  gap: 0.25rem;  transition: transform var(--motion-med) var(--ease-out-quint), box-shadow var(--motion-med) var(--ease-out-quint);}.signal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }.signal-head { display: flex; justify-content: space-between; align-items: center; }.signal-sym { font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.04em; }.signal-time { font-size: var(--text-xs); color: var(--text-muted); }.signal-reason { font-size: var(--text-xs); color: var(--text-muted); opacity: 0.9; }.severity { height: 3px; border-radius: var(--radius-full); background: rgba(124,92,255,0.3); }.severity.good { background: linear-gradient(90deg, rgba(0,255,136,0.5), rgba(124,92,255,0.3)); }.severity.warn { background: linear-gradient(90deg, rgba(255,184,0,0.6), rgba(124,92,255,0.3)); }.severity.danger { background: linear-gradient(90deg, rgba(255,71,87,0.6), rgba(124,92,255,0.3)); }.signal-actions { display:flex; gap:6px; justify-content:flex-end; font-size: var(--text-xs); color: var(--text-muted); }.signal-actions span { padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid rgba(124,92,255,0.25); background: rgba(124,92,255,0.1); }.preview-actions {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));  gap: 0.5rem;}.action-chip {  padding: 0.45rem 0.6rem;  border-radius: var(--radius-md);  background: rgba(0,255,136,0.08);  border: 1px solid rgba(0,255,136,0.25);  color: var(--text);  font-size: var(--text-xs);  letter-spacing: 0.01em;  box-shadow: 0 10px 30px rgba(0,255,136,0.12);}.low-end .action-chip { box-shadow: none; }.preview-footer {  display: flex;  justify-content: space-between;  align-items: center;  padding: var(--space-sm) var(--space-md);  border-top: 1px solid rgba(124,92,255,0.18);  background: rgba(15,20,37,0.6);}.preview-footer-left, .preview-footer-right {  display: grid;  gap: 4px;}.smallcap {  font-size: var(--text-2xs);  letter-spacing: 0.12em;  text-transform: uppercase;  color: var(--text-muted);}.foot-val {  font-weight: 700;  color: var(--text);}.pulse-glow { box-shadow: 0 0 0 0 rgba(34,211,238,0.7); animation: glow-pulse var(--motion-slow) var(--ease-spring) 1; }@keyframes glow-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,0.0);} 30% { box-shadow: 0 0 0 8px rgba(34,211,238,0.2);} 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.0);} }/* Reveal utility */.reveal { opacity: 0; transform: translateY(12px); filter: blur(6px); transition: opacity var(--motion-med) var(--ease-out-quint), transform var(--motion-med) var(--ease-out-quint), filter var(--motion-med) var(--ease-out-quint); }.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }.low-end .reveal { filter: none; }/* === PRODUCTS GRID === */.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }.products-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }.product-card {   background: linear-gradient(135deg, rgba(15, 20, 37, 0.65), rgba(8,12,22,0.7));   backdrop-filter: blur(var(--blur));   border: var(--border-glass-light);   border-radius: var(--radius-xl);   padding: var(--space-xl);   transition: transform var(--motion-med) var(--ease-out-quint), border-color var(--motion-med), box-shadow var(--motion-med);  box-shadow: var(--shadow-sm);   position: relative;   overflow: hidden;  display: flex;  flex-direction: column;  gap: var(--space-md);}.low-end .product-card { backdrop-filter: none; }.product-card::after {   content:"";   position:absolute;   inset:0;   background:linear-gradient(135deg, rgba(34,211,238,0.05), rgba(124,92,255,0.06));   opacity:0;   transition: opacity var(--motion-med) var(--ease-out-quint);   pointer-events:none; }.desktop.quality-high .product-card:hover::after { opacity:0.4; }.product-card.product-live { grid-column: span 2; grid-row: span 2; }.desktop.quality-high .product-card:hover {   border-color: rgba(124,92,255,0.4);   box-shadow: var(--shadow-md), 0 0 48px rgba(124,92,255,0.15);   transform: translateY(-3px); }.product-status {   font-size: var(--text-xs);   font-weight: 600;  letter-spacing: 0.05em;  text-transform: uppercase;  color: rgba(0,255,136,0.8);   display: inline-block;}.product-status.product-status-coming {   color: rgba(124,92,255,0.7); }.product-icon {   width: var(--icon-lg);  height: var(--icon-lg);  color: rgba(124,92,255,0.8);}.product-card h3 {  font-size: var(--text-2xl);  font-weight: 700;  margin: 0;  letter-spacing: -0.01em;  color: var(--text-primary);}.product-card p {  margin: 0;  color: var(--text-muted);  line-height: 1.6;  flex: 1;}.product-metrics {   display:flex;   flex-wrap:wrap;   gap:8px 14px;   font-size: var(--text-sm);   color: var(--text-muted); }.product-metrics strong { color: var(--text); }.product-cta {  margin-top: auto;}@media (max-width: 1024px) {  .products { grid-template-columns: 1fr 1fr; }  .product-card.product-live { grid-column: span 2; grid-row: auto; }}@media (max-width: 640px) {  .products { grid-template-columns: 1fr; }  .product-card.product-live { grid-column: span 1; grid-row: auto; }}/* Proof row badges */.proof-row { display:flex; flex-wrap:wrap; gap: var(--space-sm); margin-top: var(--space-lg); }.proof-badge { display:inline-flex; align-items:center; gap:8px; padding: 0.5rem 0.75rem; border: var(--border-glass); border-radius: var(--radius-full); background: rgba(34,211,238,0.06); color: var(--text); font-size: var(--text-sm); }.proof-dot { width:6px; height:6px; border-radius:50%; background: var(--brand-glow); box-shadow: 0 0 0 4px rgba(34,211,238,0.14); }.low-end .proof-dot { box-shadow: 0 0 0 2px rgba(34,211,238,0.1); }.signal-pills { display:flex; flex-wrap:wrap; gap: var(--space-sm); }.signal-pills .proof-badge:nth-child(n+5) { display: none; }.status-chips .chip:nth-child(n+3) { display: none; }/* Storytelling steps */.story { margin-top: var(--space-2xl); }.story-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }.story-card { background: rgba(15,20,37,0.6); border: var(--border-glass); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-sm); transition: transform var(--motion-med) var(--ease-out-quint), box-shadow var(--motion-med) var(--ease-out-quint); }.story-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }.story-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: .4rem; }.story-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-lg); height: var(--icon-lg); color: var(--text); }.story-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }.story-line { height: 3px; border-radius: var(--radius-full); background: linear-gradient(90deg, rgba(34,211,238,.6), rgba(124,92,255,.4)); margin-top: .5rem; opacity: .8; }@media (max-width: 1024px) { .products { grid-template-columns: 1fr 1fr; } .story-grid { grid-template-columns: 1fr 1fr; } }@media (max-width: 640px) { .products { grid-template-columns: 1fr; } .story-grid { grid-template-columns: 1fr; } }@media (prefers-reduced-motion: reduce) {  .ticker-line span { animation: none; }}/* === EDITORIAL CHAPTERS === */.editorial-chapters {  display: grid;  gap: var(--space-xl);  max-width: 1280px;  margin: 0 auto;}.editorial-chapter {  display: grid;  grid-template-columns: 1.5fr 1fr;  gap: var(--space-lg);  padding: var(--space-xl);  border-radius: var(--radius-xl);  border: var(--border-glass-light);  background: linear-gradient(135deg, rgba(15,20,37,0.6), rgba(8,12,22,0.65));  box-shadow: var(--shadow-sm);  transition: transform var(--motion-med) var(--ease-out-quint), border-color var(--motion-med), box-shadow var(--motion-med);}.editorial-chapter:hover {  transform: translateY(-4px);  border-color: rgba(124,92,255,0.35);  box-shadow: var(--shadow-md);}.low-end .editorial-chapter:hover { transform: none; }.chapter-content {  display: flex;  flex-direction: column;  gap: var(--space-sm);}.chapter-number {  font-size: var(--text-xs);  font-weight: 700;  letter-spacing: 0.08em;  color: rgba(124,92,255,0.8);  text-transform: uppercase;}.chapter-content h3 {  font-size: var(--text-2xl);  font-weight: 700;  margin: 0;  letter-spacing: -0.01em;  color: var(--text-primary);}.chapter-content p {  margin: 0;  color: var(--text-muted);  line-height: 1.6;}.chapter-proof {  display: flex;  flex-direction: column;  gap: var(--space-xs);  padding: var(--space-md);  border-radius: var(--radius-md);  background: rgba(0,0,0,0.5);  border: 1px solid rgba(124,92,255,0.25);  box-shadow: inset 0 0 0 1px rgba(0,255,136,0.06);}.proof-label {  font-size: var(--text-xs);  font-weight: 600;  letter-spacing: 0.05em;  color: rgba(34,211,238,0.7);  text-transform: uppercase;}.proof-snippet {  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;  font-size: var(--text-sm);  color: #d9e2ff;  line-height: 1.5;  background: none;  padding: 0;  border: none;  word-break: break-all;}.proof-meta {  font-size: var(--text-xs);  color: rgba(124,92,255,0.6);  font-weight: 500;}@media (max-width: 960px) {  .editorial-chapter {    grid-template-columns: 1fr;    gap: var(--space-md);  }  .chapter-proof {    order: -1;  }}/* === OLD CHAPTERS (LEGACY - KEEP FOR NOW) === */.chapters {  display: grid;  grid-template-columns: minmax(280px, 360px) 1fr;  gap: var(--space-xl);  align-items: start;}@media (max-width: 960px) {  .chapters { grid-template-columns: 1fr; }  .chapters-left { position: static; }}.chapters-left {  position: sticky;  top: 96px;}.chapters-right {  display: grid;  gap: var(--space-md);}.chapter-card {  border: var(--border-glass);  border-radius: var(--radius-xl);  background: linear-gradient(135deg, rgba(15,20,37,0.75), rgba(10,14,26,0.7));  padding: var(--space-lg);  box-shadow: var(--shadow-md);  transition: transform var(--motion-med) var(--ease-out-quint), border-color var(--motion-med), box-shadow var(--motion-med);}.chapter-card.active {  transform: translateY(-6px);  border-color: rgba(124,92,255,0.4);  box-shadow: var(--shadow-glow);}.low-end .chapter-card.active { box-shadow: var(--shadow-md); }.chapter-head {  display: flex;  gap: var(--space-md);  align-items: center;  margin-bottom: var(--space-sm);}.chapter-badge {  width: 42px;  height: 42px;  border-radius: 12px;  border: 1px solid rgba(124,92,255,0.4);  background: rgba(124,92,255,0.15);  display: grid;  place-items: center;  font-weight: 800;  letter-spacing: 0.05em;}.chapter-bullets {  list-style: none;  display: grid;  gap: 6px;  margin: var(--space-sm) 0 var(--space-md);  color: var(--text-muted);  font-size: var(--text-sm);}.chapter-terminal {  background: rgba(0,0,0,0.55);  border: 1px solid rgba(124,92,255,0.3);  border-radius: var(--radius-md);  padding: 0.85rem;  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;  font-size: var(--text-sm);  color: #d9e2ff;  min-height: 64px;  line-height: 1.5;  box-shadow: inset 0 0 0 1px rgba(0,255,136,0.07);}.chapter-meter {  width: 100%;  height: 6px;  background: rgba(255,255,255,0.08);  border-radius: var(--radius-full);  overflow: hidden;  margin-top: var(--space-md);}.chapter-meter span {  display: block;  height: 100%;  width: 8%;  background: linear-gradient(90deg, var(--brand), var(--brand-glow));  transition: width var(--motion-med) var(--ease-out-quint);}/* === TRUST METRICS === */.trust-grid { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-md); }.metric-card { background: rgba(15,20,37,0.65); border: var(--border-glass); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-sm); }.metric-label { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }.metric-value { font-size: var(--text-3xl); font-weight: 700; color: var(--text); margin-bottom: 4px; }.metric-sub { font-size: var(--text-sm); color: var(--text-muted); }@media (max-width: 1024px) { .trust-grid { grid-template-columns: repeat(2,1fr); } }@media (max-width: 640px) { .trust-grid { grid-template-columns: 1fr; } }/* === SURFACE CONSISTENCY === */.card,.story-card,.product-card,.radar-card,.use-card,.proof-card,.sample-card,.step-card,.price-card,.preview-terminal,.rule-panel,.principle-card,.metric-card,.chapter-card,.dev-panel,.trust-grid .metric-card {  background: linear-gradient(140deg, rgba(12,16,28,0.82), rgba(9,12,22,0.78));  border: 1px solid rgba(124,92,255,0.18);  box-shadow: var(--shadow-soft);}/* === DEV PANEL === */.dev-panel { border-radius: var(--radius-lg); overflow: hidden; }.dev-header { display:flex; justify-content: space-between; align-items:center; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(124,92,255,0.2); font-size: var(--text-sm); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }.btn-ghost { background: transparent; border: 1px solid rgba(124,92,255,0.35); color: var(--text); padding: 0.35rem 0.75rem; font-size: var(--text-sm); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); }.btn-ghost:hover { border-color: var(--brand-glow); box-shadow: var(--shadow-sm); }.code { background: rgba(5,7,13,0.9); padding: 1rem; font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; color: #d9e2ff; font-size: var(--text-sm); line-height: 1.6; overflow-x: auto; }/* === FOOTER === */.footer {  margin-top: var(--space-2xl);  padding: var(--space-xl) 0 var(--space-md);  border-top: 1px solid rgba(124,92,255,0.1);  display: flex;  flex-direction: column;  gap: var(--space-md);  align-items: center;  text-align: center;}.footer-brand {  font-size: var(--text-sm);  font-weight: 700;  color: var(--text-muted);}.footer-links {  display: flex;  gap: var(--space-md);  font-size: var(--text-sm);}.footer-tag {  font-size: var(--text-xs);  color: var(--text-muted);  opacity: 0.7;}@media (max-width: 768px) {  .footer-links { flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }}/* === FORMS === */input[type="text"],input[type="email"],textarea {  width: 100%;  padding: 0.75rem 1rem;  background: rgba(15, 20, 37, 0.6);  border: 1px solid rgba(124,92,255,0.3);  border-radius: var(--radius-md);  color: var(--text);  font-size: var(--text-base);  font-family: inherit;  transition: all var(--transition);}input[type="text"]:focus,input[type="email"]:focus,textarea:focus {  outline: none;  border-color: var(--brand);  box-shadow: 0 0 0 3px rgba(124,92,255,0.2);}input::placeholder,textarea::placeholder {  color: var(--text-muted);  opacity: 0.6;}label {  display: block;  font-size: var(--text-sm);  font-weight: 600;  color: var(--text);  margin-bottom: 0.5rem;}/* === CODE === */code, pre {  font-family: 'Courier New', Courier, monospace;  background: rgba(0,0,0,0.3);  border: 1px solid rgba(124,92,255,0.2);  border-radius: var(--radius-sm);  font-size: var(--text-sm);}code {  padding: 0.2rem 0.4rem;}pre {  padding: var(--space-md);  overflow-x: auto;}pre code {  background: none;  border: none;  padding: 0;}
/* === BRAND LOGO === */
.brand-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: transform var(--transition);
}
.brand:hover .brand-logo {
  transform: scale(1.05);
}

/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 768px) {
  .phase-ribbon {
    min-width: 160px;
    font-size: var(--text-2xs);
    padding: 0.4rem 0.55rem;
  }
  .phase-ribbon-row {
    font-size: var(--text-2xs);
    gap: 6px;
  }
  .sound-pill {
    padding: 0.45rem 0.75rem;
    font-size: var(--text-xs);
    gap: 6px;
  }
  .diag-pill {
    min-width: 140px;
    padding: 0.5rem 0.65rem;
    font-size: var(--text-2xs);
  }
  /* Ensure nav doesn't overlap with overlays */
  .nav {
    margin-bottom: var(--space-md);
  }
  .brand {
    font-size: var(--text-base);
  }
  .brand-logo {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  /* Stack overlays vertically on small screens */
  .phase-ribbon,
  .sound-pill {
    position: fixed;
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .phase-ribbon {
    bottom: calc(60px + env(safe-area-inset-bottom));
    min-width: 200px;
  }
  .sound-pill {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .diag-pill {
    display: none; /* Hide diagnostics on very small screens */
  }
}

/* HUD dock overrides */
.sound-pill { left: calc(16px + env(safe-area-inset-left)); right: auto; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 24; }
@media (max-width: 768px) { .sound-pill { left: 12px; bottom: 12px; right: auto; top: auto; } }
.diag-pill { left: calc(16px + env(safe-area-inset-left)); right: auto; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 24; }
@media (max-width: 768px) { .diag-pill { left: 10px; right: auto; bottom: 64px; } }


/* === AI COMMAND PALETTE === */
.command-palette {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.command-palette[aria-hidden="false"] {
  display: flex;
}

.command-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
}

.command-palette-modal {
  position: relative;
  width: 90%;
  max-width: 640px;
  max-height: 70vh;
  background: linear-gradient(135deg, rgba(15,20,37,0.95), rgba(8,12,22,0.92));
  border: 1px solid rgba(124,92,255,0.35);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(34,211,238,0.15);
  overflow: hidden;
  animation: palette-enter 0.2s var(--ease-out-quint);
}

@keyframes palette-enter {
  from { opacity: 0; transform: scale(0.96) translateY(-20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.command-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid rgba(124,92,255,0.2);
}

.command-icon {
  color: rgba(34,211,238,0.7);
  flex-shrink: 0;
}

.command-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: var(--text-lg);
  outline: none;
  font-family: inherit;
}

.command-input::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
}

.command-shortcut {
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: inherit;
}

.command-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 1.5rem;
}

.command-placeholder,
.command-loading,
.command-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
}

.command-placeholder svg,
.command-loading svg,
.command-error svg {
  color: rgba(124,92,255,0.5);
}

.command-placeholder p {
  font-size: var(--text-base);
  margin: 0;
}

.command-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.command-examples span {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(124,92,255,0.12);
  border: 1px solid rgba(124,92,255,0.25);
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
}

.command-examples span:hover {
  background: rgba(124,92,255,0.2);
  border-color: rgba(124,92,255,0.4);
  transform: translateY(-1px);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(124,92,255,0.2);
  border-top-color: rgba(34,211,238,0.8);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.command-response {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.response-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(124,92,255,0.15);
}

.response-header svg {
  color: rgba(34,211,238,0.7);
}

.response-header span {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.tools-badge {
  margin-left: auto;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  background: rgba(0,255,136,0.12);
  border: 1px solid rgba(0,255,136,0.25);
  font-size: var(--text-xs);
  color: var(--good);
}

.response-body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}

.response-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(124,92,255,0.1);
}

.tools-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tool-chip {
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-full);
  background: rgba(124,92,255,0.12);
  border: 1px solid rgba(124,92,255,0.25);
  font-size: var(--text-xs);
  color: var(--text);
}

.command-error svg {
  color: rgba(255,71,87,0.7);
}

.command-error p {
  color: rgba(255,71,87,0.9);
}

@media (max-width: 768px) {
  .command-palette {
    padding-top: 10vh;
  }
  .command-palette-modal {
    width: 95%;
    max-height: 80vh;
  }
  .command-input-wrapper {
    padding: 1rem;
  }
  .command-input {
    font-size: var(--text-base);
  }
}

/* === ACTION BUTTONS === */
.response-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(124,92,255,0.1);
}

.action-btn {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(124,92,255,0.2), rgba(34,211,238,0.15));
  border: 1px solid rgba(124,92,255,0.4);
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.action-btn:hover {
  background: linear-gradient(135deg, rgba(124,92,255,0.3), rgba(34,211,238,0.25));
  border-color: rgba(34,211,238,0.6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124,92,255,0.3);
}

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

.remediation-chip {
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-full);
  background: rgba(0,255,136,0.12);
  border: 1px solid rgba(0,255,136,0.3);
  font-size: var(--text-xs);
  color: var(--good);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.remediation-chip:hover {
  background: rgba(0,255,136,0.2);
  border-color: rgba(0,255,136,0.5);
  transform: translateY(-1px);
}