:root {
    --primary: #FF6B6B;
    --secondary: #4ECDC4;
    --dark: #2C3E50;
    --light: #F8F9FA;
    --gradient: linear-gradient(135deg, #FF6B6B, #FF8E53);
}
body { font-family: 'Poppins', sans-serif; color: var(--dark); line-height: 1.6; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; }
.logo-chroma { color: var(--primary); font-weight: 700; }
.logo-design { color: var(--secondary); font-weight: 700; }
.logo-lab { color: var(--dark); font-weight: 300; font-size: 0.9em; vertical-align: super; }
.btn-gradient { background: var(--gradient); color: #fff; border: none; padding: 0.7rem 2rem; border-radius: 50px; font-weight: 600; transition: 0.3s; }
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,107,107,0.4); color: #fff; }
.navbar { transition: 0.3s; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); }
.navbar.shadow { padding: 0.5rem 0; }
.hero-section { min-height: 100vh; padding-top: 100px; background: linear-gradient(135deg, #f5f7fa, #c3cfe2); }
.text-gradient { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.service-card, .blog-card { border-radius: 16px; transition: 0.3s; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; }
.icon-box { width: 70px; height: 70px; margin: 0 auto 1rem; background: var(--light); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.portfolio-item { position: relative; overflow: hidden; border-radius: 16px; cursor: pointer; }
.portfolio-item img { transition: 0.5s; }
.portfolio-item:hover img { transform: scale(1.1); }
.portfolio-overlay { position: absolute; inset: 0; background: rgba(255,107,107,0.9); opacity: 0; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.bg-gradient-primary { background: var(--gradient); }
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--dark); color: #fff; padding: 1rem 0; z-index: 9999; display: none; transform: translateY(100%); transition: transform 0.4s; }
.cookie-banner.show { display: block; transform: translateY(0); }
footer a:hover { color: var(--primary) !important; }
@media (max-width: 768px) { .hero-section { padding-top: 120px; text-align: center; } .stats { justify-content: center; } }