.page-home{
  position: relative;
  color: var(--text-warm);
  background:
    radial-gradient(1100px 460px at 84% 6%, rgba(45, 108, 255, .22), transparent 62%),
    radial-gradient(900px 420px at 8% 34%, rgba(51, 255, 153, .08), transparent 58%),
    linear-gradient(165deg, var(--bg-night), var(--bg-deep) 46%, var(--bg-deep) 100%);
  overflow-x: clip;
}

.page-home__hero{
  position: relative;
  overflow: hidden;
  padding: 32px 0 64px;
}

.page-home__hero-bg{
  position: absolute;
  inset: 0;
}

.page-home__hero-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(10, 30, 63, .94), rgba(18, 18, 18, .78) 58%, rgba(18, 18, 18, .96));
}

.page-home__hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
  filter: saturate(1.3);
}

.page-home__beam{
  position: absolute;
  left: -8%;
  top: 40%;
  width: 116%;
  height: 3px;
  transform: rotate(12deg);
  background: linear-gradient(90deg, transparent, rgba(51, 255, 153, .42) 22%, rgba(45, 108, 255, .28) 58%, transparent);
  z-index: 1;
  pointer-events: none;
}

.page-home__hero-inner{
  position: relative;
  z-index: 2;
}

.page-home .breadcrumb{
  margin-bottom: 26px;
}

.page-home__hero-copy{
  max-width: 860px;
}

.page-home__eyebrow{
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border: 1px solid rgba(51, 255, 153, .35);
  border-radius: 999px;
  color: var(--accent-green);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-home h1{
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-size: clamp(34px, 5.4vw, 56px);
}

.page-home__lead{
  max-width: 66ch;
  margin: 0 0 18px;
  color: var(--text-warm);
  font-size: 17px;
  line-height: 1.75;
}

.page-home__summary{
  max-width: 66ch;
  margin: 0 0 28px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
}

.page-home__hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

.page-home__index-panel{
  max-width: 560px;
  border-top: 1px solid rgba(245, 241, 232, .14);
  padding-top: 22px;
}

.page-home__index-title{
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-home .content-index{
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .content-index__link{
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(245, 241, 232, .08);
  color: var(--text-warm);
  text-decoration: none;
  transition: transform .3s var(--ease-out), color .3s, border-color .3s;
}

.page-home .content-index__link:hover,
.page-home .content-index__link:focus-visible{
  color: var(--accent-green);
  border-color: rgba(51, 255, 153, .55);
  transform: translateX(8px);
}

.page-home .content-index__num{
  color: var(--accent-blue);
  font-family: var(--font-mono);
  font-size: 13px;
}

.page-home__floating-card{
  margin-top: 32px;
  max-width: 520px;
  overflow: hidden;
  background: rgba(18, 18, 18, .72);
  border: 1px solid rgba(245, 241, 232, .14);
  border-radius: 24px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .42);
  transform: rotate(1.4deg);
  transition: transform .55s var(--ease-out), border-color .35s;
}

.page-home__floating-card:hover{
  transform: rotate(0deg) translateY(-6px);
  border-color: rgba(51, 255, 153, .55);
}

.page-home__float-media img{
  display: block;
  width: 100%;
  height: auto;
}

.page-home__float-body{
  padding: 20px 20px 18px;
}

.page-home__float-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.page-home__float-score{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-home__float-team{
  flex: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}

.page-home__float-num{
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 800;
  color: var(--accent-green);
  white-space: nowrap;
}

.page-home__float-chart{
  display: block;
  width: 100%;
  height: auto;
  margin: 14px 0 8px;
}

.page-home__float-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.page-home__float-label{
  font-size: 13px;
  color: var(--text-muted);
}

.page-home__live{
  padding: 64px 0 56px;
}

.page-home__section-head{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 34px;
}

.page-home h2{
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -.02em;
}

.page-home .section__lead{
  max-width: 60ch;
  margin: 0;
}

.page-home__section-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-home__live-indicator{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--accent-green);
}

.page-home__live-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  animation: page-home-pulse 2s infinite;
}

.page-home__live-divider{
  width: 1px;
  height: 18px;
  background: rgba(245, 241, 232, .2);
}

.page-home__match-grid{
  display: grid;
  gap: 20px;
}

.page-home__match-card{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(245, 241, 232, .055), rgba(18, 18, 18, .55));
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}

.page-home__match-card:hover{
  transform: translateY(-6px);
  border-color: rgba(51, 255, 153, .6);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .32);
}

.page-home__match-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.page-home__live-flag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--accent-green);
}

.page-home__live-flag::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 0 0 rgba(51, 255, 153, .5);
  animation: page-home-pulse 2s infinite;
}

.page-home__match-score{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.page-home__team{
  flex: 1;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
}

.page-home__score{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 26px;
  color: var(--accent-green);
  padding: 8px 16px;
  border: 1px solid rgba(51, 255, 153, .28);
  border-radius: 14px;
  background: rgba(51, 255, 153, .07);
  white-space: nowrap;
}

.page-home__match-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.page-home__stat{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(18, 18, 18, .4);
  text-align: center;
}

.page-home__stat b{
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.page-home__stat em{
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 15px;
  color: var(--text-warm);
}

.page-home__spark{
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
}

.page-home__match-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.page-home__match-trend{
  font-size: 13px;
  color: var(--text-muted);
}

.page-home__functions{
  padding: 56px 0;
}

.page-home__entry-grid{
  display: grid;
  gap: 20px;
}

.page-home__entry-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(245, 241, 232, .05), rgba(18, 18, 18, .52));
  color: var(--text-warm);
  text-decoration: none;
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}

.page-home__entry-card:hover{
  transform: translateY(-6px);
  border-color: rgba(51, 255, 153, .55);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .3);
}

.page-home__entry-card--feature{
  background: linear-gradient(135deg, rgba(10, 30, 63, .96), rgba(18, 18, 18, .92));
  border-color: rgba(45, 108, 255, .45);
}

.page-home__entry-card--accent{
  background: linear-gradient(135deg, rgba(255, 215, 0, .08), rgba(18, 18, 18, .92));
  border-color: rgba(255, 215, 0, .4);
}

.page-home__entry-head{
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-home__entry-icon{
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 255, 153, .3);
  border-radius: 14px;
  color: var(--accent-green);
  background: rgba(51, 255, 153, .1);
}

.page-home__entry-card--accent .page-home__entry-icon{
  border-color: rgba(255, 215, 0, .35);
  color: var(--accent-gold);
  background: rgba(255, 215, 0, .08);
}

.page-home__entry-card h3{
  margin: 0;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
}

.page-home__entry-card p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--text-muted);
}

.page-home__entry-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.page-home__entry-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.page-home__entry-meta{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-blue);
}

.page-home__entry-card--accent .page-home__entry-meta{
  color: var(--accent-gold);
}

.page-home__entry-media{
  margin: 4px -24px -24px;
}

.page-home__entry-media img{
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform .5s var(--ease-out), filter .5s;
}

.page-home__entry-card:hover .page-home__entry-media img{
  transform: scale(1.02);
  filter: saturate(1.2);
}

.page-home__services{
  padding: 56px 0;
}

.page-home__overview-panel{
  padding: 28px 22px;
  border-radius: 28px;
  border: 1px solid rgba(245, 241, 232, .12);
  background: linear-gradient(135deg, rgba(44, 36, 27, .6), rgba(10, 30, 63, .42));
}

.page-home__services-head{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 30px;
}

.page-home__services-grid{
  display: grid;
  gap: 16px;
}

.page-home__service-block{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid rgba(245, 241, 232, .1);
  border-radius: 18px;
  background: rgba(18, 18, 18, .38);
  transition: border-color .3s, background .3s;
}

.page-home__service-block:hover{
  border-color: rgba(51, 255, 153, .5);
  background: rgba(18, 18, 18, .55);
}

.page-home__service-num{
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-blue);
  line-height: 1.6;
}

.page-home__service-block h3{
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
}

.page-home__service-block p{
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
}

.page-home__service-link{
  display: inline-block;
  font-size: 14px;
  color: var(--accent-green);
  text-decoration: none;
}

.page-home__service-link::after{
  content: " →";
}

.page-home__brand-link{
  margin-top: 24px;
}

.page-home__news{
  padding: 56px 0;
}

.page-home__news-grid{
  display: grid;
  gap: 20px;
}

.page-home__news-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(245, 241, 232, .045);
  transition: transform .35s var(--ease-out), border-color .35s;
}

.page-home__news-card:hover{
  border-color: rgba(45, 108, 255, .5);
  transform: translateY(-4px);
}

.page-home__news-card h3{
  margin: 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.32;
}

.page-home__news-card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

.page-home__news-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.page-home__cta{
  padding: 56px 0 88px;
}

.page-home__trust{
  display: grid;
  gap: 16px;
  padding: 22px;
  margin-bottom: 28px;
  background: rgba(18, 18, 18, .34);
  border-color: rgba(245, 241, 232, .1);
}

.page-home__trust-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(245, 241, 232, .08);
  border-radius: 16px;
}

.page-home__trust-item p{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.page-home__trust-num{
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent-green);
}

.page-home__cta-panel{
  position: relative;
  padding: 34px 24px;
  overflow: hidden;
  border: 1px solid rgba(51, 255, 153, .32);
  border-radius: 32px;
  background:
    radial-gradient(560px 240px at 92% 10%, rgba(255, 215, 0, .12), transparent 68%),
    linear-gradient(135deg, rgba(45, 108, 255, .16), rgba(18, 18, 18, .94) 54%);
}

.page-home__cta-panel h2{
  margin: 14px 0 16px;
}

.page-home__cta-panel > p{
  max-width: 68ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-muted);
}

.page-home__cta-stats{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 30px 0 8px;
}

.page-home__cta-stat{
  padding: 18px 12px;
  text-align: center;
  border: 1px solid rgba(245, 241, 232, .1);
  border-radius: 16px;
  background: rgba(18, 18, 18, .46);
}

.page-home__cta-stat b{
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-green);
}

.page-home__cta-stat span{
  font-size: 13px;
  color: var(--text-muted);
}

.page-home__cta-stat.gold b{
  color: var(--accent-gold);
}

.page-home__cta-stat.blue b{
  color: var(--accent-blue);
}

.page-home__cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.page-home__cta-note{
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-muted);
}

@media (min-width: 720px){
  .page-home__entry-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .page-home__services-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-home__news-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .page-home__trust{
    grid-template-columns: repeat(4, 1fr);
  }

  .page-home__cta-stats{
    grid-template-columns: repeat(4, 1fr);
  }

  .page-home__overview-panel{
    padding: 40px 32px;
  }

  .page-home__cta-panel{
    padding: 46px 40px;
  }
}

@media (min-width: 1024px){
  .page-home__hero{
    padding: 44px 0 96px;
  }

  .page-home__hero-layout{
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    column-gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }

  .page-home__floating-card{
    margin-top: 6px;
  }

  .page-home__live,
  .page-home__functions,
  .page-home__services,
  .page-home__news,
  .page-home__cta{
    padding: 76px 0;
  }

  .page-home__match-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .page-home__entry-media img{
    height: 240px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-home__live-dot,
  .page-home__live-flag::before{
    animation: none;
  }

  .page-home__floating-card,
  .page-home__match-card,
  .page-home__entry-card,
  .page-home__news-card,
  .page-home__content-index__link{
    transform: none;
    transition: none;
  }
}

@keyframes page-home-pulse{
  0%{
    box-shadow: 0 0 0 0 rgba(51, 255, 153, .5);
  }
  70%{
    box-shadow: 0 0 0 8px rgba(51, 255, 153, 0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(51, 255, 153, 0);
  }
}