@layer base {
    html { scroll-behavior: smooth; }
    body { background: #09090B; overflow-x: hidden; }
    h1, h2, h3, h4, .font-heading { font-family: 'Syne', sans-serif; }
}

:root {
    --noir: #09090B;
    --surface: #18181B;
    --primary: #EF4444;
    --gold: #FBBF24;
    --muted: #A1A1AA;
    --line: rgba(255,255,255,.11);
}

.glass { background: rgba(24,24,27,.58); border: 1px solid var(--line); box-shadow: 0 20px 80px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.gradient-text { background: linear-gradient(115deg, #fff 5%, #EF4444 46%, #FBBF24 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hover-glow { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease; }
.hover-glow:hover { transform: translateY(-6px); border-color: rgba(251,191,36,.4); box-shadow: 0 24px 80px rgba(239,68,68,.18), 0 0 0 1px rgba(251,191,36,.08); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > *:nth-child(1) { transition-delay: .05s; } .reveal-stagger > *:nth-child(2) { transition-delay: .12s; } .reveal-stagger > *:nth-child(3) { transition-delay: .19s; } .reveal-stagger > *:nth-child(4) { transition-delay: .26s; } .reveal-stagger > *:nth-child(5) { transition-delay: .33s; } .reveal-stagger > *:nth-child(6) { transition-delay: .4s; }
.grid-overlay { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black 0%, transparent 82%); }
.orb { position:absolute; border-radius:9999px; filter: blur(90px); opacity:.28; animation: drift 12s ease-in-out infinite alternate; pointer-events:none; }
.orb-red { background:#EF4444; } .orb-gold { background:#FBBF24; animation-delay:-4s; } .orb-dark { background:#7f1d1d; animation-delay:-7s; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(25px,-20px,0) scale(1.12); } }
.nav-link { position:relative; } .nav-link::after { content:''; position:absolute; left:0; right:0; bottom:-7px; height:1px; background:#FBBF24; transform:scaleX(0); transform-origin:left; transition:transform .35s ease; } .nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }
.project-cover { aspect-ratio: 4/3; overflow:hidden; } .project-cover img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease; filter:saturate(.8) contrast(1.08); } .project-card:hover .project-cover img { transform:scale(1.06); filter:saturate(1.1) contrast(1.08); }
.noir-noise { position:relative; } .noir-noise::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.mobile-menu { display:none; } .mobile-menu.is-open { display:flex; }
@media (max-width: 767px) { .grid-overlay { background-size:42px 42px; } .orb { filter:blur(64px); } }