/* ============================================================
   AGX TERMINAL — shared design system
   Used by index.html (inline copy) and every article page.
   ============================================================ */
:root{
  --bg:#06090d; --bg2:#0a0f15; --panel:#0f161e; --panel2:#131c26; --raised:#172230;
  --line:#1c2733; --line2:#283645; --grid:#16202b;
  --text:#e4ecf3; --muted:#8a9bab; --dim:#586876;
  --up:#21d28a; --down:#ff5b6b; --cyan:#34e0db; --amber:#ffb02e; --gold:#f5c14b; --violet:#9a8cff;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --disp:'Saira Condensed',sans-serif;
  --body:'Hanken Grotesk',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 85% -5%,rgba(52,224,219,.07),transparent 60%),radial-gradient(900px 500px at 0% 0%,rgba(154,140,255,.06),transparent 55%);
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)} .up{color:var(--up)} .down{color:var(--down)}
::selection{background:var(--cyan);color:#04211f}
::-webkit-scrollbar{height:9px;width:9px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* status bar */
.statusbar{display:flex;align-items:center;gap:18px;padding:6px 16px;font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--bg2);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}
.statusbar .dot{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);display:inline-block;margin-right:6px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.statusbar b{color:var(--text)} .sb-spacer{flex:1}
.sb-item{display:flex;align-items:center;gap:6px} .sb-item .v{color:var(--text)}

/* ticker tape */
.tape{position:relative;overflow:hidden;background:linear-gradient(180deg,#0b1118,#070b10);border-bottom:1px solid var(--line);height:38px}
.tape-track{display:flex;align-items:center;height:100%;width:max-content;animation:scroll 60s linear infinite}
.tape:hover .tape-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:baseline;gap:8px;padding:0 18px;border-right:1px solid var(--line);font-family:var(--mono);font-size:12.5px;cursor:pointer}
.tk:hover{background:rgba(52,224,219,.06)}
.tk .sym{color:var(--text);font-weight:600;letter-spacing:.5px} .tk .px{color:var(--muted)}
.tk .chg{font-size:11.5px;padding:1px 5px;border-radius:3px}
.tk .chg.u{color:var(--up);background:rgba(33,210,138,.1)} .tk .chg.d{color:var(--down);background:rgba(255,91,107,.1)}

/* masthead */
header.mast{display:flex;align-items:center;gap:24px;padding:14px 22px;border-bottom:1px solid var(--line);background:rgba(8,12,17,.7);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:11px}
.logo{width:38px;height:38px;border-radius:9px;background:linear-gradient(145deg,var(--cyan),#1b8a86);display:grid;place-items:center;box-shadow:0 0 22px rgba(52,224,219,.4)}
.logo svg{width:22px;height:22px}
.brand .name{font-family:var(--disp);font-weight:800;font-size:25px;letter-spacing:1px;line-height:1;text-transform:uppercase}
.brand .name span{color:var(--cyan)}
.brand .sub{font-family:var(--mono);font-size:9.5px;letter-spacing:2.5px;color:var(--dim);text-transform:uppercase}
nav.tabs{display:flex;gap:2px;margin-left:8px}
nav.tabs a{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:8px 13px;border-radius:7px;transition:.15s}
nav.tabs a:hover{color:var(--text);background:var(--panel)} nav.tabs a.active{color:var(--cyan);background:rgba(52,224,219,.08)}
.mast .grow{flex:1}
.btn-live{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:#04211f;background:var(--up);padding:8px 13px;border-radius:7px;font-weight:600;text-transform:uppercase}

/* ===== ARTICLE READING VIEW ===== */
.reading{max-width:900px;margin:0 auto;padding:26px 22px 10px}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--dim);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb a{color:var(--muted);transition:.15s} .crumb a:hover{color:var(--cyan)} .crumb .sep{color:var(--line2)}
.art-hero{background:radial-gradient(700px 240px at 100% 0%,rgba(52,224,219,.1),transparent 60%),linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin-bottom:22px;position:relative;overflow:hidden}
.art-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.art-hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5vw,46px);line-height:1.02;letter-spacing:.3px}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.art-meta .pill{border:1px solid var(--line2);border-radius:5px;padding:3px 8px;letter-spacing:.5px}
.art-cover{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:12px;border:1px solid var(--line);margin:0 0 22px}

.article{font-size:16px;line-height:1.75;color:#cdd8e2}
.article > *{max-width:760px;margin-left:auto;margin-right:auto}
.article h2{font-family:var(--disp);font-weight:700;font-size:27px;letter-spacing:.5px;color:var(--text);margin:34px auto 12px;padding-top:6px;border-top:1px solid var(--line)}
.article h3{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.4px;color:var(--text);margin:24px auto 8px}
.article h2:first-child,.article h3:first-child{border-top:none;margin-top:0}
.article p{margin:0 auto 17px}
.article a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(52,224,219,.35);transition:.15s}
.article a:hover{color:#7af0ec;border-bottom-color:var(--cyan)}
.article a[target="_blank"]::after{content:"↗";font-size:.7em;margin-left:2px;color:var(--dim)}
.article ul,.article ol{margin:0 auto 18px;padding-left:24px}
.article li{margin:7px 0}
.article li::marker{color:var(--cyan)}
.article strong,.article b{color:var(--text)}
.article blockquote{border-left:3px solid var(--cyan);background:var(--panel);padding:14px 18px;border-radius:0 10px 10px 0;margin:20px auto;color:var(--muted);font-style:italic}
.article code{font-family:var(--mono);font-size:.88em;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--gold)}
.article pre{font-family:var(--mono);font-size:13px;background:#04090e;border:1px solid var(--line2);border-radius:11px;padding:16px 18px;overflow:auto;margin:20px auto;line-height:1.6}
.article pre code{background:none;border:none;padding:0;color:#bfe9e6}
.article img{max-width:100%;border-radius:10px;border:1px solid var(--line);display:block;margin:20px auto}
.article table{width:100%;max-width:760px;margin:20px auto;border-collapse:collapse;font-size:14px}
.article th{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);text-align:left;padding:9px 10px;border-bottom:1px solid var(--line2)}
.article td{padding:9px 10px;border-bottom:1px solid var(--line)}
.article hr{border:none;border-top:1px solid var(--line);max-width:760px;margin:28px auto}
.callout{max-width:760px;margin:22px auto;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line2);border-left:3px solid var(--amber);border-radius:0 11px 11px 0;padding:15px 18px;font-size:14.5px}
.callout .ct{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--amber);margin-bottom:6px}

/* related / further reading */
.related{max-width:900px;margin:34px auto 0;padding:0 22px}
.related h4{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.related h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rel-grid a{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:11px;padding:14px;transition:.15s;display:block}
.rel-grid a:hover{border-color:var(--line2);transform:translateY(-2px)}
.rel-grid .rk{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.rel-grid .rt{font-family:var(--body);font-weight:600;font-size:14px;line-height:1.3;color:var(--text)}

/* markets strip (pomegra) reused on article pages */
.mkt-strip{max-width:900px;margin:30px auto 0;padding:0 22px}
.mkt-strip .panel{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:13px;padding:16px}
.mkt-strip .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mkt-strip .ph .t{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.8px;text-transform:uppercase}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:1px;padding:3px 7px;border-radius:5px;text-transform:uppercase;border:1px solid var(--line2);color:var(--muted)}
.mkt-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;transition:.15s}
.mkt-row:last-child{border-bottom:none} .mkt-row:hover{color:var(--cyan)}
.mkt-row .mn small{font-size:9.5px;color:var(--dim);letter-spacing:.5px;font-family:var(--body);display:block}
.pom-cta{display:block;margin-top:12px;text-align:center;font-family:var(--disp);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px;color:#04211f;background:linear-gradient(135deg,var(--cyan),#1b8a86);padding:11px;border-radius:9px;transition:.15s}
.pom-cta:hover{filter:brightness(1.1)}

/* footer */
footer{border-top:1px solid var(--line);margin-top:46px;background:var(--bg2)}
.fcols{max-width:1480px;margin:0 auto;padding:34px 22px;display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:26px}
.fcol h4{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text);margin-bottom:11px}
.fcol a{display:block;font-size:12.5px;color:var(--muted);padding:4px 0;transition:.12s} .fcol a:hover{color:var(--cyan)}
.fcol p{font-size:12px;color:var(--dim);line-height:1.6}
.fbar{border-top:1px solid var(--line);padding:14px 22px;max-width:1480px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.4px}
.fbar .grow{flex:1}
.disclaimer{padding:0 22px 26px;max-width:1480px;margin:0 auto;font-family:var(--mono);font-size:10px;color:#3f4c59;line-height:1.6}

@media(max-width:980px){nav.tabs{display:none}.fcols{grid-template-columns:1fr 1fr}.rel-grid{grid-template-columns:1fr}}
@media(max-width:600px){.brand .name{font-size:21px}.rel-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.tape-track{animation:none}.dot{animation:none}}