/* Mrs Clean — fresh white and the logo's blue, rounded type, floating bubbles */
:root{
  --bg:#ffffff; --bg-2:#eef6fc; --surface:#ffffff; --text:#0f2a3f; --muted:#5a7186; --line:rgba(47,134,200,.18);
  --accent:#2f86c8; --accent-ink:#fff; --nav-bg:rgba(255,255,255,.9); --icon-bg:#e3f0fa; --badge-bg:#fff;
  --display:"Nunito","Noto Kufi Arabic",system-ui,sans-serif; --body:"Nunito","Noto Sans Arabic",system-ui,sans-serif;
  --radius:22px; --btn-radius:999px; --h-weight:900; --h-track:-.02em;
}
.hero{background:radial-gradient(60% 70% at 80% 40%,#dcedfa,transparent 70%)}
.hero-logo{border-radius:36px;box-shadow:0 30px 60px -30px rgba(47,134,200,.45)}
.card{box-shadow:0 10px 30px -22px rgba(15,42,63,.35)}
.bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bubbles i{position:absolute;bottom:-60px;width:var(--s,40px);height:var(--s,40px);border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(173,214,243,.45) 45%,rgba(47,134,200,.12) 70%);
  box-shadow:inset 0 0 0 1px rgba(47,134,200,.25);animation:rise var(--t,12s) linear infinite;animation-delay:var(--d,0s)}
.bubbles i:nth-child(1){left:6%;--s:46px;--t:13s}
.bubbles i:nth-child(2){left:18%;--s:22px;--t:9s;--d:-3s}
.bubbles i:nth-child(3){left:34%;--s:60px;--t:16s;--d:-8s}
.bubbles i:nth-child(4){left:52%;--s:28px;--t:11s;--d:-2s}
.bubbles i:nth-child(5){left:68%;--s:52px;--t:14s;--d:-6s}
.bubbles i:nth-child(6){left:82%;--s:20px;--t:10s;--d:-4s}
.bubbles i:nth-child(7){left:92%;--s:38px;--t:15s;--d:-10s}
@keyframes rise{0%{transform:translateY(0) scale(.9);opacity:0}10%{opacity:1}100%{transform:translateY(-120vh) scale(1.1);opacity:0}}