/* =========================================================
   FAN PEAK — STYLE.CSS
   Stadium Energy × Matchday Experience
   ========================================================= */


/* =========================================================
   01 — ROOT
   ========================================================= */

:root{

  --navy-950:#020b1d;
  --navy-900:#06142d;
  --navy-850:#081a3a;
  --navy-800:#0a2148;

  --blue-700:#124dbe;
  --blue-600:#1766ed;
  --blue-500:#2d7cff;

  --green-700:#08733e;
  --green-600:#0b9953;
  --green-500:#19c86d;

  --lime:#a8f04b;
  --yellow:#ffd32f;

  --white:#ffffff;
  --off-white:#f5f8ff;

  --text:#07152f;
  --muted:#6c7890;

  --border:rgba(255,255,255,.13);

  --shadow:
  0 28px 80px
  rgba(2,13,36,.18);

  --radius-xl:42px;
  --radius-lg:30px;
  --radius-md:21px;

}


/* =========================================================
   02 — RESET
   ========================================================= */

*{

  box-sizing:border-box;

}


html{

  scroll-behavior:smooth;

}


body{

  margin:0;

  overflow-x:hidden;

  color:var(--text);

  background:#f3f7ff;

  font-family:
  "Cairo",
  Arial,
  sans-serif;

}


body.menu-open{

  overflow:hidden;

}


img{

  display:block;

  max-width:100%;

}


a{

  color:inherit;

  text-decoration:none;

}


button{

  font:inherit;

}


::selection{

  color:#fff;

  background:#1265e8;

}


/* =========================================================
   03 — REVEAL
   ========================================================= */

[data-reveal],
[data-reveal-stagger]{

  opacity:0;

  transform:
  translateY(35px);

  transition:

  opacity .8s ease,
  transform .8s ease;

}


[data-reveal].is-visible,
[data-reveal-stagger].is-visible{

  opacity:1;

  transform:none;

}


/* =========================================================
   04 — HEADER
   ========================================================= */

.site-header{

  position:absolute;

  z-index:1000;

  top:0;

  right:0;

  left:0;

  width:100%;

  padding:

  18px 5.5% 0;

}


.header-shell{

  display:flex;

  align-items:center;

  justify-content:space-between;

  width:min(1480px,100%);

  min-height:72px;

  margin-inline:auto;

  padding:

  8px 12px 8px 20px;

  color:#fff;

  background:

  rgba(3,16,43,.84);

  border:

  1px solid
  rgba(255,255,255,.15);

  border-radius:24px;

  box-shadow:

  0 20px 50px
  rgba(0,0,0,.18);

  backdrop-filter:

  blur(18px);

  -webkit-backdrop-filter:

  blur(18px);

}


/* =========================================================
   HEADER — BRANDS
   ========================================================= */

.header-brands{

  display:flex;

  align-items:center;

  gap:14px;

  flex:none;

}


/*
   لوجو FAN PEAK أزرق
   لذلك أخذ مساحة بيضاء ناعمة
*/

.fanpeak-brand{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  flex:none;

  width:150px;

  height:54px;

  padding:

  7px 18px;

  overflow:hidden;

  background:

  linear-gradient(
    145deg,
    #ffffff,
    #edf4ff
  );

  border:

  1px solid
  rgba(255,255,255,.85);

  border-radius:17px;

  box-shadow:

  inset 0 1px 0
  rgba(255,255,255,1),

  0 10px 25px
  rgba(0,0,0,.13);

}


.fanpeak-brand::after{

  content:"";

  position:absolute;

  right:12%;

  bottom:0;

  left:12%;

  height:2px;

  background:

  linear-gradient(
    90deg,
    transparent,
    #2070ed,
    transparent
  );

}


.fanpeak-brand img{

  width:100%;

  height:100%;

  object-fit:contain;

}


.header-divider{

  width:1px;

  height:35px;

  background:

  rgba(255,255,255,.24);

}


.parent-brand{

  display:flex;

  align-items:center;

  width:120px;

  height:38px;

}


.parent-brand img{

  width:100%;

  height:100%;

  object-fit:contain;

  filter:

  brightness(0)
  invert(1);

}


/* =========================================================
   HEADER — NAVIGATION
   ========================================================= */

.desktop-nav{

  display:flex;

  align-items:center;

  gap:31px;

}


.desktop-nav a{

  position:relative;

  color:

  rgba(255,255,255,.70);

  font-size:13px;

  font-weight:800;

  white-space:nowrap;

  transition:

  color .25s ease;

}


.desktop-nav a::after{

  content:"";

  position:absolute;

  right:0;

  bottom:-9px;

  width:0;

  height:2px;

  background:

  var(--lime);

  transition:

  width .25s ease;

}


.desktop-nav a:hover{

  color:#fff;

}


.desktop-nav a:hover::after{

  width:100%;

}


/* =========================================================
   HEADER — ACTIONS
   ========================================================= */

.header-actions{

  display:flex;

  align-items:center;

  gap:10px;

}


.back-worlds{

  display:flex;

  align-items:center;

  gap:8px;

  color:

  rgba(255,255,255,.66);

  font-size:12px;

  font-weight:800;

}


.back-worlds span{

  color:

  var(--lime);

  font-size:18px;

}


.header-shop{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:13px;

  min-height:50px;

  padding:

  0 23px;

  color:

  #071a3b;

  background:

  #fff;

  border-radius:16px;

  font-size:13px;

  font-weight:900;

  transition:

  transform .25s ease,
  box-shadow .25s ease;

}


.header-shop:hover{

  transform:

  translateY(-3px);

  box-shadow:

  0 15px 35px
  rgba(0,0,0,.20);

}


.header-shop span{

  font-size:25px;

  line-height:1;

}


/* =========================================================
   MOBILE BUTTON
   ========================================================= */

.nav-toggle{

  display:none;

  width:50px;

  height:50px;

  padding:0;

  cursor:pointer;

  background:

  rgba(255,255,255,.08);

  border:

  1px solid
  rgba(255,255,255,.17);

  border-radius:15px;

}


.nav-toggle span{

  display:block;

  width:20px;

  height:2px;

  margin:5px auto;

  background:#fff;

  border-radius:10px;

}


/* =========================================================
   05 — MOBILE NAV
   ========================================================= */

.mobile-nav{

  position:fixed;

  z-index:99999;

  inset:0;

  display:flex;

  flex-direction:column;

  padding:

  25px;

  overflow-y:auto;

  color:#fff;

  background:

  radial-gradient(
    circle at 100% 0%,
    rgba(36,112,255,.34),
    transparent 37%
  ),

  linear-gradient(
    145deg,
    #020b1d,
    #071b42 60%,
    #0b3b89
  );

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transform:

  translateY(-20px);

  transition:

  opacity .35s ease,
  visibility .35s ease,
  transform .35s ease;

}


.mobile-nav.is-open{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:none;

}


.mobile-nav__top{

  display:flex;

  align-items:center;

  justify-content:space-between;

}


.mobile-nav__close{

  display:grid;

  place-items:center;

  flex:none;

  width:66px;

  height:66px;

  padding:0;

  cursor:pointer;

  color:#fff;

  background:

  rgba(255,255,255,.07);

  border:

  1px solid
  rgba(255,255,255,.20);

  border-radius:20px;

  font-size:43px;

  font-weight:300;

  line-height:1;

}


.mobile-nav__brands{

  display:flex;

  align-items:center;

  gap:15px;

}


.mobile-nav__brands > span{

  width:1px;

  height:42px;

  background:

  rgba(255,255,255,.26);

}


/*
   خلفية فاتحة للوجو الأزرق
*/

.mobile-nav__fanpeak-logo{

  width:142px;

  height:58px;

  padding:

  8px 16px;

  object-fit:contain;

  background:

  linear-gradient(
    145deg,
    #fff,
    #edf4ff
  );

  border-radius:17px;

}


.mobile-nav__brands a{

  display:flex;

  align-items:center;

  width:105px;

  height:36px;

}


.mobile-nav__brands a img{

  width:100%;

  height:100%;

  object-fit:contain;

  filter:

  brightness(0)
  invert(1);

}


.mobile-nav__intro{

  margin-top:65px;

}


.mobile-nav__intro small{

  color:

  #63c9ff;

  font-size:12px;

  font-weight:900;

  letter-spacing:2px;

}


.mobile-nav__intro h2{

  margin:

  18px 0 0;

  font-size:

  clamp(36px,10vw,58px);

  line-height:1.25;

  font-weight:900;

}


.mobile-nav__intro h2 span{

  color:

  var(--lime);

}


.mobile-nav__links{

  display:grid;

  grid-template-columns:

  repeat(2,minmax(0,1fr));

  gap:11px;

  margin-top:40px;

}


.mobile-nav__links a{

  display:flex;

  align-items:center;

  gap:15px;

  min-height:104px;

  padding:17px;

  background:

  rgba(255,255,255,.065);

  border:

  1px solid
  rgba(255,255,255,.14);

  border-radius:19px;

}


.mobile-nav__links a > b{

  display:grid;

  place-items:center;

  flex:none;

  width:53px;

  height:53px;

  color:

  #06204a;

  background:

  var(--lime);

  border-radius:15px;

  font-size:13px;

}


.mobile-nav__links a > span{

  display:flex;

  flex-direction:column;

  font-size:15px;

  font-weight:900;

}


.mobile-nav__links small{

  margin-top:4px;

  color:

  rgba(255,255,255,.47);

  font-size:11px;

  font-weight:600;

}


.mobile-nav__bottom{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  margin-top:auto;

  padding-top:55px;

}


.mobile-nav__bottom > a:first-child{

  display:flex;

  align-items:center;

  gap:12px;

  color:

  rgba(255,255,255,.67);

  font-size:13px;

  font-weight:800;

}


.mobile-nav__bottom > a:first-child span{

  font-size:24px;

}


.mobile-nav__shop{

  display:grid;

  place-items:center;

  min-height:57px;

  padding:

  0 23px;

  color:

  #071a3b;

  background:#fff;

  border-radius:18px;

  font-size:13px;

  font-weight:900;

}


/* =========================================================
   06 — HERO
   ========================================================= */

.fanpeak-hero{

  position:relative;

  min-height:920px;

  padding:

  155px 6% 150px;

  overflow:hidden;

  color:#fff;

  background:

  linear-gradient(
    120deg,
    #020918,
    #071d45 52%,
    #0b4a82
  );

}


.fanpeak-hero__background{

  position:absolute;

  inset:0;

  background:

  linear-gradient(
    90deg,
    rgba(2,9,24,.98) 0%,
    rgba(3,14,36,.82) 39%,
    rgba(3,17,43,.28) 70%,
    rgba(2,9,24,.36) 100%
  ),

  linear-gradient(
    0deg,
    rgba(2,9,24,.90),
    transparent 54%
  ),

  url("../images/hero/fanpeak-hero.webp")
  center / cover no-repeat;

}


.fanpeak-hero::after{

  content:"";

  position:absolute;

  inset:auto 0 0;

  height:300px;

  background:

  linear-gradient(
    transparent,
    rgba(2,10,27,.97)
  );

}


.fanpeak-hero__container{

  position:relative;

  z-index:5;

  display:grid;

  grid-template-columns:

  1.1fr .9fr;

  align-items:center;

  gap:80px;

  width:min(1420px,100%);

  min-height:610px;

  margin-inline:auto;

}


.fanpeak-hero__content{

  max-width:750px;

}


.hero-kicker{

  display:inline-flex;

  align-items:center;

  gap:11px;

  margin-bottom:25px;

  color:

  rgba(255,255,255,.78);

  font-size:13px;

  font-weight:800;

}


.hero-kicker i{

  width:9px;

  height:9px;

  background:

  var(--lime);

  border-radius:50%;

  box-shadow:

  0 0 0 8px
  rgba(168,240,75,.10),

  0 0 27px
  rgba(168,240,75,.75);

}


.fanpeak-hero h1{

  margin:0;

  font-size:

  clamp(58px,6vw,103px);

  line-height:.98;

  letter-spacing:-4px;

  font-weight:900;

}


.fanpeak-hero h1 > span{

  display:block;

  color:

  var(--lime);

}


.fanpeak-hero h1 > strong{

  display:block;

  margin-top:17px;

  color:#fff;

  font-size:.56em;

  line-height:1.28;

}


.fanpeak-hero h1 em{

  display:block;

  color:

  #63c9ff;

  font-style:normal;

}


.fanpeak-hero__content > p{

  max-width:690px;

  margin:

  29px 0 0;

  color:

  rgba(255,255,255,.68);

  font-size:18px;

  line-height:2;

}


.hero-actions{

  display:flex;

  align-items:center;

  gap:13px;

  margin-top:34px;

}


.button{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:14px;

  min-height:59px;

  padding:

  0 27px;

  border-radius:18px;

  font-size:14px;

  font-weight:900;

  transition:

  transform .25s ease,
  box-shadow .25s ease;

}


.button:hover{

  transform:

  translateY(-4px);

}


.button--light{

  color:

  #061b3d;

  background:#fff;

  box-shadow:

  0 15px 35px
  rgba(0,0,0,.20);

}


.button--light span{

  font-size:26px;

}


.button--outline{

  color:#fff;

  border:

  1px solid
  rgba(255,255,255,.36);

  background:

  rgba(255,255,255,.05);

  backdrop-filter:

  blur(10px);

}


.button--dark{

  color:#fff;

  background:

  #061a3b;

}


/* =========================================================
   HERO — SCOREBOARD
   ========================================================= */

.match-scoreboard{

  position:relative;

  width:100%;

  max-width:570px;

  margin-right:auto;

  overflow:hidden;

  color:#fff;

  background:

  linear-gradient(
    145deg,
    rgba(4,18,47,.94),
    rgba(9,47,105,.90)
  );

  border:

  1px solid
  rgba(255,255,255,.20);

  border-radius:31px;

  box-shadow:

  0 35px 90px
  rgba(0,0,0,.38),

  inset 0 1px 0
  rgba(255,255,255,.10);

  backdrop-filter:

  blur(20px);

}


.match-scoreboard::before{

  content:"";

  position:absolute;

  top:0;

  right:0;

  left:0;

  height:4px;

  background:

  linear-gradient(
    90deg,
    var(--green-500),
    var(--lime),
    #4ccaff
  );

}


.scoreboard-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:

  21px 25px;

  border-bottom:

  1px solid
  rgba(255,255,255,.10);

}


.scoreboard-top > span{

  display:inline-flex;

  align-items:center;

  gap:8px;

  color:

  #ff6273;

  font-size:11px;

  font-weight:900;

  letter-spacing:2px;

}


.scoreboard-top > span::before{

  content:"";

  width:8px;

  height:8px;

  background:

  #ff5265;

  border-radius:50%;

  box-shadow:

  0 0 15px
  #ff5265;

  animation:

  livePulse 1.2s
  infinite;

}


.scoreboard-top b{

  font-size:18px;

  letter-spacing:2px;

}


.scoreboard-top small{

  color:

  rgba(255,255,255,.43);

  font-size:10px;

  font-weight:900;

  letter-spacing:2px;

}


.scoreboard-match{

  display:grid;

  grid-template-columns:

  1fr auto 1fr;

  align-items:center;

  gap:25px;

  padding:

  44px 30px 34px;

}


.score-team{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:13px;

}


.team-badge{

  display:grid;

  place-items:center;

  width:76px;

  height:76px;

  color:

  #061b3d;

  background:

  linear-gradient(
    145deg,
    #c7ff74,
    #79d92e
  );

  border:

  4px solid
  rgba(255,255,255,.16);

  border-radius:50%;

  box-shadow:

  0 15px 30px
  rgba(0,0,0,.22);

  font-size:17px;

  font-weight:900;

}


.team-badge--away{

  color:#fff;

  background:

  linear-gradient(
    145deg,
    #2776f0,
    #0a3f9d
  );

}


.score-team strong{

  font-size:11px;

  letter-spacing:1px;

}


.score-result{

  display:flex;

  align-items:center;

  gap:14px;

}


.score-result b{

  min-width:55px;

  font-size:66px;

  line-height:1;

  text-align:center;

}


.score-result span{

  color:

  rgba(255,255,255,.34);

  font-size:32px;

}


.goal-message{

  position:absolute;

  inset:50% auto auto 50%;

  z-index:5;

  padding:

  12px 28px;

  color:

  #071b3c;

  background:

  var(--lime);

  border-radius:14px;

  box-shadow:

  0 15px 50px
  rgba(168,240,75,.45);

  font-size:27px;

  font-weight:900;

  letter-spacing:3px;

  opacity:0;

  transform:

  translate(-50%,-50%)
  scale(.5)
  rotate(-6deg);

  transition:

  opacity .35s ease,
  transform .35s ease;

}


.goal-message.is-visible{

  opacity:1;

  transform:

  translate(-50%,-50%)
  scale(1)
  rotate(-3deg);

}


.scoreboard-status{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  padding:

  17px;

  color:

  rgba(255,255,255,.58);

  background:

  rgba(255,255,255,.04);

  border-top:

  1px solid
  rgba(255,255,255,.08);

  font-size:12px;

  font-weight:700;

}


.scoreboard-status span{

  width:7px;

  height:7px;

  background:

  var(--green-500);

  border-radius:50%;

  box-shadow:

  0 0 13px
  var(--green-500);

}


/* =========================================================
   STADIUM LIGHTS
   ========================================================= */

.stadium-lights{

  position:absolute;

  z-index:2;

  inset:0;

  pointer-events:none;

}


.stadium-lights span{

  position:absolute;

  top:-15%;

  width:190px;

  height:110%;

  opacity:.14;

  background:

  linear-gradient(
    180deg,
    rgba(255,255,255,.75),
    transparent 70%
  );

  filter:

  blur(20px);

  transform:

  rotate(16deg);

  transform-origin:top;

  animation:

  stadiumLight 9s
  ease-in-out
  infinite alternate;

}


.stadium-lights span:nth-child(1){

  right:8%;

}


.stadium-lights span:nth-child(2){

  right:43%;

  animation-delay:-3s;

}


.stadium-lights span:nth-child(3){

  left:8%;

  animation-delay:-6s;

}


/* =========================================================
   SPIDERCAM
   ========================================================= */

.spidercam{

  position:absolute;

  z-index:4;

  top:130px;

  right:20%;

  width:72px;

  height:48px;

  pointer-events:none;

  animation:

  spiderMove 13s
  ease-in-out
  infinite alternate;

}


.spidercam::before,
.spidercam::after{

  content:"";

  position:absolute;

  top:-190px;

  width:1px;

  height:210px;

  background:

  rgba(255,255,255,.24);

}


.spidercam::before{

  right:13px;

  transform:

  rotate(22deg);

}


.spidercam::after{

  left:13px;

  transform:

  rotate(-22deg);

}


.spidercam i{

  position:absolute;

  inset:8px 10px;

  background:

  #060d18;

  border:

  2px solid
  rgba(255,255,255,.20);

  border-radius:

  10px 10px 18px 18px;

}


.spidercam span{

  position:absolute;

  right:28px;

  bottom:-5px;

  width:18px;

  height:18px;

  background:

  #07101d;

  border:

  3px solid
  #1e72ef;

  border-radius:50%;

}


/* =========================================================
   MATCH JOURNEY
   ========================================================= */

.match-journey{

  position:absolute;

  z-index:8;

  right:7%;

  bottom:48px;

  left:7%;

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

}


.match-journey__line{

  position:absolute;

  top:20px;

  right:3%;

  left:3%;

  height:2px;

  overflow:hidden;

  background:

  rgba(255,255,255,.22);

}


.match-journey__line span{

  display:block;

  width:30%;

  height:100%;

  background:

  linear-gradient(
    90deg,
    var(--lime),
    #4bcaff
  );

  box-shadow:

  0 0 18px
  var(--lime);

  animation:

  journeyLine 7s
  ease-in-out
  infinite alternate;

}


.match-step{

  position:relative;

  z-index:2;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:10px;

  min-width:100px;

}


.match-step b{

  display:grid;

  place-items:center;

  width:42px;

  height:42px;

  color:

  rgba(255,255,255,.65);

  background:

  #0a2451;

  border:

  4px solid
  rgba(255,255,255,.10);

  border-radius:50%;

  font-size:10px;

}


.match-step.is-active b{

  color:

  #082047;

  background:

  var(--lime);

  box-shadow:

  0 0 0 8px
  rgba(168,240,75,.10),

  0 0 28px
  rgba(168,240,75,.50);

}


.match-step small{

  color:

  rgba(255,255,255,.65);

  font-size:11px;

  font-weight:800;

}


/* =========================================================
   07 — SECTION HEADING
   ========================================================= */

.section-heading{

  width:min(900px,90%);

  margin-inline:auto;

  text-align:center;

}


.section-heading > span,
.section-label{

  color:

  var(--blue-600);

  font-size:12px;

  font-weight:900;

  letter-spacing:1.8px;

}


.section-heading h2{

  margin:

  17px 0 0;

  color:

  var(--navy-900);

  font-size:

  clamp(43px,5vw,76px);

  line-height:1.14;

  letter-spacing:-2px;

  font-weight:900;

}


.section-heading h2 strong{

  display:block;

  color:

  var(--blue-600);

}


.section-heading p{

  max-width:720px;

  margin:

  22px auto 0;

  color:

  var(--muted);

  font-size:17px;

  line-height:2;

}


/* =========================================================
   08 — TEAM WORLD
   ========================================================= */

.team-world{

  position:relative;

  padding:

  120px 0;

  overflow:hidden;

  background:

  radial-gradient(
    circle at 50% 0%,
    rgba(34,111,240,.10),
    transparent 42%
  ),

  #f4f8ff;

}


.club-marquee{

  position:relative;

  width:100%;

  margin-top:65px;

  overflow:hidden;

}


.club-marquee::before,
.club-marquee::after{

  content:"";

  position:absolute;

  z-index:3;

  top:0;

  bottom:0;

  width:160px;

  pointer-events:none;

}


.club-marquee::before{

  right:0;

  background:

  linear-gradient(
    90deg,
    transparent,
    #f4f8ff
  );

}


.club-marquee::after{

  left:0;

  background:

  linear-gradient(
    -90deg,
    transparent,
    #f4f8ff
  );

}


.club-track{

  display:flex;

  gap:18px;

  width:max-content;

  padding:

  15px 0 30px;

  animation:

  clubMarquee 34s
  linear
  infinite;

}


.club-track:hover{

  animation-play-state:

  paused;

}


.club-card{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  flex:none;

  width:165px;

  min-height:190px;

  padding:20px;

  background:#fff;

  border:

  1px solid
  rgba(12,54,120,.09);

  border-radius:27px;

  box-shadow:

  0 18px 45px
  rgba(9,42,98,.08);

  transition:

  transform .3s ease,
  box-shadow .3s ease;

}


.club-card:hover{

  transform:

  translateY(-9px);

  box-shadow:

  0 28px 55px
  rgba(9,42,98,.15);

}


.club-placeholder{

  display:grid;

  place-items:center;

  width:88px;

  height:88px;

  color:#fff;

  background:

  linear-gradient(
    145deg,
    #1769e8,
    #082d74
  );

  border:

  7px solid
  #edf4ff;

  border-radius:50%;

  box-shadow:

  0 13px 25px
  rgba(14,71,162,.22);

  font-size:17px;

  font-weight:900;

  letter-spacing:1px;

}


.club-card:nth-child(3n)
.club-placeholder{

  color:

  #08204a;

  background:

  linear-gradient(
    145deg,
    #c6ff72,
    #77d32f
  );

}


.club-card:nth-child(4n)
.club-placeholder{

  background:

  linear-gradient(
    145deg,
    #ff435c,
    #a70d2a
  );

}


.club-card span{

  margin-top:18px;

  color:

  var(--navy-900);

  font-size:14px;

  font-weight:900;

}


.teams-button{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:14px;

  width:max-content;

  min-height:59px;

  margin:

  40px auto 0;

  padding:

  0 27px;

  color:#fff;

  background:

  var(--navy-900);

  border-radius:18px;

  font-size:14px;

  font-weight:900;

  box-shadow:

  0 18px 40px
  rgba(5,25,59,.20);

}


/* =========================================================
   09 — COLLECTION
   ========================================================= */

.collection-section{

  display:grid;

  grid-template-columns:

  1fr 1fr;

  min-height:900px;

  overflow:hidden;

  color:#fff;

  background:

  var(--navy-900);

}


.collection-visual{

  position:relative;

  min-height:900px;

  overflow:hidden;

}


.locker-background{

  position:absolute;

  inset:0;

  background:

  linear-gradient(
    0deg,
    rgba(2,11,29,.92),
    rgba(2,11,29,.12) 65%
  ),

  linear-gradient(
    90deg,
    transparent,
    #06142d
  ),

  url("../images/sections/locker-room.webp")
  center / cover no-repeat;

}


.collection-content{

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:

  95px 9%;

}


.collection-content
.section-label{

  color:

  #66ceff;

}


.collection-content h2{

  max-width:700px;

  margin:

  18px 0 0;

  font-size:

  clamp(48px,5vw,82px);

  line-height:1.1;

  letter-spacing:-2.7px;

  font-weight:900;

}


.collection-content h2 strong{

  display:block;

  color:

  var(--lime);

}


.collection-content > p{

  max-width:620px;

  margin:

  25px 0 0;

  color:

  rgba(255,255,255,.63);

  font-size:17px;

  line-height:2;

}


.collection-categories{

  display:grid;

  grid-template-columns:

  repeat(2,minmax(0,1fr));

  gap:11px;

  margin-top:38px;

}


.collection-categories a{

  display:flex;

  align-items:center;

  gap:13px;

  min-height:72px;

  padding:

  13px 16px;

  background:

  rgba(255,255,255,.055);

  border:

  1px solid
  rgba(255,255,255,.11);

  border-radius:17px;

  font-size:13px;

  font-weight:900;

  transition:

  background .25s ease,
  transform .25s ease;

}


.collection-categories a:hover{

  transform:

  translateY(-4px);

  background:

  rgba(255,255,255,.10);

}


.collection-categories b{

  display:grid;

  place-items:center;

  flex:none;

  width:39px;

  height:39px;

  color:

  #082047;

  background:

  var(--lime);

  border-radius:12px;

  font-size:10px;

}


.collection-categories span{

  margin-right:auto;

  color:

  #64ceff;

  font-size:19px;

}


/* =========================================================
   FLOATING PRODUCTS
   ========================================================= */

.floating-product{

  position:absolute;

  z-index:3;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  color:#fff;

  filter:

  drop-shadow(
    0 25px 30px
    rgba(0,0,0,.30)
  );

}


.floating-product small{

  margin-top:13px;

  padding:

  8px 13px;

  background:

  rgba(3,15,38,.76);

  border:

  1px solid
  rgba(255,255,255,.15);

  border-radius:10px;

  font-size:11px;

  font-weight:900;

  backdrop-filter:

  blur(10px);

}


.product-shirt{

  top:23%;

  right:26%;

  width:240px;

  height:285px;

  background:

  linear-gradient(
    145deg,
    #1c73ef,
    #073781
  );

  clip-path:

  polygon(
    26% 7%,
    40% 0,
    60% 0,
    74% 7%,
    100% 25%,
    84% 43%,
    76% 34%,
    76% 100%,
    24% 100%,
    24% 34%,
    16% 43%,
    0 25%
  );

  animation:

  productFloat 4.5s
  ease-in-out
  infinite;

}


.product-shirt span{

  font-size:90px;

  font-weight:900;

}


.product-shirt small{

  position:absolute;

  bottom:-47px;

}


.product-cap{

  top:15%;

  left:10%;

  width:145px;

  height:90px;

  animation:

  productFloat 5s
  ease-in-out
  infinite -1s;

}


.product-cap span{

  width:110px;

  height:60px;

  background:

  var(--lime);

  border-radius:

  60px 60px 15px 15px;

}


.product-cap span::after{

  content:"";

  position:absolute;

  right:60px;

  bottom:22px;

  width:82px;

  height:25px;

  background:

  var(--lime);

  border-radius:50%;

  transform:

  rotate(-8deg);

}


.product-pants{

  right:8%;

  bottom:13%;

  width:170px;

  height:240px;

  animation:

  productFloat 5.5s
  ease-in-out
  infinite -2s;

}


.product-pants span{

  width:130px;

  height:205px;

  background:

  linear-gradient(
    90deg,
    #0b1d40 48%,
    #102b59 49%
  );

  clip-path:

  polygon(
    10% 0,
    90% 0,
    98% 100%,
    58% 100%,
    50% 34%,
    42% 100%,
    2% 100%
  );

}


.product-flag{

  left:7%;

  bottom:15%;

  width:190px;

  height:150px;

  animation:

  productFloat 4.8s
  ease-in-out
  infinite -3s;

}


.product-flag span{

  width:150px;

  height:92px;

  background:

  linear-gradient(
    #1766ed 0 33%,
    #fff 33% 66%,
    #a8f04b 66%
  );

  clip-path:

  polygon(
    0 0,
    100% 7%,
    94% 92%,
    0 100%
  );

}


/* =========================================================
   10 — FORMATION
   ========================================================= */

.formation-section{

  display:grid;

  grid-template-columns:

  .72fr 1.28fr;

  align-items:center;

  gap:70px;

  min-height:900px;

  padding:

  110px 7%;

  overflow:hidden;

  color:#fff;

  background:

  radial-gradient(
    circle at 10% 50%,
    rgba(33,116,255,.28),
    transparent 35%
  ),

  linear-gradient(
    135deg,
    #031027,
    #061d45
  );

}


.formation-heading > span{

  color:

  #61ccff;

  font-size:12px;

  font-weight:900;

  letter-spacing:2px;

}


.formation-heading h2{

  margin:

  18px 0 0;

  font-size:

  clamp(56px,6vw,95px);

  line-height:1;

  letter-spacing:-3px;

  font-weight:900;

}


.formation-heading h2 strong{

  display:block;

  color:

  var(--lime);

}


.formation-heading p{

  margin:

  27px 0 0;

  color:

  rgba(255,255,255,.61);

  font-size:18px;

  line-height:2;

}


.football-pitch{

  position:relative;

  min-height:660px;

  overflow:hidden;

  background:

  repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.025) 0 80px,
    rgba(255,255,255,.065) 80px 160px
  ),

  linear-gradient(
    145deg,
    #087a42,
    #064b2d
  );

  border:

  3px solid
  rgba(255,255,255,.52);

  border-radius:38px;

  box-shadow:

  0 40px 90px
  rgba(0,0,0,.30),

  inset 0 0 80px
  rgba(0,0,0,.18);

}


.football-pitch::before{

  content:"";

  position:absolute;

  inset:34px;

  border:

  2px solid
  rgba(255,255,255,.53);

  border-radius:10px;

}


.pitch-line{

  position:absolute;

  top:50%;

  right:34px;

  left:34px;

  height:2px;

  background:

  rgba(255,255,255,.55);

}


.pitch-circle{

  position:absolute;

  top:50%;

  left:50%;

  width:145px;

  height:145px;

  border:

  2px solid
  rgba(255,255,255,.58);

  border-radius:50%;

  transform:

  translate(-50%,-50%);

}


.formation-player{

  position:absolute;

  z-index:3;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  width:112px;

  height:112px;

  padding:0;

  cursor:pointer;

  color:#fff;

  background:

  rgba(4,23,55,.84);

  border:

  1px solid
  rgba(255,255,255,.22);

  border-radius:50%;

  box-shadow:

  0 18px 35px
  rgba(0,0,0,.24),

  0 0 0 9px
  rgba(255,255,255,.06);

  backdrop-filter:

  blur(12px);

  transition:

  transform .3s ease,
  background .3s ease;

}


.formation-player:hover{

  z-index:5;

  transform:

  scale(1.12);

  background:

  #1267e8;

}


.formation-player b{

  font-size:14px;

}


.formation-player small{

  margin-top:3px;

  color:

  rgba(255,255,255,.50);

  font-size:10px;

}


.formation-player.is-star{

  color:

  #071d42;

  background:

  var(--lime);

  border-color:

  rgba(255,255,255,.65);

  box-shadow:

  0 0 0 11px
  rgba(168,240,75,.10),

  0 0 45px
  rgba(168,240,75,.45);

}


.formation-player.is-star small{

  color:

  rgba(7,29,66,.57);

}


.formation-player--1{

  top:8%;

  left:44%;

}


.formation-player--2{

  top:30%;

  right:14%;

}


.formation-player--3{

  top:31%;

  left:43%;

}


.formation-player--4{

  top:30%;

  left:14%;

}


.formation-player--5{

  right:28%;

  bottom:12%;

}


.formation-player--6{

  left:28%;

  bottom:12%;

}


/* =========================================================
   11 — CUSTOMIZATION
   ========================================================= */

.custom-section{

  display:grid;

  grid-template-columns:

  1fr 1fr;

  align-items:center;

  min-height:850px;

  overflow:hidden;

  background:

  radial-gradient(
    circle at 85% 45%,
    rgba(27,106,239,.18),
    transparent 34%
  ),

  #f5f8ff;

}


.custom-content{

  padding:

  100px 12%;

}


.custom-content h2{

  margin:

  18px 0 0;

  color:

  var(--navy-900);

  font-size:

  clamp(58px,6vw,96px);

  line-height:1;

  letter-spacing:-3px;

  font-weight:900;

}


.custom-content h2 strong{

  display:block;

  color:

  var(--blue-600);

}


.custom-content > p{

  max-width:600px;

  margin:

  27px 0 0;

  color:

  var(--muted);

  font-size:18px;

  line-height:2;

}


.custom-features{

  display:flex;

  flex-wrap:wrap;

  gap:9px;

  margin:

  31px 0;

}


.custom-features span{

  padding:

  10px 15px;

  color:

  #0a397e;

  background:

  #e7f0ff;

  border:

  1px solid
  #cfe0ff;

  border-radius:100px;

  font-size:12px;

  font-weight:900;

}


.custom-visual{

  position:relative;

  display:grid;

  place-items:center;

  min-height:850px;

  overflow:hidden;

  background:

  linear-gradient(
    145deg,
    #03102a,
    #0a397f
  );

}


.custom-visual::before{

  content:"";

  position:absolute;

  width:520px;

  height:520px;

  background:

  rgba(34,114,245,.38);

  border-radius:50%;

  filter:

  blur(100px);

}


.custom-shirt{

  position:relative;

  z-index:2;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  width:440px;

  height:535px;

  color:#fff;

  background:

  linear-gradient(
    145deg,
    #2174ee,
    #062d70
  );

  clip-path:

  polygon(
    26% 7%,
    40% 0,
    60% 0,
    74% 7%,
    100% 25%,
    84% 43%,
    76% 34%,
    76% 100%,
    24% 100%,
    24% 34%,
    16% 43%,
    0 25%
  );

  filter:

  drop-shadow(
    0 35px 45px
    rgba(0,0,0,.35)
  );

  animation:

  shirtFloat 5s
  ease-in-out
  infinite;

}


.custom-shirt::after{

  content:"";

  position:absolute;

  inset:0;

  background:

  linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,255,255,.16),
    transparent 65%
  );

}


.custom-shirt small{

  font-size:13px;

  font-weight:900;

  letter-spacing:3px;

}


.custom-shirt strong{

  margin-top:25px;

  font-size:34px;

  font-weight:900;

  letter-spacing:2px;

}


.custom-shirt b{

  margin-top:0;

  font-size:150px;

  line-height:1;

}


.substitution-board{

  position:absolute;

  z-index:4;

  right:7%;

  bottom:10%;

  display:flex;

  flex-direction:column;

  width:225px;

  padding:

  20px;

  color:#fff;

  background:

  rgba(2,12,30,.88);

  border:

  1px solid
  rgba(255,255,255,.17);

  border-radius:20px;

  box-shadow:

  0 25px 50px
  rgba(0,0,0,.30);

  backdrop-filter:

  blur(15px);

}


.substitution-board > small{

  margin-bottom:12px;

  color:

  rgba(255,255,255,.42);

  font-size:9px;

  font-weight:900;

  letter-spacing:2px;

}


.substitution-board span{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:

  10px 0;

  border-top:

  1px solid
  rgba(255,255,255,.10);

  font-size:12px;

  font-weight:900;

}


.substitution-board b{

  color:

  var(--lime);

  font-size:20px;

}


/* =========================================================
   12 — MATCHDAY
   ========================================================= */

.matchday-section{

  padding:

  110px 7%;

  background:

  #eaf2ff;

}


.matchday-card{

  display:grid;

  grid-template-columns:

  1fr auto auto;

  align-items:center;

  gap:55px;

  width:min(1450px,100%);

  min-height:370px;

  margin-inline:auto;

  padding:

  60px 6%;

  overflow:hidden;

  color:#fff;

  background:

  radial-gradient(
    circle at 85% 0%,
    rgba(63,142,255,.42),
    transparent 35%
  ),

  linear-gradient(
    135deg,
    #020d24,
    #092d69
  );

  border-radius:

  var(--radius-xl);

  box-shadow:

  0 35px 80px
  rgba(8,42,100,.18);

}


.matchday-copy > span{

  color:

  #63caff;

  font-size:11px;

  font-weight:900;

  letter-spacing:2px;

}


.matchday-copy h2{

  margin:

  15px 0 0;

  font-size:

  clamp(42px,4vw,68px);

  line-height:1.12;

  letter-spacing:-2px;

  font-weight:900;

}


.matchday-copy h2 strong{

  display:block;

  color:

  var(--lime);

}


.matchday-copy p{

  margin:

  18px 0 0;

  color:

  rgba(255,255,255,.63);

  font-size:15px;

  line-height:1.9;

}


.match-countdown{

  display:flex;

  align-items:center;

  gap:13px;

  direction:ltr;

}


.match-countdown > div{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  width:105px;

  height:115px;

  background:

  rgba(255,255,255,.07);

  border:

  1px solid
  rgba(255,255,255,.15);

  border-radius:20px;

}


.match-countdown b{

  font-size:42px;

  line-height:1;

}


.match-countdown span{

  margin-top:9px;

  color:

  rgba(255,255,255,.50);

  font-size:11px;

  font-weight:700;

}


.match-countdown i{

  color:

  var(--lime);

  font-size:30px;

  font-style:normal;

}


/* =========================================================
   13 — CLOSING
   ========================================================= */

.fanpeak-closing{

  position:relative;

  display:grid;

  grid-template-columns:

  .9fr 1.1fr;

  align-items:center;

  gap:75px;

  min-height:650px;

  padding:

  95px 7%;

  overflow:hidden;

  color:#fff;

  background:

  linear-gradient(
    90deg,
    rgba(2,10,27,.98),
    rgba(3,17,43,.73)
  ),

  url("../images/sections/final-stand.webp")
  center / cover no-repeat;

}


.fanpeak-closing::after{

  content:"";

  position:absolute;

  inset:0;

  background:

  radial-gradient(
    circle at 75% 45%,
    rgba(36,114,255,.23),
    transparent 40%
  );

}


.fanpeak-closing__content,
.fanpeak-contact-grid{

  position:relative;

  z-index:2;

}


.fanpeak-closing__content > span{

  color:

  #65ceff;

  font-size:12px;

  font-weight:900;

  letter-spacing:1px;

}


.fanpeak-closing h2{

  margin:

  18px 0 0;

  font-size:

  clamp(55px,6vw,95px);

  line-height:1;

  letter-spacing:-3px;

  font-weight:900;

}


.fanpeak-closing h2 strong{

  display:block;

  margin-top:11px;

  color:

  var(--lime);

}


.fanpeak-closing__content p{

  max-width:550px;

  margin:

  28px 0 0;

  color:

  rgba(255,255,255,.65);

  font-size:17px;

  line-height:2;

}


.fanpeak-contact-grid{

  display:grid;

  gap:13px;

}


.fanpeak-contact-grid a{

  display:flex;

  align-items:center;

  gap:18px;

  min-height:113px;

  padding:

  20px;

  background:

  rgba(255,255,255,.07);

  border:

  1px solid
  rgba(255,255,255,.14);

  border-radius:23px;

  backdrop-filter:

  blur(14px);

  transition:

  transform .3s ease,
  background .3s ease;

}


.fanpeak-contact-grid a:hover{

  transform:

  translateX(-7px);

  background:

  rgba(255,255,255,.12);

}


.fanpeak-contact-grid a > b{

  display:grid;

  place-items:center;

  flex:none;

  width:59px;

  height:59px;

  color:

  #071d42;

  background:

  var(--lime);

  border-radius:18px;

  font-size:12px;

}


.fanpeak-contact-grid a > span{

  display:flex;

  flex-direction:column;

  color:#fff;

  font-size:17px;

  font-weight:900;

}


.fanpeak-contact-grid small{

  margin-top:5px;

  color:

  rgba(255,255,255,.50);

  font-size:12px;

  font-weight:600;

}


.fanpeak-contact-grid i{

  margin-right:auto;

  color:

  #65ceff;

  font-size:24px;

  font-style:normal;

}


/* =========================================================
   14 — FOOTER
   ========================================================= */

.site-footer{

  padding:

  90px 7% 28px;

  color:#fff;

  background:

  linear-gradient(
    115deg,
    #020a19,
    #061a3d
  );

}


.footer-grid{

  display:grid;

  grid-template-columns:

  1.1fr .65fr 1.1fr;

  gap:90px;

  width:min(1420px,100%);

  margin-inline:auto;

  padding-bottom:70px;

}


.footer-brand > img{

  width:220px;

  height:95px;

  padding:

  14px 24px;

  object-fit:contain;

  background:

  linear-gradient(
    145deg,
    #fff,
    #edf4ff
  );

  border-radius:22px;

}


.footer-brand p,
.footer-parent p{

  max-width:430px;

  margin:

  25px 0 0;

  color:

  rgba(255,255,255,.52);

  font-size:13px;

  line-height:2;

}


.footer-brand > a{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:52px;

  margin-top:25px;

  padding:

  0 23px;

  color:

  #071d42;

  background:

  var(--lime);

  border-radius:16px;

  font-size:13px;

  font-weight:900;

}


.footer-navigation{

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:14px;

}


.footer-navigation > span,
.footer-parent > span{

  margin-bottom:7px;

  color:

  #62cbff;

  font-size:11px;

  font-weight:900;

}


.footer-navigation a{

  color:

  rgba(255,255,255,.67);

  font-size:13px;

  font-weight:800;

}


.footer-parent > img{

  width:170px;

  height:55px;

  margin-top:22px;

  object-fit:contain;

  object-position:right;

  filter:

  brightness(0)
  invert(1);

}


.footer-parent > a{

  display:flex;

  align-items:center;

  gap:12px;

  width:max-content;

  margin-top:25px;

  color:

  var(--lime);

  font-size:13px;

  font-weight:900;

}


.footer-parent > a b{

  font-size:20px;

}


.footer-bottom{

  display:flex;

  align-items:center;

  justify-content:space-between;

  width:min(1420px,100%);

  margin-inline:auto;

  padding-top:25px;

  color:

  rgba(255,255,255,.35);

  border-top:

  1px solid
  rgba(255,255,255,.10);

  font-size:10px;

  font-weight:800;

}


/* =========================================================
   15 — ANIMATIONS
   ========================================================= */

@keyframes livePulse{

  50%{

    opacity:.35;

    transform:

    scale(.72);

  }

}


@keyframes stadiumLight{

  to{

    opacity:.28;

    transform:

    translateX(120px)
    rotate(-10deg);

  }

}


@keyframes spiderMove{

  to{

    right:60%;

    top:195px;

  }

}


@keyframes journeyLine{

  to{

    width:87%;

  }

}


@keyframes clubMarquee{

  to{

    transform:

    translateX(50%);

  }

}


@keyframes productFloat{

  50%{

    transform:

    translateY(-18px)
    rotate(2deg);

  }

}


@keyframes shirtFloat{

  50%{

    transform:

    translateY(-15px)
    rotate(-1deg);

  }

}


/* =========================================================
   16 — TABLET
   ========================================================= */

@media(max-width:1200px){


  .desktop-nav{

    gap:18px;

  }


  .desktop-nav a{

    font-size:11px;

  }


  .back-worlds{

    display:none;

  }


  .fanpeak-hero__container{

    gap:35px;

  }


  .formation-section{

    grid-template-columns:1fr;

  }


  .formation-heading{

    text-align:center;

  }


  .football-pitch{

    width:min(850px,100%);

    margin-inline:auto;

  }


  .matchday-card{

    grid-template-columns:1fr;

    text-align:center;

  }


  .matchday-copy p{

    margin-inline:auto;

  }


  .match-countdown{

    justify-content:center;

  }


  .matchday-card .button{

    width:max-content;

    margin-inline:auto;

  }

}


/* =========================================================
   17 — MOBILE
   ========================================================= */

@media(max-width:850px){


  .site-header{

    padding:

    10px 10px 0;

  }


  .header-shell{

    min-height:66px;

    padding:

    7px 8px;

    border-radius:20px;

  }


  .desktop-nav,
  .header-actions{

    display:none;

  }


  .nav-toggle{

    display:block;

  }


  .header-brands{

    gap:8px;

  }


  .fanpeak-brand{

    width:116px;

    height:48px;

    padding:

    7px 12px;

    border-radius:14px;

  }


  .header-divider{

    height:29px;

  }


  .parent-brand{

    width:77px;

    height:28px;

  }


  /* HERO */

  .fanpeak-hero{

    min-height:auto;

    padding:

    130px 22px 145px;

  }


  .fanpeak-hero__background{

    background:

    linear-gradient(
      0deg,
      rgba(2,9,24,.98) 0%,
      rgba(2,9,24,.74) 58%,
      rgba(2,9,24,.38)
    ),

    url("../images/hero/fanpeak-hero.webp")
    63% center /
    cover no-repeat;

  }


  .fanpeak-hero__container{

    display:flex;

    flex-direction:column;

    min-height:auto;

    gap:55px;

  }


  .fanpeak-hero__content{

    width:100%;

    padding-top:30px;

  }


  .hero-kicker{

    font-size:11px;

  }


  .fanpeak-hero h1{

    font-size:

    clamp(51px,15vw,75px);

    line-height:1.02;

    letter-spacing:-2.5px;

  }


  .fanpeak-hero h1 > strong{

    font-size:.51em;

    line-height:1.38;

  }


  .fanpeak-hero__content > p{

    font-size:15px;

    line-height:1.9;

  }


  .hero-actions{

    flex-direction:column;

    align-items:stretch;

  }


  .hero-actions .button{

    width:100%;

  }


  .match-scoreboard{

    max-width:100%;

    border-radius:23px;

  }


  .scoreboard-match{

    gap:10px;

    padding:

    35px 15px 28px;

  }


  .team-badge{

    width:57px;

    height:57px;

    font-size:12px;

  }


  .score-result{

    gap:6px;

  }


  .score-result b{

    min-width:37px;

    font-size:48px;

  }


  .score-result span{

    font-size:22px;

  }


  .score-team strong{

    font-size:8px;

  }


  .spidercam{

    display:none;

  }


  .match-journey{

    right:15px;

    bottom:38px;

    left:15px;

  }


  .match-step{

    min-width:50px;

  }


  .match-step b{

    width:34px;

    height:34px;

    font-size:8px;

  }


  .match-step small{

    max-width:55px;

    font-size:8px;

    text-align:center;

  }


  .match-journey__line{

    top:16px;

  }


  /* TEAMS */

  .team-world{

    padding:

    85px 0;

  }


  .section-heading{

    width:calc(100% - 38px);

  }


  .section-heading h2{

    font-size:

    clamp(37px,11vw,52px);

    letter-spacing:-1px;

  }


  .section-heading p{

    font-size:14px;

    line-height:1.9;

  }


  .club-marquee{

    margin-top:45px;

  }


  .club-card{

    width:135px;

    min-height:165px;

  }


  .club-placeholder{

    width:70px;

    height:70px;

    font-size:13px;

  }


  .club-marquee::before,
  .club-marquee::after{

    width:50px;

  }


  /* COLLECTION */

  .collection-section{

    grid-template-columns:1fr;

  }


  .collection-visual{

    min-height:610px;

  }


  .locker-background{

    background:

    linear-gradient(
      0deg,
      #06142d,
      rgba(2,11,29,.15) 65%
    ),

    url("../images/sections/locker-room.webp")
    center / cover no-repeat;

  }


  .collection-content{

    padding:

    65px 22px 80px;

  }


  .collection-content h2{

    font-size:

    clamp(43px,13vw,63px);

    letter-spacing:-1.5px;

  }


  .collection-content > p{

    font-size:14px;

  }


  .collection-categories{

    grid-template-columns:1fr;

  }


  .product-shirt{

    right:22%;

    transform:

    scale(.78);

  }


  .product-cap{

    left:2%;

    transform:

    scale(.75);

  }


  .product-pants{

    right:0;

    transform:

    scale(.72);

  }


  .product-flag{

    left:0;

    transform:

    scale(.72);

  }


  /* FORMATION */

  .formation-section{

    gap:45px;

    min-height:auto;

    padding:

    80px 18px;

  }


  .formation-heading h2{

    font-size:

    clamp(52px,16vw,75px);

  }


  .football-pitch{

    min-height:590px;

    border-radius:25px;

  }


  .formation-player{

    width:80px;

    height:80px;

  }


  .formation-player b{

    font-size:11px;

  }


  .formation-player--2{

    right:7%;

  }


  .formation-player--4{

    left:7%;

  }


  .formation-player--5{

    right:20%;

  }


  .formation-player--6{

    left:20%;

  }


  /* CUSTOM */

  .custom-section{

    grid-template-columns:1fr;

  }


  .custom-content{

    padding:

    80px 22px;

  }


  .custom-content h2{

    font-size:

    clamp(53px,16vw,78px);

  }


  .custom-content > p{

    font-size:15px;

  }


  .custom-visual{

    min-height:650px;

  }


  .custom-shirt{

    width:320px;

    height:410px;

  }


  .custom-shirt strong{

    font-size:25px;

  }


  .custom-shirt b{

    font-size:105px;

  }


  .substitution-board{

    right:18px;

    bottom:35px;

    width:185px;

  }


  /* MATCHDAY */

  .matchday-section{

    padding:

    70px 16px;

  }


  .matchday-card{

    gap:35px;

    min-height:auto;

    padding:

    50px 20px;

    border-radius:28px;

  }


  .matchday-copy h2{

    font-size:

    clamp(40px,12vw,56px);

  }


  .match-countdown{

    gap:7px;

  }


  .match-countdown > div{

    width:77px;

    height:91px;

  }


  .match-countdown b{

    font-size:31px;

  }


  .match-countdown i{

    font-size:20px;

  }


  /* CLOSING */

  .fanpeak-closing{

    grid-template-columns:1fr;

    gap:48px;

    min-height:auto;

    padding:

    85px 22px;

  }


  .fanpeak-closing h2{

    font-size:

    clamp(51px,15vw,74px);

  }


  .fanpeak-closing__content p{

    font-size:15px;

  }


  .fanpeak-contact-grid a{

    min-height:98px;

    padding:17px;

  }


  .fanpeak-contact-grid a > b{

    width:50px;

    height:50px;

    border-radius:15px;

  }


  .fanpeak-contact-grid a > span{

    font-size:14px;

  }


  /* FOOTER */

  .site-footer{

    padding:

    70px 22px 25px;

  }


  .footer-grid{

    grid-template-columns:1fr;

    gap:55px;

  }


  .footer-brand > img{

    width:200px;

  }


  .footer-bottom{

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

  }

}


/* =========================================================
   18 — SMALL MOBILE
   ========================================================= */

@media(max-width:520px){


  .mobile-nav{

    padding:

    18px;

  }


  .mobile-nav__close{

    width:56px;

    height:56px;

  }


  .mobile-nav__fanpeak-logo{

    width:105px;

    height:49px;

    padding:

    7px 10px;

  }


  .mobile-nav__brands a{

    width:72px;

  }


  .mobile-nav__intro{

    margin-top:48px;

  }


  .mobile-nav__links{

    gap:8px;

    margin-top:30px;

  }


  .mobile-nav__links a{

    min-height:92px;

    padding:12px;

    gap:10px;

  }


  .mobile-nav__links a > b{

    width:43px;

    height:43px;

  }


  .mobile-nav__links a > span{

    font-size:12px;

  }


  .mobile-nav__links small{

    font-size:9px;

  }


  .mobile-nav__bottom{

    padding-top:35px;

  }


  .mobile-nav__bottom > a:first-child{

    max-width:155px;

    font-size:11px;

  }


  .mobile-nav__shop{

    min-height:51px;

    padding:

    0 17px;

    font-size:11px;

  }

}



/* =========================================================
   FAN PEAK — JS EFFECTS
   ========================================================= */

.match-scoreboard.goal-scored{

  animation:

  goalBoardMoment
  .65s ease;

}


.score-result b.score-changed{

  color:

  var(--lime);

  text-shadow:

  0 0 28px
  rgba(168,240,75,.75);

  animation:

  scoreGoal
  .75s ease;

}


#customName,
#customNumber{

  transition:

  opacity .3s ease,
  transform .3s ease;

}


#customName.is-changing,
#customNumber.is-changing{

  opacity:0;

  transform:

  translateY(13px);

}


@keyframes goalBoardMoment{

  20%{

    transform:

    scale(1.025)
    rotate(-.5deg);

  }


  45%{

    transform:

    scale(.99)
    rotate(.4deg);

  }


  70%{

    transform:

    scale(1.012);

  }


  100%{

    transform:none;

  }

}


@keyframes scoreGoal{

  0%{

    transform:

    scale(.5);

  }


  45%{

    transform:

    scale(1.45);

  }


  100%{

    transform:

    scale(1);

  }

}





/* =========================================================
   FAN PEAK — HEADER LOGO FINAL
   ========================================================= */

/* مساحة اللوجو من غير صندوق أو إطار */
.site-header .fanpeak-brand{

  width: 150px !important;
  min-width: 150px !important;
  height: 64px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible !important;

}


/* لوجو FAN PEAK نفسه */
.site-header .fanpeak-brand img{

  display: block !important;

  width: 135px !important;
  height: 54px !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;

  opacity: 1 !important;

  filter: none !important;

  mix-blend-mode: normal !important;

  transform: none !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

}


/* =========================================================
   FAN PEAK LOGO — MOBILE
   ========================================================= */

@media (max-width: 768px){

  .site-header .fanpeak-brand{

    width: 100px !important;
    min-width: 100px !important;

    height: 54px !important;

    padding: 0 !important;

  }


  .site-header .fanpeak-brand img{

    width: 92px !important;

    height: 45px !important;

  }

}



/* =========================================================
   FAN PEAK — CLUBS EXPERIENCE
   ========================================================= */

.clubs-section{

  position: relative;

  width: 100%;

  padding:
  clamp(85px, 9vw, 150px)
  max(5vw, 24px);

  overflow: hidden;

  color: #fff;

  background:

  radial-gradient(
    circle at 90% 15%,
    rgba(50,130,255,.23),
    transparent 31%
  ),

  radial-gradient(
    circle at 10% 80%,
    rgba(165,240,70,.12),
    transparent 30%
  ),

  linear-gradient(
    135deg,
    #020a19 0%,
    #071a3c 52%,
    #06265a 100%
  );

}


/* خطوط ملعب خفيفة */

.clubs-section::before{

  content: "";

  position: absolute;

  inset: 0;

  opacity: .1;

  pointer-events: none;

  background-image:

  linear-gradient(
    rgba(255,255,255,.1) 1px,
    transparent 1px
  ),

  linear-gradient(
    90deg,
    rgba(255,255,255,.1) 1px,
    transparent 1px
  );

  background-size:
  80px 80px;

}


/* الدوائر الضوئية */

.clubs-glow{

  position: absolute;

  width: 340px;

  aspect-ratio: 1;

  border-radius: 50%;

  filter: blur(100px);

  pointer-events: none;

}


.clubs-glow--one{

  top: -180px;

  right: 15%;

  background:

  rgba(40,125,255,.23);

}


.clubs-glow--two{

  bottom: -220px;

  left: 8%;

  background:

  rgba(166,240,70,.12);

}


/* العنوان */

.clubs-head{

  position: relative;

  z-index: 2;

  width: min(1450px, 100%);

  margin:
  0 auto
  60px;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 40px;

}


.clubs-copy{

  max-width: 780px;

}


.clubs-copy .section-kicker{

  display: inline-flex;

  margin-bottom: 18px;

  color: #a7ef48;

  font-size:
  clamp(13px, 1vw, 16px);

  font-weight: 900;

  letter-spacing: .04em;

}


.clubs-copy h2{

  margin: 0;

  font-size:
  clamp(42px, 5.2vw, 88px);

  line-height: .98;

  letter-spacing: -.05em;

}


.clubs-copy h2 strong{

  display: block;

  margin-top: 12px;

  color: #56c8ff;

}


.clubs-copy p{

  max-width: 680px;

  margin:
  27px 0 0;

  color:
  rgba(255,255,255,.67);

  font-size:
  clamp(16px, 1.3vw, 21px);

  line-height: 1.9;

}


/* مؤشر حي */

.clubs-live{

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  gap: 11px;

  padding:
  14px 19px;

  color:
  rgba(255,255,255,.75);

  border:
  1px solid
  rgba(255,255,255,.14);

  border-radius: 100px;

  background:
  rgba(255,255,255,.06);

  backdrop-filter:
  blur(14px);

}


.clubs-live span{

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: #a7ef48;

  box-shadow:

  0 0 0 7px
  rgba(167,239,72,.1),

  0 0 20px
  rgba(167,239,72,.75);

  animation:

  clubsLivePulse
  1.5s ease
  infinite;

}


/* =========================================================
   SLIDER
   ========================================================= */

.clubs-slider{

  position: relative;

  z-index: 2;

  width: calc(100% + 10vw);

  margin-right: -5vw;

  overflow: hidden;

}


.clubs-track{

  display: flex;

  width: max-content;

  gap: 18px;

  padding:

  15px
  5vw
  25px;

  animation:

  clubsMovement
  50s linear
  infinite;

}


.clubs-track:hover{

  animation-play-state:
  paused;

}


/* كارت الفريق */

.club-card{

  position: relative;

  flex:
  0 0
  285px;

  min-height: 330px;

  padding:
  30px 25px
  25px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  border:

  1px solid
  rgba(255,255,255,.13);

  border-radius: 28px;

  background:

  linear-gradient(
    145deg,
    rgba(255,255,255,.12),
    rgba(255,255,255,.035)
  );

  box-shadow:

  inset
  0 1px 0
  rgba(255,255,255,.12),

  0 22px 60px
  rgba(0,0,0,.18);

  backdrop-filter:
  blur(18px);

  transition:

  transform .4s ease,
  border-color .4s ease,
  background .4s ease;

}


.club-card::before{

  content: "";

  position: absolute;

  width: 150px;

  height: 150px;

  top: 40px;

  left: 50%;

  border-radius: 50%;

  transform:

  translateX(-50%);

  background:

  rgba(83,196,255,.12);

  filter:

  blur(35px);

}


.club-card:hover{

  transform:

  translateY(-12px);

  border-color:

  rgba(166,240,70,.55);

  background:

  linear-gradient(
    145deg,
    rgba(75,150,255,.2),
    rgba(255,255,255,.05)
  );

}


/* اللوجو */

.club-logo{

  position: relative;

  z-index: 2;

  width: 165px;

  height: 165px;

  margin:
  0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

}


.club-logo img{

  display: block;

  width: 135px;

  height: 135px;

  object-fit: contain;

  filter:

  drop-shadow(
    0 18px 22px
    rgba(0,0,0,.3)
  );

  transition:

  transform .4s ease;

}


.club-card:hover
.club-logo img{

  transform:

  scale(1.1)
  rotate(-3deg);

}


/* بيانات النادي */

.club-info{

  position: relative;

  z-index: 2;

  padding-top: 20px;

  text-align: center;

  border-top:

  1px solid
  rgba(255,255,255,.1);

}


.club-info h3{

  margin:
  0 0 8px;

  color: #fff;

  font-size: 24px;

  font-weight: 900;

}


.club-info span{

  color:

  rgba(255,255,255,.52);

  font-size: 13px;

  font-weight: 700;

}


/* =========================================================
   BOTTOM
   ========================================================= */

.clubs-bottom{

  position: relative;

  z-index: 2;

  width:
  min(1450px, 100%);

  margin:
  50px auto 0;

  padding:
  25px 30px;

  display: flex;

  align-items: center;

  justify-content:
  space-between;

  gap: 25px;

  border:

  1px solid
  rgba(255,255,255,.12);

  border-radius: 24px;

  background:

  rgba(255,255,255,.055);

}


.clubs-bottom p{

  margin: 0;

  color:

  rgba(255,255,255,.65);

  font-size:
  clamp(15px, 1.2vw, 19px);

}


.clubs-bottom p strong{

  color: #fff;

}


.clubs-button{

  min-height: 55px;

  padding:
  0 25px;

  display:
  inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  color: #04122b;

  font-weight: 900;

  text-decoration: none;

  border-radius: 100px;

  background: #a7ef48;

  transition:

  transform .3s ease,
  box-shadow .3s ease;

}


.clubs-button:hover{

  transform:

  translateY(-3px);

  box-shadow:

  0 14px 35px
  rgba(166,240,70,.25);

}


/* سهم الموبايل مخفي على الديسكتوب */

.clubs-mobile-hint{

  display: none;

}


/* =========================================================
   CLUBS SLIDER — RTL DIRECTION FIX
   ========================================================= */

.clubs-slider{
  direction: rtl;
}

.clubs-track{
  direction: rtl;
}


/* الحركة تبدأ من اليمين وتتجه طبيعي ناحية الشمال */
@keyframes clubsMovement{

  from{
    transform: translateX(0);
  }

  to{
    transform: translateX(50%);
  }

}






@keyframes clubsLivePulse{

  50%{

    opacity: .45;

    transform:
    scale(.75);

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:768px){

  .clubs-section{

    padding:

    78px
    0
    70px;

  }


  .clubs-head{

    margin-bottom:
    35px;

    padding:
    0 22px;

    display: block;

  }


  .clubs-copy h2{

    font-size:
    clamp(43px, 13vw, 61px);

    line-height: 1.02;

  }


  .clubs-copy p{

    margin-top: 21px;

    font-size: 15px;

    line-height: 1.85;

  }


  .clubs-live{

    width: fit-content;

    margin-top: 25px;

    padding:
    11px 15px;

    font-size: 12px;

  }


  /*
    مهم:
    نوقف الحركة التلقائية على الموبايل
    ونحوّلها لسحب بالإيد
  */

  .clubs-slider{

    width: 100%;

    margin: 0;

    padding: 0;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-snap-type:

    x mandatory;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
    touch;

  }


  .clubs-slider::-webkit-scrollbar{

    display: none;

  }


  .clubs-track{

    width: max-content;

    gap: 13px;

    padding:

    10px
    22px
    20px;

    animation:
    none !important;

  }


  .club-card{

    flex:

    0 0
    min(72vw, 275px);

    min-height: 295px;

    padding:
    24px 20px
    22px;

    border-radius: 24px;

    scroll-snap-align:
    center;

  }


  .club-logo{

    width: 145px;

    height: 145px;

  }


  .club-logo img{

    width: 120px;

    height: 120px;

  }


  .club-info h3{

    font-size: 21px;

  }


  .club-info span{

    font-size: 12px;

  }


  .clubs-mobile-hint{

    padding:
    4px 23px 0;

    display: flex;

    align-items: center;

    justify-content:
    space-between;

    color:

    rgba(255,255,255,.5);

    font-size: 12px;

    font-weight: 800;

  }


  .clubs-mobile-hint b{

    color: #a7ef48;

    font-size: 24px;

    animation:

    mobileSwipe
    1.4s ease
    infinite;

  }


  .clubs-bottom{

    width:
    calc(100% - 44px);

    margin-top: 30px;

    padding:
    24px;

    display: block;

    text-align: center;

  }


  .clubs-bottom p{

    font-size: 14px;

    line-height: 1.8;

  }


  .clubs-bottom p strong{

    display: block;

  }


  .clubs-button{

    width: 100%;

    margin-top: 20px;

  }

}


@keyframes mobileSwipe{

  50%{

    transform:

    translateX(-8px);

  }

}






/* =========================================================
   FAN PEAK — FOOTBALL WORLD ELEMENTS
   ========================================================= */

.football-elements{

  position: absolute;

  inset: 0;

  z-index: 1;

  overflow: hidden;

  pointer-events: none;

}


/* القاعدة العامة لكل العناصر */

.football-element{

  position: absolute;

  display: block;

  width: auto;

  object-fit: contain;

  user-select: none;

  pointer-events: none;

  filter:

  drop-shadow(
    0 24px 35px
    rgba(0,0,0,.4)
  );

}


/* =========================================================
   صفارة الحكم
   ========================================================= */

.football-whistle{

  top: 90px;

  left: 4%;

  width:

  clamp(
    95px,
    9vw,
    165px
  );

  opacity: .9;

  transform:

  rotate(-18deg);

  animation:

  whistleFloating
  5s ease-in-out
  infinite;

}


/* =========================================================
   الكرة الأولى
   ========================================================= */

.football-ball--one{

  top: 34%;

  right: -45px;

  width:

  clamp(
    145px,
    15vw,
    260px
  );

  opacity: .84;

  animation:

  footballBallOne
  9s ease-in-out
  infinite;

}


/* =========================================================
   الكرة الثانية
   ========================================================= */

.football-ball--two{

  bottom: 25%;

  left: 3%;

  width:

  clamp(
    75px,
    7vw,
    125px
  );

  opacity: .38;

  filter:

  blur(.5px)

  drop-shadow(
    0 20px 30px
    rgba(0,0,0,.35)
  );

  animation:

  footballBallTwo
  8s ease-in-out
  infinite;

}


/* =========================================================
   كأس العالم
   ========================================================= */

.football-world-cup{

  top: 15%;

  right: 7%;

  width:

  clamp(
    115px,
    10vw,
    185px
  );

  opacity: .65;

  filter:

  drop-shadow(
    0 0 38px
    rgba(255,194,70,.25)
  );

  transform:

  rotate(5deg);

  animation:

  trophyFloating
  7s ease-in-out
  infinite;

}


/* =========================================================
   كأس أمم أفريقيا
   ========================================================= */

.football-africa-cup{

  bottom: 55px;

  right: 18%;

  width:

  clamp(
    105px,
    9vw,
    165px
  );

  opacity: .65;

  filter:

  drop-shadow(
    0 0 35px
    rgba(255,210,85,.2)
  );

  animation:

  africaCupFloating
  6s ease-in-out
  infinite;

}


/* =========================================================
   درع الدوري المصري
   ========================================================= */

.football-league-shield{

  bottom: -70px;

  left: 12%;

  width:

  clamp(
    155px,
    15vw,
    270px
  );

  opacity: .3;

  transform:

  rotate(-8deg);

  filter:

  drop-shadow(
    0 -10px 35px
    rgba(80,180,255,.18)
  );

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes whistleFloating{

  0%,
  100%{

    transform:

    translateY(0)
    rotate(-18deg);

  }


  50%{

    transform:

    translateY(-13px)
    rotate(-12deg);

  }

}


@keyframes footballBallOne{

  0%,
  100%{

    transform:

    translateY(0)
    rotate(0deg);

  }


  50%{

    transform:

    translateY(-25px)
    rotate(15deg);

  }

}


@keyframes footballBallTwo{

  0%,
  100%{

    transform:

    translateY(0)
    rotate(0);

  }


  50%{

    transform:

    translateY(17px)
    rotate(-18deg);

  }

}


@keyframes trophyFloating{

  0%,
  100%{

    transform:

    translateY(0)
    rotate(5deg);

  }


  50%{

    transform:

    translateY(-16px)
    rotate(1deg);

  }

}


@keyframes africaCupFloating{

  0%,
  100%{

    transform:

    translateY(0);

  }


  50%{

    transform:

    translateY(-15px);

  }

}


/* =========================================================
   FOOTBALL ELEMENTS — MOBILE
   ========================================================= */

@media(max-width:768px){


  /*
    نخفي الكؤوس الكبيرة من خلف الكلام
    ونخلي العناصر المهمة في أماكن آمنة
  */

  .football-whistle{

    top: 34px;

    left: -13px;

    width: 82px;

    opacity: .58;

  }


  .football-world-cup{

    top: 195px;

    right: -17px;

    width: 95px;

    opacity: .15;

  }


  .football-ball--one{

    top: 43%;

    right: -48px;

    width: 125px;

    opacity: .38;

  }


  .football-ball--two{

    display: none;

  }


  .football-africa-cup{

    bottom: 165px;

    right: -12px;

    width: 92px;

    opacity: .22;

  }


  .football-league-shield{

    bottom: -28px;

    left: -22px;

    width: 130px;

    opacity: .18;

  }

}




/* =========================================================
   FANBEK — PREMIUM SHOP GATEWAY
   ========================================================= */

.fanbek-gateway{

  position: relative;

  isolation: isolate;

  overflow: hidden;

  padding:

  clamp(85px, 9vw, 145px)

  clamp(22px, 6vw, 110px);

  background:

  radial-gradient(
    circle at 82% 35%,
    rgba(50,120,255,.22),
    transparent 34%
  ),

  radial-gradient(
    circle at 14% 75%,
    rgba(153,255,58,.08),
    transparent 28%
  ),

  linear-gradient(
    115deg,
    #020a19 0%,
    #07142b 48%,
    #18315b 100%
  );

}


/* خطوط ملعب خفيفة */

.fanbek-gateway::before{

  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  opacity:.09;

  background-image:

  linear-gradient(
    rgba(255,255,255,.14) 1px,
    transparent 1px
  ),

  linear-gradient(
    90deg,
    rgba(255,255,255,.14) 1px,
    transparent 1px
  );

  background-size:

  90px 90px;

  mask-image:

  linear-gradient(
    90deg,
    transparent,
    #000 30%,
    #000 70%,
    transparent
  );

}


/* رقم خلفي */

.fanbek-gateway::after{

  content:"90";

  position:absolute;

  left:-20px;

  bottom:-135px;

  z-index:-1;

  font-size:

  clamp(
    280px,
    35vw,
    610px
  );

  line-height:1;

  font-weight:950;

  color:

  rgba(
    255,
    255,
    255,
    .025
  );

}


.gateway-shell{

  position:relative;

  z-index:2;

  width:

  min(
    1500px,
    100%
  );

  margin-inline:auto;

  display:grid;

  grid-template-columns:

  minmax(
    380px,
    .82fr
  )

  minmax(
    560px,
    1.18fr
  );

  align-items:center;

  gap:

  clamp(
    55px,
    8vw,
    135px
  );

}


/* =========================================================
   TEXT
   ========================================================= */

.gateway-content{

  max-width:610px;

}


.gateway-eyebrow{

  display:inline-flex;

  align-items:center;

  gap:10px;

  margin-bottom:22px;

  color:#58c9ff;

  font-size:

  clamp(
    13px,
    .9vw,
    16px
  );

  font-weight:900;

}


.gateway-live-dot{

  width:10px;

  height:10px;

  border-radius:50%;

  background:#9dff38;

  box-shadow:

  0 0 0 7px

  rgba(
    157,
    255,
    56,
    .1
  ),

  0 0 22px

  rgba(
    157,
    255,
    56,
    .7
  );

}


.gateway-title{

  max-width:650px;

  margin:0;

  color:#fff;

  font-size:

  clamp(
    50px,
    5.3vw,
    92px
  );

  line-height:1.04;

  letter-spacing:-3px;

  font-weight:950;

}


.gateway-title span{

  display:block;

  color:#9dff38;

}


.gateway-description{

  max-width:580px;

  margin:

  30px 0 0;

  color:

  rgba(
    255,
    255,
    255,
    .7
  );

  font-size:

  clamp(
    16px,
    1.2vw,
    20px
  );

  line-height:1.9;

}


.gateway-tags{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:30px;

}


.gateway-tags span{

  padding:

  9px 16px;

  border:

  1px solid

  rgba(
    255,
    255,
    255,
    .14
  );

  border-radius:100px;

  color:

  rgba(
    255,
    255,
    255,
    .72
  );

  background:

  rgba(
    255,
    255,
    255,
    .045
  );

  font-size:13px;

  font-weight:800;

}


/* =========================================================
   MAIN STORE CARD
   ========================================================= */

.gateway-actions{

  display:grid;

  gap:16px;

}


.gateway-store-card{

  position:relative;

  display:block;

  overflow:hidden;

  min-height:330px;

  padding:

  clamp(
    25px,
    2.5vw,
    38px
  );

  border:

  1px solid

  rgba(
    255,
    255,
    255,
    .19
  );

  border-radius:32px;

  color:#fff;

  text-decoration:none;

  background:

  radial-gradient(
    circle at 15% 20%,
    rgba(157,255,56,.18),
    transparent 31%
  ),

  linear-gradient(
    135deg,
    rgba(33,63,111,.96),
    rgba(10,26,55,.96)
  );

  box-shadow:

  0 30px 75px

  rgba(
    0,
    0,
    0,
    .3
  );

  transition:

  transform .35s ease,

  border-color .35s ease,

  box-shadow .35s ease;

}


.gateway-store-card::before{

  content:"";

  position:absolute;

  width:260px;

  height:260px;

  left:-100px;

  bottom:-130px;

  border:

  45px solid

  rgba(
    157,
    255,
    56,
    .06
  );

  border-radius:50%;

}


.gateway-store-card:hover{

  transform:

  translateY(-7px);

  border-color:

  rgba(
    157,
    255,
    56,
    .55
  );

  box-shadow:

  0 38px 90px

  rgba(
    0,
    0,
    0,
    .42
  );

}


.gateway-store-top{

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:

  space-between;

}


.gateway-store-number{

  display:grid;

  place-items:center;

  width:56px;

  height:56px;

  border-radius:17px;

  color:#061328;

  background:#9dff38;

  font-size:14px;

  font-weight:950;

}


.gateway-store-status{

  display:flex;

  align-items:center;

  gap:9px;

  color:

  rgba(
    255,
    255,
    255,
    .72
  );

  font-size:13px;

  font-weight:850;

}


.gateway-store-status i{

  width:8px;

  height:8px;

  border-radius:50%;

  background:#9dff38;

  box-shadow:

  0 0 15px

  #9dff38;

}


.gateway-store-body{

  position:relative;

  z-index:2;

  display:flex;

  align-items:flex-end;

  justify-content:

  space-between;

  gap:25px;

  margin-top:42px;

}


.gateway-card-label{

  display:block;

  margin-bottom:10px;

  color:#58c9ff;

  font-size:13px;

  font-weight:850;

}


.gateway-store-body h3{

  margin:0;

  color:#fff;

  font-size:

  clamp(
    28px,
    2.6vw,
    45px
  );

  line-height:1.2;

  font-weight:950;

}


.gateway-store-body h3 strong{

  color:#9dff38;

}


.gateway-store-body p{

  max-width:470px;

  margin:

  14px 0 0;

  color:

  rgba(
    255,
    255,
    255,
    .65
  );

  font-size:15px;

  line-height:1.8;

}


.gateway-main-arrow{

  flex:0 0 auto;

  display:grid;

  place-items:center;

  width:68px;

  height:68px;

  border-radius:50%;

  color:#061328;

  background:#fff;

  font-size:27px;

  transition:

  transform .3s ease,

  background .3s ease;

}


.gateway-store-card:hover
.gateway-main-arrow{

  transform:

  translateX(-7px);

  background:#9dff38;

}


.gateway-store-footer{

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:

  space-between;

  gap:20px;

  margin-top:30px;

  padding-top:22px;

  border-top:

  1px solid

  rgba(
    255,
    255,
    255,
    .12
  );

  color:

  rgba(
    255,
    255,
    255,
    .52
  );

  font-size:12px;

}


.gateway-store-footer strong{

  color:#9dff38;

  font-size:14px;

}


/* =========================================================
   SECONDARY CARDS
   ========================================================= */

.gateway-secondary{

  display:grid;

  grid-template-columns:

  repeat(
    2,
    minmax(0,1fr)
  );

  gap:16px;

}


.gateway-small-card{

  display:grid;

  grid-template-columns:

  auto 1fr auto;

  align-items:center;

  gap:18px;

  min-height:150px;

  padding:23px;

  border:

  1px solid

  rgba(
    255,
    255,
    255,
    .14
  );

  border-radius:25px;

  color:#fff;

  text-decoration:none;

  background:

  rgba(
    255,
    255,
    255,
    .055
  );

  backdrop-filter:

  blur(16px);

  transition:

  transform .3s ease,

  background .3s ease,

  border-color .3s ease;

}


.gateway-small-card:hover{

  transform:

  translateY(-5px);

  background:

  rgba(
    255,
    255,
    255,
    .09
  );

  border-color:

  rgba(
    88,
    201,
    255,
    .45
  );

}


.gateway-small-number{

  display:grid;

  place-items:center;

  width:45px;

  height:45px;

  border-radius:14px;

  color:#07142b;

  background:#9dff38;

  font-size:12px;

  font-weight:950;

}


.gateway-small-card div > span{

  display:block;

  margin-bottom:6px;

  color:#58c9ff;

  font-size:11px;

  font-weight:850;

}


.gateway-small-card h3{

  margin:0;

  color:#fff;

  font-size:

  clamp(
    17px,
    1.25vw,
    21px
  );

  font-weight:900;

}


.gateway-small-card p{

  margin:

  7px 0 0;

  color:

  rgba(
    255,
    255,
    255,
    .52
  );

  font-size:12px;

  line-height:1.65;

}


.gateway-small-arrow{

  color:#58c9ff;

  font-size:21px;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){


  .fanbek-gateway{

    padding:

    80px 20px;

  }


  .gateway-shell{

    grid-template-columns:1fr;

    gap:45px;

  }


  .gateway-content{

    max-width:100%;

    text-align:right;

  }


  .gateway-title{

    max-width:550px;

    font-size:

    clamp(
      44px,
      12vw,
      66px
    );

    letter-spacing:-2px;

  }


  .gateway-description{

    max-width:540px;

    font-size:15px;

  }


  .gateway-store-card{

    min-height:auto;

    border-radius:26px;

  }


  .gateway-secondary{

    grid-template-columns:1fr;

  }

}


@media(max-width:560px){


  .fanbek-gateway{

    padding:

    72px 16px;

  }


  .gateway-title{

    font-size:

    clamp(
      39px,
      12.5vw,
      54px
    );

    line-height:1.08;

  }


  .gateway-description{

    margin-top:21px;

    line-height:1.8;

  }


  .gateway-tags{

    margin-top:22px;

  }


  .gateway-store-card{

    padding:22px;

    border-radius:23px;

  }


  .gateway-store-body{

    align-items:flex-start;

    margin-top:32px;

  }


  .gateway-store-body h3{

    font-size:29px;

  }


  .gateway-store-body p{

    font-size:13px;

  }


  .gateway-main-arrow{

    width:49px;

    height:49px;

    font-size:21px;

  }


  .gateway-store-footer{

    align-items:flex-start;

    flex-direction:column;

    gap:9px;

  }


  .gateway-small-card{

    min-height:125px;

    padding:18px;

    gap:13px;

  }


  .gateway-small-card p{

    max-width:210px;

  }

}


/* تقليل الحركة لمن يفضل ذلك */

@media(
  prefers-reduced-motion:
  reduce
){

  .gateway-store-card,

  .gateway-small-card,

  .gateway-main-arrow{

    transition:none;

  }

}







/* =========================================================
   FANBEK — CUSTOM KIT EXPERIENCE
   ========================================================= */

.custom-kit{

  position:relative;

  isolation:isolate;

  overflow:hidden;

  padding:

  clamp(95px,10vw,170px)

  clamp(22px,7vw,130px);

  background:

  radial-gradient(
    circle at 20% 48%,
    rgba(39,118,255,.28),
    transparent 34%
  ),

  radial-gradient(
    circle at 82% 20%,
    rgba(157,255,56,.07),
    transparent 25%
  ),

  linear-gradient(
    110deg,
    #031027,
    #071a3c 50%,
    #0c2856
  );

}


.custom-kit::before{

  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  opacity:.13;

  background:

  repeating-linear-gradient(
    115deg,
    transparent 0 70px,
    rgba(255,255,255,.06) 71px,
    transparent 72px 140px
  );

}


.custom-kit__shell{

  width:min(1500px,100%);

  margin:auto;

  display:grid;

  grid-template-columns:

  minmax(480px,1fr)

  minmax(520px,1fr);

  align-items:center;

  gap:

  clamp(
    70px,
    10vw,
    170px
  );

}


/* النص */

.custom-kit__eyebrow{

  display:flex;

  align-items:center;

  gap:11px;

  margin-bottom:20px;

  color:#58c9ff;

  font-size:14px;

  font-weight:900;

}


.custom-kit__eyebrow span{

  width:9px;

  height:9px;

  border-radius:50%;

  background:#9dff38;

  box-shadow:

  0 0 18px

  #9dff38;

}


.custom-kit__title{

  margin:0;

  color:#fff;

  font-size:

  clamp(
    55px,
    5.8vw,
    98px
  );

  line-height:1;

  letter-spacing:-4px;

  font-weight:950;

}


.custom-kit__title strong{

  display:block;

  color:#57caff;

}


.custom-kit__title span{

  display:block;

  color:#9dff38;

}


.custom-kit__description{

  max-width:620px;

  margin:30px 0 0;

  color:

  rgba(
    255,
    255,
    255,
    .67
  );

  font-size:

  clamp(
    16px,
    1.15vw,
    20px
  );

  line-height:1.9;

}


.custom-kit__features{

  display:flex;

  flex-wrap:wrap;

  gap:11px;

  margin-top:29px;

}


.custom-kit__features span{

  display:flex;

  align-items:center;

  gap:8px;

  padding:10px 15px;

  border:

  1px solid

  rgba(
    255,
    255,
    255,
    .13
  );

  border-radius:100px;

  color:

  rgba(
    255,
    255,
    255,
    .78
  );

  background:

  rgba(
    255,
    255,
    255,
    .055
  );

  font-size:13px;

  font-weight:800;

}


.custom-kit__features i{

  display:grid;

  place-items:center;

  width:19px;

  height:19px;

  border-radius:50%;

  color:#061329;

  background:#9dff38;

  font-size:10px;

  font-style:normal;

}


.custom-kit__button{

  display:inline-flex;

  align-items:center;

  gap:28px;

  margin-top:35px;

  padding:

  16px 23px;

  border-radius:15px;

  color:#06142e;

  background:#fff;

  text-decoration:none;

  font-size:15px;

  font-weight:950;

  transition:

  transform .3s ease,

  background .3s ease;

}


.custom-kit__button:hover{

  transform:

  translateY(-4px);

  background:#9dff38;

}


.custom-kit__button i{

  color:#1b65db;

  font-size:20px;

  font-style:normal;

}


/* =========================================================
   JERSEY STAGE
   ========================================================= */

.jersey-stage{

  position:relative;

  min-height:670px;

  display:grid;

  place-items:center;

}


.jersey-stage__label{

  position:absolute;

  top:25px;

  right:0;

  display:flex;

  flex-direction:column;

  gap:5px;

}


.jersey-stage__label span{

  color:#58c9ff;

  font-size:11px;

  font-weight:950;

  letter-spacing:3px;

}


.jersey-stage__label strong{

  color:

  rgba(
    255,
    255,
    255,
    .62
  );

  font-size:13px;

}


.jersey-halo{

  position:absolute;

  width:500px;

  height:500px;

  border-radius:50%;

  background:

  radial-gradient(
    circle,
    rgba(41,115,255,.36),
    rgba(22,75,180,.12) 43%,
    transparent 70%
  );

  filter:blur(4px);

}


/* جسم التيشيرت */

.premium-jersey{

  position:relative;

  z-index:3;

  width:

  clamp(
    380px,
    34vw,
    560px
  );

  height:580px;

  filter:

  drop-shadow(
    0 45px 50px
    rgba(0,0,0,.42)
  );

}


.premium-jersey__body{

  position:absolute;

  top:70px;

  right:17%;

  width:66%;

  height:500px;

  overflow:hidden;

  clip-path:

  polygon(
    7% 0,
    31% 0,
    37% 8%,
    63% 8%,
    69% 0,
    93% 0,
    100% 10%,
    94% 100%,
    6% 100%,
    0 10%
  );

  border-radius:

  30px 30px

  15px 15px;

  background:

  linear-gradient(
    115deg,
    #1952a8 0%,
    #2c78e9 37%,
    #15438e 73%,
    #09275c 100%
  );

  box-shadow:

  inset 20px 0 35px

  rgba(
    255,
    255,
    255,
    .08
  ),

  inset -25px 0 40px

  rgba(
    0,
    0,
    0,
    .2
  );

}


.premium-jersey__texture{

  position:absolute;

  inset:0;

  opacity:.18;

  background-image:

  radial-gradient(
    rgba(255,255,255,.4)
    .65px,
    transparent .8px
  );

  background-size:

  5px 5px;

}


.premium-jersey__sleeve{

  position:absolute;

  top:74px;

  width:36%;

  height:195px;

  z-index:-1;

  background:

  linear-gradient(
    135deg,
    #2773e4,
    #0a347b
  );

}


.premium-jersey__sleeve--right{

  right:0;

  clip-path:

  polygon(
    35% 0,
    100% 31%,
    75% 100%,
    0 68%
  );

}


.premium-jersey__sleeve--left{

  left:0;

  clip-path:

  polygon(
    65% 0,
    0 31%,
    25% 100%,
    100% 68%
  );

}


.premium-jersey__collar{

  position:absolute;

  z-index:5;

  top:-4px;

  left:50%;

  width:100px;

  height:62px;

  transform:

  translateX(-50%);

  border-radius:

  0 0 55px 55px;

  background:#061a42;

}


.premium-jersey__collar span{

  position:absolute;

  inset:9px 13px 13px;

  border-radius:

  0 0 45px 45px;

  background:#1f65c8;

}


.premium-jersey__shoulder{

  position:absolute;

  top:26px;

  width:27%;

  height:7px;

  border-radius:20px;

  background:

  rgba(
    157,
    255,
    56,
    .78
  );

}


.premium-jersey__shoulder--right{

  right:10%;

  transform:

  rotate(12deg);

}


.premium-jersey__shoulder--left{

  left:10%;

  transform:

  rotate(-12deg);

}


.premium-jersey__identity{

  position:absolute;

  inset:

  115px 0 auto;

  display:flex;

  align-items:center;

  flex-direction:column;

  text-align:center;

}


.premium-jersey__brand{

  color:

  rgba(
    255,
    255,
    255,
    .83
  );

  font-size:13px;

  font-weight:950;

  letter-spacing:4px;

}


.premium-jersey__name{

  margin-top:50px;

  color:#fff;

  font-size:

  clamp(
    24px,
    2.4vw,
    39px
  );

  line-height:1;

  font-weight:950;

  text-shadow:

  0 3px 15px

  rgba(
    0,
    0,
    0,
    .25
  );

}


.premium-jersey__number{

  margin-top:17px;

  color:

  rgba(
    255,
    255,
    255,
    .94
  );

  font-size:

  clamp(
    110px,
    10vw,
    165px
  );

  line-height:.85;

  font-weight:950;

  text-shadow:

  0 8px 25px

  rgba(
    0,
    0,
    0,
    .22
  );

}


.premium-jersey__hem{

  position:absolute;

  right:7%;

  bottom:15px;

  left:7%;

  height:4px;

  border-radius:10px;

  background:

  rgba(
    157,
    255,
    56,
    .55
  );

}


/* لوحة التخصيص */

.kit-personalizer{

  position:absolute;

  z-index:5;

  left:-25px;

  bottom:60px;

  width:245px;

  padding:22px;

  border:

  1px solid

  rgba(
    255,
    255,
    255,
    .18
  );

  border-radius:22px;

  background:

  rgba(
    2,
    11,
    29,
    .86
  );

  box-shadow:

  0 30px 55px

  rgba(
    0,
    0,
    0,
    .35
  );

  backdrop-filter:

  blur(20px);

}


.kit-personalizer__head{

  display:flex;

  align-items:center;

  justify-content:

  space-between;

  padding-bottom:15px;

  border-bottom:

  1px solid

  rgba(
    255,
    255,
    255,
    .12
  );

  color:

  rgba(
    255,
    255,
    255,
    .5
  );

  font-size:10px;

  font-weight:950;

  letter-spacing:2px;

}


.kit-personalizer__head i{

  width:8px;

  height:8px;

  border-radius:50%;

  background:#9dff38;

  box-shadow:

  0 0 13px

  #9dff38;

}


.kit-personalizer__row{

  display:flex;

  align-items:center;

  justify-content:

  space-between;

  padding:16px 0;

  border-bottom:

  1px solid

  rgba(
    255,
    255,
    255,
    .09
  );

}


.kit-personalizer__row span{

  color:#58c9ff;

  font-size:11px;

  font-weight:800;

}


.kit-personalizer__row strong{

  color:#fff;

  font-size:13px;

}


.kit-personalizer__status{

  display:flex;

  align-items:center;

  gap:8px;

  padding-top:16px;

  color:

  rgba(
    255,
    255,
    255,
    .56
  );

  font-size:11px;

}


.kit-personalizer__status i{

  width:7px;

  height:7px;

  border-radius:50%;

  background:#9dff38;

}


.jersey-stage__floating{

  position:absolute;

  color:

  rgba(
    255,
    255,
    255,
    .055
  );

  font-size:

  clamp(
    35px,
    5vw,
    80px
  );

  font-weight:950;

}


.jersey-stage__floating--one{

  top:22%;

  left:-3%;

}


.jersey-stage__floating--two{

  right:-8%;

  bottom:12%;

}


/* =========================================================
   MATCHDAY — FULL WIDTH
   ========================================================= */

.matchday-countdown{

  position:relative;

  isolation:isolate;

  overflow:hidden;

  padding:

  clamp(
    95px,
    9vw,
    155px
  )

  clamp(
    22px,
    7vw,
    130px
  );

  background:

  radial-gradient(
    circle at 75% 35%,
    rgba(37,109,230,.31),
    transparent 34%
  ),

  linear-gradient(
    100deg,
    #020a19,
    #061736 52%,
    #0c2c62
  );

}


.matchday-countdown::before{

  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  opacity:.08;

  background-image:

  linear-gradient(
    rgba(255,255,255,.2) 1px,
    transparent 1px
  ),

  linear-gradient(
    90deg,
    rgba(255,255,255,.2) 1px,
    transparent 1px
  );

  background-size:

  75px 75px;

}


.matchday-countdown__shell{

  width:

  min(
    1550px,
    100%
  );

  margin:auto;

  display:grid;

  grid-template-columns:

  minmax(
    400px,
    .78fr
  )

  minmax(
    650px,
    1.22fr
  );

  align-items:center;

  gap:

  clamp(
    60px,
    8vw,
    135px
  );

}


/* رسالة الماتش */

.matchday-countdown__eyebrow{

  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:20px;

  color:#58c9ff;

  font-size:13px;

  font-weight:900;

}


.matchday-countdown__eyebrow span{

  width:9px;

  height:9px;

  border-radius:50%;

  background:#9dff38;

  box-shadow:

  0 0 18px

  #9dff38;

}


.matchday-countdown__content h2{

  margin:0;

  color:#fff;

  font-size:

  clamp(
    52px,
    5vw,
    86px
  );

  line-height:1.06;

  letter-spacing:-3px;

  font-weight:950;

}


.matchday-countdown__content h2 strong{

  display:block;

  color:#9dff38;

}


.matchday-countdown__content p{

  max-width:540px;

  margin:26px 0 0;

  color:

  rgba(
    255,
    255,
    255,
    .65
  );

  font-size:

  clamp(
    15px,
    1.1vw,
    19px
  );

  line-height:1.9;

}


.matchday-countdown__button{

  display:inline-flex;

  align-items:center;

  gap:25px;

  margin-top:32px;

  padding:

  16px 22px;

  border-radius:15px;

  color:#07162f;

  background:#fff;

  text-decoration:none;

  font-size:14px;

  font-weight:950;

  transition:

  transform .3s ease,

  background .3s ease;

}


.matchday-countdown__button:hover{

  transform:

  translateY(-4px);

  background:#9dff38;

}


.matchday-countdown__button span{

  color:#1c64db;

  font-size:19px;

}


/* لوحة الماتش */

.match-board{

  overflow:hidden;

  border:

  1px solid

  rgba(
    255,
    255,
    255,
    .17
  );

  border-radius:31px;

  background:

  linear-gradient(
    145deg,
    rgba(26,57,107,.9),
    rgba(3,15,38,.96)
  );

  box-shadow:

  0 35px 80px

  rgba(
    0,
    0,
    0,
    .35
  );

}


.match-board__top{

  display:flex;

  align-items:center;

  justify-content:

  space-between;

  padding:

  20px 27px;

  border-bottom:

  1px solid

  rgba(
    255,
    255,
    255,
    .1
  );

  color:

  rgba(
    255,
    255,
    255,
    .48
  );

  font-size:10px;

  font-weight:950;

  letter-spacing:2px;

}


.match-board__top strong{

  display:flex;

  align-items:center;

  gap:9px;

  color:#fff;

  font-size:11px;

}


.match-board__top i{

  width:8px;

  height:8px;

  border-radius:50%;

  background:#ff445d;

  box-shadow:

  0 0 15px

  #ff445d;

}


.match-board__timer{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:

  clamp(
    14px,
    2vw,
    28px
  );

  padding:

  43px 25px;

}


.match-time{

  display:flex;

  align-items:center;

  flex-direction:column;

  justify-content:center;

  width:

  clamp(
    120px,
    10vw,
    165px
  );

  height:

  clamp(
    130px,
    10vw,
    165px
  );

  border:

  1px solid

  rgba(
    255,
    255,
    255,
    .13
  );

  border-radius:24px;

  background:

  rgba(
    255,
    255,
    255,
    .055
  );

}


.match-time strong{

  color:#fff;

  font-size:

  clamp(
    48px,
    4.3vw,
    73px
  );

  line-height:1;

  font-weight:950;

}


.match-time span{

  margin-top:13px;

  color:#58c9ff;

  font-size:12px;

  font-weight:850;

}


.match-board__timer > b{

  color:#9dff38;

  font-size:37px;

}


.match-board__journey{

  display:flex;

  align-items:flex-start;

  padding:

  28px 35px;

  border-top:

  1px solid

  rgba(
    255,
    255,
    255,
    .09
  );

  border-bottom:

  1px solid

  rgba(
    255,
    255,
    255,
    .09
  );

}


.match-step{

  flex:0 0 auto;

  display:flex;

  align-items:center;

  flex-direction:column;

  gap:10px;

  min-width:75px;

}


.match-step i{

  display:grid;

  place-items:center;

  width:39px;

  height:39px;

  border:

  1px solid

  rgba(
    255,
    255,
    255,
    .16
  );

  border-radius:50%;

  color:

  rgba(
    255,
    255,
    255,
    .55
  );

  background:#0a2049;

  font-size:10px;

  font-style:normal;

  font-weight:950;

}


.match-step span{

  color:

  rgba(
    255,
    255,
    255,
    .53
  );

  font-size:11px;

  font-weight:800;

  white-space:nowrap;

}


.match-step.is-done i{

  color:#07142d;

  background:#58c9ff;

}


.match-step.is-active i{

  color:#07142d;

  background:#9dff38;

  box-shadow:

  0 0 0 7px

  rgba(
    157,
    255,
    56,
    .09
  ),

  0 0 25px

  rgba(
    157,
    255,
    56,
    .38
  );

}


.match-step.is-active span{

  color:#fff;

}


.match-line{

  flex:1;

  height:2px;

  margin-top:19px;

  background:

  rgba(
    255,
    255,
    255,
    .12
  );

}


.match-line.is-active{

  background:

  linear-gradient(
    90deg,
    #58c9ff,
    #9dff38
  );

}


.match-board__footer{

  display:flex;

  align-items:center;

  justify-content:

  space-between;

  gap:20px;

  padding:

  20px 27px;

}


.match-board__footer span{

  display:flex;

  align-items:center;

  gap:9px;

  color:

  rgba(
    255,
    255,
    255,
    .57
  );

  font-size:12px;

}


.match-board__footer span i{

  width:8px;

  height:8px;

  border-radius:50%;

  background:#9dff38;

  box-shadow:

  0 0 13px

  #9dff38;

}


.match-board__footer strong{

  color:#9dff38;

  font-size:13px;

}


/* =========================================================
   TABLET + MOBILE
   ========================================================= */

@media(max-width:1050px){


  .custom-kit__shell,

  .matchday-countdown__shell{

    grid-template-columns:1fr;

  }


  .custom-kit__content,

  .matchday-countdown__content{

    max-width:700px;

  }


  .jersey-stage{

    min-height:640px;

  }

}


@media(max-width:650px){


  .custom-kit,

  .matchday-countdown{

    padding:

    75px 17px;

  }


  .custom-kit__title,

  .matchday-countdown__content h2{

    font-size:

    clamp(
      42px,
      12vw,
      58px
    );

    letter-spacing:-2px;

  }


  .custom-kit__description,

  .matchday-countdown__content p{

    font-size:14px;

  }


  .jersey-stage{

    min-height:570px;

    transform:

    scale(.92);

  }


  .premium-jersey{

    width:370px;

  }


  .kit-personalizer{

    left:0;

    bottom:15px;

    width:205px;

  }


  .jersey-stage__floating{

    display:none;

  }


  .match-board{

    border-radius:23px;

  }


  .match-board__timer{

    gap:7px;

    padding:

    30px 10px;

  }


  .match-time{

    width:83px;

    height:105px;

    border-radius:17px;

  }


  .match-time strong{

    font-size:39px;

  }


  .match-time span{

    margin-top:8px;

    font-size:10px;

  }


  .match-board__timer > b{

    font-size:23px;

  }


  .match-board__journey{

    overflow-x:auto;

    padding:

    25px 18px;

  }


  .match-step{

    min-width:78px;

  }


  .match-line{

    min-width:45px;

  }


  .match-board__footer{

    align-items:flex-start;

    flex-direction:column;

  }

}





/* =========================================================
   FANBEK — MATCHDAY COLLECTION V2
   ========================================================= */

.matchday-kit{

  position:relative;

  isolation:isolate;

  overflow:hidden;

  padding:

  clamp(95px,9vw,160px)

  clamp(20px,6vw,115px);

  background:

  radial-gradient(
    circle at 77% 42%,
    rgba(35,108,225,.26),
    transparent 32%
  ),

  radial-gradient(
    circle at 13% 20%,
    rgba(157,255,56,.06),
    transparent 24%
  ),

  linear-gradient(
    112deg,
    #020a19 0%,
    #06142f 49%,
    #0a2450 100%
  );

}


.matchday-kit::before{

  content:"";

  position:absolute;

  inset:0;

  z-index:-2;

  opacity:.12;

  background:

  linear-gradient(
    90deg,
    transparent 49.8%,
    rgba(255,255,255,.16) 50%,
    transparent 50.2%
  ),

  radial-gradient(
    circle at center,
    transparent 0 22%,
    rgba(255,255,255,.13) 22.2%,
    transparent 22.5%
  );

}


.matchday-kit__stadium-light{

  position:absolute;

  top:-220px;

  left:52%;

  z-index:-1;

  width:600px;

  height:700px;

  transform:

  translateX(-50%);

  opacity:.18;

  clip-path:

  polygon(
    35% 0,
    65% 0,
    100% 100%,
    0 100%
  );

  background:

  linear-gradient(
    to bottom,
    rgba(91,202,255,.8),
    transparent
  );

  filter:blur(25px);

}


.matchday-kit__shell{

  position:relative;

  width:min(1560px,100%);

  margin:auto;

  display:grid;

  grid-template-columns:

  minmax(430px,.83fr)

  minmax(650px,1.17fr);

  align-items:center;

  gap:

  clamp(70px,8vw,140px);

}


/* =========================================================
   CONTENT
   ========================================================= */

.matchday-kit__content{

  position:relative;

  z-index:5;

}


.matchday-kit__eyebrow{

  display:flex;

  align-items:center;

  gap:11px;

  margin-bottom:20px;

  color:#58c9ff;

  font-size:12px;

  font-weight:950;

  letter-spacing:2px;

}


.matchday-kit__eyebrow span{

  width:9px;

  height:9px;

  border-radius:50%;

  background:#9dff38;

  box-shadow:

  0 0 17px

  rgba(157,255,56,.8);

}


.matchday-kit__title{

  margin:0;

  color:#fff;

  font-size:

  clamp(53px,5.1vw,87px);

  line-height:1.03;

  letter-spacing:-3px;

  font-weight:950;

}


.matchday-kit__title strong{

  display:block;

  color:#9dff38;

}


.matchday-kit__title span{

  display:block;

  color:#fff;

}


.matchday-kit__description{

  max-width:590px;

  margin:27px 0 0;

  color:

  rgba(255,255,255,.65);

  font-size:

  clamp(15px,1.05vw,18px);

  line-height:1.95;

}


.matchday-kit__categories{

  display:grid;

  grid-template-columns:

  repeat(2,minmax(0,1fr));

  gap:11px;

  margin-top:34px;

}


.matchday-kit__categories a{

  position:relative;

  display:grid;

  grid-template-columns:

  46px 1fr 20px;

  align-items:center;

  gap:13px;

  min-height:83px;

  padding:13px;

  overflow:hidden;

  border:

  1px solid

  rgba(255,255,255,.13);

  border-radius:18px;

  color:#fff;

  background:

  linear-gradient(
    125deg,
    rgba(255,255,255,.075),
    rgba(255,255,255,.035)
  );

  text-decoration:none;

  transition:

  transform .3s ease,

  border-color .3s ease,

  background .3s ease;

}


.matchday-kit__categories a::before{

  content:"";

  position:absolute;

  top:0;

  right:-100%;

  width:100%;

  height:100%;

  background:

  linear-gradient(
    90deg,
    transparent,
    rgba(157,255,56,.08),
    transparent
  );

  transition:

  right .6s ease;

}


.matchday-kit__categories a:hover{

  transform:

  translateY(-4px);

  border-color:

  rgba(157,255,56,.45);

  background:

  rgba(255,255,255,.09);

}


.matchday-kit__categories a:hover::before{

  right:100%;

}


.matchday-kit__categories b{

  display:grid;

  place-items:center;

  width:44px;

  height:44px;

  border-radius:13px;

  color:#06142e;

  background:#9dff38;

  font-size:11px;

  font-weight:950;

}


.matchday-kit__categories div{

  display:flex;

  flex-direction:column;

  gap:5px;

}


.matchday-kit__categories strong{

  color:#fff;

  font-size:13px;

  font-weight:950;

}


.matchday-kit__categories div span{

  color:

  rgba(255,255,255,.42);

  font-size:10px;

  font-weight:700;

}


.matchday-kit__categories i{

  color:#58c9ff;

  font-size:18px;

  font-style:normal;

  transition:

  transform .3s ease;

}


.matchday-kit__categories a:hover i{

  transform:

  translateX(-5px);

}


.matchday-kit__shop-button{

  display:inline-flex;

  align-items:center;

  gap:27px;

  margin-top:25px;

  padding:15px 21px;

  border-radius:14px;

  color:#06142e;

  background:#fff;

  text-decoration:none;

  font-size:13px;

  font-weight:950;

  transition:

  transform .3s ease,

  background .3s ease;

}


.matchday-kit__shop-button:hover{

  transform:

  translateY(-4px);

  background:#9dff38;

}


.matchday-kit__shop-button i{

  color:#1f68dc;

  font-size:18px;

  font-style:normal;

}


/* =========================================================
   MATCHDAY LOCKER
   ========================================================= */

.matchday-locker{

  position:relative;

  overflow:hidden;

  border:

  1px solid

  rgba(255,255,255,.15);

  border-radius:31px;

  background:

  linear-gradient(
    145deg,
    rgba(22,54,106,.88),
    rgba(3,14,34,.97)
  );

  box-shadow:

  0 45px 100px

  rgba(0,0,0,.38);

}


.matchday-locker::before{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

  linear-gradient(
    115deg,
    rgba(255,255,255,.07),
    transparent 25%
  );

}


.matchday-locker__head{

  position:relative;

  z-index:3;

  display:flex;

  align-items:center;

  justify-content:

  space-between;

  padding:21px 25px;

  border-bottom:

  1px solid

  rgba(255,255,255,.1);

}


.matchday-locker__head div{

  display:flex;

  flex-direction:column;

  gap:4px;

}


.matchday-locker__head div span{

  color:#58c9ff;

  font-size:9px;

  font-weight:950;

  letter-spacing:2px;

}


.matchday-locker__head div strong{

  color:#fff;

  font-size:14px;

}


.matchday-locker__head p{

  display:flex;

  align-items:center;

  gap:8px;

  margin:0;

  color:

  rgba(255,255,255,.55);

  font-size:10px;

  font-weight:800;

}


.matchday-locker__head p i{

  width:7px;

  height:7px;

  border-radius:50%;

  background:#9dff38;

  box-shadow:

  0 0 13px

  #9dff38;

}


/* =========================================================
   DISPLAY AREA
   ========================================================= */

.matchday-locker__display{

  position:relative;

  min-height:630px;

  overflow:hidden;

  background:

  radial-gradient(
    circle at 50% 38%,
    rgba(44,113,230,.24),
    transparent 43%
  ),

  linear-gradient(
    180deg,
    rgba(255,255,255,.015),
    rgba(0,0,0,.12)
  );

}


.matchday-locker__display::before{

  content:"";

  position:absolute;

  inset:0;

  opacity:.11;

  background:

  linear-gradient(
    90deg,
    transparent 49.8%,
    rgba(255,255,255,.3) 50%,
    transparent 50.2%
  ),

  repeating-linear-gradient(
    90deg,
    transparent 0 95px,
    rgba(255,255,255,.06) 96px,
    transparent 97px 190px
  );

}


.locker-word{

  position:absolute;

  top:43%;

  left:50%;

  transform:

  translate(-50%,-50%);

  color:

  rgba(255,255,255,.025);

  font-size:

  clamp(90px,11vw,180px);

  font-weight:950;

  letter-spacing:10px;

}


.locker-light{

  position:absolute;

  top:-100px;

  width:240px;

  height:600px;

  opacity:.12;

  clip-path:

  polygon(
    40% 0,
    60% 0,
    100% 100%,
    0 100%
  );

  background:

  linear-gradient(
    #58c9ff,
    transparent
  );

  filter:blur(17px);

}


.locker-light--one{

  left:11%;

  transform:

  rotate(13deg);

}


.locker-light--two{

  right:11%;

  transform:

  rotate(-13deg);

}


/* =========================================================
   PRODUCTS
   ========================================================= */

.kit-product{

  position:absolute;

  z-index:5;

  transition:

  transform .4s ease;

}


.kit-product:hover{

  transform:

  translateY(-10px);

}


.kit-product--jersey{

  top:74px;

  right:8%;

}


.kit-product--pants{

  right:10%;

  bottom:49px;

}


.kit-product--cap{

  top:70px;

  left:10%;

}


.kit-product--flag{

  left:8%;

  bottom:57px;

}


.kit-product__tag{

  position:absolute;

  display:flex;

  align-items:center;

  gap:7px;

  padding:

  8px 10px;

  border:

  1px solid

  rgba(255,255,255,.14);

  border-radius:10px;

  background:

  rgba(3,13,32,.88);

  box-shadow:

  0 15px 25px

  rgba(0,0,0,.25);

  backdrop-filter:

  blur(10px);

  white-space:nowrap;

}


.kit-product__tag span{

  display:grid;

  place-items:center;

  width:22px;

  height:22px;

  border-radius:7px;

  color:#06142e;

  background:#9dff38;

  font-size:8px;

  font-weight:950;

}


.kit-product__tag strong{

  color:#fff;

  font-size:10px;

}


/* =========================================================
   JERSEY
   ========================================================= */

.locker-jersey{

  position:relative;

  width:250px;

  height:280px;

  filter:

  drop-shadow(
    0 25px 30px

    rgba(0,0,0,.36)
  );

}


.locker-jersey__body{

  position:absolute;

  top:36px;

  left:25%;

  width:50%;

  height:235px;

  overflow:hidden;

  clip-path:

  polygon(
    7% 0,
    31% 0,
    38% 8%,
    62% 8%,
    69% 0,
    93% 0,
    100% 12%,
    94% 100%,
    6% 100%,
    0 12%
  );

  background:

  linear-gradient(
    120deg,
    #236ce0,
    #164da8 58%,
    #08275f
  );

  box-shadow:

  inset 12px 0 20px

  rgba(255,255,255,.08),

  inset -15px 0 20px

  rgba(0,0,0,.18);

}


.locker-jersey__texture{

  position:absolute;

  inset:0;

  opacity:.15;

  background-image:

  radial-gradient(
    rgba(255,255,255,.6)
    .5px,
    transparent .8px
  );

  background-size:

  5px 5px;

}


.locker-jersey__sleeve{

  position:absolute;

  top:38px;

  width:34%;

  height:100px;

  background:

  linear-gradient(
    140deg,
    #2878ee,
    #0b347a
  );

}


.locker-jersey__sleeve--right{

  right:4%;

  clip-path:

  polygon(
    28% 0,
    100% 34%,
    74% 100%,
    0 65%
  );

}


.locker-jersey__sleeve--left{

  left:4%;

  clip-path:

  polygon(
    72% 0,
    0 34%,
    26% 100%,
    100% 65%
  );

}


.locker-jersey__collar{

  position:absolute;

  top:-3px;

  left:50%;

  z-index:4;

  width:45px;

  height:27px;

  transform:

  translateX(-50%);

  border-radius:

  0 0 25px 25px;

  background:#051a42;

}


.locker-jersey__collar span{

  position:absolute;

  inset:5px 7px 7px;

  border-radius:

  0 0 20px 20px;

  background:#276fd6;

}


.locker-jersey__stripe{

  position:absolute;

  top:25px;

  width:27%;

  height:4px;

  border-radius:10px;

  background:#9dff38;

}


.locker-jersey__stripe--one{

  right:8%;

  transform:

  rotate(12deg);

}


.locker-jersey__stripe--two{

  left:8%;

  transform:

  rotate(-12deg);

}


.locker-jersey__brand{

  position:absolute;

  top:53px;

  left:50%;

  transform:

  translateX(-50%);

  color:

  rgba(255,255,255,.78);

  font-size:7px;

  font-weight:950;

  letter-spacing:2px;

}


.locker-jersey strong{

  position:absolute;

  top:78px;

  left:50%;

  transform:

  translateX(-50%);

  color:#fff;

  font-size:76px;

  line-height:1;

  font-weight:950;

}


.locker-jersey small{

  position:absolute;

  top:158px;

  left:50%;

  transform:

  translateX(-50%);

  color:

  rgba(255,255,255,.48);

  font-size:6px;

  font-weight:950;

  letter-spacing:1px;

}


.kit-product--jersey .kit-product__tag{

  right:-6px;

  bottom:-8px;

}


/* =========================================================
   SPORT PANTS
   ========================================================= */

.locker-pants{

  position:relative;

  width:170px;

  height:235px;

  filter:

  drop-shadow(
    0 25px 25px

    rgba(0,0,0,.4)
  );

}


.locker-pants__waist{

  position:absolute;

  top:0;

  left:15%;

  z-index:4;

  width:70%;

  height:30px;

  border-radius:

  12px 12px 5px 5px;

  background:

  linear-gradient(
    #173d7b,
    #082452
  );

  box-shadow:

  inset 0 -5px 7px

  rgba(0,0,0,.2);

}


.locker-pants__waist span{

  position:absolute;

  top:10px;

  left:50%;

  width:24px;

  height:24px;

  transform:

  translateX(-50%);

  border-right:

  2px solid

  #9dff38;

  border-left:

  2px solid

  #9dff38;

  border-radius:0 0 10px 10px;

}


.locker-pants__leg{

  position:absolute;

  top:21px;

  width:49%;

  height:207px;

  overflow:hidden;

  background:

  linear-gradient(
    110deg,
    #123873,
    #071d46
  );

}


.locker-pants__leg--right{

  right:5%;

  clip-path:

  polygon(
    0 0,
    100% 0,
    88% 100%,
    22% 100%
  );

}


.locker-pants__leg--left{

  left:5%;

  clip-path:

  polygon(
    0 0,
    100% 0,
    78% 100%,
    12% 100%
  );

}


.locker-pants__leg i{

  position:absolute;

  top:10px;

  bottom:10px;

  width:5px;

  border-radius:5px;

  background:

  linear-gradient(
    #9dff38,
    #58c9ff
  );

}


.locker-pants__leg--right i{

  right:8px;

}


.locker-pants__leg--left i{

  left:8px;

}


.locker-pants__logo{

  position:absolute;

  z-index:5;

  top:45px;

  right:30px;

  display:grid;

  place-items:center;

  width:23px;

  height:23px;

  border:

  1px solid

  rgba(255,255,255,.4);

  border-radius:50%;

  color:#fff;

  font-size:9px;

  font-weight:950;

}


.kit-product--pants .kit-product__tag{

  right:-23px;

  bottom:-13px;

}


/* =========================================================
   PREMIUM CAP
   ========================================================= */

.locker-cap{

  position:relative;

  width:205px;

  height:145px;

  filter:

  drop-shadow(
    0 22px 25px

    rgba(0,0,0,.4)
  );

}


.locker-cap__crown{

  position:absolute;

  top:7px;

  left:27px;

  width:145px;

  height:95px;

  overflow:hidden;

  border-radius:

  78px 78px

  22px 18px;

  background:

  linear-gradient(
    130deg,
    #b2ff49,
    #78d925 62%,
    #4aa514
  );

  box-shadow:

  inset 18px 5px 25px

  rgba(255,255,255,.18),

  inset -15px 0 20px

  rgba(0,0,0,.13);

}


.locker-cap__crown::after{

  content:"";

  position:absolute;

  top:-5px;

  left:50%;

  width:7px;

  height:7px;

  transform:

  translateX(-50%);

  border-radius:50%;

  background:#06142e;

}


.locker-cap__seam{

  position:absolute;

  top:0;

  left:50%;

  width:1px;

  height:78px;

  background:

  rgba(5,25,56,.25);

}


.locker-cap__crown strong{

  position:absolute;

  top:42px;

  left:50%;

  transform:

  translateX(-50%);

  color:#082353;

  font-size:27px;

  font-style:italic;

  font-weight:950;

}


.locker-cap__visor{

  position:absolute;

  right:8px;

  bottom:16px;

  width:154px;

  height:49px;

  transform:

  rotate(-5deg);

  border-radius:

  10% 75% 55% 65%;

  background:

  linear-gradient(
    100deg,
    #8df42e,
    #56b713
  );

  box-shadow:

  inset 0 -8px 12px

  rgba(0,0,0,.14);

}


.kit-product--cap .kit-product__tag{

  left:50%;

  bottom:-5px;

  transform:

  translateX(-50%);

}


/* =========================================================
   SUPPORTER FLAG
   ========================================================= */

.locker-flag{

  position:relative;

  width:235px;

  height:170px;

  filter:

  drop-shadow(
    0 22px 24px

    rgba(0,0,0,.35)
  );

}


.locker-flag__pole{

  position:absolute;

  top:0;

  left:15px;

  width:7px;

  height:165px;

  border-radius:10px;

  background:

  linear-gradient(
    90deg,
    #d9e4f5,
    #667a98
  );

}


.locker-flag__pole::before{

  content:"";

  position:absolute;

  top:-7px;

  left:50%;

  width:14px;

  height:14px;

  transform:

  translateX(-50%);

  border-radius:50%;

  background:#9dff38;

}


.locker-flag__fabric{

  position:absolute;

  top:12px;

  left:21px;

  width:190px;

  height:112px;

  overflow:hidden;

  clip-path:

  polygon(
    0 0,
    100% 8%,
    95% 91%,
    70% 84%,
    48% 95%,
    23% 83%,
    0 92%
  );

  background:

  linear-gradient(
    180deg,
    #2676e8 0 34%,
    #f5f7ff 34% 66%,
    #9dff38 66%
  );

}


.locker-flag__fabric::after{

  content:"";

  position:absolute;

  inset:0;

  background:

  linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,.28),
    transparent
  );

}


.locker-flag__fabric span{

  position:absolute;

  inset:0;

  opacity:.25;

  background:

  repeating-linear-gradient(
    105deg,
    transparent 0 25px,
    rgba(0,0,0,.13) 26px,
    transparent 27px 52px
  );

}


.locker-flag__fabric strong{

  position:absolute;

  z-index:3;

  top:46%;

  left:52%;

  transform:

  translate(-50%,-50%);

  color:#09204a;

  font-size:13px;

  font-weight:950;

  letter-spacing:2px;

}


.kit-product--flag .kit-product__tag{

  left:33px;

  bottom:-3px;

}


/* =========================================================
   FLOOR
   ========================================================= */

.locker-floor{

  position:absolute;

  right:5%;

  bottom:20px;

  left:5%;

  z-index:1;

  height:75px;

  border-radius:50%;

  transform:

  perspective(500px)

  rotateX(68deg);

  background:

  radial-gradient(
    ellipse,
    rgba(39,108,219,.22),
    transparent 68%
  );

  border:

  1px solid

  rgba(88,201,255,.11);

}


.matchday-locker__footer{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:16px;

  padding:18px;

  border-top:

  1px solid

  rgba(255,255,255,.09);

}


.matchday-locker__footer span{

  color:

  rgba(255,255,255,.54);

  font-size:10px;

  font-weight:800;

}


.matchday-locker__footer i{

  width:4px;

  height:4px;

  border-radius:50%;

  background:#9dff38;

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){


  .matchday-kit__shell{

    grid-template-columns:1fr;

  }


  .matchday-kit__content{

    max-width:750px;

  }


  .matchday-locker{

    width:100%;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){


  .matchday-kit{

    padding:

    76px 16px;

  }


  .matchday-kit__title{

    font-size:

    clamp(
      43px,
      12vw,
      59px
    );

    letter-spacing:-2px;

  }


  .matchday-kit__description{

    font-size:14px;

  }


  .matchday-kit__categories{

    grid-template-columns:1fr;

  }


  .matchday-kit__categories a{

    min-height:76px;

  }


  .matchday-locker{

    margin-top:10px;

    border-radius:23px;

  }


  .matchday-locker__head{

    padding:

    18px 16px;

  }


  .matchday-locker__head p{

    display:none;

  }


  .matchday-locker__display{

    min-height:700px;

  }


  .kit-product--jersey{

    top:48px;

    right:50%;

    transform:

    translateX(50%)

    scale(.86);

  }


  .kit-product--jersey:hover{

    transform:

    translateX(50%)

    scale(.86)

    translateY(-8px);

  }


  .kit-product--cap{

    top:330px;

    left:4%;

    transform:

    scale(.75);

  }


  .kit-product--pants{

    right:3%;

    bottom:52px;

    transform:

    scale(.78);

  }


  .kit-product--flag{

    left:-4%;

    bottom:64px;

    transform:

    scale(.72);

  }


  .matchday-locker__footer{

    gap:9px;

  }


  .matchday-locker__footer span{

    font-size:8px;

  }

}