/* Night Agents landing (2026-09-17): the nav, the hero and the facts strip. Loaded after fx.css so it wins.
   One accent (the lamp's green), one night surface, Instrument Sans for words and the system mono for facts. */
:root{--nd-green:#b8ff3c;--nd-green-hi:#d4ff85;--nd-night:#090909;--nd-rail:1240px;--nd-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.home-hero.nd-hero{position:relative;display:flex;flex-direction:column;min-height:100svh!important;background:var(--nd-night);color:#fff;overflow:hidden;isolation:isolate}
.nd-light{position:absolute;inset:-8%;z-index:0;pointer-events:none;will-change:transform;background:
  radial-gradient(46% 44% at 78% 48%,rgba(184, 255, 60,.15),rgba(184, 255, 60,.045) 46%,rgba(184, 255, 60,0) 72%),
  linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 28%),
  var(--nd-night)}
.home-hero.nd-hero>*{position:relative;z-index:1}
.home-hero.nd-hero>.nd-light,.home-hero.nd-hero>.nd-canvas{position:absolute;z-index:0}
.nd-canvas{inset:0;width:100%;height:100%;pointer-events:none;animation:nd-on 1.8s ease-out .95s both}
.nd-c-glow{image-rendering:auto;filter:blur(6px)}
.home-hero.nd-hero .fx-noise{opacity:.16}

/* nav */
.nd-nav{display:flex;align-items:center;gap:28px;width:min(100% - 48px,var(--nd-rail));margin:0 auto;height:84px}
.nd-brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.nd-brand .nd-mark{width:19.5px;height:24px;display:block}
.nd-links{display:flex;gap:28px;margin-left:20px}
.nd-links a,.nd-drawer a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.58);text-decoration:none;transition:color .15s}
.nd-links a:hover,.nd-drawer a:hover{color:#fff}
.nd-nav-end{margin-left:auto;display:flex;align-items:center;gap:10px}
.nd-status{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;font:500 11px/1 var(--nd-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap}
.nd-dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--nd-green);box-shadow:0 0 0 3px rgba(184, 255, 60,.18);flex:none;display:inline-block}
.nd-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(184, 255, 60,.7);animation:nd-ping 2.6s cubic-bezier(.2,.7,.3,1) infinite}
.nd-btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;border:1px solid transparent;cursor:pointer;font-family:inherit}
.nd-btn-solid{background:var(--nd-green);color:var(--nd-night)!important}
.nd-btn-solid:hover{background:var(--nd-green-hi)}
.nd-btn-ghost{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.03)}
.nd-btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.nd-btn-lg{height:52px;padding:0 22px}
.nd-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:6px;border:1px solid rgba(255,255,255,.14);color:#fff;transition:border-color .15s}
.nd-icon:hover{border-color:rgba(255,255,255,.5)}
.nd-menu{display:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.nd-menu span{display:block;width:16px;height:1.5px;background:#fff}
.nd-drawer{width:min(100% - 32px,var(--nd-rail));margin:0 auto;padding:6px 0 22px;display:flex;flex-direction:column;gap:18px;border-bottom:1px solid rgba(255,255,255,.1)}
.nd-drawer[hidden]{display:none}
.nd-drawer .nd-btn{align-self:flex-start;margin-top:4px}

/* body */
.nd-hero-body{flex:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:clamp(32px,5vw,72px);width:min(100% - 48px,var(--nd-rail));margin:0 auto;padding:clamp(36px,6vh,80px) 0 clamp(40px,7vh,84px)}
.nd-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;font:500 11px/1 var(--nd-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.nd-h1{margin:0;font-size:clamp(42px,4.7vw,68px);font-weight:500;line-height:1;letter-spacing:-.035em;color:#fff}
.nd-h1 em{font-style:normal;color:var(--nd-green)}
.nd-lead{margin:28px 0 0;max-width:37rem;font-size:17px;line-height:1.55;color:rgba(255,255,255,.7)}
.nd-lead b{color:#fff;font-weight:500}
.nd-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.nd-coin{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px;font:500 12px/1 var(--nd-mono);letter-spacing:.06em;color:rgba(255,255,255,.55)}
.nd-coin b{color:#fff;font-weight:700}
.nd-coin code{font:inherit;color:rgba(255,255,255,.8)}
.nd-coin button,.nd-coin a{font:inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--nd-green);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.nd-coin button:hover,.nd-coin a:hover{color:var(--nd-green-hi)}
.nd-sep{width:1px;height:12px;background:rgba(255,255,255,.18);display:inline-block}

/* the lamp */
.nd-hero-lamp{position:relative;justify-self:end;will-change:transform;width:min(100%,clamp(260px,27vw,420px));margin-right:clamp(0px,2vw,32px)}
.nd-hero-lamp svg{display:block;width:100%;height:auto;overflow:visible}

/* facts */
.nd-facts{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100% - 48px,var(--nd-rail));margin:0 auto}
.nd-facts::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:rgba(255,255,255,.12);transform-origin:left;animation:nd-line 1.6s cubic-bezier(.16,1,.3,1) 1s both}
.nd-facts>div{padding:26px 28px 36px 0;margin:0}
.nd-facts>div+div{padding-left:28px;border-left:1px solid rgba(255,255,255,.08)}
.nd-facts dt{display:flex;align-items:center;gap:12px;font:500 11px/1 var(--nd-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.nd-facts dt i{font-style:normal;color:var(--nd-green)}
.nd-facts dd{margin:12px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.58);max-width:28ch}

@media (max-width:1100px){.nd-links{gap:20px;margin-left:8px}.nd-status{display:none}}
@media (max-width:900px){
  .nd-nav{height:72px;gap:16px;width:min(100% - 32px,var(--nd-rail))}
  .nd-links,.nd-nav-end .nd-btn{display:none}.nd-menu{display:flex}
  .nd-hero-body{grid-template-columns:minmax(0,1fr);width:min(100% - 32px,var(--nd-rail));padding:20px 0 44px;gap:32px}
  .nd-hero-lamp{order:-1;justify-self:start;width:clamp(170px,40vw,250px);margin-left:-20px}
  .nd-h1{font-size:clamp(40px,11vw,64px)}
  .nd-lead{font-size:16px;margin-top:22px}
  .nd-actions{margin-top:28px}
  .nd-facts{grid-template-columns:1fr 1fr;width:min(100% - 32px,var(--nd-rail))}
  .nd-facts>div{padding:20px 16px 24px 0}
  .nd-facts>div+div{padding-left:16px}
  .nd-facts>div:nth-child(3){border-left:0;padding-left:0}
  .nd-facts>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
}
@media (max-width:520px){
  .nd-facts{grid-template-columns:1fr}
  .nd-facts>div+div{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .nd-btn-lg{width:100%;justify-content:center}
}

/* ---------- motion (2026-09-17 "mai animat") ----------
   The story of the first second: the words arrive, then the lamp clicks on and lights the green line,
   the room and the dust in the beam. After that everything breathes slowly and follows the cursor a little. */
@keyframes nd-rise{from{opacity:0;transform:translateY(16px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes nd-fade{from{opacity:0}to{opacity:1}}
@keyframes nd-on{0%{opacity:0}9%{opacity:1}13%{opacity:.15}22%{opacity:1}100%{opacity:1}}
@keyframes nd-lightup{0%{color:rgba(255,255,255,.26);text-shadow:none}9%{color:var(--nd-green);text-shadow:0 0 28px rgba(184, 255, 60,.45)}13%{color:rgba(255,255,255,.3);text-shadow:none}22%{color:var(--nd-green);text-shadow:0 0 34px rgba(184, 255, 60,.5)}100%{color:var(--nd-green);text-shadow:0 0 22px rgba(184, 255, 60,.18)}}
@keyframes nd-breathe{0%,100%{opacity:1}50%{opacity:.72}}
@keyframes nd-flicker{0%,38%,100%{opacity:1}38.6%{opacity:.5}39.2%{opacity:1}71%{opacity:1}71.4%{opacity:.75}72%{opacity:1}}
@keyframes nd-ping{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes nd-mote{0%{transform:translate(0,0);opacity:0}12%{opacity:var(--o)}88%{opacity:var(--o)}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes nd-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

.nd-nav>*{animation:nd-fade .9s ease-out both}
.nd-nav>:nth-child(1){animation-delay:.05s}.nd-nav>:nth-child(2){animation-delay:.15s}.nd-nav>:nth-child(3){animation-delay:.25s}
.nd-hero-copy>*{animation:nd-rise 1s cubic-bezier(.16,1,.3,1) both}
.nd-hero-copy>.nd-eyebrow{animation-delay:.15s}
.nd-hero-copy>.nd-h1{animation:none}
.nd-hero-copy>.nd-lead{animation-delay:.6s}
.nd-hero-copy>.nd-actions{animation-delay:.75s}
.nd-hero-copy>.nd-coin{animation-delay:.9s}
.nd-h1 .w{display:inline-block;animation:nd-rise .9s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(.25s + var(--i,0)*75ms)}
.nd-h1 em{animation:nd-lightup 1.8s ease-out .95s both}
.nd-hero-lamp .nd-lamp-svg{animation:nd-rise 1.2s cubic-bezier(.16,1,.3,1) .35s both,nd-bob 6.5s ease-in-out 1.6s infinite}
.nd-lit{animation:nd-on 1.8s ease-out .95s both}
.nd-lit-glow{animation:nd-on 1.8s ease-out .95s both,nd-breathe 5.5s ease-in-out 2.8s infinite}
.nd-lit-led{animation:nd-on 1.8s ease-out .95s both,nd-flicker 11s steps(1,end) 4s infinite}
.nd-light{animation:nd-on 1.8s ease-out .95s both}
.nd-facts>div{animation:nd-rise 1s cubic-bezier(.16,1,.3,1) both}
.nd-facts>div:nth-child(1){animation-delay:1.15s}.nd-facts>div:nth-child(2){animation-delay:1.25s}.nd-facts>div:nth-child(3){animation-delay:1.35s}.nd-facts>div:nth-child(4){animation-delay:1.45s}


.nd-btn span{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nd-btn:hover span{transform:translateX(5px)}
.nd-btn{position:relative;overflow:hidden}
.nd-btn-solid{box-shadow:0 0 0 0 rgba(184, 255, 60,0);transition:background .15s,box-shadow .35s}
.nd-btn-lg.nd-btn-solid::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-130%);animation:nd-sheen 5.5s ease-in-out 3.6s infinite;pointer-events:none}
.nd-btn-solid:hover{box-shadow:0 0 0 1px rgba(184, 255, 60,.35),0 10px 34px rgba(184, 255, 60,.28)}
.nd-btn-lg.nd-btn-solid span{animation:nd-arrow 2.4s ease-in-out 3s infinite}
.nd-links a{position:relative}
.nd-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--nd-green);transition:right .3s cubic-bezier(.16,1,.3,1)}
.nd-links a:hover::after{right:0}

@media (prefers-reduced-motion:reduce){
  .nd-nav>*,.nd-hero-copy>*,.nd-h1 .w,.nd-h1 em,.nd-hero-lamp svg,.nd-lit,.nd-lit-glow,.nd-lit-led,.nd-light,.nd-facts>div,.nd-motes,.nd-motes i,.nd-dot::after,.nd-btn-lg.nd-btn-solid span{animation:none!important}
  .nd-h1 em{color:var(--nd-green)}
}

/* ---------- motion, second pass: the room, the beam, the dial ---------- */
@keyframes nd-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes nd-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes nd-sheen{0%{transform:translateX(-130%)}28%{transform:translateX(130%)}100%{transform:translateX(130%)}}
@keyframes nd-shine{0%{background-position:180% 0}100%{background-position:-80% 0}}
@keyframes nd-rays{from{background-position:0 0}to{background-position:220px 0}}
@keyframes nd-blink{0%,55%,100%{fill:rgba(255,255,255,.14)}12%,38%{fill:var(--nd-green)}}
@keyframes nd-draw{0%{stroke-dashoffset:100;opacity:1}55%{stroke-dashoffset:0;opacity:1}80%{opacity:0}81%{stroke-dashoffset:100;opacity:0}100%{opacity:0}}
@keyframes nd-flow{0%{transform:translateX(0);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translateX(27px);opacity:0}}
@keyframes nd-coin{0%,70%,100%{stroke:rgba(255,255,255,.3);r:3.6}84%{stroke:var(--nd-green);r:4.4}}
@keyframes nd-tick{to{transform:rotate(360deg)}}

.nd-lamp-3d{position:relative;transform-style:preserve-3d;will-change:transform}
.nd-hero-lamp{perspective:900px}
.nd-beam{position:absolute;left:47%;top:35%;width:62%;height:140%;transform-origin:0 0;transform:rotate(-36deg);clip-path:polygon(0 0,100% 100%,-100% 100%);background:linear-gradient(180deg,rgba(184, 255, 60,.20),rgba(184, 255, 60,.07) 40%,rgba(184, 255, 60,0) 88%);mix-blend-mode:screen;pointer-events:none;animation:nd-on 1.8s ease-out .95s both,nd-breathe 5.5s ease-in-out 2.8s infinite}
.nd-beam::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 34px,rgba(255,255,255,.045) 52px,rgba(255,255,255,0) 74px);animation:nd-rays 9s linear infinite;mix-blend-mode:screen}

.nd-h1 em.is-lit{animation:none;color:transparent;background:linear-gradient(105deg,var(--nd-green) 0 42%,#eaffc7 50%,var(--nd-green) 58% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 16px rgba(184, 255, 60,.22));animation:nd-shine 7s ease-in-out infinite,nd-flicker 11s steps(1,end) infinite}

.nd-clock{margin-left:10px;color:rgba(255,255,255,.34);font-variant-numeric:tabular-nums}
.nd-fv{margin-left:auto;display:block;width:40px;height:20px;flex:none;overflow:visible}
.nd-fv.is-dial{width:20px}
.nd-fv .v{fill:rgba(255,255,255,.14);animation:nd-blink 3.2s ease-in-out infinite}
.nd-fv .v2{animation-delay:.45s}.nd-fv .v3{animation-delay:.9s}
.nd-fv .hb{fill:none;stroke:var(--nd-green);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:nd-draw 3.4s linear infinite}
.nd-fv .fl{fill:var(--nd-green);animation:nd-flow 2.6s linear infinite}
.nd-fv .fl2{animation-delay:.85s}.nd-fv .fl3{animation-delay:1.7s}
.nd-fv .cn{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.2;animation:nd-coin 2.6s linear infinite}
.nd-fv .ring{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.2}
.nd-fv .arc{fill:none;stroke:rgba(184, 255, 60,.5);stroke-width:2.2;transform-origin:10px 10px}
.nd-fv .arc.on{stroke:var(--nd-green)}
.nd-fv .hand{stroke:#fff;stroke-width:1.4;stroke-linecap:round;transform-origin:10px 10px}
.nd-fv .pin{fill:#fff}

@media (max-width:900px){.nd-beam{display:none}}
@media (prefers-reduced-motion:reduce){
  .nd-canvas,.nd-beam,.nd-beam::after,.nd-h1 em.is-lit,.nd-fv *,.nd-btn-lg.nd-btn-solid::before,.nd-facts::before,.nd-hero-lamp .nd-lamp-svg{animation:none!important}
  .nd-h1 em.is-lit{color:var(--nd-green);background:none;filter:none}
}

/* deck: the four tiles that carried the agent portraits now carry what the agent trades */
.fx-dk-agent .fx-dk-in{background:linear-gradient(160deg,#161616,#090909);display:flex;align-items:center;justify-content:center}
.fx-dk-stock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;position:relative}
.fx-dk-agent .fx-dk-stock img{width:52px;height:52px;border-radius:50%;image-rendering:auto;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 10px 24px rgba(0,0,0,.5)}
.fx-dk-stock b{font:700 12px/1 var(--nd-mono);letter-spacing:.16em;color:#fff}
.fx-dk-stock i{position:absolute;top:10px;right:12px;font:500 9px/1 var(--nd-mono);letter-spacing:.14em;color:var(--nd-green);font-style:normal}
.fx-dk-stock i::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--nd-green);margin:0 5px 1px 0;box-shadow:0 0 6px var(--nd-green)}