:root{
  --bg:#090b0e; --panel:#101419; --panel2:#151a20; --line:#2a2f37;
  --gold:#f3bd3b; --gold2:#ffe08a; --txt:#f7f8fa; --muted:#aeb6c2;
  --red:#ff2a2a; --pink:#ff3a9d; --green:#41ff41; --cyan:#37d7ff;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:
radial-gradient(circle at 50% -10%,rgba(243,189,59,.12),transparent 26rem),
linear-gradient(#090b0e,#080a0c 70%);
color:var(--txt);font-family:Inter,Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,calc(100% - 32px));margin:auto}
.top{position:sticky;top:0;z-index:10;background:rgba(8,10,12,.92);backdrop-filter:blur(16px);
border-bottom:1px solid #242830}
.nav{height:68px;display:flex;align-items:center;gap:28px}
.brand{font-weight:1000;letter-spacing:.08em}.brand span{color:var(--gold)}
.links{display:flex;gap:20px;margin-left:auto;font-size:14px;color:#d8dde5}
.links a:hover{color:var(--gold)}
.btn{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#111;padding:12px 18px;border-radius:8px;
font-weight:900;box-shadow:0 0 28px rgba(243,189,59,.18)}
.hero{padding:66px 0 34px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:
linear-gradient(120deg,transparent 15%,rgba(255,255,255,.025) 15.5%,transparent 16%);
pointer-events:none}
.kicker{font-size:13px;letter-spacing:.28em;color:var(--gold);font-weight:800}
.hero h1{font-size:clamp(46px,8vw,92px);line-height:.88;margin:15px 0 18px;font-weight:1000;letter-spacing:-.045em}
.hero h1 span{display:block;color:var(--gold)}
.hero p{max-width:680px;color:#bfc6d0;font-size:18px;line-height:1.55}
.meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
.meta b{border:1px solid #343a43;background:#101419;padding:10px 14px;border-radius:999px;font-size:13px}
.meta b strong{color:var(--gold)}
.section{padding:28px 0}
.teams-section{position:relative}
.teams-section:before{
 content:"";position:absolute;inset:-30px 0 -50px;pointer-events:none;opacity:.7;
 background:
   radial-gradient(circle at 8% 30%,rgba(255,42,42,.08),transparent 20%),
   radial-gradient(circle at 36% 30%,rgba(255,58,157,.08),transparent 20%),
   radial-gradient(circle at 64% 30%,rgba(65,255,65,.07),transparent 20%),
   radial-gradient(circle at 92% 30%,rgba(55,215,255,.08),transparent 20%);
}
.title-row{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:16px}
.title{font-size:24px;font-weight:950;letter-spacing:.01em}.sub{font-size:13px;color:var(--muted)}

.team-grid{display:grid;grid-template-columns:1fr;gap:18px}
.team{
  --accent:#fff;
  min-height:310px;
  border:1px solid color-mix(in srgb,var(--accent) 52%,#252a31);
  border-radius:20px;
  overflow:hidden;
  position:relative;
  padding:0;
  isolation:isolate;
  background:#0b0e12;
  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 32px color-mix(in srgb,var(--accent) 8%,transparent);
}

/* Deep team-colored arena */
.team:before{
  content:"";
  position:absolute;inset:0;z-index:-5;
  background:
    radial-gradient(circle at 18% 45%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 31%),
    radial-gradient(circle at 80% 50%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 38%),
    linear-gradient(105deg,color-mix(in srgb,var(--accent) 12%,#080a0d) 0%,#090b0e 48%,#0b0d10 100%);
}

/* Angular shards / arena lighting */
.team:after{
  content:"";
  position:absolute;inset:-20%;z-index:-3;opacity:.68;
  background:
    linear-gradient(112deg,transparent 0 12%,color-mix(in srgb,var(--accent) 32%,transparent) 12.2% 12.8%,transparent 13% 25%,color-mix(in srgb,var(--accent) 12%,transparent) 25.3% 26%,transparent 26.2% 48%,color-mix(in srgb,var(--accent) 24%,transparent) 48.3% 49%,transparent 49.2%),
    repeating-linear-gradient(0deg,transparent 0 30px,rgba(255,255,255,.025) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 48px,rgba(255,255,255,.018) 49px 50px);
  transform:skewY(-3deg) scale(1.1);
}

.team .fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.team .fx:before{
  content:"";position:absolute;left:-5%;top:18%;width:78%;height:42%;
  background:linear-gradient(90deg,var(--accent),transparent);
  opacity:.14;filter:blur(18px);transform:skewX(-20deg) rotate(-4deg)
}
.team .fx:after{
  content:"";position:absolute;right:4%;top:12%;width:230px;height:230px;
  border:16px solid color-mix(in srgb,var(--accent) 18%,transparent);
  transform:rotate(32deg);
  box-shadow:0 0 50px color-mix(in srgb,var(--accent) 12%,transparent)
}

/* Background echo of each team logo – generated at runtime from the real logo. */
.team-bg{
  position:absolute;inset:-12% -2% -12% 38%;z-index:-2;overflow:hidden;
  opacity:.20;filter:saturate(1.4) contrast(1.08);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 28%,#000 70%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 28%,#000 70%);
}
.team-bg img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.18) rotate(-2deg);
  mix-blend-mode:screen;filter:blur(.25px) contrast(1.2)
}

.team-inner{
  position:relative;z-index:2;min-height:310px;
  display:grid;grid-template-columns:minmax(320px,1.15fr) minmax(280px,.85fr);
  align-items:center;gap:34px;padding:24px 34px;
}

/* Main crest */
.logo{
  height:255px;margin:0;display:flex;align-items:center;justify-content:flex-start;
  position:relative;
}
.logo:before{
  content:"";position:absolute;width:310px;height:210px;left:2%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 67%);
  filter:blur(16px)
}
.logo img{
  max-width:520px;width:min(100%,520px);max-height:255px;object-fit:contain;position:relative;
  filter:
    drop-shadow(0 18px 30px rgba(0,0,0,.78))
    drop-shadow(0 0 20px color-mix(in srgb,var(--accent) 26%,transparent));
  transition:transform .25s ease,filter .25s ease
}
.team:hover .logo img{
  transform:scale(1.025);
  filter:
    drop-shadow(0 20px 34px rgba(0,0,0,.82))
    drop-shadow(0 0 28px color-mix(in srgb,var(--accent) 40%,transparent))
}

.team-copy{position:relative;padding:20px 0}
.team-copy:before{
  content:"";position:absolute;left:0;top:0;width:54px;height:4px;border-radius:99px;background:var(--accent);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 75%,transparent)
}
.team h3{
  margin:12px 0 8px;font-size:clamp(34px,5vw,58px);font-weight:1000;
  font-style:italic;letter-spacing:-.035em;text-shadow:0 3px 22px rgba(0,0,0,.8)
}
.team p{margin:0;color:#e0e4e9;font-size:17px;letter-spacing:.035em}
.team-tag{
  margin-top:22px;display:inline-flex;gap:10px;align-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 58%,#555);
  padding:11px 15px;border-radius:8px;font-size:12px;font-weight:900;
  letter-spacing:.11em;text-transform:uppercase;background:rgba(3,5,7,.46);
  box-shadow:inset 0 0 22px rgba(0,0,0,.25)
}
.team-tag i{display:block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}

.t0{--accent:var(--red)}
.t1{--accent:var(--pink)}
.t2{--accent:var(--green)}
.t3{--accent:var(--cyan)}

@media(max-width:760px){
  .team{min-height:0}
  .team-inner{min-height:0;grid-template-columns:1fr;gap:4px;padding:22px 24px 26px}
  .logo{height:240px;justify-content:center}
  .logo img{max-width:100%;max-height:235px}
  .team-bg{inset:5% -28% 0 28%;opacity:.14}
  .team-copy{padding-top:16px}
  .team h3{font-size:42px}
  .team p{font-size:16px}
  .team-tag{margin-top:17px}
}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.card{background:linear-gradient(180deg,#12161b,#0d1014);border:1px solid #292f37;border-radius:16px;padding:20px}
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:18px}
.side{text-align:center}.side .badge{width:88px;height:88px;border-radius:20px;margin:auto;display:grid;place-items:center;font-size:38px;font-weight:1000;border:1px solid #343a42}
.vs{font-size:28px;color:var(--gold);font-weight:1000}
.small{font-size:12px;color:#9fa8b5;margin-top:6px}
table{width:100%;border-collapse:collapse}th,td{padding:13px 10px;border-bottom:1px solid #242a31;text-align:left}
th{font-size:11px;letter-spacing:.12em;color:#8f99a6}td{font-size:14px}.rank{font-weight:1000;color:var(--gold)}
.form{letter-spacing:.18em}.w{color:#55d66e}.l{color:#f15757}
.result{display:grid;grid-template-columns:62px 1fr auto 1fr;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #242a31}
.score{font-weight:1000;background:#1c2229;border-radius:8px;padding:8px 12px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.news{background:#101419;border:1px solid #292f37;border-radius:14px;overflow:hidden}
.thumb{height:120px;background:
linear-gradient(135deg,rgba(243,189,59,.35),transparent 48%),
repeating-linear-gradient(135deg,#171b21 0 12px,#12161a 12px 24px)}
.news .body{padding:16px}.news h4{margin:0 0 8px;font-size:16px}.news p{margin:0;color:#9fa8b5;font-size:13px;line-height:1.45}
.mvp{display:grid;grid-template-columns:1fr 160px;gap:18px;align-items:center}
.mvp .avatar{height:180px;border-radius:14px;background:
radial-gradient(circle at 50% 35%,rgba(255,42,42,.45),transparent 35%),
linear-gradient(135deg,#16090b,#12161b);display:grid;place-items:center;font-size:76px;font-weight:1000;color:var(--red)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.stat{background:#0b0e12;border:1px solid #2a3038;border-radius:10px;padding:12px;text-align:center}.stat b{display:block;font-size:22px}.stat span{font-size:10px;color:#8f99a6}
footer{margin-top:40px;border-top:1px solid #242a31;padding:30px 0 50px;color:#8f99a6;font-size:12px}
@media(max-width:900px){
 .links{display:none}.team-grid{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.news-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
 .team-grid{grid-template-columns:1fr}.wrap{width:min(100% - 20px,1180px)}.nav{height:58px}.btn{display:none}
 .hero{padding-top:42px}.mvp{grid-template-columns:1fr}.result{grid-template-columns:48px 1fr auto 1fr;font-size:12px}
}