body.landing { background: radial-gradient(900px 500px at 80% -10%, #2a2550 0%, transparent 60%), #0f1117; }
.lp-top { display: flex; align-items: center; gap: 24px; padding: 16px 28px; max-width: 1150px; margin: 0 auto; }
.lp-brand { font-size: 22px; font-weight: 700; color: #fff; }
.lp-top nav { display: flex; gap: 22px; flex: 1; }
.lp-top nav a { color: #9aa3b5; font-size: 14px; }
.lp-top nav a:hover { color: #fff; }
.lp-actions { display: flex; gap: 10px; }

.lp-btn { display: inline-block; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; border: 1px solid #323849; color: #e8eaf0; }
.lp-btn.solid { background: #6c5ce7; border-color: #6c5ce7; color: #fff; }
.lp-btn.solid:hover { background: #7d6ff0; }
.lp-btn.ghost:hover { background: #1b1f2a; }
.lp-btn.big { padding: 13px 24px; font-size: 16px; }

main { max-width: 1150px; margin: 0 auto; padding: 0 28px; }
.lp-hero { display: flex; align-items: center; gap: 40px; padding: 56px 0 72px; }
.lp-hero-text { flex: 1; }
.lp-tag { display: inline-block; font-size: 13px; color: #a29bfe; background: #2a2550; padding: 5px 12px; border-radius: 999px; }
.lp-hero h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.1; margin: 16px 0; }
.lp-hero p { color: #9aa3b5; font-size: 18px; line-height: 1.55; max-width: 560px; margin: 0 0 28px; }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.lp-phone { width: 230px; flex: none; aspect-ratio: 9 / 18; border: 6px solid #272b38; border-radius: 32px; overflow: hidden; background: #000; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.lp-screen { position: relative; height: 100%; background: linear-gradient(160deg, #6c5ce7 0%, #1b2233 65%); }
.lp-bar { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.lp-bar i { display: block; width: 55%; height: 100%; border-radius: 3px; background: #fff; }
.lp-sub { position: absolute; left: 10px; right: 10px; bottom: 26%; text-align: center; font: 800 20px/1.2 Arial, sans-serif; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.lp-sub em { font-style: normal; color: #ff0; }
.lp-tags { position: absolute; left: 14px; bottom: 34px; font-size: 11px; color: #dfe3ff; }

.lp-section { padding: 48px 0; }
.lp-section h2 { font-size: 28px; margin: 0 0 24px; text-align: center; }
.lp-steps, .lp-grid { display: grid; gap: 16px; }
.lp-steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lp-step, .lp-card { background: #181b24; border: 1px solid #272b38; border-radius: 12px; padding: 22px; }
.lp-step b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #6c5ce7; color: #fff; margin-bottom: 12px; }
.lp-step h3, .lp-card h3 { margin: 0 0 6px; font-size: 17px; }
.lp-step p, .lp-card p { margin: 0; color: #9aa3b5; font-size: 14px; line-height: 1.55; }

.lp-contact { text-align: center; }
.lp-contact > p { color: #9aa3b5; margin: -8px 0 24px; }
.lp-contact-list { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lp-contact-item { display: flex; flex-direction: column; gap: 4px; min-width: 240px; padding: 18px 24px; background: #181b24; border: 1px solid #272b38; border-radius: 12px; color: #e8eaf0; }
.lp-contact-item span { font-size: 13px; color: #9aa3b5; }
.lp-contact-item strong { font-size: 18px; }
.lp-contact-item.wa { border-color: #25d366; }
.lp-contact-item.wa span { color: #25d366; }
.lp-contact-item:hover { background: #1b1f2a; }
.lp-muted { color: #9aa3b5; }

.lp-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1150px; margin: 40px auto 0; padding: 22px 28px; border-top: 1px solid #272b38; color: #9aa3b5; font-size: 13px; }

@media (max-width: 800px) {
  .lp-top { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .lp-top nav { order: 3; flex-basis: 100%; gap: 16px; }
  .lp-actions { margin-left: auto; }
  main { padding: 0 16px; }
  .lp-hero { flex-direction: column; padding: 32px 0 48px; }
  .lp-phone { width: 190px; }
}

.lp-lead { text-align: center; color: #9aa3b5; margin: -8px 0 24px; }
.lp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 760px; margin: 0 auto; }
.lp-plan { position: relative; display: flex; flex-direction: column; gap: 10px; background: #181b24; border: 1px solid #272b38; border-radius: 14px; padding: 26px; }
.lp-plan.featured { border-color: #6c5ce7; background: #1d1a38; }
.lp-plan h3 { margin: 0; font-size: 22px; }
.lp-plan > p { margin: 0; color: #9aa3b5; font-size: 14px; }
.lp-plan ul { list-style: none; padding: 0; margin: 6px 0 14px; display: grid; gap: 8px; flex: 1; }
.lp-plan li { font-size: 14px; padding-left: 22px; position: relative; }
.lp-plan li::before { content: "\2713"; position: absolute; left: 0; color: #55efc4; }
.lp-plan .lp-btn { text-align: center; }
.lp-pill { position: absolute; top: -11px; right: 18px; background: #6c5ce7; color: #fff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }

.lp-price { display: flex; align-items: baseline; gap: 4px; }
.lp-price b { font-size: 36px; }
.lp-price span { color: #9aa3b5; font-size: 14px; }

.lp-pay { max-width: 520px; margin: 24px auto 0; text-align: left; }