/* Core */
:root { --max: 1100px; --radius: 18px; --fg: #0b1022; --muted:#475569; --b1:#0ea5e9; --b2:#1f3a8a; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--fg); background:#f6f8fb; line-height: 1.6; }
.wrap { width: min(100% - 32px, var(--max)); margin: 0 auto; }

/* Header + Nav */
.site { display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap: 10px; position: relative; z-index: 50; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color: inherit; font-weight: 900; }
.brand img { width: 42px; height: 42px; }
.brand span { font-size: 1.12rem; letter-spacing: .2px; background: linear-gradient(90deg, #1f3a8a, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
nav { display:flex; gap: 16px; align-items:center; z-index: 60; }
nav a { text-decoration:none; color: #1f3a8a; font-weight: 800; padding: 6px 8px; border-radius: 10px; }
nav a.active { border-bottom: 3px solid #1f3a8a; padding-bottom: 3px; }
.menu-btn { display: none; border: 1px solid rgba(2,6,23,.12); background: #fff; padding: 8px 10px; border-radius: 10px; cursor: pointer; }

/* Mobile nav behavior */
@media (max-width: 640px){
  .site { position: sticky; top: 0; z-index: 80; }
  .menu-btn { display: inline-flex; align-items:center; justify-content:center; }
  nav { display: none; position: absolute; top: 62px; right: 16px; left: 16px; padding: 10px; background: #fff; border: 1px solid rgba(2,6,23,.12); border-radius: 12px; box-shadow: 0 18px 50px rgba(2,6,23,.10); z-index: 90; pointer-events: auto; }
  nav.open { display: grid; grid-template-columns: 1fr; gap: 8px; }
  nav a { padding: 10px 12px; background: #f8fafc; }
}

/* Hero */
.hero { position: relative; height: clamp(56vh, 64vh, 72vh); display:grid; place-items:center; background: #0b1022; overflow:hidden; }
.hero__content { text-align:center; color:#fff; position: relative; z-index: 1; }
.hero__content h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 6px; letter-spacing: .3px; }
.hero__content .lead { margin: 0 0 12px; color: #e2e8f0; font-weight: 600; }
.pill { display:inline-block; padding:9px 16px; border-radius:999px; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); letter-spacing:.02em; font-weight:800; color:#fff; text-decoration:none; }

/* Heartbeat underline */
.with-heartbeat { position: relative; }
.with-heartbeat::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -10px; width: 220px; height: 2px; background: linear-gradient(90deg, #0ea5e9, #1f3a8a);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: translateX(-50%) scaleX(.6); opacity: .7; } 50% { transform: translateX(-50%) scaleX(1); opacity: 1; } }

/* Hero Backgrounds */
.hero--home { background-image: linear-gradient(rgba(15,23,42,.45), rgba(15,23,42,.45)), url('https://images.unsplash.com/photo-1586773860418-d37222d8fce3?q=80&w=2000&auto=format&fit=crop'); background-size: cover; background-position:center; }
.hero--mission { background-image: linear-gradient(rgba(15,23,42,.45), rgba(15,23,42,.45)), url('https://images.unsplash.com/photo-1576765608638-906caa1a45a0?q=80&w=2000&auto=format&fit=crop'); background-size: cover; background-position:center; }
.hero--services { background-image: linear-gradient(rgba(15,23,42,.45), rgba(15,23,42,.45)), url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?q=80&w=2000&auto=format&fit=crop'); background-size: cover; background-position:center; }
.overlay { position:absolute; inset:0; pointer-events:none; }

/* Cards */
.cards { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.cards article { background:#fff; border:1px solid rgba(2,6,23,.08); border-radius: var(--radius); padding: 18px; box-shadow: 0 18px 50px rgba(2,6,23,.07), 0 2px 10px rgba(2,6,23,.06); }
.cards h3 { margin: .2rem 0 .3rem; font-size: 1.1rem; }
.cards p { margin: 0; color: var(--muted); }

/* Banner / Notes */
.banner { background: linear-gradient(90deg, #e0f2fe, #eff6ff); border: 1px solid rgba(2,6,23,.06); border-radius: 14px; padding: 12px 16px; margin: 12px 0 30px; text-align:center; color:#0b1022; font-weight:800; }
.note { margin: 18px 0 30px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(90deg, #fdf2f8, #f1f5f9); border: 1px solid rgba(2,6,23,.06); }

/* Mission layout */
.twocol { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin: 24px 0; }
.panel { background:#fff; border:1px solid rgba(2,6,23,.08); border-radius: var(--radius); padding: 18px; box-shadow: 0 18px 50px rgba(2,6,23,.07), 0 2px 10px rgba(2,6,23,.06); }
.values { margin: .2rem 0 0; padding-left: 1.2rem; }
.values li { margin: .3rem 0; }

/* Fade-in animation (desktop only) */
.fade { opacity: 0; animation: fadeIn .7s ease forwards; }
.fade:nth-of-type(2) { animation-delay: .12s; }
.fade:nth-of-type(3) { animation-delay: .2s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Disable fade on small screens (iPhone fix) */
@media (max-width: 768px){
  .fade { opacity: 1 !important; animation: none !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .with-heartbeat::after { animation: none !important; }
  .fade { animation: none !important; opacity: 1 !important; }
}

/* Footer */
.foot { padding: 24px 0 40px; color: #64748b; }