/* Iota Pulse — site styles. Tokens first; everything derives from them. */
/* Layout: a dark shop-floor. One shouting headline, then a dense two-up rack of the designs as they print, buttons under each. */
:root{
  --bg:#17171b; --bg-2:#1f1f24; --ink:#f3f1ec; --mute:#9a978f; --line:#2c2c33;
  --amber:#f59e0b; --amber-ink:#17171b; --teal:#2dd4bf;
  --display:'Anton','Archivo Black',Impact,sans-serif;
  --body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding-block:0 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.logo{font-family:var(--display);font-size:22px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.logo b{color:var(--amber);font-weight:400}
nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
nav a{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:7px 11px;border:1px solid var(--line);border-radius:4px;color:var(--mute)}
nav a:hover,nav a:focus-visible{color:var(--ink);border-color:var(--mute)}
.hero{padding:56px 0 40px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:end}
.hero h1{font-family:var(--display);font-size:clamp(44px,8vw,96px);line-height:.92;margin:0;text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p{font-size:18px;color:var(--mute);max-width:40ch;margin:0 0 20px}
.hero .side{display:grid;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:12px 16px;border-radius:4px;background:var(--amber);color:var(--amber-ink);border:1px solid var(--amber);min-width:0}
.btn:hover,.btn:focus-visible{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--mute);filter:none}
.btn.soon{background:transparent;color:var(--mute);border-style:dashed;cursor:default}
.stat{font-family:var(--mono);font-size:12px;color:var(--mute);letter-spacing:.04em}
.stat b{color:var(--teal);font-weight:700}
.rail{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:32px}
.rail p{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.rail p b{color:var(--ink);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.art{flex:1;background:#1b1b1f;padding:40px 28px;display:flex;align-items:center;justify-content:center;min-height:260px}
.art img{max-width:100%;height:auto;width:min(100%,520px);display:block}
.meta{padding:16px 18px 18px;display:grid;gap:10px}
.no{margin:0;font-family:var(--mono);font-size:12px;color:var(--mute);letter-spacing:.08em}
.meta h3{margin:0;font-family:var(--body);font-weight:800;font-size:17px;line-height:1.25;text-wrap:balance}
.buy{display:flex;gap:8px;flex-wrap:wrap}
.buy .btn{flex:1 1 140px;padding:10px 12px;font-size:12px}
.platforms{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plat{border:1px solid var(--line);border-radius:6px;padding:18px;display:grid;gap:8px;align-content:start;min-width:0}
.plat h4{margin:0;font-family:var(--display);font-size:22px;letter-spacing:.04em;text-transform:uppercase;font-weight:400}
.plat p{margin:0;color:var(--mute);font-size:14px}
.plat .btn{justify-self:start}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:3px;justify-self:start}
.tag.live{background:rgba(45,212,191,.12);color:var(--teal)}
.tag.soon{background:rgba(154,151,143,.14);color:var(--mute)}
.about{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:32px;border-top:1px solid var(--line);padding-top:32px}
.about h2{font-family:var(--display);font-size:34px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.02em;font-weight:400}
.about p{color:var(--mute);margin:0 0 12px;max-width:52ch}
.about ul{margin:0;padding-left:18px;color:var(--mute)}
footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--mute)}
footer a{color:var(--mute)}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:36px}
  .grid{grid-template-columns:1fr}
  .platforms{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .art{padding:28px 18px;min-height:200px}
}
@media (prefers-reduced-motion:no-preference){
  .card{transition:transform .18s ease,border-color .18s ease}
  .card:hover{transform:translateY(-2px);border-color:var(--mute)}
}