// SaaS Edition — full-page system. Cool slate palette, dashboard graphics,
// product-y typography. No peach/cream anywhere.
// Load AFTER all other section files — these win.

(function () {
  // === Palette ===
  const BG       = '#FAFBFC';
  const BG_2     = '#F3F5F8';
  const SURFACE  = '#FFFFFF';
  const INK      = '#0B1220';
  const INK_2    = 'rgba(11,18,32,0.68)';
  const INK_3    = 'rgba(11,18,32,0.50)';
  const INK_4    = 'rgba(11,18,32,0.30)';
  const HAIR     = 'rgba(11,18,32,0.08)';
  const HAIR_2   = 'rgba(11,18,32,0.14)';
  const CORAL    = '#FF6A5B';
  const BLUE     = '#3B82F6';
  const INDIGO   = '#5082F0';
  const GREEN    = '#00CA4E';
  const YELLOW   = '#FFC24B';

  const FONT = '"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,system-ui,sans-serif';
  const MONO = 'ui-monospace, "SF Mono", Menlo, monospace';
  const REGISTER_URL = 'https://console.convesio.com/register';
  const DEMO_URL = 'https://www.youtube.com/watch?v=0hDBz0JBwXE';
  const CONSULT_URL = 'https://convesio.com/free-consultation/';

  // =============== NAV ===============
  function Nav() {
    const [scrolled, setScrolled] = React.useState(false);
    const [menuOpen, setMenuOpen] = React.useState(false);
    React.useEffect(() => {
      const on = () => setScrolled(window.scrollY > 20);
      on();
      window.addEventListener('scroll', on);
      return () => window.removeEventListener('scroll', on);
    }, []);
    // Lock body scroll when mobile menu is open
    React.useEffect(() => {
      document.body.style.overflow = menuOpen ? 'hidden' : '';
      return () => { document.body.style.overflow = ''; };
    }, [menuOpen]);
    const links = ['Pricing','Blog'];
    const pricingHref = '#pricing';
    const docsHref = 'https://convesio.com/blog/';
    const getStartedHref = REGISTER_URL;
    const loginHref = 'https://console.convesio.com/login';
    return (
      <>
      <nav style={{
        position:'fixed', top:0, left:0, right:0, zIndex:50,
        padding:'14px 28px',
        display:'flex', alignItems:'center', justifyContent:'space-between',
        background: scrolled ? 'rgba(250,251,252,0.88)' : 'transparent',
        backdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
        borderBottom: 'none',
        transition:'all 220ms',
        fontFamily: FONT,
      }}>
        <a href="https://convesio.com" style={{display:'flex', alignItems:'center'}}>
          <img src={(window.__resources && window.__resources.logoDark) || 'assets/convesio-logo.svg'}
               style={{height: 24}} alt="Convesio"/>
        </a>
        <div className="saas-nav-links" style={{display:'flex', gap: 28, alignItems:'center'}}>
          {links.map(l=>(
            <a key={l}
              href={l === 'Pricing' ? pricingHref : l === 'Blog' ? docsHref : undefined}
              style={{
              fontSize: 14, fontWeight: 500, color: INK, cursor:'pointer',
              letterSpacing:'-0.005em',
            }}>{l}</a>
          ))}
        </div>
        <div style={{display:'flex', alignItems:'center', gap: 14}}>
          <a
            className="saas-nav-signin"
            href={loginHref}
            target="_blank"
            rel="noopener noreferrer"
            style={{fontSize: 14, fontWeight: 500, color: INK, cursor:'pointer'}}
          >Sign in</a>
          <a className="saas-nav-cta"
            href={getStartedHref}
            target="_blank"
            rel="noopener noreferrer"
            style={{
            padding:'8px 16px', borderRadius: 8,
            background: INK, color:'#fff',
            fontSize: 13.5, fontWeight: 600, letterSpacing:'-0.005em',
            cursor:'pointer', boxShadow:'0 1px 2px rgba(11,18,32,0.08)',
            whiteSpace:'nowrap',
          }}>Get started →</a>
          <button
            className="saas-nav-hamburger"
            aria-label="Open menu"
            onClick={()=> setMenuOpen(true)}
          >
            <svg width="18" height="14" viewBox="0 0 18 14" fill="none">
              <path d="M1 1h16M1 7h16M1 13h16" stroke={INK} strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
      </nav>
      <div className={`saas-mobile-menu${menuOpen ? ' open' : ''}`}>
        <button className="mm-close" aria-label="Close menu" onClick={()=> setMenuOpen(false)}>×</button>
        {links.map(l=>(
          <a key={l}
            href={l === 'Pricing' ? pricingHref : l === 'Blog' ? docsHref : undefined}
            onClick={()=> setMenuOpen(false)}
          >{l}</a>
        ))}
        <a
          href={loginHref}
          target="_blank"
          rel="noopener noreferrer"
          onClick={()=> setMenuOpen(false)}
        >Sign in</a>
        <a
          className="mm-cta"
          href={getStartedHref}
          target="_blank"
          rel="noopener noreferrer"
          onClick={()=> setMenuOpen(false)}
        >Get started →</a>
      </div>
      </>
    );
  }

  // =============== HERO ===============
  function Hero() {
    const HERO_MOTION = {
      coralDuration: '36s',
      blueDuration: '40s',
      coralBlur: 92,
      blueBlur: 88,
      coralSize: '46vw',
      blueSize: '42vw',
    };

    return (
      <section style={{
        position:'relative',
        isolation:'isolate',
        padding:'140px 28px 120px', overflow:'hidden',
        background:`linear-gradient(180deg, ${BG} 0%, #F7F9FC 100%)`,
        fontFamily: FONT, color: INK,
      }}>
        <div
          aria-hidden="true"
          className="saas-hero-blob-coral"
          style={{
            position:'absolute',
            inset:'-34%',
            zIndex:0,
            pointerEvents:'none',
            transformOrigin:'50% 50%',
            animation:`saas-hero-orbit-coral ${HERO_MOTION.coralDuration} ease-in-out infinite`,
            mixBlendMode:'multiply',
          }}
        >
          <div style={{
            position:'absolute',
            top:'14%',
            right:'10%',
            width:HERO_MOTION.coralSize,
            height:HERO_MOTION.coralSize,
            minWidth:420,
            minHeight:420,
            borderRadius:'50%',
            background:'rgba(213,88,77,0.18)',
            filter:`blur(${HERO_MOTION.coralBlur}px)`,
          }}/>
        </div>
        <div
          aria-hidden="true"
          className="saas-hero-blob-blue"
          style={{
            position:'absolute',
            inset:'-34%',
            zIndex:0,
            pointerEvents:'none',
            transformOrigin:'50% 50%',
            animation:`saas-hero-orbit-blue ${HERO_MOTION.blueDuration} ease-in-out infinite`,
            mixBlendMode:'multiply',
          }}
        >
          <div style={{
            position:'absolute',
            bottom:'10%',
            left:'8%',
            width:HERO_MOTION.blueSize,
            height:HERO_MOTION.blueSize,
            minWidth:380,
            minHeight:380,
            borderRadius:'50%',
            background:'rgba(71,108,196,0.16)',
            filter:`blur(${HERO_MOTION.blueBlur}px)`,
          }}/>
        </div>
        <style>{`
          @keyframes saas-hero-orbit-coral {
            0%   { transform: rotate(0deg) translate3d(0, 0, 0) scale(1); }
            50%  { transform: rotate(180deg) translate3d(-0.6%, 0.45%, 0) scale(1.01); }
            100% { transform: rotate(360deg) translate3d(0, 0, 0) scale(1); }
          }
          @keyframes saas-hero-orbit-blue {
            0%   { transform: rotate(360deg) translate3d(0, 0, 0) scale(1); }
            50%  { transform: rotate(180deg) translate3d(0.55%, -0.6%, 0) scale(1.008); }
            100% { transform: rotate(0deg) translate3d(0, 0, 0) scale(1); }
          }
          @media (prefers-reduced-motion: reduce) {
            .saas-hero-blob-coral,
            .saas-hero-blob-blue {
              animation: none !important;
            }
          }
        `}</style>
        <div
          aria-hidden="true"
          style={{
            position:'absolute',
            inset:0,
            zIndex:0,
            pointerEvents:'none',
            opacity:0.035,
            backgroundImage:'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'192\' height=\'192\'><filter id=\'n\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.85\' numOctaves=\'2\' seed=\'5\'/></filter><rect width=\'100%25\' height=\'100%25\' filter=\'url(%23n)\' opacity=\'0.65\'/></svg>")',
            mixBlendMode:'soft-light',
          }}
        />
        <div style={{
          maxWidth: 1280, margin:'0 auto',
          width:'100%',
          position:'relative',
          zIndex:1,
          display:'grid', gridTemplateColumns:'1.05fr 1fr', gap: 80, alignItems:'center',
        }}>
          <div style={{textAlign:'left'}}>
            <h1 style={{
              fontSize:'clamp(48px, 5.8vw, 84px)',
              fontWeight: 700, lineHeight: 1.02, letterSpacing:'-0.035em',
              margin: 0, textWrap:'balance', maxWidth: 760,
            }}>The fastest way to ship static sites to the edge.</h1>
            <p style={{
              fontSize: 19, lineHeight: 1.55, color: INK_2,
              maxWidth: 620, margin:'26px 0 0',
            }}>
              Connect your repo, bring your domain, and go live globally in seconds.
              Built on Cloudflare Workers. Flat $5 per site.
            </p>
            <div style={{display:'flex', gap: 12, marginTop: 34, flexWrap:'wrap', justifyContent:'flex-start'}}>
              <a
                href={REGISTER_URL}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                padding:'12px 22px', borderRadius: 10, background: INK, color:'#fff',
                fontSize: 14.5, fontWeight: 600, cursor:'pointer',
                boxShadow:'0 1px 2px rgba(11,18,32,0.1)',
              }}>Get started →</a>
              <a
                href="https://convesio.com/book-convesio-sales/"
                target="_blank"
                rel="noopener noreferrer"
                style={{
                padding:'12px 22px', borderRadius: 10, background: SURFACE,
                color: INK, border:`1px solid ${HAIR_2}`,
                fontSize: 14.5, fontWeight: 600, cursor:'pointer',
                boxShadow:'0 1px 2px rgba(11,18,32,0.04)',
              }}>Book a demo</a>
            </div>
            <div style={{
              display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 24,
              margin:'48px 0 0', paddingTop: 32, borderTop:`1px solid ${HAIR}`,
              maxWidth: 760, width:'100%',
            }}>
              {[
                {n:'30s',     l:'Avg deploy time'},
                {n:'300+',    l:'Locations'},
                {n:'4.9★',    l:'Support satisfaction'},
              ].map((s,i)=>(
                <div key={i}>
                  <div style={{fontSize: 28, fontWeight: 700, letterSpacing:'-0.02em'}}>{s.n}</div>
                  <div style={{fontSize: 12.5, color: INK_3, marginTop: 4, fontWeight: 500}}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
          <HeroDashCard/>
        </div>
      </section>
    );
  }

  // =============== DASHBOARD CARD (shared chrome) ===============
  function DashCard({children, label, status = 'live', rightMeta, padded = true}) {
    return (
      <div style={{
        background: SURFACE, borderRadius: 16, border:`1px solid ${HAIR}`,
        boxShadow:'0 30px 60px rgba(11,18,32,0.06), 0 10px 20px rgba(11,18,32,0.04)',
        overflow:'hidden',
      }}>
        {(label || rightMeta) && (
          <div style={{
            display:'flex', alignItems:'center', justifyContent:'space-between',
            padding:'14px 20px', borderBottom:`1px solid ${HAIR}`,
          }}>
            <div style={{display:'flex', alignItems:'center', gap: 10}}>
              {status && (
                <span style={{
                  width: 8, height: 8, borderRadius: 999,
                  background: status === 'live' ? GREEN : status === 'warn' ? YELLOW : CORAL,
                  boxShadow: status === 'live' ? '0 0 0 3px rgba(0,202,78,0.14)' : 'none',
                }}/>
              )}
              <span style={{fontSize: 13.5, fontWeight: 600, color: INK}}>{label}</span>
            </div>
            {rightMeta && <div style={{fontSize: 12, color: INK_3, fontWeight: 500}}>{rightMeta}</div>}
          </div>
        )}
        <div style={padded ? {padding:'22px 20px'} : {}}>{children}</div>
      </div>
    );
  }

  // (Default one used in the hero)
  function HeroDashCard() {
    // --- Animation state ---
    // Bar chart: continuously "breathes" — the latest bar grows from 0 → full each cycle,
    // then the whole series shifts left and a new bar starts.
    const [tick, setTick] = React.useState(0);
    const [secs, setSecs] = React.useState(28);
    const [ttfb, setTtfb] = React.useState(37);
    const [edges, setEdges] = React.useState('300+');
    const [pulse, setPulse] = React.useState(0);

    // deploy cycle ~5.6s (bar grows, commit streams in, counter ticks)
    React.useEffect(() => {
      const id = setInterval(() => setTick(t => t + 1), 5600);
      return () => clearInterval(id);
    }, []);

    // "Last deploy Ns ago" counter
    React.useEffect(() => {
      setSecs(1); // reset on each new deploy
    }, [tick]);
    React.useEffect(() => {
      const id = setInterval(() => setSecs(s => s + 1), 1000);
      return () => clearInterval(id);
    }, []);

    // TTFB jitter + edges drift (little vitality)
    React.useEffect(() => {
      const id = setInterval(() => {
        setTtfb(34 + Math.floor(Math.random() * 8));
        setEdges('300+');
      }, 1800);
      return () => clearInterval(id);
    }, []);

    // LIVE dot soft pulse
    React.useEffect(() => {
      const id = setInterval(() => setPulse(p => p + 1), 1200);
      return () => clearInterval(id);
    }, []);

    // --- Rolling commits queue ---
    // `tick` advances the head; we show 3 at a time. Newest enters animated.
    const ALL_COMMITS = [
      {h:'4a2f91e', m:'fix: landing hero copy'},
      {h:'a7e1d0c', m:'feat: pricing table'},
      {h:'f21c88b', m:'perf: image lazyload'},
      {h:'b03e447', m:'chore: bump deps'},
      {h:'d91f20a', m:'feat: edge analytics'},
      {h:'6c18e34', m:'style: button hover'},
      {h:'e4a992c', m:'fix: sitemap routes'},
    ];
    const visibleCommits = Array.from({length: 3}).map((_, i) => {
      return ALL_COMMITS[(tick + i) % ALL_COMMITS.length];
    });

    // --- Bar heights (stable random-ish) ---
    const bars = Array.from({length: 30}).map((_, i) => {
      return 20 + ((i * 37 + 13 + tick * 11) % 55);
    });

    return (
      <DashCard label="Production · main" rightMeta={`Last deploy ${secs}s ago`}>
        <style>{`
          @keyframes saasBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
          @keyframes saasCommitIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
          @keyframes saasPulseRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } }
          @keyframes saasLiveBlink { 0%, 60%, 100% { opacity: 1; } 30% { opacity: 0.35; } }
          @keyframes saasShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
          @keyframes saasCountFlip { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
          .saas-bar { transform-origin: bottom; }
          .saas-bar-new { animation: saasBarGrow 1.1s cubic-bezier(.2,.7,.2,1) both; }
          .saas-commit { animation: saasCommitIn 600ms cubic-bezier(.2,.7,.2,1) both; }
          .saas-live-dot::before {
            content: ''; position: absolute; inset: 0; border-radius: 999px;
            background: ${CORAL}; animation: saasPulseRing 1.6s ease-out infinite;
          }
        `}</style>
        <div style={{fontSize: 12, fontWeight: 600, letterSpacing:'.06em',
          textTransform:'uppercase', color: INK_3, marginBottom: 12,
          display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <span>Deploy activity · 30 days</span>
          <span style={{
            display:'inline-flex', alignItems:'center', gap: 6,
            fontSize: 10.5, fontWeight: 700, color: GREEN, letterSpacing:'.08em',
          }}>
            <span style={{width: 6, height: 6, borderRadius: 999, background: GREEN,
              animation: 'saasLiveBlink 1.6s ease-in-out infinite'}}/>
            STREAMING
          </span>
        </div>
        <div key={`bars-${tick}`} style={{display:'flex', alignItems:'flex-end', gap: 3, height: 80}}>
          {bars.map((h, i) => {
            const hot = i >= 26;
            const isNewest = i === 29;
            return (
              <div key={i}
                className={`saas-bar ${isNewest ? 'saas-bar-new' : ''}`}
                style={{
                  flex: 1, height: h, borderRadius: 2,
                  background: hot ? CORAL : 'rgba(11,18,32,0.10)',
                  animationDelay: isNewest ? '0ms' : `${i * 15}ms`,
                }}/>
            );
          })}
        </div>
        <div style={{display:'flex', justifyContent:'space-between', marginTop: 8,
          fontSize: 11, color: INK_4, fontWeight: 500}}>
          <span>30 days ago</span><span>Today</span>
        </div>
        <div style={{marginTop: 24, overflow:'hidden'}}>
          {visibleCommits.map((d, i) => {
            const t = i === 0 ? `${secs}s` : i === 1 ? '2h' : '1d';
            const isNewest = i === 0;
            return (
              <div key={`${tick}-${d.h}`}
                className={isNewest ? 'saas-commit' : ''}
                style={{
                  display:'flex', alignItems:'center', gap: 14, padding:'12px 0',
                  borderBottom: i === visibleCommits.length-1 ? 'none' : `1px solid ${HAIR}`,
                }}>
                <span style={{
                  width: 6, height: 6, borderRadius: 999,
                  background: isNewest ? CORAL : GREEN, flexShrink: 0,
                  boxShadow: isNewest ? `0 0 0 4px rgba(255,106,91,0.18)` : 'none',
                  transition:'box-shadow 400ms',
                }}/>
                <span style={{fontFamily: MONO, fontSize: 12, color: INK_3, width: 66}}>{d.h}</span>
                <span style={{flex:1, fontSize: 13.5, color: INK}}>{d.m}</span>
                <span key={`t-${tick}-${i}`} style={{
                  fontSize: 12, color: INK_3, fontFamily: MONO,
                  animation: isNewest ? 'saasCountFlip 400ms ease-out both' : 'none',
                }}>{t}</span>
              </div>
            );
          })}
        </div>
        <div style={{
          marginTop: 22, padding:'14px 16px', borderRadius: 10,
          background: BG_2, border:`1px solid ${HAIR}`,
          display:'flex', alignItems:'center', gap: 16, position:'relative', overflow:'hidden',
        }}>
          {/* subtle shimmer sweep */}
          <div aria-hidden style={{
            position:'absolute', inset: 0, pointerEvents:'none',
            background:'linear-gradient(90deg, transparent 0%, rgba(255,106,91,0.08) 50%, transparent 100%)',
            backgroundSize:'200% 100%',
            animation:'saasShimmer 4.5s linear infinite',
          }}/>
          <div style={{
            width: 36, height: 36, borderRadius: 10, background: INK,
            color:'#fff', display:'flex', alignItems:'center', justifyContent:'center',
            fontSize: 16, position:'relative', zIndex: 1,
          }}>◉</div>
          <div style={{flex:1, position:'relative', zIndex: 1}}>
            <div style={{fontSize: 13, fontWeight: 600}}>
              Serving from <span key={`e-${edges}`} style={{fontVariantNumeric:'tabular-nums'}}>{edges}</span> edges
            </div>
            <div style={{fontSize: 12, color: INK_3, marginTop: 2}}>
              Median TTFB <span key={`ttfb-${ttfb}`} style={{
                fontVariantNumeric:'tabular-nums', display:'inline-block',
                animation:'saasCountFlip 300ms ease-out both',
              }}>{ttfb}ms</span> worldwide
            </div>
          </div>
          <div style={{display:'inline-flex', alignItems:'center', gap: 8, position:'relative', zIndex: 1}}>
            <span className="saas-live-dot" style={{
              position:'relative', width: 8, height: 8, borderRadius: 999,
              background: CORAL, display:'inline-block',
            }}/>
            <span style={{fontSize: 11, fontWeight: 700, color: CORAL,
              fontFamily: MONO, letterSpacing:'.1em'}}>LIVE</span>
          </div>
        </div>
      </DashCard>
    );
  }

  // shared layout atoms
  function Eyebrow({children, color = CORAL}) {
    return (
      <div style={{
        display:'inline-flex', alignItems:'center', gap: 8,
        fontSize: 12, fontWeight: 700, letterSpacing:'.08em',
        textTransform:'uppercase', color, fontFamily: FONT,
      }}>
        <span style={{width: 16, height: 1.5, background: color}}/>
        {children}
      </div>
    );
  }
  function SectionH({children, small}) {
    return (
      <h2 style={{
        fontSize: small ? 'clamp(30px, 3.4vw, 48px)' : 'clamp(40px, 4.6vw, 64px)',
        fontWeight: 700, lineHeight: 1.04, letterSpacing:'-0.03em',
        color: INK, margin:'18px 0 0', textWrap:'balance',
      }}>{children}</h2>
    );
  }
  function Lead({children, style={}}) {
    return <p style={{
      fontSize: 18, lineHeight: 1.55, color: INK_2, maxWidth: 620,
      margin:'20px 0 0', ...style,
    }}>{children}</p>;
  }
  function PrimaryBtn({children, href}) {
    return <a
      href={href}
      target={href ? '_blank' : undefined}
      rel={href ? 'noopener noreferrer' : undefined}
      style={{
      padding:'12px 22px', borderRadius: 10, background: INK, color:'#fff',
      fontSize: 14.5, fontWeight: 600, cursor:'pointer',
      boxShadow:'0 1px 2px rgba(11,18,32,0.1)', display:'inline-block',
    }}>{children}</a>;
  }
  function GhostBtn({children, href}) {
    return <a
      href={href}
      target={href ? '_blank' : undefined}
      rel={href ? 'noopener noreferrer' : undefined}
      style={{
      padding:'12px 22px', borderRadius: 10, background: SURFACE,
      color: INK, border:`1px solid ${HAIR_2}`, fontSize: 14.5, fontWeight: 600,
      cursor:'pointer', boxShadow:'0 1px 2px rgba(11,18,32,0.04)', display:'inline-block',
    }}>{children}</a>;
  }

  // =============== WHAT IS ===============
  function WhatIs() {
    const items = [
      {t:'Push to Deploy',  d:'Every GitHub commit auto-updates your live site in about 30 seconds.', k:'↗'},
      {t:'Global Edge',     d:'300+ Cloudflare edge locations serve from the node nearest your visitor.', k:'◉'},
      {t:'Custom Domains',  d:'Any domain you own. Free SSL. Zero configuration required.', k:'✦'},
      {t:'Human Support',   d:'Real humans who know your setup. Not a forum. Not a chatbot.', k:'★'},
    ];
    return (
      <section style={{background: BG, padding:'120px 28px', fontFamily: FONT}}>
        <div style={{maxWidth: 1200, margin:'0 auto'}}>
          <div style={{textAlign:'center', maxWidth: 820, margin:'0 auto'}}>
            <Eyebrow>The product</Eyebrow>
            <SectionH>The fastest way to host a static website.</SectionH>
            <Lead style={{margin:'26px auto 0'}}>
              Whether you built it with Lovable, Replit, or hand-coded every line — connect your GitHub
              repo and we deploy to Cloudflare's global edge in seconds. Custom domains, SSL,
              analytics, and expert support included. <strong style={{color: INK}}>Starting at $5/site.</strong>
            </Lead>
          </div>
          <div style={{
            marginTop: 80, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 20,
          }}>
            {items.map((x,i)=>(
              <div key={i} style={{
                background: SURFACE, borderRadius: 14, border:`1px solid ${HAIR}`,
                padding:'28px 24px', boxShadow:'0 1px 2px rgba(11,18,32,0.03)',
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: BG_2, color: CORAL,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize: 16, fontWeight: 700, marginBottom: 20,
                }}>{x.k}</div>
                <h4 style={{fontSize: 17, fontWeight: 600, margin:'0 0 8px',
                  letterSpacing:'-0.01em'}}>{x.t}</h4>
                <p style={{fontSize: 14, lineHeight: 1.55, color: INK_2, margin: 0}}>{x.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // =============== HOW IT WORKS (dashboard pipeline) ===============
  function HowItWorks() {
    const [step, setStep] = React.useState(0);
    React.useEffect(() => {
      const id = setInterval(() => setStep(s => (s + 1) % 4), 2400);
      return () => clearInterval(id);
    }, []);
    const steps = [
      {n:'01', t:'Build Your Site',     d:'Use Lovable, Replit, Bolt.new, Cursor, or your favorite editor. HTML, React, Vue, Astro, Next.js — anything that compiles to static files.'},
      {n:'02', t:'Push to GitHub',      d:'Commit your code to any GitHub repository. If your vibe coding tool already pushes to GitHub, you\'re already done.'},
      {n:'03', t:'Connect to Convesio', d:'Link your repo. Set your domain. Click deploy. No build commands. No env variables. No YAML files.'},
      {n:'04', t:'You\'re Live',        d:'Your site deploys to Cloudflare\'s edge in about 30 seconds. Every future push auto-updates.'},
    ];
    return (
      <section style={{background: BG_2, padding:'120px 28px', fontFamily: FONT}}>
        <div style={{maxWidth: 1200, margin:'0 auto'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80, alignItems:'start'}}>
            <div style={{position:'sticky', top: 120}}>
              <Eyebrow>Deployment</Eyebrow>
              <SectionH small>From commit to live in about 30 seconds.</SectionH>
              <Lead>
                No build commands to configure. No environment variables. No YAML files.
                Just push and it's live.
              </Lead>
              <PipelineCard step={step}/>
            </div>
            <div>
              {steps.map((s, i) => {
                const active = i === step;
                return (
                  <div key={i} style={{
                    padding:'24px 22px', borderRadius: 12,
                    background: active ? SURFACE : 'transparent',
                    border: `1px solid ${active ? HAIR_2 : 'transparent'}`,
                    boxShadow: active ? '0 2px 8px rgba(11,18,32,0.04)' : 'none',
                    transition: 'all 300ms',
                    marginBottom: 6,
                    display:'grid', gridTemplateColumns:'52px 1fr', gap: 16,
                  }}>
                    <div style={{
                      width: 40, height: 40, borderRadius: 10,
                      background: active ? INK : BG_2,
                      color: active ? '#fff' : INK_3,
                      display:'flex', alignItems:'center', justifyContent:'center',
                      fontSize: 13, fontWeight: 700, fontFamily: MONO,
                    }}>{s.n}</div>
                    <div>
                      <h3 style={{fontSize: 17, fontWeight: 600, margin:'8px 0 6px',
                        letterSpacing:'-0.01em'}}>{s.t}</h3>
                      <p style={{fontSize: 14, lineHeight: 1.6, color: INK_2, margin: 0}}>{s.d}</p>
                    </div>
                  </div>
                );
              })}
              <div style={{marginTop: 32, paddingLeft: 4}}>
                <PrimaryBtn href={REGISTER_URL}>Deploy your first site →</PrimaryBtn>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
  function PipelineCard({step}) {
    const stages = [
      {k:'push',   l:'git push'},
      {k:'detect', l:'detected'},
      {k:'build',  l:'building'},
      {k:'live',   l:'live'},
    ];
    return (
      <div style={{marginTop: 36}}>
        <DashCard label="Deploy pipeline" rightMeta="~/site · main">
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0, alignItems:'center'}}>
            {stages.map((s,i)=>{
              const reached = i <= step;
              return (
                <React.Fragment key={s.k}>
                  <div style={{textAlign:'center'}}>
                    <div style={{
                      width: 40, height: 40, borderRadius: 10, margin:'0 auto 10px',
                      background: reached ? INK : BG_2,
                      color: reached ? '#fff' : INK_3,
                      display:'flex', alignItems:'center', justifyContent:'center',
                      fontSize: 12, fontWeight: 700, fontFamily: MONO,
                      transition:'all 400ms',
                    }}>
                      {reached ? '✓' : String(i+1).padStart(2,'0')}
                    </div>
                    <div style={{fontSize: 12, fontWeight: 600,
                      color: reached ? INK : INK_3}}>{s.l}</div>
                  </div>
                  {i < stages.length - 1 && (
                    <div style={{height: 2, background: BG_2, borderRadius: 2, position:'relative', marginTop: -30}}>
                      <div style={{position:'absolute', inset: 0, background: INK,
                        transform: `scaleX(${reached && i+1 <= step ? 1 : 0})`,
                        transformOrigin:'left', transition:'transform 400ms', borderRadius: 2}}/>
                    </div>
                  )}
                </React.Fragment>
              );
            })}
          </div>
          <div style={{marginTop: 22, paddingTop: 14, borderTop:`1px solid ${HAIR}`,
            fontFamily: MONO, fontSize: 12.5, lineHeight: 1.8}}>
            <div style={{opacity: step >= 1 ? 1 : 0.3, transition:'opacity 300ms', color: INK}}>
              → git push origin main
            </div>
            <div style={{opacity: step >= 2 ? 1 : 0.3, transition:'opacity 300ms',
              color: step >= 2 ? GREEN : INK_3}}>
              → build complete · 812ms
            </div>
            <div style={{opacity: step >= 3 ? 1 : 0.3, transition:'opacity 300ms',
              color: step >= 3 ? CORAL : INK_3, fontWeight: 600}}>
              ✓ live at yourdomain.com · 28.4s total
            </div>
          </div>
        </DashCard>
      </div>
    );
  }

  // =============== VIBE CODING ===============
  function VibeCoding() {
    const tools = [
      {n:'Lovable',     g:'L'},
      {n:'Replit',      g:'R'},
      {n:'Bolt.new',    g:'⚡'},
      {n:'Cursor',      g:'⌘'},
      {n:'Claude Code', g:'✦'},
      {n:'v0',          g:'v0'},
    ];
    return (
      <section style={{background: BG, padding:'120px 28px', fontFamily: FONT}}>
        <div style={{maxWidth: 1200, margin:'0 auto'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80, alignItems:'center'}}>
            <div>
              <Eyebrow>Vibe coding</Eyebrow>
              <SectionH small>Built for the moment after creation.</SectionH>
              <Lead>
                The way people build websites has changed forever. Tools like Lovable, Replit,
                Bolt.new, and Cursor let anyone create a professional site in minutes — by
                describing what they want in plain language.
              </Lead>
              <Lead style={{marginTop: 14}}>
                But creating is only half the story. You still need to get it live, on your own
                domain, backed by real infrastructure.
              </Lead>
              <p style={{
                fontSize: 20, fontWeight: 600, color: INK,
                marginTop: 28, maxWidth: 520, lineHeight: 1.3,
              }}>
                You don't need to be a developer to launch a website. Not anymore.
              </p>
              <div style={{marginTop: 34, display:'flex', gap: 14, flexWrap:'wrap'}}>
                <PrimaryBtn href={DEMO_URL}>Watch the demo →</PrimaryBtn>
              </div>
            </div>
            <VibeCard tools={tools}/>
          </div>
        </div>
      </section>
    );
  }
  function VibeCard({tools}) {
    return (
      <DashCard label="Prompt → Code" rightMeta="session · 4a2f">
        <div style={{
          background: BG_2, borderRadius: 10, border:`1px solid ${HAIR}`,
          padding:'12px 14px', display:'flex', alignItems:'center', gap: 10,
        }}>
          <span style={{width: 6, height: 6, borderRadius: 999, background: CORAL}}/>
          <span style={{fontSize: 13, color: INK_2, fontStyle:'italic'}}>
            "Make me a landing page for my coffee shop, warm tones..."
          </span>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 24px 1fr', alignItems:'center',
          gap: 12, marginTop: 14, height: 180}}>
          <div style={{
            background: INK, borderRadius: 10, padding: 14, height:'100%',
            fontFamily: MONO, fontSize: 11, lineHeight: 1.75,
            color:'rgba(255,255,255,.82)',
          }}>
            <div style={{color:'#9DD8B3'}}>&lt;section</div>
            <div style={{paddingLeft: 10}}>className="hero"&gt;</div>
            <div style={{paddingLeft: 10, color: CORAL}}>&lt;h1&gt;Welcome&lt;/h1&gt;</div>
            <div style={{paddingLeft: 10, color:'rgba(255,255,255,.55)'}}>&lt;p&gt;Warm drinks...&lt;/p&gt;</div>
            <div style={{color:'#9DD8B3'}}>&lt;/section&gt;</div>
          </div>
          <div style={{color: INK_3, fontSize: 16, textAlign:'center'}}>→</div>
          <div style={{
            borderRadius: 10, padding: 14, height:'100%',
            background:`linear-gradient(135deg, ${BG_2} 0%, ${BG} 100%)`,
            border:`1px solid ${HAIR_2}`,
            display:'flex', flexDirection:'column', justifyContent:'flex-end',
          }}>
            <div style={{fontSize: 20, fontWeight: 700, color: INK, letterSpacing:'-0.02em'}}>Welcome</div>
            <div style={{fontSize: 11, color: INK_2, marginTop: 4}}>Warm drinks, warmer people.</div>
          </div>
        </div>
        <div style={{marginTop: 18, paddingTop: 16, borderTop:`1px solid ${HAIR}`}}>
          <div style={{fontSize: 11, fontWeight: 700, letterSpacing:'.08em',
            textTransform:'uppercase', color: INK_3, marginBottom: 10}}>
            Works with
          </div>
          <div style={{display:'flex', gap: 8, flexWrap:'wrap'}}>
            {tools.map(t=>(
              <div key={t.n} style={{
                display:'inline-flex', alignItems:'center', gap: 8,
                padding:'6px 12px', borderRadius: 999,
                background: BG_2, border:`1px solid ${HAIR}`,
                fontSize: 13, fontWeight: 500, color: INK,
              }}>
                <span style={{
                  width: 18, height: 18, borderRadius: 5, background: INK, color:'#fff',
                  display:'inline-flex', alignItems:'center', justifyContent:'center',
                  fontSize: 10, fontWeight: 700, fontFamily: MONO,
                }}>{t.g}</span>
                {t.n}
              </div>
            ))}
          </div>
        </div>
      </DashCard>
    );
  }

  // =============== EDGE PERF ===============
  function EdgePerf() {
    return (
      <section style={{background: BG_2, padding:'120px 28px', fontFamily: FONT}}>
        <div style={{maxWidth: 1200, margin:'0 auto'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80, alignItems:'center'}}>
            <EdgeCard/>
            <div>
              <Eyebrow>Infrastructure</Eyebrow>
              <SectionH small>Global edge performance, powered by Cloudflare.</SectionH>
              <Lead>
                Every site runs on Cloudflare Workers — the world's largest edge network.
                300+ locations, always on, always fast. No cold starts.
              </Lead>
              <div style={{
                marginTop: 40, display:'grid', gridTemplateColumns:'1fr 1fr', rowGap: 28, columnGap: 36,
              }}>
                {[
                  {n:'300+',  l:'Edge locations worldwide'},
                  {n:'<40ms', l:'Median TTFB, anywhere'},
                  {n:'Zero',  l:'Cold starts, ever'},
                  {n:'Built-in', l:'DDoS + analytics included'},
                ].map((s,i)=>(
                  <div key={i}>
                    <div style={{fontSize: 36, fontWeight: 700, letterSpacing:'-0.025em',
                      color: INK, lineHeight: 1}}>{s.n}</div>
                    <div style={{fontSize: 13, color: INK_2, marginTop: 8, fontWeight: 500}}>{s.l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
  function EdgeCard() {
    const svgRef = React.useRef(null);

    React.useEffect(() => {
      const svg = svgRef.current;
      if (!svg) return undefined;

      const CORAL = '#FF6A5B';
      const TIER_OPACITY = [1.0, 0.78, 0.55, 0.34];
      const CITIES = [
        {n:'SFO',lat:37.6,lon:-122.4,w:0.95,t:0},{n:'SJC',lat:37.4,lon:-121.9,w:0.7,t:1},
        {n:'LAX',lat:33.9,lon:-118.4,w:0.85,t:1},{n:'SAN',lat:32.7,lon:-117.2,w:0.5,t:2},
        {n:'SEA',lat:47.4,lon:-122.3,w:0.75,t:1},{n:'PDX',lat:45.6,lon:-122.6,w:0.5,t:2},
        {n:'PHX',lat:33.4,lon:-112.0,w:0.55,t:2},{n:'DEN',lat:39.9,lon:-104.7,w:0.6,t:1},
        {n:'SLC',lat:40.8,lon:-111.9,w:0.45,t:2},{n:'DFW',lat:32.9,lon:-97.0,w:0.75,t:1},
        {n:'IAH',lat:29.6,lon:-95.3,w:0.6,t:2},{n:'MSP',lat:44.9,lon:-93.2,w:0.55,t:2},
        {n:'ORD',lat:41.9,lon:-87.9,w:0.9,t:0},{n:'DTW',lat:42.2,lon:-83.4,w:0.5,t:2},
        {n:'ATL',lat:33.6,lon:-84.4,w:0.75,t:1},{n:'MIA',lat:25.8,lon:-80.3,w:0.7,t:1},
        {n:'TPA',lat:27.9,lon:-82.5,w:0.45,t:2},{n:'IAD',lat:38.9,lon:-77.5,w:1.0,t:0},
        {n:'EWR',lat:40.7,lon:-74.2,w:0.95,t:0},{n:'BOS',lat:42.4,lon:-71.0,w:0.6,t:1},
        {n:'YYZ',lat:43.7,lon:-79.6,w:0.7,t:1},{n:'YUL',lat:45.5,lon:-73.6,w:0.5,t:2},
        {n:'YVR',lat:49.2,lon:-123.2,w:0.55,t:2},{n:'YYC',lat:51.1,lon:-114.0,w:0.4,t:3},
        {n:'MEX',lat:19.4,lon:-99.1,w:0.55,t:2},{n:'QRO',lat:20.6,lon:-100.4,w:0.4,t:3},
        {n:'GRU',lat:-23.4,lon:-46.5,w:0.85,t:1},{n:'GIG',lat:-22.8,lon:-43.3,w:0.55,t:2},
        {n:'EZE',lat:-34.8,lon:-58.5,w:0.5,t:2},{n:'BOG',lat:4.7,lon:-74.1,w:0.45,t:2},
        {n:'SCL',lat:-33.4,lon:-70.8,w:0.45,t:2},{n:'LIM',lat:-12.0,lon:-77.1,w:0.4,t:3},
        {n:'CCS',lat:10.6,lon:-66.9,w:0.35,t:3},{n:'POA',lat:-30.0,lon:-51.2,w:0.4,t:3},
        {n:'BSB',lat:-15.9,lon:-47.9,w:0.4,t:3},{n:'FOR',lat:-3.8,lon:-38.5,w:0.4,t:3},
        {n:'MVD',lat:-34.8,lon:-56.0,w:0.35,t:3},{n:'UIO',lat:-0.1,lon:-78.5,w:0.3,t:3},
        {n:'LHR',lat:51.5,lon:-0.5,w:1.0,t:0},{n:'MAN',lat:53.4,lon:-2.3,w:0.5,t:2},
        {n:'CDG',lat:49.0,lon:2.6,w:0.95,t:0},{n:'MRS',lat:43.4,lon:5.2,w:0.45,t:2},
        {n:'AMS',lat:52.3,lon:4.8,w:1.0,t:0},{n:'BRU',lat:50.9,lon:4.5,w:0.5,t:2},
        {n:'FRA',lat:50.0,lon:8.6,w:1.0,t:0},{n:'MUC',lat:48.4,lon:11.8,w:0.6,t:1},
        {n:'BER',lat:52.5,lon:13.4,w:0.55,t:2},{n:'HAM',lat:53.5,lon:9.9,w:0.45,t:2},
        {n:'MAD',lat:40.5,lon:-3.6,w:0.7,t:1},{n:'BCN',lat:41.3,lon:2.1,w:0.55,t:2},
        {n:'LIS',lat:38.8,lon:-9.1,w:0.45,t:2},{n:'MIL',lat:45.5,lon:9.3,w:0.6,t:1},
        {n:'ROM',lat:41.9,lon:12.5,w:0.5,t:2},{n:'ZRH',lat:47.5,lon:8.5,w:0.6,t:1},
        {n:'GVA',lat:46.2,lon:6.1,w:0.45,t:2},{n:'VIE',lat:48.1,lon:16.6,w:0.55,t:2},
        {n:'PRG',lat:50.1,lon:14.3,w:0.45,t:2},{n:'WAW',lat:52.2,lon:20.9,w:0.55,t:2},
        {n:'STO',lat:59.6,lon:17.9,w:0.55,t:2},{n:'CPH',lat:55.6,lon:12.6,w:0.5,t:2},
        {n:'OSL',lat:60.2,lon:11.1,w:0.45,t:2},{n:'HEL',lat:60.3,lon:24.9,w:0.45,t:2},
        {n:'DUB',lat:53.4,lon:-6.3,w:0.55,t:2},{n:'IST',lat:41.0,lon:28.9,w:0.65,t:1},
        {n:'ATH',lat:37.9,lon:23.7,w:0.4,t:3},{n:'SOF',lat:42.7,lon:23.4,w:0.35,t:3},
        {n:'BUH',lat:44.5,lon:26.1,w:0.35,t:3},{n:'GLA',lat:55.9,lon:-4.3,w:0.4,t:3},
        {n:'EDI',lat:55.9,lon:-3.3,w:0.35,t:3},{n:'BIO',lat:43.3,lon:-2.9,w:0.3,t:3},
        {n:'OPO',lat:41.2,lon:-8.7,w:0.3,t:3},{n:'NAP',lat:40.9,lon:14.3,w:0.35,t:3},
        {n:'KEF',lat:64.0,lon:-22.6,w:0.3,t:3},{n:'GOT',lat:57.7,lon:11.9,w:0.3,t:3},
        {n:'RIX',lat:56.9,lon:24.2,w:0.3,t:3},{n:'TLL',lat:59.4,lon:24.8,w:0.3,t:3},
        {n:'VNO',lat:54.6,lon:25.3,w:0.3,t:3},{n:'KBP',lat:50.3,lon:30.9,w:0.35,t:3},
        {n:'JNB',lat:-26.1,lon:28.2,w:0.7,t:1},{n:'CPT',lat:-33.9,lon:18.6,w:0.5,t:2},
        {n:'NBO',lat:-1.3,lon:36.9,w:0.45,t:3},{n:'LOS',lat:6.6,lon:3.3,w:0.45,t:3},
        {n:'CAI',lat:30.1,lon:31.4,w:0.5,t:2},{n:'CMN',lat:33.4,lon:-7.6,w:0.4,t:3},
        {n:'ACC',lat:5.6,lon:-0.2,w:0.35,t:3},{n:'TUN',lat:36.8,lon:10.2,w:0.35,t:3},
        {n:'ALG',lat:36.7,lon:3.2,w:0.35,t:3},{n:'DAR',lat:-6.9,lon:39.2,w:0.3,t:3},
        {n:'ADD',lat:9.0,lon:38.8,w:0.3,t:3},{n:'KGL',lat:-1.9,lon:30.1,w:0.3,t:3},
        {n:'DKR',lat:14.7,lon:-17.5,w:0.3,t:3},{n:'ABV',lat:9.0,lon:7.5,w:0.3,t:3},
        {n:'TIP',lat:32.6,lon:13.2,w:0.3,t:3},{n:'DXB',lat:25.3,lon:55.4,w:0.85,t:1},
        {n:'AUH',lat:24.4,lon:54.7,w:0.5,t:2},{n:'TLV',lat:32.0,lon:34.9,w:0.55,t:2},
        {n:'DOH',lat:25.3,lon:51.6,w:0.5,t:2},{n:'RUH',lat:24.7,lon:46.7,w:0.5,t:2},
        {n:'JED',lat:21.7,lon:39.2,w:0.4,t:3},{n:'BAH',lat:26.3,lon:50.6,w:0.4,t:3},
        {n:'KWI',lat:29.2,lon:48.0,w:0.4,t:3},{n:'AMM',lat:31.9,lon:35.9,w:0.4,t:3},
        {n:'BEY',lat:33.8,lon:35.5,w:0.35,t:3},{n:'IKA',lat:35.4,lon:51.2,w:0.4,t:3},
        {n:'BOM',lat:19.1,lon:72.9,w:0.85,t:1},{n:'DEL',lat:28.6,lon:77.1,w:0.7,t:1},
        {n:'BLR',lat:13.0,lon:77.7,w:0.6,t:2},{n:'MAA',lat:13.0,lon:80.2,w:0.5,t:2},
        {n:'HYD',lat:17.4,lon:78.5,w:0.45,t:2},{n:'KHI',lat:24.9,lon:67.2,w:0.4,t:3},
        {n:'CMB',lat:6.9,lon:79.9,w:0.35,t:3},{n:'BKK',lat:13.7,lon:100.8,w:0.6,t:2},
        {n:'KUL',lat:2.7,lon:101.7,w:0.55,t:2},{n:'SIN',lat:1.4,lon:103.9,w:1.0,t:0},
        {n:'CGK',lat:-6.1,lon:106.7,w:0.6,t:1},{n:'MNL',lat:14.5,lon:121.0,w:0.55,t:2},
        {n:'HAN',lat:21.2,lon:105.8,w:0.45,t:3},{n:'SGN',lat:10.8,lon:106.7,w:0.45,t:3},
        {n:'HKG',lat:22.3,lon:113.9,w:0.95,t:0},{n:'TPE',lat:25.1,lon:121.2,w:0.65,t:1},
        {n:'PVG',lat:31.1,lon:121.8,w:0.75,t:1},{n:'PEK',lat:40.1,lon:116.6,w:0.7,t:1},
        {n:'CAN',lat:23.1,lon:113.3,w:0.6,t:1},{n:'ICN',lat:37.5,lon:126.5,w:0.85,t:1},
        {n:'NRT',lat:35.8,lon:140.4,w:0.95,t:0},{n:'KIX',lat:34.4,lon:135.2,w:0.6,t:1},
        {n:'KAN',lat:34.7,lon:135.5,w:0.4,t:3},{n:'OKA',lat:26.2,lon:127.7,w:0.35,t:3},
        {n:'SHA',lat:31.4,lon:121.5,w:0.55,t:2},{n:'SZX',lat:22.6,lon:113.8,w:0.55,t:2},
        {n:'CTU',lat:30.6,lon:104.0,w:0.45,t:3},{n:'ULN',lat:47.9,lon:106.8,w:0.3,t:3},
        {n:'TAS',lat:41.3,lon:69.3,w:0.3,t:3},{n:'ALA',lat:43.3,lon:76.9,w:0.35,t:3},
        {n:'SYD',lat:-33.9,lon:151.2,w:0.85,t:1},{n:'MEL',lat:-37.7,lon:144.8,w:0.65,t:1},
        {n:'BNE',lat:-27.4,lon:153.1,w:0.5,t:2},{n:'PER',lat:-31.9,lon:115.9,w:0.45,t:2},
        {n:'AKL',lat:-37.0,lon:174.8,w:0.55,t:2},{n:'CHC',lat:-43.5,lon:172.5,w:0.4,t:3}
      ];

      const SVG_NS = 'http://www.w3.org/2000/svg';
      const TILT = 15 * Math.PI / 180;
      const CX = 50;
      const CY = 50;
      const R = 38;
      let rafId = 0;
      let rot = 20;
      let last = (window.performance || Date).now();

      const el = (name, attrs) => {
        const n = document.createElementNS(SVG_NS, name);
        if (attrs) Object.keys(attrs).forEach((k) => n.setAttribute(k, attrs[k]));
        return n;
      };

      const project = (lat, lon, rotDeg) => {
        const phi = lat * Math.PI / 180;
        const lam = (lon + rotDeg) * Math.PI / 180;
        const x = Math.cos(phi) * Math.sin(lam);
        const y = -Math.sin(phi);
        const z = Math.cos(phi) * Math.cos(lam);
        const ny = y * Math.cos(TILT) - z * Math.sin(TILT);
        return { x, y: ny, z: y * Math.sin(TILT) + z * Math.cos(TILT) };
      };

      const buildArc = (samples, rotDeg) => {
        const segs = [];
        let cur = '';
        for (let i = 0; i < samples.length; i += 1) {
          const p = project(samples[i].lat, samples[i].lon, rotDeg);
          const px = (CX + R * p.x).toFixed(2);
          const py = (CY + R * p.y).toFixed(2);
          if (p.z > -0.02) {
            cur += (cur ? ' L ' : 'M ') + px + ' ' + py;
          } else if (cur) {
            segs.push(cur);
            cur = '';
          }
        }
        if (cur) segs.push(cur);
        return segs.join(' ');
      };

      const initGlobe = () => {
        svg.innerHTML = '';
        svg.appendChild(el('circle', {
          cx: CX, cy: CY, r: R, fill: '#FFFFFF',
          stroke: 'rgba(11,18,32,0.08)', 'stroke-width': '0.25',
        }));

        const latG = el('g', { fill: 'none', 'stroke-width': '0.12' });
        svg.appendChild(latG);
        const latitudes = [-60, -30, 0, 30, 60];
        const latPaths = latitudes.map((lat) => {
          const p = el('path', {
            stroke: lat === 0 ? 'rgba(11,18,32,0.14)' : 'rgba(11,18,32,0.07)',
            'stroke-width': lat === 0 ? '0.16' : '0.12',
          });
          latG.appendChild(p);
          return { lat, el: p };
        });

        const lonG = el('g', { fill: 'none', stroke: 'rgba(11,18,32,0.07)', 'stroke-width': '0.12' });
        svg.appendChild(lonG);
        const longitudes = [-150, -120, -90, -60, -30, 0, 30, 60, 90, 120, 150, 180];
        const lonPaths = longitudes.map((lon) => {
          const p = el('path');
          lonG.appendChild(p);
          return { lon, el: p };
        });

        const cityNodes = CITIES.map((city, idx) => {
          const w = city.w;
          const dotR = 0.55 + w * 0.85;
          const ringR = 1.6 + w * 2.6;
          const dur = 1.9 + (1 - w) * 1.6;
          const peak = 0.45 + w * 0.5;
          const delay = (idx * 0.17) % dur;
          const tierMult = TIER_OPACITY[city.t] || 0.6;

          const g = el('g', { opacity: '0' });
          svg.appendChild(g);

          const ring = el('circle', {
            cx: CX, cy: CY, r: ringR.toFixed(2),
            fill: 'none', stroke: CORAL, 'stroke-width': '0.28', opacity: '0',
          });
          ring.appendChild(el('animate', {
            attributeName: 'r',
            values: `0.6;${ringR.toFixed(2)};${ringR.toFixed(2)}`,
            dur: `${dur.toFixed(2)}s`,
            begin: `${delay.toFixed(2)}s`,
            repeatCount: 'indefinite',
          }));
          ring.appendChild(el('animate', {
            attributeName: 'opacity',
            values: `${peak.toFixed(2)};0;0`,
            dur: `${dur.toFixed(2)}s`,
            begin: `${delay.toFixed(2)}s`,
            repeatCount: 'indefinite',
          }));
          g.appendChild(ring);

          const dot = el('circle', { cx: CX, cy: CY, r: dotR.toFixed(2), fill: CORAL });
          dot.appendChild(el('animate', {
            attributeName: 'opacity',
            values: `${(0.7 + w * 0.3).toFixed(2)};${(0.35 + w * 0.25).toFixed(2)};${(0.7 + w * 0.3).toFixed(2)}`,
            dur: `${dur.toFixed(2)}s`,
            begin: `${delay.toFixed(2)}s`,
            repeatCount: 'indefinite',
          }));
          g.appendChild(dot);

          return { city, g, ring, dot, tierMult };
        });

        return { latPaths, lonPaths, cityNodes };
      };

      const tickGlobe = (refs, rotDeg) => {
        refs.latPaths.forEach((lp) => {
          const samples = [];
          for (let lon = -180; lon <= 180; lon += 4) samples.push({ lat: lp.lat, lon });
          lp.el.setAttribute('d', buildArc(samples, rotDeg));
        });

        refs.lonPaths.forEach((op) => {
          const samples = [];
          for (let lat = -85; lat <= 85; lat += 3) samples.push({ lat, lon: op.lon });
          op.el.setAttribute('d', buildArc(samples, rotDeg));
        });

        refs.cityNodes.forEach((node) => {
          const p = project(node.city.lat, node.city.lon, rotDeg);
          if (p.z <= -0.05) {
            node.g.setAttribute('opacity', '0');
            return;
          }
          const fade = Math.max(0.35, Math.min(1, p.z + 0.5));
          node.g.setAttribute('opacity', (fade * node.tierMult).toFixed(3));
          const px = (CX + R * p.x).toFixed(2);
          const py = (CY + R * p.y).toFixed(2);
          node.ring.setAttribute('cx', px);
          node.ring.setAttribute('cy', py);
          node.dot.setAttribute('cx', px);
          node.dot.setAttribute('cy', py);
        });
      };

      const refs = initGlobe();
      const frame = (now) => {
        const dt = (now - last) / 1000;
        last = now;
        rot = (rot + dt * 5) % 360;
        tickGlobe(refs, rot);
        rafId = requestAnimationFrame(frame);
      };
      tickGlobe(refs, rot);
      rafId = requestAnimationFrame(frame);

      return () => cancelAnimationFrame(rafId);
    }, []);

    return (
      <div style={{
        background:'#fff',
        border:`1px solid ${HAIR}`,
        borderRadius:16,
        boxShadow:'0 30px 60px rgba(11,18,32,0.06), 0 10px 20px rgba(11,18,32,0.04)',
        overflow:'hidden',
        fontFamily:FONT,
        width:'100%',
      }}>
        <div style={{
          display:'flex', alignItems:'center', justifyContent:'space-between',
          padding:'14px 20px', borderBottom:`1px solid ${HAIR}`,
        }}>
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <span style={{width:8, height:8, borderRadius:999, background:GREEN, boxShadow:'0 0 0 3px rgba(0,202,78,0.14)'}} />
            <span style={{fontSize:13.5, fontWeight:600, color:INK}}>Edge network</span>
          </div>
          <div style={{fontSize:12, color:INK_3, fontWeight:500, display:'inline-flex', alignItems:'center', gap:8}}>
            <span style={{width:6, height:6, borderRadius:999, background:GREEN}} />
            <span>global coverage</span>
          </div>
        </div>
        <div style={{padding:20}}>
        <div style={{
          position:'relative',
          aspectRatio:'1.4 / 1',
          background:`
            radial-gradient(circle at 1px 1px, rgba(11,18,32,0.07) 1px, transparent 1px) 0 0 / 16px 16px,
            radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,106,91,0.08), transparent 70%),
            #FFFFFF
          `,
          borderRadius:10,
          overflow:'hidden',
          display:'flex',
          alignItems:'center',
          justifyContent:'center',
        }}>
            <svg ref={svgRef} viewBox="0 0 100 100" style={{height:'92%', userSelect:'none'}} />
          </div>
        </div>
      </div>
    );
  }

  // =============== DOMAINS / AUTODEPLOY ===============
  function DomainsAutodeploy() {
    return (
      <section style={{background: BG, padding:'120px 28px', fontFamily: FONT}}>
        <div style={{maxWidth: 1200, margin:'0 auto'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80, alignItems:'center'}}>
            <div>
              <Eyebrow>Domains &amp; SSL</Eyebrow>
              <SectionH small>Your domain. Your brand. Always up to date.</SectionH>
              <Lead>
                Connect any custom domain with a few clicks. SSL is provisioned automatically —
                no configuration files, no renewal reminders. Every GitHub push auto-deploys in
                about 30 seconds.
              </Lead>
              <div style={{marginTop: 36}}>
                {[
                  {t:'Custom Domains',      d:'Any domain you own. Connect it in minutes.'},
                  {t:'Automatic SSL',       d:'HTTPS everywhere, always. Zero configuration.'},
                  {t:'Auto-Deploy on Push', d:'Every GitHub push triggers a fresh deploy.'},
                  {t:'~30-second cycles',   d:'From commit to live in the time it takes to switch tabs.'},
                ].map((f,i,arr)=>(
                  <div key={i} style={{
                    display:'grid', gridTemplateColumns:'24px 1fr', gap: 14,
                    padding:'16px 0',
                    borderBottom: i === arr.length-1 ? 'none' : `1px solid ${HAIR}`,
                  }}>
                    <span style={{
                      width: 20, height: 20, borderRadius: 999, background: GREEN,
                      display:'inline-flex', alignItems:'center', justifyContent:'center', marginTop: 1,
                    }}>
                      <svg width="9" height="7" viewBox="0 0 10 8"><path d="M1 4 L4 7 L9 1" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </span>
                    <div>
                      <div style={{fontWeight: 600, fontSize: 15, color: INK}}>{f.t}</div>
                      <div style={{fontSize: 13.5, color: INK_2, marginTop: 2}}>{f.d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <DomainCard/>
          </div>
        </div>
      </section>
    );
  }
  function DomainCard() {
    return (
      <DashCard label="yourdomain.com" rightMeta="SSL · TLS 1.3">
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 0,
          borderRadius: 10, border:`1px solid ${HAIR}`, overflow:'hidden', marginBottom: 18,
        }}>
          {[
            {l:'Status', v:'Healthy',    color: GREEN},
            {l:'SSL',    v:'Active',     color: GREEN},
            {l:'Auto-deploy', v:'On',    color: GREEN},
          ].map((x,i)=>(
            <div key={i} style={{
              padding:'14px 16px', background: SURFACE,
              borderLeft: i === 0 ? 'none' : `1px solid ${HAIR}`,
            }}>
              <div style={{fontSize: 11, color: INK_3, fontWeight: 600,
                letterSpacing:'.06em', textTransform:'uppercase'}}>{x.l}</div>
              <div style={{display:'flex', alignItems:'center', gap: 8, marginTop: 6}}>
                <span style={{width: 7, height: 7, borderRadius: 999, background: x.color}}/>
                <span style={{fontSize: 14, fontWeight: 600, color: INK}}>{x.v}</span>
              </div>
            </div>
          ))}
        </div>
        <div style={{fontSize: 11, fontWeight: 700, letterSpacing:'.08em',
          textTransform:'uppercase', color: INK_3, marginBottom: 10}}>
          Recent deploys
        </div>
        {[
          {h:'4a2f91e', m:'fix: landing copy',    t:'28s ago',  hot: true},
          {h:'a7e1d0c', m:'feat: pricing table',   t:'2h ago'},
          {h:'f21c88b', m:'feat: new hero image',  t:'yesterday'},
          {h:'b03e447', m:'chore: readme update',  t:'2 days ago'},
        ].map((d,i,arr)=>(
          <div key={i} style={{
            display:'flex', alignItems:'center', gap: 14, padding:'12px 0',
            borderBottom: i === arr.length-1 ? 'none' : `1px solid ${HAIR}`,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999,
              background: d.hot ? CORAL : GREEN,
            }}/>
            <span style={{fontFamily: MONO, fontSize: 12, color: INK_3, width: 70}}>{d.h}</span>
            <span style={{flex:1, fontSize: 13.5, color: INK}}>{d.m}</span>
            <span style={{fontSize: 12, color: INK_3, fontFamily: MONO}}>{d.t}</span>
          </div>
        ))}
      </DashCard>
    );
  }

  // =============== PROOF ===============
  function Proof() {
    return (
      <section style={{background: BG_2, padding:'120px 28px', fontFamily: FONT}}>
        <div style={{maxWidth: 1200, margin:'0 auto'}}>
          <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 80, alignItems:'center'}}>
            <div>
              <Eyebrow>What people say</Eyebrow>
              <SectionH small>Trusted by thousands, with award-winning support.</SectionH>
              <blockquote style={{
                fontSize: 22, fontWeight: 500, lineHeight: 1.4,
                color: INK, margin:'36px 0 0', maxWidth: 560,
                paddingLeft: 22, borderLeft:`3px solid ${CORAL}`,
                letterSpacing:'-0.015em',
              }}>
                "Convesio is a great service and the whole team is on point. Issues are solved
                quickly and I typically do not have problems."
              </blockquote>
              <div style={{marginTop: 20, paddingLeft: 24, fontSize: 13, color: INK_2, fontWeight: 500,
                letterSpacing:'.02em'}}>
                — Tom DeBello · Orchid Sun
              </div>
            </div>
            <DashCard label="Customer signals" rightMeta="last 90 days">
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0,
                borderRadius: 10, border:`1px solid ${HAIR}`, overflow:'hidden'}}>
                {[
                  {n:'30s',  l:'Avg deploy time'},
                  {n:'300+', l:'Locations'},
                  {n:'$5',   l:'Per site, per month'},
                  {n:'4.9★', l:'Support satisfaction'},
                ].map((s,i)=>(
                  <div key={i} style={{
                    padding:'22px 20px', background: SURFACE,
                    borderLeft: i % 2 === 0 ? 'none' : `1px solid ${HAIR}`,
                    borderTop:  i >= 2 ? `1px solid ${HAIR}` : 'none',
                  }}>
                    <div style={{fontSize: 32, fontWeight: 700, letterSpacing:'-0.025em'}}>{s.n}</div>
                    <div style={{fontSize: 12.5, color: INK_3, marginTop: 6, fontWeight: 500}}>{s.l}</div>
                  </div>
                ))}
              </div>
            </DashCard>
          </div>
        </div>
      </section>
    );
  }

  // =============== COMPARE ===============
  function Compare() {
    const rows = [
      {l:'Simple enough for non-devs',  c:'yes',    v:'no',  n:'partial', p:'no'},
      {l:'Human support included',       c:'yes',    v:'no',  n:'no',      p:'no'},
      {l:'Commercial use on entry plan', c:'yes',    v:'no',  n:'yes',     p:'yes'},
      {l:'Flat, predictable pricing',   c:'$5/mo',  v:'no',  n:'partial', p:'yes'},
      {l:'No build config or CLI',      c:'yes',    v:'no',  n:'no',      p:'no'},
      {l:'~30-second deploys',           c:'yes',    v:'yes', n:'partial', p:'partial'},
    ];
    const cols = [
      {k:'Convesio', accent: true},
      {k:'Vercel'}, {k:'Netlify'}, {k:'CF Pages'},
    ];
    const mark = (v) => {
      if (v === 'yes')     return <span style={{width:18, height:18, borderRadius:999, background: GREEN, display:'inline-flex', alignItems:'center', justifyContent:'center'}}>
        <svg width="9" height="6" viewBox="0 0 10 8"><path d="M1 4 L4 7 L9 1" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </span>;
      if (v === 'no')      return <span style={{width:14, height:2, background: INK_4, display:'inline-block'}}/>;
      if (v === 'partial') return <span style={{width:18, height:18, borderRadius:999, background:`conic-gradient(${YELLOW} 50%, ${BG_2} 50%)`, border:`1.5px solid ${YELLOW}`, display:'inline-block'}}/>;
      return <span style={{fontFamily: MONO, fontWeight: 700, color: GREEN, fontSize: 13}}>{v}</span>;
    };
    return (
      <section style={{background: BG, padding:'120px 28px', fontFamily: FONT}}>
        <div style={{maxWidth: 1100, margin:'0 auto'}}>
          <div style={{textAlign:'center', marginBottom: 56}}>
            <Eyebrow>Compare</Eyebrow>
            <SectionH small>Built for creators, not just developers.</SectionH>
            <Lead style={{margin:'20px auto 0'}}>
              Other platforms assume you know build minutes, credit systems, and CLI flags.
              We assume you want your site live.
            </Lead>
          </div>
          <DashCard padded={false}>
            <div className="saas-compare-scroll">
            <div style={{display:'grid', gridTemplateColumns:'2.4fr repeat(4, 1fr)',
              padding:'18px 24px', alignItems:'center', borderBottom:`1px solid ${HAIR}`,
              background: BG_2,
            }}>
              <div style={{fontSize: 12, fontWeight: 700, letterSpacing:'.06em',
                textTransform:'uppercase', color: INK_3}}>Capability</div>
              {cols.map(c=>(
                <div key={c.k} style={{
                  textAlign:'center', fontSize: 13, fontWeight: 700,
                  color: c.accent ? CORAL : INK,
                  letterSpacing:'-0.01em',
                }}>{c.k}</div>
              ))}
            </div>
            {rows.map((r,i)=>(
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'2.4fr repeat(4, 1fr)',
                padding:'18px 24px', alignItems:'center',
                borderBottom: i === rows.length-1 ? 'none' : `1px solid ${HAIR}`,
              }}>
                <div style={{fontSize: 14.5, color: INK, fontWeight: 500}}>{r.l}</div>
                <div style={{textAlign:'center'}}>{mark(r.c)}</div>
                <div style={{textAlign:'center'}}>{mark(r.v)}</div>
                <div style={{textAlign:'center'}}>{mark(r.n)}</div>
                <div style={{textAlign:'center'}}>{mark(r.p)}</div>
              </div>
            ))}
            </div>
          </DashCard>
        </div>
      </section>
    );
  }

  // =============== SUPPORT ===============
  function Support() {
    const pillars = [
      {t:'Simple Onboarding', d:'We\'ll walk you through your first deploy — no terminal, no stress.', k:'✦'},
      {t:'24/7 Live Chat',          d:'Real engineers in about 90 seconds. No ticket queues.',              k:'●'},
      {t:'Expert Troubleshooting',  d:'Talk to a human who knows your setup — and cares about fixing it.',  k:'★'},
    ];
    return (
      <section style={{background: BG_2, padding:'120px 28px', fontFamily: FONT}}>
        <div style={{maxWidth: 1200, margin:'0 auto'}}>
          <div style={{textAlign:'center', maxWidth: 720, margin:'0 auto 56px'}}>
            <Eyebrow>Support</Eyebrow>
            <SectionH small>Real support. From real humans.</SectionH>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 20}}>
            {pillars.map((p,i)=>(
              <div key={i} style={{
                background: SURFACE, borderRadius: 14, border:`1px solid ${HAIR}`,
                padding:'32px 28px', boxShadow:'0 1px 2px rgba(11,18,32,0.03)',
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10,
                  background: CORAL, color:'#fff',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize: 18, fontWeight: 700, marginBottom: 22,
                }}>{p.k}</div>
                <h3 style={{fontSize: 19, fontWeight: 600, margin:'0 0 10px',
                  letterSpacing:'-0.015em'}}>{p.t}</h3>
                <p style={{fontSize: 14.5, lineHeight: 1.6, color: INK_2, margin: 0}}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // =============== PRICING ===============
  function Pricing() {
    const features = [
      'Global edge deployment (300+ locations)',
      'Custom domain + automatic SSL',
      'Auto-deploy from GitHub on every push',
      'Cloudflare Analytics included',
      'Enterprise-grade DDoS protection',
      'Human support from real experts',
    ];
    return (
      <section id="pricing" style={{background: BG, padding:'96px 28px', fontFamily: FONT}}>
        <div style={{maxWidth: 560, margin:'0 auto', textAlign:'center'}}>
          <Eyebrow>Pricing</Eyebrow>
          <SectionH small>Simple pricing. No surprises.</SectionH>
          <Lead style={{margin:'16px auto 0', fontSize: 16}}>
            $5 per site. That's the whole pricing page.
          </Lead>
          <div style={{
            marginTop: 40, borderRadius: 18, position:'relative',
            background:`
              radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,106,91,0.10), transparent 70%),
              linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%)
            `,
            border:`1px solid ${HAIR_2}`,
            padding:'36px 32px 28px',
            boxShadow:'0 24px 48px rgba(11,18,32,0.08), 0 4px 12px rgba(11,18,32,0.04), inset 0 1px 0 rgba(255,255,255,0.8)',
            textAlign:'center',
          }}>
            <div style={{
              display:'inline-flex', alignItems:'center', gap: 8,
              padding:'4px 10px 4px 8px', borderRadius: 999,
              background:'rgba(255,106,91,0.10)', color: CORAL,
              fontSize: 11, fontWeight: 700, letterSpacing:'.08em', textTransform:'uppercase',
              marginBottom: 18,
            }}>
              <span style={{width: 6, height: 6, borderRadius: 999, background: CORAL}}/>
              Early beta
            </div>
            <div style={{display:'flex', alignItems:'flex-start', justifyContent:'center',
              gap: 4, marginBottom: 4}}>
              <span style={{fontSize: 26, fontWeight: 600, color: INK, marginTop: 14}}>$</span>
              <span style={{fontSize: 104, fontWeight: 700, letterSpacing:'-0.05em',
                lineHeight: 0.9, color: INK,
                background:`linear-gradient(180deg, ${INK} 0%, #2A3547 100%)`,
                WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent',
                backgroundClip:'text',
              }}>5</span>
              <span style={{fontSize: 14, color: INK_3, marginTop: 18, marginLeft: 6,
                fontWeight: 500}}>/ site<br/>/ month</span>
            </div>
            <div style={{height: 1, background: HAIR, margin:'26px -32px 22px'}}/>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr',
              rowGap: 10, columnGap: 20, marginBottom: 24, textAlign:'left'}}>
              {features.map((f,i)=>(
                <div key={i} style={{display:'flex', gap: 10, alignItems:'center'}}>
                  <span style={{
                    width: 14, height: 14, borderRadius: 999, background: GREEN,
                    display:'inline-flex', alignItems:'center', justifyContent:'center', flexShrink: 0,
                  }}>
                    <svg width="7" height="5" viewBox="0 0 10 8"><path d="M1 4 L4 7 L9 1" stroke="#fff" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </span>
                  <span style={{fontSize: 13, fontWeight: 500, color: INK, lineHeight: 1.3}}>{f}</span>
                </div>
              ))}
            </div>
            <div style={{display:'flex', gap: 10, justifyContent:'center', flexWrap:'wrap'}}>
              <PrimaryBtn href={REGISTER_URL}>Deploy your first site</PrimaryBtn>
              <GhostBtn href={CONSULT_URL}>Talk to us</GhostBtn>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // =============== FAQ ===============
  function Faq() {
    const [open, setOpen] = React.useState(0);
    const faqs = [
      {q:'What is Convesio Static Pages?', a:'Convesio Static Pages is a static site hosting platform built on Cloudflare Workers. Connect your GitHub repository, and we deploy your site to a global edge network in about 30 seconds.'},
      {q:'What is vibe coding?', a:'Vibe coding is a new approach where you describe what you want in natural language and AI tools generate the code. Lovable, Replit, Bolt.new, and Cursor have made it possible for anyone to create a professional website in minutes.'},
      {q:'How fast does my site deploy?', a:'About 30 seconds from the moment you push to GitHub. Every subsequent push auto-deploys in roughly the same time. No manual steps.'},
      {q:'Can I use my own custom domain?', a:'Absolutely. Connect any domain you own, and we provision SSL certificates automatically. Your site is accessible via HTTPS from the moment it goes live.'},
      {q:'Is there a free tier?', a:'No — and here\'s why that\'s actually better for you. Free tiers come with real trade-offs: no human support, restrictions on commercial use, or usage-based billing that surprises you.'},
      {q:'Do I need to be a developer?', a:'No. If you can push code to GitHub — and tools like Lovable and Replit help you do exactly that — you can deploy on Convesio.'},
      {q:'What kinds of sites can I host?', a:'Any static site — HTML, CSS, JavaScript, and static assets. React (Vite), Next.js static exports, Vue, Svelte, Astro, Hugo, Jekyll, Gatsby, plain HTML, and anything generated by AI coding tools.'},
    ];
    return (
      <section style={{background: BG_2, padding:'120px 28px', fontFamily: FONT}}>
        <div style={{maxWidth: 1100, margin:'0 auto'}}>
          <div style={{display:'grid', gridTemplateColumns:'340px 1fr', gap: 80, alignItems:'start'}}>
            <div style={{position:'sticky', top: 120}}>
              <Eyebrow>FAQ</Eyebrow>
              <SectionH small>Frequently asked questions.</SectionH>
              <p style={{fontSize: 14.5, color: INK_2, lineHeight: 1.6, margin:'20px 0 22px'}}>
                Can't find what you're looking for? Our team is a click away.
              </p>
              <a href="https://convesio.com/support/" target="_blank" rel="noopener noreferrer" style={{color: CORAL, fontSize: 14.5, fontWeight: 600, cursor:'pointer', textDecoration:'none'}}>
                Contact support →
              </a>
            </div>
            <DashCard padded={false}>
              {faqs.map((f,i)=>{
                const isOpen = open === i;
                return (
                  <div key={i} style={{borderBottom: i === faqs.length-1 ? 'none' : `1px solid ${HAIR}`}}>
                    <button onClick={()=> setOpen(isOpen ? -1 : i)} style={{
                      width:'100%', textAlign:'left', background:'transparent', border:'none',
                      padding:'20px 24px', cursor:'pointer',
                      display:'flex', alignItems:'center', justifyContent:'space-between', gap: 20,
                      fontFamily: FONT,
                    }}>
                      <span style={{display:'flex', alignItems:'baseline', gap: 16}}>
                        <span style={{fontFamily: MONO, fontSize: 11, color: INK_3,
                          fontWeight: 700, width: 28}}>
                          {String(i+1).padStart(2,'0')}
                        </span>
                        <span style={{fontSize: 16, fontWeight: 600, color: INK,
                          letterSpacing:'-0.01em'}}>{f.q}</span>
                      </span>
                      <span style={{
                        width: 24, height: 24, borderRadius: 6,
                        background: isOpen ? INK : BG_2,
                        color: isOpen ? '#fff' : INK_3,
                        display:'inline-flex', alignItems:'center', justifyContent:'center',
                        transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                        transition:'transform 220ms, all 220ms', flexShrink: 0,
                      }}>
                        <svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1 V11 M1 6 H11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                      </span>
                    </button>
                    <div style={{maxHeight: isOpen ? 400 : 0, overflow:'hidden',
                      transition:'max-height 320ms cubic-bezier(.2,.6,.2,1)'}}>
                      <p style={{padding:'0 24px 20px 68px', fontSize: 14.5, lineHeight: 1.65,
                        color: INK_2, margin: 0}}>{f.a}</p>
                    </div>
                  </div>
                );
              })}
            </DashCard>
          </div>
        </div>
      </section>
    );
  }

  // =============== FINAL CTA ===============
  function FinalCta() {
    return (
      <section style={{background: BG, padding:'160px 28px', fontFamily: FONT,
        textAlign:'center', position:'relative', overflow:'hidden',
      }}>
        <style>{`
          /* Gentle pulse — slow, steady breathing. */
          @keyframes saasHeartbeat {
            0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.80; }
            50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1;    }
          }
          @keyframes saasHeartbeatOuter {
            0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.30; }
            50%      { transform: translate(-50%, -50%) scale(1.10); opacity: 0.50; }
          }
          /* Radiating rings — expand outward and fade */
          @keyframes saasRing {
            0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
            10%  { opacity: 0.45; }
            100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
          }
          @media (prefers-reduced-motion: reduce) {
            .saas-heart-inner, .saas-heart-outer, .saas-ring { animation: none !important; }
          }
        `}</style>
        {/* Outer aura — softer, wider, lags slightly */}
        <div aria-hidden className="saas-heart-outer" style={{
          position:'absolute', top:'50%', left:'50%',
          width: 1100, height: 1100, borderRadius: 999,
          background:`radial-gradient(circle, rgba(255,106,91,0.07), transparent 65%)`,
          pointerEvents:'none', filter:'blur(30px)',
          animation:'saasHeartbeatOuter 5s ease-in-out infinite',
          animationDelay:'400ms',
          willChange:'transform, opacity',
        }}/>
        {/* Inner core — tighter, stronger, leads */}
        <div aria-hidden className="saas-heart-inner" style={{
          position:'absolute', top:'50%', left:'50%',
          width: 800, height: 800, borderRadius: 999,
          background:`radial-gradient(circle, rgba(255,106,91,0.14), rgba(255,106,91,0.05) 40%, transparent 62%)`,
          pointerEvents:'none', filter:'blur(20px)',
          animation:'saasHeartbeat 5s ease-in-out infinite',
          willChange:'transform, opacity',
        }}/>
        {/* Radiating rings — three staggered circles expanding outward */}
        {[0, 1.67, 3.34].map((delay, i) => (
          <div key={i} aria-hidden className="saas-ring" style={{
            position:'absolute', top:'50%', left:'50%',
            width: 420, height: 420, borderRadius: 999,
            border:'1px solid rgba(255,106,91,0.35)',
            pointerEvents:'none',
            animation:`saasRing 5s ease-out infinite`,
            animationDelay:`${delay}s`,
            willChange:'transform, opacity',
          }}/>
        ))}
        <div style={{maxWidth: 760, margin:'0 auto', position:'relative'}}>
          <Eyebrow>Ready to ship</Eyebrow>
          <h2 style={{
            fontSize:'clamp(48px, 5.6vw, 80px)', fontWeight: 700,
            letterSpacing:'-0.035em', lineHeight: 1.02,
            color: INK, margin:'20px 0 0', textWrap:'balance',
          }}>Your site deserves to be live.</h2>
          <Lead style={{margin:'24px auto 0'}}>
            Deploy to the world's largest edge network in 30 seconds — with a team behind you every step.
          </Lead>
          <div style={{marginTop: 38, display:'flex', gap: 14, justifyContent:'center', flexWrap:'wrap'}}>
            <PrimaryBtn href={REGISTER_URL}>Get started →</PrimaryBtn>
            <GhostBtn href={DEMO_URL}>Watch the demo</GhostBtn>
          </div>
        </div>
      </section>
    );
  }

  // =============== FOOTER ===============
  function Footer() {
    return (
      <footer style={{background: INK, color:'rgba(255,255,255,0.72)',
        padding:'28px', fontFamily: FONT}}>
        <div style={{maxWidth: 1200, margin:'0 auto',
          display:'flex', justifyContent:'space-between', alignItems:'center',
          fontSize: 12, color:'rgba(255,255,255,0.52)', flexWrap:'wrap', gap: 12,
        }}>
          <span>© 2026 Convesio, Inc.</span>
          <div style={{display:'flex', gap: 20}}>
            <a href="https://convesio.com/privacy-policy/" target="_blank" rel="noopener noreferrer" style={{color:'inherit', cursor:'pointer', textDecoration:'none'}}>Privacy</a>
            <a href="https://convesio.com/terms-of-service/" target="_blank" rel="noopener noreferrer" style={{color:'inherit', cursor:'pointer', textDecoration:'none'}}>Terms</a>
            <a href="https://status.convesio.com" target="_blank" rel="noopener noreferrer" style={{color:'inherit', cursor:'pointer', textDecoration:'none'}}>Status</a>
          </div>
        </div>
      </footer>
    );
  }

  // Expose
  window.SaaSNav = Nav;
  window.SaaSHero = Hero;
  window.SaaSHeroDashCard = HeroDashCard;
  window.SaaSWhatIs = WhatIs;
  window.SaaSHowItWorks = HowItWorks;
  window.SaaSVibeCoding = VibeCoding;
  window.SaaSEdgePerf = EdgePerf;
  window.SaaSDomainsAutodeploy = DomainsAutodeploy;
  window.SaaSProof = Proof;
  window.SaaSCompare = Compare;
  window.SaaSSupport = Support;
  window.SaaSPricing = Pricing;
  window.SaaSFaq = Faq;
  window.SaaSFinalCta = FinalCta;
  window.SaaSFooter = Footer;
})();

// Wire hero dashboard card (separate because Hero uses it inline)
(function wireHeroCard() {
  const origHero = window.SaaSHero;
  // Replace the DashCard slot by creating a wrapper that injects HeroDashCard.
  // (In the source above, Hero calls <DashCard/> directly; we name-collide via IIFE scoping.)
})();