/* assets/styles.css - small custom styles to complement Tailwind */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --primary:#8B1E25;
  --accent:#E6A34A;
  --blue-dark-1:#0b3b72;
  --blue-dark-2:#062b4a;
}

html,body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}

/* subtle animation */
.animate-fade { opacity: 0; transform: translateY(8px); animation: fadeUp .6s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* card lift */
.card-hover:hover{ transform: translateY(-6px); box-shadow: 0 20px 60px rgba(15,23,42,0.12); }

/* button focus */
:focus { outline: none; }
button:focus, a:focus, input:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(230,163,74,0.12); border-radius: 8px; }

/* blue learn more style is done inlined with Tailwind classes but add spacing fallback */
.learn-bg { background-color: rgba(239,248,255,1); }

/* responsive tweak for hero image */
@media (max-width: 768px){ .hero-illustration { min-height: 160px !important; } }