:root {
  --cream: #fff7e9;
  --cream-deep: #efd8ae;
  --turmeric: #d99009;
  --turmeric-dark: #9f6504;
  --ink: #18120c;
  --muted: #6f5630;
  --leaf: #446f2c;
  --whatsapp: #20c663;
  --whatsapp-dark: #0f793b;
  --card-radius: 30px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--cream-deep);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: "IBM Plex Sans Arabic", "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 3%, rgba(255, 222, 125, 0.82) 0 11rem, transparent 18rem),
    radial-gradient(circle at 95% 18%, rgba(68, 111, 44, 0.18) 0 9rem, transparent 16rem),
    linear-gradient(180deg, #fffaf0 0%, var(--cream) 48%, var(--cream-deep) 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: auto -20vw -26vw -20vw;
  height: 52vw;
  min-height: 240px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(217, 144, 9, 0.38), transparent 66%);
  filter: blur(5px);
}

.mobile-page {
  position: relative;
  z-index: 1;
  width: min(100%, 450px);
  min-height: 100svh;
  margin-inline: auto;
  padding: max(16px, env(safe-area-inset-top)) 15px max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.poster-card {
  position: relative;
  padding: 7px;
  border-radius: var(--card-radius);
  isolation: isolate;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(217, 144, 9, 0.52));
  box-shadow:
    0 22px 60px rgba(111, 77, 24, 0.24),
    0 4px 12px rgba(91, 55, 6, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.poster-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% -3% -3% 10%;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(159, 101, 4, 0.38), rgba(255, 213, 99, 0.1));
  transform: rotate(-2.4deg);
  filter: blur(1px);
}

.poster-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: calc(var(--card-radius) - 10px);
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.46), transparent 28%, transparent 70%, rgba(217, 144, 9, 0.2));
  mix-blend-mode: soft-light;
}

.poster-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: calc(var(--card-radius) - 10px);
  background: #f8eddd;
}

.whatsapp-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 66px;
  padding: 16px 22px 17px;
  border-radius: 999px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
  font-size: clamp(1.08rem, 5.1vw, 1.48rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.36), transparent 23%),
    linear-gradient(135deg, #22d86b 0%, var(--whatsapp) 38%, var(--whatsapp-dark) 100%);
  box-shadow:
    0 18px 38px rgba(15, 121, 59, 0.35),
    0 4px 0 rgba(8, 82, 38, 0.42),
    inset 0 -4px 0 rgba(0, 0, 0, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.whatsapp-cta::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: inherit;
  pointer-events: none;
}

.whatsapp-cta::after {
  content: "";
  position: absolute;
  inset-block: -38%;
  inset-inline-start: -18%;
  width: 34%;
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(18deg);
}

.whatsapp-cta:active {
  transform: translateY(2px);
  box-shadow:
    0 12px 26px rgba(15, 121, 59, 0.3),
    0 2px 0 rgba(8, 82, 38, 0.42),
    inset 0 -2px 0 rgba(0, 0, 0, 0.13);
}

.whatsapp-cta:focus-visible {
  outline: 4px solid rgba(217, 144, 9, 0.55);
  outline-offset: 4px;
}

.whatsapp-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
}

.whatsapp-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.helper-copy {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}

@media (max-height: 650px) {
  .mobile-page {
    justify-content: flex-start;
    gap: 12px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .poster-card {
    padding: 5px;
    border-radius: 24px;
  }

  .poster-card img,
  .poster-card::after {
    border-radius: 16px;
  }

  .whatsapp-cta {
    min-height: 58px;
    padding-block: 13px 14px;
  }
}

@media (min-width: 560px) {
  body {
    background:
      radial-gradient(circle at 28% 9%, rgba(255, 222, 125, 0.7) 0 14rem, transparent 24rem),
      radial-gradient(circle at 72% 20%, rgba(68, 111, 44, 0.16) 0 11rem, transparent 19rem),
      linear-gradient(180deg, #fffaf0 0%, var(--cream) 44%, var(--cream-deep) 100%);
  }

  .mobile-page {
    padding-block: 28px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .poster-card,
  .whatsapp-cta,
  .helper-copy {
    animation: rise-in 520ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  }

  .whatsapp-cta {
    animation-delay: 90ms;
  }

  .helper-copy {
    animation-delay: 150ms;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}