/* ===================== Tokens ===================== */
:root {
  --ink: #1b1230;
  --ink-2: #2a1d45;
  --plum: #3d2463;
  --ember: #ff7a45;
  --ember-2: #ff5e3a;
  --peach: #ffb26b;
  --gold: #ffd29a;
  --cream: #fff6ec;
  --cream-2: #fbefe0;
  --sand: #f3e5d3;
  --sage: #5f9e74;
  --text: #2a2236;
  --muted: #6d6478;
  --line: rgba(27, 18, 48, .1);
  --radius: 22px;
  --shadow: 0 20px 50px -20px rgba(27, 18, 48, .35);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.05; margin: 0; letter-spacing: -.02em; }
h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h3 { font-size: 1.45rem; letter-spacing: -.01em; }
p { margin: 0; }
.ital { font-style: italic; font-weight: 400; }
.container { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: 600 1rem/1 var(--sans); text-decoration: none; border: 0; cursor: pointer;
  padding: .95rem 1.4rem; border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn svg { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--ember) 0%, var(--ember-2) 100%);
  box-shadow: 0 10px 30px -10px rgba(255, 94, 58, .8), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(255, 94, 58, .9); }
.btn--ghost { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); backdrop-filter: blur(8px); }
.btn--ghost:hover { background: rgba(255, 255, 255, .16); }
.btn--sm { padding: .7rem 1.1rem; font-size: .9rem; }
.btn--lg { padding: 1.1rem 1.7rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ===================== Nav ===================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background .3s, box-shadow .3s, padding .3s; padding: 18px 0;
}
.nav.is-scrolled { background: rgba(27, 18, 48, .78); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); padding: 10px 0; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; }
.logo svg { width: 36px; height: 36px; }
.logo span { font: 700 1.6rem/1 var(--serif); letter-spacing: -.03em; }
.logo em { font: 500 .78rem/1 var(--sans); font-style: normal; color: var(--peach); border-left: 1px solid rgba(255,255,255,.25); padding-left: 10px; margin-left: 4px; text-transform: uppercase; letter-spacing: .12em; }
.nav__links { display: flex; gap: 30px; }
.nav__links a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .94rem; font-weight: 500; transition: color .2s; }
.nav__links a:hover { color: #fff; }

.nav__right { display: flex; align-items: center; gap: 12px; }
.nav__cta-short { display: none; }
.nav__login { white-space: nowrap; gap: 6px; }
.nav__login svg { width: 16px; height: 16px; }

/* Language picker: pill shows the current language; a transparent native <select> on top opens the list */
.lang {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px 0 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px); color: #fff;
  font: 600 .85rem/1 "Inter", "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", "Malgun Gothic", sans-serif;
  transition: background .2s;
}
.lang:hover { background: rgba(255, 255, 255, .18); }
.lang:focus-within { outline: 2px solid var(--peach); outline-offset: 2px; }
.lang__cur { min-width: 1.3em; text-align: center; }
.lang svg { width: 14px; height: 14px; opacity: .8; }
.lang__select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; font-size: 16px; }
.lang__select option { color: #1b1230; }

/* CJK typography (Chinese, Japanese, Korean) */
html[lang="zh-Hans"] { --serif: "Fraunces", "Noto Serif SC", "Songti SC", serif; --sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
html[lang="zh-Hant"] { --serif: "Fraunces", "Noto Serif TC", "Songti TC", serif; --sans: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
html[lang="ja"] { --serif: "Fraunces", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; }
html[lang="ko"] { --serif: "Fraunces", "Noto Serif KR", "AppleMyungjo", serif; --sans: "Inter", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
html[lang="ko"] body { word-break: keep-all; }
html[lang="ja"] body { word-break: auto-phrase; }
html:is([lang="ja"], [lang="ko"]) em { font-style: normal; font-weight: 600; }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) :is(h1, h2, h3) { letter-spacing: .01em; line-height: 1.22; font-weight: 700; }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) .ital { font-style: normal; font-weight: 500; color: var(--ember-2); }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) :is(.earn, .join) .ital { color: var(--peach); }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) .hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) body { line-height: 1.8; }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) .marquee__row span { font-style: normal; }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) .logo em { letter-spacing: .2em; }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) :is(.kicker, .eyebrow) { letter-spacing: .12em; }

/* ===================== Hero ===================== */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #140c26 0%, #2a1748 38%, #6b2d5e 68%, #d9534a 90%, #ff8a4c 100%);
  padding: 150px 0 170px;
  min-height: 100vh;
}
.hero__sky { position: absolute; inset: 0; pointer-events: none; }
.sun {
  position: absolute; left: 62%; bottom: -260px; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffe3a8 0%, #ffb26b 30%, #ff7a45 55%, rgba(255, 94, 58, 0) 72%);
  filter: blur(2px); animation: sunset 14s ease-in-out infinite alternate;
}
@keyframes sunset { from { transform: translate(-50%, -40px) scale(1); } to { transform: translate(-50%, 30px) scale(1.06); } }
.glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.glow--1 { width: 520px; height: 520px; background: #7b3fa0; top: -120px; left: -140px; animation: drift 18s ease-in-out infinite alternate; }
.glow--2 { width: 420px; height: 420px; background: #ff5e3a; bottom: 80px; left: 20%; opacity: .35; animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(80px, 60px) scale(1.15); } }
#embers { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--gold);
  padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 210, 154, .25);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #7dffa8; box-shadow: 0 0 0 0 rgba(125, 255, 168, .7); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(125, 255, 168, 0); } 100% { box-shadow: 0 0 0 0 rgba(125, 255, 168, 0); } }
.hero h1 { font-size: clamp(3rem, 7.4vw, 6.2rem); margin: 26px 0 24px; font-weight: 600; }
.hl {
  background: linear-gradient(90deg, var(--gold), var(--peach) 45%, var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: rgba(255, 255, 255, .82); max-width: 34rem; }
.lede strong { color: #fff; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 30px; }
.hero__proof { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; color: rgba(255, 255, 255, .7); font-size: .92rem; }
.hero__proof b { color: #fff; font-family: var(--serif); font-size: 1.15rem; margin-right: 4px; }

.hero__visual { position: relative; aspect-ratio: 1 / 1.05; }
.hero__visual figure { margin: 0; position: absolute; overflow: hidden; border-radius: 28px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo { inset: 6% 8% 10% 10%; }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(255, 122, 69, .15), transparent 50%, rgba(27, 18, 48, .35)); }
.hero__thumb { width: 34%; aspect-ratio: 1; border: 5px solid rgba(255, 255, 255, .9); }
.hero__thumb--a { top: 0; right: 0; transform: rotate(6deg); }
.hero__thumb--b { bottom: 0; left: 0; width: 30%; transform: rotate(-7deg); }

.float-card {
  position: absolute; display: flex; align-items: center; gap: 12px; z-index: 3;
  padding: 14px 16px; border-radius: 18px; color: var(--ink);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(16px);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55);
  animation: bob 6s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-10px); } }
.float-card--order { top: 18%; left: -6%; animation-delay: -1s; min-width: 270px; }
.float-card--stat { bottom: 16%; right: -4%; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 180px; animation-delay: -3s; }
.float-card--clock { bottom: 2%; left: 30%; color: #fff; background: rgba(27, 18, 48, .78); animation-delay: -4.5s; }
.float-card--clock svg { width: 44px; height: 44px; }
.clock-ring { animation: tick 8s linear infinite; }
@keyframes tick { from { stroke-dashoffset: 119.4; } to { stroke-dashoffset: 0; } }
.fc__icon { width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.3rem; border-radius: 12px; background: #fff1e6; }
.fc__title { font-weight: 700; font-size: .95rem; }
.fc__sub { font-size: .8rem; color: var(--muted); }
.fc__amt { margin-left: auto; font: 700 1.1rem var(--serif); color: var(--sage); }
.fc__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.float-card--clock .fc__label { color: rgba(255, 255, 255, .6); }
.fc__big { font: 700 1.6rem/1.1 var(--serif); }
.fc__mid { font-weight: 600; font-size: .95rem; }
.fc__bar { width: 100%; height: 6px; border-radius: 9px; background: var(--sand); overflow: hidden; margin-top: 6px; }
.fc__bar span { display: block; height: 100%; width: 70%; border-radius: inherit; background: linear-gradient(90deg, var(--peach), var(--ember)); transition: width .8s var(--ease); }
.pop { animation: pop .5s var(--ease); }
@keyframes pop { 40% { transform: scale(1.08); } }

.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.hero__wave svg { width: 100%; height: 110px; }

/* ===================== Marquee ===================== */
.marquee { background: var(--cream); padding: 22px 0 10px; overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: scroll 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__row { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; }
.marquee__row span { font: 500 clamp(1.4rem, 2.6vw, 2.1rem) var(--serif); font-style: italic; color: var(--ink); }
.marquee__row i { font-style: normal; color: var(--ember); font-size: 1rem; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ===================== Sections ===================== */
.section { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.section__head { max-width: 640px; margin-bottom: 64px; }
.section__head--center { text-align: center; margin-inline: auto; }
.section__head--center .section__sub { margin-inline: auto; }
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ember-2); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.kicker--light { color: var(--peach); }
.section__sub { font-size: 1.12rem; color: var(--muted); margin-top: 22px; max-width: 36rem; }

/* ===================== Steps ===================== */
.steps { display: grid; gap: clamp(60px, 9vw, 110px); }
.step { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.step--flip .step__media { order: 2; }
.step__media { position: relative; }
.step__media > img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow); }
.step__num { font: 400 5rem/1 var(--serif); font-style: italic; color: transparent; -webkit-text-stroke: 1.5px var(--ember); display: block; margin-bottom: 8px; }
.step__body h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 16px; }
.step__body p { color: var(--muted); font-size: 1.06rem; max-width: 30rem; }

.mock {
  position: absolute; right: -24px; bottom: -32px; width: min(300px, 78%);
  background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 30px 60px -24px rgba(27, 18, 48, .5);
  font-size: .9rem;
}
.step--flip .mock { right: auto; left: -24px; }
.mock__head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 12px; gap: 8px; }
.pill { font-size: .72rem; padding: 4px 10px; border-radius: 999px; background: #fff1e6; color: var(--ember-2); font-weight: 700; white-space: nowrap; }
.pill--live { background: #e7f6ec; color: var(--sage); }
.bagrow { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); color: var(--muted); }
.bagrow b { color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.bagrow .accent { color: var(--ember-2); font-family: var(--serif); font-size: 1.1rem; }
.mini { width: 26px; height: 26px; border-radius: 8px; border: 0; background: var(--cream-2); font: 700 1rem var(--sans); cursor: pointer; color: var(--ink); transition: background .2s; }
.mini:hover { background: var(--sand); }
.mock__days { display: flex; gap: 6px; margin-top: 10px; }
.mock__days span { flex: 1; text-align: center; font-size: .72rem; font-weight: 700; padding: 6px 0; border-radius: 8px; background: var(--cream-2); color: var(--muted); }
.mock__days .on { background: var(--ink); color: #fff; }

.mock--orders ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mock--orders li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--cream); }
.mock--orders li.new { animation: slidein .6s var(--ease); background: #fff1e6; }
@keyframes slidein { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
.mock--orders code { font: 700 .85rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; background: var(--ink); color: #fff; padding: 4px 8px; border-radius: 6px; }
.mock--orders em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--sage); }

.mock--code { text-align: center; }
.mock__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.codebox { display: flex; justify-content: center; gap: 8px; margin: 8px 0 12px; }
.codebox span {
  width: 46px; height: 56px; display: grid; place-items: center; border-radius: 12px;
  font: 700 1.6rem ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ink); color: #fff;
  transition: transform .4s var(--ease), background .3s;
}
.codebox--you span { background: var(--cream-2); color: var(--ink); }
.codebox.flip span { animation: flip .5s var(--ease) both; }
.codebox.flip span:nth-child(2) { animation-delay: .06s; }
.codebox.flip span:nth-child(3) { animation-delay: .12s; }
.codebox.flip span:nth-child(4) { animation-delay: .18s; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.codebox--you.matched span { background: #e7f6ec; color: var(--sage); }
.match { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; color: var(--sage); opacity: .25; transition: opacity .3s; }
.match.on { opacity: 1; }
.match svg { width: 18px; height: 18px; }

/* ===================== Calculator ===================== */
.earn { color: #fff; overflow: hidden; }
.earn__bg { position: absolute; inset: 0; background: radial-gradient(1000px 600px at 85% 20%, rgba(255, 122, 69, .35), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(123, 63, 160, .45), transparent 60%), var(--ink); }
.earn__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.earn .section__sub { color: rgba(255, 255, 255, .7); }
.slider { margin-top: 34px; }
.slider label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; margin-bottom: 14px; color: rgba(255, 255, 255, .88); }
.slider output { font: 700 1.5rem var(--serif); color: var(--gold); }
.slider__hint { margin-top: 10px; font-size: .9rem; color: rgba(255, 255, 255, .6); }
.slider__hint b { color: #fff; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 9px; background: linear-gradient(90deg, var(--peach), var(--ember)) 0 / var(--p, 50%) 100% no-repeat, rgba(255, 255, 255, .14); outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 6px solid var(--ember); box-shadow: 0 6px 20px rgba(255, 94, 58, .6); transition: transform .2s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 6px solid var(--ember); }
input[type=range]:focus-visible { box-shadow: 0 0 0 4px rgba(255, 178, 107, .35); }

.result-card {
  position: relative; border-radius: 32px; padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -40px rgba(0, 0, 0, .8);
  backdrop-filter: blur(12px);
}
.result-card__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--peach); }
.result-card__big { font: 600 clamp(4rem, 9vw, 6.6rem)/1 var(--serif); margin: 14px 0 26px; letter-spacing: -.04em; }
.result-card__big small { font: 500 1.1rem var(--sans); color: rgba(255, 255, 255, .6); letter-spacing: 0; margin-left: 6px; }
.result-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.result-card__row > div { padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); }
.mini-label { font-size: .78rem; color: rgba(255, 255, 255, .6); font-weight: 600; }
.mini-val { font: 600 1.8rem var(--serif); }
.result-card__impact { display: flex; align-items: center; gap: 16px; margin: 24px 0 18px; padding: 16px 18px; border-radius: 18px; background: rgba(95, 158, 116, .18); color: #d8f3df; }
.result-card__impact b { color: #fff; font-family: var(--serif); font-size: 1.2rem; }
.bag-viz { display: grid; grid-template-columns: repeat(6, 10px); gap: 3px; flex-shrink: 0; }
.bag-viz i { width: 10px; height: 10px; border-radius: 3px; background: #7fd39a; animation: grow .4s var(--ease) both; }
@keyframes grow { from { transform: scale(0); } }
.result-card__fine { font-size: .82rem; color: rgba(255, 255, 255, .55); }
.result-card__fine b { color: var(--gold); }

/* ===================== Demand ===================== */
.demand__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.ticks { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 22px; }
.ticks li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; color: var(--muted); }
.ticks li span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 700 1rem var(--serif); background: var(--ink); color: var(--gold); }
.ticks b { color: var(--ink); }
.demand__map { position: relative; }
.demand__map svg { width: 100%; height: auto; border-radius: 32px; box-shadow: var(--shadow); }
.ring { transform-origin: 260px 250px; animation: ripple 3.2s ease-out infinite; }
.ring--2 { animation-delay: 1.6s; }
@keyframes ripple { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.req { transform-box: fill-box; transform-origin: center; animation: drop .6s var(--ease) both; }
@keyframes drop { from { transform: translateY(-14px) scale(.3); opacity: 0; } }
.map-badge { position: absolute; left: -20px; bottom: 34px; display: flex; align-items: center; gap: 14px; background: #fff; padding: 16px 20px; border-radius: 20px; box-shadow: var(--shadow); }
.map-badge__num { font: 700 2.8rem/1 var(--serif); color: var(--ember-2); min-width: 2ch; }
.map-badge__txt { font-size: .88rem; color: var(--muted); line-height: 1.35; }
.map-badge__txt b { color: var(--ink); }
.map-note { position: absolute; top: 18px; right: 22px; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 600; }

/* ===================== Journey ===================== */
.beyond { background: var(--cream-2); }
.journey { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.journey__line { position: absolute; left: 8%; right: 8%; top: 118px; height: 3px; background: var(--sand); border-radius: 3px; z-index: 0; }
.journey__line span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--peach), var(--ember)); transition: width 1.4s var(--ease); }
.jcard { position: relative; z-index: 1; background: #fff; border-radius: var(--radius); padding: 14px 14px 28px; box-shadow: 0 10px 40px -24px rgba(27, 18, 48, .4); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.jcard:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.jcard__img { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 22px; }
.jcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.jcard:hover .jcard__img img { transform: scale(1.06); }
.jcard__tag, .jcard h3, .jcard > p:last-child { padding-inline: 12px; }
.jcard__tag { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--ember-2); margin-bottom: 8px; }
.jcard h3 { margin-bottom: 10px; }
.jcard > p:last-child { color: var(--muted); }

/* ===================== Impact ===================== */
.impact { color: #fff; overflow: hidden; }
.impact__bg { position: absolute; inset: 0; }
.impact__bg img { width: 100%; height: 100%; object-fit: cover; }
.impact__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20, 12, 38, .96) 0%, rgba(27, 18, 48, .85) 45%, rgba(107, 45, 94, .65) 100%); }
.impact__inner { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.impact__num { font: 600 clamp(5.5rem, 14vw, 10rem)/.9 var(--serif); letter-spacing: -.05em; background: linear-gradient(180deg, #fff 30%, var(--peach)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.impact__cap { font-size: 1.2rem; color: rgba(255, 255, 255, .8); margin-top: 14px; max-width: 22rem; }
.impact__cap sup a { color: var(--peach); text-decoration: none; }
.impact__cards { display: grid; gap: 16px; }
.icard { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; padding: 22px 24px; border-radius: 20px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); backdrop-filter: blur(10px); transition: background .3s, transform .3s var(--ease); }
.icard:hover { background: rgba(255, 255, 255, .12); transform: translateX(6px); }
.icard__ico { grid-row: span 2; width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.6rem; border-radius: 16px; background: rgba(255, 178, 107, .16); }
.icard h3 { font-size: 1.25rem; margin-bottom: 4px; }
.icard p { color: rgba(255, 255, 255, .7); font-size: .96rem; }

/* ===================== Bento gallery ===================== */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; grid-auto-flow: dense; gap: 16px; }
.tile { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }
.tile--tall { grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile:hover img { transform: scale(1.07); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(27, 18, 48, .75)); }
.tile figcaption { position: absolute; left: 18px; bottom: 16px; z-index: 1; color: #fff; font: 600 1.15rem var(--serif); }

/* ===================== FAQ ===================== */
.faq__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.faq .section__head { position: sticky; top: 110px; margin-bottom: 0; }
.faq__list { display: grid; gap: 12px; }
details { background: #fff; border-radius: 18px; padding: 0 24px; box-shadow: 0 6px 24px -18px rgba(27, 18, 48, .4); transition: box-shadow .3s; }
details[open] { box-shadow: 0 16px 40px -22px rgba(27, 18, 48, .45); }
summary { list-style: none; cursor: pointer; padding: 22px 0; font: 600 1.12rem var(--serif); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 500 1.3rem var(--sans); background: var(--cream-2); color: var(--ember-2); transition: transform .3s var(--ease), background .3s; }
details[open] summary::after { transform: rotate(45deg); background: var(--ember); color: #fff; }
details p { padding-bottom: 22px; color: var(--muted); }

/* ===================== Join ===================== */
.join { position: relative; overflow: hidden; color: #fff; padding: clamp(90px, 12vw, 150px) 0; background: linear-gradient(180deg, #ff8a4c 0%, #d9534a 18%, #6b2d5e 50%, #2a1748 78%, #140c26 100%); }
.join__sky { position: absolute; inset: 0; pointer-events: none; }
.sun--low { top: -380px; bottom: auto; left: 30%; opacity: .75; animation-duration: 18s; }
.join__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.join__copy h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: 22px; }
.join__copy h2 + p { color: rgba(255, 255, 255, .8); font-size: 1.12rem; max-width: 28rem; }
.join__wa { margin-top: 28px; }
.join__wa svg { width: 22px; height: 22px; color: #25d366; }
.join__wa:hover svg { transform: none; }
.join__form { position: relative; background: #fff; color: var(--ink); border-radius: 30px; padding: clamp(24px, 4vw, 38px); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .7); display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.field input, .field select { font: 500 1rem var(--sans); padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--cream); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; width: 100%; }
.field input:focus, .field select:focus { border-color: var(--ember); background: #fff; box-shadow: 0 0 0 4px rgba(255, 122, 69, .15); }
.field input.err { border-color: #e0483a; }
.form__fine { text-align: center; font-size: .82rem; color: var(--muted); }
.form__fine--err { color: #e0483a; }
.form__privacy { text-align: center; font-size: .75rem; color: var(--muted); margin-top: -8px; }
.form__privacy a { color: inherit; }
.form__done { position: absolute; inset: 0; border-radius: inherit; background: #fff; display: grid; place-content: center; text-align: center; gap: 10px; padding: 30px; animation: fadein .5s var(--ease); }
.form__done[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; transform: scale(.97); } }
.form__check { width: 72px; height: 72px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7fd39a, var(--sage)); }
.form__check svg { width: 36px; height: 36px; }
.form__done h3 { font-size: 2rem; }
.form__done p { color: var(--muted); }

/* ===================== Footer ===================== */
.footer { background: #0f0920; color: rgba(255, 255, 255, .6); padding: 50px 0; font-size: .9rem; }
.footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 14px 40px; align-items: center; }
.footer__src { grid-column: 1 / -1; font-size: .78rem; color: rgba(255, 255, 255, .4); border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 20px; }
.footer__copy { grid-row: 1; grid-column: 3; }
.footer__copy a { color: inherit; }
.logo--light svg { width: 30px; height: 30px; }

/* ===================== Reveal ===================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ===================== Getting paid ===================== */
.payflow { background: #fff; }
.payflow__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; counter-reset: pstep; }
.payflow__steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: linear-gradient(90deg, var(--peach), var(--ember)); opacity: .45; }
.pstep { position: relative; padding-top: 64px; counter-increment: pstep; }
.pstep::before { content: counter(pstep); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--ember), var(--ember-2)); color: #fff; font: 700 1.05rem/44px var(--sans); text-align: center; box-shadow: 0 8px 20px -8px rgba(255, 94, 58, .8); }
.pstep__when { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ember-2); margin-bottom: 8px; }
.pstep h3 { margin-bottom: 8px; }
.pstep p:last-child { color: var(--muted); font-size: .98rem; }
.payflow__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 72px; }
.pfact { background: var(--cream); border-radius: var(--radius); padding: 28px 28px 30px; }
.pfact__big { font: 600 2.6rem/1 var(--serif); color: var(--ink); letter-spacing: -.02em; margin-bottom: 12px; }
.pfact p:last-child { color: var(--muted); }
.payflow__fine { margin-top: 28px; color: var(--muted); font-size: .92rem; text-align: center; }
@media (max-width: 1020px) {
  .payflow__steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .payflow__steps::before { display: none; }
  .payflow__facts { grid-template-columns: 1fr; margin-top: 56px; }
}
@media (max-width: 640px) {
  .payflow__steps { grid-template-columns: 1fr; row-gap: 32px; }
  .pstep { padding: 0 0 0 66px; min-height: 44px; }
  .pstep:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: -26px; width: 2px; background: var(--peach); opacity: .55; }
  .payflow__fine { text-align: left; }
}
.footer__wa { color: var(--peach); text-decoration: none; display: inline-block; margin-top: 6px; }
.footer__wa:hover { text-decoration: underline; }

/* ===================== Why B4U ===================== */
.why { background: linear-gradient(180deg, #2a1748 0%, #1b1230 100%); color: #fff; }
.why .section__sub { color: rgba(255, 255, 255, .7); }
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wcard { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); border-radius: var(--radius); padding: 30px 26px 32px; }
.wcard__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--ember), var(--ember-2)); color: #fff; margin-bottom: 22px; }
.wcard__icon svg { width: 24px; height: 24px; }
.wcard h3 { margin-bottom: 10px; }
.wcard p { color: rgba(255, 255, 255, .72); font-size: .98rem; }
@media (max-width: 1020px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .why__grid { grid-template-columns: 1fr; } }

/* ===================== Contact ===================== */
.join__contact { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; color: rgba(255, 255, 255, .8); }
.join__contact li span { display: inline-block; min-width: 92px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--peach); }
.join__contact a { color: #fff; text-decoration: none; }
.join__contact a:hover { text-decoration: underline; }
.join__reply { font-size: .9rem; color: rgba(255, 255, 255, .6); }
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .45); transition: transform .25s var(--ease), opacity .3s, visibility .3s; }
.wa-fab svg { width: 30px; height: 30px; }
.wa-fab:hover { transform: scale(1.07); }
.wa-fab.is-hidden { opacity: 0; visibility: hidden; transform: scale(.8); }
@media (max-width: 640px) { .wa-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; } }

/* ===================== Responsive ===================== */
@media (max-width: 1020px) {
  .nav__links { display: none; }
  .hero { padding-top: 120px; min-height: 0; }
  .hero__inner, .earn__grid, .demand__grid, .impact__inner, .faq__grid, .join__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 560px; width: 100%; margin: 20px auto 0; }
  .float-card--order { left: 0; }
  .float-card--stat { right: 0; }
  .step, .step--flip { grid-template-columns: 1fr; }
  .step--flip .step__media { order: 0; }
  .faq .section__head { position: static; }
  .journey { grid-template-columns: 1fr; }
  .journey__line { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .map-badge { left: 12px; }
}
@media (max-width: 640px) {
  .logo em { display: none; }
  .nav__right { gap: 8px; }
  .nav__cta { padding: .6rem .95rem; }
  .nav__cta-full { display: none; }
  .nav__cta-short { display: inline; }
  .nav__inner { gap: 10px; }
  .nav__right { gap: 6px; }
  .nav__login { padding: .6rem .7rem; }
  .nav__login svg { display: none; }
  .nav__cta { padding: .6rem .8rem; }
  .hero h1 { font-size: clamp(2.7rem, 12vw, 3.4rem); }
  .hero__ctas .btn { width: 100%; }
  .float-card { transform: scale(.86); }
  .float-card--order { min-width: 0; left: -2%; top: 10%; }
  .float-card--clock { display: none; }
  .mock { position: relative; right: auto !important; left: auto !important; bottom: auto; width: 100%; margin-top: -60px; margin-inline: auto; max-width: 92%; }
  .step__num { font-size: 3.6rem; }
  .bento { grid-auto-rows: 160px; gap: 10px; }
  .tile--wide { grid-column: span 2; }
  .field-row { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__copy { grid-row: auto; grid-column: auto; }
  .map-badge { position: relative; left: 0; bottom: 0; margin-top: -40px; margin-inline: 12px; }
}
@media (max-width: 374px) {
  .nav__right { gap: 6px; }
  .nav__cta { padding: .55rem .8rem; }
}
@media (max-width: 340px) {
  .nav__login { padding: .55rem; }
  .nav__login svg { display: block; width: 18px; height: 18px; }
  .nav__login span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ===================== box4u theme (B4U-WEB-ALIGN-02) =====================
   Look only: palette, type, buttons, cards and nav from the box4u design
   (external\website with logo color tone\styles.css). Content and layout are unchanged.
   Delete from here to the end of the file to get the previous colours and fonts back. */
:root {
  --ink: #4a2a12;
  --ink-2: #5c3518;
  --plum: #6b4423;
  --ember: #f2a922;
  --ember-2: #e08c12;
  --peach: #ffc95c;
  --gold: #ffe1a0;
  --cream: #fdf4e3;
  --cream-2: #f8e8c8;
  --sand: #f1dfbd;
  --text: #4a2a12;
  --muted: #86674b;
  --line: rgba(74, 42, 18, .12);
  --shadow: 0 20px 50px -20px rgba(74, 42, 18, .35);
  --serif: "Fredoka", "Nunito", system-ui, sans-serif;
  --sans: "Nunito", system-ui, -apple-system, sans-serif;
  --honey: #f5b335;
  --amber-ink: #b86a00;
}
html[lang="zh-Hans"] { --serif: "Fredoka", "Noto Sans SC", "PingFang SC", sans-serif; --sans: "Nunito", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
html[lang="zh-Hant"] { --serif: "Fredoka", "Noto Sans TC", "PingFang TC", sans-serif; --sans: "Nunito", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
html[lang="ja"] { --serif: "Fredoka", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --sans: "Nunito", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; }
html[lang="ko"] { --serif: "Fredoka", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; --sans: "Nunito", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }

/* Type */
h1, h2, h3 { line-height: 1.08; letter-spacing: -.01em; }
.ital { font-style: normal; font-weight: 600; color: var(--amber-ink); }
:is(.earn, .impact, .why) .ital { color: var(--peach); }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) .ital { font-weight: 700; color: var(--amber-ink); }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) :is(.earn, .impact, .why) .ital { color: var(--peach); }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) .join .ital { color: var(--amber-ink); }
.marquee__row span { font-style: normal; }
.kicker { font-weight: 800; color: var(--amber-ink); }
.step__num { font-weight: 700; font-style: normal; -webkit-text-stroke: 2px var(--honey); }

/* Buttons */
.btn--primary {
  color: var(--ink); font-weight: 800;
  background: linear-gradient(180deg, #ffc548 0%, var(--honey) 100%);
  box-shadow: 0 10px 26px -12px rgba(184, 106, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn--primary:hover { box-shadow: 0 16px 32px -12px rgba(184, 106, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--ghost { color: var(--ink); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 2px rgba(74, 42, 18, .22); backdrop-filter: none; }
.btn--ghost:hover { background: #fff; }

/* Nav + logo */
.nav.is-scrolled { background: rgba(253, 244, 227, .88); box-shadow: 0 1px 0 var(--line); }
.logo { color: var(--ink); }
.logo img { width: auto; height: 38px; }
.logo span { font: 700 1.75rem/1 var(--serif); letter-spacing: -.01em; }
.logo span b { color: var(--honey); font-weight: 700; }
.logo em { font: 700 .74rem/1 var(--sans); font-style: normal; color: var(--amber-ink); border-left: 1.5px solid var(--line); }
.nav__links a { color: rgba(74, 42, 18, .78); }
.nav__links a:hover { color: var(--amber-ink); }
.lang {
  background: rgba(74, 42, 18, .06); box-shadow: inset 0 0 0 1px rgba(74, 42, 18, .14); backdrop-filter: none; color: var(--ink);
  font-family: "Nunito", "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", "Malgun Gothic", sans-serif; font-weight: 700;
}
.lang:hover { background: rgba(74, 42, 18, .1); }
.lang__select option { color: var(--ink); }

/* Hero */
.hero { color: var(--ink); background: radial-gradient(ellipse at 50% 30%, #fffaf0 0%, var(--cream) 55%, #f9ead0 100%); }
.sun { background: radial-gradient(circle at 50% 40%, #fff3c4 0%, var(--peach) 30%, var(--honey) 55%, rgba(245, 179, 53, 0) 72%); opacity: .55; }
.glow--1 { background: var(--honey); opacity: .22; }
.glow--2 { background: var(--ember-2); opacity: .12; }
.eyebrow { font-weight: 800; color: var(--ink); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px rgba(245, 179, 53, .6); }
.dot { background: #3fae62; box-shadow: 0 0 0 0 rgba(63, 174, 98, .6); }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(63, 174, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 174, 98, 0); } }
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.5rem); }
.hl { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--honey); text-shadow: 0 2px 0 rgba(184, 106, 0, .18); }
.lede { color: rgba(74, 42, 18, .82); }
.lede strong { color: var(--ink); }
.hero__proof { color: rgba(74, 42, 18, .75); }
.hero__proof b { color: var(--amber-ink); }
.hero__visual figure { box-shadow: 0 40px 80px -30px rgba(74, 42, 18, .55); }
.hero__photo::after { background: linear-gradient(200deg, rgba(245, 179, 53, .15), transparent 50%, rgba(74, 42, 18, .3)); }
.float-card--clock { background: rgba(74, 42, 18, .78); }
.fc__icon { background: #fff1d6; }
/* Sunburst rays of the box4u design (WEB_NEW styles.css:129-137, :384), drawn on the existing sky layers */
.hero__sky::before, .join__sky::before {
  content: ""; position: absolute; left: 50%; top: 40%; width: 240vmax; height: 240vmax; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(245, 179, 53, .62) 0deg 3deg, transparent 3deg 7deg, rgba(245, 179, 53, .42) 7deg 9deg, transparent 9deg 15deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 34vmax, rgba(0, 0, 0, .5) 46vmax, #000 62vmax);
  mask-image: radial-gradient(circle, transparent 0 34vmax, rgba(0, 0, 0, .5) 46vmax, #000 62vmax);
  animation: spin 160s linear infinite;
}
.join__sky::before { top: 45%; left: 28%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .55) 0deg 4.5deg, transparent 4.5deg 12deg); }
@keyframes spin { to { rotate: 360deg; } }
/* Hero sparkles (main.js #embers draws pale peach for a dark sky): deepen them to amber so they show on cream */
#embers { filter: brightness(.8) saturate(1.8); }

/* Cards */
.mock { box-shadow: 0 30px 60px -24px rgba(74, 42, 18, .5); }
.pill:not(.pill--live), .mock--orders li.new { background: #fff1d6; }
.earn__bg { background: radial-gradient(1000px 600px at 85% 20%, rgba(245, 179, 53, .32), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(224, 140, 18, .22), transparent 60%), var(--ink); }
input[type=range]::-webkit-slider-thumb { box-shadow: 0 6px 20px rgba(224, 140, 18, .6); }
input[type=range]:focus-visible { box-shadow: 0 0 0 4px rgba(255, 201, 92, .35); }
.pstep::before { background: linear-gradient(180deg, #ffc548, var(--honey)); color: var(--ink); }
.pstep__when { color: var(--amber-ink); }
.why { background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%); }
.wcard__icon { background: linear-gradient(180deg, #ffc548, var(--honey)); color: var(--ink); }
.demand__map .ring { stroke: var(--honey); }
#mapGlow stop { stop-color: var(--honey); }
#reqDots circle { fill: var(--ember); }
#reqDots circle + circle { fill: var(--ember-2); }
#demandMap > g:last-of-type circle { fill: var(--ink); }
.jcard { box-shadow: 0 10px 40px -24px rgba(74, 42, 18, .4); }
.impact__bg::after { background: linear-gradient(100deg, rgba(46, 26, 10, .96) 0%, rgba(74, 42, 18, .85) 45%, rgba(138, 79, 29, .65) 100%); }
.icard__ico { background: rgba(255, 201, 92, .16); }
.tile::after { background: linear-gradient(180deg, transparent 50%, rgba(74, 42, 18, .75)); }
details { box-shadow: 0 6px 24px -18px rgba(74, 42, 18, .4); }
details[open] { box-shadow: 0 16px 40px -22px rgba(74, 42, 18, .45); }
summary::after { color: var(--amber-ink); }
details[open] summary::after { background: var(--honey); color: var(--ink); }
/* FAQ Store / Customer switch (Tim, 2026-10-29); Store is the default and the no-JS view */
.faq:not([data-mode="customer"]) .faq--cust, .faq[data-mode="customer"] .faq--store { display: none; }
.faq__tabs { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border-radius: 999px; background: rgba(74, 42, 18, .06); box-shadow: inset 0 0 0 1px rgba(74, 42, 18, .14); }
.faq__tabs button { border: 0; background: none; cursor: pointer; padding: .75rem 1.4rem; border-radius: 999px; font: 700 .95rem/1 var(--sans); color: rgba(74, 42, 18, .7); transition: background .25s, color .25s, box-shadow .25s; }
.faq__tabs button:hover { color: var(--ink); }
.faq__tabs button[aria-selected="true"] { background: var(--honey); color: var(--ink); box-shadow: 0 4px 12px rgba(184, 106, 0, .3); }
.faq__tabs button:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }

/* Join + form */
.join { color: var(--ink); background: radial-gradient(ellipse at 30% 45%, #fff6dd 0%, #ffe3a1 55%, #f8cf73 100%); }
.sun--low { opacity: .4; }
.join .kicker--light { color: var(--amber-ink); }
.join__copy h2 + p { color: rgba(74, 42, 18, .82); }
.join__contact { color: rgba(74, 42, 18, .82); }
.join__contact li span { color: var(--amber-ink); }
.join__contact a { color: var(--ink); }
.join__reply { color: rgba(74, 42, 18, .65); }
.join__form { box-shadow: 0 40px 80px -40px rgba(74, 42, 18, .6); }
.field input:focus, .field select:focus { border-color: var(--honey); box-shadow: 0 0 0 4px rgba(242, 169, 34, .15); }
.form__check { background: linear-gradient(135deg, #ffc548, var(--honey)); color: var(--ink); }

/* Footer */
.footer { background: var(--cream-2); color: rgba(74, 42, 18, .72); }
.footer__src { color: rgba(74, 42, 18, .5); border-top-color: var(--line); }
.footer__wa { color: var(--amber-ink); }
.logo--light img { height: 30px; }

/* Legal pages (legal.css loads after this file, hence the extra html selector) */
html .terms-hero { color: var(--ink); background: radial-gradient(ellipse at 50% 30%, #fffaf0 0%, var(--cream) 55%, #f9ead0 100%); }
html .terms-hero p { color: rgba(74, 42, 18, .8); }
html .terms-hero .kicker { color: var(--amber-ink); }
html .terms__body { box-shadow: 0 30px 60px -40px rgba(74, 42, 18, .35); }

@media (max-width: 640px) {
  .logo span { font-size: 1.5rem; }
  .logo img { height: 32px; }
  .hero h1 { font-size: clamp(2.7rem, 12vw, 3.4rem); }
}

/* Chinese-interface link under the hero pill (B4U-WEB-COPY-01): same colours as the footer links */
.hero__lang { margin: 12px 0 -4px 6px; font-size: .95rem; font-weight: 700; }
.hero__lang a { color: var(--amber-ink); text-decoration: underline; text-underline-offset: 3px; }
.hero__lang a:hover { color: var(--ink); }
/* The three "Getting paid" boxes now hold short phrases: balance the wrap so "no-shows" is not split at its hyphen */
.pfact__big { text-wrap: balance; }