/* MForja — evolved dark identity. Palette: bg #0d0d0d, cyan #00f5d4, blue #4a9fff. */
:root {
  --bg: #0d0d0d;
  --bg2: #131313;
  --bg3: #1a1a1a;
  --border: #262626;
  --cyan: #00f5d4;
  --blue: #4a9fff;
  --text: #f2f2f2;
  --text2: #b0b0b0;
  --text3: #6a6a6a;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Rajdhani", -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display {
  font-family: "Orbitron", "Rajdhani", sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.15;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* nav */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13,13,13,0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
nav img { height: 36px; width: auto; }
nav .links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
nav .links a { color: var(--text2); font-weight: 600; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
nav .links a:hover { color: var(--cyan); text-decoration: none; }
.btn {
  display: inline-block; padding: 10px 22px; border-radius: 4px;
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  border: 1px solid var(--cyan); color: var(--cyan); background: transparent;
  transition: all .15s ease;
}
.btn:hover { background: rgba(0,245,212,0.1); text-decoration: none; }
.btn.solid { background: var(--cyan); color: #062420; }
.btn.solid:hover { background: #33f7dd; }

/* hero */
.hero { padding: 72px 0 40px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 70% 0%, rgba(0,245,212,0.07), transparent),
    radial-gradient(ellipse 50% 35% at 20% 10%, rgba(74,159,255,0.06), transparent);
  pointer-events: none;
}
.hero h1 { font-size: clamp(34px, 5.2vw, 62px); font-weight: 800; margin: 14px 0 18px; }
.hero h1 em { font-style: normal; color: var(--cyan); }
.hero .sub { font-size: clamp(17px, 2vw, 22px); color: var(--text2); max-width: 720px; }
.hero .cta-row { display: flex; gap: 16px; margin: 28px 0 8px; flex-wrap: wrap; }

/* comparison players */
.player-shell {
  margin-top: 40px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg2); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.player-head {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.player-head .title { font-weight: 700; letter-spacing: .06em; }
.clip-select {
  margin-left: auto; background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px;
  font-family: var(--mono); font-size: 13px;
}
.wipe-stage { position: relative; user-select: none; touch-action: none; }
.wipe-stage canvas { display: block; width: 100%; height: auto; }
.wipe-handle {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--cyan);
  cursor: ew-resize; box-shadow: 0 0 14px rgba(0,245,212,0.75);
}
.wipe-handle::after {
  content: "◂ ▸"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: var(--cyan); color: #062420; font-size: 13px; font-weight: 800;
  padding: 6px 9px; border-radius: 999px; white-space: nowrap;
  font-family: var(--mono);
}
.tag {
  position: absolute; top: 14px; padding: 5px 12px; border-radius: 3px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  background: rgba(0,0,0,0.62); border: 1px solid rgba(255,255,255,0.18);
}
.tag.left { left: 14px; }
.tag.right { right: 14px; color: var(--cyan); border-color: rgba(0,245,212,0.4); }
.stat-strip {
  display: flex; gap: 0; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.stat-strip .cell {
  flex: 1 1 140px; padding: 14px 18px; border-right: 1px solid var(--border);
}
.stat-strip .cell:last-child { border-right: none; }
.stat-strip .k { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--text3); text-transform: uppercase; }
.stat-strip .v { font-size: 24px; font-weight: 700; font-family: "Orbitron", sans-serif; margin-top: 2px; }
.stat-strip .v.cyan { color: var(--cyan); }

/* grid player */
.grid-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); }
.grid-cell { position: relative; background: #000; }
.grid-cell canvas { display: block; width: 100%; height: auto; }
.grid-cell .tag { top: 10px; left: 10px; right: auto; }
.grid-cell .chip {
  position: absolute; bottom: 10px; left: 10px; font-family: var(--mono);
  font-size: 11px; background: rgba(0,0,0,0.65); padding: 4px 8px; border-radius: 3px;
  color: var(--text2);
}

/* sections */
section { padding: 84px 0; border-top: 1px solid var(--border); }
section h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 12px 0 14px; }
section .lead { color: var(--text2); max-width: 760px; font-size: 19px; }

.quad { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 44px; }
.quad .card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 26px 24px;
}
.quad .big { font-family: "Orbitron", sans-serif; font-size: 42px; font-weight: 800; color: var(--cyan); }
.quad .card p { color: var(--text2); margin-top: 6px; font-size: 16px; }

.pipeline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 40px; font-family: var(--mono); font-size: 14px;
}
.pipeline .node {
  border: 1px solid var(--border); background: var(--bg2); padding: 14px 18px;
  border-radius: 6px; color: var(--text2);
}
.pipeline .node.hot { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 24px rgba(0,245,212,0.12); }
.pipeline .arrow { color: var(--text3); }

table.matrix { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 16px; }
table.matrix th, table.matrix td { padding: 13px 16px; border: 1px solid var(--border); text-align: left; }
table.matrix th { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); background: var(--bg2); }
table.matrix td.good { color: var(--cyan); font-weight: 700; }
table.matrix td.meh { color: var(--text3); }

.aud { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 40px; }
.aud .card { border: 1px solid var(--border); border-radius: 8px; padding: 20px; background: var(--bg2); }
.aud .card h3 { font-size: 17px; margin-bottom: 6px; }
.aud .card p { color: var(--text2); font-size: 15px; }

.cta-band { text-align: center; padding: 90px 24px; background:
  radial-gradient(ellipse 50% 60% at 50% 0%, rgba(0,245,212,0.08), transparent); }
.cta-band h2 { font-size: clamp(28px, 4vw, 46px); }
.cta-band p { color: var(--text2); margin: 14px auto 30px; max-width: 620px; }

footer { border-top: 1px solid var(--border); padding: 44px 0 60px; color: var(--text3); font-size: 15px; }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
footer h4 { color: var(--text2); font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; }
footer a { color: var(--text3); display: block; margin: 6px 0; }
footer a:hover { color: var(--cyan); }
/* table scroll shell (comparison matrix on phones) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table.matrix { min-width: 640px; }

@media (max-width: 900px) {
  nav .links a:not(.btn) { display: none; }   /* keep the CTA, drop text links */
  nav .links { gap: 12px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  footer .cols { grid-template-columns: 1fr; }
  .grid-stage { grid-template-columns: 1fr; }
  section { padding: 56px 0; }
  .hero { padding: 44px 0 24px; }
  .hero .cta-row .btn { width: 100%; text-align: center; }
  .player-head { gap: 8px; padding: 10px 12px; }
  .player-head .title { font-size: 13px; }
  .clip-select { margin-left: 0; width: 100%; }
  .stat-strip .cell { flex: 1 1 45%; padding: 10px 12px; border-top: 1px solid var(--border); }
  .stat-strip .v { font-size: 18px; }
  .quad .big { font-size: 32px; }
  .pipeline { font-size: 12px; }
  .pipeline .node { padding: 10px 12px; }
  .cta-band { padding: 60px 16px; }
  .cta-band .btn { display: block; margin: 10px auto 0; max-width: 320px; }
  .tag { font-size: 10px; padding: 4px 8px; }
  .wipe-handle::after { font-size: 11px; padding: 5px 7px; }
}