:root {
        color-scheme: dark;
        --vh: 1vh;
        --stage-height: calc(var(--vh) * 100);
        --creative-ratio: 784 / 1168;
        --creative-ratio-value: 0.6712328767;
        --page-max-width: 784px;
        --page-bg: #0a0610;
        --pink: #f0a6d3;
        --glow: rgba(255, 98, 181, 0.58);
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        background: var(--page-bg);
      }

      body {
        min-height: var(--stage-height);
        overflow: hidden;
        overscroll-behavior: none;
        background:
          radial-gradient(circle at 86% 10%, rgba(208, 37, 123, 0.25), transparent 31rem),
          var(--page-bg);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        -webkit-tap-highlight-color: transparent;
      }

      .page {
        position: fixed;
        inset: 0;
        display: grid;
        width: 100%;
        height: var(--stage-height);
        min-height: var(--stage-height);
        place-items: center;
        overflow: hidden;
        isolation: isolate;
        padding: max(0px, env(safe-area-inset-top)) 0 max(0px, env(safe-area-inset-bottom));
      }

      .page::before {
        position: absolute;
        inset: -44px;
        z-index: 0;
        background: center / cover no-repeat url("landing-bg.jpg");
        content: "";
        filter: blur(28px) saturate(1.08) brightness(0.58);
        opacity: 0.55;
        pointer-events: none;
        transform: scale(1.08);
      }

      .landing {
        position: relative;
        z-index: 1;
        width: min(100vw, calc(var(--stage-height) * var(--creative-ratio-value)), var(--page-max-width));
        height: auto;
        aspect-ratio: var(--creative-ratio);
        overflow: hidden;
        isolation: isolate;
        background: #0b0711;
        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
      }

      .visual {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        user-select: none;
        -webkit-user-drag: none;
        animation: visual-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .brand {
        position: absolute;
        z-index: 3;
        top: max(20px, env(safe-area-inset-top));
        left: 22px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        color: #fff8fc;
        font-size: clamp(14px, 2.7vw, 18px);
        font-weight: 700;
        letter-spacing: 0.055em;
        text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75);
      }

      .brand::before {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #f4b1db;
        box-shadow: 0 0 0 4px rgba(244, 177, 219, 0.13), 0 0 14px #ef80c1;
        content: "";
        animation: breathe 2.2s ease-in-out infinite;
      }

      .brand b {
        color: var(--pink);
      }

      .button-link {
        position: absolute;
        z-index: 2;
        left: 3.15%;
        width: 30.65%;
        overflow: hidden;
        border-radius: 999px;
        isolation: isolate;
        outline: none;
        cursor: pointer;
        touch-action: manipulation;
      }

      .button-link::before {
        position: absolute;
        inset: 0;
        border: 1px solid transparent;
        border-radius: inherit;
        box-shadow: 0 0 0 transparent;
        content: "";
        transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease, transform 180ms ease;
      }

      .button-link:focus-visible::before,
      .button-link:hover::before {
        border-color: rgba(255, 220, 243, 0.72);
        background-color: rgba(255, 184, 223, 0.07);
        box-shadow: 0 0 17px var(--glow), inset 0 0 13px rgba(255, 147, 209, 0.15);
      }

      .button-link:active::before {
        transform: scale(0.975);
        background-color: rgba(255, 222, 244, 0.2);
      }

      .web-button {
        top: 32.9%;
        height: 9.15%;
      }

      .ios-button {
        top: 45.25%;
        height: 9.1%;
      }

      .android-button {
        top: 57.7%;
        height: 9.15%;
      }

      .edge-light {
        position: absolute;
        z-index: 1;
        inset: auto -25% -16% 30%;
        height: 23%;
        pointer-events: none;
        background: radial-gradient(ellipse, rgba(218, 61, 149, 0.16), transparent 66%);
        filter: blur(8px);
        animation: glow-drift 5s ease-in-out infinite alternate;
      }

      @keyframes visual-in {
        from {
          opacity: 0;
          transform: scale(1.012);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      @keyframes breathe {
        50% {
          opacity: 0.64;
          box-shadow: 0 0 0 7px rgba(244, 177, 219, 0.07), 0 0 18px #ef80c1;
        }
      }

      @keyframes glow-drift {
        from {
          transform: translateX(-4%) translateY(2%);
        }
        to {
          transform: translateX(5%) translateY(-4%);
        }
      }

      @media (min-width: 785px) {
        .page {
          padding: 28px;
        }

        .landing {
          border-radius: 24px;
        }
      }

      @media (max-width: 480px) {
        .landing {
          width: min(100vw, calc(var(--stage-height) * var(--creative-ratio-value)));
          border-radius: 0;
          box-shadow: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }