/* Little Ripples: a quiet night sea. Deep blue, floating bubbles and soft ripples. */
.app-littleripples {
  --bg: #0A1E2B; --bg2: #123447; --surface: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .12);
  --text: #F2F8FA; --muted: #A9C2CC; --accent: #FFC94A; --accent-ink: #2A1E00; --accent2: #FF7A6B;
  --font-head: "Baloo 2", system-ui, sans-serif; --font-body: "Baloo 2", system-ui, sans-serif;
  --radius: 26px; --shadow: 0 24px 60px rgba(0, 0, 0, .4);
  background: linear-gradient(180deg, #17435A 0, #123447 22%, #0A1E2B 70%);
}
.app-littleripples .topbar { background: rgba(10, 30, 43, .72); }
.app-littleripples .hero h1 { font-weight: 800; }
.app-littleripples .feature, .app-littleripples .faq, .app-littleripples .promise, .app-littleripples .contact-card {
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.app-littleripples .feature-icon { border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(93,183,240,.18) 60%); color: #FFE08A; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.app-littleripples .feature:nth-child(3n+2) .feature-icon { color: #FFB1A8; }
.app-littleripples .feature:nth-child(3n) .feature-icon { color: #9FE3D9; }
.app-littleripples .store-btn, .app-littleripples .home-pill { border-radius: 999px; }
.app-littleripples .phone { background: #06131C; box-shadow: var(--shadow), 0 0 0 10px rgba(255,255,255,.04), 0 0 0 22px rgba(255,255,255,.025); }
.app-littleripples .shots .phone { box-shadow: var(--shadow); }
.app-littleripples .bubble {
  position: absolute; bottom: -80px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(255,255,255,.06) 45%, rgba(93,183,240,.12) 70%, rgba(255,255,255,.3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  animation: rise linear infinite;
}
.app-littleripples .b1 { width: 70px; height: 70px; left: 6%; animation-duration: 19s; }
.app-littleripples .b2 { width: 34px; height: 34px; left: 18%; animation-duration: 13s; animation-delay: -5s; }
.app-littleripples .b3 { width: 110px; height: 110px; left: 32%; animation-duration: 26s; animation-delay: -12s; }
.app-littleripples .b4 { width: 26px; height: 26px; left: 50%; animation-duration: 11s; animation-delay: -3s; }
.app-littleripples .b5 { width: 58px; height: 58px; left: 62%; animation-duration: 17s; animation-delay: -9s; }
.app-littleripples .b6 { width: 90px; height: 90px; left: 78%; animation-duration: 23s; animation-delay: -2s; }
.app-littleripples .b7 { width: 40px; height: 40px; left: 90%; animation-duration: 15s; animation-delay: -7s; }
.app-littleripples .b8 { width: 22px; height: 22px; left: 72%; animation-duration: 10s; animation-delay: -1s; }
.app-littleripples .b9 { width: 48px; height: 48px; left: 42%; animation-duration: 16s; animation-delay: -14s; }
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(18px, -50vh); }
  100% { transform: translate(-10px, -110vh); opacity: .2; }
}
.app-littleripples .ring { position: absolute; right: 18%; top: 50%; width: 200px; height: 200px; margin: -100px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.18); animation: ripple 6s ease-out infinite; }
.app-littleripples .r2 { animation-delay: -2s; }
.app-littleripples .r3 { animation-delay: -4s; }
@keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(3); opacity: 0; } }