:root {
  --bg: #0B0D12;
  --bg2: #10131A;
  --card: #151921;
  --card-hover: #1B202B;
  --border: #232836;
  --border-light: #2E3446;
  --text: #E4E2DF;
  --text-dim: #A8AAB4;
  --muted: #6B6E7A;
  --accent: #D4A853;
  --accent-dim: rgba(212,168,83,0.15);
  --accent-hover: #E2BB6A;
  --safe: #34D399;
  --safe-dim: rgba(52,211,153,0.12);
  --danger: #F87171;
  --danger-dim: rgba(248,113,113,0.12);
  --warn: #FBBF24;
  --warn-dim: rgba(251,191,36,0.12);
  --info: #60A5FA;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
h1,h2,h3,.playfair { font-family:'Playfair Display',serif; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:3px; }

/* Background atmosphere */
body::before {
  content:''; position:fixed; top:0; left:0; right:0; bottom:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(212,168,83,0.04) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 80% 80%, rgba(52,211,153,0.02) 0%, transparent 50%);
}
/* Dot pattern */
body::after {
  content:''; position:fixed; top:0; left:0; right:0; bottom:0; z-index:0; pointer-events:none; opacity:0.3;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Sidebar */
#sidebar {
  position:fixed; left:0; top:0; bottom:0; width:260px; background:var(--bg2);
  border-right:1px solid var(--border); z-index:40; display:flex; flex-direction:column;
  transition: transform 0.3s ease;
}
.sidebar-logo { padding:24px 20px 20px; border-bottom:1px solid var(--border); }
.brand-lockup {
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-mark {
  width:42px;
  height:42px;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(212,168,83,0.35), 0 10px 28px rgba(0,0,0,0.28);
  flex:none;
}
.sidebar-logo h1 { font-size:20px; line-height:1.02; color:var(--accent); letter-spacing:0; }
.brand-tagline {
  color:var(--text);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase;
  margin-top:3px;
}
.brand-presented {
  color:var(--muted);
  font-size:9.5px;
  letter-spacing:.8px;
  margin-top:3px;
}
.sidebar-logo span { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:2px; display:block; margin-top:4px; }
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 0; }
.legal-links {
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin:0 0 12px;
  font-size:11px;
  line-height:1.3;
}
.legal-links a {
  color:var(--muted);
  text-decoration:none;
}
.legal-links a:hover { color:var(--accent); }
.app-disclaimer {
  margin:0 0 12px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.45;
}
.modal-disclaimer {
  margin:12px 0 0;
  text-align:left;
}
.nav-item {
  display:flex; align-items:center; gap:12px; padding:11px 20px; cursor:pointer;
  color:var(--text-dim); font-size:13.5px; font-weight:500; transition:all 0.2s;
  border-left:3px solid transparent; position:relative;
}
.nav-item:hover { color:var(--text); background:rgba(255,255,255,0.02); }
.nav-item.active {
  color:var(--accent); background:var(--accent-dim); border-left-color:var(--accent);
}
.nav-item i { width:20px; text-align:center; font-size:14px; }
.nav-item .badge {
  margin-left:auto; background:var(--accent); color:#0B0D12; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:10px;
}
.sidebar-footer { padding:16px 20px; border-top:1px solid var(--border); }

/* Top Bar */
#topbar {
  position:fixed; top:0; left:260px; right:0; height:64px; background:rgba(11,13,18,0.85);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border); z-index:35;
  display:flex; align-items:center; justify-content:space-between; padding:0 32px;
}
.topbar-brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding-right:16px;
  margin-right:2px;
  border-right:1px solid var(--border);
}
.topbar-brand-mark {
  width:32px;
  height:32px;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(212,168,83,0.28);
}
.topbar-brand-name {
  color:var(--accent);
  font-family:'Playfair Display',serif;
  font-size:15px;
  font-weight:800;
  line-height:1.05;
}
.topbar-brand-tagline {
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-top:2px;
}
.score-ring {
  width:44px; height:44px; border-radius:50%; position:relative;
  background: conic-gradient(var(--accent) calc(var(--pct) * 3.6deg), var(--border) 0);
  transition: --pct 0.6s ease;
}
.score-ring-inner {
  position:absolute; inset:4px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--accent);
}

/* Main Content */
#main-wrapper { margin-left:260px; min-height:100vh; position:relative; z-index:1; }
#content { padding:88px 32px 48px; max-width:960px; margin:0 auto; }
.section-enter { animation: sectionIn 0.4s ease forwards; }
@keyframes sectionIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

/* Cards */
.shield-card {
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:24px; transition: border-color 0.2s, box-shadow 0.2s;
}
.shield-card:hover { border-color:var(--border-light); }
.shield-card-accent { border-color:rgba(212,168,83,0.3); box-shadow:0 0 30px rgba(212,168,83,0.05); }
.private-dossier {
  background:
    radial-gradient(circle at 50% 0%, rgba(212,168,83,0.12), transparent 34%),
    linear-gradient(145deg, #050505, #11100c 52%, #050505);
  border:1px solid rgba(212,168,83,0.36);
  box-shadow:0 24px 80px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.03);
}
.dossier-kicker {
  color:var(--accent);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:800;
}
.dossier-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.dossier-metric {
  background:rgba(0,0,0,0.26);
  border:1px solid rgba(212,168,83,0.22);
  border-radius:10px;
  padding:16px;
}
.dossier-metric .label {
  color:var(--muted);
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:800;
}
.dossier-metric .value {
  margin-top:7px;
  font-size:22px;
  line-height:1.15;
  font-weight:800;
}
.gated-preview {
  position:relative;
  overflow:hidden;
  min-height:150px;
}
.gated-preview .preview-lines {
  filter:blur(4px);
  opacity:.38;
  margin-top:14px;
}
.preview-line {
  height:9px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(212,168,83,0.35), rgba(255,255,255,0.08));
  margin-bottom:9px;
}
.preview-lock {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}

.ecosystem-hero {
  padding:42px;
  margin-bottom:24px;
}
.hero-brand-lockup {
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
}
.hero-brand-mark {
  width:76px;
  height:76px;
  border-radius:18px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(212,168,83,0.42), 0 18px 50px rgba(0,0,0,0.45);
  flex:none;
}
.ecosystem-hero h2 {
  color:var(--accent);
  font-size:46px;
  line-height:1;
  margin:8px 0 8px;
}
.hero-tagline {
  color:var(--text);
  font-size:13px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}
.hero-presented {
  color:var(--muted);
  font-size:12px;
  letter-spacing:1.2px;
  margin-top:6px;
}
.ecosystem-hero p {
  color:var(--text-dim);
  max-width:760px;
  font-size:16px;
  line-height:1.7;
}
.ecosystem-proof {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.ecosystem-proof span {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(212,168,83,0.26);
  background:rgba(0,0,0,0.24);
  border-radius:8px;
  padding:9px 12px;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
}
.wealth-selector-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.wealth-card {
  position:relative;
  min-height:330px;
  text-align:left;
  background:linear-gradient(145deg, rgba(21,25,33,0.98), rgba(5,5,5,0.96));
  border:1px solid var(--border);
  border-radius:12px;
  padding:22px;
  color:var(--text);
  font-family:inherit;
  cursor:pointer;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.wealth-card:hover,
.wealth-card.active {
  border-color:rgba(212,168,83,0.7);
  transform:translateY(-2px);
  box-shadow:0 18px 55px rgba(0,0,0,0.32);
}
.wealth-card.coming-soon {
  border-color:rgba(212,168,83,0.2);
}
.wealth-card > i {
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--accent-dim);
  color:var(--accent);
  font-size:20px;
  margin-bottom:18px;
}
.wealth-card strong {
  display:block;
  color:var(--accent);
  font-family:'Playfair Display',serif;
  font-size:24px;
  line-height:1.1;
  margin-bottom:8px;
}
.wealth-card em {
  display:block;
  color:var(--text);
  font-style:normal;
  font-size:12px;
  font-weight:800;
  line-height:1.4;
  margin-bottom:12px;
}
.wealth-card span:last-child {
  color:var(--text-dim);
  display:block;
  font-size:13px;
  line-height:1.55;
}
.wealth-protects {
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(212,168,83,0.16);
  color:var(--text-dim);
  font-size:12.5px;
  line-height:1.5;
}
.wealth-protects b {
  color:var(--accent);
}
.wealth-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.wealth-actions .btn-primary,
.wealth-actions .btn-secondary,
.wealth-actions .btn-ghost {
  padding:9px 12px;
  font-size:12px;
}
.wealth-status {
  position:absolute;
  top:14px;
  right:14px;
  color:var(--accent);
  border:1px solid rgba(212,168,83,0.35);
  border-radius:6px;
  padding:4px 7px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
  text-transform:uppercase;
}
.wealth-card.coming-soon .wealth-status {
  background:rgba(212,168,83,0.12);
}
.wealth-info-icon {
  width:58px;
  height:58px;
  border-radius:14px;
  background:var(--accent-dim);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:16px;
}
.wealth-info-modal {
  max-width:560px;
}
.wealth-info-protects {
  background:var(--accent-dim);
  border:1px solid rgba(212,168,83,0.24);
  border-radius:10px;
  padding:14px;
}
.wealth-info-protects p {
  color:var(--text);
  line-height:1.6;
  font-size:14px;
  margin:0;
}
.early-access-form {
  display:grid;
  gap:10px;
  margin-top:16px;
}
.early-access-form label {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-top:4px;
}
.shield-textarea {
  min-height:108px;
  resize:vertical;
  line-height:1.55;
}
.form-error {
  min-height:18px;
  color:var(--danger);
  font-size:12px;
  line-height:1.4;
}
.early-access-submit {
  width:100%;
  justify-content:center;
}
.early-access-success {
  margin-top:16px;
  padding:18px;
  border:1px solid rgba(52,211,153,0.28);
  background:var(--safe-dim);
  border-radius:12px;
  text-align:center;
}
.early-access-success i {
  color:var(--safe);
  font-size:30px;
  margin-bottom:10px;
}
.early-access-success p {
  color:var(--text);
  font-size:14px;
  line-height:1.6;
  margin:0;
}
.product-path-lockup {
  display:flex;
  align-items:center;
  gap:16px;
}
.product-path-logo {
  width:70px;
  height:70px;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(212,168,83,0.38), 0 16px 44px rgba(0,0,0,0.34);
  flex:none;
}
.product-path-subtitle {
  color:var(--text-dim);
  font-size:14px;
  line-height:1.55;
  max-width:720px;
}
.entry-mode-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.entry-mode-card {
  display:flex;
  flex-direction:column;
  min-height:320px;
  cursor:pointer;
}
.entry-mode-card p {
  color:var(--text-dim);
  font-size:14px;
  line-height:1.6;
  margin:0 0 22px;
}
.entry-mode-card .btn-primary,
.entry-mode-card .btn-secondary {
  width:100%;
  justify-content:center;
  margin-top:auto;
  min-height:56px;
  text-align:center;
}

/* Stacked bar */
.stack-bar { display:flex; height:48px; border-radius:8px; overflow:hidden; position:relative; }
.stack-seg { height:100%; display:flex; align-items:center; justify-content:center; transition:width 0.8s ease; min-width:2px; position:relative; }
.stack-seg span { font-size:11px; font-weight:600; white-space:nowrap; padding:0 8px; text-shadow:0 1px 2px rgba(0,0,0,0.5); }

/* Waterfall steps */
.wf-step { display:flex; align-items:center; gap:16px; margin-bottom:8px; }
.wf-label { width:160px; text-align:right; font-size:13px; color:var(--text-dim); flex-shrink:0; }
.wf-bar-wrap { flex:1; height:36px; background:var(--bg); border-radius:6px; overflow:hidden; position:relative; }
.wf-bar { height:100%; border-radius:6px; display:flex; align-items:center; padding-left:12px; transition:width 0.8s ease; }
.wf-value { font-size:13px; font-weight:600; white-space:nowrap; }
.wf-reduction { font-size:11px; color:var(--danger); margin-left:12px; flex-shrink:0; font-weight:500; }

/* Form controls */
.shield-input {
  width:100%; padding:12px 16px; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:14px; font-family:inherit;
  transition: border-color 0.2s, box-shadow 0.2s; outline:none;
}
.shield-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.shield-select {
  width:100%; padding:12px 16px; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:14px; font-family:inherit;
  appearance:none; cursor:pointer; outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B6E7A' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  transition: border-color 0.2s;
}
.shield-select:focus { border-color:var(--accent); }

/* Buttons */
.btn-primary {
  padding:12px 28px; background:var(--accent); color:#0B0D12; border:none; border-radius:8px;
  font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;
  transition: background 0.2s, transform 0.15s; display:inline-flex; align-items:center; gap:8px;
}
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }
.btn-secondary {
  padding:10px 20px; background:transparent; color:var(--accent); border:1px solid var(--accent);
  border-radius:8px; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer;
  transition: all 0.2s; display:inline-flex; align-items:center; gap:8px;
}
.btn-secondary:hover { background:var(--accent-dim); }
.btn-ghost {
  padding:8px 16px; background:transparent; color:var(--text-dim); border:none;
  border-radius:6px; font-size:13px; font-weight:500; font-family:inherit; cursor:pointer;
  transition:all 0.2s;
}
.btn-ghost:hover { color:var(--text); background:rgba(255,255,255,0.05); }

/* Toggle group */
.toggle-group { display:flex; background:var(--bg); border-radius:8px; padding:3px; border:1px solid var(--border); }
.toggle-opt {
  flex:1; padding:8px 16px; text-align:center; font-size:13px; font-weight:500;
  cursor:pointer; border-radius:6px; transition:all 0.2s; color:var(--muted);
}
.toggle-opt.active { background:var(--accent); color:#0B0D12; font-weight:600; }
.toggle-opt:not(.active):hover { color:var(--text-dim); }

/* Quiz option */
.quiz-opt {
  padding:14px 18px; border:1px solid var(--border); border-radius:10px; cursor:pointer;
  transition:all 0.2s; display:flex; align-items:center; gap:12px;
}
.quiz-opt:hover { border-color:var(--border-light); background:rgba(255,255,255,0.02); }
.quiz-opt.selected-yes { border-color:var(--danger); background:var(--danger-dim); }
.quiz-opt.selected-no { border-color:var(--safe); background:var(--safe-dim); }
.quiz-radio {
  width:20px; height:20px; border-radius:50%; border:2px solid var(--border-light);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s;
}
.quiz-opt.selected-yes .quiz-radio { border-color:var(--danger); }
.quiz-opt.selected-yes .quiz-radio::after { content:''; width:10px; height:10px; border-radius:50%; background:var(--danger); }
.quiz-opt.selected-no .quiz-radio { border-color:var(--safe); }
.quiz-opt.selected-no .quiz-radio::after { content:''; width:10px; height:10px; border-radius:50%; background:var(--safe); }

/* Checklist */
.check-item {
  display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:8px;
  cursor:pointer; transition:background 0.2s;
}
.check-item:hover { background:rgba(255,255,255,0.02); }
.check-box {
  width:22px; height:22px; border-radius:6px; border:2px solid var(--border-light);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s;
}
.check-item.checked .check-box { border-color:var(--safe); background:var(--safe); }
.check-item.checked .check-box::after { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:11px; color:#0B0D12; }

/* Stat mini card */
.stat-card {
  text-align:center;
  padding:20px 16px;
  min-width:0;
  overflow:hidden;
}
.stat-value {
  font-size:clamp(20px, 1.45vw, 30px);
  font-weight:700;
  line-height:1.14;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.stat-label { font-size:12px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:1px; }

/* Tags */
.tag { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:6px; font-size:11px; font-weight:600; }
.tag-safe { background:var(--safe-dim); color:var(--safe); }
.tag-danger { background:var(--danger-dim); color:var(--danger); }
.tag-warn { background:var(--warn-dim); color:var(--warn); }

/* Modal */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:100; display:none;
  align-items:center; justify-content:center; padding:24px 12px; backdrop-filter:blur(4px);
  overflow-y:auto;
}
.modal-overlay.open { display:flex; }
.modal-box {
  position:relative;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:32px; max-width:560px; width:min(560px, calc(100vw - 24px)); animation: modalIn 0.3s ease;
  max-height:92vh;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.modal-close {
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg2);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.2s;
}
.modal-close:hover {
  color:var(--text);
  border-color:var(--accent);
}
@keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }

/* Toast */
#toast {
  position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:8px;
}
.toast-item {
  padding:14px 20px; background:var(--card); border:1px solid var(--border); border-radius:10px;
  font-size:13px; font-weight:500; display:flex; align-items:center; gap:10px;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
@keyframes toastIn { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { to { opacity:0; transform:translateX(40px); } }

/* Mobile bottom nav */
#mobile-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; background:var(--bg2);
  border-top:1px solid var(--border); z-index:45; padding:6px 0 env(safe-area-inset-bottom);
}
.mob-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px; font-size:10px; color:var(--muted); cursor:pointer; transition:color 0.2s;
}
.mob-item.active { color:var(--accent); }
.mob-item i { font-size:16px; }

/* Red flag card */
.redflag { padding:14px 18px; border-left:3px solid var(--danger); background:var(--danger-dim); border-radius:0 8px 8px 0; margin-bottom:10px; }
.greenflag { padding:14px 18px; border-left:3px solid var(--safe); background:var(--safe-dim); border-radius:0 8px 8px 0; margin-bottom:10px; }
.warning-card {
  padding:16px 18px;
  background:var(--warn-dim);
  border:1px solid rgba(251,191,36,0.18);
  border-left:3px solid var(--warn);
  border-radius:0 10px 10px 0;
}

/* Timeline */
.timeline-card {
  position:relative;
}
.timeline-step {
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--accent);
  color:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  flex-shrink:0;
}

/* Slider */
.shield-range { -webkit-appearance:none; width:100%; height:6px; border-radius:3px; background:var(--border); outline:none; }
.shield-range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent); cursor:pointer; border:3px solid var(--bg); }

/* Progress bar */
.progress-track { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; transition:width 0.6s ease; }

/* CTA card */
.cta-card {
  background:linear-gradient(135deg, rgba(212,168,83,0.12) 0%, rgba(212,168,83,0.04) 100%);
  border:1px solid rgba(212,168,83,0.3); border-radius:16px; padding:32px;
  position:relative; overflow:hidden;
}
.cta-card::before {
  content:''; position:absolute; top:-50%; right:-20%; width:300px; height:300px;
  background:radial-gradient(circle, rgba(212,168,83,0.08) 0%, transparent 70%);
}
.premium-offer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  max-width:620px;
  margin:0 0 20px;
  padding:16px 18px;
  border:1px solid rgba(212,168,83,0.28);
  border-radius:12px;
  background:rgba(11,13,18,0.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.premium-offer-label {
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:4px;
}
.premium-offer-price {
  color:var(--text);
  font-family:'Playfair Display', serif;
  font-size:34px;
  line-height:1;
  font-weight:900;
}
.premium-offer-detail {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.premium-offer-detail span {
  padding:6px 9px;
  border:1px solid rgba(212,168,83,0.16);
  border-radius:999px;
  background:rgba(212,168,83,0.06);
}

/* Responsive */
@media(max-width:1023px) {
  .premium-offer {
    align-items:flex-start;
    flex-direction:column;
  }
  .premium-offer-detail {
    justify-content:flex-start;
  }
  #sidebar { transform:translateX(-100%); }
  #sidebar.open { transform:translateX(0); }
  #topbar { left:0; padding:0 16px; }
  #main-wrapper { margin-left:0; padding-bottom:80px; }
  #content { padding:80px 16px 48px; }
  #mobile-nav { display:flex; }
  .wf-label { width:100px; font-size:11px; }
  .topbar-brand {
    padding-right:10px;
  }
  .topbar-brand-name {
    font-size:13px;
  }
  .topbar-brand-tagline {
    display:none;
  }
  .entry-mode-grid {
    grid-template-columns:1fr;
  }
  .entry-mode-card {
    min-height:260px;
  }
}
@media(max-width:640px) {
  .topbar-brand {
    display:none;
  }
  .hero-brand-lockup {
    align-items:flex-start;
    gap:14px;
  }
  .hero-brand-mark {
    width:58px;
    height:58px;
    border-radius:14px;
  }
  .ecosystem-hero {
    padding:28px;
  }
  .ecosystem-hero h2 {
    font-size:33px;
  }
  .hero-tagline {
    font-size:11px;
    letter-spacing:1.3px;
  }
  .topbar-paths-btn {
    padding:8px 10px!important;
  }
  #topCta {
    padding:8px 12px!important;
  }
  .stat-value {
    font-size:clamp(19px, 7vw, 26px);
  }
  .product-path-lockup {
    align-items:flex-start;
    gap:12px;
  }
  .product-path-logo {
    width:56px;
    height:56px;
    border-radius:13px;
  }
  .wf-step { flex-wrap:wrap; gap:6px; }
  .wf-label { width:100%; text-align:left; }
  .wf-reduction { margin-left:0; }
  .stack-seg span { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; }
}

@media print {
  body {
    background:#fff;
    color:#111;
  }
  body::before,
  body::after,
  #sidebar,
  #topbar,
  #mobile-nav,
  #toast,
  .modal-overlay,
  .cta-card {
    display:none!important;
  }
  #main-wrapper {
    margin-left:0;
  }
  #content {
    padding:0;
  }
  .shield-card {
    border:1px solid #ccc;
    box-shadow:none;
    break-inside:avoid;
    color:#111;
    background:#fff;
  }
  .stat-value,
  h2,
  h3,
  .playfair {
    color:#111!important;
  }
}