/* === Motion & polish === */
:root{
  --accent:#6baec9;
  --navy:#0b1f2f;
}

html{scroll-behavior:smooth;}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(24px);
  will-change:opacity,transform;
}
.reveal.visible{
  opacity:1;
  transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}

/* Card hover */
.pillar{
  transition:transform .25s ease, box-shadow .25s ease;
  border-radius:10px;
}
.pillar:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

/* Button polish */
.button-primary, .button-secondary, .cta-button{
  transition:transform .18s ease, box-shadow .18s ease, background-color .2s ease;
}
.button-primary:hover, .button-secondary:hover, .cta-button:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

/* Nav shrink */
nav.scrolled{
  padding:.6rem 2rem;
  backdrop-filter: blur(6px);
  background-color: rgba(11,31,47,.92);
}

/* Hero text entrance */
.hero .content > *{
  opacity:0;
  transform:translateY(18px);
  animation:heroFade .9s ease forwards;
}
.hero .content > *:nth-child(1){animation-delay:.15s}
.hero .content > *:nth-child(2){animation-delay:.35s}
.hero .content > *:nth-child(3){animation-delay:.55s}

@keyframes heroFade{
  to{opacity:1; transform:none;}
}