/* AXION site — part 2: civilization sections, ventures, capital, communities, flagship, final. */
(function () {
  const P1 = window.__AXION_PART1;
  const { Icon, C, SERIF, MONO, PROSE, A } = P1;

  const Eyebrow = ({ children, color, center }) => (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: center ? 'center' : 'flex-start', gap: 8, fontFamily: MONO, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: color || C.clay, marginBottom: 22 }}>
      <span style={{ width: 22, height: 1, background: color || C.clay }} /> {children}
    </div>
  );

  /* ============ WE BUILD CIVILIZATION ============ */
  function BuildCivilization() {
    const flow = ['Discovery', 'Ideation', 'Validation', 'Creation', 'Spin-Out', 'Scale', 'Reinvestment'];
    return (
      <section id="build" style={{ background: C.forest, color: '#EAE0C6', padding: '110px 36px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center' }} className="two-col">
          <div>
            <Eyebrow color="#D9B85A">What AXION Is</Eyebrow>
            <h2 style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 'clamp(32px,4.2vw,58px)', lineHeight: 1.08, letterSpacing: '0.03em', margin: 0, color: '#FBF3DA' }}>
              We build companies<br /><span style={{ color: '#D9B85A' }}>that build civilization.</span>
            </h2>
            <p style={{ fontFamily: PROSE, fontSize: 21, lineHeight: 1.6, color: '#CFC2A0', margin: '28px 0 0', maxWidth: 480 }}>
              AXION is the world's first non-profit civilizational venture studio. We identify systemic problems across human civilization and transform them into ventures that become the infrastructure of a new earth.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {flow.map((step, k) => (
              <div key={step}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                  <span style={{ fontFamily: MONO, fontSize: 12, color: '#9A8A5E', width: 28 }}>{String(k + 1).padStart(2, '0')}</span>
                  <span style={{ fontFamily: SERIF, fontSize: 'clamp(20px,2.4vw,30px)', letterSpacing: '0.06em', textTransform: 'uppercase', color: '#F0E4C2' }}>{step}</span>
                </div>
                {k < flow.length - 1 && <div style={{ width: 1, height: 22, background: 'rgba(217,184,90,0.4)', margin: '4px 0 4px 13px' }} />}
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ============ THE AXION FIELD (values wheel image) ============ */
  function ValuesWheel() {
    return (
      <section style={{ background: 'radial-gradient(120% 90% at 50% 0%, #11160e 0%, #0a0d07 60%, #070905 100%)', padding: '96px 36px', textAlign: 'center' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <Eyebrow color="#D9B85A">The AXION Field</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 'clamp(28px,3.6vw,46px)', letterSpacing: '0.05em', textTransform: 'uppercase', color: '#FBF3DA', margin: '0 auto', maxWidth: 700 }}>
            One ecosystem of aligned values
          </h2>
          <p style={{ fontFamily: PROSE, fontSize: 20, lineHeight: 1.6, color: '#CFC2A0', maxWidth: 580, margin: '20px auto 0' }}>
            Every venture and community AXION builds orbits the same constellation of civilizational values — held together by one field.
          </p>
        </div>
        <img src={A + 'axion-values-wheel.png'} alt="The AXION values constellation — building the infrastructure of future civilization"
          style={{ width: '100%', maxWidth: 920, height: 'auto', marginTop: 48, borderRadius: 16, boxShadow: '0 30px 90px rgba(0,0,0,0.6)' }} />
      </section>
    );
  }

  /* ============ THE TEN RINGS ============ */
  const RINGS = [
    ['I', 'Human Health & Longevity', 'plant'], ['II', 'Consciousness Development', 'bulb'],
    ['III', 'Education Systems', 'book'], ['IV', 'Economic Systems', 'bank'],
    ['V', 'Infrastructure & Habitat', 'shield'], ['VI', 'Agriculture & Food Systems', 'leaf'],
    ['VII', 'Energy Systems', 'gear'], ['VIII', 'Governance Systems', 'compass'],
    ['IX', 'Media & Cultural Systems', 'pen'], ['X', 'Technology & Intelligence', 'chip'],
  ];
  function TenRings() {
    const [sel, setSel] = React.useState(4);
    return (
      <section id="the-ten-rings" style={{ background: C.cream, padding: '110px 36px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', textAlign: 'center' }}>
          <Eyebrow>{''}The Architecture</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 'clamp(30px,4vw,54px)', letterSpacing: '0.05em', textTransform: 'uppercase', color: C.ink, margin: '0 auto', maxWidth: 760 }}>
            The Ten Rings of Civilization
          </h2>
          <p style={{ fontFamily: PROSE, fontSize: 21, lineHeight: 1.6, color: C.umber, maxWidth: 640, margin: '22px auto 0' }}>
            Civilizations do not emerge through isolated innovation. They emerge through integrated systems. AXION builds across ten fundamental domains that determine the future of humanity.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))', gap: 16, maxWidth: 1180, margin: '56px auto 0' }} className="rings-grid">
          {RINGS.map(([num, name, icon], k) => {
            const on = k === sel;
            return (
              <a key={num} href={`focus-areas.html#ring-${k}`} onMouseEnter={() => setSel(k)} style={{
                display: 'block', textDecoration: 'none',
                textAlign: 'left', cursor: 'pointer', padding: '24px 22px', borderRadius: 14,
                background: on ? C.forest : C.linen, color: on ? '#F0E4C2' : C.ink,
                border: `1px solid ${on ? C.forestD : C.line}`, transition: 'all .25s',
                boxShadow: on ? '0 14px 34px rgba(34,48,27,0.28)' : '0 2px 10px rgba(42,32,23,0.05)',
                transform: on ? 'translateY(-4px)' : 'none',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                  <Icon name={icon} size={26} color={on ? '#D9B85A' : C.clay} />
                  <span style={{ fontFamily: SERIF, fontSize: 22, fontWeight: 700, color: on ? '#D9B85A' : 'rgba(42,32,23,0.25)' }}>{num}</span>
                </div>
                <div style={{ fontFamily: SERIF, fontSize: 16, letterSpacing: '0.04em', textTransform: 'uppercase', lineHeight: 1.25 }}>{name}</div>
              </a>
            );
          })}
        </div>
      </section>
    );
  }

  /* ============ VENTURE CREATION ENGINE (timeline) ============ */
  function VentureEngine() {
    const steps = ['Ideation', 'Validation', 'Creation', 'Formation', 'Spin-Out', 'External Funding', 'Global Scale'];
    return (
      <section id="ventures" style={{ background: C.linen, padding: '110px 36px', borderTop: `1px solid ${C.line}`, borderBottom: `1px solid ${C.line}` }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <Eyebrow>The Venture Creation Engine</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 'clamp(28px,3.6vw,48px)', letterSpacing: '0.04em', textTransform: 'uppercase', color: C.ink, margin: 0, maxWidth: 620 }}>
            From idea to infrastructure
          </h2>
          <p style={{ fontFamily: PROSE, fontSize: 20, lineHeight: 1.6, color: C.umber, maxWidth: 560, margin: '20px 0 56px' }}>
            Every venture passes through a structured architecture process designed to transform ideas into civilizational systems.
          </p>
          <div style={{ display: 'flex', alignItems: 'stretch', gap: 0, overflowX: 'auto', paddingBottom: 8 }}>
            {steps.map((s, k) => (
              <React.Fragment key={s}>
                <div style={{ flex: '1 0 130px', textAlign: 'center' }}>
                  <div style={{
                    width: 54, height: 54, borderRadius: '50%', margin: '0 auto 16px',
                    background: C.cream, border: `1.5px solid ${C.lineGold}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: SERIF, fontSize: 18, fontWeight: 700, color: C.clay,
                  }}>{k + 1}</div>
                  <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: C.ink, lineHeight: 1.4 }}>{s}</div>
                </div>
                {k < steps.length - 1 && <div style={{ flex: '0 0 24px', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: 18 }}><Icon name="arrow" size={18} color={C.clayLt || C.clay} /></div>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ============ THE EMBEDDED STUDIO (Founders-Factory-style) ============ */
  function StudioModel() {
    const approach = [
      ['01', 'Co-build with civilizational architects & operators', 'Our teams have taken systems from idea to living institution. We bring the playbooks, capital, and people that de-risk a venture and raise its odds of enduring.'],
      ['02', 'Fast-track from idea to living system', 'A dedicated team of designers, builders, researchers and stewards validates the concept, ships the first working system, and earns its first real-world adoption.'],
      ['03', 'Capitalize, spin out & scale', 'We help each venture get funded, recruit its founding stewards, and spin out as an independent institution — while its returns feed the ecosystem.'],
    ];
    const support = [
      ['Product & Design', 'pen'], ['Capital & Fundraising', 'bank'], ['Growth & Adoption', 'globe'],
      ['Talent & Stewardship', 'people'], ['Research & Data', 'compass'], ['Strategic Partnerships', 'network'],
      ['Story & Media', 'book'], ['Engineering & Technology', 'chip'],
    ];
    return (
      <section id="studio" style={{ background: C.cream, padding: '110px 36px', borderTop: `1px solid ${C.line}` }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <Eyebrow>The Embedded Studio</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 'clamp(28px,3.8vw,50px)', lineHeight: 1.1, letterSpacing: '0.04em', textTransform: 'uppercase', color: C.ink, margin: 0, maxWidth: 720 }}>
            One venture studio, integrated into every community we build
          </h2>
          <p style={{ fontFamily: PROSE, fontSize: 21, lineHeight: 1.6, color: C.umber, maxWidth: 620, margin: '22px 0 0' }}>
            AXION co-founds ventures alongside communities — partnering with people to develop new systems, institutions and models into the high-impact infrastructure of a new earth.
          </p>

          {/* approach steps */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 28, margin: '64px 0 0' }} className="three-col">
            {approach.map(([num, t, d]) => (
              <div key={num} style={{ borderTop: `2px solid ${C.lineGold}`, paddingTop: 24 }}>
                <div style={{ fontFamily: SERIF, fontSize: 40, fontWeight: 700, color: C.clay, lineHeight: 1, marginBottom: 18 }}>{num}</div>
                <h3 style={{ fontFamily: SERIF, fontSize: 23, letterSpacing: '0.02em', lineHeight: 1.2, color: C.ink, margin: '0 0 12px' }}>{t}</h3>
                <p style={{ fontFamily: PROSE, fontSize: 18, lineHeight: 1.55, color: C.umber, margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>

          {/* operational support */}
          <div style={{ marginTop: 88, textAlign: 'center' }}>
            <Eyebrow>Operational Support</Eyebrow>
            <h3 style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 'clamp(24px,3vw,38px)', letterSpacing: '0.04em', textTransform: 'uppercase', color: C.ink, margin: '0 auto', maxWidth: 640 }}>
              Build with a dedicated co-founding team
            </h3>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginTop: 44 }} className="support-grid">
            {support.map(([t, i]) => (
              <div key={t} style={{ background: C.linen, border: `1px solid ${C.line}`, borderRadius: 14, padding: '30px 22px', textAlign: 'center', boxShadow: '0 4px 14px rgba(42,32,23,0.05)' }}>
                <div style={{ width: 56, height: 56, borderRadius: '50%', margin: '0 auto 18px', background: C.cream, border: `1px solid ${C.lineGold}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={i} size={26} color={C.forest} />
                </div>
                <div style={{ fontFamily: MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: C.ink, lineHeight: 1.4 }}>{t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ============ THREE PATHWAYS ============ */
  function ThreePathways() {
    const ways = [
      ['Internal', 'Ventures created by AXION participants — internal builders and creators discovering civilizational opportunities.', 'people'],
      ['Community', 'Ventures created alongside communities — designed and built together with the people they serve.', 'plant'],
      ['External', 'Independent ventures seeking AXION support — aligned founders entering the ecosystem.', 'globe'],
    ];
    return (
      <section id="communities" style={{ background: C.cream, padding: '110px 36px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', textAlign: 'center' }}>
          <Eyebrow>{''}Three Pathways of Creation</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 'clamp(28px,3.6vw,48px)', letterSpacing: '0.05em', textTransform: 'uppercase', color: C.ink, margin: 0 }}>
            Innovation enters AXION through three channels
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22, maxWidth: 1180, margin: '56px auto 0' }} className="three-col">
          {ways.map(([t, d, i]) => (
            <div key={t} style={{ background: C.linen, border: `1px solid ${C.line}`, borderRadius: 16, padding: '40px 32px', textAlign: 'center', boxShadow: '0 6px 20px rgba(42,32,23,0.06)' }}>
              <div style={{ width: 64, height: 64, borderRadius: '50%', margin: '0 auto 22px', background: C.cream, border: `1px solid ${C.lineGold}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={i} size={28} color={C.forest} />
              </div>
              <h3 style={{ fontFamily: SERIF, fontSize: 24, letterSpacing: '0.08em', textTransform: 'uppercase', color: C.ink, margin: '0 0 14px' }}>{t}</h3>
              <p style={{ fontFamily: PROSE, fontSize: 18, lineHeight: 1.55, color: C.umber, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 40, fontFamily: MONO, fontSize: 13, letterSpacing: '0.24em', textTransform: 'uppercase', color: C.clay }}>
          ↓ All channels merge into the AXION Venture Engine ↓
        </div>
      </section>
    );
  }

  /* ============ CAPITAL ARCHITECTURE ============ */
  function Capital() {
    const flow = ['Philanthropy', 'Investors', 'Partners', 'Venture Revenue', 'AXION', 'New Ventures', 'Community Infrastructure', 'New Civilization'];
    return (
      <section id="capital" style={{ background: C.forest, color: '#EAE0C6', padding: '110px 36px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="two-col">
          <div>
            <Eyebrow color="#D9B85A">Capital Architecture</Eyebrow>
            <h2 style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 'clamp(30px,4vw,52px)', lineHeight: 1.1, letterSpacing: '0.03em', margin: 0, color: '#FBF3DA' }}>
              Capital should build civilization.
            </h2>
            <p style={{ fontFamily: PROSE, fontSize: 20, lineHeight: 1.6, color: '#CFC2A0', margin: '26px 0 0', maxWidth: 460 }}>
              Most investment chases a one-time payout and then moves on. AXION builds continuous capital flows that sustain venture creation and fund future infrastructure — value generated in the world returns to the ecosystem.
            </p>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
            {flow.map((f, k) => (
              <React.Fragment key={f}>
                <span style={{ fontFamily: MONO, fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '12px 18px', borderRadius: 999, border: `1px solid ${f === 'AXION' ? '#D9B85A' : 'rgba(217,184,90,0.3)'}`, color: f === 'AXION' ? '#1a1305' : '#E8D9A8', background: f === 'AXION' ? '#D9B85A' : 'transparent', fontWeight: f === 'AXION' ? 700 : 400 }}>{f}</span>
                {k < flow.length - 1 && <span style={{ color: 'rgba(217,184,90,0.5)', alignSelf: 'center' }}>→</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ============ PROTOTYPE COMMUNITIES ============ */
  function Prototype() {
    const tags = ['Health', 'Economic', 'Housing', 'Energy', 'Agriculture', 'Education', 'Governance', 'Technology'];
    return (
      <section style={{ position: 'relative', minHeight: 560, display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
        <img src={A + 'axion-communities.png'} alt="A golden civilization at sunset — temples, gardens, and waterways" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 55%' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(8,7,4,0.86) 0%, rgba(8,7,4,0.55) 55%, rgba(8,7,4,0.2) 100%)' }} />
        <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto', padding: '0 36px', width: '100%' }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow color="#D9B85A">Communities</Eyebrow>
            <h2 style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 'clamp(30px,4vw,52px)', lineHeight: 1.1, letterSpacing: '0.03em', color: '#FBF3DA', margin: 0 }}>
              The future is built in real places.
            </h2>
            <p style={{ fontFamily: PROSE, fontSize: 20, lineHeight: 1.6, color: '#D6CAA8', margin: '24px 0 28px' }}>
              AXION builds living communities where new systems are designed, tested, and deployed in the real world — each one a working blueprint for how humanity can live, govern, and regenerate together.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {tags.map((t) => (
                <span key={t} style={{ fontFamily: MONO, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#F0E4C2', border: '1px solid rgba(217,184,90,0.45)', padding: '8px 14px', borderRadius: 999, background: 'rgba(8,7,4,0.4)' }}>{t}</span>
              ))}
            </div>
            <a href="joshua-tree.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginTop: 30, fontFamily: MONO, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#1a230f', background: 'var(--grad-gold)', padding: '15px 30px', borderRadius: 999, textDecoration: 'none', fontWeight: 600 }}>
              Visit Joshua Tree <Icon name="arrow" size={15} color="#1a230f" />
            </a>
          </div>
        </div>
      </section>
    );
  }

  /* ============ FLAGSHIP VENTURES ============ */
  function Flagship() {
    const PHASES = [
      {
        step: 'Detect',
        title: 'Identify the Fracture',
        desc: 'Reads signals across every domain of civilization to surface the systemic fractures most worth solving.',
        leftTitle: 'Civilizational Signals', leftIcon: 'network',
        items: ['Health Systems', 'Economic Models', 'Education', 'Governance', 'Ecology', 'Culture'],
        rightTitle: 'The Fracture',
        rightBody: 'A systemic gap emerges where current institutions fail to serve human and planetary flourishing — the starting point for a new venture.',
        cta: 'Surface',
      },
      {
        step: 'Architect',
        title: 'Architect the System',
        desc: 'Synthesizes insight, people, and capital into a venture architecture engineered to become lasting infrastructure.',
        leftTitle: 'Venture Inputs', leftIcon: 'gear',
        items: ['Insight & Research', 'Founding Stewards', 'Aligned Capital', 'Partner Network', 'Technology', 'Community'],
        rightTitle: 'The Blueprint',
        rightBody: 'Inputs converge into a venture blueprint — a purpose-built institution designed to regenerate a domain of civilization at scale.',
        cta: 'Architect',
      },
      {
        step: 'Regenerate',
        title: 'Deploy & Regenerate',
        desc: 'Spins the venture out into the world and recirculates its returns to fund the next system.',
        leftTitle: 'Living Outputs', leftIcon: 'recycle',
        items: ['Live Institution', 'Community Impact', 'Returns to Ecosystem', 'New Ventures'],
        rightTitle: 'Regeneration',
        rightBody: 'The venture operates independently, creates real-community impact, and returns value to AXION — funding the next generation of systems.',
        cta: 'Deploy',
      },
    ];
    const [p, setP] = React.useState(1);
    const ph = PHASES[p];
    const DH = 392, HEAD = 72, ROW = 46;
    const n = ph.items.length;

    return (
      <section id="about" style={{ background: C.cream, padding: '110px 36px', borderTop: `1px solid ${C.line}` }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <Eyebrow>The Synthesis Engine</Eyebrow>
            <h2 style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 'clamp(28px,3.8vw,50px)', letterSpacing: '0.04em', textTransform: 'uppercase', color: C.ink, margin: '0 auto', maxWidth: 760 }}>
              How a fracture becomes infrastructure
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56, alignItems: 'center' }} className="syn-grid">
            {/* left — stepped phases */}
            <div>
              {PHASES.map((x, k) => {
                const on = k === p;
                return (
                  <button key={x.title} onClick={() => setP(k)} style={{
                    display: 'flex', alignItems: 'center', gap: 14, width: '100%', textAlign: 'left',
                    background: 'none', border: 'none', cursor: 'pointer', padding: '14px 0',
                  }}>
                    {on && <Icon name="arrow" size={20} color={C.clay} />}
                    <span style={{
                      fontFamily: SERIF, fontSize: on ? 'clamp(26px,3vw,38px)' : 'clamp(22px,2.4vw,30px)',
                      letterSpacing: '0.02em', lineHeight: 1.1,
                      color: on ? C.ink : 'rgba(42,32,23,0.34)', transition: 'all .2s',
                      marginLeft: on ? 0 : 34,
                    }}>{x.title}</span>
                  </button>
                );
              })}
            </div>

            {/* right — flow diagram */}
            <div>
              <p style={{ fontFamily: PROSE, fontSize: 'clamp(19px,2.2vw,26px)', lineHeight: 1.45, color: C.umber, margin: '0 0 26px' }}>{ph.desc}</p>
              <div style={{ position: 'relative', background: C.sand, borderRadius: 18, padding: 26, minHeight: DH + 52 }}>
                <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', height: DH }}>
                  {/* connectors (behind cards) */}
                  <svg viewBox={`0 0 100 ${DH}`} preserveAspectRatio="none" style={{ position: 'absolute', left: '46%', width: '20%', top: 0, height: DH, zIndex: 0, overflow: 'visible' }}>
                    {ph.items.map((_, i) => {
                      const y = HEAD + i * ROW + ROW / 2;
                      return <path key={i} d={`M0 ${y} C 55 ${y} 45 ${DH / 2} 100 ${DH / 2}`} fill="none" stroke="rgba(42,32,23,0.32)" strokeWidth="1.4" vectorEffect="non-scaling-stroke" />;
                    })}
                  </svg>

                  {/* left card — sources */}
                  <div style={{ position: 'relative', zIndex: 1, width: '46%', background: C.cream, borderRadius: 14, boxShadow: '0 10px 30px rgba(42,32,23,0.10)', padding: '22px 0', alignSelf: 'flex-start' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 22px', height: HEAD - 22 }}>
                      <Icon name={ph.leftIcon} size={20} color={C.forest} />
                      <span style={{ fontFamily: BODY, fontSize: 16, fontWeight: 700, color: C.ink }}>{ph.leftTitle}</span>
                    </div>
                    {ph.items.map((it, i) => (
                      <div key={it} style={{ position: 'relative', display: 'flex', alignItems: 'center', height: ROW, padding: '0 22px', borderTop: `1px solid ${C.line}` }}>
                        <span style={{ fontFamily: BODY, fontSize: 14.5, color: C.umber }}>{it}</span>
                        <span style={{ position: 'absolute', right: -5, top: '50%', transform: 'translateY(-50%)', width: 10, height: 10, borderRadius: '50%', background: C.clay, border: `2px solid ${C.cream}`, zIndex: 2 }} />
                      </div>
                    ))}
                  </div>

                  {/* right card — output */}
                  <div style={{ position: 'relative', zIndex: 1, width: '44%', alignSelf: 'center', background: C.cream, borderRadius: 14, boxShadow: '0 10px 30px rgba(42,32,23,0.12)', padding: 24 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                      <Icon name="compass" size={20} color={C.clay} />
                      <span style={{ fontFamily: BODY, fontSize: 16, fontWeight: 700, color: C.ink }}>{ph.rightTitle}</span>
                    </div>
                    <p style={{ fontFamily: BODY, fontSize: 14, lineHeight: 1.6, color: C.umber, margin: '0 0 20px' }}>{ph.rightBody}</p>
                    <a href="#enter" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: BODY, fontSize: 13.5, fontWeight: 600, color: '#F4ECD8', background: C.forest, padding: '11px 20px', borderRadius: 999, textDecoration: 'none' }}>
                      {ph.cta} <Icon name="arrow" size={15} color="#F4ECD8" />
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ============ FINAL STATEMENT + FOOTER ============ */
  function FinalStatement() {
    return (
      <section id="enter" style={{ background: C.forestD, color: '#F0E4C2', padding: '130px 36px 0' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto', textAlign: 'center' }}>
          <img src={A + 'axion-logo.png'} alt="AXION" style={{ height: 184, width: 'auto', marginBottom: 36, filter: 'drop-shadow(0 0 48px rgba(201,162,58,0.5))' }} />
          <h2 style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 'clamp(28px,4.4vw,56px)', lineHeight: 1.18, letterSpacing: '0.04em', textTransform: 'uppercase', color: '#FBF3DA', margin: 0 }}>
            Civilization will not emerge from isolated innovation. It will emerge from systems designed to continuously create the future.
          </h2>
          <div style={{ marginTop: 44 }}>
            <a href="apply.html" style={{ fontFamily: MONO, fontSize: 13, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#1a1305', background: 'var(--grad-gold)', padding: '17px 42px', borderRadius: 999, textDecoration: 'none', fontWeight: 600, boxShadow: '0 0 40px rgba(212,175,55,0.35)', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              Enter AXION <Icon name="arrow" size={16} color="#1a1305" />
            </a>
          </div>
        </div>
        <footer style={{ marginTop: 110, borderTop: '1px solid rgba(217,184,90,0.2)', padding: '34px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, maxWidth: 1180, marginLeft: 'auto', marginRight: 'auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img src={A + 'axion-logo.png'} alt="" style={{ height: 30 }} />
            <span style={{ fontFamily: SERIF, fontSize: 20, letterSpacing: '0.14em', color: '#D9B85A' }}>AXION</span>
          </div>
          <nav style={{ display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
            {[['About', 'about.html'], ['Careers', 'careers.html'], ['Portfolio', 'portfolio.html'], ['Apply', 'apply.html']].map(([l, h]) => (
              <a key={l} href={h} style={{ fontFamily: MONO, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#C9BE97', textDecoration: 'none' }}>{l}</a>
            ))}
          </nav>
          <span style={{ fontFamily: MONO, fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#9A8A5E' }}>A Non-Profit Civilizational Venture Studio · Building the Infrastructure of Future Civilization</span>
        </footer>
      </section>
    );
  }

  /* ============ APP ============ */
  function App() {
    const { TopNav, AnnounceStrip, AtlasHero, Overview } = P1;
    return (
      <div style={{ background: C.cream }}>
        <TopNav />
        <AnnounceStrip />
        <AtlasHero />
        <Overview />
        <ValuesWheel />
        <BuildCivilization />
        <TenRings />
        <VentureEngine />
        <StudioModel />
        <ThreePathways />
        <Capital />
        <Prototype />
        <Flagship />
        <FinalStatement />
      </div>
    );
  }

  window.__AXMount = function () {
    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  };
})();