:root{
  --bg0:#070814;
  --bg1:#0b0c1c;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.88);
  --muted:rgba(255,255,255,.66);
  --faint:rgba(255,255,255,.45);
  /* Manchester United-ish palette (red/black/gold) */
  --glow: rgba(218, 41, 28, .72);      /* MU red */
  --glow2: rgba(255, 209, 102, .55);   /* gold */
  --glow3: rgba(255, 77, 213, .28);    /* subtle accent */
  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --radius: 22px;
  --radius2: 28px;
  --max: 1100px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 500px at 20% 10%, rgba(218, 41, 28, .18), transparent 60%),
              radial-gradient(900px 540px at 80% 20%, rgba(255, 209, 102, .10), transparent 58%),
              radial-gradient(900px 520px at 60% 90%, rgba(218, 41, 28, .10), transparent 56%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none }
button{ font:inherit }

.wrap{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.skip{
  position:absolute;
  left:-999px; top:10px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
}
.skip:focus{ left:12px; z-index:9999 }

/* Background FX */
.bg{ position:fixed; inset:-40px; z-index:-1; pointer-events:none; }
.bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("/assets/old-trafford.png") center / cover no-repeat;
  opacity: .24;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.03);
}
.blob{
  position:absolute;
  width:680px; height:680px;
  border-radius:999px;
  filter: blur(40px);
  opacity:.7;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  z-index: 1;
}
.b1{
  left:-120px; top:-120px;
  background: radial-gradient(circle at 30% 30%, rgba(218,41,28,.92), transparent 62%),
              radial-gradient(circle at 70% 70%, rgba(255,209,102,.52), transparent 60%);
  animation: float1 14s ease-in-out infinite;
}
.b2{
  right:-190px; top:-90px;
  background: radial-gradient(circle at 35% 30%, rgba(255,209,102,.55), transparent 62%),
              radial-gradient(circle at 70% 75%, rgba(218,41,28,.55), transparent 60%);
  animation: float2 16s ease-in-out infinite;
}
.b3{
  left:10%; bottom:-220px;
  width:760px; height:760px;
  background: radial-gradient(circle at 30% 30%, rgba(218,41,28,.55), transparent 62%),
              radial-gradient(circle at 70% 65%, rgba(255,209,102,.22), transparent 60%);
  animation: float3 18s ease-in-out infinite;
  opacity:.55;
}
.grain{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.07;
  z-index: 2;
}

@keyframes float1{
  0%,100%{ transform: translate(-10px,-6px) scale(1) }
  50%{ transform: translate(30px,24px) scale(1.03) }
}
@keyframes float2{
  0%,100%{ transform: translate(0,0) scale(1.02) }
  50%{ transform: translate(-40px,22px) scale(1) }
}
@keyframes float3{
  0%,100%{ transform: translate(0,0) scale(1) }
  50%{ transform: translate(28px,-24px) scale(1.02) }
}

/* Top bar */
.top{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(7,8,20,.78), rgba(7,8,20,.28));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.top__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  letter-spacing:.2px;
}
.brand__mark{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:14px;
  background: radial-gradient(circle at 30% 30%, var(--glow), rgba(255, 209, 102, .30));
  box-shadow: 0 12px 40px rgba(218, 41, 28, .20);
  border: 1px solid rgba(255,255,255,.14);
}
.brand__logo{
  width:22px;
  height:22px;
  display:block;
}
.brand__name{ font-weight:700; font-size:16px }
.brand__tag{ color:var(--faint); font-size:12px; font-weight:600 }
.brand--small .brand__mark{ width:30px; height:30px; border-radius:12px }
.brand--small .brand__logo{ width:20px; height:20px }

.nav{
  display:flex;
  gap:16px;
  align-items:center;
}
.nav a{
  color:var(--muted);
  font-weight:650;
  font-size:14px;
  padding:8px 10px;
  border-radius:12px;
}
.nav a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:7px 9px;
}

/* Hero */
.hero{
  padding:56px 0 18px;
  display:grid;
  grid-template-columns: 1.35fr .9fr;
  gap:22px;
  align-items:start;
}
.hero__card{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding:26px 26px 22px;
  position:relative;
  overflow:hidden;
}
.hero__card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(500px 200px at 20% 10%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(420px 240px at 80% 20%, rgba(0,224,255,.18), transparent 60%),
              radial-gradient(420px 240px at 70% 85%, rgba(255,77,213,.16), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.hero__card > *{ position:relative }

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  font-weight:650;
  font-size:13px;
  margin:0 0 14px;
}
.dot{
  width:9px; height:9px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,209,102,1), rgba(218,41,28,1));
  box-shadow: 0 0 0 4px rgba(218,41,28,.12);
}

.title{
  margin:0 0 10px;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing:-.8px;
}
.title__shine{
  background: linear-gradient(90deg, rgba(255,209,102,1), rgba(218,41,28,1), rgba(255,209,102,1));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter: drop-shadow(0 8px 24px rgba(218,41,28,.22));
}

.lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 62ch;
}

.cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 10px 0 18px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight:700;
  font-size: 14px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.24) }
.btn:active{ transform: translateY(0) scale(.99) }
.btn--primary{
  background: linear-gradient(90deg, rgba(255,209,102,.14), rgba(218,41,28,.22), rgba(255,209,102,.10));
  box-shadow: 0 18px 60px rgba(218,41,28,.14);
}
.btn--primary:hover{
  box-shadow: 0 22px 80px rgba(218,41,28,.20);
}
.btn--ghost{ color:var(--muted) }
.btn--ghost:hover{ color:var(--text); background: rgba(255,255,255,.06) }

.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top: 10px;
}
.stat{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px 14px 12px;
}
.stat__num{
  font-size: 20px;
  font-weight: 800;
  letter-spacing:-.2px;
}
.stat__label{
  margin-top: 4px;
  color: var(--faint);
  font-weight: 650;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing:.9px;
}

.hero__side{
  display:grid;
  gap:14px;
}
.mini{
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 60px rgba(0,0,0,.36);
  padding: 18px 18px 16px;
  position:relative;
  overflow:hidden;
}
.mini--glow::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(420px 240px at 20% 20%, rgba(0,224,255,.18), transparent 60%),
              radial-gradient(420px 240px at 80% 65%, rgba(255,77,213,.14), transparent 62%);
  opacity:1;
  pointer-events:none;
}
.mini > *{ position:relative }
.mini__title{
  margin:0 0 10px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing:.6px;
  text-transform: uppercase;
}

.check{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.check li{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--text);
  font-weight:650;
}
.tick{
  width:18px; height:18px;
  border-radius: 7px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(0,224,255,.20));
  position:relative;
}
.tick::after{
  content:"";
  position:absolute;
  left:5px; top:4px;
  width:6px; height:9px;
  border-right:2px solid rgba(255,255,255,.88);
  border-bottom:2px solid rgba(255,255,255,.88);
  transform: rotate(35deg);
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.6;
  font-size: 13px;
}
.ok{ color: rgba(0,224,255,.9); font-weight:800 }
.warn{ color: rgba(255, 216, 102, .95); font-weight:800 }
.bar{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,209,102,.50), rgba(218,41,28,.70), rgba(255,209,102,.45));
  box-shadow: 0 14px 40px rgba(218,41,28,.18);
}

/* Sections */
.section{ padding: 26px 0 8px }
.section__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin: 10px 0 14px;
}
.section__title{
  margin:0;
  font-size: 18px;
  letter-spacing:-.2px;
}
.section__desc{
  margin:0;
  color: var(--muted);
  font-size: 14px;
}

/* Bento */
.bento{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap:14px;
}
.card{
  grid-column: span 4;
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 60px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(480px 220px at 10% 20%, rgba(124,92,255,.14), transparent 60%),
              radial-gradient(420px 200px at 85% 30%, rgba(0,224,255,.11), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.card > *{ position:relative }
.card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.055);
  box-shadow: 0 24px 90px rgba(0,0,0,.48);
}
.card__title{
  margin:0 0 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing:-.2px;
}
.card__desc{
  margin:0 0 12px;
  color: var(--muted);
  line-height:1.6;
  font-size: 14px;
}
.card--wide{ grid-column: span 8 }
.card--tall{ grid-column: span 4; grid-row: span 2 }

.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--faint);
  font-weight: 750;
  font-size: 12px;
}
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.meter{ margin-top: 8px }
.meter__row{
  display:flex;
  justify-content:space-between;
  color: var(--faint);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 8px;
}
.meter__bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.meter__bar i{
  display:block;
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,209,102,.46), rgba(218,41,28,.66), rgba(255,209,102,.42));
}

.spark{
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, rgba(124,92,255,.10), rgba(0,224,255,.10), rgba(255,77,213,.10));
  position:relative;
  overflow:hidden;
}
.spark::after{
  content:"";
  position:absolute;
  left:-60px; top:-30px;
  width:80px; height:120px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(25deg);
  animation: sweep 2.9s ease-in-out infinite;
}
@keyframes sweep{
  0%, 55% { transform: translateX(0) rotate(25deg); opacity:0 }
  70% { opacity:.65 }
  100% { transform: translateX(360px) rotate(25deg); opacity:0 }
}

.steps{
  margin: 0 0 10px;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
}
.tiny{ margin:0; color: var(--faint); font-size: 12px; line-height:1.5 }

.device{
  margin-top: 10px;
  height: 90px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 10px;
}
.device__screen{
  height:100%;
  border-radius: 16px;
  background: radial-gradient(120px 80px at 30% 30%, rgba(0,224,255,.18), transparent 60%),
              radial-gradient(120px 80px at 70% 70%, rgba(255,77,213,.14), transparent 60%),
              rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: rgba(255, 209, 102, .92);
  font-weight: 800;
  font-size: 13px;
}
.link:hover{ text-decoration: underline }

/* Player */
.player{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.player::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 260px at 15% 20%, rgba(0,224,255,.14), transparent 62%),
              radial-gradient(520px 260px at 85% 60%, rgba(124,92,255,.16), transparent 64%);
  pointer-events:none;
}
.player > *{ position:relative }
.player__art{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(100px 90px at 30% 35%, rgba(255,77,213,.22), transparent 60%),
              radial-gradient(120px 100px at 70% 70%, rgba(0,224,255,.20), transparent 60%),
              rgba(255,255,255,.04);
  height: 160px;
  position:relative;
  overflow:hidden;
}
.player__art::after{
  content:"";
  position:absolute; inset:-40px;
  background: conic-gradient(from 180deg, rgba(0,224,255,.0), rgba(0,224,255,.22), rgba(124,92,255,.0), rgba(255,77,213,.22), rgba(0,224,255,.0));
  filter: blur(16px);
  animation: spin 10s linear infinite;
  opacity:.8;
}
@keyframes spin{
  to{ transform: rotate(360deg) }
}

.player__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.player__title{
  font-weight: 900;
  letter-spacing:-.2px;
  font-size: 18px;
}
.player__sub{
  margin-top: 4px;
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
}
.player__badge{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1.2px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(218, 41, 28, .16);
  border: 1px solid rgba(255, 209, 102, .22);
  color: rgba(255, 209, 102, .92);
}

.timeline{
  margin-top: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.timeline__fill{
  display:block;
  height:100%;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,209,102,.46), rgba(218,41,28,.66), rgba(255,209,102,.42));
  animation: progress 7.2s ease-in-out infinite;
}

/* Crest block */
.crest{
  display:flex;
  align-items:center;
  gap:12px;
}
.crest__img{
  width:52px;
  height:52px;
  flex: 0 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 8px;
}
.crest__title{
  font-weight: 900;
  letter-spacing: -.2px;
}
.crest__sub{
  margin-top: 2px;
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
}
@keyframes progress{
  0%{ width: 14% }
  50%{ width: 86% }
  100%{ width: 14% }
}

.player__controls{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.icon{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--text);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.icon:hover{ transform: translateY(-2px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.24) }
.icon--big{ width: 48px; height: 48px; border-radius: 18px }
.hint{
  margin-left:auto;
  color: var(--faint);
  font-size: 12px;
  font-weight: 650;
}

/* Form / Wall */
.form{
  margin-top: 12px;
  display:grid;
  gap: 12px;
}
.form__row{ display:grid; gap: 8px }
.form__label{
  color: var(--faint);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.form__input{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 12px 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.form__input::placeholder{ color: rgba(255,255,255,.42) }
.form__input:focus{
  border-color: rgba(255, 209, 102, .30);
  box-shadow: 0 0 0 4px rgba(218, 41, 28, .10);
}
.form__input--area{
  min-height: 110px;
  resize: vertical;
  line-height: 1.55;
}

.wall{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
.wall__item{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px 12px 11px;
}
.wall__head{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:baseline;
  margin-bottom: 6px;
}
.wall__name{ font-weight: 900 }
.wall__time{
  color: var(--faint);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.wall__msg{ color: var(--muted); line-height: 1.55 }

/* Footer */
.footer{
  padding: 26px 0 44px;
  margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(7,8,20,.0), rgba(7,8,20,.6));
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.footer__left{ max-width: 60ch }
.footer__right{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Responsiveness */
@media (max-width: 940px){
  .hero{ grid-template-columns: 1fr; padding-top: 36px }
  .player{ grid-template-columns: 1fr }
  .player__art{ height: 170px }
  .section__head{ flex-direction:column; align-items:flex-start }
}
@media (max-width: 860px){
  .bento{ grid-template-columns: repeat(6, minmax(0,1fr)) }
  .card{ grid-column: span 6 }
  .card--wide{ grid-column: span 6 }
  .card--tall{ grid-column: span 6; grid-row: span 1 }
}
@media (max-width: 540px){
  .wrap{ width:min(var(--max), calc(100% - 28px)) }
  .nav{ display:none }
  .stats{ grid-template-columns: 1fr; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important }
  .blob, .spark::after, .player__art::after, .timeline__fill{ animation: none !important }
  .btn, .card, .icon{ transition: none !important }
}