/* =========================================================
   مركز الإعلام — جامعة النجاح الوطنية
   تقرير رقمي تفاعلي  |  Interactive Digital Report
   ========================================================= */

:root{
  /* Brand palette (extracted from the original PDF) */
  --navy-950:#050e22;
  --navy-900:#071229;
  --navy-800:#0b1a3a;
  --navy-700:#0f2348;
  --blue-700:#103a6b;
  --blue-600:#144f84;   /* primary brand blue */
  --blue-500:#1f6fb8;
  --sky-600:#2a8ccb;
  --sky-500:#2f97d4;
  --sky-400:#54aee0;

  --orange:#e0633a;     /* accent */
  --orange-600:#d6603b;
  --orange-400:#f0925f;

  --gold-1:#b9822f;
  --gold-2:#f6e4ad;
  --gold-3:#caa14f;

  --ink:#1b2733;
  --gray-800:#272d33;
  --gray-600:#5b6168;
  --gray-500:#6d6e71;   /* body text */
  --gray-400:#97999c;
  --line:#e4ebf3;

  --paper:#ffffff;
  --paper-2:#eef4fa;
  --paper-3:#e2ecf6;

  --font: 'Gotham','Swissra', system-ui, 'Segoe UI', Tahoma, sans-serif;

  --maxw:1240px;
  --nav-h:72px;
  --ease:cubic-bezier(.21,.7,.22,1);
  --shadow-sm:0 6px 20px rgba(16,42,82,.08);
  --shadow-md:0 18px 50px rgba(16,42,82,.14);
  --shadow-lg:0 30px 80px rgba(8,21,58,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font);
  font-weight:300;
  color:var(--gray-500);
  background:var(--paper);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font);color:var(--blue-600);line-height:1.25;margin:0;font-weight:700}
.en{font-family:'Gotham',sans-serif}
::selection{background:var(--orange);color:#fff}

/* progress + scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--blue-500);border-radius:6px}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:1000;
  display:flex;align-items:center;gap:18px;
  padding:0 clamp(16px,3vw,40px);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(20,79,132,.10);
  transition:transform .4s var(--ease),background .3s;
}
.nav.hidden{transform:translateY(-100%)}
.nav.scrolled{box-shadow:0 6px 24px rgba(16,42,82,.10);background:rgba(255,255,255,.92)}
.nav__brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav__brand img{width:38px;height:38px;filter:drop-shadow(0 4px 8px rgba(20,79,132,.35))}
.nav__brand b{font-weight:700;color:var(--blue-600);font-size:15px;white-space:nowrap}
.nav__brand span{display:block;font-weight:300;color:var(--gray-400);font-size:11px;margin-top:-2px}
.nav__links{display:flex;gap:2px;margin-inline-start:auto;flex-wrap:nowrap;overflow:hidden}
.nav__links a{
  font-size:12.5px;font-weight:400;color:var(--gray-500);
  padding:8px 9px;border-radius:8px;white-space:nowrap;position:relative;
  transition:color .25s,background .25s;
}
.nav__links a:hover{color:var(--blue-600);background:var(--paper-2)}
.nav__links a.active{color:#fff;background:var(--orange)}
.nav__year{font-family:'Gotham';font-weight:700;color:var(--blue-600);font-size:18px;flex-shrink:0;margin-inline-start:6px}
.nav__burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;
  align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;margin-inline-start:auto}
.nav__burger span{width:24px;height:2.5px;background:var(--blue-600);border-radius:3px;transition:.3s var(--ease)}
.nav__burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.scrollbar{position:fixed;top:var(--nav-h);inset-inline:0;height:3px;z-index:1001;background:transparent}
.scrollbar__fill{height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--gold-3));transition:width .1s linear}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:999;background:rgba(7,18,41,.97);
  backdrop-filter:blur(8px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  opacity:0;visibility:hidden;transition:.35s var(--ease);
}
.drawer.open{opacity:1;visibility:visible}
.drawer a{color:#cdd9e4;font-size:clamp(16px,4.5vw,21px);font-weight:400;padding:9px 18px;border-radius:10px;transition:.2s}
.drawer a:hover,.drawer a.active{color:#fff;background:rgba(224,99,58,.9)}

/* =========================================================
   LAYOUT PRIMITIVES
   ========================================================= */
.section{position:relative;padding:clamp(64px,9vh,120px) clamp(18px,4vw,48px);overflow:hidden}
.wrap{max-width:var(--maxw);margin-inline:auto;position:relative;z-index:2}
.section--light{background:var(--paper)}
/* signature puzzle accent (brand motif echo) — transparent pieces, right side */
.s-accent{position:absolute;z-index:1;pointer-events:none;opacity:.62;
  width:min(330px,25vw);top:-3%;inset-inline-start:-3%;animation:floaty 11s ease-in-out infinite;
  filter:drop-shadow(0 16px 30px rgba(16,42,82,.14))}
.s-accent--b{top:auto;bottom:-6%;inset-inline-start:-3%;width:min(300px,22vw);opacity:.5;animation-duration:13s}
@media (max-width:880px){.s-accent{opacity:.4;width:42vw}.s-accent--b{display:none}}

/* animated navy particle background on light pages (echoes the hero) */
.bg-net{position:absolute;inset:0;z-index:0;pointer-events:none}
.section--tint{background:linear-gradient(160deg,#fff 0%,var(--paper-2) 55%,var(--paper-3) 100%)}
.section--dark{background:radial-gradient(120% 120% at 70% 0%,var(--navy-700) 0%,var(--navy-900) 55%,var(--navy-950) 100%);color:#cdd9e4}
.section--dark h2,.section--dark h3{color:#fff}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:500;color:var(--orange);
  font-size:clamp(13px,1.4vw,15px);letter-spacing:.3px;margin-bottom:14px}
.eyebrow::before{content:"";width:34px;height:3px;border-radius:2px;background:var(--orange)}
.title{font-weight:900;color:var(--blue-600);font-size:clamp(25px,4.2vw,46px);line-height:1.32;letter-spacing:-.4px;
  display:block;width:-moz-fit-content;width:fit-content;max-width:100%;padding:.04em 0 .18em;margin-bottom:.15em;
  --tc:var(--blue-600);opacity:0;clip-path:inset(-.08em -.16em -.22em 100%)}
.section--dark .title,.contact .title{color:#fff;--tc:#fff}
.title--center{margin-inline:auto}                 /* centred section titles */
.title.go{animation:ttlIn 1.25s cubic-bezier(.2,.75,.2,1) both}
@keyframes ttlIn{
  0%  {opacity:0; clip-path:inset(-.08em -.16em -.22em 100%); color:var(--orange);}
  28% {opacity:1;}
  60% {clip-path:inset(-.08em -.16em -.22em 0); color:var(--orange);}
  100%{opacity:1; clip-path:inset(-.08em -.16em -.22em 0); color:var(--tc);}
}
@media (prefers-reduced-motion:reduce){.title{opacity:1;clip-path:none}.title.go{animation:none}}

/* body text under titles — types out word by word, line after line */
.word{display:inline-block;opacity:0;transform:translateY(.2em);
  transition:opacity .42s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.typeout.words-go .word{opacity:1;transform:none}
.tw{flex:1 1 auto;min-width:0}                       /* wrapper that keeps list words flowing normally */
@media (prefers-reduced-motion:reduce){.word{opacity:1!important;transform:none!important}}
.lead{font-size:clamp(16px,1.7vw,19px);color:var(--gray-500);max-width:62ch;margin-top:18px;font-weight:300}
.section--dark .lead{color:#aebfd2}
.hl{color:var(--orange);font-weight:500}
.hl-b{color:var(--blue-500);font-weight:500}

/* reveal animation */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}
.reveal[data-d="6"]{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none}}

/* =========================================================
   HERO / COVER
   ========================================================= */
.hero{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--nav-h) + 24px) 20px 60px;position:relative;overflow:hidden;
  background:radial-gradient(80% 60% at 50% 32%,#1a3f7a 0%,#0c1f48 45%,#060f29 100%);
  color:#fff;
}
.hero__stars{position:absolute;inset:0;z-index:0;opacity:.7}
.hero__emblem{
  width:clamp(170px,26vw,300px);margin-bottom:clamp(20px,4vh,46px);position:relative;z-index:2;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)) drop-shadow(0 0 50px rgba(240,146,95,.25));
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(2deg)}}
.hero__glow{position:absolute;top:30%;left:50%;width:520px;height:520px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(224,99,58,.30),transparent 60%);z-index:1;filter:blur(20px);
  animation:pulse 5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.12)}}
.hero h1{
  font-weight:900;font-size:clamp(34px,7vw,82px);line-height:1.3;z-index:2;position:relative;
  display:inline-block;max-width:100%;padding:.06em .1em .18em;          /* room so it never clips at the bottom */
  background:linear-gradient(100deg,var(--gold-1) 0%,var(--gold-2) 42%,#fff 50%,var(--gold-2) 58%,var(--gold-1) 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  animation:shimmer 6s linear infinite, heroTitleIn 2.1s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes shimmer{to{background-position:220% center}}
/* intro: reveal right→left, blue, then settle to gold, with a fade */
@keyframes heroTitleIn{
  0%  {opacity:0; clip-path:inset(0 -.12em 0 100%); -webkit-text-fill-color:#3aa6e6;}
  28% {opacity:1;}
  60% {clip-path:inset(0 -.12em 0 0); -webkit-text-fill-color:#1f78c0;}
  100%{clip-path:inset(0 -.12em 0 0); -webkit-text-fill-color:transparent;}
}
@media (prefers-reduced-motion:reduce){
  .hero h1{animation:none;-webkit-text-fill-color:transparent;clip-path:none;opacity:1}
}
.hero__sub{font-size:clamp(16px,2.6vw,30px);font-weight:300;color:#dfe8f4;margin-top:14px;z-index:2;position:relative}
.hero__loc{margin-top:clamp(26px,5vh,54px);color:#8aa6cc;font-size:clamp(12px,1.6vw,16px);font-weight:300;
  letter-spacing:.4px;z-index:2;position:relative}
.hero__loc::before{content:"";display:block;width:54px;height:1px;background:linear-gradient(90deg,transparent,#5e7aa6,transparent);margin:0 auto 16px}
.scrolldown{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;
  width:26px;height:42px;border:2px solid rgba(255,255,255,.45);border-radius:14px;display:flex;justify-content:center}
.scrolldown::before{content:"";width:4px;height:8px;background:#fff;border-radius:3px;margin-top:7px;animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(12px)}100%{opacity:0}}

/* =========================================================
   STATS / INTRO
   ========================================================= */
.intro{background:linear-gradient(165deg,var(--sky-500),var(--sky-600) 60%,var(--blue-500));color:#fff}
.intro__photo{position:absolute;inset:0;z-index:0;opacity:.30;object-fit:cover;width:100%;height:100%;
  mix-blend-mode:luminosity;mask-image:linear-gradient(0deg,transparent,#000 30%)}
.intro .wrap{display:flex;flex-direction:column;gap:34px}
.intro__head h2{color:#fff;font-size:clamp(26px,4vw,44px);font-weight:900}
.intro__head p{color:#eaf4fb;max-width:60ch;font-weight:300}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.stat{
  background:linear-gradient(160deg,var(--orange),var(--orange-600));border-radius:20px;
  padding:clamp(22px,3vw,40px) clamp(16px,2vw,28px);text-align:center;color:#fff;
  box-shadow:0 22px 50px rgba(214,96,59,.35);position:relative;overflow:hidden;
}
.stat::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -20%,rgba(255,255,255,.25),transparent 60%)}
.stat__ic{width:clamp(44px,5vw,64px);height:clamp(44px,5vw,64px);margin:0 auto 14px;position:relative;z-index:2}
.stat__ic svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.7}
.stat__num{font-family:'Gotham';font-weight:700;font-size:clamp(34px,5.5vw,60px);line-height:1;position:relative;z-index:2;direction:ltr}
.stat__lbl{font-weight:400;font-size:clamp(13px,1.5vw,16px);margin-top:10px;color:#ffe9df;position:relative;z-index:2}

/* =========================================================
   GENERIC CONTENT (about, mission)
   ========================================================= */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,70px);align-items:center}
.split--rev{grid-template-columns:.85fr 1.15fr}
.deco{position:relative}
.deco img{width:100%;filter:drop-shadow(0 24px 50px rgba(16,42,82,.22))}
.deco--multiply img{mix-blend-mode:multiply}
.deco--logo{display:flex;justify-content:center}
.deco--logo img{width:auto;max-width:84%;filter:none}
@media (max-width:880px){.deco--logo img{max-width:58%}}
.float-slow{animation:floaty 8s ease-in-out infinite}

/* assembling emblem — pieces fly in from all directions (facilities) */
.assemble{position:relative;width:clamp(230px,42vw,460px);aspect-ratio:745/760;margin:0 auto clamp(12px,2.5vw,28px)}
.assemble .pc{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;
  transition:transform 1.05s cubic-bezier(.18,.72,.21,1.02), opacity .8s ease;will-change:transform,opacity;
  filter:drop-shadow(0 16px 26px rgba(16,42,82,.18))}
.assemble .pc-top{transform:translateY(-165%) rotate(-20deg) scale(.65)}
.assemble .pc-bottom{transform:translateY(165%) rotate(20deg) scale(.65)}
.assemble .pc-left{transform:translateX(-180%) rotate(-20deg) scale(.65)}
.assemble .pc-right{transform:translateX(180%) rotate(20deg) scale(.65)}
.assemble .pc-center{transform:scale(0) rotate(-140deg)}
.assemble.in .pc{opacity:1;transform:none}
.assemble.in .pc-top{transition-delay:.05s}
.assemble.in .pc-right{transition-delay:.13s}
.assemble.in .pc-bottom{transition-delay:.21s}
.assemble.in .pc-left{transition-delay:.29s}
.assemble.in .pc-center{transition-delay:.42s;transition-duration:.75s,.6s}
.assemble.in{animation:floaty 7s ease-in-out infinite;animation-delay:1.2s}
@media (prefers-reduced-motion:reduce){.assemble .pc{opacity:1;transform:none;transition:none}.assemble.in{animation:none}}
.prose p{margin:0 0 16px;font-size:clamp(15px,1.6vw,18px)}
.prose p:last-child{margin-bottom:0}

.mission-badge{display:inline-block;font-weight:900;color:var(--orange);font-size:clamp(22px,3.4vw,40px);
  margin:6px 0 18px;position:relative}
.mission-badge::after{content:"";display:block;height:4px;width:64%;margin-top:8px;border-radius:3px;
  background:linear-gradient(90deg,var(--orange),transparent)}

/* =========================================================
   CARDS GRID (arms, departments, goals, solutions, facilities)
   ========================================================= */
.grid{display:grid;gap:clamp(16px,2.2vw,26px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:clamp(20px,2.4vw,30px);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.card::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:5px;
  background:linear-gradient(var(--orange),var(--gold-3));transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent}
.card:hover::before{transform:scaleY(1)}
.card__ic{width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);margin-bottom:16px;
  mix-blend-mode:multiply;transition:transform .4s var(--ease)}
.card:hover .card__ic{transform:scale(1.08) rotate(-3deg)}
.card h3{font-size:clamp(17px,1.9vw,22px);font-weight:700;margin-bottom:4px}
.card .sub{display:block;color:var(--orange);font-weight:500;font-size:clamp(13px,1.4vw,15px);margin-bottom:10px}
.card p{font-size:clamp(13.5px,1.45vw,15.5px);color:var(--gray-500);margin:0;line-height:1.8}
.card .en{direction:ltr;display:inline-block}

/* arms = bigger feature cards */
.arm{display:flex;gap:18px;align-items:flex-start}
.arm .card__ic{flex-shrink:0;margin-bottom:0}

/* group label (production / external / support) */
.group-head{display:flex;align-items:center;gap:16px;margin:clamp(26px,4vw,46px) 0 22px}
.group-head img{width:clamp(48px,5vw,64px);height:clamp(48px,5vw,64px);mix-blend-mode:multiply}
.group-head .gh-t{font-weight:900;color:var(--blue-600);font-size:clamp(20px,2.6vw,30px)}
.group-head .gh-d{font-weight:300;color:var(--gray-500);font-size:clamp(13px,1.5vw,15.5px);margin-top:2px}
.section--dark .group-head .gh-t{color:#fff}
.section--dark .group-head .gh-d{color:#aebfd2}

/* small unit cards */
.unit{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:clamp(16px,2vw,24px);
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.unit:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.unit img{width:clamp(48px,5vw,64px);height:clamp(48px,5vw,64px);mix-blend-mode:multiply;margin-bottom:12px}
.unit h4{font-size:clamp(15px,1.7vw,18px);font-weight:700;color:var(--blue-600);margin-bottom:6px}
.unit p{font-size:clamp(12.5px,1.4vw,14.5px);color:var(--gray-500);margin:0;line-height:1.75}

/* =========================================================
   FULL-BLEED SHOWCASE
   ========================================================= */
.showcase{position:relative;height:clamp(360px,72vh,680px);overflow:hidden;display:flex;align-items:flex-end}
.showcase__bg{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;z-index:0;will-change:transform}
.showcase__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(6,15,41,.86) 0%,rgba(6,15,41,.25) 45%,transparent 75%)}
.showcase__cap{position:relative;z-index:2;color:#fff;padding:clamp(28px,5vw,64px);max-width:760px}
.showcase__cap .eyebrow{color:var(--orange-400)}
.showcase__cap h2{color:#fff;font-size:clamp(24px,4vw,46px);font-weight:900}
.showcase__cap p{color:#cdd9e4;margin-top:10px;font-weight:300;font-size:clamp(14px,1.6vw,18px)}

/* =========================================================
   AI LAB TABLE
   ========================================================= */
.ai-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px;margin:8px 0 0;padding:0;list-style:none}
.ai-feats li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(14px,1.5vw,16.5px);color:#cbd8ea}
.ai-feats li::before{content:"";flex-shrink:0;width:9px;height:9px;margin-top:9px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 4px rgba(224,99,58,.18)}

.tablewrap{margin-top:30px;border-radius:18px;overflow:hidden;border:1px solid rgba(173,191,219,.18);
  background:rgba(255,255,255,.03);backdrop-filter:blur(4px)}
.aitable{width:100%;border-collapse:collapse;font-size:clamp(13px,1.45vw,15.5px)}
.aitable thead th{background:rgba(20,79,132,.55);color:#fff;font-weight:700;padding:16px 20px;text-align:right;white-space:nowrap}
.aitable thead th.c{text-align:center;width:120px}
.aitable td{padding:16px 20px;color:#cbd8ea;border-top:1px solid rgba(173,191,219,.12);vertical-align:middle}
.aitable tbody tr{transition:background .3s}
.aitable tbody tr:hover{background:rgba(31,111,184,.14)}
.aitable .yr{font-family:'Gotham';font-weight:500;color:#fff;white-space:nowrap;width:90px}
.aitable .st{text-align:center}
.aitable .en{direction:ltr;unicode-bidi:isolate}
.check{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;
  background:rgba(46,170,110,.16);border:1px solid rgba(46,170,110,.5)}
.check svg{width:16px;height:16px;stroke:#3ec98a;stroke-width:3;fill:none}
.ongoing{color:var(--orange-400);font-weight:500}

/* =========================================================
   PROJECTS (numbered)
   ========================================================= */
.proj{display:flex;gap:clamp(16px,2.4vw,30px);align-items:flex-start;
  padding:clamp(20px,2.6vw,32px);border-radius:18px;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s}
.proj:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.proj__no{font-family:'Gotham';font-weight:700;font-size:clamp(40px,6vw,72px);line-height:.9;
  background:linear-gradient(160deg,var(--blue-500),var(--blue-700));-webkit-background-clip:text;background-clip:text;color:transparent;flex-shrink:0}
.proj h3{font-size:clamp(17px,2vw,23px);margin-bottom:6px}
.proj p{font-size:clamp(13.5px,1.5vw,16px);color:var(--gray-500);margin:0}

/* =========================================================
   PARTNERS
   ========================================================= */
.partners-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,56px)}
.pcol h3{display:flex;align-items:center;gap:12px;font-size:clamp(18px,2.2vw,26px);font-weight:900;margin-bottom:18px;color:var(--blue-600)}
.pcol h3 .dot{width:14px;height:14px;border-radius:50%;background:var(--orange)}
.pcol.intl h3 .dot{background:var(--blue-500)}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.plist li{display:flex;gap:11px;align-items:flex-start;padding:9px 12px;border-radius:10px;
  font-size:clamp(13.5px,1.5vw,16px);color:var(--gray-600);font-weight:400;transition:background .25s,transform .25s}
.plist li:hover{background:var(--paper-2);transform:translateX(-4px)}
.plist li::before{content:"";flex-shrink:0;width:7px;height:7px;margin-top:9px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.pcol.intl .plist li::before{background:var(--blue-500)}
.plist .en{direction:ltr;unicode-bidi:isolate}
.bignum{margin-top:clamp(30px,5vw,56px);text-align:center}
.bignum b{font-family:'Gotham';font-weight:700;font-size:clamp(64px,13vw,150px);line-height:1;direction:ltr;
  background:linear-gradient(160deg,var(--orange),var(--orange-600));-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.bignum span{color:var(--gray-500);font-size:clamp(15px,1.8vw,20px);font-weight:400}
.motto{font-family:'Gotham';font-weight:500;letter-spacing:.32em;font-size:clamp(11px,1.3vw,14px);
  color:var(--blue-500);opacity:0;margin-top:12px;direction:ltr;white-space:nowrap}
.motto.go{animation:mottoIn 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes mottoIn{
  0%  {opacity:0; letter-spacing:.85em; filter:blur(3px); color:var(--orange);}
  55% {opacity:.9;}
  100%{opacity:.9; letter-spacing:.32em; filter:blur(0); color:var(--blue-500);}
}
@media (prefers-reduced-motion:reduce){.motto{opacity:.9}.motto.go{animation:none}}

/* =========================================================
   GOALS
   ========================================================= */
.goal{display:flex;gap:16px;align-items:flex-start;padding:clamp(16px,2vw,24px);border-radius:16px;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s}
.goal:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.goal__n{flex-shrink:0;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-family:'Gotham';font-weight:700;font-size:18px;color:#fff;
  background:linear-gradient(160deg,var(--blue-500),var(--blue-700));box-shadow:0 10px 22px rgba(20,79,132,.3)}
.goal h4{font-size:clamp(15px,1.7vw,18.5px);font-weight:700;color:var(--blue-600);margin-bottom:4px}
.goal p{font-size:clamp(13px,1.45vw,15px);color:var(--gray-500);margin:0}

/* =========================================================
   CONTACT / FOOTER
   ========================================================= */
.contact{background:radial-gradient(120% 120% at 80% 0%,var(--navy-700),var(--navy-900) 60%,var(--navy-950));color:#cdd9e4;
  padding-block:clamp(46px,6vw,76px) clamp(24px,3.5vw,38px)}        /* footer-like spacing */
.contact .title{color:#fff}
/* footer-style contact — no boxes, just simple line icons */
.cinfo{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,30px) clamp(26px,4vw,50px);margin-top:clamp(26px,4vw,40px)}
.cinfo .citem{min-width:0}
.citem{display:flex;gap:13px;align-items:flex-start;background:none;border:0;padding:0;transition:none}
.citem:hover{background:none;transform:none}
.citem__ic{flex-shrink:0;width:28px;height:28px;border-radius:0;background:none;display:flex;align-items:flex-start;justify-content:center;margin-top:2px}
.citem__ic svg{width:25px;height:25px;stroke:var(--orange-400);fill:none;stroke-width:1.5}
.citem b{display:block;color:#fff;font-weight:500;font-size:14.5px;margin-bottom:3px}
.citem span{font-size:13px;color:#9fb4cf;line-height:1.6}
.citem .en{direction:ltr;unicode-bidi:isolate}
.footer{margin-top:clamp(32px,5vw,52px);padding-top:24px;border-top:1px solid rgba(173,191,219,.16);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.footer img{width:38px;height:38px;opacity:.95}
.footer p{margin:0;font-size:13px;color:#7e95b4}

/* floating back-to-top */
.totop{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:900;width:48px;height:48px;border-radius:50%;
  border:0;cursor:pointer;background:var(--orange);color:#fff;box-shadow:0 12px 30px rgba(214,96,59,.45);
  display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(14px);transition:.35s var(--ease)}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop svg{width:22px;height:22px;stroke:#fff;stroke-width:2.4;fill:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__year{margin-inline-start:0}
}
@media (max-width:880px){
  :root{--nav-h:64px}
  .split,.split--rev{grid-template-columns:1fr;gap:32px}
  .split .deco{order:-1;max-width:62%;margin-inline:auto}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .partners-grid{grid-template-columns:1fr}
  .ai-feats{grid-template-columns:1fr}
  .cinfo{grid-template-columns:repeat(2,1fr)}
  .aitable thead th.c{width:84px}
}
@media (max-width:560px){
  .section{padding:54px 16px}
  .stats{grid-template-columns:1fr;gap:14px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .cinfo{grid-template-columns:1fr}
  .arm{flex-direction:row}
  .proj{flex-direction:row;gap:14px}
  .proj__no{font-size:44px}
  .aitable thead th,.aitable td{padding:12px 12px}
  .aitable .en{font-size:12px}
  .footer{flex-direction:column;text-align:center}
  .totop{inset-block-end:16px;inset-inline-start:16px}
}

/* ===================== language switcher + English (LTR) overrides ===================== */
.nav__lang{flex-shrink:0;font-family:'Gotham';font-weight:500;font-size:12.5px;color:var(--blue-600);
  border:1.5px solid rgba(20,79,132,.28);border-radius:20px;padding:5px 12px;line-height:1;white-space:nowrap;
  transition:color .25s,background .25s,border-color .25s;margin-inline-start:8px}
.nav__lang:hover{background:var(--orange);color:#fff;border-color:var(--orange)}

/* section titles unfurl left→right in the English (LTR) version */
[dir="ltr"] .title{clip-path:inset(-.08em 100% -.22em -.16em)}
[dir="ltr"] .title.go{animation:ttlInLtr 1.25s cubic-bezier(.2,.75,.2,1) both}
@keyframes ttlInLtr{
  0%  {opacity:0; clip-path:inset(-.08em 100% -.22em -.16em); color:var(--orange);}
  28% {opacity:1;}
  60% {clip-path:inset(-.08em -.16em -.22em -.16em); color:var(--orange);}
  100%{opacity:1; clip-path:inset(-.08em -.16em -.22em -.16em); color:var(--tc);}
}
/* hero title unfurl left→right in English */
[dir="ltr"] .hero h1{animation:shimmer 6s linear infinite, heroTitleInLtr 2.1s cubic-bezier(.2,.75,.2,1) both}
@keyframes heroTitleInLtr{
  0%  {opacity:0; clip-path:inset(0 100% 0 -.12em); -webkit-text-fill-color:#3aa6e6;}
  28% {opacity:1;}
  60% {clip-path:inset(0 -.12em 0 -.12em); -webkit-text-fill-color:#1f78c0;}
  100%{clip-path:inset(0 -.12em 0 -.12em); -webkit-text-fill-color:transparent;}
}

/* clickable footer contact links */
.citem a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.citem a:hover{color:var(--orange-400);border-bottom-color:var(--orange-400)}

/* ===================== video band (plays on scroll / hover) ===================== */
.vband{position:relative;width:100%;background:var(--navy-950);overflow:hidden;line-height:0;display:flex}
.vband__vid{width:100%;height:auto;max-height:90vh;object-fit:cover;display:block;cursor:pointer}
.vband__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,15,41,.30),transparent 28%),linear-gradient(180deg,rgba(6,15,41,.18),transparent 22%)}
.vband__sound{position:absolute;inset-block-end:clamp(14px,2vw,22px);inset-inline-end:clamp(14px,2vw,22px);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);cursor:pointer;
  background:rgba(7,18,41,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:background .25s,transform .25s,border-color .25s}
.vband__sound:hover{background:var(--orange);transform:scale(1.06);border-color:transparent}
.vband__sound svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vband__sound .ic-on{display:none}
.vband__sound.on .ic-mute{display:none}
.vband__sound.on .ic-on{display:block}

/* ===================== media video showcase ===================== */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(26px,4vw,40px)}
.vcard{position:relative;border-radius:16px;overflow:hidden;background:#05060a;aspect-ratio:16/9;
  box-shadow:0 18px 50px rgba(0,0,0,.45);border:1px solid rgba(173,191,219,.12)}
.vcard__vid{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.vreels{display:flex;gap:clamp(14px,2.5vw,26px);justify-content:center;flex-wrap:wrap;margin-top:clamp(10px,2vw,18px)}
.vreel{position:relative;border-radius:20px;overflow:hidden;background:#05060a;width:min(250px,44vw);aspect-ratio:9/16;
  box-shadow:0 24px 60px rgba(0,0,0,.5);border:1px solid rgba(173,191,219,.12)}
.vreel__vid{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.vreels__label{text-align:center;color:#9fb4cf;font-weight:500;font-size:clamp(13px,1.5vw,15px);margin-top:clamp(28px,4vw,44px)}
.vsound{position:absolute;inset-block-end:10px;inset-inline-end:10px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);cursor:pointer;background:rgba(7,18,41,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:background .25s,transform .25s}
.vsound:hover{background:var(--orange);transform:scale(1.08);border-color:transparent}
.vsound svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vsound .ic-on{display:none}.vsound.on .ic-mute{display:none}.vsound.on .ic-on{display:block}
@media (max-width:880px){.vgrid{grid-template-columns:1fr}}
.vfeature{position:relative;border-radius:18px;overflow:hidden;background:#05060a;aspect-ratio:16/9;
  margin-top:clamp(26px,4vw,40px);box-shadow:0 24px 60px rgba(0,0,0,.5);border:1px solid rgba(173,191,219,.14)}
.vfeature__vid{width:100%;height:100%;display:block}

/* ===================== teaser (summary) + detail pages ===================== */
.teaser-points{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,2.6vw,26px)}
.teaser-points span{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);
  border-radius:30px;padding:9px 18px 9px 9px;font-weight:500;color:var(--blue-600);font-size:clamp(13px,1.5vw,15.5px);box-shadow:var(--shadow-sm)}
.teaser-points span img{width:34px;height:34px;border-radius:50%;mix-blend-mode:multiply}
.teaser-points.txt span{padding-inline:20px}
.section--dark .teaser-points span{background:rgba(255,255,255,.06);border-color:rgba(173,191,219,.18);color:#dfe8f4}
.section--dark .teaser-points span img{mix-blend-mode:normal}
.btn-more{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(22px,3.2vw,32px);
  font-family:var(--font);font-weight:500;font-size:clamp(14px,1.6vw,16.5px);color:#fff;
  background:linear-gradient(160deg,var(--orange),var(--orange-600));padding:13px 28px;border-radius:32px;
  box-shadow:0 14px 32px rgba(214,96,59,.35);transition:transform .3s var(--ease),box-shadow .3s}
.btn-more:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(214,96,59,.45)}
.btn-more svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.4}
[dir="rtl"] .btn-more svg{transform:scaleX(-1)}

/* detail page */
.dpage{padding-top:calc(var(--nav-h) + clamp(28px,5vw,56px))}
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--orange);font-family:var(--font);font-weight:500;
  font-size:clamp(13px,1.5vw,15px);margin-bottom:clamp(14px,2vw,20px)}
.back-link svg{width:16px;height:16px;stroke:var(--orange);fill:none;stroke-width:2.4}
[dir="rtl"] .back-link svg{transform:scaleX(-1)}
.back-link:hover{gap:13px}
.dfoot{background:radial-gradient(120% 120% at 80% 0%,var(--navy-700),var(--navy-900) 60%,var(--navy-950));
  color:#9fb4cf;text-align:center;padding:clamp(38px,5vw,60px) 20px}
.dfoot img{width:46px;height:46px;margin:0 auto 16px;display:block}
.dfoot p{margin:0 0 6px;font-size:14px}
.dfoot a{color:var(--orange-400);font-weight:500}

/* ===================== 360° virtual tour (Pannellum) ===================== */
.panotour{margin-top:clamp(20px,3vw,34px)}
.panotour__stage{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 64px rgba(13,38,76,.22)}
.panotour__view{width:100%;height:clamp(330px,52vw,620px);background:#0d1f3a}
.panotour__label{position:absolute;inset-inline-start:16px;top:14px;z-index:6;pointer-events:none;
  background:rgba(13,31,58,.74);color:#fff;font-family:var(--font);font-weight:600;
  font-size:clamp(13px,1.6vw,16px);padding:8px 17px;border-radius:30px;backdrop-filter:blur(6px)}
.panotour__hint{position:absolute;inset-inline-end:16px;bottom:16px;z-index:6;pointer-events:none;
  background:rgba(13,31,58,.6);color:#e7eef8;font-family:var(--font);font-size:13px;
  padding:7px 14px;border-radius:30px;animation:panohint 6.5s ease forwards}
@keyframes panohint{0%,55%{opacity:1}100%{opacity:0}}
.panotour__strip{display:flex;gap:10px;overflow-x:auto;padding:16px 2px 6px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.panotour__strip::-webkit-scrollbar{height:7px}
.panotour__strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.pano-thumb{flex:0 0 auto;width:clamp(122px,15vw,152px);scroll-snap-align:center;cursor:pointer;padding:0;
  border:2px solid transparent;border-radius:13px;overflow:hidden;background:var(--paper);
  box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.pano-thumb img{display:block;width:100%;height:74px;object-fit:cover}
.pano-thumb span{display:block;font-family:var(--font);font-weight:500;font-size:12px;color:var(--ink);
  padding:7px 8px;line-height:1.35;text-align:center}
.pano-thumb:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pano-thumb.is-active{border-color:var(--orange)}
.pano-thumb.is-active span{color:var(--orange-600);font-weight:600}
/* teaser 360 badge on the home page */
.pano-badge{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--font);font-weight:600;font-size:13.5px;color:var(--orange-600)}
.pano-badge svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:2}