@font-face{font-family:"OPEX Jakarta";src:url("fonts/plus-jakarta-sans-var.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:optional}
@font-face{font-family:"OPEX Noto Arabic";src:url("fonts/noto-sans-arabic-var.woff2") format("woff2");font-weight:400 700;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"OPEX Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:104%;ascent-override:96%;descent-override:24%}
*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,Segoe UI,Tahoma,sans-serif;color:#1d2233;background:radial-gradient(1200px 600px at 10% -10%,#fff4e0,transparent),radial-gradient(900px 500px at 110% 10%,#ffe9d1,transparent),linear-gradient(#fff,#f7f8fc)}
header,footer{position:sticky;top:0;z-index:9;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 22px;background:rgba(255,255,255,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #eee}
footer{position:static;border:0;border-top:1px solid #eee;margin-top:40px;font-size:13px;color:#667}
.brand{font-weight:800;letter-spacing:.5px}.brand b{color:#f28c00}
.lang button{border:1px solid #f2c07a;background:#fff;border-radius:8px;padding:4px 9px;margin:0 2px;cursor:pointer}.lang button[aria-pressed=true]{background:#f28c00;color:#fff}
main{max-width:1040px;margin:0 auto;padding:26px 18px}
h1{font-size:clamp(26px,4vw,40px);margin:.3em 0}h2{margin:1.4em 0 .5em}
.win{background:linear-gradient(180deg,#fff,#fdfdff);border:1px solid #eef0f6;border-radius:18px;box-shadow:0 1px 0 #fff inset,0 18px 40px -18px rgba(30,40,80,.25);padding:18px;margin:16px 0;position:relative}
.win.t1{transform:rotate(-.6deg)}.win.t2{transform:rotate(.5deg)}
.win:before{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:5px;border-radius:5px;background:linear-gradient(#ffb347,#f28c00)}
.ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;margin-inline-end:8px;color:#fff;font-weight:700;background:linear-gradient(135deg,#ff9a3c,#ff5e62)}.ic.b{background:linear-gradient(135deg,#36d1dc,#5b86e5)}.ic.g{background:linear-gradient(135deg,#43e97b,#38c9a0)}.ic.p{background:linear-gradient(135deg,#a18cd1,#fb6fbb)}
.btn{display:inline-flex;gap:8px;align-items:center;background:linear-gradient(180deg,#ffa53a,#f28c00);color:#fff;font-weight:700;padding:11px 18px;border-radius:12px;text-decoration:none;box-shadow:0 8px 18px -8px #f28c00}
.ghost{background:#fff;border:1px solid #f2c07a!important;color:#b86200;padding:9px 14px;border-radius:12px;text-decoration:none;font-weight:600}
.price{font-size:22px;font-weight:800}.tag{display:inline-block;background:#fff3e0;color:#a85a00;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600}
textarea,input,select{width:100%;font:inherit;border:1px solid #e1e4ee;border-radius:10px;padding:8px;background:#fff}textarea{min-height:90px}
table{border-collapse:collapse;width:100%;font-size:14px}th,td{border-bottom:1px solid #eee;padding:6px;text-align:start;vertical-align:top}th{background:#fff7ec}
.flag{border-inline-start:4px solid #f28c00;background:#fffaf2;padding:8px 12px;border-radius:8px;margin:8px 0}.ok{border-color:#38c9a0;background:#f2fffa}
.muted{color:#778}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.lock{opacity:.55;font-style:italic}
@media print{header,footer,.np{display:none!important}.win{box-shadow:none;transform:none}body{background:#fff}}

/* ===== mock3 style layer (design pass) — loaded last on every product page ===== */
html{min-height:100%;background:#fbfbfd}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;margin:0;font-family:"OPEX Jakarta","OPEX Noto Arabic","OPEX Fallback",system-ui,sans-serif;color:#1f2937;background:radial-gradient(1200px 600px at 15% -5%,#fff1e0 0,transparent 60%),radial-gradient(900px 500px at 95% 10%,#e3eeff 0,transparent 60%),#fbfbfd;background-attachment:fixed}
[dir=rtl] body,html[dir=rtl] body{font-family:"OPEX Noto Arabic","OPEX Jakarta","OPEX Fallback",system-ui,sans-serif}
body>main{flex:1 0 auto;width:100%;position:relative;z-index:1}
body>header,body>footer{flex-shrink:0}
body>header{min-height:58px}
h1,h2,h3{color:#141826;letter-spacing:-.015em}
p,li,td,.lead{color:#1f2937}
.muted,small{color:#4b5563!important}
/* frosted glass header/footer */
header,footer{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.72))!important;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.9)!important;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(20,24,38,.06),0 18px 40px -14px rgba(20,24,38,.18);border-radius:18px;margin:14px auto 0;width:min(1220px,calc(100% - 28px));position:sticky;top:10px;z-index:20}
footer{position:relative;top:auto;margin:40px auto 14px;color:#4b5563}
.brand b,header b{color:#ff7a00}
/* side icons: fixed decorative layer, never over content */
body::before,body::after{content:"";position:fixed;top:120px;width:58px;height:680px;pointer-events:none;z-index:0;opacity:.95;filter:drop-shadow(0 6px 14px rgba(20,24,38,.08));background-repeat:no-repeat}
body::before{left:max(10px,calc(50vw - 690px));background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2258%22 height=%22680%22%3E%3Cg transform=%22translate%280 0%29%22%3E%3Cg%3E%3Crect x=%222%22 y=%222%22 width=%2248%22 height=%2248%22 rx=%2215%22 fill=%22%23fff%22 stroke=%22%23eceef4%22/%3E%3Cpath d=%22M12 8a4 4 0 1 0 0 8a4 4 0 0 0 0-8zM12 1v3M12 20v3M1 12h3M20 12h3M4 4l2 2M18 18l2 2M4 20l2-2M18 6l2-2%22 fill=%22none%22 stroke=%22%23ff7a00%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 transform=%22translate%2814 14%29%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate%286 170%29%22%3E%3Cg%3E%3Crect x=%222%22 y=%222%22 width=%2248%22 height=%2248%22 rx=%2215%22 fill=%22%23fff%22 stroke=%22%23eceef4%22/%3E%3Cpath d=%22M3 17a9 9 0 1 1 18 0M12 17l5-6%22 fill=%22none%22 stroke=%22%231e6bff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 transform=%22translate%2814 14%29%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate%280 340%29%22%3E%3Cg%3E%3Crect x=%222%22 y=%222%22 width=%2248%22 height=%2248%22 rx=%2215%22 fill=%22%23fff%22 stroke=%22%23eceef4%22/%3E%3Cpath d=%22M4 20V10M10 20V4M16 20v-7M2 20h20%22 fill=%22none%22 stroke=%22%237a5cff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 transform=%22translate%2814 14%29%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate%286 510%29%22%3E%3Cg%3E%3Crect x=%222%22 y=%222%22 width=%2248%22 height=%2248%22 rx=%2215%22 fill=%22%23fff%22 stroke=%22%23eceef4%22/%3E%3Cpath d=%22M12 2l8 3v6c0 5-3.5 9-8 11c-4.5-2-8-6-8-11V5z%22 fill=%22none%22 stroke=%22%2318b26b%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 transform=%22translate%2814 14%29%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
body::after{right:max(10px,calc(50vw - 690px));background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2258%22 height=%22680%22%3E%3Cg transform=%22translate%280 0%29%22%3E%3Cg%3E%3Crect x=%222%22 y=%222%22 width=%2248%22 height=%2248%22 rx=%2215%22 fill=%22%23fff%22 stroke=%22%23eceef4%22/%3E%3Cpath d=%22M14 6a4 4 0 0 0 5 5l-9 9a2 2 0 0 1-3-3l9-9a4 4 0 0 0-2-2z%22 fill=%22none%22 stroke=%22%23ff7a00%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 transform=%22translate%2814 14%29%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate%286 170%29%22%3E%3Cg%3E%3Crect x=%222%22 y=%222%22 width=%2248%22 height=%2248%22 rx=%2215%22 fill=%22%23fff%22 stroke=%22%23eceef4%22/%3E%3Cpath d=%22M13 2L4 14h7l-1 8 9-12h-7z%22 fill=%22none%22 stroke=%22%23ffb400%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 transform=%22translate%2814 14%29%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate%280 340%29%22%3E%3Cg%3E%3Crect x=%222%22 y=%222%22 width=%2248%22 height=%2248%22 rx=%2215%22 fill=%22%23fff%22 stroke=%22%23eceef4%22/%3E%3Cpath d=%22M12 2c4 5 7 8.5 7 12a7 7 0 0 1-14 0c0-3.5 3-7 7-12z%22 fill=%22none%22 stroke=%22%231e6bff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 transform=%22translate%2814 14%29%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate%286 510%29%22%3E%3Cg%3E%3Crect x=%222%22 y=%222%22 width=%2248%22 height=%2248%22 rx=%2215%22 fill=%22%23fff%22 stroke=%22%23eceef4%22/%3E%3Cpath d=%22M5 12l4 4l10-10%22 fill=%22none%22 stroke=%22%23ff4d6d%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 transform=%22translate%2814 14%29%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
@media (max-width:1240px){body::before,body::after{display:none}}
/* glossy tilted windows */
.win,.card{background:linear-gradient(180deg,#fff,#fdfdff 60%,#fffaf4)!important;border:1px solid #eceef4!important;border-radius:18px;box-shadow:inset 0 1px 0 #fff,0 24px 50px -18px rgba(20,24,38,.28),0 3px 8px rgba(20,24,38,.06)!important}
.win{transform:perspective(900px) rotate(-.5deg)}
.win.t2,.win:nth-of-type(even){transform:perspective(900px) rotate(.4deg)}
.card:not(.lift){transform:perspective(900px) rotate(-.6deg)}
.lift{transform:perspective(900px) rotate(var(--rz,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.lift.tw{--rz:-.6deg}.lift.tw2{--rz:.6deg}
.win,.card{transition:transform 220ms cubic-bezier(.2,.7,.2,1)}
.win:hover,.card:not(.lift):hover{transform:perspective(900px) translateY(-4px)}
.lift:hover,.lift:focus-within{--ty:-5px}
/* buttons as mock3 */
.btn{background:linear-gradient(180deg,#ff8f26,#ff6a00)!important;border-radius:14px;font-weight:700;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 22px -6px rgba(255,106,0,.55)!important}
.ghost{background:#fff;border:1px solid #e1e4ec!important;border-radius:14px;color:#141826!important;box-shadow:0 4px 10px rgba(0,0,0,.05)}
/* reveal: always ends visible; CSS fallback if the observer never fires */
.js .rv.in{opacity:1!important;transform:none}
.js .rv:not(.in){animation:rvfb 260ms ease-out 1.6s forwards}
@keyframes rvfb{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1!important;transform:none!important;animation:none!important}.win,.card,.lift,.win:hover,.card:hover{transform:none!important;transition:none!important}}
@media print{body::before,body::after{display:none}header,footer{box-shadow:none}}