/* 04 — ESPORTS TACTICAL
   Black + crimson + amber. Hexagon mesh, jersey type, angular cuts. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f1419;--paper:#171d24;--rule:#262e38;
  --crim:#dc143c;--crimD:#a60d2c;
  --amber:#ffb800;--amberD:#cc8e00;
  --text:#cdd4dd;--mute:#6b7686;--white:#f5f7fb;
  --glow-c:rgba(220,20,60,.35);
  --glow-a:rgba(255,184,0,.35);
}
html,body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,sans-serif;font-size:16px;line-height:1.65;min-height:100%}
body{
  background:
    linear-gradient(135deg,transparent 0%,transparent 49.5%,rgba(220,20,60,.04) 50%,transparent 50.5%,transparent 100%),
    radial-gradient(circle at 80% 20%,rgba(220,20,60,.12) 0%,transparent 40%),
    radial-gradient(circle at 20% 80%,rgba(255,184,0,.08) 0%,transparent 40%),
    var(--bg);
  background-size:24px 24px,100%,100%;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.5rem}
a{color:var(--amber);text-decoration:none}a:hover{color:var(--crim)}

/* HEADER */
.header-bar{background:linear-gradient(180deg,#000 0%,var(--paper) 100%);border-bottom:2px solid var(--crim);box-shadow:0 0 24px var(--glow-c)}
.header-bar .wrap{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.5rem}
.brand-block{display:flex;align-items:center;gap:.9rem}
.brand-mark{
  width:46px;height:46px;display:grid;place-items:center;
  font-family:"Oswald",sans-serif;font-weight:700;font-size:1.5rem;color:#000;
  background:var(--amber);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.brand-name{font-family:"Saira Condensed",sans-serif;font-weight:900;font-size:1.4rem;color:var(--white);letter-spacing:.06em;text-transform:uppercase;line-height:1}
.brand-sub{font-family:"Oswald",sans-serif;font-size:.7rem;color:var(--amber);letter-spacing:.18em;text-transform:uppercase;margin-top:.2rem}
.top-links{display:flex;gap:1.5rem;align-items:center}
.top-links a{font-family:"Oswald",sans-serif;font-size:.85rem;color:var(--text);letter-spacing:.06em;text-transform:uppercase;transition:.2s}
.top-links a:hover{color:var(--amber)}
.link-cta{
  border:2px solid var(--crim);color:var(--crim)!important;padding:.5rem 1.2rem;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)
}
.link-cta:hover{background:var(--crim);color:#fff!important}

/* HERO */
.hero-corp{padding:2rem 0 4rem;border-bottom:1px solid var(--rule)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.badge{
  display:inline-block;font-family:"Oswald",sans-serif;font-size:.78rem;font-weight:700;
  color:var(--amber);background:#000;border:1px solid var(--amber);
  padding:.5rem 1.2rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.6rem;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  box-shadow:0 0 14px var(--glow-a)
}
.hero-corp h1{
  font-family:"Saira Condensed",sans-serif;font-weight:900;
  font-size:clamp(2.6rem,5.5vw,4.5rem);line-height:.95;letter-spacing:-.01em;
  color:var(--white);text-transform:uppercase;margin-bottom:1.4rem;
  text-shadow:0 0 20px var(--glow-c)
}
.standfirst{font-size:1.1rem;color:var(--text);margin-bottom:2rem;line-height:1.6}
.standfirst strong{color:var(--amber);font-weight:600}
.btn-corp{
  display:inline-block;font-family:"Oswald",sans-serif;font-weight:700;font-size:.95rem;
  background:var(--crim);color:#fff;padding:1.1rem 2.4rem;
  letter-spacing:.18em;text-transform:uppercase;
  clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
  box-shadow:0 0 0 2px #000,0 0 30px var(--glow-c);transition:.2s
}
.btn-corp:hover{background:var(--amber);color:#000;box-shadow:0 0 0 2px #000,0 0 36px var(--glow-a)}
.footnote{margin-top:1rem;font-family:"Oswald",sans-serif;font-size:.78rem;color:var(--mute);letter-spacing:.16em;text-transform:uppercase}

/* KPI panel */
.kpi-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--crim);border:2px solid var(--crim);
  box-shadow:0 0 24px var(--glow-c)
}
.kpi{background:var(--paper);padding:2rem 1.5rem;text-align:center;position:relative}
.kpi::before{
  content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;
  background:var(--amber);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)
}
.kpi-v{font-family:"Saira Condensed",sans-serif;font-size:2.5rem;font-weight:900;color:var(--amber);line-height:1;margin-bottom:.4rem;text-shadow:0 0 16px var(--glow-a)}
.kpi-l{font-family:"Oswald",sans-serif;font-size:.72rem;color:var(--text);letter-spacing:.16em;text-transform:uppercase}

/* KW STRIP */
.kw-strip{
  border-color:var(--rule)!important;color:var(--amber)!important;
  font-family:"Oswald",sans-serif!important;font-weight:600;
  margin:2rem auto!important
}

/* WHY */
.why-corp{padding:5rem 0;background:linear-gradient(180deg,var(--bg) 0%,#000 50%,var(--bg) 100%)}
.h-section{
  font-family:"Saira Condensed",sans-serif;font-weight:900;font-size:2.5rem;
  color:var(--white);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem;
  position:relative;display:inline-block
}
.h-section::after{
  content:"";display:block;width:80px;height:3px;background:var(--crim);
  margin-top:.8rem;box-shadow:0 0 12px var(--glow-c)
}
.card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.card-corp{
  background:var(--paper);border:1px solid var(--rule);padding:2.4rem 1.8rem;position:relative;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  transition:.2s
}
.card-corp:hover{border-color:var(--crim);transform:translateY(-4px)}
.card-corp::before{
  content:"";position:absolute;top:0;left:0;width:4px;height:50%;
  background:linear-gradient(180deg,var(--crim) 0%,var(--amber) 100%)
}
.card-num{font-family:"Saira Condensed",sans-serif;font-size:2rem;font-weight:900;color:var(--crim);margin-bottom:.6rem;line-height:1}
.card-corp h3{font-family:"Oswald",sans-serif;font-weight:700;font-size:1.15rem;color:var(--white);margin-bottom:.7rem;letter-spacing:.04em;text-transform:uppercase}
.card-corp p{color:var(--text);font-size:.95rem;line-height:1.65}
.card-corp p strong{color:var(--amber)}

/* INFO (longform) */
.info-corp{padding:5rem 0}
.two-col-wide{display:grid;grid-template-columns:240px 1fr;gap:3rem}
.info-side{position:sticky;top:1.5rem;align-self:start;background:var(--paper);border-left:3px solid var(--crim);padding:1.5rem 1.4rem}
.info-side h4{font-family:"Oswald",sans-serif;font-size:.78rem;color:var(--amber);letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem}
.info-side ol{list-style:none;counter-reset:toc}
.info-side li{counter-increment:toc;font-size:.86rem;padding:.4rem 0;color:var(--text);line-height:1.5;border-bottom:1px solid var(--rule)}
.info-side li::before{content:counter(toc,decimal-leading-zero) "  ";color:var(--crim);font-family:"Oswald",sans-serif;font-weight:700}
.info-side li:last-child{border:none}
.info-body .standfirst{font-size:1.18rem;color:var(--white);font-style:italic;border-left:3px solid var(--amber);padding-left:1.4rem;margin-bottom:2rem}
.info-body h2{font-family:"Saira Condensed",sans-serif;font-weight:900;font-size:1.8rem;color:var(--white);text-transform:uppercase;letter-spacing:.02em;margin:2.2rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--crim)}
.info-body h3{font-family:"Oswald",sans-serif;font-weight:700;font-size:1.1rem;color:var(--amber);margin:1.4rem 0 .6rem;letter-spacing:.04em;text-transform:uppercase}
.info-body p{color:var(--text);margin-bottom:1rem;font-size:1rem;line-height:1.75}
.info-body p strong{color:var(--amber);font-weight:700}

/* FAQ */
.faq-corp{padding:5rem 0;background:#000}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.5rem}
.faq-item{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--amber);padding:1.4rem 1.6rem;transition:.2s}
.faq-item:hover{border-left-color:var(--crim)}
.faq-item summary{font-family:"Oswald",sans-serif;font-weight:700;font-size:1rem;color:var(--white);cursor:pointer;list-style:none;letter-spacing:.02em;position:relative;padding-right:2rem}
.faq-item summary:hover{color:var(--amber)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:-2px;font-size:1.4rem;color:var(--crim)}
.faq-item[open] summary::after{content:"−";color:var(--amber)}
.faq-item p{margin-top:.8rem;color:var(--text);font-size:.95rem;line-height:1.7}

/* CTA */
.cta-corp{padding:5rem 0;background:linear-gradient(180deg,var(--bg) 0%,var(--paper) 100%);border-top:2px solid var(--crim);border-bottom:2px solid var(--crim);box-shadow:0 0 40px var(--glow-c) inset;text-align:center;position:relative}
.badge-light{background:var(--amber);color:#000;border-color:var(--amber)}
.cta-corp h2{font-family:"Saira Condensed",sans-serif;font-weight:900;font-size:clamp(2rem,5vw,3.4rem);color:var(--white);text-transform:uppercase;line-height:1;letter-spacing:.02em;margin:1.4rem 0;text-shadow:0 0 20px var(--glow-c)}
.cta-corp p{max-width:560px;margin:0 auto 2rem;color:var(--text);font-size:1.05rem}
.cta-corp p strong{color:var(--amber)}
.btn-corp-light{background:var(--amber);color:#000;font-size:1.05rem;padding:1.3rem 3rem}
.btn-corp-light:hover{background:#fff;color:#000}

/* FOOTER */
.foot-corp{background:#000;border-top:1px solid var(--rule);padding:2rem 0}
.foot-corp .wrap{display:flex;justify-content:space-between;font-family:"Oswald",sans-serif;font-size:.78rem;color:var(--mute);letter-spacing:.16em;text-transform:uppercase}

@media(max-width:880px){
  .two-col{grid-template-columns:1fr}
  .card-row{grid-template-columns:1fr}
  .two-col-wide{grid-template-columns:1fr}
  .info-side{position:static}
  .faq-grid{grid-template-columns:1fr}
  .top-links{display:none}
}