const { useState, useEffect, useRef, useMemo } = React;

    /* ── TWEAK DEFAULTS ── */
    const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
      "accent": "#FF6A1A",
      "showCustomCursor": true,
      "marqueeSpeed": 30
    }/*EDITMODE-END*/;

    /* ── LOGO ── */
    function Logo({ height = 28, light = true }) {
      return (
        <a href="#" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none' }}>
          <img src="assets/Linkllo-white.webp" alt="Linkllo" style={{ height, display: 'block' }} />
        </a>
      );
    }

    /* ── ICONS ── */
    function Icon({ name, size = 20, color = "currentColor", strokeWidth = 1.5 }) {
      const map = {
        arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
        arrowUR: <><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></>,
        plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
        check: <polyline points="20 6 9 17 4 12"/>,
        zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
        target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
        shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
        chart: <><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></>,
        sparkles: <><path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z"/><path d="M19 13l.75 2.25L22 16l-2.25.75L19 19l-.75-2.25L16 16l2.25-.75L19 13z"/></>,
        link: <><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></>,
        msg: <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>,
        ig: <><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></>,
        twitter: <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/>,
        yt: <><path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.97C18.88 4 12 4 12 4s-6.88 0-8.59.45A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.4a2.78 2.78 0 0 0 1.95-1.97A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z"/><polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02"/></>,
        cpu: <><rect x="9" y="9" width="6" height="6" rx="1"/><path d="M15 9V3m0 18v-6M9 9V3M9 21v-6M3 15h6M21 15h-6M3 9h6M21 9h-6"/></>,
        clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
        users: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></>,
        x: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
        menu: <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
      };
      return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">{map[name]}</svg>;
    }

    /* ── Custom cursor ── */
    function useCustomCursor(enabled) {
      useEffect(() => {
        if (!enabled) return;
        const dot = document.getElementById('cursorDot');
        const ring = document.getElementById('cursorRing');
        if (!dot || !ring) return;
        let mx = 0, my = 0, rx = 0, ry = 0;
        const move = (e) => { mx = e.clientX; my = e.clientY; dot.style.left = mx + 'px'; dot.style.top = my + 'px'; };
        const tick = () => {
          rx += (mx - rx) * 0.18;
          ry += (my - ry) * 0.18;
          ring.style.left = rx + 'px';
          ring.style.top = ry + 'px';
          requestAnimationFrame(tick);
        };
        const onEnter = () => ring.classList.add('hovering');
        const onLeave = () => ring.classList.remove('hovering');
        document.addEventListener('mousemove', move);
        document.querySelectorAll('a, button, [data-cursor-hover]').forEach(el => {
          el.addEventListener('mouseenter', onEnter);
          el.addEventListener('mouseleave', onLeave);
        });
        tick();
        return () => document.removeEventListener('mousemove', move);
      }, [enabled]);
    }

    /* ── Reveal hook ── */
    function useReveal() {
      useEffect(() => {
        // Fallback: reveal everything after a beat so nothing stays invisible if observer fails
        const fallback = setTimeout(() => {
          document.querySelectorAll('.reveal, .reveal-stagger, .word-reveal').forEach(el => el.classList.add('visible'));
        }, 200);

        if (!('IntersectionObserver' in window)) return;
        const obs = new IntersectionObserver((entries) => {
          entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
        }, { threshold: 0.05, rootMargin: '0px 0px -40px 0px' });
        document.querySelectorAll('.reveal, .reveal-stagger, .word-reveal').forEach(el => obs.observe(el));

        // Immediately reveal anything in initial viewport
        requestAnimationFrame(() => {
          document.querySelectorAll('.reveal, .reveal-stagger, .word-reveal').forEach(el => {
            const r = el.getBoundingClientRect();
            if (r.top < window.innerHeight) el.classList.add('visible');
          });
        });

        return () => { clearTimeout(fallback); obs.disconnect(); };
      }, []);
    }

    /* ── Mouse-follow card glow ── */
    function GlowCard({ children, style, className = '', ...rest }) {
      const ref = useRef(null);
      const onMove = (e) => {
        const r = ref.current?.getBoundingClientRect();
        if (!r) return;
        ref.current.style.setProperty('--mx', (e.clientX - r.left) + 'px');
        ref.current.style.setProperty('--my', (e.clientY - r.top) + 'px');
      };
      return <div ref={ref} className={`glow-card ${className}`} style={style} onMouseMove={onMove} {...rest}>{children}</div>;
    }

    /* ── Word reveal heading ── */
    function WordReveal({ text, delay = 0, as: Tag = 'span', color }) {
      const words = String(text || '').split(' ');
      return (
        <Tag>
          {words.map((w, i) => (
            <span key={i} className="word-reveal" style={{ marginRight: '0.25em' }}>
              <span style={{ transitionDelay: `${delay + i * 0.05}s`, color }}>{w}</span>
            </span>
          ))}
        </Tag>
      );
    }

    /* ── NAVBAR ── */
    function Nav() {
      const [scrolled, setScrolled] = useState(false);
      const [open, setOpen] = useState(false);
      useEffect(() => {
        const onScroll = () => setScrolled(window.scrollY > 30);
        window.addEventListener('scroll', onScroll);
        return () => window.removeEventListener('scroll', onScroll);
      }, []);
      const links = [['Features', '#features'], ['How it works', '#how'], ['Pricing', '#pricing'], ['FAQ', '#faq']];
      return (
        <>
        <nav style={{
          position: 'fixed', top: 16, left: 16, right: 16, zIndex: 80,
          height: 60,
          background: scrolled ? 'rgba(15,15,15,0.85)' : 'rgba(15,15,15,0.55)',
          backdropFilter: 'blur(20px) saturate(180%)',
          WebkitBackdropFilter: 'blur(20px) saturate(180%)',
          border: '1px solid var(--line)',
          borderRadius: 100,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '0 8px 0 24px',
          maxWidth: 1240, margin: '0 auto',
          transition: 'background 0.4s, border-color 0.4s',
        }}>
          <Logo height={22} />
          <div className="nav-links" style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
            {links.map(([l, h]) => (
              <a key={l} href={h} className="link-u" style={{ textDecoration: 'none', color: 'var(--muted)', fontSize: 14, fontWeight: 500, transition: 'color 0.3s', whiteSpace: 'nowrap' }}
                onMouseEnter={e => e.target.style.color = 'var(--fg)'}
                onMouseLeave={e => e.target.style.color = 'var(--muted)'}>{l}</a>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <a href="#" className="link-u nav-links" style={{ textDecoration: 'none', color: 'var(--muted)', fontSize: 14, fontWeight: 500, marginRight: 12 }}>Login</a>
            <button className="btn-orange" style={{ padding: '11px 22px', borderRadius: 100, fontSize: 14, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              Start free
              <Icon name="arrow" size={14} strokeWidth={2} />
            </button>
            <button onClick={() => setOpen(!open)} className="nav-mobile-btn" style={{ display: 'none', background: 'transparent', border: '1px solid var(--line)', borderRadius: 999, width: 40, height: 40, alignItems: 'center', justifyContent: 'center', color: 'white', cursor: 'pointer' }}>
              <Icon name={open ? 'x' : 'menu'} size={18} />
            </button>
          </div>
        </nav>
        <style>{`
          @media (max-width: 900px) {
            .nav-mobile-btn { display: inline-flex !important; }
          }
        `}</style>
        {open && (
          <div style={{ position: 'fixed', top: 92, left: 16, right: 16, zIndex: 79, background: 'rgba(15,15,15,0.97)', backdropFilter: 'blur(24px)', border: '1px solid var(--line)', borderRadius: 24, padding: 24 }}>
            {links.map(([l, h]) => (
              <a key={l} href={h} onClick={() => setOpen(false)} style={{ display: 'block', padding: '14px 0', textDecoration: 'none', color: 'var(--fg)', fontSize: 18, fontWeight: 500, borderBottom: '1px solid var(--line)' }}>{l}</a>
            ))}
          </div>
        )}
        </>
      );
    }

    /* ── HERO ── */
    function Hero() {
      const [parallax, setParallax] = useState(0);
      useEffect(() => {
        const onScroll = () => setParallax(window.scrollY);
        window.addEventListener('scroll', onScroll, { passive: true });
        return () => window.removeEventListener('scroll', onScroll);
      }, []);

      return (
        <section style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden', paddingTop: 140, paddingBottom: 80 }}>
          {/* Background grid */}
          <div className="grid-bg" style={{ position: 'absolute', inset: 0, opacity: 0.6, maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)', WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)' }}></div>

          {/* Orange ambient glow */}
          <div style={{ position: 'absolute', top: '20%', left: '50%', transform: `translate(-50%, ${parallax * 0.2}px)`, width: 800, height: 800, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,106,26,0.18) 0%, transparent 60%)', filter: 'blur(40px)', pointerEvents: 'none' }}></div>

          {/* Drifting blobs */}
          <div style={{ position: 'absolute', top: '15%', left: '10%', width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,106,26,0.1), transparent)', filter: 'blur(60px)', animation: 'drift 14s ease-in-out infinite' }}></div>
          <div style={{ position: 'absolute', bottom: '20%', right: '8%', width: 240, height: 240, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,106,26,0.08), transparent)', filter: 'blur(60px)', animation: 'drift 18s ease-in-out infinite reverse' }}></div>

          <div className="section-pad" style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '0 32px', zIndex: 1 }}>
            {/* Eyebrow */}
            <div className="reveal" style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: 'rgba(255,106,26,0.08)', border: '1px solid rgba(255,106,26,0.3)', borderRadius: 100, padding: '8px 16px', fontSize: 13, fontWeight: 500, color: 'var(--orange-2)', letterSpacing: '-0.01em' }}>
                <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--orange)', boxShadow: '0 0 12px var(--orange)', animation: 'pulseGlow 2s ease-in-out infinite' }}></span>
                v2.0 — AI-powered DM templates now live
              </div>
            </div>

            {/* Headline */}
            <h1 className="hero-title" style={{ textAlign: 'center', fontSize: 'clamp(64px, 8vw, 132px)', fontWeight: 600, letterSpacing: '-0.05em', lineHeight: 0.92, color: 'var(--fg)', marginBottom: 32 }}>
              <div style={{ overflow: 'hidden' }}>
                <WordReveal text="Comments to DMs," />
              </div>
              <div style={{ overflow: 'hidden', marginTop: 8 }}>
                <WordReveal text="on" delay={0.4} />{' '}
                <span className="serif" style={{ color: 'var(--orange)' }}>
                  <WordReveal text="autopilot." delay={0.5} />
                </span>
              </div>
            </h1>

            {/* Subhead */}
            <p className="reveal" style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto 48px', fontSize: 'clamp(16px, 1.6vw, 19px)', lineHeight: 1.55, color: 'var(--muted)', transitionDelay: '0.7s' }}>
              Linkllo detects keywords in your Instagram comments and instantly sends personalized DMs. Real-time, IG-compliant, zero manual work.
            </p>

            {/* CTA Row */}
            <div className="reveal hero-cta-row" style={{ display: 'flex', gap: 12, justifyContent: 'center', alignItems: 'center', marginBottom: 80, transitionDelay: '0.85s', flexWrap: 'wrap' }}>
              <button className="btn-orange" style={{ padding: '16px 28px', borderRadius: 100, fontSize: 15, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                Start free → No card required
                <Icon name="arrow" size={16} strokeWidth={2} />
              </button>
              <button className="btn-ghost" style={{ padding: '15px 24px', borderRadius: 100, fontSize: 15, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--orange)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="9" height="11" viewBox="0 0 12 14" fill="#0A0A0A"><polygon points="0,0 12,7 0,14"/></svg>
                </span>
                Watch demo
              </button>
            </div>

            {/* Hero visual: Phone + comment cascade */}
            <div className="hero-grid reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 380px 1fr', gap: 40, alignItems: 'center', transitionDelay: '1s' }}>
              {/* LEFT: comment cascade */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-end' }}>
                {[
                  { user: 'sarah_m', txt: 'LINK 🙏', match: true, time: '2s ago' },
                  { user: 'marcus.b', txt: 'price?', match: false, time: '8s ago' },
                  { user: 'priya_k', txt: 'send LINK pls', match: true, time: '14s ago' },
                ].map((c, i) => (
                  <div key={i} className="ig-row" style={{
                    background: c.match ? 'rgba(255,106,26,0.06)' : 'var(--bg-2)',
                    border: c.match ? '1px solid rgba(255,106,26,0.4)' : '1px solid var(--line)',
                    borderRadius: 16, padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12, width: '100%', maxWidth: 280,
                    boxShadow: c.match ? '0 0 20px rgba(255,106,26,0.12)' : 'none',
                  }}>
                    <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'linear-gradient(135deg, #FF6A1A, #FFB088)', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, color: '#0A0A0A' }}>{c.user[0].toUpperCase()}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg)' }}>@{c.user}</div>
                      <div style={{ fontSize: 13, color: c.match ? 'var(--orange-2)' : 'var(--muted)', fontWeight: c.match ? 600 : 400 }}>{c.txt}</div>
                    </div>
                    {c.match && <div style={{ fontSize: 10, color: 'var(--orange)', fontWeight: 600, letterSpacing: '0.05em' }}>MATCH</div>}
                  </div>
                ))}
                <div style={{ fontSize: 11, color: 'var(--dim)', display: 'flex', alignItems: 'center', gap: 6, marginTop: 8 }}>
                  <Icon name="msg" size={12} /> 12 keyword matches today
                </div>
              </div>

              {/* CENTER: Phone */}
              <div className="hero-phone" style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
                {/* Floating arrow showing flow */}
                <div className="phone-shell" style={{ width: 280 }}>
                  <div className="phone-screen-inner" style={{ aspectRatio: '9/19' }}>
                    {/* Status bar */}
                    <div style={{ height: 32, padding: '8px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, color: 'white', fontWeight: 600 }}>
                      <span>9:41</span>
                      <span style={{ display: 'inline-flex', gap: 4 }}>
                        <span>●●●</span>
                      </span>
                    </div>
                    {/* IG header */}
                    <div style={{ padding: '8px 16px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '0.5px solid rgba(255,255,255,0.08)' }}>
                      <Icon name="ig" size={18} color="white" />
                      <div style={{ fontSize: 13, fontWeight: 600, color: 'white' }}>Direct</div>
                    </div>
                    {/* Chat header */}
                    <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '0.5px solid rgba(255,255,255,0.08)' }}>
                      <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'linear-gradient(135deg, #FF6A1A, #FFB088)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, color: '#0A0A0A' }}>S</div>
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 600, color: 'white' }}>sarah_m</div>
                        <div style={{ fontSize: 10, color: '#10B981', display: 'flex', alignItems: 'center', gap: 4 }}>
                          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#10B981' }}></span>
                          Active now
                        </div>
                      </div>
                    </div>
                    {/* Messages */}
                    <div style={{ padding: '20px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                      <div style={{ alignSelf: 'flex-start', maxWidth: '80%', background: '#262626', color: 'white', padding: '10px 14px', borderRadius: '18px 18px 18px 4px', fontSize: 12, lineHeight: 1.4 }}>
                        Hi! Looking for the link 👀
                      </div>
                      <div style={{ alignSelf: 'flex-end', maxWidth: '85%', background: 'linear-gradient(135deg, #FF6A1A, #FF8A3D)', color: '#0A0A0A', padding: '10px 14px', borderRadius: '18px 18px 4px 18px', fontSize: 12, lineHeight: 1.5, fontWeight: 500 }}>
                        Hey @sarah_m! 🎉<br/>Here's the free guide you asked for:<br/><strong>linkllo.com/g/abc</strong>
                      </div>
                      <div style={{ alignSelf: 'flex-end', fontSize: 9, color: 'rgba(255,255,255,0.5)' }}>Sent · 2s</div>
                      <div style={{ alignSelf: 'flex-start', display: 'flex', alignItems: 'center', gap: 4, marginTop: 4 }}>
                        <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'rgba(255,255,255,0.3)', animation: 'pulseGlow 1s infinite' }}></div>
                        <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'rgba(255,255,255,0.3)', animation: 'pulseGlow 1s 0.2s infinite' }}></div>
                        <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'rgba(255,255,255,0.3)', animation: 'pulseGlow 1s 0.4s infinite' }}></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* RIGHT: stats card */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <GlowCard style={{ borderRadius: 20, padding: '20px 22px' }}>
                  <div style={{ fontSize: 11, color: 'var(--dim)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 10 }}>Today</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
                    <span className="counter" style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.04em', color: 'var(--fg)' }}>2,847</span>
                    <span style={{ fontSize: 12, color: '#10B981', fontWeight: 600 }}>↑ 24%</span>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>DMs sent automatically</div>
                </GlowCard>
                <GlowCard style={{ borderRadius: 20, padding: '20px 22px' }}>
                  <div style={{ fontSize: 11, color: 'var(--dim)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 10 }}>Avg. response</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
                    <span className="counter" style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.04em', color: 'var(--fg)' }}>1.2</span>
                    <span style={{ fontSize: 14, color: 'var(--muted)' }}>sec</span>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>From comment to DM</div>
                </GlowCard>
                <GlowCard style={{ borderRadius: 20, padding: '20px 22px' }}>
                  <div style={{ fontSize: 11, color: 'var(--dim)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 10 }}>Open rate</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                    <span className="counter" style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.04em', color: 'var(--orange)' }}>94%</span>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>Industry avg: 21%</div>
                </GlowCard>
              </div>
            </div>
          </div>
        </section>
      );
    }

    /* ── MARQUEE ── */
    function LogoMarquee({ speed }) {
      const items = ['Course Creators', '✦', 'D2C Brands', '✦', 'Coaches', '✦', 'Agencies', '✦', 'E-commerce', '✦', 'Influencers', '✦', 'Solopreneurs', '✦', 'Startups', '✦'];
      const repeated = [...items, ...items, ...items];
      return (
        <section style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', overflow: 'hidden', padding: '32px 0', background: 'var(--bg-2)' }}>
          <div className="marquee-track marquee-anim" style={{ animationDuration: `${speed}s` }}>
            {repeated.map((it, i) => (
              <span key={i} style={{ fontSize: 'clamp(20px, 3vw, 32px)', fontWeight: 500, letterSpacing: '-0.02em', color: it === '✦' ? 'var(--orange)' : 'var(--muted)' }}>{it}</span>
            ))}
          </div>
        </section>
      );
    }

    /* ── PROBLEM/SOLUTION SECTION ── */
    function ProblemSolution() {
      return (
        <section className="section-pad-l" style={{ padding: '96px 32px', position: 'relative' }}>
          <div style={{ maxWidth: 1280, margin: '0 auto' }}>
            <div className="reveal" style={{ marginBottom: 56, maxWidth: 760 }}>
              <div style={{ fontSize: 13, color: 'var(--orange)', fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 20 }}>— The problem</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(40px, 5.5vw, 84px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--fg)' }}>
                You're losing leads<br/>in the <span className="serif" style={{ color: 'var(--orange)' }}>comment section.</span>
              </h2>
            </div>

            <div className="feat-grid reveal-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
              {[
                { num: '01', title: 'Hundreds of comments', desc: "You can't reply to every one manually. Most go cold before you ever see them.", stat: '~78%', label: 'never replied to' },
                { num: '02', title: '2-second attention span', desc: "By the time you DM back, they've scrolled past 40 other posts. Lead lost.", stat: '< 2 min', label: 'engagement window' },
                { num: '03', title: 'Burnout from manual work', desc: "Replying to comments shouldn't be your full-time job. Your time is better spent creating.", stat: '4.5 hrs', label: 'wasted daily' },
              ].map((c, i) => (
                <GlowCard key={i} style={{ borderRadius: 24, padding: '32px 28px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 32 }}>
                    <div style={{ fontSize: 12, color: 'var(--dim)', letterSpacing: '0.15em', fontWeight: 600 }}>{c.num} / 03</div>
                    <Icon name="arrowUR" size={18} color="var(--dim)" />
                  </div>
                  <div style={{ marginBottom: 24 }}>
                    <div style={{ fontSize: 'clamp(36px, 4vw, 56px)', fontWeight: 500, letterSpacing: '-0.03em', color: 'var(--orange)', lineHeight: 1, marginBottom: 4 }}>{c.stat}</div>
                    <div style={{ fontSize: 13, color: 'var(--dim)' }}>{c.label}</div>
                  </div>
                  <h3 style={{ fontSize: 18, fontWeight: 500, color: 'var(--fg)', marginBottom: 8, letterSpacing: '-0.01em' }}>{c.title}</h3>
                  <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.6 }}>{c.desc}</p>
                </GlowCard>
              ))}
            </div>
          </div>
        </section>
      );
    }

    /* ── HOW IT WORKS — Sticky scroll reveal ── */
    function HowItWorks() {
      return (
        <section id="how" className="section-pad-l" style={{ padding: '96px 32px', background: 'var(--bg-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
          <div style={{ maxWidth: 1280, margin: '0 auto' }}>
            <div className="reveal" style={{ marginBottom: 64, maxWidth: 760 }}>
              <div style={{ fontSize: 13, color: 'var(--orange)', fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 20 }}>— How it works</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(40px, 5.5vw, 84px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--fg)' }}>
                Set up once. <span className="serif" style={{ color: 'var(--orange)' }}>Run forever.</span>
              </h2>
            </div>

            {[
              { num: '01', title: 'Connect Instagram', desc: 'One-click Meta login. No passwords, no browser extensions. Works with Business and Creator accounts.', icon: 'ig', highlights: ['One-click Meta login', 'No passwords', 'Business & Creator'] },
              { num: '02', title: 'Pick a keyword, write a DM', desc: 'Choose a trigger word like "LINK." Write the message your followers get. Add your link, freebie, or discount code.', icon: 'sparkles', highlights: ['Trigger keywords', 'Custom message', 'Links & freebies'] },
              { num: '03', title: 'Every comment becomes a DM', desc: 'Someone comments your keyword? Linkllo sends your DM in seconds. Works on Reels, Stories, and feed posts. Runs 24/7.', icon: 'zap', highlights: ['Reels + Stories + Posts', 'Sends in seconds', 'Runs 24/7'] },
            ].map((step, i) => (
              <div key={i} className="reveal step-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center', padding: '60px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }}>
                {/* Left side */}
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
                    <div style={{ width: 56, height: 56, borderRadius: 16, background: 'rgba(255,106,26,0.1)', border: '1px solid rgba(255,106,26,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name={step.icon} size={24} color="var(--orange)" strokeWidth={1.6} />
                    </div>
                    <div style={{ fontSize: 'clamp(48px, 6vw, 88px)', fontWeight: 500, letterSpacing: '-0.04em', color: 'var(--bg-3)', lineHeight: 1 }} className="serif">{step.num}</div>
                  </div>
                  <h3 style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--fg)', marginBottom: 16, lineHeight: 1.1 }}>{step.title}</h3>
                  <p style={{ fontSize: 16, color: 'var(--muted)', lineHeight: 1.65, marginBottom: 24 }}>{step.desc}</p>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {step.highlights.map(h => (
                      <span key={h} style={{ fontSize: 12, color: 'var(--fg)', background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line)', borderRadius: 100, padding: '6px 12px', fontWeight: 500 }}>{h}</span>
                    ))}
                  </div>
                </div>
                {/* Right side: visual mock */}
                <div>
                  <StepVisual step={i} />
                </div>
              </div>
            ))}
          </div>
        </section>
      );
    }

    function StepVisual({ step }) {
      if (step === 0) {
        return (
          <GlowCard style={{ borderRadius: 24, padding: 32, minHeight: 360, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ fontSize: 11, color: 'var(--dim)', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 20 }}>Authorize via Instagram</div>
            <div style={{ background: 'var(--bg-3)', borderRadius: 16, padding: 24, border: '1px solid var(--line)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
                <Icon name="ig" size={32} color="var(--fg)" />
                <div style={{ fontSize: 14, color: 'var(--fg)', fontWeight: 600 }}>Continue with Instagram</div>
              </div>
              <div style={{ borderTop: '1px solid var(--line)', paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {['Read your posts & comments', 'Send DMs on your behalf', 'Read insights & analytics'].map((p, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--muted)' }}>
                    <Icon name="check" size={14} color="var(--orange)" strokeWidth={2.5} /> {p}
                  </div>
                ))}
              </div>
              <button className="btn-orange" style={{ width: '100%', marginTop: 20, padding: '12px', borderRadius: 12, fontSize: 14 }}>Authorize Linkllo</button>
            </div>
          </GlowCard>
        );
      }
      if (step === 1) {
        return (
          <GlowCard style={{ borderRadius: 24, padding: 32, minHeight: 360 }}>
            <div style={{ fontSize: 11, color: 'var(--dim)', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 20 }}>Automation builder</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ background: 'var(--bg-3)', borderRadius: 12, padding: '12px 16px', border: '1px solid var(--line)' }}>
                <div style={{ fontSize: 11, color: 'var(--dim)', marginBottom: 6 }}>POST</div>
                <div style={{ fontSize: 13, color: 'var(--fg)' }}>📸 Free Marketing Guide</div>
              </div>
              <div style={{ background: 'var(--bg-3)', borderRadius: 12, padding: '12px 16px', border: '1px solid var(--line)' }}>
                <div style={{ fontSize: 11, color: 'var(--dim)', marginBottom: 8 }}>TRIGGER KEYWORDS</div>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {['LINK', 'GUIDE', 'send'].map(k => (
                    <span key={k} style={{ fontSize: 12, background: 'rgba(255,106,26,0.15)', color: 'var(--orange)', padding: '4px 10px', borderRadius: 100, fontFamily: 'monospace', fontWeight: 600 }}>{k}</span>
                  ))}
                </div>
              </div>
              <div style={{ background: 'var(--bg-3)', borderRadius: 12, padding: '12px 16px', border: '1px solid var(--line)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                  <div style={{ fontSize: 11, color: 'var(--dim)' }}>DM TEMPLATE</div>
                  <span style={{ fontSize: 10, color: 'var(--orange)', display: 'flex', alignItems: 'center', gap: 4 }}><Icon name="sparkles" size={10} /> AI-generated</span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--fg)', lineHeight: 1.6 }}>Hey <span style={{ color: 'var(--orange)' }}>{`{username}`}</span>! 🎁 Here's the free guide you asked for: <span style={{ color: 'var(--orange-2)' }}>linkllo.com/g/abc</span></div>
              </div>
            </div>
          </GlowCard>
        );
      }
      // step 2
      return (
        <GlowCard style={{ borderRadius: 24, padding: 32, minHeight: 360 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
            <div style={{ fontSize: 11, color: 'var(--dim)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>Live activity</div>
            <div style={{ fontSize: 11, color: '#10B981', display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#10B981', animation: 'pulseGlow 1.5s infinite' }}></span>
              Active
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { user: 'sarah_m', txt: 'LINK 🙏', sent: '2s', state: 'delivered' },
              { user: 'priya_k', txt: 'send LINK pls', sent: '14s', state: 'delivered' },
              { user: 'jake.d', txt: 'GUIDE!', sent: '32s', state: 'delivered' },
              { user: 'mira_b', txt: 'LINK', sent: '1m', state: 'delivered' },
              { user: 'alex.k', txt: 'send', sent: '2m', state: 'delivered' },
            ].map((r, i) => (
              <div key={i} className="ig-row" style={{ display: 'grid', gridTemplateColumns: '24px 1fr auto auto', gap: 10, alignItems: 'center', padding: '8px 12px', borderRadius: 8 }}>
                <div style={{ width: 22, height: 22, borderRadius: '50%', background: 'linear-gradient(135deg, #FF6A1A, #FFB088)', fontSize: 9, color: '#0A0A0A', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{r.user[0].toUpperCase()}</div>
                <div style={{ fontSize: 12 }}>
                  <span style={{ color: 'var(--fg)' }}>@{r.user}</span> <span style={{ color: 'var(--dim)' }}>· "{r.txt}"</span>
                </div>
                <div style={{ fontSize: 10, color: '#10B981', display: 'flex', alignItems: 'center', gap: 4 }}>
                  <Icon name="check" size={11} strokeWidth={3} /> sent
                </div>
                <div style={{ fontSize: 10, color: 'var(--dim)' }}>{r.sent}</div>
              </div>
            ))}
          </div>
        </GlowCard>
      );
    }

    /* ── FEATURES (bento grid) ── */
    function Features() {
      return (
        <section id="features" className="section-pad-l" style={{ padding: '96px 32px' }}>
          <div style={{ maxWidth: 1280, margin: '0 auto' }}>
            <div className="reveal" style={{ marginBottom: 56, maxWidth: 760 }}>
              <div style={{ fontSize: 13, color: 'var(--orange)', fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 20 }}>— Features</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(40px, 5.5vw, 84px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--fg)' }}>
                Built like an <span className="serif" style={{ color: 'var(--orange)' }}>obsession.</span>
              </h2>
            </div>

            {/* Bento */}
            <div className="bento-grid reveal-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gridAutoRows: 'minmax(220px, auto)', gap: 16 }}>
              {/* Big tile: AI templates */}
              <GlowCard style={{ borderRadius: 24, padding: 36, gridColumn: 'span 4', gridRow: 'span 1', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 320 }}>
                <div>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 100, background: 'rgba(255,106,26,0.1)', border: '1px solid rgba(255,106,26,0.3)', fontSize: 11, color: 'var(--orange)', fontWeight: 600, marginBottom: 24 }}>
                    <Icon name="sparkles" size={12} /> AI-POWERED
                  </div>
                  <h3 style={{ fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--fg)', marginBottom: 12, lineHeight: 1.1 }}>AI writes DMs that <span className="serif" style={{ color: 'var(--orange)' }}>actually convert</span></h3>
                  <p style={{ fontSize: 15, color: 'var(--muted)', maxWidth: 480, lineHeight: 1.55 }}>Describe your goal. Our AI generates 5 high-converting DM variants in seconds. Edit, A/B test, ship.</p>
                </div>
                <div style={{ marginTop: 28, background: 'var(--bg-3)', borderRadius: 14, padding: '14px 16px', border: '1px solid var(--line)', fontSize: 13, color: 'var(--muted)', fontFamily: 'monospace' }}>
                  <span style={{ color: 'var(--dim)' }}>$ </span>
                  <span style={{ color: 'var(--fg)' }}>generate "course launch DM, friendly tone"</span>
                  <span className="blink-cursor"></span>
                </div>
              </GlowCard>

              {/* Compliance */}
              <GlowCard style={{ borderRadius: 24, padding: 28, gridColumn: 'span 2', gridRow: 'span 1', minHeight: 320, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <Icon name="shield" size={32} color="var(--orange)" />
                <div>
                  <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--fg)', marginBottom: 8 }}>IG-safe by design</h3>
                  <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.55 }}>Official Graph API. Built-in rate limiting. Zero account bans, ever.</p>
                </div>
              </GlowCard>

              {/* Analytics */}
              <GlowCard style={{ borderRadius: 24, padding: 28, gridColumn: 'span 2', gridRow: 'span 1', minHeight: 280, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <Icon name="chart" size={28} color="var(--orange)" />
                <div>
                  <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--fg)', marginBottom: 8 }}>Real-time analytics</h3>
                  <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.55 }}>Delivery, opens, clicks, conversions. Know what's working.</p>
                </div>
              </GlowCard>

              {/* Smart matching */}
              <GlowCard style={{ borderRadius: 24, padding: 28, gridColumn: 'span 2', gridRow: 'span 1', minHeight: 280, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <Icon name="target" size={28} color="var(--orange)" />
                <div>
                  <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--fg)', marginBottom: 8 }}>Smart keyword matching</h3>
                  <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.55 }}>EXACT, CONTAINS, regex. Emoji-tolerant. Catches every variation.</p>
                </div>
              </GlowCard>

              {/* Multi-account */}
              <GlowCard style={{ borderRadius: 24, padding: 28, gridColumn: 'span 2', gridRow: 'span 1', minHeight: 280, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <Icon name="users" size={28} color="var(--orange)" />
                <div>
                  <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--fg)', marginBottom: 8 }}>Multi-account dashboard</h3>
                  <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.55 }}>Manage all your IG accounts from one place. Switch in one click.</p>
                </div>
              </GlowCard>
            </div>
          </div>
        </section>
      );
    }

    /* ── USE CASES ── */
    function UseCases() {
      const cases = [
        { tag: 'Course creators', kw: 'COURSE', desc: 'Auto-deliver checkout links the moment someone asks. Course sales tripled in 30 days.', metric: '3.2×', metricLabel: 'sales lift' },
        { tag: 'D2C brands', kw: 'PRICE', desc: 'Reply to product questions 24/7. Drop your catalog + buy link in their DMs instantly.', metric: '47%', metricLabel: 'reply rate' },
        { tag: 'Coaches', kw: 'BOOK', desc: 'Capture every interested lead from comments. DM them your calendar link automatically.', metric: '12×', metricLabel: 'leads/month' },
      ];
      return (
        <section className="section-pad-l" style={{ padding: '96px 32px', background: 'var(--bg-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
          <div style={{ maxWidth: 1280, margin: '0 auto' }}>
            <div className="reveal" style={{ marginBottom: 56, maxWidth: 760 }}>
              <div style={{ fontSize: 13, color: 'var(--orange)', fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 20 }}>— Use cases</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(40px, 5.5vw, 84px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--fg)' }}>
                Whatever you sell.<br/><span className="serif" style={{ color: 'var(--orange)' }}>Linkllo delivers.</span>
              </h2>
            </div>
            <div className="case-grid reveal-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
              {cases.map((c, i) => (
                <GlowCard key={i} style={{ borderRadius: 24, padding: 32, minHeight: 320, display: 'flex', flexDirection: 'column' }}>
                  <div style={{ marginBottom: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                    <div style={{ fontSize: 12, color: 'var(--dim)', letterSpacing: '0.1em', fontWeight: 600 }}>{c.tag.toUpperCase()}</div>
                    <Icon name="arrowUR" size={18} color="var(--dim)" />
                  </div>
                  <div style={{ marginBottom: 28 }}>
                    <div style={{ fontSize: 'clamp(56px, 7vw, 88px)', fontWeight: 500, letterSpacing: '-0.04em', color: 'var(--fg)', lineHeight: 0.9 }}>{c.metric}</div>
                    <div style={{ fontSize: 13, color: 'var(--orange)', fontWeight: 500, marginTop: 6 }}>{c.metricLabel}</div>
                  </div>
                  <div style={{ marginBottom: 16 }}>
                    <span style={{ fontSize: 11, fontFamily: 'monospace', color: 'var(--orange)', background: 'rgba(255,106,26,0.1)', border: '1px solid rgba(255,106,26,0.25)', padding: '4px 10px', borderRadius: 100, fontWeight: 600 }}>keyword: "{c.kw}"</span>
                  </div>
                  <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.6, marginTop: 'auto' }}>{c.desc}</p>
                </GlowCard>
              ))}
            </div>
          </div>
        </section>
      );
    }

    /* ── SAFE & COMPLIANT (Meta Tech Provider) ── */
    function MetaCompliant() {
      const points = [
        'Tech & Business Approved Meta Provider (since Jan 2026)',
        'Works with Business and Creator accounts',
        'No password sharing — connect securely through Meta',
        'GDPR and CAN-SPAM compliant',
        '200 DMs/hour limit (Instagram\'s rule, not ours)',
        'Cancel anytime — no contracts',
      ];
      return (
        <section className="section-pad-l" style={{ padding: '96px 32px' }}>
          <div className="reveal" style={{ maxWidth: 1280, margin: '0 auto' }}>
            <div className="meta-grid" style={{
              position: 'relative',
              borderRadius: 32,
              padding: 'clamp(40px, 5vw, 72px)',
              background: 'linear-gradient(135deg, #0d0d0d 0%, #131313 50%, #0a0a0a 100%)',
              border: '1px solid var(--line-2)',
              overflow: 'hidden',
              display: 'grid',
              gridTemplateColumns: '1.5fr 1fr',
              gap: 'clamp(32px, 5vw, 80px)',
              alignItems: 'center',
            }}>
              {/* ambient orange glow top-right */}
              <div style={{ position: 'absolute', top: '-30%', right: '-10%', width: 500, height: 500, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,106,26,0.18), transparent 60%)', filter: 'blur(40px)', pointerEvents: 'none' }}></div>

              {/* LEFT: copy + checks */}
              <div style={{ position: 'relative' }}>
                <div style={{ fontSize: 13, color: 'var(--orange)', fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 24 }}>Safe &amp; Compliant</div>
                <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 64px)', fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1.05, color: 'var(--fg)', marginBottom: 24 }}>
                  Built on Meta's<br/>official API. <span className="serif" style={{ color: 'var(--orange)' }}>No bots. No bans.</span>
                </h2>
                <p style={{ fontSize: 16, color: 'var(--muted)', lineHeight: 1.65, maxWidth: 560, marginBottom: 36 }}>
                  Linkllo is a Tech &amp; Business Approved Meta Provider. We use Instagram's official Graph API — the same technology Meta provides to verified partners. No browser extensions. No shady workarounds.
                </p>

                <ul style={{ display: 'flex', flexDirection: 'column', gap: 14, listStyle: 'none', padding: 0, margin: 0 }}>
                  {points.map((p, i) => (
                    <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 14.5, color: 'var(--fg)' }}>
                      <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'rgba(255,106,26,0.12)', border: '1px solid rgba(255,106,26,0.35)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <Icon name="check" size={12} color="var(--orange)" strokeWidth={2.8} />
                      </span>
                      {p}
                    </li>
                  ))}
                </ul>
              </div>

              {/* RIGHT: Meta Tech Provider badge card */}
              <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
                <div className="meta-badge" style={{
                  width: '100%',
                  maxWidth: 380,
                  background: 'linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%)',
                  border: '1px solid var(--line-2)',
                  borderRadius: 24,
                  padding: '48px 32px 32px',
                  textAlign: 'center',
                  boxShadow: '0 40px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 60px rgba(255,106,26,0.08)',
                  position: 'relative',
                }}>
                  {/* corner accent */}
                  <div style={{ position: 'absolute', top: 16, right: 16, fontSize: 10, color: 'var(--dim)', letterSpacing: '0.15em', fontWeight: 600 }}>VERIFIED</div>

                  <img src="assets/linkllo-tech-provider.svg" alt="Meta Tech Provider" style={{ width: '100%', maxWidth: 280, height: 'auto', display: 'block', margin: '0 auto 24px' }} />

                  <div style={{ width: '100%', height: 1, background: 'var(--line)', marginBottom: 20 }}></div>

                  <div style={{ fontSize: 13, color: 'var(--muted)', letterSpacing: '0.02em' }}>
                    Tech &amp; Business Approved Meta Provider
                  </div>
                </div>
              </div>
            </div>
          </div>
          <style>{`
            @media (max-width: 900px) {
              .meta-grid { grid-template-columns: 1fr !important; }
            }
          `}</style>
        </section>
      );
    }

    /* ── COMMENTS → CUSTOMERS (chat previews) ── */
    function CommentsToCustomers() {
      const cards = [
        {
          title: 'Drop product links instantly',
          desc: "Reels go viral, comments pile up. Linkllo DMs the buy link the moment someone types your keyword — no missed sales while you sleep.",
          audience: 'For affiliate creators · UGC · D2C drops',
          cta: 'See affiliate flows',
          accent: '#FF6A1A',
          chat: {
            handle: '@nia_styles',
            commentTrigger: 'LINK where did you get this jacket?',
            reply: "Hey Nia! ✨ You'll love it — same one, in stock now:",
            attach: { label: 'Shop the look', sub: 'linkllo.com/r/jacket-23' },
          },
        },
        {
          title: 'Grow your email list from comments',
          desc: 'Promise a freebie, capture the email inside the DM, then deliver. Every Reel becomes a lead-magnet — without sending people to a landing page.',
          audience: 'For coaches · creators · educators',
          cta: 'See lead-gen flows',
          accent: '#FF6A1A',
          chat: {
            handle: '@arjun.coaches',
            commentTrigger: 'GUIDE pls 🙏',
            reply: "Sending now! Drop your email and I'll deliver the 10-page guide instantly.",
            attach: { label: 'Free guide · 10 pages', sub: 'Just type your email below ↓' },
          },
        },
        {
          title: 'Book calls while you sleep',
          desc: "Story replies, post comments, even keyword DMs — Linkllo answers with your booking link, discount code, or offer. Wake up to a full calendar.",
          audience: 'For service businesses · agencies · solos',
          cta: 'See booking flows',
          accent: '#FF6A1A',
          chat: {
            handle: '@studio_meha',
            commentTrigger: 'BOOK want a slot for next week',
            reply: "Yay! Here's my live calendar — pick any open slot and you're in 🎉",
            attach: { label: 'Book a 30-min call', sub: 'cal.linkllo.com/meha' },
          },
        },
      ];

      return (
        <section className="section-pad-l" style={{ padding: '96px 32px', position: 'relative', overflow: 'hidden' }}>
          {/* ambient glow */}
          <div style={{ position: 'absolute', top: '10%', right: '-10%', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,106,26,0.10), transparent 60%)', filter: 'blur(40px)', pointerEvents: 'none' }}></div>

          <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
            {/* Header row */}
            <div className="reveal c2c-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, marginBottom: 48, flexWrap: 'wrap' }}>
              <div style={{ maxWidth: 760 }}>
                <div style={{ fontSize: 13, color: 'var(--orange)', fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 20 }}>— Comments → customers</div>
                <h2 className="h-section" style={{ fontSize: 'clamp(40px, 5.5vw, 84px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--fg)', marginBottom: 20 }}>
                  Turn every comment<br/>into a <span className="serif" style={{ color: 'var(--orange)' }}>conversation.</span>
                </h2>
                <p style={{ fontSize: 16, color: 'var(--muted)', maxWidth: 540, lineHeight: 1.6 }}>Real Linkllo flows, written by real creators. Steal one, tweak it, ship it tonight.</p>
              </div>
              <button className="btn-orange" style={{ padding: '14px 24px', borderRadius: 100, fontSize: 14, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                Start for free
                <Icon name="arrow" size={14} strokeWidth={2} />
              </button>
            </div>

            {/* Cards grid */}
            <div className="c2c-grid reveal-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
              {cards.map((c, i) => (
                <GlowCard key={i} style={{ borderRadius: 28, padding: 28, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
                  {/* Top: copy */}
                  <div style={{ marginBottom: 24 }}>
                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px', borderRadius: 100, background: 'rgba(255,106,26,0.1)', border: '1px solid rgba(255,106,26,0.3)', fontSize: 11, color: 'var(--orange)', fontWeight: 600, letterSpacing: '0.05em', marginBottom: 18 }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--orange)' }}></span>
                      0{i + 1} · Use case
                    </div>
                    <h3 style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--fg)', marginBottom: 12, lineHeight: 1.15 }}>{c.title}</h3>
                    <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.6 }}>{c.desc}</p>
                  </div>

                  {/* Audience tag */}
                  <div style={{ fontSize: 11, color: 'var(--orange-2)', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>{c.audience}</div>

                  {/* CTA */}
                  <a href="#" className="link-u" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 500, color: 'var(--fg)', textDecoration: 'none', marginBottom: 24, alignSelf: 'flex-start', padding: '8px 14px', borderRadius: 100, background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line)' }}>
                    {c.cta} <Icon name="arrow" size={12} strokeWidth={2} />
                  </a>

                  {/* Chat mockup */}
                  <div style={{
                    marginTop: 'auto',
                    background: 'linear-gradient(180deg, #1f1f22 0%, #141415 100%)',
                    border: '1px solid var(--line-2)',
                    borderRadius: 18,
                    padding: 16,
                    boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04), 0 30px 60px rgba(0,0,0,0.4)',
                  }}>
                    {/* fake browser/IG dots */}
                    <div style={{ display: 'flex', gap: 5, marginBottom: 14 }}>
                      {['#FF5F57', '#FEBC2E', '#28C840'].map(col => (
                        <span key={col} style={{ width: 9, height: 9, borderRadius: '50%', background: col, opacity: 0.7 }}></span>
                      ))}
                      <span style={{ marginLeft: 10, fontSize: 10, color: 'var(--dim)', letterSpacing: '0.08em' }}>{c.chat.handle}</span>
                    </div>

                    {/* incoming bubble (commenter) */}
                    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, marginBottom: 10 }}>
                      <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'linear-gradient(135deg, #555, #2a2a2a)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: '#fff', fontWeight: 700, flexShrink: 0 }}>{c.chat.handle[1]?.toUpperCase()}</div>
                      <div style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid var(--line)', color: 'var(--fg)', padding: '9px 12px', borderRadius: '14px 14px 14px 4px', fontSize: 12, lineHeight: 1.4, maxWidth: '85%' }}>
                        <span style={{ background: 'rgba(255,106,26,0.18)', color: 'var(--orange-2)', padding: '1px 6px', borderRadius: 6, fontWeight: 600, fontFamily: 'monospace', fontSize: 11 }}>{c.chat.commentTrigger.split(' ')[0]}</span>
                        {' '}{c.chat.commentTrigger.split(' ').slice(1).join(' ')}
                      </div>
                    </div>

                    {/* outgoing bubble (Linkllo) */}
                    <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 8 }}>
                      <div style={{ background: 'linear-gradient(135deg, #FF6A1A, #FF8A3D)', color: '#0A0A0A', padding: '10px 13px', borderRadius: '14px 14px 4px 14px', fontSize: 12, lineHeight: 1.45, maxWidth: '88%', fontWeight: 500, boxShadow: '0 8px 24px rgba(255,106,26,0.25)' }}>
                        {c.chat.reply}
                      </div>
                    </div>

                    {/* attached card */}
                    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                      <div style={{ background: 'rgba(255,106,26,0.08)', border: '1px solid rgba(255,106,26,0.3)', borderRadius: 12, padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10, maxWidth: '88%' }}>
                        <div style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(255,106,26,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                          <Icon name="link" size={14} color="var(--orange)" strokeWidth={2} />
                        </div>
                        <div style={{ minWidth: 0 }}>
                          <div style={{ fontSize: 11, color: 'var(--fg)', fontWeight: 600, marginBottom: 2 }}>{c.attach?.label || c.chat.attach.label}</div>
                          <div style={{ fontSize: 10, color: 'var(--orange-2)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.chat.attach.sub}</div>
                        </div>
                      </div>
                    </div>

                    {/* sent indicator */}
                    <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 4, marginTop: 8, fontSize: 9, color: 'var(--dim)' }}>
                      <Icon name="check" size={10} strokeWidth={3} color="#10B981" />
                      delivered · 1.2s
                    </div>
                  </div>
                </GlowCard>
              ))}
            </div>
          </div>
          <style>{`
            @media (max-width: 900px) {
              .c2c-grid { grid-template-columns: 1fr !important; }
              .c2c-head { flex-direction: column; align-items: flex-start !important; }
            }
          `}</style>
        </section>
      );
    }

    /* ── BIG STAT BANNER ── */
    function StatBanner() {
      return (
        <section style={{ padding: '80px 32px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 50%, rgba(255,106,26,0.08), transparent 60%)' }}></div>
          <div className="reveal" style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
            <p className="stat-banner-copy" style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.1, color: 'var(--fg)' }}>
              <span style={{ color: 'var(--dim)' }}>Creators using Linkllo see </span>
              <span style={{ color: 'var(--orange)' }}>10× more</span>
              <span style={{ color: 'var(--dim)' }}> DM conversations and </span>
              <span className="serif" style={{ color: 'var(--orange)' }}>3.2× more revenue</span>
              <span style={{ color: 'var(--dim)' }}> from Instagram in 30 days.</span>
            </p>
            <div className="stats-row" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, marginTop: 80, paddingTop: 60, borderTop: '1px solid var(--line)' }}>
              {[
                { v: '500+', l: 'Active creators' },
                { v: '4.2M', l: 'DMs delivered' },
                { v: '94%', l: 'Open rate' },
                { v: '24/7', l: 'Always running' },
              ].map((s, i) => (
                <div key={i} style={{ textAlign: 'left' }}>
                  <div style={{ fontSize: 'clamp(36px, 4vw, 56px)', fontWeight: 500, letterSpacing: '-0.04em', color: 'var(--fg)', lineHeight: 1, marginBottom: 8 }}>{s.v}</div>
                  <div style={{ fontSize: 13, color: 'var(--dim)' }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      );
    }

    /* ── PRICING ── */
    function Pricing() {
      const [annual, setAnnual] = useState(true);
      const plans = [
        {
          name: 'Free', price: '₹0', sub: 'Forever',
          cta: 'Start free', featured: false,
          features: ['1,000 DMs / month', 'Unlimited automations', '1,000 contacts', 'Email support'],
          locked: ['Re-trigger', 'AI templates', 'Lead-gen forms'],
        },
        {
          name: 'Pro', price: annual ? '₹399' : '₹799', sub: annual ? 'per month, billed annually' : 'per month',
          cta: 'Start 7-day trial', featured: true, badge: 'MOST POPULAR',
          features: ['Unlimited DMs', 'Unlimited contacts', 'Re-trigger sequences', 'AI DM templates', 'Lead-gen forms', 'Ask-for-follow gate', 'Priority support'],
        },
        {
          name: 'Enterprise', price: 'Custom', sub: "Let's talk",
          cta: 'Contact sales', featured: false,
          features: ['Multi-account agency dashboard', 'Dedicated account manager', 'Custom integrations', 'Early access to features', 'White-label option', 'SLA + 24/7 support'],
        },
      ];
      return (
        <section id="pricing" className="section-pad-l" style={{ padding: '96px 32px' }}>
          <div style={{ maxWidth: 1280, margin: '0 auto' }}>
            <div className="reveal" style={{ marginBottom: 56, textAlign: 'center', maxWidth: 760, margin: '0 auto 56px' }}>
              <div style={{ fontSize: 13, color: 'var(--orange)', fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 20 }}>— Pricing</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(40px, 5.5vw, 84px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--fg)', marginBottom: 24 }}>
                Pricing that <span className="serif" style={{ color: 'var(--orange)' }}>respects you.</span>
              </h2>
              <div className="pricing-toggle" style={{ display: 'inline-flex', background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 100, padding: 4 }}>
                <button onClick={() => setAnnual(false)} style={{ background: !annual ? 'var(--orange)' : 'transparent', color: !annual ? '#0A0A0A' : 'var(--muted)', border: 'none', padding: '10px 22px', borderRadius: 100, fontSize: 14, fontWeight: 600, cursor: 'pointer', transition: 'all 0.3s' }}>Monthly</button>
                <button onClick={() => setAnnual(true)} style={{ background: annual ? 'var(--orange)' : 'transparent', color: annual ? '#0A0A0A' : 'var(--muted)', border: 'none', padding: '10px 22px', borderRadius: 100, fontSize: 14, fontWeight: 600, cursor: 'pointer', transition: 'all 0.3s', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  Annual <span style={{ background: '#0A0A0A', color: 'var(--orange)', padding: '2px 8px', borderRadius: 100, fontSize: 11, fontWeight: 700 }}>−50%</span>
                </button>
              </div>
            </div>
            <div className="pricing-row reveal-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'stretch' }}>
              {plans.map((p, i) => (
                <div key={i} className={p.featured ? 'featured-card' : 'glow-card'} style={{
                  borderRadius: 28, padding: 36, position: 'relative',
                  background: p.featured ? 'linear-gradient(180deg, rgba(255,106,26,0.08) 0%, var(--bg-2) 70%)' : 'var(--bg-2)',
                  border: p.featured ? '1px solid rgba(255,106,26,0.4)' : '1px solid var(--line)',
                  display: 'flex', flexDirection: 'column',
                }}>
                  {p.badge && (
                    <div style={{ position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)', background: 'var(--orange)', color: '#0A0A0A', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', padding: '5px 14px', borderRadius: 100 }}>{p.badge}</div>
                  )}
                  <div style={{ fontSize: 13, color: 'var(--dim)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 12 }}>{p.name}</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
                    <span style={{ fontSize: 'clamp(48px, 5vw, 64px)', fontWeight: 500, letterSpacing: '-0.04em', color: 'var(--fg)', lineHeight: 1 }}>{p.price}</span>
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 28 }}>{p.sub}</div>
                  <button className={p.featured ? 'btn-orange' : 'btn-ghost'} style={{ width: '100%', padding: '14px', borderRadius: 100, fontSize: 14, marginBottom: 28 }}>{p.cta}</button>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {p.features.map((f, fi) => (
                      <div key={fi} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--fg)' }}>
                        <div style={{ width: 18, height: 18, borderRadius: '50%', background: 'rgba(255,106,26,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                          <Icon name="check" size={11} color="var(--orange)" strokeWidth={2.5} />
                        </div>
                        {f}
                      </div>
                    ))}
                    {p.locked && p.locked.map((f, fi) => (
                      <div key={fi} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--dim)' }}>
                        <div style={{ width: 18, height: 18, borderRadius: '50%', background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line)', flexShrink: 0 }}></div>
                        {f}
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      );
    }

    /* ── TESTIMONIALS ── */
    function Testimonials() {
      const items = [
        { name: 'Aarav Shah', handle: '@aarav.creates', followers: '142K', q: "Linkllo is the tool I didn't know I needed. 10× more DM conversations without lifting a finger. Setup took 2 minutes." },
        { name: 'Priya Mehra', handle: '@priyalifts', followers: '89K', q: "My course sales tripled in one month. People comment COURSE, they get the link instantly. No more losing leads while I sleep." },
        { name: 'James O.', handle: '@jamesbuildz', followers: '201K', q: "I was skeptical about automation, but Linkllo feels personal, it's IG-safe, my team saves 3+ hours every day. Total game-changer." },
        { name: 'Sana K.', handle: '@sanak.beauty', followers: '64K', q: "From DM chaos to DM zen. Every product question gets answered in under 2 seconds. My AOV went up 38%." },
      ];
      return (
        <section className="section-pad-l" style={{ padding: '96px 32px', background: 'var(--bg-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
          <div style={{ maxWidth: 1280, margin: '0 auto' }}>
            <div className="reveal" style={{ marginBottom: 56, maxWidth: 760 }}>
              <div style={{ fontSize: 13, color: 'var(--orange)', fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 20 }}>— Loved by creators</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(40px, 5.5vw, 84px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--fg)' }}>
                Real creators.<br/><span className="serif" style={{ color: 'var(--orange)' }}>Real results.</span>
              </h2>
            </div>
            <div className="testimonial-grid reveal-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
              {items.map((t, i) => (
                <GlowCard key={i} style={{ borderRadius: 24, padding: 36, display: 'flex', flexDirection: 'column', gap: 24 }}>
                  <p style={{ fontSize: 'clamp(18px, 1.7vw, 22px)', color: 'var(--fg)', lineHeight: 1.5, letterSpacing: '-0.01em', fontWeight: 400 }}>"{t.q}"</p>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                    <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'linear-gradient(135deg, #FF6A1A, #FFB088)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700, color: '#0A0A0A' }}>{t.name[0]}</div>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--fg)' }}>{t.name}</div>
                      <div style={{ fontSize: 13, color: 'var(--muted)' }}>{t.handle} · {t.followers} followers</div>
                    </div>
                    <div style={{ marginLeft: 'auto', display: 'flex', gap: 2 }}>
                      {[...Array(5)].map((_, si) => <span key={si} style={{ color: 'var(--orange)', fontSize: 14 }}>★</span>)}
                    </div>
                  </div>
                </GlowCard>
              ))}
            </div>
          </div>
        </section>
      );
    }

    /* ── FAQ ── */
    function FAQ() {
      const [openIdx, setOpenIdx] = useState(0);
      const items = [
        { q: 'Is Linkllo Instagram-approved?', a: "Yes. Linkllo uses the official Instagram API — the same infrastructure Meta provides for business tools. We're a Meta Business Partner, which means our integration has been reviewed and approved by Instagram's team." },
        { q: 'Will my account get banned?', a: "No — as long as you stay within our rate limits (200 DMs/hour) and content guidelines. Linkllo has built-in safeguards that mimic human behavior, and we only DM users who actively comment with your trigger keyword." },
        { q: 'What happens if I exceed my DM limit?', a: "On Free, DMs pause until your monthly limit resets. You'll get a notification email with the option to upgrade. No automations are deleted — they resume automatically when limits reset." },
        { q: 'Can I use this on multiple Instagram accounts?', a: "Yes. The Pro plan supports unlimited accounts from a single dashboard. Switch between accounts in one click. Enterprise plans add agency-level multi-account management." },
        { q: 'Do you support Reels and Stories?', a: "Reels comments are fully supported. Stories support is in beta — comment triggers from story replies work, but story-sticker responses are coming in Q3 2026." },
        { q: 'How does AI template generation work?', a: 'Describe your goal (e.g. "send a course link, friendly + urgent tone"), and our GPT-4 integration generates 3–5 DM variants for you to choose from. Edit any template before publishing.' },
        { q: 'Is my data safe?', a: "Yes. Data is encrypted at rest (AES-256) and in transit (TLS 1.3). We never store IG tokens in plaintext. We're fully GDPR-compliant — you can request a data export or deletion at any time." },
      ];
      return (
        <section id="faq" className="section-pad-l" style={{ padding: '96px 32px' }}>
          <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }} className="faq-grid">
            <div className="reveal">
              <div style={{ fontSize: 13, color: 'var(--orange)', fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 20 }}>— FAQ</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--fg)', marginBottom: 24 }}>
                Frequently <span className="serif" style={{ color: 'var(--orange)' }}>asked.</span>
              </h2>
              <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.6 }}>Can't find what you need? <a href="#" className="link-u" style={{ color: 'var(--orange)' }}>Email our team →</a></p>
            </div>
            <div className="reveal" style={{ display: 'flex', flexDirection: 'column' }}>
              {items.map((item, i) => (
                <div key={i} style={{ borderTop: '1px solid var(--line)', borderBottom: i === items.length - 1 ? '1px solid var(--line)' : 'none' }}>
                  <button onClick={() => setOpenIdx(openIdx === i ? -1 : i)} style={{ width: '100%', background: 'transparent', border: 'none', padding: '24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer', gap: 16, color: 'var(--fg)', textAlign: 'left' }}>
                    <span style={{ fontSize: 'clamp(16px, 1.4vw, 19px)', fontWeight: 500, letterSpacing: '-0.01em' }}>{item.q}</span>
                    <div style={{ width: 32, height: 32, borderRadius: '50%', background: openIdx === i ? 'var(--orange)' : 'transparent', border: openIdx === i ? 'none' : '1px solid var(--line-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all 0.3s' }}>
                      <div style={{ transition: 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)', transform: openIdx === i ? 'rotate(45deg)' : 'none' }}>
                        <Icon name="plus" size={14} color={openIdx === i ? '#0A0A0A' : 'var(--fg)'} strokeWidth={2} />
                      </div>
                    </div>
                  </button>
                  <div className={`faq-answer ${openIdx === i ? 'open' : ''}`}>
                    <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.7, paddingBottom: 28, paddingRight: 48 }}>{item.a}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <style>{`@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
        </section>
      );
    }

    /* ── FINAL CTA ── */
    function FinalCTA() {
      return (
        <section style={{ padding: '96px 32px', position: 'relative', overflow: 'hidden' }}>
          <div className="grid-bg" style={{ position: 'absolute', inset: 0, opacity: 0.4, maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)' }}></div>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 50%, rgba(255,106,26,0.15), transparent 50%)' }}></div>
          <div className="reveal" style={{ position: 'relative', maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
            <h2 style={{ fontSize: 'clamp(48px, 8vw, 124px)', fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 0.95, color: 'var(--fg)', marginBottom: 32 }}>
              Stop losing leads.<br/>
              <span className="serif" style={{ color: 'var(--orange)' }}>Start sending DMs.</span>
            </h2>
            <p style={{ fontSize: 'clamp(16px, 1.6vw, 19px)', color: 'var(--muted)', maxWidth: 540, margin: '0 auto 48px', lineHeight: 1.55 }}>
              Free forever plan. No credit card. Set up in 60 seconds.
            </p>
            <div className="hero-cta-row" style={{ display: 'inline-flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
              <button className="btn-orange" style={{ padding: '18px 32px', borderRadius: 100, fontSize: 16, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                Start free now
                <Icon name="arrow" size={16} strokeWidth={2} />
              </button>
              <button className="btn-ghost" style={{ padding: '17px 28px', borderRadius: 100, fontSize: 15 }}>Book a demo</button>
            </div>
          </div>
        </section>
      );
    }

    /* ── FOOTER ── */
    function Footer() {
      const cols = [
        { title: 'Product', links: ['Features', 'Pricing', 'Use cases', 'Changelog'] },
        { title: 'Company', links: ['About', 'Blog', 'Careers', 'Contact'] },
        { title: 'Legal', links: ['Privacy', 'Terms', 'Data deletion', 'GDPR'] },
        { title: 'Resources', links: ['Help center', 'API docs', 'Status'] },
      ];
      return (
        <footer style={{ background: 'var(--bg)', borderTop: '1px solid var(--line)', padding: '80px 32px 32px' }}>
          <div style={{ maxWidth: 1280, margin: '0 auto' }}>
            {/* Massive wordmark */}
            <div className="reveal" style={{ marginBottom: 80, paddingBottom: 60, borderBottom: '1px solid var(--line)', textAlign: 'center' }}>
              <div className="footer-wordmark" style={{ fontSize: 'clamp(96px, 18vw, 280px)', fontWeight: 600, letterSpacing: '-0.06em', lineHeight: 0.85, background: 'linear-gradient(180deg, var(--fg) 0%, transparent 90%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
                linkllo
              </div>
            </div>

            <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 48, paddingBottom: 48, borderBottom: '1px solid var(--line)' }}>
              <div>
                <Logo height={26} />
                <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.6, marginTop: 20, maxWidth: 280 }}>Comments to DMs, on autopilot. Built for Instagram creators, by creators.</p>
                <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
                  {['ig', 'twitter', 'yt'].map(s => (
                    <a key={s} href="#" data-cursor-hover style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--bg-2)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none', transition: 'all 0.3s' }}
                      onMouseEnter={e => { e.currentTarget.style.background = 'var(--orange)'; e.currentTarget.style.borderColor = 'var(--orange)'; }}
                      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-2)'; e.currentTarget.style.borderColor = 'var(--line)'; }}>
                      <Icon name={s} size={15} color="var(--muted)" />
                    </a>
                  ))}
                </div>
              </div>
              {cols.map(col => (
                <div key={col.title}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--dim)', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 18 }}>{col.title}</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    {col.links.map(l => (
                      <a key={l} href="#" className="link-u" style={{ textDecoration: 'none', fontSize: 14, color: 'var(--muted)', transition: 'color 0.3s' }}
                        onMouseEnter={e => e.target.style.color = 'var(--fg)'}
                        onMouseLeave={e => e.target.style.color = 'var(--muted)'}>{l}</a>
                    ))}
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, flexWrap: 'wrap', gap: 16 }}>
              <p style={{ fontSize: 13, color: 'var(--dim)' }}>© 2026 Linkllo. Made for creators.</p>
              <p style={{ fontSize: 13, color: 'var(--dim)' }}>Meta Business Partner · GDPR · SOC 2</p>
            </div>
          </div>
        </footer>
      );
    }

    /* ── APP ── */
    function App() {
      const tweaks = TWEAK_DEFAULTS;
      useReveal();
      useCustomCursor(tweaks.showCustomCursor);

      return (
        <>
          <Nav />
          <Hero />
          <LogoMarquee speed={tweaks.marqueeSpeed} />
          <ProblemSolution />
          <HowItWorks />
          <Features />
          <UseCases />
          <CommentsToCustomers />
          <StatBanner />
          <Pricing />
          <Testimonials />
          <MetaCompliant />
          <FAQ />
          <FinalCTA />
          <Footer />
        </>
      );
    }

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