/* =========================================================
   Vintage Cartoon Animals — playful coloring-book catalog
   Light, colorful, fun. Own design system.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --paper:      #FFF9EF;   /* warm cream page */
  --paper-2:    #FFFFFF;
  --ink:        #2C2340;   /* deep plum-ink (not black) */
  --ink-soft:   #6A6180;
  --line:       #EDE6D8;

  --cyan:       #23C4E6;
  --pink:       #FF4FA0;
  --orange:     #FF8A3C;
  --yellow:     #FFC531;
  --purple:     #8A57E6;
  --green:      #4FD08A;

  --amazon:     #FF9900;
  --amazon-ink: #232F3E;

  --radius:     22px;
  --radius-sm:  14px;
  --maxw:       1180px;
  --ease:       cubic-bezier(.34,1.56,.64,1); /* pop */
  --ease-2:     cubic-bezier(.22,.61,.36,1);

  --font-head:  'Fredoka', system-ui, sans-serif;
  --font-body:  'Nunito', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:16px; line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; }

/* Playful blobs in the background */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(420px 420px at 88% -4%, rgba(35,196,230,.18), transparent 70%),
    radial-gradient(460px 460px at -6% 12%, rgba(255,79,160,.16), transparent 70%),
    radial-gradient(520px 520px at 50% 108%, rgba(255,197,49,.16), transparent 70%);
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
.section{ padding:84px 0; position:relative; }
.section-sm{ padding:52px 0; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }

/* ---------- Type ---------- */
.h-xxl{ font-family:var(--font-head); font-weight:700; line-height:1.02; font-size:clamp(2.4rem,6vw,4.4rem); letter-spacing:-.5px; }
.h-xl{ font-family:var(--font-head); font-weight:700; line-height:1.08; font-size:clamp(1.9rem,4vw,2.9rem); }
.h-lg{ font-family:var(--font-head); font-weight:600; font-size:clamp(1.3rem,2.5vw,1.8rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--ink-soft); max-width:58ch; font-weight:600; }
.muted{ color:var(--ink-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-head); font-weight:600; font-size:.9rem; letter-spacing:.02em;
  color:var(--purple); background:rgba(138,87,230,.12);
  padding:7px 15px; border-radius:999px;
}
.eyebrow .dot{ width:9px; height:9px; border-radius:50%; background:var(--pink); animation:bounce 1.6s var(--ease) infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }

/* rainbow paint underline */
.paint{ position:relative; display:inline-block; }
.paint::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:-.12em; height:.28em; border-radius:999px; z-index:-1;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--orange),var(--yellow));
  transform:rotate(-1.2deg);
}
.grad-text{
  background:linear-gradient(92deg,var(--cyan),var(--purple),var(--pink),var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-head); font-weight:600; font-size:1rem;
  padding:14px 26px; border-radius:999px; border:none; color:#fff;
  box-shadow:0 8px 0 rgba(44,35,64,.12), 0 12px 22px -10px rgba(44,35,64,.4);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease-2);
}
.btn:hover{ transform:translateY(-3px) rotate(-1deg); }
.btn:active{ transform:translateY(2px); box-shadow:0 3px 0 rgba(44,35,64,.14); }
.btn-pink{ background:linear-gradient(120deg,var(--pink),#ff77b8); }
.btn-cyan{ background:linear-gradient(120deg,var(--cyan),#5fd8f0); }
.btn-purple{ background:linear-gradient(120deg,var(--purple),#a982f0); }
.btn-amazon{ background:linear-gradient(120deg,#ffb43d,var(--amazon)); color:var(--amazon-ink); }
.btn-outline{
  background:var(--paper-2); color:var(--ink); border:2.5px solid var(--ink);
  box-shadow:0 6px 0 rgba(44,35,64,.14);
}
.btn-outline:hover{ background:#fff; }
.btn-arrow{ transition:transform .2s var(--ease); }
.btn:hover .btn-arrow{ transform:translate(3px,-2px); }

.link-arrow{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:600; color:var(--purple); transition:gap .2s var(--ease-2); }
.link-arrow:hover{ gap:12px; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; transition:background .3s, box-shadow .3s; }
.site-header.scrolled{ background:rgba(255,249,239,.9); backdrop-filter:blur(10px); box-shadow:0 4px 20px -12px rgba(44,35,64,.5); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--ink); }
.brand img{ height:44px; width:auto; max-width:62vw; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{ font-family:var(--font-head); font-weight:500; font-size:.98rem; color:var(--ink); padding:8px 15px; border-radius:999px; transition:background .2s, color .2s; }
.nav-links a:hover{ background:rgba(138,87,230,.12); color:var(--purple); }
.nav-links a.active{ color:var(--purple); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-cta .btn{ padding:11px 20px; font-size:.95rem; }
.nav-toggle{ display:none; background:var(--paper-2); border:2.5px solid var(--ink); border-radius:12px; padding:7px; color:var(--ink); box-shadow:0 4px 0 rgba(44,35,64,.14); }
.nav-toggle svg{ width:20px; height:20px; }

/* ---------- Hero ---------- */
.hero{ padding:clamp(40px,7vw,80px) 0 clamp(50px,7vw,86px); text-align:center; position:relative; }
.hero-logo{ max-width:min(620px,90%); margin:0 auto 26px; filter:drop-shadow(0 14px 24px rgba(44,35,64,.18)); animation:float 5s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.hero .lead{ margin:0 auto 30px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.hero-tagline{ font-family:var(--font-head); font-weight:600; font-size:clamp(1.4rem,3.2vw,2.1rem); margin-bottom:14px; }

/* floating paint dots */
.dots span{ position:absolute; border-radius:50%; opacity:.7; animation:float 6s ease-in-out infinite; }
.dots span:nth-child(1){ width:20px;height:20px;background:var(--cyan);   left:6%;  top:22%; animation-delay:.2s;}
.dots span:nth-child(2){ width:14px;height:14px;background:var(--pink);   right:9%; top:16%; animation-delay:.8s;}
.dots span:nth-child(3){ width:26px;height:26px;background:var(--yellow); right:16%;top:52%; animation-delay:1.3s;}
.dots span:nth-child(4){ width:16px;height:16px;background:var(--purple); left:12%; top:60%; animation-delay:.5s;}

/* ---------- Section head ---------- */
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-inline:auto; }
.section-head .h-xl{ margin:14px 0 12px; }

/* ---------- Book grid ---------- */
.books{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.book{
  background:var(--paper-2); border-radius:var(--radius); overflow:hidden;
  border:2.5px solid var(--ink);
  box-shadow:0 10px 0 rgba(44,35,64,.10);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease-2);
  display:flex; flex-direction:column;
}
.book:hover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:0 16px 0 rgba(44,35,64,.10); }
.book-cover{
  aspect-ratio:4/5; display:grid; place-items:center; text-align:center; padding:24px; position:relative;
  color:#fff; overflow:hidden;
}
.book-cover.c1{ background:linear-gradient(150deg,var(--cyan),var(--purple)); }
.book-cover.c2{ background:linear-gradient(150deg,var(--pink),var(--orange)); }
.book-cover.c3{ background:linear-gradient(150deg,var(--yellow),var(--green)); }
.book-cover img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.book-cover .bc-title{ font-family:var(--font-head); font-weight:700; font-size:1.5rem; line-height:1.1; text-shadow:0 2px 8px rgba(0,0,0,.18); }
.book-cover .bc-sub{ font-family:var(--font-head); font-weight:500; font-size:.95rem; margin-top:8px; opacity:.95; }
.book-cover .ribbon{
  position:absolute; top:14px; right:-34px; transform:rotate(45deg);
  background:var(--ink); color:#fff; font-family:var(--font-head); font-weight:600; font-size:.72rem;
  padding:6px 42px;
}
.book-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.book-body .stars{ color:var(--yellow); letter-spacing:2px; font-size:1.05rem; margin-bottom:8px; -webkit-text-stroke:1px #E9A100; }
.book-body h3{ font-family:var(--font-head); font-weight:700; font-size:1.3rem; margin-bottom:8px; }
.book-body p{ color:var(--ink-soft); font-size:.96rem; margin-bottom:18px; }
.book-body .book-foot{ margin-top:auto; }
.pill{ display:inline-block; font-family:var(--font-head); font-weight:600; font-size:.75rem; padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.pill.cyan{ background:rgba(35,196,230,.16); color:#0f95b3; }
.pill.pink{ background:rgba(255,79,160,.16); color:#d61f76; }
.pill.purple{ background:rgba(138,87,230,.16); color:#6a37c4; }

/* ---------- Country chips ---------- */
.country-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.country{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  background:var(--paper-2); border:2.5px solid var(--ink); box-shadow:0 5px 0 rgba(44,35,64,.12);
  font-family:var(--font-head); font-weight:600;
}
.country.soon{ color:var(--ink-soft); border-style:dashed; box-shadow:none; background:transparent; }
.country .flag{ font-size:1.25rem; }

/* ---------- Reviews (sticky notes) ---------- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review{
  background:var(--paper-2); border:2.5px solid var(--ink); border-radius:18px; padding:24px;
  box-shadow:0 9px 0 rgba(44,35,64,.10); display:flex; flex-direction:column; gap:12px;
}
.review:nth-child(1){ transform:rotate(-1.4deg); }
.review:nth-child(2){ transform:rotate(1deg); }
.review:nth-child(3){ transform:rotate(-.6deg); }
.review .stars{ color:var(--yellow); letter-spacing:2px; font-size:1.1rem; -webkit-text-stroke:1px #E9A100; }
.review p{ font-weight:700; }
.review .who{ color:var(--ink-soft); font-size:.88rem; margin-top:auto; }
.review .who b{ color:var(--ink); font-family:var(--font-head); }
.verified{ color:var(--green); font-weight:700; }

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--purple),var(--pink) 55%,var(--orange));
  border-radius:32px; padding:56px clamp(26px,5vw,64px); text-align:center; color:#fff;
  border:3px solid var(--ink); box-shadow:0 14px 0 rgba(44,35,64,.16);
}
.cta-band .h-xl{ margin-bottom:12px; }
.cta-band .lead{ color:rgba(255,255,255,.95); margin:0 auto 26px; }
.cta-band .btn-outline{ color:var(--ink); }

/* ---------- Wave divider ---------- */
.wave{ display:block; width:100%; height:60px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#fff; padding:56px 0 30px; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px; }
.footer-brand img{ height:52px; width:auto; margin-bottom:14px; }
.footer-brand p{ color:rgba(255,255,255,.7); max-width:32ch; }
.footer-col h4{ font-family:var(--font-head); font-weight:600; font-size:1rem; margin-bottom:12px; color:var(--yellow); }
.footer-col a{ display:block; color:rgba(255,255,255,.78); padding:5px 0; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.6); font-size:.86rem; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease-2), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .books, .reviews{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:680px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-links.open{
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    position:absolute; top:74px; left:0; right:0; background:var(--paper);
    padding:14px 22px 20px; box-shadow:0 12px 24px -12px rgba(44,35,64,.5);
  }
  .books, .reviews{ grid-template-columns:1fr; }
  .review{ transform:none !important; }
  .section{ padding:60px 0; }
}