/* ============================================================
   Base — reset, page background, container, decorative shapes,
   and shared entrance animations.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--text);
  background:
    radial-gradient(ellipse 60% 50% at 12% 8%, rgba(143,189,61,0.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 12%, rgba(239,140,46,0.18), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255,212,140,0.30), transparent 65%),
    var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Centered page container */
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 32px); position: relative; z-index: 2; }

/* Floating decorative shapes */
.deco { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.deco.d1 { width: 120px; height: 120px; background: var(--green-soft); top: 130px; left: 4%; animation: float 7s ease-in-out infinite; }
.deco.d2 { width: 80px; height: 80px; background: var(--orange-soft); top: 360px; right: 8%; animation: float 6s ease-in-out infinite 0.6s; }
.deco.d3 { width: 54px; height: 54px; background: #fff; box-shadow: 0 8px 22px rgba(230,138,46,0.16); top: 500px; left: 14%; animation: float 8s ease-in-out infinite 0.3s; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }

/* Entrance animation utilities */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.7s cubic-bezier(.2,.7,.3,1) both; }
.rise.r2 { animation-delay: 0.08s; }
.rise.r3 { animation-delay: 0.16s; }
.rise.r4 { animation-delay: 0.24s; }