:root {
  --royal: #6a00ff;
  --gold:  #f5c518;
  --slate: #1f2937;
  --cloud: #f8fafc;
  --accent: #9b59b6;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--slate); background: var(--cloud); }
a { color: var(--royal); text-decoration: none; }
a:hover { text-decoration: underline; }
.header { background: linear-gradient(135deg, var(--royal), var(--accent)); color: white; padding: 28px 20px; }
.header .wrap { max-width: 1040px; margin: 0 auto; display:flex; align-items:center; justify-content: space-between; gap: 20px; }
.logo { display:flex; align-items:center; gap:12px; font-weight: 800; letter-spacing: .3px; }
.logo .crown { width: 36px; height: 36px; background: var(--gold); border-radius: 8px; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.logo .crown:before, .logo .crown:after { content:''; position:absolute; background: var(--gold); }
.logo .crown:before { width: 10px; height: 10px; border-radius: 50%; top: -6px; left: 4px; }
.logo .crown:after  { width: 10px; height: 10px; border-radius: 50%; top: -6px; right: 4px; }
.nav a { margin: 0 10px; font-weight: 600; color: #fff; opacity: .95; }
.nav a:hover { opacity: 1; }
.hero { max-width: 1040px; margin: 24px auto; padding: 0 20px 24px; display:grid; grid-template-columns: 1.2fr .8fr; gap: 24px; }
.hero .card { background:white; border-radius: 16px; box-shadow: 0 12px 24px rgba(31,41,55,.08); padding: 24px; }
.hero h1 { font-size: clamp(28px, 4vw, 46px); margin: 0; }
.badges { display:flex; gap:10px; margin:10px 0 16px; flex-wrap: wrap; }
.badge { background: #efe9fb; color: var(--royal); padding: 6px 10px; border-radius: 999px; font-weight:600; font-size: 14px; }
.cta { display:flex; gap:12px; margin-top: 16px; flex-wrap: wrap; }
.button { background: var(--royal); color:white; padding: 12px 16px; border-radius: 10px; font-weight:700; box-shadow: 0 8px 14px rgba(106,0,255,.25); border:0; cursor:pointer; display:inline-block; }
.button.alt { background: var(--gold); color: #1b1040; box-shadow: 0 8px 14px rgba(245,197,24,.3); }
.section { max-width: 1040px; margin: 0 auto; padding: 12px 20px 28px; }
.cards { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card.service { background:white; border-radius: 14px; padding:16px; box-shadow: 0 6px 12px rgba(31,41,55,.08); }
.card.service h3 { margin: 0 0 6px; }
.pricing { display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.price { background: #fff7e6; border: 1px dashed var(--gold); border-radius: 14px; padding: 16px; }
.footer { background: #0f172a; color: #cbd5e1; margin-top: 24px; }
.footer .wrap { max-width: 1040px; margin: 0 auto; padding: 24px 20px; display:flex; flex-wrap:wrap; align-items:flex-start; gap: 24px; }
.footer a { color: #cbd5e1; }
.form { display:grid; gap:12px; }
input, textarea, select { padding: 12px; border: 1px solid #e5e7eb; border-radius: 10px; }
label { font-weight: 600; }
hr { border: none; height: 1px; background: #e5e7eb; margin: 20px 0; }
.small { font-size: 14px; opacity: .9; }
@media (max-width: 900px){ .hero{grid-template-columns:1fr;} .cards{grid-template-columns:1fr 1fr;} }
@media (max-width: 520px){ .cards{grid-template-columns:1fr;} .pricing{grid-template-columns:1fr;} }