body{
background:#09090b;
color:white;
font-family:Arial,sans-serif;
margin:0;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

header{
padding:20px 0;
border-bottom:1px solid #27272a;
}

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

.logo{
font-size:28px;
font-weight:bold;
}

nav a{
color:#d4d4d8;
text-decoration:none;
margin-left:20px;
}

.hero{
padding:120px 0;
background:linear-gradient(to bottom right,#172554,#09090b);
}

.hero-grid,
.ai-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:60px;
align-items:center;
}

.badge{
display:inline-block;
padding:10px 18px;
border-radius:999px;
background:rgba(59,130,246,0.1);
border:1px solid rgba(59,130,246,0.2);
color:#93c5fd;
margin-bottom:24px;
}

.hero h1{
font-size:64px;
line-height:1.1;
}

.hero h1 span{
color:#60a5fa;
}

.hero p{
color:#d4d4d8;
font-size:20px;
}

.hero-buttons{
display:flex;
gap:16px;
margin-top:40px;
flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
padding:16px 28px;
border-radius:18px;
font-size:16px;
cursor:pointer;
text-decoration:none;
display:inline-block;
}

.primary-btn{
background:#3b82f6;
border:none;
color:white;
}

.secondary-btn{
background:transparent;
border:1px solid #3f3f46;
color:white;
}

.dashboard-card,
.service-card,
.chat-card{
background:#18181b;
border:1px solid #27272a;
border-radius:24px;
padding:30px;
}

.dashboard-grid,
.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}

.stat-card{
background:#09090b;
padding:24px;
border-radius:18px;
}

.services,
.ai-section{
padding:100px 0;
}

.chatbot-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.7);
justify-content:center;
align-items:center;
}

.chatbot-window{
width:90%;
max-width:500px;
background:#18181b;
border-radius:24px;
overflow:hidden;
}

.chatbot-top,
.chatbot-input{
padding:20px;
display:flex;
justify-content:space-between;
gap:10px;
}

.chatbot-body{
padding:20px;
height:300px;
overflow:auto;
}

.ai-bubble,
.message{
padding:16px;
border-radius:18px;
margin-bottom:12px;
}

.ai-bubble,
.ai-message{
background:#27272a;
}

.user-message{
background:#3b82f6;
margin-left:auto;
max-width:80%;
}

.chatbot-input input{
flex:1;
padding:14px;
border-radius:14px;
border:1px solid #3f3f46;
background:#09090b;
color:white;
}

footer{
padding:50px 0;
border-top:1px solid #27272a;
}

@media(max-width:768px){
.hero h1{
font-size:42px;
}
}