:root {
  color-scheme: dark;
  --background: #080a13;
  --text: #f2f3fc;
  --muted: #b1b5cd;
  --line: #282b40;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  background: var(--background);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 900px;
  max-height: 100%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 35% 32% at 35% 28%, #334b9e24, transparent 100%),
    radial-gradient(ellipse 36% 32% at 65% 30%, #6b42ae25, transparent 100%);
}
.page { position: relative; max-width: 1200px; margin: auto; padding: 0 64px; }
main { text-align: center; }
.hero { padding: 64px 0 42px; }
.brand-emblem {
  width: 48px; height: 48px; margin: 0 auto 30px;
  color: #b6bfff;
}
.brand-emblem svg { display: block; width: 100%; height: 100%; }
h1 {
  font-size: clamp(3.2rem, 10.6vw, 8.2rem);
  font-weight: 650; letter-spacing: -.065em; line-height: 1.08;
  margin: 0 0 25px; padding-right: .065em;
  color: #efefff;
  background: linear-gradient(110deg, #ffffff 20%, #dedfff 65%, #bdb7ef);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
p { margin: 0; }
.sale-label {
  color: #c1c7f2; font-size: .875rem; font-weight: 600;
  letter-spacing: .19em; line-height: 1.8;
}
.intro {
  max-width: 510px; margin: 21px auto 0; color: var(--muted);
  font-size: 1.125rem; line-height: 1.7; text-wrap: pretty;
}
.offer { margin-top: 34px; }
.price { font-size: 2.5rem; letter-spacing: -.045em; line-height: 1.3; font-weight: 600; }
.price span { font-size: .8125rem; color: var(--muted); letter-spacing: .09em; font-weight: 500; vertical-align: middle; margin-left: 7px; }
.actions { display: flex; justify-content: center; gap: 12px; margin-top: 25px; }
.button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 56px; padding: 16px 24px; min-width: 200px;
  border-radius: 7px; border: 1px solid transparent;
  font: 600 .8125rem/1.5 "Segoe UI", Arial, Helvetica, sans-serif;
  letter-spacing: .065em; opacity: 1;
}
.button span { font-size: 1.125rem; line-height: 1; font-weight: 400; }
a.button { text-decoration: none; cursor: pointer; }
a.button:hover { background: #e2e4ff; }
a.button:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
.button-primary { background: #d2d5ff; color: #13162b; box-shadow: 0 4px 28px #727de21a; }
.details { border-top: 1px solid var(--line); padding: 30px 10px 0; }
.qualities { font-size: 1rem; line-height: 1.9; color: #d9dcef; }
.qualities span { white-space: nowrap; }
.uses { color: var(--muted); font-size: .875rem; line-height: 2; margin: 16px auto 0; max-width: 760px; }
.trust { color: #a5abc5; font-size: .8125rem; line-height: 1.9; margin: 38px auto 0; }
footer {
  border-top: 1px solid var(--line); margin-top: 42px; padding: 25px 0 30px;
  display: flex; justify-content: space-between; gap: 16px;
  color: var(--muted); font-size: .8125rem; line-height: 1.6;
}
.footer-brand { color: #e1e4f5; letter-spacing: .1em; font-size: .8125rem; font-weight: 600; }
.skip-link { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 12px 16px; background: #d2d5ff; color: #13162b; transform: translateY(-200%); border-radius: 5px; }
.skip-link:focus { transform: translateY(0); outline: 3px solid #ffffff; outline-offset: 3px; }
@media (min-width: 1600px) { .hero { padding-top: 90px; } }
@media (max-width: 600px) {
  .page { padding: 0 24px; }
  .hero { padding: 42px 0 31px; }
  .brand-emblem { width: 40px; height: 40px; margin-bottom: 25px; }
  h1 { font-size: clamp(2rem, 13.5vw, 5.1rem); margin-bottom: 22px; }
  .sale-label { font-size: .75rem; letter-spacing: .13em; }
  .intro { font-size: 1rem; max-width: 350px; margin-top: 18px; }
  .offer { margin-top: 26px; }
  .price { font-size: 2.25rem; }
  .actions { flex-direction: column; max-width: 350px; margin: 23px auto 0; }
  .button { width: 100%; min-width: 0; }
  .details { padding: 26px 0 0; }
  .qualities { max-width: 290px; margin: auto; font-size: .9375rem; }
  .uses { max-width: 350px; font-size: .875rem; margin-top: 14px; }
  .trust { max-width: 300px; margin-top: 26px; }
  footer { flex-direction: column; align-items: center; gap: 7px; text-align: center; margin-top: 29px; padding: 24px 0; }
}
@media (forced-colors: active) {
  h1 { background: none; -webkit-text-fill-color: CanvasText; }
  .button { border-color: GrayText; color: GrayText; }
}
@media print {
  :root { color-scheme: light; background: white; color: black; }
  body::before { display: none; }
  h1 { background: none; -webkit-text-fill-color: black; }
  p, .price span { color: black !important; }
}