:root{
  --bg: #FFFFFF;
  --text: #121215;
  --muted: #565B66;
  --card: #F7F7FA;
  --purple1: #5C35FF;
  --purple2: #9B66FF;
  --purple3: #6F3DDB;
  --accent: #5C35FF;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(20,16,48,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif}
h1,h2,h3,h4{font-family: ui-serif, 'Georgia', 'Times New Roman', serif; letter-spacing:.2px; color:#1b1533}
.wrap{max-width:1160px;margin:0 auto;padding:24px}
a{color:var(--accent)}
.header{display:flex;justify-content:space-between;align-items:center;gap:16px; padding-top:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:32px}
nav a{text-decoration:none;color:#4b4760;margin-left:16px}
nav a.cta{padding:10px 14px;border-radius:12px;border:1px solid #dfdbff;background:#f6f4ff;color:#27185e}

.hero{padding:56px 24px 24px; display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center}
.hero .tag{display:inline-block; font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:#5a4bb8; background:#f3f1ff; padding:6px 10px; border-radius:20px; border:1px solid #e6e2ff}
.hero h1{font-size:48px; line-height:1.05; margin:12px 0 12px}
.hero p.lead{font-size:18px; color:#47445a; max-width:700px}
.hero .btns{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.btn{display:inline-block; text-decoration:none; padding:14px 18px; border-radius:14px}
.btn.primary{background:linear-gradient(135deg, var(--purple2), var(--purple1)); color:white; box-shadow:var(--shadow)}
.btn.ghost{border:1px solid #e6e2ff; color:#2c225a; background:#fbfaff}

.section{padding:40px 24px}
.grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:16px}
.card{background:var(--card); border:1px solid #ecebff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin-top:0}
.muted{color:var(--muted)}

.pricing{background:#FCFBFF; border-top:1px solid #ecebff; border-bottom:1px solid #ecebff}
.table{width:100%; border-collapse:separate; border-spacing:0 12px; margin-top:8px}
.table thead th{text-align:left; font-size:14px; color:#493f88; padding:8px}
.table tbody tr{background:#fff; box-shadow:var(--shadow)}
.table td, .table th{padding:14px 16px; vertical-align:top}
.badge{display:inline-block; padding:4px 8px; border-radius:10px; font-size:12px; background:#f3f1ff; color:#4b2bb1; border:1px solid #e6e2ff}
.price{font-weight:800; font-size:20px; color:#241a5a}
.small{font-size:13px; color:#6a6780}

.footer{display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid #ecebff; padding:24px 24px 40px}
.footer a{color:#4b2bb1}

.note{background:#fbfaff;border:1px dashed #d7d2ff; padding:12px 14px; border-radius:10px; color:#3e3972}

@media (max-width: 920px){
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .hero h1{font-size:38px}
}