@font-face {
  font-family: "Lateef";
  src: url("Lateef-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@media (max-width: 700px) {
  .group {
    flex-direction: column;
    gap: 18px !important;
  }

  .card {
    --size: min(88vw, 420px) !important;
    transform: translate(0, 0) !important; /* removes the left shift */
    border-radius: 22px !important;
    font-size: clamp(26px, 6vw, 42px) !important;
    padding: 18px !important;
    box-sizing: border-box !important;
  }

  .logo {
    width: clamp(220px, 65vw, 380px) !important;
  }
}


/* HARD LOCK: no scroll on Android */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* critical */
  overscroll-behavior: none;     /* critical */
  min-height: 100dvh;            /* mobile-safe viewport */
  background:
    radial-gradient(circle at 25% 30%, #A9DED9, transparent 45%),
    radial-gradient(circle at 75% 70%, #5FA9A3, transparent 50%),
    linear-gradient(135deg, #7EC9C3, #4A4A4A);
}

/* Grain overlay (NO negative inset — prevents tiny overflow scroll) */
body::before {
  content: "";
  position: fixed;
  inset: 0;                      /* was -20px */
  pointer-events: none;
  z-index: 0;

  background:
    repeating-radial-gradient(
      circle at 0 0,
      rgba(255,255,255,0.03) 0,
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 2px
    );

  opacity: 0.25;
  mix-blend-mode: soft-light;
  filter: blur(0.3px);

  /* If you still want extra coverage without overflow: */
  transform: scale(1.05);
  transform-origin: center;
}

/* Keep content above grain */
body > * {
  position: relative;
  z-index: 1;
}

/* Optional: prevent any accidental horizontal nudge */
* {
  max-width: 100%;
}