/* =================================================================
   Biscuity Kids — premium cinematic kids site
   Stack: pure HTML / CSS / JS  •  WordPress-friendly
   ================================================================= */

/* ---------- Design tokens ---------- */
:root {
  --c-sun:        #FFC857;   /* warm yellow */
  --c-sky:        #6FC3FF;   /* sky blue */
  --c-bubble:     #FF7AB6;   /* bubblegum pink */
  --c-grape:      #A06CD5;   /* purple */
  --c-tangerine:  #FF8E54;   /* orange */
  --c-mint:       #6FE7B6;   /* mint */
  --c-cream:      #FFF7E6;
  --c-paper:      #FFFCF4;
  --c-ink:        #2A1C5E;   /* deep purple-navy text */
  --c-ink-soft:   #5A4E8C;
  --c-yt:         #FF0000;
  --c-yt-deep:    #C40000;

  --grad-sky:     linear-gradient(135deg, #FFC857 0%, #FF7AB6 45%, #A06CD5 100%);
  --grad-mint:    linear-gradient(135deg, #6FE7B6 0%, #6FC3FF 100%);
  --grad-rainbow: linear-gradient(110deg, #FFC857, #FF7AB6, #A06CD5, #6FC3FF, #6FE7B6);
  --grad-warm:    linear-gradient(135deg, #FF8E54 0%, #FF7AB6 100%);

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-pill: 999px;

  --shadow-soft: 0 18px 40px -18px rgba(42,28,94,.25);
  --shadow-pop:  0 24px 60px -20px rgba(255,122,182,.45), 0 12px 30px -12px rgba(160,108,213,.35);

  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --ease-out:    cubic-bezier(.22,.61,.36,1);

  --container: 1200px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-paper);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 600px at 90% -10%, rgba(255,200,87,.35), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(111,195,255,.30), transparent 60%),
    radial-gradient(900px 800px at 50% 110%, rgba(255,122,182,.25), transparent 60%),
    var(--c-paper);
}

img { max-width:100%; display:block; }
a { color: inherit; text-decoration:none; }
button { font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection { background: var(--c-bubble); color:#fff; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  letter-spacing:.2px;
  transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-out), background .3s;
  position:relative; will-change: transform;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad-sky);
  color:#fff;
  box-shadow: var(--shadow-pop);
}
.btn-primary:hover { transform: translateY(-3px) scale(1.03); }
.btn-youtube {
  background: linear-gradient(135deg, #FF0000 0%, #C40000 100%);
  color:#fff;
  box-shadow: 0 14px 30px -12px rgba(255,0,0,.6);
}
.btn-youtube:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 40px -12px rgba(255,0,0,.65); }
.btn-pill {
  background:#fff;
  color: var(--c-ink);
  border: 2px solid rgba(42,28,94,.08);
  padding:.6rem 1.05rem;
  font-size:.95rem;
  box-shadow: 0 8px 18px -10px rgba(42,28,94,.3);
}
.btn-pill:hover { background: var(--c-sun); color: var(--c-ink); transform: translateY(-2px); }
.btn-lg { padding: 1.05rem 1.8rem; font-size:1.05rem; }
.w-full { width:100%; justify-content:center; }

/* glow pulse on primary CTA */
.btn-primary::after {
  content:''; position:absolute; inset:-2px; border-radius:inherit;
  background: var(--grad-rainbow);
  filter: blur(14px); opacity:.55; z-index:-1;
  animation: glow 3.5s ease-in-out infinite;
}
@keyframes glow { 0%,100%{opacity:.5} 50%{opacity:.85} }

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:14px; z-index:50;
  padding: 0 1rem;
}
.header-inner {
  display:flex; align-items:center; gap:1rem;
  padding:.7rem .9rem .7rem 1.1rem;
  border-radius: var(--radius-pill);
  max-width: 1240px; margin-inline:auto;
  transition: box-shadow .3s;
}
.site-header.scrolled .header-inner { box-shadow: 0 18px 40px -22px rgba(42,28,94,.4); }

.glass {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1.5px solid rgba(255,255,255,.7);
}

.logo { display:flex; align-items:center; gap:.55rem; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.35rem; color:var(--c-ink); }
.logo-emoji {
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background: var(--grad-warm); color:#fff;
  box-shadow: 0 8px 18px -8px rgba(255,142,84,.7);
  transform: rotate(-6deg);
}
.logo-text { letter-spacing:.5px; }
.logo-accent { background: var(--grad-sky); -webkit-background-clip:text; background-clip:text; color:transparent; }

.nav-desktop { display:flex; gap:.4rem; margin-left:auto; }
.nav-link {
  padding:.5rem 1rem; border-radius: var(--radius-pill);
  font-weight:600; color: var(--c-ink-soft);
  transition: color .2s, background .2s, transform .2s;
}
.nav-link:hover { color: var(--c-ink); background: rgba(255,200,87,.35); }
.nav-link.active { color:#fff; background: var(--grad-sky); box-shadow: 0 8px 18px -10px rgba(160,108,213,.7); }

.hamburger { display:none; width:42px; height:42px; border-radius:12px; background: rgba(255,255,255,.7); }
.hamburger span { display:block; width:20px; height:2.5px; background: var(--c-ink); margin:4px auto; border-radius:2px; transition: transform .3s, opacity .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  max-width: 1240px; margin: .6rem auto 0;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(18px);
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: var(--radius-lg);
  padding: .8rem;
  display:none; flex-direction:column; gap:.4rem;
  box-shadow: var(--shadow-soft);
}
.mobile-menu.open { display:flex; animation: slideDown .3s var(--ease-out); }
.mobile-link {
  padding:.85rem 1rem; border-radius: var(--radius-md);
  font-weight:600; color: var(--c-ink);
}
.mobile-link:hover { background: rgba(255,200,87,.35); }
@keyframes slideDown { from{opacity:0; transform: translateY(-8px);} to{opacity:1; transform:none;} }

/* ---------- Hero (final fixed) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 8.8rem 0 5rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 43%, rgba(255, 226, 154, 0.95) 0%, rgba(255, 155, 201, 0.72) 23%, rgba(255, 155, 201, 0.16) 39%, transparent 56%),
    radial-gradient(circle at 14% 18%, rgba(255, 216, 137, 0.45) 0%, transparent 34%),
    radial-gradient(circle at 48% 82%, rgba(111, 195, 255, 0.18) 0%, transparent 46%),
    linear-gradient(135deg, #6041d9 0%, #9361e8 44%, #ff98ca 100%);
}

/* HTML already has this layer; keep it visible but behind everything */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Dark text-side overlay for contrast */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(42, 28, 94, 0.68) 0%,
    rgba(42, 28, 94, 0.42) 36%,
    rgba(42, 28, 94, 0.08) 68%,
    rgba(42, 28, 94, 0.00) 100%
  );
  z-index: 1;
}

/* Soft big circle behind character */
.hero-bg::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  right: 5%;
  top: 12%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 230, 166, 0.95) 0%,
    rgba(255, 156, 204, 0.66) 52%,
    rgba(255, 255, 255, 0.22) 53%,
    rgba(255, 255, 255, 0.14) 70%,
    transparent 71%
  );
  z-index: 0;
}

/* Keep original blobs hidden so they do not stack or wash out the hero */
.hero-bg .blob,
.hero-bg .grid-dots {
  display: none !important;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3rem;
  align-items: center;
}

.badge {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .9rem;
  background: rgba(255,255,255,.92);
  border-radius: var(--radius-pill);
  font-weight:700; font-size:.85rem; color: var(--c-grape);
  box-shadow: 0 8px 18px -10px rgba(160,108,213,.5);
  margin-bottom:1.1rem;
}

.hero-title {
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  line-height:1.05;
  color:#fff;
  text-shadow: 0 8px 26px rgba(31, 17, 80, 0.55);
}

.title-gradient {
  background: linear-gradient(90deg, #ffd36b 0%, #ff7db8 45%, #d18cff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 6px 12px rgba(31, 17, 80, 0.35));
}

.hero-sub {
  margin: 1rem 0 1.8rem;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color:#fff;
  font-weight:500;
  text-shadow: 0 4px 14px rgba(42,28,94,.45);
  max-width:620px;
}

.hero-ctas { display:flex; flex-wrap:wrap; gap:.9rem; }

.hero-stats {
  display:flex; gap:1.5rem; margin-top:2.3rem;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255,255,255,.8);
  padding: 1rem 1.4rem; border-radius: var(--radius-lg);
  width:fit-content;
  box-shadow: var(--shadow-soft);
}

.hero-stats > div { text-align:center; }
.hero-stats b { display:block; font-family:'Baloo 2',sans-serif; font-size:1.4rem; color: var(--c-ink); }
.hero-stats span { font-size:.8rem; color: var(--c-ink-soft); font-weight:600; }

/* hero character */
.hero-character {
  position:relative;
  z-index: 3;
  display:grid; place-items:center;
  animation: floatY 5s ease-in-out infinite;
}

.hero-character img {
  position:relative; z-index:2;
  width: min(420px, 80%);
  filter: drop-shadow(0 30px 30px rgba(42,28,94,.45));
}

.hero-character.static { animation:none; }

.char-ring {
  position:absolute; inset:8% 14%;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,200,87,.85), rgba(255,122,182,.55) 60%, transparent 75%);
  filter: blur(2px);
  animation: spin 18s linear infinite;
}

.char-ring.r2 {
  inset:0;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(255,255,255,.6) 75%, transparent 100%);
  mix-blend-mode: overlay;
  animation: spin 28s linear infinite reverse;
}

.char-sparkle {
  position:absolute; color:#fff; font-size:1.4rem;
  filter: drop-shadow(0 4px 8px rgba(255,255,255,.7));
  animation: twinkle 2.4s ease-in-out infinite;
}

.char-sparkle.s1 { top:12%; right:18%; }
.char-sparkle.s2 { bottom:18%; left:10%; animation-delay:.8s; }

@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-22px)} }
@keyframes spin   { to{transform:rotate(360deg)} }
@keyframes twinkle { 0%,100%{opacity:.4; transform:scale(.85)} 50%{opacity:1; transform:scale(1.15)} }

/* scroll indicator */
.scroll-indicator {
  position:absolute; bottom: 22px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border-radius:14px;
  border:2px solid rgba(255,255,255,.85);
  display:grid; place-items:start center; padding-top:8px;
  z-index:4;
}

.scroll-indicator span { width:4px; height:8px; background:#fff; border-radius:4px; animation: scrollDot 1.6s ease-in-out infinite; }
@keyframes scrollDot { 0%{transform:translateY(0); opacity:1} 80%{transform:translateY(14px); opacity:0} 100%{opacity:0} }

/* ---------- Floaters ---------- */
.floaters {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
  overflow:hidden;
}

.floater {
  position:absolute;
  display:block;
  color:#fff;
  filter: drop-shadow(0 8px 16px rgba(42,28,94,.18));
  opacity:.95;
}

.floater i { font-size: 1.8rem; }

.cloud { color:#fff; opacity:.95; filter: drop-shadow(0 10px 18px rgba(111,195,255,.45)); }
.cloud i { font-size:3rem; }

.cloud-a { top:18%; left:5%; right:auto; animation: drift 18s linear infinite; }
.cloud-b { top:34%; right:7%; left:auto; animation: drift 24s linear infinite reverse; }

.star { color: var(--c-sun); }
.star-a { top:28%; left:43%; right:auto; animation: twinkleBig 3s ease-in-out infinite; }
.star-b { top:64%; left:58%; right:auto; color:#fff; animation: twinkleBig 4s ease-in-out infinite .6s; }
.star-c { top:47%; right:23%; left:auto; color: var(--c-bubble); animation: twinkleBig 3.4s ease-in-out infinite 1.2s; }

.note { color:#fff; }
.note-a { top:52%; left:34%; right:auto; animation: bobble 4s ease-in-out infinite; }
.note-b { top:74%; right:18%; left:auto; color: var(--c-sun); animation: bobble 5s ease-in-out infinite .8s; }

.biscuit { top:82%; left:6%; right:auto; color: var(--c-tangerine); font-size:2.2rem; animation: bobble 6s ease-in-out infinite; }
.biscuit i { font-size:2.2rem; }

.balloon { font-size: 2rem; }
.balloon-a { top:22%; right:15%; left:auto; animation: floatY 6s ease-in-out infinite; }
.balloon-b { top:66%; left:61%; right:auto; animation: floatY 7s ease-in-out infinite .6s; }

@keyframes drift  { 0%{transform:translateX(0)} 50%{transform:translateX(40px)} 100%{transform:translateX(0)} }
@keyframes bobble { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-18px) rotate(8deg)} }
@keyframes twinkleBig { 0%,100%{transform:scale(1) rotate(0); opacity:.85} 50%{transform:scale(1.3) rotate(15deg); opacity:1} }

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 8rem 0 4rem;
  }

  .hero-bg::before {
    width: 380px;
    height: 380px;
    right: -70px;
    top: 24%;
  }

  .hero-bg::after {
    background: linear-gradient(
      180deg,
      rgba(42, 28, 94, 0.72) 0%,
      rgba(42, 28, 94, 0.36) 55%,
      rgba(42, 28, 94, 0.10) 100%
    );
  }

  .hero-character img { width: 70%; }

  .cloud-a { top:15%; left:-3%; }
  .cloud-b { top:42%; right:-5%; }
  .star-a { top:20%; left:78%; }
  .star-b { top:62%; left:8%; }
  .star-c { top:48%; right:12%; }
  .note-a { top:44%; left:12%; }
  .note-b { top:78%; right:12%; }
  .biscuit { top:88%; left:8%; }
  .balloon-a { top:28%; right:8%; }
  .balloon-b { top:70%; left:72%; }
}


/* ---------- Sections ---------- */
.section { padding: 6rem 0; position:relative; }
.section-head { text-align:center; max-width: 720px; margin: 0 auto 3.2rem; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff;
  color: var(--c-grape);
  font-weight:700; font-size:.85rem;
  padding:.35rem .9rem; border-radius: var(--radius-pill);
  box-shadow: 0 8px 16px -10px rgba(160,108,213,.5);
  margin-bottom: 1rem;
}
.section-title {
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height:1.1; color: var(--c-ink);
  margin-bottom:.7rem;
}
.section-title.small { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom:.5rem; }
.section-sub { color: var(--c-ink-soft); font-size:1.05rem; max-width:560px; margin-inline:auto; }

/* ---------- Featured videos ---------- */
.video-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.8rem; }
.video-card {
  background:#fff; border-radius: var(--radius-xl);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .35s var(--ease-out), box-shadow .35s;
  position:relative;
  will-change: transform;
}
.video-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: var(--grad-rainbow); padding:2.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .35s;
}
.video-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-pop); }
.video-card:hover::before { opacity:1; }
.thumb { position:relative; aspect-ratio: 16/10; overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease-out); }
.video-card:hover .thumb img { transform: scale(1.08); }
.thumb .play {
  position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:2rem;
  background: linear-gradient(180deg, transparent 30%, rgba(42,28,94,.45));
}
.thumb .play i {
  width:64px; height:64px; border-radius:50%;
  background: var(--c-yt);
  display:grid; place-items:center;
  font-size:1.3rem; padding-left:4px;
  box-shadow: 0 14px 30px -10px rgba(255,0,0,.7);
  transition: transform .25s var(--ease-bounce);
}
.video-card:hover .thumb .play i { transform: scale(1.12); }
.card-body { padding: 1.4rem 1.5rem 1.6rem; }
.card-body h3 {
  font-family:'Baloo 2',sans-serif; font-weight:700;
  font-size:1.25rem; color: var(--c-ink); margin-bottom:.3rem;
}
.card-body p { color: var(--c-ink-soft); font-size:.95rem; margin-bottom:1rem; }

/* ---------- Friends ---------- */
.friends-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1.6rem; }
.friend-card {
  background:#fff; border-radius: var(--radius-xl);
  padding: 1.5rem 1.2rem 1.8rem; text-align:center;
  box-shadow: var(--shadow-soft);
  transition: transform .35s var(--ease-out);
  position:relative; overflow:hidden;
}
.friend-card::after {
  content:''; position:absolute; top:-40px; right:-40px;
  width:120px; height:120px; border-radius:50%;
  background: var(--grad-warm); opacity:.15;
}
.friend-card:hover { transform: translateY(-8px) rotate(-1deg); }
.char-bubble {
  width: 170px; height:170px; margin:0 auto 1rem;
  border-radius:50%;
  display:grid; place-items:end center;
  overflow:hidden; position:relative;
  box-shadow: inset 0 -20px 40px rgba(42,28,94,.15);
}
.char-bubble.c1 { background: radial-gradient(circle at 50% 30%, #FFD58A 0%, #FF7AB6 70%); }
.char-bubble.c2 { background: radial-gradient(circle at 50% 30%, #B9E4FF 0%, #6FC3FF 70%); }
.char-bubble.c3 { background: radial-gradient(circle at 50% 30%, #C6B0F0 0%, #A06CD5 70%); }
.char-bubble.c4 { background: radial-gradient(circle at 50% 30%, #B7F1D4 0%, #6FE7B6 70%); }
.char-bubble img { width: 130%; max-width: none; transform: translateY(8%); filter: drop-shadow(0 14px 14px rgba(0,0,0,.25)); animation: charBob 4s ease-in-out infinite; }
@keyframes charBob { 0%,100%{transform:translateY(8%)} 50%{transform:translateY(2%)} }
.friend-card:nth-child(2) .char-bubble img { animation-delay:.4s; }
.friend-card:nth-child(3) .char-bubble img { animation-delay:.8s; }
.friend-card:nth-child(4) .char-bubble img { animation-delay:1.2s; }
.friend-card h3 { font-family:'Baloo 2',sans-serif; font-size:1.3rem; color: var(--c-ink); margin-bottom:.3rem; }
.friend-card p { color: var(--c-ink-soft); font-size:.95rem; }

/* ---------- Why ---------- */
.why-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; }
.why-grid.six { grid-template-columns: repeat(3,1fr); }
.why-card {
  background:#fff; border-radius: var(--radius-xl);
  padding: 1.8rem 1.4rem;
  box-shadow: var(--shadow-soft);
  transition: transform .3s var(--ease-out), box-shadow .3s;
  position:relative;
}
.why-card:hover { transform: translateY(-6px) rotate(.5deg); box-shadow: var(--shadow-pop); }
.why-icon {
  width:62px; height:62px; border-radius:18px;
  display:grid; place-items:center;
  color:#fff; font-size:1.5rem; margin-bottom:1rem;
  transform: rotate(-6deg);
  box-shadow: 0 14px 24px -12px rgba(42,28,94,.5);
}
.ic-1 { background: var(--grad-warm); }
.ic-2 { background: var(--grad-mint); }
.ic-3 { background: linear-gradient(135deg, #A06CD5 0%, #FF7AB6 100%); }
.ic-4 { background: linear-gradient(135deg, #FFC857 0%, #FF8E54 100%); }
.why-card h3 { font-family:'Baloo 2',sans-serif; font-size:1.2rem; margin-bottom:.35rem; color:var(--c-ink); }
.why-card p  { color: var(--c-ink-soft); font-size:.95rem; }

/* ---------- CTA section ---------- */
.cta-card {
  background: var(--grad-sky);
  border-radius: 36px;
  padding: 3.2rem;
  display:grid; grid-template-columns: 1.4fr 1fr; gap:2rem; align-items:center;
  color:#fff;
  box-shadow: var(--shadow-pop);
  position:relative; overflow:hidden;
}
.cta-card::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(400px 200px at 10% 10%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(500px 300px at 90% 90%, rgba(255,200,87,.35), transparent 60%);
  pointer-events:none;
}
.cta-text h2 { font-family:'Baloo 2',sans-serif; font-size: clamp(1.7rem, 3vw, 2.6rem); margin-bottom:.7rem; line-height:1.15; }
.cta-text p { font-size:1.08rem; margin-bottom:1.6rem; opacity:.95; max-width:520px; }
.cta-art { position:relative; height: 280px; display:grid; place-items:center; }
.cta-art img { max-height: 110%; filter: drop-shadow(0 20px 24px rgba(0,0,0,.35)); animation: floatY 4.5s ease-in-out infinite; }
.cta-art .ring { position:absolute; border-radius:50%; border:2px dashed rgba(255,255,255,.55); }
.cta-art .ring1 { inset: 10%; animation: spin 22s linear infinite; }
.cta-art .ring2 { inset: 25%; animation: spin 30s linear infinite reverse; border-style:dotted; }

/* ---------- Inner pages ---------- */
.inner-hero {
  position:relative; padding: 7rem 0 4rem; overflow:hidden;
  isolation: isolate;
  background:
    radial-gradient(1200px 700px at 50% -10%, #FFF1C9 0%, transparent 60%),
    linear-gradient(180deg, #FFF7E6 0%, #FFE9F2 55%, #EEF6FF 100%);
}
.inner-hero-bg {
  position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.inner-hero-bg::before,
.inner-hero-bg::after {
  content:''; position:absolute; border-radius:50%; filter: blur(70px);
  animation: blobFloat 14s ease-in-out infinite;
}
.inner-hero-bg::before {
  width:480px; height:480px; background:#FFC857;
  top:-140px; left:-80px; opacity:.55;
}
.inner-hero-bg::after {
  width:520px; height:520px; background:#FF7AB6;
  bottom:-160px; right:-120px; opacity:.45;
  animation-delay:-5s;
}
.inner-hero-bg.pink::before { background:#FF7AB6; opacity:.5; }
.inner-hero-bg.pink::after  { background:#A06CD5; opacity:.45; }
.inner-hero-content { text-align:center; color: var(--c-ink); position:relative; z-index:1; }
.inner-hero-content h1 {
  font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size: clamp(2.2rem, 5vw, 3.8rem); margin:.6rem 0;
  color: var(--c-ink);
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
}
.inner-hero-content p {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--c-ink-soft);
  max-width:640px; margin-inline:auto;
}

/* two-col */
.two-col { display:grid; grid-template-columns: 1.1fr .9fr; gap:3rem; align-items:center; }
.two-col.reverse { grid-template-columns: .9fr 1.1fr; }
.col-left, .col-right { min-width:0; }
.lead { font-size:1.1rem; color: var(--c-ink-soft); margin: 1rem 0 1.4rem; }
.pill-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.pill {
  background:#fff; border-radius: var(--radius-pill);
  padding:.55rem 1rem; font-weight:600; color: var(--c-ink); font-size:.92rem;
  box-shadow: 0 8px 18px -12px rgba(42,28,94,.3);
}

.mission-card {
  background:#fff;
  border-radius: var(--radius-xl);
  padding: 3rem 3.5rem;
  text-align:center;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(255,200,87,.4);
  position:relative; overflow:hidden;
}
.mission-card::before, .mission-card::after {
  content:''; position:absolute; border-radius:50%; filter: blur(0.5px);
}
.mission-card::before { width:180px; height:180px; background: var(--grad-warm); opacity:.18; top:-60px; left:-60px; }
.mission-card::after  { width:200px; height:200px; background: var(--grad-mint); opacity:.18; bottom:-70px; right:-70px; }
.mission-card p { color: var(--c-ink-soft); font-size:1.08rem; max-width: 720px; margin: 1rem auto 0; }

/* ---------- Contact ---------- */
.contact-grid { grid-template-columns: 1.2fr .9fr; align-items:flex-start; }
.contact-form-wrap {
  padding: 2.2rem;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.7);
  border: 1.5px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow-soft);
}
.contact-form { display:flex; flex-direction:column; gap:1rem; margin-top: 1.2rem; }
.form-row { display:flex; flex-direction:column; gap:.4rem; }
.form-row label { font-weight:700; color: var(--c-ink); font-size:.92rem; }
.form-row input, .form-row textarea {
  background:#fff;
  border: 2px solid rgba(42,28,94,.08);
  border-radius: var(--radius-md);
  padding:.85rem 1rem;
  font-family: inherit; font-size:1rem; color: var(--c-ink);
  transition: border-color .2s, box-shadow .2s, transform .2s;
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus {
  outline:none; border-color: var(--c-bubble);
  box-shadow: 0 0 0 4px rgba(255,122,182,.18);
}
.form-status { font-weight:600; margin-top:.4rem; }
.form-status.ok { color: #1f9d6c; }
.form-status.err { color: #c0392b; }
.muted { color: var(--c-ink-soft); }
.small-text { font-size:.92rem; margin-top: 1rem; }

.contact-info { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.info-card {
  background:#fff; border-radius: var(--radius-lg);
  padding: 1.3rem; box-shadow: var(--shadow-soft);
  transition: transform .25s var(--ease-out);
}
.info-card:hover { transform: translateY(-5px); }
.info-icon {
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; color:#fff;
  margin-bottom:.7rem; transform: rotate(-6deg);
  box-shadow: 0 10px 20px -10px rgba(42,28,94,.5);
}
.info-card h3 { font-family:'Baloo 2',sans-serif; font-size:1.05rem; margin-bottom:.2rem; }
.info-card p  { color: var(--c-ink-soft); font-size:.9rem; }
.contact-info .small-text { grid-column: 1 / -1; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 4rem;
  background:
    radial-gradient(600px 300px at 10% 0%, rgba(255,200,87,.45), transparent 60%),
    radial-gradient(600px 300px at 90% 100%, rgba(255,122,182,.45), transparent 60%),
    linear-gradient(135deg, #FFFCF4 0%, #FFF1F8 100%);
  border-top: 2px dashed rgba(160,108,213,.25);
  padding: 3.5rem 0 1.4rem;
}
.footer-inner {
  display:grid; grid-template-columns: 2fr 1fr 1fr; gap:2.5rem;
}
.footer-brand p { color: var(--c-ink-soft); margin-top:.7rem; max-width:380px; }
.footer-links, .footer-social { display:flex; flex-direction:column; gap:.5rem; }
.footer-links h4, .footer-social h4 { font-family:'Baloo 2',sans-serif; color:var(--c-ink); margin-bottom:.3rem; }
.footer-links a { color: var(--c-ink-soft); font-weight:600; transition: color .2s; }
.footer-links a:hover { color: var(--c-grape); }
.footer-social .btn { align-self:flex-start; }
.footer-bottom { text-align:center; padding-top:1.4rem; margin-top:2.5rem; border-top:1px solid rgba(42,28,94,.1); color: var(--c-ink-soft); font-size:.92rem; }

/* ---------- Reveal animations ---------- */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .video-grid { grid-template-columns: repeat(2,1fr); }
  .friends-grid { grid-template-columns: repeat(2,1fr); }
  .why-grid, .why-grid.six { grid-template-columns: repeat(2,1fr); }
  .hero-content, .two-col, .two-col.reverse { grid-template-columns: 1fr; }
  .two-col.reverse .col-left { order: 2; }
  .cta-card { grid-template-columns: 1fr; padding: 2.4rem; text-align:center; }
  .cta-art { height: 220px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-desktop { display:none; }
  .hamburger { display:block; margin-left:auto; }
  .header-inner > .btn-youtube { display:none; }
  .hero { min-height: auto; padding: 5rem 0 3rem; }
  .hero-character img { width: 70%; }
  .hero-stats { flex-wrap:wrap; gap:1rem 1.5rem; }
  .section { padding: 4.5rem 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .mission-card { padding: 2rem 1.4rem; }
  .cta-card { padding: 2rem 1.4rem; }
}
@media (max-width: 480px) {
  .video-grid, .friends-grid, .why-grid, .why-grid.six { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.4rem; }
  .hero-ctas { flex-direction: column; align-items:stretch; }
  .hero-ctas .btn { justify-content:center; }
}

/* ---------- Tilt effect helper ---------- */
.tilt { transform-style: preserve-3d; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ===== HEADER LOGO FIX ===== */

.site-header {
  padding: 12px 18px !important;
}

.site-header .header-inner {
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.site-header .header-inner .logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 150px !important;
  height: 58px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header .header-inner .logo img.logo-img {
  display: block !important;
  width: 145px !important;
  height: 55px !important;
  max-width: 145px !important;
  max-height: 55px !important;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Mobile logo */
@media (max-width: 768px) {
  .site-header .header-inner {
    height: 66px !important;
    min-height: 66px !important;
    padding: 8px 12px !important;
  }

  .site-header .header-inner .logo {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 48px !important;
  }

  .site-header .header-inner .logo img.logo-img {
    width: 115px !important;
    max-width: 115px !important;
    height: 45px !important;
    max-height: 45px !important;
  }
}