/* ===== BASE ===== */
* { font-family: 'Inter', sans-serif; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* ===== ANIMATIONS ===== */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

.hero-gradient {
  background: linear-gradient(-45deg, #0f172a, #1e293b, #1e3a5f, #0c1a33);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}
.anim-0 { animation: fadeInUp 1s ease 0s forwards; opacity: 0; }
.anim-1 { animation: fadeInUp 1s ease .3s forwards; opacity: 0; }
.anim-2 { animation: fadeInUp 1s ease .6s forwards; opacity: 0; }
.anim-3 { animation: fadeInUp 1s ease .9s forwards; opacity: 0; }
.f1 { animation: float 6s ease-in-out infinite; }
.f2 { animation: float 8s ease-in-out 1s infinite; }
.f3 { animation: float 10s ease-in-out 2s infinite; }

/* ===== NAVBAR ===== */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: #3b82f6;
  transition: width .3s ease;
}
.nav-link:hover::after { width: 100%; }
.navbar-blur {
  backdrop-filter: blur(10px);
  background-color: rgba(15, 23, 42, .85) !important;
}

/* ===== CARDS ===== */
.scard {
  transition: all .3s ease;
  border-bottom: 3px solid transparent;
}
.scard:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
  border-bottom: 3px solid #2563eb;
}

/* ===== FAQ ===== */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.faq-content.open { max-height: 600px; }
.faq-icon { transition: transform .3s ease; }
.faq-icon.open { transform: rotate(45deg); }

/* ===== WAVE ===== */
.wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

/* ===== FORM FOCUS ===== */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

/* ===== TIMELINE (chi-siamo) ===== */
.timeline-dot {
  width: 12px;
  height: 12px;
  background: #2563eb;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .2);
  flex-shrink: 0;
  margin-top: 4px;
}

/* ===== PROSE (privacy) ===== */
.prose h3 { font-size: 1.1rem; font-weight: 700; color: #0f172a; margin-top: 2rem; margin-bottom: .75rem; }
.prose p  { color: #4b5563; font-size: .9rem; line-height: 1.8; margin-bottom: 1rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; color: #4b5563; font-size: .9rem; margin-bottom: 1rem; }
.prose ul li { margin-bottom: .35rem; line-height: 1.6; }

/* ===== CYBER PAGE ===== */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.cursor { animation: blink 1s step-end infinite; }
@keyframes scanline { 0% { top: -20%; } 100% { top: 120%; } }
.scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(59, 130, 246, .3);
  animation: scanline 3s linear infinite;
}