/* ===== الأحرار Media — Design System ===== */
:root{
  --brand-orange:#F58220;
  --brand-yellow:#F5B921;
  --brand-red:#E8322A;
  --ink:#101014;
  --ink-2:#1b1b21;
  --muted:#8b8b96;
  --line:rgba(255,255,255,.10);
  --card:#15151b;
  --text:#f3f3f5;
  --grad:linear-gradient(135deg,var(--brand-orange),var(--brand-yellow));
  --grad-hot:linear-gradient(135deg,var(--brand-red),var(--brand-orange));
  --radius:18px;
  --shadow:0 18px 50px -18px rgba(245,130,32,.45);

  /* Bootstrap 5.3 — override light defaults (black text on dark bg) */
  --bs-body-color:#f3f3f5;
  --bs-body-color-rgb:243,243,245;
  --bs-body-bg:#101014;
  --bs-body-bg-rgb:16,16,20;
  --bs-emphasis-color:#fff;
  --bs-emphasis-color-rgb:255,255,255;
  --bs-secondary-color:rgba(243,243,245,.72);
  --bs-secondary-color-rgb:243,243,245;
  --bs-tertiary-color:rgba(243,243,245,.5);
  --bs-heading-color:#f3f3f5;
  --bs-link-color:#F5B921;
  --bs-link-color-rgb:245,185,33;
  --bs-link-hover-color:#F58220;
  --bs-link-hover-color-rgb:245,130,32;
  --bs-border-color:rgba(255,255,255,.12);
  --bs-border-color-translucent:rgba(255,255,255,.12);
  --bs-form-control-bg:#101015;
  --bs-tertiary-bg:#15151b;
}
*{scrollbar-width:thin}
html,body{
  background:var(--ink);
  color:var(--text);
  font-family:"Tajawal","Cairo",system-ui,Segoe UI,sans-serif;
  overflow-x:hidden;
  font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-feature-settings:"tnum","lnum";
  font-feature-settings:"tnum","lnum";
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--text)}
a{text-decoration:none}
.text-muted-2{color:var(--muted)!important}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section{padding:96px 0}
.eyebrow{letter-spacing:.22em;font-size:.72rem;color:var(--brand-yellow);text-transform:uppercase;font-weight:700}
.bg-grid{
  background-color:var(--ink);
  background-image:
    radial-gradient(ellipse 80% 50% at 20% -10%,rgba(245,130,32,.18),transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 10%,rgba(232,50,42,.12),transparent 50%),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px;
}

/* buttons */
.btn-brand{background:var(--grad);color:#17110a;font-weight:800;border:0;border-radius:999px;padding:.7rem 1.6rem;box-shadow:var(--shadow);transition:.25s}
.btn-brand:hover{transform:translateY(-3px);filter:brightness(1.06);color:#17110a}
.btn-ghost{border:1px solid var(--line);color:#fff;border-radius:999px;padding:.7rem 1.6rem;font-weight:700;transition:.25s;background:transparent}
.btn-ghost:hover{border-color:var(--brand-orange);color:var(--brand-yellow);background:rgba(245,130,32,.08)}

/* navbar */
.navbar{background:rgba(16,16,20,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:.3s}
.navbar.scrolled{background:rgba(16,16,20,.95)}
.navbar .nav-link{color:#dcdce2;font-weight:600;margin-inline:.35rem;position:relative}
.navbar .nav-link:after{content:"";position:absolute;inset-inline-start:0;bottom:-6px;height:2px;width:0;background:var(--grad);transition:.3s}
.navbar .nav-link:hover:after,.navbar .nav-link.active:after{width:100%}
.navbar-brand img{height:44px}

/* hero */
.hero{position:relative;padding:170px 0 110px;overflow:hidden}
.hero .blob{position:absolute;filter:blur(90px);opacity:.5;border-radius:50%}
.hero .b1{width:420px;height:420px;background:var(--brand-orange);top:-90px;inset-inline-start:-80px;animation:float 9s ease-in-out infinite}
.hero .b2{width:360px;height:360px;background:var(--brand-red);bottom:-120px;inset-inline-end:-60px;animation:float 11s ease-in-out infinite reverse}
@keyframes float{50%{transform:translateY(-38px)}}
.hero h1{font-size:clamp(2.2rem,5.2vw,4.1rem);font-weight:900;line-height:1.15}

.card-x{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:.3s}
.card-x:hover{transform:translateY(-8px);border-color:rgba(245,130,32,.5);box-shadow:0 20px 50px -25px rgba(0,0,0,.9)}
.icon-box{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:#17110a;font-size:1.5rem}
.stat{font-size:2.4rem;font-weight:900}

/* portfolio */
.folio{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;background:#0d0d11;border:1px solid var(--line);width:100%;padding:0;display:block;color:inherit;text-align:start;cursor:default}
.folio-playable{cursor:pointer}
.folio .ph{position:absolute;inset:0;background:var(--grad);opacity:.85;display:grid;place-items:center;font-size:3rem;color:#17110a;transition:.4s}
.folio:hover .ph{transform:scale(1.06)}
.folio .cap{position:absolute;inset-inline:0;bottom:0;padding:1rem;background:linear-gradient(transparent,rgba(0,0,0,.88));font-weight:800;z-index:2}
.folio-play{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none}
.folio-play i{width:64px;height:64px;border-radius:50%;background:rgba(16,16,20,.72);border:2px solid rgba(255,255,255,.55);color:#fff;display:grid;place-items:center;font-size:1.8rem;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:.25s}
.folio-playable:hover .folio-play i{background:var(--grad);color:#17110a;border-color:transparent;transform:scale(1.06)}
.folio-modal{background:#121218;border:1px solid var(--line);color:#fff;border-radius:18px;overflow:hidden}
.folio-player{background:#000;border-radius:12px;overflow:hidden}
.folio-player video,.folio-player iframe{width:100%;height:100%;border:0;display:block;background:#000}

/* forms */
.form-control,.form-select,textarea{background:#101015!important;border:1px solid var(--line)!important;color:#fff!important;border-radius:12px!important;padding:.7rem .9rem!important}
.form-control:focus,.form-select:focus{border-color:var(--brand-orange)!important;box-shadow:0 0 0 .2rem rgba(245,130,32,.18)!important}
label.form-label{font-weight:700;font-size:.86rem;color:#cfcfd6}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* badges / status */
.badge-st{border-radius:999px;padding:.35rem .8rem;font-weight:700;font-size:.75rem}
.st-wait{background:rgba(139,139,150,.2);color:#c9c9d2}
.st-pay{background:rgba(232,50,42,.16);color:#ff8a84}
.st-shoot{background:rgba(245,130,32,.16);color:#ffb066}
.st-edit{background:rgba(245,185,33,.16);color:#ffd371}
.st-review{background:rgba(93,142,255,.16);color:#9db4ff}
.st-fix{background:rgba(232,50,42,.2);color:#ff9c96}
.st-ready{background:rgba(46,204,113,.16);color:#7ee2a8}
.st-done{background:rgba(46,204,113,.28);color:#a8f0c6}

.progress{background:#0d0d11;border-radius:999px;height:10px}
.progress-bar{background:var(--grad)}

/* portal shell */
.shell{display:flex;min-height:100vh}
.side{width:264px;flex:0 0 264px;background:#0d0d12;border-inline-start:1px solid var(--line);padding:1.1rem;position:sticky;top:0;height:100vh;overflow:auto}
.side a{display:flex;gap:.6rem;align-items:center;color:#c8c8d2;padding:.62rem .8rem;border-radius:12px;font-weight:600;font-size:.92rem;margin-bottom:.18rem}
.side a:hover{background:rgba(255,255,255,.05);color:#fff}
.side a.active{background:var(--grad);color:#17110a}
.main{flex:1;min-width:0;padding:1.4rem 1.6rem 4rem}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;color:var(--text)}
.kpi .v{font-size:1.7rem;font-weight:900;color:#fff}
.table{
  --bs-table-color:var(--text);
  --bs-table-bg:transparent;
  --bs-table-border-color:var(--line);
  --bs-table-striped-color:var(--text);
  --bs-table-hover-color:#fff;
  --bs-table-hover-bg:rgba(255,255,255,.04);
  color:var(--text)!important;
}
.table>:not(caption)>*>*{background:transparent!important;border-color:var(--line)!important;padding:.8rem .7rem;color:var(--text)!important}
.table thead th{color:var(--brand-yellow)!important;font-size:.8rem;letter-spacing:.04em}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;color:var(--text)}
.modal-content{background:var(--ink-2);border:1px solid var(--line);color:#fff;border-radius:var(--radius)}
.modal-content .form-label,.modal-body{color:var(--text)}
.doc{background:#fff;color:#111;border-radius:12px;padding:28px}
.doc,.doc *{color:#111}
.doc a{color:#F58220}
.doc .hd{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--brand-orange);padding-bottom:12px;margin-bottom:18px}
.doc .hd img{height:56px;filter:invert(1) brightness(.2) }
.wm{position:absolute;inset-inline-end:14px;top:14px;opacity:.35;font-weight:800;pointer-events:none;z-index:5;font-size:.9rem;text-shadow:0 2px 8px #000}
.vid-wrap{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--line)}
.timeline-step{display:flex;gap:.7rem;align-items:center;padding:.55rem 0;font-weight:600}
.dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;flex:0 0 22px}
.dot.ok{background:#2ecc71;color:#062313}
.dot.now{background:var(--grad);color:#17110a}
.dot.next{background:#22222a;color:#7a7a86}
@media(max-width:991px){.side{position:fixed;inset-inline-end:0;top:0;transform:translateX(-100%);z-index:1050;transition:.3s}
 html[dir=rtl] .side{transform:translateX(100%)}
 .side.open{transform:none!important}
 .main{padding:1rem}}
footer.site{border-top:1px solid var(--line);padding:48px 0;background:#0c0c10}
.site-tab.active{border-color:var(--brand-orange)!important;color:var(--brand-yellow)!important;background:rgba(245,130,32,.12)!important}
.folio .ph[style*="url("]{opacity:1}
.icon-pick-btn{display:flex;align-items:center;gap:.55rem;width:100%;background:#101015;border:1px solid var(--line);color:#fff;border-radius:12px;padding:.55rem .75rem;font-weight:700}
.icon-pick-btn:hover{border-color:var(--brand-orange);color:var(--brand-yellow)}
.icon-pick-btn i{font-size:1.35rem;color:var(--brand-yellow)}
.icon-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.45rem;max-height:340px;overflow:auto;padding:.25rem}
.icon-pick-grid button{aspect-ratio:1;border:1px solid var(--line);background:#101015;color:#eee;border-radius:12px;font-size:1.35rem;transition:.15s}
.icon-pick-grid button:hover,.icon-pick-grid button.active{border-color:var(--brand-orange);background:rgba(245,130,32,.14);color:var(--brand-yellow)}
.icon-pick-search{margin-bottom:.75rem}
.watch-shell{max-width:960px;margin:0 auto}
.protect-player{position:relative;background:#0a0a0e;overflow:hidden;border-radius:16px;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.protect-stage{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.protect-stage video,.protect-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;object-fit:contain}
.protect-stage .watch-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:.95rem;padding:1rem;text-align:center;z-index:2;background:#000}
.protect-stage .watch-status.error{color:#ffb4b4}
.wm-tiles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4;user-select:none}
.wm-tiles span{position:absolute;color:#fff;opacity:.22;font-weight:800;font-size:12px;white-space:nowrap;text-shadow:0 1px 6px #000;animation:wmfloat 18s linear infinite}
@keyframes wmfloat{0%{transform:translate(0,0) rotate(-18deg)}100%{transform:translate(-20%,14%) rotate(-18deg)}}
.protect-player .wm-banner{position:absolute;left:0;right:0;bottom:0;z-index:5;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff;font-size:.78rem;padding:28px 12px 10px;pointer-events:none;text-align:center;font-weight:700}
.protect-player .wm-logo{position:absolute;top:12px;inset-inline-end:12px;height:34px;opacity:.4;z-index:5;pointer-events:none}
.watch-playlist{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.watch-playlist .btn.active{border-color:var(--brand-orange);color:var(--brand-yellow);background:rgba(245,130,32,.12)}
.watch-cap{text-align:center;color:var(--muted);font-size:.9rem;margin-top:.65rem}
.media-thumb{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:#0a0a0e}
@media (max-width:576px){
  .protect-stage{max-height:none;aspect-ratio:16/9}
  .protect-player .wm-banner{font-size:.7rem;padding:22px 8px 8px}
}
.media-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.dropzone{border:1px dashed var(--line);border-radius:14px;padding:1rem;text-align:center;cursor:pointer;color:var(--muted)}
.dropzone:hover{border-color:var(--brand-orange);color:var(--brand-yellow)}
.upbar-wrap{height:6px;background:#222;border-radius:99px;overflow:hidden}
.upbar-wrap>div{height:100%;width:0;background:var(--grad);transition:width .2s}