:root{

--bg:#061028;
--blue:#3B82F6;
--teal:#2DD4BF;
--card:rgba(255,255,255,0.05);
--border:rgba(255,255,255,0.08);

}

body{

font-family:'Inter',sans-serif;
background:var(--bg);
color:white;
margin:0;
-webkit-font-smoothing:antialiased;

}


/* WIDER LAYOUT */

.container{

max-width:1200px;
margin:auto;
padding:0 40px;

}


/* NAVBAR */

.nav{

position:sticky;
top:0;
z-index:100;

background:rgba(6,16,40,0.7);
backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,0.05);

}

.nav-inner{

display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;

}

.logo-wrap{

display:flex;
align-items:center;
gap:10px;

}

.logo-icon{

height:30px;

}

.logo-text{

font-family:'Space Grotesk',sans-serif;
font-weight:700;
letter-spacing:1px;

}

.logo-text span{

color:var(--teal);

}

.nav-right{

display:flex;
gap:26px;
align-items:center;

}

.nav-right a{

text-decoration:none;
color:white;
opacity:.9;
transition:opacity .25s ease;

}

.nav-right a:hover{

opacity:1;

}

.nav-cta{

background:linear-gradient(135deg,var(--blue),var(--teal));
padding:10px 18px;
border-radius:8px;

}


/* HERO */

.hero{

padding:180px 0 140px;
text-align:center;
position:relative;
overflow:hidden;

}

/* HERO LIGHTING LAYER */

.hero::after{

content:"";
position:absolute;

width:1200px;
height:600px;

left:50%;
top:40%;

transform:translateX(-50%);

background:radial-gradient(
ellipse at center,
rgba(59,130,246,0.12),
transparent 70%
);

pointer-events:none;

}

/* HERO DEPTH LAYER */

.hero::before{

content:"";
position:absolute;
inset:0;

background:linear-gradient(
to bottom,
transparent,
rgba(0,0,0,0.25)
);

pointer-events:none;

}

.hero-grid{

position:absolute;
inset:0;

background-image:

linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);

background-size:80px 80px;

opacity:.35;

pointer-events:none;

mask-image:radial-gradient(circle at center, black 40%, transparent 80%);

}


.hero-content{

max-width:920px;
margin:auto;
padding:0 20px;
position:relative;
z-index:2;

}

.hero h1{

font-family:'Space Grotesk',sans-serif;
font-size:72px;
line-height:1.08;

letter-spacing:-1.5px;

max-width:900px;
margin-left:auto;
margin-right:auto;
margin-bottom:24px;

}

.hero-tagline{

font-size:28px;
color:var(--teal);
margin-bottom:18px;
font-weight:600;
letter-spacing:-0.2px;

}

.hero-sub{

font-size:22px;
opacity:.85;
margin-bottom:44px;
max-width:760px;
margin-left:auto;
margin-right:auto;

}

.hero-cta{

background:linear-gradient(135deg,var(--blue),var(--teal));
padding:16px 28px;
border-radius:10px;
text-decoration:none;
color:white;
font-weight:600;
transition:all .25s ease;

}

.hero-cta:hover{

transform:translateY(-2px);
box-shadow:0 10px 30px rgba(59,130,246,0.35);

}
.white-text{

color:white;

font-weight:600;

}

/* ANIMATED GRADIENT MESH */

.mesh-gradient{

position:absolute;
width:900px;
height:900px;

background:

radial-gradient(circle at 30% 30%, #3B82F6, transparent 60%),
radial-gradient(circle at 70% 60%, #2DD4BF, transparent 60%);

filter:blur(120px);
opacity:.4;

animation:meshMove 18s infinite alternate;

}

@keyframes meshMove{

0%{transform:translate(-100px,-100px)}
100%{transform:translate(100px,60px)}

}


/* PROBLEMS */

.problems{

padding:150px 0;
text-align:center;

}

.problems h2{

font-family:'Space Grotesk',sans-serif;
font-size:36px;
margin-bottom:50px;

}

.problem-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;

}

.problem-card{

background:var(--card);
padding:32px 24px;
border-radius:14px;
border:1px solid var(--border);

display:flex;
align-items:center;
justify-content:center;
text-align:center;

font-size:18px;
font-weight:500;
line-height:1.4;

transition:all .35s ease;
position:relative;

}

.problem-card:hover{

transform:translateY(-6px);

border:1px solid rgba(45,212,191,0.7);

box-shadow:
0 0 0 1px rgba(45,212,191,0.25),
0 0 25px rgba(45,212,191,0.35),
0 0 60px rgba(45,212,191,0.15);

}


/* SERVICES */

.services{

padding:150px 0;

}

.services h2{

text-align:center;
font-family:'Space Grotesk',sans-serif;
font-size:38px;
margin-bottom:60px;

}

.services-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;

}

.service-card{

background:var(--card);
border:1px solid var(--border);
padding:40px;
border-radius:16px;

transition:all .35s ease;

animation:floatCard 6s ease-in-out infinite;

position:relative;

}

.service-card h3{

font-family:'Space Grotesk',sans-serif;
font-size:22px;
margin-bottom:14px;

}

.service-card p{

font-size:17px;
opacity:.85;
line-height:1.5;

}

@keyframes floatCard{

0%{transform:translateY(0px)}
50%{transform:translateY(-8px)}
100%{transform:translateY(0px)}

}

.service-card:hover{

transform:translateY(-10px) scale(1.02);

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

box-shadow:
0 0 0 1px rgba(59,130,246,0.25),
0 0 60px rgba(59,130,246,0.2);

}


/* PREMIUM HOVER SHINE */

.problem-card::before,
.service-card::before{

content:"";
position:absolute;
inset:0;
border-radius:inherit;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.06),
transparent
);

opacity:0;
transition:opacity .4s;

}

.problem-card:hover::before,
.service-card:hover::before{

opacity:1;

}


/* CTA */

.cta{

padding:140px 0;
text-align:center;

}

.cta h2{

font-family:'Space Grotesk',sans-serif;
font-size:42px;
margin-bottom:40px;

}

/* CTA BUTTON SPACING FIX */

.cta .hero-cta{
display:inline-block;
margin-top:10px;
}


/* FOOTER */

footer{

padding:40px 0;
border-top:1px solid rgba(255,255,255,0.06);
text-align:center;
opacity:.6;

}


/* MOBILE */

@media (max-width:900px){

.container{
padding:0 24px;
}

.hero{
padding:140px 0 100px;
}

.hero h1{
font-size:42px;
line-height:1.15;
}

.hero-tagline{
font-size:22px;
}

.hero-sub{
font-size:18px;
}

.problem-grid{
grid-template-columns:1fr;
gap:16px;
}

.services-grid{
grid-template-columns:1fr;
gap:22px;
}

.problem-card{
font-size:17px;
padding:26px;
}

.service-card{
padding:30px;
}

.cta{
padding:110px 0;
}

.cta h2{
font-size:32px;
}

}


/* reveal animations */

.hidden{
opacity:0;
transform:translateY(25px);
transition:all .7s ease;
}

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


/* navbar shadow */

.nav-shadow{
box-shadow:0 10px 30px rgba(0,0,0,0.35);
}