:root { color-scheme: dark; }

* { box-sizing: border-box; }

html { font-family: "Exo", Arial, sans-serif; }

body {
  color: #fff;
  background: #1c5a7c url("assets/background.jpg") center top / cover fixed;
  margin: 0;
  font-size: 14px;
  line-height: 1.43;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 10px; }
h1, h2 { font-weight: 700; margin: 20px 0 10px; }
h1 { font-size: 38px; line-height: 44px; }
h2 { font-size: 24px; line-height: 30px; }

.container { width: min(940px, calc(100% - 60px)); margin: 0 auto; }
.logo-section { display: flex; justify-content: center; align-items: center; margin-top: 40px; }
.logo-section img { width: 320px; height: auto; }
.section { border-bottom: 1px solid #e4ebf3; }

.hero { padding: 80px 0; }
.hero-grid { display: flex; justify-content: space-between; align-items: center; }
.hero-image-wrap, .hero-copy { width: 46%; }
.hero-image { width: 300px; height: auto; border: 4px solid #fff; border-radius: 14px; box-shadow: 0 4px 24px rgba(150,163,181,.08); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-copy p { margin-bottom: 24px; }
.app-store img { width: 135px; }

.about { padding: 80px 0; }
.about-grid { display: flex; justify-content: space-between; align-items: flex-start; }
.about-copy { max-width: 40%; }
.about-copy .lead { margin-bottom: 24px; font-size: 16px; line-height: 22px; }
.features { display: flex; flex-direction: column; max-width: 46%; padding: 0; margin: 0 0 -16px; list-style: none; }
.features li { display: flex; align-items: center; margin-bottom: 16px; }
.features img { width: 80px; min-width: 80px; height: 80px; margin-right: 16px; object-fit: cover; }
.features p { font-size: 16px; margin: 0; }

.setup { padding: 20px 0; }
.narrow-copy { max-width: 564px; }
.setup-images { display: flex; justify-content: space-around; align-items: center; gap: 36px; padding: 20px 0; }
.setup-images img { max-width: 46%; }
.contact { padding: 20px 0; }
footer { background: #22436e; }
footer .container { padding: 20px 0; }

@media (max-width: 991px) {
  .container { width: min(728px, calc(100% - 60px)); }
  .hero-grid, .about-grid { flex-direction: column; align-items: flex-start; }
  .hero-copy { order: -1; }
  .hero-image-wrap, .hero-copy, .about-copy, .features { width: 100%; max-width: 100%; }
  .hero-copy, .about-copy { margin-bottom: 40px; }
}

@media (max-width: 767px) {
  .container { width: calc(100% - 30px); }
  .hero, .about { padding: 60px 0; }
  .logo-section img { width: min(320px, calc(100% - 30px)); }
  .setup-images { flex-direction: column; }
  .setup-images img { max-width: 100%; }
}

@media (max-width: 479px) {
  .features { margin-bottom: -30px; }
  .features li { flex-direction: column; align-items: flex-start; margin-bottom: 30px; }
  .features img { margin: 0 0 10px; }
}