/* ========================================================
   VERSO — About Page CSS
   ======================================================== */

/* ========== HERO ========== */
.hero-section {
  position: relative;
  height: 320px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-bg { position: absolute; inset: 0; z-index: 1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%);
  z-index: 2;
}
.hero-content {
  position: relative; z-index: 10;
  max-width: 1400px; width: 100%; margin: 0 auto; padding: 0 40px;
}
.hero-title { font-weight: 700; font-size: 80px; line-height: 1.1; color: white; letter-spacing: -2px; }

/* ========== ABOUT CONTENT ========== */
.about-section { position: relative; overflow: hidden; background: #fff; }
.about-wavy-bg {
  position: absolute; left: -200px; top: -50px;
  width: 55%; height: 110%; opacity: 0.35; pointer-events: none; z-index: 1;
}
.about-wavy-bg img { width: 100%; height: 100%; object-fit: cover; }
.about-container {
  max-width: 1400px; margin: 0 auto;
  padding: 80px 40px; display: flex;
  gap: 60px; align-items: flex-start;
  position: relative; z-index: 5;
}
.about-left { flex: 0 0 360px; padding-top: 40px; }
.about-logo { width: 220px; margin-bottom: 32px; }
.about-tagline { font-size: 26px; font-weight: 600; line-height: 1.4; letter-spacing: -0.5px; }
.about-right { flex: 1; max-width: 720px; }
.about-text { font-size: 16px; line-height: 1.75; margin-bottom: 24px; }

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
  .about-container { gap: 40px; }
  .about-left { flex: 0 0 300px; }
  .about-logo { width: 180px; }
}
@media (max-width: 991px) {
  .hero-section { height: 260px; }
  .hero-title { font-size: 64px; }
  .about-container { flex-direction: column; gap: 40px; padding: 60px 30px; }
  .about-left { flex: none; width: 100%; text-align: center; padding-top: 0; }
  .about-logo { margin: 0 auto 24px; }
  .about-right { max-width: 100%; }
  .about-wavy-bg { width: 80%; opacity: 0.25; }
}
@media (max-width: 767px) {
  .hero-section { height: 200px; }
  .hero-content { padding: 0 20px; }
  .hero-title { font-size: 52px; }
  .about-container { padding: 40px 20px; }
  .about-logo { width: 160px; }
  .about-tagline { font-size: 22px; }
  .about-text { font-size: 15px; line-height: 1.7; }
  .about-wavy-bg { width: 100%; left: -80px; opacity: 0.2; }
}
@media (max-width: 480px) {
  .hero-title { font-size: 42px; }
  .hero-section { height: 160px; }
  .about-tagline { font-size: 20px; }
}