* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       margin: 0; color: #222; line-height: 1.6; background: #fafafa; }
nav { background: #1a1a2e; padding: 0.9rem 1.5rem; display: flex; gap: 1.5rem; align-items: center; }
nav a { color: #ddd; text-decoration: none; }
nav a:hover { color: #fff; }
nav .brand { font-weight: bold; font-size: 1.2rem; color: #fff; margin-right: auto; }
nav .cta { background: #4f8cff; color: #fff !important; padding: 0.4rem 1rem;
           border-radius: 6px; font-weight: bold; }
.lang-switch { margin-left: 0.5rem; font-size: 0.9rem; }
.lang-switch a { color: #999; padding: 0.2rem 0.4rem; }
.lang-switch a.active { color: #fff; font-weight: bold; }
nav .dropdown { position: relative; }
nav .dropbtn { color: #ddd; cursor: pointer; }
nav .dropdown:hover .dropbtn, nav .dropdown:focus-within .dropbtn { color: #fff; }
nav .dropmenu { display: none; position: absolute; top: 100%; left: -0.5rem;
                background: #1a1a2e; border: 1px solid #333; border-radius: 8px;
                padding: 0.4rem 0; min-width: 13rem; z-index: 10;
                box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
nav .dropdown:hover .dropmenu, nav .dropdown:focus-within .dropmenu { display: block; }
nav .dropmenu a { display: block; padding: 0.5rem 1.2rem; white-space: nowrap; }
nav .dropmenu a:hover { background: #2a2a45; }
.note { background: #fff8e6; border-left: 4px solid #e8a838; padding: 0.9rem 1.1rem;
        border-radius: 0 8px 8px 0; color: #555; }
table.compare { width: 100%; border-collapse: collapse; margin: 1.5rem 0;
                background: #fff; border-radius: 10px; overflow: hidden;
                font-size: 0.95rem; }
table.compare th, table.compare td { text-align: left; padding: 0.7rem 0.8rem;
                border-bottom: 1px solid #eee; vertical-align: top; }
table.compare thead th { background: #1a1a2e; color: #fff; }
table.compare thead th.muse-col { background: #4f8cff; }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare tbody tr:nth-child(even) { background: #f7f9fc; }
table.compare td:first-child { white-space: nowrap; }
main { max-width: 760px; margin: 2rem auto; padding: 0 1.5rem 3rem; }
h1 { font-size: 2rem; margin-bottom: 0.25rem; }
h2 { margin-top: 2rem; color: #1a1a2e; }
.lede { font-size: 1.15rem; color: #555; }
.cards { display: grid; gap: 1rem; margin-top: 2rem; }
.card { background: #fff; border: 1px solid #e3e3e3; border-radius: 10px;
        padding: 1.25rem 1.5rem; text-decoration: none; color: inherit;
        transition: box-shadow 0.15s; display: block; }
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.card h2 { margin: 0 0 0.4rem; }
.card p { margin: 0; color: #555; }
.card.highlight { border-color: #4f8cff; background: #f0f5ff; }
.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.badge { font-size: 0.8rem; padding: 0.15rem 0.65rem; border-radius: 999px;
         background: #eef2ff; color: #4f8cff; border: 1px solid #d5e0ff;
         display: inline-block; }
.badge.stage-live { background: #e9f9ef; color: #1d7a3a; border-color: #bfe8cc; }
.badge.stage-beta { background: #fff4e0; color: #9a6b12; border-color: #f0dca8; }
.badge.stage-prototype { background: #f3eefe; color: #6a4fc0; border-color: #d9cffb; }
.badge.stage-idea { background: #f0f0f0; color: #666; border-color: #ddd; }
.badge.looking { background: #fff8e6; color: #9a6b12; border-color: #f0dca8; }
.showcase-card h2 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.showcase-card .meta { color: #777; font-size: 0.9rem; }
.showcase-card.slot { border-style: dashed; background: #fafbff; }
.exercises li { margin-bottom: 0.75rem; }
.invite-box { background: #1a1a2e; border-radius: 10px; padding: 1.5rem;
              text-align: center; margin: 1rem 0; }
.invite-box code { font-size: 2rem; letter-spacing: 0.15em; color: #7dffb0;
                   font-weight: bold; }
.invite-poster { display: block; width: 100%; max-width: 520px; margin: 1.5rem auto;
                 border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
.redeem-demo { display: block; width: 100%; max-width: 780px; margin: 1.5rem auto;
               border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.10); }
.hint { color: #777; font-size: 0.95rem; }
.button { display: inline-block; background: #4f8cff; color: #fff !important;
          padding: 0.7rem 1.6rem; border-radius: 8px; text-decoration: none;
          font-weight: bold; margin-top: 1rem; }
footer { text-align: center; color: #999; font-size: 0.85rem; padding: 2rem; }