:root {
  /* Tipografia Apple: SF Pro (sistema) com fallbacks */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --green: #30d158;   /* system green iOS */
  --green-2: #34c759;
  --ink: #f5f5f7;     /* apple off-white */
  --muted: #86868b;   /* apple gray label */

  /* altura real da viewport (setada via JS p/ contornar barra do browser mobile) */
  --vh: 1vh;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

html, body { min-height: 100%; }

body {
  font-family: var(--font);
  background: radial-gradient(120% 90% at 50% -10%, #1c1c1e 0%, #000 55%) fixed;
  background-color: #000; /* fallback */
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* altura à prova de qualquer celular (fallback -> dvh -> var do JS) */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: calc(var(--vh, 1vh) * 100);

  /* respeita notch / barra de gestos (safe-area) */
  padding:
    calc(env(safe-area-inset-top, 0px) + 32px)
    calc(env(safe-area-inset-right, 0px) + 22px)
    calc(env(safe-area-inset-bottom, 0px) + 32px)
    calc(env(safe-area-inset-left, 0px) + 22px);
}

.wrap {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-block;
  color: var(--green);
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: clamp(16px, 4vw, 22px);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 9px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--green);
}

/* ---------- Headline ---------- */
h1 {
  font-size: clamp(34px, 11vw, 64px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: clamp(14px, 3.5vw, 20px);
  text-wrap: balance;
}
h1 .hl {
  background: linear-gradient(180deg, #5ff08a 0%, var(--green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--green); /* fallback navegadores sem background-clip */
}

/* ---------- Subtítulo ---------- */
.sub {
  font-size: clamp(17px, 4.8vw, 23px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: -0.01em;
  margin-bottom: clamp(28px, 7vw, 40px);
  text-wrap: balance;
}

/* ---------- Lista de benefícios ---------- */
.checks {
  list-style: none;
  display: inline-block;
  text-align: left;
  margin: 0 auto clamp(30px, 8vw, 44px);
}
.checks li {
  font-size: clamp(15px, 4.4vw, 18px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: clamp(12px, 3.5vw, 16px) 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.checks li svg { min-width: 24px; flex-shrink: 0; }

/* ---------- Botão (CTA) ---------- */
.cta {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-2) 100%);
  color: #001b08;
  text-decoration: none;
  font-size: clamp(17px, 5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: clamp(17px, 4.6vw, 20px) 22px;
  border-radius: 980px;                 /* pill Apple */
  box-shadow: 0 10px 40px -8px rgba(48, 209, 88, 0.55);
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 56px;                     /* alvo de toque confortável */
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.cta:active { transform: scale(0.98); }

@media (hover: hover) {
  .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 50px -8px rgba(48, 209, 88, 0.7);
  }
}

/* ---------- Rodapé ---------- */
.slots {
  font-size: clamp(13px, 3.6vw, 14px);
  font-weight: 500;
  color: var(--muted);
  margin-top: 18px;
  letter-spacing: -0.01em;
}
.foot {
  font-size: clamp(11px, 3.2vw, 12px);
  font-weight: 400;
  color: #48484a;
  margin-top: clamp(28px, 7vw, 40px);
  letter-spacing: -0.01em;
}

/* ---------- Animação de entrada ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
}
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cta { transition: none; }
}

/* Telas muito baixas (paisagem / celulares pequenos): compacta */
@media (max-height: 640px) {
  body { justify-content: flex-start; }
  .checks li { margin: 9px 0; }
}