/* ============================================================
   TBI — TOTAL BADASS INC · site stylesheet
   Visual language: a broadcast control room. The site is the
   city watching itself — every surface is a frame or a module
   on a monitor wall. Amber is the signal colour and is spent
   only on live or primary elements. Palette locked to the
   in-game brand (loading screen + emblem).
   ============================================================ */

@font-face{font-family:"Big Shoulders Display";src:url("fonts/BigShouldersDisplay.ttf") format("truetype");
  font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans.ttf") format("truetype");
  font-weight:100 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono.ttf") format("truetype");
  font-weight:400;font-display:swap}

:root{
  --ink:#14111A;        /* charcoal-violet, the brand ground */
  --deep:#0A0810;       /* deeper well for panels and frames */
  --amber:#FFB454;      /* the signal colour */
  --ember:#C9541E;      /* heat, used sparingly */
  --bronze:#C9A15A;     /* labels, rules */
  --bone:#EDE6DA;       /* body text */
  --dim:#8D8395;        /* secondary text */
  --line:#2E2838;       /* hairlines */
  --violet:#3A2E4A;     /* emblem field */
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  background:var(--ink);color:var(--bone);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(201,84,30,.14), transparent 70%),
    radial-gradient(ellipse 700px 400px at 92% 8%, rgba(58,46,74,.45), transparent 70%);
  background-attachment:fixed;
  position:relative;overflow-x:hidden;
}
::selection{background:var(--amber);color:var(--ink)}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- masthead ---------- */
.mast{
  position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:rgba(10,8,16,.88);border-bottom:1px solid var(--line);
}
.mast::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--amber),transparent 34%);opacity:.55;pointer-events:none}
.mast .wrap{display:flex;align-items:center;gap:18px;height:66px}
.mark{width:34px;height:34px;flex:none}
.mast .mark{width:36px;height:36px;object-fit:contain}
.wordmark{font-family:var(--display);font-size:25px;font-weight:800;
  letter-spacing:.10em;line-height:1;text-transform:uppercase}
.wordmark span{color:var(--amber)}
.mast nav{margin-left:auto;display:flex;align-items:center;gap:26px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.mast nav a{color:var(--dim)}
.mast nav a:hover,.mast nav a[aria-current]{color:var(--bone);text-decoration:none}
.btn{
  display:inline-block;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:11px 20px;border:1px solid var(--amber);
  color:var(--amber);background:transparent;cursor:pointer;transition:.16s
}
.btn:hover{background:var(--amber);color:var(--ink);text-decoration:none}
.btn.solid{background:var(--amber);color:var(--ink);font-weight:600}
.btn.solid:hover{background:#ffc879;border-color:#ffc879;color:var(--ink)}
.btn.ghost{border-color:var(--line);color:var(--bone)}
.btn.ghost:hover{border-color:var(--bone);background:transparent;color:var(--bone)}

/* ---------- shared frame chrome: corner ticks, scanlines, HUD ---------- */
.ck{position:absolute;width:16px;height:16px;z-index:4;opacity:.5;pointer-events:none}
.ck.tl{top:10px;left:10px;border-top:1px solid var(--bone);border-left:1px solid var(--bone)}
.ck.tr{top:10px;right:10px;border-top:1px solid var(--bone);border-right:1px solid var(--bone)}
.ck.bl{bottom:10px;left:10px;border-bottom:1px solid var(--bone);border-left:1px solid var(--bone)}
.ck.br{bottom:10px;right:10px;border-bottom:1px solid var(--bone);border-right:1px solid var(--bone)}
.scan{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(0deg,rgba(237,230,218,.02) 0 1px,transparent 1px 4px)}

/* ---------- the hero wall: primary feed + module rail ---------- */
.wall{display:grid;grid-template-columns:1fr 372px;gap:14px;padding-top:18px;padding-bottom:14px}
.feedframe{position:relative;border:1px solid var(--line);background:var(--deep);
  overflow:hidden;min-height:clamp(560px,calc(100svh - 250px),760px);
  display:flex;flex-direction:column;justify-content:space-between}
.feedimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 38%;z-index:0}
.feedframe::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,8,16,.92) 0%,rgba(10,8,16,.72) 34%,rgba(10,8,16,.18) 66%,rgba(10,8,16,.45) 100%),
             linear-gradient(0deg,rgba(10,8,16,.94) 0%,rgba(10,8,16,.35) 30%,transparent 52%),
             linear-gradient(180deg,rgba(10,8,16,.65) 0%,transparent 18%)}
.fhud{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:16px 22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze)}
.fhud .onair{color:var(--amber)}
.feedlow{position:relative;z-index:3;padding:0 26px 26px}
.chy{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--bronze);margin-bottom:20px;
  border-left:3px solid var(--amber);padding-left:14px}
.onair{display:inline-flex;align-items:center;gap:8px;color:var(--amber)}
.onair i{width:8px;height:8px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 10px var(--amber);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--bronze);margin-bottom:24px;
  display:flex;align-items:center;gap:12px;border-left:3px solid var(--amber);padding-left:14px}
h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(52px,7.8vw,108px);line-height:.88;letter-spacing:-.005em}
h1 em{font-style:normal;color:var(--amber)}
.lede{max-width:52ch;margin-top:22px;font-size:19px;color:var(--bone)}
.lede + .lede{margin-top:14px;color:var(--dim);font-size:17px}
.cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

/* ---------- the module rail (control-room column) ---------- */
.railcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.module{background:var(--deep);border:1px solid var(--line);padding:18px 20px;
  display:flex;flex-direction:column;gap:10px;position:relative}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.mled{width:7px;height:7px;border-radius:50%;background:var(--bronze);opacity:.5;flex:none}
.mled.live{background:var(--amber);box-shadow:0 0 9px var(--amber);opacity:1}
.mval{font-family:var(--display);font-size:30px;font-weight:800;text-transform:uppercase;
  line-height:.95;color:var(--bone)}
.mval em{font-style:normal;color:var(--amber)}
.msub{font-size:13px;line-height:1.55;color:var(--dim)}
.msub b{color:var(--bone);font-weight:500}
.mrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:13px;color:var(--dim);padding:7px 0;border-bottom:1px solid #1C1725}
.mrow:last-child{border-bottom:none;padding-bottom:0}
.mrow b{color:var(--bone);font-weight:500;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase}
.mnote{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);opacity:.8}
.offair{border-color:#3A3244;flex:1}
.offair .row{display:flex;align-items:center;gap:14px}
.oaplay{width:46px;height:46px;flex:none;border:1px solid var(--amber);background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:not-allowed;opacity:.5}
.oaplay i{display:block;width:0;height:0;border-top:8px solid transparent;
  border-bottom:8px solid transparent;border-left:13px solid var(--amber);margin-left:3px}

/* ---------- designed media slots (labelled, honest) ---------- */
.slotlabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,230,218,.45)}
.imgframe{position:relative;border:1px solid var(--line);background:var(--deep);overflow:hidden}
.imgframe img{display:block;width:100%;height:100%;object-fit:cover}
.imgframe .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:8px 12px;
  background:linear-gradient(0deg,rgba(10,8,16,.85),transparent);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,230,218,.55)}

/* ---------- sections ---------- */
section{padding:92px 0;scroll-margin-top:80px}
.sechead{display:flex;align-items:baseline;gap:16px;margin-bottom:44px;
  border-bottom:1px solid var(--line);padding-bottom:16px}
.sechead .ch{font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  color:var(--bronze);text-transform:uppercase}
.sechead h2{font-family:var(--display);font-size:clamp(32px,4.6vw,52px);
  font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.card{border:1px solid var(--line);background:var(--deep);padding:28px;position:relative}
.card h3{font-family:var(--display);font-size:27px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:12px}
.card p{color:var(--dim);font-size:15.5px}
.card p b{color:var(--bone);font-weight:500}

/* ---------- the door (funnel) ---------- */
.door{border:1px solid var(--bronze);background:rgba(255,180,84,.045);padding:44px;position:relative}
.door h2{font-family:var(--display);font-size:clamp(30px,4vw,46px);
  text-transform:uppercase;font-weight:700;line-height:1;margin-bottom:18px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:34px 0 30px}
.step{border-top:1px solid var(--line);padding-top:16px}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--amber);display:block;margin-bottom:10px}
.step p{font-size:15.5px;color:var(--dim)}
.step p b{color:var(--bone);font-weight:500}

/* ---------- forms ---------- */
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;background:var(--deep);border:1px solid var(--line);color:var(--bone);
  font-family:var(--body);font-size:16px;padding:13px 15px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--amber);outline:none;
  box-shadow:0 0 0 1px rgba(255,180,84,.35)}
.field .hint{font-size:13.5px;color:var(--dim);margin-top:7px}
.hint{font-size:13.5px;color:var(--dim)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.console{border:1px solid var(--line);background:rgba(10,8,16,.55);padding:34px;position:relative}

/* ---------- prose (legal / rules / faq) ---------- */
.prose{max-width:74ch}
.prose h2{font-family:var(--display);font-size:34px;text-transform:uppercase;
  font-weight:700;margin:52px 0 16px;letter-spacing:.02em}
.prose h3{font-family:var(--body);font-size:18px;font-weight:600;margin:32px 0 8px;color:var(--bone);
  border-left:2px solid var(--amber);padding-left:14px}
.prose p{margin-bottom:16px;color:var(--bone)}
.prose h3 + p{color:var(--dim)}
.prose p a{text-decoration:underline;text-underline-offset:3px}
.prose ul{margin:0 0 18px 20px}
.prose li{margin-bottom:9px;color:var(--bone)}
.prose .note{border-left:2px solid var(--bronze);padding-left:18px;color:var(--dim);font-size:15.5px}

/* ---------- footer / legal furniture (PLA §2.3) ---------- */
footer{border-top:1px solid var(--line);padding:54px 0 68px;margin-top:40px;
  background:rgba(8,6,12,.7)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px}
footer nav{display:flex;flex-direction:column;gap:9px;font-size:14.5px}
footer nav a{color:var(--dim)}
footer nav a:hover{color:var(--bone)}
.flabel{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze);margin-bottom:16px}
.legal{border-top:1px solid var(--line);padding-top:26px;
  font-family:var(--mono);font-size:11.5px;line-height:1.9;color:var(--dim);letter-spacing:.04em}
.legal strong{color:var(--bone);font-weight:500;display:block;margin:10px 0}

/* ===== SYSTEMS GRID — a bank of monitors. Front and centre. ===== */
.systems{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.sys{background:var(--deep);padding:20px;transition:.15s;position:relative}
.sys:hover{background:#161020}
.sys::before{content:"";position:absolute;top:6px;right:6px;width:10px;height:10px;
  border-top:1px solid var(--amber);border-right:1px solid var(--amber);opacity:0;transition:.15s}
.sys:hover::before{opacity:.7}
.sys .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid #1C1725}
.sys .tag::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--bronze);
  opacity:.45;flex:none}
.sys.hot .tag::after{background:var(--amber);opacity:1;box-shadow:0 0 7px var(--amber)}
.sys h4{font-family:var(--display);font-size:21px;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:7px;line-height:1.05}
.sys p{font-size:13px;color:var(--dim);line-height:1.5}
.sys.hot h4{color:var(--amber)}
.sys.wide{grid-column:span 2}
@media(max-width:900px){.systems{grid-template-columns:repeat(2,1fr)}.sys.wide{grid-column:span 2}}
@media(max-width:560px){.systems{grid-template-columns:1fr}.sys.wide{grid-column:span 1}}

/* ===== EDGE — the five nobody can copy: editorial column against the wall ===== */
.edge{display:grid;grid-template-columns:1.4fr 1fr;gap:0;border:1px solid var(--bronze)}
.edge .lead{padding:34px;border-right:1px solid var(--bronze);background:rgba(255,180,84,.05);
  display:flex;flex-direction:column;gap:14px}
.edge .lead h3{font-family:var(--display);font-size:36px;text-transform:uppercase;
  font-weight:700;line-height:.95}
.edge .lead p{color:var(--bone);font-size:15.5px}
.edge .lead .imgframe{margin-top:auto;aspect-ratio:16/9}
.edge ul{list-style:none;padding:0;margin:0}
.edge li{padding:17px 26px;border-bottom:1px solid var(--line);font-size:14px;color:var(--dim)}
.edge li:last-child{border-bottom:none}
.edge li b{color:var(--bone);display:block;font-weight:600;margin-bottom:3px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:860px){.edge{grid-template-columns:1fr}.edge .lead{border-right:none;border-bottom:1px solid var(--bronze)}}

/* ===== SHOP CARDS ===== */
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tier{border:1px solid var(--line);background:var(--deep);padding:26px;display:flex;flex-direction:column;
  position:relative;transition:.15s}
.tier:hover{border-color:#4A4056}
.tier.feature{border-color:var(--amber);box-shadow:0 0 0 1px rgba(255,180,84,.25), 0 0 34px rgba(255,180,84,.05)}
.tier .price{font-family:var(--display);font-size:38px;font-weight:800;color:var(--amber);line-height:1}
.tier .per{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase}
.tier h4{font-family:var(--display);font-size:24px;text-transform:uppercase;margin:14px 0 10px}
.tier ul{list-style:none;margin:14px 0 0;padding:0;flex:1}
.tier li{font-size:13.5px;color:var(--dim);padding:6px 0;border-bottom:1px solid #1E1928}
.tier .note{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze);margin-top:16px;border-top:1px solid #1E1928;padding-top:12px}
@media(max-width:860px){.shop{grid-template-columns:1fr}}

/* ===== RULES ===== */
.ruleset{max-width:78ch}
.ruleset h2{font-family:var(--display);font-size:26px;text-transform:uppercase;font-weight:700;
  letter-spacing:.04em;margin:48px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--amber)}
.rule{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid #1C1725;font-size:15px;line-height:1.6}
.rule .rn{font-family:var(--mono);font-size:11px;color:var(--amber);flex:none;min-width:30px;height:22px;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
  border:1px solid #3A3244;background:var(--deep);letter-spacing:.06em}
.rule b{display:block;color:var(--bone);font-weight:600;margin-bottom:4px}
.rule div{color:var(--dim)}
.gap{color:var(--ember);font-family:var(--mono);font-size:12px;background:rgba(201,84,30,.12);padding:1px 6px}

/* ---------- motion discipline ---------- */
@media (prefers-reduced-motion:reduce){
  .onair i{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .wall{grid-template-columns:1fr}
  .feedframe{min-height:64svh}
  .railcol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .offair{grid-column:span 2}
}
@media (max-width:860px){
  .grid3,.steps,.two,.fgrid{grid-template-columns:1fr}
  .mast nav a:not(.btn){display:none}
  section{padding:64px 0}
  .door{padding:28px}
  .console{padding:22px}
  .step{margin-bottom:4px}
}
@media (max-width:640px){
  .railcol{grid-template-columns:1fr}
  .offair{grid-column:span 1}
  .btn{padding:14px 22px}
  footer nav{gap:0}
  footer nav a{padding:12px 0}
}
@media (max-width:520px){
  .wrap{padding:0 20px}
  h1{font-size:clamp(40px,12.5vw,60px)}
  .wordmark{font-size:19px;letter-spacing:.12em}
  .chy,.eyebrow{font-size:10px;letter-spacing:.16em;flex-wrap:wrap;gap:6px}
  .lede{font-size:17px;margin-top:20px}
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{text-align:center}
  .feedlow{padding:0 18px 20px}
  .fhud{padding:12px 16px;font-size:9px;letter-spacing:.12em}
  .legal{font-size:10.5px;line-height:1.8}
  .mast .wrap{height:58px;gap:12px}
}

/* hero page-band (interior pages keep the plain band) */
.hero{padding:88px 0 0;position:relative;z-index:1}