/* =====================================================================
   IT Learning · FINAL FREEZE (Round 03) · internal maximum-fidelity prototype
   World, registers and geometry follow the approved GM engine (Build 01 / Patch 03);
   every new scene inherits them (see IMPLEMENTATION_NOTES.md, DEVIATIONS.md, TWEEN_TABLE.md, BUILD02_NOTES.md).
   ===================================================================== */

/* ---------- fonts (substitutes: Sora for Clash Display, Geist exact) ---------- */
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("../assets/fonts/sora-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("../assets/fonts/sora-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../assets/fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../assets/fonts/geist-latin-wght-normal.woff2") format("woff2")}

/* ---------- world ---------- */
:root{
  --bg:#070707; --bg-2:#0c0c0c; --bg-3:#1d1d1d;
  --fg:#fff; --fg-75:rgba(255,255,255,.75); --fg-60:rgba(255,255,255,.6); --fg-10:rgba(255,255,255,.1);
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07); --frame:#494949;
  --red:#e11d26; --red-deep:#b3121a;
  --display:"Sora","Clash Display",system-ui,sans-serif;
  --text:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(24px,2.35vw,48px);
  --container:1440px;
  --r-lg:21px; --r-md:16px; --r-sm:8px; --r-xs:4px;
  --nav-h:100px;
  --btn-h:72px;
  /* wheel geometry (desktop = fixed benchmark values) */
  --card-w:360px; --card-h:580px; --disc-r:1130px; --step:15deg;
  --space-1:96px; --space-2:128px; --space-3:160px;
}
@media (max-width:1279px){:root{--card-w:260px;--card-h:419px;--disc-r:820px;--nav-h:88px}}
@media (max-width:767px){:root{--card-w:140px;--card-h:226px;--disc-r:560px;--nav-h:72px;--btn-h:60px;--space-1:64px;--space-2:80px;--space-3:96px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;font-family:var(--text);font-size:16px;line-height:1.5;background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
/* subtle noise + continuous dark world */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}
main{position:relative}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:#fff;color:#000;padding:8px 12px}
.skip:focus{left:8px;top:8px}

/* ---------- registers ---------- */
.display{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em}
.section-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(44px,3.5vw,72px);line-height:1;text-align:center}
.monumental{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;
  font-size:11vw;line-height:.92;text-align:center}
@media (max-width:767px){.monumental{font-size:13vw}}

/* ---------- buttons (benchmark geometry: icon square + label, 72px) ---------- */
.btn{display:inline-flex;align-items:center;height:var(--btn-h);border-radius:var(--r-xs);overflow:hidden;
  font-family:var(--text);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .3s ease-out}
.btn-icon{display:grid;place-items:center;width:var(--btn-h);height:100%;flex:0 0 auto}
.btn-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn-label{padding:0 34px 0 22px}
.btn--dark{background:#0e0e0e;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.btn--dark .btn-icon{background:#1a1a1a}
.btn--red{background:var(--red);color:#fff}
.btn--red .btn-icon{background:var(--red-deep)}
.btn--white{background:#fff;color:#0a0a0a}
.btn--white .btn-icon{background:#e6e6e6}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:767px){.btn{font-size:13px}.btn-label{padding:0 22px 0 14px}}

/* ---------- nav ---------- */
/* PATCH B2B V1: `sticky` cu margine negativa, nu `fixed`. Fara banner de consimtamant e identic cu vechiul `fixed`: sus,
   peste Hero, fara loc in flux. Cu bannerul deschis sta IMEDIAT SUB el; cand bannerul iese din ecran la derulare, se
   lipeste sus. Nicio masurare, nicio ascultare de scroll: layout nativ. */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);margin-bottom:calc(-1 * var(--nav-h));padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));transition:background-color .4s ease-out}
.nav::after{content:"";position:absolute;inset:0;background:rgba(7,7,7,.92);opacity:0;transition:opacity .4s ease-out;z-index:-1;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav.is-solid::after{opacity:1}
.nav-logo img{height:40px;width:auto}
.nav-links{display:flex;align-items:center;gap:18px;font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.nav-links a{color:rgba(255,255,255,.72);transition:color .25s}
.nav-links a:hover,.nav-links a.is-active{color:#fff}
.nav-sep{width:1px;height:16px;background:rgba(255,255,255,.35);margin:0 6px}
.nav-burger{display:none;width:44px;height:44px;position:relative}
.nav-burger span{position:absolute;left:12px;right:12px;height:2px;background:#fff;top:18px;transition:transform .3s,top .3s}
.nav-burger span+span{top:26px}
.nav-burger[aria-expanded="true"] span{top:22px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span+span{transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:45;background:rgba(7,7,7,.98);padding:calc(var(--nav-h) + 24px) var(--gutter) 40px;overflow:auto}
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:flex;flex-direction:column;gap:6px}
.mobile-menu a{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:28px;line-height:1.2;padding:10px 0;border-bottom:1px solid var(--line-soft)}
@media (max-width:1279px){.nav-links{gap:14px;font-size:12px}}
@media (max-width:1023px){.nav-links{display:none}.nav-burger{display:block}.nav-logo img{height:30px}}

/* ---------- SCENE 1 · HERO (pinned; the next scene physically covers it) ---------- */
.hero{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;z-index:0;background:#000;isolation:isolate}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform-origin:50% 50%;will-change:transform}
/* PATCH 01 · the final desktop export carries a 31 px bottom and 29 px right black bar (of 1920x1080); the element is
   oversized by 3.2 % and anchored top-left so the bars fall outside the clipped hero. Transform origin keeps the zoom centred on the viewport. */
.hero-video--desktop{width:103.2%;max-width:none;height:103.2%;right:0;top:0;left:auto;bottom:auto;transform-origin:51.55% 48.45%}
/* PATCH 03 · the 9 s export carries a 37 px LEFT and a 24 px BOTTOM black bar (of 1920x1080): same 3.2 % oversize, now anchored top-right.
   The burned-in IT Learning lockup (top-left of the footage, under the nav logo) is hidden by a local dark mask, no zoom, no re-crop. */
.hero-lockup-mask{position:absolute;left:0;top:0;width:560px;height:320px;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 560px 320px at 0 0,rgba(4,4,4,.96) 0%,rgba(4,4,4,.92) 48%,rgba(4,4,4,0) 78%)}
.hero-video--mobile{display:none}
@media (max-width:767px){
  .hero-video--desktop,.hero-lockup-mask{display:none}
  /* PATCH 01 · the final 9:16 export carries a 14 px left black bar (of 1080); shifted 1.5 % left and widened so it is clipped at any phone width */
  .hero-video--mobile{display:block;object-position:50% 30%;width:103%;max-width:none;height:100%;left:-1.5%;right:auto;transform-origin:50% 50%}
}
/* baseline darkening (benchmark: dark world from frame one) */
.hero-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 28%,rgba(0,0,0,.34) 55%,rgba(0,0,0,.78) 82%,#050505 100%)}
.hero-shade::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34)}
/* scroll-coupled overlay → full dark */
.hero-overlay{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.hero-content{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) clamp(48px,7vh,80px);text-align:center;z-index:2}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:22px}
.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 12px rgba(225,29,38,.8)}
.hero-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:.95;
  font-size:clamp(34px,calc(-10px + 6.55vw),104px);margin:0 auto;max-width:15.2em}   /* BUILD 02 · V2 copy is longer: 3 lines at 1440 (see DEVIATIONS.md) */
.hero-line--1{text-wrap:balance}
.hero-line{display:block}
.clip{display:block;padding:.18em 0 .3em;margin:-.18em 0 -.3em;clip-path:inset(0 0 0 0)}
.clip-inner{display:block}
.hero-support{max-width:600px;margin:26px auto 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.8)}
.hero-ctas--mobile{display:none}
@media (max-width:1023px){
  .hero-ctas--mobile{display:grid;gap:10px;margin-top:28px}
  .hero-ctas--mobile .btn{width:100%;justify-content:flex-start}
  .hero-content{padding-bottom:36px}
  .hero-kicker{font-size:11px;letter-spacing:.14em;margin-bottom:16px}
  .hero-support{font-size:15px;margin-top:18px;color:rgba(255,255,255,.78)}
}
@media (min-width:1024px) and (max-width:1279px){.hero-support{max-width:480px}}

/* ---------- SCENE 2 · TRUST (opaque, higher stacking context → covers hero) ---------- */
.scene,.trust,.spectacle,.programs{position:relative;z-index:2;background:var(--bg)}
.logo-band{background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:44px 0;overflow:hidden}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:0;width:max-content;margin:0 auto}
.marquee-track.is-ready{margin:0;will-change:transform;animation:marquee var(--marquee-dur,60s) linear infinite}
.marquee-track li{flex:0 0 auto;padding:0 44px;display:flex;align-items:center;justify-content:center}
.marquee-track img{height:auto;opacity:.75}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee.is-paused .marquee-track,.reduced .marquee-track{animation-play-state:paused}
@media (max-width:767px){.logo-band{padding:28px 0}.marquee-track li{padding:0 26px}.marquee-track img{transform:scale(.8);transform-origin:center}}

.metrics{padding:clamp(96px,8.5vw,176px) var(--gutter) clamp(112px,10vw,208px);text-align:center}
.metrics-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px;margin:0 auto}
.metric{padding:6px 24px;border-left:1px solid var(--fg-10)}
.metric:first-child{border-left:0}
.metric-number{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1;font-size:clamp(48px,5vw,68px);font-variant-numeric:tabular-nums}
.metric-label{display:block;margin-top:14px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-60)}
.metrics-cred{margin:56px auto 0;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-60)}
@media (max-width:767px){
  .metrics-row{grid-template-columns:1fr;max-width:none}
  .metric{border-left:0;border-top:1px solid var(--fg-10);padding:28px 0}
  .metric:first-child{border-top:0;padding-top:0}
  .metrics-cred{margin-top:36px}
}

/* ---------- SCENE 3 · SPECTACLE · portrait wheel ---------- */
.spectacle{overflow:clip;isolation:isolate}
.spectacle-head{padding:0 var(--gutter);text-align:center}
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;margin:24px auto 0;max-width:1100px;
  font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-75)}
.steps b{font-weight:600;color:var(--red);margin-right:8px}
@media (max-width:767px){.steps{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;text-align:left;font-size:12px;letter-spacing:.1em}}

.wheel-stage{position:relative;height:var(--card-h);margin-top:92px;z-index:1}
@media (max-width:767px){.wheel-stage{margin-top:48px}}
.wheel{position:absolute;left:50%;top:calc(var(--card-h) + var(--disc-r));width:0;height:0;will-change:transform;transform:rotate(0deg)}
.card{position:absolute;left:calc(var(--card-w) / -2);top:calc(var(--card-h) / -2);width:var(--card-w);height:var(--card-h);
  transform:rotate(calc(var(--i) * var(--step))) translateY(calc(-1 * (var(--disc-r) + var(--card-h) / 2)))}
.card-inner{position:relative;width:100%;height:100%;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg,#0d0d0d 0%,#121212 34%,var(--c-mid) 62%,var(--c) 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transform-origin:50% 50%}
.card--red{--c:#d3161f;--c-mid:#5a0f13}
.card--blue{--c:#1f4fd8;--c-mid:#122a63}
.card--purple{--c:#8b2fd6;--c-mid:#3d1a5e}
.card--teal{--c:#0f9d8f;--c-mid:#0d4a45}
.card--amber{--c:#e08a10;--c-mid:#5c3a0d}
.card--green{--c:#1f9d3a;--c-mid:#0f4520}
.card--magenta{--c:#c81a7a;--c-mid:#561238}
.card--film{--c:#2a2a2a;--c-mid:#161616}
.card-role{position:absolute;left:8%;top:6.5%;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);z-index:3}
.card-photo{position:absolute;left:1%;bottom:0;width:84%;height:70%;object-fit:contain;object-position:50% 100%;
  z-index:1}
.card-photo--film{left:0;width:100%;height:56%;object-fit:cover;object-position:50% 20%;opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
.card-name{position:absolute;right:6%;bottom:15%;z-index:2;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:1;
  white-space:nowrap;color:#fff;font-size:56px;writing-mode:vertical-rl;transform:rotate(180deg);text-shadow:0 8px 24px rgba(0,0,0,.35)}
@media (max-width:1279px){.card-name{font-size:42px}.card-role{font-size:10px}}
@media (max-width:767px){.card-name{font-size:22px;letter-spacing:-.02em}.card-role{font-size:7px;letter-spacing:.12em;left:9%;top:7%}
  .card-inner{border-radius:8px;box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}}

/* the disc: a fixed-size circle whose top edge sits on the card bottom line */
.disc-zone{position:relative;z-index:2;overflow:clip;padding-bottom:clamp(120px,14vw,287px)}
.disc{position:absolute;left:50%;top:0;width:calc(var(--disc-r) * 2);height:calc(var(--disc-r) * 2);margin-left:calc(-1 * var(--disc-r));
  border-radius:50%;background:#040404;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 -40px 120px rgba(0,0,0,.85);z-index:0}
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.05),transparent 42%)}

/* ---------- SCENE 5 · CINE SUNTEM · large video moment (inside the disc) ---------- */
.moment{position:relative;z-index:1;text-align:center;padding:clamp(64px,5.5vw,113px) var(--gutter) 0}
.moment-mark{display:flex;justify-content:center}
.moment-mark img{height:26px;width:auto;opacity:.5}
.moment-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(68px,8.2vw,168px);margin-top:clamp(120px,14vw,280px);color:#fff}
.player{position:relative;width:min(900px,100%);margin:-32px auto 0;aspect-ratio:16/9;background:#000;border-radius:var(--r-xs);overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 100px rgba(0,0,0,.6)}
@media (max-width:767px){.player{margin-top:-16px}}
.player-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* PATCH 03 · desktop film ≥768 px, vertical film below; the mobile player box follows the 9:16 film */
.player-video--mobile{display:none}
@media (max-width:767px){.player{aspect-ratio:9/16}.player-video--desktop{display:none}.player-video--mobile{display:block}}
.player-tag{position:absolute;left:14px;top:12px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(0,0,0,.45);padding:6px 10px;border-radius:3px;z-index:2}
.player-unmute{position:absolute;right:14px;top:12px;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.02em;color:#fff;background:rgba(0,0,0,.45);padding:7px 12px;border-radius:3px;z-index:2;transition:opacity .3s}
.player-unmute svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.player-big{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:2;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);transition:transform .3s ease-out,opacity .3s ease-out}
.player-big svg{width:34px;height:34px;fill:#fff;margin-left:4px}
.player-big:hover{transform:scale(1.06)}
.player.is-unmuted .player-big,.player.is-unmuted .player-unmute{opacity:0;pointer-events:none}
/* PATCH 02 · fullscreen state of the player (Fullscreen API on the container; iOS uses the native player) */
.player .ico-exit{display:none}
.player.is-fullscreen .ico-enter{display:none}.player.is-fullscreen .ico-exit{display:block}
.player:fullscreen,.player:-webkit-full-screen{width:100vw;height:100vh;margin:0;border-radius:0;box-shadow:none;background:#000;aspect-ratio:auto}
.player:fullscreen .player-video,.player:-webkit-full-screen .player-video{object-fit:contain}
.player:fullscreen .player-bar,.player:-webkit-full-screen .player-bar{height:56px;padding:0 20px}
.player-bar{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;gap:10px;padding:0 12px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));color:#fff;font-size:12px;font-variant-numeric:tabular-nums}
.player-btn{display:grid;place-items:center;width:28px;height:28px}
.player-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.player-btn .ico-play,.player-btn .ico-pause{fill:#fff;stroke:none}
.player .ico-pause,.player .ico-muted{display:none}
.player.is-playing .ico-play{display:none}.player.is-playing .ico-pause{display:block}
.player.is-muted .ico-vol{display:none}.player.is-muted .ico-muted{display:block}
.player-progress{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:2px;position:relative;cursor:pointer}
.player-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:2px}
.player-time{min-width:34px}
.moment-line{margin:40px auto 0;max-width:720px;font-size:15px;line-height:1.5;color:var(--fg-75)}
@media (max-width:767px){.moment-mark img{height:20px}.moment-line{margin-top:28px;font-size:14px}}

/* ---------- SCENE 4 · PROGRAMS · monumental title + service panel ---------- */
.programs{padding:0 var(--gutter) var(--space-3)}
.monumental{color:#fff}
.panel{display:grid;grid-template-columns:54.4fr 36.5fr;column-gap:96px;align-items:center;max-width:var(--container);margin:clamp(56px,4.7vw,97px) auto 0}
.panel-media{transform-origin:0% 100%}
.mac-frame{background:#1b1b1b;border:1px solid var(--frame);border-radius:12px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.55)}
.mac-bar{height:30px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#202020;border-bottom:1px solid #2c2c2c}
.mac-bar span{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.mac-bar span:nth-child(2){background:#febc2e}
.mac-bar span:nth-child(3){background:#28c840}
.mac-screen{position:relative;aspect-ratio:16/9;background:#000}
.mac-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rec-tag{position:absolute;left:14px;top:12px;display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,0,0,.5);padding:6px 10px;border-radius:3px}
.panel-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;font-size:clamp(30px,2.6vw,52px)}
.panel-lead{margin-top:18px;font-size:15px;line-height:1.5;color:var(--fg-75);max-width:52ch}
.accordion{margin-top:34px;border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:55px;padding:14px 0;cursor:pointer;list-style:none;
  font-family:var(--text);font-weight:600;font-size:16px;letter-spacing:.02em;text-transform:uppercase}
.acc-head::-webkit-details-marker{display:none}
.acc-chevron{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease-out;flex:0 0 auto}
.acc[open] .acc-chevron{transform:rotate(180deg)}
.acc-body{overflow:hidden}
.acc-inner{padding:0 0 18px;font-size:15px;line-height:1.55;color:var(--fg-75);max-width:52ch}
.panel-cta{margin-top:44px}
@media (max-width:1023px){
  .panel{grid-template-columns:minmax(0,1fr);row-gap:40px;align-items:start}
  .panel-media{transform-origin:50% 100%}
  .panel-cta{width:100%;justify-content:flex-start;margin-top:32px}
  .panel-title{font-size:clamp(28px,7.5vw,40px)}
  .acc-head{font-size:15px;min-height:52px}
}

/* ---------- JS-only initial states (no JavaScript → everything visible) ---------- */
.js:not(.reduced) [data-reveal],.js:not(.reduced) [data-hero],.js:not(.reduced) [data-band],.js:not(.reduced) [data-metric],
.js:not(.reduced) [data-moment-item],.js:not(.reduced) [data-player],.js:not(.reduced) [data-panel-media],.js:not(.reduced) .panel-text>*,
.js:not(.reduced) [data-stair],.js:not(.reduced) [data-term],.js:not(.reduced) .frame,
.js:not(.reduced) .nav{opacity:0}
.js:not(.reduced) [data-stair-clip]{clip-path:inset(0 0 100% 0)}
.js:not(.reduced) [data-tint],.js:not(.reduced) [data-moment-title]{color:rgba(255,255,255,.4)}

/* ---------- reduced motion · static parity ---------- */
.reduced *,.reduced *::before,.reduced *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
.reduced .hero-video{display:none}
.reduced .hero-poster--desktop{display:block}
.reduced .marquee-track{animation:none;transform:none}
.reduced .player-unmute{display:none}
.reduced .player-big{opacity:1}
/* poster images shown instead of autoplay video under reduced motion / Save-Data */
.hero-poster{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-poster.hero-poster--desktop{width:103.2%;max-width:none;height:103.2%;right:0;top:0;left:auto;bottom:auto}   /* PATCH 01/03 · same bar clipping as the video */
.hero-poster.hero-poster--mobile{display:none;object-position:50% 30%;width:103%;max-width:none;height:100%;left:-1.5%;right:auto}
.save-data .hero-video{display:none}.save-data .hero-poster--desktop{display:block}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}.hero-poster--desktop{display:block}
  .marquee-track{animation:none}
}
@media (max-width:767px){
  .save-data .hero-poster--desktop,.reduced .hero-poster--desktop{display:none}
  .save-data .hero-poster--mobile,.reduced .hero-poster--mobile{display:block}
}
@media (prefers-reduced-motion:reduce) and (max-width:767px){.hero-poster.hero-poster--desktop{display:none}.hero-poster.hero-poster--mobile{display:block}}

/* =====================================================================
   BUILD 02 · complete page · every new scene inherits the approved engine
   (registers, world, spacing rhythm, motion families). No new visual system.
   ===================================================================== */

/* ---------- shared registers reused by the new scenes ---------- */
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.kicker--plain{color:var(--fg-60);font-size:12px;letter-spacing:.14em}
.section-sub{max-width:640px;margin:22px auto 0;font-size:16px;line-height:1.5;color:var(--fg-75);text-align:center}
.section-sub--left{margin-left:0;text-align:left}
.section-title--left{text-align:left}
.cred-line{margin:28px auto 0;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-60);text-align:center}
.cred-line--left{margin-left:0;text-align:left}
.inline-cta{color:#fff;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:12px;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px;transition:border-color .25s,color .25s;white-space:nowrap}
.inline-cta:hover{border-color:var(--red);color:#fff}
.btn--sm{--btn-h:52px;font-size:13px}
.btn--sm .btn-label{padding:0 22px 0 14px}
@media (max-width:767px){.kicker{font-size:11px;letter-spacing:.14em}.section-sub{font-size:15px;margin-top:16px}
  .section-title{font-size:clamp(30px,9vw,44px)}   /* V2 titles carry 13-15 letter words (DUMNEAVOASTRĂ, TESTIMONIALE): the register floor drops so no word breaks */
  .panel-title,.prog-title{font-size:clamp(26px,7.2vw,40px)}}

/* ---------- 01 · hero additions (V2 microcopy) ---------- */
.hero-micro{max-width:600px;margin:18px auto 0;font-size:13px;line-height:1.55;color:var(--fg-60)}
.hero-micro .inline-cta{margin-left:4px}
.hero-micro-note{display:inline-block;margin-left:8px;color:rgba(255,255,255,.45)}
@media (max-width:1023px){.hero-micro{font-size:12px;margin-top:14px}.hero-micro-note{display:block;margin:6px 0 0}}
@media (max-width:767px){.hero-micro{display:none}}   /* mobile hero keeps the approved stacked CTAs; the audit microcopy lives in the offer scene */

/* ---------- 02 · trust additions (4 metrics · denser marquee) ---------- */
.metrics-row--4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1240px}
@media (max-width:1023px){
  .metrics-row--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;max-width:640px}
  .metrics-row--4 .metric{border-top:0;padding:20px 8px;border-left:1px solid var(--fg-10)}
  .metrics-row--4 .metric:nth-child(odd){border-left:0}
  .metrics-row--4 .metric:nth-child(n+3){border-top:1px solid var(--fg-10)}
}
@media (max-width:767px){.metrics-row--4 .metric-number{font-size:40px}}

/* ---------- back-to-top (fixed · hidden in the hero · no layout shift) ---------- */
.totop{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40;width:52px;height:52px;border-radius:50%;
  background:rgba(14,14,14,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 10px 30px rgba(0,0,0,.5);display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s ease-out,transform .3s ease-out,visibility 0s linear .3s}
.totop.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease-out,transform .3s ease-out,visibility 0s}
.totop svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.totop:hover{background:rgba(24,24,24,.96)}
.totop:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:767px){.totop{right:16px;width:48px;height:48px}}

/* ---------- 03 · NOI NE OCUPĂM DE TOT · typographic staircase (spectacle) ---------- */
.mech{padding:var(--space-3) var(--gutter) 0;overflow:clip}
.mech-head{text-align:center}
.stairs{max-width:1240px;margin:clamp(56px,6vw,96px) auto 0}
.stair{display:grid;grid-template-columns:96px minmax(0,1fr) 340px;column-gap:40px;align-items:start;
  padding:clamp(22px,2.4vw,34px) 0 clamp(22px,2.4vw,34px) calc(var(--i) * 3.1vw)}
.stair-n{display:flex;flex-direction:column;gap:8px;padding-top:.35em;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.stair-n b{color:var(--red);font-weight:600}
.stair-tag{font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--fg-60);border:1px solid var(--line);border-radius:3px;padding:3px 6px;width:max-content}
.stair-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:.98;font-size:clamp(26px,3.5vw,58px);color:#fff}
.stair-title .clip{padding:.14em 0 .22em;margin:-.14em 0 -.22em}
.stair-body{font-size:15px;line-height:1.55;color:var(--fg-75);padding-top:.5em;max-width:40ch}
.mech-final{margin:clamp(72px,8vw,140px) auto 0;padding-bottom:var(--space-3)}
@media (max-width:1279px){.stair{grid-template-columns:72px minmax(0,1fr) 280px;column-gap:28px;padding-left:calc(var(--i) * 2.2vw)}}
@media (max-width:1023px){.stair{grid-template-columns:64px minmax(0,1fr);row-gap:8px;padding-left:calc(var(--i) * 1.6vw)}.stair-body{grid-column:2;padding-top:0}}
@media (max-width:767px){
  .mech{padding-top:var(--space-2)}
  .stairs{margin-top:40px}
  .stair{grid-template-columns:1fr;row-gap:6px;padding:18px 0;border-top:1px solid var(--line-soft)}
  .stair-n{flex-direction:row;align-items:center;gap:10px;padding:0}
  .stair-title{font-size:26px;letter-spacing:-.02em}
  .stair-body{font-size:14px;max-width:none}
  .mech-final{padding-bottom:var(--space-2)}
}

/* ---------- 04 · PROGRAME · arc selector + glossy cover fan + accordion detail ---------- */
.programs{padding:0 var(--gutter) var(--space-3);overflow:clip}
.prog-head{display:grid;grid-template-columns:1.05fr .95fr;column-gap:64px;align-items:end;max-width:1240px;margin:clamp(48px,4.7vw,80px) auto 0}
.prog-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;font-size:clamp(30px,2.6vw,52px)}
.prog-lead p{font-size:15px;line-height:1.55;color:var(--fg-75);max-width:52ch}
.prog-lead p+p{margin-top:12px}
.prog-stage{margin-top:clamp(48px,4.5vw,72px)}
/* PATCH B2B V1 · familiile ca acordeon (decizie ARHITECT, 26 septembrie 2026): toate cinci vizibile din prima, fiecare cu
   capul ei (index, nume, numar de programe, sageata) si panoul ei (descriere, coperti, fise). Excel deschis implicit.
   Panoul se ascunde doar cu JS (`.js`); fara JS toate raman deschise si citibile. Fara animatie de inaltime: panoul
   apare pe loc, iar intrarea copertilor si a fiselor o face familia de reveal existenta (opacitate + translatie). */
.fam{display:block}
.fam-name{max-width:880px;margin:0 auto;border-top:1px solid var(--line)}
.fam:last-child::after{content:"";display:block;max-width:880px;margin:0 auto;border-top:1px solid var(--line)}
.fam-toggle{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:baseline;column-gap:12px;width:100%;padding:clamp(18px,1.8vw,28px) 0;text-align:left;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;transition:color .25s}
.fam-toggle__nume{min-width:0;overflow-wrap:break-word}
.fam-count{align-self:center;font-family:var(--text);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-60);white-space:nowrap}
.fam-chevron{align-self:center;width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease-out}
.fam-toggle[aria-expanded="true"] .fam-chevron{transform:rotate(180deg)}
.fam-toggle:hover .fam-toggle__nume{color:rgba(255,255,255,.82)}
.fam-toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.js .fam:not(.is-open)>.fam-panel{display:none}
html:not(.js) .fam-chevron{display:none}
.fam-panel{padding:0 0 clamp(28px,3vw,44px)}
.fam-panel>.fam-desc{max-width:880px;margin:0 auto clamp(20px,2vw,32px)}
.fam-name{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(22px,2vw,30px);line-height:1;display:flex;align-items:baseline;gap:12px}
.fam-idx{font-family:var(--text);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--red)}
.fam-desc{font-size:15px;line-height:1.5;color:var(--fg-75)}
.fan{position:relative;--cover-w:250px;--cover-h:354px;--fan-r:1200px;--fan-step:13deg;height:calc(var(--cover-h) + 170px);max-width:1440px;margin:0 auto;width:100%}
.fam[data-n="2"] .fan{--fan-step:14deg}.fam[data-n="5"] .fan{--cover-w:220px;--cover-h:311px;--fan-step:11.5deg}.fam[data-n="7"] .fan{--cover-w:220px;--cover-h:311px;--fan-step:10.4deg}
.cover-slot{position:absolute;left:50%;top:0;width:var(--cover-w);height:var(--cover-h);margin-left:calc(var(--cover-w) / -2);
  --a:calc((var(--k) - (var(--n) - 1) / 2) * var(--fan-step));transform-origin:50% var(--fan-r);transform:rotate(var(--a));z-index:var(--z,1)}
.cover-slot:hover,.cover-slot:focus-within{z-index:30}
.fam-acc{max-width:880px;margin:0 auto;width:100%}
.acc-num{font-family:var(--text);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--red);margin-right:16px;flex:0 0 auto}
.acc-label{flex:1;min-width:0}
.acc-meta{margin-top:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-60);line-height:1.6}
.acc-note{margin-top:8px;font-size:13px;color:var(--fg-60)}
/* the glossy cover · an object type inside the engine: dark world, display register, red accent, monochrome portrait */
.cover{display:block;position:relative;width:100%;height:100%;border-radius:var(--r-xs);overflow:hidden;text-align:left;
  background:linear-gradient(180deg,#171717 0%,#0d0d0d 42%,#151515 100%);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease-out}
.cover:hover,.cover:focus-visible{transform:translateY(-14px) scale(1.04);box-shadow:0 40px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.22)}
.cover:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cover.is-active{box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.3)}
.cover-art{position:absolute;inset:0;overflow:hidden}
.cover-face{position:absolute;left:50%;top:calc(44% - var(--fy,.18) * var(--ph,.6) * 100%);height:calc(var(--ph,.6) * 100%);width:auto;max-width:none;
  transform:translateX(calc(var(--fcx,.5) * -100%));filter:grayscale(1) contrast(1.06) brightness(.9);
  -webkit-mask-image:linear-gradient(180deg,#000 48%,rgba(0,0,0,0) 97%);mask-image:linear-gradient(180deg,#000 48%,rgba(0,0,0,0) 97%)}
.cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(180deg,rgba(7,7,7,0),rgba(7,7,7,.9));z-index:1;pointer-events:none}
.cover-mast{position:absolute;left:14px;right:14px;top:14px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.cover-mast img{height:13px;width:auto;opacity:.85}
.cover-fam{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.cover-title{position:absolute;left:14px;right:14px;top:17%;display:flex;flex-direction:column;gap:.06em;z-index:2;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:.98;color:#fff;font-size:30px;text-shadow:0 6px 18px rgba(0,0,0,.45)}
.cover-t1,.cover-t2{display:block;white-space:nowrap}
.cover-t2{color:rgba(255,255,255,.72)}
.cover-meta{position:absolute;left:14px;right:14px;bottom:12px;display:flex;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid rgba(225,29,38,.85);
  font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-60);z-index:2}
.cover-gloss{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.04) 100%),linear-gradient(180deg,rgba(255,255,255,.06),transparent 12%)}
.prog-micro{max-width:720px;margin:clamp(40px,4vw,64px) auto 0;font-size:13px;line-height:1.55;color:var(--fg-60);text-align:center}
@media (max-width:1439px){.fam[data-n="7"] .fan{--fan-step:9.3deg}}
@media (max-width:1365px){.fam[data-n="7"] .fan{--fan-step:8.8deg}}
@media (max-width:1279px){.fan{--cover-w:210px;--cover-h:297px;--fan-r:1000px;--fan-step:13deg}.fam[data-n="7"] .fan{--cover-w:170px;--cover-h:240px;--fan-step:8.6deg}.fam[data-n="5"] .fan{--cover-w:190px;--cover-h:269px;--fan-step:11.5deg}.cover-title{font-size:26px}}
@media (max-width:1023px){
  /* tablet + mobile (touch): the covers become a swipe track (no hover dependency) */
  .prog-head{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .fan{height:auto;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    --cover-w:210px;--cover-h:297px;margin:0 calc(-1 * var(--gutter));padding:16px var(--gutter) 28px;width:auto}
  .fan::-webkit-scrollbar{display:none}
  .cover-slot{position:static;margin:0;transform:none;flex:0 0 var(--cover-w);scroll-snap-align:center}
  .cover:hover{transform:none}
  .cover-title{font-size:23px}
}
@media (max-width:767px){
  /* mobile: tap a family (accordion), swipe the covers (track), tap a cover for the detail */
  .prog-head{margin-top:36px}
  .fan{--cover-w:196px;--cover-h:277px;gap:12px;padding:12px var(--gutter) 28px}
  .cover-title{font-size:22px}
  /* numarul de programe trece sub nume: numele familiei are tot randul, fara rupere in mijlocul cuvantului */
  .fam-toggle{grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:6px}
  .fam-count{grid-column:2;grid-row:2;align-self:start}
  .fam-chevron{grid-column:3;grid-row:1}
}

/* ---------- 05 · experts head additions + authority block in the disc ---------- */
.spectacle-head .kicker{margin-bottom:22px}
.authority{max-width:640px;margin:clamp(44px,4.6vw,72px) auto 0}
.authority-name{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:1;font-size:clamp(30px,2.8vw,46px);margin-top:14px}
.authority-fact{margin-top:18px;font-size:17px;line-height:1.5;color:#fff}
.authority-body{margin-top:12px;font-size:15px;line-height:1.55;color:var(--fg-75)}
.player-textcta{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px;transition:border-color .25s}
.player-textcta:hover{border-color:var(--red)}
.player.is-unmuted~.moment-line .player-textcta{opacity:.5}
@media (max-width:767px){.authority{margin-top:36px}.authority-fact{font-size:15px}.authority-body{font-size:14px}}

/* ---------- 06 · CUM LIVRĂM · calm index ---------- */
.delivery{padding:var(--space-3) var(--gutter)}
.delivery-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(48px,6vw,96px);align-items:center;max-width:1240px;margin:0 auto}
.delivery-copy .kicker{margin-bottom:22px}
.delivery-body{margin-top:18px;font-size:16px;line-height:1.55;color:var(--fg-75);max-width:46ch}
.delivery-copy .section-title{margin-top:0}
.terms{border-top:1px solid var(--line)}
.term{display:flex;align-items:baseline;gap:28px;padding:clamp(18px,2vw,28px) 0;border-bottom:1px solid var(--line)}
.term-idx{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--red);flex:0 0 auto}
.term-word{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:1;font-size:clamp(34px,4.6vw,76px);color:#fff}
.term-word--lang{font-size:clamp(26px,3.2vw,54px)}
@media (max-width:1023px){.delivery-grid{grid-template-columns:minmax(0,1fr);row-gap:48px}.delivery-body{max-width:56ch}}
@media (max-width:767px){.delivery{padding:var(--space-2) var(--gutter)}.term{gap:16px}.term-word{font-size:32px}.term-word--lang{font-size:24px}}

/* ---------- 07 · DUPĂ TRAINING · Dr.Excel exact motor inside the panel language ---------- */
.after{padding:var(--space-3) var(--gutter)}
.panel--drexcel{margin-top:clamp(48px,4.7vw,80px);align-items:center}
.panel--drexcel .panel-lead{margin-top:0;font-size:16px}
.metrics-row--inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:32px 0 0;max-width:none}
.metric--sm{padding:0 20px 0 0;border-left:0;text-align:left;min-width:0}
.metric--sm+.metric--sm{border-left:1px solid var(--fg-10);padding-left:24px}
.metric--sm .metric-number{font-size:clamp(40px,3.6vw,56px)}
.metric--sm .metric-label{margin-top:10px}
.panel--drexcel .cred-line{margin-top:28px}
.panel-sub{margin-top:18px;font-size:15px;line-height:1.55;color:var(--fg-75);max-width:52ch}
.panel--drexcel .panel-cta{margin-top:36px}
.shelf-frame{max-width:100%;min-width:0;overflow:hidden;background:#161616;border:1px solid var(--frame);border-radius:12px;padding:clamp(18px,2.2vw,34px) clamp(18px,2.2vw,34px) clamp(16px,1.6vw,24px);box-shadow:0 40px 100px rgba(0,0,0,.55);
  background-image:radial-gradient(70% 60% at 50% 0%,rgba(255,255,255,.05),transparent 70%)}
.shelf-brand{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line-soft)}
.shelf-brand img{height:22px;width:auto}
.shelf-brand span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-60)}
/* EXACT MOTOR geometry (EXACT_MOTOR_GEOMETRY_SOURCE.css) · visual tokens mapped to the engine */
.itlp-raft{--tierh:112px;--boardh:4px;--tier-gap:5px;--tier-shift:14px;--bw:34px;position:relative;width:fit-content;max-width:100%;margin-inline:auto}
.itlp-raft .heroD__cardhead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 clamp(14px,1.4vw,20px)}
.heroD__collabel{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-75)}
.heroD__collabel--m{display:none}
.heroD__video{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 8px;border-radius:999px;background:#0e0e0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.04em;transition:box-shadow .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
.heroD__video:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transform:translateY(-2px)}
.heroD__video:focus-visible{outline:2px solid #fff;outline-offset:3px}
.heroD__videoicon{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red)}
.heroD__videoicon svg{width:12px;height:12px;margin-left:1px}
.heroD__videodur{color:var(--fg-60);font-variant-numeric:tabular-nums}
.itlp-raft .heroD__shelf{display:flex;flex-direction:column;gap:var(--tier-gap)}
.itlp-raft .heroD__tier{display:flex;flex-direction:column;width:fit-content}
.itlp-raft .heroD__tier--down{margin-left:var(--tier-shift);position:relative}
.itlp-raft .heroD__books{display:flex;align-items:flex-end;justify-content:flex-start;gap:calc(var(--bw)*.12);height:var(--tierh)}
.itlp-raft .book{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;width:var(--bw);height:var(--h,90%);border:0;border-radius:4px 4px 2px 2px;
  padding:calc(var(--bw)*.21) 0 calc(var(--bw)*.26);margin:0;cursor:pointer;color:#fff;overflow:hidden;
  background:linear-gradient(180deg,#2c2c2c,#1c1c1c);box-shadow:inset 1px 0 0 rgba(255,255,255,.1),inset -2px 0 0 rgba(0,0,0,.55),0 14px 30px rgba(0,0,0,.5);
  transition:transform .18s cubic-bezier(.22,.7,.25,1),filter .18s ease,box-shadow .18s ease}
.itlp-raft .book--cream{background:linear-gradient(180deg,#333,#222)}
.itlp-raft .book--blue{background:linear-gradient(180deg,#232323,#161616)}
.itlp-raft .book--green{background:linear-gradient(180deg,#2a2a2a,#1a1a1a)}
.itlp-raft .book--flagship{background:linear-gradient(180deg,var(--red),var(--red-deep))}
.itlp-raft .heroD__books .book--flagship{width:calc(var(--bw) + var(--bw)*.17)}
.itlp-raft .book i{writing-mode:vertical-rl;font-style:normal;font-size:calc(var(--bw)*.21);font-weight:700;letter-spacing:.12em;opacity:.7;margin-bottom:calc(var(--bw)*.16);font-family:var(--text)}
.itlp-raft .book b{writing-mode:vertical-rl;font-size:calc(var(--bw)*.265);font-weight:600;letter-spacing:.02em;white-space:nowrap;font-family:var(--text)}
.itlp-raft .heroD__shelfboard{height:var(--boardh);border-radius:3px;background:linear-gradient(90deg,#3a3a3a,#5c5c5c 50%,#3a3a3a)}
.itlp-raft .book__play{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .18s ease;background:rgba(0,0,0,.55)}
.itlp-raft .book__play svg{width:22px;height:22px;fill:#fff}
@media (hover:hover){
  .itlp-raft .book:hover{transform:translateY(-6px)}
  .itlp-raft .book:hover .book__play{opacity:1}
}
.itlp-raft .book:focus-visible{transform:translateY(-6px);outline:2px solid #fff;outline-offset:2px}
.itlp-raft .book:focus-visible .book__play{opacity:1}
@media (min-width:601px){
  .itlp-raft{--tierh:clamp(280px,38vw,400px);--boardh:8px;--bw:clamp(44px,6vw,64px)}
  .itlp-raft .heroD__shelf{flex-direction:row;align-items:flex-end;gap:calc(var(--bw)*.12);position:relative;height:calc(var(--tierh) + var(--boardh));padding-bottom:var(--boardh);margin-inline:calc(var(--bw)*.28)}
  .itlp-raft .heroD__tier,.itlp-raft .heroD__books{display:contents}
  .itlp-raft .heroD__shelfboard{display:none}
  .itlp-raft .heroD__shelf::after{content:"";position:absolute;left:calc(-1*var(--bw)*.28);right:calc(-1*var(--bw)*.28);bottom:0;height:var(--boardh);border-radius:3px;
    background:linear-gradient(90deg,#3a3a3a,#5c5c5c 50%,#3a3a3a);box-shadow:0 10px 24px rgba(0,0,0,.6)}
}
@media (min-width:1180px){.itlp-raft{--bw:clamp(40px,3.8vw,56px);--tierh:clamp(285px,25.8vw,378px);--boardh:clamp(8px,.72vw,10px)}}
/* inside the 54.4 % panel column: the motor's own tokens fit from 1180 px up; between 1024 and 1179 the column is narrower */
@media (min-width:1024px) and (max-width:1179px){.itlp-raft{--bw:clamp(34px,3vw,44px);--tierh:clamp(240px,24vw,300px)}}
@media (max-width:600px){
  .itlp-raft{width:100%}
  .itlp-raft .heroD__cardhead{flex-direction:column;align-items:flex-start;gap:12px}
  .heroD__collabel--d{display:none}.heroD__collabel--m{display:inline}
  .itlp-raft .heroD__shelf{display:flex;flex-direction:column;gap:6px;height:auto;padding:0}
  .itlp-raft .heroD__tier,.itlp-raft .heroD__books{display:contents}
  .itlp-raft .heroD__shelfboard{display:none}
  .itlp-raft .heroD__books .book,.itlp-raft .heroD__books .book--flagship{width:100%;height:auto;min-height:48px;flex-direction:row;align-items:center;justify-content:flex-start;gap:11px;padding:0 12px;border-radius:7px;text-align:left}
  .itlp-raft .heroD__books .book i{writing-mode:horizontal-tb;font-size:11px;margin:0;flex:none}
  .itlp-raft .heroD__books .book b{writing-mode:horizontal-tb;font-size:14.5px;white-space:normal;flex:1;min-width:0}
  .itlp-raft .heroD__books .book:nth-child(even){margin-left:16px;width:calc(100% - 16px)}
  .itlp-raft .book__play{position:static;inset:auto;flex:none;opacity:1;margin-left:auto;background:none;width:28px;height:28px}
  .itlp-raft .book:hover,.itlp-raft .book:focus-visible,.itlp-raft .book:active{transform:none}
}
@media (max-width:1023px){.after{padding:var(--space-2) var(--gutter)}.panel--drexcel{margin-top:40px}.metrics-row--inline{margin-top:24px}.metric--sm .metric-number{font-size:36px}}
@media (max-width:767px){.metrics-row--inline{grid-template-columns:minmax(0,1fr);row-gap:18px}.metric--sm+.metric--sm{border-left:0;padding-left:0;border-top:1px solid var(--fg-10);padding-top:18px}}
/* Dr.Excel viewer (exact contract: iframe only while open) */
.itlp-lightbox{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.94);opacity:0;transition:opacity .25s ease}
.itlp-lightbox[hidden]{display:none}
.itlp-lightbox.open{opacity:1}
.itlp-lightbox__box{position:relative;width:min(1100px,100%);aspect-ratio:16/9;background:#000;border-radius:var(--r-xs);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 100px rgba(0,0,0,.8)}
.itlp-lightbox__video{position:absolute;inset:0}
.itlp-lightbox__video[hidden]{display:none}
.itlp-lightbox__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.itlp-lightbox__close{position:absolute;right:0;top:-52px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.itlp-lightbox__close svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.itlp-lightbox__close:hover{background:rgba(255,255,255,.2)}
.itlp-lightbox__close:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- 08 · DOVADĂ DOCUMENTARĂ · the hallway mechanism in the dark world ---------- */
.proof{padding:var(--space-3) var(--gutter)}
.proof-grid{display:grid;grid-template-columns:minmax(340px,480px) minmax(0,1fr);column-gap:clamp(40px,4.5vw,72px);align-items:center;max-width:var(--container);margin:0 auto}
.proof-panel .kicker{margin-bottom:22px}
.active-doc{display:grid;grid-template-columns:132px 1fr;column-gap:22px;align-items:center;margin-top:36px;padding:20px;background:#0e0e0e;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.active-doc-paper{display:block;background:#fff;padding:3px;border-radius:2px;box-shadow:0 14px 34px rgba(0,0,0,.65),0 0 0 1px #3a3a3a}
.active-doc-paper img{width:100%;height:auto;display:block}
.active-doc-title{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.active-doc-title span{font-weight:500;color:var(--fg-60);letter-spacing:.12em;font-size:12px}
.active-doc-desc{margin-top:10px;font-size:14px;line-height:1.5;color:var(--fg-75)}
.active-doc-cta{margin-top:16px;--btn-h:52px;font-size:12px}
.active-doc-cta .btn-label{padding:0 20px 0 12px}
.proof-micro{margin-top:18px;font-size:12px;letter-spacing:.04em;color:var(--fg-60)}
.hall{position:relative;--paper-h:250px;height:clamp(600px,50vw,720px);perspective:1500px;perspective-origin:82% 50%;overflow:hidden;border-radius:var(--r-md);background:#050505;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hall-light{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(55% 60% at 22% -4%,rgba(255,255,255,.14),transparent 62%),radial-gradient(40% 55% at 70% 0%,rgba(255,255,255,.08),transparent 60%),linear-gradient(270deg,rgba(0,0,0,.45),transparent 30%)}
.hall-wall{position:absolute;left:4%;top:50%;width:112%;transform-origin:0 50%;transform:translateY(-50%) rotateY(30deg);transform-style:preserve-3d;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:18px 36px;padding:26px 36px;align-items:center;justify-items:center;
  background:linear-gradient(90deg,#121212,#0a0a0a 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.frame{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:10px;width:100%;filter:brightness(.68);transition:filter .5s ease-out,transform .5s cubic-bezier(.2,.7,.2,1)}
.frame:hover,.frame:focus-visible,.frame[aria-current="true"]{filter:brightness(1)}
.frame:focus-visible{outline:2px solid #fff;outline-offset:6px}
.frame-paper{display:block;position:relative;width:min(100%,calc(var(--paper-h) * var(--ar)));aspect-ratio:var(--ar);background:#fff;padding:3.5%;
  box-shadow:0 20px 40px rgba(0,0,0,.7),0 0 0 1px #3a3a3a,0 0 0 7px #151515,0 0 0 8px #454545}
.frame-paper img{width:100%;height:100%;object-fit:cover;display:block}
.frame-light{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 45%);pointer-events:none;mix-blend-mode:screen}
.frame-plate{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-75);text-align:center;
  padding:6px 10px;background:#161616;border:1px solid #333;border-radius:3px;transition:background-color .4s,border-color .4s,color .4s;max-width:100%}
.frame-plate b{font-weight:500;color:var(--fg-60);font-size:9px}
.frame[aria-current="true"] .frame-plate{background:var(--red);border-color:var(--red);color:#fff}
.frame[aria-current="true"] .frame-plate b{color:rgba(255,255,255,.8)}
.frame[aria-current="true"] .frame-paper{box-shadow:0 20px 40px rgba(0,0,0,.7),0 0 0 1px #3a3a3a,0 0 0 7px #151515,0 0 0 8px #6a6a6a,0 0 60px rgba(255,255,255,.12)}
.hall-floor{position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,rgba(0,0,0,0),#000);z-index:1;pointer-events:none}
.plates{display:none}
@media (max-width:1279px){.proof-grid{grid-template-columns:minmax(300px,400px) minmax(0,1fr)}.hall{--paper-h:200px;height:clamp(540px,50vw,620px)}.hall-wall{gap:16px 26px;padding:22px 26px}}
@media (max-width:1023px){
  .proof-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .hall{--paper-h:230px;height:640px}
}
@media (max-width:767px){
  /* mobile: hero document + selector plates (the old hallway's mobile pattern) */
  .proof{padding:var(--space-2) var(--gutter)}
  .hall{display:none}
  .active-doc{grid-template-columns:1fr;row-gap:18px;padding:16px;margin-top:28px}
  .active-doc-paper{max-width:260px;margin:0 auto}
  .plates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .plate{width:100%;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:12px 12px;min-height:56px;border-radius:var(--r-xs);background:#0e0e0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background-color .3s,box-shadow .3s}
  .plate b{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85)}
  .plate span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-60)}
  .plate.is-active{background:#171717;box-shadow:inset 0 0 0 1px var(--red)}
  .plate.is-active b{color:#fff}
  .plate:focus-visible{outline:2px solid #fff;outline-offset:2px}
}
/* the integral document viewer */
.doc-viewer{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:rgba(0,0,0,.96);opacity:0;transition:opacity .3s ease-out}
.doc-viewer[hidden]{display:none}
.doc-viewer.is-open{opacity:1}
.doc-viewer__bar{display:flex;align-items:center;gap:20px;padding:14px var(--gutter);border-bottom:1px solid var(--line-soft);background:rgba(7,7,7,.9)}
.doc-viewer__title{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.doc-viewer__title span{font-weight:500;font-size:11px;color:var(--fg-60)}
.doc-viewer__orig{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;white-space:nowrap}
.doc-viewer__close{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:0 0 auto}
.doc-viewer__close svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.doc-viewer__close:focus-visible,.doc-viewer__orig:focus-visible{outline:2px solid #fff;outline-offset:3px}
.doc-viewer__pages{flex:1;overflow:auto;padding:28px var(--gutter);display:flex;flex-direction:column;align-items:center;gap:24px;-webkit-overflow-scrolling:touch}
.doc-viewer__pages img{width:min(900px,100%);height:auto;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.doc-viewer__note{padding:12px var(--gutter);font-size:11px;letter-spacing:.06em;color:var(--fg-60);text-align:center;border-top:1px solid var(--line-soft)}

/* ---------- 09 · FAQ · calm accordion ---------- */
.faq{padding:var(--space-3) var(--gutter)}
.faq-col{max-width:880px;margin:0 auto;text-align:center}
.faq-col .kicker{margin-bottom:22px}
.faq-acc{margin-top:clamp(36px,4vw,56px);text-align:left}
.faq-acc .acc-head{font-size:15px;line-height:1.35;padding:18px 0}
.faq-acc .acc-inner{max-width:64ch}
.faq-acc .acc-inner p+p{margin-top:12px}
@media (max-width:767px){.faq{padding:var(--space-2) var(--gutter)}.faq-acc .acc-head{font-size:14px;letter-spacing:.01em}}

/* ---------- 10 · SOLICITAȚI O OFERTĂ · conversion layer + 11 · THANK YOU state ---------- */
.offer{padding:var(--space-3) var(--gutter)}
.offer-grid{display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);column-gap:clamp(48px,6vw,96px);align-items:start;max-width:1240px;margin:0 auto}
.offer-intro .kicker{margin-bottom:22px}
.offer-sub{margin-top:18px;font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.offer-body{margin-top:14px;font-size:16px;line-height:1.55;color:var(--fg-75);max-width:44ch}
.offer-micro{margin-top:18px;font-size:13px;line-height:1.55;color:var(--fg-60);max-width:48ch}
.receive{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.receive-title{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-60)}
.receive-list{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:14px;color:var(--fg-75)}
.receive-list li{position:relative;padding-left:16px}
.receive-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.form{display:grid;gap:22px;padding:clamp(22px,3vw,44px);background:#0c0c0c;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 100px rgba(0,0,0,.4)}
.form[hidden]{display:none}
.field{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
legend.field-label{padding:0;margin-bottom:8px}
.req{color:var(--red);margin-left:2px}
.opt{color:var(--fg-60);font-weight:500;letter-spacing:.08em;text-transform:none;margin-left:6px}
.input{width:100%;height:56px;padding:0 16px;background:#111;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xs);color:#fff;font:inherit;font-size:16px;
  transition:border-color .25s ease-out,box-shadow .25s ease-out;-webkit-appearance:none;appearance:none}
.textarea{height:auto;min-height:132px;padding:14px 16px;resize:vertical;line-height:1.5}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select{padding-right:40px;cursor:pointer}
.select option{background:#111;color:#fff}
.input:hover{border-color:rgba(255,255,255,.28)}
.input:focus{outline:none;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(225,29,38,.18)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-block}
.chip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:#111;
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-75);transition:background-color .25s,color .25s,border-color .25s,transform .3s cubic-bezier(.2,.7,.2,1);cursor:pointer;white-space:nowrap}
.chip:hover span{border-color:rgba(255,255,255,.45);color:#fff}
.chip input:checked+span{background:#fff;color:#0a0a0a;border-color:#fff}
.chip input:focus-visible+span{outline:2px solid #fff;outline-offset:3px}
.chips.is-invalid .chip span{border-color:rgba(225,29,38,.7)}
.field-hint{font-size:12px;color:var(--fg-60)}
.field-error{font-size:13px;color:#ff6b71;display:flex;gap:8px;align-items:flex-start}
.field-error::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#ff6b71;margin-top:.45em}
.field-error[hidden],.field-hint[hidden]{display:none}
.form-alert{padding:14px 16px;border-radius:var(--r-xs);background:rgba(225,29,38,.1);box-shadow:inset 0 0 0 1px rgba(225,29,38,.5);font-size:14px;color:#fff}
.form-alert[hidden]{display:none}
.form-alert a{text-decoration:underline}
.form-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.form-micro{font-size:13px;color:var(--fg-60)}
.thanks{padding:clamp(28px,4vw,56px);background:#0c0c0c;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 100px rgba(0,0,0,.4)}
.thanks[hidden]{display:none}
.thanks .kicker{margin-bottom:24px}
.thanks-title{font-size:clamp(32px,3vw,56px)}
.thanks-title:focus{outline:none}
.thanks-body{margin-top:20px;font-size:17px;color:var(--fg-75)}
.thanks-teams{margin-top:32px;max-width:100%}
.thanks-teams[hidden]{display:none}
@media (max-width:767px){.thanks-teams{width:100%;height:auto;min-height:var(--btn-h);white-space:normal}.thanks-teams .btn-icon{align-self:stretch;height:auto}.thanks-teams .btn-label{padding:14px 16px 14px 12px;line-height:1.25;text-align:left}}
@media (max-width:1023px){.offer-grid{grid-template-columns:minmax(0,1fr);row-gap:44px}.offer-body{max-width:56ch}}
@media (max-width:767px){
  .offer{padding:var(--space-2) var(--gutter)}
  .form{padding:18px;gap:18px;border-radius:var(--r-md)}
  .field-row{grid-template-columns:1fr;gap:18px}
  .form-actions{display:grid}.form-actions .btn{width:100%;justify-content:flex-start}
  .receive-list{grid-template-columns:1fr}
  .thanks{padding:24px 18px}
}

/* ---------- 12 · FOOTER · oversized final impact ---------- */
.footer{padding:var(--space-2) var(--gutter) 40px;overflow:hidden;border-top:1px solid var(--line-soft);isolation:isolate}
.footer-word{position:relative;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.045em;line-height:.86;font-size:11vw;text-align:center;color:#fff;padding-bottom:.06em}
.footer-word::after{content:"";position:absolute;left:-10vw;right:-10vw;bottom:-60px;height:220px;background:radial-gradient(50% 60% at 50% 100%,rgba(225,29,38,.7),transparent 70%);pointer-events:none;z-index:-1}
.footer-sub{margin-top:36px;text-align:center;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-60)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;max-width:1240px;margin:clamp(56px,6vw,96px) auto 0;padding-top:40px;border-top:1px solid var(--line)}
.footer-col{display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--fg-75)}
.footer-col a{color:var(--fg-75);text-transform:uppercase;letter-spacing:.06em;font-weight:500;transition:color .25s;width:max-content}
.footer-col a:hover{color:#fff}
.footer-col p{margin:0}
.footer-logo{height:28px;width:auto;opacity:.9;margin-bottom:8px}
.footer-note{font-size:13px}
.footer-note a{text-transform:none;letter-spacing:0;color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.footer-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-60);margin-bottom:6px}
.footer-copy{margin-top:8px !important;color:var(--fg-60);font-size:12px}
.footer-proto{margin-top:48px;text-align:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-60)}
@media (max-width:1023px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){
  .footer{padding:var(--space-2) var(--gutter) 32px}
  .footer-word{font-size:13vw}
  .footer-grid{grid-template-columns:1fr;gap:28px;margin-top:48px}
}

/* ---------- reduced motion · new scenes stay fully functional ---------- */
.reduced .totop{transition:none}
.reduced .cover:hover,.reduced .fam-chevron{transition:none}

/* =====================================================================
   FINAL ROUND 03 · DESIGN FREEZE · corrections merged on the Build 02 baseline
   (FINAL_MERGE_DECISIONS.md · Architect A01-A12 · BRAIN · AVOCAT). No new visual system:
   every rule below re-uses the engine registers, world, spacing rhythm and motion families.
   ===================================================================== */

/* ---------- R03 · GLOBAL TYPE TOKEN · body/support copy one controlled step up (A03) ----------
   --t-body   17 px  paragraphs, section subtitles, delivery body, offer body, panel leads
   --t-body-s 16 px  detail copy: FAQ answers, program details, stair bodies, family descriptions, document descriptions
   --t-micro  14 px  support: hero audit line, program/offer microcopy, form help + error, legal line, footer
   Kickers, eyebrows, labels, metadata keep their register (not part of the step). Mobile steps each token down by one. */
:root{--t-body:17px;--t-body-s:16px;--t-micro:14px;--t-micro-s:13px;--step:20deg}
@media (max-width:767px){:root{--t-body:16px;--t-body-s:15px;--t-micro:13px;--t-micro-s:12px}}
body{font-size:var(--t-body)}
.hero-support,.section-sub,.delivery-body,.offer-body,.panel--drexcel .panel-lead,.authority-body{font-size:var(--t-body)}
.moment-line,.panel-lead,.prog-lead p,.acc-inner,.stair-body,.fam-desc,.panel-sub,.active-doc-desc,.receive-list,.form-alert,.thanks-body{font-size:var(--t-body-s)}
.authority-fact{font-size:18px}
.hero-micro,.acc-note,.prog-micro,.offer-micro,.form-micro,.field-error,.proof-micro,.footer-col,.footer-note{font-size:var(--t-micro)}
.field-hint,.footer-copy,.doc-viewer__note{font-size:var(--t-micro-s)}
@media (max-width:767px){.authority-fact{font-size:16px}.thanks-body{font-size:16px}}

/* ---------- R03 · 01 HERO · audit line (one name · one CTA) ---------- */
.hero-micro b{color:rgba(255,255,255,.86);font-weight:600}

/* ---------- R03 · 02 TRUST · public-safe 3-metric default · internal 4-metric hold · credential in the number register · gap closed (A01, A02, B1) ---------- */
.metrics{padding:clamp(80px,7vw,128px) var(--gutter) clamp(80px,7vw,128px)}
.mech{padding-top:clamp(96px,8vw,150px)}
.metrics-row--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px}
.metric--hold{display:none}                                    /* 4.000+ PROGRAME LIVRATE · INTERNAL HOLD · ?trust=internal only */
html.trust-internal .metric--hold{display:block}
html.trust-internal .metrics-row--3{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1240px}
@media (max-width:1023px){
  html.trust-internal .metrics-row--3{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
  html.trust-internal .metrics-row--3 .metric{border-top:0;padding:20px 8px;border-left:1px solid var(--fg-10)}
  html.trust-internal .metrics-row--3 .metric:nth-child(odd){border-left:0}
  html.trust-internal .metrics-row--3 .metric:nth-child(n+3){border-top:1px solid var(--fg-10)}
}
@media (max-width:767px){
  .metrics-row--3{grid-template-columns:minmax(0,1fr);max-width:none}
  .metrics-row--3 .metric{padding:22px 0}
  .metrics-row--3 .metric:first-child{padding-top:0}
  .metrics-row--3 .metric-number{font-size:44px}
  html.trust-internal .metrics-row--3 .metric-number{font-size:40px}
}
/* the credential in the big-number register (same family, weight and tracking as .metric-number) */
.metrics-cred--big{margin:clamp(44px,4.4vw,72px) auto 0;max-width:1240px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .3em;
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1;text-transform:uppercase;color:#fff;font-size:clamp(40px,4.4vw,64px)}
.metrics-cred--big .cred-sep{color:var(--red);letter-spacing:0}
@media (max-width:1023px){.metrics-cred--big{font-size:clamp(30px,4.6vw,44px)}}
@media (max-width:767px){                                      /* one responsive step down · two lines · never micro-copy */
  .metrics-cred--big{font-size:clamp(28px,7.6vw,34px);letter-spacing:-.025em;line-height:1.08;margin-top:36px;flex-direction:column;align-items:center;gap:2px}
  .metrics-cred--big > .cred-sep{display:none}
}
/* audit offer strip · the same offer, visible from the Trust scene (B6 · AVOCAT 6A) */
.audit-strip{margin:clamp(36px,3.6vw,56px) auto 0;max-width:1040px}
.audit-strip p{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px;margin:0;padding:18px 24px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.025);font-size:var(--t-body-s);line-height:1.5;color:var(--fg-75)}
.audit-strip b{color:#fff;font-weight:600}
.audit-strip .inline-cta{margin-left:4px}
@media (max-width:767px){
  .audit-strip{margin-top:32px}
  .audit-strip p{flex-direction:column;align-items:flex-start;text-align:left;padding:16px 18px;gap:6px}
  .audit-strip .rec-dot{display:none}
  .audit-strip .inline-cta{margin:6px 0 0}
}

/* ---------- R03 · NAV · M3.4: CTA-ul din bara (desktop si compact) a iesit; oferta e CTA-ul global ---------- */
@media (max-width:1279px){.nav{gap:14px}}

/* ---------- R03 · 03 MECHANISM · optional tag stays on step 02 (B2) — no geometry change ---------- */

/* ---------- R03 · 04 CINE SUNTEM · the video moment stands between the two monumentals (A04) · player contract untouched ---------- */
/* M3.2: sectiunea `.cine` nu mai exista; playerul sta in coloana dreapta a „Cine suntem" (`.uni-film`). */
.uni-film .player{aspect-ratio:16/9}                                   /* D5 · R11: masterul desktop E 16:9. Sub 768px overrideul a fost RETRAS: masterul vertical 9:16 a sosit, deci cutia 9:16 din regula de baza redevine valabila (contract B4). */

/* ---------- R03 · 05 PROGRAMS · covers carry no duration/level (B3) · typographic editorial covers, no person (A-programs) ---------- */
.cover--typo{background:linear-gradient(165deg,#1c1c1c 0%,#0d0d0d 46%,#151515 100%)}
.cover--typo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 13px);
  -webkit-mask-image:linear-gradient(180deg,transparent 34%,#000 56%,#000 80%,transparent 97%);mask-image:linear-gradient(180deg,transparent 34%,#000 56%,#000 80%,transparent 97%)}
.cover-num{position:absolute;right:-.02em;top:34%;z-index:1;pointer-events:none;font-family:var(--display);font-weight:700;line-height:.8;letter-spacing:-.07em;
  font-size:calc(var(--cover-w,220px) * .66);color:rgba(255,255,255,.075);font-variant-numeric:tabular-nums}
.cover-deck{position:absolute;left:14px;right:14px;bottom:46px;z-index:2;padding-left:10px;border-left:2px solid var(--red);
  font-size:11px;line-height:1.45;color:rgba(255,255,255,.74);text-align:left}
.cover--typo .cover-title{top:17%}
@media (max-width:1279px){.cover-deck{font-size:10px;bottom:42px}}
@media (max-width:767px){.cover-deck{font-size:10px}}

/* ---------- R03 · 06 EXPERȚII · six experts orbit · Bogdan + authority inside the circle (A05) ---------- */
.wheel-stage{outline:none}
.wheel-stage:focus-visible{box-shadow:inset 0 -2px 0 rgba(255,255,255,.6)}
.card{will-change:transform}
.card-inner{transition:none}
/* the authority zone: centred under the top of the arc, inside the disc */
.authority-zone{position:relative;z-index:1;text-align:center;padding:clamp(24px,2.6vw,40px) var(--gutter) 0;max-width:820px;margin:0 auto}
.wheel-controls{display:flex;align-items:center;justify-content:center;gap:14px}
.wheel-btn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;
  transition:background-color .25s ease-out,transform .3s cubic-bezier(.2,.7,.2,1)}
.wheel-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wheel-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.wheel-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wheel-hint{min-width:190px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-60);text-align:center}   /* copy set per input mode by the wheel module */
.authority{max-width:640px;margin:clamp(24px,2.6vw,40px) auto 0}
.authority-photo{display:block;width:auto;height:clamp(220px,24vw,380px);max-width:100%;margin:0 auto -14px;object-fit:contain;
  filter:grayscale(.1) contrast(1.02);-webkit-mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.55) 74%,transparent 91%);mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.55) 74%,transparent 91%)}
.disc-zone{padding-bottom:clamp(96px,10vw,176px)}
@media (max-width:767px){
  .authority-zone{padding-top:20px}
  .wheel-btn{width:46px;height:46px}
  .authority{margin-top:22px}
  .authority-photo{height:190px}
  .disc-zone{padding-bottom:72px}
}
/* no JavaScript: only one appearance of each expert stays in the static arc (slots 0-3 and the two left neighbours) */
html:not(.js) .card[aria-hidden="true"]:not(:nth-child(17)):not(:nth-child(18)){display:none}
html:not(.js) .wheel-controls{display:none}

/* ---------- R03 · 07 CUM LIVRĂM · atmospheric real photo (A07) · faces not recognizable · text legible ---------- */
.delivery{position:relative;overflow:hidden;isolation:isolate}
.delivery-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.delivery-bg picture,.delivery-bg img{display:block;width:100%;height:100%}
.delivery-bg img{object-fit:cover;object-position:50% 42%;opacity:.92;filter:saturate(.8)}
.delivery-bg::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(7,7,7,.86) 0%,rgba(7,7,7,.6) 40%,rgba(7,7,7,.28) 100%),linear-gradient(180deg,rgba(7,7,7,.94) 0%,rgba(7,7,7,.12) 26%,rgba(7,7,7,.12) 72%,rgba(7,7,7,.94) 100%)}
.delivery-bg::after{content:"";position:absolute;inset:0;z-index:2;opacity:.14;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.delivery-grid{position:relative;z-index:1}
@media (max-width:767px){.delivery-bg img{object-position:50% 30%;opacity:.8}
  .delivery-bg::before{background:linear-gradient(180deg,rgba(7,7,7,.96) 0%,rgba(7,7,7,.5) 28%,rgba(7,7,7,.5) 72%,rgba(7,7,7,.96) 100%)}}

/* ---------- R03 · 08 DR.EXCEL · faithful library object (A09): varying spines, thicker 01, vertical titles, numbers, DEMO pills, material presence
            reskinned into the IT Learning / GM world (no legacy palette, no uniform bars) · intro moved to the right column (A10) ---------- */
.heroD__demo-hint{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-60);white-space:nowrap}
.heroD__demo-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 10px rgba(225,29,38,.8)}
.itlp-raft .book{padding:calc(var(--bw)*.3) 0 calc(var(--bw)*.2);border-radius:calc(var(--bw)*.09) calc(var(--bw)*.09) calc(var(--bw)*.04) calc(var(--bw)*.04);
  background:#1a1a1a;color:#fff;
  box-shadow:inset 2px 0 0 rgba(255,255,255,.12),inset -3px 0 0 rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.5),0 18px 34px rgba(0,0,0,.55)}
.itlp-raft .book::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.2;mix-blend-mode:screen;   /* grain · material presence */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.itlp-raft .book::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;                                 /* spine curvature */
  background:linear-gradient(90deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 26%,rgba(0,0,0,0) 62%,rgba(0,0,0,.38) 100%)}
.itlp-raft .book i,.itlp-raft .book b,.itlp-raft .book__demo{position:relative;z-index:1}
.itlp-raft .book i{opacity:.85}
/* materials · sequence red / leather / cloth / graphite / cloth / leather / graphite / ivory: no two adjacent volumes share a material */
.itlp-raft .book--m-red{color:#fff;background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,rgba(0,0,0,.1) 0 1px,transparent 1px 4px),
  linear-gradient(180deg,transparent 4%,rgba(255,255,255,.85) 4%,rgba(255,255,255,.85) 4.7%,transparent 4.7%),
  linear-gradient(180deg,#e8232c 0%,#c2141c 55%,#a3111a 100%)}
.itlp-raft .book--m-red::before{opacity:.26}
.itlp-raft .book--m-red i{opacity:1}
.itlp-raft .book--m-leather{background:
  linear-gradient(180deg,transparent 6%,rgba(255,255,255,.12) 6%,rgba(255,255,255,.12) 7.1%,rgba(0,0,0,.45) 7.1%,rgba(0,0,0,.45) 8.2%,transparent 8.2%,
    transparent 10.6%,rgba(255,255,255,.12) 10.6%,rgba(255,255,255,.12) 11.7%,rgba(0,0,0,.45) 11.7%,rgba(0,0,0,.45) 12.8%,transparent 12.8%,
    transparent 68%,rgba(255,255,255,.12) 68%,rgba(255,255,255,.12) 69.1%,rgba(0,0,0,.45) 69.1%,rgba(0,0,0,.45) 70.2%,transparent 70.2%,
    transparent 72.6%,rgba(255,255,255,.12) 72.6%,rgba(255,255,255,.12) 73.7%,rgba(0,0,0,.45) 73.7%,rgba(0,0,0,.45) 74.8%,transparent 74.8%),
  linear-gradient(180deg,#262626 0%,#171717 60%,#101010 100%)}
.itlp-raft .book--m-leather::before{opacity:.3}
.itlp-raft .book--m-cloth{background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),
  linear-gradient(180deg,#3d3934 0%,#2c2926 60%,#211f1c 100%)}
.itlp-raft .book--m-cloth i{background:#efe9dc;color:#111;opacity:1;padding:calc(var(--bw)*.1) calc(var(--bw)*.07);border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.itlp-raft .book--m-graphite{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 2px),
  linear-gradient(180deg,transparent 3%,var(--red) 3%,var(--red) 5.2%,transparent 5.2%,transparent 6.4%,rgba(255,255,255,.55) 6.4%,rgba(255,255,255,.55) 6.8%,transparent 6.8%),
  linear-gradient(180deg,#34373c 0%,#24272b 60%,#1a1c20 100%)}
.itlp-raft .book--m-ivory{color:#111;background:
  linear-gradient(180deg,transparent 3%,var(--red) 3%,var(--red) 4.8%,transparent 4.8%),
  repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),
  linear-gradient(180deg,#f1ebde 0%,#ddd5c4 60%,#cfc6b3 100%)}
.itlp-raft .book--m-ivory::before{opacity:.12;mix-blend-mode:multiply}
.itlp-raft .book--m-ivory::after{background:linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 26%,rgba(0,0,0,0) 62%,rgba(0,0,0,.18) 100%)}
.itlp-raft .book--m-ivory i{color:var(--red-deep);opacity:1}
.itlp-raft .book--m-ivory b{color:#141414}
.itlp-raft .book--m-ivory:focus-visible{outline-color:#fff}
/* DEMO pills (one per volume · the 8 local demo actions stay on the books) */
.itlp-raft .book__demo{margin-top:auto;writing-mode:vertical-rl;font-family:var(--text);font-size:calc(var(--bw)*.165);font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  color:#fff;background:#0a0a0a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);border-radius:999px;padding:calc(var(--bw)*.18) calc(var(--bw)*.11) calc(var(--bw)*.14);white-space:nowrap}
.itlp-raft .book--m-red .book__demo{background:#fff;color:var(--red-deep);box-shadow:none}
.itlp-raft .book__play{background:rgba(7,7,7,.62);z-index:3}
.itlp-raft .book__play svg{width:24px;height:24px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.itlp-raft .heroD__shelf::after{background:linear-gradient(90deg,#2c2c2c,#4a4a4a 50%,#2c2c2c);box-shadow:0 10px 24px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.14)}
.itlp-raft .heroD__shelfboard{background:linear-gradient(90deg,#2c2c2c,#4a4a4a 50%,#2c2c2c);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
@media (max-width:600px){
  .itlp-raft .heroD__books .book{padding:0 12px;border-radius:7px;gap:10px}
  .itlp-raft .book::after{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 40%,rgba(0,0,0,.25))}
  .itlp-raft .book--m-cloth i{padding:3px 6px}
  .itlp-raft .book__demo{writing-mode:horizontal-tb;margin:0 0 0 auto;padding:7px 10px 6px;font-size:10px;letter-spacing:.16em;flex:none}
  .itlp-raft .book__play{margin-left:0;width:26px;height:26px}
}
/* right-column CTA · opens the general 2:14 intro in the same viewer */
.panel-cta .btn-dur{padding-right:22px;font-variant-numeric:tabular-nums;color:rgba(0,0,0,.55);font-weight:500}
.btn-icon .ico-tri{fill:currentColor;stroke:none;width:12px;height:12px;margin-left:2px}
/* video-without-consent state inside the viewer (designed; EXEC binds it to the CMP video category) */
.itlp-lightbox.is-gate .itlp-lightbox__box{aspect-ratio:auto}
.itlp-lightbox__gate{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(28px,4vw,56px);background:#0b0b0b;border-radius:var(--r-xs)}
.itlp-lightbox__gate[hidden]{display:none}
.gate-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-75)}
.gate-label{color:var(--fg-60)}
.gate-label:not(:empty)::before{content:" · "}
.gate-title{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;font-size:clamp(22px,2.4vw,34px);max-width:24ch}
.gate-body{margin:0;font-size:var(--t-body-s);line-height:1.5;color:var(--fg-75);max-width:56ch}
.gate-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:8px}
.gate-link{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;transition:border-color .25s}
.gate-link:hover{border-color:var(--red)}

/* ---------- R03 · 09 DOVADĂ DOCUMENTARĂ · Star Assembly opens the scene (B5) · no geometry change ---------- */

/* ---------- R03 · 11 SOLICITAȚI O OFERTĂ · audit intent state (no new field) · data line (AVOCAT 6B) · 12 THANK YOU variants ---------- */
.intent{display:flex;align-items:center;gap:12px;margin:0 0 22px;padding:14px 12px 14px 18px;border-radius:var(--r-xs);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.intent[hidden]{display:none}
.intent .rec-dot{flex:0 0 auto}
.intent-text{flex:1;margin:0;font-size:var(--t-body-s);line-height:1.4;color:#fff}
.intent-clear{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--fg-75);transition:background-color .25s,color .25s}
.intent-clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.intent-clear:hover{background:rgba(255,255,255,.08);color:#fff}
.intent-clear:focus-visible{outline:2px solid #fff;outline-offset:2px}
.form-legal{margin:16px 0 0;font-size:var(--t-micro-s);line-height:1.5;color:var(--fg-60)}
.form-legal a{color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .25s,color .25s}
.form-legal a:hover{color:#fff;border-color:#fff}
.thanks-body b{color:#fff;font-weight:600}
@media (max-width:767px){.intent{padding:12px 8px 12px 14px}.intent-text{font-size:14px}}

/* ---------- R03 · CONSENT UI · designed states (banner · preferences · saved · reopen · video gate) · in-memory model, no real CMP (A12 · EXEC) ---------- */
.consent{position:relative;z-index:1}   /* PATCH B2B V1: in fluxul documentului, deasupra barei si a Hero-ului (vezi blocul de la final) */
.consent[hidden]{display:none}
.consent-card{background:rgba(12,12,12,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--r-sm);padding:20px 22px 18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 80px rgba(0,0,0,.75)}
.consent-kicker{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-75)}
.consent-text{margin:10px 0 0;font-size:var(--t-micro);line-height:1.5;color:var(--fg-75)}
.consent-actions{display:flex;align-items:center;gap:10px;margin-top:16px}
.consent-btn{flex:1 1 0;min-width:0;height:44px;padding:0 14px;border-radius:var(--r-xs);background:#fff;color:#0a0a0a;font-family:var(--text);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .25s}
.consent-btn:hover{transform:translateY(-2px);background:#f0f0f0}
.consent-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.consent-link{flex:0 0 auto;margin-left:4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;transition:border-color .25s}
.consent-link:hover{border-color:var(--red)}
.consent-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:767px){
  .consent-card{padding:14px 16px 14px}
  .consent-text{margin-top:8px;font-size:12px;line-height:1.45}
  .consent-actions{margin-top:12px;gap:8px;flex-wrap:wrap}
  .consent-btn{height:40px;font-size:11px;padding:0 10px}
  .consent-link{flex-basis:100%;margin:2px 0 0;width:max-content}
}
/* preferences panel (dialog) */
.consent-prefs{position:fixed;inset:0;z-index:76;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.72);opacity:0;transition:opacity .3s ease-out}
.consent-prefs[hidden]{display:none}
.consent-prefs.is-open{opacity:1}
.consent-prefs__box{width:min(640px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;background:#0c0c0c;border-radius:var(--r-md);padding:26px 28px 24px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 100px rgba(0,0,0,.8);transform:translateY(12px);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.consent-prefs.is-open .consent-prefs__box{transform:none}
.consent-prefs__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.consent-prefs__close{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;transition:background-color .25s}
.consent-prefs__close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.consent-prefs__close:hover{background:rgba(255,255,255,.14)}
.consent-prefs__close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.consent-prefs__title{margin:16px 0 0;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;font-size:clamp(26px,2.6vw,38px)}
.consent-prefs__intro{margin:12px 0 0;font-size:var(--t-body-s);line-height:1.5;color:var(--fg-75);max-width:56ch}
.consent-cats{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.consent-cat{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.consent-cat__text{flex:1;min-width:0;cursor:pointer}
.consent-cat--locked .consent-cat__text{cursor:default}
.consent-cat b{display:block;font-size:var(--t-body-s);font-weight:600;color:#fff}
.consent-cat__text span{display:block;margin-top:3px;font-size:var(--t-micro-s);line-height:1.45;color:var(--fg-60)}
.consent-check{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.consent-toggle{position:relative;flex:0 0 auto;width:46px;height:26px;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);cursor:pointer;transition:background-color .25s}
.consent-toggle i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.consent-check:checked+.consent-toggle,.consent-toggle.is-on{background:var(--red);box-shadow:none}
.consent-check:checked+.consent-toggle i,.consent-toggle.is-on i{transform:translateX(20px)}
.consent-check:focus-visible+.consent-toggle{outline:2px solid #fff;outline-offset:3px}
.consent-toggle.is-locked{opacity:.75;cursor:default}
.consent-always{flex:0 0 auto;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-60)}
.consent-prefs__actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.consent-prefs__actions .consent-btn{flex:none}
.consent-prefs__note{margin:16px 0 0;font-size:var(--t-micro-s);color:var(--fg-60)}
.consent-prefs__note a{color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.4)}
@media (max-width:767px){
  .consent-prefs{padding:12px;align-items:flex-end}
  .consent-prefs__box{padding:20px 18px 18px;max-height:calc(100dvh - 24px)}
  .consent-prefs__title{font-size:24px}
  .consent-prefs__actions{grid-template-columns:1fr 1fr}
  .consent-prefs__actions .consent-btn:first-child{grid-column:1 / -1}
  .consent-always{display:none}
}
/* saved toast */
.consent-toast{position:fixed;right:24px;top:calc(var(--nav-h) + 12px);z-index:71;transform:translateY(-12px);display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border-radius:var(--r-xs);
  background:#fff;color:#0a0a0a;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:0 20px 50px rgba(0,0,0,.6);opacity:0;transition:opacity .3s ease-out,transform .4s cubic-bezier(.2,.7,.2,1)}
.consent-toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.consent-toast[hidden]{display:none}
.consent-toast.is-in{opacity:1;transform:translateY(0)}
@media (max-width:1023px){.consent-toast{right:16px;top:calc(var(--nav-h) + 10px)}}
.reduced .consent-card,.reduced .consent-prefs,.reduced .consent-prefs__box,.reduced .consent-toast{transition:none;transform:none;opacity:1}

/* ---------- R03 · 13 FOOTER · copyright · legal links · legal entity slot · persistent consent control (A12) ---------- */
.footer-logo{align-self:flex-start}                                    /* column flex stretched the mark in Build 02: fixed */
.footer-consent{width:max-content;padding:0 0 2px;font-size:var(--t-micro);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-75);text-align:left;border-bottom:1px solid rgba(255,255,255,.35);transition:color .25s,border-color .25s}
.footer-consent:hover{color:#fff;border-color:#fff}
.footer-consent:focus-visible{outline:2px solid #fff;outline-offset:3px}
.footer-legalbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;max-width:1240px;margin:40px auto 0;padding-top:18px;border-top:1px solid var(--line-soft);color:var(--fg-60)}
.footer-legalbar p{margin:0;font-size:var(--t-micro-s);line-height:1.5}
.footer-legalbar .footer-copy{margin-top:0 !important;font-size:var(--t-micro-s)}
.footer-entity .slot{color:rgba(255,255,255,.38)}
.footer-proto{margin-top:36px}
@media (max-width:767px){.footer-legalbar{flex-direction:column;gap:6px;margin-top:32px}}

/* ---------- R03 · rhythm pass (spacing only · no composition rebuild · AVOCAT 6C) ---------- */
.prog-head{margin-top:clamp(40px,4vw,64px)}
.spectacle .spectacle-head{padding-top:0}

/* ==================================================================================
   R11 · CORECTII ARHITECT (dupa review-ul preview-ului R10 in browser)
   Ordinea blocurilor urmeaza numerotarea corectiilor, nu ordinea din pagina.
   ================================================================================== */

/* ---------- C03 · 03 NOI NE OCUPAM DE TOT · ritm si un singur monumental ---------- */
/* Golul de deasupra titlului era suma a doua paddinguri: `.metrics` inchidea cu pana la
   128px, iar `.mech` deschidea cu pana la 150px. Titlul e acum MONUMENTAL, deci are
   nevoie de mai putin elan, nu de mai mult. */
.mech{padding-top:clamp(44px,3.6vw,72px)}
/* Monumentalul DUPLICAT de dupa cei 8 pasi a fost sters din markup, iar el era cel care
   purta `padding-bottom` al scenei. Fara inlocuirea de aici, scena s-ar fi lipit de
   CINE SUNTEM. */
.mech{padding-bottom:clamp(88px,7vw,132px)}
.mech-open{color:#fff}
/* Subtitlul sta sub un registru de 11vw, nu sub unul de 72px: ii trebuie aer propriu. */
.mech-head .section-sub{margin-top:clamp(20px,2vw,34px)}
.mech .stairs{margin-top:clamp(48px,5vw,84px)}
@media (max-width:767px){
  .mech{padding-top:40px;padding-bottom:64px}
  .mech .stairs{margin-top:36px}
  .mech-head .section-sub{margin-top:16px}
}

/* ---------- C06 · fisele celor 20 de programe · teme reale, durata reala ---------- */
/* Cele doua propozitii generice au fost scoase din TOATE fisele. In locul lor: descriere
   specifica, 3-6 teme din sursa auditata (`sites/itlearning-lab/data/programe-standard.json`)
   si durata. Programele fara module in sursa NU primesc teme inventate. */
.acc-teme{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.acc-teme li{position:relative;padding-left:18px;font-size:var(--t-body-s);line-height:1.5;color:var(--fg-75)}
.acc-teme li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--red)}
.acc-inner .acc-meta{margin-top:16px;font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-60)}
.acc-inner .acc-meta b{color:#fff;font-weight:600}

/* ---------- C07 · dovada MVP sub blocul de autoritate ---------- */
.authority-proof{display:inline-flex;align-items:center;gap:16px;margin-top:26px;padding:10px 18px 10px 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.035);
  transition:border-color .35s ease,background .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.authority-proof:hover,.authority-proof:focus-visible{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07);transform:translateY(-2px)}
.authority-proof:focus-visible{outline:2px solid #fff;outline-offset:3px}
.authority-proof__thumb{width:74px;height:auto;border-radius:3px;display:block;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.authority-proof__cta{display:flex;flex-direction:column;gap:3px;text-align:left}
.authority-proof__label{font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.authority-proof__meta{font-size:var(--t-micro-s);letter-spacing:.06em;color:var(--fg-60)}
@media (max-width:767px){.authority-proof{margin-top:20px;gap:12px;padding:8px 14px 8px 8px}.authority-proof__thumb{width:58px}}

/* ---------- C08 · CUM LIVRAM · rupere de ritm fata de dark world ---------- */
/* Fotografia a fost REGENERATA din originalul neprocesat din repo
   (`sites/itlearning/assets/recovered/training/sala-training-live.jpg`): blur 11px -> 2px,
   luminozitate medie 85 -> 186. Blurul vechi era ARS in fisier, deci nu putea fi redus din CSS.
   Overlayul de aici nu mai intuneca: doar asaza o zona de lumina sub coloana de text, cat sa
   tina contrastul textului NEGRU peste fotografie. */
.delivery-bg img{opacity:1;filter:none;object-position:50% 46%}
.delivery-bg::before{background:linear-gradient(90deg,
  rgba(255,255,255,.93) 0%, rgba(255,255,255,.88) 34%, rgba(255,255,255,.55) 58%, rgba(255,255,255,.28) 100%)}
.delivery-bg::after{opacity:.05}
/* Textul devine NEGRU. Contrastul e purtat de zona de lumina de mai sus, nu de reintunecarea
   fotografiei - exact ce cere corectia. */
.delivery .kicker,.delivery .section-title,.delivery .delivery-body,
.delivery .term-word,.delivery .term-idx{color:#0a0a0a}
.delivery .delivery-body{color:#1d1d1d}
.delivery .term-idx{color:#4a4a4a}
.delivery .term{border-color:rgba(0,0,0,.16)}
.delivery .rec-dot{background:var(--red-deep)}
@media (max-width:1023px){
  /* Sub doua coloane textul nu mai sta in stanga, deci lumina devine verticala. */
  .delivery-bg::before{background:linear-gradient(180deg,
    rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 46%, rgba(255,255,255,.66) 78%, rgba(255,255,255,.5) 100%)}
}
@media (max-width:767px){.delivery-bg img{opacity:1;object-position:50% 38%}}

/* ---------- C10 · DOVADA DOCUMENTARA · placute lizibile pe tot peretele ---------- */
/* Inainte se citea doar documentul activ: `.frame` statea la `brightness(.68)`, iar placuta
   avea 10px cu culoare de 75% opacitate. Holul ramane hol - ce creste e placuta. */
.frame{filter:brightness(.82)}
.frame-plate{font-size:13px;letter-spacing:.1em;color:#fff;padding:7px 12px;
  background:rgba(8,8,8,.82);border:1px solid rgba(255,255,255,.22);border-radius:3px;
  text-shadow:0 1px 2px rgba(0,0,0,.6)}
.frame-plate b{font-size:11px;color:rgba(255,255,255,.74)}
.frame:hover .frame-plate,.frame:focus-visible .frame-plate{border-color:rgba(255,255,255,.46)}
@media (max-width:1023px){.frame-plate{font-size:12px}.frame-plate b{font-size:10px}}

/* ---------- C09 · DR.EXCEL · banda cu cele 8 lectii demo ---------- */
/* Un singur rand, continuu, STANGA -> DREAPTA. Pista tine continutul de doua ori, iar
   animatia merge de la -50% la 0: asa capatul din stanga intra mereu in cadru si bucla nu are
   cusatura. Nu e grila 2x4 si nu e carusel cu sarituri - nu exista pasi, doar translatie. */
.drxm{margin:clamp(28px,3vw,44px) 0 0;position:relative}
.drxm__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:16px}
.drxm__kicker{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:var(--t-micro-s);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.drxm__sub{margin:0;font-size:var(--t-micro);color:var(--fg-60)}

/* Viewportul taie banda, iar mastile laterale o fac sa intre si sa iasa din lumina,
   nu sa se opreasca brusc la margine. */
.drxm__viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.drxm__track{display:flex;gap:14px;margin:0;padding:2px 0;list-style:none;width:max-content;
  animation:drxm-curge 40.25s linear infinite}   /* PATCH B2B V1: 7 lectii, nu 8 (Windows a iesit) - 46s x 7/8 pastreaza viteza aprobata */
@keyframes drxm-curge{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
/* D2 (review desktop): hover, focus sau un video inline pornit => PAUZA PE LOC. Inainte, hover-ul schimba
   `animation-duration` (46s -> 150s) din mers; progresul animatiei e o FRACTIE din durata, deci pozitia
   se recalcula brusc si cardul fugea de sub cursor. `animation-play-state` ingheata exact translatia
   curenta si o reia de acolo: zero reset, zero reordonare, zero remount, zero timer sau RAF nou.
   Focusul opreste banda numai cand e de TASTATURA (`:focus-visible`): dupa „Închide", focusul revine
   (corect) pe card, iar cu `:focus-within` banda ramanea oprita si pentru mouse, dupa ce cursorul pleca. */
.drxm:hover .drxm__track,.drxm.is-redare .drxm__track{animation-play-state:paused}
.drxm__track:has(:focus-visible){animation-play-state:paused}

.drxm__item{flex:0 0 auto}
.drxm__card{display:flex;flex-direction:column;gap:0;width:236px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#0d0d0d;overflow:hidden;
  transition:border-color .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.drxm__card:hover,.drxm__card:focus-visible{border-color:rgba(255,255,255,.36);transform:translateY(-3px)}
.drxm__card:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Arta cardului e COMPUSA local. Deliberat: o miniatura de pe `i.ytimg.com` ar fi insemnat o
   cerere catre Google la INCARCAREA paginii, adica exact inaintea consimtamantului. */
.drxm__art{position:relative;display:block;aspect-ratio:16/9;
  background:radial-gradient(120% 130% at 24% 8%,#2b2b2b 0%,#141414 52%,#0b0b0b 100%)}
.drxm__art::after{content:"";position:absolute;inset:0;opacity:.5;
  background:linear-gradient(118deg,rgba(255,255,255,.12),transparent 46%)}
.drxm__play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;z-index:1;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.drxm__play svg{width:20px;height:20px;fill:#0a0a0a;margin-left:3px}
.drxm__card:hover .drxm__play{transform:scale(1.09)}
.drxm__cat{padding:12px 14px 0;font-size:var(--t-micro-s);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red)}
.drxm__titlu{padding:5px 14px 14px;font-size:var(--t-body-s);line-height:1.35;color:#fff}

/* Sub 768px si la miscare redusa banda NU mai curge: devine o pista pe care o tragi cu degetul,
   cu toate cele 8 lectii accesibile. Copia de bucla dispare, ca sa nu fie 16 de parcurs. */
@media (max-width:767px){
  .drxm__viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    -webkit-mask-image:none;mask-image:none}
  .drxm__track{animation:none;transform:none;width:max-content;padding-right:var(--gutter)}
  .drxm__item[aria-hidden="true"]{display:none}
  .drxm__item{scroll-snap-align:start}
  .drxm__card{width:214px}
}
html.reduced .drxm__viewport{overflow-x:auto;overflow-y:hidden;-webkit-mask-image:none;mask-image:none}
html.reduced .drxm__track{animation:none;transform:none}
html.reduced .drxm__item[aria-hidden="true"]{display:none}
@media (prefers-reduced-motion:reduce){
  .drxm__viewport{overflow-x:auto;overflow-y:hidden;-webkit-mask-image:none;mask-image:none}
  .drxm__track{animation:none;transform:none}
  .drxm__item[aria-hidden="true"]{display:none}
}
/* Banda traieste intr-o coloana de grid/flex, iar un element de grid are `min-width:auto`:
   fara linia de mai jos coloana se LATESTE cat pista (masurat: 4705px la 1440), si overflowul
   ajunge la nivel de PAGINA. `overflow:hidden` pe viewport nu ajuta daca parintele creste. */
.drxm,.drxm__viewport{min-width:0;max-width:100%}
/* NU se pune `min-width:0` pe TOTI copiii panoului: masurat la 1024px, asta lasa coloana
   bibliotecii sa se stranga, iar raftul 3D dinauntru iese din cutie cu 16px si overflowul
   ajunge la nivel de pagina. Are nevoie doar banda, si ea il are mai sus. */
/* Panoul Dr.Excel e o grila pe doua coloane, iar banda e copilul ei al treilea: fara linia
   de mai jos ar curge in coloana a doua, langa biblioteca, in loc sa stea SUB ea. */
.panel--drexcel .drxm{grid-column:1 / -1}

/* ==================================================================================
   R12 · DELTA ARHITECT (a doua runda de review direct in preview)
   ================================================================================== */

/* ---------- R12-01 · NAV desktop: mai multa prezenta, plus underline activ ---------- */
/* Crestere masurata, nu „mai mare": 13px -> 16px, 500 -> 600. Ramane in registrul GM:
   uppercase, tracking mic, fara chenar si fara fundal de navbar corporate. */
.nav-links{font-size:16px;font-weight:600;gap:26px}
.nav-links a{color:rgba(255,255,255,.82)}
.nav-links a:hover,.nav-links a.is-active{color:#fff}
/* Liniuta rosie. Traieste pe un pseudo-element ca sa nu miste layoutul cand apare. */
.nav-links a[data-nav-spy]{position:relative;padding-bottom:4px}
.nav-links a[data-nav-spy]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.nav-links a[data-nav-spy]:hover::after,
.nav-links a[data-nav-spy]:focus-visible::after,
.nav-links a[data-nav-spy].is-active::after{transform:scaleX(1)}
/* CTA-ul e buton, nu item de meniu: nu primeste liniuta, prin constructie - nu are `data-nav-spy`. */
@media (max-width:1279px){.nav-links{gap:20px;font-size:15px}}

/* ---------- R12-02 · HERO: cinci stele rosii in eyebrow ---------- */
.hero-stars{display:inline-flex;align-items:center;gap:3px;margin-right:12px;vertical-align:middle}
.hero-star{width:15px;height:15px;fill:var(--red);flex:0 0 auto}
@media (max-width:767px){.hero-star{width:13px;height:13px}.hero-stars{margin-right:9px;gap:2px}}

/* ---------- R12-03 · BODY COPY desktop +50% ---------- */
/* Se mareste REGISTRUL DE TEXT, nu tokenurile de titlu. `--t-body` si `--t-body-s` hranesc
   exact paragrafele si descrierile; titlurile, navul, eyebrow-urile, labelurile de formular,
   labelurile de metrici si butoanele au registrele lor si NU se ating.
   17 -> 25.5px, 16 -> 24px. Line-height scade putin, fiindca la corp mare acelasi raport ar
   rupe ritmul, iar max-width creste ca randul sa nu devina prea lung. */
@media (min-width:768px){
  :root{--t-body:25.5px;--t-body-s:24px}
  .hero-support,.section-sub,.delivery-body,.offer-body,
  .panel--drexcel .panel-lead,.authority-body{line-height:1.42}
  .stair-body{font-size:var(--t-body-s);line-height:1.45;max-width:34ch}
  .acc-inner p,.faq-a p,.acc-teme li{line-height:1.45}
  .section-sub{max-width:52ch;margin-left:auto;margin-right:auto}
  .delivery-body{max-width:38ch}
  .authority-body,.fam-desc{max-width:46ch}
}

/* ---------- R12-04 · TRUST: logo marquee +50% ---------- */
/* Logo-urile se scaleaza prin INALTIME, nu prin `transform`: asa nu se deformeaza si nu ies
   din cutia lor. Spatiile cresc proportional, ca densitatea benzii sa ramana echilibrata. */
.marquee-track img{height:auto;max-height:78px;transform:scale(1.5);transform-origin:center}
.marquee-track li{padding:0 66px}
@media (max-width:1023px){.marquee-track li{padding:0 52px}}
@media (max-width:767px){.marquee-track img{transform:scale(1.2)}.marquee-track li{padding:0 34px}}

/* ---------- R12-05 · TRUST: banda de audit devine scena ---------- */
/* Nu mai e microcopy: intra in registrul de sub metrici, pe trei randuri fixe, cu CTA centrat. */
.audit-strip{max-width:1180px;margin:clamp(48px,4.6vw,76px) auto 0}
.audit-strip__copy{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 clamp(24px,2.4vw,36px);
  text-align:center;font-family:var(--display);font-weight:700;text-transform:none;letter-spacing:-.015em;
  line-height:1.12;font-size:clamp(26px,2.6vw,42px);color:#fff}
.audit-linie{display:block}
.audit-linie--sub{font-size:.62em;font-weight:500;color:var(--fg-75);letter-spacing:0;margin-top:.45em;
  font-family:var(--text);line-height:1.35}
.audit-strip__cta{display:inline-flex;margin:0 auto}
.audit-strip p{border:0;padding:0;background:none}
@media (max-width:767px){
  .audit-strip{margin-top:40px}
  .audit-strip__copy{font-size:22px;gap:4px;margin-bottom:22px}
  .audit-strip__cta{width:100%;justify-content:flex-start}
}

/* ---------- R12-06 · MECANISM: ~90vw util pe desktop ---------- */
/* Nu se micsoreaza fonturile ca sa incapa textul marit de R12-03: se lateste containerul.
   5% stanga, 5% dreapta, restul e continut. Cele trei registre - index, titlu, explicatie -
   primesc coloane mai late si gap mai mare, ca sa nu se stranguleze intre ele. */
@media (min-width:1024px){
  .mech{padding-left:5vw;padding-right:5vw}
  .stairs{max-width:none;width:100%}
  .stair{grid-template-columns:120px minmax(0,1fr) clamp(360px,30vw,560px);column-gap:clamp(48px,4vw,72px)}
}
@media (min-width:1600px){
  .stair{grid-template-columns:140px minmax(0,1fr) clamp(420px,28vw,640px)}
}

/* ---------- R12-07 · ZERO bleed-through inainte de CINE SUNTEM ---------- */
/* Cauza masurata, nu banuita: `.cine .moment-title` avea `margin-top`, iar ambii parinti
   aveau `padding-top:0`. Marginea se COLAPSA in afara sectiunii si impingea `#cine-suntem`
   cu 37px mai jos decat se termina `#cum-lucram`. Prin fasia aceea se vedea hero-ul, care e
   `position:sticky` la z-index 0 si ramane pictat in viewport pe toata pagina.
   Spatiul trece in PADDING, deci nu mai are cum sa iasa din sectiune. Acelasi rezultat vizual. */
/* Centura: scenele din jur declara fundalul explicit, ca o viitoare margine scapata sa dea
   negru, nu hero. Poarta masoara separat ca intre sectiuni sa NU existe niciun gol. */
.mech{background:var(--bg)}                      /* M3.2: `.uni` isi declara fundalul in blocul ei */

/* ---------- R12-11 · DREAM TEAM: eticheta de expertiza, lizibila ---------- */
/* 11 -> 15px si 600 -> 700. Ramane SECUNDARA fata de nume, care e in registrul display de
   42px+: creste lizibilitatea, nu ierarhia. */
.card-role{font-size:15px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.88)}
@media (max-width:1279px){.card-role{font-size:13px}}
@media (max-width:767px){.card-role{font-size:10px;letter-spacing:.08em}}

/* ---------- R12-13 · CUM LIVRAM: fotografia mai clara si mai la dreapta ---------- */
/* Fisierul a fost REGENERAT din acelasi original neprocesat: blur 2.0 -> 0.8, saturatie
   0.52 -> 0.72. `object-position` trece de la 50% la 62%: cadrul se muta spre dreapta, deci
   trainerul si clasa intra in zona vizibila, nu raman sub coloana de text.
   Zona de lumina se ingusteaza corespunzator - tine doar coloana din stanga, cat sa ramana
   contrastul textului negru, fara sa reintunece fotografia. */
.delivery-bg img{object-position:62% 46%}
.delivery-bg::before{background:linear-gradient(90deg,
  rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 26%, rgba(255,255,255,.42) 48%, rgba(255,255,255,.12) 72%, rgba(255,255,255,.04) 100%)}
@media (max-width:1023px){
  .delivery-bg img{object-position:58% 42%}
  .delivery-bg::before{background:linear-gradient(180deg,
    rgba(255,255,255,.93) 0%, rgba(255,255,255,.87) 44%, rgba(255,255,255,.62) 76%, rgba(255,255,255,.44) 100%)}
}
@media (max-width:767px){.delivery-bg img{object-position:62% 38%}}

/* ---------- R12-14 · DEMO DR.EXCEL: carduri +30% si slot de thumbnail ---------- */
/* 236 -> 307px, adica +30% exact. Banda ramane un singur rand si aceeasi directie. */
.drxm__card{width:307px}
.drxm__track{gap:18px}
.drxm__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Cu thumbnail real, textul are nevoie de un strat de contrast peste imagine. Fara el,
   arta compusa isi tine singura contrastul si nu se adauga nimic. */
.drxm__card.has-thumb .drxm__art::after{opacity:1;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.42) 62%,rgba(0,0,0,.72) 100%)}
.drxm__card.has-thumb .drxm__play{box-shadow:0 6px 20px rgba(0,0,0,.45)}
.drxm__cat{font-size:var(--t-micro)}
.drxm__titlu{font-size:17px;line-height:1.32}
@media (max-width:767px){.drxm__card{width:278px}.drxm__titlu{font-size:15px}}

/* ---------- R12-17 · FORMULAR: scena LIGHT si compactata ---------- */
/* Rupere vizuala fata de dark world, ca la `Cum livram`, dar aici fundalul e alb plin.
   Compactarea: paddinguri si gap-uri scad cu ~30%, iar inaltimile de control cu ~11%, de la
   56 la 50px. Aria de click ramane PESTE 44px, pragul accesibil - compactare, nu inghesuire. */
.offer--light{background:#fff;color:#141414}
.offer--light .kicker,.offer--light .section-title,.offer--light .offer-sub,
.offer--light .thanks-title,.offer--light .receive-title{color:#0a0a0a}
.offer--light .offer-body{color:#333}
.offer--light .offer-micro,.offer--light .form-micro,.offer--light .field-hint{color:#5c5c5c}
.offer--light .receive-list{color:#333}
.offer--light .receive{border-top-color:rgba(0,0,0,.12)}
.offer--light .rec-dot{background:var(--red-deep)}

.offer--light .form,.offer--light .thanks{background:#f6f5f3;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 24px 60px rgba(0,0,0,.09)}
.offer--light .field-label{color:#2a2a2a}
.offer--light .opt{color:#6a6a6a}
.offer--light .input{background:#fff;border-color:rgba(0,0,0,.2);color:#141414}
.offer--light .input::placeholder{color:#8a8a8a}
.offer--light .input:hover{border-color:rgba(0,0,0,.4)}
.offer--light .input:focus{border-color:#141414;box-shadow:0 0 0 3px rgba(20,20,20,.14)}
.offer--light .input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(225,29,38,.16)}
.offer--light .chip span{background:#fff;border-color:rgba(0,0,0,.22);color:#333}
.offer--light .chip:hover span{border-color:rgba(0,0,0,.5);color:#0a0a0a}
.offer--light .chip input:checked+span{background:#141414;color:#fff;border-color:#141414}
.offer--light .chip input:focus-visible+span{outline:2px solid #141414;outline-offset:3px}
.offer--light .field-error{color:#b3121a}
.offer--light .field-error::before{background:#b3121a}
.offer--light .form-alert{background:rgba(225,29,38,.08);box-shadow:inset 0 0 0 1px rgba(225,29,38,.45);color:#141414}
.offer--light .form-legal,.offer--light .form-legal a{color:#5c5c5c}
.offer--light .btn--white{background:#141414;color:#fff}
.offer--light .btn--white .btn-icon{border-color:rgba(255,255,255,.22)}
.offer--light .btn--white svg{fill:none;stroke:#fff}

/* Compactare: -30% pe spatii verticale, controale la 50px (peste pragul de 44px). */
.offer--light{padding-top:clamp(64px,5vw,104px);padding-bottom:clamp(64px,5vw,104px)}
.offer--light .form{gap:15px;padding:clamp(18px,2.1vw,30px)}
.offer--light .field-row{gap:15px}
.offer--light .field{gap:6px}
.offer--light .input{height:50px}
.offer--light .chip span{min-height:46px}
.offer--light .receive{margin-top:25px;padding-top:17px}
.offer--light .receive-list{margin-top:10px;gap:6px 20px}
.offer--light .offer-sub{margin-top:13px}
.offer--light .offer-body{margin-top:10px}
.offer--light .form-actions{gap:14px;margin-top:2px}
.offer--light .thanks{padding:clamp(22px,2.8vw,38px)}
@media (max-width:767px){.offer--light .form{gap:14px}.offer--light .input{height:50px}}

/* ---------- R12-18 · CONSIMTAMANT: ierarhie clara intre cele trei actiuni ---------- */
/* Accept All e DOMINANT VIZUAL, nu pre-acceptat: nimic nu e bifat in date pana la clic.
   Esentiale ramane un buton adevarat, cu acelasi camp de click; Mai multe ramane link. */
.consent-btn--principal{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.consent-btn--principal:hover{background:var(--red-deep);border-color:var(--red-deep)}
.consent-btn--secundar{background:transparent;border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.9)}
.consent-btn--secundar:hover{border-color:#fff;color:#fff}
.consent-card .consent-btn{min-height:44px}
/* Etichetele noi (R12-18) sunt mult mai lungi decat „Acceptă / Refuză / Preferințe", iar
   `.consent-btn` era `flex:1 1 0` cu `white-space:nowrap`: in cardul de 440px cele trei
   actiuni se suprapuneau. Se aseaza pe randuri proprii - ceea ce e si mai aproape de
   ierarhia ceruta: actiunea principala singura pe rand, sub ea alternativa, apoi setarile. */
.consent-card .consent-actions{flex-direction:column;align-items:stretch;gap:8px}
.consent-card .consent-btn{flex:0 0 auto;width:100%;white-space:normal;line-height:1.2;padding:10px 14px;height:auto;min-height:44px}
.consent-card .consent-link{flex:0 0 auto;margin:4px 0 0;align-self:flex-start;width:max-content}

/* =====================================================================
   R13 · ACCENT DE BRAND — DIRECTIA 03 „CELULA ACTIVA"
   Utilitar REUTILIZABIL. Se pune pe orice cuvant-cheie, in orice scena, fara alt cod:
   un singur `<span class="itl-celula">` cu terenul `aria-hidden` inauntru.

   Sursa: `IT_LEARNING_B2B_BRANDING_3_DIRECTII/03_implementare/itl-accente.css`, sectiunea D03.
   Trei lucruri s-au RECALIBRAT fata de codul de referinta, si de ce:

   1. MODULUL e derivat din corpul literei (`--itl-cap`), nu fixat la 80x40px. Regula primara a
      designerului e „inaltimea modulului = inaltimea majusculei fontului de titlu" (4.2), iar
      constanta de 80x40 a fost masurata pe doua titluri aproape egale (58px si 41px). Pagina
      reala are titluri intre ~34px si ~104px pe aceeasi scara fluida, deci un modul fix ar fi
      iesit sub jumatate din majuscula in Hero. Pe `em`, faza grilei ramane dictata de text la
      orice breakpoint si dispare calibrarea manuala per titlu (aceeasi regula ca in 4.8).
   2. ROSUL e `var(--red)` (#e11d26), tokenul paginii. Designerul spune explicit ca valoarea
      esantionata (#E12029) cedeaza in fata valorii oficiale de brand.
   3. MANERUL e 14x14px cu bordura de 2px, nu 10x10: pagina are `box-sizing:border-box` global,
      deci 14px total = patrat rosu de 10px + inelul negru de 2px cerut in 4.2, si offsetul de
      -7px il centreaza corect pe coltul dreapta-jos al intervalului.

   CADRUL care gazduieste accentul trebuie sa TAIE, altfel stratul de teren iese din scena.
   Toate cele trei gazde de azi o fac deja: `.hero` (overflow:hidden), `.programs` si `.hub`
   (overflow:clip).
   CAPCANA, daca accentul se reutilizeaza: terenul e `z-index:-1`, deci urca pana la primul
   CONTEXT DE STIVUIRE de deasupra lui - care pe pagina asta e adesea un `[data-reveal]`, fiindca
   GSAP ii lasa `transform` inline. Vezi nota de la `.hub__eyebrow` si verifica intotdeauna ce se
   picteaza peste ce, pe o imagine, nu pe hartie.
   ===================================================================== */
.itl-celula{
  --itl-cap:.75em;                             /* inaltimea majusculei Sora, masurata: 0.75em */
  --itl-mod-h:var(--itl-cap);                  /* modulul = majuscula */
  --itl-mod-w:calc(2 * var(--itl-mod-h));      /* latimea = 2 x inaltimea */
  --itl-grid-linie:rgba(255,255,255,.075);     /* maximum 8%: peste prag grila devine decor */
  position:relative;display:inline-block;white-space:nowrap}
.itl-celula__text{position:relative}
/* Ancorarea in CUVANT, nu in marginea paginii: o muchie de celula cade in punctul de start. */
.itl-celula__teren{position:absolute;left:-.14em;top:-.05em;width:0;height:0;z-index:-1;pointer-events:none}
.itl-celula__grila{position:absolute;display:block;
  left:calc(-30 * var(--itl-mod-w));top:calc(-60 * var(--itl-mod-h));
  width:calc(80 * var(--itl-mod-w));height:calc(160 * var(--itl-mod-h));
  background-image:
    repeating-linear-gradient(to right,var(--itl-grid-linie) 0 1px,rgba(255,255,255,0) 1px var(--itl-mod-w)),
    repeating-linear-gradient(to bottom,var(--itl-grid-linie) 0 1px,rgba(255,255,255,0) 1px var(--itl-mod-h))}
/* INTERVALUL ACTIV - exact patru celule, una plina si trei la 15%. Niciodata mai multe. */
.itl-celula__c00,.itl-celula__c10,.itl-celula__c01,.itl-celula__c11{position:absolute;display:block;
  width:var(--itl-mod-w);height:var(--itl-mod-h)}
.itl-celula__c00{left:0;top:0;background:var(--red)}
.itl-celula__c10{left:var(--itl-mod-w);top:0;background:rgba(225,29,38,.15)}
.itl-celula__c01{left:0;top:var(--itl-mod-h);background:rgba(225,29,38,.15)}
.itl-celula__c11{left:var(--itl-mod-w);top:var(--itl-mod-h);background:rgba(225,29,38,.15)}
/* FILL HANDLE - marime absoluta la orice breakpoint: e element de interfata, nu de tipografie. */
.itl-celula__maner{position:absolute;display:block;
  left:calc(2 * var(--itl-mod-w) - 7px);top:calc(2 * var(--itl-mod-h) - 7px);
  width:14px;height:14px;background:var(--red);border:2px solid var(--bg)}
/* Pe ecrane mici densitatea de pixeli inghite liniile: 9%, conform 4.6. */
@media (max-width:767px){.itl-celula{--itl-grid-linie:rgba(255,255,255,.09)}}

/* Secventa de selectie (4.7), O SINGURA data, la intrarea in viewport: celulele intra, apoi
   manerul. `is-on` vine din `main.js`; CSS-ul face toata miscarea.
   GRILA nu se animeaza, deliberat. Stratul ei masoara mii de pixeli pe latura (e teren, acopera
   cadrul), iar o animatie de `opacity` pe el ar cere compozitorului o textura de ordinul zecilor
   de milioane de pixeli pentru 180ms de fade. Terenul e oricum starea de dinainte de gest:
   foaia exista, cuvantul activeaza celulele. Asta ramane vizibil.
   Fara JS nu se ascunde nimic - starea finala se randeaza direct. La `reduced` la fel. */
.js:not(.reduced) [data-celula] .itl-celula__c00,
.js:not(.reduced) [data-celula] .itl-celula__c10,
.js:not(.reduced) [data-celula] .itl-celula__c01,
.js:not(.reduced) [data-celula] .itl-celula__c11,
.js:not(.reduced) [data-celula] .itl-celula__maner{opacity:0}
.js:not(.reduced) [data-celula].is-on .itl-celula__c00,
.js:not(.reduced) [data-celula].is-on .itl-celula__c10,
.js:not(.reduced) [data-celula].is-on .itl-celula__c01,
.js:not(.reduced) [data-celula].is-on .itl-celula__c11{animation:itl-cel-intra 260ms ease-out 120ms both}
.js:not(.reduced) [data-celula].is-on .itl-celula__maner{animation:itl-cel-apare 140ms ease-out 300ms both}
@keyframes itl-cel-apare{from{opacity:0}to{opacity:1}}
@keyframes itl-cel-intra{from{opacity:0;transform:scale(.94);transform-origin:top left}
  to{opacity:1;transform:scale(1);transform-origin:top left}}

/* =====================================================================
   R13 · SCENA 08b · HUB IT LEARNING
   Portret mare ca ancora vizuala, bloc editorial, banda de repere in bucla continua.
   Zero link, zero buton, zero camp: nimic focusabil in scena.
   `isolation` + `overflow:clip` fac din sectiune cadrul care tine terenul D03 al cuvantului
   „circula" - altfel stratul de grila ar scapa peste scenele vecine.
   ===================================================================== */
.hub{padding:clamp(76px,7.4vw,120px) 0 0;isolation:isolate;overflow:clip}

/* Compozitia: pe desktop portretul ocupa coloana din stanga si sta pe linia de baza a blocului
   editorial; randul elastic de la final absoarbe tot surplusul, ca randurile de text sa ramana
   stranse indiferent cat de inalt e portretul. Pe mobil aceeasi ordine de lectura, o coloana. */
.hub__compo{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  display:grid;column-gap:clamp(36px,4.4vw,88px);
  grid-template-columns:minmax(280px,.95fr) minmax(0,1fr);
  grid-template-rows:auto auto auto auto 1fr;
  grid-template-areas:
    "portret eyebrow"
    "portret titlu"
    "portret lede"
    "portret semn"
    "portret slack"}
/* De ce au nevoie de `z-index` cele patru de mai jos, desi nu se suprapun cu nimic:
   terenul D03 e un strat `z-index:-1`, iar un asemenea strat urca pana la PRIMUL context de
   stivuire de deasupra lui - nu pana la sectiune. GSAP pune `transform: translate(0,0)` inline
   pe fiecare `[data-reveal]` dupa reveal, iar un transform != none CREEAZA context de stivuire.
   Deci terenul cuvantului „circula" ramane prins in `.hub__semn` si se picteaza odata cu el,
   adica DUPA fratii lui de dinainte din DOM. Masurat: grila trecea peste portret.
   Ridicate cu `z-index:1`, cele patru se picteaza dupa `.hub__semn`, deci deasupra terenului;
   in interiorul lui `.hub__semn`, cuvantul ramane peste propriile celule, ca pana acum. */
.hub__eyebrow,.hub__headline,.hub__lede,.hub__portret{position:relative;z-index:1}
.hub__eyebrow{grid-area:eyebrow;margin:0 0 clamp(18px,2vw,30px)}
.hub__headline{grid-area:titlu;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.022em;line-height:1.02;font-size:clamp(27px,2.9vw,42px);color:#fff}
.hub__lede{grid-area:lede;align-self:start;font-size:var(--t-body);line-height:1.62;color:var(--fg-75);
  max-width:52ch;margin:clamp(18px,1.8vw,26px) 0 0}
.hub__semn{grid-area:semn;margin:clamp(40px,4.4vw,72px) 0 0}

/* PORTRETUL. Decupaj pe fundal transparent: nu primeste rama si nu primeste card - se aseaza in
   intuneric cu o lumina radiala in spate, o umbra care il desprinde de fundal si o stingere de
   cateva procente la baza, ca sa nu se termine cu o taietura dreapta. */
.hub__portret{grid-area:portret;align-self:end;position:relative;display:block}
.hub__portret-lumina{position:absolute;left:50%;bottom:-4%;width:124%;aspect-ratio:1/1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.085),rgba(255,255,255,.028) 52%,rgba(255,255,255,0) 72%)}
.hub__portret-ax{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.17) 26%,rgba(255,255,255,.17) 74%,rgba(255,255,255,0))}
.hub__portret-img{position:relative;display:block;width:100%;max-width:100%;height:auto;margin:0 auto;
  filter:saturate(.94) contrast(1.04) drop-shadow(0 26px 56px rgba(0,0,0,.62));
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 87%,rgba(0,0,0,.4) 96%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 87%,rgba(0,0,0,.4) 96%,rgba(0,0,0,0) 100%)}

/* FRAZA FONDATORULUI. Singurul bloc mare din pagina scris cu minuscule: asa citeste ca voce
   umana, nu ca inca un titlu. Accentul D03 sta pe „circula", si doar pe el. */
.hub__citat{margin:0}
.hub__citat p{margin:0;font-family:var(--display);font-weight:600;text-transform:none;
  letter-spacing:-.018em;line-height:1.16;font-size:clamp(30px,3.9vw,58px);color:#fff}
.hub__autor{display:flex;flex-direction:column;gap:7px;margin:clamp(26px,2.6vw,40px) 0 0;
  padding-top:clamp(16px,1.6vw,22px);border-top:1px solid var(--line);width:max-content;min-width:180px}
.hub__autor b{font-size:16px;font-weight:700;color:#fff}
.hub__autor span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-60)}

/* BANDA DE REPERE · motion recursiv.
   O singura translatie continua pe o pista DUBLATA: de la 0 la -50% inseamna ca a doua copie
   ajunge exact unde era prima, deci bucla nu are cusatura si nu exista pasi. Nu e ticker si nu e
   carusel. Viteza e deliberat lenta (96s pe jumatate de pista). La hover se opreste, ca sa poata
   fi citita. */
.hub__banda{margin-top:clamp(56px,5.8vw,96px);background:var(--bg-2);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:clamp(22px,2.4vw,36px) 0;max-width:100%}
.hub__banda-viewport{overflow:hidden;min-width:0;max-width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.hub__pista{display:flex;align-items:flex-start;margin:0;padding:0;list-style:none;width:max-content;
  animation:hub-curge 96s linear infinite}
@keyframes hub-curge{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (hover:hover){.hub__banda:hover .hub__pista{animation-play-state:paused}}
.hub__reper{flex:0 0 auto;display:flex;align-items:flex-start;gap:clamp(12px,1.2vw,20px);
  padding-right:clamp(30px,3.4vw,68px)}
.hub__reper::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:.42em;background:var(--red)}
.hub__reper-n{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.018em;line-height:1;font-size:clamp(21px,2.05vw,32px);color:#fff;white-space:nowrap}
.hub__reper-d{display:block;margin-top:10px;font-size:clamp(10.5px,.84vw,12.5px);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-60);white-space:nowrap}

/* Sub 900px compozitia trece pe o coloana, cu portretul intre titlu si restul textului:
   titlu -> portret -> cuvinte -> semnatura. Nu e un crop al desktopului. */
@media (max-width:899px){
  .hub{padding-top:clamp(56px,8vw,84px)}
  .hub__compo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;
    grid-template-areas:"eyebrow" "titlu" "portret" "lede" "semn"}
  /* Fara `<br>`, ruperea o alege browserul; `balance` o tine sa nu lase un rand orfan. */
  .hub__br{display:none}
  .hub__headline{text-wrap:balance}
  .hub__portret{align-self:auto;margin:clamp(22px,4vw,40px) auto 0;width:min(460px,88%)}
  .hub__portret-img{max-width:100%}
  .hub__lede{margin-top:clamp(24px,4vw,36px);max-width:none}
  .hub__semn{margin-top:clamp(30px,5vw,48px)}
  .hub__autor{width:100%;min-width:0}
}

/* Miscare redusa: pista se opreste si devine o grila statica. Reperele NU dispar si NU se
   prescurteaza - „CENTRU BUSINESS INTELLIGENCE" se rupe pe doua randuri, atat. Copia de bucla
   iese din pagina, ca sa nu fie douasprezece intrari de parcurs. */
html.reduced .hub__banda-viewport{-webkit-mask-image:none;mask-image:none;padding:0 var(--gutter)}
html.reduced .hub__pista{animation:none;transform:none;width:100%;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:clamp(24px,3vw,40px) clamp(26px,3.4vw,56px)}
html.reduced .hub__reper{display:block;padding-right:0}
html.reduced .hub__reper::before{display:block;margin:0 0 11px}
html.reduced .hub__reper[aria-hidden="true"]{display:none}
html.reduced .hub__reper-n,html.reduced .hub__reper-d{white-space:normal}
html.reduced .hub__reper-n{line-height:1.08}
@media (prefers-reduced-motion:reduce){
  .hub__banda-viewport{-webkit-mask-image:none;mask-image:none;padding:0 var(--gutter)}
  .hub__pista{animation:none;transform:none;width:100%;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
    gap:clamp(24px,3vw,40px) clamp(26px,3.4vw,56px)}
  .hub__reper{display:block;padding-right:0}
  .hub__reper::before{display:block;margin:0 0 11px}
  .hub__reper[aria-hidden="true"]{display:none}
  .hub__reper-n,.hub__reper-d{white-space:normal}
  .hub__reper-n{line-height:1.08}
}

/* =====================================================================
   R14 · DELTA ARHITECT · desktop D01-D14 · mobile M01-M08 · performanta reala
   Ordinea blocurilor urmeaza numerotarea corectiilor, nu ordinea din pagina.
   ===================================================================== */

/* ---------- ACCENT DE BRAND, utilitar ----------
   Un singur cuvant sau o singura expresie din titlu trece in rosul de brand. Fara gradient,
   fara glow, fara alt efect - exact ce cere D07. `[data-tint]` scrie culoarea INLINE pe titlu,
   deci accentul are nevoie de propria declaratie ca sa nu fie maturat de tween-ul de tint;
   niciun titlu cu accent nu e `[data-tint]` azi, dar utilitarul trebuie sa fie sigur oriunde. */
.itl-rosu{color:var(--red)}
.delivery .itl-rosu{color:var(--red)}                 /* scena e pe fotografie luminoasa, textul din jur e negru */

/* ---------- D01 · CONSIMTAMANT · card in stanga sus, compact, accept neutru ----------
   Cardul pleaca din dreapta si devine mai mic: actiunea principala nu mai concureaza vizual cu
   CTA-ul comercial rosu al paginii. `Acceptă toate` redevine alb pe negru - ramane DOMINANT prin
   pozitie si contrast, nu prin culoarea de brand. Contrastul alb/#0a0a0a e 18:1. */
.consent-card{padding:15px 16px 14px}
.consent-text{font-size:var(--t-micro-s);line-height:1.45;margin-top:7px}
.consent-kicker{font-size:10px}
/* Cele doua actiuni principale revin pe ACELASI rand cand viewportul permite; `Mai multe` ramane
   link, pe randul lui. Sub 380px de card nu incap doua butoane, deci se re-stivuiesc. */
.consent-card .consent-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.consent-card .consent-btn{flex:1 1 140px;width:auto;min-height:40px;height:auto;padding:9px 12px;font-size:11px;line-height:1.2;white-space:normal}
.consent-card .consent-link{flex:0 0 100%;margin:2px 0 0;align-self:flex-start;font-size:11px}
/* D01 · accept NEUTRU: fara fundal rosu. */
.consent-btn--principal{background:#fff;border-color:#fff;color:#0a0a0a;font-weight:700}
.consent-btn--principal:hover{background:#ececec;border-color:#ececec}
.consent-btn--secundar{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);color:rgba(255,255,255,.92)}
.consent-btn--secundar:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #fff;color:#fff}
.consent-toast{right:auto;left:24px}
@media (max-width:1023px){
  .consent-toast{left:16px;right:auto}
}
@media (max-width:420px){.consent-card .consent-btn{flex:1 1 100%}}

/* ---------- D02 · AUDIT · CTA mai jos, microcopy in registrul paragrafului ----------
   `Nu trebuie să știți dinainte...` era la .62em, adica microcopy sub un titlu de 42px. Trece la
   1em - ACEEASI dimensiune cu randurile de deasupra. Ierarhia ramane, dar o poarta greutatea si
   culoarea, nu marimea: 500 fata de 700, si `--fg-75` fata de alb. */
.audit-linie--sub{font-size:1em;font-weight:500;color:var(--fg-75);letter-spacing:-.01em;
  margin-top:.5em;font-family:var(--display);line-height:1.12}
.audit-strip__copy{margin-bottom:clamp(44px,4.4vw,72px)}
@media (max-width:767px){.audit-strip__copy{margin-bottom:34px}}

/* ---------- D03 · CINE SUNTEM · ritm titlu / video / control ----------
   Mai mult aer intre titlu si film, mai putin intre film si `Redă videoclipul cu sunet`, care
   urca langa film. CTA-ul de sub el ramane unde e, in structura. */
/* M3.2: ritmul film / „Redă videoclipul cu sunet" / CTA traieste acum in blocul M3.2 (`.uni-film`). */

/* ---------- D05 · CTA BROSURA · in dreapta, centrat in spatiul liber al fisei ----------
   Fisa devine doua coloane: descrierea si temele in stanga, actiunea in dreapta, centrata pe
   inaltimea intregii fise. Markupul nu se schimba - copiii merg implicit in coloana 1, iar ancora
   e singura mutata. Butonul e alb cu text si icon negre, ca sa citeasca drept ACTIUNE. */
.acc-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(24px,3vw,56px);align-items:start;max-width:none}
.acc-inner > *{grid-column:1;min-width:0}
.acc-inner > .acc-brosura{grid-column:2;grid-row:1 / -1;align-self:center;justify-self:center;margin:0}
.acc-brosura .btn-icon svg{stroke:#0a0a0a}
/* Textul fisei isi pastreaza lungimea de rand; doar containerul s-a latit. */
.acc-inner > p,.acc-inner > .acc-teme{max-width:52ch}
@media (max-width:1023px){.acc-inner{column-gap:28px}}
@media (max-width:767px){
  /* Pe mobil se rearanjeaza pe o coloana, fara derulaj orizontal. */
  .acc-inner{grid-template-columns:minmax(0,1fr)}
  .acc-inner > .acc-brosura{grid-column:1;grid-row:auto;justify-self:stretch;margin-top:16px;width:100%}
}

/* ---------- D08 · CUM LIVRAM · cadrul spre dreapta, blur putin mai mare ----------
   `object-position` 62% -> 78%: zona din spatele coloanei de text ajunge pe trainer, nu pe planta.
   Blurul creste din CSS, nu din fisier - originalul ramane neatins. `scale(1.04)` acopera marginile
   pe care blurul le-ar lasa transparente. */
.delivery-bg img{object-position:78% 46%;filter:blur(3px);transform:scale(1.04);transform-origin:center}
@media (max-width:1023px){.delivery-bg img{object-position:70% 42%;filter:blur(2.4px)}}
@media (max-width:767px){.delivery-bg img{object-position:72% 38%;filter:blur(2px)}}

/* ---------- D11 · DOCUMENTE · feedback de hover mult mai pronuntat ----------
   Inainte hoverul schimba doar `brightness` de la .82 la 1 - invizibil intr-un hol deja intunecat.
   Acum documentul aflat sub cursor sau focus se ridica, se lumineaza peste restul peretelui si
   primeste un halou; placuta lui trece pe rosu de brand. Raman DOCUMENTE, nu devin quote cards:
   nu se adauga nici rama noua, nici fundal de card, nici text peste imagine. */
.hall-wall:hover .frame{filter:brightness(.6)}
.frame:hover,.frame:focus-visible{filter:brightness(1.12);transform:translateY(-10px) scale(1.045);z-index:3}
.hall-wall:hover .frame:hover{filter:brightness(1.12)}
.frame:hover .frame-paper,.frame:focus-visible .frame-paper{
  box-shadow:0 26px 54px rgba(0,0,0,.78),0 0 0 1px #4a4a4a,0 0 0 7px #1c1c1c,0 0 0 8px #8f8f8f,0 0 70px rgba(255,255,255,.26)}
.frame:hover .frame-plate,.frame:focus-visible .frame-plate{
  background:var(--red);border-color:var(--red);color:#fff}
.frame:hover .frame-plate b,.frame:focus-visible .frame-plate b{color:rgba(255,255,255,.85)}
.frame:hover .frame-light,.frame:focus-visible .frame-light{
  background:linear-gradient(120deg,rgba(255,255,255,.42),transparent 52%)}
/* Documentul ACTIV ramane distinct de cel doar tintit: activul are inel, tintitul are ridicare. */
.frame[aria-current="true"]{filter:brightness(1)}

/* ---------- D14 / M02 · HERO · punctul rosu scos, stelele pe randul lor ----------
   Punctul dintre stele si kicker a disparut din markup, nu din CSS: `.rec-dot` ramane utilitar
   pentru restul paginii. Pe mobil stelele trec pe rand propriu, centrate, deasupra kickerului,
   iar kickerul se centreaza separat. */
.hero-kicker__text{display:inline}
@media (max-width:1023px){
  .hero-kicker{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
  .hero-stars{margin-right:0}
  .hero-kicker__text{display:block;text-align:center}
}

/* ---------- M01 / M03 · CTA-urile importante, centrate vizual pe mobil ----------
   Butonul e `icon patrat + eticheta`, deci `justify-content:center` centreaza grupul intreg in
   latimea lui. */
@media (max-width:1023px){
  .hero-ctas--mobile .btn{justify-content:center}
}
@media (max-width:767px){
  .form-actions .btn,.audit-strip__cta,
  .thanks-teams,.panel--drexcel .panel-cta{justify-content:center}
  .form-actions{justify-items:center}
  .form-micro{text-align:center;width:100%}
}

/* ---------- M04 · MECANISM · acordeon pe mobil, totul inchis implicit ----------
   Numai sub 768px. `main.js` MUTA (nu copiaza) indexul si titlul intr-un `<button>` real, deci
   nu exista text dublat pentru cititorul de ecran si nu apare un tab stop in plus pe desktop.
   Headerul e index + titlu, aliniat la stanga; descrierea se vede doar dupa tap. */
@media (max-width:767px){
  .stair-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
    column-gap:12px;width:100%;padding:16px 0;text-align:left;color:inherit}
  .stair-btn .stair-n{padding:0;margin:0}
  .stair-btn .stair-title{font-size:19px;line-height:1.16;letter-spacing:-.01em;min-width:0}
  .stair-btn .clip{clip-path:none !important;padding:0;margin:0}
  .stair-chev{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:#fff;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease-out}
  .stair.is-open .stair-chev{transform:rotate(180deg)}
  .stair-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .stair[data-stair-acc]{padding:0;display:block}
  .stair[data-stair-acc] .stair-body{padding:0 0 18px;margin:0;font-size:var(--t-body-s)}
  .stair[data-stair-acc] .stair-body[hidden]{display:none}
  /* Pasul 02 si orice alt pas cu badge separat `OPȚIONAL`: badge-ul iese de pe mobil, sensul
     ramane in titlu („dacă este util" / „dacă doriți"). */
  .stair-btn .stair-tag{display:none}
}

/* ---------- M05 · DR.EXCEL · cele doua blocuri de cifre, centrate ca ansamblu ---------- */
@media (max-width:767px){
  .metrics-row--inline{justify-items:center}
  .metric--sm{text-align:center;padding:0;width:100%}
  .metric--sm .metric-number,.metric--sm .metric-label{display:block;text-align:center}
  .panel--drexcel .cred-line--left{text-align:center}
}

/* ---------- M07 · OFERTA · `Ce puteți primi` comprimat inline pe mobil ----------
   Aceleasi sapte elemente, acelasi continut, aceeasi ordine: doar randarea trece din lista pe
   coloane intr-un bloc continuu separat prin virgule. Scopul e masurabil - inaltimea de dinaintea
   primului input scade, deci formularul apare mai repede. Zero markup nou, zero text duplicat. */
@media (max-width:767px){
  .receive{margin-top:18px;padding-top:14px}
  .receive-list{display:block;margin-top:8px;font-size:var(--t-micro);line-height:1.5}
  .receive-list li{display:inline;padding-left:0}
  .receive-list li::before{display:none}
  .receive-list li:not(:last-child)::after{content:", "}
}

/* ---------- M08 · FOOTER · doua coloane pe mobil, contact real ----------
   Coloana 1 navigatie + legal, coloana 2 contact, exact cum cere M08. Marca ramane pe latimea
   intreaga, deasupra. La 360px nimic nu iese din cadru: coloanele au `min-width:0`, iar e-mailul
   are voie sa se rupa. */
.footer-contact{text-transform:none !important;letter-spacing:.01em !important;
  border-bottom:1px solid rgba(255,255,255,.3);width:max-content;max-width:100%}
.footer-contact:hover{border-color:#fff}
.footer-adresa{color:var(--fg-75)}
@media (max-width:767px){
  .footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 16px}
  .footer-col{min-width:0}
  .footer-col--brand{grid-column:1 / -1}
  .footer-grid > nav.footer-col{grid-column:1;grid-row:2}
  .footer-col--legal{grid-column:1;grid-row:3}
  .footer-col--contact{grid-column:2;grid-row:2 / span 2;align-self:start}
  .footer-col a,.footer-col p{overflow-wrap:anywhere}
  .footer-contact{width:auto}
}

/* ---------- D04 · STAREA DE REVEAL, MEMORATA IN CSS ----------
   Cauza masurata a bugului de refresh: tween-urile de reveal sunt `once:true`, iar dupa ce se
   consuma, un `ScrollTrigger.refresh()` ulterior (se ruleaza la `load`, la +300ms, la
   `fonts.ready` si la `loadingdone`) revine peste ele si sterge starea inline pe care o
   scrisesera. Triggerul fiind deja ucis de `once`, nimic nu o mai pune la loc, deci elementul
   ramane pe `opacity:0` din regula de mai sus - vizibil ca „grafica nu s-a incarcat".
   Reparatia e sa nu mai depindem de starea INLINE: clasa `is-revealed` e memoria, si ea nu se
   sterge niciodata. Selectorii de mai jos ii repeta pe cei de initializare plus o clasa, deci
   castiga prin specificitate, nu prin `!important`. */
.js:not(.reduced) [data-reveal].is-revealed,.js:not(.reduced) [data-hero].is-revealed,
.js:not(.reduced) [data-band].is-revealed,.js:not(.reduced) [data-metric].is-revealed,
.js:not(.reduced) [data-moment-item].is-revealed,.js:not(.reduced) [data-player].is-revealed,
.js:not(.reduced) [data-panel-media].is-revealed,.js:not(.reduced) .panel-text>.is-revealed,
.js:not(.reduced) [data-stair].is-revealed,.js:not(.reduced) [data-term].is-revealed,
.js:not(.reduced) .frame.is-revealed,
.js:not(.reduced) .nav.is-revealed,.js:not(.reduced) .cover.is-revealed{opacity:1}
.js:not(.reduced) [data-stair-clip].is-revealed{clip-path:inset(0 0 0% 0)}
.js:not(.reduced) [data-celula].is-revealed .itl-celula__c00,
.js:not(.reduced) [data-celula].is-revealed .itl-celula__c10,
.js:not(.reduced) [data-celula].is-revealed .itl-celula__c01,
.js:not(.reduced) [data-celula].is-revealed .itl-celula__c11,
.js:not(.reduced) [data-celula].is-revealed .itl-celula__maner{opacity:1}

/* ---------- PERFORMANTA · HERO · un singur poster, un singur film ----------
   Posterul nu mai e o stare de exceptie pentru `reduced` / Save-Data: sta INTOTDEAUNA sub film,
   deci pagina are ceva de pictat din primul cadru, fara JS si fara sa astepte reteaua video.
   E si candidatul LCP, de aceea are `fetchpriority="high"` in markup. Filmul il acopera cand
   incepe sa ruleze. `<picture>` garanteaza EXACT o cerere de imagine. */
.hero-poster{display:block;position:absolute;inset:0;z-index:0;width:103.2%;max-width:none;height:103.2%;
  right:0;top:0;left:auto;bottom:auto;object-fit:cover;object-position:50% 40%}
.hero-video{z-index:1}
.hero-lockup-mask{z-index:2}
.hero-shade,.hero-overlay{z-index:3}
@media (max-width:767px){
  .hero-poster{width:103%;height:100%;left:-1.5%;right:auto;object-position:50% 30%}
}
/* Regulile vechi care ascundeau posterul, sau il aratau doar la miscare redusa, nu mai au obiect. */
.reduced .hero-poster--desktop,.save-data .hero-poster--desktop,
.reduced .hero-poster--mobile,.save-data .hero-poster--mobile{display:block}

/* ---------- D12 · DEMO VIDEO INLINE · fara popup ca flux normal ----------
   Coperta e starea initiala. La clic, coperta e inlocuita IN CARD de player sau, daca lipseste
   acordul video, de poarta de consimtamant - tot in card, niciodata intr-un popup. Iframe-ul
   YouTube se creeaza doar dupa acord si se distruge la inchidere, deci contractul „zero cerere
   catre YouTube inainte de consimtamant" ramane intact. `youtube-nocookie.com` nu se schimba. */
.drxm__item{position:relative}
.drxm__card[hidden]{display:none}
.drxm__inline{display:flex;flex-direction:column;width:307px;border:1px solid rgba(255,255,255,.36);
  border-radius:var(--r-sm);background:#0d0d0d;overflow:hidden}
.drxm__inline-cadru{position:relative;aspect-ratio:16/9;background:#000}
.drxm__inline-cadru iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.drxm__inline-bara{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line)}
.drxm__inline-titlu{flex:1;min-width:0;font-size:var(--t-micro-s);line-height:1.3;color:var(--fg-75);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drxm__inline-inchide{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;
  border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  transition:background-color .25s}
.drxm__inline-inchide:hover{background:rgba(255,255,255,.16)}
.drxm__inline-inchide:focus-visible{outline:2px solid #fff;outline-offset:3px}
.drxm__inline-inchide svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* Poarta de consimtamant, INLINE in card. Aceleasi cuvinte ca in poarta din viewer. */
.drxm__poarta{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:14px;background:#0b0b0b}
.drxm__poarta-titlu{margin:0;font-size:var(--t-micro);font-weight:600;line-height:1.3;color:#fff}
.drxm__poarta-corp{margin:0;font-size:var(--t-micro-s);line-height:1.45;color:var(--fg-60)}
.drxm__poarta-actiuni{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:3px}
.drxm__poarta-da{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--r-xs);
  background:#fff;color:#0a0a0a;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:background-color .25s}
.drxm__poarta-da:hover{background:#e9e9e9}
.drxm__poarta-da:focus-visible,.drxm__poarta-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.drxm__poarta-link{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;transition:border-color .25s}
.drxm__poarta-link:hover{border-color:var(--red)}
@media (max-width:767px){.drxm__inline{width:278px}}

/* ---------- M06 · BANDA DEMO IN MISCARE PE MOBIL ----------
   Pe mobil banda nu mai sta. Miscarea e o translatie continua a POZITIEI DE DERULARE, nu o
   animatie CSS peste o pista: asa degetul o poate trage oricand, nativ, fara scroll hijacking si
   fara salturi. `main.js` o opreste la prima atingere, la focus si cat timp ruleaza un video
   inline, si o reia dupa o pauza. La `prefers-reduced-motion` autoplay-ul nu porneste deloc, dar
   derularea manuala ramane - de aceea copia de bucla dispare doar acolo, nu si aici. */
@media (max-width:767px){
  .drxm__viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:none;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
  .drxm__viewport::-webkit-scrollbar{display:none}
  .drxm__track{animation:none;transform:none;width:max-content;padding-right:0}
  .drxm__item{scroll-snap-align:none}
  .drxm__item[aria-hidden="true"]{display:block}          /* copia de bucla e necesara miscarii */
  .drxm.is-manual .drxm__viewport{scroll-snap-type:x proximity}
  .drxm.is-manual .drxm__item{scroll-snap-align:start}
}
/* Miscare redusa: zero autoplay, zero copie de bucla, derulare manuala disponibila. */
html.reduced .drxm__item[aria-hidden="true"],
html.reduced .drxm__viewport .drxm__item[aria-hidden="true"]{display:none}
@media (prefers-reduced-motion:reduce){
  .drxm__item[aria-hidden="true"]{display:none}
  .drxm__viewport{scroll-snap-type:x proximity}
  .drxm__item{scroll-snap-align:start}
}
/* Tint-ul scrie CULOAREA, nu opacitatea, deci are nevoie de propria stare de repaus. Implicitul
   e alb; `data-tint="dark"` e scena pe fotografie luminoasa, unde textul final e negru. */
.js:not(.reduced) [data-tint].is-revealed,.js:not(.reduced) [data-moment-title].is-revealed{color:#fff}
.js:not(.reduced) [data-tint="dark"].is-revealed{color:#0a0a0a}

/* =====================================================================
   PERFORMANTA · INTRAREA HERO TRECE DIN GSAP IN CSS
   ---------------------------------------------------------------------
   Masurat pe pagina reala, mobil: LCP 3,4 s, din care „Render Delay" 2,97 s, cu Load Delay si
   Load Time ZERO. Nu era o problema de retea - elementul LCP e TEXT. Textul hero sta pe
   `opacity:0` pana cand porneste linia de timp GSAP, iar aceea nu poate porni inainte ca
   `gsap.min.js` (1148 ms de munca pe firul principal) si `main.js` (675 ms) sa fie parsate si
   executate. Adica primul ecran astepta motorul de motion ca sa se randeze.
   Mutarea in CSS schimba MECANISMUL, nu miscarea: aceleasi cinci intrari, aceleasi durate,
   aceleasi decalaje si aceleasi curbe ca in linia de timp de dinainte - `power3.out` e
   `cubic-bezier(.215,.61,.355,1)`, `expo.out` e `cubic-bezier(.19,1,.22,1)`, iar decalajul de
   0,15 s al liniei de timp e adunat in fiecare `animation-delay`. Ce se schimba e CAND poate
   incepe: la aplicarea foii de stil, nu dupa executia a doua scripturi.
   Acelasi tipar ca la accentul D03 din R13: „JS-ul nu deseneaza nimic, CSS-ul face miscarea".
   Fara JS sau la `prefers-reduced-motion` nu se anima nimic si totul e vizibil, ca pana acum.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js:not(.reduced) [data-hero="kicker"]{animation:itl-hero-intra-20 .6s cubic-bezier(.215,.61,.355,1) .15s both}
  .js:not(.reduced) [data-hero="line1"]{animation:itl-hero-intra-40 .8s cubic-bezier(.215,.61,.355,1) .25s both}
  /* line2 era singura care pornea de la `autoAlpha:1`: se descopera prin clip, nu prin opacitate. */
  .js:not(.reduced) [data-hero="line2"]{animation:itl-hero-clip 1.1s cubic-bezier(.19,1,.22,1) .4s both}
  .js:not(.reduced) [data-hero="support"]{animation:itl-hero-intra-12 .6s cubic-bezier(.215,.61,.355,1) .85s both}
  /* M3.4: in Hero ramane un singur CTA local („Vedeți programele"); intra la 1,1 s, ca inainte, pe toate latimile. */
  .js:not(.reduced) .hero-ctas--mobile .btn{animation:itl-hero-cta .6s cubic-bezier(.215,.61,.355,1) 1.1s both}
}
@keyframes itl-hero-intra-20{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes itl-hero-intra-40{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes itl-hero-intra-12{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes itl-hero-clip{from{opacity:1;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0% 0)}}
@keyframes itl-hero-cta{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- FAMILIA GENERICA DE REVEAL, IN CSS ----------
   Aceeasi miscare pe care o facea GSAP pentru cele 34 de elemente `[data-reveal]`: fade plus
   ridicare de 24px, 0,7 s, `power3.out` = `cubic-bezier(.215,.61,.355,1)`, cu decalajul alternativ
   de 0,08 s pe elementele pare. Declansarea o da un IntersectionObserver din `main.js`, la acelasi
   prag ca inainte (`top 85%` = `rootMargin` -15% jos).
   De ce s-a mutat: cele 34 de triggere ScrollTrigger masurau layoutul la creare si la fiecare
   refresh, iar Lantern leaga LCP-ul de momentul in care firul principal se elibereaza. Tranzitia
   de aici ruleaza pe compozitor si nu costa nimic pe firul principal. */
.js:not(.reduced) [data-reveal]{transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.215,.61,.355,1),transform .7s cubic-bezier(.215,.61,.355,1)}
.js:not(.reduced) [data-reveal]:nth-child(even){transition-delay:.08s}
.js:not(.reduced) [data-reveal].is-revealed{transform:none}

/* =====================================================================
   V11 · POST-DEPLOY CONSOLIDATION (MOD 1-13 · T1-T9 · formular V1 · A11y · SEO)
   Ordinea blocurilor urmeaza promptul final, nu ordinea din pagina. Tableta PORTRET inseamna
   768-1024px in orientare portret (inclusiv 1024x1366): nu e „mobil mai mare" si nici desktop.
   ===================================================================== */
:root{--red-text:#f4434b}   /* rosul de brand pentru TEXT MIC pe negru: #e11d26 da 4.22:1 pe #070707, sub pragul AA de 4.5:1; asta da 5.47:1 */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 9.5 · Focus Not Obscured: derularea catre elementul focusat lasa loc navului. PATCH B2B V1: bannerul de consimtamant
   e in flux, deci nu mai acopera nimic si nu mai cere rezerva proprie. */
html{scroll-padding-top:calc(var(--nav-h) + 12px);scroll-padding-bottom:84px}

/* ---------- MOD 1 · HERO · diagnosticul masurat ----------
   Hero-ul nu era intunecat de consimtamant. `PERFORMANTA · HERO` (R14) a pus `.hero-shade` si `.hero-overlay`
   pe `z-index:3`, iar `.hero-content` a ramas pe 2: umbra de fundal (34% negru + gradient) se picta PESTE
   titlu, kicker, paragraf si - pe tableta si mobil - peste CTA-uri. Pe desktop CTA-urile din colturi scapau
   doar fiindca erau tot pe 3, dar mai tarziu in DOM. Textul revine deasupra oricarui strat al media. */
.hero-content{z-index:4}

/* ---------- MOD 1 · BANNER DE CONSIMTAMANT · non-modal, lizibil, ierarhie clara ----------
   Zero blur (nici global, nici pe card), zero voal peste pagina. Desktop: stanga sus, sub nav (R14-08).
   Tableta portret: sus, centrat, lat (T1). Mobil: sus, pe latimea ecranului. */
.consent-card{background:#0c0c0c;-webkit-backdrop-filter:none;backdrop-filter:none;padding:20px 20px 16px;
  border-top:3px solid var(--red);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 80px rgba(0,0,0,.7)}
.consent-kicker{font-size:11px;color:#fff}
.consent-text{font-size:14px;line-height:1.5;color:rgba(255,255,255,.84);margin-top:8px}
.consent-text+.consent-text{margin-top:4px}
.consent-card .consent-actions{margin-top:16px;gap:10px}
.consent-card .consent-btn{min-height:46px;font-size:12px;padding:10px 14px}
.consent-card .consent-link{font-size:12px;margin-top:4px;padding:6px 0 2px;min-height:32px}
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .consent-toast{left:50%;right:auto;transform:translate(-50%,-12px)}
  .consent-toast.is-in{transform:translate(-50%,0)}
}
/* Mobil: cele doua actiuni principale stau pe acelasi rand. */
@media (max-width:767px){
  .consent-text{font-size:13px;line-height:1.45}
  .consent-card .consent-actions{margin-top:12px;gap:8px}
  .consent-card .consent-btn{flex:1 1 0;min-height:46px;font-size:11px;padding:8px 10px}
  .consent-card .consent-link{margin-top:2px}
}

/* ---------- 9.2 · DIALOGURI NATIVE ----------
   `<dialog>` deschis cu `showModal()` sta in stratul de sus si face restul paginii INERT. Stilurile vechi
   de overlay raman, doar se anuleaza regulile implicite ale agentului (latime maxima, rama, padding) si
   se garanteaza ca un dialog INCHIS nu se afiseaza, oricat de specifica ar fi regula lui de `display`. */
dialog.consent-prefs,dialog.doc-viewer,dialog.itlp-lightbox,dialog.brosura-viewer{
  max-width:none;max-height:none;width:100%;height:100%;margin:0;border:0;color:#fff;overflow:hidden}
dialog.doc-viewer,dialog.brosura-viewer{padding:0}
dialog.consent-prefs:not([open]),dialog.doc-viewer:not([open]),dialog.itlp-lightbox:not([open]),dialog.brosura-viewer:not([open]){display:none}
dialog::backdrop{background:transparent}
dialog.consent-prefs{overflow:auto}

/* ---------- MOD 5 · VIEWERUL DE BROSURA ---------- */
.brosura-viewer{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:rgba(0,0,0,.96);opacity:0;transition:opacity .3s ease-out}
.brosura-viewer.is-open{opacity:1}
.brosura-viewer__bar{display:flex;align-items:center;gap:16px;padding:12px var(--gutter);border-bottom:1px solid var(--line-soft);background:rgba(7,7,7,.92)}
.brosura-viewer__titlu{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;margin:0;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.brosura-viewer__titlu span{font-weight:500;font-size:11px;color:var(--fg-60)}
.brosura-viewer__titlu b{overflow-wrap:anywhere}
.brosura-viewer__dl{flex:0 0 auto}
.brosura-viewer__corp{flex:1;min-height:0;display:flex;background:#1a1a1a}
.brosura-viewer__corp[hidden]{display:none}
.brosura-viewer__corp iframe{display:block;flex:1;width:100%;height:100%;border:0;background:#fff}
.brosura-viewer__rezerva{flex:1;display:grid;place-items:center;padding:32px var(--gutter);text-align:center;font-size:var(--t-body-s);color:var(--fg-75)}
.brosura-viewer__rezerva[hidden]{display:none}
.brosura-viewer__rezerva p{max-width:40ch;margin:0}
.brosura-viewer__nota{margin:0;padding:12px var(--gutter);border-top:1px solid var(--line-soft);font-size:var(--t-micro-s);color:var(--fg-75);text-align:center}
.brosura-viewer__nota a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px}
.brosura-viewer__nota a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.reduced .brosura-viewer{transition:none;opacity:1}
@media (max-width:767px){
  .brosura-viewer__bar{flex-wrap:wrap;gap:12px;padding:10px 16px}
  .brosura-viewer__dl{order:3;width:100%;justify-content:center}
}
/* CTA-ul „Vezi broșura": aceeasi pozitie D05, alta actiune. */
.acc-brosura .btn-icon svg{stroke:#0a0a0a}

/* ---------- MOD 8 · DOVADA DOCUMENTARA ---------- */
.active-doc-emitent{margin:8px 0 0;font-size:var(--t-micro);line-height:1.45;color:#fff}
.active-doc-emitent span:first-child{color:var(--fg-60);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:600;margin-right:4px}
.active-doc-paper{cursor:zoom-in}
.doc-viewer__rezumat{width:min(900px,100%);margin:0 auto;color:var(--fg-75);font-size:var(--t-body-s);line-height:1.5}
.doc-viewer__rezumat p{margin:0}
.doc-viewer__rezumat p+p{margin-top:6px}
.doc-viewer__emitent{color:#fff;font-size:var(--t-micro)}
.doc-viewer__emitent span:first-child{color:var(--fg-60);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:600}
@media (min-width:768px){.doc-viewer__rezumat{font-size:17px}}
/* Selectorul de documente: aceeasi placuta pe mobil si pe tableta; pe desktop holul face treaba. */
.plate{width:100%;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:12px;min-height:56px;border-radius:var(--r-xs);background:#0e0e0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background-color .3s,box-shadow .3s}
.plate b{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.plate span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.plate.is-active{background:#171717;box-shadow:inset 0 0 0 2px var(--red)}
.plate:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:1023px),(max-width:1024px) and (orientation:portrait){
  /* T4 / T5: explicatie -> selector -> previzualizare -> deschidere integrala. Fara coridor 3D pe tactil in portret. */
  .proof-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
  .hall{display:none}
  .plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px}
  .active-doc{margin-top:16px}
}
/* Doua coloane in documentul activ NUMAI cand grila sectiunii e pe o singura coloana (tableta portret si
   768-1023). La 1024 landscape grila ramane desktop, coloana stanga are ~400px, iar 200px de hartie lasau
   rezumatului ~130px: un cuvant pe rand. Granita de 1024px, masurata in T9. */
@media (min-width:768px) and (max-width:1023px),(min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .active-doc{grid-template-columns:200px minmax(0,1fr);column-gap:28px;padding:24px}
}
@media (max-width:767px){
  .plates{grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
  .active-doc{margin-top:14px}
}

/* ---------- MOD 11-13 · ACT BREAKS CINEMATICE ----------
   Scena intreaga, pe toata latimea: fara card, rama, umbra de componenta, blur sau fundal alb.
   Desktop si peisaj: `min(100svh, 62.5vw)` = cat mai aproape de ecranul intreg, dar niciodata sub raportul
   16:10. Masurat pe cadrele filmelor: textul ars ocupa pana la ~6-94% din latime, deci taietura laterala a
   lui `cover` ramane sub 5% pe fiecare parte si nu atinge mesajele (1440x900: 5%; 1920x1080 si 1366x768: 0).
   Mobil (portret): o taietura laterala ar sterge textul ars, asa ca filmul sta pe TOATA latimea, intr-o scena
   neagra de 65svh, cu marginile de sus si de jos topite in negru - cinemascop, nu card. */
.cinema{position:relative;z-index:2;padding:0;background:#000;overflow:hidden}
.cinema-stage{position:relative;width:100%;height:100vh;height:min(100vh,62.5vw);height:min(100svh,62.5vw);overflow:hidden;background:#000}
.cinema-poster,.cinema-video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.cinema-video{z-index:1;background:transparent}
.cinema-play{position:absolute;z-index:2;left:var(--gutter);bottom:clamp(16px,3.2vh,32px);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;
  border-radius:999px;background:rgba(7,7,7,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);color:#fff;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:background-color .25s}
.cinema-play[hidden]{display:none}
.cinema-play svg{width:14px;height:14px;fill:#fff}
.cinema-play:hover{background:rgba(24,24,24,.9)}
.cinema-play:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:767px){
  .cinema-stage{height:65vh;height:65svh;min-height:300px}
  .cinema-poster,.cinema-video{top:50%;bottom:auto;height:auto;aspect-ratio:16/9;transform:translateY(-50%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
  .cinema-play{left:16px;bottom:16px}
}

/* ---------- 9.4 · PAUZA GLOBALA · M3.3: controlul a iesit (decizie ARHITECT); miscarea redusa a sistemului ramane calea de oprire ---------- */
@media (min-width:1024px) and (max-width:1199px){.nav-links{gap:14px;font-size:14px}.nav-sep{margin:0 2px}}
html.is-paused .marquee-track,html.is-paused .hub__pista,html.is-paused .drxm__track{animation-play-state:paused !important}
html.is-paused .itl-celula *{animation:none !important;opacity:1 !important}

/* ---------- MOD 3 + MOD 9 · ACCENTUL DE BRAND, NORMALIZAT ----------
   O singura gramatica pe toata pagina: celula activa D03 (celula plina + trei la 15% + maner).
   `--pas`    primul verb al fiecaruia dintre cei 8 pasi „Cum lucrăm".
   `--accent` cuvintele-cheie din titlurile de sectiune (fostele `.itl-rosu`); `display:inline`, deci o
              expresie de doua-trei cuvinte se rupe firesc la 320px sau la 400% zoom - fara derulaj.
   Niciuna nu primeste terenul de grila: grila ramane semnatura celor trei aparitii mari (Hero, „20 de
   programe", Hub). Textul ramane in culoarea titlului, deci contrastul e al titlului; celula plina sta
   sub primele litere, iar negru pe rosu da 4.4:1, peste pragul de 3:1 pentru text mare. */
.itl-celula--accent{display:inline;white-space:normal}
.itl-celula--luminos .itl-celula__maner{border-color:#fff}
.offer--light .itl-celula--luminos .itl-celula__maner{border-color:#fff}
.stair-title .clip{padding-left:.22em;margin-left:-.22em;padding-bottom:.62em;margin-bottom:-.62em}
.stair-title .itl-celula__teren{left:-.12em}
@media (max-width:767px){.itl-celula--pas .itl-celula__maner{width:10px;height:10px;left:calc(2 * var(--itl-mod-w) - 5px);top:calc(2 * var(--itl-mod-h) - 5px)}}

/* ---------- 9.7 · CONTRAST · rosul functional pe text mic ---------- */
.fam-idx,.acc-num,.stair-n b,.cover-fam,.drxm__cat,.steps b{color:var(--red-text)}
.offer--light .req{color:var(--red-deep)}

/* ---------- MOD 6 · MICROETICHETA MCT (numai persoanele cu atribuire documentara) ---------- */
.card-mct{position:absolute;left:8%;top:calc(6.5% + 28px);z-index:3;max-width:74%;padding:4px 7px;border-radius:3px;
  background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font-size:11px;font-weight:600;letter-spacing:.06em;line-height:1.25;text-transform:uppercase;color:#fff}
@media (max-width:1279px){.card-mct{font-size:10px;top:calc(6.5% + 24px)}}
@media (max-width:767px){.card-mct{left:9%;top:calc(7% + 16px);max-width:80%;padding:2px 4px;font-size:8px;letter-spacing:.02em}}

/* ---------- MOD 7 · CUM LIVRAM · fara planta, trainerul spre dreapta, blur mai mic ----------
   Fotografia `_v11` e deja taiata inainte de planta; ancorarea la dreapta tine trainerul la marginea
   dreapta a scenei la orice raport de aspect, dincolo de coloana cu termenii. Blurul scade la ~1px, iar
   `scale` doar acopera marginile pe care blurul le-ar lasa transparente. Zona de lumina de sub text ramane. */
.delivery-bg img{object-position:100% 44%;filter:blur(1.1px);transform:scale(1.02);transform-origin:100% 50%}
@media (max-width:1023px){.delivery-bg img{object-position:100% 40%;filter:blur(.9px)}}
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .delivery-bg::before{background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 40%,rgba(255,255,255,.55) 70%,rgba(255,255,255,.34) 100%)}
}
@media (max-width:767px){.delivery-bg img{object-position:100% 36%;filter:blur(.7px)}}

/* ---------- MOD 10 · „Noi ne ocupăm de tot" din subsol si familia de tint ----------
   Subsolul nu mai are tint: e alb din prima pictare. Restul familiei trece pe CSS + IntersectionObserver
   (acelasi `is-revealed` ca reveal-ul generic), nu pe un tween GSAP care lasa culoarea INLINE: un
   `ScrollTrigger.refresh()` dupa `once` intorcea tween-ul la gri, iar inline bate orice clasa. */
.js:not(.reduced) [data-tint]{transition:color .9s cubic-bezier(.215,.61,.355,1)}
.js:not(.reduced) [data-tint="dark"]:not(.is-revealed){color:rgba(10,10,10,.34)}
.footer-word{color:#fff}

/* ---------- FORMULAR V1 ---------- */
.field[hidden]{display:none}
.thanks-canal{display:flex;flex-wrap:wrap;gap:4px 12px;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.thanks-canal[hidden]{display:none}
.thanks-canal dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-60);align-self:center}
.thanks-canal dd{margin:0;font-size:17px;font-weight:600;color:#fff;overflow-wrap:anywhere}
.offer--light .thanks-canal{border-top-color:rgba(0,0,0,.12)}
.offer--light .thanks-canal dt{color:#5c5c5c}
.offer--light .thanks-canal dd{color:#0a0a0a}
.offer--light .textarea::placeholder{color:#6b6b6b}

/* ---------- T2 · HUB centrat pe tableta portret ---------- */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .hub__compo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"eyebrow" "titlu" "portret" "lede" "semn";text-align:center;justify-items:center}
  .hub__eyebrow{justify-self:center}
  .hub__br{display:none}
  .hub__headline{text-align:center;text-wrap:balance;max-width:22ch}
  .hub__portret{align-self:auto;margin:clamp(28px,4vw,44px) auto 0;width:min(460px,64%)}
  .hub__lede{text-align:center;max-width:52ch;margin:clamp(28px,4vw,40px) auto 0}
  .hub__semn{text-align:center;margin-top:clamp(32px,5vw,52px)}
  .hub__autor{margin:clamp(22px,3vw,32px) auto 0;align-items:center;width:max-content;min-width:200px}
}

/* ---------- T3 · Biblioteca Dr.Excel centrata pe tableta portret ---------- */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .panel--drexcel{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .panel--drexcel .panel-media{justify-self:center;width:100%;max-width:760px}
  .panel--drexcel .panel-text{text-align:center;justify-self:center;width:100%}
  .panel--drexcel .panel-lead,.panel--drexcel .panel-sub{margin-left:auto;margin-right:auto;max-width:54ch}
  .panel--drexcel .metrics-row--inline{max-width:560px;margin-left:auto;margin-right:auto}
  .panel--drexcel .metric--sm{text-align:center;padding:0 16px}
  .panel--drexcel .metric--sm+.metric--sm{padding-left:16px}
  .panel--drexcel .cred-line--left{text-align:center;margin-left:auto;margin-right:auto}
  .panel--drexcel .panel-cta{width:auto;max-width:460px;justify-content:center}
}

/* ---------- T6 · FORMULAR pe tableta portret ---------- */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .offer-grid{grid-template-columns:minmax(0,1fr);row-gap:40px;justify-items:center}
  .offer-intro{text-align:center;max-width:640px;width:100%}
  .offer-intro .section-title--left{text-align:center}
  .offer-intro .receive{text-align:left;max-width:520px;margin-left:auto;margin-right:auto}
  .form,.thanks{width:100%;max-width:640px}
}

/* ---------- T7 · CUM LUCRAM · acordeonul mobil se extinde pe tableta portret ----------
   Masurat la 1024x1366: in grila desktop coloana titlului coboara la ~120px pe treapta a 8-a. Aceleasi
   reguli ca pe mobil (M04), doar marite pentru tableta. Desktopul nu se atinge. */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .mech{padding-left:var(--gutter);padding-right:var(--gutter)}
  .stairs{max-width:760px;margin-left:auto;margin-right:auto}
  .stair{grid-template-columns:1fr;row-gap:6px;padding:0;border-top:1px solid var(--line-soft)}
  .stair-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:16px;width:100%;padding:20px 0;text-align:left;color:inherit}
  .stair-btn .stair-n{padding:0;margin:0;flex-direction:row}
  .stair-btn .stair-title{font-size:26px;line-height:1.12;letter-spacing:-.015em;min-width:0}
  .stair-btn .clip{clip-path:none !important;padding:0;margin:0}
  .stair-chev{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease-out}
  .stair.is-open .stair-chev{transform:rotate(180deg)}
  .stair-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .stair[data-stair-acc]{display:block}
  .stair[data-stair-acc] .stair-body{padding:0 0 22px;margin:0;max-width:60ch;font-size:var(--t-body-s)}
  .stair[data-stair-acc] .stair-body[hidden]{display:none}
  .stair-btn .stair-tag{display:none}
}

/* ---------- 9.6 · REFLOW la 320 CSS px (400% zoom la 1280) ---------- */
@media (max-width:359px){
  .nav{gap:10px}
  .nav-logo img{height:24px}
  .consent-card .consent-btn{flex:1 1 100%}
}
/* 9.7 · starea de succes pe scena LIGHT: corpul era `--fg-75` (alb), deci 1.07:1 pe fundalul formularului. */
.offer--light .thanks-body{color:#333}

/* V11 · T9 / 9.1 reflow: la 320px butonul „Deschideți documentul integral" (nowrap) impingea coloana
   `1fr` a documentului activ la 358px. Coloana nu mai are minim de continut, iar eticheta se rupe pe doua randuri. */
@media (max-width:767px){
  .active-doc{grid-template-columns:minmax(0,1fr)}
  .active-doc-cta{max-width:100%;height:auto;min-height:var(--btn-h);white-space:normal}
  .active-doc-cta .btn-label{padding:10px 16px 10px 12px;line-height:1.35}
}

/* V11 · MOD 1 · desktop scund: la viewportul REAL al unui laptop 1366x768 (~1366x657 sub bara browserului)
   cardul din stanga ascundea „CREȘTE" din H1. Singura zona libera a Hero-ului la aceste inaltimi e banda
   de sub meniu, deasupra kickerului: acolo bannerul devine o banda orizontala, cu aceeasi ierarhie,
   aceleasi trei actiuni si aceleasi tinte de 44px. Tot non-modal: pagina ramane lizibila si operabila. */
/* D7: banda se aplica pe TOT desktopul (si 1024 landscape).
   PATCH B2B V1: banda nu mai sta SUB meniu, peste Hero, ci DEASUPRA lui, in flux (blocul de la finalul foii). Ramane
   logica Microsoft: explicatia in stanga (kicker + text, un singur paragraf curgator), cele trei actiuni in dreapta. */
@media (min-width:1025px),(min-width:1024px) and (orientation:landscape){
  .consent-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:center}
  .consent-card .consent-text{font-size:13px;line-height:1.42}
  .consent-card .consent-actions{flex-wrap:nowrap;margin:0;gap:8px}
  .consent-card .consent-btn{flex:0 0 auto;width:170px;min-height:44px;padding:8px 10px}
  .consent-card .consent-link{flex:0 0 auto;margin:0 0 0 8px;padding:4px 0 2px;min-height:28px}
}
@media (min-width:1024px) and (max-width:1320px) and (orientation:landscape){
  .consent-card{column-gap:20px}
  .consent-card .consent-text{font-size:12.5px}
  .consent-card .consent-btn{width:156px}
  .consent-card .consent-link{margin-left:4px}
}

/* V11 · MOD 8 / T9 · documentul activ in coloana stanga a grilei desktop (>=1024 landscape).
   Rezumatul factual e acum de ~330 de caractere si ramane in registrul R12-03 (24px); in coloana de 318px
   de langa hartie devenea un turn de 657px, iar butonul `nowrap` iesea din card peste coridor (+92px la
   1024, +12px la 1280+). Hartia si antetul (titlu, an, emitent) stau pe primul rand, rezumatul si butonul
   ocupa toata latimea cardului. `display:contents` doar muta cutiile in grila; ordinea DOM ramane aceeasi. */
@media (min-width:1025px),(min-width:1024px) and (orientation:landscape){
  .active-doc{grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto;column-gap:20px;row-gap:0;align-items:start}
  .active-doc-paper{grid-column:1;grid-row:1 / span 2}
  .active-doc-text{display:contents}
  .active-doc-title{grid-column:2;grid-row:1;align-self:end}
  .active-doc-emitent{grid-column:2;grid-row:2;align-self:start}
  .active-doc-desc{grid-column:1 / -1;margin-top:18px}
  .active-doc-cta{grid-column:1 / -1;justify-self:start;max-width:100%}
}

/* V11 · T5 · coridorul 3D NUMAI unde testul tactil e clar bun: nicaieri pe un dispozitiv tactil.
   Masurat pe landscape (1024x768, 1180x820, 1366x1024, cu touch): la atingere, ajustarea tintei tactile
   in scena 3D alege peretele holului in locul ramei, iar documentul nu se deschide (cu mouse-ul, in
   acelasi punct, se deschide). Pe tactil, in orice orientare: explicatie -> selector -> previzualizare ->
   deschidere integrala, ca pe tableta portret (T4). */
@media (hover:none) and (pointer:coarse) and (min-width:1024px){
  .proof-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
  .hall{display:none}
  .plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px}
  .active-doc{grid-template-columns:200px minmax(0,1fr);grid-template-rows:none;column-gap:28px;row-gap:0;align-items:center;padding:24px;margin-top:16px}
  .active-doc-paper{grid-row:auto}
  .active-doc-text{display:block}
  .active-doc-desc{margin-top:10px}
}
/* R12-03 (`.section-sub{margin-left:auto}` de la 768px) batea modificatorul `--left` la aceeasi specificitate:
   pe o coloana lata subtitlul se centra sub un titlu aliniat la stanga. Modificatorul castiga acum explicit. */
.section-sub.section-sub--left{margin-left:0}

/* ---------- D5 · CUM LIVRAM (review desktop) ----------
   Selectorul de format inlocuieste lista 01-04 cu patru randuri egale. Ierarhie: FORMAT dominant (trei
   optiuni), LIMBA si INFRASTRUCTURA secundare, la ~40% din marimea formatelor.
   Sub desktop (mobil, tableta portret) scena ramane STIVUITA, pe lumina, cu text negru, ca inainte. */
.livrare{border-top:1px solid rgba(0,0,0,.16)}
.livrare__eticheta{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#4a4a4a}
.livrare__eticheta::before{content:"";flex:0 0 auto;width:7px;height:7px;background:var(--red)}
.livrare__formate{list-style:none;margin:0;padding:0}
.livrare__format{padding:18px 0;border-bottom:1px solid rgba(0,0,0,.16);font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.03em;line-height:1;font-size:clamp(28px,4.6vw,48px);color:#0a0a0a}
.livrare__secundar{display:grid;gap:10px;margin:18px 0 0}
.livrare__fapt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.livrare__fapt dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#4a4a4a}
.livrare__fapt dd{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#1d1d1d}
@media (max-width:767px){.livrare__format{font-size:28px;padding:16px 0}}
/* Tableta portret pana la 1024 inclusiv: o singura coloana, ca la 768-1023 (granita de 1024 e portret aici). */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .delivery-grid{grid-template-columns:minmax(0,1fr);row-gap:48px}
}

/* DESKTOP: ~42% copy / ~58% fotografie + selector. Voalul alb sta NUMAI sub coloana de text; dreapta e
   fotografia. Selectorul e un panou intunecat jos in coloana dreapta, cu marginea dreapta la <= 80% din
   latime: trainerul (de la ~81% la ~96% din latime, cu foaia in mana) ramane intreg in cadru. */
@media (min-width:1025px),(min-width:1024px) and (orientation:landscape){
  .delivery{display:flex;flex-direction:column;min-height:clamp(720px,92vh,900px);padding:clamp(88px,11vh,128px) var(--gutter) clamp(48px,7vh,80px)}
  .delivery-grid{flex:1;grid-template-columns:minmax(0,42fr) minmax(0,58fr);column-gap:clamp(32px,4vw,64px);align-items:center;width:100%}
  .delivery-copy{align-self:center}
  .delivery-body{max-width:40ch}
  .delivery-bg::before{background:linear-gradient(90deg,
    rgba(255,255,255,.94) 0, rgba(255,255,255,.88) calc(50% - 160px), rgba(255,255,255,.5) calc(50% - 40px), rgba(255,255,255,0) calc(50% + 80px))}
}

/* ---------- D7 · HERO DESKTOP: un singur grup, aliniat la stanga ----------
   Kicker -> H1 -> subtext -> CTA secundar (M3.4: CTA-ul rosu si microcopy-ul au iesit). Grupul sta jos-stanga, cu
   latime controlata: trainerul din film ramane liber in jumatatea dreapta, iar banda de consimtamant de
   sub meniu (MOD 1) nu ajunge peste H1. H1 pe patru randuri (`.hero-rand` bloc numai pe desktop), cu
   interlinie >= 1,05: Ș si Î nu se mai ating intre randuri. Accentul ramane UNUL: celula pe „productivitatea". */
@media (min-width:1024px){
  .hero-content{top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;
    padding:calc(var(--nav-h) + 24px) var(--gutter) clamp(40px,7vh,84px) clamp(40px,6.7vw,128px)}
  .hero-kicker{margin-bottom:clamp(12px,2.2vh,22px)}
  .hero-title{margin:0;max-width:none;text-align:left;line-height:1.05;font-size:clamp(38px,min(4.15vw,6.6vh),84px)}
  .hero .hero-rand{display:block}
  .hero-line--1{text-wrap:wrap}
  .hero-support{margin:clamp(14px,2.4vh,26px) 0 0;max-width:min(56vw,740px);text-align:left}
  .hero-ctas--mobile{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,3.2vh,34px)}
  /* lizibilitate pentru grupul din stanga: o umbra laterala locala, peste umbra verticala existenta.
     Pe `.hero-shade::before`, NU pe `.hero-lockup-mask` (aceea ascunde logo-ul ars in film, stanga sus). */
  .hero-shade::before{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.24) 38%,rgba(0,0,0,0) 62%)}
}
@media (min-width:1024px) and (max-width:1279px){.hero-support{max-width:min(56vw,740px)}}

/* ---------- D7 · „DIN 1996." la „Noi ne ocupăm de tot." ----------
   Ancora de longevitate sta o singura data, sub declaratia monumentala, nu langa logo. */
.mech-din{display:block;margin-top:.34em;font-size:.3em;letter-spacing:.12em;line-height:1}


/* ---------- D8 · CUM LIVRAM: fotografia noua + art direction ----------
   Fara blur pe fotografie (MOD 7 purta `blur(1.1px)` pentru imaginea veche). Lizibilitatea vine dintr-un
   voal LOCAL sub coloana de text, care se termina inainte de trainer. */
.delivery-bg img{filter:none;transform:none}
@media (max-width:1023px),(max-width:1024px) and (orientation:portrait){.delivery-bg img{object-position:32% 40%}}
@media (max-width:767px){.delivery-bg img{object-position:50% 38%}}
/* DESKTOP: fotografia (1382x922, trainerul la ~27-36% din latimea ei, fata la ~30%) se asaza dupa INALTIMEA
   scenei, astfel incat fata trainerului sa cada la ~50% din latime, chiar langa coloana de text (~42%).
   `h = max(100cqh, 48cqw)` garanteaza ca fotografia acopera si marginea dreapta. In stanga ei ramane un fond
   cald, iar marginea stanga a fotografiei (planta) se topeste in el; peste ambele sta voalul de sub text. */
@media (min-width:1025px),(min-width:1024px) and (orientation:landscape){
  .delivery-bg{container-type:size;background:#efe9e2}
  .delivery-bg picture{position:absolute;inset:0;width:auto;height:auto}
  .delivery-bg img{--h:max(100cqh,48cqw);position:absolute;max-width:none;object-fit:cover;opacity:1;
    height:var(--h);width:calc(var(--h) * 1.4989);left:calc(50cqw - var(--h) * .45);top:calc((100cqh - var(--h)) / 2);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%);mask-image:linear-gradient(90deg,transparent 0,#000 10%)}
  .delivery-bg::before{background:linear-gradient(90deg,
    rgba(255,255,255,.95) 0, rgba(255,255,255,.9) calc(50% - 220px), rgba(255,255,255,.6) calc(50% - 120px), rgba(255,255,255,0) calc(50% - 50px))}
}

/* =====================================================================
   REPAIR TEHNIC V11 · pe auditul `c1725bf` (F-004 … F-060) + modificarile locale aprobate de ARHITECT.
   COPY FREEZE: nimic de aici nu schimba text. Singurul redesign local e scena FORMAT („Cum livrăm").
   ===================================================================== */

/* ---------- F-013 · DIACRITICE · interlinia titlurilor majuscule ----------
   Masurat pe pixeli (fiecare rand randat izolat, se compara marginile de cerneala): la .95 virgula lui „Ș"
   din CREȘTEM intra in „T"-ul de dedesubt (citit „Ț"), caciula lui „Î" atinge „E"-ul de deasupra, iar virgula
   din „ȘI" cade pe „BI" (citit „BÎ"): -4px la 360-430, 0px la 1440. Fontul si marimea raman. */
.hero-title{line-height:1.14}
.mech-open{line-height:1.04}                          /* breve-ul din „OCUPĂM" urca in „NE": -2…-10px */
.footer-word{line-height:1.05}                        /* aceeasi fraza, acelasi breve, in subsol */
/* Aceeasi clasa de defect in titlurile de sectiune (virgula din „EXPERȚII" / „ÎNVĂȚARE" / „SPUNEȚI-NE" in randul
   urmator, pana la -14px), in scara „Cum lucrăm" pe desktop (-9px) si in titlul Hub (-10px). */
.section-title{line-height:1.2}                      /* virgula (Ș/Ț) + breve/caciula (Ă/Â/Î) una sub alta cer ~.42em */
@media (max-width:1023px){.section-title{line-height:1.32}}   /* pe coloana ingusta „ÎNVĂȚARE" ajunge exact peste „RĂMÂNE" */
.stair-title{line-height:1.14}
@media (max-width:767px){.stair-btn .stair-title{line-height:1.42}}
.hub__headline{line-height:1.14}
.prog-title{line-height:1.12}

/* ---------- ACCENTUL D03 PE UN TITLU CU MAI MULTE RANDURI ----------
   Cand cuvantul cu accent NU e pe ultimul rand al titlului, randul al doilea al intervalului si manerul
   coborau peste randul urmator de text. `main.js` (aseazaCelule) marcheaza exact aceste cazuri, la orice
   latime, si scrie inaltimea randului al doilea pana in mijlocul spatiului dintre randuri; manerul ramane
   in coltul dreapta-jos al intervalului, deci in acel spatiu, la 14px sau la 10px cand spatiul e mic. */
.itl-celula.is-rand-urmator .itl-celula__c01,.itl-celula.is-rand-urmator .itl-celula__c11{height:var(--itl-rand2)}
.itl-celula.is-rand-urmator .itl-celula__maner{width:var(--itl-maner);height:var(--itl-maner);
  left:calc(2 * var(--itl-mod-w) - var(--itl-maner) / 2);top:calc(var(--itl-mod-h) + var(--itl-rand2) - var(--itl-maner) / 2)}

/* ---------- ACCENT D03 IN HERO · manerul nu mai sta pe glife ----------
   In H1 cuvantul cu accent nu e singur pe rand: randul al doilea al intervalului activ (celulele c01/c11,
   translucide) si manerul cadeau peste randul urmator de text - manerul acoperea „C"-ul din ECHIPELOR pe mobil
   si „HI" pe desktop. Randul al doilea se scurteaza pana in spatiul dintre randuri, iar manerul ramane in
   coltul dreapta-jos al intervalului, deci exact in acel spatiu. Doar in Hero; restul paginii nu se atinge.
   1.07em = mijlocul spatiului liber dintre linia de baza a randului cu accent si majusculele randului
   urmator, la interlinia 1.14 (masurat pe Sora la 34-84px). */
.hero-title .itl-celula{--itl-rand2:calc(1.07em + .05em - var(--itl-mod-h))}
.hero-title .itl-celula__c01,.hero-title .itl-celula__c11{height:var(--itl-rand2)}
.hero-title .itl-celula__maner{top:calc(var(--itl-mod-h) + var(--itl-rand2) - 7px)}
/* Pe mobil spatiul dintre randuri are ~13px: manerul de 14px nu incape fara sa atinga glifele. Trece la 10px
   (patrat rosu 6px + inelul de 2px), exact ca manerul pasilor „Cum lucrăm" pe mobil (MOD 3 + MOD 9). */
@media (max-width:767px){
  .hero-title .itl-celula__maner{width:10px;height:10px;left:calc(2 * var(--itl-mod-w) - 5px);top:calc(var(--itl-mod-h) + var(--itl-rand2) - 5px)}
}

/* ---------- EYEBROW HERO · cinci stele, dedesubt doua randuri (copy aprobat) ---------- */
.hero-kicker__rand{display:block}
.hero-stars{margin-right:0}
@media (min-width:1024px){
  .hero-kicker{flex-direction:column;align-items:flex-start;gap:10px}
}
/* Laptop scund (<=700px inaltime utila): eyebrow-ul pe doua randuri adauga ~45px grupului Hero, iar banda de
   consimtamant de sub meniu ajungea la primul rand al H1-ului (1280x630). Acelasi continut, spatiere mai stransa. */
@media (min-width:1024px) and (max-height:700px){
  .hero-kicker{gap:6px}
  .hero-kicker__text{line-height:1.3}
  /* grupul e ancorat JOS: interlinia pentru diacritice (+~15px pe H1) il urcase sub banda de sub meniu */
  .hero-content{padding-bottom:32px}
}

/* ---------- „Experiență acumulată încă din 1996." · aceeasi eticheta, rand curat ----------
   Textul a crescut de la 9 la 35 de caractere. La vechiul `.3em` (47px la 1440, cu tracking de .12em) ar fi
   rupt pe doua randuri cu interlinie 1 - exact coliziunea de diacritice de mai sus. Registrul ramane
   (majuscule, tracking larg, alb, sub declaratia monumentala); marimea scade cat sa stea pe un rand pe
   desktop si tableta, iar pe mobil se rupe echilibrat, cu aer intre randuri. */
.mech-din{font-size:max(15px,.2em);letter-spacing:.1em;line-height:1.55;margin-top:.8em;text-wrap:balance}

/* ---------- 20 DE PROGRAME · ierarhia tipografica ceruta ----------
   Titlurile de familie (EXCEL / ANALIZA DATELOR / POWER BI / MICROSOFT 365 / SQL) urca in registrul
   titlului „20 de programe sunt punctul de plecare" (`.prog-title`), deci descrierea trece SUB titlu -
   alaturi, la 52px, i-ar fi ramas o coloana de ~250px. Numele programelor din acordeon urca la marimea
   descrierii de familie (`--t-body-s`). Indexul „01", chevronul si separatoarele raman cum sunt. */
.fam-name{font-size:clamp(30px,2.6vw,52px);line-height:1.02}
.fam-acc .acc-label{font-size:var(--t-body-s);line-height:1.25;overflow-wrap:anywhere}
/* indexul are latime fixa, cu cifre tabulare: numele incep pe aceeasi verticala („01" era mai ingust decat „02") */
.fam-acc .acc-num{min-width:2.3em;font-variant-numeric:tabular-nums}

/* ---------- SCENA FORMAT · redesign local autorizat ----------
   Titlul mare si paragraful repetitiv au iesit. Boxul de format (acelasi continut) e elementul principal, in
   stanga; dedesubt, doar fraza Azure. Fotografia ramane si ramane importanta: pe desktop ocupa dreapta
   scenei, pe tableta si mobil devine imaginea scenei, deasupra boxului, nu un fundal spalat de voal. */
.delivery-copy .kicker{margin-bottom:clamp(18px,2vw,26px)}
.livrare{border-top:0;border-radius:var(--r-sm);background:rgba(9,9,9,.92);color:#fff;container-type:inline-size;
  box-shadow:inset 0 3px 0 var(--red),0 28px 64px rgba(0,0,0,.22)}
.livrare__eticheta{margin:0 0 6px;color:rgba(255,255,255,.66)}
.livrare__format{border-bottom-color:rgba(255,255,255,.14);color:#fff;line-height:1.04}
.livrare__fapt dt{color:rgba(255,255,255,.6)}
.livrare__fapt dd{color:rgba(255,255,255,.9)}
.delivery .delivery-body{margin-top:clamp(20px,2.2vw,28px);color:#1d1d1d}
@media (min-width:1025px),(min-width:1024px) and (orientation:landscape){
  .delivery-copy{display:flex;flex-direction:column;align-items:flex-start}
  .livrare{width:100%;max-width:540px;margin:0;padding:clamp(24px,2.2vw,34px) clamp(24px,2.5vw,38px) clamp(22px,2vw,30px)}
  .livrare__format{padding:clamp(14px,1.3vw,18px) 0;font-size:clamp(26px,2.5vw,42px);font-size:min(42px,10.6cqi)}
  .livrare__secundar{margin:18px 0 0;gap:8px}
  .livrare__fapt dd{font-size:12px}
  .delivery .delivery-body{max-width:30ch}
}
@media (max-width:1023px),(min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .delivery{padding-top:0;background:#efe9e2}
  .delivery-bg{position:relative;inset:auto;z-index:0;margin:0 calc(-1 * var(--gutter)) clamp(28px,6vw,48px);aspect-ratio:16/9;overflow:hidden}
  .delivery-bg img{object-position:30% 42%}
  .delivery-bg::before{background:linear-gradient(180deg,rgba(239,233,226,0) 72%,#efe9e2 100%)}
  .delivery-bg::after{display:none}
  .delivery-grid{row-gap:0}
  .delivery-copy{max-width:600px}
  .livrare{padding:22px 20px 18px}
  .livrare__format{padding:14px 0;font-size:clamp(22px,10.5cqi,38px)}
  .livrare__eticheta{margin:0 0 4px}
}
@media (max-width:767px){
  .delivery-bg{aspect-ratio:6/5}
  .delivery-bg img{object-position:50% 58%}
}

/* ---------- F-025 · CINEMA PE MOBIL · fara spatiu negru mort ----------
   Scena avea 65svh pentru un film 16:9 pe toata latimea: ~60% din ea era negru. Fara materiale 9:16 noi, scena
   ia exact raportul filmului - intreg, fara crop, mesajul ars complet vizibil - cu marginile topite discret. */
@media (max-width:767px){
  .cinema-stage{height:auto;min-height:0;aspect-ratio:16/9}
  .cinema-poster,.cinema-video{top:0;bottom:0;height:100%;aspect-ratio:auto;transform:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
}

/* ---------- F-015 · CINE SUNTEM PE MOBIL · filmul vertical in cutia lui ----------
   Comentariul R11 spunea ca override-ul 16:9 a fost RETRAS sub 768px, dar regula nu avea media query: pe
   mobil filmul 9:16 statea intr-o cutie 16:9 cu `cover`, deci se vedea ~32% din cadru. Cutia 9:16 revine
   (contract B4) si nu depaseste inaltimea ecranului, ca filmul sa se vada intreg. */
@media (max-width:767px){
  .uni-film .player{aspect-ratio:9/16;width:min(100%,calc((100svh - var(--nav-h) - 40px) * 9 / 16))}
}

/* ---------- F-011 · tinta unei ancore primeste focus programatic, fara inel pe o sectiune intreaga ---------- */
[data-focus-tinta]:focus{outline:none}

/* ---------- F-047 · Back-to-top nu mai acopera textul juridic din subsol pe mobil ---------- */
@media (max-width:767px){.footer{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}}

/* ---------- F-045 · contrast: durata „2:14" pe butonul alb (4,43:1 -> 6,2:1) ---------- */
.panel-cta .btn-dur{color:rgba(0,0,0,.64)}

/* ---------- F-020 · tinta tactila a barei de progres: 3px vizibili, 25px activi ---------- */
.player-progress::before{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px}

/* ---------- F-060 · viewerul de brosura: fundal opac, pagina din spate nu mai transpare sub nota ---------- */
.brosura-viewer{background:#070707}

/* ---------- F-009 (peisaj mobil, zoom 150-200%, reflow) · CTA-urile Hero trebuie sa poata fi vazute ----------
   Hero-ul e `sticky` cu `min-height:560px`. Pe o fereastra mai joasa de atat (peisaj pe telefon, zoom 200%), partea
   lui de jos - exact CTA-urile - nu ajungea NICIODATA pe ecran: Hero-ul ramanea lipit sus, iar scena Trust urca peste
   el. Masurat: la 844x390 si la zoom 200% (720x450) al doilea CTA nu era vizibil la nicio pozitie de derulare.
   Pe aceste inaltimi Hero-ul derula normal; efectul de acoperire ramane neschimbat pe orice fereastra de 560px+. */
@media (max-height:559px){.hero{position:relative}}

/* ---------- ANDROID / MOBIL · paginile brosurii, in pagina ----------
   Acelasi tipar ca viewerul de documente: coloana de pagini pe fundal intunecat, derulare nativa in dialog,
   fiecare pagina la latimea ecranului (max 900px). Pe desktop cu viewer PDF ramane iframe-ul. */
.brosura-viewer__corp.is-pagini{flex-direction:column;align-items:center;gap:16px;overflow:auto;padding:16px var(--gutter) 24px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#070707}
.brosura-viewer__corp.is-pagini img{display:block;width:min(900px,100%);height:auto;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.7)}
@media (max-width:767px){.brosura-viewer__corp.is-pagini{padding:10px 10px 18px;gap:10px}}

/* =====================================================================
   V3 · FORMULAR V2 · HERO DINAMIC · HERO DESKTOP CINEMATIC · RESURSE EXTERNE · CINE SUNTEM
   COPY FREEZE: textele vin din promptul V3, neschimbate. Reparatiile anterioare (diacritice, safe-area,
   bannerul fata de H1/CTA, Hero relativ sub 560px inaltime, reduced motion) raman active: blocul asta
   nu le suprascrie, doar compozitia desktop a Hero-ului si scenele noi.
   ===================================================================== */

/* ---------- M3.1 · NAV · trei zone, navigatia interna centrata in VIEWPORT ----------
   STANGA: marca IT Learning, „Comunitatea IT Learning". CENTRU: navigatia interna. DREAPTA (M3.4, fara CTA):
   „Pachetul Video", logo-ul Dr.Excel (fisierul real din `assets/drexcel/`). Grila `1fr auto 1fr` pe bara: coloanele
   laterale sunt egale, deci centrul e centrat in viewport, nu in spatiul ramas intre stanga si dreapta.
   Linkurile de ecosistem au registrul meniului (aceeasi marime, greutate, majuscule), nu de micro-link.
   Masurat, nu presupus: la 16px, cu toate etichetele pe un rand, bara are nevoie de ~1700px; sub 1800px etichetele de
   ecosistem trec pe doua randuri in aceeasi inaltime a barei, iar la 1280-1439 registrul coboara la 14px (peste
   pragul R12-01 de 13px). Sub 1280px bara nu le incape pe toate cu centrul in viewport: ramane hamburgerul, cu
   ecosistemul la finalul meniului. */
:root{--nav-fs:16px;--nav-gap:26px;--nav-logo-h:40px;--nav-drx-h:18px}
.nav-st,.nav-dr{display:flex;align-items:center;min-width:0}
.nav-eco{font-size:var(--nav-fs);font-weight:600;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.nav-eco{display:inline-flex;flex-wrap:wrap;column-gap:.3em;line-height:1.15;color:rgba(255,255,255,.82);transition:color .25s}
.nav-eco:hover,.nav-eco:focus-visible{color:#fff}
.nav-eco__r{display:inline-block}
.nav-eco:focus-visible,.nav-drx:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}
.nav-drx{display:inline-flex;align-items:center;flex:0 0 auto;transition:opacity .25s}
.nav-drx img{height:var(--nav-drx-h);width:auto;max-width:none}
.nav-drx:hover{opacity:.85}
.nav-ext__ico{width:9px;height:9px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
@media (min-width:1280px){
  .nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:16px}
  .nav-st{justify-self:start;gap:18px}
  .nav-links{justify-self:center;font-size:var(--nav-fs);gap:var(--nav-gap)}
  .nav-links a{white-space:nowrap}
  .nav-dr{justify-self:end;gap:18px}
  .nav-dr .nav-drx{margin-left:-6px}
  .nav-logo img{height:var(--nav-logo-h)}
  .nav-burger{display:none}
}
@media (min-width:1280px) and (max-width:1799px){
  :root{--nav-fs:16px;--nav-gap:20px;--nav-logo-h:36px;--nav-drx-h:14px}
  .nav-eco{flex-direction:column;align-items:flex-start}
}
@media (min-width:1280px) and (max-width:1439px){
  :root{--nav-fs:14px;--nav-gap:14px;--nav-logo-h:32px;--nav-drx-h:13px}
  .nav-st,.nav-dr{gap:14px}
}
/* sub 1280px: hamburger (bara pastreaza marca, CTA-ul mobil si butonul de meniu) */
@media (max-width:1279px){
  .nav-links,.nav-dr,.nav-st>:not(.nav-logo){display:none}
  .nav-burger{display:block}
}
/* meniul mobil: navigatia interna, CTA-ul, apoi ecosistemul, separat, intr-un registru mai mic */
.mobile-menu-eco{display:flex;flex-direction:column;margin-top:28px;padding-top:14px;border-top:1px solid var(--line)}
.mobile-menu-ext{display:flex;align-items:center;gap:8px;font-family:var(--text) !important;font-size:16px !important;font-weight:500 !important;
  text-transform:none !important;line-height:1.3 !important;letter-spacing:.01em;color:rgba(255,255,255,.72);border-bottom:0 !important;min-height:44px;padding:8px 0 !important}
.mobile-menu-ext .nav-ext__ico{width:11px;height:11px}

/* ---------- 2.1-2.3 · HERO DINAMIC: mesajele Awareness sunt mai lungi decat titlul general ----------
   Numai H1-ul se schimba; ca un mesaj de ~100 de caractere sa ramana lizibil imediat si sa nu iasa din
   cadru la 1280x630 sau la 320px, registrul lui scade. Compozitia, eyebrow-ul, descrierea si CTA-urile
   raman identice. */
.hero-title--lung{max-width:18em;font-size:clamp(24px,7.2vw,34px);text-wrap:balance}
.hero-title--lung .hero-line--mesaj{text-wrap:balance}
@media (min-width:768px){.hero-title--lung{font-size:clamp(30px,4.6vw,46px)}}

/* ---------- 2.5 · HERO DESKTOP CINEMATIC ----------
   H1 mare si centrat, in mijlocul cadrului; kickerul si descrierea centrate cu el. Cele doua CTA-uri
   existente se despart stanga / dreapta, jos, cu microcopy-ul intre ele. Marimea H1 urmeaza si latimea,
   si INALTIMEA ferestrei (min(vw, vh)). Zona centrala incepe SUB banda de consimtamant de sub meniu
   (~84px) si se termina deasupra randului de CTA-uri, deci la 1280x630 nimic nu se suprapune, nici cu
   bannerul deschis. Interlinia de diacritice (1.14) ramane. */
@media (min-width:1024px){
  .hero-content{top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
    padding:calc(var(--nav-h) + 104px) var(--gutter) calc(var(--btn-h,72px) + clamp(24px,4.4vh,44px) + 18px)}
  .hero-kicker{align-items:center;margin-bottom:clamp(14px,2.6vh,26px)}
  .hero-kicker__text{text-align:center}
  .hero-title{margin:0 auto;max-width:14.6em;text-align:center;font-size:clamp(44px,min(6.05vw,9.4vh),118px)}
  .hero .hero-rand{display:inline}
  .hero-line--1{text-wrap:balance}
  .hero-support{margin:clamp(14px,2.6vh,28px) auto 0;max-width:min(84vw,1060px);text-align:center;text-wrap:balance}
  /* „Vedeți programele" (decizie ARHITECT, 25 septembrie 2026): in compozitia centrala, imediat sub descriere, centrat,
     la latimea lui. Nu e fixed si nu sta in colt; oferta ramane CTA-ul global, jos pe mijloc, independent. */
  .hero-ctas--mobile{display:flex;justify-content:center;margin:clamp(20px,2.6vh,28px) 0 0}
  /* lizibilitate: vinieta centrala peste umbra verticala existenta (inlocuieste umbra laterala a grupului din stanga) */
  .hero-shade::before{background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(0,0,0,.42) 0%,rgba(0,0,0,.2) 55%,rgba(0,0,0,0) 100%)}
  .hero-title--lung{max-width:19em;font-size:clamp(32px,min(3.9vw,7.4vh),70px)}
}
@media (min-width:1024px) and (max-height:700px){
  /* descrierea are registrul de corp R12-03 (25,5px, doua randuri): pe ecranele joase titlul cedeaza, nu textul */
  .hero-title{font-size:clamp(40px,min(6.05vw,7.4vh),118px)}
  .hero-title.hero-title--lung{font-size:clamp(30px,min(3.9vw,5.7vh),70px)}
  .hero-support{margin-top:12px}
  .hero-kicker{margin-bottom:10px}
}

/* ---------- 3-4 · FORMULAR V2: bife, deschiderea bifei WhatsApp, trimiterea, succesul ----------
   Bifele sunt controale native (`input type=checkbox`), cu eticheta intreaga clicabila si tinta de 44px+;
   caseta desenata e doar vizuala. Scena e LIGHT (R12-17), deci culorile sunt pe fundalul deschis. */
.bifa{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;cursor:pointer;
  font-size:15px;line-height:1.45;color:#1d1d1d}
.bifa__input{position:absolute;left:0;top:10px;width:24px;height:24px;margin:0;opacity:0;cursor:pointer}
.bifa__caseta{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;margin-top:-1px;border-radius:5px;background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.34);transition:background-color .18s ease-out,box-shadow .18s ease-out}
.bifa__caseta svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .22s ease-out}
.bifa:hover .bifa__caseta{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.6)}
.bifa__input:checked+.bifa__caseta{background:#141414;box-shadow:inset 0 0 0 1.5px #141414}
.bifa__input:checked+.bifa__caseta svg{stroke-dashoffset:0}
.bifa__input:focus-visible+.bifa__caseta{outline:2px solid #141414;outline-offset:3px}
.bifa__input:disabled+.bifa__caseta{opacity:.5}
.bifa--audit .bifa__input:checked+.bifa__caseta{background:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.bifa__text{min-width:0}
/* Cele doua bife stau intr-un singur item al gridului formularului: bifa WhatsApp inchisa ocupa exact 0px, fara
   golul gridului, si se deschide printr-o tranzitie de inaltime cand apare un telefon. */
.bife{display:block;min-width:0}
.bifa-pliabil{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .32s cubic-bezier(.2,.7,.2,1),opacity .2s ease-out,visibility 0s linear .32s}
.bifa-pliabil.is-open{grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .32s cubic-bezier(.2,.7,.2,1),opacity .28s ease-out .06s,visibility 0s}
.bifa-pliabil__interior{min-height:0;overflow:hidden;padding:0 4px;margin:0 -4px}
.reduced .bifa-pliabil,.reduced .bifa__caseta,.reduced .bifa__caseta svg{transition:none}
@media (prefers-reduced-motion:reduce){.bifa-pliabil,.bifa__caseta,.bifa__caseta svg{transition:none}}
/* capcana anti-spam: in afara ecranului, nu `display:none` (unii roboti sar peste campurile ascunse) */
.capcana{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* LOADING: aceeasi latime a butonului (fixata la prima trimitere), sageata inlocuita de un cerc discret */
.form-submit__progres{display:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
  border-top:2px solid #fff;animation:itl-progres .8s linear infinite}
.form-submit.is-loading .form-submit__sageata{display:none}
.form-submit.is-loading .form-submit__progres{display:block}
.form-submit[aria-disabled="true"]{cursor:progress}
.form-submit[aria-disabled="true"]:hover{transform:none}
.reduced .form-submit__progres{animation:none;border-top-color:rgba(255,255,255,.35);background:radial-gradient(circle,#fff 0 3px,transparent 3.5px)}
@media (prefers-reduced-motion:reduce){.form-submit__progres{animation:none;border-top-color:rgba(255,255,255,.35);background:radial-gradient(circle,#fff 0 3px,transparent 3.5px)}}
@keyframes itl-progres{to{transform:rotate(360deg)}}
.form-submit .btn-label{white-space:nowrap}
/* SUCCESS */
.thanks-lead{margin:18px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(20px,1.7vw,28px);line-height:1.2;color:#0a0a0a}
.offer--light .thanks-body{margin-top:14px;color:#333}
.thanks-audit{display:inline-flex;margin:22px 0 0;padding:12px 16px;border-radius:var(--r-xs);background:#fff;
  box-shadow:inset 3px 0 0 var(--red),inset 0 0 0 1px rgba(0,0,0,.1);font-size:15px;font-weight:600;color:#141414}
.thanks-audit[hidden]{display:none}

/* ---------- M3.2 · CINE SUNTEM · TEXT + PLAYER VIDEO, IN FLUX NATURAL ----------
   Aceleasi registre ca restul paginii: kickerul cu punct rosu, declaratiile Sora 700 majuscule (scara titlurilor de
   sectiune), corpul R12-03 / M2 (`.cine-text`), aceeasi grila (`--container`, `--gutter`) si acelasi negru continuu.
   Lockup-ul „IT Learning + Dr.Excel = LOVE" trece la scara declaratiei mari (cea a fostului „Facem foarte bine ceea ce
   știm."); „+" si „=" pastreaza accentul rosu al separatorului, fara alt ornament. „= LOVE" nu se desparte pe doua randuri.
   Desktop: text stanga, filmul dreapta (coloana putin mai lata, ca filmul sa aiba prezenta). Sub 1024px: o coloana,
   textul si imediat filmul. Fara inaltime fortata, fara sticky. */
.uni{position:relative;background:var(--bg);padding:clamp(88px,8vw,150px) var(--gutter) clamp(88px,8vw,150px)}
.uni-grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  column-gap:clamp(48px,5vw,96px);align-items:center}
.uni-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.uni-kicker{margin:0 0 clamp(20px,2vw,30px)}
.uni-mare,.uni .uni-love{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(34px,3.4vw,64px);color:#fff;text-wrap:balance}
.uni .cine-lockup{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .3em}
.cine-lockup__x{color:var(--red);font-weight:500}
.cine-lockup__rez{white-space:nowrap}
.uni .uni-love+.uni-mare{margin-top:clamp(28px,3vw,48px)}
.uni .cine-text{max-width:40ch;margin:clamp(18px,1.8vw,26px) 0 0;font-size:var(--t-body);line-height:1.45;color:rgba(255,255,255,.84);text-wrap:pretty}
.uni-trei{margin:clamp(32px,3.2vw,48px) 0 0;display:grid;gap:6px}
.uni-trei li{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.1vw,38px);line-height:1.2;letter-spacing:-.02em;color:#fff}
.uni-trei li::before{content:"";display:inline-block;width:.3em;height:.3em;margin-right:.45em;vertical-align:.14em;background:var(--red)}
/* filmul: acelasi player, in coloana dreapta; linia „Redă videoclipul cu sunet" si CTA-ul existent raman sub el */
.uni-film{min-width:0}
.uni-film .player{margin:0}
@media (min-width:768px){.uni-film .player{width:100%}}   /* sub 768px latimea ramane cea din F-015 (cutia 9:16 incape in ecran) */
.uni-film>.moment-line{margin:clamp(12px,1.3vw,18px) 0 0;max-width:none;text-align:left}
@media (max-width:1023px){
  .uni-grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,6vw,56px)}
}
@media (max-width:767px){
  /* F-015: pe mobil filmul vertical 9:16, in cutia lui, fara sa depaseasca inaltimea ecranului; centrat sub text */
  .uni-film .player{margin:0 auto}
  .uni-film>.moment-line{text-align:center}
}

/* ---------- M3.1 · §9 · „CLARIFICĂM / EVALUĂM / CONSTRUIM" · numerele pasilor, editoriale ----------
   Numarul trece din eticheta de 13px in registrul Sora 700 al paginii, de ~3 ori mai mare, in rosul de text (AA pe negru).
   „Opțional" ramane eticheta mica de sub numar. Copy-ul si structura nu se schimba; toti cei opt pasi au acelasi tratament. */
.stair-n b{font-family:var(--display);font-weight:700;font-size:clamp(34px,2.9vw,46px);line-height:.9;letter-spacing:-.03em}
.stair-n{padding-top:.1em}
.stair-btn .stair-n b{font-size:32px}
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){.stair-btn .stair-n b{font-size:36px}}

/* ---------- M2 · MOBIL · O SINGURA SCARA DE LECTURA (inlocuieste M1, care acoperea doar „20 de programe") ----------
   Reperul e corpul marit in M1: 23px, interlinie 1.42. Pe telefon, fiecare paragraf explicativ al paginii trece pe
   aceeasi scara, printr-un singur token (`--t-lectura-mobil`) si o lista CONTROLATA de clase - nu un override pe `p`.
   Ancora `#top` (= `<main>`) tine regula in continutul paginii: bannerul de consimtamant, dialogurile (documente,
   brosuri, video) si subsolul raman neatinse, iar specificitatea bate regulile de stare ale componentelor fara `!important`.
   NU intra: titluri, eyebrow / kicker, etichete, CTA-uri, micro-texte (`--t-micro`), metadata fisei (`.acc-meta`), titluri de carduri, linia-fapt
   MVP (si pe desktop e sub corp, 18 fata de 25,5), formularul si starea lui de succes, subsolul.
   Raporturile aprobate pe desktop (R12-03) se pastreaza: numele programelor = descrierea familiei (ca 24 = 24 pe desktop,
   contract in poarta), iar titlul unui pas ramane peste corpul lui. De la 768px in sus nimic nu se schimba. */
:root{--t-lectura-mobil:23px}
@media (max-width:767px){
  #top :is(.section-sub,.cine-text,.prog-lead p,.fam-desc,.acc-inner p:not(.acc-meta),.acc-teme li,.stair-body,
    .authority-body,.delivery-body,.panel-lead,.panel-sub,.hub__lede,.active-doc-desc){font-size:var(--t-lectura-mobil);line-height:1.42}
  /* Hero-ul e `sticky`, un ecran inalt, cu grupul ancorat jos: pe un telefon scund o descriere mai inalta ar impinge
     H1-ul peste marginea de sus (masurat: la 320x640, H1 de la 138px la -1px). Descrierea urmeaza deci scara de lectura
     cat timp incape - 23px de la ~780px inaltime (360x800, 390x844, 412x915, 430x932) - si coboara lin spre 16px, cat
     era, pe ecranele scunde. H1-ul si CTA-urile nu se ating. */
  #top .hero-support{font-size:clamp(16px,calc(16px + (100vh - 640px) * .05),var(--t-lectura-mobil));
    font-size:clamp(16px,calc(16px + (100svh - 640px) * .05),var(--t-lectura-mobil));line-height:1.42}
  #top .prog-lead p{max-width:none}
  #top .prog-lead p+p{margin-top:18px}
  #top .fam-acc .acc-label{font-size:var(--t-lectura-mobil)}
}

/* ---------- M3.3 · POLISH: CTA CONTEXTUAL (desktop + compact), BUTOANE CENTRATE, BROSURA, HUB (sub 1280px) ----------
   Contractul de latime: COMPACT = <=1279px (hamburger, M3.1), DESKTOP = >=1280px, neschimbat.
   B · desktop: in „Cine suntem" CTA-ul din header dispare pe loc (slotul ramane, nimic nu sare); clasa o pune `navState()`.
   C1 · compact: cat timp un CTA rosu de oferta din continut e in ecran, CTA-ul compact din header dispare; clasa o pune
   un IntersectionObserver. In ambele cazuri JS scoate si din Tab (`tabindex=-1`, `aria-hidden`).
   C2 / F / G · compact: CTA-urile rosii de oferta si butoanele albe secundare din continut stau CENTRATE, la latimea
   lor naturala (nu intinse pe toata latimea). CTA-ul Hero („Vedeți programele") e centrat sub descriere pe toate
   latimile (compozitia centrala a Hero-ului).
   Nu se ating consimtamantul, dialogurile, playerul, formularul sau meniul mobil: selectorii de mai jos le ocolesc. */
@media (max-width:1279px){
  /* C2 · linia „Redați videoclipul cu sunet": centrata, sub player */
  .uni-film>.moment-line{text-align:center}
  /* F · butoanele albe secundare: centrate, la latimea lor */
  .panel-cta,.active-doc-cta{display:flex;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;justify-self:center;justify-content:center}
  .active-doc-cta{grid-column:1 / -1}      /* centrat in cardul documentului, nu doar in coloana de text */
  /* E · HUB: titlul centrat, ruperi naturale */
  .hub__headline{text-align:center;justify-self:center;margin-left:auto;margin-right:auto;text-wrap:balance}
  .hub__br{display:none}
  /* G · „Vezi broșura": pe rand propriu dupa continutul fisei, centrat, la latimea lui, cu eticheta la scara textului
     explicativ al fisei (24px pe tableta, R12-03; 23px pe telefon, M2). Butonul creste cu textul, iconul ramane patrat. */
  .acc-inner{grid-template-columns:minmax(0,1fr)}
  .acc-inner > .acc-brosura{grid-column:1;grid-row:auto;justify-self:center;align-self:start;width:auto;max-width:100%;margin:22px 0 0}
  #top .acc-inner > .acc-brosura{--btn-h:64px;font-size:var(--t-body-s);letter-spacing:.02em;height:auto;min-height:var(--btn-h)}
  #top .acc-inner > .acc-brosura .btn-icon{align-self:stretch;height:auto;min-height:var(--btn-h)}
  #top .acc-inner > .acc-brosura .btn-label{padding:10px 26px 10px 18px;white-space:normal;line-height:1.2}
}
@media (max-width:1023px){
  /* C2 · Hero (compozitia stivuita, sub 1024px): „Vedeți programele" centrat, la latimea lui */
  .hero-ctas--mobile{display:flex;flex-direction:column;align-items:center}
  .hero-ctas--mobile .btn{width:auto;max-width:100%}
}
@media (max-width:767px){
  #top .acc-inner > .acc-brosura{font-size:var(--t-lectura-mobil)}
  /* etichetele lungi se rup controlat pe telefon, in loc sa fie taiate de `overflow:hidden` (masurat la 320: „Vedeți ce primește…" pierdea 36px) */
  .hero-ctas--mobile .btn,.panel-cta{white-space:normal;height:auto;min-height:var(--btn-h)}
  .hero-ctas--mobile .btn .btn-icon,.panel-cta .btn-icon{align-self:stretch;height:auto;min-height:var(--btn-h)}
  .hero-ctas--mobile .btn-label,.panel-cta .btn-label{line-height:1.25;padding-top:8px;padding-bottom:8px}
}

/* fara randul CTA-ului, ultimul link intern nu mai are linie proprie: separatorul ecosistemului e singurul, fara rand gol */
.mobile-menu nav > a:last-of-type{border-bottom:0}

/* ---------- M3.4 · CTA-UL GLOBAL „Solicitați o ofertă" (decizie ARHITECT) ----------
   Unul singur, fix, jos pe mijloc, pe toate ecranele; geometria butonului rosu existent (icon patrat + eticheta), la
   latimea lui naturala. Peste continut si peste meniul hamburger (z 45), sub bara (z 50), sub consimtamant (z 70) si sub
   dialogurile native (stratul de sus). Starea ascunsa o pune main.js (`.is-ascuns` + tabindex / aria-hidden); fara JS
   ramane vizibil. Centrarea e pe `translate`, ca animatia de intrare sa poata scrie `transform`. */
.cta-global{position:fixed;left:50%;bottom:24px;z-index:48;translate:-50% 0;width:auto;max-width:calc(100vw - 32px);white-space:nowrap;
  box-shadow:0 14px 36px rgba(0,0,0,.5);transition:opacity .25s ease-out,visibility 0s}
.cta-global.is-ascuns{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-out,visibility 0s linear .2s}
.cta-global:hover .btn-icon{background:var(--red)}
.cta-global:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:767px){
  .cta-global{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  /* pe telefon butonul „sus" ar sta sub CTA: cat CTA-ul e vizibil, urca deasupra lui */
  html.cta-global-activ .totop{bottom:calc(14px + env(safe-area-inset-bottom,0px) + var(--btn-h) + 12px)}
}
@media (prefers-reduced-motion:no-preference){
  .js:not(.reduced) .cta-global{animation:itl-cta-global .6s cubic-bezier(.215,.61,.355,1) 1s backwards}
}
@keyframes itl-cta-global{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reduced .cta-global{transition:none}

/* ---------- M3.4 · HERO: blocul central coboara, randul de jos elibereaza mijlocul ----------
   Desktop: `.hero-content` ramane centrat pe verticala; un distantier flexibil deasupra blocului (`::before`, baza 2 x
   --hero-jos) il coboara cu --hero-jos cand e loc: 5vh la >=1280, 4vh la 1024-1279. Distantierul se strange PRIMUL cand
   fereastra e joasa (1366x768, 1280x630): blocul coboara doar cat incape, niciodata sub rezerva de jos, deci nu atinge
   CTA-ul global. Rezerva de jos = CTA-ul global (24px + inaltimea lui) + 24px de aer. „Vedeți programele" face parte din
   grup (sub descriere), deci sta mereu deasupra rezervei. Sub 1024px: grupul stivuit sta deasupra CTA-ului global. */
@media (min-width:1024px){
  .hero-content{--hero-jos:4vh;padding-bottom:calc(var(--btn-h,72px) + 24px + 24px)}
  .hero-content::before{content:"";flex:0 1 calc(2 * var(--hero-jos));min-height:0}
}
@media (min-width:1280px){.hero-content{--hero-jos:5vh}}
/* „Vedeți programele" in grup adauga un rand (CTA + ~20px) blocului central. Pe ferestrele desktop joase se strange NUMAI
   spatierea verticala: rezerva de sus ramane sub banda de consimtamant de sub meniu (inalta ~84px, deci +92px lasa 8px),
   aerul fata de CTA-ul global scade de la 24 la 16px, iar distantele dintre kicker, H1, descriere si CTA la minimul lor.
   H1-ul, descrierea si CTA-ul global nu se ating. */
@media (min-width:1024px) and (max-height:820px){
  .hero-content{padding-top:calc(var(--nav-h) + 92px);padding-bottom:calc(var(--btn-h,72px) + 24px + 16px)}
  .hero-kicker{margin-bottom:12px}
  .hero-support{margin-top:14px}
  .hero-ctas--mobile{margin-top:20px}
  /* H1 ADAPTIV (decizie ARHITECT, 25 septembrie 2026): pe ferestrele joase H1-ul trece pe DOUA randuri - primul rand
     („Creștem productivitatea echipelor") intreg - si scade numai cat sa incapa acel rand (latimea lui naturala e
     ~20,4 em; -20px acopera bara de derulare). Pe ferestrele inalte (>820px) H1-ul ramane exact cel de pana acum. */
  .hero-title:not(.hero-title--lung){max-width:none;font-size:min(clamp(44px,min(6.05vw,9.4vh),118px),calc((100vw - 2 * var(--gutter) - 20px) / 20.6))}
  .hero-title--lung{max-width:24em;font-size:clamp(28px,min(3.9vw,5.7vh),70px)}   /* awareness: acelasi principiu, un rand mai putin */
}
@media (min-width:1024px) and (max-height:700px){
  .hero-title:not(.hero-title--lung){font-size:min(clamp(40px,min(6.05vw,7.4vh),118px),calc((100vw - 2 * var(--gutter) - 20px) / 20.6))}
  .hero-title.hero-title--lung{font-size:clamp(26px,min(3.9vw,4.8vh),70px)}
}
/* ferestrele cele mai joase (<=640px): distantele interne la minim; sub 620px H1-ul pe doua randuri cedeaza putin din
   inaltime (1280x600), ramanand peste minimul D7 */
@media (min-width:1024px) and (max-height:640px){
  .hero-kicker{margin-bottom:8px}
  .hero-support{margin-top:10px}
  .hero-ctas--mobile{margin-top:16px}
  .hero-title.hero-title--lung{font-size:clamp(26px,min(3.9vw,4.4vh),70px)}
}
@media (min-width:1024px) and (max-height:620px){
  .hero-title:not(.hero-title--lung){font-size:min(clamp(40px,min(6.05vw,6.9vh),118px),calc((100vw - 2 * var(--gutter) - 20px) / 20.6))}
}
/* „Vedeți programele" COMPACT (aceeasi decizie): 48px, eticheta mai mica, fundal inchis translucid si contur discret -
   clar secundar fata de CTA-ul global rosu (72px), pe toate latimile. Tinta de atingere ramane peste 44px. */
.hero-ctas--mobile .btn{--btn-h:48px;font-size:13px;background:rgba(10,10,10,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hero-ctas--mobile .btn .btn-icon{background:rgba(255,255,255,.06)}
.hero-ctas--mobile .btn-label{padding:0 22px 0 16px}
@media (max-width:1023px){.hero-content{padding-bottom:calc(24px + var(--btn-h) + 16px)}}
@media (max-width:767px){.hero-content{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px) + var(--btn-h) + 16px)}}

/* ---------- OFERTA · suportul („Nu trebuie să alegeți singuri cursul." + „Ce puteți primi") in capul cardului formularului ----------
   Inaintea primului camp, compact, ca sa nu lungeasca excesiv cardul: afirmatia, titlul mic si lista pe doua coloane
   (desktop si tableta), pe una pe telefon (inlocuieste acolo comprimarea inline M07). O linie il separa de campuri. */
.form-suport{margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid rgba(0,0,0,.1)}
.form-suport .offer-sub,.offer--light .form-suport .offer-sub{margin:0;font-size:13px;letter-spacing:.1em}
.form-suport .receive,.offer--light .form-suport .receive{margin:12px 0 0;padding:0;border:0}
.form-suport .receive-title{font-size:11px}
.form-suport .receive-list,.offer--light .form-suport .receive-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px;margin-top:8px;font-size:15px;line-height:1.4}
@media (max-width:767px){
  .form-suport .receive-list,.offer--light .form-suport .receive-list{grid-template-columns:minmax(0,1fr);gap:6px}
  .form-suport .receive-list li{display:block;padding-left:16px}
  .form-suport .receive-list li::before{display:block}
  .form-suport .receive-list li:not(:last-child)::after{content:none}
}

/* ---------- PATCH B2B V1 · CONSIMTAMANT IN FLUX, NU OVERLAY (decizie ARHITECT, 26 septembrie 2026) ----------
   Ordinea pe ecran: BANNER -> BARA DE NAVIGARE -> HERO -> restul paginii. Bannerul e primul element din flux (scriptul
   de langa el il arata inainte de primul cadru), deci nu se suprapune cu nimic: nici cu Hero-ul, nici cu meniul.
   - Cat e deschis, ocupa spatiu real si experienta e a unui viewport temporar mai mic: Hero-ul are `100svh` MINUS
     inaltimea reala a bannerului (`--consent-h`, publicata inainte de primul cadru si tinuta la zi de un ResizeObserver
     la fonturi, rotire, zoom). Fara banner `--consent-h` nu exista, deci Hero-ul e exact cel de pana acum.
   - Marginea de JOS a Hero-ului ramane pe loc (min-height-ul scade cu acelasi `--consent-h`), iar pe desktop rezerva de
     sus a grupului central scade exact cat a coborat Hero-ul: rezerva aceea era loc pentru banda de consimtamant de SUB
     meniu, care acum sta deasupra lui. Grupul central (kicker, H1, descriere, „Vedeți programele") sta deci in aceeasi
     pozitie cu bannerul deschis si dupa inchidere; la decizie Hero-ul doar se intinde in sus peste spatiul eliberat.
   - La Accept / Esentiale / Salvare, `hidden` il scoate din layout pe loc, fara reload; `main.js` compenseaza derularea
     cand decizia vine de mai jos in pagina (din preferintele deschise din subsol), ca nimic sa nu sara.
   Culorile, ierarhia actiunilor si textul raman cele aprobate; se schimba doar asezarea. */
.consent-card{border-radius:0;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.12);padding:12px var(--gutter)}
.consent-copy{min-width:0;font-size:13px;line-height:1.42}   /* strutul randurilor: altfel textul inline mosteneste corpul paginii (25,5px x 1,5) */
.consent-copy .consent-kicker{display:flex;margin:0 0 4px}
.consent-copy .consent-text{display:inline;margin:0}
.hero{height:calc(100vh - var(--consent-h,0px));height:calc(100svh - var(--consent-h,0px));min-height:calc(560px - var(--consent-h,0px))}
@media (min-width:1024px){
  .hero-content{padding-top:max(calc(var(--nav-h) + 12px),calc(var(--nav-h) + 104px - var(--consent-h,0px)))}
}
/* Sub 1024px grupul Hero e ancorat jos. NUMAI cat bannerul e deschis (`:has`): pe un ecran unde bannerul lasa mai putin loc
   decat ii trebuie grupului (320x640, adica zoom 400%), Hero-ul CRESTE cu grupul, in loc sa il taie sub bara - grupul intra
   in flux, intr-un Hero flex cu inaltimea minima ramasa. Cand incape, pozitia e cea de pana acum (acelasi `padding-bottom`,
   jos). Fara banner regula nu se aplica deloc, deci geometria aprobata a Hero-ului ramane neatinsa. */
@media (max-width:1023px){
  body:has(> [data-consent]:not([hidden])) .hero{display:flex;flex-direction:column;justify-content:flex-end;height:auto;min-height:calc(100vh - var(--consent-h,0px));min-height:calc(100svh - var(--consent-h,0px))}
  body:has(> [data-consent]:not([hidden])) .hero-content{position:relative;left:auto;right:auto;bottom:auto;padding-top:calc(var(--nav-h) + 16px)}
}
/* Acelasi principiu ca F-009 (`max-height:559px`): un Hero crescut peste inaltimea ecranului nu are voie sa fie `sticky`, altfel
   partea lui de jos (CTA-urile) nu ajunge niciodata libera pe ecran - scena Trust urca peste ea. Masurat: cu bannerul deschis,
   la 320px latime grupul cere ~630px; sub 640px inaltime Hero-ul deruleaza normal cat bannerul e deschis. */
@media (max-width:1023px) and (max-height:639px){
  body:has(> [data-consent]:not([hidden])) .hero{position:relative}
}
@media (min-width:1024px) and (max-height:820px){
  .hero-content{padding-top:max(calc(var(--nav-h) + 12px),calc(var(--nav-h) + 92px - var(--consent-h,0px)))}
}
/* tableta: explicatia sus, actiunile pe un rand dedesubt, la latimea lor */
@media (min-width:768px) and (max-width:1023px),(min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .consent-card .consent-actions{margin-top:10px;flex-wrap:nowrap}
  .consent-card .consent-btn{flex:0 0 auto;width:auto;min-width:210px}
  .consent-card .consent-link{flex:0 0 auto;margin:0 0 0 8px}
}
/* mobil: compact, tot in flux (nu modal, nu ecran intreg); cele doua actiuni principale pe acelasi rand, setarile sub
   ele. Descrierea Hero-ului isi ia scara din inaltimea RAMASA, ca pe un telefon mai scund (acelasi mecanism). */
@media (max-width:767px){
  .consent-card{padding:10px 16px 6px}
  .consent-copy{font-size:12.5px}
  .consent-copy .consent-kicker{font-size:10px}
  .consent-copy .consent-text{font-size:12.5px;line-height:1.42}
  .consent-card .consent-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
  .consent-card .consent-btn{min-height:44px;width:auto}
  .consent-card .consent-link{grid-column:1 / -1;justify-self:start;width:auto;margin:0}
  #top .hero-support{font-size:clamp(16px,calc(16px + (100svh - var(--consent-h,0px) - 640px) * .05),var(--t-lectura-mobil))}
}
@media (max-width:359px){.consent-card .consent-actions{grid-template-columns:minmax(0,1fr)}}