/* ── DESIGN TOKENS — matched exactly to index_6.php ── */
    :root {
      --purple:       #4F4386;
      --purple-dk:    #3a316a;
      --purple-light: #7b6fbb;
      --purple-pale:  #f0eef9;
      --lime:         #80C341;
      --lime-dk:      #68a032;
      --lime-pale:    #f2f9eb;
      --white:        #ffffff;
      --gray:         #f7f6fb;
      --text:         #1a1530;
      --text-2:       #3d3660;
      --text-3:       #6b7280;
      --border:       rgba(79,67,134,.12);
      --r-sm:         8px;
      --r-md:         14px;
      --r-lg:         20px;
      --r-xl:         28px;
      --serif:        'Cormorant Garamond', Georgia, serif;
      --sans:         'Outfit', system-ui, sans-serif;
    }

  
    /* ── LAYOUT ── */
    .wrap { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
    .section { padding: 80px 0; }
    .bg-white   { background: var(--white); }
    .bg-gray    { background: var(--gray); }
    .bg-purple-pale { background: var(--purple-pale); }
    .bg-lime-pale   { background: var(--lime-pale); }
    .tc { text-align: center; }

    /* ── TYPOGRAPHY ── */
    h1 { font-family: var(--serif); font-weight: 500; line-height: 1.12; }
    h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.18; color: var(--text); }
    h2 em { font-style: italic; color: var(--purple); }
    h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.3; }
    p.lead { font-size: .97rem; line-height: 1.78; color: var(--text-3); }
    p.lead strong { color: var(--text); font-weight: 600; }


	

	
    /* ── PILL BADGES ── */
    .pill {
      display: inline-block;
      background: rgba(79,67,134,.1);
      color: var(--purple);
      border: 1px solid rgba(79,67,134,.2);
      font-family: var(--sans);
      font-size: .72rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      padding: .32rem .9rem;
      border-radius: 100px;
      margin-bottom: 14px;
    }
    .pill-lime {
      background: rgba(128,195,65,.12);
      color: var(--lime-dk);
      border-color: rgba(128,195,65,.3);
    }

    /* ── SPLIT LAYOUT ── */
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
    }
    .split-a { }
    .split-b { }

    /* ── HERO ── */
    .hero {
      position: relative;
      min-height: 86vh;
      display: flex; align-items: center;
      overflow: hidden;
      background: linear-gradient(135deg, #1a1520 0%, #3a316a 40%, #4F4386 70%, #2a2048 100%);
    }
    .hero-video-wrap {
      position: absolute; inset: 0; z-index: 0;
    }
    .hero-video-wrap video {
      width: 100%; height: 100%; object-fit: cover; opacity: .18;
    }
    .hero-overlay {
      position: absolute; inset: 0; z-index: 1;
      background: radial-gradient(ellipse 60% 70% at 60% 40%, rgba(128,195,65,.12), transparent 65%),
                  radial-gradient(ellipse 40% 50% at 20% 70%, rgba(79,67,134,.3), transparent 55%);
    }
    .hero-content {
      position: relative; z-index: 2;
      max-width: 660px;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(128,195,65,.15);
      border: 1px solid rgba(128,195,65,.3);
      color: #a8e065;
      font-size: .72rem; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      padding: .35rem 1rem;
      border-radius: 100px;
      margin-bottom: 20px;
    }
    .hero-badge-dot {
      width: 6px; height: 6px;
      background: var(--lime);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(1.35)} }
    .hero-h1 {
      font-family: var(--serif);
      font-size: clamp(2.4rem, 5vw, 4.2rem);
      font-weight: 500;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 18px;
    }
    .hero-h1 em { font-style: italic; color: var(--lime); }
    .hero-sub {
      font-size: 1.05rem; color: rgba(255,255,255,.6);
      line-height: 1.72; margin-bottom: 32px;
      font-family: var(--sans); font-weight: 400;
    }
    .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
    .hero-stats {
      display: flex; gap: 0;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    .hero-stat {
      flex: 1;
      padding: 18px 20px;
      border-right: 1px solid rgba(255,255,255,.1);
    }
    .hero-stat:last-child { border-right: none; }
    .hero-stat-num {
      font-family: var(--serif);
      font-size: 2rem; font-weight: 600;
      color: var(--lime);
      display: block; line-height: 1; margin-bottom: 5px;
    }
    .hero-stat-label {
      font-size: .72rem; color: rgba(255,255,255,.45);
      line-height: 1.4; font-family: var(--sans);
    }

    /* ── DARK SECTION ── */
    .dark-sec {
      background: linear-gradient(135deg, #1a1520 0%, #2e2858 50%, #1f1a3a 100%);
      padding: 80px 0;
      color: #fff;
    }
    .dark-sec p { color: rgba(255,255,255,.6); font-size: .95rem; line-height: 1.75; }
    .dark-sec h2 { color: #fff; }
    .dark-sec h3 { color: rgba(255,255,255,.88); }
    .dark-pill {
      display: inline-block;
      background: rgba(128,195,65,.15);
      color: var(--lime);
      border: 1px solid rgba(128,195,65,.25);
      font-size: .72rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      padding: .32rem .9rem; border-radius: 100px; margin-bottom: 14px;
    }

    /* ── BIO LIST (dark sections) ── */
    .bio-list { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
    .bio-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; }
    .bio-dot {
      width: 10px; height: 10px; border-radius: 50%;
      flex-shrink: 0; margin-top: 5px;
    }
    .bio-dot.lime { background: var(--lime); }
    .bio-dot.purple { background: var(--purple-light); }
    .bio-dot.blue { background: #5babd4; }
    .bio-dot.white { background: rgba(255,255,255,.6); }
    .lbl { font-weight: 700; color: rgba(255,255,255,.9); margin-right: 4px; }
    .lbl-dark { font-weight: 700; color: var(--text); margin-right: 4px; }

    /* ── TICK LIST (light sections) ── */
    .check-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
    .check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; color: var(--text-3); line-height: 1.6; }
    .check-ico {
      width: 20px; height: 20px; flex-shrink: 0;
      background: rgba(128,195,65,.15);
      border: 1px solid rgba(128,195,65,.3);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-top: 2px;
    }
    .check-ico svg { width: 10px; height: 10px; stroke: var(--lime); fill: none; stroke-width: 2.2; stroke-linecap: round; }

    /* ── TL (traffic-light bullet) LIST ── */
    .tl-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
    .tl-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .93rem; color: var(--text-3); }
    .tl-dot {
      width: 8px; height: 8px; flex-shrink: 0;
      background: var(--lime); border-radius: 50%; margin-top: 6px;
    }

    /* ── FEATURE CARDS (4-up) ── */
    .cards-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .feat-card {
      background: #fff;
      border: 1px solid rgba(79,67,134,.1);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: 0 2px 16px rgba(79,67,134,.07);
      display: flex; flex-direction: column;
      transition: box-shadow .2s, transform .2s;
    }
    .feat-card:hover { box-shadow: 0 8px 32px rgba(79,67,134,.14); transform: translateY(-3px); }
    .feat-card-img { width: 100%; height: 200px; object-fit: cover; display: block; }
    .card-img-ph {
      background: var(--purple-pale);
      overflow: hidden;
    }
    .feat-card-inner {
      padding: 20px;
      display: flex; flex-direction: column; gap: 10px; flex: 1;
    }
    .feat-card-title { font-weight: 700; font-size: .95rem; color: var(--text); line-height: 1.35; }
    .feat-card-desc { font-size: .83rem; color: var(--text-3); line-height: 1.6; flex: 1; }

    /* ── SCI GRID (4 science image cards — dark) ── */
    .sci-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    }
    .sci-card { text-align: center; }
    .sci-card h6 {
      font-family: var(--sans); font-size: .88rem; font-weight: 600;
      color: rgba(255,255,255,.85);
      margin: 12px 0 10px;
    }
    .sci-img-ph { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1; }
    .sci-img-ph img { width: 100%; height: 100%; object-fit: cover; }

    /* ── STEP CARDS (How it works) ── */
    .steps-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
    }
    .step-card {
      background: #fff;
      border: 1px solid rgba(79,67,134,.1);
      border-radius: var(--r-xl);
      padding: 28px 24px;
      text-align: center;
      box-shadow: 0 2px 12px rgba(79,67,134,.06);
    }
    .step-num {
      width: 48px; height: 48px;
      background: var(--purple);
      color: #fff;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif); font-size: 1.4rem; font-weight: 600;
      margin: 0 auto 16px;
    }
    .step-img-ph { border-radius: var(--r-md); overflow: hidden; margin-bottom: 14px; }
    .step-img-ph img { width: 100%; height: auto; object-fit: contain; }
    .step-card h6 { font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: 8px; }
    .step-card p { font-size: .84rem; color: var(--text-3); line-height: 1.65; }

    /* ── STAT CARDS (data callouts) ── */
    .stat-cards {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
      margin-top: 36px;
    }
    .stat-card {
      background: #fff;
      border: 1px solid rgba(79,67,134,.1);
      border-radius: var(--r-lg);
      padding: 24px 20px; text-align: center;
      box-shadow: 0 2px 10px rgba(79,67,134,.06);
    }
    .stat-card-num {
      font-family: var(--serif);
      font-size: 2.6rem; font-weight: 600;
      line-height: 1; display: block; margin-bottom: 6px;
    }
    .stat-card-label { font-size: .8rem; color: var(--text-3); line-height: 1.45; }
    .stat-card-source { font-size: .65rem; color: #b0aac8; margin-top: 6px; display: block; }

    /* ── INSIGHT CARDS (3-up, white bg on section) ── */
    .insight-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
      margin-top: 36px;
    }
    .insight-card {
      background: #fff;
      border: 1px solid rgba(79,67,134,.1);
      border-radius: var(--r-xl);
      padding: 28px 24px;
      box-shadow: 0 2px 12px rgba(79,67,134,.06);
      position: relative; overflow: hidden;
    }
    .insight-card::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--purple), var(--lime));
    }
    .insight-icon { font-size: 2rem; margin-bottom: 14px; }
    .insight-card h4 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
    .insight-card p { font-size: .84rem; color: var(--text-3); line-height: 1.65; }
    .insight-stat {
      font-family: var(--serif); font-size: 1.6rem; font-weight: 600;
      color: var(--purple); display: block; margin-top: 10px;
    }

    /* ── PHASE BLOCKS (dark timeline sections) ── */
    .phase-num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px;
      background: var(--lime); color: #fff;
      border-radius: 50%;
      font-family: var(--serif); font-size: 1.2rem; font-weight: 600;
      flex-shrink: 0;
      margin-bottom: 16px;
    }
    .phase-label {
      display: inline-block;
      background: rgba(128,195,65,.15);
      color: var(--lime);
      border: 1px solid rgba(128,195,65,.25);
      font-size: .7rem; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      padding: .28rem .8rem; border-radius: 100px; margin-bottom: 14px;
    }

    /* ── FAQ ── */
    .faq-item {
      border-bottom: 1px solid rgba(79,67,134,.12);
    }
    .faq-q {
      width: 100%; display: flex; justify-content: space-between; align-items: center;
      padding: 18px 0;
      font-family: var(--sans); font-size: .97rem; font-weight: 600;
      color: var(--text); cursor: pointer;
      transition: color .2s;
    }
    .faq-q:hover { color: var(--purple); }
    .faq-q.open { color: var(--purple); }
    .faq-ico {
      width: 24px; height: 24px; flex-shrink: 0;
      background: rgba(79,67,134,.08);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .faq-ico svg { width: 12px; height: 12px; stroke: var(--purple); fill: none; stroke-width: 2; stroke-linecap: round; transition: transform .25s; }
    .faq-q.open .faq-ico svg { transform: rotate(45deg); }
    .faq-a { display: none; padding: 0 0 18px; }
    .faq-a.show { display: block; }
    .faq-a p { font-size: .93rem; color: var(--text-3); line-height: 1.72; }
    .faq-a p + p { margin-top: 8px; }

    /* ── ROUND BORDER (images/videos) ── */
    .round-border { border-radius: var(--r-xl); overflow: hidden; }
    video.round-border { display: block; }

    /* ── VIDEO PLACEHOLDER ── */
    .vid-ph {
      background: rgba(79,67,134,.06);
      border: 1.5px dashed rgba(79,67,134,.2);
      border-radius: var(--r-xl);
      min-height: 320px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 8px;
      color: rgba(79,67,134,.35);
      font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    }
    .vid-ph.dark {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.15);
      color: rgba(255,255,255,.25);
    }
    .vid-ph svg { width: 32px; height: 32px; opacity: .4; }

    /* ── POWERED ROW ── */
    .powered-row {
      display: flex; align-items: center; gap: 16px;
      margin-top: 28px;
      padding: 16px 20px;
      background: rgba(79,67,134,.05);
      border: 1px solid rgba(79,67,134,.1);
      border-radius: var(--r-md);
    }
    .powered-label { font-size: .78rem; font-weight: 600; color: var(--text-3); letter-spacing: .04em; }
    .powered-row img { height: 26px; opacity: .55; }

    /* ── CTA SECTION ── */
    .cta-band {
      background: linear-gradient(135deg, #1a1520 0%, #3a316a 50%, #2a2048 100%);
      padding: 72px 0; text-align: center; position: relative; overflow: hidden;
    }
    .cta-band::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(128,195,65,.1), transparent 70%);
    }
    .cta-band h2 { color: #fff; position: relative; max-width: 680px; margin: 0 auto 12px; }
    .cta-band h2 em { color: var(--lime); font-style: italic; }
    .cta-band p { color: rgba(255,255,255,.55); max-width: 520px; margin: 0 auto 32px; position: relative; }
    .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }

    /* ── FOOTER ── */
    .site-footer {
      background: var(--purple-dk);
      padding: 48px 0 24px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .footer-grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
      margin-bottom: 40px;
    }
    .footer-brand img { height: 30px; margin-bottom: 14px; }
    .footer-brand p { font-size: .82rem; color: rgba(255,255,255,.35); line-height: 1.65; }
    .footer-brand a { color: rgba(255,255,255,.35); font-size: .82rem; margin-top: 8px; display: inline-block; }
    .footer-brand a:hover { color: var(--lime); }
    .footer-col h5 {
      font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: rgba(255,255,255,.3); margin-bottom: 14px;
    }
    .footer-col a { display: block; font-size: .85rem; color: rgba(255,255,255,.5); margin-bottom: 8px; }
    .footer-col a:hover { color: #fff; }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px;
      display: flex; justify-content: space-between; align-items: center;
      font-size: .74rem; color: rgba(255,255,255,.22); flex-wrap: wrap; gap: 6px;
    }
    .footer-bottom a { color: rgba(255,255,255,.22); }
    .footer-bottom a:hover { color: rgba(255,255,255,.5); }

    /* ── DIVIDER STRIPE ── */
    .div-stripe { height: 4px; background: linear-gradient(90deg, var(--purple) 0%, var(--lime) 50%, var(--purple) 100%); }

    /* ── SCROLL REVEAL ── */
    .sr { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
    .sr.visible { opacity: 1; transform: none; }
    .d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .cards-4 { grid-template-columns: repeat(2, 1fr); }
      .sci-grid { grid-template-columns: repeat(2, 1fr); }
      .stat-cards { grid-template-columns: repeat(2, 1fr); }
      .insight-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .split { grid-template-columns: 1fr; gap: 36px; }
      .split .split-a[style*="order:2"] { order: 2 !important; }
      .split .split-b[style*="order:1"] { order: 1 !important; }
      .steps-grid { grid-template-columns: 1fr; }
      .nav-links { display: none; }
    }
    @media (max-width: 640px) {
      .cards-4, .sci-grid, .stat-cards, .insight-grid { grid-template-columns: 1fr; }
      .hero-stats { flex-direction: column; }
      .hero-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
    }