/* KS-CYBER — system wizualny wspólny z ops.ks-cyber.pl */
:root {
    --bg:        #0a0a0a;
    --bg-card:   #111312;
    --bg-raised: #161a18;
    --primary:   #00ff41;
    --accent:    #00bfff;
    --warn:      #ffcc00;
    --text:      #e6e6e6;
    --text-dim:  #9aa39d;
    --border:    #1f2622;
    --border-hi: rgba(0, 255, 65, 0.35);
    --maxw:      1120px;
    --radius:    4px;
}

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

/* Siatka siedzi na html, nie na body: tlo elementu glownego propaguje sie na
   kanwe i maluje TAKZE pod paskiem przewijania. Gdy bylo na body::before
   (position:fixed, inset:0), pokrywalo tylko obszar ukladu i przy prawej
   krawedzi zostawal 11-pikselowy pas plaskiego #0a0a0a bez tekstury.
   scrollbar-gutter rezerwuje miejsce po obu stronach, zeby kolumna tresci
   byla wysrodkowana wzgledem OKNA, a nie obszaru pomniejszonego o pasek. */
html {
    scroll-behavior: smooth;
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(0,255,65,.030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,65,.030) 1px, transparent 1px);
    background-size: 48px 48px;
    /* BEZ background-attachment: fixed — przypiecie do obszaru widoku wyklucza
       pas paska przewijania i wlasnie tam robila sie plaska dziura. Przy
       domyslnym 'scroll' tlo elementu glownego maluje cala kanwe, takze pod
       paskiem. Siatka jest regularnym wzorem 48x48, wiec jej przesuwanie
       razem z trescia jest niezauwazalne. */
    scrollbar-gutter: stable both-edges;
}

body {
    margin: 0;
    background: transparent;   /* przepuszcza teksture z html */
    color: var(--text);
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Scanlines — siatke rysuje juz html (patrz wyzej) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.22) 2px 3px);
    opacity: .35;
}

main, header, footer { position: relative; z-index: 1; }

h1, h2, h3, .display {
    font-family: 'VT323', 'Roboto Mono', monospace;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .5px;
    margin: 0 0 .4em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: 0; }
h3 { font-size: 1.5rem; color: var(--primary); }

p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* ---------- nawigacja ---------- */
.topbar {
    border-bottom: 1px solid var(--border);
    background: rgba(10,10,10,.92);
    -webkit-backdrop-filter: blur(6px);   /* Safari < 18 */
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar .wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 62px;
    flex-wrap: wrap;
}
.brand {
    font-family: 'VT323', monospace;
    font-size: 1.7rem;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.brand span { color: var(--text-dim); }
.nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; align-items: center; }
/* :not(.btn) takze tutaj: CTA w nawigacji to <a class="btn">, a ta regula
   (0,1,1) bila `.btn` (0,1,0) i barwila glowny przycisk witryny na szaro —
   wygladal jak przycisk poboczny, mimo zielonej ramki. */
.nav a:not(.btn) { color: var(--text-dim); font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; }
/* :not(.btn) jest tu konieczne, nie kosmetyczne. CTA w nawigacji to <a class="btn">,
   a regula `.nav a:hover` ma wyzsza specyficznosc (0,2,1) niz `.btn:hover` (0,2,0),
   wiec nadpisywala kolor tekstu na zielony — dokladnie ten sam, ktory `.btn:hover`
   ustawia jako TLO. Efekt: pusty zielony prostokat, napis znikal calkowicie. */
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--primary); text-decoration: none; }

/* ---------- przyciski ---------- */
.btn {
    display: inline-block;
    padding: 12px 22px;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
    font-size: .85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius);
    transition: background .15s, color .15s, box-shadow .15s;
}
.btn:hover { background: var(--primary); color: #04140a; text-decoration: none; box-shadow: 0 0 18px rgba(0,255,65,.35); }
.btn-ghost { border-color: var(--border); color: var(--text-dim); }
.btn-ghost:hover { border-color: var(--accent); background: transparent; color: var(--accent); box-shadow: none; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 0; }

/* ---------- sekcje ---------- */
section { padding: 68px 0; border-bottom: 1px solid var(--border); }
section.tight { padding: 44px 0; }
.eyebrow {
    color: var(--accent);
    font-size: .74rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.lead { font-size: 1.12rem; color: var(--text-dim); max-width: 68ch; }

/* ---------- hero ---------- */
.hero { padding: 92px 0 76px; border-bottom: 1px solid var(--border); }
/* 18ch bylo wezsze niz "cyberbezpieczenstwa" (19 znakow), wiec slowo nie
   miescilo sie NIGDY i lamalo sie w srodku. Polskie zlozenia sa dluzsze niz
   angielskie — miara musi je pomiescic. */
.hero h1 { max-width: min(24ch, 100%); }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero .lead { font-size: 1.2rem; color: var(--text); }

/* ---------- karty ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
}
.card:hover { border-color: var(--border-hi); }
.card h3 { font-size: 1.25rem; margin-bottom: .35em; }
.card p { margin: 0; color: var(--text-dim); font-size: .92rem; }
.card .tag { color: var(--accent); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; }

/* okno terminala — element sygnaturowy */
.terminal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.terminal-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: #2c332e; }
.dot.g { background: var(--primary); }
.dot.b { background: var(--accent); }
.terminal-bar .label { margin-left: 8px; color: var(--text-dim); font-size: .76rem; letter-spacing: 1px; }
.terminal-body { padding: 20px; font-size: .9rem; }
.terminal-body .line { color: var(--text-dim); }
.terminal-body .line b { color: var(--primary); font-weight: 400; }

/* ---------- liczby ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.stat { border-left: 2px solid var(--primary); padding: 4px 0 4px 16px; }
.stat .num { font-family: 'VT323', monospace; font-size: 2.6rem; color: var(--primary); line-height: 1; }
.stat .lbl { color: var(--text-dim); font-size: .85rem; }

/* ---------- tabela ---------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 480px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
th { color: var(--accent); font-weight: 400; font-size: .74rem; letter-spacing: 1.5px; text-transform: uppercase; }
tbody tr:hover { background: rgba(0,255,65,.03); }
td.num { color: var(--primary); }

/* ---------- listy ---------- */
ul.check { list-style: none; padding: 0; margin: 0; }
ul.check li { padding-left: 26px; position: relative; margin-bottom: 10px; color: var(--text-dim); }
ul.check li::before { content: '▸'; position: absolute; left: 4px; color: var(--primary); }
ul.check li b { color: var(--text); font-weight: 400; }

/* ---------- FAQ ---------- */
details {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 12px;
    background: var(--bg-card);
}
details[open] { border-color: var(--border-hi); }
summary { cursor: pointer; color: var(--text); font-size: 1rem; }
summary::marker { color: var(--primary); }
details p { margin: 12px 0 0; color: var(--text-dim); }

/* ---------- CTA ---------- */
.cta {
    border: 1px solid var(--border-hi);
    border-radius: var(--radius);
    padding: 34px;
    background: linear-gradient(180deg, rgba(0,255,65,.05), transparent);
}
.cta h2 { margin-bottom: .2em; }

/* ---------- artykuły ---------- */
.article { max-width: 760px; }
.article h2 { margin-top: 1.6em; font-size: 1.9rem; }
.article h3 { margin-top: 1.4em; }
.meta { color: var(--text-dim); font-size: .82rem; margin-bottom: 28px; }
.callout {
    border-left: 2px solid var(--warn);
    background: rgba(255,204,0,.05);
    padding: 14px 18px;
    margin: 24px 0;
    color: var(--text-dim);
}
.callout b { color: var(--warn); font-weight: 400; }

/* ---------- stopka ---------- */
footer { padding: 46px 0 60px; color: var(--text-dim); font-size: .84rem; }
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; margin-bottom: 30px; }
footer h2 { color: var(--text); font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 12px; font-weight: 400; }
footer a { color: var(--text-dim); display: block; margin-bottom: 7px; }

/* WCAG 1.4.1 — link w bloku tekstu nie może być rozpoznawalny wyłącznie po kolorze.
   Cyan na szarym tekście daje kontrast 1,22:1, więc podkreślenie jest tu obowiązkowe. */
main p a:not(.btn), main li a:not(.btn), .callout a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
footer a:hover { color: var(--primary); text-decoration: none; }
.legal { border-top: 1px solid var(--border); padding-top: 20px; font-size: .78rem; }

@media (max-width: 640px) {
    .nav { gap: 12px; }
    .nav a { font-size: .74rem; }
    section { padding: 48px 0; }
    .hero { padding: 60px 0 48px; }
}

/* ═══════════════════════════════════════════════════════════════════
   WARSTWA INTERAKTYWNA — konsola, glitch, poświata
   ═══════════════════════════════════════════════════════════════════ */

/* hero mocniej przykuwa uwagę */
.hero { position: relative; overflow: hidden; }
.hero::after {
    content: '';
    position: absolute;
    top: -40%; left: 50%;
    width: 900px; height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(0,255,65,.09) 0%, transparent 62%);
    pointer-events: none;
    z-index: -1;
}
.hero h1 em {
    position: relative;
    font-style: normal;
    color: var(--primary);
    /* neon: rozpala się przy wejściu, potem nierówno migocze jak zmęczona świetlówka */
    animation: neon-on 1.1s ease-out both, neon-flicker 5s 1.3s infinite steps(1);
}
.hero h1:hover em { animation: glitch .32s steps(2) 2; }

@keyframes neon-on {
    0%   { opacity: .25; text-shadow: none; }
    18%  { opacity: 1;   text-shadow: 0 0 26px rgba(0,255,65,.6); }
    26%  { opacity: .35; text-shadow: none; }
    38%  { opacity: 1;   text-shadow: 0 0 30px rgba(0,255,65,.7); }
    46%  { opacity: .5;  text-shadow: 0 0 8px rgba(0,255,65,.3); }
    100% { opacity: 1;   text-shadow: 0 0 22px rgba(0,255,65,.45); }
}

/* Migotanie świetlówki z rozszczepieniem koloru — jak w efekcie glitch:
   w momencie zawahania kolor ucieka w cyan, a wokół liter pojawia się
   aberracja chromatyczna (cyan z jednej strony, magenta z drugiej). */
@keyframes neon-flicker {
    0%, 19%   { opacity: 1;   color: var(--primary);
                text-shadow: 0 0 22px rgba(0,255,65,.45); }
    20%       { opacity: .5;  color: var(--accent);
                text-shadow: -2px 0 rgba(255,0,68,.9), 2px 0 rgba(0,191,255,.9), 0 0 14px rgba(0,191,255,.5); }
    22%       { opacity: .75; color: var(--accent);
                text-shadow: 2px 0 rgba(255,0,68,.7), -2px 0 rgba(0,191,255,.7); }
    23%, 43%  { opacity: 1;   color: var(--primary);
                text-shadow: 0 0 24px rgba(0,255,65,.5); }
    44%       { opacity: .35; color: var(--accent);
                text-shadow: -3px 0 rgba(255,0,68,1), 3px 0 rgba(0,191,255,1); }
    45%       { opacity: .8;  color: #eaffea;
                text-shadow: 3px 0 rgba(255,0,68,.8), -3px 0 rgba(0,191,255,.8), 0 0 18px rgba(255,255,255,.4); }
    46%       { opacity: 1;   color: var(--primary);
                text-shadow: 0 0 34px rgba(0,255,65,.75); }
    47%, 48%  { opacity: .6;  color: var(--accent);
                text-shadow: 0 0 12px rgba(0,191,255,.45); }
    49%, 71%  { opacity: 1;   color: var(--primary);
                text-shadow: 0 0 22px rgba(0,255,65,.45); }
    72%       { opacity: .55; color: var(--accent);
                text-shadow: -2px 0 rgba(255,0,68,.8), 2px 0 rgba(0,191,255,.8); }
    73%       { opacity: .85; color: var(--primary);
                text-shadow: 0 0 10px rgba(0,255,65,.3); }
    74%, 100% { opacity: 1;   color: var(--primary);
                text-shadow: 0 0 22px rgba(0,255,65,.45); }
}
@keyframes glitch {
    0%   { text-shadow: 0 0 22px rgba(0,255,65,.45); transform: none; }
    25%  { text-shadow: -2px 0 var(--accent), 2px 0 #ff0044; transform: translateX(1px); }
    50%  { text-shadow: 2px 0 var(--accent), -2px 0 #ff0044; transform: translateX(-1px); }
    100% { text-shadow: 0 0 22px rgba(0,255,65,.45); transform: none; }
}

/* nagłówki sekcji z promptem */
section h2::before {
    content: '> ';
    color: var(--primary);
    opacity: .55;
}
.article h2::before, .cta h2::before, footer h2::before { content: none; }

/* migający kursor po dopisanej linii terminala */
.terminal-body .line.typed[data-caret]::after {
    content: '_';
    color: var(--primary);
    animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* karty — przejeżdżający skan przy najechaniu */
.card { position: relative; overflow: hidden; transition: transform .18s, border-color .18s; }
.card::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,255,65,.07), transparent);
    transition: left .55s ease;
    pointer-events: none;
}
.card:hover { transform: translateY(-3px); border-color: var(--border-hi); }
.card:hover::after { left: 130%; }

/* liczniki — poświata */
.stat .num { text-shadow: 0 0 18px rgba(0,255,65,.35); }

/* przycisk główny lekko pulsuje w hero */
.hero .btn:not(.btn-ghost) { animation: pulse 3.4s ease-in-out infinite; }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(0,255,65,0); }
    50%      { box-shadow: 0 0 22px rgba(0,255,65,.28); }
}

/* ── konsola ─────────────────────────────────────────────────────── */
.term-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4,8,5,.82);
    -webkit-backdrop-filter: blur(3px);   /* Safari < 18 */
    backdrop-filter: blur(3px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 16px 0;
    z-index: 900;
}
.term-overlay.open { display: flex; }
.term-window {
    width: min(760px, 100%);
    background: var(--bg-card);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius);
    box-shadow: 0 0 60px rgba(0,255,65,.15);
    overflow: hidden;
}
.term-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
}
.term-close:hover { color: var(--primary); }
.term-out {
    margin: 0;
    padding: 18px 20px;
    min-height: 180px;
    max-height: 46vh;
    overflow-y: auto;
    color: var(--text-dim);
    font-size: .88rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.term-line {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding: 12px 20px;
}
.term-prompt { color: var(--primary); font-size: .86rem; white-space: nowrap; }
.term-in {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-family: inherit;
    font-size: .9rem;
}

/* matrix */
.matrix-canvas {
    position: fixed;
    inset: 0;
    z-index: 800;
    pointer-events: none;
    opacity: .55;
}

/* podpowiedź w stopce */
.hint {
    color: var(--text-dim);
    font-size: .78rem;
    opacity: .75;
}
.hint kbd {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 6px;
    color: var(--primary);
    font-size: .74rem;
}

@media (prefers-reduced-motion: reduce) {
    .hero .btn:not(.btn-ghost), .terminal-body .line.typed[data-caret]::after { animation: none; }
    .hero h1 em { animation: none; text-shadow: 0 0 22px rgba(0,255,65,.45); }
    .card, .card::after { transition: none; }
    .zapytanie input[type=checkbox] { transition: none; }
}

/* ── sekwencja bootowania ─────────────────────────────────────────── */
.boot {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity .4s ease;
}
.boot.out { opacity: 0; pointer-events: none; }
.boot-inner { width: min(620px, 88vw); }
.boot-log {
    margin: 0 0 18px;
    font-size: .88rem;
    line-height: 1.9;
    color: var(--text-dim);
    min-height: 260px;
}
.boot-row { display: block; }
.boot-row.warn { color: var(--warn); }
.boot-row.ready {
    color: var(--primary);
    font-family: 'VT323', monospace;
    font-size: 2rem;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(0,255,65,.5);
}
.boot-bar { height: 2px; background: var(--border); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .18s linear; }
.boot-skip {
    position: absolute;
    right: 22px; bottom: 20px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-family: inherit;
    font-size: .76rem;
    padding: 7px 14px;
    cursor: pointer;
}
.boot-skip:hover { border-color: var(--primary); color: var(--primary); }

/* ═══ warstwa "bardziej hackerska" ═══ */

/* zaznaczenie tekstu — zielone, jak w terminalu */
::selection { background: rgba(0,255,65,.25); color: #eaffea; }

/* pasek przewijania w klimacie */
/* Tor przezroczysty, zeby przepuszczal teksture siatki z html.
   Kciuk w kolorze marki — wczesniej mial --border (#1f2622) i na tle #0a0a0a
   byl praktycznie niewidoczny, przez co nie bylo wiadomo, gdzie sie jest. */
/* Kanwa nie maluje pod paskiem przewijania, wiec zamiast udawac, ze paska nie
   ma, robimy z niego celowa szyne: ton nieco jasniejszy od tla i cienka linia
   oddzielajaca. Wczesniej tor mial dokladnie kolor tla i czytal sie jako
   pusty, martwy pas przy krawedzi. */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track {
    background: #0e1210;
    box-shadow: inset 1px 0 0 var(--border);
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 65, .22);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 65, .45); background-clip: content-box; }
html { scrollbar-color: rgba(0,255,65,.28) transparent; scrollbar-width: thin; }

/* kursor po logo mruga jak w promptcie */
.brand span { animation: blink 1.1s step-end infinite; }

/* CRT: subtelne migotanie scanlines + wolno wędrujący pas */
body::after { animation: crt-flicker 7s ease-in-out infinite; }
@keyframes crt-flicker {
    0%, 100% { opacity: .35; }
    92%      { opacity: .35; }
    93%      { opacity: .48; }
    94%      { opacity: .30; }
    96%      { opacity: .35; }
}
.scanband {
    position: fixed;
    left: 0; right: 0;
    height: 120px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(0,255,65,.028), transparent);
    animation: scanband 9s linear infinite;
}
@keyframes scanband {
    from { top: -140px; }
    to   { top: 100vh; }
}

/* skip-link — niewidoczny do fokusa */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 1000;
    background: var(--bg-card);
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 10px 18px;
    border-radius: var(--radius);
}
.skip-link:focus { left: 16px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
    body::after, .brand span { animation: none; }
    .scanband { display: none; }
}

/* ═══ SELF-HOST FONTS + POGRUBIENIA (bulletproof PL) ═══
   b/strong/.lead-bold jadą Roboto Mono 700 — pełna polszczyzna gwarantowana.
   VT323 zostaje na nagłówkach i elementach ASCII (liczby, brand, terminal). */
b, strong { font-weight: 700; }
.hero .lead b, .lead b, p b, li b, td b, .callout b, summary b { font-weight: 700; }

/* ═══ NAWIGACJA MOBILNA ═══ */
.nav-toggle {
    display: none;
    margin-left: auto;
    width: 42px; height: 38px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 9px 8px;
    flex-direction: column;
    justify-content: space-between;
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--primary);
    transition: transform .22s, opacity .22s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* Ciasniejsza typografia niz w zwyklym .btn — CTA dziedziczyla ja wczesniej
   przypadkiem, z reguly `.nav a`. Teraz jest zapisana wprost, bo od niej zalezy
   szerokosc paska: przy 1040 px (najwezszy widok desktopowy, nizej wchodzi
   hamburger) nawigacja miesci sie w jednej linii z zapasem ~12 px. Szersza
   czcionka albo wieksze odstepy zjadaja ten zapas i pasek lamie sie na dwa
   wiersze — patrz komentarz przy progu ponizej. */
.nav-cta { padding: 8px 16px; font-size: .82rem; letter-spacing: 1px; }

/* Przelacznik jezyka — dwie litery, wiec zamiast przycisku daje mu sie ramke
   w kolorze obramowania. Ma czytac sie jako przelacznik, nie jako kolejna
   pozycja menu, i nie moze konkurowac wizualnie z CTA obok. */
.lang-switch {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 10px;
    line-height: 1;
    color: var(--text-dim);
}
.lang-switch:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* Prog wyznaczony pomiarem, nie na oko: desktopowe menu (6 pozycji + CTA +
   przelacznik jezyka) miesci sie w jednej linii dopiero od ~1050 px — przy
   1040 px marka i menu zachodza na siebie o 8 px. Ustawiamy 1080 px, gdzie
   zostaje 32 px zapasu; ponizej wchodzi hamburger.
   Historia: przy progu 820 px caly zakres 821-1039 px dostawal pasek zawiniety
   na 2-3 wiersze — 149 px, czyli 38% ekranu iPhone'a w poziomie. Po dolozeniu
   wersji EN prog przesunal sie z 1040 na 1080, bo przybyl przelacznik. */
@media (max-width: 1079px) {
    .topbar .wrap { flex-wrap: nowrap; }
    .nav-toggle { display: flex; }
    .nav {
        position: fixed;
        inset: 62px 0 auto 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin: 0;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border-hi);
        padding: 8px 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s ease;
        z-index: 49;
    }
    .nav.open { max-height: 80vh; }
    /* :not(.btn) tak samo jak w regulach bazowych. Bez tego `width: 100%`
       stad (0,1,1) bilo `calc(100% - 40px)` z `.nav-cta` (0,1,0), a marginesy
       20 px i tak sie doliczaly — przycisk wychodzil 40 px poza panel menu
       i jego prawa krawedz znikala za krawedzia ekranu. */
    .nav a:not(.btn) {
        width: 100%;
        padding: 14px 20px;
        font-size: .92rem;
        border-bottom: 1px solid var(--border);
    }
    /* CTA znika z menu mobilnego. Rozwiniete menu zaslania gorna czesc strony,
       a tuz pod nim — okolo 50 px nizej — stoi wlasny przycisk hero. Na pieciu
       z siedmiu stron jest to dokladnie ta sama akcja („Wypróbuj 14 dni za
       darmo", „Zacznij za darmo", „Uruchom pierwszy modul za darmo"), wiec
       uzytkownik na malym ekranie widzial dwa niemal identyczne przyciski
       jeden nad drugim. Pozostale dwie strony (/kontakt/, /testy-penetracyjne/)
       maja w hero wlasciwsze dla siebie CTA — formularz i wycene.
       Na desktopie przycisk zostaje: tam dzieli go od hero cala szerokosc
       paska i czyta sie jako stale wyjscie, nie jako powtorzenie. */
    .nav-cta { display: none; }
}

/* ═══ TYPOGRAFIA MOBILNA — monospace jest szeroki, trzeba zmniejszyć ═══ */
@media (max-width: 640px) {
    body { font-size: 14px; line-height: 1.6; }
    h1 { font-size: clamp(2rem, 11vw, 2.8rem); }
    h2 { font-size: clamp(1.6rem, 7vw, 2rem); }
    h3 { font-size: 1.2rem; }
    .hero { padding: 40px 0 40px; }
    .hero .lead { font-size: 1rem; }
    .lead { font-size: .98rem; }
    section { padding: 40px 0; }
    .cta { padding: 22px 18px; }
    .btn { padding: 11px 18px; font-size: .8rem; }
    .btn-row { gap: 10px; }
    .btn-row .btn { flex: 1 1 auto; text-align: center; }
    .stat .num { font-size: 2.1rem; }
    .term-window { width: 100%; }
    .term-out { font-size: .82rem; }
    .boot-log { font-size: .76rem; }
    .terminal-body { font-size: .8rem; }
}

/* bardzo wąskie ekrany — nie pozwól monospace rozpychać poziomo */
@media (max-width: 380px) {
    h1 {
        font-size: 1.85rem;
        overflow-wrap: break-word;   /* nie word-break — ten tnie zawsze */
        hyphens: auto;               /* dywiz zamiast urwanego wyrazu */
    }
    .hero .lead, .lead { font-size: .94rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   CENNIK — karty planów + kalkulator
   ═══════════════════════════════════════════════════════════════════ */
.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin: 34px 0 0;
    align-items: stretch;
}
.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 22px 22px;
    transition: border-color .18s, transform .18s;
}
.plan:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.plan.featured {
    border-color: var(--primary);
    box-shadow: 0 0 34px rgba(0,255,65,.13);
    background: linear-gradient(180deg, rgba(0,255,65,.05), var(--bg-card) 60%);
}
.plan-badge {
    position: absolute;
    top: -11px; left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #04140a;
    font-size: .66rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    white-space: nowrap;
}
.plan-name {
    color: var(--accent);
    font-size: .74rem;
    letter-spacing: 3px;
    margin-bottom: 14px;
}
.plan-price {
    font-family: 'VT323', monospace;
    line-height: 1;
    color: var(--primary);
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 6px;
}
.plan-price .amount { font-size: 3.6rem; text-shadow: 0 0 22px rgba(0,255,65,.35); }
.plan-price .amount.custom { font-size: 2.3rem; }
.plan-price .cur { font-size: 1.5rem; }
.plan-price .from { font-size: 1.1rem; color: var(--text-dim); margin-right: 2px; }
.plan-unit { color: var(--text-dim); font-size: .82rem; margin-bottom: 20px; }
.plan ul.check { margin-bottom: 22px; }
.plan ul.check li { font-size: .88rem; margin-bottom: 8px; }
.plan-cta { margin-top: auto; text-align: center; }

/* ── kalkulator ── */
.calc {
    margin-top: 34px;
    background: var(--bg-card);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius);
    overflow: hidden;
}
.calc-body { padding: 26px 24px; }
.calc-input label {
    display: block;
    color: var(--text-dim);
    font-size: .84rem;
    margin-bottom: 14px;
}
/* Wysokosc to obszar dotyku, nie grubosc toru. Przy height:4px pudelko
   elementu mialo 4 px i na telefonie suwak byl praktycznie nie do zlapania;
   tor rysujemy przez background-size, wiec wizualnie zostaje cienki. */
.calc-input input[type=range] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 28px;
    background-color: transparent;
    background-image: linear-gradient(to right, var(--primary) 0%, var(--primary) var(--pct,10%), #1f2622 var(--pct,10%), #1f2622 100%);
    background-size: 100% 4px;
    background-position: 0 center;
    background-repeat: no-repeat;
    border-radius: 2px;
    outline: none;
}
/* Firefox rysuje wlasny tor — wygaszamy go, zeby nie dublowal gradientu */
.calc-input input[type=range]::-moz-range-track {
    background: transparent;
    height: 4px;
}
.calc-input input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    box-shadow: 0 0 14px rgba(0,255,65,.55);
}
.calc-input input[type=range]::-moz-range-thumb {
    width: 20px; height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}
.calc-count { margin-top: 14px; color: var(--text-dim); font-size: .88rem; }
/* przelacznik planu w kalkulatorze — dwa segmenty, jak selektor planu w /zamow/ */
.calc-plany { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.calc-plan {
    flex: 1 1 200px;
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.calc-plan:hover { border-color: var(--border-hi); }
.calc-plan.active { border-color: var(--primary); color: var(--text); background: rgba(0,255,65,.06); }
.calc-plan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-plan-name { font-size: .78rem; letter-spacing: 2px; color: var(--accent); }
.calc-plan.active .calc-plan-name { color: var(--primary); }
.calc-plan-desc { font-size: .8rem; }
.calc-count input {
    width: 92px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--primary);
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    padding: 3px 10px;
    text-align: center;
}
.calc-count input:focus { outline: none; border-color: var(--primary); }
.calc-out {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.calc-cell { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.calc-cell.highlight { border-color: var(--border-hi); background: rgba(0,255,65,.04); }
.calc-lbl { color: var(--text-dim); font-size: .76rem; text-transform: uppercase; letter-spacing: 1.5px; }
.calc-lbl b { color: var(--warn); font-weight: 400; }
.calc-upsell {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(255, 204, 0, .10);
    border: 1px solid var(--warn);
    border-radius: var(--radius);
    color: var(--warn);
    font-size: .9rem;
    line-height: 1.55;
}
.calc-upsell b { color: var(--warn); font-weight: 700; }
.calc-upsell-cta { color: #ffdd55; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.calc-val {
    font-family: 'VT323', monospace;
    font-size: 2.3rem;
    color: var(--primary);
    line-height: 1.15;
    margin-top: 4px;
}
.calc-sub { color: var(--text-dim); font-size: .8rem; }

@media (max-width: 640px) {
    .plan-price .amount { font-size: 3rem; }
    .calc-val { font-size: 1.9rem; }
    .calc-body { padding: 20px 16px; }
}

/* ═══ TABELE NA MOBILE — sygnalizacja przewijania ═══
   Sama możliwość scrollowania nie wystarczy: użytkownik musi ją zobaczyć.
   Gradient na krawędzi + podpowiedź znikają, gdy tabela zostanie przesunięta. */
.table-scroll { position: relative; -webkit-overflow-scrolling: touch; }
.table-scroll::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 46px;
    pointer-events: none;
    background: linear-gradient(to left, var(--bg) 10%, transparent);
    opacity: 0;
    transition: opacity .2s;
}
.table-scroll.jest-scroll::after { opacity: 1; }
.table-scroll.na-koncu::after { opacity: 0; }

.scroll-hint {
    display: none;
    color: var(--accent);
    font-size: .74rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 8px 0 0;
    animation: hint-nudge 1.8s ease-in-out infinite;
}
.table-scroll.jest-scroll + .scroll-hint { display: block; }
.table-scroll.na-koncu + .scroll-hint { display: none; }
@keyframes hint-nudge {
    0%, 100% { transform: translateX(0); opacity: .75; }
    50%      { transform: translateX(5px); opacity: 1; }
}

@media (min-width: 861px) { .scroll-hint { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } }

/* ═══ Easter egg: wiadomość widoczna tylko na wydruku ═══ */
@media print {
    body::before, body::after, .scanband, .topbar, footer, .btn-row { display: none !important; }
    body { background: #fff; color: #000; }
    main::after {
        content: 'Wydrukowałeś stronę o cyberbezpieczeństwie. Papieru nie da się zaszyfrować — ks@ks-cyber.pl';
        display: block;
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #000;
        font-size: 10pt;
        font-style: italic;
    }
}

/* ═══ Konsola: szybkie komendy (głównie dla dotyku) ═══ */
.term-quick {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 20px 0;
    border-top: 1px solid var(--border);
}
.term-quick button {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-dim);
    font-family: inherit;
    font-size: .76rem;
    padding: 6px 11px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.term-quick button:hover, .term-quick button:active {
    border-color: var(--primary);
    color: var(--primary);
}

@media (max-width: 640px) {
    .term-overlay { padding: 4vh 10px 0; align-items: flex-start; }
    .term-window { max-height: 88vh; display: flex; flex-direction: column; }
    .term-out { max-height: 46vh; font-size: .78rem; padding: 14px 16px; }
    .term-quick { padding: 10px 16px 0; gap: 6px; }
    .term-quick button { font-size: .72rem; padding: 7px 10px; }
    .term-line { padding: 10px 16px; }
    .term-prompt { font-size: .74rem; }
    .terminal-bar .label { font-size: .68rem; }
}

/* ---------- formularz zapytania ---------- */
.zapytanie {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 780px;
    /* panel jak .terminal — /kontakt/ jako jedyna strona nie używała sygnatury witryny */
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 26px;
}
/* pasek okna wychodzi poza padding na całą szerokość i dokleja się do górnej
   krawędzi; formularze bez paska zachowują normalny padding u góry */
.zapytanie > .terminal-bar { margin: -26px -26px 4px; }

/* align-items:end wyrównuje dolne krawędzie pól, więc etykieta zawinięta
   do dwóch wierszy nie zsuwa już swojego inputu w dół względem sąsiadów */
.zapytanie .pola {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: end;
    gap: 18px;
}
.zapytanie .pole { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.zapytanie label { color: var(--text); font-size: .86rem; }
.zapytanie .opc { color: var(--text-dim); }
.zapytanie input[type=text], .zapytanie input[type=email],
.zapytanie input[type=tel], .zapytanie textarea {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: .92rem;
    padding: 11px 13px;
    width: 100%;
}
.zapytanie textarea { resize: vertical; min-height: 110px; }
.zapytanie input:focus, .zapytanie textarea:focus {
    outline: none;
    border-color: var(--border-hi);
    box-shadow: 0 0 0 3px rgba(0, 255, 65, .12);
}
.zapytanie input:focus-visible, .zapytanie textarea:focus-visible,
.zapytanie button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.zapytanie input[aria-invalid="true"] { border-color: #ff4d6a; }

.zapytanie .uslugi { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 0; }
.zapytanie legend { color: var(--text); font-size: .86rem; padding: 0 6px; }
.zapytanie .checki {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    align-items: start;
    gap: 4px 18px;
    margin-top: 8px;
}
.zapytanie .checki label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;      /* cel dotykowy WCAG 2.5.8 — było 23 px */
    padding: 2px 0;
    color: var(--text-dim);
    cursor: pointer;
}
.zapytanie .checki label:hover { color: var(--text); }
/* accent-color barwi pole dopiero po zaznaczeniu — niezaznaczone zostawały
   białymi kwadratami i przykuwały wzrok mocniej niż etykiety obok. */
.zapytanie input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    flex: none;
    background-color: var(--bg);
    border: 1px solid var(--border-hi);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color .15s;
}
.zapytanie input[type=checkbox]:hover { border-color: var(--primary); }
.zapytanie input[type=checkbox]:checked { border-color: var(--primary); }
/* Ptaszek jako background-image, nie ::after — Firefox nie renderuje
   pseudoelementow na <input> (element zastapiony), wiec zaznaczenie byloby
   tam niewidoczne. background-image dziala we wszystkich silnikach. */
.zapytanie input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2300ff41' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.6 3.6L13 4.6'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.zapytanie .zgoda { margin: 0; }
.zapytanie .zgoda label { display: flex; align-items: flex-start; gap: 10px; color: var(--text-dim); cursor: pointer; font-size: .84rem; line-height: 1.6; }

/* honeypot — poza ekranem, ale nie display:none (boty to wykrywają) */
.zapytanie .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.zapytanie .status { margin: 0; font-size: .88rem; display: none; }
.zapytanie .status.widoczny { display: block; }
.zapytanie .status.ok { color: var(--primary); }
.zapytanie .status.blad { color: #ff4d6a; }
.zapytanie button[disabled] { opacity: .55; cursor: progress; }

@media (max-width: 640px) {
    .zapytanie .checki { grid-template-columns: 1fr; }
}

/* ---------- wyjścia z kalkulatora (pozyskiwanie leadów) ---------- */
.calc-akcja {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
}
.calc-akcja-lub { color: var(--text-dim); font-size: .88rem; }
.zapytanie.calc-form { margin-top: 16px; gap: 16px; }
.zapytanie.calc-form .pola { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.calc-noscript { color: var(--text-dim); font-size: .86rem; margin: 0; }

/* ---------- formularz w CTA końcowym ---------- */
/* bez auto-centrowania: formularz musi trzymać lewą krawędź z h2 i leadem w .cta */
.zapytanie.cta-form { margin: 26px 0 0; gap: 18px; }
.cta-kanaly { color: var(--text-dim); font-size: .86rem; margin: 0; }

/* alternatywa dla bramki na materiał — widoczna PRZED wysłaniem formularza,
   inaczej ktoś, kto nie chce zostawiać adresu, wpisuje zmyślony (09.09) */
.cta-bez-adresu { color: var(--text-dim); font-size: .86rem; margin: 0; }

/* link do materiału pokazywany zaraz po wysyłce, obok komunikatu */
.status-plik { display: inline-block; margin-top: 6px; font-weight: 600; }

/* podpowiedź pod etykietą — etykieta nazywa pole, hint podaje przykład */
.zapytanie .hint { color: var(--text-dim); font-size: .82rem; line-height: 1.5; margin: -2px 0 2px; }
.wymagane { color: var(--text-dim); font-size: .84rem; margin-top: 18px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* logo przy danych rejestrowych — jedyne miejsce, gdzie znak pojawia sie
   na stronie; w naglowku zostaje wordmark, bo nalezy do jezyka terminala */
/* Tryb wysokiego kontrastu Windows usuwa obrazy tla, wiec ptaszek rysowany
   przez background-image zniknalby i stan zaznaczenia bylby nie do odczytania.
   Oddajemy wtedy pole systemowi — natywny checkbox HCM renderuje poprawnie. */
@media (forced-colors: active) {
    .zapytanie input[type=checkbox] {
        appearance: auto;
        -webkit-appearance: auto;
        background-image: none;
    }
}

/* ---------- urządzenia dotykowe ---------- */
/* Safari na iOS przybliża stronę, gdy pole ma font-size < 16px — użytkownik
   dotyka pola, widok skacze i trzeba odszczypywać. Na wskaźniku gruboziarnistym
   podnosimy pola do 16px; na desktopie zostaje gęstsza typografia projektu. */
@media (pointer: coarse) {
    .zapytanie input[type=text],
    .zapytanie input[type=email],
    .zapytanie input[type=tel],
    .zapytanie textarea,
    .calc-count input,
    .term-in {
        font-size: 16px;
    }
    /* cel dotykowy zgodny z wytycznymi iOS (44px) */
    .nav-toggle { min-width: 44px; min-height: 44px; }
}

/* ── Baner zgody na ciasteczka ─────────────────────────────────────────────
   Pas przy dolnej krawędzi, nie modal: nie blokuje czytania i nie wymusza
   decyzji przed obejrzeniem strony. Bez przesuwania układu — position: fixed,
   więc nie generuje CLS. */
.ciasteczka {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--bg-card);
    border-top: 1px solid var(--border-hi);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .6);
    transform: translateY(100%);
    transition: transform .25s ease;
}
.ciasteczka.widoczny { transform: translateY(0); }
.ciasteczka-tresc {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.ciasteczka-tresc p {
    margin: 0;
    flex: 1 1 320px;
    font-size: .85rem;
    color: var(--text-dim);
    line-height: 1.6;
}
.ciasteczka-tresc strong { color: var(--text); }
.ciasteczka-akcje { display: flex; gap: 12px; flex-wrap: wrap; }
.ciasteczka-akcje .btn { white-space: nowrap; }

@media (max-width: 620px) {
    .ciasteczka-tresc { padding: 14px 18px; gap: 14px; }
    /* Na wąskim ekranie przyciski na całą szerokość — cel dotykowy 44 px */
    .ciasteczka-akcje { width: 100%; }
    .ciasteczka-akcje .btn { flex: 1 1 0; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ciasteczka { transition: none; }
}