// About page for Blue North Accounting — brand light system + live motion layer
function AboutBody() {
  React.useEffect(() => {
    const root = document.querySelector('.bnp');
    if (!root) return;
    const cleanups = [];

    // Canvas constellation
    function constellation(cv) {
      const ctx = cv.getContext('2d');
      let W, H, pts, raf; const DPR = Math.min(2, window.devicePixelRatio || 1);
      function size() {
        W = cv.clientWidth; H = cv.clientHeight;
        cv.width = W * DPR; cv.height = H * DPR; ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
        const n = Math.round(W * H / 16000); pts = [];
        for (let i = 0; i < n; i++) pts.push({ x: Math.random() * W, y: Math.random() * H, vx: (Math.random() - .5) * .12, vy: (Math.random() - .5) * .12, r: Math.random() * 1.6 + .5, t: Math.random() * 6.28 });
      }
      function frame() {
        ctx.clearRect(0, 0, W, H);
        for (let i = 0; i < pts.length; i++) {
          const p = pts[i]; p.x += p.vx; p.y += p.vy; p.t += .02;
          if (p.x < 0) p.x += W; if (p.x > W) p.x -= W; if (p.y < 0) p.y += H; if (p.y > H) p.y -= H;
          for (let j = i + 1; j < pts.length; j++) {
            const q = pts[j], dx = p.x - q.x, dy = p.y - q.y, d = dx * dx + dy * dy;
            if (d < 15000) { ctx.globalAlpha = (1 - d / 15000) * .22; ctx.strokeStyle = '#8aa0ff'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y); ctx.stroke(); }
          }
        }
        for (let k = 0; k < pts.length; k++) { const s = pts[k]; ctx.globalAlpha = .5 + Math.sin(s.t) * .4; ctx.fillStyle = '#aebbff'; ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, 6.28); ctx.fill(); }
        ctx.globalAlpha = 1; raf = requestAnimationFrame(frame);
      }
      const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      size(); const onR = () => size(); window.addEventListener('resize', onR);
      if (reduce) { frame(); cancelAnimationFrame(raf); } else frame();
      cleanups.push(() => { cancelAnimationFrame(raf); window.removeEventListener('resize', onR); });
    }
    const c1 = root.querySelector('#cst1'); if (c1) constellation(c1);

    // Scroll reveals
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { threshold: .14 });
    root.querySelectorAll('.rv').forEach((el, i) => { el.style.transitionDelay = ((i % 5) * 60) + 'ms'; io.observe(el); });

    // Animated cost bars + count-up cents
    const ease = (p) => 1 - Math.pow(1 - p, 3);
    const sio = new IntersectionObserver((es) => es.forEach((e) => {
      if (!e.isIntersecting) return; sio.unobserve(e.target);
      e.target.querySelectorAll('.fill').forEach((f) => { f.style.width = f.dataset.w + '%'; });
      e.target.querySelectorAll('.cnt').forEach((n) => {
        const to = +n.dataset.to; let t0 = null;
        const st = (ts) => { if (t0 == null) t0 = ts; const p = ease(Math.min(1, (ts - t0) / 1100)); n.textContent = Math.round(to * p); if (p < 1) requestAnimationFrame(st); };
        requestAnimationFrame(st);
      });
    }), { threshold: .3 });
    const stack = root.querySelector('#stack'); if (stack) sio.observe(stack);

    cleanups.push(() => { io.disconnect(); sio.disconnect(); });
    return () => cleanups.forEach((fn) => fn());
  }, []);

  return (
    <div className="bnp">
      <header className="hero"><canvas id="cst1"></canvas><div className="wrap">
        <div className="lbl rv">[ ABOUT ]</div>
        <h1 className="rv">A different<br /><span className="it">type of</span><br />accounting firm.</h1>
        <div className="herorow">
          <div className="k rv">A CANADIAN CPA FIRM · BUILT FOR CANADIAN BUSINESS</div>
          <p className="rv">We started Blue North because the small businesses we worked with kept asking a question that traditional accounting couldn't answer: <em>not where I've been — where am I heading?</em> We built a firm to answer that question, every month, for the operators who keep the north working.</p>
        </div>
      </div></header>

      <section className="sec"><div className="wrap">
        <div className="lbl rv">[ THE PROBLEM WE SAW ]</div>
        <div className="split">
          <h2 className="rv">Most small business accounting only looks backwards.</h2>
          <div className="body">
            <p className="rv">Tax is calculated on what already happened, so most accountants build their practice around historical records and year-end filings. That's necessary work — but it's only half the picture.</p>
            <p className="rv">Owners told us, over and over: <em>"My accountant helps me look at the past, but I want to know where I'm heading."</em> Or: <em>"I want someone to help me set financial goals, use my numbers to make decisions, improve my margins."</em></p>
            <p className="rv">That work usually sits with a CFO and a full finance team — overhead that's out of reach for most small businesses.</p>
            <p className="rv">So we built a firm that combines compliance and CFO expertise into one service, for a fraction of the cost. The result: data-driven decisions, locally delivered.</p>
          </div>
        </div>

        <div className="foresight rv">
          <div className="fs-head">
            <span className="fs-tag">FORESIGHT MODEL</span>
            <h3>Most accounting stops at <span className="nowx">NOW</span>. We keep going.</h3>
          </div>
          <svg viewBox="0 0 1000 360" className="fs-svg" role="img" aria-label="A financial trend line: solid up to today, then a glowing forecast projecting where the business is heading.">
            <defs>
              <linearGradient id="fsPast" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="rgba(77,159,255,0.30)" />
                <stop offset="1" stopColor="rgba(77,159,255,0)" />
              </linearGradient>
              <linearGradient id="fsFwd" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stopColor="#6d8bff" />
                <stop offset="1" stopColor="#4d9fff" />
              </linearGradient>
            </defs>
            {[110, 170, 230, 290].map((y) => (
              <line key={y} x1="60" y1={y} x2="940" y2={y} className="fs-grid" />
            ))}
            <path d="M80 236 C 200 218, 300 202, 380 210 S 470 190, 520 194 L520 300 L80 300 Z" fill="url(#fsPast)" />
            <path d="M80 236 C 200 218, 300 202, 380 210 S 470 190, 520 194" className="fs-past" />
            <path d="M520 194 C 640 172, 700 152, 780 128 S 900 92, 924 80" className="fs-fwd-glow" />
            <path id="bnFwd" d="M520 194 C 640 172, 700 152, 780 128 S 900 92, 924 80" className="fs-fwd" />
            <line x1="520" y1="52" x2="520" y2="300" className="fs-now" />
            <text x="520" y="40" className="fs-now-t" textAnchor="middle">NOW</text>
            <circle cx="520" cy="194" r="4.5" className="fs-node" />
            <text x="505" y="150" textAnchor="end" className="fs-note">traditional</text>
            <text x="505" y="168" textAnchor="end" className="fs-note">stops here</text>
            <circle cx="924" cy="80" r="6" fill="none" className="fs-target-ring">
              <animate attributeName="r" values="6;22" dur="2.6s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="0.6;0" dur="2.6s" repeatCount="indefinite" />
            </circle>
            <circle cx="924" cy="80" r="5" className="fs-target" />
            <text x="912" y="60" textAnchor="end" className="fs-note fwd">your plan ↗</text>
            <circle r="5.5" className="fs-pulse">
              <animateMotion dur="3.4s" repeatCount="indefinite"><mpath href="#bnFwd" /></animateMotion>
              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.85;1" dur="3.4s" repeatCount="indefinite" />
            </circle>
            <text x="80" y="336" className="fs-cap">LOOKING BACK · what already happened</text>
            <text x="924" y="336" textAnchor="end" className="fs-cap fwd">LOOKING FORWARD · where you're heading</text>
          </svg>
          <div className="fs-legend">
            <div className="fs-leg back"><span className="d"></span><b>Looking back</b> — books, filings, tax. The record of what already happened.</div>
            <div className="fs-leg fwd"><span className="d"></span><b>Looking forward</b> — planning, margins, runway. A monthly read on where you're heading.</div>
          </div>
        </div>
      </div></section>

      <section className="sec merge-sec"><div className="wrap">
        <div className="lbl rv">[ ONE SERVICE ]</div>
        <div className="split">
          <h2 className="rv">Two disciplines,<br />one firm.</h2>
          <div className="body">
            <p className="rv">Compliance keeps you clean with the CRA. CFO-level advisory tells you where to steer. Traditionally you'd hire both — a bookkeeper <em>and</em> a fractional CFO. We fused them into a single monthly service, for a fraction of the cost.</p>
          </div>
        </div>
        <div className="merge rv">
          <svg viewBox="0 0 1000 300" className="mg-svg" role="img" aria-label="Compliance and CFO-level advisory combine into a single Blue North service.">
            <defs>
              <linearGradient id="mgRes" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stopColor="#2d4ef5" />
                <stop offset="1" stopColor="#4d9fff" />
              </linearGradient>
              <filter id="mgGlow" x="-40%" y="-40%" width="180%" height="200%">
                <feDropShadow dx="0" dy="12" stdDeviation="16" floodColor="#2d4ef5" floodOpacity="0.28" />
              </filter>
            </defs>
            <path id="mgC1" className="mg-conn" d="M336 82 C 470 82, 540 128, 648 130" />
            <path id="mgC2" className="mg-conn" d="M336 218 C 470 218, 540 172, 648 170" />
            <circle r="5" className="mg-pulse"><animateMotion dur="2.4s" repeatCount="indefinite"><mpath href="#mgC1" /></animateMotion></circle>
            <circle r="5" className="mg-pulse"><animateMotion dur="2.4s" repeatCount="indefinite" begin="1.2s"><mpath href="#mgC2" /></animateMotion></circle>

            <g>
              <rect x="30" y="42" width="306" height="80" rx="14" className="mg-node" />
              <text x="54" y="78" className="mg-k">COMPLIANCE &amp; TAX</text>
              <text x="54" y="100" className="mg-s">Books · filings · CRA-ready</text>
            </g>
            <g>
              <rect x="30" y="178" width="306" height="80" rx="14" className="mg-node" />
              <text x="54" y="214" className="mg-k">CFO-LEVEL ADVISORY</text>
              <text x="54" y="236" className="mg-s">Planning · margins · forecasts</text>
            </g>
            <g>
              <circle cx="183" cy="150" r="18" className="mg-plus-c" />
              <text x="183" y="158" className="mg-plus-t">+</text>
            </g>

            <rect x="648" y="94" width="322" height="112" rx="16" fill="url(#mgRes)" filter="url(#mgGlow)" />
            <text x="676" y="140" className="mg-res-k">Blue North</text>
            <text x="676" y="168" className="mg-res-s">One monthly service</text>
            <text x="676" y="187" className="mg-res-s">— a fraction of the cost.</text>
          </svg>
        </div>
      </div></section>

      <section className="sec pricing"><div className="wrap">
        <div className="lbl rv">[ PRICING &amp; PRINCIPLE ]</div>
        <div className="split">
          <h2 className="rv">How firms cut fees —<br />we don't.</h2>
          <div className="body">
            <p className="rv">When a Canadian firm undercuts on price, it's almost always one of two trades: ship the work overseas, or quietly trim what's delivered. We took a third path — real accounting in cash-tight times, without compromise.</p>
            <div className="term rv">$ audit --industry-discount-trick --classify<span className="cx"></span></div>
          </div>
        </div>
        <div className="cards">
          <div className="card rv"><span className="cglyph"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7.5" /><path d="M3.5 11 h15 M11 3.5 c3 2.5 3 12.5 0 15 M11 3.5 c-3 2.5 -3 12.5 0 15" /><path d="M17 17 l4 4 M18 21 h3 v-3" /></svg></span><div className="ct">Industry Option A</div><h3>Offshore the work</h3><div className="sub">Cheap headline rate.</div>
            <div className="crow"><span className="rk">WHERE</span><span className="rv2">Bookkeepers in Manila, Mumbai, Cebu</span></div>
            <div className="crow"><span className="rk">TRADE-OFF</span><span className="rv2">Time-zone lag, accent friction, weak CRA fluency</span></div>
            <div className="crow"><span className="rk">QUALITY</span><span className="rv2">Inconsistent · senior CPA rarely touches the file</span></div>
            <div className="crow"><span className="rk">CANADIAN?</span><span className="rv2">No — your data leaves the country</span></div></div>
          <div className="card rv"><span className="cglyph"><svg viewBox="0 0 24 24"><circle cx="6.5" cy="6.5" r="2.6" /><circle cx="6.5" cy="17.5" r="2.6" /><path d="M8.7 8.3 L20 17 M8.7 15.7 L20 7" /></svg></span><div className="ct">Industry Option B</div><h3>Cut the scope</h3><div className="sub">Same Canadian team, less work done.</div>
            <div className="crow"><span className="rk">WHERE</span><span className="rv2">Domestic — billed by the minute</span></div>
            <div className="crow"><span className="rk">TRADE-OFF</span><span className="rv2">Reconciliations only · no advisory, no planning</span></div>
            <div className="crow"><span className="rk">QUALITY</span><span className="rv2">Compliance-grade · zero forward look</span></div>
            <div className="crow"><span className="rk">CANADIAN?</span><span className="rv2">Yes — but you're only buying half a service</span></div></div>
          <div className="card hl rv"><span className="cglyph on"><svg viewBox="0 0 24 24"><path d="M12 2.5 L19.5 5.5 V11 C19.5 16 16 19.8 12 21.5 C8 19.8 4.5 16 4.5 11 V5.5 Z" /><path d="M12 7 l1.1 2.4 2.6 .3 -1.9 1.8 .5 2.6 -2.3 -1.3 -2.3 1.3 .5 -2.6 -1.9 -1.8 2.6 -.3 Z" /></svg></span><div className="ct">[ Blue North ]</div><h3>Top-quality. 100% Canadian.</h3><div className="sub">No offshoring. No corner-cutting.</div>
            <div className="crow"><span className="rk">WHERE</span><span className="rv2">Toronto-based, fully Canadian team</span></div>
            <div className="crow"><span className="rk">TRADE-OFF</span><span className="rv2">None — we eat the overhead, not the scope</span></div>
            <div className="crow"><span className="rk">QUALITY</span><span className="rv2">CPA-led · monthly forward-looking advisory included</span></div>
            <div className="crow"><span className="rk">CANADIAN?</span><span className="rv2">Yes — every byte stays in Canada</span></div>
            <div className="tags"><i></i>CPA · CANADA · NO OFFSHORING</div></div>
        </div>
      </div></section>

      <section className="sec"><div className="wrap">
        <div className="lbl rv">[ THE COST STACK ]</div>
        <h2 className="rv" style={{ maxWidth: 900 }}>We rebuilt the studio around tech — so the savings come from overhead, not your scope.</h2>
        <div className="stackgrid" id="stack">
          <div className="scard rv">
            <div className="sh"><span className="t">TYPICAL MID-SIZE FIRM</span><span className="u">WHERE EVERY $1 OF FEES GOES</span></div>
            <div className="srow"><span>Office &amp; rent</span><span className="track"><span className="fill" data-w="22"></span></span><span className="amt"><span className="cnt" data-to="22">0</span>¢</span></div>
            <div className="srow"><span>Admin &amp; partners</span><span className="track"><span className="fill" data-w="18"></span></span><span className="amt"><span className="cnt" data-to="18">0</span>¢</span></div>
            <div className="srow"><span>Legacy software</span><span className="track"><span className="fill" data-w="12"></span></span><span className="amt"><span className="cnt" data-to="12">0</span>¢</span></div>
            <div className="srow"><span>Mgmt layers</span><span className="track"><span className="fill" data-w="10"></span></span><span className="amt"><span className="cnt" data-to="10">0</span>¢</span></div>
            <div className="srow big"><span>Actual client work</span><span className="track"><span className="fill" data-w="38"></span></span><span className="amt"><span className="cnt" data-to="38">0</span>¢</span></div>
            <div className="stot"><span>GOES TO YOUR BOOKS</span><span><b><span className="cnt" data-to="38">0</span>¢</b> of every $1</span></div>
          </div>
          <div className="scard hl rv">
            <div className="sh"><span className="t">BLUE NORTH</span><span className="u">WHERE EVERY $1 OF FEES GOES</span></div>
            <div className="srow"><span>Modern stack</span><span className="track"><span className="fill" data-w="8"></span></span><span className="amt"><span className="cnt" data-to="8">0</span>¢</span></div>
            <div className="srow"><span>Studio ops</span><span className="track"><span className="fill" data-w="6"></span></span><span className="amt"><span className="cnt" data-to="6">0</span>¢</span></div>
            <div className="srow big"><span>Actual client work</span><span className="track"><span className="fill" data-w="86"></span></span><span className="amt"><span className="cnt" data-to="86">0</span>¢</span></div>
            <div className="stot"><span>GOES TO YOUR BOOKS</span><span><b><span className="cnt" data-to="86">0</span>¢</b> of every $1</span></div>
          </div>
        </div>
        <div className="bullets">
          <div className="rv"><b>Virtual-first</b> — no Bay Street rent line, no boardroom theatre.</div>
          <div className="rv"><b>Latest accounting + automation tooling</b> — workflows that take hours, not days.</div>
          <div className="rv"><b>Lean studio model</b> — every file is touched by a senior, not handed down a five-layer org chart.</div>
          <div className="rv"><b>Every dollar saved</b> goes back into deeper, forward-looking work for you.</div>
        </div>
      </div></section>

      <section className="sec"><div className="wrap">
        <div className="lbl rv">[ OPERATING PRINCIPLES ]</div>
        <h2 className="rv">What we hold to.</h2>
        <div className="pgrid">
          <div className="prin rv">
            <div className="ptop"><span className="picon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M12 4.5 L14.5 12.5 L12 10.8 L9.5 12.5 Z" /></svg></span><span className="n">01</span></div>
            <h3>Forward-looking</h3><p>We use last month's books to plan next quarter — not just to reconcile what already happened.</p>
          </div>
          <div className="prin rv">
            <div className="ptop"><span className="picon"><svg viewBox="0 0 24 24"><path d="M4 5 h16 v10 H9 l-4 3.5 V15 H4 Z" /><path d="M8 9.5 h8 M8 12.5 h5" /></svg></span><span className="n">02</span></div>
            <h3>Plain-spoken</h3><p>No jargon walls. If you can't explain a number to your team, we haven't finished the job.</p>
          </div>
          <div className="prin rv">
            <div className="ptop"><span className="picon"><svg viewBox="0 0 24 24"><path d="M12 21.5 C 12 21.5 19 15.5 19 10 A7 7 0 1 0 5 10 C5 15.5 12 21.5 12 21.5 Z" /><circle cx="12" cy="10" r="2.6" /></svg></span><span className="n">03</span></div>
            <h3>Local first</h3><p>We live and work where you do. Quarterly reviews happen in your space, not over a faceless portal.</p>
          </div>
          <div className="prin rv">
            <div className="ptop"><span className="picon"><svg viewBox="0 0 24 24"><path d="M12 3 L19 6 V11 C19 15.5 16 19 12 21 C8 19 5 15.5 5 11 V6 Z" /><path d="M9 11.5 L11 13.5 L15.2 9.3" /></svg></span><span className="n">04</span></div>
            <h3>CPA-led</h3><p>Our work is led and reviewed by a Chartered Professional Accountant — so the rigour stays high without the big-firm overhead.</p>
          </div>
        </div>
      </div></section>

      <style>{`
        .bnp{ --paper:#fbfaf6; --paper2:#f3f1e9; --ink:#0a1628; --muted:#5b647a;
          --blue:#2d4ef5; --blue2:#4d68f7; --peri:#8098ff; --navy:#091225; --navy2:#05080f;
          --line:rgba(10,22,40,.12);
          --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'Space Grotesk','Inter Tight',system-ui,sans-serif;
          background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
        .bnp *{box-sizing:border-box;margin:0;padding:0}
        .bnp .wrap{max-width:1200px;margin:0 auto;padding:0 48px}
        .bnp .lbl{font-family:var(--mono);font-size:13px;letter-spacing:3px;color:var(--blue);text-transform:uppercase}
        .bnp .rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
        .bnp .rv.in{opacity:1;transform:none}
        .bnp .hero{position:relative;background:radial-gradient(120% 90% at 30% -10%,#182a6b 0%,var(--navy) 45%,var(--navy2) 100%);color:#eaf0ff;overflow:hidden}
        .bnp .hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}
        .bnp .hero .wrap{position:relative;z-index:2;padding:110px 48px 96px}
        .bnp .hero .lbl{color:var(--peri)}
        .bnp .hero h1{font-size:clamp(52px,8vw,116px);line-height:.98;letter-spacing:-.045em;font-weight:680;margin:26px 0 0;color:#eaf0ff}
        .bnp .hero h1 .it{font-style:italic;font-weight:600;background:linear-gradient(100deg,var(--peri),#6c7ef2 60%,var(--peri));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shine 5s linear infinite}
        @keyframes shine{to{background-position:200% center}}
        .bnp .herorow{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:56px;align-items:start}
        .bnp .herorow .k{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:rgba(234,240,255,.5);padding-top:6px}
        .bnp .herorow p{font-size:clamp(17px,1.7vw,21px);line-height:1.6;color:rgba(234,240,255,.82)}
        .bnp .herorow p em{font-style:italic;color:var(--peri)}
        .bnp h2,.bnp h3{color:var(--ink)}
        .bnp .sec{padding:104px 0}
        .bnp .split{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start;margin-top:26px}
        .bnp h2{font-size:clamp(34px,5vw,62px);line-height:1.02;letter-spacing:-.03em;font-weight:680}
        .bnp .body p{font-size:clamp(15px,1.5vw,18px);line-height:1.7;color:var(--muted);margin-bottom:18px}
        .bnp .body p:last-child{margin-bottom:0}.bnp .body em{font-style:italic;color:var(--ink)}
        .bnp .pricing{background:var(--paper2)}
        .bnp .term{font-family:var(--mono);font-size:15px;color:var(--blue);background:rgba(45,78,245,.06);border:1px solid rgba(45,78,245,.2);border-radius:10px;padding:14px 20px;display:inline-flex;align-items:center;gap:10px;margin-top:30px}
        .bnp .term .cx{width:9px;height:20px;background:var(--blue);display:inline-block;animation:bl .9s steps(1) infinite}
        @keyframes bl{0%,49%{opacity:1}50%,100%{opacity:0}}
        .bnp .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
        .bnp .card{position:relative;background:#faf8f1;border:1px solid var(--line);border-radius:16px;padding:30px 28px;transition:transform .3s,box-shadow .3s}
        .bnp .card:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(10,22,40,.1)}
        .bnp .card.hl{background:#fff;border-color:transparent;box-shadow:0 30px 70px rgba(45,78,245,.16)}
        .bnp .card.hl:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,var(--blue),var(--blue2))}
        .bnp .card .ct{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
        .bnp .card.hl .ct{color:var(--blue)}
        .bnp .card h3{font-size:24px;font-weight:660;letter-spacing:-.01em;margin:14px 0 6px}
        .bnp .card .sub{font-size:14px;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
        .bnp .crow{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:9px 0;font-size:13.5px}
        .bnp .crow .rk{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--muted);padding-top:2px}
        .bnp .crow .rv2{color:var(--ink);line-height:1.4}
        .bnp .tags{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--blue);display:flex;align-items:center;gap:8px}
        .bnp .tags i{width:7px;height:7px;border-radius:50%;background:var(--blue)}
        .bnp .stackgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
        .bnp .scard{background:#faf8f1;border:1px solid var(--line);border-radius:16px;padding:30px}
        .bnp .scard.hl{background:#fff;box-shadow:0 24px 60px rgba(45,78,245,.12)}
        .bnp .scard .sh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
        .bnp .scard .sh .t{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--muted)}.bnp .scard.hl .sh .t{color:var(--blue)}
        .bnp .scard .sh .u{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--muted)}
        .bnp .srow{display:grid;grid-template-columns:150px 1fr 46px;gap:14px;align-items:center;padding:8px 0;font-size:14px}
        .bnp .srow .track{height:12px;border-radius:7px;background:rgba(10,22,40,.08);overflow:hidden}
        .bnp .srow .fill{height:100%;width:0;border-radius:7px;background:rgba(10,22,40,.28);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
        .bnp .srow.big .fill{background:var(--ink)}.bnp .scard.hl .srow .fill{background:rgba(45,78,245,.4)}
        .bnp .scard.hl .srow.big .fill{background:linear-gradient(90deg,var(--blue),var(--blue2))}
        .bnp .srow .amt{font-family:var(--mono);font-size:14px;text-align:right;color:var(--ink)}.bnp .srow.big{font-weight:640}
        .bnp .stot{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--muted)}
        .bnp .stot b{font-size:30px;letter-spacing:-1px}.bnp .scard .stot b{color:var(--ink)}.bnp .scard.hl .stot b{color:var(--blue)}
        .bnp .bullets{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;margin-top:40px}
        .bnp .bullets div{font-size:15px;color:var(--muted);line-height:1.5;padding-left:22px;position:relative}
        .bnp .bullets div:before{content:"▸";position:absolute;left:0;color:var(--blue)}.bnp .bullets b{color:var(--ink);font-weight:600}
        .bnp .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px}
        .bnp .prin{border-top:1px solid var(--line);padding-top:22px}
        .bnp .prin .n{font-family:var(--mono);font-size:12px;color:var(--muted)}
        .bnp .prin h3{font-size:23px;font-weight:640;margin:0 0 12px}
        .bnp .prin p{font-size:14.5px;line-height:1.55;color:var(--muted)}
        .bnp .prin .ptop{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
        .bnp .picon{width:46px;height:46px;border-radius:13px;background:rgba(45,78,245,.08);display:inline-flex;align-items:center;justify-content:center}
        .bnp .picon svg{width:23px;height:23px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
        .bnp .prin:hover .picon{background:rgba(45,78,245,.14)}

        /* Foresight chart */
        .bnp .foresight{margin-top:58px;background:radial-gradient(120% 140% at 18% -25%,#13234c,#0a1430 55%,#070d20);border:1px solid rgba(140,175,255,.16);border-radius:22px;padding:34px 38px 30px;box-shadow:0 34px 90px rgba(9,18,37,.30)}
        .bnp .fs-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
        .bnp .fs-tag{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--peri);border:1px solid rgba(128,152,255,.32);border-radius:999px;padding:5px 13px}
        .bnp .fs-head h3{color:#eaf0ff;font-size:clamp(19px,2.4vw,29px);font-weight:640;letter-spacing:-.02em}
        .bnp .fs-head .nowx{color:#4d9fff}
        .bnp .fs-svg{width:100%;height:auto;display:block;margin:8px 0 2px}
        .bnp .fs-grid{stroke:rgba(174,190,255,.08);stroke-width:1}
        .bnp .fs-past{fill:none;stroke:#4d9fff;stroke-width:2.6;stroke-linecap:round}
        .bnp .fs-fwd{fill:none;stroke:url(#fsFwd);stroke-width:3;stroke-dasharray:1 9;stroke-linecap:round}
        .bnp .fs-fwd-glow{fill:none;stroke:#6d8bff;stroke-width:9;opacity:.16;stroke-linecap:round}
        .bnp .fs-now{stroke:rgba(174,190,255,.42);stroke-width:1.4;stroke-dasharray:3 5}
        .bnp .fs-now-t{fill:#aebbff;font-family:var(--mono);font-size:13px;letter-spacing:3px}
        .bnp .fs-node{fill:#4d9fff}
        .bnp .fs-target{fill:#8098ff}
        .bnp .fs-target-ring{stroke:#8098ff;stroke-width:1.5}
        .bnp .fs-pulse{fill:#cfe0ff}
        .bnp .fs-note{fill:rgba(174,190,255,.6);font-family:var(--mono);font-size:12px;letter-spacing:.5px}
        .bnp .fs-note.fwd{fill:#8098ff}
        .bnp .fs-cap{fill:rgba(174,190,255,.5);font-family:var(--mono);font-size:12.5px;letter-spacing:1px}
        .bnp .fs-cap.fwd{fill:rgba(128,152,255,.9)}
        .bnp .fs-legend{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
        .bnp .fs-leg{font-size:14.5px;color:rgba(234,240,255,.72);line-height:1.5;padding-left:24px;position:relative}
        .bnp .fs-leg b{color:#eaf0ff;font-weight:600}
        .bnp .fs-leg .d{position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%}
        .bnp .fs-leg.back .d{background:#4d9fff}
        .bnp .fs-leg.fwd .d{background:linear-gradient(90deg,#6d8bff,#4d9fff)}

        /* Merge diagram */
        .bnp .merge{margin-top:44px}
        .bnp .mg-svg{width:100%;height:auto;display:block;max-width:1040px;margin:0 auto}
        .bnp .mg-node{fill:#fff;stroke:var(--line);stroke-width:1}
        .bnp .mg-k{font-family:var(--mono);font-size:14px;letter-spacing:1.5px;fill:var(--ink);font-weight:600}
        .bnp .mg-s{font-family:var(--mono);font-size:12px;letter-spacing:.4px;fill:var(--muted)}
        .bnp .mg-plus-c{fill:#eef1ff;stroke:rgba(45,78,245,.3)}
        .bnp .mg-plus-t{fill:var(--blue);font-size:24px;font-family:var(--sans);text-anchor:middle;font-weight:600}
        .bnp .mg-conn{fill:none;stroke:rgba(45,78,245,.5);stroke-width:2;stroke-dasharray:1 8;stroke-linecap:round}
        .bnp .mg-pulse{fill:var(--blue)}
        .bnp .mg-res-k{fill:#fff;font-family:var(--sans);font-size:30px;font-weight:700;letter-spacing:-.015em}
        .bnp .mg-res-s{fill:rgba(255,255,255,.9);font-family:var(--mono);font-size:13px;letter-spacing:.4px}

        /* Pricing card glyphs */
        .bnp .cglyph{position:absolute;top:26px;right:26px;width:26px;height:26px;opacity:.75}
        .bnp .cglyph svg{width:26px;height:26px;fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
        .bnp .cglyph.on svg{stroke:var(--blue)}
        .bnp .cglyph.on{opacity:1}
        @media (max-width:900px){.bnp .herorow,.bnp .split,.bnp .stackgrid,.bnp .bullets{grid-template-columns:1fr;gap:26px}.bnp .cards{grid-template-columns:1fr}.bnp .pgrid{grid-template-columns:1fr 1fr}.bnp .sec{padding:72px 0}.bnp .hero .wrap{padding:80px 48px 68px}}
        @media (max-width:560px){.bnp .pgrid{grid-template-columns:1fr}.bnp .wrap{padding:0 22px}.bnp .hero .wrap{padding:64px 22px 56px}}
        @media (max-width:900px){.bnp .fs-legend{grid-template-columns:1fr}.bnp .foresight{padding:26px 22px 24px}}
        @media (prefers-reduced-motion:reduce){.bnp .rv{opacity:1;transform:none}.bnp .hero h1 .it{animation:none}.bnp .term .cx{animation:none}.bnp .fs-pulse,.bnp .fs-target-ring,.bnp .mg-pulse{display:none}}
      `}</style>
    </div>
  );
}

function App() {
  useReveal();
  return (
    <>
      <Nav active="about" />
      <main>
        <AboutBody />
      </main>
      <Footer />
      <TweaksHost />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);