/* Curious Cub — holding page. Palette and type are a first proposal (docs/brand-and-social.md). */
:root {
  --cream: #FBF4E8;
  --paper: #FFFDF8;
  --ink: #2F2620;
  --ink-soft: #6B5D52;
  --honey: #E9A44C;
  --terracotta: #D0663F;
  --sage: #7FA383;
  --sky: #6E9CC4;
  --berry: #C9637E;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  color: var(--ink);
  background:
    radial-gradient(38rem 28rem at 12% 8%, #F8E2C2 0, transparent 70%),
    radial-gradient(30rem 26rem at 92% 88%, #E4EDDF 0, transparent 70%),
    var(--cream);
  -webkit-font-smoothing: antialiased;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 1rem 2rem;
  max-width: 46rem;
  margin: 0 auto;
  width: 100%;
}

.mark {
  width: clamp(112px, 26vw, 148px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(160, 96, 40, .18));
  animation: peek 6s ease-in-out infinite;
  transform-origin: 50% 80%;
}

@keyframes peek {
  0%, 70%, 100% { transform: rotate(0) translateY(0); }
  78% { transform: rotate(-6deg) translateY(-3px); }
  88% { transform: rotate(4deg) translateY(-2px); }
}

.wordmark {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-weight: 750;
  font-size: clamp(2.6rem, 10vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 1.25rem 0 .9rem;
}

.lede {
  font-size: clamp(1.08rem, 3.6vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
  max-width: 30rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 2.75rem;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(47, 38, 32, .06), 0 6px 18px rgba(47, 38, 32, .07);
  font-weight: 700;
  font-size: .98rem;
}

.dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 0 rgba(127, 163, 131, .6);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(127, 163, 131, .55); }
  80%, 100% { box-shadow: 0 0 0 .55rem rgba(127, 163, 131, 0); }
}

.cats {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

@media (min-width: 640px) {
  .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}

.cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.15rem .5rem 1rem;
  border-radius: 1.25rem;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(47, 38, 32, .05), 0 8px 22px rgba(47, 38, 32, .06);
  font-weight: 700;
  font-size: 1rem;
}

.cat svg { width: 2.6rem; height: 2.6rem; }
.cat--toys svg { fill: var(--terracotta); }
.cat--clothes svg { fill: var(--sky); }
.cat--books svg { fill: var(--sage); }
.cat--montessori svg { fill: var(--berry); }

.foot {
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  color: var(--ink-soft);
  font-size: .9rem;
}

.foot p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .mark, .dot { animation: none; }
}