/* ===== جلدة - الواجهة الأمامية ===== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

:root{
  --bg:#0B1120; --surface:#161B27; --surface2:#1E2536; --divider:#273043;
  --primary:#00D26A; --primary-d:#00A957; --text:#F5F7FA; --text2:#9AA4B2;
  --live:#FF3B47; --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Cairo',sans-serif}
body{background:var(--bg);color:var(--text);direction:rtl;line-height:1.7}
a{text-decoration:none;color:inherit}
.container{max-width:1140px;margin:0 auto;padding:0 20px}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,17,32,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--divider)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-size:24px;font-weight:800}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{color:var(--text2);font-weight:600;transition:.15s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.btn-nav{background:var(--primary);color:#fff!important;padding:9px 18px;border-radius:12px}
.btn-nav:hover{background:var(--primary-d)}

/* ===== Hero ===== */
.hero{padding:60px 0 40px;background:radial-gradient(circle at 80% 20%, rgba(0,210,106,.12), transparent 50%)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero-text h1{font-size:64px;font-weight:800;line-height:1.1}
.hero-text h1 .dot{color:var(--primary)}
.lead{font-size:22px;color:var(--primary);font-weight:700;margin:8px 0 16px}
.hero-desc{color:var(--text2);font-size:17px;max-width:520px;margin-bottom:28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.store-btn{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--divider);padding:12px 20px;border-radius:14px;transition:.15s}
.store-btn:hover{border-color:var(--primary);transform:translateY(-2px)}
.store-ic{font-size:24px}
.store-btn small{display:block;font-size:11px;color:var(--text2)}
.store-btn strong{font-size:16px}

/* phone mockup */
.hero-visual{display:flex;justify-content:center}
.phone{position:relative;width:230px;height:460px;background:var(--surface);border:6px solid var(--surface2);border-radius:36px;box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden}
.phone-top{height:60px;background:linear-gradient(135deg,var(--primary),var(--primary-d))}
.phone-card{margin:-20px 16px 0;background:var(--surface2);border-radius:14px;padding:14px;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.live-tag{color:var(--live);font-size:11px;font-weight:700;margin-bottom:10px}
.pc-teams{display:flex;flex-direction:column;gap:10px}
.pc-team{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.pc-score{font-size:20px;font-weight:800;color:var(--primary);text-align:center}
.pc-min{color:var(--live);font-size:12px;font-weight:700;text-align:center;margin-top:8px}
.logo{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--c) 20%,transparent);border:1.5px solid var(--c);color:var(--c);font-size:9px;font-weight:700}
.phone-ball{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:40px;animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}

/* ===== Sections ===== */
.section{padding:50px 0}
.sec-title{font-size:30px;font-weight:800;margin-bottom:24px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.sec-head .sec-title{margin:0}
.see-all{color:var(--primary);font-weight:700}
.page-title{font-size:38px;font-weight:800;margin-bottom:20px}

/* live grid */
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.live-card{background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius);padding:18px}
.lc-comp{color:var(--text2);font-size:12px;margin-bottom:12px}
.lc-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lc-team{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;flex:1}
.lc-row .lc-team:last-child{justify-content:flex-end}
.lc-score{font-size:18px;font-weight:800;color:var(--primary)}
.lc-min{color:var(--live);font-size:12px;font-weight:700;margin-top:10px;text-align:center}

/* features */
.features{background:var(--surface)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.feat{text-align:center;padding:24px}
.feat-ic{font-size:44px;margin-bottom:12px}
.feat h3{font-size:18px;margin-bottom:8px}
.feat p{color:var(--text2);font-size:14px}

/* news grid */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.news-card{background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius);overflow:hidden;transition:.18s}
.news-card:hover{transform:translateY(-4px);border-color:var(--primary)}
.nc-img{height:150px;display:flex;align-items:center;justify-content:center;font-size:54px;color:rgba(255,255,255,.15)}
.nc-body{padding:16px}
.nc-cat{display:inline-block;background:rgba(0,210,106,.15);color:var(--primary);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:10px}
.nc-body h3{font-size:16px;line-height:1.5;margin-bottom:8px}
.nc-excerpt{color:var(--text2);font-size:13px;margin-bottom:10px}
.nc-meta{color:var(--text2);font-size:12px}

/* tabs */
.cat-tabs{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}
.cat-tabs a{padding:8px 18px;border-radius:20px;background:var(--surface);color:var(--text2);font-weight:600;font-size:14px}
.cat-tabs a.active{background:var(--primary);color:#fff}

/* article */
.article{padding:40px 0}
.article-inner{max-width:760px}
.crumbs{color:var(--text2);font-size:13px;margin-bottom:16px}
.crumbs a{color:var(--primary)}
.art-cat{display:inline-block;background:rgba(0,210,106,.15);color:var(--primary);font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:14px}
.art-title{font-size:34px;font-weight:800;line-height:1.4;margin-bottom:12px}
.art-meta{color:var(--text2);font-size:14px;margin-bottom:20px}
.art-cover{height:300px;border-radius:var(--radius);background:linear-gradient(135deg,var(--primary),var(--bg));display:flex;align-items:center;justify-content:center;font-size:90px;color:rgba(255,255,255,.2);margin-bottom:24px}
.art-lead{font-size:19px;font-weight:600;margin-bottom:18px;color:var(--text)}
.art-body{font-size:17px;color:var(--text2);line-height:2}
.art-share{display:flex;align-items:center;gap:12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--divider)}
.art-share span{color:var(--text2);font-size:14px}
.art-share a{background:var(--surface);padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600}
.art-share a:hover{background:var(--primary);color:#fff}

.empty{color:var(--text2);text-align:center;padding:40px}

/* footer */
.footer{background:var(--surface);border-top:1px solid var(--divider);padding:40px 0;margin-top:40px;text-align:center}
.footer .brand{font-size:22px;margin-bottom:8px}
.footer p{color:var(--text2);font-size:14px}
.footer-links{display:flex;justify-content:center;gap:20px;margin:16px 0}
.footer-links a{color:var(--text2);font-weight:600}
.footer-links a:hover{color:var(--primary)}
.copy{font-size:12px;color:var(--text2);margin-top:12px}

/* ===== Responsive ===== */
@media(max-width:860px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-text h1{font-size:46px}
  .hero-cta{justify-content:center}
  .hero-visual{margin-top:20px}
  .nav-links{gap:14px}
  .nav-links a:not(.btn-nav){display:none}
}