:root{
  --cream:#F3E6D7;
  --beige:#D5BEAF;
  --pink:#EFAED2;
  --pink-deep:#E585BE;
  --plum:#453740;
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  height:100%;
  overscroll-behavior:none;
}

body{
  font-family:'Quicksand', sans-serif;
  color:var(--plum);
  background:linear-gradient(160deg, var(--cream) 0%, var(--beige) 100%);
  height:100vh;
  height:100dvh; /* matches real visible viewport on mobile (accounts for browser UI) */
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}

/* soft decorative blobs for a "good vibes" feel */
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:0.55;
  z-index:0;
}
.blob.one{
  width:380px; height:380px;
  background:var(--pink);
  top:-120px; left:-100px;
}
.blob.two{
  width:320px; height:320px;
  background:var(--beige);
  bottom:-100px;
  /* right:-80px; */
}
.blob.three{
  width:220px; height:220px;
  background:var(--pink);
  bottom:10%; left:6%;
  opacity:0.35;
}

.sparkle{
  position:absolute;
  color:var(--pink-deep);
  opacity:0.9;
  z-index:0;
  text-shadow:0 0 14px rgba(229,133,190,0.65);
  animation:twinkle 3.5s ease-in-out infinite;
}
.sparkle.s1{ top:14%; left:18%; font-size:34px; animation-delay:0s; }
.sparkle.s2{ top:22%; right:16%; font-size:24px; animation-delay:1s; }
.sparkle.s3{ bottom:18%; right:22%; font-size:40px; animation-delay:2s; }
.sparkle.s4{ bottom:28%; left:12%; font-size:20px; animation-delay:1.5s; }

@keyframes twinkle{
  0%, 100%{ opacity:0.45; transform:scale(0.85); }
  50%{ opacity:1; transform:scale(1.2); }
}

.container{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(12px, 4vh, 48px) clamp(16px, 5vw, 32px);
  max-width:640px;
  margin:0 auto;
  width:100%;
  overflow:hidden;
  animation:fadeUp 1.1s ease-out;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.logo{
  width:min(60vw, 42vh, 440px);
  height:auto;
  margin-bottom:clamp(8px, 2vh, 18px);
  filter:drop-shadow(0 6px 18px rgba(69,55,64,0.15));
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--pink);
  color:var(--plum);
  font-family:'Quicksand', sans-serif;
  font-weight:600;
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:8px 20px;
  border-radius:999px;
  margin-bottom:clamp(10px, 2.5vh, 26px);
  box-shadow:0 4px 14px rgba(239,174,210,0.5);
  white-space:nowrap;
}

h1{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.3rem, min(4vw, 4.5vh), 2.4rem);
  margin:0 0 clamp(6px, 1.5vh, 14px);
  color:var(--plum);
}

p.subtitle{
  font-size:clamp(0.85rem, 2vh, 1rem);
  line-height:1.5;
  color:var(--plum);
  opacity:0.75;
  margin:0 0 clamp(12px, 2.5vh, 30px);
  max-width:420px;
}

.dots{
  display:flex;
  gap:8px;
}
.dots span{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--plum);
  opacity:0.35;
  animation:bounce 1.4s infinite ease-in-out;
}
.dots span:nth-child(1){ animation-delay:0s; }
.dots span:nth-child(2){ animation-delay:0.2s; }
.dots span:nth-child(3){ animation-delay:0.4s; }

@keyframes bounce{
  0%, 80%, 100%{ transform:translateY(0); opacity:0.35; }
  40%{ transform:translateY(-6px); opacity:0.9; }
}

.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-top:clamp(6px, 2vh, 18px);
  border-radius:50%;
  background:var(--plum);
  color:var(--cream);
  box-shadow:0 4px 14px rgba(69,55,64,0.25);
  transition:transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  flex-shrink:0;
}

.social-link:hover{
  transform:translateY(-3px);
  background:var(--pink);
  color:var(--plum);
}

footer{
  flex-shrink:0;
  position:relative;
  z-index:1;
  text-align:center;
  padding:clamp(8px, 2vh, 22px) 16px;
  font-size:0.75rem;
  color:var(--plum);
  opacity:0.55;
}

footer a{
  color:var(--plum);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  opacity:0.9;
  transition:opacity 0.2s ease;
}

footer a:hover{
  opacity:1;
}