.hero-section{position:relative;height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background-color:#111827}.hero-canvas{z-index:1}.hero-canvas,.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.hero-overlay{background:linear-gradient(180deg,rgba(17,24,39,.7),rgba(17,24,39,.9));z-index:2}.hero-content{position:relative;z-index:3;text-align:center;max-width:64rem;padding:0 1.5rem}.hero-logo-container{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem}.hero-logo{width:8rem;height:8rem;margin-bottom:1rem}.hero-title{font-size:2.5rem;font-weight:700;color:#f59e0b;margin:0 0 1.5rem;text-shadow:0 2px 4px rgba(0,0,0,.3)}.hero-subtitle{font-size:1.25rem;line-height:1.75rem;color:rgba(255,255,255,.9);margin-bottom:2.5rem;max-width:42rem;margin-left:auto;margin-right:auto}.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.hero-button{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;border-radius:.375rem;transition:all .3s ease;text-decoration:none}.hero-button-icon{margin-left:.5rem;width:1rem;height:1rem}.hero-button.primary{background-color:#f59e0b;color:#ffffff}.hero-button.primary:hover{background-color:#d97706;transform:translateY(-2px);box-shadow:0 4px 6px rgba(0,0,0,.1)}.hero-button.secondary{background-color:transparent;color:#ffffff;border:1px solid rgba(255,255,255,.5)}.hero-button.secondary:hover{background-color:rgba(255,255,255,.1);border-color:#ffffff;transform:translateY(-2px)}.hero-scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center}.hero-scroll-button{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background-color:rgba(255,255,255,.1);color:#ffffff;border:none;cursor:pointer;transition:all .3s ease}.hero-scroll-button:hover{background-color:rgba(255,255,255,.2);transform:translateY(-2px)}.hero-scroll-icon{width:1.5rem;height:1.5rem;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@media (max-width:768px){.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.hero-buttons{flex-direction:column;width:100%}.hero-button{width:100%}.hero-logo{width:6rem;height:6rem}}@media (max-width:480px){.hero-title{font-size:1.75rem}.hero-subtitle{font-size:1rem}.hero-buttons{flex-direction:column}.hero-logo{width:80px;height:80px}}