:root{--primary-color: #ff6a00;--secondary-color: #007bff;--success-color: #28a745;--warning-color: #ffc107;--danger-color: #dc3545;--light-bg: #f8f9fa;--gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%)}body{font-family:Inter,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#333}.header{position:sticky;top:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.1);z-index:1000;padding:1rem 0}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 2rem}.logo{font-size:1.5rem;font-weight:700;color:var(--primary-color)}.logo-highlight{color:var(--primary-color)}.logo-tagline{font-size:.8rem;font-weight:400;color:#666}.nav-links{display:flex;gap:2rem;list-style:none;margin:0;padding:0}.nav-links a{color:#666;text-decoration:none;font-weight:500;transition:color .3s ease}.nav-links a:hover{color:var(--primary-color)}.hero{background:var(--gradient-bg);color:#fff;padding:4rem 0;text-align:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;animation:float 20s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto;padding:0 2rem}.hero h1{font-size:3rem;margin-bottom:1.5rem;font-weight:700;text-align:left}.hero-subtitle{font-size:1.25rem;margin-bottom:2rem;opacity:.9;line-height:1.8;text-align:left}.hero-cta{background:var(--primary-color);color:#fff;padding:1rem 2rem;border:none;border-radius:50px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block;margin-bottom:2rem}.hero-cta:hover{background:#e55a00;transform:translateY(-2px);box-shadow:0 8px 25px #ff6a004d}.hero-stats{font-size:1rem;opacity:.8}.section{padding:4rem 0}.section-content{max-width:1200px;margin:0 auto;padding:0 2rem}.section-title{font-size:2.5rem;text-align:center;margin-bottom:3rem;color:#333;font-weight:700}.education{background:var(--light-bg)}.education-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem;margin-top:3rem}.education-card{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 10px 30px #0000001a;transition:transform .3s ease}.education-card:hover{transform:translateY(-5px)}.education-icon{width:60px;height:60px;background:var(--primary-color);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;font-size:1.5rem;color:#fff}.percentile-demo{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;border-radius:15px;text-align:center;margin:2rem 0}.percentile-demo p{text-align:left}.percentile-bar{width:100%;height:30px;background:#fff3;border-radius:15px;position:relative;margin:3rem 0 1.5rem}.percentile-fill{height:100%;background:var(--primary-color);border-radius:15px;animation:fillBar 2s ease-out forwards}@keyframes fillBar{0%{width:0%}to{width:25%}}.percentile-marker{position:absolute;bottom:100%;transform:translate(-50%);margin-bottom:8px;white-space:nowrap}.percentile-marker span{display:block;background:#fff;color:var(--primary-color);padding:.4rem .8rem;border-radius:5px;box-shadow:0 2px 5px #0003;font-weight:700;font-size:.9rem;text-align:center;position:relative}.percentile-marker span:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid white}.calculator{background:#fff}.calculator-container{max-width:800px;margin:0 auto;background:var(--light-bg);padding:3rem;border-radius:20px;box-shadow:0 15px 35px #0000001a}.form-section{margin-bottom:2rem}.form-section h3{color:var(--secondary-color);margin-bottom:1rem;font-size:1.3rem}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:1.5rem}.form-group{display:flex;flex-direction:column}.form-group label{font-weight:600;margin-bottom:.5rem;color:#555}.form-group input,.form-group select{padding:.75rem;border:2px solid #e9ecef;border-radius:8px;font-size:1rem;transition:border-color .3s ease}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary-color)}.form-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:#e55a00;transform:translateY(-2px)}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#545b62}.results{background:var(--light-bg);padding:3rem 0}.results-container{max-width:1000px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:0 20px 40px #0000001a;overflow:hidden}.results-header{background:var(--gradient-bg);color:#fff;padding:2rem;text-align:center}.results-content{padding:3rem}.age-comparison{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:3rem}.age-display{text-align:center;padding:2rem;border-radius:15px}.biological-age{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff}.chronological-age{background:#f8f9fa;border:2px solid #dee2e6}.age-number{font-size:3rem;font-weight:700;margin-bottom:.5rem}.age-label{font-size:1.1rem;opacity:.9}.ranking-section{margin:3rem 0}.ranking-bar-container{background:#f8f9fa;border-radius:25px;padding:1rem;margin:1.5rem 0}.ranking-bar{height:40px;background:#e9ecef;border-radius:20px;position:relative;overflow:hidden}.ranking-fill{height:100%;background:linear-gradient(90deg,var(--success-color),#20c997);border-radius:20px;position:relative;animation:fillRanking 2s ease-out .5s both}@keyframes fillRanking{0%{width:0%}}.ranking-marker{position:absolute;top:-15px;background:#fff;color:var(--success-color);padding:.5rem 1rem;border-radius:20px;font-weight:700;box-shadow:0 5px 15px #0003;transform:translate(-50%)}.equivalent-age{background:#fff3cd;border:1px solid #ffeaa7;border-radius:15px;padding:2rem;margin:2rem 0;text-align:center}.status-badge{display:inline-block;padding:.5rem 1rem;border-radius:20px;font-weight:700;margin:1rem 0}.status-excellent{background:#d4edda;color:#155724}.status-good{background:#d1ecf1;color:#0c5460}.status-average{background:#fff3cd;color:#856404}.status-needs_improvement{background:#f8d7da;color:#721c24}.app-preview{background:#fff;position:relative;overflow:hidden}.app-preview:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,#667eea,#764ba2);opacity:.05}.app-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}.app-features{padding:2rem 0}.feature-list{list-style:none;padding:0;margin:2rem 0}.feature-list li{display:flex;align-items:center;margin-bottom:1rem;font-size:1.1rem}.feature-list li:before{content:"✓";background:var(--success-color);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-weight:700;font-size:.9rem}.app-cta{margin-top:2rem}.phone-mockup{text-align:center;position:relative}.phone-frame{width:280px;height:580px;background:#1a1a1a;border-radius:40px;padding:8px;margin:0 auto;position:relative;box-shadow:0 25px 50px #0000004d}.phone-screen{width:100%;height:100%;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-radius:32px;position:relative;overflow:hidden}.phone-status-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;background:#0000000d;font-size:14px;font-weight:600;color:#1a1a1a}.phone-indicators{display:flex;gap:8px;align-items:center}.signal{font-size:10px;color:#10b981}.phone-content{padding:16px;height:calc(100% - 40px);overflow-y:auto}.phone-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.1)}.phone-header h4{margin:0;color:var(--primary-color);font-size:18px;font-weight:700}.phone-nav-dots{color:#94a3b8;font-size:12px}.phone-section{background:#fff;border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 2px 8px #0000001a}.phone-section-title{font-size:14px;font-weight:600;color:var(--text-color);margin-bottom:12px}.phone-metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.phone-metric{background:#f1f5f9;border-radius:8px;padding:12px;text-align:center;position:relative}.phone-metric-value{font-size:20px;font-weight:700;color:var(--primary-color);margin-bottom:4px}.phone-metric-label{font-size:11px;color:var(--muted-color);margin-bottom:6px}.phone-metric-status{position:absolute;top:8px;right:8px;font-size:8px}.phone-metric-status.good{color:#10b981}.phone-metric-status.average{color:#f59e0b}.phone-age-display{display:flex;align-items:center;gap:16px}.phone-pr-circle{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),#ff8a00);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}.phone-pr-value{font-size:18px;font-weight:700;line-height:1}.phone-pr-label{font-size:10px;opacity:.9}.phone-trend{flex:1}.phone-trend-text{font-size:12px;color:var(--success-color);font-weight:600;margin-bottom:4px}.phone-trend-chart{font-size:20px}.phone-insights{display:flex;flex-direction:column;gap:8px}.phone-insight{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;font-size:11px}.phone-insight.positive{background:#ecfdf5;color:#065f46}.phone-insight.attention{background:#fffbeb;color:#92400e}.phone-insight-icon{font-size:14px}.phone-insight-text{flex:1;font-weight:500}.phone-bottom-nav{position:absolute;bottom:8px;left:16px;right:16px;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;display:flex;justify-content:space-around;padding:8px;box-shadow:0 4px 12px #00000026}.phone-nav-item{display:flex;flex-direction:column;align-items:center;padding:6px;border-radius:12px;transition:background-color .2s ease}.phone-nav-item.active{background:var(--primary-color);color:#fff}.phone-nav-icon{font-size:16px;margin-bottom:2px}.phone-nav-label{font-size:10px;font-weight:500}@media (max-width: 768px){.hero h1,.section-title{font-size:2rem}.age-comparison{grid-template-columns:1fr;gap:1rem}.app-content{grid-template-columns:1fr;gap:2rem}.phone-frame{width:240px;height:480px}.nav-links{display:none}.header-content{justify-content:center}}.hidden{display:none}.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.percentile-labels{display:flex;justify-content:space-between;font-size:.9rem;margin-top:1rem;margin-bottom:1.5rem}.data-source{margin-top:1.5rem;font-size:.9rem;opacity:.9}.age-difference-text{text-align:center;font-size:1.2rem;margin-bottom:2rem}.results-cta{text-align:center;margin-top:3rem}footer{background:var(--light-bg);padding:2rem 0;text-align:center;margin-top:4rem;border-top:1px solid rgba(0,0,0,.1)}.footer-content{max-width:1200px;margin:0 auto;padding:0 2rem}#education,#calculator,#results,#app-preview{scroll-margin-top:80px}