/* ============================================================
   damiandev.pl
   Motyw: panel sterowania HMI. Szczotkowane aluminium, szkło
   wyświetlacza, diody. Głębia z materiałów i światła, nie z ozdobników.
   ============================================================ */

/* Jeden motyw: ciemny grafit, elegancka czerń, zielony terminal i czerwień. */
:root {
    /* grafit (powierzchnie urządzeń) */
    --alu: #262c31;
    --alu-hi: #3a434a;
    --alu-lo: #15191c;
    --alu-edge: #08090a;
    /* tekst */
    --ink: #e8ecee;
    --ink-soft: #9ba6ae;
    /* wyświetlacz i terminal */
    --glass: #040706;
    --glass-hi: #0c1a12;
    --term: #3dff7a;
    --term-dim: #2a9d53;
    /* czerwień */
    --red: #e5383b;
    --red-deep: #8f1a20;
    /* diody */
    --green: #3dff7a;
    --led-off: #3b4247;

    --page: radial-gradient(120% 70% at 20% 0%, #1b2126 0%, #0d0f11 55%, #070809 100%);
    --brush: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);

    --shadow-far: 0 40px 70px -30px rgba(0, 0, 0, .85), 0 16px 30px -18px rgba(0, 0, 0, .7);
    --shadow-near: 0 10px 18px -12px rgba(0, 0, 0, .8);

    --font-display: "Chakra Petch", system-ui, sans-serif;
    --font-body: "Albert Sans", system-ui, sans-serif;
    --font-readout: "JetBrains Mono", ui-monospace, monospace;

    /* skala typograficzna (stosunek ~1.25) */
    --step--1: .875rem;
    --step-0: 1.0625rem;
    --step-1: 1.33rem;
    --step-2: 1.66rem;
    --step-3: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
    --step-5: clamp(2.8rem, 1.4rem + 5.6vw, 5.2rem);

    color-scheme: dark;
}

/* ---------- podstawy ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { background: #070809; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink);
    background: var(--brush), var(--page);
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -.01em;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
    border-radius: 6px;
}

.wrap {
    width: min(1160px, 100% - 2rem);
    margin-inline: auto;
}

.skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    padding: .6rem 1rem;
    background: var(--term);
    color: #000;
    border-radius: 8px;
    z-index: 10;
}
.skip:focus { top: 1rem; }

/* ---------- górny pasek ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: color-mix(in srgb, #0b0d0f 80%, transparent);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 -1px 0 rgba(255,255,255,.06) inset;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
}

/* tabliczka "wygrawerowana" w metalu */
.badge-plate {
    display: grid;
    place-items: center;
    width: 40px;
    height: 32px;
    border-radius: 7px;
    font-size: .95rem;
    letter-spacing: .04em;
    color: var(--ink-soft);
    background: linear-gradient(160deg, var(--alu-hi), var(--alu-lo));
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 -1px 0 rgba(0,0,0,.4) inset, var(--shadow-near);
    color: var(--term);
    text-shadow: 0 0 8px rgba(61,255,122,.45);
}

.badge-name { font-size: 1.05rem; }

nav {
    display: flex;
    gap: clamp(.75rem, 2vw, 1.75rem);
}

nav a {
    text-decoration: none;
    color: var(--ink-soft);
    font-weight: 500;
    font-size: var(--step--1);
    padding: .4rem .1rem;
}
nav a:hover { color: var(--ink); }
nav { align-items: center; }

/* ---------- rozwijane menu "Projekty" ---------- */
.dropdown { position: relative; }

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .1rem;
    border: 0;
    background: none;
    font: 500 var(--step--1) var(--font-body);
    color: var(--ink-soft);
    cursor: pointer;
}
.dropdown-toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.dropdown-toggle:hover,
.dropdown-toggle[aria-expanded="true"] { color: var(--ink); }
.dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.dropdown-toggle[data-active] { color: var(--term); text-shadow: 0 0 8px rgba(61, 255, 122, .4); }

.dropdown-menu {
    position: absolute;
    top: calc(100% + .6rem);
    right: -1rem;
    z-index: 20;
    min-width: 290px;
    margin: 0;
    padding: .5rem;
    list-style: none;
    border-radius: 14px;
    background: linear-gradient(180deg, #1c2126, #111417);
    box-shadow: 0 0 0 1px #050606, 0 1px 0 rgba(255,255,255,.08) inset, var(--shadow-far);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
/* niewidzialny "most", żeby menu nie znikało, gdy kursor jedzie z przycisku w dół */
.dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }

.dropdown:hover .dropdown-menu,
.dropdown.otwarte .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .8rem;
    border-radius: 9px;
    text-decoration: none;
    color: var(--ink);
}
.dropdown-menu a:hover,
.dropdown-menu a:focus-visible { background: rgba(255,255,255,.05); }
.dropdown-menu strong { display: block; font-weight: 600; font-size: .95rem; }
.dropdown-menu small { display: block; color: var(--ink-soft); font-size: .8rem; }
.dropdown-menu a[aria-current="page"] strong { color: var(--term); }

@media (max-width: 560px) {
    .dropdown-toggle { font-size: .8rem; }
    .dropdown-menu { right: -4.5rem; min-width: 250px; }
}

nav a[aria-current="page"] {
    color: var(--term);
    text-shadow: 0 0 8px rgba(61, 255, 122, .4);
}

@media (max-width: 560px) {
    .badge-name { display: none; }
    nav a { font-size: .8rem; }
}

/* ---------- hero ---------- */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 7vw, 6rem);
}

.hero h1 {
    font-size: var(--step-5);
    font-weight: 700;
    letter-spacing: -.025em;
    /* napis wytłoczony w aluminium */
    color: var(--ink);
    text-shadow: 0 2px 30px rgba(0,0,0,.6);
}

.lead {
    margin-top: 1.25rem;
    font-size: var(--step-1);
    line-height: 1.45;
    max-width: 36ch;
}

.hero-note {
    margin-top: 1rem;
    color: var(--ink-soft);
    max-width: 46ch;
}

/* strona główna: samo przedstawienie, bez urządzenia */
.hero-home {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem);
}

/* zdjęcie w grafitowej ramce, jak moduł kamery w panelu */
.portrait { margin: 0; justify-self: end; width: min(340px, 100%); }
.portrait-bezel {
    position: relative;
    padding: 18px;
    border-radius: 28px;
    background:
        var(--brush),
        linear-gradient(155deg, var(--alu-hi) 0%, var(--alu) 45%, var(--alu-lo) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.12) inset,
        0 -2px 0 rgba(0,0,0,.4) inset,
        0 0 0 1px var(--alu-edge),
        var(--shadow-far);
}
.portrait-glass {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 0 0 3px #050606, 0 2px 0 4px rgba(255,255,255,.06);
}
.portrait-glass img { aspect-ratio: 1; object-fit: cover; filter: saturate(.9) contrast(1.03); }
/* odbicie światła na szybce */
.portrait-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, rgba(255,255,255,.1) 0 30%, transparent 30.5%);
    pointer-events: none;
}

@media (max-width: 860px) {
    .hero-home { grid-template-columns: 1fr; }
    .portrait { justify-self: start; width: min(260px, 70%); grid-row: 1; }
}
.hero-home .lead { max-width: 40ch; }

@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .device-bezel { padding: 20px 16px 18px; }
    .key { padding: .65rem .85rem; }
    .key-small { margin-left: 0; }
}

/* linia terminala nad imieniem */
.prompt {
    font-family: var(--font-readout);
    font-size: var(--step--1);
    color: var(--term);
    text-shadow: 0 0 8px rgba(61, 255, 122, .45);
    margin-bottom: 1rem;
}
.prompt .cursor {
    display: inline-block;
    width: .6em;
    height: 1.1em;
    margin-left: .15em;
    vertical-align: -.2em;
    background: var(--term);
    box-shadow: 0 0 8px rgba(61, 255, 122, .6);
}
@media (prefers-reduced-motion: no-preference) {
    .prompt .cursor { animation: blink 1.1s steps(1) infinite; }
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- urządzenie HMI ---------- */
.device { justify-self: center; width: min(460px, 100%); }

.device-bezel {
    position: relative;
    padding: 26px 26px 22px;
    border-radius: 30px;
    background:
        var(--brush),
        linear-gradient(155deg, var(--alu-hi) 0%, var(--alu) 45%, var(--alu-lo) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.12) inset,
        0 -2px 0 rgba(0,0,0,.4) inset,
        0 0 0 1px var(--alu-edge),
        var(--shadow-far);
}

.screw {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #59636b, var(--alu-lo) 70%);
    box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.08);
}
.screw::after {
    content: "";
    position: absolute;
    inset: 4px 1.5px auto;
    height: 1px;
    background: rgba(0,0,0,.35);
    transform: rotate(-35deg);
}
.screw-tl { top: 11px; left: 11px; }
.screw-tr { top: 11px; right: 11px; }
.screw-bl { bottom: 11px; left: 11px; }
.screw-br { bottom: 11px; right: 11px; }

.screen {
    position: relative;
    overflow: hidden;
    padding: 1.25rem 1.35rem 1.35rem;
    border-radius: 14px;
    color: var(--term);
    font-family: var(--font-readout);
    font-size: .9rem;
    background:
        radial-gradient(120% 80% at 30% 0%, var(--glass-hi) 0%, var(--glass) 60%);
    box-shadow:
        0 0 0 3px #0a1418,
        0 2px 0 4px rgba(255,255,255,.06),
        inset 0 4px 14px rgba(0,0,0,.6);
    text-shadow: 0 0 6px rgba(61, 255, 122, .5);
}

/* odbicie światła na szybie */
.screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, rgba(255,255,255,.09) 0 34%, transparent 34.5%);
    pointer-events: none;
}

/* delikatne linie jak w wyświetlaczu */
.screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
    pointer-events: none;
    mix-blend-mode: multiply;
}

.readout { position: relative; }

.readout-host {
    color: var(--term-dim);
    text-shadow: none;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.readout-state {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: .55rem;
    font-size: clamp(1.4rem, 1rem + 1.8vw, 1.9rem);
    font-weight: 500;
    letter-spacing: .04em;
}

.state-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: none;
    background: var(--led-off);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
    transition: background .4s, box-shadow .4s;
}

.readout-grid {
    position: relative;
    display: grid;
    gap: .3rem;
    margin: 1.1rem 0 0;
    padding-top: .9rem;
    border-top: 1px dashed rgba(61, 255, 122, .25);
}
.readout-grid div {
    display: grid;
    grid-template-columns: 11ch 1fr;
    gap: .75rem;
}
.readout-grid dt { color: var(--term-dim); text-shadow: none; }
.readout-grid dd { margin: 0; }

/* stany urządzenia */
.device[data-stan="online"] .state-dot {
    background: var(--green);
    box-shadow: 0 0 10px var(--green), 0 0 2px #fff inset;
}
.device[data-stan="offline"] .state-dot { background: var(--red); box-shadow: 0 0 10px var(--red), 0 0 2px #fff inset; }
.device[data-stan="offline"] .readout-state { color: var(--term-dim); text-shadow: none; }
.device[data-stan="sprawdzanie"] .state-dot {
    background: var(--term-dim);
    box-shadow: 0 0 6px var(--term-dim);
}

/* klawisze */
.keys {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.4rem;
}

.key {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.1rem;
    border: 0;
    border-radius: 12px;
    font: 600 .95rem/1 var(--font-body);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(180deg, var(--alu-hi), var(--alu));
    box-shadow:
        0 1px 0 rgba(255,255,255,.12) inset,
        0 -2px 0 rgba(0,0,0,.35) inset,
        0 0 0 1px var(--alu-edge),
        0 4px 0 -1px var(--alu-lo),
        0 8px 14px -8px rgba(0,0,0,.7);
    transition: transform .08s, box-shadow .08s;
}

/* wciśnięcie klawisza */
.key:active {
    transform: translateY(3px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.08) inset,
        0 0 0 1px var(--alu-edge),
        0 1px 0 0 var(--alu-lo),
        0 3px 6px -4px rgba(0,0,0,.7);
}

.key-primary { padding-inline: 1.3rem; }
.key-small { margin-left: auto; font-size: .85rem; color: var(--ink-soft); }

.key-led {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--led-off);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
    transition: background .4s, box-shadow .4s;
}
.device[data-stan="online"] .key-led {
    background: var(--red);
    box-shadow: 0 0 8px var(--red), 0 0 2px #fff inset;
}

.device-caption {
    margin-top: 1.1rem;
    font-size: var(--step--1);
    color: var(--ink-soft);
    max-width: 52ch;
}

/* jednorazowe "włączenie" wyświetlacza przy wejściu na stronę */
@media (prefers-reduced-motion: no-preference) {
    .screen { animation: power-on 1.1s ease-out both; }
    .readout, .readout-grid { animation: readout-in .5s ease-out both; }
    .readout-host { animation-delay: .55s; }
    .readout-state { animation-delay: .7s; }
    .readout-grid { animation-delay: .85s; }

    .device[data-stan="online"] .state-dot { animation: led-breathe 3.2s ease-in-out infinite; }
}

@keyframes power-on {
    0% { filter: brightness(.15); }
    35% { filter: brightness(1.6); }
    45% { filter: brightness(.6); }
    100% { filter: brightness(1); }
}
@keyframes readout-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes led-breathe {
    50% { box-shadow: 0 0 4px var(--green), 0 0 2px #fff inset; }
}

/* ---------- formularz kontaktowy ---------- */
.contact-page { align-items: start; }
.device-form { width: min(520px, 100%); }

.form { display: grid; gap: 1.1rem; }

.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: var(--step--1); color: var(--ink); }

/* pola jak wpuszczone w obudowę szybki wyświetlacza */
.field input,
.field textarea {
    width: 100%;
    padding: .8rem .95rem;
    border: 0;
    border-radius: 10px;
    font: 500 1rem/1.5 var(--font-readout);
    color: var(--term);
    caret-color: var(--term);
    background: radial-gradient(120% 90% at 30% 0%, var(--glass-hi), var(--glass) 70%);
    box-shadow: 0 0 0 2px #0a0d0b, 0 1px 0 3px rgba(255,255,255,.05), inset 0 3px 10px rgba(0,0,0,.7);
    text-shadow: 0 0 6px rgba(61, 255, 122, .35);
    resize: vertical;
}
.field textarea { min-height: 9rem; }
.field input:focus-visible,
.field textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--term-dim), 0 0 16px -2px rgba(61, 255, 122, .45), inset 0 3px 10px rgba(0,0,0,.7);
}
.field [aria-invalid="true"] { box-shadow: 0 0 0 2px var(--red), inset 0 3px 10px rgba(0,0,0,.7); }

.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-actions { display: flex; justify-content: flex-end; margin-top: .3rem; }
.key-send[disabled] { opacity: .6; cursor: wait; }
.form[data-stan="wyslano"] .key-led { background: var(--green); box-shadow: 0 0 8px var(--green), 0 0 2px #fff inset; }
.form[data-stan="wysylanie"] .key-led { background: var(--red); box-shadow: 0 0 8px var(--red); }

.form-status { min-height: 1.5em; font-size: var(--step--1); color: var(--ink-soft); }
.form-status[data-typ="ok"] { color: var(--term); }
.form-status[data-typ="blad"] { color: #ff7b7d; }

/* ---------- nagłówki sekcji ---------- */
.section-head { max-width: 62ch; }
.section-head h2 { font-size: var(--step-3); font-weight: 700; }
.section-head p { margin-top: .9rem; color: var(--ink-soft); }

/* ---------- projekt ---------- */
.project {
    padding-block: clamp(3.5rem, 8vw, 6rem);
    /* frezowany rowek oddzielający sekcję */
    box-shadow: 0 -1px 0 #000 inset, 0 1px 0 rgba(255,255,255,.06) inset;
}

.showcase {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    align-items: start;
}

.shot { margin: 0; }

.shot img {
    border-radius: 12px;
    background: #15120f;
    /* zrzut "wpuszczony" w metalową ramkę */
    box-shadow:
        0 0 0 6px var(--alu),
        0 0 0 7px #3a434a,
        var(--shadow-far);
}

.shot figcaption {
    margin-top: 1rem;
    font-size: var(--step--1);
    color: var(--ink-soft);
}

.shot-main { grid-column: 1 / span 9; }
.shot-phone { grid-column: 10 / span 3; grid-row: 1 / span 2; }
.shot-phone img { border-radius: 22px; }
.shot-admin { grid-column: 2 / span 8; }

/* zrzut jako przycisk otwierający galerię */
.shot-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 12px;
    cursor: zoom-in;
}
.shot-phone .shot-open { border-radius: 22px; }
.shot-open:hover img { filter: brightness(1.08); }
.shot-open img { transition: filter .2s; }

.showcase-hint { display: none; }

/* telefon: zrzuty jako karuzela przewijana palcem */
@media (max-width: 760px) {
    .showcase-hint {
        display: block;
        margin-top: 1.5rem;
        font-size: var(--step--1);
        color: var(--ink-soft);
    }
    .showcase {
        display: flex;
        gap: 1.25rem;
        margin-top: 1rem;
        margin-inline: -1rem;
        padding: .75rem 1rem 1.25rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .showcase::-webkit-scrollbar { display: none; }
    .shot {
        flex: 0 0 86%;
        scroll-snap-align: center;
    }
    .shot-phone { flex-basis: 58%; }
}

/* ---------- galeria na pełnym ekranie ---------- */
.lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: clamp(.75rem, 3vw, 2rem);
    border: 0;
    color: var(--ink);
    background: rgba(5, 6, 7, .96);
}
.lightbox[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 1rem;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }

.lightbox-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.lightbox-counter {
    font-family: var(--font-readout);
    color: var(--term);
    text-shadow: 0 0 8px rgba(61, 255, 122, .45);
}

.lightbox-figure {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .9rem;
    margin: 0;
    min-height: 0;
}
.lightbox-glass {
    display: grid;
    place-items: center;
    min-height: 0;
    /* powiększanie dwoma palcami robi przeglądarka; nie blokujemy go */
    touch-action: pan-x pan-y pinch-zoom;
}
.lightbox-glass img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 0 0 6px var(--alu), 0 0 0 7px #3a434a, var(--shadow-far);
}
.lightbox-figure figcaption {
    text-align: center;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.lightbox-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.lightbox-nav svg { width: 12px; height: 12px; }

@media (prefers-reduced-motion: no-preference) {
    .lightbox[open] .lightbox-glass img { animation: power-on .5s ease-out both; }
}

.specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem clamp(1.5rem, 4vw, 3.5rem);
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
    max-width: 980px;
}

.spec dt {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-1);
    padding-left: .9rem;
    border-left: 3px solid var(--red);
}
.spec dd {
    margin: .45rem 0 0;
    padding-left: calc(.9rem + 3px);
    color: var(--ink-soft);
    max-width: 52ch;
}

@media (max-width: 680px) {
    .specs { grid-template-columns: 1fr; }
}

.project-links {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2.25rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: .85rem 1.35rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
    background: linear-gradient(180deg, var(--alu-hi), var(--alu));
    box-shadow:
        0 1px 0 rgba(255,255,255,.12) inset,
        0 0 0 1px var(--alu-edge),
        0 4px 0 -1px var(--alu-lo),
        0 10px 18px -10px rgba(0,0,0,.7);
    transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 1px var(--alu-edge), 0 1px 0 0 var(--alu-lo); }

/* główny przycisk: czerwony, jak przycisk zasilania */
.btn-primary {
    color: #fff;
    background: linear-gradient(180deg, #e8403f, #a81f25);
    box-shadow:
        0 1px 0 rgba(255,255,255,.25) inset,
        0 0 0 1px #5e0f14,
        0 4px 0 -1px #4d0b10,
        0 10px 18px -10px rgba(0,0,0,.85);
}
.btn-primary:active { box-shadow: 0 0 0 1px #5e0f14, 0 1px 0 0 #4d0b10; }

/* ---------- szafa rack ---------- */
.areas {
    padding-block: clamp(3.5rem, 8vw, 6rem);
    box-shadow: 0 -1px 0 #000 inset, 0 1px 0 rgba(255,255,255,.06) inset;
}

.areas-inner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

@media (max-width: 860px) {
    .areas-inner { grid-template-columns: 1fr; }
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--1);
    color: var(--ink-soft);
}
.legend li { display: inline-flex; align-items: center; gap: .5rem; }

.led {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}
.led-on { background: var(--green); box-shadow: 0 0 9px var(--green), 0 0 2px #fff inset; }
.led-warm { background: var(--red); box-shadow: 0 0 9px var(--red), 0 0 2px #fff inset; }
.led-off { background: var(--led-off); }

.rack {
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #0c0e10, #050606);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.8), 0 0 0 1px #1d2226, var(--shadow-far);
    display: grid;
    gap: 10px;
}

.unit {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1.15rem 1rem;
    border-radius: 8px;
    color: var(--ink);
    background:
        var(--brush),
        linear-gradient(180deg, #30373d, #1f2428);
    box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 -1px 0 rgba(0,0,0,.5) inset, 0 3px 6px rgba(0,0,0,.6);
}

.unit-hole {
    width: 10px;
    height: 18px;
    border-radius: 5px;
    background: #050606;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08);
}

.unit h3 {
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--ink);
}
.unit p {
    margin-top: .3rem;
    color: var(--ink-soft);
    font-size: .98rem;
    max-width: 48ch;
}

.unit-link {
    display: inline-block;
    margin-top: .6rem;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--term);
    text-decoration: none;
    text-shadow: 0 0 8px rgba(61, 255, 122, .35);
}
.unit-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
    .unit { grid-template-columns: auto 1fr; }
    .unit-hole { display: none; }
}

/* ---------- kontakt i stopka ---------- */
.contact {
    padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem);
}
.contact h2 { font-size: var(--step-3); }
.contact p { margin-top: .9rem; color: var(--ink-soft); max-width: 52ch; }

.footer {
    font-size: var(--step--1);
    color: var(--ink-soft);
    background: linear-gradient(180deg, #0c0e10, #060707);
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 #000;
}
.footer-inner {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    padding-block: 2.25rem 2rem;
    text-align: center;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* linki w stopce jako małe wyświetlacze: szybka w grafitowej obudowie, zielony tekst */
.mini-display {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.1rem;
    border-radius: 10px;
    font: 500 .9rem/1 var(--font-readout);
    color: var(--term);
    text-decoration: none;
    text-shadow: 0 0 6px rgba(61, 255, 122, .45);
    background: radial-gradient(120% 90% at 30% 0%, var(--glass-hi), var(--glass) 70%);
    box-shadow:
        0 0 0 3px #0a0d0b,
        0 0 0 5px var(--alu),
        0 0 0 6px var(--alu-edge),
        0 1px 0 6px rgba(255,255,255,.08),
        inset 0 3px 10px rgba(0,0,0,.75),
        0 12px 20px -10px rgba(0,0,0,.9);
    transition: box-shadow .2s, color .2s;
}
.mini-display svg { width: 16px; height: 16px; flex: none; }
.mini-display:hover,
.mini-display:focus-visible,
.mini-display[aria-current="page"] {
    color: #8dffb2;
    box-shadow:
        0 0 0 3px #0a0d0b,
        0 0 0 5px var(--alu),
        0 0 0 6px var(--alu-edge),
        0 1px 0 6px rgba(255,255,255,.08),
        inset 0 3px 10px rgba(0,0,0,.75),
        inset 0 0 18px rgba(61, 255, 122, .12),
        0 12px 20px -10px rgba(0,0,0,.9);
}
.mini-display:focus-visible { outline-offset: 8px; }
.footer-meta { margin: 0; }