/* DuoPuzzle homepage v1 — hand-built, no framework.
   Design language: watercolor paper + puzzle green / sky blue from the app icon. */
:root{
  --bg:#faf6ec; --bg-tint:#f1eedd; --panel:#fffdf6; --panel-2:#ffffff;
  --ink:#22331f; --ink-soft:#4c5c49; --ink-faint:#7d8c78;
  --line:#e3dcc4; --line-soft:#ece5cf;
  --green:#4c9a3f; --green-deep:#35702b; --sky:#3f8fd2; --sky-soft:#dceefb;
  --amber:#f2b33d; --red:#d9503c;
  --shadow:0 18px 40px -18px rgba(53,84,44,.28);
  --shadow-small:0 8px 22px -10px rgba(53,84,44,.25);
  --radius:22px;
  --nav-bg:rgba(250,246,236,.86);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f150e; --bg-tint:#131b12; --panel:#182116; --panel-2:#1d281b;
    --ink:#e9f2e3; --ink-soft:#b3c4ab; --ink-faint:#82957c;
    --line:#2b3a28; --line-soft:#243020;
    --green:#6fbf5c; --green-deep:#8fd07e; --sky:#6db3e8; --sky-soft:#1d3247;
    --shadow:0 18px 40px -18px rgba(0,0,0,.6);
    --shadow-small:0 8px 22px -10px rgba(0,0,0,.55);
    --nav-bg:rgba(15,21,14,.86);
  }
}
html.dark{
  --bg:#0f150e; --bg-tint:#131b12; --panel:#182116; --panel-2:#1d281b;
  --ink:#e9f2e3; --ink-soft:#b3c4ab; --ink-faint:#82957c;
  --line:#2b3a28; --line-soft:#243020;
  --green:#6fbf5c; --green-deep:#8fd07e; --sky:#6db3e8; --sky-soft:#1d3247;
  --shadow:0 18px 40px -18px rgba(0,0,0,.6);
  --shadow-small:0 8px 22px -10px rgba(0,0,0,.55);
  --nav-bg:rgba(15,21,14,.86);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--green-deep)}
h1,h2,h3{line-height:1.25; margin:0; letter-spacing:.01em}
h2{font-size:clamp(1.65rem,4.6vw,2.5rem); font-weight:800}
h3{font-size:1.12rem; font-weight:700}
p{margin:0}
.eyebrow{
  font-size:.78rem; font-weight:800; letter-spacing:.22em;
  color:var(--green); text-transform:uppercase; margin-bottom:.9rem;
}
.eyebrow-light{color:#a5dd97}
.section{max-width:1120px; margin:0 auto; padding:5.2rem 1.25rem 1rem}
.section-tint{
  max-width:none; background:var(--bg-tint);
  padding-left:max(1.25rem, calc((100vw - 1120px)/2 + 1.25rem));
  padding-right:max(1.25rem, calc((100vw - 1120px)/2 + 1.25rem));
}
.section-lede{max-width:44rem; color:var(--ink-soft); margin-top:1rem; font-size:1.05rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border-radius:999px; font-weight:700; text-decoration:none; cursor:pointer;
  transition:transform .25s cubic-bezier(.22,1.4,.36,1), box-shadow .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,#5cb34c,#3c8a33); color:#fff;
  box-shadow:0 12px 24px -10px rgba(60,138,51,.55); padding:.72rem 1.35rem;
}
html.dark .btn-primary, .dark .btn-primary{background:linear-gradient(135deg,#57a047,#35702b)}
.btn-ghost{
  border:1.5px solid var(--line); color:var(--ink); background:var(--panel);
  padding:.7rem 1.3rem;
}
.btn-big{padding:.95rem 1.7rem; font-size:1.02rem}
.btn-small{padding:.5rem 1rem; font-size:.9rem}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1rem;
  padding:.65rem 1.25rem; background:var(--nav-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); margin-right:auto}
.brand img{border-radius:9px}
.brand-name{font-weight:800; font-size:1.02rem}
.brand-name em{font-style:normal; color:var(--ink-faint); font-weight:600; font-size:.86rem; margin-left:.25rem}
.nav-links{display:none; gap:1.4rem}
.nav-links a{color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.95rem}
.nav-links a:hover{color:var(--ink)}
@media (min-width:820px){ .nav-links{display:flex} }

/* ---------- hero ---------- */
.hero{
  max-width:1120px; margin:0 auto; padding:3.2rem 1.25rem 4rem;
  display:grid; gap:2.6rem; align-items:center;
}
@media (min-width:960px){ .hero{grid-template-columns:1.05fr .95fr; padding-top:4.6rem} }
.hero h1{font-size:clamp(2.4rem,7.2vw,4.1rem); font-weight:900; line-height:1.14}
.hero h1 .hl{color:var(--green); position:relative; white-space:nowrap}
.hero h1 .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.34em;
  background:var(--amber); opacity:.45; border-radius:4px; z-index:-1;
}
.lede{margin-top:1.3rem; font-size:1.1rem; color:var(--ink-soft); max-width:32rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem}
.hero-facts{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.4rem;
  padding:0; margin:2.2rem 0 0; color:var(--ink-soft); font-size:.92rem;
}
.hero-facts strong{display:block; font-size:1.45rem; color:var(--ink); line-height:1.1}

.hero-visual{position:relative; min-height:340px; padding-bottom:44px}
.hero-card{
  border-radius:26px; overflow:hidden; background:var(--panel-2);
  box-shadow:var(--shadow); border:1px solid var(--line-soft);
}
.hero-card-main{max-width:400px; margin:0 auto; transform:rotate(-1.6deg)}
.hero-card-main img{width:100%; aspect-ratio:1/.82; object-fit:cover}
.hero-card-caption{padding:.9rem 1.1rem 1.05rem; display:flex; flex-direction:column}
.hero-card-caption .word{font-size:1.5rem; font-weight:800}
.hero-card-caption .word-sub{color:var(--ink-soft); font-size:.9rem}
.chip{
  position:absolute; background:var(--panel-2); border:1px solid var(--line-soft);
  box-shadow:var(--shadow-small); border-radius:16px; padding:.55rem .85rem;
  font-weight:800; font-size:1.05rem; display:flex; flex-direction:column; line-height:1.3;
  animation:floaty 5.5s ease-in-out infinite;
}
.chip span{font-size:.72rem; color:var(--ink-faint); font-weight:600}
.chip-a{top:-8px; left:2%; transform:rotate(-4deg)}
.chip-b{top:36%; right:-2%; transform:rotate(3deg); animation-delay:-1.8s}
.chip-c{top:54%; left:-3%; transform:rotate(-2deg); animation-delay:-3.2s}
@keyframes floaty{0%,100%{margin-top:0}50%{margin-top:-10px}}
.scorecard{
  position:absolute; right:4%; bottom:2px; background:var(--panel-2);
  border:1px solid var(--line-soft); border-radius:16px; box-shadow:var(--shadow-small);
  padding:.7rem .9rem; transform:rotate(1.5deg);
}
.scorecard-grid{display:grid; grid-template-columns:repeat(6,18px); gap:5px}
.scorecard-grid i{width:18px; height:18px; border-radius:5px; background:var(--amber)}
.scorecard-grid i.ok{background:#58b368}
.scorecard p{font-size:.72rem; color:var(--ink-faint); margin-top:.45rem; font-weight:600}

/* ---------- play cards ---------- */
.play-grid{display:grid; gap:1.4rem; margin-top:2.4rem}
@media (min-width:900px){ .play-grid{grid-template-columns:repeat(3,1fr)} }
.play-card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-small); display:flex; flex-direction:column;
}
.play-card h3{padding:1.15rem 1.3rem 0}
.play-card p{padding:.5rem 1.3rem 1.35rem; color:var(--ink-soft); font-size:.97rem}
.play-media{height:190px; position:relative; overflow:hidden}
.map-media img{width:100%; height:100%; object-fit:cover}
.map-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(24,42,20,.18))}
.pin{
  position:absolute; background:#fff; color:#22331f; font-weight:800; font-size:.8rem;
  border-radius:999px; padding:.22rem .6rem; box-shadow:0 6px 14px rgba(20,40,20,.3);
  animation:floaty 4.5s ease-in-out infinite;
}
.pin-1{top:16%; left:12%} .pin-2{top:44%; left:56%; animation-delay:-1.5s} .pin-3{top:20%; right:10%; animation-delay:-3s}
.fall-media{background:linear-gradient(180deg,var(--sky-soft),var(--panel))}
.fall{
  position:absolute; top:-12%; font-weight:900; font-size:1.3rem; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line-soft); border-radius:12px;
  padding:.25rem .6rem; box-shadow:var(--shadow-small);
  animation:falling linear infinite;
}
.f1{left:10%; animation-duration:5.2s}
.f2{left:34%; animation-duration:6.4s; animation-delay:-2s; font-size:1.1rem}
.f3{left:56%; animation-duration:5.8s; animation-delay:-3.6s}
.f4{left:76%; animation-duration:6.9s; animation-delay:-1.2s; font-size:1.05rem}
.f5{left:45%; animation-duration:7.6s; animation-delay:-5s; font-size:1rem}
@keyframes falling{0%{transform:translateY(0) rotate(-3deg); opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(215px) rotate(3deg); opacity:0}}
.fall-floor{
  position:absolute; left:0; right:0; bottom:0; text-align:center;
  font-size:.78rem; font-weight:700; color:var(--ink-soft);
  padding:.5rem; background:color-mix(in srgb, var(--panel) 82%, transparent);
}
.write-media{background:var(--bg-tint)}
.write-media img{width:100%; height:100%; object-fit:cover; opacity:.92}
.write-prompt{
  position:absolute; top:.8rem; left:.8rem; background:rgba(20,32,18,.72); color:#eef6e8;
  font-size:.78rem; font-weight:700; border-radius:999px; padding:.3rem .7rem;
}
.write-word{
  position:absolute; left:.8rem; bottom:.8rem; background:var(--panel-2);
  border-radius:14px; padding:.5rem .8rem; font-weight:900; font-size:1.25rem;
  box-shadow:var(--shadow-small); display:flex; flex-direction:column; line-height:1.3;
}
.write-word em{font-style:normal; font-size:.72rem; color:var(--ink-faint); font-weight:600}

/* ---------- packs ---------- */
.pack-marquee{
  margin-top:2.2rem; overflow:hidden; border-block:1px solid var(--line);
  padding:.8rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex; gap:2.6rem; width:max-content; animation:marquee 30s linear infinite}
.marquee-track span{font-weight:800; color:var(--ink-soft); white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}
.pack-grid{display:grid; gap:1.2rem; margin-top:2.2rem; padding-bottom:4.6rem}
@media (min-width:760px){ .pack-grid{grid-template-columns:1fr 1fr} }
.pack-card{
  display:flex; gap:1.1rem; align-items:center; background:var(--panel);
  border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:1rem 1.2rem; box-shadow:var(--shadow-small);
}
.pack-card img{width:92px; height:92px; border-radius:16px; object-fit:cover; flex:none}
.pack-card p{color:var(--ink-soft); font-size:.93rem; margin-top:.25rem}
.pack-card-wide{grid-column:1/-1; justify-content:space-between; flex-wrap:wrap}
.pack-card-wide .btn{flex:none}

/* ---------- dictation ---------- */
.dictation{
  max-width:none; color:#eef6e8; margin-top:5rem;
  background:linear-gradient(150deg,#1d3319 0%,#274a2a 55%,#1c3a4a 130%);
  padding-left:max(1.25rem, calc((100vw - 1120px)/2 + 1.25rem));
  padding-right:max(1.25rem, calc((100vw - 1120px)/2 + 1.25rem));
  padding-bottom:4.8rem;
}
.dictation .section-lede{color:#c4d8bd}
.fold-visual{
  margin-top:2.6rem; display:grid; grid-template-columns:1fr; border-radius:26px; overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14);
}
@media (min-width:860px){ .fold-visual{grid-template-columns:1fr 10px 1fr} }
.fold-half{background:#f7f3e4; color:#22331f; padding:1.6rem 1.5rem 1.8rem; min-height:240px; position:relative}
.fold-score{background:#fdfbf3}
.fold-crease{background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(255,255,255,.5),rgba(0,0,0,.16)); min-height:10px}
.fold-tag{
  font-size:.72rem; font-weight:800; letter-spacing:.18em; color:#7a8a72;
  text-transform:uppercase;
}
.ink-word{
  font-family:"Hiragino Maru Gothic ProN","Kaiti SC","STKaiti",serif;
  font-size:4.6rem; font-weight:700; margin-top:.8rem; line-height:1.1;
}
.ink-stroke{
  height:5px; border-radius:3px; background:#3c8a33; width:9.5rem; margin-top:.4rem;
  transform-origin:left; animation:inkdraw 3.4s ease-in-out infinite;
}
@keyframes inkdraw{0%{transform:scaleX(0); opacity:.4}45%,100%{transform:scaleX(1); opacity:1}}
.fold-half p{position:absolute; bottom:1.1rem; left:1.5rem; right:1.5rem; color:#5a6c54; font-size:.92rem}
.char-scores{list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:1rem}
.char-scores li{display:flex; align-items:center; gap:.9rem}
.char-scores .ch{font-family:"Hiragino Maru Gothic ProN","Kaiti SC",serif; font-size:1.9rem; font-weight:700; width:2.2rem}
.char-scores .bar{flex:1; height:10px; border-radius:5px; background:#e7e0c8; overflow:hidden}
.char-scores .bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#6fbf5c,#3c8a33); border-radius:5px; transition:width 1.1s cubic-bezier(.22,1,.36,1) .2s}
.fold-visual.in .char-scores .bar i{width:var(--w)}
.char-scores b{font-size:.85rem; color:#5a6c54; width:3.4rem; text-align:right}
.dict-points{display:grid; gap:1.4rem; margin-top:2.4rem}
@media (min-width:860px){ .dict-points{grid-template-columns:repeat(3,1fr)} }
.dict-points h3{color:#fff}
.dict-points p{color:#c4d8bd; font-size:.95rem; margin-top:.4rem}

/* ---------- beta ---------- */
.who-grid{display:grid; gap:1.2rem; margin-top:2.4rem}
@media (min-width:820px){ .who-grid{grid-template-columns:repeat(3,1fr)} }
.who-card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:1.4rem 1.4rem 1.5rem; box-shadow:var(--shadow-small);
}
.who-card p{color:var(--ink-soft); font-size:.96rem; margin-top:.5rem}
.steps{
  list-style:none; margin:2.6rem 0 0; padding:0; display:grid; gap:1.1rem;
}
@media (min-width:820px){ .steps{grid-template-columns:repeat(3,1fr)} }
.steps li{display:flex; gap:1rem; align-items:flex-start}
.steps li>span{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--green); color:#fff; font-weight:900;
  display:grid; place-items:center; font-size:1.05rem;
  box-shadow:0 8px 16px -6px rgba(60,138,51,.6);
}
.steps p{color:var(--ink-soft); font-size:.94rem; margin-top:.25rem}
.channel-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.4rem}
.channel-row .btn{flex:1 1 150px}
.feedback-grid{display:grid; gap:1.2rem; margin-top:2rem; padding-bottom:4.6rem}
@media (min-width:820px){ .feedback-grid{grid-template-columns:1fr 1fr} }
.feedback-card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:1.4rem; box-shadow:var(--shadow-small);
}
.feedback-card p{color:var(--ink-soft); font-size:.96rem; margin:.5rem 0 1rem}

/* ---------- footer ---------- */
.footer{background:var(--bg-tint); padding:3.4rem 1.25rem 2.2rem; margin-top:1rem}
.footer-main{
  max-width:1120px; margin:0 auto; display:flex; flex-wrap:wrap; gap:1.6rem;
  align-items:flex-start; justify-content:space-between;
}
.footer-brand{display:flex; gap:.9rem; align-items:center}
.footer-brand img{border-radius:11px}
.footer-brand p{color:var(--ink-soft); font-size:.92rem}
.footer-links{display:flex; flex-wrap:wrap; gap:1.3rem}
.footer-links a{color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.95rem}
.footer-links a:hover{color:var(--ink)}
.privacy-strip{
  max-width:1120px; margin:2.4rem auto 0; background:var(--panel);
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:1.5rem 1.6rem;
}
.privacy-strip p{color:var(--ink-soft); margin-top:.45rem; max-width:46rem}
.copyright{
  max-width:1120px; margin:1.8rem auto 0; color:var(--ink-faint); font-size:.85rem;
  border-top:1px solid var(--line); padding-top:1.2rem;
}

/* ---------- reveal (Motion-style whileInView) ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .85s ease, transform .85s cubic-bezier(.22,1.25,.36,1)}
.reveal.in{opacity:1; transform:none}
.hero .reveal:nth-child(2){transition-delay:.08s}
.hero .reveal:nth-child(3){transition-delay:.16s}
.hero .reveal:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* ---------- language switcher ---------- */
.lang-switch{display:flex; gap:.15rem; padding:.2rem; border:1px solid var(--line-soft); border-radius:999px; background:var(--panel); flex:none}
.lang-switch a{padding:.3rem .6rem; border-radius:999px; color:var(--ink-soft); text-decoration:none; font-size:.82rem; font-weight:700; line-height:1; white-space:nowrap}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.on{background:var(--green); color:#fff}