/* CYFER SOLUTIONS - Shared Theme (Dark Blue, Red, White) */
:root {
  --cyfer-blue: #1e3a5f;
  --cyfer-blue-light: #2563eb;
  --cyfer-blue-hover: #1d4ed8;
  --cyfer-red: #dc2626;
  --cyfer-red-light: #ef4444;
  --cyfer-bg-dark: #0f172a;
  --cyfer-text-light: #e2e8f0;
  --cyfer-accent: #6366f1;
}

/* Theme check - runs before HTML */
.glass { 
  background: rgba(255, 255, 255, 0.7); 
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px); 
}
.dark .glass { 
  background: rgba(15, 23, 42, 0.7); 
}

.bubble { 
  position: absolute; 
  border-radius: 50%; 
  filter: blur(60px); 
  z-index: -1; 
  opacity: 0.35; 
}

/* Shimmer / Shine */
@keyframes shine { to { background-position: 200% center; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes blob { 
  0%, 100% { transform: translate(0, 0) scale(1); } 
  33% { transform: translate(40px, -60px) scale(1.2); } 
  66% { transform: translate(-30px, 30px) scale(0.8); } 
}
@keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

.animate-shine {
  background: linear-gradient(to right, var(--cyfer-blue) 20%, var(--cyfer-red) 40%, #fff 50%, var(--cyfer-red) 60%, var(--cyfer-blue) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 5s linear infinite;
    padding: 0.8rem;
  margin: -0.1em;
}
.animate-blob { animation: blob 10s infinite alternate; }
.animate-float { animation: float 5s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* Nav: Only ONE active at a time - use .nav-active class */
.nav-link { transition: color 0.2s; }
.nav-link.nav-active { color: var(--cyfer-accent) !important; }
.nav-link:hover:not(.nav-active) { color: var(--cyfer-blue-light) !important; }

/* Mobile bottom navigation */
.mobile-bottom-nav .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 2.9rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  color: #334155 !important;
}
.dark .mobile-bottom-nav .nav-link { color: #cbd5e1 !important; }
.mobile-bottom-nav .nav-link i {
  font-size: 1rem;
  line-height: 1;
}
.mobile-bottom-nav .nav-link.nav-active {
  color: #1d4ed8 !important;
}
.dark .mobile-bottom-nav .nav-link.nav-active {
  color: #93c5fd !important;
}

/* Service dropdown - blue hover */
select#service option:hover,
select#service option:focus,
.service-select option:hover { background: var(--cyfer-blue-hover) !important; }
select#service option:checked { background: var(--cyfer-blue-hover); color: white; }

/* Custom select styling for blue hover on options */
.service-select-wrapper select option:hover,
.service-select-wrapper select option:focus { background: var(--cyfer-blue-hover); }
select.cyfer-service-select { background-color: var(--cyfer-bg-dark); border-color: var(--cyfer-accent); }
select.cyfer-service-select option { padding: 12px; }
select.cyfer-service-select option:hover { background: var(--cyfer-blue-hover) !important; color: white !important; }

/* Extra animations for About etc */
@keyframes typewriter { from { width: 0; } to { width: 100%; } }
@keyframes bounce-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.typewriter { overflow: hidden; border-right: 3px solid var(--cyfer-blue); white-space: nowrap; animation: typewriter 3s steps(40) 1s forwards; }
.animate-bounce-soft { animation: bounce-soft 2s infinite; }
.animate-gradient-shift { background-size: 200% 200%; animation: gradient-shift 5s ease infinite; }

/* Home - team slider */
.team-section-shell {
  position: relative;
  border-radius: 2.5rem;
  padding-top: 1.1rem;
  overflow: hidden;
}
.team-section-shell::before {
  content: '';
  position: absolute;
  inset: 2.8rem auto auto -6.5rem;
  width: 17rem;
  height: 17rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0) 72%);
  pointer-events: none;
}
.team-section-shell::after {
  content: '';
  position: absolute;
  inset: auto -5.5rem 0 auto;
  width: 18rem;
  height: 18rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.16) 0%, rgba(244, 114, 182, 0) 74%);
  pointer-events: none;
}
.dark .team-section-shell::before {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.14) 0%, rgba(56, 189, 248, 0) 72%);
}
.dark .team-section-shell::after {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.14) 0%, rgba(96, 165, 250, 0) 74%);
}
.team-heading-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2.2rem;
  border-radius: 9999px;
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: none;
  color: #0f172a;
  background: linear-gradient(120deg, rgba(191, 219, 254, 0.9) 0%, rgba(226, 232, 240, 0.95) 52%, rgba(254, 242, 242, 0.9) 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 14px 32px -22px rgba(30, 58, 95, 0.7);
}
.dark .team-heading-pill {
  color: #dbeafe;
  background: linear-gradient(120deg, rgba(30, 58, 138, 0.48) 0%, rgba(30, 41, 59, 0.65) 52%, rgba(127, 29, 29, 0.42) 100%);
  border-color: rgba(147, 197, 253, 0.3);
  box-shadow: 0 20px 30px -24px rgba(15, 23, 42, 0.9);
}
.team-view-toggle {
  color: #0f172a;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(226, 232, 240, 0.94));
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 12px 28px -20px rgba(15, 23, 42, 0.8);
  transition: all 0.22s ease;
}
.team-view-toggle:hover {
  color: #1e40af;
  border-color: rgba(59, 130, 246, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -22px rgba(30, 64, 175, 0.65);
}
.team-view-toggle[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(120deg, #1e3a5f, #2563eb);
  border-color: rgba(37, 99, 235, 0.85);
}
.dark .team-view-toggle {
  color: #e2e8f0;
  background: linear-gradient(120deg, rgba(30, 41, 59, 0.94), rgba(51, 65, 85, 0.88));
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 15px 24px -20px rgba(2, 6, 23, 0.95);
}
.dark .team-view-toggle[aria-pressed="true"] {
  color: #0f172a;
  background: linear-gradient(120deg, #7dd3fc, #93c5fd);
  border-color: rgba(147, 197, 253, 0.9);
}
.team-slider-shell {
  position: relative;
  padding: 1.1rem 4.9rem 1rem;
  border-radius: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 24px 45px -35px rgba(15, 23, 42, 0.75);
}
.dark .team-slider-shell {
  border-color: rgba(71, 85, 105, 0.55);
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.72));
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.12), 0 25px 48px -34px rgba(2, 6, 23, 0.95);
}
.team-slider-btn {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.98), rgba(226, 232, 240, 0.85));
  color: #1e3a5f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 22px -16px rgba(15, 23, 42, 0.8);
  transform: translateY(-50%);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.team-slider-btn:hover {
  transform: translateY(-50%) scale(1.04);
  color: #1e40af;
  border-color: rgba(59, 130, 246, 0.5);
  background: #fff;
  box-shadow: 0 16px 24px -18px rgba(37, 99, 235, 0.55);
}
.team-slider-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.team-slider-btn:disabled:hover {
  transform: translateY(-50%);
  color: var(--cyfer-blue);
  border-color: rgba(30, 58, 95, 0.2);
  box-shadow: 0 12px 20px -16px rgba(15, 23, 42, 0.9);
}
.team-slider-btn-prev { left: 0.45rem; }
.team-slider-btn-next { right: 0.45rem; }
.team-slider-shell .team-slider-btn i {
  font-size: 1.45rem;
  line-height: 1;
}
.dark .team-slider-btn {
  color: #dbeafe;
  background: linear-gradient(120deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.86));
  border-color: rgba(148, 163, 184, 0.34);
}
.team-slider-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  padding: 0.45rem 0.1rem 1rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.team-slider-track::-webkit-scrollbar { display: none; }
.team-slider-track.team-slider-track-all {
  flex-wrap: wrap;
  justify-content: center;
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
}
.team-slider-track.team-slider-track-all .team-slide,
.team-slider-track.team-slider-track-all .team-slide-profile {
  flex: 1 1 230px;
  width: min(100%, 265px);
  max-width: 265px;
  scroll-snap-align: none;
}
.team-slide {
  position: relative;
  flex: 0 0 min(68vw, 185px);
  min-height: 235px;
  border-radius: 1.3rem;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  scroll-snap-align: start;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: linear-gradient(145deg, #f8fbff 0%, #eef4ff 52%, #fdf2f8 100%);
  box-shadow: 0 22px 36px -30px rgba(15, 23, 42, 0.72);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.team-slide:hover,
.team-slide:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 28px 44px -30px rgba(37, 99, 235, 0.5);
}
.dark .team-slide {
  border-color: rgba(71, 85, 105, 0.55);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.96), rgba(30, 58, 95, 0.88), rgba(15, 23, 42, 0.95));
  box-shadow: 0 26px 40px -31px rgba(2, 6, 23, 0.9);
}
.dark .team-slide:hover,
.dark .team-slide:focus-visible {
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 28px 46px -30px rgba(30, 64, 175, 0.55);
}
.team-slide-profile {
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  width: min(68vw, 185px);
  cursor: default;
}
.team-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: scale(1.02);
  transition: transform 0.55s ease;
}
.team-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.03) 38%, rgba(15, 23, 42, 0.72) 100%);
  z-index: 1;
  transition: opacity 0.5s ease;
}
.dark .team-slide::after {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.08) 34%, rgba(2, 6, 23, 0.8) 100%);
}
.team-slide:hover img,
.team-slide:focus-visible img {
  transform: scale(1.06);
}
.team-slide:hover::after,
.team-slide:focus-visible::after {
  opacity: 0.2;
}
.team-slide-meta {
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  bottom: 1.05rem;
  color: #fff;
  z-index: 2;
}
.team-slide-meta h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
}
.team-slide-meta p {
  margin: 0.42rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.95;
}
.team-slide-bio {
  margin: 0.6rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.95);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.team-slide-snippet {
  display: inline-block;
  margin-top: 0.62rem;
  padding: 0.28rem 0.62rem;
  border-radius: 9999px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e0f2fe;
  background: rgba(15, 23, 42, 0.48);
}
.team-slide-join {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, var(--cyfer-blue), #2d3a95);
  text-decoration: none;
}
.team-slide-join::after { display: none; }
.team-slide-join span {
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  transition: transform 0.25s ease;
}
.team-slide-join small {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.team-slide-join:hover span { transform: scale(1.05); }
.team-slide.team-slide-no-photo {
  padding: 1.15rem;
  display: flex;
  align-items: flex-start;
  min-height: 240px;
}
.team-slide.team-slide-no-photo::after {
  display: none;
}
.team-slide.team-slide-no-photo .team-slide-meta {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  color: #0f172a;
}
.dark .team-slide.team-slide-no-photo .team-slide-meta {
  color: #e2e8f0;
}
.team-slide.team-slide-no-photo .team-slide-meta p {
  color: #1e293b;
}
.dark .team-slide.team-slide-no-photo .team-slide-meta p {
  color: #cbd5e1;
}
.team-slide.team-slide-no-photo .team-slide-bio {
  color: rgba(30, 41, 59, 0.9);
}
.dark .team-slide.team-slide-no-photo .team-slide-bio {
  color: rgba(226, 232, 240, 0.9);
}
.team-slide.team-slide-no-photo .team-slide-snippet {
  color: #1e3a8a;
  background: rgba(59, 130, 246, 0.12);
}
.dark .team-slide.team-slide-no-photo .team-slide-snippet {
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.2);
}
.team-slider-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.5rem;
}
.team-slider-dot {
  width: 0.58rem;
  height: 0.58rem;
  border: 0;
  border-radius: 9999px;
  background: rgba(100, 116, 139, 0.38);
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.team-slider-dot.active {
  background: #3b82f6;
  transform: scale(1.4);
}
.dark .team-slider-dot {
  background: rgba(147, 197, 253, 0.35);
}
.dark .team-slider-dot.active {
  background: #93c5fd;
}

.team-slide-profile:focus-visible,
.team-slide-join:focus-visible,
.team-slider-btn:focus-visible,
.team-slider-dot:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  body { padding-bottom: 5.8rem; }
  .team-slider-shell { padding: 0.9rem 3.6rem 0.85rem; }
  .team-slider-btn {
    width: 3rem;
    height: 3rem;
  }
  .team-slider-btn-prev { left: 0.15rem; }
  .team-slider-btn-next { right: 0.15rem; }
  .team-slider-shell .team-slider-btn i { font-size: 1.25rem; }
}
@media (min-width: 768px) {
  .team-slide,
  .team-slide-profile { flex-basis: 214px; width: 214px; }
}
@media (min-width: 1024px) {
  .team-slide,
  .team-slide-profile { flex-basis: 232px; width: 232px; }
}

/* Services page */
.service-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.service-icon { transition: all 0.5s ease; }
.service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); }
.feature-badge { background: linear-gradient(135deg, var(--cyfer-blue), var(--cyfer-red)); }
.process-step::before { content: ''; position: absolute; width: 40px; height: 40px; background: rgba(30, 58, 95, 0.1); border-radius: 50%; z-index: -1; animation: pulse-glow 2s infinite; }
.tech-stack-tag {
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  min-height: 8.2rem;
  padding: 1rem 0.9rem !important;
}
.tech-stack-tag:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
.tech-stack-tag i,
.tech-stack-tag img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  margin-bottom: 0 !important;
  object-fit: contain;
}
.tech-stack-tag span {
  display: block;
  line-height: 1.35;
}
@media (min-width: 1024px) {
  .tech-stack-tag {
    min-height: 8.8rem;
    padding: 1.1rem 1rem !important;
  }
}

/* Contact page */
.contact-input { transition: all 0.3s ease; }
.contact-input:focus { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(30, 58, 95, 0.3); }
.contact-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.contact-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25); }
.submit-btn { background: linear-gradient(135deg, var(--cyfer-blue), var(--cyfer-red)); transition: all 0.3s ease; }
.submit-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -12px rgba(30, 58, 95, 0.4); }