:root {
        --bg: #0b2d53; /* deep navy */
        --bg-soft: #0f3b6e;
        --card: #0f1720; /* dark text base */
        --text: #e8f0fb; /* light body text */
        --muted: #b9c7da;
        --accent: #ff9800; /* action orange */
        --accent-2: #27ae60; /* success green */
        --gold: #ffd54d; /* highlight */
        --radius: 14px;
        --max: 1120px;
        --shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(180deg, var(--bg), #062341 900px, #04182d);
        color: var(--text);
        line-height: 1.6;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .wrap {
        max-width: var(--max);
        margin: auto;
        padding: 18px;
      }

      /* Trust banner */
      .trust {
        background: linear-gradient(90deg, #004aad, #1f6fe0);
        border-radius: 999px;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 0.95rem;
        color: #fff;
        box-shadow: var(--shadow);
        margin-bottom: 20px;
      }
      .trust .ai {
        color: var(--gold);
        font-weight: 700;
      }

      /* Hero section */
      .hero {
        margin-top: 18px;
        background: var(--bg-soft);
        border-radius: var(--radius);
        padding: 40px 30px;
        box-shadow: var(--shadow);
        text-align: center;
        margin-bottom: 30px;
      }
      .hero h1 {
        margin: 0 0 15px;
        line-height: 1.25;
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 800;
      }
      .hero-subtitle {
        font-size: 1.3rem;
        margin-bottom: 25px;
        color: var(--gold);
        font-weight: 500;
      }
      .hero-highlight {
        color: var(--gold);
        font-weight: 700;
      }

      /* CTA Section */
      .cta-section {
        background: rgba(0, 0, 0, 0.2);
        border-radius: var(--radius);
        padding: 25px;
        margin: 30px 0;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .cta-title {
        margin: 0 0 10px 0;
        font-size: 1.5rem;
      }
      .cta-subtitle {
        margin-bottom: 20px;
        font-size: 1.1rem;
      }

      /* Buttons */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 16px 28px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 1.1rem;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
        transition:
          transform 0.08s ease,
          box-shadow 0.2s ease,
          background 0.2s ease;
        border: 0;
        cursor: pointer;
        margin: 10px;
      }
      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
      }
      .btn-primary {
        background: var(--accent);
        color: #09131f;
      }
      .btn-secondary {
        background: #1f5fb9;
        color: #fff;
      }
      .btn-ghost {
        background: transparent;
        color: #cfe1ff;
        border: 1px solid rgba(255, 255, 255, 0.25);
      }

      .bonus {
        display: inline-block;
        background: linear-gradient(90deg, #11a865, #1ed479);
        color: #042318;
        padding: 12px 20px;
        border-radius: 999px;
        font-weight: 800;
        font-size: 1rem;
        margin: 15px 0;
      }

      /* Benefits */
      .card {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius);
        padding: 30px;
        box-shadow: var(--shadow);
        margin: 30px 0;
      }
      .card h2 {
        margin: 0 0 20px;
        font-size: 1.8rem;
        color: #eaf3ff;
        text-align: center;
      }
      .benefits {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 20px;
      }
      .benefit {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        background: rgba(0, 0, 0, 0.15);
        padding: 16px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .benefit-icon {
        flex: 0 0 26px;
        height: 26px;
      }
      .benefit strong {
        color: #fff;
      }

      /* Steps */
      .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 30px 0;
      }
      .step {
        background: rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 20px;
        text-align: center;
      }
      .step h3 {
        margin: 0 0 10px;
        font-size: 1.2rem;
      }
      .step-badge {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--accent-2);
        color: #042318;
        font-weight: 800;
        margin-bottom: 10px;
        font-size: 1.2rem;
      }

      /* Testimonials */
      .testimonial-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 30px 0;
      }
      .testimonial-card {
        background: rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 20px;
        text-align: center;
      }
      .testimonial-img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto 15px;
        display: block;
      }
      .testimonial-text {
        font-style: italic;
        margin-bottom: 15px;
      }
      .testimonial-name {
        font-weight: bold;
        color: var(--gold);
      }

      /* Existing Member Section */
      .existing-member {
        background: rgba(39, 174, 96, 0.1);
        border: 1px solid rgba(39, 174, 96, 0.3);
        border-radius: var(--radius);
        padding: 25px;
        margin: 30px 0;
        text-align: center;
      }
      .existing-member h2 {
        color: var(--accent-2);
        margin-top: 0;
      }
      .existing-member-cta {
        display: inline-block;
        background: var(--accent-2);
        color: #042318;
        padding: 14px 24px;
        border-radius: 8px;
        font-weight: 700;
        margin-top: 15px;
        transition: all 0.3s ease;
      }
      .existing-member-cta:hover {
        background: #2ecc71;
        transform: translateY(-2px);
      }

      /* Final CTA */
      .final-cta {
        text-align: center;
        margin: 40px 0 20px;
        padding: 30px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: var(--radius);
      }
      .fine {
        color: var(--muted);
        font-size: 0.9rem;
        margin-top: 10px;
      }

      /* Footer */
      footer {
        text-align: center;
        margin: 40px 0 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }
      footer a {
        margin: 0 10px;
        color: var(--muted);
      }
      footer a:hover {
        color: var(--gold);
      }

      /* Layout tweaks */
      @media (max-width: 960px) {
        .hero-grid {
          grid-template-columns: 1fr;
        }
        .benefits {
          grid-template-columns: 1fr;
        }
        .steps {
          grid-template-columns: 1fr;
        }
        .testimonial-grid {
          grid-template-columns: 1fr;
        }
      }

      /* New elements */
      .value-prop {
        text-align: center;
        font-size: 1.2rem;
        margin: 20px 0 30px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
      }

      .guarantee {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 20px 0;
        flex-wrap: wrap;
      }

      .guarantee-item {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.1);
        padding: 8px 15px;
        border-radius: 20px;
      }

      .stats {
        display: flex;
        justify-content: space-around;
        margin: 30px 0;
        flex-wrap: wrap;
        gap: 20px;
      }

      .stat-item {
        text-align: center;
      }

      .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--gold);
        margin-bottom: 5px;
      }

      .stat-label {
        font-size: 0.9rem;
        color: var(--muted);
      }

      .after-signup {
        background: rgba(255, 152, 0, 0.1);
        border: 1px solid rgba(255, 152, 0, 0.3);
        border-radius: var(--radius);
        padding: 25px;
        margin: 30px 0;
      }
      .after-signup h2 {
        color: var(--accent);
        text-align: center;
      }

      .steps-after-signup {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 30px 0;
      }

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

      /* Original steps styling for How It Works section */
      .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 30px 0;
      }

      @media (max-width: 960px) {
        .steps {
          grid-template-columns: 1fr;
        }
      }

      .after-signup-steps {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 20px 0;
      }
      .step {
        flex: 0 0 32%;
        background: rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 20px;
        margin-bottom: 15px;
      }
      .step-number {
        display: inline-block;
        width: 40px;
        height: 40px;
        background: var(--accent);
        color: #042318;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        font-weight: 700;
        margin-right: 10px;
      }
      @media (max-width: 768px) {
        .step {
          flex: 0 0 100%;
        }
      }

/* Custom styles for GDI page */
    .container {
        max-width: var(--max);
        margin: 0 auto;
        padding: 20px;
      }
      
      .header {
        text-align: center;
        padding: 20px 0;
      }

    .logo {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--gold);
        margin-bottom: 20px;
      }
      
      .nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 30px;
      }
      
      .nav a {
        padding: 12px 20px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        transition: background 0.3s ease;
      }
      
      .nav a:hover, .nav a.active {
        background: var(--accent);
        color: #042318;
      }