:root {
  --brand-red: #C9151E;
  /* All interface reds derive from this single brand color. */
  --brand-red-deep: var(--brand-red);
  --brand-red-dark: #7D0D13;
  --brand-red-ink: var(--brand-red);
  --brand-red-bright: var(--brand-red);
  --brand-red-alpha-08: rgba(201,21,30,.08);
  --brand-red-alpha-10: rgba(201,21,30,.10);
  --brand-red-alpha-22: rgba(201,21,30,.22);
  --brand-red-alpha-34: rgba(201,21,30,.34);
  --brand-red-alpha-55: rgba(201,21,30,.55);
  --brand-red-alpha-60: rgba(201,21,30,.60);
  --brand-red-alpha-86: rgba(201,21,30,.86);
  --brand-red-alpha-82: rgba(201,21,30,.82);
  --brand-red-shade-15: #1E0305;
  --brand-red-shade-30: #3C0609;
  --brand-red-shade-55: #6F0C11;
  --brand-red-shade-70: #8D0F15;
  --brand-red-gradient: var(--brand-red);
  --brand-red-gradient-deep: var(--brand-red);
  --brand-red-soft: #DA6066;
  /* Logo-red translation of the reference: quiet centre, a low left lamp,
     a taller right lamp and a restrained glow in the upper-left corner. */
  --brand-red-night: #850E14;
  --brand-red-uplight: #EAA6AA;
  --first-section-background:
          radial-gradient(ellipse 38% 58% at 76% 106%, var(--brand-red-uplight) 0%, #DA6066 25%, var(--brand-red) 50%, transparent 100%),
          radial-gradient(ellipse 34% 43% at 26% 108%, #E89DA1 0%, #D8565D 27%, #A51119 63%, transparent 100%),
          radial-gradient(ellipse 42% 35% at -2% -2%, #DB656B 0%, var(--brand-red) 38%, #9F1118 72%, transparent 100%),
          linear-gradient(90deg, #930F16 0%, var(--brand-red-night) 43%, #7B0D12 100%);
  /* 28 full-width flutes: a fine lit lip, a broad face, then a sharp dark edge. */
  --reference-flute-width: calc(100% / 28);
  --reference-flute-face: linear-gradient(90deg,
  rgba(255,255,255,.24) 0%, rgba(255,255,255,.13) 3%,
  rgba(255,255,255,.045) 10%, rgba(0,0,0,.045) 26%,
  rgba(0,0,0,.22) 78%, rgba(0,0,0,.40) 96%,
  rgba(0,0,0,.31) 99%, rgba(255,255,255,.14) 100%);
  --reference-flute-top-mask: radial-gradient(ellipse 57% 45% at 3% 0%, #000 0%, rgba(0,0,0,.72) 39%, rgba(0,0,0,.18) 70%, transparent 100%);
  --reference-flute-bottom-mask:
          radial-gradient(ellipse 46% 68% at 76% 106%, #000 0%, #000 39%, rgba(0,0,0,.76) 61%, rgba(0,0,0,.12) 86%, transparent 100%),
          radial-gradient(ellipse 39% 51% at 26% 107%, #000 0%, #000 34%, rgba(0,0,0,.64) 59%, rgba(0,0,0,.09) 85%, transparent 100%);
  --brand-gold: #D4985C;
  --brand-gold-light: #F1D1A8;
  --brand-gold-pale: #F8EBDD;
  --paper: #FBF8F5;
  --mist: #F2ECE7;
  --surface: #FFFFFF;
  --ink: #32151B;
  --muted: #866D69;
  --line: rgba(50, 21, 27, 0.11);
  --shadow-soft: 0 20px 60px rgba(80, 22, 26, 0.10);
  --shadow-red: 0 20px 45px rgba(201,21,30,.24);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --frame: 1212px;
  --shell: 1060px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Strict unified typeface: SimSun / 宋体 only. */
  --font-base: "SimSun", "宋体";
  --font-reference-weight: 400;
}

/* PSD first-screen coordinate system: 1920 × 1080, header 103 + artwork 977.
   Percentage coordinates preserve the complete composition at every width. */
.psd-home-header {
  position: fixed;      /* 保持固定 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  aspect-ratio: 1920 / 103;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  transition: transform .35s ease;   /* ← 加过渡 */
}

.psd-home-header.is-hidden {
  transform: translateY(-100%);      /* ← 收起 */
}
.psd-header-artwork,
.psd-hero-artwork {
  display: block;
  width: 100%;
  height: auto;
}
.psd-home-nav { position: absolute; inset: 0; }
.psd-nav-link { position: absolute; display: block; }
.psd-nav-link img { display: block; width: 100%; height: 100%; }
.psd-nav-about { left: calc(100% * 1110 / 1920); top: calc(100% * 30 / 103); width: calc(100% * 140 / 1920); height: calc(100% * 60 / 103); }
.psd-nav-brand { left: calc(100% * 1250 / 1920); top: calc(100% * 30 / 103); width: calc(100% * 136 / 1920); height: calc(100% * 60 / 103); }
.psd-nav-founder { left: calc(100% * 1386 / 1920); top: calc(100% * 30 / 103); width: calc(100% * 166 / 1920); height: calc(100% * 60 / 103); }
.psd-nav-services { left: calc(100% * 1552 / 1920); top: calc(100% * 30 / 103); width: calc(100% * 123 / 1920); height: calc(100% * 60 / 103); }
.psd-nav-join { left: calc(100% * 1685 / 1920); top: calc(100% * 37 / 103); width: calc(100% * 145 / 1920); height: calc(100% * 46 / 103); }
.psd-home-hero { position: relative; width: 100%; aspect-ratio: 1920 / 977; overflow: hidden; background: #aa0d0d;margin-top: calc(100vw * 103 / 1920); }
.psd-hero-brand-link { position: absolute; left: calc(100% * 102 / 1920); top: calc(100% * 70 / 977); width: calc(100% * 262 / 1920); height: calc(100% * 87 / 977); }
.psd-nav-link:focus-visible,
.psd-hero-brand-link:focus-visible { outline: 2px solid #8e3517; outline-offset: -2px; }

* { box-sizing: border-box; }
/* Keep the browser's scrollbar from shrinking the PSD canvas by 15px.
   Wheel, touch and keyboard scrolling continue to work normally. */
html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
html,
body,
html *,
html *::before,
html *::after {
  font-family: var(--font-base) !important;
  font-weight: var(--font-reference-weight) !important;
  letter-spacing: 0 !important;
  font-synthesis: none;
}
body { margin: 0; background: var(--brand-red-night); color: var(--ink); font-size: 18px; line-height: 1.55; overflow-x: hidden; }
h1, h2, h3 { font-weight: var(--font-reference-weight); letter-spacing: 0; }
::placeholder,
::marker {
  font-family: var(--font-base) !important;
  font-weight: var(--font-reference-weight) !important;
  letter-spacing: 0 !important;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.shell { width: min(var(--shell), calc(100% - 72px)); margin-inline: auto; position: relative; z-index: 2; }
main, .site-footer { width: 100%; max-width: none; margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -4rem; padding: .7rem 1rem; background: var(--brand-gold); color: var(--brand-red-ink); border-radius: 8px; z-index: 100; transition: top .2s; }
.skip-link:focus { top: 1rem; }
.desktop-only { display: initial; }

/* Header */
.site-header { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 20; color: #fff; }
.header-inner { width: calc(100% - 64px); max-width: none; min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; letter-spacing: 0; font-size: 1.1rem; color: #fff; }
.brand-mark { width: 30px; height: 24px; display: inline-grid; place-items: center; color: var(--brand-gold); }
.brand-mark svg { width: 30px; height: 24px; }
.brand-logo { width: 220px; height: auto; max-height: 70px; object-fit: contain; display: block; transform: translateX(300px) !important;}
.site-header .brand-logo { transform: scale(1.44); transform-origin: left center; }
.brand-footer .brand-logo { width: 220px; max-height: 70px; }
.brand-dot { color: var(--brand-gold); }
.primary-nav { display: flex; align-items: center; gap: 2.1rem; font-size: 1rem; font-weight: 400; color: rgba(255,255,255,.78); }
.primary-nav > a:not(.button):hover, .login-link:hover { color: var(--brand-gold-light); }
.nav-actions { display: flex; align-items: center; gap: 1.15rem; margin-left: .5rem; }
.login-link { color: rgba(255,255,255,.78); font-size: 1rem; font-weight: 400 !important; letter-spacing: 0; line-height: 1.55; text-shadow: none; }
.primary-nav > a, .primary-nav .button { font-size: 1rem !important; font-weight: 400 !important; line-height: 1.55 !important; }
.primary-nav .button-small { font-size: 1rem !important; padding: .5rem 1rem; }
.menu-toggle { display: none; background: transparent; border: 0; padding: .4rem; color: #fff; }
.menu-toggle span:not(.sr-only) { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; border-radius: 9px; }

/* Shared type and controls */
.section { position: relative; padding: 116px 0; overflow: hidden; }
.section-heading h2, .testimonial-heading h2, .cta-card h2 { margin: .45rem 0 .75rem; font-size: clamp(2rem, 3.5vw, 3.15rem); line-height: .98; letter-spacing: 0; font-weight: 400; }
.section-heading h2 span, .testimonial-heading h2 span, .cta-card h2 span { color: var(--brand-red); }
.section-heading p:last-child, .testimonial-heading > p:last-child, .cta-card > p:last-of-type { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.centered { text-align: center; }
.eyebrow { margin: 0; display: inline-flex; align-items: center; gap: .35rem; color: var(--brand-red); background: var(--brand-red-alpha-08); padding: .5rem .9rem; border-radius: 99px; font-size: .76rem; font-weight: 400; letter-spacing: 0; }
.eyebrow-dark { color: var(--brand-gold-light); background: rgba(212,152,92,.14); }
.eyebrow-dark span { color: var(--brand-gold); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; border: 0; border-radius: 999px; padding: .9rem 1.4rem; font-size: .82rem; font-weight: 400; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--brand-red-gradient); color: #fff; box-shadow: var(--shadow-red); }
.button-primary:hover { background: var(--brand-red-gradient-deep); box-shadow: 0 20px 45px var(--brand-red-alpha-34); }
.button-light { background: var(--brand-gold); color: var(--brand-red-ink); padding: .6rem 1.05rem; }
.button-small { font-size: .62rem; }
.button-tiny { padding: .55rem .8rem; font-size: .58rem; box-shadow: none; }
.icon-button, .step-arrow, .carousel-button { border: 0; border-radius: 50%; display: inline-grid; place-items: center; width: 35px; height: 35px; background: #fff; color: var(--brand-red); cursor: pointer; transition: transform .2s, background .2s; }
.icon-button:hover, .step-arrow:hover, .carousel-button:hover { transform: translateY(-2px); background: var(--brand-gold-light); }

/* Hero */
.hero { height: 956px; min-height: 100vh; position: relative; overflow: hidden; color: #fff; background: var(--first-section-background); padding: 0; }
.hero-rails, .testimonial-rails { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-rails::before, .hero-rails::after,
.testimonial-rails::before, .testimonial-rails::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--reference-flute-face);
  background-size: var(--reference-flute-width) 100%;
  background-repeat: repeat-x;
}
.hero-rails::before, .testimonial-rails::before {
  opacity: .46;
  -webkit-mask-image: var(--reference-flute-top-mask);
  mask-image: var(--reference-flute-top-mask);
}
.hero-rails::after, .testimonial-rails::after {
  opacity: .96;
  -webkit-mask-image: var(--reference-flute-bottom-mask);
  mask-image: var(--reference-flute-bottom-mask);
}
.hero-inner { width: 100%; max-width: none; height: 100%; }
.hero-copy { position: absolute; z-index: 3; top: 67px; left: 50%; width: 84%; transform: translateX(-50%); padding: 0; text-align: center; }
.hero-copy h1 { font-size: clamp(4rem, 6.8vw, 5.75rem); line-height: 1.01; letter-spacing: 0; margin: 1.2rem 0 1.1rem; font-weight: 400; }
.hero-copy h1 span { color: var(--brand-gold); }
.hero-lead { max-width: 680px; color: rgba(255,255,255,.76); font-size: .96rem; line-height: 1.65; margin: 0 auto 1.65rem; }
/* Keep the reference card sizes and spacing together on a centered 1212px canvas. */
.hero-visual { position: absolute; top: 37.7%; left: 50%; width: min(100%, var(--frame)); height: 62.3%; min-height: 0; margin: 0; transform: translateX(-50%); isolation: isolate; }
.orbit { position: absolute; border: 1px dashed rgba(241,209,168,.55); border-radius: 50%; transform: rotate(-22deg); }
.orbit-two { width: 360px; height: 180px; right: -2%; bottom: 4%; border-color: var(--brand-red-alpha-60); }
.glass-card {
  --card-inset-shadow: inset 0 2px 2px rgba(255,255,255,1), inset 2px 0 4px rgba(255,255,255,.72), inset -2px -5px 8px rgba(91,53,43,.16);
  --card-drop-shadow: 0 5px 0 rgba(188,160,143,.82), 0 10px 15px rgba(24,2,6,.26), 0 28px 46px rgba(24,2,6,.38), 0 0 24px rgba(255,221,204,.12);
  position: absolute;
  background: radial-gradient(ellipse at 12% 0%, rgba(255,255,255,.95), transparent 64%), linear-gradient(150deg, rgba(255,253,250,.98) 20%, rgba(246,240,235,.98) 64%, rgba(228,216,208,.98));
  color: var(--ink);
  border: 1px solid rgba(255,241,224,.88);
  box-shadow: var(--card-inset-shadow), var(--card-drop-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* A second fine edge gives the card a bevel without covering its contents. */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255,255,255,.34);
  border-top-color: rgba(255,255,255,.80);
  border-bottom-color: rgba(115,68,54,.10);
  border-radius: inherit;
  pointer-events: none;
}
.glass-card:hover { --card-drop-shadow: 0 5px 0 rgba(188,160,143,.82), 0 15px 23px rgba(24,2,6,.29), 0 36px 54px rgba(24,2,6,.42), 0 0 28px rgba(255,221,204,.14); }
.glass-card, .reward-card, .earn-card, .points-chart, .process-preview, .process-copy, .testimonial-card, .cta-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease, filter .35s ease; }
.reward-card:hover, .earn-card:hover, .points-chart:hover, .process-preview:hover, .process-copy:hover, .testimonial-card:hover, .cta-card:hover { box-shadow: 0 22px 44px rgba(75,27,29,.18); border-color: rgba(212,152,92,.72); filter: saturate(1.06); }
.glass-card, .reward-card, .earn-card, .points-chart, .process-preview, .process-copy, .testimonial-card, .float-pill { font-weight: 400; letter-spacing: 0; }
.hero-visual .glass-card,
.hero-visual .glass-card *,
.hero-visual .float-pill,
.hero-visual .float-pill * {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif !important;
}
.glass-card h2, .reward-card h3, .reward-card-save > span, .earn-card h3, .feature-card h3, .testimonial-card footer strong, .float-pill b { font-weight: 400; letter-spacing: 0; }
.mini-card-title { font-weight: 400; letter-spacing: 0; }
html .mini-card-left,
html .mini-card-left *,
html .mini-card-left *::before,
html .mini-card-left *::after {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-synthesis: none;
}
.card-kicker, .mini-card small, .route-label, .route-card small, .float-pill small, .reward-card p, .photo-label, .earn-kicker, .earn-ladder, .chart-head span, .chart-head small, .testimonial-card blockquote, .testimonial-card footer span { font-weight: 400; letter-spacing: 0; }
.mini-card:hover { transform: translateY(-8px) rotate(-1deg); }
.flight-card:hover { transform: translateY(-8px); }
.route-card:hover { transform: translateY(-8px) rotate(1deg); }
.mini-card { left: 8.5%; top: 4%; width: calc(100% * 290 / 1212); aspect-ratio: 290 / 205; min-height: 0; padding: 1.35rem; border-radius: 20px; transform: rotate(-1deg); }
.mini-card-title, .card-kicker { font-size: .82rem; color: var(--muted); line-height: 1.2; }
.mini-card-brand { color: var(--brand-red); }
.mini-points { color: var(--brand-red); font-size: 1.35rem; font-weight: 400; letter-spacing: 0; margin: .7rem 0 .65rem; }
.mini-points span { font-size: .48rem; color: #2f8d65; letter-spacing: 0; vertical-align: top; }
.progress { height: 5px; border-radius: 99px; background: #f0dcd1; overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--brand-gold); }
.mini-card small { display: block; color: var(--muted); font-size: .74rem; margin-top: .45rem; }
.mini-card-footer { display: flex; gap: .4rem; align-items: center; margin-top: .7rem; font-size: .58rem; color: var(--muted); }
.tiny-chip { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--brand-red); color: #fff; }
.flight-card { left: 35.3%; top: 13%; width: calc(100% * 358 / 1212); aspect-ratio: 358 / 470; min-height: 0; padding: 1.5rem; border-radius: 24px; }
.flight-card h2, .flight-card .card-kicker { text-rendering: geometricPrecision; }
.flight-card h2, .route-card h2 { font-size: 1.55rem; line-height: 1.07; letter-spacing: 0; margin: .9rem 0 1rem; font-weight: 400; }
.flight-card .card-kicker { width: fit-content; margin: 0 auto; padding: .6rem 1.15rem; border-radius: 99px; color: var(--ink); background: linear-gradient(180deg, #fff, #f7f1ec); box-shadow: inset 0 1px 1px #fff, 0 2px 2px rgba(116,79,64,.08), 0 8px 16px rgba(72,37,29,.12); font-size: .72rem; }
.route-card .card-kicker { color: rgba(255,255,255,.76); }
.flight-card h2 span { color: var(--brand-red); }
.score-row { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 1.3rem; }
.score-row strong { width: 38px; height: 38px; border: 3px solid var(--brand-red); border-radius: 50%; display: grid; place-items: center; color: var(--brand-red); font-size: .62rem; }
.score-row span { color: var(--muted); font-size: .62rem; line-height: 1.25; }
.flight-window { position: relative; height: 190px; margin-top: .7rem; border-radius: 14px; overflow: hidden; background: linear-gradient(170deg, #ead0b7 0%, #f4ece4 43%, #9a413a 44%, #3c0e15 100%); }
.flight-window::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 2px 6px rgba(70,24,23,.18), inset 0 -1px 1px rgba(255,255,255,.60); pointer-events: none; }
.flight-sky { position: absolute; inset: 0 0 48%; background: linear-gradient(160deg, #f2d9bd, #fff7ea); }
.flight-horizon { position: absolute; left: -8%; right: -8%; bottom: 22%; height: 16px; background: rgba(70,21,22,.48); filter: blur(4px); transform: rotate(-2deg); }
.flight-plane { position: absolute; z-index: 2; width: 76px; color: #fff7ef; right: 24%; bottom: 29%; transform: rotate(-10deg); filter: drop-shadow(0 3px 8px rgba(50,5,8,.5)); }
.flight-plane svg { width: 100%; display: block; }
.flight-plane path { stroke-width: 3.6; }
.route-card {
  --card-inset-shadow: inset 0 4px 4px rgba(255,245,232,.90), inset 4px 0 7px rgba(255,224,199,.38), inset -4px -7px 13px rgba(53,2,9,.42);
  --card-drop-shadow: 0 6px 0 rgba(98,8,14,.90), 0 12px 20px rgba(24,2,6,.34), 0 32px 50px rgba(24,2,6,.48), 0 0 0 1px rgba(255,235,221,.28), 0 0 32px rgba(255,214,199,.18);
  right: 7.8%; top: 8.5%; width: calc(100% * 286 / 1212); aspect-ratio: 286 / 344; min-height: 0; padding: 1.5rem; border-radius: 23px; transform: rotate(1deg); color: #fff;
  isolation: isolate;
  overflow: visible;
  background:
          radial-gradient(ellipse 60% 22% at 52% -4%, rgba(255,255,250,.55), rgba(255,239,222,.24) 38%, transparent 72%),
          linear-gradient(118deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.07) 18%, transparent 40%),
          radial-gradient(ellipse 72% 28% at 50% 108%, rgba(255,255,250,.48), rgba(255,232,216,.20) 40%, transparent 76%),
          linear-gradient(145deg, var(--brand-red-alpha-86), var(--brand-red-alpha-55) 65%, rgba(111,12,17,.78));
  border-color: rgba(255,239,225,.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.route-card:hover { --card-drop-shadow: 0 6px 0 rgba(98,8,14,.90), 0 18px 27px rgba(24,2,6,.36), 0 40px 58px rgba(24,2,6,.50), 0 0 0 1px rgba(255,235,221,.34), 0 0 38px rgba(255,214,199,.22); }
.route-card::before { inset: 4px; border-color: rgba(255,231,210,.26); border-top-color: rgba(255,252,244,.88); border-left-color: rgba(255,242,229,.62); border-bottom-color: rgba(255,218,196,.34); }
.route-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30px -16px -42px;
  border-radius: 34px;
  background:
          radial-gradient(ellipse 46% 17% at 52% 16%, rgba(255,255,255,.64) 0%, rgba(255,247,237,.30) 23%, rgba(255,216,197,.12) 46%, transparent 74%),
          radial-gradient(ellipse 64% 20% at 50% 84%, rgba(255,255,255,.60) 0%, rgba(255,245,235,.28) 24%, rgba(255,211,194,.12) 50%, transparent 78%);
  filter: blur(16px);
  opacity: .72;
  pointer-events: none;
}
.route-dotline { width: 52px; border-top: 1px dashed var(--brand-gold); margin: .65rem 0 .4rem; }
.route-label, .route-card small { color: rgba(255,255,255,.72); font-size: .65rem; margin: 0; }
.route-card h2 { margin: .2rem 0 0; }
.route-card h2 span { color: var(--brand-gold); }
.route-price { display: block; color: #fff; font-size: 1.5rem; letter-spacing: 0; margin: .1rem 0 .15rem; }
.route-card .icon-button { position: absolute; right: 1rem; bottom: 1rem; background: linear-gradient(145deg, #fff, #f6e6db); box-shadow: inset 0 1px 2px #fff, 0 3px 0 rgba(193,143,121,.65), 0 7px 14px rgba(53,2,9,.30); }
.float-pill { position: absolute; display: flex; align-items: center; gap: .65rem; width: 205px; min-height: 68px; padding: .85rem .95rem; border-radius: 12px; border: 1px solid rgba(255,244,230,.90); background: linear-gradient(150deg, #fff 8%, #faf5f1 62%, #e9ddd5); color: var(--ink); box-shadow: inset 0 2px 2px #fff, inset -1px -2px 4px rgba(108,63,44,.10), 0 3px 0 rgba(188,160,143,.75), 0 8px 12px rgba(24,2,6,.20), 0 18px 28px rgba(24,2,6,.30); font-size: .76rem; }
.float-pill { animation: soft-float 4.5s ease-in-out infinite; }
.pill-two { animation-delay: -1.4s; }
.satisfaction-pill { animation-delay: -2.6s; }
.float-pill b, .float-pill small { display: block; }
.float-pill small { color: var(--muted); margin-top: .12rem; }
.pill-icon { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; color: var(--brand-red); background: var(--brand-gold-pale); border-radius: 50%; font-size: 1rem; }
.hero-visual .pill-icon { background: linear-gradient(145deg, #fff9f0, #efd5bc); box-shadow: inset 0 1px 2px #fff, inset 0 -1px 2px rgba(158,108,65,.14), 0 2px 4px rgba(99,49,28,.13); }
.pill-one { left: 8.5%; bottom: 43%; }
.pill-two { left: 15%; right: auto; bottom: 25%; }
.satisfaction-pill { right: 18.6%; bottom: 14%; width: 244px; min-height: 56px; padding-block: .55rem; }
.avatar-stack { display: flex; flex: 0 0 auto; }
.avatar-stack i { width: 27px; height: 27px; display: grid; place-items: center; margin-left: -6px; border: 2px solid #fff; border-radius: 50%; background: var(--brand-gold-pale); box-shadow: 0 3px 10px rgba(50,21,27,.12); }
.avatar-stack i:first-child { margin-left: 0; }
.avatar-stack img { width: 16px; height: 16px; display: block; }
/* Legacy reference shape: clip-path: polygon(0 100%, 43% 0, 57% 0, 100% 100%) */
.hero::after { content: ""; position: absolute; z-index: 1; left: 50%; width: min(100%, var(--frame)); bottom: -1px; height: 7.5%; transform: translateX(-50%); background: var(--mist); clip-path: polygon(0 100%, 24% 100%, 25.5% 97%, 26.5% 91%, 35.3% 16%, 64.84% 16%, 73.5% 91%, 74.5% 97%, 76% 100%, 100% 100%); pointer-events: none; }
.hero-bottom-note { display: none; }
.hero-bottom-note span { color: var(--brand-gold); margin-left: .45rem; }

/* Features */
/* Features */
.features-section { background: #fff; border-bottom: 12px solid var(--mist); }
.feature-grid { width: min(1220px, calc(100vw - 96px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 3rem 0 0; margin-left: 50%; transform: translateX(-50%); }
/* ===== 品牌服务：左视频 + 右卡片 ===== */
.feature-layout {
  width: min(1500px, calc(100vw - 48px));
  margin: 3rem auto 0;

  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: stretch;
}

/* 视频栏：滚动时粘住 */
.feature-video {
  position: sticky;
  top: 96px;
  align-self: start;
}

.feature-video-el {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;      /* ← 改成原视频比例 */
  height: auto;              /* ← 不要固定高度 */
  object-fit: cover;         /* 比例一致时，cover 也不会裁 */
  border-radius: 18px;
  background: #1a0a0c;
  box-shadow: 0 18px 40px rgba(75, 27, 29, .16);
}

.feature-video-caption {
  margin: .9rem 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.6;
  text-align: center;
}

.feature-media {
  width: 100%;
  aspect-ratio: 16 / 9;      /* 图片比例，按素材改 */
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: .8rem;
  /* 白底，和卡片一致 */
  display: flex;              /* 让图居中 */
  align-items: center;
  justify-content: center;
}

.feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s var(--ease);
}

.feature-card:hover .feature-media img {
  transform: scale(1.05);
}

/* 右栏卡片：保持 4 列 2 行 */
.feature-layout .feature-grid {
  width: 100%;
  margin: 0;
  margin-left: 0;
  transform: none;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

/* 覆盖原 .feature-grid 的居中偏移（原来用 50% + translateX） */
.features-section .feature-layout .feature-grid {
  margin-left: 0;
  transform: none;
}

/* 让卡片在窄右栏里也够高 */
.feature-layout .feature-card {
  min-height: 0;
}

.feature-plain {
  display: flex;
  align-items: center;       /* 垂直居中 */
  justify-content: center;   /* 水平居中 */
  min-height: 100%;          /* 撑满格子 */
  padding: 1.45rem;
}

.feature-plain-link {
  color: var(--brand-red);
  font-size: 17px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: .22rem;
}

.feature-plain-link:hover {
  color: var(--brand-gold);
}

/* 品牌文化 + 发展历程：白色卡片包两张图 */
.brand-imgs {
  width: calc(100% - 32px);
  max-width: 1900px;
  margin: 4rem auto 0;
  padding: 20px;                       /* 卡片内边距 */
  background: #fff;                    /* 白底 */
  border-radius: 20px;                 /* 圆角 */
  box-shadow: 0 8px 24px rgba(75, 27, 29, .06);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.brand-img-item {
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;                 /* 图也带点圆角 */
}

.brand-img-item img {
  display: block;
  width: 100%;
  height: auto;                        /* 完整显示，不裁 */
  transition: transform .3s var(--ease);
}

.brand-img-item:hover img {
  transform: scale(1.02);              /* 悬停轻微放大 */
}

/* 灯箱 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .85);
  padding: 4vw;
  cursor: zoom-out;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-img {
  max-width: 95%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, .3);
}

/* 手机上两张图上下排 */
@media (max-width: 900px) {
  .brand-imgs {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ===== 尾页：联系方式（白底，左右两栏） ===== */
.contact-section {
  padding-top: 4rem;
  padding-bottom: 2rem;
  background: #fff;

  scroll-margin-top: 20px;
}

/* 尾页容器放宽 */
.contact-section > .shell {
  width: min(1400px, calc(100% - 96px));
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
  /* 不要 max-width，让它占满放宽后的 shell */
}

/* --- 左栏：只有标题 --- */
.contact-eyebrow {
  margin: 0 0 2rem;
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--ink);
}

.contact-title {
  margin: 0;
  font-size: clamp(4rem, 4.2vw, 4.8rem);
  line-height: 1.2;
  color: var(--ink);
  font-weight: 400;
}

.contact-title span {
  color: var(--brand-red);
}

/* --- 右栏：电话 / 邮箱 / 地址 --- */
.contact-right {
  display: grid;
  gap: 0;
  padding-top: .6rem;
}

.contact-row {
  padding: 1rem 0;            /* 从 1.6rem 收到 1rem */
}

.contact-row + .contact-row {
  border-top: 1px solid var(--line);
}

.contact-label {
  display: block;
  font-size: .9rem;           /* 从 1rem 收到 .9rem */
  letter-spacing: .12em;
  color: var(--ink);
  margin-bottom: .5rem;       /* 从 .8rem 收到 .5rem */
}

.contact-value {
  display: block;             /* 改成 block，别再 flex 撑宽 */
  margin: 0;
  font-size: 1rem;            /* 从 1.15rem 收到 1rem */
  line-height: 1.7;
  color: var(--ink);
}

a.contact-value:hover {
  color: var(--brand-red);
}

/* ===== 品牌实力：图片卡片 ===== */
.reward-card,
.reward-wide {
  position: relative;
  overflow: hidden;
  border-radius: 19px;
  padding: 0;                 /* 去掉内边距，图铺满 */
  background: var(--mist);    /* 图未加载时的底色 */
}

.reward-card {
  min-height: 205px;
  aspect-ratio: 4 / 3;        /* 三张小卡比例，按素材改 */
}

.reward-wide {
  min-height: 215px;
  aspect-ratio: 16 / 9;       /* 两张宽卡比例，按素材改 */
}

.reward-card img,
.reward-wide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* 填满，裁掉多余 */
  transition: transform .4s var(--ease);
}

.reward-card:hover img,
.reward-wide:hover img {
  transform: scale(1.05);     /* 悬停轻微放大 */
}

/* 图4、图5 的卡片 */
.earn-card,
.points-chart {
  position: relative;
  overflow: hidden;
  border-radius: 19px;
  padding: 0;                 /* 去掉内边距，图铺满 */
  min-height: 215px;          /* 保持原高度 */
  background: var(--mist);    /* 图未加载时的底色 */
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.earn-card:hover,
.points-chart:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(75, 27, 29, .18);
}

/* 图片铺满 */
.earn-card img,
.points-chart img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* 填满，裁掉多余 */
  transition: transform .4s var(--ease);
}

.earn-card:hover img,
.points-chart:hover img {
  transform: scale(1.05);
}

/* 响应式 */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .contact-section { padding: 72px 0; }
  .contact-title { font-size: clamp(2rem, 7vw, 2.8rem); }
}

.feature-card { min-height: 218px; padding: 1.2rem; border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 10px 26px rgba(75,27,29,.06); display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.72); }
/* 鼠标悬停高亮 */
.feature-card {
  cursor: pointer;
}
/* 只有点击后才变红 */
.feature-card.is-active {
  background: var(--brand-red);
  border-color: var(--brand-red);
}

.feature-card.is-active h3,
.feature-card.is-active p,
.feature-card.is-active a {
  color: #fff;
}

.feature-card.is-active .feature-icon {
  background: var(--brand-gold-light);
}

.feature-card.is-active .feature-icon svg {
  stroke: var(--brand-red);
}



.feature-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }


.feature-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--brand-red); background: var(--brand-red-alpha-10); font-size: 1rem; margin-bottom: 1rem; }
.feature-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-card-primary .feature-icon { color: var(--brand-red); background: var(--brand-gold-light); }
.feature-card h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .7rem; color: var(--ink); }
.feature-card p  { color: var(--muted); font-size: .88rem; line-height: 1.6; margin: 0; }
.feature-card-primary p { color: rgba(255,255,255,.7); }

.feature-card-primary a { color: var(--brand-gold-light); }
.feature-card a span { margin-left: .22rem; }

/* Rewards */
.rewards-section { background: #F8F3EF; }
.reward-feature-grid { width: min(1220px, calc(100vw - 96px)); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin: 2.8rem 0 0; margin-left: 50%; transform: translateX(-50%); .reward-feature-grid {
  gap: 28px;      /* 从 20px 调大 */
}}
.reward-card { min-height: 205px; border-radius: 19px; position: relative; overflow: hidden; padding: 1.5rem; }
.reward-card:hover { transform: translateY(-8px) scale(1.015); }
.reward-card-white { background: var(--surface); }
.reward-badge { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--brand-red); font-size: 1rem; }
.reward-card h3 { position: absolute; left: 1.5rem; top: 5.15rem; margin: 0; font-size: .92rem; }
.reward-card p { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.15rem; margin: 0; max-width: 250px; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.reward-card-photo { color: #fff; background: linear-gradient(140deg, #6e3334, #c47f66 48%, #3f121b); }
.photo-glow { position: absolute; width: 190px; height: 190px; right: -45px; top: -55px; border-radius: 48% 52% 40% 60%; background: radial-gradient(circle at 40% 40%, #f2bf9c, #7d3233 57%, #31101a 72%); filter: blur(1px); opacity: .9; }
.reward-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(141,15,21,.92), transparent 68%); }
.reward-card-photo > *:not(.photo-glow) { position: relative; z-index: 1; }
.photo-label { position: absolute; left: 1.5rem; top: 1.5rem; font-size: .92rem; font-weight: 400; }
.reward-card-photo p { color: rgba(255,255,255,.65); }
.reward-card-save { background: #fff; }
.reward-card-save strong { display: block; color: var(--brand-red); font-size: 3.25rem; line-height: .9; letter-spacing: 0; }
.reward-card-save > span { display: block; position: absolute; left: 1.5rem; top: 1.5rem; color: var(--ink); font-size: .92rem; font-weight: 400; }
.reward-card-save p { left: 1.5rem; }
.save-bars { position: absolute; inset: 0 0 0 auto; width: 32px; display: flex; flex-direction: column; gap: 4px; justify-content: center; padding: 15px 0; background: var(--brand-red); }
.save-bars i { width: 100%; height: 25%; background: var(--brand-red-bright); }
.save-bars i:nth-child(2) { background: var(--brand-gold); }
.save-bars i:nth-child(3) { background: var(--brand-gold-light); }
.reward-data-grid { width: min(1220px, calc(100vw - 96px)); display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; margin: 20px 0 0; margin-left: 50%; transform: translateX(-50%); }
.earn-card, .points-chart { background: #fff; border-radius: 19px; min-height: 215px; padding: 1.5rem; position: relative; overflow: hidden; }
.earn-card:hover, .points-chart:hover { transform: translateY(-8px); }
.earn-kicker { display: inline-flex; background: var(--brand-gold-pale); color: var(--brand-red); border-radius: 99px; font-size: .48rem; font-weight: 400; padding: .35rem .55rem; }
.earn-card h3 { margin: .75rem 0 0; font-size: .76rem; line-height: 1.13; color: var(--muted); }
.earn-card h3 strong { color: var(--brand-red); font-size: 1.15rem; letter-spacing: 0; }
.earn-card .button { position: absolute; left: 1.2rem; bottom: 1rem; }
.earn-ladder { position: absolute; right: 1rem; top: 1rem; width: 44%; display: grid; gap: .42rem; font-size: .45rem; color: var(--muted); }
.earn-ladder span { display: flex; align-items: center; justify-content: space-between; gap: .3rem; border-bottom: 1px solid var(--line); padding-bottom: .28rem; }
.earn-ladder b { color: var(--brand-red); font-size: .55rem; }
.points-chart { background: linear-gradient(145deg, #fff, #fff9f4); }
.chart-head span, .chart-head small { display: block; color: var(--muted); font-size: .48rem; }
.chart-head strong { display: block; color: var(--brand-red); font-size: 1.25rem; letter-spacing: 0; }
.coverage-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.35rem; }
.coverage-tags span { padding: .45rem .7rem; border-radius: 999px; color: var(--brand-red); background: var(--brand-gold-pale); font-size: .68rem; }
.chart-head small b { color: #2f8d65; }
.chart-bars { height: 76px; display: flex; align-items: end; gap: 5px; margin: 1rem 0 .25rem; padding: 0 .15rem; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(0deg, transparent 0 20px, rgba(212,152,92,.14) 21px 22px); }
.chart-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--brand-gold), var(--brand-red)); }
.chart-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .42rem; }

/* Process */
.process-section { background: var(--surface); }
.process-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; margin-top: 3.4rem; }
.process-preview { min-height: 270px; position: relative; overflow: hidden; border-radius: 17px; background: var(--brand-red-gradient-deep); box-shadow: var(--shadow-red); padding: 1rem; }
.process-preview:hover { transform: translateY(-8px); }
.preview-orbit { position: absolute; width: 170px; height: 110px; border: 1px dashed rgba(241,209,168,.8); border-radius: 50%; left: 9%; bottom: 9%; transform: rotate(-20deg); }
.preview-brand { position: relative; color: #fff; font-size: .65rem; font-weight: 400; }
.preview-brand span { color: var(--brand-gold); margin-right: .35rem; }
.search-panel { position: absolute; width: 62%; min-height: 168px; right: 11%; top: 17%; background: #fff; border-radius: 9px; padding: .75rem; box-shadow: 0 18px 30px rgba(47,4,10,.28); }
.search-row { display: flex; align-items: center; gap: .4rem; border-bottom: 1px solid var(--line); min-height: 28px; color: var(--muted); font-size: .42rem; }
.search-row b { color: var(--ink); font-size: .48rem; margin-left: auto; }
.search-row span:nth-of-type(2) { margin-left: auto; }
.search-panel .button { float: right; margin-top: .6rem; }
.process-copy { min-height: 270px; background: var(--mist); border-radius: 17px; padding: 1.5rem; position: relative; }
.process-copy:hover { transform: translateY(-8px); }
.step-tabs { display: flex; gap: .5rem; }
.step-tab { border: 0; background: transparent; color: rgba(50,21,27,.3); padding: .15rem .35rem .45rem; font-size: .6rem; font-weight: 400; border-bottom: 2px solid transparent; cursor: pointer; }
.step-tab.is-active { color: var(--brand-red); border-color: var(--brand-red); }
.step-label { color: var(--brand-red); font-size: .57rem; margin: 2rem 0 .6rem; }
.step-content h3 { font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: .96; letter-spacing: 0; margin: 0 0 .8rem; font-weight: 400; }
.step-content h3 span { color: var(--brand-red); }
.step-content > p:not(.step-label) { max-width: 370px; color: var(--muted); font-size: .62rem; line-height: 1.5; }
.step-controls { display: flex; gap: .4rem; position: absolute; right: 1.35rem; bottom: 1.25rem; }
.step-arrow { background: var(--brand-red); color: #fff; }
/* Testimonials */
.testimonials-section { color: #fff; overflow: hidden; padding-bottom: 84px; }
.testimonial-heading { position: relative; z-index: 2; }
.testimonial-heading h2 { margin-top: .7rem; }
.testimonial-heading h2 span { color: var(--brand-gold); }
.testimonial-heading > p:last-child { color: rgba(255,255,255,.58); }
.testimonial-carousel { margin-top: 2rem; position: relative; z-index: 2; overflow: hidden; }
.carousel-track { display: flex; gap: 12px; transition: transform .5s var(--ease); }
.carousel-track.is-switching .testimonial-card { animation: card-breathe .55s ease both; }
.testimonial-card { flex: 0 0 calc((100% - 24px) / 3); min-height: 190px; background: #fff; color: var(--ink); border-radius: 17px; padding: 1.05rem; position: relative; display: flex; flex-direction: column; }
.testimonial-card:hover { transform: translateY(-8px); }
.avatar { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: .72rem; font-weight: 400; background: linear-gradient(145deg, #c77f68, #542027); }
.avatar-two { background: linear-gradient(145deg, #d9a38c, #64342d); }
.avatar-three { background: linear-gradient(145deg, #d6b17f, #4c1921); }
.testimonial-card blockquote { margin: .85rem 0; font-size: .63rem; line-height: 1.42; color: var(--muted); }
.testimonial-card footer { margin-top: auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .2rem; }
.testimonial-card footer strong, .testimonial-card footer span { display: block; }
.testimonial-card footer strong { font-size: .54rem; }
.testimonial-card footer span { color: var(--muted); font-size: .42rem; }
.testimonial-card footer b { grid-row: span 2; align-self: center; color: var(--brand-red); font-size: .56rem; background: var(--brand-gold-pale); border-radius: 99px; padding: .25rem .42rem; }
.carousel-controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.carousel-button { background: var(--brand-red-gradient); color: #fff; }
.carousel-button-light { background: var(--brand-gold); color: var(--brand-red-ink); }
.carousel-dots { display: flex; gap: .35rem; }
.carousel-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; }
.carousel-dots button.is-active { background: var(--brand-gold); transform: scale(1.3); }

/* Testimonial geometry matches the supplied reference panel. */
.testimonials-section { height: 908px; min-height: 908px; padding: 0; background: var(--first-section-background); }
.testimonials-section > .shell { width: 100%; max-width: none; height: 100%; }
.testimonial-heading { position: absolute; top: 62px; left: 106px; width: calc(100% - 212px); z-index: 3; }
.testimonial-heading h2 { margin: 1.1rem 0 0; font-size: clamp(3rem, 4.2vw, 3.25rem); line-height: .95; letter-spacing: 0; font-weight: 400; }
.testimonial-heading h2 span { color: var(--brand-gold); }
.testimonial-meta { position: absolute; top: 20px; left: 735px; width: 280px; }
.testimonial-meta p { color: rgba(255,255,255,.66); font-size: .72rem; line-height: 1.4; margin: 0; }
.testimonial-meta .meta-role { display: inline-block; white-space: nowrap; }
.testimonial-carousel { position: absolute; top: 279px; left: 50%; width: min(1438px, calc(100% - 64px)); margin: 0; overflow: visible; transform: translateX(-50%); z-index: 3; }
.carousel-track { gap: 16px; transition: transform .5s var(--ease); }
.testimonial-card { flex: 0 0 calc((100% - 32px) / 3); height: 334px; min-height: 334px; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 20px; padding: 32px; border: 2px solid rgba(255,255,255,.6); border-radius: 22px; box-shadow: 0 12px 26px rgba(12,2,7,.18); }
.testimonial-photo { width: 100%; height: 172px; display: grid; place-items: center; align-self: start; border-radius: 15px; color: rgba(255,255,255,.9); font-size: 1.25rem; font-weight: 400; background: linear-gradient(145deg, #D6B7A8, #6B3435 70%, #2E0C15); overflow: hidden; }
.testimonial-photo.has-image { background-size: cover; background-position: center; }
.testimonial-photo.has-image span { background: rgba(141,15,21,.62); padding: .3rem .55rem; border-radius: 999px; font-size: .72rem; }
.testimonial-photo span { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(3px); }
.photo-two { background: linear-gradient(145deg, #E1C8B3, #A46C5B 46%, #4A1C24); }
.photo-three { background: linear-gradient(145deg, #B38D73, #63312D 48%, #2E1018); }
.testimonial-content { min-width: 0; min-height: 268px; display: flex; flex-direction: column; }
.testimonial-card blockquote { margin: 2.1rem 0 1.2rem; color: var(--ink); font-size: .95rem; line-height: 1.28; }
.testimonial-card footer { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.testimonial-card footer strong { font-size: .92rem; }
.testimonial-card footer strong, .testimonial-card footer .founder-role { white-space: normal; overflow-wrap: anywhere; }
.testimonial-card footer span { color: #8D7E9F; font-size: .62rem; }
.testimonial-card footer b { grid-row: span 2; align-self: end; color: #fff; font-size: .72rem; background: var(--brand-red); border-radius: 99px; padding: .42rem .7rem; }
.carousel-controls { position: absolute; top: 374px; left: 50%; transform: translateX(-50%); gap: 28px; margin: 0; z-index: 4; }
.carousel-button { width: 56px; height: 56px; background: var(--brand-red); color: #fff; }
.carousel-button-light { background: var(--brand-gold); color: var(--brand-red-ink); }
.carousel-dots { display: none; }
.testimonials-section::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: 80px; background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, #fff 38%, var(--mist) 100%); clip-path: polygon(0 100%, 25% 100%, 43% 0, 57% 0, 75% 100%, 100% 100%); pointer-events: none; }

/* CTA and footer */
.cta-section { background: var(--mist); padding-top: 86px; padding-bottom: 86px; }
.cta-card { min-height: 290px; border-radius: 23px; position: relative; overflow: hidden; background: #fff; text-align: center; padding: 3.2rem 1.5rem; box-shadow: 0 16px 40px rgba(75,27,29,.06); }
.cta-card:hover { transform: translateY(-8px); }
.cta-card h2 { font-size: clamp(2rem, 4vw, 3.15rem); }
.cta-card .button { margin-top: .7rem; }
.cta-orbit { position: absolute; border: 1px dashed var(--brand-red-bright); border-radius: 50%; opacity: .7; }
.cta-orbit-left { width: 145px; height: 95px; left: -20px; bottom: -18px; transform: rotate(18deg); }
.cta-orbit-right { width: 180px; height: 120px; right: -20px; top: -30px; transform: rotate(-25deg); }
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--mist);
  padding: 10px 0;            /* 页脚上下各 10px 空气 */
  min-height: 0;
}

.footer-grid {
  width: min(1180px, calc(100% - 96px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 420px;
  justify-content: end;
  gap: 0;
  position: relative;
  z-index: 2;
}

.footer-contact {
  width: 420px;
  max-width: 100%;
}

.footer-contact .contact-row {
  padding: .25rem 0;          /* 每行上下只留 .25rem，紧贴 */
}

.footer-contact .contact-row + .contact-row {
  border-top: 1px solid var(--line);
}

.footer-contact .contact-label {
  display: block;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--ink);
  margin-bottom: .1rem;
}

.footer-contact .contact-value {
  display: block;
  margin: 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ink);
}

.footer-contact a.contact-value:hover {
  color: var(--brand-red);
}



.brand-footer { color: var(--brand-red); }
.brand-footer .brand-mark { color: var(--brand-red); }

.footer-brand p {
  max-width: 420px;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1.9;
  margin: 1.4rem 0;
  transform: translateX(300px) !important;
}

.footer-brand small {
  display: block;
  margin-top: 1.4rem;           /* 回到基础值 */
  color: var(--muted);
  font-size: 1.375rem;
  line-height: 2;
  transform: translateX(300px) !important;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  gap: 3rem;
  padding-top: 0;
  /* 清掉 */
}

.footer-links h3 {
  margin: 0 0 1.6rem;              /* 标题与第一行链接留白 */
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 400;
}

.footer-links a {
  display: block;
  color: var(--muted);
  font-size: 1.375rem;
  line-height: 1.6;                /* 行高稍收，视觉更整齐 */
  margin: 0 0 1.5rem;              /* 关键：行与行间距从 1rem 提到 1.5rem */
}

.footer-links a:last-child { margin-bottom: 0; }
.footer-links a:hover { color: var(--brand-red); }

.footer-wordmark {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-3%);
  color: var(--brand-red-alpha-08);
  font-size: clamp(5rem, 12vw, 9rem);   /* ← 从 24vw/20rem 缩到 12vw/9rem */
  font-weight: 400;
  letter-spacing: 0;
  line-height: .8;                     /* ← 从 .75 调大一点，防止字体被压 */
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

@keyframes soft-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes mobile-float-main {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes mobile-float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes mobile-float-pill {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes ambient-pulse {
  0%, 100% { opacity: .72; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes card-breathe {
  0% { opacity: .7; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes background-drift {
  0% { background-position: 0% 100%, 100% 100%, 50% 20%, 50% 50%; }
  100% { background-position: 18% 82%, 82% 88%, 58% 34%, 50% 50%; }
}
@keyframes testimonials-drift {
  0% { background-position: 0% 100%, 100% 100%, 50% 50%; }
  100% { background-position: 18% 82%, 82% 88%, 50% 50%; }
}
@keyframes sheen-sweep {
  0% { background-position: 0% 50%; opacity: .48; }
  100% { background-position: 100% 50%; opacity: .82; }
}
@keyframes stripe-drift {
  from { background-position: 0 0; }
  to { background-position: 86px 0; }
}

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Keep the wide reward rows centered while they animate into view. */
.reward-feature-grid[data-reveal],
.reward-data-grid[data-reveal] { transform: translateX(-50%) translateY(22px); }
.reward-feature-grid[data-reveal].is-visible,
.reward-data-grid[data-reveal].is-visible { transform: translateX(-50%) translateY(0); }

/* Responsive */
@media (max-width: 1100px) {
  .shell { width: min(var(--shell), calc(100% - 48px)); }
  .hero-copy h1 { font-size: clamp(3.7rem, 7.8vw, 5.8rem); }
  .header-inner { min-height: 70px; gap: .75rem; }
  .site-header .brand-logo { width: 188px; transform: none; }
  .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; z-index: 30; }
  .primary-nav { position: absolute; top: 70px; left: 17px; right: 17px; z-index: 29; display: none; max-height: calc(100dvh - 88px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; padding: .65rem; border-radius: 15px; background: rgba(141,15,21,.97); box-shadow: 0 20px 40px rgba(0,0,0,.25); }
  .primary-nav.is-open { display: flex; }
  .primary-nav > a { display: flex; align-items: center; min-height: 48px; padding: .7rem .8rem; font-size: .95rem; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: .65rem; margin: .2rem 0 0; padding: .65rem .8rem 0; border-top: 1px solid rgba(255,255,255,.12); }
  .nav-actions .login-link { display: flex; align-items: center; min-height: 48px; font-size: .95rem; }
  .nav-actions .button { width: 100%; padding: .85rem 1rem; font-size: .88rem; }
  .testimonial-meta { position: static; width: auto; margin-top: 1.2rem; }
  .testimonial-card { flex-basis: calc((100% - 16px) / 2); }
  .testimonial-carousel { overflow: hidden; padding-bottom: 100px; }
  .footer-links { gap: 2rem; }
}

@media (max-width: 1212px) and (min-width: 761px) {
  .hero { height: max(840px, 78.88vw); }
  .hero-copy { top: 88px; }
  .hero-copy h1 { font-size: clamp(3.5rem, 6.7vw, 5.1rem); }
  .hero-visual { top: 43%; height: 57%; }
  .flight-card { min-height: 360px; padding: 1.15rem; }
  .flight-card h2 { font-size: 1.3rem; }
  .flight-card .card-kicker { padding: .6rem .7rem; }
  .flight-window { height: 155px; }
  .route-card { padding: 1.15rem; }
  .route-card h2 { font-size: 1.3rem; }
  .mini-card { min-height: 180px; padding: 1.15rem; }
  .float-pill { width: min(24%, 205px); gap: .5rem; padding: .65rem .75rem; }
  .pill-one { bottom: 35%; }
  .pill-two { left: clamp(8.5%, calc(35.3% - 225px), 15%); bottom: 13%; }
  .satisfaction-pill { right: 12%; bottom: 8%; width: clamp(205px, 20.132vw, 244px); padding-block: .55rem; }
}

@media (max-width: 760px) {
  /* Keep the desktop flute width, but use a taller mobile mask so the rails
     remain visible from the title area through the stacked cards. */
  :root {
    --reference-flute-width: calc(var(--frame) / 28);
    --first-section-background:
            radial-gradient(ellipse 42% 30% at 76% 106%, rgba(255,255,255,1) 0%, rgba(255,255,255,.74) 22%, rgba(255,255,255,.24) 54%, transparent 78%),
            radial-gradient(ellipse 34% 20% at 24% 107%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.64) 24%, rgba(255,255,255,.20) 55%, transparent 80%),
            radial-gradient(ellipse 72% 46% at 76% 108%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.48) 24%, rgba(255,255,255,.14) 52%, transparent 78%),
            radial-gradient(ellipse 58% 30% at 24% 108%, rgba(255,255,255,.84) 0%, rgba(255,255,255,.38) 26%, rgba(255,255,255,.10) 54%, transparent 80%),
            radial-gradient(ellipse 92% 54% at 76% 108%, #EAA6AA 0%, #DA6066 25%, var(--brand-red) 50%, transparent 100%),
            radial-gradient(ellipse 76% 38% at 24% 108%, #E89DA1 0%, #D8565D 27%, #A51119 63%, transparent 100%),
            radial-gradient(ellipse 100% 27% at 0% -2%, #DB656B 0%, var(--brand-red) 38%, #9F1118 72%, transparent 100%),
            linear-gradient(90deg, #930F16 0%, var(--brand-red-night) 43%, #7B0D12 100%);
    --reference-flute-top-mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.68) 18%, rgba(0,0,0,.18) 36%, transparent 48%);
    --reference-flute-bottom-mask: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.15) 54%, rgba(0,0,0,.66) 70%, #000 84%, #000 100%);
  }
  .hero-rails::before, .testimonial-rails::before { opacity: .38; }
  .hero-rails::after, .testimonial-rails::after { opacity: .98; }
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }
  .shell { width: min(var(--shell), calc(100% - 34px)); }
  .brand-logo { width: 178px; }
  .hero { height: auto; min-height: 100vh; min-height: 100dvh; padding: 96px 0 68px; }
  .hero-inner { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .hero-copy { position: relative; top: auto; left: auto; width: 100%; transform: none; text-align: center; padding-top: 0; }
  .hero-copy h1 { font-size: clamp(3.1rem, 13.8vw, 4.35rem); line-height: 1.01; }
  .hero-lead { max-width: 34rem; margin-inline: auto; font-size: .92rem; line-height: 1.7; }
  /* Give the background room to breathe while keeping all card copy legible. */
  .hero-visual { position: relative; inset: auto; width: min(94%, 540px); height: auto; min-height: 0; transform: none; margin: 1.65rem auto 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hero-visual .orbit { display: none; }
  .hero-visual .glass-card, .hero-visual .float-pill { position: relative; inset: auto; width: auto; aspect-ratio: auto; min-width: 0; transform: none; animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-rendering: geometricPrecision; }
  .hero-visual .glass-card *, .hero-visual .float-pill * { text-rendering: geometricPrecision; }
  .hero-visual .glass-card:hover { transform: none; }
  .hero-visual .flight-card { order: 3; grid-column: 1 / -1; justify-self: center; width: 88%; min-height: 0; margin-top: -2px; padding: 1.15rem; animation: none; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-visual .flight-card h2 { font-size: 1.32rem; line-height: 1.22; }
  .hero-visual .flight-window { height: 148px; }
  .hero-visual .mini-card { order: 1; min-height: 156px; padding: .9rem; animation: none; transform: none; }
  .hero-visual .route-card { order: 2; aspect-ratio: auto; min-height: 156px; padding: .9rem; animation: none; transform: none; }
  .hero-visual .route-card::after { inset: -22px -10px -30px; border-radius: 26px; filter: blur(12px); }
  .hero-visual .route-card h2 { font-size: 1.08rem; line-height: 1.25; }
  .hero-visual .route-label, .hero-visual .route-card small { font-size: .7rem; line-height: 1.5; }
  .hero-visual .float-pill { order: 4; min-height: 62px; padding: .65rem; gap: .45rem; font-size: .76rem; animation: none; transform: none; }
  .hero-visual .pill-one { animation-delay: 0s; }
  .hero-visual .pill-two { order: 5; animation-delay: 0s; }
  .hero-visual .float-pill small { font-size: .7rem; line-height: 1.35; }
  .hero-visual .pill-icon { width: 28px; height: 28px; }
  .hero-visual .satisfaction-pill { order: 6; grid-column: 1 / -1; min-height: 56px; justify-content: center; }
  .hero-visual .glass-card:active, .hero-visual .float-pill:active { animation: none; transform: translateY(1px) scale(.99); transition-duration: .12s; }
  .hero::after { height: 58px; }
  .feature-grid { width: 100%; margin-left: 0; transform: none; grid-template-columns: repeat(2, 1fr); }
  .reward-feature-grid, .reward-data-grid { width: 100%; margin-left: 0; transform: none; }
  .reward-feature-grid { grid-template-columns: 1fr; }
  .reward-card { min-height: 175px; }
  .reward-data-grid { grid-template-columns: 1fr; }
  .reward-feature-grid[data-reveal], .reward-data-grid[data-reveal] { transform: translateY(22px); }
  .reward-feature-grid[data-reveal].is-visible, .reward-data-grid[data-reveal].is-visible { transform: translateY(0); }
  .process-layout { grid-template-columns: 1fr; gap: 1rem; }
  .process-preview { min-height: 250px; }
  .process-copy { min-height: 275px; }
  .testimonial-card { flex-basis: calc((100% - 12px) / 2); }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; }
}

@media (max-width: 520px) {
  .section { padding: 74px 0; }
  .desktop-only { display: none; }
  .hero-copy h1 { font-size: clamp(2.95rem, 13.5vw, 4rem); line-height: 1.01; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 190px; padding: 1.15rem; }
  .reward-card-save p { left: 1.15rem; max-width: calc(100% - 2.3rem); }
  .earn-ladder { position: relative; right: auto; top: auto; width: 100%; margin-top: 1.4rem; }
  .earn-card { min-height: 285px; }
  .earn-card .button { bottom: auto; top: 6.2rem; }
  .points-chart { min-height: 220px; }
  .search-panel { width: 70%; right: 7%; }
  .testimonial-card { flex-basis: 100%; }
  .cta-card { min-height: 310px; padding-top: 2.6rem; }
  .footer-links { gap: 1rem; }
}

@media (max-width: 760px) {
  .testimonials-section { height: auto; min-height: 760px; padding: 78px 0 120px; }
  .testimonials-section > .shell { width: min(var(--shell), calc(100% - 34px)); height: auto; }
  .testimonial-heading { position: relative; top: auto; left: auto; width: auto; }
  .testimonial-heading h2 { font-size: clamp(2.4rem, 10vw, 3.2rem); }
  .testimonial-meta { position: relative; top: auto; left: auto; width: auto; margin-top: 1rem; }
  .testimonial-carousel { position: relative; top: auto; left: auto; width: 100%; margin-top: 2rem; overflow: hidden; padding-bottom: 0; }
  .testimonial-card { flex: 0 0 100%; height: auto; min-height: 270px; grid-template-columns: 112px 1fr; gap: 14px; padding: 18px; border-radius: 18px; }
  .testimonial-photo { width: 112px; height: 122px; }
  .testimonial-content { min-height: 230px; }
  .testimonial-card blockquote { margin: .8rem 0; font-size: .78rem; }
  .testimonial-card footer strong { font-size: .72rem; }
  .testimonial-card footer span { font-size: .52rem; }
  .testimonial-card footer b { font-size: .6rem; padding: .3rem .45rem; }
  .carousel-controls { position: relative; top: auto; left: auto; transform: none; margin-top: 1.2rem; }
  .testimonials-section::after { height: 58px; }
}

@media (max-width: 760px) {
  .section-heading h2, .cta-card h2 { font-size: clamp(1.95rem, 8.5vw, 2.55rem); line-height: 1.08; }
  .section-heading p:last-child, .cta-card > p:last-of-type { font-size: .88rem; line-height: 1.7; }
  .button { min-height: 48px; }
  .feature-grid { gap: 14px; }
  .feature-card { min-height: 0; padding: 1.2rem; }
  .feature-card a { display: inline-flex; align-items: center; min-height: 44px; margin-top: .8rem; padding-top: 0; font-size: .82rem; }

  .process-layout { gap: 1.1rem; margin-top: 2.2rem; }
  .process-preview { min-height: 0; padding: 1.15rem; }
  .preview-brand { position: relative; font-size: .78rem; }
  .search-panel { position: relative; width: 100%; min-height: 0; right: auto; top: auto; margin-top: 1rem; padding: 1rem; border-radius: 14px; display: grid; gap: .1rem; }
  .search-row { min-height: 44px; font-size: .76rem; }
  .search-row b { font-size: .8rem; }
  .search-panel .button { float: none; width: 100%; margin-top: .85rem; padding: .8rem .9rem; font-size: .78rem; }
  .process-copy { min-height: 0; padding: 1.2rem; }
  .step-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .step-tab { min-height: 44px; font-size: .72rem; }
  .step-label { margin: .8rem 0 .55rem; font-size: .68rem; }
  .step-content h3 { font-size: clamp(1.55rem, 6vw, 1.9rem); line-height: 1.12; }
  .step-content > p:not(.step-label) { max-width: none; font-size: .78rem; line-height: 1.65; }
  .step-controls { position: static; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
  .step-arrow { width: 44px; height: 44px; }

  .testimonial-carousel { transform: none; }
  .carousel-controls { gap: 1.1rem; }
  .carousel-button { width: 48px; height: 48px; }
  .carousel-dots { display: flex; align-items: center; gap: .1rem; }
  .carousel-dots button { position: relative; width: 44px; height: 44px; padding: 0; background: transparent; }
  .carousel-dots button.is-active { background: transparent; transform: none; }
  .carousel-dots button::after { content: ""; display: block; width: 12px; height: 12px; margin: auto; border-radius: 50%; background: rgba(255,255,255,.35); transition: transform .2s, background .2s; }
  .carousel-dots button.is-active::after { background: var(--brand-gold); transform: scale(1.3); }
  .route-card .icon-button { display: none; }

  .cta-card { min-height: 0; padding: 2.35rem 1.15rem; }
  .cta-card .button { width: min(100%, 360px); }
  .footer-grid { gap: 1.8rem; }
  .brand-footer .brand-logo { width: 180px; }
  .footer-brand p { font-size: 1.375rem; line-height: 1.9; }
  .footer-brand small { font-size: 1.25rem; line-height: 2; }
  .footer-links { gap: 1.2rem; }
  .footer-links h3 { font-size: 1.5rem; }
  .footer-links a { min-height: 48px; display: flex; align-items: center; font-size: 1.25rem; margin: .4rem 0; }
}

@media (max-width: 390px) {
  .shell, .primary-nav { width: calc(100% - 24px); }
  .primary-nav { left: 12px; right: 12px; }
  .brand-logo, .brand-footer .brand-logo { width: 160px; }
  .site-header .brand-logo { width: 172px; }
  .hero-copy h1 { font-size: clamp(2.75rem, 13.5vw, 3.3rem); }
  .hero-visual { width: 94%; gap: 10px; }
  .hero-visual .mini-card, .hero-visual .route-card { padding: .7rem; }
  .hero-visual .float-pill { padding: .55rem; gap: .38rem; }
  .feature-grid, .reward-feature-grid, .reward-data-grid, .process-layout { gap: 12px; }
  .footer-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .float-pill, .hero-visual::after { animation: none; }
  .hero, .hero::before, .hero-rails::before, .hero-rails::after, .testimonials-section, .testimonial-rails { animation: none; }
  .glass-card, .reward-card, .earn-card, .points-chart, .process-preview, .process-copy, .testimonial-card, .cta-card { transition: none; }
}
/* 中屏：视频和卡片上下排，视频横过来 */
@media (max-width: 1100px) {
  .feature-layout {
    grid-template-columns: 1fr;
    gap: 22px;
    width: min(1220px, calc(100vw - 48px));
  }
  .feature-video {
    position: static;
  }
  .feature-video-el {

    width: 100%;
    height: auto;
    object-fit: contain; /* 完整显示视频，不裁切 */
    background: #000; /* 视频两侧留白底色，可选黑色更好看 */
  }
  .feature-layout .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .feature-layout { width: 100%; }
  .feature-layout .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .feature-layout .feature-grid {
    grid-template-columns: 1fr;
  }
}
html, body,
html *, html *::before, html *::after {
  font-family: "Droid Sans Fallback", sans-serif !important;
}
/* ===== 手机端首屏大图（完美居中，不露红边） ===== */
@media (max-width: 760px) {
  .psd-home-hero {
    aspect-ratio: auto;
    /* 使用 75vh 矮一点，图片就不用放得那么大去填满高度，左右就能少切一点 */
    height: 75vh;
    min-height: 400px;
    margin-top: 0;
    background: #aa0d0d;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .psd-hero-artwork {
    /* 绝对定位，并用 transform 强制拉回正中心 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* 宽度 100% 填满，高度 100% 撑满（不会露红边） */
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* 核心：居中居中还是居中 */
    object-position: center center;
  }

  .psd-home-header {
    position: relative;
    height: 70px !important; /* 高度自动 */
    aspect-ratio: auto !important; /* 取消原本写死的图片比例 */
  }

  .psd-header-artwork {
    /* 背景图铺满撑开的高度 */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  /* 确保导航文字在背景图上方 */
  .psd-home-nav {
    position: relative !important;
    z-index: 1;
  }
}
/* =========================================
   ===== 覆盖并精准还原首屏 Hero 区域 =====
   ========================================= */

.hero-section {
  position: relative;
  width: 100%;
  background: #fff;
  /* 避开固定头部 */
  margin-top: calc(100vw * 103 / 1920);
  overflow: hidden;
}

.hero-bg-wrapper {
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero-bg-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 底部内容区域 */
.hero-bottom-content {
  position: relative;
  z-index: 2;
  background: #fff;
  padding-top: 90px;
  padding-bottom: 20px;
}

.hero-content-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 70px;
  /* 限制最大宽度，让左右内容更集中 */
  width: min(1100px, calc(100% - 40px));
  margin-inline: auto;
}

/* === 左侧视频卡片 === */
.founder-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 260px;
  margin-top: -170px;
  transform: translate(-150px,50px);
}

.founder-card {
  width: 100%;
  /* 细的金橙色边框 */
  border: 2px solid #d4985c;
  /* 阴影让相框浮起来 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  overflow: hidden;
  background: #1a0a0c; /* 视频底色 */
  aspect-ratio: 17 / 30;
  /* 去掉内边距，让细线紧贴视频 */
  padding: 0;
}

.feature-video-el {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  /* 去掉之前的内部圆角 */
  border-radius: 0;
  background: #000;
}

.feature-video-el:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}

.feature-video-el:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  object-fit: contain;
  background: #000;
}

.video-caption {
  /* 1. 横向拉满，和视频一样宽 */
  width: 100% !important;
  display: block !important;

  /* 2. 强制包裹住整个容器，取消从父级继承的拉伸限制 */
  box-sizing: border-box !important;

  /* 3. 调整内边距，让它上下变扁 */
  padding: 6px 0 !important;
  margin-top: 12px !important;

  /* 4. 背景和文字颜色 */
  background: #fdf0e8 !important; /* 浅肉粉色背景 */
  color: #191311 !important;      /* 深棕字色 */

  /* 5. 圆角和文字居中 */
  border-radius: 50px !important;
  text-align: center !important;
  font-size: 0.85rem !important;
  letter-spacing: 1px !important;
}


/* === 右侧文字区 === */
.hero-text-wrapper {
  flex: 1;
  max-width: 700px;
  margin-top: 20px;
  transform: translate(-130px,-90px);

}

/* 美容 美体 健康 标题带横线 */
.hero-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 1px;
}

.hero-heading h2 {
  font-size: 1.8rem;
  color: #6a2222;
  font-weight: bold;
  letter-spacing: 4px;
  white-space: nowrap;
}

.hero-heading .line {
  flex: 1;
  height: 2px;
  background:  #6a2222;
  max-width: 100px;
}

/* 段落文字 */
.hero-desc p {
  font-size: 1.25rem;
  line-height: 2;
  color: #090909;
  margin-bottom: 30px;
  text-indent: 2em;
  text-align: justify;
}

/* 按钮样式 */
.hero-action {
  text-align: center;
  margin-top: 40px;
}

.btn-outline {
  display: inline-block;
  padding: 8px 35px;
  border: 1px solid #666;
  border-radius: 25px;
  color: #333;
  font-size: 1rem;
  transition: all 0.3s;
}

.btn-outline:hover {
  background: #333;
  color: #fff;
}

/* =========================================
   ===== 品牌介绍区 (补全装饰与标签) =====
   ========================================= */
.features-section {
  background: #fff9f5 !important;
  border-bottom: none !important;
  padding: 70px 0 90px !important;
}

/* 顶部小菱形装饰线 */
.heading-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 15px;
}

.ornament-line {
  display: block;
  width: 30px;
  height: 1px;
  background: #d9a386;
}

.ornament-diamond {
  display: block;
  width: 6px;
  height: 6px;
  border: 1px solid #d9a386;
  transform: rotate(45deg);
}

/* 小药丸标签 */
.eyebrow-tag {
  display: inline-block;
  background: #fcebeb;
  color: var(--brand-red);
  font-size: 0.85rem;
  padding: 4px 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.features-section .section-heading h2 {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  margin-top: 0;
  margin-bottom: 20px;
}
.features-section .section-heading h2 span {
  color: var(--brand-red);
}
.features-section .section-heading p:last-child {
  font-size: 1rem;
  color: #666;
  line-height: 1.8;
}

/* =========================================
   ===== 手机端响应式覆盖 =====
   ========================================= */
@media (max-width: 760px) {
  .hero-section {
    margin-top: 0;
  }

  /* 手机端背景图裁切填满 */
  .hero-bg-wrapper {
    height: 65vh;
    min-height: 400px;
  }
  .hero-bg-img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .hero-bottom-content {
    padding-top: 0;
    padding-bottom: 40px;
  }

  .hero-content-inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* 文字在上 */
  .hero-text-wrapper {
    order: 1;
    width: 100%;
    margin-top: 40px;
    transform: none !important;
  }

  /* 视频在下 */
  .founder-card-wrapper {
    order: 2;
    margin-top: 40px;
    width: 80%;
    max-width: 320px;
    transform: none !important;
  }

  .hero-heading h2 {
    font-size: 1.5rem;
  }
  .hero-heading .line {
    max-width: 80px;
  }

  .hero-desc p {
    font-size: 0.95rem;
    line-height: 1.8;
  }

  .features-section {
    padding: 50px 0 !important;
  }
  .features-section .section-heading h2 {
    font-size: 1.8rem;
  }
}
/* =========================================
   ===== 全新建模：极简居中页脚 =====
   ========================================= */
.site-footer {
  position: relative !important;
  background: #fff !important;
  padding: 0 !important;
  min-height: auto !important;
  overflow: hidden !important;
}

/* 彻底隐藏掉原来那个巨大的“猛瘦”水印 */
.site-footer .footer-wordmark,
.site-footer .footer-grid {
  display: none !important;
}

/* 内容容器：控制宽度和垂直间距 */
.site-footer .footer-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 60px 0 70px 0 !important; /* 上方留白 60px，下方留白 70px */
  gap: 60px !important; /* 联系方式和导航的间距 */
}

/* --- 上半部分：联系方式 --- */
.site-footer .footer-contact-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important; /* 每行文字的间距 */
}

.site-footer .contact-line {
  display: flex !important;
  flex-direction: row !important; /* 强制横向排布 */

  /* 👇 核心修复：让文本的中文和数字绝对垂直居中对齐 👇 */
  align-items: center !important;
  align-items: baseline !important; /* 有时候针对不同字体，baseline 更稳，如果还歪就删掉这行 */

  justify-content: center !important;
  font-size: 0.95rem !important;
  color: #333 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important; /* 👈 强制行高一致，不要继承外面的 1.55 */
  height: auto !important;
}

/* 针对里面的标签和值，分别锁死字体和行高 */
.site-footer .contact-label,
.site-footer .contact-value {
  font-family: "Microsoft YaHei", "PingFang SC", "SimSun", sans-serif !important; /* 换回更稳的字体 */
  font-weight: bold !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important; /* 双重保险：垂直居中 */
}

/* --- 下半部分：文字导航 --- */
.site-footer .footer-nav-links {
  display: grid !important;
  grid-template-columns: repeat(3, 180px) !important; /* 强制三列，每列固定宽度 */
  justify-content: center !important;
  align-items: center !important;
  row-gap: 40px !important; /* 两行之间的上下间距 */
  text-align: center !important;
}

.site-footer .footer-nav-links a {
  font-size: 1.15rem !important; /* 导航文字稍大 */
  color: #333 !important;
  transition: color 0.3s ease !important;
}

.site-footer .footer-nav-links a:hover {
  color: var(--brand-red) !important; /* 悬停变红 */
}

/* --- 最底部的红色线框 --- */
.site-footer .footer-red-bar {
  width: 100% !important;
  height: 12px !important; /* 红线高度 */
  background: #C9151E !important; /* 品牌红 */
}

/* --- 手机端适配 --- */
@media (max-width: 760px) {
  .site-footer .footer-container {
    padding: 40px 0 !important;
    gap: 40px !important;
  }
  .site-footer .contact-line {
    font-size: 0.85rem !important;
    flex-wrap: wrap !important; /* 地址太长允许换行 */
    justify-content: center !important;
  }
  .site-footer .footer-nav-links {
    /* 保持三列 */
    grid-template-columns: repeat(3, 1fr) !important; /* 👈 用 1fr 均分宽度，让排版更舒展 */
    row-gap: 25px !important;    /* 👈 上下两行的间距（加大） */
    column-gap: 15px !important; /* 👈 左右各列之间的间距（加大） */
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 20px !important;  /* 👈 左右两边留出安全边距，不让字贴边 */
  }

  /* 字号不变，保持清晰 */
  .site-footer .footer-nav-links a {
    font-size: 0.95rem !important;
    white-space: nowrap !important; /* 强制不换行 */
  }
  .site-footer .footer-red-bar {
    height: 10px !important;
  }
}
/* =========================================
   ===== 底部红色通栏设计 (全部居中 & 扁平化) =====
   ========================================= */

.site-footer .footer-red-bar {
  width: 100% !important;
  height: auto !important;
  background: #b12029 !important;
  /* 核心改动：上下内边距从 40px 压缩到 20px */
  padding: 20px 0 !important;
}

/* 红底内容容器 */
.site-footer .footer-red-inner {
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.75rem !important; /* 字体稍微调小一点点 */
  letter-spacing: 1px !important;
  /* 核心改动：元素间距从 15px 压缩到 8px */
  gap: 8px !important;
}

/* 1. Logo 样式 */
.site-footer .footer-logo {
  /* 核心改动：高度从 40px 降到 30px */
  height: 30px !important;
  width: auto !important;
  margin-bottom: 0 !important;
  /* 如果 Logo 原图不是白色的，在红底上看不清，请取消下面这行的注释 */
  /* filter: brightness(0) invert(1); */
}

/* 2. 版权文字 */
.site-footer .footer-copyright-text {
  margin: 0 !important;
  opacity: 0.85 !important;
}

/* 3. 备案号与技术信息 */
.site-footer .footer-record {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

.site-footer .footer-record a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  transition: color 0.3s !important;
}

.site-footer .footer-record a:hover {
  color: #fff !important;
}

.site-footer .record-divider {
  opacity: 0.4 !important;
}

/* --- 手机端适配 --- */
@media (max-width: 760px) {
  .site-footer .footer-red-bar {
    padding: 15px 0 !important; /* 手机端压得更扁 */
  }

  .site-footer .footer-red-inner {
    gap: 6px !important;
  }

  .site-footer .footer-logo {
    height: 26px !important;
  }

  .site-footer .footer-record {
    flex-wrap: wrap !important;
  }
}
/* =========================================
   ===== 导航条：靠右 + 强制加粗 + 竖线加粗 =====
   ========================================= */

.psd-home-nav {
  position: absolute;
  top: 0;
  right: 40px;
  left: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 文字样式 */
.psd-home-nav .nav-text {
  font-family: "Microsoft YaHei", "PingFang SC", "Droid Sans Fallback", sans-serif;
  font-size: 22px;
  color: #420f11;
  text-decoration: none;
  padding: 0 18px;
  transition: color 0.3s ease;
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
}

.psd-home-nav .nav-text:hover {
  color: #d89451;
}

/* 核心改动：用 CSS 画一根实实在在的竖线 */
.psd-home-nav .nav-divider {
  display: inline-block;
  width: 2px; /* 👈 竖线的粗细，觉得不够粗改成 3px */
  height: 25px; /* 👈 竖线的高度，和文字差不多高 */
  background-color: #420f11; /* 👈 竖线颜色 */
  border-radius: 1px;
}

/* 了解加盟图片 */
.psd-home-nav .nav-join-img {
  display: inline-block;
  height: 48px;
  margin-left: 20px;
}
.psd-home-nav .nav-join-img img {
  height: 100%;
  width: auto;
  display: block;
}

/* =========================================
   ===== 仅针对手机端导航的终极适配 =====
   ========================================= */

  @media (max-width: 850px) {
    .psd-home-nav {
      right: 5px !important;
      left: auto !important;
      justify-content: flex-end !important;
      width: 100% !important;
      height: 100% !important;
      gap: 0 !important;
      flex-wrap: nowrap !important;

      /* 👇 核心修改：用 padding-top 把内容往下挤，比如 6px 或 8px 👇 */
      padding-top: 10px !important;
      padding-bottom: 0 !important;

      align-items: center !important;
    }

  /* 竖线缩小 */
  .psd-home-nav .nav-divider {
    display: inline-block !important;
    width: 1px !important;
    /* 👇 核心修改：从 10px 改大到 14px 或 16px 👇 */
    height: 14px !important;
    background-color: #320f10 !important;
    margin: 0 3px !important; /* 为了配合长竖线，左右间距稍微给一点点 */
    flex-shrink: 0 !important;
  }

  /* 👇 核心：文字自适应缩放，绝对不换行 👇 */
    .psd-home-nav .nav-text {
      /* 字号保持不变，或者你根据刚才调好的来 */
      font-size: clamp(9px, 2.8vw, 12px) !important;

      /* 👇 核心修改：把 bold 改成 500（中等粗细）或者 600（半粗） 👇 */
      font-weight: 500 !important;

      /* 确保没有加粗阴影 */
      text-shadow: none !important;

      color: #320f10 !important;
      padding: 0 3px !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
    }

  /* 图片按钮缩小 */
  .psd-home-nav .nav-join-img {
    height: 22px !important;
    margin-left: 4px !important;
    flex-shrink: 0 !important; /* 防止被挤压变形 */
  }
}
/* =========================================
   ===== 仅针对手机端页脚联系方式的终极暴力适配 =====
   ========================================= */
@media (max-width: 760px) {
  /* 1. 压缩页脚整体上下间距 */
  .site-footer .footer-container {
    padding: 20px 0 !important;
    gap: 25px !important;
  }

  /* 2. 联系方式容器，给两侧留一点安全边距 */
  .site-footer .footer-contact-info {
    gap: 6px !important;
    width: 100% !important;
    padding: 0 5px !important; /* 几乎贴边，把空间全给文字 */
  }

  /* 3. 核心：极致压缩字号 + 绝对不换行 */
  .site-footer .contact-line {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    flex-wrap: nowrap !important; /* 锁死不换行 */
    white-space: nowrap !important; /* 锁死不折行 */

    /* 👇 字体小到 9px，最大 11px，完全适应手机 👇 */
    font-size: clamp(5px, 2.8vw, 9px) !important;

    letter-spacing: -0.5px !important; /* 字间距再往死里缩 */
    line-height: 1.2 !important;
    width: 100% !important;
  }

  /* 4. 强制标签和值同样大小，绝不脱离 */
  .site-footer .contact-label,
  .site-footer .contact-value {
    font-size: clamp(9px, 2.8vw, 11px) !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: baseline !important;
  }
}
/* =========================================
   ===== 首屏底部模块：背景图铺满且不遮挡 =====
   ========================================= */

/* 1. 父容器相对定位 */
.hero-bottom-content {
  position: relative;
  background-color: #fff;
  /* 注意：千万不要写 overflow: hidden，不然向上突出去的视频会被切掉 */
}

/* 2. 背景图层：绝对定位，铺满父容器 */
.hero-bottom-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* 换成你的图片路径 */
  background-image: url('assets/optimized/7e9b4bed6b21a636-1600.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* 保证极淡，不影响文字 */
  opacity: 0.08;

  /* 这里的 z-index 设置为 0，让它呆在父容器的最底层 */
  z-index: 0;
  pointer-events: none;
}

/* 3. 内容层：相对定位，层级比背景图高，确保浮在上面 */
.hero-content-inner {
  position: relative;
  z-index: 1;
}

/* --- 移动端适配 --- */
@media (max-width: 760px) {
  .hero-bottom-content::before {
    opacity: 0.15;
    background-size: 120% 30%;
    /* 👇 核心修改：把 top 换成百分比或者具体的像素 👇 */
    background-position: left 1%;}
  }}