@import url('styles.css');

.about-hero{
  max-width:1100px;
  margin:0 auto;
  padding:140px 32px 30px;
  text-align:center;
}

.about-hero h1{
  font-size:64px;
  font-weight:800;
  margin-bottom:20px;
}

.about-hero span,
.section-gradient-title span{
  background:linear-gradient(135deg,#2563EB,#06B6D4,#7C3AED);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.about-hero p{
  max-width:900px;
  margin:auto;
  font-size:18px;
  line-height:1.9;
  color:#64748B;
}

.section-gradient-title{
  text-align:center;
  font-size:48px;
  font-weight:800;
  margin-bottom:60px;
}

.about-features{
  max-width:1200px;
  margin:auto;
  padding:40px 32px 100px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

.feature-card{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-radius:28px;
  padding:32px;
  text-align:center;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 20px 60px rgba(37,99,235,.12),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition:.35s ease;
}

.feature-card:hover{
  transform:translateY(-10px);
  box-shadow:
    0 30px 80px rgba(37,99,235,.20),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.feature-icon{
  width:90px;
  height:90px;
  margin:0 auto 20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  background:linear-gradient(145deg,#f5f9ff,#e8f2ff);
  color:#2563EB;
  box-shadow:0 10px 30px rgba(37,99,235,.18);
}

.feature-card h3{
  margin-bottom:12px;
}

.feature-card p{
  color:#64748B;
  line-height:1.8;
}

@media(max-width:900px){
  .feature-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .feature-grid{
    grid-template-columns:1fr;
  }

  .about-hero h1{
    font-size:42px;
  }
}