/* manifolio.com, pagina de start: eroul cu adâncime, banda „merge cu”, dezvoltatori, date live, agenții,
   întrebări și apelul final. Se încarcă după site.css și mk.css, doar pe / și /ro/. */

/* ── reveal: mai scurt și mai discret decât în aplicație ── */
.mf-js .lp [data-reveal] { transform: translateY(.75rem); }
.mf-js .lp [data-reveal].is-in { transition: opacity 520ms var(--ease-out) var(--rd, 0ms), transform 620ms var(--ease-out) var(--rd, 0ms); }
.mf-js .lp [data-reveal="frame"] { transform: translateY(1rem); }
.mf-js .lp [data-reveal="frame"].is-in { transition: opacity 560ms var(--ease-out) 120ms, transform 720ms var(--ease-out) 120ms; }

/* ── erou ── */
.hero-h1 { letter-spacing: -0.03em; }
.hero-sub { color: rgba(255,255,255,.88); font-weight: 400; }
.lp-hero .lp-cta-primary svg, .hm-cta-btns .lp-cta-primary svg { width: 1.125rem; height: 1.125rem; margin-left: .375rem; transition: transform var(--d-hover) var(--ease-out); }
.lp-hero .lp-cta-primary:hover svg, .hm-cta-btns .lp-cta-primary:hover svg { transform: translateX(3px); }
.lp-hero .btn-primary:active, .lp-hero .btn-white:active, .hm-cta-btns a:active { transform: scale(.97); }

.hero-stage { position: relative; flex: none; width: 69.5rem; max-width: calc(100% - 4rem); margin: 5.25rem 0 -15rem; perspective: 2200px; perspective-origin: 50% 0; }
html.mk .hero-stage .hero-frame { width: 100%; max-width: none; margin: 0; transform-origin: 50% 0; }
.hero-stage .hero-screen { aspect-ratio: 2880 / 1580; }

.hm-float { position: absolute; z-index: 2; translate: 0 0 40px; border-radius: 1.25rem; background: #FFF; border: 1px solid rgba(68,20,6,.08); box-shadow: 0 1px 2px rgba(68,20,6,.06), 0 24px 48px -12px rgba(68,20,6,.28); color: var(--text-1); }
.hm-float-live { left: -3.5rem; bottom: 16%; width: 14.5rem; padding: 1rem 1.125rem 1.125rem; }
.hm-fl-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-3); }
.hm-fl-fig { display: flex; align-items: baseline; gap: .5rem; margin-top: .375rem; }
.hm-fl-fig b { font-size: 2rem; line-height: 2.25rem; font-weight: 700; }
.hm-fl-fig span { font-size: 12px; color: var(--text-4); }
.hm-fl-bars { display: flex; align-items: flex-end; gap: 3px; height: 2.75rem; margin-top: .625rem; }
.hm-fl-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: var(--grad-data, linear-gradient(180deg, #FB923C, #EA580C)); opacity: calc(.45 + var(--i) * .04); }
.hm-float-pub { right: -3.5rem; top: 40%; display: flex; align-items: center; gap: .75rem; width: 21rem; padding: .875rem 1rem; }
.hm-fl-ok { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--green-100); color: var(--green-900); }
.hm-fl-tx { min-width: 0; flex: 1; }
.hm-fl-tx b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.hm-fl-tx span { display: block; font-size: 12px; line-height: 16px; color: var(--text-3); }
.hm-fl-langs { display: flex; gap: .25rem; }
.hm-fl-langs i, .hm-sw-langs i { display: inline-grid; place-items: center; height: 1.25rem; padding: 0 .375rem; border-radius: .375rem; background: var(--text-1); color: #FFF; font-style: normal; font-size: 11px; line-height: 16px; font-weight: 600; }

/* intrarea eroului, fără JS: insigna, rândurile titlului ies din mască, textul, butoanele, apoi ecranul urcă în adâncime
   și cardurile plutitoare se așază ultimele. Doar transform și opacitate; imaginea LCP e vizibilă din primul cadru. */
.lp-hero { --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); }
@media (min-width: 768px) {
  .hero-h1 .hl { overflow: clip; padding-block: .04em .1em; margin-block: -.04em -.1em; }
}
@media (prefers-reduced-motion: no-preference) {
  .lp-hero .hz { animation: hz-rise 760ms var(--ease-expo) var(--hz, 0ms) both; }
  .lp-hero .hl-in { animation: hz-fade 700ms var(--ease-out) var(--hz, 0ms) both; }
  .hero-stage { animation: hz-stage 1400ms var(--ease-expo) 240ms both; }
  @keyframes hz-rise { from { opacity: 0; transform: translateY(.875rem); } to { opacity: 1; transform: none; } }
  @keyframes hz-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes hz-line { from { transform: translateY(108%); } to { transform: none; } }
  @keyframes hz-stage { from { transform: translateY(5.5rem) scale(.955); } to { transform: none; } }
  @media (min-width: 768px) {
    .lp-hero .hl-in { display: inline-block; animation: hz-line 1050ms var(--ease-expo) var(--hz, 0ms) both; }
  }
  .hm-float { animation: hm-float-in 900ms var(--ease-expo) both; }
  .hm-float-live { animation-delay: 1000ms; }
  .hm-float-pub { animation-delay: 1150ms; }
  @keyframes hm-float-in { from { opacity: 0; transform: translateY(1.5rem) scale(.96); } to { opacity: 1; transform: none; } }
  @supports (animation-timeline: scroll()) {
    .hm-tilt { animation: hm-tilt linear both; animation-timeline: scroll(root); animation-range: 0 32rem; }
    @keyframes hm-tilt { from { transform: rotateX(9deg) scale(.965); } to { transform: none; } }
  }
}

/* ── o publicare, toate site-urile (sub „Cum funcționează”) ── */
.hm-flow { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: 3.5rem; align-items: center; margin-top: 1.5rem; padding: 2.5rem; border-radius: var(--r-landing-card); background: #FFF; }
.hm-flow-h { font-size: 1.75rem; line-height: 2.25rem; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.hm-flow-p { margin-top: .75rem; font-size: 1rem; line-height: 1.5rem; color: var(--text-body-landing); text-wrap: pretty; }
.hm-flow-map { display: grid; grid-template-columns: 16rem minmax(4rem, 1fr) minmax(0, 19.5rem); align-items: center; }
.hm-flow-src { position: relative; z-index: 1; padding: 1rem 1.125rem 1.125rem; border: 1px solid var(--line); border-radius: 1.125rem; background: #FFF; box-shadow: 0 1px 2px rgba(68,20,6,.05), 0 18px 36px -18px rgba(68,20,6,.22); }
.hm-flow-ring { position: absolute; inset: -1px; border: 2px solid var(--orange); border-radius: inherit; opacity: 0; pointer-events: none; }
.hm-flow-src-top { display: flex; align-items: center; height: 1.75rem; color: var(--text-1); font-weight: 600; font-size: 15px; }
.hm-flow-entry { margin-top: .875rem; padding: .75rem .875rem; border-radius: .75rem; background: var(--row); }
.hm-flow-entry b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.hm-flow-entry span { display: block; font-size: 12px; line-height: 16px; color: var(--text-3); }
.hm-flow-src-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .875rem; }
.hm-flow-pub { display: inline-flex; align-items: center; gap: .3125rem; height: 1.625rem; padding: 0 .625rem 0 .5rem; border-radius: var(--r-pill); background: var(--green-100); color: var(--green-900); font-size: 12px; line-height: 16px; font-weight: 500; }
.hm-flow-langs { display: flex; flex: none; gap: .25rem; }
.hm-flow-langs i { display: inline-grid; place-items: center; height: 1.25rem; padding: 0 .375rem; border-radius: .375rem; background: var(--text-1); color: #FFF; font-style: normal; font-size: 11px; line-height: 16px; font-weight: 600; }
.hm-flow-wire { position: relative; align-self: stretch; }
.hm-flow-lines { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.hm-flow-lines path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.hm-flow-lines .base { stroke: rgba(68,20,6,.16); stroke-width: 1.5; stroke-dasharray: 3 5; }
.hm-flow-lines .pulse { stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: .18 1.4; stroke-dashoffset: .18; }
.hm-flow-lines.v { display: none; }
.hm-flow-to { display: grid; grid-auto-rows: 4.75rem; }
.hm-flow-to li { display: flex; align-items: center; padding-block: .375rem; }
.hm-flow-site { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto 1.5rem; align-items: center; gap: .75rem; width: 100%; height: 100%; padding: 0 .75rem 0 .5rem; border: 1px solid var(--line); border-radius: 1rem; background: #FFF; }
.hm-flow-site::after { content: ""; position: absolute; inset: -1px; border: 1.5px solid var(--orange-300); border-radius: inherit; opacity: 0; pointer-events: none; }
.hm-flow-ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: var(--orange-50); color: var(--orange-700); }
.hm-flow-name { min-width: 0; }
.hm-flow-name b, .hm-flow-name span { display: block; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.hm-flow-name b { font-size: 14px; line-height: 20px; font-weight: 500; }
.hm-flow-name span { font-size: 12px; line-height: 16px; color: var(--text-3); }
.hm-flow-ok { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--green-100); color: var(--green-900); }

@media (prefers-reduced-motion: no-preference) {
  .hm-flow { --flow: 5200ms; }
  .hm-flow-ring, .hm-flow-lines .pulse, .hm-flow-ok, .hm-flow-site::after { animation-duration: var(--flow); animation-timing-function: var(--ease-out); animation-iteration-count: infinite; animation-fill-mode: both; animation-play-state: paused; }
  .hm-flow.is-on .hm-flow-ring, .hm-flow.is-on .hm-flow-lines .pulse, .hm-flow.is-on .hm-flow-ok, .hm-flow.is-on .hm-flow-site::after { animation-play-state: running; }
  .hm-flow-ring { animation-name: fl-ring; }
  .hm-flow-lines .pulse { animation-name: fl-pulse; animation-timing-function: cubic-bezier(.45, 0, .2, 1); animation-delay: calc(var(--i) * 110ms); }
  .hm-flow-ok { animation-name: fl-ok; animation-delay: calc(var(--i) * 110ms); }
  .hm-flow-site::after { animation-name: fl-hit; animation-delay: calc(var(--i) * 110ms); }
  @keyframes fl-ring { 0% { opacity: 0; transform: scale(1); } 4% { opacity: .55; transform: scale(1); } 16% { opacity: 0; transform: scale(1.06); } 100% { opacity: 0; transform: scale(1.06); } }
  @keyframes fl-pulse { 0%, 6% { stroke-dashoffset: .18; } 34%, 100% { stroke-dashoffset: -1.2; } }
  @keyframes fl-ok { 0%, 28% { opacity: 0; transform: scale(.4); } 34% { opacity: 1; transform: scale(1.08); } 38%, 86% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.85); } }
  @keyframes fl-hit { 0%, 27% { opacity: 0; } 32% { opacity: 1; } 52%, 100% { opacity: 0; } }
}

/* ── banda „merge cu” ── */
.hm-works { gap: 1.25rem; }
.hm-works-track { width: 67.5rem; max-width: 100%; }
.hm-works .works-names li { cursor: default; }
.hm-works .works-names li:hover { color: var(--text-1); }
.hm-works-dup { display: none !important; }
.hm-works-any { font-size: 14px; line-height: 20px; color: var(--text-4); }

/* turul (filele, rama de browser, progresul) stă în mk.css: îl folosește și pagina de produs */
.mk-tp-shot img { transition: transform 900ms var(--ease-out); }
.mk-tp:not(.is-on) .mk-tp-shot img { transform: scale(1.015); }

/* ── dezvoltatori ── */
.hm-dev { position: relative; padding: 7.5rem 0; background: var(--maroon-landing); color: #FFF; overflow: hidden; }
.hm-dev-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; align-items: center; }
.hm-dev .mk-h2 { color: #FFF; }
.hm-dev .eyebrow { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); color: #FFF; }
html.mk .hm-dev .mk-lead { margin-top: 1.25rem; max-width: 30rem; color: rgba(255,255,255,.82); }
.hm-dev-pts { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
.hm-dev-pts li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .875rem; }
.hm-dev-ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; background: rgba(249,115,22,.16); color: var(--orange-300); }
.hm-dev-pts b { display: block; font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.hm-dev-pts div > span { display: block; margin-top: .125rem; font-size: .9375rem; line-height: 1.375rem; color: rgba(255,255,255,.72); }
.hm-dev .mk-more { margin-top: 2rem; color: var(--orange-300); }

.hm-dev-vis { position: relative; min-width: 0; padding-bottom: 5.75rem; }
.hm-ide { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 1.5rem; background: var(--code-bg, #1C0B05); box-shadow: 0 40px 80px -20px rgba(0,0,0,.5); }
.hm-ide-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem .625rem .625rem .75rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.hm-ide-tabs { display: flex; gap: .25rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hm-ide-tabs::-webkit-scrollbar { display: none; }
.hm-ide-tabs [role=tab] { position: relative; flex: none; height: 2.25rem; padding: 0 .875rem; border-radius: .625rem; font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 12.5px; color: rgba(255,255,255,.6); transition: color var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out); }
.hm-ide-tabs [role=tab]:hover { color: #FFF; }
.hm-ide-tabs [role=tab][aria-selected=true] { background: rgba(255,255,255,.08); color: #FFF; }
.hm-ide-tabs [role=tab]:focus-visible, .hm-copy:focus-visible { outline: 2px solid var(--orange-300); outline-offset: 2px; }
.hm-copy { position: relative; display: inline-flex; flex: none; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .75rem; border-radius: .625rem; color: rgba(255,255,255,.72); font-size: 13px; transition: color var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop); }
.hm-copy:hover { color: #FFF; background: rgba(255,255,255,.06); }
.hm-copy:active { transform: scale(.95); }
.hm-copy svg { width: 1rem; height: 1rem; }
.hm-copy .ok { display: none; color: #86EFAC; }
.hm-copy.is-copied .ok { display: block; }
.hm-copy.is-copied .lucide-copy { display: none; }
.hm-ide-code { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: calc(14 * 1.7em + 3.75rem); padding: 1.125rem 0 2.625rem; font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 13.5px; line-height: 1.7; }
.hm-ln { display: flex; flex-direction: column; padding: 0 1rem 0 1.25rem; text-align: right; color: rgba(255,255,255,.22); user-select: none; font-variant-numeric: tabular-nums; }
.hm-ide-code pre { margin: 0; padding-right: 1.25rem; overflow-x: auto; color: #F5E6DD; scrollbar-width: thin; }
.hm-ide-code code { font: inherit; white-space: pre; }
.hm-ide-p { animation: hm-fade 320ms var(--ease-out); }
@keyframes hm-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.hm-term { position: absolute; left: -2.5rem; bottom: 0; width: min(28rem, 84%); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 1.125rem; background: #2A1209; box-shadow: 0 30px 60px -15px rgba(0,0,0,.55); }
.hm-term-bar { display: flex; align-items: center; gap: .75rem; height: 2.5rem; padding: 0 .375rem 0 .875rem; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 12px; color: rgba(255,255,255,.55); }
.hm-term-bar .hm-copy { margin-left: auto; height: 2rem; padding: 0 .5rem; }
.hm-dots { display: flex; gap: .375rem; }
.hm-dots i { background: rgba(255,255,255,.18); }
.hm-term-body { padding: .875rem 1rem 1rem; font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 13px; line-height: 1.6; }
.hm-term-l { display: flex; align-items: center; gap: .625rem; color: #FFF; }
.hm-ps { color: var(--orange-300); }
.hm-caret { width: .5rem; height: 1.05rem; background: var(--orange-300); opacity: 0; }
.hm-term.is-typing .hm-caret { opacity: 1; animation: hm-blink 1s steps(1) infinite; }
@keyframes hm-blink { 50% { opacity: 0; } }
.hm-term-out { display: flex; align-items: center; gap: .5rem; margin-top: .375rem; color: rgba(255,255,255,.72); white-space: nowrap; }
.hm-ok { display: inline-grid; color: #86EFAC; }
.hm-term.is-typing .hm-term-out, .hm-term.is-pending .hm-term-out { opacity: 0; }
.hm-term-out { transition: opacity 360ms var(--ease-out); }

/* ── date live ── */
.hm-live { padding: 7.5rem 0; background: var(--panel); }
.hm-live-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; align-items: center; }
.hm-live-tx .mk-h2:first-child, .hm-agency-tx .mk-h2:first-child, .hm-dev-tx .mk-h2:first-child, .hm-faq-head .mk-h2:first-child { margin-top: 0; }
html.mk .hm-live .mk-lead, html.mk .hm-agency .mk-lead { margin-top: 1.25rem; max-width: 30rem; }
.hm-live-pts { display: grid; gap: 1.125rem; margin-top: 2rem; }
.hm-live-pts li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .875rem; }
.hm-live-ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; background: var(--orange-50); color: var(--orange-700); }
.hm-live-pts b { display: block; font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.hm-live-pts div > span { display: block; margin-top: .125rem; font-size: .9375rem; line-height: 1.375rem; color: var(--text-body-landing); }

.hm-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .875rem; min-width: 0; }
.hm-card { min-width: 0; padding: 1.375rem 1.5rem; border: 1px solid var(--line); border-radius: 1.25rem; background: #FFF; }
.hm-k { display: block; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-3); }
.hm-chart { grid-column: 1 / -1; padding-bottom: 1.125rem; box-shadow: 0 30px 70px -30px rgba(68,20,6,.18); }
.hm-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.hm-big { display: block; margin-top: .25rem; font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; letter-spacing: -0.02em; }
.hm-chart-side { display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; }
.hm-pill { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .75rem; border-radius: var(--r-pill); background: var(--row); font-size: 12px; font-weight: 500; color: var(--text-2); }
.hm-site { font-size: 12px; color: var(--text-4); }
.hm-plot { position: relative; margin-top: 1rem; outline: none; border-radius: .75rem; }
.hm-plot:focus-visible { box-shadow: 0 0 0 2px var(--orange-600); }
.hm-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.hm-grid { stroke: #EFEAE7; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.hm-line { fill: none; stroke: #EA580C; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hm-cross { stroke: rgba(68,20,6,.25); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 160ms var(--ease-out); }
.hm-dot { fill: #FFF; stroke: #EA580C; stroke-width: 2.5; vector-effect: non-scaling-stroke; transition: cx 160ms var(--ease-out), cy 160ms var(--ease-out); }
.hm-plot.is-hover .hm-cross { opacity: 1; }
.hm-axis { position: relative; height: 1.25rem; margin-top: .25rem; }
.hm-axis span { position: absolute; left: var(--x); transform: translateX(-50%); font-size: 12px; line-height: 16px; color: var(--text-4); white-space: nowrap; }
.hm-axis span:first-child { transform: none; }
.hm-axis span:last-child { transform: translateX(-100%); }
.hm-tip { position: absolute; top: 0; left: 0; z-index: 2; padding: .5rem .75rem; border-radius: .75rem; background: var(--maroon-app, #251007); color: #FFF; font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -110%); transition: opacity 160ms var(--ease-out); }
.hm-tip b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-tip span { color: rgba(255,255,255,.7); }
.hm-plot.is-hover .hm-tip { opacity: 1; }
.mf-js .hm-board:not(.is-in) .hm-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mf-js .hm-board:not(.is-in) .hm-area, .mf-js .hm-board:not(.is-in) .hm-dot { opacity: 0; }
.hm-board.is-in .hm-line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--ease-out) 260ms; }
.hm-board.is-in .hm-area { opacity: 1; transition: opacity 900ms var(--ease-out) 800ms; }
.hm-board.is-in .hm-dot { opacity: 1; transition: opacity 300ms var(--ease-out) 1500ms, cx 160ms var(--ease-out), cy 160ms var(--ease-out); }
.hm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.hm-kpis > div + div { padding-left: 1.25rem; border-left: 1px solid var(--line-soft); }
.hm-kpis b { display: flex; align-items: center; gap: .5rem; margin-top: .125rem; font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; }
.hm-src ul, .hm-vit ul { display: grid; gap: .75rem; margin-top: .875rem; }
.hm-src li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .375rem; font-size: 14px; line-height: 20px; }
.hm-src-v { color: var(--text-3); font-variant-numeric: tabular-nums; }
.hm-src li i { grid-column: 1 / -1; height: 4px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #FB923C, #EA580C); transform-origin: 0 50%; }
.mf-js .hm-board:not(.is-in) .hm-src li i { transform: scaleX(0); }
.hm-board.is-in .hm-src li i { transition: transform 900ms var(--ease-out) calc(500ms + var(--d, 0ms)); }
.hm-src li:nth-child(2) i { --d: 80ms; } .hm-src li:nth-child(3) i { --d: 160ms; } .hm-src li:nth-child(4) i { --d: 240ms; }
.hm-vit li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; font-size: 14px; line-height: 20px; }
.hm-vit li > span:first-child { color: var(--text-3); font-weight: 500; }
.hm-vit b { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-vit small { font-size: 12px; font-weight: 500; color: var(--text-3); }
.hm-cap { grid-column: 1 / -1; display: flex; align-items: center; gap: .375rem; font-size: 12px; line-height: 16px; color: var(--text-4); }
.hm-cap svg { flex: none; width: .875rem; height: .875rem; }
.hm-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 5rem; border-top: 1px solid var(--line); }
.hm-facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .375rem; padding: 1.75rem 1.5rem 0 0; }
.hm-facts > div + div { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.hm-facts dd { margin: 0; font-size: 2.75rem; line-height: 3rem; font-weight: 600; letter-spacing: -0.03em; color: var(--text-1); }
.hm-facts dt { font-size: 15px; line-height: 22px; color: var(--text-body-landing); }

/* ── agenții: comutatorul de clienți ── */
.hm-agency { padding: 7.5rem 0; background: #FFF; }
.hm-agency-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; align-items: center; }
.hm-sw { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: .75rem; padding: .75rem; border: 1px solid var(--line); border-radius: 1.75rem; background: var(--panel); box-shadow: 0 30px 80px -30px rgba(68,20,6,.16); }
.hm-sw-side, .hm-sw-main { min-width: 0; padding: 1rem; border: 1px solid var(--line-soft); border-radius: 1.25rem; background: #FFF; }
.hm-sw-side { display: flex; flex-direction: column; }
.hm-sw-side > .hm-k { padding: 0 .5rem .5rem; font-size: 12px; text-transform: uppercase; color: var(--text-4); }
.hm-sw-list { display: grid; gap: .125rem; border-radius: 1rem; outline: none; }
.hm-sw-list:focus-visible { box-shadow: 0 0 0 2px var(--orange-600); }
.hm-sw-list li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 1rem; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .5rem; border-radius: .875rem; cursor: pointer; transition: background-color 200ms var(--ease-out); }
.hm-sw-list li:hover { background: #FAFAFA; }
.hm-sw-list li.is-on { background: var(--row); }
.hm-sw-list li.is-active { box-shadow: inset 0 0 0 1px var(--orange-600); }
.hm-sw-logo { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; background: var(--tone); color: #FFF; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.hm-sw-logo.lg { width: 3rem; height: 3rem; border-radius: 1rem; font-size: 15px; }
.hm-sw-name { min-width: 0; }
.hm-sw-name b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.hm-sw-name span { display: block; font-size: 12px; line-height: 16px; color: var(--text-3); }
.hm-sw-check { color: var(--orange-700); opacity: 0; transform: scale(.6); transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-pop); }
.hm-sw-list li.is-on .hm-sw-check { opacity: 1; transform: none; }
.hm-sw-hint { margin-top: auto; padding: 1rem .5rem 0; font-size: 12px; line-height: 16px; color: var(--text-4); }
.hm-sw-main { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
.hm-sw-panel { min-height: 19.5rem; }
.hm-sw-panel.is-on { animation: hm-fade 360ms var(--ease-out); }
.hm-sw-head { display: flex; align-items: center; gap: .875rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); }
.hm-sw-head b { display: block; font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; }
.hm-sw-head > div > span { display: block; font-size: 13px; color: var(--text-3); }
.hm-sw-sites { display: grid; gap: .5rem; margin-top: 1rem; }
.hm-sw-sites li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .625rem .75rem .625rem .625rem; border: 1px solid var(--line-soft); border-radius: .875rem; background: #FFF; }
.hm-sw-panel.is-on .hm-sw-sites li { animation: hm-fade 420ms var(--ease-out) both; animation-delay: calc(80ms + var(--k) * 60ms); }
.hm-sw-globe { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; background: var(--orange-50); color: var(--orange-700); }
.hm-sw-site { min-width: 0; }
.hm-sw-site b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.hm-sw-site span { display: block; font-size: 12px; line-height: 16px; color: var(--text-3); }
.hm-sw-langs { display: flex; gap: .25rem; }
.hm-sw-st { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .625rem; border-radius: var(--r-pill); background: var(--row); font-size: 12px; font-weight: 500; color: var(--text-3); }
.hm-sw-st.is-live { background: var(--green-100); color: var(--green-900); }
.hm-sw-main > .hm-cap { margin-top: auto; }

/* ── întrebări pe două coloane ── */
.hm-faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 5rem; align-items: start; }
.hm-faq-head { position: sticky; top: 7rem; }
.hm-faq-more { margin-top: 1.5rem; font-size: 1rem; line-height: 1.5rem; color: var(--text-body-landing); }
.hm-faq-more a { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; font-weight: 500; color: var(--orange-700); }
.hm-faq-more a svg { width: 1rem; height: 1rem; transition: transform var(--d-hover) var(--ease-out); }
.hm-faq-more a:hover svg { transform: translateX(3px); }
.hm-faq .faq-list { max-width: none; margin: 0; }

/* ── apelul final: trei ecrane reale care se desfac ── */
.hm-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.hm-cta-btns .btn-white.hm-btn-line { padding: 0 1.25rem; border: 1px solid rgba(68,20,6,.14); background: #FFF; }
.hm-cta-btns .btn-white.hm-btn-line:hover { border-color: rgba(68,20,6,.28); }
.hm-fan { position: relative; width: 100vw; max-width: none; height: 32rem; margin-top: 4.5rem; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.hm-fan-card { position: absolute; left: 50%; top: 2rem; width: min(40rem, 44vw); overflow: hidden; border: 1px solid rgba(68,20,6,.1); border-radius: 1.25rem; background: #FFF; box-shadow: 0 30px 70px -20px rgba(68,20,6,.3); transform: translateX(-50%); transform-origin: 50% 100%; transition: transform 1100ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.hm-fan-card img { display: block; width: 100%; height: auto; }
.hm-fan-card.f2 { z-index: 3; top: 0; }
.hm-fan-card.f1, .hm-fan-card.f3 { z-index: 1; }
.hm-fan.is-in .hm-fan-card.f1 { transform: translateX(-104%) rotate(-4deg) translateY(2.5rem); }
.hm-fan.is-in .hm-fan-card.f3 { transform: translateX(4%) rotate(4deg) translateY(2.5rem); }
.hm-fan-card:hover { box-shadow: 0 40px 80px -20px rgba(68,20,6,.38); }
.hm-fan.is-in .hm-fan-card.f2 { transform: translateX(-50%) translateY(-.5rem); }

/* ── 1024 – 1279: aceeași compoziție, mai strânsă ── */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .hm-dev-in, .hm-live-grid, .hm-agency-in { gap: 3.5rem; }
  .hm-float-live { left: -1.5rem; }
  .hm-float-pub { right: .75rem; width: 23rem; }
  .hm-sw { grid-template-columns: 13.5rem minmax(0, 1fr); }
  .hm-sw-sites li { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .hm-sw-langs { display: none; }
  .hm-sw-name b { white-space: normal; }
  .hm-facts dd { font-size: 2.25rem; line-height: 2.5rem; }
  .hm-faq-in { gap: 3.5rem; }
}

/* ── sub 1024: o coloană, piesele vizuale sub text ── */
@media (max-width: 1023.98px) {
  .hm-flow { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2rem; }
  .hm-flow-tx { max-width: 34rem; }
  .hm-flow-map { grid-template-columns: 14.5rem minmax(3rem, 1fr) minmax(0, 18.5rem); }
  .hero-stage { width: calc(100% - 4rem); max-width: 45rem; margin: 3rem 0 -7.5rem; }
  html.mk .hero-stage .hero-frame { padding: .5rem; border-radius: 1.5rem; }
  .hm-dev, .hm-live, .hm-agency { padding: 4.5rem 0; }
  .hm-dev-in, .hm-live-grid, .hm-agency-in, .hm-faq-in { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hm-agency-tx { order: -1; }
  .hm-faq-head { position: static; }
  .hm-faq-in { gap: 2rem; }
  .hm-facts { margin-top: 3rem; }
  .hm-dev-vis { padding-bottom: 0; }
  .hm-term { position: relative; left: auto; bottom: auto; width: auto; margin: -2rem 1.5rem 0; }
  .hm-fan { height: 22rem; margin-top: 3rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero-stage { max-width: none; width: calc(100% - 4rem); margin: 4rem 0 -7.5rem; }
  html.mk .hero-stage .hero-frame { padding: .75rem; border-radius: 1.875rem; }
  .hm-float-live { left: -1rem; bottom: 12%; width: 13rem; }
  .hm-float-pub { right: -1rem; top: 12%; width: 22.5rem; }
  .hm-dev-in { grid-template-columns: minmax(0, 1fr); }
  .hm-dev-tx, .hm-live-tx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; }
  .hm-dev-tx > *, .hm-live-tx > * { grid-column: 1 / -1; }
  .hm-dev-tx > .eyebrow, .hm-live-tx > .eyebrow { justify-self: start; }
  .hm-dev-tx > .mk-lead, .hm-live-tx > .mk-lead, .hm-dev-tx > .mk-more, .hm-live-tx > .mk-more { grid-column: 1; }
  .hm-dev-tx > .hm-dev-pts, .hm-live-tx > .hm-live-pts { grid-column: 2; grid-row: 3 / span 2; margin-top: 1.25rem; }
  .hm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hm-facts > div:nth-child(n+3) { padding-top: 1.5rem; }
}
@media (max-width: 767.98px) {
  .hero-badge { height: auto; min-height: 2.125rem; padding: .375rem .875rem; white-space: normal; text-align: left; border-radius: 1.0625rem; font-size: 12.5px; line-height: 17px; }
  .hero-stage { width: calc(100% - 2rem); margin: 2.5rem 0 -7.5rem; }
  .hero-stage .hero-screen { aspect-ratio: auto; }
  .hm-float { display: none; }
  .hm-flow { margin-top: 1rem; padding: 1.25rem; gap: 1.5rem; }
  .hm-flow-h { font-size: 1.5rem; line-height: 2rem; }
  .hm-flow-map { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .hm-flow-src { grid-column: 1 / -1; }
  .hm-flow-lines.h { display: none; }
  .hm-flow-lines.v { display: block; }
  .hm-flow-site { grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem; }
  .hm-flow-site .hm-flow-langs { display: none; }
  .hm-flow-to { grid-auto-rows: 4.5rem; }
  .hm-flow-wire, .hm-flow-to { margin-top: .625rem; }
  .hm-works { gap: 1rem; }
  .hm-works-track { display: flex; align-self: stretch; width: auto; max-width: none; margin: 0 -1rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .hm-works .works-names { flex: none; flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; max-width: none; padding-bottom: .75rem; }
  .hm-works .works-names li { padding: 0 1rem; font-size: 1.125rem; line-height: 1.75rem; }
  .hm-works-dup { display: flex !important; }
  .hm-works-any { max-width: 18rem; text-align: center; font-size: 13px; }
  .hm-ide { border-radius: 1.125rem; }
  .hm-ide-code { min-height: 0; font-size: 12px; }
  .hm-ln { padding: 0 .625rem 0 .875rem; }
  .hm-term { margin: -1.25rem .75rem 0; }
  .hm-term-out { white-space: normal; align-items: flex-start; }
  .hm-board { grid-template-columns: minmax(0, 1fr); }
  .hm-card { padding: 1.125rem 1.125rem; }
  .hm-big { font-size: 1.875rem; line-height: 2.25rem; }
  .hm-kpis b { font-size: 1.125rem; }
  .hm-kpis > div + div { padding-left: .75rem; }
  .hm-kpis .hm-k { font-size: 12px; }
  .hm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.5rem; }
  .hm-facts > div { padding: 1.25rem 1rem 0 0; }
  .hm-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hm-facts > div + div { padding-left: 1rem; }
  .hm-facts > div:nth-child(3) { padding-left: 0; }
  .hm-facts dd { font-size: 2rem; line-height: 2.25rem; }
  .hm-facts dt { font-size: 13px; line-height: 18px; }
  .hm-sw { grid-template-columns: minmax(0, 1fr); padding: .5rem; border-radius: 1.375rem; }
  .hm-sw-side { padding: .5rem; }
  .hm-sw-list { grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .hm-sw-list::-webkit-scrollbar { display: none; }
  .hm-sw-list li { scroll-snap-align: start; }
  .hm-sw-hint, .hm-sw-check { display: none; }
  .hm-sw-list li { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .hm-sw-main { padding: 1rem; }
  .hm-sw-panel { min-height: 0; }
  .hm-sw-sites li { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .hm-sw-langs { display: none; }
  .hm-cta-btns { flex-direction: column; align-self: stretch; }
  .hm-cta-btns a { justify-content: center; }
  .hm-fan { height: 15rem; margin-top: 2.5rem; }
  .hm-fan-card { width: 80%; max-width: none; border-radius: .875rem; }
  .hm-fan.is-in .hm-fan-card.f1 { transform: translateX(-88%) rotate(-5deg) translateY(1.5rem); }
  .hm-fan.is-in .hm-fan-card.f3 { transform: translateX(-12%) rotate(5deg) translateY(1.5rem); }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
  .hm-works-track > ul { animation: hm-marquee 26s linear infinite; }
  .hm-works-track:hover > ul, .hm-works-track.is-off > ul { animation-play-state: paused; }
  @keyframes hm-marquee { to { transform: translateX(-100%); } }
}
/* fără mișcare, banda de pe telefon devine un rând centrat; pe desktop rămâne rândul din site.css */
@media (prefers-reduced-motion: reduce) and (max-width: 767.98px) {
  .hm-works .works-names { flex: 1; flex-wrap: wrap; justify-content: center; gap: 1rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-works-dup { display: none !important; }
  .hm-works-track { -webkit-mask-image: none; mask-image: none; margin: 0; }
  .mk-tab-ind, .hm-fan-card, .mk-tp-shot img, .hm-dot { transition: none; }
  .hm-board .hm-line, .hm-board .hm-area, .hm-board .hm-dot, .hm-board .hm-src li i { transition: none !important; }
  .hm-ide-p, .hm-sw-panel.is-on, .hm-sw-panel.is-on .hm-sw-sites li { animation: none; }
  .hm-flow-lines .pulse { display: none; }
}

/* ── v3: intrarea eroului (docs/design-v3/MISCARE-V3.md); jetoanele --m-* în palette.css ── */
html.mk[data-paper] .hero-mark { position: relative; background: none; }
html.mk[data-paper] .hero-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: .094em; height: .075em; border-radius: .04em; background: var(--p-accent); transform-origin: 0 50%; }
html.mk[data-paper] .hero-frame { position: relative; isolation: isolate; }
@media (prefers-reduced-motion: no-preference) {
  /* eroul: cuvintele urcă din masca lor, unul după altul; textul pornește de la opacitate .01, ca să conteze pentru LCP */
  html.mk[data-paper] .lp-hero .hl-in { animation: none; }
  html.mk[data-paper] .hero-h1 .hl { overflow: visible; padding: 0; margin: 0; }
  /* linia de sub „numbers/cifrele” se trage după ce cuvântul s-a așezat */
  html.mk[data-paper] .hero-mark::after { animation: m-draw var(--m-4) var(--m-out) calc(60ms + var(--wi, 0) * 45ms + var(--m-4) * .7) both; }
  @keyframes m-draw { from { transform: scaleX(0); } }
  html.mk[data-paper] .lp-hero .hz { animation: m-rise var(--m-4) var(--m-out) calc(var(--hz, 0ms) * .8) both; }
  /* captura urcă puțin mărită, umbra se așază după ea; cardurile plutitoare vin ultimele */
  html.mk[data-paper] .hero-stage { animation: m-stage calc(var(--m-4) * 1.5) var(--m-out) 260ms both; }
  html.mk[data-paper] .hero-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 1.25rem; box-shadow: var(--shot-sh); pointer-events: none; animation: m-fade var(--m-4) var(--m-out) 700ms both; }
  html.mk[data-paper] .hero-stage .hero-screen { box-shadow: 0 0 0 1px var(--p-rule); }
  @keyframes m-fade { from { opacity: 0; } }
  html.mk[data-paper] .hm-float { animation: m-float var(--m-4) var(--m-out) both; }
  html.mk[data-paper] .hm-float-live { animation-delay: 820ms; }
  html.mk[data-paper] .hm-float-pub { animation-delay: 940ms; }
  @keyframes m-float { from { opacity: 0; transform: translateY(.75rem) scale(.97); } }
  @supports (animation-timeline: scroll()) {
    html.mk[data-paper] .hm-tilt { animation-name: m-tilt; }
    @keyframes m-tilt { from { transform: rotateX(5deg) scale(.985); } to { transform: none; } }
  }

}
@media (max-width: 767.98px) { html.mk[data-paper] .hero-frame::after { border-radius: 1rem; } }
@media (min-width: 768px) and (max-width: 1023.98px) { html.mk[data-paper] .hero-frame::after { border-radius: 1.125rem; } }