function About() {
  return (
    <section className="about" id="sobre">
      <div className="about__inner">
        <div className="about__portrait-wrap">
          <img src="assets/founder-portrait.png" alt="Fundador 8BAC" className="about__portrait"/>
        </div>
        <div className="about__text">
          <div className="section-eyebrow">QUEM TÁ POR TRÁS</div>
          <h2 className="about__h2">
            Não vendo fórmula. <span style={{ color: 'var(--bac-blue)' }}>Ensino estrutura.</span>
          </h2>
          <p className="about__p">
            Estou no digital desde 2017. Trabalhei nos bastidores de grandes
            lançamentos no Brasil e fora, em agências e operações que
            faturaram milhões. Vi o jogo por dentro: o que vende é estrutura,
            não brilho.
          </p>
          <p className="about__p">
            Em 2025 decidi parar de fazer pelos outros e montar a própria estrutura.
            A 8BAC nasceu disso — método claro, sem hype, pra você organizar o
            bastidor antes de colocar dinheiro em tráfego.
          </p>
          <div className="about__bullets">
            <div className="about__bullet">
              <span className="about__bnum">+8 anos</span>
              <span className="about__blabel">No digital, desde 2017</span>
            </div>
            <div className="about__bullet">
              <span className="about__bnum">Bastidor</span>
              <span className="about__blabel">DE GRANDES EMPRESAS</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .about { background: #fff; }
        .about__inner {
          max-width: 1100px; margin: 0 auto;
          padding: 64px 20px;
          display: flex; flex-direction: column; gap: 36px;
        }
        .about__portrait-wrap { width: 100%; max-width: 360px; margin: 0 auto; }
        .about__portrait {
          width: 100%; aspect-ratio: 1 / 1;
          border-radius: 16px; object-fit: cover; display: block;
          box-shadow: var(--sh-3);
        }
        .about__h2 {
          font-family: var(--font-display); font-weight: 900;
          font-size: clamp(28px, 7vw, 48px); line-height: 1.08;
          letter-spacing: -0.025em; color: var(--ink-1); margin: 0;
        }
        .about__p {
          font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
          color: var(--ink-2); margin: 18px 0 0 0;
        }
        .about__bullets {
          margin-top: 28px; display: grid;
          grid-template-columns: 1fr 1fr; gap: 12px;
        }
        .about__bullet {
          display: flex; flex-direction: column; gap: 4px;
          padding: 16px; border: 1px solid var(--line);
          border-radius: 10px; background: var(--bg-alt);
        }
        .about__bnum {
          font-family: var(--font-display); font-weight: 900;
          font-size: 24px; color: var(--bac-navy);
          letter-spacing: -0.02em; line-height: 1;
        }
        .about__blabel {
          font-family: var(--font-mono); font-size: 10px; font-weight: 600;
          letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
        }
        @media (min-width: 860px) {
          .about__inner {
            flex-direction: row; align-items: center;
            gap: clamp(40px, 6vw, 72px); padding: 96px 24px;
          }
          .about__portrait-wrap { flex: 0.9; max-width: 420px; margin: 0; }
          .about__text { flex: 1.2; }
          .about__p { font-size: 17px; }
          .about__bnum { font-size: 28px; }
          .about__blabel { font-size: 11px; }
        }
      `}</style>
    </section>
  );
}