/* ================================================
   Safety Guard — Engineering Tools
   tools.css  |  © 2024 sgbskw.com
   يُحظر نسخه أو تعديله بدون إذن كتابي
   ================================================ */

/* ── 1. DESIGN TOKENS ── */
:root {
  --primary:        #0d6efd;
  --primary-dark:   #0a58ca;
  --primary-light:  #e8f0fe;
  --accent:         #00b4d8;
  --gold:           #ffc107;
  --gold-dark:      #e6a800;
  --success:        #198754;
  --success-light:  rgba(25,135,84,.1);
  --warning:        #fd7e14;
  --warning-light:  rgba(253,126,20,.1);
  --danger:         #dc3545;
  --danger-light:   rgba(220,53,69,.1);
  --purple:         #6f42c1;
  --teal:           #0077b6;
  --dark:           #1a1d20;
  --dark-2:         #0a1628;
  --light:          #f8f9fa;
  --light-2:        #f0f5ff;
  --text-muted:     #6c757d;
  --white:          #ffffff;
  --border:         rgba(0,0,0,.08);
  --glass:          rgba(255,255,255,.08);
  --glass-border:   rgba(255,255,255,.15);

  --shadow-xs:  0 2px 8px rgba(0,0,0,.05);
  --shadow-sm:  0 4px 20px rgba(0,0,0,.07);
  --shadow-md:  0 8px 40px rgba(13,110,253,.1);
  --shadow-lg:  0 20px 60px rgba(13,110,253,.15);
  --shadow-xl:  0 30px 80px rgba(13,110,253,.2);

  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 24px;
  --r-xl: 32px;

  --transition: all .38s cubic-bezier(.25,.46,.45,.94);
  --spring:     cubic-bezier(.34,1.56,.64,1);
}

/* ── 2. RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Tajawal',sans-serif;
  direction:rtl;
  overflow-x:hidden;
  background:#fff;
  color:#333;
  line-height:1.7;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:'Tajawal',sans-serif; cursor:pointer; border:none; background:none; }
input, select, textarea { font-family:'Tajawal',sans-serif; }
img { max-width:100%; display:block; }

/* ── 3. SCROLLBAR ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--light); }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:3px; }

/* ── 4. KEYFRAMES ── */
@keyframes blink      { 0%,100%{opacity:1}  50%{opacity:.25} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes orbFloat   { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-30px) scale(1.1)} }
@keyframes slideUp    { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes pulse      { 0%,100%{box-shadow:0 0 0 0 rgba(13,110,253,.4)} 70%{box-shadow:0 0 0 10px rgba(13,110,253,0)} }
@keyframes toastIn    { from{transform:translateX(-50%) translateY(60px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }
@keyframes shimmer    { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes progressBar { from{width:0} }

/* ── 5. LAYOUT ── */
.wrap { max-width:1340px; margin:0 auto; padding:0 2rem; }
.section { padding:5.5rem 0; }
.section-light { background:var(--light); }
.section-blue  { background:linear-gradient(135deg,var(--dark-2),#0d2a5e 50%,#1565c0); }

/* ── 6. NAVBAR ── */
.navbar {
  position:fixed; top:0; width:100%; z-index:9999;
  padding:1.1rem 0;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(13,110,253,.07);
  box-shadow:0 2px 24px rgba(0,0,0,.05);
  transition:var(--transition);
}
.navbar.scrolled { padding:.65rem 0; box-shadow:0 4px 32px rgba(13,110,253,.13); }
.nav-inner { max-width:1340px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-family:'Cairo',sans-serif; font-size:1.5rem; font-weight:900; display:flex; align-items:center; gap:.5rem; }
.logo-sg   { color:var(--primary); }
.logo-dot  { width:8px; height:8px; background:var(--gold); border-radius:50%; display:inline-block; margin:0 2px; animation:blink 2s infinite; }
.logo-name { color:#333; font-size:.92rem; font-weight:600; }
.nav-links { display:flex; gap:.3rem; }
.nav-links a {
  color:#555; padding:.48rem 1rem; border-radius:var(--r-xs);
  font-size:.9rem; font-weight:500; transition:var(--transition);
}
.nav-links a:hover, .nav-links a.active { color:var(--primary); background:rgba(13,110,253,.07); }
.nav-actions { display:flex; align-items:center; gap:.7rem; }
.btn-nav {
  padding:.48rem 1.3rem; border-radius:50px; font-size:.87rem;
  font-weight:700; transition:var(--transition); display:flex; align-items:center; gap:.4rem;
  background:var(--primary); color:#fff;
}
.btn-nav:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 8px 22px rgba(13,110,253,.32); color:#fff; }
.btn-nav.wa { background:#25d366; }
.btn-nav.wa:hover { background:#1da851; box-shadow:0 8px 22px rgba(37,211,102,.35); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
.hamburger span { display:block; width:24px; height:2px; background:#333; border-radius:2px; transition:var(--transition); }

/* Mobile overlay */
.mob-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.55); z-index:10000; align-items:flex-end;
}
.mob-overlay.open { display:flex; }
.mob-inner {
  background:#fff; width:100%; padding:2rem;
  border-radius:24px 24px 0 0; max-height:85vh; overflow-y:auto;
}
.mob-close {
  width:38px; height:38px; background:var(--light);
  border-radius:50%; font-size:1.2rem; margin-bottom:1.5rem;
  display:flex; align-items:center; justify-content:center;
}
.mob-inner nav a {
  display:block; padding:.85rem 0;
  border-bottom:1px solid var(--light); font-size:1.05rem; font-weight:500; color:#333;
}

/* ── 7. PAGE HERO ── */
.page-hero {
  min-height:420px;
  background:linear-gradient(135deg,#0a1628 0%,#0d2a5e 40%,#1565c0 70%,#1e88e5 100%);
  position:relative; display:flex; align-items:center;
  padding-top:90px; overflow:hidden;
}
.hero-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.17; animation:orbFloat 12s ease-in-out infinite; }
.orb-1 { width:560px; height:560px; background:radial-gradient(circle,#00b4d8,transparent); top:-180px; left:-100px; }
.orb-2 { width:380px; height:380px; background:radial-gradient(circle,#ffc107,transparent); bottom:-80px; right:-80px; animation-delay:4s; }
.orb-3 { width:260px; height:260px; background:radial-gradient(circle,#4fc3f7,transparent); top:45%; left:42%; animation-delay:2s; }
.hero-inner-box { max-width:860px; margin:0 auto; padding:4rem 2rem; position:relative; z-index:2; text-align:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  border-radius:50px; padding:.4rem 1.2rem; color:#fff; font-size:.84rem;
  margin-bottom:1.4rem; backdrop-filter:blur(12px);
}
.hero-badge .dot { width:8px; height:8px; background:var(--gold); border-radius:50%; animation:blink 1.5s infinite; }
.page-hero h1 {
  font-family:'Cairo',sans-serif; font-size:2.9rem; font-weight:900;
  color:#fff; line-height:1.25; margin-bottom:1rem;
}
.page-hero h1 .hl {
  background:linear-gradient(135deg,#ffc107,#ff9800);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.page-hero p { font-size:1.08rem; color:rgba(255,255,255,.82); max-width:620px; margin:0 auto 2rem; line-height:1.9; }
.hero-pills { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.hero-pill {
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
  color:#fff; padding:.42rem 1.05rem; border-radius:50px; font-size:.84rem;
  backdrop-filter:blur(10px); display:flex; align-items:center; gap:.45rem;
}
.hero-pill i { color:var(--gold); }

/* ── 8. SECTION HEADERS ── */
.sec-header { text-align:center; margin-bottom:3.5rem; }
.sec-tag {
  display:inline-block; background:rgba(13,110,253,.08); color:var(--primary);
  padding:.32rem 1.1rem; border-radius:50px; font-size:.82rem; font-weight:700;
  margin-bottom:.9rem; border:1px solid rgba(13,110,253,.15);
}
.sec-title { font-family:'Cairo',sans-serif; font-size:2.3rem; font-weight:900; color:var(--dark); margin-bottom:.8rem; }
.sec-title span { color:var(--primary); }
.sec-desc { color:var(--text-muted); font-size:1.02rem; max-width:600px; margin:0 auto; line-height:1.85; }

/* ── 9. TABS ── */
.tools-tabs {
  display:flex; background:#fff; border:1.5px solid rgba(13,110,253,.12);
  border-radius:var(--r); padding:6px; max-width:700px;
  margin:0 auto 3.5rem; gap:6px;
  box-shadow:0 4px 20px rgba(13,110,253,.08);
}
.tab-btn {
  flex:1; padding:.85rem 1.3rem; border-radius:var(--r-sm);
  font-size:.95rem; font-weight:700; color:var(--text-muted);
  transition:var(--transition); display:flex; align-items:center;
  justify-content:center; gap:.5rem; white-space:nowrap;
}
.tab-btn i { font-size:1rem; }
.tab-btn.active {
  background:linear-gradient(135deg,var(--primary),#1e88e5);
  color:#fff; box-shadow:0 6px 20px rgba(13,110,253,.35);
}
.tab-content { display:none; }
.tab-content.active { display:block; animation:slideUp .35s ease; }

/* ── 10. CONVERTER CARD ── */
.conv-card {
  background:#fff; border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl); border:1px solid rgba(13,110,253,.1); overflow:hidden;
}
.conv-header {
  background:linear-gradient(135deg,#0a1628,#0d2a5e 50%,#1565c0);
  padding:2.5rem 3rem; display:flex; align-items:flex-start;
  gap:2rem; flex-wrap:wrap; position:relative; overflow:hidden;
}
.conv-header::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.conv-hdr-icon {
  width:78px; height:78px; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22); border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.3rem; color:#fff; flex-shrink:0; position:relative; z-index:1;
}
.conv-hdr-text { position:relative; z-index:1; flex:1; }
.conv-hdr-text h2 {
  font-family:'Cairo',sans-serif; font-size:1.85rem;
  font-weight:900; color:#fff; margin-bottom:.4rem;
}
.conv-hdr-text p { color:rgba(255,255,255,.8); font-size:.97rem; line-height:1.78; max-width:520px; }
.free-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  background:linear-gradient(135deg,#ffc107,#ff9800); color:#1a1d20;
  padding:.28rem 1rem; border-radius:50px; font-weight:700; font-size:.8rem; margin-top:.7rem;
}
.conv-body { padding:2.8rem 3rem; }

/* Step guide */
.step-row { display:flex; align-items:center; margin-bottom:2.5rem; gap:0; }
.step-item { flex:1; text-align:center; position:relative; }
.step-item:not(:last-child)::after {
  content:''; position:absolute; top:23px; left:0;
  width:100%; height:2px; background:rgba(13,110,253,.12); z-index:0;
}
.step-num {
  width:48px; height:48px; border-radius:50%;
  background:var(--light); border:2.5px solid rgba(13,110,253,.18);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--text-muted); margin:0 auto .6rem;
  position:relative; z-index:1; font-size:.88rem; transition:var(--transition);
}
.step-item p { font-size:.8rem; color:var(--text-muted); font-weight:600; }
.step-item.active .step-num { background:var(--primary); border-color:var(--primary); color:#fff; animation:pulse 2s infinite; }
.step-item.active p { color:var(--primary); }
.step-item.done .step-num { background:var(--success); border-color:var(--success); color:#fff; animation:none; }
.step-item.done p { color:var(--success); }

/* Dropzone */
.drop-zone {
  border:2.5px dashed rgba(13,110,253,.28); border-radius:var(--r-lg);
  padding:4rem 2rem; text-align:center; cursor:pointer;
  transition:var(--transition);
  background:linear-gradient(135deg,rgba(13,110,253,.02),rgba(0,180,216,.015));
}
.drop-zone:hover, .drop-zone.drag { border-color:var(--primary); background:rgba(13,110,253,.04); box-shadow:0 0 0 4px rgba(13,110,253,.06); }
.drop-zone input { display:none; }
.dz-icon { font-size:3.8rem; color:var(--primary); margin-bottom:1.3rem; opacity:.75; }
.dz-icon i { display:block; }
.drop-zone h3 { font-family:'Cairo',sans-serif; font-size:1.4rem; font-weight:700; color:var(--dark); margin-bottom:.5rem; }
.drop-zone p  { color:var(--text-muted); margin-bottom:1.4rem; font-size:.93rem; }
.btn-browse {
  padding:.8rem 2.2rem; background:var(--primary); color:#fff;
  border-radius:50px; font-weight:700; font-size:.97rem; transition:var(--transition);
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-browse:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.fmt-pills { margin-top:1.4rem; display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.fmt-pill {
  background:var(--light); color:var(--text-muted);
  padding:.25rem .9rem; border-radius:50px; font-size:.8rem;
  border:1px solid rgba(0,0,0,.08); font-weight:600;
}
.fmt-pill.in  { background:rgba(13,110,253,.08); color:var(--primary); border-color:rgba(13,110,253,.2); }
.fmt-pill.out { background:rgba(25,135,84,.09);  color:var(--success); border-color:rgba(25,135,84,.22); }

/* File list */
.file-list { margin-top:2rem; display:none; }
.file-list.show { display:block; }
.file-item {
  display:flex; align-items:center; gap:1rem;
  background:var(--light); border:1px solid rgba(0,0,0,.07);
  border-radius:var(--r); padding:1.1rem 1.4rem;
  margin-bottom:.8rem; animation:slideUp .3s ease;
}
.fi-icon {
  width:50px; height:50px; background:rgba(13,110,253,.1);
  border-radius:var(--r-sm); display:flex; align-items:center;
  justify-content:center; color:var(--primary); font-size:1.3rem; flex-shrink:0;
}
.fi-info { flex:1; min-width:0; }
.fi-name { font-weight:700; color:var(--dark); font-size:.93rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fi-size { color:var(--text-muted); font-size:.79rem; margin-top:2px; }
.fi-prog { margin-top:.5rem; }
.prog-bg   { height:5px; background:rgba(0,0,0,.08); border-radius:3px; overflow:hidden; }
.prog-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:3px; width:0; transition:width .4s ease; }
.fi-status { font-size:.8rem; font-weight:700; display:flex; align-items:center; gap:.3rem; white-space:nowrap; flex-shrink:0; }
.fi-status.pending { color:var(--text-muted); }
.fi-status.reading { color:var(--warning); }
.fi-status.parsing { color:var(--primary); }
.fi-status.done    { color:var(--success); }
.fi-status.err     { color:var(--danger); }

/* Actions */
.conv-actions { margin-top:1.8rem; display:none; gap:1rem; flex-wrap:wrap; align-items:center; }
.conv-actions.show { display:flex; }
.btn-convert {
  padding:1rem 2.6rem;
  background:linear-gradient(135deg,var(--primary),#1e88e5);
  color:#fff; border-radius:50px; font-size:1.02rem; font-weight:700;
  transition:var(--transition); display:flex; align-items:center; gap:.65rem;
  box-shadow:0 8px 28px rgba(13,110,253,.35);
}
.btn-convert:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 16px 40px rgba(13,110,253,.42); }
.btn-convert:disabled { opacity:.6; cursor:not-allowed; transform:none !important; }
.btn-clear {
  padding:1rem 2rem; background:var(--light); color:var(--text-muted);
  border:1.5px solid rgba(0,0,0,.1); border-radius:50px;
  font-size:.95rem; font-weight:600; transition:var(--transition);
}
.btn-clear:hover { color:var(--danger); border-color:var(--danger); background:#fff; }
.spinner {
  width:20px; height:20px; border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:none;
}
.spinner.on { display:block; }
.btn-icn.hide { display:none; }

/* Download area */
.dl-area { margin-top:2rem; display:none; }
.dl-area.show { display:block; animation:slideUp .4s ease; }
.dl-title {
  font-family:'Cairo',sans-serif; font-size:1.1rem; font-weight:700;
  color:var(--dark); margin-bottom:1rem; display:flex; align-items:center; gap:.5rem;
}
.dl-title i { color:var(--success); }
.dl-card {
  background:linear-gradient(135deg,rgba(25,135,84,.06),rgba(13,202,240,.03));
  border:1.5px solid rgba(25,135,84,.18); border-radius:var(--r-lg);
  padding:1.5rem 2rem; display:flex; align-items:center;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:.8rem; transition:var(--transition);
}
.dl-card:hover { border-color:rgba(25,135,84,.38); background:rgba(25,135,84,.1); }
.dl-icon {
  width:56px; height:56px; background:rgba(25,135,84,.12);
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:var(--success); font-size:1.65rem; flex-shrink:0;
}
.dl-info { flex:1; }
.dl-name { font-weight:700; color:var(--dark); margin-bottom:.22rem; }
.dl-meta { color:var(--text-muted); font-size:.82rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.dl-meta span { display:flex; align-items:center; gap:.3rem; }
.btn-dl {
  padding:.8rem 1.8rem; background:var(--success); color:#fff;
  border-radius:50px; font-weight:700; font-size:.9rem; transition:var(--transition);
  display:flex; align-items:center; gap:.5rem; flex-shrink:0;
}
.btn-dl:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(25,135,84,.38); }
.btn-dl-all {
  margin:1.3rem auto 0; padding:.9rem 2.2rem;
  background:linear-gradient(135deg,var(--primary),#1e88e5);
  color:#fff; border-radius:50px; font-weight:700; font-size:.93rem;
  transition:var(--transition); display:flex; align-items:center; gap:.6rem;
}
.btn-dl-all:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* Notice */
.conv-notice {
  margin-top:2rem; padding:1.2rem 1.5rem;
  background:linear-gradient(135deg,rgba(13,202,240,.07),rgba(13,110,253,.04));
  border:1px solid rgba(13,202,240,.22); border-radius:var(--r);
  display:flex; gap:1rem; align-items:flex-start;
}
.conv-notice > i { color:var(--accent); font-size:1.2rem; margin-top:2px; flex-shrink:0; }
.conv-notice p { font-size:.86rem; color:#555; line-height:1.8; }
.conv-notice strong { color:var(--dark); }

/* Toast */
.toast {
  position:fixed; bottom:2rem; left:50%;
  transform:translateX(-50%) translateY(70px);
  background:var(--dark); color:#fff; padding:.9rem 1.8rem; border-radius:50px;
  font-weight:600; z-index:99999; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 12px 40px rgba(0,0,0,.35); font-size:.93rem; white-space:nowrap;
  transition:transform .38s var(--spring), opacity .38s ease;
  opacity:0; pointer-events:none;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }

/* ── 11. CALC CARDS ── */
.calc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:1.8rem; }

.calc-card {
  background:#fff; border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
  overflow:hidden; transition:var(--transition);
}
.calc-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }

.cc-header { padding:1.6rem 2rem; display:flex; align-items:center; gap:1rem; position:relative; overflow:hidden; }
.cc-header::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.03'%3E%3Cpath d='M20 20c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10c0 5.5-4.5 10-10 10S0 25.5 0 20s4.5-10 10-10z'/%3E%3C/g%3E%3C/svg%3E");
}
.hdr-blue   { background:linear-gradient(135deg,#071a40,#1565c0); }
.hdr-green  { background:linear-gradient(135deg,#072a14,#198754); }
.hdr-teal   { background:linear-gradient(135deg,#022030,#0077b6); }
.hdr-orange { background:linear-gradient(135deg,#2e1000,#e76f00); }
.hdr-purple { background:linear-gradient(135deg,#15072e,#6f42c1); }
.hdr-red    { background:linear-gradient(135deg,#2e0808,#c0392b); }
.hdr-brown  { background:linear-gradient(135deg,#1e1005,#7c4a03); }

.cc-icon {
  width:54px; height:54px; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.22); border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.55rem; color:#fff; flex-shrink:0; position:relative; z-index:1;
}
.cc-ttl { position:relative; z-index:1; }
.cc-ttl h3 { font-family:'Cairo',sans-serif; font-size:1.12rem; font-weight:700; color:#fff; margin-bottom:.15rem; }
.cc-ttl span { color:rgba(255,255,255,.72); font-size:.8rem; }

.cc-body { padding:1.8rem; }

/* Form */
.calc-form { display:flex; flex-direction:column; gap:.85rem; }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.65rem; }
.cf label { display:block; font-size:.79rem; font-weight:700; color:#555; margin-bottom:.32rem; letter-spacing:.02em; }
.cf input, .cf select {
  width:100%; padding:.65rem .95rem;
  border:1.5px solid rgba(0,0,0,.1); border-radius:var(--r-xs);
  font-size:.92rem; transition:var(--transition); background:#fff; color:#333;
}
.cf input:focus, .cf select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(13,110,253,.1); }
.cf input::placeholder { color:#ccc; }

.btn-calc {
  padding:.82rem 1.6rem; color:#fff; border-radius:50px;
  font-weight:700; font-size:.92rem; transition:var(--transition);
  display:flex; align-items:center; gap:.5rem; justify-content:center; width:100%;
}
.btn-calc:hover { transform:translateY(-2px); }
.bc-blue   { background:var(--primary); }      .bc-blue:hover   { background:var(--primary-dark); box-shadow:0 8px 24px rgba(13,110,253,.38); }
.bc-green  { background:var(--success); }       .bc-green:hover  { background:#146c43; box-shadow:0 8px 24px rgba(25,135,84,.38); }
.bc-teal   { background:var(--teal); }          .bc-teal:hover   { background:#005f92; box-shadow:0 8px 24px rgba(0,119,182,.38); }
.bc-orange { background:var(--warning); }       .bc-orange:hover { background:#c85e00; box-shadow:0 8px 24px rgba(253,126,20,.38); }
.bc-purple { background:var(--purple); }        .bc-purple:hover { background:#59359a; box-shadow:0 8px 24px rgba(111,66,193,.38); }
.bc-red    { background:#c0392b; }              .bc-red:hover    { background:#96281b; box-shadow:0 8px 24px rgba(192,57,43,.38); }
.bc-brown  { background:#7c4a03; }              .bc-brown:hover  { background:#5a3602; box-shadow:0 8px 24px rgba(124,74,3,.38); }

/* Result box */
.res-box {
  background:var(--light); border-radius:var(--r);
  padding:1.1rem; border:1px solid var(--border);
  display:none;
}
.res-box.show { display:block; animation:slideUp .3s ease; }
.res-box-title {
  font-family:'Cairo',sans-serif; font-size:.88rem; font-weight:700;
  color:var(--text-muted); margin-bottom:.75rem;
  display:flex; align-items:center; gap:.4rem;
}
.res-box-title i { color:var(--primary); }
.res-rows { display:flex; flex-direction:column; gap:.4rem; }
.rrow {
  display:flex; justify-content:space-between; align-items:center;
  padding:.52rem .9rem; background:#fff; border-radius:var(--r-xs);
  border:1px solid var(--border); font-size:.87rem;
}
.rrow .rl { color:#555; }
.rrow .rv { font-weight:700; color:var(--primary); }
.rrow.hi { background:linear-gradient(135deg,rgba(13,110,253,.07),rgba(0,180,216,.04)); border-color:rgba(13,110,253,.18); }
.rrow.hi .rv { font-size:1rem; color:var(--primary-dark); }
.rrow.ok { background:var(--success-light); border-color:rgba(25,135,84,.18); }
.rrow.ok .rv { color:var(--success); }
.rrow.wa { background:var(--warning-light); border-color:rgba(253,126,20,.2); }
.rrow.wa .rv { color:var(--warning); }
.rrow.da { background:var(--danger-light); border-color:rgba(220,53,69,.18); }
.rrow.da .rv { color:var(--danger); }
.rdiv { height:1px; background:rgba(0,0,0,.07); margin:.2rem 0; }

/* ── 12. FEATURES STRIP ── */
.feat-strip {
  background:linear-gradient(135deg,#0a1628,#0d2a5e 50%,#1565c0);
  padding:3.5rem 0;
}
.feat-strip-inner {
  max-width:1340px; margin:0 auto; padding:0 2rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:2rem;
}
.feat-item { text-align:center; color:#fff; }
.feat-ico {
  width:60px; height:60px; background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16); border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin:0 auto 1rem; transition:var(--transition);
}
.feat-item:hover .feat-ico { background:rgba(255,255,255,.22); transform:translateY(-4px); }
.feat-item h4 { font-family:'Cairo',sans-serif; font-weight:700; font-size:.97rem; margin-bottom:.3rem; }
.feat-item p  { color:rgba(255,255,255,.65); font-size:.84rem; }

/* ── 13. CTA ── */
.cta-sec { background:var(--light); padding:5.5rem 0; }
.cta-box {
  background:linear-gradient(135deg,#0a1628,#1565c0);
  border-radius:var(--r-xl); padding:4rem; text-align:center;
  position:relative; overflow:hidden;
}
.cta-box::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.cta-box h2 {
  font-family:'Cairo',sans-serif; font-size:2.4rem;
  font-weight:900; color:#fff; margin-bottom:.9rem; position:relative;
}
.cta-box p { color:rgba(255,255,255,.8); font-size:1.07rem; max-width:560px; margin:0 auto 2.2rem; line-height:1.85; position:relative; }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; }
.btn-cta-w {
  padding:.95rem 2.4rem; background:#fff; color:var(--primary);
  border-radius:50px; font-weight:700; font-size:.97rem; transition:var(--transition);
}
.btn-cta-w:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.28); color:var(--primary-dark); }
.btn-cta-o {
  padding:.95rem 2.4rem; background:transparent; color:#fff;
  border:2px solid rgba(255,255,255,.45); border-radius:50px;
  font-weight:600; font-size:.97rem; transition:var(--transition);
}
.btn-cta-o:hover { background:rgba(255,255,255,.1); border-color:#fff; transform:translateY(-3px); color:#fff; }

/* ── 14. FOOTER ── */
.sg-footer {
  background:var(--dark); color:rgba(255,255,255,.6);
  padding:2rem 0; text-align:center; font-size:.88rem;
}
.sg-footer a { color:var(--primary); font-weight:600; }

/* ── 15. SCROLL TOP ── */
.scroll-top {
  position:fixed; bottom:2rem; left:2rem;
  width:46px; height:46px; background:var(--primary); color:#fff;
  border-radius:50%; font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(13,110,253,.38); opacity:0; pointer-events:none;
  transition:var(--transition); z-index:999;
}
.scroll-top.show { opacity:1; pointer-events:auto; }
.scroll-top:hover { transform:translateY(-3px); background:var(--primary-dark); }

/* ── 16. FADE-UP ANIMATION ── */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.fade-up.in  { opacity:1; transform:translateY(0); }

/* ── 17. RESPONSIVE ── */
@media (max-width:1024px) { .calc-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:768px) {
  .nav-links, .nav-actions .btn-nav:not(.wa) { display:none; }
  .hamburger { display:flex; }
  .page-hero h1 { font-size:2rem; }
  .conv-header { padding:1.6rem; }
  .conv-body { padding:1.6rem; }
  .drop-zone { padding:2.5rem 1.2rem; }
  .calc-grid { grid-template-columns:1fr; }
  .g2,.g3 { grid-template-columns:1fr; }
  .tools-tabs { flex-direction:column; }
  .cta-box { padding:2.5rem 1.5rem; }
  .cta-box h2 { font-size:1.8rem; }
  .sec-title { font-size:1.85rem; }
  .feat-strip-inner { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .wrap { padding:0 1rem; }
  .hero-pills { flex-direction:column; align-items:center; }
  .dl-card { flex-direction:column; align-items:flex-start; }
  .step-item:not(:last-child)::after { display:none; }
  .feat-strip-inner { grid-template-columns:1fr 1fr; }
}



/* ══════════════════════════════════════════════════════
   CONVERTER LAUNCHER + MODAL — Light Professional Theme
   ══════════════════════════════════════════════════════ */

/* ─── Launcher Card ─── */
.conv-launcher {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 32px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Header */
.cl-header {
  background: linear-gradient(135deg, #1e3a8a, #2563eb 55%, #0284c7);
  padding: 2.2rem 2.5rem;
  display: flex; align-items: center; gap: 1.6rem;
  position: relative; overflow: hidden;
}
.cl-header::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.cl-header-icon {
  width: 64px; height: 64px;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff; flex-shrink: 0;
  position: relative; z-index: 1;
}
.cl-header-text { position: relative; z-index: 1; }
.cl-header-text h2 {
  font-family: 'Cairo', sans-serif;
  font-size: 1.7rem; font-weight: 900; color: #fff; margin-bottom: .4rem;
}
.cl-header-text p { color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.7; }

/* Format Flow */
.cl-flow {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; padding: 1.6rem 2.5rem;
  background: #f8fafc; border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}
.cl-flow-box {
  display: flex; flex-direction: column; align-items: center;
  gap: .2rem; padding: .65rem 1.2rem; border-radius: 12px;
}
.cl-flow-ext {
  font-size: .88rem; font-weight: 900; letter-spacing: .04em;
  padding: .22rem .8rem; border-radius: 7px;
}
.cl-flow-nm { font-size: .72rem; color: #64748b; margin-top: .2rem; }
.cl-flow-in  .cl-flow-ext { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.cl-flow-out .cl-flow-ext { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.cl-flow-arrow { color: #94a3b8; font-size: 1.1rem; padding: 0 .3rem; }

/* Features */
.cl-features {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.2rem 2.5rem;
  border-bottom: 1px solid #f1f5f9;
}
.cl-feat {
  display: flex; align-items: center; gap: .45rem;
  font-size: .86rem; color: #475569; font-weight: 600;
}
.cl-feat i { color: #22c55e; font-size: .75rem; }

/* Services Title */
.cl-services-title {
  padding: 1.4rem 2.5rem .6rem;
  font-size: .82rem; font-weight: 800; color: #64748b;
  letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: .5rem;
}
.cl-services-title i { color: #94a3b8; }

/* Services Grid */
.cl-services {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 0 2.5rem 1.8rem;
}

.cl-svc-card {
  position: relative;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.4rem 1rem 1.2rem;
  display: flex; flex-direction: column; align-items: center;
  gap: .7rem; text-align: center;
  cursor: pointer; transition: all .25s ease;
}
.cl-svc-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 8px 28px rgba(37,99,235,.12);
  transform: translateY(-3px);
}
.cl-svc-featured {
  border-color: #f97316;
  background: linear-gradient(160deg, #fff9f5, #fff);
}
.cl-svc-featured:hover {
  border-color: #ea580c;
  box-shadow: 0 8px 28px rgba(249,115,22,.18);
}
.cl-svc-badge {
  position: absolute; top: -.1rem; right: 50%; transform: translateX(50%);
  background: linear-gradient(135deg,#f97316,#ea580c);
  color: #fff; font-size: .68rem; font-weight: 800;
  padding: .18rem .75rem; border-radius: 50px;
  letter-spacing: .04em;
  box-shadow: 0 3px 10px rgba(249,115,22,.4);
}
.cl-svc-logo {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  flex-shrink: 0;
}
.cl-svc-info { flex: 1; }
.cl-svc-name { font-family: 'Cairo', sans-serif; font-size: .97rem; font-weight: 800; color: #1e293b; }
.cl-svc-desc { font-size: .75rem; color: #64748b; margin-top: .2rem; line-height: 1.5; }
.cl-svc-open {
  display: flex; align-items: center; gap: .35rem;
  background: #f1f5f9; color: #475569;
  border-radius: 50px; padding: .35rem .9rem;
  font-size: .78rem; font-weight: 700;
  border: 1px solid #e2e8f0;
  transition: all .2s;
}
.cl-svc-card:hover .cl-svc-open { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.cl-svc-featured .cl-svc-open { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.cl-svc-featured:hover .cl-svc-open { background: #f97316; color: #fff; border-color: #f97316; }

/* Notice */
.cl-notice {
  margin: 0 2.5rem 2rem;
  background: #f0f9ff; border: 1px solid #bae6fd;
  border-radius: 12px; padding: .9rem 1.2rem;
  display: flex; align-items: center; gap: .7rem;
  font-size: .85rem; color: #0369a1;
}
.cl-notice i { color: #0284c7; font-size: .9rem; flex-shrink: 0; }

/* ─── MODAL OVERLAY ─── */
.conv-modal-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.conv-modal-overlay.conv-modal-open {
  opacity: 1; pointer-events: auto;
}
.conv-modal-box {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
  width: 100%; max-width: 1200px;
  height: 90vh; max-height: 860px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(.96) translateY(12px);
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
}
.conv-modal-overlay.conv-modal-open .conv-modal-box {
  transform: scale(1) translateY(0);
}

/* Modal chrome bar (macOS style) */
.conv-modal-header {
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  padding: .7rem 1.1rem;
  display: flex; align-items: center; gap: .8rem;
  flex-shrink: 0;
}
.conv-modal-header-left { display: flex; gap: .45rem; align-items: center; flex-shrink: 0; }
.conv-modal-dot {
  width: 13px; height: 13px; border-radius: 50%; cursor: pointer;
  transition: filter .15s;
}
.conv-modal-dot:hover { filter: brightness(.85); }
.conv-dot-red    { background: #ff5f57; border: 1px solid #e14b41; }
.conv-dot-yellow { background: #febc2e; border: 1px solid #d4a017; }
.conv-dot-green  { background: #28c840; border: 1px solid #18aa30; }

.conv-modal-url-bar {
  flex: 1; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 8px;
  padding: .35rem 1rem;
  display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; color: #6b7280;
  overflow: hidden;
}
.conv-modal-lock { color: #22c55e; font-size: .72rem; flex-shrink: 0; }
.conv-modal-url-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }

.conv-modal-header-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.conv-modal-btn-new {
  display: flex; align-items: center; gap: .4rem;
  background: #fff; border: 1px solid #e5e7eb;
  color: #374151; border-radius: 7px; padding: .35rem .85rem;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: all .2s; font-family: 'Tajawal', sans-serif;
}
.conv-modal-btn-new:hover { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.conv-modal-close {
  width: 30px; height: 30px; border-radius: 8px;
  background: none; color: #9ca3af; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s;
  border: 1px solid transparent;
}
.conv-modal-close:hover { background: #fee2e2; color: #ef4444; border-color: #fecaca; }

/* Modal body */
.conv-modal-body {
  flex: 1; position: relative; overflow: hidden;
  background: #fff;
}
.conv-modal-body iframe {
  width: 100%; height: 100%; border: none; display: block;
}

/* Loading screen */
.conv-modal-loading {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #f0f9ff, #fff);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.2rem; z-index: 5;
}
.conv-modal-loading-anim { position: relative; width: 80px; height: 80px; }
.conv-loading-ring {
  position: absolute; inset: 0;
  border: 3px solid #e0f2fe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin .85s linear infinite;
}
.conv-loading-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #93c5fd;
}
.conv-loading-title { font-family: 'Cairo', sans-serif; font-size: 1.1rem; font-weight: 700; color: #1e293b; }
.conv-loading-sub { font-size: .85rem; color: #64748b; }

/* Blocked screen */
.conv-modal-blocked {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #f8fafc, #fff);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem; z-index: 5; text-align: center; padding: 2.5rem;
}
.conv-blocked-icon {
  position: relative; width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .5rem;
}
.conv-blocked-ring {
  position: absolute; inset: 0;
  border: 2px solid rgba(249,115,22,.2);
  border-radius: 50%;
  animation: lcRingPulse 2.5s ease-in-out infinite;
}
.conv-blocked-icon > i {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg,#fff7ed,#ffedd5);
  border: 2px solid #fed7aa; color: #f97316;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; z-index: 1;
}
@keyframes lcRingPulse {
  0%,100%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.15);opacity:.2}
}
.conv-modal-blocked h3 { font-family: 'Cairo', sans-serif; font-size: 1.4rem; font-weight: 900; color: #1e293b; }
.conv-modal-blocked p { color: #64748b; font-size: .92rem; line-height: 1.75; max-width: 400px; }
.conv-blocked-openbtn {
  display: flex; align-items: center; gap: .7rem;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff; padding: .95rem 2.4rem;
  border-radius: 50px; font-size: 1rem; font-weight: 800;
  font-family: 'Cairo', sans-serif;
  cursor: pointer; transition: all .3s;
  box-shadow: 0 8px 24px rgba(249,115,22,.38);
  border: none; margin-top: .5rem;
}
.conv-blocked-openbtn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(249,115,22,.5); }

.conv-blocked-alts { margin-top: .5rem; }
.conv-blocked-alts-title { font-size: .82rem; color: #94a3b8; margin-bottom: .6rem; }
.conv-blocked-alts-btns { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.conv-blocked-alts-btns button {
  background: #f1f5f9; border: 1px solid #e2e8f0;
  color: #475569; border-radius: 50px;
  padding: .38rem 1rem; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: all .2s;
  font-family: 'Tajawal', sans-serif;
}
.conv-blocked-alts-btns button:hover { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .cl-services { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cl-header { padding: 1.4rem 1.2rem; gap: 1rem; }
  .cl-header-text h2 { font-size: 1.3rem; }
  .cl-services { grid-template-columns: 1fr 1fr; padding: 0 1.2rem 1.5rem; }
  .cl-features { padding: 1rem 1.2rem; gap: .7rem; }
  .cl-flow { padding: 1.2rem; }
  .cl-services-title { padding: 1rem 1.2rem .4rem; }
  .cl-notice { margin: 0 1.2rem 1.5rem; }
  .conv-modal-overlay { padding: 0; }
  .conv-modal-box { border-radius: 0; height: 100vh; max-height: 100vh; }
}