* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  font-family: "Montserrat", sans-serif;

  background:

    radial-gradient(circle at 10% 15%, rgba(244, 208, 222, 0.95), transparent 30%),

    radial-gradient(circle at 88% 16%, rgba(255, 228, 239, 0.95), transparent 26%),

    radial-gradient(circle at 50% 80%, rgba(255, 240, 246, 0.9), transparent 34%),

    linear-gradient(180deg, #fffafd 0%, #fff5f8 45%, #fff0f5 100%);

  color: #503743;

  line-height: 1.65;

}



img {

  max-width: 100%;

  display: block;

}



.container {

  width: 90%;

  max-width: 1180px;

  margin: auto;

}



header {

  background: rgba(255, 255, 255, 0.78);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  padding: 18px 0;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);

  border-bottom: 1px solid rgba(217, 142, 165, 0.12);

  position: sticky;

  top: 0;

  z-index: 1000;

}



.nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.logo {

  display: flex;

  align-items: center;

  gap: 16px;

}



.logo img {

  width: 90px;

  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  transform: scale(1.3);
  box-shadow: 0 8px 22px rgba(217, 142, 165, 0.18),
  inset 00 10px rgba(255,255,255,0.4)

}



.logo-text {

  display: flex;

  flex-direction: column;

  line-height: 1.05;

}



.brand-name {

  font-family: "Cormorant Garamond", serif;

  font-size: 34px;

  color: #3d2430;

  letter-spacing: 0.5px;

}



.brand-tag {

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: #b07b8f;

  margin-top: 4px;

}



nav {

  display: flex;

  align-items: center;

  gap: 28px;

}



nav a {

  text-decoration: none;

  color: #7a4c5c;

  font-weight: 500;

  font-size: 15px;

  transition: all 0.25s ease;

  position: relative;

}



nav a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -6px;

  width: 0;

  height: 1.5px;

  background: #d98ea5;

  transition: width 0.25s ease;

}



nav a:hover {

  color: #d98ea5;

}



nav a:hover::after {

  width: 100%;

}



.hero {

  text-align: center;

  padding: 130px 20px 100px;

  position: relative;

}



.hero::before {

  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

  background: radial-gradient(circle, rgba(217, 142, 165, 0.18), transparent 70%);

  top: 10px;

  left: 50%;

  transform: translateX(-50%);

  filter: blur(35px);

  z-index: -1;

}



.hero h1 {

  font-family: "Cormorant Garamond", serif;

  font-size: 68px;

  margin-bottom: 18px;

  color: #3b202b;

  line-height: 1.05;

}



.hero p {

  margin-bottom: 30px;

  color: #8b6675;

  font-size: 19px;

}



.btn {

  background: linear-gradient(135deg, #d98ea5, #c97a92);

  color: white;

  padding: 14px 34px;

  text-decoration: none;

  border-radius: 999px;

  display: inline-block;

  font-weight: 600;

  box-shadow: 0 12px 30px rgba(217, 142, 165, 0.25);

  transition: all 0.28s ease;

}



.btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 18px 35px rgba(217, 142, 165, 0.3);

}



.section {

  padding: 80px 20px;

}



.section-title {

  text-align: center;

  margin-bottom: 40px;

  font-family: "Cormorant Garamond", serif;

  font-size: 46px;

  color: #3b202b;

}



.about-text {

  max-width: 850px;

  margin: 0 auto 20px;

  text-align: center;

  font-size: 18px;

  line-height: 1.9;

  color: #7a4c5c;

}



.cards {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

}



.card {

  background: rgba(255, 255, 255, 0.88);

  padding: 28px;

  border-radius: 24px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

  border: 1px solid rgba(217, 142, 165, 0.12);

  transition: all 0.3s ease;

}



.card:hover {

  transform: translateY(-8px);

  box-shadow: 0 18px 35px rgba(217, 142, 165, 0.12);
}