:root {
  --primary:#0f766e;
  --primary-dark:#115e59;
  --accent:#f97316;
  --bg:#f9fafb;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Images */
img {
  max-width:100%;
  height:auto;
  display:block;
}

/* Links */
a {
  color:var(--primary-dark);
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}

/* Header */
header {
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:20;
}

.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}

.top-bar {
  display:flex;
  justify-content:space-between;
  padding:.5rem 0;
  font-size:.9rem;
  color:var(--muted);
}

.top-bar strong {
  color:var(--primary-dark);
}

.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.75rem 0 .85rem;
}

.logo img {
  height:48px;
  width:auto;
  object-fit:contain;
}

nav ul {
  list-style:none;
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  font-size:.95rem;
}

nav a {
  font-weight:500;
  color:var(--text);
}
nav a:hover {
  color:var(--primary-dark);
}

/* Hero Section */
.hero {
  background:linear-gradient(135deg,#ecfdf5,#eff6ff);
  padding:3rem 1rem 3.5rem;
  border-bottom:1px solid var(--border);
}

.hero-inner {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1.5fr);
  gap:2.5rem;
  align-items:center;
}

.hero h1 {
  font-size:2.3rem;
  margin-bottom:.75rem;
  color:var(--primary-dark);
}

.hero h2 {
  font-size:1.1rem;
  margin-bottom:.75rem;
  color:var(--muted);
}

/* Badges */
.badge {
  font-size:.8rem;
  padding:.3rem .6rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#ffffffcc;
}

.hero-badges {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1.5rem 0;
}

/* Buttons */
.btn {
  display:inline-flex;
  align-items:center;
  padding:.7rem 1.3rem;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  font-size:.95rem;
}

.btn-primary {
  background:var(--primary);
  color:#fff;
}

.btn-primary:hover {
  background:var(--primary-dark);
}

.btn-outline {
  border:1px solid var(--primary);
  color:var(--primary-dark);
  background:transparent;
}

/* Hero Media & Panel */
.hero-media {
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.hero-image {
  border-radius:1rem;
  border:1px solid var(--border);
  box-shadow:0 10px 25px rgba(15,23,42,.12);
}

.hero-panel {
  background:#fff;
  border-radius:1rem;
  padding:1.5rem;
  border:1px solid var(--border);
  box-shadow:0 10px 25px rgba(15,23,42,.08);
}

/* Sections */
.section {
  padding:2.5rem 1rem;
}

.section h2 {
  font-size:1.6rem;
  margin-bottom:.5rem;
  color:var(--primary-dark);
}

.section-lead {
  font-size:.95rem;
  color:var(--muted);
  margin-bottom:1.5rem;
}

/* Grid Layouts */
.grid {
  display:grid;
  gap:1.5rem;
}

.grid-3 {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid-2 {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Cards */
.card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:.9rem;
  padding:1.25rem;
  box-shadow:0 4px 10px rgba(15,23,42,.03);
}

/* CTA Band */
.cta-band {
  background:linear-gradient(135deg,var(--primary-dark),#082f49);
  color:#fff;
  padding:2rem 1rem;
}

.cta-band-inner {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1.25rem;
}

/* Footer */
footer {
  background:#020617;
  color:#9ca3af;
  padding:2rem 1rem 1.5rem;
  margin-top:2rem;
}

footer h3 {
  color:#e5e7eb;
}

.footer-grid {
  display:grid;
  gap:1.5rem;
  grid-template-columns:2fr 1.5fr 1.5fr 1.5fr;
}

.footer-social-links {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width:900px) {
  .hero-inner {
    grid-template-columns:1fr;
  }

  .nav {
    flex-direction:column;
    align-items:flex-start;
    gap:.75rem;
  }

  .grid-3,
  .grid-2 {
    grid-template-columns:1fr;
  }

  .footer-grid {
    grid-template-columns:1fr;
  }
}