/* About Section */
.about { background: linear-gradient(135deg, var(--color-black), #111111); position: relative; z-index: 1; }
.about-pin { height: 400vh; overflow: visible; view-timeline-name: --about-pin; view-timeline-axis: block; }
.about-sticky { height: 100vh; width: 100vw; position: sticky; top: 0; overflow-y: hidden; background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%); }

.about__header { position: absolute; top: 0; left: 0; width: 100%; z-index: 20; padding-top: 120px; }
.about__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); text-align: center; }
.about__header .section-title { font-size: 3.5rem; color: var(--color-white); text-shadow: 0 0 20px rgba(246,191,0,0.3); margin-bottom: 0; }
.about__header .section-subtitle { font-size: 1.2rem; color: var(--color-gray); margin-top: var(--spacing-sm); }

.about-vertical { padding-left: 5%; padding-right: 5%; height: 400vh; width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 0; animation: aboutVerticalScroll linear both; animation-timeline: --about-pin; animation-range: contain 0% contain 100%; color: var(--color-white); }
@keyframes aboutVerticalScroll { from { transform: translateY(0); } to { transform: translateY(-350vh); } }

.about-slide { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 var(--spacing-lg); box-sizing: border-box; position: relative; }
.about-slide__content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; max-width: 1200px; width: 100%; margin: 0 auto; }
.about-slide__text h3 { font-size: 4rem; color: var(--color-accent); margin-bottom: 1rem; text-shadow: 0 0 30px rgba(246,191,0,0.4); letter-spacing: 0.1em; font-weight: 700; }
.about-slide__text h4 { font-size: 2rem; color: var(--color-white); margin-bottom: 2rem; border-bottom: 2px solid var(--color-accent); padding-bottom: 0.5rem; display: inline-block; }
.about-slide__text p { font-size: 1.2rem; line-height: 1.8; color: var(--color-gray); opacity: 0.9; }
.about-slide__visual { display: flex; justify-content: center; align-items: center; height: 400px; }

.about__geometric { width: 300px; height: 300px; position: relative; filter: drop-shadow(0 0 30px rgba(246,191,0,0.3)); }
.about__geometric--mission { background: linear-gradient(45deg, var(--color-accent), #ff6b35); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.about__geometric--vision { background: linear-gradient(135deg, var(--color-accent), #00d4aa); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.about__geometric--values { background: linear-gradient(90deg, var(--color-accent), #667eea); border-radius: 50%; }
.about__geometric--future { background: linear-gradient(180deg, var(--color-accent), #f093fb); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

@media (max-width: 768px) {
  .about-pin { height: 380vh; }
  .about__header { padding: 100px 0 40px; }
  .about__header .section-title { font-size: 2.5rem; }
  .about__header .section-subtitle { font-size: 1rem; }
  .about-vertical { padding-left: 2%; padding-right: 2%; height: 380vh; }
  .about-slide__content { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .about-slide__text h3 { font-size: 2.5rem; }
  .about-slide__text h4 { font-size: 1.5rem; }
  .about-slide__text p { font-size: 1rem; }
  .about__geometric { width: 200px; height: 200px; }
}
@media (max-width: 480px) {
  .about__header { padding: 80px 0 30px; }
  .about__header .section-title { font-size: 2rem; }
  .about__header .section-subtitle { font-size: 0.9rem; }
  .about-slide__text h3 { font-size: 2rem; }
  .about__geometric { width: 150px; height: 150px; }
}