:root{--lav-2:#CDB4FF;--sky-2:#A8D4FF;--mint-2:#9EE6C2;--butter-2:#FFE27A;--peach-2:#FFC4A1;--shadow-pop:0 6px 0 rgba(67,55,90,.08),0 16px 34px rgba(110,79,196,.14);--head:"Fredoka","Nunito",system-ui,sans-serif}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 40px;background:var(--cream)}
/* two layers of pastel blobs that drift and cross-fade */
.hero::before,.hero::after{content:"";position:absolute;inset:-18%;pointer-events:none;will-change:transform}
.hero::before{background:
  radial-gradient(600px 380px at 14% 18%,var(--pink) 0,transparent 70%),
  radial-gradient(560px 360px at 86% 24%,var(--lav) 0,transparent 70%),
  radial-gradient(620px 360px at 50% 92%,var(--mint) 0,transparent 70%),
  radial-gradient(400px 300px at 68% 66%,var(--butter) 0,transparent 70%);
  animation:drift 26s ease-in-out infinite alternate}
.hero::after{background:
  radial-gradient(520px 340px at 80% 80%,var(--pink) 0,transparent 70%),
  radial-gradient(540px 360px at 22% 70%,var(--sky) 0,transparent 70%),
  radial-gradient(480px 320px at 60% 16%,var(--peach) 0,transparent 70%),
  radial-gradient(420px 300px at 30% 30%,var(--lav) 0,transparent 70%);
  opacity:0;animation:drift2 34s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(4%,-3%) rotate(6deg) scale(1.08)}100%{transform:translate(-3%,3%) rotate(-5deg) scale(1.03)}}
@keyframes drift2{0%{opacity:0;transform:translate(3%,2%) rotate(0)}50%{opacity:.85}100%{opacity:.2;transform:translate(-4%,-3%) rotate(-8deg) scale(1.1)}}
.hero>*{position:relative;z-index:1}
.hero>.floaties{position:absolute;z-index:0}
.floaties{position:absolute;inset:0;pointer-events:none}
.floaties i{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,.25) 32%,transparent 66%),var(--c,var(--pink-2));opacity:.55;animation:floaty var(--d,9s) ease-in-out infinite alternate}
@keyframes floaty{to{transform:translateY(-26px) scale(1.06)}}
.floaties .fl{position:absolute;width:var(--s,56px);height:var(--s,56px);opacity:.8;filter:drop-shadow(0 6px 10px rgba(201,61,122,.18));animation:fl-float var(--d,12s) ease-in-out infinite alternate}
@keyframes fl-float{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--x,18px),-34px) rotate(var(--r,70deg))}}
.floaties .petal{position:absolute;top:-40px;left:var(--l);width:14px;height:22px;border-radius:50%;background:#fff;border:2px solid #F59BC2;opacity:0;animation:fall var(--d,14s) linear var(--dl,0s) infinite}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.85}30%{transform:translate(28px,300px) rotate(120deg)}55%{transform:translate(-18px,560px) rotate(220deg)}80%{transform:translate(24px,840px) rotate(320deg);opacity:.85}100%{transform:translate(0,1100px) rotate(400deg);opacity:0}}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;text-align:center;gap:18px}.hero-logo{order:-1}}
.kicker{display:inline-flex;gap:8px;align-items:center;background:#fff;border-radius:999px;padding:7px 16px;font-weight:800;font-size:.85rem;color:var(--lav-deep);box-shadow:0 3px 0 var(--line);margin-bottom:16px}
.bubble-title{font-family:var(--head);font-weight:700;font-size:clamp(3.3rem,10vw,6.2rem);line-height:.95;margin:0 0 .25em;letter-spacing:.01em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.bubble-title .w{display:inline-block;color:var(--pink-2);-webkit-text-stroke:.12em #fff;paint-order:stroke fill;filter:drop-shadow(0 .06em 0 var(--pink-deep)) drop-shadow(0 .14em .14em rgba(201,61,122,.22));transform:rotate(-3deg)}
.bubble-title .w2{color:var(--lav-2);filter:drop-shadow(0 .06em 0 var(--lav-deep)) drop-shadow(0 .14em .14em rgba(110,79,196,.22));transform:rotate(2deg) translateY(.04em)}
/* letters pop in one by one, then ripple in a slow wave; tap or hover one to make it jump */
.bubble-title .w i{display:inline-block;font-style:normal;transform-origin:50% 90%;
  animation:pop-in .7s cubic-bezier(.3,1.7,.5,1) calc(var(--i)*70ms) both,wave 4.2s ease-in-out calc(1.4s + var(--i)*110ms) infinite}
.bubble-title .w i:hover{animation:boing .6s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop-in{from{opacity:0;transform:translateY(.5em) scale(.2) rotate(-14deg)}}
@keyframes wave{0%,40%,100%{transform:none}12%{transform:translateY(-.1em) rotate(-4deg)}24%{transform:translateY(.02em) rotate(2deg)}}
@keyframes boing{30%{transform:translateY(-.22em) scale(1.12,.92)}60%{transform:translateY(0) scale(.94,1.06)}}
.lead{font-size:clamp(1.05rem,2.2vw,1.22rem);color:var(--ink-soft);max-width:34em;margin:0 0 24px}
@media(max-width:860px){.lead{margin-left:auto;margin-right:auto}.hero .cta{justify-content:center}}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
@media(max-width:860px){.hero-chips{justify-content:center}}

/* the logo: daisy petals, a spinning name ring, and Daisy's video in the middle */
.hero-logo{display:flex;justify-content:center}
.logo{position:relative;width:min(440px,84vw);aspect-ratio:1}
.logo-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.logo-ring{transform-box:view-box;transform-origin:50% 50%;animation:spin 48s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.logo-bloom{transform-box:view-box;transform-origin:50% 50%;animation:bloom 7s ease-in-out infinite}
@keyframes bloom{50%{transform:rotate(-9deg) scale(1.035)}}
.logo-face{position:absolute;inset:23.5%;border-radius:50%;overflow:hidden;background:#fff;border:clamp(6px,1.6vw,9px) solid var(--sun);box-shadow:0 0 0 clamp(3px,.8vw,5px) #fff,0 14px 34px rgba(201,61,122,.25)}
.logo-face picture,.mini-logo picture{display:block;width:100%;height:100%}
/* the two photos take turns: 5s each with a soft cross-fade */
.logo-face .alt,.mini-logo .alt{position:absolute;inset:0;opacity:0;animation:swap 12s ease-in-out infinite}
@keyframes swap{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
.logo-face img{width:100%;height:100%;object-fit:cover;display:block}
.logo-hi{position:absolute;right:2%;top:10%;background:#fff;font-family:var(--head);font-weight:600;font-size:clamp(.9rem,2.4vw,1.1rem);padding:8px 14px;border-radius:20px 20px 20px 6px;box-shadow:var(--shadow-pop);color:var(--pink-deep);animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.logo-play{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);white-space:nowrap}



/* ---------- page header (same look as the front page, more compact) ---------- */
.hero.sub{padding:34px 0 30px}
.hero.sub .bubble-title{font-size:clamp(2.5rem,7.2vw,4.4rem)}
.hero.sub .logo{width:min(330px,64vw)}
.hero.sub .lead{margin-bottom:18px}
.hero.sub .hero-chips{margin-top:16px}
.hero.sub .bubble-title .w1{color:var(--hc1,var(--pink-2))}
.hero.sub .bubble-title .w2{color:var(--hc2,var(--lav-2))}
@media(max-width:860px){.hero.sub{padding-top:18px}.hero.sub .logo{width:min(250px,62vw)}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 14px;font-weight:700;font-size:.86rem;color:var(--ink-soft);box-shadow:0 3px 0 var(--line)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}