:root {
      --accent: #A78BFA;
      --accent-light: #C4B5FD;
      --dark: #0a0a0a;
      --dark-secondary: #1a1a1a;
      --dark-tertiary: #2d2d2d;
      --light: #f5f5f5;
      --text: #ffffff;
      --text-light: #e5e7eb;
      --text-muted: #b4bcc4;
      --border: #374151;
      --gradient: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 100%);

      /* ---- TYPE SCALE ---- */
      --text-xs: 0.75rem;    /* labels, tags */
      --text-sm: 0.875rem;   /* meta, captions */
      --text-base: 1rem;     /* body */
      --text-lg: 1.125rem;   /* lead paragraphs */
      --text-xl: 1.25rem;    /* card headings */
      --text-2xl: 1.5rem;    /* section subheads */
      --text-3xl: 2rem;      /* h2 */
      --text-4xl: 3rem;      /* h1 */

      /* ---- SPACING SCALE (4px base) ---- */
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;

      /* ---- RADII ---- */
      --radius-sm: 6px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-pill: 999px;

    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--dark);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }

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

    /* HEADER */
    header {
      background: var(--dark);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(10px);
      background-color: rgba(10, 10, 10, 0.8);
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 0;
      gap: var(--space-8);
    }

    .logo {
      font-size: var(--text-xl);
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      white-space: nowrap;
      cursor: pointer;
    }

    .nav-menu {
      display: flex;
      gap: var(--space-6);
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
    }

    @media (min-width: 1101px) and (max-width: 1300px) {
      .nav-menu {
        gap: var(--space-4);
      }

      .nav-link {
        font-size: var(--text-sm);
      }

      .btn-join-now {
        padding: 0.55rem 1.1rem;
        font-size: var(--text-sm);
      }
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: var(--space-1);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      z-index: 101;
    }

    .hamburger span {
      width: 25px;
      height: 2px;
      background: var(--text);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: block;
    }

    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(8px, 8px);
    }

    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(6px, -6px);
    }

    .nav-link {
      color: var(--text-muted);
      text-decoration: none;
      font-weight: 500;
      font-size: var(--text-base);
      cursor: pointer;
      transition: color 0.3s;
      border-bottom: 2px solid transparent;
      padding-bottom: 0.25rem;
    }

    .nav-link:hover {
      color: var(--accent);
    }

    .nav-link:focus {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 4px;
    }

    .nav-link.active {
      color: var(--text);
      border-bottom-color: var(--accent);
    }

    .btn-join-now {
      background: var(--accent);
      color: white;
      border: none;
      padding: 0.6rem 1.5rem;
      border-radius: 6px;
      font-size: var(--text-base);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      white-space: nowrap;
    }

    .btn-join-now:hover {
      background: var(--accent-light);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(167, 139, 250, 0.3);
    }

    .btn-join-now:active {
      transform: translateY(0);
    }

    /* Mobile responsive nav */
    @media (max-width: 1100px) {
      .hamburger {
        display: flex;
      }

      nav {
        gap: var(--space-4);
      }

      .nav-menu {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        background: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 100;
        border-bottom: 1px solid var(--border);
      }

      .nav-menu.active {
        max-height: 520px;
        overflow-y: auto;
      }

      .nav-link {
        padding: 1rem 1.5rem;
        border: none;
        border-bottom: 1px solid var(--border);
        font-size: var(--text-base);
        width: 100%;
        text-align: left;
      }

      .nav-link:hover {
        background: rgba(167, 139, 250, 0.1);
      }

      .nav-link.active {
        background: rgba(167, 139, 250, 0.15);
        border-bottom-color: var(--accent);
      }

      .btn-join-now {
        margin: 1rem 1.5rem;
        width: calc(100% - 3rem);
        padding: 0.9rem 1.5rem;
      }

      .btn-join-now:hover {
        transform: none;
      }
    }

    /* SECTIONS */
    section {
      padding: 5rem 1.5rem;
      border-bottom: 1px solid var(--border);
      position: relative;
    }

    /* Add subtle divider lines between sections */
    section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 2%;
      width: 96%;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
    }

    section.light {
      background: linear-gradient(135deg, #1a1a1a 0%, #2d2d3d 100%);
    }

    section.dark {
      background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    }

    /* Alternate gradient directions for visual variety */
    section.light:nth-child(odd) {
      background: linear-gradient(135deg, #2d2d3d 0%, #1a1a1a 100%);
    }

    /* Add accent line on specific sections */
    section:nth-child(3)::after {
      content: '';
      position: absolute;
      left: 1.5rem;
      bottom: 0;
      width: 40px;
      height: 2px;
      background: var(--gradient);
    }

    section:nth-child(5)::after {
      content: '';
      position: absolute;
      right: 1.5rem;
      bottom: 0;
      width: 40px;
      height: 2px;
      background: var(--gradient);
    }

    h1 {
      font-size: clamp(2.5rem, 6vw, 4rem);
      margin-bottom: 1rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }

    h2 {
      font-size: clamp(2rem, 5vw, 3rem);
      margin-bottom: 0.5rem;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    h3 {
      font-size: var(--text-xl);
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    p {
      color: var(--text-light);
      line-height: 1.7;
    }

    .subtitle {
      color: var(--text-muted);
      font-size: var(--text-lg);
      line-height: 1.8;
      max-width: 600px;
    }

    /* A centred container must also centre its width-constrained
       children, or the text centres inside an off-centre box. */
    [style*="text-align: center"] .subtitle,
    .cta-section .subtitle {
      margin-left: auto;
      margin-right: auto;
    }

    /* Reusable centred CTA block — replaces the inline styles that
       were applied inconsistently across the six CTA sections. */
    .cta-section {
      text-align: center;
    }

    .cta-section h2 {
      margin-bottom: var(--space-4);
    }

    .cta-section p {
      color: var(--text-light);
      font-size: var(--text-lg);
      line-height: 1.8;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: var(--space-8);
    }

    /* Buttons are inline-flex, which does not centre on its own */
    .cta-section .btn,
    .cta-section .btn-secondary {
      margin-left: auto;
      margin-right: auto;
    }

    /* HERO SECTION */
    .hero {
      display: block;
      width: 100%;
    }

    .hero-content {
      max-width: 100%;
      text-align: left;
    }

    .hero-content h1 {
      background: linear-gradient(135deg, var(--text) 0%, var(--text-light) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 1.5rem;
    }

    .hero-subtitle {
      color: var(--text-light);
      font-size: var(--text-lg);
      margin-bottom: 2rem;
      line-height: 1.8;
    }

    /* HERO BACKGROUND IMAGE */
    .hero-section {
      position: relative;
      overflow: hidden;
    }

    .hero-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      overflow: hidden;
    }

    .hero-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .hero-background::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      /* Two scrims: a horizontal one weighted to the left where the
         headline sits, plus a vertical one to seat the section against
         the header above and the band below. */
      background:
        linear-gradient(90deg,
          rgba(10, 10, 10, 0.94) 0%,
          rgba(10, 10, 10, 0.88) 35%,
          rgba(10, 10, 10, 0.66) 65%,
          rgba(10, 10, 10, 0.52) 100%),
        linear-gradient(180deg,
          rgba(10, 10, 10, 0.55) 0%,
          rgba(10, 10, 10, 0.25) 45%,
          rgba(10, 10, 10, 0.60) 100%);
    }

    .hero-background img {
      object-position: 62% center;
    }

    /* Events photo: hanging greenery sits up top, the key conversation
       mid-frame — bias slightly upward so both read under the scrim. */
    #events .hero-background img {
      object-position: center 42%;
    }

    /* Ecosystem photo: the panel and its screens sit in the upper half,
       audience below — bias upward to keep the panel in frame. */
    #ecosystem .hero-background img {
      object-position: center 38%;
    }

    /* About photo: a room of smiling faces across the middle band —
       centre keeps the front rows and the warm window light in frame. */
    #about .hero-background img {
      object-position: center 45%;
    }

    /* Contact photo: the laughing panellists sit in the upper-centre —
       bias up so their faces stay in frame under the scrim. */
    #contact .hero-background img {
      object-position: center 30%;
    }

    @media (max-width: 860px) {
      /* Narrow screens: text spans the full width, so an even scrim
         works better than a directional one. */
      .hero-background::after {
        background: rgba(10, 10, 10, 0.82);
      }
    }

    .hero-content-wrapper {
      position: relative;
      z-index: 1;
    }

    /* Hero Section Differentiation */
    /* Home Hero - Top gradient accent */
    #home section:first-of-type::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--gradient);
    }

    /* Ecosystem Reports Hero - Right side glow */
    #ecosystem section:first-of-type {
      position: relative;
      overflow: hidden;
    }

    #ecosystem section:first-of-type::after {
      content: '';
      position: absolute;
      right: -50px;
      top: 50%;
      transform: translateY(-50%);
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(167, 139, 250, 0.08), transparent);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }

    /* Women in Open Banking Hero - Bottom accent */
    #women section:first-of-type::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--gradient);
    }

    /* Community Hero - Left border accent */

    /* About Hero - Top-right corner accent */
    #about section:first-of-type {
      position: relative;
    }

    #about section:first-of-type::before {
      content: '';
      position: absolute;
      top: 0;
      left: auto;
      right: 0;
      width: 120px;
      height: 120px;
      background: none;
      border-top: 2px solid var(--accent);
      border-right: 2px solid var(--accent);
    }

    /* Contact Hero - Bottom-left corner accent */
    #contact section:first-of-type {
      position: relative;
    }

    #contact section:first-of-type::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 120px;
      height: 120px;
      border-bottom: 2px solid var(--accent);
      border-left: 2px solid var(--accent);
    }

    .hero-image {
      display: none;
    }

    /* BUTTONS */
    .btn {
      background: var(--gradient);
      color: var(--dark);
      padding: 1rem 2rem;
      border: none;
      border-radius: 10px;
      font-weight: 600;
      font-size: var(--text-base);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      text-decoration: none;
      display: inline-block;
      white-space: nowrap;
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(167, 139, 250, 0.3);
    }

    .btn:focus {
      outline: 2px solid var(--text);
      outline-offset: 2px;
    }

    .btn:active {
      transform: translateY(0);
      box-shadow: 0 5px 15px rgba(167, 139, 250, 0.2);
    }

    .btn-secondary {
      background: transparent;
      color: var(--text);
      border: 1px solid var(--border);
    }

    .btn-secondary:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .btn-secondary:focus {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    /* Tertiary Button - Subtle CTA */
    .btn-tertiary {
      background: transparent;
      color: var(--accent);
      border: none;
      padding: 0.5rem 0;
      font-weight: 600;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.35rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .btn-tertiary:hover {
      color: var(--accent-light);
      text-decoration-thickness: 2px;
    }

    .btn-tertiary:focus {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .btn-tertiary:active {
      color: var(--accent);
    }

    /* Button Size Variants */
    .btn.btn-sm {
      padding: 0.625rem 1.25rem;
      font-size: var(--text-sm);
      min-height: 40px;
    }

    .btn.btn-lg {
      padding: 1.25rem 2.5rem;
      font-size: var(--text-lg);
      min-height: 56px;
    }

    /* Button Group */
    .btn-group {
      display: flex;
      gap: var(--space-4);
      flex-wrap: wrap;
      align-items: center;
    }

    @media (max-width: 768px) {
      .btn-group {
        flex-direction: column;
        width: 100%;
      }

      .btn-group .btn {
        width: 100%;
      }
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.45em;
      padding: 0.5rem 1rem;
      background: rgba(167, 139, 250, 0.1);
      border: 1px solid rgba(167, 139, 250, 0.2);
      color: var(--accent);
      border-radius: 8px;
      font-size: var(--text-xs);
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 2rem;
    }

    .badge svg {
      width: 1.05em;
      height: 1.05em;
      flex: none;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Inline SVG icons that replaced emoji in content sections.
       Card icons take the brand accent; inline text icons inherit
       their surrounding text colour. */
    .card-icon svg {
      width: 1em;
      height: 1em;
      display: block;
      color: var(--accent);
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .event-meta svg {
      width: 1em;
      height: 1em;
      vertical-align: -0.125em;
      margin-right: 0.4em;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #contact .card h3 {
      display: flex;
      align-items: center;
      gap: 0.5em;
    }

    #contact .card h3 svg {
      width: 1.1em;
      height: 1.1em;
      flex: none;
      color: var(--accent);
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .gallery-placeholder-icon svg {
      width: 2rem;
      height: 2rem;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* GRID */
    .grid {
      display: grid;
      gap: var(--space-8);
    }

    .grid-2 {
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }

    .grid-3 {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .grid-4 {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    /* CARDS */
    .card {
      background: var(--dark-secondary);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 2rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
    }

    .card:hover {
      border-color: var(--accent);
      box-shadow: 0 20px 50px rgba(167, 139, 250, 0.15);
      transform: translateY(-4px);
    }

    .card:focus-within {
      outline: 2px solid var(--accent);
      outline-offset: -1px;
    }

    .card-icon {
      font-size: var(--text-3xl);
      margin-bottom: 1rem;
    }

    .card h3 {
      color: var(--text);
      margin-bottom: 0.75rem;
    }

    .card p {
      color: var(--text-muted);
      font-size: var(--text-base);
    }

    /* CARD VARIANTS */
    /* Testimonial Card - Left accent border */
    .testimonial {
      background: rgba(167, 139, 250, 0.05);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: 12px;
      padding: 2rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .testimonial::before {
      content: '"';
      position: absolute;
      top: 10px;
      left: 15px;
      font-size: var(--text-4xl);
      color: var(--accent);
      opacity: 0.2;
      line-height: 0;
    }

    .testimonial:hover {
      background: rgba(167, 139, 250, 0.1);
      border-left-color: var(--accent-light);
      box-shadow: 0 20px 50px rgba(167, 139, 250, 0.15);
      transform: translateY(-4px);
    }

    .testimonial:focus-within {
      outline: 2px solid var(--accent);
      outline-offset: -1px;
    }

    /* Stat Card - Centered, minimal */
    .stat-card {
      background: transparent;
      border: 1px solid var(--border);
      text-align: center;
      padding: 2.5rem 2rem;
    }

    .stat-card:hover {
      background: rgba(167, 139, 250, 0.05);
      border-color: var(--accent);
    }

    .stat-card .stat-number {
      font-size: var(--text-3xl);
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0.5rem;
    }

    .stat-card .stat-label {
      color: var(--text-light);
      font-size: var(--text-sm);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Report Card - Subtle background */
    .report-card {
      background: rgba(167, 139, 250, 0.03);
      border: 1px solid var(--border);
      position: relative;
      overflow: visible;
    }

    .report-card::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 80px;
      background: radial-gradient(circle, rgba(167, 139, 250, 0.1), transparent);
      border-radius: 50%;
      pointer-events: none;
    }

    .report-card:hover {
      background: rgba(167, 139, 250, 0.08);
      border-color: var(--accent);
    }

    /* Feature Card - Current default (border top on hover) */
    .feature-card {
      background: var(--dark-secondary);
      border: 1px solid var(--border);
      border-top: 3px solid transparent;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .feature-card:hover {
      border-top-color: var(--accent);
    }

    /* Event Card - Right accent border */
    .event-card {
      background: var(--dark-secondary);
      border-right: 3px solid var(--accent);
      border-left: 1px solid var(--border);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .event-card:hover {
      background: var(--dark-tertiary);
      border-right-color: var(--accent-light);
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--space-8);
    }

    .feature-item {
      padding: 2rem;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--dark-secondary);
      transition: all 0.3s;
    }

    .feature-item:hover {
      border-color: var(--accent);
      background: var(--dark-tertiary);
    }

    .feature-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      background: var(--gradient);
      color: var(--dark);
      border-radius: 50%;
      font-weight: 700;
      font-size: var(--text-lg);
      margin-bottom: 1rem;
    }

    /* PARTNERS */
    .partners-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-8);
      align-items: center;
      justify-items: center;
    }

    .partner-logo {
      padding: 2rem;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--dark-secondary);
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 120px;
      width: 100%;
    }

    .partner-logo:hover {
      border-color: var(--accent);
      box-shadow: 0 10px 25px rgba(167, 139, 250, 0.1);
    }

    /* FEATURED TESTIMONIAL */
    .featured-testimonial {
      padding: 5rem 1.5rem !important;
    }

    .testimonial-content {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--space-16);
      align-items: center;
      max-width: 900px;
      margin: 0 auto;
    }

    .testimonial-image {
      flex-shrink: 0;
    }

    .testimonial-image img {
      width: 250px;
      height: auto;
      border-radius: 12px;
      display: block;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .testimonial-text {
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
    }

    .testimonial-quote {
      font-size: var(--text-lg);
      line-height: 1.8;
      color: var(--text-light);
      font-style: italic;
      padding: 2rem;
      border-left: 4px solid var(--accent);
      background: rgba(167, 139, 250, 0.05);
      border-radius: 8px;
    }

    .testimonial-author {
      font-weight: 700;
      font-size: var(--text-base);
      color: var(--text);
      margin-top: 1rem;
    }

    .testimonial-title {
      font-size: var(--text-sm);
      color: var(--accent);
    }

    @media (max-width: 768px) {
      .testimonial-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
      }

      .testimonial-image img {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
      }

      .testimonial-quote {
        padding: 1.5rem;
        font-size: var(--text-base);
      }
    }

    /* ABOUT PAGE */
    .about-statements {
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
    }

    .about-statements p {
      font-size: var(--text-xl);
      line-height: 1.7;
      color: var(--text-light);
      margin: 0;
    }

    .about-statements p strong {
      color: var(--text);
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--space-8);
      max-width: 720px;
      margin: 0 auto;
    }

    .team-member {
      text-align: center;
    }

    .team-photo img {
      width: 100%;
      max-width: 260px;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 12px;
      border: 1px solid var(--border);
      display: block;
      margin: 0 auto 1.25rem;
    }


    .team-connect {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      margin-top: var(--space-4);
      padding: 0.6rem 1.1rem;
      min-height: 44px;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      color: var(--text-light);
      font-size: var(--text-sm);
      font-weight: 600;
      text-decoration: none;
      transition: all 0.25s;
      white-space: nowrap;
    }

    .team-connect svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .team-connect:hover {
      border-color: var(--accent);
      color: var(--accent-light);
      background: rgba(167, 139, 250, 0.08);
    }

    .team-member h3 {
      margin-bottom: 0.25rem;
    }

    .team-role {
      color: var(--accent);
      font-size: var(--text-sm);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 600;
      margin: 0;
    }



    /* SIMPLE TIMELINE */
    .timeline-simple {
      max-width: 720px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }

    .timeline-row {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: var(--space-6);
      padding: 1.25rem 0;
      border-bottom: 1px solid var(--border);
      align-items: baseline;
    }

    .timeline-row:last-child {
      border-bottom: none;
    }

    .timeline-year-simple {
      font-weight: 700;
      color: var(--accent);
      font-size: var(--text-lg);
    }

    .timeline-text-simple {
      color: var(--text-light);
      line-height: 1.7;
    }

    @media (max-width: 640px) {
      .about-statements p {
        font-size: var(--text-lg);
      }

      .about-statements {
        gap: var(--space-4);
      }

      .team-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
      }

      .team-photo img {
        max-width: 200px;
      }



      .timeline-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
        padding: 1rem 0;
      }
    }

    /* EVENTS PAGE */
    .events-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
      max-width: 860px;
      margin: 0 auto;
    }

    .event-card {
      display: grid;
      grid-template-columns: 150px 1fr;
      background: var(--dark-secondary);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .event-card:hover {
      border-color: var(--accent);
      box-shadow: 0 20px 40px rgba(167, 139, 250, 0.1);
      transform: translateY(-3px);
    }

    .event-date {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem 1rem;
      background: rgba(167, 139, 250, 0.07);
      border-right: 1px solid var(--border);
      text-align: center;
    }

    .event-date-text {
      font-weight: 700;
      color: var(--accent);
      font-size: var(--text-base);
      line-height: 1.4;
    }

    .event-body {
      padding: 1.75rem;
    }

    .event-body h3 {
      margin-bottom: 0.4rem;
      font-size: var(--text-xl);
    }

    .event-theme {
      color: var(--accent-light);
      font-style: italic;
      font-size: var(--text-base);
      margin-bottom: 0.75rem;
    }

    .event-meta {
      color: var(--text-muted);
      font-size: var(--text-sm);
      margin-bottom: 0.3rem;
    }

    .event-description {
      color: var(--text-light);
      font-size: var(--text-base);
      line-height: 1.7;
      margin-top: 0.75rem;
    }

    .event-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-top: 1rem;
    }

    .event-tag {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--accent);
      border: 1px solid rgba(167, 139, 250, 0.35);
      background: rgba(167, 139, 250, 0.08);
      border-radius: 20px;
      padding: 0.3rem 0.75rem;
    }

    .event-photos {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: var(--space-3);
      margin-top: 1.25rem;
    }

    .event-photo {
      margin: 0;
    }

    .event-photo img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--border);
      display: block;
    }

    .event-photo figcaption {
      font-size: var(--text-xs);
      color: var(--text-muted);
      margin-top: 0.4rem;
      line-height: 1.4;
    }

    .btn-event {
      margin-top: 1.25rem;
      display: inline-block;
      text-decoration: none;
      font-size: var(--text-sm);
      padding: 0.6rem 1.25rem;
    }

    .events-empty {
      text-align: center;
      padding: 2.5rem 1.5rem;
      border: 1px dashed var(--border);
      border-radius: 12px;
      color: var(--text-light);
      max-width: 620px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* HOST AN EVENT CTA */
    .host-cta {
      max-width: 720px;
      margin: 0 auto;
      background: var(--dark-secondary);
      border: 1px solid var(--border);
      border-left: 4px solid var(--accent);
      border-radius: 12px;
      padding: 2.5rem;
    }

    .host-benefits {
      list-style: none;
      padding: 0;
      margin: 0 0 2rem;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .host-benefits li {
      color: var(--text-light);
      font-size: var(--text-base);
      line-height: 1.6;
      padding-left: 1.75rem;
      position: relative;
    }

    .host-benefits li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--accent);
      font-weight: 700;
    }

    @media (max-width: 640px) {
      .event-card {
        grid-template-columns: 1fr;
      }

      .event-date {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 0.9rem 1rem;
      }

      .event-body {
        padding: 1.5rem 1.25rem;
      }

      .event-photos {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      }

      .host-cta {
        padding: 1.75rem 1.25rem;
      }
    }


    /* ---- ACCESSIBILITY & TARGET SIZE FIXES ---- */

    /* Focus rings for keyboard users only, not mouse clicks */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    .nav-link:focus-visible,
    .btn:focus-visible,
    .btn-join-now:focus-visible {
      outline: 3px solid var(--accent-light);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* Contact page inline links need a real tap target too */
    .contact-link {
      color: var(--accent);
      text-decoration: none;
      word-break: break-word;
    }

    .contact-link,
    .contact-info a,
    .contact-item a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }

    .logo-mark {
      width: 1.15em;
      height: 1.15em;
      display: inline-block;
      vertical-align: -0.18em;
      margin-right: 0.5rem;
    }

    .footer-brand {
      display: flex;
      align-items: center;
    }

    .footer-brand .logo-mark {
      width: 1.1em;
      height: 1.1em;
      margin-right: 0.45rem;
      vertical-align: baseline;
    }

    /* Logo is now a link */
    a.logo {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }

    /* Buttons that navigate are now anchors — keep them looking identical */
    a.btn,
    a.btn-secondary {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
    }

    /* Inline card links: give them a real tap area (were 17px tall) */
    .card-link {
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;
      /* inline-block, not inline-flex: keeps the arrow in the text flow so it
         stays beside the last word when the label wraps. Padding gives the
         44px tap target without stretching the link to full card width. */
      display: inline-block;
      padding: 0.65rem 0;
      margin-top: 0.25rem;
      line-height: 1.5;
    }

    .card-link:hover {
      color: var(--accent-light);
    }

    /* nowrap stops the arrow being orphaned onto its own line in a
       narrow card. Labels are short, so there's no overflow risk. */
    .card-link {
      white-space: nowrap;
    }

    .card-link span {
      display: inline-block;
      margin-left: 0.2rem;
      transition: transform 0.2s;
    }

    .card-link:hover span {
      transform: translateX(3px);
    }

    /* Footer links: 23px tall was below the 44px target */
    .footer-column a {
      display: block;
      padding: 0.6rem 0;
      min-height: 44px;
      line-height: 1.6;
    }

    /* Hamburger: was 41x33 */
    .hamburger {
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
    }

    /* Skip link for keyboard users */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 200;
      background: var(--accent);
      color: var(--dark);
      padding: 0.75rem 1.25rem;
      font-weight: 600;
      border-radius: 0 0 8px 0;
      text-decoration: none;
    }

    .skip-link:focus {
      left: 0;
    }


    /* ---- WOMEN: EVENT GALLERY ---- */
    .women-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: var(--space-6);
    }

    .gallery-item {
      margin: 0;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--dark-secondary);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .gallery-item:hover {
      border-color: var(--accent);
      transform: translateY(-4px);
      box-shadow: 0 18px 36px rgba(167, 139, 250, 0.12);
    }

    .gallery-media {
      aspect-ratio: 4 / 3;
      width: 100%;
      display: block;
      object-fit: cover;
    }

    /* Empty slot: reads as "photo coming" rather than a broken image */
    .gallery-placeholder {
      aspect-ratio: 4 / 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      background:
        repeating-linear-gradient(45deg,
          rgba(167, 139, 250, 0.05) 0 12px,
          rgba(167, 139, 250, 0.02) 12px 24px);
      color: var(--text-muted);
      text-align: center;
      padding: var(--space-4);
    }

    .gallery-placeholder-icon {
      font-size: 1.75rem;
      opacity: 0.55;
    }

    .gallery-placeholder-label {
      font-size: var(--text-xs);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 600;
      opacity: 0.75;
    }

    .gallery-caption {
      padding: var(--space-3) var(--space-4) var(--space-4);
      font-size: var(--text-sm);
      color: var(--text-light);
      line-height: 1.6;
    }

    .gallery-event-tag {
      display: inline-block;
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: var(--space-1);
    }


    @media (max-width: 640px) {
      .women-gallery {
        grid-template-columns: 1fr;
      }


    }


    /* ---- REPORT BLOCKS (Ecosystem page) ---- */
    .report-block {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: var(--space-12);
      align-items: start;
      max-width: 1000px;
      margin: 0 auto;
    }

    .report-block-reverse {
      grid-template-columns: 320px 1fr;
    }

    .report-block-reverse .report-detail { order: 2; }
    .report-block-reverse .report-cover { order: 1; }

    .report-detail h3 {
      font-size: var(--text-xl);
      margin-bottom: var(--space-3);
    }

    .report-detail p {
      color: var(--text-light);
      line-height: 1.8;
    }

    .report-count {
      display: flex;
      align-items: baseline;
      gap: var(--space-3);
      margin: var(--space-8) 0;
      padding: var(--space-4) var(--space-6);
      background: rgba(167, 139, 250, 0.06);
      border-left: 3px solid var(--accent);
      border-radius: var(--radius-md);
    }

    .report-count-number {
      font-size: var(--text-3xl);
      font-weight: 800;
      color: var(--accent);
      line-height: 1;
    }

    .report-count-label {
      color: var(--text-light);
      font-size: var(--text-base);
    }

    .report-note {
      font-size: var(--text-sm);
      color: var(--text-muted);
      margin-top: var(--space-3);
    }

    .report-cover {
      margin: 0;
      position: sticky;
      top: 110px;
    }

    .report-cover img {
      width: 100%;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      display: block;
      background: var(--dark-secondary);
      aspect-ratio: 3 / 4;
      object-fit: cover;
    }

    /* Some report covers are designed landscape (a slide-style title
       page) rather than portrait. Forcing 3:4 on those crops straight
       through the headline, so this sizes the box to the source image's
       own ratio instead — full cover visible, nothing cropped. */
    .report-cover img.report-cover-landscape {
      aspect-ratio: 900 / 496;
      object-fit: contain;
    }

    /* Empty cover: hatched placeholder rather than a broken image */
    .report-cover img:not([src]),
    .report-cover img[src=""] {
      background:
        repeating-linear-gradient(45deg,
          rgba(167, 139, 250, 0.06) 0 12px,
          rgba(167, 139, 250, 0.02) 12px 24px);
    }

    .report-cover figcaption {
      text-align: center;
      font-size: var(--text-sm);
      color: var(--text-muted);
      margin-top: var(--space-3);
    }

    @media (max-width: 860px) {
      .report-block,
      .report-block-reverse {
        /* minmax(0,...) stops a long CTA label forcing the track wider
           than the viewport; nowrap on .btn otherwise sets min-content */
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
      }

      .report-detail .btn {
        white-space: normal;
        text-align: center;
        width: 100%;
      }

      .report-cta-group {
        flex-direction: column;
        align-items: stretch;
      }

      .report-block-reverse .report-detail { order: 1; }
      .report-block-reverse .report-cover { order: 2; }

      .report-cover {
        position: static;
        max-width: 280px;
        margin: 0 auto;
      }
    }


    .trusted-heading {
      text-align: center;
      color: var(--text-muted);
      font-size: var(--text-sm);
      letter-spacing: 0.08em;
      margin-bottom: var(--space-8);
    }

    .trusted-logo-text {
      font-weight: 600;
      color: var(--text-light);
      font-size: var(--text-sm);
      text-align: center;
    }

    a.trusted-logo {
      text-decoration: none;
    }

    .report-cta-group {
      display: flex;
      gap: var(--space-4);
      flex-wrap: wrap;
      align-items: center;
    }


    /* Line icons — monochrome, inherit the accent colour */
    .card-icon svg {
      width: 30px;
      height: 30px;
      color: var(--accent);
      display: block;
      opacity: 0.9;
    }

    .card:hover .card-icon svg {
      opacity: 1;
    }

    .grid-5 {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: var(--space-6);
    }

    @media (max-width: 1200px) {
      .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 860px) {
      .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

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


    /* Mirrored testimonial: image on the right */
    .testimonial-reverse .testimonial-content {
      grid-template-columns: 1fr auto;
    }

    .testimonial-reverse .testimonial-image { order: 2; }
    .testimonial-reverse .testimonial-text  { order: 1; }

    @media (max-width: 768px) {
      /* Stack in the same reading order as the first testimonial */
      .testimonial-reverse .testimonial-content {
        grid-template-columns: 1fr;
      }

      .testimonial-reverse .testimonial-image { order: 1; }
      .testimonial-reverse .testimonial-text  { order: 2; }
    }


    /* Centred flex row, not a rigid grid: with six logos a grid left
       an orphan on its own left-aligned row. Flex wraps and centres
       whatever doesn't fit. */
    .partners-logos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: var(--space-8) var(--space-12);
      /* Six logos across one row reads cramped and 5+1 looks accidental.
         Constraining the width forces a deliberate 3 + 3. */
      max-width: 760px;
      margin: 0 auto;
    }

    /* Plain logos: no card chrome. width:auto is required — the base
       .partner-logo sets width:100%, which is fine in a grid cell but
       forces one item per line inside a flex row. */
    .partners-logos .partner-logo {
      min-height: auto;
      width: auto;
      flex: 0 0 auto;
      padding: var(--space-2) var(--space-4);
      background: none;
      border: none;
      border-radius: 0;
    }

    .partners-logos .partner-logo:hover {
      border: none;
      box-shadow: none;
    }

    .partners-logos .partner-logo img {
      max-width: 100%;
      height: auto;
      display: block;
      opacity: 0.72;
      transition: opacity 0.3s;
    }

    .partners-logos .partner-logo:hover img { opacity: 1; }

    /* ---- WHAT WE DO: stacked alternating rows ---- */
    .focus-rows {
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
      max-width: 980px;
      margin: 0 auto;
    }

    .focus-row {
      display: grid;
      grid-template-columns: 132px 1fr;
      gap: var(--space-8);
      align-items: center;
      background: var(--dark-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-8);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .focus-row:hover {
      border-color: var(--accent);
      box-shadow: 0 18px 38px rgba(167, 139, 250, 0.1);
      transform: translateY(-3px);
    }

    .focus-row-reverse {
      grid-template-columns: 1fr 132px;
    }

    .focus-row-reverse .focus-visual { order: 2; }
    .focus-row-reverse .focus-body   { order: 1; }

    .focus-visual {
      width: 132px;
      height: 132px;
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 30% 30%, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0.04));
      border: 1px solid rgba(167, 139, 250, 0.22);
    }

    .focus-visual svg {
      width: 54px;
      height: 54px;
      color: var(--accent);
    }

    .focus-body h3 {
      font-size: var(--text-xl);
      margin-bottom: var(--space-3);
    }

    .focus-body p {
      color: var(--text-light);
      line-height: 1.8;
      margin-bottom: var(--space-4);
    }

    .focus-points {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--space-2);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-6);
    }

    .focus-points li {
      color: var(--text-muted);
      font-size: var(--text-sm);
      padding-left: 1.15rem;
      position: relative;
    }

    .focus-points li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.55em;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
    }

    @media (max-width: 720px) {
      .focus-row,
      .focus-row-reverse {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: var(--space-6);
      }

      /* Same reading order both ways once stacked */
      .focus-row-reverse .focus-visual { order: 1; }
      .focus-row-reverse .focus-body   { order: 2; }

      .focus-visual {
        width: 92px;
        height: 92px;
      }

      .focus-visual svg { width: 40px; height: 40px; }

      .focus-points {
        flex-direction: column;
        gap: var(--space-2);
      }
    }


    /* Women hero: brighter photo (lit screens, windows) and a taller
       block of copy, so the scrim runs wider and deeper than the home one. */
    #women .hero-background::after {
      background:
        linear-gradient(90deg,
          rgba(10, 10, 10, 0.95) 0%,
          rgba(10, 10, 10, 0.90) 45%,
          rgba(10, 10, 10, 0.72) 75%,
          rgba(10, 10, 10, 0.58) 100%),
        linear-gradient(180deg,
          rgba(10, 10, 10, 0.60) 0%,
          rgba(10, 10, 10, 0.35) 40%,
          rgba(10, 10, 10, 0.65) 100%);
    }

    #women .hero-background img {
      object-position: 70% center;
    }

    @media (max-width: 860px) {
      #women .hero-background::after {
        background: rgba(10, 10, 10, 0.85);
      }
    }

    /* TIMELINE */
    .timeline {
      position: relative;
      padding: 2rem 0;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, var(--accent), transparent);
    }

    .timeline-item {
      margin-bottom: 3rem;
      position: relative;
    }

    /* Alternating left-right layout */
    .timeline-item:nth-child(odd) {
      padding-right: calc(50% + 2rem);
      text-align: right;
    }

    .timeline-item:nth-child(even) {
      padding-left: calc(50% + 2rem);
      text-align: left;
    }

    .timeline-item::before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      width: 16px;
      height: 16px;
      background: var(--accent);
      border: 3px solid var(--dark);
      border-radius: 50%;
      z-index: 2;
    }

    .timeline-content {
      background: rgba(167, 139, 250, 0.05);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      padding: 2rem;
      border-radius: 8px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .timeline-item:nth-child(even) .timeline-content {
      border-left: none;
      border-right: 3px solid var(--accent);
    }

    .timeline-content:hover {
      background: rgba(167, 139, 250, 0.1);
      box-shadow: 0 20px 50px rgba(167, 139, 250, 0.15);
      transform: translateY(-4px);
    }

    .timeline-year {
      font-size: var(--text-2xl);
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0.5rem;
    }

    .timeline-title {
      font-size: var(--text-lg);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.5rem;
    }

    .timeline-description {
      color: var(--text-light);
      font-size: var(--text-base);
      line-height: 1.6;
    }

    /* Mobile: single column timeline */
    @media (max-width: 768px) {
      .timeline::before {
        left: 20px;
      }

      .timeline-item {
        padding-left: 80px;
        padding-right: 0;
        text-align: left;
      }

      .timeline-item::before {
        left: 20px;
      }

      .timeline-content {
        border-left: 3px solid var(--accent);
      }

      .timeline-item:nth-child(even) .timeline-content {
        border-right: none;
        border-left: 3px solid var(--accent);
      }
    }

    /* FAQ */
    .faq-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--space-8);
      margin: 2rem 0;
    }

    .faq-item {
      background: var(--dark-secondary);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 2rem;
      transition: all 0.3s ease;
    }

    .faq-item:hover {
      border-color: var(--accent);
      box-shadow: 0 10px 25px rgba(167, 139, 250, 0.1);
    }

    .faq-item h4 {
      color: var(--text);
      margin-bottom: 0.75rem;
      font-size: var(--text-lg);
    }

    .faq-item p {
      color: var(--text-light);
      font-size: var(--text-base);
      line-height: 1.5;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--space-8);
      margin: 2rem 0;
    }

    .faq-item {
      padding: 1.5rem;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--dark-secondary);
      transition: all 0.3s;
    }

    .faq-item:hover {
      border-color: var(--accent);
      background: rgba(167, 139, 250, 0.05);
    }

    .faq-item h4 {
      color: var(--accent);
      margin-bottom: 0.75rem;
    }

    .faq-item p {
      color: var(--text-light);
      line-height: 1.6;
    }

    /* STAT BOXES */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-8);
    }

    .stat-box {
      padding: 2.5rem 2rem;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: transparent;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .stat-box:hover {
      background: rgba(167, 139, 250, 0.05);
      border-color: var(--accent);
      transform: translateY(-2px);
    }

    .stat-number {
      font-size: var(--text-3xl);
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0.5rem;
    }

    .stat-label {
      color: var(--text-light);
      font-size: var(--text-sm);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* SECTION HEADERS */
    .section-header {
      text-align: center;
      margin-bottom: 4rem;
    }

    .section-header h2 {
      margin-bottom: 1rem;
    }

    .section-header p {
      max-width: 600px;
      margin: 0 auto;
      color: var(--text-muted);
      font-size: var(--text-lg);
    }

    /* FOOTER */
    footer {
      background: var(--dark-secondary);
      border-top: 1px solid var(--border);
      padding: 2.25rem 1.5rem 1.5rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.25rem var(--space-8);
      margin-bottom: 1.5rem;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

    .footer-column h3 {
      color: var(--text);
      margin-bottom: 0.6rem;
      font-size: var(--text-base);
    }

    .footer-column p {
      font-size: var(--text-sm);
      color: var(--text-muted);
      margin-bottom: 0;
    }

    .footer-column a {
      display: block;
      margin-bottom: 0.45rem;
      color: var(--text-muted);
      text-decoration: none;
      font-size: var(--text-sm);
      transition: color 0.3s;
    }

    .footer-column a:hover {
      color: var(--accent);
    }

    .footer-bottom {
      text-align: center;
      padding-top: 1.25rem;
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-size: var(--text-sm);
      max-width: 1200px;
      margin: 0 auto;
    }

    /* PAGE CONTAINER */
    .page {
      display: none;
    }

    .page.active {
      display: block;
    }

    /* TRUSTED BY */
    .trusted-section {
      background: var(--dark-secondary);
      padding: 3rem 1.5rem;
    }

    .trusted-logos {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--space-8) var(--space-12);
      flex-wrap: wrap;
    }

    .trusted-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      /* no min-width: the files are already optically balanced, and a
         fixed minimum forced a sixth logo onto its own row */
      opacity: 0.7;
      transition: opacity 0.3s;
    }

    .trusted-logo img {
      /* Files are pre-scaled and optically balanced, so render at
         intrinsic size rather than forcing a uniform box. */
      max-width: 100%;
      height: auto;
      display: block;
      /* The source logos are dark monochrome artwork; on the near-black
         section they're invisible. Render them as clean white marks so
         the social proof actually reads. */
      filter: brightness(0) invert(1);
    }

    .trusted-logo:hover {
      opacity: 1;
    }

    /* RESPONSIVE */
    @media (max-width: 1024px) {
      section {
        padding: 4rem 1.5rem;
      }
    }

    @media (max-width: 768px) {
      .nav-menu {
        gap: var(--space-4);
        font-size: var(--text-sm);
      }

      .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
      }

      section {
        padding: 3rem 1.5rem;
      }

      h1 {
        font-size: var(--text-3xl);
      }

      h2 {
        font-size: var(--text-2xl);
      }

      .trusted-logos {
        gap: var(--space-6);
      }

      .hero-image {
        aspect-ratio: auto;
        min-height: 300px;
      }
    }

    /* FINAL POLISH - Animations & Visual Refinements */

    /* Smooth page transitions */
    .page {
      animation: fadeIn 0.3s ease-in-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    /* Enhanced card depth on hover */
    .card:hover,
    .feature-item:hover,
    .timeline-content:hover {
      box-shadow: 0 20px 50px rgba(167, 139, 250, 0.15);
    }

    /* Subtle text selection highlight */
    ::selection {
      background: rgba(167, 139, 250, 0.3);
      color: var(--text);
    }

    /* Link styling consistency */
    a {
      color: var(--accent);
      text-decoration: none;
      transition: color 0.2s;
    }

    a:hover {
      color: var(--accent-light);
    }

    /* Badge animations */
    .badge {
      animation: slideDown 0.5s ease-out;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Section header emphasis */
    .section-header {
      position: relative;
    }

    .section-header h2 {
      position: relative;
      display: inline-block;
    }

    .section-header h2::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 60px;
      height: 3px;
      background: var(--gradient);
      border-radius: 2px;
    }

    /* Improved form inputs (for contact form) */
    input,
    textarea {
      background: rgba(167, 139, 250, 0.03);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 1rem;
      border-radius: 8px;
      font-family: inherit;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    input:focus,
    textarea:focus {
      outline: none;
      background: rgba(167, 139, 250, 0.1);
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1);
    }

    textarea {
      resize: vertical;
      min-height: 120px;
    }

    /* Label styling */
    label {
      display: block;
      margin-bottom: 0.5rem;
      color: var(--text-light);
      font-weight: 500;
      font-size: var(--text-sm);
    }

    /* Form group spacing */
    .form-group {
      margin-bottom: 1.5rem;
    }

    .form-group:last-child {
      margin-bottom: 2rem;
    }

    /* Icon size consistency */
    .card-icon {
      display: inline-block;
    }

    /* Container max-width for very large screens */
    @media (min-width: 1400px) {
      .container {
        max-width: 1200px;
      }
    }

    /* Accessibility: Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }