:root{--sunflower-url:url("../assets/pattern-sunflowers.svg");--bg-base:#11162a;--warm-1:rgba(255,200,80,.12);--warm-2:rgba(255,190,70,.10);--card-bg:rgba(18,22,36,.92);--card-bg-hover:rgba(24,28,44,.96);--text:#eef2f8;--muted:#cfd6e1;--brand:#ffde59;--brand-700:#ffd432;--brand-800:#ffc800;--ring:rgba(255,255,255,.08);--shadow:0 10px 30px rgba(0,0,0,.35);--radius:18px}
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;color:var(--text);background:var(--bg-base);min-height:100vh;overflow-x:hidden;display:grid;grid-template-rows:1fr auto}
/* warm gradient base */
body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(1200px 600px at 70% 10%,var(--warm-1),transparent 60%),radial-gradient(900px 450px at 10% 80%,var(--warm-2),transparent 60%),var(--bg-base)}
/* pattern layer subtle */
body:after{content:"";position:fixed;inset:0;z-index:-2;background-image:var(--sunflower-url);background-repeat:repeat;background-size:320px auto;background-position:50% 50%;opacity:.24;pointer-events:none;animation:wave 60s ease-in-out infinite, pulse 15s ease-in-out infinite}
@keyframes wave{0%{background-position:50% 50%}25%{background-position:51.5% 50.6%}50%{background-position:53% 49.4%}75%{background-position:51.5% 49.2%}100%{background-position:50% 50%}}
@keyframes pulse{0%{opacity:.24}50%{opacity:.29}100%{opacity:.24}}
@media (prefers-reduced-motion:reduce){body:after{animation:none;opacity:.24}}
main{width:100%;max-width:680px;margin:0 auto;padding:32px 18px 24px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.card{width:100%;background:var(--card-bg);border:1px solid var(--ring);border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow);backdrop-filter:blur(4px);transition:background .25s ease,transform .12s ease,border-color .25s ease}
.card.hero{padding:26px}
.card:hover{background:var(--card-bg-hover);transform:translateY(-1px);border-color:rgba(255,255,255,.12)}
h1{font-size:clamp(26px,3.6vw,40px);color:#ffe27a;margin-bottom:8px;font-weight:800}
h2{font-size:clamp(18px,2.4vw,22px);color:#f8e391;margin-bottom:8px;font-weight:800}
.lead{margin:0 auto;max-width:60ch;color:var(--muted);line-height:1.75}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.btns{display:flex;justify-content:center;gap:12px;padding-top:10px;flex-wrap:wrap}
button{appearance:none;border:0;border-radius:10px;padding:12px 18px;font-weight:800;cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease;box-shadow:0 4px 14px rgba(0,0,0,.25);min-width:120px;min-height:44px}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.btn-yes{background:linear-gradient(180deg,var(--brand) 0%,var(--brand-700) 100%);color:#1d1b12;border:1px solid rgba(0,0,0,.08)}
.btn-yes:hover{transform:translateY(-1px);background:linear-gradient(180deg,var(--brand-700) 0%,var(--brand-800) 100%)}
.btn-no{background:transparent;color:var(--brand);border:1px solid rgba(255,222,89,.55)}
.btn-no:hover{transform:translateY(-1px);background:rgba(255,222,89,.12)}
ul.list{margin:8px auto 0;padding-left:18px;max-width:60ch;text-align:left}
ul.list li{margin:6px 0}
footer{width:100%;max-width:680px;margin:0 auto 16px;text-align:center;color:var(--muted);font-size:14px}
footer a{color:var(--brand);font-weight:800;text-decoration:none}
footer a:hover{text-decoration:underline}
.hidden{display:none}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:5}
.p{position:absolute;width:6px;height:6px;border-radius:50%;opacity:0.9;animation:fall 1.6s ease-out forwards}
@keyframes fall{0%{transform:translateY(-10px) scale(1)}70%{transform:translateY(40vh) rotate(120deg) scale(1)}100%{transform:translateY(80vh) rotate(260deg) scale(.9);opacity:0}}