*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#070710;--bg2:#0d0d1a;--surface:rgba(255,255,255,0.04);--surface2:rgba(255,255,255,0.07);--border:rgba(255,255,255,0.08);--text:#f0f0ff;--text2:#8888aa;--accent:#6c63ff;--accent2:#ff6584;--accent3:#43e97b;--radius:16px;--radius-sm:10px;--transition:0.2s cubic-bezier(0.4,0,0.2,1)}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:auto;overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:'Syne',sans-serif;line-height:1.15}
h1{font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:800;letter-spacing:-0.02em}
h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;margin-bottom:2rem;text-align:center}
h3{font-size:1.2rem;font-weight:600}
.gradient-text{background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 50%,#f093fb 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:24px;padding:16px 32px;background:rgba(7,7,16,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.4rem;white-space:nowrap}
.nav-logo span{color:var(--accent)}
.nav-platforms{display:flex;gap:4px;margin-left:auto}
.nav-link{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--text2);transition:var(--transition)}
.nav-link:hover{background:var(--surface);color:var(--text)}
.nav-actions{display:flex;gap:8px}
.btn-app{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:.82rem;font-weight:600;transition:var(--transition);white-space:nowrap}
.btn-app.android{background:#1a1a2e;border:1px solid rgba(108,99,255,.3);color:var(--text)}
.btn-app.android:hover{background:var(--accent)}
.btn-app.ios{background:#1a1a2e;border:1px solid rgba(255,255,255,.1);color:var(--text)}
.btn-app.ios:hover{background:#333}
.nav-lang-switch{display:flex;gap:8px;font-size:.85rem;font-weight:600;}.nav-lang-switch a{padding:4px 8px;border-radius:6px;color:var(--text2);transition:var(--transition)}.nav-lang-switch a:hover{color:var(--text);background:var(--surface)}.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.4rem;cursor:pointer}
.mobile-menu{position:fixed;top:65px;left:0;right:0;z-index:99;background:var(--bg2);border-bottom:1px solid var(--border);padding:16px;display:none;flex-direction:column;gap:4px}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 16px;border-radius:8px;font-weight:500;transition:var(--transition)}
.mobile-menu a:hover{background:var(--surface)}
.hero{position:relative;min-height:auto;display:flex;align-items:center;justify-content:center;padding:100px 24px 60px;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15;animation:float 8s ease-in-out infinite}
.blob-1{width:600px;height:600px;background:var(--accent);top:-200px;left:-200px}
.blob-2{width:400px;height:400px;background:var(--accent2);bottom:-100px;right:-100px;animation-delay:-3s}
.blob-3{width:300px;height:300px;background:var(--accent3);top:50%;left:60%;animation-delay:-6s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}}
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px}
.hero-content{position:relative;z-index:1;max-width:800px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.hero-badge{display:inline-flex;align-items:center;padding:8px 16px;border-radius:100px;background:var(--surface);border:1px solid var(--border);font-size:.85rem;color:var(--text2);font-weight:500;animation:fadeUp .6s ease forwards}
.hero-content h1{animation:fadeUp .6s .1s ease both}
.hero-sub{font-size:1.1rem;color:var(--text2);animation:fadeUp .6s .2s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.platform-tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);padding:4px;border-radius:12px;animation:fadeUp .6s .3s ease both}
.tab{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:600;color:var(--text2);background:transparent;transition:var(--transition)}
.tab:hover{color:var(--text);background:var(--surface2)}
.tab.active{color:#fff}
.tab[data-platform=tiktok].active{background:linear-gradient(135deg,#ff0050,#ff375f)}
.tab[data-platform=twitter].active{background:linear-gradient(135deg,#1d9bf0,#0d7cc7)}
.tab[data-platform=reddit].active{background:linear-gradient(135deg,#ff4500,#ff6534)}
.input-wrap{display:flex;gap:12px;width:100%;animation:fadeUp .6s .4s ease both}
.input-inner{flex:1;display:flex;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:4px 4px 4px 16px;transition:var(--transition)}
.input-inner:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,99,255,.15)}
.input-inner input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:1rem;padding:12px 0}
.input-inner input::placeholder{color:var(--text2)}
.btn-paste{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--text2);transition:var(--transition);font-size:1rem}
.btn-paste:hover{background:var(--surface2);color:var(--text)}
.btn-download{display:flex;align-items:center;gap:8px;padding:0 28px;border-radius:var(--radius);border:none;cursor:pointer;font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:#fff;white-space:nowrap;background:linear-gradient(135deg,var(--accent) 0%,#8b5cf6 100%);transition:var(--transition)}
.btn-download:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(108,99,255,.4)}
.btn-download:active{transform:translateY(0)}
.ad-slot{width:100%;min-height:90px;display:flex;align-items:center;justify-content:center}
.ad-slot-hero{margin-top:8px;animation:fadeUp .6s .5s ease both}
.ad-slot-mid{margin:40px auto}
.ad-placeholder{width:100%;max-width:728px;height:90px;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.result-card{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;gap:20px;align-items:flex-start;animation:fadeUp .4s ease forwards;text-align:left}
.result-thumb{position:relative;flex-shrink:0;width:160px;height:90px;border-radius:10px;overflow:hidden;background:var(--surface)}
.result-thumb img{width:100%;height:100%;object-fit:cover}
.result-duration{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.8);color:#fff;font-size:.75rem;padding:2px 6px;border-radius:4px}
.result-info{flex:1;min-width:0}
.result-platform{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;opacity:.7}
.result-info h3{font-size:1rem;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-info p{font-size:.85rem;color:var(--text2);margin-bottom:14px}
.result-actions{display:flex;gap:8px;flex-wrap:wrap}
.dl-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:600;text-decoration:none;transition:var(--transition);cursor:pointer;border:none}
.dl-btn-primary{background:var(--accent);color:#fff}
.dl-btn-primary:hover{background:#7c73ff;transform:translateY(-1px)}
.dl-btn-secondary{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.dl-btn-secondary:hover{background:var(--surface2)}
.loading{display:flex;align-items:center;gap:12px;color:var(--text2);font-size:.95rem;animation:fadeUp .3s ease forwards}
.spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error-msg{width:100%;padding:14px 18px;background:rgba(255,100,100,.08);border:1px solid rgba(255,100,100,.2);border-radius:var(--radius-sm);color:#ff8888;font-size:.9rem;animation:fadeUp .3s ease forwards}
.how-to{padding:80px 24px}
.steps{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap}
.step{flex:1;min-width:200px;max-width:280px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px 24px;text-align:center;transition:var(--transition)}
.step:hover{border-color:rgba(108,99,255,.3);transform:translateY(-4px)}
.step-num{font-family:'Syne',sans-serif;font-size:.75rem;font-weight:800;color:var(--accent);letter-spacing:.1em;margin-bottom:12px}
.step-icon{font-size:2rem;margin-bottom:12px}
.step h3{margin-bottom:8px}
.step p{font-size:.9rem;color:var(--text2)}
.step-divider{font-size:1.5rem;color:var(--text2);flex-shrink:0}
.features{padding:0 24px 80px}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:var(--transition)}
.feature-card:hover{border-color:rgba(108,99,255,.3);transform:translateY(-2px)}
.feature-icon{font-size:1.8rem;margin-bottom:14px}
.feature-card h3{margin-bottom:8px}
.feature-card p{font-size:.9rem;color:var(--text2)}
.app-promo{position:relative;overflow:hidden;margin:40px 0;padding:80px 0;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.app-promo-content{display:flex;align-items:center;gap:60px;position:relative;z-index:1}
.app-promo-text{flex:1}
.app-badge{display:inline-block;padding:6px 14px;border-radius:100px;background:rgba(108,99,255,.15);border:1px solid rgba(108,99,255,.3);font-size:.85rem;font-weight:600;color:var(--accent);margin-bottom:20px}
.app-promo-text h2{text-align:left;margin-bottom:16px}
.app-promo-text p{color:var(--text2);margin-bottom:28px;font-size:1.05rem}
.app-buttons{display:flex;gap:12px;flex-wrap:wrap}
.store-btn{display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:12px;transition:var(--transition)}
.store-btn div{display:flex;flex-direction:column}
.store-btn small{font-size:.7rem;opacity:.7}
.store-btn strong{font-size:1rem;font-family:'Syne',sans-serif}
.store-btn.android{background:var(--accent);color:#fff}
.store-btn.android:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(108,99,255,.35)}
.store-btn.ios{background:var(--surface2);border:1px solid var(--border);color:var(--text)}
.store-btn.ios:hover{background:#333;transform:translateY(-2px)}
.platforms-section{padding:0 24px 80px}
.platform-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.platform-card{display:flex;flex-direction:column;padding:32px;border-radius:var(--radius);border:1px solid var(--border);transition:var(--transition);cursor:pointer}
.platform-card h3{font-size:1.3rem;margin-bottom:8px}
.platform-card p{font-size:.9rem;color:var(--text2);flex:1;margin-bottom:20px}
.platform-cta{font-size:.9rem;font-weight:600;transition:var(--transition)}
.tiktok-card{background:linear-gradient(135deg,rgba(255,0,80,.08),transparent);border-color:rgba(255,0,80,.2)}
.tiktok-card .platform-cta{color:#ff0050}
.tiktok-card:hover{border-color:#ff0050;transform:translateY(-4px);box-shadow:0 20px 40px rgba(255,0,80,.15)}
.twitter-card{background:linear-gradient(135deg,rgba(29,155,240,.08),transparent);border-color:rgba(29,155,240,.2)}
.twitter-card .platform-cta{color:#1d9bf0}
.twitter-card:hover{border-color:#1d9bf0;transform:translateY(-4px);box-shadow:0 20px 40px rgba(29,155,240,.15)}
.reddit-card{background:linear-gradient(135deg,rgba(255,69,0,.08),transparent);border-color:rgba(255,69,0,.2)}
.reddit-card .platform-cta{color:#ff4500}
.reddit-card:hover{border-color:#ff4500;transform:translateY(-4px);box-shadow:0 20px 40px rgba(255,69,0,.15)}
.faq{padding:0 24px 80px;max-width:780px;margin:0 auto}
.faq h2{text-align:center}
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:500;color:var(--text);text-align:left;gap:12px}
.faq-q:hover{color:var(--accent)}
.faq-arrow{font-size:1.3rem;flex-shrink:0;transition:var(--transition);color:var(--text2)}
.faq-item.open .faq-arrow{transform:rotate(45deg);color:var(--accent)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:200px}
.faq-a p{padding:0 20px 18px;font-size:.9rem;color:var(--text2)}
.footer{border-top:1px solid var(--border);padding:60px 0 0;background:var(--bg2)}
.footer-inner{display:flex;gap:60px;flex-wrap:wrap;padding-bottom:60px}
.footer-brand{flex:1;min-width:200px}
.footer-brand .nav-logo{display:inline-block;margin-bottom:12px;font-size:1.2rem}
.footer-brand p{font-size:.9rem;color:var(--text2);max-width:280px}
.footer-links{display:flex;gap:48px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h4{font-family:'Syne',sans-serif;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);margin-bottom:4px}
.footer-col a{font-size:.9rem;color:var(--text2);transition:var(--transition)}
.footer-col a:hover{color:var(--text)}
.footer-bottom{border-top:1px solid var(--border);padding:20px 24px;text-align:center}
.footer-bottom p{font-size:.8rem;color:var(--text2)}
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:40px 32px;max-width:420px;width:100%;text-align:center;position:relative;animation:slideUp .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes slideUp{from{transform:translateY(30px) scale(.95);opacity:0}to{transform:none;opacity:1}}
.modal-close{position:absolute;top:16px;right:16px;background:var(--surface);border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;color:var(--text2);font-size:.9rem;transition:var(--transition)}
.modal-close:hover{color:var(--text);background:var(--surface2)}
.modal-icon{font-size:3rem;margin-bottom:16px}
.modal h3{font-size:1.5rem;margin-bottom:10px}
.modal p{color:var(--text2);margin-bottom:24px}
.modal-app-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.modal-app-btns .store-btn{justify-content:center}
.modal-skip{background:none;border:none;color:var(--text2);font-size:.9rem;cursor:pointer;padding:8px;transition:var(--transition)}
.modal-skip:hover{color:var(--text)}
@media(max-width:768px){.nav-platforms,.nav-actions{display:none}.nav-lang-switch{display:flex;gap:8px;font-size:.85rem;font-weight:600;}.nav-lang-switch a{padding:4px 8px;border-radius:6px;color:var(--text2);transition:var(--transition)}.nav-lang-switch a:hover{color:var(--text);background:var(--surface)}.nav-toggle{display:block}.nav{padding:14px 20px}.input-wrap{flex-direction:column}.btn-download{padding:16px;justify-content:center}.platform-tabs{width:100%}.tab{flex:1;justify-content:center;padding:10px}.result-card{flex-direction:column}.result-thumb{width:100%;height:180px}.app-promo-content{flex-direction:column;text-align:center}.app-promo-text h2{text-align:center}.app-buttons{justify-content:center}.steps{flex-direction:column;align-items:stretch}.step-divider{transform:rotate(90deg);align-self:center}.footer-inner{gap:40px}.footer-links{gap:32px}}
@media(max-width:480px){h1{font-size:2.4rem}.hero{padding:100px 16px 60px}}
.nav{justify-content:space-between}
.nav-platforms{margin-left:0}
.nav-lang-switch{display:flex;gap:6px;font-size:.8rem;font-weight:600}
.nav-lang-switch a{padding:3px 7px;border-radius:5px;color:var(--text2);transition:var(--transition)}
.nav-lang-switch a:hover{color:var(--text);background:var(--surface)}
html[lang="ar"] .nav{direction:ltr}
html[lang="ar"] .hero-content{direction:rtl}