* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --neon-blue: #00c2ff;
  --premium-gold: #f5b700;
  --dark-navy: #081120;
  --carbon-black: #050505;
  --soft-white: #eaeaea;
  --muted: rgba(234, 234, 234, 0.68);
  --line: rgba(255, 255, 255, 0.12);
  --glass: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(9, 20, 39, 0.78);
  --shadow-blue: 0 0 40px rgba(0, 194, 255, 0.2);
  --shadow-gold: 0 0 38px rgba(245, 183, 0, 0.28);
}

html {
  scroll-behavior: smooth;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--carbon-black);
  color: var(--soft-white);
  font-family: Inter, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  text-rendering: geometricPrecision;
  touch-action: pan-y;
}

button,
a,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

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

.premium-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
  background:
    radial-gradient(circle at 23% 9%, rgba(0, 194, 255, 0.28), transparent 22%),
    radial-gradient(circle at 78% 14%, rgba(245, 183, 0, 0.2), transparent 19%),
    linear-gradient(135deg, #00c2ff 0%, #081120 34%, #050505 58%, #0b101b 78%, #f5b700 140%);
}

.premium-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(0, 194, 255, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(245, 183, 0, 0.75) 0 1px, transparent 2px);
  background-size: 140px 120px, 190px 150px;
  opacity: 0.22;
  animation: particleDrift 18s linear infinite;
}

@keyframes particleDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 140px 120px, -190px 150px; }
}

.site-header,
.hero,
.match-strip,
.new-showcase,
.content-grid,
.site-footer {
  position: relative;
  z-index: 1;
}

.site-header {
  position: fixed;
  top: 4px;
  left: 50%;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  width: min(100% - 8px, 1720px);
  min-height: 78px;
  padding: 0 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(5, 5, 5, 0.76);
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(20px);
  transform: translateX(-50%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 46px;
  border-right: 4px solid var(--premium-gold);
  color: #fff;
  font-family: Anton, Impact, sans-serif;
  font-size: 38px;
  letter-spacing: -1px;
}

.brand strong,
.brand small {
  display: block;
  font-family: Oswald, Inter, sans-serif;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1.05;
}

.brand strong {
  font-size: 19px;
}

.brand small {
  color: var(--premium-gold);
  font-size: 23px;
}

.site-header nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 32px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.site-header nav a {
  position: relative;
  padding: 28px 0;
}

.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  height: 2px;
  background: transparent;
}

.site-header nav a.active,
.site-header nav a:hover {
  color: var(--premium-gold);
}

.site-header nav a.active::after,
.site-header nav a:hover::after {
  background: var(--premium-gold);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-button,
.register-button,
.globe-button {
  min-height: 42px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.login-button {
  padding: 0 28px;
  border: 1px solid rgba(234, 234, 234, 0.4);
  background: transparent;
  color: #fff;
}

.register-button {
  padding: 0 28px;
  border: 0;
  background: linear-gradient(180deg, #ffe073, var(--premium-gold));
  color: #080808;
}

.globe-button {
  display: grid;
  place-items: center;
  width: 42px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 26px;
}

.hero {
  min-height: 720px;
  padding: 132px min(6vw, 108px) 40px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.main-video-card {
  position: relative;
  z-index: 12;
  width: min(100%, 1280px);
  min-height: min(72vh, 760px);
  margin: 0 auto;
  padding: 14px;
  border: 1px solid rgba(0, 194, 255, 0.48);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 40%, rgba(245, 183, 0, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(0, 20, 60, 0.92), rgba(0, 0, 0, 0.95));
  box-shadow:
    0 0 22px rgba(0, 194, 255, 0.44),
    0 0 70px rgba(245, 183, 0, 0.24);
}

.main-video-card .wc-video {
  width: 100%;
  height: min(72vh, 730px);
  min-height: 520px;
  border-radius: 16px;
  object-fit: cover;
}

.hero-sound-toggle {
  right: 28px;
  bottom: 28px;
}

.hero-main-poster {
  position: absolute;
  z-index: 2;
  top: 96px;
  right: min(4vw, 72px);
  width: min(42vw, 610px);
  height: calc(100% - 130px);
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(245, 183, 0, 0.32);
  border-radius: 22px;
  background: rgba(5, 5, 5, 0.68);
  box-shadow:
    0 0 54px rgba(245, 183, 0, 0.26),
    0 0 70px rgba(0, 194, 255, 0.14);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 82px 0 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.08), rgba(5, 5, 5, 0.22) 46%, rgba(5, 5, 5, 0.08)),
    radial-gradient(circle at 70% 50%, transparent 0 24%, rgba(5, 5, 5, 0.28) 44%, transparent 64%);
}

.stadium-bg {
  position: absolute;
  inset: 82px 0 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 76%, rgba(0, 194, 255, 0.44), transparent 28%),
    radial-gradient(ellipse at 50% 92%, rgba(36, 196, 81, 0.55), transparent 18%),
    repeating-radial-gradient(ellipse at 50% 75%, rgba(0, 194, 255, 0.14) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, rgba(6, 22, 50, 0.08), rgba(5, 5, 5, 0.68)),
    linear-gradient(120deg, #061224, #092b58 45%, #050505);
}

.stadium-bg::before,
.stadium-bg::after {
  content: "";
  position: absolute;
  top: 110px;
  width: 54vw;
  height: 430px;
  border: 2px solid rgba(0, 194, 255, 0.42);
  opacity: 0.72;
}

.stadium-bg::before {
  left: -15vw;
  border-radius: 0 70% 54% 0;
  transform: rotate(-8deg);
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 28px);
}

.stadium-bg::after {
  right: -18vw;
  border-radius: 70% 0 0 54%;
  transform: rotate(8deg);
  background: repeating-linear-gradient(80deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 28px);
}

.particle-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(245, 183, 0, 0.95) 0 2px, transparent 3px),
    linear-gradient(120deg, transparent 0 48%, rgba(245, 183, 0, 0.45) 49%, transparent 50%);
  background-size: 120px 92px, 280px 280px;
  opacity: 0.4;
  animation: particleSweep 8s linear infinite;
}

@keyframes particleSweep {
  from { transform: translateX(-40px); }
  to { transform: translateX(40px); }
}

.spotlight {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 150px;
  z-index: 1;
  height: 210px;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(245, 183, 0, 0.4), transparent 20%),
    linear-gradient(90deg, transparent, rgba(0, 194, 255, 0.55), transparent);
  filter: blur(10px);
  opacity: 0.62;
}

.hero-copy {
  position: relative;
  z-index: 6;
  max-width: 660px;
}

.hero-insert-card {
  position: absolute;
  z-index: 5;
  left: 43%;
  top: 365px;
  width: min(25vw, 380px);
  min-width: 280px;
  overflow: hidden;
  border: 1px solid rgba(0, 194, 255, 0.5);
  border-radius: 22px;
  background: rgba(5, 5, 5, 0.58);
  box-shadow:
    0 0 38px rgba(0, 194, 255, 0.2),
    0 0 42px rgba(245, 183, 0, 0.14);
  transform: skewX(-5deg) rotate(-1deg);
}

.hero-insert-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.18), transparent 36%),
    radial-gradient(circle at 68% 35%, rgba(245, 183, 0, 0.12), transparent 32%);
}

.hero-insert-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.05);
  transform: skewX(5deg) scale(1.08);
}

.event-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 28px;
  border: 1px solid rgba(0, 194, 255, 0.65);
  border-radius: 999px;
  background: rgba(0, 194, 255, 0.08);
  box-shadow: 0 0 28px rgba(0, 194, 255, 0.32);
  color: #fff;
  font-family: Oswald, Inter, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.hero h1 {
  margin-top: 28px;
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(92px, 9vw, 162px);
  line-height: 0.78;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: skewX(-9deg);
  text-shadow:
    0 6px 0 rgba(0, 0, 0, 0.35),
    0 0 30px rgba(0, 194, 255, 0.16);
}

.hero h1 span {
  display: block;
  width: max-content;
  background: linear-gradient(180deg, #fff1a2 0%, var(--premium-gold) 44%, #ad6a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(245, 183, 0, 0.42));
}

.hero-tagline {
  margin-top: 28px;
  color: #fff;
  font-family: Oswald, Inter, sans-serif;
  font-size: clamp(25px, 2.3vw, 38px);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  transform: skewX(-6deg);
}

.hero-tagline span {
  color: var(--premium-gold);
  margin: 0 12px;
}

.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 30px;
}

.hero-benefits div {
  display: grid;
  grid-template-columns: 38px auto;
  column-gap: 12px;
  align-items: center;
}

.hero-benefits span {
  grid-row: 1 / 3;
  color: var(--neon-blue);
  font-size: 34px;
  text-shadow: 0 0 20px rgba(0, 194, 255, 0.65);
}

.hero-benefits strong,
.hero-benefits small {
  display: block;
  text-transform: uppercase;
}

.hero-benefits strong {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.hero-benefits small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.primary-cta,
.secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 235px;
  min-height: 58px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  transform: skewX(-10deg);
}

.primary-cta {
  background: linear-gradient(135deg, var(--premium-gold), #ffe06f);
  color: #050505;
  box-shadow: var(--shadow-gold);
}

.secondary-cta {
  border: 1px solid rgba(0, 194, 255, 0.5);
  background: rgba(0, 194, 255, 0.08);
  color: #fff;
  box-shadow: var(--shadow-blue);
}

.player-scene {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 34px;
  width: 410px;
  height: 580px;
  transform: translateX(-5%) rotate(-7deg);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
}

.decorative-player {
  display: none;
}

.player-head {
  position: absolute;
  left: 155px;
  top: 26px;
  width: 78px;
  height: 92px;
  border-radius: 45% 45% 50% 50%;
  background:
    radial-gradient(circle at 30% 42%, #111 0 4px, transparent 5px),
    radial-gradient(circle at 64% 42%, #111 0 4px, transparent 5px),
    #9f643e;
}

.player-body {
  position: absolute;
  left: 104px;
  top: 112px;
  display: grid;
  place-items: center;
  width: 156px;
  height: 210px;
  border-radius: 46px 46px 26px 26px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 24%),
    #0a438f;
  color: #fff;
  font-family: Anton, Impact, sans-serif;
  font-size: 58px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.player-arm {
  position: absolute;
  left: 45px;
  top: 128px;
  width: 310px;
  height: 38px;
  border-radius: 999px;
  background: #9f643e;
  transform: rotate(-23deg);
}

.player-leg {
  position: absolute;
  width: 58px;
  height: 216px;
  border-radius: 30px;
  background: #9f643e;
}

.leg-a {
  left: 155px;
  top: 304px;
  transform: rotate(24deg);
}

.leg-b {
  left: 225px;
  top: 282px;
  transform: rotate(-48deg);
}

.football {
  position: absolute;
  left: 189px;
  bottom: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #111 0 11px, transparent 12px),
    conic-gradient(#fff 0 18%, #111 18% 22%, #fff 22% 40%, #111 40% 44%, #fff 44% 62%, #111 62% 66%, #fff 66% 84%, #111 84% 88%, #fff 88%);
  box-shadow: 0 0 24px rgba(245, 183, 0, 0.65);
  animation: ballPulse 1.6s ease-in-out infinite;
}

@keyframes ballPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.live-odds-panel {
  position: absolute;
  z-index: 8;
  right: min(5vw, 88px);
  top: 172px;
  width: min(330px, 24vw);
  min-height: 300px;
  padding: 24px;
  border: 1px solid rgba(0, 194, 255, 0.62);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(0, 194, 255, 0.14), rgba(8, 17, 32, 0.78)),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    var(--shadow-blue),
    inset 0 0 34px rgba(0, 194, 255, 0.13);
  backdrop-filter: blur(20px);
  transform: perspective(600px) rotateY(-8deg) skewX(-4deg);
}

.live-odds-panel h2 {
  font-family: Oswald, Inter, sans-serif;
  font-size: 22px;
  text-align: center;
  text-transform: uppercase;
}

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  text-align: center;
}

.versus b {
  color: var(--premium-gold);
  font-size: 30px;
}

.flag,
.team-dot {
  display: inline-block;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.flag {
  width: 48px;
  height: 34px;
  margin-bottom: 8px;
}

.flag.brazil,
.team-dot.brazil {
  background: linear-gradient(135deg, #159447, #ffdf00);
}

.flag.france,
.team-dot.france {
  background: linear-gradient(90deg, #173b9f 0 33%, #fff 33% 66%, #d71920 66%);
}

.versus strong {
  display: block;
  font-family: Oswald, Inter, sans-serif;
  font-size: 15px;
  text-transform: uppercase;
}

.live-odds-panel p {
  margin-top: 10px;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
}

.odds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 22px;
}

.odds-grid button {
  min-height: 70px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(8, 17, 32, 0.72);
  color: #fff;
  box-shadow: inset 0 0 18px rgba(0, 194, 255, 0.1);
}

.odds-grid span,
.odds-grid strong {
  display: block;
}

.odds-grid span {
  color: var(--muted);
  font-size: 13px;
}

.odds-grid strong {
  margin-top: 6px;
  font-size: 18px;
}

.match-strip {
  display: grid;
  grid-template-columns: 168px repeat(4, minmax(140px, 1fr)) 250px;
  gap: 12px;
  width: min(100% - 36px, 1700px);
  margin: -84px auto 0;
  padding: 15px;
  border: 1px solid rgba(0, 194, 255, 0.38);
  border-radius: 14px;
  background: rgba(8, 17, 32, 0.84);
  box-shadow: var(--shadow-blue);
  backdrop-filter: blur(20px);
}

.strip-heading {
  display: grid;
  align-content: center;
  gap: 10px;
  color: #fff;
  font-family: Oswald, Inter, sans-serif;
  font-size: 15px;
  text-transform: uppercase;
}

.strip-heading span {
  color: var(--neon-blue);
  font-size: 12px;
}

.match-card {
  display: grid;
  gap: 7px;
  min-height: 106px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.match-card.featured {
  border-color: rgba(0, 194, 255, 0.52);
  box-shadow: inset 0 0 20px rgba(0, 194, 255, 0.12);
}

.match-card small {
  justify-self: end;
  color: #fff;
  font-size: 12px;
}

.match-card div {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 12px;
}

.team-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.team-dot.argentina {
  background: linear-gradient(180deg, #77c9ff 0 33%, #fff 33% 66%, #77c9ff 66%);
}

.team-dot.portugal {
  background: linear-gradient(90deg, #087a37 0 42%, #dc1f2f 42%);
}

.team-dot.england {
  background: #fff;
}

.team-dot.germany {
  background: linear-gradient(180deg, #111 0 33%, #e21d2c 33% 66%, #ffd400 66%);
}

.team-dot.spain {
  background: linear-gradient(180deg, #c60b1e 0 28%, #ffc400 28% 72%, #c60b1e 72%);
}

.team-dot.italy {
  background: linear-gradient(90deg, #008c45 0 33%, #fff 33% 66%, #cd212a 66%);
}

.match-card em {
  color: var(--premium-gold);
  font-style: normal;
  font-weight: 900;
}

.match-card footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.match-card footer span {
  padding: 5px 0;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.bonus-mini {
  position: relative;
  overflow: hidden;
  min-height: 106px;
  padding: 14px;
  border: 1px solid rgba(245, 183, 0, 0.5);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 26%, rgba(245, 183, 0, 0.55), transparent 22%),
    linear-gradient(135deg, rgba(0, 194, 255, 0.16), rgba(8, 17, 32, 0.72));
}

.bonus-mini span,
.bonus-mini small {
  display: block;
  font-family: Oswald, Inter, sans-serif;
  text-transform: uppercase;
}

.bonus-mini strong {
  display: block;
  color: var(--premium-gold);
  font-size: 30px;
  line-height: 1;
}

.bonus-mini button,
.promo-poster button,
.ad-slider button,
.brand-system button,
.phone button {
  border: 0;
  background: linear-gradient(135deg, var(--premium-gold), #ffe174);
  color: #050505;
  font-weight: 900;
  text-transform: uppercase;
}

.bonus-mini button {
  margin-top: 8px;
  min-height: 30px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 12px;
}

.new-showcase {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  grid-auto-rows: minmax(330px, auto);
  gap: 8px;
  width: min(100% - 6px, 1720px);
  margin: 8px auto 0;
}

.showcase-media {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(0, 194, 255, 0.24);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 30%, rgba(0, 194, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(5, 5, 5, 0.72);
  box-shadow:
    inset 0 0 34px rgba(0, 194, 255, 0.08),
    0 0 36px rgba(0, 194, 255, 0.12);
}

.showcase-large {
  grid-row: span 2;
  min-height: 860px;
}

.showcase-tall {
  min-height: 520px;
}

.showcase-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: contain;
  object-position: center top;
  filter: saturate(1.06) contrast(1.04);
}

.showcase-media .card-index {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  padding: 12px 16px;
  border-right: 1px solid rgba(245, 183, 0, 0.24);
  border-bottom: 1px solid rgba(245, 183, 0, 0.24);
  border-radius: 0 0 10px 0;
  background: rgba(5, 5, 5, 0.62);
  backdrop-filter: blur(14px);
}

.content-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.86fr;
  grid-auto-rows: minmax(250px, auto);
  gap: 6px;
  width: min(100% - 6px, 1720px);
  margin: 6px auto 0;
}

.showcase-card,
.promo-poster,
.mobile-app-card,
.ad-slider,
.brand-system,
.mascot-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 17, 32, 0.86);
  box-shadow: inset 0 0 32px rgba(0, 194, 255, 0.06);
}

.card-index {
  position: relative;
  z-index: 2;
  display: block;
  padding: 14px 18px 0;
  color: #fff;
  font-family: Oswald, Inter, sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.stadium-card {
  min-height: 310px;
}

.stadium-preview {
  position: absolute;
  inset: 40px 12px 12px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(0, 194, 255, 0.56), transparent 22%),
    radial-gradient(ellipse at 50% 80%, rgba(34, 197, 94, 0.58), transparent 18%),
    repeating-radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #031b3d, #050505);
  box-shadow: inset 0 0 70px rgba(0, 194, 255, 0.35);
}

.stadium-preview.image-preview {
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.08), rgba(5, 5, 5, 0.42)),
    url("../assets/fifa-hero.jpg") center / cover no-repeat;
}

.stadium-preview::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 11%;
  height: 26%;
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-radius: 50% 50% 0 0;
}

.thumbnail-card {
  min-height: 310px;
}

.thumbnail-image {
  position: absolute;
  inset: 40px 12px 12px;
  width: calc(100% - 24px);
  height: calc(100% - 52px);
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  opacity: 1;
  filter: saturate(1.08) contrast(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(0, 194, 255, 0.26),
    0 0 34px rgba(0, 194, 255, 0.16);
}

.thumbnail-versus {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 22px;
}

.portrait {
  position: relative;
  min-height: 170px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 20%, #b87952 0 22px, transparent 23px),
    linear-gradient(180deg, #f0d03d 0 34%, #0d7f3e 34%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.portrait.france-kit {
  background:
    radial-gradient(circle at 50% 20%, #9d6847 0 22px, transparent 23px),
    linear-gradient(180deg, #174a9c 0 34%, #103067 34%);
}

.portrait b {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  font-family: Anton, Impact, sans-serif;
  font-size: 38px;
}

.thumbnail-versus > strong {
  color: var(--premium-gold);
  font-family: Anton, Impact, sans-serif;
  font-size: 56px;
  text-shadow: var(--shadow-gold);
}

.thumb-odds {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 22px 22px;
}

.thumb-odds span {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 194, 255, 0.28);
  border-radius: 8px;
  color: var(--premium-gold);
  font-weight: 900;
}

.promo-poster {
  min-height: 310px;
  padding: 28px;
  background:
    radial-gradient(circle at 22% 40%, rgba(245, 183, 0, 0.3), transparent 24%),
    linear-gradient(135deg, #111827, #040609);
}

.poster-player {
  position: absolute;
  left: 20px;
  bottom: -20px;
  width: 160px;
  height: 260px;
  background:
    radial-gradient(circle at 50% 13%, #d1a07c 0 32px, transparent 33px),
    linear-gradient(90deg, #fff 0 45%, #78c7ff 45% 55%, #fff 55%);
  border-radius: 60px 60px 24px 24px;
}

.promo-poster h2,
.ad-slider h2,
.mascot-card h2 {
  position: relative;
  z-index: 2;
  margin-left: 150px;
  font-family: Anton, Impact, sans-serif;
  font-size: 52px;
  line-height: 0.95;
  text-transform: uppercase;
}

.promo-poster h2 span,
.ad-slider h2 span {
  display: block;
  color: var(--premium-gold);
}

.promo-poster p,
.ad-slider p {
  position: relative;
  z-index: 2;
  margin: 16px 0 0 150px;
  color: #fff;
  font-family: Oswald, Inter, sans-serif;
  font-size: 22px;
  text-transform: uppercase;
}

.promo-poster strong {
  position: relative;
  z-index: 2;
  display: block;
  margin: 10px 0 0 150px;
  color: var(--premium-gold);
  font-size: 18px;
  text-transform: uppercase;
}

.promo-poster button,
.ad-slider button {
  position: relative;
  z-index: 2;
  min-height: 38px;
  margin: 18px 0 0 150px;
  padding: 0 26px;
  border-radius: 999px;
}

.mobile-app-card {
  grid-column: span 2;
  min-height: 460px;
  padding-bottom: 24px;
}

.phones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 24px;
}

.premium-phone-grid {
  grid-template-columns: 1.22fr 1.22fr 0.86fr 0.86fr;
  align-items: stretch;
}

.phone-image-card {
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(0, 194, 255, 0.36);
  border-radius: 28px;
  background: rgba(5, 5, 5, 0.7);
  box-shadow:
    inset 0 0 0 5px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(0, 194, 255, 0.22);
}

.phone-image-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.06) contrast(1.04);
}

.phone {
  min-height: 330px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(0, 194, 255, 0.08), rgba(5, 5, 5, 0.92)),
    #081120;
  box-shadow:
    inset 0 0 0 5px rgba(0, 0, 0, 0.35),
    var(--shadow-blue);
}

.phone header {
  color: #fff;
  font-size: 11px;
}

.phone h3 {
  margin-top: 18px;
  font-family: Anton, Impact, sans-serif;
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
}

.phone h3 span {
  display: block;
  color: var(--premium-gold);
}

.compact-phone {
  min-height: 360px;
}

.mini-trophy {
  width: 84px;
  height: 112px;
  margin: 22px auto;
  border-radius: 50% 50% 14px 14px;
  background: linear-gradient(135deg, #b87800, #ffe477, #8f5b00);
  box-shadow: var(--shadow-gold);
}

.phone button {
  width: 100%;
  min-height: 32px;
  margin-top: 10px;
  border-radius: 6px;
  font-size: 11px;
}

.score-row,
.bet-slip,
.wallet-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  margin-top: 9px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.score-row em {
  color: #ff4d3d;
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
}

.bet-phone label {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}

.bet-phone input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  text-align: right;
  padding: 0 10px;
}

.wallet-phone > strong {
  display: block;
  margin: 18px 0;
  font-size: 28px;
}

.wallet-phone p {
  margin-top: 14px;
  color: #43d873;
  font-size: 12px;
}

.ad-slider {
  min-height: 218px;
  padding: 30px;
  background:
    radial-gradient(circle at 82% 54%, rgba(245, 183, 0, 0.26), transparent 22%),
    linear-gradient(135deg, #092552, #050505);
}

.ad-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.72;
  filter: saturate(1.05) contrast(1.08);
}

.ad-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 5, 5, 0.78), rgba(5, 5, 5, 0.18) 48%, rgba(5, 5, 5, 0.5));
}

.ad-slider h2,
.ad-slider p,
.ad-slider button {
  position: relative;
  z-index: 2;
  margin-left: 0;
}

.runner {
  position: absolute;
  right: 26px;
  bottom: 0;
  width: 110px;
  height: 184px;
  background:
    radial-gradient(circle at 50% 14%, #bc805d 0 24px, transparent 25px),
    linear-gradient(180deg, #b31924 0 46%, #123d70 46%);
  border-radius: 44px 44px 14px 14px;
}

.brand-system {
  grid-column: span 2;
  display: block;
  min-height: 430px;
}

.brand-system > div {
  padding: 22px;
  border-right: 1px solid var(--line);
}

.brand-system-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.07) contrast(1.04);
}

.swatches {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.swatches i {
  width: 58px;
  height: 86px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  background: var(--color);
}

.brand-system h3 {
  margin-top: 18px;
  font-family: Anton, Impact, sans-serif;
  font-size: 38px;
  transform: skewX(-8deg);
}

.brand-system p {
  margin-top: 8px;
  color: var(--premium-gold);
  font-family: Oswald, Inter, sans-serif;
  text-transform: uppercase;
}

.brand-system button {
  display: block;
  width: 100%;
  min-height: 34px;
  margin-top: 12px;
  border-radius: 6px;
}

.brand-system button.outline {
  border: 1px solid rgba(0, 194, 255, 0.5);
  background: transparent;
  color: #fff;
}

.mini-odds {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.mini-odds span {
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--premium-gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.mascot-card {
  min-height: 260px;
  background:
    radial-gradient(circle at 40% 45%, rgba(245, 183, 0, 0.34), transparent 22%),
    linear-gradient(135deg, #092552, #050505);
}

.video-card {
  min-height: 360px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(245, 183, 0, 0.34);
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 194, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(0, 20, 60, 0.95), rgba(0, 0, 0, 0.92));
  box-shadow:
    0 0 20px rgba(0, 194, 255, 0.3),
    0 0 40px rgba(255, 183, 0, 0.15);
}

.wc-video {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;
  border-radius: 12px;
  object-fit: cover;
  background: #050505;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 18px rgba(0, 194, 255, 0.36),
    0 0 46px rgba(245, 183, 0, 0.2);
}

.sound-toggle {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  min-height: 42px;
  padding: 0 24px;
  font-family: Oswald, Inter, sans-serif;
  letter-spacing: 0.03em;
}

.sound-toggle.is-hidden {
  display: none;
}

.premium-card {
  position: relative;
  overflow: hidden;
  transition: 0.4s ease;
}

.premium-card:hover {
  transform:
    perspective(1000px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(-10px)
    scale(1.02);
  box-shadow:
    0 0 30px rgba(0, 194, 255, 0.6),
    0 0 80px rgba(255, 183, 0, 0.35),
    0 0 140px rgba(255, 183, 0, 0.15);
}

.gold-sweep::before {
  content: "";
  position: absolute;
  top: -200%;
  left: -60%;
  z-index: 4;
  width: 50%;
  height: 400%;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: rotate(25deg);
  animation: sweep 3s infinite;
}

@keyframes sweep {
  0% { left: -60%; }
  100% { left: 160%; }
}

.firework-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.86) 0%, transparent 40%);
  mix-blend-mode: screen;
  opacity: 0.2;
  animation: fireworkFlash 2s infinite;
}

@keyframes fireworkFlash {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.2);
  }
}

.stadium-light {
  position: absolute;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 60%);
  animation: stadiumRotate 15s linear infinite;
  mix-blend-mode: screen;
}

@keyframes stadiumRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ultra-btn {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: #000;
  font-weight: 900;
  text-transform: uppercase;
  background:
    linear-gradient(90deg, #ffe066, #f5b700);
  box-shadow:
    0 0 20px #f5b700,
    0 0 40px #f5b700;
}

.ultra-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: btnSweep 2s infinite;
}

@keyframes btnSweep {
  100% { left: 120%; }
}

.logo-trophy {
  position: absolute;
  right: 28px;
  top: 24px;
  z-index: 2;
  width: 116px;
  height: 116px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(245, 183, 0, 0.34));
}

.mascot {
  position: absolute;
  left: 42px;
  bottom: 10px;
  width: 170px;
  height: 210px;
  border-radius: 54px 54px 28px 28px;
  background:
    radial-gradient(circle at 34% 26%, #111 0 6px, transparent 7px),
    radial-gradient(circle at 62% 26%, #111 0 6px, transparent 7px),
    radial-gradient(circle at 50% 18%, #f4c66a 0 42px, transparent 43px),
    linear-gradient(180deg, #0a438f 0 50%, #0d2c5c 50%);
  box-shadow: var(--shadow-gold);
}

.mascot::before {
  content: "26";
  position: absolute;
  left: 50%;
  top: 102px;
  transform: translateX(-50%);
  color: var(--premium-gold);
  font-family: Anton, Impact, sans-serif;
  font-size: 42px;
}

.mascot-card h2 {
  margin: 62px 18px 0 230px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100% - 36px, 1720px);
  margin: 6px auto 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(5, 5, 5, 0.72);
}

.site-footer strong,
.site-footer span {
  display: block;
}

.site-footer strong {
  font-family: Anton, Impact, sans-serif;
  font-size: 32px;
}

.site-footer span {
  color: var(--muted);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 1320px) {
  .site-header {
    grid-template-columns: auto 1fr;
  }

  .site-header nav {
    order: 3;
    grid-column: 1 / -1;
    justify-self: start;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 8px;
  }

  .hero {
    padding-top: 170px;
  }

  .live-odds-panel {
    right: 28px;
    width: 310px;
  }

  .player-scene {
    left: 52%;
    transform: translateX(-12%) rotate(-7deg) scale(0.9);
  }

  .hero-insert-card {
    left: 46%;
    top: 420px;
    width: min(30vw, 360px);
    min-width: 260px;
  }

  .match-strip {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0;
  }

  .strip-heading,
  .bonus-mini {
    grid-column: span 2;
  }

  .content-grid {
    grid-template-columns: 1fr 1fr;
  }

  .new-showcase {
    grid-template-columns: 1fr 1fr;
  }

  .promo-poster,
  .mascot-card {
    min-height: 300px;
  }
}

@media (max-width: 820px) {
  .site-header {
    position: relative;
    top: 0;
    left: auto;
    width: calc(100% - 16px);
    margin: 8px auto 0;
    transform: none;
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .brand {
    min-width: 0;
  }

  .site-header nav {
    gap: 22px;
  }

  .header-actions {
    width: 100%;
  }

  .login-button,
  .register-button {
    flex: 1;
  }

  .hero {
    min-height: auto;
    padding: 44px 18px 28px;
  }

  .hero-main-poster {
    position: relative;
    top: auto;
    right: auto;
    z-index: 5;
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    margin-top: 24px;
  }

  .hero-insert-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    margin-top: 22px;
    transform: none;
  }

  .hero-insert-card img {
    transform: none;
  }

  .hero::after {
    display: none;
  }

  .event-kicker {
    letter-spacing: 3px;
    font-size: 12px;
  }

  .hero h1 {
    font-size: 74px;
  }

  .hero-tagline {
    font-size: 22px;
  }

  .hero-benefits {
    gap: 18px;
  }

  .player-scene {
    position: relative;
    left: auto;
    bottom: auto;
    width: 320px;
    height: 430px;
    margin: 20px auto 0;
    transform: rotate(-7deg) scale(0.78);
    transform-origin: top center;
  }

  .live-odds-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 18px;
    transform: none;
  }

  .match-strip {
    grid-template-columns: 1fr;
    width: calc(100% - 16px);
  }

  .strip-heading,
  .bonus-mini {
    grid-column: span 1;
  }

  .content-grid {
    grid-template-columns: 1fr;
    width: calc(100% - 16px);
  }

  .new-showcase {
    grid-template-columns: 1fr;
    width: calc(100% - 16px);
  }

  .showcase-large,
  .showcase-tall,
  .showcase-media {
    min-height: auto;
  }

  .showcase-large {
    grid-row: span 1;
  }

  .showcase-media img {
    height: auto;
    min-height: 0;
  }

  .mobile-app-card,
  .brand-system {
    grid-column: span 1;
  }

  .phones,
  .brand-system {
    grid-template-columns: 1fr;
  }

  .brand-system > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .promo-poster h2,
  .promo-poster p,
  .promo-poster strong,
  .promo-poster button,
  .mascot-card h2 {
    margin-left: 132px;
  }

  .poster-player {
    width: 125px;
  }

.site-footer {
    flex-direction: column;
    align-items: flex-start;
    width: calc(100% - 16px);
  }
}

.premium-page::after {
  content: "";
  position: fixed;
  inset: -20% -40%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(0, 194, 255, 0.16) 47%, rgba(245, 183, 0, 0.12) 50%, transparent 56%),
    linear-gradient(65deg, transparent 0 52%, rgba(255, 255, 255, 0.08) 54%, transparent 58%);
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: lightSweep 9s ease-in-out infinite;
}

@keyframes lightSweep {
  0% { transform: translateX(-18%) translateY(0); opacity: 0.22; }
  45% { opacity: 0.62; }
  100% { transform: translateX(18%) translateY(3%); opacity: 0.22; }
}

.brand-mark,
.brand strong,
.hero-benefits strong,
.card-index,
.phone h3 {
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.26),
    0 0 22px rgba(0, 194, 255, 0.18);
}

.brand small,
.site-header nav a.active,
.site-header nav a:hover,
.versus b,
.bonus-mini strong,
.promo-poster h2 span,
.ad-slider h2 span,
.brand-system p {
  text-shadow: 0 0 18px rgba(245, 183, 0, 0.62);
}

.hero h1 {
  text-shadow:
    0 3px 0 #fff7c2,
    0 12px 0 rgba(0, 0, 0, 0.48),
    0 0 20px rgba(245, 183, 0, 0.72),
    0 0 48px rgba(245, 183, 0, 0.58),
    0 0 88px rgba(255, 140, 0, 0.4),
    0 0 132px rgba(0, 194, 255, 0.38);
  transform-style: preserve-3d;
  animation:
    titleGlow 3.8s ease-in-out infinite,
    premiumTitleFloat 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 16px rgba(0, 194, 255, 0.34))
      drop-shadow(0 0 26px rgba(245, 183, 0, 0.28));
  }
  50% {
    filter:
      drop-shadow(0 0 38px rgba(0, 194, 255, 0.72))
      drop-shadow(0 0 72px rgba(255, 140, 0, 0.5));
  }
}

@keyframes premiumTitleFloat {
  0%,
  100% {
    transform: translateY(0) scale(1) rotateX(0deg);
  }
  50% {
    transform: translateY(-18px) scale(1.045) rotateX(9deg);
  }
}

.hero h1 span {
  filter:
    drop-shadow(0 4px 0 rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 18px rgba(245, 183, 0, 0.7));
  animation: goldPulse 2.8s ease-in-out infinite;
}

@keyframes goldPulse {
  0%, 100% { opacity: 0.94; }
  50% { opacity: 1; }
}

.hero-tagline,
.promo-poster h2,
.ad-slider h2,
.mascot-card h2,
.brand-system h3 {
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.38),
    0 0 28px rgba(255, 255, 255, 0.22);
}

.primary-cta {
  animation: ctaPulse 2.4s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% {
    box-shadow: 0 0 24px rgba(245, 183, 0, 0.26), 0 0 4px rgba(255, 255, 255, 0.16) inset;
  }
  50% {
    box-shadow: 0 0 42px rgba(245, 183, 0, 0.54), 0 0 16px rgba(255, 255, 255, 0.22) inset;
  }
}

.hero-insert-card {
  animation: floatCard 4.2s ease-in-out infinite;
}

@keyframes floatCard {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.live-odds-panel {
  animation: oddsGlow 3s ease-in-out infinite;
}

@keyframes oddsGlow {
  0%, 100% {
    box-shadow: var(--shadow-blue), inset 0 0 34px rgba(0, 194, 255, 0.13);
  }
  50% {
    box-shadow: 0 0 58px rgba(0, 194, 255, 0.38), inset 0 0 46px rgba(0, 194, 255, 0.22);
  }
}

.odds-grid button,
.match-card,
.showcase-card,
.promo-poster,
.ad-slider,
.mascot-card,
.phone {
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.odds-grid button:hover,
.match-card:hover,
.showcase-card:hover,
.promo-poster:hover,
.ad-slider:hover,
.mascot-card:hover {
  border-color: rgba(0, 194, 255, 0.55);
  box-shadow:
    0 0 34px rgba(0, 194, 255, 0.18),
    inset 0 0 28px rgba(0, 194, 255, 0.09);
}

.odds-grid button:hover,
.match-card:hover,
.phone:hover {
  transform: translateY(-5px);
}

.primary-cta:hover,
.secondary-cta:hover {
  filter: brightness(1.14);
}

.hero-fireworks {
  position: absolute;
  inset: 82px 0 0;
  z-index: 5;
  pointer-events: auto;
  mix-blend-mode: screen;
  opacity: 0.95;
  -webkit-mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
}

.hero-flash {
  position: absolute;
  inset: 82px 0 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.34), transparent 46%),
    radial-gradient(circle at 18% 76%, rgba(245, 183, 0, 0.22), transparent 28%),
    radial-gradient(circle at 82% 68%, rgba(0, 194, 255, 0.2), transparent 30%);
  mix-blend-mode: screen;
  animation: heroFlashBoom 2s ease-in-out infinite;
}

@keyframes heroFlashBoom {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(1);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.06);
  }
}

.cinematic-bonus {
  position: absolute;
  z-index: 7;
  color: var(--premium-gold);
  font-family: Oswald, Inter, sans-serif;
  font-size: clamp(22px, 2.15vw, 40px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  text-shadow:
    0 0 10px rgba(245, 183, 0, 0.95),
    0 0 28px rgba(245, 183, 0, 0.76),
    0 0 42px rgba(0, 194, 255, 0.38);
  animation: cinematicBonusFloat 6s linear infinite;
}

.bonus-one {
  left: 9%;
  top: 84%;
}

.bonus-two {
  left: 77%;
  top: 80%;
  animation-delay: -2.3s;
}

.bonus-three {
  left: 46%;
  top: 88%;
  animation-delay: -4.6s;
}

.bonus-four {
  left: 66%;
  top: 90%;
  animation-delay: -1.1s;
}

.bonus-five {
  left: 84%;
  top: 84%;
  animation-delay: -3.4s;
}

@keyframes cinematicBonusFloat {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.56) rotate(0deg);
  }
  17% {
    opacity: 1;
  }
  72% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translate3d(36px, -980px, 0) scale(1.92) rotate(720deg);
  }
}

.hero h1::after {
  content: "";
  display: block;
  width: min(420px, 80%);
  height: 3px;
  margin-top: 12px;
  background: linear-gradient(90deg, transparent, rgba(0, 194, 255, 0.9), rgba(245, 183, 0, 0.95), transparent);
  box-shadow:
    0 0 18px rgba(0, 194, 255, 0.75),
    0 0 32px rgba(245, 183, 0, 0.56);
  animation: explosionLine 1.8s ease-in-out infinite;
}

@keyframes explosionLine {
  0%,
  100% {
    opacity: 0.36;
    transform: scaleX(0.62);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.hero-tagline {
  animation: subtitleFlicker 1.5s ease-in-out infinite alternate;
}

@keyframes subtitleFlicker {
  from {
    opacity: 0.76;
    text-shadow:
      0 0 12px rgba(0, 194, 255, 0.68),
      0 0 24px rgba(0, 194, 255, 0.36);
  }
  to {
    opacity: 1;
    text-shadow:
      0 0 20px rgba(0, 194, 255, 0.9),
      0 0 44px rgba(245, 183, 0, 0.42);
  }
}

.stadium-bg {
  transform: translate3d(calc(var(--parallax-x, 0px) * -0.28), calc(var(--parallax-y, 0px) * -0.18), 0);
  transition: transform 0.22s ease-out;
}

.hero-main-poster {
  transform: translate3d(calc(var(--parallax-x, 0px) * 0.16), calc(var(--parallax-y, 0px) * 0.12), 0);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.hero-main-poster:hover {
  border-color: rgba(245, 183, 0, 0.72);
  box-shadow:
    0 0 18px rgba(245, 183, 0, 0.42),
    0 0 54px rgba(245, 183, 0, 0.3),
    0 0 88px rgba(0, 194, 255, 0.26);
}

.gold-particles {
  position: absolute;
  inset: 82px 0 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(calc(var(--parallax-x, 0px) * -0.12), calc(var(--parallax-y, 0px) * -0.08), 0);
}

.gold-particles span {
  position: absolute;
  left: var(--x);
  bottom: -24px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff7ba 0 18%, #f5b700 45%, rgba(245, 183, 0, 0) 72%);
  box-shadow:
    0 0 10px rgba(245, 183, 0, 0.88),
    0 0 26px rgba(0, 194, 255, 0.24);
  opacity: 0;
  animation: premiumParticle var(--duration) linear infinite;
  animation-delay: var(--delay);
}

@keyframes premiumParticle {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7);
  }
  12%,
  78% {
    opacity: 0.86;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), -760px, 0) rotate(260deg) scale(1.14);
  }
}

.stadium-sweep {
  position: absolute;
  z-index: 4;
  top: 96px;
  left: -30%;
  width: 58%;
  height: 620px;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(9px);
  opacity: 0;
  transform-origin: bottom center;
  background:
    linear-gradient(82deg, transparent 0 36%, rgba(0, 194, 255, 0.42) 49%, rgba(245, 183, 0, 0.22) 54%, transparent 68%);
  clip-path: polygon(45% 0, 58% 0, 100% 100%, 0 100%);
  animation: stadiumSweep 7.8s ease-in-out infinite;
}

.stadium-sweep.sweep-two {
  animation-delay: -3.9s;
  background:
    linear-gradient(98deg, transparent 0 32%, rgba(255, 255, 255, 0.18) 44%, rgba(0, 194, 255, 0.38) 52%, transparent 68%);
}

@keyframes stadiumSweep {
  0% {
    opacity: 0;
    transform: translateX(-12%) rotate(-16deg);
  }
  18% {
    opacity: 0.55;
  }
  52% {
    opacity: 0.36;
  }
  100% {
    opacity: 0;
    transform: translateX(178%) rotate(18deg);
  }
}

.floating-football {
  position: absolute;
  z-index: 7;
  left: clamp(320px, 38vw, 620px);
  top: 525px;
  width: 82px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.95) 0 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, #0c1322 0 13%, transparent 14%),
    conic-gradient(from 12deg, #f5f7fb 0 14%, #0a1221 14% 20%, #f5f7fb 20% 36%, #0a1221 36% 42%, #f5f7fb 42% 58%, #0a1221 58% 64%, #f5f7fb 64% 80%, #0a1221 80% 86%, #f5f7fb 86% 100%);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.6),
    0 0 34px rgba(0, 194, 255, 0.52),
    0 0 72px rgba(245, 183, 0, 0.34);
  transform: translate3d(calc(var(--parallax-x, 0px) * 0.44), calc(var(--parallax-y, 0px) * 0.34), 0);
  animation: footballOrbit 6s ease-in-out infinite;
}

.floating-football::after {
  content: "";
  position: absolute;
  inset: 45% 78% 42% -112px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0, 194, 255, 0.72), rgba(245, 183, 0, 0.48), transparent);
  filter: blur(4px);
  opacity: 0.72;
  transform: rotate(-12deg);
}

@keyframes footballOrbit {
  0%,
  100% {
    rotate: -8deg;
    translate: 0 0;
  }
  50% {
    rotate: 18deg;
    translate: 0 -16px;
  }
}

@media (max-width: 900px) {
  .hero-fireworks {
    opacity: 0.62;
    pointer-events: none;
  }

  .hero-flash {
    opacity: 0.35;
  }

  .cinematic-bonus {
    font-size: 22px;
  }

  .floating-football {
    display: none;
  }

  .gold-particles span:nth-child(n + 19) {
    display: none;
  }
}

.live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border-radius: 50%;
  background: #ff2448;
  box-shadow:
    0 0 8px #ff2448,
    0 0 18px rgba(255, 36, 72, 0.62);
  animation: liveBlink 1s ease-in-out infinite;
}

@keyframes liveBlink {
  0%,
  100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.34; transform: scale(0.72); }
}

.live-odds-panel,
.match-card,
.showcase-card,
.showcase-media,
.promo-poster,
.ad-slider,
.mascot-card,
.phone,
.bonus-mini,
.hero-insert-card {
  transform-style: preserve-3d;
  will-change: transform;
}

.live-odds-panel {
  overflow: hidden;
  transform:
    perspective(760px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(calc(-8deg + var(--tilt-y, 0deg)))
    skewX(-4deg)
    translate3d(calc(var(--parallax-x, 0px) * 0.22), calc(var(--parallax-y, 0px) * 0.16), 0);
}

.live-odds-panel::before,
.live-odds-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.live-odds-panel::before {
  inset: -40% 0;
  z-index: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(0, 194, 255, 0.1) 10px, transparent 12px),
    linear-gradient(180deg, transparent, rgba(0, 194, 255, 0.28), transparent);
  mix-blend-mode: screen;
  opacity: 0.62;
  animation: hologramScan 3.4s linear infinite;
}

.live-odds-panel::after {
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.24) 45%, transparent 56%),
    radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 40%), rgba(0, 194, 255, 0.28), transparent 34%);
  opacity: 0.58;
  animation: glassShine 5.2s ease-in-out infinite;
}

.live-odds-panel > * {
  position: relative;
  z-index: 2;
}

@keyframes hologramScan {
  from { transform: translateY(-24%); }
  to { transform: translateY(24%); }
}

@keyframes glassShine {
  0%,
  100% { transform: translateX(-18%); opacity: 0.34; }
  50% { transform: translateX(18%); opacity: 0.68; }
}

.odds-grid button {
  position: relative;
  overflow: hidden;
  color: #f9fbff;
  text-shadow: 0 0 14px rgba(0, 194, 255, 0.72);
  animation: oddsNumberPulse 1.8s ease-in-out infinite;
}

.odds-grid button::after,
.primary-cta::after,
.secondary-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, 0.5) 48%, transparent 58%);
  transform: translateX(-120%);
  animation: buttonSweep 3.4s ease-in-out infinite;
}

@keyframes oddsNumberPulse {
  0%,
  100% { filter: brightness(1); }
  50% { filter: brightness(1.24); }
}

@keyframes buttonSweep {
  0%,
  52% { transform: translateX(-120%); }
  78%,
  100% { transform: translateX(120%); }
}

.primary-cta,
.secondary-cta {
  position: relative;
  overflow: hidden;
}

.match-card,
.showcase-card,
.showcase-media,
.promo-poster,
.ad-slider,
.mascot-card,
.phone,
.bonus-mini {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(5, 5, 5, 0.34);
  backdrop-filter: blur(20px);
  transform:
    perspective(1200px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(0);
}

.match-card::before,
.showcase-card::before,
.showcase-media::before,
.promo-poster::before,
.ad-slider::before,
.mascot-card::before,
.phone::before,
.bonus-mini::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(0, 194, 255, 0.85), rgba(245, 183, 0, 0.68), rgba(0, 194, 255, 0.74));
  background-size: 240% 240%;
  opacity: 0;
  animation: gradientBorder 5s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.match-card::after,
.showcase-card::after,
.showcase-media::after,
.promo-poster::after,
.ad-slider::before,
.mascot-card::after,
.phone::after,
.bonus-mini::after {
  pointer-events: none;
}

.match-card:hover,
.showcase-card:hover,
.showcase-media:hover,
.promo-poster:hover,
.ad-slider:hover,
.mascot-card:hover,
.phone:hover,
.bonus-mini:hover {
  transform:
    perspective(1200px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(-7px);
  border-color: rgba(0, 194, 255, 0.66);
  box-shadow:
    0 0 10px #00c2ff,
    0 0 30px rgba(0, 194, 255, 0.42),
    0 24px 52px rgba(0, 0, 0, 0.38);
}

.match-card:hover::before,
.showcase-card:hover::before,
.showcase-media:hover::before,
.promo-poster:hover::before,
.ad-slider:hover::before,
.mascot-card:hover::before,
.phone:hover::before,
.bonus-mini:hover::before {
  opacity: 1;
}

@keyframes gradientBorder {
  0% { background-position: 0% 50%; }
  100% { background-position: 240% 50%; }
}

.hero-insert-card {
  transform:
    perspective(900px)
    skewX(-5deg)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    rotate(-1deg)
    translate3d(calc(var(--parallax-x, 0px) * 0.3), calc(var(--parallax-y, 0px) * 0.22), 0);
}

.hero-insert-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 40%), rgba(255, 255, 255, 0.2), transparent 32%),
    linear-gradient(120deg, transparent 0 38%, rgba(0, 194, 255, 0.26) 48%, transparent 58%);
  mix-blend-mode: screen;
  opacity: 0.5;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 82px 0 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--mouse-x, 44%) var(--mouse-y, 42%), rgba(0, 194, 255, 0.16), transparent 20%),
    linear-gradient(180deg, transparent, rgba(0, 194, 255, 0.08) 52%, transparent);
  opacity: 0.76;
  mix-blend-mode: screen;
}

.video-card.mascot-card {
  grid-column: 1 / -1;
  min-height: auto;
  padding: 14px;
  border-color: rgba(245, 183, 0, 0.42);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 194, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(0, 20, 60, 0.95), rgba(0, 0, 0, 0.92));
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 20px rgba(0, 194, 255, 0.3),
    0 0 40px rgba(255, 183, 0, 0.15);
}

.video-card.mascot-card:hover {
  transform:
    perspective(1200px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(-10px)
    scale(1.02);
  box-shadow:
    0 0 30px rgba(0, 194, 255, 0.6),
    0 0 80px rgba(255, 183, 0, 0.35),
    0 0 140px rgba(255, 183, 0, 0.15);
}

.video-card .wc-video {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-card .sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.video-card .sound-toggle.is-hidden {
  display: none;
}

.main-video-card {
  width: min(100%, 1380px);
  min-height: auto;
  margin: 0 auto;
}

.main-video-card .wc-video {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* User-requested cleanup: remove the old generated UI blocks shown in mobile screenshots. */
.hero-copy,
.hero-insert-card,
.floating-football,
.player-scene,
.live-odds-panel,
.match-strip,
.mobile-app-card,
.thumbnail-card,
.promo-poster,
.ad-slider,
.brand-system {
  display: none !important;
}

.hero {
  min-height: auto;
  padding-bottom: 22px;
}

.hero-main-poster {
  position: relative;
  top: auto;
  right: auto;
  z-index: 6;
  display: block;
  width: min(100% - 24px, 820px);
  height: auto;
  max-height: none;
  margin: 112px auto 0;
  object-fit: contain;
}

.new-showcase {
  margin-top: 8px;
}

.content-grid {
  grid-template-columns: 1fr;
}

.stadium-card {
  display: none !important;
}

.video-card.mascot-card {
  grid-column: 1 / -1;
  width: min(100% - 16px, 1180px);
  margin: 8px auto 24px;
}

.site-header,
.hero {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .hero-fireworks,
  .cinematic-bonus {
    display: none !important;
  }
}

.clean-page {
  padding: 8px 0 24px;
}

.clean-page .new-showcase {
  grid-template-columns: 1.12fr 0.88fr;
  width: min(100% - 6px, 1720px);
  margin-top: 0;
}

.clean-page .showcase-large {
  grid-row: span 2;
  min-height: 860px;
}

.clean-page .showcase-media img {
  height: 100%;
  min-height: inherit;
}

.clean-page .site-footer {
  display: flex !important;
}

.video-section {
  position: relative;
  z-index: 1;
  width: min(100% - 16px, 1180px);
  margin: 10px auto 0;
}

.video-section .video-card {
  min-height: auto;
  padding: 14px;
  border: 1px solid rgba(0, 194, 255, 0.42);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 194, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(0, 20, 60, 0.95), rgba(0, 0, 0, 0.92));
  box-shadow:
    0 0 20px rgba(0, 194, 255, 0.3),
    0 0 40px rgba(255, 183, 0, 0.15);
}

.video-section .wc-video {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 12px;
  object-fit: contain;
  background: #050505;
}

.video-section .sound-toggle {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 5;
  min-height: 40px;
  padding: 0 22px;
}

.video-section .sound-toggle.is-hidden {
  display: none !important;
}

.audio-section {
  position: relative;
  z-index: 1;
  width: min(100% - 16px, 760px);
  margin: 10px auto 0;
}

.audio-card {
  min-height: 180px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;
  padding: 28px;
  border: 1px solid rgba(0, 194, 255, 0.42);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 194, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(0, 20, 60, 0.95), rgba(0, 0, 0, 0.92));
  box-shadow:
    0 0 20px rgba(0, 194, 255, 0.3),
    0 0 40px rgba(255, 183, 0, 0.15);
}

.audio-equalizer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: end;
  gap: 7px;
  width: 86px;
  height: 72px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(0, 194, 255, 0.08);
  box-shadow:
    inset 0 0 18px rgba(0, 194, 255, 0.18),
    0 0 28px rgba(245, 183, 0, 0.2);
}

.audio-equalizer span {
  width: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff7b3, #f5b700);
  box-shadow: 0 0 14px rgba(245, 183, 0, 0.72);
  animation: equalizerBeat 0.9s ease-in-out infinite;
}

.audio-equalizer span:nth-child(1) { height: 28px; animation-delay: -0.2s; }
.audio-equalizer span:nth-child(2) { height: 48px; animation-delay: -0.45s; }
.audio-equalizer span:nth-child(3) { height: 62px; animation-delay: -0.1s; }
.audio-equalizer span:nth-child(4) { height: 42px; animation-delay: -0.35s; }
.audio-equalizer span:nth-child(5) { height: 54px; animation-delay: -0.55s; }

@keyframes equalizerBeat {
  0%,
  100% { transform: scaleY(0.42); opacity: 0.62; }
  50% { transform: scaleY(1); opacity: 1; }
}

.audio-copy {
  position: relative;
  z-index: 2;
}

.audio-copy strong,
.audio-copy span {
  display: block;
}

.audio-copy strong {
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 20px rgba(245, 183, 0, 0.42),
    0 0 40px rgba(0, 194, 255, 0.28);
}

.audio-copy span {
  margin-top: 8px;
  color: var(--premium-gold);
  font-family: Oswald, Inter, sans-serif;
  font-size: 18px;
  text-transform: uppercase;
}

.audio-section .sound-toggle {
  grid-column: 1 / -1;
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 48px;
}

.audio-section .sound-toggle.is-hidden {
  display: none !important;
}

.wc-audio {
  display: none;
}

/* WORLD CUP 2026 ULTRA EFFECTS - clean page layer */
.clean-page {
  isolation: isolate;
}

.clean-page .premium-card {
  border: 1px solid rgba(255, 196, 0, 0.3);
  background:
    linear-gradient(180deg, rgba(0, 20, 60, 0.95), rgba(0, 0, 0, 0.92));
  box-shadow:
    0 0 20px rgba(0, 194, 255, 0.3),
    0 0 40px rgba(255, 183, 0, 0.15);
  transform-style: preserve-3d;
}

.clean-page .premium-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, #00c2ff, #f5b700, #00c2ff);
  filter: blur(18px);
  opacity: 0.46;
  animation: borderMove 5s linear infinite;
}

.clean-page .premium-card > * {
  position: relative;
  z-index: 2;
}

.clean-page .showcase-media {
  border: 1px solid rgba(0, 194, 255, 0.38);
  box-shadow:
    0 0 16px rgba(0, 194, 255, 0.32),
    0 0 46px rgba(245, 183, 0, 0.16);
}

.clean-page .showcase-media:hover {
  transform:
    perspective(1200px)
    rotateX(2deg)
    rotateY(-2deg)
    translateY(-6px)
    scale(1.01);
}

.clean-page .showcase-media img {
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 0 20px rgba(0, 194, 255, 0.16));
}

.clean-page .showcase-media:hover img {
  filter:
    saturate(1.18)
    contrast(1.08)
    drop-shadow(0 0 26px rgba(245, 183, 0, 0.22));
}

@keyframes borderMove {
  0% { filter: hue-rotate(0deg) blur(18px); }
  100% { filter: hue-rotate(360deg) blur(18px); }
}

.clean-page .ultra-title {
  display: block;
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 900;
  text-transform: uppercase;
  background:
    linear-gradient(180deg, #ffffff, #ffe066, #f5b700);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 20px #f5b700,
    0 0 40px #f5b700,
    0 0 80px #00c2ff;
  transform-style: preserve-3d;
  animation:
    titleFloat 4s infinite ease-in-out,
    glowPulse 2s infinite alternate;
}

@keyframes titleFloat {
  0%,
  100% {
    transform: rotateX(0deg) translateY(0);
  }

  50% {
    transform: rotateX(10deg) translateY(-12px);
  }
}

@keyframes glowPulse {
  from { filter: drop-shadow(0 0 10px #00c2ff); }
  to { filter: drop-shadow(0 0 40px #ffae00); }
}

.clean-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.particles span {
  position: absolute;
  bottom: -12vh;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f5b700;
  box-shadow:
    0 0 10px #f5b700,
    0 0 20px #f5b700;
  animation: particleFloat linear infinite;
}

.particles span:nth-child(1) { left: 4%; animation-duration: 8s; animation-delay: -1s; }
.particles span:nth-child(2) { left: 9%; animation-duration: 13s; animation-delay: -7s; }
.particles span:nth-child(3) { left: 14%; animation-duration: 10s; animation-delay: -4s; }
.particles span:nth-child(4) { left: 18%; animation-duration: 16s; animation-delay: -8s; }
.particles span:nth-child(5) { left: 23%; animation-duration: 9s; animation-delay: -2s; }
.particles span:nth-child(6) { left: 27%; animation-duration: 14s; animation-delay: -9s; }
.particles span:nth-child(7) { left: 31%; animation-duration: 11s; animation-delay: -6s; }
.particles span:nth-child(8) { left: 36%; animation-duration: 15s; animation-delay: -3s; }
.particles span:nth-child(9) { left: 41%; animation-duration: 12s; animation-delay: -11s; }
.particles span:nth-child(10) { left: 46%; animation-duration: 8s; animation-delay: -5s; }
.particles span:nth-child(11) { left: 52%; animation-duration: 17s; animation-delay: -10s; }
.particles span:nth-child(12) { left: 57%; animation-duration: 10s; animation-delay: -1s; }
.particles span:nth-child(13) { left: 62%; animation-duration: 14s; animation-delay: -6s; }
.particles span:nth-child(14) { left: 66%; animation-duration: 9s; animation-delay: -4s; }
.particles span:nth-child(15) { left: 71%; animation-duration: 16s; animation-delay: -12s; }
.particles span:nth-child(16) { left: 76%; animation-duration: 11s; animation-delay: -8s; }
.particles span:nth-child(17) { left: 80%; animation-duration: 15s; animation-delay: -2s; }
.particles span:nth-child(18) { left: 84%; animation-duration: 12s; animation-delay: -10s; }
.particles span:nth-child(19) { left: 88%; animation-duration: 18s; animation-delay: -5s; }
.particles span:nth-child(20) { left: 92%; animation-duration: 10s; animation-delay: -9s; }
.particles span:nth-child(21) { left: 96%; animation-duration: 13s; animation-delay: -3s; }
.particles span:nth-child(22) { left: 49%; animation-duration: 7s; animation-delay: -7s; }
.particles span:nth-child(23) { left: 68%; animation-duration: 19s; animation-delay: -14s; }
.particles span:nth-child(24) { left: 2%; animation-duration: 12s; animation-delay: -10s; }

@keyframes particleFloat {
  from {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }

  20% { opacity: 1; }

  to {
    transform: translateY(-120vh) scale(2);
    opacity: 0;
  }
}

.live-badge {
  position: relative;
  color: #00ff84;
  font-weight: 900;
  text-shadow:
    0 0 10px #00ff84,
    0 0 20px #00ff84;
  animation: livePulse 1s infinite;
}

.audio-copy .live-badge {
  display: inline-block;
  padding-left: 16px;
}

.audio-copy .live-badge::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff84;
  transform: translateY(-50%);
  box-shadow:
    0 0 10px #00ff84,
    0 0 20px #00ff84;
}

@keyframes livePulse {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.bonus-explode {
  position: absolute;
  z-index: 1;
  color: #f5b700;
  font-size: 30px;
  font-weight: 900;
  text-shadow:
    0 0 20px #f5b700,
    0 0 40px #ffae00;
  animation: bonusBoom 5s linear infinite;
}

.bonus-a { left: 10%; bottom: -60px; }
.bonus-b { left: 46%; bottom: -74px; animation-delay: 1.6s; }
.bonus-c { right: 10%; bottom: -68px; animation-delay: 3.1s; }

@keyframes bonusBoom {
  0% {
    transform: translateY(0) scale(0.3) rotate(0deg);
    opacity: 0;
  }

  10% { opacity: 1; }

  100% {
    transform: translateY(-1000px) scale(2) rotate(720deg);
    opacity: 0;
  }
}

.clean-page .ultra-btn:hover {
  transform:
    perspective(1000px)
    rotateX(10deg)
    scale(1.08);
  box-shadow:
    0 0 40px #f5b700,
    0 0 100px #ffae00;
}

/* MASSIVE CINEMATIC FX */
.wc-hero {
  position: relative;
  z-index: 1;
  width: min(100% - 16px, 1720px);
  min-height: min(860px, 92vh);
  margin: 0 auto 12px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid rgba(0, 194, 255, 0.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at center, #001d3d 0%, #000814 70%);
  box-shadow:
    0 0 24px rgba(0, 194, 255, 0.46),
    0 0 90px rgba(245, 183, 0, 0.18);
  isolation: isolate;
}

.wc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(120deg, transparent 0 34%, rgba(255, 255, 255, 0.16) 42%, transparent 52%),
    radial-gradient(circle at 25% 90%, rgba(245, 183, 0, 0.2), transparent 34%),
    radial-gradient(circle at 74% 12%, rgba(0, 194, 255, 0.2), transparent 36%);
  mix-blend-mode: screen;
  animation: wcHeroSweep 5s infinite linear;
}

.wc-title {
  position: relative;
  z-index: 10;
  margin: 0;
  font-family: Anton, "Arial Black", sans-serif;
  font-size: clamp(118px, 18vw, 240px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background:
    linear-gradient(180deg, #ffffff 0%, #ffe066 20%, #f5b700 50%, #ff8800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 20px #f5b700,
    0 0 40px #f5b700,
    0 0 80px #ffae00,
    0 0 150px #00c2ff;
  animation:
    wcTitleBoom 2s infinite alternate ease-in-out,
    wcTitleShake 4s infinite;
}

.wc-subtitle {
  position: relative;
  z-index: 10;
  margin-top: 20px;
  color: #fff;
  font-family: Oswald, Inter, sans-serif;
  font-size: clamp(18px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 0 20px #00c2ff,
    0 0 40px #00c2ff;
  animation: pulseText 1s infinite alternate;
}

.flash-light {
  position: absolute;
  z-index: 1;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(255, 183, 0, 0.3), transparent 70%);
  filter: blur(50px);
  animation: flashBoom 2s infinite;
}

.fireworks {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle, #ffffff 0%, transparent 5%),
    radial-gradient(circle, #00c2ff 0%, transparent 5%),
    radial-gradient(circle, #f5b700 0%, transparent 5%),
    radial-gradient(circle, #ff8800 0%, transparent 5%);
  background-size:
    300px 300px,
    250px 250px,
    400px 400px,
    350px 350px;
  background-position:
    20% 30%,
    80% 20%,
    50% 70%,
    70% 80%;
  opacity: 0.9;
  mix-blend-mode: screen;
  animation: fireworkMove 3s infinite linear;
}

.wc-fx-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.wc-fx-particles span {
  position: absolute;
  bottom: -12vh;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f5b700;
  box-shadow:
    0 0 20px #f5b700,
    0 0 40px #ffae00;
  animation: wcParticleUp linear infinite;
}

.wc-fx-particles span:nth-child(1) { left: 10%; animation-duration: 4s; }
.wc-fx-particles span:nth-child(2) { left: 20%; animation-duration: 5s; animation-delay: -1s; }
.wc-fx-particles span:nth-child(3) { left: 35%; animation-duration: 3s; animation-delay: -0.5s; }
.wc-fx-particles span:nth-child(4) { left: 50%; animation-duration: 6s; animation-delay: -2s; }
.wc-fx-particles span:nth-child(5) { left: 65%; animation-duration: 4s; animation-delay: -1.5s; }
.wc-fx-particles span:nth-child(6) { left: 75%; animation-duration: 5s; animation-delay: -2.5s; }
.wc-fx-particles span:nth-child(7) { left: 85%; animation-duration: 3s; animation-delay: -1s; }
.wc-fx-particles span:nth-child(8) { left: 95%; animation-duration: 4s; animation-delay: -3s; }

.explosion {
  position: absolute;
  z-index: 4;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 183, 0, 0.6), transparent 70%);
  filter: blur(30px);
  animation: explode 3s infinite;
}

.explosion1 {
  top: 10%;
  left: 10%;
}

.explosion2 {
  top: 20%;
  right: 10%;
  animation-delay: 1s;
}

.explosion3 {
  bottom: 10%;
  left: 40%;
  animation-delay: 2s;
}

@keyframes wcHeroSweep {
  from { transform: translateX(-10%) rotate(0deg); }
  to { transform: translateX(10%) rotate(360deg); }
}

@keyframes wcTitleBoom {
  from { transform: scale(1) rotateX(0deg); }
  to { transform: scale(1.08) rotateX(15deg); }
}

@keyframes wcTitleShake {
  0%,
  100% { translate: 0 0; }
  25% { translate: -5px 0; }
  50% { translate: 5px 0; }
  75% { translate: -5px 0; }
}

@keyframes pulseText {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

@keyframes flashBoom {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.4);
    opacity: 1;
  }
}

@keyframes fireworkMove {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.2); }
}

@keyframes wcParticleUp {
  from {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }

  20% { opacity: 1; }

  to {
    transform: translateY(-120vh) scale(3);
    opacity: 0;
  }
}

@keyframes explode {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  30% { opacity: 1; }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* GOD-TIER CINEMATIC EFFECT */
.ultra-worldcup {
  position: relative;
  z-index: 1;
  width: min(100% - 16px, 1720px);
  min-height: min(900px, 94vh);
  margin: 0 auto 12px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid rgba(0, 194, 255, 0.52);
  border-radius: 18px;
  background:
    radial-gradient(circle at center, #001233 0%, #000814 40%, #000 100%);
  box-shadow:
    0 0 28px rgba(0, 194, 255, 0.55),
    0 0 110px rgba(245, 183, 0, 0.2);
  isolation: isolate;
}

.gold-aura {
  position: absolute;
  z-index: 1;
  width: 1200px;
  height: 1200px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 183, 0, 0.7) 0%, rgba(255, 183, 0, 0.25) 30%, rgba(0, 194, 255, 0.15) 60%, transparent 75%);
  filter: blur(80px);
  animation: auraPulse 4s infinite alternate ease-in-out;
}

.energy-ring {
  position: absolute;
  z-index: 3;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  border: 4px solid rgba(255, 183, 0, 0.4);
  box-shadow:
    0 0 40px #f5b700,
    inset 0 0 40px #00c2ff;
  animation: ringRotate 10s linear infinite;
}

.mega-text {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.world {
  font-family: Anton, "Arial Black", sans-serif;
  font-size: clamp(42px, 7vw, 90px);
  letter-spacing: 0.13em;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  text-shadow:
    0 0 20px #fff,
    0 0 40px #00c2ff,
    0 0 80px #00c2ff;
  animation: worldShake 3s infinite;
}

.year {
  font-family: Anton, "Arial Black", sans-serif;
  font-size: clamp(120px, 20vw, 260px);
  line-height: 0.9;
  font-weight: 900;
  background:
    linear-gradient(180deg, #ffffff 0%, #ffe066 20%, #f5b700 50%, #ff8800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 30px #f5b700,
    0 0 60px #f5b700,
    0 0 120px #ff8800,
    0 0 200px #00c2ff;
  animation:
    boom2026 2s infinite alternate ease-in-out,
    megaGlow 1.5s infinite alternate;
}

.firework {
  position: absolute;
  z-index: 2;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 183, 0, 0.5), transparent 70%);
  filter: blur(20px);
  animation: godExplode 3s infinite;
}

.fw1 { top: 10%; left: 10%; }
.fw2 { top: 20%; right: 10%; animation-delay: 1s; }
.fw3 { bottom: 10%; left: 20%; animation-delay: 2s; }
.fw4 { bottom: 20%; right: 20%; animation-delay: 3s; }

.lightning {
  position: absolute;
  z-index: 4;
  width: 8px;
  height: 500px;
  background:
    linear-gradient(180deg, transparent, #00c2ff, #fff, #f5b700, transparent);
  filter: blur(4px);
  box-shadow:
    0 0 30px #00c2ff,
    0 0 60px #fff;
  animation: lightningFlash 0.4s infinite;
}

.lightning1 {
  left: 20%;
  top: 0;
}

.lightning2 {
  right: 20%;
  top: 0;
  animation-delay: 0.2s;
}

.mega-particles {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.mega-particles span {
  position: absolute;
  bottom: -12vh;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f5b700;
  box-shadow:
    0 0 20px #f5b700,
    0 0 40px #ffae00;
  animation: particleFly linear infinite;
}

.mega-particles span:nth-child(1) { left: 5%; animation-duration: 3s; }
.mega-particles span:nth-child(2) { left: 15%; animation-duration: 5s; animation-delay: -1s; }
.mega-particles span:nth-child(3) { left: 25%; animation-duration: 4s; animation-delay: -2s; }
.mega-particles span:nth-child(4) { left: 35%; animation-duration: 6s; animation-delay: -3s; }
.mega-particles span:nth-child(5) { left: 45%; animation-duration: 3s; animation-delay: -1.5s; }
.mega-particles span:nth-child(6) { left: 55%; animation-duration: 5s; animation-delay: -2.5s; }
.mega-particles span:nth-child(7) { left: 65%; animation-duration: 4s; animation-delay: -0.5s; }
.mega-particles span:nth-child(8) { left: 75%; animation-duration: 6s; animation-delay: -4s; }
.mega-particles span:nth-child(9) { left: 85%; animation-duration: 3s; animation-delay: -2s; }
.mega-particles span:nth-child(10) { left: 95%; animation-duration: 5s; animation-delay: -1s; }
.mega-particles span:nth-child(11) { left: 50%; animation-duration: 7s; animation-delay: -5s; }
.mega-particles span:nth-child(12) { left: 70%; animation-duration: 4s; animation-delay: -3.5s; }

.mega-bonus {
  position: absolute;
  z-index: 9;
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 900;
  color: #f5b700;
  text-shadow:
    0 0 20px #f5b700,
    0 0 40px #ff8800;
  animation: bonusBlast 5s linear infinite;
}

.mega-bonus.b1 { left: 10%; bottom: -100px; }
.mega-bonus.b2 { left: 35%; bottom: -100px; animation-delay: 1s; }
.mega-bonus.b3 { left: 60%; bottom: -100px; animation-delay: 2s; }
.mega-bonus.b4 { left: 80%; bottom: -100px; animation-delay: 3s; }

@keyframes auraPulse {
  from {
    transform: scale(1);
    opacity: 0.7;
  }

  to {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes boom2026 {
  from { transform: scale(1) rotateX(0deg); }
  to { transform: scale(1.12) rotateX(15deg); }
}

@keyframes megaGlow {
  from { filter: drop-shadow(0 0 20px #00c2ff); }
  to { filter: drop-shadow(0 0 80px #ffae00); }
}

@keyframes godExplode {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  30% { opacity: 1; }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes lightningFlash {
  0%,
  100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes particleFly {
  from {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }

  20% { opacity: 1; }

  to {
    transform: translateY(-120vh) scale(3);
    opacity: 0;
  }
}

@keyframes bonusBlast {
  from {
    transform: translateY(0) scale(0.4) rotate(0deg);
    opacity: 0;
  }

  15% { opacity: 1; }

  to {
    transform: translateY(-1200px) scale(2) rotate(720deg);
    opacity: 0;
  }
}

@keyframes worldShake {
  0%,
  100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
}

/* REAL WORLD CUP 2026 PREMIUM EFFECT */
.wc2026-wrap {
  position: relative;
  z-index: 1;
  width: min(100% - 16px, 1720px);
  min-height: min(820px, 92vh);
  margin: 0 auto 12px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 194, 255, 0.52);
  border-radius: 18px;
  background:
    radial-gradient(circle at center, #0b1f4d 0%, #020b1f 70%);
  box-shadow:
    0 0 28px rgba(0, 194, 255, 0.52),
    0 0 110px rgba(245, 183, 0, 0.18);
  isolation: isolate;
}

.wc2026-wrap .bg-light {
  position: absolute;
  z-index: 1;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 194, 255, 0.45), rgba(255, 183, 0, 0.25), transparent 70%);
  filter: blur(40px);
  animation: pulseBg 3s infinite alternate;
}

.wc2026-wrap .center-box {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 28px 16px;
}

.wc2026-wrap .top-text {
  margin-bottom: 20px;
  color: #fff;
  font-family: Oswald, Inter, sans-serif;
  font-size: clamp(12px, 1.6vw, 18px);
  font-weight: 900;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-shadow:
    0 0 10px #00c2ff,
    0 0 20px #00c2ff;
}

.wc2026-wrap .main-title {
  margin: 0;
  color: #fff;
  font-family: Anton, "Arial Black", sans-serif;
  font-size: clamp(70px, 10vw, 130px);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow:
    0 0 10px #fff,
    0 0 30px #00c2ff,
    0 0 60px #00c2ff,
    0 0 120px #f5b700;
  animation:
    titleZoomReal 2s infinite alternate,
    titleShakeReal 4s infinite;
}

.wc2026-wrap .main-title span {
  display: block;
  margin-top: 20px;
  font-size: clamp(100px, 13vw, 170px);
  background:
    linear-gradient(180deg, #fff, #ffe066, #f5b700, #ff8800);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 20px #f5b700,
    0 0 40px #f5b700,
    0 0 100px #ff8800;
  animation: goldGlowReal 1s infinite alternate;
}

.wc2026-wrap .hero-bet-btn {
  margin-top: 40px;
  padding: 20px 70px;
  border: 0;
  border-radius: 999px;
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 900;
  color: #000;
  cursor: pointer;
  background:
    linear-gradient(90deg, #ffe066, #f5b700, #ff8800);
  box-shadow:
    0 0 20px #f5b700,
    0 0 50px #ffae00,
    0 0 100px #ff8800;
  animation: btnPulseReal 1.5s infinite alternate;
}

.wc2026-wrap .firework {
  position: absolute;
  z-index: 2;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 183, 0, 0.6), transparent 70%);
  filter: blur(20px);
  animation: explodeReal 2.5s infinite;
}

.wc2026-wrap .fire1 {
  top: 5%;
  left: 10%;
}

.wc2026-wrap .fire2 {
  top: 10%;
  right: 10%;
  animation-delay: 1s;
}

.wc2026-wrap .fire3 {
  bottom: 10%;
  left: 40%;
  animation-delay: 2s;
}

@keyframes pulseBg {
  from {
    transform: scale(1);
    opacity: 0.6;
  }

  to {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes titleZoomReal {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@keyframes titleShakeReal {
  0%,
  100% { translate: 0 0; }
  25% { translate: -4px 0; }
  50% { translate: 4px 0; }
  75% { translate: -4px 0; }
}

@keyframes goldGlowReal {
  from { filter: drop-shadow(0 0 10px #f5b700); }
  to { filter: drop-shadow(0 0 40px #ff8800); }
}

@keyframes btnPulseReal {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes explodeReal {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  30% { opacity: 1; }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* WORLD CUP 2026 WELCOME + GIFT EFFECT */
.welcome-scene {
  position: relative;
  z-index: 1;
  width: min(100% - 16px, 1720px);
  min-height: min(860px, 92vh);
  margin: 0 auto 12px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 194, 255, 0.52);
  border-radius: 18px;
  background:
    radial-gradient(circle at center, #0a1f52 0%, #020b1f 70%);
  box-shadow:
    0 0 28px rgba(0, 194, 255, 0.52),
    0 0 110px rgba(245, 183, 0, 0.2);
  isolation: isolate;
}

.welcome-light {
  position: absolute;
  z-index: 1;
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 194, 255, 0.5), rgba(255, 183, 0, 0.3), transparent 70%);
  filter: blur(50px);
  opacity: 0.72;
  animation: welcomeLightPulse 3s infinite alternate;
}

.welcome-content {
  position: relative;
  z-index: 20;
  text-align: center;
  padding: 24px 16px 160px;
}

.welcome-text {
  margin-bottom: 20px;
  color: #00c2ff;
  font-family: Oswald, Inter, sans-serif;
  font-size: clamp(18px, 2.6vw, 28px);
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow:
    0 0 10px #00c2ff,
    0 0 30px #00c2ff;
  animation: welcomeBlinkText 1s infinite alternate;
}

.welcome-title {
  color: #fff;
  font-family: Anton, "Arial Black", sans-serif;
  font-size: clamp(70px, 10vw, 120px);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow:
    0 0 20px #fff,
    0 0 40px #00c2ff,
    0 0 100px #f5b700;
  animation: welcomeTitleMove 2s infinite alternate;
}

.welcome-title span {
  display: block;
  margin-top: 10px;
  font-size: clamp(110px, 14vw, 180px);
  background:
    linear-gradient(180deg, #fff, #ffe066, #f5b700, #ff8800);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 20px #f5b700,
    0 0 50px #ff8800;
  animation: welcomeGoldGlow 1s infinite alternate;
}

.sub-text {
  margin-top: 20px;
  color: #fff;
  font-family: Oswald, Inter, sans-serif;
  font-size: clamp(16px, 2.1vw, 24px);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 10px #00c2ff;
}

.gift-btn {
  margin-top: 40px;
  padding: 20px 60px;
  border: 0;
  border-radius: 999px;
  color: #000;
  cursor: pointer;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
  text-transform: uppercase;
  background:
    linear-gradient(90deg, #ffe066, #f5b700, #ff8800);
  box-shadow:
    0 0 20px #f5b700,
    0 0 60px #ff8800;
  animation: giftBtnBoom 1s infinite alternate;
}

.gift-box {
  position: absolute;
  bottom: 100px;
  z-index: 15;
  font-size: 120px;
  filter:
    drop-shadow(0 0 24px rgba(245, 183, 0, 0.9))
    drop-shadow(0 0 44px rgba(0, 194, 255, 0.35));
  animation:
    giftShake 1s infinite,
    giftOpen 4s infinite;
}

.welcome-bonus {
  position: absolute;
  bottom: 100px;
  z-index: 10;
  color: #f5b700;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 900;
  opacity: 0;
  text-shadow:
    0 0 20px #f5b700,
    0 0 40px #ff8800;
  animation: welcomeBonusFly 5s linear infinite;
}

.welcome-bonus1 { left: 30%; }
.welcome-bonus2 { left: 40%; animation-delay: 1s; }
.welcome-bonus3 { left: 50%; animation-delay: 2s; }
.welcome-bonus4 { left: 60%; animation-delay: 3s; }
.welcome-bonus5 { left: 70%; animation-delay: 4s; }

.welcome-firework {
  position: absolute;
  z-index: 2;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 183, 0, 0.6), transparent 70%);
  filter: blur(20px);
  animation: welcomeExplode 3s infinite;
}

.welcome-fw1 {
  top: 10%;
  left: 10%;
}

.welcome-fw2 {
  top: 15%;
  right: 10%;
  animation-delay: 1s;
}

.welcome-fw3 {
  bottom: 15%;
  left: 40%;
  animation-delay: 2s;
}

@keyframes welcomeLightPulse {
  from {
    transform: scale(1);
    opacity: 0.6;
  }

  to {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes welcomeTitleMove {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@keyframes welcomeGoldGlow {
  from { filter: drop-shadow(0 0 10px #f5b700); }
  to { filter: drop-shadow(0 0 50px #ff8800); }
}

@keyframes welcomeBlinkText {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

@keyframes giftBtnBoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes giftShake {
  0%,
  100% { rotate: 0deg; }
  25% { rotate: -6deg; }
  50% { rotate: 6deg; }
  75% { rotate: -6deg; }
}

@keyframes giftOpen {
  0%,
  20% { scale: 1; }
  40% { scale: 1.3; }
  60%,
  100% { scale: 1; }
}

@keyframes welcomeBonusFly {
  0% {
    transform: translateY(0) scale(0.2) rotate(0deg);
    opacity: 0;
  }

  10% { opacity: 1; }

  100% {
    transform: translateY(-1000px) scale(2) rotate(720deg);
    opacity: 0;
  }
}

@keyframes welcomeExplode {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  30% { opacity: 1; }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* WORLD CUP 2026 NEXT LEVEL EFFECTS */
.gold-laser {
  position: absolute;
  inset: 0;
  z-index: 18;
  overflow: hidden;
  pointer-events: none;
}

.gold-laser::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 160%;
  height: 4px;
  background:
    linear-gradient(90deg, transparent, #ffe066, #fff, #f5b700, transparent);
  box-shadow:
    0 0 20px #f5b700,
    0 0 40px #ffae00;
  transform: rotate(-10deg);
  animation: laserMove 3s infinite linear;
}

@keyframes laserMove {
  from { top: -40%; }
  to { top: 140%; }
}

.shockwave {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 55%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 6px solid rgba(255, 183, 0, 0.28);
  box-shadow:
    0 0 14px rgba(245, 183, 0, 0.5),
    0 0 32px rgba(0, 194, 255, 0.28);
  translate: -50% -50%;
  animation: shockBoom 3s infinite;
}

.shockwave2 {
  animation-delay: 1.4s;
}

@keyframes shockBoom {
  0% {
    transform: scale(0.2);
    opacity: 1;
  }

  100% {
    transform: scale(4.8);
    opacity: 0;
  }
}

.confetti {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}

.confetti span {
  position: absolute;
  top: -100px;
  width: 12px;
  height: 22px;
  background: #f5b700;
  box-shadow: 0 0 10px #f5b700;
  animation: confettiFall linear infinite;
}

.confetti span:nth-child(1) { left: 5%; animation-duration: 5s; }
.confetti span:nth-child(2) { left: 15%; animation-duration: 7s; animation-delay: -2s; }
.confetti span:nth-child(3) { left: 25%; animation-duration: 6s; animation-delay: -4s; }
.confetti span:nth-child(4) { left: 35%; animation-duration: 8s; animation-delay: -1s; }
.confetti span:nth-child(5) { left: 45%; animation-duration: 5s; animation-delay: -3s; }
.confetti span:nth-child(6) { left: 55%; animation-duration: 7s; animation-delay: -5s; }
.confetti span:nth-child(7) { left: 65%; animation-duration: 6s; animation-delay: -2.5s; }
.confetti span:nth-child(8) { left: 75%; animation-duration: 8s; animation-delay: -6s; }
.confetti span:nth-child(9) { left: 85%; animation-duration: 5s; animation-delay: -1.5s; }
.confetti span:nth-child(10) { left: 95%; animation-duration: 7s; animation-delay: -4.5s; }

@keyframes confettiFall {
  from {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }

  10% { opacity: 1; }

  to {
    transform: translateY(120vh) rotate(720deg);
    opacity: 0;
  }
}

.electric-border {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
}

.electric-border::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 30px;
  background:
    linear-gradient(90deg, #00c2ff, #fff, #f5b700, #ff8800, #00c2ff);
  background-size: 400% 400%;
  filter: blur(10px);
  animation: electricMove 3s linear infinite;
}

@keyframes electricMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

.spotlight {
  position: absolute;
  z-index: 3;
  width: 500px;
  height: 1200px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(0, 194, 255, 0.15), transparent);
  filter: blur(30px);
  transform: rotate(25deg);
  animation: spotMove 6s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes spotMove {
  from {
    left: -10%;
    top: -20%;
  }

  to {
    left: 80%;
    top: -10%;
  }
}

.welcome-title .energy-text {
  position: relative;
  text-shadow:
    0 0 20px #fff,
    0 0 40px #00c2ff,
    0 0 80px #f5b700,
    0 0 160px #ff8800;
  animation:
    energyBoom 1.5s infinite alternate,
    textShake 4s infinite;
}

.welcome-title .energy-text::after {
  content: "2026";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: #00c2ff;
  filter: blur(30px);
  opacity: 0.7;
  animation: ghostPulse 1s infinite alternate;
}

@keyframes energyBoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes ghostPulse {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

@keyframes textShake {
  0%,
  100% { translate: 0 0; }
  25% { translate: -4px 0; }
  50% { translate: 4px 0; }
  75% { translate: -4px 0; }
}

.gold-explosion {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 58%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f5b700;
  box-shadow:
    0 0 20px #f5b700,
    0 0 50px #ff8800;
  animation: explodeGold 4s infinite;
}

.gx1 { --tx: -320px; --ty: -220px; animation-delay: 0s; }
.gx2 { --tx: 280px; --ty: -260px; animation-delay: 0.6s; }
.gx3 { --tx: -240px; --ty: 190px; animation-delay: 1.2s; }
.gx4 { --tx: 320px; --ty: 210px; animation-delay: 1.8s; }
.gx5 { --tx: 40px; --ty: -330px; animation-delay: 2.4s; }
.gx6 { --tx: -20px; --ty: 300px; animation-delay: 3s; }

@keyframes explodeGold {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 1;
  }

  100% {
    transform: scale(2) translate(var(--tx), var(--ty));
    opacity: 0;
  }
}

.cinematic-flash {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
  mix-blend-mode: screen;
  animation: cinemaFlash 5s infinite;
}

@keyframes cinemaFlash {
  0%,
  100% { opacity: 0; }
  10% { opacity: 0.34; }
  20% { opacity: 0; }
  30% { opacity: 0.42; }
  40% { opacity: 0; }
}

/* WC 2026 MEGA CELEBRATION SECTION */
.wc-champion {
  position: relative;
  z-index: 1;
  width: min(100% - 16px, 1720px);
  min-height: min(880px, 92vh);
  margin: 0 auto 12px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 194, 255, 0.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at center, #09204d 0%, #020816 60%, #000 100%);
  box-shadow:
    0 0 24px rgba(0, 194, 255, 0.42),
    0 0 78px rgba(245, 183, 0, 0.16);
  isolation: isolate;
}

.champion-stadium-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    url("../assets/fifa-hero.jpg") center/cover;
  opacity: 0.2;
  transform: scale(1.2);
  animation: championStadiumMove 12s infinite alternate ease-in-out;
}

.champion-content {
  position: relative;
  z-index: 20;
  text-align: center;
  padding: 36px 16px;
}

.champion-top-title {
  color: #fff;
  font-family: Oswald, Inter, sans-serif;
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow:
    0 0 20px #fff,
    0 0 40px #00c2ff;
}

.champion-year-title {
  font-family: Anton, "Arial Black", sans-serif;
  font-size: clamp(90px, 15vw, 180px);
  line-height: 0.9;
  font-weight: 900;
  background:
    linear-gradient(180deg, #fff, #ffe066, #f5b700, #ff8800);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 30px #f5b700,
    0 0 80px #ff8800;
  animation:
    championGlowYear 1.6s infinite alternate,
    championYearFloat 3s infinite alternate;
}

.champion-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 14px 40px;
  border-radius: 999px;
  color: #fff;
  font-family: Oswald, Inter, sans-serif;
  font-size: clamp(18px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background:
    linear-gradient(90deg, #0a8f3d, #1db954);
  box-shadow:
    0 0 20px #1db954,
    0 0 50px rgba(29, 185, 84, 0.72);
}

.champion-trophy {
  display: block;
  width: clamp(110px, 13vw, 180px);
  height: auto;
  margin: 35px auto 0;
  filter:
    drop-shadow(0 0 30px #f5b700)
    drop-shadow(0 0 80px #ffae00);
  animation:
    championTrophyFloat 3s infinite ease-in-out,
    championTrophyGlow 1.8s infinite alternate;
}

.champion-crowd-row {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 30px);
  margin-top: 40px;
}

.champion-fan {
  font-size: clamp(36px, 5vw, 60px);
  animation: championFanJump 1.4s infinite alternate;
}

.champion-fan2 { animation-delay: 0.2s; }
.champion-fan3 { animation-delay: 0.4s; }
.champion-fan4 { animation-delay: 0.6s; }
.champion-fan5 { animation-delay: 0.8s; }

.champion-bonus-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

.champion-bonus {
  padding: 14px 26px;
  border-radius: 999px;
  color: #000;
  font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 900;
  background:
    linear-gradient(90deg, #ffe066, #f5b700);
  box-shadow: 0 0 20px #f5b700;
  animation: championBonusPulse 1.4s infinite alternate;
}

.claim-btn {
  margin-top: 40px;
  padding: 22px 70px;
  border: 0;
  border-radius: 999px;
  color: #000;
  cursor: pointer;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 900;
  text-transform: uppercase;
  background:
    linear-gradient(90deg, #ffe066, #f5b700, #ff8800);
  box-shadow:
    0 0 30px #f5b700,
    0 0 80px #ff8800;
  transition: 0.3s;
}

.claim-btn:hover {
  transform:
    scale(1.08)
    translateY(-4px);
  box-shadow:
    0 0 50px #f5b700,
    0 0 120px #ff8800;
}

.champion-fireworks {
  position: absolute;
  z-index: 2;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 183, 0, 0.6), transparent 70%);
  filter: blur(20px);
  animation: championExplode 3.6s infinite;
}

.champion-fire-left {
  top: 5%;
  left: 5%;
}

.champion-fire-right {
  top: 10%;
  right: 5%;
  animation-delay: 1s;
}

.champion-fire-center {
  top: 0;
  left: 40%;
  animation-delay: 2s;
}

.champion-laser {
  position: absolute;
  z-index: 3;
  width: 6px;
  height: 100%;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, #00c2ff, #fff, #f5b700, transparent);
  filter: blur(4px);
  opacity: 0.7;
  animation: championLaserMove 4s infinite alternate;
}

.champion-laser1 { left: 20%; }
.champion-laser2 { right: 20%; animation-delay: 2s; }

.champion-confetti-wrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.champion-confetti-wrap span {
  position: absolute;
  top: -100px;
  width: 14px;
  height: 24px;
  background: #f5b700;
  animation: championConfettiFall linear infinite;
}

.champion-confetti-wrap span:nth-child(1) { left: 10%; animation-duration: 5s; }
.champion-confetti-wrap span:nth-child(2) { left: 20%; animation-duration: 7s; animation-delay: -2s; }
.champion-confetti-wrap span:nth-child(3) { left: 30%; animation-duration: 6s; animation-delay: -4s; }
.champion-confetti-wrap span:nth-child(4) { left: 40%; animation-duration: 8s; animation-delay: -1s; }
.champion-confetti-wrap span:nth-child(5) { left: 60%; animation-duration: 5s; animation-delay: -3s; }
.champion-confetti-wrap span:nth-child(6) { left: 70%; animation-duration: 7s; animation-delay: -5s; }
.champion-confetti-wrap span:nth-child(7) { left: 80%; animation-duration: 6s; animation-delay: -2.5s; }
.champion-confetti-wrap span:nth-child(8) { left: 90%; animation-duration: 8s; animation-delay: -6s; }

@keyframes championStadiumMove {
  from {
    transform: scale(1.15) translateY(0);
  }

  to {
    transform: scale(1.25) translateY(-10px);
  }
}

@keyframes championGlowYear {
  from { filter: drop-shadow(0 0 10px #f5b700); }
  to { filter: drop-shadow(0 0 40px #ff8800); }
}

@keyframes championYearFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

@keyframes championTrophyFloat {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes championTrophyGlow {
  from { filter: drop-shadow(0 0 20px #f5b700); }
  to { filter: drop-shadow(0 0 70px #ff8800); }
}

@keyframes championFanJump {
  from { transform: translateY(0); }
  to { transform: translateY(-16px); }
}

@keyframes championBonusPulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes championExplode {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  30% { opacity: 1; }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes championLaserMove {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

@keyframes championConfettiFall {
  from {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }

  10% { opacity: 1; }

  to {
    transform: translateY(120vh) rotate(720deg);
    opacity: 0;
  }
}

@media (max-width: 820px) {
  html,
  body,
  .premium-page {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
  }

  .premium-page::before,
  .premium-page::after {
    display: none !important;
  }

  .clean-page,
  .welcome-scene,
  .wc-champion,
  .showcase-media,
  .audio-card,
  .site-footer {
    transform: translateZ(0);
  }

  .clean-page {
    padding-top: 4px;
  }

  .wc-hero {
    width: calc(100% - 16px);
    min-height: 76vh;
    border-radius: 12px;
  }

  .ultra-worldcup {
    width: calc(100% - 16px);
    min-height: 76vh;
    border-radius: 12px;
  }

  .wc2026-wrap {
    width: calc(100% - 16px);
    min-height: 76vh;
    border-radius: 12px;
  }

  .wc2026-wrap .top-text {
    letter-spacing: 0.24em;
  }

  .wc2026-wrap .main-title {
    font-size: 70px;
  }

  .wc2026-wrap .main-title span {
    font-size: 100px;
  }

  .wc2026-wrap .hero-bet-btn {
    padding: 16px 40px;
    font-size: 20px;
  }

  .wc2026-wrap .bg-light {
    width: 620px;
    height: 620px;
  }

  .wc2026-wrap .firework {
    width: 240px;
    height: 240px;
  }

  .welcome-scene {
    width: calc(100% - 16px);
    min-height: 76vh;
    border-radius: 12px;
  }

  .wc-champion {
    width: calc(100% - 16px);
    min-height: auto;
    border-radius: 12px;
  }

  .champion-content {
    padding: 38px 14px;
  }

  .champion-top-title {
    font-size: 24px;
    letter-spacing: 0.08em;
  }

  .champion-year-title {
    font-size: 90px;
    animation-duration: 3s;
  }

  .champion-badge {
    padding: 10px 24px;
    font-size: 18px;
  }

  .champion-trophy {
    width: 110px;
    margin-top: 26px;
    animation-duration: 4s;
  }

  .champion-crowd-row {
    gap: 14px;
    margin-top: 26px;
  }

  .champion-fan {
    font-size: 36px;
    animation-duration: 2s;
  }

  .champion-bonus-wrap {
    gap: 10px;
    margin-top: 28px;
  }

  .champion-bonus {
    padding: 10px 16px;
    font-size: 16px;
    animation: none;
  }

  .claim-btn {
    margin-top: 28px;
    padding: 16px 36px;
    font-size: 18px;
  }

  .champion-fireworks,
  .champion-laser,
  .champion-confetti-wrap {
    display: none !important;
  }

  .welcome-light {
    width: 460px;
    height: 460px;
    filter: blur(24px);
    opacity: 0.56;
    animation-duration: 5s;
  }

  .welcome-content {
    padding-bottom: 128px;
  }

  .welcome-text {
    letter-spacing: 0.16em;
  }

  .welcome-title {
    font-size: 70px;
  }

  .welcome-title span {
    font-size: 110px;
  }

  .sub-text {
    letter-spacing: 0.12em;
  }

  .gift-btn {
    padding: 16px 36px;
    font-size: 18px;
  }

  .gift-box {
    bottom: 58px;
    font-size: 74px;
    animation: giftShake 1.8s infinite;
  }

  .welcome-bonus {
    display: none;
  }

  .welcome-bonus1 { left: 8%; }
  .welcome-bonus2 { left: 22%; }
  .welcome-bonus3 { left: 42%; }
  .welcome-bonus4 { left: 58%; }
  .welcome-bonus5 { left: 72%; }

  .welcome-firework {
    display: none;
  }

  .gold-laser,
  .cinematic-flash,
  .shockwave,
  .confetti,
  .spotlight,
  .gold-explosion,
  .clean-particles,
  .firework-bg,
  .stadium-light {
    display: none !important;
  }

  .spotlight {
    width: 260px;
    height: 820px;
  }

  .confetti span {
    width: 8px;
    height: 16px;
  }

  .gold-explosion {
    width: 12px;
    height: 12px;
  }

  .welcome-title,
  .welcome-title span,
  .welcome-title .energy-text,
  .audio-copy strong,
  .clean-page .ultra-title,
  .live-badge,
  .audio-equalizer span {
    animation-duration: 2.8s;
  }

  .welcome-title .energy-text::after {
    display: none;
  }

  .welcome-scene,
  .wc-champion,
  .clean-page .showcase-media,
  .audio-card,
  .site-footer {
    box-shadow:
      0 0 12px rgba(0, 194, 255, 0.28),
      0 0 24px rgba(245, 183, 0, 0.12);
  }

  .clean-page .premium-card::after,
  .electric-border::before {
    display: none;
  }

  .clean-page .showcase-media:hover,
  .clean-page .premium-card:hover,
  .clean-page .ultra-btn:hover {
    transform: none;
  }

  .clean-page .showcase-media img,
  .clean-page .showcase-media:hover img {
    filter: saturate(1.05) contrast(1.02);
  }

  .gx1 { --tx: -160px; --ty: -180px; }
  .gx2 { --tx: 150px; --ty: -190px; }
  .gx3 { --tx: -140px; --ty: 130px; }
  .gx4 { --tx: 160px; --ty: 140px; }
  .gx5 { --tx: 24px; --ty: -220px; }
  .gx6 { --tx: -16px; --ty: 190px; }

  .world {
    font-size: 42px;
    letter-spacing: 0.08em;
  }

  .year {
    font-size: 120px;
  }

  .energy-ring {
    width: 400px;
    height: 400px;
  }

  .gold-aura {
    width: 600px;
    height: 600px;
  }

  .firework {
    width: 280px;
    height: 280px;
  }

  .lightning {
    height: 360px;
  }

  .mega-bonus {
    display: none;
  }

  .wc-title {
    font-size: clamp(112px, 32vw, 150px);
    letter-spacing: 0.02em;
  }

  .wc-subtitle {
    max-width: 86%;
    letter-spacing: 0.14em;
  }

  .flash-light {
    width: 520px;
    height: 520px;
  }

  .explosion {
    width: 260px;
    height: 260px;
  }

  .clean-page .new-showcase {
    grid-template-columns: 1fr;
    width: calc(100% - 16px);
  }

  .clean-page .showcase-large,
  .clean-page .showcase-tall,
  .clean-page .showcase-media {
    min-height: auto;
  }

  .clean-page .showcase-large {
    grid-row: span 1;
  }

  .clean-page .showcase-media img {
    height: auto;
    min-height: 0;
  }

  .video-section {
    width: calc(100% - 16px);
  }

  .audio-section {
    width: calc(100% - 16px);
  }

  .audio-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .bonus-explode {
    display: none;
  }
}

/* REALISTIC SHARP PREMIUM OVERRIDES */
.real-hero {
  min-height: min(780px, 88vh);
  background:
    linear-gradient(90deg, rgba(2, 8, 22, 0.92) 0%, rgba(2, 8, 22, 0.54) 46%, rgba(2, 8, 22, 0.74) 100%),
    url("../assets/wc2026-celebration-panel.png") center/cover;
}

.real-hero .welcome-light,
.real-hero .shockwave,
.real-hero .welcome-firework,
.real-hero .cinematic-flash,
.real-hero .gold-explosion,
.real-hero .welcome-bonus,
.real-hero .confetti {
  display: none !important;
}

.real-hero .welcome-content {
  z-index: 5;
  width: min(94%, 980px);
  padding: 56px 20px 220px;
  text-align: left;
}

.real-hero .welcome-text {
  color: #f5b700;
  font-size: clamp(14px, 1.7vw, 22px);
  letter-spacing: 0.18em;
  text-shadow:
    0 0 12px rgba(245, 183, 0, 0.72),
    0 0 24px rgba(0, 194, 255, 0.28);
}

.real-hero .welcome-title {
  max-width: 760px;
  color: #fff;
  font-size: clamp(76px, 10vw, 148px);
  line-height: 0.82;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.85),
    0 0 18px rgba(255, 255, 255, 0.5),
    0 0 34px rgba(0, 194, 255, 0.62);
  animation: none;
}

.real-hero .welcome-title span {
  color: #f5b700;
  background:
    linear-gradient(180deg, #fff7bd 0%, #f5b700 44%, #ff8a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 5px 0 rgba(0, 0, 0, 0.78),
    0 0 22px rgba(245, 183, 0, 0.72),
    0 0 44px rgba(255, 136, 0, 0.48);
  filter: none;
  animation: none;
}

.real-hero .welcome-title .energy-text::after {
  display: none;
}

.real-hero .sub-text {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(15px, 1.6vw, 22px);
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.82);
}

.real-hero .gift-btn {
  margin-top: 30px;
  box-shadow:
    0 0 18px rgba(245, 183, 0, 0.72),
    0 0 44px rgba(255, 136, 0, 0.4);
  animation: none;
}

.hero-trophy-real {
  position: absolute;
  right: clamp(20px, 8vw, 130px);
  bottom: clamp(26px, 7vw, 88px);
  z-index: 4;
  width: clamp(130px, 20vw, 280px);
  height: auto;
  filter:
    drop-shadow(0 0 18px rgba(245, 183, 0, 0.82))
    drop-shadow(0 0 44px rgba(0, 194, 255, 0.28));
}

.wc-champion {
  min-height: auto;
  padding: 44px 0;
}

.champion-stadium-bg {
  opacity: 0.18;
}

.champion-content {
  width: min(94%, 1100px);
  border: 1px solid rgba(0, 194, 255, 0.32);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(5, 12, 28, 0.86), rgba(3, 8, 18, 0.68));
  box-shadow:
    0 0 18px rgba(0, 194, 255, 0.24),
    0 0 34px rgba(245, 183, 0, 0.14);
}

.champion-top-title,
.champion-year-title,
.champion-badge {
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.72),
    0 0 18px rgba(245, 183, 0, 0.44);
}

.champion-trophy {
  filter:
    drop-shadow(0 0 18px rgba(245, 183, 0, 0.78))
    drop-shadow(0 0 28px rgba(255, 136, 0, 0.34));
}

.champion-crowd-row {
  flex-wrap: wrap;
}

.champion-fan {
  min-width: 92px;
  padding: 10px 16px;
  border: 1px solid rgba(245, 183, 0, 0.34);
  border-radius: 999px;
  background: rgba(2, 8, 22, 0.7);
  color: #fff;
  font-family: Oswald, Inter, sans-serif;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 900;
  text-transform: uppercase;
  animation: none;
  box-shadow: 0 0 14px rgba(0, 194, 255, 0.16);
}

@media (max-width: 820px) {
  .real-hero {
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(2, 8, 22, 0.86) 0%, rgba(2, 8, 22, 0.58) 44%, rgba(2, 8, 22, 0.9) 100%),
      url("../assets/wc2026-celebration-panel.png") center top / cover;
  }

  .real-hero .welcome-content {
    width: 100%;
    padding: 40px 18px 170px;
    text-align: left;
  }

  .real-hero .welcome-title {
    font-size: 66px;
    text-shadow:
      0 3px 0 rgba(0, 0, 0, 0.86),
      0 0 14px rgba(255, 255, 255, 0.34);
  }

  .real-hero .welcome-title span {
    font-size: 100px;
    text-shadow:
      0 4px 0 rgba(0, 0, 0, 0.78),
      0 0 20px rgba(245, 183, 0, 0.62);
  }

  .hero-trophy-real {
    right: 22px;
    bottom: 26px;
    width: 132px;
  }

  .champion-content {
    padding: 30px 12px;
  }
}