/* Modern Lightweight Mobile-First Design */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.6;color:#1a1a1a;background:#ffffff;padding:0;margin:0}
.main{max-width:100%;margin:0 auto;background:#ffffff}
/* Header - Clean and Simple */
.header{background:#ffffff;padding:1.25rem 1rem;text-align:center;border-bottom:2px solid #e8e8e8}
.header h1{font-size:1.1rem;font-weight:500;color:#1a1a1a;letter-spacing:0.3px}
/* Counter Section - Card Style */
.counter{padding:1.5rem 1rem;background:#fafafa}
.counter h2{font-size:0.875rem;text-transform:uppercase;letter-spacing:1px;color:#666;text-align:center;margin-bottom:1.25rem;font-weight:500}
.counter-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.625rem;margin-bottom:1rem}
.counter-box{background:#ffffff;border:2px solid #e8e8e8;border-radius:12px;padding:1rem 0.75rem;text-align:center;transition:all 0.2s ease}
.counter-num{display:block;font-size:1.875rem;font-weight:600;color:#1a1a1a;margin-bottom:0.375rem;font-variant-numeric:tabular-nums}
.counter-label{display:block;font-size:0.6875rem;color:#888;text-transform:uppercase;letter-spacing:0.8px;font-weight:500}
.total{text-align:center;background:#ffffff;border:1px solid #e8e8e8;border-radius:12px;padding:0.875rem;margin-top:1rem}
.total p{font-size:0.8125rem;color:#666;margin:0}
.total strong{color:#1a1a1a;font-weight:600;font-size:0.9375rem}
/* Timeline Section */
.timeline{padding:2rem 1rem;background:#ffffff}
.timeline h2{font-size:0.875rem;text-transform:uppercase;letter-spacing:1px;color:#666;text-align:center;margin-bottom:1.75rem;font-weight:500}
.timeline-list{display:flex;flex-direction:column;gap:1rem;max-width:100%}
.timeline-card{background:#ffffff;border:1px solid #e8e8e8;border-radius:12px;padding:1.25rem;position:relative;transition:all 0.2s ease}
.timeline-card:active{transform:scale(0.98)}
.timeline-year{font-size:1.5rem;font-weight:600;color:#1a1a1a;margin-bottom:0.75rem;display:flex;align-items:center}
.timeline-year::before{content:'';width:8px;height:8px;background:#1a1a1a;border-radius:50%;margin-right:0.75rem}
.timeline-body{font-size:0.875rem}
.age-badge{display:inline-block;background:#1a1a1a;color:#ffffff;padding:0.3125rem 0.875rem;border-radius:20px;font-size:0.75rem;font-weight:600;margin-bottom:0.75rem;letter-spacing:0.3px}
.quote{font-size:0.9375rem;color:#1a1a1a;margin:0.75rem 0;line-height:1.7;font-style:normal;font-weight:400}
.milestone{font-size:0.8125rem;color:#666;margin-top:0.625rem;line-height:1.6}
/* Footer */
.footer{background:#fafafa;padding:1.25rem 1rem;text-align:center;color:#888;font-size:0.75rem;border-top:1px solid #e8e8e8}
/* Tablet: 768px+ */
@media(min-width:768px){
.header{padding:1.75rem 2rem}
.header h1{font-size:1.25rem}
.counter{padding:2rem}
.counter h2{font-size:1rem;margin-bottom:1.5rem}
.counter-grid{grid-template-columns:repeat(5,1fr);gap:1rem}
.counter-box{padding:1.25rem 1rem}
.counter-num{font-size:2.25rem}
.counter-label{font-size:0.75rem}
.total{padding:1rem}
.total p{font-size:0.875rem}
.total strong{font-size:1rem}
.timeline{padding:2.5rem 2rem}
.timeline h2{font-size:1rem;margin-bottom:2rem}
.timeline-list{gap:1.25rem}
.timeline-card{padding:1.5rem}
.timeline-year{font-size:1.75rem}
.timeline-body{font-size:0.9375rem}
.quote{font-size:1rem}
.milestone{font-size:0.875rem}
.footer{padding:1.5rem}
.footer{font-size:0.8125rem}
}
/* Desktop: 1024px+ */
@media(min-width:1024px){
.main{max-width:900px;margin:0 auto}
.header{padding:2rem 2.5rem}
.header h1{font-size:1.375rem}
.counter{padding:2.5rem}
.counter h2{font-size:1.125rem}
.counter-grid{gap:1.25rem}
.counter-box{padding:1.5rem 1.25rem}
.counter-num{font-size:2.5rem}
.timeline{padding:3rem 2.5rem}
.timeline h2{font-size:1.125rem}
.timeline-list{gap:1.5rem}
.timeline-card{padding:1.75rem;max-width:100%}
.timeline-year{font-size:2rem}
.timeline-body{font-size:1rem}
.quote{font-size:1.0625rem}
.milestone{font-size:0.9375rem}
.footer{padding:1.75rem}
}