/* ========== BratisJob • Root page (mobile-first) ========== */

/* Section wrapper */
.section{position:relative;border-bottom:1px solid var(--line);overflow:clip}

/* Blue mesh + diagonal stripes bg for hero */
.hero{
  background:
    radial-gradient(800px 380px at 8% -12%, rgba(46,132,230,.32), transparent 60%),
    radial-gradient(700px 320px at 92% -16%, rgba(71,198,255,.22), transparent 55%);
}
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:70%;
  background:conic-gradient(from 160deg at 50% 50%, rgba(148,224,255,.18), rgba(98,178,255,.08), rgba(42,110,201,.18), rgba(148,224,255,.18));
  filter:blur(34px);opacity:.55;animation:meshSpin 24s linear infinite;pointer-events:none
}
@keyframes meshSpin{to{transform:rotate(360deg)}}
.bj-stripes,
.hero .mesh{pointer-events:none}

.hero-grid{
  display:grid; gap:20px; align-items:start;
  grid-template-columns: 1fr; padding:36px 0 26px;
}

/* Copy */
.eyebrow{
  display:inline-block;font:700 12px/1 Rubik, Inter, sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--p-3);
  background:rgba(148,224,255,.09);border:1px solid rgba(148,224,255,.28);padding:7px 10px;border-radius:999px;margin-bottom:10px
}
.hero-title{font:700 28px/1.2 Inter, system-ui; margin:0 0 10px}
.hero-text{color:var(--ink-d);margin:0 0 16px;max-width:62ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}

/* Chip rail (no marquee; good for mobile) */
.chip-rail{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);font-size:14px;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)}

/* Ticket rail — 3 images */
.ticket-rail{
  display:grid;gap:14px;grid-template-columns:1fr;align-content:start
}
.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)}
.ticket figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}

/* Floating orbs */
.mesh{position:absolute;inset:0}
.mesh .orb{
  position:absolute;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(148,224,255,.9), rgba(148,224,255,0) 70%);
  filter:blur(2px);opacity:.22;animation:floatY 8s ease-in-out infinite alternate
}
.mesh .orb:nth-child(1){left:6%;top:20%;animation-duration:7s}
.mesh .orb:nth-child(2){right:8%;top:26%;animation-duration:9s}
.mesh .orb:nth-child(3){left:42%;bottom:16%;animation-duration:11s}
@keyframes floatY{from{transform:translateY(-8px)}to{transform:translateY(10px)}}

/* ====== Upscale layouts ====== */
@media (min-width:720px){
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;padding-top:48px}
  .hero-title{font-size:34px}
  .ticket-rail{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (min-width:1040px){
  .hero-title{font-size:40px}
}
/* ========== Sekcia 2: Metrics + Ribbon timeline ========== */
.bj-metrics .metrics-grid{
  display:grid; gap:18px; align-items:start; padding:26px 0;
  grid-template-columns:1fr;
}
.metrics-head h2{margin:0 0 8px;font:700 24px/1.2 Inter, system-ui}
.metrics-head p{margin:0;color:var(--ink-d)}

.counters{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(3,1fr)
}
.counter{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:12px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)
}
.counter .num{
  font:700 22px/1 Inter, system-ui;
  background:linear-gradient(90deg,var(--p-2),var(--p-3));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.counter .label{font-size:13px;color:var(--ink-d)}

.ribbon-timeline{
  list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px;position:relative
}
.ribbon-timeline li{
  padding:12px 14px;border-radius:14px;border:1px dashed rgba(125,211,255,.26);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  transition:transform var(--t-fast), box-shadow var(--t-fast)
}
.ribbon-timeline li:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ribbon-timeline strong{display:block;margin-bottom:4px}

.snap-gallery{
  display:grid;gap:12px;grid-auto-flow:column;grid-auto-columns:80%;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px
}
.snap-gallery figure{scroll-snap-align:start;margin:0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.snap-gallery figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
.snap-gallery::-webkit-scrollbar{height:8px}
.snap-gallery::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}

@media (min-width:720px){
  .bj-metrics .metrics-grid{grid-template-columns:1.05fr .95fr}
  .snap-gallery{grid-auto-columns:33%}
}
@media (min-width:1040px){
  .metrics-head h2{font-size:28px}
}

/* ========== Sekcia 3: Map-Puzzle ========== */
.bj-puzzle .puzzle-grid{
  display:grid; gap:16px; padding:26px 0; grid-template-columns:1fr;
}
.puzzle-copy h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.puzzle-copy p{margin:0 0 10px;color:var(--ink-d)}
.piece{
  margin:0;padding:12px;border-radius:22px;border:1px dashed rgba(125,211,255,.26);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  transform:rotate(-1.2deg);
  transition:transform var(--t-med), box-shadow var(--t-med)
}
.piece:nth-of-type(2){transform:rotate(1.4deg)}
.piece:nth-of-type(3){transform:rotate(-0.6deg)}
.piece:hover{transform:translateY(-2px) rotate(0deg);box-shadow:var(--shadow)}
.piece figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}

@media (min-width:720px){
  .bj-puzzle .puzzle-grid{grid-template-columns:1fr 1fr;align-items:start}
  .puzzle-copy{grid-column:1 / -1}
}
@media (min-width:1040px){
  .bj-puzzle .puzzle-grid{grid-template-columns:1fr 1fr 1fr 1fr}
  .puzzle-copy{grid-column:1 / 3}
  .piece:nth-of-type(1){grid-column:3}
  .piece:nth-of-type(2){grid-column:4}
  .piece:nth-of-type(3){grid-column:3 / span 2}
}

/* ========== Sekcia 4: Chess benefits ========== */
.bj-chess .chess-wrap{
  display:grid; gap:18px; padding:26px 0; grid-template-columns:1fr;
}
.chess-copy h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.chess-copy p{margin:0 0 10px;color:var(--ink-d)}
.benefit-bullets{margin:0;padding-left:18px}
.benefit-bullets li{margin:6px 0}

.chessboard{
  --size: min(720px, 92vw);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px;
}
.chessboard .cell{
  aspect-ratio: 1 / 1; display:grid; place-items:center; border-radius:14px; border:1px solid var(--line);
  transition:transform var(--t-fast), background var(--t-fast)
}
.chessboard .cell.a{background:rgba(255,255,255,.04)}
.chessboard .cell.b{background:rgba(148,224,255,.06)}
.chessboard .cell:hover{transform:translateY(-2px)}
.chessboard .cell span{font-weight:700;color:#dff4ff}

.benefit-cards{
  display:grid; gap:12px; grid-template-columns:1fr; align-items:start;
}
.benefit{margin:0;padding:10px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:transform var(--t-fast), box-shadow var(--t-fast)}
.benefit:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.benefit figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}

@media (min-width:720px){
  .bj-chess .chess-wrap{grid-template-columns:1fr 1fr}
  .benefit-cards{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (min-width:1040px){
  .chess-copy h2{font-size:28px}
}
/* ========== Sekcia 5: Kariérne pruhy ========== */
.bj-lanes .lanes-wrap{display:grid;gap:16px;padding:26px 0}
.lanes-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.lanes-head p{margin:0;color:var(--ink-d)}
.lanes-scroll{
  display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 10px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lanes-scroll:focus{outline:2px solid rgba(125,211,255,.45);outline-offset:4px}
.lane{
  scroll-snap-align:start;border:1px solid var(--line);border-radius:18px;
  padding:14px;background:rgba(255,255,255,.04);min-height:100%;
  transition:transform var(--t-med), box-shadow var(--t-med)
}
.lane:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.lane h3{margin:0 0 6px;font:700 18px/1.2 Inter}
.lane p{margin:0 0 10px;color:var(--ink-d)}
.lane figure{margin:0}
.lane figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}

@media (min-width:720px){ .lanes-scroll{grid-auto-columns:33%} }
@media (min-width:1040px){ .lanes-scroll{grid-auto-columns:28%} }

/* ========== Sekcia 6: Skill mixer ========== */
.bj-mixer .mixer-grid{display:grid;gap:16px;padding:26px 0}
.mixer-copy h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.mixer-copy p{margin:0 0 12px;color:var(--ink-d)}
.mix-chips{display:flex;flex-wrap:wrap;gap:8px}
.mix-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)
}
.mix-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.mix-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)}

.mix-cards{display:grid;gap:12px;grid-template-columns:1fr}
.mix-card{
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);
  padding:12px;transition:transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast)
}
.mix-card h3{margin:0 0 6px;font:700 18px/1.2 Inter}
.mix-card p{margin:0 0 10px;color:var(--ink-d)}
.mix-card.dim{opacity:.45;filter:saturate(.7)}
.mixer-note{margin:2px 0 0;color:var(--ink-d);font-size:14px}

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

/* ========== Sekcia 7: Story strip ========== */
.bj-stories .stories-wrap{display:grid;gap:16px;padding:26px 0}
.stories-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.stories-head p{margin:0;color:var(--ink-d)}

.story-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.story{scroll-snap-align:start;margin:0;padding:12px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  transform:translateY(6px);transition:transform var(--t-med), box-shadow var(--t-med)}
.story strong{display:block}
.story span{display:block;color:var(--ink-d);margin-top:4px}
.story.is-float{transform:translateY(0);box-shadow:var(--shadow)}

@media (min-width:720px){ .story-strip{grid-auto-columns:33%} }
@media (min-width:1040px){ .story-strip{grid-auto-columns:28%} }
/* ========== Sekcia 8: Pásma miezd ========== */
.bj-bands .bands-wrap{display:grid;gap:16px;padding:26px 0}
.bands-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.bands-head p{margin:0 0 10px;color:var(--ink-d)}
.band-chips{display:flex;flex-wrap:wrap;gap:8px}
.band-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)
}
.band-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.band-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)}

.band-bars{display:grid;gap:10px}
.bar{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);overflow:hidden
}
.bar .bar-fill{
  position:absolute;inset:auto 0 0 0;height:42%;background:
    linear-gradient(90deg, rgba(98,178,255,.22), rgba(148,224,255,.22));
  transform-origin:left center; transform:scaleX(0); transition:transform .9s var(--t-med);
  mix-blend-mode:screen; pointer-events:none;
}
.bar strong{font-weight:700}
.bar .range{color:var(--ink-d);font-style:normal}

/* Percentá podľa úrovne (ilustratívne šírky) */
.band-bars[data-level="jr"] .bar.it .bar-fill{ transform:scaleX(.55) }
.band-bars[data-level="jr"] .bar.vyroba .bar-fill{ transform:scaleX(.42) }
.band-bars[data-level="jr"] .bar.logistika .bar-fill{ transform:scaleX(.48) }

.band-bars[data-level="mid"] .bar.it .bar-fill{ transform:scaleX(.72) }
.band-bars[data-level="mid"] .bar.vyroba .bar-fill{ transform:scaleX(.56) }
.band-bars[data-level="mid"] .bar.logistika .bar-fill{ transform:scaleX(.62) }

.band-bars[data-level="sr"] .bar.it .bar-fill{ transform:scaleX(.9) }
.band-bars[data-level="sr"] .bar.vyroba .bar-fill{ transform:scaleX(.7) }
.band-bars[data-level="sr"] .bar.logistika .bar-fill{ transform:scaleX(.76) }

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

/* ========== Sekcia 9: Mikromapy MHD ========== */
.bj-routes .routes-wrap{display:grid;gap:16px;padding:26px 0}
.routes-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.routes-head p{margin:0 0 10px;color:var(--ink-d)}
.route-chips{display:flex;flex-wrap:wrap;gap:8px}
.r-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)
}
.r-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.r-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)}

.micro-map{
  position:relative;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);
  padding:16px;overflow:hidden
}
.route-line{
  position:absolute;left:12px;right:12px;height:4px;top:56px;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 } }
.route-tram{ top:56px }
.route-bus{ top:84px }
.route-train{ top:112px }

.micro-map[data-route="tram"] .route-tram,
.micro-map[data-route="bus"] .route-bus,
.micro-map[data-route="train"] .route-train{ opacity:1 }

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

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

/* ========== Sekcia 10: Život v smenách (tri karty) ========== */
.bj-shifts .shifts-wrap{display:grid;gap:16px;padding:26px 0}
.shifts-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.shifts-head p{margin:0 0 10px;color:var(--ink-d)}

.shift-trio{display:grid;gap:12px;grid-template-columns:1fr}
.shift-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)
}
.shift-card h3{margin:0 0 6px;font:700 18px/1.2 Inter}
.shift-card p{margin:0 0 10px;color:var(--ink-d)}
.shift-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

@media (min-width:720px){ .shift-trio{grid-template-columns:repeat(3, minmax(0,1fr))} }
/* ========== Sekcia 11: Mini-portfólio firiem (flip) ========== */
.bj-portfolio .port-grid{display:grid;gap:16px;padding:26px 0}
.port-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.port-head p{margin:0 0 10px;color:var(--ink-d)}

.port-grid{
  grid-template-columns:1fr;align-items:start
}
.port-card{
  position:relative;perspective:1000px;height:auto
}
.card-face{
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);
  padding:12px;transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow var(--t-med);
  backface-visibility:hidden;transform-style:preserve-3d
}
.port-card .back{position:absolute;inset:0;transform:rotateY(180deg)}
.port-card[data-flip="true"] .front{transform:rotateY(180deg)}
.port-card[data-flip="true"] .back{transform:rotateY(360deg)}
.pill-list{list-style:none;margin:8px 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pill-list 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)}
.facts{margin:0;padding-left:18px}
.facts li{margin:6px 0}
.flip-btn{
  margin-top:8px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;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)
}
.flip-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.flip-btn.ghost{background:transparent}

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

/* ========== Sekcia 12: CV akordeón ========== */
.bj-cv .cv-grid{display:grid;gap:16px;padding:26px 0}
.cv-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.cv-head p{margin:0 0 10px;color:var(--ink-d)}

.cv-acc{display:grid;gap:10px}
.cv-step{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);overflow:hidden}
.cv-step>summary{
  list-style:none;cursor:pointer;padding:12px 14px;position:relative
}
.cv-step>summary::-webkit-details-marker{display:none}
.cv-step[open]>summary{background:rgba(255,255,255,.05)}
.cv-step .cv-step-body{padding:0 14px 12px;color:var(--ink-d)}
.cv-photos{display:grid;gap:12px;grid-template-columns:1fr}
.cv-photos figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.cv-photos figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
@media (min-width:720px){ .cv-grid{grid-template-columns:1.1fr .9fr} .cv-photos{grid-template-columns:1fr 1fr} }

/* ========== Sekcia 13: Regionálne trhy (krúžky) ========== */
.bj-regions .regions-grid{display:grid;gap:16px;padding:26px 0}
.regions-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.regions-head p{margin:0 0 10px;color:var(--ink-d)}
.reg-chips{display:flex;flex-wrap:wrap;gap:8px}
.reg-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)
}
.reg-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.reg-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)}

.ring-board{
  display:grid;gap:12px;grid-template-columns:1fr;align-items:start
}
.ring-card{
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);
  padding:12px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center
}
.ring{
  --v: 62%;
  width:86px;height:86px;border-radius:50%;
  background:
    radial-gradient(circle, rgba(8,20,35,1) 58%, rgba(8,20,35,0) 60%),
    conic-gradient(#7dd3ff var(--v), rgba(255,255,255,.08) 0);
  box-shadow: inset 0 0 0 1px var(--line);
  display:grid;place-items:center
}
.ring-label{position:relative;left:-9999px}
.ring-val{color:#dff4ff;font-weight:700}
.regions-photos{display:grid;gap:12px;grid-template-columns:1fr}
.regions-photos figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.regions-photos figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}

@media (min-width:720px){
  .ring-board{grid-template-columns:repeat(3, minmax(0,1fr))}
  .regions-photos{grid-template-columns:1fr 1fr}
}

/* Dataset presets (bez inline štýlov) */
.ring-board[data-set="it"] .r1{ --v:62% }  .ring-board[data-set="it"] .r2{ --v:21% }  .ring-board[data-set="it"] .r3{ --v:17% }
.ring-board[data-set="vyroba"] .r1{ --v:38% }  .ring-board[data-set="vyroba"] .r2{ --v:34% }  .ring-board[data-set="vyroba"] .r3{ --v:28% }
.ring-board[data-set="logistika"] .r1{ --v:30% }  .ring-board[data-set="logistika"] .r2{ --v:28% }  .ring-board[data-set="logistika"] .r3{ --v:42% }
/* ========== Sekcia 14: Rýchle porovnanie ponúk ========== */
.bj-compare .compare-wrap{display:grid;gap:16px;padding:26px 0}
.compare-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.compare-head p{margin:0 0 10px;color:var(--ink-d)}
.cmp-chips{display:flex;flex-wrap:wrap;gap:8px}
.cmp-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)
}
.cmp-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.cmp-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)}

.cmp-grid{
  display:grid; gap:6px;
  grid-template-columns: minmax(140px,1fr) repeat(3, minmax(140px,1fr));
  overflow-x:auto; padding-bottom:6px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cmp-row{display:contents}
.cmp-row.head > *{
  position:sticky; top:0; z-index:1;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line); padding:10px; border-radius:12px; font-weight:700;
}
.cmp-row > .cell,
.cmp-row.head > *{
  border:1px solid var(--line); padding:10px; border-radius:12px; background:rgba(255,255,255,.04);
}
.cell.key{font-weight:700;color:#dff4ff}
.cell.hit{
  background:linear-gradient(180deg, rgba(148,224,255,.16), rgba(148,224,255,.06));
  border-color:rgba(125,211,255,.45);
  box-shadow:inset 0 0 0 1px rgba(125,211,255,.25);
  transform:translateY(-2px);
  transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

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

/* ========== Sekcia 15: FAQ bez formulárov ========== */
.bj-faq .faq-wrap{display:grid;gap:16px;padding:26px 0}
.faq-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.faq-head p{margin:0 0 10px;color:var(--ink-d)}

.faq-grid{
  display:grid; gap:10px; grid-template-columns:1fr;
}
.faq-card{
  border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.04);
  overflow:hidden; transition:box-shadow var(--t-med), transform var(--t-med)
}
.faq-card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.faq-toggle{
  width:100%; text-align:left; padding:12px 14px; background:transparent; color:var(--ink);
  border:0; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
}
.faq-toggle .chev{
  width:18px; height:18px; border:1px solid var(--line); border-radius:4px;
  position:relative; transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.faq-toggle .chev::before{
  content:""; position:absolute; inset:4px 3px 4px 3px; border-bottom:2px solid var(--ink); border-right:2px solid var(--ink);
  transform:rotate(45deg); opacity:.8;
}
.faq-toggle[aria-expanded="true"] .chev{ transform:rotate(90deg); background:rgba(148,224,255,.08); border-color:rgba(125,211,255,.45) }
.faq-body{ padding:0 14px 12px; color:var(--ink-d) }

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