:root{
  --brand:#ff7a00;
  --brand2:#ff9a3d;
  --bg:#0b0b10;
  --panel:rgba(255,255,255,.06);
  --ink:#f7f7f7;
  --muted:rgba(245,245,245,.72);
  --border:rgba(255,255,255,.14);
  --radius:20px;
  --shadow:0 16px 42px rgba(0,0,0,.35);
  --maxw:1140px;
  --pad:clamp(14px,2.2vw,22px);
  --h1:clamp(30px,4.3vw,52px);
  --h2:clamp(18px,2.4vw,26px);
  --p:clamp(14px,1.25vw,16px);
}
html{scroll-behavior:smooth;}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Kufi Arabic","Cairo","Tajawal",Arial,sans-serif;
  background:
    radial-gradient(1200px 620px at 85% -10%, rgba(255,122,0,.28), transparent 60%),
    radial-gradient(1000px 640px at 10% 10%, rgba(255,154,61,.18), transparent 58%),
    linear-gradient(180deg, var(--bg), #050508);
  color:var(--ink);
  line-height:1.8;
  min-height:100dvh;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.container{width:min(var(--maxw), calc(100% - 2*var(--pad))); margin-inline:auto;}
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:var(--pad); top:var(--pad); width:auto; height:auto; padding:10px 12px; background:#111; border:1px solid var(--border); border-radius:12px; z-index:9999;}
.topline{position:fixed; inset:0 0 auto 0; height:3px; z-index:999; background:linear-gradient(90deg,var(--brand),var(--brand2)); transform-origin:0 50%; transform:scaleX(0);}
.nav{position:sticky; top:0; z-index:60; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(9,9,12,.55); border-bottom:1px solid var(--border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px;}
.brand img{width:38px;height:38px;border-radius:12px; box-shadow:0 12px 26px rgba(255,122,0,.22);}
.nav-links{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end;}
.chip{padding:8px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.05); font-size:13px; opacity:.92; transition:transform .2s ease, opacity .2s ease, border-color .2s ease;}
.chip:hover{transform:translateY(-1px); opacity:1; border-color:rgba(255,122,0,.55);}
.chip[aria-current="true"]{border-color:rgba(255,122,0,.8); box-shadow:0 14px 30px rgba(255,122,0,.16);}
.btn{border:1px solid rgba(255,122,0,.55); background:linear-gradient(135deg, #ff7a00, #ff9a3d); color:#111; font-weight:900; padding:9px 12px; border-radius:12px; box-shadow:0 14px 30px rgba(255,122,0,.18); cursor:pointer; transition:transform .2s ease, filter .2s ease;}
.btn:hover{transform:translateY(-1px); filter:saturate(1.06);}
.ghost{border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--ink); font-weight:800; padding:9px 12px; border-radius:12px; cursor:pointer;}
.hero{padding:clamp(22px,4vw,44px) 0 14px;}
.hero-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(16px,3vw,26px); align-items:stretch;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;} .nav-links{display:none;}}
.card{border:1px solid var(--border); background:rgba(255,255,255,.05); border-radius:var(--radius); box-shadow:var(--shadow);}
.hero-main{padding:clamp(18px,3vw,28px); position:relative; overflow:hidden;}
.hero-main:before{content:""; position:absolute; inset:-60px -80px auto auto; width:240px; height:240px; background:radial-gradient(circle at 30% 30%, rgba(255,122,0,.55), transparent 60%); filter:blur(12px); transform:rotate(18deg); pointer-events:none;}
h1{margin:0 0 10px; font-size:var(--h1); line-height:1.15; letter-spacing:-.5px;}
.lead{margin:0; font-size:var(--p); color:var(--muted); max-width:62ch;}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.kpis{padding:clamp(16px,2.8vw,22px); display:grid; gap:12px;}
.kpi{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.06);}
.kpi b{font-size:15px;}
.kpi span{font-weight:950; color:rgba(255,154,61,.95);}
.badges{display:flex; gap:8px; flex-wrap:wrap;}
.badge{padding:6px 10px; border-radius:999px; border:1px solid rgba(255,122,0,.45); background:rgba(255,122,0,.12); font-size:12px; font-weight:800;}
main{padding:10px 0 40px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin:18px 0 10px;}
h2{margin:0; font-size:var(--h2);}
.hint{margin:0; font-size:13px; color:rgba(245,245,245,.68);}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:12px; margin-top:12px;}
.tile{grid-column:span 4; border-radius:18px; border:1px solid var(--border); background:rgba(255,255,255,.05); overflow:hidden; transform:translateY(10px); opacity:0; transition:transform .55s ease, opacity .55s ease, border-color .2s ease; min-height: 290px;}
.tile.is-visible{transform:translateY(0); opacity:1;}
.tile:hover{border-color:rgba(255,122,0,.7);}
.tile-media{position:relative;}
.tile-media img{width:100%; aspect-ratio:16/9; object-fit:cover;}
.tile-media:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.45));}
.tile-body{padding:14px;}
.tile-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;}
.tile h3{margin:0; font-size:16px;}
.tile p{margin:0; font-size:13px; color:rgba(245,245,245,.72);}
.more{display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-weight:900; font-size:13px; color:rgba(255,154,61,.95);}
@media(max-width:900px){.tile{grid-column:span 6;}}
@media(max-width:560px){.tile{grid-column:span 12;}}
.faq{margin-top:16px; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.04);}
details{padding:12px 14px; border-top:1px solid var(--border);}
details:first-child{border-top:none;}
summary{cursor:pointer; font-weight:900;}
details p{margin:8px 0 0; color:rgba(245,245,245,.75); font-size:13px;}
footer{padding:18px 0 28px; border-top:1px solid var(--border); background:rgba(255,255,255,.03);}
.foot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:rgba(245,245,245,.70);}
.small-links{display:flex; gap:10px; flex-wrap:wrap;}
.small-links a{border-bottom:1px dashed rgba(255,154,61,.6); padding-bottom:2px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .tile{transition:none;}
  .chip,.btn{transition:none;}
}

.fa-brand{
  width:38px; height:38px;
  border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #ff7a00, #ff9a3d);
  box-shadow:0 12px 26px rgba(255,122,0,.22);
}
.fa-brand i{color:#111; font-size:18px;}
.tile-icon{
  display:grid; place-items:center;
  padding:22px 14px 8px;
}
.tile-icon i{
  font-size:42px;
  color:rgba(255,154,61,.95);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

.tile-media{display:none!important;}