:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background: #061923;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  background: radial-gradient(ellipse at 50% 0%, #12465c 0%, #081f2b 48%, #030c12 100%);
}
.landing { width: min(100% - 40px, 540px); margin: 0 auto; padding: 48px 0 24px; text-align: center; }
.brand { display: flex; flex-direction: column; align-items: center; }
.logo { width: 104px; height: 104px; object-fit: contain; border-radius: 50%; background: #fff; }
.company { font-size: .9375rem; line-height: 1.5; font-weight: 600; margin: 17px 0 0; color: #e0edf2; }
.application { margin-top: 38px; }
.eyebrow { color: #84cdec; font-size: .875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; margin: 0 0 14px; }
h1 { font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 700; line-height: 1.13; letter-spacing: -.035em; margin: 0; }
.intro { color: #bed2dd; font-size: 1rem; line-height: 1.6; max-width: 390px; margin: 20px auto 30px; }
.apply { display: flex; align-items: center; justify-content: center; width: min(100%, 320px); min-height: 64px; margin: 0 auto; padding: 16px 24px; border: 1px solid #44b3de; border-radius: 8px; color: #fff; background: #0579ad; text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 #024b6b, 0 12px 24px #0005; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.button-label { font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.apply:hover { background: #046b99; transform: translateY(-2px); box-shadow: 0 6px 0 #024b6b, 0 16px 28px #0006; }
.apply:active { transform: translateY(3px); box-shadow: 0 1px 0 #024b6b, 0 4px 12px #0004; }
.apply:focus-visible { outline: 3px solid #b4e7ff; outline-offset: 6px; }
.retail-image { max-width: 420px; margin: 48px auto 0; overflow: hidden; border-radius: 12px; border: 1px solid #ffffff20; }
.retail-image img { display: block; width: 100%; height: auto; }
footer { font-size: .875rem; line-height: 1.5; color: #a2b6c1; margin-top: 28px; }
@media (max-width: 480px) {
  .landing { width: calc(100% - 32px); padding-top: 32px; }
  .logo { width: 90px; height: 90px; }
  .application { margin-top: 30px; }
  .retail-image { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { .apply { transition: none; } }