.about-page{
  padding:20px 0 72px;
  color:var(--navy);
  background:#fff;
}
.about-hero,
.about-features{
  width:min(1600px,calc(100% - 48px));
  margin-left:auto;
  margin-right:auto;
}
.about-hero{
  min-height:500px;
  padding:27px 5.5% 44px;
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:
    radial-gradient(circle at 48% 88%,rgba(226,247,222,.72),transparent 25%),
    radial-gradient(circle at 9% 12%,rgba(238,245,255,.9),transparent 27%),
    #fff;
  box-shadow:none;
}
.about-breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  color:#8190a4;
  font-size:12px;
  font-weight:600;
}
.about-breadcrumbs a:hover{color:var(--blue)}
.about-breadcrumbs .ti{width:13px;height:13px}
.about-hero-grid{
  margin-top:17px;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(480px,1.05fr);
  gap:62px;
  align-items:center;
}
.about-copy{padding:20px 0 18px}
.about-kicker{
  width:max-content;
  padding:8px 13px;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:18px;
  background:#edf8e9;
  color:#419b3a;
  font-size:12px;
  font-weight:700;
}
.about-kicker .ti{width:17px;height:17px}
.about-copy h1{
  margin:21px 0 10px;
  font-size:46px;
  line-height:1.05;
  letter-spacing:-1.7px;
}
.about-lead{
  max-width:640px;
  margin:0;
  font-size:34px;
  line-height:1.38;
  letter-spacing:-.6px;
}
.about-description{
  max-width:680px;
  margin:25px 0 0;
  color:#52637a;
  font-size:16px;
  line-height:1.72;
}
.about-visual{
  min-height:390px;
  position:relative;
  overflow:hidden;
  border-radius:42% 18% 34% 24% / 30% 24% 32% 40%;
  background-color:#eaf5eb;
  background-image:url(../images/hero-butterfly-v2.png);
  background-repeat:no-repeat;
  background-position:84% center;
  background-size:170% auto;
  box-shadow:0 18px 40px rgba(23,43,73,.14);
}
.about-visual:after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.65);
  border-radius:inherit;
  box-shadow:inset 0 0 50px rgba(255,255,255,.12);
}
.about-visual-badge{
  position:absolute;
  z-index:2;
  right:clamp(68px,6vw,104px);
  bottom:48px;
  padding:11px 15px;
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:17px;
  background:rgba(255,255,255,.87);
  color:#397d3d;
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(10px);
  box-shadow:0 9px 24px rgba(23,43,73,.12);
}
.about-visual-badge .ti{width:19px;height:19px}
.about-features{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.about-feature{
  min-height:174px;
  padding:25px 26px;
  position:relative;
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:20px;
  align-items:center;
  overflow:hidden;
  border:1px solid #e2e9f2;
  border-radius:22px;
  background:#fff;
  box-shadow:0 8px 26px rgba(23,43,73,.055);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.about-feature:hover{transform:translateY(-4px);border-color:#cfe0f4;box-shadow:0 14px 32px rgba(23,43,73,.11)}
.about-feature:before{
  content:"";
  width:140px;
  height:140px;
  position:absolute;
  right:-74px;
  bottom:-82px;
  border:22px solid rgba(41,120,242,.035);
  border-radius:50%;
}
.about-feature-icon{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#edf8e9;
  color:#50a742;
}
.about-feature.emotions .about-feature-icon{background:#fff3dc;color:#e6a21e}
.about-feature.shop .about-feature-icon{background:#eaf3ff;color:#2878f2}
.about-feature.groups .about-feature-icon{background:#edf8e9;color:#4ca442}
.about-feature.social .about-feature-icon{background:#f3eaff;color:#9259dd}
.about-feature.souvenirs .about-feature-icon{background:#fff0df;color:#e88a25}
.about-feature-icon .ti{width:34px;height:34px;stroke-width:1.65}
.about-feature h2{margin:0;font-size:18px;line-height:1.32;letter-spacing:-.25px}
.about-feature p{margin:9px 0 0;color:#627187;font-size:13px;line-height:1.55}
.about-feature-arrow{
  width:17px;
  height:17px;
  position:absolute;
  right:18px;
  bottom:17px;
  color:#9db4d1;
  opacity:0;
  transform:translateX(-5px);
  transition:opacity .18s ease,transform .18s ease;
}
.about-feature:hover .about-feature-arrow{opacity:1;transform:translateX(0)}

@media(max-width:1100px){
  .about-hero-grid{grid-template-columns:1fr 1fr;gap:34px}
  .about-copy h1{font-size:39px}
  .about-lead{font-size:29px}
  .about-description{font-size:14px}
  .about-visual{min-height:360px}
  .about-features{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .about-page{padding-top:10px;padding-bottom:38px}
  .about-hero,.about-features{width:calc(100% - 16px)}
  .about-hero{padding:22px 18px 18px;border-radius:0}
  .about-hero-grid{margin-top:12px;grid-template-columns:1fr;gap:22px}
  .about-copy{padding-top:17px}
  .about-copy h1{font-size:35px}
  .about-lead{font-size:27px;line-height:1.3}
  .about-description{margin-top:20px;font-size:14px;line-height:1.62}
  .about-visual{min-height:330px;border-radius:28px;background-position:82% center;background-size:190% auto}
  .about-visual-badge{right:24px;bottom:24px}
  .about-features{grid-template-columns:1fr;gap:14px}
  .about-feature{min-height:150px;padding:20px;grid-template-columns:66px 1fr;gap:15px}
  .about-feature-icon{width:62px;height:62px}
  .about-feature-icon .ti{width:29px;height:29px}
  .about-feature h2{font-size:17px}
}

@media(max-width:380px){
  .about-copy h1{font-size:31px}
  .about-lead{font-size:24px}
  .about-visual{min-height:290px}
  .about-feature{grid-template-columns:58px 1fr;padding:18px 15px}
  .about-feature-icon{width:54px;height:54px}
  .about-feature p{font-size:12.5px}
}