*{box-sizing:border-box}
:root{
--bg:#080b12;
--panel:#111827;
--text:#f8fafc;
--muted:#9ca3af;
--line:rgba(255,255,255,.08);
--accent:#7c3aed;
--accent2:#22d3ee;
}
body{
margin:0;
font-family:Inter,system-ui,sans-serif;
background:
radial-gradient(circle at top left,rgba(124,58,237,.22),transparent 35%),
radial-gradient(circle at top right,rgba(34,211,238,.16),transparent 30%),
var(--bg);
color:var(--text);
line-height:1.6;
}
.container{
width:min(1120px,calc(100% - 40px));
margin:0 auto;
}
.site-header{
position:sticky;
top:0;
background:rgba(8,11,18,.8);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--line);
}
.nav{
height:72px;
display:flex;
justify-content:space-between;
align-items:center;
}
.brand{
display:flex;
align-items:center;
gap:12px;
font-weight:700;
}
.brand-mark{
width:36px;
height:36px;
display:grid;
place-items:center;
border-radius:12px;
background:linear-gradient(135deg,var(--accent),var(--accent2));
}
nav{
display:flex;
gap:22px;
}
nav a{
color:var(--muted);
text-decoration:none;
}
.hero{
padding:100px 0 80px;
}
.hero-inner{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:56px;
align-items:center;
}
.eyebrow,.section-kicker{
color:var(--accent2);
font-size:13px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
}
h1{
font-size:clamp(44px,7vw,72px);
line-height:1;
letter-spacing:-.06em;
margin:0 0 24px;
}
h2{
font-size:clamp(30px,4vw,46px);
letter-spacing:-.04em;
}
.lead{
font-size:18px;
color:#cbd5e1;
max-width:680px;
}
.hero-actions{
display:flex;
gap:14px;
margin-top:30px;
}
.btn{
height:46px;
padding:0 22px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
text-decoration:none;
font-weight:700;
}
.primary{
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:#fff;
}
.secondary{
border:1px solid var(--line);
color:#fff;
}
.hero-card,.feature,.contact-card{
border:1px solid var(--line);
background:rgba(255,255,255,.04);
}
.hero-card{
border-radius:28px;
padding:34px;
position:relative;
overflow:hidden;
}
.card-glow{
position:absolute;
right:-60px;
bottom:-60px;
width:180px;
height:180px;
background:rgba(124,58,237,.35);
filter:blur(60px);
}
.section{
padding:88px 0;
border-top:1px solid var(--line);
}
.muted{
background:rgba(255,255,255,.03);
}
.two-col,.security{
display:grid;
grid-template-columns:1fr 1fr;
gap:56px;
}
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:34px;
}
.feature{
border-radius:22px;
padding:26px;
}
.security-list{
display:grid;
gap:14px;
}
.security-list div{
padding:18px 20px;
border-radius:16px;
background:var(--panel);
border:1px solid var(--line);
}
.contact-card{
border-radius:28px;
padding:38px;
}
.contact-info{
margin-top:18px;
padding:16px 18px;
border-radius:16px;
background:rgba(8,11,18,.5);
border:1px solid var(--line);
display:flex;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
}
.contact-info a{
color:var(--accent2);
text-decoration:none;
font-weight:700;
}
.site-footer{
padding:24px 0;
border-top:1px solid var(--line);
color:var(--muted);
}
.footer-inner{
display:flex;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
}
@media(max-width:820px){
.hero-inner,.two-col,.security,.grid{
grid-template-columns:1fr;
}
.nav{
height:auto;
padding:16px 0;
flex-direction:column;
align-items:flex-start;
gap:14px;
}
}