<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Delicurious — Coming Soon</title>
  <meta name="description" content="Delicurious is where recipes meet curiosity. App coming soon." />

  <style>
    :root {
      --bg: #0f0f0f;
      --text: #ffffff;
      --muted: rgba(255, 255, 255, 0.7);
    }

    * {
      box-sizing: border-box;
    }

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

    body {
      background: var(--bg);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
      text-align: center;
      padding: 24px;
    }

    main {
      max-width: 900px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .bridge {
      width: min(920px, 95vw);
      height: auto;
      display: block;
    }

    .logo {
      width: min(420px, 85vw);
      height: auto;
      display: block;
      margin-top: -8px;
    }

    .tagline {
      margin-top: 12px;
      font-size: 1.1rem;
      color: var(--muted);
      letter-spacing: 0.3px;
    }

    .soon {
      font-size: 1rem;
      opacity: 0.6;
      margin-top: 4px;
    }

    img {
      user-select: none;
      -webkit-user-drag: none;
    }
  </style>
</head>

<body>
  <main>
    <img
      src="./delicurious-bridge.png"
      alt="Delicurious bridge illustration"
      class="bridge"
    />

    <img
      src="./deli-logo.png"
      alt="DELI logo"
      class="logo"
    />

    <div class="tagline">Recipes meet curiosity.</div>
    <div class="soon">🚀 App coming soon</div>
  </main>
</body>
</html>