*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI', Tahoma, sans-serif;background:linear-gradient(135deg, #0f0c29, #302b63, #24243e);min-height:100vh;padding:40px 20px}
.header{text-align:center;margin-bottom:50px}
.header .logo{font-size:42px;font-weight:900;background:linear-gradient(135deg,#43cea2,#185a9d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px}
.header .subtitle{color:#b0b0d0;font-size:18px;letter-spacing:1px}

.toggle-container{display:flex;justify-content:center;align-items:center;gap:15px;margin-bottom:50px}
.toggle-label{color:#b0b0d0;font-size:16px;font-weight:600}
.toggle-label.active{color:white;font-weight:700}
.toggle-switch{position:relative;width:60px;height:30px;background:#43cea2;border-radius:30px;cursor:pointer;transition:0.3s}
.toggle-switch::after{content:'';position:absolute;width:24px;height:24px;border-radius:50%;background:white;top:3px;left:3px;transition:0.3s}
.toggle-switch.yearly::after{left:33px}
.badge-save{background:#ff6b6b;color:white;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700}

.pg{display:grid;grid-template-columns:repeat(4, 1fr);gap:25px;max-width:1200px;margin:0 auto}

.pc{background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:35px 25px;text-align:center;transition:0.4s;position:relative;overflow:hidden}
.pc:hover{transform:translateY(-10px);border-color:rgba(255,255,255,0.3);box-shadow:0 20px 50px rgba(0,0,0,0.3)}

.pc.featured{background:rgba(67,206,162,0.1);border:2px solid #43cea2;transform:scale(1.05)}
.pc.featured:hover{transform:scale(1.05) translateY(-10px)}
.pc.featured::before{content:'👑 الأكثر اختياراً';position:absolute;top:15px;left:-30px;background:linear-gradient(135deg, #ffd700, #ffaa00);color:#333;padding:6px 40px;font-size:12px;font-weight:700;transform:rotate(-45deg)}

.pn{font-size:22px;font-weight:800;color:white;margin-bottom:5px}
.pd{font-size:13px;color:#8888aa;margin-bottom:25px}

.pr{margin-bottom:25px;direction:rtl;unicode-bidi:bidi-override}
.pr .c{font-size:20px;color:#8888aa;vertical-align:top}
.pr .amount{font-size:55px;font-weight:900;color:white;line-height:1}
.pr .period{font-size:14px;color:#8888aa}
.pr .old-price{text-decoration:line-through;color:#ff6b6b;font-size:14px;margin-top:5px}

.features{list-style:none;text-align:right;margin-bottom:30px}
.features li{padding:10px 0;color:#c0c0d0;font-size:14px;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;gap:10px}
.features li:last-child{border-bottom:none}
.features .ic{font-size:16px;min-width:24px;text-align:center}
.i{color:#43cea2}
.ir{color:#ff5252}
.is{color:#ffd700}

.btn-subscribe{width:100%;padding:14px;border:2px solid rgba(255,255,255,0.2);border-radius:12px;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:0.3s;color:white;background:transparent}
.btn-subscribe:hover{background:rgba(255,255,255,0.1);border-color:white}

.pc.featured .btn-subscribe{background:linear-gradient(135deg, #43cea2, #185a9d);border:none;color:white}
.pc.featured .btn-subscribe:hover{box-shadow:0 10px 30px rgba(67,206,162,0.3)}

.pc.free .amount{color:#43cea2}
.pc.free .btn-subscribe{background:rgba(67,206,162,0.2);border-color:#43cea2;color:#43cea2}

.gu{text-align:center;margin-top:50px;color:#8888aa;font-size:14px;display:flex;align-items:center;justify-content:center;gap:10px}
.gu .sh{font-size:24px}

@media (max-width:1000px){.pg{grid-template-columns:repeat(2, 1fr)} .pc.featured{transform:scale(1)}}
@media (max-width:600px){.pg{grid-template-columns:1fr} .header .logo{font-size:30px}}

@keyframes twinkle{0%, 100%{opacity:0.3}50%{opacity:1}}
.stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.s{position:absolute;color:white;animation:twinkle 2s infinite;font-size:10px}

.top-left{position:fixed;top:2;left:2}

.vid{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%}
.vid iframe{position:absolute;top:0;left:0;width:100%;height:100%}