/* ELYRAON — OPERATION LAUNCHPAD COMPONENT SYSTEM
   Retro-Futurist Engineering × Cosmic Technology × Golden-Age Comic Art
   Brand Palette: --space-0 (#071326), --starlight (#EFB933), --pink (#C63837), --cyan (#EFB933), --violet (#414342)
*/

/* ========================================================
   1. LAUNCHPAD HERO & ECOSYSTEM BADGES
   ======================================================== */
.launchpad-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(239,185,51,0.08);
  border: 1px solid rgba(239,185,51,0.35);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--starlight, #EFB933);
  margin-bottom: 24px;
  box-shadow: 0 0 20px rgba(239,185,51,0.15);
}

.hero-systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 28px 0 36px;
}

.hero-system-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(7,19,38,0.7);
  border: 1px solid rgba(182,194,212,0.14);
  color: var(--ink, #FFFFFF);
  font-size: 12px;
  font-weight: 600;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.hero-system-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(239,185,51,0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(239,185,51,0.15);
}

.hero-system-pill .system-icon {
  font-size: 16px;
  flex: none;
}

.hero-system-pill .system-badge {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(239,185,51,0.15);
  color: var(--cyan, #EFB933);
  margin-left: auto;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ========================================================
   2. INTERACTIVE ECOSYSTEM ARCHITECTURE VISUALIZATION
   ======================================================== */
.ecosystem-section {
  padding: 80px 0 100px;
  position: relative;
}

.ecosystem-card {
  border: 1.5px solid rgba(239,185,51,0.35);
  background: linear-gradient(175deg, rgba(7,19,38,0.95), rgba(7,19,38,0.99));
  border-radius: 16px;
  padding: 44px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.ecosystem-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-candy);
}

.ecosystem-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(182,194,212,0.1);
  padding-bottom: 24px;
}

.ecosystem-title-group h2 {
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.1;
  margin: 8px 0 12px;
  letter-spacing: -0.04em;
}

.ecosystem-title-group p {
  color: var(--muted, #F4F6F9);
  font-size: 15px;
  max-width: 620px;
  margin: 0;
}

.ecosystem-telemetry-status {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(239,185,51,0.25);
  border-radius: 8px;
  padding: 10px 18px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
}

.status-dot-active {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2E9E6B;
  box-shadow: 0 0 10px #2E9E6B;
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.ecosystem-map-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  position: relative;
}

.ecosystem-node {
  background: rgba(7,19,38,0.85);
  border: 1.5px solid rgba(182,194,212,0.16);
  border-radius: 12px;
  padding: 22px 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  color: inherit;
  position: relative;
}

.ecosystem-node:hover,
.ecosystem-node.active,
.ecosystem-node:focus-visible {
  border-color: var(--cyan, #EFB933);
  transform: translateY(-4px);
  background: rgba(14,39,76,0.95);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(239,185,51,0.25);
}

.ecosystem-node.active::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 8px;
  background: var(--cyan, #EFB933);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

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

.node-icon {
  font-size: 24px;
}

.node-pill {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 999px;
  text-transform: uppercase;
}

.pill-nova { background: rgba(182,194,212,0.2); color: #B6C2D4; border: 1px solid rgba(65,67,66,0.4); }
.pill-ordivyr { background: rgba(239,185,51,0.15); color: #EFB933; border: 1px solid rgba(239,185,51,0.35); }
.pill-exchanger { background: rgba(239,185,51,0.2); color: #EFB933; border: 1px solid rgba(239,185,51,0.4); }
.pill-cloud { background: rgba(46,158,107,0.15); color: #2E9E6B; border: 1px solid rgba(46,158,107,0.35); }
.pill-cinvar { background: rgba(198,56,55,0.2); color: #C63837; border: 1px solid rgba(198,56,55,0.4); }

.node-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}

.node-role {
  font-size: 11px;
  color: var(--muted, #F4F6F9);
  line-height: 1.4;
  margin: 0;
}

/* Detail Panel for Selected Node */
.ecosystem-detail-panel {
  background: rgba(7,19,38,0.9);
  border: 1px solid rgba(239,185,51,0.25);
  border-radius: 12px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
}

.detail-specs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-specs h3 {
  font-size: 22px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.detail-specs p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted, #F4F6F9);
  margin: 0;
}

.detail-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.detail-tag {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--cyan, #EFB933);
}

.detail-terminal {
  background: #071326;
  border: 1px solid rgba(239,185,51,0.3);
  border-radius: 8px;
  overflow: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.detail-terminal-head {
  background: #071326;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  color: var(--faint, #B6C2D4);
}

.detail-terminal-body {
  padding: 16px;
  margin: 0;
  white-space: pre-wrap;
  color: #F4F6F9;
  line-height: 1.6;
}

/* ========================================================
   3. CINVAR SHOWCASE COMPONENTS
   ======================================================== */
.cinvar-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(198,56,55,0.12);
  border: 1px solid rgba(198,56,55,0.4);
  color: var(--pink-soft, #C63837);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}

.cinvar-editor-sim {
  background: #071326;
  border: 1.5px solid rgba(198,56,55,0.35);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(198,56,55,0.15);
  margin: 36px 0;
}

.cinvar-sim-toolbar {
  background: #071326;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cinvar-sim-dots {
  display: flex;
  gap: 6px;
}

.cinvar-sim-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.cinvar-sim-prompt-box {
  flex: 1;
  max-width: 600px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(198,56,55,0.3);
  border-radius: 6px;
  padding: 6px 12px;
  gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
}

.cinvar-sim-prompt-box input {
  background: transparent;
  border: 0;
  color: #fff;
  width: 100%;
  outline: none;
  font-family: inherit;
  font-size: 11px;
}

.cinvar-sim-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: 380px;
}

.cinvar-viewport {
  background: #000;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px;
}

.cinvar-preview-canvas {
  width: 100%;
  aspect-ratio: 16/9;
  background: radial-gradient(circle at center, #071326, #071326);
  border: 1px solid rgba(198,56,55,0.3);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.cinvar-preview-graphic {
  text-align: center;
}

.cinvar-kinetic-text {
  font-size: clamp(18px, 2.5vw, 32px);
  font-weight: 900;
  letter-spacing: -0.02em;
  background: var(--grad-candy);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(198,56,55,0.5);
  animation: pulseScale 3s infinite ease-in-out;
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.cinvar-timeline-pane {
  background: #071326;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cinvar-track {
  background: rgba(7,19,38,0.6);
  border: 1px solid rgba(182,194,212,0.12);
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.track-header {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--faint, #B6C2D4);
  text-transform: uppercase;
}

.track-blocks {
  display: flex;
  gap: 4px;
  height: 26px;
}

.track-block {
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.block-video { background: rgba(239,185,51,0.25); border: 1px solid rgba(239,185,51,0.6); color: #fff; }
.block-audio { background: rgba(46,158,107,0.25); border: 1px solid rgba(46,158,107,0.6); color: #fff; }
.block-caption { background: rgba(239,185,51,0.25); border: 1px solid rgba(239,185,51,0.6); color: #fff; }

.cinvar-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cinvar-play-btn {
  background: var(--pink, #C63837);
  color: #414342;
  border: 0;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s ease;
}

.cinvar-play-btn:hover {
  transform: scale(1.05);
}

/* ========================================================
   4. EXCHANGER SHOWCASE COMPONENTS
   ======================================================== */
.exchanger-stepper-box {
  background: #071326;
  border: 1.5px solid rgba(239,185,51,0.35);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
  margin: 36px 0;
}

.stepper-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.stepper-step-btn {
  background: rgba(7,19,38,0.6);
  border: 1px solid rgba(182,194,212,0.14);
  border-radius: 8px;
  padding: 14px 10px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stepper-step-btn:hover,
.stepper-step-btn.active,
.stepper-step-btn:focus-visible {
  border-color: var(--cyan, #EFB933);
  background: rgba(14,39,76,0.85);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(239,185,51,0.2);
}

.step-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan, #EFB933);
  letter-spacing: 0.1em;
}

.step-label {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.stepper-stage-display {
  background: #071326;
  border: 1px solid rgba(239,185,51,0.25);
  border-radius: 12px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
}

.stepper-stage-info h3 {
  font-size: 20px;
  margin: 0 0 12px;
  color: #fff;
}

.stepper-stage-info p {
  color: var(--muted, #F4F6F9);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.stepper-stage-info ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted, #F4F6F9);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ========================================================
   5. CLOUD ROOM PERSISTENT PODS
   ======================================================== */
.cloud-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 36px 0;
}

.cloud-pod-card {
  background: rgba(7,19,38,0.9);
  border: 1.5px solid rgba(46,158,107,0.3);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.cloud-pod-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #2E9E6B, #EFB933);
}

.cloud-pod-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cloud-pod-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.cloud-pod-status {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(46,158,107,0.15);
  color: #2E9E6B;
  border: 1px solid rgba(46,158,107,0.4);
}

.cloud-pod-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px;
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
}

.metric-label {
  color: var(--faint, #B6C2D4);
  font-size: 10px;
}

.metric-val {
  color: #fff;
  font-weight: 700;
}

/* ========================================================
   6. CONVERSION MODAL & INTAKE FORMS
   ======================================================== */
.conversion-panel {
  background: linear-gradient(170deg, rgba(7,19,38,0.95), rgba(7,19,38,0.98));
  border: 1.5px solid rgba(239,185,51,0.35);
  border-radius: 14px;
  padding: 36px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  margin: 40px 0;
}

.conversion-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-input-control {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(182,194,212,0.2);
  border-radius: 8px;
  padding: 12px 16px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-input-control:focus {
  border-color: var(--cyan, #EFB933);
  box-shadow: 0 0 12px rgba(239,185,51,0.25);
}

.form-status-alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  display: none;
}

.form-status-alert.active {
  display: block;
}

.status-success {
  background: rgba(46,158,107,0.15);
  border: 1px solid rgba(46,158,107,0.4);
  color: #2E9E6B;
}

.status-info {
  background: rgba(239,185,51,0.15);
  border: 1px solid rgba(239,185,51,0.4);
  color: var(--cyan-soft, #EFB933);
}

/* ========================================================
   7. RESPONSIVE BREAKPOINTS & ACCESSIBILITY
   ======================================================== */
@media (max-width: 960px) {
  .ecosystem-map-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ecosystem-detail-panel,
  .cinvar-sim-grid,
  .stepper-stage-display {
    grid-template-columns: 1fr;
  }
  .stepper-nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ecosystem-map-grid,
  .stepper-nav,
  .form-group-row {
    grid-template-columns: 1fr;
  }
  .ecosystem-card,
  .exchanger-stepper-box,
  .conversion-panel {
    padding: 24px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot-active,
  .cinvar-kinetic-text,
  .button,
  .ecosystem-node {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active), (prefers-contrast: more) {
  .ecosystem-card,
  .cinvar-editor-sim,
  .exchanger-stepper-box,
  .cloud-pod-card {
    border: 2px solid ButtonText !important;
  }
}

/* ---- Marketplace + quote intake (Revenue Engine) ---- */
.mk-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:0 0 28px;padding:18px;border:1px solid rgba(239,185,51,.25);background:rgba(7,19,38,.7);border-radius:8px}
.mk-field{display:flex;flex-direction:column;gap:6px;font:700 .7rem/1 monospace;letter-spacing:.08em;text-transform:uppercase;color:#EFB933}
.mk-field input,.mk-field select{min-height:44px;padding:0 12px;background:#071326;color:#fff;border:1px solid rgba(182,194,212,.25);border-radius:6px;font:1rem system-ui,sans-serif;text-transform:none;letter-spacing:0}
.mk-search{flex:1 1 260px}.mk-search input{width:100%}
.mk-count{flex-basis:100%;margin:0;font:.8rem monospace;color:var(--muted,#F4F6F9)}
.mk-empty{padding:24px;text-align:center;border:1px dashed rgba(182,194,212,.3);border-radius:8px}
.mk-type{background:rgba(239,185,51,.14)!important;color:#EFB933!important}.mk-mcp,.mk-protocol{background:rgba(182,194,212,.16)!important;color:#F4F6F9!important}.mk-service{background:rgba(239,185,51,.14)!important;color:#EFB933!important}
.mk-avail{background:transparent!important;border:1px dashed rgba(244,246,249,.4)!important;color:var(--muted,#F4F6F9)!important}
.v2-protocol-card[hidden]{display:none!important}
.quote-panel{margin:40px 0;padding:28px;border:1.5px solid rgba(239,185,51,.25);background:rgba(7,19,38,.7);border-radius:8px}
.quote-panel h2{margin:6px 0 10px}
.quote-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.quote-form .full{grid-column:1/-1}
.quote-form label{display:flex;flex-direction:column;gap:6px;font:700 .7rem/1 monospace;letter-spacing:.08em;color:#EFB933}
.quote-form input,.quote-form textarea,.quote-form select{padding:10px 12px;min-height:44px;background:#071326;color:#fff;border:1px solid rgba(182,194,212,.25);border-radius:6px;font:1rem system-ui,sans-serif}
.quote-status{min-height:1.4em;font-size:.92rem}.quote-status.success{color:#2E9E6B}.quote-status.error{color:#C63837}.quote-status a{color:#EFB933}
.disclosure-list{margin:12px 0 0;padding-left:20px;color:var(--muted,#F4F6F9);line-height:1.6;font-size:.92rem}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media (max-width:760px){[style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}.terminal-body{overflow-x:auto}}
.cap-section{margin:56px auto;max-width:1180px;padding:0 20px}
.cap-note{color:var(--muted,#F4F6F9);line-height:1.6;max-width:70ch}
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:20px 0 40px}
.cap-card{padding:20px;border:1px solid rgba(239,185,51,.25);background:rgba(7,19,38,.7);border-radius:8px}
.cap-card h3{margin:10px 0 6px}.cap-card p{margin:0;color:var(--muted,#F4F6F9);font-size:.92rem;line-height:1.5}
.cap-tag{display:inline-block;padding:3px 8px;border-radius:999px;font:700 .65rem/1.2 monospace;letter-spacing:.08em}
.cap-now{background:rgba(46,158,107,.12);color:#2E9E6B;border:1px solid rgba(46,158,107,.4)}
.cap-future-tag{background:transparent;color:#EFB933;border:1px dashed rgba(239,185,51,.6)}
.cap-future{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.cap-future li{padding:12px 14px;border:1px dashed rgba(182,194,212,.3);border-radius:8px;opacity:.85}
.cap-steps{color:var(--muted,#F4F6F9);line-height:1.7;margin:0 0 18px;padding-left:20px}
.ex-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:20px 0}
.principles-title{font-size:1.25rem;margin:8px 0 12px}

/* ---- Prominent Commercial Storefront Showcase ---- */
.commercial-storefront-section{margin:48px auto;max-width:1180px;padding:0 20px}
.storefront-featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin:32px 0}
.storefront-product-card{display:flex;flex-direction:column;justify-content:space-between;padding:24px;border-radius:12px;background:rgba(7,19,38,.85);border:1px solid rgba(239,185,51,.28);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.storefront-product-card:hover{transform:translateY(-3px);border-color:rgba(239,185,51,.5);box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 20px rgba(239,185,51,.15)}
.product-card-top{display:flex;flex-direction:column}
.product-title{margin:12px 0 6px;font-size:1.35rem;font-weight:700;color:var(--ink,#FFFFFF);letter-spacing:-.02em}
.product-subtitle{color:var(--muted,#F4F6F9);font-size:.92rem;line-height:1.5;margin:0 0 16px}
.product-price-box{display:flex;flex-direction:column;padding:12px 14px;background:rgba(239,185,51,.06);border:1px solid rgba(239,185,51,.25);border-radius:8px;margin-bottom:16px}
.price-val{font-family:ui-monospace,"SF Mono",monospace;font-size:1.75rem;font-weight:800;color:var(--starlight,#EFB933)}
.price-unit{font-family:ui-monospace,"SF Mono",monospace;font-size:.75rem;color:var(--muted,#F4F6F9);letter-spacing:.04em}
.product-capability-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;font-size:.88rem;color:var(--ink,#FFFFFF);line-height:1.45}
.product-capability-list li{display:flex;align-items:flex-start;gap:8px}
.product-capability-list .proof-check{color:#2E9E6B;font-style:normal;font-weight:700}
.product-card-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.storefront-trust-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;padding:16px 20px;background:rgba(7,19,38,.7);border:1px solid rgba(182,194,212,.18);border-radius:10px;margin-top:16px}
.trust-pill{font-family:ui-monospace,"SF Mono",monospace;font-size:.82rem;color:var(--muted,#F4F6F9);display:flex;align-items:center;gap:6px}
.trust-pill a{color:#EFB933}
@media (max-width:640px){.storefront-featured-grid{grid-template-columns:1fr}}