@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  --brand-blue: #1E4D7B;
  --brand-orange: #F47C25;
  --bg: #F5F7FA;
}

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

/* inputs */
.input-field{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #E6E9EE;
  background:white;
  box-shadow:0 1px 2px rgba(16,24,40,0.02);
  outline:none;
  transition:box-shadow .15s ease, transform .12s ease;
}
.input-field:focus{box-shadow:0 6px 18px rgba(30,77,123,0.08); transform:translateY(-1px); border-color:var(--brand-blue);}

/* feature card hover */
.feature-card{ transition:transform .3s ease, box-shadow .25s ease; }
.feature-card:hover{ transform:translateY(-8px); box-shadow:0 10px 30px rgba(16,24,40,0.08); }

/* mockup animation */
#mockup{ transform-origin:center; }
#mockup:hover{ transform:translateY(-6px) scale(1.01); transition:transform .25s ease; }

/* simple reveal classes */
.reveal{ opacity:0; transform:translateY(12px) scale(.995); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* mobile menu */
#mobile-menu a{ display:block; padding:8px 0; border-bottom:1px solid #F1F5F9; }