/* Ahmed Metwaly · v2 · "the office after hours": midnight, brass, ivory */
:root{
  --night:#0b1220; --deep:#111a2c; --ivory:#efe9df; --muted:#a9b0bd; --dim:#7a8394;
  --brass:#c9a35f; --brass-2:#e2c48a; --line:rgba(239,233,223,.12); --line-2:rgba(239,233,223,.22);
  --display:'Cormorant Garamond','Amiri',Georgia,serif;
  --text:'Manrope','Alexandria',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --wrap:min(1280px, calc(100% - 48px));
  --ease:cubic-bezier(.22,.8,.2,1);
}
:root[dir="rtl"]{ --display:'Amiri','Cormorant Garamond',serif; --text:'Alexandria','Manrope',system-ui,Tahoma,sans-serif; }
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{background:var(--night);color:var(--ivory);font:400 17px/1.65 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--brass);outline-offset:4px;border-radius:2px}
.skip{position:absolute;inset-inline-start:-999px}.skip:focus{inset-inline-start:16px;top:12px;z-index:50;background:var(--ivory);color:var(--night);padding:8px 14px}
.wrap{width:var(--wrap);margin-inline:auto}
.label{font:500 11.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
:root[dir="rtl"] .label{font:500 14px/1.5 var(--text);letter-spacing:0;text-transform:none}

/* top bar */
.top{position:absolute;inset:0 0 auto;z-index:10}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:88px;gap:24px;border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;gap:14px;text-decoration:none}
.mark i{width:38px;height:38px;border:1px solid var(--brass);display:grid;place-items:center;font:italic 500 18px/1 var(--display);color:var(--brass);border-radius:50%}
:root[dir="rtl"] .mark i{font:700 17px/1 'Amiri',serif}
.mark b{font:500 22px/1 var(--display);letter-spacing:.01em}
.top nav{display:flex;align-items:center;gap:34px;font-size:14px;letter-spacing:.02em}
.top nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.top nav a:hover{color:var(--ivory)}
.top nav .lang{color:var(--brass)}
@media (max-width:900px){.top nav .hide-sm{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 30px;border-radius:999px;
  background:var(--brass);color:var(--night);font:600 15px/1 var(--text);letter-spacing:.02em;text-decoration:none;
  transition:background .3s var(--ease)}
.btn:hover{background:var(--brass-2)}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
:root[dir="rtl"] .btn svg{transform:scaleX(-1)} :root[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(4px)}
.btn--line{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--line:hover{background:rgba(239,233,223,.06)}
.btn--line .play{width:22px;height:22px;border-radius:50%;border:1px solid var(--brass);display:grid;place-items:center}
.btn--line .play:before{content:"";border-inline-start:6px solid var(--brass);border-block:4px solid transparent;margin-inline-start:2px}

/* HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(60% 55% at 76% 46%, rgba(201,163,95,.12), transparent 62%),
    radial-gradient(60% 60% at 8% 100%, rgba(40,62,104,.5), transparent 60%),
    linear-gradient(180deg,#0b1220 0%,#0d1526 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center;padding:150px 0 130px}
.hero h1{font:400 clamp(46px,6vw,92px)/1.02 var(--display);letter-spacing:-.015em;margin-top:26px}
.hero h1 em{font-style:italic;color:var(--brass-2)}
:root[dir="rtl"] .hero h1{font:700 clamp(38px,4.9vw,72px)/1.4 var(--display);letter-spacing:0}
:root[dir="rtl"] .hero h1 em{font-style:normal}
.hero__sub{max-width:44ch;margin-top:28px;color:var(--muted);font-size:clamp(16px,1.35vw,18.5px)}
.hero__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.creds{display:flex;margin-top:64px;border-top:1px solid var(--line);max-width:620px}
.creds div{flex:1 1 0;padding:20px 22px 0 0}
.creds div+div{padding-inline-start:22px;border-inline-start:1px solid var(--line)}
:root[dir="rtl"] .creds div{padding:20px 0 0 22px}
:root[dir="rtl"] .creds div+div{padding-inline-start:22px}
.creds b{display:block;font:500 40px/1 'Cormorant Garamond',serif;color:var(--ivory)}
.creds b sup{font-size:.5em;color:var(--brass)}
.creds span{display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--dim);letter-spacing:.02em}

@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease) forwards}
  .d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* "One system": interactive constellation */
.system{position:relative;aspect-ratio:1;width:100%;max-width:560px;justify-self:end;margin-bottom:90px}
:root[dir="rtl"] .system{justify-self:start}
.system svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit{fill:none;stroke:var(--line);stroke-width:1}
.orbit.dash{stroke-dasharray:2 7}
.spoke{stroke:rgba(201,163,95,.16);stroke-width:1;transition:stroke .5s,stroke-width .5s}
.spoke.on{stroke:var(--brass);stroke-width:1.6}
.link{fill:none;stroke:rgba(226,196,138,0);stroke-width:1.2;transition:stroke .5s}
.link.on{stroke:rgba(226,196,138,.7)}
.pulse{fill:var(--brass-2)}
.core{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  display:grid;place-items:center;align-content:center;text-align:center;padding:8px;
  background:radial-gradient(circle at 50% 30%,#1c2943,#0e1729 72%);box-shadow:0 0 0 1px var(--line-2),0 0 90px -10px rgba(201,163,95,.35)}
.core b{display:block;font:italic 500 clamp(18px,2vw,27px)/1.05 var(--display);color:var(--ivory)}
:root[dir="rtl"] .core b{font:700 clamp(16px,1.7vw,22px)/1.35 var(--display)}
.core span{display:block;margin-top:8px;font:500 9px/1 var(--mono);letter-spacing:.22em;color:var(--brass)}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:9px;
  background:none;border:0;color:var(--muted);cursor:pointer;font:500 13px/1.2 var(--text);letter-spacing:.02em;padding:6px;transition:color .3s;white-space:nowrap}
.node i{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#101a2d;box-shadow:0 0 0 1px var(--line-2);
  font:500 11px/1 var(--mono);font-style:normal;color:var(--brass);letter-spacing:.06em;transition:box-shadow .45s var(--ease),background .45s,color .45s,transform .45s var(--ease)}
.node:hover{color:var(--ivory)}
.node.on{color:var(--ivory)}
.node.on i{background:var(--brass);color:var(--night);box-shadow:0 0 0 7px rgba(201,163,95,.13),0 0 44px rgba(201,163,95,.5);transform:scale(1.08)}
.caption{position:absolute;left:50%;top:calc(100% + 34px);transform:translateX(-50%);width:min(96%,440px);text-align:center;min-height:4.2em}
.caption p{font:italic 400 clamp(18px,1.55vw,22px)/1.35 var(--display);color:var(--ivory);transition:opacity .35s}
:root[dir="rtl"] .caption p{font:400 clamp(15px,1.3vw,18px)/1.65 var(--text)}
.caption small{display:block;margin-bottom:8px;font:500 10.5px/1 var(--mono);letter-spacing:.2em;color:var(--brass);text-transform:uppercase}
:root[dir="rtl"] .caption small{font:500 12.5px/1 var(--text);letter-spacing:0}

.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font:500 10px/1 var(--mono);letter-spacing:.22em;color:var(--dim);text-decoration:none}
.scroll-cue i{width:1px;height:38px;background:linear-gradient(var(--brass),transparent)}

@media (max-width:980px){
  .hero{min-height:auto}
  .hero .wrap{grid-template-columns:1fr;padding:128px 0 120px}
  .system{justify-self:center!important;max-width:460px;margin:20px auto 70px}
  .scroll-cue{display:none}
}
@media (max-width:520px){
  :root{--wrap:calc(100% - 36px)}
  .btn{width:100%;justify-content:center}
  .creds{margin-top:48px}
  .creds b{font-size:30px}
  .creds div{padding-inline-end:10px}.creds div+div{padding-inline-start:12px}
  .creds span{font-size:11.5px}
  .node{font-size:11px;gap:6px}.node i{width:40px;height:40px;font-size:9.5px}
  .core span{display:none}
}