*{margin:0;padding:0;box-sizing:border-box;font-family:'Roboto',sans-serif}
body{background-color:#f8f9fa;color:#333;line-height:1.6}
.page-container{max-width:500px;margin:0 auto;padding:0;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.1)}
header{padding:15px;text-align:center;display:flex;align-items:center;justify-content:center}
h1{font-size:22px;font-weight:700;color:#222;margin:0;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.18)}
h1.h1-gradient{background:linear-gradient(60deg,#e9ad6a,#b355e4);-webkit-background-clip:text;color:transparent;text-shadow:none}
.voucher-image-container{position:relative;width:100%}
.voucher-image{width:100%;height:auto;display:block}
.steps-overlay{position:absolute;inset:0;pointer-events:none}
.step-marker{position:absolute;display:flex;align-items:center;justify-content:center}
.step-marker span{display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#f7b279,#e87d3e);color:#fff;font-size:22px;font-weight:700;width:35px;height:35px;border-radius:50%;text-shadow:1px 1px 1px rgba(0,0,0,.3);border:2px solid #fff}
.arrow{position:absolute;width:40px;height:40px}
.arrow-down{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f00'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat;transform:scale(2)}
.arrow-right{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f00'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E") no-repeat;transform:scale(2) rotate(90deg)}
.step-1{bottom:10%;left:22%}.step-1 .arrow-down{top:40px;left:0}
.step-2{top:44%;left:40%}.step-2 .arrow-down{top:40px;left:0}
.step-3{top:57%;right:33%}.step-3 .arrow-right{top:0;left:40px}
.content-container{padding:20px}
h2{font-size:10px;font-weight:500;color:#333;margin-bottom:15px}
.steps-text{margin-bottom:20px;line-height:1.8}
.steps-text p{font-size:16px}
.support-link{text-align:center}
.support-link .cta-button{--btn-bg:#fff;--btn-border:#16a116;--btn-text:#0d7c0d;position:relative;display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:11px 20px;font-size:22px;font-weight:600;color:var(--btn-text);border:3px solid var(--btn-border);border-radius:10px;background:var(--btn-bg);text-decoration:none;box-shadow:0 2px 4px rgba(0,0,0,.08);transition:background .35s,color .35s,transform .18s,box-shadow .3s,border-color .35s;cursor:pointer;overflow:hidden}
.support-link .cta-button .text{position:relative;z-index:2;text-align:center;width:100%}
.support-link .cta-button .hand-icon{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;transform-origin:center bottom;animation:idle-wiggle 2s ease-in-out infinite;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.support-link .cta-button .hand-icon img{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none;user-select:none}
@keyframes idle-wiggle{0%,78%,100%{transform:translateY(0) rotate(0) scale(1)}82%{transform:translateY(3px) rotate(-7deg) scale(.95)}87%{transform:translateY(-3px) rotate(5deg) scale(1.05)}92%{transform:translateY(1px) rotate(-3deg) scale(1)}96%{transform:translateY(0) rotate(0) scale(1)}}
@keyframes tap{0%{transform:translateY(0) scale(1)}35%{transform:translateY(3px) scale(.92)}55%{transform:translateY(-1px) scale(1.03)}70%,100%{transform:translateY(0) scale(1)}}
.support-link .cta-button:hover .hand-icon,.support-link .cta-button:focus-visible .hand-icon{animation:tap .7s ease}
.support-link .cta-button:hover{background:#16a116;color:#fff;border-color:#16a116}
.support-link .cta-button:hover .hand-icon{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.support-link .cta-button:active{transform:translateY(2px);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.support-link .cta-button:focus{outline:0}
.support-link .cta-button:focus-visible{box-shadow:0 0 0 3px rgba(22,161,22,.45),0 2px 6px rgba(0,0,0,.25)}
.support-link .cta-button:hover .text{text-decoration:underline}
.support-link .cta-button .ripple-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:1}
.support-link .cta-button .ripple-layer::before{content:"";position:absolute;top:var(--ripple-y,50%);left:var(--ripple-x,50%);width:var(--ripple-size,0);height:var(--ripple-size,0);background:radial-gradient(circle at center,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 70%);transform:scale(0);opacity:0;border-radius:50%}
.support-link .cta-button .ripple-layer.run::before{animation:ripple 650ms ease-out}
@keyframes ripple{0%{transform:scale(.15);opacity:.9}60%{opacity:.4}100%{transform:scale(1);opacity:0}}
.confirm-button{display:block;width:100%;padding:12px;text-align:center;background:linear-gradient(to right,#e9ad6a,#b355e4);color:#fffb8c;font-size:18px;border:0;border-radius:8px;margin:15px 0;cursor:pointer}
.dark-mode{background-color:#1e1e38;color:#fff}
.dark-mode .page-container{background-color:#1e1e38}
.dark-mode h1,.dark-mode h2{color:#fff}
.dark-mode .support-link .cta-button{--btn-bg:#2b2b4a;--btn-border:#6fd86f;--btn-text:#e8ffe8}
.dark-mode .support-link .cta-button:hover{background:#31b431;border-color:#31b431;color:#fff}
.dark-mode .steps-text p{color:#f0f0f0}
@media(min-width:768px){.page-container{margin-top:20px;margin-bottom:20px}h1,h2{font-size:22px}.steps-text p{font-size:22px}.support-link .cta-button{font-size:22px;padding:14px 26px;gap:12px}}
.sheen{background:linear-gradient(90deg,#0c6d1a 0%,#0c6d1a 40%,#28b83c 50%,#0c6d1a 60%,#0c6d1a 100%);-webkit-background-clip:text;color:transparent;animation:sheen-move 4s linear infinite;background-size:200% 100%}
@keyframes sheen-move{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@media(prefers-reduced-motion:reduce){.sheen{animation:none;background-position:100% 50%}}