/* ===== Aupro design tokens — brand navy × leaf green × warm cream ===== */
:root {
  /* warm earth base (rustic paper warmth) */
  --bg:        #EFE5CC;   /* page cream */
  --bg-elev:  #F6EED7;   /* card cream */
  --bg-deep:  #E2D4B2;   /* warm shadow */
  --bg-clay:  #E6CFA8;   /* warm clay tint */
  --ink:       #142B3F;   /* deep navy ink */
  --ink-soft:  #2C4358;
  --ink-mute:  #7A6E55;
  --line:      #CFBE94;   /* warm divider */
  --line-soft: #DDCEA5;

  /* AUPRO brand — navy primary + leaf green accent */
  --moss:      #1A4F8B;   /* AUPRO navy (primary) */
  --moss-deep: #0F3366;   /* deep navy for dark sections */
  --sage:      #5BB85B;   /* AUPRO leaf green (secondary) */
  --sage-soft: #B8DCA8;   /* light mint */
  --pine:      #3CA48C;   /* teal-green from logo gradient */

  /* warm accents (used sparingly — paper/ink + stamp red) */
  --harvest:   #D49A4A;   /* honey gold */
  --harvest-deep: #A87328;
  --clay:      #B23A2A;   /* seal red (印章红) */
  --clay-deep: #8A2818;
  --earth:     #6B4A2E;
  --rust:      #8A4220;

  /* type */
  --serif-cn: "Noto Serif SC", "Songti SC", "STSong", serif;
  --sans-cn:  "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif-en: "Cormorant Garamond", "Noto Serif SC", serif;
  --sans-en:  "Outfit", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* iOS Safari dark mode 兜底:即使 body 多 gradient 背景因 background-attachment:fixed 不渲染,
   html 这里也保证最底色是米黄,不会回退到浏览器 dark mode 默认黑底。 */
html { background: #EFE5CC; color-scheme: light; }
body {
  background:
    radial-gradient(ellipse 60% 45% at 88% 6%, rgba(91, 184, 91, 0.20), transparent 62%),
    radial-gradient(ellipse 55% 55% at 8% 92%, rgba(26, 79, 139, 0.22), transparent 65%),
    radial-gradient(ellipse 40% 30% at 55% 30%, rgba(212, 154, 74, 0.08), transparent 70%),
    linear-gradient(180deg, #F4EBD0 0%, #EFE5CC 50%, #E8D8B0 100%);
  /* 删了 background-attachment: fixed —— iOS Safari 上长期 buggy,经常导致背景完全不渲染。
     副作用:背景会跟着页面滚动,视觉差异极小但 iOS 不再黑屏。 */
  color: var(--ink);
  font-family: var(--sans-cn);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}
/* paper grain — rustic texture overlay.
   SVG data URI 用 `charset=utf-8;` 标准 mime type(原来的 `utf8,` 简写非标,iOS 严格解析时崩);
   < > 百分号编码避免某些 WebKit 版本对内联 < 报错。 */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.34 0 0 0 0 0.22 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
#root { position: relative; z-index: 2; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ===== image-slot styling (rustic film frames) ===== */
image-slot {
  display: block;
  width: 100%;
  height: 100%;
}
.photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
}
.photo-frame::after {
  content: attr(data-caption);
  position: absolute;
  left: 16px; bottom: 14px;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  z-index: 3;
  pointer-events: none;
}
.photo-frame[data-caption=""]::after { display: none; }

/* ===== native <img> 替换 image-slot 后的填充样式 =====
   父容器(.icon-frame / .visual / .product-hero .visual / .step .visual)已 overflow:hidden,
   靠父级裁切圆角;.case 卡片有圆角但无 overflow,故案例图自带 border-radius。 */
.slot-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case .case-bg .slot-img { border-radius: 20px; }
/* gallery 暂无照片时的空相框(视觉同原空槽,但不出现 404 破图) */
.slot-empty { width: 100%; height: 100%; background: var(--bg-deep); border-radius: 16px; }

/* ===== utility ===== */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.wrap-tight { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.eyebrow {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 18px;
  color: var(--pine);
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  font-weight: 500;
}
.eyebrow-cn {
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 22px;
  font-weight: 500;
}
.h-display {
  font-family: var(--serif-cn);
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.h-section {
  font-family: var(--serif-cn);
  font-weight: 600;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: balance;
}
.lede {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 640px;
  text-wrap: pretty;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: none;
  transition: transform .2s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn-primary {
  background: var(--moss);
  color: var(--bg-elev);
}
.btn-primary:hover { background: var(--moss-deep); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--bg-elev); }
.btn-pill {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  color: var(--ink);
  border: 1px solid rgba(28,38,32,.18);
}
.btn-pill:hover { background: rgba(255,255,255,0.9); }

/* ===== nav ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 238, 223, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  max-width: 1240px; margin: 0 auto;
}
.brand {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif-cn);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.brand-tag {
  display: flex; flex-direction: column;
  font-family: var(--serif-cn);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.22em;
  color: var(--moss);
  padding-left: 14px;
  border-left: 1px solid var(--line);
  line-height: 1.2;
}
.brand-tag .sub {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 3px;
}
.foot .brand-tag { color: var(--bg-elev); border-left-color: rgba(255,255,255,.18); }
.foot .brand-tag .sub { color: rgba(251,246,233,.5); }
.brand-mark {
  width: 36px; height: 36px;
}
.brand-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  margin-left: -4px;
  font-weight: 500;
}
.nav-links {
  display: flex; align-items: center; gap: 34px;
  font-size: 15px;
  color: var(--ink-soft);
}
.nav-links a:hover { color: var(--moss); }
.nav-cta {
  margin-left: 14px;
}

/* hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: none; background: transparent;
  padding: 10px;
  flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--moss-deep); border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.nav-drawer {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 22px 22px;
  border-top: 1px solid var(--line-soft);
  background: rgba(244, 238, 223, 0.97);
  backdrop-filter: blur(14px);
}
.nav-drawer a {
  font-size: 17px;
  color: var(--ink-soft);
  padding: 14px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.nav-drawer a:last-child {
  border-bottom: none;
  margin-top: 12px;
  justify-content: center;
}
.nav-drawer a.btn { padding: 14px 24px; }

/* ===== hero ===== */
.hero {
  position: relative;
  padding: 96px 0 120px;
  overflow: hidden;
  isolation: isolate;
  background: #F2EAD0;
}
.hero-bg-art {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ===== layer 1 — real blurred forest-sunlight photo ===== */
.hero-bg-photo {
  position: absolute; inset: -4%;
  background: url("assets/hero-forest-sunlight.webp") center 38% / cover no-repeat;
  transform: scale(1.04);
  filter: saturate(1.02) brightness(1.02);
  opacity: 1;
  animation: photo-drift 26s ease-in-out infinite alternate;
}
@keyframes photo-drift {
  0%   { transform: translate3d(-12px, -6px, 0) scale(1.04); }
  100% { transform: translate3d(14px, 10px, 0) scale(1.08); }
}

/* ===== layer 2 — warm mist + readability ===== */
.hero-warm-mist {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 2%, rgba(255,250,224,0.22) 0%, transparent 40%),
    linear-gradient(95deg, rgba(244,237,206,0.82) 0%, rgba(246,239,210,0.5) 26%, rgba(252,246,222,0.18) 44%, transparent 60%);
  animation: mist-breathe 18s ease-in-out infinite alternate;
}
@keyframes mist-breathe {
  0%   { opacity: 0.88; }
  100% { opacity: 1; }
}

/* ===== layer 3 — lens flare PNG sprites (visible drift, 6–12s) ===== */
.hero-flare {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  user-select: none;
  will-change: transform, opacity;
}
.hero-flare-1 { width: 320px; left: 6%;  top: 38%; animation: flareA 7s ease-in-out infinite alternate; }
.hero-flare-2 { width: 460px; right: 2%; top: 36%; animation: flareB 9s ease-in-out infinite alternate; }
.hero-flare-3 { width: 190px; right: 8%; top: 3%;  animation: flareC 6.5s ease-in-out infinite alternate; }
.hero-flare-4 { width: 200px; left: 14%; top: 64%; animation: flareB 8s ease-in-out infinite alternate-reverse; }
.hero-flare-5 { width: 180px; right: 18%; top: 72%; animation: flareA 6s ease-in-out infinite alternate-reverse; }

@keyframes flareA {
  from { transform: translate3d(-44px, 22px, 0) scale(0.9);  opacity: 0.4; }
  to   { transform: translate3d(52px, -34px, 0) scale(1.22); opacity: 0.85; }
}
@keyframes flareB {
  from { transform: translate3d(48px, -26px, 0) scale(1.05); opacity: 0.42; }
  to   { transform: translate3d(-58px, 38px, 0) scale(1.28); opacity: 0.9; }
}
@keyframes flareC {
  from { transform: translate3d(-26px, -20px, 0) scale(0.85); opacity: 0.34; }
  to   { transform: translate3d(40px, 30px, 0) scale(1.3);    opacity: 0.74; }
}
.hero-inner {
  position: relative; z-index: 2;
  display: block;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.hero-copy h1 {
  margin-bottom: 28px;
}
.hero-copy h1 .accent-line {
  display: block;
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 500;
  font-size: 0.46em;
  color: var(--harvest-deep);
  margin-top: 14px;
  letter-spacing: 0.01em;
}
.hero-pills {
  display: flex; gap: 28px; flex-wrap: wrap;
  justify-content: center;
  margin: 36px auto 0;
  padding-top: 0;
  max-width: 620px;
}
.hero-pill {
  display: flex; flex-direction: column; gap: 4px;
}
.hero-pill .label {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  color: var(--harvest-deep);
  font-weight: 500;
}
.hero-pill .val {
  font-family: var(--serif-cn);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
}
.hero-inner .lede {
  max-width: 640px;
  margin-left: auto; margin-right: auto;
  text-align: center;
}
.hero-cta {
  display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap;
  justify-content: center;
}
/* hero buttons — both use the soft cream-glass style */
.hero-cta .btn-primary,
.hero-cta a:nth-child(2) {
  background: rgba(255,252,242,0.72);
  color: var(--moss-deep);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 8px 24px -12px rgba(40,50,30,0.4);
}
.hero-cta .btn-primary:hover,
.hero-cta a:nth-child(2):hover {
  background: rgba(255,255,250,0.92);
  transform: translateY(-1px);
}
.hero-visual {
  position: relative;
  aspect-ratio: 0.92 / 1;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(31, 50, 37, 0.5), 0 8px 24px -8px rgba(31, 50, 37, 0.2);
}

/* ===== marquee backing ===== */
.backing {
  padding: 56px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(246, 238, 215, 0.5);
  backdrop-filter: blur(4px);
}
.backing-row {
  display: grid; grid-template-columns: auto 1fr; gap: 60px;
  align-items: center;
}
.backing-label {
  font-family: var(--serif-en);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 500;
}
.backing-label .sub {
  display: block;
  font-family: var(--sans-cn);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.28em;
  margin-top: 6px;
  color: var(--ink-mute);
  font-weight: 500;
}
.backing-items {
  display: flex; align-items: center; gap: 30px;
  flex-wrap: nowrap;
  color: var(--ink-soft);
}
.backing-item {
  font-family: var(--serif-cn);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.backing-item .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
}

/* ===== section base ===== */
section.block {
  padding: 130px 0;
  position: relative;
}
section.block.tight { padding: 100px 0; }
.sec-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  margin-bottom: 64px;
  align-items: end;
}
.sec-head.center {
  display: block;
  text-align: center;
  max-width: 760px;
  margin-left: auto; margin-right: auto;
  margin-bottom: 72px;
}

/* ===== product showcase ===== */
.product-hero {
  display: grid; grid-template-columns: 0.85fr 1fr;
  gap: 80px; align-items: center;
  margin-bottom: 100px;
}
.product-hero .visual {
  aspect-ratio: 1/1;
  max-width: 520px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--bg-deep);
  position: relative;
  box-shadow: 0 30px 80px -30px rgba(31, 50, 37, 0.4);
}
.product-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.product-card {
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: 32px 28px 36px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(31, 50, 37, 0.18);
}
.product-card .icon-frame {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bg-deep), var(--sage-soft));
  margin-bottom: 22px;
  display: grid; place-items: center;
  overflow: hidden;
}
.product-card h4 {
  font-family: var(--serif-cn);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 6px;
  color: var(--moss-deep);
}
.product-card .reg {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  color: var(--harvest-deep);
  margin: 0 0 14px;
}
.product-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

/* ===== feature grid ===== */
.feat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  overflow: hidden;
}
.feat-cell {
  background: var(--bg-elev);
  padding: 44px 40px;
}
.feat-cell .num {
  font-family: var(--serif-en);
  font-style: italic;
  color: var(--harvest-deep);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.feat-cell h4 {
  font-family: var(--serif-cn);
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 12px;
  color: var(--moss-deep);
  line-height: 1.25;
}
.feat-cell p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
}

/* ===== stats bar ===== */
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 60px;
}
.stat {
  padding: 38px 28px;
  border-left: 1px solid var(--line-soft);
}
.stat:first-child { border-left: none; }
.stat .num {
  font-family: var(--serif-cn);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--moss-deep);
  letter-spacing: -0.02em;
}
.stat .num .unit {
  font-size: 22px;
  margin-left: 2px;
  color: var(--harvest-deep);
}
.stat .label {
  margin-top: 12px;
  color: var(--ink-mute);
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* ===== comparison table ===== */
.cmp-wrap {
  background: var(--bg-elev);
  border-radius: 28px;
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.cmp-table th, .cmp-table td {
  padding: 22px 28px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.cmp-table tr:last-child td { border-bottom: none; }
.cmp-table th {
  font-family: var(--serif-cn);
  font-weight: 600;
  font-size: 18px;
  background: var(--bg-deep);
  color: var(--ink);
}
.cmp-table th.aupro {
  background: rgba(26, 79, 139, 0.10);
  color: var(--moss);
  border-bottom: 2px solid var(--moss);
}
.cmp-table th.aupro .tag {
  display: block;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 4px;
}
.cmp-table td.feat {
  font-weight: 500;
  color: var(--ink);
  width: 22%;
}
.cmp-table td.aupro {
  background: rgba(47, 74, 55, 0.05);
  color: var(--moss-deep);
  font-weight: 500;
}

/* ===== eco loop — redesigned scene + cards ===== */
/* ===== eco loop ===== */
.eco {
  background:
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(212, 185, 130, 0.18), transparent 62%),
    linear-gradient(135deg, rgba(246, 238, 215, 0.72) 0%, rgba(242, 232, 200, 0.66) 100%);
  color: var(--ink);
  border: 1px solid rgba(160, 140, 95, 0.20);
  border-radius: 32px;
  padding: 90px 80px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.eco-inner {
  position: relative;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px;
  align-items: center;
}
.eco h2 { color: var(--ink); }
.eco .lede { color: var(--ink-soft); }
.eco .eyebrow { color: var(--moss); }
.eco .points {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid; gap: 14px;
}
.eco .points li {
  display: flex; gap: 14px; align-items: baseline;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.eco .points li::before {
  content: "✓";
  color: var(--sage);
  font-weight: 700;
}

/* ===== loop diagram draw-on animation ===== */
.loop-svg .loop-arc {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.loop-svg .loop-node,
.loop-svg .loop-core,
.loop-svg .loop-pill,
.loop-svg .loop-dot {
  opacity: 0;
}
.loop-svg.in-view .loop-arc-1 { animation: loopDraw .85s ease forwards .25s; }
.loop-svg.in-view .loop-arc-2 { animation: loopDraw .85s ease forwards .95s; }
.loop-svg.in-view .loop-arc-3 { animation: loopDrawMain 1.05s ease forwards 1.65s; }
.loop-svg.in-view .loop-core  { animation: loopFade .6s ease forwards .1s; }
.loop-svg.in-view .loop-dot   { animation: loopFade .6s ease forwards .3s; }
.loop-svg.in-view .loop-node  { animation: loopPop .5s cubic-bezier(.34,1.56,.64,1) forwards; }
.loop-svg.in-view .loop-node:nth-of-type(1) { animation-delay: .5s; }
.loop-svg.in-view .loop-node:nth-of-type(2) { animation-delay: 1.2s; }
.loop-svg.in-view .loop-node:nth-of-type(3) { animation-delay: 1.9s; }
.loop-svg.in-view .loop-pill  { animation: loopFade .6s ease forwards 2.5s; }
@keyframes loopDraw { to { stroke-dashoffset: 0; } }
@keyframes loopDrawMain {
  0%   { stroke-dashoffset: 100; stroke-width: 6; }
  78%  { stroke-dashoffset: 0;   stroke-width: 6; }
  88%  { stroke-width: 9.5; }
  100% { stroke-dashoffset: 0;   stroke-width: 6; }
}
@keyframes loopFade { to { opacity: 1; } }
@keyframes loopPop {
  0%   { opacity: 0; transform: scale(.4); }
  100% { opacity: 1; transform: scale(1); }
}
.loop-svg .loop-node { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .loop-svg .loop-arc { stroke-dashoffset: 0; }
  .loop-svg .loop-node, .loop-svg .loop-core, .loop-svg .loop-pill, .loop-svg .loop-dot { opacity: 1; animation: none; }
}

/* ===== how it works ===== */
.steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
}
.step {
  min-width: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: 36px 32px 40px;
  display: flex; flex-direction: column;
  gap: 18px;
  min-height: 380px;
}
.step .num {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 18px;
  color: var(--harvest-deep);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.step .visual {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-deep);
  margin-bottom: 4px;
}
.step h4 {
  font-family: var(--serif-cn);
  font-weight: 600;
  font-size: 22px;
  margin: 0;
  color: var(--moss-deep);
}
.step p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

/* ===== cases ===== */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.case {
  position: relative;
  border-radius: 20px;
  background: var(--bg-deep);
  min-width: 0;
  aspect-ratio: 4/5;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px;
  color: var(--bg-elev);
  text-decoration: none;
  isolation: isolate;
  cursor: pointer;
  transition: transform .35s ease;
}
.case:hover { transform: translateY(-4px); z-index: 5; }
.case .case-bg {
  position: absolute; inset: 0; z-index: 0;
}
.case::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65) 100%);
  z-index: 1;
  pointer-events: none;
}
.case .tag {
  position: relative; z-index: 2;
  pointer-events: none;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 6px;
}
.case h5 {
  position: relative; z-index: 2;
  pointer-events: none;
  font-family: var(--serif-cn);
  font-weight: 600;
  font-size: 18px;
  margin: 0;
  line-height: 1.3;
}
.case .loc {
  position: relative; z-index: 2;
  pointer-events: none;
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  opacity: 0.8;
}
.case-link {
  position: relative; z-index: 3;
  display: block;
  pointer-events: auto;
  color: var(--bg-elev);
  text-decoration: none;
}
.case-link .tag, .case-link h5, .case-link .loc { pointer-events: none; }
.case-more {
  position: relative; z-index: 3;
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.case:hover .case-more { opacity: 0.95; transform: translateY(0); }
.case:hover .case-more { text-decoration: underline; text-underline-offset: 3px; }
.case.wide { grid-column: span 2; }
.case.tall { grid-row: span 2; aspect-ratio: 4/5; }

/* ===== audiences ===== */
.aud-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.aud {
  border-radius: 28px;
  padding: 60px 56px;
  display: flex; flex-direction: column;
  min-height: 420px;
}
.aud.dark {
  background: var(--moss-deep);
  color: var(--bg-elev);
}
.aud.dark .eyebrow { color: var(--harvest); }
.aud.dark h3 { color: var(--bg-elev); }
.aud.dark .lede { color: rgba(251,246,233,.78); }
.aud.dark .btn-ghost { color: var(--bg-elev); border-color: rgba(251,246,233,.4); }
.aud.dark .btn-ghost:hover { background: var(--bg-elev); color: var(--moss-deep); }
.aud.light {
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
}
.aud h3 {
  font-family: var(--serif-cn);
  font-weight: 600;
  font-size: 32px;
  margin: 0 0 18px;
  color: var(--ink);
  line-height: 1.2;
}
.aud .ctas {
  margin-top: auto;
  padding-top: 32px;
  display: flex; gap: 14px;
}

/* ===== final CTA ===== */
.final-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0 130px;
  text-align: center;
}
.final-cta .h-section { margin-bottom: 24px; }
.final-cta .lede { margin: 0 auto 40px; }
.final-cta .cta-row {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.principle-row {
  margin-top: 80px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.principle {
  padding: 32px 24px 8px;
  border-left: 1px solid var(--line-soft);
}
.principle:first-child { border-left: none; }
.principle .head {
  font-family: var(--serif-cn);
  font-weight: 600;
  font-size: 20px;
  color: var(--moss-deep);
  margin-bottom: 8px;
}
.principle .sub {
  font-size: 14px;
  color: var(--ink-mute);
}

/* ===== footer ===== */
.foot {
  background: var(--ink);
  color: rgba(251,246,233,.7);
  padding: 80px 0 32px;
}
.foot-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.foot h6 {
  font-family: var(--sans-cn);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: rgba(251,246,233,.45);
  margin: 0 0 18px;
  font-weight: 500;
  text-transform: uppercase;
}
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.foot a:hover { color: var(--bg-elev); }
.foot .brand {
  color: var(--bg-elev);
  margin-bottom: 14px;
}
.foot .brand-en { color: rgba(251,246,233,.55); }
.foot .copyright {
  display: flex; justify-content: space-between;
  padding-top: 28px;
  font-size: 13px;
  color: rgba(251,246,233,.45);
}

/* ===== marquee partners ===== */
.partners {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(246, 238, 215, 0.5);
  backdrop-filter: blur(4px);
  padding: 28px 0;
  overflow: hidden;
}
.marquee {
  display: flex; gap: 80px;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-item {
  font-family: var(--serif-cn);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.marquee-item .pin {
  width: 4px; height: 4px; border-radius: 50%; background: var(--sage);
}

/* ===== fx: fluid canvas + non-linear reveals + 3d tilt ===== */
.fx-fluid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  mix-blend-mode: soft-light;
  opacity: .95;
  pointer-events: none;
  z-index: 1;
}
.fx-r { opacity: 0; will-change: transform, opacity; }
.fx-v0 { transform: translateY(44px) scale(.97); }
.fx-v1 { transform: translateY(38px) rotate3d(1, 0, 0, 10deg) scale(.96); transform-origin: 50% 100%; }
.fx-v2 { transform: translateY(34px) rotate3d(0, 1, .2, -7deg) scale(.97); transform-origin: 0% 100%; }
.fx-r.fx-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1) var(--fxd, 0s),
    transform 1.05s cubic-bezier(.32, 1.4, .38, 1) var(--fxd, 0s);
}
.fx-tilt {
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  transform-style: preserve-3d;
}
.fx-tilt:hover { transition: transform .12s ease-out; }
.sec-head, .product-grid, .feat-grid, .steps, .case-grid, .aud-grid, .cd-gallery {
  perspective: 1200px;
}
.marquee { will-change: transform; }
.hero-bg-art { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .fx-r { opacity: 1 !important; transform: none !important; }
  .fx-fluid { display: none; }
}

/* ===== fx-advanced: view transitions, progress bar, magnetic btns ===== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .38s; }
::view-transition-new(root) { animation-duration: .38s; }
#fx-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sage), var(--pine));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 99;
  pointer-events: none;
}
.btn-primary { will-change: transform; }
.cd-hero { overflow: hidden; }
/* 设计稿原选择器是 .cd-hero image-slot;工程版 hero 已换 native <img>(.cd-hero-img),两个都收 */
.cd-hero image-slot, .cd-hero .cd-hero-img { will-change: transform; }

/* ===== responsive ===== */
@media (max-width: 960px) {
  .hero-inner, .product-hero, .eco-inner, .aud-grid, .foot-row, .backing-row,
  .sec-head, .product-grid, .feat-grid, .steps {
    grid-template-columns: 1fr;
  }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: none; border-top: 1px solid var(--line-soft); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .case.wide, .case.tall { grid-column: auto; grid-row: auto; }
  .principle-row { grid-template-columns: 1fr; }
  .principle { border-left: none; border-top: 1px solid var(--line-soft); }
  .eco { padding: 60px 36px; border-radius: 22px; }
  .aud { padding: 44px 32px; min-height: auto; }
  section.block { padding: 80px 0; }

  /* nav → hamburger */
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-open .nav-drawer { display: flex; }

  /* sec-head two-col → stack, kill the empty offset */
  .sec-head { gap: 18px; margin-bottom: 44px; }

  /* backing awards: wrap instead of nowrap-clip */
  .backing-row { gap: 22px; }
  .backing-items { flex-wrap: wrap; gap: 14px 22px; }
  .backing-item { white-space: normal; }

  /* eco loop stacks; cap the ring width so it doesn't tower */
  .eco-inner > div:last-child { max-width: 420px; margin: 0 auto; width: 100%; }
}

@media (max-width: 600px) {
  .wrap, .wrap-tight { padding: 0 20px; }
  .nav-row { padding: 14px 20px; }

  /* hero: tighter, give text room */
  .hero { padding: 60px 0 72px; }
  .hero-inner { max-width: 100%; }
  .h-display { font-size: clamp(34px, 9vw, 46px); }
  .hero-copy .lede, .hero-inner .lede { font-size: 16px; }
  .hero-pills { gap: 18px 24px; padding-top: 0; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }

  /* section rhythm */
  section.block { padding: 60px 0; }
  .h-section { font-size: clamp(28px, 8vw, 38px); }
  .lede { font-size: 16px; }

  /* one-column grids on phone */
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat { padding: 26px 16px; }
  .stat .num { font-size: 40px; }
  .feat-grid { grid-template-columns: 1fr; }
  .feat-cell { padding: 32px 26px; }
  .case-grid { grid-template-columns: 1fr; gap: 16px; }
  .case { aspect-ratio: 16/10; }

  /* product + step cards full-width, shorter */
  .step { min-height: auto; }

  /* eco block lighter padding */
  .eco { padding: 40px 22px; }
  .eco .points li { font-size: 14.5px; }

  /* audiences */
  .aud { padding: 36px 24px; border-radius: 22px; }
  .aud h3 { font-size: 26px; }
  .aud .ctas { flex-direction: column; align-items: stretch; }
  .aud .ctas .btn { justify-content: center; }

  /* final cta */
  .final-cta { padding: 72px 0 80px; }
  .final-cta .lede { text-align: center; display: block; }
  .final-cta .cta-row { flex-direction: column; align-items: stretch; }
  .final-cta .cta-row .btn { justify-content: center; }

  /* footer: stack, left-align, stack copyright */
  .foot { padding: 56px 0 28px; }
  .foot-row { gap: 32px; padding-bottom: 36px; }
  .foot .copyright { flex-direction: column; gap: 8px; text-align: left; }

  /* hide english tagline beside logo to save width */
  .brand-tag { font-size: 13px; letter-spacing: 0.14em; padding-left: 10px; }
  .brand-tag .sub { display: none; }
}