/* =============================================
   ABOUT.CSS
   Brand: #fe6e00 orange, #1a1a2e navy
   ============================================= */

.page-hero { background:#1a1a2e; padding:4rem 1.5rem 3rem; text-align:center; border-bottom:3px solid #fe6e00; }
.page-hero-container { max-width:700px; margin:0 auto; }
.page-hero-label { display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#fe6e00; margin-bottom:0.75rem; }
.page-hero-title { font-size:clamp(2rem,5vw,3rem); font-weight:700; color:#ffffff; margin-bottom:1rem; line-height:1.2; }
.page-hero-subtitle { font-size:1.05rem; color:#b0b6c8; line-height:1.75; max-width:560px; margin:0 auto; }

.section-label { display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#fe6e00; margin-bottom:0.6rem; }
.section-title { font-size:clamp(1.5rem,3vw,2rem); font-weight:700; color:#1a1a2e; margin-bottom:0.75rem; line-height:1.25; }

.about-container { max-width:1140px; margin:0 auto; padding:0 1.5rem; }

/* ---- Mission & Vision ---- */
.about-mv-section { background:#f7f7fb; padding:5rem 1.5rem; }
.mv-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.mv-card { background:#ffffff; border:1px solid #e8e8f0; border-radius:14px; padding:2.5rem; border-top:4px solid #fe6e00; }
.mv-card-icon { width:52px; height:52px; background:rgba(254,110,0,0.08); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.mv-card-title { font-size:1.25rem; font-weight:700; color:#1a1a2e; margin-bottom:0.85rem; }
.mv-card-text { font-size:0.95rem; color:#555; line-height:1.75; }

/* ---- Story ---- */
.about-story-section { background:#ffffff; padding:5rem 1.5rem; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.story-text { font-size:0.95rem; color:#444; line-height:1.8; margin-bottom:1.25rem; }
.story-text:last-child { margin-bottom:0; }

/* Timeline */
.timeline-title { font-size:1.05rem; font-weight:700; color:#1a1a2e; margin-bottom:1.5rem; padding-bottom:0.75rem; border-bottom:2px solid #fe6e00; display:inline-block; }
.timeline-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; }
.timeline-item { display:flex; gap:1.25rem; padding:1.1rem 0; border-left:2px solid #e8e8f0; padding-left:1.5rem; position:relative; }
.timeline-item::before { content:''; position:absolute; left:-6px; top:1.4rem; width:10px; height:10px; background:#fe6e00; border-radius:50%; border:2px solid #ffffff; }
.timeline-year { font-size:0.8rem; font-weight:700; color:#fe6e00; min-width:36px; padding-top:2px; }
.timeline-event { font-size:0.9rem; font-weight:700; color:#1a1a2e; display:block; margin-bottom:0.2rem; }
.timeline-detail { font-size:0.82rem; color:#666; line-height:1.5; margin:0; }

/* ---- Values ---- */
.about-values-section { background:#f7f7fb; padding:5rem 1.5rem; }
.section-header-center { text-align:center; margin-bottom:3rem; }
.section-subtitle-center { font-size:1rem; color:#555; line-height:1.7; max-width:560px; margin:0 auto; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.value-card { background:#ffffff; border:1px solid #e8e8f0; border-radius:12px; padding:1.75rem; transition:box-shadow 0.2s, transform 0.2s; }
.value-card:hover { box-shadow:0 6px 24px rgba(254,110,0,0.09); transform:translateY(-2px); }
.value-number { font-size:0.72rem; font-weight:700; color:#fe6e00; letter-spacing:0.1em; margin-bottom:0.75rem; }
.value-title { font-size:1rem; font-weight:700; color:#1a1a2e; margin-bottom:0.6rem; }
.value-desc { font-size:0.875rem; color:#666; line-height:1.65; }

/* ---- Numbers ---- */
.about-numbers-section { background:#1a1a2e; padding:5rem 1.5rem; }
.numbers-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; text-align:center; }
.number-card { padding:1.5rem 0.5rem; border-right:1px solid rgba(255,255,255,0.08); }
.number-card:last-child { border-right:none; }
.number-big { display:block; font-size:2.25rem; font-weight:700; color:#fe6e00; line-height:1; margin-bottom:0.5rem; }
.number-label { font-size:0.78rem; color:#9aa0b8; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; line-height:1.4; display:block; }

/* ---- CTA ---- */
.about-cta-section { background:#fe6e00; padding:5rem 1.5rem; text-align:center; }
.about-cta-container { max-width:640px; margin:0 auto; }
.cta-title { font-size:clamp(1.5rem,3vw,2.25rem); font-weight:700; color:#ffffff; margin-bottom:1rem; }
.cta-subtitle { font-size:1.05rem; color:rgba(255,255,255,0.88); line-height:1.7; margin-bottom:2rem; }
.cta-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-primary-light { display:inline-block; background:#ffffff; color:#fe6e00; padding:0.75rem 1.75rem; border-radius:8px; font-weight:700; font-size:0.95rem; text-decoration:none; border:2px solid #ffffff; transition:background 0.2s, transform 0.1s; }
.btn-primary-light:hover, .btn-primary-light:focus-visible { background:#f0f0f0; transform:translateY(-1px); color:#fe6e00; }
.btn-outline-light { display:inline-block; background:transparent; color:#ffffff; padding:0.75rem 1.75rem; border-radius:8px; font-weight:600; font-size:0.95rem; text-decoration:none; border:2px solid rgba(255,255,255,0.7); transition:background 0.2s, transform 0.1s; }
.btn-outline-light:hover, .btn-outline-light:focus-visible { background:rgba(255,255,255,0.15); border-color:#ffffff; transform:translateY(-1px); color:#ffffff; }

/* ---- Responsive ---- */
@media (max-width:1024px) {
    .numbers-grid { grid-template-columns:repeat(3,1fr); }
    .number-card { border-right:none; border-bottom:1px solid rgba(255,255,255,0.08); }
    .number-card:nth-child(3), .number-card:last-child { border-bottom:none; }
}
@media (max-width:768px) {
    .mv-grid { grid-template-columns:1fr; }
    .story-grid { grid-template-columns:1fr; gap:2.5rem; }
    .values-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
    .values-grid { grid-template-columns:1fr; }
    .numbers-grid { grid-template-columns:repeat(2,1fr); }
}