:root{
  /* User-specified pure yellow background */
  --bg: #FFFF00; /* pure yellow as requested */
  --card: #ffffff; /* card background */
  --muted: #3b2f00; /* dark warm text */
  --subtle: #6b5600; /* secondary warm text */
  --accent: #ff9800; /* warm orange accent */
  --glass: rgba(255,152,0,0.06);
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  /* use the exact user-provided color as the page background */
  background: var(--bg);
  color: var(--muted);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.center{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.card{
  width:100%;
  max-width:920px;
  background:var(--card);
  border-radius:var(--radius);
  padding:32px;
  box-shadow: 0 10px 30px rgba(16,24,40,0.08);
  border: 1px solid rgba(16,24,40,0.04);
  text-align:center;
  position:relative;
  overflow:visible;
}

.card::before{
  /* soft radial highlight behind the card (warm) */
  content: '';
  position: absolute;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);
  width: 380px;
  height: 180px;
  background: radial-gradient(circle at 50% 20%, rgba(255,152,0,0.06), transparent 45%);
  filter: blur(28px);
  pointer-events: none;
}
.logo svg{color:var(--accent);margin-bottom:8px}
.logo svg{color:var(--accent);margin-bottom:8px}

h1{
  margin:8px 0 6px;
  font-size:2rem;
  line-height:1.08;
  font-weight:600;
  color: #0f172a;
}

.lead{color:var(--subtle);margin:0 0 12px;font-size:1.02rem}
.assurance{color:var(--muted);margin:8px 0 12px;font-size:0.98rem}
.meta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
.countdown{background:var(--glass);padding:8px 12px;border-radius:10px;color:var(--accent);font-weight:700}
.contact{color:var(--subtle)}
.contact a{color:var(--accent);text-decoration:underline}
.contact a:focus-visible{outline:2px solid rgba(37,99,235,0.12);outline-offset:3px}
.actions{margin-top:12px}
.btn{
  background:var(--accent);
  color:#fff;
  border:0;
  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(37,99,235,0.12);
}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:none}
.btn:focus-visible{outline:3px solid rgba(37,99,235,0.16);outline-offset:3px}

.footer-note{margin-top:12px;color:var(--subtle);font-size:0.95rem}

/* WhatsApp button styling */
.btn.whatsapp{
  background: #25D366; /* WhatsApp green */
  box-shadow: 0 6px 18px rgba(37,99,235,0.08);
  margin-left:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.btn.whatsapp:focus-visible{outline:3px solid rgba(37,211,102,0.16);outline-offset:3px}

/* Illustration styling */
.illustration{
  /* ~3x larger on desktop compared to previous 240px width */
  width:720px;
  max-width:92%;
  height:auto;
  display:block;
  /* keep normal flow; we'll nudge with transform per breakpoint */
  margin: 0 auto 0 auto; 
  will-change: transform;
  animation: float 6s ease-in-out infinite;
  transform: translateY(0);
  transition: transform 220ms ease;
}

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0)}
}

@media (min-width:760px){
  /* Keep illustration above content and centered on larger screens */
  .card{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
  /* further pull the content up again: doubled negative margin to reduce visible gap by half once more */
  .illustration{max-width:75%;transform:translateY(-36px)}
  .card > .content{flex:unset}
}

@media (max-width:520px){
  .card{padding:20px}
  h1{font-size:1.25rem}
  .card::before{display:none}
  /* keep the illustration smaller on phones to avoid overflow */
  /* keep the illustration smaller on phones and give a small upward nudge */
  .illustration{width:320px;transform:translateY(-12px)}
}