/* Patch Monkey Audio - design system (Apple-inspired).
   Loaded LAST on every page so it restyles the older page styles. Edit colors in :root only. */
:root{
 --bg:#f5f5f7;--pn:#ffffff;--tx:#1d1d1f;--mu:#6e6e73;--bd:#d2d2d7;--ac:#d9560a;--ac2:#f0701f;--fur:#7a4a28;--sec:#fbfbfd;
 --r:24px;--ease:cubic-bezier(.28,.11,.32,1);--navbg:rgba(251,251,253,.72);--navbd:rgba(0,0,0,.1);
 --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Roboto,"Noto Sans Arabic",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#000;--pn:#1c1c1e;--tx:#f5f5f7;--mu:#a1a1a6;--bd:#3a3a3c;--ac:#ff8a3d;--ac2:#ffa465;--sec:#0a0a0b;--navbg:rgba(22,22,23,.72);--navbd:rgba(255,255,255,.14)}}
:root[data-theme="dark"]{--bg:#000;--pn:#1c1c1e;--tx:#f5f5f7;--mu:#a1a1a6;--bd:#3a3a3c;--ac:#ff8a3d;--ac2:#ffa465;--sec:#0a0a0b;--navbg:rgba(22,22,23,.72);--navbd:rgba(255,255,255,.14)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html body{font-family:var(--font);font-size:17px;line-height:1.47059;letter-spacing:-.022em;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html body::before{display:none!important}
body.leaving{opacity:0;transition:opacity .22s var(--ease)}
::selection{background:color-mix(in srgb,var(--ac) 30%,transparent)}
h1,h2,h3,h4{font-family:var(--font);letter-spacing:-.03em;font-weight:600;color:var(--tx)}
h1{font-size:clamp(38px,6.4vw,76px);line-height:1.05;letter-spacing:-.04em}
h2{font-size:clamp(26px,3.6vw,44px);line-height:1.1}
h3{font-size:clamp(19px,2vw,24px);line-height:1.2}
p,.mu{letter-spacing:-.016em}.mu{color:var(--mu)}
main{max-width:1180px}
/* navigation */
html body #hd{background:var(--navbg);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid var(--navbd);transition:box-shadow .3s var(--ease)}
html body #hd.sc{box-shadow:0 1px 0 var(--navbd),0 8px 30px rgba(0,0,0,.06)}
html body #hd .tb{padding:6px 22px;min-height:48px}
html body #hd a.lg{font-size:17px;font-weight:600;letter-spacing:-.03em;color:var(--tx)}
html body #hd a.lg svg{width:34px;height:27px}
html body #hd .tr a,html body #hd .tr button{border:0;background:transparent;color:var(--tx);border-radius:980px;padding:6px 14px;font-size:14px;font-weight:500;transition:background .25s var(--ease),opacity .25s}
html body #hd .tr a:hover,html body #hd .tr button:hover{background:color-mix(in srgb,var(--tx) 8%,transparent);transform:none}
html body #hd .tr .pb{background:var(--ac);color:#fff}html body #hd .tr .pb:hover{background:var(--ac2);box-shadow:none}
html body #hd .mn{justify-content:center;border-top:0;background:transparent;padding:0 12px}
html body #hd .mn a{font-size:14px;font-weight:500;color:var(--mu);padding:10px 18px;transition:color .25s var(--ease)}
html body #hd .mn a:hover,html body #hd .mn a.on{color:var(--tx)}
html body #hd .mn a::after{height:2px;left:18px;right:18px;border-radius:2px}
/* buttons, links, forms */
html body .btn{display:inline-block;background:var(--ac);color:#fff;border:0;border-radius:980px;padding:12px 24px;font-size:17px;font-weight:500;letter-spacing:-.016em;box-shadow:none;transition:background .3s var(--ease),transform .35s var(--ease),opacity .3s}
html body .btn:hover{background:var(--ac2);transform:none;box-shadow:none}
html body .btn:active{transform:scale(.96)}
html body .btn.g,html body .btn.ghost{background:transparent;color:var(--ac);border:1px solid var(--ac)}
html body .btn.g:hover,html body .btn.ghost:hover{background:var(--ac);color:#fff}
.lnk{color:var(--ac);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:4px}.lnk::after{content:"\203A";font-size:1.2em;transition:transform .3s var(--ease)}.lnk:hover::after{transform:translateX(4px)}
html body input[type=number],html body input[type=text],html body input[type=email],html body input[type=tel],html body input[type=password],html body input[type=url],html body input[type=search],html body select,html body textarea{background:var(--pn);border:1px solid var(--bd);border-radius:12px;padding:12px 14px;font-size:17px;font-family:var(--font);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
html body input:focus,html body select:focus,html body textarea:focus{border-color:var(--ac)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 22%,transparent)}
label>span{font-weight:600;font-size:15px}
fieldset{border:1px solid var(--bd);border-radius:16px}legend{font-weight:600;padding:0 8px}
/* cards */
html body .card{background:var(--pn);border:0;border-radius:var(--r);padding:28px;box-shadow:none}
html body .card .card{background:var(--bg)}
html body .note{border-radius:14px}
/* product tiles */
html body .pg{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
html body .pc{border:0;background:var(--pn);border-radius:28px;padding:32px;gap:14px;min-height:430px;transform-style:preserve-3d;transition:transform .6s var(--ease),box-shadow .6s var(--ease);position:relative;overflow:hidden}
html body .pc h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em}
html body .pc img,html body .pc .ph{height:230px;border-radius:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--fur) 14%,var(--bg)),var(--bg))}
html body .pc .btn{align-self:flex-start;margin-top:6px}
.pc::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--ac) 12%,transparent),transparent 55%);opacity:0;transition:opacity .4s var(--ease)}.pc:hover::after{opacity:1}
html body .pc.rv.in:hover{box-shadow:0 30px 60px rgba(0,0,0,.14)}
/* scroll reveal (Apple-style: rise, soften, focus) */
html body .rv{opacity:0;transform:translateY(46px) scale(.985);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
html body .rv.in{opacity:1;transform:none;filter:none}
/* tabs and steps */
html body .tabs .btn{padding:8px 18px;font-size:15px}
html body .sn button{border-radius:14px;border:0;background:var(--bg);font-weight:500}
html body .sn button.on{background:var(--pn);box-shadow:0 0 0 2px var(--ac)}
html body .opt,html body .jc{border-radius:18px;border:2px solid transparent;background:var(--bg);transition:border-color .3s var(--ease),transform .3s var(--ease)}
html body .opt.on,html body .jc.on{border-color:var(--ac);background:var(--pn)}
html body .opt:active,html body .jc:active{transform:scale(.98)}
html body .jpanel,html body .jg{border:0;background:var(--bg);border-radius:20px}
html body .jq button,html body .cnt button{border:0;background:var(--bg);transition:transform .2s var(--ease),background .2s}
html body .jpanel .jq button{background:var(--pn)}
html body .jq button:active,html body .cnt button:active{transform:scale(.9)}
html body #cv,html body #cvs{border-radius:22px}
.tot{letter-spacing:-.04em}
/* accordion */
details.faq{background:var(--pn);border-radius:20px;padding:0 24px;margin:0 0 10px}
details.faq summary{cursor:pointer;list-style:none;font-size:19px;font-weight:600;letter-spacing:-.02em;padding:20px 0;display:flex;justify-content:space-between;gap:12px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:28px;font-weight:300;color:var(--mu);transition:transform .4s var(--ease)}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .ans{overflow:hidden;color:var(--mu);padding:0 0 20px;animation:faqin .5s var(--ease)}
@keyframes faqin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* footer */
html body #ft{border-top:1px solid var(--bd);color:var(--mu);font-size:13px;padding:24px 22px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}html body .rv{filter:none;transform:none;opacity:1}}
@media (max-width:560px){h1{letter-spacing:-.035em}html body .card{padding:20px;border-radius:20px}html body .pc{min-height:380px;padding:24px}}
html body .sn{padding:3px;margin:-3px -3px 13px}