:root{
  --bg:#644375;
  --panel:#FFFFFF;
  --text:#0B3142;
  --brand:#6EC1E4;
  --shadow:0 8px 24px rgba(20,60,90,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0}
.badge{background:#E8F6FD;border:1px solid #CDECFB;color:#05507A;border-radius:999px;padding:8px 12px;font-weight:600}
.magicme-logo{height:44px}
.hero-card{background:var(--panel);border-radius:16px;box-shadow:var(--shadow);padding:22px}
h1{margin:0 0 10px;font-size:36px}
.lead{color:#5B7083;margin:0 0 14px}
.cta-row{display:flex;gap:10px}
.btn{padding:10px 14px;border-radius:12px;font-weight:700;border:2px solid transparent;text-decoration:none}
.primary{background:var(--brand);color:#003049}
.outline{background:#fff;border-color:var(--brand);color:#0B3142}
.section{margin:36px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.preview{display:block;width:100%;height:auto}
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.quote{background:var(--panel);border-left:6px solid var(--brand);border-radius:12px;box-shadow:var(--shadow);padding:14px}
.footer{text-align:center;color:#5B7083;padding:20px 0;font-size:14px}