* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: Inter, Arial, sans-serif;
      background: #f8f4ff;
      color: #3b2f4a;
      line-height: 1.6;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    code {
      font-family: "Fira Code", Consolas, monospace;
    }

    /* ========== LAYOUT ========== */
    .rs-container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding-left: 16px;
      padding-right: 16px;
    }

    .rs-flex { display: flex; }
    .rs-grid { display: grid; }
    .rs-block { display: block; }

    .rs-items-center { align-items: center; }
    .rs-justify-center { justify-content: center; }
    .rs-justify-between { justify-content: space-between; }

    .rs-gap-2 { gap: 8px; }
    .rs-gap-3 { gap: 12px; }
    .rs-gap-4 { gap: 16px; }
    .rs-gap-6 { gap: 24px; }
    .rs-gap-8 { gap: 32px; }

    .rs-p-1 { padding: 4px; }
    .rs-p-2 { padding: 8px; }
    .rs-p-3 { padding: 12px; }
    .rs-p-4 { padding: 16px; }
    .rs-p-6 { padding: 24px; }
    .rs-p-8 { padding: 32px; }

    .rs-px-4 { padding-left: 16px; padding-right: 16px; }
    .rs-px-6 { padding-left: 24px; padding-right: 24px; }

    .rs-py-2 { padding-top: 8px; padding-bottom: 8px; }
    .rs-py-3 { padding-top: 12px; padding-bottom: 12px; }
    .rs-py-4 { padding-top: 16px; padding-bottom: 16px; }
    .rs-py-6 { padding-top: 24px; padding-bottom: 24px; }
    .rs-py-8 { padding-top: 32px; padding-bottom: 32px; }
    .rs-py-12 { padding-top: 48px; padding-bottom: 48px; }
    .rs-py-16 { padding-top: 64px; padding-bottom: 64px; }

    .rs-mb-2 { margin-bottom: 8px; }
    .rs-mb-3 { margin-bottom: 12px; }
    .rs-mb-4 { margin-bottom: 16px; }
    .rs-mb-6 { margin-bottom: 24px; }
    .rs-mb-8 { margin-bottom: 32px; }
    .rs-mb-12 { margin-bottom: 48px; }

    .rs-mt-4 { margin-top: 16px; }
    .rs-mt-6 { margin-top: 24px; }
    .rs-mt-8 { margin-top: 32px; }

    .rs-w-full { width: 100%; }
    .rs-text-center { text-align: center; }

    /* ========== GRID HELPERS ========== */
    .rs-grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rs-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rs-grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* ========== COLORS ========== */
    .rs-bg-dark { background: #f8f4ff; }
    .rs-bg-surface { background: #fffaff; }
    .rs-bg-card { background: #ffffff; }
    .rs-bg-black { background: #3b2f4a; }
    .rs-bg-white { background: #ffffff; }
    .rs-bg-blue { background: #a78bfa; } /* pastel lavender */
    .rs-bg-green { background: #86efac; } /* pastel green */
    .rs-bg-purple { background: #c4b5fd; }
    .rs-bg-pink { background: #f9a8d4; } /* pastel pink */
    .rs-bg-yellow { background: #fde68a; }
    .rs-bg-red { background: #fca5a5; }

    .rs-text-white { color: #ffffff; }
    .rs-text-gray { color: #7c6f8f; }
    .rs-text-blue { color: #8b5cf6; }
    .rs-text-green { color: #16a34a; }
    .rs-text-yellow { color: #ca8a04; }
    .rs-text-dark { color: #3b2f4a; }

    /* ========== TYPOGRAPHY ========== */
    .rs-text-xs { font-size: 12px; }
    .rs-text-sm { font-size: 14px; }
    .rs-text-base { font-size: 16px; }
    .rs-text-lg { font-size: 18px; }
    .rs-text-xl { font-size: 24px; }
    .rs-text-2xl { font-size: 36px; }
    .rs-text-3xl { font-size: 56px; }

    .rs-font-medium { font-weight: 500; }
    .rs-font-semibold { font-weight: 600; }
    .rs-font-bold { font-weight: 700; }

    .rs-leading-tight { line-height: 1.1; }

    /* ========== BORDERS / RADIUS / SHADOW ========== */
    .rs-rounded { border-radius: 12px; }
    .rs-rounded-lg { border-radius: 18px; }
    .rs-rounded-xl { border-radius: 24px; }
    .rs-rounded-full { border-radius: 9999px; }

    .rs-border {
      border: 1px solid rgba(139, 92, 246, 0.12);
    }

    .rs-shadow {
      box-shadow: 0 12px 32px rgba(139, 92, 246, 0.08);
    }

    /* ========== BUTTONS ========== */
    .rs-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 20px;
      border-radius: 12px;
      font-weight: 600;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all 0.25s ease;
      font-size: 15px;
    }

    .rs-btn:hover {
      transform: translateY(-2px);
    }

    .rs-btn-primary {
      background: #8b5cf6;
      color: #fff;
      box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2);
    }

    .rs-btn-primary:hover {
      background: #7c3aed;
    }

    .rs-btn-secondary {
      background: #ffffff;
      color: #3b2f4a;
      border: 1px solid rgba(139, 92, 246, 0.12);
    }

    .rs-btn-secondary:hover {
      background: #faf5ff;
    }

    .rs-btn-success {
      background: #86efac;
      color: #14532d;
    }

    .rs-btn-success:hover {
      background: #4ade80;
    }

    /* ========== COMPONENT HELPERS ========== */
    .rs-card {
      background: #ffffff;
      border: 1px solid rgba(139, 92, 246, 0.1);
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 12px 32px rgba(139, 92, 246, 0.06);
    }

    .rs-chip {
      display: inline-block;
      padding: 8px 12px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      background: rgba(139, 92, 246, 0.12);
      color: #8b5cf6;
    }

    .rs-swatch {
      height: 80px;
      border-radius: 16px;
      margin-bottom: 12px;
    }

    .rs-code {
      background: #fdf4ff;
      border: 1px solid rgba(236, 72, 153, 0.12);
      border-radius: 16px;
      padding: 20px;
      color: #7c3aed;
      font-family: "Fira Code", Consolas, monospace;
      overflow-x: auto;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .rs-hero {
      background:
        radial-gradient(circle at top right, rgba(196, 181, 253, 0.35), transparent 30%),
        radial-gradient(circle at bottom left, rgba(249, 168, 212, 0.25), transparent 35%),
        #f8f4ff;
    }

    .rs-feature-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(139, 92, 246, 0.12);
      color: #8b5cf6;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .rs-demo-box {
      background: linear-gradient(180deg, #ffffff 0%, #fdf4ff 100%);
      border: 1px solid rgba(139, 92, 246, 0.1);
      border-radius: 24px;
      padding: 24px;
      box-shadow: 0 16px 40px rgba(139, 92, 246, 0.08);
    }

    .rs-mini-stat {
      background: #ffffff;
      border: 1px solid rgba(139, 92, 246, 0.1);
      border-radius: 16px;
      padding: 16px;
    }

    .rs-navbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(248, 244, 255, 0.9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(139, 92, 246, 0.08);
    }

    .rs-nav-link {
      color: #7c6f8f;
      font-weight: 500;
      transition: color 0.2s ease;
    }

    .rs-nav-link:hover {
      color: #8b5cf6;
    }

    .rs-list li {
      margin-bottom: 10px;
      color: #7c6f8f;
    }

    .rs-list li:last-child {
      margin-bottom: 0;
    }

    /* ========== SECTION SPACING ========== */
    section {
      padding: 80px 0;
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 992px) {
      .rs-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .rs-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .rs-grid-2 { grid-template-columns: 1fr; }
      .rs-text-3xl { font-size: 42px; }
      .rs-nav-links {
        display: none;
      }
    }

    @media (max-width: 640px) {
      .rs-grid-4,
      .rs-grid-3 {
        grid-template-columns: 1fr;
      }

      .rs-text-3xl { font-size: 34px; }
      .rs-text-2xl { font-size: 28px; }

      section {
        padding: 64px 0;
      }

      .rs-btn {
        width: 100%;
      }

      .rs-btn-group {
        flex-direction: column;
      }
    }