/* Landing page — hero and section styles, extracted from the old inline <style> block of the previous landing layout. Everything that only served the removed video
   background and image slider was left behind. */

/* References marquee */
.references-marquee-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.references-marquee-track {
    display: flex;
    width: max-content;
}

/* ---------------------------------------------------------------- HERO
   LCP element is the H1, CLS 0, and the hero itself needs no JS.
   Visually it borrows the page's own system: .section/.container shell,
   centred text, dark-blue type, square light-blue CTA. */

/* On the landing page header.htm's inline script switches #nav-header to
   fixed + transparent so it floats over the dark video. The hero is light,
   and the logo is a white SVG, so that would make the header invisible.
   !important in a stylesheet beats the script's inline declarations. */
body.land #nav-header {
    position: sticky !important;
    background-color: var(--njorka-dark-blue) !important;
}

.njh {
    /* Containing block for the two background layers, plus the clip that
       keeps them off the page's scroll width. Deliberately NOT a stacking
       context (no isolation, no z-index): that would trap the header's
       dropdowns and the language menu underneath the hero. */
    position: relative;
    overflow: hidden;
    text-align: left;
    min-height: calc(100vh - 80px);
    min-height: calc(100svh - 80px);
    display: flex;
    align-items: center;
}

/* Scroll hint: the site's own .mousey/.scroller, recoloured for a light
   hero and centred on the bottom edge. */
.njh-scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 1;
    display: flex;
    transform: translateX(-50%);
    text-decoration: none;
}

.njh-scroll__mouse {
    /* Own element rather than the video block's .mousey: that one is a heavy
       2px white outline sized for a dark hero. */
    display: flex;
    justify-content: center;
    width: 21px;
    height: 33px;
    padding-top: 6px;
    border: 1.5px solid rgba(var(--njorka-dark-blue-rgb), 0.26);
    border-radius: 11px;
    transition: border-color var(--duration-normal) var(--ease-standard);
}

.njh-scroll__wheel {
    width: 2.5px;
    height: 6px;
    border-radius: 2px;
    background: rgba(var(--njorka-dark-blue-rgb), 0.45);
    animation: njh-wheel 1.9s ease-in-out infinite;
}

/* The wheel travels down the body of the mouse and fades out. */
@keyframes njh-wheel {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    70% {
        transform: translateY(12px);
        opacity: 0.2;
    }
    100% {
        transform: translateY(12px);
        opacity: 0;
    }
}

.njh-scroll:hover .njh-scroll__mouse,
.njh-scroll:focus-visible .njh-scroll__mouse {
    border-color: rgba(var(--njorka-dark-blue-rgb), 0.5);
}

.njh-scroll:focus-visible {
    outline: 3px solid var(--njorka-light-blue);
    outline-offset: 4px;
}

/* No room for it on phones once the facts row is in the hero — and style.css
   hides the site's own scroll cue on small screens for the same reason. */
@media (max-width: 767px) {
    .njh-scroll {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .njh-scroll__wheel {
        animation: none;
        opacity: 0.45;
    }
}

/* Background, two flat layers, both decorative and both kept away from the
   text: a dot field over the right and lower area, and one soft wash behind
   the module cloud. Nothing sits behind the H1 or the lead, so text
   contrast is untouched (spec 3). */
/* z-index 0, not -1: a negative layer would need a stacking context on the
   hero to stay visible, and that context is what breaks the header. The
   container below is lifted above them instead. */
.njh::before,
.njh::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.njh::before {
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(var(--njorka-dark-blue-rgb), 0.13) 1px,
        transparent 1.2px
    );
    background-size: 22px 22px;
    /* Fades out towards the text column and the top edge. */
    -webkit-mask-image:
        linear-gradient(100deg, transparent 42%, #000 80%),
        linear-gradient(to bottom, transparent 6%, #000 42%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(100deg, transparent 42%, #000 80%),
        linear-gradient(to bottom, transparent 6%, #000 42%);
    mask-composite: intersect;
}

.njh::after {
    top: -12%;
    right: -8%;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(var(--njorka-light-blue-rgb), 0.16),
        rgba(var(--njorka-light-blue-rgb), 0) 68%
    );
}

.njh .container {
    /* Above the background layers — ::after is the last child and would
       otherwise paint over the content. */
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.njh__h1 {
    /* !important: style.css sets a global `h1 { font-size: … !important }`
       at both breakpoints, which would otherwise win over this class. */
    font-size: 28px !important;
    line-height: 1.2;
    font-weight: 600;
    color: var(--njorka-dark-blue);
    margin: 0 0 var(--space-16);
    max-width: 24ch;
}

.njh__sub {
    font-size: 17px;
    line-height: 1.5;
    color: var(--njorka-dark-blue);
    margin: 0 0 var(--space-24);
    max-width: 50ch;
}

.njh__moduli {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-24);
}

.njh__par {
    display: inline-flex;
    gap: 8px;
}

.njh-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    /* 11px, per spec 4: keeps `+ 10 modulov` on the same row as Dokumenti
       at narrow widths instead of dropping it onto a row of its own. */
    padding: 0 11px;
    border: 1px solid rgba(var(--njorka-dark-blue-rgb), 0.25);
    background: transparent;
    color: var(--njorka-dark-blue);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.njh-chip:hover,
.njh-chip:focus {
    background: var(--njorka-dark-blue);
    border-color: var(--njorka-dark-blue);
    color: var(--njorka-white);
    text-decoration: none;
}

.njh-chip--vec {
    border-color: transparent;
    color: #46586c;
    font-weight: 400;
}

.njh-chip--vec:hover,
.njh-chip--vec:focus {
    background: transparent;
    border-color: rgba(var(--njorka-dark-blue-rgb), 0.25);
    color: var(--njorka-dark-blue);
}

/* Facts row under the CTA. Sits inside .njh__text, so it is exactly as wide
   as the copy above it; the numbers are scaled down from the 48px of the old
   standalone section. */
.njh-facts {
    /* .njh__text aligns its children to flex-start, so without this the row
       would shrink to its content and the divider would stop short of the
       copy above it. */
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16) var(--space-24);
    margin-top: var(--space-24);
    padding-top: var(--space-16);
    /* Same measure as the lead paragraph, so the row tracks the copy rather
       than the full width of the column. */
    max-width: 50ch;
    border-top: 1px solid var(--njorka-light-gray);
}

/* The mobile hero has to stay inside one screen, so the row gets tighter. */
@media (max-width: 767px) {
    .njh-facts {
        gap: var(--space-8) var(--space-16);
        margin-top: var(--space-12);
        padding-top: var(--space-12);
    }

    .njh-facts .trust-number {
        font-size: 18px;
    }

    .njh-facts .trust-text {
        font-size: 11px;
    }

    .njh-facts .opal-logo {
        height: 18px;
    }
}

.njh-facts__item {
    text-align: left;
}

.njh-facts .trust-number {
    margin-bottom: 2px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--njorka-light-blue);
}

.njh-facts .trust-text {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: #46586c;
}

.njh-facts .opal-logo {
    height: 22px;
    width: auto;
    display: block;
}

/* Last row in the hero now that the trust line is gone: no bottom margin,
   so the block stays optically centred. */
.njh__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12) var(--space-16);
}

/* Same shape as .btn-primary elsewhere on the page: square, light blue,
   14px/32px, 600. Spelled out rather than reusing the class so the hero
   does not depend on rules that other sections may change. */
.njh-btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 14px 32px;
    background: var(--njorka-light-blue);
    color: var(--njorka-white);
    border: 1px solid transparent;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.njh-btn:hover,
.njh-btn:focus {
    background: var(--njorka-white);
    border-color: var(--njorka-light-blue);
    color: var(--njorka-light-blue);
    text-decoration: none;
}

.njh__opomba {
    font-size: 14px;
    line-height: 1.4;
    color: #46586c; /* 7.3:1 on white */
}

/* Visible keyboard focus, not the removed default. */
.njh-chip:focus-visible,
.njh-btn:focus-visible {
    outline: 3px solid var(--njorka-light-blue);
    outline-offset: 2px;
}

/* 320 px viewports: shave the vertical rhythm so the trust row still fits
   inside 667 px without scrolling (spec 4). */
@media (max-width: 360px) {
    .njh.section {
        padding-top: var(--space-12) !important;
        padding-bottom: var(--space-12) !important;
    }
    .njh__h1 {
        font-size: 24px !important;
        margin-bottom: var(--space-8);
    }
    .njh__sub {
        font-size: 15px;
        line-height: 1.45;
        margin-bottom: var(--space-12);
    }
    .njh__moduli {
        margin-bottom: var(--space-12);
    }

    .njh-facts {
        gap: var(--space-8) var(--space-12);
        margin-top: var(--space-8);
        padding-top: var(--space-8);
    }
}

/* The header is 90px from 768px up, 80px below it. */
@media (min-width: 768px) {
    .njh {
        min-height: calc(100vh - 90px);
        min-height: calc(100svh - 90px);
    }

}

/* ------------------------------------------------------------ HERO ART
   A cloud of module links. Each pin is a real <a> with its icon and name
   in the HTML of the first response; the hover/focus card is extra, not
   the only place the name lives. Pure CSS — no JS in the hero.
   Only appears where there is room beside the text (query further down),
   so it is dropped rather than stacked and the hero still fits one
   screen without scrolling. */
.njh__art {
    display: none;
}

.njh-cloud {
    position: relative;
    width: 100%;
    /* Reserves the box before paint, so no layout shift. Square on purpose:
       the node coordinates are percentages, so a non-square box would
       stretch the constellation into an ellipse and the rotation would
       visibly wobble. */
    aspect-ratio: 1;
}

/* The lines and the triangles orbit together, around the ERP disc's centre,
   so every connection stays exactly where it was drawn. */
.njh-orbit {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    will-change: rotate, scale;
    animation:
        /* Delayed to the handover point (see the script at the end of the
           page): while the lines are still being drawn the geometry must
           stay exactly as the server rendered it, or the first scripted
           frame snaps everything into a new position. */
        njh-orbit 120s linear 2.6s infinite,
        /* Out from the ERP and back in. Scaling the whole group — lines
           included — is what keeps every connection exact; moving the
           triangles on their own pulled them off their lines. */
        njh-orbit-breathe 11s ease-in-out 2.6s infinite alternate;
}

.njh-cloud__wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.njh-cloud__wires line {
    stroke: rgba(var(--njorka-dark-blue-rgb), 0.2);
    /* User units, not screen pixels: the viewBox scale is uniform, and a
       screen-pixel stroke would measure the dash in a different unit than
       --len. Lands at roughly 1px at the sizes this renders at. */
    stroke-width: 0.18;
    /* Each line's dash IS its own length, so the finished state is a solid
       line and the reveal is a real draw-on. A fixed dash cut the two
       longest spokes short. */
    stroke-dasharray: var(--len, 100);
    stroke-dashoffset: 0;
    /* Each line grows out of the module that is already lit, and its
       --wd is set so the next module lights up as the line arrives. */
    animation: njh-wire-draw 0.3s linear var(--wd, 0s) backwards;
}

/* Once the script starts re-pointing the wires their length changes every
   frame, so the draw-on dash has to go. */
.njh-cloud--live .njh-wire {
    stroke-dasharray: none;
    animation: none;
}

/* Module-to-module links sit behind the ERP spokes visually. */
.njh-wire--mesh {
    stroke: rgba(var(--njorka-dark-blue-rgb), 0.11);
}

/* The ERP hub: a small solid disc, not a big pale plate. Every line grows
   out of it, so it lands before them. */
.njh-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Width lives on the hub, not the disc: a percentage on the disc would
       resolve against this shrink-to-fit box instead of the cloud. */
    width: 14%;
    min-width: 58px;
    transform: translate(-50%, -50%);
    animation: njh-hub-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

.njh-hub__disc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 82px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--njorka-dark-blue);
    box-shadow: 0 0 0 7px rgba(var(--njorka-dark-blue-rgb), 0.07);
    color: var(--njorka-white);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Same expanding-ring idea as the in-stock dot on the product page, just
   far slower: the ERP is idling, not signalling. Own element so the static
   ring on the disc stays put. */
.njh-hub__disc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: njh-hub-pulse 4.5s ease-out 1s infinite;
}

/* Absolute, so the caption does not push the disc off centre: the wires are
   aimed at the exact centre of the cloud and the disc has to be there. */
.njh-hub__note {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    line-height: 1.2;
    color: #46586c;
    white-space: nowrap;
}

.njh-pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 92px;
    /* Line up the TRIANGLE's centre with the node coordinate — not the
       centre of the triangle+label box, or every line would stop short. */
    margin: calc(-27px * var(--size, 1)) 0 0 -46px;
    text-decoration: none;
    /* Two animations, two properties: the entrance scales and fades
       (scale/opacity), the float moves (translate). They compose instead
       of overwriting each other. backwards fill keeps a pin invisible
       during its delay, so nothing flashes before its turn. */
    /* Promoted to its own layer: without this the browser re-rasterises the
       label and icon on every frame of the orbit, which is what made it
       stutter. */
    will-change: transform, rotate, translate;
    animation:
        /* Each triangle wanders on its own timing, so the constellation never
           holds one fixed shape. The wires are re-pointed every frame by the
           script at the end of the page, so this cannot pull them loose. */
        njh-pin-drift var(--ft, 10s) ease-in-out calc(2.6s + var(--fd, 0s)) infinite alternate,
        njh-pin-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(0.05s + var(--i, 0) * 0.05s) backwards,
        /* Exactly cancels the orbit's rotation — same duration, same easing —
           so text and icons never tilt while the triangle travels. Uses the
           `rotate` property, so it composes with the float's `translate`. */
        /* Same 2.6s delay as the orbit it cancels — without it the labels
           tilt during the reveal, while the orbit is still parked. */
        njh-pin-counter 120s linear 2.6s infinite;
}

.njh-pin__tri {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: calc(62px * var(--size, 1) * var(--tri-scale, 1));
    height: calc(54px * var(--size, 1) * var(--tri-scale, 1));
    padding-bottom: calc(8px * var(--size, 1) * var(--tri-scale, 1));
    background: var(--c);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transform: rotate(var(--rot, 0deg));
    /* Lands grey, takes its colour the moment the incoming line connects. */
    animation: njh-pin-colour 0.4s ease-out var(--ld, 0s) backwards;
}

.njh-pin__tri svg {
    width: calc(21px * var(--size, 1) * var(--tri-scale, 1));
    height: calc(21px * var(--size, 1) * var(--tri-scale, 1));
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Keep the icon upright inside a tilted triangle. */
    transform: rotate(calc(var(--rot, 0deg) * -1));
}

.njh-pin__name {
    animation: njh-pin-name 0.4s ease-out var(--ld, 0s) backwards;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--njorka-dark-blue);
    text-align: center;
}

/* Preview card. Hidden from view and from the accessibility tree until the
   pin is hovered or focused, so the link's own name is what gets read. */
.njh-pin__card {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    width: 208px;
    padding: 10px 12px;
    background: var(--njorka-white);
    border: 1px solid var(--njorka-light-gray);
    box-shadow: 0 8px 24px rgba(var(--njorka-dark-blue-rgb), 0.14);
    transform: translate(-50%, 6px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--duration-normal) var(--ease-standard),
        transform var(--duration-normal) var(--ease-standard),
        visibility var(--duration-normal);
}

.njh-pin__card-title,
.njh-pin__card-text {
    display: block;
}

.njh-pin__card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--njorka-dark-blue);
    margin-bottom: 2px;
}

.njh-pin__card-text {
    font-size: 13px;
    line-height: 1.4;
    color: #46586c;
}

/* Hovering holds the carousel still: orbit and counter-rotation must pause
   together, or the triangles would spin in place. */
.njh-cloud:has(.njh-pin:hover) .njh-orbit,
.njh-cloud:has(.njh-pin:focus) .njh-orbit,
.njh-cloud:has(.njh-pin:hover) .njh-pin,
.njh-cloud:has(.njh-pin:focus) .njh-pin {
    animation-play-state: paused;
}

.njh-pin:hover,
.njh-pin:focus,
.njh-pin:focus-visible {
    /* Stand still while it is being read. */
    animation-play-state: paused;
    z-index: 2;
    text-decoration: none;
}

/* :focus as well as :focus-visible — the card is the point of the pin,
   and Safari only grew :focus-visible support for links late. */
.njh-pin:hover .njh-pin__card,
.njh-pin:focus .njh-pin__card,
.njh-pin:focus-visible .njh-pin__card {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.njh-pin:focus-visible {
    outline: 3px solid var(--njorka-light-blue);
    outline-offset: 4px;
}

/* Card placement follows the pin's place on the ring — the modules come
   from a repeater now, so their names are not known here. */
.njh-pin--left .njh-pin__card {
    left: 0;
    transform: translate(-14px, 6px);
}

.njh-pin--left:hover .njh-pin__card,
.njh-pin--left:focus .njh-pin__card {
    transform: translate(-14px, 0);
}

.njh-pin--right .njh-pin__card {
    left: auto;
    right: 0;
    transform: translate(14px, 6px);
}

.njh-pin--right:hover .njh-pin__card,
.njh-pin--right:focus .njh-pin__card {
    transform: translate(14px, 0);
}

/* Pins on the top half open their card downwards. */
.njh-pin--top .njh-pin__card {
    bottom: auto;
    top: calc(100% + 6px);
}

@keyframes njh-orbit {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

/* Starts at zero, not mid-swing: the first frame has to match the geometry
   the server rendered. */
@keyframes njh-pin-drift {
    from { translate: none; }
    to { translate: var(--fx, 0px) var(--fy, 0px); }
}

@keyframes njh-orbit-breathe {
    from { scale: 1; }
    to { scale: 1.05; }
}

@keyframes njh-pin-counter {
    from { rotate: 0deg; }
    to { rotate: -360deg; }
}

    @keyframes njh-pin-in {
    from {
        opacity: 0;
        scale: 0.55;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes njh-wire-draw {
    from { stroke-dashoffset: var(--len, 100); }
    to { stroke-dashoffset: 0; }
}

@keyframes njh-pin-colour {
    from { background-color: #b9bfc7; }
    to { background-color: var(--c); }
}

@keyframes njh-pin-name {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .njh-orbit,
    .njh-pin,
    .njh-hub__disc::after,
    .njh-hub,
    .njh-pin,
    .njh-pin__tri,
    .njh-pin__name,
    .njh-cloud__wires line {
        animation: none;
    }
}

/* Narrow two-column widths leave the cloud around 430px across, where the
   full-size pins start bumping into each other. */
@media (max-width: 1199px) {
    .njh-pin {
        --tri-scale: 0.85;
        width: 78px;
        margin-left: -39px;
    }

    .njh-pin__name {
        font-size: 11.5px;
    }
}

/* Two columns — text left, illustration right — only on screens wide and
   tall enough to hold both inside one viewport. */
@media (min-width: 1000px) and (min-height: 760px) {
    .njh .container {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-32);
    }

    .njh__text {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .njh__art {
        display: block;
    }
}

@media (min-width: 1200px) and (min-height: 760px) {
    .njh .container {
        gap: var(--space-64);
    }
}

@media (min-width: 769px) {
    .njh__h1 {
        font-size: 36px !important;
        margin-bottom: var(--space-24);
    }
    .njh__sub {
        font-size: 20px;
        margin-bottom: var(--space-32);
    }
    .njh__moduli {
        flex-wrap: nowrap;
        margin-bottom: var(--space-32);
    }
    .njh-btn {
        font-size: 19px;
        padding: 16px 40px;
    }
}