* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; background: #1a1a1a; color: #f0f0f0; overflow-x: hidden; }
h1, h3, .logo { font-family: 'Cormorant Garamond', serif; }
a { text-decoration: none; color: inherit; }

/* Switcher & Back Btn */
.demo-switcher { position: fixed; bottom: 20px; right: 20px; background: white; padding: 10px 20px; border-radius: 50px; z-index: 999; display: flex; gap: 10px; font-size: 0.9rem; color: #333; }
.demo-switcher a.active { background: #333; color: white; padding: 2px 10px; border-radius: 10px; }
.agent-back-btn { position: fixed; top: 20px; left: 20px; background: rgba(255,255,255,0.1); color: white; padding: 8px 15px; border-radius: 50px; font-size: 12px; z-index: 999; backdrop-filter: blur(5px); }

/* Header */
.creative-header { padding: 30px 50px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 2rem; font-weight: 700; letter-spacing: 2px; }
.creative-header nav a { margin-left: 30px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; transition: 0.3s; }
.creative-header nav a:hover { opacity: 1; }

/* Hero */
.hero-creative { display: flex; align-items: center; padding: 50px; min-height: 80vh; }
.hero-content { flex: 1; padding-right: 50px; }
.hero-content h1 { font-size: 6rem; line-height: 0.9; margin-bottom: 30px; }
.hero-content p { font-size: 1.2rem; opacity: 0.8; max-width: 400px; border-left: 1px solid #555; padding-left: 20px; }
.hero-img { flex: 1; height: 600px; overflow: hidden; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: 1s; }
.hero-img:hover img { filter: grayscale(0%); transform: scale(1.05); }

/* Gallery */
.gallery-creative { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 100px 50px; }
.gallery-item { position: relative; }
.gallery-item.down { margin-top: 100px; }
.gallery-item img { width: 100%; height: 500px; object-fit: cover; opacity: 0.8; transition: 0.5s; }
.gallery-item:hover img { opacity: 1; }
.gallery-item h3 { font-size: 2rem; margin-top: 15px; font-style: italic; }

/* Footer */
.creative-footer { padding: 50px; text-align: center; border-top: 1px solid #333; color: #555; }

@media (max-width: 768px) {
    .hero-creative { flex-direction: column; padding: 20px; }
    .hero-content h1 { font-size: 4rem; }
    .hero-img { width: 100%; height: 300px; margin-top: 30px; }
    .gallery-creative { grid-template-columns: 1fr; }
    .gallery-item.down { margin-top: 0; }
}