#logout-button{background:#0082c6;color:#fff;font-size:1em;padding:6px 12px}:root{--primary: #0077ff;--info: #02a100;--warning: #fddd13;--dark-bg: #0f172a}body{font-family:Segoe UI,Arial,sans-serif;margin:0;background:#f8f9fc;color:#333;line-height:1.6}.header{width:100%;padding:.8rem 2rem;display:flex;align-items:center;justify-content:space-evenly;gap:60rem;background:var(--dark-bg);position:fixed;top:0;left:0;z-index:10;box-shadow:0 2px 6px #0000004d;animation:slideDown 1s ease-out}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.header .logo img{height:70px}.header nav .btn{padding:.5rem 1rem;background:var(--primary);color:#fff!important;text-decoration:none;border-radius:6px;transition:background .3s}.header nav .btn:hover{background:#0056b3}.hero{display:flex;justify-content:center;align-items:center;text-align:center;height:100vh;color:#fff;position:relative;overflow:hidden}.hero .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#cdc4c48c;z-index:1}.hero-content{position:relative;z-index:2;max-width:800px;padding:20px;animation:fadeUp 1.5s ease-out}@keyframes fadeUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.fade-in-delay{opacity:0;transform:translateY(20px);animation:fadeUp 1.4s ease forwards;animation-delay:.5s}.fade-in-delay2{opacity:0;transform:translateY(20px);animation:fadeUp 1.4s ease forwards;animation-delay:.9s}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}.hero h1{font-size:3rem;font-weight:700;color:#111}.kd-color{color:#07f}.dm-color{color:#02a100}.hero h1 span{color:var(--primary)}.hero p{font-size:1.2rem;margin:15px 0 25px;color:#2d2a2a}.hero .btn-main{padding:.8rem 1.6rem;background:var(--primary);color:#fff;border-radius:8px;font-size:1rem;text-decoration:none;transition:background .3s}.hero .btn-main:hover{background:#0056b3}.dashboard-image{max-width:1100px;margin:40px auto;text-align:center;animation:fadeIn 2s ease}.dashboard-image img{width:100%;max-width:1000px;border-radius:12px;box-shadow:0 4px 20px #0000001a;transition:transform .4s}.features-section{max-width:1200px;margin:100px auto;display:flex;gap:50px;padding:20px;align-items:flex-start}.features-left{flex:1;min-width:250px;animation:fadeInLeft 1.5s ease}.features-left h2{font-size:2.5rem;font-weight:700;color:#111;margin-bottom:15px}.features-left .dot{color:var(--primary)}.features-left p{color:#666;font-size:1.1rem;margin-bottom:25px}.download-btn{display:inline-block;padding:12px 25px;background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;border-radius:25px;text-decoration:none;font-weight:600;transition:transform .3s ease,box-shadow .3s ease}.download-btn:hover{transform:translateY(-3px);box-shadow:0 6px 15px #0003}.features-grid{flex:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}.features-right{flex:1.2;display:grid;grid-template-columns:repeat(2,1fr);gap:25px}.feature-card{background:#fff;padding:25px;border-radius:15px;box-shadow:0 4px 15px #00000014;text-align:left;transition:transform .3s ease,box-shadow .3s ease;position:relative;transform:translateY(40px)}.feature-card.visible{opacity:1;transform:translateY(0);transition:all .6s ease}.feature-card h3{font-size:1.2rem;font-weight:600;margin-bottom:8px;color:#111}.feature-card .icon{width:50px;height:50px;border-radius:50%;background:linear-gradient(90deg,#fddd13,#02a100,#2575fc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:15px}.feature-card p{color:#444;font-size:.95rem;line-height:1.5}.feature-card:hover{transform:translateY(-8px);box-shadow:0 10px 25px #00000026}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}.feature-card.highlight{background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff}.feature-card.highlight h3,.feature-card.highlight p{color:#fff}.btn-group{display:flex;gap:15px;justify-content:center;margin-top:20px}.btn-animated{position:relative;padding:.9rem 2rem;font-size:1rem;font-weight:600;color:#fff;text-decoration:none;border-radius:50px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.login-btn{background:linear-gradient(135deg,#07f,#0056b3);box-shadow:0 4px 12px #07f6}.start-btn{background:linear-gradient(135deg,#02a100,#007a2f);box-shadow:0 4px 12px #02a10066}.btn-animated:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 20px #0000004d}.btn-animated:after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:#ffffff4d;transform:skew(-25deg)}.btn-animated:hover:after{animation:shine .8s ease forwards}@keyframes shine{to{left:125%}}.card p{color:#444;font-size:.95rem;line-height:1.5}footer{margin-top:60px;padding:20px;text-align:center;background:#0f172a;font-size:.9rem;color:#e5dfdf}@media (max-width: 1600px){body{font-size:15px}.header{gap:45rem}}@media (max-width: 1366px){body{font-size:13px}.header{padding:.7rem 1.5rem;gap:45rem}.hero h1{font-size:2.4rem}.hero p,.feature-card h3{font-size:1rem}}@media (max-width: 1024px){.header{gap:15rem;padding:.6rem 1rem}.hero h1{font-size:2.2rem}.features-section{flex-direction:column;text-align:center}}@media (max-width: 768px){body{font-size:12px}.header{justify-content:space-around;padding:.5rem 1rem}.hero h1{font-size:1.8rem}.hero p{font-size:1rem}.features-grid{grid-template-columns:1fr}.feature-card{padding:18px}}@media (max-width: 480px){.hero h1{font-size:1.6rem}.header .logo img{height:50px}.btn-animated{padding:.7rem 1.4rem;font-size:.85rem}}