:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0b2741;
  background: #edf6fa;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.page {
  min-height: 100vh;
  padding: clamp(16px, 3vw, 40px);
  background:
    radial-gradient(circle at 78% 25%, rgba(88, 197, 224, .25), transparent 28%),
    linear-gradient(145deg, #f8fcfd 0%, #e7f3f8 100%);
}

.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - clamp(32px, 6vw, 80px));
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(11, 39, 65, .09);
  border-radius: 32px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 30px 80px rgba(16, 62, 88, .1);
}

.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 20px; }
.brand__mark {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 15px; color: white; background: #14a6c9;
}
.brand__name { letter-spacing: -.03em; }

.hero__content { align-self: center; position: relative; z-index: 2; max-width: 720px; padding: 64px 0; }
.eyebrow { margin: 0 0 20px; color: #1485a4; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(48px, 7vw, 104px); line-height: .95; letter-spacing: -.065em; }
.lead { max-width: 640px; margin: 32px 0; color: #46647a; font-size: clamp(18px, 2vw, 23px); line-height: 1.55; }
.status { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: #e2f5f8; color: #116c83; font-size: 14px; font-weight: 700; }
.status span { width: 8px; height: 8px; border-radius: 50%; background: #17a6c6; box-shadow: 0 0 0 6px rgba(23, 166, 198, .13); }

.air { position: absolute; right: -3%; top: 18%; width: min(42vw, 600px); height: 55%; opacity: .95; }
.air__unit { position: absolute; right: 5%; top: 6%; width: 74%; height: 28%; border-radius: 18px 18px 28px 28px; background: linear-gradient(165deg, #fff, #dceaf0); box-shadow: 0 28px 55px rgba(17, 77, 105, .16); transform: perspective(600px) rotateY(-8deg) rotateZ(-2deg); }
.air__unit::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 14%; height: 6px; border-radius: 5px; background: #bad4de; }
.air__unit span { position: absolute; right: 10%; top: 25%; width: 8px; height: 8px; border-radius: 50%; background: #34b8d3; }
.air__flow { position: absolute; right: 16%; top: 37%; width: 68%; height: 60%; border: 3px solid transparent; border-left-color: rgba(38, 167, 199, .2); border-radius: 50%; transform: rotate(-35deg); }
.air__flow--two { right: 5%; top: 42%; width: 78%; border-left-color: rgba(38, 167, 199, .14); }
.air__flow--three { right: 25%; top: 47%; width: 54%; border-left-color: rgba(38, 167, 199, .28); }

footer { color: #7790a1; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 800px) {
  .hero { border-radius: 22px; }
  .hero__content { padding-top: 180px; }
  .air { top: 12%; right: -20%; width: 90vw; height: 35%; opacity: .65; }
  .lead { font-size: 18px; }
}