:root{
  --bg: #f5f8fd;
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --text: #1a202c;
  --muted: #667085;
  --border: #e8eef6;
  --brand: #00d9e6;
  --brand-dark: #00b8c4;
  --accent: #ff165c;
  --accent-dark: #de0f50;
  --success: #16b364;
  --success-dark: #0f9f59;
  --blue: #2563eb;
  --purple: #7c3aed;
  --cyan: #06b6d4;
  --orange: #f97316;
  --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  --shadow-strong: 0 26px 70px rgba(15, 23, 42, 0.12);
  --container: 1140px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Poppins",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(0,217,230,.10), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(255,22,92,.08), transparent 20%),
    var(--bg);
  line-height:1.65;
}
body.rtl{ direction:rtl; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; }
.container{ width:min(var(--container), calc(100% - 28px)); margin-inline:auto; }
.narrow{ width:min(860px, calc(100% - 28px)); margin-inline:auto; }

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(232,238,246,.9);
}
.header-inner{
  min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; color:var(--text); }
.brand-badge{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, var(--brand), var(--accent)); box-shadow:var(--shadow-soft);
}
.brand-text{ font-size:1.1rem; letter-spacing:.02em; }

.header-actions{ display:flex; align-items:center; gap:12px; position:relative; overflow:visible; }
.lang-switcher{ position:relative; z-index:1000; }
.lang-btn{
  display:inline-flex; align-items:center; gap:8px; padding:5px 8px; border:1px solid #e5e7eb;
  border-radius:12px; background:#fff; cursor:pointer; font-size:12px; font-weight:600; box-shadow:var(--shadow-soft);
}
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; width:270px; max-height:360px; overflow-y:auto; padding:8px;
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none; transition:all .2s ease; z-index:9999;
}
.lang-menu.show{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.lang-option{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:#111827; padding:10px 12px;
  border-radius:12px; font-size:14px; font-weight:500; transition:background .2s ease, transform .2s ease;
}
.lang-option:hover{ background:#f3f4f6; transform:translateX(2px); }
.lang-option.active{ background:#eefcff; color:#0f172a; font-weight:700; }
.flag{ font-size:16px; }
.lang-menu::-webkit-scrollbar{ width:6px; }
.lang-menu::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:10px; }

.menu-toggle{
  display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--border); background:#fff;
  padding:0; box-shadow:var(--shadow-soft); flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer;
}
.menu-toggle span{ width:20px; height:2px; border-radius:999px; background:var(--text); display:block; }
.mobile-menu{ display:none; padding:12px 14px 16px; border-top:1px solid var(--border); background:rgba(255,255,255,.96); }
.mobile-menu.show{ display:flex; flex-direction:column; gap:10px; }
.mobile-menu a{
  padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:#fff; font-weight:600; color:var(--text);
}

.hero{ padding:46px 0 56px; background:linear-gradient(90deg, #00dbe8 0%, #09d0d8 48%, #00c8d2 100%); }
.hero-card{
  background:rgba(255,255,255,.98); border:1px solid rgba(255,255,255,.55); border-radius:32px; box-shadow:var(--shadow-strong);
  padding:38px 26px 28px; text-align:center;
}
.hero-card h1{ margin:0 0 12px; font-size:clamp(2rem, 5vw, 2.25rem); line-height:1.08; font-weight:800; letter-spacing:-.03em; }
.hero-sub{ max-width:840px; margin:0 auto 20px; color:var(--muted); font-size:1rem; }
.hero-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:22px; }
.hero-tags span{
  padding:8px 13px; border-radius:999px; border:1px solid var(--border); background:linear-gradient(180deg, #ffffff, #f7fbff);
  color:var(--muted); font-size:.9rem; font-weight:700; box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.download-box{ max-width:920px; margin:0 auto; }
.link-con{ display:grid; grid-template-columns:1fr 180px; gap:12px; }
.link-con input{
  width:100%; height:58px; padding:0 18px; border-radius:16px; border:1px solid #d9e4ef; background:#fff; color:var(--text); outline:none;
}
.link-con input::placeholder{ color:#98a2b3; }
.link-con input:focus{ border-color:rgba(0,217,230,.75); box-shadow:0 0 0 5px rgba(0,217,230,.12); }
.check-url{
  height:58px; border-radius:16px; border:none; color:#fff; background:linear-gradient(90deg, var(--accent), var(--accent-dark));
  font-weight:800; box-shadow:0 14px 28px rgba(255,22,92,.22); transition:transform .2s ease, box-shadow .2s ease; cursor:pointer;
}
.check-url:hover{ transform:translateY(-1px); box-shadow:0 18px 34px rgba(255,22,92,.28); }
.error{
  display:none; margin-top:14px; padding:14px 16px; border-radius:16px; border:1px solid #fecaca; background:#fff1f2;
  color:#dc2626; text-align:left; box-shadow:var(--shadow-soft);
}

.preview{ display:none; margin-top:26px; text-align:left; }
.result-card{
  display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:start;
  background:linear-gradient(180deg, #ffffff, #fbfdff); border:1px solid var(--border); border-radius:26px; padding:24px; box-shadow:var(--shadow);
}
.result-left{ display:flex; justify-content:center; }
.result-video-frame{
  width:100%; max-width:250px; aspect-ratio:9/16; border-radius:20px; overflow:hidden; background:#000; box-shadow:0 18px 40px rgba(0,0,0,.20);
}
#videoPreview{ width:100%; height:100%; display:block; object-fit:cover; background:#000; }
.result-right{ display:flex; flex-direction:column; gap:18px; }
.result-top{ padding-bottom:14px; border-bottom:1px solid var(--border); }
.result-user{ display:flex; align-items:center; gap:14px; }
.result-avatar{
  width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, #111827, #374151); flex-shrink:0;
}
.result-user-text h3{ margin:0; font-size:1.55rem; line-height:1.1; }
.result-user-text p{ margin:5px 0 0; color:var(--muted); font-size:.95rem; }
.video-details-card{
  background:linear-gradient(180deg, #f9fbfe, #f5f8fc); border:1px solid var(--border); border-radius:18px; padding:18px;
}
.video-details{ color:#334155; line-height:1.8; word-break:break-word; }
.video-details p{ margin:0 0 9px; }
.video-details strong{ color:var(--text); }
.result-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.download-mp4,.download-mp3{
  min-height:56px; border:none; border-radius:16px; font-size:1rem; font-weight:800; color:#fff;
  transition:transform .2s ease, box-shadow .2s ease; cursor:pointer;
}
.download-mp4:hover,.download-mp3:hover{ transform:translateY(-1px); }
.download-mp4{ background:linear-gradient(90deg, var(--brand), var(--accent)); box-shadow:0 14px 28px rgba(255,22,92,.14); }
.download-mp3{ background:linear-gradient(90deg, var(--success), var(--success-dark)); box-shadow:0 14px 28px rgba(22,179,100,.16); }

.progress-container{ display:none; padding:16px; border-radius:18px; border:1px solid var(--border); background:#f8fbff; }
.progress-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.progress-label{ font-weight:700; color:var(--text); }
.progress-text{ font-weight:800; color:var(--accent); }
.progress-bar-container{ width:100%; height:12px; border-radius:999px; overflow:hidden; background:#e8eef6; }
.progress-bar{
  width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--brand), var(--accent)); transition:width .3s ease;
}

.content-section{ padding:28px 0; }
.content-section.alt{
  background:linear-gradient(180deg, #fbfdff, #f8fbfe); border-top:1px solid #edf2f7; border-bottom:1px solid #edf2f7;
}
.section-head{ text-align:center; margin-bottom:24px; }
.section-head h2{ margin:0 0 8px; font-size:clamp(26px, 3vw, 38px); line-height:1.15; letter-spacing:-.02em; }
.section-head p{ margin:0; color:var(--muted); }
.two-col-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }
.three-col-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.steps-grid,.feature-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }

.content-card,.info-card,.feature-card,.faq-item{
  background:linear-gradient(180deg, #ffffff, #fbfdff); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow-soft);
}
.content-card,.info-card,.feature-card{ padding:24px; transition:transform .2s ease, box-shadow .2s ease; }
.content-card:hover,.info-card:hover,.feature-card:hover{ transform:translateY(-3px); box-shadow:0 18px 34px rgba(15,23,42,.08); }
.content-card h3,.info-card h3,.feature-card h3{ margin:0 0 8px; font-size:1.12rem; }
.content-card p,.info-card p,.feature-card p,.panel p{ margin:0; color:var(--muted); }

.pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.pill{
  display:inline-flex; align-items:center; padding:8px 13px; border-radius:999px; background:linear-gradient(180deg, #eefcff, #eaf9fd);
  border:1px solid #d9eff5; color:#0f172a; font-size:.92rem; font-weight:700;
}
.checklist{ list-style:none; padding:0; margin:16px 0 0; }
.checklist li{ position:relative; padding-left:28px; margin-bottom:10px; color:var(--muted); }
.checklist li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--success); font-weight:800; }

.icon-box,.feature-icon{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-size:1.35rem; margin-bottom:14px;
}
.icon-blue{ background:rgba(37,99,235,.12); }
.icon-pink{ background:rgba(255,22,92,.12); }
.icon-green{ background:rgba(16,179,100,.12); }
.icon-cyan{ background:rgba(6,182,212,.12); }
.icon-orange{ background:rgba(249,115,22,.12); }
.icon-purple{ background:rgba(124,58,237,.12); }

.faq-list{ display:grid; gap:12px; }
.faq-item{ overflow:hidden; }
.accordion{
  width:100%; padding:20px 22px; border:none; background:#fff; color:var(--text); text-align:left; display:flex; align-items:center;
  justify-content:space-between; font-weight:700; font-size:1rem; cursor:pointer;
}
.panel{ display:none; padding:0 22px 20px; }

.toast{
  display:none; position:fixed; right:18px; bottom:18px; z-index:99999; padding:14px 16px; border-radius:14px; color:#fff;
  box-shadow:var(--shadow); font-weight:600;
}
.toast.success{ background:#16b364; }
.toast.error{ background:#dc2626; }

.site-footer{ padding:26px 0 34px; }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid var(--border); padding-top:20px;
}
.footer-brand{  }
.footer-links{ display:flex; gap:14px; flex-wrap:wrap; }
.footer-links a{ color:var(--muted); font-weight:600; }
.footer-links a:hover{ color:var(--text); }

.simple-page{ padding:46px 0 60px; }
.simple-card{
  background:linear-gradient(180deg, #ffffff, #fbfdff); border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow);
  padding:30px 24px;
}
.simple-card h1{ margin-top:0; font-size:clamp(2rem, 5vw, 3rem); line-height:1.1; }
.simple-card h2{ margin-top:28px; margin-bottom:10px; }
.simple-card p, .simple-card li{ color:var(--muted); }
.simple-card ul{ padding-left:18px; }

@media (max-width: 980px){
  .desktop-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .two-col-grid,.three-col-grid,.steps-grid,.feature-grid,.result-card{ grid-template-columns:1fr; }
}
@media (max-width: 700px){
  .link-con{ grid-template-columns:1fr; }
  .result-actions{ grid-template-columns:1fr; }
  .lang-menu{ width:240px; }
  .hero-card{ padding:30px 18px 22px; }
  .header-inner{ gap:12px; }
  .brand-text{ font-size:1rem; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}


.desktop-nav {
  display: flex;
  align-items: center;
  gap: 25px;
}

.desktop-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: #1f2937;
  padding: 10px 0;
  transition: 0.2s;
}

.desktop-nav a:hover {
  color: #e91e63;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropbtn {
  cursor: pointer;
}

/* Sous menu */
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.25s;
  z-index: 999;
}

/* Links */
.dropdown-content a {
  display: block;
  padding: 12px 15px;
  font-size: 14px;
  color: #374151;
}

.dropdown-content a:hover {
  background: #f5f7fa;
  color: #e91e63;
}

/* Show on hover */
.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Desktop nav default (يبان غير فالشاشات الكبيرة) */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Mobile: hide desktop nav */
@media (max-width: 768px) {
  .desktop-nav {
    display: none !important;
  }
}

  	
  	.loading-box {
  margin: 18px auto;
  padding: 20px;
  max-width: 520px;
  text-align: center;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

.spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border: 4px solid #eeeeee;
  border-top-color: #6c11ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-box p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #222;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}