/* BASE */

body {

margin: 0;

font-family: 'Inter', sans-serif;

background: #0a0f1a;

color: white;

overflow-x: hidden;

}


/* BACKGROUND */

.bg-pattern {

position: fixed;

width: 100%;

height: 100%;

background-image: radial-gradient(rgba(59,130,246,0.12) 1px, transparent 1px);

background-size: 40px 40px;

z-index: -2;

}


.glow {

position: fixed;

width: 400px;

height: 400px;

background: #3B82F6;

border-radius: 50%;

filter: blur(140px);

opacity: 0.2;

z-index: -1;

animation: float 8s ease-in-out infinite alternate;

}


.glow.one {

top: -100px;

left: -100px;

}


.glow.two {

bottom: -100px;

right: -100px;

animation-delay: 2s;

}


@keyframes float {

from {

transform: translateY(0px);

}

to {

transform: translateY(60px);

}

}


/* NAVBAR */

.navbar {

position: fixed;

top: 20px;

left: 50%;

transform: translateX(-50%);

width: 90%;

max-width: 1100px;

background: rgba(15,23,42,0.6);

border: 1px solid rgba(59,130,246,0.2);

backdrop-filter: blur(16px);

border-radius: 14px;

padding: 14px 22px;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 1000;

}


.logo {

font-weight: 800;

font-size: 20px;

}


.logo span {

color: #60A5FA;

}


.nav-links a {

color: white;

text-decoration: none;

margin-left: 20px;

font-weight: 500;

transition: 0.3s;

}


.nav-links a:hover {

color: #60A5FA;

}


/* HERO */

.hero {

text-align: center;

padding-top: 180px;

padding-bottom: 140px;

}


.hero h1 {

font-size: 56px;

font-weight: 800;

margin-bottom: 15px;

background: linear-gradient(90deg, white, #60A5FA);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}


.hero p {

color: #9ca3af;

font-size: 18px;

margin-bottom: 30px;

}


/* BUTTON */

.btn {

display: inline-block;

padding: 14px 28px;

border-radius: 12px;

text-decoration: none;

font-weight: 600;

transition: 0.3s;

}


.btn-primary {

background: rgba(59,130,246,0.3);

border: 1px solid rgba(96,165,250,0.6);

color: white;

}


.btn-primary:hover {

background: rgba(59,130,246,0.5);

box-shadow: 0 0 25px rgba(59,130,246,0.5);

transform: translateY(-3px);

}


/* FEATURES */

.section {

max-width: 1100px;

margin: auto;

padding: 60px 20px;

}


.section h2 {

text-align: center;

font-size: 34px;

margin-bottom: 40px;

}


.grid {

display: grid;

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

gap: 25px;

}


.card {

background: rgba(15,23,42,0.6);

border: 1px solid rgba(59,130,246,0.2);

backdrop-filter: blur(14px);

padding: 28px;

border-radius: 14px;

transition: 0.3s;

}


.card:hover {

transform: translateY(-8px);

border-color: rgba(96,165,250,0.7);

box-shadow: 0 0 25px rgba(59,130,246,0.4);

}


.card i {

font-size: 28px;

margin-bottom: 15px;

color: #60A5FA;

}


.card p {

color: #9ca3af;

}


/* FOOTER */

.footer {

background: rgba(15,23,42,0.8);

border-top: 1px solid rgba(59,130,246,0.2);

padding: 60px 20px 30px 20px;

}


.footer-container {

max-width: 1100px;

margin: auto;

display: grid;

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

gap: 40px;

}


.footer h3 {

margin-bottom: 15px;

}


.footer a {

display: block;

text-decoration: none;

color: #9ca3af;

margin-bottom: 8px;

transition: 0.3s;

}


.footer a:hover {

color: #60A5FA;

}


.footer-social a {

margin-right: 12px;

font-size: 20px;

color: #9ca3af;

transition: 0.3s;

}


.footer-social a:hover {

color: #60A5FA;

}


.footer-bottom {

text-align: center;

margin-top: 40px;

color: #6b7280;

font-size: 14px;

}


/* Redirect Page */

.redirect-wrapper{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

.redirect-card{
background:rgba(15,23,42,0.65);
border:1px solid rgba(59,130,246,0.25);
backdrop-filter:blur(16px);
border-radius:18px;
padding:50px 40px;
text-align:center;
max-width:420px;
width:100%;
animation:fadeUp 0.6s ease;
}

.redirect-icon{
font-size:70px;
color:#3B82F6;
margin-bottom:20px;
animation:float 3s ease-in-out infinite;
}

.redirect-title{
font-size:28px;
font-weight:800;
margin-bottom:10px;
}

.redirect-text{
color:#94A3B8;
margin-bottom:15px;
}

.redirect-count{
font-size:40px;
font-weight:800;
color:#60A5FA;
margin-bottom:20px;
}

.redirect-bar{
height:6px;
background:rgba(255,255,255,0.05);
border-radius:999px;
overflow:hidden;
}

.redirect-progress{
height:100%;
width:0%;
background:linear-gradient(90deg,#3B82F6,#60A5FA);
transition:width 1s linear;
}

/* animations */

@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}