:root {
        --orange: #de6449;
        --orange-light: #ea7c62;
        --ink: #1c0438;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }

      body {
        font-family: "Inter", sans-serif;
        background-color: var(--ink);
        color: #fff;
      }

      .hero {
        position: relative;
        min-height: 100svh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-image: url("bg-desktop.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 48px 24px 120px;
        text-align: center;
      }

      /* ---------- Logo ---------- */

      .logo {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 14px;
        opacity: 0;
        animation: fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s forwards;
      }

      .logo img {
        width: 235px;
        height: 91px;
        flex-shrink: 0;
      }

      /* ---------- Headline (Lottie) ---------- */

      .headline-wrap {
        max-width: 1100px;
        width: 100%;
        margin: 0 auto;
      }

      #lottie {
        background-color: transparent;
        width: 100%;
        height: clamp(180px, 28vh, 340px);
        display: block;
        overflow: hidden;
        position: relative;
      }

      #lottie svg {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100% !important;
        height: auto !important;
        transform: translateY(-50%);
      }

      /* ---------- Subhead ---------- */

      .subhead {
        font-weight: 600;
        font-size: clamp(1rem, 1.6vw, 1.25rem);
        max-width: 620px;
        margin: 22px auto 0;
        line-height: 1.5;
        opacity: 0;
        animation: fadeUpNoX 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.62s forwards;
      }

      /* ---------- CTA button ---------- */

      .cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 237px;
        height: 47px;
        margin-top: 34px;
        background: var(--orange);
        color: #fff;
        font-family: "General Sans", sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 27px;
        text-decoration: none;
        border-radius: 5px;
        clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
        transition:
          transform 0.25s ease,
          background 0.25s ease;
        opacity: 0;
        animation: fadeUpNoX 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.78s forwards;
      }

      .cta:hover {
        background: var(--orange-light);
        transform: translateY(-2px);
      }

      .cta:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 4px;
      }

      /* ---------- Footer ---------- */

      .footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 40px;
        font-weight: 700;
        font-size: 0.95rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        opacity: 0;
        animation: fadeUpNoX 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s forwards;
      }

      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translate(-50%, 10px);
        }
        to {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }

      @keyframes fadeUpNoX {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ---------- Mobile ---------- */

      @media (max-width: 640px) {
        .hero {
          padding: 32px 20px 100px;
        }
        .logo {
          top: 28px;
          gap: 10px;
        }
        .logo img {
          width: 214px;
          height: 81px;
        }
        #lottie {
          width: 160vw;
          max-width: none;
          height: clamp(220px, 32vh, 380px);
          left: 50%;
          transform: translateX(-50%);
        }
        .subhead {
          font-size: 0.95rem;
          margin-top: 16px;
        }
        .cta {
          width: 200px;
          height: 42px;
          margin-top: 26px;
          font-size: 17px;
          line-height: 23px;
        }
        .footer {
          bottom: 22px;
          padding: 0 24px;
          font-size: 0.72rem;
          letter-spacing: 0.04em;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .logo,
        .subhead,
        .cta,
        .footer {
          animation: none !important;
          opacity: 1 !important;
          transform: none !important;
        }
      }