:root{--bg:#0b0b0f;--panel:#13131a;--ink:#e9eaee;--muted:#a8adbb;--brand:#ff2d2d;--brand2:#ff6a6a;--line:#242633}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

.wrap{max-width:1350px;margin:0 auto;padding:0 20px}

.banner{background:#13131a;border-bottom:2px solid var(--brand)}
.banner.sticky{position:sticky;top:0;z-index:1000;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.banner img{display:block;width:100%;max-width:1350px;margin:0 auto;border-radius:12px}

.hero{padding:48px 0 24px}
.hero.tight{padding:24px 0}

.badge{display:inline-block;background:rgba(255,45,45,.1);border:1px solid rgba(255,45,45,.25);padding:6px 10px;border-radius:999px;color:#fff;font-size:14px}

.hero h1{font-size:38px;line-height:1.15;margin:12px 0}

.sub{max-width:820px;color:var(--muted)}
.cta{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #36394a;font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));border-color:transparent;color:#fff}
.btn.secondary{background:transparent;color:#fff}

.hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));border:1px solid var(--line);padding:16px;border-radius:14px}

.grid.two{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;margin:40px 0}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}

.list{display:grid;gap:8px}

.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pill{background:#10121a;border:1px solid #232633;color:#cdd2e2;border-radius:999px;padding:6px 10px;font-size:12px}

.clock{font-size:26px;font-weight:800;margin:6px 0}

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

.funds{margin-top:16px}
.funds h4{margin:0 0 6px}
.funds .meta{display:flex;justify-content:space-between;align-items:center;color:#a8adbb;font-size:13px;margin:6px 0 10px}

.fuel{position:relative;height:14px;border-radius:999px;background:linear-gradient(180deg,#0f1118,#0a0b10);border:1px solid #232633;overflow:hidden}
.fuel .fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:999px;box-shadow:0 0 14px rgba(255,45,45,.55) inset,0 0 10px rgba(255,45,45,.35)}
.fuel .ticks{position:absolute;inset:0;pointer-events:none}
.fuel .tick{position:absolute;top:-6px;bottom:-6px;width:2px;background:#2a2d3a;opacity:.8}
.fuel .tick:nth-child(1){left:0}.fuel .tick:nth-child(2){left:25%}.fuel .tick:nth-child(3){left:50%}.fuel .tick:nth-child(4){left:75%}.fuel .tick:nth-child(5){left:100%}

.labels{display:flex;justify-content:space-between;font-size:11px;color:#8f97aa;margin-top:6px}
.prose{padding:26px 0}
.prose .lead{color:#cfd3de}
.prose h1{margin:0 0 6px}
.prose h2{margin-top:22px}
.prose .chart{max-width:420px;width:100%;border:1px solid var(--line);border-radius:12px}

.footer{padding:28px 0;text-align:center;color:#9aa3b8}
@media(max-width:900px){.hero-cards{grid-template-columns:1fr}.grid.two{grid-template-columns:1fr}}

.nav {
  background: #13131a;
  border-top: 1px solid var(--line);
}
.nav ul {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
}
.nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.nav a:hover {
  color: var(--brand);
}
    .nav ul{list-style:none;margin:0;padding:10px 14px;display:flex;gap:14px}
    .nav a{color:#cdd2e2;text-decoration:none;font-size:14px}
    .nav a:hover,.nav a.active{color:#fff;text-decoration:underline}
    .submenu {position:relative}
.submenu ul {display:none;position:absolute;top:100%;left:0;background:#11131a;border:1px solid var(--line);border-radius:6px;flex-direction:column;padding:8px;}
.submenu:hover ul {display:flex;}
.submenu ul li {margin:0;}
.submenu ul a {font-size:13px;padding:6px 10px;white-space:nowrap}
.live-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
}
.live-feed li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border: 1px solid #242633;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.live-feed .date {
  font-weight: 600;
  color: #ff2d2d;
  margin-right: 10px;
  min-width: 110px;
}
.live-feed .desc {
  flex-grow: 1;
  color: #cdd2e2;
}
.live-feed a {
  color: #ff6a6a;
  font-size: 13px;
  text-decoration: none;
}
.live-feed a:hover {
  text-decoration: underline;
}

/* Base nav */
.nav { background:#13131a; border-top:1px solid var(--line); }
.nav ul { display:flex; justify-content:center; gap:24px; margin:0; padding:10px 0; list-style:none; }
.nav a { color:var(--ink); text-decoration:none; font-weight:600; transition:color .2s; }
.nav a:hover { color:var(--brand); }

/* Hamburger button */
.nav-toggle {
  display:none; position:absolute; right:16px; top:16px;
  width:44px; height:44px; background:#0b0b0f; border:1px solid #2a2e3c;
  border-radius:10px; align-items:center; justify-content:center; gap:4px;
}
.nav-toggle .bar {
  display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s;
}

.lightpaper .chart img {
  width: 90%;
  max-width: 640px;
  margin: 0 auto;
  display: block;
}

/* Completed phase card */
.phase.complete {
  background: linear-gradient(180deg, rgba(0, 255, 100, 0.08), rgba(0, 255, 100, 0.02));
  border: 1px solid #24d67c;
  box-shadow: 0 0 20px rgba(36, 214, 124, 0.2);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 24px;
  position: relative;
}

/* Badge */
.phase-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(90deg, #24d67c, #19a85d);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  letter-spacing: 0.5px;
}



/* Mobile layout */
@media (max-width: 820px) {
  .nav-toggle { display:flex; z-index:50; }
  .nav { position:absolute; left:0; right:0; top:72px; display:none; }
  .nav.open { display:block; }
  .nav ul { flex-direction:column; gap:0; padding:8px; }
  .nav li { border-top:1px solid #222632; }
  .nav li:first-child { border-top:none; }
  .nav a { display:block; padding:12px 16px; }

  /* Nice slide-down effect */
  .nav { animation:drop .18s ease; }
  @keyframes drop { from { transform:translateY(-8px); opacity:.0; } to { transform:translateY(0); opacity:1; } }

  /* Optional: transform hamburger to X when open */
  .nav-toggle.active .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.active .bar:nth-child(2){ opacity:0; }
  .nav-toggle.active .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}

/* Keep header layout tidy so button doesn't overlap the banner image */
.banner { position:sticky; top:0; z-index:40; }
.banner img { display:block; margin:0 auto; max-height:120px; }
@media (max-width:820px){
  .banner img { max-height:72px; }
}
#downside-protection .dp-hero {
  background: radial-gradient(60% 80% at 50% 0%, rgba(255,45,45,.08), rgba(0,0,0,0));
  border: 1px solid #242633;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 16px;
}
#downside-protection .dp-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

#downside-protection .dp-copy h2 {
  margin: 6px 0 10px;
  color: #fff;
}
#downside-protection .dp-copy ul {
  margin: 10px 0 14px;
  padding-left: 18px;
  color: #cdd2e2;
}
#downside-protection .dp-callout {
  display: grid;
  gap: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border: 1px solid #242633;
  border-radius: 12px;
  padding: 12px;
  color: #cdd2e2;
}
#downside-protection .dp-callout b { color: #ffb4b4; }
#downside-protection .dp-footer {
  color: #9fa6c3;
  margin-top: 10px;
  font-size: 14px;
}

/* Mobile niceties */
@media (max-width: 820px) {
  #downside-protection .dp-hero { padding: 8px; }
  #downside-protection .dp-copy ul { padding-left: 16px; }
}

:root{
  --bg:#0d0f16; --panel:#11131a; --line:#242633; --ink:#cdd2e2;
  --brand:#ff2d2d; --brand2:#ff6a6a; --muted:#9fa6c3;
}

/* ----- Roadmap: Completed Phase (force it to pop) ----- */
.timeline .phase {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  position: relative;
}

.timeline .phase.complete{
  background:
    linear-gradient(180deg, rgba(36,214,124,0.10), rgba(36,214,124,0.02)),
    var(--panel) !important;
  border-color: #24d67c !important;
  box-shadow: 0 0 20px rgba(36,214,124,.18);
}

/* Make the header of completed phases look “finished” */
.timeline .phase.complete header{
  background: rgba(36,214,124,.08);
  border-bottom: 1px solid rgba(36,214,124,.25);
  border-radius: 12px;
  margin: -6px -6px 10px;
  padding: 10px 12px;
}

/* Completed-dot glow */
.timeline .phase.complete header .dot{
  background: #24d67c !important;
  box-shadow: 0 0 0 3px rgba(36,214,124,.25);
}

/* Badge pill */
.phase-badge{
  position: absolute;
  top: 10px; right: 10px;
  background: linear-gradient(90deg,#24d67c,#19a85d);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* (Optional) lock look for future phases */
.timeline .phase.locked{
  opacity:.85;
  filter:saturate(.85);
  border-style:dashed;
}
.timeline .phase.complete.panel{ background: /* same gradient */ !important; border-color:#24d67c!important; }


/* ----- Completed phase (done) ----- */
.timeline .phase.complete{
  background:
    linear-gradient(180deg, rgba(36,214,124,0.10), rgba(36,214,124,0.02)),
    var(--panel) !important;
  border-color: #24d67c !important;
  box-shadow: 0 0 20px rgba(36,214,124,.18);
}
.timeline .phase.complete header{
  background: rgba(36,214,124,.08);
  border-bottom: 1px solid rgba(36,214,124,.25);
  border-radius: 12px;
  margin: -6px -6px 10px;
  padding: 10px 12px;
}
.timeline .phase.complete header .dot{
  background: #24d67c !important;
  box-shadow: 0 0 0 3px rgba(36,214,124,.25);
}
.phase-badge{
  position: absolute;
  top: 10px; right: 10px;
  background: linear-gradient(90deg,#24d67c,#19a85d);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* ----- Locked phase (future) ----- */
.timeline .phase.locked{
  opacity:.55;
  filter:grayscale(40%) saturate(70%);
  border:1px dashed #444 !important;
  background: linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0)) !important;
}
.timeline .phase.locked header .dot{
  background:#555 !important;
  box-shadow:none;
}
.timeline .phase.locked header h2,
.timeline .phase.locked .when{
  color:#777 !important;
}