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

body{
  font-family:'Quicksand',sans-serif;
  background:#fdfefe;
  background-image:radial-gradient(#eaeaea 1px, transparent 1px);
  background-size:18px 18px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.top{
  padding:20px 0;
}

.logo{height:70px}

.layout{
  width:100%;
  max-width:1200px;
  padding:20px;
  display:grid;
  grid-template-columns:1fr;
  row-gap:40px;
}

.hero-wrap{
  display:flex;
  justify-content:center;
}

.hero{
  background:white;
  border:3px dashed #ff6fae;
  border-radius:18px;
  padding:32px 48px;
  text-align:center;
  transform:rotate(-2.5deg);
}

.hero h1{
  transform:rotate(-2.5deg);
}

.hero h1{
  font-family:'Bubblegum Sans',cursive;
  font-size:clamp(34px,4vw,56px);
  line-height:1.2;
}

.pink{color:#ff2f92}
.black{color:#000}

.note-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  align-items:center;
  justify-items:center;
}

.note{
  background:#ffe7a3;
  padding:22px 24px;
  border-radius:14px;
  max-width:480px;
  box-shadow:0 6px 12px rgba(0,0,0,0.08);
  transform:rotate(2.5deg);
}

.note h3,
.note p{
  transform:rotate(-1deg);
}

.note h3{margin-bottom:6px;font-weight:700}

.heart-box{
  width:180px;
}

.heart-box img{
  width:100%;
  display:block;
}

.icons{
  display:flex;
  justify-content:center;
  gap:22px;
}

.icon{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 10px rgba(0,0,0,0.08);
  overflow:hidden;
}

.icon img{
  width:60%;
  height:60%;
  object-fit:contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.08));
}

.blue{background:#e8f4ff}
.soft{background:#f1f7ff}
.yellow{background:#fff2c6}

.social-section{
  display:flex;
  justify-content:flex-end;
}

.social-card{
  background:#fff;
  border-radius:18px;
  padding:26px 28px;
  box-shadow:0 10px 20px rgba(0,0,0,0.1);
  max-width:420px;
  transform:rotate(-2.8deg);
}

.social-card h2,
.social-card p{
  transform:rotate(1deg);
}

.social-card h2{
  font-family:'Bubblegum Sans',cursive;
  color:#ff2f92;
  margin-bottom:8px;
}

.socials{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.socials a{
  text-decoration:none;
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  color:#000;
}

.instagram{background:#e8f4ff}
.whatsapp{background:#e9fff2}
.tiktok{background:#fff2c6}

footer{
  margin-top:auto;
  padding:20px 0;
  font-size:13px;
  color:#555;
  text-align:center;
}

/* Tablet */
@media (min-width:768px){
  .note-wrap{grid-template-columns:1fr 200px}
}

/* Desktop */
@media (min-width:1100px){
  .layout{grid-template-columns:1fr}
  .note-wrap{grid-template-columns:480px 220px;justify-content:center}
  .social-section{justify-content:flex-end}
}