:root {
  --primary:#2dc0e8;
  --primary-dark:#3294c3;
  --primary-light:#00c6fb;
  --secondary:#626262;
  --dark:#2d2d2d;
  --light-gray:#f4f4f4;
  --border-color:#ebebeb;
  --light-text:#adadad;
}

body { color:var(--secondary); font-family:'Open Sans',sans-serif; }
h1,h2,h3,h4,h5,h6 { color:var(--dark); font-family:'Roboto',sans-serif; font-weight:500; }
a { color:var(--primary); text-decoration:none; transition:.3s; }
a:hover { color:var(--primary-dark); }

.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn-light { background:rgba(255,255,255,.7); border-color:var(--border-color); }
.btn-light:hover { background:rgba(255,255,255,.39); }

.bg-primary { background:linear-gradient(45deg,var(--primary-light) 0%,var(--primary-dark) 100%) !important; }
.text-primary { color:var(--primary)!important; }

.navbar { box-shadow:0 2px 10px rgba(0,0,0,.1); }
.navbar-light .navbar-nav .nav-link {
  color:var(--secondary); text-transform:uppercase; font-size:.9rem; letter-spacing:1px;
  padding:10px; margin:10px; font-family:'Lato',sans-serif;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color:var(--dark); border-top:3px solid var(--primary); padding-top:7px;
}
.navbar-light .navbar-nav .nav-link.active { color:var(--dark); }

.hero-section { margin-bottom:0; }
.carousel-item {
  height:400px; background-size:cover; background-position:center; background-repeat:no-repeat;
}
.carousel-overlay { position:absolute; inset:0; background:rgba(0,0,0,.35); pointer-events:none; z-index:1; }
.hero-section .carousel .container { position:relative; z-index:2; }

.intro-section { background:linear-gradient(45deg,var(--primary-light) 0%,var(--primary-dark) 100%); color:#fff; }

.bg-light { background-color:var(--light-gray)!important; }

#op-home .card-title { margin-top:1rem; margin-bottom:.75rem; }

#op-feat .feature-card { padding:20px; height:100%; }
#op-feat i,#op-feat h5 { color:#fff; }
#op-feat h5 { margin-bottom:1rem; }

.screenshots-gallery img { transition:.3s; margin-bottom:1rem; }
.screenshots-gallery img:hover { transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,.1); }

.gallery-img { cursor:pointer; transition:transform .3s ease; }
.gallery-img:hover { transform:scale(1.03); }
.lightbox {
  display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.9);
  justify-content:center; align-items:center;
}
.lightbox-content { max-width:90%; max-height:90%; }
.lightbox-close {
  position:absolute; top:20px; right:20px; color:#fff; font-size:30px; background:none; border:none; cursor:pointer;
}

.footer-map iframe { filter:grayscale(100%) contrast(1.05); }

.contact-form .form-control {
  padding:.75rem 1rem; border-radius:.25rem; background:#fff; border:1px solid #d0d7de;
}
.contact-form .form-control:focus {
  border-color:var(--primary-dark); box-shadow:0 0 0 .2rem rgba(50,148,195,.15);
}

.hp-field {
  position:absolute!important; left:-10000px!important; top:auto!important;
  width:1px!important; height:1px!important; overflow:hidden!important;
}

.modal.modal-right .modal-dialog {
  position:fixed; margin:0; right:0; top:0; height:100dvh; transform:none!important;
}
.modal.modal-right .modal-content { height:100dvh; border-radius:0; border-left:1px solid rgba(0,0,0,.1); }
.modal.modal-right .modal-header { background:#fff; color:inherit; border-bottom:1px solid #e9ecef; }
.modal.modal-right .modal-body { background:#f7f9fc; overflow-y:auto; }

.typing-indicator {
  display: inline-block;
}
.typing-dots {
  display: inline-block;
}
.typing-dots span {
  animation: typing 1.4s infinite;
  opacity: 0.6;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes typing {
  0%, 60%, 100% { opacity: 0.6; }
  30% { opacity: 1; }
}

.ai-widget .card { border:2px solid #ffc107; border-radius:15px; transition:.3s; animation:slideInUp .3s ease; }
.ai-widget .btn-warning { background:#ffc107; border-color:#ffc107; transition:.3s; }
.ai-widget .btn-warning:hover { background:#e0a800; border-color:#e0a800; transform:scale(1.05); }
.ai-widget .card-header { border-bottom:2px solid #ffc107; border-radius:13px 13px 0 0!important; }

#chatMessages .alert { border-radius:15px; border:1px solid #dee2e6; }
#chatMessages .alert-primary { background:#e3f2fd; border-color:#bbdefb; }
#chatMessages .alert-warning { background:#fff3cd; border-color:#ffeaa7; }

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

#chatMessages::-webkit-scrollbar { width:6px; }
#chatMessages::-webkit-scrollbar-track { background:#f1f1f1; border-radius:3px; }
#chatMessages::-webkit-scrollbar-thumb { background:#ffc107; border-radius:3px; }
#chatMessages::-webkit-scrollbar-thumb:hover { background:#e0a800; }

footer.bg-dark h4 { color:#d8dde3!important; }
footer.bg-dark .text-secondary { color:#c2c8cf!important; }

@media (min-width:992px) {
  .modal.modal-right .modal-dialog { max-width:50vw; width:50vw; }
}
@media (max-width:991.98px) {
  .modal.modal-right .modal-dialog { width:100vw; max-width:100vw; }
}
@media (max-width:768px) {
  .carousel-item { height:380px; }
  .py-5 { padding-top:3rem!important; padding-bottom:3rem!important; }
}
@media (max-width:480px) {
  .carousel-item { height:200px; }
  .py-5 { padding-top:2rem!important; padding-bottom:2rem!important; }
}