// Services page for Blue North Accounting
const { useState: _useState3, useEffect: _useEffect3 } = React;

const _prefersReduce = () =>
  typeof window !== 'undefined' && window.matchMedia
    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
    : false;

const SERVICE_DETAIL = [
  {
    id: 'bookkeeping',
    n: '01',
    title: 'Bookkeeping',
    tag: 'Monthly cadence',
    summary: 'Cloud-first books that close on time, every month. So your numbers are decision-ready instead of a year-end fire drill.',
    bullets: [
      'Monthly bank, credit card, and merchant reconciliation',
      'Accounts payable & receivable management',
      'HST returns prepared and filed',
      'Payroll integration with Wagepoint, Payworks, or Xero Payroll',
      'Monthly P&L, balance sheet, and cash flow statement',
      'Books closed by the 10th of the following month',
    ],
    tools: ['Xero', 'QuickBooks Online', 'Dext', 'Hubdoc', 'Plooto'],
  },
  {
    id: 'tax',
    n: '02',
    title: 'Tax & compliance',
    tag: 'CPA-reviewed',
    summary: 'Corporate, personal, and HST handled with the rigour you\'d expect from a national firm — reviewed by a CPA, at roughly half the cost of one.',
    bullets: [
      'T2 corporate tax returns',
      'T1 personal tax for owners and family',
      'T4 / T4A / T5 information slips',
      'HST registrations and quarterly / annual filings',
      'WSIB and EHT compliance',
      'CRA correspondence, audits, and reviews handled on your behalf',
    ],
    tools: ['CCH iFirm', 'TaxCycle', 'CRA My Business Account'],
  },
  {
    id: 'cfo',
    n: '03',
    title: 'Outsourced CFO',
    tag: 'Forward-looking',
    summary: 'A senior finance partner in your corner — without a full-time salary on payroll. Cash flow, KPIs, and lender-ready reporting on a monthly cadence.',
    bullets: [
      '13-week rolling cash flow forecast',
      'Monthly KPI dashboard tailored to your business model',
      'Annual budget and quarterly reforecast',
      'Lender packages and covenant compliance reporting',
      'Pricing, margin, and unit economics analysis',
      'Monthly leadership review with the owner',
    ],
    tools: ['Fathom', 'Float', 'Syft', 'LiveFlow'],
  },
  {
    id: 'advisory',
    n: '04',
    title: 'Advisory',
    tag: 'Ad hoc + quarterly',
    summary: 'A trusted second opinion on the decisions that matter most. Hire, finance, expand, exit — we\'ll model it before you commit to it.',
    bullets: [
      'Capital strategy and financing readiness',
      'Buy-side and sell-side support',
      'Owner compensation and dividend planning',
      'Estate, succession, and exit planning',
      'Quarterly business reviews with the leadership team',
      'Ad-hoc problem solving as it comes up',
    ],
    tools: ['Excel', 'Google Sheets', 'Custom models'],
  },
];



const FAQ = [
  { q: 'Do you work in person or remotely?', a: 'Cloud-first by design — we serve clients in every province, across every time zone. Most clients prefer a hybrid: quarterly on-site reviews where geography allows, otherwise everything over Loom and Zoom.' },
  { q: 'What software do you use?', a: 'Xero or QuickBooks Online for the books. We\'ll migrate you onto whichever fits your business better, and we cover the licences as part of our packages.' },
  { q: 'Can I switch from my current accountant mid-year?', a: 'Yes — and most of our clients do. We handle the handoff, including requesting working papers from your previous firm and reconciling any gaps. The transition is invisible to you.' },
  { q: 'Are you a CPA firm?', a: 'Blue North is CPA-led — our work is directed and reviewed by a Chartered Professional Accountant. We pair that rigour with a lean, modern operating model so you get senior judgement without big-firm overhead.' },
  { q: 'How much does it cost?', a: 'Most clients cut their accounting spend by close to half versus a traditional firm or in-house hire. We scope every engagement after a discovery call and quote a flat monthly number — no surprise invoices, no hourly meters.' },
];

function ServicesHero() {
  return (
    <section className="hero-stage">
      <HeroBG />
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div className="reveal">
          <span className="eyebrow">Services</span>
        </div>
        <h1 className="reveal" style={{ marginTop: 24, fontSize: 'clamp(48px, 8vw, 112px)', letterSpacing: '-0.04em' }}>
          The full finance<br />stack — under<br />
          <span className="hs-em">one Canadian roof.</span>
        </h1>
        <p className="lead reveal" style={{ marginTop: 40, maxWidth: '60ch' }}>
          Bookkeeping, tax, CFO, and advisory — packaged together so the work flows
          end-to-end, instead of bouncing between disconnected providers. Pick the
          mix that fits where the business is today.
        </p>
        <div className="reveal" style={{ marginTop: 48, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          {SERVICE_DETAIL.map(s => (
            <a key={s.id} href={`#${s.id}`} className="chip" style={{ padding: '8px 14px', fontSize: 12.5 }}>
              {s.n} · {s.title}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Live product mockup shell (dark, glowing, mono) ----
function PMShell({ title, children }) {
  return (
    <div className="pm">
      <span className="pm-corner tl" aria-hidden="true"></span>
      <span className="pm-corner tr" aria-hidden="true"></span>
      <span className="pm-corner bl" aria-hidden="true"></span>
      <span className="pm-corner br" aria-hidden="true"></span>
      <span className="pm-scan" aria-hidden="true"></span>
      <div className="pm-top">
        <span className="pm-traffic"><i></i><i></i><i></i></span>
        <span className="pm-title">{title}</span>
        <span className="pm-live"><span className="pm-live-dot"></span>LIVE</span>
      </div>
      <div className="pm-body">{children}</div>
    </div>
  );
}

// 01 · Bookkeeping — live reconciliation feed
function MockBookkeeping() {
  const ROWS = [
    { d: '07-24', m: 'Stripe payout', c: 'Revenue', a: '+4,820.00', pos: true },
    { d: '07-24', m: 'Shopify fees', c: 'Fees', a: '-212.40' },
    { d: '07-23', m: 'WestJet 837', c: 'Travel', a: '-540.00' },
    { d: '07-23', m: 'Interac · J. Roy', c: 'Revenue', a: '+1,200.00', pos: true },
    { d: '07-22', m: 'Rogers', c: 'Utilities', a: '-189.00', flag: true },
  ];
  const [scan, setScan] = _useState3(0);
  _useEffect3(() => {
    if (_prefersReduce()) return;
    const id = setInterval(() => setScan(s => (s + 1) % ROWS.length), 1500);
    return () => clearInterval(id);
  }, []);
  return (
    <PMShell title="ledger.live">
      <div className="pm-statrow">
        <div className="pm-stat"><span className="pm-stat-v">0<em>hrs</em></span><span className="pm-stat-k">Manual entry</span></div>
        <div className="pm-stat"><span className="pm-stat-v">10<em>th</em></span><span className="pm-stat-k">Books closed by</span></div>
        <div className="pm-stat"><span className="pm-stat-v pos">+$6.0k</span><span className="pm-stat-k">Net · today</span></div>
      </div>
      <div className="pm-recon-head">
        <span className="pm-k">Bank feed · auto-categorizing</span>
        <span className="pm-badge">AI + CPA</span>
      </div>
      <ul className="pm-rows">
        {ROWS.map((r, i) => (
          <li key={i} className={`pm-row ${i === scan ? 'on' : ''} ${r.flag ? 'is-flag' : ''}`}>
            <span className="pm-date">{r.d}</span>
            <span className="pm-merch">{r.m}</span>
            <span className={`pm-cat ${r.flag ? 'flag' : ''}`}>{r.flag ? 'REVIEW' : r.c}</span>
            <span className={`pm-amt ${r.pos ? 'pos' : 'neg'}`}>{r.a}</span>
            <span className="pm-check">{r.flag ? '!' : '✓'}</span>
          </li>
        ))}
      </ul>
      <div className="pm-recon-foot">
        <div className="pm-meter"><span className="pm-meter-fill" style={{ width: '98.7%' }}></span></div>
        <div className="pm-meter-row"><span>Reconciled · this month</span><span className="pm-accent">98.7%</span></div>
      </div>
    </PMShell>
  );
}

// 02 · Tax & compliance — filing calendar + HST reserve
function MockTax() {
  const FILINGS = [
    { k: 'T2 · Corporate', due: 'Jun 30', st: 'FILED', cls: 'ok' },
    { k: 'HST · Q3', due: 'Oct 31', st: 'RESERVED', cls: 'acc' },
    { k: 'T4 / T5 slips', due: 'Feb 28', st: 'SCHEDULED', cls: 'dim' },
    { k: 'T1 · Personal', due: 'Apr 30', st: 'UPCOMING', cls: 'dim' },
  ];
  return (
    <PMShell title="cra-filings.ca">
      <div className="pm-taxtop">
        <div className="pm-ring">
          <svg viewBox="0 0 84 84">
            <circle className="pm-ring-bg" cx="42" cy="42" r="34" />
            <circle className="pm-ring-fg" cx="42" cy="42" r="34" transform="rotate(-90 42 42)" />
          </svg>
          <div className="pm-ring-c"><b>100%</b><span>on-time</span></div>
        </div>
        <div className="pm-taxmeta">
          <span className="pm-k">Next deadline · handled</span>
          <div className="pm-taxdue">HST · Q3 <b>Oct 31</b></div>
          <div className="pm-taxsub">Reserve already set aside — nothing to scramble for.</div>
          <span className="pm-badge">CPA-reviewed · CRA-ready</span>
        </div>
      </div>
      <div className="pm-recon-head">
        <span className="pm-k">Filing calendar · FY26</span>
        <span className="pm-badge">4 / 4 tracked</span>
      </div>
      <ul className="pm-filings">
        {FILINGS.map((f, i) => (
          <li key={i} className="pm-filing">
            <span className="pm-dot2"></span>
            <span className="pm-fk">{f.k}</span>
            <span className="pm-fdue">{f.due}</span>
            <span className={`pm-pill ${f.cls}`}>{f.st}</span>
          </li>
        ))}
      </ul>
      <div className="pm-hst">
        <div className="pm-meter-row"><span>HST set aside · this quarter</span><span className="pm-accent">72%</span></div>
        <div className="pm-meter"><span className="pm-meter-fill" style={{ width: '72%' }}></span></div>
        <div className="pm-hst-sub">$18,240 reserved automatically — nothing due at filing.</div>
      </div>
    </PMShell>
  );
}

// 03 · Outsourced CFO — cash-flow forecast dashboard
function MockCFO() {
  const BARS = [30, 40, 36, 48, 44, 56, 52, 64, 60, 72, 70, 82, 92];
  return (
    <PMShell title="cfo.dashboard">
      <div className="pm-kpis">
        <div className="pm-kpi"><span className="pm-kk">Cash on hand</span><span className="pm-kv">$128.4k</span></div>
        <div className="pm-kpi"><span className="pm-kk">Runway</span><span className="pm-kv pm-accent">9.4 mo</span></div>
        <div className="pm-kpi"><span className="pm-kk">Net burn</span><span className="pm-kv">$13.6k</span></div>
      </div>
      <div className="pm-chart-head">
        <span className="pm-k">13-week cash forecast</span>
        <span className="pm-trend">&#9650; 12% projected</span>
      </div>
      <div className="pm-chart">
        <svg className="pm-grid-svg" viewBox="0 0 300 100" preserveAspectRatio="none" aria-hidden="true">
          {[25, 50, 75].map((y) => <line key={y} x1="0" y1={y} x2="300" y2={y} />)}
        </svg>
        <div className="pm-bars">
          {BARS.map((h, i) => (
            <span key={i} className={`pm-bar ${i >= 9 ? 'proj' : ''}`} style={{ height: `${h}%`, animationDelay: `${i * 0.05}s` }}></span>
          ))}
        </div>
        <svg className="pm-trendline" viewBox="0 0 300 100" preserveAspectRatio="none" aria-hidden="true">
          <polyline points="11,70 35,60 58,64 81,52 104,56 127,44 150,48 173,36 196,40 219,28 242,30 265,18 289,8" />
        </svg>
        <span className="pm-target"><span className="pm-target-dot"></span>target</span>
      </div>
      <div className="pm-chart-x"><span>W1</span><span>projected &#8594;</span><span>W13</span></div>
    </PMShell>
  );
}

// 04 · Advisory — interactive what-if scenario model
function MockAdvisory() {
  const SCEN = [
    { name: 'Hire now', delta: '+18%', sub: 'capacity · breakeven wk 7' },
    { name: 'Wait a quarter', delta: '+4%', sub: 'capacity · slower ramp' },
  ];
  const [sc, setSc] = _useState3(0);
  _useEffect3(() => {
    if (_prefersReduce()) return;
    const id = setInterval(() => setSc(s => (s + 1) % 2), 2800);
    return () => clearInterval(id);
  }, []);
  return (
    <PMShell title="scenario.model">
      <div className="pm-recon-head">
        <span className="pm-k">What-if · revenue projection</span>
        <span className="pm-badge">Modeled</span>
      </div>
      <div className="pm-adv-chart">
        <svg viewBox="0 0 300 118" preserveAspectRatio="none">
          <defs>
            <linearGradient id="advFill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="rgba(77,159,255,0.34)" />
              <stop offset="1" stopColor="rgba(77,159,255,0)" />
            </linearGradient>
          </defs>
          {[30, 59, 88].map((y) => <line key={y} className="pm-adv-grid" x1="0" y1={y} x2="300" y2={y} />)}
          <polygon className={`pm-area ${sc === 0 ? 'on' : ''}`} points="0,104 60,88 120,68 180,46 240,26 300,10 300,118 0,118" fill="url(#advFill)" />
          <polyline className={`pm-line b ${sc === 1 ? 'on' : ''}`} points="0,104 60,96 120,86 180,74 240,62 300,50" />
          <polyline className={`pm-line a ${sc === 0 ? 'on' : ''}`} points="0,104 60,88 120,68 180,46 240,26 300,10" />
        </svg>
        <span className={`pm-adv-dot ${sc === 0 ? 'a' : 'b'}`}></span>
      </div>
      <div className="pm-adv-opts">
        {SCEN.map((s, i) => (
          <button key={i} type="button" className={`pm-opt ${sc === i ? 'on' : ''}`} onClick={() => setSc(i)}>
            <span className="pm-opt-name">{s.name}</span>
            <span className="pm-opt-delta">{s.delta}</span>
            <span className="pm-opt-sub">{s.sub}</span>
          </button>
        ))}
      </div>
      <div className="pm-adv-rec"><span className="pm-rec-dot"></span>Recommended: <b>Hire now</b> — pays back in 7 weeks</div>
    </PMShell>
  );
}

const SERVICE_MOCKS = {
  bookkeeping: MockBookkeeping,
  tax: MockTax,
  cfo: MockCFO,
  advisory: MockAdvisory,
};

function ServiceDetailBlocks() {
  return (
    <section>
      <div className="wrap">
        {SERVICE_DETAIL.map((s, idx) => {
          const Mock = SERVICE_MOCKS[s.id];
          const flip = idx % 2 === 1;
          return (
            <article key={s.id} id={s.id} className={`svc-block reveal ${flip ? 'is-flip' : ''}`}>
              <div className="svc-block-info">
                <div className="svc-block-tags">
                  <span className="numlabel">{s.n} / 04</span>
                  <span className="chip">{s.tag}</span>
                </div>
                <h2>{s.title}</h2>
                <p className="lead" style={{ marginTop: 16, color: 'var(--ink-2)' }}>{s.summary}</p>
                <ul className="svc-bullets2">
                  {s.bullets.map(b => <li key={b}>{b}</li>)}
                </ul>
                <div className="svc-block-tools">
                  <span className="numlabel">STACK</span>
                  <div className="svc-tools-row">
                    {s.tools.map(t => <span className="chip" key={t}>{t}</span>)}
                  </div>
                </div>
              </div>
              <div className="svc-block-viz">
                {Mock ? <Mock /> : null}
              </div>
            </article>
          );
        })}
      </div>
      <style>{`
        .svc-block {
          display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
          align-items: center; padding: 72px 0; border-top: 1px solid var(--line);
        }
        .svc-block:first-child { border-top: none; padding-top: 8px; }
        .svc-block.is-flip .svc-block-viz { order: -1; }
        @media (max-width: 940px) {
          .svc-block { grid-template-columns: 1fr; gap: 30px; padding: 48px 0; }
          .svc-block.is-flip .svc-block-viz { order: 0; }
        }
        .svc-block h2 { font-size: clamp(32px, 4vw, 52px); }
        .svc-block-tags { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
        .svc-bullets2 { list-style: none; padding: 0; margin: 26px 0 0; }
        .svc-bullets2 li {
          padding: 11px 0; border-bottom: 1px solid var(--line-2);
          font-size: 15px; color: var(--ink); display: flex; gap: 12px; align-items: flex-start;
        }
        .svc-bullets2 li::before { content: "\\2192"; color: var(--rust); flex: none; font-family: var(--font-mono); }
        .svc-block-tools { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
        .svc-tools-row { display: flex; flex-wrap: wrap; gap: 6px; }
        .svc-block-viz { position: relative; }

        /* ---------- Product mockup shell ---------- */
        .pm {
          position: relative; border-radius: 16px; overflow: hidden;
          background:
            radial-gradient(120% 85% at 100% 0%, rgba(45,78,245,0.20), transparent 58%),
            radial-gradient(90% 80% at 0% 112%, rgba(77,104,247,0.13), transparent 55%),
            linear-gradient(180deg, #0d1a30 0%, #070d1c 100%);
          border: 1px solid rgba(140,170,255,0.14);
          box-shadow: 0 0 0 1px rgba(45,78,245,0.10), 0 26px 60px rgba(6,11,24,0.5), 0 0 70px rgba(45,78,245,0.10);
          color: #e8eeff; font-family: var(--font-mono);
        }
        .pm::before {
          content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6; z-index: 0;
          background:
            repeating-linear-gradient(0deg, transparent 0 25px, rgba(150,180,255,0.035) 25px 26px),
            repeating-linear-gradient(90deg, transparent 0 25px, rgba(150,180,255,0.035) 25px 26px);
        }
        .pm > * { position: relative; z-index: 1; }
        /* framed HUD corner ticks */
        .pm-corner { position: absolute; width: 16px; height: 16px; z-index: 3; pointer-events: none; opacity: 0.7; }
        .pm-corner::before, .pm-corner::after { content: ""; position: absolute; background: rgba(120,160,255,0.55); box-shadow: 0 0 8px rgba(77,159,255,0.5); }
        .pm-corner::before { width: 100%; height: 1.5px; }
        .pm-corner::after { width: 1.5px; height: 100%; }
        .pm-corner.tl { top: 9px; left: 9px; } .pm-corner.tl::before,.pm-corner.tl::after { top: 0; left: 0; }
        .pm-corner.tr { top: 9px; right: 9px; } .pm-corner.tr::before { top: 0; right: 0; } .pm-corner.tr::after { top: 0; right: 0; }
        .pm-corner.bl { bottom: 9px; left: 9px; } .pm-corner.bl::before { bottom: 0; left: 0; } .pm-corner.bl::after { bottom: 0; left: 0; }
        .pm-corner.br { bottom: 9px; right: 9px; } .pm-corner.br::before { bottom: 0; right: 0; } .pm-corner.br::after { bottom: 0; right: 0; }
        /* slow scanning beam */
        .pm-scan { position: absolute; left: 0; right: 0; top: 0; height: 34%; z-index: 2; pointer-events: none;
          background: linear-gradient(180deg, transparent, rgba(77,159,255,0.09) 60%, rgba(120,160,255,0.16));
          border-bottom: 1px solid rgba(120,160,255,0.28);
          animation: pm-sweep 5.5s cubic-bezier(.6,0,.4,1) infinite; }
        @keyframes pm-sweep { 0% { transform: translateY(-40%); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(320%); opacity: 0; } }

        /* value stat strip (bookkeeping) */
        .pm-statrow { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
        .pm-stat { border: 1px solid rgba(140,170,255,0.14); border-radius: 9px; padding: 10px 12px; background: rgba(255,255,255,0.02); }
        .pm-stat-v { font-size: 19px; color: #eaf0ff; letter-spacing: -0.01em; display: block; }
        .pm-stat-v em { font-size: 11px; font-style: normal; color: #8ea3c8; margin-left: 2px; }
        .pm-stat-v.pos { color: #4d9fff; }
        .pm-stat-k { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #8ea3c8; margin-top: 4px; display: block; }

        /* tax: compliance ring */
        .pm-taxtop { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 4px 4px 16px; margin-bottom: 14px; border-bottom: 1px solid rgba(140,170,255,0.1); }
        .pm-ring { position: relative; width: 84px; height: 84px; flex: none; }
        .pm-ring svg { width: 100%; height: 100%; display: block; }
        .pm-ring-bg { fill: none; stroke: rgba(140,170,255,0.14); stroke-width: 7; }
        .pm-ring-fg { fill: none; stroke: #4d9fff; stroke-width: 7; stroke-linecap: round;
          stroke-dasharray: 213.6; stroke-dashoffset: 213.6; filter: drop-shadow(0 0 6px rgba(77,159,255,0.6));
          animation: pm-ring-fill 1.6s cubic-bezier(.2,.7,.2,1) 0.2s both; }
        @keyframes pm-ring-fill { to { stroke-dashoffset: 0; } }
        .pm-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .pm-ring-c b { font-size: 21px; color: #eaf0ff; letter-spacing: -0.02em; }
        .pm-ring-c span { font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8ea3c8; margin-top: 1px; }
        .pm-taxmeta { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
        .pm-taxdue { font-size: 16px; color: #e8eeff; } .pm-taxdue b { color: #4d9fff; }
        .pm-taxsub { font-size: 11px; color: #8296bb; line-height: 1.4; }

        /* CFO: trend overlay */
        .pm-chart { position: relative; }
        .pm-grid-svg { position: absolute; inset: 0 0 0 0; width: 100%; height: 92px; z-index: 0; }
        .pm-grid-svg line { stroke: rgba(140,170,255,0.08); stroke-width: 1; }
        .pm-chart .pm-bars { position: relative; z-index: 1; }
        .pm-trendline { position: absolute; left: 0; top: 8px; width: 100%; height: 92px; z-index: 2; pointer-events: none; overflow: visible; }
        .pm-trendline polyline { fill: none; stroke: #4d9fff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
          filter: drop-shadow(0 0 5px rgba(77,159,255,0.7)); stroke-dasharray: 620; animation: pm-draw2 1.6s ease 0.3s both; }
        @keyframes pm-draw2 { from { stroke-dashoffset: 620; } to { stroke-dashoffset: 0; } }
        .pm-target { position: absolute; top: 0; right: 2px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #9fb2d8; }
        .pm-target-dot { width: 8px; height: 8px; border-radius: 50%; background: #4d9fff; box-shadow: 0 0 0 3px rgba(77,159,255,0.22), 0 0 10px rgba(77,159,255,0.8); animation: pulse-online 2s ease-in-out infinite; }

        /* Advisory: grid + area + endpoint */
        .pm-adv-grid { stroke: rgba(140,170,255,0.09); stroke-width: 1; }
        .pm-area { opacity: 0; transition: opacity 0.45s ease; }
        .pm-area.on { opacity: 1; }
        .pm-adv-dot { position: absolute; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 4px rgba(45,78,245,0.18), 0 0 12px rgba(77,159,255,0.9); transition: top 0.45s cubic-bezier(.2,.7,.2,1); animation: pulse-online 2s ease-in-out infinite; }
        .pm-adv-dot.a { top: 5px; } .pm-adv-dot.b { top: 45px; }
        .pm-top {
          display: flex; align-items: center; gap: 10px;
          padding: 11px 15px; border-bottom: 1px solid rgba(140,170,255,0.12);
          background: rgba(255,255,255,0.02);
        }
        .pm-traffic { display: inline-flex; gap: 5px; }
        .pm-traffic i { width: 8px; height: 8px; border-radius: 50%; background: rgba(160,180,220,0.3); }
        .pm-traffic i:first-child { background: var(--rust); }
        .pm-title { font-size: 11px; letter-spacing: 0.08em; color: #9fb2d8; }
        .pm-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: 0.14em; color: #4d9fff; }
        .pm-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4d9fff; box-shadow: 0 0 8px #4d9fff; animation: pulse-online 2.4s ease-in-out infinite; }
        .pm-body { padding: 16px; }
        .pm-k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8ea3c8; }
        .pm-accent { color: var(--rust); }
        .pm-badge {
          font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust);
          border: 1px solid rgba(45,78,245,0.4); border-radius: 999px; padding: 3px 9px; background: rgba(45,78,245,0.1);
        }
        .pm-recon-head, .pm-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }

        /* Bookkeeping */
        .pm-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
        .pm-row {
          display: grid; grid-template-columns: 40px 1fr auto auto 14px; gap: 10px; align-items: center;
          padding: 8px; border-radius: 7px; font-size: 12px; color: #c8d6f0;
          transition: background 0.35s ease, box-shadow 0.35s ease;
        }
        .pm-row.on { background: rgba(45,78,245,0.15); box-shadow: inset 0 0 0 1px rgba(45,78,245,0.3); }
        .pm-date { color: #7385a8; }
        .pm-merch { color: #e8eeff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pm-cat { font-size: 9px; letter-spacing: 0.05em; color: #9fb2d8; border: 1px solid rgba(140,170,255,0.18); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
        .pm-cat.flag { color: #ffbe8f; border-color: rgba(255,160,90,0.4); }
        .pm-amt { font-variant-numeric: tabular-nums; }
        .pm-amt.pos { color: #4d9fff; }
        .pm-check { text-align: center; color: #4d9fff; }
        .pm-row.is-flag .pm-check { color: #ffbe8f; }
        .pm-recon-foot { margin-top: 14px; }
        .pm-meter { height: 7px; border-radius: 4px; background: rgba(140,170,255,0.12); overflow: hidden; }
        .pm-meter-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--rust), #6a8bff); transform-origin: left; animation: pm-grow-x 1.3s cubic-bezier(.2,.7,.2,1) both; box-shadow: 0 0 12px rgba(45,78,245,0.5); }
        .pm-meter-row { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: #9fb2d8; }
        @keyframes pm-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

        /* Tax */
        .pm-filings { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
        .pm-filing { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 7px; background: rgba(255,255,255,0.02); font-size: 12px; }
        .pm-dot2 { width: 7px; height: 7px; border-radius: 50%; background: #7385a8; }
        .pm-fk { color: #e8eeff; }
        .pm-fdue { color: #7385a8; font-size: 11px; }
        .pm-pill { font-size: 9px; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(140,170,255,0.2); }
        .pm-pill.ok { color: #4d9fff; border-color: rgba(77,159,255,0.45); background: rgba(77,159,255,0.10); }
        .pm-pill.acc { color: #7d9bff; border-color: rgba(45,78,245,0.5); background: rgba(45,78,245,0.14); }
        .pm-pill.dim { color: #9fb2d8; }
        .pm-hst-sub { margin-top: 8px; font-size: 11px; color: #7f92b6; }

        /* CFO */
        .pm-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 16px; }
        .pm-kpi { border: 1px solid rgba(140,170,255,0.12); border-radius: 9px; padding: 11px; background: rgba(255,255,255,0.02); }
        .pm-kk { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #8ea3c8; display: block; }
        .pm-kv { font-size: 17px; color: #e8eeff; margin-top: 6px; display: block; letter-spacing: -0.01em; }
        .pm-trend { font-size: 10.5px; color: #4d9fff; }
        .pm-bars { display: flex; align-items: flex-end; gap: 4px; height: 92px; padding-top: 8px; }
        .pm-bar { flex: 1; border-radius: 3px 3px 0 0; background: rgba(140,170,255,0.22); transform-origin: bottom; animation: pm-grow-y .7s cubic-bezier(.2,.7,.2,1) both; }
        .pm-bar.proj { background: linear-gradient(180deg, #6a8bff, var(--rust)); box-shadow: 0 0 12px rgba(45,78,245,0.45); }
        @keyframes pm-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
        .pm-chart-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #6f82a6; }

        /* Advisory */
        .pm-adv-chart { height: 118px; margin: 8px 0 14px; border-radius: 9px; background: rgba(255,255,255,0.02); border: 1px solid rgba(140,170,255,0.1); overflow: hidden; }
        .pm-adv-chart svg { width: 100%; height: 100%; display: block; }
        .pm-line { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 340; animation: pm-draw 1.2s ease both; transition: opacity .4s ease, filter .4s ease; }
        .pm-line.a { stroke: var(--rust); }
        .pm-line.b { stroke: #7385a8; }
        .pm-line:not(.on) { opacity: 0.3; }
        .pm-line.on { opacity: 1; filter: drop-shadow(0 0 5px currentColor); }
        @keyframes pm-draw { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }
        .pm-adv-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .pm-opt { text-align: left; cursor: pointer; border: 1px solid rgba(140,170,255,0.14); background: rgba(255,255,255,0.02); border-radius: 9px; padding: 10px 12px; color: #c8d6f0; font-family: var(--font-mono); transition: border-color .2s, background .2s; }
        .pm-opt.on { border-color: rgba(45,78,245,0.6); background: rgba(45,78,245,0.13); box-shadow: 0 0 0 1px rgba(45,78,245,0.3); }
        .pm-opt-name { display: block; font-size: 12px; color: #e8eeff; }
        .pm-opt-delta { display: block; font-size: 18px; color: #7d9bff; margin-top: 4px; }
        .pm-opt.on .pm-opt-delta { color: var(--rust); text-shadow: 0 0 12px rgba(45,78,245,0.6); }
        .pm-opt-sub { display: block; font-size: 9.5px; color: #7f92b6; margin-top: 2px; letter-spacing: 0.03em; }
        .pm-adv-rec { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: #9fb2d8; }
        .pm-adv-rec b { color: #e8eeff; }
        .pm-rec-dot { width: 6px; height: 6px; border-radius: 50%; background: #4d9fff; box-shadow: 0 0 8px #4d9fff; }

        @media (prefers-reduced-motion: reduce) {
          .pm-meter-fill, .pm-bar { animation: none; transform: none; }
          .pm-line { animation: none; stroke-dashoffset: 0; }
          .pm-live-dot, .pm-rec-dot, .pm-target-dot, .pm-adv-dot { animation: none; }
          .pm-scan { display: none; }
          .pm-ring-fg { animation: none; stroke-dashoffset: 0; }
          .pm-trendline polyline { animation: none; stroke-dashoffset: 0; }
        }
      `}</style>
    </section>
  );
}

// Live "ledger sync" animation — six data sources pulse into one central ledger.
// Pure SVG + SMIL + CSS. No canvas, no images, no libraries. A few KB.
function LedgerHub() {
  // Center of the 440×400 viewBox
  const cx = 220, cy = 200;
  // Sources arranged on an ellipse around the ledger core
  const SOURCES = [
    { id: 'bank',    label: 'Bank feed', x: 220,   y: 48  },
    { id: 'stripe',  label: 'Stripe',    x: 371.6, y: 125 },
    { id: 'shopify', label: 'Shopify',   x: 371.6, y: 275 },
    { id: 'payroll', label: 'Payroll',   x: 220,   y: 352 },
    { id: 'pos',     label: 'POS',       x: 68.4,  y: 275 },
    { id: 'interac', label: 'Interac',   x: 68.4,  y: 125 },
  ];
  const CW = 104, CH = 34; // chip width / height
  const PERIOD = 1.9;       // seconds per pulse cycle

  return (
    <svg
      className="lh-svg"
      viewBox="0 0 440 400"
      role="img"
      aria-label="Diagram: a bank feed, Stripe, Shopify, payroll, POS, and Interac all sync data into one central ledger — a single source of truth."
      xmlns="http://www.w3.org/2000/svg"
    >
      {/* faint spokes source → core (drawn first, sit behind everything) */}
      <g className="lh-spokes">
        {SOURCES.map((s) => (
          <line key={s.id} x1={s.x} y1={s.y} x2={cx} y2={cy} />
        ))}
      </g>

      {/* traveling data pulses along each spoke */}
      <g className="lh-pulses">
        {SOURCES.map((s, i) => {
          const begin = `${(i * PERIOD) / SOURCES.length}s`;
          const dur = `${PERIOD}s`;
          return (
            <circle key={s.id} className="lh-pulse" r="4">
              <animate attributeName="cx" from={s.x} to={cx} dur={dur} begin={begin} repeatCount="indefinite" keyTimes="0;1" calcMode="spline" keySplines="0.4 0 0.2 1" />
              <animate attributeName="cy" from={s.y} to={cy} dur={dur} begin={begin} repeatCount="indefinite" keyTimes="0;1" calcMode="spline" keySplines="0.4 0 0.2 1" />
              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.12;0.72;1" dur={dur} begin={begin} repeatCount="indefinite" />
            </circle>
          );
        })}
      </g>

      {/* source chips */}
      <g className="lh-nodes">
        {SOURCES.map((s, i) => {
          const begin = `${(i * PERIOD) / SOURCES.length}s`;
          return (
            <g key={s.id} className="lh-node" transform={`translate(${s.x - CW / 2}, ${s.y - CH / 2})`}>
              <rect className="lh-chip" width={CW} height={CH} rx="9" />
              {/* status dot — flashes as it emits a pulse */}
              <circle className="lh-dot" cx="16" cy={CH / 2} r="4">
                <animate attributeName="opacity" values="0.35;1;0.35" keyTimes="0;0.12;1" dur={`${PERIOD}s`} begin={begin} repeatCount="indefinite" />
              </circle>
              <text className="lh-label" x="30" y={CH / 2} dominantBaseline="central">{s.label}</text>
            </g>
          );
        })}
      </g>

      {/* central ledger core */}
      <g className="lh-core">
        {/* expanding sync ring on each intake */}
        <circle className="lh-ring" cx={cx} cy={cy} r="52" fill="none">
          <animate attributeName="r" values="52;80" dur={`${PERIOD / 3}s`} repeatCount="indefinite" />
          <animate attributeName="opacity" values="0.5;0" dur={`${PERIOD / 3}s`} repeatCount="indefinite" />
        </circle>
        <rect className="lh-core-box" x={cx - 78} y={cy - 44} width="156" height="88" rx="14" />
        <text className="lh-core-title" x={cx} y={cy - 8} textAnchor="middle">LEDGER</text>
        <text className="lh-core-sub" x={cx} y={cy + 16} textAnchor="middle">one source of truth</text>
      </g>
    </svg>
  );
}

function LedgerSync() {
  return (
    <section className="ls-section">
      <div className="wrap">
        <div className="ls-grid reveal">
          <div className="ls-copy">
            <span className="eyebrow" style={{ color: 'color-mix(in srgb, var(--paper) 62%, transparent)' }}>How the books stay clean</span>
            <h2 style={{ marginTop: 18, color: 'var(--paper)', fontSize: 'clamp(36px, 4.6vw, 60px)', letterSpacing: '-0.03em', lineHeight: 1.02 }}>
              Every source.<br />
              <span style={{ color: 'var(--rust-soft)' }}>One ledger.</span>
            </h2>
            <p className="lead" style={{ marginTop: 26, color: 'color-mix(in srgb, var(--paper) 82%, transparent)', maxWidth: '46ch' }}>
              Your bank feed, Stripe, Shopify, payroll, POS, and Interac transfers all flow into a
              single reconciled ledger — continuously synced, auto-categorized, and reviewed by a CPA.
              No more stitching together five exports at year-end.
            </p>
            <ul className="ls-points">
              <li><span className="ls-tick">✓</span> Connected once — synced every day</li>
              <li><span className="ls-tick">✓</span> Categorized automatically, matched line by line</li>
              <li><span className="ls-tick">✓</span> One number you can trust, all year long</li>
            </ul>
            <a href="contact.html" className="btn" style={{ marginTop: 34, background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)' }}>
              See it on your books <span className="arrow">↗</span>
            </a>
          </div>
          <div className="ls-viz" aria-hidden="false">
            <LedgerHub />
          </div>
        </div>
      </div>
      <style>{`
        .ls-section { background: #091225; color: var(--paper); position: relative; overflow: hidden; }
        .ls-grid {
          display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center;
        }
        @media (max-width: 900px) { .ls-grid { grid-template-columns: 1fr; gap: 40px; } }
        .ls-copy { min-width: 0; }
        .ls-points { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
        .ls-points li {
          display: flex; gap: 12px; align-items: flex-start;
          font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--paper) 88%, transparent);
        }
        .ls-tick { color: var(--rust-soft); font-family: var(--font-mono); font-weight: 700; flex: none; }

        .ls-viz {
          position: relative; border-radius: 20px;
          border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
          background:
            radial-gradient(70% 70% at 50% 50%, color-mix(in srgb, var(--rust) 16%, transparent), transparent 72%),
            color-mix(in srgb, var(--paper) 3%, transparent);
          padding: 20px;
        }

        .lh-svg { width: 100%; height: auto; display: block; overflow: visible; }
        .lh-spokes line {
          stroke: color-mix(in srgb, var(--rust-soft) 45%, transparent);
          stroke-width: 1.25; stroke-dasharray: 2 5; stroke-linecap: round;
        }
        .lh-pulse { fill: var(--rust-soft); filter: drop-shadow(0 0 5px var(--rust-soft)); }
        .lh-chip {
          fill: color-mix(in srgb, var(--paper) 6%, transparent);
          stroke: color-mix(in srgb, var(--paper) 20%, transparent); stroke-width: 1;
        }
        .lh-dot { fill: var(--rust-soft); }
        .lh-label {
          fill: var(--paper); font-family: var(--font-mono); font-size: 13px;
          font-weight: 500; letter-spacing: 0.01em;
        }
        .lh-ring { stroke: var(--rust-soft); stroke-width: 1.5; }
        .lh-core-box {
          fill: color-mix(in srgb, var(--ink) 55%, #000);
          stroke: var(--rust); stroke-width: 1.5;
          filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rust) 55%, transparent));
        }
        .lh-core-title {
          fill: var(--paper); font-family: var(--font-mono); font-weight: 700;
          font-size: 20px; letter-spacing: 0.12em;
        }
        .lh-core-sub {
          fill: color-mix(in srgb, var(--paper) 66%, transparent);
          font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
        }

        @media (max-width: 420px) { .lh-label { font-size: 15px; } }

        /* Accessibility: stop the motion entirely for users who ask for it. */
        @media (prefers-reduced-motion: reduce) {
          .lh-pulse, .lh-ring { display: none; }
          .lh-dot { opacity: 1 !important; }
        }
      `}</style>
    </section>
  );
}

function BundledValue() {
  return (
    <section className="bv-section">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">The shift</span>
            <h2 style={{ marginTop: 16 }}>One partner.<br />Not five invoices.</h2>
          </div>
          <p className="lead" style={{ maxWidth: '52ch' }}>
            For decades, accounting was sold piece by piece — a fee for bookkeeping,
            another for tax, a separate engagement for CFO advice, an extra line
            for payroll, more again for an audit-ready clean-up. Owners ended up
            stitching together five vendors and bracing for surprise invoices every
            time they had a question. <em style={{ color: 'var(--rust)', fontStyle: 'italic', fontWeight: 500 }}>That model is over.</em>
          </p>
        </div>

        <div className="bv-grid reveal">
          {/* Old way */}
          <div className="bv-col bv-col-old">
            <div className="bv-col-head">
              <span className="bv-tag">The old way</span>
              <h3 className="bv-col-title">Piece by piece. Invoice by invoice.</h3>
            </div>
            <ul className="bv-stack">
              <li className="bv-line"><span className="bv-line-k">Bookkeeping</span><span className="bv-line-v">+ monthly fee</span></li>
              <li className="bv-line"><span className="bv-line-k">Year-end tax filing</span><span className="bv-line-v">+ engagement</span></li>
              <li className="bv-line"><span className="bv-line-k">CFO / advisory call</span><span className="bv-line-v">+ hourly</span></li>
              <li className="bv-line"><span className="bv-line-k">Payroll setup</span><span className="bv-line-v">+ project</span></li>
              <li className="bv-line"><span className="bv-line-k">GST/HST &amp; compliance</span><span className="bv-line-v">+ filing</span></li>
              <li className="bv-line"><span className="bv-line-k">"Quick question"</span><span className="bv-line-v">+ billed time</span></li>
              <li className="bv-line bv-line-total"><span className="bv-line-k">Year-end surprise</span><span className="bv-line-v">$ ?,???</span></li>
            </ul>
            <p className="bv-foot bv-foot-old">
              Five vendors. Five contracts. A meter that runs every time you pick
              up the phone — so most owners stop picking up the phone.
            </p>
          </div>

          {/* New way */}
          <div className="bv-col bv-col-new">
            <span className="bv-stamp">
              <span className="bv-stamp-dot"></span>
              Blue North · 2025
            </span>
            <div className="bv-col-head">
              <span className="bv-tag bv-tag-us">The Blue North way</span>
              <h3 className="bv-col-title">All of it. One partner. One fee.</h3>
            </div>
            <div className="bv-bundle">
              <div className="bv-bundle-head">
                <span className="bv-bundle-k">Included, every month</span>
                <span className="bv-bundle-pill">Flat fee · no surprises</span>
              </div>
              <ul className="bv-bundle-list">
                <li><span className="bv-check">✓</span> Bookkeeping &amp; reconciliations</li>
                <li><span className="bv-check">✓</span> Corporate &amp; personal tax filing</li>
                <li><span className="bv-check">✓</span> CFO-grade advisory &amp; calls</li>
                <li><span className="bv-check">✓</span> Payroll, GST/HST, compliance</li>
                <li><span className="bv-check">✓</span> Cash flow, forecasts, KPI reviews</li>
                <li><span className="bv-check">✓</span> Audit-ready books, year-round</li>
                <li><span className="bv-check">✓</span> Unlimited "quick questions"</li>
              </ul>
            </div>
            <p className="bv-foot bv-foot-new">
              Modern tooling does the slow work in minutes — not days — so we can
              wrap every service into one engagement and still come in under what
              traditional firms charge for half the list.
            </p>
          </div>
        </div>

        <div className="bv-belt reveal">
          <div className="bv-belt-icon" aria-hidden="true">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
              <path d="M8 24 L20 36 L40 12" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square" strokeLinejoin="miter"/>
            </svg>
          </div>
          <div className="bv-belt-copy">
            <span className="eyebrow" style={{ color: 'color-mix(in srgb, var(--paper) 65%, transparent)' }}>Why it matters</span>
            <h3 style={{ marginTop: 12, color: 'var(--paper)', fontSize: 'clamp(26px, 2.6vw, 36px)', letterSpacing: '-0.02em', maxWidth: '32ch' }}>
              We become your finance partner — A to Z — so you stop watching the meter
              and start running the business.
            </h3>
          </div>
          <a href="packages.html" className="btn" style={{ background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)', whiteSpace: 'nowrap' }}>
            See what's included <span className="arrow">↗</span>
          </a>
        </div>
      </div>

      <style>{`
        .bv-section { background: var(--paper-2); position: relative; }
        .bv-grid {
          margin-top: 56px;
          display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px;
          align-items: stretch;
        }
        @media (max-width: 900px) { .bv-grid { grid-template-columns: 1fr; gap: 20px; } }

        .bv-col {
          padding: 36px; border: 1px solid var(--line); border-radius: 14px;
          background: var(--paper); position: relative;
          display: flex; flex-direction: column; gap: 24px;
        }
        @media (max-width: 600px) { .bv-col { padding: 28px 22px; } }
        .bv-col-old {
          background: color-mix(in srgb, var(--paper) 92%, var(--ink) 8%);
          color: var(--ink-2);
        }
        .bv-col-new {
          border-color: color-mix(in srgb, var(--rust) 35%, var(--line));
          box-shadow:
            0 0 0 1px color-mix(in srgb, var(--rust) 18%, transparent),
            0 24px 56px color-mix(in srgb, var(--rust) 10%, transparent);
        }
        .bv-col-new::before {
          content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
          background: var(--rust); border-radius: 14px 14px 0 0;
        }

        .bv-stamp {
          position: absolute; top: -14px; right: 24px;
          background: var(--paper); border: 1px solid color-mix(in srgb, var(--rust) 35%, transparent);
          color: var(--rust); padding: 6px 14px; border-radius: 999px;
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
          text-transform: uppercase; font-weight: 600;
        }
        .bv-stamp-dot {
          width: 6px; height: 6px; border-radius: 50%; background: var(--rust);
          box-shadow: 0 0 0 0 color-mix(in srgb, var(--rust) 60%, transparent);
          animation: pulse-online 2.4s ease-in-out infinite;
        }

        .bv-col-head { display: flex; flex-direction: column; gap: 10px; }
        .bv-tag {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
          text-transform: uppercase; color: var(--slate);
        }
        .bv-tag-us { color: var(--rust); }
        .bv-col-title {
          margin: 0; font-size: clamp(22px, 2.2vw, 28px);
          letter-spacing: -0.02em; line-height: 1.15; color: var(--ink);
        }

        /* Old: stacking invoices */
        .bv-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
        .bv-line {
          display: flex; justify-content: space-between; align-items: center; gap: 12px;
          padding: 14px 16px;
          background: var(--paper);
          border: 1px solid var(--line);
          border-radius: 4px;
          position: relative;
          font-size: 14px;
        }
        .bv-line::before {
          content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
          background: color-mix(in srgb, var(--slate) 50%, transparent);
        }
        .bv-line-k { color: var(--ink); font-weight: 500; }
        .bv-line-v {
          font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
          color: var(--slate);
        }
        .bv-line-total {
          background: var(--ink); color: var(--paper);
          border-color: var(--ink);
          margin-top: 10px;
        }
        .bv-line-total::before { background: var(--rust); }
        .bv-line-total .bv-line-k { color: var(--paper); font-weight: 600; }
        .bv-line-total .bv-line-v {
          color: var(--rust-soft, color-mix(in srgb, var(--rust) 80%, var(--paper)));
          font-size: 14px; font-weight: 600;
        }

        /* New: bundle card */
        .bv-bundle {
          background: color-mix(in srgb, var(--rust) 5%, var(--paper));
          border: 1px solid color-mix(in srgb, var(--rust) 22%, var(--line));
          border-radius: 8px;
          padding: 22px 24px;
        }
        .bv-bundle-head {
          display: flex; justify-content: space-between; align-items: center; gap: 12px;
          padding-bottom: 14px; margin-bottom: 14px;
          border-bottom: 1px dashed color-mix(in srgb, var(--rust) 25%, transparent);
        }
        .bv-bundle-k {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
          text-transform: uppercase; color: var(--ink);
        }
        .bv-bundle-pill {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
          text-transform: uppercase; color: var(--paper);
          background: var(--rust); padding: 5px 10px; border-radius: 3px;
          font-weight: 600;
        }
        @media (max-width: 540px) {
          .bv-bundle-head { flex-direction: column; align-items: flex-start; gap: 8px; }
        }
        .bv-bundle-list {
          list-style: none; margin: 0; padding: 0;
          display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
        }
        @media (max-width: 600px) { .bv-bundle-list { grid-template-columns: 1fr; } }
        .bv-bundle-list li {
          display: flex; gap: 10px; align-items: flex-start;
          font-size: 14px; color: var(--ink); line-height: 1.45;
        }
        .bv-check {
          color: var(--rust); font-weight: 700; flex-shrink: 0;
          font-family: var(--font-mono); width: 16px;
        }

        .bv-foot {
          font-size: 14px; line-height: 1.55;
          padding-top: 4px;
        }
        .bv-foot-old { color: var(--slate); border-top: 1px dashed var(--line); padding-top: 18px; }
        .bv-foot-new { color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: 18px; }

        /* Belt at bottom */
        .bv-belt {
          margin-top: 48px; padding: 40px 48px;
          color: var(--paper);
          border-radius: 16px;
          display: grid; grid-template-columns: auto 1fr auto;
          gap: 32px; align-items: center;
        }
        @media (max-width: 900px) {
          .bv-belt { grid-template-columns: 1fr; gap: 24px; padding: 32px 28px; text-align: left; }
          .bv-belt .btn { justify-self: start; }
        }
        .bv-belt-icon {
          color: var(--rust);
          width: 64px; height: 64px;
          border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
          border-radius: 6px;
          display: flex; align-items: center; justify-content: center;
        }
      `}</style>
    </section>
  );
}

function CostPromise() {
  return (
    <section className="night">
      <HeroBG />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <span className="eyebrow" style={{ color: 'color-mix(in srgb, var(--paper) 65%, transparent)' }}>The cost story</span>
            <h2 style={{ marginTop: 20, fontSize: 'clamp(40px, 5.5vw, 72px)', letterSpacing: '-0.03em', color: 'var(--paper)' }}>
              Roughly <span style={{ color: 'var(--rust-soft)' }}>half</span><br />the cost of a<br />traditional firm.
            </h2>
          </div>
          <div>
            <p className="lead" style={{ color: 'color-mix(in srgb, var(--paper) 88%, transparent)', maxWidth: '52ch' }}>
              Most of our clients cut their accounting spend by close to 50% versus a traditional
              firm or an in-house hire — without giving up CPA-level rigour. A lean, cloud-first
              operating model means we move faster with less overhead, and pass the savings on.
            </p>
            <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, paddingTop: 32, borderTop: '1px solid color-mix(in srgb, var(--paper) 18%, transparent)' }}>
              <div>
                <div style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.03em', color: 'var(--paper)' }}>~50%</div>
                <div className="numlabel" style={{ marginTop: 6, color: 'color-mix(in srgb, var(--paper) 60%, transparent)' }}>Avg. cost reduction</div>
              </div>
              <div>
                <div style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.03em', color: 'var(--paper)' }}>Flat</div>
                <div className="numlabel" style={{ marginTop: 6, color: 'color-mix(in srgb, var(--paper) 60%, transparent)' }}>Monthly fee</div>
              </div>
              <div>
                <div style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.03em', color: 'var(--paper)' }}>0</div>
                <div className="numlabel" style={{ marginTop: 6, color: 'color-mix(in srgb, var(--paper) 60%, transparent)' }}>Hourly invoices</div>
              </div>
            </div>
            <a href="contact.html" className="btn" style={{ marginTop: 40, background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)' }}>
              Get a quote <span className="arrow">↗</span>
            </a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          section .wrap > div { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

function FAQSection() {
  const [open, setOpen] = _useState3(0);
  return (
    <section>
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">FAQ</span>
            <h2 style={{ marginTop: 16 }}>Common questions.</h2>
          </div>
          <p className="lead">If yours isn't here, ask it on the discovery call — we'd rather answer in person.</p>
        </div>
        <div className="faq-list">
          {FAQ.map((item, i) => (
            <button key={i} className={`faq-item reveal ${open === i ? 'on' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span className="numlabel">{String(i + 1).padStart(2, '0')}</span>
                <span>{item.q}</span>
                <span className="faq-toggle">{open === i ? '−' : '+'}</span>
              </div>
              <div className="faq-a-wrap" style={{ gridTemplateRows: open === i ? '1fr' : '0fr' }}>
                <div className="faq-a-inner">
                  <p>{item.a}</p>
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
      <style>{`
        .faq-list { display: flex; flex-direction: column; gap: 0; }
        .faq-item {
          all: unset; cursor: pointer; display: block;
          padding: 28px 0; border-top: 1px solid var(--line);
          font-family: inherit; color: var(--ink);
        }
        .faq-item:last-child { border-bottom: 1px solid var(--line); }
        .faq-q {
          display: grid; grid-template-columns: 60px 1fr auto; gap: 24px; align-items: center;
          font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.01em;
        }
        .faq-toggle { font-size: 28px; color: var(--rust); font-weight: 300; }
        .faq-a-wrap { display: grid; transition: grid-template-rows 0.3s ease; }
        .faq-a-inner { overflow: hidden; }
        .faq-a-inner p {
          padding: 16px 0 0 84px; max-width: 60ch; color: var(--ink-2); font-size: 16px; line-height: 1.6;
        }
        @media (max-width: 600px) { .faq-a-inner p { padding-left: 0; } .faq-q { grid-template-columns: 32px 1fr auto; gap: 12px; } }
      `}</style>
    </section>
  );
}

function App() {
  useReveal();
  return (
    <>
      <Nav active="services" />
      <main>
        <ServicesHero />
        <StackStrip />
        <ServiceDetailBlocks />
        <LedgerSync />
        <BundledValue />
        <CostPromise />
        <FAQSection />
      </main>
      <Footer />
      <TweaksHost />
    </>
  );
}

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