:root {
      --background: hsl(0, 0%, 4%);
      --foreground: hsl(0, 0%, 95%);
      --gx-red: hsl(354, 97%, 47%);
      --gx-red-glow: hsl(354, 100%, 55%);
      --gx-cyan: hsl(180, 100%, 50%);
      --gx-surface: hsl(0, 0%, 8%);
      --gx-darker: hsl(0, 0%, 2%);
      --muted-foreground: hsl(0, 0%, 60%);
      --border: hsl(0, 0%, 18%);
      --muted: hsl(0, 0%, 15%);
      --secondary: hsl(0, 0%, 12%);
    }

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

    html { scroll-behavior: smooth; }

 body {
  font-family: 'Orbitron', system-ui, sans-serif;
  background: var(--background);
  color: var(--foreground);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 700;
}


    .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

    /* Hero Section */
    .hero {
      min-height: 92vh;
      display: flex;
      align-items: center;
      padding: 32px 0;
      position: relative;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--gx-darker) 0%, var(--background) 50%, var(--gx-darker) 100%);
    }

    .hero-grid {
      position: absolute;
      inset: 0;
      opacity: 0.05;
      background-image: linear-gradient(hsla(354, 97%, 47%, 0.3) 1px, transparent 1px),
                        linear-gradient(90deg, hsla(354, 97%, 47%, 0.3) 1px, transparent 1px);
      background-size: 50px 50px;
    }

    .hero-glow {
      position: absolute;
      top: 33%;
      right: 25%;
      width: 500px;
      height: 500px;
      background: hsla(354, 97%, 47%, 0.1);
      border-radius: 50%;
      filter: blur(150px);
    }

    .hero-content {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: center;
      position: relative;
      z-index: 10;
    }

    @media (min-width: 1024px) {
      .hero-content { grid-template-columns: 1fr 1fr; }
    }

    .hero-left { max-width: 560px; }

    .logo { width: 128px; margin-bottom: 32px; color: var(--foreground); }

    .hero h1 {
      font-size: 2.5rem;
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 24px;
    }

    @media (min-width: 768px) { .hero h1 { font-size: 3.5rem; } }

    .hero h1 .white { color: var(--foreground); }
    .hero h1 .red { color: var(--gx-red); }

    .hero-desc {
      font-size: 18px;
      color: var(--muted-foreground);
      margin-bottom: 32px;
      line-height: 1.7;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 18px 34px;
      border-radius: 8px;
      font-family: 'Orbitron', sans-serif;
      font-weight: 600;
      font-size: 15px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
    }

    @media (min-width: 1024px){
   .btn{
    padding: 22px 44px;
    font-size: 17px;
  }
}
    .btn-primary {
      background: linear-gradient(135deg, var(--gx-red), var(--gx-red-glow));
      color: white;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 40px hsla(354, 97%, 47%, 0.5);
    }

    .btn-icon { width: 20px; height: 20px; }

    .awards {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 24px;
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid hsla(0, 0%, 100%, 0.1);
    }

    .award-rating {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .rating-number {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.875rem;
      font-weight: 700;
    }

    .rating-number span { font-size: 1rem; color: var(--muted-foreground); }

    .rating-text {
      font-size: 12px;
      color: var(--muted-foreground);
      line-height: 1.3;
    }

    .award-divider { width: 1px; height: 48px; background: hsla(0, 0%, 100%, 0.2); }

    .award-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .award-icon { width: 32px; height: 32px; color: var(--muted-foreground); }
    .award-label { font-size: 10px; color: var(--muted-foreground); text-transform: uppercase; }

    .hero-right{
  display: block;
  position: relative;
}

@media (min-width: 1024px){
  .hero-right{
    display: block; /* keep it visible also on desktop */
  }
}
    .hero-image-glow {
      position: absolute;
      inset: 0;
      background: hsla(354, 97%, 47%, 0.2);
      filter: blur(80px);
      border-radius: 50%;
    }

    .hero-image {
      position: relative;
      width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 25px 50px -12px hsla(0, 0%, 0%, 0.8);
    }

    /* Section Styles */
    section { padding: 32px 0; }

    .section-header { text-align: center; margin-bottom: 34px; }

    .section-label {
      color: var(--gx-red);
      font-family: 'Orbitron', sans-serif;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .section-title {
      font-size: 1.875rem;
      font-weight: 700;
      margin-top: 8px;
    }

    @media (min-width: 768px) { .section-title { font-size: 2.5rem; } }

    .section-title .red { color: var(--gx-red); }

    .section-subtitle {
      color: var(--muted-foreground);
      margin-top: 16px;
      font-size: 14px;
    }

    /* Cards Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    @media (min-width: 768px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }

    .card {
      background: linear-gradient(145deg, var(--gx-surface) 0%, var(--gx-darker) 100%);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      transition: all 0.3s ease;
    }

    .card:hover {
      border-color: hsla(354, 97%, 47%, 0.5);
      box-shadow: 0 0 40px hsla(354, 97%, 47%, 0.4);
      transform: translateY(-4px);
    }

    .card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

    .card-icon-wrap {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background: hsla(354, 97%, 47%, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-icon { width: 24px; height: 24px; color: var(--gx-red); }

    .card-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1rem; }
    .card-subtitle { font-size: 14px; color: var(--muted-foreground); }

    .card-bullets { list-style: none; margin-bottom: 24px; }

    .card-bullets li {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      font-size: 14px;
      color: hsla(0, 0%, 95%, 0.8);
      margin-bottom: 8px;
    }

    .check-icon { width: 16px; height: 16px; color: var(--gx-cyan); flex-shrink: 0; margin-top: 2px; }

    .card-result {
      background: hsla(180, 100%, 50%, 0.1);
      border: 1px solid hsla(180, 100%, 50%, 0.3);
      border-radius: 8px;
      padding: 12px;
      text-align: center;
      color: var(--gx-cyan);
      font-weight: 600;
      font-size: 14px;
    }

    /* Results Table */
    .table-wrap { overflow-x: auto; margin-bottom: 48px; }

    table { width: 100%; min-width: 600px; border-collapse: collapse; }

    th, td { padding: 16px; text-align: center; border-bottom: 1px solid var(--border); }

    th {
      font-family: 'Orbitron', sans-serif;
      color: var(--muted-foreground);
      font-size: 12px;
      text-transform: uppercase;
    }

    th:first-child { text-align: left; }
    td:first-child { text-align: left; font-weight: 500; }

    th.red { color: var(--gx-red); }

    .gain { color: var(--gx-cyan); font-weight: 700; }

    tr:hover { background: hsla(0, 0%, 12%, 0.3); }

    /* Benefits Box */
    .benefits-box {
      max-width: 700px;
      margin: 0 auto;
      background: linear-gradient(145deg, var(--gx-surface) 0%, var(--gx-darker) 100%);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
    }

    .benefits-title {
      font-family: 'Orbitron', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 16px;
    }

    .benefits-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .benefit-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .benefit-item strong { color: var(--foreground); }
    .benefit-item span { color: var(--muted-foreground); }

    /* Hot Tabs / Scenarios */
   .bg-dark { background: hsla(0, 0%, 12%, 0.3); }


/* ===== SCENARIOS LAYOUT ===== */

.scenarios-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

/* LEFT: cards */
.scenarios-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

/* RIGHT: image */
.scenario-image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scenario-img {
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.8);
}

/* DESKTOP */
@media (min-width: 1024px) {
  .scenarios-layout {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }

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


/* Card design */
.scenario-card {
  background: linear-gradient(145deg, var(--gx-surface) 0%, var(--gx-darker) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
}

.scenario-card:hover {
  border-color: hsla(354, 97%, 47%, 0.5);
  box-shadow: 0 0 40px hsla(354, 97%, 47%, 0.4);
  transform: translateY(-4px);
}

.scenario-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.scenario-emoji { font-size: 1.6rem; }
.scenario-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.95rem; }
.scenario-goal { font-size: 13px; color: var(--muted-foreground); margin-bottom: 8px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.tag {
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
}

.tag-gray { background: hsla(0, 0%, 12%, 0.5); color: var(--foreground); }
.tag-cyan { background: hsla(180, 100%, 50%, 0.1); color: var(--gx-cyan); }

.scenario-cta{
  margin-top: 32px;
  align-items: center;  /* ✅ centers button */
  text-align: center;   /* ✅ centers text */
   gap: 10px;
}

.scenario-cta-text{
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted-foreground);
}

/* Optional: make this CTA bigger than normal buttons */
.btn-scenario{
  padding: 22px 46px;
  font-size: 17px;
}

    /* Trust Section */
    .creators-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      margin-bottom: 64px;
    }

    @media (min-width: 768px) { .creators-grid { grid-template-columns: repeat(3, 1fr); } }

    .creator-card {
      background: linear-gradient(145deg, var(--gx-surface) 0%, var(--gx-darker) 100%);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      text-align: center;
      transition: all 0.3s ease;
    }

    .creator-card:hover {
      border-color: hsla(354, 97%, 47%, 0.5);
      box-shadow: 0 0 40px hsla(354, 97%, 47%, 0.4);
      transform: translateY(-4px);
    }

    .creator-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.25rem; margin-bottom: 4px; }
    .creator-subs { font-size: 14px; color: var(--muted-foreground); margin-bottom: 16px; }
    .creator-quote { font-style: italic; color: hsla(0, 0%, 95%, 0.8); }

    .reviews-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    @media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

    .review-card {
      background: linear-gradient(145deg, var(--gx-surface) 0%, var(--gx-darker) 100%);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      transition: all 0.3s ease;
    }

    .review-card:hover {
      border-color: hsla(354, 97%, 47%, 0.5);
      box-shadow: 0 0 40px hsla(354, 97%, 47%, 0.4);
      transform: translateY(-4px);
    }

    .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .review-source { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1rem; }

    .stars { display: flex; gap: 2px; }
    .star { width: 16px; height: 16px; color: #facc15; fill: #facc15; }

    .review-quote { font-style: italic; color: hsla(0, 0%, 95%, 0.8); font-size: 14px; }

    /* Steps Section */
    .steps-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    @media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } }

    .step-card {
      background: linear-gradient(145deg, var(--gx-surface) 0%, var(--gx-darker) 100%);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      position: relative;
      transition: all 0.3s ease;
    }

    .step-card:hover {
      border-color: hsla(354, 97%, 47%, 0.5);
      box-shadow: 0 0 40px hsla(354, 97%, 47%, 0.4);
      transform: translateY(-4px);
    }

    .step-number {
      position: absolute;
      top: -12px;
      left: -12px;
      width: 32px;
      height: 32px;
      background: var(--gx-red);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Orbitron', sans-serif;
      font-weight: 700;
      color: white;
    }

    .step-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      color: var(--muted-foreground);
      font-size: 14px;
    }

    .step-meta-icon { width: 16px; height: 16px; }

    .step-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
    .step-text { font-size: 14px; color: hsla(0, 0%, 95%, 0.8); margin-bottom: 16px; }

    .step-settings {
      background: hsla(0, 0%, 12%, 0.5);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      font-size: 14px;
    }

    .step-settings strong { display: block; margin-bottom: 8px; }

    .step-settings ul { list-style: none; }
    .step-settings li { color: var(--muted-foreground); margin-bottom: 4px; }

    .step-success {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--gx-cyan);
      font-size: 14px;
      margin-top: 16px;
    }

    /* FAQ Section */
    .faq-section { background: hsla(0, 0%, 8%, 0.3); }

    .faq-list { max-width: 700px; margin: 0 auto; }

    .faq-item {
      background: linear-gradient(145deg, var(--gx-surface) 0%, var(--gx-darker) 100%);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .faq-item:hover {
      border-color: hsla(354, 97%, 47%, 0.5);
    }

    .faq-question {
      width: 100%;
      background: none;
      border: none;
      padding: 20px 24px;
      text-align: left;
      font-family: 'Orbitron', sans-serif;
      font-size: 14px;
      color: var(--foreground);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .faq-question:hover { color: var(--gx-red); }

    .faq-chevron { width: 20px; height: 20px; transition: transform 0.3s; }

    .faq-item.open .faq-chevron { transform: rotate(180deg); }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .faq-item.open .faq-answer { max-height: 200px; }

    .faq-answer-content {
      padding: 0 24px 20px;
      color: var(--muted-foreground);
      font-size: 14px;
    }

    /* CTA Section */
    .cta-section { text-align: center; margin-top: 48px; }

    /* Footer */
    footer {
      padding: 32px 0;
      border-top: 1px solid var(--border);
    }

    .footer-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    @media (min-width: 768px) {
      .footer-content { flex-direction: row; justify-content: space-between; }
    }

    .footer-copy { font-size: 14px; color: var(--muted-foreground); }

    .footer-links { display: flex; gap: 24px; }

    .footer-links a {
      font-size: 14px;
      color: var(--muted-foreground);
      text-decoration: none;
      transition: color 0.3s;
    }

    .footer-links a:hover { color: var(--gx-red); }

@media (min-width: 1024px) {
  .scenarios-layout {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}