/* ==========================================================================
   EMIKO v2 - sistem de design
   Tema unica: light. Fundal futurist obtinut din structura (grila fina,
   spalari de gradient la opacitate mica, hairlines), nu din stralucire.
   Paleta derivata din culorile de brand EMIKO: #043a9e #2858a1 #198fd9 #a01dbf
   ========================================================================== */

@font-face {
  font-family: 'Aquire';
  src: url('fonts/aquire-bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* suprafete */
  --bg: #ffffff;
  --bg-1: #f7f9fd;
  --bg-2: #eef3fb;
  --surface: #ffffff;

  /* linii */
  --ln: #e3e9f3;
  --ln-soft: #eff3f9;
  --ln-hi: #c7d2e5;

  /* text */
  --tx: #0a1024;
  --tx-2: #2f3a54;
  --tx-3: #5a6480;

  /* brand */
  --brand: #1657d0;
  --brand-2: #0f3fa8;
  --volt: #6b3fd4;
  --grad-2: #9333c7;
  --cyan: #0d86c4;
  --ok: #10794b;
  --warn: #a86212;

  /* spalari de fundal, foarte discrete */
  --wash-1: rgba(22, 87, 208, .10);
  --wash-2: rgba(147, 51, 199, .085);
  --wash-3: rgba(13, 134, 196, .07);

  --shadow-s: 0 1px 2px rgba(12, 24, 56, .04);
  --shadow: 0 18px 44px -28px rgba(12, 24, 56, .28);
  --shadow-l: 0 30px 70px -40px rgba(12, 24, 56, .35);

  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --sec: clamp(4rem, 7vw, 7rem);
  --shell: 76rem;
  --shot-tint: .18;

  --f-l: 'Aquire', 'Space Grotesk', system-ui, sans-serif;
  --f-d: 'Space Grotesk', system-ui, sans-serif;
  --f-b: 'Inter', system-ui, -apple-system, sans-serif;
  --f-m: ui-monospace, 'SF Mono', Menlo, monospace;

  color-scheme: light;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f-b);
  font-size: 1rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--f-d);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.021em;
  margin: 0 0 .6em;
  color: var(--tx);
}
h1 { font-size: clamp(2.2rem, 4.8vw, 3.7rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.55rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.32rem); }
h4 { font-size: 1rem; }
p  { margin: 0 0 1.1em; color: var(--tx-2); }
strong { color: var(--tx); font-weight: 600; }

/* --- Fundal futurist ------------------------------------------------------
   Trei straturi suprapuse, toate sub continut si toate discrete:
   grila fina mascata radial, spalari de gradient, si o linie de orizont. */
.bgfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.bgfx__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(22, 87, 208, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 87, 208, .055) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 0%, #000 22%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 0%, #000 22%, transparent 76%);
}

.bgfx__wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(74px);
}
.bgfx__wash--a { width: 40rem; height: 30rem; background: var(--wash-1); top: -10rem; left: -10rem; }
.bgfx__wash--b { width: 34rem; height: 28rem; background: var(--wash-2); top: -6rem; right: -12rem; }
.bgfx__wash--c { width: 30rem; height: 20rem; background: var(--wash-3); bottom: -12rem; left: 30%; }

@media (prefers-reduced-motion: no-preference) {
  .bgfx__wash--a { animation: drift 30s ease-in-out infinite alternate; }
  .bgfx__wash--b { animation: drift 38s ease-in-out infinite alternate-reverse; }
}
@keyframes drift {
  0%   { transform: translate3d(-1.5%, 0, 0) scale(1); }
  100% { transform: translate3d(3%, 2.5%, 0) scale(1.07); }
}

/* linie de orizont in degrade, sub hero */
.bgfx__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--brand) 34%, var(--grad-2) 62%, transparent 96%);
  opacity: .34;
}

/* --- Layout ---------------------------------------------------------------- */
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.sec { padding-block: var(--sec); position: relative; }
.sec--alt { background: var(--bg-1); border-block: 1px solid var(--ln-soft); }
.sec--tight { padding-block: clamp(2.6rem, 4.5vw, 3.8rem); }
.center { text-align: center; }
.mx { margin-inline: auto; }
.lead { font-size: clamp(1.02rem, 1.4vw, 1.16rem); font-weight: 450; color: var(--tx-2); max-width: 46rem; }
.rel { position: relative; z-index: 1; }

/* Grile deterministe: numarul de coloane nu depinde de latimea cardului, ca sa
   nu apara randuri incomplete (6 carduri ieseau 4+2). */
.grid { display: grid; gap: 1.5rem; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 64rem) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
}

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* --- Accente tipografice ---------------------------------------------------- */
.grad {
  background: linear-gradient(96deg, var(--brand) 0%, var(--volt) 52%, var(--grad-2) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-m);
  font-size: .73rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--brand); font-weight: 500;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 1.7rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--grad-2));
}

/* --- Butoane ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; letter-spacing: -.008em;
  background: linear-gradient(118deg, var(--brand) 0%, var(--volt) 58%, var(--grad-2) 100%);
  color: #fff;
  box-shadow: 0 10px 26px -14px rgba(22, 87, 208, .75);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(107, 63, 212, .8); filter: saturate(1.08); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.btn--line {
  background: var(--surface); color: var(--tx);
  border-color: var(--ln-hi); box-shadow: var(--shadow-s);
}
.btn--line:hover { border-color: var(--brand); color: var(--brand); box-shadow: var(--shadow-s); }

.btn--sm { padding: .55rem 1.05rem; font-size: .87rem; }

/* --- Carduri ---------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--ln);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.4vw, 1.95rem);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--ln-hi); box-shadow: var(--shadow); }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: .45rem; }
.card p { font-size: .95rem; margin-bottom: 0; }

.card--line::after {
  content: "";
  position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--volt) 52%, var(--grad-2) 100%);
  opacity: .85;
}

.card--fill { background: linear-gradient(168deg, var(--bg-1), var(--surface)); }

.card__ico {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 10px;
  margin-bottom: 1rem;
  background: linear-gradient(140deg, rgba(22, 87, 208, .10), rgba(147, 51, 199, .09));
  border: 1px solid var(--ln);
  color: var(--brand);
}
.card__ico svg { width: 1.3rem; height: 1.3rem; }

/* --- Navigatie -------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ln-soft);
}
.nav__in { display: flex; align-items: center; gap: 1.4rem; height: 4.6rem; }
.nav__logo {
  font-family: var(--f-l);
  font-weight: 700;
  font-size: 2.5rem; /* 40px; bara are 4.6rem, deci incape si pe ecrane mici */
  line-height: 1;
  letter-spacing: .02em;
  background: linear-gradient(96deg, var(--brand), var(--volt) 60%, var(--grad-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.nav__links { display: flex; gap: .15rem; margin-left: auto; font-size: .93rem; align-items: center; }
.nav__item { position: relative; }
.nav__top {
  display: inline-flex; align-items: center; gap: .34rem;
  padding: .5rem .68rem; border-radius: 9px;
  color: var(--tx-2); font-weight: 500;
  transition: color .18s, background .18s;
}
.nav__top:hover { color: var(--tx); background: var(--bg-1); }
.nav__top.is-active { color: var(--brand); background: var(--bg-2); }
.nav__chev {
  width: .6rem; height: .6rem; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .55; transition: transform .18s ease;
}
.nav__item:hover .nav__chev,
.nav__item:focus-within .nav__chev { transform: rotate(180deg); }

/* puntea peste spatiul dintre buton si panou, altfel meniul cade cand treci mouse-ul */
.nav__item:has(.nav__menu)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .6rem;
}
.nav__menu {
  position: absolute; top: calc(100% + .6rem); left: 0;
  min-width: 21rem; padding: .45rem;
  background: var(--surface);
  border: 1px solid var(--ln);
  border-radius: 15px;
  box-shadow: var(--shadow-l);
  display: grid; gap: .05rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a { display: block; padding: .5rem .62rem; border-radius: 10px; transition: background .16s; }
.nav__menu a:hover { background: var(--bg-1); }
.nav__menu a[aria-current="page"] { background: var(--bg-2); }
.nav__menu strong { display: block; font-size: .89rem; font-weight: 600; color: var(--tx); }
.nav__menu a[aria-current="page"] strong { color: var(--brand); }
.nav__menu span { display: block; font-size: .77rem; line-height: 1.42; color: var(--tx-3); margin-top: .08rem; }
/* Grupul cu multe intrari merge pe doua coloane si se centreaza sub buton, ca
   sa nu depaseasca marginea din dreapta pe ecrane mai mici. */
.nav__menu--wide {
  min-width: 40rem;
  grid-template-columns: 1fr 1fr;
  left: 50%; transform: translate(-50%, -6px);
}
.nav__item:hover .nav__menu--wide,
.nav__item:focus-within .nav__menu--wide { transform: translate(-50%, 0); }
@media (max-width: 60rem) {
  .nav__menu--wide { min-width: 0; grid-template-columns: 1fr; left: 0; transform: none; }
  .nav__item:hover .nav__menu--wide,
  .nav__item:focus-within .nav__menu--wide { transform: none; }
}
.nav__act { display: flex; align-items: center; gap: .6rem; }
/* --- Navigatie pe ecrane mici -------------------------------------------------
   Sub 60rem meniul orizontal nu incape, asa ca devine un panou care coboara de
   sub bara. Submeniurile raman desfasurate, fara acordeon: la patru grupuri
   scurte, un nivel in plus de apasat costa mai mult decat economiseste. */
.nav__burger {
  display: none;
  margin-left: .45rem;
  width: 2.65rem; height: 2.65rem;
  align-items: center; justify-content: center;
  border: 1px solid var(--ln); border-radius: 10px;
  background: var(--surface); color: var(--tx);
}
.nav__burger svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav__burger .ico-x { display: none; }
.nav.is-open .nav__burger .ico-x { display: block; }
.nav.is-open .nav__burger .ico-bars { display: none; }

@media (max-width: 60rem) {
  .nav__in { position: relative; }
  .nav__burger { display: inline-flex; }
  .nav__act { margin-left: auto; }
  .nav__act .btn { padding: .6rem 1rem; font-size: .84rem; }
  .nav__links {
    display: none;
    /* containerul are 1.25rem margine de fiecare parte, deci panoul iese cu tot
       atat, ca sa ajunga la marginile ecranului */
    position: absolute; left: -1.25rem; right: -1.25rem; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: .5rem 1.25rem 1.3rem;
    background: var(--surface);
    border-bottom: 1px solid var(--ln);
    box-shadow: var(--shadow);
    max-height: calc(100dvh - 4.6rem); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open .nav__links { display: flex; }
  /* Grupurile se deschid pe rand, ca un acordeon. Lista desfasurata avea peste
     douazeci de randuri de cand zona partenerilor are douasprezece pagini. */
  .nav__item + .nav__item { border-top: 1px solid var(--ln-soft); }
  .nav__top {
    display: flex; justify-content: space-between; width: 100%;
    padding: .95rem .2rem; font-size: 1.04rem; border-radius: 8px;
  }
  .nav__top.is-active { background: transparent; color: var(--brand); }
  .nav__chev { display: block; width: .74rem; height: .74rem; opacity: .5; }
  .nav__item.is-open .nav__chev { transform: rotate(180deg); }
  .nav__item:hover .nav__chev { transform: none; }
  .nav__item:has(.nav__menu)::after { display: none; }
  .nav__menu {
    position: static; min-width: 0;
    visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none;
    overflow: hidden;
    max-height: 0; opacity: 0; padding: 0 0 0 .2rem;
    transition: max-height .3s ease, opacity .22s ease, padding .3s ease;
  }
  .nav__item.is-open > .nav__menu { max-height: 40rem; opacity: 1; padding: .1rem 0 .85rem .2rem; }
  /* pe mobil deschiderea o face apasarea, nu trecerea cu degetul */
  .nav__item:hover > .nav__menu,
  .nav__item:focus-within > .nav__menu { max-height: 0; opacity: 0; }
  .nav__item.is-open:hover > .nav__menu,
  .nav__item.is-open:focus-within > .nav__menu { max-height: 40rem; opacity: 1; }
  .nav__menu a { padding: .52rem .55rem; }
  .nav__menu span { display: none; }
}

/* copia indemnului, la baza panoului, acolo unde bara nu il mai poate arata */
.nav__cta-m { display: none; }
@media (max-width: 30rem) {
  .nav__cta-m { display: block; margin-top: 1.15rem; }
  .nav__cta-m .btn { width: 100%; justify-content: center; padding: .78rem 1rem; font-size: .95rem; }
}
@media (max-width: 30rem) {
  /* Indemnul din bara nu mai incape. Fara el butonul de meniu ramanea lipit de
     logo, in stanga, pentru ca marginea automata era pe indemn. */
  .nav__act { display: none; }
  .nav__burger { margin-left: auto; }
}

/* --- Hero -------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(3.4rem, 7vw, 6rem) clamp(3.4rem, 6vw, 5.4rem); overflow: hidden; border-bottom: 1px solid var(--ln-soft); }
.hero__in { position: relative; z-index: 1; max-width: 54rem; }
.hero h1 { margin-bottom: .55em; }
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.24rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* --- Panou de deschidere ------------------------------------------------------
   Blocul colorat, cu colturi mari, care poarta propozitia principala a paginii.
   Textura si stralucirea de jos sunt decorative si stau sub continut. */
.panel {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  text-align: center;
  /* O singura culoare, cu adancime foarte discreta. Degradeul diagonal spre mov
     lasa mijlocul spalacit si coltul de jos prea saturat. Violetul brandului
     ramane in butoane, in logo si in titlurile cu degrade. */
  background: linear-gradient(178deg, #0d3286 0%, #123fa4 58%, #1649b6 100%);
  padding: clamp(3rem, 5.5vw, 4.6rem) clamp(1.4rem, 5vw, 4rem) clamp(2.6rem, 5vw, 4rem);
}
.panel__tex {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .17) 1px, transparent 1px);
  background-size: 7px 7px;
}
.panel__glow {
  position: absolute; left: 50%; bottom: -30%;
  width: 104%; aspect-ratio: 3.4 / 1; transform: translateX(-50%);
  pointer-events: none;
  /* Lumina trebuie sa fie din aceeasi familie de culoare cu fundalul. In crem
     peste albastru arata ca o pata, nu ca o sursa de lumina. */
  background: radial-gradient(ellipse at center, #ffffff 0%, rgba(196, 218, 255, .85) 22%, rgba(120, 165, 255, .45) 44%, rgba(120, 165, 255, 0) 70%);
}
.panel__in { position: relative; z-index: 1; }
.panel h1 {
  color: #fff; margin: 0 auto clamp(.85rem, 1.5vw, 1.15rem);
  max-width: 24ch;
  font-size: clamp(2.15rem, 5.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
}
/* Numai paragrafele direct in panou. Scrisa ca `.panel p`, regula prindea si
   legenda diagramei din card si o facea alba pe alb. */
.panel__in > p {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
  line-height: 1.5;
  max-width: 70ch; margin: 0 auto;
}
/* Pilula vine dupa regula de paragraf si cu specificitate mai mare. Scrisa
   inaintea ei, `.panel p` ii stergea marginea de jos si ii schimba corpul,
   asa ca statea lipita de titlu si la marimea textului de sub el. */
.panel .panel__pill {
  display: inline-flex; align-items: center; gap: .55rem;
  width: auto; max-width: none;
  padding: .44rem 1.05rem;
  margin: 0 auto clamp(1.8rem, 3.5vw, 2.6rem);
  border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px;
  font-size: .82rem; line-height: 1.5; color: rgba(255, 255, 255, .95);
}
.panel__pill a { text-decoration: underline; text-underline-offset: 3px; }
/* Desenul din panou. Diagramele sunt facute pentru fundal deschis, deci sta
   intr-un card alb peste albastru, nu direct pe el. */
.panel__vis { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 65rem; }
.panel__vis .dia { padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.6rem) clamp(.9rem, 1.6vw, 1.2rem); }
.panel__vis .dia {
  background: var(--surface);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.6rem) clamp(.9rem, 1.6vw, 1.2rem);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 42px 84px -44px rgba(5, 12, 36, .85);
}
.panel__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: clamp(1.5rem, 2.8vw, 2.1rem); }
.panel .btn { background: #fff; color: var(--brand-2); box-shadow: 0 14px 32px -16px rgba(9, 16, 40, .8); }
.panel .btn:hover { filter: none; }
.panel .btn--line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); box-shadow: none; }
.panel .btn--line:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .8); }

/* --- Panoul pe ecrane inguste -------------------------------------------------
   Etichetele diagramei sunt in unitati de desen, deci se micsoreaza odata cu
   ea. Sub 44rem o lasam la o latime minima si o facem derulabila, in loc sa o
   strivim pana devine decorativa. */
@media (max-width: 44rem) {
  .panel { padding-left: clamp(1rem, 4vw, 1.6rem); padding-right: clamp(1rem, 4vw, 1.6rem); }
}
@media (max-width: 30rem) {
  .panel .panel__pill { font-size: .74rem; padding: .36rem .8rem; }
  .panel__cta .btn { width: 100%; }
}
/* --- Sectiune cu diagrama alaturi de text ------------------------------------
   Tiparul standard: titlu scurt, o descriere de doua randuri, si desenul langa
   ele. .split--flip muta desenul in stanga, ca sectiunile sa alterneze. */
.split--mid { align-items: center; }
@media (min-width: 52rem) {
  .split--flip > :first-child { order: 2; }
}

/* --- Banda de puncte scurte de sub o diagrama mare ---------------------------- */
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  border-top: 1px solid var(--ln);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
/* Fara titlu deasupra, banda nu mai are de ce sa se distanteze. */
.shell > .rail:first-child { margin-top: 0; }
.rail > * { padding: 1.7rem 1.7rem 0; border-left: 1px solid var(--ln); }
.rail > :first-child { border-left: 0; padding-left: 0; }
.rail h3 { font-size: 1.02rem; margin-bottom: .38rem; }
.rail p { font-size: .92rem; margin: 0; }
.rail__ico { width: 1.55rem; height: 1.55rem; color: var(--brand); margin-bottom: .8rem; }
.rail__ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 48rem) {
  .rail > * { border-left: 0; padding-left: 0; }
}

/* --- Pasi cu pictograma -------------------------------------------------------
   Pentru ghidul clientului: ce faci la pasul unu, ce faci la pasul doi. */
.flow { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.flow__item {
  position: relative;
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  border: 1px solid var(--ln); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-s);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.flow__item:hover { transform: translateY(-3px); border-color: var(--ln-hi); box-shadow: var(--shadow); }
.flow__n { font-family: var(--f-m); font-size: .7rem; letter-spacing: .12em; color: var(--tx-3); }
.flow__ico {
  width: 2.7rem; height: 2.7rem; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--bg-2); color: var(--brand);
  margin: .85rem 0 1rem;
}
.flow__ico svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flow__item h3 { font-size: 1.02rem; margin-bottom: .38rem; }
.flow__item p { font-size: .92rem; margin: 0; }
/* --- Harta de ansamblu --------------------------------------------------------
   Dupa aplicatia reala: culoarea marcajului este starea, nu tipul. Tipul vine
   din pictograma si este repetat in lista alaturata, deci identitatea nu depinde
   niciodata numai de culoare. Cele trei stari sunt rezervate si nu se folosesc
   pentru altceva in acest desen. */
.k-paper { fill: #eef1f6; }
.k-sea   { fill: #cddef1; }
.k-road  { fill: none; stroke: #c6d2e0; stroke-width: 15; stroke-linecap: round; }
.k-built rect { fill: #e2e7ee; }
.k-link  { fill: none; stroke: #9fb0c6; stroke-width: 1.2; stroke-dasharray: 2 4; }

.k-pin   { stroke: #fff; stroke-width: 1.6; }
.k-ok    { fill: #10794b; }
.k-warn  { fill: #a86212; }
.k-bad   { fill: #b3261e; }
.k-gly   { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.k-lead  { fill: none; stroke: #7d8ea6; stroke-width: 1.2; }
.k-call  { fill: var(--surface); stroke: var(--ln-hi); stroke-width: 1.2; }

.k-btn   { fill: var(--surface); stroke: var(--ln-hi); stroke-width: 1.4; }
.k-btng  { fill: none; stroke: var(--tx-2); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.k-badge { fill: var(--brand); }
.k-badget{ font-family: var(--f-m); font-size: 9px; fill: #fff; letter-spacing: .04em; }
.k-pop   { fill: var(--surface); stroke: var(--ln); stroke-width: 1.2; }
.k-slot  { fill: var(--bg-2); }
.k-fgly  { fill: none; stroke: var(--tx-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.k-status circle { stroke: none; }

.keys { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.keys li { display: flex; align-items: flex-start; gap: .75rem; }
.keys .k-key {
  flex: 0 0 auto; width: 1.85rem; height: 1.85rem; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--bg-2);
}
.keys .k-key svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.keys strong { display: block; font-size: .95rem; font-weight: 600; color: var(--tx); }
.keys span { display: block; font-size: .87rem; color: var(--tx-2); line-height: 1.45; }
/* --- Lista de control ---------------------------------------------------------
   Comutatorul are si pozitie, nu doar culoare: butonul se muta la dreapta cand
   este pornit, ca starea sa se vada si fara culoare. */
.c-ico  { fill: var(--bg-2); }
.c-gly  { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.c-tog  { fill: var(--ln-hi); }
.c-tog.c-on { fill: var(--brand); }
.c-knob { fill: #fff; }
/* --- Cereri de acces si pasii Fast Access ---- */
.o-ini   { font-family: var(--f-m); font-size: 11px; fill: var(--brand); letter-spacing: .04em; }
.o-btn   { fill: var(--brand); }
.o-btnt  { font-family: var(--f-b); font-size: 12.5px; font-weight: 600; fill: #fff; }
.o-tick  { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f-num   { fill: var(--bg-2); }
.f-numt  { font-family: var(--f-d); font-size: 12px; font-weight: 600; fill: var(--brand); }
/* --- Acordarea unei permisiuni ---- */
.g-box   { fill: var(--surface); stroke: var(--ln-hi); stroke-width: 1.4; }
.g-box.g-on { fill: var(--brand); stroke: var(--brand); }
.g-tick  { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.g-pill  { fill: var(--bg-2); stroke: var(--ln); stroke-width: 1; }
.g-pillt { font-family: var(--f-b); font-size: 12px; font-weight: 500; fill: var(--tx-2); }
/* --- Vitrina de echipamente ---------------------------------------------------
   Numai nume, grupate. Descrierile stau pe paginile dedicate, nu aici. */
.range { display: grid; gap: 0; }
.range__g {
  display: grid; grid-template-columns: minmax(0, 11rem) 1fr;
  gap: 1rem 1.8rem; align-items: start;
  padding: 1.25rem 0;
  border-top: 1px solid var(--ln);
}
.range__g:last-child { border-bottom: 1px solid var(--ln); }
.range__t {
  margin: 0; padding-top: .42rem;
  font-family: var(--f-m); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-3);
}
.range__c { display: flex; flex-wrap: wrap; gap: .5rem; }
.range__c span {
  display: inline-flex; align-items: center;
  padding: .42rem .85rem;
  border: 1px solid var(--ln); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-s);
  font-size: .89rem; color: var(--tx);
}
@media (max-width: 46rem) {
  .range__g { grid-template-columns: 1fr; gap: .65rem; }
  .range__t { padding-top: 0; }
}
/* --- Retrofit: acelasi pedestal, inainte si dupa ---- */
.r-body { fill: var(--surface); stroke: var(--ln-hi); stroke-width: 1.6; }
.r-body.r-live { stroke: var(--brand); stroke-width: 2; }
.r-hood { fill: var(--bg-2); stroke: var(--ln-hi); stroke-width: 1.4; }
.r-sock { fill: var(--bg-1); stroke: var(--ln-hi); stroke-width: 1.4; }
.r-door { stroke: var(--ln); stroke-width: 1.3; }
.r-qr   { fill: var(--surface); stroke: var(--tx); stroke-width: 1.4; }
.r-qrm  { fill: var(--tx); }
.r-plus { stroke: var(--ln-hi); stroke-width: 2.2; stroke-linecap: round; }
.r-open { fill: var(--bg-2); stroke: var(--brand); stroke-width: 1.4; stroke-dasharray: 4 3; }
.r-chip { fill: var(--surface); stroke: var(--brand); stroke-width: 1.4; }
.r-legs { stroke: var(--brand); stroke-width: 1.3; stroke-linecap: round; }
.r-wave { fill: none; stroke: var(--brand); stroke-width: 1.4; stroke-linecap: round; }
/* --- Instrumente: roza, cadran, bare -------------------------------------------
   Marcaje subtiri, axa si grila retrase, o singura serie pe grafic deci fara
   legenda, si o singura eticheta directa, pe valoarea de varf. */
.w-ring   { fill: none; stroke: var(--ln); stroke-width: 1.2; }
.w-tick   { stroke: var(--ln-hi); stroke-width: 1.4; }
.w-wedge  { fill: var(--brand); opacity: .17; }
.w-needle { stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; }
.w-hub    { fill: var(--brand); }

.g-track  { fill: none; stroke: var(--ln); stroke-width: 7; stroke-linecap: round; }
.g-val    { fill: none; stroke: var(--brand); stroke-width: 7; stroke-linecap: round; }
.g-thr    { stroke: var(--warn); stroke-width: 2.2; stroke-linecap: round; }

.v-axis   { stroke: var(--ln-hi); stroke-width: 1.2; }
.v-grid   { stroke: var(--ln); stroke-width: 1; }
.v-bar    { fill: var(--brand); opacity: .62; }
.v-bar.v-peak { opacity: 1; }
.v-lbl    { font-family: var(--f-b); font-size: 12px; font-weight: 600; fill: var(--tx); }
/* --- Indicele de capabilitati de pe pagina de parteneri ---- */
.hub { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.hub__c {
  display: block; padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid var(--ln); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow-s);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.hub__c:hover { transform: translateY(-3px); border-color: var(--ln-hi); box-shadow: var(--shadow); }
.hub__i {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; margin-bottom: .7rem;
  border-radius: 8px; background: var(--bg-2); color: var(--brand);
}
.hub__i svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hub__c strong { display: block; font-size: .96rem; font-weight: 600; color: var(--tx); margin-bottom: .25rem; }
.hub__d { display: block; font-size: .86rem; line-height: 1.45; color: var(--tx-2); }
/* --- EasyShare: bara de browser si pagina gazda ---- */
.e-bar  { fill: var(--bg-1); stroke: var(--ln); stroke-width: 1; }
.e-page { fill: var(--bg-1); stroke: var(--ln); stroke-width: 1; }
.e-txt  { stroke: var(--ln-hi); stroke-width: 3; stroke-linecap: round; }
/* --- Scalarea semnalului ---- */
.s-axis { stroke: var(--ln-hi); stroke-width: 1.6; }
.s-tick { stroke: var(--ln-hi); stroke-width: 1.3; }
.s-map  { stroke: var(--ln); stroke-width: 1; stroke-dasharray: 3 4; }
.s-hyst { fill: var(--warn); opacity: .13; }
.s-set  { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 5 4; }

/* --- Statistici -------------------------------------------------------------- */
.stat { text-align: center; padding: 1.15rem .5rem; }
.stat__n { font-family: var(--f-d); font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.stat__l { font-size: .87rem; color: var(--tx-3); margin: .45rem 0 0; }

/* --- Pasi --------------------------------------------------------------------- */
.step { display: flex; gap: 1.05rem; align-items: flex-start; }
.step__n {
  flex: 0 0 auto; width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--f-d); font-weight: 700; font-size: .92rem;
  background: linear-gradient(140deg, var(--brand), var(--volt));
  color: #fff;
}
.step h3 { margin-bottom: .28rem; }
.step p { font-size: .95rem; margin-bottom: 0; }

/* --- Liste --------------------------------------------------------------------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .62rem; }
.ticks li { position: relative; padding-left: 1.65rem; color: var(--tx-2); font-size: .95rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .58rem; height: .58rem; border-radius: 3px;
  background: linear-gradient(135deg, var(--brand), var(--grad-2));
}

/* --- Tabel ---------------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--ln); border-radius: var(--r-lg); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 34rem; }
.tbl th, .tbl td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--ln-soft); }
.tbl th { font-family: var(--f-m); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); font-weight: 500; background: var(--bg-1); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td { color: var(--tx-2); }
.tbl td strong { color: var(--tx); }

/* --- Banda CTA ------------------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden;
  border: 1px solid var(--ln);
  border-radius: var(--r-xl);
  padding: clamp(2.2rem, 5vw, 3.4rem);
  text-align: center;
  background: linear-gradient(150deg, var(--bg-1), var(--surface));
  box-shadow: var(--shadow-s);
}
.cta > * { position: relative; z-index: 1; }
.cta::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent 6%, var(--brand) 34%, var(--grad-2) 66%, transparent 94%);
}

/* --- Embed ----------------------------------------------------------------------- */
.embed {
  border: 1px solid var(--ln);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.embed__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--ln-soft);
  background: var(--bg-1);
  font-family: var(--f-m); font-size: .76rem; letter-spacing: .06em; color: var(--tx-3);
}
.embed__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.embed iframe { width: 100%; height: clamp(26rem, 56vh, 40rem); border: 0; display: block; }

/* --- Subsol ---------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--ln); padding-block: 3.2rem 2.4rem; background: var(--bg-1); }
.foot__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.foot h4 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); margin-bottom: .9rem; font-family: var(--f-m); font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot a { color: var(--tx-2); font-size: .92rem; transition: color .18s; }
.foot a:hover { color: var(--brand); }
.foot__base { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--ln); display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; color: var(--tx-3); font-size: .85rem; }

/* --- Aparitie la scroll ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
  .rv.in { opacity: 1; transform: none; }
}

/* --- Utilitare ---------------------------------------------------------------------- */
.mb0 { margin-bottom: 0; }
.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
.mt3 { margin-top: 3rem; }
.small { font-size: .88rem; color: var(--tx-3); }
.skip { position: absolute; left: -9999px; background: var(--brand); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r) 0; z-index: 100; }
.skip:focus { left: 0; top: 0; }

/* eticheta de audienta */
.aud {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-m); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: 999px;
  border: 1px solid var(--ln-hi); color: var(--tx-3); background: var(--surface);
}
.aud--pa { color: var(--brand); border-color: rgba(22, 87, 208, .35); background: rgba(22, 87, 208, .05); }
.aud--cu { color: var(--grad-2); border-color: rgba(147, 51, 199, .32); background: rgba(147, 51, 199, .05); }

/* ==========================================================================
   Diagrame si media
   ========================================================================== */

.dia {
  position: relative;
  width: 100%;
  border: 1px solid #cddaf2;
  border-radius: var(--r-lg);
  /* Desenul este alcatuit din casute albe. Pe un card aproape alb nu se vedea
     nimic, asa ca fundalul primeste tenta de brand si doua spalari in colturi. */
  background:
    radial-gradient(115% 95% at 10% 0%, rgba(22, 87, 208, .16) 0%, rgba(22, 87, 208, 0) 60%),
    radial-gradient(105% 115% at 97% 100%, rgba(147, 51, 199, .13) 0%, rgba(147, 51, 199, 0) 58%),
    linear-gradient(168deg, #e7effc 0%, #f1f5fe 58%, #f5f1fd 100%);
  padding: clamp(1.1rem, 2.8vw, 2.1rem);
  box-shadow: 0 22px 50px -32px rgba(12, 24, 56, .45);
  overflow: hidden;
}
.dia svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Doua desene in acelasi card: cel lat pe ecrane mari, cel stivuit pe cele
   inguste. Se schimba intre ele mai jos, la 44rem. */
.dia svg.dia__tall { display: none; }
@media (max-width: 44rem) {
  .dia svg.dia__wide { display: none; }
  .dia svg.dia__tall { display: block; }
}
.dia__cap { font-size: .84rem; color: var(--tx-3); margin: 1.1rem 0 0; text-align: center; }

/* elemente comune de diagrama */
.d-box { fill: var(--surface); stroke: #bccce7; stroke-width: 1.4; }
.d-box--hi { fill: var(--surface); stroke: var(--brand); stroke-width: 1.8; }
.d-core { fill: url(#gcore); stroke: none; }
.d-core--m { fill: url(#gcorem); stroke: none; }
.d-core--mb { fill: url(#gcoremb); stroke: none; }
.d-core--c { fill: url(#gcust); stroke: none; }
.d-core--cm { fill: url(#gcustm); stroke: none; }
.d-line { stroke: #a7bade; stroke-width: 1.6; fill: none; }
.d-lbl { font-family: var(--f-b); font-size: 13px; fill: var(--tx); font-weight: 500; }
.d-sub { font-family: var(--f-m); font-size: 10.5px; fill: var(--tx-3); letter-spacing: .06em; }
.d-ico { stroke: var(--brand); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.d-white { fill: #fff; }

/* impuls care circula pe traseu (miscarea vine din animateMotion in SVG) */
.d-pulse { fill: var(--brand); }
@media (prefers-reduced-motion: no-preference) {
  .d-dash { stroke-dasharray: 5 7; animation: march 1.4s linear infinite; }
  @keyframes march { to { stroke-dashoffset: -12; } }
}
@media (prefers-reduced-motion: reduce) { .d-pulse { display: none; } }

/* ---- Media / fotografii ---- */
.shot {
  position: relative;
  border: 1px solid var(--ln);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.shot--tall img { aspect-ratio: 4 / 5; }
.shot__tag {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
  font-family: var(--f-m); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--tx-2);
  backdrop-filter: blur(6px);
}

/* ---- Gradare unitara peste fotografii ----
   Sursele foto vin de la autori diferiti, cu lumina si saturatie diferite.
   Le aducem la acelasi ton: o corectie usoara pe imagine si o spalare de brand
   peste ea, aplicata in modul "color" ca sa schimbe nuanta fara sa intunece.
   Nu atinge fisierele. Se scoate stergand acest bloc si atributul din .shot img. */
.shot img { filter: saturate(.86) contrast(1.05); }
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(158deg, var(--brand) 0%, var(--volt) 58%, var(--cyan) 100%);
  mix-blend-mode: color;
  opacity: var(--shot-tint);
}
/* banda foto pe latimea sectiunii */
.strip { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* ---- Contor animat ---- */
.count { font-variant-numeric: tabular-nums; }

/* ---- Grafic de prognoza ---- */
.c-grid  { stroke: var(--ln); stroke-width: 1; }
.c-axis  { stroke: var(--ln-hi); stroke-width: 1.2; }
.c-hist  { fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; }
.c-fc    { fill: none; stroke: var(--grad-2); stroke-width: 2.6; stroke-dasharray: 7 6; stroke-linecap: round; }
.c-band  { fill: url(#gband); opacity: .5; }
.c-thr   { stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 6 5; }
.c-now   { stroke: var(--tx-3); stroke-width: 1.3; stroke-dasharray: 3 4; }
.c-hit   { fill: var(--warn); }
.c-txt   { font-family: var(--f-m); font-size: 10.5px; fill: var(--tx-3); letter-spacing: .06em; }
.c-key   { font-family: var(--f-b); font-size: 12.5px; fill: var(--tx-2); }

@media (prefers-reduced-motion: no-preference) {
  .c-draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
  .rv.in .c-draw { animation: draw 1.7s ease-out forwards; }
  .rv.in .c-fc.c-draw { animation-delay: 1.1s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .rv.in .c-hit { animation: ping 2.2s ease-out 2.4s infinite; transform-origin: center; }
  @keyframes ping { 0%,70%,100% { r: 5; opacity: 1; } 35% { r: 8.5; opacity: .55; } }
}

/* ---- Plan de instalatie (Mapper) ----
   Vedere de sus peste un bazin: cheu, pontoane, tablou si trasee de alimentare.
   Starea "scos din functiune" se marcheaza prin linie punctata si contur stins,
   ca sa se citeasca si fara culoare. */
.m-water { fill: var(--wash-1); stroke: var(--ln); stroke-width: 1; }
.m-quay  { fill: var(--surface); stroke: var(--ln-hi); stroke-width: 1.2; }
.m-edge  { stroke: var(--ln-hi); stroke-width: 2.2; }
.m-pont  { fill: var(--bg-1); stroke: var(--ln-hi); stroke-width: 1.2; }
.m-ped   { fill: var(--surface); stroke: var(--brand); stroke-width: 1.5; }
.m-ped--off { stroke: var(--ln-hi); stroke-dasharray: 3 3; }
.m-feed  { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-feed--off { stroke: var(--warn); stroke-dasharray: 7 5; }
.m-stub  { fill: none; stroke: var(--ln-hi); stroke-width: 1.4; }
.m-stub--off { stroke: var(--ln); stroke-dasharray: 3 3; }
.m-live  { fill: var(--ok); }
.m-dead  { fill: none; stroke: var(--tx-3); stroke-width: 1.3; stroke-linecap: round; }
.m-cut   { fill: none; stroke: var(--warn); stroke-width: 2.4; stroke-linecap: round; }
.m-chip     { fill: var(--surface); stroke: var(--ln-hi); stroke-width: 1; }
.m-chip--on { fill: var(--brand); stroke: var(--brand); }
.m-chip-t     { font-family: var(--f-m); font-size: 10px; fill: var(--tx-3); letter-spacing: .08em; }
.m-chip-t--on { fill: #fff; }
.m-call  { fill: var(--surface); stroke: var(--ln-hi); stroke-width: 1.2; }
.m-call-e { stroke: var(--warn); stroke-width: 2.6; stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {
  .rv.in .m-cut { animation: cutpulse 2.6s ease-out .9s infinite; }
  @keyframes cutpulse { 0%, 65%, 100% { opacity: 1; } 30% { opacity: .35; } }
}
/* ---- Mockup de telefon (aplicatia clientului) ----
   Ramele sunt desenate, nu fotografiate, ca sa ramana la fel cand se
   schimba ecranele reale ale aplicatiei. */
.p-frame  { fill: var(--tx); }
.p-screen { fill: var(--surface); }
.p-chrome { fill: #fff; opacity: .32; }
.p-row    { fill: var(--surface); stroke: var(--ln); stroke-width: 1.2; }
.p-row--on{ stroke: var(--brand); stroke-width: 1.7; }
.p-btn    { fill: var(--brand); }
.p-btn--line { fill: var(--surface); stroke: var(--brand); stroke-width: 1.6; }
.p-btn-t  { font-family: var(--f-b); font-size: 13px; font-weight: 600; fill: #fff; }
.p-btn-t--line { fill: var(--brand); }
.p-t      { font-family: var(--f-b); font-size: 13px; font-weight: 500; fill: var(--tx); }
.p-s      { font-family: var(--f-m); font-size: 10px; fill: var(--tx-3); letter-spacing: .07em; }
.p-big    { font-family: var(--f-d); font-size: 30px; font-weight: 600; fill: var(--tx); }
.p-num    { font-family: var(--f-d); font-size: 23px; font-weight: 600; fill: var(--tx); }
.p-ok     { fill: var(--ok); }
.p-rule   { stroke: var(--ln); stroke-width: 1; }
.p-spark  { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.p-arrow  { fill: none; stroke: var(--ln-hi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Miscare
   Tot ce urmeaza este dezactivat automat la prefers-reduced-motion.
   ========================================================================== */

/* --- Bara de progres la scroll --- */
.prog {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80;
  background: transparent; pointer-events: none;
}
.prog__bar {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand), var(--volt) 55%, var(--grad-2));
}

/* --- Nav se strange la scroll --- */
/* Headerul isi pastreaza inaltimea la scroll. Varianta care micsora bara si logoul
   muta continutul sub ea si face navigarea greu de urmarit. */
.nav { transition: box-shadow .3s ease, background .3s ease; }
.nav.is-stuck { box-shadow: 0 6px 24px -18px rgba(12, 24, 56, .5); background: rgba(255, 255, 255, .93); }

@media (prefers-reduced-motion: no-preference) {

  /* --- Intrare in hero, in cascada --- */
  .hero__in > * { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.3,1) forwards; }
  .hero__in > :nth-child(1) { animation-delay: .05s; }
  .hero__in > :nth-child(2) { animation-delay: .14s; }
  .hero__in > :nth-child(3) { animation-delay: .23s; }
  .hero__in > :nth-child(4) { animation-delay: .32s; }
  .hero__in > :nth-child(5) { animation-delay: .41s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* --- Degradeul din titluri respira lent --- */
  .grad {
    background-size: 220% 100%;
    animation: shimmer 9s ease-in-out infinite alternate;
  }
  @keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

  /* --- Linia din eyebrow creste la aparitie --- */
  .eyebrow::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.2,.7,.3,1) .1s; }
  .rv.in .eyebrow::before,
  .in > .eyebrow::before { transform: scaleX(1); }
  .hero__in .eyebrow::before { animation: grow .6s cubic-bezier(.2,.7,.3,1) .25s forwards; }
  @keyframes grow { to { transform: scaleX(1); } }

  /* --- Fotografiile se descopera cu un zoom foarte mic --- */
  .shot img { transform: scale(1.06); transition: transform 1.1s cubic-bezier(.2,.7,.3,1); }
  .rv.in .shot img, .shot.rv.in img { transform: scale(1); }
  .shot { transition: box-shadow .3s ease; }
  .shot:hover img { transform: scale(1.03); }

  /* --- Sageata din butoane aluneca --- */
  .btn .arw { transition: transform .22s ease; }
  .btn:hover .arw { transform: translateX(3px); }

  /* --- Randurile din tabel se aprind la trecere --- */
  .tbl tbody tr { transition: background .2s ease; }
  .tbl tbody tr:hover { background: var(--bg-1); }

  /* --- Cardurile primesc o urma de lumina pe muchie la hover --- */
  .card--line::after { transition: opacity .3s ease; opacity: .85; }
  .card--line:hover::after { opacity: 1; }
}

/* eyebrow fara animatie ramane vizibil */
@media (prefers-reduced-motion: reduce) {
  .eyebrow::before { transform: none; }
  .hero__in > * { opacity: 1; transform: none; }
}

/* --- Meniul aliniat la dreapta ------------------------------------------------
   Ultimul grup din bara ar iesi din ecran cu panoul ancorat la stanga. */
.nav__menu--end { left: auto; right: 0; }
@media (max-width: 60rem) { .nav__menu--end { right: auto; left: 0; } }

/* --- Glife de marca ----------------------------------------------------------
   Play si Apple sunt forme pline. Desenate cu linie, ca restul pictogramelor,
   ies rupte, asa ca primesc umplere si nici un contur. */
.hub__i svg.glyph { fill: currentColor; stroke: none; }
.btn__g { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; fill: currentColor; stroke: none; }
.btn--store { padding-inline: 1.25rem; }

/* --- Pasii dintr-un ghid ------------------------------------------------------
   Lista are nevoie de spatiu pentru subtitluri si enumerari, deci fiecare pas
   este un card intreg, nu o coloana dintr-o grila. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.steps__i {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1.35rem;
  padding: 1.6rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--ln); border-radius: var(--r-lg);
}
.steps__n {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-2); color: var(--brand);
  font-family: var(--f-m); font-size: 1rem; font-weight: 600;
}
.steps__b > :last-child { margin-bottom: 0; }
.steps__b h3 { font-size: 1.14rem; margin-bottom: .55rem; }
.steps__b h4 { font-size: .95rem; margin: 1.35rem 0 .4rem; color: var(--tx); }
.steps__b p { margin-bottom: .8rem; }
.steps__b .ticks { margin: .9rem 0 1rem; }
@media (max-width: 40rem) {
  .steps__i { grid-template-columns: 1fr; gap: .85rem; padding: 1.3rem 1.25rem; }
}

/* enumerare numerotata in interiorul unui pas */
.nums { margin: .9rem 0 1rem; padding: 0 0 0 1.65rem; display: grid; gap: .5rem; }
.nums li { color: var(--tx-2); font-size: .95rem; padding-left: .25rem; }
.nums li::marker { font-family: var(--f-m); font-size: .82rem; color: var(--brand); }

/* --- Formularul de contact ----------------------------------------------------*/
.split--form { align-items: start; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
@media (max-width: 56rem) { .split--form { grid-template-columns: 1fr; } }
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .form__row { grid-template-columns: 1fr; } }
.field label {
  display: block; margin-bottom: .42rem;
  font-family: var(--f-m); font-size: .78rem; letter-spacing: .04em;
  color: var(--tx-2);
}
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .95rem;
  font: inherit; font-size: .95rem; color: var(--tx);
  background: var(--surface);
  border: 1px solid var(--ln-hi); border-radius: 12px;
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--tx-3); opacity: .75; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22, 87, 208, .13);
}
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tx-3) 50%), linear-gradient(135deg, var(--tx-3) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.28rem, calc(100% - .82rem) 1.28rem;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.form__err { color: #a3221f; font-size: .9rem; margin: 0; }
.form__ok {
  padding: 1.9rem 1.75rem;
  background: var(--bg-1); border: 1px solid var(--ln); border-radius: var(--r-lg);
}
.form__ok h3 { font-size: 1.14rem; margin-bottom: .55rem; }

/* --- Antet compact ------------------------------------------------------------
   Cand continutul de imediat sub antet este esenta paginii, antetul se scurteaza
   si sectiunea urmatoare urca, ca amandoua sa incapa in primul ecran. */
.hero--tight { padding-block: clamp(2.4rem, 4.6vw, 3.6rem) clamp(2.2rem, 4vw, 3.2rem); }
.hero--tight h1 { margin-bottom: .4em; }
.hero--tight .hero__cta { margin-top: 1.5rem; }
.sec--pull { padding-top: clamp(2.4rem, 4.4vw, 3.6rem); }

/* Sase pasi pe un rand ies prea ingusti, deci se rup in trei si trei. */
.flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62rem) { .flow--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .flow--3 { grid-template-columns: 1fr; } }

/* --- Spatieri intre elemente vecine -------------------------------------------
   Paragrafele dintr-un card aveau marginea de jos zero, deci doua paragrafe
   alaturate se lipeau. La fel, o lista bifata urmata de o nota. */
.card p + p, .card p + ul, .card ul + p { margin-top: .78rem; }
.ticks + p, .ticks + .btn, ul.ticks + h3 { margin-top: 1.35rem; }

/* Ghidul se citeste pe un rand mai scurt decat latimea containerului. */
.steps { max-width: 54rem; margin-inline: auto; }

/* --- Desenele pe ecrane inguste ----------------------------------------------
   Un desen nu se poate micsora la nesfarsit: sub o anumita latime textul din el
   devine ilizibil. Pe ecrane mici ramane la o marime citibila si se deruleaza pe
   orizontala. Nota de sub el nu se deruleaza, ca sa ramana la locul ei. */
.dia__scroll { width: 100%; }
@media (max-width: 52rem) {
  .dia__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: .5rem;
    /* umbra pe muchia din dreapta, cat timp mai este continut de derulat */
    background:
      linear-gradient(to right, transparent 92%, rgba(12, 24, 56, .07) 100%) right / 2.2rem 100% no-repeat;
  }
  .dia__scroll svg:not(.dia__tall) { min-width: 44rem; }
}

/* Capcana pentru roboti. Nu folosim display:none: unele instrumente de
   completare automata sar peste campurile ascunse asa, iar noi vrem sa fie
   completat doar de ce nu se uita la pagina. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }