/* ===== MOCKUP-STYLE HOMEPAGE ===== */
:root{
  --home-bg:#06101d;
  --home-bg2:#081423;
  --home-card:#0d1a2b;
  --home-card2:#101e31;
  --home-line:#1d3552;
  --home-text:#f2f6ff;
  --home-muted:#91a0b7;
  --home-blue:#4d8dff;
  --home-blue2:#6b63ff;
  --home-green:#28d17c;
}

body{
  background:
    radial-gradient(circle at 70% 0%,rgba(52,87,180,.11),transparent 34%),
    linear-gradient(180deg,#050c15 0%,#07111e 48%,#081422 100%) !important;
}

.home-shell{
  width:min(1480px,calc(100% - 56px));
  margin:26px auto 60px;
}

.home-hero{
  position:relative;
  min-height:320px;
  overflow:hidden;
  border:1px solid rgba(86,137,230,.34);
  border-radius:22px;
  background:
    linear-gradient(90deg,rgba(7,17,31,.98) 0%,rgba(9,25,45,.95) 42%,rgba(17,32,74,.58) 66%,rgba(14,31,68,.48) 100%),
    radial-gradient(circle at 82% 44%,rgba(73,113,255,.22),transparent 36%),
    linear-gradient(135deg,#0b1a2f,#152a52 72%,#1f2f66);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.2) 100%),
    repeating-linear-gradient(120deg,transparent 0 70px,rgba(96,139,255,.025) 70px 72px);
  pointer-events:none;
}

.home-hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  min-height:320px;
}

.home-hero-copy{
  padding:42px 54px;
  align-self:center;
}

.home-eyebrow{
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:900;
  color:#8ab6ff;
  margin-bottom:18px;
}

.home-title{
  margin:0;
  font-size:58px;
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--home-text);
  font-weight:900;
}

.home-title .accent{
  background:linear-gradient(90deg,#86b2ff,#7a6dff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.home-subtitle{
  max-width:620px;
  margin:20px 0 0;
  color:#9aabc3;
  font-size:18px;
  line-height:1.55;
}

.home-actions{
  display:flex;
  gap:14px;
  margin-top:28px;
  flex-wrap:wrap;
}

.home-primary,
.home-secondary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:0 22px;
  border-radius:14px;
  text-decoration:none;
  font-weight:850;
  border:1px solid transparent;
}

.home-primary{
  color:#fff;
  background:linear-gradient(135deg,#4d8dff,#416ff5);
  box-shadow:0 10px 28px rgba(63,119,255,.26);
}

.home-secondary{
  color:#eef4ff;
  background:rgba(17,31,51,.78);
  border-color:#31486c;
}

.home-hero-visual{
  position:relative;
  min-height:320px;
  background:
    radial-gradient(circle at 68% 55%,rgba(82,107,255,.2),transparent 28%),
    linear-gradient(135deg,rgba(48,69,128,.05),rgba(25,47,107,.35));
}

.home-hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(42,67,143,.10),rgba(4,10,18,.32)),
    radial-gradient(circle at 78% 62%,rgba(48,90,255,.24),transparent 24%),
    linear-gradient(160deg,transparent 40%,rgba(82,105,255,.08) 41%,transparent 42%);
}

.home-hero-visual::after{
  content:"More Than a Game";
  position:absolute;
  right:42px;
  top:48px;
  width:210px;
  text-align:center;
  color:#77a8ff;
  font-size:34px;
  font-style:italic;
  line-height:1.08;
  opacity:.78;
  transform:rotate(-5deg);
  text-shadow:0 0 24px rgba(79,130,255,.3);
}

.hero-car{
  position:absolute;
  right:120px;
  bottom:36px;
  width:280px;
  height:92px;
  border-radius:28px 28px 20px 20px;
  background:
    radial-gradient(circle at 27% 56%,#ff5c5c 0 7px,transparent 8px),
    radial-gradient(circle at 72% 56%,#ff5c5c 0 7px,transparent 8px),
    linear-gradient(180deg,#101722 0%,#070b11 100%);
  box-shadow:0 22px 38px rgba(0,0,0,.48),0 0 35px rgba(62,96,255,.16);
}

.hero-car::before,
.hero-car::after{
  content:"";
  position:absolute;
  bottom:-10px;
  width:48px;
  height:24px;
  border-radius:50%;
  background:#05070a;
  box-shadow:inset 0 0 0 7px #141b28;
}
.hero-car::before{left:24px}
.hero-car::after{right:24px}

.hero-road{
  position:absolute;
  left:10%;
  right:6%;
  bottom:24px;
  height:2px;
  background:linear-gradient(90deg,transparent,#27427c 35%,#6483ff 60%,transparent);
  opacity:.8;
}

.hero-community{
  position:absolute;
  right:40px;
  bottom:24px;
  font-size:10px;
  letter-spacing:.26em;
  color:#9bbcff;
  text-transform:uppercase;
  font-weight:800;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}

.stat-card{
  min-height:102px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid rgba(70,105,151,.36);
  background:linear-gradient(180deg,rgba(15,29,47,.97),rgba(10,22,37,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}

.stat-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,#17335f,#11307a);
  font-size:25px;
  box-shadow:inset 0 0 18px rgba(79,139,255,.14);
}

.stat-main{
  flex:1;
  min-width:0;
}

.stat-main strong{
  display:block;
  font-size:28px;
  color:#fff;
  line-height:1;
  margin-bottom:7px;
}

.stat-main span{
  color:var(--home-muted);
  font-size:14px;
}

.stat-delta{
  align-self:flex-start;
  margin-left:auto;
  color:#4cda86;
  font-weight:800;
  font-size:14px;
}

.forum-section{
  margin-top:32px;
}

.forum-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.forum-title-wrap{
  display:flex;
  align-items:center;
  gap:14px;
}

.forum-section-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#183e83,#295dff);
  box-shadow:0 8px 24px rgba(46,95,255,.2);
  font-size:20px;
}

.forum-section h2{
  margin:0;
  color:#fff;
  font-size:26px;
}

.forum-section p{
  margin:4px 0 0;
  color:#93a1b5;
  font-size:14px;
}

.forum-search{
  position:relative;
  width:310px;
}

.forum-search input{
  width:100%;
  height:48px;
  padding:0 44px 0 44px;
  border-radius:13px;
  border:1px solid #263e5e;
  background:#0b1728;
  color:#e8effa;
  outline:none;
}

.forum-search::before{
  content:"⌕";
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:#9badc5;
  font-size:21px;
}

.forum-list{
  display:grid;
  gap:10px;
}

.forum-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 100px 120px 220px 54px;
  align-items:center;
  min-height:80px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(63,95,138,.38);
  background:linear-gradient(180deg,rgba(13,27,44,.97),rgba(9,20,34,.97));
  transition:.18s ease;
}

.forum-row:hover{
  transform:translateY(-1px);
  border-color:rgba(78,133,224,.55);
  background:linear-gradient(180deg,rgba(17,34,54,.98),rgba(11,24,40,.98));
}

.forum-main{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.forum-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#174796,#2d66ff);
  color:#fff;
  font-size:24px;
}

.forum-copy{
  min-width:0;
}

.forum-copy strong{
  display:block;
  color:#fff;
  font-size:17px;
  margin-bottom:4px;
}

.forum-copy span{
  display:block;
  color:#91a0b5;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.forum-metric{
  text-align:center;
}

.forum-metric strong{
  display:block;
  color:#f3f7ff;
  font-size:18px;
  line-height:1.1;
}

.forum-metric span{
  color:#8596ae;
  font-size:11px;
}

.forum-last{
  padding-left:22px;
  border-left:1px solid rgba(76,105,145,.24);
  color:#8290a5;
  font-size:12px;
}

.forum-go{
  justify-self:end;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid #293d5e;
  background:#102139;
  color:#dfeaff;
  text-decoration:none;
  font-size:24px;
}

@media(max-width:1100px){
  .home-hero-inner{grid-template-columns:1fr}
  .home-hero-visual{min-height:220px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .forum-row{grid-template-columns:minmax(0,1fr) 80px 90px 54px}
  .forum-last{display:none}
}

@media(max-width:700px){
  .home-shell{width:min(100% - 24px,1480px);margin-top:14px}
  .home-hero-copy{padding:28px 24px}
  .home-title{font-size:42px}
  .home-subtitle{font-size:16px}
  .stats-grid{grid-template-columns:1fr}
  .forum-section-head{align-items:stretch;flex-direction:column}
  .forum-search{width:100%}
  .forum-row{grid-template-columns:minmax(0,1fr) 54px}
  .forum-metric{display:none}
  .forum-main{gap:12px}
  .forum-icon{width:46px;height:46px;flex-basis:46px}
}


/* ===== Forum cover images ===== */
.forum-row{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.forum-row > *{
  position:relative;
  z-index:2;
}

.forum-row::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,20,34,.03),rgba(8,20,34,.02));
}

.forum-row.has-cover{
  min-height:104px;
  border-color:color-mix(in srgb,var(--forum-accent,#4f8cff) 34%,#263d5d);
  background:
    linear-gradient(90deg,rgba(9,22,38,.98) 0%,rgba(10,24,42,.96) 54%,rgba(10,23,40,.82) 100%);
}

.forum-cover-bg{
  position:absolute!important;
  z-index:0!important;
  top:0;
  right:0;
  bottom:0;
  width:48%;
  background-size:cover;
  background-position:center;
  opacity:.48;
  filter:saturate(.9) contrast(1.03);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 52%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 52%);
}

.forum-row.has-cover::after{
  background:
    linear-gradient(90deg,rgba(8,20,34,.96) 0%,rgba(8,20,34,.88) 50%,rgba(7,18,31,.30) 100%),
    linear-gradient(180deg,transparent,rgba(0,0,0,.15));
}

.forum-row.has-cover:hover .forum-cover-bg{
  opacity:.58;
  transform:scale(1.02);
  transition:opacity .2s ease,transform .25s ease;
}

.forum-row.has-cover .forum-icon{
  background:linear-gradient(145deg,var(--forum-accent,#4f8cff),color-mix(in srgb,var(--forum-accent,#4f8cff) 62%,#142a58));
  box-shadow:0 8px 24px color-mix(in srgb,var(--forum-accent,#4f8cff) 24%,transparent);
}

.forum-last span{
  color:#dbe6f7;
  font-weight:650;
}

.forum-last small{
  color:#7f91aa;
}

@media(max-width:700px){
  .forum-row.has-cover{min-height:94px}
  .forum-cover-bg{width:60%;opacity:.32}
}