:root {
  color-scheme: dark;
  --bg: #0B1124;
  --bg-2: #0E1530;
  --surface: #141C34;
  --surface-2: #18213C;
  --line: #1E2645;
  --line-hi: #2A3563;
  --ink: #E7EAF4;
  --ink-2: #AAB2CE;
  --ink-3: #7E87A6;
  --accent: #2B4ACB;
  --accent-hi: #4E77F0;
  --accent-soft: #6E90F6;
  --ok: #3FBF8F;
  --serif: Georgia, "Times New Roman", serif;
  --radius: 16px;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 640px at 78% -10%, rgba(78,119,240,.17), transparent 62%),
    radial-gradient(900px 520px at 8% 42%, rgba(43,74,203,.10), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

/* ---------- nav ---------- */
header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11,17,36,.78);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
header.stuck { border-bottom-color: var(--line); }
nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand svg { display: block; border-radius: 12px; box-shadow: 0 6px 22px -8px rgba(43,74,203,.7); }
.brand-name { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.brand-name span { color: var(--accent-soft); }
.navlinks { display: flex; align-items: center; gap: 26px; }
.navlinks a { color: var(--ink-2); text-decoration: none; font-size: 14px; transition: color .15s ease; }
.navlinks a:hover { color: var(--ink); }
.navend { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; border: 1px solid var(--line-hi); border-radius: 9px; overflow: hidden; }
.lang a {
  padding: 7px 11px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-3); text-decoration: none; transition: color .15s ease, background .15s ease;
}
.lang a:hover { color: var(--ink); background: rgba(78,119,240,.10); }
.lang a[aria-current="true"] { color: var(--ink); background: rgba(78,119,240,.16); }
.cta {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: linear-gradient(140deg, var(--accent-hi), var(--accent));
  color: #fff; font-weight: 600; border-radius: 11px; padding: 12px 19px; font-size: 14.5px;
  box-shadow: 0 10px 30px -12px rgba(43,74,203,.85);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -12px rgba(43,74,203,.95); }
.cta.lg { padding: 16px 24px; font-size: 15.5px; border-radius: 12px; }
.cta.ghost {
  background: transparent; border: 1px solid var(--line-hi); color: var(--ink);
  box-shadow: none; font-weight: 500;
}
.cta.ghost:hover { border-color: var(--accent-soft); background: rgba(78,119,240,.08); }

/* ---------- hero ---------- */
.hero { position: relative; padding: 108px 0 66px; overflow: hidden; }
.sky { position: absolute; inset: 0; pointer-events: none; opacity: .34; }
.hero-in { position: relative; max-width: 860px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-soft); font-weight: 600; margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 6.4vw, 74px);
  letter-spacing: -.03em; line-height: 1.0; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--accent-soft); }
p.lead { color: var(--ink-2); font-size: 18.5px; line-height: 1.62; max-width: 660px; margin: 26px 0 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.note { color: var(--ink-3); font-size: 13px; margin-top: 18px; }

.stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-top: 58px; position: relative;
}
.stat { background: var(--bg-2); padding: 20px 18px; }
.stat b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -.02em; }
.stat span { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 4px; letter-spacing: .01em; }

/* ---------- sections ---------- */
section.band { padding: 84px 0; scroll-margin-top: 74px; }
section.band.alt { background: linear-gradient(180deg, transparent, rgba(20,28,52,.55) 12%, rgba(20,28,52,.55) 88%, transparent); }
.sec-head { max-width: 720px; margin-bottom: 40px; }
.kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-soft); font-weight: 600; }
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.02em; line-height: 1.12; margin-top: 12px; text-wrap: balance; }
.sec-head p { color: var(--ink-2); font-size: 16.5px; margin-top: 14px; }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

/* ---------- faculties ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius);
  padding: 24px; position: relative; overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-hi), var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.card:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.card:hover::before { transform: scaleX(1); }
.ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--line-hi); background: var(--surface-2); color: var(--accent-soft); margin-bottom: 16px;
}
.card p { color: var(--ink-2); font-size: 14.2px; line-height: 1.6; margin-top: 8px; }
.card .meta { display: block; margin-top: 14px; color: var(--ink-3); font-size: 12.5px; letter-spacing: .02em; }

/* ---------- flow ---------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: step; }
.step { position: relative; padding-top: 26px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line-hi); color: var(--accent-soft);
}
.step::after {
  content: ""; position: absolute; top: 12px; left: 32px; right: -14px; height: 1px;
  background: linear-gradient(90deg, var(--line-hi), transparent);
}
.step:last-child::after { display: none; }
.step b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.step span { color: var(--ink-2); font-size: 13.6px; line-height: 1.55; }

/* ---------- features ---------- */
.feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feat .card { padding: 26px 26px 24px; }
.fhead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fhead .ico { margin: 0; width: 36px; height: 36px; border-radius: 10px; }
.fhead h3 { font-size: 17px; }
ul.list { list-style: none; padding: 0; display: grid; gap: 9px; }
ul.list li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 14.2px; line-height: 1.55; }
ul.list li::before {
  content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 2px;
  background: var(--accent-hi); opacity: .8;
}
ul.list li b { color: var(--ink); font-weight: 600; }

/* ---------- compliance ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; }
.proof {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.proof-bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid var(--line);
  color: var(--ink-3); font-size: 12px;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-hi); }
.dot.on { background: var(--ok); }
.proof-body { padding: 14px 12px; display: grid; gap: 7px; font-size: 12.8px; }
.proof-body div { display: flex; justify-content: space-between; gap: 14px; color: var(--ink-2); }
.proof-body div b { color: var(--ok); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip {
  border: 1px solid var(--line-hi); background: var(--surface-2); color: var(--ink-2);
  border-radius: 999px; padding: 6px 13px; font-size: 12.8px;
}

/* ---------- reports ---------- */
.rep { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rep .card { padding: 22px; }
.rep h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.rep h3 i { font-style: normal; color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.rep ul { list-style: none; padding: 0; display: grid; gap: 7px; }
.rep li { color: var(--ink-2); font-size: 13.4px; line-height: 1.5; }

/* ---------- roadmap ---------- */
.road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.road .card { border-style: dashed; background: rgba(20,28,52,.45); }
.road .card::before { display: none; }
.badge {
  display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-soft); border: 1px solid var(--line-hi);
  border-radius: 6px; padding: 3px 8px; margin-bottom: 12px;
}

/* ---------- final ---------- */
.final {
  border: 1px solid var(--line); border-radius: 20px; padding: 54px 44px; text-align: center;
  background:
    radial-gradient(680px 260px at 50% 0%, rgba(78,119,240,.20), transparent 70%),
    var(--surface);
}
.final h2 { margin: 0 auto; max-width: 640px; }
.final p { color: var(--ink-2); max-width: 560px; margin: 16px auto 28px; font-size: 16.5px; }
footer { border-top: 1px solid var(--line); margin-top: 80px; padding: 28px 0 44px; }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink-3); font-size: 13px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ---------- reveal ---------- */
.no-js .reveal { opacity: 1; }
html:not(.no-js) .reveal { opacity: 0; transform: translateY(14px); }
html:not(.no-js) .reveal.in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  html:not(.no-js) .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .rep { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 780px) {
  .navlinks { display: none; }
  .grid3, .feat, .road { grid-template-columns: 1fr; }
  .hero { padding-top: 66px; }
  section.band { padding: 62px 0; }
  .final { padding: 40px 24px; }
}
.lbl-short { display: none; }
@media (max-width: 520px) {
  .rep, .flow, .stats { grid-template-columns: 1fr; }
  .wrap { width: calc(100% - 32px); }
  nav .cta { padding: 10px 13px; font-size: 13.5px; }
  nav .lbl-full { display: none; }
  nav .lbl-short { display: inline; }
  .navend { gap: 9px; }
  .lang a { padding: 6px 9px; font-size: 11.5px; }
  .brand-name { font-size: 17px; }
  .brand svg { width: 32px; height: 32px; }
  .hero-cta .cta { width: 100%; justify-content: center; }
}

/* ---------- cele două aplicații, față în față ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.app { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 28px; overflow: hidden; }
.app::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent-hi), var(--accent)); }
.app.io::before { background: linear-gradient(90deg, #3FBF8F, #2E9B72); }
.app-name { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.app-name span { color: var(--accent-soft); }
.app.io .app-name span { color: #4FD3A2; }
.app-role { display: block; margin-top: 6px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.app p.what { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 16px 0 18px; }
.app ul { list-style: none; padding: 0; display: grid; gap: 7px; }
.app li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: 13.8px; line-height: 1.5; }
.app li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 2px; background: var(--accent-hi); opacity: .85; }
.app.io li::before { background: #3FBF8F; }

/* ---------- legătura dintre aplicații ---------- */
.bridge { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.bridge div { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); padding: 18px; }
.bridge b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.bridge span { color: var(--ink-2); font-size: 13.4px; line-height: 1.5; }

/* ---------- prețuri ---------- */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.price { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 18px; }
.price.hi { border-color: var(--line-hi); background: linear-gradient(180deg, rgba(78,119,240,.10), var(--surface)); }
.price b { display: block; font-size: 14px; font-weight: 600; }
.price .eur { display: block; font-family: var(--serif); font-size: 27px; font-weight: 500; margin: 8px 0 2px; letter-spacing: -.02em; }
.price .per { color: var(--ink-3); font-size: 12px; }
.price small { display: block; margin-top: 8px; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.note-price { margin-top: 18px; color: var(--ink-3); font-size: 13.5px; line-height: 1.6; }

/* rândul de sus are 3 coloane, dar tot prin CSS — un stil inline ar bate media query-urile
   și ar sparge pagina pe telefon */
.price-grid.trei { grid-template-columns: repeat(3, 1fr); }
/* Spațiul de sub grilă nu mai atârnă de numărul de coloane: cu 4 pachete în loc de 3,
   `.trei` a dispărut din HTML și odată cu ea marginea — textul de add-on-uri s-a lipit. */
.price-grid { margin-bottom: 26px; }
@media (max-width: 1000px) { .bridge, .price-grid, .price-grid.trei { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) { .duo { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bridge, .price-grid, .price-grid.trei { grid-template-columns: 1fr; } }

/* ---------- formular de ofertă ----------
   Trăiește pe landing-ul STATIC, deci fără framework: etichete, câmpuri și bife
   stilate direct. Bifele sunt „chips" — cu 16 module, o coloană de checkbox-uri ar fi
   fost un ecran întreg de derulat pe telefon. */
/* `div.lead`, NU `.lead`: paragraful din hero poartă aceeași clasă (`p.lead`), iar o regulă
   fără element îi punea chenar și fundal de card — textul introductiv apărea închis într-o
   cutie, pe ambele limbi. Caseta e a FORMULARULUI, deci se scrie pe elementul lui. */
div.lead { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 28px; margin-top: 26px; }
.lead-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* NU flex pe etichetă: cu flex-direction:column, textul și asteriscul „*" devin două
   elemente separate și asteriscul cade pe rândul următor. Bloc + input pe linie proprie. */
.lead label.f { display: block; font-size: 12.5px; color: var(--ink-3); letter-spacing: .01em; }
.lead label.f > :is(input, select, textarea) { display: block; margin-top: 6px; }
.lead label.f.wide { grid-column: 1 / -1; }
.lead .req { color: var(--accent-soft); }
.lead input[type="text"], .lead input[type="email"], .lead input[type="tel"], .lead select, .lead textarea {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-hi); border-radius: 10px;
  padding: 11px 13px; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.lead textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.lead select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.lead select option { background: var(--bg-2); color: var(--ink); }
.lead :is(input, select, textarea):focus { border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(78,119,240,.16); }
.lead :is(input, select, textarea):user-invalid { border-color: #E0645C; }
.lead fieldset { border: 0; padding: 0; margin: 22px 0 0; }
.lead legend { padding: 0; font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }
.mods { display: flex; flex-wrap: wrap; gap: 8px; }
.mods label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line-hi); background: var(--surface-2); color: var(--ink-2);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mods label:hover { border-color: var(--accent-soft); color: var(--ink); }
.mods input { accent-color: var(--accent-hi); width: 14px; height: 14px; margin: 0; cursor: pointer; }
.mods input:checked + span { color: var(--ink); font-weight: 600; }
.mods label:has(input:checked) { border-color: var(--accent-soft); background: rgba(78,119,240,.12); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.consent input { accent-color: var(--accent-hi); width: 15px; height: 15px; margin-top: 2px; flex: none; cursor: pointer; }
.lead-send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.lead-send button { font: inherit; border: 0; cursor: pointer; }
.lead-send button[disabled] { opacity: .6; cursor: progress; }
.lead-msg { font-size: 13.5px; }
.lead-msg.err { color: #E0645C; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-done { text-align: center; padding: 30px 10px; }
.lead-done b { display: block; font-family: var(--serif); font-size: 25px; font-weight: 500; margin-bottom: 10px; }
.lead-done span { color: var(--ink-2); font-size: 15px; }
@media (max-width: 640px) { .lead { padding: 22px 18px; } .lead-grid { grid-template-columns: 1fr; } }

/* ---------- machetă de aplicație (meniu + taburi) ----------
   Reproduce ce vede omul în aplicație: railul de domenii în stânga, bara de taburi a
   domeniului deschis deasupra paginii. Nu e o poză — deci nu se învechește la următorul
   ecran refăcut, și se citește la fel pe telefon. */
.shell {
  display: grid; grid-template-columns: 210px 1fr;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.shell-rail { border-right: 1px solid var(--line); background: var(--bg-2); padding: 14px 0; }
.shell-rail b {
  display: block; padding: 0 16px 10px; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}
.shell-rail a {
  display: block; padding: 7px 16px; font-size: 13.5px; color: var(--ink-2);
  text-decoration: none; border-left: 2px solid transparent;
}
.shell-rail a.on { color: var(--ink); font-weight: 600; border-left-color: var(--accent-hi); background: rgba(78,119,240,.10); }
.shell-body { min-width: 0; }
/* Taburile se ÎNFĂȘOARĂ, nu se derulează: pe 16 pagini, o bară cu derulare ascunde
   jumătate din ele — inclusiv pe cea activă, care se taie fix la margine și pare defect. */
.shell-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.shell-tabs span {
  white-space: nowrap; font-size: 13px; color: var(--ink-2);
  padding: 6px 12px; border-radius: 8px; border: 1px solid transparent;
}
.shell-tabs span.on { color: var(--ink); font-weight: 600; background: var(--surface-2); border-color: var(--line-hi); }
.shell-page { padding: 16px 18px 18px; }
.shell-page p { color: var(--ink-3); font-size: 13px; margin: 0; }
/* Celelalte domenii, cu taburile lor — umple pagina cu ce ar vedea omul dacă ar da clic,
   în loc s-o lase goală sub bara de taburi. */
.shell-more { display: grid; gap: 7px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.shell-more div { display: flex; gap: 10px; align-items: baseline; font-size: 12.7px; line-height: 1.5; }
.shell-more b { flex: none; min-width: 104px; color: var(--ink-2); font-weight: 600; }
.shell-more span { color: var(--ink-3); }
@media (max-width: 560px) { .shell-more div { display: block; } .shell-more b { display: block; margin-bottom: 2px; } }
.shell-page .kbd {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--ink-2); border: 1px solid var(--line-hi);
  background: var(--bg-2); border-radius: 6px; padding: 2px 7px; margin: 0 2px;
}
@media (max-width: 780px) {
  .shell { grid-template-columns: 1fr; }
  .shell-rail { border-right: 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2px; padding: 12px; }
  .shell-rail b { width: 100%; padding: 0 0 8px; }
  .shell-rail a { border-left: 0; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; }
  .shell-rail a.on { border-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUSINESS OPERATIONS OS — componentele care arată sistemul ca UNUL SINGUR.
   Regula de compoziție: nimic din ce urmează nu desenează un modul izolat.
   Straturile (.os) se sprijină unul pe altul, circuitele (.circuit) se termină
   cu firele către celelalte (.wires), iar lanțul (.chain) arată drumul complet
   al unui document — nu ecranul pe care se dă clic.
   ═════════════════════════════════════════════════════════════════════════ */

/* ---------- afirmația din hero ---------- */
.claim {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(20px, 2.3vw, 26px); line-height: 1.25; color: var(--ink);
  margin-top: 16px;
}
.claim span { color: var(--accent-soft); }

/* ---------- tripticul: controlează / automatizează / dezvoltă ---------- */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tri > div {
  position: relative; overflow: hidden; padding: 28px 26px 26px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: border-color .2s ease, transform .2s ease;
}
.tri > div::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-hi), var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.tri > div:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.tri > div:hover::before { transform: scaleX(1); }
.tri h3 { font-family: var(--serif); font-weight: 500; font-size: 25px; letter-spacing: -.02em; }
.tri p { color: var(--ink-2); font-size: 14.4px; line-height: 1.62; margin-top: 12px; }
.tri .k { display: block; margin-top: 16px; color: var(--ink-3); font-size: 12.6px; letter-spacing: .02em; }

/* ---------- stiva sistemului ---------- */
.os { display: grid; gap: 12px; }
.os-row {
  position: relative; display: grid; grid-template-columns: 168px 1fr; gap: 22px; align-items: start;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 20px 22px 20px 26px;
}
.os-row::after {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent-hi); opacity: .55;
}
.os-row.k-ai::after { background: var(--accent-soft); opacity: .9; }
.os-row.k-core::after { background: var(--ok); opacity: .85; }
.os-row:not(:last-child)::before {
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 1px; height: 12px;
  background: var(--line-hi); z-index: 1;
}
.os-tag { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-soft); font-weight: 700; padding-top: 3px; }
.os-row.k-core .os-tag { color: #4FD3A2; }
.os-body b { display: block; font-size: 15.5px; letter-spacing: -.01em; }
.os-body p { color: var(--ink-2); font-size: 14.1px; line-height: 1.6; margin-top: 6px; }
.os-mods { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.os-mod { border: 1px solid var(--line-hi); background: var(--surface-2); color: var(--ink-2); border-radius: 8px; padding: 5px 11px; font-size: 12.6px; }
.os-mod.hi { color: var(--ink); border-color: var(--accent-soft); background: rgba(78,119,240,.12); }

/* ---------- circuitele ---------- */
.circuits { display: grid; gap: 16px; }
.circuit {
  position: relative; overflow: hidden; padding: 28px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: border-color .2s ease;
}
.circuit::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-hi), transparent 70%);
}
.circuit:hover { border-color: var(--line-hi); }
.circuit.teren::before { background: linear-gradient(90deg, #3FBF8F, transparent 70%); }
/* eDocs — al treilea accent. Fondul documentar NU e nici comercial (albastru), nici teren
   (verde): e modulul care traversează totul, deci merită să se recunoască dintr-o privire. */
.circuit.docs::before { background: linear-gradient(90deg, #E2A65A, transparent 70%); }
/* Ancora din meniu cade pe un <article>, nu pe secțiune — fără asta, antetul lipit acoperă
   titlul circuitului. */
.circuit { scroll-margin-top: 88px; }
.c-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.c-num { flex: none; min-width: 40px; font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1; color: var(--accent-soft); opacity: .8; padding-top: 2px; }
.circuit.teren .c-num { color: #4FD3A2; }
.circuit.docs .c-num { color: #E2A65A; }
.c-head h3 { font-size: 19px; }
.c-head p { color: var(--ink-2); font-size: 14.6px; line-height: 1.55; margin-top: 6px; }

/* Lanțul documentului: pastile legate cu săgeți, nu o listă de ecrane. */
.chain { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: 0 0 20px; }
.chain li {
  position: relative; border: 1px solid var(--line-hi); background: var(--surface-2);
  border-radius: 9px; padding: 7px 13px; font-size: 13.2px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.chain li:not(:last-child)::after {
  content: "→"; position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
  color: var(--accent-soft); font-size: 13px; font-weight: 400; opacity: .85;
}
.circuit.teren .chain li:not(:last-child)::after { color: #4FD3A2; }
.circuit.docs .chain li:not(:last-child)::after { color: #E2A65A; }
.c-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 34px; }
.c-grid ul.list { gap: 9px; }

/* Firele către restul sistemului — partea care demonstrează că modulul nu e o insulă. */
.wires { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line-hi); color: var(--ink-2); font-size: 13.6px; line-height: 1.65; }
.wires b { color: var(--accent-soft); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; margin-right: 6px; }
.circuit.teren .wires b { color: #4FD3A2; }
.circuit.docs .wires b { color: #E2A65A; }
.wires em { font-style: normal; color: var(--ink); }

@media (max-width: 980px) {
  .tri { grid-template-columns: 1fr; }
  .c-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .os-row { grid-template-columns: 1fr; gap: 10px; }
  .os-row:not(:last-child)::before { left: 26px; }
  .circuit { padding: 24px 20px; }
  .c-head { gap: 12px; }
}