function StorySection() {
  return (
    <section id="story" data-screen-label="01 Story">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>01</b> &nbsp;/&nbsp; Story</div>
          <div>
            <h2 className="h1">A name that means<br/>something.</h2>
          </div>
        </div>

        <div className="story-grid">
          <div className="etymology">
            <div>
              <div style={{ fontFamily: 'Roboto Mono, monospace', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(250,250,247,0.65)', marginBottom: 24 }}>// etymology</div>
              <div className="word">
                <span className="bool">bool</span><span className="land">land</span>
              </div>
            </div>
            <div className="breakdown">
              <div>
                <b>bool</b>
                from <span style={{ color: '#c7d4ff' }}>boolean</span> — true / false, on / off, the atom of every program ever written.
              </div>
              <div>
                <b>land</b>
                a <span style={{ color: '#c7d4ff' }}>place</span> — somewhere you arrive, build, and stay. A territory you own.
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="principle">
              <div className="num">// 01</div>
              <h3>We turn logic into places.</h3>
              <p>Every project is a small piece of land we help our clients claim in the digital world. Websites, mobile apps, bespoke systems — habitable, useful, theirs.</p>
            </div>
            <div className="principle">
              <div className="num">// 02</div>
              <h3>Crafted, not assembled.</h3>
              <p>We're a software house, not a template factory. Bespoke means we sweat the details — the hover state, the empty state, the migration script.</p>
            </div>
            <div className="principle">
              <div className="num">// 03</div>
              <h3>Pragmatic, not precious.</h3>
              <p>Real engineers, real timelines, real handovers. We ship things that survive contact with the actual business.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.StorySection = StorySection;