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

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }

.page {
  min-height: 100vh;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 76px);
  display: flex;
  flex-direction: column;
}

.header {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e4e9ed;
}

.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 760; letter-spacing: -.045em; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #fff; overflow: hidden; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.status { display: inline-flex; align-items: center; gap: 10px; color: #6f7b88; font-size: 13px; letter-spacing: .01em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #45bdf5; }

main { flex: 1; }
.hero { max-width: 900px; padding: clamp(84px, 12vw, 160px) 0 clamp(80px, 9vw, 128px); }
.eyebrow { margin: 0 0 28px; color: #159de0; font-size: 13px; font-weight: 730; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(56px, 8.8vw, 118px); line-height: .99; letter-spacing: -.075em; font-weight: 700; }
h1 span { color: #6f7b88; }
.lead { max-width: 600px; margin: 32px 0 0; color: #586674; font-size: clamp(19px, 2vw, 24px); line-height: 1.48; letter-spacing: -.02em; }
.hero-note { display: flex; align-items: center; gap: 12px; margin-top: 40px; color: #0e1114; font-size: 14px; font-weight: 570; }
.note-line { width: 28px; height: 1px; background: #45bdf5; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feature { min-height: 215px; padding: 27px; background: #fff; border: 1px solid #e4e9ed; border-radius: 25px; }
.feature-number { color: #159de0; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.feature h2 { margin: 44px 0 8px; font-size: 22px; letter-spacing: -.04em; }
.feature p { max-width: 290px; margin: 0; color: #6f7b88; font-size: 14px; line-height: 1.55; }
.notice { margin: 32px 0 74px; color: #88939e; font-size: 13px; line-height: 1.5; }
.footer { display: flex; justify-content: space-between; gap: 16px; padding: 26px 0 32px; border-top: 1px solid #e4e9ed; color: #9aa4ae; font-size: 12px; }

@media (max-width: 720px) {
  .header { min-height: 84px; }
  .brand { font-size: 20px; }
  .status { font-size: 12px; }
  .hero { padding: 96px 0 84px; }
  .eyebrow { font-size: 11px; }
  h1 { font-size: clamp(50px, 13vw, 76px); }
  .lead { margin-top: 26px; font-size: 18px; }
  .features { grid-template-columns: 1fr; }
  .feature { min-height: 160px; }
  .feature h2 { margin-top: 25px; }
  .notice { margin-bottom: 50px; }
  .footer { flex-direction: column; }
}