:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #06120f;
  color: #f4fffb;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(48, 229, 162, .23), transparent 35rem),
    linear-gradient(155deg, #071613 0%, #06100e 45%, #081b17 100%);
}

.page-glow {
  position: fixed;
  z-index: 0;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .22;
  pointer-events: none;
}

.glow-one { top: 22%; left: -15rem; background: #00e69a; }
.glow-two { right: -16rem; bottom: 3%; background: #10a5ff; }

.install-shell {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, 640px);
  margin: 0 auto;
  padding: max(36px, env(safe-area-inset-top)) 0 max(34px, env(safe-area-inset-bottom));
}

.brand-block { margin-bottom: 28px; text-align: center; }
.brand-block img { display: block; width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 20px; box-shadow: 0 18px 45px rgba(0, 216, 143, .22); }
.eyebrow { margin: 0 0 9px; color: #5ff0b8; font-size: 12px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 600px; margin: 0 auto; font-size: clamp(28px, 6vw, 42px); line-height: 1.14; letter-spacing: -.035em; }
.intro { max-width: 520px; margin: 13px auto 0; color: #a7bbb4; font-size: 14px; line-height: 1.7; }

.steps { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.step-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 22px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(184, 255, 227, .12);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .2);
  backdrop-filter: blur(18px);
}
.step-card.featured { border-color: rgba(50, 236, 168, .28); box-shadow: 0 24px 70px rgba(0, 174, 112, .1); }
.step-number {
  position: absolute;
  top: -12px;
  left: 22px;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 10px;
  background: #65f2bd;
  color: #042117;
  font-weight: 850;
  box-shadow: 0 8px 20px rgba(71, 236, 174, .22);
}
.step-copy { padding-top: 4px; }
.step-label { color: #65f2bd; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.step-copy h2 { margin: 5px 0 7px; font-size: 20px; letter-spacing: -.02em; }
.step-copy p { max-width: 350px; margin: 0; color: #a9bcb5; font-size: 13px; line-height: 1.65; }

.install-button {
  display: flex;
  min-width: 200px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.install-button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.36); }
.install-button:focus-visible { outline: 3px solid rgba(101, 242, 189, .72); outline-offset: 4px; }
.install-button.primary { border-color: transparent; background: linear-gradient(135deg, #08d88d, #08b980); box-shadow: 0 12px 30px rgba(0, 190, 126, .2); }
.install-button.secondary { background: rgba(255,255,255,.07); }
.install-button b { margin-left: auto; font-size: 20px; font-weight: 400; line-height: 1; opacity: .76; }
.button-icon { position: relative; display: inline-grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: rgba(255,255,255,.12); }
.testflight-icon i { position: absolute; width: 5px; height: 17px; border-radius: 4px; background: #8ce5ff; transform-origin: 50% 14px; }
.testflight-icon i:nth-child(1) { transform: rotate(0deg); }
.testflight-icon i:nth-child(2) { transform: rotate(120deg); }
.testflight-icon i:nth-child(3) { transform: rotate(240deg); }
.apple-icon { color: #fff; font-size: 15px; }

.support-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 15px;
  padding: 14px 17px;
  border-radius: 15px;
  background: rgba(255,255,255,.04);
  color: #8fa59d;
}
.support-note > span { display: grid; flex: 0 0 21px; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: rgba(83, 237, 178, .15); color: #62eeb8; font-size: 12px; }
.support-note p { margin: 1px 0 0; font-size: 12px; line-height: 1.65; }

@media (max-width: 620px) {
  .install-shell { width: min(100% - 24px, 640px); padding-top: max(28px, env(safe-area-inset-top)); }
  .brand-block { margin-bottom: 26px; }
  .brand-block img { width: 62px; height: 62px; border-radius: 18px; }
  .intro { font-size: 14px; }
  .step-card { grid-template-columns: 1fr; gap: 18px; padding: 25px 18px 18px; border-radius: 20px; }
  .step-copy p { max-width: none; }
  .install-button { width: 100%; min-width: 0; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .install-button { transition: none; }
}