:root{
  --fct-blue:#0879f9;
  --fct-blue-dark:#0455bb;
  --fct-ink:#11151b;
  --fct-lime:#d8ff2f;
  --fct-soft:#f5f7fb;
}
body{background:#f5f7fb}
.left-sidebar .brand-logo{padding-top:18px}
.fct-logo{
  display:flex;align-items:center;gap:10px;font-weight:800;color:#1b2430;
}
.fct-mark{
  width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--fct-blue),var(--fct-blue-dark));
  color:#fff;display:grid;place-items:center;font-weight:900;letter-spacing:-1px;
  box-shadow:0 8px 22px rgba(8,121,249,.22)
}
.sidebar-link.active,.sidebar-link:hover{background:rgba(8,121,249,.09)!important;color:var(--fct-blue)!important}
.hero-foot{
  min-height:340px;border-radius:20px;overflow:hidden;position:relative;background:#0d1622;
}
.hero-foot img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-foot:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,15,25,.94),rgba(7,15,25,.68) 44%,rgba(7,15,25,.08))}
.hero-content{position:relative;z-index:2;padding:48px;max-width:600px;color:#fff}
.hero-kicker{text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:800;color:var(--fct-lime)}
.hero-title{font-size:54px;line-height:.9;letter-spacing:-.055em;font-weight:900;margin:16px 0}
.hero-title span{color:var(--fct-lime)}
.hero-copy{color:#cbd4df;line-height:1.6;max-width:470px}
.fct-btn{background:var(--fct-lime);color:#111;border:0;font-weight:800;border-radius:999px;padding:11px 18px}
.metric-card{position:relative;overflow:hidden}
.metric-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(8,121,249,.1);color:var(--fct-blue)}
.metric-value{font-size:34px;font-weight:800;letter-spacing:-.04em}
.match-box{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;text-align:center}
.club-badge{width:64px;height:72px;border:2px solid currentColor;border-radius:14px 14px 22px 22px;display:grid;place-items:center;margin:auto;font-size:13px;font-weight:900}
.match-time{font-size:28px;font-weight:800;letter-spacing:-.04em}
.form-dots{display:flex;gap:5px}
.form-dots span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800}
.form-dots .w{background:#d8ff2f;color:#101214}.form-dots .d{background:#e2e6ea}.form-dots .l{background:#ffd6d6;color:#a42323}
.rank-row{display:grid;grid-template-columns:32px minmax(150px,1fr) 48px 48px 70px;align-items:center;gap:10px;padding:11px 12px;border-radius:12px}
.rank-row:nth-child(even){background:#f8fafc}.rank-row.me{background:rgba(8,121,249,.08);color:var(--fct-blue)}
.player-line{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #eef1f4}
.player-line:last-child{border-bottom:0}
.player-avatar{width:48px;height:48px;border-radius:14px;background:#e8eef6;display:grid;place-items:center;font-weight:800;color:var(--fct-blue)}
.player-stat{text-align:right}.player-stat b{display:block;font-size:19px}.player-stat small{font-size:9px;text-transform:uppercase;color:#7b8490}
.stat-bar{height:7px;border-radius:999px;background:#edf1f5;overflow:hidden}.stat-bar span{height:100%;display:block;background:var(--fct-blue)}
.match-list-item{display:grid;grid-template-columns:66px 1fr auto;gap:14px;align-items:center;padding:15px;border:1px solid #edf0f2;border-radius:14px;margin-bottom:10px}
.match-date{font-size:25px;font-weight:800;line-height:.9}.match-date small{display:block;font-size:9px;margin-top:7px;color:#7d8792}
.status-pill{border-radius:999px;padding:7px 10px;font-size:10px;font-weight:800;background:#eef2f6}
.status-pill.win{background:#e8f9bc;color:#496900}
.table-foot th{font-size:11px;text-transform:uppercase;color:#84909c;font-weight:700}.table-foot td{vertical-align:middle}
.page-title{font-weight:800;letter-spacing:-.03em}
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7e8995;font-weight:800}
@media(max-width:767px){
 .hero-foot{min-height:420px}.hero-foot img{object-position:62% center}.hero-foot:after{background:linear-gradient(180deg,rgba(7,15,25,.12),rgba(7,15,25,.42) 44%,rgba(7,15,25,.97))}
 .hero-content{position:absolute;bottom:0;padding:28px}.hero-title{font-size:42px}
 .match-box{grid-template-columns:1fr 72px 1fr}.club-badge{width:54px;height:62px}
}


/* ========================================================
   MATCH FEATURE
======================================================== */

.match-feature-card{
  border:0;
  border-radius:20px;
  overflow:hidden;
  position:relative;
}

.match-feature-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:5px;
  height:100%;
  background:var(--fct-blue);
}

.match-home-pill{
  display:inline-flex;
  align-items:center;
  background:rgba(8,121,249,.09);
  color:var(--fct-blue);
  border-radius:999px;
  padding:7px 12px;
  font-size:10px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.06em;
}


/* MATCH CENTRAL */

.match-feature-main{
  display:grid;
  grid-template-columns:1fr 130px 1fr;
  align-items:center;
  gap:20px;
  padding:20px 0 30px;
}

.match-feature-team{
  text-align:center;
}

.match-club-shield{
  width:76px;
  height:84px;

  margin:auto;

  display:grid;
  place-items:center;

  border:2px solid #151a20;

  border-radius:
    16px 16px 26px 26px;

  font-size:15px;
  font-weight:900;

  color:#151a20;

  background:#fff;

  position:relative;
}

.match-club-shield:after{
  content:"";
  position:absolute;
  bottom:8px;

  width:22px;
  height:3px;

  border-radius:99px;

  background:currentColor;

  opacity:.15;
}

.match-club-shield.primary{
  border-color:var(--fct-blue);
  color:var(--fct-blue);

  background:
    linear-gradient(
      145deg,
      rgba(8,121,249,.12),
      rgba(8,121,249,.02)
    );
}

.match-feature-team-name{
  margin-top:13px;

  font-size:15px;
  font-weight:800;

  color:var(--fct-ink);
}

.match-feature-team-role{
  display:block;

  margin-top:3px;

  color:#929ca7;

  font-size:10px;
  text-transform:uppercase;

  letter-spacing:.08em;
}


/* CENTRE */

.match-feature-center{
  text-align:center;
}

.match-feature-date{
  color:#8a94a0;

  font-size:10px;

  font-weight:800;

  letter-spacing:.12em;
}

.match-feature-time{
  font-size:39px;

  line-height:1;

  font-weight:900;

  color:var(--fct-ink);

  letter-spacing:-.06em;

  margin:9px 0;
}

.match-feature-time span{
  color:var(--fct-blue);
}

.match-feature-vs{
  width:34px;
  height:22px;

  margin:auto;

  display:grid;
  place-items:center;

  background:#f0f3f6;

  color:#89939f;

  border-radius:999px;

  font-size:9px;
  font-weight:900;
}


/* FOOTER */

.match-feature-footer{
  border-top:1px solid #edf1f5;

  padding-top:18px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.match-place{
  display:flex;
  align-items:center;

  gap:11px;
}

.match-place-icon{
  width:39px;
  height:39px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:#eef6ff;

  color:var(--fct-blue);

  font-size:18px;
}

.match-place strong{
  display:block;

  color:var(--fct-ink);

  font-size:12px;
}

.match-place small{
  display:block;

  color:#919ba6;

  font-size:10px;
}


/* ========================================================
   RESULT FEATURE
======================================================== */

.result-feature-card{
  border:0;

  border-radius:20px;

  overflow:hidden;

  color:#fff;

  position:relative;

  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(8,121,249,.35),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #121923,
      #080b0f
    );
}

.result-feature-card:after{
  content:"FCT";

  position:absolute;

  right:-15px;
  bottom:-42px;

  font-size:145px;

  font-weight:900;

  letter-spacing:-.1em;

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

  pointer-events:none;
}

.result-section-label{
  color:var(--fct-lime);

  text-transform:uppercase;

  font-size:10px;

  font-weight:800;

  letter-spacing:.12em;

  margin-bottom:3px;
}

.result-win-pill{
  background:var(--fct-lime);

  color:#111;

  padding:7px 12px;

  border-radius:999px;

  font-size:9px;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;
}


/* SCORE */

.result-feature-score{
  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:end;

  gap:20px;

  margin-top:37px;
}

.result-feature-club{
  color:rgba(255,255,255,.55);

  font-size:12px;

  font-weight:600;
}

.result-feature-number{
  font-size:72px;

  line-height:.9;

  margin-top:7px;

  font-weight:900;

  letter-spacing:-.07em;
}

.result-winner{
  color:var(--fct-lime);
}

.result-score-separator{
  text-align:center;

  padding-bottom:10px;
}

.result-score-separator span{
  display:block;

  font-size:8px;

  font-weight:800;

  letter-spacing:.12em;

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

  margin-bottom:3px;
}

.result-score-separator strong{
  font-size:18px;

  color:rgba(255,255,255,.28);
}


/* FORM */

.result-feature-form{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:27px;

  padding-top:18px;

  border-top:
    1px solid rgba(255,255,255,.10);
}

.result-feature-form > span{
  color:rgba(255,255,255,.45);

  text-transform:uppercase;

  font-size:9px;

  letter-spacing:.1em;

  font-weight:800;
}


/* GOALS */

.result-goals{
  margin-top:16px;

  display:flex;

  align-items:center;

  gap:7px;

  flex-wrap:wrap;
}

.result-goals-label{
  color:rgba(255,255,255,.40);

  font-size:9px;

  text-transform:uppercase;

  letter-spacing:.08em;

  margin-right:3px;
}

.result-goal{
  display:flex;
  gap:7px;

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

  padding:6px 9px;

  border-radius:8px;

  font-size:10px;

  color:rgba(255,255,255,.73);
}

.result-goal strong{
  color:#fff;
}


/* LINK */

.result-feature-link{
  position:relative;

  z-index:2;

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-top:24px;

  color:#fff;

  text-decoration:none;

  font-size:12px;

  font-weight:700;
}

.result-feature-link span{
  width:31px;
  height:31px;

  display:grid;

  place-items:center;

  border-radius:50%;

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

  transition:.2s;
}

.result-feature-link:hover{
  color:var(--fct-lime);
}

.result-feature-link:hover span{
  background:var(--fct-lime);
  color:#111;
}


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

@media(max-width:767px){

  .match-feature-main{
    grid-template-columns:1fr 85px 1fr;
    gap:8px;
  }

  .match-club-shield{
    width:57px;
    height:64px;
    border-radius:13px 13px 20px 20px;
  }

  .match-feature-team-name{
    font-size:12px;
  }

  .match-feature-time{
    font-size:30px;
  }

  .match-feature-date{
    font-size:8px;
  }

  .match-feature-footer{
    flex-direction:column;

    align-items:stretch;

    gap:15px;
  }

  .match-feature-footer .btn{
    width:100%;
  }

  .result-feature-number{
    font-size:58px;
  }
}