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

:root {
  --bg: #f4f5f0;
  --surface: #fff;
  --grid-line: rgba(0,0,0,0.06);
  --ink: #12140f;
  --vector: #1a3a8f;
  --vector-dim: rgba(26,58,143,0.1);
  --vector-border: rgba(26,58,143,0.2);
  --force: #c0392b;
  --force-dim: rgba(192,57,43,0.1);
  --energy: #27ae60;
  --energy-dim: rgba(39,174,96,0.1);
  --text: #40453a;
  --text-bright: #12140f;
  --text-muted: #8a9080;
  --border: rgba(18,20,15,0.1);
  --accent: #1a3a8f;
}

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

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

/* Grid background */
body::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:40px 40px;
  z-index:0;
  pointer-events:none;
}

#mec-canvas { position:fixed; inset:0; z-index:1; pointer-events:none; }
.wrap { position:relative; z-index:2; max-width:1020px; margin:0 auto; padding:0 28px 90px; }

/* ── HERO ── */
.hero {
  padding:72px 0 56px;
  display:grid;
  grid-template-columns:1fr 320px;
  gap:48px;
  align-items:center;
  border-bottom:2px solid var(--border);
  margin-bottom:60px;
}
.hero-tag { font-family:'DM Mono',monospace; font-size:0.58rem; letter-spacing:4px; text-transform:uppercase; color:var(--accent); opacity:0.65; margin-bottom:14px; }
.hero h1 { font-size:clamp(3.5rem,10vw,7rem); font-weight:700; line-height:0.85; color:var(--ink); letter-spacing:-2px; }
.hero h1 em { display:block; font-size:0.22em; font-style:normal; font-weight:300; letter-spacing:6px; color:var(--text-muted); margin-top:12px; font-family:'DM Mono',monospace; text-transform:uppercase; }
.hero-desc { font-size:0.97rem; line-height:1.88; color:var(--text); font-weight:300; margin-top:18px; }

/* ── Simulation canvas card ── */
.sim-card { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:16px; box-shadow:0 4px 24px rgba(0,0,0,0.07); }
#projectile-canvas { display:block; }
.sim-cap { font-family:'DM Mono',monospace; font-size:0.58rem; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; margin-top:8px; text-align:center; }

/* ── Key equations ── */
.equations { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; margin-bottom:56px; }
.eq { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); padding:14px 16px; border-radius:0 4px 4px 0; }
.eq-label { font-size:0.55rem; letter-spacing:3px; text-transform:uppercase; color:var(--text-muted); font-family:'DM Mono',monospace; margin-bottom:6px; }
.eq-formula { font-family:'DM Mono',monospace; font-size:1rem; color:var(--ink); font-weight:500; }
.eq-desc { font-size:0.72rem; color:var(--text-muted); margin-top:4px; }

/* ── Stats ── */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); border:1px solid var(--border); overflow:hidden; margin-bottom:56px; background:var(--surface); border-radius:3px; }
.stat { padding:16px 14px; border-right:1px solid var(--border); transition:background 0.2s; }
.stat:last-child { border-right:none; }
.stat:hover { background:var(--vector-dim); }
.s-label { font-family:'DM Mono',monospace; font-size:0.52rem; letter-spacing:2px; text-transform:uppercase; color:var(--accent); opacity:0.7; margin-bottom:6px; }
.s-value { font-size:1.05rem; font-weight:700; color:var(--ink); line-height:1.1; }
.s-unit { font-size:0.6rem; color:var(--text-muted); }

/* ── Sections ── */
.section { margin-bottom:54px; opacity:0; transform:translateY(16px); transition:opacity 0.65s,transform 0.65s; }
.section.visible { opacity:1; transform:none; }
.sh { display:flex; align-items:baseline; gap:14px; margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--border); }
.sn { font-family:'DM Mono',monospace; font-size:0.55rem; letter-spacing:3px; color:var(--accent); opacity:0.5; }
.section h2 { font-size:1.5rem; font-weight:700; color:var(--ink); letter-spacing:-0.5px; }
p { font-size:0.96rem; line-height:1.88; color:var(--text); font-weight:300; margin-bottom:14px; }
strong { color:var(--text-bright); font-weight:700; }

/* ── Laws grid ── */
.laws-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:18px; }
.law-card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:20px; transition:box-shadow 0.2s; }
.law-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.08); }
.law-num { font-family:'DM Mono',monospace; font-size:0.6rem; color:var(--accent); opacity:0.6; letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; }
.law-card h3 { font-size:0.9rem; font-weight:700; color:var(--ink); margin-bottom:6px; }
.law-eq { font-family:'DM Mono',monospace; font-size:0.82rem; color:var(--accent); padding:6px 10px; background:var(--vector-dim); border-radius:3px; margin-bottom:8px; }
.law-card p { font-size:0.8rem; margin:0; line-height:1.6; }

/* ── Energy diagram ── */
.energy-types { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.en-card { background:var(--surface); border:1px solid var(--border); border-top:3px solid; padding:16px; text-align:center; }
.en-card h3 { font-size:0.82rem; font-weight:700; margin-bottom:5px; }
.en-card p { font-size:0.78rem; margin:0; line-height:1.5; }
.en-formula { font-family:'DM Mono',monospace; font-size:0.88rem; margin:6px 0; }

/* ── Applications ── */
.apps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:18px; }
.app-card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:16px; border-bottom:3px solid var(--accent); transition:transform 0.2s; }
.app-card:hover { transform:translateY(-2px); }
.app-card h3 { font-size:0.82rem; font-weight:700; color:var(--ink); margin-bottom:6px; }
.app-card p { font-size:0.78rem; margin:0; line-height:1.55; }

.footer-band { margin-top:70px; border-top:2px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-band span { font-family:'DM Mono',monospace; font-size:0.52rem; letter-spacing:2px; color:var(--text-muted); text-transform:uppercase; }
@media(max-width:640px){ .hero{grid-template-columns:1fr;} .energy-types{grid-template-columns:1fr;} }