/* Aria — custom styles layered on top of Tailwind CDN */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  overflow-x: hidden;
}

/* ---- Backgrounds ---- */
.hero-gradient {
  background:
    radial-gradient(120% 90% at 15% 0%, #EAF3FF 0%, rgba(234, 243, 255, 0) 60%),
    radial-gradient(120% 90% at 100% 20%, #E4F7F0 0%, rgba(228, 247, 240, 0) 55%),
    linear-gradient(180deg, #FBFCFE 0%, #F4F9FF 100%);
}

.cta-gradient {
  background: linear-gradient(180deg, #F4F9FF 0%, #EAF3FF 45%, #E4F7F0 100%);
}

/* ---- Buttons ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: linear-gradient(135deg, #5B8DEF 0%, #6FC3C3 100%);
  color: #fff;
  font-weight: 600;
  padding: .85rem 1.6rem;
  border-radius: 9999px;
  box-shadow: 0 8px 20px -8px rgba(91, 141, 239, .55);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(91, 141, 239, .6);
  filter: saturate(1.05);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  color: #25324B;
  background: #fff;
  border: 1px solid rgba(37, 50, 75, .1);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: #6FC3C3;
  color: #5B8DEF;
}

/* ---- Cards ---- */
.step-card,
.feature-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(37, 50, 75, .06);
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: 0 10px 30px -18px rgba(37, 50, 75, .25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.step-card:hover,
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(37, 50, 75, .3);
}

.step-num {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: rgba(91, 141, 239, .14);
  line-height: 1;
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  color: #5B8DEF;
  background: linear-gradient(135deg, #EAF3FF 0%, #E4F7F0 100%);
}

/* ---- Trust badges ---- */
.trust-badge {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem 1.15rem;
  box-shadow: 0 8px 24px -18px rgba(37, 50, 75, .3);
}

/* ---- Form ---- */
.form-input {
  width: 100%;
  border: 1px solid rgba(37, 50, 75, .14);
  border-radius: .75rem;
  padding: .7rem .9rem;
  font-size: .95rem;
  color: #25324B;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-input::placeholder { color: rgba(90, 103, 130, .55); }
.form-input:focus {
  outline: none;
  border-color: #5B8DEF;
  box-shadow: 0 0 0 3px rgba(91, 141, 239, .15);
}
.form-error {
  margin-top: .35rem;
  font-size: .8rem;
  color: #e06666;
}

/* ---- Social icons ---- */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.social-icon:hover {
  background: #5B8DEF;
  color: #fff;
  transform: translateY(-2px);
}

/* ---- Header scrolled state ---- */
#site-header.scrolled {
  background: rgba(251, 252, 254, .85);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 4px 20px -12px rgba(37, 50, 75, .25);
}

/* ---- Animations ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--d, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.float-slow { animation: float-slow 6s ease-in-out infinite; }

@keyframes pulse-slow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}
.animate-pulse-slow { animation: pulse-slow 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .float-slow, .animate-pulse-slow { animation: none; }
}