/* ============================================================
   RIO CAPSULE — 首页 / Product PDP 专用样式
   ============================================================ */

/* ============ BUY / ORDER SECTION (方案A 独立下单区) ============ */
.buy { padding: 90px 0 100px; position: relative; }
.buy::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(800px 500px at 50% 0%, rgba(212, 175, 55, 0.08), transparent 60%);
}
.buy__inner { position: relative; z-index: 1; max-width: 720px; }
.buy__panel { margin-top: 34px; }
.buy__card {
  background: linear-gradient(180deg, rgba(27, 59, 43, 0.25), rgba(10, 25, 47, 0.6));
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 22px; padding: 34px 36px;
}
@media (max-width: 640px) { .buy__card { padding: 24px 20px; } }
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 140px 0 80px;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(900px 600px at 15% 20%, rgba(27, 59, 43, 0.55), transparent 60%),
    radial-gradient(1000px 700px at 85% 10%, rgba(212, 175, 55, 0.1), transparent 55%),
    radial-gradient(1200px 900px at 60% 100%, rgba(6, 13, 24, 0.9), transparent 70%);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center;
}

/* Left — Brand master message */
.hero__message { position: relative; z-index: 2; }
.hero__message .hero__title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin: 14px 0 12px; line-height: 1.12; }
/* 标题层级：品牌名小号首标 + 主卖点大幅金色渐变（数字钩子突出） */
.hero__message .hero__title { display: block; }
.hero__message .hero__title .t-brand {
  display: block; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; margin-bottom: 12px;
}
.hero__message .hero__title .t-main {
  display: block; font-size: clamp(2.6rem, 5.4vw, 3.9rem); line-height: 1.05;
  font-weight: 800;
  background: linear-gradient(135deg, #E8C65C 0%, var(--accent-gold) 40%, #C9983F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
}
.hero__message .hero__sub { font-size: 1.1rem; margin-bottom: 22px; max-width: 30ch; }
.hero__cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }

/* Hero 卖点条 — 首屏三连卖点 */
.hero__points {
  display: flex; gap: 30px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
}
.hero__point { display: flex; align-items: center; gap: 12px; }
.hero__point-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.3rem;
  background: linear-gradient(135deg, var(--gold-soft), transparent);
  border: 1px solid var(--gold-line);
  box-shadow: 0 6px 18px -8px rgba(212, 175, 55, 0.4);
}
.hero__point-text { display: flex; flex-direction: column; line-height: 1.25; }
.hero__point-text b { font-family: var(--font-display); font-size: 0.98rem; letter-spacing: 0.02em; }
.hero__point-text span { font-size: 0.8rem; color: var(--text-dim); }

/* Hero 滚动指示器 */
.hero__scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-dim); text-decoration: none; z-index: 2;
  opacity: 0.85; transition: opacity 0.3s, color 0.3s;
}
.hero__scroll:hover { opacity: 1; color: var(--accent-gold); }
.hero__scroll-label { font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; }
.hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--accent-gold), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; top: -40%; left: 0; right: 0; height: 40%;
  background: var(--accent-gold);
  animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint {
  0% { top: -40%; } 100% { top: 110%; }
}
.btn-ghost { background: transparent; border: 1.5px solid rgba(212, 175, 55, 0.5); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent-gold); background: rgba(212, 175, 55, 0.08); }

/* Left 60% — Product visual gallery */
.hero__gallery { position: relative; }
.hero__main {
  position: relative; aspect-ratio: 4 / 4.2;
  border-radius: 24px; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #163458 0%, #0A192F 45%, #050B14 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
}
/* Gallery 多视图通用 */
.gview { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s; overflow: hidden; }
.gview.is-active { opacity: 1; visibility: visible; }
.gview__badge {
  position: absolute; top: 18px; left: 0; right: 0; text-align: center;
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-gold);
}
.gview__tagline {
  position: absolute; bottom: 22px; left: 16px; right: 16px; text-align: center;
  font-size: 0.82rem; color: var(--text-dim); line-height: 1.5;
}
/* 视图 2: 剖面结构 */
.cap-cut {
  position: relative; width: 62%; aspect-ratio: 2.4 / 1;
  display: grid; place-items: center;
}
.cap-cut__core {
  position: absolute; inset: 8% 20%;
  border-radius: 999px;
  background: linear-gradient(180deg, #22304a, #0b1526);
  border: 1px solid rgba(212, 175, 55, 0.3);
  overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: center; justify-items: center;
}
.cap-cut__granule {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #E8C65C, #8a6a1f);
  box-shadow: 0 0 8px 1px rgba(212, 175, 55, 0.4);
}
.cap-cut__shell {
  position: absolute; top: 0; bottom: 0; width: 30%; border-radius: 999px;
  background: linear-gradient(135deg, #2A3140 0%, #10131A 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
}
.cap-cut__shell--a { left: -14%; transform: rotate(-6deg); }
.cap-cut__shell--b { right: -14%; transform: rotate(6deg); }
/* 视图 3: 草本云集合 */
.herb-cloud {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; padding: 34px 34px;
  width: 100%;
}
.herb-cloud span {
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px; padding: 12px 10px; text-align: center;
  font-size: 0.82rem; font-weight: 600;
}
.herb-cloud span:nth-child(even) { transform: translateY(8px); }
/* 视图 4: 生活方式 */
.life-scene {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 20px 40px;
}
.life-scene__icon { font-size: 3.4rem; filter: drop-shadow(0 8px 18px rgba(212,175,55,0.35)); }
.life-scene__lines { display: grid; gap: 8px; width: 100%; }
.life-scene__lines i { height: 5px; border-radius: 999px; background: rgba(212, 175, 55, 0.25); }
.life-scene__lines i:nth-child(2) { width: 86%; justify-self: center; }
.life-scene__lines i:nth-child(3) { width: 94%; }
.life-scene__lines i:nth-child(4) { width: 78%; justify-self: end; }
/* 视图 5: 视频占位 */
.gview__play {
  width: 78px; height: 78px; border-radius: 50%;
  background: linear-gradient(135deg, #E8C65C, var(--accent-gold) 50%, #B8922E);
  color: #0A192F; display: grid; place-items: center;
  box-shadow: var(--shadow-gold); cursor: pointer;
  transition: transform 0.3s var(--ease);
}
.gview__play:hover { transform: scale(1.08); }
.gview__play-icon { font-size: 1.4rem; margin-left: 4px; }
.gview--video.is-playing .gview__play { opacity: 0.3; pointer-events: none; }
/* Box — matte black with gold trim */
.rio-box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  width: 55%; aspect-ratio: 1 / 1.25;
  background: linear-gradient(160deg, #1E2227 0%, #0C0E11 60%, #16181C 100%);
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: floatBox 7s ease-in-out infinite;
  display: grid; place-items: center;
}
@keyframes floatBox {
  0%, 100% { transform: translate(-50%, -56%) perspective(1000px) rotateY(-18deg) rotateX(4deg); }
  50% { transform: translate(-50%, -48%) perspective(1000px) rotateY(-18deg) rotateX(4deg); }
}
.rio-box__label {
  position: absolute; inset: 16px; border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--accent-gold); text-align: center;
}
.rio-box__label b { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.14em; }
.rio-box__label span { font-size: 0.62rem; letter-spacing: 0.24em; color: var(--accent-silver); opacity: 0.7; }
/* Floating capsule with particle halo */
.rio-capsule-float {
  position: absolute; top: 24%; left: 58%; z-index: 3;
  width: 130px; height: 48px;
  animation: floatCap 5.5s ease-in-out infinite;
}
@keyframes floatCap {
  0%, 100% { transform: translateY(0) rotate(-12deg); }
  50% { transform: translateY(-24px) rotate(-8deg); }
}
.capsule {
  position: relative; width: 100%; height: 100%;
  background: linear-gradient(135deg, #2A3140 0%, #10131A 50%, #20242C 100%);
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 16px 30px -10px rgba(0,0,0,0.7);
  overflow: hidden;
}
.capsule::before {
  content: ""; position: absolute; left: 46%; top: -20%; bottom: -20%; width: 8%;
  background: linear-gradient(180deg, #1B3B2B, #2E6B4F);
  border-radius: 999px;
}
.capsule::after {
  content: ""; position: absolute; left: 8%; top: 12%; width: 30%; height: 18%;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), transparent);
  border-radius: 999px;
}
.capsule__gold { position: absolute; right: 0; top: 0; bottom: 0; width: 46%;
  background: linear-gradient(135deg, #E8C65C, #B8922E);
  border-radius: 0 999px 999px 0; }
/* Particle halo ring */
.particle-ring {
  position: absolute; top: 24%; left: 58%; transform: translate(-35%, -30%);
  width: 200px; height: 200px; z-index: 2; pointer-events: none;
}
.particle-ring i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 12px 2px rgba(212, 175, 55, 0.5);
  animation: orbit 4s linear infinite;
}
.particle-ring i:nth-child(1) { top: 50%; left: 50%; --a: 0deg;   animation-duration: 4.2s; }
.particle-ring i:nth-child(2) { --a: 60deg;  animation-duration: 3.6s; }
.particle-ring i:nth-child(3) { --a: 120deg; animation-duration: 4.8s; }
.particle-ring i:nth-child(4) { --a: 180deg; animation-duration: 3.3s; }
.particle-ring i:nth-child(5) { --a: 240deg; animation-duration: 4.5s; }
.particle-ring i:nth-child(6) { --a: 300deg; animation-duration: 3.9s; }
@keyframes orbit {
  0% { transform: rotate(var(--a)) translateX(95px) scale(1); opacity: 0.9; }
  50% { opacity: 0.4; }
  100% { transform: rotate(calc(var(--a) + 360deg)) translateX(95px) scale(0.8); opacity: 0.9; }
}
/* Gold glow behind box */
.hero__main::before {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.28), transparent 65%);
  filter: blur(20px);
}
/* Thumbnails row */
.hero__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
.thumb {
  aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: linear-gradient(150deg, #163458, #0A192F);
  border: 1px solid rgba(212, 175, 55, 0.18);
  display: grid; place-items: center; font-size: 1.4rem;
  cursor: pointer; transition: all 0.3s var(--ease); position: relative;
}
.thumb:hover, .thumb.is-active { border-color: var(--accent-gold); transform: translateY(-3px); box-shadow: var(--shadow-gold); }
.thumb.is-active::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--accent-gold);
}
.thumb .thumb__label {
  position: absolute; bottom: 4px; left: 0; right: 0;
  font-size: 0.52rem; color: var(--text-dim); text-align: center; letter-spacing: 0.04em;
}

/* Right 40% — Purchase decision */
.hero__buy { position: relative; z-index: 2; }
.hero__brand { font-family: var(--font-display); letter-spacing: 0.3em; font-size: 0.72rem; color: var(--accent-gold); font-weight: 600; }
.hero__title { font-size: clamp(2rem, 4vw, 2.9rem); margin: 14px 0 10px; line-height: 1.12; }
.hero__title em { font-style: normal; color: var(--accent-gold); }
.hero__sub { color: var(--text-dim); font-size: 1.02rem; margin-bottom: 18px; }
.rating { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.rating__stars { color: var(--accent-gold); letter-spacing: 2px; font-size: 1.05rem; }
.rating__text { color: var(--text-dim); font-size: 0.9rem; }
.rating__text a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.rating__text a:hover { color: var(--accent-gold); }

/* Price block */
.price-block { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.price__big { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; }
.price__unit { color: var(--text-dim); font-size: 0.95rem; }
.price__tag {
  background: var(--gold-soft); color: var(--accent-gold);
  border: 1px solid var(--gold-line); border-radius: var(--radius-pill);
  padding: 5px 14px; font-size: 0.83rem; font-weight: 600;
}
.price__perday { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 26px; }
.price__perday b { color: var(--accent-gold); }

/* SKU selector */
.sku-group { display: grid; gap: 12px; margin-bottom: 24px; }
.sku {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-radius: var(--radius-sm);
  border: 1px solid rgba(229, 229, 229, 0.2);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer; transition: all 0.3s var(--ease); position: relative;
}
.sku:hover { border-color: rgba(212, 175, 55, 0.5); }
.sku__left { display: flex; flex-direction: column; gap: 4px; }
.sku__name { font-family: var(--font-display); font-weight: 700; }
.sku__meta { font-size: 0.82rem; color: var(--text-dim); }
.sku__price { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.sku__badge {
  position: absolute; top: -11px; right: 16px;
  background: var(--accent-gold); color: #0A192F;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 4px 12px; border-radius: var(--radius-pill);
}
.sku.is-selected {
  border-color: var(--accent-gold);
  background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(27,59,43,0.25));
  box-shadow: 0 0 0 1px var(--accent-gold) inset;
}
.sku.is-selected .sku__radio::after { transform: scale(1); }
.sku__radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.6);
  display: grid; place-items: center; margin-right: 16px; flex-shrink: 0;
}
.sku__radio::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent-gold); transform: scale(0); transition: transform 0.3s var(--ease);
}
.sku__row { display: flex; align-items: center; }

/* Trust badges under CTA */
.trust-row { display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.trust-row span { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text-dim); }

/* ============ 72H TIMELINE ============ */
.science {
  background: linear-gradient(180deg, transparent, rgba(27, 59, 43, 0.12) 30%, transparent 100%);
}
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; }
.timeline__card {
  position: relative; padding: 36px 28px 30px; border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid rgba(212, 175, 55, 0.14);
  backdrop-filter: blur(8px);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
  overflow: hidden;
}
.timeline__card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--accent-gold);
  box-shadow: var(--shadow-gold);
}
.timeline__phase {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.18em;
  color: var(--accent-gold); text-transform: uppercase; margin-bottom: 14px;
}
.timeline__icon { font-size: 2.4rem; margin-bottom: 16px; }
.timeline__title { font-size: 1.35rem; margin-bottom: 10px; }
.timeline__desc { color: var(--text-dim); font-size: 0.94rem; }
.timeline__arrow {
  position: absolute; right: -18px; top: 50%; transform: translateY(-50%); z-index: 2;
  color: var(--accent-gold); font-size: 1.5rem; opacity: 0.8;
}
/* 3 pillar grid under timeline */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar { display: flex; gap: 16px; padding: 22px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); }
.pillar__icon { font-size: 1.6rem; flex-shrink: 0; }
.pillar h4 { font-size: 1.05rem; margin-bottom: 6px; }
.pillar p { color: var(--text-dim); font-size: 0.9rem; }

/* ============ COMPARISON ============ */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1040px; margin: 0 auto; }
.compare__card { padding: 40px 34px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08); }
.compare__card--rio {
  border: 1px solid var(--accent-gold);
  background: linear-gradient(160deg, var(--bg-card-2), #0A192F);
  box-shadow: var(--shadow-gold);
  position: relative;
}
.compare__card--rio::before {
  content: "★ RECOMMENDED"; position: absolute; top: -14px; left: 30px;
  background: var(--accent-gold); color: #0A192F; font-size: 0.7rem; font-weight: 800;
  padding: 6px 16px; border-radius: var(--radius-pill); letter-spacing: 0.1em;
}
.compare__head { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.compare__head .badge-sm { font-size: 0.7rem; padding: 4px 10px; border-radius: var(--radius-pill); }
.comp-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.92rem; align-items: center; }
.comp-row:last-child { border-bottom: none; }
.comp-row .dim { color: var(--text-faint); }
.comp-row .val--good { color: var(--accent-gold); font-weight: 600; }
.comp-row .val--bad { color: var(--text-dim); }

/* Weekly dosing */
.dosing { margin-top: 48px; text-align: center; }
.dosing h3 { margin-bottom: 26px; font-size: 1.5rem; }
.dosing__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; max-width: 840px; margin: 0 auto; }
.dosing__day { padding: 18px 8px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.dosing__day .day { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.dosing__day .pill { font-size: 0.78rem; color: var(--accent-silver); }
.dosing__day--active { border-color: var(--accent-gold); background: linear-gradient(150deg, rgba(212,175,55,0.15), rgba(27,59,43,0.3)); }
.dosing__day--active .pill { color: var(--accent-gold); font-weight: 700; }

/* ============ INGREDIENTS GRID ============ */
.ingredients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ingredient {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.14);
  background: var(--bg-card); cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.ingredient:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent-gold); }
.ingredient__img {
  aspect-ratio: 1; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, var(--bg-card-2), #0A192F);
  position: relative; overflow: hidden;
}
.ingredient__img .ph {
  font-size: 3rem;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
  opacity: 0.9;
}
.ingredient__body { padding: 18px 18px 20px; text-align: center; }
.ingredient__name { font-family: var(--font-display); font-weight: 700; margin-bottom: 4px; }
.ingredient__latin { font-size: 0.7rem; color: var(--text-faint); font-style: italic; margin-bottom: 8px; }
.ingredient__factor { font-size: 0.68rem; color: var(--accent-gold); letter-spacing: 0.04em; margin-bottom: 10px; text-transform: uppercase; }
.ingredient__desc { font-size: 0.85rem; color: var(--text-dim); }

/* ============ TRUST BAND ============ */
.trust-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust-item { text-align: center; padding: 34px 20px; border-radius: var(--radius); background: var(--glass); border: 1px solid rgba(255,255,255,0.07); transition: all 0.3s var(--ease); }
.trust-item:hover { border-color: var(--accent-gold); transform: translateY(-4px); }
.trust-item__icon { font-size: 2.4rem; margin-bottom: 14px; filter: drop-shadow(0 4px 10px rgba(212,175,55,0.3)); }
.trust-item h4 { font-size: 1.02rem; margin-bottom: 8px; }
.trust-item p { font-size: 0.86rem; color: var(--text-dim); }

/* ============ FINAL CTA ============ */
.final-cta { text-align: center; position: relative; overflow: hidden; }
.final-cta__inner { padding: 80px 40px; border-radius: 24px; background: linear-gradient(150deg, var(--bg-card-2), #0A192F); border: 1px solid var(--gold-line); position: relative; }
.final-cta h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 16px; }
.final-cta p { color: var(--text-dim); max-width: 520px; margin: 0 auto 36px; font-size: 1.05rem; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .hero { padding-top: 130px; }
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__message { order: -1; text-align: center; }
  .hero__cta-row { justify-content: center; }
  .hero__points { justify-content: center; }
  .hero__gallery { order: 0; }
  .timeline { grid-template-columns: 1fr; }
  .timeline__arrow { display: none; }
  .pillars, .compare, .trust-band, .ingredients__grid { grid-template-columns: 1fr; }
  .ingredients__grid { grid-template-columns: repeat(2, 1fr); }
  .compare__card { padding: 30px 22px; }
}
@media (max-width: 520px) {
  .ingredients__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dosing__week { grid-template-columns: repeat(4, 1fr); }
  .hero__main { aspect-ratio: 4 / 4.6; }
  /* 移动端主标缩小+换行，避免超长英文溢出 */
  .hero__message .hero__title .t-main {
    /* 移动端放小字号，让长句在空格处自然换行，避免单词中间断裂 */
    font-size: clamp(1.25rem, 6.4vw, 1.7rem);
    overflow-wrap: break-word; word-break: normal; white-space: normal;
    line-height: 1.12;
  }
  .hero__message .hero__title .t-brand { font-size: 0.62rem; letter-spacing: 0.18em; }
  /* 移动端卖点条改垂直堆叠，避免文字截断 */
  .hero__points { gap: 14px; padding-top: 20px; }
  .hero__point { flex: 1 1 100%; justify-content: flex-start; }
  .hero__point-text span { overflow-wrap: break-word; }
  /* 移动端 5 个缩略图压缩到 5 列但缩小内边距，避免裁切 */
  .hero__thumbs { gap: 6px; }
  .thumb .thumb__label { font-size: 0.46rem; }
  .thumb span[style*="font-size:1.6rem"] { font-size: 1.05rem !important; }
  /* 移动端悬浮胶囊收进卡片内，避免被边缘裁切 */
  .rio-capsule-float {
    top: 16%; left: auto; right: 8%; width: 110px; height: 42px;
    transform: translateX(0);
  }
  .rio-capsule-float .capsule { animation: floatCap 5.5s ease-in-out infinite; }
  .particle-ring {
    top: 16%; left: auto; right: 0; transform: translateX(0);
    width: 150px; height: 150px;
  }
  .particle-ring i:nth-child(n) { }
  @keyframes orbit {
    0% { transform: rotate(var(--a)) translateX(82px) scale(1); opacity: 0.9; }
    50% { opacity: 0.4; }
    100% { transform: rotate(calc(var(--a) + 360deg)) translateX(82px) scale(0.8); opacity: 0.9; }
  }
}