*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #0d0d0f;
      --bg2: #111114;
      --green: #2effa0;
      --green-dim: #1adb80;
      --white: #ffffff;
      --muted: #888899;
      --radius-phone: 52px;
      --black: #000000;
    }

    html, body {
      background: var(--white); /* White background for the overscroll bounce area */
      color: var(--white);
      font-family: 'Montserrat', 'Roboto', sans-serif;
      height: 100vh; /* fallback */
      height: 100dvh;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior-y: bounce;
    }

    /* ── Radial glow behind content ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    /* ── Layout ── */
    .page {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
      min-height: 100vh; /* fallback */
      min-height: 100dvh; 
      width: 100%;
      background: var(--bg); /* Dark background applied to the page content */
      background-image: radial-gradient(ellipse at top center, rgba(13, 46, 24, 0.4) 0%, #0d0d0f 80%);
    }

    /* Spacer to push everything to the bottom when there is extra height */
    .page::before {
      content: '';
      flex: 1;
      min-height: 32px; /* Minimum padding above logo */
    }

    /* ── Logo ── */
    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 24px;
      opacity: 0;
      animation: fadeUp 0.7s 0.1s ease forwards;
    }

    .logo-text {
      font-weight: 800;
      font-size: 24px;
      letter-spacing: -0.05em;
      color: var(--white);
    }

    /* ── Hero text ── */
    .hero {
      text-align: center;
      max-width: 640px;
      opacity: 0;
      animation: fadeUp 0.7s 0.25s ease forwards;
    }

    .hero h1 {
      font-size: clamp(32px, 5vw, 40px);
      font-weight: 500;
      line-height: 1.1;
      letter-spacing: 1.1px;
      margin-bottom: 12px;
      color: var(--white);
    }

    .hero h1 span { display: block; }

    .hero p {
      font-size: clamp(14px, 1.8vw, 18px);
      color: rgba(255, 255, 255, 0.77);
      line-height: 1.6;
      max-width: 420px;
      margin: 0 auto 24px;
    }

    /* ── CTA button ── */
    .cta-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      opacity: 0;
      animation: fadeUp 0.7s 0.4s ease forwards;
    }

    .btn-download {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--white);
      color: var(--black);
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 19px;
      padding: 12px 60px;
      border-radius: 60px;
      border: none;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
      text-decoration: none;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      animation: pulse 2s infinite;
    }

    .btn-download:hover {
      transform: scale(1.04);
      box-shadow: 0 8px 40px rgba(255, 255, 255, 0.3);
    }

    .apple-icon {
      width: 15px;
      height: 18px;
    }

    .footer-links {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .footer-links a {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.77);
      text-decoration: none;
      transition: color 0.15s;
      padding: 8px 12px; /* Increased tap target for mobile */
      border-radius: 8px;
    }

    .footer-links a:hover {
      color: var(--white);
      background: rgba(255, 255, 255, 0.05);
    }

    /* ── Mockup ── */
    .phone-wrap {
      margin-top: 32px; /* Restore static margin instead of auto */
      opacity: 0;
      animation: riseIn 1s 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      position: relative;
      display: flex;
      justify-content: center;
      /* Remove flex:1 and min-height:0 so it takes up natural space instead of squishing */
      width: 100%;
      padding-bottom: env(safe-area-inset-bottom, 0px); /* Respect iOS home indicator */
    }

    .mockup-img {
      /* Removed max-height: 100% so it never shrinks vertically */
      max-width: 280px;
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 40px 100px rgba(0,0,0,0.8));
    }

    /* ── Animations ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

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

    @keyframes pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
      }
      70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
      }
      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
      }
    }

    @media (max-width: 600px) {
      .page {
        padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
      }
      .logo { margin-bottom: 16px; }
      .hero h1 {
        font-size: 26px;
        margin-bottom: 12px;
      }
      .hero p {
        font-size: 14px;
        margin-bottom: 20px;
      }
      .mockup-img {
        max-width: 240px;
      }
      .btn-download {
        padding: 12px 32px;
      }
    }

    @media (max-height: 800px) {
      .logo { margin-bottom: 12px; }
      .hero p { margin-bottom: 16px; }
      .phone-wrap { margin-top: 24px; }
      .btn-download { padding: 10px 32px; font-size: 17px; }
    }