/* =========================================================
       PRAHDAW MUSIC
       MIDNIGHT BLACK + RED
       ========================================================= */

    :root {
      --black: #000000;
      --background: #040405;
      --background-soft: #070708;

      --panel: #0a0a0c;
      --panel-raised: #101012;
      --panel-hover: #141416;

      --border: #202024;
      --border-light: #303035;

      --white: #f6f6f7;
      --silver: #c9c9ce;
      --muted: #85858d;
      --muted-dark: #5b5b63;

      --red: #e1262f;
      --red-bright: #ff3039;
      --red-dark: #9d151c;

      --red-glow:
        0 0 14px rgba(225, 38, 47, 0.20),
        0 0 35px rgba(225, 38, 47, 0.08);

      --panel-shadow:
        0 28px 80px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

      --max-width: 1220px;
    }


    /* =========================================================
       RESET
       ========================================================= */

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

    html {
      scroll-behavior: smooth;
    }

    body {
      min-height: 100vh;

      background:
        radial-gradient(
          circle at 50% -300px,
          rgba(225, 38, 47, 0.09),
          transparent 600px
        ),
        var(--background);

      color: var(--white);

      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Helvetica Neue",
        Arial,
        sans-serif;

      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
    }

    button {
      font: inherit;
    }


    /* =========================================================
       HEADER
       ========================================================= */

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;

      height: 72px;

      display: flex;
      align-items: center;

      background: rgba(3, 3, 4, 0.90);

      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);

      border-bottom: 1px solid rgba(255, 255, 255, 0.06);

      z-index: 1000;
    }

    .header-inner {
      width: min(var(--max-width), calc(100% - 48px));

      margin: 0 auto;

      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 11px;

      text-decoration: none;

      font-size: 17px;
      font-weight: 760;

      letter-spacing: 0.5px;
    }

    .brand-light {
      width: 8px;
      height: 8px;

      border-radius: 50%;

      background: var(--red);

      box-shadow: var(--red-glow);
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .desktop-nav a {
      color: var(--muted);

      text-decoration: none;

      font-size: 13px;
      font-weight: 550;

      transition: color 150ms ease;
    }

    .desktop-nav a:hover {
      color: var(--white);
    }

    .desktop-nav .account-button {
      color: var(--white);

      padding: 9px 15px;

      border: 1px solid var(--border-light);
      border-radius: 8px;

      background:
        linear-gradient(
          180deg,
          #151517,
          #0a0a0b
        );

      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 18px rgba(0, 0, 0, 0.38);
    }

    .desktop-nav .account-button:hover {
      border-color: rgba(225, 38, 47, 0.55);
    }

    .mobile-menu-button {
      display: none;

      width: 38px;
      height: 38px;

      align-items: center;
      justify-content: center;

      color: white;

      background: #0d0d0f;

      border: 1px solid var(--border);
      border-radius: 8px;

      cursor: pointer;
    }


    /* =========================================================
       GENERAL
       ========================================================= */

    .page-section {
      width: min(var(--max-width), calc(100% - 48px));

      margin: 0 auto;

      padding: 110px 0;
    }

    .section-kicker {
      display: flex;
      align-items: center;
      gap: 10px;

      margin-bottom: 15px;

      color: var(--red);

      font-size: 11px;
      font-weight: 750;

      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .section-kicker::before {
      content: "";

      width: 22px;
      height: 1px;

      background: var(--red);

      box-shadow: var(--red-glow);
    }

    .section-heading {
      max-width: 820px;

      margin-bottom: 24px;

      font-size: clamp(38px, 5vw, 62px);
      line-height: 1;

      letter-spacing: -2.6px;
    }

    .section-description {
      max-width: 650px;

      color: var(--muted);

      font-size: 17px;
      line-height: 1.7;
    }


    /* =========================================================
       BUTTONS
       ========================================================= */

    .button-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      gap: 12px;

      margin-top: 34px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-height: 44px;

      padding: 0 21px;

      border-radius: 9px;

      text-decoration: none;

      font-size: 14px;
      font-weight: 680;

      transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
    }

    .button-primary {
      color: white;

      background:
        linear-gradient(
          180deg,
          #ed2c35,
          #ad151c
        );

      border: 1px solid #ee3b43;

      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 8px 22px rgba(0, 0, 0, 0.45),
        0 0 24px rgba(225, 38, 47, 0.12);
    }

    .button-primary:hover {
      transform: translateY(-1px);

      background:
        linear-gradient(
          180deg,
          var(--red-bright),
          #be1921
        );
    }

    .button-secondary {
      color: var(--silver);

      background:
        linear-gradient(
          180deg,
          #151517,
          #0a0a0b
        );

      border: 1px solid var(--border-light);

      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 7px 18px rgba(0, 0, 0, 0.4);
    }

    .button-secondary:hover {
      color: white;
      border-color: #4b4b52;
      transform: translateY(-1px);
    }


    /* =========================================================
       HERO
       ========================================================= */

    .hero {
      min-height: 100vh;

      display: flex;
      align-items: center;

      padding: 130px 24px 70px;
    }

    .hero-inner {
      width: min(var(--max-width), 100%);

      margin: 0 auto;

      text-align: center;
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;

      margin-bottom: 25px;

      color: var(--red);

      font-size: 11px;
      font-weight: 760;

      letter-spacing: 2.3px;

      text-transform: uppercase;
    }

    .hero-kicker-dot {
      width: 6px;
      height: 6px;

      border-radius: 50%;

      background: var(--red);

      box-shadow: var(--red-glow);
    }

    .hero h1 {
      max-width: 1050px;

      margin: 0 auto;

      font-size: clamp(66px, 10vw, 134px);
      line-height: 0.84;

      letter-spacing: -7px;

      font-weight: 790;
    }

    .hero-title-accent {
      color: var(--silver);
    }

    .hero-copy {
      max-width: 700px;

      margin: 34px auto 0;

      color: var(--muted);

      font-size: clamp(17px, 2vw, 20px);
      line-height: 1.65;
    }

    .hero .button-row {
      justify-content: center;

      margin-top: 38px;
    }

    .hero-roles {
      margin-top: 54px;

      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      gap: 8px;
    }

    .role-pill {
      padding: 8px 12px;

      color: #8f8f97;

      background: #09090a;

      border: 1px solid #1b1b1e;
      border-radius: 100px;

      font-size: 11px;
      letter-spacing: 0.6px;

      text-transform: uppercase;
    }


    /* =========================================================
       THREE WORLDS
       ========================================================= */

    .worlds {
      width: min(var(--max-width), calc(100% - 48px));

      margin: -15px auto 80px;

      display: grid;
      grid-template-columns: repeat(3, 1fr);

      gap: 14px;
    }

    .world-card {
      position: relative;

      min-height: 250px;

      padding: 30px;

      overflow: hidden;

      border-radius: 15px;

      background:
        linear-gradient(
          145deg,
          #0f0f11,
          #070708
        );

      border: 1px solid var(--border);

      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 20px 45px rgba(0, 0, 0, 0.24);

      text-decoration: none;

      transition:
        transform 170ms ease,
        border-color 170ms ease;
    }

    .world-card:hover {
      transform: translateY(-3px);

      border-color: rgba(225, 38, 47, 0.4);
    }

    .world-number {
      color: var(--red);

      font-size: 11px;
      font-weight: 750;

      letter-spacing: 1.5px;
    }

    .world-card h3 {
      margin-top: 55px;

      font-size: 30px;

      letter-spacing: -1px;
    }

    .world-card p {
      margin-top: 11px;

      color: var(--muted);

      font-size: 14px;
      line-height: 1.6;
    }

    .world-arrow {
      position: absolute;

      right: 27px;
      bottom: 24px;

      color: var(--muted);
    }


    /* =========================================================
       ARTIST
       ========================================================= */

    .artist-layout {
      margin-top: 50px;

      display: grid;
      grid-template-columns: 1.1fr 0.9fr;

      gap: 18px;
    }

    .artist-visual {
      min-height: 520px;

      border-radius: 18px;

      background:
        radial-gradient(
          circle at 50% 25%,
          rgba(225, 38, 47, 0.16),
          transparent 42%
        ),
        linear-gradient(
          135deg,
          #121214,
          #050506
        );

      border: 1px solid var(--border);

      box-shadow: var(--panel-shadow);

      display: flex;
      align-items: center;
      justify-content: center;

      text-align: center;

      color: #57575e;

      font-size: 13px;
      letter-spacing: 1px;
    }

    .artist-info {
      display: flex;
      flex-direction: column;
      justify-content: center;

      min-height: 520px;

      padding: 45px;

      border-radius: 18px;

      background:
        linear-gradient(
          145deg,
          #101012,
          #080809
        );

      border: 1px solid var(--border);

      box-shadow: var(--panel-shadow);
    }

    .artist-info h3 {
      margin-bottom: 18px;

      font-size: 39px;

      letter-spacing: -1.7px;
    }

    .artist-info p {
      color: var(--muted);

      line-height: 1.7;
    }


    /* =========================================================
       BEATS
       ========================================================= */

    .beats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      gap: 14px;

      margin-top: 48px;
    }

    .beat-card {
      padding: 16px;

      background: var(--panel);

      border: 1px solid var(--border);
      border-radius: 15px;

      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 18px 35px rgba(0, 0, 0, 0.18);
    }

    .beat-art {
      aspect-ratio: 1 / 1;

      border-radius: 11px;

      background:
        radial-gradient(
          circle at 35% 25%,
          rgba(225, 38, 47, 0.2),
          transparent 42%
        ),
        #111113;

      border: 1px solid #202024;

      display: flex;
      align-items: center;
      justify-content: center;

      color: #55555c;

      font-size: 11px;
    }

    .beat-info {
      padding: 17px 4px 5px;
    }

    .beat-info h3 {
      font-size: 17px;
    }

    .beat-meta {
      margin-top: 6px;

      color: var(--muted);

      font-size: 12px;
    }


    /* =========================================================
       SOFTWARE
       ========================================================= */

    .software-feature {
      margin-top: 50px;

      display: grid;
      grid-template-columns: 1.05fr 0.95fr;

      min-height: 500px;

      overflow: hidden;

      border-radius: 19px;

      background:
        radial-gradient(
          circle at 76% 24%,
          rgba(225, 38, 47, 0.12),
          transparent 42%
        ),
        #09090a;

      border: 1px solid #28282d;

      box-shadow:
        var(--panel-shadow),
        0 0 80px rgba(225, 38, 47, 0.035);
    }

    .software-copy {
      padding: 56px;

      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .software-type {
      color: var(--red);

      font-size: 10px;
      font-weight: 780;

      letter-spacing: 2px;

      text-transform: uppercase;
    }

    .software-copy h3 {
      margin: 12px 0 18px;

      font-size: clamp(45px, 6vw, 72px);
      line-height: 0.95;

      letter-spacing: -3px;
    }

    .software-copy p {
      max-width: 500px;

      color: var(--muted);

      line-height: 1.7;
    }

    .software-visual {
      margin: 18px;

      border-radius: 14px;

      background:
        linear-gradient(
          145deg,
          #151518,
          #080809
        );

      border: 1px solid #29292d;

      display: flex;
      align-items: center;
      justify-content: center;

      color: #57575f;

      font-size: 12px;
      letter-spacing: 0.7px;

      text-align: center;
    }

    .software-secondary-grid {
      margin-top: 14px;

      display: grid;
      grid-template-columns: 1fr 1fr;

      gap: 14px;
    }

    .software-card {
      min-height: 310px;

      padding: 38px;

      border-radius: 16px;

      background:
        radial-gradient(
          circle at 85% 10%,
          rgba(225, 38, 47, 0.08),
          transparent 38%
        ),
        linear-gradient(
          145deg,
          #101012,
          #070708
        );

      border: 1px solid var(--border);

      box-shadow: var(--panel-shadow);
    }

    .software-card h3 {
      margin: 12px 0 16px;

      font-size: 38px;

      letter-spacing: -1.6px;
    }

    .software-card p {
      color: var(--muted);

      line-height: 1.65;
    }


    /* =========================================================
       CREDITS
       ========================================================= */

    .credits-panel {
      margin-top: 48px;

      padding: 48px;

      border-radius: 17px;

      background:
        linear-gradient(
          145deg,
          #0d0d0f,
          #070708
        );

      border: 1px solid var(--border);

      box-shadow: var(--panel-shadow);
    }

    .credits-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      gap: 1px;

      overflow: hidden;

      border: 1px solid #1d1d20;
      border-radius: 12px;

      background: #1d1d20;
    }

    .credit {
      min-height: 120px;

      display: flex;
      align-items: center;
      justify-content: center;

      padding: 20px;

      text-align: center;

      background: #09090a;

      color: var(--silver);

      font-size: 13px;
      font-weight: 620;
    }


    /* =========================================================
       UPDATES
       ========================================================= */

    .updates-grid {
      margin-top: 48px;

      display: grid;
      grid-template-columns: repeat(3, 1fr);

      gap: 14px;
    }

    .update-card {
      min-height: 190px;

      padding: 29px;

      border-radius: 14px;

      background:
        linear-gradient(
          145deg,
          #0f0f11,
          #080809
        );

      border: 1px solid var(--border);
    }

    .update-tag {
      color: var(--red);

      font-size: 10px;
      font-weight: 750;

      letter-spacing: 1.6px;

      text-transform: uppercase;
    }

    .update-card h3 {
      margin: 25px 0 10px;

      font-size: 20px;
    }

    .update-card p {
      color: var(--muted);

      font-size: 13px;
      line-height: 1.6;
    }


    /* =========================================================
       FINAL CTA
       ========================================================= */

    .final-cta {
      width: min(var(--max-width), calc(100% - 48px));

      margin: 80px auto 120px;

      padding: 80px 30px;

      text-align: center;

      border-radius: 20px;

      background:
        radial-gradient(
          circle at 50% -20%,
          rgba(225, 38, 47, 0.18),
          transparent 58%
        ),
        #09090a;

      border: 1px solid #27272b;

      box-shadow: var(--panel-shadow);
    }

    .final-cta h2 {
      max-width: 800px;

      margin: 0 auto;

      font-size: clamp(42px, 6vw, 70px);
      line-height: 0.98;

      letter-spacing: -3px;
    }

    .final-cta p {
      margin: 22px auto 0;

      max-width: 600px;

      color: var(--muted);

      line-height: 1.7;
    }

    .final-cta .button-row {
      justify-content: center;
    }


    /* =========================================================
       FOOTER
       ========================================================= */

    footer {
      border-top: 1px solid #171719;
    }

    .footer-inner {
      width: min(var(--max-width), calc(100% - 48px));

      margin: 0 auto;

      padding: 42px 0;

      display: flex;
      align-items: center;
      justify-content: space-between;

      color: #5f5f66;

      font-size: 12px;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;

      gap: 20px;
    }

    .footer-links a {
      color: #74747c;

      text-decoration: none;
    }

    .footer-links a:hover {
      color: white;
    }


    /* =========================================================
       MOBILE NAV
       ========================================================= */

    .mobile-nav {
      display: none;

      position: fixed;

      top: 72px;
      left: 0;
      right: 0;

      padding: 18px 24px 24px;

      background: rgba(5, 5, 6, 0.98);

      border-bottom: 1px solid var(--border);

      z-index: 999;
    }

    .mobile-nav.open {
      display: block;
    }

    .mobile-nav a {
      display: block;

      padding: 14px 0;

      color: var(--silver);

      text-decoration: none;

      border-bottom: 1px solid #151517;
    }


    /* =========================================================
       RESPONSIVE
       ========================================================= */

    @media (max-width: 950px) {
      .desktop-nav {
        display: none;
      }

      .mobile-menu-button {
        display: flex;
      }

      .hero h1 {
        letter-spacing: -4px;
      }

      .worlds {
        grid-template-columns: 1fr;
      }

      .artist-layout {
        grid-template-columns: 1fr;
      }

      .beats-grid {
        grid-template-columns: 1fr 1fr;
      }

      .software-feature {
        grid-template-columns: 1fr;
      }

      .software-visual {
        min-height: 380px;
      }

      .credits-grid {
        grid-template-columns: 1fr 1fr;
      }

      .updates-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 650px) {
      .header-inner,
      .page-section,
      .worlds,
      .final-cta,
      .footer-inner {
        width: calc(100% - 32px);
      }

      .hero {
        padding-left: 16px;
        padding-right: 16px;
      }

      .hero h1 {
        letter-spacing: -3px;
      }

      .beats-grid {
        grid-template-columns: 1fr;
      }

      .software-secondary-grid {
        grid-template-columns: 1fr;
      }

      .software-copy {
        padding: 35px 28px;
      }

      .credits-panel {
        padding: 24px;
      }

      .credits-grid {
        grid-template-columns: 1fr;
      }

      .footer-inner {
        flex-direction: column;

        align-items: flex-start;

        gap: 22px;
      }
    }