.menu-page { min-height: 100vh; padding: clamp(28px,5vw,70px) clamp(18px,6vw,84px) 90px; color: #173c25; background: linear-gradient(180deg,#f4f1e3,#eef1df); }
.menu-page-head { position: relative; width: min(1180px,100%); margin: auto; overflow: hidden; border-radius: 34px; color: #fff; background: radial-gradient(circle at 88% 14%,rgba(186,218,92,.24),transparent 30%),linear-gradient(135deg,#174f31,#082f20); box-shadow: 0 24px 70px rgba(19,58,35,.18); }
.menu-page-head.has-bg { background: linear-gradient(to top,rgba(6,37,20,.88) 0%,rgba(6,37,20,.4) 45%,rgba(6,37,20,.64) 100%),radial-gradient(circle at 88% 14%,rgba(186,218,92,.22),transparent 32%),url('../../images/bg-ngrembel.jpg') center/cover no-repeat; }
.menu-page-head::after { content: ''; position: absolute; right: -90px; bottom: -145px; width: 350px; height: 350px; border: 1px solid rgba(210,231,137,.16); border-radius: 50%; pointer-events: none; }
.menu-page-nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 92px; padding: 16px clamp(22px,4vw,48px); border-bottom: 1px solid rgba(255,255,255,.12); }
.menu-page-brand img { display: block; width: clamp(122px,14vw,170px); }
.menu-page-back { display: inline-flex; align-items: center; gap: 9px; margin: 30px 0 0; padding: 8px 15px 8px 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: rgba(255,255,255,.09); backdrop-filter: blur(8px); font-size: 12px; font-weight: 800; text-decoration: none; transition: background .25s ease, transform .25s ease; }
.menu-page-back i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #174d30; background: linear-gradient(135deg,#e3f5a0,#c9dc62); font-style: normal; box-shadow: inset 0 -1px 2px rgba(9,49,27,.18); }
.menu-page-back i svg { width: 16px; height: 16px; display: block; transition: transform .25s ease; }
.menu-page-back:hover { transform: translateY(-2px); background: rgba(255,255,255,.16); }
.menu-page-back:hover i svg { transform: translateX(-3px); }
.menu-page-title { position: relative; z-index: 1; padding: clamp(54px,8vw,94px) clamp(26px,7vw,82px) clamp(62px,9vw,108px); }
.menu-page-title > span { display: block; color: #d7e980; font-size: 11px; font-weight: 900; letter-spacing: .24em; }
.menu-page-head h1 { max-width: 780px; margin: 14px 0 20px; color: #fff; font: 400 clamp(52px,8vw,96px)/.92 Georgia,serif; letter-spacing: -.05em; }
.menu-page-head h1 strong { color: #c5dd63; }
.menu-page-head p { max-width: 650px; margin: 0; color: rgba(255,255,255,.73); font-size: 17px; line-height: 1.75; }
.menu-page-grid { width: min(1180px,100%); margin: 52px auto 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.menu-page-card { overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 20px 55px rgba(29,66,40,.12); transition: transform .3s ease, box-shadow .3s ease; }
.menu-page-card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(29,66,40,.18); }
.menu-page-image { position: relative; height: 330px; overflow: hidden; }
.menu-page-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top,rgba(7,40,22,.55),transparent 55%); }
.menu-page-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; }
.menu-page-card:hover img { transform: scale(1.035); }
.menu-page-image span { position: absolute; z-index: 2; left: 22px; bottom: 20px; padding: 7px 11px; border-radius: 999px; color: #fff; background: rgba(11,66,37,.82); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.menu-page-copy { padding: 26px 28px 30px; }
.menu-page-copy h2 { margin: 0 0 10px; font: 700 clamp(27px,3vw,38px)/1.05 Georgia,serif; }
.menu-page-copy p { min-height: 52px; margin: 0; color: #68746b; line-height: 1.65; }
.menu-page-copy > strong { display: block; margin-top: 15px; color: #286541; font-size: 20px; }
.menu-page-copy a { display: inline-flex; gap: 8px; margin-top: 22px; color: #1d603a; font-weight: 900; text-decoration: none; }
@media (max-width: 720px) { .menu-page { padding: 12px 12px 60px; } .menu-page-head { border-radius: 24px; } .menu-page-back { gap: 6px; margin-top: 24px; padding: 6px 10px 6px 6px; font-size: 10px; } .menu-page-back i { width: 28px; height: 28px; } .menu-page-back i svg { width: 14px; height: 14px; } .menu-page-title { padding: 48px 22px 62px; } .menu-page-head h1 { font-size: clamp(46px,15vw,66px); } .menu-page-head p { font-size: 15px; } .menu-page-grid { grid-template-columns: 1fr; margin-top: 32px; gap: 18px; } .menu-page-image { height: 280px; } .menu-page-copy p { min-height: 0; } }

@media (max-width: 720px) {
  .menu-page-back {
    min-height: 42px;
    gap: 8px;
    margin-top: 20px;
    padding: 5px 13px 5px 5px;
    border-color: rgba(255,255,255,.5);
    color: #173c25;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 22px rgba(0,0,0,.16);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }

  .menu-page-back i {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    color: #fff;
    background: linear-gradient(135deg,#34794b,#154c30);
    box-shadow: none;
  }

  .menu-page-back i svg {
    width: 15px;
    height: 15px;
  }
}