/* modern.css — global typographic scale, color tokens, and subtle animations
   Purpose: provide a consistent modern font (Inter) and base styles used across the site.
*/
:root{
  --brand: #0b3b66;
  --accent: #0d6efd;
  --muted: #6b7280;
  --card-bg: #ffffff;
  --glass: rgba(255,255,255,0.6);
  --surface-shadow: 0 10px 30px rgba(11,59,102,0.06);
}

/* Base typography */
html,body{
  height:100%;
}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #0f172a; /* slightly softer than pure black */
  font-weight:400;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-color: #fff;
}

/* Headings — modern, tight letter-spacing and balanced weights */
h1,h2,h3,h4,h5,h6{
  color:var(--brand);
  font-weight:600;
  line-height:1.15;
  margin-top:0.25rem;
  margin-bottom:0.5rem;
  letter-spacing:-0.2px;
}

h1{ font-size:2.25rem; font-weight:700; }
h2{ font-size:1.5rem; }
h3{ font-size:1.125rem; }

/* Display utility (used on hero) */
.display-4, .display-3 { font-weight:700; color:var(--brand); }

/* Paragraphs & lead text */
p, .lead { color:#334155; }
.lead { font-size:1.05rem; }

/* Buttons — subtle modern tweaks but keep Bootstrap defaults intact */
.btn {
  border-radius: 999px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary {
  box-shadow: 0 8px 30px rgba(13,110,253,0.08);
  border: none;
}

/* Cards and surfaces */
.card, .about-blurb, .service-card {
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: var(--surface-shadow);
  border: 1px solid rgba(11,59,102,0.04);
}

/* Hero tweaks */
.hero-banner .container h1, .hero-banner .container .lead{
  color: #ffffff; /* existing markup uses overlay — preserve white for readability */
}

/* Tech emphasis and pills — use consistent font sizing and spacing */
.tech-pill { font-family: inherit; }

/* Reveal / entrance animation */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .55s cubic-bezier(.2,.9,.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.icon-reveal { transform: translateY(6px) scale(.96); opacity:0; transition: transform .6s cubic-bezier(.2,.9,.3,1), opacity .55s ease; }
.icon-reveal.visible { transform: translateY(0) scale(1); opacity:1; }

/* Subtle focus styles for accessibility */
:focus{ outline: 3px solid rgba(13,110,253,0.12); outline-offset: 2px; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .reveal, .icon-reveal { transition: none !important; transform:none !important; opacity:1 !important; }
  * { scroll-behavior: auto; }
}

/* Utility small text */
.text-muted { color: var(--muted) !important; }

/* Make code/monospace slightly more compact */
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; }

/* Small responsive typographic adjustments */
@media (max-width:767px){
  h1{ font-size:1.6rem; }
  .lead{ font-size:1rem; }
}

/* Minor tweaks for consistent spacing inside the container */
.container { max-width: 1100px; }

/* Features listing — elegant numbered cards */
.features-listing {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* single-column so each item takes full container width */
  grid-template-columns: 1fr;
  gap: 12px;
}

.features-listing .feature-item {
  counter-increment: feature;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid rgba(11,59,102,0.04);
  box-shadow: 0 8px 22px rgba(11,59,102,0.04);
}

.feature-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  border-radius:8px;
  background: linear-gradient(180deg,#eef6ff,#e6f0ff);
  color:var(--brand);
  font-weight:700;
  margin-right:6px;
  flex:0 0 auto;
}

.icon-wrap{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:linear-gradient(180deg,#fff,#fbfdff); flex:0 0 44px; }
.feature-body h6{ margin:0; font-size:1rem; color:var(--brand); font-weight:600; }
.feature-body p{ margin:6px 0 0; color:#475569; }

@media (max-width:767px){
  .feature-badge{ min-width:30px; height:30px; }
}

/* End modern.css */