/*====================================================
SITH BUSINESS CLOUD
STYLE.CSS
PART 1
RESET + ROOT + GLOBAL
====================================================*/

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

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

:root{

--primary:#2563eb;
--secondary:#00d4ff;
--success:#00d084;
--danger:#ef4444;
--warning:#f59e0b;

--dark:#050816;
--dark-light:#08101f;
--card:#111827;

--white:#ffffff;
--text:#b8c3d9;

--border:rgba(255,255,255,.08);

--radius:18px;

--transition:.35s;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--dark);

color:#fff;

overflow-x:hidden;

position:relative;

}

/*==============================
BACKGROUND
==============================*/

body::before{

content:"";

position:fixed;

left:-250px;

top:-250px;

width:700px;

height:700px;

background:#2563eb;

filter:blur(220px);

opacity:.18;

z-index:-5;

animation:moveGlow1 12s infinite alternate;

}

body::after{

content:"";

position:fixed;

right:-250px;

bottom:-250px;

width:700px;

height:700px;

background:#00d4ff;

filter:blur(220px);

opacity:.15;

z-index:-5;

animation:moveGlow2 12s infinite alternate;

}

@keyframes moveGlow1{

0%{

transform:translate(0,0);

}

100%{

transform:translate(120px,80px);

}

}

@keyframes moveGlow2{

0%{

transform:translate(0,0);

}

100%{

transform:translate(-120px,-80px);

}

}

/*==============================
CONTAINER
==============================*/

.container{

width:92%;

max-width:1400px;

margin:auto;

}

/*==============================
COMMON
==============================*/

section{

padding:110px 0;

position:relative;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:#fff;

transition:.35s;

}

ul{

list-style:none;

}

button{

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

cursor:pointer;

border:none;

}

input,
textarea{

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

outline:none;

}

h1{

font-size:72px;

font-weight:800;

line-height:1.1;

}

h2{

font-size:48px;

font-weight:700;

}

h3{

font-size:26px;

font-weight:600;

}

p{

color:var(--text);

line-height:1.8;

}

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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:18px 36px;

border-radius:50px;

background:linear-gradient(135deg,#2563eb,#00d4ff);

color:#fff;

font-weight:600;

transition:.35s;

box-shadow:0 20px 50px rgba(37,99,235,.35);

}

.btn:hover{

transform:translateY(-5px);

}

.btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:18px 36px;

border-radius:50px;

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

color:#fff;

transition:.35s;

}

.btn-outline:hover{

background:#fff;

color:#000;

}

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

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading span{

display:inline-block;

padding:10px 22px;

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

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

border-radius:50px;

color:#00d4ff;

font-size:14px;

margin-bottom:20px;

}

.section-heading h2{

margin-bottom:20px;

}

.section-heading p{

max-width:760px;

margin:auto;

font-size:18px;

}

/*==============================
GLASS CARD
==============================*/

.glass{

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

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

backdrop-filter:blur(25px);

border-radius:22px;

}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#050816;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(#2563eb,#00d4ff);

border-radius:50px;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:992px){

h1{

font-size:48px;

}

h2{

font-size:36px;

}

.container{

width:95%;

}

}

@media(max-width:768px){

section{

padding:70px 0;

}

.btn,
.btn-outline{

width:100%;

}

}
/*====================================================
PART 2
HEADER + NAVBAR
====================================================*/

.header{

position:fixed;

top:0;

left:0;

width:100%;

padding:18px 0;

z-index:9999;

background:rgba(5,8,22,.60);

backdrop-filter:blur(20px);

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

transition:.35s;

}

.header.scrolled{

padding:12px 0;

background:#050816;

box-shadow:0 20px 60px rgba(0,0,0,.35);

}

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

}

/*=============================
LOGO
=============================*/

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

height:55px;

width:auto;

transition:.35s;

}

.logo img:hover{

transform:rotate(-8deg) scale(1.08);

}

.logo h2{

font-size:24px;

font-weight:700;

color:#fff;

letter-spacing:.5px;

}

/*=============================
MENU
=============================*/

nav{

display:flex;

align-items:center;

}

nav ul{

display:flex;

gap:35px;

align-items:center;

}

nav ul li{

position:relative;

}

nav ul li a{

font-size:15px;

font-weight:500;

padding:8px 0;

display:block;

color:#fff;

transition:.35s;

}

nav ul li a::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:2px;

background:#00d4ff;

transition:.35s;

}

nav ul li:hover a{

color:#00d4ff;

}

nav ul li:hover a::after{

width:100%;

}

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

.header-buttons{

display:flex;

align-items:center;

gap:15px;

}

.login-btn{

padding:14px 28px;

border-radius:50px;

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

transition:.35s;

font-weight:500;

}

.login-btn:hover{

background:#fff;

color:#000;

}

.trial-btn{

padding:15px 30px;

border-radius:50px;

background:linear-gradient(135deg,#2563eb,#00d4ff);

font-weight:600;

box-shadow:0 20px 40px rgba(37,99,235,.35);

transition:.35s;

}

.trial-btn:hover{

transform:translateY(-5px);

box-shadow:0 30px 60px rgba(0,212,255,.35);

}

/*=============================
MEGA MENU
=============================*/

.has-dropdown{

position:relative;

}

.dropdown{

position:absolute;

top:65px;

left:0;

min-width:260px;

background:#111827;

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

border-radius:18px;

padding:18px;

opacity:0;

visibility:hidden;

transform:translateY(15px);

transition:.35s;

backdrop-filter:blur(20px);

}

.dropdown a{

display:block;

padding:12px 15px;

border-radius:10px;

font-size:15px;

}

.dropdown a:hover{

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

padding-left:20px;

}

.has-dropdown:hover .dropdown{

opacity:1;

visibility:visible;

transform:translateY(0);

}

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

.mobile-toggle{

display:none;

width:50px;

height:50px;

border-radius:12px;

background:#111827;

justify-content:center;

align-items:center;

cursor:pointer;

font-size:22px;

color:#fff;

}

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:320px;

height:100%;

background:#08101f;

padding:90px 30px;

transition:.45s;

z-index:99999;

}

.mobile-menu.active{

right:0;

}

.mobile-menu ul{

display:flex;

flex-direction:column;

gap:25px;

}

.mobile-menu a{

font-size:18px;

font-weight:500;

color:#fff;

}

/*=============================
RESPONSIVE
=============================*/

@media(max-width:1100px){

nav{

display:none;

}

.header-buttons{

display:none;

}

.mobile-toggle{

display:flex;

}

}

@media(max-width:768px){

.logo img{

height:45px;

}

.logo h2{

font-size:18px;

}

.header{

padding:14px 0;

}

}
/*====================================================
PART 3
PREMIUM HERO SECTION
====================================================*/

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

padding:150px 0 100px;

background:#050816;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:800px;

height:800px;

left:-250px;

top:-250px;

background:#2563eb;

filter:blur(220px);

opacity:.18;

animation:heroGlow1 12s infinite alternate;

}

.hero::after{

content:"";

position:absolute;

right:-250px;

bottom:-250px;

width:700px;

height:700px;

background:#00d4ff;

filter:blur(220px);

opacity:.15;

animation:heroGlow2 12s infinite alternate;

}

@keyframes heroGlow1{

0%{

transform:translate(0,0);

}

100%{

transform:translate(120px,90px);

}

}

@keyframes heroGlow2{

0%{

transform:translate(0,0);

}

100%{

transform:translate(-120px,-90px);

}

}

/*================================*/

.hero-grid{

display:grid;

grid-template-columns:1fr 600px;

gap:70px;

align-items:center;

position:relative;

z-index:10;

}

/*================================*/

.hero-badge{

display:inline-flex;

align-items:center;

padding:12px 22px;

border-radius:50px;

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

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

color:#00d4ff;

font-size:14px;

font-weight:600;

margin-bottom:25px;

backdrop-filter:blur(20px);

}

.hero h1{

font-size:74px;

font-weight:800;

line-height:1.08;

margin-bottom:25px;

max-width:700px;

}

.hero h1 span{

background:linear-gradient(90deg,#00d4ff,#2563eb);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

line-height:1.9;

max-width:650px;

color:#b8c3d9;

margin-bottom:40px;

}

/*================================*/

.hero-list{

display:grid;

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

gap:18px;

margin-bottom:45px;

}

.hero-list div{

display:flex;

align-items:center;

gap:12px;

font-size:16px;

}

.hero-list i{

color:#00d084;

font-size:18px;

}

/*================================*/

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:50px;

}

/*================================*/

.hero-rating{

display:flex;

align-items:center;

gap:15px;

}

.hero-rating img{

width:50px;

height:50px;

border-radius:50%;

border:3px solid #fff;

margin-left:-15px;

}

.hero-rating img:first-child{

margin-left:0;

}

.hero-rating div{

font-size:15px;

line-height:1.7;

}

/*================================*/

.hero-right{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

/*================================*/

.dashboard{

width:100%;

background:rgba(17,24,39,.72);

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

backdrop-filter:blur(25px);

border-radius:30px;

padding:35px;

box-shadow:0 30px 80px rgba(0,0,0,.45);

position:relative;

overflow:hidden;

}

.dashboard::before{

content:"";

position:absolute;

width:250px;

height:250px;

background:#7c3aed;

right:-70px;

top:-70px;

filter:blur(120px);

opacity:.4;

}

.dashboard-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}

.logo-small{

width:50px;

height:50px;

border-radius:15px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#2563eb,#00d4ff);

font-weight:700;

font-size:18px;

}

.dashboard-top input{

width:78%;

padding:15px 18px;

border:none;

border-radius:50px;

background:#0b1324;

color:white;

}

/*================================*/

.dashboard-content{

display:grid;

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

gap:20px;

}

.stat-box{

padding:22px;

border-radius:18px;

background:#111827;

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

transition:.35s;

}

.stat-box:hover{

transform:translateY(-6px);

border-color:#00d4ff;

}

.stat-box small{

display:block;

margin-bottom:10px;

color:#94a3b8;

}

.stat-box h2{

font-size:28px;

}

/*================================*/

.floating-card{

position:absolute;

padding:16px 20px;

background:rgba(17,24,39,.9);

border-radius:18px;

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

backdrop-filter:blur(20px);

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

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

text-align:center;

}

.website{

left:-40px;

top:90px;

}

.erp{

left:-60px;

bottom:120px;

animation-delay:1s;

}

.cloud{

right:-40px;

top:80px;

animation-delay:2s;

}

.analytics{

right:-35px;

bottom:100px;

animation-delay:3s;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*================================*/

@media(max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

}

.hero-right{

margin-top:60px;

}

}

@media(max-width:768px){

.hero{

padding-top:130px;

}

.hero h1{

font-size:42px;

}

.hero-list{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

}

.dashboard-content{

grid-template-columns:1fr;

}

.floating-card{

display:none;

}

}
/*====================================================
PART 4
AI PROMPT + LIVE STEPS + STATS
====================================================*/

.hero-ai{

background:#08101f;

padding:90px 0;

position:relative;

overflow:hidden;

}

.hero-ai::before{

content:"";

position:absolute;

left:-200px;

top:-150px;

width:500px;

height:500px;

background:#2563eb;

filter:blur(180px);

opacity:.15;

}

.prompt-box{

display:grid;

grid-template-columns:1fr 220px;

gap:25px;

padding:35px;

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

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

border-radius:28px;

backdrop-filter:blur(25px);

align-items:center;

}

.prompt-left h2{

font-size:34px;

margin-bottom:20px;

}

.prompt-left input{

width:100%;

padding:20px 25px;

border:none;

border-radius:18px;

background:#0d162b;

color:#fff;

font-size:17px;

transition:.35s;

}

.prompt-left input:focus{

box-shadow:0 0 0 2px #00d4ff;

}

.prompt-right{

display:flex;

justify-content:center;

align-items:center;

}

.prompt-right .btn{

width:100%;

height:65px;

font-size:18px;

}

/*============================*/

.steps{

display:grid;

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

gap:20px;

margin-top:50px;

}

.steps div{

padding:25px;

text-align:center;

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

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

border-radius:20px;

transition:.35s;

backdrop-filter:blur(20px);

cursor:pointer;

}

.steps div:hover{

transform:translateY(-8px);

border-color:#00d4ff;

box-shadow:0 20px 50px rgba(0,212,255,.18);

}

.steps div{

font-size:40px;

}

.steps p{

margin-top:15px;

font-size:15px;

color:#d5def2;

}

/*============================*/

.hero-stats-section{

padding:90px 0;

background:#050816;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stats-grid div{

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

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

border-radius:22px;

padding:40px;

text-align:center;

transition:.35s;

backdrop-filter:blur(20px);

}

.stats-grid div:hover{

transform:translateY(-10px);

border-color:#00d4ff;

}

.stats-grid h2{

font-size:48px;

margin-bottom:15px;

background:linear-gradient(135deg,#00d4ff,#2563eb);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.stats-grid p{

font-size:17px;

color:#b8c3d9;

}

/*============================*/

.typing-box{

margin-top:40px;

padding:22px;

border-radius:18px;

background:#0d162b;

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

font-size:18px;

color:#00d4ff;

font-family:monospace;

overflow:hidden;

white-space:nowrap;

animation:typing 5s steps(50) infinite;

}

@keyframes typing{

0%{

width:0;

}

50%{

width:100%;

}

100%{

width:0;

}

}

/*============================*/

.ai-progress{

margin-top:45px;

display:flex;

flex-direction:column;

gap:18px;

}

.progress-item{

display:flex;

justify-content:space-between;

padding:18px 22px;

border-radius:14px;

background:#111827;

}

.progress-bar{

height:8px;

background:#1f2937;

border-radius:20px;

overflow:hidden;

margin-top:8px;

}

.progress-bar span{

display:block;

height:100%;

width:85%;

background:linear-gradient(90deg,#2563eb,#00d4ff);

border-radius:20px;

animation:loading 3s infinite;

}

@keyframes loading{

0%{

width:0;

}

100%{

width:100%;

}

}

/*============================*/

@media(max-width:1100px){

.prompt-box{

grid-template-columns:1fr;

}

.steps{

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

}

.stats-grid{

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

}

}

@media(max-width:768px){

.prompt-left h2{

font-size:26px;

}

.steps{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.prompt-right .btn{

height:58px;

}

}
/*====================================================
PART 5
TRUSTED SECTION + SOFTWARE MARKETPLACE
====================================================*/

.trusted-section{

padding:110px 0;

background:#08101f;

position:relative;

overflow:hidden;

}

.trusted-grid{

display:grid;

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

gap:25px;

margin-top:70px;

}

.trusted-card{

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

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

border-radius:22px;

padding:40px 25px;

text-align:center;

transition:.35s;

cursor:pointer;

backdrop-filter:blur(25px);

position:relative;

overflow:hidden;

}

.trusted-card::before{

content:"";

position:absolute;

top:-60px;

right:-60px;

width:180px;

height:180px;

background:#2563eb;

filter:blur(100px);

opacity:0;

transition:.35s;

}

.trusted-card:hover::before{

opacity:.45;

}

.trusted-card:hover{

transform:translateY(-12px);

border-color:#00d4ff;

box-shadow:0 25px 60px rgba(0,212,255,.18);

}

.trusted-card i{

font-size:52px;

margin-bottom:22px;

color:#00d4ff;

}

.trusted-card h4{

font-size:22px;

font-weight:600;

margin-bottom:10px;

}

.trusted-card p{

font-size:15px;

color:#b8c3d9;

line-height:1.8;

}

/*======================================
SOFTWARE MARKET
======================================*/

.software-market{

background:#050816;

padding:120px 0;

}

.software-grid{

display:grid;

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

gap:28px;

margin-top:70px;

}

.software-card{

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

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

border-radius:24px;

padding:35px;

transition:.35s;

position:relative;

overflow:hidden;

backdrop-filter:blur(20px);

}

.software-card::before{

content:"";

position:absolute;

top:-70px;

right:-70px;

width:220px;

height:220px;

background:#00d4ff;

filter:blur(110px);

opacity:0;

transition:.35s;

}

.software-card:hover::before{

opacity:.35;

}

.software-card:hover{

transform:translateY(-12px);

border-color:#00d4ff;

}

.software-card i{

font-size:56px;

margin-bottom:25px;

color:#00d4ff;

}

.software-card h3{

font-size:24px;

margin-bottom:15px;

}

.software-card p{

line-height:1.9;

margin-bottom:25px;

color:#c0cae0;

}

.software-card a{

display:inline-flex;

align-items:center;

gap:8px;

padding:14px 24px;

border-radius:50px;

background:linear-gradient(135deg,#2563eb,#00d4ff);

font-size:15px;

font-weight:600;

transition:.35s;

}

.software-card a:hover{

transform:translateY(-4px);

box-shadow:0 20px 50px rgba(37,99,235,.35);

}

/*======================================
LIVE DEMO BADGE
======================================*/

.demo-badge{

position:absolute;

top:20px;

right:20px;

padding:8px 14px;

border-radius:50px;

font-size:12px;

background:#00d084;

color:#fff;

font-weight:600;

}

/*======================================
CATEGORY TAG
======================================*/

.category-tag{

display:inline-block;

margin-bottom:18px;

padding:8px 14px;

border-radius:50px;

background:rgba(0,212,255,.12);

color:#00d4ff;

font-size:13px;

font-weight:600;

}

/*======================================
RESPONSIVE
======================================*/

@media(max-width:1200px){

.trusted-grid{

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

}

.software-grid{

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

}

}

@media(max-width:768px){

.trusted-grid{

grid-template-columns:1fr;

}

.software-grid{

grid-template-columns:1fr;

}

.trusted-card,

.software-card{

padding:28px;

}

}
/*====================================================
PART 6
WHY CHOOSE US + AI FEATURES
====================================================*/

.why-us{

padding:120px 0;

background:#08101f;

position:relative;

overflow:hidden;

}

.why-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.why-card{

padding:40px;

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

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

border-radius:25px;

backdrop-filter:blur(25px);

transition:.35s;

position:relative;

overflow:hidden;

}

.why-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:linear-gradient(90deg,#2563eb,#00d4ff);

transform:scaleX(0);

transition:.35s;

}

.why-card:hover::before{

transform:scaleX(1);

}

.why-card:hover{

transform:translateY(-12px);

border-color:#00d4ff;

box-shadow:0 25px 60px rgba(0,212,255,.18);

}

.why-card i{

font-size:55px;

margin-bottom:25px;

color:#00d4ff;

}

.why-card h3{

font-size:24px;

margin-bottom:18px;

}

.why-card p{

line-height:1.9;

color:#c7d1e5;

}

/*========================================*/

.ai-features{

padding:120px 0;

background:#050816;

}

.feature-grid{

display:grid;

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

gap:25px;

margin-top:70px;

}

.feature-card{

padding:35px;

text-align:center;

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

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

border-radius:22px;

transition:.35s;

cursor:pointer;

backdrop-filter:blur(20px);

position:relative;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

width:180px;

height:180px;

background:#2563eb;

filter:blur(90px);

top:-70px;

right:-70px;

opacity:0;

transition:.35s;

}

.feature-card:hover::before{

opacity:.35;

}

.feature-card:hover{

transform:translateY(-10px);

border-color:#00d4ff;

}

.feature-card i{

font-size:52px;

margin-bottom:22px;

color:#00d4ff;

}

.feature-card h3{

font-size:20px;

margin-bottom:15px;

}

.feature-card p{

font-size:15px;

line-height:1.8;

color:#b8c3d9;

}

/*========================================*/

.feature-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:20px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,#2563eb,#00d4ff);

font-size:34px;

box-shadow:0 20px 45px rgba(37,99,235,.35);

}

/*========================================*/

.ai-banner{

margin-top:80px;

padding:60px;

border-radius:30px;

background:linear-gradient(135deg,#2563eb,#00d4ff);

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

}

.ai-banner h2{

font-size:48px;

color:#fff;

margin-bottom:15px;

}

.ai-banner p{

font-size:18px;

color:#eef5ff;

}

.ai-banner .btn{

background:#fff;

color:#111;

}

.ai-banner .btn:hover{

background:#f3f3f3;

}

/*========================================*/

@media(max-width:1200px){

.why-grid{

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

}

.feature-grid{

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

}

.ai-banner{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.why-grid{

grid-template-columns:1fr;

}

.feature-grid{

grid-template-columns:1fr;

}

.ai-banner{

padding:35px 25px;

}

.ai-banner h2{

font-size:34px;

}

}
/*====================================================
PART 7
PROCESS + BUSINESS TYPES + PRICING
====================================================*/

.process{

padding:120px 0;

background:#08101f;

}

.process-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.step-card{

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

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

border-radius:25px;

padding:40px 30px;

text-align:center;

transition:.35s;

position:relative;

overflow:hidden;

backdrop-filter:blur(20px);

}

.step-card:hover{

transform:translateY(-12px);

border-color:#00d4ff;

box-shadow:0 25px 60px rgba(0,212,255,.18);

}

.step-number{

width:80px;

height:80px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

font-weight:700;

background:linear-gradient(135deg,#2563eb,#00d4ff);

color:#fff;

box-shadow:0 20px 50px rgba(37,99,235,.35);

}

.step-card h3{

margin-bottom:15px;

font-size:24px;

}

.step-card p{

line-height:1.8;

color:#b8c3d9;

}

/*======================================*/

.business-types{

padding:120px 0;

background:#050816;

}

.industry-grid{

display:grid;

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

gap:20px;

margin-top:70px;

}

.industry-grid span{

padding:18px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50px;

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

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

transition:.35s;

cursor:pointer;

font-size:15px;

font-weight:500;

}

.industry-grid span:hover{

background:linear-gradient(135deg,#2563eb,#00d4ff);

transform:translateY(-6px);

}

/*======================================*/

.pricing-section{

padding:120px 0;

background:#08101f;

}

.pricing-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.pricing-card{

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

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

border-radius:28px;

padding:45px;

position:relative;

transition:.35s;

backdrop-filter:blur(20px);

overflow:hidden;

}

.pricing-card:hover{

transform:translateY(-12px);

border-color:#00d4ff;

}

.pricing-card.active{

border:2px solid #00d4ff;

transform:scale(1.04);

box-shadow:0 25px 70px rgba(0,212,255,.25);

}

.plan-badge{

position:absolute;

top:20px;

right:-45px;

background:linear-gradient(135deg,#2563eb,#00d4ff);

padding:10px 60px;

transform:rotate(45deg);

font-size:12px;

font-weight:700;

}

.pricing-card h3{

font-size:30px;

margin-bottom:20px;

}

.price{

font-size:60px;

font-weight:800;

margin-bottom:20px;

background:linear-gradient(135deg,#00d4ff,#2563eb);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.price span{

font-size:18px;

color:#b8c3d9;

-webkit-text-fill-color:#b8c3d9;

}

.pricing-card ul{

margin:30px 0;

}

.pricing-card ul li{

padding:12px 0;

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

color:#d6e0f5;

}

.pricing-card .btn{

width:100%;

justify-content:center;

}

/*======================================*/

@media(max-width:1200px){

.process-grid{

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

}

.industry-grid{

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

}

.pricing-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.process-grid{

grid-template-columns:1fr;

}

.industry-grid{

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

}

.pricing-card{

padding:30px;

}

.price{

font-size:44px;

}

}
/*====================================================
PART 8
FREE TRIAL + DASHBOARD + TESTIMONIALS
====================================================*/

.trial-section{

padding:120px 0;

background:#050816;

}

.trial-box{

display:grid;

grid-template-columns:1fr 450px;

gap:60px;

align-items:center;

padding:70px;

background:linear-gradient(135deg,#0f172a,#111827);

border-radius:30px;

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

backdrop-filter:blur(25px);

}

.trial-left span{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:rgba(0,212,255,.12);

color:#00d4ff;

margin-bottom:20px;

font-size:14px;

font-weight:600;

}

.trial-left h2{

font-size:52px;

margin-bottom:20px;

}

.trial-left p{

font-size:18px;

line-height:1.9;

margin-bottom:35px;

color:#c4cee2;

}

.flow-box{

padding:35px;

border-radius:24px;

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

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

text-align:center;

font-size:18px;

line-height:2.6;

}

/*========================================*/

.dashboard-preview{

padding:120px 0;

background:#08101f;

}

.dashboard-grid{

display:grid;

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

gap:25px;

margin-top:70px;

}

.dashboard-card{

padding:35px;

text-align:center;

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

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

border-radius:24px;

transition:.35s;

backdrop-filter:blur(20px);

}

.dashboard-card:hover{

transform:translateY(-12px);

border-color:#00d4ff;

box-shadow:0 25px 60px rgba(0,212,255,.18);

}

.dashboard-card i{

font-size:55px;

margin-bottom:20px;

color:#00d4ff;

}

.dashboard-card h3{

font-size:22px;

}

/*========================================*/

.testimonial-section{

padding:120px 0;

background:#050816;

}

.testimonial-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.testimonial-card{

padding:40px;

border-radius:25px;

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

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

text-align:center;

transition:.35s;

backdrop-filter:blur(20px);

}

.testimonial-card:hover{

transform:translateY(-10px);

border-color:#00d4ff;

}

.testimonial-card img{

width:90px;

height:90px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

border:4px solid #2563eb;

object-fit:cover;

}

.testimonial-card h3{

margin-bottom:8px;

}

.testimonial-card small{

display:block;

margin-bottom:20px;

color:#00d4ff;

}

.testimonial-card p{

font-style:italic;

line-height:1.8;

color:#c6d1e5;

}

/*========================================*/

.rating{

margin-top:20px;

color:#FFD700;

font-size:20px;

letter-spacing:3px;

}

/*========================================*/

@media(max-width:1200px){

.trial-box{

grid-template-columns:1fr;

}

.dashboard-grid{

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

}

.testimonial-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.dashboard-grid{

grid-template-columns:1fr;

}

.trial-box{

padding:35px 25px;

}

.trial-left h2{

font-size:36px;

}

}
/*====================================================
PART 9
FAQ + NEWSLETTER + CTA + FOOTER
====================================================*/

.faq-section{

padding:120px 0;

background:#08101f;

}

.faq-list{

max-width:1000px;

margin:70px auto 0;

display:flex;

flex-direction:column;

gap:22px;

}

.faq-item{

padding:30px;

border-radius:20px;

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

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

transition:.35s;

backdrop-filter:blur(20px);

cursor:pointer;

}

.faq-item:hover{

transform:translateY(-5px);

border-color:#00d4ff;

}

.faq-item h3{

font-size:22px;

margin-bottom:15px;

}

.faq-item p{

line-height:1.8;

color:#b8c3d9;

}

/*====================================*/

.newsletter{

padding:110px 0;

background:#050816;

}

.newsletter-box{

max-width:900px;

margin:auto;

padding:60px;

border-radius:30px;

text-align:center;

background:linear-gradient(135deg,#0f172a,#111827);

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

}

.newsletter-box h2{

font-size:48px;

margin-bottom:18px;

}

.newsletter-box p{

font-size:18px;

margin-bottom:35px;

}

.newsletter-box form{

display:flex;

gap:15px;

justify-content:center;

flex-wrap:wrap;

}

.newsletter-box input{

width:500px;

max-width:100%;

padding:18px 24px;

background:#08101f;

border:none;

border-radius:50px;

color:#fff;

font-size:16px;

}

.newsletter-box button{

height:60px;

}

/*====================================*/

.cta-section{

padding:120px 0;

background:#08101f;

}

.cta-box{

padding:80px 50px;

text-align:center;

border-radius:35px;

background:linear-gradient(135deg,#2563eb,#00d4ff);

}

.cta-box span{

display:inline-block;

margin-bottom:20px;

letter-spacing:2px;

font-weight:600;

}

.cta-box h2{

font-size:58px;

margin-bottom:20px;

}

.cta-box p{

font-size:20px;

color:#eef5ff;

margin-bottom:35px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.cta-box .btn{

background:#fff;

color:#111;

}

.cta-box .btn-outline{

border:2px solid #fff;

}

.cta-box .btn-outline:hover{

background:#fff;

color:#111;

}

/*====================================*/

.footer{

padding:90px 0 30px;

background:#030611;

}

.footer-grid{

display:grid;

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

gap:50px;

margin-bottom:60px;

}

.footer h3{

margin-bottom:20px;

font-size:24px;

}

.footer p{

line-height:1.8;

color:#b8c3d9;

}

.footer ul{

display:flex;

flex-direction:column;

gap:15px;

}

.footer ul li a{

color:#b8c3d9;

transition:.35s;

}

.footer ul li a:hover{

padding-left:8px;

color:#00d4ff;

}

.social-icons{

display:flex;

gap:15px;

margin-top:25px;

}

.social-icons a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

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

border-radius:50%;

transition:.35s;

}

.social-icons a:hover{

background:#00d4ff;

transform:translateY(-5px);

}

.footer hr{

margin:35px 0;

border:none;

height:1px;

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

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

}

.footer-bottom a{

color:#b8c3d9;

margin-left:20px;

}

.footer-bottom a:hover{

color:#00d4ff;

}

/*====================================*/

.whatsapp-float{

position:fixed;

bottom:25px;

right:25px;

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#25D366;

font-size:28px;

color:#fff;

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

z-index:999;

transition:.35s;

}

.whatsapp-float:hover{

transform:scale(1.1);

}

.back-top{

position:fixed;

right:25px;

bottom:100px;

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,#2563eb,#00d4ff);

color:#fff;

font-size:18px;

z-index:999;

transition:.35s;

}

.back-top:hover{

transform:translateY(-6px);

}

/*====================================*/

@media(max-width:1200px){

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.newsletter-box{

padding:35px 25px;

}

.newsletter-box h2{

font-size:34px;

}

.cta-box{

padding:45px 25px;

}

.cta-box h2{

font-size:36px;

}

.whatsapp-float{

right:18px;

bottom:18px;

}

.back-top{

right:18px;

bottom:88px;

}

}
.quick-actions{
margin-top:30px;
}

.section-title{
margin-bottom:20px;
}

.section-title h3{
font-size:22px;
font-weight:700;
}

.section-title p{
color:#888;
margin-top:5px;
}

.quick-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
}

.quick-box{
background:#fff;
border-radius:15px;
padding:25px;
text-align:center;
text-decoration:none;
color:#333;
transition:.3s;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.quick-box:hover{
transform:translateY(-5px);
background:#0d6efd;
color:#fff;
}

.quick-box i{
font-size:32px;
margin-bottom:15px;
display:block;
}

.quick-box span{
font-size:16px;
font-weight:600;
}
.dashboard-row{
display:grid;
grid-template-columns:2fr 1fr;
gap:25px;
margin-top:30px;
}

.dashboard-box{
background:#fff;
padding:25px;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.box-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.box-header a{
text-decoration:none;
color:#0d6efd;
font-weight:600;
}

.table{
width:100%;
border-collapse:collapse;
}

.table th{
background:#f7f7f7;
padding:12px;
text-align:left;
}

.table td{
padding:14px 12px;
border-bottom:1px solid #eee;
}

.status{
padding:6px 12px;
border-radius:30px;
font-size:12px;
font-weight:600;
}

.status.new{
background:#d4edda;
color:#198754;
}

.status.followup{
background:#fff3cd;
color:#856404;
}

.status.closed{
background:#d1ecf1;
color:#0c5460;
}

.ai-box ul{
margin-top:20px;
padding-left:18px;
}

.ai-box ul li{
margin-bottom:12px;
}

.ai-btn{
display:block;
margin-top:20px;
background:#0d6efd;
color:#fff;
text-align:center;
padding:14px;
border-radius:10px;
text-decoration:none;
font-weight:600;
}

.ai-btn:hover{
background:#0b5ed7;
}