/* X Plugins — site styles. Structure and motion adapted from the reference glass theme, recoloured to the X family green. */
:root{
  --glow:#4ee08a; --glow-rgb:78,224,138;
  --accent:#4ee08a; --accent-2:#26a865; --accent-ink:#04140d;
  --bg:#050806; --bg-deep:#04140d;
  --text:#eef6f1; --text-2:#cfdcd4; --muted:#869a91;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --glass-tint:rgba(78,224,138,.07); --glass-edge:rgba(78,224,138,.22);
  --r:24px; --r-sm:14px; --dock-safe-top:96px;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.25,1,.5,1);
  --font:'Inter','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
}
*{box-sizing:border-box}
html{background:var(--bg);scrollbar-width:thin;scrollbar-color:#24302a var(--bg);scroll-behavior:smooth}
body{margin:0;min-height:100%;background:transparent;color:var(--text);font-family:var(--font);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;filter:blur(60px);
  background:radial-gradient(900px circle at 16% 10%,rgba(78,224,138,.14),transparent 62%),radial-gradient(800px circle at 86% 20%,rgba(38,168,101,.10),transparent 60%),radial-gradient(950px circle at 50% 60%,rgba(78,224,138,.07),transparent 64%),radial-gradient(700px circle at 10% 80%,rgba(20,120,80,.07),transparent 62%);
  animation:ambient 15s infinite alternate ease-in-out}
@keyframes ambient{0%{transform:scale(1) translate(0);opacity:.6}50%{transform:scale(1.1) translate(2%,2%);opacity:1}100%{transform:scale(1) translate(-2%,-2%);opacity:.6}}
::-webkit-scrollbar{width:8px;background:var(--bg)}::-webkit-scrollbar-thumb{background:#24302a;border-radius:4px}
main,section,.shopify-section{position:relative;z-index:1}
img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(78,224,138,.55)}
[dir=rtl] *{letter-spacing:0!important}
.mono{font-family:var(--mono)}

/* ---------- Dock ---------- */
.dock-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;max-width:95%;direction:ltr}
.dock{display:flex;align-items:center;padding:10px;border-radius:24px;background:rgba(4,12,8,.5);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.dock-sec{display:flex;align-items:center;gap:10px;padding:0 15px;flex:1 1 0}
.dock-sec.right{justify-content:flex-end}
.dock-logo{flex:0 0 auto;padding:0 10px;display:flex}
.dock-logo svg{width:38px;height:38px;filter:drop-shadow(0 0 10px rgba(78,224,138,.45))}
.dock-item{position:relative;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);color:#fff;border:1px solid transparent;font:700 13px var(--font);cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1)}
.dock-item::before{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);pointer-events:none}
.dock-item svg{width:20px;height:20px;fill:currentColor}
.dock-item:hover,.dock-item.active{transform:translateY(-5px) scale(1.1);background:rgba(78,224,138,.18);border-color:rgba(78,224,138,.5);box-shadow:0 5px 15px rgba(78,224,138,.3);z-index:10}
.dock-tip{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);margin-top:15px;background:rgba(0,0,0,.85);padding:6px 12px;border-radius:8px;font-size:12px;white-space:nowrap;border:1px solid rgba(255,255,255,.1);opacity:0;pointer-events:none;transition:all .3s ease;color:#fff;font-weight:500}
.dock-item:hover .dock-tip{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:768px){.dock-sec{padding:0 6px;gap:6px}.dock-item{width:40px;height:40px}.dock-wrap{top:12px}}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity 750ms var(--ease),transform 750ms var(--ease),filter 750ms var(--ease);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform,filter}
[data-reveal].is-inview{opacity:1;transform:none;filter:blur(0)}
@media(prefers-reduced-motion:reduce){[data-reveal]{transition:none;opacity:1;transform:none;filter:none}}

/* ---------- Hero ---------- */
.hero{position:relative;width:100%;height:100vh;min-height:700px;overflow:hidden;color:#fff}
.hero-canvas{position:absolute;inset:0;z-index:1;opacity:.72;mix-blend-mode:screen;filter:brightness(1.25) contrast(1.08);-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent);pointer-events:none}
.hero-canvas canvas{display:block;width:100%;height:100%}
.hero-ui{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;direction:ltr}
.tech-corner{position:absolute;top:40px;font:.8rem var(--mono);letter-spacing:2px!important;color:rgba(255,255,255,.7);opacity:.75}
.tech-corner.tl{left:40px}.tech-corner.tr{right:40px}
.tech-corner .dim{opacity:.5;margin-left:6px}
.tech-corner.tr::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff3b3b;margin-left:8px;box-shadow:0 0 10px #ff3b3b;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero-main{text-align:center;max-width:1200px;width:100%;display:flex;flex-direction:column;align-items:center;gap:30px}
.hero-title{font-size:clamp(3.6rem,12vw,13rem);line-height:.85;font-weight:900;letter-spacing:-.04em!important;text-transform:uppercase;display:flex;align-items:baseline;gap:.08em;margin:0}
.title-line{display:block;cursor:pointer;padding:.1em;margin:-.1em;background:linear-gradient(to right,#fff 0%,#fff 45%,#5f7a6c 50%,#fff 55%,#fff 100%);background-size:200% auto;background-position:0 center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));transition:transform 650ms var(--ease),background-position 900ms ease,filter 900ms ease}
.title-line:hover{background-position:200% center;transform:scale(1.02);filter:drop-shadow(0 22px 48px rgba(0,0,0,.7)) drop-shadow(0 0 44px rgba(78,224,138,.35))}
.title-line.x{background:linear-gradient(135deg,#a4f6c4,#4ee08a 55%,#26a865);-webkit-background-clip:text;background-clip:text;background-size:100% 100%}
.hero-sub{font-size:clamp(1rem,1.5vw,1.25rem);color:rgba(255,255,255,.62);letter-spacing:.05em;text-transform:uppercase;max-width:560px;line-height:1.6;transition-duration:1.5s}
[dir=rtl] .hero-sub{text-transform:none;letter-spacing:0}
.btn-ghost{position:relative;display:inline-block;padding:18px 50px;font-size:.9rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(0,0,0,.3);backdrop-filter:blur(10px);overflow:hidden;transition:all .4s ease}
[dir=rtl] .btn-ghost{letter-spacing:0;font-size:1rem}
.btn-ghost:hover{background:rgba(78,224,138,.1);border-color:var(--accent);box-shadow:0 0 30px rgba(78,224,138,.18);transform:translateY(-2px)}
.btn-ghost .sheen{position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:skewX(-25deg);transition:.5s}
.btn-ghost:hover .sheen{left:100%;transition:.7s}
.scroll-ind{position:absolute;bottom:40px;display:flex;flex-direction:column;align-items:center;gap:15px;opacity:.7;cursor:pointer;transition:opacity .3s;background:none;border:0;color:#fff}
.scroll-ind:hover{opacity:1}
.mouse{width:24px;height:36px;border:2px solid rgba(255,255,255,.8);border-radius:12px;position:relative}
.wheel{width:4px;height:6px;background:#fff;border-radius:2px;position:absolute;top:6px;left:50%;transform:translateX(-50%);animation:wheel 1.5s infinite}
@keyframes wheel{0%{top:6px;opacity:1;height:6px}50%{top:12px;opacity:0;height:4px}100%{top:6px;opacity:0;height:6px}}
.scroll-arrow{display:flex;flex-direction:column;align-items:center;gap:4px}
.scroll-arrow span{display:block;width:10px;height:10px;border-bottom:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);animation:arr 1.5s infinite;opacity:0}
.scroll-arrow span:nth-child(2){animation-delay:.1s}.scroll-arrow span:nth-child(3){animation-delay:.2s}
@keyframes arr{0%{opacity:0;transform:rotate(45deg) translate(-5px,-5px)}50%{opacity:1}100%{opacity:0;transform:rotate(45deg) translate(5px,5px)}}
.hero [data-reveal]{transition-duration:1.5s;transition-timing-function:cubic-bezier(.16,1,.3,1);filter:none;transform:translateY(40px)}
.hero.is-inview [data-reveal]{opacity:1;transform:none}
@media(max-width:768px){.tech-corner{display:none}.hero-ui{padding:20px}}

/* ---------- Shared section bits ---------- */
.sec{padding:100px 20px;position:relative}
.sec::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.8;
  background:radial-gradient(circle at 20% 20%,rgba(78,224,138,.13),transparent 60%),radial-gradient(circle at 80% 80%,rgba(78,224,138,.10),transparent 60%),radial-gradient(circle at 50% 100%,rgba(255,255,255,.04),transparent 60%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent)}
.container{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.sec-head{text-align:center;max-width:820px;margin:0 auto 56px}
.sec-head h2{font-size:clamp(1.9rem,3.2vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:12px;background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.72));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-head p{font-size:1.05rem;color:rgba(255,255,255,.7);line-height:1.65}
.glass-card{position:relative;background:var(--glass-tint);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glass-edge);border-radius:30px;box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 30px rgba(78,224,138,.05);overflow:hidden;transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.glass-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 400px at 20% 0%,rgba(78,224,138,.14),transparent 58%)}
.glass-card:hover{transform:translateY(-6px);box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 60px rgba(78,224,138,.10),inset 0 0 40px rgba(78,224,138,.09)}
.glass-card>*{position:relative}
.kicker{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font-size:.78rem;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.92);background:rgba(78,224,138,.14);border:1px solid rgba(78,224,138,.3);box-shadow:0 0 0 1px rgba(78,224,138,.14);margin-bottom:14px;font-weight:600}
.pill{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font-size:.78rem;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pill.live{background:rgba(78,224,138,.2);border-color:rgba(78,224,138,.4)}
.grad-h{background:linear-gradient(90deg,#fff,#c9d6cf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* primary = green-tinted liquid glass, secondary = clear glass (house style) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border-radius:999px;color:#effcf4;font-weight:800;font-size:.95rem;letter-spacing:1px;text-transform:uppercase;border:1px solid rgba(78,224,138,.5);cursor:pointer;overflow:hidden;font-family:var(--font);
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.2),transparent 55%),linear-gradient(180deg,rgba(78,224,138,.3),rgba(78,224,138,.12)),rgba(14,26,20,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.5);transition:all .3s cubic-bezier(.25,.8,.25,1)}
[dir=rtl] .btn{letter-spacing:0;font-size:1.02rem}
.btn:hover{transform:translateY(-2px);border-color:rgba(78,224,138,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 22px rgba(78,224,138,.2),0 15px 40px rgba(0,0,0,.6)}
.btn:active{transform:translateY(1px)}
.btn.block{width:100%;padding:22px;font-size:1.05rem}
.btn.glass{background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.12),transparent 55%),rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:#fff}
.btn.glass:hover{border-color:rgba(255,255,255,.4)}

/* ---------- Featured ---------- */
.featured{padding:80px 20px;display:flex;justify-content:center}
.featured::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;background:radial-gradient(1200px 1200px at 50% 50%,rgba(78,224,138,.14),transparent 60%),radial-gradient(1000px 1000px at 70% 30%,rgba(78,224,138,.09),transparent 60%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent)}
.featured-grid{display:grid;grid-template-columns:62% 1fr;max-width:1400px;width:100%;gap:40px;align-items:center;position:relative;z-index:1}
.media-frame{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;background:#000;padding:2px;display:flex;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.media-frame::before{content:"";position:absolute;left:-25%;top:-25%;width:150%;height:150%;background:conic-gradient(transparent 0deg,transparent 80deg,var(--glow) 100deg,transparent 120deg,transparent 260deg,var(--glow) 280deg,transparent 300deg,transparent 360deg);animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.media-inner{position:relative;z-index:1;flex:1;border-radius:22px;overflow:hidden;background:radial-gradient(600px 320px at 30% 15%,rgba(78,224,138,.12),transparent 55%),#060b08;display:flex;align-items:center;justify-content:center}
.media-overlay{position:absolute;top:16px;left:16px;display:flex;gap:10px;z-index:3;direction:ltr}
.featured .glass-card{padding:34px;border-radius:30px;animation:pulse-subtle 4s infinite ease-in-out}
@keyframes pulse-subtle{0%,100%{box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 0 rgba(78,224,138,.05)}50%{box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 25px 2px rgba(78,224,138,.15)}}
.f-heading{font-size:2.3rem;font-weight:900;line-height:1.2;margin-bottom:18px;letter-spacing:-.02em}
.f-list{margin-bottom:22px}
.f-item{display:flex;align-items:center;padding:12px 16px;margin-bottom:8px;font-size:1.05rem;color:rgba(255,255,255,.85);border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);transition:transform 220ms var(--ease),background-color 220ms,border-color 220ms}
.f-item:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);transform:translateX(8px)}
[dir=rtl] .f-item:hover{transform:translateX(-8px)}
.dot{width:8px;height:8px;border-radius:50%;margin-inline-end:16px;background:var(--glow);box-shadow:0 0 16px var(--glow);flex-shrink:0;transition:transform .3s}
.f-item:hover .dot{transform:scale(1.4)}
.f-note{margin-top:14px;font-size:.95rem;color:rgba(255,255,255,.65)}
@media(max-width:1000px){.featured-grid{grid-template-columns:1fr;gap:30px}.featured .glass-card{padding:24px}.f-heading{font-size:1.8rem}}

/* ---------- Zigzag ---------- */
.zz-container{display:flex;flex-direction:column;gap:120px}
.zz-row{display:flex;align-items:center;gap:80px}
.zz-row.rev{flex-direction:row-reverse}
.zz-content,.zz-media{flex:1;min-width:0}
.zz-num{font:700 .95rem var(--mono);color:var(--glow);letter-spacing:.1em;margin-bottom:16px;text-shadow:0 0 10px rgba(78,224,138,.4);display:flex;align-items:center;gap:12px}
.zz-num img{width:34px;height:34px;border-radius:9px}
.zz-heading{font-size:2.2rem;font-weight:900;line-height:1.1;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:24px;background:linear-gradient(90deg,#fff,#c9d6cf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.1em}
[dir=rtl] .zz-heading{text-transform:none;line-height:1.35}
.zz-desc{font-size:1.1rem;color:rgba(255,255,255,.6);margin-bottom:32px;line-height:1.7}
.zz-media-wrap{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5);transition:transform 420ms var(--ease),box-shadow 420ms var(--ease);border:1px solid rgba(255,255,255,.08);background:#060b08}
.zz-media-wrap::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:radial-gradient(650px 380px at 25% 10%,rgba(255,255,255,.1),transparent 58%)}
.zz-media-wrap:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 26px 70px rgba(0,0,0,.65),0 0 50px rgba(78,224,138,.12)}
@media(max-width:900px){.sec{padding:60px 20px}.zz-container{gap:60px}.zz-row,.zz-row.rev{flex-direction:column-reverse;gap:30px}.zz-heading{font-size:1.8rem}.sec-head{text-align:start;margin-inline:0}}

/* ---------- About ---------- */
.about-grid{display:flex;align-items:center;gap:60px;flex-wrap:wrap}
.about-media{flex:1 1 440px}
.about-visual{border-radius:30px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(500px 360px at 50% 40%,rgba(78,224,138,.18),transparent 65%),#050b08;box-shadow:0 20px 50px rgba(0,0,0,.3);aspect-ratio:1/1.05;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;transition:transform .6s var(--ease)}
.about-visual:hover{transform:scale(1.02)}
.about-visual::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;opacity:.35;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 75%)}
.about-visual svg{width:62%;height:auto;position:relative;z-index:1;overflow:visible;filter:drop-shadow(0 0 30px rgba(78,224,138,.4))}
.about-content{flex:1 1 500px}
.about-content .glass-card{padding:50px}
.about-content h2{font-size:clamp(2rem,3.2vw,3rem);font-weight:900;letter-spacing:-.02em;line-height:1.15;margin-bottom:25px;background:linear-gradient(135deg,#fff,rgba(255,255,255,.7));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.about-text{font-size:1.1rem;line-height:1.8;color:rgba(255,255,255,.85)}
.about-text p{margin-bottom:18px}.about-text strong{color:#fff}
@media(max-width:768px){.about-content .glass-card{padding:30px}}

/* ---------- Why ---------- */
.wcu-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.wcu-card{grid-column:span 4;border-radius:24px;padding:34px 30px;display:flex;flex-direction:column;align-items:flex-start}
.wcu-card:hover{transform:translateY(-8px)}
.wcu-icon{width:60px;height:60px;border-radius:16px;background:rgba(78,224,138,.14);border:1px solid rgba(78,224,138,.3);display:flex;align-items:center;justify-content:center;margin-bottom:25px;transition:all .4s ease;box-shadow:0 0 0 1px rgba(78,224,138,.12)}
.wcu-icon svg{width:30px;height:30px}
.wcu-card:hover .wcu-icon{background:rgba(78,224,138,.22);transform:scale(1.08) rotate(5deg);box-shadow:0 18px 60px rgba(78,224,138,.28)}
.wcu-title{font-size:1.4rem;font-weight:800;margin-bottom:15px}
.wcu-text{color:rgba(255,255,255,.7);line-height:1.7}
@media(min-width:769px) and (max-width:1024px){.wcu-card{grid-column:span 6}}
@media(max-width:768px){.wcu-card{grid-column:span 12}.wcu-grid{gap:16px}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:start}
.faq-item{background:rgba(5,10,7,.9);border:1px solid rgba(255,255,255,.08);border-radius:24px;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.25,.8,.25,1)}
.faq-item:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.faq-item.active{border-color:rgba(78,224,138,.45);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(78,224,138,.14);z-index:2}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:30px 32px;background:none;border:0;cursor:pointer;text-align:start;color:rgba(255,255,255,.92);font:600 1.08rem var(--font)}
.faq-ic{width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease-out);opacity:.5;flex-shrink:0}
.faq-item.active .faq-ic{transform:rotate(180deg);opacity:1;color:var(--glow)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
.faq-a div{padding:0 32px 30px;color:rgba(255,255,255,.62);line-height:1.8}
.faq-a a{color:var(--glow);text-decoration:underline}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.footer{position:relative;z-index:1;background:rgba(0,0,0,.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.1);padding:56px 20px 36px}
.footer-top{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-brand{display:flex;flex-direction:column;gap:14px;max-width:340px}
.footer-brand .nm{display:flex;align-items:center;gap:12px;font-weight:900;font-size:1.3rem;direction:ltr}
.footer-brand .nm svg{width:38px;height:38px}
.footer-brand p{color:rgba(255,255,255,.55);font-size:.95rem}
.footer-col h4{font-size:.95rem;font-weight:700;margin-bottom:16px;color:#fff}
.footer-col a{display:block;color:rgba(255,255,255,.65);padding:5px 0;transition:all .3s}
.footer-col a:hover{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.4);padding-inline-start:5px}
.footer-bot{max-width:1200px;margin:36px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.5);font-size:.88rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Catalog (plugins page) ---------- */
.page-top{padding-top:calc(var(--dock-safe-top) + 40px)}
.page-title{font-size:clamp(2.4rem,5vw,4rem);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.04em;text-align:center;margin-bottom:14px;background:linear-gradient(90deg,#fff,#cfd9d3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));padding-bottom:.08em}
[dir=rtl] .page-title{text-transform:none;line-height:1.3}
.page-sub{text-align:center;color:rgba(255,255,255,.65);max-width:640px;margin:0 auto 56px;font-size:1.05rem}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.card{position:relative;display:flex;flex-direction:column;background:rgba(8,14,11,.65);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);overflow:hidden;transition:all .4s cubic-bezier(.16,1,.3,1)}
.card:hover{transform:translateY(-8px);border-color:rgba(78,224,138,.5);box-shadow:0 15px 40px rgba(0,0,0,.5),0 0 20px rgba(78,224,138,.15)}
.card::after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:skew(-25deg);pointer-events:none;z-index:3;transition:0s}
.card:hover::after{left:150%;transition:.7s ease-in-out}
.card-media{margin:14px 14px 0;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3;background:#060b08;position:relative;border:1px solid rgba(255,255,255,.06)}
.card-media .mock{transform:scale(.82);transform-origin:center}
.card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-badge{align-self:flex-start;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.8);border:1px solid var(--glow);padding:4px 10px;border-radius:var(--r-sm);box-shadow:0 0 10px rgba(78,224,138,.3);font-weight:600}
.card h3{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.card h3 img{width:30px;height:30px;border-radius:8px}
.card p{color:rgba(255,255,255,.65);font-size:.97rem;line-height:1.65;flex:1}
.card .btn{margin-top:8px;padding:13px 24px;font-size:.8rem;letter-spacing:.1em}

/* ---------- Product page ---------- */
.p-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;max-width:1200px;margin:0 auto;padding:calc(var(--dock-safe-top) + 50px) 20px 40px;position:relative;z-index:1}
.p-hero h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:900;letter-spacing:-.04em;line-height:1;margin-bottom:18px;direction:ltr;text-align:start}
[dir=rtl] .p-hero h1{text-align:right}
.p-hero h1 b{background:linear-gradient(135deg,#a4f6c4,#4ee08a 55%,#26a865);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.p-lead{font-size:1.15rem;color:rgba(255,255,255,.72);line-height:1.8;margin-bottom:28px}
.p-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.p-actions{display:flex;gap:14px;flex-wrap:wrap}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{padding:30px;border-radius:24px}
.step .n{font:700 2.2rem var(--mono);color:var(--glow);text-shadow:0 0 18px rgba(78,224,138,.4);margin-bottom:10px}
.step h3{font-size:1.2rem;font-weight:800;margin-bottom:8px}
.step p{color:rgba(255,255,255,.65)}
.other{margin-top:20px}
@media(max-width:900px){.p-hero{grid-template-columns:1fr;gap:34px}.steps{grid-template-columns:1fr}}

/* ---------- Panel mockups (pure HTML, in-brand) ---------- */
.mock{width:min(100%,420px);margin:0 auto;padding:18px;direction:ltr;position:relative}
.mock-win{border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%),rgba(12,20,16,.92);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 50px rgba(0,0,0,.5);overflow:hidden}
.mock-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07);font-weight:800;font-size:.95rem}
.mock-bar b{color:var(--accent)}
.mock-pill{font:600 .68rem var(--mono);padding:3px 10px;border-radius:999px;background:rgba(78,224,138,.12);border:1px solid rgba(78,224,138,.3);color:#bff5d4}
.mock-body{padding:14px;display:flex;flex-direction:column;gap:12px}
.mock-lbl{font-size:.72rem;color:var(--muted);font-weight:700;letter-spacing:.04em}
.mock-box{border-radius:12px;background:rgba(5,11,8,.8);border:1px solid rgba(255,255,255,.07);padding:12px}
.mock-btn{border-radius:12px;padding:12px;text-align:center;font-weight:800;font-size:.9rem;color:#effcf4;border:1px solid rgba(78,224,138,.5);background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.2),transparent 55%),linear-gradient(180deg,rgba(78,224,138,.3),rgba(78,224,138,.12)),rgba(14,26,20,.92)}
.words{display:flex;flex-wrap:wrap;gap:6px}
.word{padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-size:.82rem;color:var(--text-2);transition:all .25s}
.word.on{background:rgba(78,224,138,.22);border-color:rgba(78,224,138,.6);color:#fff;box-shadow:0 0 14px rgba(78,224,138,.3)}
.mock-track{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.mock-track i{display:block;height:100%;width:40%;border-radius:6px;background:linear-gradient(90deg,var(--accent-2),var(--accent));animation:prog 4s ease-in-out infinite}
@keyframes prog{0%,100%{width:18%}50%{width:86%}}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumb{aspect-ratio:16/10;border-radius:9px;background:linear-gradient(135deg,rgba(78,224,138,.25),rgba(10,40,26,.9));border:1px solid rgba(78,224,138,.25);position:relative;overflow:hidden}
.thumb::after{content:"";position:absolute;left:14%;right:14%;top:30%;height:6px;border-radius:4px;background:rgba(255,255,255,.55);box-shadow:0 12px 0 -1px rgba(255,255,255,.3)}
.thumb:nth-child(2n){background:linear-gradient(135deg,rgba(94,232,154,.18),rgba(8,30,20,.9))}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 11px;border-radius:999px;font-size:.74rem;font-weight:700;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text-2)}
.chip.on{background:rgba(78,224,138,.2);border-color:rgba(78,224,138,.5);color:#fff}
.search{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:12px;background:rgba(5,11,8,.85);border:1px solid rgba(78,224,138,.35);box-shadow:0 0 18px rgba(78,224,138,.12);font-size:.85rem;color:var(--muted)}
.kbd{font:700 .7rem var(--mono);padding:3px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff}
.res{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:10px;font-size:.85rem;background:rgba(255,255,255,.03);border:1px solid transparent;color:var(--text-2)}
.res.on{background:rgba(78,224,138,.14);border-color:rgba(78,224,138,.4);color:#fff}
.mock-mascot{position:absolute;width:74px;height:74px;right:-6px;bottom:-14px;overflow:visible;filter:drop-shadow(0 0 16px rgba(78,224,138,.45));animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}

/* mascot animation */
.mascot .frame{fill:rgba(78,224,138,.07);stroke:rgba(78,224,138,.45);stroke-width:2}
.mascot .f1,.mascot .f2,.mascot .eye,.mascot .body{transform-box:fill-box;transform-origin:center}
.mascot .f1{animation:f1 4.8s ease-in-out infinite}.mascot .f2{animation:f2 4.8s ease-in-out infinite}
.mascot .eye{animation:blink2 4.2s infinite}.mascot .eye.r{animation:wink 4.2s infinite}
.mascot .body{animation:bob 3.2s ease-in-out infinite}
@keyframes blink2{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes wink{0%,60%,100%{transform:scaleY(1)}64%,70%{transform:scaleY(.12)}74%{transform:scaleY(1)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes f1{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(-4px,-3px) rotate(-11deg)}}
@keyframes f2{0%,100%{transform:translate(0,0) rotate(6deg)}50%{transform:translate(4px,3px) rotate(9deg)}}
@media(prefers-reduced-motion:reduce){body::before,.mascot *,.mock-mascot,.media-frame::before,.mock-track i{animation:none!important}}

/* ---------- Sales sections ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pain{padding:30px;border-radius:24px}
.pain h3{font-size:1.25rem;font-weight:800;margin-bottom:8px}
.pain p{color:rgba(255,255,255,.68)}
.pain .x-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:rgba(224,105,78,.12);border:1px solid rgba(224,105,78,.35);color:#f0937e}
.pain .x-ic svg{width:22px;height:22px}
.pain-quote{margin:48px auto 0;max-width:760px;text-align:center}
.pain-quote q{display:block;font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:700;line-height:1.6;quotes:none;color:#fff}
.pain-quote small{display:block;margin-top:10px;color:var(--muted)}
.calc{max-width:760px;margin:40px auto 0;padding:28px 32px;border-radius:24px;text-align:center}
.calc .t{font:700 .8rem var(--mono);letter-spacing:.14em;color:var(--glow);margin-bottom:14px;text-transform:uppercase}
.calc .eq{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;font-size:1.15rem;font-weight:700}
.calc .eq span:last-child{color:#fff;background:rgba(78,224,138,.16);border:1px solid rgba(78,224,138,.4);padding:6px 16px;border-radius:999px}
.calc p{margin-top:14px;color:rgba(255,255,255,.7)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:980px;margin:0 auto}
.ba .col{padding:32px;border-radius:24px}
.ba h3{font-size:1.15rem;font-weight:800;margin-bottom:16px}
.ba li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;color:rgba(255,255,255,.82);line-height:1.6}
.ba li::before{content:"✕";flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;background:rgba(224,105,78,.14);color:#f0937e;border:1px solid rgba(224,105,78,.35);margin-top:2px}
.ba .good li::before{content:"✓";background:rgba(78,224,138,.16);color:var(--glow);border-color:rgba(78,224,138,.4)}
.ba .bad{background:rgba(224,105,78,.04);border:1px solid rgba(224,105,78,.2);box-shadow:none}
.ba .bad::before{background:none}
.ba .bad:hover{transform:none}
@media(max-width:800px){.ba,.pain-grid{grid-template-columns:1fr}}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testi{padding:30px;border-radius:24px;display:flex;flex-direction:column;gap:18px;justify-content:space-between}
.testi q{quotes:none;font-size:1.12rem;line-height:1.75;font-weight:600;color:#fff}
.testi q::before{content:"”";display:block;font:900 3rem/0.6 var(--font);color:var(--glow);margin-bottom:6px;text-shadow:0 0 18px rgba(78,224,138,.4)}
.testi cite{font-style:normal;color:var(--muted);font-size:.92rem}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr}}
.zz-list{margin:0 0 28px}
.zz-list li{display:flex;gap:12px;align-items:flex-start;padding:6px 0;color:rgba(255,255,255,.78)}
.zz-list li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 14px var(--glow);flex-shrink:0;margin-top:.7em}
.zz-price{margin:-8px 0 24px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.zz-price b{font-size:2rem;font-weight:900;text-shadow:0 0 28px rgba(78,224,138,.5)}
.zz-price s{color:rgba(255,255,255,.4)}
.zz-price span{color:rgba(255,255,255,.6);font-size:.95rem}
.price-box{max-width:560px;margin:0 auto;padding:40px;text-align:center}
.price-box .badge{display:inline-block;font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:8px;background:rgba(78,224,138,.12);border:1px solid rgba(78,224,138,.35);color:#bff5d4;margin-bottom:18px}
.price-box .num{font-size:clamp(3rem,7vw,4.4rem);font-weight:900;line-height:1;text-shadow:0 0 34px rgba(78,224,138,.55)}
.price-box .num small{font-size:1.2rem;font-weight:700;margin-inline-start:8px}
.price-box s{display:block;color:rgba(255,255,255,.4);font-size:1.15rem;margin-top:6px}
.price-box .note{color:rgba(255,255,255,.7);margin:14px 0 22px}
.price-box ul{text-align:start;margin:0 0 26px}
.price-box li{padding:7px 0;color:rgba(255,255,255,.85);display:flex;gap:10px}
.price-box li::before{content:"✓";color:var(--glow);font-weight:900}
.who{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:860px;margin:0 auto}
.who span{padding:12px 20px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-weight:600;color:rgba(255,255,255,.88);transition:all .3s}
.who span:hover{background:rgba(78,224,138,.14);border-color:rgba(78,224,138,.45);transform:translateY(-3px)}
.final{text-align:center;padding:120px 20px 140px}
.final .glass-card{max-width:900px;margin:0 auto;padding:64px 32px}
.final h2{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:900;line-height:1.2;letter-spacing:-.02em;margin-bottom:16px}
.final p{color:rgba(255,255,255,.72);font-size:1.1rem;max-width:560px;margin:0 auto 30px}
.final .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.faq-grid.one{grid-template-columns:1fr;max-width:820px;margin:0 auto}

/* ---------- Reviews wall ---------- */
.wall{columns:3 300px;column-gap:18px}
.rv{break-inside:avoid;margin:0 0 18px;padding:8px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 40px rgba(0,0,0,.35);transition:transform .5s var(--ease-out),border-color .4s,box-shadow .4s}
.rv:hover{transform:translateY(-4px);border-color:rgba(78,224,138,.4);box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(78,224,138,.1)}
.rv img{display:block;width:100%;height:auto;border-radius:14px}

/* real recordings inside landing sections */
.rvid{position:relative;width:min(100%,560px);margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(78,224,138,.1);background:#07100c;line-height:0}
.rvid video{display:block;width:100%;height:auto}
.real-badge{position:absolute;inset-inline-start:12px;bottom:12px;font:700 11px 'IBM Plex Sans Arabic','Inter',sans-serif;line-height:1.4;color:#04140d;background:#4ee08a;padding:4px 10px;border-radius:999px;box-shadow:0 0 16px rgba(78,224,138,.5)}
.media-frame:has(.rvid){aspect-ratio:auto}
.media-inner:has(.rvid){padding:24px!important}
.media-inner .rvid{width:100%}
.card-media .rvid{width:100%;margin:0;border-radius:0;border:0;box-shadow:none;position:absolute;inset:0}
.card-media .rvid video{height:100%;object-fit:cover;object-position:top}
.card-media .real-badge{display:none}

/* ===== 3D product stage (plugin pages with a device — assets/js/x-device.js) ===== */
.p-stage{position:relative;z-index:1;text-align:center;padding:calc(var(--dock-safe-top) + 34px) 16px 30px;overflow:hidden}
.p-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 58%,rgba(78,224,138,.10),transparent 70%),radial-gradient(40% 35% at 15% 10%,rgba(38,168,101,.08),transparent 70%)}
.ps-label{font:600 .95rem Inter,var(--font);color:#e9f5ee;letter-spacing:.02em;margin-bottom:14px;direction:ltr}
.ps-title{font-size:clamp(2.3rem,6.2vw,5.2rem);font-weight:900;line-height:1.08;letter-spacing:-.02em;margin:0 auto;max-width:1100px}
.ps-title span{display:block}
.ps-title .g{background:linear-gradient(90deg,#b9ffd6,#4ee08a 45%,#21b8a0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.ps-device{position:relative;width:min(1400px,100%);height:clamp(230px,34vw,520px);margin:6px auto 0;touch-action:pan-y}
.ps-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.ps-fallback{display:none;position:absolute;left:50%;top:50%;width:min(220px,40%);transform:translate(-50%,-50%);filter:drop-shadow(0 0 40px rgba(78,224,138,.35))}
.ps-device.no-gl .ps-fallback{display:block}
.ps-tip{position:absolute;transform:translate(-50%,14px);padding:7px 13px;border-radius:10px;background:rgba(4,12,8,.86);border:1px solid rgba(78,224,138,.4);
  color:#effcf4;font-size:.85rem;font-weight:700;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ps-tip.on{opacity:1}
.ps-cta{margin-top:4px}
.ps-cta .btn{box-shadow:0 0 40px rgba(78,224,138,.35)}
.ps-cta p{margin-top:14px;color:rgba(255,255,255,.55);font-size:.9rem}
.p-hero.after-stage{padding-top:30px}
.p-hero.after-stage h1{display:none}
@media(max-width:700px){.ps-device{height:clamp(170px,52vw,300px)}.ps-tip{font-size:.75rem}}

/* scroll section: the device screen "opens" into the silent promo (x-device.js drives --p 0→1) */
.ps-reel{position:relative;z-index:1;height:230vh;--p:0}
.ps-reel-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:calc(var(--dock-safe-top) - 20px) 16px 24px;overflow:hidden}
.ps-reel-head{text-align:center;opacity:calc(var(--p) * 2.2 - .3);transform:translateY(calc((1 - min(1, var(--p) * 1.8)) * 30px))}
.ps-reel-head h2{font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:900;line-height:1.1;margin:0 0 10px}
.ps-reel-head p{color:var(--muted);font-size:clamp(.95rem,1.4vw,1.1rem);margin:0}
.ps-reel-frame{width:min(1100px,100%);aspect-ratio:16/9;border-radius:calc(48px - var(--p) * 26px);overflow:hidden;position:relative;
  transform:scale(calc(.38 + var(--p) * .62));transform-origin:50% 40%;
  border:1px solid rgba(78,224,138,calc(.6 - var(--p) * .35));background:#030805;
  box-shadow:0 0 calc(30px + var(--p) * 70px) rgba(78,224,138,calc(.35 - var(--p) * .15)),0 40px 120px rgba(0,0,0,.6)}
.ps-reel-frame video{width:100%;height:100%;object-fit:cover;display:block}
.ps-sound{position:absolute;bottom:18px;inset-inline-end:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 14px;border-radius:999px;cursor:pointer;
  font:600 .85rem var(--font);color:#fff;background:rgba(5,10,7,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s,border-color .3s}
.ps-sound:hover{border-color:rgba(78,224,138,.6);background:rgba(5,10,7,.75)}
.ps-sound[aria-pressed=true]{color:#4ee08a;border-color:rgba(78,224,138,.5)}
.ps-sound .i-on,.ps-sound .l-on,.ps-sound[aria-pressed=true] .i-off,.ps-sound[aria-pressed=true] .l-off{display:none}
.ps-sound[aria-pressed=true] .i-on,.ps-sound[aria-pressed=true] .l-on{display:inline}
@media(max-width:640px){.ps-sound{bottom:10px;inset-inline-end:10px;padding:7px 12px;font-size:.78rem}}
@media(max-width:700px){.ps-reel{height:190vh}.ps-reel-frame{transform:scale(calc(.6 + var(--p) * .4))}}
@media(prefers-reduced-motion:reduce){.ps-reel{height:auto}.ps-reel-sticky{position:relative;height:auto;padding:60px 16px}.ps-reel-head{opacity:1;transform:none}.ps-reel-frame{transform:none}}

/* ===== Caption X hero: the real panel, flat and still, like a packaged product shot (assets/js/cx-hero.js) ===== */
/* wide screens: headline + CTA on one side, the panel on the other */
@media(min-width:1000px){
  .p-stage:has(.cx-hero){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);grid-template-areas:"head hero" "cta hero";align-items:center;column-gap:clamp(40px,6vw,110px);
    max-width:1320px;margin:0 auto;text-align:start;padding-inline:clamp(24px,4vw,64px);padding-bottom:70px;overflow:visible}
  .p-stage:has(.cx-hero) .ps-head{grid-area:head;align-self:end}
  .p-stage:has(.cx-hero) .ps-cta{grid-area:cta;align-self:start;margin-top:30px}
  .p-stage:has(.cx-hero) .ps-title{font-size:clamp(2.4rem,4.4vw,4.4rem);margin:0}
  .p-stage:has(.cx-hero) .ps-label{text-align:start;direction:inherit}
  .p-stage:has(.cx-hero) .cx-hero{grid-area:hero;margin:0 auto;max-width:min(560px,calc((100vh - 150px) * .62))}
}
.cx-hero{position:relative;width:100%;max-width:560px;margin:34px auto 26px;container-type:inline-size;isolation:isolate}
.cx-case{position:relative;padding:min(14px,2.6cqw);border-radius:min(34px,6cqw);
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 40%,rgba(78,224,138,.08));
  border:1px solid rgba(255,255,255,.10);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 60px 120px -30px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.5);
  opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.cx-hero.ready .cx-case{opacity:1;transform:none}
.cx-glow{position:absolute;inset:8% -12% -6%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(78,224,138,.26),rgba(78,224,138,.07) 60%,transparent);filter:blur(40px)}
.cx-case::after{content:"";position:absolute;left:10%;right:10%;bottom:-34px;height:34px;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(78,224,138,.22),transparent);filter:blur(14px)}

/* the panel (sizes in em: 16px at full 532px width, scales down with the container) */
.cxp{--g:#3ee08a;--line:rgba(255,255,255,.07);--card:rgba(255,255,255,.025);--mut:#8fa69a;
  font-size:min(16px,calc(100cqw / 35));direction:rtl;text-align:right;font-family:'IBM Plex Sans Arabic',var(--font);color:#e9f2ed;line-height:1.4;
  border-radius:1.2em;overflow:hidden;background:#0b100d;border:1px solid rgba(255,255,255,.06);user-select:none;pointer-events:none}
:root[dir=ltr] .cxp{direction:ltr;text-align:left}
.cxp svg{width:1.15em;height:1.15em;flex:none}
.cxp-host{display:flex;gap:1.6em;padding:.55em 1em;background:#161616;font:500 .78em Inter,sans-serif;color:#9a9a9a;direction:ltr}
.cxp-host .on{color:#e8e8e8;box-shadow:0 .14em 0 #e8e8e8}.cxp-host i{font-style:normal;margin-left:.4em}
.cxp-top{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.7em 1em;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0f1612,#0b100d)}
.cxp-brand{display:flex;align-items:center;gap:.5em;font:700 1em Inter,sans-serif;direction:ltr}.cxp-brand b{color:var(--g)}
.cxp-brand em{font:600 .62em "IBM Plex Mono",monospace;font-style:normal;color:#7dffb5;border:1px solid rgba(78,224,138,.45);border-radius:.6em;padding:.1em .55em}
.cxp-seq{display:flex;align-items:center;gap:.45em;font-size:.72em;color:#cfdcd4;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:99em;padding:.25em .9em}
.cxp-seq i{width:.5em;height:.5em;border-radius:50%;background:var(--g);box-shadow:0 0 .6em var(--g)}
.cxp-tools{display:flex;gap:.4em}.cxp-tools span{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:.6em;border:1px solid rgba(78,224,138,.3);color:#7dffb5;font:700 .72em Inter,sans-serif}
.cxp-tools svg{width:1.4em;height:1.4em}
.cxp-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:.2em;margin:.8em .8em .2em;padding:.35em;border-radius:1.1em;border:1px solid var(--line);background:rgba(255,255,255,.015)}
.cxp-tab{display:flex;flex-direction:column;align-items:center;gap:.3em;padding:.6em .1em .5em;border-radius:.8em;font-size:.64em;font-weight:700;color:var(--mut);white-space:nowrap}
.cxp-tab svg{width:1.7em;height:1.7em}
.cxp-tab.on{color:#f2fff7;background:linear-gradient(180deg,rgba(62,224,138,.22),rgba(30,120,75,.18));box-shadow:0 0 0 1px rgba(62,224,138,.55) inset,0 .4em 1.4em -0.4em rgba(62,224,138,.5)}
.cxp-tab.on svg{color:#7dffb5}
.cxp-sec{margin:.7em .8em 0;padding:.85em;border-radius:1em;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:.6em}
.cxp-h{display:flex;align-items:center;gap:.5em;font-size:.88em;font-weight:800}.cxp-h b{color:var(--g);font-family:Inter,sans-serif}
.cxp-card{display:flex;align-items:center;gap:.75em;padding:.75em;border-radius:.85em;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.cxp-card.col{flex-direction:column;align-items:stretch;gap:.6em}
.cxp-ib{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:.7em;background:rgba(62,224,138,.12);color:var(--g)}
.cxp-ct{display:block;font-size:.84em;font-weight:800}.cxp-cs{display:block;font-size:.66em;color:var(--mut)}
.cxp-lab{display:flex;align-items:center;gap:.45em;font-size:.74em;font-weight:700;color:#d6e3db}.cxp-lab svg{color:var(--mut)}
.cxp-trks{display:flex;gap:.35em;flex-wrap:wrap}
.cxp-trk{display:flex;align-items:center;gap:.35em;font:700 .7em Inter,'IBM Plex Sans Arabic',sans-serif;padding:.4em .95em;border-radius:99em;border:1px solid rgba(255,255,255,.12);color:#d6e3db}
.cxp-trk.off{color:#56665d;border-color:rgba(255,255,255,.06)}
.cxp-trk.on{color:#7dffb5;border-color:rgba(62,224,138,.65);background:rgba(62,224,138,.12)}
.cxp-tick{display:grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:var(--g);color:#06150d;font-style:normal;font-size:.8em}
.cxp-drop{display:flex;align-items:center;gap:.5em;padding:.7em .8em;border-radius:.85em;border:1px dashed rgba(255,255,255,.14);font-size:.7em;color:var(--mut)}
.cxp-row{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.cxp-h.flat{font-size:.84em}
.cxp-seg{display:flex;gap:.2em;padding:.2em;border-radius:.8em;border:1px solid var(--line);font-size:.7em;font-weight:700;color:var(--mut)}
.cxp-seg span{padding:.3em .9em;border-radius:.6em}.cxp-seg .on{color:#7dffb5;background:rgba(62,224,138,.14);box-shadow:0 0 0 1px rgba(62,224,138,.5) inset}
.cxp-val{display:flex;align-items:baseline;gap:.4em;font-size:.74em;color:var(--mut)}.cxp-val b{font:800 2em Inter,sans-serif;color:var(--g);line-height:1}
.cxp-slider{direction:ltr;padding:.3em .2em 0}
.cxp-rail{position:relative;display:block;height:.28em;border-radius:1em;background:rgba(255,255,255,.08)}
.cxp-knob{position:absolute;left:28.6%;top:50%;width:1.15em;height:1.15em;margin:-.575em 0 0 -.575em;border-radius:50%;background:#e8fff1;box-shadow:0 0 0 .2em var(--g),0 0 1em rgba(62,224,138,.8)}
.cxp-ticks{display:flex;justify-content:space-between;margin-top:.7em;font:500 .62em Inter,sans-serif;color:var(--mut)}
.cxp-note{font-size:.66em;color:var(--mut)}
.cxp-go,.cxp-apply{display:flex;align-items:center;justify-content:center;gap:.55em;font-weight:800;border-radius:.95em;color:#effcf4;
  border:1px solid rgba(62,224,138,.75);background:linear-gradient(180deg,#2a7a50,#164a31);box-shadow:0 .5em 1.6em -0.6em rgba(62,224,138,.55),0 1px 0 rgba(255,255,255,.12) inset}
.cxp-go{margin:.7em .8em 0;padding:.65em;font-size:.92em}
.cxp-sec.ready{border-color:rgba(62,224,138,.35);background:linear-gradient(180deg,rgba(62,224,138,.06),rgba(62,224,138,.015));margin-bottom:.9em}
.cxp-ok{color:var(--g);display:flex}.cxp-ok svg{width:1.5em;height:1.5em}
.cxp-count{font:700 .74em Inter,sans-serif;color:var(--g);background:rgba(62,224,138,.12);border-radius:99em;padding:.15em .7em}
.cxp-apply{padding:.55em;font-size:.78em}
.cxp-pair{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.cxp-pair span{display:flex;align-items:center;justify-content:center;gap:.45em;padding:.5em;border-radius:.85em;border:1px solid rgba(255,255,255,.1);font-size:.74em;font-weight:700;color:#d6e3db}
@media(prefers-reduced-motion:reduce){.cx-case{transition:none}}

/* ===== Product page layout (product.html renderPage, driven by p.page) ===== */
.pp-hero{position:relative;z-index:1;text-align:center;overflow-x:clip;min-height:min(100svh,980px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--dock-safe-top) + 20px) 16px 90px}
.pp-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/72px 72px;
  -webkit-mask:radial-gradient(70% 60% at 50% 50%,#000 30%,transparent 80%);mask:radial-gradient(70% 60% at 50% 50%,#000 30%,transparent 80%)}
.pp-title{margin:0 auto;font-size:clamp(3rem,9vw,7.6rem);font-weight:900;line-height:1.08;letter-spacing:-.03em}
.pp-title>span{display:block;background:linear-gradient(180deg,#fff,rgba(255,255,255,.82));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
/* dim words use a solid grey: a see-through colour paints the overlapping Arabic joins twice and shows seams */
.pp-title .dim{background:none;-webkit-text-fill-color:currentColor;color:#8b928e}
.pp-caret{display:inline-block;width:.06em;height:.82em;margin-inline-start:.08em;vertical-align:-.06em;background:#4ee08a;box-shadow:0 0 18px #4ee08a;animation:ppCaret 1.1s steps(1) infinite}
@keyframes ppCaret{50%{opacity:0}}
.pp-cta{display:flex;flex-direction:column;align-items:center;gap:16px}
.pp-btn{box-shadow:0 0 0 1px rgba(78,224,138,.4),0 14px 40px -10px rgba(78,224,138,.6)}
.pp-fine{color:rgba(255,255,255,.48);font-size:.88rem;margin:0}
.pp-fine.center{text-align:center;max-width:640px;margin:22px auto 0}
.pp-sec{position:relative;padding:110px 16px}
.pp-head{text-align:center;max-width:760px;margin:0 auto 52px}
.pp-head h2{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin:0 0 12px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.62));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.pp-head p{margin:0;color:rgba(255,255,255,.6);font-size:1.05rem}
/* feature cards */
.pp-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pp-feat{border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.pp-media{position:relative;aspect-ratio:772/484;background:#070b09;border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden}
.pp-media video,.pp-media img{width:100%;height:100%;object-fit:cover;display:block}
.pp-fbody{padding:22px 22px 26px}
/* a wide card: the whole flow on screen (spans the grid, clip beside the text) */
.pp-feat.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:center}
.pp-feat.wide .pp-media{border-bottom:0;border-inline-end:1px solid rgba(255,255,255,.06)}
.pp-feat.wide .pp-fbody{padding:34px}
.pp-feat.wide h3{font-size:1.45rem}
.pp-chap{position:absolute;top:14px;left:14px;right:14px;z-index:2;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;pointer-events:none}
.pp-chap span{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;font-size:.9rem;font-weight:700;color:rgba(255,255,255,.75);
  background:rgba(5,10,7,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:color .3s,background .3s,border-color .3s,transform .3s}
.pp-chap b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:800 .75rem Inter,sans-serif;background:rgba(255,255,255,.12);color:#fff}
.pp-chap i{font-style:normal}
.pp-chap span.on{color:#04140d;background:#4ee08a;border-color:#4ee08a;transform:scale(1.06);box-shadow:0 0 24px rgba(78,224,138,.5)}
.pp-chap span.on b{background:#04140d;color:#4ee08a}
@media(max-width:640px){.pp-chap{top:8px;left:8px;right:8px;gap:5px}.pp-chap span{font-size:.72rem;padding:5px 10px 5px 6px}.pp-chap b{width:18px;height:18px}}
@media(max-width:900px){.pp-feat.wide{grid-template-columns:1fr}.pp-feat.wide .pp-media{border-inline-end:0;border-bottom:1px solid rgba(255,255,255,.06)}.pp-feat.wide .pp-fbody{padding:22px 22px 26px}}
.pp-fbody h3{display:flex;align-items:center;gap:12px;font-size:1.12rem;font-weight:800;margin:0 0 14px;line-height:1.35}
.pp-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:rgba(78,224,138,.1);border:1px solid rgba(78,224,138,.3);color:#7dffb5}
.pp-ic svg{width:19px;height:19px}
.pp-fbody ul,.pp-plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pp-fbody li,.pp-plan li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.55}
.pp-fbody li i,.pp-plan li i{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(78,224,138,.16);color:#4ee08a}
.pp-fbody li svg,.pp-plan li svg{width:13px;height:13px}
.pp-down{position:absolute;bottom:34px;left:50%;translate:-50% 0;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);transition:color .3s,border-color .3s}
.pp-down:hover{color:#4ee08a;border-color:rgba(78,224,138,.5)}
.pp-sec.tight{padding-top:40px}
/* steps: one strip, three columns */
.pp-steps{display:grid;grid-template-columns:repeat(3,1fr);max-width:1200px;margin:0 auto;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.pp-step{display:flex;flex-direction:column}
.pp-sbody{padding:26px 28px 30px}
.pp-step+.pp-step{border-inline-start:1px solid rgba(255,255,255,.08)}
.pp-n{display:block;font:800 .9rem Inter,sans-serif;color:#4ee08a;letter-spacing:.08em;margin-bottom:14px}
.pp-step h3{font-size:1.25rem;font-weight:800;margin:0 0 6px}
.pp-step p{margin:0;color:rgba(255,255,255,.6);font-size:.95rem}
/* reviews: the real screenshots */
/* the screenshots are pictures, so the slider runs left-to-right in both languages: the right arrow (and a swipe left) always means next */
.pp-slider{position:relative;max-width:1200px;margin:0 auto;direction:ltr}
/* the view clips (it is not a scroll box, so the wheel always scrolls the page); the track moves by transform */
.pp-view{overflow:clip;touch-action:pan-y;border-radius:22px}
.pp-view:focus-visible{outline:2px solid rgba(78,224,138,.5);outline-offset:6px}
.pp-track{display:flex;gap:18px;transition:transform .7s cubic-bezier(.22,.8,.24,1);will-change:transform}
.pp-track.dragging{transition:none}
.pp-rev{flex:0 0 calc((100% - 18px) / 2);margin:0;height:320px;display:grid;place-items:center;padding:14px;border-radius:22px;
  border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));user-select:none}
.pp-rev img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;pointer-events:none}
.pp-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.pp-arrow{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;cursor:pointer;color:#e9f5ee;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);transition:border-color .3s,color .3s,background .3s,opacity .3s}
.pp-arrow:hover:not(:disabled){color:#4ee08a;border-color:rgba(78,224,138,.5);background:rgba(78,224,138,.06)}
.pp-arrow:disabled{opacity:.3;cursor:default}
.pp-arrow[data-dir="-1"] svg{transform:scaleX(-1)}
.pp-count{font:600 .9rem Inter,sans-serif;color:rgba(255,255,255,.5);min-width:64px;text-align:center;direction:ltr}
.pp-count b{color:#fff}
@media(max-width:640px){.pp-rev{flex-basis:100%;height:240px}.pp-arrow{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.pp-track{transition:none}}
/* plan */
.pp-plan{position:relative;max-width:520px;margin:0 auto;padding:36px 32px 32px;border-radius:30px;
  background:linear-gradient(180deg,rgba(78,224,138,.12),rgba(78,224,138,.02) 45%),rgba(8,14,11,.9);border:1px solid rgba(78,224,138,.45);box-shadow:0 0 80px rgba(78,224,138,.14),0 40px 80px -30px rgba(0,0,0,.9)}
.pp-plan-badge{display:inline-block;padding:5px 14px;border-radius:999px;font-size:.8rem;font-weight:800;color:#04140d;background:#4ee08a;margin-bottom:18px}
.pp-amount{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pp-amount b{font:900 clamp(3.2rem,8vw,4.4rem)/1 Inter,sans-serif;letter-spacing:-.03em}
.pp-amount span{font-size:1.2rem;font-weight:800;color:rgba(255,255,255,.8)}
.pp-amount s{color:rgba(255,255,255,.4);font-size:1.1rem}
.pp-plan-note{margin:8px 0 24px;color:rgba(255,255,255,.62)}
.pp-plan ul{margin-bottom:28px}
/* faq */
.pp-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.pp-faq>h2{font-size:clamp(2rem,4vw,3.4rem);font-weight:900;line-height:1.08;letter-spacing:-.03em;margin:0;position:sticky;top:120px}
.pp-faq>div{display:flex;flex-direction:column;gap:12px}
.pp-faq .pp-fine{margin-top:12px}
/* closing */
.pp-end{position:relative;text-align:center;padding:120px 16px 60px}
.pp-end h2{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:900;line-height:1.08;letter-spacing:-.03em;margin:0 0 36px}
.pp-end .dim{color:#8b928e}
@media(max-width:980px){.pp-feats{grid-template-columns:repeat(2,1fr)}.pp-faq{grid-template-columns:1fr}.pp-faq>h2{position:static;text-align:center}}
@media(max-width:640px){.pp-feats{grid-template-columns:1fr}.pp-steps{grid-template-columns:1fr}.pp-step+.pp-step{border-inline-start:0;border-top:1px solid rgba(255,255,255,.08)}.pp-sec{padding:80px 16px}.pp-plan{padding:28px 20px 22px}}
@media(prefers-reduced-motion:reduce){.pp-caret{animation:none}}

/* ===== Arabic typesetting: tracking breaks the letter joins, uppercase means nothing, and the script needs vertical room ===== */
html[lang=ar] body *{letter-spacing:0!important;text-transform:none!important}
html[lang=ar] :is(h1,h2,.hero-title,.page-title,.zz-heading,.ps-title,.pp-title,.pp-end h2,.pp-faq>h2){line-height:1.3}
html[lang=ar] h3{line-height:1.45}
html[lang=ar] :is(.pp-title,.pp-head h2,.sec-head h2,.ps-title)>span,html[lang=ar] :is(.pp-head h2,.sec-head h2){padding-bottom:.12em}

/* ===== Buying: checkout sheet, sticky bar, mid-page buttons, reassurance, bundle, cross-sell (assets/js/checkout.js) ===== */
.pp-mid{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:44px}
.pp-assure{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:16px;font-size:.84rem;color:rgba(255,255,255,.62)}
.pp-assure span{display:inline-flex;align-items:center;gap:6px}
.pp-assure span::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ee08a;box-shadow:0 0 8px rgba(78,224,138,.6)}
.pp-plan .pp-assure{justify-content:flex-start}
.pp-bundle-link{display:block;text-align:center;margin-top:18px;color:#7dffb5;font-weight:700;font-size:.95rem}
.pp-bundle-link:hover{text-decoration:underline}
/* bundle card */
.pp-bundle{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;max-width:1100px;margin:40px auto 0;padding:30px 34px;border-radius:28px;
  background:linear-gradient(120deg,rgba(78,224,138,.14),rgba(78,224,138,.03) 50%),rgba(8,14,11,.92);border:1px solid rgba(78,224,138,.45);box-shadow:0 0 70px rgba(78,224,138,.12),0 30px 60px -30px rgba(0,0,0,.9)}
.pp-bundle-icons{display:flex}
.pp-bundle-icons img{width:58px;height:58px;border-radius:16px;border:2px solid #0b130f;background:#0b130f}
.pp-bundle-icons img+img{margin-inline-start:-14px}
.pp-bundle-kicker{display:inline-block;font-size:.78rem;font-weight:800;color:#04140d;background:#4ee08a;border-radius:999px;padding:3px 12px;margin-bottom:8px}
.pp-bundle h3{font-size:1.5rem;font-weight:800;margin:0 0 4px}
.pp-bundle p{margin:0;color:rgba(255,255,255,.66)}
.pp-bundle-buy{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:200px}
.pp-bundle-price b{font:900 2.2rem/1 Inter,sans-serif}
.pp-bundle-price s{color:rgba(255,255,255,.4);margin-inline-start:6px}
.pp-bundle-save{font-size:.85rem;font-weight:800;color:#7dffb5}
@media(max-width:860px){.pp-bundle{grid-template-columns:1fr;text-align:center;justify-items:center;padding:26px 20px}}
.sec.tight{padding-top:0}
/* cross-sell */
.pp-xsell{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1100px;margin:0 auto}
.pp-xcard{display:flex;gap:18px;align-items:flex-start;padding:24px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);transition:border-color .3s,transform .3s}
.pp-xcard:hover{border-color:rgba(78,224,138,.45);transform:translateY(-3px)}
.pp-xcard img{width:52px;height:52px;border-radius:14px;flex:none}
.pp-xcard h3{margin:0 0 6px;font-size:1.2rem;font-weight:800}
.pp-xcard p{margin:0 0 10px;color:rgba(255,255,255,.7)}
.pp-xmore{color:#7dffb5;font-weight:700;font-size:.92rem}
@media(max-width:760px){.pp-xsell{grid-template-columns:1fr}}
/* sticky buy bar */
.pp-sticky{position:fixed;left:50%;bottom:16px;z-index:60;display:flex;align-items:center;gap:16px;padding:10px 10px 10px 20px;width:min(760px,calc(100% - 24px));
  border-radius:20px;background:rgba(6,11,8,.86);border:1px solid rgba(78,224,138,.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.6);transform:translate(-50%,140%);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pp-sticky.on{transform:translate(-50%,0)}
.pp-sticky>div{flex:1;min-width:0;display:flex;flex-direction:column}
.pp-sticky strong{font-weight:800}
.pp-sticky span{font-size:.82rem;color:rgba(255,255,255,.6)}
.pp-sticky i{font-style:normal}
.pp-sticky .btn{padding:12px 22px;white-space:nowrap}
.pp-sticky-bundle{font-size:.85rem;font-weight:700;color:#7dffb5;white-space:nowrap}
@media(max-width:560px){.pp-sticky{bottom:10px;padding:8px 8px 8px 14px;gap:10px}.pp-sticky-bundle{display:none}.pp-sticky .btn{padding:11px 16px;font-size:.85rem}}
/* checkout sheet */
.co-lock,.co-lock body{overflow:hidden}
.co{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 16px}
.co-back{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.co-sheet{position:relative;width:min(640px,100%);padding:34px 30px 30px;border-radius:28px;background:#0a110d;border:1px solid rgba(78,224,138,.3);box-shadow:0 40px 100px rgba(0,0,0,.8);
  opacity:0;transform:translateY(24px);transition:opacity .25s,transform .35s cubic-bezier(.16,1,.3,1);outline:none}
.co.in .co-back{opacity:1}.co.in .co-sheet{opacity:1;transform:none}
.co-x{position:absolute;top:14px;inset-inline-end:14px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer}
.co-h{font-size:1.7rem;font-weight:900;margin:0 0 6px}
.co-p{margin:0 0 22px;color:rgba(255,255,255,.64)}
.co-label{font-weight:800;margin:22px 0 10px}
.co-pkgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.co-pkg{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px 14px;border-radius:18px;cursor:pointer;color:#fff;font:inherit;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);transition:border-color .2s,background .2s}
.co-pkg img{width:34px;height:34px;border-radius:10px;margin-bottom:4px}
.co-pkg strong{font-weight:800}
.co-pkg small{color:rgba(255,255,255,.55);font-size:.78rem}
.co-pkg em{font-style:normal;font:800 1.15rem Inter,'IBM Plex Sans Arabic',sans-serif;color:#7dffb5;margin-top:4px}
.co-pkg em i{font-style:normal;font-size:.8rem}
.co-pkg em s{font-size:.8rem;color:rgba(255,255,255,.4);font-weight:600}
.co-pkg.bundle{background:rgba(78,224,138,.07);border-color:rgba(78,224,138,.35)}
.co-pkg.on{border-color:#4ee08a;box-shadow:0 0 0 1px #4ee08a inset,0 0 26px rgba(78,224,138,.25)}
.co-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:800;color:#04140d;background:#4ee08a;border-radius:999px;padding:2px 10px;white-space:nowrap}
.co-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(78,224,138,.06);border:1px dashed rgba(78,224,138,.35);font-size:.9rem}
.co-hint[hidden]{display:none}
.co-swap{border:0;background:none;color:#7dffb5;font:inherit;font-weight:800;cursor:pointer;padding:0}
.co-amount{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:16px;padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.co-amount span{color:rgba(255,255,255,.6);font-size:.88rem}
.co-amount b{font:900 2.2rem/1.1 Inter,sans-serif;color:#4ee08a}
.co-amount b i{font-style:normal;font-size:1rem}
.co-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.co-tabs button{padding:11px;border-radius:12px;border:0;background:none;color:rgba(255,255,255,.7);font:inherit;font-weight:800;cursor:pointer}
.co-tabs button.on{background:#4ee08a;color:#04140d}
.co-how{margin-top:12px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.co-steps{margin:0 0 14px;padding-inline-start:20px;color:rgba(255,255,255,.8);line-height:1.9}
.co-num{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid rgba(78,224,138,.3)}
.co-num span{color:rgba(255,255,255,.6);font-size:.88rem}
.co-num b{font:800 1.35rem Inter,sans-serif;letter-spacing:.04em!important;color:#fff;flex:1}
.co-copy{padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.co-form{display:flex;flex-direction:column;gap:12px}
.co-form label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:rgba(255,255,255,.75)}
.co-form input:not([type=checkbox]){padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:1rem}
.co-form input:focus{outline:none;border-color:#4ee08a}
.co-file-wrap{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:rgba(255,255,255,.75)}
.co-form .co-file{flex-direction:row;align-items:center;gap:14px;padding:14px;border-radius:14px;border:1.5px dashed rgba(78,224,138,.45);background:rgba(78,224,138,.05);cursor:pointer;transition:border-color .2s,background .2s}
.co-form .co-file:hover{border-color:#4ee08a;background:rgba(78,224,138,.09)}
.co-file.has{border-style:solid}
.co-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.co-file:focus-within{outline:2px solid #4ee08a;outline-offset:2px}
.co-file::before{content:"";flex:none;width:44px;height:44px;border-radius:12px;background:rgba(78,224,138,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ee08a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E") center/22px no-repeat}
.co-file.has::before{display:none}
.co-file-img{flex:none;width:44px;height:58px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.15)}
.co-file-img[hidden]{display:none}
.co-file-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.co-file-txt b{color:#fff;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-file-txt small{color:rgba(255,255,255,.5);font-size:.8rem}
.co-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.co-fail{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:rgba(255,138,149,.07);border:1px solid rgba(255,138,149,.35)}
.co-fail[hidden]{display:none}
.co-fail p{margin:0;color:#ffc2c8;font-size:.9rem}
.co-send[disabled]{opacity:.6;pointer-events:none}
.co-err{margin:0;color:#ff8a95;font-size:.88rem}
.co-note{margin:0;color:rgba(255,255,255,.55);font-size:.84rem;text-align:center}
@media(max-width:560px){.co{padding:16px 10px}.co-sheet{padding:26px 18px 22px}.co-h{font-size:1.4rem}}
.co-holder{margin:10px 0 0;font-size:.88rem;color:rgba(255,255,255,.6)}
.co-holder b{color:#fff;font-weight:800}
.co[hidden],.co-form[hidden],.co-ok[hidden]{display:none}
.co-ok{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin-top:22px;padding:26px 20px;border-radius:20px;background:rgba(78,224,138,.07);border:1px solid rgba(78,224,138,.4)}
.co-ok-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#4ee08a;color:#04140d;font:900 1.6rem Inter,sans-serif;box-shadow:0 0 30px rgba(78,224,138,.5)}
.co-ok h3{margin:0;font-size:1.3rem;font-weight:900}
.co-ok p{margin:0;color:rgba(255,255,255,.7)}
.co-ok .co-ok-mail{color:#fff;font-weight:700;font-family:Inter,sans-serif;word-break:break-all}
.co-ok .co-ok-id{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.3)}
.co-ok-id b{font:800 1.05rem Inter,sans-serif;color:#7dffb5;letter-spacing:.04em}
.co-ok .co-ok-spam{font-size:.82rem;color:rgba(255,255,255,.5)}
.co-ok-wa{color:#7dffb5;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.co-ok-close{margin-top:4px}
.co.sent .co-sheet>:not(.co-ok):not(.co-x){display:none}
.co-pkg.bundle:last-child:nth-child(odd){grid-column:1/-1}   /* two plugins + the bundle: it takes the whole row */
.co-amount s{font-size:1rem;color:rgba(255,255,255,.4);font-weight:600;margin-inline-start:6px}
.co-off{margin:6px 0 0;font-size:.86rem;font-weight:700;color:#7dffb5}
.co-off[hidden]{display:none}
.co-amount .co-off b{display:inline;font:700 .9rem Inter,sans-serif;color:#7dffb5;letter-spacing:.04em}
.co-code{margin:10px 0 4px;font-size:.88rem}
.co-code[hidden]{display:none}
.co-code summary{cursor:pointer;color:rgba(255,255,255,.6);font-weight:600;list-style:none;width:max-content}
.co-code summary::-webkit-details-marker{display:none}
.co-code summary:hover{color:#fff}
.co-code-row{display:flex;gap:8px;margin-top:8px}
.co-code-row input{flex:1;min-width:0;padding:11px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font:600 .95rem Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.co-code-row input:focus{outline:none;border-color:#4ee08a}
.co-code-go{padding:0 18px;border-radius:12px;border:1px solid #4ee08a;background:rgba(78,224,138,.1);color:#4ee08a;font:inherit;font-weight:700;cursor:pointer}
.co-code-err{margin:6px 0 0;color:#ff8a95;font-size:.84rem}
.co-code-err[hidden]{display:none}
.co.sent .co-ok{margin-top:8px}
.f-more{display:block;text-align:center;margin-top:12px;color:#7dffb5;font-weight:700;font-size:.92rem}
.f-more:hover{text-decoration:underline}
.card-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:4px 0 16px}
.card-price b{font:900 1.6rem Inter,sans-serif;color:#fff}
.card-price span{font-weight:700;color:rgba(255,255,255,.8)}
.card-price s{color:rgba(255,255,255,.4)}
.card-price em{font-style:normal;font-size:.75rem;font-weight:800;color:#04140d;background:#4ee08a;border-radius:999px;padding:2px 9px}
/* ===== Offer bar + countdowns (assets/js/checkout.js; end date in XP_CONTENT.pay.offer) ===== */
.offer-bar{position:fixed;top:0;left:0;right:0;z-index:9998;display:flex;align-items:center;justify-content:center;height:34px;padding:0 40px;
  background:rgba(6,14,10,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(78,224,138,.18)}
.offer-bar[hidden]{display:none}
.ob-link{display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;color:rgba(255,255,255,.82);font-size:.8rem;font-weight:600}
.ob-txt{color:#fff;font-weight:700}
.ob-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.35)}
.ob-left{display:inline-flex;align-items:center;gap:6px}
.ob-time{font:700 .8rem Inter,sans-serif;color:var(--accent);font-variant-numeric:tabular-nums}
.ob-cta{color:var(--accent);font-weight:700;border-bottom:1px solid rgba(78,224,138,.4);margin-inline-start:4px}
.ob-link:hover .ob-cta{border-color:var(--accent)}
.ob-x{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;border:0;background:transparent;color:rgba(255,255,255,.45);font-size:1.05rem;line-height:1;cursor:pointer}
.ob-x:hover{color:#fff;background:rgba(255,255,255,.08)}
:root.has-offer{--dock-safe-top:calc(96px + var(--ob-h, 34px))}
.has-offer .dock-wrap{top:calc(var(--ob-h, 34px) + 10px)}
@media(max-width:640px){.offer-bar{padding:0 10px;padding-inline-end:36px}.ob-link{gap:7px;font-size:.74rem}.ob-time{font-size:.74rem}.ob-lbl,.ob-cta{display:none}}
[data-countdown][hidden]{display:none}
.pp-cd,.co-cd{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:2px 0 16px}
.co-cd{align-items:center;margin:12px 0 0}
.cd-label{font-size:.85rem;font-weight:700;color:#ff9aa3}
.cd-boxes{display:flex;gap:6px}
:root[dir=rtl] .cd-boxes{flex-direction:row-reverse}
.cd-box{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:6px 4px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1)}
.cd-box b{font:800 1.25rem/1 Inter,sans-serif;color:#fff}
.cd-box i{font-style:normal;font-size:.66rem;color:rgba(255,255,255,.55);margin-top:3px}