:root { color-scheme: dark; font: 16px/1.5 system-ui, sans-serif; color: #f1faf7; background: #0a1917; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(#090e1a95, #090e1ad9), url('/katyusha-photo-1.jpg') center 42% / cover no-repeat; }
body { isolation: isolate; }
main { max-width: 1024px; padding: 28px 18px 42px; margin: 0 auto; }
header { display: flex; align-items: center; gap: 10px; font-weight: 700; }
header span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #102822; background: #a0f0d2; }
nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; padding: 12px; border-radius: 12px; background: #101827d9; }
a { color: #a0f0d2; }
.button { display: inline-block; padding: 10px 14px; border-radius: 10px; background: #a0f0d2; color: #102822; font-weight: 700; text-decoration: none; }
.button-secondary { background: #263449; color: #e9f6f0; }
section { margin-top: 18px; padding: clamp(20px, 5vw, 32px); border: 1px solid #a0f0d24d; border-radius: 22px; background: #101827cf; }
h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: 1.08; margin: 0 0 14px; max-width: 16ch; }
.hero { padding-block: clamp(32px, 8vw, 76px); background: linear-gradient(100deg, #101827f5, #1018278c); }
.hero p { max-width: 53ch; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.features, .plans { display: grid; gap: 14px; }
.features article { padding: 16px; border-radius: 12px; background: #1b2636bf; }
.features article p { margin-bottom: 0; }
@media (min-width: 740px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
h2, h3 { margin: 0 0 10px; }
h3:not(:first-child) { margin-top: 20px; }
p { color: #dbe8e4; }
label { display: block; margin-top: 22px; font-weight: 600; }
input { width: 110px; margin: 9px 0; padding: 8px 12px; font: inherit; color: inherit; border: 1px solid #588477; background: #0a1917; border-radius: 9px; }
.total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 12px 0 18px; }
output { font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 750; color: #a0f0d2; }
.notice { padding: 13px 14px; margin: 0; border-radius: 10px; background: #203a35; }
#checkout input { width: 100%; }
#checkout button { display: block; margin-top: 8px; padding: 10px 14px; border: 0; border-radius: 9px; background: #a0f0d2; color: #102822; font: inherit; font-weight: 700; cursor: pointer; }
#checkout button:disabled { opacity: .6; cursor: wait; }