@font-face{font-family:PJS;src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');font-weight:200 800;font-display:swap}
:root{--red:#A81A32;--wine:#4A0A16;--deep:#2B050C;--gold:#E8C777;--gold2:#C99A3E;--cream:#FAF3EA;--ink:#3A0610;--mut:#7A5A60;--ok:#1F8A5B;--r:22px;--ar:'Amiri','Noto Naskh Arabic','Geeza Pro','Segoe UI',serif}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:16px/1.5 PJS,system-ui,sans-serif;background:var(--cream);color:var(--ink);padding:env(safe-area-inset-top) 0 0;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none}
.ar{font-family:var(--ar)}.wrap{width:min(1100px,100% - 32px);margin:auto}.app .wrap{width:min(820px,100% - 32px)}
.pat{background-color:var(--wine);background-image:radial-gradient(circle at 80% 0,rgba(201,154,62,.35),transparent 45%),linear-gradient(135deg,var(--deep),var(--red));position:relative;color:#fff}
.pat:before{content:"";position:absolute;inset:0;opacity:.13;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 6l6 14 15-4-6 14 14 6-14 6 6 14-15-4-6 14-6-14-15 4 6-14-14-6 14-6-6-14 15 4z' fill='none' stroke='%23E8C777' stroke-width='1.2'/%3E%3C/svg%3E");pointer-events:none;border-radius:inherit}
.pat>*{position:relative}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:700;transition:transform .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}.gold{background:linear-gradient(135deg,#F3DC9B,var(--gold2));color:var(--ink);box-shadow:0 8px 24px rgba(201,154,62,.35)}
.red{background:linear-gradient(135deg,#C71F3D,#8E1228);color:#fff;box-shadow:0 8px 22px rgba(168,26,50,.3)}
.ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff}.line{border:1.5px solid #E7D9C9;background:#fff}.sm{padding:9px 16px;font-size:14px}.full{width:100%}
.top{position:fixed;top:0;left:0;right:0;z-index:30;padding:calc(env(safe-area-inset-top) + 10px) 0 10px;transition:.3s;color:#fff}
.top.s{background:rgba(250,243,234,.94);backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 4px 20px rgba(0,0,0,.08)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:8px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}.brand img{width:38px;height:38px;border-radius:11px}
.bar{position:fixed;top:0;left:0;height:3px;z-index:40;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,var(--red),var(--gold))}
.hero{padding:120px 0 90px;border-radius:0 0 48px 48px;overflow:hidden}.hero .wrap{display:grid;gap:32px;align-items:center}
.pill{display:inline-block;padding:7px 16px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:14px;background:rgba(255,255,255,.08);margin-bottom:18px}
h1{font-size:clamp(38px,8vw,66px);line-height:1.04;letter-spacing:-.03em;font-weight:800}h1 em{font-style:normal;background:linear-gradient(90deg,#F6DE9A,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:18px;opacity:.88;margin:18px 0 26px;max-width:520px}.cta{display:flex;flex-wrap:wrap;gap:12px}
.chips{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory}.chip{flex:none;scroll-snap-align:start;background:#fff;border:1px solid #EFE3D3;border-radius:18px;padding:14px 18px;min-width:190px}.chip b{display:block}.chip span{font-size:13px;color:var(--mut)}
.sec{padding:56px 0}.sec h2{font-size:clamp(26px,5vw,38px);letter-spacing:-.02em;margin-bottom:8px}
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:22px}.card{background:#fff;border:1px solid #F0E4D4;border-radius:var(--r);padding:22px;box-shadow:0 8px 28px rgba(74,10,22,.06)}
.ico{width:48px;height:48px;border-radius:15px;background:#FBEBC4;display:grid;place-items:center;font-size:22px;margin-bottom:12px}.card h3{margin-bottom:4px}.card p{color:var(--mut);font-size:15px}
#story{height:300vh;position:relative}.stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding:16px}
.stage{width:min(560px,100%);border-radius:36px;padding:26px;box-shadow:0 30px 70px rgba(74,10,22,.35)}
.stage .top2{display:flex;gap:18px;align-items:center}.stage .jar{width:96px}.stage .num{font-size:44px;font-weight:800;line-height:1}.stage small{opacity:.8}
.step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;margin-top:10px;border-radius:16px;background:rgba(255,255,255,.1);opacity:.3;transform:translateY(8px);transition:.5s}.step.on{opacity:1;transform:none}
.step i{flex:none;width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,#F3DC9B,var(--gold2));color:var(--ink);display:grid;place-items:center;font-style:normal;font-weight:800}.step b{display:block}.step span{font-size:14px;opacity:.85}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s;transition-delay:var(--d,0s)}.rv.in{opacity:1;transform:none}
.quote{background:linear-gradient(135deg,#FFF6D9,#FDEBB5);border:1px solid #F0DDA0;border-radius:var(--r);padding:20px;color:#5A4210;margin:18px 0}.quote small{display:block;margin-top:8px;opacity:.8}
.foot{padding:34px 16px 120px;text-align:center;color:var(--mut);font-size:14px}.foot b{color:var(--red)}.foot .ar{font-size:18px;color:var(--gold2)}
.authbg{min-height:100vh;display:grid;place-items:center;padding:20px}.auth{background:#fff;color:var(--ink);border-radius:26px;padding:24px;width:min(440px,100%);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.tabs{display:flex;background:#F5EADB;border-radius:999px;padding:5px;margin:16px 0}.tabs button{flex:1;padding:11px;border-radius:999px;font-weight:700;color:var(--mut)}.tabs .on{background:var(--red);color:#fff}
label{display:block;font-weight:700;font-size:14px;margin:12px 0 6px}input,select,textarea{width:100%;padding:13px 14px;border-radius:14px;border:1.5px solid #EBDCC8;background:#FFF8EE;outline:0}input:focus,textarea:focus,select:focus{border-color:var(--red)}textarea{min-height:90px;resize:vertical}
.err{background:#FFE9EC;border:1px solid #F3B6BF;color:#A81A32;border-radius:12px;padding:10px 12px;font-size:14px;margin-top:12px}.hint{font-size:13px;color:var(--mut);margin-top:10px}
.head{padding:calc(env(safe-area-inset-top) + 18px) 0 12px;display:flex;justify-content:space-between;align-items:center;gap:12px}.head small{color:var(--mut)}.head h2{font-size:26px;letter-spacing:-.02em}
.round{width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.08);display:grid;place-items:center;font-weight:800}
.mn{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}.mn .sel{flex:1;display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:999px;padding:6px 8px;font-weight:700;max-width:300px}.mn .sel button{width:34px;height:34px;border-radius:50%}.mn .sel button:disabled{opacity:.25}
.big{border-radius:30px;padding:22px;box-shadow:0 20px 50px rgba(74,10,22,.3)}.big .row{display:flex;gap:18px;align-items:center}.big .jar{width:110px;flex:none}.big .n{font-size:40px;font-weight:800;line-height:1.05}.big small{opacity:.8}
.pg{height:10px;border-radius:9px;background:rgba(255,255,255,.18);margin:16px 0 12px;overflow:hidden}.pg i{display:block;height:100%;width:var(--w);border-radius:9px;background:linear-gradient(90deg,var(--gold2),#F6DE9A);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.st div{background:rgba(255,255,255,.1);border-radius:14px;padding:10px;font-size:12px}.st b{display:block;font-size:15px}
.list{background:#fff;border:1px solid #F0E4D4;border-radius:var(--r);padding:18px;margin-top:16px}.list h3{display:flex;justify-content:space-between;margin-bottom:6px}.list h3 span{font-size:13px;color:var(--mut);font-weight:600}
.it{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #F3E8D8}.it:first-of-type{border-top:0}.av{flex:none;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#B5203B,#7A1226);color:#fff;display:grid;place-items:center;font-weight:800}
.it .m{flex:1;min-width:0}.it .m b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.it .m small{color:var(--mut);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.amt{font-weight:800}.amt.p{color:#B07A12}
.ib{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#F5EADB}.ib.ok{background:#E3F6EC;color:var(--ok)}
.tag{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:#F5EADB;color:var(--mut);margin-left:6px}.tag.g{background:linear-gradient(135deg,#F3DC9B,var(--gold2));color:var(--ink)}
.gc{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid #F0E4D4;margin-bottom:14px;box-shadow:0 8px 24px rgba(74,10,22,.07);display:block;width:100%;text-align:left}.gc .t{padding:20px;min-height:90px}.gc .t b{font-size:22px;display:block}.gc .b{padding:16px 20px}.gc .pg{background:#EFE3D3}
.ben{border-radius:28px;text-align:center;padding:26px;background:linear-gradient(135deg,#FBEBC4,#E5C06A);box-shadow:0 14px 40px rgba(201,154,62,.3)}.ben small{letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#7A5A12}.ben h2{font-size:32px;margin:6px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.steps div{background:#F5EADB;border-radius:16px;padding:12px 6px;text-align:center;font-size:13px;font-weight:600;color:var(--mut)}.steps .on{background:#FBEBC4;color:var(--ink)}.steps span{display:block;font-size:22px}
.code{font-size:34px;font-weight:800;letter-spacing:.12em;color:var(--gold);text-align:center;margin:8px 0 14px}
.nav{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:20;display:flex;justify-content:center;pointer-events:none}
.nav>div{pointer-events:auto;background:var(--wine);border-radius:30px;padding:8px;display:flex;align-items:center;gap:2px;width:min(480px,100% - 24px);box-shadow:0 14px 36px rgba(43,5,12,.5)}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:20px;color:#D9B6BC;font-size:11px;font-weight:600}.nav button.on{background:rgba(255,255,255,.1);color:var(--gold)}.nav button span{font-size:20px}
.nav .fab{flex:none;width:58px;height:58px;margin-top:-30px;border-radius:50%;background:linear-gradient(135deg,#F3DC9B,var(--gold2));color:var(--ink);font-size:30px;border:4px solid var(--cream);justify-content:center;padding:0}
.wrapS{position:fixed;inset:0;z-index:60;background:rgba(43,5,12,.55);display:flex;align-items:flex-end;justify-content:center}.wrapS[hidden]{display:none}
.sheet{background:#fff;width:min(520px,100%);border-radius:28px 28px 0 0;padding:22px 20px calc(env(safe-area-inset-bottom) + 22px);max-height:92vh;overflow:auto;animation:up .35s cubic-bezier(.2,.8,.2,1)}.sheet h3{font-size:22px;margin-bottom:4px}
@keyframes up{from{transform:translateY(60px);opacity:0}}
.chk{display:flex;gap:10px;align-items:center;margin-top:12px;font-weight:600}.chk input{width:20px;height:20px}
#toasts{position:fixed;top:calc(env(safe-area-inset-top) + 10px);left:0;right:0;z-index:90;display:grid;justify-items:center;gap:8px;pointer-events:none}.toast{background:var(--wine);color:#fff;padding:12px 18px;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:up .3s}
.jar .liq{transform:translateY(calc(144px - var(--f,0)*100px));transition:transform 1.5s cubic-bezier(.2,.8,.2,1)}.jar .wave{animation:w 3.2s linear infinite}@keyframes w{to{transform:translateX(120px)}}
.cf{position:fixed;top:-10px;width:9px;height:14px;border-radius:2px;z-index:95;animation:fall 1.8s ease-in forwards;pointer-events:none}@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
@media(min-width:860px){.hero .wrap{grid-template-columns:1.2fr 1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}