@charset "UTF-8";

/* Brand refinement: warm charcoal, copper light, and the geometry of a lens. */
.site-header {
  background: #171612f2;
  border-bottom-color: #d9b78716;
}
.brand-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: 2px;
}
.brand-name > span {
  display: block;
  color: #b9a78f;
  font-size: 8px;
  letter-spacing: 2.4px;
}
#site-nav a { font-size: 13px; }
.nav-trial {
  background: #dcbc95;
  min-height: 42px;
  border-radius: 5px;
}

.hero {
  background: #141310;
  min-height: clamp(700px, calc(100svh - 80px), 900px);
  border-bottom: 1px solid #d9b7871a;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 36%, #c49a6520, transparent 54%),
    linear-gradient(90deg, #09090766, transparent 24%, transparent 76%, #09090766);
}
.hero-copy { padding-block: 68px 116px; }
.hero-kicker {
  gap: 14px;
  color: #c4b398;
  font-size: 11px;
  letter-spacing: 2.2px;
}
.hero-kicker > i {
  width: 3px;
  height: 3px;
  background: #c8a878;
  box-shadow: none;
}
.hero-kicker .kicker-brand { color: #b9a990; }
.hero-kicker .kicker-product { color: #ddd0bc; letter-spacing: 2px; }
.hero h1 {
  margin: 31px 0 25px;
  font-size: clamp(78px, 7.7vw, 112px);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -4px;
  color: #f4f0e7;
}
.hero h1 > span {
  background-image: linear-gradient(105deg, #c39663 4%, #eed3ad 45%, #d5ac7b 72%, #c39866 100%);
}
.hero-description {
  color: #b8b0a3;
  font-size: 15px;
  letter-spacing: .6px;
  line-height: 1.95;
}
.hero-actions { margin-top: 32px; gap: 14px; }
.hero-actions .button-large {
  min-height: 60px;
  min-width: 202px;
  border-radius: 5px;
  font-size: 15px;
  gap: 32px;
}
.hero-actions .button-gold {
  background: linear-gradient(115deg, #e3c5a0, #c9a273);
  box-shadow: 0 6px 26px #bd8d491b, inset 0 1px 0 #ffecd766;
  border-color: #e0c19b;
}
.hero-actions .button-gold:hover {
  background: linear-gradient(115deg, #eed5b4, #dcbc92);
  box-shadow: 0 8px 35px #bd8d4930;
}
.trial-arrow {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  background: #49392314;
  border: 1px solid #49392316;
  border-radius: 50%;
}
.trial-arrow svg { width: 16px; height: 16px; }
.hero-actions .button-outline {
  min-width: 180px;
  color: #d6cebf;
  background: #1a181355;
  border-color: #d2b28736;
}
.hero-actions .button-outline:hover { background: #d2b2870c; border-color: #d2b28772; }
.platform-availability { gap: 16px; margin-top: 24px; font-size: 12px; color: #c7bfb1; }
.platform-availability svg { width: 14px; height: 14px; }
.platform-note { font-size: 11px; color: #9e9485; }
.platform-hint { font-size: 11px; color: #9e9485; margin-top: 10px; }

.hero-optics {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: min(75vw, 1040px);
  aspect-ratio: 1;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
}
.optics-orbit { position: absolute; border-radius: 50%; }
.orbit-outer {
  inset: 0;
  border: 1px solid #d4ad7723;
  background: radial-gradient(circle, transparent 60%, #d4ad7704 71%, transparent 72%);
}
.orbit-outer::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid #d4ad770d;
}
.orbit-inner { inset: 14%; border: 1px solid #d4ad7711; }
.optics-axis { position: absolute; }
.axis-horizontal {
  top: 50%;
  left: -13%;
  right: -13%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4ad771e 16%, transparent 35%, transparent 65%, #d4ad771e 84%, transparent);
}
.axis-vertical {
  left: 50%;
  top: -10%;
  bottom: -10%;
  width: 1px;
  background: linear-gradient(transparent, #d4ad7715 12%, transparent 28%, transparent 72%, #d4ad7715 88%, transparent);
}
.optics-point {
  position: absolute;
  left: calc(50% - 2px);
  width: 5px;
  height: 5px;
  border: 1px solid #cda37180;
  transform: rotate(45deg);
  background: #141310;
}
.point-top { top: -2px; }
.point-bottom { bottom: -2px; }
.hero-glow {
  bottom: -425px;
  width: 1150px;
  height: 850px;
  background: radial-gradient(ellipse, #ad79362b, #9866340a 42%, transparent 70%);
}
.hero-signature {
  position: absolute;
  left: max(40px, calc((100% - 1160px) / 2));
  top: 48%;
  display: flex;
  flex-direction: column;
  gap: 13px;
  color: #beaa8b;
  pointer-events: none;
}
.hero-signature > span:first-child { font-size: 11px; letter-spacing: 5px; }
.hero-signature > span:last-child {
  max-width: 100px;
  font-size: 8px;
  letter-spacing: 1.4px;
  line-height: 1.9;
  color: #857867;
}
.hero-side-note {
  position: absolute;
  right: max(40px, calc((100% - 1160px) / 2));
  top: 40%;
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  gap: 20px;
  color: #a0917b;
  font-size: 9px;
  letter-spacing: 3px;
  pointer-events: none;
}
.hero-side-note i { width: 1px; height: 44px; background: #b89b6e42; }
.hero-bottom { color: #a39782; bottom: 27px; font-size: 9px; letter-spacing: 1.5px; }
.hero-bottom a { color: #c9b99f; font-size: 11px; }
.intro-strip { background: #efeee8; }
.intro-strip .wrap .intro-label { color: #6e6b5f; }
.floating-trial { background: #d9b88f; color: #302719; }

/* Co-branding uses the original Chenyu logo on a light ground. */
.compute-section {
  color: #f0ece3;
  background: radial-gradient(ellipse at 92% 10%, #b88a4820, transparent 50%), #171612;
  border-block: 1px solid #d4ad771c;
}
.compute-section .eyebrow { color: #bca17c; }
.compute-heading {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 32px;
}
.compute-heading h2 {
  font-size: clamp(40px, 4.5vw, 62px);
  font-weight: 550;
  line-height: 1.4;
  letter-spacing: -1.8px;
}
.compute-heading h2 > span { color: #d8b68c; }
.compute-partner { padding-top: 5px; }
.compute-brands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  width: 100%;
  max-width: 450px;
  padding: 27px 30px;
  border: 1px solid #fff9ed38;
  border-radius: 8px;
  background: #f1ede4;
}
.compute-zhijing { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.compute-zhijing img { display: block; width: 52px; height: 52px; border-radius: 10px; }
.compute-zhijing > span { color: #302b22; font-size: 30px; font-weight: 550; letter-spacing: 1px; }
.compute-multiply { color: #ae9e87; font-size: 27px; font-weight: 300; }
.compute-chenyu { display: block; width: 180px; height: auto; min-width: 0; }
.compute-lead { margin-top: 23px; color: #b7ad9e; font-size: 14px; line-height: 1.9; }
.compute-source { display: inline-flex; align-items: center; gap: 18px; margin-top: 20px; color: #d4b78f; font-size: 11px; }
.compute-source svg { width: 18px; height: 18px; }
.compute-source:hover { color: #f0d6b3; }
.compute-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 60px;
  border-top: 1px solid #d4ad7730;
}
.compute-points article { padding: 30px 30px 0 0; }
.compute-points article + article { border-left: 1px solid #d4ad7730; padding-left: 36px; }
.compute-number { color: #ad9270; font-size: 10px; letter-spacing: 1.2px; }
.compute-points h3 { margin-top: 20px; font-size: 22px; font-weight: 500; letter-spacing: -.5px; }
.compute-points p { margin-top: 14px; color: #a99f90; font-size: 13px; line-height: 1.9; }
@media (max-width: 1000px) {
  .compute-heading { gap: 35px; grid-template-columns: 1fr 1fr; }
  .compute-brands { padding: 24px 20px; gap: 18px; }
  .compute-zhijing { gap: 10px; }
  .compute-zhijing img { width: 42px; height: 42px; }
  .compute-zhijing > span { font-size: 25px; }
  .compute-chenyu { width: 145px; }
  .compute-points h3 { font-size: 19px; }
  .compute-points article + article { padding-left: 25px; }
}
@media (max-width: 760px) {
  .compute-section { padding-block: 72px; }
  .compute-heading { grid-template-columns: 1fr; gap: 30px; margin-top: 24px; }
  .compute-heading h2 { font-size: clamp(36px, 7.8vw, 50px); letter-spacing: -1px; }
  .compute-partner { padding-top: 0; }
  .compute-brands { justify-content: flex-start; padding: 24px; }
  .compute-chenyu { width: 165px; }
  .compute-lead { font-size: 13px; margin-top: 20px; }
  .compute-points { grid-template-columns: 1fr; margin-top: 37px; }
  .compute-points article { padding: 25px 0; }
  .compute-points article + article { border-left: 0; border-top: 1px solid #d4ad7730; padding-left: 0; }
  .compute-points article:last-child { padding-bottom: 0; }
  .compute-points h3 { margin-top: 10px; font-size: 22px; }
  .compute-points p { margin-top: 8px; font-size: 12px; }
}
@media (max-width: 400px) {
  .compute-brands { padding: 20px 16px; gap: 15px; }
  .compute-zhijing img { width: 36px; height: 36px; border-radius: 7px; }
  .compute-zhijing > span { font-size: 22px; }
  .compute-zhijing { gap: 8px; }
  .compute-multiply { font-size: 23px; }
  .compute-chenyu { width: 140px; }
}

/* Both photographs keep the same full framing for an aligned comparison. */
.skin-section {
  background: #efeee8;
  border-bottom: 1px solid #d5d0c3;
  padding-block: 104px 76px;
}
.skin-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 36px;
}
.skin-heading h2 {
  margin-top: 20px;
  color: #28261f;
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -1.7px;
}
.skin-heading h2 > span { color: #9c7348; margin-right: .15em; }
.skin-lead {
  padding-bottom: 4px;
  color: #746d5f;
  font-size: 13px;
  line-height: 1.95;
}
.skin-showcase { margin: 0; }
.skin-comparison {
  --comparison-position: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #cbc5b6;
  border-radius: 8px;
  background: #dedad0;
}
.skin-comparison-image { display: block; width: 100%; height: auto; }
.comparison-before-image {
  position: absolute;
  inset: 0;
  height: 100%;
  clip-path: inset(0 calc(100% - var(--comparison-position)) 0 0);
}
.comparison-labels {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  pointer-events: none;
}
.comparison-labels > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1px solid #f6ecdc30;
  border-radius: 4px;
  background: #171612c9;
  color: #f4ede2;
  font-size: 12px;
  letter-spacing: .5px;
}
.comparison-labels small { color: #c9baa6; font-size: 9px; letter-spacing: 1.5px; }
.comparison-labels > span:last-child { color: #e5c5a0; }
.comparison-range {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.comparison-range::-webkit-slider-thumb { appearance: none; width: 44px; height: 44px; }
.comparison-range::-moz-range-thumb { width: 44px; height: 44px; border: 0; }
.comparison-divider {
  position: absolute;
  left: var(--comparison-position);
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: #f7eee0;
  box-shadow: 0 0 12px #00000020;
  pointer-events: none;
}
.comparison-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #f9ecd9;
  background: #f1e4d0;
  color: #6f5030;
  box-shadow: 0 3px 18px #00000035;
}
.comparison-handle svg { width: 25px; height: 25px; }
.comparison-range:focus-visible ~ .comparison-divider .comparison-handle { outline: 3px solid #d5a568; outline-offset: 4px; }
.skin-caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  color: #827765;
  font-size: 11px;
  letter-spacing: .5px;
}
.skin-selling-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 40px;
  border-block: 1px solid #cfc7b8;
}
.skin-benefit {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 228px;
  padding: 30px 34px;
}
.skin-benefit + .skin-benefit { border-left: 1px solid #cfc7b8; }
.skin-benefit-label { color: #967b59; font-size: 10px; letter-spacing: 1.5px; }
.skin-benefit h3 { margin-top: 18px; color: #302b23; font-size: 24px; font-weight: 550; letter-spacing: -.7px; line-height: 1.5; }
.skin-benefit p { margin-top: 13px; color: #746d5f; font-size: 12px; line-height: 1.9; }
.skin-benefit-batch { background: #e4ddcf80; }
.skin-benefit .skin-batch-rate { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; color: #82613f; white-space: nowrap; }
.skin-batch-rate > strong { font-size: 68px; font-weight: 500; line-height: 1; letter-spacing: -3px; }
.skin-batch-rate > span:first-child { font-size: 14px; }
.skin-batch-rate > span:last-child { font-size: 12px; letter-spacing: .5px; }

@media (max-width: 800px) {
  .skin-section { padding-block: 80px 60px; }
  .skin-heading { display: block; }
  .skin-heading h2 { font-size: 38px; }
  .skin-lead { margin-top: 17px; font-size: 13px; }
  .skin-benefit { min-height: 210px; padding: 25px 21px; }
  .skin-benefit h3 { font-size: 20px; }
  .skin-benefit p { font-size: 11px; }
  .skin-batch-rate > strong { font-size: 58px; }
  .skin-benefit .skin-batch-rate { gap: 7px; }
}
@media (max-width: 620px) {
  .skin-section { padding-block: 64px 46px; }
  .skin-heading { margin-bottom: 27px; }
  .skin-heading h2 { margin-top: 17px; font-size: clamp(28px, 6.8vw, 36px); letter-spacing: -1px; }
  .skin-lead { font-size: 12px; line-height: 1.95; }
  .comparison-labels { top: 12px; left: 12px; right: 12px; gap: 8px; }
  .comparison-labels > span { padding: 6px 9px; font-size: 10px; letter-spacing: 0; }
  .comparison-labels small { display: none; }
  .comparison-handle { width: 36px; height: 36px; }
  .comparison-handle svg { width: 21px; height: 21px; }
  .skin-caption { gap: 10px; font-size: 9px; letter-spacing: 0; }
  .skin-selling-points { grid-template-columns: 1fr; margin-top: 28px; }
  .skin-benefit { min-height: 0; padding: 27px 22px; }
  .skin-benefit + .skin-benefit { border-left: 0; border-top: 1px solid #cfc7b8; }
  .skin-benefit h3 { margin-top: 12px; font-size: 22px; }
  .skin-benefit p { margin-top: 9px; font-size: 12px; }
  .skin-batch-rate > strong { font-size: 64px; }
  .skin-benefit .skin-batch-rate { margin-top: 16px; gap: 11px; }
}

@media (min-width: 1600px) {
  .hero { min-height: 850px; }
  .hero-copy { padding-block: 74px 122px; }
}
@media (max-width: 1100px) {
  .hero-signature, .hero-side-note { display: none; }
  .hero-optics { width: 92vw; }
  .hero h1 { font-size: 88px; }
}
@media (max-width: 800px) {
  .brand-name { font-size: 21px; }
  .brand-name > span { font-size: 7px; letter-spacing: 1.9px; }
  .hero { min-height: clamp(650px, calc(100svh - 72px), 850px); }
  .hero h1 { font-size: 76px; letter-spacing: -3px; }
  .hero-copy { padding-block: 62px 104px; }
  .hero-description { font-size: 14px; }
  .hero-kicker { font-size: 10px; }
  .hero-actions .button-large { min-width: 180px; min-height: 56px; font-size: 14px; }
  .hero-optics { width: 106vw; top: 43%; }
}
@media (max-width: 620px) {
  .brand-name { font-size: 21px; gap: 2px; }
  .brand-name > span { font-size: 6px; letter-spacing: 1.8px; }
  .nav-trial { min-height: 36px; font-size: 11px; }
  .hero { min-height: clamp(610px, calc(100svh - 68px), 790px); }
  .hero-copy { padding-block: 63px 105px; }
  .hero-kicker { font-size: 9px; letter-spacing: 1.5px; gap: 10px; }
  .hero-kicker .kicker-product { letter-spacing: 1.1px; }
  .hero h1 {
    font-size: clamp(43px, 12.6vw, 72px);
    letter-spacing: -2px;
    line-height: 1.33;
    margin-top: 28px;
    margin-bottom: 23px;
  }
  .hero-description { font-size: 12px; line-height: 2; letter-spacing: .15px; }
  .hero-actions { margin-top: 29px; gap: 10px; }
  .hero-actions .button-large {
    min-width: 0;
    min-height: 54px;
    padding-inline: 20px;
    font-size: 13px;
    gap: 20px;
  }
  .hero-actions .button-outline { padding-inline: 20px; }
  .trial-arrow { width: 23px; height: 23px; }
  .platform-availability { gap: 13px; font-size: 11px; margin-top: 25px; }
  .platform-note { font-size: 10px; }
  .platform-hint { max-width: 300px; margin-inline: auto; font-size: 10px; line-height: 1.9; }
  .hero-optics { width: 147vw; top: 43%; }
  .orbit-outer { border-color: #d4ad7729; }
  .hero-bottom { bottom: 24px; font-size: 7px; letter-spacing: .9px; }
  .hero-bottom a { font-size: 10px; }
  .hero-glow { bottom: -370px; width: 840px; height: 700px; }
}
@media (max-width: 360px) {
  .hero-kicker { font-size: 8px; letter-spacing: 1px; }
  .hero-actions .button-large { padding-inline: 16px; gap: 17px; font-size: 12px; }
  .hero-description { font-size: 11px; }
}

/* Keep the longer brand slogan deliberate at every screen size. */
.hero h1.hero-slogan {
  font-size: clamp(48px, 6.2vw, 86px);
  letter-spacing: -2.5px;
  line-height: 1.3;
}
.slogan-break { display: none; }
@media (max-width: 620px) {
  .hero h1.hero-slogan {
    font-size: clamp(43px, 12.6vw, 64px);
    line-height: 1.3;
    letter-spacing: -1.8px;
  }
  .slogan-break { display: inline; }
}