:root {
      --bg: #0f1222;
      --card: #12162b;
      --text: #e8ebff;
      --muted: #b7c0ff;
      --accent: #6c7bff;
      --divider: #252a46;
    }

    * { box-sizing: border-box; }
    html, body { height: auto; min-height: 100dvh; }

    html { background: var(--bg); color-scheme: dark; }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
      background: radial-gradient(1200px 800px at 20% 20%, #1a1f3f 80%, var(--bg) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    img { display: block; }

    .container {
      width: min(1100px, 100%);
      padding: 28px;
    }

    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: center;
    }

    .mockup {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      min-height: 420px;
    }

    .mockup img {
      width: 100%;
      height: auto;
      max-width: 420px;
      aspect-ratio: 768 / 1338;
      object-fit: contain;
    }

    .content {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    h1.brand {
      margin: 6px 0 0 0;
      font-size: clamp(32px, 4vw, 44px);
      letter-spacing: 0.3px;
    }

    p.slogan {
        margin: 5px 0 0 0;
      font-size: clamp(16px, 1.8vw, 20px);
      color: var(--muted);
    }

    p.small-copy {
      margin: 5px 0 0 0;
      line-height: 1.6;
      color: #d8dcff;
      max-width: 48ch;
    }

    p.small-tech {
        margin: 5px 0 0 0;
        font-size: 14px;
        line-height: 1.5;
        color: #d8dcff;
    }

    .disclaimer {
      margin-top: 10px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
      padding-top: 12px;
    }

    @media (max-width: 900px) {
        .split { display: flex; flex-direction: column; }
        /* order now works because it's flex */
        .mockup { order: 0; padding: 12px; min-height: unset; }
        .content { order: 1; }
        .mockup img { max-width: 100%; height: auto; display:block; }

        body { align-items: flex-start; justify-content: flex-start; }
        html, body { height: auto; min-height: 100dvh; }
    }