/* ============ 4changeHUB custom styles ============ */

/* ---- Base ---- */
body {
  font-family: 'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }

/* ---- Tab views ---- */
.view-section { display: none; }
.view-section.active-view { display: block; }

/* ---- Page fade-in ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ---- Contact form icons ---- */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin-custom { animation: spin 1s linear infinite; }

@keyframes bounceCustom {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15%); }
}
.animate-bounce-custom { animation: bounceCustom 1s infinite; }

/* ---- Hero text entrance ---- */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero-in { opacity: 0; animation: heroIn 1.6s cubic-bezier(.16,1,.3,1) forwards; }
.hero-d1 { animation-delay: .5s; }
.hero-d2 { animation-delay: 1.1s; }
.hero-d3 { animation-delay: 1.7s; }

/* ---- Hero background: navy, orange, light purple, peach, white ---- */
.hero-gradient {
  background:
    radial-gradient(60% 80% at 75% 20%, rgba(196,181,253,.9), transparent 60%),
    radial-gradient(50% 70% at 95% 85%, rgba(254,215,170,.95), transparent 60%),
    radial-gradient(45% 60% at 55% 75%, rgba(245,166,35,.85), transparent 65%),
    linear-gradient(110deg, #003057 0%, #003057 38%, #1e3a6e 55%, #ffffff 100%);
}

/* ---- Respect visitors who turn off motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-in { opacity: 1; animation: none; }
}

@keyframes dotWave {
  0%, 70%, 100% { fill: rgba(232,231,253,0.9); transform: scale(1); }
  35% { fill: #d52b1e; transform: scale(1.4); }
}
.wave-dot {
  fill: rgba(232,231,253,0.9);
  transform-box: fill-box;
  transform-origin: center;
  animation: dotWave 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wave-dot { animation: none; }
}
/* ---- Full-width color bands ---- */
html, body { overflow-x: clip; }
.band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  padding-left: max(1.5rem, calc(50vw - 640px + 2rem)) !important;
  padding-right: max(1.5rem, calc(50vw - 640px + 2rem)) !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.band .hero-leaf { right: max(1.5rem, calc(50vw - 640px + 2rem)); }