:root {
  --blue: #0878c9;
  --blue-dark: #07599a;
  --blue-deep: #063c6c;
  --blue-light: #eaf7ff;
  --cyan: #36c7f4;
  --text: #12324a;
  --muted: #668198;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "DM Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 90% 10%, rgba(54, 199, 244, .18), transparent 28%),
    radial-gradient(circle at 5% 75%, rgba(8, 120, 201, .10), transparent 30%),
    linear-gradient(135deg, #f8fdff 0%, #eef9ff 48%, #ffffff 100%);
  overflow-x: hidden;
}

.page-shell {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.site-header {
  position: relative;
  z-index: 5;
}

.brand-logo {
  width: 150px;
  height: auto;
  object-fit: contain;
  display: block;
}

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid rgba(8, 120, 201, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(24, 101, 144, .07);
  backdrop-filter: blur(10px);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20c997;
  box-shadow: 0 0 0 5px rgba(32, 201, 151, .12);
}

.hero-section {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 45px 0 55px;
  position: relative;
  z-index: 2;
}

.hero-content {
  max-width: 720px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  margin-bottom: 22px;
  border-radius: 999px;
  color: var(--blue);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(8, 120, 201, .13);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.eyebrow i {
  font-size: 15px;
}

h1 {
  margin: 0;
  max-width: 700px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(48px, 6vw, 78px);
  line-height: .98;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--blue-deep);
}

h1 span {
  display: block;
  color: var(--blue);
}

.hero-text {
  max-width: 650px;
  margin: 25px 0 28px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.service-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.service-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(8, 120, 201, .10);
  color: #28536e;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(16, 95, 130, .05);
}

.service-pill i {
  color: var(--blue);
  font-size: 16px;
}

.coming-card {
  width: min(100%, 410px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(8, 120, 201, .12);
  box-shadow: 0 18px 45px rgba(27, 104, 143, .09);
}

.coming-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  box-shadow: 0 8px 20px rgba(8, 120, 201, .23);
  font-size: 21px;
}

.coming-card small {
  display: block;
  color: #89a1b2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  margin-bottom: 2px;
}

.coming-card strong {
  display: block;
  color: var(--blue-deep);
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  letter-spacing: .02em;
}

.shine-icon {
  margin-left: auto;
  color: #20b5dc;
  font-size: 26px;
}

/* Cleaning visual */
.cleaning-visual {
  min-height: 480px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-glow {
  width: 370px;
  height: 370px;
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(54, 199, 244, .25), rgba(54, 199, 244, 0));
  filter: blur(2px);
}

.visual-card {
  width: 330px;
  height: 390px;
  position: relative;
  overflow: hidden;
  border-radius: 48% 48% 38% 38%;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.95) 0 5px, transparent 6px),
    radial-gradient(circle at 70% 34%, rgba(255,255,255,.65) 0 8px, transparent 9px),
    linear-gradient(155deg, #dff7ff 0%, #b9ebff 48%, #69c9ed 100%);
  box-shadow:
    0 35px 70px rgba(8, 89, 142, .18),
    inset 0 1px 0 rgba(255,255,255,.9);
  border: 8px solid rgba(255,255,255,.72);
}

.visual-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  top: -70px;
  right: -40px;
  border-radius: 50%;
  background: rgba(255,255,255,.34);
}

.cleaner-circle {
  width: 115px;
  height: 115px;
  position: absolute;
  top: 48px;
  left: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  color: var(--blue);
  font-size: 50px;
  box-shadow: 0 14px 35px rgba(9, 102, 151, .12);
}

.cloth-shape {
  width: 145px;
  height: 105px;
  position: absolute;
  left: 5px;
  bottom: 55px;
  border-radius: 35px 50px 15px 55px;
  transform: rotate(-14deg);
  background: linear-gradient(135deg, #fff, #d9f6ff);
  box-shadow: 0 15px 25px rgba(5, 89, 135, .12);
}

.spray-bottle {
  width: 105px;
  height: 205px;
  position: absolute;
  right: 40px;
  bottom: 28px;
  transform: rotate(7deg);
}

.spray-head {
  width: 68px;
  height: 34px;
  position: absolute;
  right: 8px;
  top: 0;
  border-radius: 8px 16px 7px 7px;
  background: #0878c9;
}

.spray-head::after {
  content: "";
  width: 42px;
  height: 11px;
  position: absolute;
  right: 48px;
  top: 9px;
  border-radius: 10px 0 0 10px;
  background: #07599a;
}

.bottle-body {
  width: 88px;
  height: 165px;
  position: absolute;
  left: 8px;
  top: 30px;
  border-radius: 22px 22px 30px 30px;
  background: linear-gradient(145deg, #fff 0%, #e7f9ff 60%, #b7eaff 100%);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 16px 30px rgba(7, 84, 129, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--blue);
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .08em;
}

.soap-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.8);
}

.bubble-small-1 {
  width: 27px; height: 27px; right: 20px; top: 68px;
}
.bubble-small-2 {
  width: 16px; height: 16px; right: 12px; top: 110px;
}
.bubble-small-3 {
  width: 38px; height: 38px; left: 32px; top: 170px;
}

.sparkle {
  position: absolute;
  z-index: 3;
  color: var(--blue);
  filter: drop-shadow(0 6px 12px rgba(8,120,201,.15));
  animation: float 3s ease-in-out infinite;
}

.sparkle i {
  font-size: 25px;
}

.sparkle-a { top: 42px; left: 20px; animation-delay: .2s; }
.sparkle-b { top: 120px; right: 6px; animation-delay: .8s; }
.sparkle-c { bottom: 55px; right: 25px; animation-delay: 1.2s; }

.quality-badge {
  position: absolute;
  z-index: 5;
  left: 4px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px 11px 11px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 38px rgba(20, 98, 133, .15);
  backdrop-filter: blur(10px);
}

.badge-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: #20b997;
}

.quality-badge strong,
.quality-badge small {
  display: block;
}

.quality-badge strong {
  font-size: 12px;
  color: var(--blue-deep);
}

.quality-badge small {
  margin-top: 2px;
  color: #849bab;
  font-size: 10px;
}

.site-footer {
  position: relative;
  z-index: 3;
}

.footer-line {
  height: 1px;
  background: rgba(8, 89, 142, .10);
}

.site-footer p,
.footer-note {
  color: #8196a6;
  font-size: 12px;
}

.footer-note i {
  margin-right: 5px;
  color: #2db7df;
}

/* Background bubbles */
.bubble {
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  border: 1px solid rgba(8, 120, 201, .08);
  background: rgba(255,255,255,.22);
  pointer-events: none;
}

.bubble-1 { width: 140px; height: 140px; top: 12%; left: -65px; }
.bubble-2 { width: 90px; height: 90px; bottom: 20%; left: 14%; }
.bubble-3 { width: 180px; height: 180px; top: 8%; right: -85px; }
.bubble-4 { width: 55px; height: 55px; bottom: 12%; right: 16%; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-9px) rotate(5deg); }
}

@media (max-width: 991.98px) {
  .hero-section {
    padding-top: 20px;
  }

  .hero-content {
    text-align: center;
    margin: 0 auto;
  }

  .eyebrow,
  .service-pills {
    justify-content: center;
  }

  .hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  .coming-card {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .cleaning-visual {
    min-height: 390px;
  }

  .visual-card {
    width: 285px;
    height: 335px;
  }

  .cleaner-circle {
    width: 90px;
    height: 90px;
    font-size: 40px;
  }

  .spray-bottle {
    transform: scale(.82) rotate(7deg);
    transform-origin: bottom right;
  }
}

@media (max-width: 575.98px) {
  .site-header .navbar {
    padding-top: 22px !important;
  }

  .brand-logo {
    width: 125px;
  }

  .header-badge {
    padding: 7px 10px;
    font-size: 10px;
  }

  .hero-section {
    padding: 15px 0 30px;
  }

  h1 {
    font-size: clamp(43px, 13vw, 62px);
  }

  .hero-text {
    font-size: 15px;
    line-height: 1.65;
  }

  .service-pills {
    gap: 7px;
  }

  .service-pill {
    padding: 8px 10px;
    font-size: 11px;
  }

  .coming-card {
    padding: 11px 12px;
  }

  .cleaning-visual {
    min-height: 350px;
    margin-top: -5px;
  }

  .visual-card {
    width: 245px;
    height: 300px;
    border-radius: 45% 45% 35% 35%;
  }

  .cleaner-circle {
    width: 78px;
    height: 78px;
    top: 35px;
    left: 27px;
    font-size: 33px;
  }

  .cloth-shape {
    width: 110px;
    height: 80px;
    bottom: 38px;
  }

  .spray-bottle {
    transform: scale(.68) rotate(7deg);
    right: 15px;
    bottom: 12px;
  }

  .quality-badge {
    left: 0;
    bottom: 10px;
    padding: 8px 11px 8px 8px;
  }

  .badge-icon {
    width: 30px;
    height: 30px;
  }

  .site-footer .d-flex {
    text-align: center;
  }
}