{{-- HERO — section d'accroche --}}
<section class="hero">
  <div class="wrap hero-grid">
    <div>
      <span class="kicker rv">Infogérance · Toulouse · depuis 2010</span>
      <h1 class="disp rv" style="margin-top:18px">Votre informatique, gérée
        <span class="mark">avec soin
          <svg class="squig" viewBox="0 0 220 18" preserveAspectRatio="none"><path d="M3 12 C 55 4 90 4 130 9 S 200 14 217 7" fill="none" stroke="var(--paprika)" stroke-width="5" stroke-linecap="round"/></svg>
        </span>.
      </h1>
      <p class="lead rv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Données, réseau, emails et télétravail réunis chez un seul interlocuteur.</p>
      <div class="hero-cta rv">
        <a class="btn-soft" href="#contact">Parler à un expert <span class="a">→</span></a>
        <a class="btn-text" href="#services">Découvrir nos services <span class="a">↓</span></a>
      </div>
    </div>
    <div class="hero-visual rv">
      <div class="hero-blob blob">
        <x-logo />
      </div>
      <div class="accent-blob blob"></div>
      <div class="chip c1x"><span class="d blu"></span>Données en France</div>
      <div class="chip c2x"><span class="d org"></span>Support réactif</div>
    </div>
  </div>
</section>