/* ═══════════════════════════════════════════
   نزال المعرفة — Landing page
   Palette: مخطوط داكن + ذهب + نحاس + رمل
   ═══════════════════════════════════════════ */

:root{
  --ink:        #16112A;   /* حبر ليلي — الخلفية الأساسية */
  --ink-2:      #1F1838;   /* حبر أفتح — الأقسام البديلة */
  --ink-3:      #2A2148;   /* حدود وبطاقات */
  --gold:       #E7B24C;   /* الذهب الملكي — لون الهوية */
  --gold-soft:  #F3D492;
  --copper:     #C4622D;   /* نحاس دافئ — اللون الثانوي */
  --sand:       #EFE3CC;   /* رمل — النص الأساسي */
  --sand-dim:   #B6A98F;   /* نص ثانوي */
  --teal:       #2FB6AE;   /* لاعب ثانٍ */
  --rose:       #E4457E;   /* لاعب أول */

  --wrap: 1140px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;

  --f-display: 'Cairo', system-ui, sans-serif;
  --f-body:    'Tajawal', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--sand);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* زخرفة خلفية ناعمة — نسيج نقاط ذهبية خافتة */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:radial-gradient(rgba(231,178,76,.09) 1px, transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
  z-index:0;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{
  width:min(100% - 2.5rem, var(--wrap));
  margin-inline:auto;
  position:relative;
  z-index:1;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; top:-100px; right:1rem;
  background:var(--gold); color:var(--ink);
  padding:.6rem 1.2rem; border-radius:var(--r-sm);
  font-weight:700; z-index:99;
}
.skip-link:focus{ top:1rem; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ═══════════ الشعار ═══════════ */
.brand-mark{ width:34px; height:40px; flex:none; }
.brand-mark .shield{
  fill:none; stroke:var(--gold); stroke-width:2.6; stroke-linejoin:round;
}
.brand-mark .bolt{ fill:var(--gold); }

/* ═══════════ HEADER ═══════════ */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(22,17,42,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(231,178,76,.18);
}
.head-inner{
  display:flex; align-items:center; gap:1.5rem;
  padding-block:.85rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text b{
  font-family:var(--f-display); font-weight:900;
  font-size:1.05rem; letter-spacing:-.01em;
}
.brand-text i{
  font-style:normal; font-size:.68rem;
  color:var(--gold); letter-spacing:.06em;
}

.head-nav{ display:flex; gap:1.6rem; margin-inline-start:auto; }
.head-nav a{
  font-size:.94rem; color:var(--sand-dim);
  transition:color .2s;
  position:relative; padding-block:.2rem;
}
.head-nav a::after{
  content:""; position:absolute; inset-inline:0; bottom:-2px;
  height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .25s;
}
.head-nav a:hover{ color:var(--sand); }
.head-nav a:hover::after{ transform:scaleX(1); }

/* ═══════════ الأزرار ═══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem;
  font-family:var(--f-display); font-weight:700;
  border-radius:var(--r-sm);
  transition:transform .18s, box-shadow .18s, background .18s;
}
.btn:active{ transform:translateY(1px); }

.btn-sm{
  background:var(--gold); color:var(--ink);
  padding:.5rem 1.1rem; font-size:.88rem;
  box-shadow:0 3px 0 #A87A22;
}
.btn-sm:hover{ background:var(--gold-soft); }

.btn-store{
  background:linear-gradient(160deg,var(--gold),#D19A33);
  color:#1a1305;
  padding:.75rem 1.5rem;
  box-shadow:0 5px 0 #96691A, 0 14px 30px rgba(231,178,76,.24);
}
.btn-store:hover{ box-shadow:0 5px 0 #96691A, 0 18px 40px rgba(231,178,76,.34); }
.btn-store .apple{ width:26px; height:26px; fill:currentColor; flex:none; }
.store-lines{ display:flex; flex-direction:column; line-height:1.2; text-align:start; }
.store-lines i{ font-style:normal; font-size:.68rem; opacity:.75; font-weight:500; }
.store-lines b{ font-size:1.05rem; font-weight:900; }
.btn-store-lg{ padding:.9rem 2rem; }

.btn-ghost{
  color:var(--sand);
  padding:.75rem 1.4rem;
  border:1.5px solid rgba(231,178,76,.4);
}
.btn-ghost:hover{ border-color:var(--gold); background:rgba(231,178,76,.08); }

/* ═══════════ عناصر مشتركة ═══════════ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0 0 1rem;
  font-size:.78rem; font-weight:700; letter-spacing:.1em;
  color:var(--gold);
  text-transform:none;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 0 4px rgba(196,98,45,.22);
}

.sec{ padding-block:clamp(4rem,9vw,7rem); }
.sec-alt{ background:var(--ink-2); }

.sec-head{ max-width:640px; margin-bottom:3.2rem; }
.sec-head h2{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(1.7rem,4.2vw,2.6rem);
  line-height:1.3; margin:0 0 .7rem;
}
.sec-lede{ margin:0; color:var(--sand-dim); font-size:1.02rem; }

/* ═══════════ 1. HERO ═══════════ */
.hero{ position:relative; padding-block:clamp(3.5rem,8vw,6.5rem) clamp(4rem,9vw,7rem); overflow:hidden; }
.hero-glow{
  position:absolute; inset-inline-start:-10%; top:-25%;
  width:70vw; height:70vw; max-width:820px; max-height:820px;
  background:radial-gradient(circle, rgba(196,98,45,.30), transparent 62%);
  filter:blur(30px); pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}

.hero-title{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.9rem,8vw,5rem);
  line-height:1.08; margin:0 0 1.3rem;
  letter-spacing:-.02em;
}
.hero-title .ink{
  color:var(--gold);
  position:relative; display:inline-block;
}
/* التوقيع البصري: خط نحاسي يتموّج تحت الكلمة المفتاحية */
.hero-title .ink::after{
  content:""; position:absolute;
  inset-inline:-.1em; bottom:.06em; height:.16em;
  background:linear-gradient(90deg,transparent,var(--copper) 18%,var(--copper) 82%,transparent);
  border-radius:99px; opacity:.55;
}

.hero-lede{
  margin:0 0 2rem; max-width:46ch;
  font-size:1.1rem; color:var(--sand-dim);
}
.hero-lede b{ color:var(--gold-soft); font-weight:700; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

.hero-facts{
  display:flex; flex-wrap:wrap; gap:1.8rem;
  margin-top:2.6rem; padding-top:1.6rem;
  border-top:1px solid rgba(231,178,76,.18);
  font-size:.9rem; color:var(--sand-dim);
}
.hero-facts b{
  display:block;
  font-family:var(--f-display); font-weight:900;
  font-size:1.6rem; color:var(--gold); line-height:1.2;
}

/* بطاقة السؤال الحية — العنصر المميّز للصفحة */
.hero-stage{ display:flex; justify-content:center; }
.qcard{
  width:min(100%,380px);
  background:linear-gradient(165deg,#241C40,#1B1533);
  border:1px solid rgba(231,178,76,.28);
  border-radius:var(--r-lg);
  padding:1.5rem;
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  transform:rotate(-1.6deg);
}
.qcard-top{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; }
.qcat{
  font-family:var(--f-display); font-weight:700; font-size:.78rem;
  background:rgba(196,98,45,.2); color:var(--gold-soft);
  border:1px solid rgba(231,178,76,.3);
  padding:.25rem .8rem; border-radius:99px;
  white-space:nowrap;
}
.qtimer{
  flex:1; height:6px; border-radius:99px;
  background:rgba(255,255,255,.09); overflow:hidden;
}
.qtimer-bar{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--gold),var(--copper));
  transform-origin:right;
}
.qtext{
  font-family:var(--f-display); font-weight:700;
  font-size:1.22rem; line-height:1.6; margin:0 0 1.2rem;
  min-height:2.6em;
}
.qopts{ display:grid; gap:.55rem; }
.qopts li{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-sm);
  padding:.62rem 1rem;
  font-size:.95rem;
  transition:background .25s, border-color .25s, color .25s;
}
.qopts li.right{
  background:rgba(47,182,174,.18);
  border-color:var(--teal);
  color:#CFF7F4;
  font-weight:700;
}
.qfoot{
  display:flex; align-items:center; gap:.7rem;
  margin-top:1.2rem; padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.8rem;
}
.pchip{
  font-family:var(--f-display); font-weight:700;
  padding:.2rem .75rem; border-radius:99px;
}
.pchip.p1{ background:rgba(228,69,126,.18); color:#F7A8C6; border:1px solid rgba(228,69,126,.45); }
.pchip.p2{ background:rgba(47,182,174,.16); color:#8FE4DE; border:1px solid rgba(47,182,174,.45); }
.qvs{ color:var(--sand-dim); }

/* ═══════════ 2. لقطات الشاشة ═══════════ */
.phones{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,3vw,2.4rem);
  align-items:end;
}
.phone{ margin:0; text-align:center; }
.phone-lift{ transform:translateY(-1.8rem); }

.phone-frame{
  position:relative;
  aspect-ratio:9/19.5;
  background:#0E0A1C;
  border:9px solid #2B2350;
  border-radius:34px;
  box-shadow:0 22px 48px rgba(0,0,0,.5);
  overflow:hidden;
}
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:38%; height:18px;
  background:#2B2350;
  border-radius:0 0 12px 12px;
  z-index:2;
}
.phone-frame img{
  width:100%; height:100%; object-fit:cover;
}
/* حالة الصورة المفقودة — عنصر نائب أنيق */
.phone-frame img.ph{
  background:
    linear-gradient(135deg,rgba(231,178,76,.12),rgba(196,98,45,.10)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px);
}
.phone figcaption{
  margin-top:1rem;
  font-family:var(--f-display); font-weight:700; font-size:.95rem;
  color:var(--sand-dim);
}

/* ═══════════ 3. كيف تلعب ═══════════ */
.modes{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.2rem; margin-bottom:3.4rem;
}
.mode{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(231,178,76,.2);
  border-inline-start:4px solid var(--copper);
  border-radius:var(--r-md);
  padding:1.4rem 1.6rem;
}
.mode-name{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--f-display); font-weight:900;
  font-size:1.18rem; margin:0 0 .4rem;
}
.mode-icon{ font-size:1.3rem; }
.mode-desc{ margin:0; color:var(--sand-dim); font-size:.96rem; }

.steps{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.2rem,2.6vw,2rem);
  margin-top:1.6rem; /* مساحة لشارة الرقم البارزة فوق البطاقة */
}
.step{
  position:relative;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md);
  padding:1.9rem 1.4rem 1.4rem;
}
.step-num{
  position:absolute; top:-16px; inset-inline-start:1.3rem;
  width:38px; height:38px;
  display:grid; place-items:center;
  background:var(--gold); color:var(--ink);
  font-family:var(--f-display); font-weight:900; font-size:1.05rem;
  border-radius:50%;
  box-shadow:0 4px 0 #96691A;
}
.step-media{
  margin:.9rem 0 1.1rem;
  aspect-ratio:4/3;
  border-radius:var(--r-sm);
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(231,178,76,.12),rgba(196,98,45,.10)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px);
  border:1px dashed rgba(231,178,76,.3);
}
.step-media img{ width:100%; height:100%; object-fit:cover; }
.step-media img.ph{ opacity:0; }
.step-title{
  font-family:var(--f-display); font-weight:900;
  font-size:1.05rem; margin:0 0 .45rem;
}
.step-body{ margin:0; font-size:.93rem; color:var(--sand-dim); }

/* ═══════════ 4. الإحصائيات ═══════════ */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.5vw,1.8rem);
}
.stat{
  background:linear-gradient(165deg,rgba(231,178,76,.10),rgba(196,98,45,.05));
  border:1px solid rgba(231,178,76,.26);
  border-radius:var(--r-md);
  padding:2rem 1.6rem;
  text-align:center;
}
.stat-icon{ font-size:1.7rem; line-height:1; margin-bottom:.7rem; }
.stat-value{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.1rem,5.5vw,3rem);
  color:var(--gold); line-height:1.1;
  font-variant-numeric:tabular-nums;
  margin:0;
}
.stat-label{ margin:.5rem 0 0; color:var(--sand-dim); font-size:.95rem; }

/* ═══════════ 5. الصدارة ═══════════ */
.lb-card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(231,178,76,.22);
  border-radius:var(--r-md);
  overflow:hidden;
}
.lb{ width:100%; border-collapse:collapse; }
.lb thead th{
  background:rgba(231,178,76,.10);
  font-family:var(--f-display); font-weight:700; font-size:.85rem;
  color:var(--gold);
  text-align:start;
  padding:.9rem 1.2rem;
  border-bottom:1px solid rgba(231,178,76,.22);
  white-space:nowrap;
}
.lb td{
  padding:.85rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.96rem;
}
.lb tbody tr:last-child td{ border-bottom:0; }
.lb tbody tr{ transition:background .2s; }
.lb tbody tr:hover{ background:rgba(231,178,76,.06); }

.c-rank{ width:64px; }
.c-points{ text-align:end; }
.lb td.c-points{
  text-align:end;
  font-family:var(--f-display); font-weight:900;
  color:var(--gold-soft);
  font-variant-numeric:tabular-nums;
}
.rank-badge{
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.07);
  font-family:var(--f-display); font-weight:900; font-size:.86rem;
  color:var(--sand-dim);
}
.rank-1{ background:linear-gradient(160deg,var(--gold),#C08D24); color:#1a1305; }
.rank-2{ background:linear-gradient(160deg,#D3D6DE,#9AA0AC); color:#1a1305; }
.rank-3{ background:linear-gradient(160deg,#D08B54,#A8642F); color:#1a1305; }

.player{ display:flex; align-items:center; gap:.75rem; }
.avatar{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-size:1rem; flex:none;
  border:1px solid rgba(255,255,255,.14);
}
.player-name{ font-weight:700; }

.title-chip{
  display:inline-block;
  font-size:.8rem; font-weight:700;
  padding:.15rem .7rem; border-radius:99px;
  border:1px solid currentColor;
  white-space:nowrap;
}
.t-student{ color:#9BB3D4; }
.t-knower{  color:#7FC9A8; }
.t-sage{    color:#C7A2E8; }
.t-scholar{ color:#E9A26B; }
.t-genius{  color:var(--gold); background:rgba(231,178,76,.12); }

.lb-note{
  margin:1.1rem 0 0; text-align:center;
  font-size:.86rem; color:var(--sand-dim);
}

.lb-empty{ text-align:center; color:var(--sand-dim); padding:2rem; }

/* ═══════════ CTA ═══════════ */
.cta-band{
  padding-block:clamp(3.5rem,7vw,5.5rem);
  background:linear-gradient(160deg,rgba(196,98,45,.22),rgba(231,178,76,.08));
  border-block:1px solid rgba(231,178,76,.22);
}
.cta-inner{ text-align:center; }
.cta-title{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(1.8rem,5vw,2.8rem);
  margin:0 0 .6rem;
}
.cta-lede{ margin:0 0 2rem; color:var(--sand-dim); }

/* ═══════════ FOOTER ═══════════ */
.site-foot{
  background:#120E22;
  padding-top:3.2rem;
  border-top:1px solid rgba(231,178,76,.16);
}
.foot-grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr;
  gap:2.4rem; padding-bottom:2.4rem;
}
.foot-brand{ display:flex; align-items:center; gap:.9rem; }
.foot-brand p{
  margin:0;
  font-family:var(--f-display); font-weight:900; font-size:1.05rem;
}
.foot-brand small{
  font-family:var(--f-body); font-weight:400;
  font-size:.75rem; color:var(--gold);
}

.foot-links{ display:flex; flex-direction:column; gap:.6rem; }
.foot-links a{ color:var(--sand-dim); font-size:.94rem; transition:color .2s; }
.foot-links a:hover{ color:var(--gold); }

.foot-social-label{
  margin:0 0 .8rem;
  font-family:var(--f-display); font-weight:700; font-size:.9rem;
}
.foot-social ul{ display:flex; gap:.7rem; }
.foot-social a{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(231,178,76,.2);
  transition:background .2s, border-color .2s, transform .2s;
}
.foot-social a:hover{
  background:rgba(231,178,76,.14);
  border-color:var(--gold);
  transform:translateY(-2px);
}
.foot-social svg{ width:19px; height:19px; fill:var(--sand); }

.foot-bottom{
  border-top:1px solid rgba(255,255,255,.07);
  padding-block:1.3rem;
}
.foot-bottom p{
  margin:0; text-align:center;
  font-size:.85rem; color:var(--sand-dim);
}

/* ═══════════ الحركة ═══════════ */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{ opacity:1; transform:none; }

/* ═══════════ الاستجابة ═══════════ */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-stage{ order:-1; }
  .qcard{ transform:none; }
  .head-nav{ display:none; }
  .btn-sm{ margin-inline-start:auto; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}

@media (max-width:700px){
  body{ font-size:16px; }
  .phones{ grid-template-columns:1fr; max-width:300px; margin-inline:auto; }
  .phone-lift{ transform:none; }
  .modes{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:2rem; }
  .stats{ grid-template-columns:1fr; }
  .hero-facts{ gap:1.2rem 2rem; }
  .foot-grid{ grid-template-columns:1fr; gap:1.8rem; }

  /* الجدول: إخفاء عمود اللقب على الشاشات الضيقة جداً يفقد معلومة،
     لذا نضغط الحشوات بدلاً من الإخفاء */
  .lb thead th, .lb td{ padding:.7rem .6rem; font-size:.88rem; }
  .c-rank{ width:46px; }
  .avatar{ width:28px; height:28px; font-size:.85rem; }
  .title-chip{ font-size:.72rem; padding:.1rem .5rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}