/* ==========================================================================
   TRANSNIKA — design tokens
   Paleta: asfalt / betón / jantárová značka trasy / oceľová diagnostika
   ========================================================================== */

:root{
  --asphalt:        #15171A;
  --asphalt-soft:    #1E2125;
  --concrete:        #ECE9E2;
  --concrete-soft:   #F4F2ED;
  --route-amber:     #E8A33D;
  --route-amber-dim: #B97E2A;
  --steel:           #3E5868;
  --steel-light:     #6C8694;
  --ink:             #1B1D1F;
  --paper:           #F4F2ED;
  --line-on-dark:    rgba(244,242,237,0.12);
  --line-on-light:   rgba(27,29,31,0.12);

  --display: 'Big Shoulders Display', sans-serif;
  --stencil: 'Big Shoulders Stencil Display', sans-serif;
  --body:    'Work Sans', sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,svg{ display:block; max-width:100%; }

a{ color: inherit; text-decoration:none; }

::selection{ background: var(--route-amber); color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--route-amber);
  outline-offset: 3px;
}

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--route-amber-dim);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px; height:2px;
  background: var(--route-amber);
  display:inline-block;
}

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-transform: uppercase;
}

h1{ font-size: clamp(40px, 6.4vw, 84px); }
h2{ font-size: clamp(30px, 4vw, 48px); }
h3{ font-size: clamp(20px, 2.2vw, 26px); }

p{ max-width: 62ch; }
p.lead{ font-size: 19px; color:#3a3c3e; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing:.04em;
  text-transform: uppercase;
  padding: 14px 24px;
  border: 1.5px solid var(--ink);
  background: transparent;
  cursor:pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ background: var(--ink); color: var(--paper); }
.btn.primary{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn.primary:hover{ background: var(--route-amber); border-color: var(--route-amber); color: var(--ink); }
.btn.on-dark{ border-color: var(--paper); color: var(--paper); }
.btn.on-dark:hover{ background: var(--route-amber); border-color: var(--route-amber); color: var(--asphalt); }

/* ---------- header / nav ---------- */
header.site{
  position: sticky; top:0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line-on-light);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--gutter);
}
.wordmark{
  font-family: var(--stencil);
  font-size: 26px;
  letter-spacing: .02em;
  text-transform: uppercase;
  display:flex; align-items:baseline; gap:8px;
}
.wordmark .dot{ color: var(--route-amber); }
.navlinks{
  display:flex; gap: 28px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing:.04em;
  text-transform: uppercase;
}
.navlinks a{
  position:relative; padding-bottom:4px;
  opacity:.72;
  transition: opacity .15s ease;
}
.navlinks a:hover, .navlinks a.is-active{ opacity:1; }
.navlinks a.is-active::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px;
  background: var(--route-amber);
}
.navtoggle{ display:none; }
.header-lang{ }

@media (max-width: 760px){
  .navlinks{
    position:fixed; inset: 64px 0 0 0; background:var(--paper);
    flex-direction:column; gap:0; padding: 10px var(--gutter) 30px;
    transform: translateY(-110%); transition: transform .25s ease;
  }
  .navlinks.is-open{ transform: translateY(0); }
  .navlinks a{ padding: 16px 0; border-bottom:1px solid var(--line-on-light); opacity:1; }
  .navtoggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
  }
  .header-lang{ display:none; }
  .navtoggle span{ width:22px; height:2px; background:var(--ink); }
}

/* ---------- route line — signature element ---------- */
.routeline{
  position:relative;
  padding: 36px 0 10px;
}
.routeline svg{ width:100%; height:auto; display:block; }
.routeline .marker-label{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.03em;
}

/* ---------- sections, generic ---------- */
section{ padding: clamp(56px, 9vw, 120px) 0; }
.section-dark{ background: var(--asphalt); color: var(--paper); }
.section-dark h1, .section-dark h2, .section-dark h3{ color: var(--paper); }
.section-dark p{ color: #C9C7C1; }
.section-soft{ background: var(--concrete-soft); }

.rule{ height:1px; background: var(--line-on-light); border:none; margin: var(--gutter) 0; }
.section-dark .rule{ background: var(--line-on-dark); }

.grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gutter); }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
@media (max-width: 860px){ .grid3, .grid2{ grid-template-columns: 1fr; } }

.card{
  border-top: 2px solid var(--ink);
  padding-top: 20px;
}
.section-dark .card{ border-top-color: var(--route-amber); }
.card .num{ font-family: var(--mono); font-size:13px; color: var(--route-amber-dim); }
.section-dark .card .num{ color: var(--route-amber); }

.statrow{ display:flex; flex-wrap:wrap; gap: clamp(28px,6vw,80px); }
.stat .figure{
  font-family: var(--display); font-size: clamp(36px,5vw,58px); line-height:1;
}
.stat .label{ font-family: var(--mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--steel); margin-top:6px; }
.section-dark .stat .label{ color: var(--steel-light); }

table.specs{
  width:100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 14px;
}
table.specs th, table.specs td{
  text-align:left; padding: 13px 10px; border-bottom: 1px solid var(--line-on-light);
}
table.specs th{
  text-transform:uppercase; letter-spacing:.04em; font-size:12px; color:var(--steel);
}

.tag{
  display:inline-block; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  text-transform:uppercase; border:1px solid var(--ink); padding:4px 9px; border-radius:2px;
}

.note{
  font-family: var(--mono); font-size: 13px; color: var(--steel);
  border-left: 2px solid var(--route-amber); padding-left: 14px;
}

/* ---------- footer ---------- */
footer.site{
  background: var(--asphalt); color: var(--concrete);
  padding: 50px 0 30px;
}
footer.site .wordmark{ color: var(--paper); }
footer.site .navlinks{ flex-wrap:wrap; }
footer.site .cols{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gutter); }
@media (max-width:760px){ footer.site .cols{ grid-template-columns:1fr; gap:30px; } }
footer.site h4{
  font-family: var(--mono); text-transform:uppercase; font-size:12.5px; letter-spacing:.06em;
  color: var(--steel-light); margin-bottom:14px; font-weight:600;
}
footer.site p, footer.site a{ font-size:14.5px; color:#C9C7C1; }
footer.site .legal{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line-on-dark);
  font-family:var(--mono); font-size:12px; color:#8b8d8f; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ---------- hero (home) ---------- */
.hero{ padding-top: clamp(50px,8vw,100px); padding-bottom: 0; }
.hero .lead{ margin-top:22px; }
.hero .cta-row{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }

/* ---------- logo icon + language switcher ---------- */
.brandmark{ display:flex; align-items:center; gap:10px; }
.brandmark svg{ width:30px; height:30px; flex-shrink:0; }
.langswitch{
  display:flex; gap:10px; align-items:center;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
}
.langswitch a{ opacity:.6; }
.langswitch a:hover{ opacity:1; }
.langswitch a.is-current{ opacity:1; color:var(--route-amber-dim); border-bottom:1.5px solid var(--route-amber); }
.langswitch span.soon{ opacity:.32; cursor:default; }
footer.site .langswitch{ margin-top:14px; }
footer.site .langswitch a, footer.site .langswitch span{ color:#9a9b96; }
footer.site .langswitch a.is-current{ color: var(--route-amber); border-bottom:1.5px solid var(--route-amber); }

/* ---------- product photo cards ---------- */
.productcard{
  display:grid; grid-template-columns: 260px 1fr; gap:32px; align-items:center;
  padding:28px 0; border-top:1px solid var(--line-on-light);
}
.productcard:last-child{ border-bottom:1px solid var(--line-on-light); }
.productcard img{ width:100%; height:auto; border:1px solid var(--line-on-light); background:#fff; }
.productcard .pc-model{ font-family:var(--display); font-size:clamp(24px,3vw,32px); text-transform:uppercase; }
.productcard .pc-pos{ font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--route-amber-dim); margin-bottom:8px; }
.productcard .pc-sizes{ font-family:var(--mono); font-size:14px; line-height:1.7; margin-top:10px; }
.productcard .pc-sizes div{ border-bottom:1px solid var(--line-on-light); padding:6px 0; display:flex; justify-content:space-between; gap:16px; }
@media (max-width:680px){
  .productcard{ grid-template-columns:1fr; }
  .productcard img{ max-width:280px; margin:0 auto; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .routeline .draw, .reveal{ animation:none !important; transition:none !important; }
}

.draw{
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: drawline 1.8s ease forwards .2s;
}
@keyframes drawline{ to{ stroke-dashoffset:0; } }

.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }