@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap');

:root{
  --pink:#f4a7c7;
  --pink-dark:#d95f96;
  --pink-light:#ffe7f0;
  --cream:#fff9f5;
  --cream-2:#fffdfb;
  --brown:#6b4a3d;
  --brown-soft:#8b6655;
  --green:#b8cda8;
  --white:#ffffff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--brown);
  font-family:"Nunito",sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(246,182,210,.42), transparent 25%),
    radial-gradient(circle at 90% 20%, rgba(184,205,168,.28), transparent 24%),
    linear-gradient(145deg,#fff7f3 0%,#fffdfb 48%,#fff1f7 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(217,95,150,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(139,102,85,.08) 0 1px, transparent 2px);
  background-size:38px 38px,52px 52px;
}

.page{
  position:relative;
  z-index:2;
  width:min(680px,92vw);
  margin:0 auto;
  padding:42px 0 30px;
}

.hero{text-align:center}
.image-wrap{
  position:relative;
  width:178px;
  height:178px;
  margin:0 auto 17px;
}
.avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border:6px solid rgba(255,255,255,.94);
  box-shadow:0 12px 35px rgba(107,74,61,.18), 0 0 0 5px rgba(244,167,199,.34);
}
.sparkle{
  position:absolute;
  z-index:2;
  color:var(--pink-dark);
  font-size:25px;
  filter:drop-shadow(0 2px 5px rgba(217,95,150,.25));
  animation:float 3.2s ease-in-out infinite;
}
.sparkle-one{left:-18px;top:18px}
.sparkle-two{right:-14px;bottom:22px;animation-delay:1.2s}

h1{
  margin:0;
  color:var(--pink-dark);
  font-size:clamp(44px,9vw,64px);
  line-height:.9;
  font-weight:800;
  letter-spacing:.5px;
  text-shadow:0 3px 0 #fff,0 6px 18px rgba(217,95,150,.15);
}
.welcome{
  margin:13px 0 2px;
  font:600 clamp(26px,5vw,33px)/1 "Caveat",cursive;
  color:var(--brown);
}
.tagline{
  margin:7px 0 0;
  color:var(--brown-soft);
  font-size:13px;
  letter-spacing:1.4px;
  text-transform:lowercase;
}
.tagline span{color:var(--pink-dark);padding:0 7px}

.vine-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:20px auto 17px;
  color:var(--pink-dark);
}
.vine-divider i{
  display:block;
  width:75px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--pink));
}

.links{display:grid;gap:13px}
.link-card{
  position:relative;
  display:flex;
  align-items:center;
  min-height:76px;
  padding:11px 16px 11px 13px;
  text-decoration:none;
  color:var(--brown);
  background:rgba(255,255,255,.88);
  border:1.5px solid rgba(244,167,199,.55);
  border-radius:23px;
  box-shadow:0 8px 24px rgba(107,74,61,.09);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  backdrop-filter:blur(6px);
}
.link-card:hover{
  transform:translateY(-4px) scale(1.008);
  border-color:var(--pink);
  background:#fff;
  box-shadow:0 13px 30px rgba(217,95,150,.16);
}
.link-card:active{transform:translateY(-1px) scale(.995)}
.icon{
  width:52px;height:52px;display:grid;place-items:center;
  flex:0 0 52px;
  border-radius:17px;
  background:var(--pink-light);
  font-size:25px;
  margin-right:13px;
}
.copy{display:flex;flex-direction:column;gap:2px;text-align:left}
.copy strong{
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.copy small{font-size:12px;color:var(--brown-soft)}
.arrow{
  margin-left:auto;
  color:var(--pink-dark);
  font-size:18px;
  transition:transform .2s ease;
}
.link-card:hover .arrow{transform:translateX(3px) rotate(5deg)}

.link-card.live{
  border-color:rgba(217,95,150,.78);
  background:linear-gradient(100deg,rgba(255,255,255,.95),rgba(255,235,243,.94));
}
.link-card.live::after{
  content:"LIVE";
  position:absolute;
  top:-8px;
  right:18px;
  padding:3px 9px;
  border-radius:99px;
  background:var(--pink-dark);
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
  box-shadow:0 4px 10px rgba(217,95,150,.25);
}
.support{border-color:rgba(184,205,168,.8)}
.support .icon{background:#e8f1e3}

.garden-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:25px 0 5px;
  padding:18px 20px;
  border-radius:22px;
  background:rgba(255,255,255,.62);
  border:1px dashed rgba(184,205,168,.9);
}
.garden-note p{margin:0;text-align:center;line-height:1.4}
.garden-note strong{font:700 24px/1 "Caveat",cursive;color:var(--pink-dark)}
.garden-note span{font-size:11px;color:var(--brown-soft)}
.mini-bear{font-size:25px}

footer{text-align:center;padding:25px 0 4px;color:var(--brown-soft)}
footer div{letter-spacing:5px;font-size:15px}
footer p{margin:9px 0 3px;font:600 22px "Caveat",cursive;color:var(--pink-dark)}
footer small{font-size:10px;letter-spacing:.7px}

.petals{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.petals span{
  position:absolute;
  top:-30px;
  opacity:.35;
  font-size:17px;
  animation:fall linear infinite;
}
.petals span:nth-child(1){left:7%;animation-duration:12s;animation-delay:0s}
.petals span:nth-child(2){left:18%;animation-duration:15s;animation-delay:4s}
.petals span:nth-child(3){left:31%;animation-duration:13s;animation-delay:2s}
.petals span:nth-child(4){left:45%;animation-duration:17s;animation-delay:6s}
.petals span:nth-child(5){left:58%;animation-duration:14s;animation-delay:1s}
.petals span:nth-child(6){left:69%;animation-duration:16s;animation-delay:5s}
.petals span:nth-child(7){left:78%;animation-duration:12s;animation-delay:7s}
.petals span:nth-child(8){left:86%;animation-duration:18s;animation-delay:3s}
.petals span:nth-child(9){left:94%;animation-duration:13s;animation-delay:8s}
.petals span:nth-child(10){left:53%;animation-duration:15s;animation-delay:9s}

@keyframes fall{
  0%{transform:translate3d(0,-40px,0) rotate(0deg)}
  50%{transform:translate3d(28px,50vh,0) rotate(160deg)}
  100%{transform:translate3d(-20px,110vh,0) rotate(320deg)}
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-7px) rotate(5deg)}
}

@media(max-width:520px){
  .page{width:min(94vw,680px);padding-top:28px}
  .image-wrap{width:145px;height:145px}
  .link-card{min-height:70px;border-radius:20px}
  .icon{width:48px;height:48px;flex-basis:48px;font-size:22px}
  .copy strong{font-size:14px}
  .copy small{font-size:11px}
  .garden-note{padding:15px 12px}
  .mini-bear{font-size:21px}
}