/*
 * Calatoria apei — PAGER fix, tranzitie declansata (2026-09-27).
 * Slide-urile NU reactioneaza la scroll. Scroll/swipe/taste = TRIGGER (ca un buton):
 * declanseaza o tranzitie TIME-BASED cap-coada (fadeOut -> alb -> fadeIn), controlata de
 * journey.js; in timpul ei input-ul e blocat. Scroll NORMAL functioneaza doar in interiorul
 * unui slide cu [data-scroll] (ex. viitoarea scara de straturi); la capat -> trigger next.
 * Font Montserrat (brand). Fundaluri CULOARE PLINA. Fara scrub, fara efecte scroll-based.
 */

/* pagina nu deruleaza: pager-ul detine ecranul */
html, body { overflow: hidden; }

/* ===== chrome: pastram DOAR logo-ul ===== */
/* ascunde meniul, social, search, toggle mobil (tot ce e in <nav>) */
#header-outer nav,
#header-outer .slide-out-widget-area-toggle,
#header-outer .mobile-theme-toggle,
#header-outer .mobile-search { display: none !important; }
/* logo: forteaza doar varianta .stnd; albirea pe fundal inchis o face sistemul glass (#header-outer.cb-on-dark #logo img) */
#logo img { display: none !important; }
#logo .stnd { display: inline-block !important; }
/* footer + back-to-top: ascunse complet pe calatorie */
#footer-outer, #to-top { display: none !important; }

/* ===== buton INCHIDERE (× top-right, in locul social-urilor) ===== */
.jn-close {
  position: fixed; top: 22px; right: 20px; z-index: 2147483647;   /* max: la nivel body, deasupra header-ului */
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; text-decoration: none;
  color: #121a4c;                          /* ink navy (light-mode) */
  background: rgb(255 255 255 / 70%);      /* imitatia noastra glass alb translucid — FARA backdrop-filter */
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 5px 28px rgba(9,16,44,.20), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .2s, background .2s;
}
.jn-close:hover { background: rgb(255 255 255 / 85%); transform: scale(1.06); }

/* pager fix, full-screen; slide-urile stau absolut in el */
.jn-pager { position: fixed; inset: 0; overflow: hidden; z-index: 1; background: #F7FAFC; }

.jn-sec {
  position: absolute; inset: 0; box-sizing: border-box;
  /* default: text ancorat JOS-STANGA, ca un "box" invizibil cu padding generos */
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: clamp(40px, 10svh, 110px) clamp(24px, 6vw, 72px);
  font-family: 'Montserrat', -apple-system, system-ui, sans-serif;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease;
}
.jn-sec.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.jn-sec__inner { width: 100%; max-width: 640px; margin: 0; }
.jn-num { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; opacity: .7; margin: 0; }
.jn-sec h1, .jn-sec h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.1; margin: 14px 0 0; }
.jn-hero-title { font-size: clamp(30px, 8vw, 62px); }
.jn-sec h2 { font-size: clamp(26px, 6.4vw, 46px); }
.jn-sec .jn-lead { font-size: clamp(16px, 4.2vw, 19px); line-height: 1.55; font-weight: 400; margin: 18px 0 0; max-width: 46ch; opacity: .95; }

/* ===== slide COPERTA (hero): centrat + intro coregrafiat ===== */
.jn-sec--hero { justify-content: center; align-items: center; text-align: center; }
.jn-sec--hero .jn-sec__inner { max-width: 720px; margin: 0 auto; }
/* fundal video slide (loop, FARA overlay); culoarea/albul sectiunii ramane in spate = fallback / pt eventual fade */
.jn-vid-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* tenta inchisa peste video (intre video z0 si text z3) — lizibilitate text alb. Reglabil din devtools. */
.jn-dark-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgb(0 46 48 / 26%); }
.jn-vid-bg ~ .jn-sec__inner { position: relative; z-index: 3; }
/* box glass-FALS (rgba + border + shadow, FARA backdrop-filter — nu rupe GPU peste ploaie) */
.jn-sec__inner.jn-boxed {
  max-width: 560px;
  padding: clamp(22px, 4vw, 34px) clamp(24px, 4vw, 36px);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(11,32,54,.16), inset 0 1px 0 rgba(255,255,255,.55);
  margin-left: 40px;
  --glass-ink: #121a4c;   /* box deschis -> text ALBASTRU-tema (nu gri/negru), chiar si pe slide-uri cu chrome alb */
}
.jn-boxed .jn-lead-tight { margin-top: 0; }   /* a doua fraza (puntea) lipita sub prima */
.jn-sec--cycle .jn-sec__inner.jn-boxed { max-width: 590px; }   /* ultimul slide: box mai lat (incape cardul cartii) */
/* ploaie pe sticla (slide2): tenta light 50% peste video + canvas picaturi (refracta posterul journey2) */
/* tenta = vignette radial (ca sandbox #cb-rain-tint): transparent-ish in centru -> alb spre margini.
 * Reglabil din DevTools: --tint-x/-y (pozitie centru), --tint-rx/-ry (dimensiuni elipsa),
 * --tint-clear (raza transparenta din centru), --tint-center-a / --tint-edge-a (alpha centru/margine). */
.jn-rain-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --tint-rgb: 255 255 255;   /* culoarea tentei (alb) */
  --tint-x: 70%;
  --tint-y: 50%;
  --tint-rx: 140%;
  --tint-ry: 110%;
  --tint-clear: 30%;         /* pana unde tine centrul transparent-ish */
  --tint-center-a: 0.1;      /* alpha in centru */
  --tint-edge-a: 0.5;        /* alpha la margini (alb) */
  background: radial-gradient(ellipse var(--tint-rx) var(--tint-ry) at var(--tint-x) var(--tint-y), rgb(var(--tint-rgb) / 15%) var(--tint-clear), rgb(var(--tint-rgb)) 100%);
}
html[data-theme="dark"] .jn-rain-tint { --tint-rgb: 10 18 28; }   /* dark mode: vigneta inchisa (nu alba) pe slide 1+2 */
.jn-rain-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* overlay UNIC de ploaie: intre video (z0) si TEXT (z3) -> doar textele stau peste ploaie. JS il porneste doar pe primele 2 slide-uri */
.jn-rain-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* fadeIn STAGGERED, dar dispariție INSTANT: tranzitia sta pe starea "-on" (apar in 1.2s);
 * la scoaterea claselor NU exista tranzitie -> opacity sare la 0 instant (fara glitch peste slide-ul urmator). */
.jn-rain-tint, .jn-rain-canvas { opacity: 0; }
.jn-rain-layer.tint-on .jn-rain-tint { opacity: 1; transition: opacity var(--jn-tint-dur, 1.2s) ease; }
.jn-rain-layer.drops-on .jn-rain-canvas { opacity: var(--jn-drop-opacity, .7); transition: opacity var(--jn-drop-dur, 1.2s) ease; }
.jn-hero-by { margin: 26px 0 0; }
.jn-hero-sign { display: block; width: 280px; max-width: 72vw; height: auto; margin: 30px auto 0; }

/* apar rand pe rand (1s fiecare, mic delay intre ele) — CSS-only, ruleaza la load;
   fara JS raman vizibile (fallback). */
/* stare initiala cascada, scopata pe hero (0,2,0) ca sa bata `.jn-sec .jn-lead { opacity:.95 }` pt lead */
.jn-sec--hero .jn-intro-1, .jn-sec--hero .jn-intro-2, .jn-sec--hero .jn-intro-3, .jn-sec--hero .jn-intro-4, .jn-sec--hero .jn-intro-5, .jn-sec--hero .jn-intro-6 { opacity: 0; transform: translateY(14px); }
.jn-intro-1 { animation: jn-intro 1s ease forwards .2s; }
.jn-intro-2 { animation: jn-intro 1s ease forwards .55s; }
.jn-intro-3 { animation: jn-intro 1s ease forwards .9s; }
.jn-intro-4 { animation: jn-intro 1s ease forwards 1.25s; }
.jn-intro-5 { animation: jn-intro 1s ease forwards 1.6s; }
.jn-intro-6 { animation: jn-intro 1s ease forwards 2.05s; }
@keyframes jn-intro { to { opacity: 1; transform: none; } }
/* slide 4: buton carte in box -> centrat; buton "Inapoi la site" dreapta-jos (light mode fortat) */
.jn-book-btn { display: flex; width: fit-content; margin: 18px auto 0; }
.jn-cycle-back { position: absolute; z-index: 4; right: clamp(24px, 6vw, 72px); bottom: clamp(40px, 10svh, 110px); }
.jn-cycle-back { --glass-ink: #121a4c; --glass-bg: rgb(255 255 255 / 62%); --glass-border: rgba(255,255,255,.7); --page-bg: #fff; }

/* <button> stilizat ca .cb-cta: reset nativ */
button.cb-cta { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: 'Montserrat', sans-serif; }

/* ===== player: autohint (hero) + prev / play-pauza (cu inel loading) / next (centru-jos, LIGHT) ===== */
.jn-controls { position: fixed; left: 50%; bottom: clamp(40px, 10svh, 110px); transform: translateX(-50%); z-index: 100000; display: flex; flex-direction: column; align-items: center; gap: 14px; }   /* bottom = acelasi cu boxul din stanga -> aliniate */
.jn-controls-row { display: flex; align-items: center; gap: 16px; }
/* caption auto-derulare (doar pe hero), box light h5/h6 */
.jn-autohint { display: none; margin: 0; padding: 9px 20px; border-radius: 100px; font-size: 14px; font-weight: 600; letter-spacing: .03em; color: #121a4c; background: rgb(255 255 255 / 74%); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 6px 20px rgba(9,16,44,.16); }
.jn-controls.at-hero .jn-autohint { display: block; }
.jn-playpause, .jn-navbtn {
  display: grid; place-items: center; cursor: pointer; border-radius: 50%;
  color: #121a4c; appearance: none; -webkit-appearance: none;   /* light mode: iconita navy pe glass alb */
  background: rgb(255 255 255 / 72%); border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 6px 24px rgba(9,16,44,.22), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .2s, background .2s;
}
.jn-playpause { width: 66px; height: 66px; position: relative; z-index: 1; }   /* mai mare */
.jn-navbtn { width: 50px; height: 50px; }
.jn-playpause:hover, .jn-navbtn:hover { background: rgb(255 255 255 / 92%); transform: scale(1.06); }
.jn-playpause .jn-ico-pause { display: none; }
.jn-playpause.is-playing .jn-ico-play { display: none; }
.jn-playpause.is-playing .jn-ico-pause { display: block; }
/* inel de loading in jurul play-ului (inlocuieste bara de jos) */
.jn-play-wrap { position: relative; width: 80px; height: 80px; display: grid; place-items: center; }
.jn-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.jn-ring-track { fill: none; stroke: rgb(255 255 255 / 85%); stroke-width: 5; }   /* track alb */
.jn-ring-fill { fill: none; stroke: #121a4c; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }   /* progres albastru navy */
/* hero: doar play (fara prev/next). final: doar prev (fara play/next) */
.jn-controls.at-hero .jn-navbtn { display: none; }
.jn-controls.at-last .jn-play-wrap, .jn-controls.at-last #jn-next, .jn-controls.at-last #jn-prev { display: none; }
/* shadow alb pe textul + semnatura hero (lizibilitate peste video) */
.jn-sec--hero .jn-num, .jn-sec--hero .jn-hero-title, .jn-sec--hero .jn-hero-lead, .jn-sec--hero .jn-hero-by { text-shadow: 0 0 40px rgba(255,255,255,.95), 0 0 90px rgba(255,255,255,.85), 0 0 140px rgba(255,255,255,.6); }
.jn-sec--hero .jn-hero-sign { filter: drop-shadow(0 0 34px rgba(255,255,255,.95)) drop-shadow(0 0 70px rgba(255,255,255,.7)); }
/* dark mode: fara glow alb pe text; semnatura (SVG navy) -> ALBA prin invert (nu doar fara glow) */
html[data-theme="dark"] .jn-sec--hero .jn-num, html[data-theme="dark"] .jn-sec--hero .jn-hero-title, html[data-theme="dark"] .jn-sec--hero .jn-hero-lead, html[data-theme="dark"] .jn-sec--hero .jn-hero-by { text-shadow: none; }
html[data-theme="dark"] .jn-sec--hero .jn-hero-sign { filter: brightness(0) invert(1); }
/* logo ALB cand journey vrea chrome inchis (jn-dark) — robust fata de cursa cb-on-dark/light */
body.jn-dark #header-outer #logo img { filter: brightness(0) invert(1) !important; }
/* lead-ul copertei (beat-ul „cer") centrat sub titlu, fara limita de latime.
   specificitate (0,3,0) ca sa bata `.jn-sec .jn-lead { max-width:46ch }` (0,2,0). */
.jn-sec--hero .jn-lead.jn-hero-lead { margin: 40px auto 0; max-width: none; }
/* outro: tot continutul copertei se stinge inainte de auto-scroll la slide 1 */
.jn-sec--hero.is-outro .jn-sec__inner { opacity: 0; transition: opacity .8s ease; }
@media (prefers-reduced-motion: reduce) {
  .jn-sec--hero .jn-intro-1, .jn-sec--hero .jn-intro-2, .jn-sec--hero .jn-intro-3, .jn-sec--hero .jn-intro-4, .jn-sec--hero .jn-intro-5, .jn-sec--hero .jn-intro-6 { opacity: 1; transform: none; animation: none; }
}

/* ---- fundaluri CULOARE PLINA (fara gradient); vecinii clar diferiti ---- */
.jn-sec--hero    { background: #F7FAFC; color: #0B2036; }
.jn-sec--sky     { background: #DCEBF7; color: #0B2036; }
.jn-sec--surface { background: #B9D0E3; color: #0B2036; }
.jn-sec--descent { background: #8FAAC4; color: #0B2036; }
.jn-sec--time    { background: #5E7A98; color: #F7FAFC; }
.jn-sec--imprint { background: #28405C; color: #F7FAFC; }
.jn-sec--light   { background: #6D8BA6; color: #F7FAFC; }
.jn-sec--cycle   { background: #AEC6DA; color: #0B2036; }
.jn-sec--quote   { background: #0B2036; color: #F7FAFC; justify-content: center; align-items: center; text-align: center; }
.jn-sec--close   { background: #F7FAFC; color: #0B2036; }

/* ---- overlay ALB pt tranzitie (TIME-BASED: clasa .is-on din journey.js) ---- */
#jn-white { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 50; transition: opacity .42s ease; }
#jn-white.is-on { opacity: 1; }

/* ---- container de scroll INTERN (pt slide-urile care chiar deruleaza, ex. straturi) ---- */
.jn-scroll { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---- fraza-mare ---- */
.jn-sec--quote .jn-sec__inner { max-width: 22ch; margin: 0 auto; }
.jn-bigquote { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: clamp(24px, 6.4vw, 50px); line-height: 1.2; }

/* ---- incheiere ---- */
.jn-end-close { font-weight: 600; font-size: clamp(20px, 4.6vw, 30px); line-height: 1.3; margin: 0; }
.jn-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; }
.jn-btn { display: inline-block; text-decoration: none; border-radius: 999px; padding: 12px 26px; font-size: 14px; font-weight: 600; letter-spacing: .02em; font-family: 'Montserrat', sans-serif; }
/* butoane = accentul temei generale (teal brand #2FB5A8) pt primary; ghost = outline pe --glass-ink */
.jn-btn--primary { background: #2FB5A8; color: #06121f; }
.jn-btn--primary:hover { filter: brightness(1.06); }
.jn-btn--ghost { background: transparent; color: var(--glass-ink, #0B2036); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glass-ink, #0B2036) 40%, transparent); }
.jn-btn--ghost:hover { background: color-mix(in srgb, var(--glass-ink, #0B2036) 8%, transparent); }

/* indicator lateral de pozitie (puncte) */
.jn-dots { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.jn-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(11,32,54,.28); transition: background .2s, transform .2s; }
.jn-dots button.is-active { background: #28405C; transform: scale(1.4); }
body.jn-dark .jn-dots button { background: rgba(255,255,255,.32); }
body.jn-dark .jn-dots button.is-active { background: #fff; }

/* link discret "Inchide calatoria" sub CTA */
.jn-close-row { margin: 18px 0 0; }
.jn-close-row a { font-family: 'Montserrat', sans-serif; font-size: 13px; letter-spacing: .04em; color: inherit; opacity: .7; text-decoration: underline; text-underline-offset: 3px; }
.jn-close-row a:hover { opacity: 1; }
/* card carte = replica boxului din /povestea-mea (bg verde #cbf2d2 @0.3, radius 20, copertă in patrat alb) */
.jn-book-card { display: flex; align-items: center; gap: 18px; text-decoration: none;
  margin: 16px 0 0 0; padding: 16px 20px;
  background: rgb(203 242 210 / 79%); border-radius: 20px; box-shadow: 0 10px 30px rgba(9,16,36,.12); }
.jn-book-fig { flex: 0 0 25%; width: 25%; aspect-ratio: 1 / 1; background: #fff; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.jn-book-fig img { max-width: 78%; max-height: 78%; width: auto; height: auto; display: block; }
.jn-book-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.jn-book-title { color: #121a4c; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.jn-book-sub { color: #121a4c; font-size: 14px; line-height: 1.4; }

/* ===== slide SCARA DE STRATURI (pager intern triggered: 1 scroll = 1 strat + infiltrare) ===== */
.jn-sec--strata { padding: 0; overflow: hidden; --scale-x: 12px; --scale-w: 92px; background: #2F3A4C; }
/* scena 2.5D WaterLayers: stage = fundal (z0), .jn-strata-view = track de scroll deasupra (z1) */
.jn-sec--strata .jn-strata-stage { position: absolute; inset: 0; z-index: 0; }
.jn-sec--strata .jn-strata-stage.wl-root { height: 100%; }   /* umple sectiunea, nu 100svh */
.jn-strata-track { width: 1px; height: 260svh; pointer-events: none; }   /* mai scurt = scroll mai rapid prin scena */
/* box text (ca slide 2/4) peste scena; pointer-events none -> scroll-ul trece la .jn-strata-view */
.jn-sec--strata .jn-strata-box {
  position: absolute; z-index: 2; pointer-events: none; margin-left: 0; width: auto;
  left: clamp(24px, 6vw, 72px); right: clamp(24px, 6vw, 72px); bottom: clamp(40px, 10svh, 110px);
}

/* sidebar scara: box cu ASPECT de glass (FARA backdrop-filter) — alb 85% + border + shadow */
.jn-scale {
  position: absolute; left: var(--scale-x); top: 12svh; bottom: 12svh; width: var(--scale-w);
  z-index: 6; pointer-events: auto; cursor: grab; touch-action: none;   /* slider: prinzi si tragi */
  background: rgb(255 255 255 / 76%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 82px;
  box-shadow: 0 10px 34px rgba(11,32,54,.14), inset 0 1px 0 rgba(255,255,255,.5);
}
.jn-scale:active { cursor: grabbing; }
/* culori FIXE, indiferent de fundalul stratului (scara sta mereu pe alb) */
.jn-scale-line { position: absolute; left: 24px; top: 8%; bottom: 8%; width: 2px; background: rgba(11,32,54,.25); }
.jn-scale-marker { position: absolute; left: 24px; top: 10%; width: 12px; height: 12px; border-radius: 50%; background: #1086e0; transform: translate(-50%,-50%); box-shadow: 0 0 0 3px rgba(255,255,255,.9); }
.jn-scale-tick { position: absolute; left: 36px; transform: translateY(-50%); font: 600 9px/1 'Montserrat', sans-serif; letter-spacing: .03em; white-space: nowrap; color: rgba(11,32,54,.6); }

/* fundal FIX full-bleed: 4 layere SVG INLINE stivuite; JS conduce opacity (k<=i) + infiltrarea prin --p */
.jn-strata-bg { position: absolute; inset: 0; z-index: 0; }
.jn-bg-l { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.jn-bg-l svg { width: 100%; height: 100%; display: block; }

/* viewport = container de SCROLL NATIV continuu (straturile curg smooth); scara flotează peste */
.jn-strata-view { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.jn-strata-view::-webkit-scrollbar { display: none; }
.jn-strata-stack { display: block; position: relative; }
/* fiecare strat = un ecran; TRANSPARENT (textura sta pe backdrop-ul fix); textul curge cu scroll-ul */
.jn-stratum { height: 100svh; position: relative; overflow: hidden; background: transparent; color: var(--fg, #0B2036); }
/* de la pragul „adanc" (gresie ~30% -> roca-mama) textele straturilor devin albe.
   tema forteaza continutul cu `color: var(--glass-ink) !important` -> nu luptam cu !important,
   ci suprascriem chiar --glass-ink pe sectiunea de straturi; textul il mosteneste. */
/* straturile NU depind de light/dark mode (rocile au aceleasi culori) -> text navy fix,
   independent de tema; devine alb doar la bazalt (prin body.jn-dark de mai jos). */
.jn-sec--strata { --glass-ink: #0B2036; }
body.jn-dark .jn-sec--strata { --glass-ink: #F7FAFC; }
/* slide cu fundal video inchis (data-dark-chrome): text alb (tema forteaza color:var(--glass-ink)) */
body.jn-dark [data-dark-chrome] { --glass-ink: #F7FAFC; }
/* roca-mama = acvifer captiv: panou INALT (2 unitati scroll: infiltrare --p -> acumulare --q pe layerul 5);
   textul ramane PINNED cat curge acumularea. overflow visible ca sticky sa functioneze. */
.jn-stratum--tall { height: 165svh; overflow: visible; }   /* roca-mama: infiltrare + flood impart travel-ul (JS adaptiv) */
.jn-stratum--tall .jn-stratum-in { position: sticky; inset: auto; top: 0; height: 100svh; }

.jn-stratum-in { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: clamp(40px, 10svh, 110px) clamp(24px, 6vw, 72px); padding-left: calc(var(--scale-x) + var(--scale-w) + 28px); }
.jn-stratum-in .jn-lead { max-width: 40ch; }

/* text FIX per strat (populat de JS): sta locului, JS conduce opacity (fade la tranzitie) + translateY (parallax mic) */
.jn-strata-copy { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: clamp(40px, 10svh, 110px) clamp(24px, 6vw, 72px); padding-left: calc(var(--scale-x) + var(--scale-w) + 70px); will-change: opacity, transform; }
.jn-strata-copy .jn-lead { max-width: 40ch; }
.jn-strata-copy .jn-num:empty { display: none; }   /* straturile din mijloc nu mai au kicker numeric */
/* cand JS conduce copy-ul, textul din panouri e ascuns (panourile raman doar spatiu de scroll) */
.jn-copy-live .jn-stratum-in { visibility: hidden; }

@media (min-width: 720px) {
  .jn-sec__inner { max-width: 680px; }
  .jn-sec--strata { --scale-x: 20px; --scale-w: 116px; }
  .jn-scale-tick { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .jn-sec, #jn-white, .jn-scale-marker { transition: none; }
}

/* ===== MOBILE (<720): anti-"varza" — boxuri in ecran, inaltime corecta, controale aerisite.
 * Slide-ul straturi (--strata) e exclus: ramane full-bleed cum e. ===== */
@media (max-width: 719px) {
  /* 1. OVERFLOW: boxul nu mai e impins 40px in dreapta + nu depaseste latimea ecranului */
  .jn-sec__inner.jn-boxed { margin-left: 0; max-width: 100%; }
  .jn-sec--cycle .jn-sec__inner.jn-boxed { max-width: 100%; }
  /* padding de sectiune mai mic (10svh era prea mult) + rezerva jos pt controale.
     Exclus hero (centrat) si strata (full-bleed, padding 0). */
  .jn-sec:not(.jn-sec--strata):not(.jn-sec--hero) {
    padding: clamp(18px, 5svh, 40px) 18px 128px;
  }
  .jn-sec--hero { padding: 28px 18px; }

  /* 2. INALTIME: pager + overlay alb umplu exact viewportul vizibil (dvh, nu layout ICB) */
  .jn-pager { height: 100dvh; }
  #jn-white { height: 100dvh; }

  /* 3. CONTROALE aerisite: mai mici, mai jos; dots ascunse (aglomerau marginea dreapta
     si se bateau cu boxul full-width pe slide 4). Navigarea = swipe + sageti. */
  .jn-controls { bottom: 20px; gap: 10px; }
  .jn-playpause { width: 56px; height: 56px; }
  .jn-play-wrap { width: 68px; height: 68px; }
  .jn-navbtn { width: 44px; height: 44px; }
  .jn-dots { display: none; }
  .jn-close { top: 14px; right: 14px; width: 40px; height: 40px; }
  .jn-cycle-back { right: 14px; bottom: 18px; }

  /* titluri + texte suport mai mici pe mobil (erau prea mari) */
  .jn-hero-title { font-size: clamp(26px, 7vw, 40px); }
  .jn-sec h2 { font-size: clamp(21px, 5.6vw, 34px); }
  .jn-sec .jn-lead { font-size: clamp(14px, 3.8vw, 16px); }

  /* 1. slide1 (hero): ritm de spatiere aerisit, centrat (ca hero-ul de pe homepage) */
  .jn-sec--hero .jn-sec__inner > .jn-num:first-child { margin: 0 0 10px; }
  .jn-sec--hero .jn-hero-title { margin-top: 0; }
  .jn-sec--hero .jn-lead.jn-hero-lead { margin: 30px auto 0; }
  .jn-sec--hero .jn-hero-by { margin: 36px 0 0; }
  .jn-sec--hero .jn-hero-sign { margin: 12px auto 0; }

  /* 2. slide1: boxul de instructiuni = lat cat containerul + radius 16 (nu pilula) */
  .jn-autohint {
    width: calc(100vw - 32px); max-width: none; box-sizing: border-box;
    border-radius: 16px; padding: 12px 16px; text-align: center;
  }

  /* 3. slide3 (straturi): boxul de text SUS (sa se vada straturile dedesubt) */
  .jn-sec--strata .jn-strata-box { top: clamp(64px, 11svh, 104px); bottom: auto; left: 16px; right: 16px; }
}