@font-face {
  font-family: "OpenSans";
  src: url(fonts/OpenSans-Regular.ttf);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: "OpenSans";
}

body {
  height: 100%;
  margin: 0;
  background-color: var(--primary);
}

a {
  text-decoration: none;
}

.list-reset {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.container {
  max-width: 1400px;
  padding: 0 20px;
  margin: 0 auto;
}

section {
  padding: 60px 0;
}

main {
  padding-top: 50px;
}

.padding__main {
  color: var(--light);
  padding: 150px 0 50px 0;
}

.padding__main a {
  color: var(--highlight);
  font-size: 24px;
}



/* burger */
.burger {
  display: none;
  height: 100%;
}

.nav__burger {
  top: 0;
  right: 0;
  padding: 60px;
  width: 100%;
  border-radius: 40px;
  position: absolute;
  z-index: 99;

  display: none;
  flex-direction: column;

  background-color: var(--highlight);
}

.nav__burger .nav__list {
  margin-left: auto;
  font-size: 30px;
  color: #000;
}

.active {
  display: flex;
}

.overflow {
  overflow: hidden;
}

.burger-checkbox {
  position: absolute;
  visibility: hidden;
  right: 0;
}

.burger {
  cursor: pointer;
  display: none;
  color: #000;
  position: relative;
  border: none;
  background: transparent;
  width: 30px;
  height: 23px;
  z-index: 100;
}

.burger::before,
.burger::after {
  content: "";
  left: 0;
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 10px;
  background-color: #000;
}

.burger::before {
  top: 0px;
  box-shadow: 0 11px 0 #000;
  transition: box-shadow 0.3s 0.15s, top 0.3s 0.15s, transform 0.3s;
}

.burger::after {
  bottom: 0;
  transition: bottom 0.3s 0.15s, transform 0.3s;
}

.burger-checkbox:checked+.burger::before {
  top: 12px;
  transform: rotate(45deg);
  box-shadow: 0 6px 0 transparent;
  transition: box-shadow 0.15s, top 0.3s, transform 0.3s 0.15s;
}

.burger-checkbox:checked+.burger::after {
  bottom: 9px;
  transform: rotate(-45deg);
  transition: bottom 0.3s, transform 0.3s 0.15s;
}

/* end burger */


.heading {
  margin: 0;
  margin-bottom: 30px;
  font-size: 30px;
}

.text {
  margin: 0;
  font-size: 25px;
}

.hidden {
  opacity: 0;
  transform: translateY(40px);
  transition: 1s;
}

.visible {
  opacity: 1;
  transform: translateY(0);
}


/* header */
header {
  top: 5px;
  width: 90%;
  position: fixed;
  padding: 10px 0;
  z-index: 99;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--highlight);
  border-radius: 40px;
}

.header__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  display: flex;
  flex-direction: row;
  align-items: center;

  font-size: 25px;
  color: var(--primary);

  transition: color 0.3s ease;
}

.header__logo:hover {
  color: var(--light);
}

.nav__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.nav__list {
  font-size: 20px;
  color: var(--primary);
  transition: color 0.3s ease;
}

.nav__list:hover {
  color: var(--light);
}

:root {
  --primary: #000000;
  --secondary: #D3D3D3;
  --neutral: #4F4F4F;
  --light: #FFFFFF;
  --highlight: #FFA500;
}

/* register__hero */
.register__hero {
  background: linear-gradient(180deg, var(--primary), #121212)
}

.register__hero__container {
  position: relative
}

.register__hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: center
}

.register__hero__content {
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #0E0E0E, #161616);
  padding: 18px
}

.register__hero__heading {
  color: var(--light);
  font-size: 32px;
  line-height: 40px;
  margin: 0 0 10px 0
}

.register__hero__lead {
  color: #CFCFCF;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 14px 0
}

.register__hero__bullets {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display: grid;
  gap: 8px
}

.register__hero__bullet {
  color: #E8E8E8;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--neutral);
  border-radius: 10px;
  background: #0F0F0F
}

.register__hero__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 8px 0
}

.register__hero__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000000;
  font-weight: 700;
  transition: 0.3s ease
}

.register__hero__btn:hover {
  transform: translateY(-2px)
}

.register__hero__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: var(--light)
}

.register__hero__btn--ghost:hover {
  background: #222222
}

.register__hero__note {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 18px;
  margin: 6px 0 0 0
}

.register__hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 10px 0 12px 0
}

.register__hero__stat {
  border: 1px solid var(--neutral);
  border-radius: 10px;
  background: #0F0F0F;
  padding: 10px
}

.register__hero__stat-value {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 4px 0;
  font-weight: 800
}

.register__hero__stat-label {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.register__hero__bar {
  height: 10px;
  border: 1px solid var(--neutral);
  border-radius: 999px;
  background: #0B0B0B;
  overflow: hidden;
  margin: 0 0 6px 0
}

.register__hero__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--highlight), #FFE29B);
  transition: 0.3s ease
}

.register__hero__timer {
  color: #FFE29B;
  font-size: 18px;
  line-height: 24px;
  margin: 0
}

.register__hero__ticker {
  position: relative;
  border: 1px solid var(--neutral);
  border-radius: 12px;
  overflow: hidden;
  background: #0F0F0F
}

.register__hero__track {
  display: flex;
  gap: 10px;
  will-change: transform
}

.odds__card {
  min-width: 220px;
  border: 1px solid var(--neutral);
  border-radius: 10px;
  background: #141414;
  padding: 10px
}

.odds__league {
  color: #FFBE3B;
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 4px 0
}

.odds__teams {
  color: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 4px 0;
  font-weight: 700
}

.odds__line {
  color: #DADADA;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.register__hero__visual {
  position: relative;
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #101010, #171717);
  overflow: hidden
}

.register__hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(1.05)
}

.register__hero__ribbons {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.register__hero__ribbon {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--secondary);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  line-height: 16px
}

/* button micro-bounce */
.register__hero__btn.is-pressed {
  transform: translateY(-1px) scale(0.98)
}

/* register__benefits */
.register__benefits {
  background: linear-gradient(180deg, #0B0B0B, #121212)
}

.register__benefits__container {
  position: relative
}

.register__benefits__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  align-items: start
}

@media (max-width:980px) {
  .register__benefits__grid {
    grid-template-columns: 1fr
  }
}

.register__benefits__intro {
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #0E0E0E, #161616);
  padding: 18px
}

.register__benefits__heading {
  color: var(--light);
  font-size: 28px;
  line-height: 36px;
  margin: 0 0 10px 0
}

.register__benefits__lead {
  color: #CCCCCC;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.register__benefits__chips {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.register__benefits__chip {
  border: 1px solid var(--secondary);
  border-radius: 999px;
  background: #0F0F0F;
  color: #EFEFEF;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 16px
}

.register__benefits__micros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 12px 0
}

.benefit__micro {
  border: 1px solid var(--neutral);
  border-radius: 10px;
  background: #0F0F0F;
  padding: 10px
}

.benefit__micro-label {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 4px 0
}

.benefit__micro-value {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 6px 0;
  font-weight: 800
}

.benefit__bar {
  height: 8px;
  border: 1px solid var(--neutral);
  border-radius: 999px;
  background: #0B0B0B;
  overflow: hidden
}

.benefit__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  transition: 0.3s ease
}

.register__benefits__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.register__benefits__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000000;
  font-weight: 700;
  transition: 0.3s ease
}

.register__benefits__btn:hover {
  transform: translateY(-2px)
}

.register__benefits__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: var(--light)
}

.register__benefits__btn--ghost:hover {
  background: #222222
}

.register__benefits__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px
}

.benefit__card {
  border: 1px solid var(--neutral);
  border-radius: 12px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 12px;
  transition: 0.3s ease
}

.benefit__card:hover {
  transform: translateY(-2px);
  border-color: var(--highlight)
}

.benefit__card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0
}

.benefit__emoji {
  font-size: 18px;
  line-height: 18px
}

.benefit__title {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 24px;
  margin: 0
}

.benefit__desc {
  color: #DADADA;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 8px 0
}

.benefit__list {
  list-style: disc;
  margin: 0 0 0 18px;
  padding: 0;
  display: grid;
  gap: 6px
}

.benefit__item {
  color: #CFCFCF;
  font-size: 13px;
  line-height: 18px;
  margin: 0
}

/* register__faq-preview */
.register__faq-preview {
  background: linear-gradient(180deg, #121212, #0B0B0B)
}

.register__faq-preview__container {
  position: relative
}

.register__faq-preview__heading {
  color: #FFFFFF;
  font-size: 26px;
  line-height: 34px;
  margin: 0 0 8px 0
}

.register__faq-preview__lead {
  color: #CFCFCF;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.register__faq-preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px
}

.faqp__item {
  border: 1px solid var(--neutral);
  border-radius: 12px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 10px;
  transition: 0.3s ease
}

.faqp__item[open] {
  border-color: var(--highlight)
}

.faqp__q {
  color: #EDEDED;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer
}

.faqp__a {
  color: #D0D0D0;
  font-size: 14px;
  line-height: 20px;
  margin: 8px 0 0 0
}

/* focus states */
.register__benefits a:focus-visible,
.register__faq-preview a:focus-visible,
.faqp__item summary:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
  transition: 0.3s ease
}

/* register__benefits buttons */
.register__benefits__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  transition: 0.3s ease;
}

.register__benefits__btn:hover {
  transform: translateY(-2px);
}

.register__benefits__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: var(--light);
}

.register__benefits__btn--ghost:hover {
  background: #222222;
}

.register__faq-preview__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* register__faq-preview buttons */
.register__faq-preview__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  transition: 0.3s ease;
}

.register__faq-preview__btn:hover {
  transform: translateY(-2px);
}

.register__faq-preview__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: var(--light);
}

.register__faq-preview__btn--ghost:hover {
  background: #222222;
}

/* .football__hero */
.football__hero {
  background: linear-gradient(180deg, var(--primary), #111111)
}

.football__hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: center
}

.football__hero__content {
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #0E0E0E, #161616);
  padding: 18px
}

.football__hero__heading {
  color: var(--light);
  font-size: 32px;
  line-height: 40px;
  margin: 0 0 10px 0
}

.football__hero__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.football__hero__chips {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.football__hero__chip {
  border: 1px solid var(--secondary);
  border-radius: 999px;
  background: #0F0F0F;
  color: #EFEFEF;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 16px
}

.football__hero__micro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 12px 0
}

.football__micro {
  border: 1px solid var(--neutral);
  border-radius: 10px;
  background: #0F0F0F;
  padding: 10px
}

.football__micro-label {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 4px 0
}

.football__micro-value {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 6px 0;
  font-weight: 800
}

.football__bar {
  height: 8px;
  border: 1px solid var(--neutral);
  border-radius: 999px;
  background: #0B0B0B;
  overflow: hidden
}

.football__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  transition: 0.3s ease
}

.football__hero__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 8px 0
}

.football__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000000;
  font-weight: 700;
  transition: 0.3s ease
}

.football__btn:hover {
  transform: translateY(-2px)
}

.football__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: var(--light)
}

.football__btn--ghost:hover {
  background: #222222
}

.football__format {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto
}

.football__format__label {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.football__format__btn {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--neutral);
  background: #0F0F0F;
  color: #EDEDED;
  transition: 0.3s ease
}

.football__format__btn.is-active {
  border-color: var(--highlight);
  color: #000;
  background: linear-gradient(90deg, var(--highlight), #FFD27A)
}

.football__hero__note {
  color: #AFAFAF;
  font-size: 12px;
  line-height: 18px;
  margin: 6px 0 0 0
}

.football__hero__visual {
  position: relative;
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #101010, #171717);
  overflow: hidden
}

.football__hero__img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block
}

.football__hero__ribbons {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.football__hero__ribbon {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--secondary);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  line-height: 16px
}

/* .football__matches */
.football__matches {
  background: linear-gradient(180deg, #111111, #0B0B0B)
}

.football__matches__heading {
  color: #FFFFFF;
  font-size: 28px;
  line-height: 36px;
  margin: 0 0 6px 0
}

.football__matches__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.football__toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px 0
}

.football__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.football__filter {
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--neutral);
  background: #0F0F0F;
  color: #EDEDED;
  transition: 0.3s ease
}

.football__filter.is-active,
.football__filter:hover {
  border-color: var(--highlight);
  color: #000;
  background: linear-gradient(90deg, var(--highlight), #FFD27A)
}

.football__betslip {
  display: flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--neutral);
  border-radius: 10px;
  background: #0F0F0F;
  padding: 6px 10px
}

.football__betslip__label {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.football__betslip__count {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000;
  padding: 4px 6px;
  font-weight: 800
}

.football__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px
}

.match {
  border: 1px solid var(--neutral);
  border-radius: 12px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 12px;
  transition: 0.3s ease
}

.match:hover {
  transform: translateY(-2px);
  border-color: var(--highlight)
}

.match__head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 6px 0
}

.match__league {
  color: #FFBE3B;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.match__time {
  color: #D3D3D3;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.match__teams {
  color: #FFFFFF;
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 6px 0;
  font-weight: 700
}

.match__teams span {
  color: #AFAFAF
}

.match__timer {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 8px 0
}

.match__odds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 8px 0
}

.match__odd {
  display: inline-block;
  text-align: center;
  padding: 10px 0;
  border: 1px solid var(--neutral);
  border-radius: 8px;
  background: #0F0F0F;
  color: #EDEDED;
  transition: 0.3s ease
}

.match__odd.is-picked {
  border-color: var(--highlight);
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000;
  font-weight: 800
}

.match__more {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.match__chip {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--neutral);
  border-radius: 999px;
  background: #0F0F0F;
  color: #EDEDED;
  transition: 0.3s ease
}

.match__chip.is-picked {
  border-color: var(--highlight);
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000
}

/* .football__tips */
.football__tips {
  background: linear-gradient(180deg, #0B0B0B, #111111)
}

.football__tips__heading {
  color: #FFFFFF;
  font-size: 26px;
  line-height: 34px;
  margin: 0 0 8px 0
}

.football__tips__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.tips__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px
}

.tip {
  border: 1px solid var(--neutral);
  border-radius: 12px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 12px
}

.tip__head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 6px 0
}

.tip__league {
  color: #FFBE3B;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.tip__pick {
  color: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  font-weight: 700
}

.tip__why {
  color: #DADADA;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 8px 0
}

.tip__list {
  list-style: disc;
  margin: 0 0 8px 18px;
  padding: 0;
  display: grid;
  gap: 6px
}

.tip__list .text {
  color: #CFCFCF;
  font-size: 13px;
  line-height: 18px;
  margin: 0
}

.tip__details {
  border-top: 1px solid var(--neutral);
  padding-top: 8px
}

.tip__summary {
  cursor: pointer;
  color: var(--light);
  font-size: 18px;
}

.tip__analysis {
  color: #CFCFCF;
  font-size: 13px;
  line-height: 18px;
  margin: 6px 0 0 0
}

.tips__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0 0
}

.tips__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000;
  font-weight: 700;
  transition: 0.3s ease
}

.tips__btn:hover {
  transform: translateY(-2px)
}

.tips__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: #FFFFFF
}

.tips__btn--ghost:hover {
  background: #222222
}

/* focus */
.football__matches a:focus-visible,
.football__hero a:focus-visible,
.football__tips a:focus-visible,
.football__format__btn:focus-visible,
.football__filter:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px
}

/* cricket__hero */
.cricket__hero {
  background: linear-gradient(180deg, var(--primary), #0E0E0E)
}

.cricket__hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: center
}

.cricket__hero__content {
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #0F0F0F, #161616);
  padding: 18px
}

.cricket__hero__heading {
  color: var(--light);
  font-size: 32px;
  line-height: 40px;
  margin: 0 0 10px 0
}

.cricket__hero__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.cricket__hero__chips {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.cricket__chip {
  border: 1px solid var(--secondary);
  border-radius: 6px;
  background: #101010;
  color: #EFEFEF;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 16px
}

.cricket__hero__micro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 12px 0
}

.ck__micro {
  border: 1px solid var(--neutral);
  border-radius: 10px;
  background: #101010;
  padding: 10px
}

.ck__label {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 4px 0
}

.ck__value {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 6px 0;
  font-weight: 800
}

.ck__bar {
  height: 8px;
  border: 1px solid var(--neutral);
  border-radius: 999px;
  background: #0B0B0B;
  overflow: hidden
}

.ck__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  transition: 0.3s ease
}

.cricket__hero__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 8px 0
}

.cricket__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000000;
  font-weight: 700;
  transition: 0.3s ease
}

.cricket__btn:hover {
  transform: translateY(-2px)
}

.cricket__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: var(--light)
}

.cricket__btn--ghost:hover {
  background: #222222
}

.cricket__format {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto
}

.cricket__format__label {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.cricket__format__btn {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--neutral);
  background: #0F0F0F;
  color: #EDEDED;
  transition: 0.3s ease
}

.cricket__format__btn.is-active {
  border-color: var(--highlight);
  color: #000;
  background: linear-gradient(90deg, var(--highlight), #FFD27A)
}

.cricket__hero__note {
  color: #AFAFAF;
  font-size: 12px;
  line-height: 18px;
  margin: 6px 0 0 0
}

.cricket__hero__visual {
  position: relative;
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #0E0E0E, #171717);
  overflow: hidden
}

.cricket__hero__img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block
}

.cricket__hero__ribbons {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.cricket__hero__ribbon {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--secondary);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  line-height: 16px
}

/* cricket__matches */
.cricket__matches {
  background: linear-gradient(180deg, #111111, #0B0B0B)
}

.cricket__matches__heading {
  color: #FFFFFF;
  font-size: 28px;
  line-height: 36px;
  margin: 0 0 6px 0
}

.cricket__matches__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.cricket__toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px 0
}

.cricket__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.cricket__filter {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--neutral);
  background: #0F0F0F;
  color: #EDEDED;
  transition: 0.3s ease
}

.cricket__filter.is-active,
.cricket__filter:hover {
  border-color: var(--highlight);
  color: #000;
  background: linear-gradient(90deg, var(--highlight), #FFD27A)
}

.cricket__betslip {
  display: flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--neutral);
  border-radius: 10px;
  background: #0F0F0F;
  padding: 6px 10px
}

.cricket__betslip__label {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.cricket__betslip__count {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000;
  padding: 4px 6px;
  font-weight: 800
}

.cricket__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px
}

.ckmatch {
  border: 1px solid var(--neutral);
  border-radius: 12px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 12px;
  transition: 0.3s ease
}

.ckmatch:hover {
  transform: translateY(-2px);
  border-color: var(--highlight)
}

.ckmatch.is-live {
  border-color: #FFD27A
}

.ckmatch__head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 6px 0
}

.ckmatch__tour {
  color: #FFBE3B;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.ckmatch__time {
  color: #D3D3D3;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.ckmatch__teams {
  color: #FFFFFF;
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 4px 0;
  font-weight: 700
}

.ckmatch__teams span {
  color: #AFAFAF
}

.ckmatch__venue {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 6px 0
}

.ckmatch__score {
  color: #FFE29B;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 6px 0
}

.ckmatch__odds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 0 0 8px 0
}

.ckmatch__odd {
  display: inline-block;
  text-align: center;
  padding: 10px 0;
  border: 1px solid var(--neutral);
  border-radius: 8px;
  background: #0F0F0F;
  color: #EDEDED;
  transition: 0.3s ease
}

.ckmatch__odd.is-picked {
  border-color: var(--highlight);
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000;
  font-weight: 800
}

.ckmatch__more {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.ckmatch__chip {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--neutral);
  border-radius: 999px;
  background: #0F0F0F;
  color: #EDEDED;
  transition: 0.3s ease
}

.ckmatch__chip.is-picked {
  border-color: var(--highlight);
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000
}

.ckmatch__odd.is-changed,
.ckmatch__chip.is-changed {
  animation: blink 0.6s ease 1
}

@keyframes blink {
  0% {
    filter: brightness(1)
  }

  50% {
    filter: brightness(1.6)
  }

  100% {
    filter: brightness(1)
  }
}

/* cricket__insights */
.cricket__insights {
  background: linear-gradient(180deg, #0B0B0B, #111111)
}

.cricket__insights__heading {
  color: #FFFFFF;
  font-size: 26px;
  line-height: 34px;
  margin: 0 0 8px 0
}

.cricket__insights__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.ckins__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px
}

.ckins__panel {
  border: 1px solid var(--neutral);
  border-radius: 12px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 12px
}

.ckins__label {
  color: #BFD0DE;
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 6px 0
}

.ckins__bar {
  height: 10px;
  border: 1px solid var(--neutral);
  border-radius: 999px;
  background: #0B0B0B;
  overflow: hidden
}

.ckins__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  transition: 0.3s ease
}

.ckins__gauge {
  position: relative;
  height: 80px;
  border: 1px solid var(--neutral);
  border-radius: 80px;
  background: #0F0F0F;
  overflow: hidden
}

.ckins__gauge-needle {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 2px;
  height: 66px;
  background: linear-gradient(180deg, var(--highlight), #FFD27A);
  transform-origin: bottom center;
  transition: 0.3s ease
}

.ckins__note {
  color: #C7D3DB;
  font-size: 12px;
  line-height: 16px;
  margin: 6px 0 0 0
}

.ckins__ticker {
  position: relative;
  border: 1px solid var(--neutral);
  border-radius: 12px;
  background: #101010;
  overflow: hidden;
  margin: 12px 0 0 0
}

.ckins__track {
  display: flex;
  gap: 10px;
  will-change: transform;
  padding: 8px
}

.ckins__chip {
  border: 1px solid var(--neutral);
  border-radius: 999px;
  background: #0F0F0F;
  color: #EDEDED;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap
}

.ckins__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0 0
}

.ckins__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000;
  font-weight: 700;
  transition: 0.3s ease
}

.ckins__btn:hover {
  transform: translateY(-2px)
}

.ckins__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: #FFFFFF
}

.ckins__btn--ghost:hover {
  background: #222222
}

/* focus */
.cricket__matches a:focus-visible,
.cricket__hero a:focus-visible,
.cricket__format__btn:focus-visible,
.cricket__filter:focus-visible,
.ckins__btn:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px
}

/* reviews__hero */
.reviews__hero {
  background: linear-gradient(180deg, var(--primary), #111111)
}

.reviews__hero__container {
  position: relative
}

.reviews__hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: center
}

.reviews__hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #0E0E0E, #161616);
  padding: 18px
}

.reviews__hero__heading {
  color: var(--light);
  font-size: 32px;
  line-height: 40px;
  margin: 0 0 10px 0
}

.reviews__hero__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 10px 0
}

.reviews__hero__text {
  color: #CFCFCF;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 12px 0
}

.reviews__hero__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000;
  font-weight: 700;
  transition: 0.3s ease
}

.reviews__hero__btn:hover {
  transform: translateY(-2px)
}

.reviews__hero__visual {
  position: relative;
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #101010, #171717);
  overflow: hidden
}

.reviews__hero__img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block
}

/* reviews__list */
.reviews__list {
  background: linear-gradient(180deg, #111111, #0B0B0B)
}

.reviews__list__container {
  position: relative
}

.reviews__list__heading {
  color: #FFFFFF;
  font-size: 28px;
  line-height: 36px;
  margin: 0 0 8px 0
}

.reviews__list__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px
}

.reviews__card {
  border: 1px solid var(--neutral);
  border-radius: 12px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 12px;
  transition: 0.3s ease
}

.reviews__card:hover {
  transform: translateY(-2px);
  border-color: var(--highlight)
}

.reviews__title {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 6px 0
}

.reviews__meta {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 6px 0
}

.reviews__text {
  color: #DADADA;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 6px 0
}

.reviews__tag {
  color: #CFCFCF;
  font-size: 12px;
  line-height: 18px;
  margin: 0
}

.reviews__list__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0 0
}

.reviews__list__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000;
  font-weight: 700;
  transition: 0.3s ease
}

.reviews__list__btn:hover {
  transform: translateY(-2px)
}

.reviews__list__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: #FFFFFF
}

.reviews__list__btn--ghost:hover {
  background: #222222
}

/* reviews__stats */
.reviews__stats {
  background: linear-gradient(180deg, #0B0B0B, #111111)
}

.reviews__stats__container {
  position: relative
}

.reviews__stats__heading {
  color: #FFFFFF;
  font-size: 26px;
  line-height: 34px;
  margin: 0 0 8px 0
}

.reviews__stats__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.reviews__stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 12px 0
}

.reviews__stat {
  border: 1px solid var(--neutral);
  border-radius: 12px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 12px
}

.reviews__stat-label {
  color: #BFD0DE;
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 6px 0
}

.reviews__stat-value {
  color: #FFFFFF;
  font-size: 22px;
  line-height: 28px;
  margin: 0 0 6px 0;
  font-weight: 800
}

.reviews__stat-note {
  color: #C7D3DB;
  font-size: 12px;
  line-height: 16px;
  margin: 0
}

.reviews__highlights {
  list-style: disc;
  margin: 0 0 12px 18px;
  padding: 0;
  display: grid;
  gap: 6px
}

.reviews__highlights .text {
  color: #CFCFCF;
  font-size: 13px;
  line-height: 18px;
  margin: 0
}

.reviews__stats__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.reviews__stats__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000;
  font-weight: 700;
  transition: 0.3s ease
}

.reviews__stats__btn:hover {
  transform: translateY(-2px)
}

.reviews__stats__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: #FFFFFF
}

.reviews__stats__btn--ghost:hover {
  background: #222222
}

/* focus states */
.reviews__hero a:focus-visible,
.reviews__list a:focus-visible,
.reviews__stats a:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
  transition: 0.3s ease
}

/* article__hero */
.article__hero {
  background: linear-gradient(180deg, var(--primary), #111111)
}

.article__hero__container {
  position: relative
}

.article__hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: center
}

.article__hero__content {
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #0E0E0E, #161616);
  padding: 18px
}

.article__hero__heading {
  color: var(--light);
  font-size: 32px;
  line-height: 40px;
  margin: 0 0 10px 0
}

.article__hero__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.article__hero__points {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  display: grid;
  gap: 8px
}

.article__hero__points .text {
  color: #EAEAEA;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--neutral);
  border-radius: 10px;
  background: #0F0F0F
}

.article__hero__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 8px 0
}

.article__hero__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  transition: 0.3s ease
}

.article__hero__btn:hover {
  transform: translateY(-2px)
}

.article__hero__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: var(--light)
}

.article__hero__btn--ghost:hover {
  background: #222222
}

.article__hero__note {
  color: #AFAFAF;
  font-size: 12px;
  line-height: 18px;
  margin: 6px 0 0 0
}

.article__hero__visual {
  position: relative;
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #101010, #171717);
  overflow: hidden
}

.article__hero__img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block
}

/* article__content */
.article__content {
  background: linear-gradient(180deg, #111111, #0B0B0B)
}

.article__content__container {
  position: relative
}

.article__content__heading {
  color: #FFFFFF;
  font-size: 26px;
  line-height: 34px;
  margin: 0 0 10px 0;
  position: relative;
  padding-top: 4px
}

.article__content__heading::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  width: 68px;
  margin: 6px 0 0 0
}

.article__content .text {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.article__content__bullets {
  list-style: disc;
  margin: 0 0 12px 18px;
  padding: 0;
  display: grid;
  gap: 8px
}

.article__content__bullets .text {
  color: #CFCFCF;
  font-size: 14px;
  line-height: 20px;
  margin: 0
}

/* article__offer */
.article__offer {
  background: linear-gradient(180deg, #0B0B0B, #111111)
}

.article__offer__container {
  position: relative
}

.article__offer__box {
  position: relative;
  border: 1px solid var(--neutral);
  border-radius: 16px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 16px;
  overflow: hidden
}

.article__offer__box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A)
}

.article__offer__heading {
  color: #FFFFFF;
  font-size: 28px;
  line-height: 36px;
  margin: 0 0 10px 0
}

.article__offer__lead {
  color: #DADADA;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.article__offer__points {
  list-style: disc;
  margin: 0 0 12px 18px;
  padding: 0;
  display: grid;
  gap: 6px
}

.article__offer__points .text {
  color: #CFCFCF;
  font-size: 14px;
  line-height: 20px;
  margin: 0
}

.article__offer__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px 0
}

.article__offer__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  transition: 0.3s ease
}

.article__offer__btn:hover {
  transform: translateY(-2px)
}

.article__offer__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: #FFFFFF
}

.article__offer__btn--ghost:hover {
  background: #222222
}

.article__offer__note {
  color: #BFD0DE;
  font-size: 12px;
  line-height: 18px;
  margin: 6px 0 0 0
}

/* focus states */
.article__hero a:focus-visible,
.article__offer a:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
  transition: 0.3s ease
}

/* micro pulse for offer box */
@keyframes offerPulse {
  0% {
    filter: brightness(1)
  }

  50% {
    filter: brightness(1.15)
  }

  100% {
    filter: brightness(1)
  }
}

.article__offer__box {
  animation: offerPulse 3.2s ease-in-out infinite
}

.article__offer__btn.is-pressed,
.article__hero__btn.is-pressed {
  transform: translateY(-1px) scale(0.98)
}

/* faq__hero */
.faq__hero {
  background: linear-gradient(180deg, var(--primary), #111111)
}

.faq__hero__container {
  position: relative
}

.faq__hero__wrap {
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #0E0E0E, #161616);
  padding: 18px
}

.faq__hero__heading {
  color: var(--light);
  font-size: 32px;
  line-height: 40px;
  margin: 0 0 10px 0
}

.faq__hero__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.faq__hero__chips {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.faq__hero__chip {
  border: 1px solid var(--secondary);
  border-radius: 999px;
  background: #0F0F0F;
  color: #EFEFEF;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 16px
}

.faq__hero__micro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 10px 0
}

.faq__hero__stat {
  border: 1px solid var(--neutral);
  border-radius: 10px;
  background: #101010;
  padding: 10px
}

.faq__hero__stat-label {
  color: #BDBDBD;
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 4px 0
}

.faq__hero__stat-value {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 24px;
  margin: 0;
  font-weight: 800
}

.faq__hero__note {
  color: #AFAFAF;
  font-size: 12px;
  line-height: 18px;
  margin: 6px 0 0 0
}

/* faq__list */
.faq__list {
  background: linear-gradient(180deg, #111111, #0B0B0B)
}

.faq__list__container {
  position: relative
}

.faq__list__heading {
  color: #FFFFFF;
  font-size: 28px;
  line-height: 36px;
  margin: 0 0 8px 0
}

.faq__list__lead {
  color: #D3D3D3;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 12px 0
}

.faq__list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px
}

.faql__item {
  border: 1px solid var(--neutral);
  border-radius: 12px;
  background: linear-gradient(180deg, #101010, #171717);
  transition: 0.3s ease;
  overflow: hidden
}

.faql__item[open] {
  border-color: var(--highlight)
}

.faql__q {
  position: relative;
  display: block;
  padding: 12px 40px 12px 12px;
  color: #EDEDED;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer
}

.faql__q::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 18px;
  color: #FFD27A;
  transition: 0.3s ease
}

.faql__item[open] .faql__q::after {
  content: "—";
  transform: translateY(-50%) scale(1.05)
}

.faql__a {
  padding: 0 12px 12px 12px
}

.faql__a .text {
  color: #D0D0D0;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 8px 0
}

.faql__steps {
  list-style: disc;
  margin: 0 0 0 18px;
  padding: 0;
  display: grid;
  gap: 6px
}

.faql__steps .text {
  color: #CFCFCF;
  font-size: 13px;
  line-height: 18px;
  margin: 0
}

/* faq__cta */
.faq__cta {
  background: linear-gradient(180deg, #0B0B0B, #111111)
}

.faq__cta__container {
  position: relative
}

.faq__cta__box {
  border: 1px solid var(--neutral);
  border-radius: 16px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 16px;
  position: relative;
  overflow: hidden
}

.faq__cta__box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A)
}

.faq__cta__heading {
  color: #FFFFFF;
  font-size: 26px;
  line-height: 34px;
  margin: 0 0 8px 0
}

.faq__cta__lead {
  color: #DADADA;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 10px 0
}

.faq__cta__points {
  list-style: disc;
  margin: 0 0 10px 18px;
  padding: 0;
  display: grid;
  gap: 6px
}

.faq__cta__points .text {
  color: #CFCFCF;
  font-size: 14px;
  line-height: 20px;
  margin: 0
}

.faq__cta__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 6px 0
}

.faq__cta__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  transition: 0.3s ease
}

.faq__cta__btn:hover {
  transform: translateY(-2px)
}

.faq__cta__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: #FFFFFF
}

.faq__cta__btn--ghost:hover {
  background: #222222
}

.faq__cta__note {
  color: #BFD0DE;
  font-size: 12px;
  line-height: 18px;
  margin: 0
}

/* focus states */
.faq__hero a:focus-visible,
.faq__list a:focus-visible,
.faq__cta a:focus-visible,
.faql__item summary:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
  transition: 0.3s ease
}

/* subtle pulse on open */
@keyframes faqlPulse {
  0% {
    filter: brightness(1)
  }

  50% {
    filter: brightness(1.12)
  }

  100% {
    filter: brightness(1)
  }
}

.faql__item[open] {
  animation: faqlPulse 0.6s ease 1
}

/* sitefooter */
.sitefooter {
  padding: 10px 0;
  background: linear-gradient(180deg, #0B0B0B, #111111);
  border-top: 1px solid var(--neutral)
}

.sitefooter__container {
  position: relative
}

.sitefooter__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  padding-top: 18px;
  padding-bottom: 18px
}

.sitefooter__brand {
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 16px
}

.sitefooter__logo {
  display: inline-block;
  color: var(--light);
  font-weight: 800;
  font-size: 22px;
  line-height: 28px;
  margin-bottom: 8px;
  text-decoration: none;
  transition: 0.3s ease
}

.sitefooter__logo:hover {
  opacity: 0.9
}

.sitefooter__text {
  color: #D3D3D3;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 8px 0
}

.sitefooter__note {
  color: #AFAFAF;
  font-size: 12px;
  line-height: 18px;
  margin: 0
}

.sitefooter__nav {
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 16px
}

.sitefooter__heading {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 10px 0
}

.sitefooter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px
}

.sitefooter__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #E6E6E6;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  padding: 6px 0;
  transition: 0.3s ease
}

.sitefooter__link::before {
  content: "•";
  color: var(--highlight);
  font-size: 16px;
  line-height: 16px
}

.sitefooter__link:hover {
  transform: translateX(3px);
  color: #FFFFFF
}

.sitefooter__blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px
}

.sitefooter__block {
  border: 1px solid var(--neutral);
  border-radius: 14px;
  background: linear-gradient(180deg, #101010, #171717);
  padding: 16px
}

.sitefooter__bottom {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px solid var(--neutral);
  padding-top: 12px;
  margin-top: 8px
}

.sitefooter__small {
  color: #C7D3DB;
  font-size: 12px;
  line-height: 18px;
  margin: 0
}

.sitefooter__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.sitefooter__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  transition: 0.3s ease;
  text-decoration: none;
  display: inline-block
}

.sitefooter__btn:hover {
  transform: translateY(-2px)
}

.sitefooter__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: #FFFFFF
}

.sitefooter__btn--ghost:hover {
  background: #222222
}

/* focus */
.sitefooter a:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
  transition: 0.3s ease
}


/* modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  z-index: 1000
}

.modal.active {
  opacity: 1;
  pointer-events: auto
}

.modal__dialog {
  background: #111111;
  border: 1px solid var(--neutral);
  border-radius: 14px;
  max-width: 400px;
  width: 90%;
  padding: 18px;
  position: relative;
  animation: modalIn 0.3s ease
}

.modal__heading {
  color: #FFFFFF;
  font-size: 20px;
  line-height: 28px;
  margin: 0 0 10px 0;
  text-align: center
}

.modal__text {
  color: #D0D0D0;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 12px 0;
  text-align: center
}

.modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center
}

.modal__btn {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--highlight), #FFD27A);
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: 0.3s ease
}

.modal__btn:hover {
  transform: translateY(-2px)
}

.modal__btn--ghost {
  background: transparent;
  border: 1px solid var(--secondary);
  color: #FFFFFF
}

.modal__btn--ghost:hover {
  background: #222222
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer
}

@keyframes modalIn {
  from {
    transform: scale(0.9);
    opacity: 0
  }

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