/* ==========================================================================
   designer2.org — HUD / terminal-stream layer
   Tokens, background layers and every page component.
   Rules of the direction: radius 0 everywhere, no shadows, at most two
   background colours, lime carries information and is never a large fill.
   ========================================================================== */

/* -------------------------------------------------------------- 1. tokens */

:root {
    /* surfaces */
    --d2-ground: #04060A;
    --d2-panel: rgba(9, 18, 13, .72);
    --d2-readout: rgba(4, 10, 7, .82);
    --d2-border: #12261a;
    --d2-rule: #0d1c14;
    --d2-readout-border: #14301f;
    --d2-border-hi: #1d4a2e;

    /* text */
    --d2-text: #DCE9E1;
    --d2-lead: #b9d3c3;
    --d2-body: #96b3a2;
    --d2-muted: #7f9b8b;
    --d2-label: #6d8a78;
    --d2-micro: #55705f;
    --d2-dim: #3d5b49;
    --d2-dimmer: #33513f;
    --d2-caption: #4c6a58;

    /* signal */
    --d2-lime: #9DF801;
    --d2-lime-hi: #C8FF63;
    --d2-on-lime: #04160b;
    --d2-lime-05: rgba(157, 248, 1, .05);
    --d2-lime-07: rgba(157, 248, 1, .07);
    --d2-lime-09: rgba(157, 248, 1, .09);
    --d2-lime-12: rgba(157, 248, 1, .12);
    --d2-lime-16: rgba(157, 248, 1, .16);
    --d2-error: #B4402F;

    /* type */
    --d2-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --d2-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* layout */
    --d2-max: 1320px;
    --d2-gutter: 20px;
}

/* --------------------------------------------------------------- 2. reset */

*,
*::before,
*::after {
    box-sizing: border-box;
    border-radius: 0;
}

html {
    background: var(--d2-ground);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--d2-ground);
    color: var(--d2-text);
    font-family: var(--d2-sans);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--d2-lime);
    text-decoration: none;
}

a:hover {
    color: var(--d2-lime-hi);
}

img {
    display: block;
    max-width: 100%;
}

input,
textarea,
button,
select {
    font: inherit;
    color: inherit;
}

::selection {
    background: rgba(157, 248, 1, .25);
    color: var(--d2-text);
}

:focus-visible {
    outline: 2px solid var(--d2-lime);
    outline-offset: 2px;
}

/* ---------------------------------------------------------- 3. animations */

@keyframes d2-in {
    from { opacity: 0; transform: scale(.985); }
    to { opacity: 1; transform: none; }
}

@keyframes d2-line {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes d2-brk {
    from { opacity: 0; transform: scale(.2); }
    to { opacity: 1; transform: none; }
}

@keyframes d2-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes d2-ticker {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes d2-bar {
    0% { transform: scaleX(.15); }
    50% { transform: scaleX(1); }
    100% { transform: scaleX(.15); }
}

@keyframes d2-band {
    0% { transform: translate3d(0, -140px, 0); }
    100% { transform: translate3d(0, 100vh, 0); }
}

/* ----------------------------------------------------- 4. background layers */

.hud-rain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hud-scanlines {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom,
        rgba(157, 248, 1, .045) 0 1px, transparent 1px 3px);
}

.hud-band {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 140px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(157, 248, 1, 0) 0%,
        rgba(157, 248, 1, .035) 50%,
        rgba(157, 248, 1, 0) 100%);
    animation: d2-band 6s linear infinite;
}

.hud-hair {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(157, 248, 1, .10);
}

.hud-hair--h {
    width: 100%;
    height: 1px;
    transform: translate3d(0, -10px, 0);
}

.hud-hair--v {
    width: 1px;
    height: 100%;
    transform: translate3d(-10px, 0, 0);
}

/* Everything readable sits above the layers. The background layers are the only
   positioned children hud.js adds to <body>, so lifting every other top-level
   child to z-index 3 puts all page content above the rain without requiring a
   wrapper element — which matters, because ~650 pages keep their own markup.

   The exclusion list is wrapped in :where() so it adds no specificity — without
   it the selector would score higher than a plain class and would override
   position:fixed on things like the cookie banner and the lightbox. */
.hud-shell,
body > *:not(:where(.hud-rain, .hud-scanlines, .hud-band, .hud-hair)) {
    position: relative;
    z-index: 3;
}

/* ----------------------------------------------------- 5. status + header */

.hud-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(4, 6, 10, .92);
    border-bottom: 1px solid var(--d2-border);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hud-status {
    max-width: var(--d2-max);
    margin: 0 auto;
    padding: 0 var(--d2-gutter);
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d2-micro);
    border-bottom: 1px solid var(--d2-rule);
}

.hud-status__dot {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hud-status__dot::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--d2-lime);
}

.hud-status__sep {
    color: var(--d2-dimmer);
}

.hud-status__state {
    color: var(--d2-label);
}

.hud-status__state b {
    font-weight: 400;
    color: var(--d2-lime);
}

.hud-status__clock {
    margin-left: auto;
    color: var(--d2-label);
    font-variant-numeric: tabular-nums;
}

.hud-status__caret {
    color: var(--d2-lime);
    animation: d2-blink 1s step-end infinite;
}

.hud-header {
    max-width: var(--d2-max);
    margin: 0 auto;
    padding: 0 var(--d2-gutter);
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 26px;
}

.hud-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.hud-logo img {
    height: 26px;
    width: auto;
}

.hud-logo:hover {
    opacity: .85;
}

.hud-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    flex-wrap: wrap;
    font-family: var(--d2-mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hud-nav a {
    padding: 9px 11px;
    border: 1px solid transparent;
    color: var(--d2-label);
}

.hud-nav a:hover {
    color: var(--d2-text);
    border-color: var(--d2-border);
    background: var(--d2-lime-05);
}

.hud-nav a[aria-current='page'] {
    color: var(--d2-lime);
}

/* Services dropdown. Opens on hover and on keyboard focus (:focus-within), so
   it is reachable without a pointer; on the stacked mobile nav it is always
   visible and simply indented, because there is nothing to hover. */
.hud-nav__item {
    position: relative;
    display: flex;
    align-items: center;
}

.hud-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    display: none;
    flex-direction: column;
    background: rgba(4, 6, 10, .98);
    border: 1px solid var(--d2-border-hi);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 50;
}

.hud-nav__item:hover .hud-nav__sub,
.hud-nav__item:focus-within .hud-nav__sub {
    display: flex;
}

.hud-nav__sub a {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--d2-rule);
    white-space: nowrap;
    letter-spacing: .12em;
}

.hud-nav__sub a:last-child {
    border-bottom: 0;
}

.hud-header__end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hud-lang {
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--d2-micro);
    padding: 9px 10px;
    border: 1px solid var(--d2-border);
}

.hud-lang:hover {
    color: var(--d2-lime);
    border-color: var(--d2-border-hi);
}

/* Mobile menu button — replaces the old nav panels. */
.hud-navtoggle {
    display: none;
    background: transparent;
    border: 1px solid var(--d2-border);
    color: var(--d2-label);
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 10px 12px;
    cursor: pointer;
}

.hud-navtoggle:hover {
    color: var(--d2-lime);
    border-color: var(--d2-border-hi);
}

/* ------------------------------------------------------------ 6. buttons */

/* inline-flex, not inline-block: several buttons carry an inline SVG arrow and
   inline layout aligns it on the text baseline, leaving it visibly high. */
.hud-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--d2-mono);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 17px 26px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
}

.hud-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.hud-btn--primary {
    color: var(--d2-on-lime);
    background: var(--d2-lime);
    border-color: var(--d2-lime);
}

.hud-btn--primary:hover {
    color: var(--d2-on-lime);
    background: var(--d2-lime-hi);
    border-color: var(--d2-lime-hi);
}

.hud-btn--ghost {
    color: var(--d2-lime);
    background: transparent;
    border-color: var(--d2-border-hi);
}

.hud-btn--ghost:hover {
    color: var(--d2-lime);
    background: rgba(157, 248, 1, .10);
}

.hud-btn--fill {
    color: var(--d2-lime);
    background: var(--d2-lime-09);
    border-color: var(--d2-border-hi);
    display: block;
    width: 100%;
    padding: 15px;
}

.hud-btn--fill:hover {
    color: var(--d2-lime);
    background: var(--d2-lime-16);
}

.hud-btn--sm {
    font-size: 13px;
    padding: 15px 22px;
}

.hud-back {
    display: inline-block;
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--d2-label);
    background: transparent;
    border: 1px solid var(--d2-border);
    padding: 10px 14px;
    cursor: pointer;
}

.hud-back:hover {
    color: var(--d2-lime);
    border-color: var(--d2-border-hi);
}

.hud-more {
    font-family: var(--d2-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--d2-lime);
    border-bottom: 1px solid var(--d2-border-hi);
    padding-bottom: 4px;
}

/* ------------------------------------------------------- 7. layout + type */

.hud-main {
    max-width: var(--d2-max);
    margin: 0 auto;
    padding: 0 var(--d2-gutter) 40px;
    animation: d2-in .38s ease-out;
}

.hud-section {
    margin-bottom: 60px;
}

.hud-pagehead {
    padding: 52px 0 26px;
}

.hud-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin-bottom: 14px;
}

.hud-kicker--rule::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--d2-lime);
}

.hud-kicker--lime {
    color: var(--d2-lime);
}

h1.hud-h1 {
    margin: 0;
    font-family: var(--d2-sans);
    font-weight: 600;
    font-size: clamp(32px, 4.4vw, 58px);
    line-height: 1.06;
    letter-spacing: -.01em;
    color: var(--d2-text);
    text-wrap: balance;
}

.hud-h1--hero {
    font-size: clamp(36px, 5.4vw, 74px);
    line-height: 1.02;
}

.hud-h1 em {
    font-style: normal;
    color: var(--d2-lime);
}

.hud-h2 {
    margin: 0 0 20px;
    font-family: var(--d2-sans);
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.14;
    color: var(--d2-text);
}

.hud-h2--lg {
    font-size: clamp(26px, 3vw, 42px);
    margin-bottom: 0;
}

.hud-lead {
    margin: 18px 0 0;
    max-width: 62ch;
    font-size: 17px;
    line-height: 1.62;
    color: var(--d2-body);
    text-wrap: pretty;
}

.hud-sechead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.hud-sechead .hud-h2 {
    margin-bottom: 0;
}

.hud-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Two-column blocks stack on their own below ~700px, no media query needed. */
.hud-split {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    align-items: flex-start;
}

.hud-split__main {
    flex: 1 1 440px;
    min-width: 0;
}

.hud-split__side {
    flex: 1 1 300px;
    min-width: 0;
}

/* --------------------------------------------------- 8. panels + brackets */

.hud-panel {
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
}

.hud-panel--pad {
    padding: 22px 20px;
}

.hud-readout {
    position: relative;
    background: var(--d2-readout);
    border: 1px solid var(--d2-readout-border);
    padding: 22px 20px 18px;
}

/* Signature element: 10px legs on two or four corners of a highlighted panel. */
.hud-brackets {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: d2-brk .5s ease-out .1s both;
}

.hud-brackets span {
    position: absolute;
    width: 10px;
    height: 10px;
}

.hud-brackets span:nth-child(1) {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--d2-lime);
    border-left: 2px solid var(--d2-lime);
}

.hud-brackets span:nth-child(2) {
    top: -1px;
    right: -1px;
    border-top: 2px solid var(--d2-lime);
    border-right: 2px solid var(--d2-lime);
}

.hud-brackets span:nth-child(3) {
    bottom: -1px;
    left: -1px;
    border-bottom: 2px solid var(--d2-lime);
    border-left: 2px solid var(--d2-lime);
}

.hud-brackets span:nth-child(4) {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--d2-lime);
    border-right: 2px solid var(--d2-lime);
}

.hud-panel__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin-bottom: 16px;
}

.hud-panel__label b {
    font-weight: 400;
    color: var(--d2-lime);
}

/* --------------------------------------------------------- 9. 1px grids */

/* A 1px "grid" is the wrapper's border colour showing through the gap. */
.hud-cells {
    display: grid;
    gap: 1px;
    background: var(--d2-border);
    border: 1px solid var(--d2-border);
}

.hud-cells > * {
    background: var(--d2-ground);
}

.hud-cells--stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: 44px;
}

.hud-cells--process {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-top: 32px;
}

.hud-cells--sub {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-top: 28px;
}

.hud-stat {
    padding: 16px 16px 14px;
}

.hud-stat__k {
    font-family: var(--d2-mono);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin-bottom: 9px;
}

.hud-stat__v {
    font-family: var(--d2-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--d2-lime);
    font-variant-numeric: tabular-nums;
}

.hud-step {
    padding: 18px 16px;
}

.hud-step__no {
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--d2-lime);
    margin-bottom: 10px;
}

.hud-step__name {
    font-size: 16px;
    font-weight: 500;
    color: var(--d2-text);
    margin-bottom: 6px;
}

.hud-step__desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--d2-muted);
}

.hud-sub {
    padding: 16px;
}

.hud-sub::before {
    content: '▮';
    display: block;
    font-family: var(--d2-mono);
    font-size: 11px;
    color: var(--d2-lime);
    margin-bottom: 8px;
}

.hud-sub span {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--d2-text);
}

/* ------------------------------------------------------- 10. studio readout */

.hud-lines {
    display: flex;
    flex-direction: column;
    font-family: var(--d2-mono);
    font-size: 12.5px;
    color: var(--d2-muted);
}

.hud-lines li {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--d2-rule);
    list-style: none;
    animation: d2-line .24s ease-out both;
}

.hud-lines li:last-child {
    border-bottom: 0;
}

/* 280ms stagger, as specified. */
.hud-lines li:nth-child(1) { animation-delay: .05s; }
.hud-lines li:nth-child(2) { animation-delay: .33s; }
.hud-lines li:nth-child(3) { animation-delay: .61s; }
.hud-lines li:nth-child(4) { animation-delay: .89s; }
.hud-lines li:nth-child(5) { animation-delay: 1.17s; }
.hud-lines li:nth-child(6) { animation-delay: 1.45s; }

.hud-lines ol,
ol.hud-lines,
ul.hud-lines {
    margin: 0;
    padding: 0;
}

.hud-lines__no {
    color: var(--d2-dimmer);
    width: 22px;
    flex: 0 0 22px;
}

.hud-lines__ok {
    color: var(--d2-lime);
}

.hud-signal {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--d2-readout-border);
}

.hud-signal__label {
    font-family: var(--d2-mono);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin-bottom: 8px;
}

.hud-signal__bar {
    height: 4px;
    background: var(--d2-rule);
    overflow: hidden;
}

.hud-signal__bar span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--d2-lime);
    transform-origin: left;
    animation: d2-bar 3.2s linear infinite;
}

.hud-readout .hud-btn--fill {
    margin-top: 16px;
}

/* ----------------------------------------------------------- 11. ticker */

.hud-ticker {
    overflow: hidden;
    border-top: 1px solid var(--d2-border);
    border-bottom: 1px solid var(--d2-border);
    padding: 11px 0;
    margin: 14px 0 60px;
}

.hud-ticker__track {
    display: flex;
    width: max-content;
    animation: d2-ticker 34s linear infinite;
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--d2-dimmer);
}

.hud-ticker__run {
    display: flex;
    gap: 26px;
    padding-right: 26px;
}

.hud-ticker__run i {
    font-style: normal;
    color: var(--d2-lime);
}

/* ------------------------------------------------------------ 12. cards */

.hud-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.hud-cards--wide {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.hud-card {
    display: block;
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
    padding: 10px;
    color: inherit;
}

.hud-card:hover {
    color: inherit;
    border-color: var(--d2-border-hi);
    background: var(--d2-lime-05);
}

.hud-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    overflow: hidden;
    background: var(--d2-ground);
}

.hud-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88;
}

.hud-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 6, 10, .55), rgba(4, 6, 10, 0) 55%);
}

.hud-card__cat {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    font-family: var(--d2-mono);
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--d2-lime);
    background: rgba(4, 6, 10, .8);
    border: 1px solid var(--d2-border-hi);
    padding: 4px 7px;
}

.hud-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 4px 4px;
}

.hud-card__title {
    font-size: 15px;
    font-weight: 500;
    color: var(--d2-text);
}

.hud-card__id {
    font-family: var(--d2-mono);
    font-size: 11px;
    color: var(--d2-dimmer);
}

/* main.js renders the homepage "Nedavno završeni dizajni" cards with these
   class names — style them so the generated markup matches the HUD cards. */
.recent-work__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.work-card__link {
    display: block;
    position: relative;
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
    padding: 10px;
    color: inherit;
}

.work-card__link:hover {
    color: inherit;
    border-color: var(--d2-border-hi);
    background: var(--d2-lime-05);
}

.work-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--d2-ground);
}

.work-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88;
}

.work-card__overlay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 4px 4px;
}

.work-card__overlay-category {
    order: 2;
    font-family: var(--d2-mono);
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--d2-lime);
}

.work-card__overlay-title {
    order: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--d2-text);
}

/* ------------------------------------------------------------- 13. lists */

.hud-list {
    border: 1px solid var(--d2-border);
    background: var(--d2-panel);
}

.hud-list__row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 22px 20px;
    border-bottom: 1px solid var(--d2-rule);
    color: inherit;
}

.hud-list__row:last-child {
    border-bottom: 0;
}

.hud-list__row:hover {
    color: inherit;
    background: var(--d2-lime-07);
}

.hud-list__row--article {
    grid-template-columns: 70px minmax(0, 1fr) auto;
    padding: 24px 20px;
}

.hud-list__no {
    font-family: var(--d2-mono);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--d2-lime);
}

.hud-list__title {
    display: block;
    font-size: 21px;
    font-weight: 500;
    color: var(--d2-text);
    margin-bottom: 5px;
}

.hud-list__row--article .hud-list__title {
    font-size: 20px;
    line-height: 1.34;
    margin-bottom: 7px;
    text-wrap: pretty;
}

.hud-list__desc {
    display: block;
    font-size: 15px;
    line-height: 1.55;
    color: var(--d2-body);
    max-width: 78ch;
}

.hud-list__meta {
    display: block;
    margin-top: 9px;
    font-family: var(--d2-mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d2-micro);
}

.hud-list__arrow {
    font-family: var(--d2-mono);
    font-size: 14px;
    color: var(--d2-lime);
}

/* ---------------------------------------------------- 14. article cards */

.hud-artcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.hud-artcard {
    display: flex;
    flex-direction: column;
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
    color: inherit;
}

.hud-artcard__media {
    aspect-ratio: 3 / 2;
    max-width: 100%;
    overflow: hidden;
    background: var(--d2-ground);
    border-bottom: 1px solid var(--d2-border);
}

.hud-artcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88;
}

.hud-artcard__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    flex: 1;
}

.hud-artcard:hover {
    color: inherit;
    border-color: var(--d2-border-hi);
    background: var(--d2-lime-05);
}

.hud-artcard__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--d2-micro);
}

.hud-artcard__meta b {
    font-weight: 400;
    color: var(--d2-lime);
}

.hud-artcard__title {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.32;
    color: var(--d2-text);
    text-wrap: pretty;
}

.hud-artcard__lead {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--d2-body);
}

.hud-artcard__author {
    margin-top: auto;
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--d2-label);
}

/* ---------------------------------------------------------- 15. filters */

.hud-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--d2-border);
}

.hud-chip {
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 11px 15px;
    border: 1px solid var(--d2-border);
    background: transparent;
    color: var(--d2-label);
    cursor: pointer;
}

.hud-chip:hover {
    border-color: var(--d2-border-hi);
    color: var(--d2-text);
}

.hud-chip.is-active,
.hud-chip[aria-pressed='true'] {
    background: var(--d2-lime-12);
    color: var(--d2-lime);
}

.hud-count {
    margin-left: auto;
    align-self: center;
    font-family: var(--d2-mono);
    font-size: 11px;
    color: var(--d2-micro);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- 16. services page */

.hud-services {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--d2-border);
    border: 1px solid var(--d2-border);
}

/* On a narrow screen the menu stacks above the detail. */
.hud-services__menu {
    flex: 1 1 240px;
    min-width: 0;
    background: var(--d2-ground);
    display: flex;
    flex-direction: column;
}

.hud-services__menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--d2-rule);
    font-family: var(--d2-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--d2-body);
}

.hud-services__menu a:last-child {
    border-bottom: 0;
}

.hud-services__menu a:hover {
    color: var(--d2-text);
    background: var(--d2-lime-07);
}

.hud-services__menu a[aria-current='page'] {
    background: var(--d2-lime-12);
    color: var(--d2-lime);
}

.hud-services__menu i {
    font-style: normal;
    color: var(--d2-dimmer);
}

.hud-services__menu a[aria-current='page'] i {
    color: var(--d2-lime);
}

.hud-services__detail {
    flex: 3 1 380px;
    min-width: 0;
    background: var(--d2-ground);
    padding: 30px 28px 34px;
}

.hud-services__detail .hud-lead {
    margin-top: 16px;
    max-width: 64ch;
}

/* ------------------------------------------------- 17. portfolio detail */

.hud-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 16px;
    font-family: var(--d2-mono);
    font-size: 12.5px;
}

.hud-meta dt {
    color: var(--d2-micro);
    margin: 0;
}

.hud-meta dd {
    color: var(--d2-text);
    margin: 0;
}

.hud-meta dd.is-id {
    color: var(--d2-lime);
}

.hud-figure {
    border: 1px solid var(--d2-border);
    background: var(--d2-panel);
    padding: 10px;
    margin-bottom: 16px;
}

.hud-figure img {
    width: 100%;
    height: auto;
}

.hud-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.hud-gallery img {
    width: 100%;
    height: auto;
    border: 1px solid var(--d2-border);
    background: var(--d2-panel);
    padding: 10px;
    cursor: zoom-in;
}

.hud-nextwork {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0 60px;
    border-top: 1px solid var(--d2-border);
}

.hud-nextwork__label {
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d2-micro);
}

/* --------------------------------------------------- 18. article detail */

.hud-article {
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.hud-article__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--d2-mono);
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin-bottom: 18px;
}

.hud-article__meta b {
    font-weight: 400;
    color: var(--d2-lime);
}

.hud-article__meta i {
    font-style: normal;
    color: var(--d2-dimmer);
}

.hud-article h1 {
    margin: 0;
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.01em;
    color: var(--d2-text);
    text-wrap: balance;
}

.hud-article__lead {
    margin: 22px 0 0;
    font-size: 19px;
    line-height: 1.6;
    color: var(--d2-lead);
    border-left: 2px solid var(--d2-lime);
    padding-left: 18px;
}

.hud-article__body {
    margin-top: 28px;
}

.hud-article__body p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--d2-body);
    text-wrap: pretty;
}

.hud-article__body h2 {
    margin: 38px 0 14px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--d2-text);
}

.hud-article__body h3 {
    margin: 28px 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--d2-text);
}

.hud-article__body ul,
.hud-article__body ol {
    padding-left: 20px;
    color: var(--d2-body);
    font-size: 17px;
    line-height: 1.7;
}

.hud-article__body li::marker {
    color: var(--d2-lime);
}

.hud-article__body blockquote {
    margin: 24px 0;
    padding-left: 18px;
    border-left: 2px solid var(--d2-lime);
    font-size: 19px;
    line-height: 1.6;
    color: var(--d2-lead);
}

.hud-article__body img {
    width: 100%;
    height: auto;
    border: 1px solid var(--d2-border);
    background: var(--d2-panel);
    padding: 10px;
    margin: 24px 0;
}

.hud-article__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--d2-border);
}

/* --------------------------------------------------------- 19. contact */

.hud-channels a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--d2-rule);
    font-family: var(--d2-mono);
    font-size: 13.5px;
    color: var(--d2-text);
}

.hud-channels a:last-child {
    border-bottom: 0;
}

.hud-channels a:hover {
    color: var(--d2-lime);
}

.hud-channels i {
    font-style: normal;
    color: var(--d2-lime);
}

.hud-address {
    font-family: var(--d2-mono);
    font-size: 13.5px;
    color: var(--d2-text);
    line-height: 1.7;
}

.hud-map {
    position: relative;
    margin-top: 18px;
    height: 150px;
    border: 1px solid var(--d2-border);
    background:
        radial-gradient(circle at 50% 50%, rgba(157, 248, 1, .12), transparent 60%),
        repeating-linear-gradient(to right, rgba(157, 248, 1, .08) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(to bottom, rgba(157, 248, 1, .08) 0 1px, transparent 1px 22px);
}

.hud-map__pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: var(--d2-lime);
}

.hud-map__coords {
    position: absolute;
    left: 10px;
    bottom: 8px;
    font-family: var(--d2-mono);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d2-caption);
}

/* ------------------------------------------------------ 20. testimonials */

.hud-quotes {
    overflow: hidden;
}

.testimonials__track {
    display: flex;
    gap: 14px;
    transition: transform .8s ease;
}

.testimonial-card {
    flex: 0 0 300px;
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
    padding: 20px;
}

.testimonial-card__text {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--d2-body);
}

.testimonial-card__name {
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--d2-lime);
}

.testimonial-card__company {
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin-top: 5px;
}

/* ---------------------------------------------------------- 21. CTA block */

.hud-cta {
    position: relative;
    background: var(--d2-readout);
    border: 1px solid var(--d2-border-hi);
    padding: 52px 28px;
    text-align: center;
    margin-bottom: 52px;
}

.hud-cta .hud-kicker {
    justify-content: center;
    color: var(--d2-lime);
    margin-bottom: 16px;
}

.hud-cta h2 {
    margin: 0 auto;
    max-width: 22ch;
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.01em;
    color: var(--d2-text);
}

.hud-cta .hud-actions {
    justify-content: center;
    margin-top: 28px;
}

/* ------------------------------------------------------------ 22. footer */

.hud-footer {
    position: relative;
    z-index: 3;
    border-top: 1px solid var(--d2-border);
    background: var(--d2-readout);
}

.hud-footer__grid {
    max-width: var(--d2-max);
    margin: 0 auto;
    padding: 44px var(--d2-gutter) 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 30px;
}

.hud-footer__logo img {
    height: 24px;
    width: auto;
    margin-bottom: 16px;
}

.hud-footer__desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--d2-muted);
    max-width: 34ch;
}

.hud-footer__social {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.hud-footer__social a {
    font-family: var(--d2-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--d2-label);
    border: 1px solid var(--d2-border);
    padding: 9px 11px;
}

.hud-footer__social a:hover {
    color: var(--d2-lime);
    border-color: var(--d2-border-hi);
}

.hud-footer__title {
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin: 0 0 14px;
    font-weight: 400;
}

.hud-footer__links {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 14.5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hud-footer__links a {
    color: var(--d2-body);
}

.hud-footer__links a:hover {
    color: var(--d2-lime);
}

.hud-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--d2-mono);
    font-size: 12.5px;
    color: var(--d2-body);
}

.hud-footer__contact a {
    color: var(--d2-body);
}

.hud-footer__contact a:hover {
    color: var(--d2-lime);
}

.hud-footer__contact span {
    color: var(--d2-muted);
    line-height: 1.6;
}

.hud-footer__partners {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--d2-rule);
    opacity: .7;
}

.hud-footer__partners img {
    height: 26px;
    width: auto;
}

.hud-footer__bottom {
    max-width: var(--d2-max);
    margin: 0 auto;
    padding: 16px var(--d2-gutter) 30px;
    border-top: 1px solid var(--d2-rule);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d2-dim);
}

.hud-footer__bottom a {
    color: var(--d2-dim);
}

.hud-footer__bottom a:hover {
    color: var(--d2-lime);
}

/* ------------------------------------------------- 23. cookie + lightbox */

/* main.js adds .active to reveal the banner and removes it on Accept, so the
   hidden state has to live on the base class — otherwise the Accept button
   looks dead: the class flips but the banner never leaves the screen. */
.cookie-banner {
    position: fixed;
    left: var(--d2-gutter);
    right: var(--d2-gutter);
    bottom: var(--d2-gutter);
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(4, 6, 10, .96);
    border: 1px solid var(--d2-border-hi);
    padding: 16px 18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transform: translateY(calc(100% + var(--d2-gutter)));
    transition: transform .4s ease;
    visibility: hidden;
}

.cookie-banner.active {
    transform: translateY(0);
    visibility: visible;
}

.cookie-banner__text {
    margin: 0;
    font-family: var(--d2-mono);
    font-size: 12px;
    color: var(--d2-body);
}

.cookie-banner__btn {
    font-family: var(--d2-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--d2-on-lime);
    background: var(--d2-lime);
    border: 1px solid var(--d2-lime);
    padding: 12px 18px;
    cursor: pointer;
}

.cookie-banner__btn:hover {
    background: var(--d2-lime-hi);
    border-color: var(--d2-lime-hi);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(4, 6, 10, .94);
    padding: 40px 20px;
}

.lightbox.active {
    opacity: 1;
}

.lightbox__image {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border: 1px solid var(--d2-border-hi);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    font-family: var(--d2-mono);
    font-size: 14px;
    color: var(--d2-lime);
    background: rgba(4, 6, 10, .8);
    border: 1px solid var(--d2-border-hi);
    padding: 12px 15px;
    cursor: pointer;
}

.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------- 24. portfolio listing (main.js)

   The 313 listing cards keep their original class names: main.js sorts them by
   data-date, filters them by data-category, reads ?category= from the URL and
   moves .portfolio-card__category into .portfolio-card__content. Renaming any
   of these would break all of that, so they are restyled in place — which is
   why the category chip sits above the title instead of over the image.        */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 60px;
}

.portfolio-card.hidden {
    display: none;
}

.portfolio-card__link {
    display: block;
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
    padding: 10px;
    color: inherit;
    height: 100%;
}

.portfolio-card__link:hover {
    color: inherit;
    border-color: var(--d2-border-hi);
    background: var(--d2-lime-05);
}

.portfolio-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--d2-ground);
}

.portfolio-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88;
}

.portfolio-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 6, 10, .55), rgba(4, 6, 10, 0) 55%);
}

.portfolio-card__content {
    padding: 12px 4px 4px;
}

.portfolio-card__category {
    display: block;
    font-family: var(--d2-mono);
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--d2-lime);
    margin-bottom: 8px;
}

.portfolio-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--d2-text);
}

/* Filter: a toggle on narrow screens, a plain chip row from 700px up. */
.portfolio-filter-wrap {
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--d2-border);
}

.filter-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--d2-label);
    background: transparent;
    border: 1px solid var(--d2-border);
    padding: 13px 15px;
    cursor: pointer;
}

.filter-toggle:hover {
    color: var(--d2-lime);
    border-color: var(--d2-border-hi);
}

.filter-count {
    margin-left: auto;
    color: var(--d2-lime);
}

.filter-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.portfolio-filter__btn {
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 11px 15px;
    border: 1px solid var(--d2-border);
    background: transparent;
    color: var(--d2-label);
    cursor: pointer;
}

.portfolio-filter__btn:hover {
    border-color: var(--d2-border-hi);
    color: var(--d2-text);
}

.portfolio-filter__btn.active {
    background: var(--d2-lime-12);
    color: var(--d2-lime);
}

@media (max-width: 700px) {
    .filter-toggle {
        display: flex;
    }

    .filter-panel {
        display: none;
        margin-top: 10px;
    }

    .filter-panel.open {
        display: flex;
    }
}

/* ================================================================= 25. legacy

   Class vocabulary of the ~650 pages whose body markup is left untouched by the
   redesign (portfolio details, articles, service landings, o-nama, kontakt).
   Only the head, header and footer are swapped there; everything below restyles
   what is already in those files into the HUD language.
   ========================================================================== */

/* --- shared shell ------------------------------------------------------- */

.container {
    max-width: var(--d2-max);
    margin: 0 auto;
    padding-left: var(--d2-gutter);
    padding-right: var(--d2-gutter);
}

.section {
    padding-block: 52px;
}

.section__title {
    margin: 0 0 24px;
    font-family: var(--d2-sans);
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.14;
    color: var(--d2-text);
}

.hidden {
    display: none !important;
}

/* --- buttons ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--d2-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 16px 24px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
}

/* The inline SVGs in these buttons carry only a viewBox, no width/height. */
.btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.btn--primary {
    color: var(--d2-on-lime);
    background: var(--d2-lime);
    border-color: var(--d2-lime);
}

.btn--primary:hover {
    color: var(--d2-on-lime);
    background: var(--d2-lime-hi);
    border-color: var(--d2-lime-hi);
}

.btn--outline {
    color: var(--d2-lime);
    background: transparent;
    border-color: var(--d2-border-hi);
}

.btn--outline:hover {
    color: var(--d2-lime);
    background: rgba(157, 248, 1, .10);
}

/* --- page hero (portfolio, clanci, o-nama, kontakt) --------------------- */

.page-hero {
    padding-block: 52px 26px;
}

.page-hero__title {
    margin: 0;
    font-family: var(--d2-sans);
    font-size: clamp(32px, 4.4vw, 58px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.01em;
    color: var(--d2-text);
    text-wrap: balance;
}

.page-hero__description {
    margin: 18px 0 0;
    max-width: 62ch;
    font-size: 17px;
    line-height: 1.62;
    color: var(--d2-body);
    text-wrap: pretty;
}

/* --- portfolio detail --------------------------------------------------- */

.portfolio-single__container {
    max-width: 1320px;
}

.portfolio-single__title {
    margin: 0;
    font-size: clamp(30px, 4.2vw, 56px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.01em;
    color: var(--d2-text);
    text-wrap: balance;
}

.portfolio-single__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d2-micro);
}

.portfolio-single__author-img,
.article-single__author img,
.article-card__author-img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border: 1px solid var(--d2-border);
}

.portfolio-single__info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    margin-top: 28px;
    background: var(--d2-border);
    border: 1px solid var(--d2-border);
}

.portfolio-info__item {
    background: var(--d2-ground);
    padding: 16px;
}

.portfolio-info__label {
    margin: 0 0 8px;
    font-family: var(--d2-mono);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--d2-micro);
}

.portfolio-info__value {
    margin: 0;
    font-family: var(--d2-mono);
    font-size: 13px;
    line-height: 1.5;
    color: var(--d2-text);
}

.portfolio-single__description {
    margin-top: 34px;
    max-width: 76ch;
}

.portfolio-single__description p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--d2-body);
    text-wrap: pretty;
}

.portfolio-single__description h2 {
    margin: 34px 0 14px;
    font-size: 26px;
    font-weight: 600;
    color: var(--d2-text);
}

.portfolio-single__description h3 {
    margin: 26px 0 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--d2-text);
}

.portfolio-single__description li::marker {
    color: var(--d2-lime);
}

.portfolio-store-links {
    gap: 12px !important;
}

.portfolio-single__gallery {
    margin-top: 34px;
}

.portfolio-single__image,
.portfolio-single__image--featured {
    border: 1px solid var(--d2-border);
    background: var(--d2-panel);
    padding: 10px;
    margin-bottom: 14px;
}

.portfolio-single__image img,
.portfolio-single__image--featured img {
    width: 100%;
    height: auto;
}

.portfolio-single__image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.portfolio-single__image-grid img {
    width: 100%;
    height: auto;
    border: 1px solid var(--d2-border);
    background: var(--d2-panel);
    padding: 10px;
    cursor: zoom-in;
}

.portfolio-single__image-grid img:hover {
    border-color: var(--d2-border-hi);
}

.portfolio-single__related {
    margin-top: 60px;
    padding-top: 34px;
    border-top: 1px solid var(--d2-border);
}

.portfolio-related__title,
.article-single__share h2 {
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: 600;
    color: var(--d2-text);
}

.portfolio-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.portfolio-single__footer {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--d2-border);
}

/* --- article detail ----------------------------------------------------- */

.article-single__container {
    max-width: 860px;
}

.article-single__title {
    margin: 0;
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.01em;
    color: var(--d2-text);
    text-wrap: balance;
}

.article-single__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    font-family: var(--d2-mono);
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--d2-micro);
}

.article-single__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.article-single__author-name {
    color: var(--d2-label);
}

.article-single__featured-image {
    margin: 28px 0;
    border: 1px solid var(--d2-border);
    background: var(--d2-panel);
    padding: 10px;
}

.article-single__featured-image img {
    width: 100%;
    height: auto;
}

.article-single__content p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--d2-body);
    text-wrap: pretty;
}

.article-single__content h2 {
    margin: 38px 0 14px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--d2-text);
}

.article-single__content h3 {
    margin: 28px 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--d2-text);
}

.article-single__content ul,
.article-single__content ol {
    font-size: 17px;
    line-height: 1.7;
    color: var(--d2-body);
}

.article-single__content li::marker {
    color: var(--d2-lime);
}

.article-single__content strong {
    color: var(--d2-text);
    font-weight: 600;
}

.article-single__content blockquote {
    margin: 24px 0;
    padding-left: 18px;
    border-left: 2px solid var(--d2-lime);
    font-size: 19px;
    line-height: 1.6;
    color: var(--d2-lead);
}

.article-single__content img {
    width: 100%;
    height: auto;
    border: 1px solid var(--d2-border);
    background: var(--d2-panel);
    padding: 10px;
    margin: 24px 0;
}

.article-single__share,
.article-single__back {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--d2-border);
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-family: var(--d2-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--d2-label);
    border: 1px solid var(--d2-border);
}

/* These SVGs declare only a viewBox — without an explicit size they collapse
   to nothing and the buttons render as empty squares. */
.share-btn svg {
    width: 18px;
    height: 18px;
    fill: var(--d2-label);
}

.share-btn:hover {
    color: var(--d2-lime);
    border-color: var(--d2-border-hi);
}

.share-btn:hover svg {
    fill: var(--d2-lime);
}

/* --- article cards (clanci list + related) ------------------------------ */

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.article-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
    color: inherit;
}

.article-card__link:hover {
    color: inherit;
    border-color: var(--d2-border-hi);
    background: var(--d2-lime-05);
}

.article-card__image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--d2-ground);
    border-bottom: 1px solid var(--d2-border);
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88;
}

/* The excerpt reads as body copy under the image, matching the homepage cards.
   main.js used to move this node into the image box for an overlay effect;
   that block was removed so the card has one consistent layout everywhere. */
.article-card__excerpt {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--d2-body);
}

.article-card__content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.article-card__title {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.32;
    color: var(--d2-text);
    text-wrap: pretty;
}

.article-card__footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d2-micro);
}

.article-card__author {
    color: var(--d2-lime);
}

/* --- service landing pages ---------------------------------------------- */

.landing-hero {
    padding-block: 52px 26px;
}

.landing-hero__label {
    margin: 0 0 14px;
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--d2-lime);
}

.landing-hero__title {
    margin: 0;
    font-size: clamp(32px, 4.4vw, 58px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.01em;
    color: var(--d2-text);
    text-wrap: balance;
}

.landing-hero__desc {
    margin: 18px 0 28px;
    max-width: 62ch;
    font-size: 17px;
    line-height: 1.62;
    color: var(--d2-body);
    text-wrap: pretty;
}

/* Services index — the brief's "izbornik usluga = navigacija, aktivna prema
   URL-u", rendered as a 1px-grid strip under the hero of each service page. */
.hud-svcnav {
    padding-block: 0 8px;
}

.hud-svcnav__label {
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin-bottom: 12px;
}

.hud-svcnav__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--d2-border);
    border: 1px solid var(--d2-border);
}

.hud-svcnav__grid a {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--d2-ground);
    padding: 16px 14px;
    font-family: var(--d2-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--d2-body);
}

.hud-svcnav__grid a:hover {
    color: var(--d2-text);
    background: var(--d2-lime-07);
}

.hud-svcnav__grid a[aria-current='page'] {
    background: var(--d2-lime-12);
    color: var(--d2-lime);
}

.hud-svcnav__grid i {
    font-style: normal;
    color: var(--d2-dimmer);
}

.hud-svcnav__grid a[aria-current='page'] i {
    color: var(--d2-lime);
}

.landing-lead {
    padding-block: 34px 52px;
}

.landing-lead__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
    background: var(--d2-readout);
    border: 1px solid var(--d2-readout-border);
    padding: 28px 24px;
}

.landing-lead__intro {
    flex: 1 1 320px;
    min-width: 0;
}

.landing-lead__title {
    margin: 0 0 12px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--d2-text);
}

.landing-lead__desc {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--d2-body);
}

.landing-lead__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.landing-lead__form {
    flex: 1 1 320px;
    min-width: 0;
}

.landing-lead__field {
    margin-bottom: 14px;
}

.landing-lead__field label {
    display: block;
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--d2-label);
    margin-bottom: 8px;
}

.landing-lead__field input,
.landing-lead__field textarea,
.landing-lead__field select {
    width: 100%;
    background: var(--d2-ground);
    border: 1px solid var(--d2-border);
    padding: 14px;
    font-family: var(--d2-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--d2-text);
    outline: none;
    resize: vertical;
}

.landing-lead__field input::placeholder,
.landing-lead__field textarea::placeholder {
    color: var(--d2-caption);
}

.landing-lead__field input:focus,
.landing-lead__field textarea:focus,
.landing-lead__field select:focus {
    border-color: var(--d2-lime);
}

/* Honeypot — must stay invisible to people, reachable to bots. */
.landing-lead__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.landing-lead__submit {
    width: 100%;
    font-family: var(--d2-mono);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--d2-on-lime);
    background: var(--d2-lime);
    border: 1px solid var(--d2-lime);
    padding: 17px;
    cursor: pointer;
}

.landing-lead__submit:hover {
    background: var(--d2-lime-hi);
    border-color: var(--d2-lime-hi);
}

.landing-lead__status {
    margin: 14px 0 0;
    font-family: var(--d2-mono);
    font-size: 12.5px;
    color: var(--d2-lime);
}

.landing-lead__status[data-state='error'] {
    color: var(--d2-error);
}

.landing-about {
    padding-block: 34px;
}

.landing-about__title,
.landing-portfolio__title,
.landing-benefits__title {
    margin: 0 0 20px;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--d2-text);
}

.landing-about__columns {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.landing-about__text {
    flex: 1 1 320px;
    min-width: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--d2-body);
}

.landing-about__text h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--d2-text);
}

.landing-about__text li::marker {
    color: var(--d2-lime);
}

.landing-portfolio {
    padding-block: 34px;
}

.landing-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.landing-portfolio__item {
    display: block;
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
    padding: 10px;
    color: inherit;
}

.landing-portfolio__item:hover {
    color: inherit;
    border-color: var(--d2-border-hi);
    background: var(--d2-lime-05);
}

.landing-portfolio__item-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--d2-ground);
}

.landing-portfolio__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88;
}

.landing-portfolio__item-content {
    padding: 12px 4px 4px;
}

.landing-portfolio__item-title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--d2-text);
}

.landing-portfolio__more {
    display: inline-block;
    margin-top: 20px;
    font-family: var(--d2-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--d2-lime);
    border-bottom: 1px solid var(--d2-border-hi);
    padding-bottom: 4px;
}

.landing-benefits {
    padding-block: 34px;
}

.landing-benefits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1px;
    background: var(--d2-border);
    border: 1px solid var(--d2-border);
}

.landing-benefits__card {
    background: var(--d2-ground);
    padding: 18px 16px;
}

.landing-benefits__card-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 500;
    color: var(--d2-text);
}

.landing-benefits__card-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--d2-muted);
}

.landing-cta {
    position: relative;
    background: var(--d2-readout);
    border: 1px solid var(--d2-border-hi);
    padding: 52px 28px;
    text-align: center;
    margin-block: 34px 52px;
}

.landing-cta__title {
    margin: 0 auto;
    max-width: 22ch;
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.01em;
    color: var(--d2-text);
}

.landing-cta__text {
    margin: 16px auto 24px;
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.62;
    color: var(--d2-body);
}

/* --- o-nama ------------------------------------------------------------- */

.stats-bar {
    border-block: 1px solid var(--d2-border);
    padding-block: 0;
}

.stats-bar__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--d2-border);
    border-inline: 1px solid var(--d2-border);
    padding: 0;
    max-width: var(--d2-max);
}

.stat {
    background: var(--d2-ground);
    padding: 20px 16px;
}

.stat__number {
    display: block;
    font-family: var(--d2-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--d2-lime);
    font-variant-numeric: tabular-nums;
}

.stat__label {
    display: block;
    margin-top: 8px;
    font-family: var(--d2-mono);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--d2-micro);
}

.story-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    align-items: flex-start;
}

.story-text {
    flex: 1 1 380px;
    min-width: 0;
}

.story-text p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--d2-body);
    text-wrap: pretty;
}

.story-text strong {
    color: var(--d2-text);
    font-weight: 600;
}

.story-collage {
    flex: 1 1 280px;
    min-width: 0;
    display: grid;
    gap: 14px;
}

.story-collage__item {
    border: 1px solid var(--d2-border);
    background: var(--d2-panel);
    padding: 10px;
}

.story-collage__item img {
    width: 100%;
    height: auto;
}

.about-different {
    background: transparent !important;
}

.diff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    background: var(--d2-border);
    border: 1px solid var(--d2-border);
}

.diff-card {
    background: var(--d2-ground);
    padding: 22px 18px;
}

.diff-card__number {
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--d2-lime);
    margin-bottom: 12px;
}

.diff-card__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 500;
    color: var(--d2-text);
}

.diff-card__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--d2-muted);
}

.cta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cta-card {
    flex: 1 1 320px;
    min-width: 0;
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
    padding: 26px 22px;
}

.cta-card__title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 600;
    color: var(--d2-text);
}

.cta-card__text {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--d2-body);
}

.cta-card__text strong {
    color: var(--d2-text);
}

.cta--centered {
    text-align: center;
}

.cta__text {
    margin: 0 auto 24px;
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.62;
    color: var(--d2-body);
}

/* --- kontakt ------------------------------------------------------------ */

.contact-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.contact-methods {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--d2-border);
    border: 1px solid var(--d2-border);
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--d2-ground);
    padding: 20px 18px;
    color: inherit;
}

.contact-method:hover {
    color: inherit;
    background: var(--d2-lime-07);
}

.contact-method__icon {
    flex: 0 0 auto;
    color: var(--d2-lime);
    display: flex;
}

.contact-method__label {
    display: block;
    font-family: var(--d2-mono);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin-bottom: 6px;
}

.contact-method__value {
    display: block;
    font-family: var(--d2-mono);
    font-size: 14px;
    color: var(--d2-text);
}

.company-info {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
    background: var(--d2-readout);
    border: 1px solid var(--d2-readout-border);
    padding: 26px 22px;
}

.company-info__title {
    margin: 0 0 8px;
    font-family: var(--d2-mono);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--d2-lime);
}

.company-info__subtitle {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--d2-muted);
}

.company-info__item {
    padding: 11px 0;
    border-bottom: 1px solid var(--d2-rule);
}

.company-info__item:last-child {
    border-bottom: 0;
}

.company-info__item-label {
    display: block;
    font-family: var(--d2-mono);
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin-bottom: 6px;
}

.company-info__item-value {
    display: block;
    font-family: var(--d2-mono);
    font-size: 13px;
    color: var(--d2-text);
}

.social-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--d2-mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--d2-label);
    border: 1px solid var(--d2-border);
    padding: 14px 18px;
}

.social-link:hover {
    color: var(--d2-lime);
    border-color: var(--d2-border-hi);
}

/* --- cookie policy page -------------------------------------------------- */

.cookie-policy-page {
    max-width: 860px;
}

.cookie-policy-page h1 {
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--d2-text);
}

.cookie-policy-page h2 {
    margin: 34px 0 12px;
    font-size: 24px;
    font-weight: 600;
    color: var(--d2-text);
}

.cookie-policy-page p,
.cookie-policy-page li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--d2-body);
}

.cookie-policy-page li::marker {
    color: var(--d2-lime);
}

.cookie-policy-page table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cookie-policy-page th,
.cookie-policy-page td {
    border: 1px solid var(--d2-border);
    padding: 10px 12px;
    text-align: left;
    color: var(--d2-body);
}

.cookie-policy-page th {
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d2-micro);
}

.last-updated {
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d2-micro);
}

/* ============================================== 26. brief.form (contact page)

   Posts through the same Web3Forms endpoint the service landing pages already
   use, so the form adds no new dependency. On success the panel switches to the
   transmission.log readout.
   ========================================================================== */

/* The form is the first column of the existing .contact-grid flex row. */
.hud-brief {
    flex: 1 1 400px;
    min-width: 0;
}

.hud-form__label {
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin-bottom: 20px;
}

.hud-field {
    display: block;
    margin-bottom: 16px;
}

.hud-field > span {
    display: block;
    font-family: var(--d2-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--d2-label);
    margin-bottom: 8px;
}

.hud-field input,
.hud-field textarea {
    width: 100%;
    background: var(--d2-ground);
    border: 1px solid var(--d2-border);
    padding: 14px;
    font-family: var(--d2-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--d2-text);
    outline: none;
    resize: vertical;
}

.hud-field input::placeholder,
.hud-field textarea::placeholder {
    color: var(--d2-caption);
}

.hud-field input:focus,
.hud-field textarea:focus {
    border-color: var(--d2-lime);
}

.hud-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hud-type {
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 11px 14px;
    border: 1px solid var(--d2-border);
    background: transparent;
    color: var(--d2-label);
    cursor: pointer;
}

.hud-type:hover {
    border-color: var(--d2-border-hi);
    color: var(--d2-text);
}

.hud-type[aria-pressed='true'] {
    background: var(--d2-lime-12);
    color: var(--d2-lime);
}

.hud-form__submit {
    width: 100%;
    font-family: var(--d2-mono);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--d2-on-lime);
    background: var(--d2-lime);
    border: 1px solid var(--d2-lime);
    padding: 17px;
    cursor: pointer;
    margin-top: 4px;
}

.hud-form__submit:hover:not(:disabled) {
    background: var(--d2-lime-hi);
    border-color: var(--d2-lime-hi);
}

.hud-form__submit:disabled {
    opacity: .6;
    cursor: default;
}

/* transmission.log — the success state, lines entering one after another. */
.hud-log {
    font-family: var(--d2-mono);
    font-size: 13px;
    color: var(--d2-muted);
}

.hud-log__title {
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--d2-micro);
    margin-bottom: 20px;
}

.hud-log p {
    margin: 0;
    padding: 8px 0;
    animation: d2-line .24s ease-out both;
}

.hud-log p:nth-child(2) { animation-delay: .05s; }
.hud-log p:nth-child(3) { animation-delay: .30s; }
.hud-log p:nth-child(4) { animation-delay: .55s; }
.hud-log p:nth-child(5) { animation-delay: .80s; }

.hud-log i {
    font-style: normal;
    color: var(--d2-lime);
}

.hud-log strong {
    font-weight: 400;
    color: var(--d2-text);
}

.hud-log--error i {
    color: var(--d2-error);
}

.hud-log--error {
    border-left: 2px solid var(--d2-error);
    padding-left: 14px;
}

.hud-log .hud-btn--ghost {
    margin-top: 22px;
}

/* ---------------------------------------------------------- 27. helpers */

.hud-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease-out, transform .55s cubic-bezier(.2, .8, .2, 1);
}

.hud-reveal.is-in {
    opacity: 1;
    transform: none;
}

.hud-stripes {
    border: 1px solid var(--d2-border);
    background: repeating-linear-gradient(135deg,
        rgba(157, 248, 1, .05) 0 1px, transparent 1px 9px);
    padding: 64px 24px;
    text-align: center;
}

.hud-stripes__caption {
    font-family: var(--d2-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--d2-caption);
}

.hud-skip {
    position: absolute;
    left: -9999px;
}

.hud-skip:focus {
    left: var(--d2-gutter);
    top: 8px;
    z-index: 100;
    background: var(--d2-lime);
    color: var(--d2-on-lime);
    padding: 10px 14px;
    font-family: var(--d2-mono);
    font-size: 12px;
}

/* -------------------------------------------------------- 25. responsive */

@media (max-width: 860px) {
    /* Preheader keeps only what actually changes — the status and the clock —
       on a single row. The company name and address are already in the footer
       and on the contact page, and on a phone they cost three lines. */
    .hud-status {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .hud-status__dot,
    .hud-status__sep,
    .hud-status > span:not([class]) {
        display: none;
    }

    /* Header on one row: logo · language · menu. The quote button is dropped
       at this width; the same call to action sits in the hero and the menu
       carries a link to the contact page, so nothing becomes unreachable. */
    .hud-navtoggle {
        display: inline-block;
        order: 3;
        margin-left: 0;
    }

    .hud-header {
        flex-wrap: wrap;
        gap: 12px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .hud-header__end {
        order: 2;
        margin-left: auto;
    }

    .hud-header__end .hud-btn {
        display: none;
    }

    .hud-nav {
        display: none;
        order: 5;
        flex-basis: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        border-top: 1px solid var(--d2-border);
        padding-top: 10px;
    }

    .hud-nav.is-open {
        display: flex;
    }

    .hud-nav a {
        padding: 13px 10px;
        border-bottom: 1px solid var(--d2-rule);
    }
}

@media (max-width: 600px) {
    .hud-status {
        gap: 10px;
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: 9.5px;
    }

    .hud-status__sep {
        display: none;
    }

    .hud-list__row,
    .hud-list__row--article {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
        padding: 18px 16px;
    }

    .hud-list__arrow {
        display: none;
    }

    .hud-cta {
        padding: 36px 18px;
    }

    .hud-services__detail {
        padding: 24px 18px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .hud-band {
        display: none;
    }

    .hud-reveal {
        opacity: 1;
        transform: none;
    }
}