html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{margin:0;padding:0}body{background-color:var(--light-color)}.article-wrapper p{max-width:65ch}p{margin-top:0;margin-bottom:1rem;color:#333;line-height:1.6;font-size:1.125rem}header{background-color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);position:sticky;top:0;z-index:100}header .container{display:flex;justify-content:space-between;align-items:center;padding:5px 20px;height:65px}.container{width:100%;max-width:1100px;margin:0 auto}.logo h1{font-size:18px;font-weight:600;color:var(--primary-color);margin:0 auto}a{text-decoration:none;color:var(--primary-color);transition:var(--transition)}nav ul{display:flex;margin:0 auto}ul{list-style:none}nav ul li{margin-left:8px}nav ul li a{color:var(--dark-color);font-weight:500;padding:5px 6px;border-radius:4px;font-size:14px}.menu-toggle{display:none}:root{--primary-color:#3498db;--secondary-color:#2c3e50;--accent-color:#e74c3c;--light-color:#f5f5f5;--dark-color:#333;--gray-color:#7f8c8d;--border-color:#ddd;--success-color:#2ecc71;--warning-color:#f39c12;--danger-color:#e74c3c;--shadow:0 2px 10px rgba(0, 0, 0, 0.1);--transition:all 0.3s ease}@media(min-width:769px) and (max-width:1024px){nav ul li a{font-size:14px;padding:4px 8px}.logo h1{font-size:20px!important}}@media(max-width:768px){header .container{display:flex;justify-content:space-between;align-items:center;padding:5px 20px;flex-wrap:wrap;position:relative}.logo{order:1}.menu-toggle{order:2;display:block;font-size:18px;cursor:pointer;flex-shrink:0}nav{order:3;width:calc(100% + 40px);margin-left:-20px;margin-right:-20px;margin-top:-5px;display:none;background-color:#fff;z-index:100;position:relative}nav.active{display:block}nav ul{flex-direction:column;width:100%;padding:0}nav ul li{margin:0}nav ul li a{display:block;padding:10px 20px}.hero-content{padding-right:40px;flex:1}.hero-content h2{font-size:42px;font-weight:700;margin-bottom:15px;color:var(--secondary-color)}.hero-content p{font-size:18px;margin-bottom:30px;color:var(--gray-color)}.hero-buttons{display:flex;gap:15px}.primary-btn{background-color:var(--primary-color);color:#fff}.secondary-btn{background-color:var(--secondary-color);color:#fff}.secondary-btn:hover{background-color:#1a2530;color:#fff}.btn{display:inline-block;cursor:pointer;font-size:16px;font-weight:600;text-align:center;padding:10px 20px;border-radius:5px;text-decoration:none;transition:var(--transition)}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.hero-image img{max-width:100%;border-radius:10px;box-shadow:var(--shadow)}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-bottom:50px}.feature-card{background-color:#fff;padding:30px;border-radius:10px;box-shadow:var(--shadow);text-align:center;transition:var(--transition)}.feature-card:hover{transform:translateY(-5px);box-shadow:0 5px 20px rgba(0,0,0,.15)}.feature-card i{font-size:40px;color:var(--primary-color);margin-bottom:15px}.feature-card h3{font-size:22px;margin-bottom:10px;color:var(--secondary-color)}.feature-card p{color:var(--gray-color);line-height:1.6}.leaderboard-preview{background-color:#fff;padding:40px;border-radius:10px;box-shadow:var(--shadow);margin-bottom:50px}.leaderboard-preview h2{text-align:center;margin-bottom:30px;color:var(--secondary-color)}.leaderboard-header,.leaderboard-row{display:grid;grid-template-columns:60px 1fr 100px 100px;padding:15px;gap:15px}.leaderboard-header{background-color:var(--primary-color);color:#fff;font-weight:600;border-radius:5px;text-align:center}.leaderboard-row{border-bottom:1px solid var(--border-color);transition:var(--transition);cursor:pointer}.leaderboard-row:hover{background-color:rgba(52,152,219,5%)}.leaderboard-preview .btn{display:block;width:200px;margin:20px auto 0}}