/* Tamiso: styl zatwierdzony w podglady-stylu/styl-tamis-v5.html */
:root {
  --white: #FFFFFF;
  --paper: #F7F7FF;
  --black: #040403;
  --ink: #111111;
  --ink-2: #5C5C66;
  --ink-3: #9A9AA3;
  --line: #E6E6EE;
  --line-dark: #26262A;
  --green: #2E933C;
  --red: #C42B1C;
  --amber: #A15C00;
  --cm-high: #B86A00;
  --cm-crit: #C42B1C;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "Google Sans Code", ui-monospace, monospace;
  --rail: 24px;
  --rail-r: 32px;
  --step: 120px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 16px; border-radius: 10px; padding: 12px 22px; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-white { background: var(--white); color: var(--black); }
.btn-outline-dark { border-color: #3A3A40; color: var(--white); background: none; }
.btn-black { background: var(--black); color: var(--white); }
.btn-line { border-color: var(--ink); color: var(--ink); background: none; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* czarna góra z tłem „skan” i nagłówkiem z kafelków */
.top { position: relative; overflow: hidden; background: var(--black); color: var(--white); }
.top > .wrap { position: relative; z-index: 1; }
.bg-scan { position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--fw, 100%); display: grid; grid-template-columns: repeat(var(--cols, 20), 56px); grid-auto-rows: 56px; gap: 8px; padding: 8px 0 0; pointer-events: none; }
.bg-scan i { border-radius: 14px; background: #0B0B0D; }
.bg-scan i.alert { background: #4A1610; }  /* bez animacji (ograniczenie ruchu) alarm po prostu świeci */
.closing .bg-scan i.alert { background: #3E130D; }
/* fala „skanu”: jedna warstwa przesuwana przez kartę graficzną, widoczna tylko w kształcie kafelków (maska).
   Wcześniej każdy z kilkuset kafelków miał własną animację koloru i strona przemalowywała się w każdej klatce. */
.bg-scan .wave { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='56' height='56' rx='14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='56' height='56' rx='14'/%3E%3C/svg%3E"); -webkit-mask-size: 64px 64px; mask-size: 64px 64px;
  -webkit-mask-position: 0 8px; mask-position: 0 8px; }
.bg-scan .wave span { position: absolute; left: -100%; top: -100%; width: 300%; height: 300%;
  background: linear-gradient(135deg, transparent 47%, rgba(255, 255, 255, 0.075) 50%, transparent 53%); will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .bg-scan .wave span { animation: wave 7s linear infinite; }
  @keyframes wave { from { transform: translate(-30%, -30%); } to { transform: translate(30%, 30%); } }
  .bg-scan i.alert { animation: scanAlert 7s linear infinite; animation-delay: var(--d); }
  @keyframes scanAlert { 0%, 100% { background: #2A0E0A; } 6% { background: #6A1D14; } 24%, 80% { background: #4A1610; } }
}
/* nagłówek: przyklejony u góry, bez własnego paska; czerń u góry zanika w siatkę (i w treść po przewinięciu),
   więc nie ma twardej krawędzi między nagłówkiem a animowanym tłem */
.site-nav { position: sticky; top: 0; z-index: 60; height: 104px; margin-bottom: -104px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(4, 4, 3, 0.96) 0, rgba(4, 4, 3, 0.82) 48px, rgba(4, 4, 3, 0) 100%); }
/* nagłówek na całą szerokość: logo przy lewej krawędzi, przyciski przy prawej (jak pasy przy krawędziach strony) */
.nav-bar { display: flex; align-items: center; gap: 32px; height: 72px; pointer-events: auto; color: var(--white); font-size: 15px; border-bottom: 1px solid transparent;
  padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
.nav-bar a { text-decoration: none; }
.nav-logo { font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: var(--white); }
.nav-links { display: flex; gap: 28px; }
.nav-links a, .nav-sheet-langs a { color: #B9B9C2; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--white); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.nav-login { color: var(--white); font-weight: 500; }
.nav-login:hover { color: #B9B9C2; }
.nav-cta { color: var(--black); background: var(--white); font-weight: 600; border-radius: 10px; padding: 9px 16px; white-space: nowrap; }
.site-nav summary { list-style: none; cursor: pointer; }
.site-nav summary::-webkit-details-marker { display: none; }
.nav-lang { position: relative; }
.nav-lang summary { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: #8D8D96; padding: 6px 2px; }
.nav-lang summary:hover, .nav-lang[open] summary { color: var(--white); }
.nav-lang summary svg.i { width: 14px; height: 14px; }
.nav-lang-list { position: absolute; right: 0; top: calc(100% + 8px); display: grid; gap: 4px; padding: 6px; background: #141417; border: 1px solid #2E2E35; border-radius: 14px; min-width: 160px; }
.nav-lang-list a { color: #B9B9C2; padding: 9px 12px; border-radius: 10px; }
.nav-lang-list a:hover, .nav-lang-list a:focus-visible { background: #232328; color: var(--white); outline: none; }
.nav-lang-list a[aria-current] { color: var(--white); font-weight: 600; }
/* menu telefonu: przycisk zostaje nad otwartym menu i pokazuje krzyżyk */
.nav-menu { display: none; }
.nav-menu summary { position: relative; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #2E2E35; border-radius: 10px; color: var(--white); background: var(--black); }
.nav-menu summary svg.i:last-child, .nav-menu[open] summary svg.i:first-child { display: none; }
.nav-menu[open] summary svg.i:last-child { display: block; }
.nav-sheet { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 24px; background: var(--black); overflow-y: auto;
  padding: 88px max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.nav-sheet nav { display: grid; border-top: 1px solid var(--line-dark); }
.nav-sheet nav a { color: var(--white); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; padding: 16px 0; border-bottom: 1px solid var(--line-dark); }
.nav-sheet .btn { padding: 14px; }
.nav-sheet-langs { margin-top: auto; display: flex; gap: 20px; font-size: 14px; }
.nav-sheet-langs a[aria-current] { color: var(--white); font-weight: 600; }
/* nad białą treścią (karta wyniku, stopień) nagłówek robi się biały: bez zanikania, z cienką linią od dołu.
   Klasę .light ustawia nav.js; przy otwartym menu telefonu zostaje czarny, bo menu jest czarne */
.site-nav.light { background: none; }
.site-nav.light .nav-bar { background: var(--white); border-bottom-color: var(--line); }
.site-nav.light .nav-logo, .site-nav.light .nav-login { color: var(--ink); }
.site-nav.light .nav-links a, .site-nav.light .nav-lang summary { color: var(--ink-2); }
.site-nav.light .nav-links a:hover, .site-nav.light .nav-links a[aria-current="page"], .site-nav.light .nav-lang summary:hover { color: var(--ink); }
.site-nav.light .nav-login:hover { color: var(--ink-2); }
.site-nav.light .nav-cta { background: var(--black); color: var(--white); }
.site-nav.light .nav-menu summary { background: var(--white); border-color: var(--line); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .nav-bar, .nav-logo, .nav-login, .nav-links a, .nav-cta, .nav-menu summary { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
}
/* logo i logowanie zostają widoczne nad otwartym menu */
.nav-logo, .nav-login { position: relative; z-index: 2; }
html.menu-open { overflow: hidden; }
@media (max-width: 760px) {
  .site-nav { height: 92px; margin-bottom: -92px; }
  .nav-bar { height: 64px; gap: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .nav-links, .nav-lang, .nav-cta { display: none; }
  .nav-right { gap: 16px; }
  .nav-menu { display: block; }
}

.hero { text-align: center; padding: 120px 0 128px; }
.hero h1 { font-weight: 700; font-size: clamp(42px, 6vw, 76px); line-height: 1.03; letter-spacing: -0.045em; margin: 0 auto 24px; max-width: 16ch; text-wrap: balance; }
.hero p { color: #B9B9C2; font-size: 19px; max-width: 52ch; margin: 0 auto 32px; }
.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.reassure { display: inline-flex; align-items: center; gap: 8px; color: #8D8D96; font-size: 14px; margin-top: 18px; }
.reassure svg.i { width: 16px; height: 16px; }
.top.compact .hero { padding: 112px 0 104px; }
.top.compact .hero h1 { font-size: clamp(36px, 4.6vw, 56px); max-width: 20ch; }

/* jeden biały stopień na całą szerokość; stoi za czarną górą w HTML, ale zachodzi na jej dolny margines,
   więc siatka dalej prześwituje po bokach */
.top { padding-bottom: var(--step); }
.tiles { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; height: var(--step); margin-top: calc(-1 * var(--step)); padding: 0 var(--rail); }
.tiles span { background: var(--white); border-radius: 40px 40px 0 0; }

/* strona główna: czarna góra stoi, gdy jej dół dojdzie do dołu ekranu (--top-h liczy skan.js),
   a biały stopień z treścią wjeżdża na nią od dołu */
/* góra na poziomie 0, treść pod nią na poziomie 1: z-index -1 chował górę pod <body> i przyciski w hero nie łapały kliknięć */
.top.stick { position: sticky; z-index: 0; top: min(0px, calc(100vh - var(--top-h, 100vh))); top: min(0px, calc(100svh - var(--top-h, 100svh))); }
.top.stick ~ .page, .top.stick ~ .site-banner, .top.stick ~ .funnel, .top.stick ~ .closing, .top.stick ~ footer.site { position: relative; z-index: 1; }
.top.stick ~ .page { background: var(--white); }
/* ujemny margines karty nie może wypchnąć białego arkusza nad stopień: przy przyklejonej górze
   arkusz leży nad nią i zasłoniłby siatkę obok karty */
.top.stick ~ .page .sheet { display: flow-root; }
/* całkiem zakryta (biały stopień wyjechał nad ekran) znika, żeby nie prześwitywała przez marginesy niżej */
.top.stick.covered { visibility: hidden; }

/* karta produktu wchodzi na stopień */
.product { position: relative; z-index: 2; margin-top: -220px; }
.top.compact ~ .page .product { margin-top: -200px; }
.app { background: var(--white); border: 1px solid var(--line); border-radius: 18px; max-width: 880px; margin: 0 auto; overflow: hidden; }
.app-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.app-top .proj { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.app-top .file { font-family: var(--mono); font-size: 13px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.app-body { padding: 8px 24px 20px; }
.verdict { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 16px 0 12px; }
.group { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin: 18px 0 4px; }
.group.fix { color: var(--red); }
.group.check { color: var(--amber); }
.group svg.i { width: 18px; height: 18px; }
.row { display: grid; grid-template-columns: 200px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.row .pkg { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.row .cve { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.act { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.act svg.i { width: 16px; height: 16px; }
.quiet { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.quiet svg.i { color: var(--green); width: 18px; height: 18px; }

/* liczby: tylko prawdziwe */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 104px 0 72px; }
.facts b { display: block; font-weight: 600; font-size: clamp(36px, 4.2vw, 56px); line-height: 1; letter-spacing: -0.045em; margin-bottom: 14px; white-space: nowrap; }
.facts span { display: block; color: var(--ink); max-width: 22ch; }
.section-title { font-weight: 700; font-size: clamp(32px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.04em; margin: 0 0 32px; max-width: 18ch; }

/* dwa czarne pasy z góry: prawy zawija w „vous”, lewy w „Pourquoi Tamiso” */
.flow { background: var(--black); }
.sheet { background: var(--white); margin: 0 var(--rail); border-bottom-right-radius: var(--rail-r); padding-bottom: 8px; }
.title-row { background: var(--white); overflow: hidden; margin-left: var(--rail); }
.title-x { font-weight: 700; font-size: clamp(30px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.04em; margin: 0; white-space: nowrap; }
.pill { position: relative; display: inline-block; background: var(--black); color: var(--white); border-radius: 999px 0 0 999px; padding: 14px 8px 18px 32px; margin-left: 8px; }
.pill::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 100vw; background: var(--black); }
.sheet2 { background: var(--white); margin-left: var(--rail); border-bottom-left-radius: var(--rail-r); padding: 56px 0 8px; }
.title-row2 { background: var(--white); overflow: hidden; }
.pill2 { position: relative; display: inline-block; background: var(--black); color: var(--white); border-radius: 0 999px 999px 0; padding: 14px 32px 18px 8px; margin-right: 8px; }
.pill2::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 100vw; background: var(--black); }

/* przykłady w sekcji „ce que Tamiso vérifie” */
.demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; padding-bottom: 88px; }
.demo h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 14px; }
.art { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 8px; }
.art .act { justify-self: start; }
.art-row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 14px; }
.art-row .cve { color: var(--ink-3); font-size: 12px; }
.art-note { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-2); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.art-note:last-child { border-bottom: 0; padding-bottom: 0; }
.art-note svg.i { width: 16px; height: 16px; }
.art-note.ok svg { color: var(--green); }
.art-note.bad svg { color: var(--red); }
.code { font-family: var(--mono); font-size: 13px; display: flex; gap: 12px; background: var(--paper); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.code .ln { color: var(--ink-3); flex: none; white-space: nowrap; }
.code mark { background: #FBE3DF; color: var(--red); border-radius: 4px; padding: 0 3px; }
.prompt { font-family: var(--mono); font-size: 13px; line-height: 1.6; background: var(--paper); border-radius: 10px; padding: 12px; margin: 0; white-space: pre-wrap; }

/* porównanie */
.compare { padding: 48px 0 120px; }
.cmp { border-radius: 22px; overflow: hidden; background: var(--paper); }
.cmp-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; }
.cmp-row > span { padding: 16px 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.cmp-row > span[role="rowheader"] { color: var(--ink); font-weight: 600; }
.cmp-row > span.t { background: var(--black); color: var(--white); border-top-color: var(--line-dark); font-weight: 500; }
.cmp-head > span { border-top: 0; font-size: 14px; font-weight: 600; color: var(--ink); padding-top: 20px; padding-bottom: 20px; }
.cmp-head > span.t { font-size: 18px; letter-spacing: -0.02em; }

/* cennik */
.pricing { padding: 32px 0 120px; }
.pr-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; }
.pr-head .section-title { margin-bottom: 24px; }
.billing { display: inline-flex; gap: 4px; padding: 4px; background: var(--paper); border-radius: 14px; margin-bottom: 24px; }
.billing button { font: inherit; font-size: 15px; font-weight: 600; border: 0; border-radius: 10px; padding: 10px 16px; background: none; color: var(--ink-2); cursor: pointer; }
.billing button[aria-pressed="true"] { background: var(--black); color: var(--white); }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan { background: var(--paper); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; }
.plan h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.plan .for { margin: 4px 0 20px; color: var(--ink-2); font-size: 15px; min-height: 46px; }
.price { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.price b { font-size: 44px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.price span { font-size: 14px; color: var(--ink-2); }
.price s { color: var(--ink-3); margin-right: 6px; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; align-content: start; gap: 10px; font-size: 15px; flex: 1; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li svg.i { width: 18px; height: 18px; margin-top: 2px; color: var(--green); }
.plan.dark { background: var(--black); color: var(--white); }
.plan.dark .for, .plan.dark .price span { color: #B9B9C2; }
.plan.dark .price s { color: #85858F; }
.plan.dark li svg.i { color: #6FD07D; }
.plan ul.base { flex: 0 0 auto; margin-bottom: 16px; }
.plan .tools-h { margin: 0 0 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.plan.dark .tools-h { color: #B9B9C2; border-top-color: #2A2A30; }
.plan li small { display: block; color: var(--ink-2); font-size: 13px; }
.plan.dark li small { color: #B9B9C2; }
.ai-line { margin: 20px 0 0; font-size: 15px; max-width: 80ch; }
.ai-line b { font-weight: 600; }
.compare { margin-top: 56px; }
.compare > p { margin: -12px 0 20px; color: var(--ink-2); max-width: 70ch; }
.cmp-wrap { overflow-x: auto; border-radius: 22px; background: var(--paper); }
.cmp-wrap .cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15px; }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; vertical-align: middle; }
.cmp thead th { font-weight: 700; letter-spacing: -0.02em; padding-top: 20px; padding-bottom: 14px; }
.cmp thead th small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-2); letter-spacing: 0; }
.cmp th:not(:first-child), .cmp td { text-align: center; width: 15%; }
.cmp tbody tr + tr > * { border-top: 1px solid var(--line); }
.cmp tbody tr.grp > th { font-size: 13px; font-weight: 600; color: var(--ink-2); padding-top: 22px; padding-bottom: 8px; border-top: 0; }
.cmp tbody th { font-weight: 500; }
.cmp tbody th small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 400; }
.cmp td svg.i { width: 18px; height: 18px; color: var(--green); vertical-align: -3px; }
.cmp td.no { color: var(--ink-3); }
.cmp td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 640px) { .compare { margin-top: 40px; } .cmp th, .cmp td { padding: 10px 12px; } }
/* telefon: cała tabela na szerokość ekranu (przy min-width 720 px kolumny planów uciekały w bok i nie było widać ptaszków) */
@media (max-width: 560px) {
  .cmp-wrap .cmp { min-width: 0; table-layout: fixed; font-size: 13.5px; }
  .cmp th:first-child { width: 36%; }
  .cmp th:not(:first-child), .cmp td { width: auto; }
  .cmp th, .cmp td { padding: 9px 4px; }
  .cmp thead th:not(:first-child) { padding-left: 1px; padding-right: 1px; }
  .cmp th:first-child, .cmp tbody tr.grp > th { padding-left: 12px; }
  .cmp thead th { font-size: 12px; letter-spacing: -0.02em; padding-top: 16px; }
  .cmp thead th small { font-size: 11px; }
  .cmp tbody th small { font-size: 12px; }
  .cmp td svg.i { width: 16px; height: 16px; }
}
.pr-foot { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 32px; align-items: end; margin-top: 24px; }
.more { margin: 0 0 30px; color: var(--ink-2); font-size: 15px; }
.more a { color: var(--ink); font-weight: 600; }

/* formularze */
.field { display: grid; gap: 8px; }
.field label, .field .label { font-weight: 600; font-size: 15px; }
.input, select.input { font: 500 15px var(--sans); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--white); color: var(--ink); width: 100%; }
.input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: transparent; }
.input[aria-invalid="true"] { border-color: var(--red); }
.promo-row { display: flex; gap: 8px; }
.promo-row .input { flex: 1; min-width: 0; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.promo-row .input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--sans); color: var(--ink-3); }
.msg { min-height: 20px; margin: 0; font-size: 13px; }
.msg.ok { color: var(--green); }
.msg.err { color: var(--red); }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.check-line input { margin-top: 3px; accent-color: var(--black); }
.flash { border-radius: 12px; padding: 12px 16px; font-size: 15px; margin: 0 0 16px; }
.flash.ok { background: #E8F4EA; color: #1E5E27; }
.flash.err { background: #FBE3DF; color: #8E1F14; }

/* lista oczekujących */
.waitlist { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; background: var(--paper); border-radius: 22px; padding: 40px; margin-bottom: 120px; }
.waitlist h2 { margin: 0 0 12px; font-size: 32px; letter-spacing: -0.04em; line-height: 1.1; }
.waitlist p { margin: 0; color: var(--ink-2); }
.waitlist form { display: grid; gap: 18px; }

/* darmowy test: wgrywanie pliku */
.drop { display: grid; gap: 16px; padding: 24px; }
.dropzone { display: grid; place-items: center; gap: 10px; text-align: center; border: 1.5px dashed #C9C9D3; border-radius: 14px; padding: 40px 24px; background: var(--paper); cursor: pointer; }
.dropzone.over { border-color: var(--black); background: #EFEFF8; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-3); }
.dropzone small { color: var(--ink-3); font-size: 14px; }
.dropzone .chosen { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.dropzone.over b, .dropzone:hover b { color: var(--ink-2); }
.drop-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.formats { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-family: var(--mono); font-size: 13px; background: var(--paper); border-radius: 10px; padding: 6px 10px; white-space: nowrap; }
.top-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.or-repo { display: grid; gap: 6px; }
.or-repo label { font-size: 14px; color: var(--ink-2); }
.or-repo .input { font-family: var(--mono); font-size: 14px; }
.way.dark .or-repo label { color: #8D8D96; }
.formats-wrap { display: grid; gap: 10px; flex: 1 1 420px; min-width: 0; }
.formats-more { margin: 0; font-size: 13px; color: var(--ink-2); max-width: 72ch; }
.drop-actions:has(.formats-wrap) { align-items: flex-end; }
.linkbtn { font: inherit; font-size: 15px; font-weight: 600; background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 88px 0 120px; }
.points h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.02em; }
.points p { margin: 0; color: var(--ink-2); font-size: 16px; }
.busy { display: none; }
form.sending .busy { display: inline-flex; align-items: baseline; }
.dots { display: inline-flex; gap: 3px; margin-left: 4px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .dots i { animation: dotHop 1s ease-in-out infinite; }
  .dots i:nth-child(2) { animation-delay: .15s; }
  .dots i:nth-child(3) { animation-delay: .3s; }
  @keyframes dotHop { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
}
form.sending .idle { display: none; }

/* wynik */
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.badge { font-size: 12px; font-weight: 600; border-radius: 8px; padding: 2px 8px; background: var(--paper); color: var(--ink-2); white-space: nowrap; }
.badge.kev { background: #FBE3DF; color: #8E1F14; }
.row .to { color: var(--ink-2); }
.row .to b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.more-row { border-top: 0; padding: 0 0 12px; }
details.vulns summary, details.ignored summary, details.prompt-box summary { cursor: pointer; font-size: 14px; color: var(--ink-2); list-style: none; }
details summary::-webkit-details-marker { display: none; }
details.vulns summary::before, details.ignored summary::before, details.prompt-box summary::before { content: "+ "; font-family: var(--mono); }
details[open].vulns summary::before, details[open].ignored summary::before, details[open].prompt-box summary::before { content: "− "; }
.vlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.vlist li { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.vlist .id { font-family: var(--mono); font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.vlist .why { color: var(--ink-2); }
.vlist .why.fix { color: var(--red); }
.vlist .why.check { color: var(--amber); }
.prompt-box { margin-top: 10px; }
.prompt-box .prompt { margin-top: 8px; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 72px 0 32px; }
.note { background: var(--paper); border-radius: 22px; padding: 24px; }
.note h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.02em; display: flex; gap: 8px; align-items: center; }
.note p, .note ul { margin: 0; color: var(--ink-2); font-size: 15px; }
.note ul { padding-left: 18px; }
.note code { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.note li, .panel-card p, .panel-card li { overflow-wrap: anywhere; }
.note.bad h3 svg { color: var(--red); }
.note.ok h3 svg { color: var(--green); }
.method { color: var(--ink-2); font-size: 14px; padding: 0 0 120px; max-width: 72ch; }
.method h2 { color: var(--ink); font-size: 18px; margin: 0 0 8px; }

/* strony prawne */
.legal { max-width: 72ch; padding: 72px 0 120px; }
.legal h2 { font-size: 22px; letter-spacing: -0.02em; margin: 32px 0 8px; }
.legal p, .legal li { color: var(--ink-2); }
.draft { background: #FFF4E0; color: #6B3E00; border-radius: 12px; padding: 12px 16px; font-size: 15px; }

/* dolne kafelki jako dane i zamknięcie */
.funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; padding: 0 8px; margin-top: 40px; }
.funnel div { background: var(--black); color: var(--white); border-radius: 22px 22px 0 0; padding: 22px 24px; display: flex; flex-direction: column; }
.funnel b { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.funnel span { color: #B9B9C2; font-size: 15px; margin-top: 8px; }
.funnel div:nth-child(1) { height: 240px; }
.funnel div:nth-child(2) { height: 188px; }
.funnel div:nth-child(3) { height: 148px; }
.funnel div:nth-child(4) { height: 108px; }
.funnel div:nth-child(4) b { color: #FF8A7A; }
.closing { background: var(--black); color: var(--white); text-align: center; padding: 40px 0 96px; }
.closing h2 { font-weight: 700; font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.04em; line-height: 1.05; margin: 0 auto 28px; max-width: 16ch; }
footer.site { background: var(--black); color: #8D8D96; border-top: 1px solid var(--line-dark); }
footer.site .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px; font-size: 14px; }
footer.site nav { display: flex; gap: 24px; flex-wrap: wrap; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--white); }
.page-end { background: var(--black); height: 8px; }

@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  :root { --rail: 12px; --rail-r: 20px; --step: 72px; }
  .hero { padding: 104px 0 96px; }
  .tiles span { border-radius: 28px 28px 0 0; }
  .product { margin-top: -150px; }
  .top.compact ~ .page .product { margin-top: -130px; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .facts { grid-template-columns: 1fr 1fr; padding: 72px 0; }
  .title-x { white-space: normal; }
  .pill { padding: 8px 6px 10px 20px; }
  .pill2 { padding: 8px 20px 10px 6px; }
  /* minmax(0, …): długie nazwy paczek i adresy w treści nie rozpychają kolumny poza ekran */
  .demos, .points, .notes, .waitlist { grid-template-columns: minmax(0, 1fr); }
  .waitlist { padding: 24px; gap: 24px; }
  .cmp-row { grid-template-columns: 1fr 1fr; }
  .cmp-row > span[role="rowheader"] { grid-column: 1 / -1; padding-bottom: 4px; }
  .cmp-row > span:nth-child(2) { display: none; }
  .cmp-head > span:first-child { display: none; }
  .funnel b { font-size: 26px; } .funnel span { font-size: 12px; } .funnel div { padding: 14px; }
  .funnel div:nth-child(1) { height: 180px; } .funnel div:nth-child(2) { height: 140px; } .funnel div:nth-child(3) { height: 110px; } .funnel div:nth-child(4) { height: 84px; }
  .vlist li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* telefon: słupki mają ok. 80 px; podpisy są krótkie, a gdyby słowo się nie zmieściło, dzieli się zamiast rozpychać stronę
   (Chrome nie ma polskiego słownika dzielenia, więc „hyphens” nie zawsze działa) */
@media (max-width: 560px) {
  .funnel { gap: 6px; padding: 0 6px; }
  .funnel div { padding: 12px 8px; border-radius: 16px 16px 0 0; }
  .funnel b { font-size: 22px; }
  .funnel span { font-size: 11px; line-height: 1.35; hyphens: auto; overflow-wrap: anywhere; }
  .funnel div:nth-child(1) { height: 196px; } .funnel div:nth-child(2) { height: 156px; } .funnel div:nth-child(3) { height: 124px; } .funnel div:nth-child(4) { height: 96px; }
}
/* telefon: mniej powietrza w kartach i przyciskach, żeby typowe napisy mieściły się w jednej linii (a dłuższe łamały się równo) */
@media (max-width: 560px) {
  .btn { padding: 12px 18px; text-wrap: balance; }
  .panel-card { padding: 20px; }
}
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; } .pr-foot { grid-template-columns: 1fr; } .plan .for { min-height: 0; } }
/* telefon: odstępy między sekcjami z laptopa (100-200 px) dawały całe ekrany pustej bieli */
@media (max-width: 560px) {
  .hero p { font-size: 17px; }
  /* dwa przyciski jeden pod drugim w równej szerokości zamiast dwóch różnych pigułek */
  .hero .actions { flex-direction: column; align-items: center; }
  .hero .actions .btn { width: min(100%, 300px); justify-content: center; }
  .facts { padding: 56px 0 40px; gap: 28px 20px; }
  .sheet2 { padding-top: 40px; }
  .demos { gap: 40px; }
  .sheet2 .demos { padding-bottom: 48px; }
  .compare { padding: 32px 0 56px; }
  .pricing { padding: 16px 0 64px; }
  .plan { padding: 24px 22px; }
}
/* telefon: przełącznik okresu na całą szerokość, dwie równe połowy (dłuższy napis łamie się równo w swojej połowie) */
@media (max-width: 560px) {
  .pr-head { gap: 0; }
  .billing { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .billing button { font-size: 14px; line-height: 1.25; padding: 9px 10px; text-wrap: balance; }
}
.sample-form { text-align: center; margin-top: 16px; }

/* cennik: karty wyłaniają się spod siatki kafelków (ta sama ukośna fala co tło hero),
   potem rysują się ptaszki. Stan początkowy ustawia JS, więc bez JS cennik jest od razu widoczny. */
.plan { position: relative; overflow: hidden; }
.price b { display: inline-block; }
.fx { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: repeat(var(--c), 1fr); pointer-events: none; }
.fx i { position: relative; background: var(--paper); }
.fx i::after { content: ""; position: absolute; inset: 2px; border-radius: 8px; background: var(--tile); --tile: #ECECF5; --flash: #D9D9E6; }
.plan.dark .fx i { background: var(--black); }
.plan.dark .fx i::after { --tile: #141417; --flash: #2A2A31; }
@media (prefers-reduced-motion: no-preference) {
  .pricing.anim .plan li svg.i path { stroke-dasharray: 22; stroke-dashoffset: 22; }
  .plan.run li svg.i path { animation: draw 200ms ease-out forwards; animation-delay: var(--ck, 0ms); }
  .plan.run .fx i { animation: tileOut 340ms ease-in forwards; animation-delay: var(--d); }
  .plan.run .fx i::after { animation: tileFlash 340ms linear forwards; animation-delay: var(--d); }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes tileOut { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes tileFlash { 0% { background: var(--tile); } 30%, 100% { background: var(--flash); } }
}
@media (prefers-reduced-motion: reduce) { .fx { display: none; } }

/* zamknięcie strony: ta sama siatka co w hero, ciemniejsza, żeby nie walczyła z napisem */
.closing { position: relative; overflow: hidden; padding: 72px 0 112px; }
.closing > .wrap { position: relative; z-index: 1; }
.closing .bg-scan { bottom: auto; padding: 0; }
.closing .bg-scan i { background: #08080A; }
.closing .bg-scan .wave { -webkit-mask-position: 0 0; mask-position: 0 0; }
.closing .bg-scan .wave span { background: linear-gradient(135deg, transparent 47%, rgba(255, 255, 255, 0.06) 50%, transparent 53%); }
@media (prefers-reduced-motion: no-preference) {
  .closing .bg-scan i.alert { animation-name: scanDeepAlert; }
  @keyframes scanDeepAlert { 0%, 100% { background: #220B08; } 6% { background: #5A1912; } 24%, 80% { background: #3E130D; } }
}
/* siatka poza ekranem stoi */
.paused .bg-scan i, .paused .bg-scan .wave span { animation-play-state: paused; }

/* telefon: liczby w faktach mieszczą się w kolumnie, kłódka stoi przy tekście */
.reassure { display: inline-block; max-width: 40ch; }
.reassure svg.i { vertical-align: -3px; margin-right: 6px; }
@media (max-width: 900px) {
  .facts { gap: 32px 16px; }
  .facts b { font-size: clamp(26px, 7.4vw, 42px); }
  .facts span { font-size: 15px; }
}
/* białe bloki przy pasach zachodzą o 1 px, żeby przy ułamkowych pikselach nie było czarnego szwu */
.title-row, .sheet2 { margin-bottom: -1px; }
.sheet2, .title-row2 { position: relative; }
/* iPhone przybliża stronę przy polach z czcionką poniżej 16 px */
@media (max-width: 900px) { .input, select.input { font-size: 16px; } }

/* aplikacja: formularze w karcie, panel projektów, decyzje, historia wersji */
.app.narrow { max-width: 560px; }
.form-card { display: grid; gap: 18px; padding: 28px; }
.form-card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.form-card .btn { justify-self: start; }
.fine { font-size: 13px !important; color: var(--ink-3) !important; }
.fine a, .form-card p a { color: var(--ink); }
.spacer { height: 120px; }
.chosen-file { display: flex; gap: 10px; align-items: center; background: var(--paper); border-radius: 12px; padding: 12px 14px; }
.chosen-file svg.i { color: var(--green); }
a.row.plink { text-decoration: none; color: inherit; grid-template-columns: 200px 1fr auto; }
a.row.plink:hover .pkg { text-decoration: underline; text-underline-offset: 3px; }
a.row.plink .badges { margin: 0; }
.app-top .act { font-size: 14px; }

details.decide { margin-top: 8px; }
details.decide summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); list-style: none; }
details.decide summary::before { content: "+ "; font-family: var(--mono); color: var(--ink-2); }
details[open].decide summary::before { content: "− "; }
.decide-form { display: grid; gap: 8px; margin-top: 8px; max-width: 520px; }
.decide-form .input { padding: 9px 12px; font-size: 14px; }
.decide-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.decided { margin: 0; font-size: 14px; color: var(--ink); background: var(--paper); border-radius: 10px; padding: 8px 12px; }

.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 40px 0 0; }
.panel-card { background: var(--paper); border-radius: 22px; padding: 28px; display: grid; gap: 14px; align-content: start; }
.panel-card h2 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.panel-card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.panel-card form { display: grid; gap: 12px; }
.panel-card .btn { justify-self: start; }
.dropzone.small { padding: 20px; background: var(--white); }
.history { list-style: none; margin: 0; padding: 0; display: grid; }
.history li { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.history li[aria-current] a { font-weight: 700; }
.history a { color: var(--ink); font-family: var(--mono); font-size: 13px; }
.history .badges { margin: 0; }
.inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-actions .btn { white-space: nowrap; }  /* na wąskim ekranie przycisk schodzi do nowej linii zamiast łamać napis */

.danger { display: grid; gap: 20px; border-top: 1px solid var(--line); margin: 48px 0 120px; padding-top: 32px; }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; max-width: 720px; }
.inline-form label { grid-column: 1 / -1; font-size: 14px; font-weight: 600; }
.danger-btn { color: var(--red); }
@media (max-width: 900px) {
  .panels { grid-template-columns: minmax(0, 1fr); }
  a.row.plink { grid-template-columns: minmax(0, 1fr); }
  .history li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .inline-form { grid-template-columns: minmax(0, 1fr); }
  .inline-form .act { justify-self: start; }
}
.vlist .why { display: block; margin-top: 2px; }
/* strony bez karty produktu: treść wchodzi na biały stopień, bez pustego pasa pod czernią */
.pull { position: relative; z-index: 2; margin-top: -96px; }
.pull > .pricing { padding-top: 0; }
.pull > .panels:first-child, .pull > .flash + .panels { padding-top: 0; }
@media (max-width: 900px) { .pull { margin-top: -56px; } }


/* przewijanie do sekcji płynnie, a nie skokiem; sekcja zatrzymuje się z oddechem od góry */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
[id] { scroll-margin-top: 24px; }
#verifie, #tarifs, #liste, #danger { scroll-margin-top: 48px; }

/* krótka odpowiedź na kliknięcie: przycisk lekko się wciska */
@media (prefers-reduced-motion: no-preference) {
  .btn, .act, .nav-cta, .billing button { transition: background-color 120ms ease, color 120ms ease, transform 80ms ease; }
  .btn:active, .act:active, .nav-cta:active, .billing button:active { transform: translateY(1px); }
}

/* krótkie strony: stopka zawsze na dole okna, bez białego pasa pod nią */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > .page { flex: 1 0 auto; }
body > footer.site, body > .closing, body > .funnel { flex-shrink: 0; }

/* powiadomienia: zjeżdżają z góry, spod rzędu kafelków nagłówka (wariant 2 z podglądu) */
.toasts { position: fixed; z-index: 80; left: 50%; top: 72px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
.toast { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100vw - 24px)); min-height: 56px; padding: 8px 10px 8px 18px; background: #141417; color: #FFFFFF; border: 1px solid #26262A; border-radius: 14px; font-size: 15px; line-height: 1.4; }
.toast .t-ico { flex: none; width: 24px; display: grid; place-items: center; }
.toast .t-ico svg.i { width: 18px; height: 18px; }
.toast.ok .t-ico { color: #6FD07D; } .toast.err .t-ico { color: #FF8A7A; } .toast.info .t-ico { color: #FFFFFF; }
.toast .t-text { flex: 1; }
.toast .t-act { font: inherit; font-size: 14px; font-weight: 600; color: #FFFFFF; background: none; border: 0; padding: 6px 8px; border-radius: 8px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.toast .t-x { flex: none; line-height: 0; color: #FFFFFF; background: none; border: 0; padding: 6px; border-radius: 8px; cursor: pointer; }
.toast .t-x svg.i { width: 16px; height: 16px; }
.toast .t-act:hover, .toast .t-x:hover { background: #1E1E23; }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toastIn 360ms cubic-bezier(.2,.8,.2,1) both; }
  .toast.out { animation: toastOut 220ms ease-in forwards; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(-72px); } to { opacity: 1; transform: none; } }
  @keyframes toastOut { to { opacity: 0; transform: translateY(-40px); } }
}
.notices { padding: 24px 24px 0; }
@media (max-width: 900px) { .toasts { top: 68px; } .toast { font-size: 14px; } }

/* analiza z prawdziwym postępem: nakładka z kafelkami paczek (zatwierdzona animacja ladowanie-tamis) */
/* Ekran analizy (wariant A z podglądu przejscie-skanu): strona pod spodem powoli się rozmywa i przyciemnia,
   a ciemna karta wyjeżdża z głębi; przy wyjściu karta odchodzi, potem strona wraca do ostrości (analyse.js).
   Kolory karty stałe: w ciemnym motywie aplikacji --black i --white są odwrócone. */
.scanov { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; overflow-y: auto; padding: 24px 16px; pointer-events: none; visibility: hidden;
  background: rgba(4, 4, 3, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: background 560ms cubic-bezier(.2,.7,.2,1), backdrop-filter 560ms cubic-bezier(.2,.7,.2,1), -webkit-backdrop-filter 560ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 560ms; }
.scanov.on { visibility: visible; pointer-events: auto; background: rgba(4, 4, 3, .32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition-delay: 0s; }
html.analysing { overflow: hidden; }
.scanov main { width: min(720px, 100%); background: #040403; color: #FFFFFF; border-radius: 22px; padding: 40px clamp(20px, 5vw, 48px) 32px;
  opacity: 0; transform: translateY(18px) scale(.92); filter: blur(8px);
  transition: opacity 460ms ease, transform 620ms cubic-bezier(.16,1,.3,1), filter 520ms ease; }
.scanov.on main { opacity: 1; transform: none; filter: blur(0); transition-delay: 90ms; }
.scanov.on.off main { opacity: 0; transform: translateY(-10px) scale(1.03); filter: blur(6px); transition-delay: 0s; transition-duration: 260ms, 320ms, 260ms; }
.scanov .file { font-family: var(--mono); font-size: 14px; color: #8D8D96; margin-bottom: 12px; }
.scanov h2 { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -0.035em; margin: 0 0 24px; line-height: 1.1; }
.pgrid { display: grid; grid-template-columns: repeat(18, 1fr); gap: 6px; margin-bottom: 24px; }
.pgrid i { aspect-ratio: 1; border-radius: 8px; background: #111114; opacity: 0; transform: translateY(-10px); transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.8,.2,1), background 260ms ease; }
.pgrid i.in { opacity: 1; transform: none; }
.pgrid i.seen { background: #26262C; }
.pgrid i.vuln { background: #D2402F; }
.pgrid i.dropped { background: #1A1A1F; }
.pgrid i.keep { background: #D2402F; transform: scale(1.18); }
.pgrid.done i:not(.keep) { opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .pgrid.sorting i.seen:not(.vuln) { animation: sorting 1.4s linear infinite; animation-delay: calc(var(--k, 0) * 1ms); }
  @keyframes sorting { 0%, 100% { background: #26262C; } 40% { background: #34343C; } }
}
.psteps { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.psteps li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid #1E1E22; color: #4A4A52; transition: color 300ms ease; }
.psteps li.on { color: #FFFFFF; }
.psteps li.ok { color: #8D8D96; }
.psteps b { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .scanov, .scanov main, .pgrid i, .psteps li { transition: none; } }
@media (max-width: 900px) { .pgrid { grid-template-columns: repeat(12, 1fr); gap: 5px; } .pgrid i { border-radius: 6px; } }

/* onboarding po pierwszym logowaniu (wariant A z podglądu): dwie drogi */
.ob-a { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; padding: 24px; }
.way { border-radius: 22px; padding: 28px; display: grid; gap: 14px; align-content: start; margin: 0; }
.way h2 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.way p { margin: 0; font-size: 15px; }
.way .btn { justify-self: start; }
.way.dark { background: #040403; color: #FFFFFF; }
.way.dark p { color: #B9B9C2; }
.way.dark .input { background: #0F0F12; border-color: #2E2E35; color: #FFFFFF; }
.way.dark .input::placeholder { color: #6E6E78; }
.way.dark .dropzone { background: #0F0F12; border-color: #2E2E35; color: #FFFFFF; }
.way.dark .dropzone b { color: #6E6E78; }
.way.dark .dropzone small { color: #5A5A63; }
.way.dark .dropzone .chosen { color: #FFFFFF; }
.way.dark .btn-white { background: #FFFFFF; color: #040403; }
.way.dark .dropzone.over { background: #17171B; border-color: #FFFFFF; }
.way.dark .dropzone.over b, .way.dark .dropzone:hover b { color: #A4A4AE; }
.way.light { background: var(--paper); }
.way.light p { color: var(--ink-2); }
.ob-next { margin: 0; padding: 0 24px 24px; color: var(--ink-2); font-size: 14px; }
.welcome-flash { margin: 24px 24px 0; }
@media (max-width: 900px) { .ob-a { grid-template-columns: 1fr; padding: 16px; } .way { padding: 22px; } }

.panel-card .state { font-weight: 600; color: var(--ink); }


/* komunikat z panelu (np. przerwa techniczna w niedzielę) */
.site-banner { background: var(--black); color: var(--white); font-size: 14px; text-align: center; border-top: 1px solid #2E2E35; }
.site-banner .wrap { padding: 10px 24px; }

/* strona „Votre avis” */
.kinds { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.kinds legend { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.kind input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kind span { display: inline-block; border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; font-size: 15px; font-weight: 600; cursor: pointer; background: var(--white); }
.kind input:checked + span { background: var(--black); color: var(--white); border-color: var(--black); }
.kind input:focus-visible + span { outline: 2px solid var(--black); outline-offset: 2px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hint-text { margin: 0; font-size: 14px; color: var(--ink-2); }
.closing-note { width: 100%; margin: 8px 0 0; font-size: 14px; color: #B9B9C2; }
.closing-note a { color: var(--white); }

/* języki: kafelek w nagłówku otwiera listę, w stopce zawsze zwykłe linki */
footer.site .langs { display: flex; gap: 16px; width: 100%; padding-top: 4px; }
footer.site .langs a[aria-current] { color: var(--white); font-weight: 600; }

/* strona błędu: kod na białym stopniu */
.err-code { position: relative; z-index: 2; margin-top: -72px; padding-bottom: 64px; display: grid; justify-items: center; gap: 4px; text-align: center; }
.err-code b { font-family: var(--mono); font-weight: 500; font-size: clamp(56px, 8vw, 88px); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.err-code span { font-size: 14px; color: var(--ink-3); }

/* logowanie: GitHub i Google nad formularzem, linki pod spodem */
.auth-form { display: grid; gap: 18px; }
.auth-form .btn { justify-self: start; }
.field .hint { color: var(--ink-3); font-size: 13px; }
.oauth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oauth form { display: grid; }
.form-card .oauth-btn { justify-self: stretch; justify-content: center; gap: 10px; }
.oauth-btn svg.i { width: 18px; height: 18px; flex: none; }
.oauth-btn[disabled] { opacity: .45; cursor: not-allowed; }
.form-card .or-line { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.form-card .auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
@media (max-width: 560px) { .oauth { grid-template-columns: 1fr; } }

/* asystent na stronie głównej: czarny kafelek w rogu, okno z nagłówkiem z siatki */
.as-launch { position: fixed; z-index: 70; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: 14px; background: #040403; color: #FFFFFF; border: 0; font: 600 15px var(--sans); cursor: pointer; box-shadow: 0 0 0 4px #FFFFFF; }
.as-launch svg.i { width: 20px; height: 20px; }
.as-launch[hidden], .as-chat[hidden] { display: none; }
.as-chat { position: fixed; z-index: 70; right: 24px; bottom: 24px; width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 48px)); background: #FFFFFF; color: var(--ink); border: 1px solid var(--line); border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; }
.as-head { position: relative; background: #040403; color: #FFFFFF; padding: 16px 18px; overflow: hidden; }
.as-mini { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; padding: 4px; }
.as-mini i { border-radius: 6px; background: #0B0B0D; }
.as-mini::after { content: ""; position: absolute; inset: -100%; background: linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, 0.06) 50%, transparent 54%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .as-mini::after { animation: miniWaveAs 7s linear infinite; will-change: transform; }
  @keyframes miniWaveAs { from { transform: translate(-30%, -30%); } to { transform: translate(30%, 30%); } }
}
.as-title { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.as-title b { font-size: 16px; letter-spacing: -0.02em; display: block; }
.as-title small { color: #B9B9C2; font-size: 13px; }
.as-close { display: grid; place-items: center; background: #141417; border: 0; color: #FFFFFF; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; flex: none; }
.as-close svg.i { width: 16px; height: 16px; }
.as-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.as-m { max-width: 86%; font-size: 14px; line-height: 1.5; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.as-m.bot { background: var(--paper); border-top-left-radius: 6px; }
.as-m.bot.err { background: #FDECEA; color: #8A1C12; }
.as-m.me { align-self: flex-end; background: #040403; color: #FFFFFF; border-top-right-radius: 6px; }
.as-m a { color: inherit; font-weight: 600; }
.as-suggest { display: grid; gap: 6px; }
.as-suggest[hidden] { display: none; }
.as-suggest button { text-align: left; font: 500 14px var(--sans); background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; cursor: pointer; color: var(--ink); }
.as-suggest button:hover { border-color: var(--ink); }
.as-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.as-typing i { width: 8px; height: 8px; border-radius: 3px; background: #C9C9D3; }
@media (prefers-reduced-motion: no-preference) {
  .as-typing i { animation: asTyping 1.2s infinite; } .as-typing i:nth-child(2) { animation-delay: .15s; } .as-typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes asTyping { 0%, 60%, 100% { background: #C9C9D3; transform: translateY(0); } 30% { background: #040403; transform: translateY(-4px); } }
}
.as-form { border-top: 1px solid var(--line); padding: 12px; display: grid; gap: 8px; }
.as-row { display: flex; gap: 8px; }
.as-row textarea { flex: 1; resize: none; font: 15px var(--sans); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 44px; max-height: 120px; color: var(--ink); background: #FFFFFF; }
.as-send { display: grid; place-items: center; background: #040403; color: #FFFFFF; border: 0; border-radius: 12px; width: 44px; cursor: pointer; flex: none; }
.as-send svg.i { width: 18px; height: 18px; }
.as-note { font-size: 12px; color: var(--ink-2); margin: 0; }
.as-note a { color: inherit; }
@media (max-width: 560px) { .as-launch { right: 16px; bottom: 16px; } .as-chat { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 16px); } }

/* hasło z przyciskiem „pokaż” w polu */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 52px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); cursor: pointer; }
.pw-toggle:hover { color: var(--ink); background: var(--paper); }
.pw-toggle[hidden] { display: none; }
.pw-toggle svg.i { width: 18px; height: 18px; }
.pw-toggle svg:last-child, .pw-toggle[aria-pressed="true"] svg:first-child { display: none; }
.pw-toggle[aria-pressed="true"] svg:last-child { display: block; }

/* 2FA: QR, klucz, kody zapasowe */
.qr { background: #FFFFFF; border-radius: 14px; padding: 8px; justify-self: start; line-height: 0; }
.qr svg { width: 200px; height: 200px; }
.secret { font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.code-input { font-family: var(--mono); font-size: 20px; letter-spacing: 0.12em; max-width: 220px; }
.codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.codes code { display: block; font-family: var(--mono); font-size: 16px; background: var(--white); border-radius: 10px; padding: 10px 12px; }
.btn-line.danger { border-color: #B3261E; color: #B3261E; }

/* funkcja z wyższego planu */
.locked { display: grid; gap: 6px; border: 1px dashed var(--line); border-radius: 14px; padding: 14px 16px; }
.locked p { margin: 0; }

/* wynik skanu kodu */
.code-row .pkg { display: grid; gap: 6px; align-content: start; }
.sev { display: inline-block; justify-self: start; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 2px 8px; background: var(--paper); color: var(--ink); }
.sev.critical { background: #FDECEA; color: #8A1C12; }
.sev.high { background: #FFF1E0; color: #7A3E00; }
.code-why { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.code-fix { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: 15px; }
.code-fix svg.i { flex: none; margin-top: 3px; width: 16px; height: 16px; color: #1E7A2C; }
.places { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.places li { display: grid; gap: 4px; }
.places .where { font-family: var(--mono); font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.places .snip { font-family: var(--mono); font-size: 13px; background: var(--paper); border-radius: 8px; padding: 6px 10px; overflow-x: auto; white-space: pre; }
.code-form { margin: 0; }
.ai-note { font-size: 13px; color: var(--ink-2); }
.code-dismissed { padding: 14px 22px; border-top: 1px solid var(--line); }
.code-dismissed .places li { grid-template-columns: auto 1fr; column-gap: 12px; }
.code-dismissed .ai-note { grid-column: 2; }
.dep-found { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.dep-found svg.i { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.ai-consent b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.way.dark .ai-consent b { color: var(--white); }

/* wyjaśnienie podatności */
.explain { display: grid; gap: 8px; margin-top: 8px; justify-items: start; }
.explain-text { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-line; background: var(--paper); border-radius: 12px; padding: 12px 14px; max-width: 70ch; }
.explain-text.err { color: #8A1C12; }

/* co Tamiso czyta zależnie od wysyłki (formularze analizy) */
.reads { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 14px; }
.reads-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.6fr) minmax(0, 0.9fr); gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); }
.reads-row:first-child { border-top: 0; }
.reads-head { background: var(--paper); font-size: 13px; font-weight: 600; color: var(--ink-2); padding-block: 9px; row-gap: 6px; align-items: start; }
.reads-head .rh-send { grid-row: span 2; align-self: end; }
.reads-head .rh-group { grid-column: span 2; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.reads .reads-head small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--ink-3); }
.reads-row > span:first-child { display: grid; gap: 1px; min-width: 0; }
.reads-row small { font-family: var(--mono); font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.reads .yes { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; }
.reads .yes svg.i { width: 16px; height: 16px; flex: none; }
.reads .no { color: var(--ink-2); }
.way.dark .reads { border-color: #2E2E35; text-align: left; }
.way.dark .reads-row { border-color: #2E2E35; }
.way.dark .reads-head { background: #0F0F12; color: #8D8D96; }
.way.dark .reads-head .rh-group { color: var(--white); border-color: #2E2E35; }
.way.dark .reads .no, .way.dark .reads-row small { color: #8D8D96; }
.way.dark .reads .yes { color: #5FCB6E; }
@media (max-width: 560px) { .reads-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; } .reads-row > :first-child { grid-column: 1 / -1; } .reads-head .rh-send { grid-row: auto; } }

/* wynik: zakładki w karcie (bez JS zwykłe sekcje jedna pod drugą, a zakładki są spisem treści) */
.tabs { display: flex; gap: 4px; padding: 8px 16px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; scroll-margin-top: 80px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px 12px; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .n { font-size: 12px; font-weight: 600; background: var(--paper); color: var(--ink-2); border-radius: 8px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.panel { padding: 24px; scroll-margin-top: 96px; }
.panel + .panel { border-top: 1px solid var(--line); }
.tabbed .panel + .panel { border-top: 0; }
.panel[hidden] { display: none; }
.panel > .app-body { padding: 0; }
.panel-note { margin: 0 0 16px; font-size: 14px; color: var(--ink-2); }
.panel-empty { display: grid; gap: 14px; justify-items: start; }
.panel-empty p { margin: 0; color: var(--ink-2); max-width: 62ch; }

/* podsumowanie: wykres kołowy (poprawić, sprawdzić, odrzucone), pasek ważności, trzy liczby */
.sum { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; }
.donut { position: relative; width: 200px; height: 200px; }
.donut svg { display: block; width: 100%; height: 100%; }
.donut path.fix { fill: var(--red); } .donut path.check { fill: var(--amber); } .donut path.ignore { fill: var(--green); }
.legend i.fix { background: var(--red); } .legend i.check { background: var(--amber); } .legend i.ignore { background: var(--green); }
.donut:hover path:not(:hover) { opacity: .45; }
.donut-c { position: absolute; inset: 46px; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; pointer-events: none; }
.donut-c b { font-size: 38px; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.donut-c b.long { font-size: 30px; }
.donut-c span { font-size: 12.5px; line-height: 1.25; color: var(--ink-2); text-wrap: balance; }
.sum-r { display: grid; gap: 22px; min-width: 0; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 15px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; }
.legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.legend small { grid-column: 2 / -1; margin-top: -6px; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
/* ważność: jedna barwa od jasnej do ciemnej (to skala, nie kategorie) */
:root { --sev-c: #040403; --sev-h: #33333B; --sev-m: #6E6E7D; --sev-l: #A9A9B8; --sev-n: #D9D9E3; }
.s-critical { background: var(--sev-c); } .s-high { background: var(--sev-h); } .s-moderate { background: var(--sev-m); } .s-low { background: var(--sev-l); } .s-none { background: var(--sev-n); }
.sev-chart h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 8px; }
.sevbar { display: flex; gap: 2px; height: 14px; }
.sevbar span { min-width: 4px; border-radius: 4px; }
.sevkey { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.sevkey span { display: inline-flex; align-items: center; gap: 6px; }
.sevkey i { width: 10px; height: 10px; border-radius: 3px; }
.sevkey b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sum-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.sum-facts div { background: var(--paper); border-radius: 14px; padding: 14px 16px; }
.sum-facts b { display: block; font-size: 22px; line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sum-facts b svg.i { width: 22px; height: 22px; color: var(--ink-3); }
.sum-facts span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* plan działania: kolejność ma znaczenie, więc numery */
.sub { font-size: 15px; font-weight: 600; margin: 32px 0 6px; letter-spacing: -0.01em; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(step); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: var(--black); color: var(--white); font-size: 12px; font-weight: 600; }
.steps b { display: block; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.steps li > div > span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.steps .prompt { white-space: pre-line; }

/* higiena projektu */
.hyg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.hyg li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.hyg li:nth-child(-n+2) { border-top: 0; }
.hyg li > svg.i { margin-top: 2px; }
.hyg li.ok > svg.i { color: var(--green); } .hyg li.warn > svg.i { color: var(--amber); } .hyg li.bad > svg.i { color: var(--red); }
.hyg b { font-weight: 600; font-size: 15px; }
.hyg span { display: block; font-size: 14px; color: var(--ink-2); }
.hyg .snip { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12.5px; background: var(--paper); border-radius: 8px; padding: 8px 10px; white-space: pre; overflow-x: auto; }

/* wiersze paczek: wersja „z → na”, tytuł, znaczniki, numer podatności */
.row .ver { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.row .ver b { color: var(--ink); font-weight: 500; }
.row .ver svg.i { width: 14px; height: 14px; }
.row .v-title { font-weight: 500; }
.row .badges + .cve { margin-top: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; }
.badge.dark { background: var(--black); color: var(--white); }
.sev-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--sev-m); }
.sev-dot.critical { background: var(--sev-c); } .sev-dot.high { background: var(--sev-h); } .sev-dot.low { background: var(--sev-l); }
.sum-facts a { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.hyg .act { margin-top: 10px; }

@media (max-width: 760px) {
  .panel { padding: 20px 16px; }
  .tabs { padding: 4px 8px 0; }
  .sum { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 20px; }
  .sum-r { width: 100%; }
  .sum-facts { grid-template-columns: minmax(0, 1fr); }
  .steps li { grid-template-columns: 28px minmax(0, 1fr); }
  .steps li > .act, .steps li > span:last-child { grid-column: 2; justify-self: start; }
  .hyg { grid-template-columns: minmax(0, 1fr); }
  .hyg li:nth-child(2) { border-top: 1px solid var(--line); }
}
.code-row { align-items: start; }

/* Mapa kodu (_codemap.html): wejścia, funkcje w plikach, miejsca docelowe; błąd i jego ścieżka w kolorze ważności */
.cmap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 0 20px; }
[data-cm-parts] { min-width: 0; }
.cmap-panel { display: grid; gap: 14px; min-width: 0; }
.cmap-tabs { display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; border-bottom: 1px solid var(--line); }
.cmap-tabs button { all: unset; flex: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cmap-tabs button:hover { color: var(--ink); }
.cmap-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.cmap-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 6px; }
.cmap-tabs .n { font-size: 12px; font-weight: 600; border-radius: 8px; padding: 1px 7px; background: var(--paper); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmap-tabs .n.sev-high { background: var(--cm-high); color: var(--white); }
.cmap-tabs .n.sev-critical { background: var(--cm-crit); color: var(--white); }
.cmap-part { padding-top: 16px; display: grid; gap: 14px; min-width: 0; }
.cmap-part[hidden] { display: none; }
.cmap-part-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cmap-part-head b { font-size: 16px; }
.cmap-part-head span { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.cmap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cmap-card { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); min-width: 0; }
.cmap-card:hover { border-color: var(--ink-3); }
.cmap-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cmap-card.has-issues { background: var(--paper); }
.cmap-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cmap-card-top b { font-family: var(--mono); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.cmap-count { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.cmap-count i { width: 10px; height: 10px; border-radius: 3px; background: var(--ink-3); }
.cmap-count i.sev-high { background: var(--cm-high); }
.cmap-count i.sev-critical { background: var(--cm-crit); }
.cmap-card-sub { font-size: 13px; color: var(--ink-2); }
.cmap-card-file { font-family: var(--mono); font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.cmap-card-res { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.cmap-head h2 { font-size: 18px; margin: 0 0 4px; }
.cmap-head p { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 80ch; }
.cmap-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.cmap-svg { display: block; max-width: 100%; height: auto; }
.cm-lane { font: 600 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; fill: var(--ink-3); }
.cm-grp rect { fill: var(--paper); stroke: var(--line); }
.cm-grp text { font: 500 12px var(--mono); fill: var(--ink-2); }
.cm-node rect { fill: var(--white); stroke: var(--line); stroke-width: 1.2; }
.cm-node .cm-t { font: 500 12.5px var(--mono); fill: var(--ink); }
.cm-node .cm-s { font: 400 11px var(--sans); fill: var(--ink-3); }
.cm-node.entry rect { fill: transparent; stroke: var(--ink-3); stroke-dasharray: 3 3; }
.cm-node.res rect { fill: var(--black); stroke: var(--black); }
.cm-node.res .cm-t { fill: var(--white); }
.cm-node.res .cm-s { fill: var(--ink-3); }
.cm-node.mod rect { stroke-dasharray: 2 2; }
.cm-node.src rect { stroke: var(--cm-high); stroke-width: 1.5; stroke-dasharray: 4 3; }
.cm-node.bad rect { stroke: var(--cm-high); stroke-width: 2; stroke-dasharray: none; }
.cm-node.sev-critical rect { stroke: var(--cm-crit); }
.cm-node .cm-flag { fill: var(--cm-high); stroke: none; }
.cm-node.sev-critical .cm-flag { fill: var(--cm-crit); }
.cm-node.sev-medium rect, .cm-node.sev-low rect { stroke: var(--ink-2); }
.cm-node.sev-medium .cm-flag, .cm-node.sev-low .cm-flag { fill: var(--ink-2); }
.cm-node[data-issue] { cursor: pointer; }
.cm-node[data-issue]:focus { outline: none; }
.cm-node[data-issue]:focus-visible rect { stroke: var(--ink); stroke-width: 2.5; }
.cm-edge path { fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.cm-edge.bad path { stroke: var(--cm-high); stroke-width: 2.4; }
.cm-edge text { font: 400 11px var(--sans); fill: var(--ink-2); paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round; }
.cm-edge.bad text { fill: var(--ink); font-weight: 600; }
.cm-edge.quiet text { display: none; }
.cm-arrow { fill: var(--ink-3); }
.cm-arrow.bad { fill: var(--cm-high); }
.cm-el { transition: opacity .2s; }
.cmap-svg.focus .cm-el:not(.on) { opacity: .14; }
.cmap-svg.focus .cm-edge.on text { display: inline; }
@media (prefers-reduced-motion: reduce) { .cm-el { transition: none; } }
.cmap-key { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--ink-2); }
.cmap-key span { display: inline-flex; align-items: center; gap: 8px; }
.cmap-key i { display: inline-block; width: 20px; height: 12px; border-radius: 4px; }
.cmap-key .k-bad { border: 2px solid var(--cm-high); }
.cmap-key .k-src { border: 1.5px dashed var(--cm-high); }
.cmap-key .k-line { height: 3px; border-radius: 2px; background: var(--cm-high); }
.cmap-key .k-res { background: var(--black); }
.cmap-below { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.cmap-picks { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; }
.cmap-picks button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 10px; border-radius: 10px; font-size: 14px; line-height: 1.35; border: 1px solid transparent; }
.cmap-picks button small { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 2px; overflow-wrap: anywhere; }
.cmap-picks button i { width: 12px; height: 12px; border-radius: 3px; margin-top: 3px; background: var(--line); }
.cmap-picks button i.sev-high { background: var(--cm-high); }
.cmap-picks button i.sev-critical { background: var(--cm-crit); }
.cmap-picks button i.sev-medium, .cmap-picks button i.sev-low { background: var(--ink-3); }
.cmap-picks button:hover, .cmap-picks button[aria-pressed="true"] { background: var(--paper); }
.cmap-picks button[aria-pressed="true"] { border-color: var(--line); }
.cmap-picks button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cmap-detail { min-width: 0; }
.cmap-detail > div { display: grid; gap: 10px; }
.cmap-detail > div[hidden] { display: none; }
.cmap-detail h3 { font-size: 16px; margin: 0; }
.cmap-detail .snip { display: block; font-family: var(--mono); font-size: 12.5px; background: var(--paper); border-radius: 8px; padding: 8px 12px; overflow-x: auto; white-space: pre; }
.cmap-detail .snip .ln { color: var(--ink-3); margin-right: 12px; user-select: none; }
.cmap-detail .code-why, .cmap-detail .code-fix { margin: 0; }
.cmap-sev { display: flex; gap: 10px; align-items: center; }
.cmap-sev .cve { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.cmap-muted { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 70ch; }
.cmap-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.cmap-steps li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.cmap-steps b { font-size: 12px; font-weight: 600; color: var(--ink-3); padding-top: 2px; }
.cmap-steps span { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.cmap-note { margin: 0; font-size: 13px; color: var(--ink-3); max-width: 90ch; }
@media (max-width: 760px) {
  .cmap-below { grid-template-columns: minmax(0, 1fr); }
  .cmap-steps li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media print {
  .cmap-picks, .cmap-detail { display: none; }
}

/* --- menu „Fonctionnalités” w nagłówku (podstrony funkcji); na telefonie te same linki w menu na całym ekranie --- */
.nav-feat { position: relative; }
.nav-feat summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: #B9B9C2; }
.nav-feat summary::-webkit-details-marker { display: none; }
.nav-feat summary:hover, .nav-feat[open] summary { color: var(--white); }
.site-nav.light .nav-feat summary { color: var(--ink-2); }
.site-nav.light .nav-feat summary:hover, .site-nav.light .nav-feat[open] summary { color: var(--ink); }
.nav-feat summary svg.i { width: 16px; height: 16px; }
.nav-feat-list { position: absolute; top: calc(100% + 14px); left: -16px; width: 380px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 8px; display: grid; gap: 2px; z-index: 5; }
.nav-links .nav-feat-list a, .site-nav.light .nav-links .nav-feat-list a, .nav-links .nav-feat-list a:hover { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.nav-feat-list a:hover, .nav-feat-list a:focus-visible, .nav-feat-list a[aria-current] { background: var(--paper); }
.nav-feat-list b { font-size: 15px; font-weight: 600; }
.nav-feat-list span { font-size: 13px; color: var(--ink-2); }
.nav-sheet-feat { display: grid; gap: 2px; }
.nav-sheet-feat span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: #8D8D96; margin-bottom: 6px; }
.nav-sheet-feat a { color: var(--white); text-decoration: none; font-size: 17px; padding: 7px 0; }
@media (max-width: 900px) { .nav-feat { display: none; } }

/* --- makiety: prawdziwe ekrany aplikacji (narzedzia/makiety.py, style w mocks.css), nic się w nich nie klika --- */
.mock { height: 620px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); color: var(--ink); }
/* skala 0,85: okno pokazuje aplikację jak na szerszym ekranie; 730 px × 0,85 ≈ wysokość okna */
.app-mock > .appshell, .report-mock > .report-frame { zoom: .85; }
.app-mock .appshell { min-height: 0; height: 730px; }
.app-mock .aside { position: static; height: 730px; }
/* wiersze siatki w pełnej wysokości: przy stałej wysokości okna siatka ściskałaby karty z overflow: hidden, a ma je uciąć na dole */
.app-mock .appmain { height: 730px; overflow: hidden; grid-auto-rows: max-content; }
.mock.report-mock { background: #EDEDF3; padding: 20px; }
/* w aplikacji ukryte elementy odkrywa jej skrypt; w makiecie (bez skryptu) zostają ukryte, także te z display w CSS */
.mock [hidden], .demo-mock [hidden], .product .app-mock [hidden] { display: none !important; }
.report-mock .sheet { margin: 0 auto; }
/* wąsko: bez skryptu aplikacji jej menu byłoby rozwinięte, więc okno pokazuje samą treść
   (.mock.app-mock: mocks.css ładuje się później i z samym .app-mock .aside wygrywał swoim display: flex) */
@media (max-width: 960px) {
  .mock.app-mock .aside { display: none; }
  .app-mock .appshell { grid-template-columns: minmax(0, 1fr); }
  .app-mock .appmain { height: auto; }
}
@media (max-width: 560px) { .mock { height: 520px; } }

/* hero: karta wyniku na całą szerokość, bez zwiniętych szczegółów pod wierszami (są w aplikacji) */
.product .app.app-mock { max-width: none; }
.product .app .more-row { display: none; }

/* trzy kafle „Ce que Tamiso vérifie”: fragmenty aplikacji w wąskiej kolumnie, kafle równej wysokości */
.sheet2 .demos { align-items: stretch; padding-bottom: 64px; }
.demo { display: flex; flex-direction: column; }
.demo .art { flex: 1; align-content: start; }
.demo-mock { zoom: .9; background: none; display: grid; gap: 12px; }
.demo-mock .vlist, .demo-mock .note { margin: 0; }
.demo-mock .vlist li { grid-template-columns: minmax(0, 1fr); gap: 4px; border-top: 0; padding-top: 0; }
.demo-mock .snip { white-space: pre-wrap; overflow: visible; }
.demo-mock .cmap-detail { display: grid; gap: 18px; padding: 0; border: 0; background: none; }
.demo-mock .cmap-detail > div { display: grid; gap: 8px; }
.demo-mock .cmap-detail h3 { margin: 0; }
.demo-mock .code-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 0 0 14px; }
.demo-mock .code-row + .code-row { padding-top: 14px; }
.art-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.art-foot .cve { color: var(--ink-3); font-size: 12px; font-family: var(--mono); }

/* kafel „Dans l'application”: czarny, w białym arkuszu obok czarnego pasa; przyciski ekranów w prawym górnym rogu */
.inapp { margin: 0 0 56px; background: var(--black); color: var(--white); border-radius: 22px; padding: 40px; scroll-margin-top: 88px; }
.inapp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 40px; margin-bottom: 28px; }
.inapp .section-title { color: var(--white); margin: 0 0 12px; }
.inapp .lead { color: #B9B9C2; max-width: 52ch; margin: 0; font-size: 17px; }
.inapp .mock { border-color: #2E2E35; }
.screens { display: flex; gap: 6px; flex: none; }
.screens button { position: relative; overflow: hidden; font: inherit; font-size: 14px; font-weight: 600; border: 1px solid #2E2E35; background: transparent; color: #B9B9C2; border-radius: 10px; padding: 8px 13px; cursor: pointer; }
.screens button:hover { color: var(--white); border-color: #4A4A52; }
.screens button[aria-selected="true"] { background: var(--white); color: var(--black); border-color: var(--white); }
/* pasek na wybranym przycisku: kiedy przyjdzie następny ekran */
.screens button.run::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--black); transform-origin: left; animation: tab-run 6s linear forwards; }
.inapp.paused .screens button.run::after { animation-play-state: paused; }
@keyframes tab-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mock.slide { animation: screen-in 420ms cubic-bezier(.2, .7, .2, 1); }
@keyframes screen-in { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mock.slide { animation: none; } .screens button.run::after { display: none; } }
.screen-caption { color: #8D8D96; font-size: 15px; margin: 16px 0 0; max-width: 70ch; }
.screen-caption a { color: var(--white); text-underline-offset: 3px; margin-left: 4px; }
@media (max-width: 1120px) {
  .inapp-head { flex-direction: column; align-items: stretch; }
  .screens { flex-wrap: wrap; min-width: 0; }
}
@media (max-width: 560px) {
  .inapp { padding: 24px 16px; margin: 40px 0; border-radius: 16px; }
  .screens { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .screens button { flex: none; }
}

/* --- podstrony funkcji (/features/…) --- */
.fp-section { padding: 96px 0 0; }
.fp-section h2 { font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.04em; margin: 0 0 12px; max-width: 22ch; }
.fp-section > p { color: var(--ink-2); font-size: 18px; max-width: 62ch; margin: 0 0 28px; }
.fp-section .fp-note { margin: 28px 0 0; max-width: 72ch; font-size: 15px; }
.fp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fp-cols h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.02em; }
.fp-cols p { margin: 0; color: var(--ink-2); font-size: 16px; }
.qa { border-top: 1px solid var(--line); }
.qa-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.qa-row h4 { margin: 0; font-size: 17px; letter-spacing: -0.015em; }
.qa-row p { margin: 0; color: var(--ink-2); font-size: 16px; }
.qa-row p code { display: inline-block; margin: 0 6px 6px 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 13.5px; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 10px 0 0; color: var(--ink-2); max-width: 70ch; }
.price-line { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--black); color: var(--white); border-radius: 22px; padding: 28px 32px; margin: 96px 0; }
.price-line b { font-size: 26px; letter-spacing: -0.03em; display: block; }
.price-line span { color: #B9B9C2; }
@media (max-width: 900px) {
  .fp-cols { grid-template-columns: 1fr; }
  .qa-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 560px) {
  .price-line { padding: 22px; margin: 64px 0; }
}