:root{ --radius-lg:28px; }
.wp-site-blocks{scroll-behavior:smooth}

/* Cards & badges */
.bry-card{background:var(--wp--preset--color--cloud);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:0 10px 24px rgba(0,0,0,.06)}
.bry-badge{display:inline-block;padding:.4rem .8rem;border-radius:999px;background:var(--wp--preset--color--sun);font-weight:700}

/* HERO (CSS-only): sky gradient + clouds made with repeating radial-gradients + CSS balloons */
.hero-wrap{position:relative;overflow:hidden;border-radius:32px;background:
  radial-gradient(120% 120% at 0% 0%, #E9F5FF 0%, #FFFFFF 40%),
  linear-gradient(180deg, #E9F5FF 0%, #FFFFFF 100%);
}
.hero-sky{position:relative;height:240px;margin-top:18px;}

/* Clouds layer */
.hero-sky:before, .hero-sky:after{
  content:"";
  position:absolute; left:-5%; right:-5%;
  height:120px;
  background:
    radial-gradient(closest-side at 60px 60px, #FFFFFF 99%, rgba(255,255,255,0) 100%) -30px 10px/120px 120px repeat-x,
    radial-gradient(closest-side at 60px 60px, #F4F8FF 99%, rgba(255,255,255,0) 100%) 30px 40px/160px 120px repeat-x;
  border-bottom-left-radius:48px; border-bottom-right-radius:48px;
}
.hero-sky:after{ top:70px; opacity:.9; filter:blur(1px); }
.hero-sky:before{ top:20px; opacity:.95; }

/* Balloons */
.balloons{position:absolute; inset:0; pointer-events:none;}
.balloon{position:absolute; width:76px; height:92px; border-radius:50% 50% 48% 48%; 
  background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.7) 0 20%, transparent 21%),
              linear-gradient(180deg, #FFC857 0%, #FF7A8A 100%);
  box-shadow: inset 0 -10px 20px rgba(0,0,0,.08);
  animation: bob 5.5s ease-in-out infinite;
}
.balloon:after{ content:""; position:absolute; left:50%; top:88px; width:2px; height:40px; background:#FF7A8A; transform:translateX(-50%); }
.balloon.b1{ left:6%; top:6%; }
.balloon.b2{ left:78%; top:20%; animation-duration:6.3s; }
.balloon.b3{ left:46%; top:4%;  animation-duration:7.0s; }

@keyframes bob { 0%{transform:translateY(6px)} 50%{transform:translateY(-10px)} 100%{transform:translateY(6px)} }

/* Utility */
.round-xl{border-radius:32px}
.marquee{white-space:nowrap;overflow:hidden}
.marquee .track{display:inline-block;padding-block:.5rem;animation: marquee 22s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.wp-element-button{transition:.18s ease}
.wp-element-button:hover{transform:translateY(-1px);filter:brightness(.97)}