/* ============================================================================
   QBITS — "metropola noaptea"
   Teren inchis, luminat de surse punctuale. Fiecare sectiune, alta camera.
   Peste scrollcraft.css; aici doar tokenii bruti si clasele paginii.
   ========================================================================= */

:root {
  /* --- cele sase roluri --------------------------------------------------- */
  --sc-canvas:      #05070f;
  --sc-surface:     #0b0f1c;
  --sc-ink:         #e9eefc;
  --sc-ink-soft:    #8e9bbb;
  --sc-accent:      #e8a46b;
  --sc-accent-ink:  #201712;

  --sc-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --sc-font-text:    "Manrope", "Segoe UI", system-ui, sans-serif;

  --sc-hairline:        rgba(160, 185, 240, .13);
  --sc-hairline-strong: rgba(160, 185, 240, .26);
  --sc-shadow-color: 224 60% 2%;

  /* --- culorile celor sase (accesorii, nu fundaluri) ---------------------- */
  --a-david:  #2f4fd8;  --a-david-lit:  #7e9cff;
  --a-alice:  #f0644a;  --a-alice-lit:  #ff9781;
  --a-tudor:  #1fb6c9;  --a-tudor-lit:  #5fe3f2;
  --a-lidia:  #a259d9;  --a-lidia-lit:  #c894ff;
  --a-victor: #4ea8de;  --a-victor-lit: #8fd4ff;
  --a-vera:   #e0479b;  --a-vera-lit:   #ff8ac4;

  /* --- terenuri: fiecare sectiune e alta camera --------------------------- */
  --g-hero:   #05070f;
  --g-story:  #080615;
  --g-team:   #030810;
  --g-work:   #0a0613;
  --g-how:    #04100f;
  --g-price:  #100812;
  --g-faq:    #06080f;
  --g-close:  #04060d;

  --edge-lit: inset 0 1px 0 rgba(190, 214, 255, .11);
  --bar-h: 68px;
}

/* ============================================================================
   0. Baza
   ========================================================================= */

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: .004em;             /* text deschis pe fund inchis: +tracking */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-bottom: calc(44px + env(safe-area-inset-bottom));
}

::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
* { scrollbar-color: #253253 transparent; scrollbar-width: thin; }

h1, h2, h3, h4 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  letter-spacing: var(--sc-track-tight);
  line-height: var(--sc-leading-tight);
  text-wrap: balance;
  margin: 0;
}
p { text-wrap: pretty; margin: 0; }
a { color: inherit; }

.wrap { width: min(var(--sc-maxw), 100% - var(--sc-gutter) * 2); margin-inline: auto; }
.lede { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); max-width: 54ch; line-height: 1.52; }
.small { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.nums  { font-variant-numeric: tabular-nums; }

/* ============================================================================
   1. Camera: teren + lumini difuze + geam
   Fiecare sectiune primeste .room; terenul vine din --ground.
   ========================================================================= */

.room {
  position: relative;
  isolation: isolate;
  overflow: clip;              /* clip, nu hidden: hidden ar rupe position:sticky */
  background: var(--ground, var(--sc-canvas));
}
/* Nu ridicam continutul: coboram luminile. Vezi .room__lights / .room--live::after. */

/* spoturile difuze: doua-trei pete radiale care respira lent */
.room__lights {
  position: absolute; inset: 0;
  z-index: -2; pointer-events: none;
  overflow: clip;
}
.room__lights i {
  position: absolute;
  display: block;
  /* Moliciunea vine din stopurile gradientului, NU din filter: blur().
     Blurul costa un raster de cateva sute de mii de pixeli la fiecare cadru;
     gradientul se deseneaza o data si apoi doar se compune. */
  background:
    radial-gradient(circle closest-side,
      var(--c) 0%,
      color-mix(in oklab, var(--c) 62%, transparent) 30%,
      color-mix(in oklab, var(--c) 28%, transparent) 52%,
      color-mix(in oklab, var(--c) 9%, transparent) 72%,
      transparent 88%);
  opacity: .62;
  /* STATICE, si asta a fost cea mai mare economie dupa content-visibility.
     Petele stau intr-un context izolat cu z-index negativ si overflow clip,
     iar acolo Chrome nu le mai duce pe placa video: orice miscare, fie prin
     transform, fie prin opacitate, le redeseneaza integral la fiecare cadru.
     Masurat pe aceeasi sectiune:
         cu derivare prin transform   81% dintr-un nucleu
         cu respiratie prin opacitate 70%
         statice                      10%
     Un spot difuz nici nu se misca in realitate. Viata camerei vine din
     lumina care urmeaza cursorul, din optica agentilor si din borduri. */
}
.room__lights i:nth-child(2) { opacity: .5; }
.room__lights i:nth-child(3) { opacity: .4; }



/* lumina care urmeaza cursorul: publicata de motor prin --sc-mx / --sc-my */
.room--live::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(
    30rem 30rem at calc(var(--sc-mx, .5) * 100%) calc(var(--sc-my, .3) * 100%),
    color-mix(in oklab, var(--room-key, var(--sc-accent)) 16%, transparent) 0%,
    transparent 62%);
  opacity: 0; transition: opacity 500ms var(--sc-ease-out);
}
.room--live:hover::after { opacity: 1; }

/* granulatie: un teren inchis fara ea face benzi pe ecrane reale */
.grain {
  position: fixed; inset: 0; z-index: 9; pointer-events: none;
  /* fara mix-blend-mode: amestecarea intregului ecran la fiecare cadru era
     a doua cea mai scumpa operatie din pagina. Pe teren inchis, diferenta
     vizuala fata de o simpla opacitate e sub pragul de observabilitate. */
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* linia de orizont dintre camere: un fir de lumina, nu o bordura */
.seam {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg,
    transparent, color-mix(in oklab, var(--room-key, var(--sc-accent)) 42%, transparent) 30%,
    color-mix(in oklab, var(--room-key, var(--sc-accent)) 58%, transparent) 50%,
    color-mix(in oklab, var(--room-key, var(--sc-accent)) 42%, transparent) 70%, transparent);
  opacity: .5;
}

.pad { padding-block: var(--sc-section); }
.pad-t0 { padding-top: clamp(2rem, 4vw, 4rem); }

/* ============================================================================
   2. Bara de sus
   ========================================================================= */

.bar {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--bar-h);
  display: flex; align-items: center;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent),
    color-mix(in oklab, var(--sc-canvas) 78%, transparent));
  border-bottom: 1px solid transparent;
  transition: background 320ms var(--sc-ease-out), border-color 320ms var(--sc-ease-out);
}
.bar.is-stuck {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--sc-canvas) 99%, transparent),
    color-mix(in oklab, var(--sc-canvas) 92%, transparent));
  border-bottom-color: var(--sc-hairline);
}
.bar__in { display: flex; align-items: center; gap: var(--sc-5); width: min(var(--sc-maxw), 100% - var(--sc-gutter) * 2); margin-inline: auto; }

.mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.12rem;
  letter-spacing: -.02em; text-decoration: none;
}
.mark svg { width: 26px; height: 26px; overflow: visible; }
.mark .mark__ring { transform-origin: 50% 50%; animation: markspin 14s linear infinite; }
@keyframes markspin { to { transform: rotate(360deg); } }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.4rem, 1.1vw, 1.15rem); }
.nav a:not(.btn) {
  position: relative; text-decoration: none; font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft); padding: 8px 2px;
  transition: color 160ms var(--sc-ease-out);
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--sc-accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 260ms var(--sc-ease-out);
}
.nav a:not(.btn):hover { color: var(--sc-ink); }
.nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.navm { display: none; }
@media (max-width: 860px) {
  .nav a:not(.btn) { display: none; }
  .bar { height: auto; padding-block: 8px 0; }
  .bar__in { flex-wrap: wrap; row-gap: 4px; }
  .navm {
    display: flex; gap: 1.1rem; order: 3; width: 100%;
    overflow-x: auto; scrollbar-width: none;
    padding: 6px 0 9px; margin: 0;
    -webkit-overflow-scrolling: touch;
  }
  .navm::-webkit-scrollbar { display: none; }
  .navm a {
    flex: none; text-decoration: none; white-space: nowrap;
    font-size: var(--sc-t-xs); letter-spacing: .04em; text-transform: uppercase;
    color: var(--sc-ink-soft);
  }
  .navm a:active { color: var(--sc-ink); }
}
.navm .btn--login {
  display: inline-flex; color: var(--sc-accent); font-size: 11px; font-weight: 700;
  letter-spacing: .02em; padding: .48rem .72rem; border-radius: 999px;
  background: rgba(232,164,107,.08); box-shadow: inset 0 0 0 1px rgba(232,164,107,.55);
  text-transform: none;
}
.navm .btn--login:hover { color: var(--sc-accent); }

/* bara de progres a paginii */
.progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 61;
  transform-origin: left; transform: scaleX(var(--page-p, 0));
  background: linear-gradient(90deg, var(--a-david-lit), var(--a-tudor-lit) 40%, var(--a-vera-lit));
  box-shadow: 0 0 14px color-mix(in oklab, var(--sc-accent) 55%, transparent);
}

/* ============================================================================
   3. Butoane
   ========================================================================= */

.btn {
  --btn-bg: var(--sc-accent);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.35rem;
  border: 0; border-radius: var(--sc-r-pill);
  font-family: var(--sc-font-text); font-weight: 650; font-size: var(--sc-t-sm);
  letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; flex: none;
  background: var(--btn-bg); color: var(--sc-accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 2px 8px rgba(232,164,107,.12);
  transition: transform 140ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out),
              filter 160ms var(--sc-ease-out);
}
.btn:hover  { filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 3px 10px rgba(232,164,107,.18); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }

.btn--ghost {
  background: transparent; color: var(--sc-ink);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 60%, transparent); filter: none; }
.nav .btn--login { padding-inline: .95rem; box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
.nav .btn--login:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 75%, transparent); filter: none; }
@media (max-width: 860px) { .nav .btn--login { display: none; } }

/* sageata care porneste la hover */
.btn__go { transition: transform 200ms var(--sc-ease-out); }
.btn:hover .btn__go { transform: translateX(3px); }

/* ============================================================================
   4. Bordura care se plimba
   Un contur slab + un cap gros si aprins cu coada in urma lui.
   ========================================================================= */

@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.edge { position: relative; isolation: isolate; }
.edge::before, .edge::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* conturul de baza, subtire si stins */
.edge::before {
  padding: 1px;
  background: color-mix(in oklab, var(--edge-key, var(--sc-accent)) 17%, transparent);
}
/* capul gros: mai gros (2px), mai aprins, cu coada lunga in urma */
.edge::after {
  padding: 2px;
  background: conic-gradient(from var(--ang),
    transparent 0deg 232deg,
    color-mix(in oklab, var(--edge-key, var(--sc-accent)) 22%, transparent) 286deg,
    color-mix(in oklab, var(--edge-key, var(--sc-accent)) 72%, transparent) 336deg,
    color-mix(in oklab, var(--edge-key, var(--sc-accent)) 96%, white 30%) 352deg,
    transparent 358deg 360deg);
  animation: edgerun 5.4s linear infinite;
  opacity: .9;
}
@keyframes edgerun { to { --ang: 360deg; } }
.edge--slow::after  { animation-duration: 9s; }
.edge--rev::after   { animation-direction: reverse; }

.edge--calm::after { animation: none; opacity: .35; }
.edge--calm:hover::after, .edge--calm:focus-within::after {
  animation: edgerun 5.4s linear infinite; opacity: .9;
}

@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .edge::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .edge::after { animation: none; opacity: .45; }
  .mark .mark__ring { animation: none; }
}

/* ============================================================================
   5. HERO — doua jumatati: punctele in stanga, cuvintele in dreapta
   ========================================================================= */

.hero { --ground: var(--g-hero); --room-key: var(--a-david-lit); min-height: 100svh; }
.hero__stage {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 3.5rem);
  width: min(var(--sc-maxw), 100% - var(--sc-gutter) * 2);
  margin-inline: auto;
  padding-top: var(--bar-h);
}

.qfield { position: relative; height: clamp(14rem, 43svh, 30rem); }
.qfield canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  image-rendering: auto;   /* se deseneaza sub-rezolutie si se intinde; vezi nex.js */
}
/* halo in spatele punctelor: de acolo pare ca vine lumina lor */
.qfield::before {
  content: ""; position: absolute; inset: -6%;
  /* `closest-side`: raza se opreste la cea mai apropiata margine, deci
     gradientul e deja stins cand ajunge la marginea cutiei. Orice alta marime
     (implicit `farthest-corner`, sau procente) lasa culoare pe margine si se
     vede conturul dreptunghiular al cutiei. */
  background:
    radial-gradient(closest-side circle at 42% 42%, rgba(77,140,255,.34), rgba(77,140,255,.12) 44%, transparent 100%),
    radial-gradient(closest-side circle at 60% 62%, rgba(31,182,201,.22), rgba(31,182,201,.07) 46%, transparent 100%);
  transform: scale(calc(1 + var(--q-p, 0) * .18));
  transition: transform 180ms linear;
}

.hero__brand { max-width: 46rem; min-width: 0; }
.hero__brand h1 { max-width: 18ch; font-size: clamp(2rem, 1.1rem + 2.5vw, 3.25rem); }
.hero__copy { max-width: 34rem; }
.hero__copy h2 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); }
.hero__list { display: grid; gap: .75rem; margin: var(--sc-4) 0 0; padding: 0; list-style: none; color: var(--sc-ink-soft); }
.hero__list li { position: relative; padding-left: 1.55rem; }
.hero__list li::before { content: ""; position: absolute; left: 0; top: .52em; width: .58rem; height: .58rem; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 14px rgba(77,140,255,.65); }
.hero__copy > .btn { margin-top: var(--sc-5); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft);
  margin-bottom: var(--sc-4);
}
.eyebrow b { font-weight: 600; color: var(--sc-ink); }
.pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #47e39b; box-shadow: 0 0 0 0 rgba(71,227,155,.6);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(71,227,155,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(71,227,155,0); }
  100% { box-shadow: 0 0 0 0 rgba(71,227,155,0); }
}

.hero h1 { font-size: clamp(2rem, 1.1rem + 2.5vw, 3.25rem); letter-spacing: -.04em; }
.hero h1 em { font-style: normal; color: var(--sc-ink); position: relative; }
.hero h1 em {
  background-image: linear-gradient(90deg, var(--a-david-lit), var(--a-tudor-lit));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: calc(var(--hero-underline, 0) * 100%) .07em;
  transition: background-size 900ms var(--sc-ease-out) 420ms;
}
.hero .lede { margin-top: var(--sc-4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }

/* sirul celor sase, sub copy */
.crew { display: flex; gap: 10px; margin-top: var(--sc-5); flex-wrap: wrap; }
.crew span {
  position: relative;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 12px color-mix(in oklab, var(--c) 70%, transparent);
  animation: breathe 3.4s ease-in-out infinite;
}
.crew span:nth-child(2) { animation-delay: -.5s; }
.crew span:nth-child(3) { animation-delay: -1s; }
.crew span:nth-child(4) { animation-delay: -1.5s; }
.crew span:nth-child(5) { animation-delay: -2s; }
.crew span:nth-child(6) { animation-delay: -2.5s; }
@keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (max-width: 900px) {
  .hero { min-height: 100svh; }
  .hero h1[style*="t-3xl"], .hero .sc-display--lg { font-size: var(--sc-t-xl); }
  .hero__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: var(--sc-4); padding-block: calc(var(--bar-h) + 2rem) 3rem; }
  .qfield { height: min(34svh, 18rem); }
  .hero__brand h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .hero .lede { font-size: var(--sc-t-base); }
}

/* ============================================================================
   6. Povestea — teren violet, replici care se schimba
   ========================================================================= */

.story { --ground: var(--g-story); --room-key: var(--a-lidia-lit); }
.problem__layout { display: grid; grid-template-columns: minmax(16rem, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.problem__intro { position: sticky; top: calc(var(--bar-h) + 2rem); display: grid; gap: var(--sc-4); }
.problem__copy { display: grid; gap: var(--sc-4); max-width: 66ch; color: var(--sc-ink-soft); }
.problem__copy .lede { color: var(--sc-ink); }
.mission { --ground: var(--g-how); --room-key: var(--a-tudor-lit); }
.mission__head { display: grid; gap: var(--sc-4); max-width: 58rem; margin-bottom: var(--sc-6); }
.mission__head h3 { margin-top: var(--sc-3); font-size: var(--sc-t-xl); }
.mission__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.mission-card { --edge-key: var(--a-tudor-lit); position: relative; padding: clamp(1.3rem, 2vw, 1.9rem); border-radius: var(--sc-r-lg); background: linear-gradient(180deg, rgba(6,22,22,.8), rgba(3,12,12,.9)); box-shadow: var(--sc-e1), var(--edge-lit); display: grid; align-content: start; gap: var(--sc-3); }
.mission-card__heading { display: flex; align-items: center; gap: var(--sc-4); min-width: 0; }
.mission-card__heading .step__n { flex: none; margin: 0; font-size: 2rem; }
.mission-card__heading h3 { font-size: var(--sc-t-lg); }
.mission-card p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; }
.mission__note { margin-top: var(--sc-5); max-width: 72ch; color: var(--sc-ink-soft); }
.extra-services { --ground: var(--g-how); --room-key: var(--a-tudor-lit); }
.extra-services__head { display: grid; gap: var(--sc-4); max-width: 58rem; }
.extra-services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: var(--sc-7); }
.extra-services .panel { min-height: 100%; }
.extra-services__note { margin: var(--sc-5) 0 var(--sc-4); max-width: 72ch; color: var(--sc-ink-soft); }
.origin { --ground: var(--g-story); --room-key: var(--a-lidia-lit); }
.origin__inner { display: grid; gap: var(--sc-4); max-width: 64rem; }
.origin__inner h2 { max-width: 22ch; }
.origin__copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); color: var(--sc-ink-soft); max-width: 70ch; }

/* ============================================================================
   7. ECHIPA — varful paginii. Sase busturi in 3D.
   ========================================================================= */

.team { --ground: var(--g-team); --room-key: var(--a-tudor-lit); }
.team__head { display: grid; gap: var(--sc-4); max-width: 46rem; margin-bottom: var(--sc-8); }

.roster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  perspective: 1400px;
}

.agent {
  --a: var(--sc-accent); --a-lit: var(--sc-accent);
  --edge-key: var(--a-lit);
  --rx: 0deg; --ry: 0deg; --lift: 0;
  position: relative;
  border-radius: var(--sc-r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--a) 13%, transparent), transparent 62%),
    linear-gradient(180deg, #0a1020, #060a14);
  box-shadow: var(--sc-e2), var(--edge-lit);
  /* Adancimea se APRINDE la nevoie. Tinute mereu pornite, cele 6 carduri x 7
     planuri faceau 42 de straturi compuse in permanenta si tineau pagina la
     30 de cadre. Masurat: aceeasi sectiune, plata, merge la 60. */
  transform-style: flat;
  translate: 0 calc(var(--lift) * -8px);
  transition: translate 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out),
              box-shadow 420ms var(--sc-ease-out);
  overflow: hidden;
}
.agent.is-live, .agent:focus-within {
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
}
.agent:hover, .agent:focus-within {
  --lift: 1;
  box-shadow: var(--sc-e3), var(--edge-lit),
              0 22px 60px color-mix(in oklab, var(--a) 30%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .agent.is-live { transition: transform 90ms linear, box-shadow 420ms var(--sc-ease-out); }
}

@media (max-width: 980px) { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .roster { grid-template-columns: 1fr; } }

.agent__bust {
  position: relative;
  aspect-ratio: 400 / 440;
  transform-style: flat;
  overflow: hidden;
}
.agent.is-live .agent__bust, .agent:focus-within .agent__bust { transform-style: preserve-3d; }

.agent__bust .lay {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  transition: transform 340ms var(--sc-ease-out);
}
/* Planurile primesc adancime doar cat cardul e viu. In rest stau plate, deci
   nu cer straturi proprii de compunere. */
.agent.is-live .lay--bed,  .agent:focus-within .lay--bed  { transform: translateZ(-46px) scale(1.1); }
.agent.is-live .lay--far,  .agent:focus-within .lay--far  { transform: translateZ(-14px) scale(1.02); }
.agent.is-live .lay--mid,  .agent:focus-within .lay--mid  { transform: translateZ(14px); }
.agent.is-live .lay--near, .agent:focus-within .lay--near { transform: translateZ(40px); }
.agent.is-live .lay--air,  .agent:focus-within .lay--air  { transform: translateZ(62px); }

.lay--bed {
  background:
    radial-gradient(46% 38% at 50% 34%,
      color-mix(in oklab, var(--a-lit) 42%, transparent),
      color-mix(in oklab, var(--a-lit) 14%, transparent) 46%, transparent 78%),
    radial-gradient(96% 64% at 50% 108%,
      color-mix(in oklab, var(--a) 26%, transparent),
      color-mix(in oklab, var(--a) 8%, transparent) 48%, transparent 80%);
  opacity: .8;
}
/* pulberea din aer, in fata bustului */
.lay--air {
  background-image:
    radial-gradient(1.6px 1.6px at 18% 28%, rgba(220,236,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 74% 18%, rgba(220,236,255,.4), transparent),
    radial-gradient(1.4px 1.4px at 62% 72%, color-mix(in oklab, var(--a-lit) 70%, transparent), transparent),
    radial-gradient(1px 1px at 33% 64%, rgba(220,236,255,.35), transparent),
    radial-gradient(1.3px 1.3px at 86% 52%, color-mix(in oklab, var(--a-lit) 55%, transparent), transparent);
  animation: motes 9s ease-in-out infinite alternate;
  pointer-events: none;
}
/* `translate` e proprietate separata de `transform`, deci pulberea se misca
   fara sa suprascrie adancimea pusa mai sus. */
@keyframes motes {
  from { translate: 0 4px;    opacity: .55; }
  to   { translate: -6px -6px; opacity: .95; }
}

/* linia de scanare care trece peste bust */
.agent__scan {
  position: absolute; left: -10%; right: -10%; height: 26%;
  top: -30%;
  background: linear-gradient(180deg, transparent,
    color-mix(in oklab, var(--a-lit) 20%, transparent) 45%,
    color-mix(in oklab, var(--a-lit) 34%, transparent) 52%, transparent);
  opacity: 0; pointer-events: none;
}
.agent.is-live .agent__scan, .agent:focus-within .agent__scan { transform: translateZ(50px); }
.agent:hover .agent__scan, .agent:focus-within .agent__scan {
  animation: scan 1.5s var(--sc-ease-out) .1s 1;
}
@keyframes scan {
  0%   { opacity: 0;  top: -30%; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0;  top: 104%; }
}

/* placuta cu numele */
.agent__plate {
  position: relative;
  display: grid; gap: 3px;
  padding: var(--sc-4) var(--sc-4) calc(var(--sc-4) + 2px);
  border-top: 1px solid var(--sc-hairline);
  background: linear-gradient(180deg, rgba(8,12,22,.4), rgba(4,7,14,.9));
  transition: transform 340ms var(--sc-ease-out);
}
.agent.is-live .agent__plate, .agent:focus-within .agent__plate { transform: translateZ(26px); }
.agent__name {
  font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: .5rem;
}
.agent__code {
  font-family: var(--sc-font-display);
  font-size: .72rem; letter-spacing: .12em; font-weight: 500;
  color: var(--a-lit); opacity: .9;
  padding: 2px 7px; border-radius: 4px;
  background: color-mix(in oklab, var(--a) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--a-lit) 26%, transparent);
}
.agent__role { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.agent__line { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-top: 6px; line-height: 1.5; }

/* ochiul: clipeste singur, face cu ochiul cand treci peste card */
.eye__lid {
  transform-box: fill-box; transform-origin: top center;
  transform: scaleY(0);
  animation: blink 7s steps(1, end) infinite;
}
@keyframes blink {
  0%, 94%   { transform: scaleY(0); }
  95.5%     { transform: scaleY(1); }
  97%       { transform: scaleY(0); }
}
.agent:hover .eye--wink .eye__lid,
.agent:focus-within .eye--wink .eye__lid {
  animation: wink 900ms var(--sc-ease-out) .25s 1;
}
@keyframes wink {
  0%   { transform: scaleY(0); }
  22%  { transform: scaleY(1); }
  58%  { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
.optic { animation: optic 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes optic { 0%, 100% { opacity: .68; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .eye__lid, .optic, .lay--air, .agent__scan, .crew span { animation: none !important; }
  .agent { transform: none !important; }
}

/* ---- fise mari (pagina "cine suntem") ----------------------------------- */

.fise { display: grid; gap: clamp(1rem, 2vw, 1.75rem); margin-top: var(--sc-8); }
.fisa {
  --edge-key: var(--a-lit);
  display: grid; grid-template-columns: 15rem 1fr;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  align-items: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--sc-r-lg);
  background: linear-gradient(120deg, rgba(10,16,30,.8), rgba(4,7,14,.9));
  box-shadow: var(--sc-e1), var(--edge-lit);
}
.fisa--lead { grid-template-columns: 21rem 1fr; }
.fisa--lead .fisa__d { font-size: var(--sc-t-lg); color: var(--sc-ink); line-height: 1.5; }
.fisa--lead .agent__name { font-size: 1.9rem; }
.fisa__bust { border-radius: var(--sc-r-md); }
.fisa__text { display: grid; gap: .35rem; align-content: center; max-width: 62ch; }
.fisa__d { color: var(--sc-ink-soft); margin-top: .6rem; max-width: 56ch; }
.fisa__l { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.fisa__l li {
  position: relative; padding-left: 1.1rem; max-width: 60ch;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.55;
}
.fisa__l li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--a-lit); box-shadow: 0 0 8px color-mix(in oklab, var(--a-lit) 70%, transparent);
}
@media (max-width: 760px) {
  .fisa, .fisa--lead { grid-template-columns: 1fr; }
  .fisa__bust { max-width: 15rem; margin-inline: auto; }
}

/* linii rosii */
.lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1rem,2vw,1.5rem); margin-top: var(--sc-7); }
.line {
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: var(--sc-r-md);
  background: rgba(9, 13, 24, .6);
  box-shadow: inset 0 0 0 1px var(--sc-hairline), var(--edge-lit);
  display: grid; gap: .5rem; align-content: start;
}
.line h3 { font-size: var(--sc-t-base); }
.line p { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.6; }
.line__no {
  font-family: var(--sc-font-display); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: #ff8f7a;
}

/* ============================================================================
   8. Ce facem — grila asimetrica, nu trei carduri egale
   ========================================================================= */

.work { --ground: var(--g-work); --room-key: var(--a-alice-lit); }
.slab {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: var(--sc-7);
}
.panel {
  --edge-key: var(--a-alice-lit);
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  border-radius: var(--sc-r-lg);
  background: linear-gradient(180deg, rgba(16,12,28,.78), rgba(8,6,16,.86));
  box-shadow: var(--sc-e1), var(--edge-lit);
  display: grid; align-content: start; gap: var(--sc-3);
  transition: transform 300ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out);
}
.panel:hover { transform: translateY(-3px); box-shadow: var(--sc-e2), var(--edge-lit); }
.panel--tall { grid-row: span 2; }
.panel h3 { font-size: var(--sc-t-xl); }
.panel p  { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.62; }
.panel ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.panel .ico {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--a-alice) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--a-alice-lit) 24%, transparent);
  margin-bottom: 2px;
}
.panel .ico svg { width: 20px; height: 20px; stroke: var(--a-alice-lit); fill: none; stroke-width: 1.6; }
.panel--wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .slab { grid-template-columns: 1fr; } .panel--tall { grid-row: auto; } }

/* ============================================================================
   9. Cum lucram — sina laterala
   ========================================================================= */

.how { --ground: var(--g-how); --room-key: var(--a-tudor-lit); }
/* scena e inalta cat ecranul: sina sta la mijlocul ei, nu lipita de bara */
.how [data-sc-stage] { display: grid; align-content: center; padding-top: var(--bar-h); }
.rail {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem); align-items: center;
  padding-inline: var(--sc-gutter); padding-block: var(--sc-4);
}
.rail__lead { flex: 0 0 min(26rem, 78vw); display: grid; align-content: center; gap: var(--sc-4); align-self: center; }
.step {
  --edge-key: var(--a-tudor-lit);
  flex: 0 0 min(20rem, 74vw); align-self: center;
  position: relative;
  padding: clamp(1.3rem, 2vw, 1.9rem);
  border-radius: var(--sc-r-lg);
  background: linear-gradient(180deg, rgba(6,22,22,.8), rgba(3,12,12,.9));
  box-shadow: var(--sc-e1), var(--edge-lit);
  display: grid; align-content: start; gap: var(--sc-3);
}
.step__n {
  font-family: var(--sc-font-display); font-size: 2.6rem; font-weight: 600;
  line-height: 1; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--a-tudor-lit) 52%, transparent);
}
.step h3 { font-size: var(--sc-t-lg); }
.step p  { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; }
.rail__end { flex: 0 0 min(17rem, 70vw); display: grid; align-content: center; }

/* ============================================================================
   10. Pret
   ========================================================================= */

.price { --ground: var(--g-price); --room-key: var(--a-vera-lit); }
.price__grid { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 42rem); justify-content: space-between; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-top: var(--sc-7); }
.ticket {
  --edge-key: var(--a-vera-lit);
  position: relative; padding: clamp(1.5rem, 2.6vw, 2.2rem);
  border-radius: var(--sc-r-lg);
  background: linear-gradient(180deg, rgba(24,10,26,.84), rgba(10,5,14,.92));
  box-shadow: var(--sc-e2), var(--edge-lit);
  display: grid; gap: var(--sc-4);
}
.ticket__big {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.8rem, 6vw, 3.9rem); line-height: 1; letter-spacing: -.045em;
}
.ticket__big small { font-size: .3em; font-weight: 500; letter-spacing: 0; color: var(--sc-ink-soft); margin-left: .35rem; }
.check { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.check li { display: grid; grid-template-columns: 18px 1fr; gap: .7rem; align-items: start; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; }
.check li strong { color: var(--sc-ink); font-weight: 600; }
.check svg { width: 16px; height: 16px; margin-top: 3px; stroke: var(--a-vera-lit); fill: none; stroke-width: 2.2; }
.note { display: grid; gap: var(--sc-3); }
.note h3 { font-size: var(--sc-t-lg); margin-top: var(--sc-5); }
.note h3:first-child { margin-top: 0; }
.note p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.66; max-width: 56ch; }
@media (max-width: 840px) { .price__grid { grid-template-columns: 1fr; } }

/* ============================================================================
   11. Intrebari
   ========================================================================= */

.faq { --ground: var(--g-faq); --room-key: var(--a-victor-lit); }
.qa { max-width: 52rem; margin-top: var(--sc-6); display: grid; gap: 0; }
.qa details { border-bottom: 1px solid var(--sc-hairline); }
.qa summary {
  list-style: none; cursor: pointer;
  padding: 1.15rem .2rem; display: flex; gap: 1rem; align-items: baseline;
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500;
  letter-spacing: -.02em;
  transition: color 160ms var(--sc-ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; margin-left: auto; align-self: center;
  width: 11px; height: 11px; flex: none;
  border-right: 1.6px solid var(--a-victor-lit); border-bottom: 1.6px solid var(--a-victor-lit);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 260ms var(--sc-ease-out);
}
.qa details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.qa summary:hover { color: var(--a-victor-lit); }
.qa p { padding: 0 .2rem 1.3rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.68; max-width: 62ch; }
.qa details[open] p { animation: qaIn 420ms var(--sc-ease-out); }
@keyframes qaIn { from { opacity: 0; transform: translateY(-6px); } }

/* ============================================================================
   12. Inchidere + subsol
   ========================================================================= */

.close { --ground: var(--g-close); --room-key: var(--a-david-lit); }
.close__stage { display: grid; align-content: center; justify-items: center; text-align: center; min-height: 72svh; gap: var(--sc-5); }
.close h2 { font-size: var(--sc-t-3xl); max-width: 18ch; }

.foot { border-top: 1px solid var(--sc-hairline); padding-block: var(--sc-7) var(--sc-5); }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: var(--sc-5); }
.foot h4 { font-size: var(--sc-t-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 600; margin-bottom: .8rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot a { color: var(--sc-ink-soft); text-decoration: none; font-size: var(--sc-t-sm); transition: color 160ms var(--sc-ease-out); }
.foot a:hover { color: var(--sc-ink); }
.foot__legal { margin-top: var(--sc-6); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================================
   13. Chat — bara rămâne lipită de baza ecranului
   ============================================================================ */
.chat-open {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--chat-vv-bottom, 0px)); z-index: 63;
  width: min(400px, 100vw); height: 64px; padding: 0; transform: translateX(-50%);
  border: 0; cursor: pointer; color: var(--sc-ink); font: 700 24px/1 var(--sc-font-display); letter-spacing: .08em;
  background: transparent;
}
.chat-open__face { position: absolute; inset-inline: 0; bottom: 0; height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(232,164,107,.58); border-radius: 12px 12px 0 0; background: rgba(24,22,25,.96); box-shadow: 0 -2px 10px rgba(2,5,14,.22), inset 0 1px rgba(255,228,202,.08); transition: background 180ms var(--sc-ease-out), box-shadow 180ms var(--sc-ease-out); }
.chat-open__face svg { width: 32px; height: 32px; fill: none; stroke: var(--sc-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-open:hover .chat-open__face { background: rgba(36,31,33,.98); box-shadow: 0 -3px 12px rgba(2,5,14,.28), inset 0 1px rgba(255,228,202,.1); }
.chat-open:active .chat-open__face { background: rgba(30,27,29,.98); }
.chat-open[aria-expanded="true"] { visibility: hidden; pointer-events: none; }
.chat {
  --chat-height: min(600px, 60vh);
  color-scheme: dark;
  position: fixed; z-index: 64; left: 50%; top: calc(var(--chat-vv-top, 0px) + var(--chat-vv-height, 100dvh) - var(--chat-height));
  width: min(600px, 60vw); height: var(--chat-height); max-height: var(--chat-height); min-height: 0;
  transform: translateX(-50%); display: grid; grid-template-rows: auto minmax(0,1fr) auto; isolation: isolate;
  border: 1px solid rgba(232,164,107,.42); border-bottom: 0; border-radius: 18px 18px 0 0; overflow: hidden;
  background: linear-gradient(180deg, rgba(29,27,31,.98), rgba(15,16,22,.98));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 -3px 18px rgba(2,5,14,.28), inset 0 1px rgba(255,228,202,.08);
  animation: chatIn 240ms var(--sc-ease-out);
}
@keyframes chatIn { from { opacity: 0; translate: 0 14px; } }
.chat[hidden] { display: none; }
.chat__head { display: flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .55rem .8rem; font-size: calc(var(--sc-t-sm) + 3px); font-weight: 600; border-bottom: 1px solid rgba(232,164,107,.28); background: rgba(232,164,107,.08); }
.chat__close { flex: none; margin-left: auto; width: 2.5rem; height: 2.5rem; padding: 0; display: grid; place-items: center; border: 1px solid rgba(190,214,255,.52); border-radius: 10px; background: rgba(7,11,20,.48); color: var(--sc-ink); font: 400 26px/1 var(--sc-font-text); cursor: pointer; }
.chat__log { min-height: 0; overflow-y: auto; padding: 1rem; display: grid; align-content: start; gap: .7rem; }
.chat__m { white-space: pre-line; overflow-wrap: anywhere; font-size: calc(var(--sc-t-sm) + 3px); line-height: 1.52; padding: .7rem .85rem; border: 1px solid rgba(170,160,151,.38); border-radius: 14px; max-width: min(90%, 58ch); }
.chat__m--them { background: rgba(24,36,61,.84); color: var(--sc-ink); justify-self: start; border-bottom-left-radius: 4px; }
.chat__m--me { background: var(--sc-accent); color: var(--sc-accent-ink); justify-self: end; border-color: #885125; border-bottom-right-radius: 4px; }
.chat__m--scrie { opacity: .78; font-style: italic; animation: chatPuls 1.4s ease-in-out infinite; }
@keyframes chatPuls { 0%,100% { opacity: .38; } 50% { opacity: .82; } }
.chat__in { display: flex; gap: .55rem; padding: .65rem; border-top: 1px solid rgba(232,164,107,.28); background: rgba(13,13,18,.9); }
.chat__in input { flex: 1; min-width: 0; min-height: 2.8rem; padding: .55rem .8rem; border-radius: 11px; border: 1px solid rgba(170,160,151,.5); background: rgba(15,16,22,.98); color: var(--sc-ink); font: inherit; font-size: calc(var(--sc-t-sm) + 3px); }
.chat__in input::placeholder { color: #aebbd5; }
.chat__send { min-height: 2.8rem; padding: .5rem .9rem; font-size: calc(var(--sc-t-sm) + 3px); }
@media (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) {
  .chat { --chat-height: min(600px, 90dvh); width: min(500px, 50vw); }
}
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .chat { --chat-height: min(600px, 50dvh); width: min(500px, 70vw); }
}
@media (max-width: 640px) {
  .chat-open { width: 100vw; height: 64px; }
  .chat-open__face { border-radius: 10px 10px 0 0; }
  .chat { --chat-height: min(600px, calc(var(--chat-vv-height, 100dvh) * .5)); width: 100vw; border-radius: 16px 16px 0 0; }
  .chat__log { padding: .75rem; gap: .55rem; }
  .chat__m { max-width: 96%; }
  .chat__in { gap: .45rem; padding: .55rem; }
  .chat__send { padding-inline: .75rem; }
}
@media (min-width: 481px) and (max-width: 640px) and (orientation: portrait) and (pointer: coarse) {
  .chat-open { width: min(400px, 100vw); }
  .chat { width: min(400px, 70vw); }
}
@media (min-width: 641px) and (max-width: 900px) and (orientation: landscape) and (pointer: coarse) {
  .chat-open { width: 100vw; }
  .chat { --chat-height: min(600px, calc(var(--chat-vv-height, 100dvh) * .9)); width: min(500px, 50vw); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .chat-open { width: min(500px, 50vw); }
}
@media (max-width: 900px) {
  .problem__layout { grid-template-columns: 1fr; gap: var(--sc-5); }
  .problem__intro { position: static; }
  .origin__copy { grid-template-columns: 1fr; gap: var(--sc-3); }
}
@media (max-width: 640px) {
  .mission__grid, .extra-services__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-open, .chat { transition: none; animation: none; }
  .chat__m--scrie { animation: none; }
}


/* ============================================================================
   14. Economie: ce nu se vede, nu se misca
   O camera aflata in afara ecranului isi opreste animatiile. Pagina are ~14.000
   px si 18 pete de lumina plus 15 borduri care se plimba: lasate sa mearga
   toate deodata, tineau procesorul ocupat degeaba.
   ========================================================================= */

/* Luminile din camerele nevazute se ascund de tot: `animation-play-state:
   paused` opreste miscarea, dar lasa stratul promovat si compus in continuare.
   `visibility: hidden` il scoate complet din desen si se aprinde instant la loc. */
.room.is-off .room__lights { visibility: hidden; }

.room.is-off .room__lights i,
.room.is-off .edge::after,
.room.is-off .lay--air,
.room.is-off .optic,
.room.is-off .eye__lid,
.room.is-off .agent__scan,
.room.is-off .crew span,
.room.is-off .pulse { animation-play-state: paused; }


/* ============================================================================
   15. Cea mai mare economie: ce e in afara ecranului nu se deseneaza
   Pagina are ~14.900 px. Fara asta, browserul tinea desenate TOATE sectiunile
   deodata: cele sase busturi cu peste 1.000 de forme, cele 18 pete de lumina,
   toate gradientele. Masurat pe statie, stand pe o singura sectiune:
       inainte  ~145% dintr-un nucleu
       dupa      ~12% dintr-un nucleu
   `auto` in contain-intrinsic-size = browserul retine inaltimea reala dupa
   prima desenare, deci bara de derulare nu mai sare.

   NU se pune pe .hero, .story si .how: acolo sunt scene lipite
   (position: sticky), iar izolarea adusa de content-visibility le-ar rupe.
   ========================================================================= */

.team, .work, .price, .faq, .close { content-visibility: auto; }
/* Valori apropiate de inaltimea reala, ca bara de derulare sa nu sara la
   prima parcurgere. Dupa ce o sectiune a fost desenata o data, `auto` face
   browserul sa tina minte marimea adevarata si estimarea nu mai conteaza. */
.team  { contain-intrinsic-size: auto 1650px; }
.work  { contain-intrinsic-size: auto 1250px; }
.price { contain-intrinsic-size: auto 1100px; }
.faq   { contain-intrinsic-size: auto 1000px; }
.close { contain-intrinsic-size: auto 950px; }

/* ============================================================================
   14. Pagini de lucru: comanda, cont, text legal
   Acelasi teren ca restul site-ului. Formularul e singurul loc din tot site-ul
   unde omul da bani, deci: contrast mare, zero animatie care distrage, campuri
   late si etichete citibile. Nimic din efectele de la prezentare aici.
   ========================================================================= */

.lucru { --ground: var(--g-price); --room-key: var(--a-david-lit); min-height: 100svh; }
.lucru .wrap { padding-top: calc(var(--bar-h) + clamp(1.6rem, 4vw, 3rem)); padding-bottom: var(--sc-8); }
.lucru h1 { font-size: clamp(1.9rem, 1.1rem + 2.2vw, 2.9rem); letter-spacing: -.035em; }

.checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; margin-top: var(--sc-6); }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } }

.panou {
  position: relative; padding: clamp(1.3rem, 2.4vw, 2rem);
  border-radius: var(--sc-r-lg);
  background: linear-gradient(180deg, rgba(18,22,40,.86), rgba(8,11,22,.94));
  box-shadow: var(--sc-e2), var(--edge-lit);
  border: 1px solid var(--sc-hairline);
}
.panou > h2 { font-size: var(--sc-t-lg); margin-bottom: var(--sc-4); }
.panou + .panou { margin-top: var(--sc-4); }
.panou--lipit { position: sticky; top: calc(var(--bar-h) + 1rem); }

.camp { display: grid; gap: .4rem; margin-bottom: var(--sc-4); }
.camp:last-child { margin-bottom: 0; }
.camp > label { font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink); }
.camp > label .op { font-weight: 400; color: var(--sc-ink-soft); }
.perechi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-3); }
@media (max-width: 560px) { .perechi { grid-template-columns: 1fr; } }

.camp input, .camp select, .camp textarea {
  width: 100%; font: inherit; font-size: var(--sc-t-base);
  color: var(--sc-ink); background: #0a0e1b;
  border: 1.5px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md);
  padding: .68rem .8rem;
  transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.camp textarea { resize: vertical; min-height: 5.2rem; line-height: 1.55; }
.camp select {
  appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--sc-ink-soft) 50%),
                    linear-gradient(135deg, var(--sc-ink-soft) 50%, transparent 50%);
  background-position: right 1.05rem center, right .8rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.camp input::placeholder, .camp textarea::placeholder { color: #5d6a8a; }
.camp input:focus, .camp select:focus, .camp textarea:focus {
  outline: none; border-color: var(--sc-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--sc-accent) 18%, transparent);
}
.camp input[aria-invalid="true"], .camp select[aria-invalid="true"] { border-color: var(--a-alice); }

.ajutor { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.55; }
.ajutor.bun { color: #5fd6a4; }
.ajutor.rau { color: var(--a-alice-lit); }

.bifa { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.bifa input { width: 18px; height: 18px; accent-color: var(--sc-accent); margin-top: .15rem; }
.bifa label { font-size: var(--sc-t-sm); font-weight: 400; color: var(--sc-ink-soft); line-height: 1.5; }
.bifa a { color: var(--sc-accent); text-underline-offset: 3px; }

/* --- rezumatul de plata --------------------------------------------------- */
.suma { display: grid; gap: .55rem; padding: var(--sc-4) 0; border-block: 1px solid var(--sc-hairline); margin-block: var(--sc-4); }
.suma .rand { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.suma .rand b { color: var(--sc-ink); font-weight: 500; }
.suma .rand--total { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); color: var(--sc-ink); font-weight: 600; letter-spacing: -.02em; padding-top: .5rem; border-top: 1px solid var(--sc-hairline); margin-top: .35rem; }
.suma .rand--total b { font-weight: 600; }

/* --- butoanele de plata --------------------------------------------------- */
#plata { display: grid; gap: .6rem; margin-top: var(--sc-4); }
#plata .apple-pay-button { width: 100%; height: 48px; border-radius: 999px; cursor: pointer;
  -webkit-appearance: -apple-pay-button; --apple-pay-button-type: buy; --apple-pay-button-style: white; }
#gpay-btn > * { width: 100% !important; }
.plata-nota { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-align: center; line-height: 1.55; }
.plata-sau { display: flex; align-items: center; gap: .8rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: .2rem 0; }
.plata-sau::before, .plata-sau::after { content: ""; flex: 1; height: 1px; background: var(--sc-hairline); }

.alerta { border-radius: var(--sc-r-md); padding: .8rem 1rem; font-size: var(--sc-t-sm); line-height: 1.55; border: 1.5px solid; margin-bottom: var(--sc-4); }
.alerta--rau { border-color: color-mix(in oklab, var(--a-alice) 60%, transparent); background: color-mix(in oklab, var(--a-alice) 12%, transparent); color: var(--a-alice-lit); }
.alerta--bun { border-color: color-mix(in oklab, #2fbf82 60%, transparent); background: color-mix(in oklab, #2fbf82 12%, transparent); color: #7fe3b8; }

.se-incarca { opacity: .5; pointer-events: none; }

/* --- text legal ----------------------------------------------------------- */
.text-legal { max-width: 46rem; }
.text-legal h2 { font-size: var(--sc-t-xl); margin-top: var(--sc-6); }
.text-legal h2:first-of-type { margin-top: var(--sc-5); }
.text-legal p, .text-legal li { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.68; margin-top: var(--sc-3); }
.text-legal ul { padding-left: 1.2rem; }
.text-legal a { color: var(--sc-accent); text-underline-offset: 3px; }
.text-legal strong { color: var(--sc-ink); }

/* `hidden` trebuie sa bata orice `display` pus de noi: `.camp{display:grid}` il ignora
   altfel si campul de cod TVA ramane pe ecran la clientii din Romania. */
[hidden] { display: none !important; }

/* comanda: aliniere, ordinea platilor, lumini */
.perechi { align-items: start; margin-bottom: var(--sc-4); }
.perechi .camp { margin-bottom: 0; }
#plata { display: flex; flex-direction: column; }
#plata .pay-grup { display: contents; }
#gpay-btn { order: 1; }
#plata .apple-pay-button { order: 2; }
#plata .pay-card { order: 3; }
#plata .pay-paypal { order: 4; }
.checkout { position: relative; isolation: isolate; }
.checkout::before, .checkout::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px); }
.checkout::before { width: 32rem; height: 24rem; left: -10rem; top: -6rem; background: radial-gradient(closest-side, rgba(255,181,71,.28), transparent); }
.checkout::after { width: 34rem; height: 26rem; right: -8rem; top: 10rem; background: radial-gradient(closest-side, rgba(96,165,250,.26), transparent); }
.checkout .panou { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 60px rgba(96,165,250,.14); }

/* hero: oferta de urgenta */
.urgent { display: grid; gap: .2rem; margin: var(--sc-4) 0 var(--sc-3); padding: .9rem 1.1rem; border-radius: 16px; text-decoration: none; color: var(--sc-ink);
  background: linear-gradient(135deg, rgba(255,181,71,.22), rgba(255,120,60,.12)); border: 1px solid rgba(255,181,71,.55);
  box-shadow: 0 0 34px rgba(255,181,71,.25); transition: transform .18s, box-shadow .18s; }
.urgent:hover { transform: translateY(-2px); box-shadow: 0 0 46px rgba(255,181,71,.4); }
.urgent strong { font-size: 1.15rem; }
.urgent span:last-child { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.urgent__tag { justify-self: start; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1a1205; background: #ffb547; padding: .15rem .55rem; border-radius: 999px; }