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

    :root {
      --bg: #000000;
      --surface: #1a1a2e;
      --surface2: #0f0f1a;
      --accent: #4299e1;
      --accent2: #2b6cb0;
      --text: #e2e8f0;
      --muted: #a0aec0;
      --border: #2d2d3f;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    /* HERO BANNER (Mercy Wizard wordmark, replaces the old h1) */
    .hero-banner {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto 12px;
      max-width: 480px;
    }
    .hero-banner img {
      display: block;
      width: 100%;
      height: auto;
      filter: invert(1);
    }

    .hero-name {
      color: #f0f4ff;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
      font-size: clamp(1.4rem, 3vw, 1.9rem);
      font-weight: 500;
      letter-spacing: 0.2px;
      margin-bottom: 32px;
    }
    .hero-name-em {
      font-weight: 700;
    }
    .hero-name-de {
      font-size: 0.65em;
      font-weight: 300;
      color: rgba(240, 244, 255, 0.75);
      letter-spacing: 0.4px;
      margin: 0 0.6em;
    }

    /* NAV */
    nav {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      height: 60px;
    }

    .nav-logo {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      text-decoration: none;
      letter-spacing: -0.3px;
    }

    .nav-links {
      display: flex;
      gap: 36px;
      list-style: none;
    }

    .nav-links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 500;
      transition: color 0.2s;
    }

    .nav-links a:hover {
      color: var(--text);
    }

    /* HERO */
    .hero {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 60px 24px;
    }

    .hero-inner {
      max-width: 640px;
    }

    .hero-portrait {
      display: block;
      width: 220px;
      height: 220px;
      object-fit: cover;
      border-radius: 50%;
      margin: 0 auto 28px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .hero-portrait:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 36px rgba(217, 30, 124, 0.45), 0 8px 30px rgba(0, 0, 0, 0.4);
    }

    @media (max-width: 600px) {
      .hero-portrait { width: 160px; height: 160px; margin-bottom: 20px; }
    }

    .hero h1 {
      font-size: clamp(2.4rem, 6vw, 4rem);
      font-weight: 700;
      color: #f0f4ff;
      letter-spacing: -1px;
      line-height: 1.15;
      margin-bottom: 20px;
    }

    .hero p {
      color: var(--muted);
      font-size: 1.15rem;
      line-height: 1.7;
      margin-bottom: 40px;
    }

    .hero-cta {
      display: inline-flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }
    .hero-cta-row {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .hero-cta-top { margin-bottom: 20px; }

    /* Bottom hero CTA group (Music / Artwork / Merch / Guitars and the
       Mailing List button) — uniform min-width so the four buttons
       always render the same size regardless of label length. The
       Bloops / Player pair in the top group inherits the same sizing. */
    .hero-cta:not(.hero-cta-top) .btn,
    .hero-cta-top .hero-cta-row .btn {
      min-width: 160px;
      text-align: center;
    }

    .btn {
      display: inline-block;
      padding: 13px 32px;
      border-radius: 30px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.2;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .btn-primary {
      background: #000;
      color: #fff;
      border: 1px solid #fff;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      background: #bf00ff;
      color: #fff;
      border-color: #bf00ff;
      box-shadow: 0 0 24px rgba(191, 0, 255, 0.65);
    }

    /* Top hero CTAs — outlined in palette colours that complement the warm
       bottom buttons (green / red / amber) with cool counterparts. */
    .btn-recordings {
      background: transparent;
      color: #4fd1c5;
      border: 1px solid #4fd1c5;
    }
    .btn-recordings:hover {
      transform: translateY(-2px);
      background: rgba(79, 209, 197, 0.1);
      box-shadow: 0 8px 28px rgba(79, 209, 197, 0.22);
    }

    /* Pre-Save CTA — yellow neon (carried over from the old Latest
       Release button) to call extra attention. */
    .btn-presave {
      background: transparent;
      color: #fde047;
      border: 1px solid #fde047;
      box-shadow: 0 0 12px rgba(253, 224, 71, 0.35);
    }
    .btn-presave:hover {
      transform: translateY(-2px);
      background: rgba(253, 224, 71, 0.12);
      box-shadow: 0 0 22px rgba(253, 224, 71, 0.6);
    }


    .btn-bloops {
      background: transparent;
      color: #9f7aea;
      border: 1px solid #9f7aea;
    }
    .btn-bloops:hover {
      transform: translateY(-2px);
      background: rgba(159, 122, 234, 0.1);
      box-shadow: 0 8px 28px rgba(159, 122, 234, 0.22);
    }

    .btn-player {
      background: transparent;
      color: #f472b6;
      border: 1px solid #d91e7c;
    }
    .btn-player:hover {
      transform: translateY(-2px);
      background: rgba(217, 30, 124, 0.1);
      box-shadow: 0 8px 28px rgba(217, 30, 124, 0.25);
    }

    .btn-artwork {
      background: transparent;
      color: #5a67d8;
      border: 1px solid #5a67d8;
    }
    .btn-artwork:hover {
      transform: translateY(-2px);
      background: rgba(90, 103, 216, 0.1);
      box-shadow: 0 8px 28px rgba(90, 103, 216, 0.22);
    }

    .btn-secondary {
      background: transparent;
      color: #4299e1;
      border: 1px solid #4299e1;
    }

    .btn-secondary:hover {
      transform: translateY(-2px);
      background: rgba(66, 153, 225, 0.1);
      box-shadow: 0 8px 28px rgba(66, 153, 225, 0.175);
    }

    .btn-mailinglist {
      background: transparent;
      color: #68d391;
      border: 1px solid #68d391;
    }

    .btn-mailinglist:hover {
      transform: translateY(-2px);
      background: rgba(104, 211, 145, 0.1);
      box-shadow: 0 8px 28px rgba(104, 211, 145, 0.2);
    }

    .btn-guitars {
      background: transparent;
      color: #f6ad55;
      border: 1px solid #f6ad55;
    }
    .btn-guitars:hover {
      transform: translateY(-2px);
      background: rgba(246, 173, 85, 0.1);
      box-shadow: 0 8px 28px rgba(246, 173, 85, 0.2);
    }

    .btn-merch {
      background: transparent;
      color: #f56565;
      border: 1px solid #f56565;
    }
    .btn-merch:hover {
      transform: translateY(-2px);
      background: rgba(245, 101, 101, 0.1);
      box-shadow: 0 8px 28px rgba(245, 101, 101, 0.2);
    }

    .btn-ghost {
      border: 1px solid var(--border);
      color: var(--muted);
    }

    .btn-ghost:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* SECTIONS */
    section {
      padding: 100px 24px;
    }

    .section-inner {
      max-width: 800px;
      margin: 0 auto;
    }

    .section-label {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }

    .section-title {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 700;
      color: #f0f4ff;
      letter-spacing: -0.5px;
      margin-bottom: 24px;
    }

    .section-body {
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.8;
    }

    .section-body p + p {
      margin-top: 16px;
    }

    /* DIVIDER */
    .divider {
      border: none;
      border-top: 1px solid var(--border);
      max-width: 800px;
      margin: 0 auto;
    }

    /* CARD */
    .card {
      background: var(--surface);
      border-radius: 16px;
      padding: 36px;
      margin-top: 40px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    }

    .card-icon {
      font-size: 2.5rem;
      margin-bottom: 16px;
    }

    .card h3 {
      font-size: 1.4rem;
      color: #f0f4ff;
      margin-bottom: 10px;
    }

    .card p {
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 24px;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
      margin-top: 40px;
    }
    .card-grid .card { margin-top: 0; }

    /* FOOTER */
    footer {
      border-top: 1px solid var(--border);
      padding: 16px 20px;
      text-align: center;
      color: var(--border);
      font-size: 0.75rem;
    }

    /* SOCIAL BAR — sits inside the hero, just under the heading. Replace the
       # hrefs on the TikTok and Substack links with the real URLs when ready. */
    .social-bar {
      display: flex;
      justify-content: center;
      gap: 28px;
      padding: 0 0 28px;
      flex-wrap: wrap;
    }
    .social-bar a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--muted);
      text-decoration: none;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
      font-size: 0.88rem;
      font-weight: 600;
      transition: color 0.2s;
    }
    .social-bar a:hover { color: var(--accent); }
    .social-bar svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* MAILING LIST MODAL */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(6px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 200;
      padding: 24px;
    }

    .modal-backdrop.open {
      display: flex;
      animation: fadeIn 0.2s ease;
    }

    .modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 36px;
      max-width: 440px;
      width: 100%;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      position: relative;
    }

    .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      background: transparent;
      border: none;
      color: var(--muted);
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
      padding: 6px 10px;
      border-radius: 6px;
      transition: color 0.2s, background 0.2s;
    }

    .modal-close:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.05);
    }

    .modal h2 {
      font-size: 1.5rem;
      color: #f0f4ff;
      margin-bottom: 8px;
    }

    .modal p {
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .mc-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .mc-form input[type="email"] {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
      color: var(--text);
      font-size: 1rem;
      font-family: inherit;
      transition: border-color 0.2s;
    }

    .mc-form input[type="email"]:focus {
      outline: none;
      border-color: var(--accent);
    }

    .mc-form button {
      background: linear-gradient(135deg, #2b6cb0, #4299e1);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .mc-form button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(66, 153, 225, 0.3);
    }

    .mc-honeypot {
      position: absolute;
      left: -5000px;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* MOBILE */
    @media (max-width: 600px) {
      nav { padding: 0 20px; }
      .nav-links { gap: 20px; }
      section { padding: 80px 20px; }
      .card { padding: 24px; }
      .modal { padding: 28px 22px; }
    }