/* ============================================================
       DESIGN TOKENS
    ============================================================ */
    :root {
      --navy:        #0A1628;
      --charcoal:    #111827;
      --gold:        #C9A84C;
      --amber:       #E8B84B;
      --white:       #F8F9FA;
      --silver:      #9CA3AF;
      --crimson:     #7B1D1D;
      --footer-bg:   #0A0F1A;

      --gold-rgb: 201, 168, 76;
      --amber-rgb: 232, 184, 75;
      --gold-grad: linear-gradient(135deg, #8a6f2d 0%, #C9A84C 28%, #F2DC9B 50%, #C9A84C 72%, #8a6f2d 100%);
      --gold-line: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.85), transparent);

      --f-display: 'Cinzel', 'Times New Roman', serif;
      --f-head:    'Raleway', system-ui, sans-serif;
      --f-body:    'Inter', system-ui, sans-serif;

      --maxw: 1200px;
      --radius: 14px;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ============================================================
       RESET
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
    body {
      font-family: var(--f-body);
      background: var(--navy);
      color: var(--white);
      line-height: 1.65;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    ul { list-style: none; }

    /* ============================================================
       FIRE MOUSE TRAIL CANVAS
    ============================================================ */
    #fireCanvas {
      position: fixed; inset: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 9998;
    }

    /* ============================================================
       SHARED UTILITIES
    ============================================================ */
    .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

    .section { position: relative; padding: 110px 0; overflow: hidden; }
    .section--navy     { background: var(--navy); }
    .section--charcoal { background: var(--charcoal); }

    .tri-watermark::before {
      content: "";
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='1'%3E%3Cpath d='M60 4 L116 100 L4 100 Z'/%3E%3Cpath d='M60 36 L88 100 L32 100 Z'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 120px 104px;
      opacity: 0.04;
      pointer-events: none;
      z-index: 0;
    }
    .section > .wrap { position: relative; z-index: 1; }

    .gold-rule {
      height: 1px; border: 0; width: 100%;
      background: var(--gold-line);
      box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.5);
      opacity: 0.9;
    }

    .pre-label {
      font-family: var(--f-display);
      text-transform: uppercase;
      letter-spacing: 0.32em;
      color: var(--gold);
      font-weight: 600;
      font-size: 0.82rem;
      display: inline-flex; align-items: center; gap: 14px;
      margin-bottom: 22px;
    }
    .pre-label::before, .pre-label::after {
      content: ""; width: 34px; height: 1px;
      background: rgba(var(--gold-rgb), 0.6);
    }
    .pre-label--left::before { display: none; }

    .section-head { font-family: var(--f-display); color: var(--white); font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; font-size: clamp(2rem, 4.2vw, 3.2rem); }
    .section-sub { font-family: var(--f-head); color: var(--silver); font-weight: 400; font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 720px; }

    .center { text-align: center; }
    .center .pre-label { justify-content: center; }
    .center .section-sub { margin-left: auto; margin-right: auto; }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      font-family: var(--f-head); font-weight: 700;
      letter-spacing: 0.04em; font-size: 0.98rem;
      padding: 16px 34px; border-radius: 50px;
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
      will-change: transform;
    }
    .btn--gold {
      background: linear-gradient(135deg, var(--gold), var(--amber));
      color: #1a1206;
      box-shadow: 0 8px 26px rgba(var(--gold-rgb), 0.28);
    }
    .btn--gold:hover { transform: translateY(-2px) scale(1.035); box-shadow: 0 12px 40px rgba(var(--amber-rgb), 0.55); }
    .btn--outline { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); }
    .btn--outline:hover { background: var(--gold); color: #1a1206; box-shadow: 0 10px 30px rgba(var(--gold-rgb), 0.35); }

    /* ============================================================
       3D BADGE LOGO
    ============================================================ */
    @keyframes flameFlicker {
      0%, 100% { opacity: 0.86; transform: translateY(0) scale(1); }
      45%      { opacity: 1;    transform: translateY(-0.5px) scale(1.04); }
      70%      { opacity: 0.92; transform: translateY(0.3px) scale(0.98); }
    }
    .badge { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55)); }
    .badge svg { display: block; }
    .badge .flame { transform-origin: center bottom; animation: flameFlicker 2s ease-in-out infinite; }
    .badge-text {
      font-family: var(--f-display); font-weight: 700;
      letter-spacing: 0.02em; line-height: 1;
      background: var(--gold-grad);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    }
    .badge--nav .badge-text { font-size: 0.72rem; }
    .badge--lg .badge-text { font-size: 1rem; }

    /* ============================================================
       NAVIGATION
    ============================================================ */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
      background: transparent; border-bottom: 1px solid transparent;
      padding: 18px 0;
    }
    .nav.scrolled {
      background: rgba(10, 22, 40, 0.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(var(--gold-rgb), 0.45);
      box-shadow: 0 8px 30px rgba(0,0,0,0.4);
      padding: 10px 0;
    }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .nav-logo { flex-shrink: 0; }

    .nav-links { display: flex; align-items: center; gap: 34px; }
    .nav-links a {
      position: relative; font-family: var(--f-head); font-weight: 500;
      letter-spacing: 0.08em; font-size: 0.92rem; color: var(--white);
      padding: 4px 0; transition: color .25s var(--ease);
    }
    .nav-links a::after {
      content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
      background: linear-gradient(90deg, var(--gold), var(--amber));
      transition: width .3s var(--ease);
    }
    .nav-links a:hover { color: var(--amber); }
    .nav-links a:hover::after { width: 100%; }

    .nav-cta { flex-shrink: 0; }
    .nav-cta .btn { padding: 11px 26px; font-size: 0.88rem; }

    .hamburger { display: none; flex-direction: column; gap: 6px; padding: 8px; }
    .hamburger span { width: 28px; height: 2px; background: var(--gold); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s var(--ease); }

    .mobile-nav {
      position: fixed; inset: 0; z-index: 1100;
      background: linear-gradient(160deg, var(--navy), #060d18);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
      opacity: 0; visibility: hidden; transform: scale(1.04);
      transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
    }
    .mobile-nav.open { opacity: 1; visibility: visible; transform: scale(1); }
    .mobile-nav a { font-family: var(--f-display); font-size: 1.5rem; color: var(--white); letter-spacing: 0.06em; transition: color .25s; }
    .mobile-nav a:hover { color: var(--gold); }
    .mobile-nav .btn { margin-top: 10px; }
    .mobile-close { position: absolute; top: 24px; right: 26px; font-size: 2.2rem; color: var(--gold); line-height: 1; }

    /* ============================================================
       HERO
    ============================================================ */
    .hero {
      min-height: 92vh; display: flex; align-items: center; justify-content: center;
      text-align: center; position: relative; padding: 150px 0 90px;
      background: var(--navy);
    }
    .hero::after {
      content: ""; position: absolute; left: 50%; bottom: -10%; transform: translateX(-50%);
      width: 1100px; height: 700px; pointer-events: none; z-index: 0;
      background: radial-gradient(ellipse at center, rgba(var(--amber-rgb), 0.16), rgba(var(--gold-rgb), 0.06) 40%, transparent 70%);
      filter: blur(8px);
    }
    .hero .wrap { position: relative; z-index: 2; }
    .hero-pre { font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.4em; color: var(--gold); font-weight: 600; font-size: 0.9rem; margin-bottom: 28px; }
    .hero h1 {
      font-family: var(--f-display); font-weight: 800; color: var(--white);
      font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1.08; letter-spacing: 0.01em;
      margin-bottom: 26px; text-shadow: 0 4px 40px rgba(0,0,0,0.5);
    }
    .hero h1 .accent { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .hero-sub { font-family: var(--f-head); color: var(--silver); font-weight: 400; font-size: clamp(1.05rem, 2vw, 1.35rem); max-width: 680px; margin: 0 auto 40px; }
    .hero-cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
    .scroll-ind { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); color: var(--gold); z-index: 2; }
    @keyframes bounceDown { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%, 12px);} }
    .scroll-ind { animation: bounceDown 2.2s ease-in-out infinite; }
    .scroll-ind svg { width: 30px; height: 30px; opacity: 0.85; }

    /* ============================================================
       FOUNDERS  (FOCAL POINT: editorial spotlight rows)
    ============================================================ */
    .founders-intro { max-width: 760px; margin: 0 auto; }

    /* Founders: side-by-side profile cards */
    .founders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 60px; align-items: start; }
    @media (max-width: 840px) { .founders-grid { gap: 18px; } }

    .founder-card {
      position: relative; text-align: center;
      display: flex; flex-direction: column; align-items: center;
      padding: 40px 32px 34px; border-radius: var(--radius);
      /* soft pool of darkness behind the words for legibility over the photo (not a hard box) */
      background: radial-gradient(125% 105% at 50% 8%, rgba(8,16,30,0.34), rgba(7,14,26,0.72));
      -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
      border: 1px solid rgba(var(--gold-rgb), 0.10);
      box-shadow: 0 24px 60px rgba(0,0,0,0.42);
    }

    .founder-media { position: relative; display: flex; justify-content: center; margin-bottom: 22px; }
    .founder-media::after {
      content: ""; position: absolute; inset: -14% -14%;
      background: radial-gradient(ellipse at center, rgba(var(--amber-rgb),0.20), transparent 64%);
      z-index: 0; filter: blur(6px);
    }
    .photo-ring {
      position: relative; z-index: 1; width: 200px; max-width: 58vw; aspect-ratio: 1;
      border-radius: 50%; overflow: hidden;
      border: 3px solid var(--gold);
      box-shadow: 0 0 0 7px rgba(var(--gold-rgb),0.10), 0 18px 44px rgba(0,0,0,0.55);
    }
    /* Light editorial grade on the REAL photo: does not alter likeness */
    .photo-ring img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      filter: contrast(1.06) saturate(0.92) brightness(1.02);
    }
    /* Edwin's source photo is square with a second person in the lower-left; zoom to frame Edwin */
    .photo-ring--edwin img { transform: scale(1.5); transform-origin: 64% 30%; }
    .photo-ring::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(180deg, rgba(201,168,76,0.10), transparent 45%, rgba(10,22,40,0.30));
      mix-blend-mode: soft-light;
    }

    .founder-name { font-family: var(--f-display); font-weight: 700; color: var(--white); font-size: clamp(1.7rem, 3vw, 2.1rem); line-height: 1.1; margin-bottom: 16px; }
    .founder-bio { font-family: var(--f-body); color: #cfd8e6; font-size: 0.96rem; line-height: 1.72; }
    .badge-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0 0 22px; }
    .pill {
      font-family: var(--f-head); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em;
      color: var(--gold); border: 1px solid rgba(var(--gold-rgb), 0.6);
      padding: 7px 15px; border-radius: 50px; background: rgba(var(--gold-rgb), 0.06);
    }
    /* Title shown first, as a filled bubble */
    .pill--title { color: #1a1206; background: var(--gold-grad); border-color: transparent; font-weight: 700; }
    .founders-cta { text-align: center; margin-top: 64px; }
    .founders-cta .btn { margin: 0 8px 12px; }

    /* Tap-to-open bio toggle (mobile only; hidden on desktop) */
    .bio-toggle {
      display: none; align-items: center; gap: 7px; cursor: pointer;
      margin: 2px auto 0;
      font-family: var(--f-head); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.06em;
      color: var(--gold); background: rgba(var(--gold-rgb), 0.06);
      border: 1px solid rgba(var(--gold-rgb), 0.5); padding: 7px 16px; border-radius: 50px;
      transition: background .25s var(--ease), color .25s var(--ease);
    }
    .bio-toggle::after { content: "▾"; font-size: 0.7rem; transition: transform .3s var(--ease); }
    .bio-toggle:hover { background: var(--gold); color: #1a1206; }
    .founder-card.bio-open .bio-toggle::after { transform: rotate(180deg); }

    /* ============================================================
       WATCH OUR STORY  (redesigned: split layout)
    ============================================================ */
    .story-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; margin-top: 24px; }
    .story-copy .section-head { font-size: clamp(1.7rem, 3vw, 2.4rem); }
    .story-copy p { color: var(--silver); font-family: var(--f-head); margin: 20px 0 30px; font-size: 1.08rem; }

    .video-frame {
      position: relative; z-index: 1; border-radius: 12px; overflow: hidden;
      border: 2px solid var(--gold);
      box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--gold-rgb),0.2);
      aspect-ratio: 16 / 9; background: #000;
    }
    .video-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
    .video-glow { position: relative; }
    .video-glow::before {
      content: ""; position: absolute; inset: -8%;
      background: radial-gradient(ellipse at center, rgba(var(--amber-rgb), 0.15), transparent 68%);
      filter: blur(20px); z-index: 0; pointer-events: none;
    }

    /* ============================================================
       PROGRAMS
    ============================================================ */
    .course-box { display: block; width: clamp(190px, 24vw, 250px); margin: 40px auto 0; filter: drop-shadow(0 26px 50px rgba(0,0,0,0.55)) drop-shadow(0 0 34px rgba(var(--gold-rgb),0.28)); animation: boxFloat 5.5s ease-in-out infinite; }
    @keyframes boxFloat { 0%,100% { transform: translateY(0) rotate(-0.4deg); } 50% { transform: translateY(-12px) rotate(0.4deg); } }
    .programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 56px; align-items: start; }
    .program-card {
      position: relative; background: var(--charcoal); border-radius: var(--radius);
      border: 1px solid rgba(var(--gold-rgb), 0.16); padding: 40px 30px 34px;
      display: flex; flex-direction: column;
      transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
    }
    .program-card:hover { transform: translateY(-8px); border-color: rgba(var(--gold-rgb), 0.5); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
    .program-card.featured {
      border-color: var(--gold);
      box-shadow: 0 0 0 1px var(--gold), 0 26px 72px rgba(var(--gold-rgb), 0.24);
      background: linear-gradient(180deg, #16203a, var(--charcoal) 55%);
      transform: translateY(-12px) scale(1.025); z-index: 2;
    }
    .program-card.featured:hover { transform: translateY(-18px) scale(1.025); }
    @media (max-width: 960px) { .program-card.featured, .program-card.featured:hover { transform: none; } }

    .card-badge { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 18px; }
    .program-name { font-family: var(--f-display); font-weight: 700; color: var(--white); font-size: 1.7rem; margin-bottom: 14px; }
    .program-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; }
    .program-price .amount { font-family: var(--f-display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--gold); }
    .program-price .term { font-size: 0.8rem; color: var(--silver); letter-spacing: 0.04em; }
    .program-price-note { font-size: 0.78rem; color: var(--silver); margin: 0 0 18px; }
    .program-price { font-family: var(--f-display); color: var(--white); font-size: 2.6rem; font-weight: 700; line-height: 1; }
    .program-price .cur { font-size: 1.3rem; vertical-align: super; color: var(--gold); }
    .finance-note { font-family: var(--f-body); color: var(--silver); font-size: 0.85rem; margin-top: 6px; margin-bottom: 24px; }
    .feat-divider { height: 1px; background: rgba(var(--gold-rgb), 0.18); margin: 0 0 22px; }
    .feat-list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 30px; flex: 1; }
    .feat-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.94rem; color: var(--white); line-height: 1.5; }
    .feat-list li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; fill: var(--gold); }
    .program-card .btn { width: 100%; }

    /* Next Level — À la carte offerings */
    .offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; align-items: stretch; }
    .offer-card {
      position: relative; background: var(--charcoal); border-radius: var(--radius);
      border: 1px solid rgba(var(--gold-rgb), 0.16); padding: 28px 24px 26px;
      display: flex; flex-direction: column;
      transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
    }
    .offer-card:hover { transform: translateY(-8px); border-color: rgba(var(--gold-rgb), 0.5); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
    .offer-num {
      font-family: var(--f-display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.06em;
      color: var(--gold); background: rgba(var(--gold-rgb), 0.10); border: 1px solid rgba(var(--gold-rgb), 0.28);
      min-width: 44px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px; margin-bottom: 18px; align-self: flex-start;
    }
    .offer-name { font-family: var(--f-display); font-weight: 700; color: var(--white); font-size: 1.18rem; margin-bottom: 12px; line-height: 1.25; }
    .offer-desc { font-family: var(--f-body); color: var(--silver); font-size: 0.9rem; line-height: 1.55; margin-bottom: 24px; flex: 1; }
    .offer-card .btn { width: 100%; padding: 13px 20px; font-size: 0.9rem; }
    @media (max-width: 1080px) { .offer-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 820px)  { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px)  { .offer-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } }

    /* Free Downloads */
    .dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 60px; max-width: 880px; margin-left: auto; margin-right: auto; align-items: stretch; }
    .dl-card {
      position: relative; background: var(--charcoal); border-radius: var(--radius);
      border: 1px solid rgba(var(--gold-rgb), 0.16); padding: 38px 32px 32px;
      display: flex; flex-direction: column; text-align: left;
      transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
    }
    .dl-card:hover { transform: translateY(-8px); border-color: rgba(var(--gold-rgb), 0.5); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
    .dl-icon {
      width: 58px; height: 58px; border-radius: 14px; margin-bottom: 22px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(var(--gold-rgb), 0.1); border: 1px solid rgba(var(--gold-rgb), 0.28);
    }
    .dl-icon svg { width: 30px; height: 30px; stroke: var(--gold); fill: none; }
    .dl-tag { font-family: var(--f-display); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 12px; }
    .dl-title { font-family: var(--f-display); font-weight: 700; color: var(--white); font-size: 1.4rem; line-height: 1.25; margin-bottom: 12px; }
    .dl-desc { font-family: var(--f-body); color: var(--silver); font-size: 0.96rem; line-height: 1.55; margin-bottom: 28px; flex: 1; }
    .dl-card .btn { width: 100%; }
    @media (max-width: 720px) { .dl-grid { grid-template-columns: 1fr; } }

    .ribbon {
      position: absolute; top: 18px; right: -8px; z-index: 3;
      background: linear-gradient(135deg, var(--gold), var(--amber));
      color: #1a1206; font-family: var(--f-head); font-weight: 700; font-size: 0.72rem;
      letter-spacing: 0.12em; padding: 6px 16px; border-radius: 4px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    }
    .ribbon::after { content: ""; position: absolute; right: 0; bottom: -7px; border-width: 0 8px 7px 0; border-style: solid; border-color: transparent #8a6f2d transparent transparent; }

    .chat-callout {
      position: fixed; right: 22px; bottom: 22px; z-index: 900;
      display: inline-flex; align-items: center; gap: 10px;
      background: linear-gradient(135deg, var(--gold), var(--amber)); color: #1a1206;
      font-family: var(--f-head); font-weight: 700; font-size: 0.9rem;
      padding: 14px 22px; border-radius: 50px; box-shadow: 0 12px 34px rgba(var(--gold-rgb),0.4);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    }
    .chat-callout:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 44px rgba(var(--amber-rgb),0.55); }
    .chat-callout svg { width: 20px; height: 20px; fill: #1a1206; }

    /* ============================================================
       TESTIMONIALS CAROUSEL
    ============================================================ */
    .carousel { position: relative; max-width: 820px; margin: 56px auto 0; }
    .carousel-track { position: relative; min-height: 280px; }
    .testi-card {
      position: absolute; inset: 0; opacity: 0; visibility: hidden;
      transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease);
      background: var(--charcoal); border: 1px solid rgba(var(--gold-rgb),0.2);
      border-radius: var(--radius); padding: 48px 50px; text-align: center;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .testi-card.active { opacity: 1; visibility: visible; transform: translateY(0); position: relative; }
    .testi-quote-mark { font-family: var(--f-display); font-size: 4.5rem; line-height: 0.6; color: var(--gold); opacity: 0.8; margin-bottom: 14px; }
    .testi-stars { color: var(--gold); letter-spacing: 4px; font-size: 1.1rem; margin-bottom: 20px; }
    .testi-text { font-family: var(--f-head); font-style: italic; color: var(--white); font-size: 1.3rem; line-height: 1.6; max-width: 620px; margin-bottom: 22px; }
    .testi-name { font-family: var(--f-display); color: var(--gold); font-weight: 600; letter-spacing: 0.04em; }

    .carousel-arrows { display: flex; justify-content: center; gap: 14px; margin-top: 26px; }
    .c-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(var(--gold-rgb),0.5); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; transition: all .25s var(--ease); }
    .c-arrow:hover { background: var(--gold); color: #1a1206; }
    .c-arrow svg { width: 18px; height: 18px; }
    .carousel-dots { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
    .carousel-dots button { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--gold-rgb),0.3); transition: all .25s var(--ease); }
    .carousel-dots button.active { background: var(--gold); width: 26px; border-radius: 6px; }

    /* ============================================================
       COMPARISON TABLE
    ============================================================ */
    .table-wrap { margin-top: 56px; overflow-x: auto; border-radius: var(--radius); border: 1px solid rgba(var(--gold-rgb),0.2); }
    table.compare { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--charcoal); }
    table.compare thead th {
      position: sticky; top: 0; z-index: 2;
      background: linear-gradient(180deg, #16203a, var(--navy));
      font-family: var(--f-display); color: var(--gold); font-weight: 700;
      padding: 20px 18px; text-align: center; font-size: 0.95rem; letter-spacing: 0.04em;
      border-bottom: 2px solid rgba(var(--gold-rgb),0.4);
    }
    table.compare thead th:first-child { text-align: left; }
    table.compare tbody td { padding: 16px 18px; text-align: center; font-size: 0.92rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
    table.compare tbody td:first-child { text-align: left; color: var(--white); font-weight: 500; font-family: var(--f-head); }
    table.compare tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.018); }
    table.compare tbody tr:hover td { background: rgba(var(--gold-rgb), 0.06); }
    .check, .yes { color: #46c46a; font-size: 1.2rem; font-weight: 700; }
    .dash, .no  { color: #d4564b; font-size: 1.08rem; font-weight: 700; }

    /* Column emphasis steps up 1 -> 2 -> 3 (Beginner < Perfect Pitch < Complete) */
    table.compare thead th:nth-child(2) { font-size: 0.9rem; }
    table.compare thead th:nth-child(3) { font-size: 1.02rem; }
    table.compare thead th:nth-child(4) { font-size: 1.16rem; color: var(--amber); border-top: 3px solid var(--gold); }
    .col-tag { display: block; font-family: var(--f-head); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--gold); margin-top: 5px; text-transform: uppercase; font-weight: 700; }
    /* placed after striping/hover so source-order wins the specificity tie */
    table.compare tbody tr td:nth-child(3) { background: rgba(var(--gold-rgb), 0.045); }
    table.compare tbody tr td:nth-child(4) {
      background: rgba(var(--gold-rgb), 0.10);
      border-left: 1px solid rgba(var(--gold-rgb), 0.45);
      border-right: 1px solid rgba(var(--gold-rgb), 0.45);
    }
    table.compare tbody tr:hover td:nth-child(4) { background: rgba(var(--gold-rgb), 0.16); }
    table.compare thead th:nth-child(4) { background: linear-gradient(180deg, #1c2a17, #16203a); }
    table.compare tbody tr:last-child td:nth-child(4) { border-bottom: 2px solid rgba(var(--gold-rgb), 0.5); }

    /* ============================================================
       FAQ ACCORDION
    ============================================================ */
    .faq-list { max-width: 820px; margin: 52px auto 0; display: flex; flex-direction: column; gap: 14px; }
    .faq-item { background: var(--charcoal); border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid transparent; border-radius: 10px; overflow: hidden; transition: border-color .35s var(--ease), background .35s var(--ease); }
    .faq-item.open { border-left-color: var(--gold); background: #141d30; }
    .faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; font-family: var(--f-head); font-weight: 600; font-size: 1.06rem; color: var(--white); }
    .faq-icon { flex-shrink: 0; width: 24px; height: 24px; position: relative; }
    .faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--gold); border-radius: 2px; }
    .faq-icon::before { top: 11px; left: 3px; width: 18px; height: 2px; }
    .faq-icon::after  { left: 11px; top: 3px; width: 2px; height: 18px; transition: transform .35s var(--ease); }
    .faq-item.open .faq-icon::after { transform: scaleY(0); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
    .faq-a-inner { padding: 0 26px 24px; color: var(--silver); font-family: var(--f-body); font-size: 0.98rem; line-height: 1.75; }

    /* ============================================================
       FINAL CTA
    ============================================================ */
    .final-cta { text-align: center; position: relative; }
    .final-cta::after {
      content: ""; position: absolute; left: 50%; bottom: -30%; transform: translateX(-50%);
      width: 1000px; height: 640px; pointer-events: none; z-index: 0;
      background: radial-gradient(ellipse at center, rgba(var(--amber-rgb),0.18), rgba(var(--gold-rgb),0.06) 42%, transparent 70%);
    }
    .final-cta .wrap { position: relative; z-index: 2; }
    .final-cta h2 { font-family: var(--f-display); color: var(--white); font-weight: 800; font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 22px; }

    /* ============================================================
       FOOTER
    ============================================================ */
    .footer { background: var(--footer-bg); padding: 64px 0 30px; position: relative; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; }
    .footer-tag { font-family: var(--f-head); color: var(--silver); font-size: 0.96rem; line-height: 1.7; margin-top: 20px; max-width: 340px; }
    .footer h4 { font-family: var(--f-display); color: var(--gold); font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; }
    .footer-links li { margin-bottom: 12px; }
    .footer-links a, .footer-contact a { font-family: var(--f-body); color: var(--white); font-size: 0.94rem; transition: color .25s; }
    .footer-links a:hover, .footer-contact a:hover { color: var(--gold); }
    .footer-bottom { margin-top: 50px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.07); text-align: center; }
    .footer-bottom p { color: var(--silver); font-size: 0.85rem; margin-bottom: 8px; }
    .footer-fine { color: #6b7280; font-size: 0.78rem; }

    /* ============================================================
       DECORATIONS: PATENT BLUEPRINT MOTIFS + INSPIRING IMAGERY
    ============================================================ */
    .deco { position: absolute; z-index: 0; pointer-events: none; }
    .bp { width: 230px; height: auto; color: var(--gold); opacity: 0.09; }
    .bp svg, .bp { display: block; }
    .bp use { color: var(--gold); }
    .bp.silver { color: var(--silver); opacity: 0.07; }
    .deco-left   { left: -36px; }
    .deco-right  { right: -36px; }
    .deco-top    { top: 70px; }
    .deco-mid    { top: 50%; transform: translateY(-50%); }
    .deco-mid-r  { top: 50%; transform: translateY(-50%) scaleX(-1); }
    .deco-bottom { bottom: 48px; }
    .deco-flip   { transform: scaleX(-1); }

    /* Inspiring stock photos tucked into genuine blank space (wide screens only) */
    .deco-photo {
      position: absolute; z-index: 0; pointer-events: none;
      width: 184px; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden;
      border: 2px solid rgba(var(--gold-rgb), 0.55);
      box-shadow: 0 20px 55px rgba(0,0,0,0.55);
    }
    .deco-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.06) brightness(0.9); }
    .deco-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(201,168,76,0.10), transparent 35%, rgba(10,22,40,0.55)); }

    /* Faded inspiring backdrop behind the final CTA */
    .cta-bgphoto { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
    .cta-bgphoto img { width: 100%; height: 100%; object-fit: cover; opacity: 0.12; filter: grayscale(0.25) contrast(1.1); }
    .cta-bgphoto::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10,22,40,0.4), var(--navy) 75%); }

    /* Subtle photos that blend into the section background (all sections except founders) */
    .bg-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --sec-bg: #0A1628; }
    .bg-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.16; filter: grayscale(0.25) contrast(1.05) brightness(0.85); }
    .bg-photo.r img { object-position: right center; }
    .bg-photo.l img { object-position: left center; }
    /* On-brand arena art reads richer than the faded stock treatment */
    .hero .bg-photo img { opacity: 0.34; object-position: center 40%; filter: grayscale(0.06) contrast(1.04) brightness(0.62); }
    .cta-bgphoto--arena img { opacity: 0.30; filter: grayscale(0.06) contrast(1.05) brightness(0.8); }
    .bg-photo--arena img { opacity: 0.22; filter: grayscale(0.04) contrast(1.04) brightness(0.78); }
    /* Brand logo used as a subtle on-brand watermark (navy/gold) */
    /* Founders: Ed & Scott photo as a banner behind the heading - faces flank the title, center logo masked out */
    .bg-photo--founders { bottom: auto; top: 48px; height: 540px; }
    .bg-photo--founders img { opacity: 0.5; object-fit: cover; object-position: center 30%; filter: contrast(1.04) brightness(0.95) blur(2px); }
    .bg-photo--founders::after {
      background:
        radial-gradient(46% 100% at 50% 44%, rgba(13,27,62,0.98) 28%, rgba(13,27,62,0.6) 56%, transparent 80%),
        linear-gradient(180deg, rgba(13,27,62,0.42), transparent 26%, transparent 50%, var(--sec-bg));
    }
    @media (max-width: 700px) { .bg-photo--founders { height: 400px; } }
    .bg-photo::after {
      content: ""; position: absolute; inset: 0;
      background:
        linear-gradient(180deg, var(--sec-bg), transparent 28%, transparent 72%, var(--sec-bg)),
        radial-gradient(ellipse at center, transparent 22%, var(--sec-bg) 90%);
    }

    @media (max-width: 1100px) { .bp { display: none; } }
    @media (max-width: 1480px) { .deco-photo { display: none; } } /* avoid overlap on laptops */

    /* ============================================================
       INVENTOR'S MAP / JOURNEY ROADMAP
    ============================================================ */
    /* ---- Community stats (Inventors Map) ---- */
    .stats-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-top: 48px; }
    .stat { flex: 1 1 200px; max-width: 260px; padding: 30px 24px; text-align: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(var(--gold-rgb), 0.25); border-top: 3px solid var(--gold); border-radius: 12px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
    .stat:hover { transform: translateY(-5px); border-color: rgba(var(--gold-rgb), 0.6); }
    .stat-num { font-family: var(--f-display); font-weight: 800; font-size: 2.8rem; line-height: 1; color: var(--gold); }
    .stat-label { display: block; margin-top: 10px; font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); }
    @media (max-width: 640px) { .stats-row { gap: 16px; } .stat { flex: 1 1 100%; max-width: 360px; padding: 22px 18px; } .stat-num { font-size: 2.2rem; } }

    .roadmap { background: linear-gradient(180deg, #0A1628, #0c1c34 50%, #0A1628); }
    .trail { position: relative; max-width: 900px; margin: 76px auto 0; }
    .trail-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
    .trail-path path { fill: none; stroke: rgba(var(--gold-rgb), 0.6); stroke-width: 2.5; stroke-dasharray: 1 10; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.5)); }
    .trail-list { position: relative; z-index: 1; list-style: none; padding-left: 0; margin: 0; }
    .trail-list::before { content: ""; display: none; }
    .stop { position: relative; width: 50%; padding: 0 50px; margin-bottom: 44px; box-sizing: border-box; }
    .stop:nth-child(odd)  { left: 0; }
    .stop:nth-child(even) { left: 50%; }
    .stop-marker {
      position: absolute; top: 4px; width: 52px; height: 52px; border-radius: 50%; z-index: 2;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; color: #1a1206;
      background: linear-gradient(135deg, var(--gold), var(--amber));
      box-shadow: 0 0 0 6px var(--navy), 0 0 0 8px rgba(var(--gold-rgb), 0.4), 0 10px 26px rgba(0,0,0,0.55);
    }
    .stop:nth-child(odd)  .stop-marker { right: -26px; }
    .stop:nth-child(even) .stop-marker { left: -26px; }
    .stop-card {
      background: var(--charcoal); border: 1px solid rgba(var(--gold-rgb), 0.2);
      border-top: 3px solid var(--gold); border-radius: 14px; padding: 24px 26px;
      box-shadow: 0 16px 44px rgba(0,0,0,0.42); transition: transform .4s var(--ease), border-color .4s var(--ease);
    }
    .stop-card:hover { transform: translateY(-5px); border-color: rgba(var(--gold-rgb), 0.55); }
    .stop-icon { width: 38px; height: 38px; color: var(--gold); margin-bottom: 12px; }
    .stop-era { display: block; font-family: var(--f-display); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
    .stop-card h3 { font-family: var(--f-display); color: var(--white); font-size: 1.32rem; margin-bottom: 8px; }
    .stop-card p { color: var(--silver); font-size: 0.92rem; line-height: 1.62; }
    .trail-end { text-align: center; margin-top: 14px; }
    .trail-note { font-family: var(--f-head); font-style: italic; color: var(--gold); margin-bottom: 22px; }

    @media (max-width: 760px) {
      .trail-path { display: none; }
      .trail-list::before { display: none; }
      .stop, .stop:nth-child(odd), .stop:nth-child(even) { width: 100%; left: 0; padding: 0; margin-bottom: 16px; }
      .stop .stop-marker, .stop:nth-child(odd) .stop-marker, .stop:nth-child(even) .stop-marker { display: none; }
      .trail { margin-top: 40px; }
      .stop-card { padding: 18px 20px; border-top-width: 2px; }
      .stop-icon { width: 30px; height: 30px; margin-bottom: 8px; }
      .stop-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
      .stop-card p { font-size: 0.9rem; line-height: 1.55; }
    }

    /* ============================================================
       SCROLL REVEAL
    ============================================================ */
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
    .reveal.in { opacity: 1; transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; }
      *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
      html { scroll-behavior: auto; }
      #fireCanvas { display: none; }
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 960px) {
      .nav-links, .nav-cta { display: none; }
      .hamburger { display: flex; }
      .founder, .founder.reverse { grid-template-columns: 1fr; gap: 32px; text-align: center; }
      .founder.reverse .founder-media { order: 0; }
      .badge-pills { justify-content: center; }
      .story-grid { grid-template-columns: 1fr; gap: 32px; }
      .programs-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
      .footer-grid { grid-template-columns: 1fr; gap: 36px; }
      .section { padding: 80px 0; }
    }
    @media (max-width: 560px) {
      .wrap { padding: 0 18px; }
      .chat-callout { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 0.82rem; }
      .testi-card { padding: 36px 24px; }
      .testi-text { font-size: 1.1rem; }
    }

    /* ============================================================
       MOBILE OPTIMIZATION  (phones only — desktop unaffected)
    ============================================================ */
    @media (max-width: 640px) {
      /* tighter vertical rhythm so the page reads shorter */
      .section { padding: 56px 0; }

      /* ---- Founders: side-by-side, smaller photos, tap-to-open bios ---- */
      .founders-grid { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
      .founders-intro .section-sub { margin-top: 80px !important; }
      .founder-card { padding: 22px 14px 24px; }
      .founder-media { margin-bottom: 14px; }
      .photo-ring { width: 96px; max-width: 38vw; box-shadow: 0 0 0 5px rgba(var(--gold-rgb), 0.10), 0 12px 30px rgba(0,0,0,0.55); }
      .founder-name { font-size: 1.18rem; margin-bottom: 12px; }
      .badge-pills { gap: 6px; margin-bottom: 14px; }
      .pill { font-size: 0.66rem; padding: 5px 11px; }
      .bio-toggle { display: inline-flex; }
      .founder-bio {
        max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
        font-size: 0.9rem; line-height: 1.62; text-align: left;
        transition: max-height .45s var(--ease), opacity .3s var(--ease), margin-top .3s var(--ease);
      }
      .founder-card.bio-open .founder-bio { max-height: 900px; opacity: 1; margin-top: 14px; }
      .founders-cta { margin-top: 40px; }

      /* ---- Watch Our Story: give the video a bit more room ---- */
      #watch-story .story-grid { gap: 22px; }
      #watch-story .video-glow { margin-left: -10px; margin-right: -10px; }

      /* ---- Testimonials: condense the box, keep text legible ---- */
      .carousel { margin-top: 36px; }
      .carousel-track { min-height: 0; }
      .testi-card { padding: 28px 20px; }
      .testi-quote-mark { font-size: 3rem; margin-bottom: 8px; }
      .testi-stars { margin-bottom: 14px; }
      .testi-text { font-size: 1.04rem; line-height: 1.55; margin-bottom: 16px; }

      /* ---- Compare table: a touch smaller (still scrolls horizontally) ---- */
      .table-wrap { margin-top: 36px; }
      table.compare { min-width: 580px; }
      table.compare thead th { padding: 14px 12px; font-size: 0.84rem; }
      table.compare tbody td { padding: 12px 12px; font-size: 0.82rem; }
      table.compare thead th:nth-child(4) { font-size: 0.95rem; }
    }