.glass-card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.glass-card h2 {
  margin-top: 0;
  font-size: 28px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 10px;
  text-align: center;
}

.details {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

.details li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  transition: color 0.3s ease;
}

.details li:hover {
  color: #e0f7fa;
}

.my_PP {
  width: 160px;
  height: auto;
  max-width: 100%;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

.project-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(.2,.9,.2,1), transform 0.7s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

.reveal-on-scroll.show { opacity: 1; transform: none; }
.reveal-stagger > .reveal-on-scroll { transition-delay: 0ms; }

.icon-anim { animation: float 4s ease-in-out infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.animate-pop {
  transform-origin: center;
  transition: transform 0.25s ease;
}

.animate-pop:hover { transform: scale(1.04); }

#promo-popup { transition: opacity 0.3s ease-out; }
#promo-popup:not(.hidden) { animation: fadeIn 0.4s ease-out; }
#promo-popup .glass-card { animation: slideUp 0.5s ease-out; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.navbar { transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; }
.navbar.scrolled {
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgba(2, 6, 23, 0.45);
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.25);
  backdrop-filter: blur(6px);
}

.hero-parallax { transition: transform 0.2s linear; will-change: transform; }
html { scroll-behavior: smooth; }

.footer-content {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  align-items: center;
}

.footer-content a {
  color: #cbd5e1;
  text-decoration: none;
}

.footer-content a:hover,
.footer-content a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.mini-chat-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.4);
  cursor: pointer;
  z-index: 2200;
}

.mini-chat-panel {
  position: fixed;
  right: 20px;
  bottom: 88px;
  width: 320px;
  max-width: calc(100% - 40px);
  background: #17324d;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgb(2, 6, 23);
  z-index: 2200;
  color: #fff;
  overflow: hidden;
  display: none;
}

#mini-chat { display: none; }

.mini-chat-panel.open { display: block; }
.mini-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #fff; }
.mini-chat-title { font-weight: 700; font-size: 14px; }
.mini-chat-body { max-height: 260px; overflow: auto; padding: 12px; font-size: 14px; line-height: 1.4; }
.mini-chat-message { margin: 8px 0; padding: 8px 10px; border-radius: 8px; display: inline-block; max-width: 100%; }
.mini-chat-message.user { background: rgb(0, 50, 100); color: #fff; align-self: flex-end; }
.mini-chat-message.bot { background: #315b7d; color: #fff; }
.mini-chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #fff; }
.mini-chat-input textarea { flex: 1; resize: none; padding: 8px; border-radius: 8px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.233); min-height: 40px; }
.mini-chat-input button { padding: 8px 10px; border-radius: 4px; background: #d97706; color: #fff; border: none; cursor: pointer; }
.mini-chat-suggestions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mini-chat-suggestion { background-color: rgba(74, 104, 236, 0.747); color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); padding: 6px 8px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; }
.mini-chat-suggestion:hover, .mini-chat-suggestion:focus-visible { background-color: #d97706; border-color: #d97706; }
.mini-chat-typing { opacity: 0.72; animation: chatPulse 1s ease-in-out infinite; }

@keyframes chatPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (max-width: 600px) {
  .glass-card { padding: 20px; }
  .glass-card h2 { font-size: 24px; }
  .details li { font-size: 15px; }
  .project-image { height: 140px; }
  .my_PP { width: 140px; }
}

@media (max-width: 420px) {
  .mini-chat-panel { right: 10px; left: 10px; width: auto; bottom: 80px; }
}