:root {
  --sun: #f4a21c;
  --sun-dark: #e18b00;
  --sky: #1e6fb6;
  --sky-dark: #0b4f86;
  --bg: #f6f8fb;
  --panel: #ffffff;
  --text: #1a2433;
  --muted: #5c6c7e;
  --line: #e6edf3;
}

body.site {
  background: #f4f7fb;
}

.site-hero {
  padding: 70px 0 90px;
  background: radial-gradient(circle at 80% 10%, rgba(244,162,28,0.25), transparent 55%),
              radial-gradient(circle at 0% 0%, rgba(30,111,182,0.18), transparent 45%),
              linear-gradient(120deg, #f8fbff 0%, #eef5fb 100%);
  position: relative;
  overflow: hidden;
}

.site-hero .badge {
  background: #fff3da;
  color: #a26200;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-nav .links {
  display: flex;
  gap: 18px;
  align-items: center;
}

.site-hero .hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  margin-top: 36px;
}

.site-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 20px 45px rgba(10, 40, 80, 0.15);
}

.site-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 26px;
}

.site-stats .stat {
  background: #f1f7ff;
  border: 1px solid #dce9f6;
  padding: 14px;
  border-radius: 14px;
}

.section {
  padding: 70px 0;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.feature-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(10, 40, 80, 0.08);
}

.feature-card h4 {
  margin: 8px 0;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: center;
}

.highlight {
  background: #0e2d4f;
  color: #e6f0fb;
  border-radius: 20px;
  padding: 32px;
}

.highlight .btn.secondary {
  border-color: #fff;
  color: #fff;
  background: transparent;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #0b4f86;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 12px;
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.testimonial {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
}

.cta {
  background: linear-gradient(120deg, #0b4f86, #1e6fb6);
  color: #fff;
  border-radius: 22px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
  align-items: center;
}

.cta .btn.secondary {
  border-color: #fff;
  color: #fff;
  background: transparent;
}

.cta label { color: #f8fbff; }
.cta input { color: #0e2d4f; }
.cta .btn { background: #f4a21c; color: #0e2d4f; border-color: transparent; }

.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}

.site-footer {
  padding: 40px 0 50px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1000px) {
  .site-hero .hero-grid,
  .split,
  .cta {
    grid-template-columns: 1fr;
  }
  .feature-grid,
  .steps,
  .testimonials {
    grid-template-columns: 1fr;
  }
  .faq {
    grid-template-columns: 1fr;
  }
  .site-nav .links { flex-wrap: wrap; justify-content: flex-end; }
}