body, html { margin: 0; padding: 0; font-family: "DM Sans", sans-serif; background: transparent; }

#video-canvas { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    object-fit: cover; 
    z-index: 0; 
    transition: filter 0.8s ease; 
}
#video-canvas.blurred {
    filter: blur(8px);
}

#scroll-container { 
    height: 250vh; 
}

.content { 
    position: relative;
    z-index: 10; 
    background: var(--cream);
    color: var(--text);
    line-height: 1.6;
}

:root {
    --green: #044330;
    --green-dark: #022d20;
    --green-light: #0a5b43;
    --gold: #E5AE38;
    --gold-light: #f1c765;
    --cream: #f7f5ef;
    --white: #ffffff;
    --text: #1d2521;
    --muted: #747b77;
    --border: rgba(4, 67, 48, .12);
    --shadow: 0 15px 45px rgba(4, 67, 48, .10);
    --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.modal-open { overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }

/* FLOATING ELEMENTS */
#floating-logo {
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -300%);
    width: 200px;
    height: 200px;
    border: 3px solid var(--cream);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    z-index: 1000;
    opacity: 0;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}
#floating-logo.visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

#floating-reservation {
    position: fixed;
    bottom: 15%;
    left: 50%;
    transform: translate(-50%, 300%);
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    opacity: 0;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}
#floating-reservation.visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

/* HERO */
.hero { min-height: 620px; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: white; background: linear-gradient(rgba(2, 45, 32, .76), rgba(4, 67, 48, .84)), url("https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=2000&q=85") center / cover; }
.hero-content { max-width: 850px; padding: 40px 20px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px; }
.eyebrow::before, .eyebrow::after { content: ""; width: 35px; height: 1px; background: var(--gold); }
.hero h1 { font-family: "Playfair Display", serif; font-size: clamp(48px, 8vw, 92px); line-height: .95; margin-bottom: 25px; }
.hero p { max-width: 650px; margin: 0 auto 35px; font-size: 18px; color: rgba(255,255,255,.86); }
.hero-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.reservation-button { border: 0; background: var(--gold); color: var(--green-dark); padding: 15px 28px; border-radius: 50px; font-weight: 700; font-size: 15px; transition: .25s ease; }
.reservation-button:hover { background: var(--gold-light); transform: translateY(-2px); }
.outline-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.4); color: white; text-decoration: none; padding: 14px 28px; border-radius: 50px; font-weight: 600; transition: .25s ease; }
.outline-button:hover { background: rgba(255,255,255,.1); }

/* INTRO */
.intro { max-width: 850px; margin: 0 auto; text-align: center; padding: 80px 20px 45px; }
.intro h2 { font-family: "Playfair Display", serif; font-size: clamp(34px, 5vw, 52px); color: var(--green); margin-bottom: 15px; }
.intro p { color: var(--muted); font-size: 17px; }

/* MENU */
.menu-section { max-width: 1250px; margin: auto; padding: 25px 20px 90px; }
.menu-toolbar { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.search-box { position: relative; flex: 1; min-width: 250px; }
.search-box input { width: 100%; border: 1px solid var(--border); background: white; padding: 14px 18px 14px 45px; border-radius: 50px; outline: none; transition: .2s ease; }
.search-box input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(229,174,56,.12); }
.search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.categories { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
.categories::-webkit-scrollbar { display: none; }
.category-button { flex: 0 0 auto; border: 1px solid var(--border); background: white; color: var(--green); padding: 10px 17px; border-radius: 50px; font-size: 14px; font-weight: 600; transition: .2s ease; }
.category-button:hover { border-color: var(--gold); }
.category-button.active { background: var(--green); color: white; border-color: var(--green); }

/* CATEGORY & CARDS */
.menu-category { margin-top: 55px; }
.category-title { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; }
.category-title h2 { font-family: "Playfair Display", serif; font-size: 32px; color: var(--green); white-space: nowrap; }
.category-title::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dish-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; cursor: pointer; }
.dish-card:hover { transform: translateY(-5px); box-shadow: 0 20px 55px rgba(4,67,48,.16); }
.dish-image { height: 220px; overflow: hidden; position: relative; }
.dish-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dish-card:hover .dish-image img { transform: scale(1.05); }
.dish-content { padding: 20px; }
.dish-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 8px; }
.dish-name { color: var(--green); font-family: "Playfair Display", serif; font-size: 21px; line-height: 1.2; }
.dish-price { color: var(--gold); font-weight: 800; font-size: 17px; white-space: nowrap; }
.dish-description { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* CTA & FOOTER */
.reservation-section { background: var(--green); color: white; text-align: center; padding: 80px 20px; margin-top: 20px; }
.reservation-section h2 { font-family: "Playfair Display", serif; font-size: clamp(34px, 5vw, 52px); margin-bottom: 15px; }
.reservation-section p { max-width: 600px; margin: 0 auto 30px; color: rgba(255,255,255,.75); }
footer { background: var(--green-dark); color: white; text-align: center; padding: 35px 20px; }
footer strong { color: var(--gold); font-family: "Playfair Display", serif; font-size: 22px; }
footer p { color: rgba(255,255,255,.55); font-size: 13px; margin-top: 7px; }

/* MODALS */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; opacity: 0; visibility: hidden; transition: .25s ease; }
.modal.active { opacity: 1; visibility: visible; }
.modal-card, .reservation-modal-card { background: white; border-radius: 22px; position: relative; transform: translateY(20px); transition: .25s ease; }
.modal-card { width: min(700px, 100%); max-height: 90vh; overflow-y: auto; }
.reservation-modal-card { width: min(620px, 100%); max-height: 92vh; overflow-y: auto; padding: 38px; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.modal.active .modal-card, .modal.active .reservation-modal-card { transform: translateY(0); }
.modal-close, .reservation-close { position: absolute; right: 15px; top: 15px; width: 40px; height: 40px; border: 0; border-radius: 50%; font-size: 20px; z-index: 2; }
.modal-close { background: rgba(0,0,0,.55); color: white; }
.reservation-close { background: var(--cream); color: var(--green); right: 18px; top: 18px; }
.modal-image { height: 320px; }
.modal-image img { width: 100%; height: 100%; object-fit: cover; }
.modal-body { padding: 30px; }
.modal-body h2 { font-family: "Playfair Display", serif; color: var(--green); font-size: 34px; margin-bottom: 8px; }
.modal-price { color: var(--gold); font-size: 21px; font-weight: 800; margin-bottom: 18px; }
.modal-description { color: var(--muted); }

/* RESERVATION FORM */
.reservation-header { text-align: center; margin-bottom: 30px; }
.reservation-header span { display: block; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 3px; margin-bottom: 7px; }
.reservation-header h2 { font-family: "Playfair Display", serif; color: var(--green); font-size: 38px; line-height: 1.1; margin-bottom: 10px; }
.reservation-header p { color: var(--muted); font-size: 14px; }
.reservation-form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label { color: var(--green); font-size: 13px; font-weight: 700; }
.form-group input, .form-group select { width: 100%; padding: 14px 15px; border: 1px solid #dce1dd; border-radius: 11px; background: #fff; color: var(--text); outline: none; transition: .2s ease; }
.form-group input:focus, .form-group select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(229,174,56,.12); }
.reservation-info { display: flex; gap: 10px; background: #f5f8f6; border: 1px solid rgba(4,67,48,.08); padding: 13px 15px; border-radius: 12px; color: #59635e; font-size: 12px; line-height: 1.5; }
.reservation-info-icon { color: var(--gold); font-weight: 900; }
.submit-reservation { width: 100%; border: 0; border-radius: 12px; background: var(--green); color: white; padding: 16px; font-weight: 800; font-size: 15px; transition: .25s ease; }
.submit-reservation:hover { background: var(--green-light); transform: translateY(-1px); }
.reservation-success { display: none; text-align: center; padding: 20px 5px 5px; }
.reservation-success.active { display: block; }
.success-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; background: rgba(4,67,48,.1); color: var(--green); border-radius: 50%; font-size: 32px; }
.reservation-success h3 { color: var(--green); font-family: "Playfair Display", serif; font-size: 30px; margin-bottom: 10px; }
.reservation-success p { color: var(--muted); margin-bottom: 20px; }
.close-success { border: 0; background: var(--green); color: white; padding: 12px 25px; border-radius: 50px; font-weight: 700; }

/* MISC */
.back-top { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--green); color: white; box-shadow: 0 10px 30px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transition: .25s ease; z-index: 50; }
.back-top.visible { opacity: 1; visibility: visible; }
.no-results { display: none; text-align: center; padding: 60px 20px; color: var(--muted); }
.no-results h3 { color: var(--green); font-family: "Playfair Display", serif; font-size: 28px; margin-bottom: 8px; }

@media (max-width: 1000px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .hero { min-height: 580px; } .hero h1 { font-size: 55px; } .hero p { font-size: 16px; } .menu-grid { grid-template-columns: 1fr; } .category-title h2 { font-size: 27px; } .dish-image { height: 240px; } .form-row { grid-template-columns: 1fr; } .reservation-modal-card { padding: 28px 20px; border-radius: 20px; } .reservation-header h2 { font-size: 32px; } .modal-image { height: 240px; } .modal-body { padding: 24px; } }
@media (max-width: 450px) { .hero-buttons { flex-direction: column; } .hero-buttons > * { width: 100%; } .reservation-button, .outline-button { width: 100%; } }