function VoiceSection() {
  return (
    <section id="voice" data-screen-label="05 Voice">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>05</b> &nbsp;/&nbsp; Voice</div>
          <div>
            <h2 className="h1">How we sound.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              Crafted, technical, energetic — and never trying too hard. We talk like engineers who actually like the craft, not consultants reading a deck.
            </p>
          </div>
        </div>

        <div className="voice-grid">
          <div className="voice-card">
            <div className="eyebrow">// 01</div>
            <h4>Direct, not blunt.</h4>
            <p className="ex">Say what we do. Skip the hedge words.</p>
            <div className="we">we say</div>
            <p className="ex">"We build the website. You ship the product."</p>
            <div className="not">we don't say</div>
            <p className="ex bad">"We leverage best-in-class engineering to drive digital transformation outcomes."</p>
          </div>

          <div className="voice-card">
            <div className="eyebrow">// 02</div>
            <h4>Technical when it matters.</h4>
            <p className="ex">A mono-font phrase, a real metric, a real tradeoff. Earn trust by knowing things.</p>
            <div className="we">we say</div>
            <p className="ex"><span className="mono" style={{ fontSize: 13, background: 'var(--paper-2)', padding: '1px 6px', borderRadius: 4 }}>p95 &lt; 200ms</span> on a Shopify theme that used to load in 4s.</p>
            <div className="not">we don't say</div>
            <p className="ex bad">"We made the website really fast and snappy for end users!"</p>
          </div>

          <div className="voice-card">
            <div className="eyebrow">// 03</div>
            <h4>Warm, not corporate.</h4>
            <p className="ex">Boolland is a small team that takes pride. Sound like it.</p>
            <div className="we">we say</div>
            <p className="ex">"Tell us what's broken. We'll bring coffee and a plan."</p>
            <div className="not">we don't say</div>
            <p className="ex bad">"Submit your inquiry and a representative will be in touch within 1–2 business days."</p>
          </div>
        </div>

        {/* Headline patterns */}
        <div style={{ marginTop: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>// signature lines</div>
          <div className="grid-2">
            <div style={{
              borderRadius: 22,
              padding: 40,
              position: 'relative',
              overflow: 'hidden',
              isolation: 'isolate',
              minHeight: 280,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              background: 'radial-gradient(at 18% 22%, rgba(91,108,255,0.85) 0%, transparent 55%), radial-gradient(at 80% 82%, rgba(54,69,211,0.7) 0%, transparent 50%), linear-gradient(135deg, #0a1657, #000945)',
              color: '#fafaf7',
            }}>
              <div className="mono" style={{ fontSize: 11, opacity: 0.55, letterSpacing: '0.14em', textTransform: 'uppercase' }}>tagline · primary</div>
              <div style={{
                background: 'rgba(250, 250, 247, 0.12)',
                backdropFilter: 'blur(18px) saturate(180%)',
                WebkitBackdropFilter: 'blur(18px) saturate(180%)',
                border: '1px solid rgba(250, 250, 247, 0.2)',
                borderRadius: 16,
                padding: '22px 26px',
                boxShadow: '0 20px 40px -16px rgba(0,9,69,0.4)',
              }}>
                <div style={{ fontSize: 'clamp(28px, 4vw, 48px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, color: '#fafaf7' }}>
                  We code your <span style={{ color: '#5b6cff' }}>vision.</span>
                </div>
              </div>
              <div className="mono" style={{ fontSize: 12, opacity: 0.6 }}>// keep this. it's earned.</div>
            </div>

            <div style={{
              borderRadius: 22,
              padding: 40,
              position: 'relative',
              overflow: 'hidden',
              isolation: 'isolate',
              minHeight: 280,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              background: 'radial-gradient(at 70% 30%, #ffd4a3 0%, transparent 55%), radial-gradient(at 25% 75%, #ffb47e 0%, transparent 50%), linear-gradient(180deg, #fff1dd, #f1d9b0)',
              color: '#000945',
            }}>
              <div className="mono" style={{ fontSize: 11, opacity: 0.55, letterSpacing: '0.14em', textTransform: 'uppercase' }}>tagline · secondary</div>
              <div style={{
                background: 'rgba(250, 250, 247, 0.55)',
                backdropFilter: 'blur(18px) saturate(180%)',
                WebkitBackdropFilter: 'blur(18px) saturate(180%)',
                border: '1px solid rgba(250, 250, 247, 0.55)',
                borderRadius: 16,
                padding: '22px 26px',
                boxShadow: '0 20px 40px -16px rgba(0,9,69,0.2)',
              }}>
                <div style={{ fontSize: 'clamp(28px, 4vw, 48px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, color: '#000945' }}>
                  Where logic<br/>becomes a <span style={{ color: '#3645d3' }}>place.</span>
                </div>
              </div>
              <div className="mono" style={{ fontSize: 12, opacity: 0.55 }}>// for brand, decks, the about page.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.VoiceSection = VoiceSection;