/* ===================================================================
   Abqeri Alef v1 – Global Styles
   =================================================================== */
/* Hero image gently phase-shifts via qphi */
.page-home .hero-img{
  filter: hue-rotate(calc(var(--qphi) * 14deg));
  transition: filter 350ms ease;
}

:root {
  /* Dark theme (default) */
  --bg-primary: #050509;
  --bg-secondary: #101018;
  --bg-tertiary: #181824;

  --brand-gold: #f5d472;
  --brand-gold-soft: #e1c160;
  --brand-gold-dark: #986b1c;

  --bg: var(--bg-primary);
  --bg-elevated: var(--bg-secondary);
  --gold: var(--brand-gold);
  --gold-soft: var(--brand-gold-soft);
  --gold-border: var(--brand-gold-dark);
  --text: #f7e7b0;
  --text-muted: #c7aa6b;
  --danger: #ff4c4c;

  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
}

/* Light theme overrides */
:root[data-theme="light"] {
  --bg-primary: #f8f4ea;
  --bg-secondary: #fffaf1;
  --bg-tertiary: #efe2c8;

  --brand-gold: #b8861b;
  --brand-gold-soft: #d4a847;
  --brand-gold-dark: #725118;

  --bg: var(--bg-primary);
  --bg-elevated: var(--bg-secondary);
  --text: #2b2415;
  --text-muted: #5a4b2c;
}


/* Light theme (default via shell.js) */
:root[data-theme="light"]{
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8fc;
  --bg-tertiary: #eef2f7;

  /* keep gold as accent, but make default ink + links blue */
  --brand-gold: #c79a2b;
  --brand-gold-soft: #b88922;
  --brand-gold-dark: #e2e8f0;

  --bg: var(--bg-primary);
  --bg-elevated: var(--bg-secondary);

  --gold: #0b1a33;        /* main ink color */
  --gold-soft: #0f6cbd;   /* link / hover */
  --gold-border: #d0d7e2;

  --text: #0b1a33;
  --text-muted: #4b5563;
}

/* Light defaults: links + surfaces */
:root[data-theme="light"] body{ background: var(--bg); color: var(--text); }
:root[data-theme="light"] a{ color: #0f6cbd; }
:root[data-theme="light"] a:hover{ color: #0b5aa3; }

/* Light header/footer surfaces */
:root[data-theme="light"] header{ background: #ffffff; }
:root[data-theme="light"] .site-header{ background: #ffffff; border-bottom-color: #e5e7eb; }
:root[data-theme="light"] .site-footer{ background: #ffffff; border-top-color: #e5e7eb; }

/* Fix oversized logos in injected partials */
.site-header .nav-brand{ display:inline-flex; align-items:center; gap:10px; }
.site-header .nav-logo{ height: 32px; width: auto; display:block; }
.site-footer .footer-brandlink{ display:inline-flex; align-items:center; gap:10px; }
.site-footer .footer-logo{ height: 28px; width: auto; display:block; }

/* Buttons in light theme: keep gold as accent but readable */
:root[data-theme="light"] .button-primary{
  background: var(--brand-gold);
  border-color: #b88922;
  color: #ffffff;
}
:root[data-theme="light"] .button-primary:hover{
  background: #b88922;
  border-color: #a77918;
}

/* -------------------------------
   Reset / Base
---------------------------------- */

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

html, body {
  height: 100%;
}

body {
  font-family: Verdana, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
  text-decoration: underline;
  color: var(--brand-gold);
  opacity: 1;
}

em,
.italic {
  font-style: italic;
}

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

/* -------------------------------
   Layout Shell
---------------------------------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -------------------------------
   Header / Brand / Nav
---------------------------------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  border-bottom: 1px solid var(--gold-border);
  background: var(--bg-primary);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

.brand-title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: var(--gold);
  font-style: italic;
}

nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 12px;
  font-style: italic;
}

.nav-item {
  position: relative;
  padding-bottom: 2px;
}

.nav-item a {
  color: var(--gold);
}

.nav-item a:hover {
  color: var(--gold-soft);
}

.nav-item.active a {
  font-weight: 600;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--gold-border);
  border-radius: var(--radius-sm);
}

/* -------------------------------
   Main Content Shell
---------------------------------- */

main {
  flex: 1;
  padding: 24px 40px 10px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-title {
  font-size: 18px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 4px;
}

/* Subtabs */

.subtabs {
  font-size: 12px;
  display: flex;
  gap: 24px;
  font-style: italic;
  margin-bottom: 10px;
}

.subtab {
  position: relative;
  padding-bottom: 4px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.subtab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold-border);
  border-radius: var(--radius-sm);
}

.subtab:hover {
  color: var(--gold-soft);
  opacity: 1;
}

/* Tab panels */

.tab-panels {
  display: block;
}

.tab-panel {
  margin-top: 4px;
}

/* -------------------------------
   Global Inputs / Selects / Buttons / Textareas
---------------------------------- */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
button {
  height: 28px;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  color: var(--text);
  padding: 4px 6px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input[type="text"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
  border-color: var(--gold-soft);
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
}

/* Primary button */

.button-primary {
  border: 1px solid var(--gold-border);
  background: var(--brand-gold);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button-primary:hover {
  background: var(--brand-gold-soft);
  border-color: var(--gold);
  color: #ffffff;
}

.button-primary:active {
  background: var(--brand-gold-border);
  color: #ffffff;
}

/* -------------------------------
   Unified Computing – Workbench Layout
---------------------------------- */

.workbench-shell {
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  background: var(--bg-elevated);
}

.workbench-main {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* Left side: tabs + code editors + plan/env/notes */

.code-tabs-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Code pane – no outer border, only textarea bg */

.code-pane {
  flex: 1;
  background: transparent;
  border-radius: var(--radius-md);
  padding: 0;
}

/* Code editor textareas (no border) */

.code-editor {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  overflow: hidden;
  font-family: "Courier New", Consolas, Menlo, monospace;
  font-size: 12px;
  background: var(--bg-primary);
  color: var(--gold);
  border-radius: var(--radius-md);
  border: none;
  padding: 8px 10px;
}

/* Right side: compact Hybrid Engine block */

.engine-shell {
  flex: 0 0 260px;
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  padding: 8px 9px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.engine-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}

.engine-field-run {
  margin-top: 4px;
}

.engine-field input,
.engine-field select,
.engine-field button {
  font-size: 12px;
  min-width: 0;
}

.engine-legend-title {
  margin-top: 4px;
}

.engine-shell .mini-legend {
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
}

/* Info icons */

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  font-size: 10px;
  cursor: help;
  opacity: 0.75;
  line-height: 1;
}

.info-icon:hover {
  opacity: 1;
}

/* Results pane */

.results-shell {
  margin-top: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: var(--bg-elevated);
  padding: 10px 14px 12px;
}

.results-title {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 6px;
}

.results-body {
  min-height: 40px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Plan / Env / Notes textareas */

.plan-notes,
.env-notes,
.notes-notes {
  margin-top: 6px;
  width: 100%;
  min-height: 80px;
  resize: vertical;
}

/* -------------------------------
   Performance panel
---------------------------------- */

.perf-pane {
  border-radius: var(--radius-md);
  border: 1px solid var(--gold-border);
  padding: 12px 14px;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perf-title {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 4px;
}

.perf-metric {
  margin-top: 4px;
}

.perf-label {
  font-size: 11px;
  color: var(--gold);
  margin-bottom: 3px;
}

.perf-label .perf-value {
  font-weight: 600;
}

.perf-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  overflow: hidden;
}

.perf-bar-fill {
  height: 100%;
  width: 70%;
  background: linear-gradient(to right, #2ecc71, #f1c40f, #e67e22, #e74c3c);
}

/* -------------------------------
   Footer
---------------------------------- */

footer {
  border-top: 1px solid var(--gold-border);
  padding: 10px 10px 18px;
  text-align: center;
  font-size: 10px;
  color: var(--gold);
  font-style: italic;
  line-height: 1.4;
}

/* -------------------------------
   Basic Responsive Tweak
---------------------------------- */

@media (max-width: 900px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  nav {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  main {
    padding: 18px 16px 10px 16px;
  }

  .workbench-main {
    flex-direction: column;
  }

  .engine-shell {
    flex: 1;
  }

  .chat-shell {
    padding: 16px 14px;
  }
}

/* Safe Mind AI layout */
.safe-workbench-shell {
  margin-top: 14px;
}

.safe-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.safe-column {
  min-width: 0;
}

.safe-history {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  border-radius: var(--radius-md);
  border: 1px solid var(--glow-ambient);
  background: var(--bg-primary);
  color: var(--gold);
  padding: 8px 10px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  box-sizing: border-box;
}

/* prompt row */
.safe-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .safe-input-row {
    align-items: flex-start;
  }
  
}

.safe-prompt {
  width: 100%;
  min-height: 32px;
  resize: vertical;
  overflow-y: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 199, 105, 0.4);
  background: var(--bg-primary);
  color: var(--gold);
  padding: 8px 10px;
  font-size: 14px;
  box-sizing: border-box;
}

.safe-prompt::placeholder {
  color: var(--text-muted);
}

/* focus glow */
.safe-prompt:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(242, 199, 105, 0.6), 0 0 12px rgba(242, 199, 105, 0.25);
}

/* mic + attach */
.safe-mic {
  font-size: 12px;
}

/* actions row */
.safe-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.safe-actions-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.safe-actions-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.safe-status {
  font-size: 12px;
  color: var(--text-muted);
}

/* file list */
.safe-file-list {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  max-height: 120px;
  overflow: auto;
  white-space: normal;
}

/* mini note & card shrink */
.safe-main-card .safe-mini-note,
.safe-main-card .safe-status {
  font-size: 12px;
}

/* pulse animation */
@keyframes safeHistoryPulse {
  0% { box-shadow: 0 0 0 0 rgba(242, 199, 105, 0.0); }
  40% { box-shadow: 0 0 0 1px rgba(242, 199, 105, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(242, 199, 105, 0.0); }
}

.safe-history-pulse {
  animation: safeHistoryPulse 0.26s ease-out;
}

/* Make attach chip (📎) visually match secondary buttons */

.safe-file-label span {
  line-height: 1;
}

/* File input stays invisible but clickable across the label */

.button-secondary {
border: 1px solid var(--gold-border);
  background: var(--brand-gold);
  color: var(--bg-tertiary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Safe Mind AI attach: use standard button visuals via button-secondary */
.safe-file-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.safe-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.safe-input-side-horiz {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* ===================================================
   Safe Mind AI – mic + attach button styling
   =================================================== */

.safe-file-label,
.safe-mic {
  background-color: var(--bg-primary);
  color: var(--gold);
  border-color: transparent;
}

.safe-file-label span {
  font-size: 14px;
}

/* ===================================================
   Insights page – smaller fonts & tighter logs
   =================================================== */

.insights-shell {
  margin-top: 16px;
  font-size: 0.85rem;
  line-height: 1.25rem;
}

.insights-summary {
  font-size: 0.85rem;
  line-height: 1.25rem;
  margin-bottom: 8px;
}

.insights-log {
  font-size: 0.80rem;
  line-height: 1.20rem;
}

.insights-log-line {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(242, 199, 105, 0.18);
}

/* Engine status pill under Hybrid Engine & Algorithm */
.engine-status-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.engine-status-label {
  opacity: 0.86;
}
.engine-status-pill {
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.80rem;
  border: 1px solid rgba(242, 199, 105, 0.55);
  background: rgba(0, 0, 0, 0.65);
  color: var(--gold);
}
.engine-status-pill-hw {
  background: rgba(46, 204, 113, 0.18);
  color: #2ecc71;
}
.engine-status-pill-em {
  background: var(--shadow-weak);
  color: #f39c12;
}
.engine-status-pill-off {
  background: rgba(192, 57, 43, 0.18);
  color: #e74c3c;
}

/* Hybrid results <pre> styling to preserve multi-line layout */
.results-pre {
  white-space: pre-wrap;
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-size: 0.9rem;
  line-height: 1.4;
}

.hidden { display: none !important; }

.safe-toggle-hint {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-left: 0.35rem;
}

.music-heart-wave-container {
  margin-top: 0.75rem;
  padding: 0.5rem 0;
}

#musicHeartWave {
  width: 100%;
  max-width: 420px;
  height: 80px;
  display: block;
  border-radius: var(--radius-sm);
  background: #050509;
}

.music-heart-view-toggle {
  margin-top: 0.25rem;
}

.music-heart-wave-note {
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 0.35rem;
  max-width: 420px;
}

.music-heart-layers {
  margin-top: 0.5rem;
  max-width: 420px;
}

.music-heart-layer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.music-heart-layer-label {
  flex: 0 0 70px;
  font-size: 0.8rem;
  opacity: 0.85;
}

.music-heart-layer-bar {
  flex: 1;
  height: 0.6rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #f5c95a, var(--surface-elevated));
}

.music-heart-mini {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(5, 5, 9, 0.9);
  border: 1px solid rgba(245, 201, 90, 0.35);
}

.music-heart-mini-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.music-heart-mini-summary {
  font-size: 0.78rem;
  margin-top: 0.25rem;
  opacity: 0.85;
}

.music-heart-mini-note {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.25rem;
}

.music-heart-share {
  margin-top: 0.75rem;
  padding-top: 0.25rem;
}

.music-heart-share-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.music-heart-share-note {
  font-size: 0.75rem;
  opacity: 0.75;
  margin-top: 0.3rem;
  max-width: 420px;
}

.music-heart-library-tabs {
  margin-top: 0.75rem;
}

.music-heart-library-panel {
  margin-top: 0.35rem;
}

.music-heart-library-saved {
  margin-top: 0.75rem;
}

.music-heart-saved-list {
  margin-top: 0.35rem;
}

.music-heart-saved-ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.music-heart-saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.music-heart-saved-label {
  font-size: 0.8rem;
  opacity: 0.9;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-heart-saved-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.music-heart-saved-icon {
  margin-right: 0.25rem;
}

/* Align Music Heart AI control labels: label text left, inputs aligned after fixed column */
.music-heart-label {
  display: inline-block;
  min-width: 240px;
  text-align: left;
  margin-right: 0.75rem;
}

/* Ledger grid stacked vertically */
.ledger-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

/* Transparent ledger data tables with fixed column layout */
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th,
.data-table td {
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledger-scale { font-size:70%; }

/* Plan badge pill in header */
.nav-plan-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  border: 1px solid rgba(242, 199, 105, 0.5);
  font-size: 11px;
  margin-bottom: 12px;
  margin-left: 8px;
  white-space: nowrap;
}

.nav-plan-pill.is-free {
  opacity: 0.75;
}

.nav-plan-pill.is-paid {
  opacity: 1;
  font-weight: 500;
}

/* ==================================================
   HOMEPAGE – Abqeri Alef v1.0
   (Hero, sections, module grid, CTA)
   ================================================== */

/* Generic section shell used by homepage blocks */
.section {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: var(--bg-elevated);
}

/* Hero block at top of homepage */
.hero {
  margin-top: 2px;
  padding: 6px 20px;
  border-radius: var(--radius-lg);
  border: 0px solid var(--gold-border);
  background: radial-gradient(circle at top left, var(--bg-tertiary) 0%, var(--bg-primary) 55%, var(--bg-primary) 100%);
  display: flex;
  gap: 2px;
  align-items: flex-start;
  flex-direction: column; 
}

.hero-content h2 {
  font-size: 16px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
}

.hero-content h3 {
  font-size: 14px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
}

.hero-content {
  flex: 1.4;
}

.hero-content p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  max-width: 100%;
}

.hero-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* content */
.content {
  margin-top: 4px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: radial-gradient(circle at top left, var(--bg-tertiary) 0%, var(--bg-primary) 55%, var(--bg-primary) 100%);
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  position: relative;
}

.content-h2 h2 {
  font-size: 16px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
  position: absolute;
}

.content-h3 h3 {
  font-size: 14px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
  position: absolute;
}

.content-h4 h4 {
  font-size: 12px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
  position: absolute;
}

.content-content {
  flex: 1.4;
}

.content-div,
.content-dev {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 2px;
  flex-wrap: wrap;
  gap: 10px;
}

.content-p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  max-width: 640px;
  z-index: 1;
}

.content-div:first-of-type {
    z-index: 1;
}

.content-dev {
    z-index: 2;
}

.content-div:last-of-type {
    z-index: 3;
}

.content-actions {
  margin-top: 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  z-index: 2;
}

/* Map homepage buttons to existing button styling */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0px 0px 0px;
  padding: 12px;
  height: 20px;
  width: 250px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* Primary = same as .button-primary but slightly wider */
.btn-primary {
  background: var(--brand-gold);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--brand-gold-soft);
  border-color: var(--gold);
  color: #ffffff;
}

/* Secondary / ghost */
.btn-secondary,
.btn-ghost {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold-border);
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: rgba(242, 199, 105, 0.1);
  border-color: var(--gold);
}

.cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0px 0px 0px;
  padding: 14px;
  height: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--brand-gold-soft);
  border-color: var(--gold);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  cursor: pointer;
  text-decoration: none;
}

/* Right side of hero with orbit label */
.hero-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-orbit {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(242, 199, 105, 0.45);
  padding: 8px 14px;
  background: rgba(5, 5, 5, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-orbit .orbit-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold-soft);
}

.hero-note {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 100%;
}

/* "What is Abqeri" section */
.what-is h3 {
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 6px;
  font-style: italic;
}

.what-is p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 4px;
}

/* Modules grid section */
.modules h3 {
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 10px;
  font-style: italic;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.module-card {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(123, 85, 21, 0.85);
  background: var(--bg-primary);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.module-card h4 {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 2px;
}

.module-card p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--gold);
}

.module-note {
  font-size: 11px;
  color: var(--text-muted);
}

.module-list {
  margin-left: 16px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gold);
}

.module-list li + li {
  margin-top: 2px;
}

.card-link {
  margin-top: 4px;
  font-size: 11px;
  color: var(--gold-soft);
  text-decoration: none;
}

.card-link:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* Mission strip */
.mission-strip {
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: linear-gradient(90deg, var(--bg-primary) 0%, var(--bg-secondary) 40%, var(--bg-primary) 100%);
}

.mission-content h3 {
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 6px;
  font-style: italic;
}

.content p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 2px;
}

/* CTA section */
.cta h3 {
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 6px;
  font-style: italic;
}

.cta p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  max-width: 640px;
}

.cta-buttons {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Responsive tweaks for homepage */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
  }

  .hero-side {
    width: 100%;
  }

  .modules-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .content h2 {
    font-size: 16px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

@media (max-width: 600px) {
  .content h3 {
    font-size: 14px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

@media (max-width: 600px) {
  .hero-content h2 {
    font-size: 16px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

@media (max-width: 600px) {
  .hero-content h3 {
    font-size: 14px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

/* Nav language dropdown */
.nav-lang select {
  min-width: 80px;
  height: 24px;
  font-size: 11px;
  font-style: normal;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  color: var(--text);
  padding: 2px 6px;
}
.nav-lang select:focus {
  outline: none;
  border-color: var(--gold);
}

/* Universe Simulator layout - consistent with Abqeri styling */
.universe-shell {
  margin-top: 14px;
}

.universe-main {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.universe-left,
.universe-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.universe-card {
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: rgba(4, 4, 4, 0.9);
}

.universe-card .card-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  color: var(--gold);
}

.universe-scenario-description {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.universe-params .param-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.universe-params label {
  font-size: 12px;
  color: var(--text-muted);
}

.shots-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
}

.universe-run-button {
  margin-top: 8px;
}

.universe-engine-status {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.engine-meta {
  margin-top: 2px;
}

.explanation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.tab-btn {
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid var(--gold-border);
  background: transparent;
  color: var(--gold);
  font-size: 11px;
  cursor: pointer;
}

.tab-btn.active {
  background: rgba(242, 199, 105, 0.1);
}

.explanation-content {
  font-size: 12px;
  line-height: 1.5;
  max-height: 220px;
  overflow-y: auto;
  color: var(--text-muted);
}

.universe-viz-card {
  min-height: 260px;
}

#universeCanvas {
  width: 100%;
  height: 240px;
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  display: block;
}

.viz-legend {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.universe-console {
  width: 100%;
  min-height: 160px;
  max-height: 260px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 199, 105, 0.4);
  background: var(--bg-primary);
  color: var(--gold);
  padding: 8px 10px;
  font-size: 11px;
  font-family: "Fira Code", "Consolas", monospace;
  resize: vertical;
  box-sizing: border-box;
  white-space: pre-wrap;
}

/* Responsive */
@media (max-width: 900px) {
  .universe-main {
    flex-direction: column;
  }
  #universeCanvas {
    height: 200px;
  }
}

.dev {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 2px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 199, 105, 0.4);
  flex-wrap: wrap;
  gap: 10px;
}

.dev-h2 {
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-top: 14px;
  margin-bottom: 12px;
  color: var(--gold);
}

.dev-h3 {
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-top: 14px;
  margin-bottom: 2px;
  color: var(--gold);
}

.dev-h4 {
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  color: var(--gold);
}

.dev-p {
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-top: 12px;
  margin-bottom: 12px;
  color: var(--gold);
  background-color: black;
}

.ul {
  list-style-type: square;
  font-size: 12px;
  font-style: italic;
  color: var(--gold);
  margin: 2px 2px 2px 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.tr {
  list-style-type: square;
  font-size: 12	px;
  font-style: italic;
  color: var(--gold);
  margin: 2px 2px 2px 14px;
  flex-wrap: wrap;
  gap: 10px;
  text-align: left;
  width: 30%;
}

.td{
  list-style-type: square;
  font-size: 12	px;
  font-style: italic;
  color: var(--gold);
  margin: 2px 2px 2px 14px;
  flex-wrap: wrap;
  gap: 10px;
  text-align: left;
  width: 30%;
}

/* Transparent Ledger */
    .ledger-layout {
      display: grid;
      grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1.1fr);
      gap: 16px;
      margin-top: 10px;
    }
    @media (max-width: 900px) {
      .ledger-layout {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .card {
      border-radius: var(--radius-md);
      border: 1px solid var(--gold-border);
      background: #060606;
      padding: 10px 11px;
    }
    .card-title {
      font-size: 13px;
      color: var(--gold);
      margin-bottom: 6px;
    }
    .card-subtitle {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
    }
    .summary-item-label {
      font-size: 10px;
      color: var(--text-muted);
    }
    .summary-item-value {
      font-size: 13px;
      color: var(--gold);
    }
    .summary-item-pill {
      font-size: 10px;
      color: var(--text-muted);
    }
    .ledger-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
      margin-top: 8px;
    }
    .ledger-table th,
    .ledger-table td {
      border-bottom: 1px solid rgba(242,199,105,0.2);
      padding: 4px 3px;
      text-align: left;
    }
    .ledger-table th {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
    }
    .badge {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 999px;
      border: 1px solid rgba(242,199,105,0.6);
      font-size: 10px;
      color: var(--gold);
    }
    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      font-size: 11px;
      margin-bottom: 6px;
    }
    .filter-row select,
    .filter-row input[type="number"],
    .filter-row input[type="email"] {
      background: var(--bg-primary);
      border-radius: var(--radius-md);
      border: 1px solid rgba(242,199,105,0.5);
      padding: 2px 6px;
      color: var(--gold);
      font-size: 11px;
    }
    .mini-label {
      font-size: 10px;
      color: var(--text-muted);
    }
    .pill-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 3px;
      background: #36c46b;
    }
    .pill-dot.sandbox {
      background: #3b82f6;
    }
    .email-note {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 4px;
    }
    #daily-chart {
      width: 100%;
      height: 180px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(242,199,105,0.3);
      background: var(--bg-primary);
    }

/* Products */
    .pricing-hero {
      font-size: 12px;
      margin-bottom: 4px;
    }
    .tagline {
      font-size: 12px;
      letter-spacing: 0.12em;
      color: rgba(212, 175, 55, 0.9);
      margin-bottom: 4px;
    }
    .pricing-hero h1 {
      margin: 0 0 8px;
      font-size: 12px;
    }
    .pricing-hero p {
      margin: 6px 0;
      font-size: 12px;
      max-width: 740px;
      line-height: 1.5;
    }
    .pill-row {
      margin-top: 10px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .pill {
      border-radius: 2px;
      padding: 4px 10px;
      border: 1px solid rgba(212, 175, 55, 0.6);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      opacity: 0.9;
    }
    .info-legend {
      margin: 12px 0 1.5rem;
      font-size: 12px;
      padding: 12px 12px;
      border: 1px solid rgba(212, 175, 55, 0.4);
      border-radius: 2px;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      gap: 0.75rem;
    }
    .legend-icon {
      width: 20px;
      height: 20px;
      min-width: 20px;
      border-radius: 999px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      opacity: 0.9;
    }
    .legend-text {
      font-size: 12px;
      font-style: italic;
      line-height: 1.4;
      opacity: 0.95;
    }
    .legend-text a {
      font-size: 12px;
      color: #d4af37;
      text-decoration: underline;
    }
    .section-heading {
      font-size: 14px;
      font-style: italic;
      margin: 12px 0 4px;
    }
    .section-text {
      font-size: 12px;
      font-style: italic;
      margin: 12px 0 4px;
    }
    .section-sub {
      font-size: 12px;
       font-style: italic;
     opacity: 0.9;
      margin-bottom: 10px;
    }
    .hardware-notice {
      font-size: 11px;
      font-style: italic;
      padding: 10px 12px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: rgba(0, 0, 0, 0.55);
      max-width: 780px;
    }
    .hardware-notice strong {
      color: #d4af37;
    }
    .products-layout {
      margin-top: 14px;
      display: flex;
      gap: 18px;
      align-items: flex-start;
    }
    .products-column {
      flex: 2;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .plan-card {
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      padding: 12px;
      background: radial-gradient(circle at top left, rgba(212, 175, 55, 0.16), rgba(0, 0, 0, 0.9));
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
    }
    .plan-card-title {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 6px;
    }
    .plan-card-title span:first-child {
      font-size: 14px;
      font-weight: 600;
    }
    .product-price {
      font-size: 12px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .price-info {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-left: 6px;
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      font-size: 10px;
      font-weight: 600;
      cursor: help;
      opacity: 0.9;
      position: relative;
      animation: goldPulse 2.4s ease-in-out infinite alternate;
    }
    .price-info::before {
      content: "i";
      line-height: 1;
    }
    .price-info::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 50%;
      bottom: -4px;
      transform: translateX(-50%) translateY(8px);
      background: rgba(0, 0, 0, 0.96);
      border: 1px solid rgba(212, 175, 55, 0.9);
      border-radius: 2px;
      padding: 6px 8px;
      font-size: 11px;
      width: 240px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s, transform 0.15s;
      z-index: 20;
    }
    .price-info:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(2px);
    }
    @keyframes goldPulse {
      from { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.0); }
      to   { box-shadow: 0 0 8px 2px rgba(212, 175, 55, 0.7); }
    }
    .upgrade-badge {
      display: inline-block;
      margin-top: 4px;
      padding: 2px 8px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      opacity: 0.9;
    }
    .product-actions {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .product-qty {
      font-size: 11px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .product-qty input[type="number"] {
      width: 48px;
      padding: 2px 4px;
      border-radius: 2px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.7);
      color: var(--surface-primary);
      font-size: 11px;
    }
    .button-primary {
      background: linear-gradient(90deg, #d4af37, #f2e08b);
      border: none;
      color: #ffffff;
      padding: 7px 13px;
      font-size: 12px;
      border-radius: 2px;
      cursor: pointer;
      letter-spacing: 0.08em;
      font-weight: 600;
    }
    .button-primary:hover {
      filter: brightness(1.05);
      color: #ffffff;
}
    .cart-panel {
      flex: 1;
      max-width: 340px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: rgba(0, 0, 0, 0.75);
      padding: 14px;
      position: sticky;
      top: 20px;
    }
    .cart-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .cart-items {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 2px;
      min-height: 60px;
      padding: 8px 10px;
    }
    .cart-empty {
      opacity: 0.65;
      font-size: 12px;
    }
    .cart-item {
      display: flex;
      justify-content: space-between;
      padding: 4px 0;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
      font-size: 12px;
    }
    .cart-item:last-child {
      border-bottom: none;
    }
    .cart-summary {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      font-size: 12px;
      font-weight: 600;
    }
    .impact-summary {
      padding: 0.7rem;
      margin-top: 12px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.3);
      background: rgba(0, 0, 0, 0.4);
    }
    .impact-label {
      font-size: 12px;
      margin-bottom: 12px;
      opacity: 0.85;
    }
    .impact-value {
      font-size: 12px;
      font-weight: 500;
    }
    .cart-note {
      margin-top: 8px;
      font-size: 11px;
      opacity: 0.85;
    }
    footer {
      padding: 10px 24px;
      font-size: 11px;
      border-top: 1px solid rgba(212, 175, 55, 0.3);
      opacity: 0.8;
      display: flex;
      justify-content: space-between;
    }
    footer a {
      color: #d4af37;
      text-decoration: none;
      margin-right: 10px;
    }
    footer a:hover {
      text-decoration: underline;
    }
    .faq-list {
      margin-top: 12px;
      max-width: 820px;
    }
    .faq-item {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding: 0.55rem 0;
    }
    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-size: 12px;
    }
    .faq-answer {
      display: none;
      margin-top: 0.25rem;
      font-size: 12px;
      opacity: 0.9;
    }
    .faq-item.open .faq-answer {
      display: block;
    }
    .faq-toggle-icon {
      font-size: 12px;
      opacity: 0.8;
    }

/* Transparent Pricing */
    .transparent-container {
      padding: 2rem;
      max-width: 1000px;
      margin: auto;
    }

    .transparent-container h1 {
      margin-bottom: 12px;
    }

    .intro {
      margin-bottom: 12px;
      font-size: 12px;
    }

    .transparent-section {
      border: 1px solid rgba(212, 175, 55, 0.4);
      border-radius: 2px;
      padding: 1.5rem;
      background: rgba(0, 0, 0, 0.4);
      margin-bottom: 2rem;
    }

    .transparent-section h2 {
      margin-bottom: 0.5rem;
    }

    .transparent-table {
      width: 100%;
      margin-top: 2px;
      border-collapse: collapse;
    }

    .transparent-table th,
    .transparent-table td {
      padding: 2px 2px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 12px;
    }

    .note {
      margin-top: 12px;
      font-size: 11px;
      opacity: 0.9;
    }

    .slogan {
      margin-top: 12px;
      font-size: 12px;
      font-weight: 600;
    }

/" Order Success */
    .card {
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: rgba(0, 0, 0, 0.55);
      padding: 1.2rem 1.4rem;
      margin-top: 1.2rem;
      font-size: 12px;
    }
    .status-pill {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0.4rem;
    }
    .order-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px 18px;
      margin-top: 0.6rem;
      font-size: 12rem;
    }
    .order-grid dt {
      font-weight: 600;
      opacity: 0.9;
    }
    .order-grid dd {
      margin: 2px 0 0.6rem;
      opacity: 0.95;
    }
    .items-list {
      margin-top: 0.8rem;
      font-size: 12rem;
    }
    .items-list ul {
      margin: 0.3rem 0 0;
      padding-left: 1rem;
    }
    .impact-note {
      margin-top: 0.9rem;
      font-size: 12rem;
      opacity: 0.95;
    }
    .impact-note strong {
      color: #d4af37;
    }
    .small {
      font-size: 0.8rem;
      opacity: 0.85;
      margin-top: 0.8rem;
    }
    .button-row {
      margin-top: 1.2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

.plan {
  margin-bottom: 16px;
}

.image-row {
  display: flex;
  gap: 20px;       /* space between images */
  justify-content: center; 
  align-items: center;
}

.image-row img {
  height: 300px;
  max-width: 400px;
}

/* =========================================
   Global light theme overrides (all pages)
   ========================================= */

/* Make all main surfaces white in light theme */
:root[data-theme="light"] body,
:root[data-theme="light"] main,
:root[data-theme="light"] section,
:root[data-theme="light"] article,
:root[data-theme="light"] .page,
:root[data-theme="light"] .page-shell,
:root[data-theme="light"] .content-shell,
:root[data-theme="light"] .content-section,
:root[data-theme="light"] .module-section {
  background: #ffffff !important;
}

/* Generic blocks / cards / panels across all subpages */
:root[data-theme="light"] [class*="card"],
:root[data-theme="light"] [class*="panel"],
:root[data-theme="light"] [class*="shell"],
:root[data-theme="light"] [class*="section"],
:root[data-theme="light"] [class*="drawer"],
:root[data-theme="light"] [class*="area"],
:root[data-theme="light"] [class*="console"],
:root[data-theme="light"] [class*="canvas"],
:root[data-theme="light"] [class*="box"],
:root[data-theme="light"] [class*="tile"],
:root[data-theme="light"] [class*="grid"],
:root[data-theme="light"] [class*="hero"],
:root[data-theme="light"] [class*="strip"],
:root[data-theme="light"] [class*="cta"],
:root[data-theme="light"] [class*="summary"],
:root[data-theme="light"] [class*="forecast"],
:root[data-theme="light"] [class*="ledger"] {
  background: #ffffff !important;
}

/* Anything that was a dark translucent overlay → light translucent */
:root[data-theme="light"] [class*="overlay"],
:root[data-theme="light"] [class*="backdrop"],
:root[data-theme="light"] [class*="tooltip"],
:root[data-theme="light"] [class*="pill"],
:root[data-theme="light"] [class*="badge"],
:root[data-theme="light"] [class*="legend"],
:root[data-theme="light"] [class*="notice"] {
  background: rgba(255, 255, 255, 0.96) !important;
}

/* Keep specific small dark islands from the original CSS white too */
:root[data-theme="light"] .workbench-shell,
:root[data-theme="light"] .engine-shell,
:root[data-theme="light"] .results-shell,
:root[data-theme="light"] .perf-pane,
:root[data-theme="light"] .module-card,
:root[data-theme="light"] .transparent-section,
:root[data-theme="light"] .universe-card,
:root[data-theme="light"] .cart-panel,
:root[data-theme="light"] .cart-items,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .content,
:root[data-theme="light"] .mission-strip,
:root[data-theme="light"] .cta,
:root[data-theme="light"] .hero-orbit,
:root[data-theme="light"] .info-legend,
:root[data-theme="light"] .hardware-notice,
:root[data-theme="light"] .music-heart-mini,
:root[data-theme="light"] #musicHeartWave,
:root[data-theme="light"] .dev-p,
:root[data-theme="light"] .universe-console,
:root[data-theme="light"] #universeCanvas,
:root[data-theme="light"] .ledger-table,
:root[data-theme="light"] .data-table,
:root[data-theme="light"] #daily-chart,
:root[data-theme="light"] .engine-status-pill {
  background: #ffffff !important;
}

/* Impact banner: Quantum for Orphans */
.impact-banner {
  margin: 12px 40px 0 40px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--gold-border);
  background: linear-gradient(120deg, rgba(245, 212, 114, 0.08), rgba(5, 5, 9, 0.98));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.impact-banner-text {
  max-width: 720px;
  font-size: 0.9rem;
}

.impact-banner-label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 4px;
}

.impact-banner-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 0.85rem;
}

.impact-metric-number {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold);
}

.impact-banner-cta {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--gold);
}

.impact-banner-cta:hover {
  text-decoration: underline;
}

/* Pricing comparison: IBM vs Abqeri */
.pricing-compare {
  margin: 24px auto 8px auto;
  max-width: 980px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at top left, rgba(245, 212, 114, 0.12), rgba(5, 5, 9, 0.98));
  border: 1px solid rgba(245, 212, 114, 0.25);
}

.pricing-compare h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--gold);
}

.pricing-compare-intro,
.pricing-compare-footnote {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 10px;
}

.pricing-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-bottom: 8px;
}

.pricing-compare-table th,
.pricing-compare-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.pricing-compare-table th {
  font-weight: 600;
  opacity: 0.95;
}

.pricing-compare-table tbody tr:nth-child(2) td {
  background: rgba(46, 204, 113, 0.06);
}

/* ==================================================
   LIGHT THEME — READABILITY OVERRIDE (Launch)
   Purpose: prevent gold body text on white backgrounds.
   Gold remains for headings, metrics, buttons, accents.
   ================================================== */

:root[data-theme="light"] body,
:root[data-theme="light"] p,
:root[data-theme="light"] li,
:root[data-theme="light"] dt,
:root[data-theme="light"] dd,
:root[data-theme="light"] .dev,
:root[data-theme="light"] .dev-p,
:root[data-theme="light"] .content-div,
:root[data-theme="light"] .content-dev,
:root[data-theme="light"] .content-p,
:root[data-theme="light"] .module-list,
:root[data-theme="light"] .what-is p,
:root[data-theme="light"] .modules p,
:root[data-theme="light"] .module-card p,
:root[data-theme="light"] .hero-content p,
:root[data-theme="light"] .pricing-hero p,
:root[data-theme="light"] .pricing-hero,
:root[data-theme="light"] .legend-text,
:root[data-theme="light"] .section-text,
:root[data-theme="light"] .section-sub,
:root[data-theme="light"] .intro,
:root[data-theme="light"] .note,
:root[data-theme="light"] .transparent-container,
:root[data-theme="light"] .transparent-section,
:root[data-theme="light"] .faq-answer,
:root[data-theme="light"] .faq-question,
:root[data-theme="light"] .cart-empty,
:root[data-theme="light"] .cart-item,
:root[data-theme="light"] .cart-note,
:root[data-theme="light"] .music-heart-mini-summary,
:root[data-theme="light"] .music-heart-mini-note,
:root[data-theme="light"] .music-heart-wave-note,
:root[data-theme="light"] .music-heart-layer-label,
:root[data-theme="light"] .universe-scenario-description,
:root[data-theme="light"] .universe-engine-status,
:root[data-theme="light"] .engine-status-label,
:root[data-theme="light"] .results-body,
:root[data-theme="light"] .mini-label,
:root[data-theme="light"] .summary-item-label,
:root[data-theme="light"] .summary-item-pill,
:root[data-theme="light"] .card-subtitle {
  color: var(--text) !important;
}

/* Links in light theme: readable black, gold on hover */
:root[data-theme="light"] a {
  color: var(--text) !important;
}
:root[data-theme="light"] a:hover {
  color: var(--brand-gold) !important;
}

/* Form controls in light theme */
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  color: var(--text) !important;
  background: var(--bg-secondary) !important;
}

/* Tables in light theme */
:root[data-theme="light"] .data-table th,
:root[data-theme="light"] .data-table td,
:root[data-theme="light"] .ledger-table th,
:root[data-theme="light"] .ledger-table td {
  color: var(--text) !important;
}

/* ================================
   LIGHT THEME – TEXT CONTRACT
   ================================ */

/* Only apply in LIGHT theme (theme.js sets <html data-theme="light">) */
:root[data-theme="light"] body { color: #000; }
:root[data-theme="light"] body :where(p,span,li,div,td,th,label,small,h1,h2,h3,h4,h5,h6) { color: #000; }

/* Keep button/link styling intact */
:root[data-theme="light"] body a { color: #000; }
:root[data-theme="light"] body a.btn,
:root[data-theme="light"] body a.btn-primary,
:root[data-theme="light"] body a.btn-ghost,
:root[data-theme="light"] body a.btn-secondary,
:root[data-theme="light"] body button,
:root[data-theme="light"] body .btn,
:root[data-theme="light"] body .btn-primary,
:root[data-theme="light"] body .btn-ghost,
:root[data-theme="light"] body .btn-secondary {
  color: inherit;
}

/* Ensure primary buttons stay white in light theme */
:root[data-theme="light"] :where(.btn.primary,.btn-primary,.button-primary,a.btn.primary,a.btn-primary) {
  color: #ffffff !important;
}


:root[data-theme="light"] .hero--abqeri {
  background: #ffffff;
  color: var(--text);
  padding: 4rem 1.5rem 4.5rem;
}
:root[data-theme="light"] .hero--abqeri .hero__subtitle { color: var(--text-muted); }
:root[data-theme="light"] .hero-compare,
:root[data-theme="light"] .hero-compare__col,
:root[data-theme="light"] .qpu-card__inner,
:root[data-theme="light"] .hero-quantum-heart {
  background: #ffffff;
  box-shadow: none;
}
:root[data-theme="light"] .hero-compare__title,
:root[data-theme="light"] .hero-compare__col-title,
:root[data-theme="light"] .hero-compare__col-body,
:root[data-theme="light"] .qpu-card__title,
:root[data-theme="light"] .qpu-card__subtitle,
:root[data-theme="light"] .qpu-badge {
  color: var(--text) !important;
}

:root[data-theme="dark"] .hero--abqeri {
  color: var(--text);

  background: radial-gradient(circle at top, #111827 0%, #020617 55%, #000000 100%);
  color: var(--text);
  padding: 4rem 1.5rem 4.5rem;
}

@media (min-width: 768px) {
  :root[data-theme="dark"] .hero--abqeri {
  color: var(--text);

    padding: 5rem 2rem 5.5rem;
  }
}

.hero__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
  }
}

.hero__content {
  flex: 1 1 0;
  min-width: 0;
}

.hero__title {
  font-size: clamp(1.9rem, 2.4vw + 1.4rem, 2.7rem);
  line-height: 1.1;
  margin: 0 0 1.1rem;
  letter-spacing: 0.02em;
}

.hero__subtitle {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 32rem;
  margin: 0 0 1.75rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(245, 197, 69, 0.35);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(245, 197, 69, 0.45);
}

.btn--ghost {
  background: rgba(15, 23, 42, 0.8);
  color: var(--text);
  border-color: rgba(242, 199, 105, 0.22);
}

.btn--ghost:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: var(--gold-soft);
}

.hero__microcopy {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0;
}

.hero__visual {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-quantum-heart {
  max-width: 380px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at top, rgba(15,23,42,0.9), rgba(3,7,18,1));
  box-shadow: 0 18px 45px rgba(0,0,0,0.75);
  border: 1px solid rgba(148, 163, 184, 0.18);
  padding: 0.75rem;
}

/* Comparison strip */
.hero__meta-row {
  max-width: 1120px;
  margin: 1.75rem auto 0;
  padding: 0 1.5rem 0.5rem;
}

@media (min-width: 768px) {
  .hero__meta-row {
    padding: 0 2rem 1rem;
  }
}

.hero-compare {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 14px 35px rgba(0,0,0,0.7);
  padding: 1.25rem 1.4rem 1.4rem;
}

@media (min-width: 900px) {
  .hero-compare {
    padding: 1.4rem 1.7rem 1.6rem;
  }
}

.hero-compare__title {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #e5e7eb;
  margin: 0 0 1rem;
  opacity: 0.9;
}

.hero-compare__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

@media (min-width: 900px) {
  .hero-compare__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hero-compare__col {
  background: radial-gradient(circle at top left, rgba(15,23,42,0.9), rgba(15,23,42,0.95));
  border-radius: 0.9rem;
  border: 1px solid rgba(55, 65, 81, 0.8);
  padding: 0.8rem 0.9rem 0.9rem;
}

.hero-compare__col--highlight {
  border-color: #f5c545;
  box-shadow: 0 0 0 1px rgba(245, 197, 69, 0.35), 0 12px 30px rgba(245, 197, 69, 0.22);
  background: radial-gradient(circle at top, rgba(22, 30, 51, 1), rgba(9, 9, 11, 1));
}

.hero-compare__col-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #f9fafb;
  margin: 0 0 0.35rem;
}

.hero-compare__col-body {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #d1d5db;
  margin: 0;
}

/* QPU card */
.qpu-card {
  max-width: 1120px;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem 3rem;
}

@media (min-width: 768px) {
  .qpu-card {
    padding: 0 2rem 3.5rem;
  }
}

.qpu-card__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: radial-gradient(circle at top left, #0b1120, #020617);
  border-radius: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 18px 50px rgba(0,0,0,0.75);
  padding: 1.5rem 1.4rem 1.6rem;
}

@media (min-width: 900px) {
  .qpu-card__inner {
    flex-direction: row;
    align-items: center;
    padding: 1.8rem 1.8rem 2rem;
  }
}

.qpu-card__visual {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qpu-card__svg {
  width: 210px;
  max-width: 100%;
  height: auto;
}

.qpu-card__content {
  flex: 1 1 0;
  min-width: 0;
}

.qpu-card__title {
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
  color: #f9fafb;
}

.qpu-card__subtitle {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #d1d5db;
  margin: 0 0 1.1rem;
  max-width: 34rem;
}

.qpu-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.qpu-badge {
  font-size: 0.76rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.7);
  color: #e5e7eb;
  background: rgba(15,23,42,0.9);
}

.qpu-card__cta {
  margin-top: 0.2rem;
  font-size: 0.88rem;
}

/* Make all SVG <text> follow theme text color */
svg text { fill: currentColor !important; }


/* ===============================
   Abqeri Language Selector
   =============================== */

#lang-select,
#abqeriLangSelect,
#languageSelector {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.92rem;
  cursor: pointer;
}

/* Ensure primary buttons stay white in light theme */
:root[data-theme="light"] :where(.btn.primary,.btn-primary,.button-primary,a.btn.primary,a.btn-primary) {
  color: #ffffff !important;
}


body.dark #lang-select,
body.dark #abqeriLangSelect,
body.dark #languageSelector {
  border-color: rgba(255,215,0,0.6);
  color: #f5d76e;
  background: rgba(0,0,0,0.3);
}

#lang-select:focus,
#abqeriLangSelect:focus,
#languageSelector:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,215,0,0.25);
}


/* ===== MERGED FROM assets/home_hero.css ===== */
:root {
  --abqeri-bg: #020617;
  --abqeri-bg-elevated: #050816;
  --abqeri-gold: #f5c545;
  --abqeri-gold-soft: #facc6b;
  --abqeri-fg: #f9fafb;
  --abqeri-muted: #9ca3af;
  --abqeri-border-subtle: #1f2937;
  --abqeri-radius-xl: 1.5rem;
  --abqeri-shadow-soft: 0 18px 45px rgba(0,0,0,0.75);
}

.hero--abqeri {
  background: radial-gradient(circle at top, #111827 0%, #020617 55%, #000000 100%);
  color: var(--abqeri-fg);
  padding: 4rem 1.5rem 4.5rem;
}

@media (min-width: 768px) {
  .hero--abqeri {
    padding: 5rem 2rem 5.5rem;
  }
}

.hero__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
  }
}

.hero__content {
  flex: 1 1 0;
  min-width: 0;
}

.hero__title {
  font-size: clamp(1.9rem, 2.4vw + 1.4rem, 2.7rem);
  line-height: 1.1;
  margin: 0 0 1.1rem;
  letter-spacing: 0.02em;
}

.hero__subtitle {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--abqeri-muted);
  max-width: 32rem;
  margin: 0 0 1.75rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, var(--abqeri-gold), var(--abqeri-gold-soft));
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(245, 197, 69, 0.35);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(245, 197, 69, 0.45);
}

.btn--ghost {
  background: rgba(15, 23, 42, 0.8);
  color: var(--abqeri-fg);
  border-color: var(--abqeri-border-subtle);
}

.btn--ghost:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: var(--abqeri-gold-soft);
}

.hero__microcopy {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0;
}

.hero__visual {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-quantum-heart {
  max-width: 380px;
  width: 100%;
  height: auto;
  border-radius: var(--abqeri-radius-xl);
  background: radial-gradient(circle at top, rgba(15,23,42,0.9), rgba(3,7,18,1));
  box-shadow: var(--abqeri-shadow-soft);
  border: 1px solid rgba(148, 163, 184, 0.18);
  padding: 0.75rem;
}

/* Comparison strip */
.hero__meta-row {
  max-width: 1120px;
  margin: 1.75rem auto 0;
  padding: 0 1.5rem 0.5rem;
}

@media (min-width: 768px) {
  .hero__meta-row {
    padding: 0 2rem 1rem;
  }
}

.hero-compare {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 14px 35px rgba(0,0,0,0.7);
  padding: 1.25rem 1.4rem 1.4rem;
}

@media (min-width: 900px) {
  .hero-compare {
    padding: 1.4rem 1.7rem 1.6rem;
  }
}

.hero-compare__title {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #e5e7eb;
  margin: 0 0 1rem;
  opacity: 0.9;
}

.hero-compare__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

@media (min-width: 900px) {
  .hero-compare__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hero-compare__col {
  background: radial-gradient(circle at top left, rgba(15,23,42,0.9), rgba(15,23,42,0.95));
  border-radius: 0.9rem;
  border: 1px solid rgba(55, 65, 81, 0.8);
  padding: 0.8rem 0.9rem 0.9rem;
}

.hero-compare__col--highlight {
  border-color: #f5c545;
  box-shadow: 0 0 0 1px rgba(245, 197, 69, 0.35), 0 12px 30px rgba(245, 197, 69, 0.22);
  background: radial-gradient(circle at top, rgba(22, 30, 51, 1), rgba(9, 9, 11, 1));
}

.hero-compare__col-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #f9fafb;
  margin: 0 0 0.35rem;
}

.hero-compare__col-body {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #d1d5db;
  margin: 0;
}

/* QPU card */
.qpu-card {
  max-width: 1120px;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem 3rem;
}

@media (min-width: 768px) {
  .qpu-card {
    padding: 0 2rem 3.5rem;
  }
}

.qpu-card__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: radial-gradient(circle at top left, #0b1120, #020617);
  border-radius: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 18px 50px rgba(0,0,0,0.75);
  padding: 1.5rem 1.4rem 1.6rem;
}

@media (min-width: 900px) {
  .qpu-card__inner {
    flex-direction: row;
    align-items: center;
    padding: 1.8rem 1.8rem 2rem;
  }
}

.qpu-card__visual {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qpu-card__svg {
  width: 210px;
  max-width: 100%;
  height: auto;
}

.qpu-card__content {
  flex: 1 1 0;
  min-width: 0;
}

.qpu-card__title {
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
  color: #f9fafb;
}

.qpu-card__subtitle {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #d1d5db;
  margin: 0 0 1.1rem;
  max-width: 34rem;
}

.qpu-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.qpu-badge {
  font-size: 0.76rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.7);
  color: #e5e7eb;
  background: rgba(15,23,42,0.9);
}

.qpu-card__cta {
  margin-top: 0.2rem;
  font-size: 0.88rem;
}


/* ===== MERGED FROM assets/unified_heart.css ===== */
/* Hybrid Heart CSS */


/* ===== MERGED FROM assets/css/charity_styles.css ===== */
/* Abqeri — Charity tab + widget styles (merge into your style.css) */

.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:999px;font-size:12px;padding:0 6px}
.badge-verified{background:#1f8f4a;color:#fff}
.badge-pending{background:#999;color:#fff}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-grid label{display:flex;flex-direction:column;gap:6px}
.divider{height:1px;background:rgba(0,0,0,.08);margin:16px 0}
.charity-widget{border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px}
.charity-widget-title{font-weight:700;margin-bottom:8px}
.charity-widget-row{display:flex;justify-content:space-between;align-items:center;margin:6px 0}
.strong{font-weight:700}


.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700;}
.badge.verified{background:#e7f7ea;color:#0a7a2a;border:1px solid #bfe9c8;}
.badge.pending{background:#fff4e5;color:#8a5200;border:1px solid #ffd7a8;}


/* ===== MERGED FROM js/style_black.css ===== */
/* ===============================
   Dual Theme Variable System
   =============================== */
:root {
  --bg-color: #0b0b0b;
  --text-color: #e8e8e8;
  --accent-color: #cfa844;
  --border-color: #cfa844;
}

/* Light Theme — GOLD Accents */
body.theme-light-gold {
  --bg-color: #ffffff;
  --text-color: #000000;
  --accent-color: #cfa844;
  --border-color: #cfa844;
}

/* Light Theme — BLACK Accents */
body.theme-light-black {
  --bg-color: #ffffff;
  --text-color: #000000;
  --accent-color: #000000;
  --border-color: #cccccc;
}

/* Variable Application */
body {
  background: var(--bg-color);
  color: var(--text-color);
}


/* Original CSS */
/* ===================================================================
   Abqeri Alef v1 – Global Styles
   =================================================================== */

:root {
  --bg: #050505;
  --bg-elevated: #0b0b0b;
  --gold: #f2c769;
  --gold-soft: #d7a943;
  --gold-border: #7b5515; /* very dark gold */
  --text: #f7e7b0;
  --text-muted: #c7aa6b;
  --danger: #ff4c4c;

  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
}

/* -------------------------------
   Reset / Base
---------------------------------- */

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

html, body {
  height: 100%;
}

body {
  font-family: Verdana, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--gold);
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
  text-decoration: underline;
  color: var(--gold-soft);
  opacity: 1;
}

em,
.italic {
  font-style: italic;
}

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

/* -------------------------------
   Layout Shell
---------------------------------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -------------------------------
   Header / Brand / Nav
---------------------------------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  border-bottom: 1px solid var(--gold-border);
  background: #050505;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

.brand-title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: var(--gold);
  font-style: italic;
}

nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 12px;
  font-style: italic;
}

.nav-item {
  position: relative;
  padding-bottom: 2px;
}

.nav-item a {
  color: var(--gold);
}

.nav-item a:hover {
  color: var(--gold-soft);
}

.nav-item.active a {
  font-weight: 600;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--gold-border);
  border-radius: var(--radius-sm);
}

/* -------------------------------
   Main Content Shell
---------------------------------- */

main {
  flex: 1;
  padding: 24px 40px 10px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-title {
  font-size: 18px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 4px;
}

/* Subtabs */

.subtabs {
  font-size: 12px;
  display: flex;
  gap: 24px;
  font-style: italic;
  margin-bottom: 10px;
}

.subtab {
  position: relative;
  padding-bottom: 4px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.subtab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold-border);
  border-radius: var(--radius-sm);
}

.subtab:hover {
  color: var(--gold-soft);
  opacity: 1;
}

/* Tab panels */

.tab-panels {
  display: block;
}

.tab-panel {
  margin-top: 4px;
}

/* -------------------------------
   Global Inputs / Selects / Buttons / Textareas
---------------------------------- */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
button {
  height: 28px;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  background: #050505;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  padding: 4px 6px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input[type="text"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
  border-color: var(--gold-soft);
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
}

/* Primary button */

.button-primary {
  border: 1px solid var(--gold-border);
  background: #f2c769;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button-primary:hover {
  background: #d7a943;
  border-color: var(--gold);
  color: #ffffff;
}

.button-primary:active {
  background: #c29135;
  color: #ffffff;
}

/* -------------------------------
   Unified Computing – Workbench Layout
---------------------------------- */

.workbench-shell {
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  background: var(--bg-elevated);
}

.workbench-main {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* Left side: tabs + code editors + plan/env/notes */

.code-tabs-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Code pane – no outer border, only textarea bg */

.code-pane {
  flex: 1;
  background: transparent;
  border-radius: var(--radius-md);
  padding: 0;
}

/* Code editor textareas (no border) */

.code-editor {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  overflow: hidden;
  font-family: "Courier New", Consolas, Menlo, monospace;
  font-size: 12px;
  background: #050505;
  color: var(--gold);
  border-radius: var(--radius-md);
  border: none;
  padding: 8px 10px;
}

/* Right side: compact Hybrid Engine block */

.engine-shell {
  flex: 0 0 260px;
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  padding: 8px 9px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.engine-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}

.engine-field-run {
  margin-top: 4px;
}

.engine-field input,
.engine-field select,
.engine-field button {
  font-size: 12px;
  min-width: 0;
}

.engine-legend-title {
  margin-top: 4px;
}

.engine-shell .mini-legend {
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
}

/* Info icons */

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  font-size: 10px;
  cursor: help;
  opacity: 0.75;
  line-height: 1;
}

.info-icon:hover {
  opacity: 1;
}

/* Results pane */

.results-shell {
  margin-top: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: var(--bg-elevated);
  padding: 10px 14px 12px;
}

.results-title {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 6px;
}

.results-body {
  min-height: 40px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Plan / Env / Notes textareas */

.plan-notes,
.env-notes,
.notes-notes {
  margin-top: 6px;
  width: 100%;
  min-height: 80px;
  resize: vertical;
}

/* -------------------------------
   Performance panel
---------------------------------- */

.perf-pane {
  border-radius: var(--radius-md);
  border: 1px solid var(--gold-border);
  padding: 12px 14px;
  background: #050505;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perf-title {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 4px;
}

.perf-metric {
  margin-top: 4px;
}

.perf-label {
  font-size: 11px;
  color: var(--gold);
  margin-bottom: 3px;
}

.perf-label .perf-value {
  font-weight: 600;
}

.perf-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: var(--radius-sm);
  background: #151515;
  overflow: hidden;
}

.perf-bar-fill {
  height: 100%;
  width: 70%;
  background: linear-gradient(to right, #2ecc71, #f1c40f, #e67e22, #e74c3c);
}

/* -------------------------------
   Footer
---------------------------------- */

footer {
  border-top: 1px solid var(--gold-border);
  padding: 10px 10px 18px;
  text-align: center;
  font-size: 10px;
  color: var(--gold);
  font-style: italic;
  line-height: 1.4;
}

/* -------------------------------
   Basic Responsive Tweak
---------------------------------- */

@media (max-width: 900px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  nav {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  main {
    padding: 18px 16px 10px 16px;
  }

  .workbench-main {
    flex-direction: column;
  }

  .engine-shell {
    flex: 1;
  }

  .chat-shell {
    padding: 16px 14px;
  }
}


/* Safe Mind AI layout */
.safe-workbench-shell {
  margin-top: 14px;
}

.safe-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.safe-column {
  min-width: 0;
}

.safe-history {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 199, 105, 0.35);
  background: #050505;
  color: var(--gold);
  padding: 8px 10px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  box-sizing: border-box;
}

/* prompt row */
.safe-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}



@media (max-width: 720px) {
  .safe-input-row {
    align-items: flex-start;
  }
  
}

.safe-prompt {
  width: 100%;
  min-height: 32px;
  resize: vertical;
  overflow-y: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 199, 105, 0.4);
  background: #050505;
  color: var(--gold);
  padding: 8px 10px;
  font-size: 14px;
  box-sizing: border-box;
}

.safe-prompt::placeholder {
  color: var(--text-muted);
}

/* focus glow */
.safe-prompt:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(242, 199, 105, 0.6), 0 0 12px rgba(242, 199, 105, 0.25);
}

/* mic + attach */
.safe-mic {
  font-size: 12px;
}








/* actions row */
.safe-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.safe-actions-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.safe-actions-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.safe-status {
  font-size: 12px;
  color: var(--text-muted);
}

/* file list */
.safe-file-list {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  max-height: 120px;
  overflow: auto;
  white-space: normal;
}

/* mini note & card shrink */
.safe-main-card .safe-mini-note,
.safe-main-card .safe-status {
  font-size: 12px;
}

/* pulse animation */
@keyframes safeHistoryPulse {
  0% { box-shadow: 0 0 0 0 rgba(242, 199, 105, 0.0); }
  40% { box-shadow: 0 0 0 1px rgba(242, 199, 105, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(242, 199, 105, 0.0); }
}

.safe-history-pulse {
  animation: safeHistoryPulse 0.26s ease-out;
}



/* Make attach chip (📎) visually match secondary buttons */




.safe-file-label span {
  line-height: 1;
}

/* File input stays invisible but clickable across the label */



.button-secondary {
border: 1px solid var(--gold-border);
  background: #f2c769;
  color: #1a1205;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease;
}



/* Safe Mind AI attach: use standard button visuals via button-secondary */
.safe-file-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.safe-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}


.safe-input-side-horiz {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}


/* ===================================================
   Safe Mind AI – mic + attach button styling
   =================================================== */

.safe-file-label,
.safe-mic {
  background-color: #000000;
  color: var(--gold);
  border-color: transparent;
}

.safe-file-label span {
  font-size: 14px;
}

/* ===================================================
   Insights page – smaller fonts & tighter logs
   =================================================== */

.insights-shell {
  margin-top: 16px;
  font-size: 0.85rem;
  line-height: 1.25rem;
}

.insights-summary {
  font-size: 0.85rem;
  line-height: 1.25rem;
  margin-bottom: 8px;
}

.insights-log {
  font-size: 0.80rem;
  line-height: 1.20rem;
}

.insights-log-line {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(242, 199, 105, 0.18);
}


/* Engine status pill under Hybrid Engine & Algorithm */
.engine-status-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.engine-status-label {
  opacity: 0.86;
}
.engine-status-pill {
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.80rem;
  border: 1px solid rgba(242, 199, 105, 0.55);
  background: rgba(0, 0, 0, 0.65);
  color: var(--gold);
}
.engine-status-pill-hw {
  background: rgba(46, 204, 113, 0.18);
  color: #2ecc71;
}
.engine-status-pill-em {
  background: rgba(243, 156, 18, 0.18);
  color: #f39c12;
}
.engine-status-pill-off {
  background: rgba(192, 57, 43, 0.18);
  color: #e74c3c;
}

/* Hybrid results <pre> styling to preserve multi-line layout */
.results-pre {
  white-space: pre-wrap;
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-size: 0.9rem;
  line-height: 1.4;
}


.hidden { display: none !important; }


.safe-toggle-hint {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-left: 0.35rem;
}


.music-heart-wave-container {
  margin-top: 0.75rem;
  padding: 0.5rem 0;
}

#musicHeartWave {
  width: 100%;
  max-width: 420px;
  height: 80px;
  display: block;
  border-radius: var(--radius-sm);
  background: #050509;
}


.music-heart-view-toggle {
  margin-top: 0.25rem;
}

.music-heart-wave-note {
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 0.35rem;
  max-width: 420px;
}

.music-heart-layers {
  margin-top: 0.5rem;
  max-width: 420px;
}

.music-heart-layer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.music-heart-layer-label {
  flex: 0 0 70px;
  font-size: 0.8rem;
  opacity: 0.85;
}

.music-heart-layer-bar {
  flex: 1;
  height: 0.6rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #f5c95a, #f0e6c2);
}


.music-heart-mini {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(5, 5, 9, 0.9);
  border: 1px solid rgba(245, 201, 90, 0.35);
}

.music-heart-mini-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.music-heart-mini-summary {
  font-size: 0.78rem;
  margin-top: 0.25rem;
  opacity: 0.85;
}

.music-heart-mini-note {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.25rem;
}


.music-heart-share {
  margin-top: 0.75rem;
  padding-top: 0.25rem;
}

.music-heart-share-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.music-heart-share-note {
  font-size: 0.75rem;
  opacity: 0.75;
  margin-top: 0.3rem;
  max-width: 420px;
}


.music-heart-library-tabs {
  margin-top: 0.75rem;
}

.music-heart-library-panel {
  margin-top: 0.35rem;
}


.music-heart-library-saved {
  margin-top: 0.75rem;
}

.music-heart-saved-list {
  margin-top: 0.35rem;
}

.music-heart-saved-ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.music-heart-saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.music-heart-saved-label {
  font-size: 0.8rem;
  opacity: 0.9;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-heart-saved-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}


.music-heart-saved-icon {
  margin-right: 0.25rem;
}


/* Align Music Heart AI control labels: label text left, inputs aligned after fixed column */
.music-heart-label {
  display: inline-block;
  min-width: 240px;
  text-align: left;
  margin-right: 0.75rem;
}


/* Ledger grid stacked vertically */
.ledger-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

/* Transparent ledger data tables with fixed column layout */
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th,
.data-table td {
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledger-scale { font-size:70%; }

/* Plan badge pill in header */
.nav-plan-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  border: 1px solid rgba(242, 199, 105, 0.5);
  font-size: 11px;
  margin-left: 8px;
  white-space: nowrap;
}

.nav-plan-pill.is-free {
  opacity: 0.75;
}

.nav-plan-pill.is-paid {
  opacity: 1;
  font-weight: 500;
}


/* ==================================================
   HOMEPAGE – Abqeri Alef v1.0
   (Hero, sections, module grid, CTA)
   ================================================== */

/* Generic section shell used by homepage blocks */
.section {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: var(--bg-elevated);
}

/* Hero block at top of homepage */
.hero {
  margin-top: 2px;
  padding: 6px 20px;
  border-radius: var(--radius-lg);
  border: 0px solid var(--gold-border);
  background: radial-gradient(circle at top left, #1a1205 0%, #050505 55%, #000000 100%);
  display: flex;
  gap: 2px;
  align-items: flex-start;
  flex-direction: column; 
}

.hero-content h2 {
  font-size: 16px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
}

.hero-content h3 {
  font-size: 14px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
}

.hero-content {
  flex: 1.4;
}

.hero-content p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  max-width: 100%;
}

.hero-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* content */
.content {
  margin-top: 4px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: radial-gradient(circle at top left, #1a1205 0%, #050505 55%, #000000 100%);
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  position: relative;
}

.content-h2 h2 {
  font-size: 16px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
  position: absolute;
}

.content-h3 h3 {
  font-size: 14px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
  position: absolute;
}

.content-h4 h4 {
  font-size: 12px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
  position: absolute;
}

.content-content {
  flex: 1.4;
}

.content-div,
.content-dev {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 2px;
  flex-wrap: wrap;
  gap: 10px;
}

.content-p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  max-width: 640px;
  z-index: 1;
}

.content-div:first-of-type {
    z-index: 1;
}

.content-dev {
    z-index: 2;
}

.content-div:last-of-type {
    z-index: 3;
}


.content-actions {
  margin-top: 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  z-index: 2;
}


/* Map homepage buttons to existing button styling */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0px 0px 0px;
  padding: 12px;
  height: 20px;
  width: 250px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* Primary = same as .button-primary but slightly wider */
.btn-primary {
  background: #f2c769;
  color: #ffffff;
}

.btn-primary:hover {
  background: #d7a943;
  border-color: var(--gold);
  color: #ffffff;
}

/* Secondary / ghost */
.btn-secondary,
.btn-ghost {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold-border);
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: rgba(242, 199, 105, 0.1);
  border-color: var(--gold);
}

.cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0px 0px 0px;
  padding: 14px;
  height: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #d7a943;
  border-color: var(--gold);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  cursor: pointer;
  text-decoration: none;
}

/* Right side of hero with orbit label */
.hero-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-orbit {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(242, 199, 105, 0.45);
  padding: 8px 14px;
  background: rgba(5, 5, 5, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-orbit .orbit-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold-soft);
}

.hero-note {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 100%;
}

/* "What is Abqeri" section */
.what-is h3 {
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 6px;
  font-style: italic;
}

.what-is p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 4px;
}

/* Modules grid section */
.modules h3 {
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 10px;
  font-style: italic;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.module-card {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(123, 85, 21, 0.85);
  background: #050505;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.module-card h4 {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 2px;
}

.module-card p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--gold);
}

.module-note {
  font-size: 11px;
  color: var(--text-muted);
}

.module-list {
  margin-left: 16px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gold);
}

.module-list li + li {
  margin-top: 2px;
}

.card-link {
  margin-top: 4px;
  font-size: 11px;
  color: var(--gold-soft);
  text-decoration: none;
}

.card-link:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* Mission strip */
.mission-strip {
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: linear-gradient(90deg, #050505 0%, #0b0b0b 40%, #050505 100%);
}

.mission-content h3 {
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 6px;
  font-style: italic;
}

.content p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 2px;
}

/* CTA section */
.cta h3 {
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 6px;
  font-style: italic;
}

.cta p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  max-width: 640px;
}

.cta-buttons {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Responsive tweaks for homepage */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
  }

  .hero-side {
    width: 100%;
  }

  .modules-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .content h2 {
    font-size: 16px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

@media (max-width: 600px) {
  .content h3 {
    font-size: 14px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

@media (max-width: 600px) {
  .hero-content h2 {
    font-size: 16px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

@media (max-width: 600px) {
  .hero-content h3 {
    font-size: 14px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

/* Nav language dropdown */
.nav-lang select {
  min-width: 80px;
  height: 24px;
  font-size: 11px;
  font-style: normal;
  background: #050505;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  padding: 2px 6px;
}
.nav-lang select:focus {
  outline: none;
  border-color: var(--gold);
}





/* Universe Simulator layout - consistent with Abqeri styling */
.universe-shell {
  margin-top: 14px;
}

.universe-main {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.universe-left,
.universe-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.universe-card {
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: rgba(4, 4, 4, 0.9);
}

.universe-card .card-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  color: var(--gold);
}

.universe-scenario-description {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.universe-params .param-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.universe-params label {
  font-size: 12px;
  color: var(--text-muted);
}

.shots-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
}

.universe-run-button {
  margin-top: 8px;
}

.universe-engine-status {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.engine-meta {
  margin-top: 2px;
}

.explanation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.tab-btn {
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid var(--gold-border);
  background: transparent;
  color: var(--gold);
  font-size: 11px;
  cursor: pointer;
}

.tab-btn.active {
  background: rgba(242, 199, 105, 0.1);
}

.explanation-content {
  font-size: 12px;
  line-height: 1.5;
  max-height: 220px;
  overflow-y: auto;
  color: var(--text-muted);
}

.universe-viz-card {
  min-height: 260px;
}

#universeCanvas {
  width: 100%;
  height: 240px;
  border-radius: var(--radius-md);
  background: #050505;
  display: block;
}

.viz-legend {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.universe-console {
  width: 100%;
  min-height: 160px;
  max-height: 260px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 199, 105, 0.4);
  background: #050505;
  color: var(--gold);
  padding: 8px 10px;
  font-size: 11px;
  font-family: "Fira Code", "Consolas", monospace;
  resize: vertical;
  box-sizing: border-box;
  white-space: pre-wrap;
}

/* Responsive */
@media (max-width: 900px) {
  .universe-main {
    flex-direction: column;
  }
  #universeCanvas {
    height: 200px;
  }
}

.dev {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 199, 105, 0.4);
  flex-wrap: wrap;
  gap: 10px;
}

.dev-h2 {
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
  color: var(--gold);
}

.dev-h3 {
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-top: 12px;
  margin-bottom: 2px;
  color: var(--gold);
}

.dev-h4 {
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
  color: var(--gold);
}

.dev-p {
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-top: 10px;
  margin-bottom: 2px;
  color: var(--gold);
  background-color: black;
}


.ul {
  list-style-type: square;
  font-size: 12px;
  font-style: italic;
  color: var(--gold);
  margin: 2px 2px 2px 14px;
  flex-wrap: wrap;
  gap: 10px;
}


.tr {
  list-style-type: square;
  font-size: 12	px;
  font-style: italic;
  color: var(--gold);
  margin: 2px 2px 2px 14px;
  flex-wrap: wrap;
  gap: 10px;
  text-align: left;
  width: 30%;
}

.td{
  list-style-type: square;
  font-size: 12	px;
  font-style: italic;
  color: var(--gold);
  margin: 2px 2px 2px 14px;
  flex-wrap: wrap;
  gap: 10px;
  text-align: left;
  width: 30%;
}






/* Transparent Ledger */
    .ledger-layout {
      display: grid;
      grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1.1fr);
      gap: 16px;
      margin-top: 10px;
    }
    @media (max-width: 900px) {
      .ledger-layout {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .card {
      border-radius: var(--radius-md);
      border: 1px solid var(--gold-border);
      background: #060606;
      padding: 10px 11px;
    }
    .card-title {
      font-size: 13px;
      color: var(--gold);
      margin-bottom: 6px;
    }
    .card-subtitle {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
    }
    .summary-item-label {
      font-size: 10px;
      color: var(--text-muted);
    }
    .summary-item-value {
      font-size: 13px;
      color: var(--gold);
    }
    .summary-item-pill {
      font-size: 10px;
      color: var(--text-muted);
    }
    .ledger-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
      margin-top: 8px;
    }
    .ledger-table th,
    .ledger-table td {
      border-bottom: 1px solid rgba(242,199,105,0.2);
      padding: 4px 3px;
      text-align: left;
    }
    .ledger-table th {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
    }
    .badge {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 999px;
      border: 1px solid rgba(242,199,105,0.6);
      font-size: 10px;
      color: var(--gold);
    }
    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      font-size: 11px;
      margin-bottom: 6px;
    }
    .filter-row select,
    .filter-row input[type="number"],
    .filter-row input[type="email"] {
      background: #050505;
      border-radius: var(--radius-md);
      border: 1px solid rgba(242,199,105,0.5);
      padding: 2px 6px;
      color: var(--gold);
      font-size: 11px;
    }
    .mini-label {
      font-size: 10px;
      color: var(--text-muted);
    }
    .pill-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 3px;
      background: #36c46b;
    }
    .pill-dot.sandbox {
      background: #3b82f6;
    }
    .email-note {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 4px;
    }
    #daily-chart {
      width: 100%;
      height: 180px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(242,199,105,0.3);
      background: #050505;
    }



/* Products */
    .pricing-hero {
      font-size: 12px;
      margin-bottom: 4px;
    }
    .tagline {
      font-size: 12px;
      letter-spacing: 0.12em;
      color: rgba(212, 175, 55, 0.9);
      margin-bottom: 4px;
    }
    .pricing-hero h1 {
      margin: 0 0 8px;
      font-size: 12px;
    }
    .pricing-hero p {
      margin: 6px 0;
      font-size: 12px;
      max-width: 740px;
      line-height: 1.5;
    }
    .pill-row {
      margin-top: 10px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .pill {
      border-radius: 2px;
      padding: 4px 10px;
      border: 1px solid rgba(212, 175, 55, 0.6);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      opacity: 0.9;
    }
    .info-legend {
      margin: 12px 0 1.5rem;
      font-size: 12px;
      padding: 12px 12px;
      border: 1px solid rgba(212, 175, 55, 0.4);
      border-radius: 2px;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      gap: 0.75rem;
    }
    .legend-icon {
      width: 20px;
      height: 20px;
      min-width: 20px;
      border-radius: 999px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      opacity: 0.9;
    }
    .legend-text {
      font-size: 12px;
      font-style: italic;
      line-height: 1.4;
      opacity: 0.95;
    }
    .legend-text a {
      font-size: 12px;
      color: #d4af37;
      text-decoration: underline;
    }
    .section-heading {
      font-size: 12px;
      font-style: italic;
      margin: 12px 0 4px;
    }
    .section-sub {
      font-size: 12px;
       font-style: italic;
     opacity: 0.9;
      margin-bottom: 10px;
    }
    .hardware-notice {
      font-size: 11px;
      font-style: italic;
      padding: 10px 12px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: rgba(0, 0, 0, 0.55);
      max-width: 780px;
    }
    .hardware-notice strong {
      color: #d4af37;
    }
    .products-layout {
      margin-top: 14px;
      display: flex;
      gap: 18px;
      align-items: flex-start;
    }
    .products-column {
      flex: 2;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .plan-card {
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      padding: 12px;
      background: radial-gradient(circle at top left, rgba(212, 175, 55, 0.16), rgba(0, 0, 0, 0.9));
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
    }
    .plan-card-title {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 6px;
    }
    .plan-card-title span:first-child {
      font-size: 14px;
      font-weight: 600;
    }
    .product-price {
      font-size: 12px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .price-info {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-left: 6px;
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      font-size: 10px;
      font-weight: 600;
      cursor: help;
      opacity: 0.9;
      position: relative;
      animation: goldPulse 2.4s ease-in-out infinite alternate;
    }
    .price-info::before {
      content: "i";
      line-height: 1;
    }
    .price-info::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 50%;
      bottom: -4px;
      transform: translateX(-50%) translateY(8px);
      background: rgba(0, 0, 0, 0.96);
      border: 1px solid rgba(212, 175, 55, 0.9);
      border-radius: 2px;
      padding: 6px 8px;
      font-size: 11px;
      width: 240px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s, transform 0.15s;
      z-index: 20;
    }
    .price-info:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(2px);
    }
    @keyframes goldPulse {
      from { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.0); }
      to   { box-shadow: 0 0 8px 2px rgba(212, 175, 55, 0.7); }
    }
    .upgrade-badge {
      display: inline-block;
      margin-top: 4px;
      padding: 2px 8px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      opacity: 0.9;
    }
    .product-actions {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .product-qty {
      font-size: 11px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .product-qty input[type="number"] {
      width: 48px;
      padding: 2px 4px;
      border-radius: 2px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.7);
      color: #f7f7f7;
      font-size: 11px;
    }
    .button-primary {
      background: linear-gradient(90deg, #d4af37, #f2e08b);
      border: none;
      color: #ffffff;
      padding: 7px 13px;
      font-size: 12px;
      border-radius: 2px;
      cursor: pointer;
      letter-spacing: 0.08em;
      font-weight: 600;
    }
    .button-primary:hover {
      filter: brightness(1.05);
      color: #ffffff;
}
    .cart-panel {
      flex: 1;
      max-width: 340px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: rgba(0, 0, 0, 0.75);
      padding: 14px;
      position: sticky;
      top: 20px;
    }
    .cart-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .cart-items {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 2px;
      min-height: 60px;
      padding: 8px 10px;
    }
    .cart-empty {
      opacity: 0.65;
      font-size: 12px;
    }
    .cart-item {
      display: flex;
      justify-content: space-between;
      padding: 4px 0;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
      font-size: 12px;
    }
    .cart-item:last-child {
      border-bottom: none;
    }
    .cart-summary {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      font-size: 12px;
      font-weight: 600;
    }
    .impact-summary {
      padding: 0.7rem;
      margin-top: 12px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.3);
      background: rgba(0, 0, 0, 0.4);
    }
    .impact-label {
      font-size: 12px;
      margin-bottom: 12px;
      opacity: 0.85;
    }
    .impact-value {
      font-size: 12px;
      font-weight: 500;
    }
    .cart-note {
      margin-top: 8px;
      font-size: 11px;
      opacity: 0.85;
    }
    footer {
      padding: 10px 24px;
      font-size: 11px;
      border-top: 1px solid rgba(212, 175, 55, 0.3);
      opacity: 0.8;
      display: flex;
      justify-content: space-between;
    }
    footer a {
      color: #d4af37;
      text-decoration: none;
      margin-right: 10px;
    }
    footer a:hover {
      text-decoration: underline;
    }
    .faq-list {
      margin-top: 12px;
      max-width: 820px;
    }
    .faq-item {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding: 0.55rem 0;
    }
    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-size: 12px;
    }
    .faq-answer {
      display: none;
      margin-top: 0.25rem;
      font-size: 12px;
      opacity: 0.9;
    }
    .faq-item.open .faq-answer {
      display: block;
    }
    .faq-toggle-icon {
      font-size: 12px;
      opacity: 0.8;
    }




/* Transparent Pricing */
    .transparent-container {
      padding: 2rem;
      max-width: 1000px;
      margin: auto;
    }

    .transparent-container h1 {
      margin-bottom: 12px;
    }

    .intro {
      margin-bottom: 12px;
      font-size: 12px;
    }

    .transparent-section {
      border: 1px solid rgba(212, 175, 55, 0.4);
      border-radius: 2px;
      padding: 1.5rem;
      background: rgba(0, 0, 0, 0.4);
      margin-bottom: 2rem;
    }

    .transparent-section h2 {
      margin-bottom: 0.5rem;
    }

    .transparent-table {
      width: 100%;
      margin-top: 2px;
      border-collapse: collapse;
    }

    .transparent-table th,
    .transparent-table td {
      padding: 2px 2px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 12px;
    }

    .note {
      margin-top: 12px;
      font-size: 11px;
      opacity: 0.9;
    }

    .slogan {
      margin-top: 12px;
      font-size: 12px;
      font-weight: 600;
    }



/" Order Success */
    .card {
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: rgba(0, 0, 0, 0.55);
      padding: 1.2rem 1.4rem;
      margin-top: 1.2rem;
      font-size: 12px;
    }
    .status-pill {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0.4rem;
    }
    .order-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px 18px;
      margin-top: 0.6rem;
      font-size: 12rem;
    }
    .order-grid dt {
      font-weight: 600;
      opacity: 0.9;
    }
    .order-grid dd {
      margin: 2px 0 0.6rem;
      opacity: 0.95;
    }
    .items-list {
      margin-top: 0.8rem;
      font-size: 12rem;
    }
    .items-list ul {
      margin: 0.3rem 0 0;
      padding-left: 1rem;
    }
    .impact-note {
      margin-top: 0.9rem;
      font-size: 12rem;
      opacity: 0.95;
    }
    .impact-note strong {
      color: #d4af37;
    }
    .small {
      font-size: 0.8rem;
      opacity: 0.85;
      margin-top: 0.8rem;
    }
    .button-row {
      margin-top: 1.2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

.plan {
  margin-bottom: 16px;
}





.image-row {
  display: flex;
  gap: 20px;       /* space between images */
  justify-content: center; 
  align-items: center;
}

.image-row img {
  height: 300px;
  max-width: 400px;
}


/* ===== MERGED FROM js/style_gold.css ===== */
/* ===============================
   Dual Theme Variable System
   =============================== */
:root {
  --bg-color: #0b0b0b;
  --text-color: #e8e8e8;
  --accent-color: #cfa844;
  --border-color: #cfa844;
}

/* Light Theme — GOLD Accents */
body.theme-light-gold {
  --bg-color: #ffffff;
  --text-color: #000000;
  --accent-color: #cfa844;
  --border-color: #cfa844;
}

/* Light Theme — BLACK Accents */
body.theme-light-black {
  --bg-color: #ffffff;
  --text-color: #000000;
  --accent-color: #000000;
  --border-color: #cccccc;
}

/* Variable Application */
body {
  background: var(--bg-color);
  color: var(--text-color);
}


/* Original CSS */
/* ===================================================================
   Abqeri Alef v1 – Global Styles
   =================================================================== */

:root {
  --bg: #050505;
  --bg-elevated: #0b0b0b;
  --gold: #f2c769;
  --gold-soft: #d7a943;
  --gold-border: #7b5515; /* very dark gold */
  --text: #f7e7b0;
  --text-muted: #c7aa6b;
  --danger: #ff4c4c;

  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
}

/* -------------------------------
   Reset / Base
---------------------------------- */

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

html, body {
  height: 100%;
}

body {
  font-family: Verdana, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--gold);
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
  text-decoration: underline;
  color: var(--gold-soft);
  opacity: 1;
}

em,
.italic {
  font-style: italic;
}

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

/* -------------------------------
   Layout Shell
---------------------------------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -------------------------------
   Header / Brand / Nav
---------------------------------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  border-bottom: 1px solid var(--gold-border);
  background: #050505;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

.brand-title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: var(--gold);
  font-style: italic;
}

nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 12px;
  font-style: italic;
}

.nav-item {
  position: relative;
  padding-bottom: 2px;
}

.nav-item a {
  color: var(--gold);
}

.nav-item a:hover {
  color: var(--gold-soft);
}

.nav-item.active a {
  font-weight: 600;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--gold-border);
  border-radius: var(--radius-sm);
}

/* -------------------------------
   Main Content Shell
---------------------------------- */

main {
  flex: 1;
  padding: 24px 40px 10px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-title {
  font-size: 18px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 4px;
}

/* Subtabs */

.subtabs {
  font-size: 12px;
  display: flex;
  gap: 24px;
  font-style: italic;
  margin-bottom: 10px;
}

.subtab {
  position: relative;
  padding-bottom: 4px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.subtab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold-border);
  border-radius: var(--radius-sm);
}

.subtab:hover {
  color: var(--gold-soft);
  opacity: 1;
}

/* Tab panels */

.tab-panels {
  display: block;
}

.tab-panel {
  margin-top: 4px;
}

/* -------------------------------
   Global Inputs / Selects / Buttons / Textareas
---------------------------------- */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
button {
  height: 28px;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  background: #050505;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  padding: 4px 6px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input[type="text"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
  border-color: var(--gold-soft);
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
}

/* Primary button */

.button-primary {
  border: 1px solid var(--gold-border);
  background: #f2c769;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button-primary:hover {
  background: #d7a943;
  border-color: var(--gold);
  color: #ffffff;
}

.button-primary:active {
  background: #c29135;
  color: #ffffff;
}

/* -------------------------------
   Unified Computing – Workbench Layout
---------------------------------- */

.workbench-shell {
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  background: var(--bg-elevated);
}

.workbench-main {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* Left side: tabs + code editors + plan/env/notes */

.code-tabs-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Code pane – no outer border, only textarea bg */

.code-pane {
  flex: 1;
  background: transparent;
  border-radius: var(--radius-md);
  padding: 0;
}

/* Code editor textareas (no border) */

.code-editor {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  overflow: hidden;
  font-family: "Courier New", Consolas, Menlo, monospace;
  font-size: 12px;
  background: #050505;
  color: var(--gold);
  border-radius: var(--radius-md);
  border: none;
  padding: 8px 10px;
}

/* Right side: compact Hybrid Engine block */

.engine-shell {
  flex: 0 0 260px;
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  padding: 8px 9px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.engine-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}

.engine-field-run {
  margin-top: 4px;
}

.engine-field input,
.engine-field select,
.engine-field button {
  font-size: 12px;
  min-width: 0;
}

.engine-legend-title {
  margin-top: 4px;
}

.engine-shell .mini-legend {
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
}

/* Info icons */

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  font-size: 10px;
  cursor: help;
  opacity: 0.75;
  line-height: 1;
}

.info-icon:hover {
  opacity: 1;
}

/* Results pane */

.results-shell {
  margin-top: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: var(--bg-elevated);
  padding: 10px 14px 12px;
}

.results-title {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 6px;
}

.results-body {
  min-height: 40px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Plan / Env / Notes textareas */

.plan-notes,
.env-notes,
.notes-notes {
  margin-top: 6px;
  width: 100%;
  min-height: 80px;
  resize: vertical;
}

/* -------------------------------
   Performance panel
---------------------------------- */

.perf-pane {
  border-radius: var(--radius-md);
  border: 1px solid var(--gold-border);
  padding: 12px 14px;
  background: #050505;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perf-title {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 4px;
}

.perf-metric {
  margin-top: 4px;
}

.perf-label {
  font-size: 11px;
  color: var(--gold);
  margin-bottom: 3px;
}

.perf-label .perf-value {
  font-weight: 600;
}

.perf-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: var(--radius-sm);
  background: #151515;
  overflow: hidden;
}

.perf-bar-fill {
  height: 100%;
  width: 70%;
  background: linear-gradient(to right, #2ecc71, #f1c40f, #e67e22, #e74c3c);
}

/* -------------------------------
   Footer
---------------------------------- */

footer {
  border-top: 1px solid var(--gold-border);
  padding: 10px 10px 18px;
  text-align: center;
  font-size: 10px;
  color: var(--gold);
  font-style: italic;
  line-height: 1.4;
}

/* -------------------------------
   Basic Responsive Tweak
---------------------------------- */

@media (max-width: 900px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  nav {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  main {
    padding: 18px 16px 10px 16px;
  }

  .workbench-main {
    flex-direction: column;
  }

  .engine-shell {
    flex: 1;
  }

  .chat-shell {
    padding: 16px 14px;
  }
}


/* Safe Mind AI layout */
.safe-workbench-shell {
  margin-top: 14px;
}

.safe-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.safe-column {
  min-width: 0;
}

.safe-history {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 199, 105, 0.35);
  background: #050505;
  color: var(--gold);
  padding: 8px 10px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  box-sizing: border-box;
}

/* prompt row */
.safe-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}



@media (max-width: 720px) {
  .safe-input-row {
    align-items: flex-start;
  }
  
}

.safe-prompt {
  width: 100%;
  min-height: 32px;
  resize: vertical;
  overflow-y: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 199, 105, 0.4);
  background: #050505;
  color: var(--gold);
  padding: 8px 10px;
  font-size: 14px;
  box-sizing: border-box;
}

.safe-prompt::placeholder {
  color: var(--text-muted);
}

/* focus glow */
.safe-prompt:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(242, 199, 105, 0.6), 0 0 12px rgba(242, 199, 105, 0.25);
}

/* mic + attach */
.safe-mic {
  font-size: 12px;
}








/* actions row */
.safe-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.safe-actions-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.safe-actions-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.safe-status {
  font-size: 12px;
  color: var(--text-muted);
}

/* file list */
.safe-file-list {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  max-height: 120px;
  overflow: auto;
  white-space: normal;
}

/* mini note & card shrink */
.safe-main-card .safe-mini-note,
.safe-main-card .safe-status {
  font-size: 12px;
}

/* pulse animation */
@keyframes safeHistoryPulse {
  0% { box-shadow: 0 0 0 0 rgba(242, 199, 105, 0.0); }
  40% { box-shadow: 0 0 0 1px rgba(242, 199, 105, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(242, 199, 105, 0.0); }
}

.safe-history-pulse {
  animation: safeHistoryPulse 0.26s ease-out;
}



/* Make attach chip (📎) visually match secondary buttons */




.safe-file-label span {
  line-height: 1;
}

/* File input stays invisible but clickable across the label */



.button-secondary {
border: 1px solid var(--gold-border);
  background: #f2c769;
  color: #1a1205;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease;
}



/* Safe Mind AI attach: use standard button visuals via button-secondary */
.safe-file-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.safe-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}


.safe-input-side-horiz {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}


/* ===================================================
   Safe Mind AI – mic + attach button styling
   =================================================== */

.safe-file-label,
.safe-mic {
  background-color: #000000;
  color: var(--gold);
  border-color: transparent;
}

.safe-file-label span {
  font-size: 14px;
}

/* ===================================================
   Insights page – smaller fonts & tighter logs
   =================================================== */

.insights-shell {
  margin-top: 16px;
  font-size: 0.85rem;
  line-height: 1.25rem;
}

.insights-summary {
  font-size: 0.85rem;
  line-height: 1.25rem;
  margin-bottom: 8px;
}

.insights-log {
  font-size: 0.80rem;
  line-height: 1.20rem;
}

.insights-log-line {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(242, 199, 105, 0.18);
}


/* Engine status pill under Hybrid Engine & Algorithm */
.engine-status-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.engine-status-label {
  opacity: 0.86;
}
.engine-status-pill {
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.80rem;
  border: 1px solid rgba(242, 199, 105, 0.55);
  background: rgba(0, 0, 0, 0.65);
  color: var(--gold);
}
.engine-status-pill-hw {
  background: rgba(46, 204, 113, 0.18);
  color: #2ecc71;
}
.engine-status-pill-em {
  background: rgba(243, 156, 18, 0.18);
  color: #f39c12;
}
.engine-status-pill-off {
  background: rgba(192, 57, 43, 0.18);
  color: #e74c3c;
}

/* Hybrid results <pre> styling to preserve multi-line layout */
.results-pre {
  white-space: pre-wrap;
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-size: 0.9rem;
  line-height: 1.4;
}


.hidden { display: none !important; }


.safe-toggle-hint {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-left: 0.35rem;
}


.music-heart-wave-container {
  margin-top: 0.75rem;
  padding: 0.5rem 0;
}

#musicHeartWave {
  width: 100%;
  max-width: 420px;
  height: 80px;
  display: block;
  border-radius: var(--radius-sm);
  background: #050509;
}


.music-heart-view-toggle {
  margin-top: 0.25rem;
}

.music-heart-wave-note {
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 0.35rem;
  max-width: 420px;
}

.music-heart-layers {
  margin-top: 0.5rem;
  max-width: 420px;
}

.music-heart-layer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.music-heart-layer-label {
  flex: 0 0 70px;
  font-size: 0.8rem;
  opacity: 0.85;
}

.music-heart-layer-bar {
  flex: 1;
  height: 0.6rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #f5c95a, #f0e6c2);
}


.music-heart-mini {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(5, 5, 9, 0.9);
  border: 1px solid rgba(245, 201, 90, 0.35);
}

.music-heart-mini-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.music-heart-mini-summary {
  font-size: 0.78rem;
  margin-top: 0.25rem;
  opacity: 0.85;
}

.music-heart-mini-note {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.25rem;
}


.music-heart-share {
  margin-top: 0.75rem;
  padding-top: 0.25rem;
}

.music-heart-share-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.music-heart-share-note {
  font-size: 0.75rem;
  opacity: 0.75;
  margin-top: 0.3rem;
  max-width: 420px;
}


.music-heart-library-tabs {
  margin-top: 0.75rem;
}

.music-heart-library-panel {
  margin-top: 0.35rem;
}


.music-heart-library-saved {
  margin-top: 0.75rem;
}

.music-heart-saved-list {
  margin-top: 0.35rem;
}

.music-heart-saved-ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.music-heart-saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.music-heart-saved-label {
  font-size: 0.8rem;
  opacity: 0.9;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-heart-saved-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}


.music-heart-saved-icon {
  margin-right: 0.25rem;
}


/* Align Music Heart AI control labels: label text left, inputs aligned after fixed column */
.music-heart-label {
  display: inline-block;
  min-width: 240px;
  text-align: left;
  margin-right: 0.75rem;
}


/* Ledger grid stacked vertically */
.ledger-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

/* Transparent ledger data tables with fixed column layout */
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th,
.data-table td {
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledger-scale { font-size:70%; }

/* Plan badge pill in header */
.nav-plan-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  border: 1px solid rgba(242, 199, 105, 0.5);
  font-size: 11px;
  margin-left: 8px;
  white-space: nowrap;
}

.nav-plan-pill.is-free {
  opacity: 0.75;
}

.nav-plan-pill.is-paid {
  opacity: 1;
  font-weight: 500;
}


/* ==================================================
   HOMEPAGE – Abqeri Alef v1.0
   (Hero, sections, module grid, CTA)
   ================================================== */

/* Generic section shell used by homepage blocks */
.section {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: var(--bg-elevated);
}

/* Hero block at top of homepage */
.hero {
  margin-top: 2px;
  padding: 6px 20px;
  border-radius: var(--radius-lg);
  border: 0px solid var(--gold-border);
  background: radial-gradient(circle at top left, #1a1205 0%, #050505 55%, #000000 100%);
  display: flex;
  gap: 2px;
  align-items: flex-start;
  flex-direction: column; 
}

.hero-content h2 {
  font-size: 16px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
}

.hero-content h3 {
  font-size: 14px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
}

.hero-content {
  flex: 1.4;
}

.hero-content p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  max-width: 100%;
}

.hero-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* content */
.content {
  margin-top: 4px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: radial-gradient(circle at top left, #1a1205 0%, #050505 55%, #000000 100%);
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  position: relative;
}

.content-h2 h2 {
  font-size: 16px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
  position: absolute;
}

.content-h3 h3 {
  font-size: 14px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
  position: absolute;
}

.content-h4 h4 {
  font-size: 12px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 8px;
  position: absolute;
}

.content-content {
  flex: 1.4;
}

.content-div,
.content-dev {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 2px;
  flex-wrap: wrap;
  gap: 10px;
}

.content-p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  max-width: 640px;
  z-index: 1;
}

.content-div:first-of-type {
    z-index: 1;
}

.content-dev {
    z-index: 2;
}

.content-div:last-of-type {
    z-index: 3;
}


.content-actions {
  margin-top: 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  z-index: 2;
}


/* Map homepage buttons to existing button styling */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0px 0px 0px;
  padding: 12px;
  height: 20px;
  width: 250px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* Primary = same as .button-primary but slightly wider */
.btn-primary {
  background: #f2c769;
  color: #ffffff;
}

.btn-primary:hover {
  background: #d7a943;
  border-color: var(--gold);
  color: #ffffff;
}

/* Secondary / ghost */
.btn-secondary,
.btn-ghost {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold-border);
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: rgba(242, 199, 105, 0.1);
  border-color: var(--gold);
}

.cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0px 0px 0px;
  padding: 14px;
  height: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #d7a943;
  border-color: var(--gold);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  cursor: pointer;
  text-decoration: none;
}

/* Right side of hero with orbit label */
.hero-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-orbit {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(242, 199, 105, 0.45);
  padding: 8px 14px;
  background: rgba(5, 5, 5, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-orbit .orbit-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold-soft);
}

.hero-note {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 100%;
}

/* "What is Abqeri" section */
.what-is h3 {
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 6px;
  font-style: italic;
}

.what-is p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 4px;
}

/* Modules grid section */
.modules h3 {
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 10px;
  font-style: italic;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.module-card {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(123, 85, 21, 0.85);
  background: #050505;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.module-card h4 {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 2px;
}

.module-card p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--gold);
}

.module-note {
  font-size: 11px;
  color: var(--text-muted);
}

.module-list {
  margin-left: 16px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gold);
}

.module-list li + li {
  margin-top: 2px;
}

.card-link {
  margin-top: 4px;
  font-size: 11px;
  color: var(--gold-soft);
  text-decoration: none;
}

.card-link:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* Mission strip */
.mission-strip {
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-border);
  background: linear-gradient(90deg, #050505 0%, #0b0b0b 40%, #050505 100%);
}

.mission-content h3 {
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 6px;
  font-style: italic;
}

.content p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 2px;
}

/* CTA section */
.cta h3 {
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 6px;
  font-style: italic;
}

.cta p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  max-width: 640px;
}

.cta-buttons {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Responsive tweaks for homepage */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
  }

  .hero-side {
    width: 100%;
  }

  .modules-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .content h2 {
    font-size: 16px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

@media (max-width: 600px) {
  .content h3 {
    font-size: 14px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

@media (max-width: 600px) {
  .hero-content h2 {
    font-size: 16px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

@media (max-width: 600px) {
  .hero-content h3 {
    font-size: 14px;
  }

  .what-is,
  .modules,
  .mission-strip,
  .cta {
    padding: 12px 12px;
  } 
}

/* Nav language dropdown */
.nav-lang select {
  min-width: 80px;
  height: 24px;
  font-size: 11px;
  font-style: normal;
  background: #050505;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  padding: 2px 6px;
}
.nav-lang select:focus {
  outline: none;
  border-color: var(--gold);
}





/* Universe Simulator layout - consistent with Abqeri styling */
.universe-shell {
  margin-top: 14px;
}

.universe-main {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.universe-left,
.universe-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.universe-card {
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: rgba(4, 4, 4, 0.9);
}

.universe-card .card-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  color: var(--gold);
}

.universe-scenario-description {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.universe-params .param-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.universe-params label {
  font-size: 12px;
  color: var(--text-muted);
}

.shots-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
}

.universe-run-button {
  margin-top: 8px;
}

.universe-engine-status {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.engine-meta {
  margin-top: 2px;
}

.explanation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.tab-btn {
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid var(--gold-border);
  background: transparent;
  color: var(--gold);
  font-size: 11px;
  cursor: pointer;
}

.tab-btn.active {
  background: rgba(242, 199, 105, 0.1);
}

.explanation-content {
  font-size: 12px;
  line-height: 1.5;
  max-height: 220px;
  overflow-y: auto;
  color: var(--text-muted);
}

.universe-viz-card {
  min-height: 260px;
}

#universeCanvas {
  width: 100%;
  height: 240px;
  border-radius: var(--radius-md);
  background: #050505;
  display: block;
}

.viz-legend {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.universe-console {
  width: 100%;
  min-height: 160px;
  max-height: 260px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 199, 105, 0.4);
  background: #050505;
  color: var(--gold);
  padding: 8px 10px;
  font-size: 11px;
  font-family: "Fira Code", "Consolas", monospace;
  resize: vertical;
  box-sizing: border-box;
  white-space: pre-wrap;
}

/* Responsive */
@media (max-width: 900px) {
  .universe-main {
    flex-direction: column;
  }
  #universeCanvas {
    height: 200px;
  }
}

.dev {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 199, 105, 0.4);
  flex-wrap: wrap;
  gap: 10px;
}

.dev-h2 {
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
  color: var(--gold);
}

.dev-h3 {
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-top: 12px;
  margin-bottom: 2px;
  color: var(--gold);
}

.dev-h4 {
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
  color: var(--gold);
}

.dev-p {
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-top: 10px;
  margin-bottom: 2px;
  color: var(--gold);
  background-color: black;
}


.ul {
  list-style-type: square;
  font-size: 12px;
  font-style: italic;
  color: var(--gold);
  margin: 2px 2px 2px 14px;
  flex-wrap: wrap;
  gap: 10px;
}


.tr {
  list-style-type: square;
  font-size: 12	px;
  font-style: italic;
  color: var(--gold);
  margin: 2px 2px 2px 14px;
  flex-wrap: wrap;
  gap: 10px;
  text-align: left;
  width: 30%;
}

.td{
  list-style-type: square;
  font-size: 12	px;
  font-style: italic;
  color: var(--gold);
  margin: 2px 2px 2px 14px;
  flex-wrap: wrap;
  gap: 10px;
  text-align: left;
  width: 30%;
}






/* Transparent Ledger */
    .ledger-layout {
      display: grid;
      grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1.1fr);
      gap: 16px;
      margin-top: 10px;
    }
    @media (max-width: 900px) {
      .ledger-layout {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .card {
      border-radius: var(--radius-md);
      border: 1px solid var(--gold-border);
      background: #060606;
      padding: 10px 11px;
    }
    .card-title {
      font-size: 13px;
      color: var(--gold);
      margin-bottom: 6px;
    }
    .card-subtitle {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
    }
    .summary-item-label {
      font-size: 10px;
      color: var(--text-muted);
    }
    .summary-item-value {
      font-size: 13px;
      color: var(--gold);
    }
    .summary-item-pill {
      font-size: 10px;
      color: var(--text-muted);
    }
    .ledger-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
      margin-top: 8px;
    }
    .ledger-table th,
    .ledger-table td {
      border-bottom: 1px solid rgba(242,199,105,0.2);
      padding: 4px 3px;
      text-align: left;
    }
    .ledger-table th {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
    }
    .badge {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 999px;
      border: 1px solid rgba(242,199,105,0.6);
      font-size: 10px;
      color: var(--gold);
    }
    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      font-size: 11px;
      margin-bottom: 6px;
    }
    .filter-row select,
    .filter-row input[type="number"],
    .filter-row input[type="email"] {
      background: #050505;
      border-radius: var(--radius-md);
      border: 1px solid rgba(242,199,105,0.5);
      padding: 2px 6px;
      color: var(--gold);
      font-size: 11px;
    }
    .mini-label {
      font-size: 10px;
      color: var(--text-muted);
    }
    .pill-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 3px;
      background: #36c46b;
    }
    .pill-dot.sandbox {
      background: #3b82f6;
    }
    .email-note {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 4px;
    }
    #daily-chart {
      width: 100%;
      height: 180px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(242,199,105,0.3);
      background: #050505;
    }



/* Products */
    .pricing-hero {
      font-size: 12px;
      margin-bottom: 4px;
    }
    .tagline {
      font-size: 12px;
      letter-spacing: 0.12em;
      color: rgba(212, 175, 55, 0.9);
      margin-bottom: 4px;
    }
    .pricing-hero h1 {
      margin: 0 0 8px;
      font-size: 12px;
    }
    .pricing-hero p {
      margin: 6px 0;
      font-size: 12px;
      max-width: 740px;
      line-height: 1.5;
    }
    .pill-row {
      margin-top: 10px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .pill {
      border-radius: 2px;
      padding: 4px 10px;
      border: 1px solid rgba(212, 175, 55, 0.6);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      opacity: 0.9;
    }
    .info-legend {
      margin: 12px 0 1.5rem;
      font-size: 12px;
      padding: 12px 12px;
      border: 1px solid rgba(212, 175, 55, 0.4);
      border-radius: 2px;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      gap: 0.75rem;
    }
    .legend-icon {
      width: 20px;
      height: 20px;
      min-width: 20px;
      border-radius: 999px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      opacity: 0.9;
    }
    .legend-text {
      font-size: 12px;
      font-style: italic;
      line-height: 1.4;
      opacity: 0.95;
    }
    .legend-text a {
      font-size: 12px;
      color: #d4af37;
      text-decoration: underline;
    }
    .section-heading {
      font-size: 12px;
      font-style: italic;
      margin: 12px 0 4px;
    }
    .section-sub {
      font-size: 12px;
       font-style: italic;
     opacity: 0.9;
      margin-bottom: 10px;
    }
    .hardware-notice {
      font-size: 11px;
      font-style: italic;
      padding: 10px 12px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: rgba(0, 0, 0, 0.55);
      max-width: 780px;
    }
    .hardware-notice strong {
      color: #d4af37;
    }
    .products-layout {
      margin-top: 14px;
      display: flex;
      gap: 18px;
      align-items: flex-start;
    }
    .products-column {
      flex: 2;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .plan-card {
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      padding: 12px;
      background: radial-gradient(circle at top left, rgba(212, 175, 55, 0.16), rgba(0, 0, 0, 0.9));
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
    }
    .plan-card-title {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 6px;
    }
    .plan-card-title span:first-child {
      font-size: 14px;
      font-weight: 600;
    }
    .product-price {
      font-size: 12px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .price-info {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-left: 6px;
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      font-size: 10px;
      font-weight: 600;
      cursor: help;
      opacity: 0.9;
      position: relative;
      animation: goldPulse 2.4s ease-in-out infinite alternate;
    }
    .price-info::before {
      content: "i";
      line-height: 1;
    }
    .price-info::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 50%;
      bottom: -4px;
      transform: translateX(-50%) translateY(8px);
      background: rgba(0, 0, 0, 0.96);
      border: 1px solid rgba(212, 175, 55, 0.9);
      border-radius: 2px;
      padding: 6px 8px;
      font-size: 11px;
      width: 240px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s, transform 0.15s;
      z-index: 20;
    }
    .price-info:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(2px);
    }
    @keyframes goldPulse {
      from { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.0); }
      to   { box-shadow: 0 0 8px 2px rgba(212, 175, 55, 0.7); }
    }
    .upgrade-badge {
      display: inline-block;
      margin-top: 4px;
      padding: 2px 8px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      opacity: 0.9;
    }
    .product-actions {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .product-qty {
      font-size: 11px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .product-qty input[type="number"] {
      width: 48px;
      padding: 2px 4px;
      border-radius: 2px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.7);
      color: #f7f7f7;
      font-size: 11px;
    }
    .button-primary {
      background: linear-gradient(90deg, #d4af37, #f2e08b);
      border: none;
      color: #ffffff;
      padding: 7px 13px;
      font-size: 12px;
      border-radius: 2px;
      cursor: pointer;
      letter-spacing: 0.08em;
      font-weight: 600;
    }
    .button-primary:hover {
      filter: brightness(1.05);
      color: #ffffff;
}
    .cart-panel {
      flex: 1;
      max-width: 340px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: rgba(0, 0, 0, 0.75);
      padding: 14px;
      position: sticky;
      top: 20px;
    }
    .cart-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .cart-items {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 2px;
      min-height: 60px;
      padding: 8px 10px;
    }
    .cart-empty {
      opacity: 0.65;
      font-size: 12px;
    }
    .cart-item {
      display: flex;
      justify-content: space-between;
      padding: 4px 0;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
      font-size: 12px;
    }
    .cart-item:last-child {
      border-bottom: none;
    }
    .cart-summary {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      font-size: 12px;
      font-weight: 600;
    }
    .impact-summary {
      padding: 0.7rem;
      margin-top: 12px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.3);
      background: rgba(0, 0, 0, 0.4);
    }
    .impact-label {
      font-size: 12px;
      margin-bottom: 12px;
      opacity: 0.85;
    }
    .impact-value {
      font-size: 12px;
      font-weight: 500;
    }
    .cart-note {
      margin-top: 8px;
      font-size: 11px;
      opacity: 0.85;
    }
    footer {
      padding: 10px 24px;
      font-size: 11px;
      border-top: 1px solid rgba(212, 175, 55, 0.3);
      opacity: 0.8;
      display: flex;
      justify-content: space-between;
    }
    footer a {
      color: #d4af37;
      text-decoration: none;
      margin-right: 10px;
    }
    footer a:hover {
      text-decoration: underline;
    }
    .faq-list {
      margin-top: 12px;
      max-width: 820px;
    }
    .faq-item {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding: 0.55rem 0;
    }
    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-size: 12px;
    }
    .faq-answer {
      display: none;
      margin-top: 0.25rem;
      font-size: 12px;
      opacity: 0.9;
    }
    .faq-item.open .faq-answer {
      display: block;
    }
    .faq-toggle-icon {
      font-size: 12px;
      opacity: 0.8;
    }




/* Transparent Pricing */
    .transparent-container {
      padding: 2rem;
      max-width: 1000px;
      margin: auto;
    }

    .transparent-container h1 {
      margin-bottom: 12px;
    }

    .intro {
      margin-bottom: 12px;
      font-size: 12px;
    }

    .transparent-section {
      border: 1px solid rgba(212, 175, 55, 0.4);
      border-radius: 2px;
      padding: 1.5rem;
      background: rgba(0, 0, 0, 0.4);
      margin-bottom: 2rem;
    }

    .transparent-section h2 {
      margin-bottom: 0.5rem;
    }

    .transparent-table {
      width: 100%;
      margin-top: 2px;
      border-collapse: collapse;
    }

    .transparent-table th,
    .transparent-table td {
      padding: 2px 2px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 12px;
    }

    .note {
      margin-top: 12px;
      font-size: 11px;
      opacity: 0.9;
    }

    .slogan {
      margin-top: 12px;
      font-size: 12px;
      font-weight: 600;
    }



/" Order Success */
    .card {
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: rgba(0, 0, 0, 0.55);
      padding: 1.2rem 1.4rem;
      margin-top: 1.2rem;
      font-size: 12px;
    }
    .status-pill {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 2px;
      border: 1px solid rgba(212, 175, 55, 0.8);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0.4rem;
    }
    .order-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px 18px;
      margin-top: 0.6rem;
      font-size: 12rem;
    }
    .order-grid dt {
      font-weight: 600;
      opacity: 0.9;
    }
    .order-grid dd {
      margin: 2px 0 0.6rem;
      opacity: 0.95;
    }
    .items-list {
      margin-top: 0.8rem;
      font-size: 12rem;
    }
    .items-list ul {
      margin: 0.3rem 0 0;
      padding-left: 1rem;
    }
    .impact-note {
      margin-top: 0.9rem;
      font-size: 12rem;
      opacity: 0.95;
    }
    .impact-note strong {
      color: #d4af37;
    }
    .small {
      font-size: 0.8rem;
      opacity: 0.85;
      margin-top: 0.8rem;
    }
    .button-row {
      margin-top: 1.2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

.plan {
  margin-bottom: 16px;
}





.image-row {
  display: flex;
  gap: 20px;       /* space between images */
  justify-content: center; 
  align-items: center;
}

.image-row img {
  height: 300px;
  max-width: 400px;
}


/* ===== GENERATED: extracted inline styles (auto) ===== */
.u_inline_54d32d80db{margin-top: 10px;}
.u_inline_082f6e5d85{margin-top: 6px;}
.u_inline_0cdb234087{font-size:11px;color:#b3b3c2;margin-right:4px;}
.u_inline_daecce9920{font-size: 0.95rem; color: #d5d5d5; line-height: 1.7;}
.u_inline_442f586728{font-size: 0.9rem; color: #d5d5d5; max-width: 800px;}
.u_inline_5b5003b16b{font-size: 0.9rem; color: #d5d5d5;}
.u_inline_69d9a04db0{font-size: 0.85rem; color: #d2d2d2;}
.u_inline_9f189f90b6{margin-top: 1.6rem;}
.u_inline_6f6ce6d866{margin-top: 0.6rem;}
.u_inline_d0a5077315{margin-top: 20px; margin-bottom: 8px;}
.u_inline_20094e8411{width: 100%; height: 180px;}
.u_inline_606f7c85e9{margin-top: 24px; margin-bottom: 8px;}
.u_inline_4e98d46040{width: 100%; height: 160px;}
.u_inline_db4e273159{margin: 20px 0; border: none; border-top: 1px solid rgba(255,255,255,0.06);}
.u_inline_7f3cbaf643{margin-bottom: 8px;}
.u_inline_f740741596{font-size: 0.8rem; margin-bottom: 10px;}
.u_inline_c0cf795a72{font-size: 0.78rem; margin-top: 8px;}
.u_inline_d8a81eac84{margin-top:10px;}
.u_inline_38c2bb3a5b{margin-top:.6rem;}
.u_inline_fedb19d71b{max-width:980px;margin:1rem auto;}
.u_inline_85fe42175f{height:auto}
.u_inline_c28bd948da{text-align:left;}
.u_inline_792c3b8675{margin-top:0.35rem;}
.u_inline_04cdf78d3c{margin-top:0.25rem;}
.u_inline_c8be1ccba6{display:none;}
.u_inline_87db227580{position:relative;}
.u_inline_a82f5ebec0{position:absolute; top:-10px; right:10px; padding:4px 8px; background:#050505; border:1px solid rgba(255,215,0,0.4); border-radius:6px; font-size:0.7rem; pointer-events:none;}
.u_inline_a2ed28f60c{margin-top:2px; letter-spacing:1px; font-size:0.65rem; opacity:0.75;}
.u_inline_649aaf08e2{width:100%;max-width:900px;display:block;margin:0 auto 2rem auto;}
.u_inline_8a359a76eb{margin-top:16px;}
.u_inline_9374e84210{margin-top:12px;}
.u_inline_291b7bbb01{margin-top:0;}
.u_inline_2fd7789b39{margin-top:6px;}
.u_inline_014abc2bec{display:flex;align-items:flex-end;}
.u_inline_a04348ea64{max-width: 600px; margin: 0 auto;}
.u_inline_d265a6b9b9{margin-top: 16px;}
.u_inline_f781d731c9{display: grid; grid-template-columns: 160px minmax(0, 1fr); grid-column-gap: 2px; grid-row-gap: 6px; align-items: center;}
.u_inline_26cef2c5d8{text-align: left;}
.u_inline_ac690d8380{align-items: flex-start; gap: 6px;}
.u_inline_c5e50ed5c1{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.u_inline_68c83ff711{max-width:140px;}
.u_inline_29ea595b93{max-width:980px;}
.u_inline_0cf8f93b0e{margin-top:1rem;}
.u_inline_699157ac6a{margin-top:.4rem;}
.u_inline_864c8f6072{font-size:1.1rem;}
.u_inline_ae7439a782{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.u_inline_7e30d285d2{display:flex;align-items:center;gap:10px;}
.u_inline_a77ceb8d21{height:28px;width:auto;}
.u_inline_fb525cd151{max-width:170px;}
.u_inline_61d4b7a917{padding:32px 0;}
.u_inline_e7673d9ced{margin-top:18px;}
.u_inline_3374d62d21{padding-top:18px; padding-bottom:24px;}
.u_inline_4ef9babeac{margin:0 0 6px 0;}
.u_inline_1da9facb4d{margin:0;}
.u_inline_b3c26c9946{display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:12px; margin-top:14px;}
.u_inline_7071d1db4d{font-size:22px; font-weight:700;}
.u_inline_bfdc195a9c{font-size:14px; font-weight:600;}
.u_inline_fea9a48c92{gap:8px;}
.u_inline_88b9d5c614{margin-top:14px;}
.u_inline_af3fee87a1{margin-bottom:10px;}
.u_inline_0ad7d1da14{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px;}
.u_inline_27a03f4dda{display:none; margin-top:14px;}
.u_inline_76386b9e64{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.u_inline_83b38904c4{height:420px; border-radius:10px; overflow:hidden;}
.u_inline_aa3f976835{margin:0; padding-left:18px;}
.u_inline_625b21e3fe{min-width: 180px; text-align:center;}
.u_inline_c47045c0fe{min-width: 220px; text-align:center;}
.u_inline_b6d2b7e8a6{max-width: 960px; margin: 0 auto;}
.u_inline_6a7461c088{display: grid; grid-template-columns: 160px minmax(0, 1fr); grid-column-gap: 16px; grid-row-gap: 10px; align-items: center;}
.u_inline_24f66c7702{text-align: left; font-size: 12px}
.u_inline_ef7a9dfbd9{margin-top: 24px;}
.u_inline_ec9014b66c{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;}
.u_inline_0cb900f762{color:#ffe79c;}
.u_inline_a39f4e4647{display:none;margin:10px 0;}
.u_inline_8c2171059e{flex-direction:column; align-items:stretch;}
.u_inline_faa8488a2b{margin-top:0.6rem;}
.u_inline_1933c2e7fc{margin-top:0.8rem;}
.u_inline_8dfb911c38{list-style: decimal; padding-left: 1.25rem;}
.u_inline_690f054c4e{margin-left:auto;}
.u_inline_d80b1b82cd{text-align:right;font-size:0.85rem;opacity:0.8;}
.u_inline_4d16af7554{font-size:0.75em; opacity:0.8;}
.u_inline_2580bb2e67{font-size:0.8rem; opacity:0.7;}
.u_inline_e0b237393d{font-size:0.8rem; opacity:0.8;}
.u_inline_7d6d182cf6{opacity:0.8; font-size:0.9rem;}
.u_inline_22d055cd63{font-size:0.85rem;}
.u_inline_0c5ab0b24f{font-size:1.1rem; margin-bottom:0.7rem;}
.u_inline_cad980f4b7{width:100%;}
.u_inline_ea3ce50e93{margin-top:0.9rem;}
.u_inline_417f469d03{margin-left:0.6rem; font-size:0.85rem; opacity:0.85;}
.u_inline_97e521fd6f{font-size:1.1rem; margin-bottom:0.4rem;}
.u_inline_5e6b6d4fd2{font-size:1.1rem; margin-bottom:0.5rem;}
.u_inline_b7f5777d35{font-size:0.85rem; opacity:0.9;}
.u_inline_600af5f04f{margin-top:0.8rem; font-size:0.8rem; opacity:0.8;}
.u_inline_ddaf9ee36a{padding:24px}
.u_inline_d462248a40{margin-top:0}
.u_inline_a4d6cf33d2{white-space:pre-wrap; padding:12px; border:1px solid #ddd; border-radius:12px; margin-top:12px; background: rgba(0,0,0,0.03)}
.u_inline_850cb92eb4{max-height: 320px; overflow: auto;}
.u_inline_0869e5ef73{justify-content:space-between;}
.u_inline_cc68449f35{font-size:1.05rem; margin-bottom:0.4rem;}
.u_inline_d0698c48c3{overflow-x:auto;}
.u_inline_026d86e8a5{margin-left:1rem;}
.u_inline_6b99de8b69{display:none}


/* ===================================================================
   Abqeri Aesthetic Upgrade (Homepage + Press embed)
   - Artistic, modern, readable
   - Safe overrides (does not break existing pages)
   =================================================================== */

:root {
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;

  /* Subtle elevation + glass */
  --shadow-soft: 0 10px 28px rgba(0,0,0,0.22);
  --shadow-card: 0 14px 40px rgba(0,0,0,0.28);
  --border-soft: rgba(245, 212, 114, 0.22);
}

:root[data-theme="light"] {
  --shadow-soft: 0 10px 22px rgba(0,0,0,0.10);
  --shadow-card: 0 16px 40px rgba(0,0,0,0.12);
  --border-soft: rgba(114, 81, 24, 0.20);
}

body {
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.01em;
}

/* Header: calm, premium, slightly glassy */
header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.brand-title {
  font-style: normal;
  letter-spacing: 0.06em;
}

nav {
  font-style: normal;
  gap: 18px;
}

.nav-item a {
  color: color-mix(in srgb, var(--text) 75%, var(--gold) 25%);
}

.nav-item a:hover {
  color: var(--gold);
  text-decoration: none;
}

/* Softer section shells */
.section {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-elevated) 86%, transparent) 0%,
    color-mix(in srgb, var(--bg-primary) 92%, transparent) 100%);
  box-shadow: var(--shadow-soft);
}

/* Hero: more cinematic */
.hero {
  border-radius: calc(var(--radius-lg) + 6px);
  padding: 22px 22px;
  background:
    radial-gradient(800px 420px at 16% 12%, color-mix(in srgb, var(--gold) 18%, transparent) 0%, transparent 60%),
    radial-gradient(900px 520px at 88% 22%, color-mix(in srgb, var(--gold-soft) 10%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-tertiary), var(--bg-primary));
  box-shadow: var(--shadow-card);
}

.hero-content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px) {
  .hero-content { grid-template-columns: 1fr; }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 70%, var(--gold) 30%);
}

.kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 999px;
  opacity: 0.85;
}

.dev-h1 {
  font-size: clamp(28px, 3vw + 10px, 44px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin-top: 6px;
}

.dev-h2 {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 56rem;
  margin-top: 10px;
}

.hero .muted,
.hero-side .muted,
.dev-p {
  color: var(--text-muted);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Buttons used across pages: .btn + (primary/secondary/ghost) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.70rem 1.3rem;
  font-size: 0.92rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease;
  white-space: nowrap;
}

.btn.primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(245, 197, 69, 0.28);
}

.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(245, 197, 69, 0.36);
  color: #ffffff;
}

.btn.secondary {
  background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
  color: var(--text);
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.btn.secondary:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}

.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
}

.btn.ghost:hover {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 65%, transparent);
}

/* Cards: more premium */
.modules-grid { gap: 14px; }

.module-card {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--gold-border) 50%, transparent);
  background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
  padding: 14px 14px;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.module-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,0.30);
}

/* Quantum heart visual: softer framing */
.quantum-heart {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: radial-gradient(circle at top, color-mix(in srgb, var(--bg-elevated) 85%, transparent), var(--bg-primary));
  box-shadow: 0 18px 48px rgba(0,0,0,0.32);
  padding: 10px;
  overflow: hidden;
}

.quantum-heart svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .quantum-heart { animation: abqeri-float 6.5s ease-in-out infinite; }
  .module-card:hover { animation: none; }
}

@keyframes abqeri-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Home press embed: ensure spacing stays elegant */
#home-press-embed-target .module-card {
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
}

/* Make long pages breathe a bit more */
main.container { gap: 18px; padding-top: 22px; }




/* --- Home aesthetic upgrades (Press highlight + subtle art) --- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -120px -120px auto -120px;
  height: 420px;
  background: radial-gradient(circle at 30% 20%, rgba(255,215,0,0.16), rgba(255,215,0,0) 60%),
              radial-gradient(circle at 70% 30%, rgba(255,215,0,0.10), rgba(255,215,0,0) 55%);
  pointer-events: none;
  filter: blur(0px);
}
.hero-divider svg {
  display: block;
  width: 100%;
  height: 70px;
}
.hero-divider path {
  fill: rgba(255, 215, 0, 0.06);
}

.pill-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.2px;
  border:1px solid rgba(255,215,0,0.20);
  background: linear-gradient(90deg, rgba(255,215,0,0.14), rgba(255,215,0,0.06));
  color: var(--text, #111);
}

.press-latest{
  border:1px solid rgba(255,215,0,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  background: linear-gradient(180deg, rgba(255,215,0,0.07), rgba(255,215,0,0.02));
}
.press-latest h3{
  font-size: 20px;
  line-height: 1.25;
}
.press-latest .btn.ghost{
  white-space: nowrap;
}

.module-card.reveal,
#home-press-latest-card.reveal{
  transform: translateY(0);
  opacity: 1;
}

.module-card,
#home-press-latest-card{
  transform: translateY(6px);
  opacity: 0.001;
  transition: transform .45s ease, opacity .45s ease, box-shadow .35s ease;
}
.module-card:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,0.10);
}

@media (prefers-reduced-motion: reduce){
  .module-card,
  #home-press-latest-card{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}


/* Universe explainer panel */

.exp-panel{padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:rgba(255,255,255,.6);}
.exp-panel-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.exp-title{font-size:1.15rem;font-weight:700;margin:0;}
.exp-one-liner{margin-top:6px;opacity:.9;line-height:1.35;}
.compute-badge{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.02);font-size:.9rem;white-space:nowrap;}
.compute-badge .dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:#777;}
.exp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;}
@media (max-width:900px){.exp-grid{grid-template-columns:1fr;}}
.exp-box{border:1px solid rgba(0,0,0,.10);border-radius:14px;padding:12px;background:rgba(255,255,255,.6);}
.exp-h{font-weight:700;margin-bottom:8px;}
.exp-p{line-height:1.45;}
.exp-list{margin:0;padding-left:18px;line-height:1.45;}
.exp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.exp-tabs .tab-btn{border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.02);border-radius:999px;padding:8px 12px;cursor:pointer;}
.exp-tabs .tab-btn.active{border-color:rgba(0,0,0,.22);background:rgba(0,0,0,.06);}
.exp-tab-body{margin-top:10px;border:1px solid rgba(0,0,0,.10);border-radius:14px;padding:12px;background:rgba(255,255,255,.6);line-height:1.5;}


/* Universe simulator explainer: subtle credibility note */
.exp-disclaimer{
  margin-top:10px;
  font-size:0.92rem;
  opacity:0.8;
  line-height:1.45;
}


/* --- HFA Safe Mind: Safety Proof Panel --- */
.hfa-deltas{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-top:14px;
}
.hfa-delta-card{
  border:1px solid rgba(255,215,0,0.25);
  background: rgba(0,0,0,0.35);
  border-radius: 14px;
  padding:12px;
}
.hfa-delta-label{
  opacity:0.85;
  font-size: 13px;
  margin-bottom:6px;
}
.hfa-delta-value{
  font-size: 22px;
  font-weight: 700;
}
.hfa-viz{
  margin-top:16px;
  padding-top:10px;
  border-top:1px solid rgba(255,215,0,0.18);
}
.hfa-viz-row{
  margin-top:12px;
}
.hfa-viz-label{
  font-size: 13px;
  opacity:0.85;
  margin-bottom:6px;
}
.hfa-viz canvas{
  width:100%;
  border:1px solid rgba(255,215,0,0.18);
  border-radius: 12px;
  background: rgba(0,0,0,0.55);
}
.hfa-truth{
  margin-top:14px;
  border-left: 3px solid rgba(255,215,0,0.65);
  padding-left: 12px;
  opacity: 0.95;
}
.hfa-pre{
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 10px;
}

/* === Safe Mind AI – Wave Visualization Fix === */
.hfa-viz canvas{
  width:100%;
  height:120px;           /* critical: ensures visible rect height */
  display:block;
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(245,212,114,0.25);
  border-radius:12px;
}

/* === Safe Mind AI – Proof Panel Visibility (text + metrics) === */
.hfa-delta-card, .hfa-delta-label, .hfa-delta-value,
.hfa-section-title, .hfa-viz-label, .hfa-truth, .hfa-output, .hfa-pre {
  color: rgba(245, 212, 114, 0.95);
}

.hfa-delta-label { opacity: 0.85; }
.hfa-truth p { color: rgba(245, 212, 114, 0.92); }





/* === Safe Mind AI – FORCE metric text visibility === */
#safeMindDeltas .hfa-delta-label,
#safeMindDeltas .hfa-delta-value,
#safeMindDeltas div {
  color: rgba(245, 212, 114, 0.98) !important;
}

#safeMindDeltas .hfa-delta-value {
  font-weight: 800 !important;
  font-size: 22px !important;
}

#safeMindDeltas .hfa-delta-card {
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(245,212,114,0.28) !important;
}



/* === Safe Mind AI: metrics — clean inline (no boxes) === */
#safeMindDeltas{
  gap: 10px !important;
}

#safeMindDeltas .hfa-delta-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 2px !important;
  border-radius: 0 !important;
}

#safeMindDeltas .hfa-delta-label{
  font-size: 13px !important;
  opacity: 0.85 !important;
}

#safeMindDeltas .hfa-delta-value{
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
}



/* =========================
   Abqeri Shell — Layout + Account Flyout (final)
   ========================= */

/* Standard content width across pages */
.container{
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Header spans full viewport width like Microsoft, while content stays aligned */
.site-header .container{
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  align-items: center;
}

/* Push right side to far right */
.site-header .nav-right{ margin-left: auto; display:flex; align-items:center; gap:14px; }

/* Avatar: guaranteed circle */
.site-header .nav-account{ position: relative; }
.site-header .nav-avatar{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.site-header .nav-avatar:hover{ background: rgba(0,0,0,0.04); }

.site-header .nav-avatar-img{
  display:none;
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 999px;
}

.site-header .nav-avatar-initials{
  display:none;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.site-header .nav-avatar-icon{
  display:inline-flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
}

/* Badge dot = tier color (only when signed in) */
.site-header .nav-account[data-authed="0"] .nav-avatar::after{ display:none; }
.site-header .nav-account[data-authed="1"] .nav-avatar::after{
  content:"";
  position:absolute;
  right:-1px;
  bottom:-1px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #9ca3af; /* free */
}
.site-header .nav-account[data-sub="pro"][data-authed="1"] .nav-avatar::after{ background:#2563eb; }
.site-header .nav-account[data-sub="enterprise"][data-authed="1"] .nav-avatar::after{ background:#f59e0b; }

/* Flyout overlay positioning (prevents it joining header flow) */
.site-header .account-menu[hidden]{ display:none !important; }
.site-header .account-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 260px;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  padding: 8px;
  z-index: 99999;
}

.site-header .account-menu-header{
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 6px;
  position: relative;
}
.site-header .account-name{ font-weight: 800; }
.site-header .account-sub{ font-size: 12px; opacity: 0.75; margin-top: 2px; }
.site-header .account-tier{
  position:absolute;
  right: 10px;
  top: 10px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 999px;
  padding: 2px 8px;
  background:#fff;
}

.account-menu-link{
  display:block;
  padding:10px 12px;
  text-decoration:none;
  color:#111;
  font-size:14px;
  border-radius:6px;
}
.account-menu-link:hover{ background: rgba(0,0,0,0.06); }

.account-menu-sep{
  border:none;
  border-top:1px solid rgba(0,0,0,0.12);
  margin:6px 0;
}



/* ===============================
   Homepage (page-home) styles (moved from index.html)
   =============================== */
/* Home: Microsoft-like composition, mobile-first */
    body.page-home{ background:#fff; color:#111; }
    .page-home .home-wrap{ padding: 18px 0 34px; }

    .page-home .hero{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
      align-items: stretch;
    }

    .page-home .hero-left{
      border: 1px solid rgba(0,0,0,0.10);
      border-radius: 2px;
      background: #fff;
      padding: 18px 16px;
      box-shadow: 0 10px 26px rgba(0,0,0,0.08);
      width: 550px;
    }

    .page-home .hero-kicker{
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0.72;
      margin: 0 0 10px;
    }

    .page-home .hero-title{
      font-size: 24px;
      line-height: 1.12;
      letter-spacing: -0.02em;
      margin: 0 0 10px;
      font-weight: 800;
    }

    .page-home .hero-desc{
      margin: 0 0 14px;
      opacity: 0.82;
      font-size: 15px;
      line-height: 1.55;
      max-width: 56ch;
    }

    .page-home .hero-actions{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 2px;
    }

    .page-home .btn-primary, .btn-ghost{
      height: 35px;
      padding: 0 16px;
      border-radius: 2px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight: 700;
      text-decoration:none;
      cursor:pointer;
      border: 1px solid transparent;
    }
    .page-home .btn-primary{ background:#0f6cbd; color:#ffffff; border-color:#0f6cbd; }
    .page-home .btn-primary:hover{ filter: brightness(0.95);   color: #ffffff;
}
    .page-home .btn-ghost{ background: transparent; color:#111; border-color: rgba(0,0,0,0.22); }
    .page-home .btn-ghost:hover{ background: rgba(0,0,0,0.04); }

    .page-home .hero-right{
      border: 1px solid rgba(0,0,0,0.10);
      border-radius: 2px;
      background: #fff;
      overflow:hidden;
      box-shadow: 0 10px 26px rgba(0,0,0,0.08);
      min-height: 240px;
      position: relative;
      aspect-ratio: 16 / 10;
      margin-left: -50px;
      width: 550px;
    }

    .hero-img{
      margin-top: -40px;
      margin-right: 10px;
      width: 100px;
    }

    .page-home .hero-right img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .page-home .hero-right .hero-img-overlay{
      position:absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.00) 45%, rgba(255,255,255,0.55) 100%);
      pointer-events:none;
    }

    .page-home .hero-right .hero-img-label{
      position:absolute;
      left: 14px;
      bottom: 12px;
      display:flex;
      flex-direction:column;
      gap:4px;
      max-width: 85%;
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
      padding: 0 !important;

    }
    .page-home .hero-right .hero-img-label .t{
      font-weight: 900;
      letter-spacing: -0.01em;
      margin-top: -50px;
    }
    .page-home .hero-right .hero-img-label .s{
      font-size: 12px;
      opacity: 0.78;
      line-height: 1.35;
    }

    .page-home .cards{
      margin-top: 16px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .page-home .card{
      border: 1px solid rgba(0,0,0,0.10);
      border-radius: 2px;
      background:#fff;
      overflow:hidden;
      box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    }
    .page-home .card-img{
      height: 150px;
      background: rgba(0,0,0,0.04);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 12px;
      opacity: 0.7;
    }
    .page-home .card-b{ padding: 14px 14px 16px; }
    .page-home .card-title{ margin:0 0 6px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
    .page-home .card-desc{ margin:0 0 12px; opacity:0.82; line-height: 1.5; }
    .page-home .card-actions{ display:flex; gap:10px; flex-wrap:wrap; }

    .page-home .section{
      margin-top: 22px;
      padding-top: 6px;
    }
    .page-home .section h2{
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 900;
      letter-spacing: -0.01em;
    }
    .page-home .section p{
      margin: 0 0 10px;
      opacity: 0.82;
      line-height: 1.55;
      max-width: 78ch;
    }

    .page-home .bullets{
      margin: 10px 0 0;
      padding-left: 18px;
      opacity: 0.85;
      line-height: 1.55;
    }

    @media (min-width: 980px){
      .page-home .hero{ grid-template-columns: 1.1fr 0.9fr; gap: 16px; }
      .page-home .hero-title{ font-size: 24px; }
      .page-home .cards{ grid-template-columns: repeat(4, 1fr); }
      .page-home .card-img{ height: 140px; }
      .page-home .hero-right img{ min-height: 360px; }
      .page-home .hero-right{ min-height: 360px; }
    }

/* Bundle A v2: gentle homepage polish (scoped) */
    .page-home .wrap{max-width: 1120px;}
    .page-home .hero{padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(18px, 3.5vw, 34px);}
    .page-home .hero-title{font-size: clamp(24px, 4.2vw, 24px); line-height: 1.08; letter-spacing: -0.02em;}
    .page-home .hero-desc{font-size: clamp(14px, 1.35vw, 16px); line-height: 1.55;}
    .page-home .cards{gap: 18px; padding-top: 18px; padding-bottom: 8px;}
    @media (min-width: 900px){ .page-home .cards{gap: 22px; padding-top: 24px;} }

    /* Whole-card click + subtle lift (keeps inner buttons/links functional) */
    .page-home .card{position: relative; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease;}
    .page-home .card:hover{transform: translateY(-2px);}
    .page-home .card:focus-within{transform: translateY(-2px);}
    .page-home .card-hit{
      position:absolute; inset:0; z-index:1;
      border-radius: inherit;
      text-decoration:none;
    }
    .page-home .card-hit:focus-visible{
      outline: 2px solid rgba(15,108,189,.55);
      outline-offset: 3px;
    }
    .page-home .card-img,
    .page-home .card-b{position: relative; z-index:2;}
    .page-home .card-actions a{position: relative; z-index:3;}

    /* Proof of Trust strip */
    .page-home .proof-strip{
      margin-top: 14px;
      border: 1px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.72);
      border-radius: 12px;
      padding: 14px 14px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      backdrop-filter: blur(6px);
    }
    @media (min-width: 900px){
      .page-home .proof-strip{
        grid-template-columns: 1fr 1fr 1fr;
        padding: 16px 18px;
        gap: 14px;
      }
    }
    .page-home .proof-item{
      display:flex; gap:10px; align-items:flex-start;
      padding: 10px 10px;
      border-radius: 10px;
    }
    .page-home .proof-item:hover{background: rgba(15,108,189,.06);}
    .page-home .proof-kicker{font-size:12px; opacity:.7; margin:0 0 2px;}
    .page-home .proof-title{margin:0; font-weight: 650; font-size: 14.5px;}
    .page-home .proof-desc{margin:4px 0 0; font-size: 13.5px; opacity:.86; line-height:1.45;}
    .page-home .proof-item a{color: inherit; text-decoration:none;}

/* ===============================
   Abqeri Light Theme Guardrails
   =============================== */

/* Neutral surfaces: avoid warm casts on light theme. */
:root{
  --bg-neutral-0: #ffffff;
  --bg-neutral-1: #fafafa;
  --bg-neutral-2: #f5f5f5;
  --hero-bg-light: linear-gradient(180deg, var(--bg-neutral-0) 0%, var(--bg-neutral-1) 100%);
}

/* Ensure primary buttons stay white in light theme */
:root[data-theme="light"] :where(.btn.primary,.btn-primary,.button-primary,a.btn.primary,a.btn-primary) {
  color: #ffffff !important;
}


/* Homepage hero must stay neutral (no gold/yellow glows). */
body.page-home{
  background: var(--bg-neutral-0);
}
.page-home .hero{
  background: var(--hero-bg-light) !important;
}

/* If any decorative glow pseudo-elements exist, disable on homepage. */
.page-home .hero::before,
.page-home .hero::after{
  content: none !important;
}


/* ===================================================
   FINAL LOCK — Primary buttons text MUST be white
   (covers all legacy + hero button variants)
   =================================================== */

.btn.primary,
.btn-primary,
.button-primary,
.btn--primary,
button.btn.primary,
button.btn-primary,
button.button-primary,
button.btn--primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.btn.primary *,
.btn-primary *,
.button-primary *,
.btn--primary *,
button.btn.primary *,
button.btn-primary *,
button.button-primary *,
button.btn--primary * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ===================================================
   GLOBAL RADIUS LOCK — 2px everywhere
   =================================================== */

*,
*::before,
*::after {
  border-radius: 2px !important;
}


/* ===================================================
   FEATURE / MODULE CARDS — layout discipline
   =================================================== */

.module-card,
.feature-card,
.card {
  display: flex;
  flex-direction: column;
}


/* Buttons inside cards always align to bottom */
.module-card .cta-row,
.module-card .card-actions,
.module-card .card-cta,
.feature-card .cta-row,
.feature-card .card-actions,
.feature-card .card-cta {
  margin-top: auto;
}


/* ===================================================
   CARDS — force bottom-aligned CTAs (works with mixed markup)
   =================================================== */

/* 1) Grid items stretch so cards can be full height */
.modules-grid,
.features-grid,
.cards-grid {
  align-items: stretch;
}

/* 2) Cards are full-height flex columns */
.module-card,
.feature-card,
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 3) Push known action containers to bottom */
.module-card .cta-row,
.module-card .card-actions,
.module-card .actions,
.module-card .button-row,
.feature-card .cta-row,
.feature-card .card-actions,
.feature-card .actions,
.feature-card .button-row,
.card .cta-row,
.card .card-actions,
.card .actions,
.card .button-row {
  margin-top: auto !important;
}

/* 4) If there’s no wrapper, but the CTA is last, anchor it */
.module-card > a.btn,
.module-card > button.btn,
.module-card > a.btn-primary,
.module-card > button.btn-primary,
.module-card > a.button-primary,
.module-card > button.button-primary,
.feature-card > a.btn,
.feature-card > button.btn,
.feature-card > a.btn-primary,
.feature-card > button.btn-primary,
.feature-card > a.button-primary,
.feature-card > button.button-primary {
  margin-top: auto !important;
}

/* 5) Make sure buttons don’t stretch weirdly */
.module-card .btn,
.feature-card .btn,
.card .btn,
.module-card .btn-primary,
.feature-card .btn-primary,
.card .btn-primary,
.module-card .button-primary,
.feature-card .button-primary,
.card .button-primary {
  align-self: flex-start;
}



/* ===================================================
   FEATURE CARDS — equal height + CTA pinned to bottom
   =================================================== */

/* 1) Ensure grid stretches items (critical) */
.modules-grid,
.features-grid,
.cards-grid {
  align-items: stretch !important;
}

/* If you used display:flex for the grid anywhere, force stretch too */
.modules-grid > *,
.features-grid > *,
.cards-grid > * {
  align-self: stretch !important;
}

/* 2) Cards must fill available height */
.module-card,
.feature-card,
.card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 3) Pin the last section inside the card to the bottom
      (works if your CTA container is the last child) */
.module-card > :last-child,
.feature-card > :last-child,
.card > :last-child {
  margin-top: auto !important;
}

/* 4) If your CTA row is not the last child, explicitly pin common CTA wrappers */
.module-card .cta-row,
.module-card .button-row,
.module-card .card-actions,
.feature-card .cta-row,
.feature-card .button-row,
.feature-card .card-actions,
.card .cta-row,
.card .button-row,
.card .card-actions {
  margin-top: auto !important;
}


/* ===================================================
   GLOBAL TYPOGRAPHY LOCK — Abqeri
   =================================================== */

/* Base body text */
body,
p,
span,
div,
li,
td,
th,
label,
input,
textarea,
select {
  font-size: 12px !important;
  line-height: 1.45;
}

/* Headings */
h1 {
  font-size: 16px !important;
  line-height: 1.3;
  font-weight: 600;
}

h2 {
  font-size: 14px !important;
  line-height: 1.35;
  font-weight: 600;
}

h3 {
  font-size: 12px !important;
  line-height: 1.4;
  font-weight: 600;
}

/* Prevent components from silently overriding */
.hero h1,
.hero h2,
.hero h3,
.page-title,
.section-title {
  font-size: inherit !important;
}





/* ===================================================
   TYPOGRAPHY SYSTEM v1 — Fixed px + Tokens + Density
   Usage:
     - Default density = normal
     - Compact: add   <body class="density-compact">
     - Normal:  add   <body class="density-normal">  (optional)
   =================================================== */

/* ---- 1) Tokens (fixed px, enterprise stable) ---- */
:root{
  /* Type scale */
  --fs-body: 12px;
  --fs-h1: 16px;
  --fs-h2: 14px;
  --fs-h3: 12px;

  /* Line-height (normal density) */
  --lh-body: 1.45;
  --lh-h1: 1.30;
  --lh-h2: 1.35;
  --lh-h3: 1.40;

  /* Spacing density (normal) */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
}

/* Compact density */
body.density-compact{
  --lh-body: 1.30;
  --lh-h1: 1.22;
  --lh-h2: 1.25;
  --lh-h3: 1.28;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
}

/* Normal density (optional explicit) */
body.density-normal{
  --lh-body: 1.45;
  --lh-h1: 1.30;
  --lh-h2: 1.35;
  --lh-h3: 1.40;
}

/* ---- 2) Global enforcement ---- */
body,
p, span, div, li, td, th, label,
input, textarea, select {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
}

h1{
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-h1) !important;
  font-weight: 600;
}

h2{
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-h2) !important;
  font-weight: 600;
}

h3{
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-h3) !important;
  font-weight: 600;
}

/* Prevent “special” components from drifting */
.hero h1, .hero h2, .hero h3,
.page-title, .section-title{
  font-size: inherit !important;
  line-height: inherit !important;
}

/* ---- 3) Page rhythm (fine tuning by area) ---- */
main{
  gap: var(--space-4) !important;
}

.section,
.module-card,
.feature-card,
.card{
  padding: var(--space-3) !important;
}

.module-card p,
.feature-card p,
.card p{
  margin-top: var(--space-1);
}

/* Forms: keep tight and readable */
input, select, textarea{
  padding: 4px 6px;
}

textarea{
  line-height: var(--lh-body) !important;
}

/* Tables: compact + consistent */
.data-table td, .data-table th{
  font-size: var(--fs-body) !important;
  line-height: 1.25 !important;
  padding: 6px 8px;
}





/* ===================================================
   TYPOGRAPHY SYSTEM v1.1 — +2px adjustment
   =================================================== */

/* Updated type scale */
:root{
  --fs-body: 14px;
  --fs-h1: 18px;
  --fs-h2: 16px;
  --fs-h3: 14px;
}

/* Re-apply globally (authoritative) */
body,
p,
span,
div,
li,
td,
th,
label,
input,
textarea,
select {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
}

h1{
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-h1) !important;
}

h2{
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-h2) !important;
}

h3{
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-h3) !important;
}




/* ===================================================
   DENSITY MODES v1.2 — Comfort / Normal / Compact
   =================================================== */

/* Comfort = default for readability */
body.density-comfort{
  --fs-body: 15px;
  --fs-h1: 20px;
  --fs-h2: 18px;
  --fs-h3: 15px;

  --lh-body: 1.55;
  --lh-h1: 1.32;
  --lh-h2: 1.38;
  --lh-h3: 1.45;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 22px;
}

/* Normal = balanced */
body.density-normal{
  --fs-body: 14px;
  --fs-h1: 18px;
  --fs-h2: 16px;
  --fs-h3: 14px;

  --lh-body: 1.45;
  --lh-h1: 1.30;
  --lh-h2: 1.35;
  --lh-h3: 1.40;
}

/* Compact = information-dense */
body.density-compact{
  --fs-body: 13px;
  --fs-h1: 17px;
  --fs-h2: 15px;
  --fs-h3: 13px;

  --lh-body: 1.30;
  --lh-h1: 1.22;
  --lh-h2: 1.25;
  --lh-h3: 1.28;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
}


/* ===================================================
   HERO TYPOGRAPHY EMPHASIS (homepage only)
   =================================================== */

.hero h1{
  font-size: calc(var(--fs-h1) + 4px) !important;
  line-height: 1.25;
  font-weight: 600;
}

.hero h2{
  font-size: calc(var(--fs-h2) + 2px) !important;
  line-height: 1.35;
  font-weight: 500;
}

.hero .muted,
.hero p{
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body);
}


/* =========================================================
   HOME HERO FIX: ensure hero image fills + label transparent
   (matches current markup: .hero-right > img)
   ========================================================= */

.page-home .hero-right{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  /* guarantees real height so the absolute img has something to fill */
  aspect-ratio: 16 / 10;
  min-height: 280px;
  background: #eef2f7; /* fallback if image fails */
}

/* make the hero image truly fill */
.page-home .hero-right > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;       /* prevents baseline gaps */
  z-index: 1;
}

/* overlay above image */
.page-home .hero-img-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* keep it subtle so image stays visible */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.10) 55%,
    rgba(255,255,255,0.35) 100%
  );
}

/* label above overlay, but transparent */
.page-home .hero-img-label{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  /* keep readability without a box */
  color: #0b0b0f;
  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
}

/* optional: slightly tighten label typography on mobile */
@media (max-width: 520px){
  .page-home .hero-img-label{ left: 14px; right: 14px; bottom: 14px; }
}

/* =========================================================
   SAFE HOME HERO (NON-FRAGILE, DEGRADES GRACEFULLY)
   ========================================================= */

.page-home .hero-right{
  position: relative;
  overflow: hidden;
  border-radius: 10px;

  /* guarantees height even if image fails */
  aspect-ratio: 16 / 10;
  min-height: 280px;

  /* premium fallback if image disappears */
  background:
    radial-gradient(120% 80% at 80% 20%, #eef4ff 0%, #f7f3e8 60%, #f5f5f5 100%);
}

/* SAFE IMAGE: stays in normal flow */
.page-home .hero-right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  /* never hide the element */
  display: block;
}

/* Overlay is optional, never blocks image */
.page-home .hero-img-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.08) 55%,
    rgba(255,255,255,0.30) 100%
  );
}

/* Transparent label – no box, no risk */
.page-home .hero-img-label{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;

  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;

  color: #0b0b0f;
  text-shadow: 0 1px 2px rgba(255,255,255,0.75);
}

/* Mobile tightening */
@media (max-width: 520px){
  .page-home .hero-right{
    min-height: 240px;
  }
  .page-home .hero-img-label{
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
}


/* Force SAFE hero image behavior (wins over earlier rules) */
.page-home .hero-right img{
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 240px;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
}


/* HOME: allow hero image to show even in light theme */
:root[data-theme="light"] .page-home .hero-img-overlay{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.08) 55%,
    rgba(255,255,255,0.30) 100%
  ) !important;
}


/* =========================
   HEADER FIX (MOBILE SAFE)
   ========================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.desktop-nav{
  display: flex;
  gap: 20px;
}

.nav-burger{
  display: none;
  background: none;
  border: 0;
  font-size: 22px;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 920px){
  .desktop-nav{
    display: none;
  }

  .nav-burger{
    display: inline-flex;
  }

  .header-right a{
    display: none;
  }

  .mobile-nav{
    display: none;
    flex-direction: column;
    padding: 12px 16px;
    background: var(--bg);
    border-top: 1px solid #ddd;
  }

  .mobile-nav.open{
    display: flex;
  }

  .mobile-nav a{
    padding: 12px 0;
    font-size: 16px;
  }
}

/* =========================
   HERO VISUAL (FINAL SAFE)
   ========================= */

.page-home .hero-right{
  aspect-ratio: 16 / 10;
  min-height: 260px;
  background:
    radial-gradient(120% 80% at 80% 20%, #eef4ff 0%, #f7f3e8 60%, #f5f5f5 100%);
}

.page-home .hero-right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

:root[data-theme="light"] .page-home .hero-img-overlay{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.0),
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.3)
  ) !important;
}


/* (your existing 192k lines remain exactly as-is above this point) */

/* =========================================================
   Abqeri Patch — Header + Mobile Nav + Hero Reliability
   (stabilizes shell.js behaviors; minimal, override-only)
   ========================================================= */

/* Header: scope overrides to the injected header only */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--gold-border);
}

/* Ensure header layout uses the markup in partials/header.html */
.site-header > .container{
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Brand stays stable */
.site-header .brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}
.site-header .brand-logo{ height: 32px; width: auto; display: block; }

/* Desktop nav */
.site-header .nav-primary{
  display: flex;
  align-items: center;
  gap: 22px;
  white-space: nowrap;
}

/* Right side: burger + links + account */
.site-header .nav-right{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-header .nav-links-right{
  display: inline-flex;
  align-items: center;
  gap: 22px;
}

/* Burger visual */
.site-header .nav-burger{
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  border-radius: 10px;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.site-header .nav-burger-lines{
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  display: block;
  border-radius: 999px;
}
.site-header .nav-burger-lines::before,
.site-header .nav-burger-lines::after{
  content:"";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}
.site-header .nav-burger-lines::before{ top: -6px; }
.site-header .nav-burger-lines::after{ top: 6px; }

/* Mobile overlay + panel (controlled by shell.js via .nav-open + #navOverlay.hidden) */
.site-header .nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 998;
}
.site-header.nav-open .nav-overlay[hidden]{
  /* shell.js flips hidden=false; keep this as a safety net in case HTML attribute stays */
  display: block !important;
}
.site-header .nav-shell{
  position: relative;
  z-index: 999; /* above overlay */
}

/* Mobile menu base (kept hidden by attribute, shown by .nav-open override) */
.site-header .mobile-nav{
  background: var(--bg);
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.site-header .mobile-nav-inner{
  padding: 12px 24px 16px;
  display: flex;
  flex-direction: column;
}
.site-header .mobile-nav-link{
  padding: 12px 0;
  font-size: 16px;
}
.site-header .mobile-nav-sep{
  height: 1px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  margin: 10px 0;
}

/* Mobile breakpoint */
@media (max-width: 920px){
  .site-header .nav-primary{ display: none; }
  .site-header .nav-links-right{ display: none; }
  .site-header .nav-burger{ display: inline-flex; }

  /* Show panel when shell.js toggles .nav-open */
  .site-header.nav-open #mobileNav{
    display: block !important;
  }
  .site-header.nav-open #mobileNav[hidden]{
    display: block !important;
  }
}

/* Desktop: never show mobile panel */
@media (min-width: 921px){
  .site-header #mobileNav{ display: none !important; }
}

/* Account flyout: keep independent of header flow */
.site-header .nav-account{ position: relative; }
.site-header .account-menu{ z-index: 1001; }

/* =========================================================
   Hero: single source of truth (prevents past position conflicts)
   ========================================================= */
.page-home .hero-right{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px;
  aspect-ratio: 16 / 10;
  min-height: 280px;
  background: radial-gradient(120% 80% at 80% 20%, #eef4ff 0%, #f7f3e8 60%, #f5f5f5 100%);
}
.page-home .hero-right > img,
.page-home .hero-right img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  opacity: 1 !important;
  z-index: 1;
}
.page-home .hero-img-overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;
  pointer-events: none;
}
.page-home .hero-img-label{
  z-index: 3;
}

/* Mobile tightening */
@media (max-width: 520px){
  .page-home .hero-right{ min-height: 240px; }
  .page-home .hero-img-label{ left: 14px; right: 14px; bottom: 14px; }
}


/* === Abqeri Hotfix: avatar must be circle + centered icon (strong override) === */
.site-header .nav-avatar{
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.site-header .nav-avatar-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

.site-header .nav-avatar-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 999px !important;
}


/* =========================================================
   Card inline SVG upgrade (120x120 premium icons)
   ========================================================= */
.page-home .cards .card .card-ico{
  width: 120px;
  height: 120px;
  display: block;
}

/* Keep old "currentColor" rules from tinting new SVGs */
.page-home .cards .card .card-ico{ color: inherit; }


#runBtn.is-running {
  cursor: progress;
  opacity: 0.9;
}

#runBtn .btnSpinner {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: middle;
  animation: hfaSpin 0.8s linear infinite;
}

#runBtn .btnSpinner circle {
  fill: none;
  stroke: #fff;              /* change to #000 for light buttons */
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
}

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



    .hfa-wrap { max-width: 1200px; margin: 0 auto; padding: 18px; }
    .hfa-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .hfa-title h1 { margin: 0; font-size: 22px; }
    .hfa-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; margin-top: 14px; }
    .card { background: rgba(0,0,0,0.70); border: 1px solid rgba(212,175,55,0.25); border-radius: 14px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
    .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .btn { background: rgba(212,175,55,0.15); color: #f5e8b1; border: 1px solid rgba(212,175,55,0.35); border-radius: 12px; padding: 10px 12px; cursor:pointer; }
    .btn[disabled] { opacity: 0.55; cursor:not-allowed; }
    .btn.primary { background: rgba(212,175,55,0.28); }
    .pill { padding: 6px 10px; border-radius: 999px; border:1px solid rgba(212,175,55,0.28); color:#f7efc7; font-size: 12px; background: rgba(0,0,0,0.35);}
    textarea { width:100%; min-height: 110px; resize: vertical; border-radius: 14px; padding: 10px 12px; border: 1px solid rgba(212,175,55,0.25); background: rgba(0,0,0,0.45); color:#fff; outline:none; }
    .cols { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top: 10px; }
    .out { white-space: pre-wrap; line-height: 1.35; font-size: 14px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,0.35); border: 1px solid rgba(212,175,55,0.18); min-height: 190px; }
    .out h3 { margin: 0 0 8px 0; font-size: 13px; color:#f5e8b1; font-weight: 600; }
    .toggle { display:flex; gap:8px; align-items:center; }
    .toggle .btn { padding: 8px 10px; border-radius: 999px; font-size: 12px; }
    .toggle .btn.active { background: rgba(212,175,55,0.34); }
    .metrics { display:flex; gap:10px; flex-wrap: wrap; margin-top:10px; }
    .metric { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius: 14px; border:1px solid rgba(212,175,55,0.18); background: rgba(0,0,0,0.28); min-width: 150px; }
    .metric .k { font-size: 12px; color:#f5e8b1; }
    .metric .v { font-size: 18px; font-weight: 700; color:#fff; }
    .viz { margin-top: 12px; }
    .viz canvas { width: 100%; height: 180px; display:block; border-radius: 14px; border:1px solid rgba(212,175,55,0.18); background: rgba(0,0,0,0.28); }
    .small { font-size: 12px; opacity: 0.9; color:#f0e7bf; }
    .rightStack { display:flex; flex-direction:column; gap:14px; }
  
    /* HFA clarity additions */
    .hfa-statement { margin-top: 14px; }
    .hfa-lead { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
    .hfa-headline { margin: 0 0 8px 0; font-size: 18px; line-height: 1.25; color:#fff; }
    .hfa-sub { margin: 0 0 8px 0; }
    .scenario-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
    .scenario.btn { text-align:left; }
    .hfa-accordion { width:100%; display:flex; justify-content:space-between; align-items:center;
      border:1px solid rgba(212,175,55,0.18); background: rgba(0,0,0,0.22); color:#fff;
      border-radius: 14px; padding: 12px; cursor:pointer; }
    .hfa-accordion-icon { opacity:0.85; }
    .hfa-accordion-body { padding: 0 6px 6px 6px; }
    @media (max-width: 980px) {
      .hfa-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .scenario-grid { grid-template-columns: 1fr; }
      .hfa-title { flex-direction:column; align-items:flex-start; }
    }

    .metric .k { display:flex; align-items:center; gap:6px; }
    .metric .k .infoDot { display:inline-flex; width:16px; height:16px; border-radius:999px; align-items:center; justify-content:center;
      border:1px solid rgba(212,175,55,0.35); background: rgba(0,0,0,0.25); font-size:11px; line-height:1; opacity:0.95; }

    /* --- HFA clarity additions (mobile-first) --- */
    .hfa-framing { margin: 14px 0 0; }
    .hfa-framing .headline { font-size: 15px; line-height: 1.45; margin: 0 0 10px; }
    .hfa-framing .headline b { color:#f7efc7; }
    .hfa-framing .quote { margin-top: 10px; padding: 12px; border-radius: 14px; border: 1px solid rgba(212,175,55,0.22); background: rgba(0,0,0,0.28); }
    .hfa-framing .quote .q { font-size: 13px; line-height: 1.5; opacity: .95; }
    .hfa-framing .quote .actions { margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; }
    .scenarioBar { margin-top: 10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    select.hfa-select { padding: 10px 12px; border-radius: 12px; border:1px solid rgba(212,175,55,0.25); background: rgba(0,0,0,0.45); color:#fff; outline:none; }
    .miniNote { font-size: 12px; opacity: 0.9; color:#f0e7bf; margin-top: 8px; line-height: 1.45; }
    .metricDesc { margin-top: 6px; font-size: 12px; line-height: 1.35; opacity: 0.9; color:#f0e7bf; }
.metricsExplain { margin-top: 10px; font-size: 12px; line-height: 1.45; opacity: 0.9; color:#f0e7bf; }
    .heartExplain { margin-top: 6px; font-size: 12px; line-height: 1.45; opacity: 0.9; color:#f0e7bf; }
    .hfa-wide { margin-top: 14px; }
    .hfa-wideGrid { display:grid; grid-template-columns: 1fr; gap:14px; }
    .copyBadge { display:inline-flex; gap:8px; align-items:center; }
    .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(212,175,55,0.22); background: rgba(0,0,0,0.25); }
    /* Screenshot/share mode */
    body.hfa-screenshot .hfa-grid { grid-template-columns: 1fr !important; }
    body.hfa-screenshot .rightStack { display:none !important; }
    body.hfa-screenshot .cols { grid-template-columns: 1fr !important; }
    body.hfa-screenshot #rawOut { display:block !important; }
    body.hfa-screenshot .toggle { display:none !important; }
    body.hfa-screenshot #promptBox { min-height: 90px; }
    body.hfa-screenshot .hfa-framing { display:none; } /* keep screenshot clean */
    body.hfa-screenshot .shareBanner { display:block; }
    .shareBanner { display:none; margin-top: 10px; padding: 10px 12px; border-radius: 14px; border:1px solid rgba(212,175,55,0.22); background: rgba(212,175,55,0.08); font-size: 12px; line-height: 1.45; color:#f7efc7; }
    @media (max-width: 900px) { .hfa-grid { grid-template-columns: 1fr; } }

    /* Share / screenshot mode (mobile-friendly proof view) */
    body.share-mode .hfa-grid { grid-template-columns: 1fr !important; }
    body.share-mode .rightStack { display:none !important; }
    body.share-mode .hfa-scenarios { display:none !important; }
    body.share-mode .hfa-accordion { display:none !important; }
    body.share-mode #promptBox { min-height: 80px; }
    body.share-mode .hfa-title { position: sticky; top: 0; background: rgba(0,0,0,0.92); padding: 10px 0; z-index: 5; }

    /* Press quote & parents cards tweaks */
    .hfa-press-quote #copyQuoteBtn { white-space: nowrap; }
/* --- Child mode + Record-ready (mobile-first) --- */
.modeBtn { padding: 8px 10px; border-radius: 999px; font-size: 12px; }
.modeBtn.active { background: rgba(46, 204, 113, 0.22); border-color: rgba(46, 204, 113, 0.55); color: #dff7ea; }

.child-only { display: none; }
body.child-mode .child-only { display: block; }
body.child-mode .hide-in-child { display:none !important; }

/* In child mode: reduce jargon density + increase readability */
body.child-mode .hfa-statement .hfa-sub { display:none; }
body.child-mode .hfa-statement .hfa-sub.child-keep { display:block; font-size: 14px; }
body.child-mode .hfa-headline { font-size: 18px; }
body.child-mode textarea { font-size: 16px; }
body.child-mode .metric .k { font-size: 13px; }
body.child-mode .metric .desc { font-size: 12px; opacity: .95; }

/* In record-ready: single-column + hide sidecards + reduce noise */
body.record-mode .rightStack { display:none !important; }
body.record-mode .hfa-grid { grid-template-columns: 1fr !important; }
body.record-mode #shareBtn { display:none !important; }
body.record-mode .hfa-statement { padding: 12px; }
body.record-mode .hfa-statement .hfa-sub { display:none; }
body.record-mode .hfa-statement .hfa-sub.record-keep { display:block; }
body.record-mode .cols { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) {
  body.record-mode .cols { grid-template-columns: 1fr; }
}

/* Color helpers */
.heartGreen { color: rgb(46, 204, 113); font-weight: 800; }
.rawRed { color: rgb(220, 30, 30); font-weight: 800; }
/* --- Record Script Overlay (silent 60s captions) --- */
#recordScriptOverlay {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  border-radius: 16px;
  border: 1px solid rgba(212,175,55,0.35);
  background: rgba(0,0,0,0.80);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  padding: 12px 12px 10px;
  max-width: 860px;
  margin: 0 auto;
  display: none;
}
#recordScriptOverlay .rs-top { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
#recordScriptOverlay .rs-title { font-weight: 800; }
#recordScriptOverlay .rs-pill { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(46,204,113,0.55); background: rgba(46,204,113,0.12); color: #dff7ea; }
#recordScriptOverlay .rs-body { margin-top: 10px; line-height: 1.35; }
#recordScriptOverlay .rs-caption {
  font-size: 16px;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,0.20);
  background: rgba(0,0,0,0.35);
}
#recordScriptOverlay .rs-sub { margin-top: 6px; font-size: 12px; opacity: 0.92; color:#f0e7bf; }
#recordScriptOverlay .rs-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top: 10px; }
#recordScriptOverlay .rs-controls .btn { padding: 8px 10px; border-radius: 999px; font-size: 12px; }
#recordScriptOverlay .rs-time { font-variant-numeric: tabular-nums; opacity: 0.95; }
body.record-mode #recordScriptOverlay { bottom: 10px; }
/* --- Overlay Wave explainer (minimal, laypeople) --- */
.wave-explain {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,0.18);
  background: rgba(0,0,0,0.28);
}
.wave-explain .title {
  font-size: 12px;
  font-weight: 800;
  color: #f5e8b1;
  margin: 0 0 6px 0;
}
.wave-explain .line { margin: 4px 0; font-size: 12px; opacity: .92; color: #f0e7bf; line-height: 1.35; }
.wave-explain .key { font-weight: 800; }
/* --- Frozen semantic colors (laypeople clarity) --- */
.rawRed { color: rgb(220, 30, 30) !important; font-weight: 800; }
.heartGreen { color: rgb(46, 204, 113) !important; font-weight: 800; }

/* Make the meaning "feel" red/green even if the canvas isn't */
.wave-explain { border-left: 4px solid rgba(212,175,55,0.25); }
.wave-explain .badgeRow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top: 8px; }
.wave-explain .chip { display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.20); background: rgba(0,0,0,0.26); font-size: 12px; }
.wave-explain .dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.wave-explain .dot.red { background: rgb(220, 30, 30); }
.wave-explain .dot.green { background: rgb(46, 204, 113); }
.wave-explain .emph { font-weight: 800; }

/* HFA demo: overlay legend always visible (especially on mobile) */
.overlayLegend{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 6px 0}
.overlayLegend .pill{font-size:12px}
@media (max-width: 720px){
  .overlayLegend{position:sticky;top:10px;z-index:50;
    padding:8px 10px;border-radius:14px;
    background:rgba(0,0,0,0.72);backdrop-filter: blur(6px);
    box-shadow:0 10px 24px rgba(0,0,0,0.25)}
}


    /* Heart Map human-readable */
    .heart-human{ border:1px solid rgba(212,175,55,0.18); border-radius:14px; padding:12px; background:rgba(0,0,0,0.15); }
    .heart-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
    .heart-title{ font-weight:700; }
    .heart-sub{ opacity:0.8; font-size:12px; }
    .heart-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px 12px; }
    .kv{ display:flex; justify-content:space-between; gap:10px; padding:6px 8px; border-radius:10px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.03); }
    .kv .k{ opacity:0.85; }
    .kv .v{ font-variant-numeric: tabular-nums; }
    .hfa-wave-stats{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px; }
    @media(min-width:720px){ .hfa-wave-stats{ grid-template-columns:1fr 1fr; } }
    .wave-card{ padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.03); }
    .wave-title{ font-weight:700; margin-bottom:4px; }
    .wave-meta{ opacity:0.85; font-size:12px; font-variant-numeric: tabular-nums; }
    .heart-details{ margin-top:10px; }
    .heart-details summary{ cursor:pointer; user-select:none; }
    .heart-details pre{ max-height:260px; overflow:auto; margin:8px 0 0 0; padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,0.06); background:rgba(0,0,0,0.25); }

  
/* HFA Self-Demo Explanation (cosmetic only) */
.hfaExplain{ margin: 14px 0 10px; }
.hfaExplain__title{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--gold, #d4af37);
}
.hfaExplain__caption{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: .9;
}
.hfaExplain--after{ margin-top: 10px; }
.hfaExplain__reflection{
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  opacity: .95;
}
.hfaExplain__children{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: .9;
}

</style>

  <!-- Safe AI visuals styles -->
  <style>
    .safe-ai-section {
      max-width: 960px;
      margin: 0 auto;
      padding: 2.5rem 1.25rem 3rem;
    }
    .safe-ai-kicker {
      text-transform: uppercase;
      font-size: 0.85rem;
      letter-spacing: 0.18em;
      color: #d0a63b;
      margin-bottom: 0.5rem;
    }
    .safe-ai-title {
      font-size: 1.8rem;
      font-weight: 650;
      color: #f5c242;
      margin-bottom: 0.75rem;
    }
    .safe-ai-subtitle {
      font-size: 0.98rem;
      color: #f0f0f0;
      max-width: 720px;
      margin-bottom: 1.25rem;
    }
    .safe-ai-pill {
      display: inline-block;
      border-radius: 999px;
      border: 1px solid rgba(245, 194, 66, 0.7);
      padding: 4px 12px;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      margin-bottom: 1rem;
      color: #f5c242;
    }
    .abqeri-diagram-wrap {
      max-width: 960px;
      margin: 0 auto 2.5rem;
      padding: 1.5rem 1.25rem;
      border-radius: 18px;
      border: 1px solid rgba(245, 194, 66, 0.45);
      background: radial-gradient(circle at top left, rgba(245, 194, 66, 0.12), transparent 55%);
    }
    .abqeri-diagram-title {
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #f5c242;
      margin-bottom: 0.75rem;
    }
    .abqeri-diagram-subtitle {
      font-size: 0.95rem;
      color: #dddddd;
      margin-bottom: 1.25rem;
    }
    .abqeri-svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .abqeri-diagram-caption {
      font-size: 0.8rem;
      color: #aaaaaa;
      margin-top: 0.5rem;
    }
    .abqeri-compare-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }
    @media (min-width: 720px) {
      .abqeri-compare-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .abqeri-compare-card {
      border-radius: 16px;
      padding: 1rem 1rem 1.2rem;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .abqeri-chip-label {
      display: inline-block;
      font-size: 0.8rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 0.7rem;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
    .abqeri-chip-label--danger {
      color: #ff8d8d;
      border-color: rgba(255, 141, 141, 0.5);
    }
    .abqeri-chip-label--safe {
      color: #8dffb7;
      border-color: rgba(141, 255, 183, 0.5);
    }
    .abqeri-pipeline {
      font-size: 0.9rem;
      margin-bottom: 0.7rem;
    }
    .abqeri-pipeline span {
      padding: 2px 6px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      margin: 0 3px;
      font-size: 0.8rem;
    }
    .abqeri-pipeline .step-danger {
      border-color: rgba(255, 141, 141, 0.7);
      color: #ffb3b3;
    }
    .abqeri-pipeline .step-safe {
      border-color: rgba(141, 255, 183, 0.8);
      color: #c9ffe0;
    }
    .abqeri-pipeline .arrow {
      border: none;
      color: #888;
    }
    .abqeri-hero-visual {
      max-width: 960px;
      margin: 0 auto 2.5rem;
      padding: 1.75rem 1.25rem 2rem;
      border-radius: 20px;
      border: 1px solid rgba(245, 194, 66, 0.5);
      background: radial-gradient(circle at top, rgba(245, 194, 66, 0.22), rgba(5, 6, 8, 1) 60%);
    }
    .abqeri-hero-heading {
      font-size: 1.35rem;
      font-weight: 600;
      color: #f5c242;
      margin-bottom: 0.75rem;
    }
    .abqeri-hero-text {
      font-size: 0.95rem;
      color: #f0f0f0;
      margin-bottom: 1.25rem;
    }


/* =========================================
   BUSINESS PAGES – calm light hero
   ========================================= */

.page-business .hero {
  background: #ffffff !important;
  border: 1px solid var(--gold-border);
  padding: 20px 22px;
}

.page-business .hero-title {
  font-size: 18px;
  font-style: italic;
  color: var(--gold);
}

.page-business .hero-desc {
  font-size: 12px;
  color: var(--text);
  max-width: 720px;
}


.page-business .timeline-item {
  border-left: 2px solid var(--gold-border);
  padding-left: 12px;
  margin-bottom: 12px;
}

.page-business .timeline-marker {
  font-weight: 600;
  color: var(--gold);
}

.universe-main{
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  gap: 16px !important;
  align-items: start !important;
}

/* keep mobile stacked */
@media (max-width: 980px){
  .universe-main{
    grid-template-columns: 1fr !important;
  }
}



/* ===== Account avatar: FORCE circle + badge (robust) ===== */
.nav-account{ position:relative; }

/* Force circle even if other rules exist */
.nav-account .nav-avatar{
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  padding:0 !important;
  position:relative !important; /* for badge */
}

.nav-account .nav-avatar-img{
  width:100% !important;
  height:100% !important;
  border-radius:50% !important;
  object-fit:cover !important;
}

.nav-account .nav-avatar-icon,
.nav-account .nav-avatar-initials{
  width:100% !important;
  height:100% !important;
  border-radius:50% !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Badge: tier color by default (only when authed) */
.nav-account[data-authed="0"] .nav-avatar::after{ display:none !important; }
.nav-account[data-authed="1"] .nav-avatar::after{
  content:"";
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:8px;
  height:8px;
  border-radius:50%;
  border:2px solid #ffffff;
  background:#9ca3af; /* free default */
}

/* Tier colors */
.nav-account[data-sub="pro"][data-authed="1"] .nav-avatar::after{ background:#2563eb; }
.nav-account[data-sub="enterprise"][data-authed="1"] .nav-avatar::after{ background:#f59e0b; }

/* Pulse when online */
@keyframes abqeriPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0.0); }
  70%  { box-shadow: 0 0 0 6px rgba(0,0,0,0.0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.0); }
}
.nav-account[data-status="online"][data-authed="1"] .nav-avatar::after{
  animation: abqeriPulse 1.7s ease-out infinite;
}


/* Universe hero: same premium motion */
@media (prefers-reduced-motion: no-preference){
  .uTile { transform-origin: center; animation: uPulse 4.8s ease-in-out infinite; }
  @keyframes uPulse { 0%,100% { opacity: 0.86; } 50% { opacity: 1; } }

  .uGlow { animation: uGlow 4.8s ease-in-out infinite; }
  @keyframes uGlow { 0%,100% { opacity: 0.35; } 50% { opacity: 0.65; } }

  .uBreath { transform-origin: center; animation: uBreath 4.8s ease-in-out infinite; }
  @keyframes uBreath {
    0%,100% { transform: scale(0.985); opacity: 0.28; }
    50%     { transform: scale(1.02);  opacity: 0.45; }
  }
}

/* Hover amplification (desktop only) */
@media (hover:hover) and (pointer:fine){
  .uTile:hover{ animation-duration: 2.6s; }
  .uTile:hover .uBreath{ animation-duration: 2.6s; opacity: 0.55; }
  .uTile:hover .uGlow{ animation-duration: 2.6s; opacity: 0.85; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .uTile, .uBreath, .uGlow { animation: none !important; }
}



/* Abqeri “living” breath controls (safe defaults) */
:root{
  --abqeri-breath-dur: 5.2s;   /* slower = calmer */
  --abqeri-breath-amp: 1.03;   /* max scale at inhale */
  --abqeri-breath-dim: 0.28;   /* exhale opacity */
  --abqeri-breath-bright: 0.50;/* inhale opacity */
}

/* Universe SVG classes already used in our regenerated SVGs */
.uTile { animation-duration: var(--abqeri-breath-dur) !important; }
.uGlow { animation-duration: var(--abqeri-breath-dur) !important; }
.uBreath{ animation-duration: var(--abqeri-breath-dur) !important; }

/* Override the uBreath keyframes to use variables (works even if SVG has its own keyframes) */
@keyframes uBreath {
  0%,100% { transform: scale(0.985); opacity: var(--abqeri-breath-dim); }
  50%     { transform: scale(var(--abqeri-breath-amp)); opacity: var(--abqeri-breath-bright); }
}

/* =========================================================
   Abqeri Patch — SVG visuals (light-theme safe)
   - Ensures hero/solution/application SVGs render crisply
   - Keeps motion subtle; respects reduced motion preference
   ========================================================= */

.hero-right img,
.hero-right svg,
.hero-right object,
.hero-right embed{
  width: 100%;
  height: 100%;
  display: block;
}

.hero-right{
  overflow: hidden;
}

.hero-right svg{
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

@media (prefers-reduced-motion: reduce){
  /* Stop CSS-based motion if any gets added later */
  .abqeri-float,
  .abqeri-float *{
    animation: none !important;
    transition: none !important;
  }
}


    /* Homepage hero orbit chips (non-destructive overlay, keeps existing SVG hero intact) */
    .hero-right{ position: relative; }
    .hero-orbit{
      position:absolute;
      inset: 0;
      pointer-events:none;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .hero-orbit .orbit-ring{
      position:absolute;
      width:min(560px, 92%);
      aspect-ratio:1/1;
      border-radius:999px;
      border:1px solid rgba(156,163,175,0.18);
      box-shadow: 0 0 0 1px rgba(242,193,78,0.10) inset;
      background: radial-gradient(circle at 50% 50%, rgba(242,193,78,0.06), rgba(242,193,78,0.00) 55%);
      backdrop-filter: blur(0px);
    }
    .hero-orbit .orbit-core{
      position:absolute;
      display:flex;
      align-items:center;
      justify-content:center;
      width: 220px;
      height: 220px;
      border-radius:999px;
      border:1px solid rgba(17,24,39,0.08);
      background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.65), rgba(255,255,255,0.18));
      box-shadow: 0 16px 44px rgba(17,24,39,0.10);
      transform: translateY(-6px);
    }
    [data-theme="dark"] .hero-orbit .orbit-core{
      background: radial-gradient(circle at 50% 35%, rgba(17,24,39,0.55), rgba(17,24,39,0.12));
      border-color: rgba(255,255,255,0.10);
      box-shadow: 0 16px 44px rgba(0,0,0,0.35);
    }
    .hero-orbit .orbit-core .core-title{
      text-align:center;
      padding: 14px 14px;
      line-height:1.15;
    }
    .hero-orbit .orbit-core .core-title .k{
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      opacity:.72;
      margin-bottom:6px;
    }
    .hero-orbit .orbit-core .core-title .t{
      font-weight:800;
      font-size:18px;
    }
    .hero-orbit .orbit-chip{
      position:absolute;
      display:flex;
      gap:10px;
      align-items:center;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(17,24,39,0.10);
      background: rgba(255,255,255,0.86);
      box-shadow: 0 12px 30px rgba(17,24,39,0.10);
      pointer-events:auto;
      text-decoration:none;
      color: inherit;
      backdrop-filter: blur(6px);
      transition: transform .15s ease, box-shadow .15s ease;
    }
    [data-theme="dark"] .hero-orbit .orbit-chip{
      background: rgba(10,10,12,0.72);
      border-color: rgba(255,255,255,0.12);
      box-shadow: 0 12px 30px rgba(0,0,0,0.40);
    }
    .hero-orbit .orbit-chip:hover{
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 18px 40px rgba(17,24,39,0.14);
    }
    [data-theme="dark"] .hero-orbit .orbit-chip:hover{
      box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    }
    .hero-orbit .chip-ico{
      width:26px;height:26px;border-radius:999px;
      display:inline-flex;align-items:center;justify-content:center;
      background: rgba(242,193,78,0.16);
      border: 1px solid rgba(242,193,78,0.28);
      flex: 0 0 auto;
    }
    .hero-orbit .chip-ico svg{ width:16px;height:16px; opacity: .92; }
    .hero-orbit .chip-txt{ font-weight:700; font-size:13px; white-space:nowrap; }
    .hero-orbit .chip-sub{ font-size:12px; opacity:.70; margin-top:1px; }
    .hero-orbit .chip-stack{ display:flex; flex-direction:column; line-height:1.1; }

    /* positions around the orbit */
    .hero-orbit .pos-top{ transform: translate(-50%, -50%); left:50%; top: 8%; }
    .hero-orbit .pos-right{ transform: translate(-50%, -50%); left: 92%; top: 43%; }
    .hero-orbit .pos-bottom{ transform: translate(-50%, -50%); left:50%; top: 92%; }
    .hero-orbit .pos-left{ transform: translate(-50%, -50%); left: 8%; top: 43%; }
    .hero-orbit .pos-topright{ transform: translate(-50%, -50%); left: 78%; top: 12%; }

    
    /* Micro-interactions: orbit chips feel alive (hover/focus) */
    .orbit-chip{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
    .orbit-chip:hover,
    .orbit-chip:focus-visible{
      transform: translate(-50%, -50%) scale(1.04);
      border-color: rgba(242,193,78,.55);
      box-shadow: 0 10px 26px rgba(0,0,0,.16), 0 0 0 1px rgba(242,193,78,.18);
      background: rgba(255,255,255,.92);
      outline: none;
    }
    /* keep position transforms intact by re-applying per position */
    .orbit-chip.pos-top:hover, .orbit-chip.pos-top:focus-visible{ transform: translate(-50%, -50%) scale(1.04); }
    .orbit-chip.pos-topright:hover, .orbit-chip.pos-topright:focus-visible{ transform: translate(-50%, -50%) scale(1.04); }
    .orbit-chip.pos-right:hover, .orbit-chip.pos-right:focus-visible{ transform: translate(-50%, -50%) scale(1.04); }
    .orbit-chip.pos-bottom:hover, .orbit-chip.pos-bottom:focus-visible{ transform: translate(-50%, -50%) scale(1.04); }
    .orbit-chip.pos-left:hover, .orbit-chip.pos-left:focus-visible{ transform: translate(-50%, -50%) scale(1.04); }

    @media (prefers-reduced-motion: reduce){
      .orbit-chip{ transition:none; }
    }


@media (max-width: 980px){
      .hero-orbit{ display:none; } /* keep mobile clean */
    }


/* =========================================================
   HFA: show fallback text when i18n didn’t populate
   (fixes “blank rectangles”)
   ========================================================= */
.page[data-page="safe_ai"] [data-fallback]:empty::before{
  content: attr(data-fallback);
}

/* Make sure fallback content looks correct per element type */
.page[data-page="safe_ai"] button[data-fallback]:empty::before{
  display: inline-block;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .2px;
}

.page[data-page="safe_ai"] h1[data-fallback]:empty::before,
.page[data-page="safe_ai"] h2[data-fallback]:empty::before,
.page[data-page="safe_ai"] p[data-fallback]:empty::before,
.page[data-page="safe_ai"] div[data-fallback]:empty::before,
.page[data-page="safe_ai"] span[data-fallback]:empty::before{
  display: inline-block;
  color: inherit;
}

/* Make the “mode” buttons look intentional (row of 4) */
.page[data-page="safe_ai"] .modeBtn{
  min-height: 38px;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

/* Scenario buttons (if they show blank) */
.page[data-page="safe_ai"] .btn.scenario{
  min-height: 38px;
}

/* Dropdown row: ensure arrow visible and text readable */
.page[data-page="safe_ai"] select,
.page[data-page="safe_ai"] .select,
.page[data-page="safe_ai"] .dropdown{
  color: var(--text);
}


/*  footer */
  .abqeri-consent{
    margin-top:14px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    background:rgba(255,255,255,.03);
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  .abqeri-consent-text{opacity:.9;font-size:12px}
  .abqeri-consent-actions{display:flex;gap:8px;align-items:center}
  .abqeri-consent-btn{
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.04);
    color:inherit;
    border-radius:10px;
    padding:7px 10px;
    cursor:pointer;
    font-size:12px;
  }
  .abqeri-consent-btn:hover{background:rgba(255,255,255,.07)}



/* ===============================
   Abqeri Shell Layout Fixes
   Prevent footer overlay, make sticky footer, and ensure header menus work
   =============================== */
body.abqeri-shell{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.abqeri-shell > main{
  flex: 1 0 auto;
}
#abqeriHeader{ flex: 0 0 auto; }
#abqeriFooter{ flex: 0 0 auto; margin-top: auto; }

/* Header base */
.site-header{ position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); }
.site-header .nav{ max-width: 1200px; margin: 0 auto; padding: 10px 16px; display:flex; align-items:center; gap:14px; }
.site-header .nav-left{ display:flex; align-items:center; gap:10px; }
.site-header .nav-center{ display:flex; align-items:center; gap:16px; flex: 1 1 auto; justify-content:center; }
.site-header .nav-center a{ color: var(--link); text-decoration:none; font-weight:600; font-size:14px; padding:6px 8px; border-radius:10px; }
.site-header .nav-center a:hover{ background: rgba(0,0,0,0.04); }
:root[data-theme="dark"] .site-header .nav-center a:hover{ background: rgba(255,255,255,0.06); }

.site-header .nav-right{ display:flex; align-items:center; gap:10px; }
.site-header .nav-iconbtn{
  width: 38px; height: 38px;
  display:inline-flex; align-items:center; justify-content:center;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
}
.site-header .nav-iconbtn:hover{ background: rgba(0,0,0,0.04); }
:root[data-theme="dark"] .site-header .nav-iconbtn:hover{ background: rgba(255,255,255,0.06); }

.site-header .nav-burger{ display:none; }
.site-header .nav-burger-lines{ width: 18px; height: 2px; background: currentColor; display:block; position:relative; border-radius:2px; }
.site-header .nav-burger-lines:before,
.site-header .nav-burger-lines:after{ content:""; position:absolute; left:0; width:18px; height:2px; background: currentColor; border-radius:2px; }
.site-header .nav-burger-lines:before{ top:-6px; }
.site-header .nav-burger-lines:after{ top:6px; }

/* Menus */
.site-header .menu{
  position:absolute;
  top: 46px;
  right: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
  padding: 8px;
  z-index: 60;
}
.site-header .nav-lang,
.site-header .nav-account{ position:relative; display:block; }
.site-header .menu button,
.site-header .menu a{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text);
  text-decoration:none;
  cursor:pointer;
  font-size: 13px;
}
.site-header .menu button:hover,
.site-header .menu a:hover{ background: rgba(0,0,0,0.05); }
:root[data-theme="dark"] .site-header .menu button:hover,
:root[data-theme="dark"] .site-header .menu a:hover{ background: rgba(255,255,255,0.08); }

/* Mobile */
@media (max-width: 900px){
  .site-header .nav-center{ display:none; }
  .site-header .nav-burger{ display:inline-flex; }
  .mobile-nav{
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    display:flex;
    flex-direction:column;
    gap: 8px;
  }
  .mobile-nav .mobile-link{
    color: var(--link);
    text-decoration:none;
    font-weight: 650;
    padding: 10px 10px;
    border-radius: 12px;
  }
  .mobile-nav .mobile-link:hover{ background: rgba(0,0,0,0.04); }
  :root[data-theme="dark"] .mobile-nav .mobile-link:hover{ background: rgba(255,255,255,0.06); }
}

/* RTL: menus on left, keep brand right naturally */
html[dir="rtl"] .site-header .nav{ flex-direction: row-reverse; }
html[dir="rtl"] .site-header .nav-center{ justify-content:center; }
html[dir="rtl"] .site-header .nav-lang .menu,
html[dir="rtl"] .site-header .nav-account .menu{ right:auto; left:0; }



/* ---------- Shell header icon buttons: transparent, no border/circles ---------- */
body.abqeri-shell .site-header .nav-iconbtn,
body.abqeri-shell .site-header .nav-avatar{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.abqeri-shell .site-header .nav-iconbtn,
body.abqeri-shell .site-header .nav-avatar{
  border-radius: 10px !important; /* soft shape, not a circle */
}

body.abqeri-shell .site-header .nav-iconbtn:hover,
body.abqeri-shell .site-header .nav-avatar:hover{
  background: color-mix(in srgb, var(--text) 6%, transparent) !important;
}

body.abqeri-shell .site-header .nav-iconbtn:focus-visible,
body.abqeri-shell .site-header .nav-avatar:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--link) 55%, transparent);
  outline-offset: 2px;
}


/* --- Shell flyouts: make language menu respect RTL/LTR (do not affect page content) --- */
body.abqeri-shell .site-header .nav-flyout {
  direction: inherit;
  text-align: start;
}

body.abqeri-shell .site-header #langMenu.nav-flyout .lang-item,
body.abqeri-shell .site-header #accountMenu.nav-flyout .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

html[dir="rtl"] body.abqeri-shell .site-header #langMenu.nav-flyout {
  direction: rtl;
  text-align: right;
  right: 0;
  left: auto;
}

html[dir="ltr"] body.abqeri-shell .site-header #langMenu.nav-flyout {
  direction: ltr;
  text-align: left;
  left: 0;
  right: auto;
}

html[dir="rtl"] body.abqeri-shell .site-header #langMenu.nav-flyout .lang-item {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

html[dir="ltr"] body.abqeri-shell .site-header #langMenu.nav-flyout .lang-item {
  flex-direction: row;
  justify-content: flex-start;
}

/* =========================================================
   OPTIMIZATION APP — FLUENT THEME (AUTO LIGHT/DARK)
   - White/ink (light) + deep slate (dark)
   - Fluent-ish spacing, soft shadows
   - Blue primary buttons, neutral secondary
   - Scoped ONLY to optimization page
   ========================================================= */

/* Default tokens (LIGHT) */
:root{
  --opt-bg: #ffffff;
  --opt-surface: #ffffff;
  --opt-surface-2: #f8fafc;
  --opt-text: #0f172a;          /* ink */
  --opt-muted: #475569;
  --opt-border: #e5e7eb;
  --opt-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --opt-shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.08);
  --opt-radius: 12px;          /* override global 2px lock for this page */
  --opt-blue: #2563eb;
  --opt-blue-hover: #1d4ed8;
  --opt-blue-press: #1e40af;
  --opt-blue-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}

/* Dark tokens when user selects dark theme via shell */
:root[data-theme="dark"]{
  --opt-bg: #0b1220;
  --opt-surface: #0f172a;
  --opt-surface-2: #111c33;
  --opt-text: #e5e7eb;
  --opt-muted: rgba(229,231,235,0.72);
  --opt-border: rgba(229,231,235,0.14);
  --opt-shadow: 0 16px 44px rgba(0,0,0,0.55);
  --opt-shadow-sm: 0 10px 28px rgba(0,0,0,0.45);
  --opt-blue: #3b82f6;
  --opt-blue-hover: #2563eb;
  --opt-blue-press: #1d4ed8;
  --opt-blue-shadow: 0 12px 26px rgba(59, 130, 246, 0.24);
}

/* If the site did not set a theme yet, honor OS preference */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --opt-bg: #0b1220;
    --opt-surface: #0f172a;
    --opt-surface-2: #111c33;
    --opt-text: #e5e7eb;
    --opt-muted: rgba(229,231,235,0.72);
    --opt-border: rgba(229,231,235,0.14);
    --opt-shadow: 0 16px 44px rgba(0,0,0,0.55);
    --opt-shadow-sm: 0 10px 28px rgba(0,0,0,0.45);
    --opt-blue: #3b82f6;
    --opt-blue-hover: #2563eb;
    --opt-blue-press: #1d4ed8;
    --opt-blue-shadow: 0 12px 26px rgba(59, 130, 246, 0.24);
  }
}

/* Page base */
body[data-page="optimization"]{
  background: var(--opt-bg) !important;
  color: var(--opt-text) !important;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
body[data-page="optimization"] main,
body[data-page="optimization"] .opt-wrap{
  background: transparent !important;
}

/* Headings / text */
body[data-page="optimization"] h1,
body[data-page="optimization"] h2,
body[data-page="optimization"] h3,
body[data-page="optimization"] label,
body[data-page="optimization"] p,
body[data-page="optimization"] th,
body[data-page="optimization"] td{
  color: var(--opt-text) !important;
}
body[data-page="optimization"] .muted,
body[data-page="optimization"] .note{
  color: var(--opt-muted) !important;
}

/* Cards */
body[data-page="optimization"] .card,
body[data-page="optimization"] .mini-card,
body[data-page="optimization"] details{
  background: var(--opt-surface) !important;
  border: 1px solid var(--opt-border) !important;
  border-radius: var(--opt-radius) !important;
  box-shadow: var(--opt-shadow-sm) !important;
}

/* Inputs */
body[data-page="optimization"] input,
body[data-page="optimization"] select,
body[data-page="optimization"] textarea{
  background: var(--opt-surface) !important;
  color: var(--opt-text) !important;
  border: 1px solid var(--opt-border) !important;
  border-radius: 10px !important;
}

/* Run bar */
body[data-page="optimization"] .runbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 12px 0;
}

/* Buttons: reset legacy gold/dark buttons and apply Fluent style */
body[data-page="optimization"] .btn{
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px !important; /* Fluent pill */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  user-select: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
body[data-page="optimization"] .btn.primary{
  background: var(--opt-blue) !important;
  color: #ffffff !important;
  box-shadow: var(--opt-blue-shadow) !important;
}
body[data-page="optimization"] .btn.primary:hover{ background: var(--opt-blue-hover) !important; transform: translateY(-1px); }
body[data-page="optimization"] .btn.primary:active{ background: var(--opt-blue-press) !important; transform: translateY(0px); }

body[data-page="optimization"] .btn.secondary{
  background: var(--opt-surface-2) !important;
  color: var(--opt-text) !important;
  border: 1px solid var(--opt-border) !important;
  box-shadow: var(--opt-shadow-sm) !important;
}
body[data-page="optimization"] .btn.secondary:hover{ transform: translateY(-1px); }

body[data-page="optimization"] .btn[disabled]{ opacity: .55; cursor: not-allowed; transform:none; box-shadow:none !important; }

/* Tables */
body[data-page="optimization"] th{
  background: var(--opt-surface-2) !important;
}
body[data-page="optimization"] th, 
body[data-page="optimization"] td{
  border-bottom: 1px solid var(--opt-border) !important;
}

/* Pills */
body[data-page="optimization"] .pill{
  border-radius: 999px !important;
  border: 1px solid var(--opt-border) !important;
  background: var(--opt-surface-2) !important;
  color: var(--opt-text) !important;
}

/* Trace */
body[data-page="optimization"] .trace .dot{ background:#dc2626 !important; }
body[data-page="optimization"] .trace .done .dot{ background:#16a34a !important; }



/* --- Quantum explainer panel (Optimization page) --- */
.qc-explainer{
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--panel-bg, #fafafa);
  border-radius: 10px;
  line-height: 1.55;
}
.qc-lead{ font-size: 1.05rem; margin: 0 0 .75rem; }
.qc-explainer h3, .qc-explainer h4{ margin: 1rem 0 .5rem; }
.qc-explainer ul{ margin: .4rem 0 .8rem 1.2rem; }
.qc-close{ margin: .85rem 0 0; font-size: 1.05rem; }


/* --- Mobile-friendly glossary sheet + explain panel --- */
.glossary-bar{
  display:flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content:flex-start;
  margin: 0.75rem 0 1rem;
}

.btn-secondary{
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: transparent;
  cursor: pointer;
}

.explain-box{
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--panel-bg, #fafafa);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
}

.explain-title{
  font-weight: 700;
  margin-bottom: .5rem;
}

.explain-text{
  line-height: 1.55;
  white-space: pre-wrap;
}

.sheet{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.sheet.open{ display:block; }

.sheet-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.45);
}

.sheet-panel{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(720px, 100%);
  max-height: 82vh;
  background: var(--panel-bg, #fff);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
}

.sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

.sheet-title{ font-size: 1.05rem; font-weight: 600; }

.sheet-close{
  border: none;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
}

.sheet-body{
  padding: 1rem;
  overflow:auto;
}

.glossary-item{ margin-bottom: 0.9rem; }
.glossary-term{ font-weight: 700; margin-bottom: 0.2rem; }
.glossary-def{ opacity: 0.9; line-height: 1.5; }

.sheet-footer{
  padding: 0.9rem 1rem;
  border-top: 1px solid rgba(0,0,0,0.10);
  display:flex;
  justify-content:flex-end;
  gap: 0.5rem;
}

.btn-primary{
  padding: 0.6rem 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.06);
  cursor: pointer;
}


.explain-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.5rem;
}

.btn-tertiary{
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: transparent;
  cursor: pointer;
  font-size: .95rem;
}

.copy-toast{
  margin-top: .6rem;
  font-size: .9rem;
  opacity: .85;
}


/* --- Insight + demo toggle + learning panel + print summary --- */
.toggle{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
  user-select:none;
}
.toggle input{ display:none; }
.toggle-ui{
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.2);
  position: relative;
  background: rgba(0,0,0,0.06);
}
.toggle-ui::after{
  content:"";
  position:absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  transition: transform .18s ease;
}
.toggle input:checked + .toggle-ui::after{ transform: translateX(18px); }
.toggle-label{ font-size: .95rem; }

.insight-box{
  margin: 0 0 1.1rem;
  padding: 1rem 1.25rem;
  background: var(--panel-bg, #fafafa);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
}
.insight-title{ font-weight: 700; margin-bottom: .35rem; }
.insight-text{ line-height: 1.55; white-space: pre-wrap; }

.learn-panel{
  margin: 1rem 0 1.6rem;
  padding: 1.25rem 1.5rem;
  background: var(--panel-bg, #fafafa);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  line-height: 1.55;
}
.learn-panel h3{ margin-top: 0; }

.print-summary{ display:none; }

.demo-mode details,
.demo-mode #resultDetails,
.demo-mode #reportDetails{
  display:none !important;
}

@media print{
  body *{ visibility: hidden !important; }
  #printSummary, #printSummary *{ visibility: visible !important; }
  #printSummary{
    display:block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 1rem;
  }
}

.print-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.print-card{
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}
.print-card h2{ margin: 0 0 .5rem; font-size: 1.05rem; }
.print-lead{ margin-top: .25rem; margin-bottom: 1rem; }


/* ===== Auth & Settings pages (mobile-first) ===== */
.wrap{ max-width: 980px; margin: 0 auto; padding: 18px 12px 40px; }
.page-content{ flex: 1; }
.card{ border: 1px solid rgba(242,199,105,0.25); background: rgba(10,10,10,0.45); border-radius: var(--radius-lg, 2px); padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.card-header .kicker{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.card-header .title{ margin: 6px 0 6px; font-size: 22px; }
.card-header .subtitle{ margin: 0; opacity: .9; font-size: 13px; line-height: 1.5; }

.what-details{ margin: 12px 0 14px; border: 1px solid rgba(242,199,105,0.22); border-radius: var(--radius-md, 2px); padding: 10px 12px; background: rgba(0,0,0,0.18); }
.what-details summary{ cursor: pointer; user-select: none; font-weight: 650; }
.what-body{ margin-top: 8px; font-size: 13px; opacity: .92; line-height: 1.5; }

.auth-grid{ display: grid; grid-template-columns: 1fr; gap: 14px; }
.auth-pane{ border: 1px solid rgba(242,199,105,0.18); border-radius: var(--radius-md, 2px); padding: 14px; background: rgba(0,0,0,0.16); }
.h2{ margin: 0 0 10px; font-size: 16px; }
.form{ display: grid; gap: 10px; }
.label span{ display: block; margin-bottom: 6px; font-size: 12px; opacity: .9; }
.input{ width: 100%; padding: 10px 10px; border-radius: var(--radius-sm, 2px); border: 1px solid rgba(242,199,105,0.25); background: rgba(0,0,0,0.25); color: var(--gold, #f2c769); outline: none; }
.input:focus{ border-color: rgba(242,199,105,0.6); box-shadow: 0 0 0 3px rgba(242,199,105,0.12); }
.btn{ display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm, 2px); border: 1px solid rgba(242,199,105,0.35); background: transparent; color: var(--gold, #f2c769); font-weight: 650; cursor: pointer; }
.btn.primary{ background: linear-gradient(180deg, rgba(242,199,105,0.22), rgba(0,0,0,0.22)); }
.btn:active{ transform: translateY(1px); }
.divider{ display: flex; align-items: center; gap: 10px; margin: 12px 0; opacity: .75; }
.divider:before, .divider:after{ content:""; height: 1px; flex: 1; background: rgba(242,199,105,0.18); }
.divider span{ font-size: 12px; }
.oauth-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.msg{ margin-top: 6px; font-size: 12px; min-height: 18px; }
.msg.ok{ color: #9be28b; }
.msg.err{ color: #ff8f8f; }
.note{ margin-top: 10px; font-size: 12px; opacity: .85; }
.note .link{ text-decoration: underline; }

.grid-2{ display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
.panel{ border: 1px solid rgba(242,199,105,0.18); border-radius: var(--radius-md, 2px); padding: 14px; background: rgba(0,0,0,0.16); }
.profile-row{ display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.avatar-big{ width: 64px; height: 64px; border-radius: 999px; border: 1px solid rgba(242,199,105,0.25); overflow: hidden; display: grid; place-items: center; background: rgba(0,0,0,0.25); }
.avatar-big img{ width: 100%; height: 100%; object-fit: cover; }
.avatar-big span{ font-weight: 800; letter-spacing: .06em; }
.meta-line{ font-size: 12px; opacity: .92; margin-bottom: 4px; }
.meta-k{ opacity: .75; margin-inline-end: 6px; }
.meta-v{ font-weight: 650; }
.plans{ display: grid; gap: 10px; }
.plan-card{ border: 1px solid rgba(242,199,105,0.18); border-radius: var(--radius-md, 2px); padding: 12px; background: rgba(0,0,0,0.12); }
.plan-title{ font-weight: 800; margin-bottom: 4px; }
.plan-price{ font-size: 12px; opacity: .9; margin-bottom: 6px; }
.plan-desc{ font-size: 12px; opacity: .85; margin-bottom: 10px; }
.muted{ opacity: .8; font-size: 12px; }

@media (min-width: 900px){
  .auth-grid{ grid-template-columns: 1fr 1fr; }
  .grid-2{ grid-template-columns: 1fr 1fr; }
}


/* ===== Auth & Settings pages (mobile-first) ===== */
.wrap{ max-width: 980px; margin: 0 auto; padding: 18px 12px 40px; }
.page-content{ flex: 1; }
.card{ border: 1px solid rgba(242,199,105,0.25); background: rgba(10,10,10,0.45); border-radius: var(--radius-lg, 2px); padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.card-header .kicker{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.card-header .title{ margin: 6px 0 6px; font-size: 22px; }
.card-header .subtitle{ margin: 0; opacity: .9; font-size: 13px; line-height: 1.5; }

.what-details{ margin: 12px 0 14px; border: 1px solid rgba(242,199,105,0.22); border-radius: var(--radius-md, 2px); padding: 10px 12px; background: rgba(0,0,0,0.18); }
.what-details summary{ cursor: pointer; user-select: none; font-weight: 650; }
.what-body{ margin-top: 8px; font-size: 13px; opacity: .92; line-height: 1.5; }

.auth-grid{ display: grid; grid-template-columns: 1fr; gap: 14px; }
.auth-pane{ border: 1px solid rgba(242,199,105,0.18); border-radius: var(--radius-md, 2px); padding: 14px; background: rgba(0,0,0,0.16); }
.h2{ margin: 0 0 10px; font-size: 16px; }
.form{ display: grid; gap: 10px; }
.label span{ display: block; margin-bottom: 6px; font-size: 12px; opacity: .9; }
.input{ width: 100%; padding: 10px 10px; border-radius: var(--radius-sm, 2px); border: 1px solid rgba(242,199,105,0.25); background: rgba(0,0,0,0.25); color: var(--gold, #f2c769); outline: none; }
.input:focus{ border-color: rgba(242,199,105,0.6); box-shadow: 0 0 0 3px rgba(242,199,105,0.12); }
.btn{ display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm, 2px); border: 1px solid rgba(242,199,105,0.35); background: transparent; color: var(--gold, #f2c769); font-weight: 650; cursor: pointer; }
.btn.primary{ background: linear-gradient(180deg, rgba(242,199,105,0.22), rgba(0,0,0,0.22)); }
.btn:active{ transform: translateY(1px); }
.divider{ display: flex; align-items: center; gap: 10px; margin: 12px 0; opacity: .75; }
.divider:before, .divider:after{ content:""; height: 1px; flex: 1; background: rgba(242,199,105,0.18); }
.divider span{ font-size: 12px; }
.oauth-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.msg{ margin-top: 6px; font-size: 12px; min-height: 18px; }
.msg.ok{ color: #9be28b; }
.msg.err{ color: #ff8f8f; }
.note{ margin-top: 10px; font-size: 12px; opacity: .85; }
.note .link{ text-decoration: underline; }

.grid-2{ display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
.panel{ border: 1px solid rgba(242,199,105,0.18); border-radius: var(--radius-md, 2px); padding: 14px; background: rgba(0,0,0,0.16); }
.profile-row{ display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.avatar-big{ width: 64px; height: 64px; border-radius: 999px; border: 1px solid rgba(242,199,105,0.25); overflow: hidden; display: grid; place-items: center; background: rgba(0,0,0,0.25); }
.avatar-big img{ width: 100%; height: 100%; object-fit: cover; }
.avatar-big span{ font-weight: 800; letter-spacing: .06em; }
.meta-line{ font-size: 12px; opacity: .92; margin-bottom: 4px; }
.meta-k{ opacity: .75; margin-inline-end: 6px; }
.meta-v{ font-weight: 650; }
.plans{ display: grid; gap: 10px; }
.plan-card{ border: 1px solid rgba(242,199,105,0.18); border-radius: var(--radius-md, 2px); padding: 12px; background: rgba(0,0,0,0.12); }
.plan-title{ font-weight: 800; margin-bottom: 4px; }
.plan-price{ font-size: 12px; opacity: .9; margin-bottom: 6px; }
.plan-desc{ font-size: 12px; opacity: .85; margin-bottom: 10px; }
.muted{ opacity: .8; font-size: 12px; }

@media (min-width: 900px){
  .auth-grid{ grid-template-columns: 1fr 1fr; }
  .grid-2{ grid-template-columns: 1fr 1fr; }
}


:root{
  --qphi: 0.5;
  --qseed: 0;
  --qw0: .25; --qw1: .25; --qw2: .25; --qw3: .25;
}


.hero-bg{
  animation-duration: calc(10s - (var(--qphi) * 6s));
  filter: hue-rotate(calc(var(--qphi) * 40deg));
}


.card:nth-of-type(1){ transform: scale(calc(1 + (var(--qw0) - .25) * .18)); }
.card:nth-of-type(2){ transform: scale(calc(1 + (var(--qw1) - .25) * .18)); }
.card:nth-of-type(3){ transform: scale(calc(1 + (var(--qw2) - .25) * .18)); }
.card:nth-of-type(4){ transform: scale(calc(1 + (var(--qw3) - .25) * .18)); }

:root[data-q-featured="0"] .card:nth-of-type(1),
:root[data-q-featured="1"] .card:nth-of-type(2),
:root[data-q-featured="2"] .card:nth-of-type(3),
:root[data-q-featured="3"] .card:nth-of-type(4){
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}




.card:nth-of-type(1){ transform: scale(calc(1 + (var(--qw0) - .25) * .18)); }
.card:nth-of-type(2){ transform: scale(calc(1 + (var(--qw1) - .25) * .18)); }
.card:nth-of-type(3){ transform: scale(calc(1 + (var(--qw2) - .25) * .18)); }
.card:nth-of-type(4){ transform: scale(calc(1 + (var(--qw3) - .25) * .18)); }

:root[data-q-featured="0"] .card:nth-of-type(1),
:root[data-q-featured="1"] .card:nth-of-type(2),
:root[data-q-featured="2"] .card:nth-of-type(3),
:root[data-q-featured="3"] .card:nth-of-type(4){
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}


/* ===========================
   QU-K1: Quantum UI Layer (safe)
   =========================== */

:root{
  --qphi: 0.5;
  --qw0: .25; --qw1: .25; --qw2: .25; --qw3: .25;
}

/* HERO: make the existing overlay “breathe” by qphi */
.page-home .hero-right{
  position: relative;
}
.page-home .hero-img-overlay{
  opacity: calc(0.18 + (var(--qphi) * 0.18));
  filter: blur(calc(10px + (var(--qphi) * 10px)));
  transition: opacity var(--qhero, 350ms) ease, filter var(--qhero, 350ms) ease;
}

/* Safe wow: gentle breathing shimmer, quantum-timed */
@media (prefers-reduced-motion: no-preference){
  .page-home .hero-img-overlay{ animation: quk1-breathe var(--qbreath, 8s) ease-in-out infinite; }
}
@keyframes quk1-breathe{
  0%,100%{ opacity: calc(0.16 + (var(--qphi) * 0.16)); filter: blur(calc(10px + (var(--qphi) * 10px))); }
  50%{ opacity: calc(0.22 + (var(--qphi) * 0.22)); filter: blur(calc(14px + (var(--qphi) * 14px))); }
}

/* Cards: subtle lift + shadow bias using weights */
.page-home .cards .card{
  transition: box-shadow var(--qhover, 240ms) ease, filter var(--qhover, 240ms) ease, outline-color var(--qhover, 240ms) ease;
  outline: 1px solid rgba(242,193,78,0.00);
}

/* Weight -> stronger shadow + slightly brighter */
.page-home .cards .card:nth-of-type(1){
  box-shadow: 0 10px 26px rgba(0,0,0, calc(0.08 + (var(--qw0) * 0.10)));
  filter: brightness(calc(1 + (var(--qw0) - .25) * 0.10));
}
.page-home .cards .card:nth-of-type(2){
  box-shadow: 0 10px 26px rgba(0,0,0, calc(0.08 + (var(--qw1) * 0.10)));
  filter: brightness(calc(1 + (var(--qw1) - .25) * 0.10));
}
.page-home .cards .card:nth-of-type(3){
  box-shadow: 0 10px 26px rgba(0,0,0, calc(0.08 + (var(--qw2) * 0.10)));
  filter: brightness(calc(1 + (var(--qw2) - .25) * 0.10));
}
.page-home .cards .card:nth-of-type(4){
  box-shadow: 0 10px 26px rgba(0,0,0, calc(0.08 + (var(--qw3) * 0.10)));
  filter: brightness(calc(1 + (var(--qw3) - .25) * 0.10));
}

/* Featured card: quiet gold outline + stronger depth */
:root[data-q-featured="0"] .page-home .cards .card:nth-of-type(1),
:root[data-q-featured="1"] .page-home .cards .card:nth-of-type(2),
:root[data-q-featured="2"] .page-home .cards .card:nth-of-type(3),
:root[data-q-featured="3"] .page-home .cards .card:nth-of-type(4){
  outline-color: rgba(242,193,78,0.28);
  box-shadow: 0 18px 44px rgba(0,0,0,0.16);
}


/* QU-K1: make hover timing quantum-driven without redesign */
.page-home .module-card,
.page-home .card,
.page-home .feature-card{
  transition-duration: var(--qhover, 240ms) !important;
}