/* home.css — the tools index. Chrome tokens come from tools.css. */

.nx-hero-home { padding: 62px 0 56px; }
.nx-hero-home h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }

.nx-toolarea { padding: 40px 22px 52px; }

.tool-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.tool-card {
    --ac: var(--star);
    position: relative; display: flex; flex-direction: column; gap: 7px;
    padding: 22px 20px 18px; min-height: 210px; text-decoration: none; color: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)), var(--hull);
    border: 1px solid var(--line-dk); border-radius: 3px;
    transition: transform .22s ease, border-color .3s ease, box-shadow .35s ease;
}
.tool-card::before {
    content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--ac), transparent);
    opacity: .45; transition: opacity .3s ease;
}
.tool-card:hover {
    transform: translateY(-4px); border-color: var(--ac);
    box-shadow: 0 14px 40px -18px var(--ac), 0 0 0 1px rgba(124,196,255,.05);
}
.tool-card:hover::before { opacity: 1; }
.tool-card:focus-visible { outline: 2px solid var(--star); outline-offset: 3px; }

.tc-num {
    position: absolute; top: 18px; right: 18px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px; letter-spacing: .18em; color: var(--steel-dim);
}
.tc-icon { color: var(--ac); font-size: 1.35rem; margin-bottom: 2px; }
.tc-name { font-size: 1.1rem; color: var(--chrome); letter-spacing: .01em; }
.tc-desc { font-size: .88rem; line-height: 1.55; color: var(--steel); flex: 1; }
.tc-go {
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ac); margin-top: 10px;
}
.tc-go .arrow { display: inline-block; transition: transform .25s ease; }
.tool-card:hover .arrow { transform: translateX(4px); }

/* the index is all dark — keep the page background matching the chrome */
body { background: var(--void); }

@media (prefers-reduced-motion: reduce) { .tool-card:hover { transform: none; } }

/* ======================= landing page (index) ======================= */
.lp-aurora {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(124,196,255,.14), transparent 46%),
        radial-gradient(90% 60% at 50% 118%, rgba(90,120,180,.09), transparent 55%);
}
.reticle {
    position: fixed; z-index: 3; width: 42px; height: 42px; pointer-events: none;
    border: 1px solid rgba(124,196,255,.14); opacity: .8;
}
.reticle.tl { top: 18px; left: 18px;  border-right: 0; border-bottom: 0; }
.reticle.tr { top: 18px; right: 18px; border-left: 0;  border-bottom: 0; }
@media (max-width: 900px) { .reticle { display: none; } }

.lp-hero { background: var(--void); color: var(--chrome); padding: 84px 0 72px; text-align: center; }
.lp-hero h1 {
    margin: 0 0 18px; font-weight: 400; letter-spacing: .01em; line-height: 1.18;
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
}
.lp-em { color: var(--star); }
.lp-lede { color: var(--steel); max-width: 60ch; margin: 0 auto; font-size: 1.02rem; line-height: 1.65; }
.lp-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 30px 0 26px; }
.lp-ghost {
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    color: var(--chrome); border: 1px solid var(--line-dk); background: var(--hull);
    padding: 12px 22px; border-radius: 2px; letter-spacing: .04em; font-weight: 600;
}
.lp-ghost:hover { border-color: var(--star); color: var(--star); }
.lp-telemetry {
    display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-dim);
}
.lp-telemetry span { display: inline-flex; align-items: center; gap: 8px; }
.lp-telemetry .tick {
    width: 5px; height: 5px; border-radius: 50%; background: var(--star);
    box-shadow: 0 0 7px var(--star); display: inline-block;
}

.lp-band { background: var(--void-2); border-top: 1px solid var(--line-dk); border-bottom: 1px solid var(--line-dk); padding: 52px 0; }
.lp-cols { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lp-h2 { margin: 0 0 14px; font-weight: 500; font-size: 1.25rem; color: var(--chrome); }
.lp-band p { color: var(--steel); margin: 0 0 12px; line-height: 1.65; }
.lp-list { margin: 0; padding-left: 18px; color: var(--steel); line-height: 1.85; }
.lp-list b { color: var(--chrome); font-weight: 600; }

.lp-sectionhead { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.lp-more {
    margin-left: auto; text-decoration: none; color: var(--star);
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.lp-more:hover { text-decoration: underline; }

/* =========================================================================
   ARRIVAL — the full-viewport station approach (index only)
   =========================================================================
   Replaces the old marketing hero + text bands. The brief was that the page
   did not FEEL like a station, so the whole first screen is now the arrival:
   crest, wordmark, designation plate, status readout, scroll cue. No prose
   above the fold beyond a single line.

   Deliberately parallel to the mothership's arrival (nexavorix.cloud) so they
   read as one network, but the designation plate and the operational readout
   are what make this an outpost rather than a bridge.
   ========================================================================= */

.stn-body { background: var(--void); }

.arrival {
    position: relative; z-index: 1;
    min-height: calc(100vh - 30px);          /* less the station strip */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 40px 22px 96px;
}

.arr-eyebrow {
    font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
    color: var(--steel-dim); margin: 0 0 26px;
}

.arr-emblem { margin-bottom: 22px; }
.arr-crest {
    width: clamp(84px, 11vw, 132px); height: auto; display: block;
    filter: drop-shadow(0 0 34px rgba(157,140,255,.28));
    animation: arrfloat 7s ease-in-out infinite;
}
@keyframes arrfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.arr-plate { margin-bottom: 20px; }
.arr-wordmark {
    margin: 0; font-weight: 300; color: var(--chrome);
    font-size: clamp(2.4rem, 7.5vw, 5rem); line-height: 1;
    letter-spacing: .16em; text-indent: .16em;      /* offset the trailing track */
}
.arr-sub {
    margin-top: 10px; font-size: clamp(.8rem, 1.5vw, 1rem);
    letter-spacing: .58em; text-indent: .58em; text-transform: uppercase;
    color: var(--star);
}

.arr-designation {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--steel-dim); margin-bottom: 30px; width: 100%; max-width: 560px;
}
.arr-rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(157,140,255,.35), transparent); }

.arr-thesis {
    margin: 0 0 32px; color: var(--chrome); font-weight: 300;
    font-size: clamp(1.05rem, 2.3vw, 1.5rem); line-height: 1.5; letter-spacing: .01em;
}

.arr-actions { margin-bottom: 34px; }

.arr-readout {
    display: flex; gap: 26px; flex-wrap: wrap; justify-content: center;
    font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel-dim);
}
.arr-readout span { display: inline-flex; align-items: center; gap: 8px; }
.arr-readout .tick, .tc-go .tick {
    width: 5px; height: 5px; border-radius: 50%; background: var(--star);
    box-shadow: 0 0 7px var(--star); display: inline-block; flex: none;
}
.tc-go .tick { animation: stnpulse 3.2s ease-in-out infinite; }

.arr-scrollcue {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
    text-decoration: none; color: var(--steel-dim);
    font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
}
.arr-scrollcue:hover { color: var(--star); }
.arr-scrollcue .chev { animation: arrbob 2.4s ease-in-out infinite; }
@keyframes arrbob { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }

/* staggered entrance — the arrival should assemble, not just appear */
.rise { opacity: 0; transform: translateY(14px); animation: riseIn .85s cubic-bezier(.2,.7,.3,1) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .18s; } .d3 { animation-delay: .32s; }
.d4 { animation-delay: .46s; } .d5 { animation-delay: .60s; } .d6 { animation-delay: .74s; }
.d7 { animation-delay: .88s; }
@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .rise { opacity: 1; transform: none; animation: none; }
    .arr-crest, .arr-scrollcue .chev, .tc-go .tick { animation: none; }
}

/* ---- sections below the fold ------------------------------------------- */
.stn-section { position: relative; z-index: 1; padding: 70px 0 64px; background: rgba(6,8,15,.72); border-top: 1px solid var(--line-dk); }
.stn-sechead { margin-bottom: 26px; }
.stn-seclabel {
    display: inline-block; font-size: 9.5px; letter-spacing: .3em;
    text-transform: uppercase; color: var(--star); margin-bottom: 10px;
}
.stn-sectitle { margin: 0 0 10px; font-weight: 300; color: var(--chrome); font-size: clamp(1.4rem, 3vw, 2rem); }
.stn-secsub { margin: 0; color: var(--steel); max-width: 58ch; }
.nx-offer .stn-seclabel { margin-bottom: 12px; }

/* On the arrival the navbar floats over the hero instead of boxing it in —
   the point of a full-viewport arrival is that nothing frames it. It still
   scrolls away normally; only the plate is removed, not the navigation. */
.stn-body .nx-top { background: transparent; border-bottom: 0; }
.stn-body .arrival { min-height: calc(100vh - 96px); }

/* ==========================================================================
   COMMAND DECK — the arrival hero's focal object.
   The upper area read as unfinished space: a small crest floating in a lot of
   void. These rings give it something to be the centre OF. Sized in em off the
   emblem so they stay concentric with the crest at every breakpoint.
   ========================================================================== */
.arr-emblem { position: relative; display: grid; place-items: center; }

/* The rings are square elements made circular with border-radius. A rotating
   square reports a bounding box up to 1.41x its width, so the browser reserved
   horizontal scroll for geometry that is never visible — a phantom sideways
   scroll on phones that came and went with the rotation angle. Clip it here.
   overflow-x:clip (not hidden) so no scroll container is created and the
   sticky/fixed station chrome outside this block is unaffected. */
.arrival { overflow-x: clip; }

.arr-orbit {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(300px, 34vw, 520px); aspect-ratio: 1;
  pointer-events: none; z-index: -1;
}
.arr-orbit i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(157,140,255,.16);
}
/* Three rings, counter-rotating at different rates so the assembly never looks
   like one spinning object. */
.arr-orbit i:nth-child(1) { animation: arr-spin 46s linear infinite; }
.arr-orbit i:nth-child(2) {
  inset: 11%; border-color: rgba(157,140,255,.22);
  border-style: dashed; animation: arr-spin 34s linear infinite reverse;
}
.arr-orbit i:nth-child(3) {
  inset: 23%; border-color: rgba(120,200,255,.16);
  animation: arr-spin 68s linear infinite;
}
/* A marker riding the outer ring — the station's own satellite. */
.arr-orbit i:nth-child(1)::after {
  content: ""; position: absolute; top: -3px; left: 50%; translate: -50% 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: #cbbcff; box-shadow: 0 0 10px 3px rgba(157,140,255,.8);
}
/* Planet limb below, so the deck feels like it is above something. */
.arr-orbit::after {
  content: ""; position: absolute; left: 50%; top: 118%; translate: -50% 0;
  /* min() so the limb can never push the page wider than the viewport on phones;
     at desktop widths 190% is the smaller value, so the look there is unchanged. */
  width: min(190%, 94vw); aspect-ratio: 1; border-radius: 50%;
  border-top: 1px solid rgba(157,140,255,.22);
  background: radial-gradient(circle at 50% 0%, rgba(157,140,255,.10), transparent 42%);
}
@keyframes arr-spin { to { transform: rotate(360deg); } }

/* Aperture glow behind the crest itself. */
.arr-emblem::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(150px, 17vw, 250px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(157,140,255,.20), transparent 62%);
  filter: blur(18px); z-index: -1; pointer-events: none;
}



/* ==========================================================================
   CONTROL MODULES — the directory cards as removable units.
   ========================================================================== */
.tool-card { position: relative; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.tool-card:hover {
  border-color: rgba(157,140,255,.42);
  box-shadow: inset 0 0 26px rgba(157,140,255,.09), 0 16px 44px -22px rgba(157,140,255,.55);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .arr-orbit i, .arr-orbit i::after { animation: none !important; }
}

/* Longer station labels ("Engineering Bay", "Communications") need more room than
   the originals; tighten the nav on small screens so they still fit one viewport. */
@media (max-width: 720px) {
  /* the station header computes to 0 padding here, leaving the first and last
     nav items flush against the screen edges */
  .stn-body .nx-top-in { padding-left: 16px; padding-right: 16px; }
  .stn-body .nx-top nav { gap: 8px 12px; }
  .stn-body .nx-top nav a { font-size: 10px; letter-spacing: .06em; }
}

/* ==========================================================================
   AIRLOCK DIVIDERS — section joins read as pressure seams between compartments.
   ========================================================================== */
.airlock {
  position: relative; height: 46px; overflow-x: clip;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
}
/* The seam: a hairline running the full width, interrupted at the hatch. */
.airlock::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157,140,255,.26) 18%,
              rgba(157,140,255,.26) 82%, transparent);
}
/* Circuit trace: dashed run either side of the hatch with terminal nodes. */
.airlock::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(560px, 76vw); height: 1px;
  background: repeating-linear-gradient(90deg,
      rgba(120,200,255,.42) 0 5px, transparent 5px 12px);
  opacity: .55;
}
/* The hatch itself — a chamfered plate sitting over the seam. */
.airlock__hatch {
  position: relative; width: 46px; height: 22px;
  background: linear-gradient(180deg, rgba(24,26,40,.98), rgba(10,12,22,.98));
  border: 1px solid rgba(157,140,255,.34);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.airlock__hatch::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: #9d8cff; box-shadow: 0 0 8px 2px rgba(157,140,255,.7);
  animation: alk-idle 4.2s ease-in-out infinite;
}
@keyframes alk-idle { 0%,100% { opacity: .35 } 50% { opacity: 1 } }

/* Node terminals where the trace meets the hatch. */
.airlock__node {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(120,200,255,.75); box-shadow: 0 0 6px rgba(120,200,255,.6);
}
.airlock__node--l { left: calc(50% - min(280px, 38vw)); }
.airlock__node--r { left: calc(50% + min(280px, 38vw)); }

/* ==========================================================================
   HOVER DIAGNOSTICS — a module runs a short self-check when you point at it.
   ========================================================================== */
.tc-diag {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  pointer-events: none; opacity: 0; overflow: hidden;
}
.tool-card:hover .tc-diag, .tool-card:focus-visible .tc-diag { opacity: 1; }
/* the sweep line */
.tc-diag::before {
  content: ""; position: absolute; left: 0; right: 0; height: 34%;
  background: linear-gradient(180deg, transparent,
              rgba(157,140,255,.16) 45%, rgba(157,140,255,.30) 50%,
              rgba(157,140,255,.16) 55%, transparent);
  transform: translateY(-120%);
}
.tool-card:hover .tc-diag::before, .tool-card:focus-visible .tc-diag::before {
  animation: tc-sweep 1.15s cubic-bezier(.4,0,.3,1) 1 forwards;
}
@keyframes tc-sweep { from { transform: translateY(-120%) } to { transform: translateY(320%) } }
/* registration brackets that snap in on hover */
.tc-diag::after {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid transparent;
  border-image: none;
  background:
    linear-gradient(#78c8ff,#78c8ff) left  top    / 11px 1px no-repeat,
    linear-gradient(#78c8ff,#78c8ff) left  top    / 1px 11px no-repeat,
    linear-gradient(#78c8ff,#78c8ff) right bottom / 11px 1px no-repeat,
    linear-gradient(#78c8ff,#78c8ff) right bottom / 1px 11px no-repeat;
  opacity: .0; transition: opacity .25s ease .1s;
}
.tool-card:hover .tc-diag::after, .tool-card:focus-visible .tc-diag::after { opacity: .8; }

/* ==========================================================================
   HOLOGRAPHIC CENTREPIECE — a projection in the Engineering Bay.
   Square rings rotate, so the shell clips horizontally (see Phase 1 note).
   ========================================================================== */
.nx-offer { position: relative; }
.nx-offer .wrap { position: relative; z-index: 1; }
.holo {
  position: absolute; right: 4%; top: 50%; translate: 0 -50%;
  width: 260px; height: 260px; overflow-x: clip;
  pointer-events: none; z-index: 0; opacity: 1;
}
.holo i {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  border-radius: 50%; border: 1px solid rgba(120,200,255,.42);
}
.holo i:nth-child(1) { width: 200px; height: 200px; animation: holo-spin 26s linear infinite; }
.holo i:nth-child(2) { width: 200px; height: 78px;  border-color: rgba(157,140,255,.42);
                       animation: holo-spin 18s linear infinite reverse; }
.holo i:nth-child(3) { width: 92px;  height: 92px;  border-style: dashed;
                       border-color: rgba(120,200,255,.34);
                       animation: holo-spin 34s linear infinite; }
@keyframes holo-spin { to { transform: rotate(360deg); } }
/* projection core */
.holo::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(157,140,255,.85), rgba(157,140,255,.06) 68%, transparent);
  filter: blur(1px);
}
/* projection scanlines over the whole assembly */
.holo::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-linear-gradient(180deg,
      rgba(120,200,255,.09) 0 1px, transparent 1px 4px);
  mask-image: radial-gradient(circle, #000 58%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 72%);
}
/* The offer copy must not run under the projection on narrower desktops. */
/* Reserve room for the projection instead of narrowing the wrap: the wrap is
   centred, so a max-width shoves the copy into the middle of the section. */
@media (min-width: 981px) { .nx-offer .wrap { padding-right: 300px; } }
@media (max-width: 980px) { .holo { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .holo i, .airlock__hatch::before,
  .tool-card:hover .tc-diag::before, .tool-card:focus-visible .tc-diag::before {
    animation: none !important;
  }
  .tc-diag::before { display: none; }
}

/* ==========================================================================
   METALLIC PLATING — the modules read as machined panels rather than flat
   rectangles: a raking sheen, a fine brushed grain, and a bevel top and bottom.
   Layered over the existing --hull base so the palette is unchanged.
   ========================================================================== */
.tool-card {
  background:
    linear-gradient(115deg, transparent 28%, rgba(255,255,255,.05) 45%,
                    rgba(255,255,255,.014) 55%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--hull);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.42);
}
.tool-card:hover {
  box-shadow: 0 14px 40px -18px var(--ac), 0 0 0 1px rgba(124,196,255,.05),
              inset 0 0 26px rgba(157,140,255,.09),
              inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.46);
}