/* ===================================================================
   Cleantario — Coming Soon
   Light, sunlit, glassmorphic direction:
   sky-blue field, frosted glass contact card, circular service icons,
   green + blue wave divider into a white footer.
   Type: Baloo 2 (display) + Nunito Sans (body/utility)
=================================================================== */

:root{
  --navy:#12386f;
  --navy-deep:#0c2a56;
  --blue:#2f7dc4;
  --blue-deep:#1f66b0;
  --green:#2fa65a;
  --green-deep:#1c8a45;
  --white:#ffffff;
  --ink-soft:#2a4a75;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Nunito Sans', sans-serif;
  min-height:100vh;
  color:var(--navy);
  position:relative;
  overflow-x:hidden;

  background:
    radial-gradient(760px 520px at 14% 18%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(900px 700px at 85% 65%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(150deg, #eaf5ff 0%, #bfe1fb 20%, #6fb4ec 46%, #3f8fdb 62%, #8fc7f2 82%, #eaf5ff 100%);
}

/* ---------- decorative dotted grid ---------- */
.dot-grid{
  position:fixed;
  top:0;
  left:0;
  width:260px;
  height:220px;
  z-index:0;
  pointer-events:none;
  opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.6px, transparent 1.6px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(135deg, black 20%, transparent 75%);
  mask-image:linear-gradient(135deg, black 20%, transparent 75%);
}

/* ---------- soft background blobs ---------- */
.bg-blobs{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.bg-blobs::before,
.bg-blobs::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.4), transparent 70%);
}

.bg-blobs::before{
  width:640px;
  height:640px;
  top:-160px;
  right:-120px;
}

.bg-blobs::after{
  width:420px;
  height:420px;
  bottom:8%;
  left:6%;
  background:radial-gradient(circle, rgba(255,255,255,.28), transparent 70%);
}

/* ---------- sparkle field ---------- */
.sparkle-field{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.sparkle{
  position:absolute;
  width:3px;
  height:3px;
  background:#ffffff;
  border-radius:50%;
  opacity:0;
  box-shadow:0 0 7px 1.5px rgba(255,255,255,.95);
  animation:twinkle 4.5s ease-in-out infinite;
}

@keyframes twinkle{
  0%, 100%{ opacity:0; transform:scale(.4); }
  50%{ opacity:1; transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .sparkle{ animation:none; opacity:.5; }
}

/* ---------- shell ---------- */
.shell{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  padding:64px 24px 40px;
}

/* ---------- main ---------- */
.container{
  width:100%;
  max-width:1180px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:70px;
  flex:1;
}

.logo-section{
  flex:1.1;
}

.logo-glow{
  position:relative;
  display:inline-block;
  margin-bottom:26px;
}

.logo-glow::before{
  content:"";
  position:absolute;
  inset:-30px;
  background:radial-gradient(circle, rgba(255,255,255,.65), transparent 70%);
  z-index:-1;
  filter:blur(2px);
}

.logo-glow img{
  width:340px;
  display:block;
  filter:drop-shadow(0 10px 30px rgba(12,42,86,.18));
}

h1{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:2.9rem;
  line-height:1.16;
  color:var(--navy-deep);
  margin-bottom:20px;
}

.logo-section p{
  font-size:1.15rem;
  line-height:1.7;
  max-width:520px;
  color:var(--ink-soft);
  margin-bottom:28px;
}

.thanks-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-weight:800;
  font-size:1.15rem;
  color:var(--green-deep);
}

.thanks-badge .badge-icon{
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  font-size:1rem;
  box-shadow:0 8px 18px -6px rgba(12,42,86,.3);
}

/* ---------- contact card (frosted glass) ---------- */
.contact-box{
  flex:.85;
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--navy-deep);
  padding:46px 40px 34px;
  border-radius:28px;
  box-shadow:0 30px 60px -22px rgba(12,42,86,.4);
  text-align:center;
  overflow:hidden;
}

.contact-box::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:60%;
  height:60%;
  background:linear-gradient(135deg, rgba(255,255,255,.55), transparent 70%);
  pointer-events:none;
}

.contact-box-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--blue), var(--blue-deep));
  color:#fff;
  font-size:1.3rem;
  box-shadow:0 12px 24px -8px rgba(31,102,176,.55);
  margin-bottom:14px;
}

.contact-box h3{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:1.65rem;
  color:var(--navy-deep);
}

.hr-dot{
  display:block;
  width:70px;
  height:2px;
  margin:14px auto 20px;
  position:relative;
  background:rgba(18,56,111,.18);
}

.hr-dot::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blue);
  transform:translate(-50%,-50%);
}

.contact-item{
  display:flex;
  align-items:center;
  gap:18px;
  padding:15px 4px;
  border-bottom:1px solid rgba(18,56,111,.12);
  text-align:left;
}

.contact-item:last-of-type{
  border-bottom:none;
}

.contact-item .icon{
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg, var(--green), var(--green-deep));
  color:#fff;
  font-size:.92rem;
  box-shadow:0 8px 16px -6px rgba(28,138,69,.5);
}

.contact-item a{
  text-decoration:none;
  color:var(--navy-deep);
  font-size:1.08rem;
  font-weight:700;
  transition:color .15s ease;
}

.contact-item a:hover,
.contact-item a:focus-visible{
  color:var(--green-deep);
}

.contact-item a:focus-visible{
  outline:2px solid var(--green-deep);
  outline-offset:3px;
  border-radius:3px;
}

/* ---------- services ---------- */
.services{
  width:100%;
  max-width:1180px;
  margin-top:56px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
}

.service-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(8px);
  padding:14px 22px 14px 14px;
  border-radius:18px;
  box-shadow:0 14px 30px -16px rgba(12,42,86,.35);
  font-family:'Baloo 2', sans-serif;
  font-weight:600;
  font-size:1rem;
  color:var(--navy-deep);
  line-height:1.25;
  transition:transform .2s ease, background .2s ease;
}

.service-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.72);
}

.service-icon{
  flex-shrink:0;
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.15rem;
  box-shadow:0 10px 18px -8px rgba(12,42,86,.4);
}

.service-icon.blue{
  background:linear-gradient(160deg, var(--blue), var(--blue-deep));
}

.service-icon.green{
  background:linear-gradient(160deg, var(--green), var(--green-deep));
}

/* ---------- wave divider ---------- */
.wave-divider{
  position:relative;
  z-index:1;
  width:100%;
  line-height:0;
  margin-top:-4px;
}

.wave-divider svg{
  width:100%;
  height:90px;
  display:block;
}

.wave-fill{
  fill:#ffffff;
}

.wave-line-blue{
  stroke:var(--blue);
  stroke-width:4;
  opacity:.6;
}

.wave-line-green{
  stroke:var(--green);
  stroke-width:4;
  opacity:.7;
}

/* ---------- footer ---------- */
footer{
  position:relative;
  z-index:1;
  background:#ffffff;
  padding:22px 24px 30px;
  text-align:center;
  font-size:.85rem;
  font-weight:600;
  color:#6b7b93;
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .container{
    flex-direction:column;
    text-align:center;
    gap:44px;
  }
  .logo-section p{
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }
  .thanks-badge{
    justify-content:center;
  }
  h1{
    font-size:2.3rem;
  }
  .contact-box{
    width:100%;
    max-width:460px;
  }
  .logo-glow img{
    width:260px;
  }
}

@media (max-width:640px){
  .service-card{
    flex:1 1 calc(50% - 18px);
    justify-content:center;
    text-align:left;
  }
}

@media (max-width:520px){
  h1{
    font-size:1.9rem;
  }
  .contact-box{
    padding:38px 26px 28px;
  }
  .logo-glow img{
    width:220px;
  }
}