/* Typography, controls and interaction refinements.
   Load order is part of the cascade: keep the numeric prefixes in sequence. */
/* Type scale and touch target sizing. */
:root { --bg: #0b0c0d; --bg-deep: #070808; --surface: #121416; --surface-raised: #191c1e; --surface-warm: #191816; --fg: #f3f0ea; --dim: rgba(243,240,234,0.68); --muted: rgba(243,240,234,0.48); --line: rgba(243,241,234,0.14); --accent: #b3ff48; --accent-soft: #caff7f; --success: #b3ff48; --font: 'Aptos', 'Aptos Display', 'Segoe UI Variable', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --mono: 'JetBrains Mono', 'Courier New', Courier, monospace; --color-ink-950: #0b0c0d; --color-system-900: #141618; --color-paper-50: #f5f3ed; --color-paper-100: #ece9e1; --color-signal-400: #b3ff48; --color-signal-500: #9ee837; --content-max: 1440px; --copy-max: 720px; --section-space: clamp(88px,10vw,156px); --panel-radius: 20px; --control-radius: 999px; --ease-out: cubic-bezier(.16,1,.3,1); --font-sans: "Aptos","Aptos Display","Segoe UI Variable","Segoe UI","Helvetica Neue",Arial,sans-serif; --font-serif: Georgia,Cambria,"Times New Roman",Times,serif; --font-mono: "JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace; --text-display: clamp(3.25rem,8.2vw,7.875rem); --text-section: clamp(2.5rem,5.2vw,4.5rem); --text-card: clamp(1.375rem,2.4vw,2.375rem); --text-body-lg: clamp(1rem,1.25vw,1.1875rem); --text-body: clamp(.9375rem,1vw,1rem); --text-meta: clamp(.6875rem,.8vw,.75rem) }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1, 'liga' 1; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font); scroll-padding-top: 92px }
#main>section { padding: var(--section-space) max(24px,calc((100vw - var(--content-max))/2 + 32px)); scroll-margin-top: 86px }
body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-sans) }
a:focus-visible { outline: 3px solid var(--color-signal-400); outline-offset: 4px }
button:focus-visible { outline: 3px solid var(--color-signal-400); outline-offset: 4px }
[tabindex]:focus-visible { outline: 3px solid var(--color-signal-400); outline-offset: 4px }
.skip-link { position: fixed; left: 12px; z-index: 10000; padding: 12px 16px; text-decoration: none; transform: translateY(-160%); top: max(12px,env(safe-area-inset-top)); font-size: 14px; font-weight: 600; border-radius: 10px; background: var(--color-signal-400); color: var(--color-ink-950) }
/* Intro legibility */
.hs-human .hs-original { font-size: clamp(44px,7vw,110px); font-style: italic; line-height: .92; letter-spacing: -.045em; font-family: var(--font-serif) }
.hs-system .hs-original { font: 500 clamp(40px,6vw,96px)/.95 var(--font); letter-spacing: -.06em; overflow-wrap: anywhere; word-break: normal }
.hs-system .hs-result { font-family: var(--mono); font-size: clamp(28px,4.5vw,64px); color: var(--accent); overflow-wrap: anywhere; word-break: normal }
.hs-label { position: absolute; top: 34px; font: 10px var(--mono); text-transform: uppercase; font-size: 11px; letter-spacing: .14em; opacity: .62 }
.hs-note { position: absolute; left: 50%; bottom: 34px; z-index: 4; translate: -50%; text-transform: uppercase; white-space: nowrap; min-height: 36px; padding: 0 14px; display: flex; align-items: center; justify-content: center; border-radius: var(--control-radius); background: rgba(11,12,13,.88); color: #fff; font: 11px/1.35 var(--font-mono); letter-spacing: .08em }
.hs-bridge { position: absolute; left: 50%; top: 50%; z-index: 4; width: 78px; height: 78px; translate: -50% -50%; border: 0; border-radius: 50%; background: var(--accent); color: #101214; font: 700 15px var(--font); cursor: pointer; transition: transform .45s,border-radius .45s,box-shadow .45s; min-width: 66px; min-height: 66px }
.skip-intro { position: absolute; right: 28px; bottom: 28px; z-index: 12; padding: 12px 16px; border: 1px solid rgba(237,233,227,.25); color: var(--fg); font: 10px var(--mono); text-transform: uppercase; cursor: pointer; min-width: 44px; min-height: 44px; border-radius: var(--control-radius); font-size: 11px; letter-spacing: .1em; background: rgba(11,12,13,.88) }
/* Controls and metadata */
.lang-btn { padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 9px var(--mono); letter-spacing: .12em; cursor: pointer; transition: background .25s,color .25s; min-width: 44px; min-height: 44px; font-size: 11px }
.hitch-intro p { color: var(--dim); max-width: 680px; line-height: 1.65; font-size: var(--text-body-lg) }
#contact .hero-sub { max-width: 620px; font-size: var(--text-body-lg) }
.s-label { display: flex; align-items: center; gap: 18px; font-family: var(--mono); color: var(--muted); text-transform: uppercase; margin-bottom: clamp(48px,6vw,82px); letter-spacing: .16em; font-size: var(--text-meta) }
.hero-eyebrow { font-family: var(--mono); color: var(--dim); text-transform: uppercase; margin-bottom: 22px; letter-spacing: .18em; font-size: var(--text-meta) }
.signal-chip { position: relative; overflow: hidden; border: 1px solid rgba(237,233,227,.1); border-radius: 999px; background: rgba(237,233,227,.025); backdrop-filter: blur(10px); font: 9px var(--mono); color: rgba(237,233,227,.5); letter-spacing: .08em; padding: 8px 11px; font-size: 11px }
.w-tag { font-family: var(--mono); text-transform: uppercase; display: inline-flex; width: max-content; padding: 7px 10px; margin-bottom: 12px; border: 1px solid rgba(169,187,255,.18); border-radius: 999px; background: rgba(120,151,255,.08); letter-spacing: .12em; color: var(--accent-soft); font-size: 11px }
.fit-context { display: block; margin-bottom: 56px; color: var(--accent); font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; font-size: 11px }
.svc-n { font-family: var(--mono); letter-spacing: .18em; display: flex; align-items: center; justify-content: center; width: 38px; height: 30px; border-radius: 999px; background: transparent; color: var(--accent); font-size: 11px }
.svc-tag { font-family: var(--mono); text-transform: uppercase; color: var(--dim); padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; letter-spacing: .1em; border-color: rgba(243,241,234,.16); font-size: 11px }
.w-meta { display: grid; grid-template-columns: minmax(110px,.55fr) 1fr; gap: 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(243,241,234,.14); line-height: 1.45; font-size: 13px }
.hitch-principle p { color: rgba(11,12,13,.64); font-size: 14px; line-height: 1.65 }
.hitch-principle h3 { margin-bottom: 10px; font-weight: 400; font-size: 18px; line-height: 1.18 }
.proc-desc { color: var(--dim); font-weight: 400; max-width: 310px; font-size: 15px; line-height: 1.65 }
.svc-desc { max-width: 720px; font-weight: 400; transition: color .35s; display: block; margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.65 }
.skill { position: relative; display: flex; align-items: center; font-family: var(--font); font-weight: 400; letter-spacing: .01em; text-transform: none; color: var(--dim); border: 0; border-bottom: 1px solid var(--line); padding: 0 8px 0 20px; transition: color .3s,transform .3s; min-height: 54px; font-size: 15px }
.special-card p { font-size: 16px; line-height: 1.7 }
.avail-badge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); text-transform: uppercase; margin-bottom: 44px; font-size: 11px; letter-spacing: .12em; color: rgba(243,241,234,.58) }
.contact-phone { font-weight: 300; text-decoration: none; letter-spacing: .01em; transition: color .3s; display: flex; align-items: center; width: max-content; min-height: 48px; margin-top: 14px; font-size: 16px; color: rgba(243,241,234,.68) }
.footer-nav a { font-family: var(--mono); color: var(--muted); text-decoration: none; text-transform: uppercase; transition: color .3s; font-size: 11px; letter-spacing: .1em }
footer { display: flex; justify-content: space-between; border-top: 1px solid rgba(237,233,227,.05); font-family: var(--mono); color: var(--muted); text-transform: uppercase; padding: 34px max(24px,calc((100vw - var(--content-max))/2 + 32px)); background: var(--color-ink-950); font-size: 11px; letter-spacing: .1em }
/* Interactive project and modal ergonomics */
.w-item:focus-visible { outline: 3px solid var(--color-signal-400); outline-offset: 4px }
.w-item::after { content: attr(data-view-label); position: absolute; font-family: var(--mono); text-transform: uppercase; color: rgba(237,233,227,.5); transition: opacity .3s; right: 34px; bottom: 35px; opacity: .65; font-size: 11px; letter-spacing: .1em }
.modal-close { position: absolute; border: 1px solid rgba(237,233,227,.14); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dim); transition: border-color .3s, color .3s; background: transparent; font-family: inherit; width: 44px; height: 44px; top: 16px; right: 16px; font-size: 15px; cursor: pointer }
.modal-meta { display: flex; align-items: center; gap: 16px; font-family: var(--mono); color: rgba(237,233,227,.35); text-transform: uppercase; margin-bottom: 26px; font-size: 11px; letter-spacing: .12em }
.modal-ol { font-family: var(--mono); text-transform: uppercase; color: rgba(237,233,227,.28); white-space: nowrap; flex-shrink: 0; font-size: 11px; letter-spacing: .12em }
.modal-title { font-weight: 300; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 26px; color: var(--fg); font-size: clamp(1.75rem,3.2vw,2.5rem) }
.modal-desc { line-height: 1.82; color: rgba(237,233,227,.58); font-weight: 300; margin-bottom: 34px; font-size: 15px }
.modal-ov { font-weight: 300; color: var(--fg); line-height: 1.65; font-size: 15px }
.modal-panel { max-height: min(760px,calc(100svh - 40px)); overflow-y: auto; border-radius: 24px; box-shadow: 0 30px 100px rgba(0,0,0,.5); position: relative; z-index: 1; width: min(640px, 90vw); padding: 52px; border: 1px solid rgba(237,233,227,.08); background: rgba(10,10,16,.97); transform: translateY(28px); transition: transform .55s cubic-bezier(.16,1,.3,1); overscroll-behavior: contain }
.modal-link { display: inline-flex; align-self: flex-start; margin-top: 26px; padding: 0 24px; min-height: 46px; align-items: center; border-radius: var(--control-radius); background: var(--accent); color: var(--color-ink-950); font: 700 11px var(--font); letter-spacing: .12em; text-transform: uppercase; transition: box-shadow .3s,transform .3s }
.modal-link:hover { box-shadow: 0 10px 30px rgba(179,255,72,.2); transform: translateY(-2px) }
.modal-link[hidden] { display: none }
@media(max-width:768px) {
  html { scroll-padding-top: 78px }
  #main>section { scroll-margin-top: 74px }
  .primary-nav { top: max(8px,env(safe-area-inset-top)); min-height: 60px; padding-left: max(14px,env(safe-area-inset-left)); padding-right: max(8px,env(safe-area-inset-right)) }
  .nav-logo { font-size: 11px; letter-spacing: .12em }
  .nav-actions { padding-right: 94px }
  .lang-switch { top: max(14px,env(safe-area-inset-top))!important; right: 14px!important }
  .lang-btn { min-width: 44px; min-height: 44px; font-size: 11px }
  .hs-label { font-size: 11px }
  .hs-system .hs-original { font-size: clamp(30px,9.5vw,48px); line-height: 1 }
  .hs-human .hs-original { font-size: clamp(40px,12vw,62px) }
  .hs-result { font-size: clamp(30px,8.5vw,44px) }
  .hs-system .hs-result { font-size: clamp(27px,7.8vw,40px) }
  .hs-note { left: 16px; right: 16px; bottom: max(12px,env(safe-area-inset-bottom)); translate: 0; white-space: normal; text-align: center; font-size: 11px }
  .skip-intro { top: max(14px,env(safe-area-inset-top)); right: 14px; bottom: auto }
  .hero-title { font-size: clamp(2.625rem,12.4vw,3.875rem); line-height: .98; letter-spacing: -.04em; overflow-wrap: normal }
  .hero-eyebrow { font-size: 11px; line-height: 1.45; letter-spacing: .12em }
  .hero-sub { font-size: 16px; line-height: 1.62 }
  .btn-p { font-size: 12px }
  .btn-g { font-size: 12px }
  .signal-chip { font-size: 11px; line-height: 1.35 }
  .w-tag { font-size: 11px }
  .w-meta { font-size: 13px; line-height: 1.5 }
  .w-item::after { opacity: .72; bottom: 20px; right: 22px }
  .hitch-principle p { font-size: 15px }
  .proc-desc { font-size: 15px }
  .svc-desc { font-size: 15px }
  .about-text p { font-size: 15px }
  .fit-card p { font-size: 15px; line-height: 1.65 }
  .special-kicker { font-size: 11px; letter-spacing: .12em }
  .contact-email { display: flex; align-items: center; min-height: 52px; width: 100%; font-size: clamp(14px,4vw,16px); line-height: 1.35; word-break: break-word }
  .contact-phone { min-height: 48px; font-size: 16px }
  .guide-card { grid-template-columns: 112px minmax(0,1fr); gap: 20px; padding: 18px }
  .guide-cover { min-height: 270px; padding: 16px 13px }
  .guide-cover::after { left: 13px; right: 13px; top: 92px }
  .guide-cover strong { margin-top: 38px; font-size: 22px }
  .guide-cover span { left: 13px; bottom: 14px; font-size: 8px }
  .guide-content { padding: 2px 0 }
  .guide-content h3 { margin-top: 14px; font-size: 28px }
  .guide-content p { margin-top: 14px; font-size: 14px }
  .guide-topics { margin-top: 18px }
  .guide-topic { padding: 6px 8px; font-size: 8px }
  .guide-link { padding-top: 22px; font-size: 9px }
  .model-router { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0 }
  .route-core { grid-column: 1/3; grid-row: 1; min-height: 190px }
  .route-core::before { display: none }
  .route-core::after { display: none }
  .route-node:nth-child(n) { grid-column: auto; grid-row: auto; min-height: 130px; padding: 16px }
  .engineering-cases { grid-template-columns: 1fr }
  .engineering-case { min-height: 0; padding: 26px 4px; border-right: 0; border-bottom: 1px solid rgba(11,12,13,.18) }
  .engineering-case:last-child { border-bottom: 0 }
  .case-index { margin-bottom: 24px }
  .modal-panel { padding: 64px 22px 28px }
  .modal-meta { font-size: 11px }
  .modal-desc { font-size: 15px; line-height: 1.68 }
  .modal-ov { font-size: 15px; line-height: 1.68 }
  footer { padding-bottom: max(34px,env(safe-area-inset-bottom)) }
}
@media(max-width:360px) {
  .hero-title { font-size: clamp(2.25rem,11.8vw,2.625rem) }
  .signal-chip { font-size: 10px }
  .nav-logo { max-width: 130px; white-space: normal; line-height: 1.15 }
  .hs-system .hs-original { font-size: 29px }
  .svc-item { grid-template-columns: 34px minmax(0,1fr); gap: 12px }
  /* The guide column is barely wider than one long Czech word at this size. */
  .guide-content h3 { font-size: 24px; overflow-wrap: break-word; hyphens: auto }
}
@media(max-width:768px) and (max-height:650px) {
  .hero { min-height: 650px; padding-top: 92px!important; padding-bottom: 34px!important; justify-content: flex-start }
  .hero-eyebrow { margin-bottom: 12px }
  .hero-title { font-size: clamp(2.25rem,10.8vw,3rem) }
  .hero-sub { margin-top: 16px; font-size: 15px; line-height: 1.5 }
  .hero-cta { margin-top: 20px; gap: 8px }
  .hero-cta .btn-p { min-height: 44px }
  .hero-cta .btn-g { min-height: 44px }
  .signal-strip { margin-top: 14px; gap: 5px }
  .signal-chip { padding: 6px 8px; font-size: 9px }
}