*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Onest',system-ui,-apple-system,sans-serif;color:#fff;background:#0a0a0f;overflow:hidden;min-height:100vh;-webkit-font-smoothing:antialiased}

.hero{position:relative;width:100vw;height:100vh;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}

.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:hue-rotate(20deg) saturate(1.1)}

.overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(10,10,20,0.85) 0%,rgba(20,10,40,0.75) 50%,rgba(10,20,40,0.85) 100%);backdrop-filter:blur(2px)}

.particle{position:absolute;width:6px;height:6px;background:radial-gradient(circle,rgba(167,139,250,0.9),rgba(167,139,250,0));border-radius:50%;pointer-events:none;animation:float 12s infinite ease-in-out}
.particle:nth-child(1){left:10%;top:20%;animation-delay:0s;animation-duration:14s}
.particle:nth-child(2){left:85%;top:15%;animation-delay:2s;animation-duration:11s;width:4px;height:4px}
.particle:nth-child(3){left:25%;top:80%;animation-delay:4s;animation-duration:16s}
.particle:nth-child(4){left:70%;top:75%;animation-delay:1s;animation-duration:13s;width:8px;height:8px;background:radial-gradient(circle,rgba(34,211,238,0.9),rgba(34,211,238,0))}
.particle:nth-child(5){left:50%;top:50%;animation-delay:3s;animation-duration:15s}
.particle:nth-child(6){left:15%;top:60%;animation-delay:5s;animation-duration:12s;width:5px;height:5px;background:radial-gradient(circle,rgba(34,211,238,0.9),rgba(34,211,238,0))}
.particle:nth-child(7){left:90%;top:55%;animation-delay:6s;animation-duration:14s}
.particle:nth-child(8){left:40%;top:10%;animation-delay:2.5s;animation-duration:17s;width:3px;height:3px}
.particle:nth-child(9){left:60%;top:90%;animation-delay:4.5s;animation-duration:13s}
.particle:nth-child(10){left:5%;top:40%;animation-delay:7s;animation-duration:15s;width:7px;height:7px;background:radial-gradient(circle,rgba(34,211,238,0.9),rgba(34,211,238,0))}
.particle:nth-child(11){left:75%;top:35%;animation-delay:1.5s;animation-duration:12s}
.particle:nth-child(12){left:35%;top:70%;animation-delay:3.5s;animation-duration:16s;width:4px;height:4px}

@keyframes float{0%,100%{transform:translate(0,0) scale(1);opacity:0.4}25%{transform:translate(30px,-40px) scale(1.2);opacity:0.9}50%{transform:translate(-20px,30px) scale(0.8);opacity:0.6}75%{transform:translate(40px,20px) scale(1.1);opacity:0.8}}

.container{position:relative;z-index:2;width:100%;max-width:1200px;padding:clamp(24px,4vw,60px);display:flex;flex-direction:column;justify-content:space-between;height:100%;max-height:100vh}

.brand{display:flex;align-items:center;gap:14px;animation:fadeInDown 1s ease-out both}
.logo{width:42px;height:42px;filter:drop-shadow(0 0 12px rgba(167,139,250,0.5))}
.brand-name{font-weight:900;font-size:clamp(14px,1.4vw,18px);letter-spacing:0.25em;background:linear-gradient(90deg,#a78bfa,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}

.content{max-width:760px;margin:auto 0;animation:fadeInUp 1.2s cubic-bezier(0.16,1,0.3,1) 0.2s both}

.kicker{display:inline-block;font-size:clamp(12px,1.1vw,14px);font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:#22d3ee;padding:8px 16px;border:1px solid rgba(34,211,238,0.3);border-radius:100px;background:rgba(34,211,238,0.08);margin-bottom:24px}

.title{font-size:clamp(36px,8vw,96px);font-weight:900;line-height:1.05;letter-spacing:-0.03em;margin-bottom:24px;text-wrap:balance}
.accent{background:linear-gradient(135deg,#a78bfa 0%,#22d3ee 50%,#a78bfa 100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradientShift 6s ease infinite;display:inline-block}

@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.subtitle{font-size:clamp(16px,1.6vw,20px);font-weight:300;line-height:1.6;color:rgba(255,255,255,0.75);max-width:560px;margin-bottom:40px}

.actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:32px}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-family:inherit;font-size:15px;font-weight:500;border:none;border-radius:14px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;min-height:52px;min-width:160px;justify-content:center}
.btn svg{width:18px;height:18px;transition:transform .3s ease}

.btn-primary{background:linear-gradient(135deg,#a78bfa,#22d3ee);color:#0a0a0f;font-weight:700;box-shadow:0 8px 32px rgba(167,139,250,0.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(167,139,250,0.5)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-primary:active{transform:translateY(0)}

.btn-ghost{background:rgba(255,255,255,0.06);color:#fff;border:1px solid rgba(255,255,255,0.15);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.3);transform:translateY(-2px)}

.btn:focus-visible{outline:2px solid #22d3ee;outline-offset:4px}

.status{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;background:rgba(34,211,238,0.08);border:1px solid rgba(34,211,238,0.2);border-radius:100px;font-size:13px;font-weight:500;color:rgba(255,255,255,0.8)}
.status-dot{width:8px;height:8px;border-radius:50%;background:#22d3ee;box-shadow:0 0 12px #22d3ee;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.85)}}

.foot{text-align:center;font-size:13px;color:rgba(255,255,255,0.4);font-weight:300;animation:fadeIn 1.5s ease 0.8s both}

@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media (max-width:640px){
.actions{flex-direction:column;width:100%}
.btn{width:100%}
.foot{padding-bottom:20px}
}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
.particle{display:none}
}