/* =========================================================
   TEAM NOX
   SPONSOR PAGE
========================================================= */


/* =========================================================
   BASE
========================================================= */

html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: #050505;

  color: #f5f5f5;

  font-family: "Montserrat", sans-serif;
}


.sponsor-page {
  width: 100%;

  overflow: hidden;

  background: #050505;
}


/* =========================================================
   TECHNICAL GRID
========================================================= */

.technical-grid {
  position: absolute;

  inset: 0;

  z-index: 0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px
    );

  background-size:
    75px
    75px;

  opacity: 0.4;

  pointer-events: none;
}


/* =========================================================
   SHARED BUTTONS
========================================================= */

.primary-button,
.secondary-button {
  width: 175px;

  height: 44px;

  box-sizing: border-box;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-family: "Montserrat", sans-serif;

  font-size: 9px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 2px;

  text-decoration: none;

  text-transform: uppercase;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}


.primary-button {
  border: 1px solid #f3f3f3;

  background: #f3f3f3;

  color: #050505;
}


.secondary-button {
  border:
    1px solid
    rgba(255, 255, 255, 0.42);

  background: transparent;

  color: #f1f1f1;
}


.primary-button:hover,
.secondary-button:hover {
  transform:
    translateY(-3px);
}


.secondary-button:hover {
  border-color: #ffffff;

  background:
    rgba(255, 255, 255, 0.05);
}


/* =========================================================
   HERO
========================================================= */

.sponsor-hero {
  width: 100%;

  height:
    calc(
      100vh - 88px
    );

  min-height: 650px;

  position: relative;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  overflow: hidden;

  isolation: isolate;

  border-bottom:
    1px solid
    #383838;

  background:
    radial-gradient(
      circle at 30% 42%,
      rgba(255, 255, 255, 0.055),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #050505,
      #101010 52%,
      #060606
    );
}


/* =========================================================
   HERO WATERMARK
========================================================= */

.hero-watermark {
  width:
    min(
      780px,
      55vw
    );

  position: absolute;

  right: -170px;

  bottom: -225px;

  z-index: 1;

  opacity: 0.105;

  filter:
    grayscale(1)
    brightness(0.85);

  pointer-events: none;
}


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

.hero-content {
  width:
    min(
      1420px,
      88%
    );

  margin:
    0 auto;

  position: relative;

  z-index: 3;
}


.hero-eyebrow {
  display: block;

  margin-bottom: 20px;

  color: #767676;

  font-size: 10px;

  font-weight: 400;

  letter-spacing: 5px;
}


.hero-content h1 {
  margin: 0;

  color: #f5f5f5;

  font-size:
    clamp(
      58px,
      6vw,
      92px
    );

  font-weight: 400;

  line-height: 1.07;

  letter-spacing: 9px;
}


.hero-line {
  width: 120px;

  height: 1px;

  margin:
    28px
    0
    20px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.7),
      transparent
    );
}


.hero-content p {
  margin: 0;

  color: #8e8e8e;

  font-size: 11px;

  font-weight: 400;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.hero-actions {
  margin-top: 42px;

  display: flex;

  align-items: center;

  gap: 13px;
}


/* =========================================================
   SCROLL
========================================================= */

.sponsor-scroll {
  width: max-content;

  position: absolute;

  left: 50%;

  bottom: 28px;

  z-index: 10;

  transform:
    translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 16px;

  color: #8e8e8e;

  text-decoration: none;
}


.sponsor-scroll-text {
  font-size: 10px;

  font-weight: 400;

  letter-spacing: 3px;
}


.sponsor-scroll-arrow {
  width: 44px;

  height: 44px;

  position: relative;

  display: block;

  border:
    1px solid
    rgba(255, 255, 255, 0.45);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.015);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}


.sponsor-scroll-arrow::before {
  content: "";

  width: 1px;

  height: 13px;

  position: absolute;

  left: 50%;

  top: 12px;

  transform:
    translateX(-50%);

  background: #ffffff;
}


.sponsor-scroll-arrow::after {
  content: "";

  width: 7px;

  height: 7px;

  position: absolute;

  left: 50%;

  top: 20px;

  border-right:
    1px solid
    #ffffff;

  border-bottom:
    1px solid
    #ffffff;

  transform:
    translateX(-50%)
    rotate(45deg);
}


.sponsor-scroll:hover
.sponsor-scroll-arrow {
  transform:
    translateY(5px);

  background: #f5f5f5;

  border-color: #f5f5f5;
}


.sponsor-scroll:hover
.sponsor-scroll-arrow::before {
  background: #050505;
}


.sponsor-scroll:hover
.sponsor-scroll-arrow::after {
  border-color: #050505;
}


/* =========================================================
   TIERS SECTION
========================================================= */

.tiers-section {
  position: relative;

  padding:
    105px
    30px
    130px;

  overflow: hidden;

  isolation: isolate;

  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(255, 255, 255, 0.04),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #050505,
      #0c0c0c,
      #050505
    );
}


.tiers-wrapper {
  width:
    min(
      1260px,
      100%
    );

  margin:
    0 auto;

  position: relative;

  z-index: 2;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-eyebrow {
  display: block;

  margin-bottom: 18px;

  color: #6e6e6e;

  font-size: 10px;

  font-weight: 400;

  letter-spacing: 5px;

  text-align: center;
}


.tiers-wrapper > h2 {
  margin: 0;

  color: #f4f4f4;

  font-size:
    clamp(
      42px,
      4vw,
      62px
    );

  font-weight: 400;

  line-height: 1;

  letter-spacing: 9px;

  text-align: center;
}


.section-divider {
  width: 180px;

  height: 1px;

  margin:
    28px
    auto
    24px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.6),
      transparent
    );
}


.tiers-intro {
  width:
    min(
      700px,
      95%
    );

  margin:
    0
    auto
    60px;

  color: #858585;

  font-size: 12px;

  line-height: 1.8;

  text-align: center;
}


/* =========================================================
   TIER CARDS
========================================================= */

.tier-card {
  --tier-a: #777777;
  --tier-b: #aaaaaa;
  --tier-c: #666666;

  width: 100%;

  margin-bottom: 42px;

  padding: 2px;

  box-sizing: border-box;

  overflow: hidden;

  border-radius: 7px;

  background:
    linear-gradient(
      120deg,
      var(--tier-a),
      var(--tier-b),
      var(--tier-c)
    );

  box-shadow:
    0
    18px
    55px
    rgba(0, 0, 0, 0.24);
}


/* =========================================================
   COLORS
========================================================= */

.tier-onyx {
  --tier-a: #34383d;
  --tier-b: #92979c;
  --tier-c: #292c30;
}


.tier-diamond {
  --tier-a: #765aa8;
  --tier-b: #d1bdf2;
  --tier-c: #b75ca9;
}


.tier-platinum {
  --tier-a: #597487;
  --tier-b: #c5d0d7;
  --tier-c: #6f8c9e;
}


.tier-gold {
  --tier-a: #9d6a22;
  --tier-b: #f2d17d;
  --tier-c: #a36a1d;
}


.tier-silver {
  --tier-a: #66686c;
  --tier-b: #d5d5d7;
  --tier-c: #7a7d82;
}


.tier-bronze {
  --tier-a: #805b32;
  --tier-b: #c99a62;
  --tier-c: #79532d;
}


/* =========================================================
   TIER MAIN
========================================================= */

.tier-main {
  position: relative;

  padding:
    34px
    40px;

  box-sizing: border-box;

  border-radius: 5px;

  background:
    radial-gradient(
      circle at 18% 8%,
      rgba(255, 255, 255, 0.03),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #080808,
      #030303
    );
}


/* =========================================================
   TIER HEIGHTS
========================================================= */

.tier-onyx .tier-main {
  min-height: 500px;
}


.tier-diamond .tier-main {
  min-height: 450px;
}


.tier-platinum .tier-main {
  min-height: 400px;
}


.tier-gold .tier-main {
  min-height: 350px;
}


.tier-silver .tier-main {
  min-height: 300px;
}


.tier-bronze .tier-main {
  min-height: 260px;
}


/* =========================================================
   TIER HEADER
========================================================= */

.tier-header {
  min-height: 82px;

  display: flex;

  align-items: center;

  gap: 38px;
}


.tier-header h3 {
  margin: 0;

  color: transparent;

  font-size:
    clamp(
      44px,
      3.5vw,
      62px
    );

  font-weight: 400;

  line-height: 1;

  letter-spacing: 1px;

  background:
    linear-gradient(
      120deg,
      var(--tier-a),
      var(--tier-b),
      var(--tier-c)
    );

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* =========================================================
   PRICE
========================================================= */

.tier-price {
  min-width: 95px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: var(--tier-b);

  text-align: center;
}


.tier-price strong {
  width: 100%;

  display: block;

  margin: 0;

  color: var(--tier-b);

  font-size: 16px;

  font-weight: 600;

  line-height: 1.15;

  text-align: center;
}


.price-dash {
  display: block;

  margin:
    2px
    0;

  color:
    rgba(
      255,
      255,
      255,
      0.5
    );

  font-size: 12px;

  font-weight: 300;

  line-height: 1;
}


.tier-price-single {
  gap: 5px;
}


.tier-price-label {
  display: block;

  color: var(--tier-b);

  font-size: 9px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 1px;

  white-space: nowrap;
}


/* =========================================================
   BENEFITS BUTTON
========================================================= */

.tier-benefits-button {
  width: 155px;

  height: 40px;

  position: absolute;

  right: 30px;

  top: 37px;

  border:
    1px solid
    var(--tier-b);

  background: transparent;

  color: #eeeeee;

  font-family: "Montserrat", sans-serif;

  font-size: 8px;

  font-weight: 500;

  letter-spacing: 1.8px;

  cursor: pointer;

  transition:
    background 0.22s ease,
    border-color 0.22s ease;
}


.tier-benefits-button:hover {
  background:
    rgba(255, 255, 255, 0.06);
}


/* =========================================================
   EMPTY SPONSOR TEXT
========================================================= */

.tier-empty {
  width: 100%;

  position: absolute;

  left: 0;

  top: 62%;

  transform:
    translateY(-50%);

  padding:
    0
    40px;

  box-sizing: border-box;

  color: #575757;

  font-size: 12px;

  font-weight: 500;

  text-align: center;
}


/* =========================================================
   BENEFITS PANEL
========================================================= */

.tier-benefits {
  display: grid;

  grid-template-rows: 0fr;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #505050,
      #626262
    );

  transition:
    grid-template-rows
    0.48s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.tier-benefits-inner {
  min-height: 0;

  overflow: hidden;

  padding:
    0
    36px;

  color: #ffffff;

  font-size: 11px;

  font-weight: 400;

  line-height: 1.6;

  transition:
    padding 0.48s ease;
}


.tier-benefits-inner p {
  margin:
    0
    0
    7px;

  font-weight: 500;
}


.tier-benefits-inner ul {
  margin: 0;

  padding-left: 18px;
}


/* =========================================================
   OPEN BENEFITS
========================================================= */

.tier-card.is-open
.tier-benefits {
  grid-template-rows: 1fr;
}


.tier-card.is-open
.tier-benefits-inner {
  padding:
    22px
    36px
    25px;
}


/* =========================================================
   BECOME A SPONSOR
   TRUE FULL SCREEN
========================================================= */

.become-sponsor-section {
  width: 100%;

  height: 100vh;

  min-height: 100vh;

  box-sizing: border-box;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  overflow: hidden;

  isolation: isolate;

  scroll-margin-top: 88px;

  border-top:
    1px solid
    #363636;

  border-bottom:
    1px solid
    #363636;

  background:
    radial-gradient(
      circle at 28% 42%,
      rgba(255, 255, 255, 0.055),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #050505 0%,
      #101010 52%,
      #060606 100%
    );
}


/* =========================================================
   BECOME WATERMARK
========================================================= */

.become-watermark {
  width:
    min(
      760px,
      48vw
    );

  position: absolute;

  right: -90px;

  top: 50%;

  z-index: 1;

  transform:
    translateY(-50%);

  opacity: 0.105;

  filter:
    grayscale(1)
    brightness(0.85);

  pointer-events: none;

  user-select: none;
}


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

.become-content {
  width:
    min(
      1380px,
      88%
    );

  margin:
    0 auto;

  position: relative;

  z-index: 3;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


/* =========================================================
   BECOME EYEBROW
========================================================= */

.become-eyebrow {
  display: block;

  margin-bottom: 22px;

  color: #757575;

  font-size: 11px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 3px;
}


/* =========================================================
   BECOME TITLE
========================================================= */

.become-content h2 {
  margin: 0;

  color: #f5f5f5;

  font-size:
    clamp(
      54px,
      5vw,
      78px
    );

  font-weight: 400;

  line-height: 1;

  letter-spacing: 10px;

  white-space: nowrap;
}


/* =========================================================
   BECOME DIVIDER
========================================================= */

.become-divider {
  width: 160px;

  height: 1px;

  margin:
    34px
    0
    28px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.65),
      transparent
    );
}


/* =========================================================
   BECOME DESCRIPTION
========================================================= */

.become-content > p {
  width:
    min(
      610px,
      100%
    );

  margin: 0;

  color: #939393;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.72;
}


/* =========================================================
   BECOME BUTTONS
========================================================= */

.become-actions {
  margin-top: 34px;

  display: flex;

  align-items: center;

  gap: 14px;
}


/* =========================================================
   STATS
========================================================= */

.sponsor-stats {
  margin-top: 64px;

  display: flex;

  align-items: center;

  gap: 34px;
}


.stat {
  width: 105px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}


.stat strong {
  color: #f5f5f5;

  font-size: 40px;

  font-weight: 400;

  line-height: 1;
}


.stat span {
  margin-top: 12px;

  color: #737373;

  font-size: 9px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 1.2px;

  text-align: center;

  white-space: nowrap;
}


.stat-divider {
  width: 1px;

  height: 64px;

  background:
    rgba(
      255,
      255,
      255,
      0.4
    );
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

  .become-content {
    width:
      min(
        1450px,
        84%
      );
  }


  .become-content h2 {
    font-size: 76px;
  }


  .become-watermark {
    width:
      min(
        780px,
        47vw
      );

    right: -80px;
  }

}


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

@media (max-width: 900px) {

  .hero-watermark {
    width: 600px;

    right: -330px;
  }


  .become-watermark {
    width: 620px;

    right: -330px;

    opacity: 0.07;
  }


  .become-content h2 {
    white-space: normal;
  }

}


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

@media (max-width: 650px) {

  .sponsor-hero {
    height:
      calc(
        100svh - 90px
      );

    min-height:
      calc(
        100svh - 90px
      );
  }


  .hero-content {
    width: 86%;
  }


  .hero-content h1 {
    font-size: 47px;

    letter-spacing: 6px;
  }


  .hero-actions {
    flex-direction: column;
  }


  .primary-button,
  .secondary-button {
    width: 100%;
  }


  .tiers-section {
    padding:
      80px
      16px
      95px;
  }


  .tiers-wrapper > h2 {
    font-size: 35px;

    letter-spacing: 5px;
  }


  .tier-main {
    padding:
      24px
      20px;
  }


  .tier-header {
    gap: 18px;
  }


  .tier-header h3 {
    font-size: 30px;
  }


  .tier-price {
    min-width: 70px;
  }


  .tier-price strong {
    font-size: 12px;
  }


  .price-dash {
    font-size: 10px;
  }


  .tier-price-label {
    font-size: 7px;
  }


  .tier-benefits-button {
    width: 105px;

    height: 35px;

    right: 16px;

    top: 27px;

    font-size: 6px;
  }


  .tier-empty {
    font-size: 10px;
  }


  /* TIER HEIGHTS MOBILE */

  .tier-onyx .tier-main {
    min-height: 390px;
  }


  .tier-diamond .tier-main {
    min-height: 360px;
  }


  .tier-platinum .tier-main {
    min-height: 330px;
  }


  .tier-gold .tier-main {
    min-height: 300px;
  }


  .tier-silver .tier-main {
    min-height: 270px;
  }


  .tier-bronze .tier-main {
    min-height: 240px;
  }


  /* BECOME SPONSOR */

  .become-sponsor-section {
    height: 100svh;

    min-height: 100svh;

    scroll-margin-top: 90px;
  }


  .become-content {
    width: 86%;
  }


  .become-eyebrow {
    font-size: 9px;

    letter-spacing: 2.5px;
  }


  .become-content h2 {
    font-size: 38px;

    line-height: 1.15;

    letter-spacing: 6px;

    white-space: normal;
  }


  .become-divider {
    margin:
      25px
      0;
  }


  .become-content > p {
    font-size: 11px;

    line-height: 1.65;
  }


  .become-actions {
    margin-top: 25px;

    flex-direction: column;
  }


  .sponsor-stats {
    margin-top: 38px;

    gap: 12px;

    justify-content: space-between;
  }


  .stat {
    width: auto;

    min-width: 65px;
  }


  .stat strong {
    font-size: 27px;
  }


  .stat span {
    margin-top: 8px;

    font-size: 7px;
  }


  .stat-divider {
    height: 48px;
  }


  .become-watermark {
    width: 520px;

    right: -350px;

    top: 55%;
  }

}