/* =========================================
   RESET
========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    radial-gradient(
      circle at 70% 40%,
      #06294c 0%,
      #03101f 35%,
      #010812 70%
    );

  color: white;

  min-height: 100vh;
}



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

.site-header {
  max-width: 1500px;

  margin: 0 auto;

  padding: 24px 30px;

  display: flex;

  justify-content: space-between;

  align-items: center;
}



.logo-area {
  display: flex;

  align-items: center;

  gap: 14px;
}



.logo-icon {
  font-size: 55px;
}



.logo-area h1 {
  font-size: 34px;

  letter-spacing: 1px;
}



.logo-area h1 span {
  color: #1297ff;
}



.logo-area p {
  color: #b8c7d9;

  margin-top: 4px;
}



.main-nav {
  display: flex;

  align-items: center;

  gap: 28px;
}



.main-nav a {
  color: white;

  text-decoration: none;

  font-size: 15px;

  transition: color 0.2s ease;
}



.main-nav a:hover {
  color: #27a9ff;
}



.main-nav .active {
  color: #27a9ff;
}



.login-btn,
.join-btn {
  padding: 12px 20px;

  border-radius: 8px;
}



.login-btn {
  border: 1px solid white;
}



.join-btn {
  background: #1297ff;
}



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

.hero {
  max-width: 1500px;

  margin: 0 auto;

  padding: 35px 30px 80px;

  display: grid;

  grid-template-columns: 40% 60%;

  align-items: center;

  min-height: 760px;
}



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

.hero-copy h2 {
  font-size:
    clamp(48px, 5vw, 78px);

  line-height: 0.98;

  margin-bottom: 30px;
}



.hero-copy h2 span {
  color: #1297ff;
}



.intro {
  max-width: 600px;

  font-size: 20px;

  color: #d2dce8;

  line-height: 1.6;

  margin-bottom: 25px;
}



.benefits {
  list-style: none;

  margin: 25px 0 35px;
}



.benefits li {
  font-size: 19px;

  margin: 15px 0;
}



.benefits li::before {
  content: "✓";

  display: inline-flex;

  justify-content: center;

  align-items: center;

  width: 27px;

  height: 27px;

  margin-right: 14px;

  border-radius: 50%;

  background: #1297ff;

  color: white;

  font-weight: bold;
}



.primary-cta {
  display: inline-block;

  padding: 18px 28px;

  background:
    linear-gradient(
      90deg,
      #087ee8,
      #18a8ff
    );

  border-radius: 8px;

  color: white;

  text-decoration: none;

  font-weight: bold;

  font-size: 18px;

  box-shadow:
    0 0 25px
    rgba(18, 151, 255, 0.35);
}



/* =========================================
   SPIDERWEB GRAPHIC AREA
========================================= */

.web-area {
  position: relative;

  width: 760px;

  height: 700px;

  max-width: 100%;

  margin: 0 auto;

  /*
     Geometry:

     central circle = 215px
     central radius = 107.5px

     outer circle = 175px
     outer radius = 87.5px

     future leg = 38px

     107.5 + 87.5 + 38 = 233px
  */

  --orbit-radius: 233px;
}



/* =========================================
   CENTRAL HUB
========================================= */

.hub {
  position: absolute;

  width: 215px;

  height: 215px;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at center,
      #0a2542 0%,
      #05162b 60%,
      #020b17 100%
    );

  border:
    3px solid #41baff;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  z-index: 5;

  box-shadow:
    0 0 15px #139eff,
    0 0 40px
      rgba(0, 153, 255, 0.5),
    inset 0 0 30px
      rgba(0, 130, 255, 0.18);
}



.hub-web {
  font-size: 50px;

  margin-bottom: 6px;
}



.hub strong {
  font-size: 27px;

  line-height: 1;
}



.hub span {
  font-size: 26px;

  color: #159eff;

  margin-top: 5px;
}



/* =========================================
   ALL OUTER CIRCLES
========================================= */

.leg {
  position: absolute;

  width: 175px;

  height: 175px;

  left: 50%;

  top: 50%;

  border-radius: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 18px;

  background:
    radial-gradient(
      circle at center,
      #0b2139 0%,
      #06162b 65%,
      #020b18 100%
    );

  z-index: 4;


  /*
     Every circle starts at the exact
     centre of .web-area.

     It is then rotated by its angle,
     moved outward exactly 233px,
     then rotated back so the contents
     remain upright.
  */

  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(
      calc(-1 * var(--orbit-radius))
    )
    rotate(
      calc(-1 * var(--angle))
    );


  transition:
    filter 0.25s ease;
}



.leg:hover {
  filter: brightness(1.2);
}



/* =========================================
   EXACT 7-WAY SPACING
   360 / 7 = 51.428571°
========================================= */


/* 0° */

.traffic {
  --angle: 0deg;
}


/* 51.428571° */

.leads {
  --angle: 51.428571deg;
}


/* 102.857142° */

.email {
  --angle: 102.857142deg;
}


/* 154.285713° */

.affiliate {
  --angle: 154.285713deg;
}


/* 205.714284° */

.my-offer {
  --angle: 205.714284deg;
}


/* 257.142855° */

.tools {
  --angle: 257.142855deg;
}


/* 308.571426° */

.marketing {
  --angle: 308.571426deg;
}



/* =========================================
   OUTER CIRCLE COLOURS
========================================= */

.traffic {
  border:
    3px solid #34aaff;

  box-shadow:
    0 0 25px
      rgba(52, 170, 255, 0.5);
}



.leads {
  border:
    3px solid #62f5ad;

  box-shadow:
    0 0 25px
      rgba(98, 245, 173, 0.45);
}



.email {
  border:
    3px solid #a46aff;

  box-shadow:
    0 0 25px
      rgba(164, 106, 255, 0.45);
}



.affiliate {
  border:
    3px solid #ffaa32;

  box-shadow:
    0 0 25px
      rgba(255, 170, 50, 0.45);
}



.my-offer {
  border:
    3px solid #ff5ca8;

  box-shadow:
    0 0 15px
      rgba(255, 92, 168, 0.8),
    0 0 35px
      rgba(255, 92, 168, 0.45);

  background:
    radial-gradient(
      circle at center,
      #351428 0%,
      #191226 60%,
      #080914 100%
    );
}



.tools {
  border:
    3px solid #2ae7ed;

  box-shadow:
    0 0 25px
      rgba(42, 231, 237, 0.45);
}



.marketing {
  border:
    3px solid #ffce3a;

  box-shadow:
    0 0 25px
      rgba(255, 206, 58, 0.45);
}



/* =========================================
   OUTER CIRCLE CONTENT
========================================= */

.leg .icon {
  font-size: 32px;

  margin-bottom: 6px;
}



.leg h3 {
  text-transform: uppercase;

  font-size: 21px;

  margin:
    3px 0 7px;
}



.leg p {
  font-size: 13px;

  line-height: 1.35;

  color: #d8e5ef;

  max-width: 130px;
}



.my-offer h3 {
  color: #ff70b4;
}



/* =========================================
   FEATURES
========================================= */

.features {
  max-width: 1450px;

  margin:
    0 auto 40px;

  padding: 28px;

  border:
    1px solid #244867;

  border-radius: 18px;

  background:
    rgba(3, 15, 29, 0.8);

  display: grid;

  grid-template-columns:
    repeat(5, 1fr);
}



.feature {
  padding:
    10px 25px;

  border-right:
    1px solid #274760;
}



.feature:last-child {
  border-right: none;
}



.feature h3 {
  margin-bottom: 10px;
}



.feature p {
  color: #b9c9d8;

  line-height: 1.4;

  font-size: 14px;
}



/* =========================================
   TAGLINE
========================================= */

.tagline {
  text-align: center;

  padding:
    20px 20px 50px;
}



.tagline h2 {
  color: #b5c8dc;
}



.tagline span {
  color: #159eff;
}



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

@media (max-width: 1100px) {

  .site-header {
    flex-direction: column;

    gap: 25px;
  }


  .main-nav {
    flex-wrap: wrap;

    justify-content: center;
  }


  .hero {
    grid-template-columns:
      1fr;

    text-align: center;
  }


  .hero-copy {
    margin-bottom: 50px;
  }


  .intro {
    margin-left: auto;

    margin-right: auto;
  }


  .web-area {
    transform:
      scale(0.9);

    transform-origin:
      top center;

    margin-bottom:
      -50px;
  }


  .features {
    grid-template-columns:
      1fr;
  }


  .feature {
    border-right: none;

    border-bottom:
      1px solid #274760;

    padding: 20px;
  }


  .feature:last-child {
    border-bottom: none;
  }

}



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

@media (max-width: 760px) {

  .hero {
    padding:
      30px 20px 60px;
  }


  .hero-copy h2 {
    font-size: 46px;
  }


  .web-area {
    width: 100%;

    height: auto;

    transform: none;

    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(140px, 1fr)
      );

    gap: 20px;

    margin-top: 30px;

    --orbit-radius: 0px;
  }


  .hub,
  .leg {
    position: relative;

    left: auto;

    top: auto;

    transform: none;

    margin: auto;
  }


  .hub {
    grid-column:
      1 / -1;
  }


  .my-offer {
    grid-column:
      1 / -1;
  }

}



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

@media (max-width: 500px) {

  .logo-area {
    align-items:
      flex-start;
  }


  .logo-area h1 {
    font-size: 25px;
  }


  .logo-icon {
    font-size: 42px;
  }


  .main-nav {
    gap: 14px;
  }


  .hero-copy h2 {
    font-size: 38px;
  }


  .intro {
    font-size: 17px;
  }


  .benefits li {
    font-size: 16px;
  }


  .primary-cta {
    font-size: 15px;

    padding:
      16px 20px;
  }


  .web-area {
    grid-template-columns:
      1fr;
  }


  .hub,
  .my-offer {
    grid-column: auto;
  }

}

/* =========================================
   HOW IT WORKS PAGE
========================================= */

.how-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 30px 60px;
  text-align: center;
}

.how-hero-inner {
  max-width: 850px;
  margin: 0 auto;
}

.eyebrow {
  color: #199eff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

.how-hero h2 {
  font-size: clamp(46px, 6vw, 76px);
  margin-bottom: 25px;
}

.how-hero h2 span {
  color: #159eff;
}

.how-intro {
  font-size: 23px;
  line-height: 1.6;
  color: #e0eaf4;
}

.how-subtext {
  margin-top: 15px;
  color: #8fb5d2;
  font-size: 18px;
}


/* =========================================
   HOW STEPS
========================================= */

.how-step {
  position: relative;

  max-width: 1050px;

  margin: 0 auto 45px;

  padding: 45px 50px 45px 145px;

  border: 1px solid #20476a;

  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(5, 23, 42, 0.96),
      rgba(3, 13, 27, 0.96)
    );

  box-shadow:
    0 0 35px rgba(0, 135, 255, 0.08);
}


.step-number {
  position: absolute;

  left: 35px;
  top: 35px;

  width: 70px;
  height: 70px;

  border-radius: 50%;

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

  background: #1297ff;

  color: white;

  font-size: 32px;
  font-weight: bold;

  box-shadow:
    0 0 25px rgba(18, 151, 255, 0.55);
}


.step-icon {
  position: absolute;

  left: 52px;
  top: 120px;

  font-size: 34px;
}


.step-content h3 {
  color: white;

  font-size: 31px;

  margin-bottom: 18px;
}


.step-content > p {
  color: #c6d6e5;

  font-size: 18px;

  line-height: 1.65;

  max-width: 800px;

  margin-bottom: 15px;
}


.step-note {
  color: #77bdf3 !important;

  font-size: 15px !important;

  margin-top: 20px;
}


/* =========================================
   EXAMPLE LINK
========================================= */

.example-box {
  display: inline-flex;

  flex-direction: column;

  gap: 7px;

  padding: 17px 25px;

  margin-top: 10px;

  border: 1px solid #147ec4;

  border-radius: 10px;

  background:
    rgba(5, 45, 78, 0.55);
}


.example-box span {
  color: #8bbbdc;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 1px;
}


.example-box strong {
  color: white;

  font-size: 19px;
}


/* =========================================
   PROGRAM CHOICES
========================================= */

.choice-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 25px;
}


.choice-tags span {
  padding: 10px 18px;

  border-radius: 30px;

  border: 1px solid #188fe7;

  background:
    rgba(9, 55, 90, 0.6);

  color: #d9efff;

  font-weight: bold;
}


/* =========================================
   SPONSOR EXAMPLE
========================================= */

.sponsor-example {
  margin: 35px auto;

  display: flex;

  flex-direction: column;

  align-items: center;
}


.member-card {
  min-width: 250px;

  padding: 18px 25px;

  text-align: center;

  border-radius: 12px;

  border: 1px solid #2f6c98;

  background:
    rgba(7, 32, 58, 0.9);
}


.member-card strong {
  display: block;

  color: white;

  font-size: 21px;

  margin-bottom: 8px;
}


.member-card span {
  display: block;

  color: #9fc1dc;

  margin-top: 5px;
}


.highlight-member {
  border-color: #22aaff;

  box-shadow:
    0 0 25px rgba(34, 170, 255, 0.3);
}


.tree-line {
  width: 3px;

  height: 35px;

  background:
    linear-gradient(
      #159eff,
      #62c9ff
    );

  box-shadow:
    0 0 10px #159eff;
}


.program-routing {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 20px;

  margin-top: 30px;
}


.routing-card {
  padding: 25px;

  border: 1px solid #244d71;

  border-radius: 15px;

  background:
    rgba(5, 26, 46, 0.85);
}


.routing-card h4 {
  color: #159eff;

  font-size: 23px;

  margin-bottom: 10px;
}


.routing-card p {
  color: #b7c9d9;

  margin-bottom: 10px;
}


.routing-card strong {
  color: white;

  line-height: 1.5;
}


/* =========================================
   LINK CHANGE
========================================= */

.link-change {
  display: flex;

  align-items: center;

  gap: 25px;

  margin-top: 30px;
}


.link-state {
  flex: 1;

  padding: 25px;

  border: 1px solid #35566f;

  border-radius: 15px;

  background:
    rgba(5, 26, 46, 0.9);
}


.active-state {
  border-color: #20a4ff;

  box-shadow:
    0 0 25px rgba(32, 164, 255, 0.2);
}


.state-label {
  display: inline-block;

  color: #8ea9be;

  text-transform: uppercase;

  letter-spacing: 1px;

  font-size: 12px;

  margin-bottom: 8px;
}


.link-state h4 {
  color: white;

  font-size: 21px;

  margin-bottom: 8px;
}


.link-state p {
  color: #9fb9ce;
}


.change-arrow {
  font-size: 38px;

  color: #159eff;
}


/* =========================================
   ONE LINK
========================================= */

.big-step-text {
  font-size: 21px !important;
}


.one-link-box {
  margin-top: 30px;

  padding: 35px;

  text-align: center;

  border-radius: 18px;

  border: 1px solid #159eff;

  background:
    radial-gradient(
      circle,
      rgba(8, 84, 143, 0.42),
      rgba(3, 17, 32, 0.92)
    );

  box-shadow:
    0 0 35px rgba(21, 158, 255, 0.18);
}


.one-link-box span {
  display: block;

  color: #159eff;

  font-size: 18px;

  letter-spacing: 3px;

  margin-bottom: 12px;
}


.one-link-box strong {
  display: block;

  color: white;

  font-size: clamp(22px, 4vw, 38px);

  margin-bottom: 15px;
}


.one-link-box p {
  color: #bdd6e8;

  line-height: 1.5;
}


/* =========================================
   YOUR OFFER
========================================= */

.your-offer-section {
  max-width: 1050px;

  margin: 70px auto;

  padding: 45px 55px;

  display: flex;

  align-items: center;

  gap: 35px;

  border-radius: 22px;

  border: 1px solid #ff5ca8;

  background:
    linear-gradient(
      135deg,
      rgba(55, 15, 42, 0.7),
      rgba(12, 13, 29, 0.95)
    );

  box-shadow:
    0 0 30px rgba(255, 92, 168, 0.12);
}


.your-offer-icon {
  font-size: 65px;
}


.your-offer-section h2 {
  font-size: 35px;

  margin-bottom: 15px;

  color: #ff70b4;
}


.your-offer-section p {
  color: #d8c7d3;

  font-size: 18px;

  line-height: 1.65;
}


/* =========================================
   FREEDOM SECTION
========================================= */

.freedom-section {
  max-width: 900px;

  margin: 80px auto;

  padding: 20px 30px;

  text-align: center;
}


.freedom-section h2 {
  font-size: 40px;

  margin-bottom: 20px;
}


.freedom-section p {
  color: #b9cbda;

  font-size: 19px;

  line-height: 1.65;

  margin: 8px auto;

  max-width: 760px;
}


/* =========================================
   FINAL CTA
========================================= */

.how-cta {
  max-width: 1000px;

  margin: 40px auto 70px;

  padding: 60px 30px;

  text-align: center;

  border-top:
    1px solid #1f5279;
}


.cta-web {
  font-size: 65px;

  margin-bottom: 15px;
}


.how-cta h2 {
  font-size:
    clamp(36px, 5vw, 56px);

  margin-bottom: 15px;
}


.how-cta > p {
  color: #bcd0df;

  font-size: 19px;

  margin:
    0 auto 30px;

  max-width: 650px;

  line-height: 1.6;
}


.how-cta h3 {
  margin-top: 45px;

  color: #b3c7d8;

  font-size: 22px;
}


.how-cta h3 span {
  color: #159eff;
}


/* =========================================
   HOW IT WORKS RESPONSIVE
========================================= */

@media (max-width: 760px) {

  .how-hero {
    padding-top: 50px;
  }


  .how-step {
    margin-left: 18px;

    margin-right: 18px;

    padding:
      110px 25px 30px;
  }


  .step-number {
    left: 25px;

    top: 25px;
  }


  .step-icon {
    left: 115px;

    top: 40px;
  }


  .step-content h3 {
    font-size: 26px;
  }


  .program-routing {
    grid-template-columns: 1fr;
  }


  .link-change {
    flex-direction: column;
  }


  .change-arrow {
    transform: rotate(90deg);
  }


  .link-state {
    width: 100%;
  }


  .your-offer-section {
    margin-left: 18px;

    margin-right: 18px;

    padding: 35px 25px;

    flex-direction: column;

    text-align: center;
  }

}
/* =========================================
   PROGRAMS PAGE
========================================= */


.programs-hero {
  max-width: 1150px;
  margin: 0 auto;
  padding: 75px 30px 55px;
  text-align: center;
}


.programs-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}


.programs-hero h2 {
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.05;
  margin-bottom: 25px;
}


.programs-hero h2 span {
  display: block;
  color: #159eff;
}


.programs-intro {
  max-width: 800px;
  margin: 0 auto 30px;

  color: #cfdfec;

  font-size: 21px;
  line-height: 1.65;
}



/* =========================================
   CHOICE MESSAGE
========================================= */

.program-choice-message {
  max-width: 700px;

  margin: 30px auto 15px;

  padding: 20px 25px;

  display: flex;

  align-items: center;

  gap: 18px;

  text-align: left;

  border: 1px solid #1b7fbd;

  border-radius: 14px;

  background:
    rgba(5, 42, 70, 0.65);
}


.choice-icon {
  min-width: 45px;

  height: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #1297ff;

  font-size: 23px;

  font-weight: bold;
}


.program-choice-message strong {
  display: block;

  font-size: 18px;

  margin-bottom: 5px;
}


.program-choice-message p {
  color: #a9c2d5;

  line-height: 1.4;
}



/* =========================================
   EXISTING MEMBER MESSAGE
========================================= */

.existing-member-message {
  max-width: 700px;

  margin: 15px auto 0;

  padding: 17px 22px;

  display: flex;

  align-items: center;

  gap: 15px;

  text-align: left;

  border-radius: 12px;

  border: 1px solid #345b78;

  background:
    rgba(8, 23, 38, 0.85);
}


.existing-icon {
  font-size: 27px;
}


.existing-member-message p {
  color: #b9ccda;

  line-height: 1.5;
}


.existing-member-message strong {
  color: white;
}



/* =========================================
   PROGRAM GRID
========================================= */

.programs-grid {
  width: min(1350px, calc(100% - 50px));

  margin: 20px auto 80px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 25px;

  align-items: stretch;
}



/* =========================================
   PROGRAM CARD
========================================= */

.program-card {
  position: relative;

  padding: 35px;

  border-radius: 22px;

  border: 1px solid #214c6e;

  background:
    linear-gradient(
      145deg,
      rgba(6, 28, 50, 0.97),
      rgba(2, 12, 24, 0.98)
    );

  display: flex;

  flex-direction: column;

  box-shadow:
    0 0 35px
    rgba(0, 130, 255, 0.08);

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


.program-card:hover {
  transform: translateY(-7px);

  border-color: #178fdc;

  box-shadow:
    0 12px 40px
    rgba(0, 120, 220, 0.16);
}



/* =========================================
   CARD HEADER
========================================= */

.program-card-top {
  display: flex;

  align-items: center;

  gap: 18px;

  padding-bottom: 25px;

  border-bottom:
    1px solid #1e405b;
}


.program-symbol {
  width: 65px;

  height: 65px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #0c4776,
      #061c31
    );

  border: 2px solid #169dff;

  font-size: 30px;

  box-shadow:
    0 0 20px
    rgba(22, 157, 255, 0.3);
}


.program-type {
  color: #159eff;

  font-size: 11px;

  letter-spacing: 1.5px;

  font-weight: bold;
}


.program-card h3 {
  margin-top: 5px;

  color: white;

  font-size: 29px;
}



/* =========================================
   PROGRAM DESCRIPTION
========================================= */

.program-description {
  min-height: 110px;

  padding: 25px 0 20px;

  color: #c3d3e0;

  font-size: 17px;

  line-height: 1.6;
}



/* =========================================
   WHY IT'S IN THE WEB
========================================= */

.why-web {
  padding: 20px;

  margin-bottom: 25px;

  border-radius: 13px;

  border-left:
    3px solid #159eff;

  background:
    rgba(8, 44, 72, 0.55);
}


.why-web h4 {
  margin-bottom: 10px;

  color: #45b8ff;

  font-size: 13px;

  letter-spacing: 1.4px;
}


.why-web p {
  color: #b5cad9;

  font-size: 15px;

  line-height: 1.55;
}



/* =========================================
   PROGRAM INFORMATION
========================================= */

.program-info {
  margin-top: auto;

  border-top:
    1px solid #203e55;

  border-bottom:
    1px solid #203e55;
}


.program-info > div {
  padding: 14px 3px;

  display: flex;

  justify-content: space-between;

  gap: 20px;

  border-bottom:
    1px solid #172f42;
}


.program-info > div:last-child {
  border-bottom: none;
}


.program-info span {
  color: #698ca7;

  font-size: 11px;

  letter-spacing: 1px;

  font-weight: bold;
}


.program-info strong {
  color: #dceaf4;

  font-size: 13px;

  text-align: right;
}



/* =========================================
   PROGRAM BUTTONS
========================================= */

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

  display: grid;

  grid-template-columns:
    1fr 1.2fr;

  gap: 10px;
}


.program-learn-btn,
.program-main-btn {
  padding: 13px 15px;

  border-radius: 8px;

  text-align: center;

  text-decoration: none;

  font-size: 14px;

  font-weight: bold;
}


.program-learn-btn {
  color: #cce7f8;

  border: 1px solid #41718e;

  background:
    rgba(5, 25, 40, 0.8);
}


.program-learn-btn:hover {
  border-color: #159eff;

  color: white;
}


.program-main-btn {
  color: white;

  background:
    linear-gradient(
      90deg,
      #087ee8,
      #18a8ff
    );

  box-shadow:
    0 0 18px
    rgba(18, 151, 255, 0.2);
}


.already-member-card {
  margin-top: 17px;

  color: #718ea3;

  font-size: 12px;

  text-align: center;
}


.already-member-card strong {
  color: #b5d9ef;
}



/* =========================================
   CARD ACCENT COLOURS
========================================= */

.daily-card .program-symbol {
  border-color: #31a9ff;
}


.leadsleap-card .program-symbol {
  border-color: #5cf0ad;
}


.leadsleap-card .program-type {
  color: #5cf0ad;
}


.leadsleap-card .why-web {
  border-left-color: #5cf0ad;
}


.leadsleap-card .why-web h4 {
  color: #5cf0ad;
}


.clicks-card .program-symbol {
  border-color: #ffc341;
}


.clicks-card .program-type {
  color: #ffc341;
}


.clicks-card .why-web {
  border-left-color: #ffc341;
}


.clicks-card .why-web h4 {
  color: #ffc341;
}



/* =========================================
   BUSINESS FIRST
========================================= */

.business-first-section {
  width: min(1100px, calc(100% - 50px));

  margin: 70px auto;

  padding: 45px 50px;

  display: flex;

  align-items: center;

  gap: 35px;

  border-radius: 22px;

  border:
    1px solid #ff5ca8;

  background:
    linear-gradient(
      135deg,
      rgba(52, 14, 40, 0.62),
      rgba(5, 16, 30, 0.96)
    );

  box-shadow:
    0 0 35px
    rgba(255, 92, 168, 0.1);
}


.business-first-icon {
  width: 95px;

  height: 95px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  border:
    2px solid #ff5ca8;

  background:
    rgba(75, 20, 57, 0.6);

  font-size: 42px;
}


.business-first-section h2 {
  max-width: 800px;

  margin-bottom: 17px;

  font-size:
    clamp(30px, 4vw, 43px);
}


.business-first-section h2 span {
  color: #ff70b4;
}


.business-first-section > div p {
  color: #cbbdca;

  font-size: 17px;

  line-height: 1.6;

  margin-bottom: 8px;
}



/* =========================================
   BUSINESS EXAMPLES
========================================= */

.your-business-examples {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 20px;
}


.your-business-examples span {
  padding: 9px 14px;

  border-radius: 25px;

  border:
    1px solid #95496f;

  background:
    rgba(74, 23, 53, 0.55);

  color: #f0cfdf;

  font-size: 13px;
}



/* =========================================
   PROGRAM FLOW
========================================= */

.program-flow-section {
  max-width: 1200px;

  margin: 95px auto;

  padding: 20px 30px;

  text-align: center;
}


.program-flow-section h2 {
  margin-bottom: 50px;

  font-size:
    clamp(34px, 5vw, 51px);
}


.program-flow-section h2 span {
  color: #159eff;
}


.program-flow {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;
}


.flow-item {
  width: 190px;

  text-align: center;
}


.flow-circle {
  width: 95px;

  height: 95px;

  margin:
    0 auto 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  border:
    2px solid #159eff;

  background:
    radial-gradient(
      circle,
      #0a365b,
      #031424
    );

  font-size: 36px;

  box-shadow:
    0 0 22px
    rgba(21, 158, 255, 0.25);
}


.flow-item h3 {
  margin-bottom: 7px;

  font-size: 21px;
}


.flow-item p {
  color: #98b0c3;

  font-size: 14px;

  line-height: 1.4;
}


.flow-arrow {
  color: #159eff;

  font-size: 35px;
}


.destination-flow .flow-circle {
  border-color: #ff5ca8;

  box-shadow:
    0 0 22px
    rgba(255, 92, 168, 0.25);
}


.destination-flow h3 {
  color: #ff70b4;
}



/* =========================================
   MORE LEGS
========================================= */

.more-legs-section {
  width: min(950px, calc(100% - 50px));

  margin: 100px auto;

  padding: 50px;

  text-align: center;

  border-radius: 22px;

  border:
    1px solid #244a68;

  background:
    rgba(4, 18, 33, 0.85);
}


.more-legs-web {
  font-size: 55px;

  margin-bottom: 15px;
}


.more-legs-section h2 {
  margin-bottom: 20px;

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


.more-legs-section > p:not(.eyebrow) {
  max-width: 720px;

  margin:
    7px auto;

  color: #aebfcd;

  font-size: 17px;

  line-height: 1.6;
}


.future-leg-list {
  margin-top: 30px;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;
}


.future-leg-list span {
  padding: 10px 16px;

  border-radius: 25px;

  border:
    1px dashed #36749f;

  color: #9fcbe8;

  font-size: 13px;
}



/* =========================================
   PROGRAMS CTA
========================================= */

.programs-cta {
  max-width: 1000px;

  margin:
    60px auto 70px;

  padding:
    60px 30px;

  text-align: center;

  border-top:
    1px solid #1f5279;
}


.programs-cta h2 {
  margin-bottom: 15px;

  font-size:
    clamp(36px, 5vw, 55px);
}


.programs-cta > p {
  max-width: 680px;

  margin:
    0 auto 30px;

  color: #b7cbd9;

  font-size: 18px;

  line-height: 1.6;
}


.programs-cta h3 {
  margin-top: 45px;

  color: #afc3d2;
}


.programs-cta h3 span {
  color: #159eff;
}



/* =========================================
   PROGRAMS RESPONSIVE
========================================= */

@media (max-width: 1050px) {

  .programs-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .program-card:last-child {
    grid-column:
      1 / -1;
  }


  .program-flow {
    flex-wrap: wrap;
  }

}



@media (max-width: 760px) {

  .programs-grid {
    width:
      calc(100% - 36px);

    grid-template-columns: 1fr;
  }


  .program-card:last-child {
    grid-column: auto;
  }


  .program-card {
    padding: 27px;
  }


  .program-description {
    min-height: auto;
  }


  .program-info > div {
    flex-direction: column;

    gap: 5px;
  }


  .program-info strong {
    text-align: left;
  }


  .business-first-section {
    width:
      calc(100% - 36px);

    padding: 35px 25px;

    flex-direction: column;

    text-align: center;
  }


  .your-business-examples {
    justify-content: center;
  }


  .program-flow {
    flex-direction: column;
  }


  .flow-arrow {
    transform: rotate(90deg);
  }


  .more-legs-section {
    width:
      calc(100% - 36px);

    padding: 35px 25px;
  }

}



@media (max-width: 500px) {

  .program-actions {
    grid-template-columns: 1fr;
  }


  .program-choice-message,
  .existing-member-message {
    align-items: flex-start;
  }

}

/* =========================================
   ABOUT PAGE
========================================= */

.about-hero {
  max-width: 1150px;
  margin: 0 auto;
  padding: 80px 30px 65px;
  text-align: center;
}


.about-hero-inner {
  max-width: 950px;
  margin: 0 auto;
}


.about-hero h2 {
  font-size: clamp(45px, 6vw, 72px);
  line-height: 1.05;
  margin-bottom: 30px;
}


.about-hero h2 span {
  display: block;
  color: #159eff;
}


.about-intro {
  max-width: 820px;
  margin: 0 auto 15px;

  color: #b9cedd;

  font-size: 20px;
  line-height: 1.65;
}


.about-intro-strong {
  color: #e3edf5;
  font-size: 22px;
}



/* =========================================
   THE PROBLEM
========================================= */

.about-problem-section {
  width: min(1200px, calc(100% - 50px));
  margin: 30px auto 90px;
}


.about-section-heading {
  text-align: center;
  margin-bottom: 35px;
}


.about-section-heading h2 {
  font-size: clamp(34px, 5vw, 50px);
}


.about-section-heading h2 span {
  color: #159eff;
}


.problem-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;
}


.problem-card {
  padding: 30px 22px;

  text-align: center;

  border-radius: 18px;

  border: 1px solid #244b69;

  background:
    linear-gradient(
      145deg,
      rgba(6, 28, 50, 0.95),
      rgba(2, 13, 25, 0.96)
    );
}


.problem-icon {
  width: 65px;
  height: 65px;

  margin: 0 auto 18px;

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

  border-radius: 50%;

  border: 2px solid #159eff;

  background: #07233c;

  font-size: 29px;

  box-shadow:
    0 0 20px rgba(21, 158, 255, 0.22);
}


.problem-card h3 {
  font-size: 21px;
  margin-bottom: 10px;
}


.problem-card p {
  color: #9eb6c8;

  font-size: 14px;
  line-height: 1.55;
}



/* =========================================
   SPIDERWEB ANSWER
========================================= */

.about-answer {
  max-width: 800px;

  margin: 40px auto 0;

  padding: 28px 35px;

  display: flex;
  align-items: center;

  gap: 25px;

  border: 1px solid #168edc;

  border-radius: 18px;

  background:
    rgba(5, 43, 72, 0.62);

  box-shadow:
    0 0 30px rgba(21, 158, 255, 0.12);
}


.about-answer-web {
  font-size: 55px;
}


.about-answer span {
  color: #159eff;

  font-size: 12px;
  font-weight: bold;

  letter-spacing: 2px;
}


.about-answer h3 {
  margin: 5px 0 8px;

  font-size: 27px;
}


.about-answer p {
  color: #b7cbda;

  line-height: 1.55;
}



/* =========================================
   PHILOSOPHY
========================================= */

.about-philosophy {
  width: min(1050px, calc(100% - 50px));

  margin: 90px auto;

  padding: 45px 50px;

  display: flex;
  align-items: center;

  gap: 40px;

  border-radius: 22px;

  border: 1px solid #ff5ca8;

  background:
    linear-gradient(
      135deg,
      rgba(53, 14, 40, 0.65),
      rgba(4, 16, 30, 0.96)
    );

  box-shadow:
    0 0 35px rgba(255, 92, 168, 0.1);
}


.philosophy-icon {
  width: 105px;
  height: 105px;

  flex-shrink: 0;

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

  border-radius: 50%;

  border: 2px solid #ff5ca8;

  font-size: 47px;

  background:
    rgba(75, 20, 57, 0.55);
}


.philosophy-content h2 {
  margin-bottom: 17px;

  color: #ff70b4;

  font-size: clamp(32px, 4vw, 43px);
}


.philosophy-content > p:not(.eyebrow) {
  color: #cbbdca;

  font-size: 17px;
  line-height: 1.6;

  margin-bottom: 9px;
}


.philosophy-highlight {
  margin-top: 18px !important;

  color: white !important;

  font-weight: bold;
}



/* =========================================
   JUST STARTING OUT
========================================= */

.starting-out-section {
  width: min(1150px, calc(100% - 50px));

  margin: 100px auto;

  display: grid;

  grid-template-columns:
    1.15fr 0.85fr;

  gap: 70px;

  align-items: center;
}


.starting-out-content h2 {
  margin-bottom: 25px;

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

  line-height: 1.1;
}


.starting-out-content h2 span {
  display: block;

  color: #159eff;
}


.starting-out-content > p:not(.eyebrow) {
  color: #b4c8d7;

  font-size: 17px;
  line-height: 1.65;

  margin-bottom: 12px;
}


.starting-message {
  margin-top: 30px;

  padding: 20px 25px;

  border-left: 3px solid #159eff;

  background:
    rgba(5, 42, 70, 0.55);

  border-radius: 0 12px 12px 0;
}


.starting-message span,
.starting-message strong {
  display: block;
}


.starting-message span {
  color: #8cb8d5;

  font-size: 13px;

  letter-spacing: 2px;

  margin-bottom: 5px;
}


.starting-message strong {
  color: #159eff;

  font-size: 22px;
}



/* =========================================
   STARTING VISUAL
========================================= */

.starting-visual {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.start-stage {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 20px;
}


.start-circle {
  width: 75px;
  height: 75px;

  flex-shrink: 0;

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

  border-radius: 50%;

  border: 2px solid #159eff;

  background:
    radial-gradient(
      circle,
      #0b3c63,
      #031525
    );

  font-size: 31px;

  box-shadow:
    0 0 20px rgba(21, 158, 255, 0.25);
}


.start-stage span {
  display: block;

  color: #6e99b6;

  font-size: 11px;

  font-weight: bold;

  letter-spacing: 2px;

  margin-bottom: 4px;
}


.start-stage strong {
  font-size: 18px;
}


.start-line {
  width: 2px;

  height: 42px;

  margin-left: 36px;

  background:
    linear-gradient(
      #159eff,
      #31556d
    );
}


.destination-stage .start-circle {
  border-color: #ff5ca8;

  box-shadow:
    0 0 20px rgba(255, 92, 168, 0.25);
}


.destination-stage strong {
  color: #ff70b4;
}



/* =========================================
   FREE PHILOSOPHY
========================================= */

.free-philosophy {
  width: min(1050px, calc(100% - 50px));

  margin: 100px auto;

  padding: 45px 50px;

  display: grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap: 60px;

  border: 1px solid #234c69;

  border-radius: 22px;

  background:
    rgba(4, 20, 36, 0.88);
}


.free-heading h2 {
  font-size: clamp(34px, 4vw, 46px);

  line-height: 1.1;
}


.free-heading h2 span {
  display: block;

  color: #159eff;
}


.free-content > p {
  color: #b4c8d7;

  font-size: 16px;

  line-height: 1.6;

  margin-bottom: 10px;
}


.freedom-points {
  margin-top: 25px;
}


.freedom-points div {
  margin: 13px 0;

  color: #d0dfeb;
}


.freedom-points span {
  display: inline-flex;

  width: 25px;
  height: 25px;

  margin-right: 10px;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #159eff;

  font-weight: bold;
}



/* =========================================
   CURATED PROGRAMS
========================================= */

.curated-section {
  width: min(1000px, calc(100% - 50px));

  margin: 100px auto;

  text-align: center;
}


.curated-section h2 {
  font-size: clamp(36px, 5vw, 51px);

  margin-bottom: 20px;
}


.curated-section h2 span {
  color: #159eff;
}


.curated-intro {
  color: #a9bfce;

  font-size: 18px;

  margin-bottom: 30px;
}


.curated-box {
  padding: 35px 40px;

  display: flex;

  align-items: center;

  gap: 30px;

  text-align: left;

  border-radius: 18px;

  border: 1px solid #245273;

  background:
    linear-gradient(
      135deg,
      rgba(6, 31, 53, 0.95),
      rgba(3, 15, 28, 0.95)
    );
}


.curated-web {
  font-size: 65px;

  flex-shrink: 0;
}


.curated-box h3 {
  margin-bottom: 12px;

  color: #159eff;

  font-size: 26px;
}


.curated-box p {
  color: #afc3d2;

  line-height: 1.6;

  margin-bottom: 8px;
}


.curated-box strong {
  display: block;

  margin-top: 15px;

  color: white;
}



/* =========================================
   LIVING LINK
========================================= */

.living-link-section {
  width: min(1050px, calc(100% - 50px));

  margin: 110px auto;

  text-align: center;
}


.living-link-heading h2 {
  font-size: clamp(38px, 5vw, 54px);

  margin-bottom: 20px;
}


.living-link-heading h2 span {
  color: #159eff;
}


.living-link-intro {
  max-width: 700px;

  margin: 0 auto 30px;

  color: #afc4d4;

  font-size: 18px;

  line-height: 1.6;
}


.living-link-example {
  max-width: 650px;

  margin: 0 auto 40px;

  padding: 24px;

  border-radius: 14px;

  border: 1px solid #159eff;

  background:
    rgba(5, 48, 80, 0.65);

  box-shadow:
    0 0 30px rgba(21, 158, 255, 0.15);
}


.living-link-example span {
  display: block;

  margin-bottom: 7px;

  color: #7faecc;

  font-size: 11px;

  letter-spacing: 2px;
}


.living-link-example strong {
  font-size: clamp(20px, 4vw, 31px);
}



/* =========================================
   VERSION FLOW
========================================= */

.version-flow {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 25px;
}


.version-card {
  width: 300px;

  padding: 28px;

  border-radius: 16px;

  border: 1px solid #315a77;

  background:
    rgba(5, 25, 43, 0.9);
}


.version-card > span {
  color: #7599b2;

  font-size: 11px;

  letter-spacing: 2px;
}


.version-card h3 {
  margin: 8px 0 15px;

  font-size: 24px;
}


.version-card p {
  color: #a8bdcc;

  margin: 7px 0;
}


.future-version {
  border-color: #159eff;

  box-shadow:
    0 0 25px rgba(21, 158, 255, 0.13);
}


.future-version h3 {
  color: #159eff;
}


.version-arrow {
  color: #159eff;

  font-size: 38px;
}


.same-link-message {
  margin-top: 30px;

  color: #9fb8ca;

  font-size: 18px;
}


.same-link-message strong {
  color: white;
}



/* =========================================
   WHAT WE ARE
========================================= */

.what-we-are-section {
  width: min(1050px, calc(100% - 50px));

  margin: 110px auto;

  text-align: center;
}


.what-we-are-section > h2 {
  font-size: clamp(36px, 5vw, 50px);

  margin-bottom: 35px;
}


.what-we-are-section > h2 span {
  color: #159eff;
}


.what-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 22px;

  text-align: left;
}


.what-card {
  padding: 35px;

  border-radius: 18px;

  background:
    rgba(4, 21, 38, 0.92);
}


.is-card {
  border: 1px solid #159eff;
}


.isnt-card {
  border: 1px solid #496273;
}


.what-card h3 {
  margin-bottom: 22px;

  color: #159eff;

  font-size: 18px;

  letter-spacing: 1.5px;
}


.isnt-card h3 {
  color: #a5b8c6;
}


.what-card ul {
  list-style: none;
}


.what-card li {
  position: relative;

  margin: 15px 0;

  padding-left: 27px;

  color: #b9cbd8;

  line-height: 1.5;
}


.is-card li::before {
  content: "✓";

  position: absolute;

  left: 0;

  color: #159eff;

  font-weight: bold;
}


.isnt-card li::before {
  content: "—";

  position: absolute;

  left: 0;

  color: #8296a4;
}



/* =========================================
   FUTURE
========================================= */

.about-future {
  max-width: 850px;

  margin: 100px auto;

  padding: 20px 30px;

  text-align: center;
}


.future-web {
  font-size: 60px;

  margin-bottom: 15px;
}


.about-future h2 {
  margin-bottom: 20px;

  font-size: clamp(35px, 5vw, 48px);
}


.about-future > p:not(.eyebrow) {
  max-width: 720px;

  margin: 9px auto;

  color: #aec2d1;

  font-size: 17px;

  line-height: 1.6;
}


.about-future .future-highlight {
  margin-top: 25px !important;

  color: #159eff !important;

  font-size: 23px !important;

  font-weight: bold;
}



/* =========================================
   ABOUT CTA
========================================= */

.about-cta {
  max-width: 1000px;

  margin: 60px auto 70px;

  padding: 60px 30px;

  text-align: center;

  border-top:
    1px solid #1f5279;
}


.about-cta h2 {
  margin-bottom: 18px;

  font-size: clamp(38px, 5vw, 56px);
}


.about-cta h2 span {
  color: #159eff;
}


.about-cta > p {
  max-width: 650px;

  margin: 0 auto 30px;

  color: #b9cdda;

  font-size: 18px;

  line-height: 1.6;
}


.about-cta h3 {
  margin-top: 45px;

  color: #aec3d3;
}


.about-cta h3 span {
  color: #159eff;
}



/* =========================================
   ABOUT RESPONSIVE
========================================= */

@media (max-width: 900px) {

  .problem-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .starting-out-section {
    grid-template-columns: 1fr;
  }


  .starting-visual {
    max-width: 500px;

    margin: 0 auto;

    width: 100%;
  }


  .free-philosophy {
    grid-template-columns: 1fr;

    gap: 30px;
  }

}



@media (max-width: 760px) {

  .about-hero {
    padding-top: 50px;
  }


  .about-philosophy {
    width: calc(100% - 36px);

    padding: 35px 25px;

    flex-direction: column;

    text-align: center;
  }


  .about-answer {
    flex-direction: column;

    text-align: center;
  }


  .curated-box {
    flex-direction: column;

    text-align: center;

    padding: 30px 25px;
  }


  .version-flow {
    flex-direction: column;
  }


  .version-arrow {
    transform: rotate(90deg);
  }


  .what-grid {
    grid-template-columns: 1fr;
  }

}



@media (max-width: 520px) {

  .problem-grid {
    grid-template-columns: 1fr;
  }


  .starting-message strong {
    font-size: 18px;
  }


  .free-philosophy {
    width: calc(100% - 36px);

    padding: 32px 24px;
  }


  .living-link-example strong {
    font-size: 18px;
  }


  .version-card {
    width: 100%;
  }

}

/* =========================================
   FAQ PAGE
========================================= */

.faq-hero {
  max-width: 1150px;

  margin: 0 auto;

  padding:
    80px 30px 55px;

  text-align: center;
}


.faq-hero-inner {
  max-width: 900px;

  margin: 0 auto;
}


.faq-hero h2 {
  font-size:
    clamp(43px, 6vw, 70px);

  line-height: 1.05;

  margin-bottom: 25px;
}


.faq-hero h2 span {
  display: block;

  color: #159eff;
}


.faq-intro {
  max-width: 750px;

  margin: 0 auto;

  color: #b9cedd;

  font-size: 20px;

  line-height: 1.6;
}



/* =========================================
   FAQ LIST
========================================= */

.faq-section {
  width:
    min(1000px, calc(100% - 50px));

  margin:
    20px auto 90px;
}


.faq-grid {
  display: grid;

  gap: 15px;
}



/* =========================================
   FAQ ITEM
========================================= */

.faq-item {
  border:
    1px solid #244b69;

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(6, 29, 50, 0.96),
      rgba(2, 13, 25, 0.97)
    );

  overflow: hidden;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.faq-item:hover {
  border-color: #168fdc;
}


.faq-item[open] {
  border-color: #159eff;

  box-shadow:
    0 0 28px
    rgba(21, 158, 255, 0.08);
}



/* =========================================
   FAQ QUESTION
========================================= */

.faq-item summary {
  position: relative;

  padding:
    23px 65px 23px 25px;

  cursor: pointer;

  list-style: none;

  color: white;

  font-size: 18px;

  font-weight: bold;

  user-select: none;
}


.faq-item summary::-webkit-details-marker {
  display: none;
}


.faq-item summary::after {
  content: "+";

  position: absolute;

  right: 24px;

  top: 50%;

  transform:
    translateY(-50%);

  width: 32px;

  height: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  border:
    1px solid #159eff;

  color: #159eff;

  font-size: 22px;

  font-weight: normal;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.faq-item[open] summary::after {
  content: "−";

  background: #159eff;

  color: white;
}



/* =========================================
   FAQ ANSWER
========================================= */

.faq-answer {
  padding:
    0 25px 25px;

  border-top:
    1px solid #17364f;
}


.faq-answer p {
  max-width: 850px;

  margin-top: 16px;

  color: #afc5d5;

  font-size: 16px;

  line-height: 1.65;
}



/* =========================================
   LINK EXAMPLE
========================================= */

.faq-link-example {
  display: inline-block;

  margin-top: 18px;

  padding:
    13px 18px;

  border-radius: 8px;

  border:
    1px solid #159eff;

  background:
    rgba(5, 48, 80, 0.65);

  color: white;

  font-size: 18px;

  font-weight: bold;

  box-shadow:
    0 0 20px
    rgba(21, 158, 255, 0.1);
}



/* =========================================
   FAQ SUMMARY
========================================= */

.faq-summary {
  width:
    min(1050px, calc(100% - 50px));

  margin:
    100px auto;

  padding:
    45px;

  text-align: center;

  border:
    1px solid #245273;

  border-radius: 22px;

  background:
    rgba(4, 20, 36, 0.9);
}


.faq-summary h2 {
  margin-bottom: 35px;

  font-size:
    clamp(35px, 5vw, 48px);
}


.faq-summary h2 span {
  color: #159eff;
}


.faq-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;
}


.faq-summary-grid div {
  padding: 25px 18px;

  border-radius: 14px;

  border:
    1px solid #244b69;

  background:
    rgba(5, 29, 48, 0.75);
}


.faq-summary-grid strong {
  display: block;

  margin-bottom: 7px;

  color: #159eff;

  font-size: 19px;

  letter-spacing: 1px;
}


.faq-summary-grid span {
  color: #9fb5c5;

  font-size: 14px;
}



/* =========================================
   FAQ CTA
========================================= */

.faq-cta {
  max-width: 1000px;

  margin:
    60px auto 70px;

  padding:
    60px 30px;

  text-align: center;

  border-top:
    1px solid #1f5279;
}


.faq-cta h2 {
  margin-bottom: 15px;

  font-size:
    clamp(38px, 5vw, 55px);
}


.faq-cta > p {
  max-width: 650px;

  margin:
    0 auto 30px;

  color: #b8cbd9;

  font-size: 18px;

  line-height: 1.6;
}


.faq-cta h3 {
  margin-top: 45px;

  color: #afc3d2;
}


.faq-cta h3 span {
  color: #159eff;
}



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

@media (max-width: 760px) {

  .faq-hero {
    padding-top: 50px;
  }


  .faq-section {
    width:
      calc(100% - 36px);
  }


  .faq-item summary {
    padding:
      20px 60px 20px 20px;

    font-size: 16px;
  }


  .faq-answer {
    padding:
      0 20px 22px;
  }


  .faq-summary {
    width:
      calc(100% - 36px);

    padding:
      35px 22px;
  }


  .faq-summary-grid {
    grid-template-columns:
      1fr 1fr;
  }

}


@media (max-width: 480px) {

  .faq-summary-grid {
    grid-template-columns: 1fr;
  }


  .faq-link-example {
    font-size: 15px;
  }

}

/* =========================================
   LOGIN / REGISTRATION
========================================= */

.auth-section {
  min-height: 750px;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding:
    70px 20px;
}


.auth-card {
  width: 100%;

  max-width: 540px;

  padding:
    45px 45px;

  border-radius: 22px;

  border:
    1px solid #245273;

  background:
    linear-gradient(
      145deg,
      rgba(6, 30, 52, 0.97),
      rgba(2, 13, 25, 0.98)
    );

  box-shadow:
    0 0 45px
    rgba(21, 158, 255, 0.1);
}


.auth-card h2 {
  font-size: 42px;

  margin-bottom: 15px;
}


.auth-card h2 span {
  color: #159eff;
}


.auth-intro {
  margin-bottom: 25px;

  color: #afc5d5;

  font-size: 17px;

  line-height: 1.55;
}



/* =========================================
   SPONSOR
========================================= */

.sponsor-notice {
  margin-bottom: 25px;

  padding: 16px 20px;

  border-radius: 10px;

  border:
    1px solid #159eff;

  background:
    rgba(4, 53, 88, 0.6);
}


.sponsor-notice span {
  display: block;

  margin-bottom: 5px;

  color: #7caecc;

  font-size: 10px;

  letter-spacing: 2px;
}


.sponsor-notice strong {
  color: white;

  font-size: 19px;
}



/* =========================================
   FORM
========================================= */

.auth-form {
  display: grid;

  gap: 18px;
}


.auth-form label {
  color: #bad0df;

  font-size: 13px;

  font-weight: bold;
}


.auth-form input {
  width: 100%;

  margin-top: 8px;

  padding:
    14px 15px;

  border-radius: 8px;

  border:
    1px solid #315a78;

  outline: none;

  background: #031323;

  color: white;

  font-size: 16px;
}


.auth-form input:focus {
  border-color: #159eff;

  box-shadow:
    0 0 12px
    rgba(21, 158, 255, 0.15);
}


.auth-submit {
  margin-top: 10px;

  padding: 16px;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  color: white;

  background:
    linear-gradient(
      90deg,
      #087ee8,
      #18a8ff
    );

  font-size: 16px;

  font-weight: bold;
}


.auth-error {
  margin-bottom: 20px;

  padding: 13px 16px;

  border-radius: 8px;

  border:
    1px solid #d25467;

  background:
    rgba(120, 25, 42, 0.3);

  color: #ffc7cf;
}


.auth-switch {
  margin-top: 25px;

  text-align: center;

  color: #809db1;
}


.auth-switch a {
  color: #159eff;

  text-decoration: none;
}



/* =========================================
   DASHBOARD
========================================= */

.dashboard-header {
  padding:
    20px 35px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  border-bottom:
    1px solid #163c58;

  background:
    rgba(2, 13, 25, 0.92);
}


.dashboard-user {
  display: flex;

  align-items: center;

  gap: 20px;

  color: #aac1d1;
}


.dashboard-user strong {
  color: white;
}


.dashboard-logout {
  padding:
    9px 14px;

  border-radius: 7px;

  border:
    1px solid #49677b;

  color: white;

  text-decoration: none;
}



.dashboard-main {
  width:
    min(1250px, calc(100% - 50px));

  margin:
    0 auto;

  padding:
    60px 0 100px;
}



/* =========================================
   DASHBOARD WELCOME
========================================= */

.dashboard-welcome {
  margin-bottom: 35px;
}


.dashboard-welcome h2 {
  font-size:
    clamp(38px, 5vw, 55px);

  margin-bottom: 12px;
}


.dashboard-welcome h2 span {
  color: #159eff;
}


.dashboard-welcome > p:not(.eyebrow) {
  color: #afc5d5;

  font-size: 18px;
}



/* =========================================
   REFERRAL LINK
========================================= */

.dashboard-referral {
  padding: 30px;

  border-radius: 18px;

  border:
    1px solid #159eff;

  background:
    rgba(5, 43, 72, 0.6);

  box-shadow:
    0 0 35px
    rgba(21, 158, 255, 0.1);
}


.dashboard-label {
  color: #7eacc9;

  font-size: 11px;

  letter-spacing: 2px;
}


.dashboard-referral h3 {
  margin-top: 5px;

  font-size: 26px;
}


.referral-link-box {
  margin-top: 20px;

  display: flex;

  gap: 10px;
}


.referral-link-box input {
  flex: 1;

  padding:
    14px 15px;

  border-radius: 8px;

  border:
    1px solid #36759f;

  background: #031424;

  color: white;

  font-size: 16px;
}


.referral-link-box button {
  padding:
    0 22px;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  background: #159eff;

  color: white;

  font-weight: bold;
}


.copy-message {
  min-height: 20px;

  margin-top: 8px;

  color: #69d9ad;

  font-size: 13px;
}



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

.dashboard-stats {
  margin:
    25px 0 55px;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 15px;
}


.dashboard-stat {
  padding: 22px;

  border-radius: 13px;

  border:
    1px solid #234965;

  background:
    rgba(4, 20, 35, 0.86);
}


.dashboard-stat span {
  display: block;

  margin-bottom: 7px;

  color: #7399b4;

  font-size: 10px;

  letter-spacing: 1.5px;
}


.dashboard-stat strong {
  color: white;

  font-size: 18px;
}



/* =========================================
   DASHBOARD PROGRAMS
========================================= */

.dashboard-section {
  margin-top: 30px;
}


.dashboard-section-heading {
  margin-bottom: 30px;
}


.dashboard-section-heading h2 {
  font-size: 38px;

  margin-bottom: 10px;
}


.dashboard-section-heading > p:not(.eyebrow) {
  max-width: 720px;

  color: #a9bfce;

  line-height: 1.6;
}


.dashboard-program-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;
}


.dashboard-program-card {
  padding: 27px;

  border-radius: 17px;

  border:
    1px solid #234c69;

  background:
    linear-gradient(
      145deg,
      rgba(6, 29, 50, 0.95),
      rgba(2, 13, 25, 0.97)
    );
}


.dashboard-program-icon {
  width: 55px;

  height: 55px;

  margin-bottom: 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  border:
    2px solid #159eff;

  font-size: 25px;
}


.dashboard-program-card h3 {
  margin-bottom: 8px;

  font-size: 21px;
}


.program-status {
  display: inline-block;

  padding:
    5px 9px;

  margin-bottom: 12px;

  border-radius: 20px;

  color: #86b9d8;

  background:
    rgba(17, 93, 142, 0.35);

  font-size: 10px;

  font-weight: bold;

  letter-spacing: 1px;
}


.dashboard-program-card p {
  min-height: 45px;

  color: #91aabe;

  font-size: 14px;

  line-height: 1.45;
}


.dashboard-program-card button {
  width: 100%;

  margin-top: 18px;

  padding: 11px;

  border-radius: 7px;

  border:
    1px solid #395b71;

  background: #071a29;

  color: #738a9a;
}


.dashboard-my-offer {
  border-color: #9b456e;
}


.dashboard-my-offer
.dashboard-program-icon {
  border-color: #ff5ca8;
}



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

@media (max-width: 1000px) {

  .dashboard-stats {
    grid-template-columns:
      1fr 1fr;
  }


  .dashboard-program-grid {
    grid-template-columns:
      1fr 1fr;
  }

}


@media (max-width: 650px) {

  .dashboard-header {
    flex-direction: column;

    gap: 15px;
  }


  .dashboard-main {
    width:
      calc(100% - 30px);

    padding-top: 35px;
  }


  .referral-link-box {
    flex-direction: column;
  }


  .referral-link-box button {
    padding: 14px;
  }


  .dashboard-stats {
    grid-template-columns: 1fr;
  }


  .dashboard-program-grid {
    grid-template-columns: 1fr;
  }


  .auth-card {
    padding:
      35px 25px;
  }

}
.logout-form {
  margin: 0;
}


button.dashboard-logout {
  cursor: pointer;

  font: inherit;

  background: transparent;
}

/* =========================================
   MY REFERRALS PAGE
========================================= */

.dashboard-back {
  padding: 9px 14px;

  border-radius: 7px;

  border:
    1px solid #285a79;

  color: #b9d7e9;

  text-decoration: none;
}


.dashboard-back:hover {
  border-color: #159eff;

  color: white;
}


/* =========================================
   REFERRALS HEADER
========================================= */

.referrals-header {
  margin-bottom: 35px;
}


.referrals-header h2 {
  font-size:
    clamp(38px, 5vw, 55px);

  margin-bottom: 12px;
}


.referrals-header h2 span {
  color: #159eff;
}


.referrals-header > p:not(.eyebrow) {
  max-width: 700px;

  color: #aec4d3;

  font-size: 18px;

  line-height: 1.6;
}


/* =========================================
   SUMMARY
========================================= */

.referral-summary-card {
  margin-bottom: 35px;

  padding: 30px;

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 30px;

  border-radius: 18px;

  border:
    1px solid #159eff;

  background:
    rgba(5, 43, 72, 0.6);

  box-shadow:
    0 0 30px
    rgba(21, 158, 255, 0.08);
}


.referral-summary-card strong {
  display: block;

  margin-top: 6px;

  color: white;

  font-size: 42px;
}


.referral-summary-card p {
  color: #a7bfce;

  line-height: 1.5;
}


/* =========================================
   REFERRAL LIST
========================================= */

.referral-list {
  display: grid;

  gap: 14px;
}


.referral-card {
  padding: 22px 25px;

  display: flex;

  align-items: center;

  gap: 20px;

  border-radius: 15px;

  border:
    1px solid #244b69;

  background:
    linear-gradient(
      145deg,
      rgba(6, 29, 50, 0.95),
      rgba(2, 13, 25, 0.97)
    );
}


.referral-avatar {
  width: 55px;

  height: 55px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  border:
    2px solid #159eff;

  background: #082741;

  color: white;

  font-size: 22px;

  font-weight: bold;
}


.referral-details {
  flex: 1;
}


.referral-details span {
  color: #6f9ab8;

  font-size: 10px;

  font-weight: bold;

  letter-spacing: 1.5px;
}


.referral-details h3 {
  margin: 4px 0 5px;

  font-size: 21px;
}


.referral-details p {
  color: #94adbf;

  font-size: 14px;
}


.referral-status span {
  display: inline-block;

  padding: 7px 11px;

  border-radius: 20px;

  background:
    rgba(21, 158, 255, 0.13);

  color: #73c5fb;

  font-size: 10px;

  font-weight: bold;

  letter-spacing: 1px;
}


/* =========================================
   NO REFERRALS
========================================= */

.no-referrals-card {
  padding: 55px 30px;

  text-align: center;

  border-radius: 18px;

  border:
    1px solid #244b69;

  background:
    rgba(4, 20, 36, 0.85);
}


.no-referrals-icon {
  font-size: 55px;

  margin-bottom: 15px;
}


.no-referrals-card h3 {
  margin-bottom: 12px;

  font-size: 28px;
}


.no-referrals-card p {
  max-width: 600px;

  margin:
    0 auto 25px;

  color: #a6bdcd;

  line-height: 1.6;
}


/* =========================================
   FUTURE TREE
========================================= */

.referral-future-card {
  margin-top: 45px;

  padding: 30px;

  display: flex;

  align-items: center;

  gap: 25px;

  border-radius: 17px;

  border:
    1px dashed #315d7b;

  background:
    rgba(4, 20, 35, 0.6);
}


.referral-future-icon {
  font-size: 48px;
}


.referral-future-card h3 {
  margin-bottom: 8px;

  font-size: 24px;
}


.referral-future-card p:not(.eyebrow) {
  color: #99b1c3;

  line-height: 1.55;
}


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

@media (max-width: 650px) {

  .referral-summary-card {
    flex-direction: column;

    align-items: flex-start;
  }


  .referral-card {
    align-items: flex-start;

    flex-wrap: wrap;
  }


  .referral-status {
    width: 100%;

    padding-left: 75px;
  }


  .referral-future-card {
    flex-direction: column;

    text-align: center;
  }

}

.dashboard-stat-link {
  display: block;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.dashboard-stat-link:hover {
  transform:
    translateY(-3px);

  border-color: #159eff;

  box-shadow:
    0 8px 25px
    rgba(21, 158, 255, 0.12);
}


.dashboard-stat-link small {
  display: block;

  margin-top: 9px;

  color: #159eff;

  font-size: 11px;
}


/* =========================================
   PROGRAM MANAGEMENT
========================================= */

.manage-program-header {
  margin-bottom: 35px;
}


.manage-program-header h2 {
  font-size:
    clamp(40px, 5vw, 56px);

  margin-bottom: 10px;
}


.manage-program-header > p:not(.eyebrow) {
  color: #a9c1d2;

  font-size: 18px;
}


.program-message {
  max-width: 800px;

  margin-bottom: 25px;
}


.program-success {
  max-width: 800px;

  margin-bottom: 25px;

  padding: 15px 18px;

  border-radius: 9px;

  border:
    1px solid #2dbd86;

  background:
    rgba(24, 115, 80, 0.2);

  color: #a8f1d4;
}


/* =========================================
   PROGRAM STATUS GRID
========================================= */

.program-management-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 20px;

  margin-bottom: 45px;
}


.program-management-card {
  min-height: 290px;

  padding: 32px;

  border-radius: 18px;

  border:
    1px solid #27506c;

  background:
    linear-gradient(
      145deg,
      rgba(6, 29, 50, 0.96),
      rgba(2, 13, 25, 0.98)
    );
}


.program-management-card h3 {
  margin:
    15px 0 10px;

  font-size: 25px;
}


.program-management-card p {
  color: #a7bece;

  line-height: 1.6;
}


.program-state-badge {
  display: inline-block;

  padding:
    6px 10px;

  border-radius: 20px;

  background:
    rgba(21, 158, 255, 0.13);

  color: #7ecbff;

  font-size: 10px;

  font-weight: bold;

  letter-spacing: 1px;
}


.program-state-badge.active {
  background:
    rgba(32, 190, 125, 0.15);

  color: #65e2ae;
}


.program-state-badge.inherited {
  background:
    rgba(21, 158, 255, 0.15);

  color: #76caff;
}


.program-state-badge.warning {
  background:
    rgba(255, 187, 55, 0.14);

  color: #ffd175;
}


.current-program-link {
  margin-top: 20px;

  padding: 14px;

  border-radius: 8px;

  border:
    1px solid #315e7c;

  background: #031522;

  color: #b9d9ed;

  font-size: 14px;

  word-break: break-all;
}


.upline-level {
  margin:
    12px 0 20px;

  color: #159eff !important;

  font-size: 13px;
}


/* =========================================
   LINK EDITOR
========================================= */

.program-link-editor {
  max-width: 850px;

  padding: 35px;

  border-radius: 18px;

  border:
    1px solid #24506f;

  background:
    rgba(4, 22, 39, 0.9);
}


.program-link-editor h2 {
  margin-bottom: 12px;

  font-size: 32px;
}


.program-link-editor > p:not(.eyebrow) {
  margin-bottom: 25px;

  color: #a8bfce;

  line-height: 1.6;
}


.program-link-form {
  display: grid;

  gap: 18px;
}


.program-link-form label {
  color: #c5d8e5;

  font-size: 13px;

  font-weight: bold;
}


.program-link-form input {
  width: 100%;

  margin-top: 8px;

  padding: 14px 15px;

  border-radius: 8px;

  border:
    1px solid #315a78;

  outline: none;

  background: #031323;

  color: white;

  font-size: 15px;
}


.program-link-form input:focus {
  border-color: #159eff;

  box-shadow:
    0 0 12px
    rgba(21, 158, 255, 0.15);
}


.remove-program-form {
  margin-top: 15px;
}


.remove-program-btn {
  padding: 11px 15px;

  cursor: pointer;

  border-radius: 7px;

  border:
    1px solid #8c3e53;

  background: transparent;

  color: #e596aa;
}


/* =========================================
   PROGRAM MANAGEMENT MOBILE
========================================= */

@media (max-width: 760px) {

  .program-management-grid {
    grid-template-columns: 1fr;
  }


  .program-management-card {
    min-height: auto;
  }


  .program-link-editor {
    padding: 28px 22px;
  }

}

.dashboard-program-action {
  display: block;

  width: 100%;

  margin-top: 18px;

  padding: 11px;

  border-radius: 7px;

  border:
    1px solid #159eff;

  background:
    rgba(21, 158, 255, 0.08);

  color: #7ecbff;

  text-align: center;

  text-decoration: none;

  font-weight: bold;
}


.dashboard-program-action:hover {
  background:
    rgba(21, 158, 255, 0.16);

  color: white;
}

/* =========================================
   DAILY-ADS BRIDGE PAGE
========================================= */

.bridge-main {
  width:
    min(1200px, calc(100% - 50px));

  margin: 0 auto;

  padding:
    65px 0 100px;
}


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

.bridge-hero {
  max-width: 900px;

  margin:
    0 auto 95px;

  text-align: center;
}


.bridge-icon {
  width: 80px;
  height: 80px;

  margin:
    0 auto 20px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border:
    2px solid #159eff;

  color: white;

  font-size: 25px;

  box-shadow:
    0 0 25px
    rgba(21, 158, 255, 0.18);
}


.bridge-hero h2 {
  margin-bottom: 25px;

  font-size:
    clamp(46px, 6vw, 70px);

  line-height: 1.05;
}


.bridge-hero h2 span {
  display: block;

  color: #159eff;
}


.bridge-intro {
  max-width: 750px;

  margin:
    0 auto 30px;

  color: #b3c9d8;

  font-size: 19px;

  line-height: 1.65;
}


.bridge-primary-btn,
.bridge-secondary-btn {
  display: inline-block;

  padding:
    14px 24px;

  border-radius: 8px;

  text-decoration: none;

  font-weight: bold;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.bridge-primary-btn {
  border:
    1px solid #159eff;

  background: #159eff;

  color: white;
}


.bridge-secondary-btn {
  border:
    1px solid #159eff;

  background:
    rgba(21, 158, 255, 0.07);

  color: #86ceff;
}


.bridge-primary-btn:hover,
.bridge-secondary-btn:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 8px 25px
    rgba(21, 158, 255, 0.16);
}


.bridge-small {
  margin-top: 14px;

  color: #708ea3;

  font-size: 12px;
}


/* =========================================
   GENERAL SECTIONS
========================================= */

.bridge-section,
.bridge-upgrade-section,
.bridge-example-section {
  margin:
    95px auto;
}


.bridge-section-heading {
  max-width: 800px;

  margin:
    0 auto 35px;

  text-align: center;
}


.bridge-section-heading h2,
.bridge-example-section > h2 {
  margin-bottom: 18px;

  font-size:
    clamp(36px, 5vw, 50px);
}


.bridge-section-heading h2 span,
.bridge-example-section > h2 span {
  color: #159eff;
}


.bridge-section-heading > p {
  color: #aabfce;

  font-size: 17px;

  line-height: 1.65;
}


/* =========================================
   FEATURES
========================================= */

.bridge-feature-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;
}


.bridge-feature-card {
  padding: 27px;

  border-radius: 16px;

  border:
    1px solid #244d69;

  background:
    linear-gradient(
      145deg,
      rgba(6, 29, 50, 0.95),
      rgba(2, 13, 25, 0.98)
    );
}


.bridge-feature-icon {
  width: 52px;
  height: 52px;

  margin-bottom: 17px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border:
    2px solid #159eff;

  color: white;

  font-weight: bold;
}


.bridge-feature-card h3 {
  margin-bottom: 10px;

  font-size: 21px;
}


.bridge-feature-card p {
  color: #96afc0;

  line-height: 1.55;

  font-size: 14px;
}


/* =========================================
   FREE SECTION
========================================= */

.bridge-free-section {
  margin:
    100px auto;

  display: grid;

  grid-template-columns:
    1.1fr 0.9fr;

  gap: 60px;

  align-items: center;
}


.bridge-free-copy h2 {
  margin-bottom: 22px;

  font-size:
    clamp(37px, 5vw, 52px);
}


.bridge-free-copy h2 span {
  display: block;

  color: #159eff;
}


.bridge-free-copy > p:not(.eyebrow) {
  margin-bottom: 13px;

  color: #acc2d1;

  line-height: 1.65;
}


.bridge-free-card {
  padding: 38px;

  border-radius: 20px;

  border:
    1px solid #159eff;

  background:
    rgba(5, 42, 70, 0.62);

  box-shadow:
    0 0 35px
    rgba(21, 158, 255, 0.09);
}


.bridge-plan-name,
.bridge-plan-badge {
  display: inline-block;

  padding:
    6px 10px;

  border-radius: 20px;

  background:
    rgba(21, 158, 255, 0.15);

  color: #7dcbff;

  font-size: 10px;

  font-weight: bold;

  letter-spacing: 1.5px;
}


.bridge-free-card > strong {
  display: block;

  margin:
    13px 0 6px;

  font-size: 42px;
}


.bridge-free-card > p {
  color: #9eb7c8;
}


.bridge-free-card ul,
.bridge-plan-card ul {
  margin:
    25px 0;

  padding: 0;

  list-style: none;
}


.bridge-free-card li,
.bridge-plan-card li {
  position: relative;

  margin:
    12px 0;

  padding-left: 25px;

  color: #b3c7d5;
}


.bridge-free-card li::before,
.bridge-plan-card li::before {
  content: "✓";

  position: absolute;

  left: 0;

  color: #159eff;

  font-weight: bold;
}


/* =========================================
   UPGRADES
========================================= */

.bridge-upgrade-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 22px;

  max-width: 950px;

  margin: 0 auto;
}


.bridge-plan-card {
  padding: 36px;

  border-radius: 19px;

  border:
    1px solid #28526e;

  background:
    rgba(4, 22, 38, 0.94);

  display: flex;

  flex-direction: column;
}


.bridge-matrix-note {
  margin: 28px 0 24px;

  padding: 20px 22px;

  min-height: 275px;

  border-radius: 12px;

  border:
    1px solid rgba(21, 158, 255, 0.35);

  background:
    rgba(21, 158, 255, 0.06);
}
.bridge-plan-card .bridge-primary-btn {
  margin-top: auto;
  align-self: flex-start;
}


.bridge-plan-highlight {
  border-color: #159eff;

  box-shadow:
    0 0 30px
    rgba(21, 158, 255, 0.09);
}


.bridge-plan-card h3 {
  margin:
    15px 0 8px;

  font-size: 28px;
}


.bridge-price {
  margin-bottom: 18px;

  color: white;

  font-size: 32px;

  font-weight: bold;
}


.bridge-price small {
  color: #869faf;

  font-size: 13px;

  font-weight: normal;
}


.bridge-plan-card > p {
  color: #a3bac9;

  line-height: 1.6;
}


/* =========================================
   SPIDERWEB USE
========================================= */

.bridge-spiderweb-section {
  margin:
    100px auto;

  padding: 45px;

  display: flex;

  align-items: center;

  gap: 35px;

  border-radius: 20px;

  border:
    1px solid #ff4d9b;

  background:
    linear-gradient(
      135deg,
      rgba(52, 14, 39, 0.46),
      rgba(3, 16, 29, 0.96)
    );
}


.bridge-web-icon {
  width: 95px;
  height: 95px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border:
    2px solid #ff4d9b;

  color: #ff78b5;

  font-size: 38px;
}


.bridge-spiderweb-section h2 {
  margin-bottom: 15px;

  font-size:
    clamp(32px, 4vw, 43px);
}


.bridge-spiderweb-section h2 span {
  display: block;

  color: #ff68ac;
}


.bridge-spiderweb-section p:not(.eyebrow) {
  color: #c3b8c0;

  line-height: 1.65;
}


/* =========================================
   EXAMPLE FLOW
========================================= */

.bridge-example-section {
  text-align: center;
}


.bridge-example-flow {
  margin-top: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 22px;
}


.bridge-flow-card {
  width: 280px;

  padding: 28px;

  border-radius: 16px;

  border:
    1px solid #28516d;

  background:
    rgba(4, 22, 38, 0.9);
}


.bridge-flow-card > span {
  width: 40px;
  height: 40px;

  margin:
    0 auto 14px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #159eff;

  color: white;

  font-weight: bold;
}


.bridge-flow-card h3 {
  margin-bottom: 8px;
}


.bridge-flow-card p {
  color: #9eb4c3;

  line-height: 1.5;
}


.bridge-flow-arrow {
  color: #159eff;

  font-size: 32px;
}


/* =========================================
   DISCLOSURE
========================================= */

.bridge-disclosure {
  max-width: 850px;

  margin:
    90px auto;

  padding:
    25px 28px;

  border-radius: 14px;

  border:
    1px solid #324f63;

  background:
    rgba(4, 18, 31, 0.8);
}


.bridge-disclosure h3 {
  margin-bottom: 8px;

  color: #b8cddd;
}


.bridge-disclosure p {
  color: #829dad;

  font-size: 13px;

  line-height: 1.6;
}


/* =========================================
   FINAL CTA
========================================= */

.bridge-final-cta {
  max-width: 850px;

  margin:
    100px auto 30px;

  padding:
    50px 30px;

  text-align: center;

  border-top:
    1px solid #234e6d;
}


.bridge-final-cta h2 {
  margin-bottom: 18px;

  font-size:
    clamp(36px, 5vw, 50px);
}


.bridge-final-cta h2 span {
  display: block;

  color: #159eff;
}


.bridge-final-cta > p:not(.eyebrow):not(.bridge-small) {
  max-width: 650px;

  margin:
    0 auto 30px;

  color: #acc1d0;

  line-height: 1.6;
}


.bridge-large-btn {
  padding:
    16px 30px;

  font-size: 17px;
}


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

@media (max-width: 900px) {

  .bridge-feature-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .bridge-free-section {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 700px) {

  .bridge-main {
    width:
      calc(100% - 32px);

    padding-top: 40px;
  }


  .bridge-feature-grid,
  .bridge-upgrade-grid {
    grid-template-columns: 1fr;
  }


  .bridge-spiderweb-section {
    flex-direction: column;

    text-align: center;

    padding: 35px 25px;
  }


  .bridge-example-flow {
    flex-direction: column;
  }


  .bridge-flow-card {
    width: 100%;
  }


  .bridge-flow-arrow {
    transform: rotate(90deg);
  }

}

/* =========================================
   MATRIX INFORMATION
========================================= */

.bridge-matrix-note {
  margin: 28px 0 24px;

  padding: 20px 22px;

  border-radius: 12px;

  border:
    1px solid rgba(21, 158, 255, 0.35);

  background:
    rgba(21, 158, 255, 0.06);
}


.bridge-matrix-note strong {
  display: block;

  margin-bottom: 12px;

  color: #72c5ff;

  font-size: 16px;
}


.bridge-matrix-note p {
  margin:
    0 0 12px;

  color: #abc1d0;

  font-size: 14px;

  line-height: 1.65;
}


.bridge-matrix-note small {
  display: block;

  margin-top: 14px;

  color: #7e99ab;

  font-size: 12px;

  line-height: 1.6;
}
.program-status-active {
  border-color: #2dbd86;
  color: #65e2ae;
  background: rgba(32, 190, 125, 0.12);
}


.program-status-upline {
  border-color: #159eff;
  color: #76caff;
  background: rgba(21, 158, 255, 0.12);
}
/* =========================================
   LEADSLEAP - SHARE CODES
========================================= */

.leadsleap-share-section {
  margin: 100px auto;

  padding: 45px;

  border-radius: 20px;

  border: 1px solid #245675;

  background:
    linear-gradient(
      145deg,
      rgba(5, 35, 59, 0.92),
      rgba(2, 14, 26, 0.97)
    );
}


.leadsleap-share-section > div:first-child {
  max-width: 800px;

  margin-bottom: 35px;
}


.leadsleap-share-section h2 {
  margin-bottom: 15px;

  font-size:
    clamp(36px, 5vw, 50px);
}


.leadsleap-share-section h2 span {
  color: #159eff;
}


.leadsleap-share-section
> div:first-child
> p:not(.eyebrow) {
  color: #aec4d2;

  line-height: 1.65;
}


.share-code-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 16px;
}


.share-code-card {
  padding: 24px;

  border-radius: 14px;

  border:
    1px solid #285473;

  background:
    rgba(3, 19, 34, 0.8);
}


.share-code-card > span {
  display: inline-block;

  margin-bottom: 15px;

  padding: 5px 8px;

  border-radius: 6px;

  background:
    rgba(21, 158, 255, 0.12);

  color: #69c0fb;

  font-size: 10px;

  font-weight: bold;

  letter-spacing: 1px;
}


.share-code-card h3 {
  margin-bottom: 9px;

  font-size: 19px;
}


.share-code-card p {
  color: #93adbe;

  font-size: 13px;

  line-height: 1.55;
}


/* =========================================
   LEADSLEAP PRO
========================================= */

.leadsleap-pro-card {
  max-width: 900px;

  margin: 0 auto;

  padding: 40px;

  border-radius: 20px;

  border:
    1px solid #159eff;

  background:
    rgba(4, 29, 49, 0.9);

  box-shadow:
    0 0 35px
    rgba(21, 158, 255, 0.08);
}


.leadsleap-pro-heading {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  margin-bottom: 25px;
}


.leadsleap-pro-heading h3 {
  margin-top: 12px;

  font-size: 29px;
}


.leadsleap-pro-columns {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 30px;
}


.leadsleap-pro-columns ul {
  padding: 0;

  list-style: none;
}


.leadsleap-pro-columns li {
  position: relative;

  margin: 13px 0;

  padding-left: 25px;

  color: #b0c6d4;
}


.leadsleap-pro-columns li::before {
  content: "✓";

  position: absolute;

  left: 0;

  color: #159eff;

  font-weight: bold;
}


.pro-reason-box {
  margin: 28px 0;

  padding: 22px;

  border-radius: 12px;

  border:
    1px solid rgba(21, 158, 255, 0.3);

  background:
    rgba(21, 158, 255, 0.06);
}


.pro-reason-box strong {
  display: block;

  margin-bottom: 10px;

  color: #70c6ff;
}


.pro-reason-box p {
  color: #abc1cf;

  line-height: 1.6;
}


/* =========================================
   WHY SPIDERWEB
========================================= */

.why-spiderweb-section {
  margin: 100px auto;

  text-align: center;
}


.why-spiderweb-section h2 {
  margin-bottom: 35px;

  font-size:
    clamp(36px, 5vw, 50px);
}


.why-spiderweb-section h2 span {
  color: #159eff;
}


.why-spiderweb-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 16px;
}


.why-spiderweb-grid > div {
  padding: 25px;

  border-radius: 14px;

  border:
    1px solid #27506c;

  background:
    rgba(4, 22, 38, 0.86);
}


.why-spiderweb-grid strong {
  display: block;

  margin-bottom: 8px;

  color: white;

  font-size: 20px;
}


.why-spiderweb-grid p {
  color: #91adbe;

  font-size: 14px;

  line-height: 1.5;
}


.income-disclaimer {
  margin-top: 13px;

  color: #7f99aa !important;

  font-size: 12px;
}


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

@media (max-width: 850px) {

  .share-code-grid,
  .why-spiderweb-grid {
    grid-template-columns: 1fr 1fr;
  }


  .leadsleap-pro-columns {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .share-code-grid,
  .why-spiderweb-grid {
    grid-template-columns: 1fr;
  }


  .leadsleap-share-section,
  .leadsleap-pro-card {
    padding: 28px 22px;
  }


  .leadsleap-pro-heading {
    flex-direction: column;

    align-items: flex-start;
  }

}

/* =========================================
   100PERCENTCLICKS BRIDGE PAGE
========================================= */

.bridge-page .bridge-program-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 80px;
    height: 80px;

    margin: 0 auto 20px;

    border: 2px solid #159eff;
    border-radius: 50%;

    color: #ffffff;

    font-size: 26px;
    font-weight: 500;
}


.bridge-highlight-section {
    text-align: center;
}


.bridge-highlight-section > p:not(.eyebrow) {
    max-width: 760px;

    margin-left: auto;
    margin-right: auto;
}


.bridge-final-cta {
    max-width: 900px;

    margin: 80px auto;

    text-align: center;
}


.bridge-final-cta h2 {
    margin-bottom: 20px;
}


.bridge-final-cta > p:not(.eyebrow) {
    max-width: 700px;

    margin-left: auto;
    margin-right: auto;

    margin-bottom: 30px;
}


.bridge-back-link {
    display: inline-block;

    margin-top: 24px;

    color: #7fc9ff;

    text-decoration: none;

    font-size: 14px;
}


.bridge-back-link:hover {
    color: #ffffff;
}

/* =========================================
   100PERCENTCLICKS - SPACING IMPROVEMENTS
========================================= */

.bridge-hero-text {
  max-width: 760px;
  margin: 0 auto 28px;

  font-size: 18px;
  line-height: 1.7;
}


.bridge-link-note {
  margin-top: 16px;

  font-size: 13px;
  line-height: 1.6;
}


.bridge-section {
  margin: 90px auto;
}


.bridge-section > p:not(.eyebrow) {
  max-width: 900px;

  font-size: 17px;
  line-height: 1.75;
}


.bridge-section h2 {
  margin-bottom: 18px;

  line-height: 1.2;
}


.bridge-feature-card {
  padding: 30px;
}


.bridge-feature-card h3 {
  margin-bottom: 14px;

  line-height: 1.25;
}


.bridge-feature-card p {
  font-size: 15px;
  line-height: 1.7;
}


.bridge-feature-grid {
  gap: 20px;
}


.bridge-highlight-section {
  padding: 40px 30px;

  margin-top: 100px;
  margin-bottom: 100px;
}


.bridge-highlight-section > p:not(.eyebrow) {
  line-height: 1.75;
}


.bridge-final-cta > p:not(.eyebrow) {
  line-height: 1.7;
}

/* =========================================
   MY OFFER MANAGEMENT
========================================= */

.offer-main {
  width: calc(100% - 64px);
  max-width: 1100px;

  margin: 0 auto;
  padding: 60px 0 100px;
}


.offer-heading {
  max-width: 760px;

  margin-bottom: 40px;
}


.offer-heading h2 {
  margin: 8px 0 14px;

  font-size: 48px;
  line-height: 1.1;
}


.offer-heading > p:not(.eyebrow) {
  max-width: 700px;

  line-height: 1.7;
}


.offer-card {
  max-width: 820px;

  padding: 36px;

  border: 1px solid #245878;
  border-radius: 18px;

  background: rgba(5, 32, 50, 0.72);
}


.offer-card h3 {
  margin: 18px 0 10px;

  font-size: 28px;
}


.offer-current-name {
  margin-bottom: 28px;

  color: #8ed2ff;

  font-size: 18px;
  font-weight: 600;
}


.offer-form {
  display: flex;
  flex-direction: column;

  margin-top: 32px;
}


.offer-form label {
  margin: 0 0 8px;

  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
}


.offer-form input,
.offer-form textarea {
  width: 100%;

  box-sizing: border-box;

  margin-bottom: 22px;
  padding: 14px 16px;

  border: 1px solid #326484;
  border-radius: 9px;

  background: #031a2a;

  color: #ffffff;

  font: inherit;
}


.offer-form textarea {
  min-height: 120px;

  resize: vertical;

  line-height: 1.6;
}


.offer-form input:focus,
.offer-form textarea:focus {
  outline: none;

  border-color: #159eff;
}


.offer-form .bridge-primary-btn {
  align-self: flex-start;

  margin-top: 10px;

  border: 0;

  cursor: pointer;
}


.offer-field-note {
  margin: -12px 0 22px;

  color: #76afd2;

  font-size: 12px;
}


.offer-message {
  margin: 24px 0;

  padding: 14px 16px;

  border-radius: 8px;

  line-height: 1.5;
}


.offer-success {
  border: 1px solid #187f6c;

  background: rgba(14, 106, 89, 0.18);
}


.offer-error {
  border: 1px solid #a8465a;

  background: rgba(168, 70, 90, 0.15);
}


@media (max-width: 700px) {

  .offer-main {
    width: calc(100% - 32px);

    padding-top: 40px;
  }


  .offer-heading h2 {
    font-size: 38px;
  }


  .offer-card {
    padding: 24px;
  }

}
/* =========================================
   MY OFFER - ACCEPTABLE USE
========================================= */

.offer-policy-box {
  margin: 10px 0 30px;
  padding: 22px;

  border: 1px solid #326484;
  border-radius: 10px;

  background: rgba(4, 38, 59, 0.65);
}


.offer-policy-box h4 {
  margin: 0 0 12px;

  color: #ffffff;

  font-size: 18px;
}


.offer-policy-box p {
  margin: 0 0 12px;

  color: #9fd3f3;

  font-size: 13px;
  line-height: 1.65;
}


.offer-policy-check {
  display: flex;
  align-items: flex-start;

  gap: 12px;

  margin-top: 18px;

  color: #ffffff;

  font-size: 14px;
  line-height: 1.5;

  cursor: pointer;
}


.offer-policy-check input {
  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  margin: 2px 0 0;
}


.offer-status-suspended {
  background: rgba(190, 70, 70, 0.18);

  color: #ff9292;
}

/* =========================================
   ADMIN - MEMBER OFFERS
========================================= */

.admin-offers-main {
  width: min(1200px, calc(100% - 50px));

  margin: 0 auto;

  padding: 60px 0 100px;
}


.admin-offers-heading {
  max-width: 760px;

  margin-bottom: 35px;
}


.admin-offers-heading h2 {
  margin: 8px 0 12px;

  font-size: clamp(40px, 5vw, 55px);
}


.admin-offers-heading > p:not(.eyebrow) {
  color: #a8c0d0;

  font-size: 17px;

  line-height: 1.6;
}


/* =========================================
   MESSAGES
========================================= */

.admin-message {
  margin-bottom: 25px;

  padding: 15px 18px;

  border-radius: 9px;
}


.admin-message-success {
  border: 1px solid #2dbd86;

  background: rgba(32, 190, 125, 0.12);

  color: #8ce7c2;
}


.admin-message-error {
  border: 1px solid #b64e67;

  background: rgba(182, 78, 103, 0.12);

  color: #ff9caf;
}


/* =========================================
   OFFER LIST
========================================= */

.admin-offers-list {
  display: grid;

  gap: 20px;
}


.admin-offer-card {
  padding: 28px;

  border: 1px solid #28526f;

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(6, 29, 50, 0.96),
      rgba(2, 13, 25, 0.98)
    );
}


.admin-offer-top {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 22px;
}


.admin-offer-member {
  color: #78a9c8;

  font-size: 11px;

  letter-spacing: 1px;
}


.admin-offer-member strong {
  color: #ffffff;
}


.admin-offer-card h3 {
  margin: 7px 0 0;

  font-size: 27px;
}


.admin-offer-status {
  display: inline-block;

  padding: 7px 11px;

  border-radius: 20px;

  font-size: 10px;

  font-weight: bold;

  letter-spacing: 1px;
}


.admin-offer-status.active {
  background: rgba(32, 190, 125, 0.14);

  color: #65e2ae;
}


.admin-offer-status.suspended {
  background: rgba(190, 70, 70, 0.16);

  color: #ff9292;
}


/* =========================================
   META
========================================= */

.admin-offer-meta {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 15px;

  margin-bottom: 22px;
}


.admin-offer-meta > div {
  padding: 14px;

  border: 1px solid #244a64;

  border-radius: 9px;

  background: rgba(3, 19, 32, 0.75);
}


.admin-offer-meta span {
  display: block;

  margin-bottom: 5px;

  color: #6d94ad;

  font-size: 10px;

  letter-spacing: 1px;
}


.admin-offer-meta strong {
  color: #dcecf6;

  font-size: 13px;

  word-break: break-word;
}


.admin-offer-description {
  margin-bottom: 22px;

  color: #aac0cf;

  line-height: 1.65;
}


/* =========================================
   URL
========================================= */

.admin-offer-url {
  padding: 16px;

  border-radius: 10px;

  border: 1px solid #2b5876;

  background: #031521;
}


.admin-offer-url span {
  display: block;

  margin-bottom: 7px;

  color: #70a2c2;

  font-size: 10px;

  letter-spacing: 1px;
}


.admin-offer-url a {
  color: #76caff;

  text-decoration: none;

  word-break: break-all;
}


.admin-offer-url a:hover {
  color: #ffffff;
}


/* =========================================
   ACTIONS
========================================= */

.admin-offer-actions {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 20px;
}


.admin-action-form {
  margin: 0;
}


.admin-view-btn,
.admin-suspend-btn,
.admin-activate-btn {
  display: inline-block;

  padding: 11px 16px;

  border-radius: 7px;

  cursor: pointer;

  text-decoration: none;

  font-weight: bold;

  font-size: 13px;
}


.admin-view-btn {
  border: 1px solid #159eff;

  background: rgba(21, 158, 255, 0.1);

  color: #7acbff;
}


.admin-suspend-btn {
  border: 1px solid #b94e66;

  background: rgba(185, 78, 102, 0.11);

  color: #ff9aaf;
}


.admin-activate-btn {
  border: 1px solid #2dbd86;

  background: rgba(45, 189, 134, 0.11);

  color: #79e4bb;
}


.admin-view-btn:hover,
.admin-suspend-btn:hover,
.admin-activate-btn:hover {
  color: #ffffff;
}


/* =========================================
   EMPTY
========================================= */

.admin-empty-card {
  padding: 45px;

  border: 1px solid #28526f;

  border-radius: 15px;

  text-align: center;

  background: rgba(4, 21, 36, 0.85);
}


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

@media (max-width: 750px) {

  .admin-offer-top {
    flex-direction: column;
  }


  .admin-offer-meta {
    grid-template-columns: 1fr;
  }


  .admin-offer-actions {
    flex-direction: column;

    align-items: stretch;
  }


  .admin-view-btn,
  .admin-suspend-btn,
  .admin-activate-btn {
    width: 100%;

    box-sizing: border-box;

    text-align: center;
  }

}
/* =========================================
   JOIN BUTTON HOVER FIX
========================================= */

.main-nav .join-btn:hover {
    color: #ffffff;
}

/* =========================================
   PERSONAL OFFERS
========================================= */

.dashboard-offers-heading {
    margin-top: 55px;
}

.dashboard-offer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 820px;
}

.dashboard-offer-grid .dashboard-program-card {
    width: auto;
}

@media (max-width: 800px) {
    .dashboard-offer-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   KEEP CARD BUTTONS ALIGNED
========================================= */

.dashboard-program-card {
    display: flex;
    flex-direction: column;
}

.dashboard-program-action {
    margin-top: auto;
}

/* =========================================
   LEGAL PAGES
========================================= */

.legal-content {
    max-width: 900px;
    line-height: 1.65;
}

.legal-content h3 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 20px;
    color: #ffffff;
}

.legal-content p {
    margin-bottom: 18px;
    line-height: 1.65;
}

.legal-content ul {
    margin: 8px 0 22px 24px;
    padding: 0;
}

.legal-content li {
    margin-bottom: 8px;
    line-height: 1.55;
}

.legal-content strong {
    color: #ffffff;
}

.legal-content .auth-intro {
    margin-bottom: 30px;
}

/* =========================================
   SITE FOOTER
========================================= */

.site-footer {
    margin-top: 50px;
    padding: 25px 20px;
    text-align: center;
    font-size: 14px;
    opacity: 0.9;
}

.footer-links {
    margin-top: 10px;
}

.footer-links a {
    margin: 0 8px;
}

.footer-links span {
    opacity: 0.5;
}
.footer-links a {
    margin: 0 8px;
    color: #20a4ff;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}
/* =========================================
   SPIDERWEB HEADER LOGO
========================================= */

.header-logo {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}