/* ========== Poradňa page (3/14 секций, 6/34 фото) ========== */
.section{position:relative;border-bottom:1px solid var(--line);overflow:clip}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- Sekcia 1: Ripple Tabs ---------- */
.porad-hero{
  background:
    radial-gradient(900px 360px at 10% -10%, rgba(60,140,230,.26), transparent 60%),
    radial-gradient(800px 320px at 90% -12%, rgba(90,208,255,.18), transparent 55%);
}
.ph-wrap{display:grid;gap:18px;grid-template-columns:1fr;padding:34px 0 28px}
.ph-copy .eyebrow{
  display:inline-block;font:700 12px/1 Inter;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
}
.ph-copy h2{margin:0 0 8px;font:700 26px/1.2 Inter}
.ph-copy .lead{margin:0 0 12px;color:var(--ink-d)}
.ph-tabs{display:flex;flex-wrap:wrap;gap:8px}
.phtab{
  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)
}
.phtab:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.phtab.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)}
.ph-tips{margin:10px 0 0;padding-left:18px}
.ph-tips li{margin:6px 0;color:var(--ink-d)}

.ph-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); transition:transform var(--t-med), box-shadow var(--t-med)
}
.ticket:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ticket.tl{justify-self:start;transform:rotate(-1.2deg)}
.ticket.br{justify-self:end;transform:rotate(1.4deg)}

.ripple-bg{
  position:absolute;inset:-40px 0 0 0;pointer-events:none;opacity:.2;
  background:
    radial-gradient(circle at 30% 20%, rgba(148,224,255,.22) 0 120px, transparent 120px 100%),
    radial-gradient(circle at 70% 10%, rgba(148,224,255,.16) 0 140px, transparent 140px 100%),
    radial-gradient(circle at 80% 70%, rgba(148,224,255,.12) 0 110px, transparent 110px 100%);
  animation: rippleFloat 14s ease-in-out infinite;
}
@keyframes rippleFloat{
  0%,100%{ transform:translateY(0) } 50%{ transform:translateY(10px) }
}

@media (min-width:760px){
  .ph-wrap{grid-template-columns:1.05fr .95fr}
  .ph-copy h2{font-size:32px}
}

/* ---------- Sekcia 2: Myths — crack cards ---------- */
.myths .my-wrap{display:grid;gap:16px;padding:26px 0}
.my-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.my-head p{margin:0 0 10px;color:var(--ink-d)}
.my-grid{display:grid;gap:12px;grid-template-columns:1fr}
.my-card{
  position:relative;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), filter var(--t-fast)
}
.my-card header{margin-bottom:6px}
.my-card figure{margin:8px 0 0}
.my-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cracks{
  position:absolute;inset:0;pointer-events:none;opacity:0;background:
    repeating-linear-gradient(115deg, rgba(148,224,255,.0) 0 10px, rgba(148,224,255,.22) 10px 11px, rgba(148,224,255,.0) 11px 22px);
  mix-blend-mode:screen; transition:opacity .35s ease;
}
.my-card[data-state="solved"]{filter:saturate(1.12)}
.my-card[data-state="solved"] .cracks{opacity:1;animation: crackBlink 1.2s ease-out 1}
@keyframes crackBlink{ 0%{opacity:0} 25%{opacity:.9} 100%{opacity:.25} }
.my-note{margin:4px 0 0;color:var(--ink-d);font-size:14px}

@media (min-width:760px){ .my-grid{grid-template-columns:1fr 1fr} }

/* ---------- Sekcia 3: CV Makeover — double polaroid ---------- */
.cv-makeover .cv-wrap{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-stage{
  position:relative;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);
  padding:16px;display:grid;place-items:center;overflow:visible
}
.cv-photo{margin:0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:18px;background:rgba(255,255,255,.04);
  width:min(360px,92%);position:absolute;transition:transform var(--t-med), box-shadow var(--t-med), z-index .2s}
.cv-photo.before{transform:rotate(-1.2deg);z-index:2}
.cv-photo.after{transform:rotate(1.2deg);z-index:1}
.cv-photo.is-top{transform:rotate(0) translateY(-2px);box-shadow:var(--shadow);z-index:3}

.cv-toggle{
  justify-self:center;margin-top:220px;
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);
  cursor:pointer;transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.cv-toggle:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}

.cv-list{margin:8px 0 0;padding-left:18px}
.cv-list li{margin:6px 0;color:var(--ink-d)}

@media (max-width:420px){
  .cv-toggle{margin-top:200px}
}
/* ==== FIX: CV Makeover — без наложения, сетка + адаптив ==== */
.cv-stage{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:14px;
  overflow:visible;
  min-height:auto;
}
.cv-photo{
  position:static !important;
  width:100%;
  max-width:350px;
  transform:none;
  z-index:auto;
}
.cv-photo.before{ transform:rotate(-0.6deg) }
.cv-photo.after{  transform:rotate(0.6deg) }
.cv-photo.is-top{
  transform:rotate(0deg) translateY(-2px) scale(1.02);
  box-shadow:var(--shadow);
  z-index:2;
}

/* кнопка под фотографиями */
.cv-toggle{
  margin-top:0 !important;
  justify-self:center;
}

/* десктоп: 2 колонки, без перекрытий */
@media (min-width: 860px){
  .cv-stage{ grid-template-columns:1fr 1fr; align-items:start }
  .cv-photo.before{ justify-self:end }
  .cv-photo.after{  justify-self:start }
}
/* ---------- Sekcia 4: Pohovorový kompas ---------- */
.compass .comp-wrap{display:grid;gap:16px;padding:26px 0}
.comp-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.comp-head p{margin:0 0 10px;color:var(--ink-d)}
.comp-belt{display:flex;flex-wrap:wrap;gap:8px}
.comp-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)
}
.comp-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.comp-chip.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)}

.comp-grid{display:grid;gap:12px;grid-template-columns:1fr}
.comp-photo{margin:0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:18px;background:rgba(255,255,255,.04)}
.comp-photo figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
.comp-photo.left{justify-self:start;transform:rotate(-1.1deg)}
.comp-photo.right{justify-self:end;transform:rotate(1deg)}

.dial2{
  --deg: 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);
}
.dial2-face{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%);}
.dial2-needle{
  position:absolute;left:50%;top:50%;width:38%;height:2px;border-radius:999px;
  background:linear-gradient(90deg,#7dd3ff,transparent);transform-origin:left center;transform:rotate(var(--deg));
  filter:drop-shadow(0 0 4px rgba(148,224,255,.6));
}
.dial2-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:36px 12px}
.dial2-center strong{font:700 16px/1 Inter}
.dial2-center .comp-note{color:var(--ink-d);font-size:13px}

.comp-tips{margin:0;padding-left:18px}
.comp-tips li{margin:6px 0;color:var(--ink-d)}

@media (min-width:900px){
  .comp-grid{grid-template-columns:1fr auto 1fr;align-items:center}
}

/* ---------- Sekcia 5: Mapa dochádzania s tipmi ---------- */
.commute-tips .ct-wrap{display:grid;gap:16px;padding:26px 0}
.ct-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.ct-head p{margin:0 0 10px;color:var(--ink-d)}

.ct-grid{display:grid;gap:12px}
.vmap{
  position:relative;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:16px
}
.stops{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.stop{
  position:relative;padding-left:22px;cursor:pointer;
  transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.stop::before{
  content:"";position:absolute;left:4px;top:.45em;width:10px;height:10px;border-radius:50%;
  background:#7dd3ff;box-shadow:0 0 0 0 rgba(125,211,255,.6);animation: ping 2s ease-out infinite
}
.stop.is-on{background:rgba(148,224,255,.08);border-radius:10px;padding:8px 8px 8px 22px}
.ct-panel{
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:12px
}
.ct-panel h3{margin:0 0 6px;font:700 16px/1.2 Inter}
.ct-panel .tiptext{margin:0;color:var(--ink-d)}

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

@media (min-width:880px){
  .ct-grid{grid-template-columns:.8fr .9fr .8fr;align-items:start}
  .ct-photos{grid-template-columns:1fr 1fr}
}

/* ---------- Sekcia 6: Mikro-workshopy ---------- */
.workshops .ws-wrap{display:grid;gap:16px;padding:26px 0}
.ws-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.ws-head p{margin:0 0 10px;color:var(--ink-d)}

.ws-grid{display:grid;gap:14px}
.ws-stage{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:12px;position:sticky;top:84px}
.ws-main{margin:0 0 8px 0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:18px;background:rgba(255,255,255,.04)}
.ws-main figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
.ws-slots{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ws-slots li{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);padding:8px}

.ws-reel{
  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)
}
.ws-track{display:flex;gap:10px;align-items:center;padding:10px;animation: wsRun 18s linear infinite}
@keyframes wsRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ws-reel:hover .ws-track{animation-play-state:paused}

.wchip{
  flex:0 0 auto;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);
  cursor:pointer;transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.wchip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.wchip.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)}

.ws-thumbs{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.ws-thumbs .mini{margin:0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.ws-thumbs figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}

@media (min-width:980px){
  .ws-grid{grid-template-columns: .9fr 1.1fr .9fr; align-items:start}
}
/* ---------- 7. QA Flip (pinboard) ---------- */
.qa-flips .qa-wrap{display:grid;gap:16px;padding:26px 0}
.qa-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.qa-head p{margin:0 0 10px;color:var(--ink-d)}
.qa-grid{display:grid;gap:14px;grid-template-columns:1fr}
.qa-card{
  perspective:1000px; position:relative; cursor:pointer; outline:none;
  border-radius:18px; filter:saturate(.95);
}
.qa-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; min-height:220px;
}
.qa-card .back{position:absolute; inset:0; transform:rotateY(180deg)}
.qa-card:focus .front, .qa-card:hover .front{box-shadow:var(--shadow)}
.qa-card.is-flipped .front{transform:rotateY(180deg)}
.qa-card.is-flipped .back{transform:rotateY(360deg)}
.qa-card figure{margin:0 0 8px 0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:14px;background:rgba(255,255,255,.04)}
.qa-card figcaption{margin-top:6px;font-size:13px;color:var(--ink-d)}
.tilt-l .front{transform:rotate(-1.1deg)} .tilt-l.is-flipped .front{transform:rotateY(180deg)}
.tilt-c .front{transform:rotate(.4deg)}  .tilt-r .front{transform:rotate(1.2deg)}

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

/* ---------- 8. Offer-Lab (RSD) ---------- */
.offer-lab .ol-wrap{display:grid;gap:16px;padding:26px 0}
.ol-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.ol-head p{margin:0 0 10px;color:var(--ink-d)}
.ol-ctrl{display:grid;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.ol-chip,.ol-shift{
  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)
}
.ol-chip:hover,.ol-shift:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.is-on{border-color:rgba(125,211,255,.45)!important;box-shadow:inset 0 0 0 1px rgba(125,211,255,.25)!important;background:rgba(148,224,255,.08)!important}

.ol-board{position:relative;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:16px;overflow:visible}
.corner{margin:0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:18px;background:rgba(255,255,255,.04);position:absolute;width:min(46%,360px)}
.corner.tl{left:8px;top:8px;transform:rotate(-1.2deg)}
.corner.br{right:8px;bottom:8px;transform:rotate(1deg)}
.corner figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}

.lab-bars{position:relative;z-index:2;display:grid;gap:12px}
.lab-row{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center}
.bar{position:relative;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);padding:8px 10px;overflow:hidden}
.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
}
.bar .rng{position:relative;color:var(--ink-d);font-style:normal;float:right}

/* šírky podľa kombinácie (aproximačne) */
.lab-bars[data-level="junior"][data-shift="denne"] .bar.it .fill{transform:scaleX(.58)}
.lab-bars[data-level="junior"][data-shift="denne"] .bar.vy .fill{transform:scaleX(.50)}
.lab-bars[data-level="junior"][data-shift="denne"] .bar.lo .fill{transform:scaleX(.52)}

.lab-bars[data-level="junior"][data-shift="nocne"] .bar.it .fill{transform:scaleX(.64)}
.lab-bars[data-level="junior"][data-shift="nocne"] .bar.vy .fill{transform:scaleX(.58)}
.lab-bars[data-level="junior"][data-shift="nocne"] .bar.lo .fill{transform:scaleX(.60)}

.lab-bars[data-level="junior"][data-shift="vikend"] .bar.it .fill{transform:scaleX(.62)}
.lab-bars[data-level="junior"][data-shift="vikend"] .bar.vy .fill{transform:scaleX(.62)}
.lab-bars[data-level="junior"][data-shift="vikend"] .bar.lo .fill{transform:scaleX(.64)}

.lab-bars[data-level="medior"][data-shift="denne"] .bar.it .fill{transform:scaleX(.72)}
.lab-bars[data-level="medior"][data-shift="denne"] .bar.vy .fill{transform:scaleX(.62)}
.lab-bars[data-level="medior"][data-shift="denne"] .bar.lo .fill{transform:scaleX(.66)}

.lab-bars[data-level="medior"][data-shift="nocne"] .bar.it .fill{transform:scaleX(.78)}
.lab-bars[data-level="medior"][data-shift="nocne"] .bar.vy .fill{transform:scaleX(.70)}
.lab-bars[data-level="medior"][data-shift="nocne"] .bar.lo .fill{transform:scaleX(.72)}

.lab-bars[data-level="medior"][data-shift="vikend"] .bar.it .fill{transform:scaleX(.76)}
.lab-bars[data-level="medior"][data-shift="vikend"] .bar.vy .fill{transform:scaleX(.74)}
.lab-bars[data-level="medior"][data-shift="vikend"] .bar.lo .fill{transform:scaleX(.76)}

.lab-bars[data-level="senior"][data-shift="denne"] .bar.it .fill{transform:scaleX(.86)}
.lab-bars[data-level="senior"][data-shift="denne"] .bar.vy .fill{transform:scaleX(.76)}
.lab-bars[data-level="senior"][data-shift="denne"] .bar.lo .fill{transform:scaleX(.78)}

.lab-bars[data-level="senior"][data-shift="nocne"] .bar.it .fill{transform:scaleX(.92)}
.lab-bars[data-level="senior"][data-shift="nocne"] .bar.vy .fill{transform:scaleX(.84)}
.lab-bars[data-level="senior"][data-shift="nocne"] .bar.lo .fill{transform:scaleX(.86)}

.lab-bars[data-level="senior"][data-shift="vikend"] .bar.it .fill{transform:scaleX(.90)}
.lab-bars[data-level="senior"][data-shift="vikend"] .bar.vy .fill{transform:scaleX(.88)}
.lab-bars[data-level="senior"][data-shift="vikend"] .bar.lo .fill{transform:scaleX(.90)}

@media (max-width:720px){
  .corner{position:static;width:100%;transform:none;margin-bottom:10px}
}

/* ---------- 9. Case-journey ---------- */
.case-journey .cj-wrap{display:grid;gap:16px;padding:26px 0}
.cj-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.cj-head p{margin:0 0 10px;color:var(--ink-d)}
.cj-grid{display:grid;gap:14px}
.path{position:relative;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:16px}
.rope{
  position:absolute;left:18px;top:16px;bottom:16px;width:4px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden
}
.rope::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:0;background:linear-gradient(180deg, rgba(98,178,255,.3), rgba(148,224,255,.6));
  transition:height 1.2s cubic-bezier(.2,.7,.2,1)
}
.case-journey.run .rope::after{height:100%}
.steps{list-style:none;margin:0;padding:0 0 0 36px;display:grid;gap:10px}
.steps li{
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);padding:10px;
  transition:transform .35s, box-shadow .35s
}
.steps li strong{display:block}
.steps li span{display:block;color:var(--ink-d)}
.steps li.is-on{transform:translateX(6px);box-shadow:var(--shadow)}

.cj-photos{position:relative;display:grid;gap:12px}
.cj-photos .ph{margin:0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.cj-photos .ph img{display:block;width:100%;height:auto;max-width:350px}
.cj-photos .ph.a{transform:rotate(-1deg)}
.cj-photos .ph.b{transform:rotate(.8deg)}
.cj-photos .ph.c{position:absolute;right:8px;bottom:-6px;transform:rotate(1.2deg)}
@media (min-width:900px){
  .cj-grid{grid-template-columns:1.05fr .95fr;align-items:start}
}
@media (max-width:720px){
  .cj-photos .ph.c{position:static}
}
/* ==== FIX: Offer-Lab — фото больше не перекрывают текст ==== */
/* Базово — обычный поток (никаких absolute) */
.offer-lab .ol-board{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:12px;
  overflow:visible;
}
.offer-lab .ol-board .corner{
  position:static !important;
  width:100%;
  transform:none !important;
  margin:0 0 10px 0;
}
.offer-lab .ol-board .lab-bars{order:2; z-index:auto}

/* Десктоп: три колонки — фото | полосы | фото */
@media (min-width:960px){
  .offer-lab .ol-board{
    grid-template-columns:1fr 1.2fr 1fr;
    align-items:start;
    padding:16px;
  }
  .offer-lab .ol-board .corner.tl{grid-column:1; align-self:start; margin:0}
  .offer-lab .ol-board .lab-bars{grid-column:2}
  .offer-lab .ol-board .corner.br{grid-column:3; align-self:end; margin:0}
}

/* Небольшой плюс: текст на полосах всегда поверх заливки */
.offer-lab .bar .rng{position:relative; z-index:1}
/* ---------- 10. FAQ Mosaic ---------- */
.faq-mosaic .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:12px}
.faq-item{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:10px}
.faq-item .q{
  width:100%;text-align:left;background:transparent;border:1px solid var(--line);border-radius:12px;padding:10px;
  cursor:pointer;transition:transform var(--t-fast), background var(--t-fast)
}
.faq-item .q:hover{transform:translateY(-2px);background:rgba(255,255,255,.05)}
.faq-item .a{padding:10px 0 0 0;display:grid;gap:8px}
.faq-item .a figure{margin:0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:14px;background:rgba(255,255,255,.04);max-width:350px}
.faq-item.left .a{grid-template-columns:1fr; }
.faq-item.right .a{grid-template-columns:1fr; }
@media (min-width:820px){
  .faq-item.left .a{grid-template-columns: .9fr auto}
  .faq-item.right .a{grid-template-columns: auto .9fr}
}

/* ---------- 11. Tone Coach ---------- */
.tone-coach .tc-wrap{display:grid;gap:16px;padding:26px 0}
.tc-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.tc-head p{margin:0 0 10px;color:var(--ink-d)}
.tc-chips{display:flex;flex-wrap:wrap;gap:8px}
.tc-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)
}
.tc-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.tc-chip.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)}

.tc-grid{display:grid;gap:12px;grid-template-columns:1fr}
.tc-photo{margin:0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:18px;background:rgba(255,255,255,.04)}
.tc-photo figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
.tc-photo.tl{justify-self:start;transform:rotate(-1deg)}
.tc-photo.tr{justify-self:end;transform:rotate(.8deg)}
.tc-photo.br{justify-self:end;transform:rotate(1deg)}

.tc-box{
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:12px;position:relative;overflow:hidden
}
.wave{
  position:relative;height:72px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);overflow:hidden;
}
.wave::before, .wave::after{
  content:"";position:absolute;inset:0;background:
    repeating-linear-gradient(90deg, rgba(148,224,255,.28) 0 4px, transparent 4px 10px);
  opacity:.3
}
.wave::after{
  opacity:1; clip-path:inset(30% 0 30% 0); animation: waveMove 2.8s linear infinite;
}
@keyframes waveMove{ to{ transform: translateX(-40px) } }
.tc-box[data-mode="tone"] .wave::after{ clip-path: inset(24% 0 24% 0) }
.tc-box[data-mode="listen"] .wave::after{ clip-path: inset(34% 0 34% 0) }
.tc-box[data-mode="posture"] .wave::after{ clip-path: inset(28% 0 28% 0) }
.tc-note{margin:8px 0 0;color:var(--ink-d)}
.cursor{position:absolute;top:0;bottom:0;width:2px;left:20%;background:linear-gradient(180deg,#7dd3ff,transparent);box-shadow:0 0 10px rgba(148,224,255,.6);animation: cursorRun 4s linear infinite}
@keyframes cursorRun{ 0%{left:20%} 100%{left:90%} }

@media (min-width:920px){
  .tc-grid{grid-template-columns:1fr auto 1fr;align-items:center}
}

/* ---------- 12. Negotiation Playbook ---------- */
.nego-playbook .np-wrap{display:grid;gap:16px;padding:26px 0}
.np-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.np-head p{margin:0 0 10px;color:var(--ink-d)}
.np-chips{display:flex;flex-wrap:wrap;gap:8px}
.np-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)
}
.np-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.np-chip.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)}

.np-board{position:relative;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:16px}
.np-photo{margin:0;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);max-width:350px}
.np-photo.a{position:relative;z-index:2}
.np-photo.b{position:relative;justify-self:center}
.np-photo.c{position:relative;justify-self:end}
.np-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.np-steps li{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);padding:10px;transition:transform .3s, box-shadow .3s}
.np-steps li strong{display:block}
.np-steps li span{display:block;color:var(--ink-d)}
.np-steps li.is-on{transform:translateX(6px);box-shadow:var(--shadow)}

@media (min-width:960px){
  .np-board{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start}
  .np-steps{grid-column:1 / -1}
}
/* ---------- 13. Interview Simulator ---------- */
.role-sim .rs-wrap{display:grid;gap:16px;padding:26px 0}
.rs-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.rs-head p{margin:0 0 10px;color:var(--ink-d)}
.rs-ctrl{display:flex;flex-wrap:wrap;gap:8px}
.rs-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)
}
.rs-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.rs-chip.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)}

.rs-grid{display:grid;gap:12px;grid-template-columns:1fr}
.rs-photo{margin:0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:18px;background:rgba(255,255,255,.04)}
.rs-photo figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
.rs-photo.left{justify-self:start;transform:rotate(-1deg)}
.rs-photo.right{justify-self:end;transform:rotate(1deg)}

.rs-stage{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:12px}
.bubble{
  position:relative;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);
  padding:12px;overflow:hidden
}
.bubble::after{
  content:"";position:absolute;left:16px;bottom:-8px;width:18px;height:18px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);transform:rotate(45deg)
}
.role-sim.run .bubble{animation: popPulse 1s ease-out 1}
@keyframes popPulse{0%{transform:scale(.98)}60%{transform:scale(1.02)}100%{transform:scale(1)}}

.rs-script[hidden]{display:none}
.rs-stage[data-role="kandidat"] .rs-script[data-role="kandidat"]{display:block}
.rs-stage[data-role="panel"] .rs-script[data-role="panel"]{display:block}
.rs-script .line{font-weight:700;margin:0 0 6px}
.rs-script .tips{margin:0;padding-left:18px}
.rs-script .tips li{margin:4px 0;color:var(--ink-d)}

@media (min-width:920px){
  .rs-grid{grid-template-columns:1fr 1.1fr 1fr;align-items:start}
}

/* ---------- 14. Resource Shelf ---------- */
.resource-shelf .sh-wrap{display:grid;gap:16px;padding:26px 0}
.sh-head h2{margin:0 0 8px;font:700 24px/1.2 Inter}
.sh-head p{margin:0 0 10px;color:var(--ink-d)}
.sh-ctrl{display:flex;flex-wrap:wrap;gap:8px}
.sh-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)
}
.sh-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.sh-chip.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)}

.sh-grid{display:grid;gap:12px;grid-template-columns:1fr}
.sh-photo{margin:0;padding:10px;border:1px dashed rgba(125,211,255,.28);border-radius:18px;background:rgba(255,255,255,.04)}
.sh-photo figcaption{margin-top:8px;font-size:13px;color:var(--ink-d)}
.sh-photo.left{justify-self:start;transform:rotate(-1deg)}
.sh-photo.right{justify-self:end;transform:rotate(.8deg)}

.shelf{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:12px}
.shelf .row{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px
}
.tile{
  flex:0 0 78%;scroll-snap-align:center;display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding:12px;min-height:76px;position:relative;transform:rotate(var(--tilt,0deg));transition:transform .35s, box-shadow var(--t-med)
}
.tile:hover{transform:rotate(0deg) translateY(-2px);box-shadow:var(--shadow)}
.tile small{display:block;color:var(--ink-d);margin-top:4px}

.progress{height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.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:960px){
  .sh-grid{grid-template-columns:1fr 1.2fr 1fr;align-items:start}
  .tile{flex:0 0 40%}
}
.dial2{ --deg: 0deg; }