:root {
  color-scheme: light dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--tg-theme-bg-color, #07110d);
  color: var(--tg-theme-text-color, #f4fff9);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 90% 0%, rgba(70, 255, 170, .18), transparent 38%),
    linear-gradient(160deg, #07110d 0%, #0e1d16 52%, #07110d 100%);
}

.shell {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: calc(28px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
}

.hero { padding: 18px 2px 28px; }
.eyebrow { color: #62f2ad; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 8px 0; font-size: clamp(34px, 10vw, 54px); letter-spacing: -.055em; }
.hero p, footer { color: var(--tg-theme-hint-color, #a5b9ad); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h2 { margin: 0; font-size: 22px; }
.stars-label { color: #ffd75a; font-size: 13px; font-weight: 750; }
.plans { display: grid; gap: 12px; margin-top: 14px; }
.plan, .skeleton {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  padding: 18px;
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(16px);
}
.plan-top { display: flex; justify-content: space-between; gap: 14px; }
.plan h3 { margin: 0 0 6px; font-size: 19px; }
.plan p { margin: 0; color: var(--tg-theme-hint-color, #a5b9ad); font-size: 14px; line-height: 1.45; }
.price { color: #ffd75a; font-size: 19px; font-weight: 800; white-space: nowrap; }
.facts { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.fact { padding: 6px 9px; border-radius: 999px; background: rgba(98, 242, 173, .1); color: #8fffc6; font-size: 12px; }
button {
  width: 100%; border: 0; border-radius: 14px; padding: 13px 16px;
  background: #58eaa3; color: #07110d; font: inherit; font-weight: 800; cursor: pointer;
}
button:disabled { opacity: .45; cursor: not-allowed; }
.status { min-height: 22px; margin: 16px 2px; color: #ffd75a; }
footer { margin-top: 28px; font-size: 12px; line-height: 1.5; }

@media (prefers-reduced-motion: no-preference) {
  .plan { animation: rise .32s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}