:root{
--bg:#ffffff;
--text:#0f172a;
--muted:#64748b;
--primary:#2563eb;
--border:#e5e7eb;
--gradient:linear-gradient(135deg,#2563eb,#4f46e5);
}

body.dark{
--bg:#0b1220;
--text:#e2e8f0;
--muted:#94a3b8;
--border:#1e293b;
}

/* RESET */

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

body{
font-family:Inter, sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
transition:.4s;
}

/* PARTICLES BACKGROUND */

#particles{
position:fixed;
width:100%;
height:100%;
z-index:-1;
top:0;
left:0;
}

/* CONTAINER */

.container{
max-width:1250px;
margin:auto;
padding:0 28px;
}

section{
padding:120px 0;
}

a{
text-decoration:none;
color:inherit;
}

/* TYPOGRAPHY */

h1{
font-size:64px;
font-weight:900;
}

h2{
font-size:42px;
font-weight:800;
}

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

/* NAVBAR */

nav{
position:fixed;
width:100%;
background:rgba(255,255,255,.8);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
z-index:10;
}

body.dark nav{
background:rgba(15,23,42,.7);
}

.nav-inner{
height:80px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
background:#0f172a;
padding:10px 16px;
border-radius:10px;
font-weight:900;
}

.logo span:first-child{
color:white;
}

.logo span:last-child{
color:#2563eb;
}

.nav-links{
display:flex;
gap:25px;
align-items:center;
}

.toggle{
cursor:pointer;
}

/* BUTTONS */

.btn{
padding:14px 30px;
border-radius:999px;
font-weight:600;
transition:.3s;
display:inline-block;
}

.btn-primary{
background:var(--gradient);
color:white;
}

.btn-primary:hover{
opacity:.9;
}

.btn-outline{
border:1px solid var(--border);
}

.btn-outline:hover{
background:var(--primary);
color:white;
}

/* HERO */

.hero{
padding-top:160px;
}

.hero-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:80px;
align-items:center;
}

.hero span{
background:var(--gradient);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
margin-top:20px;
font-size:20px;
color:var(--muted);
}

/* DASHBOARD PREVIEW */

.dashboard-preview{
border:1px solid var(--border);
padding:40px;
border-radius:20px;
background:var(--bg);
box-shadow:0 25px 60px rgba(0,0,0,.1);
transition:.2s;
transform-style:preserve-3d;
}

.dashboard-preview:hover{
transform:rotateX(8deg) rotateY(-8deg);
}

/* KPI GRID */

.kpi-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:60px;
}

.kpi{
background:var(--bg);
border:1px solid var(--border);
padding:40px;
border-radius:20px;
text-align:center;
}

.kpi-value{
font-size:40px;
font-weight:800;
color:var(--primary);
}

/* GRID LAYOUT */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:40px;
margin-top:60px;
}

/* CARDS */

.card{
border:1px solid var(--border);
padding:40px;
border-radius:20px;
transition:.3s;
background:var(--bg);
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,.1);
}

/* PROGRESS BAR */

.progress{
height:12px;
background:#e2e8f0;
border-radius:20px;
margin-top:10px;
overflow:hidden;
}

.bar{
height:100%;
background:var(--gradient);
width:0;
transition:2s;
}

/* STORY SECTION */

.story{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

.story-text{
font-size:20px;
color:var(--muted);
line-height:1.6;
}

/* TRUST SECTION */

.trust{
background:#f1f5f9;
}

body.dark .trust{
background:#0f172a;
}

.logos{
display:flex;
justify-content:space-around;
margin-top:40px;
opacity:.7;
font-weight:600;
}

/* FORM INPUTS */

input,
textarea{
width:100%;
padding:12px;
border:1px solid var(--border);
border-radius:8px;
background:var(--bg);
color:var(--text);
}

input:focus,
textarea:focus{
outline:none;
border-color:var(--primary);
}

/* FOOTER */

.footer{
text-align:center;
padding:50px;
color:var(--muted);
border-top:1px solid var(--border);
}

/* RESPONSIVE */

@media(max-width:900px){

.hero-grid{
grid-template-columns:1fr;
}

.story{
grid-template-columns:1fr;
}

h1{
font-size:44px;
}

.kpi-grid{
grid-template-columns:1fr;
}

}

/* AI DASHBOARD SECTION */

.ai-dashboard{
background:linear-gradient(180deg,#f8fafc,#ffffff);
}

body.dark .ai-dashboard{
background:#0b1220;
}

.ai-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

.ai-text p{
margin-top:20px;
color:var(--muted);
font-size:18px;
}

.ai-features{
margin-top:25px;
line-height:2;
color:var(--muted);
}

.ai-visual{
position:relative;
}

.ai-image{
width:100%;
border-radius:20px;
box-shadow:0 30px 80px rgba(0,0,0,.15);
}

.floating-card{
position:absolute;
background:var(--bg);
border:1px solid var(--border);
padding:18px 24px;
border-radius:14px;
font-weight:600;
box-shadow:0 10px 30px rgba(0,0,0,.1);
animation:float 6s ease-in-out infinite;
}

.floating-card strong{
display:block;
font-size:20px;
color:var(--primary);
}

.card1{
top:-20px;
left:-30px;
}

.card2{
top:40%;
right:-30px;
}

.card3{
bottom:-20px;
left:20%;
}

@keyframes float{

0%{transform:translateY(0)}
50%{transform:translateY(-12px)}
100%{transform:translateY(0)}

}

/* MOBILE */

@media(max-width:900px){

.ai-grid{
grid-template-columns:1fr;
}

.card1,.card2,.card3{
display:none;
}

}

/* AI SECTION */

.ai-section{
background:linear-gradient(180deg,#ffffff,#f8fafc);
}

body.dark .ai-section{
background:#0b1220;
}

.ai-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

.ai-content p{
margin-top:18px;
}

.ai-points{
margin-top:25px;
line-height:2;
color:var(--muted);
list-style:none;
}

.ai-points li::before{
content:"✓";
color:var(--primary);
margin-right:10px;
}

/* AI VISUAL CARD */

.ai-visual-card{
border:1px solid var(--border);
border-radius:20px;
padding:30px;
background:var(--bg);
box-shadow:0 25px 60px rgba(0,0,0,.1);
}

.ai-header{
font-weight:700;
margin-bottom:15px;
color:var(--muted);
}

/* MOBILE */

@media(max-width:900px){

.ai-layout{
grid-template-columns:1fr;
}

}