/* ===== ABOUT INTRO ===== */
.about-intro-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}

.about-intro-imgs {
  position: relative; display: grid;
  grid-template-columns: 1fr 1fr; gap: 1rem;
}

.about-img-main {
  grid-column: 1 / -1; border-radius: var(--radius-lg);
  aspect-ratio: 16/9; object-fit: cover; box-shadow: var(--shadow-md);
}

.about-img-side {
  border-radius: var(--radius); aspect-ratio: 4/3;
  object-fit: cover; box-shadow: var(--shadow-sm);
  grid-column: 1 / 2;
}

/* ===== FEATURE CARDS ===== */
.features-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 3rem;
}

.feature-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2rem; border: 1px solid var(--mid-gray);
  transition: var(--transition);
}

.feature-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.feature-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--accent-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}

.feature-card-icon svg { width: 24px; height: 24px; }

.feature-card h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem; font-weight: 600;
  color: var(--text-dark); margin-bottom: 0.6rem;
}

.feature-card p {
  font-size: 0.88rem; color: var(--text-light); line-height: 1.7;
}

/* ===== USES ===== */
.uses-inner {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 5rem; align-items: start;
}

.uses-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.use-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.5rem; background: var(--off-white);
  border-radius: var(--radius); border: 1px solid var(--mid-gray);
  transition: var(--transition);
}

.use-item:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.use-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--accent-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.use-icon svg { width: 20px; height: 20px; }

.use-item h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem; font-weight: 600;
  color: var(--text-dark); margin-bottom: 0.35rem;
}

.use-item p { font-size: 0.82rem; color: var(--text-light); line-height: 1.6; }

/* ===== GALLERY ===== */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 3rem;
}

.gallery-item {
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/3;
}

.gallery-item-wide { grid-column: span 2; aspect-ratio: 16/9; }

.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img { transform: scale(1.04); }

/* ===== CTA ===== */
.about-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 5rem 2rem; text-align: center;
}

.about-cta-inner h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--white); margin-bottom: 1rem;
}

.about-cta-inner p {
  color: rgba(255,255,255,0.72); font-size: 1rem; max-width: 480px; margin: 0 auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
  .about-intro-grid { grid-template-columns: 1fr; gap: 3rem; }
  .uses-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  .features-cards { grid-template-columns: 1fr 1fr; }
  .uses-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item-wide { grid-column: span 2; }
}

@media (max-width: 500px) {
  .features-cards { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item-wide { grid-column: auto; aspect-ratio: 4/3; }
}