/*!
 * itm-componente.css — biblioteca de componente ITargetMarketing (22 oct 2026)
 *
 * Componente ORIGINALE, construite pe categoriile uzuale ale bibliotecilor de UI
 * (hero, anunț, avantaje, bento, carduri, prețuri, comparații, dovezi, CTA, FAQ,
 * tab-uri, cronologie, galerie, video, text, butoane). Nicio linie copiată din
 * marketplace-uri: doar ideea funcțională, refăcută pe sistemul ITM v12.
 *
 * Reguli: tokenii din itm-tokens.css (cu valori de rezervă, ca piesa să arate
 * corect și pe o pagină fără tokeni), grilă de 8 px, Syne + Inter + JetBrains Mono,
 * butonul coral are textul #060C1A, coralul nu colorează text mic (în tema deschisă
 * ar da 2,82:1), mișcare doar pe transform și opacity, prefers-reduced-motion
 * respectat în același fișier. Totul e sub .itm-c, ca să nu atingă restul paginii.
 */

.itm-c {
  --c-coral: var(--coral, #FF5C35);
  --c-blue: var(--blue, #5B8AF5);
  --c-bg: var(--void, #060C1A);
  --c-surface: var(--surface, #0D1730);
  --c-card: var(--card, #0F1C38);
  --c-raised: var(--raised, #142040);
  --c-border: var(--border, rgba(91,138,245,.08));
  --c-border-2: var(--border-hover, rgba(255,92,53,.30));
  --c-text: var(--text, #F2F0FA);
  --c-dim: var(--text-dim, #A9A8BC);
  --c-on-coral: #060C1A;
  --c-display: var(--font-display, 'Syne', 'Helvetica Neue', sans-serif);
  --c-body: var(--font-body, 'Inter', system-ui, sans-serif);
  --c-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  --c-ease: var(--ease-out, cubic-bezier(.16,1,.3,1));
  --c-r: var(--r-lg, 16px);
  position: relative;
  padding: 96px 24px;
  color: var(--c-text);
  font-family: var(--c-body);
  font-size: 16px;
  line-height: 1.6;
  isolation: isolate;
}
.itm-c *, .itm-c *::before, .itm-c *::after { box-sizing: border-box; }
.itm-c__in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.itm-c__in--ingust { max-width: 820px; }
.itm-c__cap { max-width: 720px; margin: 0 0 48px; }
.itm-c__cap--centru { margin-inline: auto; text-align: center; }
.itm-c__eticheta {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font: 500 12px/1.4 var(--c-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-dim);
}
.itm-c__eticheta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-coral); flex: none; }
.itm-c__titlu {
  margin: 16px 0 0; font: 700 clamp(32px, 5vw, 50px)/1.1 var(--c-display);
  letter-spacing: -.02em; color: var(--c-text);
}
.itm-c__titlu em { font-style: normal; background: linear-gradient(90deg, var(--c-coral), var(--c-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.itm-c__titlu--mare { font-size: clamp(40px, 7vw, 89px); line-height: 1; letter-spacing: -.03em; }
.itm-c__lead { margin: 24px 0 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--c-dim); max-width: 62ch; }
.itm-c__cap--centru .itm-c__lead { margin-inline: auto; }
.itm-c__nota { margin: 16px 0 0; font: 400 12px/1.5 var(--c-mono); color: var(--c-dim); }

/* ── Butoane (scopate în bibliotecă; forma vine din itm-ui.css) ─────────── */
.itm-c__actiuni { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; align-items: center; }
.itm-c__cap--centru .itm-c__actiuni { justify-content: center; }
.itm-c .btn-p, .itm-c .btn-s, .itm-c .itm-c-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 12px;
  font: 600 15px/1.2 var(--c-body); text-decoration: none; cursor: pointer;
  transition: transform .3s var(--c-ease), box-shadow .3s var(--c-ease), background-color .2s var(--c-ease), border-color .2s var(--c-ease);
}
.itm-c .btn-p { background: var(--c-coral); color: var(--c-on-coral); border: 1px solid var(--c-coral); }
.itm-c .btn-s { background: transparent; color: var(--c-text); border: 1px solid var(--c-border-2); }
.itm-c .itm-c-link { min-height: 44px; padding: 0; color: var(--c-text); border: 0; background: none; text-decoration: underline; text-decoration-color: var(--c-coral); text-underline-offset: 4px; }
.itm-c .itm-c-link .itm-icon, .itm-c .btn-p .itm-icon, .itm-c .btn-s .itm-icon { width: 18px; height: 18px; }
@media (hover: hover) {
  .itm-c .btn-p:hover, .itm-c .btn-s:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(255,92,53,.45); }
  .itm-c .btn-s:hover { border-color: var(--c-coral); }
  .itm-c .itm-c-link:hover { text-decoration-thickness: 2px; }
}
.itm-c a:focus-visible, .itm-c button:focus-visible, .itm-c summary:focus-visible, .itm-c [tabindex]:focus-visible, .itm-c input:focus-visible {
  outline: 2px solid var(--c-coral); outline-offset: 3px; border-radius: 8px;
}
.itm-c .btn-p:active, .itm-c .btn-s:active { transform: scale(.98); transition-duration: .08s; }

/* ── Suprafețe comune ───────────────────────────────────────────────────── */
.itm-c__card {
  position: relative; padding: 24px; border-radius: var(--c-r);
  background: var(--c-card); border: 1px solid var(--c-border);
}
.itm-c__card h3 { margin: 16px 0 8px; font: 700 21px/1.25 var(--c-display); color: var(--c-text); }
.itm-c__card p { margin: 0; color: var(--c-dim); }
.itm-c__icoana {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255,92,53,.12); border: 1px solid rgba(255,92,53,.28); color: var(--c-text);
}
.itm-c__icoana .itm-icon { width: 24px; height: 24px; }
.itm-c__grila { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.itm-c__grila--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.itm-c__grila--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Completat de om: textul dintre paranteze drepte se înlocuiește înainte de publicare (conturul apare doar în editor). */
body.itm-ed-mod [data-itm-completeaza], .editor-styles-wrapper [data-itm-completeaza], .itm-ev-previzualizare [data-itm-completeaza] { outline: 1px dashed rgba(91,138,245,.6); outline-offset: 4px; }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.itm-c--hero { padding-block: 128px 96px; overflow: hidden; }
.itm-c--hero .itm-c__cap { margin-bottom: 0; }
.itm-c-impartit { display: grid; gap: 48px; align-items: center; grid-template-columns: 1.1fr .9fr; }
.itm-c-vizual {
  position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 10%, rgba(255,92,53,.22), transparent 60%),
              radial-gradient(120% 90% at 90% 90%, rgba(91,138,245,.24), transparent 60%), var(--c-card);
  border: 1px solid var(--c-border);
}
.itm-c-vizual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.itm-c-vizual__eticheta {
  position: absolute; left: 24px; bottom: 24px; padding: 8px 16px; border-radius: 999px;
  background: rgba(6,12,26,.72); color: #F2F0FA; font: 500 12px/1.4 var(--c-mono);
  backdrop-filter: blur(8px);
}
.itm-c-aurora { position: absolute; inset: -20%; z-index: 0; pointer-events: none; filter: blur(64px); opacity: .55; }
.itm-c-aurora span { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.itm-c-aurora span:nth-child(1) { left: 6%; top: 10%; background: var(--c-coral); animation: itm-c-deriva 18s var(--c-ease) infinite alternate; }
.itm-c-aurora span:nth-child(2) { right: 4%; top: 22%; background: var(--c-blue); animation: itm-c-deriva 22s var(--c-ease) infinite alternate-reverse; }
.itm-c-aurora span:nth-child(3) { left: 30%; bottom: 0; width: 34%; background: var(--n-violet, #BF5FFF); opacity: .6; animation: itm-c-deriva 26s var(--c-ease) infinite alternate; }
@keyframes itm-c-deriva { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(8%, -6%, 0) scale(1.12); } }
.itm-c-rotativ { display: inline-grid; vertical-align: bottom; }
.itm-c-rotativ > span { grid-area: 1 / 1; transition: opacity .4s var(--c-ease), transform .4s var(--c-ease); }
.itm-c-rotativ > span[aria-hidden="true"] { opacity: 0; transform: translateY(40%); }
.itm-c-terminal {
  margin-top: 32px; padding: 24px; border-radius: 16px; background: #060C1A;
  border: 1px solid var(--c-border); font: 400 14px/1.8 var(--c-mono); color: #F2F0FA;
}
.itm-c-terminal ul { list-style: none; margin: 0; padding: 0; }
.itm-c-terminal li::before { content: "→ "; color: var(--c-coral); }

/* ── ANUNȚ ȘI BANDĂ ─────────────────────────────────────────────────────── */
.itm-c--anunt { padding: 16px 24px; }
.itm-c-anunt {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center;
  max-width: 820px; margin: 0 auto; padding: 8px 8px 8px 8px; border-radius: 999px;
  background: var(--c-card); border: 1px solid var(--c-border); text-align: center;
}
.itm-c-anunt__pill { padding: 4px 12px; border-radius: 999px; background: var(--c-coral); color: var(--c-on-coral); font: 600 12px/1.4 var(--c-mono); letter-spacing: .06em; text-transform: uppercase; }
.itm-c-anunt p { margin: 0; color: var(--c-text); font-size: 15px; }
.itm-c-anunt a { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-coral); text-underline-offset: 3px; }
.itm-c--banda { padding-block: 32px; overflow: hidden; }
.itm-c-banda { display: flex; align-items: center; gap: 16px; }
.itm-c-banda__fereastra { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.itm-c-banda__sir { display: flex; width: max-content; gap: 48px; animation: itm-c-banda 40s linear infinite; }
.itm-c-banda__sir span { font: 700 clamp(20px, 2.4vw, 28px)/1.2 var(--c-display); color: var(--c-dim); white-space: nowrap; }
.itm-c-banda__sir span::after { content: "·"; margin-left: 48px; color: var(--c-coral); }
.itm-c-banda[data-pauza="1"] .itm-c-banda__sir { animation-play-state: paused; }
.itm-c-banda__pauza {
  flex: none; min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--c-border-2);
  background: transparent; color: var(--c-text); cursor: pointer; font: 500 12px/1 var(--c-mono);
}
@keyframes itm-c-banda { to { transform: translate3d(-50%, 0, 0); } }
/* Tema deschisă: itm-theme.js coboară coralul la #CA2700; #060C1A pe el dă 3,5:1, sub prag.
   Convenția site-ului (itm-ui.css) e textul alb pe coralul închis: 5,5:1. */
[data-theme="light"] .itm-c { --c-on-coral: #FFFFFF; }
/* Banda de prețuri: nume (Syne), sumă (JetBrains Mono), unitate (Inter). Sumele sunt
   în culoarea textului, nu în coral: textul mic coral pică pragul de contrast pe tema deschisă. */
.itm-c--preturi .itm-c-banda { flex-wrap: wrap; row-gap: 8px; }
.itm-c-banda__nota { flex: 1 1 100%; margin: 0; font: 500 12px/1.4 var(--c-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-dim); }
.itm-c-banda__sir .itm-c-banda__pret { display: inline-flex; align-items: baseline; gap: 8px; font: 400 clamp(16px, 1.6vw, 21px)/1.3 var(--c-body); color: var(--c-dim); }
.itm-c-banda__pret b { font: 700 1em/1.3 var(--c-display); color: var(--c-text); }
.itm-c-banda__pret strong { font: 600 1em/1.3 var(--c-mono); color: var(--c-text); }
.itm-c-banda__pret strong em { font-style: normal; }
.itm-c-banda__pret small { font-size: .75em; }
.itm-c--preturi .itm-c-link { flex: none; font-size: 14px; }

/* ── AVANTAJE, BENTO, LISTE, PAȘI ───────────────────────────────────────── */
.itm-c-bento { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto); }
.itm-c-bento > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.itm-c-bento > :nth-child(4) { grid-column: span 2; }
.itm-c-bento .itm-c__card { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.itm-c-bento > :nth-child(1)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(80% 70% at 80% 10%, rgba(255,92,53,.18), transparent 70%);
}
.itm-c-bento > :nth-child(1) h3 { font-size: clamp(24px, 2.6vw, 37px); }
.itm-c-bifat { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.itm-c-bifat li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; color: var(--c-text); }
.itm-c-bifat li .itm-icon { width: 24px; height: 24px; margin-top: 2px; color: var(--c-blue); }
.itm-c-bifat li span { color: var(--c-dim); }
.itm-c-bifat strong { color: var(--c-text); font-weight: 600; }
.itm-c-pasi { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: pas; }
.itm-c-pasi li { position: relative; padding: 24px; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-border); counter-increment: pas; }
.itm-c-pasi li::before { content: counter(pas, decimal-leading-zero); display: block; font: 700 14px/1 var(--c-mono); color: var(--c-dim); margin-bottom: 16px; }
.itm-c-pasi h3 { margin: 0 0 8px; font: 700 21px/1.25 var(--c-display); }
.itm-c-pasi p { margin: 0; color: var(--c-dim); }

/* ── CARDURI ────────────────────────────────────────────────────────────── */
.itm-c-card-link { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; height: 100%; transition: transform .3s var(--c-ease), border-color .2s var(--c-ease); }
.itm-c-card-link .itm-c-link { margin-top: auto; padding-top: 16px; }
@media (hover: hover) { .itm-c-card-link:hover { transform: translateY(-4px); border-color: var(--c-border-2); } }
.itm-c-articol { padding: 0; overflow: hidden; }
.itm-c-articol__img { aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(255,92,53,.25), rgba(91,138,245,.25)), var(--c-raised); }
.itm-c-articol__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.itm-c-articol__corp { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.itm-c-articol__cat { font: 500 12px/1.4 var(--c-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dim); }
.itm-c-articol h3 { margin: 0; }
.itm-c-reflector { overflow: hidden; }
.itm-c-reflector::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), rgba(91,138,245,.18), transparent 60%);
  transition: opacity .3s var(--c-ease);
}
@media (hover: hover) { .itm-c-reflector:hover::before { opacity: 1; } }
.itm-c-margine { background: var(--c-card); }
.itm-c-margine::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--c-coral), var(--c-blue), var(--n-violet, #BF5FFF));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .35; transition: opacity .3s var(--c-ease);
}
@media (hover: hover) { .itm-c-margine:hover::after { opacity: 1; } }

/* ── PREȚURI ȘI COMPARAȚII ──────────────────────────────────────────────── */
.itm-c-pret { display: flex; flex-direction: column; gap: 16px; }
.itm-c-pret--recomandat { border-color: var(--c-coral); box-shadow: 0 0 0 1px var(--c-coral), 0 24px 64px -32px rgba(255,92,53,.5); }
.itm-c-pret__eticheta { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--c-coral); color: var(--c-on-coral); font: 600 12px/1.4 var(--c-mono); }
.itm-c-pret__suma { margin: 0; font: 700 clamp(32px, 4vw, 50px)/1 var(--c-display); color: var(--c-text); }
.itm-c-pret__suma small { font: 400 14px/1 var(--c-body); color: var(--c-dim); }
.itm-c-pret .itm-c-bifat { gap: 8px; font-size: 15px; }
.itm-c-pret .btn-p, .itm-c-pret .btn-s { margin-top: auto; width: 100%; }
.itm-c-tabel-cutie { overflow-x: auto; border-radius: 16px; border: 1px solid var(--c-border); background: var(--c-card); }
.itm-c-tabel { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
.itm-c-tabel caption { text-align: left; padding: 16px 24px 0; font: 500 12px/1.4 var(--c-mono); color: var(--c-dim); text-transform: uppercase; letter-spacing: .1em; }
.itm-c-tabel th, .itm-c-tabel td { padding: 16px 24px; text-align: left; border-bottom: 1px solid var(--c-border); color: var(--c-text); vertical-align: top; }
.itm-c-tabel thead th { font: 700 15px/1.3 var(--c-display); }
.itm-c-tabel tbody th { font-weight: 500; color: var(--c-dim); }
.itm-c-tabel tr:last-child > * { border-bottom: 0; }
.itm-c-da, .itm-c-nu { display: inline-flex; align-items: center; gap: 8px; }
.itm-c-da .itm-icon { color: var(--c-blue); width: 20px; height: 20px; }
.itm-c-nu .itm-icon { color: var(--c-dim); width: 20px; height: 20px; }

/* ── DOVEZI ─────────────────────────────────────────────────────────────── */
.itm-c-clienti { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; margin: 0; padding: 0; list-style: none; }
.itm-c-clienti li { font: 700 clamp(17px, 1.8vw, 21px)/1.3 var(--c-display); color: var(--c-dim); }
.itm-c-marturie { margin: 0; padding: 48px; border-radius: 24px; background: var(--c-card); border: 1px solid var(--c-border); }
.itm-c-marturie blockquote { margin: 0; font: 500 clamp(20px, 2.4vw, 28px)/1.45 var(--c-display); color: var(--c-text); }
.itm-c-marturie figcaption { margin-top: 24px; display: flex; flex-direction: column; gap: 4px; color: var(--c-dim); font-size: 15px; }
.itm-c-marturie figcaption strong { color: var(--c-text); font-weight: 600; }
.itm-c-cifre { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 0; }
.itm-c-cifre div { padding: 24px; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-border); }
.itm-c-cifre dt { order: 2; color: var(--c-dim); font-size: 15px; margin-top: 8px; }
.itm-c-cifre dd { margin: 0; font: 700 clamp(32px, 4vw, 50px)/1 var(--c-mono); color: var(--c-text); }
.itm-c-cifre div { display: flex; flex-direction: column; }
.itm-c-cifre small { order: 3; margin-top: 8px; font: 400 12px/1.4 var(--c-mono); color: var(--c-dim); }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.itm-c-cta {
  position: relative; overflow: hidden; padding: 64px 48px; border-radius: 24px; text-align: center;
  background: radial-gradient(90% 120% at 50% 0%, rgba(255,92,53,.20), transparent 60%), var(--c-card);
  border: 1px solid var(--c-border-2);
}
.itm-c-cta .itm-c__titlu { margin-top: 0; }
.itm-c-cta .itm-c__lead, .itm-c-cta .itm-c__actiuni { margin-inline: auto; justify-content: center; }
.itm-c-cta-dublu { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.itm-c-cta-dublu .itm-c__card { padding: 40px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.itm-c-cta-dublu .itm-c__card h3 { margin: 0; font-size: clamp(24px, 2.6vw, 28px); }

/* ── FAQ, TAB-URI, CRONOLOGIE, CUPRINS ──────────────────────────────────── */
.itm-c-faq { display: grid; gap: 12px; }
.itm-c-faq details { border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-border); }
.itm-c-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: 56px; padding: 16px 24px; font: 600 17px/1.4 var(--c-body); color: var(--c-text);
}
.itm-c-faq summary::-webkit-details-marker { display: none; }
.itm-c-faq summary::after { content: "+"; font: 400 24px/1 var(--c-mono); color: var(--c-dim); transition: transform .3s var(--c-ease); }
.itm-c-faq details[open] summary::after { transform: rotate(45deg); }
.itm-c-faq details > div { padding: 0 24px 24px; color: var(--c-dim); }
.itm-c-faq details > div p { margin: 0; }
.itm-c-taburi [role="tablist"] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.itm-c-taburi [role="tab"] {
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--c-border-2);
  background: transparent; color: var(--c-text); font: 500 15px/1 var(--c-body); cursor: pointer;
}
.itm-c-taburi [role="tab"][aria-selected="true"] { background: var(--c-coral); border-color: var(--c-coral); color: var(--c-on-coral); }
.itm-c-taburi [role="tabpanel"] { padding: 32px; border-radius: 24px; background: var(--c-card); border: 1px solid var(--c-border); }
.itm-c-taburi [role="tabpanel"] h3 { margin: 0 0 8px; font: 700 24px/1.25 var(--c-display); }
.itm-c-taburi [role="tabpanel"] p { margin: 0; color: var(--c-dim); }
.itm-c-cronologie { list-style: none; margin: 0; padding: 0 0 0 32px; position: relative; display: grid; gap: 32px; }
.itm-c-cronologie::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--c-coral), var(--c-blue)); border-radius: 2px; }
.itm-c-cronologie li { position: relative; }
.itm-c-cronologie li::before { content: ""; position: absolute; left: -32px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-coral); }
.itm-c-cronologie time { font: 500 12px/1.4 var(--c-mono); color: var(--c-dim); letter-spacing: .08em; text-transform: uppercase; }
.itm-c-cronologie h3 { margin: 4px 0 8px; font: 700 21px/1.25 var(--c-display); }
.itm-c-cronologie p { margin: 0; color: var(--c-dim); }
.itm-c-cuprins { padding: 24px; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-border); }
.itm-c-cuprins h2 { margin: 0 0 16px; font: 500 12px/1.4 var(--c-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-dim); }
.itm-c-cuprins ol { margin: 0; padding-left: 24px; display: grid; gap: 8px; }
.itm-c-cuprins a { color: var(--c-text); text-decoration: underline; text-decoration-color: rgba(255,92,53,.6); text-underline-offset: 3px; }

/* ── OAMENI, MEDIA, CONTACT ─────────────────────────────────────────────── */
.itm-c-oameni { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); list-style: none; margin: 0; padding: 0; }
.itm-c-oameni li { padding: 24px; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-border); }
.itm-c-oameni__init {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,92,53,.3), rgba(91,138,245,.3)); font: 700 21px/1 var(--c-display); color: var(--c-text);
}
.itm-c-oameni h3 { margin: 16px 0 4px; font: 700 19px/1.3 var(--c-display); }
.itm-c-oameni p { margin: 0; color: var(--c-dim); font-size: 15px; }
.itm-c-galerie { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 0; }
.itm-c-galerie figure { margin: 0; border-radius: 16px; overflow: hidden; background: var(--c-card); border: 1px solid var(--c-border); }
.itm-c-galerie img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.itm-c-galerie figcaption { padding: 12px 16px; font-size: 14px; color: var(--c-dim); }
.itm-c-video { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--c-card); border: 1px solid var(--c-border); }
.itm-c-video__start {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer; display: grid; place-items: center; gap: 16px; color: #F2F0FA;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,92,53,.25), transparent 70%), linear-gradient(135deg, #0F1C38, #060C1A);
  font: 600 15px/1.4 var(--c-body);
}
.itm-c-video__start span:first-child { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--c-coral); color: var(--c-on-coral); font-size: 28px; transition: transform .3s var(--c-ease); }
@media (hover: hover) { .itm-c-video__start:hover span:first-child { transform: scale(1.06); } }
.itm-c-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.itm-c-media-text { display: grid; gap: 48px; align-items: center; grid-template-columns: 1fr 1fr; }
.itm-c-media-text--invers > :first-child { order: 2; }
.itm-c-id { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--c-card); border: 1px solid var(--c-border); }
.itm-c-id img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.itm-c-id__dupa { clip-path: inset(0 0 0 var(--poz, 50%)); }
.itm-c-id__linie { position: absolute; top: 0; bottom: 0; left: var(--poz, 50%); width: 2px; background: #F2F0FA; box-shadow: 0 0 0 1px rgba(6,12,26,.4); pointer-events: none; }
.itm-c-id__eticheta { position: absolute; top: 16px; padding: 4px 12px; border-radius: 999px; background: rgba(6,12,26,.72); color: #F2F0FA; font: 500 12px/1.4 var(--c-mono); }
.itm-c-id__eticheta--st { left: 16px; } .itm-c-id__eticheta--dr { right: 16px; }
.itm-c-id-control { display: flex; gap: 16px; align-items: center; margin-top: 16px; color: var(--c-dim); font-size: 14px; }
.itm-c-id-control input { flex: 1; accent-color: var(--c-coral); min-height: 44px; }
.itm-c-locatie { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.itm-c-locatie address { font-style: normal; color: var(--c-text); }
.itm-c-locatie a { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-coral); text-underline-offset: 3px; }

/* ── TEXT ───────────────────────────────────────────────────────────────── */
.itm-c-citat { margin: 0; padding-left: 32px; border-left: 3px solid var(--c-coral); }
.itm-c-citat p { margin: 0; font: 700 clamp(28px, 4vw, 50px)/1.15 var(--c-display); letter-spacing: -.02em; color: var(--c-text); }
.itm-c-citat footer { margin-top: 16px; font: 500 14px/1.4 var(--c-mono); color: var(--c-dim); }
.itm-c-etichete { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.itm-c-etichete li { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--c-border-2); color: var(--c-text); font: 500 14px/1.2 var(--c-body); }
.itm-c--separator { padding-block: 32px; }
.itm-c-separator { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--c-coral), var(--c-blue), transparent); }
.itm-c-progres { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--c-coral), var(--c-blue)); pointer-events: none; }
.itm-c--progres { padding: 0; }

/* ── EFECTE IMERSIVE (piesele care folosesc bibliotecile itm-animations / itm-imersiv / itm-natura) ── */
.itm-c--efect .itm-c-efect { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; padding: 32px; border-radius: 24px; background: var(--c-surface); border: 1px solid var(--c-border); overflow: hidden; }
.itm-c--efect .scena { position: absolute; inset: 0; border-radius: inherit; }
.itm-c--efect .cutie { position: relative; width: min(100%, 520px); padding: 24px; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-border); }
.itm-c--efect .t { margin: 0 0 8px; font: 700 21px/1.3 var(--c-display); color: var(--c-text); }
.itm-c--efect .s { margin: 0; color: var(--c-dim); }
.itm-c--efect .titlu-mare { margin: 0; text-align: center; font: 700 clamp(28px, 4vw, 50px)/1.15 var(--c-display); color: var(--c-text); }
.itm-c--efect .cifra { margin: 0; font: 700 clamp(40px, 6vw, 67px)/1 var(--c-mono); color: var(--c-text); }
.itm-c--efect .btn, .itm-c--efect .buton {
  min-height: 48px; padding: 0 24px; border-radius: 12px; border: 0; cursor: pointer;
  font: 600 15px/1.2 var(--c-body); background: var(--c-coral); color: var(--c-on-coral); position: relative; overflow: hidden;
}
.itm-c--efect .btn-2 { background: var(--c-blue); color: var(--c-on-coral); }
.itm-c--efect .banda { display: flex; gap: 32px; width: 100%; overflow: hidden; font: 400 14px/1.4 var(--c-mono); color: var(--c-dim); }
.itm-c--efect .banda span { white-space: nowrap; }
.itm-c--efect .trei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.itm-c--efect .mic { padding: 16px; border-radius: 12px; text-align: center; background: var(--c-card); border: 1px solid var(--c-border); color: var(--c-text); font-size: 14px; }
.itm-c--efect .rot { display: inline-block; min-width: 7ch; color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-coral); }


/* ═══ LOTUL 2 (22 oct 2026): dock, bară fixă, pași orizontali, zigzag, inel, eveniment,
       portofoliu, bandă de clienți, contur animat, hero cu reflector și cu grilă,
       FAQ pe două coloane, carusel, info, dialog, anunț închis, avatare, text marcat,
       comutator de preț, listă numerotată, resurse utile ═══ */
.itm-c--fix { padding: 0; }
.itm-c-dock {
  position: fixed; right: 16px; bottom: 96px; z-index: 900; display: flex; flex-direction: column; gap: 8px;
  padding: 8px; border-radius: 16px; background: rgba(6,12,26,.88); border: 1px solid var(--c-border-2); backdrop-filter: blur(12px);
}
.itm-c-dock a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: #F2F0FA; text-decoration: none; transition: transform .3s var(--c-ease), background-color .2s var(--c-ease); }
.itm-c-dock a .itm-icon { width: 22px; height: 22px; }
@media (hover: hover) { .itm-c-dock a:hover { background: rgba(255,92,53,.18); transform: translateY(-2px); } }
.itm-c-dock a:focus-visible { outline: 2px solid var(--c-coral); outline-offset: 2px; }
.itm-c-bara-cta {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 820px; margin: 0 auto; padding: 12px 12px 12px 20px; border-radius: 16px; background: #060C1A; color: #F2F0FA;
  border: 1px solid var(--c-border-2); box-shadow: 0 18px 48px rgba(6,12,26,.45);
}
.itm-c-bara-cta p { margin: 0; font-weight: 600; }
.itm-c-bara-cta .btn-p { flex: none; }
.itm-c-bara-cta__inchide { flex: none; min-width: 44px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: #F2F0FA; font-size: 20px; cursor: pointer; }
.itm-c-orizontal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; counter-reset: o; position: relative; }
.itm-c-orizontal li { position: relative; padding-top: 56px; counter-increment: o; }
.itm-c-orizontal li::before { content: counter(o); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-coral); color: var(--c-on-coral); font: 700 16px/1 var(--c-mono); }
.itm-c-orizontal li::after { content: ""; position: absolute; top: 19px; left: 48px; right: -16px; height: 2px; background: linear-gradient(90deg, var(--c-coral), transparent); }
.itm-c-orizontal li:last-child::after { display: none; }
.itm-c-orizontal h3 { margin: 0 0 8px; font: 700 19px/1.3 var(--c-display); }
.itm-c-orizontal p { margin: 0; color: var(--c-dim); }
.itm-c-zigzag { display: grid; gap: 64px; }
.itm-c-zigzag > div { display: grid; gap: 48px; align-items: center; grid-template-columns: 1fr 1fr; }
.itm-c-zigzag > div:nth-child(even) > :first-child { order: 2; }
.itm-c-zigzag h3 { margin: 0 0 8px; font: 700 clamp(24px, 2.6vw, 28px)/1.25 var(--c-display); }
.itm-c-zigzag p { margin: 0; color: var(--c-dim); }
.itm-c-inele { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); list-style: none; margin: 0; padding: 0; }
.itm-c-inele li { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 24px; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-border); }
.itm-c-inel { --v: 0; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c-coral) calc(var(--v) * 1%), rgba(255,255,255,.08) 0); }
.itm-c-inel span { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--c-card); font: 700 21px/1 var(--c-mono); color: var(--c-text); }
.itm-c-inele p { margin: 0; color: var(--c-dim); font-size: 15px; }
.itm-c-eveniment { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 32px; border-radius: 24px; background: var(--c-card); border: 1px solid var(--c-border-2); }
.itm-c-eveniment__data { display: grid; place-items: center; min-width: 96px; padding: 16px; border-radius: 16px; background: var(--c-coral); color: var(--c-on-coral); text-align: center; font: 700 28px/1.1 var(--c-display); }
.itm-c-eveniment__data small { display: block; font: 600 12px/1.4 var(--c-mono); text-transform: uppercase; letter-spacing: .08em; }
.itm-c-eveniment h3 { margin: 0 0 8px; font: 700 24px/1.25 var(--c-display); }
.itm-c-eveniment p { margin: 0 0 16px; color: var(--c-dim); }
.itm-c-portofoliu { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.itm-c-portofoliu a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; padding: 24px; border-radius: 20px; overflow: hidden; text-decoration: none; color: #F2F0FA;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,92,53,.30), transparent 55%), radial-gradient(120% 90% at 100% 100%, rgba(91,138,245,.30), transparent 55%), #0F1C38; border: 1px solid var(--c-border); transition: transform .3s var(--c-ease); }
.itm-c-portofoliu small { font: 500 12px/1.4 var(--c-mono); letter-spacing: .1em; text-transform: uppercase; color: #A9A8BC; }
.itm-c-portofoliu h3 { margin: 8px 0; font: 700 24px/1.2 var(--c-display); }
.itm-c-portofoliu p { margin: 0; color: #D6D4E4; font-size: 15px; }
@media (hover: hover) { .itm-c-portofoliu a:hover { transform: translateY(-4px); } }
.itm-c-btn-contur { position: relative; isolation: isolate; }
.itm-c-btn-contur::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 14px; background: conic-gradient(from var(--u, 0deg), var(--c-coral), var(--c-blue), var(--n-violet, #BF5FFF), var(--c-coral)); animation: itm-c-roteste 4s linear infinite; }
@property --u { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes itm-c-roteste { to { --u: 360deg; } }
.itm-c--grila-fundal::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(91,138,245,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(91,138,245,.12) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent);
}
.itm-c--reflector-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(480px circle at var(--x, 50%) var(--y, 30%), rgba(255,92,53,.18), transparent 60%);
}
.itm-c-faq-2 { display: grid; gap: 48px; grid-template-columns: .8fr 1.2fr; align-items: start; }
.itm-c-carusel { position: relative; }
.itm-c-carusel__pista { display: grid; grid-auto-flow: column; grid-auto-columns: min(85%, 360px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: thin; }
.itm-c-carusel__pista > * { scroll-snap-align: start; }
.itm-c-carusel__nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.itm-c-carusel__nav button { min-width: 48px; min-height: 48px; border-radius: 12px; border: 1px solid var(--c-border-2); background: transparent; color: var(--c-text); font-size: 20px; cursor: pointer; }
.itm-c-info { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.itm-c-info button { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c-border-2); background: transparent; color: var(--c-text); font: 700 13px/1 var(--c-mono); cursor: help; }
.itm-c-info [role="tooltip"] { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 280px; padding: 8px 12px; border-radius: 8px; background: #F2F0FA; color: #060C1A; font-size: 14px; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity .2s var(--c-ease); }
.itm-c-info:hover [role="tooltip"], .itm-c-info:focus-within [role="tooltip"] { opacity: 1; }
.itm-c-dialog { max-width: min(560px, calc(100vw - 32px)); padding: 32px; border-radius: 24px; border: 1px solid var(--c-border-2); background: #060C1A; color: #F2F0FA; }
.itm-c-dialog::backdrop { background: rgba(6,12,26,.72); }
.itm-c-dialog h3 { margin: 0 0 8px; font: 700 24px/1.25 var(--c-display); }
.itm-c-dialog p { color: #A9A8BC; }
.itm-c-banner-info { display: flex; align-items: center; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 16px 16px 16px 24px; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-border-2); }
.itm-c-banner-info p { margin: 0; flex: 1; }
.itm-c-banner-info button { flex: none; min-width: 44px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--c-text); font-size: 20px; cursor: pointer; }
.itm-c-avatare { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.itm-c-avatare ul { display: flex; list-style: none; margin: 0; padding: 0; }
.itm-c-avatare li { display: grid; place-items: center; width: 48px; height: 48px; margin-left: -12px; border-radius: 50%; border: 2px solid var(--c-bg); background: linear-gradient(135deg, #FF5C35, #5B8AF5); color: #060C1A; font: 700 15px/1 var(--c-display); }
.itm-c-avatare li:first-child { margin-left: 0; }
.itm-c-avatare p { margin: 0; color: var(--c-dim); }
.itm-c-marcat { background: linear-gradient(transparent 62%, rgba(255,92,53,.35) 62%); padding: 0 4px; }
.itm-c-comutator { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--c-border-2); margin-bottom: 32px; }
.itm-c-comutator button { min-height: 40px; padding: 0 20px; border-radius: 999px; border: 0; background: transparent; color: var(--c-text); font: 600 14px/1 var(--c-body); cursor: pointer; }
.itm-c-comutator button[aria-pressed="true"] { background: var(--c-coral); color: var(--c-on-coral); }
[data-itm-perioada] [data-perioada]:not([data-activ]) { display: none; }
.itm-c-numerotat { list-style: none; margin: 0; padding: 0; counter-reset: n; border-top: 1px solid var(--c-border); }
.itm-c-numerotat li { counter-increment: n; border-bottom: 1px solid var(--c-border); }
.itm-c-numerotat a { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 24px 0; color: var(--c-text); text-decoration: none; }
.itm-c-numerotat a::before { content: counter(n, decimal-leading-zero); font: 500 14px/1 var(--c-mono); color: var(--c-dim); }
.itm-c-numerotat strong { font: 700 clamp(21px, 2.4vw, 28px)/1.2 var(--c-display); }
.itm-c-numerotat .itm-icon { width: 24px; height: 24px; transition: transform .3s var(--c-ease); }
@media (hover: hover) { .itm-c-numerotat a:hover .itm-icon { transform: translateX(6px); } }
.itm-c-utile { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
@media (max-width: 860px) {
  .itm-c-zigzag > div, .itm-c-faq-2 { grid-template-columns: 1fr; gap: 24px; }
  .itm-c-zigzag > div:nth-child(even) > :first-child { order: 0; }
  .itm-c-orizontal li::after { display: none; }
  .itm-c-eveniment { grid-template-columns: 1fr; }
  .itm-c-dock { bottom: 88px; right: 8px; }
}
@media (min-width: 861px) { .itm-c-bara-cta--mobil { display: none; } }
@media (prefers-reduced-motion: reduce) { .itm-c-btn-contur::before { animation: none; } }

/* ── Telefon ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .itm-c { padding: 64px 16px; }
  .itm-c--hero { padding-block: 96px 64px; }
  .itm-c-impartit, .itm-c-media-text { grid-template-columns: 1fr; gap: 32px; }
  .itm-c-media-text--invers > :first-child { order: 0; }
  .itm-c-bento { grid-template-columns: 1fr; }
  .itm-c-bento > :nth-child(1), .itm-c-bento > :nth-child(4) { grid-column: auto; grid-row: auto; }
  .itm-c-cta { padding: 48px 24px; }
  .itm-c-marturie { padding: 32px 24px; }
  .itm-c__actiuni > a { flex: 1 1 100%; }
}

/* ── Mișcare redusă: aceeași compoziție, fără deplasare ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .itm-c *, .itm-c *::before, .itm-c *::after { animation: none !important; transition-duration: .01ms !important; }
  .itm-c-banda__sir { flex-wrap: wrap; width: auto; gap: 16px 48px; }
  .itm-c-banda__sir [aria-hidden="true"], .itm-c-banda__pauza { display: none; }
  .itm-c-rotativ > span[aria-hidden="true"] { display: none; }
  .itm-c-progres { display: none; }
}