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

:root{

--primary-cyan:#00E5FF;
--accent-blue:#0EA5E9;

--dark-bg:#000000;
--dark-card:#0A0F1C;

--text-primary:#FFFFFF;
--text-secondary:#94A3B8;

}

html{
scroll-behavior:smooth;
}

body{

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

background:var(--dark-bg);
color:var(--text-primary);

line-height:1.6;

overflow-x:hidden;

}

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

#ai-network{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

z-index:0;

pointer-events:none;

}

.grid-bg{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
radial-gradient(circle at 20% 20%, rgba(0,229,255,0.15), transparent 40%),
radial-gradient(circle at 80% 30%, rgba(14,165,233,0.15), transparent 40%);

z-index:1;

pointer-events:none;

}

/* =========================
CURSOR GLOW
========================= */

.cursor-glow{

position:fixed;

width:12px;
height:12px;

border-radius:50%;

background:rgba(0,229,255,0.5);

pointer-events:none;

mix-blend-mode:screen;

transform:translate(-50%,-50%);

z-index:9998;

filter:blur(4px);

transition:left 0.1s, top 0.1s;

}

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

nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 7%;

position:fixed;

width:100%;
top:0;

background:rgba(0,0,0,0.6);

backdrop-filter:blur(10px);

border-bottom:1px solid rgba(0,229,255,0.1);

z-index:100;

}

.logo{

font-weight:700;
font-size:1.2rem;

}

.flag{

font-size:14px;

margin-left:6px;

vertical-align:middle;

}

.accent{

color:var(--primary-cyan);

}

nav ul{

display:flex;

gap:25px;

list-style:none;

}

nav a{

text-decoration:none;

color:var(--text-primary);

font-size:0.95rem;

transition:color 0.3s ease;

}

nav a:hover{

color:var(--primary-cyan);

}

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

.hero{

position:relative;

z-index:2;

min-height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:0 20px;

max-width:1000px;

margin:auto;

}

.hero h1{

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

font-size:4.5rem;

line-height:1.05;

font-weight:800;

}

.hero span{

background:linear-gradient(90deg,var(--primary-cyan),var(--accent-blue));

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

background-clip:text;

}

.hero p{

max-width:700px;

color:var(--text-secondary);

font-size:1.05rem;

margin-top:1.5rem;

}

.hero-buttons{

display:flex;

gap:20px;

margin-top:30px;

flex-wrap:wrap;

justify-content:center;

}

.cta{

background:var(--primary-cyan);

padding:14px 28px;

border-radius:10px;

color:var(--dark-bg);

text-decoration:none;

font-weight:600;

transition:all 0.3s ease;

}

.cta:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,229,255,0.3);

}

.secondary{

border:1px solid var(--primary-cyan);

padding:14px 28px;

border-radius:10px;

color:var(--text-primary);

text-decoration:none;

font-weight:600;

transition:all 0.3s ease;

}

.secondary:hover{

background:rgba(0,229,255,0.1);

}

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

.section{

position:relative;

z-index:2;

padding:140px 8%;

text-align:center;

max-width:1200px;

margin:auto;

scroll-margin-top:100px;

}

.section h2{

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

font-size:3rem;

font-weight:700;

margin-bottom:3rem;

}

/* =========================
CARDS
========================= */

.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:35px;

margin-top:50px;

}

.card{

background:rgba(10,15,28,0.7);

padding:40px;

border-radius:16px;

border:1px solid rgba(0,229,255,0.18);

backdrop-filter:blur(14px);

transition:all 0.35s ease;

cursor:pointer;

}

.card:hover{

transform:translateY(-10px) scale(1.02);

box-shadow:0 0 40px rgba(0,229,255,0.35);

}

.card h3{

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

font-size:1.4rem;

margin-bottom:1rem;

font-weight:600;

}

.card p{

color:var(--text-secondary);

line-height:1.7;

}

/* =========================
ARCHITECTURE
========================= */

.architecture-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:25px;

margin-top:50px;

}

.node{

padding:40px;

border-radius:16px;

background:var(--dark-card);

border:1px solid rgba(0,229,255,0.2);

transition:all 0.3s ease;

font-weight:500;

}

.node:hover{

transform:translateY(-8px);

box-shadow:0 0 30px rgba(0,229,255,0.35);

}

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

.contact-form{

max-width:700px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-top:40px;

}

.contact-form input,
.contact-form textarea{

background:rgba(2,6,23,0.8);

border:1px solid rgba(0,229,255,0.2);

padding:14px;

border-radius:8px;

color:var(--text-primary);

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

font-size:0.95rem;

transition:border 0.3s ease;

}

.contact-form input:focus,
.contact-form textarea:focus{

outline:none;

border-color:var(--primary-cyan);

}

.contact-form textarea{

grid-column:span 2;

height:120px;

resize:vertical;

}

.contact-form button{

grid-column:span 2;

background:var(--primary-cyan);

border:none;

padding:14px;

border-radius:10px;

font-weight:600;

cursor:pointer;

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

transition:all 0.3s ease;

}

.contact-form button:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,229,255,0.3);

}

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

footer{

position:relative;

z-index:2;

padding:60px;

text-align:center;

color:var(--text-secondary);

border-top:1px solid rgba(0,229,255,0.08);

}

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

@media(max-width:768px){

nav ul{

display:none;

}

.hero h1{

font-size:3rem;

}

.section h2{

font-size:2.5rem;

}

.contact-form{

grid-template-columns:1fr;

}

.contact-form textarea,
.contact-form button{

grid-column:span 1;

}

}

@media(max-width:600px){

.ai-chat-container{

position:fixed;

bottom:90px;
right:5%;

width:90%;
height:420px;

background:#0A0F1C;

border-radius:16px;

border:1px solid rgba(0,229,255,0.3);

display:none;
flex-direction:column;

overflow:hidden;

z-index:10000;

box-shadow:0 0 30px rgba(0,229,255,0.15);

}

}

/* header */

.ai-chat-header{

padding:14px;

background:#020617;

display:flex;

justify-content:space-between;
align-items:center;

font-weight:600;

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

}

/* messages */

.ai-message.user{

background:#00E5FF;

color:#000;

margin-left:auto;

padding:8px 12px;

border-radius:8px;

max-width:80%;

}

/* message bubbles */

.ai-message{

margin-bottom:10px;

padding:10px 12px;

border-radius:10px;

max-width:80%;

font-size:14px;

line-height:1.5;

word-wrap:break-word;

}

.ai-message.user{

background:#00E5FF;

color:#000;

margin-left:auto;

}

.ai-message.bot{

background:#111827;

color:#e5e7eb;

}

/* input area */

.ai-chat-input-container{

display:flex;

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

}

.ai-chat-input-container input{

flex:1;

background:#020617;

color:white;

border:none;

padding:12px;

}

.ai-chat-input-container button{

background:#00E5FF;

border:none;

padding:12px 16px;

cursor:pointer;

font-weight:600;

}
/* =========================
AI AGENT
========================= */

.ai-agent-container{
position:fixed;
z-index:9999;
pointer-events:none;
}

.ai-avatar{

width:68px;
height:68px;

border-radius:50%;

background:linear-gradient(135deg, rgba(0,229,255,0.7), rgba(14,165,233,0.7));

display:flex;
align-items:center;
justify-content:center;

font-size:26px;

cursor:pointer;

pointer-events:all;

backdrop-filter:blur(6px);

border:1px solid rgba(0,229,255,0.35);

box-shadow:0 6px 25px rgba(0,229,255,0.25);

transition:transform .3s ease;

}

.ai-avatar:hover{

transform:scale(1.08);

}

.ai-avatar:hover{

transform:scale(1.08);

opacity:1;

}

.ai-avatar:hover{
transform:scale(1.08);
}

@keyframes agentFloat{
0%,100%{transform:translateY(0px)}
50%{transform:translateY(-6px)}
}
/* AI CHAT */

.ai-chat-container{

position:fixed;

bottom:110px;
right:30px;

width:360px;
height:420px;

background:#0A0F1C;

border-radius:16px;

border:1px solid rgba(0,229,255,0.3);

display:none;
flex-direction:column;

overflow:hidden;

z-index:10000;

box-shadow:0 0 25px rgba(0,229,255,0.15);

}

.ai-chat-header{
padding:16px;
display:flex;
justify-content:space-between;
align-items:center;
background:#020617;
border-bottom:1px solid rgba(0,229,255,0.2);
}

.ai-chat-messages{
height:260px;
overflow-y:auto;
padding:16px;
font-size:14px;
}

.ai-message{
margin-bottom:12px;
}

.ai-message.user{
text-align:right;
color:#00E5FF;
}

.ai-message.bot{
color:#94A3B8;
}

.ai-chat-input-container{
display:flex;
border-top:1px solid rgba(0,229,255,0.2);
}

.ai-chat-input-container input{
flex:1;
padding:12px;
border:none;
background:#020617;
color:white;
}

.ai-chat-input-container button{
background:#00E5FF;
border:none;
padding:12px 16px;
cursor:pointer;
}
/* AI FACE */

.ai-face{
display:flex;
gap:6px;
}

.eye{

width:8px;
height:8px;

background:#000;

border-radius:50%;

animation:blink 4s infinite;

}

@keyframes blink{

0%,95%,100%{
transform:scaleY(1);
}

97%{
transform:scaleY(0.1);
}

}