/* ===================================================
   Ziiraxx Speed Sales
   Main Stylesheet
=================================================== */

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

html{
scroll-behavior:smooth;
}

body{

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

background:#f7f9fd;

color:#1d2433;

overflow-x:hidden;

line-height:1.7;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:min(92%, 1280px);

margin:auto;

}

/* ===========================
HEADER
=========================== */

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

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

backdrop-filter:blur(18px);

border-bottom:1px solid #ececec;

}

.nav{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

font-size:clamp(1.25rem, 1.8vw + 0.8rem, 2.1rem);

font-weight:800;

letter-spacing:-1px;

color:#07162F;

display:inline-flex;

align-items:center;

}

.logo:hover{

color:#0D6EFD;

}

.logo span{

color:#0D6EFD;

}

nav ul{

display:flex;

align-items:center;

gap:40px;

}

.nav-links{

margin-left:auto;

}

nav a{

color:#333;

font-weight:600;

transition:.3s;

}

nav a:hover{

color:#0D6EFD;

}

.btn{

background:#0D6EFD;

color:white;

padding:16px 34px;

border-radius:14px;

font-weight:700;

display:inline-flex;

align-items:center;

gap:10px;

transition:.35s;

box-shadow:0 15px 35px rgba(13,110,253,.25);

}

.btn:hover{

transform:translateY(-5px);

box-shadow:0 25px 55px rgba(13,110,253,.35);

}

.menu-toggle{

display:none;

border:none;

background:transparent;

cursor:pointer;

padding:8px;

}

.menu-toggle span{

display:block;

width:24px;

height:2px;

background:#07162F;

margin:5px 0;

border-radius:999px;

transition:.3s;

}

.menu-toggle.active span:nth-child(1){

transform:translateY(7px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

opacity:0;

}

.menu-toggle.active span:nth-child(3){

transform:translateY(-7px) rotate(-45deg);

}

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

.hero{

padding-top:170px;

padding-bottom:120px;

}

.hero-grid{

display:grid;

grid-template-columns:1.05fr 1fr;

gap:80px;

align-items:center;

}

.phase{

display:inline-block;

padding:8px 20px;

border-radius:50px;

background:#dbe9ff;

color:#0D6EFD;

font-weight:700;

font-size:14px;

margin-bottom:22px;

}

.badge{

display:inline-block;

padding:10px 22px;

border-radius:50px;

background:#eef5ff;

font-weight:600;

margin-bottom:25px;

}

.hero h1{

font-size:clamp(2.2rem, 3.7vw + 1rem, 4.25rem);

line-height:1.05;

font-weight:800;

letter-spacing:-2px;

margin-bottom:25px;

}

.hero h1 span{

color:#0D6EFD;

display:block;

}

.hero p{

font-size:clamp(1rem, 0.8vw + 0.9rem, 1.2rem);

color:#666;

max-width:600px;

margin-bottom:35px;

}

.lead-form{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:25px;

}

.lead-form input{

flex:1;

padding:18px;

border:none;

background:white;

border-radius:14px;

font-size:16px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.lead-form button{

border:none;

cursor:pointer;

background:#0D6EFD;

color:white;

padding:18px 34px;

border-radius:14px;

font-size:16px;

font-weight:700;

display:flex;

align-items:center;

gap:10px;

}

.trust{

font-weight:600;

color:#666;

display:flex;

align-items:center;

gap:10px;

}

.trust i{

color:#00c853;

font-size:20px;

}
/* ===================================================
DASHBOARD
=================================================== */

.hero-right{
position:relative;
}

.dashboard{

width:100%;

height:650px;

background:white;

border-radius:30px;

display:flex;

overflow:hidden;

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

position:relative;

}

/* Sidebar */

.sidebar{

width:220px;

background:#07162F;

padding:35px 25px;

color:white;

display:flex;

flex-direction:column;

}

.brand{

font-size:24px;

font-weight:700;

margin-bottom:45px;

display:flex;

align-items:center;

gap:12px;

}

.brand i{

color:#4da3ff;

font-size:28px;

}

.sidebar ul{

display:flex;

flex-direction:column;

gap:18px;

}

.sidebar li{

padding:15px 18px;

border-radius:14px;

cursor:pointer;

transition:.35s;

font-weight:500;

}

.sidebar li:hover{

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

}

.sidebar li:first-child{

background:#0D6EFD;

}

/* Content */

.content{

flex:1;

padding:35px;

background:#f7f9fd;

}

/* Statistics */

.top-cards{

display:grid;

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

gap:22px;

margin-bottom:30px;

}

.card{

background:white;

padding:24px;

border-radius:22px;

box-shadow:
0 15px 35px rgba(0,0,0,.08);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

}

.card h4{

font-size:15px;

color:#777;

margin-bottom:10px;

}

.card h2{

font-size:34px;

font-weight:800;

color:#07162F;

}

/* Chart */

.chart{

height:340px;

background:white;

border-radius:24px;

padding:25px;

box-shadow:
0 15px 35px rgba(0,0,0,.08);

}

/* Floating Card */

.dashboard::after{

content:"+200% Sales";

position:absolute;

right:-35px;

top:70px;

background:#0D6EFD;

color:white;

padding:18px 26px;

border-radius:18px;

font-weight:700;

box-shadow:
0 20px 45px rgba(13,110,253,.35);

}

/* Decorative Circles */

.dashboard::before{

content:"";

position:absolute;

width:180px;

height:180px;

border-radius:50%;

background:rgba(13,110,253,.08);

bottom:-80px;

right:-80px;

}

/* ===========================
SECTION TITLE
=========================== */

.section-title{

text-align:center;

max-width:760px;

margin:auto;

margin-bottom:70px;

}

.section-title h2{

font-size:clamp(2rem, 2.5vw + 1rem, 3.25rem);

font-weight:800;

line-height:1.15;

margin-bottom:18px;

color:#07162F;

}

.section-title p{

font-size:18px;

color:#666;

}
/* ===================================================
FEATURES
=================================================== */

.features{

padding:120px 0;

background:#ffffff;

}

.feature-grid{

display:grid;

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

gap:30px;

}

.feature-card{

background:#fff;

padding:35px 28px;

min-width:0;

border-radius:24px;

text-align:center;

box-shadow:0 20px 45px rgba(0,0,0,.08);

transition:.35s;

border:1px solid #edf1f8;

position:relative;

overflow:hidden;

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 60px rgba(13,110,253,.18);

border-color:#0D6EFD;

}

.feature-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:#0D6EFD;

transform:scaleX(0);

transition:.35s;

}

.feature-card:hover::before{

transform:scaleX(1);

}

.icon{

width:82px;

height:82px;

margin:auto;

margin-bottom:22px;

background:#eef5ff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

}

.icon i{

font-size:34px;

color:#0D6EFD;

}

.feature-card h3{

font-size:22px;

font-weight:700;

margin-bottom:15px;

color:#07162F;

}

.feature-card p{

font-size:15px;

color:#666;

line-height:1.8;

}

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

.cta{

padding:110px 0;

background:#f7f9fd;

}

.cta-box{

background:linear-gradient(135deg,#07162F,#0D6EFD);

border-radius:30px;

padding:70px;

display:flex;

justify-content:space-between;

align-items:center;

color:white;

box-shadow:0 35px 70px rgba(7,22,47,.25);

}

.cta-left{

display:flex;

align-items:center;

gap:30px;

}

.rocket{

width:90px;

height:90px;

background:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

}

.rocket i{

font-size:40px;

color:#0D6EFD;

}

.cta h2{

font-size:42px;

font-weight:800;

margin-bottom:10px;

}

.cta h3{

font-size:28px;

color:#7fc2ff;

margin-bottom:15px;

}

.cta p{

font-size:18px;

opacity:.92;

max-width:550px;

}

.cta .btn{

background:white;

color:#0D6EFD;

font-size:18px;

padding:18px 36px;

}

.cta .btn:hover{

background:#eef5ff;

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

.pricing{

padding:120px 0;

background:#ffffff;

}

.pricing-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.price-card{

background:#fff;

padding:45px;

border-radius:28px;

box-shadow:0 20px 45px rgba(0,0,0,.08);

position:relative;

transition:.35s;

border:2px solid transparent;

}

.price-card:hover{

transform:translateY(-12px);

border-color:#0D6EFD;

box-shadow:0 35px 70px rgba(13,110,253,.18);

}

.price-card h3{

font-size:30px;

font-weight:700;

margin-bottom:25px;

color:#07162F;

}

.price{

font-size:58px;

font-weight:800;

color:#0D6EFD;

margin-bottom:35px;

}

.price span{

display:block;

font-size:18px;

color:#666;

margin-top:8px;

font-weight:500;

}

.price-card ul{

margin:35px 0;

}

.price-card li{

padding:14px 0;

border-bottom:1px solid #edf1f8;

font-size:17px;

color:#555;

}

.price-card .btn{

width:100%;

justify-content:center;

margin-top:25px;

}

.featured{

transform:scale(1.05);

border:2px solid #0D6EFD;

}

.popular{

position:absolute;

top:-18px;

left:50%;

transform:translateX(-50%);

background:#0D6EFD;

color:#fff;

padding:10px 24px;

border-radius:50px;

font-size:14px;

font-weight:700;

letter-spacing:.8px;

box-shadow:0 12px 30px rgba(13,110,253,.3);

}

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

.faq{

padding:120px 0;

background:#f7f9fd;

}

.faq-wrapper{

max-width:900px;

margin:auto;

}

.faq-item{

background:#fff;

margin-bottom:20px;

border-radius:18px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.faq-question{

width:100%;

padding:24px 30px;

background:#fff;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

font-size:20px;

font-weight:600;

cursor:pointer;

}

.faq-answer{

padding:0 30px 25px;

color:#666;

display:none;

line-height:1.8;

}

.faq-item.active .faq-answer{

display:block;

}

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

.contact{

padding:120px 0;

background:#fff;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}

.contact-form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,

.contact-form textarea{

padding:18px;

border:1px solid #e5e8ef;

border-radius:14px;

font-size:16px;

font-family:Poppins,sans-serif;

width:100%;

}

.contact-form textarea{

min-height:180px;

resize:vertical;

}

/* ===================================================
FOOTER
=================================================== */

footer{

background:#07162F;

color:#fff;

padding:90px 0 30px;

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer-grid h3{

font-size:30px;

margin-bottom:20px;

}

.footer-grid h4{

margin-bottom:20px;

}

.footer-grid p,

.footer-grid li{

color:#b9c4d4;

margin-bottom:12px;

}

.footer-grid a{

color:#b9c4d4;

transition:.3s;

}

.footer-grid a:hover{

color:#fff;

}

.copyright{

margin-top:60px;

padding-top:25px;

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

text-align:center;

color:#9aa8ba;

}

/* ===================================================
WHATSAPP
=================================================== */

.whatsapp{

position:fixed;

right:30px;

bottom:30px;

width:70px;

height:70px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:34px;

box-shadow:0 20px 40px rgba(0,0,0,.2);

z-index:999;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.12);

}
/* ======================================
ANIMATIONS
====================================== */

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(13,110,253,.4);

}

70%{

box-shadow:0 0 0 18px rgba(13,110,253,0);

}

100%{

box-shadow:0 0 0 0 rgba(13,110,253,0);

}

}

@media (prefers-reduced-motion: reduce){

*, *::before, *::after{

animation-duration:0.01ms !important;

animation-iteration-count:1 !important;

transition-duration:0.01ms !important;

scroll-behavior:auto !important;

}

}

.hero-left{

animation:fadeUp .8s ease;

}

.hero-right{

animation:fadeUp 1.1s ease;

}

.dashboard{

animation:float 5s ease-in-out infinite;

}

.whatsapp{

animation:pulse 2s infinite;

}

.hidden{

opacity:0;

transform:translateY(70px);

transition:all .8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}
.bottom-stats{

display:grid;

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

gap:20px;

margin-top:25px;

}

.bottom-stats div{

background:white;

padding:20px;

border-radius:18px;

box-shadow:0 12px 25px rgba(0,0,0,.08);

text-align:center;

}

.bottom-stats h5{

color:#888;

margin-bottom:8px;

}

.bottom-stats h3{

font-size:28px;

color:#07162F;

}