/* MK1 · Color tokens
 * Monochrome ink/paper system, Apple-clean. One restrained blue accent.
 * Primary actions are ink-black (Apple-style); blue is reserved for links. */
:root {
  /* --- Ink scale (neutrals) --- */
  --ink-950: #0A0A0A;   /* brand black */
  --ink-900: #141414;
  --ink-800: #1F1F1F;
  --ink-700: #333333;
  --ink-600: #525252;
  --ink-500: #737373;
  --ink-400: #A3A3A3;
  --ink-300: #D1D1D1;
  --ink-200: #E5E5E5;
  --ink-150: #EFEFEF;
  --ink-100: #F5F5F5;
  --ink-50:  #FAFAFA;
  --paper:   #FFFFFF;

  /* --- Accent (restrained) --- */
  --accent-600: #0059C7;
  --accent-500: #0071E3;   /* primary link / focus */
  --accent-400: #3B93F0;
  --accent-100: #E7F1FD;

  /* --- Semantic status --- */
  --green-600: #1D7A4C;
  --green-500: #22A366;
  --green-100: #E4F5EC;
  --amber-600: #B26A00;
  --amber-500: #E08600;
  --amber-100: #FBF0DD;
  --red-600:   #C4362B;
  --red-500:   #E24B3D;
  --red-100:   #FBE7E5;

  /* --- Semantic aliases --- */
  --surface-page:    var(--paper);
  --surface-raised:  var(--paper);
  --surface-sunken:  var(--ink-50);
  --surface-card:    var(--paper);
  --surface-inverse: var(--ink-950);
  --surface-hover:   var(--ink-100);

  --text-primary:    var(--ink-950);
  --text-secondary:  var(--ink-600);
  --text-tertiary:   var(--ink-500);
  --text-disabled:   var(--ink-400);
  --text-inverse:    var(--paper);
  --text-link:       var(--accent-500);

  --border-subtle:   var(--ink-150);
  --border-default:  var(--ink-200);
  --border-strong:   var(--ink-300);
  --border-inverse:  var(--ink-800);
  --focus-ring:      var(--accent-500);
}

/* MK1 · Typography tokens
 * Geist for UI/display, Geist Mono for code + technical labels.
 * Tight tracking on large sizes; humanist line-heights on body. */
:root {
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Weights */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-black: 800; /* @kind font */

  /* Type scale (px) */
  --fs-display-xl: 72px;
  --fs-display-l:  56px;
  --fs-display-m:  44px;
  --fs-title-l:    34px;
  --fs-title-m:    28px;
  --fs-title-s:    22px;
  --fs-body-l:     19px;
  --fs-body-m:     16px;
  --fs-body-s:     14px;
  --fs-caption:    13px;
  --fs-micro:      11px;

  /* Line heights */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug: 1.2; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-tighter: -0.03em; /* @kind font */
  --ls-tight: -0.02em; /* @kind font */
  --ls-normal: -0.01em; /* @kind font */
  --ls-wide: 0.02em; /* @kind font */
  --ls-caps: 0.08em; /* @kind font */
}

/* MK1 · Spacing + layout tokens · 4px base grid */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Layout */
  --container-max: 1120px;
  --container-wide: 1320px;
  --gutter: 24px;
  --section-y: 96px;
}

/* MK1 · Effects · radius, borders, shadows
 * Apple-restrained: soft, low-contrast shadows; generous continuous radii. */
:root {
  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Border width */
  --border-thin: 1px;
  --border-thick: 1.5px;

  /* Shadows — subtle, cool-neutral */
  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.05);
  --shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.06), 0 2px 4px rgba(10, 10, 10, 0.04);
  --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.08), 0 4px 8px rgba(10, 10, 10, 0.04);
  --shadow-xl: 0 24px 64px rgba(10, 10, 10, 0.12), 0 8px 16px rgba(10, 10, 10, 0.05);

  /* Focus ring */
  --ring-width: 3px;
  --ring-color: rgba(0, 113, 227, 0.35);
}

/* MK1 · Motion · calm, precise, Apple-like. No bounce. */
:root {
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
  --dur-slower: 500ms; /* @kind other */

  /* Easings */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* @kind other */
}

/* MK1 · Base element defaults + a few utility helpers.
 * Kept light — sets brand type + link colors so consumer pages inherit them. */
:root {
  color-scheme: light;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv01';
}
a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover {
  color: var(--accent-600);
}
*, *::before, *::after { box-sizing: border-box; }

/* Optional utility: uppercase mono eyebrow label used across the brand */
.mk1-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}


/* ==========================================================================
   MK1 · stiluri site
   Tokenii de design (culori, tipografie, spatiere, umbre, motion) vin din
   tokens.css, care e concatenat inaintea acestui fisier de build.js.
   Layout-ul responsive e facut cu media queries, nu din JavaScript.
   Praguri: 640px (mobil), 780px (meniu), 980px (tableta).
   ========================================================================== */

/* --- Fonturi locale (Geist variabil, doar latin + latin-ext) ------------- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/geist-latin-ext.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: 300 800;
  font-display: swap;
  src: url('fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/geist-mono-latin-ext.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 Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Baza ---------------------------------------------------------------- */
/* Bara de derulare ocupa mereu acelasi spatiu. Fara asta, o pagina scurta e
   cu ~15px mai lata decat una lunga, iar tot continutul centrat sare la stanga
   la fiecare schimbare de pagina.
   Atentie: "overflow-x: clip" pe <html> anuleaza scrollbar-gutter (overflow-y
   ramane "visible", deci gutterul nu se mai rezerva). De aceea nu il folosim. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; }
/* si listele numerotate: altfel isi pastreaza marcajele browserului si o
   indentare de 40px care strica grilele construite peste ele */
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
main { display: block; }
[hidden] { display: none !important; }
::selection { background: var(--ink-950); color: #fff; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Marginea laterala e o variabila: hero-ul o foloseste ca sa calculeze exact
   cat trebuie sa iasa imaginea in afara containerului. */
:root { --pad-x: 32px; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: 72px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ico { flex: none; }

/* --- Butoane (portate din design system) --------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-950);
  background: var(--ink-950);
  color: var(--text-inverse);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:hover { color: var(--text-inverse); background: var(--ink-800); }
.btn:active { transform: scale(0.97); }
.btn--secondary { background: var(--paper); color: var(--text-primary); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--ink-50); color: var(--text-primary); }
.btn--sm { height: 32px; padding: 0 18px; font-size: var(--fs-body-s); gap: 6px; border-radius: var(--radius-pill); }
.btn--lg { height: 52px; padding: 0 26px; font-size: var(--fs-body-l); gap: 10px; }
.btn--full { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* --- Navigatie ----------------------------------------------------------- */
.nav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  pointer-events: none;
}
.nav__bar {
  pointer-events: auto;
  /* deasupra meniului de telefon, altfel panoul ar acoperi chiar butonul
     cu care se inchide */
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 8px 7px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 22px rgba(10, 10, 10, 0.08);
  transition: background 320ms var(--ease-standard), box-shadow 320ms var(--ease-standard);
  animation: mk1NavIn 700ms var(--ease-out) backwards;
}
.nav.is-scrolled .nav__bar {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 34px rgba(10, 10, 10, 0.13), 0 2px 8px rgba(10, 10, 10, 0.06);
}
.nav__logo { display: inline-flex; padding: 4px 8px; border-radius: var(--radius-pill); }
.nav__sep { width: 1px; height: 20px; background: var(--border-default); margin: 0 6px; }
.nav__links { display: flex; gap: 2px; }
.nav__link {
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 200ms var(--ease-standard), background 200ms var(--ease-standard);
}
.nav__link:hover { color: var(--text-primary); background: var(--ink-50); }
.nav__link.is-active { color: var(--text-primary); font-weight: var(--fw-semibold); background: var(--ink-100); }
.nav__cta { margin-left: 6px; }
.nav__toggle,
.nav__panel { display: none; }

@media (max-width: 780px) {
  .nav { top: 12px; padding: 0 12px; }
  .nav__bar { width: 100%; max-width: 440px; justify-content: space-between; padding: 8px 8px 8px 16px; }
  .nav__logo { padding: 4px; }
  .nav__sep, .nav__links, .nav__cta { display: none; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 200ms var(--ease-standard);
  }
  .nav__toggle[aria-expanded="true"] { background: transparent; }

  /* Cele trei linii se transforma in X: primele doua se rotesc una peste
     alta, cea din mijloc dispare. Aceeasi animatie, invers, la inchidere. */
  .nav__burger { position: relative; display: block; width: 20px; height: 14px; }
  .nav__burger i {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 300ms var(--ease-out), opacity 160ms linear;
  }
  .nav__burger i:nth-child(1) { top: 0; }
  .nav__burger i:nth-child(2) { top: 6px; }
  .nav__burger i:nth-child(3) { top: 12px; }
  .nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
  .nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Meniul acopera tot ecranul: alb translucid, cu blur peste continut.
     Sta sub bara de navigatie, ca logoul si X-ul sa ramana deasupra. */
  .nav__panel {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 1;
    pointer-events: auto;
    /* Alb aproape opac + blur: pe telefoanele moderne se vede efectul de
       sticla mata, iar in browserele care ignora blurul (cele din Facebook
       sau Instagram, de unde vine traficul din reclame) meniul ramane
       oricum perfect lizibil. */
    background: rgba(255, 255, 255, 0.93);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
    padding: calc(84px + env(safe-area-inset-top, 0px)) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
  .nav__panel.is-open { display: flex; flex-direction: column; animation: mk1MenuIn 260ms var(--ease-out) backwards; }
  /* Paginile se impart egal pe toata inaltimea ramasa, centrate, fara linii.
     Ultima din sir e butonul negru. */
  .nav__panel-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }
  .nav__panel-link {
    display: block;
    padding: 4px 0;
    font-size: clamp(30px, 8.5vw, 40px);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    line-height: 1.1;
    color: var(--text-primary);
    text-decoration: none;
  }
  .nav__panel-link.is-active { font-weight: var(--fw-black); }
  /* Butonul sta in aceeasi scara cu paginile de deasupra: text apropiat ca
     marime, inaltime pe masura, latime data de cuvinte — nu o bara cat
     toata coloana. */
  .nav__panel-cta {
    height: 64px;
    padding: 0 40px;
    font-size: 24px;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    border-radius: var(--radius-md);
  }
}

/* --- Hero (prima pagina) --------------------------------------------------
   Titlul pe toata latimea, uriaș. Dedesubt, fraza si butoanele pe un rand. */
.hero { padding-top: clamp(118px, 12.5vw, 172px); }
.hero__titlu { font-size: clamp(42px, 7.8vw, 112px); font-weight: var(--fw-black); letter-spacing: -0.056em; line-height: 0.9; color: var(--text-primary); text-wrap: balance; }
.hero__titlu em { font-style: normal; color: var(--text-tertiary); }
.hero__jos { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: clamp(30px, 3.6vw, 48px); }
.hero__sub { max-width: 44ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--text-secondary); }
.hero__act { display: flex; flex: none; gap: 12px; }
@media (max-width: 900px) {
  .hero__jos { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero__act { width: 100%; }
  .hero__act .btn { flex: 1; min-width: 0; padding-inline: 12px; font-size: var(--fs-body-m); }
}

/* --- Vitrina: taburile mari si aplicatia, asezata pe granita alb/negru ---- */
.vitrina { position: relative; margin-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(36px, 4.5vw, 60px); }
.vitrina__fond { position: absolute; left: 0; right: 0; top: 300px; bottom: 0; background: var(--ink-950); }
.vitrina__in { position: relative; max-width: calc(1240px + 2 * var(--pad-x)); margin: 0 auto; padding-inline: var(--pad-x); }
.vt__taburi { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px clamp(22px, 3vw, 44px); margin-bottom: 26px; }
.vt__tab { display: inline-flex; align-items: baseline; gap: 9px; padding: 0 0 9px; border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer; }
.vt__tab.is-on { border-bottom-color: var(--ink-950); }
.vt__n { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.vt__nume { font-size: clamp(18px, 2.1vw, 28px); font-weight: var(--fw-black); letter-spacing: -0.035em; color: var(--ink-300); transition: color 150ms var(--ease-standard); }
.vt__tab:hover .vt__nume, .vt__tab.is-on .vt__nume { color: var(--ink-950); }
.vitrina .vt__taburi, .vitrina .app, .vitrina .demo__jos { --ridica: 40px; animation: mk1Ridica 1300ms cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }
.vitrina .vt__taburi { animation-delay: 880ms; }
.vitrina .app { animation-delay: 980ms; }
.vitrina .demo__jos { animation-delay: 1080ms; }
@media (prefers-reduced-motion: reduce) { .vitrina .vt__taburi, .vitrina .app, .vitrina .demo__jos { animation: none; } }
.vt .app { box-shadow: 0 50px 100px rgba(10, 10, 10, 0.28), 0 0 0 1px var(--border-default); }
.vt .demo__note { color: rgba(255, 255, 255, 0.5); }
@media (max-width: 900px) {
  .vitrina__fond { top: 360px; }
  .vt__taburi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
  .vt__tab { gap: 8px; padding: 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
  .vt__tab.is-on { background: var(--ink-950); border-color: var(--ink-950); }
  .vt__nume { font-size: 15px; letter-spacing: -0.02em; color: var(--text-secondary); }
  .vt__tab.is-on .vt__nume, .vt__tab.is-on .vt__n { color: #fff; }
}

/* --- Simptomele: text uriaș care curge, pe negru ------------------------- */
.simpt { overflow: hidden; padding: clamp(28px, 4vw, 56px) 0 clamp(80px, 10vw, 140px); background: var(--ink-950); }
.simpt__sir { display: flex; width: max-content; animation: mk1Banda 60s linear infinite; }
.simpt__sir > span { display: flex; }
.simpt__sir i { display: inline-flex; align-items: center; font-style: normal; font-size: clamp(44px, 7.2vw, 108px); font-weight: var(--fw-black); letter-spacing: -0.05em; line-height: 1.08; color: #fff; white-space: nowrap; }
.simpt__sir s { color: var(--ink-500); text-decoration: line-through; text-decoration-color: var(--red-500); text-decoration-thickness: 0.075em; text-decoration-skip-ink: none; }
.simpt__sir .simpt__ramane { color: #fff; }
.simpt__sir i::after { content: ''; flex: none; width: 0.22em; height: 0.22em; margin: 0 0.5em; border-radius: 50%; background: var(--accent-500); }
@media (prefers-reduced-motion: reduce) { .simpt__sir { animation: none; } }

/* --- Titlu mare de sectiune ---------------------------------------------- */
.titlu-mare { max-width: 16ch; font-size: clamp(32px, 4.6vw, 64px); font-weight: var(--fw-black); letter-spacing: -0.05em; line-height: 0.98; color: var(--text-primary); text-wrap: balance; }
.titlu-mare em { font-style: normal; color: var(--text-tertiary); }

/* --- Alegerea: doua coloane despartite de o linie, fara cutii ------------- */
.alegere { padding: clamp(100px, 12vw, 170px) 0 clamp(70px, 8vw, 110px); }
.alegere__grila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--border-default); }
.alegere__col { display: grid; align-content: start; gap: 26px; padding: 30px 40px 6px 0; }
.alegere__col--mk1 { padding: 30px 0 6px 40px; border-left: 1px solid var(--border-default); }
/* Intai numele variantei (eticheta si titlul mare), apoi verdictul, mai mic. */
.alegere__cap { display: grid; gap: 12px; }
.alegere__nr { display: inline-flex; justify-self: start; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--ink-100); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.alegere__col--mk1 .alegere__nr { background: var(--ink-950); color: #fff; }
.alegere__titlu { font-size: clamp(26px, 3vw, 42px); font-weight: var(--fw-black); letter-spacing: -0.045em; line-height: 1.02; color: var(--ink-500); text-wrap: balance; }
.alegere__col--mk1 .alegere__titlu { color: var(--ink-950); }
.alegere__verdict { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.4; color: var(--text-tertiary); }
.alegere__col--mk1 .alegere__verdict { color: var(--text-secondary); }
.alegere__col ul { display: grid; gap: 12px; }
.alegere__col li { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--text-tertiary); }
.alegere__col li .ico { margin-top: 3px; color: var(--red-500); }
.alegere__col--mk1 li { color: var(--text-primary); }
.alegere__col--mk1 li .ico { color: var(--green-600); }
.alegere__nota { margin-top: 44px; font-size: var(--fs-body-s); color: var(--text-tertiary); }
@media (max-width: 900px) {
  .alegere__grila { grid-template-columns: minmax(0, 1fr); }
  .alegere__col { padding: 26px 0 30px; }
  .alegere__col--mk1 { padding: 26px 0 6px; border-left: none; border-top: 1px solid var(--border-default); }
}

/* --- Cum lucram: patru pasi, fiecare cu ce primesti la pasul acela -------- */
.pasi-v { padding: clamp(60px, 7vw, 100px) 0 clamp(100px, 12vw, 170px); }
.pasi-v__grila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: clamp(44px, 5vw, 72px); }
.pas-v { display: flex; flex-direction: column; gap: 20px; padding-top: 16px; border-top: 2px solid var(--accent-500); }
/* imaginile stau jos, pe aceeasi linie, oricat de lung e textul de deasupra */
.pas-v__viz { height: 214px; margin-top: auto; }
.pas-v__text { display: grid; align-content: start; gap: 8px; min-height: 124px; }
.pas-v__n { font-family: var(--font-mono); font-size: 12px; color: var(--accent-600); }
.pas-v__text b { font-size: clamp(18px, 1.8vw, 22px); font-weight: var(--fw-bold); letter-spacing: -0.025em; color: var(--text-primary); }
.pas-v__text p { font-size: var(--fs-body-s); line-height: 1.5; color: var(--text-secondary); }

/* Fiecare imagine e un mic obiect de lucru: notitele din analiza, propunerea,
   livrarile, sistemul pornit. Desenate in HTML, la fel ca aplicatia. */
.pv { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 14px 15px; overflow: hidden; border: 1px solid var(--border-default); border-radius: 14px; background: var(--paper); box-shadow: 0 18px 40px rgba(10, 10, 10, 0.07), 0 2px 6px rgba(10, 10, 10, 0.04); font-size: 12px; line-height: 1.35; color: var(--text-primary); }
.pv__cap { display: flex; align-items: center; gap: 7px; }
.pv__cap .ico { color: var(--text-secondary); }
.pv__cap b { font-weight: 600; }
.pv__cap span { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }

.pv__flux { position: relative; display: grid; gap: 9px; padding-left: 14px; }
.pv__flux::before { content: ''; position: absolute; left: 3px; top: 9px; bottom: 9px; border-left: 1.5px dashed var(--ink-300); }
.pv__flux li { position: relative; justify-self: start; padding: 4px 9px; border-radius: 6px; background: var(--ink-100); color: var(--text-secondary); }
.pv__flux li::before { content: ''; position: absolute; left: -14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-400); }
.pv__flux li.is-cerc { background: var(--red-100); color: var(--red-600); font-weight: 500; }
.pv__cerc { position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); overflow: visible; pointer-events: none; }
.pv__cerc path { fill: none; stroke: var(--red-500); stroke-width: 1.6; stroke-linecap: round; }
.pv__nota { position: absolute; left: calc(100% + 16px); top: 50%; width: 72px; font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--red-600); transform: translateY(-50%) rotate(-5deg); }

.pv__linii { display: grid; gap: 6px; }
.pv__linii li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ink-150); }
.pv__linii span { overflow: hidden; color: var(--text-secondary); white-space: nowrap; text-overflow: ellipsis; }
.pv__linii i { font-style: normal; font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.pv__total { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.pv__total span { color: var(--text-tertiary); }
.pv__total b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.pv__semn { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pv__fix { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--green-100); font-size: 11px; font-weight: 500; color: var(--green-600); }
.pv__semn svg { width: 74px; height: 24px; }
.pv__semn path { fill: none; stroke: var(--ink-700); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.pv__sapt { position: relative; display: grid; gap: 11px; padding-left: 4px; }
.pv__sapt::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 1.5px; background: var(--ink-150); }
.pv__sapt li { position: relative; display: grid; grid-template-columns: 12px 22px minmax(0, 1fr); align-items: center; gap: 8px; }
.pv__sapt li > i { width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-300); }
.pv__sapt li.is-gata > i { background: var(--green-500); box-shadow: none; }
.pv__sapt li.is-acum > i { background: var(--accent-500); box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16); animation: mk1Puls 1400ms var(--ease-out) infinite; }
.pv__sapt b { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--text-tertiary); }
.pv__sapt span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pv__sapt li.is-acum span { font-weight: 500; }
.pv__sapt em { font-style: normal; color: var(--accent-600); }

.pv__urm { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ink-150); color: var(--text-secondary); }
.pv__urm .ico { color: var(--text-tertiary); }
.pv__urm b { font-weight: 600; color: var(--text-primary); }
.pv__viu { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 3px rgba(34, 163, 102, 0.2); }
.pv__cifre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pv__cifre div { display: grid; gap: 1px; }
.pv__cifre b { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pv__cifre span { font-size: 11px; color: var(--text-tertiary); }
.pv__grafic { width: 100%; height: 38px; }
/* ultimul card are mai mult continut (cererea pe doua randuri): spatii mai
   stranse, iar graficul are inaltime fixa, ca sa nu fie turtit */
.pv--pornit { gap: 9px; }
.pv--pornit .pv__grafic { flex: none; height: 30px; }
.pv__grafic .zona { fill: rgba(34, 163, 102, 0.12); }
.pv__grafic .linie { fill: none; stroke: var(--green-500); stroke-width: 1.6; stroke-linejoin: round; }
.pv__cerere { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 4px 7px; align-items: start; margin-top: auto; padding: 8px 9px; border-radius: 8px; background: var(--ink-50); }
.pv__cerere .ico { margin-top: 1px; color: var(--text-tertiary); }
/* cererea clientului: pe cel mult doua randuri, ca sa se citeasca toata */
.pv__cerere span { display: -webkit-box; overflow: hidden; color: var(--text-secondary); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pv__cerere em { grid-column: 2; font-style: normal; font-size: 11px; font-weight: 500; color: var(--green-600); }

@media (max-width: 1100px) { .pasi-v__grila { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; } }
@media (max-width: 640px) { .pasi-v__grila { grid-template-columns: minmax(0, 1fr); row-gap: 72px; } .pas-v__text { min-height: 0; } .pas-v { gap: 18px; } .pas-v__viz { height: 210px; margin-top: 0; } }

/* --- Final: intrebarea mare si trei randuri, pe negru --------------------- */
.final { padding: clamp(100px, 12vw, 170px) 0; background: var(--ink-950); color: #fff; }
.final__grila { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 48px; }
.final h2 { max-width: 9ch; font-size: clamp(46px, 7.4vw, 112px); font-weight: var(--fw-black); letter-spacing: -0.055em; line-height: 0.92; color: #fff; }
.final__lista { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.final__lista a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); font-size: clamp(18px, 1.8vw, 22px); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: #fff; text-decoration: none; transition: color 200ms var(--ease-standard); }
.final__lista a:hover { color: var(--accent-400); }
.final__nota { margin-top: 18px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.5); }
@media (max-width: 900px) { .final__grila { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* --- Banda de call to action --------------------------------------------- */
.ctaband { background: var(--ink-950); padding: 72px 32px; }
.ctaband__in { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ctaband h2 { font-size: clamp(26px, 3.6vw, 44px); font-weight: var(--fw-black); letter-spacing: -0.035em; color: #fff; max-width: 20ch; line-height: 1.04; }
.ctaband h2 em { font-style: normal; color: rgba(255, 255, 255, 0.5); }
/* Pusa de JS cand pe primul rand ar incapea mai putin de trei cuvinte din
   a doua propozitie: atunci incepe propozitia pe rand nou. */
.ctaband h2.is-rupt em { display: block; text-wrap: balance; }

/* ==========================================================================
   Pagina Servicii. Regula: un singur lucru mare odata, si acela iese din
   container. Capul paginii e negru, cu interfata la marimea ei adevarata,
   taiata de marginea de jos. Dedesubt trece banda. Serviciile sunt
   patru randuri uriase; doar cel deschis isi arata ecranul, pe toata latimea.
   ========================================================================== */
.svchero { position: relative; background: var(--ink-950); padding: 136px 0 0; overflow: hidden; }
.svchero .eyebrow { color: rgba(255, 255, 255, 0.5); margin-bottom: 18px; }
.svchero h1 { max-width: 17ch; font-size: clamp(40px, 7vw, 88px); font-weight: var(--fw-black); letter-spacing: -0.048em; line-height: 0.96; color: #fff; }
.svchero h1 em { font-style: normal; color: rgba(255, 255, 255, 0.42); }
.svchero__sub { margin-top: 26px; max-width: 52ch; font-size: var(--fs-body-l); line-height: var(--lh-relaxed); color: rgba(255, 255, 255, 0.62); text-wrap: pretty; }

/* Interfata, la scara ei reala: incepe in container si iese prin dreapta si
   prin jos, exact ca pe site-urile de produs. Gradientul o stinge in pagina. */
.svchero__scena { position: relative; height: 430px; margin-top: 64px; }
.svchero__scena::after { content: ''; position: absolute; inset: auto 0 0 0; height: 220px; background: linear-gradient(to bottom, rgba(10, 10, 10, 0), var(--ink-950) 88%); pointer-events: none; z-index: 2; }
.svchero__ecran { position: absolute; left: max(32px, calc((100vw - var(--container-max)) / 2 + 32px)); top: 0; width: 1240px; transform: perspective(2400px) rotateX(5deg) rotateY(-7deg); transform-origin: top left; box-shadow: 0 60px 120px rgba(0, 0, 0, 0.65); border-radius: var(--radius-lg); overflow: hidden; pointer-events: none; user-select: none; }
.svchero__ecran .demo__app { margin: 0; border: none; border-radius: 0; }
.svchero__ecran .demo__jos { display: none; }

/* Banda: aceleasi texte ca pe prima pagina (ce inlocuieste MK1, taiat, apoi
   ce ramane), dar mai mica si pe alb. Se misca singura. */
.banda { background: var(--paper); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 26px 0; overflow: hidden; }
.banda__sir { display: flex; width: max-content; animation: mk1Banda 64s linear infinite; }
.banda__sir span { display: flex; }
.banda__sir i { font-style: normal; display: inline-flex; align-items: center; font-size: clamp(19px, 2.2vw, 30px); font-weight: var(--fw-black); letter-spacing: -0.035em; color: var(--ink-300); white-space: nowrap; }
.banda__sir i::after { content: '·'; margin: 0 26px; color: var(--accent-500); }
.banda__sir s { color: var(--ink-400); text-decoration: line-through; text-decoration-color: var(--red-500); text-decoration-thickness: 0.08em; text-decoration-skip-ink: none; }
.banda__sir .banda__ramane { color: var(--ink-950); }
@keyframes mk1Banda { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .banda__sir { animation: none; } }

/* Acordeonul: randuri uriase, un singur ecran deschis odata. */
.section--strans { padding: 72px 0; }
.acc { border-top: 1px solid var(--border-default); }
.acc__item { border-bottom: 1px solid var(--border-default); scroll-margin-top: 84px; }
/* cand vii cu ancora (/#crm, /servicii#crm), titlul nu ramane sub bara de navigare */
[data-vitrina] { scroll-margin-top: 96px; }
.acc__cap { display: grid; grid-template-columns: 80px minmax(0, 1fr) 34px; align-items: center; gap: 20px; width: 100%; padding: 30px 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-sans); }
.acc__nr { font-family: var(--font-mono); font-size: 13px; color: var(--text-tertiary); }
.acc__nume { font-size: clamp(28px, 4.4vw, 56px); font-weight: var(--fw-black); letter-spacing: -0.045em; line-height: 1; color: var(--text-tertiary); transition: color var(--dur-base) var(--ease-standard); }
.acc__item.is-on .acc__nume, .acc__cap:hover .acc__nume { color: var(--text-primary); }
.acc__semn { position: relative; justify-self: end; width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 50%; transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out); }
.acc__semn::before, .acc__semn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; background: var(--text-primary); transform: translate(-50%, -50%); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-standard); }
.acc__semn::after { transform: translate(-50%, -50%) rotate(90deg); }
/* Rotesc doar liniile dinauntru, nu cercul: altfel cutia lui rotita impinge
   latimea randului cu cativa pixeli. */
.acc__item.is-on .acc__semn { background: var(--ink-950); border-color: var(--ink-950); }
.acc__item.is-on .acc__semn::before { transform: translate(-50%, -50%) rotate(45deg); }
.acc__item.is-on .acc__semn::after { transform: translate(-50%, -50%) rotate(135deg); }
.acc__item.is-on .acc__semn::before, .acc__item.is-on .acc__semn::after { background: #fff; }

.acc__corp { padding-bottom: 42px; animation: mk1FadeUp 420ms var(--ease-out) backwards; }
.acc__link { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 14px; font-weight: var(--fw-medium); color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border-strong); padding-bottom: 3px; transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.acc__link:hover { color: var(--accent-600); border-color: var(--accent-600); }



.garantii { background: var(--ink-950); padding: 88px 0; }
.garantii__titlu { max-width: 18ch; font-size: clamp(28px, 3.6vw, 46px); font-weight: var(--fw-black); letter-spacing: -0.04em; line-height: 1.05; color: #fff; }
.garantii__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.gar b { display: block; font-size: clamp(17px, 1.8vw, 21px); font-weight: var(--fw-bold); letter-spacing: -0.025em; color: #fff; }
.gar p { margin-top: 10px; font-size: var(--fs-body-s); line-height: var(--lh-normal); color: rgba(255, 255, 255, 0.6); }

/* --- Pagina Despre ---------------------------------------------------------
   Capul ca pe prima pagina. Vizualul e fisierul de comenzi pe care il are
   aproape orice firma, asezat pe granita alb/negru si taiat de marginea din
   dreapta. Coloanele se aleg dupa latimea disponibila (container queries):
   pe tableta dispar Termen si Cine, pe telefon si Nr. Ca in Excel, literele
   coloanelor ascunse lipsesc din sir. */
.dhero__sub { margin-top: clamp(26px, 3vw, 40px); }
/* doua propozitii: fiecare incepe pe randul ei */
.dhero .hero__titlu em { display: block; }
/* De ce am pornit MK1: textul de deasupra fisierului; contextul gri, concluzia neagra */
.dhero__dece { display: grid; gap: 12px; max-width: 40ch; margin-top: clamp(64px, 8vw, 110px); }
.dhero__dece p { font-size: clamp(20px, 2.1vw, 28px); font-weight: var(--fw-semibold); letter-spacing: -0.025em; line-height: 1.3; color: var(--text-tertiary); text-wrap: pretty; }
.dhero__dece b { font-weight: inherit; color: var(--text-primary); }
.foaie { position: relative; margin-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(44px, 5vw, 64px); overflow: hidden; }
.foaie__fond { position: absolute; left: 0; right: 0; top: 250px; bottom: 0; background: var(--ink-950); }
.foaie__in { position: relative; container: foaie / inline-size; }
.foaie__nota { margin-top: 16px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.5); }

.xl { --rand: 30px; --cols: 40px 64px 168px 104px 92px 132px 84px 240px repeat(6, 100px); position: relative; width: calc(100% + 360px); overflow: hidden; border-radius: 14px; background: var(--paper); box-shadow: 0 50px 100px rgba(10, 10, 10, 0.28), 0 0 0 1px var(--border-default); font-size: 13px; line-height: 1.2; color: var(--text-primary); text-align: left; user-select: none; --ridica: 40px; animation: mk1Ridica 1300ms cubic-bezier(0.2, 0.65, 0.2, 1) 760ms backwards; }
@media (prefers-reduced-motion: reduce) { .xl { animation: none; } }

.xl__titlu { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; background: var(--ink-50); border-bottom: 1px solid var(--ink-150); white-space: nowrap; }
.xl__ic { flex: none; width: 18px; height: 18px; border-radius: 4px; background-color: var(--green-600); background-image: linear-gradient(90deg, transparent 8px, rgba(255, 255, 255, 0.75) 8px, rgba(255, 255, 255, 0.75) 9px, transparent 9px), linear-gradient(0deg, transparent 5px, rgba(255, 255, 255, 0.75) 5px, rgba(255, 255, 255, 0.75) 6px, transparent 6px, transparent 11px, rgba(255, 255, 255, 0.75) 11px, rgba(255, 255, 255, 0.75) 12px, transparent 12px); }
.xl__titlu b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.xl__salvat { font-size: 12px; color: var(--text-tertiary); }
.xl__oameni { display: flex; padding-left: 12px; }
.xl__om { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; background: var(--ink-150); box-shadow: 0 0 0 2px var(--ink-50); font-size: 9.5px; font-weight: 600; color: var(--ink-700); }
.xl__om--m { background: var(--amber-100); color: var(--amber-600); }
.xl__om--a { background: var(--accent-100); color: var(--accent-600); }

.xl__alerta { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; background: var(--amber-100); border-bottom: 1px solid var(--ink-150); font-size: 12.5px; color: var(--ink-900); white-space: nowrap; }
.xl__alerta b { font-weight: 600; }
.xl__alerta-ic { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--amber-500); font-size: 11px; font-weight: 700; color: #fff; }
.xl__btn { display: inline-flex; align-items: center; flex: none; height: 26px; padding: 0 10px; border: 1px solid var(--ink-300); border-radius: 6px; background: var(--paper); font-size: 12px; font-weight: 500; }

.xl__formula { display: flex; align-items: center; height: 34px; border-bottom: 1px solid var(--ink-200); font-size: 12.5px; white-space: nowrap; }
.xl__ref { display: flex; align-items: center; flex: none; width: 76px; height: 100%; padding: 0 10px; border-right: 1px solid var(--ink-200); color: var(--text-secondary); }
.xl__fx { display: flex; align-items: center; flex: none; height: 100%; padding: 0 12px; border-right: 1px solid var(--ink-150); font-family: var(--font-mono); font-size: 11.5px; font-style: italic; color: var(--text-tertiary); }
.xl__f { padding: 0 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); }
.xl__f span { color: var(--red-600); }

.xl__grila { position: relative; }
.xl__r { display: grid; grid-template-columns: var(--cols); height: var(--rand); }
.xl__nr, .xl__c { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid var(--ink-150); white-space: nowrap; }
.xl__nr { justify-content: center; background: var(--ink-50); border-right: 1px solid var(--ink-200); font-size: 11.5px; color: var(--text-tertiary); }
.xl__c { position: relative; padding: 0 8px; overflow: hidden; border-right: 1px solid var(--ink-150); }
.xl__r--litere { height: 24px; }
.xl__r--litere .xl__c { justify-content: center; background: var(--ink-50); border-right-color: var(--ink-200); border-bottom-color: var(--ink-200); font-size: 11.5px; color: var(--text-tertiary); }
.xl__r--litere .is-sel, .xl__nr.is-sel { background: var(--ink-150); color: var(--text-primary); font-weight: 600; }
.xl__r--litere .is-sel { box-shadow: inset 0 -2px 0 var(--green-600); }
.xl__nr.is-sel { box-shadow: inset -2px 0 0 var(--green-600); }
.xl__r--cap .xl__c { background: var(--ink-100); border-bottom-color: var(--ink-400); font-weight: 600; }
.xl__r--cap .xl__nr { border-bottom-color: var(--ink-400); }

.xl__c--n { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.xl__c--b { font-weight: 700; }
.xl__c--x { color: var(--red-600); }
.xl__c--ok { background: var(--green-100); color: var(--green-600); font-weight: 600; }
.xl__c--hm { background: var(--amber-100); color: var(--amber-600); }
.xl__c--rau { background: var(--red-100); color: var(--red-600); font-weight: 700; }
/* triunghiul verde de eroare, sus in stanga, ca in Excel */
.xl__c--eroare::before { content: ''; position: absolute; left: 0; top: 0; border-style: solid; border-width: 7px 7px 0 0; border-color: var(--green-600) transparent transparent transparent; }
/* celula selectata, cu patratelul de tras in coltul din dreapta jos */
.xl__c--sel { overflow: visible; box-shadow: inset 0 0 0 2px var(--green-600); }
.xl__c--sel::after { content: ''; position: absolute; right: -4px; bottom: -4px; z-index: 1; width: 7px; height: 7px; background: var(--green-600); box-shadow: 0 0 0 1.5px var(--paper); }
/* comentariul: triunghiul rosu si biletul galben de langa celula */
.xl__c--nota { overflow: visible; }
.xl__c--nota::after { content: ''; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent var(--red-500) transparent transparent; }
.xl__comentariu { position: absolute; left: calc(100% + 10px); top: 4px; z-index: 3; display: grid; gap: 2px; width: 170px; padding: 8px 10px; border: 1px solid var(--ink-300); border-radius: 3px; background: var(--amber-100); box-shadow: 0 6px 16px rgba(10, 10, 10, 0.12); font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--ink-900); white-space: normal; }
.xl__comentariu b { font-weight: 700; }

/* Colegul care editeaza in acelasi timp: chenar si nume, mutat de site.js. */
.xl__c[data-mihai] { overflow: visible; }
.xl__c.is-mihai { z-index: 2; box-shadow: inset 0 0 0 2px var(--amber-500); }
.xl__c.is-mihai::after { content: 'Mihai'; position: absolute; right: -1px; bottom: calc(100% - 1px); padding: 0 5px; border-radius: 3px 3px 0 0; background: var(--amber-500); font-size: 10px; font-weight: 600; line-height: 15px; color: #fff; }

.xl__foi { display: flex; height: 34px; padding-left: 12px; border-top: 1px solid var(--ink-200); background: var(--ink-50); font-size: 12px; white-space: nowrap; }
.xl__foi span { display: flex; align-items: center; padding: 0 14px; border-right: 1px solid var(--ink-150); color: var(--text-secondary); }
.xl__foi .is-on { background: var(--paper); box-shadow: inset 0 -2px 0 var(--green-600); font-weight: 600; color: var(--green-600); }
.xl__foi .is-rosu { box-shadow: inset 0 -3px 0 var(--red-500); }
.xl__foi .xl__plus { border-right: none; font-size: 15px; color: var(--text-tertiary); }

@container foaie (max-width: 899px) {
  .xl { --rand: 28px; --cols: 34px 54px 146px 90px 116px 210px repeat(6, 90px); width: calc(100% + 240px); font-size: 12.5px; }
  .xl__r > :nth-child(5), .xl__r > :nth-child(7) { display: none; }
}
@container foaie (max-width: 600px) {
  .xl { --rand: 27px; --cols: 24px 114px 64px 86px 150px repeat(6, 80px); width: calc(100% + 160px); border-radius: 12px; font-size: 11.5px; }
  .xl__r > :nth-child(2) { display: none; }
  .xl__c { padding: 0 6px; }
  .xl__titlu { gap: 8px; height: 40px; padding: 0 12px; }
  .xl__titlu b { font-size: 12.5px; }
  .xl__salvat, .xl__oameni { display: none; }
  .xl__alerta { gap: 8px; height: 38px; padding: 0 12px; font-size: 11.5px; }
  .xl__alerta .xl__btn { display: none; }
  .xl__formula { height: 30px; font-size: 11.5px; }
  .xl__ref { width: 52px; }
  .xl__f { font-size: 11px; }
  .xl__foi { height: 30px; padding-left: 6px; font-size: 11px; }
  .xl__foi span { padding: 0 10px; }
}
/* biletul are nevoie de ~180 px liberi in dreapta coloanei G */
@media (max-width: 1179px) { .xl__comentariu { display: none; } }
@media (max-width: 600px) { .foaie__fond { top: 190px; } }

/* Ce castigi cu o firma tanara: pe negru, in continuarea fisierului; trei
   coloane despartite de linii fine, fara cutii. Titlurile stau pe acelasi
   rand (subgrid), ca textele de sub ele sa inceapa la aceeasi inaltime. */
.tineri { padding: clamp(56px, 7vw, 100px) 0 clamp(90px, 11vw, 150px); background: var(--ink-950); color: #fff; }
.tineri .titlu-mare { color: #fff; }
.tineri .titlu-mare em { color: rgba(255, 255, 255, 0.42); }
.tineri__grila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 56px); margin-top: clamp(44px, 5vw, 72px); }
.tineri__item { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; row-gap: 12px; padding: 30px 0 36px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.tineri__item b { font-size: clamp(24px, 2.6vw, 34px); font-weight: var(--fw-black); letter-spacing: -0.045em; line-height: 1.04; color: #fff; text-wrap: balance; }
.tineri__item p { max-width: 40ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; color: rgba(255, 255, 255, 0.62); text-wrap: pretty; }
@media (max-width: 900px) {
  .tineri__grila { grid-template-columns: minmax(0, 1fr); }
  .tineri__item { grid-row: auto; grid-template-rows: none; }
}

/* Ce poti astepta de la noi: randuri mari, despartite de linii. */
.princ { padding: clamp(100px, 12vw, 170px) 0 clamp(90px, 11vw, 150px); }
.princ__lista { margin-top: clamp(44px, 5vw, 72px); border-top: 1px solid var(--border-default); }
.princ__rand { display: grid; grid-template-columns: 72px minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: baseline; gap: 12px 32px; padding: clamp(26px, 3vw, 38px) 0; border-bottom: 1px solid var(--border-default); }
.princ__n { font-family: var(--font-mono); font-size: 12px; color: var(--accent-600); }
.princ__titlu { font-size: clamp(24px, 3.2vw, 44px); font-weight: var(--fw-black); letter-spacing: -0.045em; line-height: 1.02; color: var(--text-primary); text-wrap: balance; }
.princ__rand p { max-width: 40ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 900px) {
  .princ__rand { grid-template-columns: 34px minmax(0, 1fr); }
  .princ__rand p { grid-column: 2; }
}

/* --- Pagina Contact --------------------------------------------------------
   Titlul ca pe prima pagina; dedesubt formularul, fara cutie, si cererea asa
   cum ajunge in pipeline-ul nostru. Fereastra iese din ecran prin dreapta:
   coloanele de dupa sunt pasii care urmeaza. */
.ct { padding-bottom: clamp(90px, 11vw, 150px); overflow: hidden; }
.ct__sub { margin-top: clamp(26px, 3vw, 40px); }
.ct__grila { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: start; gap: clamp(48px, 6vw, 88px); margin-top: clamp(56px, 7vw, 96px); }
.ct__viz { min-width: 0; }
.ct__vizcap { max-width: 42ch; margin-bottom: 22px; }
.ct__eti { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.ct__vizcap p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 1000px) { .ct__grila { grid-template-columns: minmax(0, 1fr); gap: 72px; } }

/* Cererea in pipeline, cu aspectul aplicatiei. */
.cz { width: 760px; overflow: hidden; border-radius: 14px; background: var(--paper); box-shadow: 0 40px 80px rgba(10, 10, 10, 0.14), 0 0 0 1px var(--border-default); font-size: 13px; line-height: 1.4; color: var(--text-primary); text-align: left; user-select: none; }
.cz__bara { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--ink-150); white-space: nowrap; }
.cz__logo { display: inline-flex; color: var(--ink-950); }
.cz__cale { display: flex; gap: 8px; padding-left: 14px; border-left: 1px solid var(--ink-150); color: var(--text-tertiary); }
.cz__cale i { font-style: normal; color: var(--ink-300); }
.cz__cale b { font-weight: 500; color: var(--text-primary); }
.cz__live { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--green-100); font-size: 11.5px; font-weight: 500; color: var(--green-600); }
.cz__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); animation: mk1Puls 1400ms var(--ease-out) infinite; }
.cz__tabla { display: grid; grid-template-columns: repeat(4, 280px); gap: 10px; padding: 14px 16px 16px; }
.cz__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 8px 12px; border-radius: 10px; background: var(--ink-50); }
.cz__colcap { display: flex; align-items: center; gap: 7px; padding: 0 4px 4px; }
.cz__colcap b { font-size: 12.5px; font-weight: 600; }
.cz__colcap em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.cz__punct { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-500); }
.cz__col--urm .cz__punct { background: var(--ink-300); }
.cz__card { display: grid; gap: 11px; padding: 12px; border: 1px solid var(--ink-950); border-radius: 9px; background: var(--paper); box-shadow: 0 0 0 1px var(--ink-950), 0 10px 24px rgba(10, 10, 10, 0.08); transition: box-shadow 200ms var(--ease-standard); }
.cz__card.is-scrie { box-shadow: 0 0 0 1px var(--ink-950), 0 0 0 5px rgba(0, 113, 227, 0.16), 0 10px 24px rgba(10, 10, 10, 0.08); }
.cz__sus { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.cz__av.is-gol { background: var(--ink-100); color: var(--ink-400); }
.cz__cine { display: grid; min-width: 0; }
.cz__cine b, .cz__cine i { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cz__cine b { font-size: 13.5px; font-weight: 600; }
.cz__cine i { font-style: normal; font-size: 11.5px; color: var(--text-tertiary); }
.cz__rand { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cz__rand .tag.is-gol { background: none; outline: 1px dashed var(--ink-300); outline-offset: -1px; }
.cz__mesaj { display: -webkit-box; height: calc(1.45em * 3); overflow: hidden; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cz__jos { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--ink-150); font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.cz__jos span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.cz__jos i { overflow: hidden; font-style: normal; text-overflow: ellipsis; }
.cz__pas { display: grid; gap: 3px; padding: 9px 10px; border-radius: 8px; background: var(--ink-50); }
.cz__pas b { font-size: 12.5px; font-weight: 500; }
.cz [data-cz].is-gol { color: var(--ink-300); }
.cz__loc { display: grid; place-items: center; height: 118px; padding: 14px 18px; border: 1.5px dashed var(--ink-200); border-radius: 9px; font-size: 12px; line-height: 1.4; text-align: center; color: var(--text-tertiary); }

/* Formularul: campuri mari, pe gri deschis; la focus devin albe, cu margine neagra. */
.form { display: flex; flex-direction: column; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { padding: 0; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.field > legend { margin-bottom: 8px; }
.field__box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 14px;
  background: var(--ink-50);
  border: 1px solid var(--ink-150);
  border-radius: 10px;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.field__box:focus-within { background: var(--paper); border-color: var(--ink-950); box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.06); }
.field__box .ico { color: var(--text-tertiary); }
.field__box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  color: var(--text-primary);
}
.field textarea {
  width: 100%;
  min-height: 128px;
  padding: 13px 14px;
  background: var(--ink-50);
  border: 1px solid var(--ink-150);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  outline: none;
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.field textarea:focus { background: var(--paper); border-color: var(--ink-950); box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.06); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
/* Tipul proiectului: butoane rotunde. Starea aleasa schimba doar culoarea. */
.alege__opt { display: flex; flex-wrap: wrap; gap: 8px; }
.alege label { position: relative; cursor: pointer; }
.alege input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.alege span { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); background: var(--paper); font-size: 15px; font-weight: 500; color: var(--text-primary); transition: background 150ms var(--ease-standard), color 150ms var(--ease-standard), border-color 150ms var(--ease-standard); }
.alege label:hover span { border-color: var(--ink-400); }
.alege input:checked + span { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.alege input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.form__note { font-size: var(--fs-caption); color: var(--text-tertiary); line-height: var(--lh-normal); }
.form__note a { color: var(--text-secondary); text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); }
.alert__title { font-size: var(--fs-body-m); font-weight: var(--fw-semibold); }
.alert__body { font-size: var(--fs-body-s); color: var(--text-secondary); }
.alert--success { background: var(--green-100); border: 1px solid #C7E9D5; color: var(--ink-900); }
.alert--success .ico { color: var(--green-600); margin-top: 1px; }
.alert--danger { background: var(--red-100); border: 1px solid #F3CFCB; color: var(--ink-900); }
.alert--danger .ico { color: var(--red-600); margin-top: 1px; }
.alert--danger a { color: var(--red-600); text-decoration: underline; }

/* --- Pagina Multumim / 404 ------------------------------------------------ */
.center { padding: 150px 0 110px; text-align: center; }
.center__badge { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--green-100); color: var(--green-600); margin-bottom: 24px; }
.center__badge--neutral { background: var(--ink-100); color: var(--text-primary); }
.center h1 { font-size: var(--fs-display-m); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--text-primary); line-height: 1.05; }
.center p { margin: 18px auto 0; max-width: 520px; font-size: var(--fs-body-l); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.center__actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- Pagini legale -------------------------------------------------------- */
.legalhero { padding: 128px 0 8px; }
.legalhero__in { max-width: 760px; }
.legalhero .eyebrow { margin-bottom: 16px; }
.legalhero h1 { font-size: var(--fs-display-m); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--text-primary); line-height: 1.05; }
.legalhero__date { margin-top: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--text-tertiary); }
.legal { padding: 40px 0 88px; }
.legal__grid { display: grid; grid-template-columns: minmax(0, 720px) 1fr; gap: 56px; align-items: start; }
.prose { font-size: var(--fs-body-m); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.prose h2 { margin: 36px 0 12px; font-size: var(--fs-title-s); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--text-primary); line-height: 1.2; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; list-style: disc; }
.prose li { line-height: var(--lh-normal); }
.identity { background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 96px; }
.identity .eyebrow { margin-bottom: 16px; }
.identity__rows { display: flex; flex-direction: column; gap: 12px; }
.identity__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2px; }
.identity__v { font-size: 14px; color: var(--text-primary); font-weight: var(--fw-medium); }

/* --- Footer --------------------------------------------------------------- */
.footer { border-top: 1px solid var(--border-subtle); }
.footer__in { max-width: var(--container-max); margin: 0 auto; padding: 48px 32px 40px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__brand { max-width: 300px; }
.footer__brand .eyebrow { margin-top: 16px; }
.footer__brand p { margin-top: 10px; font-size: 14px; line-height: var(--lh-normal); color: var(--text-tertiary); }
.footer__contact { margin-top: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.footer__contact a { color: var(--text-secondary); text-decoration: none; }
.footer__contact a:hover { color: var(--text-primary); }
.footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__col .eyebrow { margin-bottom: 14px; }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 14px; color: var(--text-secondary); text-decoration: none; }
.footer__col a:hover { color: var(--text-primary); }
.footer__bar { border-top: 1px solid var(--border-subtle); }
.footer__bar-in { max-width: var(--container-max); margin: 0 auto; padding: 18px 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--text-tertiary); }

/* --- Animatii ------------------------------------------------------------- */
@keyframes mk1NavIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes mk1MenuIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes mk1FadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Intrarea in pagina, ca la Linear: textul urca incet, din blur. Titlurile
   mari vin cuvant cu cuvant (.cuv-in, impartite la build), restul in bloc
   (.ridica, .fadeup). Fill "backwards" => daca animatia nu ruleaza, textul
   ramane vizibil. Nimic esential nu depinde de JavaScript. */
@keyframes mk1Ridica {
  from { opacity: 0; transform: translateY(var(--ridica, 0.32em)); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.cuv-in { display: inline-block; animation: mk1Ridica 1300ms cubic-bezier(0.2, 0.65, 0.2, 1) backwards; animation-delay: calc(80ms + var(--i, 0) * 70ms); }
.ridica { --ridica: 22px; animation: mk1Ridica 1300ms cubic-bezier(0.2, 0.65, 0.2, 1) backwards; animation-delay: var(--d, 0ms); }
.fadeup { --ridica: 16px; animation: mk1Ridica 1100ms cubic-bezier(0.2, 0.65, 0.2, 1) backwards; }
.fadeup--1 { animation-delay: 140ms; }
.fadeup--2 { animation-delay: 280ms; }
.fadeup--3 { animation-delay: 420ms; }
.fadeup--4 { animation-delay: 560ms; }
.fadeup--5 { animation-delay: 440ms; }
.fadeup--6 { animation-delay: 520ms; }

/* Aparitie la scroll: activa doar cand JavaScript-ul confirma ca poate porni. */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 660ms var(--ease-out) var(--reveal-delay, 0ms), transform 660ms var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fadeup, .cuv-in, .ridica, .nav__bar, .nav__panel.is-open { animation: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 780px) {
  .legal__grid { grid-template-columns: 1fr; gap: 32px; }
  .identity { position: static; }
}

@media (max-width: 640px) {
  :root { --pad-x: 20px; }
  .section { padding: 56px 0; }
  .ctaband { padding: 56px 20px; }
  .ctaband__in { flex-direction: column; align-items: flex-start; gap: 22px; }
  .ctaband h2 { font-size: var(--fs-title-m); }
  .ctaband .btn { width: 100%; }
  .form__row { grid-template-columns: 1fr; }
  .center h1, .legalhero h1 { font-size: var(--fs-title-l); }
  .center { padding: 120px 0 72px; }
  .legalhero { padding: 104px 0 8px; }
  .legal { padding: 32px 0 64px; }
  .footer__in { flex-direction: column; padding: 40px 20px 32px; gap: 32px; }
  .footer__cols { gap: 48px; }
  .footer__bar-in { padding: 16px 20px; }
}

/* --- Pagina Servicii pe telefon ------------------------------------------ */
@media (max-width: 900px) {
  .svchero { padding: 104px 0 0; }
  .svchero h1 { font-size: clamp(32px, 9.4vw, 46px); }
  .svchero__sub { margin-top: 18px; }
  .svchero__scena { height: 230px; margin-top: 36px; }
  .svchero__ecran { left: 20px; width: 680px; transform: perspective(1400px) rotateX(4deg) rotateY(-6deg); }
  .banda { padding: 18px 0; }
  .banda__sir i::after { margin: 0 16px; }
  .section--strans { padding: 48px 0; }
  .acc__cap { grid-template-columns: 34px minmax(0, 1fr) 28px; gap: 10px; padding: 20px 0; }
  .acc__nume { font-size: clamp(21px, 6.4vw, 30px); letter-spacing: -0.035em; }
  .acc__semn { width: 28px; height: 28px; }
  .acc__corp { padding-bottom: 28px; }
  .garantii { padding: 56px 0; }
  .garantii__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 30px; }
}

/* ==========================================================================
   Aplicatia demonstrativa (src/showcase.js).
   O fereastra de aplicatie adevarata: bara laterala cu logo si module, bara
   de sus, ecrane dense. Inaltimea e fixa pe fiecare latime, deci nimic nu se
   misca atunci cand schimbi modulul. Aspectul se alege dupa latimea
   ferestrei (container queries), nu a ecranului:
     >= 1100 px   desktop: bara laterala intreaga, toate coloanele
     860-1099     laptop mic: bara laterala doar cu iconite, mai putine coloane
     600-859      tableta: CRM, configuratorul si fluxul trec pe o coloana
     < 600        telefon: bara de sus cu logo, bara de jos, carduri in loc de tabele
   ========================================================================== */
.app { position: relative; container: app / inline-size; overflow: hidden; border-radius: 14px; background: var(--paper); color: var(--text-primary); text-align: left; }
.app__in { display: grid; grid-template-columns: 212px minmax(0, 1fr); height: 600px; font-size: 13px; line-height: 1.4; }
.app .ico { flex: none; }
.app [hidden] { display: none !important; }

/* --- Bara laterala ------------------------------------------------------- */
.app__lat { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 14px 10px 12px; background: var(--ink-50); border-right: 1px solid var(--ink-150); }
.app__marca { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 4px 0 8px; }
.app__logo { display: inline-flex; color: var(--ink-950); }
.app__firma { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.app__firma:hover { background: var(--ink-100); }
.app__cauta { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 10px; border: 1px solid var(--ink-200); border-radius: 8px; background: var(--paper); color: var(--text-tertiary); text-align: left; cursor: pointer; }
.app__cauta span { flex: 1; font-size: 12.5px; }
.app__cauta kbd { padding: 1px 5px; border: 1px solid var(--ink-200); border-radius: 4px; background: var(--ink-50); font-family: var(--font-mono); font-size: 9.5px; color: var(--text-tertiary); }
.app__nav { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
.app__grup { display: flex; flex-direction: column; gap: 1px; }
.app__grup > span { padding: 0 8px 5px; font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.app__link { display: flex; align-items: center; gap: 9px; width: 100%; height: 30px; padding: 0 8px; border: none; border-radius: 7px; background: none; color: var(--text-secondary); text-align: left; cursor: pointer; transition: background 120ms, color 120ms; }
.app__link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__link em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.app__link em.is-r { display: grid; place-items: center; min-width: 18px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--red-100); color: var(--red-600); }
.app__link:hover { background: var(--ink-100); color: var(--text-primary); }
.app__link.is-on { background: var(--paper); color: var(--text-primary); font-weight: 500; box-shadow: 0 1px 2px rgba(10, 10, 10, 0.06), 0 0 0 1px var(--ink-150); }
.app__eu { display: flex; align-items: center; gap: 9px; padding: 10px 6px 0; border-top: 1px solid var(--ink-150); color: var(--text-tertiary); }
.app__eu > span:not(.av) { display: grid; flex: 1; min-width: 0; }
.app__eu b { font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.app__eu i { font-style: normal; font-size: 11px; }

/* --- Zona principala si bara de sus -------------------------------------- */
.app__main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app__mbar, .app__tabbar { display: none; }
.vedere { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.v__bara { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; height: 50px; padding: 0 14px 0 20px; border-bottom: 1px solid var(--ink-150); }
.v__cale { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text-tertiary); white-space: nowrap; }
.v__cale i { font-style: normal; color: var(--ink-300); }
.v__cale b { font-weight: 500; color: var(--text-primary); }
.v__unelte { display: flex; align-items: center; gap: 6px; }
.v__ic { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: 8px; background: none; color: var(--text-secondary); cursor: pointer; }
.v__ic:hover { background: var(--ink-100); }
.v__ic i { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); box-shadow: 0 0 0 2px var(--paper); }
.abtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--ink-950); border-radius: 8px; background: var(--ink-950); color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background 120ms, opacity 120ms, transform 120ms var(--ease-out); }
.abtn:hover { background: var(--ink-800); }
.abtn:active { transform: scale(0.98); }
.abtn[disabled] { opacity: 0.45; cursor: default; transform: none; }
.abtn--gol { background: var(--paper); border-color: var(--ink-200); color: var(--text-primary); }
.abtn--gol:hover { background: var(--ink-50); }
.abtn--mare { height: 38px; font-size: 13px; }

.v__corp { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; padding: 16px 20px 14px; overflow: hidden; }
.v__corp > *, .tbl > .tr { flex-shrink: 0; }
.v__cap { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.v__titlu { display: grid; gap: 2px; min-width: 0; }
.v__titlu b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.v__titlu span { font-size: 12.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .is-r { color: var(--red-600); }
.app .is-v { color: var(--green-600); }
.v__jos { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; font-size: 12px; color: var(--text-tertiary); }
.v__jos > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.v__jos > span .ico { color: var(--amber-600); }
.vlink { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 5px 8px; border: none; border-radius: 6px; background: none; font-size: 12px; font-weight: 500; color: var(--text-primary); white-space: nowrap; cursor: pointer; }
.vlink:hover { background: var(--ink-100); }

/* --- Bucati comune ------------------------------------------------------- */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--ink-100); }
.seg > * { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: none; border-radius: 6px; background: none; font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.seg--static > * { cursor: default; }
.seg > .is-on { background: var(--paper); color: var(--text-primary); box-shadow: 0 1px 2px rgba(10, 10, 10, 0.08); }
.seg em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.seg em.is-r { color: var(--red-600); }

.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: none; border: 1px solid var(--ink-150); border-radius: 10px; }
.kpi > div { display: grid; gap: 1px; min-width: 0; padding: 9px 14px 10px; }
.kpi > div + div { border-left: 1px solid var(--ink-150); }
.kpi span { font-size: 11.5px; color: var(--text-tertiary); }
.kpi b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi i { overflow: hidden; font-style: normal; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; text-overflow: ellipsis; }

.st { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--ink-100); font-size: 11.5px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st--ok { background: var(--green-100); color: var(--green-600); }
.st--warn { background: var(--amber-100); color: var(--amber-600); }
.st--run { background: var(--accent-100); color: var(--accent-600); }
.st--stop { background: var(--red-100); color: var(--red-600); }
.st--nul { background: var(--ink-100); color: var(--text-tertiary); }

.av { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-150); font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-700); }
.av--f { width: 28px; height: 28px; border-radius: 7px; font-size: 10.5px; }
.av--a { background: var(--accent-100); color: var(--accent-600); }
.av--v { background: var(--green-100); color: var(--green-600); }
.av--c { background: var(--amber-100); color: var(--amber-600); }
.av--g { background: var(--ink-150); color: var(--ink-700); }
.av--n { background: var(--ink-950); color: #fff; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--ink-200); border-radius: 7px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.tag { display: inline-block; max-width: 100%; height: 18px; padding: 0 6px; overflow: hidden; border-radius: 5px; background: var(--ink-100); font-size: 10.5px; line-height: 18px; color: var(--text-secondary); white-space: nowrap; text-overflow: ellipsis; }
.eti { font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.comut { position: relative; flex: none; width: 26px; height: 16px; border-radius: 8px; background: var(--ink-200); transition: background 160ms; }
.comut::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); transition: transform 160ms var(--ease-out); }
[aria-pressed="true"] > .comut, .comut.is-on { background: var(--ink-950); }
[aria-pressed="true"] > .comut::after, .comut.is-on::after { transform: translateX(10px); }

.app__toast { position: absolute; left: 50%; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 9px 14px; border-radius: 10px; background: var(--ink-950); color: #fff; font-size: 12.5px; box-shadow: 0 10px 30px rgba(10, 10, 10, 0.25); transform: translateX(-50%); }
.app__toast.is-in { animation: mk1Toast 320ms var(--ease-out); }
@keyframes mk1Toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* --- Tabele -------------------------------------------------------------- */
.tbl { display: flex; flex-direction: column; min-height: 0; }
.tr { display: grid; align-items: center; column-gap: 12px; min-height: 44px; padding: 0 10px; border-bottom: 1px solid var(--ink-150); }
.tr > span { min-width: 0; }
.tr--cap { min-height: 30px; border-bottom-color: var(--ink-200); }
.tr--cap > span { font-size: 11.5px; color: var(--text-tertiary); }
.tr--cap > .dr { text-align: right; }
.td-cod { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); }
.td-client { display: flex; align-items: center; gap: 9px; }
.td-client > span, .td-art, .td-termen { display: grid; min-width: 0; }
.td-client b, .td-art b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.td-client i, .td-art i, .td-termen i { font-style: normal; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.td-termen b { font-weight: 500; }
.td-prod, .td-furn { overflow: hidden; color: var(--text-secondary); white-space: nowrap; text-overflow: ellipsis; }
.td-prod.is-r { color: var(--red-600); }
.td-val, .td-num { justify-self: end; font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.td-num b { font-weight: 600; }
.td-data { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); }
.td-prog { display: flex; align-items: center; gap: 8px; }
.td-prog i { position: relative; flex: 1; height: 5px; overflow: hidden; border-radius: 3px; background: var(--ink-150); }
.td-prog i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px; background: var(--ink-950); }
.td-prog em { width: 30px; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); text-align: right; }
.td-nivel i { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--ink-150); }
.td-nivel i::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px; background: var(--green-500); }
.td-nivel i::after { content: ''; position: absolute; top: -3px; bottom: -3px; left: var(--prag); width: 1.5px; background: var(--ink-700); }
.td-nivel.is-r i::before { background: var(--red-500); }
.td-go { display: grid; place-items: center; color: var(--text-tertiary); opacity: 0; transition: opacity 120ms, transform 120ms var(--ease-out); }
.tr--link { cursor: pointer; }
.tr.tr--link .td-go { opacity: 0.55; }
.tr.tr--link:hover { background: var(--ink-50); }
.tr.tr--link:hover .td-go { opacity: 1; color: var(--text-primary); transform: translateX(2px); }
.tr.is-atentie { background: linear-gradient(90deg, var(--red-100), rgba(251, 231, 229, 0) 70%); box-shadow: inset 2px 0 0 var(--red-500); }
.tr.is-atentie.tr--link:hover { background: var(--red-100); }
.is-tinta { animation: mk1Tinta 1600ms var(--ease-out); }
@keyframes mk1Tinta {
  0%, 45% { background-color: var(--amber-100); box-shadow: inset 2px 0 0 var(--amber-600), 0 0 0 1px rgba(224, 134, 0, 0.35); }
  100% { box-shadow: inset 2px 0 0 rgba(0, 0, 0, 0); }
}

.tbl--comenzi .tr { grid-template-columns: 76px minmax(150px, 1.6fr) minmax(0, 1.2fr) 82px 80px 96px 112px 16px; }
.tbl--stocuri .tr { grid-template-columns: 72px minmax(150px, 1.6fr) 96px 48px 62px 48px minmax(0, 1fr) 92px 16px; }
.tbl--facturi .tr { grid-template-columns: 62px minmax(150px, 1.5fr) 82px 62px 72px 116px 124px 16px; }

/* --- Productie: plan pe ore ---------------------------------------------- */
.gantt { --gantt-post: 172px; position: relative; display: flex; flex-direction: column; flex: none; overflow: hidden; border: 1px solid var(--ink-150); border-radius: 10px; }
.gantt__ore { position: relative; height: 30px; margin-left: var(--gantt-post); border-bottom: 1px solid var(--ink-150); }
.gantt__ore > span { display: none; }
.gantt__ore i { position: absolute; top: 9px; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); transform: translateX(-50%); }
.gantt__ore i:first-of-type { padding-left: 6px; transform: none; }
.gantt__ore i:last-of-type { padding-right: 6px; transform: translateX(-100%); }
.gantt__rand { display: grid; grid-template-columns: var(--gantt-post) minmax(0, 1fr); min-height: 66px; border-bottom: 1px solid var(--ink-150); }
.gantt__rand:last-of-type { border-bottom: none; }
.gantt__post { display: flex; align-items: center; gap: 9px; padding: 0 12px; background: var(--ink-50); border-right: 1px solid var(--ink-150); }
.gantt__post span { display: grid; min-width: 0; }
.gantt__post b { font-size: 12.5px; font-weight: 500; }
.gantt__post i { font-style: normal; font-size: 11px; color: var(--text-tertiary); }
.gantt__pista { position: relative; background-image: repeating-linear-gradient(to right, var(--ink-150) 0 1px, transparent 1px calc(100% / 9)); }
.gbar { position: absolute; top: 16px; bottom: 16px; display: flex; align-items: center; padding: 0 10px; overflow: hidden; border-radius: 7px; white-space: nowrap; }
.gbar > span { position: relative; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; }
.gbar__ora { display: none; margin-left: auto; padding-left: 10px; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; opacity: 0.75; }
.gbar--gata { background: var(--ink-950); color: #fff; }
.gbar--run { background: var(--accent-100); color: var(--accent-600); box-shadow: inset 0 0 0 1px rgba(0, 113, 227, 0.28); }
.gbar__p { position: absolute; inset: 0 auto 0 0; background: rgba(0, 113, 227, 0.16); }
.gbar--stop { background: var(--red-100); color: var(--red-600); box-shadow: inset 0 0 0 1px rgba(226, 75, 61, 0.4); }
.gbar--plan { background: repeating-linear-gradient(135deg, var(--ink-100) 0 6px, var(--paper) 6px 12px); color: var(--text-tertiary); box-shadow: inset 0 0 0 1px var(--ink-200); }
.gbar.tr--link { cursor: pointer; }
.gbar.tr--link:hover { box-shadow: inset 0 0 0 1.5px var(--red-500); }
.gantt__acum { position: absolute; top: 0; bottom: 0; border-left: 1.5px solid var(--red-500); pointer-events: none; }
.gantt__acum i { position: absolute; top: 6px; left: 0; padding: 1px 5px; border-radius: 4px; background: var(--red-500); font-style: normal; font-family: var(--font-mono); font-size: 9.5px; color: #fff; transform: translateX(-50%); }
.gantt__legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--text-tertiary); }
.gantt__legenda span { display: inline-flex; align-items: center; gap: 6px; }
.gantt__legenda i { width: 12px; height: 8px; border-radius: 3px; }
.l-gata { background: var(--ink-950); }
.l-run { background: var(--accent-100); box-shadow: inset 0 0 0 1px rgba(0, 113, 227, 0.4); }
.l-stop { background: var(--red-100); box-shadow: inset 0 0 0 1px rgba(226, 75, 61, 0.5); }
.l-plan { background: repeating-linear-gradient(135deg, var(--ink-200) 0 3px, var(--paper) 3px 6px); box-shadow: inset 0 0 0 1px var(--ink-200); }

/* --- Rapoarte ------------------------------------------------------------ */
.rap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; flex: 1; min-height: 0; }
.rap__grafic, .rap__top { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 14px 16px; border: 1px solid var(--ink-150); border-radius: 10px; }
.rap__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rap__cap b { font-size: 13px; font-weight: 600; }
.rap__cap span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-tertiary); }
.rap__cap span .ico { color: var(--green-600); }
.bare { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; flex: 1; min-height: 150px; padding: 18px 0 0 28px; }
.bare__grila { position: absolute; inset: 18px 0 21px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.bare__grila i { display: block; height: 0; border-top: 1px dashed var(--ink-150); font-style: normal; font-family: var(--font-mono); font-size: 9.5px; line-height: 0; color: var(--text-tertiary); }
.bare__col { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
.bare__col i { position: relative; align-self: end; height: var(--h); min-height: 4px; border-radius: 5px 5px 2px 2px; background: var(--ink-200); transform-origin: bottom; animation: mk1Creste 700ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 70ms); }
.bare__col:last-child i { background: var(--ink-950); }
.bare__col i em { position: absolute; left: 0; right: 0; top: -17px; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); text-align: center; }
.bare__col:last-child i em { color: var(--text-primary); }
.bare__col > span { font-size: 11px; color: var(--text-tertiary); text-align: center; }
@keyframes mk1Creste { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rap__top ol { display: grid; gap: 11px; }
.rap__top li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.rap__top li > span { display: grid; gap: 5px; min-width: 0; }
.rap__top li b { overflow: hidden; font-size: 12.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.rap__top li i { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--ink-150); }
.rap__top li i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 2px; background: var(--ink-950); }
.rap__top li em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; }

/* --- CRM ----------------------------------------------------------------- */
.v__corp--crm { gap: 12px; }
.crm__unelte { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.crm__filtre { display: flex; gap: 6px; }
.crm__etape { display: none; }
.crm { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 14px; flex: 1; min-height: 0; }
.crm__tabla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.crm__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; padding: 10px 8px; border-radius: 10px; background: var(--ink-50); }
.crm__cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 7px; padding: 0 4px 6px; }
.crm__cap b { font-size: 12.5px; font-weight: 600; }
.crm__cap em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.crm__cap span[data-suma] { grid-column: 2 / -1; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); transition: color 300ms; }
.crm__cap span.is-nou { color: var(--green-600); }
.crm__punct { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); }
.crm__punct--run { background: var(--accent-500); }
.crm__punct--warn { background: var(--amber-500); }
.crm__punct--ok { background: var(--green-500); }
.crm__stiva { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.crm__stiva::-webkit-scrollbar { display: none; }
.cc { display: grid; flex: none; gap: 7px; width: 100%; padding: 9px 10px 10px; border: 1px solid var(--ink-150); border-radius: 8px; background: var(--paper); color: var(--text-primary); text-align: left; box-shadow: 0 1px 1px rgba(10, 10, 10, 0.03); cursor: pointer; transition: border-color 120ms, box-shadow 120ms; }
.cc:hover { border-color: var(--ink-300); }
.cc.is-ales { border-color: var(--ink-950); box-shadow: 0 0 0 1px var(--ink-950); }
.cc.is-castigat { box-shadow: inset 3px 0 0 var(--green-500); }
.cc.is-castigat.is-ales { box-shadow: inset 3px 0 0 var(--green-500), 0 0 0 1px var(--ink-950); }
.cc__sus { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
/* numele firmei: pe cel mult doua randuri, ca sa nu se taie cu „…” in coloanele inguste */
.cc__sus b { display: -webkit-box; overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc__sus .av { width: 20px; height: 20px; font-size: 8.5px; }
.cc__val { font-family: var(--font-mono); font-size: 12px; }
.cc__jos { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.cc__urm { display: inline-flex; flex: none; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; }
.cc__urm i { font-style: normal; }

.fisa { display: grid; grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; gap: 12px; min-height: 0; padding: 14px; border: 1px solid var(--ink-150); border-radius: 10px; }
.fisa__cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.fisa__nume { display: grid; min-width: 0; }
.fisa__nume b { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.fisa__nume i { overflow: hidden; font-style: normal; font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; text-overflow: ellipsis; }
.fisa__val { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 12px; border-radius: 8px; background: var(--ink-50); }
.fisa__val span { font-size: 11.5px; color: var(--text-tertiary); }
.fisa__val b { font-family: var(--font-mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fisa__etape { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fisa__etape li { display: grid; gap: 5px; font-size: 10.5px; color: var(--text-tertiary); }
.fisa__etape li i { height: 4px; border-radius: 2px; background: var(--ink-150); transition: background 300ms; }
.fisa__etape li.is-gata i { background: var(--ink-950); }
.fisa__etape li.is-acum i { background: var(--accent-500); }
.fisa__etape li.is-acum span { font-weight: 500; color: var(--text-primary); }
.fisa__contact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.fisa__contact > span:nth-child(2) { display: grid; min-width: 0; }
.fisa__contact b { font-size: 12.5px; font-weight: 500; }
.fisa__contact i { font-style: normal; font-size: 11px; color: var(--text-tertiary); }
.fisa__ic { display: flex; gap: 8px; color: var(--text-tertiary); }
.fisa__pas p { margin-top: 4px; font-size: 13px; font-weight: 500; line-height: 1.35; }
.fisa__cand { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11.5px; color: var(--amber-600); }
.fisa__cand i { font-style: normal; }
.fisa__ist { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.fisa__ist ol { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.fisa__ist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; }
.fisa__ist li:first-child .ist__t { font-weight: 500; }
.ist__ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--ink-100); color: var(--text-secondary); }
.ist__t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fisa__ist li > i { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.fisa__act { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.fisa__act .abtn--gol { width: 38px; height: 38px; padding: 0; }

/* --- Configurator -------------------------------------------------------- */
.v__corp--cfg { padding: 0; }
.cfg { display: grid; grid-template-columns: 248px minmax(0, 1fr) 244px; flex: 1; min-height: 0; }
.cfg__ctrl { display: flex; flex-direction: column; gap: 13px; min-height: 0; padding: 14px 16px; overflow-y: auto; scrollbar-width: none; border-right: 1px solid var(--ink-150); }
.cfg__ctrl::-webkit-scrollbar { display: none; }
.cfg__grup { display: grid; gap: 7px; }
.cfg__mat { display: grid; gap: 5px; }
.cfg__mat button { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; height: 31px; padding: 0 10px 0 8px; border: 1px solid var(--ink-200); border-radius: 8px; background: var(--paper); color: var(--text-primary); text-align: left; cursor: pointer; transition: border-color 120ms, box-shadow 120ms; }
.cfg__mat button:hover { border-color: var(--ink-400); }
.cfg__mat button[aria-pressed="true"] { border-color: var(--ink-950); box-shadow: 0 0 0 1px var(--ink-950); }
.cfg__mat b { font-size: 12.5px; font-weight: 500; }
.cfg__mat span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.cfg__mostra { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.cfg__mostra--c3 { background: linear-gradient(135deg, #E3D2B8 50%, #CDB998 50%); }
.cfg__mostra--c5 { background: linear-gradient(135deg, #CFB994 50%, #B9A179 50%); }
.cfg__mostra--micro { background: linear-gradient(135deg, #F2ECE2 50%, #E3DBCD 50%); }
.cfg__dim { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 3px; }
.cfg__dim label { font-size: 12px; color: var(--text-secondary); }
.cfg__dim output { font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cfg__dim input { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; accent-color: var(--ink-950); }
.cfg__opt { display: grid; gap: 3px; }
.cfg__opt button { display: flex; align-items: center; gap: 9px; height: 25px; padding: 0; border: none; background: none; font-size: 12.5px; color: var(--text-primary); text-align: left; cursor: pointer; }
.cfg__buc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cfg__buc input { width: 92px; height: 30px; padding: 0 10px; border: 1px solid var(--ink-200); border-radius: 8px; background: var(--paper); font-family: var(--font-mono); font-size: 12.5px; color: var(--text-primary); }
.cfg__buc input:focus { outline: none; border-color: var(--ink-950); }
.cfg__buc > span { font-size: 12px; color: var(--text-tertiary); }
.cfg__rapid { display: flex; gap: 4px; width: 100%; }
.cfg__rapid button { flex: 1; height: 26px; padding: 0; border: 1px solid var(--ink-200); border-radius: 6px; background: var(--paper); font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); cursor: pointer; }
.cfg__rapid button.is-on { border-color: var(--ink-950); background: var(--ink-950); color: #fff; }

.cfg__panza { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 14px 16px; background-color: var(--ink-50); background-image: radial-gradient(var(--ink-200) 1px, transparent 1.2px); background-size: 16px 16px; }
.cfg__eticheta { display: grid; gap: 1px; }
.cfg__eticheta b { font-size: 13px; font-weight: 600; }
.cfg__eticheta span { font-size: 11.5px; color: var(--text-tertiary); }
.cfg__desen { flex: 1; width: 100%; min-height: 0; }
.cfg__desen { --fata-sus: #E3D2B8; --fata-st: #CDB998; --fata-dr: #BCA782; --fata-linie: #9C8867; }
.cfg__desen.is-c5 { --fata-sus: #CFB994; --fata-st: #B9A179; --fata-dr: #A78E66; --fata-linie: #8A7350; }
.cfg__desen.is-micro { --fata-sus: #F2ECE2; --fata-st: #E3DBCD; --fata-dr: #D3C9B7; --fata-linie: #B2A794; }
.cfg__desen polygon { stroke: var(--fata-linie); stroke-width: 1; stroke-linejoin: round; transition: fill var(--dur-base) var(--ease-out), stroke var(--dur-base) var(--ease-out); }
.cfg__desen [data-cfg="fata-sus"] { fill: var(--fata-sus); }
.cfg__desen [data-cfg="fata-st"] { fill: var(--fata-st); }
.cfg__desen [data-cfg="fata-dr"] { fill: var(--fata-dr); }
.cfg__desen [data-cfg="fanta"] { stroke: var(--fata-linie); stroke-width: 1.2; }
.cfg__desen [data-cfg="sep"] { stroke: var(--fata-linie); stroke-width: 1; stroke-dasharray: 3 3; }
.cfg__desen [data-cfg="banda"] { stroke: rgba(196, 164, 110, 0.85); stroke-width: 7; stroke-linecap: butt; }
.cfg__desen [data-cfg="print"] { fill: var(--accent-500); stroke: none; }
.cfg__umbra { fill: rgba(10, 10, 10, 0.07); }
.cfg__cote line { stroke: var(--accent-500); stroke-width: 1; }
.cfg__cote text { font-family: var(--font-mono); font-size: 10px; fill: var(--accent-600); }
.cfg__reguli { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cfg__regula { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px dashed var(--ink-300); border-radius: 999px; background: var(--paper); font-size: 11px; color: var(--text-tertiary); opacity: 0.6; transition: opacity 200ms, background 200ms, color 200ms, border-color 200ms; }
.cfg__regula.is-on { border-style: solid; border-color: var(--amber-100); background: var(--amber-100); color: var(--amber-600); opacity: 1; }
.cfg__regula.is-stop { border-style: solid; border-color: var(--red-100); background: var(--red-100); color: var(--red-600); opacity: 1; }

.cfg__sumar { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 16px; border-left: 1px solid var(--ink-150); }
.cfg__pret { display: grid; gap: 2px; }
.cfg__pret b { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cfg__pret i { font-style: normal; font-size: 11.5px; color: var(--text-tertiary); }
.cfg__desc { display: grid; gap: 7px; margin: 0; padding: 12px 0; border-block: 1px solid var(--ink-150); }
.cfg__desc div { display: flex; justify-content: space-between; gap: 10px; }
.cfg__desc dt { font-size: 12px; color: var(--text-secondary); }
.cfg__desc dd { margin: 0; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.cfg__flag { display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: start; gap: 8px; min-height: 68px; padding: 9px 10px; border-radius: 8px; font-size: 12px; line-height: 1.38; }
.cfg__flag .ico { display: none; margin-top: 1px; }
.cfg__flag--ok { background: var(--green-100); color: var(--green-600); }
.cfg__flag--warn { background: var(--amber-100); color: var(--amber-600); }
.cfg__flag--stop { background: var(--red-100); color: var(--red-600); }
.cfg__flag--ok .i-ok, .cfg__flag--warn .i-warn, .cfg__flag--stop .i-stop { display: block; }
.cfg__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; }
.cfg__total span { font-size: 12px; color: var(--text-secondary); }
.cfg__total b { font-family: var(--font-mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cfg__sumar .abtn--mare { width: 100%; }

/* --- Automatizari -------------------------------------------------------- */
.v__corp--aut { gap: 12px; }
.aut__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.aut__nume { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aut__ic { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--amber-100); color: var(--amber-600); }
.aut__nume > span:nth-child(2) { display: grid; min-width: 0; }
.aut__nume b { font-size: 14px; font-weight: 600; }
.aut__nume i { overflow: hidden; font-style: normal; font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; text-overflow: ellipsis; }
.aut__activ { display: inline-flex; flex: none; align-items: center; gap: 7px; margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--green-600); }
.aut__activ .comut.is-on { background: var(--green-500); }
.aut__cifre { display: grid; grid-template-columns: repeat(3, auto); border: 1px solid var(--ink-150); border-radius: 10px; }
.aut__cifre > div { display: grid; gap: 1px; padding: 8px 14px; }
.aut__cifre > div + div { border-left: 1px solid var(--ink-150); }
.aut__cifre span { font-size: 11px; color: var(--text-tertiary); }
.aut__cifre b { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.aut__cifre i { font-style: normal; font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; }
.aut__cifre .is-mk1 b { color: var(--accent-600); }
.aut { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; flex: 1; min-height: 0; }
.aut__panza { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 18px; border: 1px solid var(--ink-150); border-radius: 10px; background-color: var(--ink-50); background-image: radial-gradient(var(--ink-200) 1px, transparent 1.2px); background-size: 16px 16px; }
.flux { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); grid-template-rows: auto 28px auto; align-items: center; }
.nod { position: relative; display: grid; justify-items: start; gap: 2px; min-width: 0; padding: 10px; border: 1px solid var(--ink-200); border-radius: 10px; background: var(--paper); box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04); transition: border-color 250ms, box-shadow 250ms, background 250ms; }
.nod__ic { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 4px; border-radius: 7px; background: var(--ink-100); color: var(--text-secondary); transition: background 250ms, color 250ms; }
.nod b { max-width: 100%; font-size: 12px; font-weight: 600; line-height: 1.25; }
.nod__d { max-width: 100%; overflow: hidden; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-tertiary); white-space: nowrap; text-overflow: ellipsis; }
.nod__ok { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--green-500); color: #fff; opacity: 0; transform: scale(0.6); transition: opacity 250ms, transform 250ms var(--ease-out); }
.nod.is-run { border-color: var(--accent-400); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12); }
.nod.is-run .nod__ic { background: var(--accent-500); color: #fff; animation: mk1Puls 900ms var(--ease-out) infinite; }
.nod.is-gata { border-color: #C7E9D5; }
.nod.is-gata .nod__ic { background: var(--green-100); color: var(--green-600); }
.nod.is-gata .nod__ok { opacity: 1; transform: none; }
.nod--alerta { grid-row: 3; grid-column: 5 / span 3; border-style: dashed; }
.nod--alerta.is-alerta { border-style: solid; border-color: rgba(224, 134, 0, 0.45); background: var(--amber-100); }
.nod--alerta.is-alerta .nod__ic { background: var(--amber-500); color: #fff; }
.flux__leg { position: relative; height: 2px; background: var(--ink-200); }
.flux__leg i, .flux__cot i { position: absolute; inset: 0; background: var(--green-500); transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease-out); }
.flux__leg.is-on i { transform: none; }
.flux__cot { position: relative; grid-row: 2; grid-column: 5; justify-self: center; width: 2px; height: 100%; background: var(--ink-200); }
.flux__cot i { background: var(--amber-500); transform: scaleY(0); transform-origin: top; }
.flux__cot.is-on i { transform: none; }
@keyframes mk1Puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.aut__jurnal { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-radius: 10px; background: var(--ink-950); color: #E8EAEC; }
.aut__jcap { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.aut__jcap b { font-size: 12px; font-weight: 600; color: #fff; }
.aut__jcap span { font-family: var(--font-mono); font-size: 10.5px; color: #7C868E; }
.aut__jurnal ol { display: flex; flex-direction: column; flex: 1; gap: 1px; min-height: 0; padding: 8px 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.jl { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 3px 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.45; animation: mk1Intra 260ms var(--ease-out) backwards; }
.jl i { font-style: normal; color: #7C868E; }
.jl.is-atentie span { color: #FFB4A8; }
.jl.is-atentie span::before { content: '! '; }
.jl-gol { margin: auto 0; padding: 0 6px; font-size: 12px; line-height: 1.5; color: #7C868E; text-align: center; }
@keyframes mk1Intra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.aut__stare { min-height: 56px; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 11.5px; line-height: 1.4; color: #9AA3AB; }
.aut__stare.is-gata { color: #7ED8A4; }

/* Nota de sub aplicatie: inaltime pentru textul cel mai lung, ca pagina sa
   nu sara cand schimbi modulul. */
.demo__jos { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; }
.demo__note { flex: 1; min-height: 2.9em; font-size: 13px; line-height: 1.45; color: var(--text-tertiary); }

/* ===================== Laptop mic: 860-1099 px ========================== */
@container app (max-width: 1099px) {
  .app__in { grid-template-columns: 60px minmax(0, 1fr); }
  .app__lat { align-items: center; padding: 14px 8px 12px; }
  .app__marca { justify-content: center; width: 100%; padding: 4px 0 0; }
  .app__logo svg { width: 36px; height: auto; }
  .app__firma, .app__cauta span, .app__cauta kbd, .app__grup > span, .app__link span, .app__link em, .app__eu > span:not(.av), .app__eu > .ico { display: none; }
  .app__cauta { justify-content: center; width: 36px; padding: 0; }
  .app__link { position: relative; justify-content: center; width: 40px; height: 34px; padding: 0; }
  .app__link em.is-r { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; font-size: 9px; box-shadow: 0 0 0 2px var(--ink-50); }
  .app__grup { align-items: center; padding-top: 6px; border-top: 1px solid var(--ink-150); }
  .app__grup:first-child { border-top: none; padding-top: 0; }
  .app__eu { justify-content: center; width: 100%; padding: 10px 0 0; }
  .tbl--comenzi .tr { grid-template-columns: 76px minmax(0, 1.6fr) 82px 80px 96px 112px 16px; }
  .tbl--comenzi .td-prod { display: none; }
  .tbl--stocuri .tr { grid-template-columns: 72px minmax(0, 1.6fr) 96px 48px 62px 48px 92px 16px; }
  .tbl--stocuri .td-furn { display: none; }
  .tbl--facturi .tr { grid-template-columns: 62px minmax(0, 1.5fr) 82px 62px 72px 116px 124px 16px; }
  .crm { grid-template-columns: minmax(0, 1fr) 260px; }
  .crm__filtre { display: none; }
  .cfg { grid-template-columns: 224px minmax(0, 1fr) 224px; }
  .aut { grid-template-columns: minmax(0, 1fr) 270px; }
  .aut__cifre > div:last-child { display: none; }
}

/* ===================== Tableta: 600-859 px ============================== */
@container app (max-width: 859px) {
  .app__in { height: 700px; }
  .v__corp { overflow-y: auto; }
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi > div:nth-child(n + 3) { display: none; }
  .tbl--comenzi .tr { grid-template-columns: 70px minmax(0, 1fr) 78px 72px 104px 16px; }
  .tbl--comenzi .td-prog { display: none; }
  .tbl--stocuri .tr { grid-template-columns: 66px minmax(0, 1fr) 80px 48px 90px 16px; }
  .tbl--stocuri .td-num:nth-child(4), .tbl--stocuri .td-num:nth-child(5) { display: none; }
  .tbl--facturi .tr { grid-template-columns: 58px minmax(0, 1fr) 78px 70px 110px 16px; }
  .tbl--facturi .td-data:nth-child(4), .tbl--facturi .td-ef { display: none; }
  .rap { grid-template-columns: minmax(0, 1fr); }
  .rap__top { display: none; }
  .gantt { --gantt-post: 132px; }
  .gantt__post .av { display: none; }

  /* CRM pe o coloana: fisa sus, cu butonul jos, apoi etapa aleasa */
  .v__corp--crm { padding-bottom: 72px; }
  .crm__unelte { flex-wrap: wrap; }
  .crm__etape { display: inline-flex; width: 100%; }
  .crm__etape > * { flex: 1; justify-content: center; padding: 0 6px; }
  .crm { display: flex; flex-direction: column; gap: 12px; }
  .fisa { order: -1; grid-template-rows: none; gap: 10px; }
  .fisa__etape, .fisa__contact, .fisa__ist { display: none; }
  .fisa__act { position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 2; }
  .crm__tabla { display: block; }
  .crm__col { display: none; padding: 8px; }
  .crm[data-arata="0"] .crm__col[data-col="0"], .crm[data-arata="1"] .crm__col[data-col="1"],
  .crm[data-arata="2"] .crm__col[data-col="2"], .crm[data-arata="3"] .crm__col[data-col="3"] { display: flex; }
  .crm__stiva { overflow: visible; }
  .crm__stiva:empty::after { content: 'Niciun client în etapa asta.'; padding: 6px 4px; font-size: 12px; color: var(--text-tertiary); }

  /* Configuratorul pe o coloana: desenul sus, comenzile, pretul jos */
  .v__corp--cfg { overflow-y: auto; padding-bottom: 76px; }
  .cfg { display: flex; flex-direction: column; flex: none; }
  .cfg__panza { order: -1; flex: none; padding-bottom: 12px; }
  .cfg__desen { flex: none; height: 210px; }
  .cfg__ctrl { overflow: visible; border-right: none; }
  .cfg__sumar { padding: 0 16px 16px; border-left: none; }
  .cfg__pret, .cfg__total, .cfg__sumar .abtn--mare { display: none; }
  .vedere .cfg__mobil { display: flex; }

  /* Fluxul pe verticala, cu ramura de alerta sub pasul de stoc */
  .v__corp--aut { padding-bottom: 72px; }
  .aut__cap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .aut__cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aut { display: flex; flex-direction: column; flex: none; }
  .aut__panza { padding: 14px; }
  .flux { display: flex; flex-direction: column; align-items: stretch; }
  .flux > * { order: var(--o); }
  .nod { grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; align-items: center; padding: 8px 10px; }
  .nod__ic { grid-row: 1 / 3; margin: 0; }
  .nod--alerta { margin-left: 28px; }
  .flux__leg { align-self: flex-start; width: 2px; height: 12px; margin-left: 22px; }
  .flux__leg i { transform: scaleY(0); transform-origin: top; }
  .flux__leg.is-on i { transform: none; }
  .flux__cot { align-self: flex-start; width: 2px; height: 12px; margin-left: 50px; }
  .aut__jurnal { height: 190px; flex: none; }
  .v__bara [data-aut="start"] { position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 2; height: 40px; }
  .vedere[data-vedere="pipeline"]::after, .vedere[data-vedere="automatizari"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 68px; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--ink-150); }
}

/* Bara de jos a configuratorului (doar cand e pe o coloana) */
.cfg__mobil { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 14px; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--ink-150); }
.cfg__mobil > span { display: grid; }
.cfg__mobil > span > i { font-style: normal; font-size: 11px; color: var(--text-tertiary); }
.cfg__mobil > span > b { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.cfg__mobil .abtn { height: 40px; }

/* ===================== Telefon: sub 600 px ============================== */
@container app (max-width: 599px) {
  .app__in { grid-template-columns: minmax(0, 1fr); height: 700px; font-size: 13.5px; }
  .app__lat { display: none; }
  .app__main { display: flex; }
  .app__mbar { display: flex; align-items: center; gap: 10px; flex: none; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--ink-150); }
  .app__mbar > i { width: 1px; height: 16px; background: var(--ink-200); }
  .app__mtitlu { flex: 1; font-size: 14px; font-weight: 600; }
  .v__bara, .v__unelte { display: contents; }
  .v__cale, .v__ic, .v__unelte > .abtn { display: none; }
  .v__unelte > [data-aut="start"] { display: inline-flex; }
  .v__corp { padding: 14px 14px 12px; gap: 12px; }
  .v__cap { flex-direction: column; align-items: stretch; gap: 10px; }
  .v__titlu b { font-size: 17px; }
  .seg { display: flex; width: 100%; }
  .seg > * { flex: 1; justify-content: center; padding: 0 4px; font-size: 11.5px; }
  .kpi > div { padding: 8px 12px; }
  .kpi b { font-size: 15px; }
  .app[data-modul="erp"] .app__tabbar { display: grid; }
  .app__tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); flex: none; height: 60px; border-top: 1px solid var(--ink-150); background: var(--paper); }
  .app__tabbar button { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; padding: 0; border: none; background: none; font-size: 10.5px; color: var(--text-tertiary); cursor: pointer; }
  .app__tabbar button span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .app__tabbar button.is-on { color: var(--ink-950); font-weight: 600; }

  /* Tabelele devin carduri pe doua randuri */
  .tr--cap { display: none; }
  .tr { column-gap: 10px; row-gap: 5px; padding: 10px 4px; }
  .tbl--comenzi .tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "client client st" "cod termen val"; }
  .tbl--comenzi .td-client { grid-area: client; }
  .tbl--comenzi .td-st { grid-area: st; justify-self: end; }
  .tbl--comenzi .td-cod { grid-area: cod; }
  .tbl--comenzi .td-termen { grid-area: termen; display: flex; align-items: baseline; gap: 6px; }
  .tbl--comenzi .td-val { grid-area: val; }
  .tbl--comenzi .td-prod, .tbl--comenzi .td-prog, .tbl--comenzi .td-go { display: none; }
  .tbl--stocuri .tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "art st" "nivel liber"; }
  .tbl--stocuri .td-art { grid-area: art; }
  .tbl--stocuri .td-st { grid-area: st; justify-self: end; }
  .tbl--stocuri .td-nivel { grid-area: nivel; align-self: center; }
  .tbl--stocuri .td-num:nth-child(6) { grid-area: liber; }
  .tbl--stocuri .td-num:nth-child(6)::before { content: 'liber '; font-family: var(--font-sans); font-size: 11px; color: var(--text-tertiary); }
  .tbl--stocuri .td-cod, .tbl--stocuri .td-num:nth-child(4), .tbl--stocuri .td-num:nth-child(5), .tbl--stocuri .td-furn, .tbl--stocuri .td-go { display: none; }
  .tbl--facturi .tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "client st" "cod val"; }
  .tbl--facturi .td-client { grid-area: client; }
  .tbl--facturi .td-st { grid-area: st; justify-self: end; }
  .tbl--facturi .td-cod { grid-area: cod; }
  .tbl--facturi .td-val { grid-area: val; }
  .tbl--facturi .td-data, .tbl--facturi .td-ef, .tbl--facturi .td-go { display: none; }
  .v__jos { flex-wrap: wrap; gap: 6px; }

  /* Productia: planul pe ore devine agenda zilei */
  .gantt { --gantt-post: 0px; border: none; overflow: visible; }
  .gantt__ore, .gantt__acum { display: none; }
  .gantt__rand { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 0 0 10px; border-bottom: none; }
  .gantt__post { padding: 0; background: none; border-right: none; }
  .gantt__post .av { display: inline-grid; }
  .gantt__pista { display: flex; flex-direction: column; gap: 6px; background: none; }
  .gbar { position: relative; left: auto !important; width: auto !important; height: 34px; }
  .gbar__ora { display: inline; position: relative; }
  .gantt__legenda { display: none; }

  .rap__grafic { padding: 12px; }
  .bare { gap: 8px; min-height: 170px; padding-left: 22px; }

  /* CRM: marginile mai stranse */
  .v__corp--crm, .v__corp--aut { padding-bottom: 70px; }
  .fisa__act, .v__bara [data-aut="start"] { left: 14px; right: 14px; bottom: 13px; }
  .vedere[data-vedere="pipeline"]::after, .vedere[data-vedere="automatizari"]::after { height: 66px; }
  .cfg__mobil { padding: 10px 14px 12px; }
  .aut__nume i { white-space: normal; }
  .aut__activ { display: none; }
}

/* ===================== Aplicatia pe telefon: pe tot ecranul ==============
   In pagina, pe telefon, aplicatia e doar o previzualizare (partea de sus a
   ecranului, stinsa spre jos) cu butonul „Deschide aplicatia”. Atinsa, se
   deschide pe tot ecranul, ca o aplicatie adevarata: o singura derulare,
   pagina din spate sta pe loc, meniul are toate ecranele. */
.app__mmeniu, .app__inchide, .app__ceata, .app__deschide, .app__fundal { display: none; }
.app__mmeniu, .app__inchide { place-items: center; width: 36px; height: 36px; margin: 0 -6px; padding: 0; border: none; border-radius: 9px; background: none; color: var(--text-primary); cursor: pointer; }
.app__inchide { margin-left: auto; }
.app--ecran { position: fixed; inset: 0; z-index: 300; border-radius: 0; box-shadow: none !important; }
.app--ecran .app__in { height: 100vh; height: 100dvh; }
.app--ecran .app__mbar .av { display: none; }
.app--ecran .app__inchide, .app--ecran .app__mmeniu { display: grid; }
@media (max-width: 640px) {
  .vt .app:not(.app--ecran) { height: 470px; }
  .vt .app:not(.app--ecran) .app__in { pointer-events: none; }
  .vt .app:not(.app--ecran) .app__ceata { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 210px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 72%); pointer-events: none; }
  .vt .app:not(.app--ecran) .app__deschide { display: inline-flex; position: absolute; left: 50%; bottom: 26px; z-index: 4; align-items: center; gap: 9px; height: 50px; padding: 0 24px; border: none; border-radius: 999px; background: var(--ink-950); color: #fff; font-size: 16px; font-weight: 500; white-space: nowrap; box-shadow: 0 12px 30px rgba(10, 10, 10, 0.25); transform: translateX(-50%); cursor: pointer; }
}

@container app (max-width: 599px) {
  /* Meniul aplicatiei: bara laterala intreaga, care intra din stanga */
  .app.is-meniu .app__fundal { display: block; position: absolute; inset: 0; z-index: 5; background: rgba(10, 10, 10, 0.35); }
  .app.is-meniu .app__lat { display: flex; position: absolute; inset: 0 auto 0 0; z-index: 6; width: min(300px, 82%); align-items: stretch; padding: 16px 12px; overflow-y: auto; box-shadow: 0 0 40px rgba(0, 0, 0, 0.18); animation: mk1Sertar 260ms var(--ease-out); }
  .app.is-meniu .app__marca { justify-content: space-between; width: auto; padding: 4px 4px 0 8px; }
  .app.is-meniu .app__lat .app__logo svg { width: auto; height: 15px; }
  .app.is-meniu .app__firma { display: inline-flex; }
  .app.is-meniu .app__cauta { justify-content: flex-start; width: auto; padding: 0 8px 0 10px; }
  .app.is-meniu .app__cauta span, .app.is-meniu .app__cauta kbd, .app.is-meniu .app__grup > span, .app.is-meniu .app__link span, .app.is-meniu .app__link em { display: block; }
  .app.is-meniu .app__link em.is-r { display: grid; position: static; box-shadow: none; }
  .app.is-meniu .app__grup { align-items: stretch; padding-top: 0; border-top: none; }
  .app.is-meniu .app__link { justify-content: flex-start; width: 100%; height: 42px; padding: 0 10px; font-size: 14px; }
  .app.is-meniu .app__eu { justify-content: flex-start; padding: 12px 6px 0; }
  .app.is-meniu .app__eu > span:not(.av) { display: grid; }
  .app.is-meniu .app__eu > .ico { display: block; }
}
@keyframes mk1Sertar { from { transform: translateX(-100%); } to { transform: none; } }

/* Cand lista continua, o umbra fina sus si jos arata ca se poate derula. */
@container app (max-width: 859px) {
  .v__corp {
    background:
      linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) center top / 100% 36px no-repeat local,
      linear-gradient(rgba(255, 255, 255, 0), #fff 70%) center bottom / 100% 36px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(10, 10, 10, 0.16), rgba(10, 10, 10, 0)) center top / 100% 12px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(10, 10, 10, 0.16), rgba(10, 10, 10, 0)) center bottom / 100% 12px no-repeat scroll;
    background-color: #fff;
  }
}

/* ===================== Servicii: fiecare serviciu explicat ===============
   Sus: verdictul si ce inseamna, langa o schema scurta. Dedesubt: ce include
   si cum lucram, pe doua coloane. Jos: de ce se leaga si linkul spre
   aplicatia completa de pe prima pagina. */
.acc__h { margin: 0; font: inherit; }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 56px; row-gap: 40px; padding: 6px 0 4px 100px; }
.svc__intro { display: grid; align-content: start; gap: 16px; }
.svc__verdict { font-size: clamp(19px, 1.9vw, 24px); font-weight: var(--fw-semibold); letter-spacing: -0.022em; line-height: 1.3; color: var(--text-primary); text-wrap: balance; }
.svc__ce { max-width: 60ch; font-size: var(--fs-body-m); line-height: 1.65; color: var(--text-secondary); }
.svc__schita { display: grid; place-items: center; margin: 0; padding: 24px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--ink-50); }
.svc__bloc { display: grid; align-content: start; gap: 18px; }
.svc__eti { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-regular); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.svc__include { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin: 0; }
.svc__include dt { font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--text-primary); }
.svc__include dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.svc__pasi { display: grid; gap: 12px; }
.svc__pasi li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; gap: 10px; }
.svc__pasi span { font-family: var(--font-mono); font-size: 12px; color: var(--accent-600); }
.svc__pasi p { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.svc__jos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--border-subtle); }
.svc__lega { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.svc__lega .svc__eti { margin-right: 6px; }
.svc__lega i { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: var(--radius-pill); background: var(--ink-100); font-style: normal; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 900px) {
  .svc { grid-template-columns: minmax(0, 1fr); row-gap: 30px; padding-left: 0; }
  .svc__schita { padding: 18px 14px; }
  .svc__include { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* --- Schemele ------------------------------------------------------------- */
.sk-svg { display: block; width: 100%; max-width: 440px; height: auto; overflow: visible; }
.sk-linie { stroke: var(--ink-300); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sk-puls { fill: var(--accent-500); }
.sk-nod rect { fill: var(--paper); stroke: var(--ink-200); }
.sk-centru rect { fill: var(--ink-950); }
.sk-n { font-family: var(--font-sans); font-size: 13px; font-weight: 600; fill: var(--text-primary); }
.sk-d { font-family: var(--font-sans); font-size: 10px; fill: var(--text-tertiary); }
.sk-centru .sk-n { fill: #fff; }
.sk-centru .sk-d { fill: rgba(255, 255, 255, 0.62); }
@media (prefers-reduced-motion: reduce) { .sk-puls { display: none; } }

.sk-nota { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.sk-nota .ico { margin-top: 2px; color: var(--text-tertiary); }

.sk-crm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 16px; width: 100%; }
.sk-surse { display: grid; align-content: end; gap: 6px; padding-bottom: 28px; }
.sk-surse span { padding: 4px 9px; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); background: var(--paper); font-size: 11.5px; color: var(--text-secondary); text-align: center; }
.sk-etape { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; height: 200px; }
.sk-etapa { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; text-align: center; }
.sk-etapa b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sk-bara { align-self: end; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--ink-300); }
.sk-bara--run { background: var(--accent-400); }
.sk-bara--warn { background: var(--amber-500); }
.sk-bara--ok { background: var(--green-500); }
.sk-etapa > span { font-size: 12px; color: var(--text-secondary); }
.sk-conv { position: absolute; right: -7px; top: 52%; z-index: 1; padding: 2px 4px; border-radius: 4px; background: var(--ink-50); font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); transform: translateX(50%); }
.sk-crm .sk-nota { grid-column: 1 / -1; }

.sk-cfg { display: grid; justify-items: stretch; gap: 6px; width: 100%; max-width: 360px; }
.sk-card { display: grid; align-content: start; gap: 8px; padding: 12px 14px; border: 1px solid var(--ink-200); border-radius: 12px; background: var(--paper); }
.sk-eti { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.sk-card ul { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-secondary); }
.sk-reguli li { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: start; gap: 7px; }
.sk-reguli .ico { margin-top: 2px; color: var(--green-600); }
.sk-reguli .is-aplicat { color: var(--amber-600); }
.sk-reguli .is-aplicat .ico { color: var(--amber-600); }
.sk-card--oferta { border-color: var(--ink-950); background: var(--ink-950); }
.sk-card--oferta .sk-eti { color: rgba(255, 255, 255, 0.5); }
.sk-card--oferta b { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.sk-card--oferta b em { font-style: normal; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.6); }
.sk-card--oferta ul { color: rgba(255, 255, 255, 0.72); }
.sk-card--oferta li { display: flex; align-items: center; gap: 6px; }
.sk-sageata { justify-self: center; color: var(--ink-400); transform: rotate(90deg); }

.sk-aut { display: grid; gap: 18px; width: 100%; max-width: 400px; }
.sk-pasi { display: grid; gap: 9px; }
.sk-pasi li { display: grid; grid-template-columns: minmax(0, 1fr) 96px 44px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-secondary); }
.sk-pasi li > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sk-pasi i { width: calc(var(--m) / 4 * 100%); height: 8px; border-radius: 4px; background: var(--ink-300); }
.sk-pasi em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); text-align: right; }
.sk-total { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--ink-200); border-radius: 12px; background: var(--paper); }
.sk-total div { display: grid; gap: 2px; padding: 10px 14px; }
.sk-total div + div { border-left: 1px solid var(--ink-200); }
.sk-total span { font-size: 11.5px; color: var(--text-tertiary); }
.sk-total b { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sk-total .is-mk1 b { color: var(--accent-600); }

/* ==========================================================================
   Studiu de caz: HSL Solutions (/studii-de-caz/hsl-solutions). Limbajul
   variantei C: titlul mare pe alb, filmul pe granita alb/negru, cifrele pe
   negru, ecranele ERP-ului cate unul pe rand (ies prin dreapta), modulele pe
   negru, citatul, finalul. Clasele de aici nu apar pe celelalte pagini, in
   afara de randul .ecran refolosit pe prima pagina (.caz, mai jos).
   ========================================================================== */

/* Culorile HSL, doar pe pagina asta (din hsl.css al ERP-ului lor). Pe restul
   site-ului ramane accentul albastru al MK1. */
:root { --hsl-verde: #61993B; --hsl-verde-d: #4A7A2E; --hsl-verde-l: #72AD47; --hsl-inchis: #1D2F34; --hsl-fond: #EEF6EA; }

/* --- Lumina HSL pe alb: pete fine de verde care intra din dreapta si se
   topesc in alb. Stau sub continut (z-index 0); continutul e deasupra. ---- */
.aura { position: absolute; z-index: 0; left: 0; right: 0; pointer-events: none; }
/* capul: se intinde si sub film, ca sa nu se taie la marginea sectiunii;
   negrul de sub film o acopera acolo unde incepe */
/* trei nuante amestecate: lime deschis sus, verdele HSL la mijloc, verdele
   lor inchis mai jos, peste un fond de menta */
.aura--cap {
  top: -140px; height: calc(100% + 560px);
  background:
    radial-gradient(32% 26% at 100% 16%, rgba(168, 207, 110, 0.5), rgba(168, 207, 110, 0) 72%),
    radial-gradient(48% 40% at 100% 34%, rgba(97, 153, 59, 0.4), rgba(97, 153, 59, 0.15) 50%, rgba(97, 153, 59, 0) 80%),
    radial-gradient(30% 30% at 100% 68%, rgba(74, 122, 46, 0.32), rgba(74, 122, 46, 0) 75%),
    radial-gradient(40% 30% at 84% 8%, rgba(238, 246, 234, 1), rgba(238, 246, 234, 0) 80%);
  animation: hslAura 9s ease-in-out infinite alternate;
}
@keyframes hslAura { from { opacity: 0.82; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aura--cap { animation: none; } }
.aura--ecrane {
  top: 0; height: 1300px;
  background:
    radial-gradient(min(520px, 50vw) 380px at 100% 130px, rgba(168, 207, 110, 0.42), rgba(168, 207, 110, 0) 75%),
    radial-gradient(min(840px, 78vw) 620px at 100% 260px, rgba(97, 153, 59, 0.32), rgba(97, 153, 59, 0.1) 50%, rgba(97, 153, 59, 0) 80%);
}
.aura--citat {
  top: 0; bottom: 0;
  background:
    radial-gradient(min(480px, 45vw) 60% at 100% 28%, rgba(168, 207, 110, 0.42), rgba(168, 207, 110, 0) 75%),
    radial-gradient(min(780px, 76vw) 85% at 100% 55%, rgba(97, 153, 59, 0.34), rgba(97, 153, 59, 0.1) 50%, rgba(97, 153, 59, 0) 80%),
    radial-gradient(min(440px, 42vw) 55% at 100% 88%, rgba(74, 122, 46, 0.26), rgba(74, 122, 46, 0) 75%);
}
.ecrane, .citat { position: relative; }
.schero > .container, .ecrane > .container, .citat > .container { position: relative; z-index: 1; }

/* --- Capul ---------------------------------------------------------------- */
.schero { position: relative; }
.schero__duo { display: flex; align-items: center; gap: 16px; margin: 18px 0 clamp(26px, 3vw, 40px); }
.schero__duo svg { display: block; }
.schero__x { font-size: 22px; font-weight: 300; line-height: 1; color: var(--ink-400); }
.schero__hsl { width: auto; height: 46px; }
.schero .hero__titlu { font-size: clamp(40px, 6.2vw, 88px); }
.schero .hero__titlu em { display: block; }
.schero__jos { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: clamp(28px, 3.4vw, 44px); }
.schero .hero__sub { max-width: 46ch; }
.btn__play { width: 13px; height: 13px; }
.btn__durata { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, 0.55); }
.schero__fise { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 1.2fr); margin: clamp(44px, 5vw, 64px) 0 0; border-top: 1px solid var(--border-default); }
.schero__fise div { display: grid; align-content: start; gap: 6px; padding: 18px 24px 0 0; }
.schero__fise div + div { padding-left: 24px; border-left: 1px solid var(--border-default); }
.schero__fise dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.schero__fise dd { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; color: var(--text-primary); }
@media (max-width: 900px) {
  .schero__jos { flex-direction: column; align-items: flex-start; gap: 22px; }
}
@media (max-width: 640px) {
  .schero__fise { grid-template-columns: minmax(0, 1fr); }
  .schero__fise div, .schero__fise div + div { grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 14px 0; border-left: none; border-bottom: 1px solid var(--border-default); }
  .schero__fise dd { font-size: 15px; }
}
@media (max-width: 400px) { .btn__durata { display: none; } }

/* --- Filmul: pe granita alb/negru, colturi rotunde ------------------------ */
/* Filmul si cifrele stau in aceeasi sectiune: negrul incepe de la jumatatea
   filmului, iar lumina verde se revarsa de sub el peste cifre. --film-h e
   inaltimea filmului (16:9 din latimea lui). */
.film { --film-h: calc(min(1240px, 100vw - 2 * var(--pad-x)) * 0.5625); position: relative; margin-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(90px, 11vw, 150px); }
.film__fond { position: absolute; left: 0; right: 0; top: calc(var(--film-h) * 0.5); bottom: 0; background: var(--ink-950); }
/* „screen”: pe negru aprinde verde, pe alb nu se vede */
.film__lumina { position: absolute; left: 0; right: 0; top: calc(var(--film-h) * -0.1); height: calc(var(--film-h) * 1.9); background: radial-gradient(62% 50% at 50% 50%, rgba(97, 153, 59, 0.55), rgba(97, 153, 59, 0.18) 50%, rgba(97, 153, 59, 0) 100%); mix-blend-mode: screen; pointer-events: none; }
.film__in { position: relative; max-width: calc(1240px + 2 * var(--pad-x)); margin: 0 auto; padding-inline: var(--pad-x); }
.film__cadru {
  --margine: clamp(12px, 2vw, 24px);
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: clamp(16px, 2.2vw, 28px); background: #F2F3F4; cursor: pointer;
  box-shadow: 0 50px 100px rgba(10, 10, 10, 0.3), 0 0 0 1px var(--border-default);
  --ridica: 40px; animation: mk1Ridica 1300ms cubic-bezier(0.2, 0.65, 0.2, 1) 880ms backwards;
}
@media (prefers-reduced-motion: reduce) { .film__cadru { animation: none; } }
.film__cadru video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__video { opacity: 0; background: #000; transition: opacity 420ms var(--ease-standard); }
.film__cadru.is-film .film__video { opacity: 1; }
/* toata suprafata e un buton: porneste filmul, apoi pauza / continua */
.film__mare { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: none; background: transparent; cursor: pointer; }
.film__cadru.is-ascuns, .film__cadru.is-ascuns .film__mare { cursor: none; }

/* Bara: inainte de pornire e o pastila („Vezi filmul 1:08”), apoi se
   intinde pe toata latimea si devine bara de control. Butonul rotund ramane
   pe loc in ambele stari. */
.film__bara {
  position: absolute; left: var(--margine); bottom: var(--margine); z-index: 2;
  display: flex; align-items: center; gap: 14px; width: 232px; height: 56px; padding: 8px 20px 8px 8px;
  overflow: hidden; white-space: nowrap; border-radius: 999px; color: #fff;
  background: rgba(10, 10, 10, 0.84); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: width 680ms var(--ease-out), padding 680ms var(--ease-out), opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard);
}
.film__cadru.is-film .film__bara { width: calc(100% - 2 * var(--margine)); padding-right: 10px; }
.film__cadru.is-ascuns .film__bara { opacity: 0; transform: translateY(10px); pointer-events: none; }
.film__pp { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: #fff; color: var(--ink-950); cursor: pointer; transition: transform 220ms var(--ease-out); }
.film__cadru:not(.is-film):hover .film__pp { transform: scale(1.08); }
.film__pp svg { width: 14px; height: 14px; }
.film__pp .i-pauza { display: none; }
.film__cadru.is-film:not(.is-pauza) .film__pp .i-play { display: none; }
.film__cadru.is-film:not(.is-pauza) .film__pp .i-pauza { display: block; }
.film__zona { position: relative; flex: 1; min-width: 0; align-self: stretch; }
.film__eticheta { position: absolute; left: 0; top: 50%; display: flex; align-items: baseline; gap: 10px; transform: translateY(-50%); transition: opacity 220ms var(--ease-standard); }
.film__eticheta b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.film__eticheta i { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.film__ctrl { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease-standard); }
.film__cadru.is-film .film__eticheta { opacity: 0; }
.film__cadru.is-film .film__ctrl { opacity: 1; pointer-events: auto; transition-delay: 300ms; }
.film__t { flex: none; min-width: 4ch; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.82); }
.film__linie { position: relative; flex: 1; min-width: 40px; height: 28px; cursor: pointer; touch-action: none; }
.film__linie::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.film__umplut { position: absolute; left: 0; top: 50%; width: 0; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--hsl-verde-l); }
.film__umplut::after { content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); transform: scale(0); transition: transform 150ms var(--ease-out); }
.film__linie:hover .film__umplut::after, .film__linie.is-trag .film__umplut::after, .film__linie:focus-visible .film__umplut::after { transform: scale(1); }
.film__btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background 150ms var(--ease-standard); }
.film__btn:hover { background: rgba(255, 255, 255, 0.12); }
.film__btn svg { width: 18px; height: 18px; }
.film__sunet .i-mut { display: none; }
.film__cadru.is-mut .film__sunet .i-vol { display: none; }
.film__cadru.is-mut .film__sunet .i-mut { display: block; }
.film__cadru:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #000; box-shadow: none; }
.film__cadru:fullscreen video { object-fit: contain; }
.film__cadru:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #000; box-shadow: none; }
.film__cadru:-webkit-full-screen video { object-fit: contain; }
.film__nota { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
@media (max-width: 640px) {
  .film__bara { width: 150px; height: 40px; gap: 9px; padding: 5px 14px 5px 5px; }
  .film__cadru.is-film .film__bara { padding-right: 6px; }
  .film__pp { width: 30px; height: 30px; }
  .film__pp svg { width: 11px; height: 11px; }
  .film__eticheta { gap: 8px; }
  .film__eticheta b { font-size: 13px; }
  .film__eticheta i { font-size: 11px; }
  .film__ctrl { gap: 8px; }
  .film__t--durata, .film__sunet { display: none; }
  .film__btn { width: 30px; height: 30px; }
  .film__nota { margin-top: 14px; font-size: 10px; }
}

/* --- Cifrele: pe negru, in continuarea filmului -------------------------- */
.cifre { position: relative; margin-top: clamp(48px, 6vw, 80px); color: #fff; }
.cifre__grila { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 56px); }
.cifra { display: grid; align-content: start; gap: 14px; padding: 30px 0 0; border-top: 2px solid var(--hsl-verde); }
.cifra b { display: flex; align-items: baseline; gap: 0.16em; font-size: clamp(44px, 5.4vw, 78px); font-weight: var(--fw-black); letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra small { font-size: 0.28em; font-weight: 600; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.5); }
.cifra p { max-width: 26ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; color: rgba(255, 255, 255, 0.62); text-wrap: pretty; }
@media (max-width: 900px) {
  .cifre__grila { grid-template-columns: minmax(0, 1fr); }
  .cifra { padding: 24px 0 30px; }
}

/* --- Ecran cu ecran: opt ecrane, asezate diferit ---------------------------
   Fiecare ecran e un obiect in pagina: intreg, rotit in perspectiva, cu umbra lui si o
   umbra pe „podea”. Cate un ecran pe rand. Asezarile: dreapta (text stanga), stanga (ecran
   stanga), mare (text centrat sus, ecran mare culcat pe spate), negru (pe o banda neagra,
   cu lumina verde). Imaginile sunt randate la 1440x900, de 1,5 ori. */
.ecrane { padding: clamp(100px, 12vw, 170px) 0 clamp(70px, 8vw, 110px); overflow-x: clip; }
.ecrane__nota { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.ecrane__lista { margin-top: clamp(48px, 6vw, 80px); }
.ecran {
  --rot: rotateY(-17deg) rotateX(8deg) rotateZ(1.5deg); --rot-h: rotateY(-9deg) rotateX(4deg) rotateZ(0.75deg);
  --iesire: max(var(--pad-x), (100vw - var(--container-max)) / 2 + var(--pad-x));
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px);
  padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--border-default);
}
.ecran__text { display: grid; align-content: center; gap: 14px; }
.ecran__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--hsl-verde-d); }
/* doua randuri, ca in film: propozitia neagra, apoi cea gri */
.ecran__titlu { font-size: clamp(28px, 2.9vw, 42px); font-weight: var(--fw-black); letter-spacing: -0.045em; line-height: 1.04; color: var(--text-primary); text-wrap: balance; }
.ecran__titlu em { display: block; font-style: normal; color: var(--text-tertiary); }
.ecran__text p { max-width: 34ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }

.ecran__viz { position: relative; z-index: 0; margin: 0 calc(72px - var(--iesire)) 0 0; padding: 28px 0 56px; perspective: 2200px; perspective-origin: 20% 40%; }
.ecran__viz img {
  display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 1440 / 900; border-radius: 14px; background: #f5f7f9;
  transform: var(--rot); transform-origin: 35% 50%;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06),
              0 28px 50px -14px rgba(16, 24, 40, 0.32), 0 70px 110px -30px rgba(16, 24, 40, 0.35);
  transition: transform 900ms var(--ease-out);
}
/* umbra pe „podea”, sub obiect: nu se roteste, asa pare ca obiectul pluteste deasupra paginii */
.ecran__viz::after { content: ''; position: absolute; z-index: -2; left: 10%; right: 4%; bottom: 14px; height: 46px; background: radial-gradient(closest-side, rgba(16, 24, 40, 0.26), rgba(16, 24, 40, 0)); filter: blur(8px); pointer-events: none; }
@media (hover: hover) { .ecran__viz:hover img { transform: var(--rot-h); } }
@media (prefers-reduced-motion: reduce) { .ecran__viz img { transition: none; } }

/* stanga: ecranul in stanga, textul in dreapta; rotit in oglinda */
.ecran--stanga { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); --rot: rotateY(17deg) rotateX(8deg) rotateZ(-1.5deg); --rot-h: rotateY(9deg) rotateX(4deg) rotateZ(-0.75deg); }
.ecran--stanga .ecran__viz { order: -1; margin: 0 0 0 calc(72px - var(--iesire)); perspective-origin: 80% 40%; }
.ecran--stanga .ecran__viz img { transform-origin: 65% 50%; }
.ecran--stanga .ecran__viz::after { left: 4%; right: 10%; }

/* mare: titlul centrat sus, ecranul mare dedesubt, culcat pe spate ca pe o masa */
.ecran--mare { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(20px, 3vw, 36px); text-align: center; --rot: rotateX(20deg) rotateZ(-1.2deg); --rot-h: rotateX(9deg) rotateZ(-0.5deg); }
.ecran--mare .ecran__text { justify-items: center; max-width: 620px; }
.ecran--mare .ecran__text p { margin: 0 auto; }
.ecran--mare .ecran__viz { width: min(1120px, 100%); margin: 0 auto; padding: 8px 0 80px; perspective: 2600px; perspective-origin: 50% 0%; }
.ecran--mare .ecran__viz img { transform-origin: 50% 100%; }
.ecran--mare .ecran__viz::after { left: 6%; right: 6%; bottom: 30px; height: 70px; }

/* negru: banda neagra pe toata latimea, text alb, lumina verde sub ecran */
.ecran--negru { border-top: none; color: #fff; margin: clamp(24px, 4vw, 56px) 0; padding: clamp(64px, 8vw, 120px) 0; }
.ecran--negru::before { content: ''; position: absolute; z-index: -3; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--ink-950); }
.ecran--negru + .ecran { border-top: none; }
.ecran--negru .ecran__n { color: var(--hsl-verde-l); }
.ecran--negru .ecran__titlu { color: #fff; }
.ecran--negru .ecran__titlu em { color: rgba(255, 255, 255, 0.42); }
.ecran--negru .ecran__text p { color: rgba(255, 255, 255, 0.62); }
.ecran--negru .ecran__viz img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 90px -20px rgba(0, 0, 0, 0.7); }
.ecran--negru .ecran__viz::after { left: -6%; right: -6%; top: 18%; bottom: -14%; height: auto; background: radial-gradient(closest-side, rgba(97, 153, 59, 0.62), rgba(97, 153, 59, 0.18) 55%, rgba(97, 153, 59, 0)); filter: blur(30px); }

@media (max-width: 900px) {
  .ecran, .ecran--stanga { grid-template-columns: minmax(0, 1fr); gap: 18px; --rot: rotateY(-12deg) rotateX(6deg) rotateZ(1deg); --rot-h: var(--rot); }
  .ecran--stanga { --rot: rotateY(12deg) rotateX(6deg) rotateZ(-1deg); }
  .ecran--mare { --rot: rotateX(16deg) rotateZ(-1deg); }
  .ecran__viz, .ecran--stanga .ecran__viz { order: 0; margin: 0; padding: 16px 16px 40px 0; perspective: 1400px; }
  .ecran--stanga .ecran__viz { padding: 16px 0 40px 16px; }
  .ecran--mare .ecran__viz { padding: 8px 0 48px; }
  .ecran__viz img { border-radius: 10px; }
  .ecran__viz::after { bottom: 8px; height: 30px; }
}


/* --- Modulele: pe negru, un zid de nume; cele din pagina, in alb -------- */
.module { padding: clamp(100px, 12vw, 170px) 0 clamp(90px, 11vw, 150px); background: var(--ink-950); color: #fff; }
.module .eyebrow { color: rgba(255, 255, 255, 0.5); }
.module .titlu-mare { margin-top: 18px; color: #fff; }
.module .titlu-mare em { color: rgba(255, 255, 255, 0.42); }
.module__zid { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: clamp(44px, 5vw, 72px); font-size: clamp(22px, 3vw, 40px); font-weight: var(--fw-black); letter-spacing: -0.045em; line-height: 1.2; color: rgba(255, 255, 255, 0.2); }
.module__zid li { display: inline-flex; align-items: center; white-space: nowrap; transition: color 900ms var(--ease-standard); }
.module__zid li::after { content: ''; flex: none; width: 0.17em; height: 0.17em; margin: 0 0.42em; border-radius: 50%; background: var(--hsl-verde); }
.module__zid li:last-child::after { display: none; }
.module__zid .is-cheie { color: #fff; }
/* modulele se aprind pe rand in verdele HSL, ca o firma in lucru */
.module__zid .is-viu { color: var(--hsl-verde-l); transition-duration: 300ms; }
.module__int { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px clamp(32px, 5vw, 72px); margin-top: clamp(56px, 7vw, 96px); padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.module__int > p { max-width: 14ch; font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--fw-black); letter-spacing: -0.04em; line-height: 1.08; color: #fff; }
.module__grupuri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; }
.module__grupuri dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.module__grupuri dd { display: grid; gap: 6px; margin: 10px 0 0; font-size: 16px; font-weight: 500; line-height: 1.35; color: #fff; }
.module__grupuri dd b { display: grid; gap: 2px; font-weight: 500; }
.module__grupuri dd span { font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.5); }
@media (max-width: 900px) {
  .module__int { grid-template-columns: minmax(0, 1fr); }
  .module__grupuri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
}

/* --- Citatul: Ilie Crețu, de la HSL. Prima propoziție neagră, restul gri, ca titlurile
   site-ului; ghilimelele și inițialele în verdele HSL. ------------------------------- */
.citat { padding: clamp(100px, 12vw, 170px) 0; }
.citat__fig { margin: 0; max-width: 30ch; font-size: clamp(26px, 3.4vw, 48px); }
.citat blockquote { margin: 0; font-size: inherit; font-weight: var(--fw-black); letter-spacing: -0.045em; line-height: 1.08; color: var(--text-primary); text-wrap: pretty; }
.citat__gh { font-style: normal; color: var(--hsl-verde); }
.citat blockquote span { color: var(--text-tertiary); }
.citat__cine { display: flex; align-items: center; gap: 14px; margin-top: clamp(28px, 3vw, 40px); font-size: 16px; }
.citat__av { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--hsl-fond); box-shadow: inset 0 0 0 1px rgba(97, 153, 59, 0.28); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--hsl-verde-d); }
.citat__cine b { display: block; font-weight: 600; color: var(--text-primary); }
.citat__cine i { display: block; font-style: normal; font-size: 14px; color: var(--text-tertiary); }

/* --- Prima pagina: studiul de caz, un rand de pe pagina lui, pe negru ------
   Acelasi rand .ecran--negru (ecranul inclinat, lumina verde dedesubt), intre
   „Ai doua variante” si „Cum lucram”, ca sa alterneze albul cu negrul. */
.caz { overflow-x: clip; background: var(--ink-950); }
.caz .ecran--negru { margin: 0; }
.caz .ecran__titlu { font-size: clamp(32px, 4vw, 56px); }
.caz__btn { justify-self: start; margin-top: 10px; }

/* Servicii, randul de jos al ERP-ului: studiul de caz langa demonstratie */
.svc__linkuri { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* --- Acordul pentru cookie-uri (Google Ads) ---------------------------------
   Un card mic jos, in stanga; pe telefon ia toata latimea, cu margini. Sta sub
   bara de navigare (100) si sub aplicatia deschisa pe tot ecranul (300). Refuz
   si Accept arata la fel. In footer, „Setari cookie-uri” il deschide din nou. */
.cookie { position: fixed; z-index: 90; left: 16px; bottom: 16px; width: min(400px, calc(100% - 32px)); padding: 18px; border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 24px 60px rgba(10, 10, 10, 0.18), 0 0 0 1px var(--border-default); animation: mk1Cookie 420ms var(--ease-out) backwards; }
.cookie[hidden] { display: none; }
.cookie p { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.cookie p a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
.cookie__btn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cookie__btn .btn { width: 100%; height: 44px; }
@keyframes mk1Cookie { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .cookie { animation: none; } }
.footer__setari { padding: 0; border: none; background: none; font: inherit; font-size: 14px; line-height: inherit; color: var(--text-secondary); text-align: left; cursor: pointer; }
.footer__setari:hover { color: var(--text-primary); }