/* ================= BACKGROUND ================= */

body{
background:
radial-gradient(circle at 20% 20%, #1e293b 0%, transparent 40%),
radial-gradient(circle at 80% 0%, #1e40af 0%, transparent 40%),
#0f172a;
}

/* ================= HERO BUTTONS ================= */

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

/* ================= BUTTONS ================= */

.btn{
padding:12px 26px;
border-radius:12px;
font-size:14px;
text-decoration:none;
transition:.25s ease;
font-weight:500;
}

.btn-primary{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:white;
box-shadow:0 10px 25px rgba(37,99,235,.3);
}

.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 15px 35px rgba(37,99,235,.4);
}

.btn-outline{
border:1px solid rgba(255,255,255,0.1);
color:#94a3b8;
backdrop-filter:blur(6px);
}

.btn-outline:hover{
border-color:#2563eb;
color:white;
background:rgba(37,99,235,0.08);
}

/* ================= CARD PREMIUM EFFECT ================= */

.card{
position:relative;
overflow:hidden;
}

/* glow tracking effect */
.card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:
radial-gradient(
circle 200px at var(--x) var(--y),
rgba(37,99,235,.15),
transparent 40%
);
opacity:0;
transition:.3s;
pointer-events:none;
}

.card:hover::before{
opacity:1;
}

/* stronger hover */
.card:hover{
transform:translateY(-10px) scale(1.01);
}

/* ================= NAV ================= */

.nav{
box-shadow:0 10px 30px rgba(0,0,0,.35);
backdrop-filter:blur(8px);
}

/* ================= HERO TEXT ================= */

.hero h1{
background:linear-gradient(90deg,#ffffff,#94a3b8);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* ================= SECTION TRANSITION ================= */

.section{
transition:background .3s ease;
}

/* ================= MICRO POLISH ================= */

.card-title{
letter-spacing:-0.01em;
}

.card-desc{
opacity:.95;
}

/* ================= MOBILE ================= */

@media (max-width:768px){

.hero-buttons{
gap:10px;
}

.btn{
padding:10px 18px;
font-size:13px;
}

}


/* ================= MOBILE NAV (FINAL FIX) ================= */

.nav-toggle{
display:none;
flex-direction:column;
gap:4px;
cursor:pointer;
}

.nav-toggle span{
width:22px;
height:2px;
background:white;
display:block;
}

/* MOBILE */
@media (max-width:768px){

/* SHOW HAMBURGER */
.nav-toggle{
display:flex;
}

/* FIX NAV LAYOUT */
.nav-inner{
flex-direction:row;
justify-content:space-between;
}

/* HIDE MENU DEFAULT */
.nav-links{
position:absolute;
top:100%;
left:0;
width:100%;
background:#020617;
flex-direction:column;
align-items:center;
gap:16px;
padding:20px 0;
display:none;
border-bottom:1px solid #1e293b;
z-index:999;
}

.nav-links{
transition:all .25s ease;
}

/* SHOW WHEN ACTIVE */
.nav-links.active{
display:flex;
}

}



/* ================= SCROLL REVEAL ================= */

.reveal{
opacity:0;
transform:translateY(40px);
transition:all .7s cubic-bezier(.2,.8,.2,1);
}

.reveal.visible{
opacity:1;
transform:translateY(0);
}

/* ================= DELAY VARIANTS ================= */

.reveal.delay-1{ transition-delay:.1s; }
.reveal.delay-2{ transition-delay:.2s; }
.reveal.delay-3{ transition-delay:.3s; }

/* ================= HERO ENHANCEMENT ================= */

.hero h1{
animation:fadeUp .8s ease forwards;
}

.hero p{
animation:fadeUp .8s ease .15s forwards;
opacity:0;
}

.hero-buttons{
animation:fadeUp .8s ease .3s forwards;
opacity:0;
}

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