:root { --cream:#f7f1e3; --paper:#fffaf0; --green:#173d2b; --leaf:#35613e; --orange:#e8752b; --ink:#1e2a21; --line:rgba(30,42,33,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.nav { height:88px; display:flex; align-items:center; justify-content:space-between; max-width:1240px; margin:auto; padding:0 30px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; font-family:Georgia, serif; font-size:13px; line-height:1.05; letter-spacing:.02em; }
.brand b { font-size:17px; }
.brand-mark { width:42px; height:42px; border:1.5px solid var(--green); border-radius:50% 50% 46% 54%; display:grid; place-items:center; font:bold 14px Georgia; transform:rotate(-6deg); }
.nav-links { display:flex; gap:34px; font-size:13px; font-weight:700; }
.nav-links a:hover { color:var(--orange); }
.nav-cta, .button { border-radius:999px; font-weight:800; font-size:13px; }
.nav-cta { background:var(--green); color:white; padding:14px 21px; }
.hero { min-height:690px; max-width:1240px; margin:auto; padding:68px 30px 78px; display:grid; grid-template-columns: .92fr 1.08fr; align-items:center; gap:60px; overflow:hidden; }
.eyebrow { display:flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:800; color:var(--leaf); }
.eyebrow span { width:30px; height:1px; background:currentColor; }
h1,h2 { font-family:Georgia, 'Times New Roman', serif; color:var(--green); font-weight:400; margin:18px 0; line-height:.96; letter-spacing:-.04em; }
h1 { font-size:clamp(58px,6.4vw,94px); }
h2 { font-size:clamp(42px,5vw,68px); }
h1 em,h2 em { color:var(--orange); font-weight:400; }
.lead { font-family:Georgia, serif; max-width:460px; font-size:18px; line-height:1.65; color:#556158; }
.hero-actions { display:flex; align-items:center; gap:27px; margin-top:34px; }
.button { display:inline-flex; align-items:center; gap:28px; padding:17px 22px; }
.button span { font-size:18px; }
.primary { background:var(--orange); color:white; box-shadow:0 8px 24px rgba(232,117,43,.22); }
.text-link { font-size:13px; font-weight:800; border-bottom:1px solid var(--ink); padding:10px 0; }
.text-link span { color:var(--orange); margin-left:7px; }
.mini-proof { display:flex; align-items:center; gap:14px; margin-top:46px; font-size:11px; line-height:1.5; color:#647068; }
.mini-proof b { color:var(--ink); }
.avatars { display:flex; }
.avatars span { width:34px;height:34px;background:var(--paper);border:2px solid var(--cream);border-radius:50%;display:grid;place-items:center;margin-left:-7px; }
.hero-visual { position:relative; min-height:540px; display:grid; place-items:center; }
.sun { position:absolute; width:480px; height:480px; background:#efd462; border-radius:48% 52% 48% 52%; }
.sun:after { content:"";position:absolute;inset:-22px;border:1px solid rgba(23,61,43,.18);border-radius:50%; }
.photo-frame { width:390px; height:510px; position:relative; transform:rotate(3deg); border:9px solid var(--paper); border-radius:48% 48% 20px 20px; box-shadow:0 22px 45px rgba(39,50,27,.2); overflow:hidden; z-index:1; }
.photo-frame img { width:100%;height:100%;object-fit:cover; }
.steam { position:absolute; top:12px; color:white; font:50px Georgia; transform:rotate(90deg); opacity:.75; }
.steam-a { left:120px; }.steam-b { left:200px; top:30px; }
.fresh-card { position:absolute; z-index:2; left:5px; bottom:58px; background:var(--green); color:white; width:138px;height:138px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-10deg);border:5px solid var(--cream); }
.fresh-card b { font:34px Georgia; }.fresh-card span { font-size:11px;text-transform:uppercase;letter-spacing:.1em; }
.side-note { position:absolute;right:-42px;transform:rotate(90deg);font-size:9px;font-weight:900;letter-spacing:.24em;color:var(--leaf); }
.ticker { background:var(--green);color:white;min-height:68px;display:flex;align-items:center;justify-content:center;gap:38px;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.15em;overflow:hidden;white-space:nowrap; }
.ticker i { color:#e7cc5b;font-style:normal; }
.section { max-width:1180px; margin:auto; padding:105px 30px; }
.about { display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:end;padding-bottom:55px; }
.about h2 { margin-bottom:0; }
.section-intro { line-height:1.8;color:#5e675f;max-width:470px;font-family:Georgia,serif;font-size:17px; }
.benefits { max-width:1180px;margin:auto;padding:0 30px 110px;display:grid;grid-template-columns:repeat(3,1fr); }
.benefits article { padding:34px;border-top:1px solid var(--line);border-right:1px solid var(--line); }
.benefits article:last-child { border-right:0; }
.benefits article>span { color:var(--orange);font:italic 15px Georgia; }
.benefits h3 { font:26px Georgia;color:var(--green);margin:34px 0 14px; }
.benefits p { color:#6b736c;font-size:13px;line-height:1.7;max-width:260px; }
.menu-section { background:var(--paper);max-width:none;padding-left:max(30px,calc((100% - 1180px)/2));padding-right:max(30px,calc((100% - 1180px)/2));display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center; }
.menu-image { height:620px;border-radius:220px 220px 18px 18px;overflow:hidden; }
.menu-image img { width:100%;height:100%;object-fit:cover; }
.menu-list { margin-top:45px; }
.menu-list>div { display:grid;grid-template-columns:35px 1fr 40px;gap:18px;align-items:center;border-top:1px solid var(--line);padding:20px 0; }
.menu-list>div:last-child { border-bottom:1px solid var(--line); }
.menu-list span { font:italic 14px Georgia;color:var(--orange); }
.menu-list p { margin:0; }.menu-list b { display:block;font:22px Georgia;color:var(--green); }.menu-list small { display:block;color:#727972;margin-top:6px;line-height:1.5; }
.menu-list i { font-style:normal;font-size:24px; }
.video-section { max-width:none;background:var(--green);color:white;display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;padding-left:max(30px,calc((100% - 1180px)/2));padding-right:max(30px,calc((100% - 1180px)/2));align-items:center; }
.eyebrow.light { color:#e6cb5f; }.video-copy h2 { color:white; }.video-copy p:last-child { color:#b7c5bb;line-height:1.8;font-family:Georgia,serif; }
.video-wrap { padding:0;border:0;background:#122d20;position:relative;width:100%;height:560px;border-radius:240px 240px 12px 12px;overflow:hidden;cursor:pointer; }
.video-wrap video { width:100%;height:100%;object-fit:cover; }
.video-wrap:after { content:"";position:absolute;inset:0;background:linear-gradient(transparent 65%,rgba(0,0,0,.45));pointer-events:none; }
.play { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;background:var(--orange);color:white;border-radius:50%;display:grid;place-items:center;padding-left:5px;font-size:23px;z-index:2;box-shadow:0 0 0 12px rgba(255,255,255,.15); }
.video-label { position:absolute;z-index:2;bottom:26px;left:30px;color:white;text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:800; }
.order { text-align:center;padding-top:120px;padding-bottom:120px; }
.order .eyebrow { justify-content:center; }.order p:not(.eyebrow) { color:#667069;margin:0 auto 28px;font-family:Georgia,serif; }
.order .button { margin-top:10px; }
footer { border-top:1px solid var(--line);max-width:1180px;margin:auto;padding:30px;display:flex;align-items:center;justify-content:space-between;color:#657068;font-size:11px; }
@media (max-width:850px) {
  .nav { height:72px;padding:0 18px; }.nav-links { display:none; }.nav-cta { padding:12px 15px;font-size:11px; }
  .hero { grid-template-columns:1fr;padding:50px 22px;gap:20px; }.hero-copy { text-align:left; }.hero-visual { min-height:480px; }
  .sun { width:360px;height:360px; }.photo-frame { width:290px;height:410px; }.fresh-card { width:108px;height:108px;left:3px; }.fresh-card b{font-size:27px}.side-note{display:none}
  .ticker { justify-content:flex-start;padding:0 24px; }
  .about,.menu-section,.video-section { grid-template-columns:1fr;gap:45px; }.about { align-items:start; }.section { padding:78px 22px; }
  .benefits { grid-template-columns:1fr;padding:0 22px 75px; }.benefits article { border-right:0;padding:28px 6px; }
  .menu-image { height:430px;max-width:390px;margin:auto;width:100%; }
  .video-wrap { height:520px;max-width:430px;margin:auto; }
  footer { flex-direction:column;gap:22px;text-align:center; }
}
@media (max-width:420px) {
  .brand b { font-size:14px; }.brand-mark{width:36px;height:36px}.nav-cta{font-size:0}.nav-cta:after{content:"Pesan";font-size:11px}
  h1 { font-size:55px; }.hero-actions{gap:16px;flex-wrap:wrap}.hero-visual{min-height:435px}.sun{width:320px;height:320px}.photo-frame{width:260px;height:375px}
}