@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --ink:#1f1f1f;
  --paper:#ffffff;
  --mist:#f5f5f5;
  --ghost:#fafafa;
  --muted:#6b6b6b;
  --faint:#9a9a9a;
  --line:rgba(31,31,31,.12);
  --line-soft:rgba(31,31,31,.07);
  --r:28px;
  --shadow:0 4px 6px rgba(0,0,0,.05),0 22px 44px -30px rgba(0,0,0,.32);
  --head:150px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--mist);
  color:var(--ink);
  font-family:'DM Sans','Space Grotesk',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:18px;
  line-height:1.68;
  letter-spacing:.005em;
  overflow-x:hidden;
}

h1,h2,h3,.brand-name,.foot-mark,.jump-n{
  font-family:'Space Grotesk','DM Sans',"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

a{color:inherit}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 头部：品牌行 + 菜单行 ---------- */
.masthead{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);
}

.mast-brand{
  display:flex;
  align-items:center;
  max-width:1180px;
  margin:0 auto;
  padding:14px 26px 4px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  padding:4px 0;
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  font-size:1.06rem;
  letter-spacing:-.015em;
}

.brand img{
  width:26px;
  height:26px;
  border-radius:8px;
  object-fit:cover;
  display:block;
}

.menu{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:1180px;
  margin:0 auto;
  padding:0 26px 14px;
}

.menu-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 14px;
  border-radius:999px;
  background:var(--mist);
  border:1px solid transparent;
  color:#4a4a4a;
  text-decoration:none;
  font-size:.9rem;
  line-height:1.2;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}

.menu-item:hover{
  background:var(--paper);
  border-color:var(--line);
  color:var(--ink);
  transform:translateY(-1px);
}

.tick{
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--ink);
  opacity:.5;
  flex:none;
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:34px;
  padding:clamp(48px,11vh,104px) 26px clamp(64px,12vh,110px);
  text-align:center;
}

.hero-title{
  margin:0;
  font-size:clamp(2.7rem,9.4vw,5.9rem);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.045em;
  max-width:16ch;
}

.hero-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:0;
}

.chip{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:9px 18px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow);
  color:#3d3d3d;
  text-decoration:none;
  font-size:.9rem;
  transition:transform .3s ease,box-shadow .3s ease;
}

.chip:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 6px rgba(0,0,0,.05),0 26px 40px -26px rgba(0,0,0,.4);
}

/* ---------- 内容区：左栏 + 便当网格 ---------- */
.stage{
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  gap:20px;
  align-items:start;
  max-width:1180px;
  margin:0 auto;
  padding:0 26px 84px;
}

.rail{
  position:sticky;
  top:calc(var(--head) + 14px);
  margin:0;
  padding:24px 22px;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

.rail-title{
  margin:0 0 6px;
  font-size:1.16rem;
  line-height:1.25;
  letter-spacing:-.025em;
}

.subtitle{
  margin:0 0 16px;
  font-size:.9rem;
  line-height:1.6;
  color:var(--muted);
}

.jump{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}

.jump-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:6px 8px;
  border-radius:12px;
  color:#3d3d3d;
  text-decoration:none;
  font-size:.9rem;
  transition:background .2s ease,color .2s ease;
}

.jump-link:hover{
  background:var(--mist);
  color:var(--ink);
}

.jump-n{
  flex:none;
  font-size:.74rem;
  letter-spacing:.06em;
  color:var(--faint);
  font-variant-numeric:tabular-nums;
}

.flow{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:18px;
  align-items:start;
}

.flow > div{
  grid-column:span 7;
  margin:0;
  padding:clamp(24px,3vw,36px);
  background:var(--paper);
  border-radius:var(--r);
  border-bottom:3px solid var(--ink);
  box-shadow:var(--shadow);
  scroll-margin-top:calc(var(--head) + 16px);
  transition:transform .35s ease,box-shadow .35s ease,opacity .55s ease;
}

.flow > div:nth-child(2n){
  grid-column:span 5;
  background:var(--ghost);
}

.flow > div:nth-child(3n){
  grid-column:span 12;
}

.flow > div:hover{
  transform:translateY(-3px) scale(1.012);
  box-shadow:0 4px 6px rgba(0,0,0,.05),0 30px 50px -30px rgba(0,0,0,.42);
}

/* ---------- 正文排版 ---------- */
.flow h2{
  margin:0 0 12px;
  font-size:clamp(1.42rem,2.5vw,2.05rem);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.028em;
}

.flow h3{
  margin:26px 0 10px;
  font-size:1.16rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.015em;
}

.flow p{
  margin:0 0 15px;
  max-width:64ch;
}

.flow p.subtitle,
.flow h2 + p.subtitle{
  margin:-4px 0 18px;
  font-size:.94rem;
  color:var(--muted);
}

.flow ul,.flow ol{
  margin:0 0 16px;
  padding-left:1.25em;
  max-width:62ch;
}

.flow li{margin:0 0 8px}

.flow li::marker{color:var(--faint)}

.flow figure{
  margin:0 0 18px;
}

.flow img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:18px;
}

.flow blockquote{
  margin:0 0 18px;
  padding:14px 18px;
  border-left:3px solid var(--ink);
  background:var(--mist);
  border-radius:0 14px 14px 0;
  color:#3d3d3d;
}

.flow blockquote p:last-child{margin:0}

.flow strong{font-weight:700}

.flow a{
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.flow > div > :last-child{margin-bottom:0}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:24px;
  background:var(--paper);
  border-top:1px solid var(--line);
}

.foot-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:30px;
  max-width:1180px;
  margin:0 auto;
  padding:58px 26px 32px;
}

.foot-mark{
  margin:0 0 12px;
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.05em;
}

.foot-addr{
  font-style:normal;
  font-size:.9rem;
  color:var(--muted);
}

.foot-nav dl{
  display:grid;
  gap:2px;
  margin:0;
}

.foot-nav dt{
  margin-bottom:8px;
  font-size:.76rem;
  letter-spacing:.18em;
  color:var(--faint);
}

.foot-nav dd{margin:0}

.foot-nav a,
.foot-list a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:4px 0;
  color:#3d3d3d;
  text-decoration:none;
  font-size:.9rem;
}

.foot-nav a:hover,
.foot-list a:hover{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px;
}

.foot-list{
  margin:0;
  padding:0;
  list-style:none;
}

.foot-bottom{
  padding:18px 26px 30px;
  border-top:1px solid var(--line-soft);
  text-align:center;
  color:var(--faint);
  font-size:.88rem;
}

.foot-bottom p{margin:0}
.foot-bottom .host{margin-top:4px;letter-spacing:.06em}

/* ---------- 动效 ---------- */
@media (prefers-reduced-motion:no-preference){
  .menu-item{
    animation:drop .5s cubic-bezier(.2,.7,.3,1) backwards;
    animation-delay:calc(var(--i,0) * 42ms);
  }

  @keyframes drop{
    from{opacity:0;transform:translateY(-7px)}
    to{opacity:1;transform:none}
  }

  .hero-title{
    animation:rise .8s cubic-bezier(.2,.75,.25,1) backwards;
  }

  .chip{
    animation:rise .8s cubic-bezier(.2,.75,.25,1) backwards;
    animation-delay:.16s;
  }

  @keyframes rise{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:none}
  }

  .js .flow > div{
    opacity:0;
    transform:translateY(20px);
  }

  .js .flow > div.is-in{
    opacity:1;
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .flow > div{opacity:1;transform:none}
}

/* ---------- 断点 ---------- */
@media (max-width:960px){
  :root{--head:0px}
  .masthead{position:static}
  .mast-brand{padding:14px 18px 4px}
  .menu{padding:0 18px 12px;gap:6px}
  .hero{min-height:auto;padding:52px 18px 60px;gap:26px}
  .stage{grid-template-columns:minmax(0,1fr);gap:18px;padding:0 18px 60px}
  .rail{position:static}
  .flow > div,
  .flow > div:nth-child(2n),
  .flow > div:nth-child(3n){grid-column:span 12}
  .foot-top{grid-template-columns:1fr 1fr;gap:26px;padding:44px 18px 26px}
  .foot-bottom{padding:16px 18px 26px}
}

@media (max-width:560px){
  body{font-size:17px}
  .hero-title{font-size:clamp(2.2rem,11.5vw,3.1rem)}
  .menu-item{font-size:.86rem;padding:8px 12px}
  .flow{gap:14px}
  .foot-top{grid-template-columns:1fr;gap:22px}
  .foot-mark{font-size:1.9rem}
}

button[aria-expanded]{min-width:44px;min-height:44px}