*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--bg:#050505;
--text:#ffffff;
--muted:#bbbbbb;
--soft:#d0d0d0;
--purple:#8f5fff;
--purple-bright:#b88cff;
--blue:#22d3ff;
--deep-blue:#151dff;
--glass:rgba(0,0,0,.25);
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Montserrat',sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

body::before,
body::after{
content:"";
position:fixed;
pointer-events:none;
z-index:-2;
}

body::before{
width:900px;
height:900px;
background:radial-gradient(circle,rgba(125,60,255,.85) 0%,rgba(125,60,255,0) 70%);
filter:blur(160px);
opacity:.35;
left:-250px;
top:-250px;
animation:move1 12s infinite alternate ease-in-out;
}

body::after{
width:700px;
height:700px;
background:radial-gradient(circle,rgba(95,0,255,.85) 0%,rgba(95,0,255,0) 70%);
filter:blur(180px);
opacity:.30;
right:-200px;
bottom:-200px;
animation:move2 10s infinite alternate ease-in-out;
}

@keyframes move1{
from{transform:translate(0,0);}
to{transform:translate(220px,180px);}
}

@keyframes move2{
from{transform:translate(0,0);}
to{transform:translate(-180px,-150px);}
}

header{
position:fixed;
top:0;
left:0;
width:100%;
padding:25px 10%;
display:flex;
justify-content:space-between;
align-items:center;
background:var(--glass);
backdrop-filter:blur(18px);
z-index:1000;
}

.logo{
font-size:28px;
font-weight:800;
letter-spacing:6px;
}

nav a{
color:var(--text);
text-decoration:none;
margin-left:35px;
font-weight:600;
transition:.3s;
}

nav a:hover{
color:#9b6cff;
}

main{
min-height:100vh;
}

.hero{
position:relative;
height:100vh;
min-height:720px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:130px 40px 90px;
isolation:isolate;
overflow:hidden;
background:
linear-gradient(135deg,rgba(5,5,5,1) 0%,rgba(18,7,44,1) 42%,rgba(3,18,35,1) 100%);
}

.hero-video,
.hero-fallback,
.hero-overlay,
.neon-light,
.particles{
position:absolute;
inset:0;
}

.hero-video{
width:100%;
height:100%;
object-fit:cover;
z-index:-5;
opacity:.56;
filter:saturate(1.1) contrast(1.08) brightness(.72);
}

.video-failed .hero-video{
display:none;
}

.hero-fallback{
z-index:-6;
background:
radial-gradient(circle at 28% 24%,rgba(143,95,255,.36),transparent 34%),
radial-gradient(circle at 76% 68%,rgba(34,211,255,.22),transparent 32%),
linear-gradient(135deg,#050505 0%,#140a2d 48%,#03111e 100%);
}

.hero-overlay{
z-index:-4;
background:
linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.32) 46%,rgba(0,0,0,.78) 100%),
radial-gradient(circle at center,rgba(143,95,255,.08),rgba(0,0,0,.58) 66%);
}

.neon-light{
z-index:-3;
pointer-events:none;
filter:blur(70px);
opacity:.58;
}

.neon-light-purple{
width:55vw;
height:55vw;
inset:auto auto 5% -16%;
background:radial-gradient(circle,rgba(143,95,255,.9),transparent 62%);
animation:neonPulse 7s ease-in-out infinite alternate;
}

.neon-light-blue{
width:48vw;
height:48vw;
inset:12% -14% auto auto;
background:radial-gradient(circle,rgba(34,211,255,.72),transparent 64%);
animation:neonPulse 8s ease-in-out infinite alternate-reverse;
}

@keyframes neonPulse{
from{transform:scale(.92) translate3d(0,0,0);opacity:.42;}
to{transform:scale(1.08) translate3d(4%,3%,0);opacity:.72;}
}

.particles{
z-index:-2;
pointer-events:none;
}

.particle{
position:absolute;
left:var(--x);
top:var(--y);
width:var(--size);
height:var(--size);
border-radius:50%;
background:rgba(255,255,255,.85);
box-shadow:0 0 14px rgba(143,95,255,.78),0 0 22px rgba(34,211,255,.38);
opacity:var(--opacity);
animation:particleFloat var(--duration) linear infinite;
animation-delay:var(--delay);
}

@keyframes particleFloat{
0%{transform:translate3d(0,0,0) scale(.75);opacity:0;}
12%{opacity:var(--opacity);}
80%{opacity:var(--opacity);}
100%{transform:translate3d(var(--drift),-115vh,0) scale(1.2);opacity:0;}
}

.hero-content{
position:relative;
z-index:2;
width:min(980px,100%);
margin:auto;
}

.hero-kicker{
margin-bottom:22px;
font-size:12px;
font-weight:700;
letter-spacing:5px;
text-transform:uppercase;
color:rgba(255,255,255,.72);
text-shadow:0 0 18px rgba(34,211,255,.45);
}

.hero h1{
font-size:clamp(56px,9vw,132px);
font-weight:800;
letter-spacing:12px;
line-height:.94;
margin-bottom:22px;
text-shadow:
0 0 24px rgba(143,95,255,.72),
0 0 64px rgba(34,211,255,.38);
}

.hero h2{
font-size:clamp(17px,2.1vw,28px);
font-weight:400;
color:var(--soft);
margin-bottom:28px;
text-shadow:0 0 24px rgba(0,0,0,.85);
}

.hero-description{
max-width:760px;
margin:auto;
font-size:clamp(16px,1.7vw,21px);
line-height:1.8;
color:var(--muted);
text-shadow:0 0 22px rgba(0,0,0,.85);
}

.hero-actions{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:16px;
margin-top:42px;
}

.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-width:190px;
min-height:56px;
padding:16px 30px;
border:2px solid var(--purple);
border-radius:40px;
color:var(--text);
text-decoration:none;
font-size:14px;
font-weight:700;
letter-spacing:.5px;
transition:transform .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.button:hover{
transform:translateY(-3px);
background:var(--purple);
box-shadow:0 0 30px rgba(143,95,255,.48);
}

.button-primary{
background:linear-gradient(135deg,rgba(143,95,255,.95),rgba(34,211,255,.54));
border-color:rgba(255,255,255,.22);
box-shadow:0 0 32px rgba(143,95,255,.34);
}

.button-secondary{
background:rgba(255,255,255,.05);
border-color:rgba(255,255,255,.28);
backdrop-filter:blur(16px);
}

.button-secondary:hover{
border-color:var(--blue);
background:rgba(34,211,255,.14);
box-shadow:0 0 30px rgba(34,211,255,.28);
}

.social-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:14px;
margin-top:38px;
}

.social-links a{
width:46px;
height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.18);
border-radius:50%;
color:rgba(255,255,255,.88);
background:rgba(255,255,255,.055);
backdrop-filter:blur(14px);
transition:transform .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease;
}

.social-links a:hover{
transform:translateY(-4px) scale(1.04);
color:var(--text);
border-color:rgba(34,211,255,.78);
background:rgba(34,211,255,.12);
box-shadow:0 0 24px rgba(34,211,255,.25),0 0 34px rgba(143,95,255,.18);
}

.social-links svg{
width:21px;
height:21px;
fill:currentColor;
}

.scroll-down{
position:absolute;
left:50%;
bottom:28px;
z-index:3;
display:inline-flex;
flex-direction:column;
align-items:center;
gap:11px;
color:rgba(255,255,255,.72);
text-decoration:none;
font-size:11px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
animation:scrollFloat 2.4s ease-in-out infinite;
}

.scroll-down i{
width:24px;
height:38px;
border:1px solid rgba(255,255,255,.42);
border-radius:999px;
position:relative;
}

.scroll-down i::before{
content:"";
position:absolute;
left:50%;
top:8px;
width:4px;
height:8px;
border-radius:99px;
background:var(--blue);
box-shadow:0 0 14px rgba(34,211,255,.8);
transform:translateX(-50%);
animation:scrollDot 1.6s ease-in-out infinite;
}

@keyframes scrollFloat{
0%,100%{transform:translate(-50%,0);}
50%{transform:translate(-50%,8px);}
}

@keyframes scrollDot{
0%{opacity:0;transform:translate(-50%,0);}
30%{opacity:1;}
100%{opacity:0;transform:translate(-50%,16px);}
}

.icon-defs{
position:absolute;
width:0;
height:0;
overflow:hidden;
}

@media (max-width:900px){
header{
padding:22px 7%;
}

.logo{
font-size:22px;
letter-spacing:4px;
}

nav a{
margin-left:20px;
font-size:14px;
}

.hero{
min-height:760px;
padding:120px 28px 96px;
}

.hero h1{
letter-spacing:8px;
}
}

@media (max-width:680px){
header{
padding:18px 22px;
flex-direction:column;
gap:14px;
}

nav{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px 18px;
}

nav a{
margin-left:0;
font-size:13px;
}

.hero{
height:auto;
min-height:100vh;
padding:150px 20px 100px;
}

.hero-kicker{
font-size:10px;
letter-spacing:3px;
margin-bottom:18px;
}

.hero h1{
letter-spacing:5px;
}

.hero-actions{
gap:12px;
margin-top:34px;
}

.button{
width:100%;
max-width:310px;
min-height:54px;
}

.social-links{
gap:11px;
margin-top:32px;
}

.social-links a{
width:42px;
height:42px;
}

.scroll-down{
bottom:18px;
}
}

@media (max-width:420px){
.hero h1{
font-size:46px;
letter-spacing:3px;
}

.hero h2{
font-size:16px;
}

.hero-description{
font-size:15px;
}
}

@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
}
}