@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root{
  --primary:#0f6fff;
  --primary-dark:#0758d8;
  --text:#13243b;
  --muted:#667892;
  --line:#dce5f0;
  --white:#fff;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;
  padding:28px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Plus Jakarta Sans",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0%,rgba(15,111,255,.18),transparent 35%),
    radial-gradient(circle at 100% 100%,rgba(20,181,138,.14),transparent 32%),
    #f2f6fb;
}

.install-card{
  width:min(760px,100%);
  padding:34px;
  border:1px solid rgba(192,207,225,.75);
  border-radius:28px;
  background:rgba(255,255,255,.96);
  box-shadow:0 28px 80px rgba(27,58,101,.16);
}

.install-hero{display:grid;grid-template-columns:170px minmax(0,1fr);gap:30px;align-items:center}
.app-logo{
  width:170px;height:170px;padding:12px;object-fit:contain;border-radius:38px;background:#fff;
  box-shadow:0 22px 45px rgba(20,57,110,.2),inset 0 0 0 1px #edf2f8;
}
.eyebrow{display:block;margin-bottom:8px;color:var(--primary);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px}
h1{font-size:34px;line-height:1.2;letter-spacing:-1.2px;margin-bottom:12px}
.lead{color:var(--muted);font-size:14px;line-height:1.8}

.install-button{
  width:100%;min-height:56px;margin-top:28px;border:none;border-radius:15px;
  color:#fff;background:linear-gradient(135deg,#0f6fff,#4d4bff);
  font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 15px 30px rgba(15,111,255,.25)
}
.install-button:hover{background:linear-gradient(135deg,#0758d8,#3d39e8)}
.install-button:disabled{cursor:default;background:#18a66a;box-shadow:none}

.app-benefits{margin-top:25px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.app-benefits div{padding:16px;border:1px solid var(--line);border-radius:16px;background:#f9fbfe}
.app-benefits strong{display:block;margin-bottom:6px;font-size:12px}
.app-benefits span{color:var(--muted);font-size:10px;line-height:1.6}

.install-instructions{margin-top:24px;padding:20px;border-radius:18px;background:#eef5ff;border:1px solid #cfe1ff}
.install-instructions h2{font-size:16px;margin-bottom:12px}
.install-instructions p{color:var(--muted);font-size:12px;line-height:1.75;margin-top:8px}
.install-instructions strong{color:var(--text)}
.ios-note{margin-top:12px;padding:12px;border-radius:12px;background:#fff7e8;color:#7a5200;font-size:11px;line-height:1.7}
.back-link{margin-top:22px;display:flex;justify-content:center;color:var(--primary);font-size:11px;font-weight:800;text-decoration:none}

@media(max-width:650px){
  body{padding:12px}
  .install-card{padding:25px 18px;border-radius:22px}
  .install-hero{grid-template-columns:1fr;text-align:center;gap:20px}
  .app-logo{width:140px;height:140px;margin:0 auto;border-radius:32px}
  h1{font-size:27px}
  .app-benefits{grid-template-columns:1fr}
}