:root { --coral:#ff5a36; --ink:#171515; --cream:#fffaf5; --muted:#6f6761; --line:#e5dad1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif; overflow-x:clip; }
button,a { font:inherit; } a { color:inherit; } button { cursor:pointer; }
.site-header { height:76px; display:flex; align-items:center; gap:28px; justify-content:space-between; padding:0 clamp(20px,4vw,64px); border-bottom:1px solid var(--line); background:rgba(255,250,245,.9); position:sticky; top:0; z-index:10; backdrop-filter:blur(14px); }
.brand { text-decoration:none; font-weight:900; letter-spacing:.08em; font-size:21px; white-space:nowrap; }.brand span { display:block; margin-top:2px; font-size:8px; letter-spacing:.18em; }
nav { display:flex; gap:28px; margin-left:auto; } nav a { text-decoration:none; font-size:13px; font-weight:700; } nav a:hover { color:var(--coral); }
.nav-action,.primary-button { border:0; background:var(--ink); color:var(--cream); padding:12px 15px; font-size:12px; font-weight:800; letter-spacing:.06em; }.nav-action span,.primary-button span { margin-left:12px; color:var(--coral); }.primary-button { padding:16px 20px; }.primary-button.light { background:var(--cream); color:var(--ink); }.primary-button.light span { color:var(--coral); }
.hero { min-height:min(720px,calc(100vh - 76px)); padding:clamp(28px,5vw,74px) clamp(20px,7vw,110px); background:var(--coral); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; }.hero:after { content:""; width:min(45vw,620px); aspect-ratio:1; position:absolute; top:-18%; right:-9%; border-radius:50%; background:#ffe3d7; }.hero:before { content:"DL"; position:absolute; right:6%; bottom:-17%; font-size:clamp(180px,32vw,540px); font-weight:900; line-height:1; letter-spacing:-.16em; color:var(--ink); opacity:.95; }.hero > * { position:relative; z-index:1; }.eyebrow,.section-label { font-size:11px; font-weight:900; letter-spacing:.15em; }.hero h1 { margin:48px 0; max-width:1000px; font-size:clamp(63px,11vw,154px); line-height:.83; letter-spacing:-.095em; }.hero h1 span { display:block; animation:hero-in .8s cubic-bezier(.2,.8,.2,1) both; }.hero h1 span:last-child { animation-delay:.12s; }.hero-bottom { display:flex; align-items:end; justify-content:space-between; gap:32px; }.hero-bottom p { font-size:clamp(14px,1.6vw,18px); font-weight:600; line-height:1.65; }
.marquee { overflow:hidden; padding:18px 0; background:var(--ink); color:var(--cream); font-size:14px; font-weight:900; white-space:nowrap; letter-spacing:.08em; }.marquee div { display:inline-block; animation:marquee 22s linear infinite; }
.section { padding:clamp(64px,10vw,148px) clamp(20px,7vw,110px); }.section-label { color:var(--coral); }.intro { display:grid; grid-template-columns:1fr 2fr; gap:40px; }.intro-copy h2,.growth h2,.stores h2,.partner h2 { margin:0; font-size:clamp(44px,6vw,84px); line-height:.95; letter-spacing:-.08em; }.intro-copy em { color:var(--coral); font-style:normal; }.intro-copy p { max-width:540px; margin:35px 0 0; color:var(--muted); font-size:16px; line-height:1.9; }
.growth { background:#f0ebe5; }.growth-heading { display:grid; grid-template-columns:1fr 1.5fr; gap:28px; }.growth-heading p { align-self:end; max-width:330px; color:var(--muted); line-height:1.7; }.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:56px; border-top:1px solid #cfc2b9; border-left:1px solid #cfc2b9; }.metric-card { min-height:230px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid #cfc2b9; border-bottom:1px solid #cfc2b9; }.metric-card span,.metric-card small { font-size:12px; font-weight:700; }.metric-card small,.data-note { color:var(--muted); }.metric-card strong { font-size:clamp(49px,6vw,86px); line-height:.9; letter-spacing:-.09em; }.metric-card strong i { color:var(--coral); font-style:normal; }.metric-card sup { font-size:.42em; }.metric-card.accent { background:var(--coral); }.metric-card.accent small { color:var(--ink); }.data-note { margin:18px 0 0; font-size:11px; }
.stores { background:var(--cream); }.stores-title { display:flex; justify-content:space-between; gap:32px; align-items:end; }.stores-title p { max-width:260px; color:var(--muted); line-height:1.7; }.store-list { display:grid; grid-template-columns:repeat(4,1fr); margin-top:54px; border-top:1px solid var(--line); }.store-card { min-height:190px; padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.store-card:first-child { border-left:1px solid var(--line); }.store-card span { color:var(--coral); font-size:12px; font-weight:900; }.store-card h3 { margin:58px 0 9px; font-size:20px; }.store-card p { margin:0; color:var(--muted); font-size:13px; }.store-card.open { background:var(--ink); color:var(--cream); }.store-card.open p { color:#ffad99; }
.partner { min-height:620px; display:grid; grid-template-columns:1fr 1fr; gap:44px; background:var(--coral); overflow:hidden; position:relative; }.partner-art { display:flex; align-items:center; justify-content:center; font-size:clamp(110px,18vw,270px); font-weight:900; letter-spacing:-.23em; line-height:.7; color:var(--ink); transform:rotate(-15deg); }.partner-copy { align-self:center; }.partner-copy h2 { margin:18px 0 26px; }.partner-copy p { max-width:360px; line-height:1.8; margin-bottom:30px; }
.site-footer { display:grid; grid-template-columns:1fr 1.4fr auto; align-items:end; gap:24px; padding:34px clamp(20px,4vw,64px); background:var(--ink); color:var(--cream); }.site-footer p { margin:0; color:#b9b0aa; font-size:12px; line-height:1.6; }.site-footer a { color:var(--cream); }
.qr-dialog { width:min(92vw,420px); padding:0; border:0; background:var(--cream); color:var(--ink); box-shadow:0 30px 90px rgba(0,0,0,.35); }.qr-dialog::backdrop { background:rgba(23,21,21,.7); backdrop-filter:blur(6px); }.qr-dialog-content { padding:42px; text-align:center; }.qr-dialog h2 { margin:9px 0 24px; font-size:31px; letter-spacing:-.06em; }.qr-dialog img { display:block; width:min(100%,260px); height:auto; margin:auto; }.qr-dialog p:last-child { color:var(--muted); font-size:13px; }.dialog-close { position:absolute; top:12px; right:15px; border:0; background:transparent; font-size:30px; line-height:1; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }.reveal.is-visible { opacity:1; transform:none; }
@keyframes hero-in { from { opacity:0; } to { opacity:1; } } @keyframes marquee { to { transform:translateX(-50%); } }
/* Scroll-driven editorial motion. JavaScript only updates these composited variables. */
[data-scroll-motion] { --motion-progress:0; --motion-x:0px; --motion-y:0px; --motion-rotate:0deg; --motion-opacity:1; }
.hero { isolation:isolate; }
.hero-grid { position:absolute!important; z-index:0!important; inset:0; opacity:.22; pointer-events:none; background-image:linear-gradient(rgba(23,21,21,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(23,21,21,.16) 1px,transparent 1px); background-size:clamp(48px,5vw,80px) clamp(48px,5vw,80px); mask-image:linear-gradient(90deg,#000,transparent 76%); transform:translate3d(var(--motion-grid-x,0px),0,0); }
.hero:after { transform:translate3d(var(--motion-orb-x,0px),var(--motion-orb-y,0px),0); transition:transform .12s linear; }
.hero:before { transform:translate3d(var(--motion-mark-x,0px),var(--motion-mark-y,0px),0); transition:transform .12s linear; }
.kinetic-title span { will-change:transform; }
.kinetic-title span:first-child { transform:translate3d(var(--hero-left,0px),0,0); }
.kinetic-title span:last-child { transform:translate3d(var(--hero-right,0px),0,0); }
.story-copy { transform:translate3d(var(--motion-x),0,0); transition:transform .14s linear; }
.story-copy em { display:inline-block; position:relative; }.story-copy em::after { content:""; position:absolute; left:0; right:0; bottom:.04em; height:.12em; background:var(--coral); transform-origin:left; transform:scaleX(var(--motion-progress)); }
.metric-card { opacity:0; transform:translate3d(0,36px,0) rotate(-1.5deg); will-change:transform,opacity; transition:transform .52s cubic-bezier(.2,.8,.2,1),opacity .42s ease; }.metric-grid.is-visible .metric-card { opacity:1; transform:none; }
.metric-grid.is-visible .metric-card:nth-child(2) { transition-delay:.09s; }.metric-grid.is-visible .metric-card:nth-child(3) { transition-delay:.18s; }
.store-card { opacity:0; transform:translate3d(34px,24px,0) skewX(-2deg); will-change:transform,opacity; transition:transform .46s cubic-bezier(.2,.8,.2,1),opacity .36s ease; }.store-list.is-visible .store-card { opacity:1; transform:none; }
.store-list.is-visible .store-card:nth-child(2) { transition-delay:.08s; }.store-list.is-visible .store-card:nth-child(3) { transition-delay:.16s; }.store-list.is-visible .store-card:nth-child(4) { transition-delay:.24s; }
.partner-art { transform:translate3d(var(--motion-x),0,0) rotate(var(--motion-rotate)); will-change:transform; transition:transform .14s linear; }
.partner-copy { transform:translate3d(var(--motion-x),0,0); transition:transform .14s linear; }
@media (max-width:760px) { .site-header { height:64px; }.site-header nav { display:none; }.nav-action { padding:10px; }.hero { min-height:620px; }.hero h1 { margin:30px 0; }.hero-bottom { align-items:start; flex-direction:column; }.intro,.growth-heading,.partner { grid-template-columns:1fr; }.metric-grid,.store-list { grid-template-columns:1fr 1fr; }.store-card:nth-child(3) { border-left:1px solid var(--line); }.stores-title { align-items:start; flex-direction:column; }.partner { min-height:auto; }.partner-art { min-height:230px; }.site-footer { grid-template-columns:1fr; }.section { padding-top:72px; padding-bottom:72px; } .hero-grid { transform:translate3d(var(--motion-grid-x,0px),0,0); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }