:root {
  --theme: #260047;
  --theme-strong: #17002d;
  --accent: #ff9d24;
  --surface: #ffffff;
  --surface-soft: #f7f2fa;
  --text: #22152c;
  --muted: #6e6178;
  --success: #18824e;
  --page-top: #f6e9fb;
  --page-bottom: #f8d8e4;
  --shadow: 0 18px 42px rgba(38, 0, 71, 0.13);
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: "DM Sans", Arial, sans-serif;
  background: var(--page-bottom);
}

a { color: inherit; }

.page-shell {
  min-height: calc(100vh - 84px);
  padding: 42px 20px 110px;
  background: linear-gradient(to bottom, var(--page-top) 0 55%, var(--page-bottom) 55% 100%);
}

.hero,
.features-panel,
.offers-panel,
footer { width: min(100%, 660px); margin-inline: auto; }

.hero { text-align: center; }

.brand-mark {
  display: grid;
  width: 116px;
  height: 116px;
  margin: 0 auto 19px;
  overflow: hidden;
  place-items: center;
  border-radius: 34% 49% 45% 49%;
  background: var(--theme);
  box-shadow: 0 12px 25px rgba(38, 0, 71, 0.22);
  transform: rotate(-8deg);
}

.brand-mark img { width: 100%; height: 100%; object-fit: cover; transform: rotate(8deg) scale(1.09); }
.brand-fallback { color: #fff; font: 800 34px/1 "Outfit", sans-serif; transform: rotate(8deg); }

h1, h2 { font-family: "Outfit", "DM Sans", sans-serif; }

h1 {
  margin: 0;
  color: var(--theme);
  font-size: clamp(2rem, 6vw, 3.15rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.downloads {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin: 15px 0 13px;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--theme);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.79rem;
  font-weight: 800;
  text-transform: uppercase;
}

.downloads span[aria-hidden="true"] { color: var(--accent); }
.tagline { margin: 0; color: var(--success); font-size: clamp(0.93rem, 2.6vw, 1.08rem); font-weight: 800; }

.download-button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--theme);
  box-shadow: 0 12px 22px rgba(38, 0, 71, 0.22);
  font-family: "Outfit", sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 160ms ease, background-color 160ms ease;
}

.download-button:hover { background: var(--theme-strong); transform: translateY(-2px); }
.download-button:focus-visible, .text-download:focus-visible { outline: 3px solid #e27c00; outline-offset: 4px; }
.primary-download { min-width: min(100%, 280px); margin-top: 25px; text-transform: none; }

.features-panel, .offers-panel {
  border: 1px solid rgba(38, 0, 71, 0.07);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.features-panel {
  margin-top: 39px;
  padding: 31px;
  border-radius: 24px;
}

.features-panel h2, .offers-panel h2 {
  margin: 0;
  color: var(--theme);
  font-size: clamp(1.2rem, 3.5vw, 1.55rem);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.feature-item {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid #eee8f1;
  border-radius: 11px;
  background: var(--surface-soft);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
}

.feature-icon { flex: 0 0 25px; font-size: 1.18rem; text-align: center; }

.notice {
  margin: 25px auto 14px;
  padding: 10px 18px;
  border: 1px dashed var(--accent);
  border-radius: 999px;
  color: #b85b00;
  font-size: 0.86rem;
  font-weight: 800;
  text-align: center;
}

.verification { margin: 0; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-align: center; }
.verification span[aria-hidden="true"] { color: var(--success); }

.offers-panel { margin-top: 32px; padding: 28px 24px; border-radius: 20px; text-align: center; }
.offers-panel h2 { color: #a34600; font-size: clamp(1.05rem, 3vw, 1.3rem); text-transform: none; }

.offers-panel ul { display: grid; gap: 8px; margin: 18px 0; padding: 0; color: var(--muted); font-size: 0.87rem; font-weight: 700; list-style: none; }
.text-download { color: var(--theme); font-size: 0.9rem; font-weight: 800; text-decoration: none; }
.text-download:hover { text-decoration: underline; }

footer { margin-top: 34px; color: #71637c; font-size: 0.71rem; font-weight: 700; text-align: center; text-transform: uppercase; }

.download-bar {
  position: fixed;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 14px 20px;
  border-top: 1px solid rgba(38, 0, 71, 0.08);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -7px 25px rgba(38, 0, 71, 0.08);
  backdrop-filter: blur(10px);
  text-align: center;
}

.bottom-download { width: min(100%, 520px); }

@media (max-width: 540px) {
  .page-shell { padding: 31px 15px 105px; }
  .brand-mark { width: 94px; height: 94px; margin-bottom: 15px; }
  .features-panel { margin-top: 31px; padding: 25px 16px; border-radius: 18px; }
  .feature-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 21px; }
  .feature-item { min-height: 53px; font-size: 0.84rem; }
  .notice { border-radius: 14px; line-height: 1.35; }
  .offers-panel { margin-top: 22px; padding: 24px 16px; border-radius: 18px; }
  footer { margin-top: 27px; font-size: 0.64rem; }
  .download-button { min-height: 52px; font-size: 1rem; }
}