:focus-visible { outline-color: #155dc6; }
.topbar :focus-visible,
.hero :focus-visible,
.end-cta :focus-visible,
.footer :focus-visible { outline-color: #ffd14b; }

.hero {
  color: white;
  background: radial-gradient(ellipse at 83% 29%, #183e70 0, transparent 60%), #061833;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(56px, 7vw, 100px);
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid #487098;
  border-radius: 999px;
  background: #b0daff12;
  color: #c5e6fe;
  margin: 0 0 17px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.eyebrow .icon { width: 15px; height: 15px; }
.hero h1 {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 63px);
  line-height: 1.07;
  letter-spacing: -.05em;
  font-weight: 850;
}
.hero h1 em { color: var(--yellow); font-style: normal; white-space: nowrap; }
.hero-sub {
  max-width: 36ch;
  margin: 17px 0 24px;
  color: #d4e3f3;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
}
.hero-actions { width: max-content; max-width: 100%; }
.hero-download { width: 100%; min-height: 54px; text-align: center; }
.hero-action-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 16px;
  color: #bed2e9;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.install-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero .install-link { color: #e1f1ff; }

.install-wrap { max-width: 960px; }
.install-heading .kicker { color: #155dc6; }
#instalar { scroll-margin-top: 12px; }
.install-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.install-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #f4f8ff;
  border: 1px solid #dce8f6;
  border-radius: 14px;
}
.install-number {
  flex: none;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: #165ec9;
  color: white;
  font-size: 14px;
  font-weight: 800;
}
.install-step h3 { margin: 1px 0 4px; font-size: 16px; }
.install-step p, .guide-download p { margin: 0; color: #52627d; font-size: 14px; line-height: 1.5; }
.guide-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 0;
  padding: 14px 16px 17px;
  border: 1px solid #dce8f6;
  border-radius: 14px;
}
.guide-download .btn { text-align: center; flex: none; }
.faq-install-link { color: #155dc6; text-decoration: underline; text-underline-offset: 3px; }

.mobile-bottom[hidden] { display: none; }
.download-dialog {
  max-width: min(420px, calc(100% - 32px));
  border: 1px solid #dce8f6;
  border-radius: 20px;
  background: white;
  padding: 22px;
  color: #0a1b3b;
  box-shadow: 0 20px 64px #0005;
}
.download-dialog::backdrop { background: #031024b8; }
.download-dialog-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: #eaf3ff;
  color: #165ec9;
}
.download-dialog h2 { margin: 13px 0 7px; font-size: 23px; letter-spacing: -.03em; }
.download-dialog-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 15px; align-items: center; margin-top: 15px; }
.download-dialog .install-link { color: #155dc6; font-size: 14px; }
.download-dialog button {
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 9px;
  color: #061835;
  background: #ffc927;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 730px) {
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .hero-inner { grid-template-columns: 1fr; gap: 17px; padding-block: 27px 24px; }
  .hero h1 { font-size: clamp(32px, 9vw, 48px); }
  .hero-sub { margin: 13px 0 18px; font-size: 16px; }
  .hero-actions { width: 100%; }
  .hero-download { font-size: 15px; }
  .install-steps { grid-template-columns: 1fr; gap: 8px; }
  .install-step { padding: 12px; }
  .guide-download { flex-direction: column; align-items: stretch; }
  .guide-download p { text-align: center; }
  .mobile-menu { min-width: 44px; min-height: 44px; }
}