diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..3059587
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,74 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply bg-white text-gray-800 font-sans;
+  }
+
+  h1, h2, h3, h4 {
+    font-family: 'Playfair Display', Georgia, serif;
+  }
+}
+
+@layer components {
+  .section-title {
+    @apply text-3xl md:text-4xl font-bold text-marine-900 mb-4;
+    font-family: 'Playfair Display', Georgia, serif;
+  }
+
+  .section-subtitle {
+    @apply text-gold-600 uppercase tracking-widest text-sm font-semibold mb-2;
+  }
+
+  .btn-primary {
+    @apply inline-flex items-center gap-2 bg-gold-500 hover:bg-gold-600 text-white font-semibold py-3 px-7 rounded-sm transition-all duration-300 shadow-md hover:shadow-lg active:scale-95;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center gap-2 border-2 border-white text-white hover:bg-white hover:text-marine-900 font-semibold py-3 px-7 rounded-sm transition-all duration-300;
+  }
+
+  .card {
+    @apply bg-white rounded-sm shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden;
+  }
+
+  .divider {
+    @apply w-16 h-1 bg-gold-500 mx-auto my-4;
+  }
+}
+
+@layer utilities {
+  .text-shadow {
+    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
+  }
+
+  .bg-overlay {
+    background: linear-gradient(180deg, rgba(16, 42, 67, 0.80) 0%, rgba(16, 42, 67, 0.65) 100%);
+  }
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #f0f4f8;
+}
+::-webkit-scrollbar-thumb {
+  background: #486581;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #334e68;
+}
+
+/* Smooth anchor offset for fixed header */
+section[id] {
+  scroll-margin-top: 72px;
+}