/* WE-WIN SCM — shared stylesheet for the inner pages (FooD, AIR, LAB, order, about, cases, contact).
   Same system as the approved homepage (redesign-v16): mobile-first, ONE layout; desktop = the same column enlarged and centred,
   with the page's hero image heavily blurred + darkened on both sides. Deep navy 60 · gold + light 30 · gem accents 10.
   Liquid glass is one recipe (--g-* below) on the bars, the hero card and content panels — always over a photo or soft light.
   Every action button lives once, in the bottom bar.
   Each page adds its own small stylesheet with its --img-* lines (one line per image), band framing, light fields and gem colour. */

:root{
  --bg:#060d1f; --gold:#c7a43b; --gold-2:#e2c46a; --gold-3:#f2dc93;
  --tx:#f5efe3; --tx2:#c3cbda; --line:rgba(255,255,255,.09);
  --emerald:#22a873; --sapphire:#4a7ff0; --amethyst:#a06ae0; --ruby:#c23a5a;
  --gem:var(--gold-2);                       /* page accent; each page sets its business gem (FooD emerald, AIR sapphire, LAB amethyst) */
  --side:22px; --col:460px;
  --font:"Noto Sans SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --serif:"Noto Serif SC","Songti SC","STSong",serif;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* ============ LIQUID GLASS — the one recipe (identical to the homepage v16) ============ */
  --g-tint:   rgba(13,26,58,.34);
  --g-sheen:  linear-gradient(150deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.035) 36%,rgba(255,255,255,.012) 62%,rgba(255,255,255,.055) 100%);
  --g-filter: blur(22px) saturate(185%) brightness(.9);
  --g-spec:   radial-gradient(120% 70% at 8% 0%,rgba(255,255,255,.11),rgba(255,255,255,0) 56%);
  --g-rim:    linear-gradient(155deg,rgba(255,255,255,.62),rgba(255,255,255,.14) 22%,rgba(255,255,255,.04) 52%,rgba(255,255,255,.03) 76%,rgba(226,196,106,.34));
  --g-shadow: inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 22px rgba(255,255,255,.035),inset 0 -12px 22px -20px rgba(150,180,255,.22),
              0 16px 36px -18px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.22);
  --g-solid:  rgba(17,32,68,.95);
  --g-r:      20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:14.5px;line-height:1.75;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
ul,ol{list-style:none}
h1,h2,h3,h4{line-height:1.4;font-weight:600}
svg{fill:none}
.nw{white-space:nowrap}

/* type scale: h1 29 serif · h2 22 serif · h3 15.5 sans · body 14.5 · small 12.5 */
.head{margin-bottom:24px}
.head h2{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:.01em}
.head h2::before{content:"";display:block;width:22px;height:1px;background:var(--gold-2);margin-bottom:14px}
.head p{color:var(--tx2);margin-top:6px}
h3{font-size:15.5px}

/* ---------- backdrop ---------- */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 70% at 50% -10%,#0c1a3b 0%,var(--bg) 62%)}

/* ---------- liquid glass ---------- */
.glass{position:relative;isolation:isolate;border-radius:var(--g-r);
  background:var(--g-sheen),var(--g-tint);
  -webkit-backdrop-filter:var(--g-filter);backdrop-filter:var(--g-filter);
  box-shadow:var(--g-shadow)}
.glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--g-spec)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.topbar,.bottombar{--g-tint:rgba(9,19,44,.5); --g-filter:blur(24px) saturate(180%) brightness(.72)}
.hero-card{--g-tint:rgba(12,24,54,.36)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass{background:var(--g-sheen),var(--g-solid)}
}
@media (prefers-reduced-transparency:reduce){
  .glass{background:var(--g-sheen),var(--g-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- column ---------- */
.app{position:relative;z-index:1;isolation:isolate;max-width:var(--col);margin:0 auto;min-height:100vh}

/* ---------- top bar: logo (→ homepage) + tabs ---------- */
.topbar{position:sticky;top:10px;z-index:40;margin:10px 10px 0;height:52px;--g-r:26px;display:flex;align-items:center;gap:6px;padding:0 6px 0 12px}
.topbar .logo{flex:none}
.wordmark{display:flex;align-items:center;gap:7px}
.wordmark .mark{height:26px;width:auto;flex:none}
.wm{display:flex;align-items:baseline;gap:.38em;font-family:var(--serif);white-space:nowrap;line-height:1}
.wm b{font-weight:700;color:var(--gold-2);font-size:15px;letter-spacing:.01em}
.wm i{font-style:normal;font-weight:700;color:var(--ruby);font-size:10.5px;letter-spacing:.05em}
.tabs{display:flex;gap:0;overflow-x:auto;margin-left:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 14px);mask:linear-gradient(90deg,transparent,#000 14px);padding-left:10px}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;display:flex;align-items:center;font-size:13.5px;color:var(--tx2);min-height:44px;padding:0 11px;border-radius:999px;transition:color .25s,background .25s}
.tabs a.on{color:var(--tx);background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}

/* ---------- single-button nav menu (2026-10-07): one button on every page opens the full page list, instead of per-page in-page tabs ---------- */
.nav-toggle{margin-left:auto;flex:none;width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;border:1px solid var(--line);border-radius:999px;cursor:pointer;padding:0}
.nav-toggle span{width:17px;height:2px;border-radius:2px;background:var(--tx);transition:transform .22s,opacity .22s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.site-menu{position:absolute;top:calc(100% + 8px);right:10px;z-index:60;display:flex;flex-direction:column;min-width:188px;background:var(--g-solid,#0d1a35);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.45);padding:7px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.site-menu[hidden]{display:none}
.site-menu a{padding:12px 14px;border-radius:10px;font-size:14.5px;color:var(--tx2);text-decoration:none;transition:color .2s,background .2s}
.site-menu a.on,.site-menu a:hover{color:var(--tx);background:rgba(255,255,255,.08)}

/* ---------- page hero: portrait photo (--img-hero) + glass card over its lower part ---------- */
.phero{position:relative;padding:calc(min(100vw,var(--col)) * var(--hero-card-at,.8) - 62px) 14px 0}
.phero .ph{position:absolute;z-index:0;left:0;right:0;top:-62px;aspect-ratio:var(--hero-ratio,4/5);pointer-events:none;
  background:var(--img-hero) var(--hero-pos,50% 30%)/cover no-repeat,#0a1530;
  -webkit-mask:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 16%);mask:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 16%)}
.phero .ph::after{content:"";position:absolute;inset:0;background:var(--hero-shade,linear-gradient(180deg,rgba(6,13,31,.45) 0,rgba(6,13,31,.05) 18%,rgba(6,13,31,.1) 48%,rgba(6,13,31,.6) 76%,var(--bg) 100%))}
.hero-card{z-index:1;--g-r:28px;padding:24px 22px 24px}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--gold-2)}   /* no uppercase: keeps FooD / LAB / AIR as written */
.eyebrow img{height:34px;width:auto;flex:none}
.phero h1{font-family:var(--serif);font-weight:700;font-size:29px;line-height:1.36;margin:14px 0 12px}
.phero h1 em{font-style:normal;color:var(--gold-3)}
.hero-card p{color:var(--tx2)}
.hero-card .eyebrow{color:var(--gold-2)}

/* ---------- sections ---------- */
main{position:relative}
.sec{position:relative;padding:0 var(--side);margin-top:88px}
.sec>*{position:relative;z-index:1}
/* light field behind a section's glass: static, low-alpha blooms set per section with --lf (masked top/bottom: no seams) */
.sec::after{content:"";position:absolute;z-index:0;left:0;right:0;top:var(--lf-t,-70px);bottom:var(--lf-b,-70px);pointer-events:none;background:var(--lf,none);
  -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
/* photo band behind a section (image via --band); it continues behind the section's glass panels */
.band{padding-top:var(--band-pad,230px);margin-top:72px}
.band::before{content:"";position:absolute;z-index:0;left:0;right:0;top:0;height:var(--band-h,440px);pointer-events:none;
  background:var(--band-shade,linear-gradient(180deg,rgba(6,13,31,.35) 0%,rgba(6,13,31,0) 25%,rgba(6,13,31,.35) 55%,rgba(6,13,31,.85) 80%,var(--bg) 100%)),var(--band) var(--band-pos,50% 50%)/var(--band-size,cover) no-repeat;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 14%);mask:linear-gradient(180deg,transparent 0,#000 14%)}
/* lazy photos: with JS, band photos load just before they scroll into view; without JS they load normally */
.js .band.lazy-bg:not(.is-in)::before{--band:none}

/* ---------- glass list: stacked panels (title + text) ---------- */
.stack{display:grid;gap:10px}
.stack>*{padding:15px 16px;--g-r:18px}
.stack p{color:var(--tx2);margin-top:4px}
/* numbered variant */
.steps{counter-reset:s}
.steps>li{counter-increment:s;padding-left:52px}
.steps h3::before{content:counter(s,decimal-leading-zero);position:absolute;left:17px;top:17px;font-family:var(--serif);font-size:13.5px;font-weight:600;color:var(--gold-2)}
/* two-column rows: label | text */
.rows>*{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:baseline}
.rows h3{font-size:14.5px}
.rows p{margin-top:0}
/* a quiet closing line under a group */
.pull{margin-top:22px;padding-left:14px;border-left:1px solid var(--gold-2);font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.7;color:var(--tx)}

/* ---------- link card (guides etc.): whole card is the link ---------- */
.linkcard{display:block;padding:18px 44px 18px 18px;--g-r:20px}
.linkcard small{display:block;font-size:12.5px;color:var(--tx2);letter-spacing:.06em}
.linkcard h3{font-family:var(--serif);font-size:18px;margin-top:2px}
.linkcard p{color:var(--tx2);font-size:13.5px;margin-top:4px}
.linkcard .more{display:inline-block;margin-top:10px;font-size:13.5px;color:var(--gold-2)}
.linkcard h3::after{content:"›";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:var(--font);font-size:22px;font-weight:400;color:var(--tx2);transition:transform .25s var(--ease),color .25s}

/* ---------- faq: glass items ---------- */
.faq{display:grid;gap:10px}
.faq details{padding:0 16px;--g-r:18px}
.faq summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:18px;font-weight:400;color:var(--gold-2);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--tx2);font-size:13.5px;padding:0 0 16px}

/* ---------- closing: text only, points to the bottom bar ---------- */
.closing p{color:var(--tx2)}

/* ---------- footer ---------- */
.footer{position:relative;margin-top:96px;padding:36px var(--side) 132px;text-align:center;color:var(--tx2);font-size:12px;border-top:1px solid var(--line)}
.flogo{width:auto;display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 18px}
.flogo .mark{height:40px;width:auto;flex:none}
.flogo .wm-lg{flex-direction:column;align-items:flex-start;gap:2px}
.flogo .wm-lg b{font-size:19px}
.flogo .wm-lg i{font-size:13px}
.flogo .wm-lg small{display:block;font-size:10px;letter-spacing:.13em;color:var(--tx2);font-family:var(--font);margin-top:1px}
.footer .links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:13px;color:var(--tx);margin-bottom:16px}

/* ---------- bottom bar: the one home for 电话 / 在线点菜 / WhatsApp ---------- */
.bottombar{position:fixed;z-index:50;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));
  width:calc(100% - 24px);max-width:calc(var(--col) - 24px);--g-r:31px;padding:6px;
  display:grid;grid-template-columns:62px 62px 1fr;gap:4px;align-items:center}
.ib{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:50px;border-radius:25px;font-size:11px;color:var(--tx);transition:background .2s}
.ib svg{width:20px;height:20px;color:var(--gold-2)}
.bottombar .wa{min-height:50px;border-radius:25px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:700;color:#14100a;
  background:linear-gradient(180deg,var(--gold-3),var(--gold));box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:transform .2s var(--ease),filter .2s}
.wa-dot{width:24px;height:24px;border-radius:50%;background:#25d366;display:grid;place-items:center;flex:none}
.wa-dot svg{width:14px;height:14px;color:#fff}

/* ---------- interaction ---------- */
.bottombar .wa:active{transform:scale(.97)}
.ib:active{background:rgba(255,255,255,.08)}
@media (hover:hover){
  .tabs a:hover{color:var(--tx)}
  .bottombar .wa:hover{filter:brightness(1.05)}
  .ib:hover{background:rgba(255,255,255,.06)}
  .linkcard:hover h3::after{transform:translate(3px,-50%);color:var(--gold-2)}
}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- desktop = the mobile layout, enlarged and centred, with blurred sides (never a separate desktop design) ---------- */
@media (min-width:960px){
  .stage::before{content:"";position:absolute;inset:-80px;background:var(--img-surround) 50% 30%/cover no-repeat;filter:blur(40px) saturate(1.1) brightness(.8);opacity:.9}
  .stage::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 40%,rgba(6,13,31,.35),rgba(6,13,31,.72))}
  .app{zoom:.95}
  .app::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);box-shadow:0 0 90px rgba(0,0,0,.55)}
}
@media (min-width:960px) and (min-height:860px){ .app{zoom:1} }
@media (min-width:960px) and (min-height:920px){ .app{zoom:1.08} }
@media (min-width:960px) and (min-height:1000px){ .app{zoom:1.16} }
@media (min-width:960px) and (min-height:1080px){ .app{zoom:1.22} }

/* full-page screenshots only */
.capture{position:relative}
.capture .stage{position:absolute;height:100%}
.capture .bottombar{position:absolute;bottom:14px}