:root{
--bg:#040b15;
--panel:rgba(255,255,255,.08);
--line:rgba(255,255,255,.12);
--text:#f7f9fc;
--muted:#a9bddc;
--blue:#58b9ff;
--cyan:#73ffe0;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:Inter,system-ui,sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}
.bg{
position:fixed;
inset:0;
background:
radial-gradient(circle at 15% 10%,rgba(88,185,255,.22),transparent 35%),
radial-gradient(circle at 85% 20%,rgba(115,255,224,.12),transparent 35%),
linear-gradient(180deg,#071423,#02070d);
z-index:-2;
}
.bg:after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:70px 70px;
mask-image:linear-gradient(#000,transparent);
}
.nav{
position:sticky;
top:0;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 6vw;
backdrop-filter:blur(20px);
background:rgba(4,11,21,.45);
border-bottom:1px solid rgba(255,255,255,.05);
z-index:10;
}
.logo{height:64px;border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.45)}
nav{display:flex;gap:28px}
nav a{text-decoration:none;color:var(--muted)}
.ctaTop{
padding:12px 18px;
border-radius:14px;
text-decoration:none;
font-weight:700;
background:linear-gradient(135deg,var(--blue),var(--cyan));
color:#04111c;
}
.hero{
display:grid;
grid-template-columns:1.1fr .9fr;
align-items:center;
gap:40px;
padding:6vw;
min-height:92vh;
}
.pill{
display:inline-block;
padding:8px 14px;
border-radius:999px;
border:1px solid var(--line);
background:#ffffff0a;
}
h1{
font-size:clamp(54px,8vw,96px);
line-height:.92;
margin:18px 0;
letter-spacing:-.05em;
}
p{color:var(--muted);font-size:1.05rem}
.buttons{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.primary,.secondary{
padding:16px 24px;
border-radius:16px;
font-weight:700;
text-decoration:none;
transition:.3s;
}
.primary{
background:linear-gradient(135deg,var(--blue),var(--cyan));
color:#04111c;
box-shadow:0 0 35px rgba(88,185,255,.35);
}
.secondary{
border:1px solid var(--line);
background:#ffffff08;
color:white;
}
.primary:hover,.secondary:hover{transform:translateY(-4px)}
.heroVisual{
position:relative;
display:grid;
place-items:center;
height:560px;
}
#globe{
position:absolute;
inset:0;
}
.floatingLogo{
position:absolute;
width:240px;
border-radius:26px;
box-shadow:0 25px 60px rgba(0,0,0,.45);
animation:float 7s ease-in-out infinite;
}
.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
padding:0 6vw 5vw;
}
.stats div{
background:var(--panel);
border:1px solid var(--line);
padding:22px;
border-radius:20px;
text-align:center;
backdrop-filter:blur(16px);
}
.stats span{
font-size:30px;
font-weight:800;
background:linear-gradient(135deg,var(--cyan),var(--blue));
-webkit-background-clip:text;
color:transparent;
}
.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
padding:0 6vw 7vw;
}
.card{
background:var(--panel);
border:1px solid var(--line);
padding:28px;
border-radius:24px;
transition:.35s;
backdrop-filter:blur(18px);
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 22px 60px rgba(88,185,255,.18);
}
.feature{
display:grid;
grid-template-columns:1fr .9fr;
gap:28px;
align-items:center;
padding:0 6vw 7vw;
}
.featureLogo{
width:100%;
max-width:420px;
justify-self:center;
border-radius:24px;
box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.timeline{
display:grid;
gap:18px;
margin-top:28px;
}
.timeline div{
display:flex;
align-items:center;
gap:16px;
}
.timeline b{
width:46px;
height:46px;
display:grid;
place-items:center;
border-radius:50%;
background:linear-gradient(135deg,var(--blue),var(--cyan));
color:#04111c;
}
.quote{
padding:4vw 12vw;
text-align:center;
}
blockquote{
font-size:clamp(30px,4vw,52px);
line-height:1.2;
margin:0;
font-weight:700;
}
.contact{
padding:3vw 6vw 8vw;
text-align:center;
}
.contactGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin:30px 0;
}
.contactGrid div{
background:var(--panel);
border:1px solid var(--line);
padding:22px;
border-radius:18px;
}
footer{
display:flex;
justify-content:space-between;
align-items:center;
padding:24px 6vw;
border-top:1px solid rgba(255,255,255,.08);
color:var(--muted);
}
.footLogo{
height:52px;
border-radius:14px;
}
.reveal{
opacity:0;
transform:translateY(24px);
transition:.9s;
}
.show{
opacity:1;
transform:none;
}
@keyframes float{
50%{transform:translateY(-12px)}
}
@media(max-width:900px){
nav,.ctaTop{display:none}
.hero,.cards,.feature,.stats,.contactGrid{grid-template-columns:1fr}
.heroVisual{height:360px}
.floatingLogo{width:170px}
footer{flex-direction:column;gap:16px;text-align:center}
}