.landing {
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(255, 255, 255, .12), transparent),
    linear-gradient(170deg, var(--brand-2), var(--brand));
  color: #fff;
}
.landing__wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; gap: 26px; }
.landing__card {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px; padding: clamp(28px, 5vw, 46px); max-width: 540px; width: 100%;
  text-align: center; box-shadow: 0 30px 70px rgba(10, 15, 30, .3);
}
.landing__card--narrow { max-width: 460px; }
.landing__brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 6px; }
.landing__logo { font-size: clamp(26px, 6vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.landing__tagline { color: rgba(255, 255, 255, .82); margin: 14px 0 28px; font-size: 16px; line-height: 1.5; }
.landing__h1 { color: #fff; font-size: clamp(22px, 5vw, 28px); }
.landing__code { font-size: 60px; font-weight: 800; color: #fff; opacity: .9; }
.landing__actions { display: grid; gap: 14px; }
.landing .btn { flex-direction: column; align-items: flex-start; gap: 2px; padding: 18px 22px; border-radius: 14px; text-align: left; }
.landing .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 26px rgba(31, 138, 76, .3); }
.landing .btn--primary:hover { background: var(--accent-2); }
.landing .btn--ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.btn__title { font-size: 17px; font-weight: 800; }
.btn__hint { font-size: 13px; font-weight: 500; opacity: .8; }
.landing__note { margin-top: 24px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.landing__footer { color: rgba(255, 255, 255, .5); font-size: 13px; }