diff --git a/src/style.css b/src/style.css
index dea61cb..61c2876 100644
--- a/src/style.css
+++ b/src/style.css
@@ -54,46 +54,44 @@
   --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
 }
 
-/* ─── Base Reset ────────────────────────────────────────── */
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
+/* ─── Base overrides ─────────────────────────────────────── */
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
 
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  font-family: var(--font-sans);
-  color: #475569;
-  background-color: #ffffff;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* ─── Page Container ────────────────────────────────────── */
-.page-container {
-  max-width: 1440px;
-  margin-inline: auto;
-  padding-inline: 100px;
-}
-
-@media (max-width: 1280px) {
-  .page-container {
-    padding-inline: 64px;
+  body {
+    font-family: var(--font-sans);
+    color: #475569;
+    background-color: #ffffff;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 }
 
-@media (max-width: 1024px) {
+/* ─── Custom component utilities ─────────────────────────── */
+@layer utilities {
   .page-container {
-    padding-inline: 40px;
+    max-width: 1440px;
+    margin-inline: auto;
+    padding-inline: 100px;
   }
-}
 
-@media (max-width: 640px) {
-  .page-container {
-    padding-inline: 24px;
+  @media (max-width: 1280px) {
+    .page-container {
+      padding-inline: 64px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .page-container {
+      padding-inline: 40px;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .page-container {
+      padding-inline: 24px;
+    }
   }
 }