:root {
  --bg: #050506;
  --bg-2: #0c0d0f;
  --ink: #ede8e1;
  --ink-2: rgb(237 232 225 / .75);
  --ink-3: rgb(237 232 225 / .5);
  --line: rgb(255 255 255 / .08);
  --line-2: rgb(255 255 255 / .14);
  --amber: #ffb547;
  --copper: #d9783a;
  --lit: #fff4e0;
  --display: "Funnel Display", system-ui, sans-serif;
  --sans: "Public Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 3.4vw, 48px);
  --out: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: dark; }
html.lenis, html.lenis body { height: auto; }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.mono { font-family: var(--mono); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

/* typ */
.display-xl, .display-l, .display-m, .display-s, h3, .big-tel { font-family: var(--display); font-weight: 600; text-wrap: balance; }
.display-xl { font-size: clamp(48px, 6.9vw, 100px); line-height: .98; letter-spacing: -.035em; }
.display-l { font-size: clamp(44px, 6.6vw, 96px); line-height: .98; letter-spacing: -.036em; }
.display-m { font-size: clamp(36px, 3.9vw, 56px); line-height: 1; letter-spacing: -.05em; }
.display-s { font-size: clamp(28px, 3vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -.027em; }
.lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 440px; }
.body-l { font-size: 19px; line-height: 1.6; color: rgb(237 232 225 / .8); max-width: 62ch; }

/* tlačítka */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--copper); color: var(--bg); font: 600 17px/1 var(--sans); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.btn:hover { background: #e58a4c; }
.btn:active { background: #c56a2f; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 16px; }
.btn-ghost { background: rgb(5 5 6 / .6); border: 1px solid var(--line-2); color: var(--ink); font-weight: 500; }
.btn-ghost:hover { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .28); }
.btn-ghost svg { color: var(--amber); }
.btn-line { height: 40px; border-radius: 2px; background: none; border: 1px solid var(--line-2); color: var(--ink); font: 400 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 0 16px; }
.btn-line:hover { background: rgb(255 255 255 / .05); }

/* navigace */
.nav { position: fixed; inset: 0 0 auto; z-index: 10; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); transition: background-color 250ms ease, border-color 250ms ease; border-bottom: 1px solid transparent; }
.nav.solid { background: rgb(5 5 6 / .72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand-text b { font: 700 24px/1 var(--display); letter-spacing: .08em; }
.brand-text small { font: 400 12px/1 var(--mono); color: var(--copper); letter-spacing: .05em; }
.nav-links { display: flex; gap: 40px; font-size: 16px; }
.nav-links a { color: rgb(237 232 225 / .75); transition: color 150ms ease; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-tel { font: 500 16px/1 var(--mono); }

/* intro */
.intro { height: 320vh; position: relative; }
.has-fly .intro { height: 830vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.bulb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.fly { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0;
  -webkit-mask-image: linear-gradient(#000 calc(100% - var(--fade, 0) * 30%), transparent); mask-image: linear-gradient(#000 calc(100% - var(--fade, 0) * 30%), transparent); }
.lockup { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 39vh var(--gutter) 0; text-align: center; z-index: 2; will-change: transform; }
.lockup h1 { font: 700 clamp(56px, min(10vw, 15vh), 144px)/1 var(--display); letter-spacing: -.028em; text-transform: uppercase; color: var(--lit); }
.lockup h1 > span[data-split] { display: block; }
.ch { display: inline-block; opacity: .05; transform: translateY(.18em); will-change: opacity, transform; }
.sub { margin-top: 36px; font-size: 20px; color: rgb(237 232 225 / .85); opacity: 0; }
.cta { margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; opacity: 0; }
.hint { position: absolute; left: 50%; bottom: 32px; translate: -50% 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); opacity: 0; transition: opacity 400ms ease; z-index: 3; }
.hint.on { opacity: 1; }

/* vysoké napětí */
.vn { position: relative; height: 100vh; min-height: 760px; overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; }
.vn-media { position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 70%, transparent); }
.vn-media img { width: 100%; height: 130%; object-fit: cover; margin-top: -15%; will-change: transform; }
.vn-text { width: 100%; padding-bottom: 14vh; }
/* s průletem přijede text přes poslední snímek hero (rozsvícené město), vlastní fotka odpadá */
.has-fly .vn { margin-top: -100vh; }
.has-fly .vn-media { display: none; }
.facts { display: flex; gap: 40px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-2); max-width: 860px; font-size: 16px; font-weight: 500; color: rgb(237 232 225 / .85); }

/* sekce */
.section { padding: 150px 0 160px; position: relative; }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; margin-bottom: 72px; }
.head .lead { margin-top: 40px; }
.head-stack { flex-direction: column; gap: 20px; margin-bottom: 72px; }
.head-stack .lead { margin: 0; max-width: 560px; }

/* služby */
.services { border-top: 1px solid var(--line); }
.services a { display: grid; grid-template-columns: 72px 1fr auto 40px; align-items: center; height: 104px; border-bottom: 1px solid var(--line); transition: color 150ms ease; }
.services .n { font-size: 13px; color: var(--ink-3); transition: color 150ms ease, transform 150ms var(--out); }
.services .t { font: 500 clamp(32px, 4.2vw, 60px)/1 var(--display); letter-spacing: -.033em; color: rgb(237 232 225 / .85); transition: color 150ms ease, transform 150ms var(--out); }
.services .d { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgb(237 232 225 / .6); text-align: right; }
.services em { font-style: normal; color: var(--amber); }
.services .a { font: 20px var(--mono); color: rgb(237 232 225 / .4); text-align: right; transition: color 150ms ease, transform 150ms var(--out); }
.services a:hover .t, .services a:focus-visible .t { color: var(--copper); transform: translateX(8px); }
.services a:hover .n, .services a:hover .a { color: var(--copper); }
.services a:hover .a { transform: translateX(4px); }
.after-list { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; font-size: 20px; color: rgb(237 232 225 / .8); }
.peek { position: fixed; left: 0; top: 0; width: 320px; aspect-ratio: 3 / 2; overflow: hidden; pointer-events: none; z-index: 5; opacity: 0; scale: .96; transition: opacity 150ms ease, scale 150ms var(--out); border-radius: 2px; }
.peek.on { opacity: 1; scale: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; }

/* jak probíhá zakázka */
.journey { position: relative; }
.j-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.j-track { position: absolute; left: 0; top: 84px; width: 5200px; height: 900px; transform-origin: 0 0; will-change: transform; }
.j-track > * { position: absolute; }
.j-intro { left: 48px; top: 130px; width: 760px; }
.j-intro .lead { margin-top: 28px; }
.j-cable { left: 0; top: 0; width: 5200px; height: 900px; overflow: visible; }
.j-cable path { fill: none; stroke-linecap: round; }
.j-cable .base { stroke: rgb(217 120 58 / .45); stroke-width: 2; }
.j-cable .live { stroke: var(--amber); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.j-lamp { width: 48px; height: 48px; fill: none; stroke: var(--copper); stroke-width: 2; transition: stroke 200ms ease; }
.j-lamp.on { stroke: var(--amber); }
.j-node { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--copper); background: var(--bg); transition: border-color 200ms ease, background-color 200ms ease; }
.j-node::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--amber); opacity: 0; transition: opacity 200ms ease; }
.j-node.on { border-color: var(--amber); background: #1a1206; }
.j-node.on::after { opacity: 1; }
.j-photo { overflow: hidden; will-change: transform; }
.j-photo img { width: 100%; height: 100%; object-fit: cover; }
.j-step { width: 460px; display: flex; flex-direction: column; gap: 14px; }
.j-step.up { height: 344px; justify-content: flex-end; }
.j-step .n { font-size: 13px; color: var(--copper); transition: color 200ms ease; }
.j-step.on .n { color: var(--amber); }
.j-step h3 { font-size: 44px; font-weight: 600; line-height: 1.02; letter-spacing: -.032em; }
.j-step p { font-size: 17px; color: rgb(237 232 225 / .75); max-width: 400px; }
.j-links { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; font: 500 18px/1.3 var(--display); }
.j-links a { color: var(--copper); transition: color 150ms ease; }
.j-links a span { display: inline-block; transition: transform 150ms var(--out); }
.j-links a:hover { color: #e58a4c; }
.j-links a:hover span { transform: translateX(4px); }
.j-links.plain { color: rgb(237 232 225 / .85); }

/* působnost */
.area-sec { padding: 140px 0; }
.area { display: grid; grid-template-columns: 560px 1fr; gap: 96px; align-items: start; }
.area-text .lead { margin-top: 28px; max-width: 560px; }
.towns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.towns a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font: 500 22px/1.2 var(--display); color: rgb(237 232 225 / .75); transition: color 150ms ease; }
.towns a span { font: 15px var(--mono); color: rgb(237 232 225 / .35); transition: color 150ms ease, transform 150ms var(--out); }
.towns a:hover, .towns .main a { color: var(--ink); }
.towns a:hover span, .towns .main span { color: var(--copper); }
.towns a:hover span { transform: translateX(4px); }
.area-map { padding-top: 24px; }
.area-map svg { width: 100%; height: auto; overflow: visible; }
.regions path { fill: var(--bg-2); stroke: rgb(255 255 255 / .14); stroke-width: 1.4; stroke-linejoin: round; transition: fill 150ms ease; }
.regions path.home { fill: rgb(217 120 58 / .18); stroke: var(--copper); stroke-width: 2.2; }
.regions path.home:hover { fill: rgb(217 120 58 / .28); }
.dots circle { fill: var(--amber); }
.seat { fill: var(--amber); }
.seat-ring { fill: none; stroke: var(--amber); stroke-width: 2; }
.leader { stroke: rgb(255 181 71 / .6); stroke-width: 1.4; }
.area-map text { font-family: var(--mono); }
.seat-label { font-size: 19px; fill: var(--ink); }
.area-map .region-label { font: 500 26px var(--display); fill: var(--copper); }
.city-label { font-size: 17px; fill: rgb(237 232 225 / .4); }
.area-map figcaption { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.legend { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: rgb(237 232 225 / .85); }
.legend i { width: 14px; height: 14px; background: rgb(217 120 58 / .18); border: 1.5px solid var(--copper); }
.note { font-size: 13px; color: var(--amber); }

/* dodavatelé */
.suppliers { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 110px 0; }
.suppliers p { font-size: 20px; color: rgb(237 232 225 / .8); }
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 40px; }
.logos li { height: 104px; display: grid; place-items: center; border: 1px dashed rgb(255 255 255 / .16); font-size: 13px; color: var(--ink-3); }

/* otázky */
.faq { display: grid; grid-template-columns: 448px 1fr; gap: 112px; }
.faq-side .lead { margin-top: 32px; }
.faq-side a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.faq-list { border-top: 1px solid var(--line-2); }
.faq-list details { border-bottom: 1px solid var(--line-2); }
.faq-list summary { display: grid; grid-template-columns: 40px 1fr auto 28px; align-items: center; gap: 0 12px; padding: 26px 0; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .n { font-size: 13px; color: rgb(237 232 225 / .4); }
.faq-list details[open] .n { color: var(--copper); }
.faq-list .q { font: 500 clamp(22px, 2.1vw, 30px)/1.15 var(--display); letter-spacing: -.027em; color: rgb(237 232 225 / .85); transition: color 150ms ease; }
.faq-list summary:hover .q, .faq-list details[open] .q { color: var(--ink); }
.faq-list em { font-style: normal; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.faq-list summary i { position: relative; width: 16px; height: 16px; justify-self: end; }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 1.5px; background: rgb(237 232 225 / .6); transition: transform 200ms var(--out), background-color 150ms ease; }
.faq-list summary i::after { transform: rotate(90deg); }
.faq-list details[open] summary i::before { background: var(--copper); }
.faq-list details[open] summary i::after { transform: rotate(0); background: var(--copper); }
.faq-list details p { padding: 0 40px 28px 52px; font-size: 18px; color: rgb(237 232 225 / .75); max-width: 70ch; }
.faq-list details p.todo { color: var(--amber); font: 14px/1.6 var(--mono); }

/* poptávka */
.contact { border-top: 1px solid var(--line); }
.big-tel { display: inline-block; margin-top: 24px; font-size: clamp(64px, 11.8vw, 170px); line-height: 1; letter-spacing: -.041em; color: var(--copper); transition: color 150ms ease; }
.big-tel:hover { color: #e58a4c; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 112px; margin-top: 96px; }
.contact-info > p { font-size: 18px; color: rgb(237 232 225 / .8); max-width: 560px; }
.kv { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line-2); font-size: 20px; max-width: 560px; }
.kv .mono { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.form label { display: flex; flex-direction: column; gap: 10px; }
.form label > .mono { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgb(237 232 225 / .65); }
.form .full { grid-column: 1 / -1; }
.form input:not([type=checkbox]):not([type=file]), .form select, .form textarea { width: 100%; height: 54px; padding: 0 16px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 2px; font-size: 17px; transition: border-color 150ms ease; }
.form textarea { height: auto; padding: 14px 16px; resize: vertical; }
.form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23EDE8E1' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.form ::placeholder { color: rgb(237 232 225 / .45); }
.form input:hover, .form select:hover, .form textarea:hover { border-color: rgb(255 255 255 / .26); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--copper); }
.file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file span { display: flex; align-items: center; justify-content: center; gap: 10px; height: 58px; border: 1px solid var(--line-2); border-radius: 2px; cursor: pointer; font-size: 17px; color: rgb(237 232 225 / .85); transition: border-color 150ms ease, background-color 150ms ease; }
.file span b { font-weight: 400; }
.file span:hover { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .26); }
.file input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 3px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 8px; }
.check { flex-direction: row !important; align-items: flex-start; gap: 12px !important; font-size: 15px; color: rgb(237 232 225 / .7); max-width: 300px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--copper); flex: none; }
.form-msg { min-height: 1em; font-size: 14px; color: var(--amber); }

/* patička */
.footer { border-top: 1px solid var(--line); padding: 110px 0 40px; }
.foot-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.footer address { font-style: normal; margin-top: 40px; font-size: 17px; color: rgb(237 232 225 / .85); }
.foot-contact { margin-top: 24px; }
.foot-ids { margin-top: 24px; font-size: 14px; line-height: 1.7; color: rgb(237 232 225 / .6); }
.footer h4 { font-size: 13px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); margin-bottom: 20px; }
.footer li + li { margin-top: 8px; }
.footer ul a { font-size: 16px; color: rgb(237 232 225 / .75); transition: color 150ms ease; }
.footer ul a:hover { color: var(--ink); }
.foot-bottom { display: flex; justify-content: space-between; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 13px; letter-spacing: .08em; color: rgb(237 232 225 / .6); }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--out), transform 500ms var(--out); }
[data-reveal].in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .nav-links { display: none; }
  .head, .area, .faq, .contact-grid { grid-template-columns: 1fr; display: grid; gap: 48px; }
  .head .lead { margin-top: 0; }
  .services a { grid-template-columns: 48px 1fr 32px; height: auto; padding: 22px 0; }
  .services .d { display: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .nav-tel { display: none; }
  .form { grid-template-columns: 1fr; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .facts { flex-direction: column; gap: 8px; }
  .after-list { flex-direction: column; align-items: flex-start; gap: 20px; }
}


@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .journey .j-stage { position: relative; height: auto; overflow: visible; }
  .j-track { position: relative; top: 0; width: auto; height: auto; margin: 0; padding: 120px var(--gutter); display: flex; flex-direction: column; gap: 40px; transform: none !important; }
  .j-track > * { position: static; transform: none !important; }
  .j-cable, .j-lamp, .j-node { display: none; }
  .j-intro, .j-step { width: auto; }
  .j-step.up { height: auto; }
  .j-photo { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { height: auto; }
  .stage { position: relative; }
  .ch, .sub, .cta { opacity: 1 !important; transform: none !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .peek { display: none; }
}