@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200;300;400;600;700&family=DM+Sans:wght@300;400;500;700&display=swap');
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        :root {
            --cream: #FAF7F0;
            --warm-brown: #A67C52;
            --dark-brown: #5C4033;
            --espresso: #2C1810;
            --gold: #C9A961;
            --soft-white: #FFFFFF;
            --shadow-light: rgba(92, 64, 51, 0.08);
            --shadow-medium: rgba(92, 64, 51, 0.15);
            --shadow-heavy: rgba(92, 64, 51, 0.25);
        }
        
        html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
        
        body {
            font-family: 'DM Sans', sans-serif;
            background-color: var(--cream);
            color: var(--dark-brown);
            overflow-x: hidden;
            line-height: 1.6;
            width: 100%;
            position: relative;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%23A67C52" opacity="0.3"/><circle cx="12" cy="12" r="3" fill="%235C4033"/></svg>') 12 12, auto;
        }
        a, button { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="12" fill="%23C9A961" opacity="0.5"/><circle cx="14" cy="14" r="4" fill="%232C1810"/></svg>') 14 14, pointer; }

        /* Skip link — visually hidden until focused (accessibility + SEO) */
        .skip-link {
            position: absolute;
            top: -100%;
            left: 1rem;
            padding: 0.75rem 1.5rem;
            background: var(--gold);
            color: var(--espresso);
            font-weight: 500;
            font-size: 0.875rem;
            border-radius: 0 0 12px 12px;
            text-decoration: none;
            z-index: 99999;
            transition: top 0.2s ease;
        }
        .skip-link:focus { top: 0; }
        
        /* Loading Screen */
        #loading-screen {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            background: linear-gradient(135deg, var(--espresso) 0%, var(--dark-brown) 100%);
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            z-index: 10000; animation: fadeOut 1s ease-in-out 2.8s forwards;
        }
        .loading-logo { font-family: 'Crimson Pro', serif; font-size: 5.5rem; font-weight: 200; letter-spacing: 0.1em; color: var(--cream); opacity: 0; animation: logoReveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; }
        .loading-tagline { font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-top: 1.5rem; opacity: 0; font-weight: 500; animation: taglineReveal 1s ease-out 1s forwards; }
        .loading-brew { width: 60px; height: 3px; background: rgba(201, 169, 97, 0.2); margin-top: 3rem; border-radius: 10px; position: relative; overflow: hidden; opacity: 0; animation: fadeIn 0.5s ease-out 1.5s forwards; }
        .loading-brew::after { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: var(--gold); animation: brewProgress 1.2s ease-in-out 1.5s forwards; border-radius: 10px; }
        @keyframes fadeOut { to { opacity: 0; visibility: hidden; } }
        @keyframes logoReveal { from { opacity: 0; transform: translateY(40px); letter-spacing: 0.5em; } to { opacity: 1; transform: translateY(0); letter-spacing: 0.1em; } }
        @keyframes taglineReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeIn { to { opacity: 1; } }
        @keyframes brewProgress { to { width: 100%; } }
        #main-content { opacity: 0; animation: fadeInContent 1.2s ease-in-out 3.2s forwards; }
        @keyframes fadeInContent { to { opacity: 1; } }
        
        /* Header */
        header { position: fixed; top: 0; left: 0; width: 100%; padding: 2.5rem 6%; background: transparent; z-index: 1000; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
        header.scrolled { padding: 1.5rem 6%; background: rgba(44, 24, 16, 0.98); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 1px 0 rgba(201, 169, 97, 0.1), 0 8px 32px rgba(0, 0, 0, 0.2); }
        .header-content { display: flex; justify-content: space-between; align-items: center; max-width: 1600px; margin: 0 auto; }
        .logo { display: flex; align-items: center; text-decoration: none; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        .logo img { height: 60px; width: auto; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        header.scrolled .logo img { height: 50px; }
        nav { display: flex; gap: 0.5rem; }
        nav a { position: relative; padding: 0.75rem 2rem; color: var(--cream); text-decoration: none; font-size: 0.813rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; border-radius: 50px; }
        nav a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--gold) 0%, var(--warm-brown) 100%); transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; }
        nav a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: var(--gold); transform: translateX(-50%); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        nav a:hover::before { transform: translateY(0); }
        nav a:hover::after { width: 80%; }
        nav a:hover { color: var(--espresso); }
        
        /* Hero */
        .hero { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(160deg, var(--espresso) 0%, var(--dark-brown) 40%, var(--warm-brown) 100%); }
        .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="4" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.03"/></svg>'); opacity: 0.6; animation: grain 8s steps(10) infinite; }
        @keyframes grain { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 20% { transform: translate(-15%, 5%); } 30% { transform: translate(7%, -25%); } 40% { transform: translate(-5%, 25%); } 50% { transform: translate(-15%, 10%); } 60% { transform: translate(15%, 0%); } 70% { transform: translate(0%, 15%); } 80% { transform: translate(3%, 35%); } 90% { transform: translate(-10%, 10%); } }
        .coffee-bean { position: absolute; width: 12px; height: 20px; background: radial-gradient(ellipse at center, var(--warm-brown) 0%, var(--dark-brown) 70%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0.15; animation: float linear infinite; }
        .coffee-bean::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 14px; background: var(--espresso); border-radius: 2px; }
        @keyframes float { 0% { transform: translateY(100vh) rotate(0deg); } 100% { transform: translateY(-100px) rotate(360deg); } }
        .hero-content { position: relative; text-align: center; z-index: 2; animation: heroReveal 1.8s cubic-bezier(0.16, 1, 0.3, 1) 3.5s backwards; max-width: 100%; padding: 0 5%; }
        @keyframes heroReveal { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
        .hero h1 { font-family: 'Crimson Pro', serif; font-size: 8rem; font-weight: 200; color: var(--cream); margin-bottom: 2rem; line-height: 1.1; letter-spacing: 0.02em; max-width: 100%; word-wrap: break-word; }
        .hero-subtitle { font-size: 1.1rem; color: var(--gold); letter-spacing: 0.3em; font-weight: 400; text-transform: uppercase; opacity: 0.9; }
        .hero-buttons { margin-top: 4rem; display: flex; gap: 1.5rem; justify-content: center; align-items: center; }
        .hero-cta { display: inline-block; padding: 1.2rem 3rem; background: transparent; border: 1px solid var(--gold); color: var(--gold); text-decoration: none; font-size: 0.813rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; border-radius: 50px; }
        .hero-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--gold); transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; }
        .hero-cta:hover { color: var(--espresso); border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 10px 40px rgba(201, 169, 97, 0.3); }
        .hero-cta:hover::before { left: 0; }
        .scroll-indicator { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, var(--gold), transparent); animation: scrollPulse 2s ease-in-out infinite; }
        @keyframes scrollPulse { 0%, 100% { opacity: 0.4; transform: translateX(-50%) scaleY(1); } 50% { opacity: 1; transform: translateX(-50%) scaleY(1.5); } }
        
        /* Specialties */
        .specialties { padding: 10rem 6%; background: var(--cream); position: relative; width: 100%; max-width: 100vw; overflow-x: hidden; }
        .specialties::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
        .section-header { max-width: 800px; margin: 0 auto 6rem; text-align: center; }
        .section-label { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--warm-brown); margin-bottom: 1.5rem; font-weight: 500; opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .section-label.visible { opacity: 1; transform: translateY(0); }
        .section-title { font-family: 'Crimson Pro', serif; font-size: 4.5rem; font-weight: 300; color: var(--espresso); margin-bottom: 2rem; line-height: 1.2; opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
        .section-title.visible { opacity: 1; transform: translateY(0); }
        .section-description { font-size: 1.1rem; line-height: 1.8; color: var(--dark-brown); font-weight: 300; opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
        .section-description.visible { opacity: 0.8; transform: translateY(0); }
        .cards-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1600px; margin: 0 auto; }
        .card { background: var(--soft-white); border-radius: 24px; overflow: hidden; box-shadow: 0 4px 24px var(--shadow-light); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; transform: translateY(60px); position: relative; }
        .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, transparent 0%, var(--gold) 100%); opacity: 0; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 1; }
        .card.visible { opacity: 1; transform: translateY(0); }
        .card:nth-child(1).visible { transition-delay: 0.15s; }
        .card:nth-child(2).visible { transition-delay: 0.3s; }
        .card:nth-child(3).visible { transition-delay: 0.45s; }
        .card:hover { transform: translateY(-12px); box-shadow: 0 24px 64px var(--shadow-medium); }
        .card:hover::before { opacity: 0.03; }

        .card-image {
            width: 100%;
            height: 360px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--warm-brown) 0%, var(--dark-brown) 100%);
        }
        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .card:hover .card-image img { transform: scale(1.05); }
        .card-image::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; width: 100%; height: 30%;
            background: linear-gradient(to top, rgba(44, 24, 16, 0.15) 0%, transparent 100%);
            pointer-events: none;
        }

        .card-content { padding: 2.5rem; position: relative; z-index: 2; }
        .card-content h3 { font-family: 'Crimson Pro', serif; font-size: 2rem; font-weight: 400; color: var(--espresso); margin-bottom: 1rem; letter-spacing: 0.02em; }
        .card-content p { font-size: 0.938rem; line-height: 1.8; color: var(--dark-brown); font-weight: 300; opacity: 0.85; }
        
        /* About */
        .about { padding: 10rem 6%; background: linear-gradient(135deg, var(--soft-white) 0%, var(--cream) 100%); position: relative; width: 100%; max-width: 100vw; overflow-x: hidden; }
        .about::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
        .about-container { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center; }
        .about-content { opacity: 0; transform: translateX(-60px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .about-content.visible { opacity: 1; transform: translateX(0); }
        .about-text p { font-size: 1.1rem; line-height: 2; color: var(--dark-brown); margin-bottom: 2rem; font-weight: 300; }
        .about-text p:first-child::first-letter { font-family: 'Crimson Pro', serif; font-size: 4.5rem; font-weight: 300; line-height: 1; float: left; margin: 0.1em 0.2em 0 0; color: var(--gold); }
        .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 4rem; }
        .stat-item { text-align: center; padding: 2rem 1.5rem; background: var(--soft-white); border-radius: 20px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; box-shadow: 0 4px 16px var(--shadow-light); }
        .stat-item::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: var(--gold); opacity: 0; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 10px; }
        .stat-item:hover::before { opacity: 1; width: 60px; }
        .stat-item:hover { transform: translateY(-8px); }
        .stat-number { font-family: 'Crimson Pro', serif; font-size: 4rem; font-weight: 300; color: var(--gold); margin-bottom: 0.5rem; line-height: 1; }
        .stat-label { font-size: 0.813rem; color: var(--warm-brown); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; }

        .about-image {
            width: 100%;
            height: 600px;
            border-radius: 24px;
            overflow: hidden;
            opacity: 0;
            transform: translateX(60px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
            box-shadow: 0 20px 60px var(--shadow-medium);
            object-fit: cover;
            object-position: center;
            display: block;
        }
        .about-image.visible { opacity: 1; transform: translateX(0); }
        
        /* Contact */
        .contact { padding: 10rem 6%; background: var(--cream); position: relative; width: 100%; max-width: 100vw; overflow-x: hidden; }
        .contact::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
        .contact-container { max-width: 900px; margin: 0 auto; }
        .contact-info { display: flex; flex-direction: column; gap: 2rem; opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .contact-info.visible { opacity: 1; transform: translateY(0); }
        .info-item { padding: 2.5rem; background: var(--soft-white); border-radius: 20px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; box-shadow: 0 4px 16px var(--shadow-light); display: flex; align-items: flex-start; gap: 1.5rem; }
        .info-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 0; background: var(--gold); transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 10px; }
        .info-item:hover::before { height: 60%; }
        .info-item:hover { transform: translateX(8px) translateY(-4px); }
        .info-icon { font-size: 2.2rem; opacity: 0.7; flex-shrink: 0; margin-top: 0.2rem; }
        .info-content h3 { font-family: 'Crimson Pro', serif; font-size: 1.6rem; font-weight: 400; color: var(--espresso); margin-bottom: 0.5rem; letter-spacing: 0.02em; }
        .info-content p,
        .info-content address { font-size: 1rem; line-height: 1.8; color: var(--dark-brown); font-weight: 300; opacity: 0.85; font-style: normal; }
        .map-cta { font-size: 0.85rem !important; opacity: 0.55 !important; margin-top: 0.4rem; letter-spacing: 0.03em; }
        
        /* Footer */
        footer { background: var(--espresso); padding: 5rem 6% 3rem; color: var(--cream); width: 100%; max-width: 100vw; overflow-x: hidden; }
        .footer-content { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3rem; }
        .footer-logo { font-family: 'Crimson Pro', serif; font-size: 2.5rem; font-weight: 200; letter-spacing: 0.1em; margin-bottom: 1rem; }
        .social-icons { display: flex; gap: 1.5rem; }
        .social-icon { width: 48px; height: 48px; border-radius: 50%; background: transparent; border: 1px solid rgba(250, 247, 240, 0.2); display: flex; align-items: center; justify-content: center; color: var(--cream); text-decoration: none; font-size: 1.2rem; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; }
        .social-icon::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: var(--gold); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), height 0.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; }
        .social-icon:hover { transform: translateY(-4px); border-color: var(--gold); color: var(--espresso); }
        .social-icon:hover::before { width: 100px; height: 100px; }
        .footer-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3), transparent); margin: 2rem 0; }
        .copyright { font-size: 0.813rem; letter-spacing: 0.1em; opacity: 0.6; text-align: center; font-weight: 300; }
        
        /* Modal */
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44, 24, 16, 0.95); backdrop-filter: blur(10px); z-index: 9999; opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; align-items: center; justify-content: center; }
        .modal.active { display: flex; opacity: 1; }
        .modal-content { background: var(--cream); border-radius: 24px; max-width: 1200px; width: 90%; max-height: 85vh; overflow-y: auto; overflow-x: hidden; padding: 3rem; position: relative; transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
        .modal-content::-webkit-scrollbar { width: 6px; }
        .modal-content::-webkit-scrollbar-track { background: transparent; }
        .modal-content::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; }
        .modal-content::-webkit-scrollbar-thumb:hover { background: var(--warm-brown); }
        .modal.active .modal-content { transform: scale(1); }
        .modal-close { position: sticky; top: 0; float: right; margin-bottom: -40px; width: 40px; height: 40px; border-radius: 50%; background: var(--espresso); color: var(--cream); border: none; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 10; }
        .modal-close:hover { background: var(--gold); color: var(--espresso); transform: rotate(90deg); }
        .modal-header { text-align: center; margin-bottom: 3rem; padding-top: 0.5rem; }
        .modal-header h2 { font-family: 'Crimson Pro', serif; font-size: 3.5rem; font-weight: 300; color: var(--espresso); margin-bottom: 1rem; }
        .modal-header p { font-size: 1.1rem; color: var(--dark-brown); opacity: 0.8; }
        .cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
        .cat-card { background: var(--soft-white); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 24px var(--shadow-light); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        .cat-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px var(--shadow-medium); }
        .cat-image { width: 100%; height: 280px; background: linear-gradient(135deg, var(--warm-brown) 0%, var(--dark-brown) 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
        .cat-image img { width: 100%; height: 100%; object-fit: cover; }
        .cat-info { padding: 1.5rem; }
        .cat-info h3 { font-family: 'Crimson Pro', serif; font-size: 1.5rem; font-weight: 400; color: var(--espresso); margin-bottom: 0.5rem; }
        .menu-carousel-wrapper { position: relative; max-width: 700px; width: 100%; margin: 0 auto; overflow: hidden; border-radius: 16px; background: var(--soft-white); box-shadow: 0 8px 32px var(--shadow-medium); }
        .menu-slides-container { display: flex; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
        .menu-slide { min-width: 100%; display: flex; justify-content: center; align-items: center; }
        .menu-slide img { width: 100%; height: auto; display: block; }
        .menu-nav { position: absolute; top: 50%; transform: translateY(-50%); background: var(--espresso); color: var(--cream); border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; justify-content: center; z-index: 10; }
        .menu-nav:hover { background: var(--gold); color: var(--espresso); transform: translateY(-50%) scale(1.1); }
        .menu-nav.prev { left: 1rem; }
        .menu-nav.next { right: 1rem; }
        .menu-indicators { display: flex; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
        .menu-indicator { width: 12px; height: 12px; border-radius: 50%; background: var(--warm-brown); opacity: 0.3; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border: none; padding: 0; }
        .menu-indicator.active { opacity: 1; background: var(--gold); transform: scale(1.3); }
        .menu-indicator:hover { opacity: 0.7; }
        
        /* Responsive */
        @media (max-width: 1200px) { .hero h1 { font-size: 6rem; } .section-title { font-size: 3.5rem; } }
        @media (max-width: 968px) {
            .hero h1 { font-size: 4.5rem; } .hero-subtitle { font-size: 0.938rem; letter-spacing: 0.25em; } .hero-buttons { margin-top: 3rem; } .hero-cta { padding: 1rem 2.5rem; font-size: 0.75rem; }
            header { padding: 1.5rem 5%; } header.scrolled { padding: 1rem 5%; } .logo img { height: 50px; } header.scrolled .logo img { height: 45px; }
            nav { flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; } nav a { padding: 0.6rem 1.5rem; font-size: 0.75rem; }
            .section-title { font-size: 3rem; } .section-description { font-size: 1rem; }
            .cards-container { grid-template-columns: 1fr; gap: 3rem; } .card-image { height: 300px; }
            .about-container { grid-template-columns: 1fr; gap: 4rem; } .about-stats { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
            .about-image { height: 420px; order: -1; transform: translateX(0); }
            .specialties, .about, .contact { padding: 8rem 5%; } .section-header { margin-bottom: 4rem; }
            .modal-content { padding: 2.5rem 2rem; max-height: 90vh; } .modal-header h2 { font-size: 2.5rem; }
            .cats-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
            .menu-carousel-wrapper { max-width: 100%; } .menu-nav { width: 45px; height: 45px; font-size: 1.3rem; }
        }
        @media (max-width: 640px) {
            .loading-logo { font-size: 3.5rem; } .loading-tagline { font-size: 0.65rem; letter-spacing: 0.2em; }
            .hero { padding: 0 5%; } .hero h1 { font-size: 2.5rem; letter-spacing: 0; } .hero-subtitle { font-size: 0.75rem; letter-spacing: 0.2em; }
            .hero-buttons { margin-top: 2.5rem; flex-direction: column; gap: 1rem; } .hero-cta { padding: 0.9rem 2rem; font-size: 0.7rem; }
            header { padding: 1.25rem 5%; } header.scrolled { padding: 1rem 5%; } .header-content { flex-direction: column; gap: 1rem; }
            .logo img { height: 45px; } header.scrolled .logo img { height: 40px; }
            nav { width: 100%; justify-content: center; } nav a { padding: 0.5rem 1.2rem; font-size: 0.7rem; letter-spacing: 0.08em; }
            .section-header { margin-bottom: 3rem; } .section-label { font-size: 0.65rem; margin-bottom: 1rem; } .section-title { font-size: 2.2rem; margin-bottom: 1.5rem; } .section-description { font-size: 0.938rem; line-height: 1.7; }
            .specialties, .about, .contact { padding: 5rem 5%; }
            .card-image { height: 250px; } .card-content { padding: 2rem 1.5rem; } .card-content h3 { font-size: 1.75rem; } .card-content p { font-size: 0.875rem; line-height: 1.7; }
            .about-text p { font-size: 1rem; line-height: 1.8; margin-bottom: 1.5rem; } .about-text p:first-child::first-letter { font-size: 3.5rem; }
            .about-stats { grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; } .stat-item { padding: 1.75rem 1.5rem; } .stat-number { font-size: 3rem; } .stat-label { font-size: 0.75rem; }
            .about-image { height: 300px; }
            .info-item { flex-direction: column; gap: 0.75rem; padding: 1.75rem 1.5rem; }
            footer { padding: 4rem 5% 2.5rem; } .footer-logo { font-size: 2rem; } .social-icons { gap: 1.25rem; } .social-icon { width: 44px; height: 44px; font-size: 1.1rem; } .copyright { font-size: 0.75rem; line-height: 1.6; }
            .modal-content { width: 95%; padding: 2rem 1.5rem; } .modal-close { width: 36px; height: 36px; font-size: 1.25rem; } .modal-header { margin-bottom: 2rem; } .modal-header h2 { font-size: 2rem; } .modal-header p { font-size: 0.938rem; }
            .cats-grid { grid-template-columns: 1fr; } .cat-image { height: 240px; }
            .menu-nav { width: 40px; height: 40px; font-size: 1.2rem; } .menu-nav.prev { left: 0.5rem; } .menu-nav.next { right: 0.5rem; } .menu-indicators { gap: 0.5rem; margin-top: 1.5rem; } .menu-indicator { width: 10px; height: 10px; }
        }
        @media (max-width: 480px) { .hero h1 { font-size: 2rem; letter-spacing: 0; } .hero-subtitle { font-size: 0.688rem; } .section-title { font-size: 1.875rem; } nav a { padding: 0.45rem 1rem; font-size: 0.65rem; } .card-content h3 { font-size: 1.5rem; } .stat-number { font-size: 2.5rem; } }