:root{
  --sky-top:#fff7fb;
  --sky-mid:#ffe6be;
  --sky-low:#fff6d8;
  --sun:#ffd54f;
  --sun-hot:#ffb300;
  --ink:#2b2b2b;
  --muted:#626262;
  --card:#ffffffe6;
  --bd:#ffffff;
  --accent:#ffb74d;
  --accent2:#ffcc80;
  --radius:22px;
  --shadow:0 18px 60px rgba(255,171,64,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:var(--ink);
  background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 45%,var(--sky-low));
  -webkit-font-smoothing:antialiased;
}
.sky{
  position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(1200px 400px at 50% 115%, rgba(255,221,144,.45), transparent 60%);
}
.sun{
  position:fixed; left:50%; transform:translateX(-50%); bottom:-80px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #fff7cf 0 35%, var(--sun) 55%, var(--sun-hot) 100%);
  box-shadow:0 0 0 20px rgba(255,255,255,.45), 0 50px 120px rgba(255,163,87,.55);
  filter:saturate(110%); pointer-events:none;
}
.cloud{
  position:fixed; top:14vh; width:240px; height:70px; background:#fff; border-radius:50px;
  box-shadow:60px -18px 0 12px #fff, 120px -10px 0 4px #fff, 20px 10px 0 10px #fff, 100px 12px 0 6px #fff;
  opacity:.95; filter:drop-shadow(0 8px 14px rgba(163,163,163,.25));
  animation:float 32s linear infinite;
}
.cloud-1{ left:-10%; animation-duration:36s; transform:scale(1.1) }
.cloud-2{ left:58%; top:22vh; animation-duration:28s; transform:scale(.9) }
.cloud-3{ left:20%; top:10vh; animation-duration:40s; transform:scale(1.3) }
@keyframes float{ 0%{transform:translateX(-10vw)} 100%{transform:translateX(110vw)} }

.wrap{
  min-height:100dvh; display:grid; align-content:center; justify-items:center; gap:24px;
  padding:24px;
}
.brand{ display:flex; align-items:center; gap:10px; user-select:none }
.brand .dot{
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff6bf 0 30%, var(--sun) 45%, var(--sun-hot) 70%);
  box-shadow:0 0 0 6px #fff3, 0 10px 18px rgba(255,163,87,.45);
}
.brand .name{ font-weight:800; letter-spacing:.3px }

.card{
  width:min(820px, 92vw);
  background:linear-gradient(180deg,var(--card),#ffffffc8);
  border:1px solid var(--bd); border-radius:var(--radius); padding:28px 20px;
  box-shadow:var(--shadow); text-align:center;
}
.question{
  margin:0 0 10px; font-size:clamp(22px, 4.6vw, 40px); line-height:1.1; font-weight:800;
}
.question .nbm{
  background:linear-gradient(90deg,#2b2b2b,#3f3f3f); -webkit-background-clip:text; color:transparent;
}
.actions{ display:flex; justify-content:center; gap:14px; margin-top:12px }

.btn{
  --bg:#ffffffcc; --bd:#fff; --fg:#2b2b2b;
  display:inline-block; padding:12px 20px; border-radius:999px; border:1px solid var(--bd);
  background:var(--bg); color:var(--fg); text-decoration:none; font-weight:700; cursor:pointer;
  box-shadow:0 12px 36px rgba(0,0,0,.08); transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 18px 54px rgba(0,0,0,.12) }
.btn.yes{ --bg:linear-gradient(135deg,var(--accent),var(--accent2)); --bd:#ffd180 }
.btn.no{ --bg:#ffffffb0 }

/* Modal */
.modal{
  position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.2); backdrop-filter:blur(2px);
}
.modal.open{ display:grid }
.dialog{
  width:min(520px, 92vw);
  background:#fff; border-radius:18px; border:1px solid #fff; padding:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.18);
  text-align:center;
}
.dialog h2{ margin:0 0 6px }
.dialog p{ margin:0 0 14px; color:var(--muted) }
.btn.close{ --bg:linear-gradient(135deg,#ffe082,#ffcc80); --bd:#ffd180 }

/* Responsive */
@media (max-width:560px){
  .actions{ flex-direction:column }
}