diff --git a/messages/en.json b/messages/en.json
index 18dcb59..b942670 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -195,6 +195,10 @@
   "globe_controls_hint": "Drag to pan · scroll to zoom",
   "globe_timeline_title": "Timeline of the wave",
 
+  "wave_showcase_title": "A wave that crosses the world",
+  "wave_showcase_subtitle": "The heliacal rising touches thirteen cities across Africa, Europe and the Caribbean between late June and mid-August",
+  "wave_showcase_cta": "See the full map",
+
   "associations_title": "Associations celebrating Wep Ronpet",
   "associations_subtitle": "Discover the events and communities celebrating the Kamit New Year",
   "associations_events_title": "Wep Ronpet events",
diff --git a/messages/fr.json b/messages/fr.json
index 5aeff66..1f12899 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -195,6 +195,10 @@
   "globe_controls_hint": "Glisser pour déplacer · molette pour zoomer",
   "globe_timeline_title": "Chronologie de la vague",
 
+  "wave_showcase_title": "Une vague qui traverse le monde",
+  "wave_showcase_subtitle": "Le lever héliaque touche treize villes d'Afrique, d'Europe et des Caraïbes entre fin juin et mi-août",
+  "wave_showcase_cta": "Voir la carte complète",
+
   "associations_title": "Associations qui fêtent le Wep Ronpet",
   "associations_subtitle": "Découvrez les événements et communautés qui célèbrent le Nouvel An Kamit",
   "associations_events_title": "Événements Wep Ronpet",
diff --git a/messages/ht.json b/messages/ht.json
index bf3edda..bdf5cd7 100644
--- a/messages/ht.json
+++ b/messages/ht.json
@@ -75,6 +75,8 @@
   "observer_tips_title": "Konsèy pratik",
 
   "globe_title": "Fenomèn vag la",
+  "wave_showcase_title": "Yon vag ki travèse mond lan",
+  "wave_showcase_cta": "Gade kat konplè a",
   "globe_controls_hint": "Trennen pou deplase · molèt pou zoome",
 
   "associations_title": "Asosyasyon ki fete Wep Ronpet",
diff --git a/src/_data/waveCities.js b/src/_data/waveCities.js
new file mode 100644
index 0000000..f8b19b1
--- /dev/null
+++ b/src/_data/waveCities.js
@@ -0,0 +1,19 @@
+// Progression du lever héliaque à travers la diaspora africaine et caribéenne
+// (fin juin à mi-août), du plus oriental au plus occidental. Source unique,
+// consommée à la fois par les pages 11ty (aperçu statique) et par l'îlot
+// SiriusGlobe (carte Leaflet interactive) — voir src/islands/globe/world.js.
+export default [
+  { name: "La Réunion", lat: -21.1151, lon: 55.5364, date: "27 juin" },
+  { name: "Kinshasa", lat: -4.4419, lon: 15.2663, date: "16 juillet" },
+  { name: "Douala", lat: 4.0511, lon: 9.7679, date: "18 juillet" },
+  { name: "Yaoundé", lat: 3.848, lon: 11.5021, date: "19 juillet" },
+  { name: "Abidjan", lat: 5.36, lon: -4.0083, date: "20 juillet" },
+  { name: "Accra", lat: 5.6037, lon: -0.187, date: "21 juillet" },
+  { name: "Guadeloupe", lat: 16.265, lon: -61.551, date: "22 juillet" },
+  { name: "Martinique", lat: 14.6415, lon: -61.0242, date: "23 juillet" },
+  { name: "Dakar", lat: 14.7167, lon: -17.4677, date: "23 juillet" },
+  { name: "Cayenne", lat: 4.9346, lon: -52.3281, date: "24 juillet" },
+  { name: "Bamako", lat: 12.6392, lon: -8.0029, date: "25 juillet" },
+  { name: "Le Caire", lat: 30.0444, lon: 31.2357, date: "3 août" },
+  { name: "Paris", lat: 48.8566, lon: 2.3522, date: "15 août" },
+];
diff --git a/src/culture-savoirs.njk b/src/culture-savoirs.njk
index eb5a750..b116984 100644
--- a/src/culture-savoirs.njk
+++ b/src/culture-savoirs.njk
@@ -20,17 +20,17 @@ eleventyComputed:
     </div>
 
     <div class="grid-auto">
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">🏺</div>
         <h3>{{ "culture_egypt_title" | t(locale) }}</h3>
         <p>{{ "culture_egypt_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">🌍</div>
         <h3>{{ "culture_dogon_title" | t(locale) }}</h3>
         <p>{{ "culture_dogon_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">⛵</div>
         <h3>{{ "culture_caribbean_title" | t(locale) }}</h3>
         <p>{{ "culture_caribbean_desc" | t(locale) }}</p>
@@ -98,15 +98,15 @@ eleventyComputed:
 
         <div class="tab-panel">
           <div class="grid-auto">
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_system_sigutolo_title" | t(locale) }}</h3>
               <p>{{ "dogon_system_sigutolo_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_system_potolo_title" | t(locale) }}</h3>
               <p>{{ "dogon_system_potolo_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_system_emmeya_title" | t(locale) }}</h3>
               <p>{{ "dogon_system_emmeya_desc" | t(locale) }}</p>
             </div>
@@ -136,19 +136,19 @@ eleventyComputed:
 
         <div class="tab-panel">
           <div class="grid-auto">
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_astronomy_geometry_title" | t(locale) }}</h3>
               <p>{{ "dogon_astronomy_geometry_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_astronomy_calendar_title" | t(locale) }}</h3>
               <p>{{ "dogon_astronomy_calendar_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_astronomy_planets_title" | t(locale) }}</h3>
               <p>{{ "dogon_astronomy_planets_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_astronomy_universe_title" | t(locale) }}</h3>
               <p>{{ "dogon_astronomy_universe_desc" | t(locale) }}</p>
             </div>
diff --git a/src/index.njk b/src/index.njk
index 339b132..396eba8 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -54,18 +54,40 @@ eleventyComputed:
     </div>
 
     <div class="grid-auto" style="margin-top: var(--space-6)">
-      <div class="card feature-card">
+      <div class="feature-card">
         <h3>{{ "feature_brightest_title" | t(locale) }}</h3>
         <p>{{ "feature_brightest_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <h3>{{ "feature_rising_title" | t(locale) }}</h3>
         <p>{{ "feature_rising_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <h3>{{ "feature_heritage_title" | t(locale) }}</h3>
         <p>{{ "feature_heritage_desc" | t(locale) }}</p>
       </div>
     </div>
   </div>
 </section>
+
+<section class="section" style="background: var(--surface-sunk)">
+  <div class="container">
+    <div class="section-header center">
+      <h2>{{ "wave_showcase_title" | t(locale) }}</h2>
+      <p class="section-subtitle">{{ "wave_showcase_subtitle" | t(locale) }}</p>
+    </div>
+
+    <ul class="wave-badges">
+      {% for city in waveCities %}
+      <li class="wave-badge wave-badge-{{ loop.index0 % 3 }}">
+        <span class="wave-badge-name">{{ city.name }}</span>
+        <span class="wave-badge-date">{{ city.date }}</span>
+      </li>
+      {% endfor %}
+    </ul>
+
+    <p class="center" style="margin-top: var(--space-5)">
+      <a class="btn btn-outline" href="{{ '/observer/' | localeHref(locale) }}">{{ "wave_showcase_cta" | t(locale) }}</a>
+    </p>
+  </div>
+</section>
diff --git a/src/islands/globe/world.js b/src/islands/globe/world.js
index 8ceab8b..dba4538 100644
--- a/src/islands/globe/world.js
+++ b/src/islands/globe/world.js
@@ -1,17 +1 @@
-// Progression du lever héliaque à travers la diaspora africaine et caribéenne
-// (fin juin à mi-août), du plus oriental au plus occidental.
-export const waveCities = [
-  { name: "La Réunion", lat: -21.1151, lon: 55.5364, date: "27 juin" },
-  { name: "Kinshasa", lat: -4.4419, lon: 15.2663, date: "16 juillet" },
-  { name: "Douala", lat: 4.0511, lon: 9.7679, date: "18 juillet" },
-  { name: "Yaoundé", lat: 3.848, lon: 11.5021, date: "19 juillet" },
-  { name: "Abidjan", lat: 5.36, lon: -4.0083, date: "20 juillet" },
-  { name: "Accra", lat: 5.6037, lon: -0.187, date: "21 juillet" },
-  { name: "Guadeloupe", lat: 16.265, lon: -61.551, date: "22 juillet" },
-  { name: "Martinique", lat: 14.6415, lon: -61.0242, date: "23 juillet" },
-  { name: "Dakar", lat: 14.7167, lon: -17.4677, date: "23 juillet" },
-  { name: "Cayenne", lat: 4.9346, lon: -52.3281, date: "24 juillet" },
-  { name: "Bamako", lat: 12.6392, lon: -8.0029, date: "25 juillet" },
-  { name: "Le Caire", lat: 30.0444, lon: 31.2357, date: "3 août" },
-  { name: "Paris", lat: 48.8566, lon: 2.3522, date: "15 août" },
-];
+export { default as waveCities } from "../../_data/waveCities.js";
diff --git a/src/observer.njk b/src/observer.njk
index 921ea16..c6c2e24 100644
--- a/src/observer.njk
+++ b/src/observer.njk
@@ -139,22 +139,22 @@ eleventyComputed:
 
     <h2 class="center" style="margin-top: var(--space-7)">{{ "observer_tips_title" | t(locale) }}</h2>
     <div class="grid-auto" style="margin-top: var(--space-4)">
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">🌤️</div>
         <h3>{{ "observer_tip_weather_title" | t(locale) }}</h3>
         <p>{{ "observer_tip_weather_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">🌑</div>
         <h3>{{ "observer_tip_moon_title" | t(locale) }}</h3>
         <p>{{ "observer_tip_moon_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">📱</div>
         <h3>{{ "observer_tip_apps_title" | t(locale) }}</h3>
         <p>{{ "observer_tip_apps_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">👥</div>
         <h3>{{ "observer_tip_group_title" | t(locale) }}</h3>
         <p>{{ "observer_tip_group_desc" | t(locale) }}</p>
diff --git a/src/sirius-science.njk b/src/sirius-science.njk
index b2a261b..4119668 100644
--- a/src/sirius-science.njk
+++ b/src/sirius-science.njk
@@ -62,15 +62,15 @@ eleventyComputed:
 
         <div class="tab-panel">
           <div class="grid-auto">
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "science_factor_magnitude_title" | t(locale) }}</h3>
               <p>{{ "science_factor_magnitude_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "science_factor_latitude_title" | t(locale) }}</h3>
               <p>{{ "science_factor_latitude_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "science_factor_atmosphere_title" | t(locale) }}</h3>
               <p>{{ "science_factor_atmosphere_desc" | t(locale) }}</p>
             </div>
diff --git a/src/styles/app.css b/src/styles/app.css
index 38c1250..e081c55 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -16,3 +16,4 @@
 @import "./components/diagrams.css" layer(components);
 @import "./components/associations.css" layer(components);
 @import "./components/islands.css" layer(components);
+@import "./components/wave-badges.css" layer(components);
diff --git a/src/styles/base.css b/src/styles/base.css
index 5105623..4a7c458 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -37,13 +37,14 @@ body {
 h1, h2, h3, h4 {
   font-family: var(--font-display);
   line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
   text-wrap: balance;
 }
 
 h1 { font-size: var(--text-6); }
 h2 { font-size: var(--text-5); }
-h3 { font-size: var(--text-3); }
-h4 { font-size: var(--text-2); }
+h3 { font-size: var(--text-3); letter-spacing: -0.01em; }
+h4 { font-size: var(--text-2); letter-spacing: 0; }
 
 p {
   text-wrap: pretty;
diff --git a/src/styles/components/buttons.css b/src/styles/components/buttons.css
index e375bc8..d1ed3c5 100644
--- a/src/styles/components/buttons.css
+++ b/src/styles/components/buttons.css
@@ -3,16 +3,23 @@
   align-items: center;
   justify-content: center;
   min-height: var(--tap-target);
-  padding-inline: var(--space-4);
+  padding-inline: var(--space-5);
   border-radius: var(--radius-pill);
   font-weight: 700;
   text-decoration: none;
+  box-shadow: var(--shadow-sm);
   transition: transform var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out),
     background var(--duration-fast) var(--ease-out);
 }
 
 .btn:hover {
   transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.btn:active {
+  transform: translateY(0);
 }
 
 .btn-primary {
@@ -20,8 +27,19 @@
   color: oklch(20% 0.03 265);
 }
 
+.btn-primary:hover {
+  background: var(--coral-surface);
+}
+
 .btn-outline {
   background: transparent;
   border: 2px solid var(--gold);
   color: var(--gold);
+  box-shadow: none;
+}
+
+.btn-outline:hover {
+  border-color: var(--coral);
+  color: var(--coral);
+  box-shadow: none;
 }
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
index 7404f7e..0fe69b1 100644
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -1,6 +1,10 @@
+/* Contenu éditorial : icône + titre + texte, fluide (pas de boîte) sauf
+   quand .card est explicitement combiné (regroupements fonctionnels comme
+   l'équipement d'observation). */
 .feature-card,
 .info-card {
   text-align: center;
+  padding-block: var(--space-2);
 }
 
 .feature-card h3,
@@ -9,9 +13,9 @@
   margin-bottom: var(--space-2);
 }
 
-.info-card.essential {
-  border-color: var(--gold);
-  background: light-dark(oklch(96% 0.04 85), oklch(24% 0.04 85));
+.card.info-card.essential {
+  box-shadow: 0 0 0 2px var(--gold), var(--shadow-sm);
+  background: light-dark(oklch(96% 0.04 85), oklch(20% 0.035 85));
 }
 
 .info-card-header {
diff --git a/src/styles/components/hero.css b/src/styles/components/hero.css
index 5dd249b..8a3c1f1 100644
--- a/src/styles/components/hero.css
+++ b/src/styles/components/hero.css
@@ -1,10 +1,10 @@
 .hero {
   position: relative;
   overflow: hidden;
-  padding-block: var(--space-7) var(--space-6);
+  padding-block: var(--space-8) var(--space-7);
   background: light-dark(
     linear-gradient(180deg, oklch(96% 0.02 85), oklch(92% 0.03 60)),
-    linear-gradient(180deg, oklch(14% 0.03 265), oklch(10% 0.02 265))
+    linear-gradient(180deg, oklch(9% 0.015 265), oklch(6% 0.01 265))
   );
 }
 
diff --git a/src/styles/components/wave-badges.css b/src/styles/components/wave-badges.css
new file mode 100644
index 0000000..2ddfcf9
--- /dev/null
+++ b/src/styles/components/wave-badges.css
@@ -0,0 +1,32 @@
+/* Vitrine dense de badges — écho panafricain à une grille d'intégrations :
+   sobre en soi (fond neutre), colorée par petites touches. */
+.wave-badges {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--space-2);
+  margin-top: var(--space-6);
+  list-style: none;
+}
+
+.wave-badge {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-pill);
+  background: var(--surface-raised);
+  font-size: var(--text-0);
+}
+
+.wave-badge-name {
+  font-weight: 700;
+}
+
+.wave-badge-date {
+  color: var(--ink-soft);
+}
+
+.wave-badge-0 .wave-badge-name { color: var(--gold); }
+.wave-badge-1 .wave-badge-name { color: var(--coral); }
+.wave-badge-2 .wave-badge-name { color: var(--caribbean-teal); }
diff --git a/src/styles/layouts.css b/src/styles/layouts.css
index 61c5137..2f9c68d 100644
--- a/src/styles/layouts.css
+++ b/src/styles/layouts.css
@@ -53,7 +53,7 @@
 }
 
 .section {
-  padding-block: var(--space-7);
+  padding-block: var(--space-8);
   container-type: inline-size;
 }
 
@@ -61,6 +61,12 @@
   margin-bottom: var(--space-6);
 }
 
+.hairline {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 0;
+}
+
 .section-eyebrow {
   display: inline-block;
   font-family: var(--font-body);
@@ -78,9 +84,11 @@
   margin-top: var(--space-2);
 }
 
+/* Réservé aux regroupements fonctionnels (calculateur, carte, onglets,
+   équipement) — le contenu purement éditorial reste fluide, sans boîte. */
 .card {
   background: var(--surface-raised);
-  border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: var(--space-4);
+  box-shadow: var(--shadow-sm);
 }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 35471f6..49b30da 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -2,17 +2,24 @@
   color-scheme: light dark;
 
   /* === Couleur — oklch, contraste d'abord (méthode modus-vivendi) ===
-     Deux thèmes conceptuellement liés au sujet : Aube (clair) / Nuit (sombre). */
-  --ink: light-dark(oklch(23% 0.03 265), oklch(95% 0.015 85));
-  --ink-soft: light-dark(oklch(38% 0.03 265), oklch(80% 0.02 85));
-  --surface: light-dark(oklch(96% 0.015 85), oklch(16% 0.03 265));
-  --surface-raised: light-dark(oklch(99% 0.008 85), oklch(21% 0.03 265));
-  --surface-sunk: light-dark(oklch(91% 0.02 85), oklch(12% 0.025 265));
-  --border: light-dark(oklch(85% 0.02 85), oklch(32% 0.035 265));
+     Deux thèmes conceptuellement liés au sujet : Aube (clair) / Nuit (sombre).
+     Le noir de nuit est volontairement presque neutre (chroma minimal) —
+     un "premium near-black" plutôt qu'un bleu nuit saturé. */
+  --ink: light-dark(oklch(23% 0.03 265), oklch(96% 0.01 85));
+  --ink-soft: light-dark(oklch(38% 0.03 265), oklch(78% 0.015 85));
+  --surface: light-dark(oklch(96% 0.015 85), oklch(11% 0.012 265));
+  --surface-raised: light-dark(oklch(99% 0.008 85), oklch(15% 0.015 265));
+  --surface-sunk: light-dark(oklch(91% 0.02 85), oklch(8% 0.012 265));
+  --border: light-dark(oklch(85% 0.02 85), oklch(26% 0.02 265));
 
   /* Or de Sirius : variante lisible (texte/liens) + variante décorative (glows) */
   --gold: light-dark(oklch(45% 0.15 75), oklch(82% 0.15 87));
   --gold-surface: oklch(80% 0.16 85);
+  /* Corail (héritage Caraïbe du v1 du projet) : accent secondaire chaud,
+     à côté de l'or plutôt qu'à sa place — inspiré du ton "burnt orange"
+     d'unabyss.com. */
+  --coral: light-dark(oklch(50% 0.17 45), oklch(72% 0.17 45));
+  --coral-surface: oklch(70% 0.18 45);
   --kente-red: light-dark(oklch(46% 0.18 25), oklch(70% 0.19 25));
   --bogolan-green: light-dark(oklch(40% 0.09 145), oklch(68% 0.12 145));
   --caribbean-teal: light-dark(oklch(43% 0.09 195), oklch(74% 0.11 195));
@@ -27,22 +34,24 @@
   --text-1: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
   --text-2: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
   --text-3: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
-  --text-4: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
-  --text-5: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);
-  --text-6: clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem);
+  --text-4: clamp(1.85rem, 1.5rem + 1.6vw, 2.75rem);
+  --text-5: clamp(2.5rem, 1.8rem + 3vw, 4rem);
+  --text-6: clamp(3rem, 1.9rem + 5.5vw, 6.5rem);
 
-  --leading-tight: 1.15;
-  --leading-normal: 1.6;
+  --tracking-tight: -0.02em;
+  --leading-tight: 1.1;
+  --leading-normal: 1.65;
   --measure: 65ch;
 
-  /* === Espacement (échelle modulaire) === */
+  /* === Espacement (échelle modulaire) — rythme généreux === */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 1rem;
   --space-4: 1.5rem;
   --space-5: 2.5rem;
   --space-6: 4rem;
-  --space-7: 6rem;
+  --space-7: 7rem;
+  --space-8: 9rem;
 
   /* === Formes, ombres, mouvement === */
   --radius-sm: 0.5rem;
@@ -50,8 +59,8 @@
   --radius-lg: 1.5rem;
   --radius-pill: 999px;
 
-  --shadow-sm: 0 1px 3px light-dark(oklch(23% 0.03 265 / 12%), oklch(0% 0 0 / 30%));
-  --shadow-md: 0 8px 30px light-dark(oklch(23% 0.03 265 / 12%), oklch(0% 0 0 / 45%));
+  --shadow-sm: 0 1px 3px light-dark(oklch(23% 0.03 265 / 12%), oklch(0% 0 0 / 35%));
+  --shadow-md: 0 12px 40px light-dark(oklch(23% 0.03 265 / 14%), oklch(0% 0 0 / 55%));
 
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --duration-fast: 200ms;