@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --ink:#080808; --ink2:#111111; --ink3:#1a1a1a; --ink4:#222222; --ink5:#2c2c2c;
  --gold:#c8a45a; --goldl:#e2c07e; --goldd:#8a6c30; --goldglow:rgba(200,164,90,.15);
  --ivory:#f2ece0; --muted:#9a9080; --muted2:#6a6055;
  --red:#b83535; --green:#2e7d52;
  --fd:'Playfair Display',Georgia,serif;
  --fb:'DM Sans',system-ui,sans-serif;
  --r:8px; --r2:4px;
  --ease:.3s cubic-bezier(.4,0,.2,1);
  --sh:0 16px 60px rgba(0,0,0,.7);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { background:var(--ink); color:var(--ivory); font-family:var(--fb); font-size:15px; line-height:1.7; overflow-x:hidden }
a { color:inherit; text-decoration:none }
img { max-width:100%; display:block }
ul { list-style:none }
button { cursor:pointer; border:none; background:none; font-family:var(--fb) }
input,textarea,select { font-family:var(--fb) }
::-webkit-scrollbar { width:6px }
::-webkit-scrollbar-track { background:var(--ink3) }
::-webkit-scrollbar-thumb { background:var(--goldd); border-radius:3px }

/* Layout */
.wrap { max-width:1220px; margin:0 auto; padding:0 24px }
.section { padding:96px 0 }
.tc { text-align:center }

/* Typography */
.eyebrow { display:inline-block; font-size:.68rem; letter-spacing:3.5px; text-transform:uppercase; font-weight:600; color:var(--gold); padding:5px 14px; border:1px solid rgba(200,164,90,.3); border-radius:20px; margin-bottom:16px }
.stitle { font-family:var(--fd); font-size:clamp(2rem,4.5vw,3.4rem); font-weight:500; line-height:1.15; color:var(--ivory) }
.stitle em { color:var(--gold); font-style:italic }
.muted { color:var(--muted) }
.divider { width:54px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); margin:18px 0 }
.tc .divider { margin:18px auto; background:linear-gradient(90deg,transparent,var(--gold),transparent) }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:var(--r); font-size:.78rem; letter-spacing:2px; text-transform:uppercase; font-weight:600; transition:var(--ease); white-space:nowrap; cursor:pointer }
.btn-gold { background:var(--gold); color:var(--ink); border:1px solid var(--gold) }
.btn-gold:hover { background:var(--goldl); transform:translateY(-2px); box-shadow:0 8px 28px rgba(200,164,90,.35) }
.btn-outline { background:transparent; color:var(--gold); border:1px solid rgba(200,164,90,.45) }
.btn-outline:hover { background:var(--goldglow) }
.btn-sm { padding:8px 18px; font-size:.7rem; letter-spacing:1.5px }
.btn-danger { background:rgba(184,53,53,.1); color:#e06060; border:1px solid rgba(184,53,53,.3) }
.btn-danger:hover { background:rgba(184,53,53,.22) }
.btn-success { background:rgba(46,125,82,.1); color:#58d68d; border:1px solid rgba(46,125,82,.3) }
.w100 { width:100%; justify-content:center }
.btn:disabled { opacity:.5; cursor:not-allowed }

/* Navbar */
.navbar { position:fixed; top:0; left:0; right:0; z-index:900; padding:20px 0; transition:var(--ease); border-bottom:1px solid transparent }
.navbar.sticky { padding:13px 0; background:rgba(8,8,8,.96); border-bottom-color:rgba(200,164,90,.12); backdrop-filter:blur(14px) }
.logo { font-family:var(--fd); font-size:1.4rem; font-weight:700; color:var(--gold); white-space:nowrap }
.logo span { color:var(--ivory); font-weight:400 }
.nav-links { display:flex; align-items:center; gap:26px }
.nav-links a { font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-weight:500; transition:var(--ease); position:relative }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:var(--gold); transition:var(--ease) }
.nav-links a:hover,.nav-links a.act { color:var(--gold) }
.nav-links a:hover::after,.nav-links a.act::after { width:100% }
.cart-btn { display:flex; align-items:center; gap:7px; padding:8px 16px; border:1px solid rgba(200,164,90,.35); border-radius:var(--r); font-size:.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:600; transition:var(--ease) }
.cart-btn:hover { background:var(--goldglow) }
.cbubble { background:var(--gold); color:var(--ink); font-size:.62rem; font-weight:700; min-width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; padding:0 3px }
.lang-pills { display:flex; gap:5px }
.lpill { padding:4px 9px; border:1px solid rgba(255,255,255,.1); border-radius:3px; font-size:.66rem; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-weight:600; transition:var(--ease) }
.lpill.act,.lpill:hover { color:var(--gold); border-color:var(--gold); background:var(--goldglow) }
.hamburger { display:none; flex-direction:column; gap:5px; padding:4px }
.hamburger span { display:block; width:22px; height:2px; background:var(--gold); transition:var(--ease) }
.mob-nav { display:none; position:fixed; inset:0; background:var(--ink2); z-index:950; flex-direction:column; align-items:center; justify-content:center; gap:26px }
.mob-nav.open { display:flex }
.mob-nav a { font-family:var(--fd); font-size:1.5rem; color:var(--ivory); transition:var(--ease) }
.mob-nav a:hover { color:var(--gold) }
.mob-close { position:absolute; top:22px; right:22px; font-size:1.8rem; color:var(--muted); cursor:pointer }

/* Hero */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden }
.hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.55) 55%,rgba(8,8,8,.9) 100%),radial-gradient(ellipse at 68% 40%,rgba(0,55,110,.18) 0%,transparent 55%) }
.hero-pattern { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(200,164,90,.06) 1px,transparent 1px); background-size:44px 44px; animation:pdrift 30s linear infinite }
@keyframes pdrift { to { background-position:44px 44px } }
.hero-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none }
.pdot { position:absolute; width:2px; height:2px; border-radius:50%; background:var(--gold); opacity:0; animation:rise linear infinite }
@keyframes rise { 0%{transform:translateY(100vh);opacity:0} 5%{opacity:.5} 95%{opacity:.2} 100%{transform:translateY(-5vh);opacity:0} }
.hero-content { position:relative; z-index:2; max-width:680px }
.hero h1 { font-family:var(--fd); font-size:clamp(3rem,8vw,5.8rem); font-weight:700; line-height:1.05; color:var(--ivory); margin-bottom:10px; animation:fup .8s ease .15s both }
.hero h1 em { color:var(--gold); font-style:italic; display:block }
.hero-sub { font-family:var(--fd); font-style:italic; font-size:clamp(1rem,2.5vw,1.4rem); color:rgba(242,236,224,.6); margin-bottom:18px; animation:fup .8s ease .3s both }
.hero-desc { color:var(--muted); font-size:.95rem; line-height:1.85; margin-bottom:36px; max-width:520px; animation:fup .8s ease .45s both }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; animation:fup .8s ease .6s both }
.hero-scroll { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted2); font-size:.62rem; letter-spacing:2.5px; text-transform:uppercase; animation:fadein 1.5s ease .9s both }
.sbar { width:1px; height:44px; background:linear-gradient(180deg,var(--gold),transparent); animation:spulse 2s ease infinite }
@keyframes spulse { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes fup { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadein { from{opacity:0} to{opacity:1} }

/* Stats */
.stats-bar { background:var(--ink3); border-top:1px solid rgba(200,164,90,.1); border-bottom:1px solid rgba(200,164,90,.1); padding:50px 0 }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr) }
.scell { text-align:center; padding:16px; border-right:1px solid rgba(200,164,90,.08) }
.scell:last-child { border-right:none }
.sval { font-family:var(--fd); font-size:3rem; font-weight:400; color:var(--gold); line-height:1 }
.slbl { color:var(--muted); font-size:.7rem; letter-spacing:2px; text-transform:uppercase; margin-top:8px }

/* About strip */
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.about-vis { aspect-ratio:4/5; background:var(--ink4); border-radius:2px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:9rem; opacity:.7 }
.about-vis::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,var(--ink2)) }
.about-frame { position:absolute; top:-12px; right:-12px; bottom:12px; left:12px; border:1px solid rgba(200,164,90,.2); border-radius:2px; pointer-events:none }

/* Dish cards */
.dishes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(278px,1fr)); gap:24px; margin-top:52px }
.dcard { background:var(--ink2); border:1px solid rgba(200,164,90,.07); border-radius:var(--r); overflow:hidden; transition:var(--ease) }
.dcard:hover { border-color:rgba(200,164,90,.28); transform:translateY(-5px); box-shadow:var(--sh) }
.dimg { aspect-ratio:4/3; overflow:hidden; background:var(--ink4); position:relative }
.dimg img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.dcard:hover .dimg img { transform:scale(1.06) }
.dph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:4.5rem; background:linear-gradient(135deg,var(--ink4),var(--ink3)) }
.dfeat { position:absolute; top:12px; left:12px; background:var(--gold); color:var(--ink); font-size:.6rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:2px }
.dcat-b { position:absolute; top:12px; left:12px; background:transparent; border:1px solid rgba(200,164,90,.4); color:var(--gold); font-size:.6rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:2px }
.dbody { padding:20px }
.dname { font-family:var(--fd); font-size:1.2rem; color:var(--ivory); margin-bottom:7px }
.ddesc { color:var(--muted); font-size:.8rem; line-height:1.7; margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.dfoot { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid rgba(255,255,255,.04) }
.dprice { font-family:var(--fd); font-size:1.3rem; color:var(--gold); font-weight:500 }
.dprice small { font-family:var(--fb); font-size:.7rem; color:var(--muted); font-weight:400 }
.qty-ctrl { display:flex; align-items:center }
.qbtn { width:28px; height:28px; border:1px solid rgba(200,164,90,.3); border-radius:var(--r2); color:var(--gold); font-size:1rem; display:flex; align-items:center; justify-content:center; transition:var(--ease) }
.qbtn:hover { background:rgba(200,164,90,.1) }
.qval { width:32px; text-align:center; font-size:.88rem; color:var(--ivory); background:none; border:none; pointer-events:none }
.atcbtn { padding:8px 15px; background:var(--gold); color:var(--ink); border-radius:var(--r2); font-size:.7rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; transition:var(--ease); white-space:nowrap; cursor:pointer }
.atcbtn:hover { background:var(--goldl) }
.atcbtn.added { background:#2e7d52; color:#fff }

/* Page hero */
.phero { height:300px; display:flex; align-items:center; justify-content:center; text-align:center; padding-top:80px; position:relative; overflow:hidden; background:linear-gradient(180deg,var(--ink) 0%,var(--ink3) 100%) }
.phero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 110%,rgba(200,164,90,.07),transparent 55%) }

/* Cart panel */
.cart-veil { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:1000; opacity:0; pointer-events:none; transition:opacity var(--ease); backdrop-filter:blur(4px) }
.cart-veil.open { opacity:1; pointer-events:all }
.cart-panel { position:fixed; top:0; right:-500px; width:460px; max-width:96vw; height:100vh; background:var(--ink2); border-left:1px solid rgba(200,164,90,.12); z-index:1001; display:flex; flex-direction:column; transition:right .4s cubic-bezier(.25,.46,.45,.94) }
.cart-panel.open { right:0 }
.cp-head { padding:24px 26px 16px; border-bottom:1px solid rgba(255,255,255,.05); display:flex; justify-content:space-between; align-items:center; flex-shrink:0 }
.cp-head h2 { font-family:var(--fd); font-size:1.5rem; font-weight:400 }
.cp-close { width:34px; height:34px; border:1px solid rgba(255,255,255,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:1rem; transition:var(--ease) }
.cp-close:hover { border-color:var(--gold); color:var(--gold) }
.cp-body { flex:1; overflow-y:auto; padding:16px 26px }
.ci-item2 { display:flex; gap:12px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.04) }
.ci-thumb { width:58px; height:58px; border-radius:var(--r2); overflow:hidden; background:var(--ink4); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.4rem }
.ci-thumb img { width:100%; height:100%; object-fit:cover }
.ci-info { flex:1; min-width:0 }
.ci-name { font-size:.87rem; font-weight:600; color:var(--ivory); margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ci-price { color:var(--gold); font-size:.82rem; font-weight:500 }
.ci-row2 { display:flex; align-items:center; gap:8px; margin-top:7px }
.ci-rm { color:var(--red); font-size:.68rem; letter-spacing:1px; text-transform:uppercase; font-weight:600; transition:var(--ease) }
.ci-rm:hover { opacity:.7 }
.cart-empty-msg { text-align:center; padding:56px 20px; color:var(--muted) }
.cp-foot { padding:16px 26px 24px; border-top:1px solid rgba(255,255,255,.05); flex-shrink:0 }
.cp-total-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px }
.cp-total-lbl { font-size:.75rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted) }
.cp-total-val { font-family:var(--fd); font-size:1.7rem; font-weight:400; color:var(--gold) }

/* Order page */
.order-grid { display:grid; grid-template-columns:1fr 370px; gap:44px; align-items:start }
.form-box { background:var(--ink2); border:1px solid rgba(200,164,90,.1); border-radius:var(--r); padding:38px }
.sum-box { background:var(--ink2); border:1px solid rgba(200,164,90,.1); border-radius:var(--r); padding:28px; position:sticky; top:94px }
.sum-title { font-family:var(--fd); font-size:1.3rem; font-weight:400; margin-bottom:18px }
.si { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.84rem }
.si span:first-child { color:var(--muted) }
.si span:last-child { color:var(--gold); font-weight:600; white-space:nowrap }
.sum-total { display:flex; justify-content:space-between; padding-top:14px }
.sum-total span:first-child { font-size:.75rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); align-self:center }
.sum-tv { font-family:var(--fd); font-size:1.65rem; color:var(--gold); font-weight:400 }

/* Form elements */
.fg { margin-bottom:18px }
.fl { display:block; margin-bottom:8px; font-size:.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-weight:500 }
.fc { width:100%; padding:12px 15px; background:var(--ink4); border:1px solid rgba(255,255,255,.07); border-radius:var(--r2); color:var(--ivory); font-size:.9rem; outline:none; transition:var(--ease) }
.fc:focus { border-color:var(--gold); background:var(--ink3); box-shadow:0 0 0 3px rgba(200,164,90,.08) }
.fc::placeholder { color:rgba(255,255,255,.2) }
textarea.fc { min-height:108px; resize:vertical }
select.fc option { background:var(--ink3) }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.frow3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px }
.alert { padding:11px 16px; border-radius:var(--r2); font-size:.85rem; margin-bottom:16px }
.alert-ok { background:rgba(46,125,82,.1); border:1px solid rgba(46,125,82,.3); color:#58d68d }
.alert-err { background:rgba(184,53,53,.1); border:1px solid rgba(184,53,53,.3); color:#e06060 }
.alert-info { background:rgba(200,164,90,.07); border:1px solid rgba(200,164,90,.2); color:var(--gold) }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start }
.cit { display:flex; gap:15px; align-items:flex-start; margin-bottom:26px }
.cit-icon { width:42px; height:42px; border:1px solid rgba(200,164,90,.25); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; color:var(--gold) }
.cit-lbl { font-size:.68rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:4px; font-weight:600 }
.cit-val { color:var(--ivory); font-size:.9rem }
.map-frame { width:100%; height:360px; border-radius:var(--r); overflow:hidden; border:1px solid rgba(200,164,90,.12) }
.map-frame iframe { width:100%; height:100%; border:0; filter:invert(90%) hue-rotate(180deg) saturate(.7) }

/* Success */
.success-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px }
.success-box { max-width:480px; width:100%; background:var(--ink2); border:1px solid rgba(200,164,90,.14); border-radius:var(--r); padding:52px 40px; text-align:center }
@keyframes pop { from{transform:scale(0)} to{transform:scale(1)} }
.sico { font-size:4rem; margin-bottom:18px; animation:pop .5s cubic-bezier(.34,1.56,.64,1) }

/* CTA */
.cta-banner { background:linear-gradient(135deg,var(--ink) 0%,rgba(26,18,0,.9) 50%,var(--ink) 100%); border-top:1px solid rgba(200,164,90,.1); border-bottom:1px solid rgba(200,164,90,.1); padding:86px 0; text-align:center }

/* Footer */
.footer { background:var(--ink2); border-top:1px solid rgba(200,164,90,.1); padding:66px 0 28px }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px }
.footer-logo { font-family:var(--fd); font-size:1.5rem; color:var(--gold) }
.footer-logo span { color:var(--ivory); font-weight:400 }
.footer-h { font-size:.66rem; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; font-weight:600 }
.footer-links li { margin-bottom:9px }
.footer-links a { color:var(--muted); font-size:.84rem; transition:var(--ease) }
.footer-links a:hover { color:var(--gold) }
.footer-ci { display:flex; gap:9px; align-items:flex-start; color:var(--muted); font-size:.83rem; margin-bottom:10px }
.footer-ci span:first-child { color:var(--gold); flex-shrink:0 }
.footer-bottom { border-top:1px solid rgba(255,255,255,.04); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px }
.footer-bottom p { color:var(--muted2); font-size:.76rem }

/* Toast */
.toast-wrap { position:fixed; bottom:26px; right:26px; z-index:9999; display:flex; flex-direction:column; gap:9px; pointer-events:none }
.toast { background:var(--ink3); border:1px solid rgba(200,164,90,.28); border-radius:var(--r); padding:12px 17px; font-size:.83rem; color:var(--ivory); box-shadow:0 4px 20px rgba(0,0,0,.5); max-width:290px; display:flex; align-items:center; gap:9px; animation:tin .3s ease }
@keyframes tin { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
.toast.out { animation:tout .3s ease forwards }
@keyframes tout { from{opacity:1} to{opacity:0;transform:translateX(20px)} }

/* Reveal */
.rv { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease }
.rv.in { opacity:1; transform:translateY(0) }

/* Responsive */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr }
  .order-grid { grid-template-columns:1fr }
  .sum-box { position:static }
  .stats-grid { grid-template-columns:1fr 1fr }
  .scell:nth-child(2) { border-right:none }
  .contact-grid { grid-template-columns:1fr }
}
@media(max-width:768px) {
  .nav-links,.lang-pills { display:none }
  .hamburger { display:flex }
  .about-inner { grid-template-columns:1fr }
  .about-vis { display:none }
  .footer-grid { grid-template-columns:1fr; gap:26px }
  .footer-bottom { flex-direction:column; text-align:center }
  .frow,.frow3 { grid-template-columns:1fr }
  .section { padding:64px 0 }
  .cart-panel { width:100%; right:-100% }
  .hero-btns { flex-direction:column; align-items:flex-start }
  .form-box { padding:24px 18px }
}
@media(max-width:480px) {
  .stats-grid { grid-template-columns:1fr }
  .scell { border-right:none; border-bottom:1px solid rgba(200,164,90,.08) }
  .scell:last-child { border-bottom:none }
  .dishes-grid { grid-template-columns:1fr }
  .success-box { padding:34px 20px }
}