html, body { height: 100%; margin: 0; }
* { box-sizing: border-box; }
.font-syne { font-family: 'Satoshi', sans-serif; letter-spacing: -0.02em; }
.font-outfit { font-family: 'Inter', sans-serif; }


.app-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }

.service-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.service-card:hover { transform: translateY(-8px) scale(1.02); }
.service-card:hover .card-glow { opacity: 1; }
.card-glow { transition: opacity 0.4s ease; opacity: 0; }

.project-thumb { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.project-thumb:hover { transform: scale(1.03); }
.project-thumb:hover .thumb-overlay { opacity: 1; }
.thumb-overlay { transition: opacity 0.3s ease; }

.fade-up { opacity: 0; transform: translateY(30px); animation: fadeUp 0.7s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; transition: width 0.3s ease; }
.nav-link:hover::after { width: 100%; }

.grain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03; pointer-events: none; z-index: 999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.cta-btn { transition: all 0.3s ease; position: relative; overflow: hidden; }
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }

.back-btn { transition: all 0.3s ease; }
.back-btn:hover { transform: translateX(-4px); }

.page-transition { animation: pageFade 0.4s ease forwards; }
@keyframes pageFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

body { box-sizing: border-box; }