Update style.css

style.css

@@ -1,85 +1,81 @@
-:root{
-  --bg:#071017;
-  --panel:#0e2a32;
-  --muted:#98a6ad;
-  --accent:#18a0e0;
-  --accent-2:#0bb1ff;
-  --glass: rgba(255,255,255,0.03);
-  --card: rgba(255,255,255,0.03);
-  --radius:12px;
-  font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Arial;
-}
+/* ==========================================
+# File: styles.css
+# Small layer of utilities on top of Tailwind
+# ========================================== */
 
-*{box-sizing:border-box}
-html,body{height:100%;margin:0}
-body{
-  background: linear-gradient(180deg,var(--bg), #051014);
-  color:#dbeef8;
-  -webkit-font-smoothing:antialiased;
+: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;
+}
+.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;
+}
+.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; }
 
-/* container */
-.container{width:min(1200px,94%);margin:0 auto;padding:0 16px}
-
-/* header */
-.site-header{
-  position:sticky;top:0;z-index:40;background:rgba(2,8,10,0.5);backdrop-filter:blur(6px);
-  border-bottom:1px solid rgba(255,255,255,0.03)
-}
-.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
-.brand{display:flex;align-items:center;gap:12px}
-.logo{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 6px 18px rgba(11,177,255,0.06)}
-.brand-name{font-weight:700;color:#eaf6ff}
-
-/* nav */
-.nav-links{display:flex;gap:20px;align-items:center}
-.nav-link{color:rgba(255,255,255,0.72);text-decoration:none;font-weight:500;cursor:pointer}
-.nav-link:hover{color:var(--accent)}
-.nav-link.active{color:var(--accent);font-weight:700}
+.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;
+}
 
-/* buttons */
-.btn{border-radius:10px;padding:8px 12px;font-weight:600;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px}
-.btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#002229;padding:10px 14px}
-.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);padding:8px 12px}
-.btn-muted{background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.9)}
-.small{padding:6px 8px;font-size:13px}
-.large{padding:12px 18px;font-size:16px}
-.full{width:100%}
+.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;
+}
 
-/* hero */
-.hero-section{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center;text-align:center;padding:72px 0;background-image:url('assets/hero.jpg');background-size:cover;background-position:center}
-.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,6,8,0.5), rgba(2,6,8,0.8))}
-.hero-inner{position:relative;z-index:2;max-width:980px;padding:20px}
-.hero-title{font-size:44px;line-height:1.05;margin:0 0 12px;font-weight:800;color:white;text-shadow:0 6px 30px rgba(2,6,8,0.6)}
-.hero-sub{color:rgba(255,255,255,0.85);max-width:820px;margin:0 auto 18px;font-size:17px}
-.hero-ctas{display:flex;gap:12px;justify-content:center}
+.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;
+}
 
-/* gemini card */
-.gemini-card{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,8,0.6);max-width:720px;width:100%}
-.gemini-thumb{width:72px;height:72px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(11,177,255,0.08), rgba(11,177,255,0.03))}
-.gemini-meta{flex:1}
-.gemini-title{margin:0;font-size:18px;font-weight:700;color:#e8f7ff}
-.gemini-desc{margin:6px 0 12px;color:var(--muted);font-size:14px}
-.gemini-actions{display:flex;gap:8px;flex-wrap:wrap}
+.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;
+}
 
-/* modal */
-.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}
-.modal.hidden{display:none}
-.modal-backdrop{position:absolute;inset:0;background:rgba(3,6,8,0.6)}
-.modal-panel{position:relative;background:linear-gradient(180deg, rgba(4,8,10,0.98), rgba(3,6,8,0.98));border-radius:12px;width:min(1100px,96%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,0.04)}
-.modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.03)}
-.modal-header h3{margin:0;font-size:16px}
-.modal-controls{display:flex;gap:8px;align-items:center}
-.modal-body{padding:0;background:#041018;flex:1;display:flex;align-items:center;justify-content:center}
+.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; }
 
-/* iframe container + fallback */
-.iframe-container{width:100%;height:100%;min-height:520px;position:relative;display:flex;align-items:center;justify-content:center}
-.iframe-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);padding:18px;text-align:center}
-.gemini-iframe{width:100%;height:100%;border:0;display:block}
+.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;
+}
 
-/* responsive */
-@media (max-width: 980px){
-  .gemini-card{flex-direction:column;align-items:stretch}
-  .gemini-thumb{align-self:center}
-  .modal-panel{width:96%}
+.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; }
+
+/* Active nav state (scroll spy) */
+.nav-link.active { @apply text-primary font-bold; }