@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:wght@200;300;400;500&display=swap');

:root {
  --void: #040404;
  --deep: #0a0a0a;
  --rock: #161616;
  --crater: #202020;
  --silver: #d0d0d0;
  --white: #f0f0f0;
  --hot: #ff8844;
  --hot-dim: rgba(255,136,68,0.1);
  --hot-border: rgba(255,136,68,0.2);
  --cold: #4488cc;
  --text: #888;
  --text-bright: #c0c0c0;
  --border: rgba(220,220,220,0.12);
}

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

body { font-family:'IBM Plex Sans',sans-serif; background:var(--void); color:var(--text); min-height:100vh; overflow-x:hidden; }

#merc-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; }

.wrap { position:relative; z-index:2; max-width:1020px; margin:0 auto; padding:0 28px 90px; }

/* ── HERO : brutalist asymmetric ── */
.hero {
  padding: 70px 0 54px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 50px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  margin-bottom: 56px;
}

#merc-sphere {
  width: 220px; height: 220px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 38% 32%, #d8d8d8 0%, #909090 30%, #484848 65%, #181818 100%);
  box-shadow: 0 0 30px rgba(0,0,0,0.8), inset -28px -20px 50px rgba(0,0,0,0.6), inset 10px 8px 20px rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
  animation: merc-slow 60s linear infinite;
}

#merc-sphere::before { content:''; position:absolute; border-radius:50%; background:rgba(0,0,0,0.35); width:55px;height:55px; top:25%;left:18%; box-shadow:inset 3px 3px 8px rgba(0,0,0,0.5); }
#merc-sphere::after  { content:''; position:absolute; border-radius:50%; background:rgba(0,0,0,0.28); width:32px;height:32px; top:58%;left:55%; }

@keyframes merc-slow { from{filter:hue-rotate(0deg)} to{filter:hue-rotate(0deg)} }

.hero-right {}
.hero-tag { font-family:'IBM Plex Mono',monospace; font-size:0.6rem; letter-spacing:4px; text-transform:uppercase; color:var(--hot); opacity:0.65; margin-bottom:14px; }
.hero h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(5rem,14vw,10rem); line-height:0.85; color:var(--white); letter-spacing:3px; }
.hero h1 em { display:block; font-family:'IBM Plex Mono',monospace; font-size:0.12em; font-style:normal; letter-spacing:6px; color:var(--text); margin-top:10px; text-transform:uppercase; }
.hero-desc { font-size:0.94rem; line-height:1.82; color:var(--text); font-weight:300; margin-top:16px; max-width:500px; }

/* ── Extremes bar ── */
.extremes { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0; border:1px solid var(--border); margin-bottom:56px; border-radius:3px; overflow:hidden; }
.ext-cold { padding:20px 18px; background:linear-gradient(135deg,#040c18,#08182a); text-align:left; }
.ext-divider { width:2px; background:linear-gradient(180deg,var(--hot),var(--cold)); align-self:stretch; }
.ext-hot { padding:20px 18px; background:linear-gradient(135deg,#180a04,#280c04); text-align:right; }
.ext-label { font-family:'IBM Plex Mono',monospace; font-size:0.58rem; letter-spacing:3px; text-transform:uppercase; margin-bottom:6px; }
.ext-val { font-family:'Bebas Neue',sans-serif; font-size:2.2rem; letter-spacing:2px; line-height:1; }
.ext-sub { font-size:0.72rem; font-weight:300; margin-top:4px; }
.ext-cold .ext-label { color:var(--cold); } .ext-cold .ext-val { color:#88aaff; } .ext-cold .ext-sub { color:#446688; }
.ext-hot .ext-label { color:var(--hot); } .ext-hot .ext-val { color:#ff9944; } .ext-hot .ext-sub { color:#884422; }

/* ── Stats ── */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border:1px solid var(--border); border-radius:3px; overflow:hidden; margin-bottom:56px; }
.stat { padding:18px 14px; background:var(--deep); border-right:1px solid var(--border); transition:background 0.2s; }
.stat:last-child { border-right:none; }
.stat:hover { background:var(--rock); }
.s-label { font-family:'IBM Plex Mono',monospace; font-size:0.55rem; letter-spacing:3px; text-transform:uppercase; color:var(--hot); opacity:0.55; margin-bottom:7px; }
.s-value { font-family:'Bebas Neue',sans-serif; font-size:1.3rem; color:var(--white); letter-spacing:1px; line-height:1.1; }
.s-unit { font-size:0.65rem; color:var(--text); font-family:'IBM Plex Sans',sans-serif; }

/* ── Sections ── */
.section { margin-bottom:56px; opacity:0; transform:translateY(18px); transition:opacity 0.65s,transform 0.65s; }
.section.visible { opacity:1; transform:none; }
.sh { display:flex; align-items:baseline; gap:14px; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.sn { font-family:'IBM Plex Mono',monospace; font-size:0.58rem; letter-spacing:3px; color:var(--hot); opacity:0.45; }
.section h2 { font-family:'Bebas Neue',sans-serif; font-size:1.7rem; color:var(--white); letter-spacing:2px; }
p { font-size:0.94rem; line-height:1.85; color:var(--text); font-weight:300; margin-bottom:14px; }
strong { color:var(--text-bright); font-weight:500; }

/* ── Feature grid ── */
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:18px; }
.feat { background:var(--rock); border:1px solid var(--border); border-left:2px solid var(--hot); padding:18px; transition:border-left-color 0.2s; }
.feat:hover { border-left-color:var(--white); }
.feat h3 { font-family:'IBM Plex Mono',monospace; font-size:0.82rem; color:var(--white); margin-bottom:7px; letter-spacing:0.5px; }
.feat p { font-size:0.8rem; margin:0; line-height:1.55; }

/* ── Resonance visual ── */
.resonance { background:var(--deep); border:1px solid var(--border); border-radius:4px; padding:24px; margin-top:18px; }
#res-canvas { display:block; margin:0 auto 10px; }
.res-caption { font-family:'IBM Plex Mono',monospace; font-size:0.62rem; text-align:center; color:#444; letter-spacing:2px; text-transform:uppercase; }

/* ── Missions ── */
.mi { display:grid; grid-template-columns:100px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--border); }
.mi:last-child { border-bottom:none; }
.mi-year { font-family:'Bebas Neue',sans-serif; font-size:1rem; color:var(--hot); letter-spacing:1px; }
.mi-name { font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--white); margin-bottom:4px; }
.mi p { font-size:0.8rem; margin:0; line-height:1.5; }

/* Footer */
.footer-band { margin-top:70px; border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-band span { font-family:'IBM Plex Mono',monospace; font-size:0.58rem; letter-spacing:2px; color:#333; text-transform:uppercase; }

@media(max-width:600px) { .hero { grid-template-columns:1fr; } #merc-sphere { width:150px;height:150px;margin:0 auto; } .extremes { grid-template-columns:1fr; } .ext-divider { height:2px;width:100%; } }