:root{
    --navy-deep:#0d0c30;
    --navy-base:#1d1a53;
    --navy-mid:#302a7a;
    --navy-glow:#4b3fa8;
    --gold:#f3c77d;
    --gold-bright:#ffe1ad;
    --gold-soft:#f3c77d99;
    --gold-dim:#f3c77d40;
}
@font-face {
    font-family: "vazir";
    src: url("../fonts/Vazir-Thin-FD.woff2") format("woff2"),
         url("../fonts/Vazir-Thin-FD.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "titr";
    src: url("../fonts/titr.ttf") format("truetype");
    font-display: swap;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family:'vazir', sans-serif; background:var(--navy-deep); color:var(--gold); }

#stage{ position:relative; width:100%; min-height:100vh; overflow:hidden; }

.sky-bg{
    background:
        radial-gradient(ellipse 900px 700px at 50% -10%, var(--navy-glow) 0%, transparent 60%),
        radial-gradient(ellipse 700px 600px at 90% 100%, #241f68 0%, transparent 55%),
        radial-gradient(ellipse 700px 600px at 10% 100%, #241f68 0%, transparent 55%),
        linear-gradient(180deg, var(--navy-base) 0%, var(--navy-deep) 55%, #0a0926 100%);
}

/* ============ HERO ============ */
.hero-section{
    position:absolute; inset:0; z-index:6;
    display:flex; align-items:center; justify-content:center; isolation:isolate;
    transition:opacity .55s ease, transform .55s ease;
}
.hero-section::before{
    content:""; position:absolute; inset:0;
    background-image:
        repeating-linear-gradient(120deg, transparent 0 38px, var(--gold-dim) 38px 39px, transparent 39px 140px),
        repeating-linear-gradient(60deg, transparent 0 38px, var(--gold-dim) 38px 39px, transparent 39px 140px);
    opacity:.12; pointer-events:none;
}
.hero-section.hero-exit{ opacity:0; transform:scale(.94) translateY(-16px); pointer-events:none; }

.logo-halo{ width:230px; height:230px; margin:0 auto 1.8rem; margin-bottom: 80px; position:relative; display:flex; align-items:center; justify-content:center; font-family: 'titr'; }
.logo-halo::before{
    content:""; position:absolute; inset:-40px;
    background:radial-gradient(circle, var(--gold-dim) 0%, transparent 70%);
    filter:blur(6px); animation:pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow{0%,100%{transform:scale(1);opacity:.75;}50%{transform:scale(1.08);opacity:1;}}
.logo-ring{
    width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(145deg, rgba(243,199,125,.08), rgba(243,199,125,0) 60%);
    border:1.5px solid var(--gold);
    box-shadow:0 0 0 6px rgba(243,199,125,.08), 0 0 40px rgba(243,199,125,.25);
}
.logo-ring i{ font-size:3.6rem; color:var(--gold); filter:drop-shadow(0 0 12px rgba(243,199,125,.5)); }
.logo-ring .logo-img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.ornament{ position:absolute; inset:-55px; z-index:-1; opacity:.9; }

.brand-title{
    font-family:'titr';
    font-weight:700; font-size:2.3rem;
    background:linear-gradient(180deg, #fff6e6, var(--gold) 60%, #cf9f52);
    -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.2rem;
}
.brand-subtitle{ font-size:.85rem;  color:var(--gold-soft); margin-bottom:2.6rem; }

.btn-hero{
    --bs-btn-color:var(--gold); --bs-btn-border-color:var(--gold-soft);
    border-radius:50rem; padding:.9rem 2.6rem; font-size:1rem; font-weight:500;
    min-width:280px; display:flex; align-items:center; justify-content:center; gap:.6rem;
    background:linear-gradient(180deg, rgba(243,199,125,.06), rgba(243,199,125,0));
    transition:.3s ease;
}
.btn-hero:hover{
    color:var(--navy-deep); background:linear-gradient(135deg, var(--gold), var(--gold-bright));
    border-color:var(--gold); box-shadow:0 6px 24px rgba(243,199,125,.35); transform:translateY(-2px);
}
.btn-hero i{ font-size:1.1rem; }
.btn-hero-ghost{ min-width:280px; opacity:.85; font-size:.92rem; padding:.7rem 2.2rem; }

/* ============ SHARED: app sections ============ */
.app-section{ position:absolute; inset:0; overflow:auto; overflow-x:hidden; }

.nav-row{
    direction:ltr; display:flex; align-items:center; justify-content:space-between;
    max-width:1100px; margin:0 auto; padding:1.4rem 1.2rem 0;
    opacity:0; transform:translateY(-16px); transition:opacity .5s ease, transform .5s ease;
}
.is-visible .nav-row{ opacity:1; transform:none; transition-delay:.08s; }

.nav-pill{
    background:rgba(243,199,125,.08); border:1px solid var(--gold-soft); color:var(--gold);
    border-radius:50rem; padding:.5rem 1.1rem; display:flex; align-items:center; gap:.4rem;
    font-size:.85rem; text-decoration:none; transition:.25s ease; cursor:pointer;
}
.nav-pill:hover{ background:var(--gold); color:var(--navy-deep); }
.nav-logo{ font-weight:700; font-size:.95rem; color:var(--gold); text-align:center; cursor:pointer; }
.nav-logo small{ display:block; font-size: 19px; font-family: 'titr';  margin-top:2px; }

/* ============ MENU SECTION ============ */
.arc-riser{
    position:absolute; top:0; left:0; width:100%; height:150vh;
    transform:translateY(100%);
    transition:transform 1.35s cubic-bezier(.22,1.15,.34,1), opacity .5s ease;
    z-index:4; opacity:1;
}
.arc-riser.risen{ transform:translateY(0%); }
.arc-riser.settled{ opacity:0; pointer-events:none; }
.arc-riser svg{ width:100%; height:100%; display:block; }
.rim-glow{ filter:drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 14px rgba(243,199,125,.65)); opacity:0; transition:opacity .6s ease .5s; }
.arc-riser.risen .rim-glow{ opacity:1; }

.sparkle{
    position:absolute; width:5px; height:5px; border-radius:50%;
    background:var(--gold-bright); box-shadow:0 0 8px 2px var(--gold);
    pointer-events:none; animation:sparkleUp 1.6s ease-out forwards; z-index:5;
}
@keyframes sparkleUp{ 0%{transform:translateY(0) scale(1);opacity:1;} 100%{transform:translateY(-90px) scale(.2);opacity:0;} }

.menu-content{ position:relative; z-index:2; display:flex; flex-direction:column; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.menu-content.is-visible{ opacity:1; pointer-events:auto; }
.menu-content .nav-row{ margin-bottom:2.4rem; }

.menu-top{ flex:0 0 auto; padding:1.6rem 1.2rem .5rem; }
.menu-circles{ display:flex; justify-content:center; gap:2.2rem; max-width:1100px; margin:0 auto; padding-bottom:.4rem; }
.menu-circle-item{
    display:flex; flex-direction:column; align-items:center; gap:.55rem; cursor:pointer; flex:0 0 auto;
    opacity:0; transform:translateY(18px) scale(.9); transition:opacity .55s ease, transform .55s ease;
}
.menu-content.is-visible .menu-circle-item{ opacity:1; transform:none; }
.menu-content.is-visible .menu-circle-item:nth-child(1){ transition-delay:.35s; }
.menu-content.is-visible .menu-circle-item:nth-child(2){ transition-delay:.48s; }
.menu-content.is-visible .menu-circle-item:nth-child(3){ transition-delay:.61s; }
.menu-content.is-visible .menu-circle-item:nth-child(4){ transition-delay:.74s; }

.circle-badge{
    width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column;
    background:radial-gradient(circle at 50% 30%, rgba(243,199,125,.12), rgba(243,199,125,.02));
    border:1.5px solid var(--gold-soft); transition:.3s ease;
}
.circle-badge i.dish{ font-size:1.5rem; color:var(--gold); }
.circle-badge .stars{ font-size:.55rem; color:var(--gold); margin-top:2px; }
.menu-circle-item:hover .circle-badge, .menu-circle-item.active .circle-badge{
    transform:translateY(-4px); box-shadow:0 8px 26px rgba(243,199,125,.35), 0 0 0 6px rgba(243,199,125,.12); border-color:var(--gold);
}
.circle-label{ font-size:21px; font-family: 'titr'; color:var(--gold); white-space:nowrap; }
.menu-circle-item.active .circle-label{ color:var(--gold); font-weight:600; }

.arc-divider{ flex:0 0 auto; width:100%; height:110px; display:block; margin-top:.2rem; }
.arc-divider svg{ width:100%; height:100%; display:block; }

.menu-bottom{ flex:1 1 auto; background:linear-gradient(180deg, #221d63 0%, #0d0c30 100%); padding:0 1.2rem 3rem; }

 .menu-heading-wrap{
     text-align:center; max-width:640px; margin:0 auto 2rem;
     /* opacity:0;  */
     transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;
 }
 .menu-content.is-visible .menu-heading-wrap,
 .menu-content.menu-details-visible .menu-heading-wrap{ opacity:1; transform:none; transition-delay:.85s; }
 .menu-heading-wrap.heading-visible{ opacity:1; transform:none; transition-delay:0s; }
 .menu-heading-wrap h2{
    font-weight:700; font-size:1.9rem;
    background:linear-gradient(180deg, #fff6e6, var(--gold) 65%, #cf9f52);
    -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.9rem;
}
.menu-heading-wrap p{ color:var(--gold-soft); line-height:2.1; font-size:.95rem; }

 .submenu-box{
     max-width:900px; margin:0 auto; min-height:110px;
     opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;
 }
 .menu-content.is-visible .submenu-box,
 .menu-content.menu-details-visible .submenu-box{ opacity:1; transform:none; transition-delay:1s; }
 .submenu-box.box-visible{ opacity:1; transform:none; transition-delay:0s; }
.submenu-placeholder{ text-align:center; color:var(--gold-dim); font-size:.9rem; padding-top:1rem; }
.submenu-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem; }
.menu-item-card{
    display:flex; align-items:center; gap:.9rem;
    background:linear-gradient(145deg, rgba(243,199,125,.07), rgba(243,199,125,.01));
    border:1px solid var(--gold-dim); border-radius:1rem; padding:.9rem 1.1rem;
    opacity:0; transform:translateY(14px); animation:itemFadeIn .55s ease forwards;
    animation-delay:calc(var(--i) * 90ms);
}
@keyframes itemFadeIn{ to{ opacity:1; transform:none; } }
.menu-item-card i{ font-size:1.3rem; color:var(--gold); }
.menu-item-name{ font-size:.95rem; color:var(--gold); font-weight:600; }
.menu-item-price{ font-size:.78rem; color:var(--gold-soft); }

/* ============ SERVICES SECTION ============ */
.services-content{ position:relative; z-index:2; min-height:100%; padding-bottom:3.5rem; }
.services-content .nav-row{ margin-bottom:2.2rem; }

.services-eyebrow{
    text-align:center; font-size:.8rem; color:var(--gold-soft);
    margin-bottom:1.6rem; opacity:0; transition:opacity .6s ease;
}
.services-content.is-visible .services-eyebrow{ opacity:1; transition-delay:.28s; }

.hero-image-stage{
    position:relative; max-width:520px; margin:0 auto; height:min(58vh, 520px);
    display:flex; align-items:center; justify-content:center;
}

.flank-text{
    position:absolute; font-family:'Cormorant Garamond', serif; font-style:italic;
    font-size:clamp(2.2rem, 6vw, 3.6rem); color:var(--gold); white-space:nowrap;
    opacity:0; transition:opacity .5s ease; z-index:1;
    text-shadow:0 0 24px rgba(243,199,125,.25);
}
.services-content.is-visible .flank-text{ opacity:1; transition-delay:.45s; }
.flank-left{ right:62%; top:18%; }
.flank-right{ left:58%; bottom:14%; }

.image-wrap{
    position:relative; z-index:2; width:100%; height:100%;
    border-radius:230px 230px 8px 8px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(243,199,125,.25);
    transform:scaleX(.03); transform-origin:center;
    transition:transform 1s cubic-bezier(.16,1,.3,1);
    background:linear-gradient(160deg,#221d63,#0d0c30);
}
.services-content.is-visible .image-wrap{ transform:scaleX(1); transition-delay:.6s; }
.services-content.settled .image-wrap{ transition-delay:0s !important; }

.image-wrap img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .35s ease; }
.image-wrap.fading img{ opacity:0; }
.image-wrap::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(13,12,48,.02) 0%, rgba(13,12,48,.5) 100%);
    pointer-events:none;
}

.slide-meta{
    max-width:640px; margin:2.2rem auto 0; text-align:center; padding:0 1rem;
    opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;
}
.services-content.is-visible .slide-meta{ opacity:1; transform:none; transition-delay:1.65s; }
.services-content.settled .slide-meta{ transition-delay:0s !important; transition-duration:.4s !important; }
.slide-meta.fading{ opacity:0 !important; transform:translateY(10px) !important; transition:opacity .3s ease, transform .3s ease !important; }

.slide-label{ font-size:.8rem; color:var(--gold-soft); margin-bottom:.6rem; }
.slide-heading{
    font-weight:700; font-size:1.7rem; margin-bottom:.9rem;
    background:linear-gradient(180deg, #fff6e6, var(--gold) 65%, #cf9f52);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.slide-desc p{ color:var(--gold-soft); font-size:.92rem; line-height:2; margin-bottom:.6rem; }

.slide-controls{ display:flex; justify-content:center; gap:1rem; margin-top:1.8rem; }
.slide-btn{
    display:flex; align-items:center; gap:.5rem;
    background:rgba(243,199,125,.07); border:1px solid var(--gold-soft); color:var(--gold);
    border-radius:50rem; padding:.65rem 1.5rem; font-size:.88rem; cursor:pointer; transition:.25s ease;
}
.slide-btn:hover{ background:var(--gold); color:var(--navy-deep); border-color:var(--gold); transform:translateY(-2px); }
.slide-dots{ display:flex; gap:.4rem; align-items:center; justify-content:center; margin-top:1.1rem; }
.slide-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-dim); transition:.3s ease; }
.slide-dot.active{ background:var(--gold); width:18px; border-radius:4px; }

/* ============ CONTACT SECTION ============ */
.contact-content{ position:relative; z-index:2; min-height:100%; padding-bottom:3.5rem; }
.contact-content .nav-row{ margin-bottom:2rem; }

.contact-heading{
    text-align:center; margin:0 auto 2.4rem; max-width:600px;
    opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease;
}
.contact-content.is-visible .contact-heading{ opacity:1; transform:none; transition-delay:.15s; }
.contact-heading h2{
    font-weight:700; font-size:1.8rem;
    background:linear-gradient(180deg, #fff6e6, var(--gold) 65%, #cf9f52);
    -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.6rem;
}
.contact-heading p{ color:var(--gold-soft); font-size:.92rem; }

.contact-links{
    display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
    max-width:900px; margin:0 auto 2.6rem; padding:0 1rem;
}
.contact-link-card{
    display:flex; align-items:center; gap:.7rem;
    background:linear-gradient(145deg, rgba(243,199,125,.07), rgba(243,199,125,.01));
    border:1px solid var(--gold-dim); border-radius:1rem; padding:.85rem 1.3rem;
    color:var(--gold); text-decoration:none; font-size:.9rem;
    opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease, border-color .25s ease, background .25s ease;
}
.contact-content.is-visible .contact-link-card{ opacity:1; transform:none; }
.contact-content.is-visible .contact-link-card:nth-child(1){ transition-delay:.3s; }
.contact-content.is-visible .contact-link-card:nth-child(2){ transition-delay:.38s; }
.contact-content.is-visible .contact-link-card:nth-child(3){ transition-delay:.46s; }
.contact-content.is-visible .contact-link-card:nth-child(4){ transition-delay:.54s; }
.contact-content.is-visible .contact-link-card:nth-child(5){ transition-delay:.62s; }
.contact-link-card:hover{ border-color:var(--gold); background:rgba(243,199,125,.14); }
.contact-link-card i{ font-size:1.2rem; }
.contact-link-card .cl-label{ font-size:.72rem; color:var(--gold-soft); display:block; }
.contact-link-card .cl-value{ font-weight:600; }

.contact-grid{
    display:grid; grid-template-columns:1fr 1.4fr; gap:1.4rem;
    max-width:900px; margin:0 auto; padding:0 1rem;
}
.contact-card{
    background:linear-gradient(145deg, rgba(243,199,125,.06), rgba(243,199,125,.01));
    border:1px solid var(--gold-dim); border-radius:1.2rem; padding:1.4rem;
    opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease;
}
.contact-content.is-visible .contact-card{ opacity:1; transform:none; }
.contact-content.is-visible .contact-card.qr-card{ transition-delay:.75s; }
.contact-content.is-visible .contact-card.addr-card{ transition-delay:.85s; }

.qr-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.8rem; }
.qr-box{
    width:200px; height:200px; border-radius:.9rem; overflow:hidden;

    background:#fff8ea; padding:8px; box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.qr-box span{ background:var(--navy-deep); border-radius:1px; }
.qr-caption{ font-size:.8rem; color:var(--gold-soft); }

.addr-card{ display:flex; flex-direction:column; gap:.9rem; }
.addr-line{ display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:var(--gold-soft); line-height:1.9; }
.addr-line i{ color:var(--gold); font-size:1.1rem; margin-top:2px; }
.map-frame{
    width:100%; height:170px; border-radius:.9rem; overflow:hidden; border:1px solid var(--gold-dim);
    filter:grayscale(.15) invert(.92) contrast(.9);
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* ============ IMAGE THUMB GRID ============ */
.image-thumb-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1rem;
}
.image-thumb-item{
    border-radius:1rem; overflow:hidden; cursor:pointer;
    border:1.5px solid var(--gold-dim);
    opacity:0; transform:translateY(14px); animation:itemFadeIn .55s ease forwards;
    animation-delay:calc(var(--i) * 90ms);
    transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.image-thumb-item:hover{
    border-color:var(--gold); transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(243,199,125,.25);
}
.image-thumb-item img{ width:100%; height:240px; object-fit:cover; display:block; }

/* ============ IMAGE LIGHTBOX ============ */
.image-lightbox{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.image-lightbox.active{ opacity:1; pointer-events:auto; }

.lightbox-overlay{
    position:absolute; inset:0; background:rgba(0,0,0,.92);
    cursor:pointer;
}

.lightbox-content{
    position:relative; z-index:2; max-width:94vw; max-height:90vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}

/* ---- Lightbox Top Bar ---- */
.lightbox-topbar{
    position:absolute; top:-50px; left:0; right:0; z-index:4;
    display:flex; align-items:center; justify-content:space-between;
    padding:.6rem 1rem;
    background:linear-gradient(180deg, rgb(220 220 220 / 70%) 0%, #e8d6d654 100%);
    border-radius:.6rem;
    gap:.5rem;
}
.lightbox-slide-number{
    color:var(--gold-bright); font-size:.85rem; white-space:nowrap;
    background:rgba(0,0,0,.45); padding:.25rem .65rem; border-radius:2rem;
}
.lightbox-title{
    color:var(--gold); font-size:.9rem; font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; text-align:center;
}
.lightbox-actions{
    display:flex; align-items:center; gap:.35rem;
}
.lightbox-action-btn{
    background:rgba(0,0,0,.45); border:1px solid var(--gold-dim); color:var(--gold);
    width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:1rem; transition:background .25s ease, border-color .25s ease, color .25s ease;
    padding:0;
}
.lightbox-action-btn:hover{
    background:rgba(243,199,125,.2); border-color:var(--gold); color:var(--gold-bright);
}
.lightbox-close{
    font-size:2rem; color:var(--gold); cursor:pointer; z-index:3;
    line-height:1; transition:opacity .2s; padding:0 .25rem;
}
.lightbox-close:hover{ opacity:.7; }

/* ---- Image Container (zoom/drag) ---- */
.lightbox-img-container{
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; border-radius:.6rem; width:100%; height:100%;
}
.lightbox-img-container img{
    max-width:100%; max-height:85vh; object-fit:contain;
    border-radius:.6rem; box-shadow:0 0 50px rgba(243,199,125,.15);
    transition:transform .25s ease; cursor:default;
    transform-origin:center center;
}

/* ---- Navigation Arrows ---- */
.lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    background:rgba(243,199,125,.1); border:1px solid var(--gold-soft); color:var(--gold);
    border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:1.4rem; transition:background .25s ease, transform .25s ease;
}
.lightbox-nav:hover{ background:rgba(243,199,125,.25); transform:translateY(-50%) scale(1.08); }
.lightbox-prev{ right:-60px; }
.lightbox-next{ left:-60px; }

/* ============ BOTTOM NAVIGATION BAR (Mobile/Tablet) ============ */
.bottom-nav{
    display:none;
    position:fixed; bottom:0; left:0; right:0; z-index:999;
    background:rgba(13,12,48,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--gold-dim);
    padding:.45rem .3rem env(safe-area-inset-bottom, .35rem);
    flex-direction:row; align-items:center; justify-content:space-around;
    box-shadow:0 -4px 20px rgba(0,0,0,.35);
}

.bottom-nav-item{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:none; color:var(--gold); cursor:pointer;
    padding:.35rem .5rem; border-radius:.7rem; transition:.25s ease;
    font-family:'Vazirmatn', sans-serif; font-size: 14px; min-width:55px;
}
.bottom-nav-item i{ font-size:1.25rem; transition:.25s ease; }
.bottom-nav-item span{ white-space:nowrap; }
.bottom-nav-item:active{ color:var(--gold); transform:scale(.94); }
.bottom-nav-item.music-playing{ color:var(--gold-bright); }
.bottom-nav-item.music-playing i{ animation:musicPulse 1.8s ease-in-out infinite; }

@keyframes musicPulse{ 0%,100%{transform:scale(1);opacity:.8;} 50%{transform:scale(1.12);opacity:1;} }

/* ============ RESPONSIVE: Mobile & Tablet Bottom Nav ============ */
@media (max-width:991.98px){
    /* Keep nav-row visible but centered for logo display */
    .nav-row{
        justify-content: center !important;
        padding: 1rem 1rem 0 !important;
    }

    /* Show bottom nav */
    .bottom-nav{ display:flex; }

    /* Push content up so bottom nav doesn't overlap */
    .hero-section{ padding-bottom:85px; }

    /* Hide nav pills on mobile (bottom nav replaces them) */
    .nav-pill{ display:none !important; }

    /* Hide nav-row actions on mobile */
    .nav-row-actions{ display:none !important; }

    /* Keep music toggle in desktop hidden on mobile since it's in bottom nav */
    .music-toggle-desktop{ display:none !important; }

    /* Mobile logo styling */
    .nav-logo{
        font-size: 1rem;
        padding: .4rem 1.2rem;
        background: rgba(243,199,125,.06);
        border: 1px solid var(--gold-dim);
        border-radius: 20px;
        text-align: center;
    }
    .nav-logo small{
        font-size: 19px;
    }
}

/* Music toggle in desktop header */
.nav-row-actions{ display:flex; align-items:center; gap:.5rem; direction:rtl; }

/* ============ MOBILE OPTIMIZATION ============ */
@media (max-width:576px){
    .btn-hero{ min-width:220px; padding:.8rem 2rem; font-size:.92rem; }
    .btn-hero-ghost{ min-width:220px; }
    .logo-halo{ width:150px; height:150px; }
    .brand-title{ font-size: 2rem; }
    .brand-subtitle{ margin-bottom:1.8rem; }

    .nav-logo{ display: none; font-size:.82rem; padding:.35rem 1rem; width: 80vw; }
    .nav-logo small{ font-size:21px; }

    .menu-top{ padding:1.1rem .6rem .3rem; }
    .menu-circles{
        gap:1rem; justify-content:flex-start; overflow-x:auto;
        padding:1.2rem 1rem .6rem; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none;
    }
    .menu-circles::-webkit-scrollbar{ display:none; }
    .menu-circle-item{ scroll-snap-align:center; }
    .circle-badge{ width:62px; height:62px; }
    .circle-badge i.dish{ font-size:1.15rem; }
    /* .circle-label{ font-size:.72rem; } */
    .arc-divider{ height:60px; }
    .menu-bottom{ padding:0 .8rem 2.2rem; }
    .menu-heading-wrap h2{ font-size:1.4rem; margin-bottom:.6rem; }
    .menu-heading-wrap p{ font-size:.82rem; line-height:1.9; }
    .submenu-grid{ grid-template-columns:1fr; }

    .image-thumb-grid{ grid-template-columns:repeat(2,1fr); gap:.6rem; }
    .image-thumb-item img{ height:210px; }
    .lightbox-topbar{ padding:.4rem .6rem; }
    .lightbox-slide-number{ font-size:.72rem; padding:.2rem .5rem; }
    .lightbox-title{ font-size:.75rem; }
    .lightbox-action-btn{ width:30px; height:30px; font-size:.85rem; }
    .lightbox-close{ font-size:1.6rem; padding:0 .15rem; }
    .lightbox-prev{ right:8px; }
    .lightbox-next{ left:8px; }
    .lightbox-nav{ width:38px; height:38px; font-size:1.1rem; background:rgba(0,0,0,.5); }

    .hero-image-stage{ height:42vh; max-width:260px; }
    .image-wrap{ border-radius:130px 130px 6px 6px; }
    .flank-text{ font-size:1.5rem; }
    .flank-left{ right:auto; left:2%; top:4%; }
    .flank-right{ left:auto; right:2%; bottom:4%; }
    .slide-heading{ font-size:1.35rem; }
    .slide-desc p{ font-size:.85rem; }
    .slide-btn{ padding:.55rem 1.1rem; font-size:.8rem; }

    .contact-grid{ grid-template-columns:1fr; }
    .contact-link-card{ font-size:.82rem; padding:.7rem 1.05rem; }
}