:root{
  --bg:#0b0908; --bg2:#110e0c; --ink:#f1e9dc; --mute:#a99d8c; --gold:#c9a86a; --gold2:#e8d3a0; --wine:#5a1620; --brand-green:#8dc63f; --line:rgba(201,168,106,.22);
  --serif:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong","SimSun",serif;
  --sans:-apple-system,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  --nav-h:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
.wrap{width:min(1120px,100% - 48px);margin-inline:auto}
.eyebrow{font-size:13px;letter-spacing:.32em;color:var(--gold);text-transform:uppercase}
.sec-title{font-family:var(--serif);font-weight:700;font-size:clamp(28px,4.6vw,52px);line-height:1.25;margin:14px 0 48px;letter-spacing:.04em}
.section{padding:clamp(72px,12vw,150px) 0;position:relative}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:999px;background:linear-gradient(135deg,#e8d3a0,#b8924d);color:#1a120a;font-weight:600;letter-spacing:.12em;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;box-shadow:0 8px 30px rgba(201,168,106,.25)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(201,168,106,.4)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s}
.btn:hover::after{transform:translateX(120%)}
.btn-ghost{background:transparent;color:var(--gold2);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.btn-sm{padding:8px 20px;font-size:14px;letter-spacing:.1em}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

/* loader */
#loader{display:none}
.js #loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center}
.ld-inner{text-align:center}
.ld-mark{font-family:var(--serif);font-size:clamp(34px,8vw,56px);letter-spacing:.4em;padding-left:.4em;color:var(--gold2);opacity:0;animation:ldin 1s .1s forwards}
.ld-bar{width:160px;height:1px;background:rgba(201,168,106,.2);margin:22px auto 0;overflow:hidden}
.ld-bar i{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
@keyframes ldin{to{opacity:1}}
#progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:60;pointer-events:none}
#progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));transform:scaleX(0);transform-origin:left}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1120px)/2));transition:background .4s,backdrop-filter .4s}
.nav.solid{background:rgba(11,9,8,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.brand-link{display:inline-flex;align-items:center;height:100%}
.nav-logo{height:36px;width:auto;display:block;filter:drop-shadow(0 0 12px rgba(141,198,63,.25))}
.ld-logo{height:56px;width:auto;margin:0 auto;opacity:0;animation:ldin 1s .1s forwards;filter:drop-shadow(0 0 18px rgba(141,198,63,.35))}
.nav-links{display:flex;gap:34px;font-size:14px;color:var(--mute)}
.nav-links a{transition:color .3s}.nav-links a:hover{color:var(--gold2)}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 20px) 0 60px;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 70% 50%,#2a1015 0%,rgba(42,16,21,0) 70%),var(--bg)}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,70%) var(--my,45%),rgba(201,168,106,.10),transparent 70%)}
.hero-grid{position:relative;width:min(1120px,100% - 48px);margin-inline:auto;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:20px}
.hero-copy{position:relative;z-index:2}
.hero-title{font-family:var(--serif);font-weight:900;font-size:clamp(56px,10vw,132px);line-height:1.05;letter-spacing:.12em;margin:18px 0 6px;color:var(--gold2)}
.hero-title .ch{background:linear-gradient(180deg,#f6ecd2 10%,#c9a86a 70%,#8e6c34);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-slogan{margin-top:10px;font-family:var(--serif);font-size:clamp(18px,2.4vw,28px);letter-spacing:.14em;color:var(--ink)}
.hero-slogan-sub{margin-top:8px;font-size:15px;letter-spacing:.12em;color:var(--gold);opacity:.9}
.hero-sub{margin:18px 0 36px;color:var(--mute);font-size:15px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.split .ch{display:inline-block;will-change:transform,opacity}
.hero-visual{position:relative;aspect-ratio:1/1.05;width:100%;max-width:560px;justify-self:center;order:2}
.hero-copy{order:1}
.px{position:absolute;inset:0;display:grid;place-items:center;will-change:transform}
.hv-engrave{position:absolute;width:112%;max-width:none;opacity:.13;transform:rotate(-8deg)}
.hv-ring{width:86%;aspect-ratio:1;border-radius:50%;border:1px solid var(--line);box-shadow:0 0 120px 20px rgba(120,24,40,.35),inset 0 0 80px rgba(201,168,106,.06);background:radial-gradient(circle,rgba(150,30,50,.28),transparent 66%)}
.hv-float{width:78%;filter:drop-shadow(0 40px 50px rgba(0,0,0,.65))}
.hv-apple{width:100%}
.hv-tag{position:absolute;font-size:12px;letter-spacing:.3em;color:var(--gold2);border:1px solid var(--line);padding:6px 14px;border-radius:999px;background:rgba(11,9,8,.55);backdrop-filter:blur(6px)}
.hv-tag.t1{left:2%;top:18%}.hv-tag.t2{right:0;bottom:16%}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:.4em;color:var(--mute);z-index:2}
.scroll-hint i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:sh 2s infinite}
@keyframes sh{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* hidden states only when animation is active */
.anim .split .ch{opacity:0;transform:translateY(60%) rotate(4deg)}
.anim [data-hero-in]{opacity:0;transform:translateY(20px)}
.anim .hv-float,.anim .hv-ring{opacity:0}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg2);padding:16px 0;white-space:nowrap}
.mq-track{display:inline-flex;animation:mq 40s linear infinite}
.mq-track span{font-family:var(--serif);font-size:18px;letter-spacing:.4em;color:var(--gold);opacity:.8;padding-right:1em}
@keyframes mq{to{transform:translateX(-50%)}}

/* story: default (static) layout */
.story{background:linear-gradient(var(--bg2),var(--bg));position:relative}
.story-stage{width:min(1120px,100% - 48px);margin-inline:auto;padding:80px 0}
.story-head{margin-bottom:24px}
.story-visual{position:relative;height:min(70vw,420px);margin-bottom:40px;display:grid;place-items:center}
.story-visual>*{position:absolute}
.sv-engrave{width:70%;max-width:420px;opacity:.25;left:50%;top:50%;translate:-50% -50%}
.sv-ring{width:min(60%,360px);aspect-ratio:1;border-radius:50%;border:1px solid var(--line);box-shadow:0 0 100px rgba(120,24,40,.35);left:50%;top:50%;translate:-50% -50%}
.sv-apple{width:min(46%,300px);left:50%;top:50%;translate:-50% -50%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.sv-photo{width:min(26%,150px);border:1px solid var(--line);padding:5px;background:#17110e;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.sv-photo figcaption{font-size:10px;letter-spacing:.2em;color:var(--mute);text-align:center;padding-top:4px}
.sv-photo.pa{right:4%;top:6%;rotate:5deg}.sv-photo.pb{left:4%;bottom:4%;rotate:-6deg}
.story-chapters{display:grid;gap:36px}
.chapter .ch-no{font-family:var(--serif);font-size:14px;color:var(--gold);letter-spacing:.3em}
.chapter h2{font-family:var(--serif);font-size:clamp(30px,5vw,56px);letter-spacing:.08em;margin:6px 0 12px}
.chapter p{color:var(--mute);max-width:30em;font-size:16px}
/* story: pinned (scroll-driven) layout, only when .pinned */
.story.pinned .story-stage{height:100vh;height:100svh;padding:0;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;width:100%}
.story.pinned .story-head{position:absolute;left:max(24px,calc((100vw - 1120px)/2));top:calc(var(--nav-h) + 16px);margin:0;z-index:3}
.story.pinned .story-visual{position:absolute;inset:0 0 0 45%;height:auto;margin:0;perspective:1200px}
.story.pinned .sv-engrave{width:min(70vh,52vw)}
.story.pinned .sv-ring{width:min(54vh,40vw)}
.story.pinned .sv-apple{width:min(40vh,30vw);max-width:none}
.story.pinned .sv-photo{width:min(24vh,17vw)}
.story.pinned .sv-photo.pa{right:6%;top:16%}.story.pinned .sv-photo.pb{left:4%;bottom:12%}
.story.pinned .story-chapters{position:relative;display:block;height:100%;grid-column:1;margin-left:max(24px,calc((100vw - 1120px)/2))}
.story.pinned .chapter{position:absolute;left:0;top:50%;translate:0 -50%;width:min(460px,100%)}

/* products */
.products{background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(90,22,32,.25),transparent 70%),var(--bg)}
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;perspective:1600px}
.prod-grid-3{grid-template-columns:repeat(3,1fr);gap:22px}
.prod-grid-3 .prod{height:520px}
.prod-grid-3 .prod-info h3{font-size:24px}
.prod-grid-3 .prod-info{padding:6px 22px 24px}
.prod-grid-3 .face.back{padding:28px 22px}
.prod-badge{position:absolute;top:16px;right:16px;z-index:3;font-size:11px;letter-spacing:.28em;color:#1a120a;background:linear-gradient(135deg,#c8e08a,var(--brand-green));padding:5px 12px;border-radius:999px;font-weight:600}
.gift-media,.cherry-media{background:radial-gradient(circle at 50% 50%,rgba(201,168,106,.12),transparent 62%)}
.gift-media img,.cherry-media img{width:78%;max-height:72%;object-fit:contain;border-radius:10px;filter:drop-shadow(0 24px 28px rgba(0,0,0,.55));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.prod:hover .gift-media img,.prod:hover .cherry-media img{transform:scale(1.04)}
.prod{height:540px;position:relative}
.prod-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.prod.flipped .prod-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,#1a1411,#0f0b0a);overflow:hidden;display:flex;flex-direction:column}
.face.back{transform:rotateY(180deg);padding:40px 34px;justify-content:center;gap:18px}
.face.back h3{font-family:var(--serif);font-size:28px;color:var(--gold2);letter-spacing:.1em}
.face.back li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--mute);font-size:15px}
.face.back li b{display:block;color:var(--gold);font-weight:500;font-size:12px;letter-spacing:.25em;margin-bottom:2px}
.prod-media{flex:1;display:grid;place-items:center;position:relative;min-height:0;padding:20px}
.apple-media{background:radial-gradient(circle at 50% 50%,rgba(140,28,46,.38),transparent 62%)}
.apple-media img{width:62%;filter:drop-shadow(0 28px 30px rgba(0,0,0,.6));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.prod:hover .apple-media img{transform:scale(1.07) rotate(-3deg)}
.prod-info{padding:6px 34px 30px}
.prod-info h3{font-family:var(--serif);font-size:30px;letter-spacing:.1em}
.prod-info p{color:var(--mute);margin:4px 0 14px}
.link-btn{color:var(--gold2);font-size:14px;letter-spacing:.12em;border-bottom:1px solid var(--line);padding-bottom:2px}
.link-btn i{font-style:normal;display:inline-block;transition:transform .6s}.link-btn:hover i{transform:rotate(180deg)}
.shine{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,240,200,.16) 50%,transparent 65%);transform:translateX(-130%)}
.prod:hover .shine{transform:translateX(130%);transition:transform 1.1s}
/* gift card */
.card-media{background:radial-gradient(circle at 50% 50%,rgba(201,168,106,.14),transparent 62%);perspective:900px}
.gcard-wrap{width:min(78%,360px);aspect-ratio:1.586;transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.gcard{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#2b1218 0%,#150c0e 55%,#241a10 100%);box-shadow:0 30px 60px rgba(0,0,0,.65),inset 0 0 0 1px rgba(201,168,106,.55);padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;transform:translateZ(30px)}
.gc-eng{position:absolute;right:-8%;bottom:-30%;width:62%;opacity:.28;max-width:none}
.gc-top{display:flex;justify-content:space-between;align-items:baseline;position:relative}
.gc-brand{font-family:var(--serif);font-size:20px;letter-spacing:.3em;color:var(--gold2)}
.gc-type{font-size:12px;letter-spacing:.3em;color:var(--gold)}
.gc-chip{width:44px;height:32px;border-radius:7px;background:linear-gradient(135deg,#e8d3a0,#a98441);position:relative;opacity:.9}
.gc-no{font-size:15px;white-space:nowrap;letter-spacing:.14em;color:var(--gold2);position:relative;font-variant-numeric:tabular-nums}
.gc-glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,244,214,.34),transparent 55%);mix-blend-mode:screen;pointer-events:none}

/* why */
.why{background:var(--bg2)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why-item{padding:34px 26px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(170deg,rgba(201,168,106,.06),transparent);transition:transform .4s,border-color .4s}
.why-item:hover{transform:translateY(-6px);border-color:var(--gold)}
.why-item svg{width:46px;height:46px;color:var(--gold);margin-bottom:22px}
.why-item h3{font-family:var(--serif);font-size:22px;letter-spacing:.14em;margin-bottom:6px}
.why-item p{color:var(--mute);font-size:14.5px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(44px,7vw,84px);line-height:1;color:var(--gold2);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;color:var(--mute);font-size:14px}


/* cert band inside why */
.cert-band{margin-top:56px;display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center;padding:28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(120deg,rgba(141,198,63,.08),rgba(201,168,106,.05))}
.cert-band img{width:100%;border-radius:14px;background:#0f0c0a}
.cert-band-copy h3{font-family:var(--serif);font-size:26px;letter-spacing:.1em;color:var(--gold2);margin:8px 0 10px}
.cert-band-copy p{color:var(--mute);font-size:14.5px;margin-bottom:14px;max-width:36em}

/* certs section */
.certs{background:radial-gradient(ellipse 50% 40% at 50% 0%,rgba(141,198,63,.08),transparent 70%),var(--bg)}
.certs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cert-card{padding:28px 22px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(170deg,rgba(201,168,106,.06),transparent);border-top:2px solid var(--brand-green)}
.cert-card h3{font-family:var(--serif);font-size:18px;letter-spacing:.12em;color:var(--gold2);margin-bottom:8px}
.cert-card p{color:var(--mute);font-size:13.5px}
.certs-note{margin-top:28px;color:var(--mute);font-size:13px;letter-spacing:.04em}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
.info>div{padding:20px 0;border-bottom:1px solid var(--line)}
.info dt{font-size:12px;letter-spacing:.3em;color:var(--gold);margin-bottom:4px}
.info dd{font-size:18px}
.info dd a{border-bottom:1px solid var(--line)}
.qrs{display:flex;gap:24px;flex-wrap:wrap}
.qr{text-align:center;font-size:13px;color:var(--mute)}
.qr-box{width:150px;height:150px;border:1px dashed var(--gold);border-radius:14px;display:grid;place-items:center;color:var(--gold);font-size:13px;line-height:1.6;background:repeating-linear-gradient(45deg,rgba(201,168,106,.05) 0 8px,transparent 8px 16px);margin-bottom:8px}
.qr-box em{font-style:normal;color:var(--mute);font-size:11px;letter-spacing:.2em}
.qr-box img{width:100%;height:100%;object-fit:contain;border-radius:12px;background:#fff}
.qr-box.has-img{border-style:solid;padding:6px;background:#fff}
.qr-box.big{width:220px;height:220px;margin:18px auto}

/* footer */
.footer{border-top:1px solid var(--line);padding:44px 0 56px;text-align:center;color:var(--mute);font-size:13px;background:var(--bg)}
.footer .f-line{margin-bottom:6px}
.f-rec a:hover{color:var(--gold2)}
.sep{margin:0 10px;opacity:.5}
.f-support{margin-top:14px;font-size:12px;opacity:.55;letter-spacing:.08em}

/* modal */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(5,4,3,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:24px}
.modal[hidden]{display:none}
.modal-card{position:relative;background:#140f0d;border:1px solid var(--line);border-radius:22px;padding:34px 32px;text-align:center;max-width:340px;width:100%;animation:pop .45s cubic-bezier(.2,.8,.2,1)}
.modal-card h3{font-family:var(--serif);letter-spacing:.2em;font-size:22px;color:var(--gold2)}
.modal-card p{font-size:13px;color:var(--mute)}
.modal-x{position:absolute;right:14px;top:8px;font-size:28px;color:var(--mute)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.96)}}

/* failsafe: if scripts break, show everything */
.nofx #loader{display:none!important}
.nofx .split .ch,.nofx [data-hero-in],.nofx .hv-float,.nofx .hv-ring,.nofx [data-reveal]{opacity:1!important;transform:none!important}

/* responsive */
@media (max-width:900px){
  .nav-links{display:none}
  .hero{align-items:center;padding-top:calc(var(--nav-h) + 4px);padding-bottom:40px}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-visual{order:1;max-width:min(380px,92vw);aspect-ratio:1/1;margin-top:0}
  .hero-copy{order:2;text-align:center}
  .hero-title{margin:10px 0 4px}
  .hero-sub{margin:12px 0 22px}
  .hero-cta{justify-content:center}
  .hero-cta .btn{padding:12px 24px}
  .hv-tag{font-size:11px;padding:4px 10px}
  .scroll-hint{display:none}
  .prod-grid,.prod-grid-3{grid-template-columns:1fr}
  .prod,.prod-grid-3 .prod{height:500px}
  .why-grid{grid-template-columns:1fr 1fr;gap:14px}
  .cert-band{grid-template-columns:1fr;gap:20px;text-align:center}
  .cert-band img{max-width:260px;margin-inline:auto}
  .certs-grid{grid-template-columns:1fr 1fr;gap:12px}
  .why-item{padding:24px 18px}
  .stats{grid-template-columns:1fr;gap:26px}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .qr-box{width:128px;height:128px}
  .story.pinned .story-stage{grid-template-columns:1fr}
  .story.pinned .story-visual{inset:calc(var(--nav-h) + 30px) 0 auto 0;height:46%}
  .story.pinned .sv-engrave{width:min(60vw,36vh)}
  .story.pinned .sv-ring{width:min(48vw,30vh)}
  .story.pinned .sv-apple{width:min(40vw,24vh)}
  .story.pinned .sv-photo{width:min(26vw,15vh)}
  .story.pinned .sv-photo.pa{right:4%;top:2%}.story.pinned .sv-photo.pb{left:4%;bottom:6%}
  .story.pinned .story-chapters{margin:0 24px;position:absolute;left:0;right:0;bottom:0;height:42%}
  .story.pinned .chapter{top:0;translate:0 0;width:100%}
  .story.pinned .story-head{top:calc(var(--nav-h) + 6px)}
}
@media (max-width:420px){.hero-title{font-size:clamp(52px,17vw,72px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #loader{display:none!important}
  .mq-track{transform:none}
  .anim .split .ch,.anim [data-hero-in],.anim .hv-float,.anim .hv-ring{opacity:1;transform:none}
}

@media (max-width:1100px){
  .prod-grid-3{grid-template-columns:1fr 1fr}
  .certs-grid{grid-template-columns:1fr 1fr}
}

/* hidden 属性一律生效（占位区、公安备案号未填时隐藏） */
[hidden]{display:none!important}

.btn.is-busy{opacity:.6;pointer-events:none}