/* ===========================================================
   Historinha — landing styles
   Palette: midnight #0A0820 / #10133A · plum #2E1F3D
            candle gold #ECC579 / #D4A35A · parchment #F3E3C2
            moonlight #E8E6EE
   Type: Cormorant Garamond (display) · Lora (body) · Inter (ui)
   =========================================================== */

:root {
  --midnight: #0A0820;
  --midnight-2: #10133A;
  --plum: #2E1F3D;
  --gold: #ECC579;
  --gold-hi: #F6E3AC;
  --gold-lo: #C99A4A;
  --parchment: #F3E3C2;
  --moon: #E8E6EE;
  --ink-on-light: #2A2238;

  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Lora", Georgia, serif;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --shell: min(1180px, 92vw);
  --ease: cubic-bezier(.22,.7,.25,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--midnight);
  color: var(--moon);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* page-wide soft vignette + grain so dark areas feel like paper-dark, not flat */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(46,31,61,.5), transparent 55%),
    radial-gradient(100% 60% at 50% 110%, rgba(20,16,46,.6), transparent 60%);
  mix-blend-mode: screen; opacity: .5;
}

/* ---------- shared type ---------- */
.kicker {
  font-family: var(--ui); font-size: 12.5px; font-weight: 500;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold); opacity: .85;
  display: inline-flex; align-items: center; gap: .9em;
}
.kicker::before, .kicker::after {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: .004em; color: #F8F1DD; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: rgba(232,230,238,.82); }
.gold { color: var(--gold); }
em { font-style: italic; }

/* foil text */
.foil {
  background: linear-gradient(120deg, var(--gold-lo) 0%, var(--gold-hi) 38%, var(--gold) 55%, #F8E6B8 72%, var(--gold-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(236,197,121,.34);
  color: #F4ECD6; font-family: var(--ui);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s, background .35s;
  backdrop-filter: blur(8px);
}
.store:hover { transform: translateY(-3px); border-color: rgba(236,197,121,.7);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 24px rgba(236,197,121,.12); }
.store svg { width: 26px; height: 26px; flex: none; fill: #F4ECD6; }
.store__txt { display: flex; flex-direction: column; line-height: 1.05; }
.store__txt small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.store__txt b { font-size: 17px; font-weight: 600; letter-spacing: .01em; }

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ui); font-weight: 600; font-size: 15px; letter-spacing: .01em;
  padding: 13px 26px; border-radius: 999px; cursor: pointer; border: none;
  color: #2A1A08;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  box-shadow: 0 1px 0 rgba(255,245,210,.6) inset, 0 10px 30px rgba(212,163,90,.32);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,245,210,.6) inset, 0 16px 44px rgba(212,163,90,.5); }
.cta--ghost { background: transparent; color: #F4ECD6; border: 1px solid rgba(236,197,121,.4); box-shadow: none; }
.cta--ghost:hover { background: rgba(236,197,121,.08); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px max(24px, calc((100vw - var(--shell)) / 2));
  transition: background .5s, backdrop-filter .5s, padding .4s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav--solid {
  background: rgba(8,7,22,.72); backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(236,197,121,.14); padding-top: 12px; padding-bottom: 12px;
}
.nav__brand { display: flex; align-items: center; gap: 11px; }
.nav__brand img.mark { width: 34px; height: 34px; }
.nav__brand img.word { height: 22px; width: auto; opacity: .96; }
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__links a {
  font-family: var(--ui); font-size: 14px; letter-spacing: .02em; color: rgba(232,230,238,.78);
  position: relative; transition: color .3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--gold); transition: width .35s var(--ease);
}
.nav__links a:hover { color: #fff; } .nav__links a:hover::after { width: 100%; }
.nav__cta { font-family: var(--ui); }
.nav__burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--gold); border-radius: 2px; transition: .3s; }
.nav__burger span + span { margin-top: 6px; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 132px 0 72px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 10%, #241a44 0%, #14112f 46%, #0A0820 80%);
}
#sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__grid {
  position: relative; z-index: 3; width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "copy stage" "controls stage" "controls actions";
  gap: 10px clamp(40px, 5vw, 80px); align-items: center;
}
.hero__copy { grid-area: copy; position: relative; z-index: 3; }
.hero__controls { grid-area: controls; position: relative; z-index: 3; }
.hero__actions { grid-area: actions; position: relative; z-index: 3; }
.hero__stage { grid-area: stage; position: relative; z-index: 5; }
.hero__try { margin: 14px 0 6px; font-family: var(--ui); font-size: 13px; color: rgba(236,197,121,.75); letter-spacing: .02em; }
.hero .demo__field { margin-bottom: 16px; }
.hero .demo__field > label { margin-bottom: 9px; }
.hero__actions .btn-row { margin-top: 10px; }
.hero__moon {
  /* fixed so it can descend behind the whole page as you scroll (JS-driven),
     resting behind the biblioteca section. z-index 0 keeps it behind all
     section content (z-index 2) and the hero grid (z-index 3). */
  position: fixed; top: 11%; right: 12%;
  width: 190px; height: 190px; border-radius: 50%; z-index: 0;
  will-change: transform; pointer-events: none;  /* decorative — never blocks clicks */
  background: radial-gradient(circle at 38% 34%, #F6E8C8 0%, var(--gold) 58%, #A87A3A 100%);
  box-shadow: 0 0 90px rgba(236,197,121,.4), 0 0 180px rgba(236,197,121,.2);
  opacity: .9;
}
.hero__inner { position: relative; z-index: 3; }
.hero h1 { font-size: clamp(42px, 5.6vw, 80px); margin: 22px 0 6px; }
.hero h1 .sub-script { display: block; font-style: italic; font-weight: 400; font-size: .52em; color: rgba(232,230,238,.8); margin-top: .15em; }
.hero .lead { max-width: 480px; margin: 16px 0 8px; }
.hero__note { margin-top: 18px; font-family: var(--ui); font-size: 12.5px; letter-spacing: .04em; color: rgba(232,230,238,.5); }

.hero__cta--mobile { display: none; }

/* hero phone */
.hero__device { position: relative; z-index: 2; display: flex; justify-content: center; }
.hero__device .phone { width: 300px; }
.phone {
  position: relative; width: 300px; padding: 11px; border-radius: 46px;
  background: linear-gradient(150deg, #33333f, #0c0c16 32%, #16161f 62%, #33333f);
  box-shadow: 0 50px 90px rgba(0,0,0,.6), 0 12px 30px rgba(0,0,0,.5),
    inset 0 1px 1px rgba(255,255,255,.16), 0 0 0 1px rgba(236,197,121,.18);
}
.phone::before { content:""; position:absolute; inset:5px; border-radius:41px; box-shadow: inset 0 0 0 1.4px rgba(236,197,121,.26); pointer-events:none; z-index:3; }
.phone__screen { border-radius: 36px; overflow: hidden; background: #15122a; aspect-ratio: 1080 / 2340; }
.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero__device::after {
  content: ""; position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: 460px; height: 600px; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(236,197,121,.28), rgba(212,163,90,.07) 45%, transparent 70%);
  filter: blur(6px);
}
.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--ui); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(232,230,238,.45); }
.scroll-hint span { display: block; width: 1px; height: 34px; margin: 10px auto 0;
  background: linear-gradient(var(--gold), transparent); animation: hintpulse 2.6s var(--ease) infinite; }
@keyframes hintpulse { 0%,100%{opacity:.3; transform:scaleY(.7)} 50%{opacity:1; transform:scaleY(1)} }

/* desktop: bigger book, optically centered in the hero */
@media (min-width: 901px) {
  .hero { padding: 128px 0 54px; }
  .hero h1 { font-size: clamp(42px, 5vw, 66px); }
  .hero__stage { margin-top: 42px; }  /* nudge the book down — it sat too high */
  /* when the cover swings open it reaches left toward the copy — shift the whole
     card (book + "ouvir" together, so nothing dealigns) right to clear the text */
  .hero .bookcard.is-open { transform: translateX(16%); transition: transform .5s var(--ease); }
  .hero__stage .bookcard { width: min(382px, 31vw); }
  /* stores live under the book — the right column is book + play + get-it */
  .hero__actions { text-align: center; align-self: start; }
  .hero__actions .btn-row { justify-content: center; margin-top: 6px; }
  .hero__actions .hero__note { margin-top: 14px; }
  .hero__copy .kicker { margin-top: 4px; }
}

/* ---------- section frame ---------- */
.section { position: relative; z-index: 2; padding: clamp(80px, 11vw, 150px) 0; }
.shell { width: var(--shell); margin: 0 auto; }
.section--plum { position: relative; }
/* same cloud treatment: feathered dark panel so the moon slips behind it softly */
.section--plum::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #0A0820, #181232 40%, #0A0820);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}
.section-head { max-width: 760px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 56px); margin: 18px 0 0; }
.section-head .lead { margin-top: 20px; }

/* ---------- manifesto strip ---------- */
.manifesto { text-align: center; padding: clamp(70px,10vw,130px) 0; }
.manifesto p { font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 3.6vw, 46px); line-height: 1.32; color: #F2E8CF; max-width: 18ch; margin: 0 auto; }
.manifesto .accent { color: var(--gold); }
.manifesto__actions { justify-content: center; margin-top: 34px; }

/* ---------- science stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 64px; }
.stat {
  position: relative; padding: 40px 36px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(243,227,194,.05), rgba(243,227,194,.015));
  border: 1px solid rgba(236,197,121,.16);
  overflow: hidden;
}
.stat::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 80% at 0% 0%, rgba(236,197,121,.08), transparent 55%); pointer-events:none; }
.stat__num { font-family: var(--display); font-weight: 600; font-size: clamp(52px, 6vw, 78px); line-height: 1; }
.stat__label { font-family: var(--display); font-style: italic; font-size: clamp(20px,2vw,25px); color: #F2E8CF; margin: 6px 0 12px; }
.stat__body { font-size: 15.5px; color: rgba(232,230,238,.72); }
.stat__src { margin-top: 18px; font-family: var(--ui); font-size: 11.5px; font-style: normal; letter-spacing: .02em; color: rgba(236,197,121,.62); }
.science-foot { margin-top: 40px; text-align: center; font-family: var(--ui); font-size: 12.5px; color: rgba(232,230,238,.45); letter-spacing: .02em; }

/* ---------- feature rows ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.feature + .feature { margin-top: clamp(90px, 11vw, 150px); }
.feature--flip .feature__media { order: 2; }
.feature__media { display: flex; justify-content: center; position: relative; }
.feature__media .phone { width: 270px; }
.feature__media::after {
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: 380px; height: 520px; z-index:-1; border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(134,114,159,.28), transparent 68%); filter: blur(10px);
}
.feature__tag { font-family: var(--ui); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); opacity: .85; }
.feature h3 { font-size: clamp(28px, 3.4vw, 42px); margin: 14px 0 16px; }
.feature p { color: rgba(232,230,238,.78); font-size: 16.5px; max-width: 46ch; }
.feature__science { margin-top: 18px; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ui); font-size: 12.5px; letter-spacing: .02em; color: rgba(236,197,121,.7);
  padding: 7px 14px; border: 1px solid rgba(236,197,121,.24); border-radius: 999px; }
.feature__science::before { content:"✦"; }

/* ---------- secondary feature grid ---------- */
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.mini {
  padding: 30px 28px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid rgba(236,197,121,.14);
  transition: transform .4s var(--ease), border-color .4s;
}
.mini:hover { transform: translateY(-4px); border-color: rgba(236,197,121,.34); }
.mini__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(236,197,121,.12); border: 1px solid rgba(236,197,121,.28); margin-bottom: 18px; }
.mini__ic svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
.mini h4 { font-family: var(--display); font-size: 23px; font-weight: 600; color: #F4ECD6; margin-bottom: 8px; }
.mini p { font-size: 14.5px; color: rgba(232,230,238,.68); }

/* ---------- you-too / calm emotional ---------- */
.calm { position: relative; text-align: center; overflow: hidden; }
/* the moon drifts behind this section like behind a cloud — the dark panel lives
   on a ::before whose top/bottom edges are feathered (masked to transparent) so
   the moon fades in/out softly instead of hitting a hard rectangular cut */
.calm::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 120%, #2A1C42 0%, #120F2C 55%, #0A0820 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}
.calm__moon { width: 130px; height: 130px; border-radius: 50%; margin: 0 auto 30px;
  background: radial-gradient(circle at 38% 34%, #F6E8C8, var(--gold) 60%, #A87A3A);
  box-shadow: 0 0 70px rgba(236,197,121,.4); }
.calm h2 { font-size: clamp(32px, 4.6vw, 58px); }
.calm .lead { max-width: 560px; margin: 22px auto 0; }
.calm__src { margin-top: 22px; font-family: var(--ui); font-size: 12px; color: rgba(236,197,121,.55); letter-spacing: .02em; }

/* ---------- final CTA ---------- */
/* z-index below the moon (0) so the moon rests IN FRONT of this last section —
   a nice touch as it arrives at "A primeira história é hoje" (moon is
   pointer-events:none, so it never blocks the download buttons). */
.final { position: relative; z-index: -1; text-align: center; padding: clamp(100px,13vw,180px) 0; overflow: hidden;
  background: radial-gradient(100% 80% at 50% 0%, #1c1538 0%, #0A0820 70%); }
.final__lockup { width: clamp(150px, 24vw, 240px); margin: 0 auto 30px; filter: drop-shadow(0 14px 40px rgba(0,0,0,.5)); }
.final h2 { font-size: clamp(36px, 5.4vw, 70px); }
.final .lead { margin: 20px auto 36px; max-width: 520px; }
.final .btn-row { justify-content: center; }
.final::before { content:""; position:absolute; left:50%; top:14%; transform:translateX(-50%);
  width: 600px; height: 600px; max-width: 90vw; border-radius: 50%; pointer-events:none;
  background: radial-gradient(circle, rgba(236,197,121,.16), transparent 62%);
  animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%,100%{ opacity:.6; transform:translateX(-50%) scale(1) } 50%{ opacity:1; transform:translateX(-50%) scale(1.08) } }

/* ---------- footer ---------- */
.footer { position: relative; z-index: 2; border-top: 1px solid rgba(236,197,121,.12);
  padding: 60px 0 50px; background: #07061a; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer__brand img.word { height: 26px; margin-bottom: 14px; }
.footer__brand p { font-size: 14px; color: rgba(232,230,238,.55); max-width: 34ch; }
.footer__cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer__col h5 { font-family: var(--ui); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); opacity:.8; margin-bottom: 14px; }
.footer__col a { display: block; font-family: var(--ui); font-size: 14px; color: rgba(232,230,238,.66); margin-bottom: 10px; transition: color .3s; }
.footer__col a:hover { color: #fff; }
.footer__bottom { margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--ui); font-size: 12px; color: rgba(232,230,238,.4); }
.footer__bottom .sources { max-width: 70ch; line-height: 1.7; }

/* ---------- interactive demo ---------- */
.demo { position: relative; overflow: hidden;
  background: linear-gradient(180deg, #0A0820, #15112e 45%, #0A0820); }
.demo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; margin-top: 60px; }
.demo__controls { max-width: 460px; }
.demo__field { margin-bottom: 30px; }
.demo__field > label { display: block; font-family: var(--ui); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); opacity: .85; margin-bottom: 12px; }
.demo__input {
  width: 100%; padding: 15px 18px; border-radius: 14px;
  background: rgba(243,227,194,.06); border: 1px solid rgba(236,197,121,.28);
  color: #F6ECD6; font-family: var(--display); font-size: 24px; letter-spacing: .01em;
  transition: border-color .3s, background .3s; outline: none;
}
.demo__input::placeholder { color: rgba(232,230,238,.4); }
.demo__input:focus { border-color: rgba(236,197,121,.7); background: rgba(243,227,194,.09); }
.demo__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.demochip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; min-height: 44px; cursor: pointer;
  font-family: var(--ui); font-size: 13.5px; font-weight: 500; color: rgba(232,230,238,.82);
  background: rgba(255,255,255,.035); border: 1px solid rgba(236,197,121,.2); border-radius: 999px;
  transition: transform .25s var(--ease), border-color .25s, background .25s, color .25s;
}
.demochip svg { width: 17px; height: 17px; opacity: .8; }
.demochip:hover { border-color: rgba(236,197,121,.45); transform: translateY(-1px); }
.demochip.is-on { background: rgba(236,197,121,.16); border-color: rgba(236,197,121,.75);
  color: #F6ECD6; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(212,163,90,.22); }
.demochip.is-on svg { opacity: 1; color: var(--gold); }

/* book preview card */
.demo__stage { display: flex; justify-content: center; position: relative; }
.demo__stage::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: 440px; height: 540px; max-width: 100%; z-index:-1; border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(236,197,121,.2), transparent 66%); filter: blur(12px); }
.bookcard { position: relative; width: 320px; max-width: 82vw; perspective: 1500px; }
.bookcard__book { position: relative; aspect-ratio: 0.66; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.6,0,.25,1); }
/* cream page-coloured backing, BEHIND the page — so as the cover swings open the
   revealed area reads as the PAGE appearing (not leather), and closing reads as
   the page being covered. Left third darkens toward the spine like the open spread. */
.bookcard__backing { position:absolute; inset:0; border-radius:4px 7px 7px 4px; transform: translateZ(-9px);
  background: linear-gradient(90deg, #2a1826 0%, #2a1826 33%, #e7dabb 33%, #efe6cf 100%); }
/* on open, slide the book right so the swinging cover clears the page text on the left */
.bookcard.is-open .bookcard__book { transform: translateX(30%); }

/* Reading page revealed when the cover opens — cream paper, text + illustration */
.bookcard__page { position:absolute; inset:0; border-radius:4px 7px 7px 4px; overflow:hidden;
  background: #efe6cf;   /* solid cream so the dark page text always reads */
  box-shadow: inset 0 0 0 1px rgba(120,95,55,.25), inset 26px 0 46px -26px rgba(110,82,45,.5);
  padding: 11% 9% 8% 14%; display:flex; flex-direction:column;
  transform: translateZ(-6px); opacity: 0; transition: opacity .3s ease; }
/* the page only appears AFTER the cover has swung open → it can't show through the cover mid-swing */
.bookcard.is-open .bookcard__page { opacity: 1; transition: opacity .35s ease .3s; }
.bookcard__page::before { content:""; position:absolute; left:0; top:0; bottom:0; width:7%;
  background: linear-gradient(90deg, rgba(110,82,45,.3), transparent); }
.bookcard__line { font-family: var(--body); font-size: 14.5px; line-height: 1.62; color: #4a3520; margin:0; }
/* illuminated drop-cap first letter (app reference: gold display serif) */
.bookcard__line::first-letter { font-family: var(--display); font-size: 3.5em; font-weight: 600;
  color: var(--gold-lo); line-height: .82; float: left; margin: .04em .09em -.02em 0; letter-spacing: -1px; }
.bookcard__line .w { position: relative; transition: color .14s, text-shadow .14s; }
.bookcard__line .w.done { color: #2f2110; }
/* the pretty landing-page highlight, adapted for the cream page: the word warms
   to gold, a soft candlelight halo glows behind it, + the gold underline-glow */
.bookcard__line .w.on { color:#5a3d0e; }
.bookcard__line .w.on::before { content:""; position:absolute; left:-6px; right:-6px; top:-3px; bottom:-1px; z-index:-1;
  border-radius:7px; background: radial-gradient(closest-side, rgba(236,197,121,.62), rgba(236,197,121,0) 78%); }
.bookcard__line .w.on::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 9px rgba(220,165,55,.95); }
.bookcard__pageill { margin-top:auto; align-self:center; width: 92%; aspect-ratio:1; opacity:0; transform: scale(.92); }
.bookcard.is-open .bookcard__pageill { opacity:1; transform:none; transition: opacity .7s ease .55s, transform .7s var(--ease) .55s; }
.bookcard__pageill img { width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 2px 6px rgba(150,110,40,.25)); }

/* Hardcover that swings open on its spine — two faces (front + inside) */
.bookcard__cover { position:absolute; inset:0; transform-origin: 1.5% center; transform-style: preserve-3d;
  cursor:pointer; transition: transform .5s cubic-bezier(.6,0,.25,1); will-change: transform; }
.bookcard.is-open .bookcard__cover { transform: rotateY(-176deg); }
.bookcard__face { position:absolute; inset:0; border-radius:4px 7px 7px 4px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow: 0 34px 66px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.4); }
/* front leather face — darker, edge-shaded, grazing light upper-left, real grain */
.bookcard__face--front { background: #4a2a42 url("assets/book/leather_plum.png?v=2") repeat; background-size: 130px; }
/* grazing light (upper-left) + edge vignette */
.bookcard__face--front::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(135deg, rgba(255,246,233,.05), transparent 20%),
    radial-gradient(ellipse at 50% 44%, transparent 50%, rgba(0,0,0,.26)); }
/* form-shading at the edges + foot (the app's LeatherPainter look) */
.bookcard__face--front::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: inset 14px 0 28px -22px rgba(0,0,0,.5), inset -12px 0 26px -20px rgba(0,0,0,.45),
              inset 0 -18px 34px -22px rgba(0,0,0,.55), inset 0 0 46px rgba(0,0,0,.28); }
/* inside-front-cover face shown when open — darker endpaper, NOT the front mirrored */
.bookcard__face--inside { transform: rotateY(180deg);
  background: linear-gradient(158deg, #3a2233, #2b1926);
  box-shadow: inset 0 0 50px rgba(0,0,0,.55); }
.bookcard__face--inside::before { content:""; position:absolute; right:0; top:0; bottom:0; width:10%;
  background: linear-gradient(270deg, rgba(0,0,0,.4), transparent); }

.bookcard__frame { position:absolute; inset: 3.4% 4%; border: 1px solid rgba(236,197,121,.46); border-radius: 2px; pointer-events:none; }
/* watercolor plate — lowered, mounted flush (no drop shadow → no "popping out") */
.bookcard__plate { position:absolute; top: 13%; left: 13%; right: 13%; height: 29%; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(236,197,121,.6); background:#1A1424; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.bookcard__art { position:absolute; inset:0; background:#1A1424 center/cover no-repeat; transition: background-image .5s var(--ease); }
.bookcard__meta { position:absolute; top: 46%; left: 8%; right: 8%; text-align:center; }
.bookcard__pre { font-family: var(--display); font-style: italic; font-size: 13px; color: rgba(236,197,121,.82); letter-spacing:.05em; }
.bookcard__name { font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1.04; margin-top: 6px;
  background: linear-gradient(120deg, var(--gold-lo), var(--gold-hi) 40%, var(--gold) 60%, #F8E6B8 78%, var(--gold-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); }
.bookcard__vol { position:absolute; bottom: 6.5%; left:0; right:0; text-align:center; font-family: var(--display);
  font-style: italic; font-size: 11px; color: var(--gold); letter-spacing:.24em; opacity:.85; }

/* ---- cover-as-input: the name is typed straight onto the gold plate ---- */
.bookcard__name[contenteditable] {
  outline: none; cursor: text; min-height: 1.06em;
  text-transform: capitalize; caret-color: var(--gold-hi);
  border-bottom: 1px dashed transparent;   /* invisible once a name lives on the cover */
  transition: border-color .3s;
  -webkit-user-select: text; user-select: text;
}
.bookcard__name[contenteditable]:empty { border-bottom-color: rgba(236,197,121,.38); }
.bookcard__name[contenteditable]:focus { border-bottom-color: rgba(236,197,121,.55); }
.bookcard__name[contenteditable]:empty::before {
  content: attr(data-placeholder);
  background: none; -webkit-text-fill-color: currentColor;
  color: rgba(236,197,121,.42); font-style: italic; font-weight: 400;
  animation: nameInvite 2.4s ease-in-out infinite;
}
@keyframes nameInvite { 0%,100% { opacity: .42; } 50% { opacity: .8; } }

/* chapter heading on the open reading page */
.bookcard__chap { font-family: var(--display); font-style: italic; font-size: 11.5px;
  letter-spacing: .22em; text-transform: uppercase; color: #a9823f; margin-bottom: 8px; }
.bc-corner { position:absolute; width: 25%; pointer-events:none; opacity:.92; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.bc-corner.tl { top: 1.6%; left: 1.4%; }
.bc-corner.tr { top: 1.6%; right: 1.4%; transform: scaleX(-1); }
.bc-corner.bl { bottom: 1.6%; left: 1.4%; transform: scaleY(-1); }
.bc-corner.br { bottom: 1.6%; right: 1.4%; transform: scale(-1,-1); }
.bookcard__spine { position:absolute; top:0; bottom:0; left:0; width: 7%; background: linear-gradient(90deg, rgba(0,0,0,.45), transparent); pointer-events:none; }
.bookcard__sparks { position:absolute; inset:0; pointer-events:none; z-index:4; }
.bookcard__sparks .spark { position:absolute; width:7px; height:7px; border-radius:50%;
  background: radial-gradient(circle, #fff7d8, #ecc579 50%, transparent 70%);
  animation: sparkUp 1.3s var(--ease) forwards; }
@keyframes sparkUp { 0%{ transform: translateY(0) scale(0); opacity:0 } 30%{ transform: translateY(-14px) scale(1); opacity:1 } 100%{ transform: translateY(-46px) scale(.2); opacity:0 } }

/* opening line under cover */
.bookcard__read { margin-top: 24px; padding: 22px 24px; border-radius: 16px; position: relative;
  background: linear-gradient(180deg, rgba(243,227,194,.06), rgba(243,227,194,.02));
  border: 1px solid rgba(236,197,121,.18); }
.bookcard__readhead { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.bookcard__readhead span { font-family: var(--ui); font-size: 10.5px; letter-spacing:.2em; text-transform:uppercase; color: rgba(236,197,121,.7); }
.bookcard__play { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family: var(--ui); font-size: 12.5px; font-weight:500; color:#2A1A08;
  padding: 8px 15px; border:none; border-radius:999px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  box-shadow: 0 4px 14px rgba(212,163,90,.32); transition: transform .25s var(--ease); }
.bookcard__play:hover { transform: translateY(-1px); }
.bookcard__play svg { width: 13px; height: 13px; fill: #2A1A08; }
.is-playing .bookcard__play .ic-play { display:none; }
.bookcard__play .ic-pause { display:none; }
.is-playing .bookcard__play .ic-pause { display:inline; }
.demo__hint { margin-top: 18px; font-family: var(--ui); font-size: 12.5px; color: rgba(232,230,238,.45); }
.is-writing .bookcard__cover { transform: translateY(-4px); }

/* ---------- store "em breve" + trust ---------- */
.store--soon { opacity: .5; pointer-events: none; filter: saturate(.6); }
.final__trust { margin-top: 26px; font-family: var(--ui); font-size: 13px; color: rgba(232,230,238,.6); }
.final__trust a { color: rgba(236,197,121,.8); border-bottom: 1px solid rgba(236,197,121,.3); transition: color .3s; }
.final__trust a:hover { color: var(--gold-hi); }

/* ---------- calm section phone ---------- */
.calm__device { display: flex; justify-content: center; margin: 34px auto 8px; }
.calm__device .phone { width: 230px; }

/* ---------- reveal (progressive-enhancement, freeze-proof) ---------- */
/* default: fully visible — if JS never runs or a transition freezes, content still shows */
[data-reveal] { opacity: 1; transform: none; }
/* only once JS confirms it can drive the animation do we hide-then-reveal */
html.js-reveal [data-reveal] { opacity: 0; transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease); }
html.js-reveal [data-reveal="fade"] { transform: none; }
html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav__links { position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column;
    background: rgba(8,7,22,.96); backdrop-filter: blur(18px); padding: 96px 24px 36px; gap: 26px;
    transform: translateY(-100%); transition: transform .45s var(--ease); border-bottom: 1px solid rgba(236,197,121,.16); }
  .nav--open .nav__links { transform: none; }
  .nav__links a { font-size: 18px; }
  .nav__cta { display: none; }
  .nav__burger { display: block; z-index: 60; }
  .nav--open .nav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav--open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav--open .nav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .stats { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; gap: 36px; }
  .feature--flip .feature__media { order: 0; }
  .feature__media .phone { width: 240px; }
  .mini-grid { grid-template-columns: 1fr; }
  .footer__top { flex-direction: column; }
  /* ---- mobile hero: the living book, pinned while you choose ---- */
  .hero { min-height: auto; padding: 86px 0 44px; }
  .hero__grid { display: flex; flex-direction: column; gap: 0; width: 100%; text-align: center; }
  .hero__copy { order: 1; padding: 12px 22px 0; }
  .hero .kicker { font-size: 10.5px; letter-spacing: .3em; }
  .hero .kicker::before, .hero .kicker::after { width: 16px; }
  .hero h1 { font-size: clamp(31px, 9vw, 46px); margin: 14px 0 4px; }
  .hero h1 .sub-script { font-size: .52em; margin-top: .22em; }
  .hero .lead { font-size: 14.5px; line-height: 1.55; margin: 12px auto 0; max-width: 34ch; }
  .hero__try { font-size: 12px; margin: 10px auto 2px; }
  /* the book pins under the nav while the chips scroll beneath it — every
     choice updates the cover in full view (cover-as-input stays reachable) */
  .hero__stage { order: 2; position: sticky; top: 62px; z-index: 6; margin: 12px 0 0; }
  .hero__stage .bookcard { width: min(57vw, 236px); }
  .bookcard__read { margin-top: 12px; padding: 12px 16px; }
  .hero__controls { order: 3; padding: 20px 20px 0; max-width: none; margin: 0 auto; }
  .hero__controls .demo__chips { justify-content: center; }
  .hero__actions { order: 4; padding: 24px 24px 0; }
  .hero__actions .btn-row { display: none; }
  .hero__note { font-size: 12px; margin-top: 4px; }
  .hero__cta--mobile { display: inline-flex; margin-top: 14px; }
  .hero__moon { display: none; }   /* too crowded on the single-column mobile hero */
  /* the book stays centred on mobile (no left text to clear), so it can't slide off-screen */
  .bookcard.is-open .bookcard__book { transform: none; }
  .scroll-hint { display: none; }
  .calm__device .phone { width: 200px; }
}
@media (max-width: 560px) {
  .hero__moon { width: 138px; height: 138px; }
  .hero__stage .bookcard { width: min(60vw, 228px); }
  .bookcard__name { font-size: 30px; }
  .bookcard__pre { font-size: 11px; }
  .store { padding: 10px 18px; }
}