/* ============================================================
   PounceBytz — toybox design system
   Palette + type locked per brand board v2 (2026-07-05)
   ============================================================ */
:root{
  --orange:   #FB6B1E;  /* Tiger Orange — primary, fur, energy */
  --cream:    #FBF3E1;  /* Milk Cream — ground */
  --charcoal: #2E2926;  /* Soft Charcoal — text, never pure black */
  --teal:     #10B8C0;  /* Binky Teal — buttons, links, "tech" */
  --gold:     #F6C14E;  /* Ring Gold — rewards, stars */
  --pink:     #F7739C;  /* Bubblegum — pop, sparingly */

  --cream-deep: #F5E9CE;
  --card:       #FFFDF7;
  --ink-soft:   #6B6259;

  --r-sm: 14px; --r-md: 20px; --r-lg: 28px;
  --shadow-plush: 0 10px 30px rgba(46,41,38,.10), 0 2px 8px rgba(46,41,38,.06);
  --shadow-lift:  0 18px 44px rgba(228,85,10,.18), 0 4px 12px rgba(46,41,38,.08);
  --spring: cubic-bezier(.2,.9,.3,1.5);

  --font-display: "Baloo 2", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-mono: "Space Mono", monospace;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }

body{
  margin:0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.65;
  overflow-x: hidden;
}

h1,h2,h3{ font-family: var(--font-display); font-weight:800; line-height:1.08; margin:0 }
a{ color: var(--teal); text-decoration:none; font-weight:800 }
a:hover{ color: var(--orange) }

.kicker{
  font-family: var(--font-mono);
  font-size:.72rem; letter-spacing:.06em;
  color: var(--ink-soft);
  display:block; margin-bottom:.6rem;
}

/* ---------- floating background shapes ---------- */
.bg-shapes{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.blob{ position:absolute; border-radius:50%; opacity:.5; filter:blur(2px) }
.blob-1{ width:340px; height:340px; background:var(--cream-deep); top:-90px; right:-70px }
.blob-2{ width:220px; height:220px; background:rgba(246,193,78,.28); top:44%; left:-100px }
.blob-3{ width:180px; height:180px; background:rgba(16,184,192,.14); bottom:10%; right:6% }
.blob-4{ width:120px; height:120px; background:rgba(247,115,156,.16); top:18%; left:12% }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:50;
  background:rgba(251,243,225,.9); backdrop-filter:blur(8px);
  border-bottom:2px solid var(--cream-deep) }
.site-header nav{ max-width:1040px; margin:0 auto; padding:.7rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between }
.nav-brand{ display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--charcoal) }
.nav-brand .bytz{ color:var(--orange) }
.nav-brand svg{ width:30px; height:auto }
.nav-links{ display:flex; align-items:center; gap:1.1rem }
.nav-links a{ font-size:.95rem; color:var(--charcoal) }
.nav-links a:hover{ color:var(--orange) }
.nav-cta{ background:var(--teal); color:#fff !important; padding:.45rem 1.05rem;
  border-radius:999px; box-shadow:var(--shadow-plush) }
.nav-cta:hover{ background:var(--orange) }

main{ max-width:1040px; margin:0 auto; padding:0 1.25rem }
section{ padding:4.2rem 0 0 }

/* ---------- hero ---------- */
.hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center; padding-top:4.5rem }
.hero .paw{ width:clamp(96px,12vw,132px); height:auto;
  filter:drop-shadow(0 8px 14px rgba(228,85,10,.28)); margin-bottom:.8rem }
.wordmark{ font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.8rem,7.5vw,4.2rem); letter-spacing:-.01em }
.wordmark .bytz{ color:var(--orange) }
.tagline{ font-size:clamp(1.15rem,2.6vw,1.5rem); margin:.4rem 0 0; color:var(--ink-soft); font-weight:700 }
.tagline b{ color:var(--charcoal) }
.lede{ max-width:32rem; margin:1.2rem 0 1.6rem; font-size:1.06rem }
.hero-pounce img{ width:100%; max-width:390px; height:auto; display:block; margin:0 auto }

.btn{ display:inline-block; font-family:var(--font-display); font-weight:800;
  font-size:1.05rem; padding:.8rem 1.7rem; border-radius:999px; border:none; cursor:pointer;
  background:var(--orange); color:#fff; box-shadow:var(--shadow-plush) }
.btn:hover{ background:var(--teal); color:#fff }
.btn-soft{ background:transparent; color:var(--charcoal); box-shadow:none;
  border:3px solid var(--cream-deep) }
.btn-soft:hover{ border-color:var(--teal); background:transparent; color:var(--teal) }
.hero-ctas{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center }

/* ---------- section headers ---------- */
.section-head h2{ font-size:clamp(1.7rem,4vw,2.3rem) }
.section-head .squiggle{ width:74px; height:10px; margin-top:.45rem; display:block }

/* ---------- product cards ---------- */
.card-grid{ margin-top:1.8rem; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem }
.product-card{ background:var(--card); border-radius:var(--r-lg); padding:1.8rem;
  box-shadow:var(--shadow-plush); border:3px solid transparent;
  display:flex; flex-direction:column; gap:.55rem; position:relative }
.product-card img{ width:132px; height:132px; align-self:flex-start }
.product-card h3{ font-size:1.55rem }
.product-card p{ margin:0; color:var(--ink-soft) }
.chip{ position:absolute; top:1.2rem; right:1.2rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em;
  padding:.3rem .7rem; border-radius:999px; font-weight:700 }
.chip-teal{ background:rgba(16,184,192,.14); color:#0B8A90 }
.chip-gold{ background:rgba(246,193,78,.25); color:#9A6D08 }
.card-link{ margin-top:auto; padding-top:.6rem; font-size:1rem }

/* ---------- about ---------- */
.about{ background:var(--card); border-radius:var(--r-lg); padding:2.2rem;
  box-shadow:var(--shadow-plush); margin-top:1.8rem; max-width:46rem }
.about p{ margin:.4rem 0 0 }

/* ---------- waitlist ---------- */
.waitlist{ margin-top:4.2rem; background:var(--charcoal); color:var(--cream);
  border-radius:var(--r-lg); padding:2.6rem;
  display:grid; grid-template-columns:1fr auto; gap:1.6rem; align-items:center }
.waitlist h2{ font-size:clamp(1.6rem,4vw,2.1rem); color:#fff }
.waitlist p{ color:rgba(251,243,225,.85); max-width:30rem }
.waitlist img{ width:150px; height:150px }
.wl-form{ grid-column:1 / -1; display:flex; gap:.7rem; flex-wrap:wrap }
.wl-form input[type=email]{ flex:1; min-width:230px; font-family:var(--font-body); font-weight:600;
  font-size:1rem; padding:.85rem 1.2rem; border-radius:999px; border:3px solid transparent;
  background:#fff; color:var(--charcoal); outline:none }
.wl-form input[type=email]:focus{ border-color:var(--gold) }
.wl-micro{ grid-column:1 / -1; font-family:var(--font-mono); font-size:.7rem;
  color:rgba(251,243,225,.6); margin:0 }
.wl-embed{ grid-column:1 / -1; background:#fff; border-radius:var(--r-md); padding:.8rem 1rem }
.wl-embed .ml-embedded{ width:100% }

/* ---------- footer ---------- */
footer{ max-width:1040px; margin:3.6rem auto 0; padding:1.6rem 1.25rem 2.6rem;
  border-top:3px dashed var(--cream-deep);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color:var(--ink-soft); font-size:.92rem }
footer .foot-tag{ font-family:var(--font-display); font-weight:800; color:var(--orange) }

/* ---------- babywords page ---------- */
.feature-grid{ margin-top:1.8rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem }
.feature{ background:var(--card); border-radius:var(--r-md); padding:1.5rem 1.6rem;
  box-shadow:var(--shadow-plush); border-top:6px solid var(--teal) }
.feature:nth-child(2){ border-top-color:var(--gold) }
.feature:nth-child(3){ border-top-color:var(--pink) }
.feature:nth-child(4){ border-top-color:var(--orange) }
.feature h3{ font-size:1.2rem; margin-bottom:.4rem }
.feature p{ margin:0; color:var(--ink-soft); font-size:.98rem }

.steps{ margin-top:1.8rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; counter-reset:step }
.step{ background:var(--card); border-radius:var(--r-md); padding:1.5rem;
  box-shadow:var(--shadow-plush); position:relative; padding-top:2.4rem }
.step::before{ counter-increment:step; content:counter(step);
  position:absolute; top:-18px; left:1.2rem;
  width:40px; height:40px; border-radius:50%; background:var(--gold); color:var(--charcoal);
  font-family:var(--font-display); font-weight:800; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-plush) }
.step p{ margin:0; font-size:.98rem }

.phones{ margin-top:1.8rem; display:flex; gap:2rem; justify-content:center; flex-wrap:wrap }
.phone{ width:250px; border-radius:36px; background:var(--charcoal); padding:14px;
  box-shadow:var(--shadow-lift) }
.phone .screen{ background:var(--cream); border-radius:26px; padding:1.1rem .9rem; min-height:380px;
  display:flex; flex-direction:column; gap:.6rem }
.bubble{ max-width:85%; padding:.55rem .85rem; border-radius:18px; font-size:.82rem; line-height:1.45 }
.bubble-in{ background:#fff; align-self:flex-start; box-shadow:0 2px 6px rgba(46,41,38,.08) }
.bubble-out{ background:var(--teal); color:#fff; align-self:flex-end }
.bubble-note{ font-family:var(--font-mono); font-size:.6rem; color:var(--ink-soft);
  align-self:center; margin-top:auto; text-align:center }
.swap{ background:rgba(246,193,78,.45); border-radius:6px; padding:0 .25em; font-weight:800 }

.status-note{ margin-top:2.6rem; background:rgba(246,193,78,.18); border:3px solid var(--gold);
  border-radius:var(--r-md); padding:1.3rem 1.6rem; max-width:44rem }
.status-note p{ margin:.2rem 0 }
.status-note .fine{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft) }

/* ---------- 404 ---------- */
.lost{ text-align:center; padding-top:5rem }
.lost img{ width:280px; height:280px }
.lost h1{ font-size:clamp(2rem,6vw,3rem) }

/* ---------- reveal base state (JS adds .revealed) ---------- */
.reveal{ opacity:1; transform:none }

/* ============================================================
   Motion — full toybox, but only when the visitor wants motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  .paw .pxl{ opacity:0; transform-origin:center;
    animation:pop .5s var(--spring) forwards }
  .paw .pxl:nth-child(1){ animation-delay:.05s } .paw .pxl:nth-child(2){ animation-delay:.12s }
  .paw .pxl:nth-child(3){ animation-delay:.19s } .paw .pxl:nth-child(4){ animation-delay:.26s }
  .paw .pxl:nth-child(5){ animation-delay:.34s } .paw .pxl:nth-child(6){ animation-delay:.5s }
  .paw .pxl:nth-child(7){ animation-delay:.58s } .paw .pxl:nth-child(8){ animation-delay:.66s }
  @keyframes pop{ 0%{opacity:0; transform:scale(.4)} 70%{opacity:1; transform:scale(1.12)} 100%{opacity:1; transform:scale(1)} }

  .hero-pounce img{ animation:bob 3.2s ease-in-out infinite }
  @keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

  .blob{ animation:drift 16s ease-in-out infinite alternate }
  .blob-2{ animation-duration:20s } .blob-3{ animation-duration:24s } .blob-4{ animation-duration:14s }
  @keyframes drift{ from{transform:translate(0,0) scale(1)} to{transform:translate(28px,-22px) scale(1.07)} }

  .product-card, .feature, .step, .btn, .nav-cta{ transition:transform .35s var(--spring), box-shadow .35s ease, border-color .3s ease, background .25s ease, color .25s ease }
  .product-card:hover{ transform:translateY(-7px) rotate(-.4deg); box-shadow:var(--shadow-lift); border-color:var(--teal) }
  .feature:hover, .step:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift) }
  .btn:hover, .nav-cta:hover{ transform:translateY(-3px) scale(1.04) }

  .reveal{ opacity:0; transform:translateY(26px);
    transition:opacity .6s ease, transform .6s var(--spring) }
  .reveal.revealed{ opacity:1; transform:none }
}

@media (prefers-reduced-motion: reduce){
  .paw .pxl{ opacity:1 }
  html{ scroll-behavior:auto }
}

/* ---------- responsive ---------- */
@media (max-width: 760px){
  .hero{ grid-template-columns:1fr; padding-top:2.6rem }
  .hero-pounce img{ max-width:260px }
  .card-grid, .feature-grid{ grid-template-columns:1fr }
  .steps{ grid-template-columns:1fr; gap:1.9rem }
  .waitlist{ grid-template-columns:1fr; padding:1.8rem }
  .waitlist img{ display:none }
  .nav-links a:not(.nav-cta){ display:none }
}