/* ==========================================================================
   Mega Sports X proposal — EZiL
   Direction: the competition mat. Deep blue black grounds, the red and blue of
   the two athlete corners as the only accents, broadcast condensed display type
   over an institutional body face.
   One committed visual world. Every colour is painted explicitly, so the page
   renders the same regardless of the viewer's OS theme.
   ========================================================================== */

@font-face{font-family:'Plex Cond';src:url(fonts/plex-cond-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plex Cond';src:url(fonts/plex-cond-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/plex-sans-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/plex-sans-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/plex-sans-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(fonts/plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(fonts/plex-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  --deep:#06090F; --dark:#0B111A; --dark-2:#121A26;
  --line-d:rgba(255,255,255,.09); --line-d2:rgba(255,255,255,.16);
  --on-d:#F0F4FA; --on-d2:#A6B3C6; --on-d3:#6E7D93;

  --paper:#FFFFFF; --soft:#F5F7FA; --soft-2:#EDF1F6;
  --line:#E2E8F0; --line-2:#EFF3F8;
  --ink:#0A1017; --ink-2:#46546A; --ink-3:#6D7C93;

  --red:#DF3446; --red-hi:#FF5265; --red-soft:#FDECEE;
  --blue:#3D7DFF; --blue-soft:#EBF2FF;

  --r:4px; --pad:clamp(20px,5vw,56px); --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Plex',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Plex Cond','Plex',system-ui,sans-serif;font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.01em;line-height:1.06}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

.eyebrow{font-family:'Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow.on-dark{color:var(--on-d3)}
.eyebrow .sep{color:var(--red);margin-inline:9px;opacity:.75}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(6,9,15,.88);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line-d)}
.nav-in{display:flex;align-items:center;gap:26px;height:62px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:baseline;gap:9px;flex:none;min-width:0}
.brand b{font-family:'Plex Cond',sans-serif;font-size:18px;color:var(--on-d);letter-spacing:.06em;white-space:nowrap}
.brand span{font-family:'Plex Mono',monospace;font-size:10px;color:var(--on-d3);letter-spacing:.14em}
.nav-links{display:none;gap:22px;margin-left:auto}
@media(min-width:1040px){.nav-links{display:flex}}
.nav-links a{font-size:14px;color:var(--on-d2);transition:color .16s;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:var(--on-d)}
.nav-cta{margin-left:auto;flex:none}
@media(min-width:1040px){.nav-cta{margin-left:0}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Plex',sans-serif;font-weight:600;font-size:14.5px;
  padding:11px 20px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:transform .14s,background .16s,border-color .16s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hi)}
.btn-ghost-d{border-color:var(--line-d2);color:var(--on-d)}
.btn-ghost-d:hover{border-color:var(--on-d2);background:rgba(255,255,255,.05)}
.btn-lg{padding:14px 26px;font-size:16px}

/* ---------- BANDS ---------- */
.band{padding:clamp(60px,8.5vw,110px) 0}
.band-d{background:var(--deep);color:var(--on-d)}
.band-d h2,.band-d h3{color:var(--on-d)}
.band-soft{background:var(--soft)}
.band-tight{padding-block:clamp(46px,6vw,74px)}
.sec-head{margin-bottom:clamp(30px,4vw,48px);max-width:800px}
.sec-head .eyebrow{display:block;margin-bottom:16px}
h2{font-size:clamp(29px,4.4vw,50px)}
.sec-lede{margin-top:18px;font-size:clamp(16.5px,1.7vw,19.5px);line-height:1.58;color:var(--ink-2);max-width:660px}
.band-d .sec-lede{color:var(--on-d2)}
.subh{font-size:20px;margin-bottom:18px}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(61,125,255,.16), transparent 62%),
    radial-gradient(760px 420px at 88% 6%, rgba(223,52,70,.13), transparent 60%),
    var(--deep);
  color:var(--on-d);padding:clamp(56px,8vw,100px) 0 0;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px);
  background-size:64px 64px;opacity:.4;
  -webkit-mask-image:radial-gradient(900px 420px at 50% 0%,#000,transparent 78%);
  mask-image:radial-gradient(900px 420px at 50% 0%,#000,transparent 78%)}
.hero-in{position:relative;z-index:1}
h1{font-size:clamp(37px,5.6vw,70px);line-height:1.04;letter-spacing:-.026em;max-width:20ch}
h1 .mute{color:var(--on-d3);display:block}
.hero-lede{margin-top:26px;font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:var(--on-d2);max-width:610px}
.hero-lede b{color:var(--on-d);font-weight:600}
.hero-btns{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:clamp(44px,6vw,72px);
  background:var(--line-d);border-block:1px solid var(--line-d)}
@media(min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--deep);padding:20px 22px 22px}
.stat dt{font-family:'Plex Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--on-d3);margin-bottom:9px}
.stat dd{margin:0;font-family:'Plex Cond',sans-serif;font-weight:700;font-size:clamp(24px,2.9vw,33px);line-height:1.05;color:var(--on-d)}
.stat dd small{display:block;font-family:'Plex',sans-serif;font-weight:400;font-size:12.5px;color:var(--on-d3);margin-top:8px;letter-spacing:0;line-height:1.4}

/* ---------- SHOWCASE ---------- */
.showcase-wrap{background:linear-gradient(var(--deep) 0 55%, var(--soft) 55% 100%);padding-top:clamp(40px,5vw,64px)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 1px 2px rgba(6,9,15,.05),0 24px 60px -28px rgba(6,9,15,.42);overflow:hidden}
.card-head{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid var(--line-2);background:var(--soft)}
.card-head h3{font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.card-head .ref{font-family:'Plex Mono',monospace;font-size:11.5px;color:var(--ink-3)}
.card-body{padding:24px 22px 10px;overflow-x:auto}
.card-legend{display:flex;flex-wrap:wrap;gap:8px 24px;padding:0 22px 18px;font-size:13px;color:var(--ink-3)}
.card-legend span{display:inline-flex;align-items:center;gap:8px}
.swatch{width:15px;height:2px;flex:none;border-radius:1px}
.card-note{padding:16px 22px;border-top:1px solid var(--line-2);background:var(--soft);font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* ---------- DELIVERABLES ---------- */
.deliver{display:grid;gap:14px}
@media(min-width:820px){.deliver{grid-template-columns:1fr 1fr}}
.dgroup{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:24px 22px}
.dhead{display:flex;align-items:center;gap:13px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.dnum{font-family:'Plex Mono',monospace;font-size:12px;font-weight:500;color:#fff;background:var(--ink);
  width:26px;height:26px;border-radius:var(--r);display:grid;place-items:center;flex:none}
.dhead h3{font-size:21px}

/* ---------- FLOW ---------- */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;counter-reset:f}
@media(min-width:700px){.flow{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.flow{grid-template-columns:repeat(3,1fr)}}
.flow li{background:var(--paper);padding:20px 20px 22px;counter-increment:f;position:relative}
.flow li::before{content:counter(f,decimal-leading-zero);font-family:'Plex Mono',monospace;font-size:10.5px;
  color:var(--red);letter-spacing:.1em;display:block;margin-bottom:11px}
.flow li b{font-family:'Plex Cond',sans-serif;font-size:18px;display:block;margin-bottom:6px}
.flow li span{font-size:14.5px;color:var(--ink-2);line-height:1.55;display:block}

/* ---------- STACK TABLE ---------- */
.stack{width:100%;border-collapse:collapse;font-size:15px}
.stack th{text-align:left;font-family:'Plex Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-d3);font-weight:500;padding:0 18px 11px 0;border-bottom:1px solid var(--line-d)}
.stack td{padding:15px 18px 15px 0;border-bottom:1px solid var(--line-d);vertical-align:top;color:var(--on-d2);line-height:1.55}
.stack td:first-child{color:var(--on-d);font-weight:600;font-family:'Plex Cond',sans-serif;font-size:17px}
.stack td:nth-child(2){color:var(--on-d);white-space:nowrap}
.stack td:last-child{padding-right:0}
@media(max-width:720px){
  .stack thead{display:none}
  .stack tr{display:block;padding:16px 0;border-bottom:1px solid var(--line-d)}
  .stack td{display:block;border:0;padding:0 0 6px}
  .stack td:nth-child(2){font-family:'Plex Mono',monospace;font-size:12px;color:var(--on-d3);white-space:normal}
}

/* ---------- STEPS ---------- */
.steps{display:grid;gap:12px}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:22px 20px;position:relative}
.step::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--red);border-radius:6px 6px 0 0}
.snum{font-family:'Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);display:block;margin-bottom:12px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.note-light{margin-top:26px;padding:18px 20px;border:1px dashed var(--line);border-radius:var(--r);
  background:var(--paper);font-size:14.5px;color:var(--ink-2);line-height:1.6;max-width:860px}
.note-light b{color:var(--ink);font-weight:600}

/* ---------- PRICE ---------- */
.pricebox{display:grid;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper)}
@media(min-width:860px){.pricebox{grid-template-columns:1fr 1fr}}
.pricemain{background:var(--deep);color:var(--on-d);padding:clamp(28px,4vw,44px)}
.plabel{font-family:'Plex Mono',monospace;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--on-d3);display:block}
.pbig{font-family:'Plex Cond',sans-serif;font-weight:700;font-size:clamp(40px,6vw,62px);line-height:1;margin-top:18px;letter-spacing:-.02em}
.pnote{display:block;margin-top:18px;font-size:14px;color:var(--on-d2);line-height:1.55}
.psplit{display:flex;flex-direction:column}
.prow{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:clamp(22px,3vw,30px) clamp(22px,3vw,32px);flex:1}
.prow+.prow{border-top:1px solid var(--line-2)}
.prow b{font-family:'Plex Cond',sans-serif;font-size:20px;display:block;margin-bottom:5px}
.prow span{font-size:14px;color:var(--ink-2);line-height:1.5}
.pamt{font-family:'Plex Cond',sans-serif;font-weight:700;font-size:23px;white-space:nowrap;color:var(--ink)}

.incl{display:grid;gap:clamp(28px,4vw,52px);margin-top:clamp(30px,4vw,46px)}
@media(min-width:840px){.incl{grid-template-columns:1fr 1fr}}
.incl h3{font-size:20px;margin-bottom:18px}

/* ---------- LISTS ---------- */
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:15px;color:var(--ink-2)}
.ticks li{display:flex;gap:11px;line-height:1.5}
.ticks li svg{flex:none;margin-top:3px}
/* fallback marker for lists that JS does not decorate */
.ticks:not([data-checks]):not([data-crosses]) li::before{
  content:"";width:7px;height:7px;flex:none;margin-top:8px;border-radius:50%;border:1.5px solid var(--blue)}
.ticks.q:not([data-checks]):not([data-crosses]) li::before{border-color:var(--red)}

.grid-2{display:grid;gap:clamp(28px,4vw,52px)}
@media(min-width:840px){.grid-2{grid-template-columns:1fr 1fr}}

/* ---------- CTA ---------- */
.cta{background:
    radial-gradient(700px 340px at 20% 0%, rgba(223,52,70,.20), transparent 60%),
    radial-gradient(700px 340px at 85% 100%, rgba(61,125,255,.16), transparent 62%),
    var(--deep);
  color:var(--on-d);border-radius:8px;padding:clamp(32px,5vw,68px);border:1px solid var(--line-d)}
.cta h2{color:var(--on-d);max-width:16ch}
.cta p{margin-top:18px;color:var(--on-d2);font-size:clamp(16px,1.8vw,19px);max-width:560px;line-height:1.6}
.cta .hero-btns{margin-top:32px}
.cta-meta{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-d);
  font-family:'Plex Mono',monospace;font-size:11.5px;color:var(--on-d3);letter-spacing:.06em}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}