:root {
  --color-pink: #e26089;              /* Ярко-розовый: для акцентов, кнопок */
  --color-yellow: #fdc56a;            /* Жёлтый: дополнительный акцент */
  --color-purple: #ad509c;            /* Фиолетовый: ссылки и контент */
  --color-light-purple: #a573a8;      /* Светлый фиолетовый: текст и фон */
  --color-bg-gradient1: #fcdff4;      /* Градиент: начало (розовый) */
  --color-bg-gradient2: #fff5da;      /* Градиент: конец (желтый/кремовый) */
  --color-bg-white-cream: #fff8f0;    /* Основной фон страницы (кремовый) */
  --color-bg-white-light: #fff9f5;    /* Светлый белый (карточки и блоки) */
  --color-feature-icon-bg: #ffeefb;   /* Бэкграунд иконок преимуществ */
  --color-testimonial-bg: #fffefe;    /* Бэкграунд отзывов: почти белый */

  --radius-xl: 30px;                  /* Очень большой радиус скругления */
  --radius-lg: 22px;                  /* Большой радиус скругления */
  --radius-md: 20px;                  /* Средний радиус скругления */
  --radius-sm: 18px;                  /* Малый радиус */
  --radius-xs: 16px;                  /* Очень малый радиус */
  --radius-round: 50%;                /* Круглый (радиус для круга) */
}

body {
  background: var(--color-bg-white-cream);
  font-family: 'Montserrat', Arial, sans-serif;
  min-height: 100vh;
}

.navbar {
  background: linear-gradient(90deg, var(--color-bg-gradient1) 0%, var(--color-bg-gradient2) 100%);
  box-shadow: 0 2px 10px 0 rgba(248,184,198,0.05);
}

.navbar-brand {
  font-family: 'Pacifico', cursive;
  color: var(--color-pink) !important;
  font-size: 1.8rem;
  letter-spacing: 2px;
}

.nav-link {
  color: var(--color-purple) !important;
  font-weight: 600;
  transition: color .25s;
}

.nav-link.active,
.nav-link:hover {
  color: #db638a !important;
}

.hero-section {
  background: linear-gradient(120deg, var(--color-bg-gradient2) 40%, var(--color-bg-gradient1) 100%);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding: 60px 0 40px 0;
  text-align: center;
}

.hero-section h1 {
  font-family: 'Pacifico', cursive;
  color: var(--color-pink);
  font-size: 3.2rem;
  margin-bottom: 16px;
}

.hero-section p {
  color: var(--color-light-purple);
}

.btn-primary {
  background: linear-gradient(90deg, var(--color-pink), var(--color-yellow));
  border: none;
  color: #fff !important;
  font-weight: 700;
  border-radius: var(--radius-xl);
  box-shadow: 0 3px 20px 0 rgba(253,197,106,0.13);
  transition: background .2s;
}

.btn-primary:hover {
  background: linear-gradient(90deg, var(--color-yellow), var(--color-pink));
}

.feature-icon {
  width: 68px;
  height: 68px;
  background: var(--color-feature-icon-bg);
  color: var(--color-pink);
  border-radius: var(--radius-round);
  line-height: 68px;
  font-size: 2rem;
  margin: 0 auto 15px auto;
  box-shadow: 0 3px 10px rgba(226,96,137,0.10);
}

.product-card {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 21px rgba(226,96,137,0.13);
  background: var(--color-bg-white-light);
  transition: transform .17s;
}

.product-card:hover {
  transform: translateY(-7px) scale(1.025);
  box-shadow: 0 12px 30px rgba(226,96,137,0.16);
}

.product-img {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  height: 300px;
  object-fit: cover;
}

.footer {
  background: linear-gradient(90deg, var(--color-bg-gradient1), var(--color-bg-gradient2));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  color: var(--color-light-purple);
  margin-top: 50px;
}

.footer a {
  color: var(--color-pink);
  text-decoration: none;
  transition: color .2s;
}

.footer a:hover {
  color: var(--color-yellow);
  text-decoration: underline;
}

.social-icon {
  display: inline-block;
  margin-right: 15px;
  color: var(--color-pink);
  font-size: 1.35rem;
  transition: color .18s;
}

.social-icon:hover {
  color: var(--color-yellow);
}

.testimonial-card {
  background: var(--color-testimonial-bg);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 8px 0 rgba(226,96,137,0.08);
  padding: 30px 24px;
  min-height: 340px;
}

.testimonial-img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 99px;
  box-shadow: 0 3px 14px rgba(253,197,106,0.16);
}

.stats-number {
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--color-pink);
}

.form-control,
.form-floating > label {
  border-radius: var(--radius-xs);
}

.form-control:focus {
  border-color: var(--color-pink);
  box-shadow: 0 0 0 .15rem #e2608933;
}