// Home page for Blue North Accounting
const { useState: _useState, useEffect: _useEffect2, useRef: _useRef } = React;

// Count-up number — animates 0 → end when it scrolls into view
function CountUp({ end, suffix = '', dur = 1100 }) {
  const [v, setV] = _useState(0);
  const ref = _useRef(null);
  _useEffect2(() => {
    let raf = 0, started = false;
    const el = ref.current;
    const run = () => {
      const t0 = performance.now();
      const step = (now) => {
        const p = Math.min((now - t0) / dur, 1);
        setV(Math.round(end * (1 - Math.pow(1 - p, 3))));
        if (p < 1) raf = requestAnimationFrame(step);
      };
      raf = requestAnimationFrame(step);
    };
    if (!el || !('IntersectionObserver' in window)) { run(); return; }
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting && !started) { started = true; run(); io.disconnect(); } });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => { io.disconnect(); if (raf) cancelAnimationFrame(raf); };
  }, [end, dur]);
  return <span ref={ref}>{v}{suffix}</span>;
}

// Homepage hero — Blue North orbital system (pure SVG/CSS + SMIL)
function Hero() {
  const svgRef = _useRef(null);
  _useEffect2(() => {
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce && svgRef.current && svgRef.current.pauseAnimations) {
      try { svgRef.current.pauseAnimations(); } catch (e) {}
    }
  }, []);

  const C = 230;
  const NODES = [
    { k: 'Bookkeeping', s: '12.8k / mo', x: 104, y: 104 },
    { k: 'Accounting', s: '3-day close', x: 356, y: 104 },
    { k: 'Tax planning', s: 'CRA-ready', x: 356, y: 356 },
    { k: 'Advisory', s: '18-mo runway', x: 104, y: 356 },
  ];
  const edge = (n) => { const dx = n.x - C, dy = n.y - C, l = Math.hypot(dx, dy); return { ex: C + dx / l * 54, ey: C + dy / l * 54 }; };

  return (
    <section className="bn-hero">
      <div className="aurora"></div>
      <div className="grid"></div>
      <div className="inner">
        <div className="copy">
          <div className="tag"><span className="d"></span>CPA-led · Canada</div>
          <h1>Your entire back office,<br /><span className="g">running itself.</span></h1>
          <p className="sub">Bookkeeping, accounting, tax planning, and CFO-level advisory —
            automated where it should be, CPA-reviewed where it matters.</p>
          <div className="cta">
            <a className="b1" href="contact.html">Book a call
              <svg width="16" height="16" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.9"><path d="M1 7h12M8 2l5 5-5 5" /></svg></a>
            <a className="b2" href="services.html">See how it works</a>
          </div>
          <div className="trust"><b>CRA-ready</b> · GST/HST · Canadian-owned · CPA-reviewed</div>
        </div>

        <div className="bn-sys">
          <div className="sys-sweep" aria-hidden="true"></div>
          <svg className="sys-svg" ref={svgRef} viewBox="0 0 460 460"
            role="img" aria-label="Blue North — bookkeeping, accounting, tax planning and advisory orbiting one automated core.">
            <defs>
              <radialGradient id="bnCore" cx="50%" cy="42%" r="62%">
                <stop offset="0%" stopColor="#3f5cff" /><stop offset="55%" stopColor="#1c2f7e" /><stop offset="100%" stopColor="#0b1642" />
              </radialGradient>
            </defs>

            {/* orbit rings (rotating) */}
            <g>
              <circle cx="230" cy="230" r="80" className="ring-c" />
              <circle cx="230" cy="150" r="4" className="planet" />
              <animateTransform attributeName="transform" type="rotate" from="0 230 230" to="360 230 230" dur="26s" repeatCount="indefinite" />
            </g>
            <g>
              <circle cx="230" cy="230" r="128" className="ring-c" />
              <circle cx="358" cy="230" r="4.5" className="planet" />
              <animateTransform attributeName="transform" type="rotate" from="360 230 230" to="0 230 230" dur="36s" repeatCount="indefinite" />
            </g>
            <g>
              <circle cx="230" cy="230" r="178" className="ring-c dim" />
              <circle cx="230" cy="52" r="3.6" className="planet" />
              <animateTransform attributeName="transform" type="rotate" from="0 230 230" to="360 230 230" dur="48s" repeatCount="indefinite" />
            </g>

            {/* connectors + inbound data pulses */}
            {NODES.map((n, i) => { const e = edge(n); return (
              <line key={'c' + i} x1={n.x} y1={n.y} x2={e.ex} y2={e.ey} className="conn" />
            ); })}
            {NODES.map((n, i) => { const e = edge(n); const begin = (i * 0.55).toFixed(2) + 's'; return (
              <circle key={'p' + i} className="pulse" r="3.4">
                <animate attributeName="cx" from={n.x} to={e.ex} dur="2.2s" begin={begin} repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.4 0 0.2 1" />
                <animate attributeName="cy" from={n.y} to={e.ey} dur="2.2s" begin={begin} repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.4 0 0.2 1" />
                <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.15;0.7;1" dur="2.2s" begin={begin} repeatCount="indefinite" />
              </circle>
            ); })}

            {/* core */}
            <circle cx="230" cy="230" r="46" className="core-pulse" fill="none">
              <animate attributeName="r" values="46;82" dur="3s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.2 0 0.4 1" />
              <animate attributeName="opacity" values="0.5;0" dur="3s" repeatCount="indefinite" />
            </circle>
            <circle cx="230" cy="230" r="46" fill="url(#bnCore)" className="core-fill" />
            <circle cx="230" cy="230" r="46" className="core-ring" fill="none" />
            <g transform="translate(210,219) scale(0.72)" className="core-mark">
              <path d="M6 25 L20 6 L34 25 Z" /><path d="M18 25 L29 10 L40 25 Z" /><path d="M30 25 L40 13 L50 25 Z" />
            </g>
            <text className="core-txt" x="230" y="302">BLUE NORTH · ACCOUNTING</text>

            {/* service node chips */}
            {NODES.map((n, i) => (
              <g key={'n' + i}>
                <rect x={n.x - 66} y={n.y - 22} width="132" height="44" rx="11" className="chip-box" />
                <circle cx={n.x - 50} cy={n.y - 6} r="3.6" className="chip-dot" />
                <text x={n.x - 40} y={n.y - 1} className="chip-k">{n.k}</text>
                <text x={n.x - 40} y={n.y + 15} className="chip-s">{n.s}</text>
              </g>
            ))}
          </svg>
          <div className="sys-cap"><span className="ok"><i></i>BOOKS · CURRENT</span><span>6 sources · 1 ledger</span></div>
        </div>
      </div>
      <style>{`
        .bn-hero{
          --bg:#091225; --accent:#2d4ef5; --cyan:#4d9fff; --pulse:#6da8ff;
          --mint:#6d8bff; --ink:#e9f0ff; --muted:rgba(233,240,255,.6); --hair:rgba(120,170,255,.14);
          --sans:'Inter Tight',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
          position:relative;width:100%;min-height:760px;overflow:hidden;padding:0;
          background:radial-gradient(120% 90% at 80% -10%, #0e1c38 0%, var(--bg) 55%);
          font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
        .bn-hero *{box-sizing:border-box;margin:0;padding:0}
        .bn-hero .aurora{position:absolute;inset:-15% -10% auto -10%;height:70%;pointer-events:none;filter:blur(26px);
          background:
            radial-gradient(55% 100% at 28% 0%, rgba(77,159,255,.18), transparent 70%),
            radial-gradient(50% 100% at 68% 8%, rgba(45,78,245,.22), transparent 72%),
            radial-gradient(42% 90% at 48% 0%, rgba(109,139,255,.14), transparent 70%);
          animation:bnDrift 12s ease-in-out infinite alternate}
        @keyframes bnDrift{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
        .bn-hero .grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
          background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
          background-size:70px 70px;
          -webkit-mask-image:radial-gradient(110% 80% at 70% 30%,#000,transparent 85%);
          mask-image:radial-gradient(110% 80% at 70% 30%,#000,transparent 85%)}
        .bn-hero .inner{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:72px 60px;
          display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center;min-height:760px}
        .bn-hero .tag{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:13px;
          letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
        .bn-hero .tag .d{width:9px;height:9px;border-radius:50%;background:var(--mint);animation:bnPing 1.8s ease-out infinite}
        @keyframes bnPing{0%{box-shadow:0 0 0 0 rgba(109,139,255,.55)}70%{box-shadow:0 0 0 12px rgba(109,139,255,0)}100%{box-shadow:0 0 0 0 rgba(109,139,255,0)}}
        .bn-hero h1{font-size:clamp(40px,5.2vw,66px);line-height:1.02;letter-spacing:-.035em;font-weight:650;color:var(--ink)}
        .bn-hero h1 .g{background:linear-gradient(100deg,var(--cyan),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
        .bn-hero .sub{margin:26px 0 34px;font-size:clamp(16px,1.55vw,19px);line-height:1.55;color:var(--muted);max-width:460px}
        .bn-hero .cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
        .bn-hero .b1{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(100deg,var(--accent),#3a5bff);
          color:#fff;font-weight:600;font-size:16px;padding:15px 26px;border-radius:11px;text-decoration:none;box-shadow:0 12px 40px rgba(45,78,245,.45)}
        .bn-hero .b2{color:var(--ink);font-weight:500;font-size:16px;padding:15px 20px;border-radius:11px;text-decoration:none;border:1px solid var(--hair)}
        .bn-hero .trust{margin-top:30px;font-family:var(--mono);font-size:12.5px;letter-spacing:1.5px;color:rgba(233,240,255,.42)}
        .bn-hero .trust b{color:var(--mint);font-weight:500}

        /* ===== orbital system ===== */
        .bn-hero .bn-sys{position:relative;width:100%;max-width:540px;margin:0 auto;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
        .bn-hero .sys-svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible;display:block}
        .bn-hero .sys-sweep{position:absolute;inset:6%;z-index:0;pointer-events:none;border-radius:50%;
          background:conic-gradient(from 0deg, transparent 0deg, rgba(77,159,255,.18) 44deg, transparent 98deg);
          -webkit-mask:radial-gradient(circle, transparent 28%, #000 40%, #000 70%, transparent 76%);
          mask:radial-gradient(circle, transparent 28%, #000 40%, #000 70%, transparent 76%);
          filter:blur(2px);animation:sysSweep 9s linear infinite}
        @keyframes sysSweep{to{transform:rotate(360deg)}}
        .bn-hero .ring-c{fill:none;stroke:rgba(120,160,255,.30);stroke-width:1.4;stroke-dasharray:3 8}
        .bn-hero .ring-c.dim{stroke:rgba(120,160,255,.16)}
        .bn-hero .planet{fill:#a9c8ff;filter:drop-shadow(0 0 5px rgba(120,160,255,.9))}
        .bn-hero .conn{stroke:rgba(120,160,255,.28);stroke-width:1.3;stroke-dasharray:2 6}
        .bn-hero .pulse{fill:#6da8ff;filter:drop-shadow(0 0 5px #4d9fff)}
        .bn-hero .core-fill{filter:drop-shadow(0 0 30px rgba(45,78,245,.6))}
        .bn-hero .core-ring{stroke:rgba(160,190,255,.55);stroke-width:1.4}
        .bn-hero .core-pulse{stroke:#4d9fff;stroke-width:1.4}
        .bn-hero .core-mark path{stroke:#eaf1ff;stroke-width:2.6;fill:none;stroke-linejoin:round;stroke-linecap:round}
        .bn-hero .core-txt{fill:rgba(210,224,255,.72);font-family:var(--mono);font-size:10px;letter-spacing:2.5px;text-anchor:middle}
        .bn-hero .chip-box{fill:rgba(16,26,52,.82);stroke:rgba(140,175,255,.28);stroke-width:1}
        .bn-hero .chip-dot{fill:#4d9fff;filter:drop-shadow(0 0 5px #4d9fff);animation:bnBlink 1.6s ease-in-out infinite}
        @keyframes bnBlink{0%,100%{opacity:1}50%{opacity:.35}}
        .bn-hero .chip-k{fill:#eaf1ff;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.01em}
        .bn-hero .chip-s{fill:rgba(200,215,255,.55);font-family:var(--mono);font-size:10px;letter-spacing:.4px}
        .bn-hero .sys-cap{position:absolute;left:0;right:0;bottom:2%;z-index:2;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
          font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--muted)}
        .bn-hero .sys-cap .ok{display:inline-flex;align-items:center;gap:8px;color:var(--mint)}
        .bn-hero .sys-cap .ok i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 9px var(--mint);animation:bnPing 1.8s ease-out infinite}

        @media (max-width:920px){
          .bn-hero .inner{grid-template-columns:1fr;gap:28px;padding:56px 30px;min-height:0}
          .bn-hero{min-height:0}
          .bn-hero .sub{max-width:none}
          .bn-hero .bn-sys{max-width:420px}
        }
        @media (max-width:560px){
          .bn-hero .bn-sys{max-width:340px}
          .bn-hero .chip-k{font-size:15px}
        }
        @media (prefers-reduced-motion:reduce){
          .bn-hero .aurora,.bn-hero .sys-sweep,.bn-hero .tag .d,.bn-hero .chip-dot,.bn-hero .sys-cap .ok i{animation:none!important}
        }
      `}</style>
    </section>
  );
}

const SERVICES = [
  {
    n: '01',
    title: 'Bookkeeping',
    blurb: 'Clean, monthly-close books on Xero or QuickBooks Online. Reconciled, reviewed, and ready for decisions.',
    items: ['Monthly reconciliation', 'HST returns', 'Payables & receivables', 'Cloud-first stack']
  },
  {
    n: '02',
    title: 'Tax & compliance',
    blurb: 'Year-end filings handled with the rigour of a CPA firm. Corporate, personal, and HST under one roof.',
    items: ['T1 / T2 / T4 / T5', 'HST filings', 'CRA correspondence', 'WSIB & EHT']
  },
  {
    n: '03',
    title: 'Outsourced CFO',
    blurb: 'Forward-looking financial leadership at a fraction of a hire. Cash flow, KPIs, lender-ready reporting.',
    items: ['13-week cash flow', 'Monthly KPI dashboard', 'Lender packages', 'Strategic planning']
  },
  {
    n: '04',
    title: 'Advisory',
    blurb: 'A proactive partner for the decisions that move the business — pricing, hiring, financing, exit.',
    items: ['Pricing & margin', 'Capital strategy', 'Buy / sell support', 'Quarterly reviews']
  },
];

function Services() {
  return (
    <section>
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Services</span>
            <h2 style={{ marginTop: 16 }}>One firm. Full stack.</h2>
          </div>
          <p className="lead">
            Most accountants look backwards at what already happened. We pair compliance with
            CFO-level insight, so you understand where the business is heading — and what to
            do about it.
          </p>
        </div>

        <div className="svc-grid">
          {SERVICES.map((s) => (
            <article className="card svc-card reveal" key={s.n}
              onPointerMove={(e) => {
                const el = e.currentTarget, r = el.getBoundingClientRect();
                el.style.setProperty('--mx', (e.clientX - r.left) + 'px');
                el.style.setProperty('--my', (e.clientY - r.top) + 'px');
                const rx = ((e.clientY - r.top) / r.height - 0.5) * -7;
                const ry = ((e.clientX - r.left) / r.width - 0.5) * 7;
                el.style.transform = `perspective(760px) rotateX(${rx}deg) rotateY(${ry}deg) translateY(-4px)`;
              }}
              onPointerLeave={(e) => { e.currentTarget.style.transform = ''; }}>
              <div className="svc-card-top">
                <span className="numlabel">{s.n} / 04</span>
                <span className="svc-arrow">↗</span>
              </div>
              <h3 style={{ marginTop: 32 }}>{s.title}</h3>
              <p style={{ marginTop: 12, color: 'var(--ink-2)' }}>{s.blurb}</p>
              <ul className="svc-items">
                {s.items.map(i => <li key={i}>{i}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        @media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }
        .svc-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 360px; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
        .svc-card::after {
          content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
          background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--rust) 14%, transparent), transparent 60%);
        }
        .svc-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--rust) 42%, transparent); box-shadow: var(--glow); }
        .svc-card:hover::after { opacity: 1; }
        .svc-card > * { position: relative; z-index: 1; }
        .svc-card-top { display: flex; justify-content: space-between; align-items: center; }
        .svc-arrow { font-family: var(--font-mono); color: var(--slate); transition: transform 0.2s; }
        .svc-card:hover .svc-arrow { transform: translate(3px, -3px); color: var(--rust); }
        .svc-items {
          list-style: none; padding: 0; margin-top: auto; padding-top: 24px;
          border-top: 1px dashed var(--line);
        }
        .svc-items li {
          font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2);
          padding: 6px 0; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between;
        }
        .svc-items li:last-child { border-bottom: none; }
        .svc-items li::before { content: "→"; color: var(--rust); margin-right: 8px; }
      `}</style>
    </section>
  );
}

const SELECTOR_OPTIONS = [
  { id: 'startup', label: 'Just starting out', recommends: ['Bookkeeping', 'Tax & compliance'], blurb: 'Get the books right from day one — clean ledgers, HST set up, year-end without surprises.' },
  { id: 'growing', label: 'Scaling 5–25 staff', recommends: ['Bookkeeping', 'Outsourced CFO', 'Advisory'], blurb: 'Add forward-looking finance: KPIs, cash flow forecasting, and a CFO in your corner monthly.' },
  { id: 'established', label: 'Established + complex', recommends: ['Outsourced CFO', 'Advisory', 'Tax & compliance'], blurb: 'Lender-ready reporting, capital planning, multi-entity tax — without a $300K full-time hire.' },
  { id: 'transition', label: 'Selling or transitioning', recommends: ['Advisory', 'Tax & compliance', 'Outsourced CFO'], blurb: 'Tax-efficient exit planning, due-diligence-ready financials, valuation support end-to-end.' },
];

function SmallBizTax() {
  const PILLARS = [
    { n: '01', t: 'Pay only your fair share', b: 'Most small businesses overpay tax — not because they want to, but because no one\'s actively looking. We do. Every deduction, credit, and structure choice gets reviewed with one question in mind: is this the most tax-efficient outcome legally available?' },
    { n: '02', t: 'On your side of the table', b: 'We don\'t work for the CRA. We work for you. That means proactive planning, plain-English advice, and a real human who picks up the phone when something doesn\'t add up — not a portal ticket and a 6-week wait.' },
    { n: '03', t: 'No-surprise filings', b: 'Year-end shouldn\'t be a panic. We work the file all year, so by the time T2s and T1s are due, the numbers are clean, the planning is done, and the bill is exactly what we said it would be.' },
    { n: '04', t: 'CRA letters? We handle them.', b: 'Reviews, audits, requests for information — we draft the response, deal with the auditor, and keep you out of it. You stay focused on the business; we deal with the agency.' },
  ];
  const PROOF = [
    { k: 'Year-round', v: 'Tax planning, not just tax filing' },
    { k: 'Flat fee', v: 'No hourly meter on phone calls' },
    { k: 'CPA-led', v: 'Senior eyes on every return' },
    { k: 'Audit-ready', v: 'Working papers organized from day 1' },
  ];
  return (
    <section style={{ background: 'var(--paper-2)', position: 'relative', overflow: 'hidden' }}>
      <Topo opacity={0.12} color="var(--ink)" />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
          <div>
            <span className="eyebrow" style={{ color: 'var(--rust)' }}>Small business tax</span>
            <h2 style={{ marginTop: 20, fontSize: 'clamp(44px, 6vw, 84px)', letterSpacing: '-0.035em', lineHeight: 0.98 }}>
              Built around<br />
              <span style={{ fontStyle: 'italic', color: 'var(--ink-3)', fontWeight: 400 }}>one job:</span><br />
              keeping more<br />
              of what you earn.
            </h2>
          </div>
          <div>
            <p className="lead" style={{ maxWidth: '46ch' }}>
              Tax is the single largest line item most owners write a cheque for — and the
              one most accountants treat as a once-a-year afterthought. We don't. Tax is
              what we do, and we do it on your side.
            </p>
            <div className="sbt-proof">
              {PROOF.map(p => (
                <div key={p.k} className="sbt-proof-row">
                  <span className="sbt-proof-k">{p.k}</span>
                  <span className="sbt-proof-v">{p.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="sbt-pillars">
          {PILLARS.map(p => (
            <article key={p.n} className="sbt-pillar reveal">
              <div className="sbt-pillar-head">
                <span className="numlabel">{p.n}</span>
                <span className="sbt-mark">●</span>
              </div>
              <h3 style={{ marginTop: 24, fontSize: 22, letterSpacing: '-0.01em' }}>{p.t}</h3>
              <p style={{ marginTop: 12, color: 'var(--ink-2)', fontSize: 15.5, lineHeight: 1.55 }}>{p.b}</p>
            </article>
          ))}
        </div>

        <div className="sbt-cta reveal">
          <div>
            <div className="numlabel" style={{ color: 'color-mix(in srgb, var(--paper) 60%, transparent)' }}>The bottom line</div>
            <p style={{ marginTop: 12, color: 'var(--paper)', fontSize: 'clamp(22px, 2.4vw, 30px)', fontWeight: 500, letterSpacing: '-0.015em', maxWidth: '32ch', lineHeight: 1.25 }}>
              If you've ever felt your accountant was building a case <em>about</em> you, not <em>for</em> you — that's the gap we're built to close.
            </p>
          </div>
          <a href="contact.html" className="btn" style={{ background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)', flex: 'none' }}>
            Talk to a tax advisor <span className="arrow">↗</span>
          </a>
        </div>
      </div>
      <style>{`
        .sbt-proof {
          margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line);
        }
        .sbt-proof-row {
          display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: baseline;
          padding: 10px 0; border-bottom: 1px solid var(--line-2);
        }
        .sbt-proof-row:last-child { border-bottom: none; }
        .sbt-proof-k {
          font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
          text-transform: uppercase; color: var(--rust);
        }
        .sbt-proof-v { font-size: 15px; color: var(--ink); }
        .sbt-pillars {
          margin-top: 80px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
          background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
        }
        .sbt-pillar { background: var(--paper); padding: 36px; min-height: 320px; }
        .sbt-pillar-head {
          display: flex; justify-content: space-between; align-items: center;
          padding-bottom: 20px; border-bottom: 1px dashed var(--line);
        }
        .sbt-mark { color: var(--rust); font-size: 9px; }
        .sbt-cta {
          margin-top: 64px; color: var(--paper);
          padding: 56px; border-radius: 22px;
          display: flex; justify-content: space-between; align-items: center; gap: 48px;
        }
        @media (max-width: 1100px) { .sbt-pillars { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 900px) {
          .sbt-pillar { min-height: 0; padding: 28px; }
          .sbt-cta { flex-direction: column; align-items: flex-start; padding: 36px; gap: 28px; }
          section .wrap > div:first-child { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 600px) { .sbt-pillars { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function VirtualByDesign() {
  // Pan-Canada client cities (viewBox 1000x560) + the Blue North hub in Ontario
  const HUB = { x: 650, y: 436 };
  const CITIES = [
    { x: 172, y: 388 }, { x: 196, y: 352 }, { x: 232, y: 214 }, { x: 288, y: 344 },
    { x: 300, y: 300 }, { x: 360, y: 372 }, { x: 352, y: 264 }, { x: 446, y: 388 },
    { x: 600, y: 396 }, { x: 686, y: 414 }, { x: 724, y: 396 }, { x: 762, y: 372 },
    { x: 806, y: 436 }, { x: 742, y: 210 }, { x: 900, y: 388 },
  ];
  const CANADA = "M148 430 L150 300 L176 276 L160 236 L150 196 L196 150 L246 168 L286 150 L300 176 L344 150 L392 128 L432 152 L470 126 L508 150 L556 134 L582 116 L620 138 L602 210 L636 296 L666 336 L702 268 L718 182 L742 150 L784 168 L812 148 L840 190 L872 252 L856 300 L886 342 L858 378 L820 402 L836 430 L800 448 L762 452 L724 438 L700 452 L648 452 L628 470 L598 452 L560 440 L148 430 Z";
  const NFLD = "M886 356 L910 366 L918 396 L900 414 L878 398 L884 372 Z";
  const MYTHS = [
    {
      myth: '"I need to meet my accountant in person."',
      truth: 'You need an accountant who answers when it matters. A 20-minute video call with the person actually closing your books beats a once-a-year handshake with a partner who hands the file to a junior.',
    },
    {
      myth: '"Virtual feels distant."',
      truth: 'Our clients hear from us more often, not less. Loom walkthroughs of your monthly close, Slack-quick replies on quick questions, scheduled video reviews — relationship-building is built into the cadence.',
    },
    {
      myth: '"They won\'t understand my business."',
      truth: 'Cloud books mean we see your numbers in real time, every day — not in a shoebox once a year. We know your business better than a local firm seeing it quarterly ever could.',
    },
    {
      myth: '"What if something goes wrong?"',
      truth: 'CRA letters, audits, lender questions — handled the same way they\'d be handled in person, just faster, because we\'re not blocked on a commute or a calendar.',
    },
  ];
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <Topo opacity={0.16} color="var(--ink)" />
      <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">Virtual by design</span>
            <h2 style={{ marginTop: 20, fontSize: 'clamp(44px, 6vw, 84px)', letterSpacing: '-0.035em', lineHeight: 0.98 }}>
              You don't need to<br />
              <span style={{ fontStyle: 'italic', color: 'var(--ink-3)', fontWeight: 400 }}>shake a hand</span><br />
              to trust the work.
            </h2>
            <p className="lead" style={{ marginTop: 32, maxWidth: '46ch' }}>
              The idea that you have to know your accountant in person is a holdover from
              when ledgers were on paper. Today, the best accounting relationships are the
              ones that show up — every week, in your numbers — not once a year over coffee.
            </p>
          </div>
          <div className="vbd-map-wrap">
            <div className="vbd-map">
              <div className="vbd-map-glow" aria-hidden="true"></div>
              <svg className="vbd-map-svg" viewBox="0 0 1000 560"
                role="img" aria-label="Map of Canada: the Blue North cloud hub in Ontario connected to client cities across every province and territory.">
                <defs>
                  <pattern id="vbdDots" width="15" height="15" patternUnits="userSpaceOnUse">
                    <circle cx="2" cy="2" r="1.1" fill="rgba(120,160,255,0.20)" />
                  </pattern>
                </defs>
                {/* Canada landmass */}
                <path d={CANADA} className="ca-fill" />
                <path d={CANADA} fill="url(#vbdDots)" />
                <path d={CANADA} className="ca-stroke" />
                <path d={NFLD} className="ca-fill" />
                <path d={NFLD} className="ca-stroke" />
                {/* Live connection lines — hub → every city */}
                {CITIES.map((c, i) => (
                  <line key={`l${i}`} className="ca-line" x1={HUB.x} y1={HUB.y} x2={c.x} y2={c.y} strokeDasharray="2 6">
                    <animate attributeName="stroke-dashoffset" from="0" to="-16" dur={`${1.6 + (i % 4) * 0.3}s`} repeatCount="indefinite" />
                  </line>
                ))}
                {/* Data pulses broadcasting from the hub across Canada */}
                {CITIES.map((c, i) => {
                  const begin = `${(i * 0.3).toFixed(2)}s`;
                  return (
                    <circle key={`p${i}`} className="ca-pulse" r="3">
                      <animate attributeName="cx" from={HUB.x} to={c.x} dur="2.4s" begin={begin} repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.4 0 0.2 1" />
                      <animate attributeName="cy" from={HUB.y} to={c.y} dur="2.4s" begin={begin} repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.4 0 0.2 1" />
                      <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.12;0.72;1" dur="2.4s" begin={begin} repeatCount="indefinite" />
                    </circle>
                  );
                })}
                {/* Client city nodes */}
                {CITIES.map((c, i) => (
                  <g key={`n${i}`}>
                    <circle cx={c.x} cy={c.y} r="6" className="ca-node-halo" />
                    <circle cx={c.x} cy={c.y} r="2.6" className="ca-node" />
                  </g>
                ))}
                {/* Blue North hub — beacon in Ontario */}
                <circle className="ca-hub-ring" cx={HUB.x} cy={HUB.y} r="10" fill="none">
                  <animate attributeName="r" values="10;36" dur="3s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.2 0 0.4 1" />
                  <animate attributeName="opacity" values="0.6;0" dur="3s" repeatCount="indefinite" />
                </circle>
                <circle className="ca-hub-ring" cx={HUB.x} cy={HUB.y} r="10" fill="none">
                  <animate attributeName="r" values="10;36" dur="3s" begin="1.5s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.2 0 0.4 1" />
                  <animate attributeName="opacity" values="0.6;0" dur="3s" begin="1.5s" repeatCount="indefinite" />
                </circle>
                <circle cx={HUB.x} cy={HUB.y} r="8" className="ca-hub" />
                <circle cx={HUB.x} cy={HUB.y} r="3.4" className="ca-hub-core" />
                <text className="ca-hub-label" x={HUB.x} y={HUB.y - 18} textAnchor="middle">BLUE NORTH</text>
              </svg>
              <div className="vbd-map-legend">
                <div className="vbd-legend-row">
                  <span className="vbd-legend-dot vbd-legend-hub" />
                  <span>Blue North · Cloud-first hub</span>
                </div>
                <div className="vbd-legend-row">
                  <span className="vbd-legend-dot vbd-legend-client" />
                  <span>Clients · 10 provinces, 3 territories</span>
                </div>
              </div>
            </div>
            <div className="vbd-stats">
              <div>
                <div className="vbd-stat-num">~50%</div>
                <div className="numlabel">Avg. fee reduction</div>
              </div>
              <div>
                <div className="vbd-stat-num">{'<'} 24h</div>
                <div className="numlabel">Avg. response time</div>
              </div>
              <div>
                <div className="vbd-stat-num">100%</div>
                <div className="numlabel">Cloud-first delivery</div>
              </div>
            </div>
          </div>
        </div>

        <div className="vbd-myths">
          {MYTHS.map((m, i) => (
            <article key={i} className="vbd-myth reveal">
              <div className="vbd-myth-tag">
                <span className="numlabel">Myth · 0{i + 1}</span>
                <span className="vbd-strike">struck</span>
              </div>
              <p className="vbd-myth-q">{m.myth}</p>
              <div className="vbd-myth-divider"><span>The reality</span></div>
              <p className="vbd-myth-a">{m.truth}</p>
            </article>
          ))}
        </div>

        <div className="vbd-belt reveal">
          <div className="vbd-belt-text">
            <span className="numlabel" style={{ color: 'color-mix(in srgb, var(--paper) 60%, transparent)' }}>Coast to coast</span>
            <p style={{ marginTop: 12, color: 'var(--paper)', fontSize: 'clamp(22px, 2.4vw, 30px)', fontWeight: 500, letterSpacing: '-0.015em', maxWidth: '34ch', lineHeight: 1.25 }}>
              Hundreds of Canadian businesses are already running leaner — keeping their books closer, their fees lower, and their accountant within a video call.
            </p>
          </div>
          <a href="contact.html" className="btn" style={{ background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)', flex: 'none' }}>
            Book a 20-min intro <span className="arrow">↗</span>
          </a>
        </div>
      </div>
      <style>{`
        .vbd-map-wrap { display: flex; flex-direction: column; gap: 24px; }
        .vbd-map {
          position: relative; overflow: hidden; isolation: isolate;
          border: 1px solid rgba(140,175,255,0.18); border-radius: 18px; padding: 20px;
          background: radial-gradient(92% 82% at 60% 8%, #12224a 0%, #0a1430 55%, #070d20 100%);
          box-shadow: 0 0 0 1px rgba(45,78,245,0.12), 0 24px 64px rgba(4,9,20,0.5), 0 0 60px rgba(45,78,245,0.12);
        }
        .vbd-map-glow { position: absolute; inset: -20% -10% auto -10%; height: 70%; z-index: 0; pointer-events: none; filter: blur(50px);
          background: radial-gradient(50% 100% at 40% 0%, rgba(77,159,255,.20), transparent 70%), radial-gradient(50% 100% at 76% 10%, rgba(45,78,245,.18), transparent 72%); }
        .vbd-map-svg { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 1000/560; display: block; overflow: visible; }
        .ca-fill { fill: rgba(45,78,245,0.08); }
        .ca-stroke { fill: none; stroke: rgba(130,170,255,0.55); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(77,159,255,0.5)); }
        .ca-line { stroke: rgba(120,160,255,0.30); stroke-width: 1.3; }
        .ca-pulse { fill: #7fb0ff; filter: drop-shadow(0 0 5px #4d9fff); }
        .ca-node-halo { fill: rgba(77,159,255,0.18); }
        .ca-node { fill: #5fa0ff; filter: drop-shadow(0 0 5px rgba(77,159,255,0.8)); }
        .ca-hub-ring { stroke: #2d4ef5; stroke-width: 1.6; pointer-events: none; }
        .ca-hub { fill: rgba(45,78,245,0.92); filter: drop-shadow(0 0 14px rgba(45,78,245,0.95)); }
        .ca-hub-core { fill: #e6eeff; }
        .ca-hub-label { fill: #cfe0ff; font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; font-weight: 600; }
        @media (prefers-reduced-motion: reduce) {
          .ca-pulse, .ca-hub-ring { display: none; }
          .ca-line { stroke-dasharray: none !important; }
        }
        .vbd-map-legend {
          position: relative; z-index: 1;
          display: flex; gap: 24px; flex-wrap: wrap;
          padding-top: 16px; margin-top: 8px;
          border-top: 1px solid rgba(140,175,255,0.14);
          font-family: var(--font-mono); font-size: 11.5px; color: rgba(200,215,255,0.62);
          letter-spacing: 0.04em; text-transform: uppercase;
        }
        .vbd-legend-row { display: flex; align-items: center; gap: 8px; }
        .vbd-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
        .vbd-legend-hub { background: #2d4ef5; box-shadow: 0 0 8px rgba(45,78,245,0.8); }
        .vbd-legend-client { background: #5fa0ff; }
        .vbd-stats {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
          padding-top: 20px; border-top: 1px solid var(--line);
        }
        .vbd-stat-num {
          font-size: clamp(28px, 3vw, 38px); font-weight: 600;
          letter-spacing: -0.03em; color: var(--ink);
        }
        .vbd-myths {
          margin-top: 96px;
          display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
        }
        .vbd-myth {
          background: var(--paper); border: 1px solid var(--line);
          border-radius: 18px; padding: 32px;
          display: flex; flex-direction: column; gap: 16px;
          transition: border-color 0.2s, transform 0.2s;
        }
        .vbd-myth:hover { border-color: var(--ink); transform: translateY(-2px); }
        .vbd-myth-tag { display: flex; justify-content: space-between; align-items: center; }
        .vbd-strike {
          font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
          text-transform: uppercase; color: var(--paper);
          background: var(--rust); padding: 4px 8px; border-radius: 4px;
        }
        .vbd-myth-q {
          font-size: clamp(20px, 2vw, 24px); font-weight: 500;
          letter-spacing: -0.015em; color: var(--ink);
          text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--rust) 50%, transparent);
          text-decoration-thickness: 2px;
        }
        .vbd-myth-divider {
          display: flex; align-items: center; gap: 12px;
          font-family: var(--font-mono); font-size: 10.5px;
          letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust);
        }
        .vbd-myth-divider::before,
        .vbd-myth-divider::after {
          content: ""; flex: 1; height: 1px; background: var(--line);
        }
        .vbd-myth-a {
          color: var(--ink-2); font-size: 15.5px; line-height: 1.6;
        }
        .vbd-belt {
          margin-top: 64px; color: var(--paper);
          padding: 56px; border-radius: 22px;
          display: flex; justify-content: space-between; align-items: center; gap: 48px;
        }
        @media (max-width: 1100px) {
          section .wrap > div:first-child { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 720px) {
          .vbd-myths { grid-template-columns: 1fr; }
          .vbd-belt { flex-direction: column; align-items: flex-start; padding: 36px; gap: 28px; }
          .vbd-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
        }
      `}</style>
    </section>
  );
}

function Selector() {
  const [pick, setPick] = _useState('growing');
  const opt = SELECTOR_OPTIONS.find(o => o.id === pick);
  return (
    <section>
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Find your fit</span>
            <h2 style={{ marginTop: 16 }}>Where is your<br />business right now?</h2>
          </div>
          <p className="lead">
            Pick the stage that's closest. We'll show you which services typically make
            sense — and where Blue North fits in.
          </p>
        </div>

        <div className="selector reveal">
          <div className="selector-tabs">
            {SELECTOR_OPTIONS.map((o, i) => (
              <button key={o.id} className={`selector-tab ${pick === o.id ? 'on' : ''}`}
                onClick={() => setPick(o.id)}>
                <span className="numlabel">0{i + 1}</span>
                <span>{o.label}</span>
              </button>
            ))}
          </div>
          <div className="selector-result">
            <div>
              <span className="eyebrow">Recommended starting point</span>
              <p className="lead" style={{ marginTop: 18, color: 'var(--ink)' }}>{opt.blurb}</p>
              <div className="selector-tags">
                {opt.recommends.map(r => <span className="chip" key={r} style={{ background: 'var(--paper-2)' }}>{r}</span>)}
              </div>
            </div>
            <a href="contact.html" className="btn" style={{ alignSelf: 'flex-start' }}>
              Get a tailored proposal <span className="arrow">↗</span>
            </a>
          </div>
        </div>
      </div>
      <style>{`
        .selector {
          display: grid; grid-template-columns: 1fr 1.4fr;
          background: var(--paper-2); border: 1px solid var(--line); border-radius: 24px;
          overflow: hidden;
        }
        @media (max-width: 900px) { .selector { grid-template-columns: 1fr; } }
        .selector-tabs { display: flex; flex-direction: column; padding: 16px; gap: 4px; border-right: 1px solid var(--line); }
        @media (max-width: 900px) { .selector-tabs { border-right: none; border-bottom: 1px solid var(--line); } }
        .selector-tab {
          display: flex; align-items: center; gap: 14px;
          padding: 18px 20px; border: none; background: transparent;
          font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--ink-2);
          text-align: left; cursor: pointer; border-radius: 14px;
          transition: background 0.15s, color 0.15s;
        }
        .selector-tab:hover { background: var(--paper); color: var(--ink); }
        .selector-tab.on { background: var(--ink); color: var(--paper); }
        .selector-tab.on .numlabel { color: color-mix(in srgb, var(--paper) 60%, transparent); }
        .selector-result {
          padding: 48px;
          display: flex; flex-direction: column; justify-content: space-between;
          gap: 32px; min-height: 360px;
        }
        .selector-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
      `}</style>
    </section>
  );
}

function Process() {
  const steps = [
    { n: '01', title: 'Discovery', body: 'A 30-minute call to understand the business, what\'s working, and where the books or reporting are causing friction.' },
    { n: '02', title: 'Diagnostic', body: 'We review your last 12 months — bookkeeping hygiene, tax position, cash flow patterns — and write up a clear plan.' },
    { n: '03', title: 'Onboarding', body: 'We rebuild your stack on Xero or QBO, set up a clean chart of accounts, and migrate history without disrupting operations.' },
    { n: '04', title: 'Monthly cadence', body: 'Books closed by the 10th. KPI report by the 15th. Quarterly business review with you and your CPA.' },
  ];
  return (
    <section className="night" style={{ padding: 'var(--section-y) 0' }}>
      <HeroBG />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head reveal" style={{ color: 'var(--paper)' }}>
          <div>
            <span className="eyebrow" style={{ color: 'color-mix(in srgb, var(--paper) 60%, transparent)' }}>How we work</span>
            <h2 style={{ marginTop: 16, color: 'var(--paper)' }}>From first call<br />to monthly close.</h2>
          </div>
          <p className="lead" style={{ color: 'color-mix(in srgb, var(--paper) 80%, transparent)' }}>
            A clear, predictable rhythm — designed so the business runs on numbers,
            not on guesswork or end-of-year scrambles.
          </p>
        </div>

        <div className="process-grid">
          {steps.map((s, i) => (
            <div key={s.n} className="process-step reveal" style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="process-num">{s.n}</div>
              <div className="process-rule"></div>
              <h3 style={{ color: 'var(--paper)', marginTop: 20 }}>{s.title}</h3>
              <p style={{ marginTop: 12, color: 'color-mix(in srgb, var(--paper) 70%, transparent)', fontSize: 14.5, lineHeight: 1.55 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
        @media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 540px) { .process-grid { grid-template-columns: 1fr; } }
        .process-num { font-family: var(--font-mono); font-size: 13px; color: color-mix(in srgb, var(--paper) 60%, transparent); letter-spacing: 0.06em; }
        .process-rule { height: 1px; background: color-mix(in srgb, var(--paper) 25%, transparent); margin-top: 16px; position: relative; }
        .process-rule::after { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--rust-soft); }
      `}</style>
    </section>
  );
}

function Testimonial() {
  return (
    <section>
      <div className="wrap">
        <blockquote className="quote reveal">
          <span className="eyebrow">From a client</span>
          <p className="quote-body">
            "We'd been with three accountants in five years before Blue North. They were
            the first to actually <em>look forward</em> — to tell us what next quarter
            looked like, not just what last year was. Our margins are up 6 points since
            we onboarded."
          </p>
          <div className="quote-cite">
            <div>
              <div style={{ fontWeight: 500 }}>Owner — Independent hospitality group</div>
              <div className="numlabel" style={{ marginTop: 4 }}>Canadian SMB · 32 staff</div>
            </div>
          </div>
        </blockquote>
      </div>
      <style>{`
        .quote { margin: 0; max-width: 980px; }
        .quote-body {
          font-size: clamp(28px, 3.4vw, 44px); font-weight: 400; line-height: 1.2;
          letter-spacing: -0.02em; margin-top: 24px; color: var(--ink);
          text-wrap: balance;
        }
        .quote-body em { color: var(--rust); font-style: italic; font-weight: 500; }
        .quote-cite { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
      `}</style>
    </section>
  );
}

function CTA() {
  return (
    <section style={{ paddingBottom: 'calc(80px * var(--density))' }}>
      <div className="wrap">
        <div className="cta-card reveal">
          <HeroBG />
          <div className="cta-inner">
            <span className="eyebrow" style={{ color: 'color-mix(in srgb, var(--paper) 60%, transparent)' }}>Next step</span>
            <h2 style={{ marginTop: 16, color: 'var(--paper)', fontSize: 'clamp(40px, 5vw, 72px)' }}>
              A 30-minute call.<br />
              <span style={{ fontStyle: 'italic', color: 'color-mix(in srgb, var(--paper) 60%, transparent)', fontWeight: 400 }}>
                No fee, no obligation.
              </span>
            </h2>
            <p className="lead" style={{ color: 'color-mix(in srgb, var(--paper) 75%, transparent)', marginTop: 24, maxWidth: '52ch' }}>
              Bring a recent P&L (or just questions). We'll talk through where the books are
              at, where you'd like the business to go, and whether we're the right fit.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
              <a href="contact.html" className="btn" style={{ background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)' }}>
                Book a call <span className="arrow">↗</span>
              </a>
              <a href="services.html" className="btn btn-ghost" style={{ color: 'var(--paper)', borderColor: 'color-mix(in srgb, var(--paper) 30%, transparent)' }}>
                See services
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .cta-card {
          color: var(--paper);
          border-radius: 28px; padding: 72px; position: relative; overflow: hidden;
        }
        @media (max-width: 720px) { .cta-card { padding: 40px 28px; border-radius: 20px; } }
        .cta-inner { position: relative; z-index: 1; }
      `}</style>
    </section>
  );
}

function App() {
  useReveal();
  return (
    <>
      <Nav active="home" />
      <main>
        <Hero />
        <StackStrip />
        <Services />
        <SmallBizTax />
        <VirtualByDesign />
        <Selector />
        <Process />
        <Testimonial />
        <CTA />
      </main>
      <Footer />
      <TweaksHost />
    </>
  );
}

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