/* ==========================================================================
   SFERIC — Design System Web
   Derivat din SFERIC_Master_Agency_Package_Final_2026
   Tokens:     24_DESIGN_TOKENS/tokens.json · 04_COLOR_SYSTEM
   Tipografie: 05_TYPOGRAPHY (Sora display / Inter UI)
   Motion:     19_MOTION (600-900ms, easing calm, fara bounce)
   A11y:       21_ACCESSIBILITY (WCAG AA, focus vizibil, culoarea nu e singurul indicator)
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Brand core */
  --navy: #03193D;
  --coral: #F63C39;
  --deep: #08152E;
  --cloud: #F5F7FA;
  --slate: #687386;
  --teal: #00AFA2;
  --blue: #2D6AE3;
  --amber: #F4A900;
  --violet: #7A5AF8;   /* accent Sferic Display */

  /* Shade-uri derivate — necesare pentru contrast AA pe suprafete interactive */
  --coral-600: #E22D2A;   /* fill buton · alb pe coral-600 = 4.5:1 */
  --coral-700: #C9241F;   /* hover / active */
  --navy-800: #0B2350;
  --navy-700: #143164;
  --line: #E2E7EF;
  --line-dark: rgba(255, 255, 255, .12);
  --ink-dim: #A8B4C8;     /* text secundar pe navy · 8.6:1 */

  /* Spatiere — baza 8px */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px;

  /* Radius */
  /* O singura raza pe tot site-ul. Pastila de 999px era inventata de mine,
     nu exista in 24_DESIGN_TOKENS; restul scarii ramane pentru uz punctual. */
  --r: 8px;
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 40px);

  /* Tipografie */
  --font-display: "Sora", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.5rem, 1.55rem + 3.8vw, 4rem);
  --fs-h1:      clamp(2rem, 1.45rem + 2.2vw, 3rem);
  --fs-h2:      clamp(1.625rem, 1.28rem + 1.4vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1.12rem + 0.5vw, 1.625rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --fs-body:    1rem;
  --fs-ui:      0.9375rem;
  --fs-caption: 0.75rem;

  /* Motion — calm, precis, fara bounce */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 320ms;
  --dur-slow: 720ms;

  /* Elevatie */
  /* Fara elevatie difuza: ierarhia se face din linii si din tonul suprafetei.
     Singura umbra ramasa e pentru skip-link, care chiar pluteste peste continut. */
  --shadow-pop: 0 2px 6px rgba(3, 25, 61, .10), 0 10px 28px rgba(3, 25, 61, .16);

  /* Lumina structurala pentru suprafetele inchise: grila fina de hairline,
     estompata spre margini, in loc de gradientii radiali difuzi. */
  --grid-line: rgba(255, 255, 255, .035);
  --grid-step: 72px;
}

/* ---------------------------------------------------------------- 2. 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; } }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--navy);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: #FFFFFF; }

::selection { background: var(--coral); color: #fff; }

.skip-link {
  position: absolute; left: var(--s-3); top: -120px; z-index: 200;
  background: #fff; color: var(--navy); font-weight: 600;
  padding: var(--s-2) var(--s-4); border-radius: var(--r);
  box-shadow: var(--shadow-pop); transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-3); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ 3. Tipografie */
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.03em; }
.h1 { font-size: var(--fs-h1); line-height: 1.14; }
.h2 { font-size: var(--fs-h2); line-height: 1.2; }
.h3 { font-size: var(--fs-h3); line-height: 1.28; font-weight: 500; letter-spacing: -0.01em; }

.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--slate); text-wrap: pretty; }
.muted { color: var(--slate); }
.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--slate); }

/* Marcaj de sectiune in registru editorial: linie de cadru peste eticheta,
   cu un segment coral incastrat in ea. Fara majuscule, fara tracking larg si
   fara liniuta care pluteste separat de text. */
.eyebrow {
  display: block; position: relative;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: .01em; text-transform: none;
  color: var(--navy);
}
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 48px; height: 1px; background: var(--coral);
}
.eyebrow--violet::before { background: var(--violet); }

.on-dark .eyebrow { border-top-color: var(--line-dark); color: #FFFFFF; }

.accent { color: var(--coral); }

/* Suprafete intunecate */
.on-dark { color: #FFFFFF; }
.on-dark .display, .on-dark .h1, .on-dark .h2, .on-dark .h3 { color: #FFFFFF; }
.on-dark .lead, .on-dark .muted, .on-dark .caption { color: var(--ink-dim); }

/* ----------------------------------------------------------- 4. Layout base */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }

.section { padding-block: clamp(56px, 8vw, 112px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--cloud { background: var(--cloud); }
.section--navy { background: var(--navy); }
.section--deep { background: var(--deep); }

.section-head { max-width: 720px; display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }

.stack { display: grid; align-content: start; }
.stack-2 { gap: var(--s-2); } .stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); } .stack-5 { gap: var(--s-5); } .stack-6 { gap: var(--s-6); }

.grid { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.05fr .95fr; }
  .split--wide-right { grid-template-columns: .95fr 1.05fr; }
  .split--flip > :first-child { order: 2; }
}

.rule { height: 1px; background: var(--line); border: 0; }
.on-dark .rule { background: var(--line-dark); }

/* -------------------------------------------------------------- 5. Butoane */
.btn {
  --btn-bg: var(--coral-600);
  --btn-fg: #FFFFFF;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 14px var(--s-4); min-height: 48px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--r);
  font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 600;
  letter-spacing: .01em; cursor: pointer; text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--coral-700); }
.btn:active { transform: translateY(1px); }
.btn__icon { flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--line); }
.btn--ghost:hover { background: var(--cloud); border-color: var(--navy); }

.btn--ghost-light { --btn-bg: transparent; --btn-fg: #FFFFFF; --btn-bd: rgba(255,255,255,.4); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: #FFFFFF; }

.btn--navy { --btn-bg: var(--navy); }
.btn--navy:hover { background: var(--navy-800); }

.btn--light { --btn-bg: #FFFFFF; --btn-fg: var(--navy); }
.btn--light:hover { background: var(--cloud); }

.btn--sm { min-height: 42px; padding: 10px var(--s-3); font-size: var(--fs-caption); }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--fs-ui); color: var(--navy);
  padding-bottom: 2px;
  box-shadow: inset 0 -1.5px 0 var(--coral);
  transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--coral-700); box-shadow: inset 0 -1.5px 0 var(--coral-700); }
.link-arrow:hover svg { transform: translateX(3px); }
.on-dark .link-arrow { color: #FFFFFF; }
.on-dark .link-arrow:hover { color: var(--coral); box-shadow: inset 0 -1.5px 0 var(--coral); }

/* ---------------------------------------------------------------- 6. Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--deep);
  border-bottom: 1px solid var(--line-dark);
}
.site-header__inner { display: flex; align-items: center; gap: var(--s-4); min-height: 76px; }
.brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.brand img { height: 30px; width: auto; }

.nav { display: none; }
@media (min-width: 1060px) { .nav { display: flex; align-items: center; gap: var(--s-5); } }
.nav a {
  font-size: var(--fs-ui); font-weight: 500; color: var(--ink-dim);
  padding: var(--s-2) 0; position: relative;
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--coral); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover { color: #FFFFFF; }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #FFFFFF; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { display: none; }
@media (min-width: 1060px) { .header-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3);
  background: transparent; color: #FFFFFF;
  border: 1.5px solid rgba(255,255,255,.28); border-radius: var(--r);
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
@media (min-width: 1060px) { .nav-toggle { display: none; } }
.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars span {
  height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  background: var(--deep); border-bottom: 1px solid var(--line-dark);
  padding-block: var(--s-2) var(--s-5);
}
@media (min-width: 1060px) { .mobile-nav { display: none !important; } }
.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) 0; color: #FFFFFF; font-size: 1.0625rem; font-weight: 500;
  border-bottom: 1px solid var(--line-dark);
}
.mobile-nav a[aria-current="page"] { color: var(--coral); }
.mobile-nav .btn { margin-top: var(--s-4); }

/* Animațiile de flux: capturi din mockup-uri, rulate în buclă. Cine are „reduced motion”
   pornit primește primul cadru, ca imagine statică — un GIF nu poate fi oprit din CSS. */
.flux { margin: var(--s-7) auto 0; max-width: 1000px; }
/* un strat transparent peste animație: clicul dreapta lovește stratul, nu imaginea,
   deci „Salvează imaginea” nu apare nici când JavaScript e oprit */
.flux picture { position: relative; display: block; }
.flux picture::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.flux img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: #0B101A; box-shadow: 0 24px 60px rgba(3, 25, 61, .18);
}
.flux figcaption { margin-top: var(--s-3); display: grid; gap: 2px; }
.flux figcaption b { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; }
.flux figcaption span { font-size: var(--fs-ui); color: var(--slate); max-width: 74ch; }

/* Pagina Demo: câte un flux pe rând, textul și animația alternând stânga-dreapta */
.demo-list { display: grid; gap: var(--s-8); margin-top: var(--s-7); }
.demo-item { display: grid; gap: var(--s-5); align-items: center; scroll-margin-top: 96px; }
@media (min-width: 980px) {
  .demo-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); gap: var(--s-7); }
  .demo-item--flip { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
  .demo-item--flip .demo-item__text { order: 2; }
}
.demo-item__text { display: grid; gap: var(--s-3); justify-items: start; }
.demo-item__lockup { height: 30px; width: auto; }
.demo-item__text p { color: var(--slate); max-width: 46ch; }
.demo-item__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: 0; padding: 0; font-size: var(--fs-ui); color: var(--slate); }
.demo-item__meta li { display: inline-flex; align-items: center; gap: var(--s-2); }
.demo-item__meta li:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mod); }
.demo-item .flux { margin: 0; max-width: none; }

/* ------------------------------------------------------------------ 7. Hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--deep);
  padding-block: clamp(56px, 8vw, 104px);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 46%),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--grid-step)),
    repeating-linear-gradient(0deg,  var(--grid-line) 0 1px, transparent 1px var(--grid-step));
  -webkit-mask-image: radial-gradient(125% 105% at 50% 0%, #000 32%, transparent 80%);
          mask-image: radial-gradient(125% 105% at 50% 0%, #000 32%, transparent 80%);
  pointer-events: none;
}
.hero__orbits {
  position: absolute; top: 50%; left: 50%; width: min(1500px, 160%);
  transform: translate(-50%, -50%); opacity: .55; pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.02fr .98fr; } }
.hero__copy { display: grid; gap: var(--s-4); align-content: start; max-width: 640px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  margin-top: var(--s-3); padding-top: var(--s-4);
  border-top: 1px solid var(--line-dark);
}
.hero__meta li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-ui); color: var(--ink-dim); }
.hero__meta svg { flex: none; color: var(--teal); }

.hero--page { padding-block: clamp(48px, 6vw, 80px); }
.hero--page .hero__copy { max-width: 760px; }

/* Diagrama ecosistem */
.ecosystem { position: relative; width: 100%; max-width: 540px; margin-inline: auto; }
.ecosystem svg { width: 100%; height: auto; overflow: visible; }
.eco-ring { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1; }
.eco-link { stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 3 6; }
.eco-core { fill: var(--navy-800); stroke: rgba(255,255,255,.22); stroke-width: 1.5; }
.eco-node rect { fill: rgba(8,21,46,.86); stroke: rgba(255,255,255,.2); stroke-width: 1.5; }
.eco-node text {
  fill: #FFFFFF; font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
  dominant-baseline: middle; text-anchor: start;
}
/* Iconurile din noduri sunt monocrome: pe fundal inchis, un set colorat ar
   concura cu impulsurile de date, care chiar codifica ceva. */
.eco-node__icon { opacity: .78; }
.eco-node:hover .eco-node__icon { opacity: 1; }
.eco-node--accent rect { stroke: rgba(246,60,57,.6); }
.eco-node--violet rect { stroke: rgba(122,90,248,.65); }

/* --- Animatia diagramei ------------------------------------------------
   Concept din 19_MOTION: elemente care converg catre un centru comun.
   Cinci straturi, toate in limitele brandului (fara glow, fara particule,
   fara bounce):
   1. sting de intrare ~920ms, elementele se aseaza dinspre exterior;
   2. flux pe legaturi — liniile punctate curg spre nucleu;
   3. impulsuri cu coada, fiecare in culoarea modulului din lockup-ul lui;
   4. unde de absorbtie in nucleu, sincronizate cu sosirea impulsurilor;
   5. parallax la miscarea cursorului, pe trei straturi de adancime.
   Se animeaza doar `transform`: daca JS nu ruleaza, diagrama ramane in
   pozitia finala, nu invizibila.                                          */

/* 5. adancime — JS scrie --px/--py pe .ecosystem, in intervalul [-1, 1] */
.eco-layer {
  transform-box: view-box;
  transform: translate(calc(var(--px, 0) * var(--depth) * 9px),
                       calc(var(--py, 0) * var(--depth) * 9px));
  transition: transform 520ms cubic-bezier(.2, .8, .3, 1);
}

/* 2. flux pe legaturi */
.eco-link line {
  stroke-dasharray: 3 7;
  animation: eco-stream 1.6s linear infinite;
}
@keyframes eco-stream { to { stroke-dashoffset: -20; } }

/* maturari lente pe inele; dasharray = segment scurt + restul circumferintei */
.eco-sweep {
  stroke-linecap: round; fill: none;
  transform-box: view-box; transform-origin: 280px 250px;
  animation: eco-spin 26s linear infinite;
}
.eco-sweep--outer { stroke: rgba(255,255,255,.3); stroke-width: 1.5; stroke-dasharray: 95 1476; }
.eco-sweep--inner {
  stroke: rgba(246,60,57,.42); stroke-width: 1.5; stroke-dasharray: 72 1122;
  animation-duration: 38s; animation-direction: reverse;
}
@keyframes eco-spin { to { transform: rotate(360deg); } }

/* 3. impulsuri + coada */
.eco-pulse, .eco-trail {
  fill: var(--c);
  transform-box: view-box; transform-origin: 0 0;
  animation: eco-converge 2.8s linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
.eco-trail { animation-name: eco-converge-trail; }
@keyframes eco-converge {
  0%   { transform: translate(0, 0);                    opacity: 0; }
  14%  {                                                opacity: .95; }
  86%  {                                                opacity: .95; }
  100% { transform: translate(var(--dx), var(--dy));    opacity: 0; }
}
/* aceeasi traiectorie, decalata cu ~4% din ciclu si mai stinsa */
@keyframes eco-converge-trail {
  0%   { transform: translate(0, 0);                    opacity: 0; }
  4%   { transform: translate(0, 0);                    opacity: 0; }
  18%  {                                                opacity: .4; }
  86%  {                                                opacity: .4; }
  100% { transform: translate(calc(var(--dx) * .96), calc(var(--dy) * .96)); opacity: 0; }
}

/* 4. unde de absorbtie — o unda la fiecare 0,4s, exact ritmul sosirilor */
.eco-ripple {
  fill: none; stroke: rgba(246,60,57,.5); stroke-width: 1.5;
  transform-box: view-box; transform-origin: 280px 250px;
  animation: eco-ripple 1.2s var(--ease) infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
@keyframes eco-ripple {
  0%   { transform: scale(1);    opacity: .5; }
  100% { transform: scale(1.42); opacity: 0; }
}

/* 1. sting de intrare */
.ecosystem.is-visible .eco-node,
.ecosystem.is-visible .eco-ring,
.ecosystem.is-visible .eco-core {
  transform-box: view-box; transform-origin: 280px 250px;
  animation: eco-settle 640ms var(--ease) backwards;
}
.ecosystem.is-visible .eco-node { animation-delay: var(--in, 0ms); }
.ecosystem.is-visible .eco-ring { animation-duration: 760ms; }
@keyframes eco-settle { from { transform: scale(1.09); } }

/* Cand utilizatorul cere mai putina miscare, dispare tot ce exista doar ca sa
   exprime miscare. Raman inelele, legaturile, nodurile si nucleul. */
@media (prefers-reduced-motion: reduce) {
  .eco-pulse, .eco-trail, .eco-sweep, .eco-ripple { display: none; }
  .eco-link line { animation: none; }
  .eco-layer { transform: none; transition: none; }
}

/* --------------------------------------------------------------- 8. Carduri */
.card {
  position: relative; display: grid; align-content: start; gap: var(--s-3);
  background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s-5);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Hover prin schimbare de suprafata, nu prin ridicare cu umbra */
.card--link:hover { background: var(--cloud); border-color: rgba(3, 25, 61, .32); }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; }
.card__text { color: var(--slate); font-size: var(--fs-ui); line-height: 1.6; }
.card__foot { padding-top: var(--s-2); }

.on-dark .card { background: rgba(255,255,255,.045); border-color: var(--line-dark); color: #FFFFFF; }
.on-dark .card__text { color: var(--ink-dim); }
.on-dark .card--link:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .32); }




/* ------------------------------------------------------------ 9. Indicatori */
.stats { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 3px solid var(--coral); }
.stat__value {
  font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.02em;
}
.stat__label { font-size: var(--fs-ui); color: var(--slate); }
.on-dark .stat__label { color: var(--ink-dim); }
/* Aceeasi linie pentru toti indicatorii, cu un segment coral incastrat la
   inceput — acelasi device ca .eyebrow. Culorile diferite pe fiecare coloana
   codificau ceva ce nu exista. */
.stat { position: relative; border-top-color: var(--line); }
.stat::before {
  content: ""; position: absolute; left: 0; top: -3px;
  width: 40px; height: 3px; background: var(--coral);
}
.on-dark .stat { border-top-color: var(--line-dark); }

/* ------------------------------------------------------------------ 10. Pasi */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: step; display: grid; gap: var(--s-3); align-content: start; }
/* Acelasi registru de numerotare ca .featuregrid, .modindex si .legal-section:
   numar mic, tabular, pe o linie de cadru. Fara cerc. */
.step__num {
  display: block; padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .12em;
  color: var(--coral-700); font-variant-numeric: tabular-nums;
}
.on-dark .step__num { border-top-color: var(--line-dark); color: var(--coral); }
.step__num::before { content: counter(step, decimal-leading-zero); }

/* --------------------------------------------------------- 11. Liste feature */

/* Grila cu hairline — celule separate de linii de 1px, fara cutii individuale */
.featuregrid {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
@media (min-width: 720px)  { .featuregrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .featuregrid { grid-template-columns: repeat(3, 1fr); } }
/* Cu 8 celule, trei coloane lasa un slot gol care se vede ca bloc gri, pentru ca
   fundalul containerului e chiar culoarea liniilor. Patru coloane il umplu exact. */
@media (min-width: 1040px) {
  .featuregrid:has(> :nth-child(8)) { grid-template-columns: repeat(4, 1fr); }
}
.featuregrid__cell {
  display: grid; align-content: start; gap: var(--s-3);
  background: #FFFFFF;
  padding: clamp(24px, 2.6vw, 36px);
}
.featuregrid__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-1);
}
.featuregrid__meta img { width: 22px; height: 22px; opacity: .82; }
.featuregrid__num {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .12em;
  color: #9AA4B5; font-variant-numeric: tabular-nums;
}
.featuregrid__title {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.35;
}
.featuregrid__text { color: var(--slate); font-size: var(--fs-ui); line-height: 1.65; }
.featuregrid__cell .link-arrow { margin-top: var(--s-1); justify-self: start; }

/* Index de sectiuni — cuprins tabelar, cu culoarea proprie a fiecarui modul
   (preluata din separatorul lockup-urilor din 03_MODULES)
   >=1140px: 7 coloane cu linii verticale · sub 1140px: un singur rand derulabil */
.jumpindex {
  margin-top: var(--s-6);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.jumpindex__list { display: grid; }
@media (min-width: 1140px) {
  .jumpindex__list { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
@media (max-width: 1139px) {
  .jumpindex__list {
    grid-auto-flow: column; grid-auto-columns: minmax(158px, 1fr);
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .jumpindex__list::-webkit-scrollbar { display: none; }
  .jumpindex__item { scroll-snap-align: start; }
}
.jumpindex__item {
  --mod: var(--coral);
  position: relative;
  display: grid; align-content: start; gap: var(--s-2);
  padding: var(--s-4) var(--s-3) calc(var(--s-4) + 2px);
  border-left: 1px solid var(--line-dark);
  transition: background var(--dur) var(--ease);
}
.jumpindex__item:first-child { border-left: 0; padding-left: 0; }
/* bara de accent apare la hover, in culoarea modulului */
.jumpindex__item::before {
  content: ""; position: absolute; inset-inline: 0; top: -1px; height: 2px;
  background: var(--mod);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.jumpindex__item:hover { background: rgba(255, 255, 255, .05); }
.jumpindex__item:hover::before { transform: scaleX(1); }

.jumpindex__meta { display: flex; align-items: center; gap: var(--s-2); }
.jumpindex__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--mod);
  transition: box-shadow var(--dur) var(--ease);
}
.jumpindex__item:hover .jumpindex__dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mod) 22%, transparent); }
.jumpindex__num {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .14em;
  color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums;
}
.jumpindex__name {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; color: #FFFFFF;
  line-height: 1.25; letter-spacing: -0.015em;
}
/* Numele ramane alb la hover: pe navy, albastrul, magenta si violetul nu ating
   4.5:1 ca text. Culoarea modulului sta pe bulina si pe bara — elemente
   grafice, unde pragul e 3:1 si toate trec. */
.jumpindex__role {
  font-size: 0.8125rem; line-height: 1.45;
  color: rgba(255, 255, 255, .58);
}

/* Index de module — rand tabelar, scaleaza la orice numar de module */
.modindex { border-top: 1px solid var(--line); }
.modindex__row {
  display: grid; gap: var(--s-2);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
@media (min-width: 900px) {
  .modindex__row {
    grid-template-columns: 46px 210px minmax(0, 1.05fr) minmax(0, 1.35fr) 26px;
    align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-3);
  }
}
.modindex__row:hover { background: var(--cloud); }
.modindex__num {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .12em;
  color: #9AA4B5; font-variant-numeric: tabular-nums;
}
.modindex__lockup { height: 22px; width: auto; }
.modindex__slogan {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.4;
}
.modindex__text { color: var(--slate); font-size: var(--fs-ui); line-height: 1.6; }
.modindex__go { display: grid; place-items: center; color: #9AA4B5; }
.modindex__go svg { transition: transform var(--dur) var(--ease); }
.modindex__row:hover .modindex__go { color: var(--coral-700); }
.modindex__row:hover .modindex__go svg { transform: translateX(4px); }
@media (max-width: 899px) {
  .modindex__go { display: none; }
  .modindex__num { order: -1; }
}

/* Lista de specificatii — randuri termen/descriere, in registru de fisa tehnica */
.speclist { display: grid; container-type: inline-size; }
.speclist > div {
  display: grid; gap: var(--s-1);
  padding: var(--s-3) 0;
  border-top: 1px solid rgba(3, 25, 61, .1);
}
.speclist > div:first-child { border-top: 0; padding-top: 0; }
/* doua coloane doar cand containerul propriu are loc, nu dupa latimea ferestrei */
@container (min-width: 520px) {
  .speclist > div { grid-template-columns: 156px minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
}
.speclist dt { font-size: var(--fs-ui); font-weight: 600; line-height: 1.5; }
.speclist dd { color: var(--slate); font-size: var(--fs-ui); line-height: 1.6; }
.on-dark .speclist > div { border-top-color: var(--line-dark); }
.on-dark .speclist dd { color: var(--ink-dim); }

/* Lista numerotata cu hairline */
.steplist { counter-reset: sl; display: grid; }
.steplist li {
  counter-increment: sl;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-3) 0; border-top: 1px solid rgba(3, 25, 61, .1);
  font-size: var(--fs-ui); line-height: 1.6;
}
.steplist li:first-child { border-top: 0; padding-top: 0; }
.steplist li::before {
  content: counter(sl, decimal-leading-zero);
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .1em;
  color: var(--coral-700); font-variant-numeric: tabular-nums; padding-top: 3px;
}
.on-dark .steplist li { border-top-color: var(--line-dark); color: var(--ink-dim); }
.on-dark .steplist li::before { color: var(--coral); }

/* Lista de lockup-uri de modul */
.locklist { display: grid; container-type: inline-size; }
.locklist li {
  display: grid; gap: var(--s-2);
  padding: var(--s-3) 0; border-top: 1px solid rgba(3, 25, 61, .1);
}
.locklist li:first-child { border-top: 0; padding-top: 0; }
@container (min-width: 460px) {
  .locklist li { grid-template-columns: 186px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
}
.locklist img { height: 21px; width: auto; }
.locklist span { color: var(--slate); font-size: var(--fs-ui); line-height: 1.55; }

/* Sir de fapte separate prin hairline (hero) */
/* Ca restul sistemului, se scrie pe deschis si se rastoarna sub `.on-dark`.
   Inainte era hardcodat pe navy: pe alb, `--ink-dim` da 2.1:1. */
.factline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) 0;
  margin-top: var(--s-3); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.factline li { font-size: var(--fs-ui); color: var(--slate); padding-inline: var(--s-4); }
.factline li:first-child { padding-left: 0; }
.factline li + li { border-left: 1px solid var(--line); }

.on-dark .factline { border-top-color: var(--line-dark); }
.on-dark .factline li { color: var(--ink-dim); }
.on-dark .factline li + li { border-left-color: var(--line-dark); }
@media (max-width: 560px) {
  .factline { display: grid; gap: var(--s-2); }
  .factline li { padding-inline: 0; }
  .factline li + li { border-left: 0; }
}


/* -------------------------------------------------- 12. Sectiuni de continut */
.module-section { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); scroll-margin-top: 92px; }
/* Fisa de modul: intro scurt, lista de specificatii lunga. Aliniez sus si tin
   intro-ul lipit in timp ce se parcurge lista, ca sa nu ramana gol pe dreapta. */
@media (min-width: 900px) {
  .module-section .split { align-items: start; }
  .module-intro { position: sticky; top: 108px; }
}
.module-section:first-of-type { border-top: 0; }
.module-lockup { height: clamp(28px, 3.4vw, 38px); width: auto; }

.panel { background: var(--cloud); border-radius: var(--r); padding: clamp(24px, 4vw, 48px); }
.panel--navy { background: var(--navy); }
.panel--outline { background: #FFFFFF; border: 1px solid var(--line); }

.flow { display: grid; gap: var(--s-2); }
.flow__row {
  display: grid; grid-template-columns: 1fr; gap: var(--s-1);
  background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s-3) var(--s-4);
}
@media (min-width: 560px) { .flow__row { grid-template-columns: 190px 1fr; align-items: center; gap: var(--s-3); } }
.flow__label { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--fs-ui); }
.flow__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); flex: none; }
.flow__row:nth-child(2) .flow__dot { background: var(--teal); }
.flow__row:nth-child(3) .flow__dot { background: var(--blue); }
.flow__row:nth-child(4) .flow__dot { background: var(--amber); }
.flow__value { color: var(--slate); font-size: var(--fs-ui); }

/* ------------------------------------------- 12b. Diagrama de arhitectura */
.layers { display: grid; gap: var(--s-3); }
.layer {
  display: grid; gap: var(--s-3);
  background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s-4);
}
.layer--core {
  background: var(--navy); border-color: var(--navy); color: #FFFFFF;
  position: relative; overflow: hidden;
}
.layer--core::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg,  var(--grid-line) 0 1px, transparent 1px 48px);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
}
.layer--core > * { position: relative; z-index: 1; }
.layer__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); }
.layer__title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.layer__note { font-size: var(--fs-caption); color: var(--slate); }
.layer--core .layer__note { color: var(--ink-dim); }
.layer__arrow { display: grid; place-items: center; color: #C6CFDD; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Eticheta din schema de arhitectura: contur, fara umplere. Norul de pastile
   pline citea a template; conturul citeste a desen tehnic. */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 9px 14px; border-radius: 4px;
  background: transparent; border: 1px solid var(--line);
  font-size: var(--fs-caption); font-weight: 600; color: var(--navy);
}
.chip img { width: 18px; height: 18px; }
.layer--core .chip {
  background: transparent; border-color: rgba(255, 255, 255, .26); color: #FFFFFF;
}
.layer--core .chip img { filter: brightness(0) invert(1); }

/* Definitii (valori de brand) */
.deflist { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .deflist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .deflist { grid-template-columns: repeat(3, 1fr); } }
.deflist > div { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 2px solid var(--line); }
.deflist dt { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.deflist dd { color: var(--slate); font-size: var(--fs-ui); line-height: 1.6; }
.on-dark .deflist > div { border-top-color: var(--line-dark); }
.on-dark .deflist dd { color: var(--ink-dim); }

/* --------------------------------------------------------------- 13. CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--navy); }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--grid-step)),
    repeating-linear-gradient(0deg,  var(--grid-line) 0 1px, transparent 1px var(--grid-step));
  -webkit-mask-image: linear-gradient(100deg, transparent 12%, #000 62%);
          mask-image: linear-gradient(100deg, transparent 12%, #000 62%);
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band__inner { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.2fr auto; } }

/* ---------------------------------------------------------------- 14. Footer */
.site-footer { background: var(--deep); color: #FFFFFF; padding-block: var(--s-7) var(--s-5); }
.site-footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.site-footer__brand img { height: 28px; }
/* acelasi registru ca .eyebrow: linie de cadru + eticheta in text normal */
.site-footer h2 {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .01em;
  color: #FFFFFF;
  padding-top: var(--s-3); border-top: 1px solid var(--line-dark);
  margin-bottom: var(--s-3);
}
.site-footer li + li { margin-top: var(--s-2); }
.site-footer li a { font-size: var(--fs-ui); color: var(--ink-dim); transition: color var(--dur) var(--ease); }
.site-footer li a:hover { color: #FFFFFF; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between;
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line-dark);
  font-size: var(--fs-caption); color: var(--ink-dim);
}
.site-footer__bottom a { transition: color var(--dur) var(--ease); }
.site-footer__bottom a:hover { color: #FFFFFF; }

/* ------------------------------------------------------ 13b. Portofoliu */
/* Antetul unui client: logo pe suprafata proprie + fapte verificate */
.client-head { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 900px) { .client-head { grid-template-columns: 300px minmax(0, 1fr); } }
.client-logo {
  display: grid; place-items: center;
  padding: clamp(28px, 4vw, 44px);
  background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r);
}
.client-logo img { width: 100%; max-width: 220px; height: auto; }
.on-dark .client-logo { background: rgba(255, 255, 255, .05); border-color: var(--line-dark); }

/* Grila de locatii: fotografia e optionala, cardul trebuie sa arate bine si fara ea */
/* Carduri cu contur propriu, nu grila cu fundal-linie: numarul de locatii poate
   fi oricat, iar randul incomplet nu lasa sloturi goale colorate. */
.locations { display: grid; gap: var(--s-4); }
@media (min-width: 700px)  { .locations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .locations { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .locations--trei { grid-template-columns: repeat(3, 1fr); } }

.loc {
  display: grid; align-content: start; background: #FFFFFF;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.loc__photo {
  position: relative; aspect-ratio: 4 / 5;   /* fotografiile de magazin sunt portret */
  background: var(--cloud) center / cover no-repeat;
  border-bottom: 1px solid var(--line);
}
/* marcaj discret cat timp fotografia lipseste; dispare de indata ce fisierul exista */
.loc__photo::after {
  content: attr(data-empty);
  position: absolute; inset-inline: 0; bottom: var(--s-3);
  text-align: center; font-size: var(--fs-caption); color: #9AA4B5;
}
.loc__photo[style*="url"]::after { content: ""; }
.loc__body { display: grid; gap: var(--s-2); padding: clamp(20px, 2.4vw, 28px); }
.loc__num {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .12em;
  color: #9AA4B5; font-variant-numeric: tabular-nums;
}
.loc__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.loc__addr { font-size: var(--fs-ui); line-height: 1.6; color: var(--slate); }
.loc__addr--empty { color: #9AA4B5; border-bottom: 1px dashed #C6CFDD; justify-self: start; }
.loc__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line);
  font-size: var(--fs-caption); color: var(--slate);
}
.loc__meta b { font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Scara retelei: de la cel mai mic format la cel mai mare */
.scale { display: grid; gap: 1px; background: var(--line-dark); border-block: 1px solid var(--line-dark); }
@media (min-width: 760px) { .scale { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.scale__step { background: var(--navy); padding: var(--s-4) var(--s-4) calc(var(--s-4) + 2px); display: grid; gap: var(--s-2); }
.scale__tills { display: flex; gap: 4px; }
.scale__tills i { width: 10px; height: 18px; border-radius: 2px; background: var(--coral); display: block; }
.scale__tills i[data-off] { background: rgba(255, 255, 255, .16); }
.scale__label { font-size: var(--fs-ui); font-weight: 600; color: #FFFFFF; }
.scale__note { font-size: var(--fs-caption); color: var(--ink-dim); line-height: 1.5; }

/* ------------------------------------------------------- 14b. Pagini legale */
.legal-layout { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) {
  .legal-layout { grid-template-columns: 248px minmax(0, 1fr); }
  .legal-toc { position: sticky; top: 108px; align-self: start; }
}

.legal-toc ol { display: grid; }
.legal-toc a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--s-2);
  padding: 10px 0; border-top: 1px solid var(--line);
  font-size: 0.8125rem; line-height: 1.45; color: var(--slate);
  transition: color var(--dur) var(--ease);
}
.legal-toc a:hover { color: var(--navy); }
.legal-toc a span:first-child { color: #9AA4B5; font-variant-numeric: tabular-nums; }

.legal-section { scroll-margin-top: 104px; }
.legal-section + .legal-section { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.legal-section > h2 {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s-2);
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.3; margin-bottom: var(--s-4);
}
.legal-section > h2 > span:first-child {
  font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 600;
  color: #9AA4B5; font-variant-numeric: tabular-nums; padding-top: 6px;
}

.legal p { color: var(--slate); line-height: 1.75; }
.legal p + p, .legal ul + p, .legal p + ul, .legal dl + p { margin-top: var(--s-3); }
.legal h3 { font-size: 1rem; font-weight: 600; margin-top: var(--s-4); margin-bottom: var(--s-2); }
.legal ul { display: grid; gap: var(--s-2); }
.legal ul li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-2);
  color: var(--slate); line-height: 1.75;
}
.legal ul li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--coral); margin-top: 11px;
}
.legal a:not(.btn) {
  color: var(--navy); font-weight: 500;
  box-shadow: inset 0 -1px 0 rgba(3, 25, 61, .28);
  transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.legal a:not(.btn):hover { color: var(--coral-700); box-shadow: inset 0 -1px 0 var(--coral-700); }

/* ------------------------------------------------------- 14c. Acoperire
   Diagrama de raza: Timisoara in centru, localitatile la distanta si directia
   reala (calculate in scratchpad/acoperire.py, nu desenate din ochi).
   Scara: 100 km = 200 unitati de viewBox. */
.acoperire__fig { margin: 0; align-self: center; }

.acoperire__desen { display: block; width: 100%; height: auto; overflow: visible; }

.acop-inel {
  fill: none; stroke: var(--line); stroke-width: 1;
}
.acop-km {
  fill: var(--slate); font-size: 12px; font-weight: 500;
  font-variant-numeric: tabular-nums; text-anchor: middle;
}

.acop-raza { stroke: var(--line); stroke-width: 1; }

/* Decupaj sub text: inelul de 100 km trecea prin „Caransebeș”. Conturul in
   culoarea suprafetei se deseneaza inaintea umpluturii, deci scoate linia de
   sub litere. Culoarea urmeaza sectiunea, ca desenul sa poata sta si pe cloud. */
.acoperire { --acop-fundal: #FFFFFF; }
.acoperire.section--cloud { --acop-fundal: var(--cloud); }
.acop-nume, .acop-km, .acop-baza {
  paint-order: stroke fill;
  stroke: var(--acop-fundal); stroke-width: 4px; stroke-linejoin: round;
}

.acop-oras { fill: var(--navy); }
.acop-nume {
  fill: var(--navy); font-size: 14px; font-weight: 600;
  font-family: var(--font-display);
}

/* Nucleul: singurul accent coral din desen */
.acop-halou { fill: var(--coral); opacity: .10; }
.acop-pin   { fill: var(--coral); }
.acop-baza  {
  fill: var(--navy); font-size: 15px; font-weight: 700;
  font-family: var(--font-display);
}

.acoperire__nota {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption); color: var(--slate);
}

/* Trasarea la intrarea in cadru: inelele se deschid din centru, razele
   cresc spre localitati, nodurile apar la capat. Se anima doar transform. */
.acoperire__fig .acop-inel {
  transform-box: view-box; transform-origin: 260px 260px;
  transform: scale(.7); opacity: 0;
  transition: transform 720ms var(--ease), opacity 520ms var(--ease);
}
.acoperire__fig .acop-inel:nth-of-type(2) { transition-delay: 120ms; }

.acoperire__fig .acop-raza {
  stroke-dasharray: 400; stroke-dashoffset: 400;
  transition: stroke-dashoffset 640ms var(--ease);
  transition-delay: calc(240ms + var(--i) * 70ms);
}
.acoperire__fig .acop-oras,
.acoperire__fig .acop-nume {
  opacity: 0;
  transition: opacity 400ms var(--ease);
  transition-delay: calc(600ms + var(--i) * 70ms);
}
.acoperire__fig .acop-centru { opacity: 0; transition: opacity 400ms var(--ease); }

.acoperire__fig.is-visible .acop-inel { transform: none; opacity: 1; }
.acoperire__fig.is-visible .acop-raza { stroke-dashoffset: 0; }
.acoperire__fig.is-visible .acop-oras,
.acoperire__fig.is-visible .acop-nume,
.acoperire__fig.is-visible .acop-centru { opacity: 1; }

/* Halou care respira, o singura data intrat in cadru */
.acoperire__fig.is-visible .acop-halou {
  transform-box: view-box; transform-origin: 260px 260px;
  animation: acop-halou 4.4s var(--ease) infinite;
}
@keyframes acop-halou {
  0%, 100% { transform: scale(1);    opacity: .10; }
  50%      { transform: scale(1.18); opacity: .04; }
}

@media (max-width: 900px) {
  /* `margin-inline: auto` ar dezactiva intinderea in grid si figura ar cadea
     pe shrink-to-fit; centrarea se face din justify-self. */
  .acoperire__fig { max-width: 520px; width: 100%; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .acoperire__fig .acop-inel { transform: none; opacity: 1; }
  .acoperire__fig .acop-raza { stroke-dashoffset: 0; }
  .acoperire__fig .acop-oras,
  .acoperire__fig .acop-nume,
  .acoperire__fig .acop-centru { opacity: 1; }
  .acoperire__fig.is-visible .acop-halou { animation: none; }
}

/* --------------------------------------------------------------- 15. Formular */
.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 600px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-ui); font-weight: 600; }
.field .hint { font-size: var(--fs-caption); color: var(--slate); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px var(--s-3); min-height: 48px;
  background: #FFFFFF; color: var(--navy);
  border: 1.5px solid var(--line); border-radius: var(--r);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #C6CFDD; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 2px rgba(3, 25, 61, .16); outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: #98A2B3; }
.req { color: var(--coral-700); }

.consent { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; }
.consent input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--coral-600); }
.consent span { font-size: var(--fs-caption); line-height: 1.6; color: var(--slate); }

.form-note {
  padding: var(--s-3) var(--s-4); border-radius: var(--r);
  background: var(--cloud); border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  font-size: var(--fs-ui); line-height: 1.6; color: var(--navy);
}
.form-note[hidden] { display: none; }

/* Capcana anti-robot. Nu folosesc `display:none`: unele scripturi il
   detecteaza si sar peste camp. Asa ramane in flux, dar invizibil si
   inaccesibil — inclusiv pentru cititoarele de ecran, prin aria-hidden. */
.capcana {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Starile raspunsului de la server. Bara din stanga e singurul loc din site
   unde culoarea poarta sens, deci o dublez cu text explicit. */
.form-note--reusit,
.form-note--eroare {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--line);
  background: var(--cloud);
}
.form-note--reusit { border-left-color: var(--teal); color: var(--navy); }
.form-note--eroare { border-left-color: var(--coral-700); color: var(--navy); }

/* Declaratia de cookie-uri e generata de Cookiebot, cu marcajul lui. O aducem
   in registrul paginilor legale: fara chenare grele, hairline si tabular. */
.cookie-declaratie { font-size: var(--fs-ui); color: var(--navy); overflow-x: auto; }
.cookie-declaratie table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.cookie-declaratie th,
.cookie-declaratie td {
  text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.cookie-declaratie th { font-weight: 600; color: var(--navy); }
.cookie-declaratie td { color: var(--slate); }
.cookie-declaratie a { color: var(--navy); }
#CookiebotDeclarationChangeConsentChange { display: none; }

/* --------------------------------------------------------- 16. Motion / reveal */
[data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

.orbit-spin { transform-origin: 50% 50%; animation: orbit 90s linear infinite; }
.orbit-spin--rev { animation-duration: 140s; animation-direction: reverse; }
@keyframes orbit { to { transform: rotate(360deg); } }

.pulse { animation: pulse 5s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- 17. Utilitare */
.text-center { text-align: center; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.flex-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.full { grid-column: 1 / -1; }

/* ==================================================== 18. SFERA — agentul AI
   Sub-brand al Sferic: aceleași navy și coral, plus violet și sky ca accente.
   Contrastele au fost calculate: violetul dă 4,25:1 pe alb și sky 3,22:1, deci
   ambele rămân grafică — bare, contururi, puncte — niciodată text de citit.
   Textul stă pe navy sau slate, ca peste tot pe site. */
:root {
  --sfera-violet: #6E67F7;
  --sfera-sky:    #4F8CFF;
  --sfera-cloud:  #F6F8FB;
  --sfera-umbra:  0 1px 2px rgba(3,25,61,.08), 0 12px 32px rgba(3,25,61,.18);
}

/* „Sfera" singur nu spune nimic cuiva care intra prima oara, deci numele
   poarta un descriptor. Sky pe navy da 5,39:1, deci trece AA ca text.
   Fara pastila si fara fundal: doar text mai mic, in alta culoare. */
.nav__ce, .mobile-nav .nav__ce {
  font-size: 0.75rem; font-weight: 500; color: var(--sfera-sky);
  letter-spacing: .01em; white-space: nowrap;
}
.nav a:hover .nav__ce, .nav a[aria-current] .nav__ce { color: #FFFFFF; }

/* Site-ul nu are o regula globala pentru [hidden] — o rezolva pe componenta.
   Fara asta, `display: grid` de mai jos ar bate ascunderea implicita a
   browserului si panoul s-ar vedea deschis de la incarcare. */
.sfera-panou[hidden],
.sfera-sugestii[hidden],
.sfera-teaser[hidden] { display: none !important; }

/* ------------------------------------------------------- 18a. Pagina Sfera */
.sfera-hero__lockup { display: flex; align-items: center; gap: var(--s-4); }
.sfera-hero__mascota { width: clamp(84px, 12vw, 132px); height: auto; }

.sfera-semnatura {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0 var(--s-3);
  border-bottom: 1px solid var(--line-dark);
  font-size: var(--fs-caption); color: var(--sfera-sky);
}
.sfera-semnatura::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sfera-sky);
}

/* Cele cinci verbe: Întreabă · Înțelege · Recomandă · Alertează · Acționează */
.sfera-verbe {
  display: grid; gap: 1px; margin-top: var(--s-6);
  background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 720px) { .sfera-verbe { grid-template-columns: repeat(5, 1fr); } }
.sfera-verb { background: #FFFFFF; padding: var(--s-5) var(--s-4); }
.sfera-verb__pas {
  display: block; font-size: var(--fs-caption); font-variant-numeric: tabular-nums;
  color: var(--slate);
}
.sfera-verb__nume {
  display: block; margin-top: var(--s-2);
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
  color: var(--navy); letter-spacing: -0.01em;
}
.sfera-verb__text { margin-top: var(--s-2); font-size: var(--fs-ui); color: var(--slate); }
.on-dark .sfera-verbe { background: var(--line-dark); border-color: var(--line-dark); }
.on-dark .sfera-verb { background: var(--deep); }
.on-dark .sfera-verb__nume { color: #FFFFFF; }
.on-dark .sfera-verb__text,
.on-dark .sfera-verb__pas { color: var(--ink-dim); }

/* Întrebările pe rol, în registrul de fișă tehnică al site-ului */
.sfera-roluri { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 860px) { .sfera-roluri { grid-template-columns: repeat(3, 1fr); } }
.sfera-rol { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.sfera-rol__cine {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--navy);
}
.sfera-rol__ce { margin-top: var(--s-2); font-size: var(--fs-ui); color: var(--slate); }
.sfera-rol__intrebari { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.sfera-rol__intrebari li {
  padding-left: var(--s-4); position: relative;
  font-size: var(--fs-ui); color: var(--navy);
}
.sfera-rol__intrebari li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--sfera-violet);
}

/* Rama demonstrației mari din pagină */
.sfera-demo {
  border: 1px solid var(--line); background: #FFFFFF;
  display: grid; grid-template-rows: auto 1fr auto auto auto;
  max-height: 640px; overflow: hidden;
}
.sfera-demo__cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
}
.sfera-demo__eticheta {
  font-size: var(--fs-caption); color: var(--slate);
}
.sfera-demo .sfera-fir { max-height: 420px; }

/* ------------------------------------------------ 18b. Conversația (comună)
   Aceleași clase în widget și în pagină: o singură definiție de întreținut. */
.sfera-fir {
  overflow-y: auto; padding: var(--s-4) var(--s-5);
  display: grid; gap: var(--s-3); align-content: start;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .sfera-fir { scroll-behavior: auto; } }

.sfera-msg { display: flex; gap: var(--s-3); align-items: flex-start; }
.sfera-msg--om { justify-content: flex-end; }
.sfera-msg__avatar {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--sfera-cloud);
  overflow: hidden; margin-top: 2px;
}
.sfera-msg__avatar img { width: 22px; height: auto; }
.sfera-msg__corp { max-width: 88%; }
.sfera-msg--om .sfera-msg__corp {
  background: var(--navy); color: #FFFFFF;
  padding: var(--s-3) var(--s-4); border-radius: var(--r);
}
/* Raspunsul Sferei nu e o bula. Bula cu bara colorata pe stanga e tiparul pe
   care il poarta jumatate din interfetele de AI; in plus, contrazice restul
   site-ului, care separa prin linii de cadru, nu prin cutii pline.
   Aici raspunsul e continut editorial pe firul de linie, cu aceeasi
   incrustatie ca `.eyebrow` — doar in violetul Sferei. Bula ramane doar la
   mesajul omului, iar asimetria face distinctia intre vorbitori. */
.sfera-msg--sfera .sfera-msg__corp {
  position: relative;
  background: none; color: var(--navy);
  padding: var(--s-3) 0 var(--s-2);
  border-top: 1px solid var(--line); border-radius: 0;
}
.sfera-msg--sfera .sfera-msg__corp::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 36px; height: 1px; background: var(--sfera-violet);
}
/* Fara padding lateral, raspunsul poate folosi toata latimea utila. */
.sfera-msg--sfera .sfera-msg__corp { max-width: none; flex: 1 1 auto; min-width: 0; }
.sfera-msg__text { font-size: var(--fs-ui); line-height: 1.5; }
.sfera-msg__text + .sfera-msg__text,
.sfera-msg__corp > * + * { margin-top: var(--s-2); }
.sfera-msg__text a { color: inherit; text-underline-offset: 3px; }

.sfera-lista { display: grid; gap: 5px; font-size: var(--fs-ui); }
.sfera-lista li { padding-left: var(--s-4); position: relative; line-height: 1.45; }
.sfera-lista li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sfera-violet);
}

/* Bare de comparație. Lățimea e dată din `--procent`, scris inline din JS. */
.sfera-bare { display: grid; gap: var(--s-3); }
.sfera-bare__titlu { font-size: var(--fs-caption); color: var(--slate); }
.sfera-bar {
  display: grid; gap: 2px var(--s-3);
  grid-template-columns: 1fr auto auto; align-items: center;
  font-size: var(--fs-caption);
}
.sfera-bar__eticheta { color: var(--navy); font-weight: 500; }
.sfera-bar__valoare { color: var(--navy); font-variant-numeric: tabular-nums; }
.sfera-bar__delta { font-variant-numeric: tabular-nums; }
.sfera-bar__delta--sus  { color: var(--teal); }
.sfera-bar__delta--jos  { color: var(--coral-700); }
.sfera-bar__delta--neutru { color: var(--slate); }
.sfera-bar__pista {
  grid-column: 1 / -1; height: 4px; background: var(--cloud); border-radius: 2px;
  overflow: hidden;
}
.sfera-bar__umplut {
  display: block; height: 100%; width: var(--procent, 0%);
  background: var(--sfera-violet); border-radius: 2px;
  transform-origin: left center; animation: sfera-bara 620ms var(--ease) both;
}
@keyframes sfera-bara { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sfera-actiune {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-2); padding: var(--s-3) var(--s-4);
  background: var(--coral-600); color: #FFFFFF;
  border-radius: var(--r); font-size: var(--fs-ui); font-weight: 600;
  text-decoration: none; transition: background var(--dur) var(--ease);
}
.sfera-actiune:hover { background: var(--coral-700); }

/* Punctele de „scrie acum" */
.sfera-puncte { display: inline-flex; gap: 4px; padding: 4px 0; }
.sfera-puncte i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--slate);
  animation: sfera-puls 1.1s var(--ease) infinite;
}
.sfera-puncte i:nth-child(2) { animation-delay: .15s; }
.sfera-puncte i:nth-child(3) { animation-delay: .3s; }
@keyframes sfera-puls { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sfera-puncte i { animation: none; opacity: .6; }
  .sfera-bar__umplut { animation: none; }
}

/* Sugestii de întrebare */
.sfera-sugestii {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: 0 var(--s-5) var(--s-3);
}
/* In panoul ingust, sugestiile ocupau trei randuri din patru. Devin o banda
   pe un singur rand, derulabila lateral, ca spatiul sa ramana conversatiei. */
.sfera-panou .sfera-sugestii {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding-bottom: var(--s-2);
  -webkit-overflow-scrolling: touch;
}
.sfera-panou .sfera-sugestii::-webkit-scrollbar { display: none; }
.sfera-panou .sfera-sugestie { flex: none; white-space: nowrap; }

/* Pe ecran ingust, demonstratia din pagina are aceeasi problema: trei chipsuri
   stivuite mananca a treia parte din inaltime. Aceeasi banda. */
@media (max-width: 720px) {
  .sfera-demo .sfera-sugestii {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .sfera-demo .sfera-sugestii::-webkit-scrollbar { display: none; }
  .sfera-demo .sfera-sugestie { flex: none; white-space: nowrap; }
  .sfera-demo__cap { padding: var(--s-3) var(--s-4); }
}
.sfera-demo .sfera-sugestii { padding: 0 var(--s-5) var(--s-4); }
.sfera-sugestie {
  border: 1px solid var(--line); background: #FFFFFF; color: var(--navy);
  padding: var(--s-2) var(--s-3); border-radius: var(--r);
  font: inherit; font-size: var(--fs-caption); cursor: pointer; text-align: left;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sfera-sugestie:hover { border-color: var(--sfera-violet); background: var(--sfera-cloud); }

/* Trei feluri de buton, ca sa se vada ce e navigare si ce e intrebare.
   Sagetile sunt caractere, nu iconuri: la 12px un SVG nu ar spune mai mult. */
.sfera-sugestie--zona {
  font-weight: 600; border-color: var(--navy);
}
.sfera-sugestie--zona::after {
  content: "›"; margin-left: 6px; color: var(--sfera-violet); font-weight: 700;
}
.sfera-sugestie--inapoi {
  color: var(--slate); border-style: dashed;
}
.sfera-sugestie--inapoi::before {
  content: "‹"; margin-right: 6px; font-weight: 700;
}
.sfera-sugestie--scurt { border-color: var(--sfera-violet); }

/* Câmpul de scris */
.sfera-intrare {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-2);
  padding: var(--s-3) var(--s-5) var(--s-2); border-top: 1px solid var(--line);
}
.sfera-intrare input {
  width: 100%; font: inherit; font-size: var(--fs-ui); color: var(--navy);
  padding: 9px var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r); background: #FFFFFF;
}
.sfera-intrare input:focus-visible { outline: 2px solid var(--sfera-violet); outline-offset: 1px; }
.sfera-intrare button {
  display: grid; place-items: center; width: 38px;
  border: 0; border-radius: var(--r); background: var(--navy); color: #FFFFFF;
  cursor: pointer; transition: background var(--dur) var(--ease);
}
.sfera-intrare button:hover { background: var(--deep); }

.sfera-nota {
  padding: 0 var(--s-5) var(--s-3);
  font-size: 0.6875rem; line-height: 1.3; color: var(--slate);
}

/* Sfera in cuprinsul si in lista de module. Nu poarta numar: nu e al optulea
   modul, ci stratul de peste ele. „AI" tine locul numarului, iar sectiunea are
   o linie de cadru violeta care o desparte de cele sapte. */
.jumpindex__item--sfera .jumpindex__num {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .02em;
}
.module-section--sfera { border-top: 2px solid var(--sfera-violet); }
.module-lockup--sfera { height: auto; max-height: 62px; width: auto; }

/* Lista de intrebari care deschid agentul. Randuri cu linie de cadru, ca
   `.featuregrid` si `.speclist` — nu pastile, nu cutii separate. */
.sfera-intrebari { border-top: 1px solid var(--line); }
.sfera-intrebare {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  color: var(--navy); text-decoration: none;
  font-size: 1rem; font-weight: 500; line-height: 1.4;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.sfera-intrebare svg { flex: none; color: var(--sfera-violet); }
.sfera-intrebare:hover { color: var(--sfera-violet); padding-left: var(--s-3); }
@media (prefers-reduced-motion: reduce) {
  .sfera-intrebare { transition: color var(--dur) var(--ease); }
  .sfera-intrebare:hover { padding-left: 0; }
}

/* --------------------------------------------- 18d. Invitația din primul ecran
   Avantajul de marketing e ca exista un agent AI; ascuns intr-un colt, nu il
   vede nimeni. Aici e un <a> real catre sfera.html, pe care JS il transforma
   in deschiderea conversatiei cu intrebarea deja pusa. */
.sfera-invitatie {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s-4); margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-dark); border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sfera-invitatie:hover {
  background: rgba(255, 255, 255, .07);
  border-color: var(--sfera-violet);
}
.sfera-invitatie__fata { width: 34px; height: auto; }
.sfera-invitatie__corp { display: grid; gap: 3px; }
.sfera-invitatie__titlu {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: #FFFFFF; letter-spacing: -0.01em;
}
.sfera-invitatie__ce { font-size: var(--fs-caption); line-height: 1.45; color: var(--ink-dim); }
.sfera-invitatie__sageata {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 1px solid var(--line-dark); border-radius: 50%; color: #FFFFFF;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sfera-invitatie:hover .sfera-invitatie__sageata {
  border-color: var(--sfera-violet); background: var(--sfera-violet);
}
@media (max-width: 560px) {
  .sfera-invitatie { grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); }
  .sfera-invitatie__sageata { display: none; }
}

/* Indemnul din teaser: mic, dar spune ca se poate da clic */
.sfera-teaser__indemn {
  display: block; margin-top: var(--s-2);
  font-size: var(--fs-caption); font-weight: 600; color: var(--coral-700);
}

/* ------------------------------------------------------- 18c. Widget flotant
   Singurul loc din site, alături de .skip-link, unde folosim umbră: aici
   elementul chiar plutește peste conținut, deci elevația spune adevărul. */
.sfera-widget {
  position: fixed; right: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px);
  /* Peste antetul lipicios (100), care altfel ii acoperea propriul cap.
     Sub .skip-link (200), care trebuie sa ramana primul la tastatura. */
  z-index: 120; display: grid; gap: var(--s-3); justify-items: end;
}
/* Panoul urca deasupra lansatorului, care ramane jos — asa se asteapta lumea
   sa se deschide o conversatie si asa castiga panoul inaltime. */
.sfera-teaser { order: 2; }
.sfera-lansator { order: 3; }

.sfera-lansator {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 8px 18px 8px 8px;
  background: var(--navy); color: #FFFFFF;
  border: 0; border-radius: 999px;      /* singura pastilă din site: e un buton flotant, nu o etichetă */
  font: inherit; font-size: var(--fs-ui); font-weight: 600; cursor: pointer;
  box-shadow: var(--sfera-umbra);
  transition: background var(--dur) var(--ease);
}
.sfera-lansator:hover { background: var(--deep); }
.sfera-lansator__avatar {
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; flex: none;
}
.sfera-lansator__avatar img { width: 28px; height: auto; }
.sfera-lansator__punct {
  position: absolute; right: 1px; bottom: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal); border: 2px solid var(--navy);
}
.sfera-widget--deschis .sfera-lansator__text { display: none; }
@media (max-width: 560px) { .sfera-lansator__text { display: none; } }

.sfera-teaser {
  position: relative; max-width: 268px;
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
  background: #FFFFFF; color: var(--navy);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sfera-umbra);
  font-size: var(--fs-ui); line-height: 1.5; cursor: pointer;
  animation: sfera-intra 420ms var(--ease) both;
}
.sfera-teaser::after {
  content: ""; position: absolute; right: 26px; bottom: -7px;
  width: 12px; height: 12px; background: #FFFFFF;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.sfera-teaser__inchide {
  position: absolute; top: 4px; right: 4px;
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; background: none; color: var(--slate); cursor: pointer; border-radius: var(--r);
}
.sfera-teaser__inchide:hover { background: var(--cloud); color: var(--navy); }
@keyframes sfera-intra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sfera-teaser { animation: none; } }

.sfera-panou {
  width: min(390px, calc(100vw - 24px));
  background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sfera-umbra);
  display: grid; grid-template-rows: auto 1fr auto auto auto;
  max-height: min(720px, calc(100vh - 92px));
  overflow: hidden; order: 1;
  animation: sfera-intra 260ms var(--ease) both;
}
@media (prefers-reduced-motion: reduce) { .sfera-panou { animation: none; } }
.sfera-panou__cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); background: var(--navy); color: #FFFFFF;
}
.sfera-panou__identitate { display: flex; align-items: center; gap: var(--s-3); }
.sfera-panou__identitate img { width: 26px; height: auto; }
.sfera-panou__identitate b { display: block; font-family: var(--font-display); font-size: 0.9375rem; }
.sfera-panou__identitate small { display: block; font-size: var(--fs-caption); color: var(--ink-dim); }
.sfera-panou__inchide {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 0; background: none; color: #FFFFFF; cursor: pointer; border-radius: var(--r);
}
.sfera-panou__inchide:hover { background: rgba(255,255,255,.12); }
.sfera-panou .sfera-fir { min-height: 240px; }

@media (max-width: 560px) {
  .sfera-widget { left: 12px; right: 12px; justify-items: stretch; }
  .sfera-panou { width: 100%; max-height: calc(100vh - 96px); }
  .sfera-teaser { max-width: none; }
  .sfera-lansator { justify-self: end; }
}

@media print { .sfera-widget { display: none !important; } }

/* =============================================================
   Poarta demonstratiilor

   Cinci dintre cele sapte animatii se deblocheaza dupa verificarea firmei
   si a numarului de telefon. Pana atunci cartonasul arata primul cadru,
   cu o eticheta discreta — nu un lacat mare peste imagine: cine rasfoieste
   trebuie sa vada ca are ce debloca, nu ca i s-a inchis usa in nas.
   ============================================================= */
/* Fundalul e alb, nu --cloud, si nu din gust: --slate da 4,79:1 pe alb, dar
   scade la 4,46:1 pe --cloud, adica sub pragul AA de 4,5:1 pentru text de
   dimensiune normala. Pe fundalul inchis al hero-ului, albul arata si mai
   curat decat grulul. */
.poarta-anunt {
  display: grid; gap: var(--s-3); justify-items: start;
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line);
  background: #FFFFFF; border-radius: var(--r);
  margin: var(--s-2) 0;
}
.poarta-anunt[hidden] { display: none; }
.poarta-anunt p { font-size: var(--fs-ui); color: var(--slate); max-width: 72ch; margin: 0; }
.poarta-anunt b { color: var(--navy); font-weight: 600; }

/* Eticheta de sub o animatie blocata. E buton, dar nu arata ca unul: pe pagina
   de module ar concura cu butoanele reale din fiecare sectiune. Sublinierea
   apare la hover si la focus, ca sa se vada ca se poate apasa.
   Culoarea e --navy-700, nu --slate: eticheta are 12px, iar --slate coboara
   la 4,46:1 pe sectiunile cu fundal --cloud — sub pragul AA. --navy-700 da
   11,8:1 pe --cloud si 12,7:1 pe alb, si arata oricum mai a buton. */
.poarta-eticheta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--s-3); padding: 0;
  background: none; border: 0; border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-caption); color: var(--navy-700);
  text-align: left; cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.poarta-eticheta[hidden] { display: none; }
.poarta-eticheta svg { flex: none; color: var(--coral-600); }
.poarta-eticheta span { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line); transition: text-decoration-color var(--dur) var(--ease); }
.poarta-eticheta:hover { color: var(--navy); }
.poarta-eticheta:hover span { text-decoration-color: var(--coral-600); }
.poarta-eticheta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* Dialogul. <dialog> nativ aduce capcana de focus, Escape si fundalul inert
   fara nicio linie de JavaScript; nu le rescriem noi mai prost. */
.poarta[open] {
  display: grid; align-content: start; gap: var(--s-5);
  width: min(36rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r);
  background: #FFFFFF; color: var(--navy);
  box-shadow: 0 32px 80px rgba(3, 25, 61, .28);
}
.poarta::backdrop { background: rgba(3, 25, 61, .62); }
.poarta__cap { display: grid; gap: var(--s-2); }
.poarta__cap h2 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0; }
.poarta__cap p { font-size: var(--fs-ui); color: var(--slate); margin: 0; }
.poarta form { display: grid; gap: var(--s-5); }
.poarta [data-pas] { display: grid; gap: var(--s-4); }
.poarta [data-pas][hidden] { display: none; }
.poarta__actiuni { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.poarta__actiuni .btn { flex: 1 1 auto; justify-content: center; }

/* Firma intoarsa de ANAF, ca sa se poata confirma inainte de a da telefonul. */
.poarta__firma {
  display: grid; gap: 4px;
  padding: var(--s-4); border-radius: var(--r);
  background: var(--cloud); border: 1px solid var(--line);
}
.poarta__firma strong { font-family: var(--font-display); font-size: 1.0625rem; }
.poarta__firma span { font-size: var(--fs-caption); color: var(--slate); }

.poarta__marunt { font-size: var(--fs-caption); color: var(--slate); margin: 0; }
.poarta__marunt a { color: inherit; }

@media (max-width: 600px) {
  .poarta[open] { padding: var(--s-5); }
  .poarta__actiuni .btn { flex: 1 1 100%; }
}

/* Protectie la copiere (vezi finalul sferic.js): textul nu se selecteaza,
   imaginile nu se trag si nu deschid meniul de salvare la apasare lunga.
   Campurile de formular si datele de contact raman selectabile. */
body { -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable="true"], a[href^="mailto:"], a[href^="tel:"] { -webkit-user-select: text; user-select: text; }
img, picture, svg image { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }