/* ===== CYBER HACKED · subscription page and paid-room overview =====
   Same tokens as index.html, so both pages look like the rest of the site. */
:root{
  --bg:#0c1220; --bg2:#080d18; --nav:#151d2e; --panel:#172034; --panel2:#202b42; --panel3:#2c3a57;
  --line:rgba(148,178,220,.14); --line-strong:rgba(148,178,220,.28);
  --red:#ff4433; --red-t:#ff6a5c; --red-btn:#e02d1c; --red-hover:#f23f2d; --red-dim:rgba(255,68,51,.15);
  --blue:#4fc3ff; --green:#3fe08a; --green-dim:rgba(63,224,138,.13); --amber:#ffc23c;
  --text:#f2f5fa; --text-dim:#b4c1d4; --text-faint:#8797af;
  --ar:'IBM Plex Sans Arabic',sans-serif; --head:'Space Grotesk','IBM Plex Sans Arabic',sans-serif; --mono:'JetBrains Mono',monospace;
  --r:14px; --gutter:clamp(16px,3vw,40px);
}
*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--text); font-family:var(--ar); font-size:17px; line-height:1.8; direction:rtl; text-align:right; overflow-x:clip; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head); line-height:1.3; color:#fff}
a{color:var(--blue)}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}
.en{direction:ltr; unicode-bidi:isolate}
.wrap{max-width:1180px; margin:0 auto; padding-inline:var(--gutter)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:9px; font-weight:700; font-size:.95rem; text-decoration:none; transition:transform .15s, background .15s, border-color .15s, box-shadow .2s; white-space:nowrap; color:#fff}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-sm{padding:7px 14px; font-size:.86rem}
.btn-red{background:var(--red-btn)}
.btn-red:hover:not(:disabled){background:var(--red-hover); transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,68,51,.3)}
.btn-ghost{border:1.5px solid var(--line-strong); color:var(--text)}
.btn-ghost:hover{border-color:var(--text-dim); background:rgba(255,255,255,.04)}
.btn-wa{background:#1fa855} .btn-wa:hover{background:#25c062; transform:translateY(-2px)}

/* top bar */
.topbar{position:sticky; top:0; z-index:50; background:rgba(21,29,46,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(8px)}
.topbar-in{display:flex; align-items:center; gap:16px; min-height:66px; max-width:1180px; margin:0 auto; padding-inline:var(--gutter)}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; flex-shrink:0}
.mark{position:relative; display:block; width:44px; height:36px; overflow:hidden}
.mark img{position:absolute; width:60px; height:60px; left:-9px; top:-13px; mix-blend-mode:screen}
.brand-name{font-family:var(--head); font-weight:700; font-size:1.15rem; direction:ltr; color:#e8ecf2}
.brand-name i{color:var(--red); font-style:normal}
.pv-nav{display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap; margin-inline-start:auto; font-size:.9rem}
.pv-nav a:not(.btn){color:var(--text-dim); text-decoration:none}
.pv-nav a:not(.btn):hover{color:#fff}
@media(max-width:520px){ .brand-name{display:none} .pv-nav{gap:4px 12px; font-size:.84rem} }

/* paid-room overview */
.pv{padding-block:clamp(24px,4vw,48px) 60px}
.pv-hero{display:flex; gap:18px; align-items:flex-start; margin-bottom:24px}
.pv-ico{flex-shrink:0; width:72px; height:72px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:2.2rem; background:var(--panel2); border:1px solid var(--line-strong)}
.pv-k{display:block; font-family:var(--mono); font-size:.74rem; color:var(--red-t); letter-spacing:.08em}
.pv-hero h1{font-size:clamp(1.5rem,3.4vw,2.2rem); margin:2px 0 6px}
.pv-desc{color:var(--text-dim); max-width:760px}
.pv-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.pv-meta span{padding:2px 12px; border-radius:99px; font-size:.82rem; color:var(--text-dim); background:var(--panel2); border:1px solid var(--line)}
.pv-meta .paid{color:var(--amber); border-color:rgba(255,194,60,.4); background:rgba(255,194,60,.08)}
.pv-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:18px; align-items:start}
@media(max-width:900px){ .pv-grid{grid-template-columns:minmax(0,1fr)} .pv-hero{flex-direction:column} }
.pv-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-bottom:18px}
.pv-card h2{font-family:var(--ar); font-size:1.08rem; margin-bottom:12px}
.pv-goals{list-style:none; display:grid; gap:8px}
.pv-goals li{position:relative; padding-inline-start:26px; color:var(--text-dim)}
.pv-goals li::before{content:"✓"; position:absolute; right:0; color:var(--green); font-weight:700}
.pv-tasks{list-style:none; counter-reset:t; display:grid; gap:8px}
.pv-tasks li{counter-increment:t; display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; background:var(--bg2); border:1px solid var(--line); color:var(--text)}
.pv-tasks li::before{content:counter(t); flex-shrink:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 .8rem var(--mono); background:var(--panel2); color:var(--red-t)}
.pv-tasks li::after{content:"🔒"; margin-inline-start:auto; font-size:.8rem; opacity:.7}
.pv-small{font-size:.84rem; color:var(--text-faint); margin-top:12px}
.pv-buy{position:sticky; top:86px; display:flex; flex-direction:column; gap:10px; text-align:center; border-color:rgba(255,194,60,.4); box-shadow:0 0 40px -14px rgba(255,194,60,.35)}
.pv-lock{font-size:2rem}
.pv-buy h2{margin:0}
.pv-price{font-family:var(--mono); font-size:2.1rem; font-weight:700; color:#fff}
.pv-price small{font-size:.85rem; color:var(--text-faint); font-weight:500}
.pv-incl{list-style:none; text-align:right; display:grid; gap:6px; margin:4px 0 8px; font-size:.9rem; color:var(--text-dim)}
.pv-incl li::before{content:"✓ "; color:var(--green); font-weight:700}
.pv-msg{font-size:.88rem; padding:8px 10px; border-radius:8px; background:var(--panel2)}
.pv-msg.ok{color:var(--green)} .pv-msg.bad{color:var(--red-t)}
.pv-free{margin-top:8px; color:var(--text-dim); font-size:.95rem}

/* subscription page */
.sb-hero{text-align:center; padding:clamp(32px,6vw,72px) 0 26px}
.sb-k{display:inline-block; padding:4px 14px; border-radius:99px; background:var(--red-dim); color:var(--red-t); font-weight:700; font-size:.84rem; margin-bottom:12px}
.sb-hero h1{font-size:clamp(1.7rem,4.4vw,2.8rem)}
.sb-hero p{color:var(--text-dim); max-width:680px; margin:10px auto 0}
.sb-state{max-width:720px; margin:18px auto 0; padding:12px 16px; border-radius:12px; background:var(--green-dim); border:1px solid rgba(63,224,138,.35); color:var(--text); text-align:center}
.sb-plans{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:880px; margin:26px auto 0}
@media(max-width:720px){ .sb-plans{grid-template-columns:minmax(0,1fr); gap:26px} .sb-plan.main{order:-1} }
.sb-plan{position:relative; display:flex; flex-direction:column; gap:12px; padding:24px; border-radius:18px; background:var(--panel); border:1px solid var(--line)}
.sb-plan.main{border-color:rgba(255,68,51,.55); box-shadow:0 0 0 1px rgba(255,68,51,.18),0 24px 60px -24px rgba(255,68,51,.45); background:linear-gradient(180deg,rgba(255,68,51,.07),var(--panel) 40%)}
.sb-tag{position:absolute; top:-12px; left:20px; padding:2px 12px; border-radius:99px; background:var(--red-btn); color:#fff; font-size:.76rem; font-weight:700}
.sb-plan h2{font-family:var(--ar); font-size:1.2rem}
.sb-price{font-family:var(--mono); font-size:2.4rem; font-weight:700; color:#fff; line-height:1.1}
.sb-price small{font-size:.9rem; color:var(--text-faint); font-weight:500}
.sb-list{list-style:none; display:grid; gap:8px; color:var(--text-dim); font-size:.94rem; flex:1}
.sb-list li{display:flex; gap:9px; align-items:flex-start}
.sb-list li b{color:#fff}
.sb-list .y::before{content:"✓"; color:var(--green); font-weight:700}
.sb-list .n::before{content:"—"; color:var(--text-faint)}
.sb-acts{display:grid; gap:8px}
.sb-note{font-size:.82rem; color:var(--text-faint); text-align:center}
.sb-sec{max-width:880px; margin:46px auto 0}
.sb-sec > h2{font-family:var(--ar); font-size:1.3rem; margin-bottom:14px; text-align:center}
.sb-table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; font-size:.94rem}
.sb-table th,.sb-table td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:center}
.sb-table th:first-child,.sb-table td:first-child{text-align:right}
.sb-table thead th{background:var(--panel2); color:#fff}
.sb-table td{color:var(--text-dim)}
.sb-table .y{color:var(--green); font-weight:700} .sb-table .n{color:var(--text-faint)}
.sb-table tr:last-child td{border-bottom:0}
.sb-tbl-wrap{overflow-x:auto}
.sb-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; counter-reset:s}
@media(max-width:720px){ .sb-steps{grid-template-columns:minmax(0,1fr)} }
.sb-steps li{list-style:none; counter-increment:s; padding:18px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); color:var(--text-dim); font-size:.92rem}
.sb-steps li::before{content:counter(s); display:flex; width:32px; height:32px; border-radius:50%; align-items:center; justify-content:center; background:var(--red-dim); color:var(--red-t); font:700 .9rem var(--mono); margin-bottom:8px}
.sb-steps b{display:block; color:#fff; margin-bottom:2px}
.sb-faq details{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px}
.sb-faq summary{cursor:pointer; font-weight:700; color:#fff; list-style:none}
.sb-faq summary::after{content:"+"; float:left; color:var(--text-faint); font-family:var(--mono)}
.sb-faq details[open] summary::after{content:"−"}
.sb-faq p{color:var(--text-dim); margin-top:8px; font-size:.94rem}
.sb-final{max-width:880px; margin:46px auto 70px; padding:28px; border-radius:18px; text-align:center; background:linear-gradient(135deg,rgba(255,68,51,.12),var(--panel) 60%); border:1px solid rgba(255,68,51,.35)}
.sb-final h2{font-family:var(--ar); font-size:1.3rem}
.sb-final p{color:var(--text-dim); margin:6px 0 16px}
.sb-final .sb-acts{grid-template-columns:repeat(auto-fit,minmax(200px,max-content)); justify-content:center}
.hl-trial{animation:hlTrial 1.4s ease-in-out 3}
@keyframes hlTrial{50%{box-shadow:0 0 0 4px rgba(255,194,60,.55)}}
footer.sb-foot{padding:24px 0 40px; border-top:1px solid var(--line); text-align:center; color:var(--text-faint); font-size:.84rem}
@media (prefers-reduced-motion:reduce){ .hl-trial{animation:none} html{scroll-behavior:auto} }

/* ===== launch discount: old price struck through, new price, saving ===== */
.was{font-size:.5em; font-weight:500; color:var(--text-faint); text-decoration:line-through; text-decoration-color:rgba(255,68,51,.85); text-decoration-thickness:2px; margin-inline-end:6px; vertical-align:middle}
.now{color:#fff}
.sb-tag.promo,.promo-tag{background:linear-gradient(90deg,#ffc23c,#ffe39a); color:#2a1d00; box-shadow:0 0 18px rgba(255,194,60,.4)}
.sb-tag.promo{left:auto; right:20px; padding:3px 14px}
.sb-tag.promo .en{font-weight:700}
.promo-tag{align-self:center; display:inline-block; padding:3px 14px; border-radius:99px; font-size:.82rem; font-weight:700}
.promo-tag b{font-weight:800}
.promo-save{font-size:.86rem; color:var(--green); margin-top:-4px}
.promo-save .en{font-family:var(--mono); font-weight:700}

/* ===== pricing page v2: vivid offer banner, glowing plan cards, connector feature lists ===== */
.hx-banner{position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 28px; margin-top:clamp(18px,3vw,30px); padding:clamp(20px,3vw,30px) clamp(20px,3vw,34px); border-radius:24px; overflow:hidden;
  background:radial-gradient(600px 220px at 85% 0%,rgba(255,194,60,.35),transparent 60%),radial-gradient(500px 260px at 10% 100%,rgba(120,10,60,.9),transparent 70%),linear-gradient(115deg,#5a0b2c,#c8124f 45%,#ff4433);
  box-shadow:0 0 0 1px rgba(255,120,140,.35),0 30px 80px -30px rgba(255,40,90,.7)}
.hx-banner::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%); background-size:250% 100%; animation:hxSweep 6s ease-in-out infinite}
@keyframes hxSweep{0%{background-position:140% 0} 50%,100%{background-position:-40% 0}}
.hx-banner-txt{position:relative; z-index:1; flex:1 1 420px}
.hx-banner h1{font-family:var(--head); font-weight:700; line-height:1.15; font-size:clamp(1.5rem,3.6vw,2.5rem)}
.hx-l1{display:block; color:#ffd36a; text-shadow:0 2px 18px rgba(255,194,60,.45)}
.hx-l2{display:block; color:#fff}
.hx-banner p{position:relative; margin-top:10px; color:rgba(255,255,255,.85); font-size:.98rem}
.hx-banner p b{color:#fff} .hx-banner p s{color:rgba(255,255,255,.65)}
.hx-clock{position:relative; z-index:1; padding:12px; border-radius:16px; background:rgba(40,0,20,.35); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(4px)}
.hx-clock-h{font-size:.8rem; color:rgba(255,255,255,.85); margin:0 4px 8px}
.hx-clock-row{display:flex; gap:6px}
.hx-clock-row div{min-width:62px; padding:8px 6px; border-radius:12px; text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.16)}
.hx-clock-row b{display:block; font:700 1.6rem/1.1 var(--mono); color:#fff}
.hx-clock-row span{font-size:.72rem; color:rgba(255,255,255,.75)}

.hx-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin:clamp(30px,5vw,48px) 0 6px}
.hx-head h2{font-family:var(--head); font-size:clamp(1.4rem,3vw,2.1rem)}
.hx-head p{color:var(--text-dim); margin-top:4px}
.hx-head .sb-state{margin:0; max-width:none}

.hx-plans{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,28px); max-width:900px; margin:10px auto 0}
@media(max-width:760px){ .hx-plans{grid-template-columns:minmax(0,1fr)} #planMain{order:-1} }
.hx-ribbon{min-height:30px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:.84rem; color:var(--text-dim)}
.hx-ribbon b{color:#fff}
.hx-ribbon.ghost{visibility:hidden}
.hx-rt{color:#ffd36a; font-weight:700; font-family:var(--mono); font-size:.8rem}
@media(max-width:760px){ .hx-ribbon.ghost{display:none} }

.hx-card{position:relative; display:flex; flex-direction:column; gap:10px; padding:22px 20px 18px; border-radius:22px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),var(--panel); border:1px solid var(--line-strong); box-shadow:0 20px 50px -25px rgba(0,0,0,.8)}
.hx-card.hot{border-color:transparent; background:radial-gradient(420px 200px at 20% -10%,rgba(255,236,170,.55),transparent 60%),radial-gradient(380px 240px at 100% 110%,rgba(110,0,50,.55),transparent 70%),linear-gradient(150deg,#ff6a3d,#ff2e63 55%,#c3125a);
  box-shadow:0 0 0 1px rgba(255,160,170,.45),0 0 60px -10px rgba(255,60,100,.65),0 30px 70px -30px rgba(255,40,90,.8)}
.hx-name{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.hx-name h3{font-family:var(--head); font-size:2rem; line-height:1.1; color:#fff}
.hx-chip{padding:3px 11px; border-radius:99px; font-size:.76rem; font-weight:700; color:#fff; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3)}
.hx-for{color:var(--text-faint); font-size:.92rem; margin-top:-4px}
.hx-card.hot .hx-for{color:rgba(255,255,255,.85)}
.hx-price{display:flex; align-items:baseline; justify-content:flex-end; flex-direction:row-reverse; gap:8px; flex-wrap:wrap; margin:6px 0 4px}
.hx-price .now{font-family:var(--head); font-weight:700; font-size:2.6rem; line-height:1; color:#fff}
.hx-price small{font-size:.9rem; color:var(--text-faint)}
.hx-card.hot .hx-price small{color:rgba(255,255,255,.85)}
.hx-price .was{font-family:var(--head); font-size:1.7rem; font-weight:700; color:rgba(255,255,255,.55); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.9); text-decoration-thickness:3px; margin:0}
.hx-btn{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; min-height:48px; padding:10px 16px; border-radius:14px; background:#fff; color:#141a26; font-weight:700; font-size:1rem; text-decoration:none; transition:transform .15s, box-shadow .2s; border:0; cursor:pointer; width:100%}
.hx-btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(0,0,0,.55)}
.hx-btn.ghost{background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3)}
.hx-save{display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:99px; background:linear-gradient(90deg,#ff2e63,#ff4433); color:#fff; font-size:.8rem; font-weight:800}
.hx-save i{width:1px; height:12px; background:rgba(255,255,255,.55)}
.hx-note{font-size:.8rem; color:var(--text-faint); text-align:center}
.hx-card.hot .hx-note{color:rgba(255,255,255,.8)}

.hx-feats{list-style:none; margin:16px 6px 0; display:grid; gap:9px; font-size:.95rem}
.hx-feats li{display:flex; align-items:center; gap:10px; color:var(--text-dim)}
.hx-feats li b{color:#fff}
.hx-feats .main i{flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:.9rem; background:#fff; color:#141a26}
.hx-feats.hot .main i{background:#ff2e63; color:#fff}
.hx-feats.hot .main b{color:#ff8aa5}
.hx-feats .sub{position:relative; padding-inline-start:30px}
.hx-feats .sub::before{content:""; position:absolute; right:9px; top:-12px; width:12px; height:24px; border-right:1.5px solid var(--line-strong); border-bottom:1.5px solid var(--line-strong); border-bottom-right-radius:8px}
.hx-more{margin-top:16px; padding:14px 16px; border-radius:16px; background:var(--panel); border:1px solid var(--line)}
.hx-more-h{font-size:.85rem; color:var(--text-faint); margin-bottom:8px}
.hx-more ul{list-style:none; display:grid; gap:6px; font-size:.92rem; color:var(--text)}
.hx-more li::before{content:"✓ "; color:var(--text-faint)}
.hx-more.hot{background:linear-gradient(180deg,rgba(255,46,99,.16),rgba(255,46,99,.05)); border-color:rgba(255,46,99,.35)}
.hx-more.hot .hx-more-h{color:#ff8aa5; font-weight:700; font-size:.92rem}
.hx-more.hot p{color:var(--text-dim); font-size:.9rem; margin-bottom:10px}
.hx-more.hot p b{color:#fff}
@media (prefers-reduced-motion:reduce){ .hx-banner::after{animation:none} }
@media(max-width:520px){ .hx-clock{width:100%} .hx-clock-row div{flex:1; min-width:0} .hx-name h3{font-size:1.7rem} .hx-price .now{font-size:2.2rem} }
/* paid-room overview: the buy box is the same plan card as subscribe.html */
.pv-buy{gap:0; text-align:right; border:0; box-shadow:none; background:none; padding:0}
.pv-buy .hx-card{margin-top:4px}
.pv-buy .hx-note a{color:#fff; font-weight:700}
.hx-card.hot .pv-msg{background:rgba(0,0,0,.25); color:#fff}