@import url(fonts.css);
:root{--ink:#07070A;--ink2:#111116;--ink3:#1A1A21;--paper:#FBFAF6;--paper2:#F3F1EA;--o1:#FFB347;--o2:#FF7A1A;--o3:#E85D00;--green:#22C55E;--red:#EF4444;--txt:#16161C;--muted:#6E6B66;--line:rgba(255,255,255,.09);--grad:linear-gradient(135deg,var(--o1),var(--o2));--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#07070A}
body.page{font-family:Cairo,system-ui,Tahoma,sans-serif;background:var(--ink);color:var(--txt);min-height:100vh;line-height:1.75;background-image:radial-gradient(700px 380px at 50% -5%,rgba(255,122,26,.3),transparent 70%)}
a{color:var(--o3);font-weight:700}
img,svg{display:block;max-width:100%}
.mini-head{display:flex;justify-content:center;padding:22px 16px}
.brand-row{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:900;font-size:1.2rem;text-decoration:none}
.logo-mark{width:38px;height:38px;display:block}
.wrap{width:min(640px,100% - 28px);margin:10px auto 40px;display:grid;gap:16px}
.card{background:#fff;border-radius:24px;padding:28px;box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.card.narrow{width:min(480px,100% - 28px);margin:60px auto}
.card.center{text-align:center}
.card h1{font-size:1.65rem;font-weight:900;line-height:1.3;margin-bottom:8px}
.card h2{font-size:1.2rem;font-weight:900;margin-bottom:12px}
.muted{color:var(--muted);font-weight:600}
.hint{color:var(--muted);font-size:.88rem;font-weight:600;margin-top:10px}
.eyebrow{color:var(--o3);font-weight:800;font-size:.9rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:1.02rem;background:var(--grad);color:#16161C;text-decoration:none;box-shadow:0 14px 30px -12px rgba(255,122,26,.7);transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.big{height:62px;font-size:1.12rem;width:100%}
.btn.ghost{background:var(--paper2);box-shadow:none}
.btn.wa{background:#25D366;color:#fff;box-shadow:0 14px 30px -14px rgba(37,211,102,.8);width:100%;margin-top:10px}
.btn.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,122,26,.55)}70%{box-shadow:0 0 0 18px rgba(255,122,26,0)}100%{box-shadow:0 0 0 0 rgba(255,122,26,0)}}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.actions .btn.wa{width:auto;margin:0}
.form{display:grid;gap:12px;margin-top:16px}
.form label{display:grid;gap:6px;font-weight:800;font-size:.92rem}
.form input,.big-input{width:100%;height:56px;padding:0 16px;border-radius:14px;border:0;background:var(--paper);box-shadow:inset 0 0 0 1.5px #E2DFD5;font:inherit;font-weight:800;font-size:1.1rem}
.big-input{height:64px;font-size:1.3rem;text-align:center;letter-spacing:1px}
.form input:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 2px var(--o2),0 0 0 5px rgba(255,122,26,.12)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.note{padding:12px 14px;border-radius:12px;font-weight:700;margin:10px 0}
.note.ok{background:#E8F8EE;color:#166534}.note.err{background:#FDECEC;color:#B91C1C}
.warn{background:#FFF4E5;color:#92400E;padding:10px 14px;border-radius:12px;font-weight:700;margin:12px 0}
.err{background:#FDECEC;color:#B91C1C;padding:10px 14px;border-radius:12px;font-weight:700}
.checks{list-style:none;display:grid;gap:6px;margin:14px 0}
.checks li{padding:8px 12px;border-radius:10px;font-weight:700}
.checks .ok{background:#E8F8EE;color:#166534}.checks .bad{background:#FDECEC;color:#B91C1C}
.card code{background:var(--paper2);padding:2px 8px;border-radius:6px;direction:ltr;display:inline-block}

/* success */
.success-card{text-align:center}
.check-anim{width:92px;height:92px;margin:0 auto 14px}
.check-anim circle{fill:none;stroke:var(--green);stroke-width:5;stroke-dasharray:230;stroke-dashoffset:230;animation:draw .8s .1s var(--ease) forwards}
.check-anim path{fill:none;stroke:var(--green);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .5s .8s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.order-no{display:inline-flex;align-items:center;gap:12px;margin-top:16px;padding:10px 12px 10px 16px;border-radius:16px;background:var(--paper2)}
.order-no span{font-weight:700;color:var(--muted);font-size:.9rem}
.order-no b{font-size:1.6rem;font-weight:900;letter-spacing:1px}
.copy{border:0;background:var(--ink);color:#fff;font:inherit;font-weight:800;font-size:.8rem;padding:6px 12px;border-radius:999px;cursor:pointer}
.copy.done{background:var(--green)}
.summary{display:grid;gap:10px}
.summary div{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px dashed #E2DFD5}
.summary dt{color:var(--muted);font-weight:700}
.summary dd{font-weight:800;text-align:left}
.summary .total{border:0;padding:0}
.summary .total dd{font-size:1.35rem;color:var(--o3);font-weight:900}
.summary small{display:block;font-size:.78rem;color:var(--muted);font-weight:700}
.tag{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--paper2);color:var(--muted);font-weight:800}
.steps-line{list-style:none;display:grid;gap:14px;position:relative;padding-inline-start:30px}
.steps-line::before{content:"";position:absolute;inset-inline-start:9px;top:8px;bottom:8px;width:2px;background:#E2DFD5}
.steps-line li{position:relative;display:grid}
.steps-line li::before{content:"";position:absolute;inset-inline-start:-30px;top:6px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px #E2DFD5}
.steps-line li.on::before{background:var(--o2);box-shadow:0 0 0 5px rgba(255,122,26,.18)}
.steps-line b{font-weight:900}.steps-line span{color:var(--muted);font-weight:600;font-size:.92rem}
.pay-row{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--paper);margin-top:10px;flex-wrap:wrap}
.pay-label{font-size:.82rem;font-weight:800;color:var(--muted);min-width:110px}
.pay-row b{font-size:1.1rem;font-weight:900;letter-spacing:.5px;flex:1}
.upload{display:grid;gap:12px}
.drop{display:grid;place-items:center;gap:4px;padding:26px;border-radius:18px;border:2px dashed #D8D4C9;background:var(--paper);cursor:pointer;text-align:center;transition:all .2s}
.drop:hover,.drop.has{border-color:var(--o2);background:#FFF7EF}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop-ic{width:46px;height:46px;border-radius:14px;background:var(--grad);display:grid;place-items:center;font-weight:900;color:#16161C}
.drop-t{font-weight:900}.drop-s{color:var(--muted);font-size:.85rem;font-weight:600}
.state-ic{font-size:3rem;line-height:1;margin-bottom:10px}

/* download */
.dl-form{text-align:center}
.dl-hero{display:flex;justify-content:center;margin:-10px 0 6px}
.dl-hero img{width:200px;filter:drop-shadow(0 24px 30px rgba(255,122,26,.35));animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.dl-ready{text-align:center;position:relative;overflow:hidden}
.file-card{display:flex;align-items:center;gap:16px;text-align:start;padding:16px;border-radius:18px;background:var(--paper);margin:18px 0}
.zip-ic{flex:none;width:52px}
.file-card b{display:block;font-weight:900}
.file-card .muted{font-size:.85rem}
.howto{display:grid;gap:10px}
.howto div{display:grid;gap:2px;padding:14px;border-radius:14px;background:var(--paper)}
.howto span{color:var(--muted);font-weight:600;font-size:.92rem}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:fall 2.6s ease-in forwards}
@keyframes fall{to{transform:translateY(560px) rotate(540deg);opacity:0}}
.reveal{animation:up .7s var(--ease) both}
.reveal:nth-child(2){animation-delay:.08s}.reveal:nth-child(3){animation-delay:.16s}.reveal:nth-child(4){animation-delay:.24s}
@keyframes up{from{opacity:0;transform:translateY(18px)}}
.mini-foot{text-align:center;color:#77757F;font-size:.85rem;padding:10px 0 40px}
.wa-float{position:fixed;z-index:20;bottom:20px;inset-inline-start:20px;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(37,211,102,.7)}
.btn.wa svg,.wa-float svg{width:24px;height:24px}
@media (max-width:520px){.card{padding:22px 18px}.order-no b{font-size:1.35rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.card .brand-row{color:var(--txt);margin-bottom:14px}