---
---

<section id="mission" class="section relative overflow-hidden">
  <!-- Halo background -->
  <div
    aria-hidden="true"
    class="pointer-events-none absolute inset-0 -z-10 opacity-60"
    style="background: radial-gradient(ellipse at 20% 30%, rgba(56,189,248,0.15), transparent 55%), radial-gradient(ellipse at 85% 70%, rgba(6,182,212,0.12), transparent 55%);"
  ></div>

  <div class="container-narrow">
    <div class="section-title-block">
      <span class="eyebrow">Mission</span>
      <h2 class="h-section mt-4">
        D'une station côtière à un grand réseau de mesure.
      </h2>
      <p class="lead mt-6">
        Rendre accessibles des données multi-paramètres, géolocalisées et horodatées,
        sur des zones entières plutôt que des points
        isolés. À terme, sur l'ensemble des zones côtières et fluviales de France, voire
        d'Europe.
      </p>
    </div>

    <div class="mt-12 grid gap-6 md:grid-cols-2">
      <div class="card h-full">
        <div class="flex items-center gap-3">
          <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-tide-500/15 text-tide-400 ring-1 ring-tide-400/30">
            <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <circle cx="12" cy="12" r="9"/>
              <circle cx="12" cy="12" r="4"/>
              <path d="M3 12h2M19 12h2M12 3v2M12 19v2"/>
            </svg>
          </span>
          <h3 class="font-display text-xl font-semibold text-foam-50">Couvrir, pas juste surveiller</h3>
        </div>
        <p class="mt-4 text-sm leading-relaxed text-foam-100/80">
          Les politiques publiques de préservation, la conformité réglementaire et la
          recherche ont toutes le même angle mort : la plupart des données disponibles
          sont <em>ponctuelles</em> : quelques stations de référence, des campagnes
          dispersées. NowYouSea vise la couverture
          continue de zones entières, pas seulement la mesure ponctuelle.
        </p>
      </div>

      <div class="card h-full">
        <div class="flex items-center gap-3">
          <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-lagoon-500/15 text-lagoon-400 ring-1 ring-lagoon-400/30">
            <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M12 3v4M12 17v4M5 12H3M21 12h-2M6 6l-1.5-1.5M19.5 19.5L18 18M6 18l-1.5 1.5M19.5 4.5L18 6"/>
              <circle cx="12" cy="12" r="4"/>
            </svg>
          </span>
          <h3 class="font-display text-xl font-semibold text-foam-50">Un socle pensé pour le passage à l'échelle</h3>
        </div>
        <p class="mt-4 text-sm leading-relaxed text-foam-100/80">
          La solution s'appuie sur des systèmes embarqués légers, à très faible
          consommation et autonomes en énergie. Cela permet de s'affranchir de toute
          contrainte de raccordement, de déployer
          rapidement sur n'importe quelle zone, et de maintenir un coût
          unitaire suffisamment bas pour rendre la couverture à grande échelle
          réaliste.
        </p>
      </div>
    </div>

    <!-- Key figures / qualitative markers -->
    <div class="mt-10 grid gap-4 sm:grid-cols-3">
      <div class="rounded-xl border border-white/5 bg-white/[0.02] px-5 py-4 text-center">
        <div class="font-display text-2xl font-semibold text-tide-300">Zones entières</div>
        <div class="mt-1 text-xs uppercase tracking-wider text-foam-100/55">vs. points isolés</div>
      </div>
      <div class="rounded-xl border border-white/5 bg-white/[0.02] px-5 py-4 text-center">
        <div class="font-display text-2xl font-semibold text-lagoon-300">Déploiement rapide</div>
        <div class="mt-1 text-xs uppercase tracking-wider text-foam-100/55">aucun raccordement</div>
      </div>
      <div class="rounded-xl border border-white/5 bg-white/[0.02] px-5 py-4 text-center">
        <div class="font-display text-2xl font-semibold text-foam-100">Coût maîtrisé</div>
        <div class="mt-1 text-xs uppercase tracking-wider text-foam-100/55">passage à l'échelle réaliste</div>
      </div>
    </div>
  </div>
</section>