:root{
  --bg:#0b0b0d;
  --fg:#f3f3f4;
  --muted:rgba(243,243,244,.62);
  --line:rgba(243,243,244,.16);
  --line2:rgba(243,243,244,.10);
  --accent:#ff3b30; /* premium red */
  --paper:#101013;
  --shadow: 0 26px 90px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:
    linear-gradient(90deg, rgba(255,59,48,.10), transparent 60%),
    radial-gradient(900px 700px at 85% 10%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px, calc(100% - 40px)); margin:0 auto;}

.top{position:sticky;top:0;z-index:20;background:rgba(11,11,13,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
.top-in{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.mark{width:10px;height:10px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 6px rgba(255,59,48,.12)}
.bn{font-weight:800;letter-spacing:.2px}
.nav{display:none;gap:14px;align-items:center}
@media(min-width:900px){.nav{display:flex}}
.a{font-family:"IBM Plex Mono", monospace;font-size:12px;letter-spacing:.12em;color:rgba(243,243,244,.70);padding:10px 10px;border-radius:10px}
.a:hover{background:rgba(255,255,255,.06)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;font-weight:800;font-size:13px;border:1px solid rgba(255,59,48,.28);background:rgba(255,255,255,.04)}
.btn2{background:linear-gradient(135deg, rgba(255,59,48,.18), rgba(255,255,255,.04))}
.ghost{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;border:1px solid var(--line2);background:transparent}
.w{width:100%}

.hero{padding:70px 0 22px}
.hero-in{display:grid;gap:16px;align-items:start}
@media(min-width:980px){.hero-in{grid-template-columns:1.05fr .95fr}}
.strap{font-family:"IBM Plex Mono", monospace;font-size:12px;letter-spacing:.18em;color:rgba(255,59,48,.90)}
.h1{margin:14px 0 0;font-weight:900;letter-spacing:-.8px;font-size:clamp(40px,5vw,74px);line-height:0.98;text-transform:uppercase}
.cut{display:inline-block;color:rgba(243,243,244,.72);font-weight:800}
.p{margin:14px 0 0;color:rgba(243,243,244,.72);line-height:1.75;max-width:70ch}
.cta{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}

.tape{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.tape span{font-family:"IBM Plex Mono", monospace;font-size:12px;border:1px solid var(--line2);padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.03)}

.poster{border:1px solid var(--line2);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.p-head{padding:12px 14px;border-bottom:1px solid var(--line2);font-family:"IBM Plex Mono", monospace;letter-spacing:.16em;font-size:12px;color:rgba(243,243,244,.72)}
.p-grid{padding:14px;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.blk{border:1px solid rgba(243,243,244,.14);border-radius:12px;background:rgba(0,0,0,.24);padding:12px}
.blk b{display:block;font-family:"IBM Plex Mono", monospace;letter-spacing:.14em;font-size:12px;color:rgba(255,59,48,.90)}
.blk span{display:block;margin-top:10px;font-weight:900;text-transform:uppercase}
.blk i{display:block;margin-top:6px;font-style:normal;color:rgba(243,243,244,.62)}
.blk.hot{border-color:rgba(255,59,48,.30)}
.p-foot{padding:12px 14px;border-top:1px solid var(--line2);font-family:"IBM Plex Mono", monospace;color:rgba(243,243,244,.62);font-size:12px}

.sec{padding:58px 0}
.head{max-width:74ch}
.ey{font-family:"IBM Plex Mono", monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,59,48,.90)}
.h2{margin:10px 0 0;font-weight:900;letter-spacing:-.3px;font-size:clamp(22px,3vw,36px);text-transform:uppercase}

.tracks{margin-top:14px;display:grid;gap:10px}
@media(min-width:980px){.tracks{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.t{border:1px solid var(--line2);background:rgba(255,255,255,.03);border-radius:12px;padding:14px}
.tt{font-family:"IBM Plex Mono", monospace;letter-spacing:.16em;font-size:12px;color:rgba(255,59,48,.90)}
.tp{margin-top:10px;font-weight:900;text-transform:uppercase}
.tl{margin-top:10px;color:rgba(243,243,244,.70);line-height:1.6}

.prices{margin-top:14px;display:grid;gap:10px}
@media(min-width:980px){.prices{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.pr{border:1px solid rgba(243,243,244,.14);background:rgba(0,0,0,.22);border-radius:12px;padding:14px}
.pr.hi{border-color:rgba(255,59,48,.30);box-shadow:0 0 0 4px rgba(255,59,48,.10) inset}
.pk{font-weight:900;text-transform:uppercase}
.pp{margin-top:8px;font-weight:900;font-size:28px}
.ps{margin-top:8px;color:rgba(243,243,244,.70)}

.builder{margin-top:14px;display:grid;gap:12px}
@media(min-width:980px){.builder{grid-template-columns:.9fr 1.1fr; align-items:start}}
.form{border:1px solid rgba(243,243,244,.14);background:rgba(0,0,0,.22);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.f{display:grid;gap:6px;margin-top:10px}
.f label{font-family:"IBM Plex Mono", monospace;font-size:12px;color:rgba(243,243,244,.70)}
.f select{width:100%;border-radius:12px;border:1px solid rgba(243,243,244,.14);background:rgba(255,255,255,.04);padding:12px;color:var(--fg);outline:none}
.f select:focus{border-color:rgba(255,59,48,.36);box-shadow:0 0 0 5px rgba(255,59,48,.12)}
.fine{margin-top:10px;font-size:12px;color:rgba(243,243,244,.62);font-family:"IBM Plex Mono", monospace}
.out{border:1px solid rgba(255,59,48,.22);background:rgba(255,59,48,.06);border-radius:12px;padding:14px}
.o-h{font-weight:900;text-transform:uppercase}
.o-p{margin-top:10px;color:rgba(243,243,244,.76);line-height:1.65}

.foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:rgba(243,243,244,.62);font-size:12px;font-family:"IBM Plex Mono", monospace}

[data-reveal]{opacity:0; transform: translateY(10px); transition: opacity .65s ease, transform .65s ease;}
[data-reveal].is-in{opacity:1; transform: translateY(0)}

@media(max-width:540px){
  .p-grid{grid-template-columns:1fr}
}