/* css/styles.css */

html { overflow-x: hidden; }

/* ===================== ANIMATED BACKGROUND ===================== */
.bg-animated {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-depth {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #000011 0%, #001144 30%, #003399 60%, #001144 80%, #000011 100%);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

@keyframes move-stripes {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(59px, 59px); }
}

.bg-stripes {
  position: absolute;
  inset: -100px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent           0px,
    transparent           14px,
    rgba(0, 51, 180, 0.50) 14px,
    rgba(0, 51, 180, 0.50) 20px,
    transparent           20px,
    transparent           34px,
    rgba(0, 34, 130, 0.30) 34px,
    rgba(0, 34, 130, 0.30) 40px,
    transparent           40px,
    transparent           56px,
    rgba(0, 40, 153, 0.18) 56px,
    rgba(0, 40, 153, 0.18) 62px,
    transparent           62px,
    transparent           76px,
    rgba(0, 51, 180, 0.40) 76px,
    rgba(0, 51, 180, 0.40) 83px
  );
  animation: move-stripes 6s linear infinite;
}

.bg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(0,0,22,0.65) 0%,
    rgba(0,0,22,0.10) 35%,
    rgba(0,0,22,0.00) 55%,
    rgba(0,0,22,0.55) 100%
  );
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 120% at 55% 50%, transparent 30%, rgba(0,0,17,0.75) 100%);
}

/* ===================== CUSTOM SCROLLBAR ===================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000022; }
::-webkit-scrollbar-thumb {
  background: #4488ff;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: #6699ff; }

/* ===================== BUTTONS ===================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #4488ff;
  color: #fff;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-primary:hover {
  box-shadow: 0 0 20px rgba(68,136,255,0.6), 0 8px 24px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #4488ff;
  font-weight: 600;
  padding: 13px 31px;
  border-radius: 8px;
  border: 1px solid #4488ff;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-outline:hover {
  background: rgba(68,136,255,0.1);
  box-shadow: 0 0 12px rgba(68,136,255,0.3);
  transform: translateY(-2px);
}

/* ===================== CARDS ===================== */
.glass-card {
  background: rgba(0,34,102,0.4);
  border: 1px solid rgba(68,136,255,0.2);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}
.glass-card:hover {
  border-color: rgba(68,136,255,0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

/* ===================== SECTION TITLES ===================== */
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
}
.section-subtitle {
  color: rgba(255,255,255,0.6);
  font-size: 1.05rem;
  margin-top: 12px;
}
.accent-line {
  width: 56px;
  height: 3px;
  background: #4488ff;
  border-radius: 2px;
  margin: 16px 0;
}

/* ===================== NAVBAR ===================== */
.navbar {
  background: transparent;
}
.navbar.scrolled {
  background: rgba(0, 0, 34, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(68,136,255,0.15);
}

/* ===================== PORTFOLIO ===================== */
.portfolio-item img {
  transition: transform 0.4s ease;
}
.portfolio-item:hover img {
  transform: scale(1.05);
}

/* ===================== FORM ===================== */
.form-input {
  background: rgba(0,34,102,0.3);
  border: 1px solid rgba(68,136,255,0.2);
  border-radius: 8px;
  padding: 12px 16px;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.form-input::placeholder { color: rgba(255,255,255,0.3); }
.form-input:focus {
  border-color: #4488ff;
  box-shadow: 0 0 0 3px rgba(68,136,255,0.15);
}

/* ===================== REVIEWS SWIPER ===================== */
.reviews-swiper .swiper-pagination-bullet {
  background: rgba(68,136,255,0.4);
}
.reviews-swiper .swiper-pagination-bullet-active {
  background: #4488ff;
}