/* ZPOP — style.css
   Design tokens, shared components (buttons, nav, cards, accordion, forms, footer), Gen-Z palette, and all per-page rules including their @media queries.
   Load order on every page: animations.css > style.css > header.css > home.css > polish.css
   (order matters: later files intentionally override earlier ones). */

/* =========================================================================
   ZPOP — SHARED DESIGN SYSTEM
   Extracted directly from zpop-genz.html (the visual master). Every page
   in the multi-page site includes this file so nav, footer, buttons,
   cards, and motion stay identical everywhere. Do not fork these rules
   per-page — add page-specific rules in that page's own <style> block only.
   ========================================================================= */
:root{
  --zpop-yellow:#FFC72C;
  --zpop-yellow-deep:#F2A900;
  --zpop-orange:#FF7A1A;
  --zpop-red:#E4402C;
  --zpop-green:#1B5E3A;
  --zpop-green-deep:#123324;
  --zpop-cream:#FFF8E7;
  --zpop-cream-dim:#FDEFC9;
  --zpop-charcoal:#241B12;
  --ink:#241B12;
  --stone:#6E6250;
  --font-display:'Fredoka', sans-serif;
  --font-body:'Manrope', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
html,body{ background:var(--zpop-cream); color:var(--ink); font-family:var(--font-body); overflow-x:hidden; width:100%; }
img{ max-width:100%; display:block; }
section{ position:relative; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; }
.eyebrow{ font-family:var(--font-body); font-weight:800; font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--zpop-red); }
.wrap{ max-width:1320px; margin:0 auto; padding:0 6vw; }
.blob{ border-radius:63% 37% 54% 46% / 45% 41% 59% 55%; }
.blob-2{ border-radius:38% 62% 63% 37% / 41% 44% 56% 59%; }

/* ============ PAGE HERO (shared pattern, every inner page uses this) ============ */
.page-hero{ padding:170px 0 90px; text-align:center; position:relative; overflow:hidden; }
.page-hero .wrap{ position:relative; z-index:2; max-width:900px; }
.page-hero h1{ font-size:clamp(44px,7vw,88px); line-height:0.98; letter-spacing:-0.01em; }
.page-hero .sub{ font-family:var(--font-body); font-weight:600; font-size:18px; color:var(--stone); max-width:560px; margin:20px auto 0; line-height:1.6; }
.page-hero .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }

/* ============ BUTTONS ============ */
.btn{
  font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:0.01em;
  border-radius:999px; height:56px; padding:0 32px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; border:none; text-decoration:none; white-space:nowrap;
}
.btn-primary{ background:var(--zpop-red); color:#fff; box-shadow:0 10px 26px rgba(228,64,44,0.32); }
.btn-primary:hover{ transform:scale(1.03) translateY(-2px); }
.btn-yellow{ background:var(--zpop-yellow); color:var(--ink); box-shadow:0 10px 26px rgba(255,199,44,0.4); }
.btn-yellow:hover{ transform:scale(1.03) translateY(-2px); }
.btn-outline{ background:transparent; color:var(--ink); border:2px solid var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--zpop-cream); }
.btn-wa{ background:#25D366; color:#fff; box-shadow:0 10px 26px rgba(37,211,102,0.35); }
.btn-wa:hover{ transform:scale(1.03) translateY(-2px); }
.btn-sm{ height:44px; padding:0 22px; font-size:13.5px; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none !important; }

/* ============ WHATSAPP FLOATING BUTTON ============ */
#wa-float{
  position:fixed; bottom:24px; right:24px; z-index:900;
  width:64px; height:64px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:30px;
  box-shadow:0 12px 30px rgba(37,211,102,0.45); text-decoration:none;
  transition:transform 200ms cubic-bezier(.34,1.56,.64,1);
}
#wa-float:hover{ transform:scale(1.08); }
@media (max-width:760px){ #wa-float{ width:56px; height:56px; bottom:18px; right:18px; font-size:26px; } }

/* ============ NAV (shared across every page; .active marks current page) ============ */
#site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 6vw; background:rgba(255,248,231,0.92); backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(36,27,18,0.06);
  transition:background 250ms ease, box-shadow 250ms ease, padding 250ms ease;
}
#site-nav.scrolled{ background:rgba(255,248,231,0.96); box-shadow:0 4px 24px rgba(36,27,18,0.1); padding:12px 6vw; }
#site-nav .nav-logo{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--zpop-red); text-decoration:none; }
#site-nav .nav-links{ display:flex; align-items:center; gap:26px; list-style:none; }
#site-nav .nav-links a{ font-family:var(--font-body); font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; position:relative; padding:4px 0; }
#site-nav .nav-links a:hover{ color:var(--zpop-red); }
#site-nav .nav-links a.active{ color:var(--zpop-red); }
#site-nav .nav-links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:3px; border-radius:2px; background:var(--zpop-red); }
#site-nav .nav-right{ display:flex; align-items:center; gap:12px; }
#nav-mobile-toggle{ display:none; background:var(--ink); color:var(--zpop-cream); border:none; border-radius:14px; width:46px; height:46px; font-size:20px; cursor:pointer; }
#nav-mobile-panel{
  position:fixed; inset:0; z-index:999; background:var(--zpop-green-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  opacity:0; pointer-events:none; transform:translateY(-14px); transition:opacity 300ms ease, transform 300ms ease;
}
#nav-mobile-panel.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
#nav-mobile-panel a{ font-family:var(--font-display); font-weight:600; font-size:26px; color:var(--zpop-cream); text-decoration:none; }
#nav-mobile-panel a.active{ color:var(--zpop-yellow); }
@media (max-width:980px){
  #site-nav .nav-links{ display:none; }
  #site-nav .nav-right .btn{ display:none; }
  #nav-mobile-toggle{ display:block; }
}

/* ============ CARDS (shared card pattern) ============ */
.zpop-card{
  background:#fff; border-radius:26px; padding:32px 26px; position:relative; overflow:hidden;
  transition:transform 260ms ease, box-shadow 260ms ease; box-shadow:0 10px 30px rgba(36,27,18,0.06);
}
.zpop-card:hover{ transform:translateY(-8px); box-shadow:0 22px 44px rgba(36,27,18,0.14); }

/* ============ ACCORDION (FAQ pages) ============ */
.accordion{ display:flex; flex-direction:column; gap:14px; max-width:820px; margin:0 auto; }
.accordion-item{ background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 6px 20px rgba(36,27,18,0.05); }
.accordion-trigger{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--ink);
  -webkit-appearance:none; appearance:none;
}
.accordion-trigger .plus{ font-size:22px; color:var(--zpop-red); transition:transform 260ms ease; flex-shrink:0; }
.accordion-trigger[aria-expanded="true"] .plus{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height 320ms ease; }
.accordion-panel-inner{ padding:0 26px 24px; font-family:var(--font-body); font-size:14.5px; color:var(--stone); line-height:1.65; }

/* ============ FORMS ============ */
.zpop-form{ display:flex; flex-direction:column; gap:20px; max-width:640px; }
.zpop-field{ display:flex; flex-direction:column; gap:8px; }
.zpop-field label{ font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--ink); }
.zpop-field .req{ color:var(--zpop-red); }
.zpop-field input, .zpop-field select, .zpop-field textarea{
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  border:2px solid rgba(36,27,18,0.12); border-radius:14px; padding:14px 16px; background:#fff;
  outline:none; transition:border-color 180ms ease;
}
.zpop-field input:focus, .zpop-field select:focus, .zpop-field textarea:focus{ border-color:var(--zpop-red); }
.zpop-field textarea{ min-height:120px; resize:vertical; }
.zpop-field.has-error input, .zpop-field.has-error select, .zpop-field.has-error textarea{ border-color:var(--zpop-red); background:#FFF4F2; }
.zpop-field .error-msg{ font-family:var(--font-body); font-size:12.5px; color:var(--zpop-red); display:none; }
.zpop-field.has-error .error-msg{ display:block; }
.zpop-radio-group, .zpop-checkbox-row{ display:flex; flex-wrap:wrap; gap:10px; }
.zpop-radio-chip{
  font-family:var(--font-body); font-weight:700; font-size:13px; padding:10px 18px; border-radius:999px;
  border:2px solid rgba(36,27,18,0.15); cursor:pointer; background:#fff; color:var(--ink);
}
.zpop-radio-chip input{ display:none; }
.zpop-radio-chip.selected{ background:var(--ink); color:var(--zpop-cream); border-color:var(--ink); }
.zpop-consent{ display:flex; align-items:flex-start; gap:10px; font-family:var(--font-body); font-size:13px; color:var(--stone); line-height:1.5; }
.zpop-consent input{ margin-top:3px; }
.form-success{
  display:none; text-align:center; padding:60px 32px; background:var(--zpop-cream-dim); border-radius:26px;
}
.form-success.show{ display:block; }
.form-success h3{ font-size:28px; margin-bottom:12px; }
.form-success p{ font-family:var(--font-body); color:var(--stone); font-size:14.5px; max-width:420px; margin:0 auto; }

/* ============ FOOTER (shared, every page) ============ */
footer.zpop-footer{ background:var(--ink); color:#fff; padding:90px 6vw 32px; }
footer.zpop-footer .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:40px; max-width:1320px; margin:0 auto; }
footer.zpop-footer .footer-h4{ font-family:var(--font-body); font-weight:800; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#8a7f6c; margin-bottom:16px; }
footer.zpop-footer .footer-list{ list-style:none; display:flex; flex-direction:column; gap:12px; }
footer.zpop-footer .footer-list a{ font-family:var(--font-body); font-size:14px; color:#fff; text-decoration:none; }
footer.zpop-footer .footer-list a:hover{ color:var(--zpop-yellow); }
footer.zpop-footer .footer-bottom{ max-width:1320px; margin:64px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,0.12); text-align:center; }
footer.zpop-footer .footer-tagline{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--zpop-yellow); }
footer.zpop-footer .footer-copy{ margin-top:20px; font-family:var(--font-body); font-size:12px; color:#8a7f6c; }
@media (max-width:900px){ footer.zpop-footer .footer-grid{ grid-template-columns:1fr 1fr; row-gap:36px; } }
@media (max-width:560px){ footer.zpop-footer .footer-grid{ grid-template-columns:1fr; } }

/* ============ PLACEHOLDER CONTENT NOTICE ============ */
/* Used anywhere content is a labelled placeholder pending the Master
   Content document / client-supplied data, per the "no invented facts" rule. */
.placeholder-notice{
  display:inline-flex; align-items:center; gap:8px; background:#FFF4D6; color:#8a5a00;
  border:1px dashed #E4A100; border-radius:999px; padding:8px 16px; font-family:var(--font-body);
  font-weight:700; font-size:12px; margin-bottom:16px;
}

/* ============ CROSS-CUTTING UTILITIES ============ */
.section-head{ text-align:center; max-width:700px; margin:0 auto 56px; }
.section-head h2{ font-size:clamp(34px,4.8vw,56px); margin-top:14px; }
.section-head p{ font-family:var(--font-body); color:var(--stone); margin-top:16px; font-size:16px; line-height:1.6; }

@media (prefers-reduced-motion: reduce){
  .kernel-particle{ animation:none !important; }
}


/* ---- route visibility ---- */
.route-section[hidden]{ display:none !important; }

/* ---- per-page rules, merged from every page's local <style> block ---- */
/* == home == */\n
/* =========================================================================
   ZPOP — GEN-Z DIRECTION
   New palette + type system. This intentionally REPLACES the prior premium
   dark-cinematic system per direction change: bright, warm, organic, playful
   — while keeping the corn/kernel storytelling spine and factual discipline
   established earlier (verified claims only; see inline notes).
   ========================================================================= */
:root{
  --zpop-yellow:#FFC72C;
  --zpop-yellow-deep:#F2A900;
  --zpop-orange:#FF7A1A;
  --zpop-red:#E4402C;
  --zpop-green:#1B5E3A;
  --zpop-green-deep:#123324;
  --zpop-cream:#FFF8E7;
  --zpop-cream-dim:#FDEFC9;
  --zpop-charcoal:#241B12;
  --ink:#241B12;
  --stone:#6E6250;
  --font-display:'Fredoka', sans-serif;
  --font-body:'Manrope', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
html,body{ background:var(--zpop-cream); color:var(--ink); font-family:var(--font-body); overflow-x:hidden; width:100%; }
img{ max-width:100%; display:block; }
section{ position:relative; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; }
.eyebrow{ font-family:var(--font-body); font-weight:800; font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--zpop-red); }
.wrap{ max-width:1320px; margin:0 auto; padding:0 6vw; }

/* blob / organic shape utility */
.blob{ border-radius:63% 37% 54% 46% / 45% 41% 59% 55%; }
.blob-2{ border-radius:38% 62% 63% 37% / 41% 44% 56% 59%; }

/* ============ BUTTONS ============ */
.btn{
  font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:0.01em;
  border-radius:999px; height:56px; padding:0 32px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; border:none; text-decoration:none; white-space:nowrap;
}
.btn-primary{ background:var(--zpop-red); color:#fff; box-shadow:0 10px 26px rgba(228,64,44,0.32); }
.btn-primary:hover{ transform:scale(1.03) translateY(-2px); }
.btn-yellow{ background:var(--zpop-yellow); color:var(--ink); box-shadow:0 10px 26px rgba(255,199,44,0.4); }
.btn-yellow:hover{ transform:scale(1.03) translateY(-2px); }
.btn-outline{ background:transparent; color:var(--ink); border:2px solid var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--zpop-cream); }
.btn-wa{ background:#25D366; color:#fff; box-shadow:0 10px 26px rgba(37,211,102,0.35); }
.btn-wa:hover{ transform:scale(1.03) translateY(-2px); }
.btn-sm{ height:44px; padding:0 22px; font-size:13.5px; }

/* ============ WHATSAPP FLOATING BUTTON ============ */
#wa-float{
  position:fixed; bottom:24px; right:24px; z-index:900;
  width:64px; height:64px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:30px;
  box-shadow:0 12px 30px rgba(37,211,102,0.45); text-decoration:none;
  transition:transform 200ms cubic-bezier(.34,1.56,.64,1);
}
#wa-float:hover{ transform:scale(1.08); }
@media (max-width:760px){ #wa-float{ width:56px; height:56px; bottom:18px; right:18px; font-size:26px; } }

/* ============ NAV ============ */
#site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 6vw; background:rgba(255,248,231,0.0);
  transition:background 250ms ease, box-shadow 250ms ease, padding 250ms ease;
}
#site-nav.scrolled{ background:rgba(255,248,231,0.92); backdrop-filter:blur(12px); box-shadow:0 4px 24px rgba(36,27,18,0.08); padding:12px 6vw; }
#site-nav .nav-logo{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--zpop-red); text-decoration:none; }
#site-nav .nav-links{ display:flex; align-items:center; gap:28px; list-style:none; }
#site-nav .nav-links a{ font-family:var(--font-body); font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; }
#site-nav .nav-links a:hover{ color:var(--zpop-red); }
#site-nav .nav-right{ display:flex; align-items:center; gap:12px; }
#nav-mobile-toggle{ display:none; background:var(--ink); color:var(--zpop-cream); border:none; border-radius:14px; width:46px; height:46px; font-size:20px; cursor:pointer; }
#nav-mobile-panel{
  position:fixed; inset:0; z-index:999; background:var(--zpop-green-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  opacity:0; pointer-events:none; transform:translateY(-14px); transition:opacity 300ms ease, transform 300ms ease;
}
#nav-mobile-panel.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
#nav-mobile-panel a{ font-family:var(--font-display); font-weight:600; font-size:28px; color:var(--zpop-cream); text-decoration:none; }
@media (max-width:980px){
  #site-nav .nav-links{ display:none; }
  #site-nav .nav-right .btn{ display:none; }
  #nav-mobile-toggle{ display:block; }
}

/* ============ CORN STORY ============ */
  #story{ background:var(--zpop-green-deep); color:var(--zpop-cream); padding:140px 0; overflow:hidden; }
  #story .story-head{ text-align:center; max-width:780px; margin:0 auto 70px; }
  #story .story-head h2{ font-size:clamp(38px,5.4vw,64px); color:#fff; margin-top:14px; }
  #story .story-head p{ font-family:var(--font-body); font-weight:500; color:#D9CBB0; margin-top:18px; font-size:17px; line-height:1.6; }
  #story-cob-wrap{ position:relative; width:340px; height:340px; margin:0 auto; }
  #story-cob-wrap img{ width:100%; height:100%; object-fit:cover; border-radius:50%; border:10px solid var(--zpop-yellow); animation:spinSlow 22s linear infinite; }
  @keyframes spinSlow{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
  .story-orbit-card{
    position:absolute; background:#fff; color:var(--ink); border-radius:18px; padding:14px 18px;
    font-family:var(--font-display); font-weight:600; font-size:13.5px; box-shadow:0 16px 34px rgba(0,0,0,0.25);
    display:flex; align-items:center; gap:10px;
  }
  .story-orbit-card img{ width:36px; height:36px; border-radius:9px; object-fit:cover; }
  #story-visual{ position:relative; min-height:420px; }
  .story-steps{ display:flex; justify-content:center; gap:14px; margin-top:56px; flex-wrap:wrap; }
  .story-step{ font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--zpop-yellow); display:flex; align-items:center; gap:8px; }
  .story-step .arrow{ color:#7a6d54; }
  @media (max-width:760px){ #story-cob-wrap{ width:220px; height:220px; } .story-orbit-card{ position:static; margin:8px auto; display:inline-flex; } #story-visual{ display:flex; flex-direction:column; align-items:center; gap:12px; } }


  /* ============ WHY ZPOP ============ */
  #why{ background:var(--zpop-cream); padding:140px 0; }
  #why .why-head{ text-align:center; max-width:680px; margin:0 auto 64px; }
  #why .why-head h2{ font-size:clamp(36px,5vw,58px); margin-top:14px; }
  .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .why-card{
    background:#fff; border-radius:26px; padding:32px 26px; position:relative; overflow:hidden;
    transition:transform 260ms var(--pop-ease-settle, ease), box-shadow 260ms ease;
    box-shadow:0 10px 30px rgba(36,27,18,0.06);
  }
  .why-card:hover{ transform:translateY(-8px); box-shadow:0 22px 44px rgba(36,27,18,0.14); }
  .why-num{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--zpop-orange); margin-bottom:16px; }
  .why-card h3{ font-size:19px; margin-bottom:10px; }
  .why-card p{ font-family:var(--font-body); font-size:13.5px; color:var(--stone); line-height:1.55; }
  .why-card .why-kernel{
    position:absolute; bottom:-14px; right:-10px; width:56px; height:70px; opacity:0.15;
    background:radial-gradient(circle at 35% 30%, var(--zpop-yellow), var(--zpop-orange));
    border-radius:52% 48% 55% 45% / 60% 55% 45% 40%;
  }
  @media (max-width:1100px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }


  /* ============ MENU EXPERIENCE ============ */
  #menu{ background:#fff; padding:140px 0 120px; }
  #menu .menu-head{ text-align:center; max-width:680px; margin:0 auto 40px; }
  #menu .menu-head h2{ font-size:clamp(38px,5.4vw,64px); margin-top:14px; }
  .menu-tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:52px; }
  .menu-tab{
    font-family:var(--font-display); font-weight:600; font-size:14px; padding:12px 24px; border-radius:999px;
    border:2px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer;
    -webkit-appearance:none; appearance:none;
  }
  .menu-tab.active{ background:var(--ink); color:var(--zpop-cream); }
  .menu-track{ display:flex; gap:24px; overflow-x:auto; padding:8px 6vw 30px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .menu-track::-webkit-scrollbar{ height:8px; }
  .menu-track::-webkit-scrollbar-thumb{ background:var(--zpop-yellow); border-radius:99px; }
  .menu-item{
    flex:0 0 300px; scroll-snap-align:start; background:var(--zpop-cream); border-radius:28px; overflow:hidden;
    transition:transform 260ms ease, box-shadow 260ms ease; box-shadow:0 10px 26px rgba(36,27,18,0.06);
  }
  .menu-item:hover{ transform:translateY(-8px); box-shadow:0 24px 48px rgba(36,27,18,0.16); }
  .menu-item-img{ aspect-ratio:4/5; overflow:hidden; }
  .menu-item-img img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms ease; }
  .menu-item:hover .menu-item-img img{ transform:scale(1.05); }
  .menu-item-body{ padding:20px; }
  .menu-item-body .cat-tag{ font-family:var(--font-body); font-weight:800; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--zpop-orange); }
  .menu-item-body h3{ font-size:20px; margin:8px 0 8px; }
  .menu-item-body p{ font-family:var(--font-body); font-size:13.5px; color:var(--stone); line-height:1.5; margin-bottom:16px; min-height:40px; }
  .menu-item-cta{ display:flex; gap:8px; }
  .menu-item-cta .btn{ height:40px; padding:0 16px; font-size:12.5px; }
  .menu-footer-cta{ text-align:center; margin-top:16px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
  @media (max-width:600px){ .menu-item{ flex-basis:78vw; } }


  /* ============ CORN TO CRAVE ============ */
  #crave{ background:var(--zpop-green-deep); color:var(--zpop-cream); padding:140px 0; }
  #crave .crave-head{ text-align:center; max-width:700px; margin:0 auto 70px; }
  #crave .crave-head h2{ font-size:clamp(36px,5vw,58px); color:#fff; margin-top:14px; }
  .crave-strip{ display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; }
  .crave-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:150px; }
  .crave-step .crave-dot{
    width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--zpop-yellow); color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:13px;
    box-shadow:0 14px 30px rgba(0,0,0,0.3); margin-bottom:14px; transition:transform 240ms var(--pop-ease-overshoot,ease);
  }
  .crave-step:hover .crave-dot{ transform:scale(1.08); }
  .crave-step span{ font-family:var(--font-body); font-weight:700; font-size:13px; color:#D9CBB0; }
  .crave-arrow-v{ color:var(--zpop-yellow); font-size:22px; margin:0 8px; }
  @media (max-width:900px){ .crave-strip{ flex-direction:column; } .crave-arrow-v{ transform:rotate(90deg); margin:6px 0; } }


  /* ============ CREATORS ============ */
  #creators{ background:var(--zpop-cream); padding:140px 0; }
  #creators .creators-head{ text-align:center; max-width:680px; margin:0 auto 60px; }
  #creators .creators-head h2{ font-size:clamp(36px,5vw,58px); margin-top:14px; }
  .creators-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  .creator-card{
    background:var(--ink); color:#fff; border-radius:26px; overflow:hidden; position:relative;
    transition:transform 280ms ease; aspect-ratio:3/4.6;
  }
  .creator-card:nth-child(2n){ transform:rotate(-2deg); }
  .creator-card:nth-child(2n+1){ transform:rotate(1.5deg); }
  .creator-card:hover{ transform:rotate(0deg) translateY(-8px) scale(1.02); }
  .creator-card img{ width:100%; height:100%; object-fit:cover; opacity:0.85; }
  .creator-play{
    position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.9);
    display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--ink);
  }
  .creator-info{ position:absolute; left:0; right:0; bottom:0; padding:18px; background:linear-gradient(0deg, rgba(0,0,0,0.85), transparent 80%); }
  .creator-info .c-name{ font-family:var(--font-display); font-weight:600; font-size:16px; }
  .creator-info .c-handle{ font-family:var(--font-body); font-size:12px; color:var(--zpop-yellow); margin-bottom:8px; }
  .creator-info .c-quote{ font-family:var(--font-body); font-size:12.5px; color:#e8e2d4; line-height:1.4; }
  .creator-info .c-food{ font-family:var(--font-body); font-weight:700; font-size:11px; color:var(--zpop-orange); margin-top:8px; text-transform:uppercase; letter-spacing:0.04em; }
  .creators-cta{ text-align:center; margin-top:56px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
  @media (max-width:1100px){ .creators-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .creators-grid{ grid-template-columns:1fr; } .creator-card{ transform:none !important; } }


  /* ============ SOCIAL PROOF ============ */
  #social-proof{ background:#fff; padding:140px 0; }
  .testi-wrap{ max-width:820px; margin:60px auto 0; text-align:center; position:relative; }
  .testi-card-genz{
    background:var(--zpop-cream-dim); border-radius:32px; padding:56px 48px; position:relative;
  }
  .testi-card-genz .big-quote{ font-family:var(--font-display); font-size:64px; color:var(--zpop-yellow-deep); line-height:0.5; }
  .testi-card-genz p{ font-family:var(--font-body); font-weight:600; font-size:clamp(18px,2.2vw,24px); line-height:1.5; color:var(--ink); margin:12px 0 24px; }
  .testi-card-genz .t-name{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--zpop-red); }
  .testi-dots-genz{ display:flex; justify-content:center; gap:10px; margin-top:32px; }
  .testi-dots-genz button{ width:9px; height:9px; border-radius:50%; background:rgba(36,27,18,0.2); border:none; cursor:pointer; padding:0; }
  .testi-dots-genz button.active{ background:var(--zpop-red); }


  /* ============ OUR QSR ============ */
  #qsr{ background:var(--zpop-green-deep); color:var(--zpop-cream); padding:140px 0; }
  .qsr-layout{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
  .qsr-facts{ display:flex; flex-direction:column; gap:22px; margin-top:32px; }
  .qsr-fact{ display:flex; gap:14px; align-items:flex-start; }
  .qsr-fact .dot{ width:8px; height:8px; border-radius:50%; background:var(--zpop-yellow); margin-top:8px; flex-shrink:0; }
  .qsr-fact p{ font-family:var(--font-body); font-size:15px; color:#D9CBB0; line-height:1.55; }
  .qsr-visual{ border-radius:32px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,0.35); }
  .qsr-visual img{ width:100%; display:block; }
  .qsr-cta-row{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
  @media (max-width:900px){ .qsr-layout{ grid-template-columns:1fr; } }


  /* ============ GROWTH / EXPANSION ============ */
  #growth{ background:var(--zpop-yellow); padding:140px 0; }
  .growth-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; margin:60px 0 70px; }
  .g-stat-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(52px,7vw,84px); color:var(--ink); line-height:0.9; }
  .g-stat-label{ font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--zpop-red); margin-top:10px; }
  .growth-cities{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:48px; }
  .city-pin{
    background:var(--ink); color:#fff; font-family:var(--font-display); font-weight:600; font-size:14px;
    padding:12px 24px; border-radius:999px; display:flex; align-items:center; gap:8px;
  }
  .city-pin .dot{ width:8px; height:8px; border-radius:50%; background:var(--zpop-yellow); }
  .growth-destinations{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:56px; }
  .dest-chip{ background:#fff; border-radius:999px; padding:10px 20px; font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--ink); }
  .growth-cta{ text-align:center; }
  @media (max-width:700px){ .growth-stats{ grid-template-columns:1fr; gap:44px; } }


  /* ============ FRANCHISE ============ */
  #franchise{ background:var(--zpop-red); color:#fff; padding:150px 0; text-align:center; }
  #franchise h2{ font-size:clamp(38px,6vw,74px); line-height:1.02; }
  #franchise .f-points{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:40px 0 48px; }
  .f-point{ background:rgba(255,255,255,0.14); border-radius:999px; padding:10px 20px; font-family:var(--font-body); font-weight:700; font-size:13px; }
  #franchise .f-cta{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }


  /* ============ INSTAGRAM / SOCIAL WALL ============ */
  #insta-wall{ background:#fff; padding:140px 0; }
  .insta-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
  .insta-cell{ aspect-ratio:1/1; border-radius:16px; overflow:hidden; position:relative; }
  .insta-cell img{ width:100%; height:100%; object-fit:cover; transition:transform 300ms ease; }
  .insta-cell:hover img{ transform:scale(1.08); }
  .insta-cell .insta-icon{ position:absolute; top:8px; right:8px; font-size:13px; }
  @media (max-width:900px){ .insta-grid{ grid-template-columns:repeat(3,1fr); } }


  /* ============ FINAL CTA ============ */
  #final-cta{ background:var(--zpop-green-deep); color:#fff; padding:180px 0; text-align:center; position:relative; overflow:hidden; }
  #final-cta .final-kernel{
    position:absolute; left:50%; top:50%; width:60vw; max-width:900px; aspect-ratio:1/1;
    transform:translate(-50%,-50%); border-radius:52% 48% 55% 45% / 60% 55% 45% 40%;
    background:radial-gradient(circle at 40% 30%, var(--zpop-yellow), var(--zpop-yellow-deep) 55%, var(--zpop-orange));
    opacity:0.16; z-index:0;
  }
  #final-cta h2{ position:relative; z-index:1; font-size:clamp(56px,10vw,140px); color:#fff; line-height:0.92; }
  #final-cta .final-sub{ position:relative; z-index:1; font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2.4vw,28px); color:var(--zpop-yellow); margin-top:18px; }
  #final-cta .final-cta-row{ position:relative; z-index:1; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:48px; }
\n/* == our-story == */\n
  #story-hero{ background:radial-gradient(circle at 80% 10%, rgba(255,199,44,0.5), transparent 45%), var(--zpop-cream); }
  .zpop-breakdown{ background:var(--zpop-green-deep); color:var(--zpop-cream); padding:120px 0; }
  .zpop-breakdown .letters{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:56px; }
  .letter-card{ background:rgba(255,255,255,0.06); border-radius:28px; padding:40px; }
  .letter-card .big-letter{ font-family:var(--font-display); font-weight:700; font-size:64px; color:var(--zpop-yellow); line-height:1; }
  .letter-card h3{ font-size:24px; color:#fff; margin:16px 0 10px; }
  .letter-card p{ font-family:var(--font-body); color:#D9CBB0; font-size:14.5px; line-height:1.6; }
  .equation{ text-align:center; margin-top:56px; font-family:var(--font-display); font-weight:600; font-size:clamp(22px,3vw,36px); color:var(--zpop-yellow); }
  @media (max-width:760px){ .zpop-breakdown .letters{ grid-template-columns:1fr; } }

  .why-exists{ background:#fff; padding:130px 0; }
  .why-exists .layout{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
  .why-exists img{ border-radius:32px; width:100%; box-shadow:0 30px 60px rgba(36,27,18,0.14); }
  .why-exists p{ font-family:var(--font-body); font-size:16px; color:var(--stone); line-height:1.7; margin-top:20px; }
  @media (max-width:900px){ .why-exists .layout{ grid-template-columns:1fr; } }

  .mv-grid{ background:var(--zpop-cream-dim); padding:130px 0; }
  .mv-cards{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  .mv-card{ background:#fff; border-radius:28px; padding:44px; }
  .mv-card .eyebrow{ margin-bottom:14px; }
  .mv-card p{ font-family:var(--font-body); font-size:16px; color:var(--ink); line-height:1.65; font-weight:600; }
  @media (max-width:760px){ .mv-cards{ grid-template-columns:1fr; } }

  .journey-strip{ background:#fff; padding:130px 0; text-align:center; }
  .journey-steps{ display:flex; justify-content:center; gap:0; flex-wrap:wrap; margin-top:60px; }
  .journey-step{ width:180px; }
  .journey-step .j-num{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--zpop-red); }
  .journey-step h3{ font-size:19px; margin:10px 0 8px; }
  .journey-step p{ font-family:var(--font-body); font-size:13px; color:var(--stone); line-height:1.5; }
  .journey-arrow{ color:var(--zpop-yellow-deep); font-size:24px; align-self:center; margin:0 6px; }
  @media (max-width:900px){ .journey-steps{ flex-direction:column; align-items:center; } .journey-arrow{ transform:rotate(90deg); margin:10px 0; } }
\n/* == menu == */\n
  #menu-hero{ background:radial-gradient(circle at 15% 15%, rgba(255,122,26,0.35), transparent 45%), var(--zpop-cream); }
  .menu-tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 0 56px; }
  .menu-tab{ font-family:var(--font-display); font-weight:600; font-size:14px; padding:12px 24px; border-radius:999px; border:2px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; -webkit-appearance:none; appearance:none; }
  .menu-tab.active{ background:var(--ink); color:var(--zpop-cream); }
  .full-menu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding-bottom:60px; }
  .menu-card{ background:#fff; border-radius:26px; overflow:hidden; box-shadow:0 10px 26px rgba(36,27,18,0.06); transition:transform 260ms ease, box-shadow 260ms ease; }
  .menu-card:hover{ transform:translateY(-8px); box-shadow:0 24px 48px rgba(36,27,18,0.16); }
  .menu-card-img{ aspect-ratio:4/5; overflow:hidden; position:relative; }
  .menu-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms ease; }
  .menu-card:hover .menu-card-img img{ transform:scale(1.05); }
  .veg-tag{ position:absolute; top:14px; left:14px; width:22px; height:22px; border:2px solid; border-radius:4px; display:flex; align-items:center; justify-content:center; background:#fff; }
  .veg-tag.veg{ border-color:var(--zpop-green); }
  .veg-tag.veg .dot{ width:9px; height:9px; border-radius:50%; background:var(--zpop-green); }
  .veg-tag.nonveg{ border-color:var(--zpop-red); }
  .veg-tag.nonveg .dot{ width:9px; height:9px; border-radius:50%; background:var(--zpop-red); }
  .menu-card-body{ padding:22px; }
  .menu-card-body .cat-tag{ font-family:var(--font-body); font-weight:800; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--zpop-orange); }
  .menu-card-body h3{ font-size:20px; margin:8px 0 8px; }
  .menu-card-body p{ font-family:var(--font-body); font-size:13.5px; color:var(--stone); line-height:1.5; margin-bottom:14px; min-height:40px; }
  .menu-card-body .opt-tag{ font-family:var(--font-body); font-weight:700; font-size:11px; color:var(--zpop-red); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px; display:block; }
  @media (max-width:1000px){ .full-menu-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .full-menu-grid{ grid-template-columns:1fr; } }

  .cat-notice{ text-align:center; font-family:var(--font-body); font-size:13px; color:var(--stone); margin:-30px auto 40px; max-width:520px; }
\n/* == our-vision == */\n
  #vision-hero{ background:var(--zpop-green-deep); color:var(--zpop-cream); padding:180px 0 110px; }
  #vision-hero h1{ color:#fff; }
  #vision-hero .sub{ color:var(--zpop-yellow); font-family:var(--font-display); font-weight:600; }

  .vision-stage{ padding:130px 0; }
  .vision-stage:nth-of-type(odd){ background:#fff; }
  .vision-stage:nth-of-type(even){ background:var(--zpop-cream-dim); }
  .stage-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
  .stage-layout.reverse{ grid-template-columns:1.1fr 0.9fr; }
  .stage-layout.reverse .stage-img{ order:2; }
  .stage-num{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--zpop-red); letter-spacing:0.08em; }
  .stage-layout h2{ font-size:clamp(30px,4vw,46px); margin:14px 0 18px; }
  .stage-layout p{ font-family:var(--font-body); font-size:16px; color:var(--stone); line-height:1.7; }
  .stage-img{ border-radius:32px; overflow:hidden; box-shadow:0 30px 60px rgba(36,27,18,0.14); aspect-ratio:5/4; }
  .stage-img img{ width:100%; height:100%; object-fit:cover; }
  @media (max-width:900px){ .stage-layout, .stage-layout.reverse{ grid-template-columns:1fr; } .stage-layout.reverse .stage-img{ order:0; } }

  .future-note{ background:var(--zpop-yellow); padding:70px 0; text-align:center; }
  .future-note p{ font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2.4vw,26px); color:var(--ink); max-width:760px; margin:0 auto; line-height:1.5; }
\n/* == locations == */\n
  #loc-hero{ background:radial-gradient(circle at 85% 15%, rgba(255,199,44,0.5), transparent 45%), var(--zpop-cream); }
  .loc-toolbar{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:48px; }
  .loc-search{ flex:1; max-width:360px; }
  .loc-search input{ width:100%; font-family:var(--font-body); font-size:15px; border:2px solid rgba(36,27,18,0.15); border-radius:999px; padding:14px 22px; outline:none; }
  .loc-search input:focus{ border-color:var(--zpop-red); }
  .loc-filter-chip{ font-family:var(--font-display); font-weight:600; font-size:13.5px; padding:12px 20px; border-radius:999px; border:2px solid var(--ink); background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; }
  .loc-filter-chip.active{ background:var(--ink); color:var(--zpop-cream); }

  .loc-layout{ display:grid; grid-template-columns:1fr 1.1fr; gap:32px; }
  .loc-map-area{ background:var(--zpop-cream-dim); border-radius:28px; min-height:520px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; text-align:center; padding:32px; }
  .loc-map-area .map-icon{ font-size:44px; }
  .loc-map-area p{ font-family:var(--font-body); color:var(--stone); font-size:14px; max-width:320px; }

  .outlet-list{ display:flex; flex-direction:column; gap:18px; max-height:560px; overflow-y:auto; padding-right:6px; }
  .outlet-card{ background:#fff; border-radius:22px; padding:24px; box-shadow:0 8px 22px rgba(36,27,18,0.06); }
  .outlet-card h3{ font-size:19px; margin-bottom:6px; }
  .outlet-card .addr{ font-family:var(--font-body); font-size:13.5px; color:var(--stone); line-height:1.55; margin-bottom:10px; }
  .outlet-card .hours{ font-family:var(--font-body); font-weight:700; font-size:12.5px; color:var(--zpop-green); margin-bottom:14px; }
  .outlet-card .outlet-cta{ display:flex; gap:10px; flex-wrap:wrap; }
  @media (max-width:900px){ .loc-layout{ grid-template-columns:1fr; } .loc-map-area{ min-height:280px; } }
\n/* == franchise == */\n
  #fr-hero{ background:var(--zpop-red); color:#fff; padding:180px 0 110px; text-align:center; }
  #fr-hero h1{ color:#fff; }
  #fr-hero .sub{ color:var(--zpop-yellow); }
  #fr-hero .cta-row{ margin-top:36px; }

  .positioning{ background:#fff; padding:120px 0; text-align:center; }
  .positioning p{ font-family:var(--font-body); font-size:19px; color:var(--stone); max-width:760px; margin:0 auto; line-height:1.7; }
  .positioning .points{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:40px; }
  .positioning .point{ background:var(--zpop-cream-dim); border-radius:999px; padding:12px 22px; font-family:var(--font-body); font-weight:700; font-size:13px; }

  .formats{ background:var(--zpop-cream-dim); padding:130px 0; }
  .format-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .format-card{ background:#fff; border-radius:28px; padding:36px 30px; }
  .format-card .f-icon{ font-size:34px; margin-bottom:18px; }
  .format-card h3{ font-size:22px; margin-bottom:6px; }
  .format-card .f-tag{ font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--zpop-red); margin-bottom:16px; }
  .format-card p{ font-family:var(--font-body); font-size:14px; color:var(--stone); line-height:1.6; }
  @media (max-width:900px){ .format-cards{ grid-template-columns:1fr; } }

  .process{ background:#fff; padding:130px 0; }
  .process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  .process-step{ background:var(--zpop-cream-dim); border-radius:22px; padding:26px 22px; }
  .process-step .p-num{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--zpop-orange); }
  .process-step h3{ font-size:16px; margin-top:10px; }
  @media (max-width:900px){ .process-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .process-grid{ grid-template-columns:1fr; } }

  .enquiry-section{ background:var(--zpop-green-deep); color:#fff; padding:130px 0; }
  .enquiry-section .section-head h2{ color:#fff; }
  .enquiry-section .section-head p{ color:#D9CBB0; }
  .enquiry-section .zpop-field label{ color:#fff; }
  .enquiry-section .zpop-consent{ color:#D9CBB0; }
  .enquiry-form-wrap{ max-width:680px; margin:0 auto; background:#fff; border-radius:32px; padding:48px; }
  .enquiry-form-wrap .zpop-field label{ color:var(--ink); }

  .fr-faq{ background:var(--zpop-cream); padding:130px 0; }
\n/* == contact == */\n
  #contact-hero{ background:radial-gradient(circle at 20% 20%, rgba(255,122,26,0.35), transparent 45%), var(--zpop-cream); }
  .contact-layout{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; padding:0 0 130px; }
  .pathways{ display:flex; flex-direction:column; gap:16px; margin-top:32px; }
  .pathway-card{ background:#fff; border-radius:22px; padding:24px; box-shadow:0 8px 22px rgba(36,27,18,0.06); }
  .pathway-card h3{ font-size:17px; margin-bottom:6px; }
  .pathway-card p{ font-family:var(--font-body); font-size:13.5px; color:var(--stone); line-height:1.5; }
  .contact-form-wrap{ background:#fff; border-radius:32px; padding:44px; box-shadow:0 20px 50px rgba(36,27,18,0.08); }
  @media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }
\n/* == faq == */\n
  #faq-hero{ background:var(--zpop-cream); padding:170px 0 80px; text-align:center; }
  .faq-section{ padding:0 0 130px; }
\n/* == privacy-policy == */\n
  .legal-hero{ background:var(--zpop-cream); padding:170px 0 60px; }
  .legal-body{ max-width:760px; margin:0 auto; padding-bottom:130px; }
\n/* == terms-and-conditions == */\n
  .legal-hero{ background:var(--zpop-cream); padding:170px 0 60px; }
  .legal-body{ max-width:760px; margin:0 auto; padding-bottom:130px; }
\n/* == refund-policy == */\n
  .legal-hero{ background:var(--zpop-cream); padding:170px 0 60px; }
  .legal-body{ max-width:760px; margin:0 auto; padding-bottom:130px; }
\n/* == franchise-disclaimer == */\n
  .legal-hero{ background:var(--zpop-cream); padding:170px 0 60px; }
  .legal-body{ max-width:760px; margin:0 auto; padding-bottom:130px; }
\n