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


html{
scroll-behavior:smooth;
}


body{

font-family:'Montserrat',sans-serif;

background:#050816;

color:#ffffff;

overflow-x:hidden;

}



a{

text-decoration:none;

color:inherit;

}



.main{

position:relative;

z-index:2;

}





/* Grain Effect */

.grain{

position:fixed;

inset:0;

opacity:.08;

pointer-events:none;

z-index:10;

}





/* Background Atmosphere */


.atmosphere{

position:fixed;

width:700px;

height:700px;

background:

radial-gradient(
circle,
rgba(37,99,235,.35),
transparent 65%
);


top:-200px;

left:50%;

transform:translateX(-50%);

filter:blur(50px);

z-index:-1;

}





/* Navigation */


.top-nav{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:min(1200px,90%);

height:75px;

display:flex;

align-items:center;

justify-content:space-between;


padding:0 30px;


background:

rgba(15,23,42,.65);


border:

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


backdrop-filter:blur(20px);


border-radius:20px;


z-index:100;


}



.nav-brand{

font-size:26px;

font-weight:800;

letter-spacing:-1px;

}
.nav-brand.logo{

display:flex;

align-items:center;

gap:12px;

}



.nav-brand.logo svg{

width:42px;

height:42px;

fill:none;

stroke:#facc15;

stroke-width:5;

}



.nav-brand.logo span{

color:#facc15;

}

.nav-brand span{

color:#facc15;

}



.nav-links{

display:flex;

gap:35px;

list-style:none;

}


.nav-links a{

font-size:14px;

color:#cbd5e1;

transition:.3s;

}



.nav-links a:hover{

color:#fff;

}




.nav-cta{

background:#2563eb;

padding:14px 25px;

border-radius:50px;

font-weight:600;

font-size:14px;

transition:.3s;

}



.nav-cta:hover{

transform:translateY(-3px);

background:#1d4ed8;

}




.nav-toggle{

display:none;

background:none;

border:0;

cursor:pointer;

}



.toggle-bar{

display:block;

width:28px;

height:2px;

background:white;

margin:7px;

}





/* Mobile Menu */


.mobile-menu{

position:fixed;

top:100px;

left:50%;

transform:translateX(-50%);

width:90%;

background:#0f172a;

border-radius:20px;

padding:30px;

display:none;

z-index:99;

}



.mobile-menu.active{

display:block;

}



.mobile-menu-links{

display:flex;

flex-direction:column;

gap:20px;

}



.mobile-menu-links a{

color:#cbd5e1;

font-size:18px;

}





/* Hero */


.hero{

min-height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:180px 20px 100px;

position:relative;

}





.hero-grid{

position:absolute;

inset:0;


background-image:

linear-gradient(
rgba(255,255,255,.04) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.04) 1px,
transparent 1px
);


background-size:60px 60px;

mask-image:radial-gradient(
circle,
black,
transparent 70%
);

}





.hero-badge{

display:flex;

align-items:center;

gap:10px;

padding:10px 20px;

border-radius:50px;

background:

rgba(255,255,255,.06);

border:

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

margin-bottom:35px;

font-size:14px;

}





.hero-badge-dot{

width:8px;

height:8px;

border-radius:50%;

background:#22c55e;

box-shadow:

0 0 15px #22c55e;

}





.hero h1{

font-size:

clamp(45px,7vw,90px);

line-height:1.05;

font-weight:800;

letter-spacing:-3px;

max-width:1000px;

}



.hero h1 em{

font-style:normal;

background:

linear-gradient(
90deg,
#2563eb,
#facc15
);


-webkit-background-clip:text;

color:transparent;

}



.hero-sub{

max-width:650px;

margin:30px auto;

font-size:18px;

line-height:1.8;

color:#94a3b8;

}




.hero-ctas{

display:flex;

gap:20px;

margin-top:30px;

}



.btn-primary,
.btn-secondary{

padding:16px 35px;

border-radius:50px;

font-weight:700;

transition:.3s;

}



.btn-primary{

background:#2563eb;

}



.btn-primary:hover{

transform:translateY(-4px);

}



.btn-secondary{

border:

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

background:

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

}



.btn-secondary:hover{

background:white;

color:#050816;

}

/* Hero Metrics */


.hero-metrics{

display:grid;

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

gap:20px;

margin-top:80px;

width:min(900px,100%);

}



.metric{

padding:25px;

background:

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

border:

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

border-radius:20px;

}



.metric-value{

font-size:32px;

font-weight:800;

color:#fff;

}



.metric-label{

margin-top:8px;

font-size:13px;

color:#94a3b8;

}





/* Logo Ticker */


.logo-ticker{

max-width:1200px;

margin:0 auto;

padding:30px;

display:flex;

align-items:center;

gap:30px;

overflow:hidden;

border-top:

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

border-bottom:

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

}



.logo-ticker-label{

color:#94a3b8;

font-size:14px;

white-space:nowrap;

}



.ticker-track{

display:flex;

align-items:center;

gap:20px;

white-space:nowrap;

animation:

ticker 20s linear infinite;

}



.ticker-item{

font-weight:600;

color:#e2e8f0;

}



.ticker-dot{

width:5px;

height:5px;

border-radius:50%;

background:#facc15;

}



@keyframes ticker{

from{

transform:translateX(0);

}

to{

transform:translateX(-50%);

}

}





/* Sections */


.section{

max-width:1200px;

margin:0 auto;

padding:120px 20px;

}



.dark-section{

max-width:none;

background:

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

}



.section-header{

text-align:center;

max-width:750px;

margin:0 auto 70px;

}



.section-tag{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:

rgba(37,99,235,.15);

color:#60a5fa;

font-size:13px;

margin-bottom:20px;

}



.section-header h2{

font-size:

clamp(35px,5vw,60px);

line-height:1.1;

letter-spacing:-2px;

}



.section-header p{

margin-top:20px;

color:#94a3b8;

line-height:1.8;

}





/* Features */


.features-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:25px;

}



.feature-card{

padding:35px;

background:

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

border:

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

border-radius:25px;

transition:.4s;

}



.feature-card:hover{

transform:translateY(-10px);

border-color:#2563eb;

}



.feature-icon{

font-size:40px;

margin-bottom:25px;

}



.feature-card h3{

font-size:22px;

margin-bottom:15px;

}



.feature-card p{

color:#94a3b8;

line-height:1.8;

font-size:15px;

}





/* Automation */


.automation-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:25px;

}



.automation-box{

padding:40px;

background:

rgba(15,23,42,.7);

border-radius:25px;

border:

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

}



.automation-number{

font-size:45px;

font-weight:800;

color:#facc15;

margin-bottom:25px;

}



.automation-box h3{

font-size:24px;

margin-bottom:15px;

}



.automation-box p{

color:#94a3b8;

line-height:1.8;

}





/* API Section */


.api-container{

display:grid;

grid-template-columns:1.3fr .7fr;

gap:40px;

align-items:center;

}



.api-window{

background:#020617;

border-radius:25px;

overflow:hidden;

border:

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

}



.api-header{

height:45px;

display:flex;

align-items:center;

gap:8px;

padding:0 20px;

background:#111827;

}



.api-header span{

width:12px;

height:12px;

border-radius:50%;

background:#64748b;

}



.api-code{

padding:35px;

}



.api-code pre{

color:#a7f3d0;

font-family:monospace;

font-size:15px;

line-height:1.8;

overflow:auto;

}



.api-info{

display:flex;

flex-direction:column;

gap:20px;

}



.api-item{

padding:25px;

background:

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

border-radius:20px;

}



.api-item h3{

margin-bottom:10px;

}



.api-item p{

color:#94a3b8;

}





/* Pricing */


.pricing-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:25px;

}



.price-card{

padding:40px;

background:

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

border:

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

border-radius:25px;

position:relative;

}



.price-card.featured{

border-color:#2563eb;

transform:translateY(-15px);

}



.popular{

position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);

background:#facc15;

color:#020617;

padding:8px 20px;

border-radius:50px;

font-size:12px;

font-weight:800;

}



.price-card h3{

font-size:25px;

}



.price{

font-size:55px;

font-weight:800;

margin:25px 0;

}



.price span{

font-size:15px;

color:#94a3b8;

}



.price-card ul{

list-style:none;

color:#cbd5e1;

line-height:2.5;

}



.price-btn{

display:block;

text-align:center;

margin-top:30px;

padding:15px;

background:#2563eb;

border-radius:50px;

font-weight:700;

}

/* FAQ */


.faq-container{

max-width:850px;

margin:auto;

}



.faq-item{

border-bottom:

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

}



.faq-question{

width:100%;

background:none;

border:0;

color:white;

padding:25px 0;

display:flex;

justify-content:space-between;

align-items:center;

font-size:18px;

font-weight:600;

cursor:pointer;

}



.faq-question span{

font-size:30px;

color:#facc15;

}



.faq-answer{

max-height:0;

overflow:hidden;

transition:.4s;

}



.faq-answer p{

color:#94a3b8;

line-height:1.8;

padding-bottom:25px;

}



.faq-item.open .faq-answer{

max-height:200px;

}





/* CTA */


.cta-section{

max-width:1200px;

margin:80px auto;

padding:0 20px;

}



.cta-box{

text-align:center;

padding:80px 30px;

border-radius:35px;


background:

linear-gradient(
135deg,
rgba(37,99,235,.25),
rgba(250,204,21,.15)
);


border:

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

}



.cta-box h2{

font-size:

clamp(35px,5vw,60px);

line-height:1.1;

}



.cta-box p{

margin:25px 0 35px;

color:#cbd5e1;

font-size:18px;

}





/* Footer */


.footer{

max-width:1200px;

margin:auto;

padding:70px 20px 30px;

display:grid;

grid-template-columns:

1fr 2fr;

gap:50px;

border-top:

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

}



.footer-brand p{

margin-top:20px;

color:#94a3b8;

line-height:1.8;

}



.footer-links{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}



.footer-links h4{

margin-bottom:20px;

}



.footer-links a{

display:block;

color:#94a3b8;

margin-bottom:12px;

font-size:14px;

transition:.3s;

}



.footer-links a:hover{

color:white;

}



.footer-bottom{

grid-column:1/-1;

text-align:center;

padding-top:30px;

border-top:

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

color:#64748b;

font-size:14px;

}





/* Reveal Animation */


.reveal{

opacity:0;

transform:translateY(40px);

transition:

.8s ease;

}



.reveal.show{

opacity:1;

transform:translateY(0);

}





/* Responsive */


@media(max-width:1000px){


.nav-links{

display:none;

}


.nav-cta{

display:none;

}


.nav-toggle{

display:block;

}



.hero-metrics{

grid-template-columns:

repeat(2,1fr);

}



.features-grid{

grid-template-columns:

repeat(2,1fr);

}



.automation-grid{

grid-template-columns:

1fr;

}



.api-container{

grid-template-columns:

1fr;

}



.pricing-grid{

grid-template-columns:

1fr;

}



.price-card.featured{

transform:none;

}



.footer{

grid-template-columns:

1fr;

}


}




@media(max-width:600px){


.top-nav{

height:65px;

padding:0 20px;

}



.nav-brand{

font-size:22px;

}



.hero{

padding-top:140px;

}



.hero h1{

letter-spacing:-1px;

}



.hero-sub{

font-size:16px;

}



.hero-ctas{

flex-direction:column;

width:100%;

}



.btn-primary,
.btn-secondary{

width:100%;

}



.hero-metrics{

grid-template-columns:

1fr;

}



.metric-value{

font-size:28px;

}



.logo-ticker{

flex-direction:column;

align-items:flex-start;

}



.features-grid{

grid-template-columns:

1fr;

}



.section{

padding:80px 20px;

}



.section-header h2{

font-size:36px;

}



.api-code{

padding:20px;

}



.api-code pre{

font-size:12px;

}



.footer-links{

grid-template-columns:

1fr;

}



.cta-box{

padding:50px 20px;

}


}
.signup-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:120px 20px;

}



.signup-card{

width:min(500px,100%);

padding:45px;

background:

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

border:

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

border-radius:30px;

text-align:center;

}



.signup-card h1{

font-size:42px;

margin:25px 0;

}



.signup-card p{

color:#94a3b8;

line-height:1.8;

}



.signup-card input,
.signup-card select{

width:100%;

padding:16px;

margin-top:15px;

border-radius:15px;

border:

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

background:#0f172a;

color:white;

}



.signup-card button{

width:100%;

margin-top:25px;

padding:16px;

border:0;

border-radius:50px;

background:#2563eb;

color:white;

font-weight:700;

cursor:pointer;

}



.api-result{

margin-top:30px;

padding:20px;

background:#020617;

border-radius:20px;

}



.api-result code{

display:block;

margin-top:15px;

color:#facc15;

font-size:18px;

word-break:break-all;

}