:root {

--bg:#07090f;
--card:#101522;
--text:#f4f7ff;
--muted:#98a2b3;

--accent:#6d5dfc;
--accent2:#00e5ff;

}



* {

box-sizing:border-box;
margin:0;
padding:0;

}



html {

scroll-behavior:smooth;

}



body {

font-family:"Inter", sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.6;

overflow-x:hidden;

}



.container {

width:min(1120px,90%);

margin:auto;

}



/* HEADER */


.header {

padding:30px 0;

}



.nav {

display:flex;

justify-content:space-between;

align-items:center;

}



.logo {

font-size:24px;

font-weight:800;

letter-spacing:-1px;

}



.logo span {

color:var(--accent2);

}



nav {

display:none;

}



nav a {

color:white;

text-decoration:none;

font-weight:500;

margin-left:35px;

transition:.3s;

}



nav a:hover {

color:var(--accent2);

}



/* HERO */


.hero {

padding:80px 0 120px;

}



.hero-grid {

display:grid;

gap:60px;

align-items:center;

}



.hero h1 {

font-size:clamp(52px,8vw,92px);

line-height:.95;

letter-spacing:-4px;

font-weight:800;

}



.hero h1 span {

background:linear-gradient(
90deg,
var(--accent),
var(--accent2)
);

-webkit-background-clip:text;

color:transparent;

}



.hero p {

margin:35px 0;

max-width:520px;

font-size:19px;

color:var(--muted);

}



.btn {

display:inline-flex;

align-items:center;

gap:12px;

padding:17px 32px;

border-radius:50px;

border:none;

cursor:pointer;

font-size:16px;

font-weight:700;

color:white;

background:linear-gradient(
90deg,
var(--accent),
var(--accent2)
);

transition:.35s;

text-decoration:none;

}



.btn:hover {

transform:translateY(-5px);

box-shadow:
0 20px 50px rgba(109,93,252,.35);

}



.btn svg {

width:20px;

}



/* HERO PREVIEW */


.hero-image {

position:relative;

}



.glow {

position:absolute;

inset:20px;

background:
linear-gradient(
45deg,
var(--accent),
transparent
);

filter:blur(90px);

opacity:.45;

}



.website-preview {

position:relative;

height:420px;

background:
linear-gradient(
145deg,
#151a30,
#090c14
);

border-radius:30px;

overflow:hidden;

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

box-shadow:
0 40px 90px rgba(0,0,0,.4);

}



.browser-bar {

height:45px;

background:#111625;

display:flex;

align-items:center;

gap:8px;

padding-left:22px;

}



.browser-bar span {

width:11px;

height:11px;

border-radius:50%;

background:var(--accent2);

}



.preview-content {

padding:45px;

}



.preview-title {

font-size:34px;

font-weight:800;

margin-bottom:35px;

background:
linear-gradient(
90deg,
var(--accent),
var(--accent2)
);

-webkit-background-clip:text;

color:transparent;

}



.preview-line {

height:14px;

width:85%;

border-radius:20px;

background:#ffffff15;

margin-bottom:15px;

}



.preview-line.short {

width:60%;

}



.preview-cards {

display:flex;

gap:15px;

margin-top:60px;

}



.preview-cards div {

height:110px;

flex:1;

border-radius:18px;

background:#ffffff08;

border:1px solid #ffffff10;

}



/* SECTIONS */


section {

padding:100px 0;

}



.section-title {

text-align:center;

margin-bottom:60px;

}



.section-title h2 {

font-size:44px;

letter-spacing:-1px;

}



.section-title p {

color:var(--muted);

margin-top:10px;

}





/* SERVICES */


.cards {

display:grid;

gap:25px;

}



.card {

background:var(--card);

padding:35px;

border-radius:25px;

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

transition:.35s;

}



.card:hover {

transform:translateY(-10px);

border-color:var(--accent);

}



.card svg {

width:42px;

height:42px;

color:var(--accent2);

margin-bottom:25px;

}



.card h3 {

font-size:22px;

margin-bottom:15px;

}



.card p {

color:var(--muted);

}



/* REVIEWS */


.review-grid {

display:grid;

gap:25px;

}



.review {

background:#0d111c;

padding:35px;

border-radius:25px;

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

}



.review p {

font-size:18px;

}



.review strong {

display:block;

margin-top:25px;

color:var(--accent2);

}




.brands {

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:45px;

margin-top:70px;

font-size:22px;

font-weight:700;

color:#687386;

}





/* CTA */


.cta-box {

background:
linear-gradient(
135deg,
#151b30,
#090c14
);

padding:60px 35px;

border-radius:35px;

text-align:center;

}



.cta-box h2 {

font-size:42px;

}



.cta-box p {

color:var(--muted);

margin:15px 0 35px;

}



form {

display:grid;

gap:15px;

}



input {

padding:18px;

border-radius:15px;

border:none;

font-size:16px;

outline:none;

}





/* FOOTER */


footer {

padding:45px 0;

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

}



.footer {

display:flex;

flex-direction:column;

align-items:center;

gap:25px;

text-align:center;

}



.footer-links a {

color:var(--muted);

text-decoration:none;

margin:0 12px;

transition:.3s;

}



.footer-links a:hover {

color:white;

}





/* ANIMATION */


.reveal {

opacity:0;

transform:translateY(40px);

transition:1s;

}



.reveal.active {

opacity:1;

transform:none;

}





/* RESPONSIVE */


@media(min-width:768px){


nav {

display:block;

}


.hero-grid {

grid-template-columns:1fr 1fr;

}



.cards {

grid-template-columns:repeat(3,1fr);

}



.review-grid {

grid-template-columns:repeat(3,1fr);

}



form {

grid-template-columns:1fr 1fr auto;

}



.footer {

flex-direction:row;

justify-content:space-between;

text-align:left;

}


}