diff --git a/src/app/globals.css b/src/app/globals.css
index ec240ed..74b5e79 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -65,15 +65,24 @@
   font-family: var(--font-en), var(--font-fa), sans-serif;
 }
 
-/* Swiper: the package ships its own CSS, these are the site-level overrides. */
-.swiper-pagination-bullet {
-  background: #ffffff;
-  opacity: 0.55;
-  width: 8px;
-  height: 8px;
+/* Swiper theming: its own CSS reads these custom properties when drawing
+   bullets (background: var(--swiper-pagination-bullet-inactive-color, #000)
+   etc.) — setting a plain .swiper-pagination-bullet{background} rule has the
+   same specificity as swiper's own rule and lost the cascade depending on
+   chunk order, which is why the dots were showing swiper's black/blue
+   defaults instead of white. Setting the variables is the way swiper itself
+   documents for overriding bullet colors, and it's cascade-order-proof. */
+.hero-dots {
+  --swiper-pagination-bullet-inactive-color: #ffffff;
+  --swiper-pagination-bullet-inactive-opacity: 0.55;
+  --swiper-pagination-color: #ffffff;
+  --swiper-pagination-bullet-width: 8px;
+  --swiper-pagination-bullet-height: 8px;
 }
-.swiper-pagination-bullet-active {
-  opacity: 1;
+/* The active pill shape has no swiper variable of its own — .hero-dots
+   raises specificity (0,2,0) above swiper's base bullet rule (0,1,0) so
+   this wins without !important. */
+.hero-dots .swiper-pagination-bullet-active {
   width: 22px;
   border-radius: 4px;
 }