:root { --ink:#17332d; --cream:#f7f2e8; --paper:#fffdf8; --lime:#c8e15b; --orange:#ee7046; --muted:#6f7d77; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-outfit),var(--font-khmer),sans-serif; }
button,input { font:inherit; }
.hero { min-height:390px; padding:22px clamp(20px,5vw,72px) 84px; color:white; background:radial-gradient(circle at 78% 25%,rgba(200,225,91,.24),transparent 25%),linear-gradient(135deg,#183a32,#0e2723); position:relative; overflow:hidden; }
.hero:after { content:""; position:absolute; width:360px; height:360px; border:1px solid rgba(255,255,255,.1); border-radius:50%; right:-90px; bottom:-180px; box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.018); }
nav { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; }
.brandMark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px 12px 12px 3px; color:var(--ink); background:var(--lime); font-weight:800; font-size:20px; }
.brandMark img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.brandMark.small { width:30px; height:30px; font-size:16px; }
.language { border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.08); color:white; border-radius:999px; padding:8px 15px; cursor:pointer; }
.heroCopy { max-width:690px; margin-top:64px; position:relative; z-index:1; }
.eyebrow,.sectionHeading p { color:var(--lime); font-size:12px; font-weight:800; letter-spacing:.18em; margin:0 0 12px; }
h1 { font-size:clamp(39px,7vw,72px); letter-spacing:-.045em; line-height:.98; margin:0; max-width:760px; }
.intro { color:rgba(255,255,255,.72); font-size:17px; line-height:1.6; max-width:560px; margin:22px 0 0; }
.menuShell { max-width:1180px; margin:-42px auto 0; padding:0 24px 70px; position:relative; z-index:2; }
.toolbar { background:white; border-radius:24px; box-shadow:0 14px 45px rgba(23,51,45,.13); padding:18px; }
.search { background:#f4f6f1; display:flex; align-items:center; gap:10px; border-radius:14px; padding:0 15px; }
.search span { font-size:28px; transform:rotate(-18deg); line-height:1; color:var(--muted); }
.search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); padding:14px 0; }
.categories { display:flex; gap:8px; overflow-x:auto; padding-top:14px; scrollbar-width:none; }
.categories::-webkit-scrollbar { display:none; }
.categories button { white-space:nowrap; border:0; padding:9px 16px; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; }
.categories button.active { background:var(--ink); color:white; }
.menuSection { margin-top:52px; }
.sectionHeading { display:flex; align-items:end; justify-content:space-between; border-bottom:1px solid #e6e7df; padding-bottom:15px; margin-bottom:20px; }
.sectionHeading p { color:var(--orange); margin-bottom:5px; }
.sectionHeading h2 { font-size:30px; margin:0; letter-spacing:-.03em; }
.sectionHeading>span { color:var(--muted); font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.card { border-radius:20px; background:white; border:1px solid #ecece5; overflow:hidden; transition:transform .2s,box-shadow .2s; }
.card:hover { transform:translateY(-3px); box-shadow:0 15px 34px rgba(23,51,45,.1); }
.foodImage { height:220px; position:relative; background:var(--cream); overflow:hidden; }
.foodImage img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.card:hover img { transform:scale(1.035); }
.placeholder { width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(circle at 30% 25%,#e7f0b6,transparent 25%),var(--cream); }
.placeholder span { width:70px; height:70px; display:grid; place-items:center; border-radius:24px 24px 24px 7px; background:var(--ink); color:var(--lime); font-size:36px; font-weight:800; }
.price { position:absolute; right:12px; bottom:12px; padding:7px 11px; border-radius:10px; background:var(--lime); color:var(--ink); font-weight:800; box-shadow:0 5px 14px rgba(0,0,0,.12); }
.cardBody { min-height:88px; padding:17px 18px; }
.cardBody h3 { margin:0; font-size:19px; }
.cardBody p { margin:5px 0 0; color:var(--muted); font-family:var(--font-khmer),sans-serif; font-size:13px; }
.state { min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); gap:7px; text-align:center; }
.state strong { color:var(--ink); font-size:22px; }
.loader { width:28px; height:28px; border:3px solid #dfe5db; border-top-color:var(--orange); border-radius:50%; animation:spin .8s linear infinite; }
footer { background:var(--cream); min-height:150px; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; text-align:center; padding:30px; color:var(--muted); }
footer p,footer small { margin:0; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:800px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .foodImage { height:190px; } }
@media (max-width:520px) { .hero { min-height:350px; padding-inline:20px; } .heroCopy { margin-top:50px; } .intro { font-size:15px; } .menuShell { padding-inline:14px; } .toolbar { border-radius:19px; padding:13px; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } .foodImage { height:150px; } .card { border-radius:15px; } .cardBody { min-height:78px; padding:13px; } .cardBody h3 { font-size:16px; line-height:1.2; } .price { font-size:13px; right:8px; bottom:8px; } .sectionHeading h2 { font-size:25px; } }