/* Modern About page styles for AgriNet */
:root{
  --brand: #2e7d32;
  --brand-dark: #064E3B;
  --muted: #6b7280;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.95);
  --radius: 12px;
}

/* Base reset for this page (keeps consistency with main CSS) */
.about-container{
  max-width:1100px;
  margin: 40px auto;
  padding: 40px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(2,6,23,0.08);
}

.about-hero{
  display:flex;
  gap:28px;
  align-items:center;
  margin-bottom:28px;
}
.about-hero .hero-text{
  flex:1 1 420px;
}
.about-hero h1{
  font-size:2.2rem;
  color:var(--brand-dark);
  margin-bottom:8px;
}
.about-hero p{ color:var(--muted); line-height:1.6; }
.about-hero .hero-cta{ margin-top:16px; }
.about-hero .hero-cta a{ display:inline-block; margin-right:10px; padding:10px 16px; border-radius:8px; text-decoration:none; font-weight:600 }
.about-hero .btn-primary{ background:var(--brand); color:#fff }
.about-hero .btn-outline{ border:1px solid var(--brand-dark); color:var(--brand-dark); background:transparent }
.about-hero .hero-visual{ width:240px; flex: 0 0 240px; display:flex; align-items:center; justify-content:center }
.about-visual-card{ width:220px; height:140px; border-radius:10px;  display:flex; align-items:center; justify-content:center; }
.about-visual-card img{ max-width:80%; height:auto }

.features-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px; margin-top:20px }
.feature-card{ background:var(--card-bg); padding:18px; border-radius:10px; border:1px solid #eef2f6; display:flex; gap:12px; align-items:flex-start; }
.feature-card .icon{ width:50px; height:50px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:1.25rem; color:#fff }
.feature-card .icon.seed{ background: linear-gradient(135deg,#84cc16,#16a34a) }
.feature-card .icon.task{ background: linear-gradient(135deg,#06b6d4,#0ea5a6) }
.feature-card .icon.report{ background: linear-gradient(135deg,#f97316,#ef4444) }
.feature-card .icon.light{ background: linear-gradient(135deg,#818cf8,#6366f1) }
.feature-card h3{ margin:0; font-size:1.02rem; color:var(--brand-dark) }
.feature-card p{ margin:6px 0 0; color:var(--muted); font-size:0.95rem }

.team{ margin-top:24px }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px }
.team-card{ background:var(--card-bg); border-radius:10px; padding:12px; text-align:center; border:1px solid #eef2f6 }
.team-card img{ width:72px; height:72px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 10px }
.team-card h4{ margin:0; color:var(--brand-dark); font-size:1rem }
.team-card p{ margin:6px 0 0; color:var(--muted); font-size:0.88rem }

.contact-cta{ margin-top:24px; background:linear-gradient(90deg, rgba(46,125,50,0.06), rgba(6,78,59,0.02)); padding:18px; border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:16px }
.contact-cta .text{ color:var(--muted) }
.contact-cta .actions a{ text-decoration:none; padding:10px 14px; border-radius:8px }
.contact-cta .actions .primary{ background:var(--brand); color:white }
.contact-cta .actions .muted{ border:1px solid var(--brand-dark); color:var(--brand-dark); background:transparent }

/* whitespace & responsiveness */
@media (max-width:900px){
  .about-hero{ flex-direction:column; align-items:flex-start }
  .about-hero .hero-visual{ width:100%; }
}

@media (max-width:480px){
  .about-container{ padding:20px; margin:20px }
  .about-hero h1{ font-size:1.6rem }
}