/* ─────────────────────────────────────────────────────────────
   THE ALGOMIST — shared design system (tokens + shell components)
   Link this on every page + use <header id="site-nav"> / <footer id="site-footer">
   with assets/shell.js to inject the nav + footer.
   ───────────────────────────────────────────────────────────── */
:root{
  --gold:#C9A84C; --gold-light:#E8C97A; --gold-dim:#8A6B2E; --gold-deep:#B0832A;
  --amber:#FF8C00; --ember:#FF4500;
  --teal:#2DD4BF; --teal-dim:#0F766E; --green:#22C55E; --green-d:#16823b; --mint:#7DF0A8; --red:#EF4444;
  --obsidian:#060606; --void:#0A0908; --charcoal:#131110; --slate:#1A1714; --smoke:#242018; --ash:#353028; --line:#2a2620;
  --fog:#6B6358; --mist:#9A9088; --cream:#EDE5D8; --white:#F7F2EA;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-display:'Cinzel',serif; --font-mono:'Space Mono',monospace; --font-body:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--void);color:var(--cream);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* film grain — site-wide texture */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:400;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E")}
::selection{background:var(--gold);color:var(--obsidian)}
a{color:inherit}

/* ── NAV ── */
.algo-nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;
  padding:16px 4vw;background:linear-gradient(to bottom,rgba(6,6,6,.85),transparent)}
.algo-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.algo-logo img{height:32px;width:auto;filter:drop-shadow(0 0 8px rgba(201,168,76,.45))}
.algo-logo svg{display:block;height:26px;width:auto}
.algo-navlinks{display:flex;gap:30px;list-style:none;align-items:center}
.algo-navlinks a{color:var(--mist);text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:color .3s;font-weight:500}
.algo-navlinks a:hover{color:var(--gold)}
.algo-cta{font-family:var(--font-mono);font-size:12px;color:var(--obsidian);background:var(--gold);padding:8px 16px;border-radius:2px;text-decoration:none;transition:.3s;border:1px solid var(--gold);white-space:nowrap}
.algo-cta:hover{background:transparent;color:var(--gold);box-shadow:0 0 20px rgba(201,168,76,.35)}
.algo-burger{display:none;background:rgba(201,168,76,.14);border:1px solid var(--gold-dim);color:var(--gold);font-size:24px;line-height:1;cursor:pointer;padding:6px 13px;border-radius:8px;transition:.25s;box-shadow:0 0 14px rgba(201,168,76,.18)}
.algo-burger:hover,.algo-nav.open .algo-burger{background:rgba(201,168,76,.24);border-color:var(--gold);color:var(--gold-light);box-shadow:0 0 20px rgba(201,168,76,.3)}
.m-cta{display:none}
@media(max-width:820px){
  .algo-nav{padding:12px 4vw;gap:12px}
  .algo-logo{margin-right:auto}
  .algo-cta{display:none}                       /* moved into the menu on mobile */
  .algo-logo img{height:26px}.algo-logo svg{height:21px}
  .algo-burger{display:block}
  .algo-navlinks{position:absolute;top:calc(100% - 2px);right:4vw;min-width:184px;flex-direction:column;gap:0;display:none;
    background:rgba(10,9,8,.97);border:1px solid var(--line);border-radius:10px;padding:8px;backdrop-filter:blur(10px);box-shadow:0 16px 40px rgba(0,0,0,.55)}
  .algo-nav.open .algo-navlinks{display:flex}
  .algo-navlinks li{width:100%}
  .algo-navlinks a{display:block;padding:11px 14px;font-size:13px}
  .m-cta{display:block;margin-top:4px}
  .m-cta a{color:var(--obsidian)!important;background:var(--gold);border-radius:6px;text-align:center;font-weight:600}
}

/* ── FOOTER ── */
.algo-footer{position:relative;z-index:3;padding:40px 6vw;text-align:center;color:var(--fog);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em}
.algo-footer a{color:var(--gold-dim);text-decoration:none}.algo-footer a:hover{color:var(--gold)}

/* ── TYPE ── */
.display{font-family:var(--font-display);font-weight:700;color:var(--white);line-height:1.05}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold)}
.grad-gold{color:transparent;background:linear-gradient(100deg,var(--gold-light),var(--amber));-webkit-background-clip:text;background-clip:text}
.grad-green{color:transparent;background:linear-gradient(100deg,var(--mint),var(--green));-webkit-background-clip:text;background-clip:text}

/* ── BUTTONS ── */
.btn{font-family:var(--font-mono);font-size:13px;text-decoration:none;padding:14px 26px;border-radius:2px;transition:.35s var(--ease);display:inline-flex;align-items:center;gap:10px}
.btn-gold{background:var(--gold);color:var(--obsidian);border:1px solid var(--gold)}.btn-gold:hover{box-shadow:0 0 36px rgba(201,168,76,.5);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid var(--ash)}.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ── CARD (gold-rim glass) ── */
.algo-card{position:relative;padding:30px 26px;border:1px solid var(--smoke);border-radius:6px;overflow:hidden;
  background:linear-gradient(165deg,rgba(36,32,24,.5),rgba(10,9,8,.35));backdrop-filter:blur(6px);transition:.5s var(--ease)}
.algo-card:hover{border-color:var(--gold-dim);transform:translateY(-6px)}

/* ── MARKET TAPE (injected on all pages via shell.js) ── */
.market-tape{position:fixed;top:55px;left:0;right:0;z-index:114;height:32px;display:flex;align-items:center;
  border-top:1px solid rgba(201,168,76,.13);border-bottom:1px solid rgba(201,168,76,.13);
  background:linear-gradient(90deg,rgba(6,6,6,.9),rgba(19,17,16,.72) 45%,rgba(6,6,6,.88));backdrop-filter:blur(8px);
  box-shadow:0 10px 34px rgba(0,0,0,.32)}
.market-tape::before,.market-tape::after{content:'';position:absolute;top:0;bottom:0;width:72px;z-index:2;pointer-events:none}
.market-tape::before{left:0;background:linear-gradient(90deg,var(--void),transparent)}
.market-tape::after{right:318px;background:linear-gradient(270deg,var(--void),transparent)}
.tape-window{position:absolute;left:4vw;right:338px;top:0;bottom:0;overflow:hidden}
.tape-track{height:100%;display:flex;align-items:center;width:max-content;animation:tapeRun 42s linear infinite}
.tape-group{display:flex;align-items:center;gap:30px;padding-right:30px}
.tape-item{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.tape-item .up{color:var(--green);text-shadow:0 0 10px rgba(34,197,94,.28)}
.tape-item .dn{color:var(--red);text-shadow:0 0 10px rgba(239,68,68,.24)}
.tape-tabs{position:absolute;right:4vw;top:4px;display:flex;gap:8px;z-index:3}
.tape-tabs a,.tape-tabs span{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--fog);text-transform:uppercase;text-decoration:none;
  border:1px solid rgba(201,168,76,.18);background:rgba(10,9,8,.78);border-radius:3px;padding:5px 13px;line-height:1;transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.tape-tabs a:hover,.tape-tabs a:focus-visible{color:var(--gold-light);border-color:rgba(201,168,76,.45);background:rgba(201,168,76,.08);outline:none}
@keyframes tapeRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){
  .market-tape{top:50px;height:30px}
  .tape-window{left:5vw;right:5vw}
  .market-tape::after,.tape-tabs{display:none}
  .tape-group{gap:24px}
  .tape-item{font-size:10px}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important}}