---
---

<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>

    <!-- Value props -->
    <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <div class="rounded-xl border border-white/[0.10] bg-white/[0.04] px-5 py-4">
        <div class="font-display text-base font-semibold text-tide-300">Côtes et cours d'eau intérieurs</div>
        <div class="mt-1 text-xs text-foam-100/60">Fleuves, rivières, zones estuariennes — un seul réseau pour tout surveiller.</div>
      </div>
      <div class="rounded-xl border border-white/[0.10] bg-white/[0.04] px-5 py-4">
        <div class="font-display text-base font-semibold text-tide-300">De la donnée simulée à la donnée réelle</div>
        <div class="mt-1 text-xs text-foam-100/60">Remplacer les modèles et les extrapolations par des mesures terrain continues.</div>
      </div>
      <div class="rounded-xl border border-white/[0.10] bg-white/[0.04] px-5 py-4">
        <div class="font-display text-base font-semibold text-lagoon-300">Du prélèvement ponctuel au monitoring continu</div>
        <div class="mt-1 text-xs text-foam-100/60">Données 24h/24, pas seulement au moment des campagnes terrain.</div>
      </div>
      <div class="rounded-xl border border-white/[0.10] bg-white/[0.04] px-5 py-4">
        <div class="font-display text-base font-semibold text-lagoon-300">Ouvert à l'intégration de partenaires</div>
        <div class="mt-1 text-xs text-foam-100/60">Compatible avec de nombreuses technologies existantes. Rejoindre le réseau est simple.</div>
      </div>
      <div class="rounded-xl border border-white/[0.10] bg-white/[0.04] px-5 py-4">
        <div class="font-display text-base font-semibold text-foam-200">Tableau de bord clair</div>
        <div class="mt-1 text-xs text-foam-100/60">Visualiser, analyser et partager les données sans expertise technique particulière.</div>
      </div>
      <div class="rounded-xl border border-white/[0.10] bg-white/[0.04] px-5 py-4">
        <div class="font-display text-base font-semibold text-foam-200">Couverture multiparamètre</div>
        <div class="mt-1 text-xs text-foam-100/60">Acoustique, physico-chimie, courants, météo — plusieurs points, un seul réseau.</div>
      </div>
    </div>
  </div>
</section>