// Pricing + Guarantee + FAQ + CTA + Footer
const { useState: useStateF } = React;

function Pricing() {
  return (
    <section id="pricing" className="sec price-sec">
      <div className="container">
        <div className="price-head" data-reveal>
          <span className="eyebrow"><span className="num">07</span><span className="dot" /> Pricing</span>
          <h2 className="serif price-title">Start free.<br/><em className="serif-it">Upgrade when you're ready.</em></h2>
        </div>

        <div className="price-grid">
          <div className="price-compare" data-reveal>
            <div className="price-cmp-row">
              <span>A specialist GI visit</span>
              <span className="serif" style={{textDecoration:'line-through', color:'var(--muted)'}}>$500</span>
            </div>
            <div className="price-cmp-row">
              <span>One hour with a Nutritionist</span>
              <span className="serif" style={{textDecoration:'line-through', color:'var(--muted)'}}>$250</span>
            </div>
            <div className="price-cmp-row hi">
              <span>Gutsy · year</span>
              <span className="serif" style={{color:'var(--accent)'}}>$149</span>
            </div>
          </div>

          <div className="price-card" data-reveal>
            <span className="price-badge cap">Premium · Annual</span>
            <div className="price-num serif">$149<span className="price-per">/yr</span></div>
            <p className="price-cap">Less than 41¢ a day. 7 days free, then your full protocol unlocks.</p>
            <ul className="price-list">
              <li>AI photo meal analysis · FODMAP-flagged</li>
              <li>Trigger detection with confidence %</li>
              <li>The 6-Week Clinical Protocol</li>
              <li>Private AI Gut Coach (24/7 chat)</li>
              <li>Doctor-ready PDF exports</li>
              <li>Apple Health integration</li>
              <li>Full data export · always your data</li>
            </ul>
            <a href="https://apps.apple.com/us/app/gutsy-ai-ibs-trigger-finder/id6758587496" target="_blank" rel="noopener noreferrer" className="btn" style={{marginTop:32, width:'100%', justifyContent:'center'}}>
              <span>Start 7-Day Free Trial</span>
              <span className="arr">→</span>
            </a>
            <div className="cap" style={{color:'var(--muted)', marginTop:16, textAlign:'center'}}>No credit card · Cancel anytime · Apple-managed billing</div>
          </div>
        </div>

        <div className="guarantee" data-reveal>
          <div className="cap" style={{color:'var(--accent)'}}>— Our Guarantee —</div>
          <h3 className="serif guarantee-h">"We'll find your triggers,<br/><em className="serif-it">or your money back.</em>"</h3>
          <p>Log your meals, symptoms, and stool for 30 days. If Gutsy can't identify your triggers with statistical confidence, we'll refund the full year.</p>
        </div>
      </div>

      <style>{`
        .price-sec { background: var(--bg); border-top: 1px solid var(--line); }
        .price-head { max-width: 800px; margin-bottom: 80px; }
        .price-title { margin-top: 28px; font-size: clamp(40px, 6vw, 96px); line-height: 1; letter-spacing: -0.04em; font-weight: 300; }
        .price-title em { color: var(--accent); }
        [data-theme="dark"] .price-title em { color: var(--accent-glow); }

        .price-grid {
          display: grid;
          grid-template-columns: 1fr 1.2fr;
          gap: 48px;
          align-items: center;
        }
        .price-compare { border-top: 1px solid var(--line); }
        .price-cmp-row {
          display: flex; justify-content: space-between; align-items: baseline;
          padding: 28px 0; border-bottom: 1px solid var(--line);
          font-size: 18px; color: var(--ink-2);
        }
        .price-cmp-row .serif { font-size: 36px; font-weight: 300; letter-spacing: -0.02em; }
        .price-cmp-row.hi { font-size: 24px; color: var(--ink); }
        .price-cmp-row.hi .serif { font-size: 64px; }

        .price-card {
          position: relative;
          background:
            radial-gradient(ellipse 700px 380px at 100% 0%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 60%),
            radial-gradient(ellipse 500px 280px at 0% 100%, color-mix(in oklab, var(--accent-glow) 10%, transparent) 0%, transparent 65%),
            linear-gradient(160deg, var(--hi) 0%, var(--paper) 100%);
          border: 1.5px solid color-mix(in oklab, var(--accent) 35%, var(--line));
          padding: 56px 48px;
          isolation: isolate;
          overflow: hidden;
          box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.5),
            0 0 0 1px color-mix(in oklab, var(--accent) 8%, transparent),
            0 24px 48px -20px color-mix(in oklab, var(--accent) 35%, transparent),
            0 50px 100px -30px color-mix(in oklab, var(--accent) 22%, transparent),
            0 2px 4px rgba(14,20,16,0.06);
          animation: priceCardFloat 7s ease-in-out infinite alternate;
        }
        .price-card::before {
          content: "";
          position: absolute; inset: 0;
          background: linear-gradient(115deg,
            transparent 30%,
            color-mix(in oklab, var(--accent) 14%, transparent) 48%,
            color-mix(in oklab, var(--accent-glow) 10%, transparent) 52%,
            transparent 70%);
          transform: translateX(-110%);
          animation: priceCardShine 8s ease-in-out infinite;
          pointer-events: none;
          z-index: 0;
        }
        .price-card::after {
          content: "";
          position: absolute;
          top: -2px; right: -2px;
          width: 220px; height: 220px;
          background: radial-gradient(circle at top right,
            color-mix(in oklab, var(--accent) 22%, transparent) 0%,
            transparent 60%);
          filter: blur(20px);
          pointer-events: none;
          z-index: 0;
          opacity: 0.9;
        }
        .price-card > * { position: relative; z-index: 1; }
        @keyframes priceCardFloat {
          0%   { transform: translateY(0); }
          100% { transform: translateY(-4px); }
        }
        @keyframes priceCardShine {
          0%        { transform: translateX(-110%); }
          55%, 100% { transform: translateX(210%); }
        }

        .price-badge {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 7px 14px;
          background: color-mix(in oklab, var(--accent) 8%, transparent);
          border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
          color: var(--accent);
          border-radius: 100px;
          letter-spacing: 0.2em;
          font-size: 10px;
          backdrop-filter: blur(4px);
        }
        .price-badge::before {
          content: "";
          width: 5px; height: 5px;
          border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 60%, transparent);
          animation: priceBadgePulse 2.4s ease-in-out infinite;
        }
        @keyframes priceBadgePulse {
          0%, 100% { opacity: 0.6; transform: scale(1); }
          50%      { opacity: 1;   transform: scale(1.25); }
        }

        .price-num {
          font-size: 112px;
          font-weight: 300;
          letter-spacing: -0.04em;
          color: var(--ink);
          margin-top: 20px; line-height: 1;
          background: linear-gradient(170deg,
            var(--ink) 0%,
            var(--ink) 55%,
            color-mix(in oklab, var(--accent) 70%, var(--ink)) 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        }
        .price-per {
          font-size: 24px; color: var(--muted); margin-left: 8px;
          -webkit-text-fill-color: var(--muted);
        }
        .price-cap { margin-top: 16px; color: var(--ink-2); }
        .price-list { list-style: none; margin-top: 32px; }
        .price-list li {
          padding: 14px 0; border-bottom: 1px solid var(--line);
          color: var(--ink-2); position: relative; padding-left: 24px;
        }
        .price-list li::before {
          content: "✓"; position: absolute; left: 0; color: var(--accent);
        }

        .guarantee {
          margin-top: 100px;
          padding: 64px;
          background: var(--bg-2);
          border: 1px solid var(--line);
          text-align: center;
        }
        .guarantee-h {
          margin: 20px 0;
          font-size: clamp(32px, 4vw, 56px);
          line-height: 1.1;
          letter-spacing: -0.03em;
          font-weight: 300;
          color: var(--ink);
        }
        .guarantee-h em { color: var(--accent); }
        [data-theme="dark"] .guarantee-h em { color: var(--accent-glow); }
        .guarantee p { max-width: 540px; margin: 0 auto; color: var(--ink-2); font-size: 18px; }

        @media (max-width: 900px) {
          .price-grid { grid-template-columns: 1fr; }
          .price-card {
            padding: 40px 28px;
            box-shadow:
              inset 0 1px 0 rgba(255,255,255,0.5),
              0 0 0 1px color-mix(in oklab, var(--accent) 8%, transparent),
              0 16px 32px -16px color-mix(in oklab, var(--accent) 35%, transparent),
              0 30px 70px -25px color-mix(in oklab, var(--accent) 22%, transparent);
          }
          .price-num { font-size: 84px; }
          .guarantee { padding: 40px 24px; }
        }
      `}</style>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useStateF(0);
  const items = [
    ['How is Gutsy different from a food diary?', 'A food diary asks you to spot patterns. Gutsy finds them. The correlation engine walks symptoms backwards through your personal transit time (typically 12–72 hours) to identify which meal — possibly two days ago — actually caused today\'s flare.'],
    ['Is Gutsy a medical device?', 'No. Gutsy is a tracking and intelligence tool, not a medical device. It\'s designed to make your conversations with a doctor or dietitian more productive — by handing them a one-page clinical-grade report.'],
    ['How long until I see my triggers?', 'Most people start seeing high-confidence triggers around week 3 of the protocol. By week 6 you have a complete personal trigger map, with confidence percentages and recommended reintroduction windows.'],
    ['What about my data and privacy?', 'Health data is stored on your device using Apple\'s secure frameworks. We don\'t sell data. AI analysis runs over encrypted connections. You can export everything at any time.'],
    ['What does the 7-day trial include?', 'Full access to everything — AI meal analysis, trigger detection, the 6-Week Protocol, the Gutsy AI coach, doctor-ready exports. No credit card required up front.'],
    ['Does Gutsy work for IBS-C, IBS-D, IBS-M?', 'Yes. The transit-time engine is built around your personal pace — whether that\'s 12 hours or 72+. All three subtypes run through the same protocol with personalized adjustments.'],
    ['Can I cancel anytime?', 'Yes. Manage and cancel through your Apple ID settings. You\'ll keep premium access until the end of your billing period. No retention emails. No cancellation maze.'],
  ];

  return (
    <section id="faq" className="sec faq-sec">
      <div className="container">
        <div className="faq-head" data-reveal>
          <span className="eyebrow"><span className="num">08</span><span className="dot" /> FAQ</span>
          <h2 className="serif faq-title">Common <em className="serif-it">questions.</em></h2>
        </div>

        <div className="faq-list" data-reveal>
          {items.map(([q,a], i) => (
            <div key={i} className={`faq-item ${open===i?'on':''}`}>
              <button className="faq-q" onClick={()=>setOpen(open===i ? -1 : i)}>
                <span className="cap" style={{color:'var(--muted)', marginRight: 24}}>{String(i+1).padStart(2,'0')}</span>
                <span className="faq-q-txt serif">{q}</span>
                <span className="faq-plus">{open===i?'−':'+'}</span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .faq-sec { background: var(--bg-2); border-top: 1px solid var(--line); padding: 100px 0; }
        .faq-head { margin-bottom: 48px; max-width: 800px; }
        .faq-title { margin-top: 20px; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 300; }
        .faq-title em { color: var(--accent); }
        [data-theme="dark"] .faq-title em { color: var(--accent-glow); }

        .faq-list { border-top: 1px solid var(--line); max-width: 920px; }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-q {
          width: 100%;
          background: transparent; border: none;
          padding: 18px 0;
          display: flex; align-items: center; gap: 16px;
          color: var(--ink); cursor: pointer;
          text-align: left;
          transition: padding 0.3s;
        }
        .faq-q:hover { padding-left: 6px; }
        .faq-q-txt {
          flex: 1;
          font-size: clamp(15px, 1.4vw, 18px);
          line-height: 1.35;
          font-weight: 400;
          letter-spacing: -0.01em;
        }
        .faq-plus {
          font-family: 'Fraunces', serif;
          font-size: 22px;
          font-weight: 200;
          color: var(--accent);
          width: 24px; text-align: center;
          transition: transform 0.4s;
        }
        .faq-item.on .faq-plus { transform: rotate(180deg); }

        .faq-a {
          max-height: 0; overflow: hidden;
          transition: max-height 0.6s cubic-bezier(0.2,0.8,0.2,1);
        }
        .faq-item.on .faq-a { max-height: 320px; }
        .faq-a-inner {
          padding: 0 0 18px 46px;
          color: var(--ink-2);
          font-size: 14.5px; line-height: 1.55;
          max-width: 680px;
        }
      `}</style>
    </section>
  );
}

function FinalCTA() {
  const canvasRef = React.useRef(null);
  React.useEffect(() => {
    const c = canvasRef.current; if (!c) return;
    const ctx = c.getContext('2d');
    const dpr = window.devicePixelRatio || 1;
    let w, h, raf, t = 0;
    const mouse = { x: 0.5, y: 0.5, tx: 0.5, ty: 0.5 };
    const resize = () => {
      const r = c.getBoundingClientRect();
      w = r.width; h = r.height;
      c.width = w*dpr; c.height = h*dpr; ctx.setTransform(dpr,0,0,dpr,0,0);
    };
    resize();
    window.addEventListener('resize', resize);
    const onMove = (e) => {
      const r = c.getBoundingClientRect();
      mouse.tx = (e.clientX - r.left) / r.width;
      mouse.ty = (e.clientY - r.top) / r.height;
    };
    c.addEventListener('mousemove', onMove);

    // floating particles
    const N = 90;
    const parts = Array.from({length: N}, () => ({
      x: Math.random(), y: Math.random(),
      vx: (Math.random()-0.5)*0.0006,
      vy: (Math.random()-0.5)*0.0006,
      r: Math.random()*1.6 + 0.4,
      life: Math.random()
    }));

    const draw = () => {
      t += 0.006;
      mouse.x += (mouse.tx - mouse.x) * 0.05;
      mouse.y += (mouse.ty - mouse.y) * 0.05;
      const cx = w * mouse.x, cy = h * mouse.y;

      // base wash
      const bg = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(w,h)*0.85);
      bg.addColorStop(0, 'rgba(36,72,52,1)');
      bg.addColorStop(0.45, 'rgba(20,42,32,1)');
      bg.addColorStop(1, 'rgba(8,18,14,1)');
      ctx.fillStyle = bg;
      ctx.fillRect(0,0,w,h);

      // peristaltic concentric rings
      const rings = 7;
      for (let i = 0; i < rings; i++) {
        const phase = t * 0.6 + i * 0.7;
        const baseR = (i+1) * (Math.min(w,h) * 0.08) + 40;
        const wobble = 18 + i * 4;
        ctx.beginPath();
        const segs = 220;
        for (let s = 0; s <= segs; s++) {
          const a = (s/segs) * Math.PI * 2;
          const r = baseR
            + Math.sin(a*3 + phase) * wobble
            + Math.sin(a*5 - phase*1.3) * (wobble*0.5)
            + Math.cos(a*2 + phase*0.7) * (wobble*0.7);
          const x = cx + Math.cos(a) * r;
          const y = cy + Math.sin(a) * r;
          if (s===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
        }
        ctx.closePath();
        const alpha = 0.06 + (1 - i/rings) * 0.18;
        ctx.strokeStyle = `rgba(154, 215, 175, ${alpha})`;
        ctx.lineWidth = 1 + (rings - i) * 0.2;
        ctx.stroke();
        // inner accent ribbon
        if (i < 3) {
          ctx.fillStyle = `rgba(107,162,126, ${0.04 + (3-i)*0.015})`;
          ctx.fill();
        }
      }

      // nucleus glow
      const ng = ctx.createRadialGradient(cx, cy, 0, cx, cy, 180);
      ng.addColorStop(0, 'rgba(180, 230, 200, 0.55)');
      ng.addColorStop(0.5, 'rgba(107,162,126, 0.18)');
      ng.addColorStop(1, 'rgba(0,0,0,0)');
      ctx.fillStyle = ng;
      ctx.beginPath(); ctx.arc(cx, cy, 180, 0, Math.PI*2); ctx.fill();

      // floating particles
      parts.forEach(p => {
        p.x += p.vx; p.y += p.vy;
        p.life += 0.004;
        if (p.x < 0 || p.x > 1) p.vx *= -1;
        if (p.y < 0 || p.y > 1) p.vy *= -1;
        const px = p.x * w, py = p.y * h;
        const tw = (Math.sin(p.life*4) + 1) / 2;
        ctx.beginPath();
        ctx.arc(px, py, p.r, 0, Math.PI*2);
        ctx.fillStyle = `rgba(200, 240, 215, ${0.15 + tw*0.5})`;
        ctx.fill();
      });

      // grain
      const g = ctx.createLinearGradient(0,0,0,h);
      g.addColorStop(0, 'rgba(0,0,0,0)');
      g.addColorStop(1, 'rgba(0,0,0,0.45)');
      ctx.fillStyle = g; ctx.fillRect(0,0,w,h);

      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); c.removeEventListener('mousemove', onMove); };
  }, []);

  return (
    <section className="sec final-cta">
      <canvas ref={canvasRef} className="cta-canvas" />
      <div className="cta-glow-a" />
      <div className="cta-glow-b" />
      <div className="cta-grid" />
      <div className="container">
        <div className="cta-inner" data-reveal>
          <span className="eyebrow"><span className="num">09</span><span className="dot" /> Start your protocol</span>
          <h2 className="serif cta-title">
            Your gut already <em className="serif-it">knows.</em><br/>
            Now <em className="serif-it">you</em> will too.
          </h2>
          <p className="cta-sub">Six weeks. One protocol. The answer.</p>
          <a href="https://apps.apple.com/us/app/gutsy-ai-ibs-trigger-finder/id6758587496" target="_blank" rel="noopener noreferrer" className="btn cta-btn">
            <span>Begin Your Protocol</span>
            <span className="arr">→</span>
          </a>
          <div className="cap cta-meta">No credit card · Cancel anytime · iOS 17.0+</div>
        </div>
      </div>

      <style>{`
        .final-cta {
          background: #0a1410;
          color: #f0ebe1;
          padding: 200px 0;
          text-align: center;
          position: relative;
          overflow: hidden;
          isolation: isolate;
        }
        .final-cta .cta-canvas {
          position: absolute; inset: 0;
          width: 100%; height: 100%;
          z-index: 0;
        }
        .final-cta .cta-glow-a {
          position: absolute; top: -10%; left: -10%;
          width: 60%; height: 60%;
          background: radial-gradient(circle, rgba(107,162,126,0.35), transparent 60%);
          filter: blur(80px);
          z-index: 1;
          animation: ctaGlowA 14s ease-in-out infinite alternate;
        }
        .final-cta .cta-glow-b {
          position: absolute; bottom: -20%; right: -10%;
          width: 70%; height: 70%;
          background: radial-gradient(circle, rgba(180,200,150,0.22), transparent 60%);
          filter: blur(100px);
          z-index: 1;
          animation: ctaGlowB 18s ease-in-out infinite alternate;
        }
        .final-cta .cta-grid {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(180,220,195,0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(180,220,195,0.04) 1px, transparent 1px);
          background-size: 80px 80px;
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          z-index: 2;
          pointer-events: none;
        }
        @keyframes ctaGlowA {
          0% { transform: translate(0,0) scale(1); opacity: 0.7; }
          100% { transform: translate(8%, 6%) scale(1.15); opacity: 1; }
        }
        @keyframes ctaGlowB {
          0% { transform: translate(0,0) scale(1); opacity: 0.6; }
          100% { transform: translate(-6%, -4%) scale(1.2); opacity: 0.95; }
        }
        .cta-inner { position: relative; z-index: 3; }
        .cta-title {
          margin: 32px 0;
          font-size: clamp(56px, 9vw, 160px);
          line-height: 0.95;
          letter-spacing: -0.04em;
          font-weight: 300;
          color: #f4f0e6;
          text-shadow: 0 2px 40px rgba(0,0,0,0.5);
        }
        .cta-title em {
          color: #a8d9b9;
          background: linear-gradient(135deg, #c9e8d3 0%, #6ba27e 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .cta-sub { font-size: 22px; color: rgba(240,235,225,0.75); margin-bottom: 56px; }
        .cta-btn {
          background: #f4f0e6;
          color: #0a1410;
          border: 1px solid #f4f0e6;
          padding: 22px 36px;
          font-size: 15px;
          box-shadow: 0 20px 60px rgba(107,162,126,0.35), 0 0 0 1px rgba(255,255,255,0.05);
          backdrop-filter: blur(8px);
          position: relative;
          z-index: 1;
        }
        .cta-btn::after { background: #6ba27e; }
        .cta-btn:hover { color: #f4f0e6; }
        .final-cta .eyebrow { color: rgba(240,235,225,0.65); }
        .final-cta .eyebrow .num { color: #a8d9b9; background: transparent; }
        .final-cta .eyebrow .dot { background: #a8d9b9; box-shadow: 0 0 12px rgba(168,217,185,0.8); }
        .cta-meta { color: rgba(240,235,225,0.45); margin-top: 32px; letter-spacing: 0.18em; }
        [data-theme="dark"] .final-cta { background: #0a1410; }
        [data-theme="dark"] .final-cta .cta-title { color: #f4f0e6; }
      `}</style>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <div className="cap" style={{color:'var(--muted)', marginBottom: 24}}>GO WITH YOUR GUT</div>
            <div className="footer-logo">
              <img src="assets/gutsy-mark.png" alt="" className="footer-mark" />
              <img src="assets/gutsy-wordmark.svg" alt="Gutsy" className="footer-word" />
            </div>
            <p style={{maxWidth: 360, marginTop: 28, color: 'var(--ink-2)'}}>Not a food diary. A clinical intelligence. Built in California, with our own gut data first.</p>
          </div>
          <div className="footer-cols">
            <div>
              <div className="cap" style={{color:'var(--muted)', marginBottom: 20}}>Product</div>
              <a href="/#features" className="link">Features</a>
              <a href="/#protocol" className="link">Protocol</a>
              <a href="/#pricing" className="link">Pricing</a>
              <a href="/#faq" className="link">FAQ</a>
              <a href="/sample-report" className="link">Sample Report</a>
            </div>
            <div>
              <div className="cap" style={{color:'var(--muted)', marginBottom: 20}}>Company</div>
              <a href="/story" className="link">Our Story</a>
              <a href="/privacy" className="link">Privacy</a>
              <a href="/terms" className="link">Terms</a>
              <a href="/support" className="link">Support</a>
            </div>
            <div>
              <div className="cap" style={{color:'var(--muted)', marginBottom: 20}}>Contact</div>
              <a href="mailto:support@thegutsyapp.com" className="link">support@thegutsyapp.com</a>
            </div>
          </div>
        </div>
        <div className="footer-bot">
          <span className="cap" style={{color:'var(--muted)'}}>© 2026 Gutsy</span>
          <span className="cap" style={{color:'var(--muted)'}}>Not a medical device. Always consult your healthcare provider.</span>
        </div>
      </div>
      <style>{`
        .footer { background: var(--bg); border-top: 1px solid var(--line); padding: 80px 0 48px; }
        .footer-logo { display: inline-flex; align-items: center; gap: 14px; }
        .footer-mark { width: 52px; height: 52px; object-fit: contain; }
        .footer-word { height: 42px; width: auto; }
        [data-theme="dark"] .footer-mark, [data-theme="dark"] .footer-word { filter: invert(1) brightness(1.4) sepia(0.2) hue-rotate(70deg) saturate(0.6); }
        .footer-top { display: grid; grid-template-columns: 1.4fr 2fr; gap: 64px; padding-bottom: 64px; border-bottom: 1px solid var(--line); }
        .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
        .footer-cols a { display: block; padding: 6px 0; color: var(--ink-2); }
        .footer-bot { padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
        @media (max-width: 900px) {
          .footer-top { grid-template-columns: 1fr; gap: 40px; }
          .footer-cols { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </footer>
  );
}

window.Pricing = Pricing;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
