/* ==========================================================================
   NexiLMS — site de prezentare
   Fonturi: Manrope (text), Inter Tight (titluri), Inter (rezervă), Caveat (SIL Open Font License), găzduite local.
   ========================================================================== */

/* ---------- Fonturi ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-wght-normal.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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-cyrillic-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-tight-latin-wght-normal.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: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-tight-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-tight-cyrillic-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* Manrope: aceleași fișiere ca în learning-next (@fontsource-variable/manrope), greutăți 200–800. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/manrope-latin-wght-normal.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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/manrope-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/manrope-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/manrope-cyrillic-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/caveat-latin-wght-normal.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: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/caveat-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/caveat-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ---------- Tokeni ---------- */
:root {
  --bg: #f4f6f1;
  --bg-2: #edf1e8;
  --surface: #ffffff;
  --surface-2: #f8faf6;
  --ink: #0b1f16;
  --ink-2: #34453c;
  --muted: #66766d;
  --line: rgba(14, 42, 31, 0.09);
  --line-2: rgba(14, 42, 31, 0.16);
  --green-950: #081b13;
  --green-900: #0e2a1f;
  --green-800: #133629;
  --green-700: #1b4d36;
  --green-600: #22704a;
  --green-500: #2e8b58;
  --green-100: #e3efe6;
  --lime: #d4f53c;
  --lime-600: #bde21f;
  --lime-700: #8fb40a;
  --lime-200: #eef9bd;
  --lime-100: #f6fcdc;
  --blue: #3d8bff;
  --danger: #c2412d;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-xs: 0 1px 2px rgba(8, 27, 19, 0.06);
  --shadow-sm: 0 1px 2px rgba(8, 27, 19, 0.05), 0 4px 12px -4px rgba(8, 27, 19, 0.08);
  --shadow: 0 1px 2px rgba(8, 27, 19, 0.04), 0 14px 34px -14px rgba(8, 27, 19, 0.16);
  --shadow-lg: 0 2px 6px rgba(8, 27, 19, 0.04), 0 30px 70px -28px rgba(8, 27, 19, 0.26);
  /* Textul obișnuit în Manrope 500 (05.10.2026; înainte Inter 400), titlurile rămân în Inter Tight. */
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Bază ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--ink); margin: 0; font-weight: 800; letter-spacing: -0.035em; word-spacing: 0.06em; line-height: 1.06; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--lime); color: var(--green-900); }
:focus-visible { outline: 2.5px solid var(--green-600); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--green-900); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i--fill { fill: currentColor; stroke: none; }

/* ---------- Tipografie ---------- */
.eyebrow { display: inline-flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-600); }
.eyebrow--light { color: var(--lime); }
.display-1 { font-size: clamp(3rem, 1.25rem + 5.3vw, 6.6rem); line-height: 0.99; letter-spacing: -0.055em; word-spacing: 0.1em; }
.display-2 { font-size: clamp(2.3rem, 1.3rem + 3.3vw, 4.5rem); line-height: 1; letter-spacing: -0.048em; word-spacing: 0.1em; }
.display-3 { font-size: clamp(1.85rem, 1.25rem + 1.9vw, 3rem); line-height: 1.02; letter-spacing: -0.045em; }
.h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: -0.03em; line-height: 1.15; }
.h4 { font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.25; font-weight: 700; }
.dot { display: inline-block; width: 0.17em; height: 0.17em; margin-left: 0.04em; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0.02em rgba(143, 180, 10, 0.25); vertical-align: baseline; }
.lead { font-size: clamp(1.06rem, 1rem + 0.35vw, 1.3rem); line-height: 1.5; color: var(--ink-2); letter-spacing: -0.012em; max-width: 34em; }
.muted { color: var(--muted); }
.hand { font-family: var(--font-hand); font-weight: 500; color: var(--green-700); letter-spacing: 0; line-height: 1; }
.text-lime { color: var(--lime-700); }

/* ---------- Butoane ---------- */
.btn { --h: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-weight: 650; font-size: 15px; letter-spacing: -0.012em; white-space: nowrap; cursor: pointer; transition: transform 0.25s var(--ease), background-color 0.2s, box-shadow 0.25s, border-color 0.2s, color 0.2s; }
.btn .i { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn:hover .i--arrow { transform: translateX(3px); }
.btn--lime { background: var(--lime); color: var(--green-900); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.07), 0 10px 24px -12px rgba(143, 180, 10, 0.9); }
.btn--lime:hover { background: #ddfa58; transform: translateY(-1px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.07), 0 16px 30px -12px rgba(143, 180, 10, 0.95); }
.btn--dark { background: var(--green-900); color: #fff; }
.btn--dark:hover { background: var(--green-800); transform: translateY(-1px); }
.btn--ghost { background: rgba(255, 255, 255, 0.6); border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { background: #fff; border-color: rgba(14, 42, 31, 0.28); }
.btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }
.btn--lg { --h: 58px; padding: 0 30px; font-size: 16px; }
.btn--sm { --h: 42px; padding: 0 18px; font-size: 14px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.circle-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--green-700); }
.link-arrow .i { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.link-arrow:hover .i { transform: translateX(3px); }
.round-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink); background: #fff; transition: background-color 0.2s, border-color 0.2s, transform 0.25s var(--ease); }
.round-arrow .i { width: 16px; height: 16px; }

/* ---------- Antet ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(244, 246, 241, 0.78); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid transparent; transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s; }
.site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(244, 246, 241, 0.9); }
.header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 25px; letter-spacing: -0.04em; color: var(--ink); flex: none; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__mark--sm { width: 34px; height: 34px; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); transition: background-color 0.2s, color 0.2s; }
.nav a .i { width: 17px; height: 17px; color: var(--green-600); }
.nav a:hover { background: rgba(255, 255, 255, 0.75); color: var(--ink); }
.nav a[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--line); }
.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.lang { position: relative; }
.lang > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.7); font-size: 13.5px; font-weight: 650; cursor: pointer; user-select: none; color: var(--ink); }
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary .i { width: 15px; height: 15px; transition: transform 0.2s; }
.lang[open] > summary .i--chev { transform: rotate(180deg); }
.lang__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); z-index: 70; }
.lang__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.lang__item b { font-weight: 700; color: var(--ink); width: 28px; font-size: 12.5px; letter-spacing: 0.04em; }
.lang__item[aria-current="true"] { background: var(--lime-100); color: var(--ink); }
a.lang__item:hover:not([aria-current]) { background: var(--bg-2); color: var(--ink); }
.lang__item .i { margin-left: auto; color: var(--green-600); width: 16px; height: 16px; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: 0.01em; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.badge--lime { background: var(--lime); color: var(--green-900); }
.badge--green { background: var(--green-100); color: var(--green-700); }
.badge--dark { background: var(--green-900); color: var(--lime); }

.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.7); place-items: center; cursor: pointer; }
.burger .i { width: 20px; height: 20px; }
.mobile-nav { display: none; }

@media (max-width: 1240px) and (min-width: 1061px) {
  .nav a { padding: 9px 11px; }
  .nav a .i { display: none; }
}
@media (max-width: 1060px) {
  .nav, .header-actions .btn, .header-actions .lang { display: none; }
  .burger { display: grid; }
  .header-actions { margin-left: auto; }
  .mobile-nav { position: fixed; inset: var(--header-h) 0 0; z-index: 55; display: flex; flex-direction: column; gap: 6px; padding: 18px var(--gutter) 32px; background: var(--bg); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0.25s; }
  .mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .mobile-nav a.mobile-nav__link { display: flex; align-items: center; gap: 14px; padding: 16px 6px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 26px; font-weight: 750; letter-spacing: -0.035em; color: var(--ink); }
  .mobile-nav a.mobile-nav__link .i { width: 22px; height: 22px; color: var(--green-600); }
  .mobile-nav a.mobile-nav__link .i--go { margin-left: auto; color: var(--muted); }
  .mobile-nav a[aria-current="page"] { color: var(--green-600); }
  .mobile-nav__langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
  .mobile-nav__langs > * { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 650; }
  .mobile-nav__langs [aria-current="true"] { background: var(--lime); border-color: var(--lime); }
  .mobile-nav__langs a { color: var(--ink-2); }
  .mobile-nav .btn { margin-top: 14px; }
  body.nav-open { overflow: hidden; }
}

/* ---------- Secțiuni ---------- */
.section { padding: clamp(58px, 7.2vw, 102px) 0; position: relative; }
.section--tight { padding: clamp(45px, 4.8vw, 70px) 0; }
.section--tint { background: var(--bg-2); }
.section--white { background: var(--surface); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: clamp(36px, 4.5vw, 60px); }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head__aside { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; max-width: 30em; padding-bottom: 8px; }
.section-head--center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.section-head--center .section-head__aside { padding: 0; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; overflow: clip; padding-bottom: clamp(24px, 4vw, 56px); }
.hero::before { content: ""; position: absolute; inset: -10% -10% auto 35%; height: 115%; background: radial-gradient(closest-side at 58% 52%, rgba(212, 245, 60, 0.28), rgba(212, 245, 60, 0.08) 52%, rgba(212, 245, 60, 0) 72%); pointer-events: none; z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(14, 42, 31, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 42, 31, 0.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000 0%, transparent 72%); pointer-events: none; z-index: 0; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.32fr); gap: 0 12px; align-items: center; min-height: min(780px, calc(100svh - var(--header-h))); }
.hero__copy { padding: clamp(28px, 4vw, 56px) 0; position: relative; z-index: 4; }
.hero__copy .eyebrow { margin-bottom: 26px; }
.hero__copy .lead { margin-top: 28px; max-width: 27em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 36px; }
.play-link { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 560; color: var(--ink-2); line-height: 1.3; }
.play-link__btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.play-link__btn .i { width: 18px; height: 18px; }
.play-link:hover .play-link__btn { transform: scale(1.06); box-shadow: var(--shadow); }
.checks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; font-size: 14px; color: var(--ink-2); }
.checks li { display: inline-flex; align-items: center; gap: 8px; }
.checks .i { width: 17px; height: 17px; color: var(--green-600); stroke-width: 2.2; }
.hero__stage { position: relative; height: clamp(540px, 50vw, 760px); margin-right: calc(var(--gutter) * -1); margin-left: -40px; }

@media (max-width: 1060px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: 36px 0 8px; }
  .hero__stage { margin: 0 calc(var(--gutter) * -1); height: clamp(460px, 92vw, 640px); }
}

/* ---------- Motorul 3D ---------- */
.engine-stage { position: relative; isolation: isolate; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.engine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; opacity: 0; transition: opacity 0.9s ease; outline: none; }
.engine-stage.is-ready .engine-canvas { opacity: 1; }
.engine-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; opacity: 0; transition: opacity 0.8s ease 0.2s; }
.engine-stage.is-live .engine-lines { opacity: 1; }
.engine-line { fill: none; stroke: rgba(14, 42, 31, 0.34); stroke-width: 1.15; transition: stroke 0.25s; }
.engine-line.is-active { stroke: var(--green-600); stroke-width: 1.6; }
.engine-dot { fill: #fff; stroke: var(--green-700); stroke-width: 1.6; }
.engine-dot-halo { fill: rgba(212, 245, 60, 0.6); transition: opacity 0.25s; }
.engine-end { fill: rgba(14, 42, 31, 0.45); }

/* Cardurile din hero le comandă engine3d.js: is-shown (apare), is-told (textul, după 1 s), is-leaving (pleacă).
   Panoul coboară de sus, înclinat cu --tilt, și se așază; o lumină trece peste el; textul cade puțin, cu fade. */
.engine-card { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; width: var(--w, 214px); opacity: 0; visibility: hidden; cursor: pointer; pointer-events: none; transform-origin: 50% 0; --tilt: 0deg; }
.engine-card.is-shown { opacity: 1; visibility: visible; pointer-events: auto; animation: card-in 0.95s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
.engine-card.is-leaving { visibility: visible; animation: card-out 0.45s ease-in both; }
.engine-card__text { margin: 9px 0 0; padding: 10px 13px 11px; border-radius: 14px; background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 14px 30px -18px rgba(8, 27, 19, 0.32), 0 0 0 1px rgba(14, 42, 31, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12.5px; line-height: 1.42; color: var(--ink-2); opacity: 0; }
.engine-card.is-told .engine-card__text { opacity: 1; animation: card-text-in 0.75s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
@keyframes card-in {
  0% { opacity: 0; transform: perspective(900px) translateY(-44px) rotateX(22deg) rotateY(var(--tilt)) scale(0.92); filter: blur(6px); }
  50% { opacity: 1; filter: blur(0); }
  74% { transform: perspective(900px) translateY(4px) rotateX(-3deg) rotateY(calc(var(--tilt) * -0.15)) scale(1.01); }
  100% { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0deg) rotateY(0deg) scale(1); filter: none; }
}
@keyframes card-out {
  from { opacity: 1; transform: none; filter: none; }
  to { opacity: 0; transform: translateY(12px) scale(0.96); filter: blur(4px); }
}
@keyframes card-text-in {
  0% { opacity: 0; transform: translateY(-16px); filter: blur(4px); }
  65% { opacity: 1; transform: translateY(2px); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: none; }
}
@keyframes card-shine { to { transform: translateX(115%); } }
.engine-card__label { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; margin: 0 0 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 6px 18px -10px rgba(8, 27, 19, 0.35), inset 0 0 0 1px rgba(14, 42, 31, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; transition: background-color 0.25s, box-shadow 0.25s; }
.engine-card__label .i { width: 15px; height: 15px; color: var(--green-600); }
.engine-card__body { position: relative; padding: 12px; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.56)); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 22px 46px -22px rgba(8, 27, 19, 0.36), 0 0 0 1px rgba(14, 42, 31, 0.05); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); overflow: hidden; transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s; }
.engine-card__body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.72) 47%, rgba(236, 255, 170, 0.38) 54%, transparent 70%); transform: translateX(-115%); pointer-events: none; }
.engine-card.is-shown .engine-card__body::after { animation: card-shine 1.2s ease-in-out 0.6s both; }
.engine-card.is-active .engine-card__body { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 26px 52px -22px rgba(8, 27, 19, 0.42), 0 0 0 2px rgba(212, 245, 60, 0.95); }
.engine-card.is-active .engine-card__label { background: var(--lime); }

/* pozițiile cardurilor din hero (desktop) */
/* --tilt: cardurile din stânga intră rotite într-o parte, cele din dreapta în cealaltă */
.engine-card[data-anchor="lessons"] { left: 2%; top: 3%; --tilt: 20deg; }
.engine-card[data-anchor="practice"] { left: 37%; top: 0; --tilt: 8deg; }
.engine-card[data-anchor="quizzes"] { right: 5%; top: 5%; --w: 180px; --tilt: -20deg; }
.engine-card[data-anchor="progress"] { left: 25%; bottom: 10%; --w: 236px; --tilt: 18deg; }
.engine-card[data-anchor="certificates"] { right: 3%; bottom: 15%; --w: 200px; --tilt: -20deg; }
.engine-card__body, .engine-card__text { align-self: stretch; }
/* la cardurile de jos textul stă deasupra, spre motor */
.engine-card[data-anchor="progress"] .engine-card__text, .engine-card[data-anchor="certificates"] .engine-card__text { order: -1; margin: 0 0 9px; }

@media (max-width: 900px) {
  .hero__stage { height: clamp(420px, 108vw, 600px); }
}
/* telefon: același panou mare, apare pe rând în același loc deasupra motorului —
   imaginea în stânga, textul în dreapta */
@media (max-width: 640px) {
  .engine-stage .engine-hand { display: none; }
  .hero__stage { height: clamp(480px, 132vw, 600px); }
  .engine-stage .engine-card { left: 12px; right: 12px; top: 6px; bottom: auto; width: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "label label" "body text"; column-gap: 10px; align-items: start; }
  /* toate apar în același loc: următorul card așteaptă să plece cel dinainte */
  .engine-stage .engine-card.is-shown { animation-delay: 0.3s; }
  .engine-stage .engine-card__label { grid-area: label; justify-self: start; margin: 0 0 8px; height: 32px; padding: 0 13px; font-size: 13px; gap: 6px; }
  .engine-stage .engine-card__body { grid-area: body; padding: 9px; border-radius: 15px; }
  .engine-stage .engine-card .engine-card__text { grid-area: text; align-self: start; margin: 0; padding: 9px 11px 10px; font-size: 12px; }
  .engine-card .mini-thumb { height: 62px; }
  .engine-card .mini-play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .engine-card .mini-rows { gap: 7px; margin-top: 9px; }
  .engine-card .mini-ico { width: 18px; height: 18px; }
  .engine-card .mini-3d { height: 76px; }
  .engine-card .mini-3d svg { width: 96px; height: auto; }
  .engine-card .mini-progress { gap: 10px; }
  .engine-card .ring { width: 64px; height: 64px; }
  .engine-card .ring__num { font-size: 17px; }
  .engine-card .mini-cert { height: 78px; padding: 11px; gap: 6px; }
  .engine-card .mini-cert .seal { width: 32px; right: 9px; }
  .engine-stage.is-fallback .engine-card { display: none; }
}
@media (max-width: 560px) {
  .engine-stage .engine-hint { display: none; }
}

.engine-ui { position: absolute; z-index: 5; left: clamp(8px, 2vw, 32px); bottom: 6px; display: flex; align-items: center; gap: 10px; }
.engine-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; font-weight: 640; color: var(--ink); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
.engine-btn:hover { background: #fff; border-color: rgba(14, 42, 31, 0.3); }
.engine-btn .i { width: 17px; height: 17px; color: var(--green-600); }
.engine-btn--icon { width: 40px; padding: 0; justify-content: center; }
.engine-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin-left: 4px; transition: opacity 0.4s; }
.engine-hint .i { width: 16px; height: 16px; }
.engine-stage.is-dragging .engine-hint { opacity: 0; }
.engine-hand { position: absolute; z-index: 4; right: clamp(8px, 2vw, 32px); bottom: 2px; font-size: clamp(24px, 2.1vw, 32px); transform: rotate(-7deg); color: var(--green-700); opacity: 0.9; pointer-events: none; display: flex; align-items: flex-end; gap: 6px; }
.engine-hand svg { width: 52px; height: 24px; transform: translateY(-2px); }
.engine-tip { position: absolute; z-index: 6; pointer-events: none; padding: 7px 12px; border-radius: 10px; background: var(--green-900); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity 0.15s; }
.engine-tip.is-on { opacity: 1; }
.engine-tip small { color: var(--lime); font-weight: 600; margin-left: 6px; }
.engine-fallback { display: none; position: absolute; inset: 0; place-items: center; text-align: center; padding: 24px; }
.engine-stage.is-fallback .engine-fallback { display: grid; }
.engine-stage.is-fallback .engine-card { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.engine-stage.is-fallback .engine-card__text { display: none; }
/* până pornește motorul: imaginea lui, încețoșată (capturată din model), și eticheta de încărcare;
   la is-ready imaginea se clarifică puțin și dispare sub motorul real */
.engine-loader { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity 0.7s ease; }
.engine-poster, .engine-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.engine-poster img { object-fit: cover; filter: blur(14px) saturate(1.2); opacity: 0.8; transform: scale(1.03); transition: filter 0.7s ease, transform 0.7s ease; animation: poster-breathe 2.4s ease-in-out infinite; }
.engine-loader__badge { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 38px; margin: 0; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 12px 30px -16px rgba(8, 27, 19, 0.4), inset 0 0 0 1px rgba(14, 42, 31, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: opacity 0.3s ease; }
.engine-loader__spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(14, 42, 31, 0.14); border-top-color: var(--green-600); animation: spin 0.8s linear infinite; }
.engine-stage.is-ready .engine-loader, .engine-stage.is-fallback .engine-loader { opacity: 0; }
.engine-stage.is-ready .engine-poster img { filter: blur(4px) saturate(1.1); transform: none; animation: none; }
.engine-stage.is-ready .engine-loader__badge { opacity: 0; }
@keyframes poster-breathe { 50% { opacity: 0.6; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* conținutul cardurilor din hero */
.mini-thumb { position: relative; height: 92px; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #97a6b3, #d8c7a8 70%, #b29a7b); }
.mini-thumb svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-play { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(14, 26, 20, 0.55); border: 1.5px solid rgba(255, 255, 255, 0.9); display: grid; place-items: center; color: #fff; backdrop-filter: blur(4px); }
.mini-play .i { width: 14px; height: 14px; margin-left: 2px; }
.mini-rows { display: grid; gap: 9px; margin-top: 12px; }
.mini-row { display: flex; align-items: center; gap: 9px; }
.mini-ico { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--green-100); color: var(--green-600); flex: none; }
.mini-ico .i { width: 12px; height: 12px; stroke-width: 2.2; }
.mini-ico--check { background: var(--green-600); color: #fff; border-radius: 5px; }
.mini-bar { position: relative; height: 6px; flex: 1; border-radius: 99px; background: rgba(14, 42, 31, 0.1); overflow: hidden; }
.mini-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--green-600), #4aa36a); }
.mini-bar--lime::before { background: linear-gradient(90deg, var(--lime-600), var(--lime)); }
.mini-bar--plain::before { display: none; }
.mini-line { height: 6px; border-radius: 99px; background: rgba(14, 42, 31, 0.1); }
.mini-3d { height: 96px; border-radius: 12px; background: radial-gradient(circle at 50% 45%, #ffffff, #e7ebe4 70%); display: grid; place-items: center; overflow: hidden; }
.mini-3d img { height: 92px; width: auto; filter: drop-shadow(0 8px 10px rgba(8, 27, 19, 0.25)); }
.mini-progress { display: flex; align-items: center; gap: 14px; }
.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: rgba(14, 42, 31, 0.1); stroke-width: 8; }
.ring__val { fill: none; stroke: url(#ringGrad); stroke: var(--green-600); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease); }
.ring__num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.04em; color: var(--ink); }
.mini-cert { position: relative; height: 94px; border-radius: 10px; background: #fff; border: 1px solid var(--line); padding: 14px 14px; display: grid; gap: 7px; align-content: start; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(14, 42, 31, 0.08); }
.mini-cert .seal { position: absolute; right: 12px; bottom: 6px; width: 40px; }

/* ---------- Banda întunecată „LMS complet” ---------- */
.band { background: var(--green-900); color: #fff; position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 12% 0%, rgba(212, 245, 60, 0.1), transparent 70%), radial-gradient(500px 260px at 95% 100%, rgba(61, 139, 255, 0.08), transparent 70%); pointer-events: none; }
.band__inner { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr); gap: 32px 56px; align-items: center; padding-block: clamp(38px, 4.4vw, 61px); }
.band h2 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.75rem); letter-spacing: -0.045em; line-height: 1.04; margin-top: 14px; }
.band h2 .dot { width: 0.2em; height: 0.2em; }
.band__items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.band__item { display: grid; justify-items: center; gap: 14px; padding: 6px 10px; text-align: center; font-size: 15px; font-weight: 640; line-height: 1.25; color: #fff; position: relative; letter-spacing: -0.01em; }
.band__item + .band__item::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: rgba(255, 255, 255, 0.13); }
.band__icon { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #fff; transition: background-color 0.3s, color 0.3s, transform 0.3s var(--ease); }
.band__icon .i { width: 25px; height: 25px; stroke-width: 1.7; }
.band__item:hover .band__icon { background: var(--lime); color: var(--green-900); transform: translateY(-3px); }
.band__item small { display: block; font-size: 12.5px; font-weight: 450; color: rgba(255, 255, 255, 0.6); margin-top: 4px; }
@media (max-width: 1060px) { .band__inner { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .band__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .band__item + .band__item::before { display: none; }
  .band__item:last-child { grid-column: 1 / -1; }
}

/* ---------- Carduri de funcționalități (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.f-card { position: relative; grid-column: span 2; display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.f-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.f-card--wide { grid-column: span 3; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.f-card__icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.f-card__icon .i { width: 24px; height: 24px; }
.f-card__text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.f-card h3 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); letter-spacing: -0.035em; line-height: 1.1; margin-top: 10px; }
.f-card p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.f-card .round-arrow { margin-top: auto; }
.f-card:hover .round-arrow { background: var(--lime); border-color: var(--lime); }
.f-card__visual { position: relative; min-height: 220px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.f-card__visual--bare { background: transparent; border: 0; }
.f-card--small .f-card__visual { order: -1; min-height: 196px; flex: none; }
.f-card--small h3 { margin-top: 2px; }
@media (max-width: 1060px) {
  .f-card--wide { grid-column: span 6; }
  .f-card--small { grid-column: span 3; }
  .f-card--small:last-child { grid-column: span 6; }
}
@media (max-width: 680px) {
  .f-card--wide { grid-template-columns: 1fr; }
  .f-card--small { grid-column: span 6; }
  .f-card { padding: 22px; }
}

/* machete UI (stilizate) */
.ui { font-family: var(--font); font-size: 11.5px; color: var(--ink-2); letter-spacing: 0; }
.ui-window { position: absolute; background: #fff; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.ui-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ui-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(14, 42, 31, 0.14); }
.ui-bar span { margin-left: 8px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.ui-list { display: grid; gap: 2px; padding: 6px; }
.ui-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 560; color: var(--ink); }
.ui-item .i { width: 14px; height: 14px; }
.ui-item--on { background: var(--lime-100); box-shadow: inset 0 0 0 1px rgba(143, 180, 10, 0.35); }
.ui-tag { margin-left: auto; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--green-100); color: var(--green-700); }
.ui-tag--lime { background: var(--lime); color: var(--green-900); }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); font-size: 11.5px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.ui-chip .i { width: 14px; height: 14px; }
.ico-blue { color: #3b6fe0; }
.ico-violet { color: #7b5be0; }
.ico-orange { color: #e0782e; }
.ico-red { color: #d6453a; }
.ico-green { color: var(--green-600); }
.ico-teal { color: #1e9a8a; }
.video-thumb { position: relative; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #8193a6 0%, #c7b9a1 62%, #9d8a6f 100%); }
.video-thumb svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Pentru cine ---------- */
.ticks { list-style: none; display: grid; gap: 10px; font-size: 15px; color: var(--ink-2); }
.ticks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.ticks .i { width: 18px; height: 18px; margin-top: 1px; color: var(--green-600); stroke-width: 2.2; }
.ticks--light { color: rgba(255, 255, 255, 0.82); }
.ticks--light .i { color: var(--lime); }

/* ---------- Pași ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; list-style: none; }
.step { position: relative; padding: 26px 24px 28px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.step__num { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.02em; color: var(--green-600); display: flex; align-items: center; gap: 10px; }
.step__num::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.step .i-wrap { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--lime-100); color: var(--green-700); margin: 22px 0 16px; box-shadow: inset 0 0 0 1px rgba(143, 180, 10, 0.3); }
.step h3 { font-size: 1.2rem; letter-spacing: -0.03em; margin-bottom: 8px; }
.step p { font-size: 14.5px; line-height: 1.55; }
@media (max-width: 1060px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Cloud vs server propriu ---------- */
.deploy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.d-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.d-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.d-card__icon { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; background: var(--bg-2); color: var(--green-700); box-shadow: inset 0 0 0 1px var(--line); }
.d-card__icon .i { width: 27px; height: 27px; }
.d-card h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -0.045em; }
.d-card__price { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); letter-spacing: 0; word-spacing: 0.12em; }
.d-card__price b { font-size: 1.9rem; letter-spacing: -0.045em; }
.d-card--dark { background: var(--green-900); border-color: var(--green-900); color: rgba(255, 255, 255, 0.8); }
.d-card--dark h3, .d-card--dark .d-card__price { color: #fff; }
.d-card--dark .d-card__icon { background: rgba(255, 255, 255, 0.08); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.d-card .btn { align-self: flex-start; margin-top: auto; }
.d-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.migrate { margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; padding: 22px 26px; border-radius: var(--radius-lg); background: var(--lime-100); border: 1px solid rgba(143, 180, 10, 0.35); }
.migrate__icon { width: 50px; height: 50px; border-radius: 14px; background: var(--lime); display: grid; place-items: center; color: var(--green-900); }
.migrate h3 { font-size: 1.15rem; letter-spacing: -0.025em; margin-bottom: 4px; }
.migrate p { font-size: 14.5px; }
@media (max-width: 860px) { .deploy { grid-template-columns: 1fr; } .migrate { grid-template-columns: 1fr; } }

/* ---------- De ce NexiLMS ---------- */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.why__item { background: var(--surface); padding: 30px 28px; display: grid; gap: 12px; align-content: start; }
.why__item .i { width: 26px; height: 26px; color: var(--green-600); }
.why__item h3 { font-size: 1.15rem; letter-spacing: -0.025em; }
.why__item p { font-size: 14.5px; line-height: 1.55; }
@media (max-width: 960px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .why { grid-template-columns: 1fr; } }

/* „Totul inclus”: instrumentele care altfel ar fi servicii separate */
.suite { margin-top: clamp(48px, 5.5vw, 80px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(30px, 3.8vw, 52px); border-radius: var(--radius-lg); background: var(--green-900); color: rgba(255, 255, 255, 0.72); }
.suite__intro { display: grid; gap: 16px; justify-items: start; }
.suite__title { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); letter-spacing: -0.045em; line-height: 1.05; }
.suite__intro p { font-size: 15px; line-height: 1.6; }
.suite__intro .btn { margin-top: 6px; }
.suite__tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.suite__tool { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.suite__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--lime); }
.suite__tool b { display: block; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.suite__tool small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }
.suite__ok { width: 18px; height: 18px; color: var(--lime); stroke-width: 2.4; }
@media (max-width: 1080px) { .suite { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .suite__tools { grid-template-columns: 1fr; } }

/* ---------- Despre companie ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.about p + p { margin-top: 16px; }
.about__card { position: relative; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.about__card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 22px; margin: 22px 0 0; font-size: 15px; }
.about__card dt { color: var(--muted); }
.about__card dd { margin: 0; color: var(--ink); font-weight: 560; overflow-wrap: anywhere; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* ---------- Banner CTA ---------- */
.cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 320px; padding: clamp(36px, 4.5vw, 64px); border-radius: var(--radius-xl); background: var(--green-900); color: rgba(255, 255, 255, 0.78); overflow: hidden; isolation: isolate; }
.cta::before { content: ""; position: absolute; right: -8%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(212, 245, 60, 0.2), rgba(212, 245, 60, 0) 65%); z-index: -1; }
.cta::after { content: ""; position: absolute; right: 18%; top: -30%; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.015), 0 0 0 120px rgba(255, 255, 255, 0.012); z-index: -1; }
.cta h2 { color: #fff; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); letter-spacing: -0.05em; line-height: 1; }
.cta p { margin-top: 16px; font-size: 16.5px; max-width: 30em; }
.cta .btn { margin-top: 30px; }
.cta__visual { position: relative; height: 100%; min-height: 240px; }
.cta__pills { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; gap: 12px; justify-items: end; }
.cta__pill { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--ink); font-weight: 640; font-size: 14.5px; box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.5); }
.cta__pill .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--green-900); color: var(--lime); }
.cta__pill .ic .i { width: 16px; height: 16px; }
.cta__pill:nth-child(2) { margin-right: 28px; }
.cta__pill:nth-child(3) { margin-right: 6px; }
.cta .cta__hand { position: absolute; left: 4%; bottom: 8%; margin: 0; font-size: 30px; color: var(--lime); transform: rotate(-12deg); opacity: 0.9; display: flex; flex-direction: column; line-height: 0.95; }
.cta__hand svg { width: 52px; margin: 4px 0 0 30px; }
.cta__badge { position: absolute; left: 18%; top: 10%; width: 150px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); }
.cta__badge b { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.05em; color: #fff; line-height: 1; }
.cta__badge span { font-size: 12.5px; color: rgba(255, 255, 255, 0.65); }
.cta__badge .mini-bar { margin-top: 12px; background: rgba(255, 255, 255, 0.14); }
@media (max-width: 860px) {
  .cta { grid-template-columns: 1fr; }
  .cta__visual { min-height: 200px; }
  .cta__pills { right: auto; left: 0; transform: none; top: 0; justify-items: start; }
  .cta__pill:nth-child(n) { margin: 0; }
  .cta__badge { left: auto; right: 0; top: 0; }
  .cta__hand { left: auto; right: 4%; bottom: 0; }
}
/* Bannerul „Hai să începem” (demo.html): text | personaj pe mijloc | pași; înălțimea rămâne cea a bannerului obișnuit */
.cta--start { grid-template-columns: minmax(0, 1fr) minmax(230px, 0.72fr) minmax(0, 1fr); gap: 0 24px; }
.cta--start::before { right: auto; left: 50%; top: auto; bottom: -38%; width: 46%; transform: translateX(-50%); }
/* discul mai deschis din spatele personajului face umbra vizibilă pe verdele închis */
.cta--start::after { right: auto; left: 50%; top: 6%; width: 34%; transform: translateX(-50%); background: radial-gradient(circle at 50% 45%, rgba(212, 245, 60, 0.13), rgba(212, 245, 60, 0.04) 72%); }
/* coloana personajului trece peste padding (al .cta e clamp(36px, 4.5vw, 64px)): sus rămân 22px, jos poza atinge marginea bannerului */
.cta__person { position: relative; align-self: stretch; margin: calc(22px - clamp(36px, 4.5vw, 64px)) 0 calc(-1 * clamp(36px, 4.5vw, 64px)); animation: person-float 6s ease-in-out infinite; }
/* personajul se leagănă puțin stânga–dreapta */
@keyframes person-float { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(8px); } 75% { transform: translateX(-8px); } }
/* corpul stă la ~36% din lățimea pozei (laptopul iese spre dreapta), deci îl aducem pe axa coloanei */
.cta__person img, .cta__screen-light, .cta__screen-glow { position: absolute; left: 50%; bottom: 0; height: 100%; transform: translateX(-36%); }
.cta__person img { width: auto; max-width: none; filter: drop-shadow(12px 6px 14px rgba(0, 0, 0, 0.5)) drop-shadow(34px 14px 36px rgba(0, 0, 0, 0.45)); }
/* lumina ecranului: pornește de la marginea interioară a capacului (în poză, de la 514,440 la 457,600) și cade pe pieptul și antebrațul ei; al doilea strat de mască taie spatele capacului */
.cta__screen-light, .cta__screen-glow { aspect-ratio: 746 / 970; pointer-events: none; transition: filter 0.5s ease; }
.cta__screen-light { --lid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 746 970' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 671,0 514,440 457,600 325,970 0,970'/%3E%3C/svg%3E"); -webkit-mask: url(../img/consultanta.webp?v=2) center / 100% 100% no-repeat, var(--lid) center / 100% 100% no-repeat; -webkit-mask-composite: source-in; mask: url(../img/consultanta.webp?v=2) center / 100% 100% no-repeat, var(--lid) center / 100% 100% no-repeat; mask-composite: intersect; mix-blend-mode: screen; }
.cta__screen-light::before, .cta__screen-light::after { content: ""; position: absolute; inset: 0; }
.cta__screen-light::before { background: radial-gradient(ellipse 22% 15% at 65% 52%, rgba(196, 228, 255, 0.8), rgba(196, 228, 255, 0.32) 45%, rgba(196, 228, 255, 0) 100%), radial-gradient(ellipse 34% 22% at 58% 50%, rgba(196, 228, 255, 0.2), rgba(196, 228, 255, 0) 80%), radial-gradient(ellipse 12% 7% at 38% 25%, rgba(196, 228, 255, 0.14), rgba(196, 228, 255, 0) 100%); animation: screen-light 7s ease-in-out infinite; }
.cta__screen-light::after { background: radial-gradient(ellipse 22% 15% at 65% 52%, rgba(212, 245, 60, 0.55), rgba(212, 245, 60, 0) 100%); opacity: 0; animation: screen-light-alt 7s ease-in-out infinite; }
/* dunga de lumină de-a lungul marginii ecranului */
.cta__screen-glow { mix-blend-mode: screen; animation: screen-light 7s ease-in-out infinite; }
.cta__screen-glow::before { content: ""; position: absolute; left: 61.5%; top: 42.5%; width: 7%; height: 22%; transform: rotate(20deg); border-radius: 50%; background: radial-gradient(closest-side, rgba(220, 240, 255, 0.7), rgba(220, 240, 255, 0)); filter: blur(4px); }
.cta--start:hover .cta__screen-light, .cta--start:hover .cta__screen-glow { filter: brightness(1.35); }
@keyframes screen-light { 0%, 100% { opacity: 0.85; } 18% { opacity: 1; } 32% { opacity: 0.55; } 50% { opacity: 0.9; } 68% { opacity: 0.4; } 84% { opacity: 0.95; } }
@keyframes screen-light-alt { 0%, 100% { opacity: 0; } 30%, 40% { opacity: 0.9; } 65%, 72% { opacity: 0.15; } }
.cta--start .cta__hand { left: 0; top: 2%; bottom: auto; font-size: 32px; transform: rotate(-7deg); }
.cta--start .cta__hand svg { margin: 6px 0 0 -6px; transform: scaleX(-1) rotate(8deg); }
.cta--start .cta__pills { top: auto; bottom: 0; transform: none; }
@media (max-width: 1100px) {
  .cta--start { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .cta--start .cta__visual { display: none; }
  .cta--start::before, .cta--start::after { left: 76%; }
  .cta--start::after { width: 42%; }
}
@media (max-width: 600px) {
  .cta--start { grid-template-columns: 1fr; }
  .cta__person { height: 210px; margin-top: 20px; }
  .cta--start::before, .cta--start::after { left: 50%; top: auto; bottom: -24%; width: 80%; }
}

/* Bannerul „Testează acum” (index.html): trei oameni care se rotesc în cerc; cel de pe centru e în față.
   Fiecare om și fraza lui au un loc (data-slot): L stânga, C față, R dreapta, B în spate (doar în trecere, L → R).
   main.js schimbă locurile, iar tranzițiile de aici fac mișcarea. Scena are lățimea = 1,45 × înălțimea. */
.cta--team { --cta-pad: clamp(36px, 4.5vw, 64px); --team-ease: cubic-bezier(0.65, 0, 0.35, 1); container-type: inline-size; }
.cta--team > .cta__text { position: relative; z-index: 2; min-width: 0; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.cta .cta__actions .btn { margin-top: 0; }
.cta .cta__badge--row { position: static; display: flex; align-items: center; gap: 12px; width: auto; height: 58px; padding: 0 16px 0 14px; }
.cta__badge--row b { min-width: 2.35em; font-size: 26px; }
.cta__badge-meta { display: grid; gap: 8px; line-height: 1; white-space: nowrap; }
.cta__badge--row .mini-bar { flex: none; width: 84px; margin-top: 0; }
.cta__team { position: absolute; right: 2.5%; bottom: 0; z-index: 1; height: min(calc(100% - 22px), 34cqw); aspect-ratio: 1.45; pointer-events: none; }
/* discul mai deschis din spatele celui din față face umbra vizibilă pe verdele închis (ca în bannerul demo) */
.cta__team::before { content: ""; position: absolute; left: 50%; top: 2%; z-index: -1; width: 50%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, 0.08); background: radial-gradient(circle at 50% 45%, rgba(212, 245, 60, 0.13), rgba(212, 245, 60, 0.04) 72%); }
/* --w / --h: mărimea pozei pe scenă (femeia e decupată mai jos, deci e puțin mai scundă) */
.cta__member { position: absolute; bottom: 0; left: calc(var(--cx) - var(--w) / 2); width: var(--w); height: var(--h); transform-origin: 50% 100%; scale: var(--s);
  filter: brightness(var(--b)) drop-shadow(var(--sh1)) drop-shadow(var(--sh2));
  transition: left 1.6s var(--team-ease), scale 1.6s var(--team-ease), filter 1.6s var(--team-ease); }
.cta__member img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.cta__member[data-member="w"] { --w: 40.3%; --h: 94%; }
.cta__member[data-member="m"] { --w: 42.3%; --h: 100%; }
.cta__member[data-member="k"] { --w: 41%; --h: 99%; }
/* personajele din bannerul paginii Prețuri */
.cta__member[data-member="a"] { --w: 38.3%; --h: 96%; }
.cta__member[data-member="b"] { --w: 42.2%; --h: 100%; }
.cta__member[data-member="c"] { --w: 41.6%; --h: 96%; }
/* locurile: cel din față e mai mare, luminat și cu umbra plină; cei din spate au umbra mai slabă */
.cta__member[data-slot="C"] { --cx: 50%; --s: 1.04; --b: 1; --sh1: 12px 6px 14px rgba(0, 0, 0, 0.5); --sh2: 34px 14px 36px rgba(0, 0, 0, 0.45); z-index: 3; }
.cta__member[data-slot="L"], .cta__member[data-slot="R"] { --s: 0.92; --b: 0.74; --sh1: 5px 3px 8px rgba(0, 0, 0, 0.26); --sh2: 14px 6px 18px rgba(0, 0, 0, 0.18); z-index: 2; }
.cta__member[data-slot="L"] { --cx: 17.5%; }
.cta__member[data-slot="R"] { --cx: 82.5%; }
.cta__member[data-slot="B"] { --cx: 50%; --s: 0.78; --b: 0.45; --sh1: 3px 2px 6px rgba(0, 0, 0, 0.16); --sh2: 8px 4px 12px rgba(0, 0, 0, 0.1); z-index: 0; }
/* trecerea prin spate are două jumătăți: spre centru (accelerează), apoi spre dreapta (încetinește) */
.cta__member.is-passing { transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.45, 0, 1, 0.7); }
.cta__member.is-arriving { transition-duration: 0.8s; transition-timing-function: cubic-bezier(0, 0.3, 0.55, 1); }
.cta__tag { position: absolute; z-index: 5; left: var(--cx); bottom: var(--ty); transform: translateX(-50%); transition: left 1.6s var(--team-ease), bottom 1.6s var(--team-ease), opacity 0.5s ease; }
.cta__tag[data-slot="C"] { --cx: 50%; --ty: 7%; }
.cta__tag[data-slot="L"] { --cx: 17.5%; --ty: 22%; }
.cta__tag[data-slot="R"] { --cx: 82.5%; --ty: 22%; }
.cta__tag[data-slot="B"] { --cx: 50%; --ty: 14%; opacity: 0; }
.cta__tag.is-passing, .cta__tag.is-arriving { transition-duration: 0.8s, 0.8s, 0.3s; }
.cta__tag .cta__pill { position: relative; top: 0; white-space: nowrap; transition: background-color 0.5s ease; animation: team-bob 5.8s ease-in-out infinite; }
.cta__tag[data-member="m"] .cta__pill, .cta__tag[data-member="b"] .cta__pill { animation-delay: 0.9s; }
.cta__tag[data-member="k"] .cta__pill, .cta__tag[data-member="c"] .cta__pill { animation-delay: 1.8s; }
/* fraza celui din față se aprinde când el ajunge cam la jumătatea drumului */
.cta__tag[data-slot="C"] .cta__pill { background: var(--lime); transition-delay: 0.6s; }
@keyframes team-bob { 0%, 100% { top: 0; } 50% { top: -6px; } }
/* Prețuri (data-team="intro"): oamenii nu se rotesc. La prima apariție cel din stânga intră din stânga, ceilalți doi
   din dreapta (cel din față puțin mai târziu), apoi apar frazele; main.js pune .is-entering o singură dată.
   Până atunci sunt ascunși cu visibility (nu cu opacity, care are tranziție și ar acoperi animația). */
html:not(.no-js) .cta__team[data-team="intro"]:not(.is-entering) .cta__member,
html:not(.no-js) .cta__team[data-team="intro"]:not(.is-entering) .cta__tag { visibility: hidden; }
.cta__team.is-entering .cta__member { animation: team-in-right 1.1s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.cta__team.is-entering .cta__member[data-slot="L"] { animation-name: team-in-left; }
.cta__team.is-entering .cta__member[data-slot="C"] { animation-delay: 0.3s; }
/* după intrare se leagănă ușor stânga–dreapta, ca personajul din bannerul demo, dar mai puțin (4 px în loc de 8,
   cerut), fiecare în alt moment al mișcării; legănarea e pe poză, ca să nu se încurce cu intrarea */
.cta__team[data-team="intro"] .cta__member img { animation: team-sway 7s ease-in-out infinite; }
.cta__team[data-team="intro"] .cta__member[data-slot="C"] img { animation-delay: -2.3s; }
.cta__team[data-team="intro"] .cta__member[data-slot="R"] img { animation-delay: -4.6s; }
@keyframes team-sway { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }
.cta__team.is-entering .cta__tag { animation: team-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.cta__team.is-entering .cta__tag[data-slot="L"] { animation-delay: 0.95s; }
.cta__team.is-entering .cta__tag[data-slot="C"] { animation-delay: 1.1s; }
.cta__team.is-entering .cta__tag[data-slot="R"] { animation-delay: 1.25s; }
@keyframes team-in-left { from { opacity: 0; transform: translateX(-38%); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes team-in-right { from { opacity: 0; transform: translateX(38%); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes team-pop { from { opacity: 0; translate: 0 14px; scale: 0.8; } to { opacity: 1; translate: none; scale: none; } }
.cta--team .cta__hand { left: auto; right: 96%; top: 0; bottom: auto; transform: rotate(-10deg); }
.cta--team .cta__hand svg { margin: 6px 0 0 36px; transform: scaleY(-1); }
@media (max-width: 1100px) { .cta--team .cta__hand { display: none; } }
/* tabletă și telefon: oamenii stau sub text, lipiți de marginea de jos, ca animația să rămână */
@media (max-width: 960px) {
  .cta--team { grid-template-columns: 1fr; }
  .cta__team { position: relative; right: auto; bottom: auto; justify-self: center; width: min(calc(100% + 2 * var(--cta-pad)), clamp(319px, 66.7vw, 435px)); height: auto; margin: 0 calc(-1 * var(--cta-pad)) calc(-1 * var(--cta-pad)); }
}
/* pe telefon se vede doar fraza celui din față */
@media (max-width: 600px) {
  .cta--team .cta__pill { height: 38px; gap: 8px; padding: 0 14px 0 6px; font-size: 13px; }
  .cta--team .cta__pill .ic { width: 26px; height: 26px; }
  .cta__tag:not([data-slot="C"]) { opacity: 0; }
  .cta__team.is-entering .cta__tag:not([data-slot="C"]) { animation: none; }
  .cta__tag[data-slot="C"] { --ty: 6%; }
}

/* ---------- Subsol ---------- */
.site-footer { margin-top: clamp(56px, 7vw, 96px); background: var(--green-950); color: rgba(255, 255, 255, 0.68); font-size: 14.5px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px 40px; padding: clamp(52px, 6vw, 80px) 0 44px; }
.footer-brand .brand { color: #fff; }
.footer-brand p { margin-top: 18px; max-width: 24em; line-height: 1.6; }
.footer-col h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; margin-bottom: 18px; font-family: var(--font); }
.footer-col ul { list-style: none; display: grid; gap: 11px; }
.footer-col a { transition: color 0.2s; }
.footer-col a:hover { color: var(--lime); }
.footer-col li { display: flex; gap: 10px; align-items: flex-start; }
.footer-col li .i { width: 17px; height: 17px; margin-top: 3px; color: var(--lime); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px 0 28px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13.5px; }
.footer-langs { display: flex; gap: 8px; }
.footer-langs > * { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); font-weight: 650; font-size: 12.5px; }
.footer-langs [aria-current="true"] { background: var(--lime); border-color: var(--lime); color: var(--green-900); }
.footer-langs a { transition: color 0.2s, border-color 0.2s; }
.footer-langs a:hover { color: var(--lime); border-color: var(--lime); }
@media (max-width: 960px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Antet de pagină (paginile interioare) ---------- */
.page-hero { position: relative; padding: clamp(48px, 7vw, 104px) 0 clamp(36px, 4vw, 64px); overflow: hidden; overflow: clip; }
.page-hero::before { content: ""; position: absolute; right: -10%; top: -30%; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(212, 245, 60, 0.3), rgba(212, 245, 60, 0) 70%); pointer-events: none; }
.page-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px 64px; align-items: end; }
.page-hero .eyebrow { margin-bottom: 22px; }
.page-hero .lead { margin-top: 24px; }
.page-hero__aside { display: grid; gap: 14px; padding-bottom: 6px; }
@media (max-width: 960px) { .page-hero__inner { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pagina Funcționalități
   ========================================================================== */
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); font-size: 14px; color: var(--ink-2); }
.hero-chip b { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 11px; background: var(--lime); color: var(--green-900); font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }

.subnav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(244, 246, 241, 0.9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-block: 1px solid var(--line); }
.subnav__track { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
.subnav__track::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 38px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; scroll-snap-align: center; transition: background-color 0.2s, color 0.2s; }
.subnav a .i { width: 16px; height: 16px; color: var(--green-600); }
.subnav a:hover { background: #fff; color: var(--ink); }
.subnav a[aria-current="true"] { background: var(--green-900); color: #fff; }
.subnav a[aria-current="true"] .i { color: var(--lime); }

.feat { padding: clamp(51px, 6.4vw, 90px) 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 64px); }
.feat:nth-of-type(even) { background: var(--surface); }
.feat__head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 32px 64px; align-items: center; }
.feat__head--flip .feat__intro { order: 2; }
.feat__intro .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.feat__intro .eyebrow .num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--green-900); color: var(--lime); letter-spacing: 0; font-size: 11.5px; }
.feat__intro h2 { margin-bottom: 20px; }
.feat__intro .lead { font-size: 1.08rem; }
.feat__intro .ticks { margin-top: 24px; }
.feat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(36px, 4vw, 56px); }
.fi { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-content: start; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color 0.25s, box-shadow 0.25s, transform 0.3s var(--ease); }
.feat:nth-of-type(even) .fi { background: var(--surface-2); }
.fi:hover { border-color: rgba(143, 180, 10, 0.55); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.fi__icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--lime-100); color: var(--green-700); box-shadow: inset 0 0 0 1px rgba(143, 180, 10, 0.3); }
.fi__icon .i { width: 20px; height: 20px; }
.fi h3 { font-size: 1rem; letter-spacing: -0.015em; line-height: 1.3; font-weight: 700; padding-top: 1px; }
.fi p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.fi .badge { margin-top: 8px; justify-self: start; grid-column: 2; }
@media (max-width: 1060px) { .feat__head { grid-template-columns: 1fr; } .feat__head--flip .feat__intro { order: 0; } .feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .feat__grid { grid-template-columns: 1fr; } }

/* machete mari */
.mock { position: relative; border-radius: 22px; background: linear-gradient(160deg, #eef2ea, #f7f9f5); border: 1px solid var(--line); padding: clamp(14px, 2.4vw, 28px); box-shadow: var(--shadow); overflow: hidden; font-size: 12.5px; color: var(--ink-2); }
.mock::before { content: ""; position: absolute; right: -14%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(212, 245, 60, 0.35), transparent 70%); pointer-events: none; }
.mw { position: relative; background: #fff; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.mw__bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; }
.mw__bar .dots { display: inline-flex; gap: 5px; margin-right: 4px; }
.mw__bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(14, 42, 31, 0.14); }
.mw__bar .crumb { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.mw__bar .sp { flex: 1; }
.mbtn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; font-size: 11px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.mbtn--lime { background: var(--lime); border-color: var(--lime); }
.mbtn--dark { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.mbtn .i { width: 13px; height: 13px; }
.m-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; font-size: 12px; font-weight: 560; color: var(--ink); }
.m-row .i { width: 15px; height: 15px; flex: none; }
.m-row--on { background: var(--lime-100); box-shadow: inset 0 0 0 1px rgba(143, 180, 10, 0.4); }
.m-row--sub { padding-left: 30px; font-weight: 500; color: var(--ink-2); }
.m-row small { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 11px; }
.m-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.m-line { height: 7px; border-radius: 99px; background: rgba(14, 42, 31, 0.09); }
.m-line--dark { background: rgba(14, 42, 31, 0.2); height: 9px; }
.m-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.m-chip .i { width: 14px; height: 14px; }
.m-chip--on { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.m-chip--lime { background: var(--lime); border-color: var(--lime); color: var(--green-900); }
.m-toggle { position: relative; width: 30px; height: 18px; border-radius: 99px; background: rgba(14, 42, 31, 0.16); flex: none; }
.m-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.m-toggle--on { background: var(--green-600); }
.m-toggle--on::after { left: 14px; }

/* editor */
.m-editor { display: grid; grid-template-columns: 190px minmax(0, 1fr) 168px; min-height: 420px; }
.m-editor__side { border-right: 1px solid var(--line); padding: 8px; background: var(--surface-2); }
.m-editor__canvas { padding: 22px 26px; display: grid; gap: 14px; align-content: start; }
.m-editor__palette { border-left: 1px solid var(--line); padding: 8px; display: grid; gap: 2px; align-content: start; }
.m-block { position: relative; border-radius: 10px; padding: 10px 12px; outline: 1.5px dashed transparent; }
.m-block--sel { outline-color: var(--green-500); background: rgba(46, 139, 88, 0.04); }
.m-block__handle { position: absolute; left: -18px; top: 10px; color: var(--muted); font-size: 13px; letter-spacing: -2px; }
.m-h { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: var(--ink); }
.m-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-step { border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); padding: 10px; display: grid; gap: 6px; }
.m-step b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--green-900); color: var(--lime); font-size: 11px; }
.m-media { display: grid; grid-template-columns: 0.9fr 1fr; gap: 12px; align-items: center; }
.m-img { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.m-format { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); display: inline-flex; gap: 2px; padding: 4px; border-radius: 10px; background: var(--green-900); color: #fff; box-shadow: var(--shadow); }
.m-format span { display: grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.m-format span.on { background: rgba(255, 255, 255, 0.14); }
@media (max-width: 860px) { .m-editor { grid-template-columns: minmax(0, 1fr); } .m-editor__side, .m-editor__palette { display: none; } }

/* import */
.m-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.m-opt { position: relative; border-radius: 12px; border: 1.5px solid var(--line-2); padding: 12px; display: grid; gap: 6px; align-content: start; background: #fff; }
.m-opt b { font-size: 12px; color: var(--ink); line-height: 1.3; }
.m-opt span { font-size: 11px; color: var(--muted); line-height: 1.4; }
.m-opt--on { border-color: var(--green-600); background: var(--lime-100); }
.m-opt__radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; }
.m-opt--on .m-opt__radio { border: 5px solid var(--green-600); }
.m-file { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1.5px dashed rgba(14, 42, 31, 0.2); background: var(--surface-2); }
.m-file__ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--green-900); color: var(--lime); flex: none; }
.m-report { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 620px) { .m-opts { grid-template-columns: 1fr; } }

/* tablou de bord */
.m-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.m-kpi { border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); padding: 12px; display: grid; gap: 4px; }
.m-kpi span { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.m-kpi b { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.04em; color: var(--ink); }
.m-kpi em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--green-600); }
.m-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 14px 4px 0; border-bottom: 1px solid var(--line); }
.m-chart i { flex: 1; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #3d9b63, var(--green-700)); min-height: 8px; }
.m-chart i.hl { background: linear-gradient(180deg, #e2fb6c, var(--lime-600)); }
.m-donut { width: 110px; height: 110px; border-radius: 50%; background: conic-gradient(var(--green-700) 0 64%, var(--lime) 64% 95%, #9bc9ad 95% 100%); display: grid; place-items: center; flex: none; }
.m-donut::after { content: ""; width: 64px; height: 64px; border-radius: 50%; background: #fff; }
.m-legend { display: grid; gap: 7px; font-size: 11.5px; }
.m-legend span { display: flex; align-items: center; gap: 7px; }
.m-legend i { width: 10px; height: 10px; border-radius: 3px; }
@media (max-width: 620px) { .m-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* arbore companie */
.m-tree { display: grid; gap: 4px; }
.m-node { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink); }
.m-node .i { width: 15px; height: 15px; color: var(--green-600); }
.m-node small { margin-left: auto; color: var(--muted); font-weight: 500; }
.m-node--l1 { margin-left: 26px; }
.m-node--l2 { margin-left: 52px; }
.m-node--root { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.m-node--root .i { color: var(--lime); }
.m-node--root small { color: rgba(255, 255, 255, 0.6); }

/* certificat */
.m-cert { position: relative; border-radius: 12px; background: #fff; border: 1px solid var(--line); padding: 22px; box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px rgba(14, 42, 31, 0.1); }
.m-cert__title { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); }
.m-cert__name { font-family: var(--font-hand); font-size: 30px; color: var(--green-700); line-height: 1; margin: 8px 0; }
.m-cert__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 10.5px; color: var(--muted); }
.m-qr { width: 46px; height: 46px; border-radius: 6px; background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 9px 9px; border: 4px solid #fff; outline: 1px solid var(--line); flex: none; }

/* demo 3D */
.demo3d { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); gap: 18px; margin-top: clamp(32px, 4vw, 48px); }
.demo3d__player { border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; }
.demo3d__stage { position: relative; height: clamp(360px, 40vw, 520px); background: radial-gradient(ellipse at 50% 45%, #ffffff, #eef2ea 75%); }
.demo3d__panel { border-radius: 22px; background: var(--green-900); color: rgba(255, 255, 255, 0.78); padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 14px; }
.demo3d__panel h3 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.04em; }
.demo3d__feedback { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 14.5px; line-height: 1.5; color: #fff; min-height: 76px; }
.demo3d__feedback[data-kind="ok"] { background: rgba(212, 245, 60, 0.14); border-color: rgba(212, 245, 60, 0.5); }
.demo3d__feedback[data-kind="no"] { background: rgba(255, 140, 110, 0.12); border-color: rgba(255, 160, 130, 0.4); }
.demo3d__progress { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: #fff; margin-top: auto; }
.demo3d__progress .mini-bar { background: rgba(255, 255, 255, 0.15); height: 8px; }
.demo3d__panel .btn { align-self: flex-start; }
.demo3d__note { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); line-height: 1.5; }
.demo3d.is-done .demo3d__panel h3::after { content: " ✓"; color: var(--lime); }
.demo3d__stage .engine-ui { left: 14px; bottom: 12px; }
@media (max-width: 1060px) { .demo3d { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .demo3d__stage .engine-hint { display: none; } }

/* tabel comparativ */
.compare { position: relative; margin-top: clamp(32px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare table { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.compare th, .compare td { padding: 15px 14px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare thead th { position: sticky; top: 0; background: var(--surface); font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; padding-top: 20px; padding-bottom: 18px; }
.compare tbody th { text-align: left; font-weight: 600; color: var(--ink); width: 27%; }
.compare tbody th small { display: block; font-weight: 450; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.compare tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.compare .is-us { background: var(--lime-100); }
.compare thead .is-us { background: var(--green-900); color: #fff; border-radius: 16px 16px 0 0; }
.compare thead .is-us span { display: block; font-size: 11px; font-weight: 600; color: var(--lime); margin-top: 3px; letter-spacing: 0.02em; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare tbody tr:hover > * { background-color: #fbfcf9; }
.compare tbody tr:hover > .is-us { background: #f1fac8; }
.cv { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.cv .i { width: 15px; height: 15px; stroke-width: 2.6; }
.cv--yes { background: var(--green-600); color: #fff; }
.cv--part { background: #f3e7c3; color: #8a6510; }
.cv--no { background: rgba(14, 42, 31, 0.07); color: rgba(14, 42, 31, 0.4); }
.cnote { display: block; font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.3; }
.compare .price-cell { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: -0.02em; }
.compare .is-us .price-cell, .compare td.is-us.price-cell { color: var(--green-700); }
.compare-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; font-size: 13px; color: var(--muted); align-items: center; }
.compare-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.compare-legend .cv { width: 20px; height: 20px; flex: none; }
.compare-legend .cv .i { width: 12px; height: 12px; }
.footnote { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 12px; max-width: 70em; }

/* ==========================================================================
   Pagina Prețuri
   ========================================================================== */
.calc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.calc__left { padding: clamp(26px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.calc__right { padding: clamp(26px, 3.4vw, 44px); background: var(--green-900); color: rgba(255, 255, 255, 0.75); display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.calc__right::before { content: ""; position: absolute; right: -30%; top: -40%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(212, 245, 60, 0.18), transparent 70%); }
.calc__users { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.calc__users span { font-size: 16px; color: var(--ink-2); }
/* numărul de utilizatori se poate scrie de mână; lățimea urmează cifrele (--chars, din main.js) */
.calc__input { box-sizing: content-box; width: calc(var(--chars, 3) * (1ch - 0.05em) + 0.05em); padding: 4px 14px; margin-left: -4px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-2); font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; color: var(--ink); line-height: 1; cursor: text; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.calc__input:hover { border-color: rgba(14, 42, 31, 0.3); }
.calc__input:focus { outline: none; border-color: var(--green-600); background: #fff; box-shadow: 0 0 0 4px rgba(34, 112, 74, 0.14); }
.range { --fill: 40%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
.range:focus-visible { outline: none; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--green-600) var(--fill), rgba(14, 42, 31, 0.1) var(--fill)); }
.range::-moz-range-track { height: 8px; border-radius: 99px; background: rgba(14, 42, 31, 0.1); }
.range::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--green-600); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--lime); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(14, 42, 31, 0.2), 0 6px 14px -4px rgba(8, 27, 19, 0.4); }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--lime); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(14, 42, 31, 0.2), 0 6px 14px -4px rgba(8, 27, 19, 0.4); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(34, 112, 74, 0.35); }
.tiers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tiers button { height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; font-weight: 650; cursor: pointer; color: var(--ink-2); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.tiers button:hover { border-color: rgba(14, 42, 31, 0.35); }
.tiers button[aria-pressed="true"] { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.calc__price { position: relative; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: #fff; }
.calc__price b { font-family: var(--font-display); font-size: clamp(3rem, 2.2rem + 2.6vw, 4.4rem); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; color: #fff; }
.calc__price > span { font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.calc__row { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 14.5px; }
.calc__row b { color: #fff; font-weight: 700; white-space: nowrap; }
.calc__row s { color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.calc__ticks { position: relative; margin-top: 6px; }
.calc__right .btn { position: relative; margin-top: auto; }
@media (max-width: 960px) { .calc { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan h3 { font-size: 1.5rem; letter-spacing: -0.04em; }
.plan__price { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 15px; letter-spacing: 0; word-spacing: 0.12em; }
.plan__price b { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.05em; }
.plan__desc { font-size: 15px; }
.plan .ticks { font-size: 14.5px; }
.plan .btn { margin-top: auto; }
.plan--featured { border: 2px solid var(--green-600); box-shadow: var(--shadow-lg); }
.plan--dark { background: var(--green-900); border-color: var(--green-900); color: rgba(255, 255, 255, 0.78); }
.plan--dark h3, .plan--dark .plan__price { color: #fff; }
@media (max-width: 1060px) { .plans { grid-template-columns: 1fr; } }

.ptable { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.ptable-wrap { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); overflow-x: auto; box-shadow: var(--shadow-sm); }
.ptable th, .ptable td { padding: 14px 18px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ptable th:first-child, .ptable td:first-child { text-align: left; }
.ptable thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; background: var(--surface-2); }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable .us { color: var(--green-700); font-weight: 750; }
.ptable s { color: var(--muted); }
.ptable .save { color: var(--green-600); font-weight: 700; }
.ptable tr.is-current td { background: var(--lime-100); }

.selfhost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.timeline { list-style: none; display: grid; gap: 0; position: relative; }
.timeline li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 26px; }
.timeline li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line-2); }
.timeline li:last-child::before { display: none; }
.timeline .tl-n { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--green-900); color: var(--lime); font-family: var(--font-display); font-weight: 800; }
.timeline h3 { font-size: 1.1rem; letter-spacing: -0.02em; margin: 2px 0 6px; }
.timeline p { font-size: 14.5px; }
@media (max-width: 960px) { .selfhost { grid-template-columns: 1fr; } }

.included { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.included .fi { background: var(--surface); }
@media (max-width: 1060px) { .included { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .included { grid-template-columns: 1fr; } }

.faq { display: grid; gap: 10px; max-width: 900px; }
.faq details { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: box-shadow 0.25s, border-color 0.25s; }
.faq details[open] { box-shadow: var(--shadow-sm); border-color: var(--line-2); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 18px; height: 18px; flex: none; transition: transform 0.25s var(--ease); color: var(--green-600); }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq .faq__a { padding: 0 22px 22px; font-size: 15px; color: var(--ink-2); max-width: 60em; }
.faq .faq__a p + p { margin-top: 10px; }

/* ==========================================================================
   Pagina Contacte
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 18px; align-items: start; }
.form-card { position: relative; padding: clamp(24px, 3.2vw, 44px); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.form-card h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -0.04em; }
.form-card__intro p { margin-top: 8px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; margin-top: 26px; }
.form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 7px; align-content: start; }
.label { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.label .req { color: var(--danger); margin-left: 2px; }
.input, .select, .textarea { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); font: inherit; font-size: 15px; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.textarea { height: auto; min-height: 140px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334453c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(14, 42, 31, 0.3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--green-600); background: #fff; box-shadow: 0 0 0 4px rgba(34, 112, 74, 0.14); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(194, 65, 45, 0.1); }
.field__error { font-size: 13px; color: var(--danger); font-weight: 560; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.chips legend { font-size: 13.5px; font-weight: 650; color: var(--ink); margin-bottom: 9px; padding: 0; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-check span { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.chip-check span .i { width: 16px; height: 16px; display: none; }
.chip-check input:checked + span { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.chip-check input:checked + span .i { display: block; color: var(--lime); }
.chip-check input:focus-visible + span { outline: 2.5px solid var(--green-600); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green-600); flex: none; cursor: pointer; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.form__foot .muted { font-size: 13px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { grid-column: 1 / -1; padding: 14px 16px; border-radius: 14px; background: #fdecea; color: #8a2a1b; font-size: 14.5px; font-weight: 560; }
.form-done { display: grid; gap: 14px; justify-items: start; padding: 10px 0; outline: none; }
.form-done__icon { width: 60px; height: 60px; border-radius: 18px; background: var(--lime); color: var(--green-900); display: grid; place-items: center; }
.form-done__icon .i { width: 28px; height: 28px; stroke-width: 2.4; }
.form-done h3 { font-size: 1.6rem; letter-spacing: -0.04em; }
.form-card.is-sent .form, .form-card.is-sent .form-card__intro { display: none; }
@media (max-width: 1060px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .form { grid-template-columns: 1fr; } }

.info-stack { display: grid; gap: 14px; }
.info-card { padding: 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.info-card--dark { background: var(--green-900); border-color: var(--green-900); color: rgba(255, 255, 255, 0.75); }
.info-card--dark h3 { color: #fff; }
.info-card h3 { font-size: 1.15rem; letter-spacing: -0.025em; margin-bottom: 14px; }
.info-list { list-style: none; display: grid; gap: 14px; }
.info-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: center; }
.info-list .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--lime-100); color: var(--green-700); box-shadow: inset 0 0 0 1px rgba(143, 180, 10, 0.3); }
.info-card--dark .info-list .ic { background: rgba(255, 255, 255, 0.08); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.info-list .ic .i { width: 20px; height: 20px; }
.info-list small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.info-card--dark .info-list small { color: rgba(255, 255, 255, 0.5); }
.info-list a, .info-list b { font-weight: 650; color: var(--ink); font-size: 15.5px; }
.info-card--dark .info-list a, .info-card--dark .info-list b { color: #fff; }
.info-list a:hover { color: var(--green-600); }
.req-list { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; font-size: 14px; margin: 0; }
.req-k { color: var(--muted); }
.req-v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.copy-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; cursor: pointer; color: var(--muted); transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.copy-btn .i { width: 15px; height: 15px; }
.copy-btn:hover { color: var(--ink); border-color: var(--line-2); }
.copy-btn.is-copied { background: var(--lime); border-color: var(--lime); color: var(--green-900); }
.req-more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.req-more summary { cursor: pointer; font-weight: 650; font-size: 14px; color: var(--green-700); list-style: none; display: flex; align-items: center; gap: 8px; }
.req-more summary::-webkit-details-marker { display: none; }
.req-more summary .i { width: 16px; height: 16px; transition: transform 0.2s; }
.req-more[open] summary .i { transform: rotate(180deg); }
.req-more .req-list { margin-top: 14px; }
.req-sub { grid-column: 1 / -1; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--green-600); margin-top: 8px; }
.map-card { position: relative; display: block; height: 190px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #e9eee5; }
.map-card > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-card__pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -100%); display: grid; justify-items: center; }
.map-card__pin span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--green-900); box-shadow: var(--shadow); }
.map-card__pin span .i { transform: rotate(45deg); color: var(--lime); width: 20px; height: 20px; }
.map-card__label { position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); font-size: 13.5px; font-weight: 650; color: var(--ink); }
.map-card__label .i { width: 16px; height: 16px; color: var(--green-600); }

/* ==========================================================================
   Pagina Demo
   ========================================================================== */
.demo-note { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.demo-note__icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--lime); color: var(--green-900); }
.demo-note b { display: block; font-family: var(--font-display); font-size: 15.5px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 3px; }
.demo-note span:not(.demo-note__icon) { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.role-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.role-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform 0.35s var(--ease), box-shadow 0.35s; }
.role-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.role-card__icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--green-900); color: var(--lime); }
.role-card__icon .i { width: 24px; height: 24px; }
.role-card__kicker { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-600); }
.role-card h3 { font-size: 1.35rem; letter-spacing: -0.035em; }
.role-card .ticks { font-size: 14.5px; margin-bottom: 8px; }
.role-card .btn { margin-top: auto; }
.role-card--lime { background: var(--lime-100); border-color: rgba(143, 180, 10, 0.4); }
.role-card--lime .role-card__icon { background: var(--lime); color: var(--green-900); }
.demo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.demo-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.demo-facts div { padding: 18px 18px 16px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.demo-facts b { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.05em; color: var(--ink); line-height: 1; margin-bottom: 6px; }
.demo-facts span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 1060px) { .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .demo-split { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .role-grid { grid-template-columns: 1fr; } }

/* pagina 404 */
.notfound { min-height: calc(100svh - var(--header-h) - 200px); display: grid; place-items: center; text-align: center; padding: 80px 0; }
.notfound b { display: block; font-family: var(--font-display); font-size: clamp(6rem, 18vw, 12rem); font-weight: 800; letter-spacing: -0.07em; line-height: 0.9; color: var(--green-900); }
.notfound b span { color: var(--lime-600); }

/* ---------- Animații la derulare ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; transform: none; }
  /* cardurile motorului: fără coborâre și rotire, doar apar și dispar lin */
  .engine-card.is-shown, .engine-card.is-told .engine-card__text { animation: card-fade-in 0.45s ease both !important; }
  .engine-card.is-leaving { animation: card-fade-out 0.4s ease both !important; }
  .engine-card .engine-card__body::after { display: none; }
  /* bannerul demo: lumina ecranului și plutirea personajului rulează și aici (cerute explicit de Dumitru, mișcare mică și lentă) */
  .cta__person { animation-duration: 6s !important; animation-iteration-count: infinite !important; }
  .cta__screen-light::before, .cta__screen-light::after, .cta__screen-glow { animation-duration: 7s !important; animation-iteration-count: infinite !important; }
  /* bannerul cu oameni se rotește mereu, indiferent de setarea din sistem (cerut explicit): regula de mai sus îi
     scurtează tranzițiile și animațiile, aici le dăm înapoi duratele și întârzierile */
  .cta__member { transition-duration: 1.6s !important; }
  .cta__member.is-passing, .cta__member.is-arriving { transition-duration: 0.8s !important; }
  .cta__tag { transition-duration: 1.6s, 1.6s, 0.5s !important; }
  .cta__tag.is-passing, .cta__tag.is-arriving { transition-duration: 0.8s, 0.8s, 0.3s !important; }
  .cta__tag .cta__pill { transition-duration: 0.5s !important; animation-duration: 5.8s !important; animation-iteration-count: infinite !important; }
  .cta__tag[data-slot="C"] .cta__pill { transition-delay: 0.6s !important; }
  .cta__team.is-entering .cta__member { animation-duration: 1.1s !important; }
  .cta__team.is-entering .cta__tag { animation-duration: 0.6s !important; }
  .cta__team[data-team="intro"] .cta__member img { animation-duration: 7s !important; animation-iteration-count: infinite !important; }
}
@keyframes card-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-fade-out { from { opacity: 1; } to { opacity: 0; } }