:root{

--bg:#070B14;
--card:#111827;

--primary:#5B7FFF;
--primary2:#7698ff;

--text:#fff;
--muted:#9ca3af;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Inter',sans-serif;
background:var(--bg);
color:#fff;
line-height:1.7;
overflow-x:hidden;
}

.container{
max-width:1200px;
margin:auto;
padding:0 24px;
}

.hero{

position:relative;
overflow:hidden;
padding-bottom:120px;
}

.grid-bg{

position:absolute;
inset:0;

background-image:
linear-gradient(rgba(91,127,255,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(91,127,255,.08) 1px, transparent 1px);

background-size:60px 60px;

transform:
perspective(1200px)
rotateX(75deg)
scale(2);

opacity:.4;
}

header{

display:flex;
justify-content:space-between;
align-items:center;

padding:30px 0;
position:relative;
z-index:2;
}

.logo{
font-size:24px;
font-weight:800;
}

nav{
display:flex;
gap:30px;
}

nav a{
text-decoration:none;
color:white;
}

.hero-content{

display:grid;
grid-template-columns:1fr 500px;

gap:80px;
align-items:center;

min-height:80vh;

position:relative;
z-index:2;
}

.badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:rgba(91,127,255,.15);

margin-bottom:25px;
}

h1{

font-size:68px;
line-height:1.05;

margin-bottom:25px;
}

.hero p{

font-size:20px;
color:var(--muted);

margin-bottom:35px;
}

.hero-buttons{

display:flex;
gap:15px;

margin-bottom:30px;
}

.btn-primary{

padding:16px 28px;

border-radius:14px;

background:
linear-gradient(
135deg,
var(--primary),
var(--primary2)
);

text-decoration:none;
color:white;
font-weight:600;
}

.btn-secondary{

padding:16px 28px;

border-radius:14px;

border:1px solid rgba(255,255,255,.1);

text-decoration:none;
color:white;
}

.hero-features{

display:flex;
flex-wrap:wrap;
gap:15px;
}

.hero-features div{

padding:10px 16px;

background:rgba(255,255,255,.04);

border-radius:12px;
}

.hero-right img{
width:100%;
}

section{
padding:100px 0;
}

h2{

font-size:44px;
margin-bottom:30px;
}

.content p{
color:var(--muted);
margin-bottom:20px;
}

.cards,
.devices-grid{

display:grid;

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

gap:20px;
}

.card,
.device-card{

padding:30px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.06);

border-radius:22px;
}

.device-card{

text-decoration:none;
color:white;

transition:.2s;
}

.device-card:hover{

border-color:var(--primary);
transform:translateY(-3px);
}

.trial-box{

padding:60px;

text-align:center;

border-radius:30px;

background:
linear-gradient(
135deg,
rgba(91,127,255,.12),
rgba(91,127,255,.04)
);
}

.faq-item{

padding:25px;

margin-bottom:15px;

background:rgba(255,255,255,.03);

border-radius:20px;
}

footer{

padding:50px 0;

text-align:center;

border-top:1px solid rgba(255,255,255,.06);

color:#7b8794;
}

@media(max-width:900px){

.hero-content{
grid-template-columns:1fr;
}

h1{
font-size:42px;
}

h2{
font-size:34px;
}

.hero-buttons{
flex-direction:column;
}

}