@charset "utf-8";
/* CSS Document */
:root{
  --bg: #0f0f11;        /* near-black */
  --ink: #141416;       /* dark section */
  --card: #1b1b1f;      /* card bg */
  --muted: #cfcfd2;
  --text: #ffffff;
  --accent: #ffffff;    /* white accents */
  --red: #e02828;       /* brand red */
  --red-700: #b31515;
  --outline: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }
html,body { height:100%; }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

img{ max-width:100%; display:block; }

#logosm{display: inline;width: 150px; }
#logolg{display: none;width: 600px; }
.logo{max-width:100%;}
.logo:hover{transition:all .5s ease;-webkit-filter:opacity(70%);filter:opacity(70%);}
.logodiv{text-align:left;float:left;}

.container{ width: min(1200px, 92vw); margin-inline:auto; }

h1,h2,h3,h4{ line-height:1.15; margin:0 0 .5rem 0; }
h1{ font-size: clamp(2rem, 3.5vw + 1rem, 3.5rem); font-weight: 900; }
h2{ font-size: clamp(1.5rem, 2.4vw + .6rem, 2.25rem); font-weight: 800; }
h3{ font-size: 1.25rem; font-weight: 700; }

.lead{ color: var(--muted); font-size: 1.125rem; }
.muted{ color: #b7b7ba; }
.center{ text-align:center; }
.tiny{ font-size:.8rem; color:#a7a7ab; }

.accent{ color: var(--red); }

.section{ padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-dark{ background: linear-gradient(180deg, var(--bg), var(--ink)); border-block: 1px solid var(--outline); }
.section-ink{ background: var(--ink); border-block: 1px solid var(--outline); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(15,15,17,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--outline);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; gap:1rem; }

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); }
.brand-cube{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:8px;
  background: var(--red);
  color:#fff; font-weight:900; text-transform:lowercase;
}
.brand-name{ font-weight:900; letter-spacing:.3px; }

.primary-nav{ display:flex; gap:1.25rem; align-items:center; }
.primary-nav a{ color:var(--text); text-decoration:none; opacity:.9; }
.primary-nav a:hover{ opacity:1; }
.btn.btn-accent{ background:#fff; color:#000; }
.nav-toggle{
  display:none; border:0; background:transparent; color:#fff;
}
.nav-toggle-bar{ width:28px; height:2px; background:#fff; display:block; position:relative; }
.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#fff;
}
.nav-toggle-bar::before{ top:-8px; } .nav-toggle-bar::after{ top:8px; }

@media (max-width: 900px){
  .nav-toggle{ display:block; }
  .primary-nav{
    position:absolute; inset-inline:0; top:50%;
    background: #111214;
    border-bottom:1px solid var(--outline);
    padding:1rem;
    display:grid; gap:.75rem;
    transform: translateY(-120%); transition: transform .25s ease;
  }
  .primary-nav.open{ transform: translateY(0); }
}

/* ---------- Buttons & Links ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  padding: .9rem 1.1rem; border-radius:14px;
  border:1px solid transparent; transition: all .2s ease;
}
.btn-accent{ background:var(--red); color:#fff; }
.btn-accent:hover{ background:var(--red-700); }
.btn-danger{ background: var(--red); color:#fff; }
.btn-danger:hover{ background: var(--red-700); }
.btn-outline{
  color:#fff; border-color:var(--outline); background:transparent;
}
.btn-outline:hover{ background: #1c1c21; }
.btn-sm{ padding:.6rem .85rem; font-size:.92rem; }

.link{ color:#fff; text-decoration:none; border-bottom:1px solid var(--outline); padding-bottom:2px; }
.link:hover{ border-color:#fff; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero-bg{
  position:absolute; inset: -30vh -20vw auto; height: 80vh;
  background:
    radial-gradient(60% 80% at 10% 10%, rgba(224,40,40,.35), transparent 55%),
    radial-gradient(40% 60% at 90% 30%, rgba(224,40,40,.2), transparent 60%);
  filter: blur(50px); z-index:-1;
}
.hero-grid{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:2rem; padding: 3.5rem 0;
}
.hero-copy .hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.25rem; }
.hero-media{ position:relative; }
.media-card{
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius:22px; min-height: 320px;
  display:grid; place-items:center; color:#aaa;
  box-shadow: 0 15px 50px rgba(0,0,0,.35);
}
.media-placeholder{ opacity:.8; font-size:.95rem; }
.countdown{
  position:absolute; left: -12px; bottom: -14px;
  background: rgba(224,40,40,.9); color:#fff;
  border-radius:14px; padding:.6rem .9rem; box-shadow: 0 10px 25px rgba(224,40,40,.25);
}
.countdown-label{ margin:0; font-size:.85rem; opacity:.95; }
.countdown-value{ margin:0; font-weight:900; font-size:1.4rem; letter-spacing:.5px; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .countdown{ position:relative; inset:auto; margin-top:.75rem; }
}

/* ---------- Cards & Grids ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.2rem; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.2rem; }
@media (max-width: 900px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

.card{
  background: var(--card);
  border:1px solid var(--outline);
  border-radius:20px; overflow:hidden;
}
.card-media img{ width:100%; height: auto; display:block; }
.card-body{ padding:1rem 1rem 1.1rem; }
.card-actions{ display:flex; gap:.6rem; margin-top:.7rem; }

.badge{
  display:inline-block; background: rgba(255,255,255,.08); border:1px solid var(--outline);
  border-radius:999px; padding:.25rem .6rem; font-size:.75rem; margin-bottom:.35rem;
}

/* Program card special hover */
.program-card { transition: transform .18s ease, box-shadow .18s ease; }
.program-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.35); }

/* Aspect helpers */
.aspect-16x9{ aspect-ratio: 16/9; background:#202027; }
.aspect-16x10{ aspect-ratio: 16/10; background:#202027; }

/* ---------- Challenge ---------- */
.challenge-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:1.5rem; align-items:center; }
@media (max-width: 900px){ .challenge-grid{ grid-template-columns:1fr; } }

.card-elev{ padding:.75rem; border-radius:22px; background: #16161a; border:1px solid var(--outline); }
.stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem; margin-top:.75rem;
}
.stats > div{ background:#1b1b1f; border:1px solid var(--outline); border-radius:14px; padding:.7rem; text-align:center; }
.stat-num{ display:block; font-weight:900; font-size:1.35rem; }
.stat-label{ font-size:.72rem; color:#bdbdc2; }

/* ---------- Partners ---------- */
.partners{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; align-items:center;
}
.partner{
  display:grid; place-items:center; background:#1a1a1e; border:1px solid var(--outline);
  border-radius:14px; padding:.9rem; height:84px; transition: transform .15s ease;
}
.partner:hover{ transform: translateY(-3px); }
.partner img{ max-height:52px; width:auto; }

/*#partnersdiv, #buildgamediv, #subscribediv, #gamesdiv {margin:0px auto;padding:40px 0px;text-align:center;}
.partner{width:100%;max-width:414px;transition:all .3s ease;height:auto;padding:10px;filter: grayscale(0.5);}
.partner:hover{transition:all .3s ease;-webkit-filter:opacity(70%);filter:opacity(70%);}
*/

/* ---------- Newsletter ---------- */
.newsletter{
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(224,40,40,.08));
  border:1px solid var(--outline); border-radius:18px; padding:1.2rem;
}
.newsletter-copy h3{ margin-bottom:.3rem; }
.newsletter-form{ display:grid; grid-template-columns: 1.2fr .8fr auto; gap:.6rem; margin-top:.8rem; }
.newsletter-form input{
  background:#0f0f11; border:1px solid var(--outline); color:#fff; padding:.8rem .9rem; border-radius:12px;
}
@media (max-width: 800px){
  .newsletter-form{ grid-template-columns:1fr; }
}

/* ---------- Footer ---------- */
.site-footer{ background:#0c0c0e; border-top:1px solid var(--outline); margin-top:2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:1.5rem; padding:2rem 0; }
.footer-bottom{ display:flex; justify-content:center; padding:1rem 0 2rem; border-top:1px solid var(--outline); }
.list{ padding-left:1rem; margin:.7rem 0; color:#d7d7db; }
.list-plain{ list-style:none; padding-left:0; margin:0; }
.list-plain a{ text-decoration:none; color:#fff; opacity:.9; }
.list-plain a:hover{ opacity:1; }

@media (max-width: 900px){
  .footer-grid{ grid-template-columns:1fr; }
}

	#logosm{display: none;}
	#logolg{display: inline;}

@media (max-width: 900px){
	#logosm{display: inline;}
	#logolg{display: none;}
}
