:root {

  --rose: #b8627d;

  --blush: #fff1f5;

  --purple: #493979;

  --purple-soft: color-mix(in srgb, var(--purple) 72%, white);

  --shadow: 0 18px 50px rgba(73, 57, 121, 0.16);

  --radius: 28px;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html,

body {

  margin: 0;

  min-height: 100%;

}



body {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  font-family: Outfit, "Segoe UI", sans-serif;

  color: var(--purple);

  background: var(--blush);

}



.bg,

.veil {

  position: fixed;

  inset: 0;

  pointer-events: none;

}



.bg {

  background: url("background.png") center / cover no-repeat;

}



.veil {

  background:

    linear-gradient(

      180deg,

      rgba(255, 241, 245, 0.28) 0%,

      rgba(255, 241, 245, 0.46) 42%,

      rgba(73, 57, 121, 0.22) 100%

    );

}



.page {

  position: relative;

  z-index: 1;

  width: min(920px, calc(100% - 32px));

  margin: 0 auto;

  padding: 36px 0 20px;

  flex: 1;

}



.panel {

  padding: 36px 32px 32px;

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

  border: 1px solid rgba(255, 255, 255, 0.72);

  border-radius: 36px;

  box-shadow: var(--shadow);

  backdrop-filter: blur(18px);

}



.brand {

  text-align: center;

}



.brand-logo {

  display: block;

  width: min(280px, 72vw);

  height: auto;

  margin: 0 auto;

}



.hero {

  margin: 8px auto 28px;

  max-width: 640px;

  text-align: center;

}



.eyebrow {

  display: inline-block;

  margin: 0 0 14px;

  padding: 6px 14px;

  color: var(--rose);

  background: rgba(184, 98, 125, 0.12);

  border-radius: 999px;

  font-size: 0.78rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



.hero h1 {

  margin: 0 0 16px;

  font-size: clamp(2rem, 5vw, 3.2rem);

  font-weight: 500;

  line-height: 1.15;

}



.lead {

  margin: 0;

  color: var(--purple-soft);

  font-size: 1.06rem;

  font-weight: 300;

  line-height: 1.7;

}



.contacts {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;

}



.card {

  padding: 24px 22px 20px;

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

  border: 1px solid rgba(255, 255, 255, 0.86);

  border-radius: var(--radius);

  box-shadow: 0 10px 28px rgba(73, 57, 121, 0.08);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.card:hover {

  transform: translateY(-4px);

  box-shadow: 0 18px 40px rgba(73, 57, 121, 0.14);

}



.avatar {

  width: 52px;

  height: 52px;

  margin-bottom: 14px;

  display: grid;

  place-items: center;

  color: #fff;

  background: var(--purple);

  border-radius: 50%;

  font-size: 0.95rem;

  font-weight: 600;

  letter-spacing: 0.04em;

}



.avatar-alt {

  background: var(--rose);

}



.card h2 {

  margin: 0 0 4px;

  font-size: 1.35rem;

  font-weight: 600;

}



.role {

  margin: 0 0 16px;

  color: var(--purple-soft);

  font-size: 0.95rem;

}



.contact-link {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 10px;

  color: var(--purple);

  text-decoration: none;

  font-size: 0.96rem;

  word-break: break-word;

}



.contact-link:hover,

.contact-link:focus-visible {

  color: var(--rose);

}



.icon {

  flex: 0 0 34px;

  width: 34px;

  height: 34px;

  display: grid;

  place-items: center;

  color: var(--rose);

  background: rgba(184, 98, 125, 0.12);

  border-radius: 50%;

}



.icon svg {

  width: 16px;

  height: 16px;

}



footer {

  position: relative;

  z-index: 1;

  width: min(920px, calc(100% - 32px));

  margin: 0 auto 28px;

  padding: 18px 24px 20px;

  color: var(--purple);

  text-align: center;

  background: var(--blush);

  border: 1px solid rgba(255, 255, 255, 0.72);

  border-radius: 22px;

  box-shadow: 0 10px 28px rgba(73, 57, 121, 0.12);

}



footer p {

  margin: 0;

}



.footer-title {

  color: var(--purple);

  font-size: 1.15rem;

  font-weight: 600;

}



.footer-lead {

  margin-top: 6px;

  color: var(--rose);

  font-size: 0.98rem;

  font-weight: 400;

}



@media (max-width: 720px) {

  .page {

    padding-top: 20px;

  }



  .panel {

    padding: 24px 18px 20px;

  }



  .contacts {

    grid-template-columns: 1fr;

  }

}