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

html{
scroll-behavior:smooth;
}

body{

font-family:Arial,Helvetica,sans-serif;

background:#08111f;

color:white;

line-height:1.7;

overflow-x:hidden;

}

/* Navigation */

header{

position:fixed;

width:100%;

background:rgba(8,17,31,.8);

backdrop-filter:blur(12px);

z-index:1000;

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 8%;

}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

transition:.3s;

}

nav a:hover{

color:#38bdf8;

}

/* Hero */

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:100px 10%;

position:relative;

overflow:hidden;

background:linear-gradient(-45deg,#08111f,#16213e,#0f172a,#08111f);

background-size:400% 400%;

animation:bgMove 12s infinite alternate;

}

@keyframes bgMove{

0%{background-position:left;}

100%{background-position:right;}

}

.hero-content{

max-width:900px;

animation:fadeUp 1.4s ease;

}

.hero h1{

font-size:3.5rem;

margin-bottom:25px;

}

.hero p{

font-size:1.2rem;

opacity:.9;

margin-bottom:40px;

}

/* Buttons */

.buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn{

background:#2563eb;

padding:16px 35px;

border-radius:50px;

color:white;

text-decoration:none;

transition:.4s;

animation:pulse 2s infinite;

}

.btn:hover{

transform:translateY(-5px);

}

.btn-outline{

border:2px solid #38bdf8;

padding:16px 35px;

border-radius:50px;

color:white;

text-decoration:none;

transition:.4s;

}

.btn-outline:hover{

background:#38bdf8;

color:#08111f;

}

@keyframes pulse{

50%{

box-shadow:0 0 20px #38bdf8;

}

}

/* Sections */

section{

padding:100px 10%;

}

h2{

text-align:center;

margin-bottom:60px;

font-size:2.5rem;

}

/* Cards */

.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.card{

padding:35px;

border-radius:20px;

background:#13233e;

transition:.4s;

border:1px solid rgba(255,255,255,.08);

}

.card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.4);

}

/* Stats */

.stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

text-align:center;

}

.stats div{

padding:40px;

background:#13233e;

border-radius:15px;

}

/* FAQ */

details{

margin:20px auto;

max-width:900px;

padding:20px;

background:#13233e;

border-radius:10px;

}

summary{

cursor:pointer;

font-size:1.1rem;

font-weight:bold;

}

/* Contact */

.contact{

text-align:center;

}

.contact p{

margin-bottom:35px;

}

/* Footer */

footer{

padding:30px;

text-align:center;

background:#050b16;

}

/* Floating particles */

.particles span{

position:absolute;

width:8px;

height:8px;

background:#38bdf8;

border-radius:50%;

animation:float 12s linear infinite;

opacity:.5;

}

.particles span:nth-child(1){left:10%;animation-duration:10s;}
.particles span:nth-child(2){left:30%;animation-duration:15s;}
.particles span:nth-child(3){left:50%;animation-duration:12s;}
.particles span:nth-child(4){left:70%;animation-duration:18s;}
.particles span:nth-child(5){left:90%;animation-duration:14s;}

@keyframes float{

0%{

transform:translateY(100vh) scale(0);

}

100%{

transform:translateY(-100px) scale(1.5);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* Mobile */

@media(max-width:768px){

.hero h1{

font-size:2.2rem;

}

nav{

flex-direction:column;

gap:20px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

}

.stats{

grid-template-columns:1fr;

}

}