.container{max-width:var(--container,1200px);margin:0 auto;padding:0 24px;}
.section-badge{display:inline-block;padding:6px 14px;background:var(--color-primary-soft);color:var(--color-primary);border:1px solid var(--color-primary-border);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;margin-bottom:16px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--radius-md);font-size:var(--text-md);font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:all var(--t-base);}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-primary);}
.btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-2px);}
.btn-outline{background:var(--color-bg);color:var(--color-text-2);border-color:var(--color-border);}
.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px);}
.about-hero{min-height: calc(100vh - var(--header-h, 64px));display: flex;align-items: center;padding:100px 0 80px;text-align:center;background:var(--color-bg);}
.about-hero h1{font-size:3.5rem;font-weight:800;color:var(--color-text);margin:0 0 24px;line-height:1.1;letter-spacing:-1px;}
.about-intro{font-size:var(--text-lg);color:var(--color-text-2);max-width:700px;margin:0 auto 32px;line-height:1.7;}
.why-section{padding:80px 0;background:var(--color-bg-soft);}
.why-section h2{font-size:2.5rem;font-weight:700;color:var(--color-text);margin:0 0 24px;}
.why-content{max-width:700px;}
.why-content p{font-size:var(--text-md);color:var(--color-text-2);line-height:1.7;margin:0 0 16px;}
.principles-section{padding:80px 0;background:var(--color-bg);}
.principles-section h2{font-size:2.5rem;font-weight:700;color:var(--color-text);margin:0 0 40px;text-align:center;}
.principles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
.principle-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:28px;transition:all var(--t-base);}
.principle-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-primary-border);}
.principle-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-primary-soft);border-radius:var(--radius-md);font-size:24px;margin-bottom:16px;}
.principle-card h3{font-size:var(--text-lg);font-weight:600;color:var(--color-text);margin:0 0 8px;}
.principle-card p{font-size:var(--text-base);color:var(--color-text-2);line-height:1.6;margin:0;}
.stats-section{padding:80px 0;background:var(--color-bg-soft);text-align:center;}
.stats-section h2{font-size:2.5rem;font-weight:700;color:var(--color-text);margin:0 0 40px;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;max-width:900px;margin:0 auto 40px;}
.stat-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:32px 24px;transition:all var(--t-base);}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.stat-icon{font-size:32px;margin-bottom:12px;}
.stat-number{font-size:2.5rem;font-weight:800;color:var(--color-primary);margin-bottom:4px;}
.stat-label{font-size:var(--text-base);color:var(--color-text-2);font-weight:500;}
.stats-cta{margin-top:32px;}
.tech-section{padding:80px 0;background:var(--color-bg);}
.tech-section h2{font-size:2.5rem;font-weight:700;color:var(--color-text);margin:0 0 24px;}
.tech-content{max-width:700px;}
.tech-content p{font-size:var(--text-md);color:var(--color-text-2);line-height:1.7;margin:0 0 24px;}
.tech-badges{display:flex;gap:12px;flex-wrap:wrap;}
.tech-badge{padding:8px 16px;background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--color-text-2);font-weight:500;}
.roadmap-section{padding:80px 0;background:var(--color-bg-soft);}
.roadmap-section h2{font-size:2.5rem;font-weight:700;color:var(--color-text);margin:0 0 40px;text-align:center;}
.roadmap-grid{display:grid;gap:20px;max-width:800px;margin:0 auto;}
.roadmap-card{display:flex;gap:20px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;transition:all var(--t-base);}
.roadmap-card:hover{transform:translateX(4px);box-shadow:var(--shadow-sm);border-color:var(--color-primary-border);}
.roadmap-icon{width:48px;height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;background:var(--color-primary-soft);border-radius:var(--radius-md);font-size:24px;}
.roadmap-content h3{font-size:var(--text-lg);font-weight:600;color:var(--color-text);margin:0 0 8px;}
.roadmap-content p{font-size:var(--text-base);color:var(--color-text-2);line-height:1.6;margin:0;}
.about-cta{padding:100px 0;background:var(--color-bg);text-align:center;}
.about-cta h2{font-size:2.5rem;font-weight:700;color:var(--color-text);margin:0 0 16px;}
.about-cta p{font-size:var(--text-md);color:var(--color-text-2);max-width:600px;margin:0 auto 32px;line-height:1.7;}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease;}
.reveal.revealed{opacity:1;transform:translateY(0);}
@media (max-width:768px){
.about-hero{padding:60px 0 50px;}
.about-hero h1{font-size:2.5rem;}
.why-section,.principles-section,.stats-section,.tech-section,.roadmap-section,.about-cta{padding:60px 0;}
.about-hero h1,.why-section h2,.principles-section h2,.stats-section h2,.tech-section h2,.roadmap-section h2,.about-cta h2{font-size:2rem;}
.roadmap-card{flex-direction:column;gap:16px;}
}
@media (max-width:480px){
.container{padding:0 16px;}
.about-hero h1{font-size:2rem;}
.principles-grid,.stats-grid{grid-template-columns:1fr;}
}