Update style.css

style.css

@@ -1,81 +1,52 @@
 /* ==========================================
 # File: styles.css
-# Small layer of utilities on top of Tailwind
+# Tailwind utility layer + small components
 # ========================================== */
 
-:root { --ring: 2px; }
-.nav-link {
-  @apply text-sm font-medium text-slate-700 hover:text-primary dark:text-slate-200 dark:hover:text-primary;
-}
-.mobile-link {
-  @apply px-3 py-2 rounded text-slate-700 dark:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-700/40;
-}
-.btn-primary {
-  @apply inline-flex items-center justify-center rounded-lg bg-primary px-5 py-2.5 font-bold text-white shadow hover:opacity-90 focus:outline-none focus-visible:ring-[var(--ring)] focus-visible:ring-primary;
-}
-.btn-secondary {
-  @apply inline-flex items-center justify-center rounded-lg bg-white/15 px-5 py-2.5 font-bold text-white ring-1 ring-white/30 hover:bg-white/25 focus:outline-none focus-visible:ring-[var(--ring)] focus-visible:ring-white;
-}
-.pill {
-  @apply rounded-lg bg-primary/10 dark:bg-primary/20 px-4 py-3 font-semibold text-primary dark:text-white;
-}
+.nav-link { @apply text-sm font-medium text-slate-700 hover:text-primary dark:text-slate-200 dark:hover:text-primary; }
+.mobile-link { @apply px-3 py-2 rounded text-slate-700 dark:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-700/40; }
+.btn-primary { @apply inline-flex items-center justify-center rounded-lg bg-primary px-5 py-2.5 font-bold text-white shadow hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary; }
+.btn-secondary { @apply inline-flex items-center justify-center rounded-lg bg-white/15 px-5 py-2.5 font-bold text-white ring-1 ring-white/30 hover:bg-white/25 focus-visible:ring-2 focus-visible:ring-white; }
+.pill { @apply rounded-lg bg-primary/10 dark:bg-primary/20 px-4 py-3 font-semibold text-primary dark:text-white; }
 .h2 { @apply text-3xl sm:text-4xl font-bold tracking-tight; }
 .h3 { @apply text-2xl font-bold; }
 .h4 { @apply text-xl font-bold; }
-.input {
-  @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 placeholder:text-slate-500 focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100;
-}
+.input { @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 placeholder:text-slate-500 focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100; }
 .label { @apply block text-sm font-medium; }
 .link { @apply text-primary hover:underline; }
 .link.muted { @apply text-slate-500 hover:text-primary dark:text-slate-400; }
-.link-chip { @apply mt-3 inline-flex items-center gap-2 self-start rounded bg-primary/10 px-3 py-1.5 text-sm font-semibold text-primary hover:bg-primary/15; }
 .section { @apply py-16 sm:py-24; }
 .container { @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8; }
+.card { @apply flex flex-col gap-2 overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 shadow-soft; }
+.list { @apply list-disc pl-5 text-sm; }
+.muted { @apply opacity-80; }
 
-.card {
-  @apply flex flex-col gap-2 overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 shadow-soft;
-}
-.callout {
-  @apply rounded-xl border border-primary/30 bg-primary/10 dark:bg-primary/20 p-8;
-}
+.filter-chip { @apply rounded-full px-4 py-2 text-sm font-semibold border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800; }
+.filter-chip.active { @apply bg-primary text-white border-primary; }
 
-.filter-chip {
-  @apply rounded-full px-4 py-2 text-sm font-semibold border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800;
-}
-.filter-chip.active {
-  @apply bg-primary text-white border-primary;
-}
-
-.portfolio-card {
-  @apply text-left overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 hover:shadow-lg transition;
-}
-.portfolio-card img {
-  @apply w-full aspect-[4/3] object-cover;
-}
-
-.gallery-card { @apply relative overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 hover:shadow-lg transition; }
-.gallery-img { @apply w-full aspect-video object-cover; }
-.gallery-caption {
-  @apply absolute bottom-0 left-0 right-0 bg-black/50 text-white text-sm px-3 py-2;
-}
+.portfolio-card { @apply text-left overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 hover:shadow-lg transition; }
+.portfolio-card img { @apply w-full aspect-[4/3] object-cover; }
 
 .th { @apply p-4 text-left font-bold; }
-.td-section { @apply p-3 font-bold bg-slate-100 dark:bg-slate-800; }
-.td { @apply p-3; }
-
-.quote {
-  @apply rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 shadow-soft;
-}
-.about-card {
-  @apply p-4 rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60;
-}
+.td { @apply p-3 align-top; }
 
-.chip {
-  @apply inline-flex items-center gap-2 rounded-full border border-slate-300 dark:border-slate-600 px-3 py-1.5 text-sm cursor-pointer select-none;
-}
-.chip input { @apply sr-only; }
-.chip span { @apply inline-block; }
-.chip:has(input:checked) { @apply bg-primary text-white border-primary; }
+.quote { @apply rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 shadow-soft; }
+.about-card { @apply p-4 rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60; }
 
-/* Active nav state (scroll spy) */
 .nav-link.active { @apply text-primary font-bold; }
+
+/* Slider */
+.slider { position: relative; }
+.slide { display: none; }
+.slide.is-active { display: block; }
+.slider-btn {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  background: rgba(0,0,0,.45); color: #fff; border-radius: 9999px;
+  padding: .4rem .7rem; font-size: 1.5rem; line-height: 1; z-index: 10;
+}
+.slider-btn.prev { left: .5rem; }
+.slider-btn.next { right: .5rem; }
+.demo-pill {
+  position: absolute; bottom: .75rem; right: .75rem; z-index: 10;
+  background: rgba(17,147,212,.9); color: #fff; padding: .45rem .7rem; border-radius: .5rem; font-weight: 700;
+}