:root {
  --bg: #f3f7ee;
  --ink: #0a0a0a;
  --muted: #55604f;
  --green: #12b83a;
  --green-glow: #6dff5a;
  --font: "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(60rem 28rem at 50% 110%, rgba(109, 255, 90, .28), transparent 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

.page {
  width: 100%;
  max-width: 44rem;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  text-align: center;
}

/* ---------- Logos: old -> new ---------- */
.logos {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.logo {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.logo img { width: 100%; }
.logo figcaption { font-weight: 800; font-size: 1rem; color: var(--muted); }

.logo--old { width: 16rem; }
.logo--old img { filter: grayscale(1); opacity: .5; }

.logo--new { width: 11rem; }
.logo--new img { filter: drop-shadow(0 .6rem 1.2rem rgba(18, 184, 58, .35)); }


.arrow { width: 2.5rem; flex: none; color: var(--green); }

/* ---------- Message ---------- */
.message { width: 100%; }

h1 {
  text-wrap: balance;
  margin: 0 0 1rem;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.35;
}

.message p {
  text-wrap: balance;
  margin: 0 auto 2rem;
  max-width: 30rem;
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--muted);
}
.message p strong { color: var(--ink); }

/* ---------- Black button ---------- */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: 1rem 2.5rem;
  background: #000;
  color: #fff;
  border-radius: .9rem;
  text-decoration: none;
  box-shadow: 0 .7rem 1.6rem rgba(0, 0, 0, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn__title { font-size: 1.2rem; font-weight: 800; }
.btn__hint  { font-size: .95rem; font-weight: 500; color: var(--green-glow); }

.btn:hover { transform: translateY(-2px); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .3), 0 0 0 2px var(--green); }
.btn:active { transform: none; }
.btn:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }

/* ---------- Entrance (script.js adds .js then .ready) ---------- */
.js .logos, .js .message { opacity: 0; transform: translateY(.75rem); }
.js.ready .logos   { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.js.ready .message { opacity: 1; transform: none; transition: opacity .6s ease .3s, transform .6s ease .3s; }

@media (prefers-reduced-motion: reduce) {
  .js .logos, .js .message { opacity: 1; transform: none; }
  .js.ready .logos, .js.ready .message, .btn { transition: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 820px) {
  .logo--old { width: 11rem; }
  .logo--new { width: 8.5rem; }
  h1 { font-size: 1.8rem; }
}

/* ---------- Phone: stack everything in one column ---------- */
@media (max-width: 560px) {
  .page { padding: 2rem 1.25rem; gap: 2rem; justify-content: flex-start; }
  .logos { flex-direction: column; gap: 1rem; }
  .arrow { transform: rotate(-90deg); width: 2rem; }
  .logo--old { width: min(12rem, 70%); }
  .logo--new { width: min(9rem, 55%); }
  h1 { font-size: 1.6rem; }
  .message p { font-size: 1.05rem; }
  .btn { width: 100%; padding: 1.1rem 1rem; }
}