.hero{min-height:60vh;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:20px 15px;margin-bottom:20px}.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgb(255 215 0 / .1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgb(220 20 60 / .1) 0%,transparent 50%);animation:float 20s ease-in-out infinite}@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-20px)}}.hero-content{position:relative;z-index:2;max-width:900px;text-align:center;animation:fadeInUp 1s ease-out}@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.hero .logo{font-size:24px;font-weight:700;color:gold;margin-bottom:15px;text-transform:uppercase;letter-spacing:2px}.hero h1{font-size:48px;color:#fff;margin-bottom:15px;font-weight:800;line-height:1.2;text-shadow:0 4px 20px rgb(0 0 0 / .5)}.hero .subtitle{font-size:18px;color:#e0e0e0;margin-bottom:25px;font-weight:300;max-width:600px;margin-left:auto;margin-right:auto}.cta-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}.btn{padding:12px 30px;border:none;border-radius:50px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-decoration:none;display:inline-block;text-transform:uppercase;letter-spacing:1px}.btn-primary{background:linear-gradient(135deg,#ffd700 0%,#ffed4e 100%);color:#000;box-shadow:0 8px 25px rgb(255 215 0 / .3)}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgb(255 215 0 / .4)}.btn-secondary{background:#fff0;color:#fff;border:2px solid #fff}.btn-secondary:hover{background:#fff;color:#1a1a2e;transform:translateY(-3px)}.scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);animation:bounce 2s infinite}.scroll-indicator svg{width:24px;height:24px;stroke:gold;fill:none;stroke-width:2}@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}@media (max-width:768px){.hero h1{font-size:42px}.hero .subtitle{font-size:18px}.btn{padding:14px 32px;font-size:14px}}@media (max-width:480px){.hero h1{font-size:32px}.hero .subtitle{font-size:16px}.cta-buttons{flex-direction:column}.btn{width:100%}}