/* Foldie site v2 (prototype): one story — everyday things fall into DouDou. */
:root {
  --night: #0b0b12;
  --ink: #ffffff;
  --dim: rgba(255, 255, 255, 0.56);
  --faint: rgba(255, 255, 255, 0.1);
  --blue: #00b5fe;
  --yellow: #ffcb3d;
}

body.v2 { background: var(--night); }
.v2 .bar { background: rgba(11, 11, 18, 0.6); border-bottom-color: transparent; }
.v2 .bar .wrap { max-width: 1200px; }

/* ===== Hero: a tall track; the scene sticks while the page scrolls past it. ===== */
.catch { position: relative; height: 320vh; }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 78%, rgba(0, 181, 254, 0.22), transparent 70%),
    radial-gradient(40% 30% at 50% 74%, rgba(255, 203, 61, 0.10), transparent 70%),
    var(--night);
}
/* Stars: two layers of fine dots drifting very slowly (far away). */
.stars, .stars::after {
  position: absolute; inset: -10% 0 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 63% 38%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 82% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 70%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 18% 86%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 72% 88%, rgba(255,255,255,.3), transparent 60%);
  background-size: 520px 520px;
}
.stars::after { content: ""; background-size: 340px 340px; opacity: 0.6; transform: translate(130px, 90px); }

.headline {
  position: absolute; left: 0; right: 0; top: 15vh; z-index: 4;
  text-align: center; padding: 0 20px; pointer-events: none;
}
.headline h1 {
  margin: 0; font-size: clamp(44px, 8.2vw, 112px); line-height: 1.02; font-weight: 600;
  letter-spacing: -0.035em;
}
.headline h1 .soft { color: var(--dim); }
.headline p { margin: 22px auto 0; max-width: 560px; font-size: clamp(17px, 1.6vw, 21px); color: var(--dim); }

/* The folder: the icon whole, the falling things, then the icon's front flap again on
   top — so things sink behind the front edge into the folder (as in the app's splash). */
.folder {
  position: absolute; left: 50%; top: 66%; z-index: 2;
  width: clamp(132px, 12.5vw, 196px); aspect-ratio: 1; transform: translate(-50%, -50%);
}
.folder .layer {
  position: absolute; inset: 0; border-radius: 22.5%; overflow: hidden;
  transform-origin: 50% 100%;
}
.folder .layer img { width: 100%; height: 100%; display: block; }
.folder .front { z-index: 3; clip-path: polygon(0 45%, 100% 62%, 100% 100%, 0 100%); }
.folder .back { box-shadow: 0 40px 90px rgba(0, 181, 254, 0.28), 0 18px 40px rgba(0, 0, 0, 0.55); }
.folder .face-b { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.folder.full .face-b { opacity: 1; }
.folder.bump .layer { animation: bump .42s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes bump { 0% { transform: scale(1, 1); } 30% { transform: scale(1.06, .92); } 100% { transform: scale(1, 1); } }
.items { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.items img {
  position: absolute; left: 0; top: 0; will-change: transform, opacity;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}
/* Ground shadow under the folder. */
.folder::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -14%; height: 14%;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); z-index: 0;
}

.after {
  position: absolute; left: 0; right: 0; bottom: 6vh; z-index: 4; text-align: center;
  opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease;
}
.after.on { opacity: 1; transform: none; }
.after .count { font-size: 15px; color: var(--dim); margin-bottom: 14px; }
.after .count b { color: var(--yellow); font-weight: 600; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px;
  border-radius: 999px; background: #fff; color: #000; font-weight: 600; font-size: 16px;
}
.pill:hover { text-decoration: none; }
.pill svg { width: 18px; height: 18px; }

.hint {
  position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 4;
  color: var(--dim); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .3s ease;
}
.hint::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--dim), transparent); animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 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; } }

/* ===== Statement + cards (Endel-style rhythm) ===== */
.statement { text-align: center; padding: 140px 20px 56px; }
.statement h2 { margin: 0; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.statement h2 .soft { color: var(--dim); }
.statement p { margin: 22px auto 0; max-width: 620px; color: var(--dim); font-size: 18px; }

.duo { max-width: 1200px; margin: 0 auto; padding: 0 20px 140px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.demo-card {
  border-radius: 32px; overflow: hidden; background: #15151f;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.demo-card .scene { position: relative; height: 380px; overflow: hidden; display: grid; place-items: center; }
.demo-card .copy { padding: 28px 32px 34px; }
.demo-card h3 { margin: 0 0 10px; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.demo-card p { margin: 0; color: var(--dim); font-size: 16px; line-height: 1.6; }

/* Card 1: a line typed, then read back as a time and a list. */
.type-scene { background: radial-gradient(80% 70% at 50% 100%, rgba(0, 181, 254, 0.16), transparent 70%), #15151f; }
.composer { width: min(82%, 400px); }
.field {
  height: 64px; border-radius: 22px; padding: 0 22px; display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 20px;
}
.field .caret { width: 2px; height: 26px; background: var(--blue); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chips { display: flex; gap: 10px; margin-top: 16px; min-height: 40px; }
.chips span {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); font-size: 15px; opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.chips span img { width: 20px; height: 20px; }
.chips span.on { opacity: 1; transform: none; }
.added {
  margin-top: 26px; height: 64px; border-radius: 22px; padding: 0 18px; display: flex; align-items: center; gap: 14px;
  background: #22222e; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.3, .5, 1);
}
.added.on { opacity: 1; transform: none; }
.added img { width: 34px; height: 34px; }
.added b { font-weight: 600; font-size: 16px; display: block; }
.added small { color: var(--dim); font-size: 13px; }
.added .ring { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); }

/* Card 2: the reminder drops in on a quiet lock screen. */
.lock-scene { background: linear-gradient(180deg, #1b1830 0%, #0f0f19 100%); }
.lock-scene .time { position: absolute; top: 48px; left: 0; right: 0; text-align: center; }
.lock-scene .time b { display: block; font-size: 76px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.lock-scene .time small { color: var(--dim); font-size: 15px; }
.lock-scene .moon { position: absolute; right: -30px; top: -34px; width: 170px; opacity: 0.85; filter: blur(.5px) drop-shadow(0 0 40px rgba(255, 220, 120, 0.35)); }
.note {
  position: absolute; left: 50%; bottom: 58px; width: min(84%, 380px);
  display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 24px;
  background: rgba(70, 70, 86, 0.55); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -140px) scale(.96); opacity: 0;
  transition: transform .7s cubic-bezier(.25, 1.25, .45, 1), opacity .4s ease;
}
.note.on { transform: translate(-50%, 0) scale(1); opacity: 1; }
.note > img { width: 42px; height: 42px; border-radius: 11px; }
.note b { display: flex; justify-content: space-between; font-size: 15px; }
.note b small { color: var(--dim); font-weight: 400; }
.note span { font-size: 14px; color: rgba(255, 255, 255, 0.85); }

.reveal2 { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal2.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .demo-card .scene { height: 320px; }
  .folder { top: 64%; }
}
@media (prefers-reduced-motion: reduce) {
  .catch { height: auto; }
  .stage { position: relative; }
  .after { opacity: 1; transform: none; }
  .hint { display: none; }
  .reveal2 { opacity: 1; transform: none; transition: none; }
  .field .caret, .hint::after { animation: none; }
}
.folder-front::after { display: none; }
.chips em { font-style: normal; }

/* ===== Tour: one phone stays put while the page scrolls through the app ===== */
.tour { position: relative; }
.tour-stick {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px;
}
.steps { position: relative; height: 340px; }
.step {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .6s ease;
}
.step.on { opacity: 1; transform: none; }
.step .k { color: var(--blue); font-size: 15px; font-weight: 600; letter-spacing: .06em; margin-bottom: 14px; }
.step h3 { margin: 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.step p { margin: 18px 0 0; color: var(--dim); font-size: 18px; max-width: 460px; }
.dots { display: flex; gap: 8px; margin-top: 28px; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.2); transition: width .3s ease, background .3s ease; }
.dots i.on { width: 26px; background: var(--blue); }
.big-phone {
  justify-self: center; position: relative; width: min(340px, 80vw); aspect-ratio: 1320 / 2868;
  border-radius: 56px; padding: 11px; background: linear-gradient(160deg, #3c3c4a, #14141b);
  box-shadow: 0 60px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 120px rgba(0, 181, 254, .12);
}
.big-phone .screen { position: relative; width: 100%; height: 100%; border-radius: 46px; overflow: hidden; background: #000; }
.big-phone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.big-phone .screen img.on { opacity: 1; }

/* ===== Money cards ===== */
.flow-scene { background: radial-gradient(80% 70% at 70% 100%, rgba(255, 203, 61, 0.12), transparent 70%), #15151f; }
.flow-scene .col { position: absolute; top: 50%; transform: translateY(-50%); }
.flow-scene .log { left: 7%; width: 46%; display: grid; gap: 10px; }
.flow-scene .row {
  height: 50px; border-radius: 16px; background: #22222e; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  font-size: 14px;
}
.flow-scene .row img { width: 26px; height: 26px; }
.flow-scene .row b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.flow-scene .row.lift { outline: 2px solid var(--blue); }
.flow-scene .book {
  right: 7%; width: 36%; border-radius: 22px; padding: 18px; background: #1e1e2a;
  border: 1px dashed rgba(255,255,255,.18); text-align: center;
}
.flow-scene .book img { width: 44px; height: 44px; }
.flow-scene .book .who { font-weight: 600; margin-top: 6px; }
.flow-scene .book .part { color: var(--dim); font-size: 13px; }
.flow-scene .book .sum { margin-top: 10px; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--yellow); }
.flow-scene .book.got { border-color: var(--yellow); }
.flyer {
  position: absolute; height: 50px; border-radius: 16px; background: #2c2c3a; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; font-size: 14px; box-shadow: 0 20px 40px rgba(0,0,0,.5); opacity: 0; pointer-events: none;
}
.flyer img { width: 26px; height: 26px; }
.flyer b { margin-left: auto; }

.pad-scene { background: radial-gradient(80% 70% at 30% 100%, rgba(255, 99, 107, 0.14), transparent 70%), #15151f; }
.pad { width: min(84%, 360px); }
.pad .amount { text-align: right; font-size: 44px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #ff636b; }
.pad .amount small { font-size: 24px; color: var(--dim); margin-right: 6px; }
.pad .cats { display: flex; gap: 8px; margin: 8px 0 14px; }
.pad .cats > span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 14px; }
.pad .cats > span.on { background: rgba(0,181,254,.18); outline: 1.5px solid var(--blue); }
.pad .cats img { width: 20px; height: 20px; }
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.keys i {
  font-style: normal; height: 46px; border-radius: 14px; background: #262633; display: grid; place-items: center;
  font-size: 19px; font-weight: 500; transition: background .12s ease, transform .12s ease;
}
.keys i.hit { background: #3a3a4c; transform: scale(.94); }
.keys i.save { background: var(--blue); grid-row: span 2; height: auto; font-size: 16px; font-weight: 600; }

/* ===== Reports: the printer ===== */
.print { text-align: center; padding: 0 20px 140px; }
.printer { width: min(420px, 90vw); margin: 56px auto 0; position: relative; }
.printer .body {
  height: 74px; border-radius: 24px 24px 12px 12px; position: relative; z-index: 2;
  background: linear-gradient(180deg, #38cde6 0%, #009ec2 45%, #00566f 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.printer .body::before { content: "DOUDOU"; position: absolute; left: 24px; top: 16px; font-size: 10px; letter-spacing: .3em; color: rgba(255,255,255,.85); font-weight: 600; }
.printer .body::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 12px; height: 8px; border-radius: 4px; background: #08151b; box-shadow: inset 0 2px 3px rgba(0,0,0,.8); }
.paper-wrap { width: 86%; margin: -12px auto 0; overflow: hidden; position: relative; z-index: 1; padding-bottom: 30px; }
.paper {
  background: #f6f4ec; color: #26262c; text-align: left; padding: 26px 24px 30px;
  font-variant-numeric: tabular-nums; transform: translateY(-101%); transition: transform 2.6s cubic-bezier(.35, .1, .25, 1);
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
  position: relative;
}
/* Torn edge: a row of small teeth hanging off the bottom. */
.paper::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background:
    linear-gradient(45deg, #f6f4ec 50%, transparent 50%) 0 0 / 12px 8px repeat-x,
    linear-gradient(-45deg, #f6f4ec 50%, transparent 50%) 0 0 / 12px 8px repeat-x;
}
.paper.out { transform: none; }
.paper .t { text-align: center; font-weight: 700; font-size: 22px; letter-spacing: .2em; }
.paper .st { text-align: center; font-size: 12px; color: #77776f; margin-top: 2px; }
.paper hr { border: 0; border-top: 1px dashed #9a9a92; margin: 14px 0; }
.paper .ln { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.paper .ln span:first-child { color: #55554f; }
.paper .tot { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.paper .tot b { font-size: 28px; }
.paper .bar { height: 36px; margin-top: 16px; background: repeating-linear-gradient(90deg, #26262c 0 2px, transparent 2px 4px, #26262c 4px 5px, transparent 5px 8px); opacity: .85; }
.styles { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.styles > span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 15px; }
.styles .tag { margin: 0; }

/* ===== Numbers ===== */
.nums { max-width: 1200px; margin: 0 auto; padding: 40px 20px 120px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.nums b { display: block; font-size: clamp(48px, 6vw, 84px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(180deg, #fff, rgba(255,255,255,.55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nums span { display: block; margin-top: 12px; color: var(--dim); font-size: 15px; }

/* ===== Night band ===== */
.band { position: relative; min-height: 86vh; display: grid; align-items: end; overflow: hidden; }
.band .bg { position: absolute; inset: 0; background: url("img/art/night.webp") center / cover no-repeat; transform: scale(1.08); }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, rgba(11,11,18,.15) 30%, rgba(11,11,18,.35) 60%, var(--night) 100%); }
.band .txt { position: relative; z-index: 1; text-align: center; padding: 0 20px 12vh; }
.band h2 { margin: 0; font-size: clamp(36px, 5vw, 68px); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; text-shadow: 0 6px 40px rgba(0,0,0,.5); }
.band p { color: rgba(255,255,255,.8); font-size: 18px; margin: 18px 0 0; }

/* ===== Privacy ===== */
.priv { max-width: 1200px; margin: 0 auto; padding: 0 20px 140px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.priv div { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; }
.priv svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.priv h3 { margin: 16px 0 8px; font-size: 20px; font-weight: 600; }
.priv p { margin: 0; color: var(--dim); font-size: 15px; }
.more { text-align: center; margin: -100px 0 140px; }

/* ===== Plans ===== */
.plans2 { max-width: 1100px; margin: 0 auto; padding: 0 20px 140px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan2 { border-radius: 32px; padding: 32px 28px; background: #15151f; border: 1px solid rgba(255,255,255,.06); }
.plan2.best { background: linear-gradient(180deg, rgba(0,181,254,.16), #15151f 55%); border-color: rgba(0,181,254,.6); }
.plan2 .n { font-size: 15px; color: var(--dim); }
.plan2 h3 { margin: 6px 0 22px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.plan2 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan2 li { font-size: 15px; padding-left: 28px; position: relative; color: rgba(255,255,255,.88); }
.plan2 li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.plan2 li.no { color: var(--dim); }
.plan2 li.no::before { border: 0; height: 2px; top: 11px; width: 12px; background: var(--dim); transform: none; }
.fine { text-align: center; color: var(--dim); font-size: 14px; margin: -116px 0 140px; }

/* ===== Faces marquee + ending ===== */
.marquee { overflow: hidden; padding: 10px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee .track { display: flex; gap: 18px; width: max-content; animation: slide 60s linear infinite; }
.marquee img { width: 88px; height: 88px; border-radius: 30%; }
@keyframes slide { to { transform: translateX(-50%); } }
.ending { text-align: center; padding: 100px 20px 140px; }
.ending h2 { margin: 0; font-size: clamp(40px, 6vw, 80px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; }
.ending p { color: var(--dim); font-size: 18px; margin: 20px 0 32px; }
.ending .row2 { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.ghost2 { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-weight: 600; }
.ghost2:hover { text-decoration: none; background: rgba(255,255,255,.16); }
.v2 footer { border-top-color: rgba(255,255,255,.08); }
.v2 footer .wrap { max-width: 1200px; }

@media (max-width: 860px) {
  .tour-stick { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; padding-top: 72px; }
  .steps { height: 190px; }
  .step h3 { font-size: 30px; }
  .step p { font-size: 16px; margin-top: 10px; }
  .dots { margin-top: 14px; }
  .big-phone { width: auto; height: min(60vh, 540px); border-radius: 44px; padding: 8px; }
  .big-phone .screen { border-radius: 36px; }
  .nums { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .priv { grid-template-columns: 1fr 1fr; }
  .plans2 { grid-template-columns: 1fr; }
  .fine { margin-top: -110px; }
}
@media (max-width: 520px) {
  .priv { grid-template-columns: 1fr; }
  .marquee img { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .paper { transform: none; transition: none; }
  .marquee .track { animation: none; }
  .step, .big-phone .screen img { transition: none; }
}
/* The phone fits the screen's height (it stays put while the steps change). */
.big-phone { width: auto; height: min(78vh, 720px); }
@media (max-width: 860px) { .big-phone { height: min(58vh, 540px); } }
/* Words up top, so the sleeping DouDou shows below them. */
.band { align-items: start; }
.band .txt { padding: 16vh 20px 0; }
.band .bg { background-position: center 75%; }
.band::after { background: linear-gradient(180deg, var(--night) 0%, rgba(11,11,18,.55) 32%, rgba(11,11,18,.1) 60%, var(--night) 100%); }
.night2 { max-width: 1200px; margin: 0 auto; padding: 40px 20px 140px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.night2 h2 { margin: 0; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.night2 h2 .soft { color: var(--dim); }
.night2 p { color: var(--dim); font-size: 18px; margin: 20px 0 0; }
.night2 .art { border-radius: 36px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 50px 100px rgba(0,0,0,.55), 0 0 100px rgba(255, 160, 120, .12); }
.night2 .art img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); }
@media (max-width: 860px) { .night2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .headline { top: 12vh; }
  .headline h1 { font-size: 40px; }
  .headline p { font-size: 16px; margin-top: 14px; }
}

/* ===== Caught: rows of capsules drifting left → right ===== */
.caught { padding-bottom: 140px; overflow: hidden; }
.caprows { display: grid; gap: 16px; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.caprow { overflow: hidden; }
.captrack { display: flex; gap: 14px; width: max-content; animation: drift 70s linear infinite; }
.r1 .captrack { animation-duration: 85s; animation-delay: -30s; }
.r2 .captrack { animation-duration: 60s; animation-delay: -12s; }
@keyframes drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.cap {
  display: flex; align-items: center; gap: 14px; height: 76px; padding: 0 22px 0 12px; border-radius: 999px;
  background: #171722; border: 1px solid rgba(255,255,255,.07); white-space: nowrap;
}
.cap img { width: 52px; height: 52px; }
.cap b { display: block; font-size: 17px; font-weight: 600; }
.cap small { display: block; font-size: 14px; color: var(--dim); margin-top: 2px; }
.cap i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); margin-left: 10px; }
@media (max-width: 600px) { .cap { height: 64px; } .cap img { width: 42px; height: 42px; } .cap b { font-size: 15px; } }

/* ===== Reviews: masonry ===== */
.reviews { padding-bottom: 120px; }
.masonry { max-width: 1200px; margin: 0 auto; padding: 0 20px; columns: 3 320px; column-gap: 20px; }
.rev { break-inside: avoid; margin: 0 0 20px; padding: 26px 26px 22px; border-radius: 28px; background: #15151f; border: 1px solid rgba(255,255,255,.06); position: relative; }
.rev .rating { color: var(--yellow); letter-spacing: 3px; font-size: 15px; }
.rev blockquote { margin: 12px 0 18px; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.9); }
.rev figcaption { display: flex; align-items: center; gap: 12px; }
.rev figcaption img { width: 40px; height: 40px; border-radius: 50%; }
.rev figcaption b { display: block; font-size: 15px; }
.rev figcaption small { color: var(--dim); font-size: 13px; }
.rev .sample { position: absolute; top: 16px; right: 18px; font-size: 12px; color: #ff9f6b; border: 1px solid rgba(255,159,107,.5); border-radius: 999px; padding: 1px 8px; }
@media (prefers-reduced-motion: reduce) { .captrack { animation: none; } }
.rev { display: inline-block; width: 100%; -webkit-column-break-inside: avoid; page-break-inside: avoid; }

/* Text pages (privacy, support) in the v2 look */
.v2 .doc .qa, .v2 .doc .contact { background: #15151f; border: 1px solid rgba(255,255,255,.06); }
.v2 .doc h1 { font-size: 40px; letter-spacing: -0.03em; }

/* =====================================================================
   Site-wide scale (2026-10-18): titles 32, body 16; 32 between blocks,
   16 within; content 1200 wide. The mock screens inside demo cards keep
   their own sizes (they imitate the app).
   ===================================================================== */
.v2 { --title: 32px; --body: 16px; --block: 32px; --gap: 16px; --max: 1200px; }

/* Nav: a floating, fully rounded bar */
.v2 .bar { position: fixed; top: 0; left: 0; right: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 20px 0; }
.v2 .bar .wrap {
  max-width: var(--max); height: 56px; padding: 0 8px 0 16px; border-radius: 999px;
  background: rgba(28, 28, 40, 0.72); border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.v2 .bar nav a { font-size: var(--body); }
.v2 .lang { font-size: 14px; }

/* Titles 32 */
.v2 .headline h1, .v2 .statement h2, .v2 .demo-card h3, .v2 .step h3, .v2 .night2 h2,
.v2 .priv h3, .v2 .plan2 h3, .v2 .ending h2, .v2 .nums b, .v2 .doc h1 {
  font-size: var(--title); line-height: 1.2; letter-spacing: -0.01em;
}
/* Body 16 */
.v2 .headline p, .v2 .statement p, .v2 .demo-card p, .v2 .step p, .v2 .night2 p, .v2 .priv p,
.v2 .plan2 li, .v2 .plan2 .n, .v2 .fine, .v2 .ending p, .v2 .nums span, .v2 .after .count,
.v2 .step .k, .v2 .styles > span, .v2 .more, .v2 .pill, .v2 .ghost2, .v2 .doc p, .v2 .doc li, .v2 .doc h2 {
  font-size: var(--body);
}
.v2 .doc h2 { font-weight: 600; }

/* Width */
.v2 .duo, .v2 .tour-stick, .v2 .nums, .v2 .priv, .v2 .plans2, .v2 .night2, .v2 .masonry, .v2 footer .wrap { max-width: var(--max); }

/* Spacing: 32 between blocks, 16 within */
.v2 main > section:not(.catch):not(.tour) { padding-top: var(--gap); padding-bottom: var(--gap); }
.v2 .statement { padding: var(--block) 20px var(--block); }
.v2 .statement p { margin-top: var(--gap); }
.v2 .headline p { margin-top: var(--gap); }
.v2 .duo { gap: var(--gap); padding-bottom: var(--block); }
.v2 .demo-card .copy { padding: 24px; }
.v2 .demo-card h3 { margin-bottom: var(--gap); }
.v2 .step p { margin-top: var(--gap); }
.v2 .dots { margin-top: var(--block); }
.v2 .tour-stick { gap: var(--block); }
.v2 .print { padding-bottom: var(--block); }
.v2 .printer { margin-top: 0; }
.v2 .styles { margin-top: var(--gap); }
.v2 .nums { padding: var(--block) 20px; gap: var(--gap); }
.v2 .nums span { margin-top: 8px; }
.v2 .night2 { padding: var(--block) 20px; gap: var(--block); }
.v2 .night2 p { margin-top: var(--gap); }
.v2 .priv { padding-bottom: var(--block); gap: var(--gap); }
.v2 .priv h3 { margin: var(--gap) 0 8px; }
.v2 .more { margin: 0 0 var(--block); }
.v2 .plans2 { padding-bottom: var(--gap); gap: var(--gap); }
.v2 .plan2 { padding: 24px; }
.v2 .plan2 h3 { margin: 8px 0 var(--gap); }
.v2 .plan2 ul { gap: 8px; }
.v2 .fine { margin: 0 0 var(--block); }
.v2 .caught { padding-bottom: var(--block); }
.v2 .caprows { gap: var(--gap); }
.v2 .ending { padding: var(--block) 20px calc(var(--block) * 2); }
.v2 .ending p { margin: var(--gap) 0 var(--block); }
.v2 .doc { padding-top: 120px; }
.v2 .doc h2 { margin: var(--block) 0 8px; }
@media (max-width: 860px) {
  .v2 .nums { row-gap: var(--block); }
  .v2 .tour-stick { padding-top: 96px; gap: var(--gap); }
  .v2 .steps { height: 150px; }
}
@media (max-width: 600px) {
  .v2 .headline h1 { font-size: var(--title); }
  .v2 .headline p { font-size: var(--body); }
  .v2 .bar { padding: 8px 12px 0; }
}
/* No single-character last lines */
.v2 p, .v2 h1, .v2 h2, .v2 h3 { text-wrap: pretty; }
.v2 .statement p, .v2 .headline p, .v2 .ending p { text-wrap: balance; }

/* Cards: title 16 bold, description 16 light */
.v2 .demo-card h3, .v2 .priv h3, .v2 .plan2 h3 { font-size: var(--body); font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.v2 .demo-card p, .v2 .priv p, .v2 .plan2 li { font-size: var(--body); font-weight: 300; }
.v2 .demo-card h3 { margin: 0 0 8px; }
.v2 .priv h3 { margin: var(--gap) 0 8px; }
.v2 .plan2 h3 { margin: 8px 0 var(--gap); }

/* Language button and its menu */
.v2 .bar nav { position: relative; }
.v2 .lang { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 12px; }
.v2 .lang svg, .langmenu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.langmenu {
  position: absolute; top: calc(100% + 16px); min-width: 216px; padding: 8px; border-radius: 24px;
  background: rgba(40, 40, 54, 0.92); border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); transform-origin: top right; animation: langIn .18s ease-out;
}
.langmenu button {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 0 12px;
  font: inherit; font-size: var(--body); color: var(--ink); background: none; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
}
.langmenu button:hover { background: rgba(255, 255, 255, 0.08); }
.langmenu button svg { color: var(--blue); }
@keyframes langIn { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .langmenu { animation: none; } }