/* Noircraft Lab 2026 - components. Port of design-system/bundle.css (mockup v41, 11.10.2026).
   Changes against the bundle: image paths point to theme files; the .czk rule (crowns) is removed (prices only in €);
   .nc-full-m = full-width button on 390 (mockup frames f03/f04); hop (letter hop) and faq-a states added.
   All values come from tokens.css. */

.nc-root { background: var(--bg); color: var(--ink); font-family: var(--font-sans); }
.nc-root a { color: var(--ink); }
.nc-serif { font-family: var(--font-serif); font-weight: 400; }

/* Button (NcButton, Iteration 3; task 1.1 §A1): body + plate with five chevrons of ten dots on the left, label on the right.
   Rest: plate 40 px (nc-sm 32 px), only the first chevron visible, dots still. Hover / focus-visible: the plate grows to
   calc(100% - 6px) in .25s cubic-bezier(.65,0,.35,1), turns gold, the label sits on it in on-gold, the dots twinkle.
   The chevron zone keeps the rest width of the plate. Markup comes from nc_button() only. */
.nc-btn { position: relative; display: inline-flex; align-items: center; height: 48px; padding: 0 20px 0 62px; border-radius: var(--radius-12); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 600 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap; box-sizing: border-box; cursor: pointer; overflow: hidden; flex-shrink: 0; transition: color .2s, border-color .18s ease, box-shadow .18s ease; }
.nc-btn .pl { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 40px; border-radius: var(--radius-8); background: var(--ink); display: flex; align-items: center; overflow: hidden; z-index: 1; transition: width .25s cubic-bezier(.65, 0, .35, 1), background-color .2s; }
.nc-btn .dots { display: flex; align-items: center; gap: 10px; height: 100%; width: 37px; padding-left: 13px; flex: none; overflow: hidden; box-sizing: border-box; }
.nc-btn .chev { flex: none; display: block; overflow: visible; }
.nc-btn .ncdot { transform-box: fill-box; transform-origin: center; }
.nc-btn .lb { position: relative; z-index: 2; transition: color .2s; }
.nc-main { box-shadow: var(--glow-main); }
.nc-main .pl { background-color: var(--gold); }
.nc-btn:hover, .nc-btn:focus-visible, .nc-btn.is-hover, .nc-btn.is-focus { color: var(--on-gold); border-color: var(--gold-line-plate); }
.nc-btn:hover .pl, .nc-btn:focus-visible .pl, .nc-btn.is-hover .pl, .nc-btn.is-focus .pl { width: calc(100% - 6px); background-color: var(--gold); }
.nc-btn:hover .ncdot, .nc-btn:focus-visible .ncdot, .nc-btn.is-hover .ncdot, .nc-btn.is-focus .ncdot { animation: ncdot 1.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes ncdot { 0%, 70%, 100% { opacity: .25; transform: scale(.85); } 35% { opacity: 1; transform: scale(1); } }
.nc-btn:not(.nc-main):hover, .nc-btn.is-hover:not(.nc-main) { box-shadow: var(--glow-btn-hover); }
.nc-btn:focus-visible, .nc-btn.is-focus { outline: 2px solid var(--ink); outline-offset: 3px; }
.nc-sm { height: 40px; padding: 0 16px 0 50px; font-size: 14px; }
.nc-sm .pl { width: 32px; }
.nc-sm .dots { width: 32px; padding-left: 9px; }
.nc-full { display: flex; width: 100%; min-height: 52px; height: auto; padding: 8px 20px 8px 66px; font-size: 16px; line-height: 1.25; white-space: normal; justify-content: flex-start; }
.nc-full .pl { width: 44px; }
.nc-full .dots { padding-left: 15px; width: 39px; }
@media (max-width: 767px) {
  .nc-full-m { display: flex; width: 100%; min-height: 52px; height: auto; padding: 8px 20px 8px 66px; font-size: 16px; line-height: 1.25; white-space: normal; justify-content: flex-start; }
  .nc-full-m .pl { width: 44px; }
  .nc-full-m .dots { padding-left: 15px; width: 39px; }
}
@media (prefers-reduced-motion: reduce) {
  .nc-btn, .nc-btn .pl, .nc-btn .lb { transition: none; }
  .nc-btn .ncdot { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Text link */
.nc-link { color: var(--ink); font-size: 15px; text-decoration: underline; text-underline-offset: 5px; }
.nc-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 767px) { .nc-link, .svc .nc-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 16px; } }

/* Letter hop (brief §13, task 1.1 §A2 = Random Letter Swap): .nc-link.hop text links and, since stage 2, card links
   with a text holder (a.hop[data-hop-text] > .hop__t: previous / next case). Markup built by letter-hop.js.
   Each letter is a window (overflow hidden) with two copies; on hover the top copy leaves upward and the bottom one
   arrives, in a random order (delay = position in the shuffled order x 0.025 s), 0.6 s cubic-bezier(.34,1.56,.64,1). */
.nc-link.hop.is-split { display: inline-block; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; line-height: 1.25; }
@media (max-width: 767px) { .nc-link.hop.is-split { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.25; } }
.hop .hop__w { display: inline-block; white-space: nowrap; }
.hop .hop__l { position: relative; display: inline-block; overflow: hidden; vertical-align: top; height: 1.25em; line-height: 1.25; }
.hop .hop__a, .hop .hop__b { display: block; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--hd, 0s); }
.hop .hop__b { position: absolute; inset: 0; transform: translateY(100%); }
.hop.is-hop .hop__a { transform: translateY(-100%); }
.hop.is-hop .hop__b { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .hop .hop__a, .hop .hop__b { transition: none; } .hop.is-hop .hop__a { transform: none; } .hop.is-hop .hop__b { transform: translateY(100%); } }

/* Section title */
.nc-h2 { margin: 0; padding-left: 20px; border-left: 3px solid var(--gold); font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.1; color: var(--ink); text-shadow: var(--text-glow-h2); }
.nc-sub { margin: 14px 0 0 23px; font-size: 18px; line-height: 1.5; color: var(--muted); }
@media (max-width: 767px) {
  .nc-h2 { padding-left: 16px; font-size: 30px; line-height: 1.15; }
  .nc-sub { margin: 12px 0 0 19px; font-size: 16px; }
}

/* Service card */
.svc { position: relative; box-sizing: content-box; height: 420px; border-radius: var(--radius-16); overflow: hidden; background-color: var(--surface); background-position: center; background-size: cover; background-repeat: no-repeat; border: 1px solid var(--gold-line); box-shadow: var(--glow-card); transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease; }
.svc:hover, .svc.is-hover { translate: 0 -4px; border-color: var(--gold-line-hover); box-shadow: var(--glow-card-hover); }
.svc-shade { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(17,17,17,0.10) 0%, rgba(17,17,17,0.72) 42%, var(--surface) 72%); }
.svc-in { position: relative; height: 100%; padding: var(--space-32); box-sizing: border-box; display: flex; flex-direction: column; }
.svc-body { margin-top: auto; }
.svc h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.2; }
.svc p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; }
.svc .nc-link { display: inline-block; margin-top: 18px; }
.ico { box-sizing: content-box; width: 52px; height: 52px; border-radius: var(--radius-12); border: 1px solid var(--gold-line-icon); background: var(--icon-fill); display: flex; align-items: center; justify-content: center; }
.ico img { width: 26px; height: 26px; }
@media (max-width: 767px) {
  .svc { height: 300px; }
  .svc-shade { background: linear-gradient(to top, var(--surface) 38%, rgba(17,17,17,0.70) 66%, rgba(17,17,17,0.15) 100%); }
  .svc-in { padding: 22px; }
  .svc h3 { font-size: 24px; line-height: normal; }
  .svc p { margin-top: 8px; line-height: 1.5; }
  .svc .nc-link { display: inline-flex; margin-top: 0; }
  .ico { width: 46px; height: 46px; border-radius: 11px; }
  .ico img { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .svc { transition: none; } .svc:hover { translate: none; } }

/* Calculator strip */
.calc { display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); min-height: 96px; padding: 0 var(--space-32) 0 40px; box-sizing: border-box; border-radius: var(--radius-16); background: var(--surface); border: 1px solid var(--line-faint); }
.calc p { margin: 0; font-size: 18px; line-height: 1.45; }
@media (max-width: 767px) {
  .calc { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px; }
  .calc p { font-size: 16px; line-height: 1.5; }
}

/* Package */
.pk { position: relative; border-radius: var(--radius-16); background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%); border: 1px solid var(--line); padding: var(--space-32); box-sizing: border-box; display: flex; flex-direction: column; }
.pk h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; }
.pk .price { margin: 14px 0 0; font-family: var(--font-serif); font-size: 48px; line-height: 1; }
.pk ul { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.4; }
.pk li { position: relative; padding-left: 22px; }
.pk li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--gold); box-shadow: var(--glow-bullet); }
.pk-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 15px; color: var(--muted); }
.pk-wrap { position: relative; }
.pk-copy { position: absolute; inset: 0; transform: translate(12px, 12px); border-radius: var(--radius-16); background: var(--surface-stack-pk); border: 1px solid var(--gold-line-stack-pk); }
.pk.is-featured { position: relative; border-color: var(--gold-line-strong); box-shadow: var(--glow-featured); }
.pk.is-featured .price { text-shadow: var(--text-glow-gold); }
.pk-tag { position: absolute; top: -14px; left: var(--space-32); padding: 5px 12px; border-radius: var(--radius-8); background: var(--gold); color: var(--on-gold); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
@media (max-width: 767px) {
  .pk { padding: var(--space-24); }
  .pk h3 { font-size: 24px; }
  .pk .price { margin-top: 12px; font-size: 40px; }
  .pk ul { margin-top: 18px; gap: 8px; }
  .pk-foot { margin-top: 18px; padding-top: 14px; }
  .pk-copy { transform: translate(10px, 10px); }
  .pk-tag { top: -13px; left: var(--space-24); }
}

/* Glass block */
.glass { border-radius: var(--radius-16); background: var(--glass); border: 1px solid var(--line-glass-soft); box-shadow: var(--shadow-glass); padding: 20px 28px; font-size: 16px; line-height: 1.5; }
@media (max-width: 767px) { .glass { padding: 18px 20px; font-size: 15px; line-height: 1.6; } }

/* Work card */
.wk { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-18); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.wk-cov { position: relative; height: 375px; background-color: var(--cover-empty); overflow: hidden; }
.wk-cov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* the panel is a sibling of the cover: on 1360 it floats over the cover's bottom-left corner, on 390 it sits under the cover (f04) */
.wk-panel { position: absolute; left: var(--space-20); top: calc(375px - var(--space-20)); translate: 0 -100%; width: 62%; padding: 18px 20px; box-sizing: border-box; border-radius: var(--radius-14); background: var(--glass-panel); border: 1px solid var(--line-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-panel); }
.wk-type { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.wk-name { margin: 6px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.15; }
.wk-line { margin: 8px 0 0; font-size: 15px; line-height: 1.45; }
.wk-act { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: 16px 20px; } /* A4: pinned to the card bottom */
.wk-act__links { display: flex; align-items: center; gap: 22px; }
.wk-lang { font-size: 14px; color: var(--muted); }
.wk-panel .wk-lang { display: none; }
@media (max-width: 767px) {
  .wk { border-radius: var(--radius-16); }
  .wk-cov { height: 219px; }
  .wk-panel { position: relative; left: auto; top: auto; translate: none; width: auto; margin: -26px 12px 0; padding: 16px 18px; background: var(--glass-panel-m); }
  .wk-name { font-size: 24px; }
  .wk-panel .wk-lang { display: block; margin: 6px 0 0; }
  .wk-act { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 12px 14px; }
  .wk-act > .wk-lang { display: none; }
  .wk-act__links { flex-direction: column; align-items: stretch; gap: 6px; }
}

/* Step: stack of two copies, number on a plate, node on the axis */
.step { position: relative; height: 300px; }
.step-copy { position: absolute; inset: 0; border-radius: var(--radius-16); }
.step-copy.far { transform: translate(16px, 16px); background: var(--surface-stack-2); border: 1px solid var(--gold-line-stack-far); }
.step-copy.near { transform: translate(8px, 8px); background: var(--surface-stack-1); border: 1px solid var(--gold-line-stack); box-shadow: var(--shadow-stack); }
.step-card { position: absolute; inset: 0; border-radius: var(--radius-16); overflow: hidden; background-color: var(--surface); border: 1px solid var(--gold-line); box-shadow: var(--glow-step); }
.step-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.step-shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--surface) 26%, rgba(17,17,17,0.72) 58%, rgba(17,17,17,0.25) 100%); }
.step-text { position: absolute; left: 28px; right: 28px; bottom: 26px; }
.step-text h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; }
.step-text p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; }
.step-num { position: absolute; left: 24px; top: -30px; padding: 4px 16px; border-radius: var(--radius-10); background: var(--bg); border: 1px solid var(--gold-line-plate); box-shadow: var(--glow-plate); font-family: var(--font-serif); font-size: 40px; line-height: 1.1; text-shadow: var(--text-glow-gold); }
.axis { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); box-shadow: var(--glow-axis); }
.axis-node { position: absolute; width: 16px; height: 16px; border-radius: var(--radius-round); background: var(--gold); box-shadow: var(--glow-node); }
.axis-link { position: absolute; height: 1px; background: var(--gold-line-strong); }
@media (max-width: 767px) {
  .step { height: 220px; }
  .step-copy, .step-card { border-radius: 14px; }
  .step-copy.far { transform: translate(12px, 12px); }
  .step-copy.near { transform: translate(6px, 6px); }
  .step-shade { background: linear-gradient(to top, var(--surface) 46%, rgba(17,17,17,0.70) 72%, rgba(17,17,17,0.25) 100%); }
  .step-text { left: 18px; right: 18px; bottom: 16px; }
  .step-text h3 { font-size: 22px; }
  .step-text p { margin-top: 6px; font-size: 15px; line-height: 1.45; }
  .step-num { left: 16px; top: -22px; padding: 2px 12px; border-radius: 8px; font-size: 28px; }
  .axis-node { width: 14px; height: 14px; }
}

/* FAQ */
.faq { border-bottom: 1px solid var(--line-faint); padding-left: 24px; }
.faq.is-open { border-left: 2px solid var(--gold); padding-left: 22px; box-shadow: var(--glow-faq); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 68px; padding: 0 4px 0 0; border: 0; background: transparent; color: var(--ink); text-align: left; font: 400 21px/1.3 var(--font-serif); cursor: pointer; }
.faq-q:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.faq-q svg { flex: 0 0 auto; }
.faq-q .faq-i-minus, .faq-q .faq-i-plus { stroke: var(--ink); }
.faq.is-open .faq-q .faq-i-plus { display: none; }
.faq.is-open .faq-q .faq-i-minus { stroke: var(--gold); }
.faq:not(.is-open) .faq-q .faq-i-minus { display: none; }
.faq-a { margin: 0 0 22px; font-size: 16px; line-height: 1.6; max-width: 760px; }
.faq-a + .faq-a { margin-top: -10px; }
@media (max-width: 767px) {
  .faq { padding-left: 18px; }
  .faq.is-open { padding-left: 16px; }
  .faq-q { gap: 16px; min-height: 64px; padding: 12px 0; font-size: 19px; }
  .faq-a { margin-bottom: 20px; }
}

/* Contact: round icon (task 1.1 §A6, Roman 13.10), numbers taken from the live site 2026-10-13:
   circle 52 px, border 1 px, glyph 26 px, gap 14 px, lift 4 px, .22s cubic-bezier(.22,1,.36,1);
   hover / focus-visible: gold ring (border + 0 0 0 1px rgba(232,201,74,.15), 0 8px 22px -10px gold) and a tip above
   (12 px, letter-spacing .05em, padding 6 10, radius 5, 10 px above the circle). */
/* K-1 (Roman 14.10): the link .ct is the whole cell; the circle is .ct__ic; .ct__label is the name of the link.
   Desktop with hover (>= 768 px): the label is the tip above the circle, shown on hover and focus.
   Phones (< 768 px) and devices without hover: the label is a caption under the circle, always visible (type "caption": 14 / 1.4, --muted). */
.ct { position: relative; display: flex; flex-direction: column; align-items: center; color: var(--ink); text-decoration: none; transition: translate .22s cubic-bezier(.22, 1, .36, 1), color .22s cubic-bezier(.22, 1, .36, 1); }
.ct__ic { display: flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); transition: border-color .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s cubic-bezier(.22, 1, .36, 1); }
.ct__ic svg { display: block; width: 26px; height: 26px; }
.ct:focus-visible { translate: 0 -4px; color: var(--gold); outline: none; }
.ct:focus-visible .ct__ic { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232,201,74,0.15), 0 8px 22px -10px rgba(232,201,74,0.5); outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
  .ct:hover { translate: 0 -4px; color: var(--gold); }
  .ct:hover .ct__ic { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232,201,74,0.15), 0 8px 22px -10px rgba(232,201,74,0.5); }
}
@media (min-width: 768px) and (hover: hover) {
  .ct__label { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 6px; opacity: 0; pointer-events: none; white-space: nowrap; font-size: 12px; letter-spacing: .05em; line-height: 1; color: var(--gold); background: var(--surface-raised); border: 1px solid var(--line); padding: 6px 10px; border-radius: 5px; transition: opacity .22s cubic-bezier(.22, 1, .36, 1), translate .22s cubic-bezier(.22, 1, .36, 1); }
  .ct:hover .ct__label, .ct:focus-visible .ct__label { opacity: 1; translate: -50% 0; }
}
@media (max-width: 767px), (hover: none) {
  .ct { gap: 8px; min-width: 44px; min-height: 44px; }
  .ct__label { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--muted); white-space: nowrap; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .ct, .ct__ic, .ct__label { transition: none; } .ct:hover, .ct:focus-visible { translate: none; } }

/* Fact */
.fact { padding: 16px 18px; border-radius: var(--radius-12); background: var(--scrim-fact); border: 1px solid var(--line-glass-soft); font-size: 15px; line-height: normal; }
@media (max-width: 767px) { .fact { padding: 14px 16px; } }