*{box-sizing:border-box}

.about-page{
  background:#fff;
  color:#111827;
  font-family:inherit;
}

.about-container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
}

.about-hero{
  padding:64px 0;
  background:#fff;
}

.about-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:54px;
  align-items:center;
}

.about-badge,
.section-label{
  display:inline-flex;
  align-items:center;
  width:max-content;
  color:#fff;
  background:#0E172A;
  border:1px solid #0E172A;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:700;
}

.section-label{
  text-transform:uppercase;
  letter-spacing:.14em;
  background:transparent;
  border:0;
  padding:0;
  border-radius:0;
  font-size:11px;
}

.about-hero h1{
  max-width:650px;
  margin:18px 0 0;
  color:#111827;
  font-size:42px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.4px;
}

.about-hero p{
  max-width:650px;
  margin:18px 0 0;
  color:#526173;
  font-size:15px;
  line-height:1.75;
}

.about-actions{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.about-btn{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 22px;
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  font-weight:750;
  transition:background .18s ease,border-color .18s ease;
}

.about-btn-main{
  background:#f4b321;
  color:#111827;
  border:1px solid #f4b321;
}

.about-btn-main:hover{
  background:#dda113;
}

.about-btn-outline{
  background:#fff;
  color:#111827;
  border:1px solid #d8e0ea;
}

.about-btn-outline:hover{
  background:#f8fafc;
}

.about-btn-blue{
  margin-top:24px;
  background:#ffc32a;
  color:#0E172A;
}

.about-btn-blue:hover{
  background:#ffc32a;
}

.about-hero-image{
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e1e8f0;
  background:#f8fafc;
}

.about-hero-image img{
  width:100%;
  height:480px;
  object-fit:cover;
  display:block;
}

.about-section{
  padding:64px 0;
  background:#fff;
}

.about-section.soft{
  background:#f5f8fb;
}

.about-section.second-soft{
  padding-top:0;
}

.about-panel{
  background:#fff;
  border:1px solid #e1e8f0;
  border-radius:16px;
  padding:32px;
}

.about-panel h2,
.section-head h2{
  max-width:720px;
  margin:12px 0 0;
  color:#111827;
  font-size:28px;
  line-height:1.2;
  font-weight:780;
  letter-spacing:-.2px;
}

.small-line{
  width:70px;
  height:3px;
  background:#f4b321;
  margin:18px 0 0;
  border-radius:30px;
}

.feature-grid{
  display:grid;
  gap:18px;
  margin-top:28px;
}

.feature-grid.three{
  grid-template-columns:repeat(3,1fr);
}

.feature-grid.four{
  grid-template-columns:repeat(4,1fr);
}

.feature-card,
.value-card{
  background:#fbfcfd;
  border:1px solid #e1e8f0;
  border-radius:12px;
  padding:22px;
}

.icon-box{
  width:55px;
  height:55px;
  border-radius:10px;
  background:#eef5fb;
  color:#1e8fd3;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  margin-bottom:16px;
}

.icon-box.amber{
  background:#fff7e2;
  color:#c98900;
}

.feature-card h3,
.value-card h3{
  margin:0;
  color:#111827;
  font-size:17px;
  line-height:1.35;
  font-weight:780;
}

.feature-card p,
.value-card p{
  margin:10px 0 0;
  color:#526173;
  font-size:14px;
  line-height:1.7;
}

.section-head{
  margin-bottom:28px;
}

.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.value-card{
  background:#f8fafc;
}

@media(max-width:1024px){
  .about-hero-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .about-hero-image img{
    height:330px;
  }

  .feature-grid.four{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .about-container{
    padding:0 16px;
  }

  .about-hero{
    padding:42px 0;
  }

  .about-hero h1{
    font-size:30px;
    line-height:1.18;
  }

  .about-hero p{
    font-size:14px;
    line-height:1.72;
  }

  .about-actions{
    flex-direction:column;
  }

  .about-btn{
    width:100%;
  }

  .about-hero-image{
    border-radius:14px;
  }

  .about-hero-image img{
    height:260px;
  }

  .about-section{
    padding:46px 0;
  }

  .about-section.second-soft{
    padding-top:0;
  }

  .about-panel{
    padding:22px;
    border-radius:14px;
  }

  .about-panel h2,
  .section-head h2{
    font-size:24px;
    line-height:1.25;
  }

  .feature-grid.three,
  .feature-grid.four,
  .values-grid{
    grid-template-columns:1fr;
  }

  .feature-card,
  .value-card{
    padding:20px;
  }
}

@media(max-width:420px){
  .about-hero h1{
    font-size:28px;
  }

  .about-panel h2,
  .section-head h2{
    font-size:23px;
  }

  .about-badge{
    font-size:11px;
  }
}