:root { --black:#050505; --panel:#111214; --line:#292b2e; --text:#f4f4ef; --muted:#969a9d; --blue:#63c9ff; --pink:#ff72b8; --green:#82e3b0; --orange:#ff9a66; --purple:#a996ff; --yellow:#ffd65a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--text); font-family:Heebo,Arial,sans-serif; font-size:16px; line-height:1.45; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1160px, calc(100% - 48px)); margin-inline:auto; }
.topbar { border-bottom:1px solid var(--line); background:rgba(5,5,5,.94); }
.topbar-inner { min-height:75px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { display:inline-flex; direction:ltr; align-items:center; gap:4px; font-family:Rubik,sans-serif; font-size:1.28rem; letter-spacing:-.08em; }
.logo b { font-weight:800; }.logo span { display:grid; place-items:center; width:29px; height:29px; border-radius:5px; background:var(--text); color:#070707; font-size:.77rem; font-weight:800; letter-spacing:-.05em; }
nav { display:flex; gap:25px; margin-left:auto; font-weight:600; } nav a { color:#c5c7c7; } nav a:hover { color:white; }
.quick-link { display:flex; gap:7px; align-items:center; border:1px solid #3e4245; border-radius:100px; padding:7px 12px; font-size:.87rem; font-family:Rubik,sans-serif; color:#f2f2ee; }
.quick-link:hover { border-color:var(--blue); color:var(--blue); }
.live-bar { border-bottom:1px solid var(--line); background:#0a0b0c; }.live-bar-inner { display:grid; grid-template-columns:1fr 1fr 1.35fr 2.7fr; }.live-card { min-height:72px; padding:12px 15px; border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; gap:2px; }.live-card:last-child { border-right:1px solid var(--line); }.live-label { color:var(--muted); font-family:Rubik,sans-serif; font-size:.62rem; font-weight:600; letter-spacing:.08em; }.live-card strong { color:#f8f8f3; font-family:Rubik,Heebo,sans-serif; font-size:1rem; line-height:1.15; }.live-card small { color:#757a7d; font-size:.58rem; letter-spacing:.04em; }.weather-card strong { color:var(--yellow); }.matches-card { min-height:82px; }.matches-card strong { overflow:visible; text-overflow:clip; white-space:normal; color:var(--green); font-size:.76rem; line-height:1.35; }
.hero { min-height:365px; padding:87px 0 50px; display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--line); }
.overline, small { color:var(--muted); font-family:Rubik,sans-serif; font-size:.65rem; letter-spacing:.12em; font-weight:600; }.overline { margin:0 0 12px; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:17px; font-family:Rubik,Heebo,sans-serif; font-size:clamp(3.35rem,8vw,6.5rem); line-height:.87; letter-spacing:-.09em; } h1 em { color:var(--blue); font-style:normal; }
.hero p:not(.overline) { color:#b7bbbd; font-size:1.1rem; }.hero-arrow { display:grid; place-items:center; width:55px; height:55px; border:1px solid #3a3c3f; border-radius:50%; font-size:1.55rem; transition:background .2s,color .2s; }.hero-arrow:hover { background:var(--text); color:black; }
.top-links { display:grid; grid-template-columns:repeat(6,1fr); border-bottom:1px solid var(--line); }.top-links a { min-height:132px; padding:17px 13px; border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; gap:7px; transition:background .2s; }.top-links a:first-child { border-right:1px solid var(--line); }.top-links a:hover { background:#151618; }.top-links i,.top-links .site-logo { width:50px; height:50px; display:grid; place-items:center; border:1px solid #414549; border-radius:11px; background:#fff; color:var(--blue); font-style:normal; font-family:Rubik,sans-serif; font-size:.86rem; object-fit:contain; padding:3px; }.top-links a[href*="whatsapp.com"] .site-logo { border:0; border-radius:50%; background:#25d366; padding:2px; }.top-links span { font-family:Rubik,sans-serif; font-size:.82rem; }
.directory { padding-top:80px; }.section-title { display:flex; align-items:end; justify-content:space-between; margin-bottom:23px; }.section-title>div { display:flex; align-items:center; gap:12px; }.section-title>div>span { color:var(--blue); font-family:Rubik,sans-serif; font-size:.68rem; font-weight:600; }.section-title h2 { margin:0; font-family:Rubik,Heebo,sans-serif; font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.065em; }.section-title>p { margin:0; color:var(--muted); font-family:Rubik,sans-serif; font-size:.7rem; letter-spacing:.1em; }
.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.category { --accent:var(--blue); border:1px solid var(--line); background:var(--panel); min-width:0; }.card-blue{--accent:var(--blue)}.card-pink{--accent:var(--pink)}.card-green{--accent:var(--green)}.card-orange{--accent:var(--orange)}.card-purple{--accent:var(--purple)}.card-yellow{--accent:var(--yellow)}
.category header { min-height:92px; padding:18px; display:flex; align-items:center; gap:13px; border-bottom:1px solid var(--line); }.category-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:7px; background:color-mix(in srgb,var(--accent) 18%,#111); color:var(--accent); font-family:Rubik,sans-serif; font-size:1.25rem; font-weight:700; }.category b { display:block; font-size:1.17rem; }.category small { display:block; margin-top:2px; color:#74787b; font-size:.57rem; }
.links { padding:5px 18px 14px; }.links a { padding:8px 0; display:flex; align-items:center; gap:10px; border-bottom:1px solid #242629; color:#e5e6e1; font-size:.97rem; transition:color .18s,padding .18s; }.links a:last-child { border-bottom:0; }.links a:hover { color:var(--accent); padding-inline:4px 0; }.links .site-logo { width:31px; height:31px; flex:0 0 31px; border-radius:6px; background:#fff; padding:3px; object-fit:contain; }.links span { direction:ltr; margin-right:auto; color:var(--accent); font-family:Rubik,sans-serif; font-size:.88rem; }
.game-strip { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); background:#0d0e0f; }.game-item { position:relative; min-height:185px; padding:17px; border-left:1px solid var(--line); display:flex; flex-direction:column; transition:background .2s; }.game-item:first-child { border-right:0; }.game-item:hover { background:#191b1d; }.game-item i,.game-item .site-logo { display:grid; place-items:center; width:48px; height:48px; margin-bottom:auto; border-radius:8px; background:#fff; color:#fff; font-family:Rubik,sans-serif; font-style:normal; font-size:.67rem; font-weight:800; object-fit:contain; padding:4px; }.game-item b { margin-top:20px; font-family:Rubik,sans-serif; font-size:1.04rem; }.game-item small { margin-top:3px; font-size:.56rem; letter-spacing:.06em; }.game-item>span { position:absolute; left:17px; top:17px; color:#85898c; }
.arabic-section { padding-bottom:80px; }.all-directory { padding:0 0 80px; }.logo-group { margin-top:55px; }.logo-group:first-child { margin-top:0; }.logo-group-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }.logo-group-heading h3 { margin:0; font-size:1.2rem; }.logo-group-heading span { color:var(--muted); font-family:Rubik,sans-serif; font-size:.62rem; letter-spacing:.12em; }.logo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); border:1px solid var(--line); border-bottom:0; border-right:0; }.logo-tile { min-height:128px; padding:13px 7px 11px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); display:flex; align-items:center; flex-direction:column; justify-content:center; gap:9px; background:#0b0c0d; transition:background .18s,transform .18s; }.logo-tile:hover { background:#17191b; }.logo-tile img { width:59px; height:59px; border-radius:12px; background:#fff; padding:5px; object-fit:contain; box-shadow:0 0 14px rgba(255,255,214,.45); }.logo-tile span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f3f3ee; font-family:Rubik,Heebo,sans-serif; font-size:.71rem; text-align:center; direction:ltr; }.footer { min-height:112px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; color:#a7abad; font-size:.9rem; }.footer p { margin:0; }.footer>a:last-child { direction:ltr; font-family:Rubik,sans-serif; font-size:.78rem; }.footer>a:last-child:hover{color:var(--blue)}
@media(max-width:800px){.wrap{width:min(100% - 32px,650px)}.live-bar-inner{grid-template-columns:1fr 1fr}.matches-card{grid-column:span 2}.top-links{grid-template-columns:repeat(3,1fr)}.top-links a:nth-child(4){border-right:1px solid var(--line)}.category-grid{grid-template-columns:1fr 1fr}.game-strip{grid-template-columns:repeat(3,1fr)}.game-item:nth-child(4){border-right:1px solid var(--line)}.game-item{border-bottom:1px solid var(--line)}.logo-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}
@media(max-width:540px){.topbar-inner{min-height:64px}.quick-link{display:none}nav{gap:16px;font-size:.87rem}.live-card{min-height:68px;padding:10px}.matches-card{grid-column:span 2}.matches-card strong{font-size:.74rem}.hero{min-height:320px;padding:65px 0 40px}.hero-arrow{width:44px;height:44px}.section-title{align-items:start;gap:10px;flex-direction:column}.category-grid{grid-template-columns:1fr}.game-strip{grid-template-columns:1fr 1fr}.game-item:nth-child(odd){border-right:1px solid var(--line)}.game-item{min-height:160px}.logo-grid{grid-template-columns:repeat(3,1fr)}.logo-tile{min-height:113px}.logo-tile img{width:51px;height:51px}.footer{padding:28px 0;align-items:start;flex-direction:column}.footer p{order:3}.top-links a{min-height:94px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.top-links a,.links a,.game-item{transition:none}}

/* Featured people and Arabic sites */
.people-section { padding-top:56px; }
.people-section .section-title, .arabic-hub .section-title { margin-bottom:10px; }
.section-intro { max-width:700px; margin:0 0 22px; color:#aeb2b5; font-size:1rem; }
.people-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--line); border-left:0; background:#0b0c0d; }
.person-card { min-width:0; border-left:1px solid var(--line); display:block; background:#0b0c0d; transition:background .18s,transform .18s; }
.person-card:hover { background:#181a1d; transform:translateY(-3px); }
.portrait { position:relative; aspect-ratio:.9; overflow:hidden; background:linear-gradient(145deg,#252a30,#111315); border-bottom:1px solid var(--line); }
.portrait::after { content:""; position:absolute; inset:auto 0 0; height:44%; background:linear-gradient(transparent,rgba(0,0,0,.78)); z-index:2; pointer-events:none; }
.portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; filter:saturate(.9) contrast(1.04); }
.portrait img:not([src]) { display:none; }
.portrait span { position:absolute; inset:0; display:grid; place-items:center; color:var(--blue); font-family:Rubik,sans-serif; font-size:3.4rem; font-weight:800; }
.portrait i { position:absolute; z-index:3; right:9px; bottom:9px; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:4px 7px; background:rgba(5,5,5,.7); color:#fff; font-family:Rubik,sans-serif; font-size:.58rem; font-style:normal; letter-spacing:.02em; direction:ltr; }
.person-copy { min-height:92px; padding:12px 11px 13px; display:flex; flex-direction:column; gap:2px; }
.person-copy b { color:#f6f6f2; font-family:Rubik,Heebo,sans-serif; font-size:.86rem; line-height:1.2; direction:rtl; }
.person-copy strong { color:var(--blue); font-size:.92rem; line-height:1.2; font-weight:600; }
.person-copy small { overflow:hidden; color:#83888c; font-size:.56rem; letter-spacing:.05em; white-space:nowrap; text-overflow:ellipsis; }
.arabic-hub { padding-bottom:0; }
.arabic-site-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.arabic-site-grid a { position:relative; min-height:86px; padding:13px 12px; display:flex; align-items:center; gap:11px; border:1px solid var(--line); background:#101114; color:#f0f1ed; transition:border-color .18s,background .18s; }
.arabic-site-grid a:hover { border-color:var(--orange); background:#191719; }
.arabic-site-grid img { width:38px; height:38px; flex:0 0 38px; border-radius:9px; background:#fff; object-fit:contain; padding:3px; }
.arabic-site-grid span { min-width:0; padding-left:14px; font-weight:600; font-size:.9rem; }
.arabic-site-grid i { position:absolute; left:11px; color:var(--orange); font-family:Rubik,sans-serif; font-size:.84rem; font-style:normal; direction:ltr; }
@media(max-width:800px){ .people-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.arabic-site-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.person-card:nth-child(5n){border-left:1px solid var(--line);}.person-card:nth-child(3n){border-left:0;} }
@media(max-width:540px){ .people-section{padding-top:44px;}.people-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.person-card:nth-child(3n){border-left:1px solid var(--line);}.person-card:nth-child(2n){border-left:0;}.person-copy{min-height:87px;padding:10px;}.person-copy b{font-size:.79rem;}.portrait i{right:7px;bottom:7px;font-size:.52rem;}.arabic-site-grid{grid-template-columns:1fr;}.arabic-site-grid a{min-height:72px;} }
/* Compact portraits: show every Instagram profile without oversized imagery. */
.people-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.portrait { width:50%; aspect-ratio:1; margin:14px auto 0; border:1px solid #3b3f43; border-radius:50%; }
.portrait::after { border-radius:50%; }
.portrait img { border-radius:50%; }
.portrait span { font-size:2rem; }
.portrait i { right:50%; bottom:2px; transform:translateX(50%); padding:3px 5px; font-size:.48rem; white-space:nowrap; }
.person-copy { min-height:82px; text-align:center; align-items:center; }
.person-copy b, .person-copy strong { font-size:.78rem; }
.person-copy small { max-width:100%; font-size:.53rem; }
.google-hub { padding-top:52px; }
.google-hub .top-links { border-top:1px solid var(--line); }
@media(max-width:800px){ .people-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.person-card:nth-child(6n){border-left:1px solid var(--line);}.person-card:nth-child(4n){border-left:0;} }
@media(max-width:540px){ .people-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.person-card:nth-child(4n){border-left:1px solid var(--line);}.person-card:nth-child(3n){border-left:0;}.portrait{margin-top:11px;}.portrait i{display:none;}.person-copy{padding:9px 6px 10px;min-height:74px;}.person-copy b,.person-copy strong{font-size:.71rem;}.person-copy small{font-size:.48rem;} }