:root {
  --sm-space: #1a1340;
  --sm-space-accent: #3a2b80;
  --sm-cta: #ffd21e;
  --sm-cta-hover: #f0b400;
  --sm-magenta: #e0399b;
  --sm-surface: #ffffff;
  --sm-ink: #2a2740;
  --sm-muted: #7d7a93;
  --sm-border: #e3def0;
  --sm-head: "Montserrat", Helvetica, Arial, sans-serif;
  --sm-body: "Open Sans", Helvetica, Arial, sans-serif;
}

.sm-body {
  background-color: #1a1340;
  color: #e3def0;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, h4, .sm-h, .sm-brand, .sm-hero-title {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}
h1, .sm-hero-title { font-size: 36px; font-weight: 800; }
h2 { font-size: 26px; font-weight: 700; }
h3 { font-size: 20px; font-weight: 700; }

/* ---------- Nav ---------- */
.sm-nav { background: #1a1340; border-bottom: 1px solid #3a2b80; }
.sm-brand { color: #ffd21e; }
.sm-burger { color: #ffd21e; }
.sm-navlink { color: #e3def0; text-decoration: none; padding: 0.4rem 0.75rem; }
.sm-navlink:hover { color: #ffd21e; }
.sm-dropdown { position: relative; }
.sm-dropdown-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 200px;
  background: #3a2b80; border: 1px solid #e3def0; border-radius: 6px; z-index: 50; }
.sm-dropdown:hover .sm-dropdown-menu, .sm-dropdown:focus-within .sm-dropdown-menu { display: block; }
.sm-dropdown-menu a { color: #e3def0; text-decoration: none; }
.sm-dropdown-menu a:hover { background: #1a1340; color: #ffd21e; }

/* ---------- Hero ---------- */
.sm-hero { background: linear-gradient(135deg, #1a1340 0%, #3a2b80 100%); color: #ffffff; }
.sm-hero-title { color: #ffffff; }
.sm-hero-sub { color: #c8c0f7; font-size: 1.15rem; }
.sm-hero-art img { max-width: 100%; box-shadow: 0 20px 60px rgba(224,57,155,0.25); }
.sm-cta { background: #ffd21e; color: #1a1340; font-family: var(--sm-head); font-weight: 700;
  padding: 0.85rem 1.6rem; border-radius: 9999px; text-decoration: none; font-size: 1.25rem; }
.sm-cta:hover { background: #f0b400; }
.sm-cta-link { color: #e0399b; font-weight: 700; text-decoration: none; }
.sm-cta-link:hover { color: #f0b400; text-decoration: underline; }

/* ---------- Sections / prose ---------- */
.sm-section { background: #1a1340; }
.sm-prose { background: #ffffff; color: #2a2740; border-radius: 14px; padding: 2rem 2.25rem; }
.sm-prose img { max-width: 100%; height: auto; }
.sm-prose a { color: #e0399b; text-decoration: underline; text-decoration-color: #e3def0; }
.sm-prose a:hover { color: #b10076; text-decoration-color: #e0399b; }
.sm-h { color: #2a2740; }
.sm-prose .sm-h { color: #2a2740; }
.sm-muted { color: #7d7a93; }
.sm-rule { border: 0; border-top: 1px solid #e3def0; }
.sm-code { background: #1a1340; color: #e3def0; padding: 1rem; border-radius: 8px; }

/* ---------- Cards ---------- */
.sm-card { background: #ffffff; color: #2a2740; border: 1px solid #e3def0; box-shadow: 0 8px 24px rgba(26,19,64,0.15); }
.sm-card .sm-h a { color: #2a2740; text-decoration: none; }
.sm-card .sm-h a:hover { color: #e0399b; }

/* ---------- Footer ---------- */
.sm-footer { background: #121233; color: #c9c5cf; }
.sm-footer .sm-brand { color: #ffd21e; }
.sm-footer-link { color: #c9c5cf; text-decoration: none; }
.sm-footer-link:hover { color: #ffd21e; }
.sm-footer-copy { color: #7d7a93; font-size: 0.85rem; border-top: 1px solid #3a2b80; }

@media print { .sm-nav, .sm-footer { display: none; } .sm-body { background: #fff; color: #000; } }