/* ================= GLOBAL ================= */

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

body {
    font-family: 'Inter', sans-serif;
    background: #ffffff;
    color: #111;
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

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

/* ================= NAVBAR ================= */

.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 7%;
    z-index: 1000;
}

.logo {
    font-size: 20px;
    font-weight: 700;
}

.logo span {
    font-weight: 400;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 26px;
}

.nav-links a {
    font-size: 14px;
    font-weight: 500;
    position: relative;
    transition: 0.3s ease;
}

.nav-links a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    background: #000;
    left: 0;
    bottom: -4px;
    transition: 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    gap: 12px;
}

.login-btn {
    padding: 8px 18px;
    border: 1px solid #000;
    font-size: 14px;
    transition: 0.3s;
}

.login-btn:hover {
    background: #000;
    color: #fff;
}

.demo-btn {
    padding: 8px 20px;
    background: #000;
    color: #fff;
    font-size: 14px;
    transition: 0.3s;
}

.demo-btn:hover {
    background: #222;
}

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

.hero {
    margin-top: 90px;
    padding: 85px 7%;
    text-align: center;
    background: transparent; /* important for animation */
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 18px;
}

.hero p {
    max-width: 680px;
    margin: auto;
    font-size: 16px;
    color: #444;
}

.hero-buttons {
    margin-top: 28px;
}

.primary-btn {
    background: #000;
    color: #fff;
    padding: 12px 26px;
    margin-right: 12px;
    transition: 0.3s;
}

.primary-btn:hover {
    background: #222;
}

.secondary-btn {
    border: 1px solid #000;
    padding: 12px 26px;
    transition: 0.3s;
}

.secondary-btn:hover {
    background: #000;
    color: #fff;
}

/* ================= SECTIONS ================= */

.section {
    padding: 70px 7%;
}

.light {
    background: #ffffff;
    text-align: center;
}

.dark {
    background: #0f0f0f;
    color: #ffffff;
}

.container {
    max-width: 1100px;
    margin: auto;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* ================= GLOBAL ================= */

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

body{
font-family:'Inter',sans-serif;
background:#ffffff;
color:#111;
line-height:1.6;
overflow-x:hidden;
}

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

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

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

/* ================= NAVBAR ================= */

.navbar{
position:fixed;
width:100%;
top:0;
background:rgba(255,255,255,0.9);
backdrop-filter:blur(10px);
border-bottom:1px solid #eaeaea;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 7%;
z-index:1000;
box-shadow:0 4px 25px rgba(0,0,0,0.05);
transition:all 0.3s ease;
}

.logo{
display:flex;
align-items:center;
gap:12px;
font-size:20px;
font-weight:600;
}

.logo img{
height:42px;
width:auto;
}

.nav-links{
list-style:none;
display:flex;
gap:26px;
}

.nav-links a{
font-size:15px;
font-weight:500;
position:relative;
transition:0.3s ease;
}

.nav-links a::after{
content:"";
position:absolute;
width:0;
height:1px;
background:#000;
left:0;
bottom:-4px;
transition:0.3s;
}

.nav-links a:hover::after{
width:100%;
}

.nav-actions{
display:flex;
gap:12px;
}

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

.login-btn{
padding:8px 18px;
border:1px solid #000;
font-size:14px;
transition:0.3s;
}

.login-btn:hover{
background:#000;
color:#fff;
}

.demo-btn{
padding:8px 20px;
background:#000;
color:#fff;
font-size:14px;
transition:0.3s;
}

.demo-btn:hover{
background:#222;
}

.primary-btn,
.secondary-btn,
.login-btn,
.demo-btn{
border-radius:4px;
transition:all 0.25s ease;
}

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

.hero{
margin-top:90px;
padding:85px 7%;
text-align:center;
background:transparent;
position:relative;
z-index:1;
}

.hero h1{
font-size:38px;
font-weight:700;
margin-bottom:18px;
}

.hero p{
max-width:680px;
margin:auto;
font-size:16px;
color:#444;
}

.hero-buttons{
margin-top:28px;
}

.primary-btn{
background:#000;
color:#fff;
padding:12px 26px;
margin-right:12px;
}

.primary-btn:hover{
background:#222;
}

.secondary-btn{
border:1px solid #000;
padding:12px 26px;
}

.secondary-btn:hover{
background:#000;
color:#fff;
}

/* ================= SECTIONS ================= */

.section{
padding:70px 7%;
animation:fadeIn 0.8s ease;
}

.light{
background:#ffffff;
text-align:center;
}

.dark{
background:#0f0f0f;
color:#ffffff;
}

.container{
max-width:1100px;
margin:auto;
}

.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.card{
background:#ffffff;
padding:28px;
border:1px solid #eaeaea;
border-radius:8px;
transition:0.3s;
}

.dark .card{
background:#141414;
border:1px solid #222;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* ================= FORMS ================= */

.contact-container,
.login-container,
.demo-container{
max-width:700px;
margin:130px auto;
padding:40px;
border:1px solid #eaeaea;
background:#ffffff;
}

.login-container{
max-width:420px;
}

input,
textarea{
width:100%;
padding:12px;
margin-bottom:18px;
border:1px solid #ddd;
font-size:14px;
}

button{
cursor:pointer;
}

.contact-container button,
.login-container button,
.demo-submit-btn{
padding:12px 20px;
background:#000;
color:#fff;
border:none;
width:100%;
transition:0.3s;
}

.contact-container button:hover,
.login-container button:hover,
.demo-submit-btn:hover{
background:#222;
}

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

.footer{
background:#000;
color:#fff;
padding:50px 7%;
}

.footer-content{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

.footer-content ul{
list-style:none;
}

.footer-content ul li{
margin-bottom:8px;
}

.footer-content a{
color:#aaa;
font-size:14px;
}

.footer-bottom{
margin-top:30px;
font-size:13px;
text-align:center;
color:#777;
}

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

.animated-bg{
position:fixed;
top:0;
left:0;
width:200%;
height:100%;
z-index:-2;
overflow:hidden;
background:#f8f9fb;
}

.animated-bg svg{
width:100%;
height:100%;
}

.line{
fill:none;
stroke:#111;
stroke-width:1.2;
stroke-linecap:round;
opacity:0.7;
animation:rapidFlow 3s linear infinite;
filter:drop-shadow(0 0 6px rgba(0,150,255,0.4));
}

.line1{animation-duration:2.5s;}
.line2{animation-duration:3s;}
.line3{animation-duration:2s;}

@keyframes rapidFlow{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}

/* ================= AI BUTTON ================= */

.ai-button{
position:fixed;
bottom:25px;
right:25px;
background:#000;
color:#fff;
padding:12px 20px;
border-radius:30px;
cursor:pointer;
font-size:14px;
z-index:999;
transition:0.3s;
animation:pulse 2.5s infinite;
}

.ai-button:hover{
background:#111;
box-shadow:
0 0 10px rgba(0,150,255,0.5),
0 0 20px rgba(0,150,255,0.4);
}

/* ================= CHAT WINDOW ================= */

.chat-window{
position:fixed;
bottom:80px;
right:20px;
width:340px;
height:420px;
background:#fff;
border-radius:12px;
box-shadow:0 10px 40px rgba(0,0,0,0.15);
display:flex;
flex-direction:column;
overflow:hidden;
opacity:0;
transform:translateY(20px) scale(0.95);
pointer-events:none;
transition:0.35s;
z-index:999;
}

.chat-window.active{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}

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

.chat-header{
background:#000;
color:#fff;
padding:14px;
display:flex;
justify-content:space-between;
align-items:center;
font-size:14px;
}

.chat-header button{
background:none;
border:none;
color:#fff;
font-size:16px;
cursor:pointer;
}

/* ================= CHAT MESSAGES ================= */

#chatMessages{
flex:1;
padding:15px;
overflow-y:auto;
display:flex;
flex-direction:column;
}

.user-message{
align-self:flex-end;
background:#0078ff;
color:white;
padding:8px 12px;
border-radius:12px 12px 0 12px;
margin-bottom:8px;
font-size:13px;
animation:messagePop 0.25s ease;
}

.bot-message{
align-self:flex-start;
background:#f1f1f1;
padding:8px 12px;
border-radius:12px 12px 12px 0;
margin-bottom:8px;
font-size:13px;
animation:messagePop 0.25s ease;
}

/* ================= CHAT INPUT ================= */

.chat-input-area{
display:flex;
border-top:1px solid #eee;
}

.chat-input-area input{
flex:1;
border:none;
padding:12px;
font-size:13px;
outline:none;
}

.chat-input-area button{
background:#000;
color:#fff;
border:none;
padding:12px 16px;
cursor:pointer;
transition:0.3s;
}

.chat-input-area button:hover{
background:#222;
}

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

@keyframes messagePop{
from{transform:scale(0.9);opacity:0;}
to{transform:scale(1);opacity:1;}
}

@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(0,0,0,0.5);}
70%{box-shadow:0 0 0 12px rgba(0,0,0,0);}
100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
}

@keyframes fadeIn{
from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}