.about-hero{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  align-items:start;
  margin-bottom:28px
}
.inst-col{display:grid;gap:16px;min-width:0}
.inst-figure{margin:0;background:#e9eef6;border-radius:16px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.05)}
.inst-figure img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

.hero-slider{
  position:relative;
  background:#e9eef6;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.05);
  width:100%;
  aspect-ratio:16/9
}
.hero-slider .slides{position:relative;inset:0;height:100%}
.hero-slider .slide{position:absolute;inset:0;opacity:0;transform:scale(1.02);transition:opacity .4s ease,transform .6s ease}
.hero-slider .slide.is-active{opacity:1;transform:scale(1)}
.hero-slider img{width:100%;height:100%;object-fit:cover;display:block}
.hero-slider .nav{
  position:absolute;
  top:50%;
  translate:0 -50%;
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  box-shadow:0 4px 14px rgba(0,0,0,.14);
  cursor:pointer;
  font-size:18px;
  line-height:38px;
  text-align:center
}
.hero-slider .prev{left:12px}
.hero-slider .next{right:12px}
.hero-slider .dots{
  position:absolute;
  left:50%;
  bottom:12px;
  translate:-50% 0;
  display:flex;
  gap:8px
}
.hero-slider .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.08);
  cursor:pointer
}
.hero-slider .dot.is-active{width:18px;background:#2563eb}

.inst-card{
  background:#fff;
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 8px 40px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center
}
.inst-title{
  margin:0;
  font-size:24px;
  line-height:1.25;
  color:#0f172a;
  text-align:center
}
.inst-text{
  margin:0;
  color:#475569;
  font-size:15px;
  line-height:1.6;
  text-align:center
}
.inst-card .inst-text{text-align:left}
.inst-card .inst-text p{margin:8px 0}
.inst-card .inst-text p:first-child{margin-top:0}
.inst-card .inst-text ul{margin:8px 0 0 18px;padding:0}
.inst-card .btn.primary{align-self:center}

.btn.primary{
  align-self:center;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border-radius:14px;
  background:#2563eb;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  box-shadow:0 6px 14px rgba(37,99,235,.25);
  transition:background .2s ease,transform .05s ease,box-shadow .2s ease
}
.btn.primary:hover{background:#1e46d9;box-shadow:0 10px 20px rgba(37,99,235,.28)}
.btn.primary:active{transform:translateY(1px)}

.obs-col{display:grid;gap:16px;min-width:0}
.obs-card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,.05)}
.obs-card .inst-title{margin:0 0 10px;text-align:center}
.obs-card .inst-text{text-align:left}
.obs-card .inst-text p{margin:8px 0}
.obs-card .inst-text p:first-child{margin-top:0}

.about-hero + .about-section{margin-top:16px}
.about-section + .team-section{margin-top:20px}
.about-section,
.team-section{
  background:#fff;
  border-radius:16px;
  padding:20px;
  box-shadow:0 8px 40px rgba(0,0,0,.05)
}
.section-title{
  margin:0 0 40px;
  font-size:22px;
  color:#0f172a;
  text-align:center
}
.about-text{
  display:grid;
  gap:12px;
  color:#334155;
  font-size:14px;
  line-height:1.65
}
.about-text p{margin:0}

.team-section .team-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
  width:100%;
  min-width:0
}
.team-section .member-card{
  background:#f8fafc;
  border-radius:14px;
  padding:12px;
  text-align:center;
  display:flex !important;
  flex-direction:column !important;
  gap:10px;
  box-shadow:inset 0 0 0 1px #eef2f7;
  overflow:hidden;
  min-width:0;
  max-width:none !important;
  height:auto !important
}
.team-section .avatar{
  width:100%;
  aspect-ratio:3/4;
  border-radius:10px;
  background:#e5e7eb;
  overflow:hidden;
  display:block;
  flex:0 0 auto
}
.team-section .avatar img{
  width:100% !important;
  height:100% !important;
  min-width:100%;
  max-width:none !important;
  display:block;
  object-fit:cover;
  object-position:center;
  position:static !important;
  inset:auto !important;
  transform:none !important;
  margin:0 !important
}
.team-section .member-name{
  margin:4px 0 0;
  font-size:14px;
  color:#111827;
  font-weight:700;
  line-height:1.35;
  overflow-wrap:anywhere
}
.team-section .member-role{
  font-size:12px;
  color:#475569;
  line-height:1.45
}
.team-section .member-org{
  font-size:12px;
  color:#6b7280;
  line-height:1.45
}
.team-section .section-title{margin-bottom:24px}

@media (min-width:1360px){
  .about-hero{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1200px){
  .about-hero{
    grid-template-columns:1fr;
    gap:16px;
    margin-bottom:22px
  }
  .inst-card{padding:22px 18px}
  .team-section .team-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important
  }
}
@media (max-width:900px){
  .team-section .team-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important
  }
}
@media (max-width:768px){
  .hero-slider{aspect-ratio:16/10}
  .inst-title{font-size:22px;line-height:1.3}
  .inst-text{font-size:16px;line-height:1.7}
  .btn.primary{font-size:18px;padding:14px 26px}
  .team-section .section-title{margin-bottom:20px}
}
@media (max-width:640px){
  .team-section .team-grid{
    grid-template-columns:1fr 1fr !important
  }
  .btn.primary{
    width:auto;
    min-width:200px;
    border-radius:20px
  }
}
@media (max-width:480px){
  .team-section .team-grid{
    grid-template-columns:1fr !important
  }
  .btn.primary{
    width:auto;
    min-width:180px;
    border-radius:20px
  }
}
@media (max-width:360px){
  .hero-slider{aspect-ratio:4/3}
  .btn.primary{
    min-width:160px;
    border-radius:18px
  }
}