/* ===========================================================
   agentX الشرقية — Landing Page Styles
   =========================================================== */
:root{
  --bg:#060b1f;
  --bg-2:#0a1230;
  --bg-3:#0c1740;
  --blue:#2b7fff;
  --blue-bright:#4d96ff;
  --blue-soft:#1b6dff;
  --green:#36d98a;
  --green-bright:#54e89c;
  --text:#eaf1ff;
  --muted:#9fb0d0;
  --line:rgba(120,150,210,.18);
  --card:rgba(255,255,255,.035);
  --card-bd:rgba(120,160,255,.16);
  --white:#ffffff;
  --ink:#0a1740;
  --ink-blue:#1b5fd9;
  --radius:22px;
  --maxw:1180px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --font:"Almarai",system-ui,Segoe UI,Tahoma,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
section{position:relative}

/* ===== ambient background ===== */
.bg-stars{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1200px 600px at 80% -5%, rgba(43,127,255,.18), transparent 60%),
  radial-gradient(1000px 600px at 0% 20%, rgba(54,217,138,.10), transparent 55%),
  linear-gradient(180deg,#060b1f, #070d24 40%, #060b1f);}
.bg-stars::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(1.4px 1.4px at 20% 30%, #cfe0ff 50%, transparent),
    radial-gradient(1.2px 1.2px at 70% 60%, #bcd4ff 50%, transparent),
    radial-gradient(1.6px 1.6px at 40% 80%, #9fd9ff 50%, transparent),
    radial-gradient(1.1px 1.1px at 90% 20%, #d9e8ff 50%, transparent),
    radial-gradient(1.3px 1.3px at 55% 15%, #bfe6ff 50%, transparent);
  background-size:520px 520px;animation:drift 60s linear infinite}
@keyframes drift{to{background-position:520px 520px}}

/* ===== headings ===== */
.section-title{
  font-weight:400;font-size:clamp(34px,4.8vw,58px);letter-spacing:.5px;
  text-align:center;margin-bottom:32px;line-height:1.35;
  color:#fff;text-shadow:0 0 28px rgba(43,127,255,.3)}
/* unified title look — keep class names but render identically */
.title-grad,.title-blue{color:#fff;-webkit-text-fill-color:#fff;
  background:none;text-shadow:0 0 28px rgba(43,127,255,.3)}
.about__title{color:var(--green-bright);-webkit-text-fill-color:var(--green-bright);
  font-size:clamp(34px,4.8vw,58px);font-weight:400;text-align:right;letter-spacing:.5px;text-shadow:0 0 28px rgba(54,217,138,.35)}
.lead{text-align:center;color:#fff;max-width:680px;margin:0 auto 46px;font-size:clamp(14px,1.7vw,18px)}
.en{font-family:"Almarai",sans-serif;direction:ltr;display:inline-block}

/* ===== NAV ===== */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;transition:.35s}
.nav__inner{display:flex;align-items:center;justify-content:flex-start;gap:34px;
  max-width:min(1440px, 95vw);margin-inline:auto;padding:16px 20px;transition:.35s}
.nav__links a{white-space:nowrap}
/* nudge the logo a bit toward the right edge (start side in RTL) */
.nav__inner > a:first-child{margin-inline-start:-6px}
.nav.scrolled{backdrop-filter:blur(14px);background:rgba(7,12,30,.82);border-bottom:1px solid var(--line)}
/* legal & contact pages: solid header (hides content behind it) + gradient divider */
body.legal-page .nav, body.contact-page .nav{
  background:rgba(6,11,25,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
body.legal-page .nav::after, body.contact-page .nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(55,227,147,.55) 30%,rgba(43,127,255,.55) 70%,transparent)}
.nav.scrolled .nav__inner{padding-block:10px}
.nav__logo{display:inline-block;height:74px;width:158px;flex:none;background-color:#fff;
  -webkit-mask:url("../assets/logo/whitelogo.png") center/contain no-repeat;
          mask:url("../assets/logo/whitelogo.png") center/contain no-repeat;
  transition:height .35s,width .35s,background-color .3s}
.nav.scrolled .nav__logo{height:64px;width:136px}
a:hover>.nav__logo{animation:logoHue 1.8s linear infinite}
@keyframes logoHue{0%,100%{background-color:#fff}
  35%{background-color:var(--green-bright)}
  70%{background-color:var(--blue-bright)}}
@media (prefers-reduced-motion:reduce){
  a:hover>.nav__logo{animation:none;background-color:var(--green-bright)}}
.nav__links{display:flex;gap:30px;align-items:center;font-size:18px;font-weight:700}
.nav__links a{color:#d7e3ff;opacity:.92;transition:.25s;position:relative;padding:4px 2px}
.nav__links a::after{content:"";position:absolute;inset-inline:0;inset-block-end:-4px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--green));transform:scaleX(0);transition:.3s;border-radius:2px}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{margin-inline-start:auto;padding:13px 30px;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--green-bright));
  color:#06231a;font-weight:800;font-size:18px;box-shadow:0 10px 30px rgba(54,217,138,.5);transition:.25s;white-space:nowrap;letter-spacing:.2px;
  animation:ctaPulse 2.4s ease-in-out infinite}
.nav__cta:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 36px rgba(54,217,138,.6);animation-play-state:paused}
@keyframes ctaPulse{
  0%,100%{transform:translateY(0);box-shadow:0 10px 30px rgba(54,217,138,.5)}
  50%{transform:translateY(-4px);box-shadow:0 16px 40px rgba(54,217,138,.7)}}
@media (prefers-reduced-motion:reduce){.nav__cta{animation:none}}
/* group of nav CTAs (سجل معنا + كون فريق) */
.nav__ctas{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.nav__ctas .nav__cta{margin-inline-start:0}
/* secondary "form a team" button — outline style, no pulse */
.nav__cta--team{background:linear-gradient(90deg,var(--blue),var(--blue-bright));color:#fff;border:0;
  box-shadow:0 10px 30px rgba(43,127,255,.45);animation:none}
.nav__cta--team:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(43,127,255,.6)}
.nav__cta::after{display:none}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__toggle span{width:26px;height:2.6px;background:#fff;border-radius:3px;transition:.3s}
.nav__toggle.active span:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
.nav__toggle.active span:nth-child(2){opacity:0}
.nav__toggle.active span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:130px 20px 70px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(to bottom, #000 60%, rgba(0,0,0,.35) 85%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 60%, rgba(0,0,0,.35) 85%, transparent 100%)}
/* Hero video — only activated by JS after a bandwidth check (desktop/tablet
   only; mobile always keeps the static .hero__bg image). Sits above the
   image and fades in once playable; stays at opacity:0 (image still shows)
   if the connection check fails or the file errors out. */
.hero__video{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s linear;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 60%, rgba(0,0,0,.35) 85%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 60%, rgba(0,0,0,.35) 85%, transparent 100%)}
.hero__video.is-active{opacity:1}
/* flowing light pulses along the blue & green road trails */
.hero__fx{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:1;transition:opacity .6s ease}
/* The animated light-pulse dots are decoration for the static hero image
   only — once the hero video takes over, hide them so they don't clash
   with the video's own motion. */
.hero.hero--video-active .hero__fx{opacity:0}
.hero__fx svg{width:100%;height:100%;display:block}
.hfx{fill:none;stroke-width:5.5;stroke-linecap:round;stroke-dasharray:0.1 8;filter:url(#heroGlow)}
.hfx--b{stroke:#7ab8ff;animation:hfxFlow 1.8s linear infinite}
.hfx--g{stroke:#7df2bd;animation:hfxFlow 1.8s linear infinite}
@keyframes hfxFlow{to{stroke-dashoffset:-8}}
/* glowing dots where the fingers touch the transparent screens */
.htouch{filter:url(#heroGlow);transform-box:fill-box;transform-origin:center;
  animation:touchPulse 1.8s ease-in-out infinite}
.htouch--b{fill:#bcdcff}
.htouch--g{fill:#bcffe2}
@keyframes touchPulse{0%,100%{opacity:.45;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.htouch{animation:none}}
@media (prefers-reduced-motion:reduce){.hfx{animation:none}}
.hero__logo{position:relative;width:min(560px,82vw);aspect-ratio:1372/519;
  filter:drop-shadow(0 12px 40px rgba(43,127,255,.5));animation:heroFloat 5s ease-in-out infinite}
.hero__logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hero__logo-img--g{opacity:0;animation:logoCross 4s ease-in-out infinite}
@keyframes heroFloat{50%{transform:translateY(-18px)}}
@keyframes logoCross{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}
@keyframes floaty{50%{transform:translateY(-10px)}}

.hero__timer-row{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin:36px auto 16px}
.countdown{display:flex;gap:16px;justify-content:center}
.hero__cta-slim{display:inline-block;padding:15px 38px;border-radius:999px;border:2px solid var(--blue);
  color:var(--blue-bright);font-weight:800;font-size:21px;background:rgba(43,127,255,.08);
  transition:.25s;white-space:nowrap;backdrop-filter:blur(4px);animation:ctaGlow 1.8s ease-in-out infinite}
.hero__cta-slim:hover{background:rgba(43,127,255,.18);border-color:var(--blue-bright);
  color:#fff;transform:translateY(-2px);animation-play-state:paused}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 0 0 rgba(43,127,255,0),0 0 10px rgba(43,127,255,.25);border-color:var(--blue)}
  50%{box-shadow:0 0 22px rgba(77,150,255,.85),0 0 40px rgba(43,127,255,.5);border-color:var(--blue-bright)}}
@media (prefers-reduced-motion:reduce){.hero__cta-slim{animation:none}}
/* team variant next to the timer — green accent */
.hero__cta-slim--team{border-color:var(--green);color:var(--green-bright);background:rgba(54,217,138,.08);animation-name:ctaGlowGreen}
.hero__cta-slim--team:hover{background:rgba(54,217,138,.18);border-color:var(--green-bright);color:#fff}
@keyframes ctaGlowGreen{
  0%,100%{box-shadow:0 0 10px rgba(54,217,138,.25);border-color:var(--green)}
  50%{box-shadow:0 0 22px rgba(84,232,156,.85),0 0 40px rgba(54,217,138,.5);border-color:var(--green-bright)}}
.cd-block{position:relative;min-width:96px;padding:18px 12px 14px;text-align:center;
  background-image:url("../assets/hero/timerblock.png");background-size:100% 100%;background-repeat:no-repeat;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.45))}
.cd-block b{display:block;font-size:56px;font-weight:800;line-height:1;color:#fff}
.cd-block small{display:block;margin-top:10px;color:var(--muted);font-size:13px}
.hero__round{color:var(--green-bright);font-weight:800;font-size:clamp(15px,2vw,20px);margin-top:8px}
.hero__actions-row{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:22px}
.hero__pill{display:inline-block;margin-top:22px;padding:13px 34px;border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--green-bright));color:#06231a;font-weight:800;
  font-size:clamp(14px,1.8vw,17px);box-shadow:0 14px 34px rgba(54,217,138,.4);transition:.28s}
.hero__pill:hover{transform:translateY(-3px) scale(1.02)}

/* ===== INTRO photo (1.jpg) with overlaid subtitle ===== */
.intro{padding:40px 0 30px;text-align:center}
.intro__brand{width:min(420px,68vw);margin:0 auto 30px;opacity:.97}
.intro__photo{position:relative;border-radius:26px;overflow:hidden;max-width:1180px;margin-inline:auto;
  border:1px solid transparent;box-shadow:var(--shadow);
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,0) 100%)}
.intro__photo img{width:100%;height:100%;object-fit:cover;display:block}
.intro__caption{position:absolute;inset-inline:0;inset-block-end:0;padding:60px 30px 100px;
  background:linear-gradient(180deg,rgba(6,16,48,0),rgba(7,17,52,.55) 35%,rgba(8,20,60,.92));
  font-weight:800;color:#fff;font-size:clamp(22px,3.2vw,38px);line-height:1.65;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.intro__caption b{color:var(--green-bright)}
/* الجوال فقط: التعليق موضوع بشكل مطلق أسفل الصورة، وارتفاعه يأتي من النص
   زائد حشوة 160px (60 أعلى + 100 أسفل) وهي مقاس الديسكتوب. على شاشة 375px
   يصبح ارتفاع الصورة 187px فقط (نسبة 16:9 لعرض 331px) بينما التعليق 305px،
   فتُقصّ أول سطرين من الأعلى بسبب overflow:hidden على .intro__photo.
   العلاج: ارتفاع أدنى للصورة + حشوة وخط بمقاس الجوال + تعطيل الـ <br> المكتوب
   في HTML ليتدفق النص طبيعيًا. كل ذلك داخل هذا الاستعلام فلا يتأثر الديسكتوب. */
@media (max-width:640px){
  .intro__photo{min-height:250px}
  .intro__caption{padding:30px 18px 24px;font-size:clamp(15px,4.5vw,19px);line-height:1.6}
  .intro__caption br{display:none}
}

/* ===== ABOUT ===== */
.about{padding:100px 0}
.about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center}
.about__text{position:relative;z-index:1}
.about__edition{color:#fff;font-weight:800;letter-spacing:1px;margin:6px 0 12px;font-size:26px;text-align:right}
.about__line{width:240px;max-width:70%;height:auto;margin:0 0 22px;display:block}
.about__p{color:#d4e0f7;margin-bottom:20px;font-size:clamp(17px,2.1vw,21px);line-height:2;text-align:justify;text-align-last:start}
.about__p b{color:#fff}
.about__x{display:flex;align-items:center;justify-content:center}
.about__x img{width:min(560px,100%);filter:drop-shadow(0 0 40px rgba(54,217,138,.35));animation:floaty 7s ease-in-out infinite}

/* ===== GOALS (block.png cards) ===== */
.goals{padding:90px 0}
.goals__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:1340px;margin-inline:auto}
.goal{position:relative;aspect-ratio:414/426;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:14% 12% 12%;
  background-image:url("../assets/block.png");background-size:100% 100%;background-repeat:no-repeat;transition:.35s}
.goal:hover{transform:translateY(-8px)}
/* shared entrance: blocks fly in from outside toward center, smooth + blur */
@keyframes blockEnter{
  0%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.74);filter:blur(10px)}
  50%{opacity:1;filter:blur(0)}
  80%{transform:translate(0,0) scale(1.035)}
  100%{opacity:1;transform:translate(0,0) scale(1);filter:blur(0)}
}
/* entrance animation for goal blocks (converge from the sides) */
.goals__grid .goal.reveal{opacity:0;transform:none;transition:.35s}
.goals__grid .goal.reveal.in{opacity:1;animation:blockEnter 1.15s cubic-bezier(.16,.84,.32,1) backwards}
.goals__grid .goal.reveal.in:nth-child(1){--dx:240px;--dy:0px;animation-delay:.05s}
.goals__grid .goal.reveal.in:nth-child(2){--dx:0px;--dy:110px;animation-delay:.22s}
.goals__grid .goal.reveal.in:nth-child(3){--dx:-240px;--dy:0px;animation-delay:.05s}
.goals__grid .goal.reveal.in .goal__icon{animation:goalIcon .8s ease backwards}
.goals__grid .goal.reveal.in:nth-child(1) .goal__icon{animation-delay:.5s}
.goals__grid .goal.reveal.in:nth-child(2) .goal__icon{animation-delay:.62s}
.goals__grid .goal.reveal.in:nth-child(3) .goal__icon{animation-delay:.5s}
@keyframes goalIcon{0%{opacity:0;transform:translateY(18px) scale(.5)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .goals__grid .goal.reveal,.goals__grid .goal.reveal.in,
  .goals__grid .goal.reveal.in .goal__icon{animation:none;opacity:1;transform:none}
}
.goal__media{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:6%}
.goal__icon{height:auto;width:min(72%,264px);filter:drop-shadow(0 6px 18px rgba(43,127,255,.5))}
.goal h3{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(24px,3.2vw,34px);font-weight:800;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.goal p{color:#fff;font-size:clamp(16px,2vw,20px);line-height:1.7}

/* ===== TRACKS (blockw.png cards) ===== */
.tracks{padding:90px 0}
.tracks .container{max-width:1480px}
.tracks__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(430px,auto);gap:12px;max-width:1600px;margin-inline:auto;justify-content:center;align-items:stretch}
.track{position:relative;min-width:0;min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:14px;padding:8%;
  background-image:url("../assets/blockw.png");background-size:100% 100%;background-repeat:no-repeat;transition:.35s}
.track:hover{transform:translateY(-6px)}
/* entrance animation for track blocks (slide in from the sides) */
.tracks__grid .track.reveal{opacity:0;transform:none;transition:.35s}
.tracks__grid .track.reveal.in{opacity:1;animation:blockEnter 1.15s cubic-bezier(.16,.84,.32,1) backwards}
.tracks__grid .track.reveal.in:nth-child(1){--dx:300px;animation-delay:.08s}
.tracks__grid .track.reveal.in:nth-child(2){--dx:-300px;animation-delay:.08s}
.tracks__grid .track.reveal.in:nth-child(3){--dx:300px;animation-delay:.28s}
.tracks__grid .track.reveal.in:nth-child(4){--dx:-300px;animation-delay:.28s}
.tracks__grid .track.reveal.in .track__bot{animation:trackBot .85s ease backwards}
.tracks__grid .track.reveal.in:nth-child(1) .track__bot{animation-delay:.42s}
.tracks__grid .track.reveal.in:nth-child(2) .track__bot{animation-delay:.42s}
.tracks__grid .track.reveal.in:nth-child(3) .track__bot{animation-delay:.62s}
.tracks__grid .track.reveal.in:nth-child(4) .track__bot{animation-delay:.62s}
@keyframes trackBot{0%{opacity:0;transform:translateY(20px) scale(.55)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .tracks__grid .track.reveal,.tracks__grid .track.reveal.in,
  .tracks__grid .track.reveal.in .track__bot{animation:none;opacity:1;transform:none}
}
.track__body{flex:none;text-align:center;display:flex;flex-direction:column;align-items:center}
.track__body h3{font-size:21px;font-weight:800;margin:0;color:#fff;line-height:1.5}
/* لمنع كسر عبارة داخل عنوان البطاقة إلى سطرين */
.track__body h3 .nb{white-space:nowrap}
.track__more{display:block;width:fit-content;margin:auto auto 0;padding:16px 52px;border-radius:999px;font-size:26px;font-weight:800;
  background:linear-gradient(90deg,var(--green),var(--green-bright));color:#06231a;transition:.25s}
.track__more:hover{transform:translateY(-2px)}
.track__bot{width:92%;max-width:300px;height:auto;object-fit:contain;flex:none;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));transform-origin:bottom center}
.track:hover .track__bot{animation:botHop 2.2s ease-in-out infinite}
@keyframes botHop{0%,68%,100%{transform:translateY(0) scale(1,1)}
  74%{transform:translateY(0) scale(1.05,.92)}
  85%{transform:translateY(-14px) scale(.97,1.04)}
  94%{transform:translateY(0) scale(1.03,.97)}}

/* ===== DETAILS (people photos + item lists) ===== */
.details{padding:80px 0 100px}
.details__sub{text-align:center;font-size:clamp(34px,4.8vw,58px);font-weight:400;letter-spacing:.5px;color:#fff;margin-bottom:22px}
.details__sub--start{text-align:center}
.details__sub span{color:#fff}
/* أكبر قليلًا (16px ← 18px) وأبيض ناصع */
.details__note{text-align:center;color:#fff;font-size:20.5px;margin-bottom:30px}
.details__split{display:grid;grid-template-columns:1fr 1.05fr;gap:30px;align-items:center;margin-bottom:30px}
.details__split--rev{grid-template-columns:1.05fr 1fr}
.details__split--wide{gap:90px}
.details__split--wide:not(.details__split--rev){grid-template-columns:1.85fr 1fr}
.details__split--wide.details__split--rev{grid-template-columns:1fr 1.85fr}
@media (max-width:960px){.details__split--wide{gap:30px;grid-template-columns:1fr}}
.details__photo{display:flex;align-items:center;justify-content:center}
.details__photo img{width:100%;max-width:430px;border-radius:18px;object-fit:contain;filter:drop-shadow(0 20px 50px rgba(0,0,0,.5));
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,0) 100%)}
.dlist{display:flex;flex-direction:column;gap:16px}
.dlist__item{display:flex;align-items:center;gap:18px;padding:16px 20px;border-radius:16px;transition:.3s}
.dlist__item img{width:54px;height:54px;object-fit:contain;flex:none;
  filter:drop-shadow(0 0 9px rgba(54,217,138,.55));animation:iconGlow 2.6s ease-in-out infinite}
@keyframes iconGlow{
  0%,100%{filter:drop-shadow(0 0 8px rgba(54,217,138,.5)) brightness(1.04)}
  50%{filter:drop-shadow(0 0 16px rgba(54,217,138,.85)) drop-shadow(0 0 28px rgba(54,217,138,.45)) brightness(1.3)}
}
@media (prefers-reduced-motion:reduce){
  .dlist__item img{animation:none;filter:drop-shadow(0 0 12px rgba(54,217,138,.7))}
}
.dlist__item h4{font-size:clamp(15px,1.9vw,19px);font-weight:800;color:#fff;margin-bottom:2px}
.dlist__item p{color:var(--muted);font-size:13.5px;line-height:1.6}

/* مدة الهاكاثون — plain, no frame / no block */
.dlist--plain .dlist__item{background:none;border:0;padding:10px 4px;gap:14px}
.dlist--plain .dlist__item img{width:108px;height:108px}
.dlist--plain .dlist__item h4{font-size:clamp(31px,3.5vw,35px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* أكبر قليلًا وأبيض ناصع بدل var(--muted) الباهت */
.dlist--plain .dlist__item p{font-size:clamp(16px,1.8vw,19px);line-height:1.5;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* الفئات المستهدفة — no blocks, larger */
.dlist--boxed{gap:18px}
.dlist--boxed .dlist__item{padding:10px 4px;border-radius:0;
  background:none;border:0;box-shadow:none}
.dlist--boxed .dlist__item:hover{transform:translateX(-6px)}
.dlist--boxed .dlist__item img{width:116px;height:116px}
.dlist--boxed .dlist__item h4{font-size:clamp(24px,3vw,28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* entrance for detail list items (staggered, slide from their side) */
.details__split.reveal .dlist__item{opacity:0}
.details__split.reveal.in .dlist__item{opacity:1;animation:dItemIn .7s cubic-bezier(.2,.8,.3,1) backwards}
.dlist--plain .dlist__item{--dix:75px}
.dlist--boxed .dlist__item{--dix:-75px}
.details__split.reveal.in .dlist__item:nth-child(1){animation-delay:.12s}
.details__split.reveal.in .dlist__item:nth-child(2){animation-delay:.28s}
.details__split.reveal.in .dlist__item:nth-child(3){animation-delay:.44s}
.details__split.reveal.in .dlist__item:nth-child(4){animation-delay:.60s}
@keyframes dItemIn{0%{opacity:0;transform:translateX(var(--dix,40px))}100%{opacity:1;transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .details__split.reveal .dlist__item,.details__split.reveal.in .dlist__item{animation:none;opacity:1;transform:none}
}

/* الجوال فقط: «مدة الهاكاثون» و«الفئات المستهدفة» كان نصهما مقصوصًا لسببين.
   الأول أن قاعدة العمود الواحد في الأعلى (@media 960px) لا تُطبَّق أصلًا، لأن
   محدِّدات :not() قبلها أعلى أولوية منها، فتبقى الشبكة عمودين على الجوال ولا
   يزيد عرض عمود النص عن 195px. الثاني أن العناوين والفقرات فيها
   white-space:nowrap بخط لا ينزل عن 31px، فتمتد الأسطر إلى 459px داخل عمود
   195px — أي تجاوز 214px عن عرض الشاشة يقصّه الحاوي.
   العلاج: عمود واحد فعليًا (بمحدِّدات بنفس أولوية الأصلية حتى تفوز)، مع سماح
   بالالتفاف وخطوط وأيقونات بمقاس الجوال. لا شيء من هذا يمسّ الديسكتوب. */
@media (max-width:640px){
  .details__split,
  .details__split--wide:not(.details__split--rev),
  .details__split--wide.details__split--rev{grid-template-columns:1fr;gap:24px}
  .dlist__item{gap:14px}
  .dlist__item > div{min-width:0}
  .dlist--plain .dlist__item h4,
  .dlist--plain .dlist__item p,
  .dlist--boxed .dlist__item h4{white-space:normal;overflow:visible;text-overflow:clip}
  .dlist--plain .dlist__item h4{font-size:clamp(20px,6vw,26px)}
  .dlist--plain .dlist__item p{font-size:clamp(15.5px,4.4vw,19px);line-height:1.55}
  .dlist--boxed .dlist__item h4{font-size:clamp(18px,5.2vw,23px)}
  .dlist--plain .dlist__item img{width:72px;height:72px}
  .dlist--boxed .dlist__item img{width:76px;height:76px}
}

/* ===== FIND ===== */
.find{padding:100px 0}
.find__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* الاستدارة بالنسبة المئوية لا بالبكسل: ملف الإطار u1.png مقاسه 404×267 ونصف
   قطر زاويته المرسومة 14px، أي 14/404 عرضًا و14/267 ارتفاعًا. وبما أن نسبة
   البطاقة هي نفسها 404/267، تعطي هاتان النسبتان زاوية دائرية مطابقة لمنحنى
   الإطار عند أي مقاس شاشة. القيمة الثابتة 22px كانت أوسع من منحنى الإطار
   (13.4px عند العرض) فتقصّ خطّه المرسوم عند الأركان. */
.find-card{position:relative;border-radius:3.4653% / 5.2434%;overflow:hidden;min-height:230px;aspect-ratio:404/267;
  display:flex;align-items:flex-end;transition:.4s;
  /* الخط الأخضر كان مرسومًا على أقصى حافة ملف u1.png (بكسل واحد عند x=0 وy=0)،
     فكان border-radius مع overflow:hidden يقصّه عند الأركان، وعند العرض ينكمش
     إلى 0.96px فيبهت بين البكسلات. الحدّ هنا حدّ حقيقي على صندوق البطاقة —
     لا يقصّه overflow الخاص بها، ويتبع الاستدارة تمامًا، ويبقى 1px حادًّا مهما
     تغيّر المقاس أو كثافة الشاشة. اللون منسوخ من الملف الأصلي. */
  border:1px solid rgb(107,240,132)}
/* التدرّج السفلي — منسوخ من نفس الملف: يبدأ عند 62% من الارتفاع شفافًا وينتهي
   كحليًا مصمتًا. z-index 1 ليبقى تحت النص (z-index 2) كما كانت صورة الإطار. */
.find-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(20,38,100,0) 62%,rgba(18,35,97,.64) 76%,rgba(12,26,93,1) 100%)}
/* صورة الإطار لم تعد مستخدمة — أُعيد بناؤها بالكامل أعلاه بالـCSS.
   أُخفيت بدل حذفها من HTML لأن الوسم مكرّر في 12 موضعًا عبر ملفين. */
.find-card__frame{display:none}
.find-card:hover{transform:translateY(-6px)}
.find-card__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:.6s}
.find-card:hover .find-card__bg{transform:scale(1.08)}
.find-card__frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:1;pointer-events:none}
.find-card__c{position:relative;z-index:2;width:100%;padding:22px}
.find-card__c h3{font-size:19px;font-weight:800;color:var(--green-bright);margin-bottom:6px}
.find-card__c p{color:#cfdcf6;font-size:14px}

/* ===== STATS ===== */
.stats{padding:80px 0}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{position:relative;text-align:center;padding:30px 10px}
.stat__x{position:absolute;inset:0;margin:auto;width:210px;opacity:.65;z-index:0;pointer-events:none}
.stat__num{position:relative;z-index:1;font-size:clamp(42px,6vw,66px);font-weight:800;color:#fff;line-height:1;
  direction:ltr;text-shadow:0 0 24px rgba(54,217,138,.4)}
.stat__label{position:relative;z-index:1;margin-top:12px;color:#fff;font-size:20px;font-weight:700}

/* ===== TIMELINE ===== */
.timeline{padding:90px 0}
.tl{position:relative;max-width:760px;margin:50px auto 0}
.tl::before{content:"";position:absolute;inset-block:40px;inset-inline-start:71px;width:9px;z-index:0;
  background:linear-gradient(180deg,rgba(43,127,255,.28),rgba(43,127,255,.07));border-radius:9px}
.tl-item{position:relative;display:flex;align-items:center;gap:28px;justify-content:flex-end;margin-bottom:52px}
.tl-item__num{flex:none;width:150px;height:150px;object-fit:contain;position:relative;z-index:2;
  background:var(--bg);border-radius:24px}
.tl-item__body{flex:1;text-align:start}
.tl-item__body h4{font-size:clamp(23px,3vw,32px);font-weight:800;color:#fff;margin-bottom:12px}
.tl-date{display:inline-flex;align-items:center;gap:8px;color:var(--green-bright);font-weight:700;font-size:20px}
.tl-date img{width:26px;height:26px}
.tl-item__trophy-wrap{flex:none;display:inline-flex;animation:floaty 5s ease-in-out infinite}
.tl-item__trophy{display:block;width:158px;height:auto;object-fit:contain;filter:drop-shadow(0 0 18px rgba(43,127,255,.35));
  transition:transform .7s ease}
.tl-item__trophy-wrap:hover .tl-item__trophy{transform:rotate(360deg)}
@media (max-width:640px){.tl-item__trophy{width:100px}}
.tl-cta{display:flex;align-items:center;gap:30px;justify-content:center;margin-top:46px;flex-wrap:wrap;
  max-width:860px;margin-inline:auto}
.tl-cta__bot{width:180px;height:180px;flex:none;animation:botFloat 4s ease-in-out infinite;transform-origin:center bottom;
  filter:drop-shadow(0 12px 26px rgba(43,127,255,.4))}
.tl-cta__bot img{width:100%;height:100%;object-fit:contain}
@keyframes botBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes botFloat{
  0%{transform:translateY(0) rotate(-5deg) scale(1)}
  25%{transform:translateY(-12px) rotate(0deg) scale(1.04)}
  50%{transform:translateY(-18px) rotate(5deg) scale(1)}
  75%{transform:translateY(-10px) rotate(0deg) scale(1.04)}
  100%{transform:translateY(0) rotate(-5deg) scale(1)}}
.tl-cta p{font-weight:800;font-size:clamp(22px,3.5vw,35px);color:#fff;line-height:1.6;text-shadow:0 0 26px rgba(43,127,255,.35)}

/* ===== STORY ===== */
.story{padding:100px 0}
.story__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:46px;align-items:center}
.story__text h2{text-align:start;font-size:clamp(30px,4.6vw,54px);font-weight:800;line-height:1.25;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--blue);-webkit-text-fill-color:var(--blue);margin-bottom:20px}
.story__text p{color:#cdd9f4;margin-bottom:14px}
.story__cta{color:var(--green-bright);font-weight:800}
.story__mail{color:var(--blue-bright);font-weight:700;direction:ltr;display:inline-block}
.yt{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/10;cursor:pointer;
  background:#fff;border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt__scrim{position:absolute;inset:0;background:rgba(0,0,0,.28)}
.yt__play{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;
  border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);transition:.3s}
.yt:hover .yt__play{transform:scale(1.08);box-shadow:0 0 0 9px rgba(43,127,255,.15)}
/* مسار المثلث M8 5v14l11-7z حدوده x من 8 إلى 19، فمركزه 13.5 داخل viewBox
   مركزه 12 — أي منزاح +1.5px يمينًا بذاته. وmargin-inline-start:4px كانت في
   صفحة RTL هامشًا يمينيًا يزيحه 2px يسارًا (نصف الهامش، لأن justify-content
   يحسب الهامش ضمن التوسيط)، فالمحصلة كانت −0.5px. الإزاحة أدناه فيزيائية
   (لا منطقية) فتعمل في الاتجاهين.
   والمحاذاة على **مركز الثقل** لا مركز الصندوق: رؤوس المثلث (8,5) و(8,19)
   و(19,12) فمركز ثقله x=11.667 بينما مركز صندوقه 13.5 — أي أن كتلته تميل
   1.833 وحدة يسارًا. توسيط الصندوق يجعله يبدو مائلًا للخلف، فتوسيط الثقل هو
   ما يُرى متمركزًا. مركز الثقل 0.333 وحدة يسار مركز viewBox ⇒ إزاحة +0.333px. */
.yt__play svg{width:24px;height:24px;fill:var(--blue);margin:0;transform:translateX(0.333px)}

/* ===== PRIZES ===== */
.prizes{position:relative;overflow:hidden;padding:100px 0;text-align:center}
.prizes .container{position:relative;z-index:1}
.prizes__x{position:absolute;top:10px;right:-40px;width:min(620px,58%);height:auto;opacity:.4;z-index:-1;pointer-events:none;
  filter:brightness(.85) saturate(1) drop-shadow(0 0 40px rgba(54,217,138,.3));animation:floaty 6s ease-in-out infinite}
.prizes__total{position:relative;z-index:2;display:inline-flex;flex-direction:column;align-items:center;margin-bottom:10px}
.prizes__total .lbl{color:var(--green-bright);font-weight:800;font-size:clamp(16px,2.2vw,22px);margin-bottom:-10px;position:relative;z-index:2}
.prizes__total .fig{position:relative;display:inline-flex;direction:ltr;align-items:center;gap:14px;padding:0 30px;font-size:clamp(46px,8vw,80px)}
.prizes__total .x{position:absolute;inset:0;margin:auto;width:230px;opacity:.5;z-index:0}
.prizes__total .num{position:relative;z-index:1;font-size:clamp(92px,16vw,160px);font-weight:800;color:#fff;
  direction:ltr;text-shadow:0 0 30px rgba(54,217,138,.5)}
.riyal{height:.72em;width:auto;position:relative;z-index:1;display:inline-block;filter:drop-shadow(0 0 10px rgba(54,217,138,.4))}
.prizes__cards{display:flex;direction:ltr;justify-content:center;align-items:flex-end;gap:0;margin-top:50px;flex-wrap:wrap}
.pcard{position:relative;z-index:1;margin-inline:-8px;width:268px;aspect-ratio:287/311;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:34px 30px 32px;
  background-image:url("../assets/prizes/3dw.png");background-size:100% 100%;background-repeat:no-repeat;transition:.35s}
.pcard--first{z-index:3;width:312px;aspect-ratio:363/390;padding:40px 34px 36px;
  background-image:url("../assets/prizes/1dw.png");transform:translateY(-26px);
  filter:drop-shadow(0 22px 50px rgba(54,217,138,.28))}
.pcard:hover{transform:translateY(-12px)}
.pcard--first:hover{transform:translateY(-38px)}
.pcard__trophy{flex:none;width:100px;height:121px;object-fit:contain;margin:0 auto 16px}
.pcard--first .pcard__trophy{width:124px;height:150px}
.pcard__rank{font-weight:800;font-size:clamp(17px,2.1vw,21px);color:#dbe6ff;margin-bottom:8px}
.pcard--first .pcard__rank{color:var(--green-bright)}
.pcard__amt{display:inline-flex;align-items:center;gap:8px;font-size:clamp(23px,3vw,30px);font-weight:800;color:#fff;justify-content:center;direction:ltr}

/* ===== HIGHLIGHTS ===== */
.highlights{padding:100px 0}
.hl-head{text-align:center;margin-bottom:36px}
.hl-head small{display:flex;align-items:center;gap:16px;width:100%;
  color:#fff;font-weight:800;margin-top:14px;letter-spacing:1px;font-size:clamp(20px,2.6vw,28px)}
.hl-head small::after{content:"";flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(43,127,255,.12) 30%,var(--blue-bright))}
.hl-grid{display:grid;direction:ltr;grid-template-columns:1.4fr 1fr;gap:16px}
.hl-wide{display:grid;gap:16px}
.hl-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hl-stack{display:grid;gap:16px}
/* بلا إطار حول الصور — لا border ولا ظلّ داخلي، فقط استدارة وظلّ خارجي.
   (كان border:1px solid يتسرّب من تحته خيط من الصورة عند الأركان؛ حذف الإطار
   كليًا يزيل السبب من أصله.) */
.hl-grid img{display:block;width:100%;height:auto;object-fit:cover;border-radius:22px;
  box-shadow:0 14px 36px rgba(0,0,0,.45);transition:.5s}
.hl-hero{aspect-ratio:8/7}
.hl-duo img{aspect-ratio:7/10}
.hl-stack img{aspect-ratio:16/9}
.hl-stack img:nth-child(2){aspect-ratio:1/1}
/* النسب أعلاه مفصّلة على مقاسات صور نسخة الرياض (الأصلية 400×350 و335×546
   و400×225 تطابق فتحاتها تمامًا). صور نسخة القصيم الست كلها 3:2، فكان
   object-fit:cover يقصّ منها 16–53%. توحيد فتحاتها على 3/2 يلغي القصّ، وتعديل
   نسبة العمودين إلى 2.07fr يبقي ارتفاع العمودين متساويًا (674px مقابل 674px
   داخل حاوية 1000px) فلا تنكسر الفسيفساء. */
.hl-edition[data-edition="qassim"] .hl-hero,
.hl-edition[data-edition="qassim"] .hl-duo img,
.hl-edition[data-edition="qassim"] .hl-stack img,
.hl-edition[data-edition="qassim"] .hl-stack img:nth-child(2){aspect-ratio:3/2}
/* داخل min-width حتى لا تتغلّب على قاعدة العمود الواحد في @media 640px */
@media (min-width:641px){
  .hl-edition[data-edition="qassim"]{grid-template-columns:2.07fr 1fr}
}
/* التحويم: تكبير خفيف فقط — لا إطار يُلوَّن بعد حذف الإطار */
.hl-grid img:hover{transform:scale(1.03)}

.hl-editions{position:relative;max-width:1000px;margin-inline:auto}
.hl-edition{display:none}
.hl-edition.is-active{display:grid}

.hl-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:96px;height:96px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  background:rgba(6,11,31,.55);backdrop-filter:blur(6px);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s}
.hl-arrow svg{width:36px;height:36px}
.hl-arrow:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-50%) scale(1.08)}
.hl-arrow--prev{right:-116px}
.hl-arrow--next{left:-116px}
@media (max-width:900px){
  .hl-editions{max-width:none}
  .hl-arrow{width:48px;height:48px}
  .hl-arrow svg{width:20px;height:20px}
  .hl-arrow--prev{right:-10px}
  .hl-arrow--next{left:-10px}
}

.hl-tabs{display:flex;justify-content:center;gap:10px;margin-top:32px;flex-wrap:wrap}
.hl-tab{border:1px solid rgba(120,150,210,.24);background:rgba(255,255,255,.045);color:var(--muted);
  font-family:'Almarai',sans-serif;font-weight:800;font-size:14px;padding:10px 26px;border-radius:999px;
  cursor:pointer;transition:.25s}
.hl-tab:hover{border-color:var(--blue-bright);color:#fff}
.hl-tab.is-active{background:linear-gradient(90deg,var(--blue),var(--green));border-color:transparent;color:#04101f}

/* ===== SPONSORS (white) ===== */
.sponsors{background:var(--white);color:var(--ink);padding:100px 0}
.sponsors .sp-tier{text-align:center;font-size:clamp(20px,2.6vw,30px);font-weight:800;color:var(--ink);margin:48px 0 28px}
.sponsors .sp-tier:first-of-type{margin-top:0}
.sp-one{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap}
.sp-pair{display:flex;justify-content:center;align-items:flex-start;gap:180px;flex-wrap:wrap;margin-top:96px}
.sp-pair__item{display:flex;flex-direction:column;align-items:center}
/* Titles start at the top of the pair row — the row's own margin provides the
   gap from the tier above, so both items line up instead of one dropping 48px. */
.sp-pair__item .sp-tier{margin:0 0 28px}
/* صندوق الشعار داخل الصف الزوجي بارتفاع موحّد (ارتفاع أكبر شعار) مع توسيط
   رأسي، حتى يبقى الشعار الأصغر — هنقرستيشن — في منتصف الصف بدل التصاقه
   بالأعلى بعد تصغيره. */
.sp-pair__item .sp-one{min-height:88px;align-items:center}
@media (max-width:768px){
  .sp-pair{gap:40px;margin-top:64px}
  .sp-pair__item .sp-one{min-height:70px}
}
/* كل شعارات قسم الرعاة داخل صندوق واحد بمقاس الشعار المعروض للشريك
   الاستراتيجي: ملفه 461×126، وعند الارتفاع المشترك 88px يصبح 322×88.
   تثبيت العرض والارتفاع معًا مع object-fit:contain يضع كل الشعارات — مهما
   اختلفت نسب ملفاتها — في صناديق متطابقة، ويغني عن أي استثناء لكل فئة.
   أعرض صف هو «شركاؤنا»: 3×322 + فجوتان 44 = 1054px داخل حاوية 1136px، لذا
   تتقلّص المقاسات عند 1180px و768px حتى لا ينكسر السطر. */
.sp-one img,
.sp-track img{flex:0 0 auto;width:322px;height:88px;object-fit:contain}
.sp-one--gov{gap:44px}
@media (max-width:1180px){
  .sp-one img,
  .sp-track img{width:250px;height:68px}
  .sp-one--gov{gap:32px}
}
@media (max-width:768px){
  .sp-one img,
  .sp-track img{width:190px;height:52px}
  .sp-one--gov{gap:28px}
}
/* الأساس: كل شعار داخل الصندوق نفسه (322×88 ثم 250×68 و190×52) مع
   object-fit:contain. أدناه استثناءات ضبط بصري لست فئات — كل قيمة نسبة ثابتة
   من ارتفاع الأساس فتتقلّص معه تلقائيًا عند 1180px و768px:
     المستضيف 1.36×   ·   الممكن/NITA 1.31×   ← أكبر
     الذهبي 0.82×  ·  التقني 0.84×  ·  اللوجستي 0.80×  ·  الممكن/ارتقاء 0.82× ← أصغر */
.sp-one--host img{height:120px}
.sp-one--generalenab img[src$="Image%206.jpeg"]{height:115px}
/* الراعي الذهبي: شعاران بنسبتين متباعدتين (CNTXT 7.10 ونوكيا 4.44). الصندوق
   الموحّد 322px أضيق من نسبة CNTXT عند هذا الارتفاع، فكان يُحدّ بالعرض ويهبط
   ارتفاعه المرسوم إلى 45px مقابل 56px لنوكيا. width:auto يرفع حدّ العرض فيبلغ
   الاثنان الارتفاع المشترك — والتوحيد على الارتفاع هو ما يُقرأ تساويًا في صف
   شعارات. عرض الصف لا يتغيّر تقريبًا (695px مقابل 692px قبل التعديل). */
.sp-one--gold img{height:56px;width:auto}
/* CNTXT فيه هامش داخلي 40px أعلى وأسفل (حبره يملأ 88% من ارتفاع الملف) بينما
   نوكيا يملأ 100%. فعند الارتفاع نفسه يظهر حبر CNTXT أقصر بـ13%. رفع ارتفاع
   عنصره بنسبة 678/598 = 1.134 يجعل الحبر المرئي متساويًا فعلًا لا الصندوق. */
.sp-one--gold img[src$="CNTXT-GoogleCloud-logo.png"]{height:64px}
.sp-one--tech img{height:74px}
.sp-one--general img{height:80px}
.sp-one--generalenab img[src$="Image%207.jpeg"]{height:72px}
@media (max-width:1180px){
  .sp-one--host img{height:93px}
  .sp-one--generalenab img[src$="Image%206.jpeg"]{height:89px}
  .sp-one--gold img{height:43px}
  .sp-one--gold img[src$="CNTXT-GoogleCloud-logo.png"]{height:49px}
  .sp-one--tech img{height:57px}
  .sp-one--general img{height:62px}
  .sp-one--generalenab img[src$="Image%207.jpeg"]{height:56px}
}
@media (max-width:768px){
  .sp-one--host img{height:71px}
  .sp-one--generalenab img[src$="Image%206.jpeg"]{height:68px}
  .sp-one--gold img{height:33px}
  .sp-one--gold img[src$="CNTXT-GoogleCloud-logo.png"]{height:37px}
  .sp-one--tech img{height:44px}
  .sp-one--general img{height:47px}
  .sp-one--generalenab img[src$="Image%207.jpeg"]{height:43px}
}
.sp-mq{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
        mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* شركاء النجاح والتوظيف: ارتفاع موحّد + عرض طبيعي لكل شعار + فجوة 10px.
   لا يمكن الجمع بين تساوي عرض الصندوق وتساوي المسافة المرئية، لأن نسب هذه
   الشعارات تتراوح بين 0.84 و4.76: داخل صندوق ثابت يترك الشعار الضيق فراغًا
   داخليًا يُضاف إلى الفجوة فتتفاوت المسافة بين 6px و167px. مع width:auto
   يصبح حدّ الصورة هو حدّ الشعار نفسه، فالمسافة المرئية = الفجوة بالضبط بين كل
   شعارين. التوحيد هنا على الارتفاع — وهو المعيار المتّبع في أشرطة الشعارات.
   الارتفاع هنا أصغر من ارتفاع صفوف الرعاة الثابتة (88px) لأن الشريط المتحرك
   يعرض عددًا أكبر ويحتمل مقاسًا أقل. */
.sp-track img{width:auto;padding:0;height:64px}
.sp-track{display:flex;gap:50px;align-items:center;width:max-content;animation:marquee 32s linear infinite}
@media (max-width:1180px){.sp-track img{height:50px}}
@media (max-width:768px){.sp-track img{height:38px}}
/* استثناء: شعار معادن نسبته 4.76 — الأعرض في الشريط بفارق كبير، فعند الارتفاع
   المشترك يصبح عرضه المرسوم ضعف بقية الشعارات تقريبًا. نصف الارتفاع عند كل
   مقاس شاشة. (استُهدف باسم ملفه في الـ src لأنه شعار واحد داخل الشريط.) */
.sp-track img[src$="maaden.png"]{height:40px}
@media (max-width:1180px){.sp-track img[src$="maaden.png"]{height:31px}}
@media (max-width:768px){.sp-track img[src$="maaden.png"]{height:24px}}
.sp-mq:hover .sp-track{animation-play-state:paused}
.sp-track img{filter:grayscale(.15);transition:.3s}
.sp-track img:hover{filter:none;transform:scale(1.08)}
@keyframes marquee{to{transform:translateX(50%)}}

/* ===== FAQ (white) ===== */
.faq{background:var(--white);color:var(--ink);padding:50px 0 110px}
.faq__title{color:var(--ink-blue);text-shadow:none;margin-bottom:40px}
.faq__list{max-width:980px;margin-inline:auto}
.faq-item{border-bottom:2px solid rgba(27,95,217,.55)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:22px 6px;font-size:clamp(16px,2.2vw,21px);font-weight:800;color:var(--ink-blue)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .chev{flex:none;width:26px;height:26px;border-radius:50%;color:var(--ink-blue);transition:.3s;
  display:flex;align-items:center;justify-content:center}
.faq-item[open] .chev{transform:rotate(180deg)}
.faq-item p{padding:0 6px 22px;color:#33415c;font-size:15px;line-height:2}

/* ===== FOOTER ===== */
.footer{background:var(--bg-2);border-top:1px solid var(--line);padding:60px 0 0;position:relative}
/* divider line at the top of the footer */
.footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(55,227,147,.55) 30%,rgba(43,127,255,.55) 70%,transparent)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
/* إزاحة كتلة الهوية (الشعار + الوصف) نحو اليمين. الإزاحة بـ transform لا
   بهامش: لا تغيّر عرض عمود الشبكة ولا تدفع الأعمدة الثلاثة المجاورة.
   32px تتجاوز حشوة الحاوية (22px)، فهي آمنة فقط حين يبقى حول الحاوية فراغ
   كافٍ — أي فوق 1240px. تحتها تقلّ إلى 16px ثم تتوقف على الجوال حيث تصبح
   الشبكة عمودًا واحدًا بعرض كامل، منعًا لأي تمرير أفقي. */
.footer__brand{transform:translateX(32px)}
@media (max-width:1240px){.footer__brand{transform:translateX(16px)}}
@media (max-width:768px){.footer__brand{transform:none}}
.footer__logo{height:42px;margin-bottom:14px}
.footer__brand .tag{color:var(--green-bright);font-weight:700;margin-bottom:14px}
.footer__brand .desc{color:var(--muted);font-size:14px;max-width:340px}
.footer h5{color:#fff;font-weight:800;margin-bottom:16px;font-size:16px}
.footer ul{list-style:none}
.footer li{margin-bottom:11px}
.footer a{color:#c4d2f0;font-size:14px;transition:.25s}
.footer a:hover{color:var(--green-bright)}
.footer__mcit img{height:60px;filter:brightness(0) invert(1);opacity:.92}
.footer__bar{margin-top:46px;border-top:1px solid var(--line);text-align:center;padding:18px;
  color:var(--green-bright);font-size:13px;font-weight:700}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line);transition:.25s}
.socials a:hover{background:var(--blue);transform:translateY(-3px)}
.socials svg{width:20px;height:20px;fill:#fff}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(34px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== video modal ===== */
.vmodal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(3,6,18,.9);backdrop-filter:blur(8px);padding:20px}
.vmodal.open{display:flex}
.vmodal__box{position:relative;width:min(960px,100%);aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.vmodal__box iframe{width:100%;height:100%;border:0}
.vmodal__close{position:absolute;inset-block-start:-46px;inset-inline-end:0;background:none;border:0;color:#fff;cursor:pointer}
.vmodal__close svg{width:32px;height:32px;stroke:#fff}

/* ===========================================================
   SECTION ENTRANCE ANIMATIONS (find / timeline / story / highlights)
   =========================================================== */

/* ماذا ستجدون — cards pop up, staggered */
.find__grid .find-card.reveal{opacity:0;transition:.4s}
.find__grid .find-card.reveal.in{opacity:1;animation:findIn .85s cubic-bezier(.16,.84,.32,1) backwards}
.find__grid .find-card.reveal.in:nth-child(1){animation-delay:.05s}
.find__grid .find-card.reveal.in:nth-child(2){animation-delay:.15s}
.find__grid .find-card.reveal.in:nth-child(3){animation-delay:.25s}
.find__grid .find-card.reveal.in:nth-child(4){animation-delay:.35s}
.find__grid .find-card.reveal.in:nth-child(5){animation-delay:.45s}
.find__grid .find-card.reveal.in:nth-child(6){animation-delay:.55s}
@keyframes findIn{0%{opacity:0;transform:translateY(60px) scale(.86);filter:blur(8px)}
  55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}

/* الجدول الزمني — rows slide in from the title side, number pops */
.tl .tl-item.reveal{opacity:0;transition:.4s}
.tl .tl-item.reveal.in{opacity:1;animation:tlRowIn .8s cubic-bezier(.16,.84,.32,1) backwards}
.tl .tl-item.reveal.in:nth-child(1){animation-delay:.05s}
.tl .tl-item.reveal.in:nth-child(2){animation-delay:.17s}
.tl .tl-item.reveal.in:nth-child(3){animation-delay:.29s}
.tl .tl-item.reveal.in:nth-child(4){animation-delay:.41s}
.tl .tl-item.reveal.in:nth-child(5){animation-delay:.53s}
.tl .tl-item.reveal.in:nth-child(6){animation-delay:.65s}
.tl .tl-item.reveal.in:nth-child(7){animation-delay:.77s}
@keyframes tlRowIn{0%{opacity:0;transform:translateX(-70px)}100%{opacity:1;transform:none}}
.tl .tl-item.reveal.in .tl-item__num{animation:tlNumPop .7s cubic-bezier(.2,.9,.3,1.3) backwards}
.tl .tl-item.reveal.in:nth-child(1) .tl-item__num{animation-delay:.2s}
.tl .tl-item.reveal.in:nth-child(2) .tl-item__num{animation-delay:.32s}
.tl .tl-item.reveal.in:nth-child(3) .tl-item__num{animation-delay:.44s}
.tl .tl-item.reveal.in:nth-child(4) .tl-item__num{animation-delay:.56s}
.tl .tl-item.reveal.in:nth-child(5) .tl-item__num{animation-delay:.68s}
.tl .tl-item.reveal.in:nth-child(6) .tl-item__num{animation-delay:.80s}
.tl .tl-item.reveal.in:nth-child(7) .tl-item__num{animation-delay:.92s}
@keyframes tlNumPop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}

/* من الفكرة، إلى التمكين — text & video converge from the sides */
.story__text.reveal{opacity:0}
.story__text.reveal.in{opacity:1;animation:fromRight 1s cubic-bezier(.16,.84,.32,1) backwards}
.story .yt.reveal{opacity:0}
.story .yt.reveal.in{opacity:1;animation:fromLeft 1s cubic-bezier(.16,.84,.32,1) .12s backwards}
@keyframes fromRight{0%{opacity:0;transform:translateX(80px)}100%{opacity:1;transform:none}}
@keyframes fromLeft{0%{opacity:0;transform:translateX(-80px) scale(.94)}100%{opacity:1;transform:none}}

/* أبرز لحظات الهاكاثون — gallery images scale/fade, staggered */
.highlights .hl-grid.reveal img{opacity:0}
.highlights .hl-grid.reveal.in img{opacity:1;animation:hlImgIn .85s cubic-bezier(.16,.84,.32,1) backwards}
.highlights .hl-grid.reveal.in .hl-hero{animation-delay:.05s}
.highlights .hl-grid.reveal.in .hl-duo img:nth-child(1){animation-delay:.22s}
.highlights .hl-grid.reveal.in .hl-duo img:nth-child(2){animation-delay:.32s}
.highlights .hl-grid.reveal.in .hl-stack img:nth-child(1){animation-delay:.16s}
.highlights .hl-grid.reveal.in .hl-stack img:nth-child(2){animation-delay:.28s}
.highlights .hl-grid.reveal.in .hl-stack img:nth-child(3){animation-delay:.40s}
/* بلا filter:blur — الـ filter يرفع الصورة إلى طبقة تركيب مستقلة يتوقف فيها
   قصّ الزوايا، وبما أن fill-mode:backwards فالصور تجلس على حالة 0% (ضبابية)
   حتى 0.40s قبل بدء حركتها، فتظهر زواياها حادّة طوال تلك المدة. */
@keyframes hlImgIn{0%{opacity:0;transform:scale(.85) translateY(34px)}
  55%{opacity:1}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .find__grid .find-card.reveal,.find__grid .find-card.reveal.in,
  .tl .tl-item.reveal,.tl .tl-item.reveal.in,.tl .tl-item.reveal.in .tl-item__num,
  .story__text.reveal,.story__text.reveal.in,.story .yt.reveal,.story .yt.reveal.in,
  .highlights .hl-grid.reveal img,.highlights .hl-grid.reveal.in img{animation:none;opacity:1;transform:none;filter:none}
}

/* ===== responsive ===== */
@media (max-width:960px){
  /* the wide desktop hero would crop the man & woman off the edges on a narrow screen,
     so swap to a dedicated portrait build that fills the background with both people visible */
  .hero__bg{background-image:url("../assets/hero/hero-mobile.png?v=2")!important;
    background-size:cover;background-position:center;background-repeat:no-repeat}
  /* the scene sits in the middle band of that portrait image — keep the pulses aligned to it */
  .hero__fx{inset:0;height:auto;aspect-ratio:1774/887;margin-block:auto}
  .nav__inner{gap:12px;padding:14px 16px}
  .nav__links{display:none;position:fixed;inset-block-start:0;inset-inline-end:0;height:100svh;width:min(320px,82vw);
    flex-direction:column;justify-content:center;gap:30px;font-size:20px;
    background:rgba(7,12,30,.97);backdrop-filter:blur(16px);padding:40px;animation:menuIn .35s ease both}
  .nav__links.active{display:flex}
  @keyframes menuIn{from{transform:translateX(100%)}to{transform:none}}
  /* keep the green CTA beside the logo and let the toggle sit at the far end */
  .nav__cta{margin-inline-start:0;padding:9px 18px;font-size:14px;box-shadow:0 6px 18px rgba(54,217,138,.4)}
  .nav__toggle{display:flex;z-index:70;margin-inline-start:auto}
  .about__grid,.story__grid,.details__split,.details__split--rev{grid-template-columns:1fr}
  .details__split--rev .details__photo{order:-1}
  .footer__grid{grid-template-columns:1fr 1fr}
  .find__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav__inner{gap:10px;padding-inline:12px}
  .nav__logo,.nav.scrolled .nav__logo{height:40px;width:82px}
  .nav__ctas{gap:7px}
  .nav__cta{padding:7px 11px;font-size:12px}
  .goals__grid,.tracks__grid,.find__grid{grid-template-columns:1fr}
  /* min-height:230px مع aspect-ratio يفرض عرضًا 348px على البطاقة، فتخرج عن
     عمودها (331px على شاشة 375) وتتجاوز حافة الشاشة على 320. تصفير الحد
     الأدنى يجعل الارتفاع يُشتق من العرض كما هو مقصود. */
  .find-card{min-height:0}
  .hl-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .countdown{gap:10px}
  .cd-block{min-width:80px}
  .goal{aspect-ratio:auto;padding:34px 22px}
  .goal__icon{height:auto;width:80px}
  .track{aspect-ratio:auto;padding:24px}
  .tl::before{inset-inline-start:38px}

  /* 1) hide the decorative X in About on mobile */
  .about__x{display:none}

  /* 2) stats: 2x2 grid + smaller X so backgrounds don't overlap */
  .stats__grid{grid-template-columns:1fr 1fr;gap:40px 8px}
  .stat{padding:18px 4px;overflow:hidden}
  .stat__x{width:118px}

  /* 3) prizes: clean vertical stack, 1st on top, no overlap */
  .prizes{padding:70px 0}
  .prizes__x{width:210px;top:24px;right:-6px;opacity:.7}
  .prizes__cards{flex-direction:column;align-items:center;gap:18px;margin-top:34px}
  .pcard{margin-inline:0;width:min(290px,86%)}
  .pcard--first{width:min(310px,90%);transform:none}
  .pcard:hover,.pcard--first:hover{transform:translateY(-6px)}
  .pcard:nth-child(2){order:1}
  .pcard:nth-child(3){order:2}
  .pcard:nth-child(1){order:3}
}