:root {

  --red: #cf2027;

  --red-dark: #a9151c;

  --red-soft: #fff1f2;

  --text: #171717;

  --muted: #5f5f66;

  --line: #e7e7ea;

  --white: #ffffff;

  --bg: #ffffff;

  --bg-soft: #f7f7f8;

  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.05);

  --shadow-md: 0 18px 46px rgba(0, 0, 0, 0.08);

  --shadow-red: 0 18px 44px rgba(207, 32, 39, 0.18);

  --radius: 28px;

  --container: 1240px;

}



/* RESET */

* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: Arial, Helvetica, sans-serif;

  color: var(--text);

  background: var(--bg);

  line-height: 1.65;

}



img {

  max-width: 100%;

  display: block;

}



a {

  color: inherit;

  text-decoration: none;

}



ul {

  margin: 0;

  padding: 0;

}



.container {

  width: min(var(--container), calc(100% - 48px));

  margin: 0 auto;

}



/* HEADER */

.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

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

  backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

}



.header-wrap {

  min-height: 88px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

}



.logo img {

  height: 58px;

  width: auto;

  object-fit: contain;

}



.main-nav {

  display: flex;

  align-items: center;

  gap: 24px;

  margin-left: auto;

  margin-right: 6px;

}



.main-nav a {

  position: relative;

  font-size: 14px;

  font-weight: 700;

  color: #303030;

  transition: color 0.25s ease;

}



.main-nav a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -9px;

  width: 0;

  height: 2px;

  background: var(--red);

  transition: width 0.25s ease;

}



.main-nav a:hover {

  color: var(--red);

}



.main-nav a:hover::after {

  width: 100%;

}



.menu-toggle {

  display: none;

  width: 46px;

  height: 46px;

  border: 1px solid var(--line);

  background: var(--white);

  border-radius: 14px;

  padding: 0;

  cursor: pointer;

}



.menu-toggle span {

  display: block;

  width: 20px;

  height: 2px;

  margin: 4px auto;

  background: var(--text);

}



.mobile-nav {

  display: none;

  background: var(--white);

  border-top: 1px solid var(--line);

}



.mobile-nav a {

  display: block;

  padding: 14px 22px;

  border-bottom: 1px solid var(--line);

  font-weight: 700;

}



/* BUTTONS */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 54px;

  padding: 0 26px;

  border-radius: 999px;

  font-weight: 700;

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

  cursor: pointer;

}



.btn-primary,

.btn-header {

  background: linear-gradient(135deg, var(--red), var(--red-dark));

  color: #ffffff;

  box-shadow: var(--shadow-red);

}



.btn-primary:hover,

.btn-header:hover {

  transform: translateY(-2px);

}



.btn-secondary {

  background: #ffffff;

  color: var(--text);

  border: 1px solid var(--line);

  box-shadow: var(--shadow-sm);

}



.btn-secondary:hover {

  color: var(--red);

  border-color: rgba(207, 32, 39, 0.22);

  transform: translateY(-2px);

}



/* LABELS */

.section-kicker,

.card-label {

  display: inline-flex;

  align-items: center;

  min-height: 36px;

  padding: 0 15px;

  border-radius: 999px;

  background: var(--red-soft);

  color: var(--red);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.section-kicker-light {

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

  color: #ffe1e4;

}



/* HERO */

.hero {

  position: relative;

  overflow: hidden;

  padding: 60px 0 80px;

  background:

    radial-gradient(circle at top right, rgba(207, 32, 39, 0.09), transparent 30%),

    radial-gradient(circle at left bottom, rgba(207, 32, 39, 0.05), transparent 24%),

    linear-gradient(180deg, #ffffff 0%, #faf7f7 100%);

}



.hero-bg {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

}



.hero-bg-1 {

  width: 520px;

  height: 520px;

  right: -190px;

  top: -190px;

  background: radial-gradient(circle, rgba(207, 32, 39, 0.12), transparent 68%);

}



.hero-bg-2 {

  width: 380px;

  height: 380px;

  left: -140px;

  bottom: -140px;

  background: radial-gradient(circle, rgba(207, 32, 39, 0.08), transparent 68%);

}



.hero-grid {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns: 1.08fr 0.92fr;

  gap: 34px;

  align-items: center;

}



.hero-content h1 {

  margin: 18px 0 20px;

  font-size: clamp(60px, 5vw, 50px);

  line-height: 1.03;

  letter-spacing: -0.04em;

  max-width: 760px;

}



.hero-text {

  margin: 0 0 16px;

  max-width: 760px;

  font-size: 20px;

  color: var(--muted);

}



.hero-subtext {

  margin: 0;

  max-width: 760px;

  font-size: 17px;

  color: var(--muted);

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 32px;

}



.hero-points {

  display: grid;

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

  gap: 14px;

  margin-top: 30px;

  max-width: 860px;

}



.point {

  min-height: 84px;

  display: flex;

  align-items: center;

  padding: 18px 18px;

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

  border: 1px solid var(--line);

  border-radius: 20px;

  box-shadow: var(--shadow-sm);

  font-size: 15px;

  font-weight: 700;

  color: #3f3f45;

}



.hero-card {

  position: relative;

  overflow: hidden;

  background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);

  border: 1px solid rgba(207, 32, 39, 0.12);

  border-radius: 32px;

  padding: 38px;

  box-shadow: var(--shadow-md);

}



.hero-card::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 5px;

  background: linear-gradient(90deg, var(--red), var(--red-dark));

}



.hero-card h2 {

  margin: 18px 0 14px;

  font-size: 34px;

  line-height: 1.12;

  letter-spacing: -0.03em;

}



.hero-card p {

  margin: 0 0 18px;

  font-size: 17px;

  color: var(--muted);

}



.hero-list {

  list-style: none;

}



.hero-list li {

  position: relative;

  padding-left: 26px;

  font-size: 16px;

  font-weight: 700;

  color: #414149;

}



.hero-list li + li {

  margin-top: 12px;

}



.hero-list li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 10px;

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: var(--red);

  box-shadow: 0 0 0 5px rgba(207, 32, 39, 0.08);

}



/* GENERAL SECTIONS */

.section {

  padding: 96px 0;

}



.section-soft {

  background: var(--bg-soft);

}



.section-heading {

  max-width: 920px;

  margin: 0 auto 46px;

  text-align: center;

}



.section-heading h2,

.intro-box h2,

.private-content h2,

.contact-info h2,

.cta-band-inner h2 {

  margin: 16px 0 0;

  font-size: clamp(34px, 4vw, 54px);

  line-height: 1.08;

  letter-spacing: -0.035em;

}



.section-heading p,

.intro-box p,

.private-content p,

.contact-info p,

.cta-band-inner p {

  margin: 0 0 18px;

  font-size: 18px;

  color: var(--muted);

}



/* INTRO */

.intro-grid {

  display: grid;

  grid-template-columns: 0.94fr 1.06fr;

  gap: 34px;

  align-items: stretch;

}



.intro-box {

  border-radius: 32px;

  padding: 40px;

}



.intro-box-red {

  position: relative;

  overflow: hidden;

  background: linear-gradient(135deg, var(--red), var(--red-dark));

  color: #ffffff;

  box-shadow: var(--shadow-red);

}



.intro-box-red::after {

  content: "";

  position: absolute;

  right: -35px;

  bottom: -35px;

  width: 160px;

  height: 160px;

  border-radius: 50%;

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

}



.intro-box-white {

  position: relative;

  background: #ffffff;

  border: 1px solid var(--line);

  box-shadow: var(--shadow-md);

}



.intro-box-white::before {

  content: "";

  position: absolute;

  inset: 0 auto 0 0;

  width: 5px;

  background: linear-gradient(180deg, var(--red), var(--red-dark));

  border-radius: 32px 0 0 32px;

}



.intro-box-red h2 {

  color: #ffffff;

}



.intro-box-red p {

  color: rgba(255, 255, 255, 0.9);

}



/* SERVICES */

.services-grid {

  display: grid;

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

  gap: 24px;

}



.service-card {

  position: relative;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--line);

  border-radius: 26px;

  padding: 32px 28px 28px;

  box-shadow: var(--shadow-sm);

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

}



.service-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-md);

  border-color: rgba(207, 32, 39, 0.16);

}



.service-card::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 5px;

  background: linear-gradient(90deg, var(--red), var(--red-dark));

}



.service-number {

  margin-bottom: 12px;

  color: var(--red);

  font-size: 14px;

  font-weight: 900;

  letter-spacing: 0.08em;

}



.service-card h3 {

  margin: 0;

  font-size: 24px;

  line-height: 1.22;

}



.service-card p {

  margin: 12px 0 0;

  font-size: 16px;

  color: var(--muted);

}



/* BENEFITS */

.benefits-grid {

  display: grid;

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

  gap: 24px;

}



.benefit-card {

  position: relative;

  background: #ffffff;

  border: 1px solid var(--line);

  border-radius: 26px;

  padding: 30px 28px 28px 68px;

  box-shadow: var(--shadow-sm);

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

}



.benefit-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-md);

  border-color: rgba(207, 32, 39, 0.16);

}



.benefit-card::before {

  content: "";

  position: absolute;

  left: 28px;

  top: 30px;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  background: var(--red);

  box-shadow: 0 0 0 8px rgba(207, 32, 39, 0.08);

}



.benefit-card h3 {

  margin: 0;

  font-size: 23px;

  line-height: 1.22;

}



.benefit-card p {

  margin: 12px 0 0;

  font-size: 16px;

  color: var(--muted);

}



/* PARTNERS */

.partner-grid {

  display: grid;

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

  gap: 24px;

}



.partner-card {

  min-height: 132px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 22px;

  background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);

  border: 1px solid var(--line);

  border-radius: 24px;

  box-shadow: var(--shadow-sm);

  font-size: 22px;

  font-weight: 700;

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

}



.partner-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-md);

  border-color: rgba(207, 32, 39, 0.16);

}



/* PRIVATE LABEL */

.private-label {

  background:

    radial-gradient(circle at left top, rgba(207, 32, 39, 0.08), transparent 30%),

    linear-gradient(180deg, #ffffff 0%, #faf7f7 100%);

}



.private-grid {

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  gap: 34px;

  align-items: stretch;

}



.private-content {

  background: #ffffff;

  border: 1px solid var(--line);

  border-radius: 32px;

  padding: 42px;

  box-shadow: var(--shadow-md);

}



.private-content p {

  max-width: 740px;

}



.private-btn {

  margin-top: 10px;

}



.private-box {

  position: relative;

  overflow: hidden;

  background: linear-gradient(135deg, var(--red), var(--red-dark));

  color: #ffffff;

  border-radius: 32px;

  padding: 42px;

  box-shadow: var(--shadow-red);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.private-box::after {

  content: "";

  position: absolute;

  right: -42px;

  top: -42px;

  width: 190px;

  height: 190px;

  border-radius: 50%;

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

}



.private-box-top,

.private-steps {

  position: relative;

  z-index: 1;

}



.private-box h3 {

  margin: 0 0 14px;

  font-size: 34px;

  line-height: 1.1;

  letter-spacing: -0.03em;

}



.private-box p {

  margin: 0 0 28px;

  font-size: 17px;

  color: rgba(255, 255, 255, 0.9);

  max-width: 480px;

}



.private-steps {

  display: grid;

  gap: 14px;

}



.private-step {

  display: flex;

  align-items: center;

  gap: 16px;

  min-height: 72px;

  padding: 14px 18px;

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

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

  border-radius: 18px;

  backdrop-filter: blur(4px);

}



.private-step span {

  flex: 0 0 46px;

  height: 46px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #ffffff;

  color: var(--red);

  font-size: 14px;

  font-weight: 900;

}



.private-step strong {

  font-size: 18px;

  line-height: 1.3;

  font-weight: 700;

}



/* CTA */

.cta-band {

  padding: 88px 0;

}



.cta-band-inner {

  position: relative;

  overflow: hidden;

  max-width: 980px;

  margin: 0 auto;

  text-align: center;

  background: linear-gradient(135deg, var(--red), var(--red-dark));

  color: #ffffff;

  border-radius: 32px;

  padding: 52px 36px;

  box-shadow: var(--shadow-red);

}



.cta-band-inner::after {

  content: "";

  position: absolute;

  right: -60px;

  top: -60px;

  width: 200px;

  height: 200px;

  border-radius: 50%;

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

}



.cta-band-inner p {

  color: rgba(255, 255, 255, 0.9);

}



.cta-actions {

  display: flex;

  justify-content: center;

  margin-top: 24px;

}



/* CONTACT */

.contact-grid {

  display: grid;

  grid-template-columns: 0.94fr 1.06fr;

  gap: 34px;

  align-items: stretch;

}



.contact-info {

  position: relative;

  overflow: hidden;

  background: linear-gradient(135deg, var(--red), var(--red-dark));

  color: #ffffff;

  border-radius: 32px;

  padding: 40px;

  box-shadow: var(--shadow-red);

}



.contact-info::after {

  content: "";

  position: absolute;

  right: -44px;

  bottom: -44px;

  width: 180px;

  height: 180px;

  border-radius: 50%;

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

}



.contact-info p {

  color: rgba(255, 255, 255, 0.92);

}



.contact-list {

  display: grid;

  gap: 14px;

  margin-top: 28px;

  position: relative;

  z-index: 1;

}



.contact-item,

.contact-item-row {

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

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

  border-radius: 18px;

  padding: 16px 18px;

}



.contact-item-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  padding: 14px;

}



.contact-item.small {

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

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

  border-radius: 14px;

  padding: 14px 16px;

}



.contact-label {

  display: block;

  margin-bottom: 4px;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

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

}



.contact-item strong {

  font-size: 18px;

  line-height: 1.3;

  color: #ffffff;

}



.contact-form-box {

  background: #ffffff;

  border: 1px solid var(--line);

  border-radius: 32px;

  padding: 34px;

  box-shadow: var(--shadow-md);

}



.contact-form {

  display: block;

}



.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

}



.form-group {

  margin-bottom: 18px;

}



.form-group label {

  display: block;

  margin-bottom: 8px;

  font-size: 14px;

  font-weight: 700;

  color: #34343a;

}



.form-group input,

.form-group textarea {

  width: 100%;

  border: 1px solid #dbdbe0;

  border-radius: 15px;

  padding: 15px 16px;

  font: inherit;

  color: var(--text);

  background: #ffffff;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.form-group textarea {

  resize: vertical;

  min-height: 150px;

}



.form-group input:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--red);

  box-shadow: 0 0 0 4px rgba(207, 32, 39, 0.1);

}



.form-btn {

  width: 100%;

  border: none;

}



/* FOOTER */

.site-footer {

  padding: 34px 0;

  background: #111111;

  color: rgba(255, 255, 255, 0.84);

}



.footer-wrap {

  display: grid;

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

  gap: 24px;

  font-size: 15px;

  line-height: 1.75;

}



.site-footer strong {

  color: #ffffff;

}



/* RESPONSIVE */

@media (max-width: 1180px) {

  .hero-grid,

  .intro-grid,

  .private-grid,

  .contact-grid,

  .services-grid,

  .benefits-grid,

  .partner-grid,

  .footer-wrap {

    grid-template-columns: 1fr 1fr;

  }



  .hero-points {

    grid-template-columns: 1fr 1fr;

  }

}



@media (max-width: 920px) {

  .main-nav,

  .btn-header {

    display: none;

  }



  .menu-toggle {

    display: inline-block;

  }



  body.menu-open .mobile-nav {

    display: block;

  }



  .hero,

  .section,

  .cta-band {

    padding: 76px 0;

  }



  .hero-grid,

  .intro-grid,

  .private-grid,

  .contact-grid,

  .services-grid,

  .benefits-grid,

  .partner-grid,

  .footer-wrap,

  .form-row,

  .hero-points {

    grid-template-columns: 1fr;

  }



  .header-wrap {

    min-height: 78px;

  }



  .logo img {

    height: 48px;

  }



  .hero-card,

  .intro-box,

  .private-content,

  .private-box,

  .contact-info,

  .contact-form-box,

  .cta-band-inner {

    padding: 28px;

  }



  .contact-item-row {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 560px) {

  .container {

    width: min(var(--container), calc(100% - 24px));

  }



  .hero-content h1 {

    font-size: clamp(34px, 11vw, 48px);

  }



  .hero-text,

  .hero-subtext,

  .section-heading p,

  .intro-box p,

  .private-content p,

  .contact-info p,

  .cta-band-inner p {

    font-size: 16px;

  }



  .section-heading h2,

  .intro-box h2,

  .private-content h2,

  .contact-info h2,

  .cta-band-inner h2 {

    font-size: clamp(30px, 9vw, 40px);

  }



  .hero-actions,

  .cta-actions {

    flex-direction: column;

  }



  .btn,

  .btn-primary,

  .btn-secondary,

  .btn-header {

    width: 100%;

  }



  .point {

    text-align: center;

    justify-content: center;

  }



  .partner-card {

    min-height: 92px;

    font-size: 18px;

  }



  .private-box h3 {

    font-size: 28px;

  }



  .private-step {

    align-items: flex-start;

  }



  .private-step strong {

    font-size: 16px;

  }

}