:root {
  --brand: #0b5cab;
  --brand-dark: #084a88;
  --text: #1b1f23;
  --light-gray: #f8f9fa;
  --border: #e5e7eb;
}

/* Reset */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

/* Headings */
h1, h2 { font-weight: 600; margin: 0 0 1rem 0; }
h3, h4, h5 { font-weight: 600; margin: 0 0 .75rem 0; }

strong { font-weight: 700; }

/* Layout Wrapper */
main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ================================= */
/* NAVIGATION */
/* ================================= */

.navbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 1rem 20px;
}

.navbar nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.navbar nav ul li {
  position: relative;
}

.navbar nav ul li a,
.navbar nav ul li span {
  text-decoration: none;
  color: #000;
  font-weight: 600;
  cursor: pointer;
}

/* Dropdown */
.navbar nav ul li .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  min-width: 200px;
  padding: 10px 0;
  list-style: none;
  z-index: 999;
}

.navbar nav ul li:hover > .submenu {
  display: block;
}

.submenu li {
  padding: 8px 20px;
}

.submenu li a {
  display: block;
  font-weight: 400;
  color: #333;
}

.submenu li a:hover {
  background: #f5f5f5;
}

/* ================================= */
/* BUTTONS */
/* ================================= */

.btn-brand {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 6px;
  background: #1144bb;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

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

/* ================================= */
/* HERO */
/* ================================= */

.hero {
  padding: 7rem 20px;
  text-align: center;
  background: linear-gradient(90deg,#fff 40%,#ddd 100%);
}

.hero h1 {
  font-weight: 700;
  max-width: 850px;
  margin: 0 auto 1rem;
}

.hero p {
  max-width: 650px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
}

/* ================================= */
/* SECTION SPACING */
/* ================================= */

section {
  padding: 5rem 20px;
}

/* ================================= */
/* SERVICES GRID */
/* ================================= */

.services-grid {
  display: grid;
  gap: 30px;
}

.services-grid.columns-2 { grid-template-columns: repeat(2,1fr); }
.services-grid.columns-3 { grid-template-columns: repeat(3,1fr); }
.services-grid.columns-4 { grid-template-columns: repeat(4,1fr); }

.service-card {
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* ================================= */
/* FEATURE ROW */
/* ================================= */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* ================================= */
/* CTA */
/* ================================= */

.cta {
  text-align: center;
}

.cta.brand {
  background: var(--brand);
  color: #fff;
}

.cta.dark {
  background: #111;
  color: #fff;
}

/* ================================= */
/* RICH TEXT */
/* ================================= */

.rich-text {
  max-width: 800px;
  margin: 0 auto;
}

/* ================================= */
/* FAQ */
/* ================================= */

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 15px 0;
}

/* ================================= */
/* TESTIMONIAL */
/* ================================= */

.testimonial {
  background: var(--light-gray);
  text-align: center;
}

.testimonial blockquote {
  font-size: 1.4rem;
  font-weight: 500;
  max-width: 800px;
  margin: 0 auto;
}

/* ================================= */
/* STATS */
/* ================================= */

.stats-grid {
  display: grid;
  gap: 30px;
  text-align: center;
}

.stats-grid.columns-2 { grid-template-columns: repeat(2,1fr); }
.stats-grid.columns-3 { grid-template-columns: repeat(3,1fr); }
.stats-grid.columns-4 { grid-template-columns: repeat(4,1fr); }

.stat-number {
  font-size: 2rem;
  font-weight: 700;
}

/* ================================= */
/* FOOTER */
/* ================================= */

footer {
  background: #111;
  color: #ccc;
  padding: 3rem 20px;
  margin-top: 4rem;
}

footer a {
  color: #aaa;
  text-decoration: none;
}

footer a:hover {
  color: #fff;
}