:root{
  --paper:#f5f1e8;
  --paper-soft:#ece7dc;
  --paper-strong:#fffdf8;
  --ink:#1a1d19;
  --ink-muted:#565d56;
  --forest:#1b2922;
  --tea:#6b7d71;
  --gold:#84683d;
  --gold-dark:#70552f;
  --gold-light:#c6a56f;
  --line:#d6d0c4;
  --line-dark:rgba(255,255,255,.13);
  --radius-sm:3px;
  --radius:6px;
  --font-serif:'Songti SC','STSong','Source Han Serif SC','Noto Serif CJK SC',serif;
  --font-display:var(--font-sans);
  --font-sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --type-hero:clamp(52px,6.2vw,80px);
  --type-section:clamp(34px,3.8vw,48px);
  --type-lede:clamp(28px,3vw,38px);
  --type-body-lg:clamp(16px,1.25vw,18px);
}

html{background:var(--forest)}
body{background:var(--forest);color:#f7f3ea;font-weight:400}
::selection{background:var(--gold-light);color:var(--ink)}

.nav{
  background:rgba(20,31,25,.84);
  border-bottom-color:var(--line-dark);
  transition:background-color .24s ease,border-color .24s ease;
}
.nav-links a{transition:color .2s ease}
.nav-mobile-btn{border-radius:var(--radius-sm);transition:border-color .2s ease,color .2s ease}
.mobile-menu{background:rgba(20,31,25,.985)}
.mobile-menu-close{border-radius:var(--radius-sm)}

.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .48s cubic-bezier(.22,1,.36,1),transform .48s cubic-bezier(.22,1,.36,1);
}
.reveal.active{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.07s}
.reveal-delay-2{transition-delay:.14s}
.reveal-delay-3,.reveal-delay-4{transition-delay:.21s}

.hero{min-height:86svh}
.hero::after{
  background:linear-gradient(90deg,rgba(10,15,12,.94) 0%,rgba(10,15,12,.76) 39%,rgba(10,15,12,.12) 72%,rgba(10,15,12,.2) 100%),linear-gradient(0deg,rgba(10,15,12,.6) 0%,transparent 42%);
}
.hero-copy{max-width:650px}
.hero-eyebrow,.section-eyebrow,.product-tag,.tile-tag{
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
}
.hero-title,.section-title,.story-title,.story-copy h2,.product-title,.product-tile h3,.feature-card h3{
  font-family:var(--font-serif);
  font-weight:500;
  letter-spacing:.01em;
  text-wrap:balance;
}
.hero-title{max-width:640px;font-size:var(--type-hero);line-height:1.12}
.hero-slogan{font-weight:400}
.hero-subtitle{max-width:34em}
.hero-proof{max-width:620px}
.hero-proof li::before{border-radius:0;background:var(--gold-light);transform:rotate(45deg)}

.btn-primary,.btn-secondary,.qr-trigger{
  min-height:46px;
  border-radius:var(--radius-sm);
  box-shadow:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease;
}
.btn-primary{background:var(--gold-light);color:var(--ink)}
.btn-primary:hover{background:#d4b780;transform:none}
.btn-secondary:hover{transform:none}

.section{padding-block:clamp(72px,8.5vw,112px)}
.section-light{background:var(--paper);color:var(--ink)}
.section-forest{background:var(--forest)}
.section-title{font-size:var(--type-section);line-height:1.22}
.section-desc{max-width:68ch;font-size:var(--type-body-lg);line-height:1.85}

.philosophy-cards{border-color:var(--line)}
.philosophy-card{
  min-height:310px;
  padding:38px 34px 42px;
  border-color:var(--line);
  background:transparent;
  box-shadow:none;
  transition:background-color .2s ease;
}
.philosophy-card:hover{background:rgba(255,253,248,.58)}
.philosophy-num{font-family:var(--font-sans);font-size:13px;letter-spacing:.12em;color:var(--gold-dark)}
.philosophy-card h3{margin-top:58px;font-size:clamp(22px,2vw,27px);line-height:1.35}
.philosophy-card .en{font-size:10px;letter-spacing:.14em}

.product-hero{background:var(--paper-soft)}
.product-hero::before{background:radial-gradient(circle at 77% 50%,rgba(255,253,248,.98),transparent 39%),linear-gradient(90deg,rgba(107,125,113,.08),transparent 64%)}
.product-copy{max-width:540px}
.product-headline{max-width:26em;line-height:1.65}
.eye-cream-model{filter:drop-shadow(0 22px 36px rgba(29,39,34,.14))}
.product-benefits li{border-color:rgba(26,29,25,.14)}

.feature-grid{border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);gap:0}
.feature-card{
  border:0;
  border-right:1px solid var(--line-dark);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:background-color .2s ease;
}
.feature-card:last-child{border-right:0}
.feature-card:hover{background:rgba(255,255,255,.025)}
.feature-card .feature-num{font-family:var(--font-sans);font-size:12px;letter-spacing:.12em;color:var(--gold-light)}
.feature-card h3{margin-top:34px}

.data-bar{border-color:var(--line)}
.data-item{border-color:var(--line)}
.data-item .data-number{font-family:var(--font-serif);font-size:42px;color:var(--gold-dark)}
.audience-note{max-width:760px;margin:32px auto 0;line-height:1.8}

.marquee-section{padding:38px 24px;background:#15221b;border-color:var(--line-dark)}
.marquee-track{
  width:auto;
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 46px;
  animation:none;
  transform:none;
}
.marquee-track span{
  position:relative;
  padding:0;
  color:rgba(247,243,234,.72);
  font-family:var(--font-serif);
  font-size:clamp(21px,2.6vw,32px);
  font-weight:400;
}
.marquee-track span+span::before{content:'·';position:absolute;left:-27px;color:var(--gold-light)}

.product-grid{gap:18px}
.product-tile,.product-tile.wide{
  background:var(--paper-strong);
  border-color:var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  transition:border-color .2s ease;
}
.product-tile:hover,.product-tile:focus-within{border-color:#aeb7af;transform:none;box-shadow:none}
.tile-media{border-radius:var(--radius-sm);background:var(--paper-soft)}
.product-tile .tile-desc{line-height:1.8;-webkit-line-clamp:3}
.product-tile .tile-bottom{border-color:var(--line)}
.product-tile .qr-trigger{background:var(--forest);color:#fff}

.science-row{border-color:var(--line-dark)}
.science-item{border-color:var(--line-dark)}
.science-item .sci-icon{font-family:var(--font-sans);font-size:12px;letter-spacing:.12em;color:var(--gold-light)}
.science-item h4{font-family:var(--font-serif);font-size:22px;font-weight:500}
.science-item p{line-height:1.8}

.footer{background:#111b16}

/* Brand story */
.story-hero{background:var(--forest)}
.story-eyebrow{font-family:var(--font-sans);font-size:11px;letter-spacing:.14em}
.story-title{font-size:clamp(50px,5.6vw,72px);line-height:1.12}
.story-subtitle{max-width:29em;font-family:var(--font-serif);font-weight:400}
.story-hero-media{border-radius:var(--radius);box-shadow:0 20px 56px rgba(10,16,12,.22)}
.story-hero-media figcaption{font-family:var(--font-sans);font-size:10px;letter-spacing:.12em}
.story-section{background:var(--paper)}
.story-intro{max-width:32em;font-size:clamp(20px,2.1vw,27px)}
.story-chapter{border-color:var(--line)}
.story-index{font-family:var(--font-sans);font-size:12px;letter-spacing:.14em;color:var(--gold-dark)}
.story-copy h2{font-size:clamp(26px,2.5vw,33px);line-height:1.35}
.story-copy p{max-width:68ch;color:var(--ink-muted);line-height:1.9}
.story-image{border-radius:var(--radius);box-shadow:0 20px 56px rgba(24,31,26,.09)}
.story-image img{border-radius:0}
.story-point{border-color:var(--line);border-radius:var(--radius-sm);box-shadow:none}
.story-quote{border-radius:var(--radius);background:var(--forest)}
.story-source-note{border-radius:var(--radius-sm);background:var(--paper-soft)}

@media(max-width:768px){
  :root{--type-hero:clamp(44px,13vw,58px)}
  .nav-inner{height:58px}
  .hero{
    display:grid;
    grid-template-rows:minmax(360px,52svh) auto;
    min-height:auto;
    padding:0;
    background:var(--paper);
    color:var(--ink);
  }
  .hero::after{display:none}
  .hero-media{position:relative;inset:auto;grid-row:1}
  .hero-media img{object-position:center top}
  .hero-inner{grid-row:2;display:block;padding:34px 20px 42px;background:var(--paper)}
  .hero-copy{max-width:none}
  .hero-eyebrow{color:var(--gold-dark)}
  .hero-title{color:var(--ink);font-size:var(--type-hero);-webkit-text-fill-color:currentColor}
  .hero-slogan{color:var(--gold-dark)}
  .hero-subtitle{color:var(--ink-muted)}
  .hero .btn-primary{background:var(--forest);color:#fff}
  .hero .btn-secondary{border-color:var(--forest);color:var(--forest)}
  .hero-proof{border-color:var(--line);color:var(--ink-muted)}
  .philosophy-card{min-height:0;padding:30px 4px}
  .philosophy-card h3{margin-top:28px}
  .feature-grid{display:grid;grid-template-columns:1fr}
  .feature-card{border-right:0;border-bottom:1px solid var(--line-dark)}
  .feature-card:last-child{border-bottom:0}
  .marquee-track{gap:8px 30px}
  .marquee-track span+span::before{left:-18px}
  .product-tile .tile-desc{-webkit-line-clamp:2}
  .story-hero{padding-top:90px}
}

@media(prefers-reduced-motion:reduce){
  .reveal{transform:none;transition:none}
  .marquee-track{animation:none}
}