function CTA() {
  return (
    <>
    <section id="cta" className="pad-y-xl" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="wrap">
        <Reveal>
          <div className="glass-strong cta-card" style={{
            padding: '80px 56px', textAlign: 'center', position: 'relative', overflow: 'hidden',
          }}>
            <div aria-hidden style={{
              position: 'absolute', inset: 0, zIndex: -1,
              background:
                'radial-gradient(50% 60% at 30% 30%, rgba(167,139,250,0.4), transparent 70%),' +
                'radial-gradient(50% 60% at 80% 70%, rgba(236,72,153,0.3), transparent 70%)',
            }}/>

            <h2 className="display cta-title" style={{ fontSize: 'clamp(48px, 7vw, 96px)', margin: '0 auto 20px', maxWidth: '14ch', textAlign: 'center' }}>
              Привычный трекер. <span style={{
                background: 'linear-gradient(120deg, var(--violet) 30%, var(--pink) 100%)',
                WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
              }}>Непривычно глубокие выводы.</span>
            </h2>
            <p className="lede cta-lede" style={{ margin: '0 auto 40px', textAlign: 'center' }}>
              <span className="cta-lede-desktop">Пробный период без авто-списаний.</span>
              <span className="cta-lede-mobile">Пробный период без<br/>авто-списаний.</span>
              <br/>Уйдёшь — Миникорн помашет копытцем, но будет ждать ^^
            </p>

            <div className="cta-stores" style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 28 }}>
              <span className="btn ghost cta-store" style={{ height: 56, padding: '0 24px', fontSize: 15, cursor: 'default' }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 12.5c0-2.6 2.1-3.8 2.2-3.9-1.2-1.7-3-2-3.7-2-1.6-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.9-1.7 0-3.3 1-4.2 2.5-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.5 1.3-.1 1.8-.8 3.3-.8 1.5 0 2 .8 3.3.8 1.4 0 2.3-1.2 3.1-2.4.7-1 1.1-2.1 1.5-3.2-1.6-.6-3-2.4-2.9-4.7zM14.2 4.4c.7-.9 1.2-2.1 1.1-3.4-1 .1-2.3.7-3 1.6-.7.8-1.3 2-1.1 3.2 1.1.1 2.3-.5 3-1.4z"/></svg>
                App Store
              </span>
              <span className="btn ghost cta-store" style={{ height: 56, padding: '0 24px', fontSize: 15, cursor: 'default' }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 1.5c-.4.4-.6 1-.6 1.7v17.6c0 .7.2 1.3.6 1.7l9.6-10.5L3.6 1.5zm10.7 9.5L17 13.7l3.5-1.9c1-.5 1-1.7 0-2.2L17 7.7l-2.7 3.3zm-1 1l-9.4 10.3c.4.1.9 0 1.4-.3l11-6L13.3 12zm0-2l2.7-3.3-11-6c-.5-.3-1-.4-1.4-.3L13.3 10z"/></svg>
                Google Play
              </span>
            </div>

            <div style={{ display: 'flex', justifyContent: 'center', gap: 32, flexWrap: 'wrap', fontSize: 13, color: 'var(--ink-3)' }}>
              {['7 дней бесплатно', 'Полный функционал', 'Отмена в один тап'].map((x, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7l3 3 7-7" stroke="var(--violet)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  {x}
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        .cta-lede-mobile { display: none; }
        .cta-lede-desktop { display: inline; }
        @media (max-width: 880px){
          .cta-card { padding: 56px 20px !important; }
          .cta-title { max-width: none !important; }
          .cta-lede-mobile { display: inline; }
          .cta-lede-desktop { display: none; }
          .cta-stores { flex-wrap: nowrap !important; gap: 10px !important; }
          .cta-stores .cta-store {
            height: 44px !important;
            padding: 0 14px !important;
            font-size: 13px !important;
            flex: 1 1 0;
            min-width: 0;
            justify-content: center;
          }
          .cta-stores .cta-store svg { width: 14px; height: 14px; }
        }
      `}</style>
    </section>
    </>
  );
}
window.CTA = CTA;