diff --git a/client/src/app/globals.css b/client/src/app/globals.css
index 0740c3f..8ec6e35 100644
--- a/client/src/app/globals.css
+++ b/client/src/app/globals.css
@@ -1,1979 +1,110 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 @layer base {
   :root {
-    --bg: #000000;
-    --bg-elevated: #0a0a0a;
-    --bg-card: #050505;
-    --bg-card-hover: #111111;
-    --bg-input: #1a1a1a;
-    --bg-subtle: #050505;
-
-    --accent: #ffffff;
-    --accent-dim: #a3a3a3;
-    --accent-glow: rgba(255, 255, 255, 0.15);
-    --accent-soft: rgba(255, 255, 255, 0.08);
-
-    --text: #ffffff;
-    --text-secondary: #a3a3a3;
-    --text-muted: #737373;
-    --text-faint: #52525b;
-
-    --border: rgba(255, 255, 255, 0.1);
-    --border-hover: rgba(255, 255, 255, 0.2);
-    --border-accent: rgba(255, 255, 255, 0.4);
-
-    --success: #10b981;
-    --warning: #f59e0b;
-    --error: #ef4444;
-    
-    --glow-primary: rgba(255, 255, 255, 0.12);
-    --glow-secondary: rgba(255, 255, 255, 0.07);
-    --grid-color: rgba(255, 255, 255, 0.04);
-  }
-
-  :root.light {
-    --bg: #ffffff;
-    --bg-elevated: #f4f4f5;
-    --bg-card: #ffffff;
-    --bg-card-hover: #fafafa;
-    --bg-input: #f4f4f5;
-    --bg-subtle: #fafafa;
-
-    --accent: #000000;
-    --accent-dim: #52525b;
-    --accent-glow: rgba(0, 0, 0, 0.05);
-    --accent-soft: rgba(0, 0, 0, 0.04);
-
-    --text: #09090b;
-    --text-secondary: #52525b;
-    --text-muted: #71717a;
-    --text-faint: #a1a1aa;
-
-    --border: rgba(0, 0, 0, 0.1);
-    --border-hover: rgba(0, 0, 0, 0.2);
-    --border-accent: rgba(0, 0, 0, 0.3);
-
-    --success: #10b981;
-    --warning: #f59e0b;
-    --error: #ef4444;
-    
-    --glow-primary: rgba(0, 0, 0, 0.05);
-    --glow-secondary: rgba(0, 0, 0, 0.03);
-    --grid-color: rgba(0, 0, 0, 0.08); /* Boldly visible in light mode */
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 Maruti 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
   }
+}
 
+@layer base {
   * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+    @apply border-border;
   }
-
+  
   html {
     scroll-behavior: smooth;
+    /* Prevent font sizing adjustments on mobile orientation shifts */
+    -webkit-text-size-adjust: 100%;
   }
 
   body {
-    background-color: var(--bg);
-    color: var(--text);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    overflow-x: hidden;
-  }
-}
-
-@layer components {
-
-  /* ===== LAYOUT ===== */
-  .layout-glow {
-    background: radial-gradient(1200px circle at 50% -50px, var(--glow-primary) 0%, transparent 80%), radial-gradient(800px circle at -5% -5%, var(--glow-secondary) 0%, transparent 60%);
-  }
-
-  .page-container {
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 2rem;
-  }
-
-  /* ===== NAVBAR ===== */
-  .navbar-wrapper {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    display: flex;
-    justify-content: center;
-    padding: 1rem 2rem;
-    pointer-events: none;
-  }
-
-  .navbar-floating {
-    width: 100%;
-    max-width: 1040px;
-    height: 56px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 1rem 0 1.25rem;
-    border-radius: 14px;
-    background: rgba(5, 5, 5, 0.7);
-    backdrop-filter: blur(40px) saturate(1.6);
-    -webkit-backdrop-filter: blur(40px) saturate(1.6);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow:
-      0 4px 30px rgba(0, 0, 0, 0.3),
-      0 0 0 1px rgba(255, 255, 255, 0.02) inset;
-    transition: all 0.4s ease;
-    pointer-events: all;
-  }
-
-  .navbar-scrolled {
-    background: rgba(5, 5, 5, 0.9);
-    border-color: rgba(255, 255, 255, 0.15);
-    box-shadow:
-      0 8px 40px rgba(0, 0, 0, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.03) inset;
-  }
-
-  .navbar-left {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    text-decoration: none;
-    flex-shrink: 0;
-  }
-
-  .navbar-logo-icon {
-    width: 26px;
-    height: 26px;
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(255, 255, 255, 0.05);
-    flex-shrink: 0;
-  }
-
-  .navbar-brand {
-    font-size: 0.85rem;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    color: #ffffff;
-  }
-
-  .navbar-version {
-    font-size: 0.6rem;
-    font-weight: 500;
-    padding: 0.15rem 0.5rem;
-    border-radius: 9999px;
-    background: rgba(255, 255, 255, 0.08);
-    color: #ffffff;
-    letter-spacing: 0.02em;
-  }
-
-  .navbar-right {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-
-  .navbar-link {
-    font-size: 0.78rem;
-    font-weight: 500;
-    color: #a1a1aa;
-    text-decoration: none;
-    padding: 0.375rem 0.75rem;
-    border-radius: 6px;
-    transition: color 0.2s ease, background 0.2s ease;
-  }
-
-  .navbar-link:hover {
-    color: #ffffff;
-    background: rgba(255, 255, 255, 0.08);
-  }
-
-  .navbar-icon-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 34px;
-    height: 34px;
-    border-radius: 6px;
-    transition: background 0.2s ease;
-    text-decoration: none;
-  }
-
-  .navbar-icon-link:hover {
-    background: rgba(148, 163, 184, 0.08);
-  }
-
-  .navbar-icon-link svg {
-    transition: fill 0.2s ease;
-    fill: #a1a1aa;
-  }
-
-  .navbar-icon-link:hover svg,
-  .navbar-icon-link:active svg,
-  .navbar-icon-link:focus svg {
-    fill: #ffffff !important;
-  }
-
-  .navbar-search {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.375rem 0.625rem;
-    border-radius: 8px;
-    background: rgba(148, 163, 184, 0.06);
-    border: 1px solid var(--border);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    color: var(--text-muted);
-    font-size: 0.75rem;
-  }
-
-  .navbar-search:hover {
-    background: rgba(148, 163, 184, 0.1);
-    border-color: var(--border-hover);
-  }
-
-  .navbar-search-text {
-    color: var(--text-muted);
-    font-size: 0.75rem;
-    font-weight: 500;
-  }
-
-  .navbar-search-kbd {
-    font-size: 0.6rem;
-    font-weight: 500;
-    padding: 0.1rem 0.35rem;
-    border-radius: 4px;
-    background: rgba(148, 163, 184, 0.1);
-    color: var(--text-muted);
-    border: 1px solid var(--border);
-  }
-
-  /* ===== HERO ===== */
-  .hero {
-    position: relative;
-    padding: 10rem 0 3rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-
-  .hero-glow {
-    position: absolute;
-    top: -200px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 1000px;
-    height: 600px;
-    background: radial-gradient(ellipse at center,
-        rgba(56, 189, 248, 0.07) 0%,
-        rgba(56, 189, 248, 0.02) 40%,
-        transparent 70%);
-    pointer-events: none;
-  }
-
-  /* Decorative code tag above headline */
-  .hero-code-tag {
-    font-size: 0.78rem;
-    font-weight: 500;
-    color: var(--text-muted);
-    margin-bottom: 1.5rem;
-    letter-spacing: 0.02em;
-  }
-
-  .hero-code-tag code {
-    color: var(--text-secondary);
-  }
-
-  .hero-title {
-    font-size: 4.5rem;
-    font-weight: 800;
-    line-height: 1.05;
-    letter-spacing: -0.04em;
-    margin-bottom: 1.75rem;
-    text-wrap: balance;
-    color: var(--text);
-    max-width: 900px;
-  }
-
-  .hero-subtitle {
-    font-size: 1.1rem;
-    line-height: 1.7;
-    color: var(--text-secondary);
-    max-width: 600px;
-    margin: 0 auto 2.5rem;
-    font-weight: 400;
-  }
-
-  .hero-subtitle strong {
-    color: var(--accent);
-    font-weight: 500;
-  }
-
-  .hero-commands {
-    display: flex;
-    align-items: center;
-    gap: 0.875rem;
-    margin-bottom: 3.5rem;
-  }
-
-  .hero-cmd {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.5rem 0.625rem 0.5rem 1rem;
-    border-radius: 10px;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    cursor: pointer;
-    transition: all 0.25s ease;
-  }
-
-  .hero-cmd:hover {
-    background: var(--bg-card-hover);
-    border-color: var(--border-accent);
-    box-shadow: 0 0 20px rgba(56, 189, 248, 0.06);
-  }
-
-  .hero-cmd-code {
-    font-size: 0.78rem;
-    color: var(--text-secondary);
-    letter-spacing: 0.01em;
-  }
-
-  .hero-cmd-copy {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
-    height: 30px;
-    border-radius: 6px;
-    background: rgba(148, 163, 184, 0.06);
-    transition: all 0.2s ease;
-    flex-shrink: 0;
-  }
-
-  .hero-cmd:hover .hero-cmd-copy {
-    background: var(--accent-soft);
-  }
-
-  .hero-cmd:hover .hero-cmd-copy svg {
-    stroke: var(--accent);
-  }
-
-  /* CTA Buttons */
-  .hero-buttons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    margin-bottom: 3.5rem;
-  }
-
-  .btn-primary {
-    padding: 0.7rem 1.75rem;
-    border-radius: 8px;
-    font-size: 0.85rem;
-    font-weight: 600;
-    background: var(--text);
-    color: var(--bg);
-    text-decoration: none;
-    transition: all 0.3s ease;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 4px 15px var(--accent-glow);
-  }
-
-  .btn-primary:hover {
-    box-shadow: 0 6px 20px var(--accent-glow);
-    filter: contrast(1.2) brightness(1.1);
-    transform: translateY(-1px);
-  }
-
-  .btn-secondary {
-    padding: 0.7rem 1.5rem;
-    border-radius: 8px;
-    font-size: 0.82rem;
-    font-weight: 500;
-    color: var(--text-secondary);
-    border: 1px solid var(--border);
-    text-decoration: none;
-    transition: all 0.3s ease;
-    background: transparent;
-    cursor: pointer;
-  }
-
-  .btn-secondary:hover {
-    border-color: var(--border-hover);
-    color: var(--text);
-    background: rgba(148, 163, 184, 0.04);
-  }
-
-  /* ===== TERMINAL ===== */
-  .terminal-wrapper {
-    width: 100%;
-    max-width: 720px;
-    margin: 0 auto;
-  }
-
-  .terminal {
-    width: 100%;
-    border-radius: 12px;
-    overflow: hidden;
-    background: #050505;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow:
-      0 25px 50px rgba(0, 0, 0, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.02) inset;
-  }
-
-  .terminal-header {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1rem;
-    background: #0a0a0a;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .terminal-dots {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  .terminal-dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-  }
-
-  .terminal-dot-red {
-    background: #ef4444;
-    opacity: 0.5;
-  }
-
-  .terminal-dot-yellow {
-    background: #eab308;
-    opacity: 0.5;
-  }
-
-  .terminal-dot-green {
-    background: #22c55e;
-    opacity: 0.5;
-  }
-
-  .terminal-title {
-    margin-left: 0.75rem;
-    font-size: 0.7rem;
-    font-weight: 500;
-    letter-spacing: 0.04em;
-    color: #737373;
-  }
-
-  .terminal-body {
-    padding: 1.25rem 1.25rem;
-    min-height: 300px;
-    max-height: 520px;
-    overflow-y: auto;
-    text-align: left;
-    scroll-behavior: smooth;
-  }
-
-  .terminal-body::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  .terminal-body::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: 6px;
-  }
-
-  .terminal-body::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.15);
-    border-radius: 6px;
-  }
-
-  .terminal-body::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.3);
-  }
-
-  .terminal-line {
-    line-height: 1.8;
-    font-size: 0.75rem;
-    transition: opacity 0.3s ease, transform 0.3s ease;
-    white-space: pre;
-    text-align: left;
-  }
-
-  /* ── Interactive terminal input ───────────────────────────────────────── */
-  .terminal-input-line {
-    display: flex;
-    align-items: center;
+    @apply bg-background text-foreground antialiased selection:bg-primary/20;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    overflow-x: hidden; /* Fix horizontal layout spills */
   }
 
-  .terminal-input {
-    background: transparent;
-    border: none;
-    outline: none;
-    color: #f1f5f9;
-    font-size: 0.75rem;
-    line-height: 1.8;
-    width: 100%;
-    caret-color: #ffffff;
-    padding: 0;
-    margin: 0;
+  /* Responsive Typography Scale Rules */
+  h1 {
+    @apply text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl;
   }
-
-  .terminal-input::placeholder {
-    color: #3f3f46;
-  }
-
-  /* ── Interactive badge in title bar ───────────────────────────────────── */
-  .terminal-badge {
-    margin-left: auto;
-    font-size: 0.55rem;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: #10b981;
-    background: rgba(16, 185, 129, 0.1);
-    border: 1px solid rgba(16, 185, 129, 0.2);
-    padding: 0.15rem 0.5rem;
-    border-radius: 999px;
-    animation: badge-pulse 2s ease-in-out infinite;
-  }
-
-  @keyframes badge-pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.6; }
-  }
-
-  /* ── Interactive glow on terminal border ──────────────────────────────── */
-  .terminal-interactive {
-    border-color: rgba(255, 255, 255, 0.15);
-    animation: interactive-glow 3s ease-in-out infinite;
-  }
-
-  @keyframes interactive-glow {
-    0%, 100% { border-color: rgba(255, 255, 255, 0.1); }
-    50% { border-color: rgba(255, 255, 255, 0.2); }
-  }
-
-  /* ── Hint bar below input ─────────────────────────────────────────────── */
-  .terminal-hint {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 0 0.25rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
-    margin-top: 0.5rem;
-    font-size: 0.6rem;
-    color: #52525b;
-    animation: hint-fade-in 0.6s ease-out;
-  }
-
-  @keyframes hint-fade-in {
-    from { opacity: 0; transform: translateY(4px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  .terminal-hint-cmd {
-    display: inline-block;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: #a1a1aa;
-    padding: 0.2rem 0.5rem;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.6rem;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-  }
-
-  .terminal-hint-cmd:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.2);
-    color: #ffffff;
-  }
-
-  /* ===== TRIO FEATURE CARDS ===== */
-  .trio-section {
-    padding: 4rem 0 6rem;
-  }
-
-  .trio-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1.25rem;
-  }
-
-  .trio-card-wrapper {
-    position: relative;
-    border-radius: 14px;
-    cursor: default;
-    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  .trio-card-wrapper:hover {
-    transform: translateY(-4px);
-  }
-
-  /* Animated gradient border */
-  .trio-card-border {
-    position: absolute;
-    inset: 0;
-    border-radius: 14px;
-    padding: 1px;
-    background: linear-gradient(135deg, var(--border), transparent, var(--border));
-    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
-    transition: all 0.5s ease;
-    pointer-events: none;
-  }
-
-  .trio-card-border-active {
-    background: radial-gradient(600px circle at var(--x) var(--y),
-        rgba(255, 255, 255, 0.4),
-        transparent 40%);
-  }
-
-  @keyframes borderRotate {
-    0% {
-      background: linear-gradient(0deg, rgba(255, 255, 255, 0.35), transparent, rgba(255, 255, 255, 0.35));
-    }
-
-    25% {
-      background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent, rgba(255, 255, 255, 0.35));
-    }
-
-    50% {
-      background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent, rgba(255, 255, 255, 0.35));
-    }
-
-    75% {
-      background: linear-gradient(270deg, rgba(255, 255, 255, 0.35), transparent, rgba(255, 255, 255, 0.35));
-    }
-
-    100% {
-      background: linear-gradient(360deg, rgba(255, 255, 255, 0.35), transparent, rgba(255, 255, 255, 0.35));
-    }
-  }
-
-  .trio-card {
-    position: relative;
-    padding: 1.75rem;
-    border-radius: 14px;
-    background: var(--bg-card);
-    transition: all 0.4s ease;
-    z-index: 1;
-  }
-
-  .trio-card::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: 14px;
-    background: radial-gradient(800px circle at var(--x) var(--y),
-        rgba(255, 255, 255, 0.03),
-        transparent 40%);
-    opacity: 0;
-    transition: opacity 0.5s ease;
-    pointer-events: none;
-    z-index: -1;
-  }
-
-  .trio-card-wrapper:hover .trio-card::before {
-    opacity: 1;
-  }
-
-  .trio-card-wrapper:hover .trio-card {
-    background: var(--bg-card-hover);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 40px rgba(56, 189, 248, 0.04);
-  }
-
-  .trio-icon-wrap {
-    position: relative;
-    width: 44px;
-    height: 44px;
-    margin-bottom: 1.25rem;
-  }
-
-  .trio-icon {
-    position: relative;
-    z-index: 1;
-    width: 44px;
-    height: 44px;
-    border-radius: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--accent-soft);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: all 0.3s ease;
-  }
-
-  .trio-card-wrapper:hover .trio-icon {
-    background: var(--accent-glow);
-    border-color: rgba(255, 255, 255, 0.2);
-    transform: scale(1.05);
-  }
-
-  .trio-icon-glow {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 44px;
-    height: 44px;
-    border-radius: 50%;
-    background: transparent;
-    transition: all 0.5s ease;
-    z-index: 0;
-  }
-
-  .trio-icon-glow-active {
-    width: 64px;
-    height: 64px;
-    background: rgba(255, 255, 255, 0.06);
-    filter: blur(10px);
-  }
-
-  .trio-title {
-    font-size: 1rem;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    margin-bottom: 0.5rem;
-    color: var(--text);
-  }
-
-  .trio-desc {
-    font-size: 0.82rem;
-    line-height: 1.6;
-    color: var(--text-secondary);
-  }
-
-  /* ===== LANGUAGES ===== */
-  .languages-section {
-    padding: 6rem 0;
-    border-top: 1px solid var(--border);
-  }
-
-  .languages-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: center;
-  }
-
-  .languages-text {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .section-label {
-    font-size: 0.7rem;
-    font-weight: 600;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    color: var(--accent);
-    margin-bottom: 0.25rem;
-    display: block;
-  }
-
-  .section-title {
-    font-size: 2.25rem;
-    font-weight: 700;
-    letter-spacing: -0.03em;
-    line-height: 1.2;
-    text-wrap: balance;
-    color: var(--text);
-  }
-
-  .languages-desc {
-    font-size: 0.9rem;
-    line-height: 1.7;
-    color: var(--text-secondary);
-    max-width: 440px;
-  }
-
-  .lang-cards {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.75rem;
-  }
-
-  .lang-card {
-    padding: 1rem;
-    border-radius: 10px;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-  }
-
-  .lang-card:hover {
-    border-color: var(--border-hover);
-    background: var(--bg-card-hover);
-    transform: translateY(-2px);
-  }
-
-  .lang-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .lang-info {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .lang-name {
-    font-size: 0.82rem;
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    color: var(--text);
-    margin-bottom: 0.125rem;
-  }
-
-  .lang-ext {
-    font-size: 0.7rem;
-    font-weight: 500;
-    color: var(--text-muted);
-  }
-
-  /* ===== FOOTER ===== */
-  .footer {
-    padding: 4rem 0;
-    border-top: 1px solid var(--border);
-  }
-
-  .footer-top-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 3rem;
-    margin-bottom: 4rem;
-  }
-
-  .footer-column {
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-  }
-
-  .footer-col-title {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text);
+  h2 {
+    @apply text-2xl font-semibold tracking-tight sm:text-3xl;
   }
-
-  .footer-col-links {
-    display: flex;
-    flex-direction: column;
-    gap: 0.85rem;
+  h3 {
+    @apply text-xl font-semibold tracking-tight sm:text-2xl;
   }
-
-  .footer-bottom-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-top: 2rem;
-    border-top: 1px solid var(--border);
+  p {
+    @apply leading-relaxed text-sm sm:text-base;
   }
+}
 
-  .footer-copyright {
-    font-size: 0.85rem;
-    color: var(--text-muted);
+@layer components {
+  /* Fix Touch Targets & Interactive Targets across breakpoints */
+  button, 
+  .btn,
+  [role="button"] {
+    @apply min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 inline-flex items-center justify-center transition-all active:scale-[0.98];
   }
 
-  .footer-link {
-    font-size: 0.9rem;
-    color: var(--text-secondary);
-    text-decoration: none;
-    transition: color 0.2s ease;
+  /* Structural UI elements overflow defense */
+  pre, code {
+    @apply max-w-full overflow-x-auto whitespace-pre-wrap break-words;
   }
 
-  .footer-link:hover {
-    color: var(--accent);
+  .card, 
+  .grid-card {
+    @apply w-full max-w-full overflow-hidden rounded-lg border bg-card p-4 sm:p-6 shadow-sm;
   }
 
-  .footer-author-link {
-    color: var(--text);
-    text-decoration: none;
-    font-weight: 500;
+  /* Section Spacing Consistency Framework */
+  .section-container {
+    @apply w-full mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16;
   }
   
-  .footer-author-link:hover {
-    text-decoration: underline;
-  }
-
-  /* ===== GRADIENT TEXT ===== */
-  .gradient-text {
-    background: linear-gradient(135deg, var(--accent), #7dd3fc);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-
-  /* ===== BACKGROUND GRID ===== */
-  .bg-grid {
-    background-image:
-      linear-gradient(var(--grid-color) 1px, transparent 1px),
-      linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
-    background-size: 32px 32px;
-  }
-
-  /* ===== ANIMATIONS ===== */
-  .fade-in {
-    opacity: 0;
-    transform: translateY(24px);
-    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  .fade-in.visible {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  @keyframes blink {
-
-    0%,
-    100% {
-      opacity: 1;
-    }
-
-    50% {
-      opacity: 0;
-    }
-  }
-
-  .cursor-blink {
-    animation: blink 1s step-end infinite;
-  }
-
-  @keyframes pulseOpacity {
-    0% {
-      opacity: 0.1;
-    }
-
-    100% {
-      opacity: 0.5;
-    }
-  }
-
-  @keyframes panBeam {
-    0% {
-      transform: translateX(-100%);
-    }
-
-    100% {
-      transform: translateX(100%);
-    }
-  }
-
-  @keyframes pulseGlow {
-
-    0%,
-    100% {
-      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 60px rgba(255, 255, 255, 0.08);
-    }
-
-    50% {
-      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 80px rgba(255, 255, 255, 0.12);
-    }
-  }
-
-  .terminal-pulse {
-    animation: pulseGlow 4s ease-in-out infinite;
-  }
-
-  /* ===== SCROLLBAR ===== */
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
-  * {
-    scrollbar-width: none;
-  }
-
-  /* ===== SELECTION ===== */
-  ::selection {
-    background: rgba(255, 255, 255, 0.25);
-    color: #fff;
-  }
-  
-  :root.light ::selection {
-    background: rgba(0, 0, 0, 0.2);
-    color: #000;
-  }
-
-  /* ===== RESPONSIVE ===== */
-  @media (max-width: 768px) {
-    .hero-title {
-      font-size: 2.5rem;
-    }
-
-    .trio-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .hero-commands {
-      flex-direction: column;
-    }
-
-    .languages-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .lang-cards {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    .navbar-right {
-      display: none;
-    }
-
-    .footer-top-grid {
-      grid-template-columns: 1fr;
-      gap: 2rem;
-    }
-    
-    .footer-bottom-bar {
-      flex-direction: column;
-      text-align: center;
-      gap: 1rem;
-    }
-
-    .navbar-floating {
-      max-width: 100%;
-    }
-  }
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════════
-   DOCS LAYOUT
-   ═══════════════════════════════════════════════════════════════════════════════ */
-
-/* ── Docs Navbar ──────────────────────────────────────────────────────────── */
-.docs-navbar {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #050505;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(12px);
-}
-
-.docs-navbar-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0.75rem 1.5rem;
-}
-
-.docs-navbar-left {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.docs-navbar-brand {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #ffffff;
-  text-decoration: none;
-  font-weight: 600;
-  font-size: 0.85rem;
-}
-
-.docs-navbar-sep {
-  color: #3f3f46;
-  font-size: 0.9rem;
-}
-
-.docs-navbar-label {
-  color: #a1a1aa;
-  font-size: 0.85rem;
-  font-weight: 500;
-}
-
-.docs-navbar-right {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.docs-hamburger {
-  display: none;
-  background: none;
-  border: none;
-  color: #a1a1aa;
-  cursor: pointer;
-  padding: 0.25rem;
-}
-
-.docs-search-btn {
-  display: flex;
-}
-
-/* ── Docs Layout ──────────────────────────────────────────────────────────── */
-.docs-layout {
-  display: flex;
-  max-width: 1400px;
-  margin: 0 auto;
-  min-height: calc(100vh - 54px);
-}
-
-/* ── Sidebar ──────────────────────────────────────────────────────────────── */
-.docs-sidebar {
-  position: sticky;
-  top: 54px;
-  width: 260px;
-  min-width: 260px;
-  height: calc(100vh - 54px);
-  overflow-y: scroll; /* Force scrollbar to be visible */
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
-  background: var(--bg);
-  scrollbar-width: thin;
-  scrollbar-color: #ffffff transparent;
-}
-
-.docs-sidebar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.docs-sidebar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.docs-sidebar::-webkit-scrollbar-thumb {
-  background: #ffffff;
-  border-radius: 3px;
-}
-
-.docs-sidebar::-webkit-scrollbar-thumb:hover {
-  background: #e4e4e7;
-}
-
-:root.light .docs-sidebar {
-  scrollbar-color: #000000 transparent;
-  border-right-color: rgba(0, 0, 0, 0.1);
-}
-
-:root.light .docs-sidebar::-webkit-scrollbar-thumb {
-  background: #000000;
-}
-
-:root.light .docs-sidebar::-webkit-scrollbar-thumb:hover {
-  background: #3f3f46;
-}
-
-.docs-sidebar ::selection {
-  background: rgba(255, 255, 255, 0.25);
-  color: #fff;
-}
-
-.docs-sidebar a::selection {
-  background: rgba(255, 255, 255, 0.25);
-  color: #fff;
-}
-
-:root.light .docs-sidebar ::selection {
-  background: rgba(0, 0, 0, 0.2);
-  color: #000;
-}
-
-:root.light .docs-sidebar a::selection {
-  background: rgba(0, 0, 0, 0.2);
-  color: #000;
-}
-
-.docs-sidebar-inner {
-  padding: 1.5rem 1rem;
-}
-
-.docs-sidebar-section {
-  margin-bottom: 1.5rem;
-}
-
-.docs-sidebar-title {
-  font-size: 0.65rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: #737373;
-  margin-bottom: 0.5rem;
-  padding: 0 0.5rem;
-}
-
-.docs-sidebar-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.docs-sidebar-link {
-  display: block;
-  padding: 0.35rem 0.5rem;
-  font-size: 0.75rem;
-  color: #a1a1aa;
-  text-decoration: none;
-  border-radius: 6px;
-  transition: all 0.15s ease;
-}
-
-.docs-sidebar-link:hover {
-  color: #ffffff;
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.docs-sidebar-link-active {
-  color: #ffffff;
-  background: rgba(255, 255, 255, 0.08); /* Dark mode active */
-}
-
-:root.light .docs-sidebar-link {
-  color: #71717a;
-}
-
-:root.light .docs-sidebar-link:hover {
-  color: #000000;
-  background: rgba(0, 0, 0, 0.04);
-}
-
-:root.light .docs-sidebar-link-active {
-  color: #ffffff !important;
-  background: #000000 !important;
-}
-
-.docs-sidebar-overlay {
-  display: none;
-}
-
-/* ── Main Content ─────────────────────────────────────────────────────────── */
-.docs-main {
-  flex: 1;
-  min-width: 0;
-  padding: 2.5rem 3rem 5rem;
-}
-
-.docs-content {
-  max-width: 760px;
-}
-
-.docs-content h1 {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--text);
-  margin-bottom: 0.75rem;
-  letter-spacing: -0.02em;
-}
-
-.docs-content h2 {
-  font-size: 1.35rem;
-  font-weight: 600;
-  color: var(--text);
-  margin-top: 2.5rem;
-  margin-bottom: 0.75rem;
-  letter-spacing: -0.01em;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.docs-content h3 {
-  font-size: 1.05rem;
-  font-weight: 600;
-  color: var(--text);
-  margin-top: 1.75rem;
-  margin-bottom: 0.5rem;
-}
-
-.docs-content p {
-  font-size: 0.9rem;
-  line-height: 1.7;
-  color: var(--text-secondary);
-  margin-bottom: 1rem;
-}
-
-.docs-lead {
-  font-size: 1rem !important;
-  color: var(--text-secondary) !important;
-  line-height: 1.8 !important;
-  margin-bottom: 1.5rem !important;
-}
-
-.docs-divider {
-  border: none;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  margin: 1.5rem 0 2rem;
-}
-
-.docs-content ul, .docs-content ol {
-  padding-left: 1.25rem;
-  margin-bottom: 1rem;
-}
-
-.docs-content li {
-  font-size: 0.9rem;
-  line-height: 1.7;
-  color: var(--text-secondary);
-  margin-bottom: 0.35rem;
-}
-
-.docs-content code {
-  font-family: var(--font-jetbrains), monospace;
-  font-size: 0.8rem;
-  padding: 0.15rem 0.4rem;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 4px;
-  color: var(--text);
-}
-
-.docs-content a {
-  color: var(--text);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  transition: opacity 0.15s;
-}
-
-.docs-content a:hover {
-  opacity: 0.7;
-}
-
-/* ── Code Blocks ──────────────────────────────────────────────────────────── */
-.docs-codeblock {
-  margin-bottom: 1.25rem;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: #0a0a0a;
-}
-
-.docs-codeblock-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background: rgba(255, 255, 255, 0.03);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  font-size: 0.7rem;
-  color: #737373;
-}
-
-.docs-codeblock-body {
-  position: relative;
-  padding: 1rem 1.25rem;
-  overflow-x: auto;
-}
-
-.docs-codeblock-body pre {
-  margin: 0;
-}
-
-.docs-codeblock-body code {
-  font-family: var(--font-jetbrains), monospace;
-  font-size: 0.75rem;
-  line-height: 1.7;
-  color: #e5e5e5;
-  background: none;
-  border: none;
-  padding: 0;
-}
-
-.docs-codeblock-copy {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: #737373;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.6rem;
-  transition: all 0.15s ease;
-  opacity: 0;
-}
-
-.docs-codeblock-body:hover .docs-codeblock-copy {
-  opacity: 1;
-}
-
-.docs-codeblock-copy:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
-}
-
-/* ── Tables ───────────────────────────────────────────────────────────────── */
-.docs-table-wrapper {
-  overflow-x: auto;
-  margin-bottom: 1.25rem;
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.docs-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.8rem;
-}
-
-.docs-table th {
-  text-align: left;
-  padding: 0.6rem 1rem;
-  font-weight: 600;
-  color: var(--text);
-  background: rgba(255, 255, 255, 0.03);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  font-size: 0.75rem;
-}
-
-.docs-table td {
-  padding: 0.5rem 1rem;
-  color: var(--text-secondary);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-}
-
-.docs-table tr:last-child td {
-  border-bottom: none;
-}
-
-/* ── Severity badges ──────────────────────────────────────────────────────── */
-.docs-severity-breaking {
-  color: #ef4444 !important;
-  background: rgba(239, 68, 68, 0.1) !important;
-  border-color: rgba(239, 68, 68, 0.2) !important;
-}
-
-.docs-severity-warning {
-  color: #eab308 !important;
-  background: rgba(234, 179, 8, 0.1) !important;
-  border-color: rgba(234, 179, 8, 0.2) !important;
-}
-
-.docs-severity-safe {
-  color: #10b981 !important;
-  background: rgba(16, 185, 129, 0.1) !important;
-  border-color: rgba(16, 185, 129, 0.2) !important;
-}
-
-/* ── Pipeline diagram ─────────────────────────────────────────────────────── */
-.docs-pipeline {
-  margin: 1.5rem 0;
-}
-
-.docs-pipeline-step {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  padding: 1rem;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.docs-pipeline-step strong {
-  color: var(--text);
-  display: block;
-  margin-bottom: 0.25rem;
-  font-size: 0.9rem;
-}
-
-.docs-pipeline-step p {
-  margin: 0;
-  font-size: 0.8rem;
-}
-
-.docs-pipeline-num {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--text);
-  font-size: 0.7rem;
-  font-weight: 700;
-}
-
-.docs-pipeline-arrow {
-  text-align: center;
-  color: #3f3f46;
-  font-size: 0.9rem;
-  padding: 0.25rem 0;
-}
-
-/* ── Rules list ───────────────────────────────────────────────────────────── */
-.docs-rules-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.docs-rule-card {
-  padding: 1rem 1.25rem;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.docs-rule-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.docs-rule-id {
-  font-size: 0.7rem !important;
-  font-weight: 700;
-  padding: 0.15rem 0.4rem !important;
-}
-
-.docs-rule-card p {
-  font-size: 0.8rem;
-  margin-bottom: 0.5rem;
-}
-
-.docs-rule-meta {
-  font-size: 0.7rem;
-  color: #737373;
-  margin-bottom: 0.35rem;
-}
-
-.docs-rule-example {
-  padding: 0.5rem 0.75rem;
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.docs-rule-example code {
-  font-size: 0.7rem !important;
-  background: none !important;
-  border: none !important;
-  padding: 0 !important;
-  color: var(--text-secondary) !important;
-}
-
-/* ── Search Modal ─────────────────────────────────────────────────────────── */
-.search-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 15vh;
-  animation: search-fade-in 0.15s ease;
-}
-
-@keyframes search-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.search-modal {
-  width: 560px;
-  max-width: 90vw;
-  background: #0a0a0a;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
-}
-
-.search-input-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.search-input {
-  flex: 1;
-  background: none;
-  border: none;
-  outline: none;
-  color: #ffffff;
-  font-size: 0.9rem;
-}
-
-.search-input::placeholder {
-  color: #52525b;
-}
-
-.search-kbd {
-  font-size: 0.6rem;
-  color: #737373;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 0.15rem 0.4rem;
-  border-radius: 4px;
-}
-
-.search-results {
-  max-height: 340px;
-  overflow-y: scroll;
-  scrollbar-width: thin;
-  scrollbar-color: #ffffff transparent;
-}
-
-.search-results::-webkit-scrollbar {
-  width: 6px;
-}
-
-.search-results::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.search-results::-webkit-scrollbar-thumb {
-  background: #ffffff;
-  border-radius: 3px;
-}
-
-.search-results::-webkit-scrollbar-thumb:hover {
-  background: #e4e4e7;
-}
-
-:root.light .search-results {
-  scrollbar-color: #000000 transparent;
-}
-
-:root.light .search-results::-webkit-scrollbar-thumb {
-  background: #000000;
-}
-
-:root.light .search-results::-webkit-scrollbar-thumb:hover {
-  background: #3f3f46;
-}
-
-.search-empty {
-  padding: 2rem;
-  text-align: center;
-  color: #52525b;
-  font-size: 0.85rem;
-}
-
-.search-result {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 0.6rem 1rem;
-  background: none;
-  border: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-  cursor: pointer;
-  text-align: left;
-  gap: 0.75rem;
-  transition: background 0.1s;
-}
-
-.search-result:hover, .search-result-active {
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.search-result-section {
-  font-size: 0.6rem;
-  color: #52525b;
-  min-width: 80px;
-}
-
-.search-result-label {
-  flex: 1;
-  font-size: 0.85rem;
-  color: #e5e5e5;
-}
-
-.search-result-arrow {
-  color: #3f3f46;
-  opacity: 0;
-  transition: opacity 0.1s;
-}
-
-.search-result:hover .search-result-arrow,
-.search-result-active .search-result-arrow {
-  opacity: 1;
-}
-
-.search-footer {
-  display: flex;
-  gap: 1.25rem;
-  padding: 0.6rem 1rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-  font-size: 0.6rem;
-  color: #52525b;
-}
-
-.search-footer kbd {
-  font-size: 0.6rem;
-  color: #737373;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 0.1rem 0.3rem;
-  border-radius: 3px;
-  margin-right: 0.25rem;
-}
-
-/* ── Mobile responsive ────────────────────────────────────────────────────── */
-@media (max-width: 768px) {
-  .docs-hamburger {
-    display: flex;
-  }
-
-  .docs-sidebar {
-    position: fixed;
-    left: -280px;
-    top: 54px;
-    z-index: 200;
-    width: 280px;
-    min-width: 280px;
-    transition: left 0.25s ease;
-    background: var(--bg);
-  }
-
-  .docs-sidebar-open {
-    left: 0;
-  }
-
-  .docs-sidebar-overlay {
-    display: block;
-    position: fixed;
-    inset: 0;
-    z-index: 199;
-    background: rgba(0, 0, 0, 0.5);
-  }
-
-  .docs-main {
-    padding: 1.5rem 1rem 3rem;
-  }
-
-  .docs-content h1 {
-    font-size: 1.5rem;
-  }
-
-  .docs-content h2 {
-    font-size: 1.15rem;
-  }
-
-  .docs-search-btn .navbar-search-text,
-  .docs-search-btn .navbar-search-kbd {
-    display: none;
-  }
-}
-
-/* ── Sidebar collapsible ──────────────────────────────────────────────────── */
-.docs-sidebar-title-collapsible {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  user-select: none;
-}
-
-.docs-sidebar-title-collapsible:hover {
-  color: #a1a1aa;
-}
-
-.docs-sidebar-chevron {
-  transition: transform 0.2s ease;
-}
-
-.docs-sidebar-chevron-open {
-  transform: rotate(90deg);
-}
-
-/* ── Rule detail page ─────────────────────────────────────────────────────── */
-.docs-rule-page-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-}
-
-.docs-rule-page-id {
-  font-size: 0.75rem !important;
-  font-weight: 700;
-  padding: 0.2rem 0.5rem !important;
-  background: rgba(255, 255, 255, 0.08) !important;
-  border-color: rgba(255, 255, 255, 0.12) !important;
-}
-
-.docs-rule-page-target {
-  font-size: 0.65rem;
-  color: #737373;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/* ── Rule comparison panels ───────────────────────────────────────────────── */
-.docs-rule-comparison {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-.docs-rule-comparison-panel {
-  min-width: 0;
-}
-
-.docs-rule-comparison-label {
-  font-size: 0.65rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 0.4rem 0.75rem;
-  border-radius: 6px 6px 0 0;
-  margin-bottom: -1px;
-  position: relative;
-  z-index: 1;
-}
-
-.docs-rule-comparison-before {
-  color: #a1a1aa;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-bottom: none;
-}
-
-.docs-rule-comparison-after {
-  color: #f87171;
-  background: rgba(239, 68, 68, 0.04);
-  border: 1px solid rgba(239, 68, 68, 0.1);
-  border-bottom: none;
-}
-
-/* ── Callout box ──────────────────────────────────────────────────────────── */
-.docs-callout {
-  padding: 1rem 1.25rem;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-left: 3px solid #a1a1aa;
-  margin-bottom: 1.5rem;
-}
-
-.docs-callout p {
-  margin: 0;
-  font-size: 0.85rem;
-  line-height: 1.7;
-  color: var(--text-secondary);
-}
-
-/* ── Language badges ──────────────────────────────────────────────────────── */
-.docs-rule-langs {
-  display: flex;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-  margin-bottom: 1rem;
-}
-
-.docs-rule-lang-badge {
-  font-size: 0.65rem;
-  font-weight: 500;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  color: #a1a1aa;
-  font-family: var(--font-jetbrains), monospace;
-}
-
-/* ── Related rules ────────────────────────────────────────────────────────── */
-.docs-related-rules {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.docs-related-rule-link {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.6rem 0.75rem;
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(255, 255, 255, 0.02);
-  text-decoration: none !important;
-  transition: background 0.15s ease;
-}
-
-.docs-related-rule-link:hover {
-  background: rgba(255, 255, 255, 0.04);
-  opacity: 1 !important;
-}
-
-.docs-related-rule-link code {
-  font-size: 0.7rem !important;
-  font-weight: 700;
-}
-
-.docs-related-rule-link span {
-  flex: 1;
-  font-size: 0.8rem;
-  color: var(--text);
-}
-
-/* ── Rule navigation ──────────────────────────────────────────────────────── */
-.docs-rule-nav {
-  margin-top: 3rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.docs-rule-nav a {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-}
-
-/* ── Clickable rule cards ─────────────────────────────────────────────────── */
-.docs-rule-card-link {
-  text-decoration: none !important;
-  display: block;
-}
-
-.docs-rule-card-link:hover .docs-rule-card {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(255, 255, 255, 0.12);
-}
-
-.docs-rule-card-link:hover {
-  opacity: 1 !important;
-}
-
-/* ── Mobile: comparison stacks vertically ─────────────────────────────────── */
-@media (max-width: 768px) {
-  .docs-rule-comparison {
-    grid-template-columns: 1fr;
+  .flex-responsive {
+    @apply flex flex-col md:flex-row gap-4 md:gap-6;
   }
 }
\ No newline at end of file