/* =========================
VANTA PREMIUM DESIGN SYSTEM
========================= */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');



*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

background:#050505;

color:white;

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

overflow-x:hidden;

}






/* BACKGROUND */

body::before{

content:"";

position:fixed;

inset:-300px;


background:

radial-gradient(
circle at 50% 0%,
rgba(43,127,255,.22),
transparent 35%
),


radial-gradient(
circle at 80% 60%,
rgba(120,40,255,.12),
transparent 30%
);


z-index:-1;

}







/* =========================
NAVBAR
========================= */


.navbar{

position:fixed;

top:0;

left:0;

width:100%;


height:90px;


display:flex;

align-items:center;

justify-content:space-between;


padding:0 8%;


z-index:1000;


transition:.4s;

}



.logo{

font-size:34px;

font-weight:800;

letter-spacing:-3px;


background:

linear-gradient(
90deg,
white,
#2b7fff
);


-webkit-background-clip:text;

color:transparent;

}



.nav-links{

display:flex;

gap:45px;

}



.nav-links a{

text-decoration:none;

color:#888;

font-size:15px;

transition:.3s;

}



.nav-links a:hover{

color:white;

}





.nav-button{

background:white;

color:black;

padding:13px 25px;

border-radius:50px;

text-decoration:none;

font-weight:600;

transition:.3s;

}



.nav-button:hover{

transform:translateY(-3px);

}









/* =========================
HERO
========================= */


.hero{

height:100vh;

min-height:800px;


padding:0 8%;


display:flex;

align-items:center;


position:relative;

}



.hero-content{

max-width:850px;

z-index:2;

}



.badge{

display:inline-block;

padding:10px 20px;


border:

1px solid rgba(255,255,255,.15);


border-radius:50px;


font-size:12px;


letter-spacing:2px;


color:#aaa;


margin-bottom:35px;

}



.hero h1{

font-size:

clamp(60px,8vw,115px);


line-height:.9;


letter-spacing:-7px;


font-weight:800;

}



.hero h1 span{


background:

linear-gradient(
90deg,
#fff,
#2b7fff,
#00d9ff
);


-webkit-background-clip:text;


color:transparent;

}



.hero p{

margin-top:35px;


font-size:20px;


line-height:1.7;


color:#999;


max-width:650px;

}




.hero-buttons{

display:flex;

gap:20px;

margin-top:45px;


}



.button{

padding:17px 35px;

border-radius:50px;


border:none;


font-weight:600;


font-size:15px;


cursor:pointer;


display:inline-flex;


justify-content:center;


align-items:center;


text-decoration:none;


transition:.4s;


}



.button:hover{

transform:translateY(-5px);

}



.primary{

background:#2b7fff;

color:white;

}



.secondary{

border:

1px solid rgba(255,255,255,.2);


color:white;

}







.hero-object{

position:absolute;


right:10%;


width:480px;


height:480px;

}




.glow{


width:100%;

height:100%;


background:

linear-gradient(
135deg,
#2b7fff,
#8b2cff
);



clip-path:

polygon(
50% 0%,
100% 30%,
80% 100%,
20% 90%,
0% 30%
);



filter:blur(25px);



animation:

float 8s infinite ease-in-out;

}



@keyframes float{


50%{

transform:translateY(-40px);

}


}









/* =========================
TRUST
========================= */


.trust{


display:flex;


justify-content:center;


gap:120px;


padding:80px 8%;


border-top:

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


border-bottom:

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

}



.trust h3{

font-size:45px;

}



.trust p{

color:#777;

}









/* =========================
SECTIONS
========================= */


section{

padding:140px 8%;

}



section h2{

font-size:

clamp(40px,5vw,70px);


letter-spacing:-4px;


margin-bottom:60px;

}



.section-text{

color:#888;

font-size:18px;

margin-top:-35px;

margin-bottom:60px;

}









/* =========================
CARDS
========================= */


.cards{


display:grid;


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


gap:30px;


}



.card{


padding:45px;


background:

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



border:

1px solid rgba(255,255,255,.12);


border-radius:25px;


transition:.5s;


backdrop-filter:blur(20px);

}



.card:hover{

transform:translateY(-10px);

border-color:#2b7fff;

}



.card h3{

font-size:25px;

margin-bottom:20px;

}



.card p{

color:#999;

line-height:1.7;

}










/* =========================
DEMOS
========================= */


.demo-grid{


display:grid;


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


gap:35px;


}




.demo-card{

cursor:pointer;

transition:.5s;

}



.demo-card:hover{

transform:translateY(-15px);

}





.browser{


height:330px;


background:#111;


border:

1px solid rgba(255,255,255,.15);


border-radius:25px;


overflow:hidden;


}



.browser-top{


height:40px;


background:#181818;


}



.preview{


height:290px;


display:flex;


align-items:center;


justify-content:center;


text-align:center;


font-size:24px;


font-weight:700;


background:

linear-gradient(
135deg,
#111,
#222
);


}




.demo-card h3{

margin-top:25px;

font-size:25px;

}



.demo-card p{

color:#777;

}




.demo-card button{

margin-top:15px;


background:none;


border:none;


color:#2b7fff;


font-size:16px;


cursor:pointer;

}









/* =========================
PRICING
========================= */


.pricing-grid{


display:grid;


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


gap:30px;


}



.price-card{


padding:45px;


border-radius:25px;


background:

rgba(255,255,255,.05);


border:

1px solid rgba(255,255,255,.12);


}



.featured{


border-color:#2b7fff;


transform:scale(1.05);

}



.price-card h1{

font-size:60px;

margin:25px 0;

}



.price-card p{

color:#888;

}



.price-card li{

list-style:none;

margin:18px 0;

color:#ccc;

}









/* =========================
TEMPLATE CTA
========================= */


.template{


text-align:center;


padding:120px 8%;


background:

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


}



.template p{

max-width:650px;


margin:0 auto 40px;


color:#999;


font-size:20px;

}









/* =========================
FAQ
========================= */


.faq{

display:flex;

flex-direction:column;

gap:25px;

}



.faq div{


padding:35px;


background:

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


border-radius:20px;


border:

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


}



.faq p{

color:#999;

margin-top:15px;

}









/* =========================
CONTACT
========================= */


form{


max-width:650px;


display:flex;


flex-direction:column;


gap:20px;


}



input,
textarea{


background:#111;


border:

1px solid rgba(255,255,255,.15);



padding:18px;


border-radius:15px;


color:white;


font-size:16px;


font-family:inherit;


}



textarea{

height:160px;

resize:none;

}









/* =========================
DEMO VIEWER
========================= */


.demo-overlay{


position:fixed;


inset:0;


background:

rgba(0,0,0,.85);


backdrop-filter:blur(25px);


display:flex;


justify-content:center;


align-items:center;


opacity:0;


visibility:hidden;


transition:.5s;


z-index:9999;


}



.demo-overlay.active{


opacity:1;


visibility:visible;


}



.demo-window{


width:92%;


height:88%;


transform:scale(.75) translateY(60px);


opacity:0;


transition:.7s cubic-bezier(.16,1,.3,1);


}



.demo-overlay.active .demo-window{


transform:scale(1) translateY(0);


opacity:1;


}




.close-demo{


position:absolute;


top:30px;


right:40px;


background:white;


color:black;


border:none;


width:45px;


height:45px;


border-radius:50%;


cursor:pointer;


font-size:20px;


}




.demo-browser{


height:100%;


background:white;


border-radius:30px;


overflow:hidden;


}



.demo-bar{

height:45px;

background:#eee;

padding:15px;

}




.demo-content{

height:calc(100% - 45px);

overflow-y:auto;

}









/* =========================
DEMO SITES
========================= */


.demo-page{

color:#111;

}



.demo-page section{

padding:100px 8%;

}



.demo-hero{

min-height:650px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}



.demo-hero h1{

font-size:80px;

letter-spacing:-5px;

}



.demo-services{

display:grid;

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

gap:30px;

}



.demo-services div{

padding:35px;

background:#eee;

border-radius:25px;

}



.demo-contact{

text-align:center;

}



.demo-page button{

padding:15px 35px;

border-radius:50px;

border:none;

background:black;

color:white;

}









/* =========================
MOBILE
========================= */


@media(max-width:900px){


.nav-links{

display:none;

}


.hero-object{

display:none;

}


.cards,
.demo-grid,
.pricing-grid,
.demo-services{

grid-template-columns:1fr;

}



.trust{

flex-wrap:wrap;

gap:40px;

}



.featured{

transform:none;

}



.hero h1{

letter-spacing:-3px;

}



}

/* =========================
VANTA DEMO WINDOW SYSTEM
========================= */


.demo-overlay{

position:fixed;

inset:0;

background:
rgba(0,0,0,.75);

backdrop-filter:
blur(15px);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

pointer-events:none;

transition:.5s;

z-index:9999;

}



.demo-overlay.active{

opacity:1;

pointer-events:auto;

}





/* =========================
WINDOW
========================= */


.demo-window{

position:relative;

width:90vw;

height:90vh;

background:#050505;

border-radius:28px;

overflow:hidden;

box-shadow:

0 50px 120px rgba(0,0,0,.8);

transform:

scale(.92)
translateY(30px);

transition:.5s;


}



.demo-overlay.active .demo-window{

transform:

scale(1)
translateY(0);

}





/* =========================
APPLE CONTROLS
========================= */


.window-controls{

position:absolute;

top:18px;

left:20px;

display:flex;

gap:10px;

z-index:10000;

}



.window-btn{

width:15px;

height:15px;

border-radius:50%;

border:none;

cursor:pointer;

transition:.2s;

}



.window-btn:hover{

transform:scale(1.15);

}



.window-btn.close{

background:#ff5f57;

box-shadow:
0 0 10px rgba(255,95,87,.5);

}



.window-btn.minimize{

background:#febc2e;

box-shadow:
0 0 10px rgba(254,188,46,.5);

}



.window-btn.fullscreen{

background:#28c840;

box-shadow:
0 0 10px rgba(40,200,64,.5);

}





/* =========================
BROWSER AREA
========================= */


.demo-browser{

height:100%;

overflow:hidden;

padding-top:55px;

}



.demo-content{

height:100%;

overflow-y:auto;

}





/* =========================
FULLSCREEN
========================= */


.demo-window.fullscreen{

width:100vw;

height:100vh;

border-radius:0;

}





/* =========================
MINIMISE
========================= */


.demo-window.minimized{

transform:

scale(.1)

translateY(600px);

opacity:0;

}





/* =========================
SMOOTH SCROLL
========================= */


.demo-content{

scroll-behavior:smooth;

}




/* =========================
DEMO BUTTONS
========================= */


.demo-content button{

cursor:pointer;

transition:.3s;

}



.demo-content button:hover{

transform:translateY(-3px);

}




/* =========================
MOBILE
========================= */


@media(max-width:900px){


.demo-window{

width:100vw;

height:100vh;

border-radius:0;

}


}