:root {
        --bg1: #bdbdbd;
        --bg2: #a9a9a9;
        --red: #d10000;
        --red-dark: #a90000;
        --text: #171717;
        --muted: rgba(23, 23, 23, 0.68);
        --card: rgba(255, 255, 255, 0.42);
        --card-border: rgba(255, 255, 255, 0.52);
        --shadow: rgba(0, 0, 0, 0.18);
        --shine: rgba(255, 255, 255, 1);
      }

      * {
        box-sizing: border-box;
      }

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

      body {
        background:
          radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 34%),
          linear-gradient(135deg, var(--bg1), var(--bg2));
        font-family:
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          Helvetica,
          Arial,
          sans-serif;
        color: var(--text);
      }

      .page {
        min-height: 100vh;
        width: 100%;
        display: grid;
        place-items: center;
        padding: 32px 20px;
      }

      .shell {
        width: min(1120px, 100%);
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 42px;
        align-items: center;
      }

      .hero {
        padding: 28px 0;
      }

      .logo {
        font-size: clamp(48px, 8vw, 88px);
        font-weight: 900;
        letter-spacing: 0.01em;
        line-height: 1.02;
        margin: 0 0 18px;
        display: inline-block;

        color: transparent;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;

        background-image:
          linear-gradient(var(--red), var(--red)),
          linear-gradient(
            110deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 35%,
            var(--shine) 50%,
            rgba(255, 255, 255, 0) 65%,
            rgba(255, 255, 255, 0) 100%
          );

        background-repeat: no-repeat, no-repeat;
        background-size: 100% 100%, 320% 100%;
        background-position: 0 0, -220% 0;
        background-blend-mode: screen;

        filter:
          drop-shadow(0 3px 0 rgba(0, 0, 0, 0.1))
          drop-shadow(0 14px 30px rgba(0, 0, 0, 0.18));

        animation:
          shineMove 3.5s linear infinite,
          floatY 4.5s ease-in-out infinite;
      }

      .tagline {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 18px;
        font-size: clamp(25px, 4vw, 46px);
        line-height: 1.05;
        font-weight: 850;
        letter-spacing: -0.04em;
      }

      .voice-icon {
        width: 48px;
        height: 48px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        background: rgba(209, 0, 0, 0.12);
        box-shadow: inset 0 0 0 1px rgba(209, 0, 0, 0.18);
        flex: 0 0 auto;
      }

      .voice-icon svg {
        width: 26px;
        height: 26px;
        fill: var(--red);
        }

        .talking-icon {
        background: rgba(24, 170, 88, 0.14);
        box-shadow: inset 0 0 0 1px rgba(24, 170, 88, 0.22);
        }

        .talking-icon svg {
        width: 34px;
        height: 34px;
        fill: #18aa58;
        }


      .description {
        max-width: 610px;
        margin: 0 0 30px;
        color: var(--muted);
        font-size: clamp(17px, 2vw, 21px);
        line-height: 1.55;
        font-weight: 520;
      }

      .waitlist-card {
        width: min(520px, 100%);
        padding: 18px;
        border-radius: 28px;
        background: var(--card);
        border: 1px solid var(--card-border);
        box-shadow: 0 22px 70px var(--shadow);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .waitlist-title {
        margin: 0 0 12px;
        font-size: 20px;
        font-weight: 820;
      }

      .waitlist-form {
        display: flex;
        gap: 10px;
      }

      .email-input {
        min-width: 0;
        flex: 1;
        border: 0;
        outline: 0;
        border-radius: 999px;
        padding: 15px 17px;
        font: inherit;
        font-size: 16px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
      }

      .submit-button {
        border: 0;
        border-radius: 999px;
        padding: 15px 20px;
        font: inherit;
        font-size: 16px;
        font-weight: 800;
        color: white;
        background: linear-gradient(180deg, var(--red), var(--red-dark));
        cursor: pointer;
        box-shadow: 0 12px 24px rgba(209, 0, 0, 0.25);
        transition:
          transform 160ms ease,
          opacity 160ms ease;
      }

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

      .submit-button:disabled {
        cursor: not-allowed;
        opacity: 0.62;
        transform: none;
      }

      .form-message {
        min-height: 22px;
        margin: 12px 4px 0;
        font-size: 14px;
        color: var(--muted);
      }

      .form-message.success {
        color: #126b2c;
        font-weight: 700;
      }

      .form-message.error {
        color: #9b0000;
        font-weight: 700;
      }

      .preview {
        display: grid;
        place-items: center;
      }

      .phone {
        width: min(350px, 88vw);
        min-height: 690px;
        border-radius: 52px;
        padding: 18px;
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18)),
          rgba(20, 20, 20, 0.88);
        box-shadow:
          0 32px 80px rgba(0, 0, 0, 0.3),
          inset 0 0 0 2px rgba(255, 255, 255, 0.22);
        transform: none;
      }

      .phone-screen {
        min-height: 654px;
        border-radius: 38px;
        overflow: hidden;
        padding: 22px 18px;
        background:
          radial-gradient(circle at top, rgba(209, 0, 0, 0.16), transparent 34%),
          linear-gradient(180deg, #f8f8f8, #e7e7e7);
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .phone-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
      }

      .phone-title {
        font-weight: 900;
        color: var(--red);
      }

      .phone-pill {
        width: 58px;
        height: 8px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.16);
      }

      .bubble {
        max-width: 88%;
        padding: 13px 15px;
        border-radius: 22px;
        font-size: 15px;
        line-height: 1.35;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
      }

      .bubble.you {
        align-self: flex-end;
        color: white;
        background: var(--red);
        border-bottom-right-radius: 8px;
      }

      .bubble.friend {
        align-self: flex-start;
        background: white;
        border-bottom-left-radius: 8px;
      }

      .bubble strong {
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        opacity: 0.66;
      }

      .audio-row {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 7px;
      }

      .audio-dot {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: currentColor;
        opacity: 0.7;
      }

      .audio-line {
        height: 6px;
        border-radius: 999px;
        background: currentColor;
        opacity: 0.26;
      }

      .audio-line.one {
        width: 28px;
      }

      .audio-line.two {
        width: 44px;
      }

      .audio-line.three {
        width: 20px;
      }

      .mini-note {
        margin-top: auto;
        padding: 14px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.58);
        color: rgba(23, 23, 23, 0.64);
        font-size: 13px;
        line-height: 1.4;
        text-align: center;
      }

      @keyframes shineMove {
        from {
          background-position: 0 0, -220% 0;
        }
        to {
          background-position: 0 0, 220% 0;
        }
      }

      @keyframes floatY {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-6px);
        }
      }

      @media (max-width: 860px) {
        body {
          overflow-x: hidden;
        }

        .page {
          padding: 28px 18px 42px;
        }

        .shell {
          grid-template-columns: 1fr;
          gap: 28px;
        }

        .hero {
          text-align: center;
          padding: 10px 0 0;
        }

        .tagline {
          justify-content: center;
        }

        .description {
          margin-left: auto;
          margin-right: auto;
        }

        .waitlist-card {
          margin: 0 auto;
        }

        .waitlist-form {
          flex-direction: column;
        }

        .submit-button {
          width: 100%;
        }

        .phone {
          min-height: auto;
          transform: none;
        }

        .phone-screen {
          min-height: 560px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .logo {
          animation: none !important;
        }

        .submit-button {
          transition: none;
        }
      }