:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; background: #F4F8FB; color: #1B3A5C; }

/* --- subtle wave divider between sections --- */
.wave-sep { display: block; width: 100%; height: 56px; }

/* --- soft floating bubbles in hero --- */
@keyframes floatUp {
  0%   { transform: translateY(0) scale(1); opacity: .0; }
  10%  { opacity: .5; }
  90%  { opacity: .5; }
  100% { transform: translateY(-560px) scale(1.35); opacity: 0; }
}
.bubble {
  position: absolute;
  bottom: -120px;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(111,209,199,.45));
  animation: floatUp linear infinite;
  pointer-events: none;
}

/* --- gentle fade-in on scroll --- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* --- sofa illustration line drawing --- */
.sofa-svg path, .sofa-svg rect, .sofa-svg circle, .sofa-svg line {
  stroke: #1B3A5C; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* --- sparkle animation on hero icon --- */
@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.15) rotate(8deg); opacity: .75; }
}
.sparkle { animation: sparkle 2.6s ease-in-out infinite; transform-origin: center; }