/* Optimus Hood ($OPTIMUS) */

:root{
  --bg:#06070a;
  --bg2:#0a0c11;
  --panel:#0e1116;
  --panel2:#12161d;
  --line:#1d222b;
  --line2:#2a313c;
  --tx:#e9edf3;
  --mut:#7c8797;
  --mut2:#5a6472;
  --blue:#6cc8ff;
  --blue-dim:#2c5f80;
  --glow:#bfe9ff;
  --red:#ff5a52;
  --green:#3fd68a;
  --r:16px;
  --max:1140px;
}

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

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--tx);
  font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(108,200,255,.13), transparent 62%),
    radial-gradient(700px 420px at 12% 4%, rgba(255,60,50,.07), transparent 60%);
}

.scanlines{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}

main,.nav,.foot{position:relative;z-index:2}

h1,h2,h3,b,th,.btn,.big,.tk-v{font-weight:700}

a{color:inherit;text-decoration:none}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;background:#151a22;border:1px solid var(--line);
  padding:1px 6px;border-radius:6px;color:var(--glow);
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:14px 28px;
  background:rgba(6,7,10,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.06em;font-size:14px}
.brand img{border-radius:9px;border:1px solid var(--line2)}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:14px;color:var(--mut)}
.nav-links a:hover{color:var(--tx)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;border-radius:999px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--tx);
  font-size:14px;cursor:pointer;transition:.18s;white-space:nowrap;
}
.btn:hover{border-color:#3f4a58;background:#171d26;transform:translateY(-1px)}
.btn-sm{padding:8px 15px;font-size:13px}
.btn-primary{
  background:linear-gradient(180deg,#8fd8ff,#4fb2ee);
  color:#04121c;border-color:#8fd8ff;
  box-shadow:0 0 0 1px rgba(143,216,255,.18), 0 10px 34px -10px rgba(108,200,255,.6);
}
.btn-primary:hover{background:linear-gradient(180deg,#a6e1ff,#63bef3);border-color:#a6e1ff}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:min(88vh,780px);
  display:flex;align-items:center;
  padding:96px 28px 88px;
  margin-bottom:8px;
}

/* the artwork bleeds off the right edge and dissolves into the page */
.hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("assets/optimus.jpg") no-repeat 92% center;
  background-size:auto 106%;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      var(--bg) 0%, var(--bg) 24%,
      rgba(6,7,10,.86) 42%, rgba(6,7,10,.42) 62%,
      rgba(6,7,10,.18) 80%, rgba(6,7,10,.52) 100%),
    linear-gradient(180deg,
      rgba(6,7,10,.72) 0%, rgba(6,7,10,.12) 22%,
      rgba(6,7,10,.12) 58%, var(--bg) 100%);
}
.hero-copy{
  position:relative;z-index:1;min-width:0;
  width:100%;max-width:var(--max);margin:0 auto;
}
.hero-copy>*{max-width:640px}

.chip-row{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:999px;border:1px solid var(--line2);
  background:var(--panel);font-size:12.5px;color:var(--mut);letter-spacing:.03em;
}
.chip b{color:var(--tx)}
.chip-live{border-color:rgba(63,214,138,.35);color:#a9e8c8}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(63,214,138,.6);animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 8px rgba(63,214,138,0)}
  100%{box-shadow:0 0 0 0 rgba(63,214,138,0)}
}

h1{
  font-size:clamp(52px,7.4vw,92px);line-height:.9;letter-spacing:-.035em;
  margin-bottom:20px;
  background:linear-gradient(180deg,#ffffff 20%,#8fb6cd 105%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{color:#aeb8c6;font-size:16.5px;max-width:56ch;margin-bottom:26px}

.ticker-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:26px;
}
.tk{background:var(--panel);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tk-v{overflow-wrap:anywhere}
.tk-l{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut2)}
.tk-v{font-size:19px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.cta-row{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:20px}

.ca{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 16px;border-radius:12px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  color:var(--mut);transition:.18s;text-align:left;
}
.ca:hover{border-color:var(--line2);color:var(--tx)}
.ca-l{font-weight:700;color:var(--blue);letter-spacing:.1em}
.ca-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.ca-c{margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}
.ca.done{border-color:rgba(63,214,138,.5)}
.ca.done .ca-c{color:var(--green)}

/* ---------- sections ---------- */
.section{max-width:var(--max);margin:0 auto;padding:56px 28px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px;flex-wrap:wrap}
h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.028em;line-height:1.1}
.sub{color:var(--mut);max-width:64ch;margin-top:8px;font-size:14.5px}
.m{color:var(--mut);font-size:12.5px}
.k{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut2);display:block}

.status-wrap{display:flex;align-items:center;gap:12px}
.upd{font-size:12px;color:var(--mut2);white-space:nowrap}
.step-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:2px}
.step .btn{align-self:flex-start}
.tbl .go a{border-bottom:1px solid transparent}
.tbl tbody tr:hover .go a{border-bottom-color:var(--blue)}
.status{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mut);
  padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
}
.status.err .dot{background:var(--red);animation:none}
.status.wait .dot{background:#e0b341;animation:none}

.card{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);padding:22px;
}

/* ---------- vault ---------- */
.vault-top{display:grid;grid-template-columns:1.05fr 1.35fr;gap:16px;margin-bottom:16px}

.vault-top>*{min-width:0}
.stat-grid>*{min-width:0}
.vault-hero{
  display:flex;flex-direction:column;gap:16px;
  border-color:var(--blue-dim);
  background:
    radial-gradient(520px 220px at 8% 0%, rgba(108,200,255,.13), transparent 70%),
    linear-gradient(180deg,var(--panel),var(--bg2));
}
.big{
  font-size:clamp(40px,5.6vw,60px);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 44px rgba(108,200,255,.35);
}
.vault-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:14px;border-top:1px solid var(--line)}
.vault-split b{display:block;font-size:19px;margin-top:5px;font-variant-numeric:tabular-nums}
.vault-split .m{display:block}

.vault-addr{display:flex;flex-direction:column;gap:7px;align-items:flex-start;padding-top:14px;border-top:1px solid var(--line)}
.vault-addr code{font-size:11.5px;word-break:break-all;line-height:1.5}
.link{color:var(--blue);font-size:13px;border-bottom:1px solid rgba(108,200,255,.3);align-self:flex-start;padding-bottom:1px}
.link:hover{border-color:var(--blue)}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat b{display:block;font-size:26px;letter-spacing:-.03em;margin:7px 0 3px;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:99px;background:#171c24;margin-top:12px;overflow:hidden}
.bar-note{display:block;margin-top:6px;font-size:11px;color:var(--mut2)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#ff5a52,#ffb060);border-radius:99px;transition:width .8s}

/* ---------- chart ---------- */
.chart-card{padding:22px 22px 12px}
.chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.chart-head .m{margin-top:6px}
.legend{display:flex;gap:16px;font-size:12px;color:var(--mut)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.sw{width:11px;height:11px;border-radius:3px;display:inline-block}
.sw-blue{background:var(--blue)}
.sw-red{background:var(--red)}
.chart{width:100%;overflow-x:auto}
.chart svg{display:block;width:100%;min-width:520px;height:auto}

/* ---------- cycle diagram ---------- */
.cycle-wrap>*{min-width:0}
.cycle-wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:center;padding:26px}
.cycle-svg{width:100%;height:auto}
.cycle-svg .node rect{fill:var(--panel2);stroke:var(--line2);stroke-width:1}
.cycle-svg .node-accent rect{fill:#101c26;stroke:var(--blue-dim)}
.cycle-svg .node-blue rect{fill:#0d1a24;stroke:rgba(108,200,255,.42)}
.cycle-svg .node-red rect{fill:#1e1010;stroke:rgba(255,90,82,.42)}
.cycle-svg .node-green rect{fill:#0d1c15;stroke:rgba(63,214,138,.42)}
.cycle-svg text{
  font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;text-anchor:middle;
}
.cycle-svg .t0{font-size:31px;font-weight:700;fill:#fff}
.cycle-svg .t1{font-size:21px;font-weight:700;fill:var(--tx)}
.cycle-svg .t2{font-size:16.5px;fill:var(--mut)}
.cycle-svg .t3{font-size:14px;fill:var(--blue)}
.cycle-svg .wire{fill:none;stroke:#4a5666;stroke-width:2.2;stroke-dasharray:6 5}
.cycle-notes{list-style:none;display:flex;flex-direction:column;gap:15px}
.cycle-notes li{font-size:14px;color:var(--mut);padding-left:16px;border-left:2px solid var(--line2)}
.cycle-notes b{color:var(--tx);display:block;margin-bottom:2px}

/* ---------- table ---------- */
.table-card{padding:0;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:680px}
.tbl th{
  text-align:left;padding:14px 18px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut2);border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:13px 18px;border-bottom:1px solid #14181f;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:#12171f}
.num,.tbl td.num{text-align:right}
.tbl .idx{color:var(--mut2)}
.tbl .burn{color:var(--red)}
.tbl .lock{color:var(--green)}
.tbl .go{color:var(--mut2);text-align:right}
.tbl tbody tr:hover .go{color:var(--blue)}
.empty{text-align:center;color:var(--mut2);padding:34px 0}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{display:flex;flex-direction:column;gap:9px}
.step .n{font-size:12px;letter-spacing:.14em;color:var(--blue);font-weight:700}
.step h3{font-size:18px;letter-spacing:-.02em}
.step p{color:var(--mut);font-size:14px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:38px 28px 54px;background:var(--bg2)}
.foot-grid{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center}
.foot-grid img{border-radius:11px;border:1px solid var(--line2);display:block;margin-bottom:10px}
.foot-links{display:flex;gap:22px;font-size:14px;color:var(--mut)}
.foot-links a:hover{color:var(--tx)}
.disclaimer{
  max-width:var(--max);margin:28px auto 0;padding-top:22px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.7;color:var(--mut2);
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{min-height:auto;padding:74px 24px 60px}
  .hero-bg{background-size:auto 96%;background-position:82% 12%}
  .hero-bg::after{
    background:
      linear-gradient(180deg, rgba(6,7,10,.62) 0%, rgba(6,7,10,.34) 14%, rgba(6,7,10,.78) 38%, rgba(6,7,10,.93) 60%, var(--bg) 82%),
      linear-gradient(90deg, rgba(6,7,10,.62), rgba(6,7,10,.14) 60%, rgba(6,7,10,.50));
  }
  .hero-copy>*{max-width:none}
  .vault-top{grid-template-columns:1fr}
  .cycle-wrap{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media (max-width:560px){
  .ticker-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:1fr}
  .section{padding:40px 18px}
  .hero{padding:56px 18px 44px}
  .hero-bg{background-size:auto 78%;background-position:78% 4%}
  .nav{padding:12px 16px}
  .ca-v{font-size:11px}
}