/**
 * Styl titulní stránky. Doplňuje `styl.css` — tokeny, písma,
 * tlačítka, pásy a otázky bere odtamtud.
 *
 * Animace jsou čisté CSS. Scéna v hlavičce je smyčka 12 s, ve které se všechny
 * části řídí stejným časem: řádky na počítači, žádost v telefonu a prst.
 * Při `prefers-reduced-motion` se zastaví v konečném stavu.
 */

.ik {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

/* ── 1. Hlavička ────────────────────────────────────────────────────────── */

.n-hero {
    width: min(100% - 2.5rem, var(--ram));
    margin-inline: auto;
    padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.n-hero__nadpis {
    font-size: clamp(2.6rem, 5.6vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin-top: 1.1rem;
}

.n-hero__nadpis em {
    font-style: normal;
    color: var(--znacka-svit);
}

.n-hero__uvod {
    margin-top: 1.5rem;
    max-width: 46ch;
    font-size: 1.2rem;
    color: var(--text-2);
}

.n-hero__akce {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.n-hero__zdarma {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-2);
}

.n-hero__zdarma b {
    color: var(--znacka-svit);
    font-weight: 600;
}

.n-hero__zdarma .ik {
    color: var(--znacka-svit);
}

.n-plosiny {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.n-plosiny li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--linka);
    border-radius: 999px;
    background: var(--tma-2);
    color: var(--text-2);
    font-size: 0.85rem;
}

.n-plosiny .ik {
    color: var(--znacka);
}

/* Scéna: počítač vlevo, telefon přes jeho pravý okraj, mezi nimi kanál. */
.n-scena {
    margin: 0;
    position: relative;
    aspect-ratio: 1.12;
}

.n-pc {
    position: absolute;
    left: 0;
    top: 8%;
    width: 74%;
}

.n-pc__obrazovka {
    background: var(--tma-2);
    border: 1px solid var(--linka-svetla);
    border-radius: 12px;
    aspect-ratio: 16 / 10.5;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}

.n-pc__podstavec {
    width: 100%;
    height: 12px;
    background: linear-gradient(var(--linka-svetla), var(--tma-3));
    border-radius: 0 0 14px 14px;
}

.n-pc__lista {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--linka);
    font-family: var(--pismo-mono);
    font-size: 0.7rem;
    color: var(--text-3);
}

.n-pc__lista i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--linka-svetla);
}

.n-pc__lista span {
    margin-left: 0.5rem;
}

.n-pc__vypis {
    padding: 0.9rem 1rem;
    font-family: var(--pismo-mono);
    font-size: clamp(0.66rem, 1.05vw, 0.8rem);
    line-height: 1.9;
    color: var(--text);
}

.n-zadani {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--linka);
    color: var(--text);
}

.n-zadani b {
    color: var(--znacka-svit);
    font-weight: 400;
}

.n-odkud {
    white-space: nowrap;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--znacka-tlum);
    color: var(--znacka-svit);
    font-size: 0.85em;
}

.n-r b {
    font-weight: 400;
}

.n-r .z,
.n-r b.z {
    color: var(--znacka-svit);
}

.n-r--cek {
    color: var(--jantar);
}

.n-diff {
    color: var(--text-3);
}

.n-kanal {
    position: absolute;
    left: 50%;
    right: 34%;
    top: 58%;
    z-index: 1;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--znacka) 0 6px, transparent 6px 12px);
    opacity: 0.55;
}

.n-kanal span {
    position: absolute;
    top: -4px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--znacka-svit);
    box-shadow: 0 0 14px var(--znacka-svit);
    opacity: 0;
}

.n-mobil {
    position: absolute;
    right: 0;
    top: 0;
    width: 36%;
}

.n-mobil__ram {
    position: relative;
    border-radius: 28px;
    padding: 7px;
    background: #1b2421;
    border: 1px solid var(--linka-svetla);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.n-mobil__ram img {
    width: 100%;
    height: auto;
    border-radius: 22px;
}

/* Displej telefonu: rozměry překryvů jsou v procentech snímku (600 × 1304). */
.n-displej {
    position: relative;
    container-type: inline-size;
}

.n-psani {
    position: absolute;
    left: 14.7%;
    width: 70.7%;
    top: 85.9%;
    height: 4.4%;
    display: flex;
    align-items: center;
    padding-inline: 4cqw;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e3e6e5;
    color: #111;
    font-family: var(--pismo);
    font-size: 3.4cqw;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
}

.n-psani__text {
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
}

.n-psani__kurzor {
    width: 1px;
    height: 1.2em;
    margin-left: 1px;
    background: #1fac86;
    flex: none;
}

.n-odeslat {
    position: absolute;
    left: 87.3%;
    top: 86.1%;
    width: 10%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1fac86;
    opacity: 0;
}

.n-odeslat svg {
    width: 55%;
    fill: none;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Žádost o svolení — kopíruje kartu z aplikace, jantarová znamená „chce to vás". */
.n-oznameni {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 7%;
    padding: 0.7rem 0.75rem 0.75rem;
    border-radius: 14px;
    background: rgba(20, 29, 26, 0.94);
    backdrop-filter: blur(10px);
    border: 1px solid var(--jantar);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
    font-size: clamp(0.58rem, 0.9vw, 0.74rem);
    line-height: 1.35;
    opacity: 0;
}

.n-oznameni__hlava {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-2);
}

.n-oznameni__ikona {
    display: grid;
    place-items: center;
    width: 1.3em;
    height: 1.3em;
    border-radius: 5px;
    background: var(--znacka);
    color: #04120d;
    font-weight: 800;
    font-family: var(--pismo-display);
}

.n-oznameni__kdy {
    margin-left: auto;
    color: var(--text-3);
}

.n-oznameni__co {
    margin-top: 0.35rem;
    font-weight: 600;
    color: var(--jantar);
}

.n-oznameni code {
    display: block;
    margin-top: 0.2rem;
    color: var(--text);
}

.n-oznameni__akce {
    position: relative;
    margin-top: 0.55rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.n-oznameni__akce span {
    text-align: center;
    padding: 0.35rem 0;
    border-radius: 8px;
    font-weight: 600;
}

.n-oznameni__ne {
    border: 1px solid var(--linka-svetla);
    color: var(--text-2);
}

.n-oznameni__ano {
    background: var(--znacka);
    color: #04120d;
}

/* Po klepnutí se tlačítka slijí do jednoho „Povoleno"; pak žádost odjede nahoru. */
.n-oznameni__hotovo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 8px;
    background: var(--znacka);
    color: #04120d;
    font-weight: 700;
    opacity: 0;
}

.n-prst {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18);
    right: 18%;
    top: 26%;
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .n-zadani { animation: n-zadani 14s infinite; }
    .n-r1 { animation: n-r1 14s infinite; }
    .n-r2 { animation: n-r2 14s infinite; }
    .n-r3 { animation: n-r3 14s infinite; }
    .n-r4 { animation: n-r4 14s infinite; }
    .n-r5 { animation: n-r5 14s infinite; }
    .n-r6 { animation: n-r6 14s infinite; }
    .n-psani { animation: n-psani 14s infinite; }
    .n-psani__text { animation: n-pise 14s infinite; }
    .n-psani__kurzor { animation: k-blik 0.8s steps(1) infinite; }
    .n-odeslat { animation: n-odeslat 14s infinite; }
    .n-kanal span { animation: n-puls 14s infinite; }
    .n-oznameni { animation: n-oznameni 14s infinite; }
    .n-oznameni__hotovo { animation: n-hotovo 14s infinite; }
    .n-prst { animation: n-prst 14s infinite; }
}

/* Časy ve smyčce 14 s:
   0,3–2,8 s píše se úkol · 3,0 s odeslat · 3,0–3,6 s úkol letí do počítače
   3,6 s zadání v terminálu · 4,3 / 5,1 s čte, upravuje · 5,9 s čeká na svolení
   5,9–6,5 s žádost letí do telefonu · 6,5 s upozornění · 7,6–8,2 s klepnutí
   8,2 s Povoleno · 8,3–8,9 s svolení letí zpátky · 9,0 / 10,0 / 11,0 s dál
   13,3 s vše zmizí a jde se od začátku. */
@keyframes n-psani { 0%, 1% { opacity: 0; } 2%, 22% { opacity: 1; } 23.5%, 100% { opacity: 0; } }
@keyframes n-pise { 0%, 2% { max-width: 0; } 20%, 100% { max-width: 100%; } }
@keyframes n-odeslat { 0%, 6% { opacity: 0; transform: none; } 8%, 20.5% { opacity: 1; transform: none; } 21.5% { opacity: 1; transform: scale(0.82); } 22.5% { opacity: 1; transform: none; } 24%, 100% { opacity: 0; } }
@keyframes n-zadani { 0%, 25.5% { opacity: 0; transform: translateY(4px); } 27%, 95% { opacity: 1; transform: none; } 98.5%, 100% { opacity: 0; } }
@keyframes n-r1 { 0%, 30% { opacity: 0; transform: translateY(4px); } 32%, 95% { opacity: 1; transform: none; } 98.5%, 100% { opacity: 0; } }
@keyframes n-r2 { 0%, 35.5% { opacity: 0; transform: translateY(4px); } 37.5%, 95% { opacity: 1; transform: none; } 98.5%, 100% { opacity: 0; } }
@keyframes n-r3 { 0%, 41.5% { opacity: 0; transform: translateY(4px); } 43.5%, 95% { opacity: 1; transform: none; } 98.5%, 100% { opacity: 0; } }
@keyframes n-r4 { 0%, 63.5% { opacity: 0; transform: translateY(4px); } 65.5%, 95% { opacity: 1; transform: none; } 98.5%, 100% { opacity: 0; } }
@keyframes n-r5 { 0%, 71% { opacity: 0; transform: translateY(4px); } 73%, 95% { opacity: 1; transform: none; } 98.5%, 100% { opacity: 0; } }
@keyframes n-r6 { 0%, 78% { opacity: 0; transform: translateY(4px); } 80%, 95% { opacity: 1; transform: none; } 98.5%, 100% { opacity: 0; } }

/* Tři cesty kanálem: úkol z telefonu (21,5–26 %), žádost do telefonu (42–46,5 %),
   svolení zpátky (59–63,5 %). Vlevo je počítač, vpravo telefon. */
@keyframes n-puls {
    0%, 21% { opacity: 0; left: calc(100% - 10px); }
    21.5% { opacity: 1; left: calc(100% - 10px); }
    26% { opacity: 1; left: 0; }
    26.5%, 41.5% { opacity: 0; left: 0; }
    42% { opacity: 1; left: 0; }
    46.5% { opacity: 1; left: calc(100% - 10px); }
    47%, 58.5% { opacity: 0; left: calc(100% - 10px); }
    59% { opacity: 1; left: calc(100% - 10px); }
    63.5% { opacity: 1; left: 0; }
    64%, 100% { opacity: 0; left: 0; }
}

@keyframes n-oznameni {
    0%, 46% { opacity: 0; transform: translateY(-14px) scale(0.97); }
    49%, 64% { opacity: 1; transform: none; }
    68%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes n-hotovo {
    0%, 57.5% { opacity: 0; }
    59%, 100% { opacity: 1; }
}

@keyframes n-prst {
    0%, 52% { opacity: 0; transform: translate(10px, 30px) scale(1.2); }
    55% { opacity: 1; transform: translate(0, 0) scale(1.2); }
    57.5% { opacity: 1; transform: scale(0.8); }
    59% { opacity: 1; transform: scale(1); }
    61.5%, 100% { opacity: 0; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .n-oznameni,
    .n-oznameni__hotovo {
        opacity: 1;
    }
}

/* ── 2. Problém → řešení ────────────────────────────────────────────────── */

.n-bolesti {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
}

/* Karty sdílejí řádky mřížky (subgrid): kresba, problém i zelená odpověď jsou
   ve všech kartách v řadě stejně vysoké, i když se text zalomí jinak. */
.n-bolest {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
    border: 1px solid var(--linka);
    border-radius: var(--polomer-velky);
    background: var(--tma-2);
    overflow: hidden;
}

.n-bolest__bez {
    padding: 1.75rem 1.75rem 1.6rem;
    font-family: var(--pismo-display);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--text);
}

.n-bolest__s {
    padding: 1.5rem 1.75rem 1.9rem;
    border-top: 1px dashed var(--linka-svetla);
    background: var(--znacka-tlum);
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.6;
}

.n-bolest__znacka {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--pismo-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--znacka-svit);
}

/* Malé kresby. Každá má 240 px na výšku — karta je pak na výšku jako telefon —
   a jednu věc, která se hýbe. */
.n-kresba {
    position: relative;
    height: 240px;
    background:
        radial-gradient(circle at 50% 120%, rgba(224, 164, 92, 0.1), transparent 60%),
        var(--tma-3);
    border-bottom: 1px solid var(--linka);
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: var(--pismo-mono);
}

.k-term {
    width: 82%;
    padding: 0.9rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--linka-svetla);
    background: var(--tma);
    font-size: 0.8rem;
    line-height: 1.8;
    color: var(--text-2);
}

.k-term b {
    color: var(--jantar);
    font-weight: 500;
}

.k-volby {
    color: var(--text);
}

.k-kurzor {
    display: inline-block;
    width: 7px;
    height: 1em;
    margin-left: 4px;
    vertical-align: -2px;
    background: var(--text-2);
}

.k-hodiny {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem 0.2rem 0.25rem;
    border-radius: 999px;
    background: var(--jantar-tlum);
    color: var(--jantar);
    font-size: 0.72rem;
}

.k-hodiny svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
}

.k-rucicka,
.k-rucicka2 {
    transform-origin: 20px 20px;
}

.k-pc {
    position: absolute;
    left: 14%;
    top: 26%;
    width: 42%;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--linka-svetla);
    border-radius: 6px;
    background: var(--tma);
    display: grid;
    place-items: center;
}

.k-otaznik {
    font-family: var(--pismo-display);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-3);
}

/* Nápad daleko od počítače. */
.k-zarovka {
    position: absolute;
    left: 16%;
    top: 26%;
    width: 84px;
}

.k-zarovka svg {
    width: 100%;
    fill: rgba(224, 164, 92, 0.12);
    stroke: var(--jantar);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.k-pc--daleko {
    left: auto;
    right: 12%;
    top: 40%;
    width: 34%;
}

.k-zzz {
    color: var(--text-3);
    font-size: 0.9rem;
}

.k-zzz i {
    font-style: normal;
    font-size: 0.8em;
    margin-left: 1px;
}

/* Okno terminálu, ze kterého z dálky nic nepřečtete. */
.k-okno {
    width: 74%;
    padding: 0.5rem 0.7rem 0.8rem;
    border: 1px solid var(--linka-svetla);
    border-radius: 8px;
    background: var(--tma);
}

.k-okno__lista {
    display: flex;
    gap: 4px;
    margin-bottom: 0.6rem;
}

.k-okno__lista i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--linka-svetla);
}

.k-radek {
    height: 6px;
    margin-top: 10px;
    border-radius: 3px;
    background: var(--text-3);
}

.k-radek--a { width: 70%; }
.k-radek--b { width: 52%; background: var(--znacka); }
.k-radek--c { width: 84%; }
.k-radek--d { width: 38%; background: var(--jantar); }

.k-okno--rozmazane {
    filter: blur(2.5px);
}

.n-kresba--nevim .k-otaznik {
    position: absolute;
    right: 14%;
    top: 16%;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--jantar-tlum);
    color: var(--jantar);
    font-size: 1.1rem;
}

/* Prohlížeč s localhostem, který se nenačte. */
.k-prohlizec {
    width: 82%;
    padding: 0.55rem;
    border: 1px solid var(--linka-svetla);
    border-radius: 10px;
    background: var(--tma);
    text-align: center;
}

.k-prohlizec__adresa {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: var(--tma-3);
    font-size: 0.66rem;
    color: var(--text-2);
}

.k-prohlizec__adresa svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: var(--jantar);
    stroke-width: 2;
    stroke-linecap: round;
}

.k-prohlizec__chyba {
    margin-top: 0.85rem;
    font-family: var(--pismo);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
}

.k-prohlizec__kod {
    margin: 0.2rem 0 0.4rem;
    font-size: 0.58rem;
    color: var(--text-3);
}

@media (prefers-reduced-motion: no-preference) {
    .k-kurzor { animation: k-blik 1s steps(1) infinite; }
    .k-rucicka { animation: k-tik 4s linear infinite; }
    .k-rucicka2 { animation: k-tik 48s linear infinite; }
    .k-okno--rozmazane { animation: k-zaostri 5s ease-in-out infinite; }
    .n-kresba--nevim .k-otaznik { animation: k-tecka 2.4s infinite; }
    .k-zarovka { animation: k-svit 2.4s ease-in-out infinite; }
    .k-zzz { animation: k-spi 3s ease-in-out infinite; }
    .k-prohlizec__adresa svg { animation: k-tecka 2s infinite; }
}

@keyframes k-blik { 50% { opacity: 0; } }
@keyframes k-tik { to { transform: rotate(360deg); } }
@keyframes k-tecka { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes k-zaostri { 0%, 100% { filter: blur(3px); } 45%, 55% { filter: blur(1.2px); } }
@keyframes k-svit { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 12px rgba(224, 164, 92, 0.7)); } }
@keyframes k-spi { 0%, 100% { transform: translateY(2px); opacity: 0.5; } 50% { transform: translateY(-3px); opacity: 1; } }

/* ── 3. Odpoledne bez a s codenem ──────────────────────────────────────── */

.n-den {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--linka);
    border-radius: var(--polomer-velky);
    background: var(--tma);
}

.n-den__osa {
    display: flex;
    justify-content: space-between;
    font-family: var(--pismo-mono);
    font-size: 0.72rem;
    color: var(--text-3);
    margin-bottom: 0.75rem;
}

.n-den__stitek {
    margin: 1rem 0 0.45rem;
    font-weight: 600;
    color: var(--text-2);
}

.n-den__stitek--s {
    color: var(--znacka-svit);
}

.n-den__pruh {
    display: grid;
    grid-template-columns: 9fr 22fr 7fr 14fr 8fr 40fr;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    gap: 2px;
}

.n-den__pruh i {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-style: normal;
}

.n-den__pruh--s {
    grid-template-columns: 9fr 1.5fr 20fr 1.5fr 24fr 1.5fr 30fr 12fr;
}

.n-den__pruh b {
    font-weight: 500;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: 0.4rem;
}

.n-den .p {
    background: var(--znacka);
}

.n-den .c {
    background: repeating-linear-gradient(-45deg, rgba(224, 164, 92, 0.32) 0 6px, rgba(224, 164, 92, 0.16) 6px 12px);
    color: var(--jantar);
}

.n-den .h {
    background: var(--tma-3);
    color: var(--znacka-svit);
}

.n-den__legenda {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.85rem;
    color: var(--text-2);
}

.n-den__legenda li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.n-den__legenda i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

/* Pruhy se při posunu „vyplní" zleva doprava. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .n-den__pruh {
            animation: n-vypln linear both;
            animation-timeline: view();
            animation-range: entry 20% cover 45%;
        }
    }
}

@keyframes n-vypln {
    from { clip-path: inset(0 100% 0 0 round 10px); }
    to { clip-path: inset(0 0 0 0 round 10px); }
}

/* ── 4. Ukázka ──────────────────────────────────────────────────────────── */

.n-video {
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    max-width: 900px;
    border-radius: var(--polomer-velky);
    overflow: hidden;
    border: 1px solid var(--linka-svetla);
    box-shadow: 0 40px 100px -40px rgba(31, 172, 134, 0.35);
}

.n-video img,
.n-video video {
    width: 100%;
    height: auto;
}

/* ── 5. Server a klienti ────────────────────────────────────────────────── */

.n-uzly {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.n-uzel {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--linka);
    border-radius: var(--polomer);
    background: var(--tma);
}

.n-uzel b {
    display: block;
    font-weight: 600;
}

.n-uzel small {
    display: block;
    color: var(--text-3);
    font-size: 0.82rem;
    line-height: 1.4;
}

.n-uzel__ikona {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 11px;
    background: var(--znacka-tlum);
    color: var(--znacka-svit);
    font-size: 1.25rem;
}

.n-uzly--radek {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Mapa: počítač | dvě linky | klienti. */
.n-mapa {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 0.75fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
}

.n-mapa__pocitac {
    position: relative;
    padding: 0.75rem 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--linka-svetla);
    border-radius: 20px;
    /* Kovová skříň: světlejší horní hrana, tmavnoucí dolů. */
    background: linear-gradient(180deg, #232a27 0%, #151a18 18%, #101412 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 -2px 0 rgba(0, 0, 0, 0.5),
        0 30px 80px -40px rgba(31, 172, 134, 0.45);
}

/* Nožičky skříně. */
.n-mapa__pocitac::before,
.n-mapa__pocitac::after {
    content: "";
    position: absolute;
    bottom: -0.55rem;
    width: 18%;
    height: 0.55rem;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(#1a201d, #0b0e0d);
    border: 1px solid var(--linka);
    border-top: 0;
}

.n-mapa__pocitac::before { left: 9%; }
.n-mapa__pocitac::after { right: 9%; }

.n-mapa__titulek {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.1rem 0.3rem 0.7rem;
    font-family: var(--pismo-display);
    font-weight: 600;
    font-size: 1.05rem;
}

/* Kontrolka napájení. */
.n-skrin__led {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--znacka-svit);
    box-shadow: 0 0 8px var(--znacka-svit), 0 0 2px #fff inset;
}

/* Větrací mřížka vpravo nahoře. */
.n-skrin__mrizka {
    flex: 1;
    max-width: 7rem;
    height: 0.8rem;
    margin-left: auto;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0 3px, transparent 3px 7px);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* Prosklený bok: tmavé sklo s odleskem a šroubky v rozích. */
.n-skrin__sklo {
    position: relative;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 10px 10px, #3a423e 2px, transparent 2.5px),
        radial-gradient(circle at calc(100% - 10px) 10px, #3a423e 2px, transparent 2.5px),
        radial-gradient(circle at 10px calc(100% - 10px), #3a423e 2px, transparent 2.5px),
        radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #3a423e 2px, transparent 2.5px),
        #080b0a;
    box-shadow: inset 0 0 0 4px #0d1110, inset 0 6px 20px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.n-skrin__sklo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.05) 42%, transparent 52%);
}

/* coden Server jako obal: zelený rámeček, uvnitř Agent a projekt vedle sebe. */
.n-obal {
    padding: 0.8rem;
    border: 1.5px solid rgba(31, 172, 134, 0.55);
    border-radius: 16px;
    background: var(--znacka-tlum);
    box-shadow: inset 0 0 30px -12px rgba(31, 172, 134, 0.5);
}

.n-obal__hlava {
    margin: 0 0 0.7rem 0.1rem;
    color: var(--znacka-svit);
    font-weight: 600;
}

.n-obal__vnitrek {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(2rem, 12%, 4.5rem) minmax(0, 1fr);
    align-items: center;
}

@media (max-width: 480px) {
    .n-skrin__sklo,
    .n-obal {
        padding: 0.6rem;
    }

    .n-obal__vnitrek .n-vrstva {
        padding-inline: 0.3rem;
        font-size: 0.92rem;
        white-space: nowrap;
    }
}

.n-vrstva {
    margin: 0;
    padding: 1rem 0.6rem;
    text-align: center;
    font-weight: 600;
    border-radius: 12px;
    background: var(--tma-3);
    border: 1px solid var(--linka);
}

/* Agent ↔ projekt: vodorovná spojnice uvnitř obalu, tečky běží oběma směry. */
.n-prace {
    position: relative;
    height: 2px;
    margin-inline: 0.35rem;
    background: var(--linka-svetla);
}

.n-prace::before,
.n-prace::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 6px;
    height: 6px;
    border-top: 2px solid var(--linka-svetla);
}

.n-prace::before {
    left: 0;
    border-left: 2px solid var(--linka-svetla);
    transform: rotate(-45deg);
}

.n-prace::after {
    right: 0;
    border-right: 2px solid var(--linka-svetla);
    transform: rotate(45deg);
}

.n-prace i {
    position: absolute;
    top: -3px;
    left: 45%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.n-prace i:nth-child(2) {
    background: var(--znacka-svit);
    box-shadow: 0 0 10px var(--znacka-svit);
}

@media (prefers-reduced-motion: no-preference) {
    .n-prace i { animation: n-k-projektu 1.8s ease-in-out infinite; }
    .n-prace i:nth-child(2) { animation-name: n-k-agentovi; animation-delay: -0.9s; }
}

@keyframes n-k-projektu {
    from { left: 0; opacity: 0; }
    20%, 80% { opacity: 1; }
    to { left: calc(100% - 8px); opacity: 0; }
}

@keyframes n-k-agentovi {
    from { left: calc(100% - 8px); opacity: 0; }
    20%, 80% { opacity: 1; }
    to { left: 0; opacity: 0; }
}


.n-vrstva--kod {
    border-style: dashed;
}

.n-mapa__spoje {
    display: grid;
    gap: 1.4rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-2);
}

.n-spoj p {
    margin: 0.35rem 0;
}

.n-spoj--tam p {
    color: var(--jantar);
}

.n-spoj__cara {
    position: relative;
    height: 2px;
    background: var(--linka-svetla);
}

/* Šipka na konci linky ukazuje směr. */
.n-spoj__cara::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--linka-svetla);
    border-left: 2px solid var(--linka-svetla);
}

.n-spoj--tam .n-spoj__cara::after {
    left: 0;
    transform: rotate(-45deg);
}

.n-spoj--zpet .n-spoj__cara::after {
    right: 0;
    transform: rotate(135deg);
}

.n-spoj__cara i {
    position: absolute;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.n-spoj--tam i {
    background: var(--jantar);
    box-shadow: 0 0 10px var(--jantar);
    right: 0;
}

.n-spoj--zpet i {
    background: var(--znacka-svit);
    box-shadow: 0 0 10px var(--znacka-svit);
    left: 0;
}

.n-mapa__zamek {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--text-3);
    font-size: 0.8rem;
}

.n-mapa__zamek .ik {
    color: var(--znacka);
}

@media (prefers-reduced-motion: no-preference) {
    .n-spoj--tam i { animation: n-doleva 2.6s linear infinite; }
    .n-spoj--zpet i { animation: n-doprava 2.2s linear infinite; }
    .n-spoj__cara i:nth-child(2) { animation-delay: -1.2s; }
}

@keyframes n-doleva {
    from { right: 0; opacity: 0; }
    10%, 85% { opacity: 1; }
    to { right: calc(100% - 8px); opacity: 0; }
}

@keyframes n-doprava {
    from { left: 0; opacity: 0; }
    10%, 85% { opacity: 1; }
    to { left: calc(100% - 8px); opacity: 0; }
}

/* Pod sebou (telefon, úzký tablet) je počítač nad klienty, takže spoje vedou svisle
   středem — od spodku skříně až ke klientům: úkoly a svolení nahoru, kroky Agenta dolů.
   Popisky jsou po stranách, ať čáry nikam nenarážejí; zámek je pod klienty.
   `display: contents` pustí spoje i zámek přímo do mřížky mapy. */
@media (max-width: 860px) {
    .n-mapa {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "pocitac pocitac"
            "tam zpet"
            "klienti klienti"
            "zamek zamek";
        column-gap: 2.5rem;
        row-gap: 0;
    }

    .n-mapa__pocitac { grid-area: pocitac; }
    /* Telefon i okno nahoru, ať na ně čáry navazují. */
    /* Obecné pravidlo pro klienty stojí v souboru až za tímhle, proto vyšší specificita. */
    .n-mapa .n-mapa__klienti {
        grid-area: klienti;
        align-items: start;
    }

    .n-mapa__spoje {
        display: contents;
    }

    .n-spoj {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        align-self: stretch;
        /* Až ke skříni (pod ní jsou jen nožičky po stranách). */
        margin-top: -0.6rem;
    }

    .n-spoj--tam {
        grid-area: tam;
        justify-content: flex-end;
    }

    .n-spoj--zpet {
        grid-area: zpet;
    }

    .n-spoj--tam .n-spoj__cara { order: 2; }
    .n-spoj--tam p { order: 1; text-align: right; }

    .n-spoj p {
        max-width: 11rem;
        margin: 0;
        padding-block: 1.75rem;
    }

    .n-spoj--zpet p {
        text-align: left;
    }

    .n-spoj__cara {
        flex: none;
        width: 2px;
        height: auto;
        align-self: stretch;
    }

    .n-spoj__cara::after {
        left: -3px;
    }

    .n-spoj--tam .n-spoj__cara::after {
        top: 0;
        transform: rotate(45deg);
    }

    .n-spoj--zpet .n-spoj__cara::after {
        top: auto;
        right: auto;
        bottom: 0;
        transform: rotate(225deg);
    }

    .n-spoj__cara i,
    .n-spoj--tam i,
    .n-spoj--zpet i {
        left: -3px;
        right: auto;
    }

    .n-spoj--tam i {
        top: calc(100% - 8px);
    }

    .n-spoj--zpet i {
        top: 0;
    }

    .n-mapa__zamek {
        grid-area: zamek;
        justify-self: center;
        margin-top: 1.5rem;
    }
}

@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
    .n-spoj--tam i { animation-name: n-nahoru; }
    .n-spoj--zpet i { animation-name: n-dolu; }
}

@keyframes n-nahoru {
    from { top: calc(100% - 8px); opacity: 0; }
    10%, 85% { opacity: 1; }
    to { top: 0; opacity: 0; }
}

@keyframes n-dolu {
    from { top: 0; opacity: 0; }
    10%, 85% { opacity: 1; }
    to { top: calc(100% - 8px); opacity: 0; }
}

/* Klienti: skutečné snímky, telefon přes roh okna. */
.n-mapa__klienti {
    position: relative;
    display: grid;
    grid-template-columns: 0.42fr 1fr;
    align-items: end;
    gap: 1rem;
}

.n-klient p {
    margin-top: 0.6rem;
    text-align: center;
    font-size: 0.85rem;
}

.n-klient small {
    display: block;
    color: var(--text-3);
}

.n-klient__tel img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 4px solid #1b2421;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}

.n-klient__okno img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--linka-svetla);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}

.n-spusteni {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.n-spusteni__co {
    margin-bottom: 0.8rem;
    color: var(--text-2);
}

/* ── 6b. MacBook řízený posunem ─────────────────────────────────────────── */

.n-mac {
    position: relative;
    border-top: 1px solid var(--linka);
    background: var(--tma);
}

.n-mac__scena {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: var(--pas-svisle);
}

.n-mac__text {
    width: min(100% - 2.5rem, var(--ram));
}

.n-mac__plocha {
    position: relative;
    width: min(100% - 1rem, 1280px);
    aspect-ratio: 16 / 9;
    margin-top: 1rem;
}

.n-mac__plocha > img,
.n-mac__plocha > svg,
.n-tel__plocha > img,
.n-tel__plocha > svg,
.n-fce__plocha > img,
.n-fce__plocha > svg {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.n-mac__scena.je-zive .n-mac__zaloha,
.n-tel__scena.je-zive .n-tel__zaloha,
.n-fce__lottie.je-zive .n-fce__zaloha {
    display: none;
}

.n-mac__body {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 2rem;
    color: var(--text-2);
}

.n-mac__body li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.n-mac__body .ik {
    color: var(--znacka-svit);
}

/* Se skriptem: dlouhá sekce, připnutá scéna na celou výšku okna. Body se
   objeví až na konci, když už je obrazovka velká. */
/* Výška držáku určuje, jak dlouho se roluje přes animaci: (výška − 100vh) dráhy. */
.n-mac.n-posun {
    height: 500vh;
}

.n-mac.n-posun .n-mac__scena {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding-block: 5.5rem 1rem;
    justify-content: center;
    overflow: hidden;
}

.n-mac.n-posun .n-mac__text .pas__nadpis {
    max-width: none;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}

/* Plocha je vždycky 16 : 9 (jako snímky) a vejde se na výšku okna i s nadpisem
   nad sebou a body pod sebou — ty zaberou asi 17rem. */
.n-mac.n-posun .n-mac__plocha {
    width: min(100% - 1rem, 1280px, (100svh - 17rem) * 16 / 9);
    margin-top: 0.5rem;
}

.n-mac.n-posun .n-mac__body {
    margin-top: 0.75rem;
}

.n-mac.n-posun .n-mac__text {
    opacity: calc(1 - var(--prubeh, 0) * 1.6);
}

.n-mac.n-posun .n-mac__body {
    opacity: clamp(0, (var(--prubeh, 0) - 0.72) * 5, 1);
}

.n-sliby {
    list-style: none;
    padding: 0;
    margin: clamp(2rem, 4vw, 2.75rem) 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
    color: var(--text-2);
}

.n-sliby li,
.n-fce__body li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.n-sliby .ik,
.n-fce__body .ik {
    color: var(--znacka-svit);
    margin-top: 0.3em;
}

/* ── 6. Funkce ──────────────────────────────────────────────────────────── */

.n-funkce {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    gap: clamp(3rem, 7vw, 6rem);
}

.n-fce {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.n-fce--obracene .n-fce__obraz {
    display: grid;
    place-items: center;
}

/* Snímky z Rotata mají pozadí stránky; okraje se rozplynou, kdyby telefon
   při natáčení sáhl až k hraně. */
.n-fce__lottie {
    width: min(100%, 400px);
}

.n-fce__plocha {
    position: relative;
    aspect-ratio: 860 / 1350;
    -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
}

.n-fce__stitek {
    font-family: var(--pismo-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--znacka);
}

.n-fce__stitek--jantar {
    color: var(--jantar);
}

.n-fce__nadpis {
    margin-top: 0.6rem;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    max-width: 16ch;
}

.n-fce__body {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 0;
    display: grid;
    gap: 0.6rem;
    color: var(--text-2);
    font-size: 1.05rem;
}

/* ── 7. Tři kroky ───────────────────────────────────────────────────────── */

.n-start {
    list-style: none;
    padding: 0;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    counter-reset: none;
}

.n-krok {
    position: relative;
    padding: 1.5rem;
    border: 1px solid var(--linka);
    border-radius: var(--polomer-velky);
    background: var(--tma);
}

.n-krok + .n-krok::before {
    content: "→";
    position: absolute;
    left: -0.95rem;
    top: 2.2rem;
    color: var(--znacka);
    font-size: 1.1rem;
    line-height: 1;
}

.n-krok__ikona {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--znacka-tlum);
    color: var(--znacka-svit);
    font-size: 1.6rem;
}

.n-krok__ikona b {
    position: absolute;
    right: -7px;
    top: -7px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--znacka);
    color: #04120d;
    font-size: 0.75rem;
    font-family: var(--pismo-mono);
}

.n-krok h3 {
    margin-top: 1.1rem;
    font-size: 1.3rem;
}

.n-krok p {
    margin-top: 0.5rem;
    color: var(--text-2);
}

/* ── Telefon a tablet ───────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .n-bolesti {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem 2rem;
    }
}

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

    .n-scena {
        max-width: 560px;
        width: 100%;
        margin-inline: auto;
    }

    .n-mapa {
        grid-template-columns: minmax(0, 1fr);
    }

    .n-uzly--radek {
        grid-template-columns: minmax(0, 1fr);
    }

    .n-fce {
        grid-template-columns: minmax(0, 1fr);
    }

    .n-fce--obracene .n-fce__obraz {
        order: 0;
    }

    .n-start {
        grid-template-columns: minmax(0, 1fr);
    }

    .n-krok + .n-krok::before {
        content: "↓";
        left: 2.1rem;
        top: -1.05rem;
    }
}

/* Tečky pod pásem karet (vytváří je domu.js); jen tam, kde je pás. */
.n-bolesti-tecky {
    display: none;
}

.n-bolesti-tecky button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.n-bolesti-tecky button::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--linka-svetla);
    transition: width 0.25s ease, background-color 0.25s ease;
}

.n-bolesti-tecky button.je-aktivni::before {
    width: 22px;
    background: var(--znacka);
}

/* Na telefonu by čtyři karty pod sebou zabraly několik obrazovek. Jsou proto v pásu,
   který se posouvá prstem; další karta vykukuje, ať je poznat, že pás pokračuje.
   Pás jde až k okrajům obrazovky, první karta ale začíná na hraně textu. */
@media (max-width: 560px) {
    .n-bolesti {
        grid-template-columns: none;
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        grid-auto-columns: min(80%, 300px);
        gap: 0 0.75rem;
        margin-inline: -1.25rem;
        padding: 0 1.25rem 0.5rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1.25rem;
        scrollbar-width: none;
    }

    .n-bolesti::-webkit-scrollbar {
        display: none;
    }

    .n-bolesti-tecky {
        display: flex;
        justify-content: center;
        gap: 0.25rem;
        margin-top: 0.75rem;
    }

    .n-bolest {
        scroll-snap-align: start;
    }

    /* Odhalení při posunu (view()) by se v pásu vázalo na vodorovné posouvání. */
    .n-bolest.odhal {
        animation: none;
    }

    .n-bolesti .n-kresba {
        height: 180px;
    }

    .n-bolest__bez {
        font-size: 1.05rem;
    }

    .n-bolest__s {
        font-size: 0.9rem;
    }

    .n-den__pruh b {
        display: none;
    }
}

/* ── 5b. Telefon řízený posunem ─────────────────────────────────────────── */

.n-tel {
    position: relative;
    border-top: 1px solid var(--linka);
    background: var(--tma);
}

.n-tel__scena {
    width: min(100% - 2.5rem, var(--ram));
    margin-inline: auto;
    padding-block: var(--pas-svisle);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}

.n-tel__nadpisek {
    color: var(--jantar);
}

.n-tel__nadpisek::before {
    background: var(--jantar);
    box-shadow: 0 0 0 4px var(--jantar-tlum);
}

.n-tel__kroky {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    gap: 0.75rem;
}

.n-tel__kroky li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--linka);
    border-radius: var(--polomer);
    color: var(--text-2);
    font-size: 1.05rem;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.n-tel__kroky b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--tma-3);
    color: var(--text-2);
    font-family: var(--pismo-mono);
    font-size: 0.8rem;
    font-weight: 500;
}

.n-tel__plocha {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    /* Přiblížený telefon končí na okraji snímku — okraj se rozplyne do pozadí. */
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

/* Se skriptem: připnutá scéna, kroky se rozsvěcují postupně. */
.n-tel.n-posun {
    height: 460vh;
}

/* VS Code má tři kroky, každý potřebuje svůj kus dráhy. */
.n-tel--vsc.n-posun {
    height: 560vh;
}

.n-tel.n-posun .n-tel__scena {
    position: sticky;
    top: 0;
    height: 100vh;
    padding-block: 5rem 1rem;
}

@media (min-width: 861px) {
    .n-tel.n-posun .n-tel__scena {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }
}

.n-tel.n-posun .n-tel__plocha {
    width: min(100%, 100svh - 6rem);
    justify-self: center;
}

.n-tel.n-posun .n-tel__kroky li {
    opacity: 0.45;
}

.n-tel.n-posun .n-tel__kroky li.je-aktivni {
    opacity: 1;
    color: var(--text);
    border-color: rgba(31, 172, 134, 0.5);
    background: var(--znacka-tlum);
}

.n-tel.n-posun .n-tel__kroky li.je-aktivni b {
    background: var(--znacka);
    color: #04120d;
}

@media (max-width: 860px) {
    .n-tel__scena {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Na telefonu text nahoře a pod ním scéna, obojí se musí vejít na výšku. */
    .n-tel.n-posun .n-tel__scena {
        align-content: start;
        gap: 0.5rem;
        padding-top: 4.75rem;
    }

    .n-tel.n-posun .n-tel__kroky {
        margin-top: 1rem;
        gap: 0.4rem;
    }

    .n-tel.n-posun .n-tel__kroky li {
        padding: 0.55rem 0.8rem;
        font-size: 0.92rem;
    }

    /* Všechny kroky zůstanou vidět, ať je jasné, co přijde. Neaktivní jsou
       menší a bez rámečku, aby se nad scénu vešly i na nízkém telefonu. */
    .n-tel.n-posun .n-tel__kroky li:not(.je-aktivni) {
        padding-block: 0.2rem;
        border-color: transparent;
        font-size: 0.82rem;
        line-height: 1.3;
        opacity: 0.6;
    }

    .n-tel.n-posun .n-tel__kroky li:not(.je-aktivni) b {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    .n-tel.n-posun .n-tel__plocha {
        width: min(100%, 100vh - 24rem);
    }
}

/* ── 6c. Rozšíření pro VS Code ─────────────────────────────────────────── */

/* Stejná scéna jako svolení, jen s MacBookem místo telefonu. Snímek je
   oříznutý těsně kolem MacBooku (i natočeného na začátku), proto skoro
   čtvercový. Okraje jsou pozadí, maska není potřeba. */
.n-tel--vsc .n-tel__plocha {
    aspect-ratio: 1952 / 1504;
    -webkit-mask-image: none;
    mask-image: none;
}

.n-tel__tlacitko {
    margin-top: 1.5rem;
}

@media (min-width: 861px) {
    .n-tel--vsc.n-posun .n-tel__scena {
        width: min(100% - 2.5rem, 1400px);
        grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
        gap: clamp(1.5rem, 3vw, 3rem);
    }
}

.n-tel--vsc.n-posun .n-tel__plocha {
    width: min(100%, (100svh - 6rem) * 1.255);
}

@media (max-width: 860px) {
    .n-tel--vsc.n-posun .n-tel__plocha {
        width: min(100%, (100vh - 24rem) * 1.255);
    }

    .n-tel.n-posun .n-tel__tlacitko {
        display: none;
    }
}

/* ── 6d. Zdarma ─────────────────────────────────────────────────────────── */

.n-zdarma {
    position: relative;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(60% 70% at 50% 0%, rgba(31, 172, 134, 0.22), transparent 70%),
        var(--tma);
}

.n-zdarma .nadpisek {
    justify-content: center;
}

.n-zdarma__cena {
    margin-top: 1rem;
    font-family: var(--pismo-display);
    font-weight: 800;
    font-size: clamp(5rem, 16vw, 12rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
    background: linear-gradient(180deg, var(--znacka-svit), var(--znacka) 70%, rgba(31, 172, 134, 0.35));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.n-zdarma__nadpis {
    margin-top: 0.5rem;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
}

.n-zdarma__uvod {
    margin: 1.25rem auto 0;
    max-width: 52ch;
    color: var(--text-2);
    font-size: 1.15rem;
}

.n-zdarma__body {
    list-style: none;
    padding: 0;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    text-align: left;
}

.n-zdarma__body li {
    display: flex;
    gap: 0.7rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid rgba(31, 172, 134, 0.35);
    border-radius: var(--polomer);
    background: rgba(31, 172, 134, 0.06);
    color: var(--text-2);
    font-size: 0.95rem;
    line-height: 1.45;
}

.n-zdarma__body .ik {
    color: var(--znacka-svit);
    margin-top: 0.2em;
}

.n-zdarma__body b {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--text);
    font-size: 1.05rem;
}

.n-zdarma__tlacitko {
    margin-top: clamp(2rem, 4vw, 2.75rem);
}

@media (max-width: 1000px) {
    .n-zdarma__body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .n-zdarma__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── 8b. Srovnání ──────────────────────────────────────────────────────── */

/* Tabulka je širší než telefon: posouvá se do strany sama, první sloupec
   s názvem funkce zůstává přilepený vlevo, ať je pořád jasné, co se srovnává. */
.srovnani {
    margin-top: clamp(2rem, 4vw, 3rem);
    overflow-x: auto;
    border: 1px solid var(--linka);
    border-radius: var(--polomer);
    background: var(--tma);
}

.srovnani table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.srovnani th,
.srovnani td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--linka);
    text-align: center;
    vertical-align: middle;
    color: var(--text-2);
}

.srovnani tbody tr:last-child > * {
    border-bottom: 0;
}

.srovnani thead th {
    font-family: var(--pismo-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-3);
    max-width: 9rem;
}

.srovnani tbody th,
.srovnani thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    font-weight: 400;
    color: var(--text);
    background: var(--tma);
    min-width: 11rem;
}

.srovnani .je-nase {
    background: var(--znacka-tlum);
    color: var(--text);
}

.srovnani thead .je-nase {
    color: var(--znacka-svit);
    font-family: var(--pismo-display);
    font-size: 1.05rem;
    letter-spacing: 0;
}

.srovnani__ano {
    color: var(--znacka);
    font-size: 1.1rem;
}

.srovnani__ne {
    color: var(--text-3);
}

.srovnani__pozn {
    margin-top: 1rem;
    color: var(--text-3);
    font-size: 0.85rem;
}

.srovnani__skryte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 860px) {
    .srovnani table {
        font-size: 0.85rem;
    }

    .srovnani th,
    .srovnani td {
        padding: 0.7rem 0.75rem;
    }

    .srovnani tbody th,
    .srovnani thead th:first-child {
        min-width: 8.5rem;
        max-width: 8.5rem;
    }
}

/* ── Novinky verze 1.5: karty bez animace ───────────────────────────────── */
.n-novinky {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.n-novinka {
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--linka);
    border-radius: var(--polomer);
    background: rgba(255, 255, 255, 0.02);
}

.n-novinka__stitek {
    font-family: var(--pismo-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--znacka);
}

.n-novinka__nadpis {
    margin-top: 0.5rem;
    font-family: var(--pismo-display);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.25;
}

.n-novinka__text {
    margin-top: 0.6rem;
    color: var(--text-2);
    line-height: 1.5;
}