:root{--night:#0C0F1C;--black:#07080D;--card:#151929;--dawn:#F6F0E6;--ink:#17150F;--gold:#EDB45E;--goldText:#8A5A14;--fg:#F3EEE6;--mutedDark:#B5AFA6;--mutedLight:#595349;--ease:cubic-bezier(.16,1,.3,1);--track:-0.045em}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--fg);font-family:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.5;overflow-x:hidden}
html[lang|="zh"] body{font-family:-apple-system,'PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif}
html[lang|="zh"]{--track:0}
a{color:var(--gold)}a:hover{color:var(--fg)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
img{max-width:100%}
cite{font-style:normal}
.skip{position:absolute;left:-9999px;top:12px;z-index:20;background:var(--gold);color:var(--ink);padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{left:16px}
.wrap{max-width:1000px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.ref{margin:0;font-size:16px;font-weight:600;color:var(--gold)}
h1,h2,h3,p{margin:0}

/* header */
.top{position:relative;z-index:5;max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--fg);font-size:22px;font-weight:700;letter-spacing:-0.03em}
.brand img{width:40px;height:40px;border-radius:10px;display:block}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;border-radius:999px;background:var(--card);border:1px solid rgba(243,238,230,.28);font-size:14px;color:var(--fg)}
.lang summary::-webkit-details-marker{display:none}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;background:var(--card);border:1px solid rgba(243,238,230,.18);border-radius:16px;min-width:180px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.lang li a{display:block;padding:10px 14px;border-radius:10px;color:var(--fg);text-decoration:none;font-size:15px}
.lang li a:hover,.lang li a[aria-current]{background:rgba(237,180,94,.14);color:var(--gold)}

/* hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;padding:48px 24px 96px;text-align:center}
.hero .sky{position:absolute;inset:0;width:100%;height:100%}
.moon{position:absolute;top:3%;right:9%;width:clamp(44px,6vw,76px);height:clamp(44px,6vw,76px);border-radius:50%;background:var(--gold);animation:glow 6s ease-in-out infinite}
.hero .wrap{position:relative;gap:28px;max-width:1080px}
.hero h1{font-size:clamp(46px,8vw,116px);line-height:1;font-weight:800;letter-spacing:var(--track)}
.hero .sub{font-size:clamp(20px,2.6vw,30px);line-height:1.35;color:var(--mutedDark)}
.cue{margin-top:24px;display:inline-flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;color:var(--mutedDark);text-decoration:none;font-size:14px}
.w{display:inline-block;animation:word 1.1s var(--ease) both}
.late{animation:fade 1.6s var(--ease) 1.1s both}
.star{animation:twinkle 4s ease-in-out infinite}

/* story */
.s-anhelo{background:var(--black);padding:clamp(96px,16vw,200px) 24px}
.s-anhelo .wrap{gap:22px}
.s-anhelo h2{font-size:clamp(30px,4vw,52px);font-weight:600;color:var(--mutedDark);letter-spacing:-0.03em}
.big{font-size:clamp(44px,7vw,100px);line-height:1;font-weight:800;letter-spacing:var(--track)}
.s-abismo{background:var(--night);padding:clamp(96px,14vw,180px) 24px 0}
.s-abismo .wrap{gap:18px}
.s-abismo h2{font-size:clamp(40px,6vw,84px);line-height:1.02;font-weight:700;letter-spacing:var(--track)}
.s-abismo .muted{margin-top:28px;font-size:clamp(22px,2.8vw,34px);line-height:1.25;color:var(--mutedDark);max-width:20em}
.cliffs{display:block;width:100%;height:clamp(160px,22vw,300px);margin-top:64px}
.s-amanecer{background:linear-gradient(#151929 0%,#151929 18%,#2B2433 52%,#8C6A4A 80%,#F6F0E6 100%);padding:clamp(96px,14vw,180px) 24px clamp(140px,20vw,260px)}
.s-amanecer .wrap{gap:18px}
.s-amanecer .pre{font-size:clamp(26px,3.4vw,44px);line-height:1.2;font-weight:600;letter-spacing:-0.03em}
.s-amanecer h2{font-size:clamp(52px,9vw,132px);line-height:.95;font-weight:800;color:var(--gold);letter-spacing:var(--track)}
.s-amanecer .ref{color:var(--fg)}
.bridge{display:block;width:min(100%,960px);margin-top:40px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(#000 70%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(#000 70%,transparent 100%);mask-composite:intersect}
.bridge .drop{transform-box:view-box;transform-origin:667px 348px}
.s-cruzar{background:var(--dawn);color:var(--ink);padding:0 24px clamp(96px,12vw,160px)}
.s-cruzar .wrap{gap:16px}
.s-cruzar h2{font-size:clamp(48px,8vw,116px);line-height:.96;font-weight:800;letter-spacing:var(--track)}
.s-cruzar .d2{font-size:clamp(24px,3vw,38px);font-weight:600;color:var(--mutedLight)}
.s-cruzar .ref{color:var(--goldText)}

/* app showcase */
.s-app{background:var(--gold);color:var(--ink);padding:clamp(88px,12vw,152px) 0 clamp(72px,10vw,128px)}
.s-app .wrap{padding:0 24px;gap:14px}
.s-app .kicker{font-size:16px;font-weight:700;color:#4A3510}
.s-app h2{font-size:clamp(44px,7vw,96px);line-height:.98;font-weight:800;letter-spacing:var(--track)}
.s-app h2.h2b{font-size:clamp(38px,5.6vw,76px);line-height:1}
.s-app .txt{font-size:clamp(19px,2.2vw,24px);color:#3D2C0E;max-width:26em}
.s-app .daily{margin-top:clamp(80px,10vw,128px)}
.shots{margin-top:48px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 24px 36px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shots::-webkit-scrollbar{display:none}
.shots ul{display:flex;gap:28px;list-style:none;margin:0 auto;padding:0;width:max-content}
.shots li{flex:0 0 min(72vw,300px);scroll-snap-align:center}
.shot{display:block;width:100%;height:auto;aspect-ratio:1179/2556;border-radius:32px;box-shadow:0 30px 70px rgba(23,21,15,.28)}
@media (min-width:900px){.shots li:nth-child(odd){transform:translateY(28px)}}

/* share */
.s-share{background:var(--night);padding:clamp(96px,14vw,180px) 24px}
.s-share .row{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:56px 72px}
.s-share .col{flex:1 1 440px;display:flex;flex-direction:column;gap:18px}
.s-share .pre{font-size:clamp(24px,3vw,36px);line-height:1.2;font-weight:600;color:var(--mutedDark);letter-spacing:-0.02em}
.s-share h2{font-size:clamp(56px,9vw,128px);line-height:.92;font-weight:800;color:var(--gold);letter-spacing:var(--track)}
.s-share .txt{margin-top:8px;font-size:20px;color:var(--mutedDark);max-width:24em}
.bubble{margin-top:16px;max-width:440px;background:var(--card);border:1px solid rgba(237,180,94,.35);border-radius:26px 26px 26px 6px;padding:22px 26px;font-size:20px;line-height:1.4}
.note{padding-left:8px;font-size:14px;color:var(--mutedDark)}
.s-share .pic{flex:0 1 300px;max-width:300px}
.s-share .pic .shot{box-shadow:0 30px 90px rgba(237,180,94,.18)}

/* final */
.s-final{background:var(--dawn);color:var(--ink)}
.s-final .wrap{padding:clamp(88px,12vw,152px) 24px;gap:16px}
.s-final .app-icon{width:120px;height:120px;border-radius:27px;margin-bottom:12px;box-shadow:0 24px 60px rgba(23,21,15,.22)}
.s-final h2{font-size:clamp(40px,6vw,80px);line-height:1;font-weight:800;letter-spacing:var(--track)}
.s-final p{font-size:17px;color:var(--mutedLight)}
.stores{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.stores li{display:flex;flex-direction:column;justify-content:center;text-align:left;min-height:58px;padding:6px 24px;border-radius:14px;background:var(--night);color:var(--fg)}
.stores small{font-size:12px}.stores b{font-size:19px;line-height:1.1}
.s-final .trust{margin-top:6px;font-size:15px}

footer{background:var(--dawn);color:var(--mutedLight);border-top:1px solid rgba(23,21,15,.1)}
footer .in{max-width:1200px;margin:0 auto;padding:20px 24px 36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;font-size:14px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
footer a{color:var(--goldText);display:inline-block;padding:12px 0}

/* document pages (privacy, 404) */
.doc{background:var(--dawn);color:var(--ink);min-height:100vh}
.doc .top .brand{color:var(--ink)}
.doc .lang summary{background:#FFFDF8;color:var(--ink);border-color:rgba(23,21,15,.2)}
.doc .lang ul{background:#FFFDF8;border-color:rgba(23,21,15,.14)}
.doc .lang li a{color:var(--ink)}
.doc main{max-width:760px;margin:0 auto;padding:48px 24px 96px}
.doc h1{font-size:clamp(40px,6vw,64px);line-height:1.02;font-weight:800;letter-spacing:var(--track)}
.doc .meta{margin-top:12px;font-size:14px;color:var(--mutedLight)}
.doc .lead{margin-top:28px;font-size:22px;line-height:1.4}
.doc h2{margin-top:44px;font-size:24px;font-weight:700;letter-spacing:-0.02em}
.doc ul.list{margin:12px 0 0;padding-left:22px}
.doc ul.list li{margin-top:8px;font-size:17px;color:#2E2A22}
.doc a{color:var(--goldText)}
.doc .back{display:inline-block;margin-top:56px;font-weight:700}

/* motion */
@keyframes word{from{opacity:0;transform:translateY(26px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes glow{0%,100%{box-shadow:0 0 60px 10px rgba(237,180,94,.28)}50%{box-shadow:0 0 90px 22px rgba(237,180,94,.42)}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes drop{0%{opacity:0;transform:translateY(-120px) rotate(-10deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes sunrise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.js .rv{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity 1s var(--ease),transform 1.3s var(--ease),filter 1s var(--ease)}
.js .rv.in{opacity:1;transform:none;filter:none}
.js .bridge .drop,.js .bridge .sun{opacity:0}
.js .bridge.in .drop{animation:drop 1.6s var(--ease) .5s both}
.js .bridge.in .sun{animation:sunrise 2s var(--ease) both}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .w,.late,.moon,.star,.js .bridge.in .drop,.js .bridge.in .sun{animation:none}
 .js .rv{opacity:1;transform:none;filter:none;transition:none}
 .js .bridge .drop,.js .bridge .sun{opacity:1}
}