/* ==== GOOGLE FONT ==== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@400;600&display=swap');

/* ==== RESET ==== */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0a0a0f; color:#e0e0e0; font-family:'Rajdhani', sans-serif; line-height:1.6; }

/* ==== HERO ==== */
.hero { text-align:center; padding:80px 20px; background:radial-gradient(circle at center, #0f0f1a 0%, #050510 100%); color:#00f7ff; border-bottom:2px solid rgba(0,255,255,0.3); text-shadow:0 0 10px #00f7ff,0 0 20px #0099cc; }
.hero .logo { width:220px; margin-bottom:20px; filter:drop-shadow(0 0 15px #00f7ff); }
.hero h1 { font-size:3em; font-family:'Orbitron',sans-serif; margin-bottom:15px; }
.hero p { font-size:1.3em; margin-bottom:25px; color:#aeefff; }
.hero .btn { display:inline-block; padding:14px 30px; background:transparent; border:2px solid #00f7ff; color:#00f7ff; text-decoration:none; border-radius:8px; font-family:'Orbitron',sans-serif; text-transform:uppercase; transition:0.3s; box-shadow:0 0 10px #00f7ff inset,0 0 10px #00f7ff; }
.hero .btn:hover { background:#00f7ff; color:#0a0a0f; box-shadow:0 0 25px #00f7ff,0 0 50px #00f7ff; }

/* ==== ABOUT ==== */
.about, .founder { padding:60px 20px; max-width:1000px; margin:0 auto; border-left:2px solid rgba(0,255,200,0.3); border-right:2px solid rgba(0,255,200,0.3); background:rgba(15,15,25,0.8); box-shadow:0 0 30px rgba(0,255,200,0.2); }
.about h1, .founder h2 { font-size:2.2em; font-family:'Orbitron',sans-serif; color:#39ff14; text-shadow:0 0 10px #39ff14,0 0 20px #00ff99; margin-bottom:20px; }

/* ==== SERVICES ==== */
.services { padding:60px 20px; text-align:center; background:linear-gradient(180deg,#0a0a12,#0f0f1a); }
.services h2 { font-size:2.5em; font-family:'Orbitron',sans-serif; color:#bb86fc; text-shadow:0 0 15px #bb86fc,0 0 30px #7700ff; margin-bottom:40px; }
.service-list { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; }
.service { background:rgba(20,20,35,0.9); padding:25px; border-radius:15px; width:280px; text-align:center; border:1px solid rgba(187,134,252,0.3); box-shadow:0 0 15px rgba(187,134,252,0.4); transition: transform 0.3s, box-shadow 0.3s; }
.service:hover { transform:translateY(-10px) scale(1.05); box-shadow:0 0 25px #bb86fc,0 0 50px #7700ff; }
.service h3 { color:#bb86fc; margin-bottom:12px; font-family:'Orbitron',sans-serif; }

/* ==== VIDEO ==== */
.video { text-align:center; padding:60px 20px; background:#0d0d15; }
.video h2 { font-size:2.2em; color:#00f7ff; font-family:'Orbitron',sans-serif; text-shadow:0 0 15px #00f7ff,0 0 30px #0099cc; margin-bottom:20px; }
.video-container { position:relative; max-width:900px; margin:0 auto; padding-top:56.25%; border:2px solid #00f7ff; border-radius:15px; box-shadow:0 0 20px #00f7ff,0 0 40px #0099cc; overflow:hidden; }
.video-container video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }

/* ==== WHY US ==== */
.why-us { padding:60px 20px; background:#0a0a12; }
.why-us h2 { font-size:2.2em; color:#39ff14; font-family:'Orbitron',sans-serif; text-shadow:0 0 15px #39ff14,0 0 30px #00ff99; margin-bottom:25px; }
.why-us ul { list-style:none; max-width:800px; margin:0 auto; padding:0; }
.why-us ul li { background:rgba(15,15,25,0.8); margin:12px 0; padding:18px; border-radius:8px; border:1px solid rgba(57,255,20,0.3); box-shadow:0 0 10px rgba(57,255,20,0.4); }

/* ==== CONTACT ==== */
.contact { padding:60px 20px; text-align:center; background:linear-gradient(180deg,#0f0f1a,#050510); }
.contact h2 { font-size:2.2em; color:#ff2b75; font-family:'Orbitron',sans-serif; text-shadow:0 0 15px #ff2b75,0 0 30px #ff005c; margin-bottom:20px; }
#contact-form { max-width:500px; margin:0 auto; display:flex; flex-direction:column; gap:15px; }
#contact-form input, #contact-form textarea { padding:14px; border:none; border-radius:8px; outline:none; background:#1a1a25; color:#fff; border:1px solid #ff2b75; box-shadow:0 0 10px rgba(255,43,117,0.5); }
#contact-form button { padding:14px; background:#ff2b75; color:white; border:none; border-radius:8px; font-family:'Orbitron',sans-serif; cursor:pointer; transition:0.3s; box-shadow:0 0 15px #ff2b75,0 0 30px #ff005c; }
#contact-form button:hover { background:#ff005c; box-shadow:0 0 25px #ff2b75,0 0 50px #ff005c; }

/* ==== FOOTER ==== */
footer { text-align:center; padding:25px; background:#050510; font-size:0.9em; color:#bbb; border-top:1px solid rgba(0,255,255,0.2); text-shadow:0 0 8px #00f7ff; }

/* ==== RESPONSIVE ==== */
@media (max-width:768px){ .hero h1{font-size:2em;} .hero .logo{width:160px;} .service-list{flex-direction:column;align-items:center;} .video h2{font-size:1.6em;} }

/* ==== FORM STATUS ==== */
.form-status { margin-top:10px; font-size:0.9em; }
.success { color:green; }
.error { color:red; }

/* ==== CYBER IA WIDGET ==== */
#cyber-ai-widget { position:fixed; bottom:20px; right:20px; width:320px; max-height:420px; background:rgba(0,0,20,0.95); border:2px solid #00f7ff; border-radius:12px; box-shadow:0 0 20px #00f7ff,0 0 40px #00ffff; font-family:'Rajdhani',sans-serif; display:flex; flex-direction:column; z-index:9999; overflow:hidden; }
#cyber-ai-header { background:linear-gradient(90deg,#00f7ff,#00ffcc); color:#0a0a0f; padding:12px; font-weight:bold; border-top-left-radius:10px; border-top-right-radius:10px; text-align:center; text-shadow:0 0 5px #00f7ff; cursor:pointer; }
#cyber-ai-body { flex:1; display:flex; flex-direction:column; padding:8px; overflow:hidden; }
#cyber-ai-messages { flex:1; overflow-y:auto; margin-bottom:8px; font-size:0.9em; }
.cyber-ai-message { margin:4px 0; padding:6px 10px; border-radius:6px; font-size:0.9em; word-wrap:break-word; opacity:0; animation:fadeIn 0.4s forwards; }
.cyber-ai-user { background:#00f7ff; color:#0a0a0f; text-align:right; }
.cyber-ai-bot { background:#39ff14; color:#0a0a0f; text-align:left; }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
#cyber-ai-input-container { display:flex; gap:4px; }
#cyber-ai-input { flex:1; padding:10px; border-radius:6px; border:1px solid #00f7ff; background:#0a0a12; color:#fff; outline:none; font-family:'Rajdhani',sans-serif; transition:0.3s; }
#cyber-ai-input:focus { box-shadow:0 0 10px #00f7ff; }
#cyber-ai-send { padding:10px; background:#00f7ff; border:none; border-radius:6px; cursor:pointer; color:#0a0a0f; font-weight:bold; transition:0.3s; }
#cyber-ai-send:hover { background:#00ffcc; box-shadow:0 0 10px #00ffcc; }