:root{--g:#062b20;--gold:#d8b45a;--cream:#fff9e9;--ink:#183a2a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;background:var(--cream);color:var(--ink);line-height:1.65}
a{text-decoration:none;color:inherit}a.brand{font-weight:800;text-decoration:underline;text-underline-offset:3px}.ahero a.brand{color:#f6e6a8}.policy a.brand{color:#0d5037}
img{max-width:100%;height:auto}
.wrap{width:min(980px,calc(100% - 36px));margin:auto}
.top{background:#031710;color:#e8d49a;text-align:center;padding:7px;font-size:11px;letter-spacing:.12em}
header{background:#062b20;color:#fff4d0;border-bottom:1px solid #d8b45a55;position:sticky;top:0;z-index:5}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.logo{display:flex;align-items:center;line-height:0}
.logo img{height:52px;width:auto;display:block}
.links{display:flex;gap:24px;font-size:13px}
.btn{display:inline-block;padding:12px 20px;border-radius:30px;font-weight:800;font-size:13px;background:linear-gradient(135deg,#f6e6a8,#c79b3c);color:#173522;border:1px solid #e7c96e}
.ahero{color:#fff9e9;padding:48px 0 40px;position:relative;overflow:hidden}
.ahero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:center}
.packshot{width:min(340px,100%);height:auto;display:block;margin-left:auto;filter:drop-shadow(0 18px 16px #0006)}
.snack-stage{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.bite{width:58px;height:74px;object-fit:contain;background:none;border:0;animation:nibble 3.2s ease-in-out infinite}
.bite:nth-child(2){animation-delay:.35s}.bite:nth-child(3){animation-delay:.7s}.bite:nth-child(4){animation-delay:1.05s}.bite:nth-child(5){animation-delay:1.4s}.bite:nth-child(6){animation-delay:1.75s}
@keyframes nibble{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.bite{animation:none}}
.ahero.sea{background:linear-gradient(120deg,#03261b,#0d5037)}
.ahero.bbq{background:linear-gradient(120deg,#4e120e,#a33b28)}
.ahero.cheese{background:linear-gradient(120deg,#4d3608,#8a5c10)}
.ahero.tomyum{background:linear-gradient(120deg,#4b1468,#9a2f86)}
.ahero.garlic{background:linear-gradient(120deg,#2d1844,#6a3d86)}
.ahero.salted{background:linear-gradient(120deg,#3a2410,#7a4b18)}
.back{display:inline-block;margin-bottom:18px;font-size:13px;color:#f6e6a8}
.kicker{color:#f0d88e;font-size:11px;font-weight:900;letter-spacing:.18em;margin:0}
.ahero h1{font-size:clamp(36px,6vw,62px);line-height:1.05;margin:10px 0 12px}
.lead{max-width:640px;font-size:17px;margin:0;color:#f4efe0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.chips li{border:1px solid #f6e6a866;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}
.policy{padding:42px 0 64px}.policy h2{font-size:22px;line-height:1.3;margin:28px 0 8px;color:#123c2a}.policy p,.policy li{font-size:15px;color:#2c4638}.policy ul{margin:0 0 8px;padding-left:18px}.policy li{margin:6px 0}.policy a{color:#0d5037;font-weight:700}
.story{padding:42px 0 10px}
.story h2{font-size:clamp(26px,3vw,36px);line-height:1.2;margin:0 0 14px;color:#123c2a}
.story p{margin:0 0 14px;font-size:16px;color:#2c4638}
.enjoy{background:#f2ead8;border-radius:16px;padding:16px 18px;margin-top:8px}
.enjoy strong{display:block;margin-bottom:4px;color:#123c2a}
.panels{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;padding-bottom:10px}
.panel{background:#fffdf8;border:1px solid #e8dfc8;border-radius:18px;padding:18px 18px 8px}
.panel h2{margin:0 0 10px;font-size:18px;color:#123c2a}
.panel ul{margin:0 0 12px;padding-left:18px}
.panel li{margin:6px 0;font-size:14px}
.alert{background:#fff1ea;border:1px solid #e7b8a4;border-radius:18px;padding:18px}
.alert h2{margin:0 0 8px;font-size:18px;color:#8c2d13}
.alert p{margin:0 0 10px;font-size:14px}
.alert p:last-child{margin-bottom:0}
.gizi{padding:10px 0 36px}
.gizi h2{margin:0 0 6px;font-size:clamp(26px,3vw,36px);color:#123c2a}
.gizi .note{color:#6a756b;font-size:13px;margin:0 0 14px}
.table-wrap{overflow-x:auto;border:1px solid #e8dfc8;border-radius:16px;background:#fffdf8}
table{width:100%;border-collapse:collapse;min-width:520px}
caption{text-align:left;padding:14px 16px 0;font-weight:800;color:#123c2a}
th,td{padding:11px 16px;border-bottom:1px solid #efe6d2;font-size:14px;text-align:left}
th{font-size:12px;letter-spacing:.04em;color:#6d5a32}
td:nth-child(n+2),th:nth-child(n+2){text-align:right}
tr:last-child td{border-bottom:0}
.fine{font-size:12px;color:#6a756b;margin:10px 0 0}
.others{padding:10px 0 54px}
.others h2{font-size:22px;margin:0 0 12px;color:#123c2a}
.olist{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.olist a{display:block;background:#fffdf8;border:1px solid #e8dfc8;border-radius:14px;padding:12px 14px}
.olist a:hover{border-color:#d8b45a}
.olist small{display:block;color:#987126;font-weight:800;letter-spacing:.08em;font-size:10px}
.olist strong{display:block;margin-top:2px}
footer{background:#031710;color:#dce4dc;padding:28px 0 16px}
.foot{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.foot p{font-size:12px;color:#aebdb2;max-width:420px}
.copyright{border-top:1px solid #ffffff20;margin-top:18px;padding-top:12px;color:#91a196;font-size:10px}
@media(max-width:720px){
  .links{display:none}
  .logo img{height:40px}
  .panels,.olist,.ahero-grid{grid-template-columns:1fr}
  .packshot{margin:18px auto 0;width:min(240px,72%)}
  .wrap{width:calc(100% - 28px)}
}
