*,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#06060b;--bg2:#0c0c14;--bg3:#12121c;--card:#161622;--card2:#1a1a2a; --accent:#7c6cf0;--accent2:#a78bfa;--accent3:#f59e0b;--accent4:#10b981;--accent5:#f43f5e; --t1:#f4f3f8;--t2:#b8b4c8;--t3:#7a7590; --border:rgba(124,108,240,.12);--border2:rgba(124,108,240,.25); --grad:linear-gradient(135deg,#7c6cf0,#a78bfa 40%,#f59e0b); --grad2:linear-gradient(135deg,#7c6cf0,#a78bfa); --r:14px;--rs:10px; --font:'Cairo',sans-serif;--font2:'Tajawal',sans-serif; } html{scroll-behavior:smooth;scroll-padding-top:80px} body{font-family:var(--font2);background:var(--bg);color:var(--t1);line-height:1.8;overflow-x:hidden} .c{max-width:1080px;margin:0 auto;padding:0 20px} .sec{padding:100px 0;position:relative} .sec-t{font-family:var(--font);font-size:clamp(1.5rem,4vw,2.15rem);font-weight:800;text-align:center;margin-bottom:14px;line-height:1.55} .sec-s{text-align:center;color:var(--t2);font-size:1rem;max-width:600px;margin:0 auto 48px;line-height:1.95} .gt{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* === ANIMATIONS === */ @keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes slideR{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}} @keyframes slideL{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}} @keyframes scaleIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(124,108,240,.4)}70%{box-shadow:0 0 0 16px rgba(124,108,240,0)}} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @keyframes glow{0%,100%{opacity:.4}50%{opacity:.8}} @keyframes countPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} @keyframes revealChar{from{opacity:0;transform:translateY(20px) rotateX(-40deg)}to{opacity:1;transform:translateY(0) rotateX(0)}} @keyframes lineGrow{from{width:0}to{width:100%}} @keyframes particle{0%{transform:translateY(0) scale(1);opacity:.6}100%{transform:translateY(-120vh) scale(0);opacity:0}} @keyframes borderGlow{0%,100%{border-color:rgba(124,108,240,.15)}50%{border-color:rgba(124,108,240,.4)}} @keyframes checkMark{from{stroke-dashoffset:24}to{stroke-dashoffset:0}} @keyframes ripple{0%{transform:scale(1);opacity:.3}100%{transform:scale(2.5);opacity:0}} .anim{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)} .anim.v{opacity:1;transform:translateY(0)} .anim-d1{transition-delay:.1s}.anim-d2{transition-delay:.2s}.anim-d3{transition-delay:.3s} .anim-d4{transition-delay:.4s}.anim-d5{transition-delay:.5s}.anim-d6{transition-delay:.6s} .anim-scale{opacity:0;transform:scale(.85);transition:opacity .7s ease,transform .7s ease} .anim-scale.v{opacity:1;transform:scale(1)} .anim-r{opacity:0;transform:translateX(50px);transition:opacity .8s ease,transform .8s ease} .anim-r.v{opacity:1;transform:translateX(0)} .anim-l{opacity:0;transform:translateX(-50px);transition:opacity .8s ease,transform .8s ease} .anim-l.v{opacity:1;transform:translateX(0)} /* === PARTICLES === */ .particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden} .particle{position:absolute;bottom:-20px;width:3px;height:3px;background:var(--accent);border-radius:50%;opacity:0;animation:particle linear infinite} /* === PROGRESS BAR === */ .progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--grad);z-index:10001;transition:width .15s linear;border-radius:0 0 2px 2px} /* === CTA BUTTON === */ .cta{display:inline-flex;align-items:center;gap:10px;padding:16px 44px;background:var(--grad);color:#fff;font-family:var(--font);font-size:1.1rem;font-weight:700;border:none;border-radius:50px;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;z-index:1} .cta::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:translateX(-100%);transition:transform .6s} .cta:hover::before{transform:translateX(100%)} .cta:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 32px rgba(124,108,240,.4)} .cta:active{transform:scale(.97)} .cta .ripple-circle{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);animation:ripple .6s ease-out forwards;pointer-events:none} .cta2{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:transparent;color:var(--t2);font-family:var(--font);font-size:.92rem;font-weight:600;border:1px solid var(--border);border-radius:50px;cursor:pointer;text-decoration:none;transition:all .3s} .cta2:hover{border-color:var(--accent2);color:var(--accent2);background:rgba(167,139,250,.04);transform:translateY(-2px)} /* === STICKY BAR === */ .sticky-bar{position:fixed;bottom:-80px;left:0;right:0;z-index:10000;background:rgba(6,6,11,.92);backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:12px 0;transition:bottom .5s cubic-bezier(.22,1,.36,1)} .sticky-bar.show{bottom:0} .sticky-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .sticky-info{display:flex;align-items:center;gap:16px;flex:1} .sticky-price{font-family:var(--font);font-weight:800;font-size:1.3rem} .sticky-price .old{text-decoration:line-through;color:var(--t3);font-size:.9rem;font-weight:400;margin-left:8px} .sticky-timer{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--accent3)} .sticky-timer svg{width:14px;height:14px} .sticky-bar .cta{padding:12px 32px;font-size:.95rem} /* === TOP BAR === */ .top-bar{background:linear-gradient(90deg,rgba(124,108,240,.08),rgba(245,158,11,.06));border-bottom:1px solid var(--border);padding:10px 0;overflow:hidden} .top-bar-inner{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;font-size:.82rem;color:var(--t2)} .top-badge{background:var(--grad);color:#fff;padding:3px 14px;border-radius:20px;font-weight:700;font-size:.75rem;font-family:var(--font);animation:pulse 2s infinite} .top-item{display:flex;align-items:center;gap:5px;white-space:nowrap} .top-item svg{width:13px;height:13px;flex-shrink:0;opacity:.7} /* === HERO === */ .hero{padding:70px 0 50px;min-height:92vh;display:flex;align-items:center;position:relative;overflow:hidden} .hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0} .hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.12;animation:float 8s ease-in-out infinite} .hero-orb-1{width:500px;height:500px;background:var(--accent);top:-120px;right:-80px;animation-delay:0s} .hero-orb-2{width:350px;height:350px;background:var(--accent3);bottom:-60px;left:-60px;animation-delay:2s} .hero-orb-3{width:250px;height:250px;background:var(--accent5);top:40%;left:50%;animation-delay:4s} .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(124,108,240,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(124,108,240,.03) 1px,transparent 1px);background-size:60px 60px;mask:radial-gradient(ellipse at center,black 30%,transparent 70%)} .hero-content{text-align:center;position:relative;z-index:2;max-width:860px;margin:0 auto} .hero h1{font-family:var(--font);font-size:clamp(1.7rem,5vw,2.75rem);font-weight:900;line-height:1.55; margin-bottom:22px;perspective:600px} .hero h1 .word{display:inline-block;opacity:0;transform:translateY(25px);animation:fadeUp .6s forwards}.hero h1 .gt,.hero h1 .gt .word{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .hero-sub{font-size:clamp(.95rem,2.5vw,1.1rem);color:var(--t2);max-width:680px;margin:0 auto 28px;line-height:2;opacity:0;animation:fadeUp .8s .8s forwards} .hero-chips{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:32px;opacity:0;animation:fadeUp .8s 1s forwards} .chip{display:flex;align-items:center;gap:7px;font-size:.88rem;color:var(--t2);background:rgba(124,108,240,.06);border:1px solid var(--border);padding:6px 16px;border-radius:30px;transition:all .3s} .chip:hover{border-color:var(--accent2);background:rgba(124,108,240,.1);transform:translateY(-2px)} .chip svg{width:16px;height:16px;color:var(--accent4);flex-shrink:0} .hero-ctas{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:44px;opacity:0;animation:fadeUp .8s 1.2s forwards} .hero-trust{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;opacity:0;animation:fadeUp .8s 1.4s forwards} .trust-box{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;background:var(--card);border:1px solid var(--border);border-radius:var(--rs);transition:all .4s;cursor:default} .trust-box:hover{border-color:var(--accent2);transform:translateY(-4px);box-shadow:0 8px 24px rgba(124,108,240,.1)} .trust-num{font-family:var(--font);font-size:1.2rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .trust-label{font-size:.72rem;color:var(--t3)} /* === COUNTDOWN === */ .countdown-sec{background:linear-gradient(135deg,rgba(244,63,94,.06),rgba(245,158,11,.04)); border-top:1px solid rgba(244,63,94,.1);border-bottom:1px solid rgba(244,63,94,.1);padding:18px 0} .countdown-inner{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap} .countdown-label{font-family:var(--font);font-weight:700;font-size:.92rem;color:var(--accent5)} .countdown-timer{display:flex;gap:8px} .cd-block{display:flex;flex-direction:column;align-items:center;background:var(--card);border:1px solid rgba(244,63,94,.15);border-radius:8px;padding:6px 12px;min-width:52px} .cd-num{font-family:var(--font);font-weight:800;font-size:1.2rem;color:var(--t1);line-height:1.2} .cd-txt{font-size:.6rem;color:var(--t3);text-transform:uppercase;letter-spacing:1px} .countdown-spots{font-size:.82rem;color:var(--accent3);display:flex;align-items:center;gap:6px} .countdown-spots .dot{width:6px;height:6px;background:var(--accent3);border-radius:50%;animation:pulse 1.5s infinite} /* === PROBLEM === */ .problem-sec{background:var(--bg2)} .problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;max-width:780px;margin:0 auto} .problem-item{display:flex;align-items:flex-start;gap:14px;padding:20px;background:var(--card); border:1px solid var(--border);border-radius:var(--rs);transition:all .4s;cursor:default} .problem-item:hover{border-color:rgba(245,158,11,.3);background:var(--card2);transform:translateX(6px)} .p-icon{width:38px;height:38px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.12);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .p-icon svg{width:18px;height:18px;color:var(--accent3)} .problem-item span{font-size:.92rem;color:var(--t2);line-height:1.8} /* === BEFORE/AFTER === */ .ba-wrap{max-width:820px;margin:0 auto;position:relative} .ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--border)} .ba-col{padding:32px 28px} .ba-before{background:rgba(244,63,94,.03);border-left:1px solid rgba(244,63,94,.08)} .ba-after{background:rgba(16,185,129,.03)} .ba-header{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-family:var(--font);font-weight:700;font-size:.95rem} .ba-before .ba-header{color:var(--accent5)} .ba-after .ba-header{color:var(--accent4)} .ba-header svg{width:18px;height:18px} .ba-list{list-style:none} .ba-list li{padding:9px 0;font-size:.9rem;color:var(--t2);display:flex;align-items:center;gap:10px;line-height:1.7;opacity:0 ;transition:opacity .5s,transform .5s} .ba-list li.v{opacity:1} .ba-before .ba-list li::before{content:'';width:18px;height:18px;border-radius:50%;background:rgba(244,63,94,.1);flex-shrink:0;display:flex;align-items:center;justify-content:center} .ba-after .ba-list li::before{content:'';width:18px;height:18px;border-radius:50%;background:rgba(16,185,129,.1);flex-shrink:0} .ba-before .ba-list li{transform:translateX(20px)} .ba-before .ba-list li.v{transform:translateX(0)} .ba-after .ba-list li{transform:translateX(-20px)} .ba-after .ba-list li.v{transform:translateX(0)} .ba-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:var(--bg);border:2px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:3;animation:pulse 2.5s infinite} .ba-arrow svg{width:20px;height:20px;color:var(--accent2)} /* === PROMISE === */ .promise-sec{background:var(--bg2)} .promise-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;max-width:820px;margin:0 auto} .promise-item{padding:24px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--rs);text-align:center;transition:all .4s;position:relative;overflow:hidden} .promise-item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transition:transform .4s;transform-origin:right} .promise-item:hover::before{transform:scaleX(1);transform-origin:left} .promise-item:hover{border-color:var(--accent2);transform:translateY(-5px);box-shadow:0 12px 32px rgba(124,108,240,.08)} .promise-num{font-family:var(--font);font-size:1.6rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px} .promise-item p{font-size:.88rem;color:var(--t2);line-height:1.7} /* === JOURNEY === */ .journey-steps{max-width:650px;margin:0 auto;position:relative} .journey-line{position:absolute;right:30px;top:50px;bottom:50px;width:2px;background:linear-gradient(180deg,var(--accent),var(--accent3));opacity:.2} .journey-step{display:flex;align-items:flex-start;gap:22px;padding:22px 0;position:relative} .step-circle{width:60px;height:60px;background:var(--card);border:2px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink: 0;position:relative;z-index:2;transition:all .4s} .step-circle span{font-family:var(--font);font-weight:800;font-size:1.1rem;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .journey-step:hover .step-circle{background:var(--accent);border-color:var(--accent);transform:scale(1.1);box-shadow:0 0 24px rgba(124,108,240,.3)} .journey-step:hover .step-circle span{-webkit-text-fill-color:#fff;background:none} .step-body h3{font-family:var(--font);font-weight:700;font-size:1.05rem;margin-bottom:4px;transition:color .3s} .journey-step:hover .step-body h3{color:var(--accent2)} .step-body p{font-size:.9rem;color:var(--t2);line-height:1.8} /* === EXAMPLES === */ .examples-sec{background:var(--bg2)} .examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;max-width:900px;margin:0 auto} .ex-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:all .4s;cursor:pointer;position:relative;text-decoration:none;color:inherit;display:block} .ex-card:hover{border-color:var(--accent2);transform:translateY(-6px);box-shadow:0 16px 48px rgba(124,108,240,.12)} .ex-thumb{height:155px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center} .ex-thumb::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,108,240,.12),rgba(245,158,11,.06))} .ex-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--card) 0%,transparent 40%)} .play-btn{width:48px;height:48px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;transition:all .3s} .ex-card:hover .play-btn{background:var(--accent);border-color:var(--accent);transform:scale(1.15)} .play-btn svg{width:18px;height:18px;color:#fff;margin-right:-2px} .ex-video-wrap{position:relative;width:100%;padding-top:177.78%;overflow:hidden;background:#000;border-radius:var(--r) var(--r) 0 0} .ex-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none} .ex-info{padding:14px 16px} .ex-badge{display:inline-block;padding:3px 10px;background:rgba(124,108,240,.08);color:var(--accent2);font-size:.72rem;font-weight:600;border-radius:16px;margin-bottom:6px} .ex-info p{font-size:.8rem;color:var(--t3)} .ex-label{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);color:#fff;font-size:.65rem;font-weight:600;padding:3px 10px;border-radius:12px;z-index:3} /* === COURSE OVERVIEW VIDEO === */ .overview-sec{background:var(--bg);position:relative;overflow:hidden} .overview-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center top,rgba(124,108,240,.06) 0%,transparent 60%);pointer-events:none} .overview-video-wrap{max-width:780px;margin:0 auto;position:relative;z-index:2} .overview-video-frame{position:relative;width:100%;padding-top:56.25%;border-radius:var(--r);overflow:hidden;border:2px solid var(--border);background:#000;box-shadow:0 24px 80px rgba(124,108,240,.12),0 0 0 1px rgba(124,108,240,.06);cursor:pointer;display:block;text-decoration:none;color:inherit} .overview-video-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none} .overview-video-frame::after{content:'';position:absolute;inset:0;border-radius:var(--r);pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)} .overview-glow{position:absolute;width:300px;height:300px;background:radial-gradient(circle,rgba(124,108,240,.15),transparent 70%);border-radius:50%;top:-80px;left:50%;transform:translateX(-50%);filter:blur(40px);pointer-events:none;animation:glow 4s ease-in-out infinite} .overview-features{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:32px} .overview-feat{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--t2);padding:8px 18px;background:var(--card);border:1px solid var(--border);border-radius:30px;transition:all .3s} .overview-feat:hover{border-color:var(--accent2);transform:translateY(-2px)} .overview-feat svg{width:16px;height:16px;color:var(--accent4);flex-shrink:0} /* === YOUTUBE THUMBNAIL PLAYER === */ .yt-link{display:block;text-decoration:none;color:inherit} .ex-video-wrap iframe,.overview-video-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:4;opacity:0;transition:opacity .4s} .ex-video-wrap iframe.loaded,.overview-video-frame iframe.loaded{opacity:1} .yt-fallback{position:absolute;inset:0;z-index:3;cursor:pointer;display:flex;align-items:center;justify-content:center} .yt-fallback.hidden{display:none} .yt-fallback-bg{position:absolute;inset:0} .yt-fb-overview{background:linear-gradient(135deg,#1a1040 0%,#0e0a24 40%,#14102a 100%)} .yt-fb-1{background:linear-gradient(135deg,#1a1040 0%,#0c0c14 100%)} .yt-fb-2{background:linear-gradient(135deg,#1a1a08 0%,#0c0c14 100%)} .yt-fb-3{background:linear-gradient(135deg,#081a10 0%,#0c0c14 100%)} .yt-fb-4{background:linear-gradient(135deg,#1a0808 0%,#0c0c14 100%)} .yt-fallback-overlay{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:100%;transition:background .3s} .yt-fallback:hover .yt-fallback-overlay{background:rgba(124,108,240,.06)} .yt-play-btn-big{width:68px;height:48px;transition:transform .3s;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))} .yt-play-btn-sm{width:50px;height:35px;transition:transform .3s;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))} .yt-fallback:hover .yt-play-btn-big,.yt-fallback:hover .yt-play-btn-sm{transform:scale(1.15)} .yt-fallback-text{font-family:var(--font);font-size:.82rem;font-weight:700;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4);backdrop-filter:blur(8px);padding:6px 18px;border-radius:20px} /* === CURRICULUM === */ .cur-list{max-width:680px;margin:0 auto} .cur-item{display:flex;align-items:flex-start;gap:18px;padding:22px;background:var(--card);border:1px solid var(--border);border-radius:var(--rs);margin-bottom:10px;transition:all .4s;cursor:default} .cur-item:hover{border-color:var(--accent);background:var(--card2);transform:translateX(8px)} .cur-num{font-family:var(--font);font-weight:900;font-size:1.3rem;color:var(--accent);opacity:.3;min-width:28px;transition:opacity .3s} .cur-item:hover .cur-num{opacity:1} .cur-item h3{font-family:var(--font);font-weight:700;font-size:.98rem;margin-bottom:3px} .cur-item p{font-size:.88rem;color:var(--t2);line-height:1.7} /* === AUDIENCE === */ .aud-sec{background:var(--bg2)} .aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;max-width:700px;margin:0 auto} .aud-item{padding:24px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--rs);text-align:center;transition:all .4s} .aud-item:hover{border-color:var(--accent2);transform:translateY(-4px);box-shadow:0 8px 24px rgba(124,108,240,.08)} .aud-icon{width:44px;height:44px;background:rgba(124,108,240,.08);border-radius:12px;display :flex;align-items:center;justify-content:center;margin:0 auto 10px} .aud-icon svg{width:22px;height:22px;color:var(--accent2)} .aud-item h3{font-family:var(--font);font-weight:700;font-size:.9rem} /* === NO NEED === */ .noneed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;max-width:720px;margin:0 auto} .noneed-item{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--rs);transition:all .3s} .noneed-item:hover{border-color:rgba(16,185,129,.2);transform:translateX(4px)} .noneed-icon{width:28px;height:28px;background:rgba(244,63,94,.06);border:1px solid rgba(244,63,94,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} .noneed-icon svg{width:12px;height:12px;color:var(--accent5)} .noneed-item span{font-size:.9rem;color:var(--t2);text-decoration:line-through;text-decoration-color:var(--accent5);text-decoration-thickness:1.5px} /* === SOCIAL PROOF === */ .sp-sec{background:var(--bg2);overflow:hidden} .stats-bar{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-bottom:48px} .stat{text-align:center} .stat-num{font-family:var(--font);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2} .stat-txt{font-size:.82rem;color:var(--t3);margin-top:4px} .testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;max-width:900px;margin:0 auto 36px} .test-card{padding:26px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);position:relative;transition:all .4s} .test-card:hover{border-color:var(--accent2);transform:translateY(-4px)} .test-card::before{content:'';position:absolute;top:0;right:24px;width:40px;height:3px;background: var(--grad);border-radius:0 0 4px 4px} .stars{color:var(--accent3);font-size:.78rem;letter-spacing:2px;margin-bottom:12px} .test-card p{font-size:.92rem;color:var(--t2);line-height:1.9;margin-bottom:16px} .test-author{display:flex;align-items:center;gap:10px} .test-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:700;font-size:.85rem;color:#fff;background:var(--grad)} .test-name{font-size:.85rem;font-weight:600} .test-meta{font-size:.72rem;color:var(--t3)} .test-result{display:inline-flex;align-items:center;gap:4px;background:rgba(16,185,129,.08);color:var(--accent4);font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:12px;margin-top:6px} .test-result svg{width:12px;height:12px} .countries{text-align:center;color:var(--t3);font-size:.85rem} /* === INSTRUCTOR === */ .instr-card{max-width:680px;margin:0 auto;display:flex;gap:28px;align-items:center;padding:36px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);transition:all .4s} .instr-card:hover{border-color:var(--accent2)} .instr-avatar{width:110px;height:110px;background:var(--grad);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:900;font-size:2.2rem;color:#fff;flex-shrink:0;position:relative} .instr-avatar::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);opacity:.3} .instr-info h3{font-family:var(--font);font-weight:800;font-size:1.25rem;margin-bottom:6px} .instr-info p{font-size:.9rem;color:var(--t2);line-height:1.8;margin-bottom:14px} .instr-tags{display:flex;gap:8px;flex-wrap:wrap} .instr-tag{padding:6px 14px;background:rgba(124,108,240,.06);border:1px solid var(--border);border-radius:20px;font-size:.78rem;color:var(--accent2);font-weight:600} /* === PRICING === */ .pricing-sec{background:var(--bg2);position:relative;overflow:hidden} .pricing-sec .orb{position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(124,108,240,.08),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none} .pricing-card{max-width:520px;margin:0 auto;padding:44px 36px;background:var(--card);border:2px solid var(--accent);border-radius:var(--r);text-align:center;position:relative;z-index:2;animation:borderGlow 4s infinite} .pricing-badge{display:inline-block;padding:4px 16px;background:var(--accent5);color:#fff;font-size:.78rem;font-weight:700;border-radius:20px; margin-bottom:18px;animation:countPulse 2s infinite} .pricing-old{font-size:1.2rem;color:var(--t3);text-decoration:line-through;margin-left:10px} .pricing-new{font-family:var(--font);font-size:3.2rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .pricing-note{font-size:.88rem;color:var(--t3);margin:8px 0 28px} .pricing-list{list-style:none;text-align:right;margin-bottom:28px} .pricing-list li{padding:9px 0;font-size:.9rem;color:var(--t2);display:flex;align-items:center;gap:10px;transition:all .3s} .pricing-list li:hover{color:var(--t1);transform:translateX(4px)} .pricing-list li svg{width:18px;height:18px;color:var(--accent4);flex-shrink:0} .pricing-tagline{font-size:.82rem;color:var(--t3);margin-top:18px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap} /* === GUARANTEE === */ .guarantee-box{max-width:560px;margin:0 auto;padding:36px;background:var(--card);border:1px solid rgba(16,185,129,.15);border-radius:var(--r);text-align:center} .guarantee-icon{width:60px;height:60px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px} .guarantee-icon svg{width:28px;height:28px;color:var(--accent4)} .guarantee-box h3{font-family:var(--font);font-weight:700;font-size:1.15rem;margin-bottom:10px;color:var(--accent4)} .guarantee-box p{font-size:.92rem;color:var(--t2);line-height:1.9} /* === FAQ === */ .faq-sec{background:var(--bg2)} .faq-list{max-width:680px;margin:0 auto} .faq-item{border-bottom:1px solid var(--border);overflow:hidden} .faq-q{width:100%;background:none;border:none;color:var(--t1);font-family:var(--font);font-size:. 95rem;font-weight:700;padding:20px 0;text-align:right;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap :16px;transition:color .3s} .faq-q:hover{color:var(--accent2)} .faq-arrow{width:24px;height:24px;background:rgba(124,108,240,.08);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .4s;flex-shrink:0} .faq-arrow svg{width:12px;height:12px;color:var(--accent);transition:transform .4s} .faq-item.active .faq-arrow{background:var(--accent);transform:rotate(180deg)} .faq-item.active .faq-arrow svg{color:#fff} .faq-a{max-height:0;transition:max-height .5s cubic-bezier(.22,1,.36,1),padding .3s} .faq-item.active .faq-a{max-height:min(800px,80vh)} .faq-a p{padding-bottom:18px;font-size:.9rem;color:var(--t2);line-height:1.9} /* === FINAL CTA === */ .final-cta{padding:100px 0;text-align:center;position:relative;overflow:hidden} .final-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(124,108,240,.06) 0%,transparent 60%);pointer-events:none} .final-cta h2{font-family:var(--font);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:900;margin-bottom:28px;line-height:1.55;position:relative;z-index:2} .final-badges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:32px;position:relative;z-index:2} .f-badge{padding:8px 18px;background:var(--card);border:1px solid var(--border);border-radius:20px;font-size:.82rem;color:var(--t2);display:flex;align-items:center;gap:6px} .f-badge svg{width:14px;height:14px;color:var(--accent4)} .final-trust{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:. 78rem;color:var(--t3);position:relative;z-index:2} .final-trust span{display:flex;align-items:center;gap:5px} .final-trust svg{width:14px;height:14px;opacity:.6} /* === MID CTA === */ .mid-cta{text-align:center;padding:36px 0} /* === RESPONSIVE === */ @media(max-width:768px){ .sec{padding:70px 0} .hero{min-height:auto;padding:50px 0 40px} .hero-trust{grid-template-columns:repeat(3,1fr)} .hero-trust .trust-box:nth-child(4),.hero-trust .trust-box:nth-child(5){grid-column:span 1} .ba-grid{grid-template-columns:1fr} .ba-arrow{position:static;transform:none;margin:0 auto} .ba-before{border-left:none;border-bottom:1px solid rgba(244,63,94,.08);border-radius:var(--r) var(--r) 0 0} .ba-after{border-radius:0 0 var(--r) var(--r)} .ba-grid{border-radius:var(--r)} .instr-card{flex-direction:column;text-align:center;padding:28px 20px} .instr-tags{justify-content:center} .pricing-card{padding:32px 20px} .stats-bar{gap:24px} .sticky-inner{justify-content:center;text-align:center} .sticky-info{justify-content:center;flex-wrap:wrap} .sticky-bar .cta{width:100%} .top-bar-inner{gap:12px} .countdown-inner{gap:12px} .hero-trust{gap:8px} .trust-box{padding:12px 4px} .trust-num{font-size:1rem} .aud-grid{grid-template-columns:repeat(3,1fr);gap:10px} .aud-item{padding:16px 8px} .examples-grid{grid-template-columns:repeat(2,1fr);gap:14px} .overview-features{gap:12px} .overview-feat{font-size:.82rem;padding:6px 14px} } @media(max-width:480px){ .hero-trust{grid-template-columns:repeat(2,1fr)} .hero h1{font-size:1.5rem} .sec-t{font-size:1.3rem} .aud-grid{grid-template-columns:repeat(2,1fr)} .examples-grid{grid-template-columns:repeat(2,1fr);gap:10px} }
/* WP funnel: RTL + sticky + spacing */
html,body{direction:rtl;text-align:right;}
body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));}
.sticky-inner{direction:ltr;flex-wrap:nowrap;align-items:center;}
.sticky-bar .cta{flex-shrink:0;white-space:nowrap;}
.sticky-info{min-width:0;}
.promise-grid .promise-item:nth-child(7){grid-column:1/-1;max-width:400px;margin-left:auto;margin-right:auto;}
@media(max-width:768px){
body{padding-bottom:calc(128px + env(safe-area-inset-bottom,0px));}
.sticky-inner{flex-wrap:wrap;gap:12px;}
}