:root {
  --background: 38 55% 94%;
  --foreground: 225 29% 13%;
  --primary: 42 72% 45%;
  --primary-foreground: 38 55% 96%;
  --secondary: 225 29% 25%;
  --secondary-foreground: 38 55% 96%;
  --muted: 38 28% 86%;
  --muted-foreground: 225 15% 39%;
  --destructive: 2 70% 48%;
  --border: 38 26% 75%;
  --card: 38 55% 98%;
  --shadow-sm: 0 8px 24px hsl(225 29% 13% / 0.08);
  --shadow-md: 0 16px 45px hsl(225 29% 13% / 0.12);
  --shadow-lg: 0 28px 80px hsl(225 29% 13% / 0.18);
  --transition-fast: all 0.3s ease;
  --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
}
.dark {
  --background: 225 29% 8%;
  --foreground: 38 55% 94%;
  --primary: 42 72% 62%;
  --primary-foreground: 225 29% 10%;
  --secondary: 38 55% 80%;
  --secondary-foreground: 225 29% 10%;
  --muted: 225 22% 15%;
  --muted-foreground: 38 20% 72%;
  --destructive: 2 70% 58%;
  --border: 38 18% 26%;
  --card: 225 24% 12%;
  --shadow-sm: 0 8px 24px hsl(0 0% 0% / 0.22);
  --shadow-md: 0 16px 45px hsl(0 0% 0% / 0.32);
  --shadow-lg: 0 30px 90px hsl(0 0% 0% / 0.48);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Montserrat, system-ui, sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); overflow-x: hidden; }
button, a, input, textarea { transition: var(--transition-smooth); }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid hsl(var(--primary) / 0.45); outline-offset: 3px; }
.font-serif { font-family: 'Playfair Display', Georgia, serif; }
.glass { background: hsl(var(--card) / 0.72); backdrop-filter: blur(22px); }
.luxury-bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 15% 15%, hsl(var(--primary) / 0.22), transparent 30%), radial-gradient(circle at 80% 20%, hsl(var(--secondary) / 0.16), transparent 30%), radial-gradient(circle at 50% 90%, hsl(var(--primary) / 0.12), transparent 28%); animation: gradientFloat 12s ease-in-out infinite alternate; }
.luxury-bg::after { content: ''; position: absolute; inset: 0; opacity: 0.24; background-image: radial-gradient(hsl(var(--foreground) / 0.18) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
@keyframes gradientFloat { from { transform: scale(1) translateY(0); } to { transform: scale(1.08) translateY(-18px); } }
.nav-link { color: hsl(var(--muted-foreground)); position: relative; }
.nav-link::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; transform: scaleX(0); background: hsl(var(--primary)); transition: var(--transition-smooth); }
.nav-link:hover, .nav-link.active { color: hsl(var(--foreground)); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.reveal { animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.delay-2 { animation-delay: 0.2s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.typing-lines { animation: roleSlide 8s steps(4) infinite; }
@keyframes roleSlide { to { transform: translateY(-100%); } }
.profile-card { background: linear-gradient(145deg, hsl(var(--card) / 0.72), hsl(var(--primary) / 0.16)); }
.profile-art { background: radial-gradient(circle at 30% 20%, hsl(var(--primary) / 0.55), transparent 30%), linear-gradient(135deg, hsl(var(--secondary) / 0.55), hsl(var(--background) / 0.25)); animation: slowZoom 8s ease-in-out infinite alternate; }
@keyframes slowZoom { from { transform: scale(0.98); } to { transform: scale(1.02); } }
.section { scroll-margin-top: 96px; }
.eyebrow { display: inline-flex; margin-bottom: 0.85rem; border-radius: 999px; padding: 0.45rem 0.9rem; background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }
.section-title { max-width: 760px; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; }
.project-card { transition: var(--transition-smooth); }
.project-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: hsl(var(--primary) / 0.45); }
.project-image { position: relative; overflow: hidden; transition: var(--transition-smooth); }
.project-card:hover .project-image { transform: scale(1.03); }
.project-image span { position: absolute; right: 1rem; top: 1rem; border-radius: 999px; padding: 0.45rem 0.8rem; background: hsl(var(--background) / 0.36); color: white; font-weight: 800; backdrop-filter: blur(12px); }
.skill-fill { animation: loadBar 1.4s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: left; }
@keyframes loadBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.timeline-item { position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -0.55rem; top: 2rem; width: 0.9rem; height: 0.9rem; border-radius: 999px; background: hsl(var(--primary)); box-shadow: 0 0 0 8px hsl(var(--primary) / 0.14); }
.form-label { display: block; margin: 1rem 0 0.45rem; font-weight: 800; }
.form-input { width: 100%; min-height: 50px; border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--background) / 0.62); padding: 0.9rem 1rem; color: hsl(var(--foreground)); font-size: max(16px, 1rem); transition: var(--transition-smooth); }
.form-input:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 4px hsl(var(--primary) / 0.14); }
.magnetic:hover { transform: translateY(-3px) scale(1.02); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }
@media (max-width: 767px) { .section { scroll-margin-top: 84px; } .timeline-item::before { display: none; } }