Initial layout

src/styles/_global.scss

@@ -0,0 +1,43 @@
+@use 'variables' as *;
+
+// ── Reset & base ───────────────────────────────────────────────
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+  font-size: 16px;
+}
+
+body {
+  background-color: $color-bg;
+  color: $color-text;
+  font-family: $font-sans;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+
+a {
+  color: $color-accent;
+  text-decoration: none;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: $color-primary-glow;
+  }
+}
+
+img,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+// ── Google Fonts import ────────────────────────────────────────
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

src/styles/_variables.scss

@@ -0,0 +1,51 @@
+// ── Palette ────────────────────────────────────────────────────
+$color-bg:          #0a0e1a;
+$color-bg-elevated: #111827;
+$color-bg-card:     #131d35;
+$color-border:      #1e2d4d;
+
+$color-primary:     #1e3a8a; // dark blue
+$color-primary-mid: #2563eb;
+$color-primary-glow:#3b82f6;
+$color-accent:      #60a5fa; // light blue for highlights
+$color-accent-warm: #f59e0b; // amber – a touch of personality
+
+$color-text:        #e2e8f0;
+$color-text-muted:  #94a3b8;
+$color-text-dim:    #475569;
+
+// ── Typography ─────────────────────────────────────────────────
+$font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
+$font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+$text-xs:   0.75rem;
+$text-sm:   0.875rem;
+$text-base: 1rem;
+$text-lg:   1.125rem;
+$text-xl:   1.25rem;
+$text-2xl:  1.5rem;
+$text-3xl:  2rem;
+$text-4xl:  2.75rem;
+$text-5xl:  3.75rem;
+
+// ── Spacing ────────────────────────────────────────────────────
+$space-1:  0.25rem;
+$space-2:  0.5rem;
+$space-3:  0.75rem;
+$space-4:  1rem;
+$space-6:  1.5rem;
+$space-8:  2rem;
+$space-12: 3rem;
+$space-16: 4rem;
+$space-24: 6rem;
+
+// ── Layout ─────────────────────────────────────────────────────
+$max-width: 1100px;
+$radius-sm: 6px;
+$radius-md: 12px;
+$radius-lg: 20px;
+
+// ── Motion ─────────────────────────────────────────────────────
+$transition-fast: 150ms ease;
+$transition-base: 250ms ease;
+$transition-slow: 400ms ease;

src/styles/main.scss

@@ -0,0 +1,2 @@
+@use 'variables' as *;
+@use 'global';