/* Reset & Global */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #0b0f19;
  color: #e5e5e5;
}

/* Hero with Slideshow */
#hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slideshow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  z-index: 0;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  top: 40%;
  transform: translateY(-40%);
  color: #fff;
}

.hero-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 1.4rem;
  margin-bottom: 30px;
}

.btn {
  background: #0d6efd;
  color: #fff;
  padding: 14px 40px;
  border-radius: 50px;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.4s ease;
}

.btn:hover {
  background: #0b5ed7;
}

/* Features, Gallery, Footer - ostaje isto kao pre */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 20px; margin-top: 40px;}
.feature {background: rgba(255,255,255,0.05); padding: 30px; border-radius: 16px; text-align:center; transition: 0.4s;}
.feature:hover {transform: translateY(-5px);}
.feature h3 {color: #0d6efd; margin-bottom: 10px;}
.image-section {text-align: center; margin: 80px 0;}
.gallery {display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;}
.gallery img {max-width: 320px; border-radius: 12px; transition: 0.4s;}
.gallery img:hover {transform: scale(1.05);}
footer {text-align:center; padding:20px; background:#0d1117; color:#999; margin-top:60px;}

/* Chatbot & Buttons */
#chatbot {position: fixed; bottom: 80px; right: 30px; width: 340px; height: 480px; display: none; flex-direction: column; background: rgba(15,23,42,0.95); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); font-size: 0.9rem; z-index: 9999; overflow: hidden; opacity:0; transform:scale(0.9); transition: opacity 0.4s, transform 0.4s;}
#chatbot.show {display:flex!important; opacity:1; transform:scale(1);}
#chatHeader {background:#0d6efd; padding:12px; font-weight:bold; display:flex; justify-content:space-between; align-items:center;}
#chatHeader button {background:transparent; color:#fff; border:none; font-size:1.2rem; cursor:pointer;}
#chatBody {flex:1; padding:10px; display:flex; flex-direction:column; overflow-y:auto;}
.message {margin:8px 0; padding:8px 12px; border-radius:8px; max-width:80%;}
.message.bot {background:#0d6efd; color:#fff; align-self:flex-start;}
.message.user {background:#1e293b; align-self:flex-end; color:#fff;}
.options {display:flex; flex-direction:column; gap:8px; margin:10px 0;}
.options button {background:#1e293b; color:#fff; border:none; padding:8px; border-radius:6px; cursor:pointer;}
.options button:hover {background:#0d6efd;}
#chatInputArea {display:flex; border-top:1px solid #444;}
#chatInput {flex:1; padding:8px; border:none; outline:none;}
#sendBtn {background:#0d6efd; color:#fff; border:none; padding:8px 12px; cursor:pointer;}
#chatToggle {position:fixed; bottom:20px; right:30px; width:60px; height:60px; background:#fff; border:none; border-radius:50%; box-shadow:0 8px 20px rgba(0,0,0,0.4); cursor:pointer; z-index:10000; display:flex; align-items:center; justify-content:center;}
#chatToggle img {width:60%; height:60%;}

/* Robotic Hand */
#chatIndicator {position:fixed; bottom:95px; right:33px; width:60px; height:auto; z-index:10001; animation:pulseArrow 1.5s infinite ease-in-out; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));}
@keyframes pulseArrow {0%{transform:scale(1) translateY(0); opacity:1;} 50%{transform:scale(1.1) translateY(-5px); opacity:0.8;} 100%{transform:scale(1) translateY(0); opacity:1;}}