:root{
  --red:#F2938C; --yellow:#F6CE5E; --green:#93C9A0; --blue:#88BEDC;
  --bg:#FAF7F0; --ink:#5b5346; --ink-soft:#8c8273; --ink-faint:#b4ab9c;
  --card:#fffdf8;
  --radius:10px;
  --shadow-sm:0 2px 8px rgba(91,83,70,.06);
  --shadow:0 10px 30px rgba(91,83,70,.10);
  --shadow-lg:0 24px 60px rgba(91,83,70,.14);
  --maxw:1180px;
  --head:'Fredoka', system-ui, sans-serif;
  --body:'Nunito', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--head); font-weight:600; line-height:1.1; margin:0; color:var(--ink); letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:var(--head); font-weight:600; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green); display:inline-flex; align-items:center; gap:.5em;
}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:currentColor; opacity:.6;}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--head); font-weight:600; font-size:1.02rem;
  border:none; border-radius:var(--radius); padding:.82em 1.4em; cursor:pointer;
  display:inline-flex; align-items:center; gap:.55em; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-align:center;
}
.btn--primary{ background:var(--green); color:#33503c; box-shadow:0 8px 18px rgba(101,166,123,.35); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(101,166,123,.42); background:#86c094;}
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px rgba(91,83,70,.16); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 2px rgba(91,83,70,.32); transform:translateY(-1px);}
.btn--block{ width:100%; justify-content:center; }
.btn__heart{width:18px;height:18px;}

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(250,247,240,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(91,83,70,.07);
}
.site-head__in{display:flex; align-items:center; gap:20px; height:74px;}
.logo{height:34px; width:auto;}
.nav{display:flex; gap:26px; margin-left:18px;}
.nav a{font-family:var(--head); font-weight:500; font-size:1rem; color:var(--ink-soft); transition:color .15s; white-space:nowrap;}
.nav a:hover{color:var(--ink);}
.head-right{margin-left:auto; display:flex; align-items:center; gap:14px;}
.name-pill{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--head); font-weight:500; font-size:.95rem; color:var(--ink-soft);
  background:var(--card); border:1.5px solid rgba(91,83,70,.12); border-radius:999px;
  padding:.4em .85em .4em .7em; cursor:pointer; transition:border-color .15s, color .15s;
}
.name-pill:hover{border-color:rgba(91,83,70,.28); color:var(--ink);}
.name-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-faint); transition:background .2s;}
.name-pill.is-set .dot{background:var(--green);}
.name-pill.is-set{color:var(--ink);}

/* ---------- Hero ---------- */
.hero{position:relative; padding:46px 0 30px;}
.hero__grid{display:grid; grid-template-columns:0.92fr 1.08fr; gap:38px; align-items:center;}
.hero__figure{position:relative; display:flex; justify-content:center;}
.hero__stage{
  position:relative; width:100%; max-width:430px; aspect-ratio:1/1;
  border-radius:24px;
  background:
    radial-gradient(120% 120% at 50% 30%, #fff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(80% 70% at 50% 78%, rgba(147,201,160,.30), rgba(147,201,160,0) 70%),
    radial-gradient(70% 70% at 26% 26%, rgba(246,206,94,.34), rgba(246,206,94,0) 70%),
    radial-gradient(70% 70% at 78% 36%, rgba(136,190,220,.30), rgba(136,190,220,0) 70%);
  display:grid; place-items:center;
}
.hero__cover-wrap{position:relative; display:inline-block; width:62%;}
.hero__hamimi{display:block; width:100%; border-radius:10px; filter:drop-shadow(0 18px 30px rgba(91,83,70,.22));}
.hero__cover-name{position:absolute; top:8%; left:50%; transform:translateX(-50%); font-family:var(--head); font-weight:700; font-size:clamp(.95rem,3.5vw,1.4rem); color:#4a3a28; white-space:nowrap; pointer-events:none; text-shadow:0 1px 4px rgba(255,255,255,.85);}
.heart-glow{
  position:absolute; left:50%; top:60%; width:34%; aspect-ratio:1/1; transform:translate(-50%,-50%);
  border-radius:50%; z-index:3; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,252,235,.95) 0%, rgba(255,236,170,.55) 35%, rgba(255,236,170,0) 70%);
  animation:beat 3.4s ease-in-out infinite;
}
@keyframes beat{
  0%,100%{ transform:translate(-50%,-50%) scale(.86); opacity:.55; }
  50%{ transform:translate(-50%,-50%) scale(1.12); opacity:1; }
}
.float-dot{position:absolute; border-radius:50%; opacity:.5; animation:floaty 7s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero__copy{max-width:560px;}
.hero h1{font-size:clamp(2.1rem, 4.4vw, 3.5rem); margin:.5em 0 .42em; text-wrap:balance;}
.hero h1 .hl{color:var(--green); position:relative; white-space:nowrap;}
.hero__lede{font-size:1.18rem; color:var(--ink-soft); max-width:30em; margin-bottom:1.4em;}
.hero__cta{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.hero__note{font-family:var(--head); font-weight:500; color:var(--ink-soft); font-size:.98rem; display:inline-flex; align-items:center; gap:.5em;}
.hero__note b{color:var(--ink); font-weight:600;}
.tag-strip{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;}
.tag{font-family:var(--head); font-weight:500; font-size:.86rem; color:var(--ink-soft);
  background:var(--card); border:1.5px solid rgba(91,83,70,.1); border-radius:999px; padding:.34em .8em;}

/* ---------- Section base ---------- */
section{position:relative;}
.sec{padding:64px 0;}
.sec-head{max-width:42rem; margin:0 auto 40px; text-align:center;}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem); margin:.32em 0 .35em; text-wrap:balance;}
.sec-head p{color:var(--ink-soft); font-size:1.12rem;}

/* ---------- Heart mechanic ---------- */
.heart-sec{background:linear-gradient(180deg,#fff8ec 0%, #faf3e4 100%);}
.heart-layout{display:grid; grid-template-columns:0.85fr 1.15fr; gap:46px; align-items:center;}
.living{
  position:relative; background:var(--card); border-radius:20px; padding:26px;
  box-shadow:var(--shadow); display:grid; place-items:center; aspect-ratio:1/1.02;
  overflow:hidden;
}
.living::after{content:""; position:absolute; inset:0; border-radius:20px; box-shadow:inset 0 0 0 1.5px rgba(91,83,70,.05);}
.living__bg{position:absolute; width:120%; height:120%; border-radius:50%;
  background:radial-gradient(circle at 50% 44%, rgba(246,206,94,.30), rgba(246,206,94,0) 62%);}
.living__hamimi{width:74%; position:relative; z-index:2; filter:drop-shadow(0 14px 22px rgba(91,83,70,.14));}
.living__glow{position:absolute; left:50%; top:58.5%; width:30%; aspect-ratio:1/1; transform:translate(-50%,-50%);
  z-index:3; border-radius:50%; mix-blend-mode:screen; pointer-events:none;
  background:radial-gradient(circle, rgba(255,252,235,.98) 0%, rgba(255,233,160,.6) 36%, rgba(255,233,160,0) 70%);
  animation:beat 3.4s ease-in-out infinite;}
.living__cap{position:absolute; bottom:18px; left:0; right:0; text-align:center; z-index:4;
  font-family:var(--head); font-weight:500; font-size:.92rem; color:var(--ink-soft);}

.states{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.state{
  background:var(--card); border-radius:var(--radius); padding:20px 20px 18px;
  box-shadow:var(--shadow-sm); display:flex; gap:16px; align-items:center;
  border:1px solid rgba(91,83,70,.05);
}
.belly{
  flex:0 0 76px; width:76px; height:76px; border-radius:50%; position:relative;
  background:radial-gradient(circle at 38% 30%, #f9da7c, #f1c34a 68%, #e6b23a);
  display:grid; place-items:center;
  box-shadow:inset 0 -6px 10px rgba(180,140,30,.25), inset 0 4px 8px rgba(255,255,255,.5);
}
.belly__glow{position:absolute; width:90%; height:90%; border-radius:50%; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,252,235,1) 0%, rgba(255,233,160,.7) 34%, rgba(255,233,160,0) 68%);}
.belly svg{width:38px; height:38px; position:relative; z-index:2;}
.state__t{font-family:var(--head); font-weight:600; font-size:1.04rem; margin-bottom:.12em;}
.state__d{font-size:.92rem; color:var(--ink-soft); line-height:1.45;}
/* state variants */
.belly--bright .belly__glow{opacity:1; transform:scale(1.15);}
.belly--bright svg path{fill:#fff7e2;}
.belly--dim .belly__glow{opacity:.32; transform:scale(.7);}
.belly--dim svg path{fill:#efd897;}
.belly--dark{filter:saturate(.82) brightness(.95);}
.belly--dark .belly__glow{opacity:0;}
.belly--dark svg path{fill:#c2ab7e;}
.belly--relit .belly__glow{opacity:.7; animation:beat 2.6s ease-in-out infinite;}
.belly--relit svg path{fill:#fff0c8;}

/* ---------- Category nav ---------- */
.finder{background:var(--card); border-radius:20px; box-shadow:var(--shadow); padding:34px 34px 30px;
  border:1px solid rgba(91,83,70,.05); margin-top:10px;}
.axis + .axis{margin-top:24px;}
.axis__label{font-family:var(--head); font-weight:600; font-size:1.06rem; margin-bottom:12px; display:flex; align-items:center; gap:.55em;}
.axis__label .q{display:grid; place-items:center; width:24px;height:24px;border-radius:50%;
  font-size:.82rem; color:#fff;}
.axis--age .q{background:var(--blue);} .axis--theme .q{background:var(--red);}
.chips{display:flex; gap:10px; flex-wrap:wrap;}
.chip{
  font-family:var(--head); font-weight:500; font-size:.98rem; color:var(--ink);
  background:var(--bg); border:1.6px solid rgba(91,83,70,.12); border-radius:var(--radius);
  padding:.5em 1.05em; cursor:pointer; transition:all .16s ease; display:inline-flex; align-items:center; gap:.5em;
}
.chip:hover{border-color:rgba(91,83,70,.3);}
.chip.is-active{background:var(--ink); color:#fff8ec; border-color:var(--ink);}
.chip .swatch{width:11px;height:11px;border-radius:50%;}

/* ---------- Book grid ---------- */
.grid-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:40px 0 22px; flex-wrap:wrap;}
.grid-head h3{font-size:1.5rem;}
.grid-head .count{font-family:var(--head); font-weight:500; color:var(--ink-soft); font-size:.96rem;}
.books{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.book{
  background:var(--card); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); border:1px solid rgba(91,83,70,.06);
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease, opacity .25s ease;
}
.book:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.book.is-dimmed{opacity:.32; filter:saturate(.7);}
.cover{
  aspect-ratio:1/1; position:relative; padding:18px; display:flex; flex-direction:column;
  justify-content:flex-end; color:#fff; overflow:hidden;
  background:linear-gradient(158deg, color-mix(in srgb, var(--accent) 48%, #fff), var(--accent));
}
.cover::before{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 78% 16%, rgba(255,255,255,.4), rgba(255,255,255,0) 60%);}
.cover__photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}
.cover--photo::before{display:none;}
.cover__badge{position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--head); font-weight:600; font-size:.78rem; letter-spacing:.02em;
  background:rgba(255,255,255,.9); color:var(--ink); border-radius:999px; padding:.28em .72em; box-shadow:var(--shadow-sm);}
.cover__heart{position:absolute; top:13px; right:14px; z-index:2; width:26px; height:26px; opacity:.92;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.12));}
.cover__inner{position:relative; z-index:2;}
.cover__eyebrow{font-family:var(--head); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.92;}
.cover__big{font-family:var(--head); font-weight:700; font-size:1.62rem; line-height:1.04; margin-top:.12em;
  word-break:break-word; text-shadow:0 2px 8px rgba(0,0,0,.12);}
.cover__theme{font-family:var(--head); font-weight:500; font-size:.92rem; margin-top:.5em; opacity:.95;}
.book__body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1;}
.book__title{font-size:1.16rem; font-weight:600; margin-bottom:.18em;}
.book__sub{font-family:var(--head); font-weight:500; color:var(--ink-soft); font-size:.9rem; margin-bottom:.5em;}
.book__blurb{font-size:.94rem; color:var(--ink-soft); line-height:1.5; flex:1;}
.book__foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px;}
.price{font-family:var(--head); font-weight:600; font-size:1.18rem; color:var(--ink);}
.price small{font-weight:500; font-size:.78rem; color:var(--ink-soft); display:block; line-height:1; margin-top:1px;}
.book__cta{font-family:var(--head); font-weight:600; font-size:.92rem; color:#33503c; background:var(--green);
  border:none; border-radius:8px; padding:.6em 1em; cursor:pointer; transition:background .15s, transform .15s;}
.book__cta:hover{background:#86c094; transform:translateY(-1px);}
/* soon cards */
.book--soon .cover{background:repeating-linear-gradient(135deg,#efe9dc,#efe9dc 12px,#e9e2d2 12px,#e9e2d2 24px); color:var(--ink-soft);}
.book--soon .cover::before{display:none;}
.book--soon .cover__big{color:var(--ink); opacity:.55; text-shadow:none;}
.book--soon .cover__inner{border:2px dashed rgba(91,83,70,.28); border-radius:10px; padding:14px;}
.book--soon .cover__badge{background:var(--ink); color:#fff8ec;}
.book--soon .book__cta{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.6px rgba(91,83,70,.22);}
.book--soon .book__cta:hover{background:var(--bg); transform:none;}
.book--soon .soon-label{font-family:var(--head); font-weight:600; color:var(--ink-soft);}

/* ---------- Parent tool ---------- */
.tool-sec{background:linear-gradient(180deg,#f1f7f2,#eaf3ec);}
.tool-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center;}
.tool-copy h2{font-size:clamp(1.7rem,3vw,2.4rem); margin:.3em 0 .45em;}
.tool-copy p{color:var(--ink-soft); font-size:1.1rem; margin-bottom:1.3em; max-width:30em;}
.tool-list{list-style:none; padding:0; margin:0; display:grid; gap:14px;}
.tool-list li{display:flex; gap:13px; align-items:flex-start; font-size:1.02rem;}
.tool-list .ck{flex:0 0 26px; width:26px;height:26px;border-radius:50%; background:var(--green); color:#fff;
  display:grid; place-items:center; margin-top:1px; box-shadow:0 4px 10px rgba(101,166,123,.3);}
.guide{background:var(--card); border-radius:16px; box-shadow:var(--shadow-lg); padding:28px; position:relative;
  border:1px solid rgba(91,83,70,.05);}
.guide::before{content:""; position:absolute; top:-12px; left:28px; right:28px; height:18px; border-radius:10px 10px 0 0;
  background:var(--green); opacity:.35;}
.guide__tab{display:inline-flex; align-items:center; gap:.5em; font-family:var(--head); font-weight:600; color:var(--green);
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px;}
.guide h4{font-size:1.32rem; margin-bottom:6px;}
.guide__intro{color:var(--ink-soft); font-size:.96rem; margin-bottom:18px;}
.guide__q{display:flex; gap:12px; padding:13px 0; border-top:1px solid rgba(91,83,70,.09); align-items:center;}
.guide__q:last-child{border-bottom:1px solid rgba(91,83,70,.09);}
.guide__n{flex:0 0 30px; width:30px;height:30px; border-radius:8px; display:grid; place-items:center;
  font-family:var(--head); font-weight:600; font-size:.95rem; color:#fff;}
.guide__q p{font-size:1rem; color:var(--ink);}

/* ---------- Social proof ---------- */
.voices{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.voice{background:var(--card); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-sm);
  border:1px solid rgba(91,83,70,.05); display:flex; flex-direction:column;}
.voice__q{font-family:var(--head); font-weight:500; font-size:1.16rem; line-height:1.4; margin-bottom:18px; text-wrap:pretty;}
.voice__by{display:flex; align-items:center; gap:11px; margin-top:auto;}
.voice__av{width:42px;height:42px;border-radius:50%; display:grid; place-items:center;
  font-family:var(--head); font-weight:600; color:#fff; font-size:1rem;}
.voice__name{font-family:var(--head); font-weight:600; font-size:.98rem;}
.voice__role{font-size:.85rem; color:var(--ink-soft);}

/* ---------- Price anchor ---------- */
.anchor{padding:30px 0 70px;}
.anchor__card{background:linear-gradient(150deg,#fff5db, #fbeec2); border-radius:24px; padding:46px 44px;
  box-shadow:var(--shadow); display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center;
  position:relative; overflow:hidden; border:1px solid rgba(246,206,94,.4);}
.anchor__card::after{content:""; position:absolute; right:-60px; bottom:-80px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(246,206,94,.5), rgba(246,206,94,0) 70%);}
.anchor h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:.4em; position:relative; z-index:2; text-wrap:balance;}
.anchor p{color:var(--ink-soft); font-size:1.08rem; position:relative; z-index:2; max-width:32em;}
.anchor__buy{position:relative; z-index:2; text-align:center; background:var(--card); border-radius:16px; padding:26px 24px;
  box-shadow:var(--shadow);}
.anchor__price{font-family:var(--head); font-weight:700; font-size:2.6rem; color:var(--ink); line-height:1;}
.anchor__price span{font-size:1.2rem; font-weight:600;}
.anchor__inc{font-size:.86rem; color:var(--ink-soft); margin:10px 0 18px; line-height:1.4;}

/* ---------- Footer ---------- */
.foot{background:#f3eddf; padding:50px 0 34px; border-top:1px solid rgba(91,83,70,.07);}
.foot__top{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:34px;}
.foot__brand{max-width:24rem;}
.foot__brand img{height:30px; margin-bottom:14px;}
.foot__brand p{color:var(--ink-soft); font-size:.96rem;}
.foot__cols{display:flex; gap:64px; flex-wrap:wrap;}
.foot__col h5{font-family:var(--head); font-weight:600; font-size:.95rem; margin:0 0 12px; color:var(--ink);}
.foot__col a{display:block; color:var(--ink-soft); font-size:.94rem; padding:4px 0; transition:color .15s; white-space:nowrap;}
.foot__col a:hover{color:var(--ink);}
.foot__bar{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:22px;
  border-top:1px solid rgba(91,83,70,.1); color:var(--ink-faint); font-size:.86rem;}
.foot__bar .heartline{display:inline-flex; align-items:center; gap:.45em; color:var(--ink-soft);}

/* ---------- Name popup ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px;}
.modal.is-open{display:flex;}
.modal__back{position:absolute; inset:0; background:rgba(74,66,56,.42); backdrop-filter:blur(4px);
  animation:fade .3s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal__card{position:relative; z-index:2; width:min(440px,100%); background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:34px 32px 30px; text-align:center; animation:pop .32s cubic-bezier(.2,.9,.3,1.2);}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.96)}to{opacity:1; transform:none}}
.modal__ham{width:118px; margin:-78px auto 6px; filter:drop-shadow(0 12px 20px rgba(91,83,70,.18));}
.modal__eyebrow{color:var(--green);}
.modal__card h3{font-size:1.55rem; margin:.4em 0 .3em; text-wrap:balance;}
.modal__card p{color:var(--ink-soft); font-size:1rem; margin-bottom:20px;}
.modal__input{width:100%; font-family:var(--head); font-weight:500; font-size:1.15rem; text-align:center; color:var(--ink);
  background:var(--bg); border:1.8px solid rgba(91,83,70,.14); border-radius:var(--radius); padding:.72em 1em; margin-bottom:18px;
  transition:border-color .15s; outline:none;}
.modal__input:focus{border-color:var(--green);}
.modal__input::placeholder{color:var(--ink-faint); font-weight:400;}
.modal__actions{display:flex; flex-direction:column; gap:10px;}
.modal__skip{background:none; border:none; cursor:pointer; font-family:var(--body); font-weight:600; color:var(--ink-soft);
  font-size:.96rem; padding:6px; transition:color .15s;}
.modal__skip:hover{color:var(--ink);}
.modal__x{position:absolute; top:12px; right:12px; z-index:3; width:34px;height:34px; border-radius:50%; border:none;
  background:rgba(91,83,70,.08); color:var(--ink-soft); cursor:pointer; font-size:1.1rem; line-height:1; transition:background .15s;}
.modal__x:hover{background:rgba(91,83,70,.16);}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); z-index:90;
  background:var(--ink); color:#fff8ec; font-family:var(--head); font-weight:500; font-size:.98rem;
  padding:.8em 1.3em; border-radius:999px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s; display:inline-flex; align-items:center; gap:.6em;}
.toast.is-show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero__grid{grid-template-columns:1fr; gap:18px; text-align:center;}
  .hero__copy{margin:0 auto;} .hero__lede{margin-left:auto;margin-right:auto;}
  .hero__cta,.tag-strip{justify-content:center;}
  .hero__stage{max-width:340px;}
  .hero__cover-wrap{width:85%;}
  .heart-layout{grid-template-columns:1fr; gap:30px;}
  .living{max-width:380px; margin:0 auto; width:100%;}
  .tool-grid{grid-template-columns:1fr; gap:34px;}
  .books{grid-template-columns:repeat(2,1fr);}
  .voices{grid-template-columns:1fr;}
  .anchor__card{grid-template-columns:1fr; text-align:center;}
  .anchor p{margin:0 auto;}
  .nav{display:none;}
}
@media(max-width:560px){
  body{font-size:17px;}
  .wrap{padding:0 18px;}
  .states{grid-template-columns:1fr;}
  .books{grid-template-columns:1fr; max-width:340px; margin:0 auto;}
  .hero__cover-wrap{width:92%;}
  .finder{padding:24px 20px;}
  .anchor__card{padding:32px 24px;}
  .head-right .btn{display:none;}
  .voice__q{font-size:1.08rem;}
}


/* Grid-Cover-Mockup: gezeichnetes Kind + Hamimi je Buch (erscheint nach Foto-Upload) */
.cover__scene{
  position:absolute; z-index:2; left:0; right:0; top:8%; height:54%;
  display:flex; align-items:center; justify-content:center;
  animation:heroBookIn .45s ease both;
}
.cover__scene[hidden]{ display:none; }
.cover__child{
  width:46%; aspect-ratio:1/1; object-fit:cover; border-radius:50%;
  border:4px solid #fff; box-shadow:0 10px 22px rgba(91,83,70,.25);
  position:relative; z-index:2;
}
.cover__ham{width:34%; align-self:flex-end; margin-left:-6%; z-index:1;
  filter:drop-shadow(0 6px 12px rgba(91,83,70,.20));}