.hero{background:linear-gradient(135deg,var(--primary-color) 0%,#1e40af 100%);color:#fff;padding:4rem 0;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"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;opacity:.3}.hero-container{max-width:1200px;margin:0 auto;padding:0 1rem;position:relative;z-index:1}.hero-content{text-align:center;max-width:800px;margin:0 auto}.hero-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;margin-bottom:1.5rem}.highlight{background:linear-gradient(45deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-description{font-size:var(--text-xl);margin-bottom:2rem;opacity:.9}.current-status{margin-top:2rem}.status-card{background:#ffffff1a;backdrop-filter:blur(10px);border-radius:var(--radius-xl);padding:2rem;border:1px solid rgba(255,255,255,.2);max-width:400px;margin:0 auto}.status-card h3{margin-bottom:1rem;font-size:var(--text-lg);opacity:.9}.current-badge{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1rem}.badge-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);flex-shrink:0}.badge-icon svg{width:26px;height:26px}.badge-name{font-size:var(--text-2xl);font-weight:600}.progress-info{display:flex;justify-content:space-between;font-size:var(--text-sm);opacity:.8}.progress-overview{padding:4rem 0;background:var(--surface-color)}.section-title{text-align:center;margin-bottom:3rem;color:var(--text-primary)}.progress-bar-container{max-width:1000px;margin:0 auto;position:relative}.progress-bar{height:12px;background:var(--border-color);border-radius:6px;overflow:hidden;margin-bottom:2rem;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-color),var(--primary-color));border-radius:6px;transition:width 2s ease;position:relative}.progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-markers{display:flex;justify-content:space-between;position:relative}.marker{position:relative;font-size:var(--text-xs);font-weight:500;color:var(--text-muted);padding:.25rem .5rem;background:var(--background-color);border-radius:var(--radius-sm);border:1px solid var(--border-color);transition:all var(--dur-slow) var(--ease)}.marker.achieved{background:var(--accent-color);color:#fff;border-color:var(--accent-color);transform:scale(1.1)}.marker:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:2px;height:8px;background:var(--border-color)}.marker.achieved:before{background:var(--accent-color)}.badges-section{padding:4rem 0}.section-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:3rem;font-size:var(--text-lg)}.badges-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:1200px;margin:0 auto}.badge-card{background:var(--background-color);border-radius:var(--radius-lg);padding:1.5rem;border:2px solid var(--border-color);transition:all var(--dur-slow) var(--ease);cursor:pointer;position:relative;overflow:hidden}.badge-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s var(--ease)}.badge-card:hover:before{left:100%}.badge-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--primary-color)}.badge-card.achieved{border-color:var(--accent-color);background:linear-gradient(135deg,#f0fdf4,#dcfce7)}.badge-card.current{border-color:var(--warning-color);background:linear-gradient(135deg,#fffbeb,#fef3c7);box-shadow:0 0 20px #f59e0b4d}.badge-card.achieved:hover{border-color:var(--accent-color);box-shadow:0 0 20px #10b9814d}.badge-card.current:hover{border-color:var(--warning-color);box-shadow:0 0 25px #f59e0b66}.badge-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.badge-card .badge-icon{filter:grayscale(100%) opacity(.5);transition:filter var(--dur-slow) var(--ease)}.badge-card.achieved .badge-icon,.badge-card.current .badge-icon{filter:none}.badge-info{flex:1}.badge-info h3{margin:0;font-size:var(--text-xl);font-weight:600;color:var(--text-primary)}.hours-required{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}.status-indicator{font-size:var(--text-xs);font-weight:600;padding:.25rem .75rem;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.5px}.status-indicator.achieved{background:var(--accent-color);color:#fff}.status-indicator.current{background:var(--warning-color);color:#fff;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.status-indicator:not(.achieved):not(.current){background:var(--surface-color);color:var(--text-muted)}.badge-preview{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.5}.badge-card.achieved .badge-preview,.badge-card.current .badge-preview{color:var(--text-primary);font-weight:500}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#00000080;backdrop-filter:blur(5px);animation:fadeIn .3s ease}.modal.show{display:flex;align-items:center;justify-content:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--background-color);border-radius:var(--radius-xl);padding:2rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;position:relative;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.close{position:absolute;top:1rem;right:1.5rem;font-size:2rem;font-weight:700;cursor:pointer;color:var(--text-muted);transition:color var(--dur-slow) var(--ease)}.close:hover{color:var(--text-primary)}.modal-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.modal-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:14px;flex-shrink:0}.modal-icon svg{width:32px;height:32px}.modal-title{margin:0;font-size:var(--text-2xl);font-weight:600}.modal-hours{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}.modal-body h3{margin-bottom:1rem;color:var(--text-primary)}.benefits-list{list-style:none;margin-bottom:2rem}.benefits-list li{padding:.75rem 0;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:.75rem}.benefits-list li:last-child{border-bottom:none}.benefits-list li:before{content:"✓";color:var(--accent-color);font-weight:700;font-size:var(--text-lg)}.progress-to-next{background:var(--surface-color);padding:1.5rem;border-radius:var(--radius-lg);margin-top:1rem}.progress-to-next h4{margin-bottom:1rem;color:var(--text-primary)}.next-badge-info{display:flex;justify-content:space-between;align-items:center}.next-badge-name{font-weight:600;color:var(--primary-color)}.hours-needed{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}.nav-link.active{color:var(--primary-color);font-weight:600}.footer{background:var(--text-primary);color:#fff;padding:3rem 0 1rem;margin-top:4rem}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}.footer-section h3,.footer-section h4{margin-bottom:1rem;color:#fff}.footer-section p{color:#fffc;margin-bottom:0}.footer-section ul{list-style:none}.footer-section ul li{margin-bottom:.5rem}.footer-section ul li a{color:#fffc;text-decoration:none;transition:color var(--dur-slow) var(--ease)}.footer-section ul li a:hover{color:#fff}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.2);color:#fff9}@media(max-width:768px){.hero{padding:3rem 0}.hero-title{font-size:2.5rem}.hero-description{font-size:var(--text-lg)}.status-card{padding:1.5rem}.badges-grid{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:12px;padding:0 16px 16px;scrollbar-width:none;-ms-overflow-style:none}.badges-grid::-webkit-scrollbar{display:none}.badge-card{flex:0 0 260px;scroll-snap-align:start;padding:1.25rem}.progress-markers{flex-wrap:wrap;gap:.5rem}.marker{font-size:.625rem;padding:.125rem .25rem}.modal-content{padding:1.5rem;margin:1rem}.footer-content{grid-template-columns:1fr;text-align:center}}@media(max-width:480px){.badge-header{flex-direction:column;align-items:flex-start;gap:.75rem}.status-indicator{align-self:flex-start}.progress-info{flex-direction:column;gap:.25rem}}.current-badge{min-height:48px}.progress-info span{min-height:1.4em}