/* alnaddaf.me — design tokens, layout and components. Logical properties throughout so RTL mirrors natively. */

@font-face{font-family:"Manrope";src:url("/fonts/manrope-latin-var.woff2") format("woff2-variations"),url("/fonts/manrope-latin-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/plex-arabic-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/plex-arabic-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/plex-arabic-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/plex-arabic-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/plex-arabic-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --navy:#101A2A; --navy-2:#162236; --charcoal:#202936;
  --paper:#F6F4EF; --paper-2:#FBFAF7; --white:#FFFFFF;
  --ink:#131A25; --ink-2:#4A5262; --ink-3:#5E6573;
  --mist:#A6AEBB; --cloud:#D3D8DF;
  --gold:#B89B5E; --gold-2:#C9AF78; --gold-ink:#7A6232;
  --line:#E3DFD5; --line-dark:rgba(246,244,239,.12);
  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --nav-h:76px;
  --gutter:clamp(16px,5vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
html[lang="ar"]{--font:"IBM Plex Sans Arabic","Manrope",ui-sans-serif,system-ui,Tahoma,Arial,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
html[lang="ar"] body{line-height:1.85}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd,figure{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:var(--gold);color:var(--navy)}

.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .i-arrow{transform:scaleX(-1)}

.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:100;background:var(--gold);color:var(--navy);padding:10px 16px;font-weight:600;border-radius:2px;transition:top .2s}
.skip:focus{top:12px}

/* ---------- Type ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.eyebrow--light{color:var(--gold)}
.eyebrow .i{width:15px;height:15px}
.eyebrow__num{display:inline-flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums}
.eyebrow__num::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:14px}
.h2{font-size:clamp(30px,3.6vw,46px);font-weight:600;line-height:1.12;letter-spacing:-.025em}
.lead{font-size:clamp(26px,3.2vw,40px);font-weight:500;line-height:1.25;letter-spacing:-.02em;max-width:24ch}
.display{font-size:clamp(42px,6.4vw,80px);font-weight:500;line-height:1.02;letter-spacing:-.035em}
html[lang="ar"] .h2,html[lang="ar"] .lead,html[lang="ar"] .display{letter-spacing:0;line-height:1.35}
html[lang="ar"] .lead{max-width:30ch}
.section-sub{margin-top:14px;color:var(--ink-2);font-size:17px;max-width:56ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 26px;font-family:inherit;font-size:15px;font-weight:600;border-radius:2px;border:1px solid transparent;transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease);cursor:pointer}
.btn .i{transition:transform .25s var(--ease)}
.btn:hover .i-arrow{transform:translateX(4px)}
[dir="rtl"] .btn:hover .i-arrow{transform:scaleX(-1) translateX(4px)}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{background:var(--gold-2)}
.btn--ghost{border-color:rgba(246,244,239,.28);color:var(--paper)}
.btn--ghost:hover{border-color:var(--gold);color:#fff}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset-inline:0;top:0;z-index:50;height:var(--nav-h);color:var(--paper);transition:background .35s,border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent}
.nav.is-scrolled,.nav.is-open{background:rgba(16,26,42,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line-dark)}
.nav__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand__mark{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--gold);color:var(--gold);font-family:"Manrope",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.08em}
.brand__name{font-size:15px;font-weight:600;letter-spacing:.01em}
.nav__links ul{display:flex;gap:34px}
.nav__links a{position:relative;font-size:14px;color:var(--mist);transition:color .2s;padding-block:6px}
.nav__links a:hover,.nav__links a.is-active{color:var(--paper)}
.nav__links a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .3s var(--ease)}
.nav__links a.is-active::after{transform:scaleX(1)}
.nav__tools{display:flex;align-items:center;gap:22px}
.lang{display:inline-flex;align-items:center;gap:6px;font-family:"Manrope",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--mist);padding:6px 2px}
.lang__opt.is-on{color:var(--paper)}
.lang:hover .lang__opt{color:var(--paper)}
.lang__sep{opacity:.4}
.nav__cta{font-size:14px;font-weight:600;padding:9px 18px;border:1px solid rgba(184,155,94,.7);border-radius:2px;transition:background .25s,color .25s}
.nav__cta:hover{background:var(--gold);color:var(--navy)}
.nav__cta--mobile{display:none}
.burger{display:none;width:40px;height:40px;background:none;border:0;padding:0;cursor:pointer;position:relative;color:var(--paper)}
.burger span{position:absolute;inset-inline-start:9px;width:22px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.burger span:first-child{top:15px}.burger span:last-child{top:23px}
.nav.is-open .burger span:first-child{transform:translateY(4px) rotate(45deg)}
.nav.is-open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy);color:var(--paper);padding-top:calc(var(--nav-h) + clamp(40px,7vw,96px));overflow:hidden;isolation:isolate}
.hero__grid-bg{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(to right,rgba(246,244,239,.045) 1px,transparent 1px);background-size:calc((min(100vw,1200px) - 2*var(--gutter))/6) 100%;background-position:center;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 20%,transparent 80%)}
.hero::after{content:"";position:absolute;z-index:-1;width:720px;height:720px;inset-inline-end:-160px;top:-120px;background:radial-gradient(circle,rgba(184,155,94,.12),transparent 62%)}
.hero__inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:end}
.hero__text{padding-bottom:clamp(24px,5vw,72px)}
.hero__name{margin-top:28px;font-size:clamp(46px,7.4vw,98px);font-weight:600;line-height:.98;letter-spacing:-.04em}
html[lang="ar"] .hero__name{letter-spacing:0;line-height:1.15;font-weight:600}
.hero__position{margin-top:22px;font-size:clamp(19px,2vw,25px);font-weight:400;color:var(--gold-2);letter-spacing:-.01em}
html[lang="ar"] .hero__position{letter-spacing:0}
.hero__intro{margin-top:24px;max-width:54ch;color:var(--cloud);font-size:17px;font-weight:400}
.hero__ctas{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px}

.hero__portrait{position:relative;justify-self:end;width:100%;max-width:430px}
.portrait{position:relative;aspect-ratio:4/5;background:linear-gradient(180deg,#1E2B42 0%,#17233A 55%,#132036 100%);overflow:hidden}
.portrait::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 38%,rgba(201,175,120,.22),transparent 70%)}
.portrait picture{position:absolute;inset-inline:0;bottom:0;display:flex;justify-content:center}
.portrait img{width:104%;max-width:none;height:auto;filter:saturate(.96) contrast(1.02)}
.hero__portrait::before{content:"";position:absolute;inset-block:22px -22px;inset-inline:22px -22px;border:1px solid rgba(184,155,94,.55);z-index:-1}
[dir="rtl"] .hero__portrait{justify-self:start}
[dir="rtl"] .hero__portrait::before{inset-inline:-22px 22px}

.facts{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dark)}
.facts__item{padding:28px 0 34px;padding-inline-end:24px}
.facts__item + .facts__item{padding-inline-start:28px;border-inline-start:1px solid var(--line-dark)}
.facts dt{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
html[lang="ar"] .facts dt{letter-spacing:0;font-size:13.5px}
.facts dd{margin-top:8px;font-size:16px;font-weight:500;color:var(--paper)}

/* ---------- Sections ---------- */
.section{padding-block:clamp(84px,11vw,144px)}
.section--light{background:var(--paper)}
.section--paper{background:var(--paper-2)}
.section--dark{background:var(--navy-2);color:var(--paper)}
.section-head--row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:baseline;margin-bottom:clamp(48px,6vw,80px)}

/* About */
.about{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px}
.about .section-head{padding-top:12px}
.about__cols{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,6vw,80px)}
.prose p{color:var(--ink-2);font-size:17px}
.prose p + p{margin-top:18px}
.path{border-top:1px solid var(--ink);padding-top:22px}
.path__title{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
html[lang="ar"] .path__title{letter-spacing:0;font-size:14px}
.path__list{margin-top:12px;counter-reset:p}
.path__list li{display:grid;grid-template-columns:64px 1fr;align-items:center;padding-block:14px;border-bottom:1px solid var(--line);font-size:15.5px}
.path__year{font-variant-numeric:tabular-nums;color:var(--gold-ink);font-weight:600;font-size:14px}
.path__list li:last-child .path__label{font-weight:600}
.path__list li:last-child .path__label::after{content:"";display:inline-block;width:7px;height:7px;margin-inline-start:10px;background:var(--gold);transform:rotate(45deg) translateY(-2px)}
.values{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.values li{font-size:13px;padding:6px 12px;border:1px solid var(--line);color:var(--ink-2);background:var(--paper-2)}

/* Timeline */
.timeline{position:relative;display:grid;gap:28px;--when:220px;--rail:56px}
.timeline__rail{position:absolute;top:10px;bottom:10px;inset-inline-start:calc(var(--when) + var(--rail)/2);width:1px;background:var(--line)}
.timeline__fill{position:absolute;inset:0;background:var(--gold);transform-origin:top;transform:scaleY(var(--p,1))}
.tl{position:relative;display:grid;grid-template-columns:var(--when) var(--rail) minmax(0,1fr)}
.tl__when{padding-top:6px}
.tl__period{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tl__meta{font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.tl__dot{justify-self:center;margin-top:12px;width:11px;height:11px;border:1px solid var(--gold);background:var(--paper-2);transform:rotate(45deg);position:relative;z-index:1;transition:background .4s}
.tl.is-passed .tl__dot,.tl--current .tl__dot{background:var(--gold)}
.tl--current .tl__dot{box-shadow:0 0 0 6px rgba(184,155,94,.16)}
.tl__card{background:var(--white);border:1px solid var(--line);padding:clamp(24px,3vw,36px);transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.tl__card:hover{border-color:rgba(184,155,94,.55);box-shadow:0 22px 44px -30px rgba(16,26,42,.35);transform:translateY(-2px)}
.tl__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.tl__company{font-family:"Manrope",sans-serif;font-size:21px;font-weight:600;letter-spacing:-.01em;text-align:start}
[dir="rtl"] .tl__company{text-align:right}
.tl__context{margin-top:4px;font-size:14px;color:var(--ink-2)}
.badge{flex:none;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);border:1px solid var(--gold);padding:4px 10px}
html[lang="ar"] .badge{letter-spacing:0;font-size:12.5px}
.roles{margin-top:20px;border-block:1px solid var(--line)}
.role{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding-block:12px}
.role + .role{border-top:1px dashed var(--line)}
.role__title{font-size:17px;font-weight:600;color:var(--ink)}
.role__official{display:inline-block;margin-inline-start:8px;font-family:"Manrope",sans-serif;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.role__dates{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.points{margin-top:18px;display:grid;gap:9px}
.points li{position:relative;padding-inline-start:24px;color:var(--ink-2);font-size:15.5px;line-height:1.65}
.points li::before{content:"";position:absolute;inset-inline-start:0;top:.8em;width:12px;height:1px;background:var(--gold)}
.tags{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:12.5px;padding:5px 11px;border:1px solid var(--line);color:var(--ink-2)}

/* Contributions (approved/draft) */
.contrib{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.contrib__card{background:var(--white);border:1px solid var(--line);padding:clamp(24px,3vw,36px);position:relative}
.contrib__org{font-size:13px;color:var(--ink-3)}
.contrib__name{margin-top:6px;font-size:24px;font-weight:600;letter-spacing:-.015em}
.contrib__summary{margin-top:12px;color:var(--ink-2)}
.contrib__role{margin-top:22px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
html[lang="ar"] .contrib__role{letter-spacing:0;font-size:13.5px}
.contrib__outcome{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.is-draft{border:1.5px dashed #C4882B}
.draft-tag{position:absolute;top:-12px;inset-inline-start:24px;background:#C4882B;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px}
.needs-confirm{background:#FFF6E5;padding:12px 14px;border-top:0;border-inline-start:3px solid #C4882B}
.confirm{margin-top:18px;background:#FFF6E5;border:1px solid #EBC98C;padding:14px 16px;font-size:14px}
.confirm__h{font-weight:700;color:#8A5A12}
.confirm li{margin-top:4px;padding-inline-start:16px;position:relative}
.confirm li::before{content:"□";position:absolute;inset-inline-start:0;color:#8A5A12}
.review-banner{position:fixed;inset-inline:0;top:0;z-index:60;height:40px;display:grid;place-items:center;background:#C4882B;color:#fff;font-size:13.5px;font-weight:600;text-align:center;padding:0 16px;overflow:hidden}
.is-review .nav{top:40px}
.is-review body{padding-top:40px}

/* Expertise */
.section--dark .h2{color:var(--paper)}
.xp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.xp__card:last-child{border-color:rgba(184,155,94,.45)}
.xp__card{border:1px solid var(--line-dark);background:linear-gradient(180deg,rgba(246,244,239,.035),rgba(246,244,239,.01));padding:clamp(26px,3vw,38px);transition:border-color .3s,transform .3s var(--ease)}
.xp__card:hover{border-color:rgba(184,155,94,.5);transform:translateY(-3px)}
.xp__icon{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid rgba(184,155,94,.5);color:var(--gold)}
.xp__icon .i{width:22px;height:22px}
.xp__title{margin-top:26px;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
html[lang="ar"] .xp__title{letter-spacing:0}
.xp__list{margin-top:18px}
.xp__list li{padding-block:12px;border-top:1px solid var(--line-dark);color:var(--cloud);font-size:15px}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:start}
.contact .display{margin-top:24px}
.contact__loc{margin-top:28px;display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:15px}
.contact__loc .i{color:var(--gold-ink)}
.channels{border-top:1px solid var(--ink)}
.channel{display:flex;align-items:center;gap:20px;padding-block:24px;border-bottom:1px solid var(--line);transition:color .2s}
.channel__icon{display:inline-grid;place-items:center;width:48px;height:48px;flex:none;border:1px solid var(--line);color:var(--gold-ink);transition:border-color .25s,background .25s}
.channel__body{flex:1;display:flex;flex-direction:column;min-width:0}
.channel__label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
html[lang="ar"] .channel__label{letter-spacing:0;font-size:13.5px}
.channel__value{margin-top:2px;font-size:clamp(16px,1.6vw,19px);font-weight:500;color:var(--ink);overflow-wrap:anywhere}
[dir="rtl"] .channel__value[dir="ltr"]{text-align:right}
.channel > .i{color:var(--ink-3);transition:transform .25s var(--ease),color .25s}
.channel:hover .channel__icon{border-color:var(--gold);background:var(--white)}
.channel:hover > .i{color:var(--gold-ink);transform:translateX(4px)}
[dir="rtl"] .channel:hover > .i-arrow{transform:scaleX(-1) translateX(4px)}
.channel:hover .channel__value{color:var(--gold-ink)}

/* Footer */
.footer{background:var(--navy);color:var(--mist);font-size:14px}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:34px}
.footer__brand{display:flex;align-items:center;gap:12px;color:var(--paper);font-weight:600}
.footer__top:hover{color:var(--paper)}

/* Reveal (only when JS is running and motion is welcome) */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .section-head--row,.about{grid-template-columns:1fr;gap:18px}
  .about__cols{margin-top:36px}
  .timeline{--when:170px;--rail:44px}
}
@media (max-width:900px){
  :root{--nav-h:68px}
  .burger{display:block}
  .nav__links{position:fixed;inset-inline:0;top:var(--nav-h);background:var(--navy);border-bottom:1px solid var(--line-dark);padding:12px var(--gutter) 28px;display:none}
  .nav.is-open .nav__links{display:block}
  .nav__links ul{flex-direction:column;gap:0}
  .nav__links li a{display:block;padding:16px 0;font-size:18px;color:var(--paper);border-bottom:1px solid var(--line-dark)}
  .nav__links a::after{display:none}
  .nav__cta--mobile{display:inline-flex;margin-top:22px}
  .nav__tools > .nav__cta{display:none}
  .hero__inner{grid-template-columns:1fr}
  .hero__text{padding-bottom:0}
  .hero__portrait,[dir="rtl"] .hero__portrait{justify-self:center;width:calc(100% - 14px);max-width:340px;margin-inline:auto;margin-top:12px}
  .hero__portrait::before{inset-block:12px -12px;inset-inline:12px -12px}
  [dir="rtl"] .hero__portrait::before{inset-inline:-12px 12px}
  .facts{grid-template-columns:1fr}
  .facts__item,.facts__item + .facts__item{padding:18px 0;border-inline-start:0}
  .facts__item + .facts__item{border-top:1px solid var(--line-dark)}
  .about__cols,.contrib,.xp,.contact{grid-template-columns:1fr}
}
@media (max-width:720px){
  .timeline{--when:0px;--rail:28px;gap:36px}
  .timeline__rail{inset-inline-start:13px}
  .tl{grid-template-columns:var(--rail) minmax(0,1fr);grid-template-areas:"dot when" "dot card"}
  .tl__when{grid-area:when;padding:0 0 14px}
  .tl__dot{grid-area:dot;margin-top:8px}
  .tl__card{grid-area:card}
  .tl__head{flex-wrap:wrap}
  .brand__name{font-size:14px}
}
@media (max-width:420px){
  .brand__name{display:none}
  .hero__ctas .btn{width:100%;justify-content:space-between}
}

/* ---------- Print ---------- */
@media print{
  .nav,.skip,.hero__grid-bg,.hero::after,.hero__ctas,.footer__top,.review-banner{display:none!important}
  body,.hero,.section--dark,.section--paper{background:#fff!important;color:#111!important}
  .hero{padding-top:0}.hero__portrait{max-width:180px}
  .hero__intro,.facts dd,.xp__list li,.section--dark .h2{color:#222!important}
  .section{padding-block:24px}
  .tl__card,.xp__card,.channel{break-inside:avoid}
  .js .reveal{opacity:1!important;transform:none!important}
}

/* 404 */
.nf{background:var(--navy);color:var(--paper);min-height:100vh;display:grid;place-items:center;text-align:center}
.nf__main{padding:24px}
.nf__title{font-size:96px;font-weight:600;letter-spacing:-.04em;margin-top:20px}
.nf__ar{font-family:"IBM Plex Sans Arabic",sans-serif;color:var(--mist)}
.nf__links{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ======================================================================
   Interaction layer — mouse-driven depth, spotlight, cursor, transitions.
   Everything below is cosmetic: it switches off for reduced motion and
   the pointer effects only run on devices with a precise mouse.
   ====================================================================== */

/* Hero: cursor-following light */
.hero__spot{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(520px circle at var(--hx,70%) var(--hy,35%),rgba(201,175,120,.13),transparent 60%)}
.hero:hover .hero__spot{opacity:1}
[data-depth]{will-change:transform}
.hero__grid-bg{transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .9s var(--ease)}
.hero__portrait{transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .9s var(--ease)}

/* 3D tilt (portrait and cards) */
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),border-color .3s,box-shadow .3s;transform-style:preserve-3d}
[data-tilt].is-tilting{transition:transform .12s linear,border-color .3s,box-shadow .3s}
.contrib__card{transition:border-color .3s,box-shadow .3s,transform .4s var(--ease)}
.contrib__card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(16,26,42,.35)}

/* Spotlight that follows the mouse inside cards */
[data-spot]{position:relative;isolation:isolate}
[data-spot]::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(184,155,94,.10),transparent 65%)}
.section--dark [data-spot]::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(201,175,120,.14),transparent 65%)}
[data-spot]:hover::after{opacity:1}
.tl__card[data-spot]::before,.xp__card[data-spot]::before,.contrib__card[data-spot]::before{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;transition:opacity .35s;padding:1px;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(184,155,94,.85),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
[data-spot]:hover::before{opacity:1}

/* Magnetic buttons */
[data-magnetic]{transform:translate3d(var(--gx,0),var(--gy,0),0);transition:transform .45s var(--ease),background .25s,border-color .25s,color .25s}
[data-magnetic].is-pulling{transition:transform .1s linear,background .25s,border-color .25s,color .25s}

/* Custom cursor (desktop mice only) */
.cursor{display:none;--cx:-100px;--cy:-100px;--rx2:-100px;--ry2:-100px}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .has-cursor .cursor{display:block;position:fixed;inset:0;pointer-events:none;z-index:90}
  .cursor__dot,.cursor__ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s}
  .cursor.is-on .cursor__dot,.cursor.is-on .cursor__ring{opacity:1}
  .cursor__dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold);transform:translate3d(var(--cx),var(--cy),0)}
  .cursor__ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(184,155,94,.7);transform:translate3d(var(--rx2),var(--ry2),0) scale(var(--rs,1));transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s}
  .cursor.is-link .cursor__ring{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(184,155,94,.10);border-color:rgba(184,155,94,.9)}
  .cursor.is-down .cursor__ring{--rs:.85}
}

/* Intro sequence on first paint */
@media (prefers-reduced-motion:no-preference){
  .js .intro{opacity:0;transform:translateY(16px);animation:intro .9s var(--ease) forwards;animation-delay:var(--d,0ms)}
  .js .hero__name .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
  .js .intro-up{display:inline-block;transform:translateY(105%);animation:rise 1s var(--ease) forwards;animation-delay:var(--d,0ms)}
  .js .intro-portrait .portrait{clip-path:inset(100% 0 0 0);animation:unveil 1.2s var(--ease) .25s forwards}
  .js .intro-portrait .portrait img{transform:scale(1.08);animation:settle 1.6s var(--ease) .25s forwards}
  .js .intro-portrait::before{opacity:0;animation:fadein .8s ease 1s forwards}
  @keyframes intro{to{opacity:1;transform:none}}
  @keyframes rise{to{transform:none}}
  @keyframes unveil{to{clip-path:inset(0 0 0 0)}}
  @keyframes settle{to{transform:none}}
  @keyframes fadein{to{opacity:1}}

  /* Staggered reveal for grouped items */
  .js .reveal{transition-delay:var(--stagger,0ms)}
  .js .eyebrow__num::after{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .15s}
  [dir="rtl"].js .eyebrow__num::after{transform-origin:right}
  .js .is-seen .eyebrow__num::after{transform:scaleX(1)}
  .js .path__list li{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  [dir="rtl"].js .path__list li{transform:translateX(10px)}
  .js .path.in .path__list li{opacity:1;transform:none}
  .js .path.in .path__list li:nth-child(2){transition-delay:.1s}
  .js .path.in .path__list li:nth-child(3){transition-delay:.2s}
  .js .path.in .path__list li:nth-child(4){transition-delay:.3s}
  .js .tl .tl__when{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .1s,transform .7s var(--ease) .1s}
  .js .tl.in .tl__when{opacity:1;transform:none}

  /* Page transition between languages */
  .page-fade{position:fixed;inset:0;z-index:95;background:var(--navy);pointer-events:none;opacity:0;transition:opacity .38s ease}
  .is-leaving .page-fade{opacity:1}
  .pt-in .page-fade{opacity:1;animation:pagein .55s ease .05s forwards}
  @keyframes pagein{to{opacity:0}}
}
.page-fade{pointer-events:none}
@media (prefers-reduced-motion:reduce){.page-fade{display:none}}

/* Hero content eases away as you scroll past it */
[data-scroll-fade]{transform:translate3d(0,var(--sy,0),0);opacity:var(--so,1)}

/* Underline sweep on nav links and channel values */
.channel__value{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .45s var(--ease),color .25s}
[dir="rtl"] .channel__value{background-position:100% 100%}
.channel:hover .channel__value{background-size:100% 1px}