/* ========== BratisJob • Ponuky (page 2) ========== */

/* Общий раздел */
.section{position:relative;border-bottom:1px solid var(--line);overflow:clip}

/* ---------- Sekcia 1: Hero Isogrid + Magnet chips ---------- */
.offers-hero{
  background:
    radial-gradient(900px 360px at 12% -8%, rgba(60,140,230,.26), transparent 60%),
    radial-gradient(800px 320px at 88% -12%, rgba(90,208,255,.18), transparent 55%);
}
.hero-wrap{display:grid;gap:18px;grid-template-columns:1fr;padding:34px 0 28px}
.hero-copy .eyebrow{
  display:inline-block;font:700 12px/1 Rubik, Inter, sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#cfefff;
  background:rgba(148,224,255,.09);border:1px solid rgba(148,224,255,.28);padding:7px 10px;border-radius:999px;margin-bottom:10px
}
.hero-copy h2{margin:0 0 8px;font:700 26px/1.2 Inter}
.hero-copy .lead{margin:0 0 12px;color:var(--ink-d)}
.chip-belt{display:flex;flex-wrap:wrap;gap:8px}
.chip-magnet{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;
  transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast)
}
.chip-magnet:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.chip-magnet.is-on{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);background:rgba(148,224,255,.08)}

.hero-photos{display:grid;gap:12px;grid-template-columns:1fr}
.ticket{
  margin:0;padding:10px;border-radius:22px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px dashed rgba(125,211,255,.28); position:relative; transition:transform var(--t-med), box-shadow var(--t-med)
}
.ticket::before,.ticket::after{
  content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--bg-0);border:1px solid rgba(255,255,255,.2);transform:translateY(-50%)
}
.ticket::before{left:-8px}.ticket::after{right:-8px}
.ticket:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

.isogrid{
  position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:
    linear-gradient(30deg, rgba(255,255,255,.08) 12%, transparent 12.1%),
    linear-gradient(150deg, rgba(255,255,255,.08) 12%, transparent 12.1%),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 0);
  background-size: 22px 22px, 22px 22px, 11px 11px;
  background-position: 0 0, 0 0, 0 0;
  animation: gridShift 18s linear infinite;
}
@keyframes gridShift{ to{ background-position: 440px 0, -440px 0, 0 0 } }

@media (min-width:720px){
  .hero-wrap{grid-template-columns:1.05fr .95fr;padding-top:46px}
  .hero-copy h2{font-size:32px}
}

/* ---------- Sekcia 2: Filter Playground ---------- */
.filter-play .play-grid{display:grid;gap:16px;padding:26px 0}
.play-copy h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.play-copy p{margin:0 0 10px;color:var(--ink-d)}
.play-chips{display:flex;flex-wrap:wrap;gap:8px}
.pchip{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  cursor:pointer;transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.pchip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.pchip.is-active{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);background:rgba(148,224,255,.08)}

.offer-cards{display:grid;gap:12px;grid-template-columns:1fr}
.offer-card{
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);
  padding:12px;transition:transform var(--t-med), box-shadow var(--t-med), opacity var(--t-fast), filter var(--t-fast)
}
.offer-card header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.offer-card h3{margin:0;font:700 18px/1.2 Inter}
.offer-card .badge{
  display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid rgba(125,211,255,.35);
  background:rgba(148,224,255,.07);color:#dff4ff;font-weight:700;font-size:13px
}
.offer-card.dim{opacity:.45;filter:saturate(.7)}
.play-note{margin:2px 0 0;color:var(--ink-d);font-size:14px}

@media (min-width:720px){ .offer-cards{grid-template-columns:1fr 1fr} }

/* Магнитный ховер */
.hover-magnet{will-change:transform}
.hover-magnet:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* ---------- Sekcia 3: Commute Heatlines ---------- */
.commute-heat .heat-grid{display:grid;gap:16px;padding:26px 0}
.heat-copy h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.heat-copy p{margin:0 0 10px;color:var(--ink-d)}
.route-toggle{display:flex;flex-wrap:wrap;gap:8px}
.rtog{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  cursor:pointer;transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.rtog:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.rtog.is-on{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);background:rgba(148,224,255,.08)}

.heat-map{
  position:relative;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);
  padding:16px;overflow:hidden;min-height:150px
}
.hline{
  position:absolute;left:12px;right:12px;height:4px;border-radius:999px;opacity:0;filter:contrast(1.2);
  background-image: radial-gradient(circle, rgba(148,224,255,.9) 2px, rgba(148,224,255,0) 3px);
  background-size: 18px 4px; background-repeat: repeat-x; animation: routeFlow 2.2s linear infinite;
}
@keyframes routeFlow{ to{ background-position-x: -18px } }
.hline.tram{ top:58px }
.hline.bus{ top:86px; background-image: radial-gradient(circle, rgba(125,211,255,.9) 2px, rgba(125,211,255,0) 3px) }
.hline.bike{ top:114px; background-image: radial-gradient(circle, rgba(98,178,255,.9) 2px, rgba(98,178,255,0) 3px) }

.heat-map[data-rt="tram"] .hline.tram,
.heat-map[data-rt="bus"] .hline.bus,
.heat-map[data-rt="bike"] .hline.bike{ opacity:1 }

.stops{list-style:none;margin:0;padding:0;display:grid;gap:6px;color:var(--ink-d);font-size:14px}

.heat-photos{display:grid;gap:12px;grid-template-columns:1fr}
.heat-photos figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.heat-photos figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
@media (min-width:720px){ .heat-photos{grid-template-columns:1fr 1fr} }

/* Reveal baseline (страница 2) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
/* ---------- Sekcia 1: Gyro-Hero Orbity ---------- */
.gyro-hero{
  background:
    radial-gradient(900px 360px at 14% -8%, rgba(60,140,230,.26), transparent 60%),
    radial-gradient(800px 320px at 90% -10%, rgba(90,208,255,.18), transparent 55%);
}
.gyro-grid{display:grid;gap:18px;grid-template-columns:1fr;padding:36px 0 28px}
.gyro-copy h2{margin:0 0 8px;font:700 26px/1.2 Inter}
.gyro-copy .lead{margin:0 0 12px;color:var(--ink-d)}
.gyro-belt{display:flex;flex-wrap:wrap;gap:8px}
.gchip{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;
  transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast)
}
.gchip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.gchip.is-on{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);background:rgba(148,224,255,.08)}
.micro-note{margin:2px 0 0;color:var(--ink-d);font-size:14px}

.gyro-stage{
  position:relative;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.03);min-height:280px;overflow:hidden;
  transform-style:preserve-3d; transition:transform var(--t-med);
}
.gyro-pole{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(closest-side at 50% 50%, rgba(148,224,255,.12), transparent 70%)}
.orbit{
  --size: 220px; --speed: 26s;
  position:absolute; left:50%; top:50%; width:var(--size); height:var(--size);
  margin-left: calc(var(--size)/-2); margin-top: calc(var(--size)/-2);
  border-radius:50%; pointer-events:none;
  animation: orbitSpin var(--speed) linear infinite;
}
.orbit-b{ --size: 300px; --speed: 32s; }
@keyframes orbitSpin{ to{ transform: rotate(360deg) } }

.satellite{
  position:absolute; left:50%; top:-10px; transform: translateX(-50%);
  padding:10px;border-radius:22px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px dashed rgba(125,211,255,.28); width:min(86%, 360px);
}
.satellite img{display:block;width:100%;height:auto;max-width:350px;border-radius:14px}
.satellite figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}

.polar-bg{position:absolute;inset:0;pointer-events:none;opacity:.18;background:
  radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/22px 22px,
  repeating-conic-gradient(from 0deg, rgba(255,255,255,.06) 0 2deg, transparent 2deg 30deg)}

/* Responsive */
@media (min-width:720px){
  .gyro-grid{grid-template-columns:1.05fr .95fr}
  .gyro-copy h2{font-size:32px}
}

/* ---------- Sekcia 2: Filter Lab + konfety & shuffle ---------- */
.filter-lab .lab-grid{display:grid;gap:16px;padding:26px 0}
.lab-copy h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.lab-copy p{margin:0 0 10px;color:var(--ink-d)}
.lab-chips{display:flex;flex-wrap:wrap;gap:8px}
.lchip{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  cursor:pointer;transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.lchip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.lchip.is-active{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);background:rgba(148,224,255,.08)}
.lab-cards{display:grid;gap:12px;grid-template-columns:1fr}
.bubble-card{
  border:1px solid var(--line);border-radius:24px 16px 22px 14px;background:rgba(255,255,255,.04);
  padding:12px;transition:transform var(--t-med), box-shadow var(--t-med), opacity var(--t-fast), filter var(--t-fast)
}
.bubble-card header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bubble-card h3{margin:0;font:700 18px/1.2 Inter}
.bubble-card .badge{
  display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid rgba(125,211,255,.35);
  background:rgba(148,224,255,.07);color:#dff4ff;font-weight:700;font-size:13px
}
.bubble-card.dim{opacity:.45;filter:saturate(.7)}
.bubble-card.shuffle{animation: shufflePop .35s cubic-bezier(.2,.7,.2,1)}
@keyframes shufflePop{ 0%{transform:scale(.98)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }

@media (min-width:720px){ .lab-cards{grid-template-columns:1fr 1fr} }

/* Konfety (генерятся скриптом) */
.confetti{
  position:absolute; width:6px; height:10px; border-radius:2px;
  background:linear-gradient(180deg,#7dd3ff,#62b2ff);
  animation: fall .7s ease forwards; pointer-events:none;
}
@keyframes fall{
  0%{ transform:translate(0,-6px) rotate(0deg); opacity:0 }
  60%{ opacity:1 }
  100%{ transform:translate(var(--dx, 18px), 28px) rotate(140deg); opacity:.0 }
}

/* ---------- Sekcia 3: Heatlines 2.0 ---------- */
.commute-heat2 .heat2-grid{display:grid;gap:16px;padding:26px 0}
.heat2-copy h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.heat2-copy p{margin:0 0 10px;color:var(--ink-d)}
.rtog2-belt{display:flex;flex-wrap:wrap;gap:8px}
.rt2{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  cursor:pointer;transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.rt2:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.rt2.is-on{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);background:rgba(148,224,255,.08)}

.heat2-map{
  position:relative;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);
  padding:16px;overflow:hidden;min-height:170px
}
.h2line{
  position:absolute;left:12px;right:12px;height:4px;border-radius:999px;opacity:0;
  background-image: radial-gradient(circle, rgba(148,224,255,.9) 2px, rgba(148,224,255,0) 3px);
  background-size: 18px 4px; background-repeat: repeat-x; animation: routeFlow 2.2s linear infinite;
}
@keyframes routeFlow{ to{ background-position-x: -18px } }
.h2line.tram{ top:60px }
.h2line.bus{ top:90px; background-image: radial-gradient(circle, rgba(125,211,255,.9) 2px, rgba(125,211,255,0) 3px) }
.h2line.bike{ top:120px; background-image: radial-gradient(circle, rgba(98,178,255,.9) 2px, rgba(98,178,255,0) 3px) }

.vehicle{
  position:absolute; top:-6px; left:0; width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle, #fff 35%, #7dd3ff 36% 70%, transparent 71%);
  animation: run 3.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(148,224,255,.8));
}
.h2line.tram .vehicle{ animation-duration: 3s }
.h2line.bus .vehicle{ animation-duration: 3.6s }
.h2line.bike .vehicle{ animation-duration: 4.2s }

@keyframes run{ from{ left:0 } to{ left: calc(100% - 12px) } }

.heat2-map[data-rt="tram"] .h2line.tram,
.heat2-map[data-rt="bus"] .h2line.bus,
.heat2-map[data-rt="bike"] .h2line.bike{ opacity:1 }

.stops{list-style:none;margin:0;padding:0;display:grid;gap:6px;color:var(--ink-d);font-size:14px}
.stops li{position:relative;padding-left:18px}
.stops li::before{
  content:""; position:absolute; left:2px; top:.55em; width:8px; height:8px; border-radius:50%;
  background:#7dd3ff; box-shadow:0 0 0 0 rgba(125,211,255,.6);
  animation: ping 2s ease-out infinite;
}
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(125,211,255,.6) } 100%{ box-shadow:0 0 0 14px rgba(125,211,255,0) } }

.heat2-photos{display:grid;gap:12px;grid-template-columns:1fr}
.heat2-photos figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.heat2-photos figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
@media (min-width:720px){ .gyro-grid{grid-template-columns:1.05fr .95fr} .heat2-photos{grid-template-columns:1fr 1fr} }
/* ==== FIX: Gyro-Hero — статичное расположение без вращения ==== */

/* отключаем вращение орбит и делаем их статичными блоками */
.gyro-stage { position: relative; }
.gyro-stage .orbit{
  position: absolute;
  width: auto; height: auto;
  margin: 0; border-radius: 0;
  animation: none !important;   /* никакого кручения */
  transform: none !important;   /* никакого поворота контейнера */
  pointer-events: none;         /* клики не перехватываем */
}

/* карточки больше не абсолютные на окружности — ставим как обычные блоки */
.gyro-stage .orbit .satellite{
  position: relative;
  left: auto; top: auto;
  transform: none !important;
  width: min(320px, 92%);
  pointer-events: auto;         /* чтобы hover/фокус работали */
}

/* расставляем 2 фото по углам сцены, без пересечений */
.gyro-stage .orbit-a{ left: 6%;  top: 8%; }
.gyro-stage .orbit-b{ right: 6%; bottom: 8%; }

/* лёгкий hover вместо вращения */
.gyro-stage .satellite:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }

/* мобильный: кладём их столбиком */
@media (max-width: 720px){
  .gyro-stage{ display: grid; gap: 12px; padding: 10px; }
  .gyro-stage .orbit{ position: static; }
  .gyro-stage .satellite{ width: 100%; }
}
/* ==== FIX: Gyro-Hero — без обрезания, авто-высота, грид ==== */

/* контейнер: вместо фикс. min-height + overflow:hidden -> авто и видимое */
.gyro-stage{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px;
  overflow: visible !important;
  min-height: auto !important;
  transform: none; /* чтобы наклон не влиял на расчёт высоты */
}

/* элементы становятся потоковыми — контейнер сам растягивается по высоте */
.gyro-stage .orbit{
  position: static !important;
  width: auto; height: auto; margin: 0;
  animation: none !important;
  transform: none !important;
  pointer-events: auto;
}

/* карточки занимают всю ширину колонки и не выходят за края */
.gyro-stage .orbit .satellite{
  position: relative; left: auto; top: auto; transform: none !important;
  width: 100%; max-width: 350px; /* соблюдаем глобальное ограничение для картинок */
}

/* на узких экранах — столбиком */
@media (max-width: 900px){
  .gyro-stage{ grid-template-columns: 1fr; }
}
/* ---------- Sekcia 4: Isometric Job Wall ---------- */
.isowall .iso-wrap{display:grid;gap:16px;padding:26px 0}
.iso-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.iso-head p{margin:0 0 10px;color:var(--ink-d)}
.iso-grid{
  display:grid;grid-template-columns:1fr;gap:18px;justify-items:center;
}
.iso-tile{
  margin:0; padding:14px; border:1px dashed rgba(125,211,255,.28);
  border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  width:min(360px, 92%); position:relative; overflow:visible;
}
.iso-tile img{
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* ромб */
  transform: rotate(0.0001deg); /* сглаживание */
}
.iso-tile figcaption{margin-top:10px;font-size:13px;color:var(--ink-d);text-align:center}
.hover-iso{transition:transform var(--t-med), box-shadow var(--t-med)}
.hover-iso:hover{transform:translateY(-2px) scale(1.02); box-shadow:var(--shadow)}

@media (min-width:760px){
  .iso-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}

/* ---------- Sekcia 5: Mzdové pásma podľa smien (RSD) ---------- */
.shifts-bands .sb-wrap{display:grid;gap:16px;padding:26px 0}
.sb-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.sb-head p{margin:0 0 10px;color:var(--ink-d)}
.sb-chips{display:flex;flex-wrap:wrap;gap:8px}
.sb-chip{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--ink);cursor:pointer;transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.sb-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.sb-chip.is-active{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);background:rgba(148,224,255,.08)}

.sb-bars{display:grid;gap:12px}
.sb-row{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center}
.sb-bar{
  position:relative;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);padding:8px 10px;overflow:hidden
}
.sb-bar .fill{
  position:absolute;inset:auto 0 0 0;height:44%;background:linear-gradient(90deg, rgba(98,178,255,.22), rgba(148,224,255,.22));
  transform-origin:left center; transform:scaleX(.4); transition:transform .9s cubic-bezier(.2,.7,.2,1);
  mix-blend-mode:screen; pointer-events:none;
}
.sb-bar .rng{position:relative;color:var(--ink-d);font-style:normal;float:right}

.sb-bars[data-shift="ranna"] .sb-bar.it .fill{ transform:scaleX(.68) }
.sb-bars[data-shift="ranna"] .sb-bar.vyroba .fill{ transform:scaleX(.54) }
.sb-bars[data-shift="ranna"] .sb-bar.logistika .fill{ transform:scaleX(.58) }

.sb-bars[data-shift="nocna"] .sb-bar.it .fill{ transform:scaleX(.74) }
.sb-bars[data-shift="nocna"] .sb-bar.vyroba .fill{ transform:scaleX(.68) }
.sb-bars[data-shift="nocna"] .sb-bar.logistika .fill{ transform:scaleX(.66) }

.sb-bars[data-shift="vikend"] .sb-bar.it .fill{ transform:scaleX(.6) }
.sb-bars[data-shift="vikend"] .sb-bar.vyroba .fill{ transform:scaleX(.7) }
.sb-bars[data-shift="vikend"] .sb-bar.logistika .fill{ transform:scaleX(.72) }

.sb-photos{display:grid;gap:12px;grid-template-columns:1fr}
.sb-photos figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.sb-photos figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
@media (min-width:720px){ .sb-photos{grid-template-columns:1fr 1fr} }

/* ---------- Sekcia 6: Mini-projekty — reel ---------- */
.projects-reel .pr-wrap{display:grid;gap:16px;padding:26px 0}
.pr-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.pr-head p{margin:0 0 10px;color:var(--ink-d)}

.reel{
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);overflow:hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.track{
  display:flex;gap:12px;align-items:center; padding:10px;
  animation: reelRun 18s linear infinite;
}
.reel:hover .track{ animation-play-state: paused; }
@keyframes reelRun{
  from{ transform: translateX(0) }
  to{ transform: translateX(-50%) }
}
.chip{
  flex: 0 0 auto; padding:8px 12px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:var(--ink-d);
  transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.chip:hover{ transform: translateY(-2px); background: rgba(255,255,255,.08); border-color: rgba(125,211,255,.35) }

.pr-photos{display:grid;gap:12px;grid-template-columns:1fr}
.pr-photos figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.pr-photos figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
@media (min-width:720px){ .pr-photos{grid-template-columns:1fr 1fr} }
/* ---------- Sekcia 7: ZigZag Showcase ---------- */
.zigzag .zig-wrap{display:grid;gap:16px;padding:26px 0}
.zig-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.zig-head p{margin:0 0 10px;color:var(--ink-d)}

.zig{display:grid;gap:14px;align-items:center}
.zig-fig{margin:0;padding:12px;border:1px dashed rgba(125,211,255,.28);border-radius:22px;background:rgba(255,255,255,.04)}
.zig-fig figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
.zig-copy h3{margin:0 0 6px;font:700 20px/1.25 Inter}
.zig-copy p{margin:0 0 10px;color:var(--ink-d)}
.zig-pills{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.zig-pills li{padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:14px;color:var(--ink-d)}

@media (min-width:820px){
  .zig{grid-template-columns:1fr 1fr}
  .zig-right .zig-fig{order:2}
  .zig-right .zig-copy{order:1;text-align:right}
}

/* ---------- Sekcia 8: Certifikačná mapa ---------- */
.cert-map .cert-wrap{display:grid;gap:16px;padding:26px 0}
.cert-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.cert-head p{margin:0 0 10px;color:var(--ink-d)}
.cr-chips{display:flex;flex-wrap:wrap;gap:8px}
.cr-chip{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--ink);cursor:pointer;transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.cr-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.cr-chip.is-active{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);background:rgba(148,224,255,.08)}

.map-board{
  position:relative;border:1px solid var(--line);border-radius:18px;background:
    radial-gradient(600px 280px at 20% -20%, rgba(98,178,255,.12), transparent 60%),
    rgba(255,255,255,.03);
  padding:18px;min-height:240px;overflow:hidden;
}
/* „spoje“ – мерцающие линии */
.map-board::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:
    repeating-linear-gradient(45deg, rgba(148,224,255,.08), rgba(148,224,255,.08) 2px, transparent 2px, transparent 14px);
  animation: netShift 18s linear infinite;
}
@keyframes netShift{ to{ transform: translateX(-40px) } }

.node{
  position:absolute; padding:6px 10px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.06); color:#dff4ff; font-weight:700; font-size:14px;
  filter:saturate(.75); transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}
.node:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
/* расстановка узлов (проценты) */
.n1{left:8%; top:14%}   .n2{left:36%; top:10%}
.n3{left:66%; top:18%}  .n4{left:16%; top:56%}
.n5{left:42%; top:50%}  .n6{left:74%; top:58%}
.n7{left:54%; top:80%}

/* подсветка наборов */
.map-board[data-set="it"] .n1,
.map-board[data-set="it"] .n2,
.map-board[data-set="it"] .n3{ background:rgba(148,224,255,.14); filter:saturate(1.1) }
.map-board[data-set="vyroba"] .n4,
.map-board[data-set="vyroba"] .n5{ background:rgba(148,224,255,.14); filter:saturate(1.1) }
.map-board[data-set="logistika"] .n6,
.map-board[data-set="logistika"] .n7{ background:rgba(148,224,255,.14); filter:saturate(1.1) }

/* миниатюры в углах */
.c-thumb{margin:0; position:absolute; width:min(46%, 360px); padding:10px; border:1px solid var(--line);
  border-radius:18px; background:rgba(255,255,255,.05)}
.c-thumb figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
.c-thumb.tl{left:8px; top:8px}
.c-thumb.br{right:8px; bottom:8px}

@media (max-width:720px){
  .c-thumb{position:static; width:100%; margin-top:10px}
  .map-board{min-height: auto}
}

/* ---------- Sekcia 9: Živé hodnotenia ---------- */
.live-reviews .rv-wrap{display:grid;gap:16px;padding:26px 0}
.rv-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.rv-head p{margin:0 0 10px;color:var(--ink-d)}

.rv-grid{display:grid;gap:16px}
.rv-photos{position:relative}
.rv-photos figure{margin:0 0 12px 0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.rv-photos figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
.rv-list{display:grid;gap:12px}
.review{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);padding:12px}
.review header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.review p{margin:8px 0 0;color:var(--ink-d)}

.stars{position:relative;display:inline-block;font-size:18px;line-height:1}
.stars::before{content:"★★★★★";color:rgba(255,255,255,.18)}
.stars::after{
  content:"★★★★★";position:absolute;left:0;top:0;width:0;color:#ffe08a;white-space:nowrap;overflow:hidden;
  text-shadow:0 0 6px rgba(255,214,120,.35);
}

@media (min-width:900px){
  .rv-grid{grid-template-columns: .9fr 1.1fr; align-items:start}
  .rv-photos{position:sticky; top:84px}
}
/* ===== 10. Scroll-snap strip ===== */
.spotstrip .strip-wrap{display:grid;gap:16px;padding:26px 0}
.strip-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.strip-head p{margin:0 0 10px;color:var(--ink-d)}

.snap{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch; padding:6px;
}
.snap-item{
  flex:0 0 86%; scroll-snap-align:center;
  border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.04);
  padding:10px;
}
.snap-item.copy h3{margin:0 0 6px;font:700 18px/1.2 Inter}
.snap-item.copy .badge{
  display:inline-block;margin:6px 0;padding:6px 10px;border-radius:999px;border:1px solid rgba(125,211,255,.35);
  background:rgba(148,224,255,.07);color:#dff4ff;font-weight:700;font-size:13px
}
.belt{list-style:none;margin:8px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.belt li{padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:14px;color:var(--ink-d)}

.snap-progress{height:4px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:8px;overflow:hidden}
.snap-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg, rgba(98,178,255,.3), rgba(148,224,255,.6));transition:width .2s}

@media (min-width:980px){
  .snap{overflow:visible;scroll-snap-type:none;padding:0}
  .snap-item{flex:1 1 auto}
  .snap{display:grid;grid-template-columns:1fr 1fr 1fr}
  .snap-progress{display:none}
}

/* ===== 11. Skill Dial ===== */
.skill-dial .dial-wrap{display:grid;gap:16px;padding:26px 0}
.dial-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.dial-head p{margin:0 0 10px;color:var(--ink-d)}
.dial-ctrl{display:grid;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.dchip,.dskill{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  cursor:pointer;transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.dchip:hover,.dskill:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.dchip.is-active,.dskill.is-active{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);background:rgba(148,224,255,.08)}

.dial-grid{display:grid;gap:14px;grid-template-columns:1fr}
.dial-photo{margin:0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:18px;background:rgba(255,255,255,.04)}
.dial-photo figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}

.dial{
  --angle: 0deg;
  width:240px;height:240px;margin:0 auto;border-radius:50%;
  position:relative;border:1px solid var(--line);background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(125,211,255,.15);
}
.rings{position:absolute;inset:10px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(148,224,255,.18) 0 1px, transparent 1px 100%),
    radial-gradient(circle, transparent 58%, rgba(255,255,255,.06) 59% 60%, transparent 60% 100%);}
.pointer{
  position:absolute;left:50%;top:50%;width:38%;height:2px;background:linear-gradient(90deg,#7dd3ff,transparent);
  transform-origin:left center;transform:rotate(var(--angle));border-radius:999px;filter:drop-shadow(0 0 4px rgba(148,224,255,.6))
}
.dial-center{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:36px 12px
}
.dial-center strong{font:700 16px/1 Inter}
.dial-center span{color:var(--ink-d);font-size:13px}

@media (min-width:900px){
  .dial-grid{grid-template-columns:1fr auto 1fr;align-items:center}
  .dial-photo.left{justify-self:start}
  .dial-photo.right{justify-self:end}
}

/* ===== 12. Ladder ===== */
.ladder .ladder-wrap{display:grid;gap:16px;padding:26px 0}
.ladder-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.ladder-head p{margin:0 0 10px;color:var(--ink-d)}

.ladder-grid{display:grid;gap:14px;grid-template-columns:1fr}
.ladder-photo{margin:0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:18px;background:rgba(255,255,255,.04)}
.ladder-photo figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}

.ladder-steps{position:relative;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:14px 14px 14px 40px}
.ladder-bar{position:absolute;left:18px;top:14px;bottom:14px;width:4px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.ladder-bar span{display:block;height:0;width:100%;background:linear-gradient(180deg, rgba(98,178,255,.3), rgba(148,224,255,.6))}
.ladder .steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ladder .steps li{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);padding:10px;transition:transform .3s, box-shadow .3s}
.ladder .steps li strong{display:block}
.ladder .steps li span{display:block;color:var(--ink-d)}
.ladder .steps li.is-on{transform:translateX(6px);box-shadow:var(--shadow)}

@media (min-width:980px){
  .ladder-grid{grid-template-columns:.9fr 1.2fr .9fr;align-items:start}
  .ladder-photo.a{position:sticky;top:84px}
  .ladder-photo.b{position:sticky;top:84px}
}
/* ---------- 13. Mosaic Grid ---------- */
.mosaic-grid .mos-wrap{display:grid;gap:16px;padding:26px 0}
.mos-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.mos-head p{margin:0 0 10px;color:var(--ink-d)}
.mos-grid{
  display:grid; gap:12px; grid-template-columns:1fr; align-items:start;
}
.mos-item{margin:0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:18px;background:rgba(255,255,255,.04);
  transition:transform var(--t-med), box-shadow var(--t-med)}
.mos-item img{display:block;width:100%;height:auto;max-width:350px;border-radius:12px}
.mos-item figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
.mos-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
/* разные пропорции */
.mos-item.tall img{aspect-ratio:3/4;object-fit:cover}
.mos-item.wide img{aspect-ratio:4/3;object-fit:cover}
.mos-item.mid img{aspect-ratio:5/4;object-fit:cover}
/* лёгкие наклоны */
.mos-item.left{transform:rotate(-1.2deg)}
.mos-item.right{transform:rotate(1.1deg)}
.mos-item.left:hover,.mos-item.right:hover{transform:rotate(0deg) translateY(-2px)}

@media (min-width:860px){
  .mos-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mos-item.tall{grid-row:span 2}
}

/* ---------- 14. Benefits Ticker ---------- */
.benefits-ticker .ben-wrap{display:grid;gap:16px;padding:26px 0}
.ben-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.ben-head p{margin:0 0 10px;color:var(--ink-d)}
.ben-chips{display:flex;flex-wrap:wrap;gap:8px}
.ben-chip{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  cursor:pointer;transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.ben-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.ben-chip.is-active{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);background:rgba(148,224,255,.08)}

.ben-grid{display:grid;gap:12px}
.ben-photos{display:grid;gap:12px;grid-template-columns:1fr}
.ben-photos figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.ben-photos figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
@media (min-width:860px){ .ben-grid{grid-template-columns:.9fr 1.1fr} .ben-photos{grid-template-columns:1fr 1fr 1fr} }

.tick{
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);overflow:hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.line{
  display:flex;gap:10px;align-items:center;padding:10px;animation: tickerRun 20s linear infinite;
}
.tick:hover .line{animation-play-state:paused}
@keyframes tickerRun{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.tag{
  flex:0 0 auto;padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--ink-d);transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.tag:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
/* подсветка выбранной категории */
.tick[data-cat="zdravie"] .tag.zdravie,
.tick[data-cat="volno"] .tag.volno,
.tick[data-cat="doprava"] .tag.doprava{
  background:rgba(148,224,255,.16); border-color:rgba(125,211,255,.45); color:#dff4ff;
}

/* ---------- 15. Story Stack ---------- */
.story-stack .ss-wrap{display:grid;gap:16px;padding:26px 0}
.ss-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.ss-head p{margin:0 0 10px;color:var(--ink-d)}

.ss-stage{position:relative;display:grid;gap:12px}
.story-card{
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);
  padding:12px;cursor:pointer;transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow var(--t-med), z-index .2s;
}
.story-card h3{margin:8px 0 6px;font:700 18px/1.2 Inter}
.story-card p{margin:0;color:var(--ink-d)}
.story-card figure{margin:0 0 8px 0}
.story-card img{display:block;width:100%;height:auto;max-width:350px;border-radius:12px}
.story-card.is-top{transform:translateY(-2px) scale(1.02); box-shadow:var(--shadow); z-index:3}

@media (min-width:860px){
  .ss-stage{grid-template-columns:repeat(3,minmax(0,1fr))}
  .story-card:nth-child(1){transform:rotate(-1deg)}
  .story-card:nth-child(2){transform:rotate(0.6deg)}
  .story-card:nth-child(3){transform:rotate(1.2deg)}
  .story-card.is-top{transform:rotate(0) translateY(-2px) scale(1.02)}
}
/* ---------- Sekcia 16: Pulse dashboard ---------- */
.pulse .pulse-wrap{display:grid;gap:16px;padding:26px 0}
.pulse-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.pulse-head p{margin:0 0 10px;color:var(--ink-d)}

.pulse-grid{display:grid;gap:12px;grid-template-columns:1fr}
.pbox{
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);
  padding:12px;display:grid;gap:8px
}
.pbox h3{margin:0;font:700 16px/1.2 Inter}
.pnum{
  font:700 28px/1 Inter; letter-spacing:.02em; color:#e6f6ff;
  text-shadow:0 0 18px rgba(148,224,255,.18);
}
.spark{
  height:28px;border-radius:10px;position:relative;overflow:hidden;border:1px solid var(--line);
  background:
    radial-gradient(circle at 0% 50%, rgba(148,224,255,.28) 0 3px, transparent 4px) 0 0/18px 100% repeat-x,
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.06));
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  animation: sparkMove 2.2s linear infinite;
}
@keyframes sparkMove{ to{ background-position-x: -18px, 0 } }

@media (min-width:820px){
  .pulse-grid{grid-template-columns:repeat(4, minmax(0,1fr))}
}

/* ---------- Sekcia 17: Sentence builder ---------- */
.sentence .sen-wrap{display:grid;gap:16px;padding:26px 0}
.sen-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.sen-head p{margin:0 0 10px;color:var(--ink-d)}

.sen-grid{display:grid;gap:12px}
.sen-group .label{display:block;margin-bottom:6px;color:#dff4ff;font-weight:700}
.sentence .chips{display:flex;flex-wrap:wrap;gap:8px}
.xchip{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  cursor:pointer;transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.xchip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.xchip.is-on{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);background:rgba(148,224,255,.08)}

.sentence-out{
  margin:6px 0 0; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.04);
}
.sentence-out strong{color:#e6f6ff; text-decoration:underline; text-decoration-color:rgba(125,211,255,.45); text-underline-offset:3px}

@media (min-width:900px){
  .sen-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}
.skill-dial .dial{ --angle: 0deg; }