/* WebGenArt — sistem vizual
   Derivat din logo-ul original: fundal nocturn și spectrul cyan → violet → magenta.
   Suprafețe curate, colțuri rotunjite consecvente, margini fine. Culoarea e accent,
   nu decor: butonul principal, starea activă, etichetele și lumina din spatele lucrărilor. */

/* Fonturile, găzduite pe site (fără cereri către Google): Sora pentru titluri, Manrope pentru text.
   Fonturi variabile, licența SIL Open Font License 1.1 (assets/fonts/OFL-*.txt). Setul „latin-ext” are ă, ș, ț
   și se descarcă doar când pagina le conține. */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/sora-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/sora-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --void: #050610;         /* fundalul principal */
  --night: #10152b;        /* panouri */
  --night-2: #171d3a;      /* panouri ridicate, câmpuri */
  --text: #eef1ff;         /* alb rece */
  --text-2: #aab1d2;       /* text secundar */
  --text-3: #8189ad;       /* etichete mici */
  --line: rgba(200, 210, 255, .10);       /* margini fine */
  --line-2: rgba(200, 210, 255, .20);
  --field: #6d76a3;        /* chenare de câmpuri, minimum 3:1 */
  --cyan: #00e5ff;
  --violet: #5725ff;
  --magenta: #f12dff;
  --spectrum: linear-gradient(100deg, var(--cyan) 0%, var(--violet) 52%, var(--magenta) 100%);
  --ok: #3ee6a8;
  --bad: #ff6b8b;
  --warn: #ffd166;

  --f-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --f-text: "Manrope", "Segoe UI", system-ui, sans-serif;

  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.375rem;
  --t-xl: 1.75rem;
  --t-2xl: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  --t-3xl: clamp(2.4rem, 1.5rem + 3.4vw, 4.3rem);

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
  --gutter: clamp(1rem, .5rem + 2.2vw, 2.75rem);
  --max: 80rem;
  --focus: 0 0 0 2px var(--void), 0 0 0 4px var(--cyan);

  /* Suprafețe */
  --surface: #0b0f20;                       /* card */
  --surface-2: #11162b;                     /* card ridicat, câmpuri */
  --glass: rgba(14, 18, 38, .72);           /* antet, etichete peste imagini */
  --sheen: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%);
  /* Raze */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;
  /* Umbre */
  --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28);
  --sh-2: 0 2px 6px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.45);
  --sh-3: 0 40px 100px rgba(0,0,0,.6);
  /* Mișcare */
  --ease: cubic-bezier(.25, .6, .3, 1);   /* ieșire lină, fără smucitură la pornire */
  --t-fast: .25s; --t-mid: .5s; --t-slow: 1s;
}

/* ---------- Bază ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--f-text);
  font-size: var(--t-md);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: break-word; }
p, ul, ol, dl, figure { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--cyan); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }   /* outline, nu umbră: nu intră în conflict cu umbrele componentelor */
.choice input:focus-visible { outline: none; }
::selection { background: var(--violet); color: #fff; }
code { font-size: .875em; background: var(--night-2); padding: .05em .35em; border-radius: 5px; overflow-wrap: anywhere; }
b, strong { font-weight: 750; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s4); top: -4rem; z-index: 60; background: var(--text); color: var(--void); padding: var(--s2) var(--s4); font-weight: 700; text-decoration: none; }
.skip:focus { top: var(--s4); }

/* ---------- Tipografie ---------- */
.h-display { font-size: var(--t-3xl); font-weight: 650; letter-spacing: -.035em; line-height: 1.04; }
.h-section { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -.03em; max-width: 22ch; }
.h-item { font-size: var(--t-xl); font-weight: 650; letter-spacing: -.02em; }
.h-small { font-size: var(--t-lg); font-weight: 650; line-height: 1.2; }
.lede { font-size: clamp(1.0625rem, .98rem + .4vw, 1.25rem); line-height: 1.6; max-width: 36em; color: var(--text-2); }
.prose { max-width: 40em; color: var(--text-2); }
.prose > * + * { margin-top: var(--s4); }
.small { font-size: var(--t-sm); line-height: 1.6; }
.muted { color: var(--text-2); }
.label { font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; color: var(--text-3); }
.stack-sm > * + * { margin-top: var(--s3); }
.mt-s5 { margin-top: var(--s5); }
.mt-s6 { margin-top: var(--s6); }
.mt-s7 { margin-top: var(--s7); }
.spectrum-text { background: linear-gradient(100deg, var(--cyan), #a08cff 52%, var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }   /* violet mai deschis: min. 3:1 pe fundal, ca text mare */

/* Marcaj de etichetă: o linie scurtă în culoarea secțiunii (fără stele decorative) */
.star { display: inline-block; width: 1.1em; height: 2px; flex: none; border-radius: 2px; background: var(--cyan); }

/* ---------- Logo ---------- */
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--text); perspective: 30rem; }
.brand:hover { color: var(--text); }
/* Profunzime 3D discretă: o muchie luminoasă sus, „grosimea” întunecată dedesubt și o lumină difuză în culorile brandului.
   Imaginea originală rămâne neschimbată; adâncimea vine doar din umbre și din perspectivă. */
.brand__logo { position: relative; display: block; flex: none; width: 4.1rem; }   /* fără preserve-3d: în Firefox, stratul de reflexie (mască + amestec) deplasa logo-ul */
.brand__mark { width: 100%; height: auto; transform: translateZ(0);
  filter: drop-shadow(0 -.5px 0 rgba(255, 255, 255, .35)) drop-shadow(0 1.5px 0 rgba(36, 14, 92, .95)) drop-shadow(0 4px 7px rgba(87, 37, 255, .32));
  transition: transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); }
/* Reflexia: o bandă de lumină care trece peste logo, decupată exact pe forma lui (doar transform, fără repictare) */
.brand__shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: overlay;
  -webkit-mask: url(../brand/logo-mark.webp) center / contain no-repeat; mask: url(../brand/logo-mark.webp) center / contain no-repeat; }
.brand__shine::before { content: ""; position: absolute; inset: -10% auto -10% 0; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .9) 50%, transparent); transform: translateX(-130%); }
.brand__name { font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em;
  /* aceeași paletă ca textul din logo: „WebGen” argintiu-perlat, „Art” albastru → violet → magenta */
  background: linear-gradient(180deg, #f4f1ea 0%, #e6dcff 55%, #cfd8f2 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(36, 14, 92, .9)) drop-shadow(0 2px 6px rgba(87, 37, 255, .22)); }
.brand__art { background: linear-gradient(100deg, #3d8bff 0%, #8f6bff 30%, #c25bff 55%, #f12dff 75%, #8f6bff 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 1.26s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  /* o oscilație lentă în spațiu, nu o rotație: logo-ul „respiră”, literele rămân drepte și lizibile */
  .brand__logo { animation: logo-sway 9s ease-in-out infinite alternate; }
  .brand__shine::before { animation: logo-shine 10s 2.1s ease-in-out infinite; }
}
@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand__mark { transform: translateY(-1px) scale(1.06);
    filter: drop-shadow(0 -.5px 0 rgba(255, 255, 255, .45)) drop-shadow(0 2px 0 rgba(36, 14, 92, .95)) drop-shadow(0 8px 14px rgba(87, 37, 255, .5)) drop-shadow(0 0 10px rgba(0, 229, 255, .25)); }
  .brand:hover .brand__art { background-position: 100% 0; }
}
@keyframes logo-sway { from { transform: rotateX(3deg) rotateY(-9deg); } to { transform: rotateX(-2deg) rotateY(9deg); } }
@keyframes logo-shine { 0% { transform: translateX(-130%); } 14%, 100% { transform: translateX(260%); } }
@media (forced-colors: active) { .brand__name, .brand__art { color: CanvasText; background: none; filter: none; } .brand__shine { display: none; } }

/* ---------- Grilă de pagină ---------- */
.page { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; position: relative; }
.folio {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s5);
  padding-block: var(--s9);
  border-top: 1px solid var(--line);
}
.folio--flush { border-top: 0; padding-top: 0; }
.folio > .margin { grid-column: 1 / span 3; }
.folio > .body { grid-column: 4 / -1; min-width: 0; }
.folio > .full { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 60rem) {
  .folio { padding-block: var(--s8); }
  .folio > .margin, .folio > .body { grid-column: 1 / -1; }
  .folio > .margin { margin-bottom: var(--s5); }
}
.folio--wide > .margin, .folio--wide > .body { grid-column: 1 / -1; }
.folio--wide > .margin { margin-bottom: var(--s5); }

.margin__note { font-size: var(--t-sm); line-height: 1.55; color: var(--text-2); max-width: 17rem; }
.margin__note strong { display: flex; align-items: center; gap: .55rem; color: var(--text); font-family: var(--f-display); font-weight: 650; font-size: var(--t-sm); margin-bottom: var(--s2); }
.margin__note strong::before { content: ""; width: .9rem; height: 2px; flex: none; border-radius: 2px; background: var(--cyan); }
.margin__note p + p { margin-top: var(--s2); }
.folio--wide .margin__note { max-width: 40rem; }

/* ---------- Butoane ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .75rem 1.45rem;
  font: inherit; font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600; line-height: 1.2; letter-spacing: -.005em;
  text-decoration: none; color: var(--text);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-mid) var(--ease), transform var(--t-fast) ease, color var(--t-fast) ease;
}
.btn:hover { color: var(--text); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .32); }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* Acțiunea principală: violetul din logo, cu o lumină fină doar la hover */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #6b42ff, var(--violet)); border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px rgba(87, 37, 255, .35); }
.btn--primary:hover { color: #fff; background: linear-gradient(180deg, #7752ff, #5e2dff); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 10px 30px rgba(87, 37, 255, .5), 0 0 0 1px rgba(0, 229, 255, .35); }
.btn--sm { min-height: 2.5rem; padding: .45rem 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.go {
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em;
  text-decoration-color: rgba(0, 229, 255, .55); color: var(--text);
  background: linear-gradient(var(--cyan), var(--cyan)) 0 100% / 0 1px no-repeat;   /* linia crește la hover */
  transition: color var(--t-fast) ease, background-size var(--t-mid) var(--ease), text-decoration-color var(--t-fast) ease;
}
.go:hover { color: var(--cyan); background-size: 100% 1px; text-decoration-color: transparent; }
.go[target="_blank"]::after { content: " ↗"; font-weight: 400; }

/* ---------- Antet ---------- */
.masthead { position: sticky; top: 0; z-index: 30; background: rgba(5, 6, 16, .72); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--line);
  transition: background-color var(--t-mid) ease, box-shadow var(--t-mid) ease, border-color var(--t-mid) ease; }
.masthead__bar { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; min-height: 4.25rem; display: flex; align-items: center; gap: var(--s5); }
.nav { display: flex; align-items: center; flex: 1; gap: var(--s5); }
.nav__list { list-style: none; padding: 0; margin: 0 0 0 auto; display: flex; gap: var(--s5); }
.nav__list a { font-family: var(--f-display); font-size: var(--t-sm); font-weight: 500; text-decoration: none; padding-block: .4rem; color: var(--text-2); position: relative; transition: color var(--t-fast) ease; }
.nav__list a:hover { color: var(--text); }
/* Selectorul de limbă: control segmentat, limba curentă evidențiată */
.lang { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.lang > * { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 2.1rem; padding: 0 .6rem; border-radius: var(--r-pill);
  font-family: var(--f-display); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-decoration: none;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease; }
.lang__on { background: rgba(255, 255, 255, .14); color: var(--text); }
.lang__alt { color: var(--text-2); transition: color var(--t-fast) ease, background-color var(--t-fast) ease; }
.lang__alt:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.nav__list a[aria-current="page"] { color: var(--text); }
.nav__list a[aria-current="page"]::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -.15rem; height: 2px; border-radius: 2px; background: var(--spectrum); }
.nav__end { display: flex; align-items: center; gap: var(--s4); }
.menu-btn { display: none; margin-left: auto; font: inherit; font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm); background: rgba(255, 255, 255, .06); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: .4rem 1rem; min-height: 2.75rem; cursor: pointer; }
@media (max-width: 68rem) {
  .menu-btn { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s3) var(--gutter) var(--s6); background: rgba(5, 6, 16, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); max-height: calc(100dvh - 4.5rem); overflow-y: auto; }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; gap: 0; margin: 0; }
  .nav__list a { display: block; padding: var(--s4) 0; font-size: var(--t-lg); color: var(--text); border-bottom: 1px solid var(--line); }
  .nav__list a[aria-current="page"]::after { left: auto; right: 0; top: 50%; bottom: auto; width: .5rem; height: .5rem; border-radius: 50%; transform: translateY(-50%); background: var(--cyan); }
  .nav__end { justify-content: space-between; padding-top: var(--s5); }
}
@media (min-width: 68.01rem) { .menu-btn { display: none; } }

/* ---------- Lumina de scenă ---------- */
.scene { position: relative; isolation: isolate; overflow-x: clip; }
.scene::before {
  content: ""; position: absolute; inset: -10% -20% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 55% at 12% 30%, rgba(0, 229, 255, .13), transparent 70%),
    radial-gradient(40% 60% at 88% 35%, rgba(241, 45, 255, .12), transparent 70%),
    radial-gradient(50% 50% at 55% 75%, rgba(87, 37, 255, .16), transparent 72%);
}

/* ---------- Ramă pentru capturi: colțuri rotunjite, margine fină, lumină la hover ---------- */
.frame {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  text-decoration: none; color: var(--text);
  transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.frame > img { display: block; width: 100%; height: 100%; background: var(--surface); object-fit: cover; object-position: top left; transition: transform .84s var(--ease); }
a.frame:hover { border-color: rgba(255, 255, 255, .3); box-shadow: var(--sh-2), 0 0 0 1px rgba(0, 229, 255, .12); }
a.frame:hover > img { transform: scale(1.025); }
.chip {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 1;
  font-family: var(--f-display); font-size: .75rem; font-weight: 600; line-height: 1.25;
  background: var(--glass); color: var(--text); border: 1px solid rgba(255, 255, 255, .14);
  padding: .32rem .7rem; border-radius: var(--r-pill); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-mid) var(--ease);
}
a.frame:hover .chip { border-color: rgba(0, 229, 255, .6); transform: translateY(-3px); }

/* ---------- Prezentarea inițială ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: center; padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem) var(--s7); }
.hero__logo { width: min(100%, 21rem); }
.hero__title { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.75rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.03; }
.hero .lede { margin-top: var(--s5); }
.hero .btn-row { margin-top: var(--s6); }
@media (max-width: 64rem) { .hero { grid-template-columns: 1fr; gap: var(--s7); } .hero__brand { width: min(80%, 18rem); } }

/* Scena: o lucrare mare cu varianta ei de telefon și trei lucrări aliniate dedesubt */
.stage { position: relative; isolation: isolate; display: grid; gap: var(--s4); padding-right: 11%; }
.stage::before { content: ""; position: absolute; inset: -15% -10% -12% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side at 55% 42%, rgba(87, 37, 255, .3), transparent), radial-gradient(closest-side at 80% 80%, rgba(241, 45, 255, .12), transparent 60%), radial-gradient(closest-side at 25% 65%, rgba(0, 229, 255, .1), transparent 60%); }
.stage__main { aspect-ratio: 1200 / 683; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.stage__phone { position: absolute; right: 0; top: 14%; width: 20%; z-index: 2; }
/* Legenda lucrărilor: tipul (în culoarea serviciului) și numele */
.stage__kind { display: block; font-family: var(--f-display); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.stage__name { display: block; margin-top: .2rem; font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
.stage__over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(5, 6, 16, .82) 62%); pointer-events: none; }
.stage__over .stage__name { font-size: var(--t-md); }
.stage__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
.stage__item { display: block; min-width: 0; text-decoration: none; color: var(--text); border-radius: var(--r-md); }
.stage__item[data-kind="copy"] .stage__kind { color: #a08cff; }
.stage__item[data-kind="date"] .stage__kind { color: #d08bff; }
.stage__item[data-kind="qa"] .stage__kind { color: var(--magenta); }
.stage__thumb { aspect-ratio: 16 / 10; }
.stage__cap { display: block; padding: .7rem .15rem 0; }

.stage__item:hover .stage__thumb { border-color: rgba(255, 255, 255, .3); box-shadow: var(--sh-2); }
.stage__item:hover .stage__thumb > img { transform: scale(1.04); }
.stage__item:hover .stage__name { color: #fff; }
.stage__item .stage__name { transition: color var(--t-fast) ease; }
@media (prefers-reduced-motion: no-preference) {
  .js .stage__main, .js .stage__phone, .js .stage__item { animation: frame-in 1.12s var(--ease) backwards; }   /* „backwards”: după intrare, elementul e liber pentru hover */
  .js .stage__main { animation-delay: .21s; }
  .js .stage__phone { animation-delay: .49s; }
  .js .stage__item:nth-child(1) { animation-delay: .63s; }
  .js .stage__item:nth-child(2) { animation-delay: .74s; }
  .js .stage__item:nth-child(3) { animation-delay: .85s; }
}
@keyframes frame-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 40rem) {
  .stage { padding-right: 0; gap: var(--s3); }
  .stage__phone { display: none; }
  /* Pe telefon, rândul devine o șină glisabilă, cu imagini destul de mari ca să se înțeleagă */
  .stage__row { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s2); scroll-padding-inline: var(--gutter); }
  .stage__row::-webkit-scrollbar { display: none; }
  .stage__item { flex: 0 0 72%; scroll-snap-align: start; }
  .stage__over { padding: 1.75rem .9rem .7rem; }
  .stage__over .stage__name { font-size: var(--t-sm); }
}

/* Șina de dovezi: cele patru servicii și ce puteți verifica pentru fiecare */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--sheen), rgba(11, 15, 32, .8); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s8); box-shadow: var(--sh-1); }
.proof a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s4); text-decoration: none; color: var(--text); border-right: 1px solid var(--line); transition: background-color .28s ease; }
.proof a:last-child { border-right: 0; }
.proof a:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.proof img { width: 4.5rem; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: var(--r-xs); border: 1px solid var(--line-2); transition: transform var(--t-mid) var(--ease); }
.proof b { display: block; font-family: var(--f-display); font-weight: 650; font-size: var(--t-sm); line-height: 1.25; }
.proof span { display: block; font-size: var(--t-xs); color: var(--text-2); line-height: 1.35; margin-top: .15rem; }
.proof a:hover span { color: var(--cyan); }
@media (max-width: 64rem) { .proof { grid-template-columns: 1fr 1fr; } .proof a:nth-child(2) { border-right: 0; } .proof a:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 30rem) { .proof { grid-template-columns: 1fr; } .proof a { border-right: 0; border-bottom: 1px solid var(--line); } .proof a:last-child { border-bottom: 0; } }

/* ---------- Lucrări: selecție + index ---------- */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: end; margin-bottom: var(--s6); }
.sec-head .lede { margin-top: var(--s4); }
.count { font-family: var(--f-display); font-weight: 700; font-size: clamp(3.5rem, 2rem + 5vw, 6.5rem); line-height: .85; letter-spacing: -.05em; text-align: right; }
.count small { display: block; font-size: var(--t-sm); font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--text-2); margin-top: var(--s3); font-family: var(--f-text); }
@media (max-width: 44rem) { .sec-head { grid-template-columns: 1fr; } .count { text-align: left; } }

.feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: var(--s4); margin-bottom: var(--s7); }
.feature .frame:first-child { grid-row: span 2; aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
.feature .frame:not(:first-child) { min-height: 0; }
.feature .chip { font-size: var(--t-xs); bottom: 1rem; left: 1rem; }
@media (max-width: 52rem) { .feature { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .feature .frame:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; } }

/* Carduri de lucrări: imagine mare, etichete, titlu, o frază, o singură acțiune */
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--s5); }
.card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--sheen), var(--surface); border: 1px solid var(--line);
  overflow: hidden; box-shadow: var(--sh-1); transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.card:hover, .card:focus-within { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .84s var(--ease), filter var(--t-mid) ease; filter: brightness(.94); }
.card:hover .card__media img { transform: scale(1.03); filter: none; }
.card__body { display: flex; flex-direction: column; gap: var(--s3); flex: 1; padding: var(--s5); }
.card__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.card__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }  /* tot cardul deschide descrierea */
.card__text { font-size: var(--t-sm); line-height: 1.55; color: var(--text-2); }
.card__cta { position: relative; z-index: 1; margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm); color: var(--text); text-decoration: none;
  padding: .5rem .95rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2);
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease; }
.card__cta::after { content: "→"; transition: transform var(--t-fast) ease; }
.card__cta[target="_blank"]::after { content: "↗"; }
.card:hover .card__cta { background: rgba(87, 37, 255, .28); border-color: rgba(143, 116, 255, .7); }
.card__cta:hover { color: #fff; }
.card:hover .card__cta::after { transform: translateX(2px); }
.card .status { position: relative; z-index: 1; }

/* Etichete de statut */
.status { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; line-height: 1.3; padding: .22rem .6rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); border: 1px solid transparent; color: var(--text-2); }
.status--real { background: rgba(255, 209, 102, .1); color: var(--warn); }
.status--own { background: rgba(62, 230, 168, .1); color: var(--ok); }
.status--cat { background: rgba(0, 229, 255, .1); color: var(--cyan); }
.work-meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }

/* Filtru */
.filter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.filter[hidden] { display: none; }
.filter button { font: inherit; font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm); min-height: 2.6rem; padding: .4rem 1.05rem; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2); cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.filter button:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.filter button[aria-pressed="true"] { background: var(--text); color: var(--void); }
@media (max-width: 40rem) { .filter { border-radius: var(--r-lg); } }
.filter button span { opacity: .7; font-weight: 500; }
.filter-count { font-size: var(--t-sm); color: var(--text-3); margin-block: var(--s4); }

/* ---------- Servicii: patru compoziții diferite, același sistem ---------- */
.svc-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: center; padding-block: var(--s8); border-top: 1px solid var(--line); }
.svc-row:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.svc-row:nth-of-type(even) .svc-row__text { order: 2; }
.svc-row__idx { display: flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; color: var(--cyan); margin-bottom: var(--s4); }
.svc-row h3 { font-size: var(--t-2xl); letter-spacing: -.03em; }
.svc-row h3 a { text-decoration: none; }
.svc-row dl { margin-top: var(--s5); display: grid; gap: var(--s3); }
.svc-row dt { font-family: var(--f-display); font-size: var(--t-xs); font-weight: 600; color: var(--text-3); }
.svc-row dd { margin: 0; font-size: var(--t-sm); color: var(--text-2); line-height: 1.6; }
.svc-row__foot { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; margin-top: var(--s5); }
.price-tag { font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm); padding: .3rem .85rem; border-radius: var(--r-pill); background: rgba(87, 37, 255, .22); border: 1px solid rgba(87, 37, 255, .6); }
@media (max-width: 56rem) { .svc-row, .svc-row:nth-of-type(even) { grid-template-columns: 1fr; gap: var(--s6); } .svc-row:nth-of-type(even) .svc-row__text { order: 0; } }

/* Dovezi vizuale ale serviciilor */
.duo { position: relative; }
.duo .frame:first-child { width: 84%; aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
.duo .phone { position: absolute; right: 0; bottom: -8%; width: 23%; }
.quote-card { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); background: var(--sheen), var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); position: relative; overflow: hidden; box-shadow: var(--sh-2); }
.quote-card::before { content: ""; position: absolute; left: clamp(1.5rem, 1rem + 2vw, 2.75rem); top: 0; width: 3rem; height: 2px; border-radius: 2px; background: var(--spectrum); }
.quote-card .label { display: block; margin-bottom: var(--s3); }
.quote-card blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(1.4rem, 1rem + 1.5vw, 2.1rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.quote-card p { margin-top: var(--s4); color: var(--text-2); font-size: var(--t-sm); }
.mini-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-xs); font-variant-numeric: tabular-nums; background: var(--sheen), var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table caption { text-align: left; padding: var(--s3) var(--s2); color: var(--text-3); font-weight: 600; font-size: var(--t-xs); caption-side: top; }
.mini-table th, .mini-table td { padding: .55rem .8rem; border-bottom: 1px solid var(--line); text-align: left; }
.mini-table th { color: var(--text-3); font-weight: 600; }
.mini-table .was { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--bad); }
.mini-table .now { color: var(--ok); font-weight: 700; }
.mini-table .flag { color: var(--warn); font-weight: 700; }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ba figure { margin: 0; }
.ba .frame { aspect-ratio: 16 / 10; border-radius: var(--r-md); }
.ba figcaption { font-size: var(--t-xs); color: var(--text-2); margin-top: var(--s2); font-weight: 600; }

/* ---------- Pași ---------- */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); position: relative; }
.steps li { counter-increment: step; padding-top: var(--s5); position: relative; }
.steps li::before { content: "0" counter(step); display: block; font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm); color: var(--cyan); margin-bottom: var(--s3); }
.steps li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--cyan), rgba(87,37,255,.5) 60%, transparent); }
.steps h3 { font-size: var(--t-md); font-weight: 650; margin-bottom: var(--s2); }
.steps p { font-size: var(--t-sm); line-height: 1.6; color: var(--text-2); }
@media (max-width: 60rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s6); } }
@media (max-width: 34rem) { .steps { grid-template-columns: 1fr; } }
.steps--compact { grid-template-columns: 1fr; gap: var(--s4); }
.steps--compact li { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: var(--s3); padding-top: var(--s3); }
.steps--compact li::before { grid-row: span 2; margin: 0; }
.steps--compact h3 { font-size: var(--t-sm); margin-bottom: var(--s1); }

/* ---------- Încredere ---------- */
.ledger-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.ledger-pair ul { list-style: none; padding: 0; }
.ledger-pair li { display: flex; gap: .7rem; align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.5; color: var(--text-2); }
.ledger-pair li::before { content: ""; width: .45rem; height: .45rem; flex: none; border-radius: 50%; background: var(--cyan); transform: translateY(-.1rem); }
.ledger-pair .no li { color: var(--text-3); }
.ledger-pair .no li::before { background: none; clip-path: none; width: .65rem; height: 2px; background: var(--text-3); transform: translateY(-.2rem); }
.ledger-pair h3 { font-size: var(--t-lg); margin-bottom: var(--s3); }
@media (max-width: 44rem) { .ledger-pair { grid-template-columns: 1fr; } }

/* ---------- Banda finală: un card mare de ofertă ---------- */
.closing { padding-block: var(--s8) var(--s9); }
.closing .page { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--s7); align-items: center;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem); border-radius: var(--r-xl); border: 1px solid var(--line-2); background: var(--sheen), var(--surface); box-shadow: var(--sh-3); }
.closing .page::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(40% 90% at 8% 50%, rgba(0, 229, 255, .14), transparent 70%),
  radial-gradient(45% 90% at 95% 0%, rgba(241, 45, 255, .16), transparent 70%),
  radial-gradient(60% 100% at 50% 100%, rgba(87, 37, 255, .22), transparent 70%); }
.closing h2 { font-size: var(--t-2xl); letter-spacing: -.035em; max-width: 18ch; }
.closing p { font-size: var(--t-sm); color: var(--text-2); margin-bottom: var(--s5); }
.closing a:not(.btn) { color: var(--text); }
.closing .page:has(> .closing__mark) { grid-template-columns: auto minmax(0, 1fr) minmax(0, 22rem); }   /* doar prima pagină are monograma */
@media (max-width: 52rem) { .closing .page, .closing .page:has(> .closing__mark) { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- Subsol ---------- */
.colophon { border-top: 1px solid var(--line); padding-block: var(--s8) var(--s6); background: linear-gradient(180deg, transparent, rgba(16,21,43,.65)); }
.colophon a { color: var(--text-2); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color var(--t-fast) ease, background-size var(--t-mid) var(--ease); }
.colophon a:hover { color: var(--text); background-size: 100% 1px; }
.colophon .brand { background: none; }
.colophon__grid, .colophon__fine { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.colophon__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--s6); }
.colophon__logo { width: 10.5rem; }
.colophon__lead p { margin-top: var(--s4); font-size: var(--t-sm); max-width: 30em; color: var(--text-2); }
.colophon__h { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s4); }
.colophon ul { list-style: none; padding: 0; }
.colophon li { font-size: var(--t-sm); padding-block: .3rem; }
.colophon__fine { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--text-3); }
@media (max-width: 56rem) { .colophon__grid { grid-template-columns: 1fr 1fr; } .colophon__lead { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .colophon__grid { grid-template-columns: 1fr; } }

/* ---------- Antet de pagină ---------- */
.page-head { position: relative; overflow-x: clip; overflow-y: visible; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s7); align-items: center; padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem) var(--s8); }
.page-head > * { grid-column: 1; }
.page-head > .head-vis { grid-column: 2; grid-row: 1 / span 5; position: relative; }
.head-vis { isolation: isolate; }
.head-vis::before { content: ""; position: absolute; inset: -18% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side at 50% 50%, rgba(87, 37, 255, .3), transparent), radial-gradient(closest-side at 75% 75%, rgba(241, 45, 255, .12), transparent 60%); }
.head-vis .frame { aspect-ratio: 16 / 10; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.head-vis--logo { display: grid; place-items: center; min-height: 14rem; }
.head-vis--logo img { width: min(100%, 22rem); }
.page-head .h-display { max-width: 17ch; }
.page-head .lede { margin-top: var(--s5); }
.page-head .btn-row { margin-top: var(--s6); }
.crumb { font-size: var(--t-sm); color: var(--text-3); margin-bottom: var(--s5); }
.crumb a { color: var(--text-2); text-decoration-color: var(--line-2); }
@media (max-width: 56rem) { .page-head { grid-template-columns: 1fr; } .page-head > .head-vis { grid-column: 1; grid-row: auto; margin-top: var(--s7); } .head-vis--logo { display: none; } }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); border-top: 1px solid var(--line-2); }
.facts > div { padding-block: var(--s5); border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s2); }
.facts dd { margin: 0; font-size: var(--t-sm); line-height: 1.65; color: var(--text-2); }
.facts dd b { color: var(--text); }
@media (max-width: 44rem) { .facts { grid-template-columns: 1fr; } }

.price { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); padding: var(--s5) var(--s6); background: var(--sheen), var(--surface); border: 1px solid rgba(143, 116, 255, .4); border-radius: var(--r-lg); overflow: hidden; }
.price::before { content: ""; position: absolute; left: var(--s6); top: 0; width: 3rem; height: 2px; border-radius: 2px; background: var(--spectrum); }
.price strong { font-family: var(--f-display); font-weight: 650; font-size: var(--t-xl); letter-spacing: -.02em; }
.price p { font-size: var(--t-sm); flex-basis: 100%; color: var(--text-2); }

/* ---------- Liste detaliate de lucrări ---------- */
.work-list { list-style: none; padding: 0; display: grid; gap: var(--s5); }
.work-item { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); padding: clamp(1.25rem, .8rem + 1.6vw, 2.25rem); align-items: start;
  border-radius: var(--r-xl); background: var(--sheen), var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); scroll-margin-top: 6rem; }
.work-item--text { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.work-item .h-item { margin-bottom: var(--s3); }
.work-item dt { font-family: var(--f-display); font-weight: 600; font-size: var(--t-xs); color: var(--text-3); margin-top: var(--s3); }
.work-item dd { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--text-2); }
.work-item .btn-row { margin-top: var(--s5); }
.work-item__shots { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: var(--s3); align-items: end; }
@media (min-width: 52.01rem) { .work-item__shots { position: sticky; top: 6rem; } }   /* doar pe două coloane */
.shot { aspect-ratio: 1200 / 683; border-radius: var(--r-md); }
.shot--sample { aspect-ratio: 16 / 10; }

@media (max-width: 52rem) { .work-item, .work-item--text { grid-template-columns: 1fr; gap: var(--s5); } .work-item__shots { grid-template-columns: minmax(0, 1fr) 5.5rem; } }

/* ---------- Mostre de texte ---------- */
.toc { list-style: none; padding: 0; border-left: 1px solid var(--line-2); }
.toc li { padding: .25rem 0 .25rem var(--s3); font-size: var(--t-sm); }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--cyan); }
.toc-nav__h { margin: var(--s5) 0 var(--s2); }
@media (min-width: 60.01rem) { .toc-nav { position: sticky; top: 6.5rem; } }
.sample { padding-block: var(--s7); border-top: 1px solid var(--line); }
.sample:first-of-type { border-top-color: var(--line-2); }
.sample__head { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.sample__brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-block: var(--s5) var(--s6); }
.sample__brief dt { font-family: var(--f-display); font-weight: 600; font-size: var(--t-xs); color: var(--text-3); margin-bottom: var(--s1); }
.sample__brief dd { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--text-2); }
@media (max-width: 52rem) { .sample__brief { grid-template-columns: 1fr; gap: var(--s3); } }
.sample__layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s6); align-items: start; }
@media (max-width: 60rem) { .sample__layout { grid-template-columns: 1fr; } }
.copy-sheet { position: relative; overflow: hidden; background: var(--sheen), var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.25rem, .8rem + 2.2vw, 2.75rem); max-width: 44rem; }
.copy-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--spectrum); opacity: .8; }
.copy-sheet > * + * { margin-top: var(--s4); }
.copy-sheet .k { font-size: var(--t-xs); font-weight: 700; color: var(--cyan); }
.copy-sheet h4 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); letter-spacing: -.03em; line-height: 1.12; }
.copy-sheet h5 { font-size: var(--t-md); font-weight: 650; margin: var(--s6) 0 0; }
.copy-sheet p, .copy-sheet li { font-size: var(--t-sm); line-height: 1.65; color: var(--text-2); }
.copy-sheet ul, .copy-sheet ol { padding-left: 1.2em; }
.copy-sheet li + li { margin-top: var(--s2); }
.copy-sheet strong { color: var(--text); }
.copy-sheet .cta-line { display: flex; flex-wrap: wrap; gap: var(--s2); }
.copy-sheet .cta-line span { font-family: var(--f-display); font-weight: 600; font-size: var(--t-xs); padding: .4rem .85rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--text); }
.copy-sheet .cta-line span:first-child { background: var(--text); border-color: var(--text); color: var(--void); }
.copy-sheet .fine { font-size: var(--t-xs); color: var(--text-3); }
.ad-variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.ad-variants > div { border-top: 1px solid var(--line-2); padding-top: var(--s3); }
.ad-variants > div > * + * { margin-top: var(--s2); }
.ad-variants h4, .ad-variants h5 { margin: 0; font-size: var(--t-sm); color: var(--text); }
@media (max-width: 52rem) { .ad-variants { grid-template-columns: 1fr; } }
.why { font-size: var(--t-sm); line-height: 1.6; color: var(--text-2); padding: var(--s4) var(--s5); background: rgba(87, 37, 255, .1); border: 1px solid rgba(143, 116, 255, .25); border-radius: var(--r-md); }
.why strong { display: block; color: var(--text); margin-bottom: var(--s2); font-family: var(--f-display); font-weight: 600; }

/* ---------- Demo curățare date ---------- */
.data-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.data-tabs button { font: inherit; font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm); min-height: 2.75rem; padding: .45rem 1.1rem; background: rgba(255, 255, 255, .04); color: var(--text-2); border: 1px solid var(--line-2); border-radius: var(--r-pill); cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.data-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.data-tabs button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--void); }
.data-panel { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.data-panel__note { padding: var(--s3) var(--s4); font-size: var(--t-sm); color: var(--text-2); border-bottom: 1px solid var(--line); }
.table-scroll { overflow: auto; max-height: 34rem; }
.dt { border-collapse: collapse; width: 100%; font-size: .8125rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.dt th, .dt td { padding: .5rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.dt thead th { position: sticky; top: 0; background: var(--night-2); color: var(--text-2); font-weight: 600; z-index: 1; }
.dt td.num { text-align: right; }
.dt td.wrap { white-space: normal; min-width: 16rem; }
.dt .flag { background: rgba(255, 209, 102, .16); color: var(--warn); }
.dt .changed { box-shadow: inset 3px 0 0 var(--ok); }
.dt .dup td { color: var(--text-3); text-decoration: line-through; }
.dt .empty::before { content: "—"; color: var(--text-3); }
.data-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--sheen), var(--surface); margin-bottom: var(--s6); }
.data-summary div { padding: var(--s5); border-right: 1px solid var(--line); }
.data-summary div:last-child { border-right: 0; }
.data-summary b { display: block; font-family: var(--f-display); font-weight: 650; font-size: var(--t-2xl); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.data-summary div:nth-child(1) b { color: var(--cyan); }
.data-summary div:nth-child(2) b { color: #8f74ff; }
.data-summary div:nth-child(3) b { color: #c07bff; }
.data-summary div:nth-child(4) b { color: var(--magenta); }
.data-summary span { font-size: var(--t-sm); line-height: 1.4; display: block; margin-top: var(--s2); color: var(--text-2); }
@media (max-width: 44rem) { .data-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .data-summary div:nth-child(2) { border-right: 0; } .data-summary div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: var(--t-sm); margin-top: var(--s4); color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.legend i { width: 1rem; height: 1rem; display: inline-block; border: 1px solid var(--field); }
.legend .l-flag { background: rgba(255, 209, 102, .4); }
.legend .l-changed { box-shadow: inset 3px 0 0 var(--ok); }
.legend .l-dup { background: linear-gradient(transparent 45%, var(--text-3) 45%, var(--text-3) 58%, transparent 58%); }

/* ---------- Demo QA ---------- */
.qa-controls { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; margin-bottom: var(--s4); }
.seg { display: inline-flex; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); border-radius: var(--r-pill); padding: 4px; gap: 3px; }
.seg button { font: inherit; font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm); min-height: 2.4rem; padding: .3rem 1rem; background: transparent; color: var(--text-2); border: 0; border-radius: var(--r-pill); cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--void); }
.qa-stage { position: relative; padding: var(--s5); overflow: hidden; background: radial-gradient(70% 90% at 50% 0%, rgba(87,37,255,.28), transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.qa-viewport { margin-inline: auto; width: 100%; max-width: 760px; transition: max-width .35s ease; }
.qa-viewport[data-width="mobil"] { max-width: 360px; }
.qa-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s6); align-items: start; }
@media (max-width: 64rem) { .qa-layout { grid-template-columns: 1fr; } }
.qa-issues { list-style: none; padding: 0; counter-reset: issue; }
.qa-issues li { counter-increment: issue; display: grid; grid-template-columns: 2rem 1fr; gap: var(--s2); padding-block: var(--s3); border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.55; color: var(--text-2); }
.qa-issues li::before { content: counter(issue); width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #e0315a; color: #fff; font-weight: 800; font-size: .8125rem; display: grid; place-items: center; }
.qa-issues b { color: var(--text); font-weight: 700; }
.qa-issues.qa-fixed li::before { content: "✓"; background: #0c8a5f; }

/* Fixture-ul demonstrativ „Atelier Verde”: stilul unui site fictiv, independent de brand */
.fx { --fx-bg: #fff; --fx-ink: #1f2a24; --fx-acc: #2f6b4f; --fx-soft: #f2f5f1; --fx-muted: #5b6b62;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fx-bg); color: var(--fx-ink); border: 1px solid #c9d1cb; border-radius: 6px; overflow: hidden; font-size: 15px; line-height: 1.5; color-scheme: light; }
.fx * { font-family: inherit; letter-spacing: normal; }
.fx h3, .fx h4 { color: var(--fx-ink); text-wrap: wrap; }
.fx-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid #e3e8e4; gap: 12px; }
.fx-logo { font-weight: 700; }
.fx-nav__links { display: flex; gap: 14px; font-size: 14px; }
.fx-hero { padding: 26px 18px; background: var(--fx-soft); }
.fx-hero h3 { font-size: 26px; line-height: 1.15; margin: 0 0 8px; font-weight: 750; letter-spacing: -.01em; }
.fx-hero p { color: var(--fx-muted); margin: 0 0 14px; }
.fx-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fx-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 6px; background: var(--fx-acc); color: #fff; font-weight: 600; border: 2px solid var(--fx-acc); font-size: 14px; }
.fx-btn--ghost { background: transparent; color: var(--fx-acc); }
.fx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px; }
.fx-card { border: 1px solid #dfe5e0; border-radius: 6px; padding: 14px; }
.fx-card h4 { font-size: 16px; margin: 0 0 4px; line-height: 1.25; font-weight: 700; letter-spacing: 0; }
.fx-card p { margin: 0; font-size: 14px; color: var(--fx-muted); }
.fx-card .fx-price { margin-top: 8px; font-weight: 700; color: var(--fx-ink); }
.fx-promo { margin: 0 18px 18px; padding: 10px 14px; border: 1px dashed var(--fx-acc); border-radius: 6px; font-size: 14px; max-width: 100%; }
.fx-foot { padding: 12px 18px; border-top: 1px solid #e3e8e4; font-size: 13px; color: var(--fx-muted); }
.qa-viewport[data-width="mobil"] .fx-cards { grid-template-columns: 1fr; }
.qa-viewport[data-width="mobil"] .fx-nav__links { display: none; }
.fx--before { overflow-x: auto; }
.fx--before .fx-btn--ghost { margin-top: 9px; padding: 7px 16px; }
.fx--before .fx-card h4 { white-space: nowrap; overflow-wrap: normal; }
.fx--before .fx-hero p { color: #a9b3ad; }
.fx--before .fx-promo { width: 420px; max-width: none; }
.qa-viewport[data-width="mobil"] .fx--before .fx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-pin { display: inline-block; vertical-align: middle; margin: 0 4px; width: 22px; height: 22px; border-radius: 50%; background: #c2273d; color: #fff; font: 700 12px/22px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff; }

.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.before-after img { width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: var(--r-md); }
.before-after figcaption { font-size: var(--t-sm); margin-top: var(--s3); color: var(--text-2); }
.before-after figcaption b { color: var(--text); }
@media (max-width: 44rem) { .before-after { grid-template-columns: 1fr; } }

/* ---------- Formular ---------- */
.form { position: relative; overflow: hidden; background: var(--sheen), var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); box-shadow: var(--sh-2); }
.form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--spectrum); opacity: .8; }
.form fieldset { border: 0; padding: 0; margin: 0 0 var(--s6); }
.form legend, .form label { font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm); display: block; margin-bottom: var(--s2); }
.form legend { margin-bottom: var(--s3); }
.form .hint { font-family: var(--f-text); font-size: var(--t-xs); color: var(--text-3); margin-top: var(--s1); display: block; font-weight: 500; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: var(--s2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: block; height: 100%; padding: var(--s3) var(--s4); border: 1px solid var(--field); border-radius: var(--r-md); font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600; line-height: 1.3; background: var(--void); transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease; }
.choice:hover span { border-color: var(--text-2); }
.choice span small { display: block; font-family: var(--f-text); font-weight: 500; font-size: var(--t-xs); color: var(--text-3); margin-top: var(--s1); }
.choice input:checked + span { border-color: var(--cyan); background: rgba(87, 37, 255, .25); box-shadow: inset 0 0 0 1px var(--cyan); }
.choice input:checked + span small { color: var(--text-2); }
.choice input:focus-visible + span { box-shadow: var(--focus); }
.field { margin-bottom: var(--s5); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: end; }
@media (max-width: 40rem) { .field-row { grid-template-columns: 1fr; } }
.form input[type="text"], .form input[type="email"], .form input[type="url"], .form textarea, .form select {
  width: 100%; font: inherit; font-size: var(--t-sm); color: var(--text);
  background: var(--void); border: 1px solid var(--field); border-radius: var(--r-sm);
  padding: .7rem .9rem; min-height: 3rem;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.form input:hover, .form textarea:hover, .form select:hover { border-color: var(--text-2); }
.form select option { background: var(--night); color: var(--text); }
.form textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 229, 255, .28); }
.form ::placeholder { color: var(--text-3); }
.form [aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255, 107, 139, .16); }
.form .err { color: var(--bad); font-size: var(--t-xs); margin-top: var(--s1); font-weight: 700; }
.form .err:empty { display: none; }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.form__how { font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; max-width: 34em; }
.after-send { margin-top: var(--s5); padding: var(--s5); border: 1px solid rgba(62, 230, 168, .35); border-radius: var(--r-lg); background: var(--void); }
.after-send > * + * { margin-top: var(--s3); }
.after-send pre { white-space: pre-wrap; font: inherit; font-size: var(--t-xs); max-height: 12rem; overflow: auto; background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3); margin: 0; color: var(--text-2); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); }
.split--form { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
@media (max-width: 60rem) { .split, .split--form { grid-template-columns: 1fr; gap: var(--s6); } }
.contact-direct { list-style: none; padding: 0; border-top: 1px solid var(--line-2); }
.contact-direct li { padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.contact-direct .label { display: block; margin-bottom: var(--s1); }
.contact-direct a { font-family: var(--f-display); font-weight: 600; font-size: var(--t-md); overflow-wrap: anywhere; }

/* ---------- Diverse ---------- */
.note-box { padding: var(--s4) var(--s5); background: rgba(87, 37, 255, .12); border: 1px solid rgba(143, 116, 255, .3); border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.6; color: var(--text-2); }
.list-check { list-style: none; padding: 0; }
.list-check li { position: relative; padding: var(--s2) 0 var(--s2) 1.75rem; border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.6; color: var(--text-2); }
.list-check li::before { content: ""; position: absolute; left: .1rem; top: .95rem; width: .8rem; height: .45rem; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg); }
.list-x li::before { width: .8rem; height: 2px; top: 1.2rem; border: 0; background: var(--text-3); transform: none; }

.lost { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: center; padding-block: var(--s9); }
.lost .btn-row { margin-top: var(--s6); }
.lost .lede { margin-top: var(--s5); }
.lost img { width: min(100%, 24rem); }
@media (max-width: 44rem) { .lost { grid-template-columns: 1fr; } }

@media (max-width: 26rem) {
  .h-display, .hero__title { font-size: 2rem; }
  .h-section, .closing h2, .svc-row h3 { font-size: 1.7rem; }
}
@media print {
  .masthead, .closing, .colophon, .filter, .menu-btn, .progress { display: none; }
  body { background: #fff; color: #000; }
}

/* =====================================================================
   Stratul cinematic
   Totul de mai jos e decorativ și se oprește la prefers-reduced-motion.
   Fără JavaScript, conținutul rămâne vizibil: ascunderea inițială apare
   doar sub clasa .js, iar dezvăluirea o face site.js.
   ===================================================================== */

/* Bara de progres a derulării, în spectrul logo-ului */
.progress { position: fixed; left: 0; top: 0; z-index: 40; width: 100%; height: 2px; pointer-events: none;
  background: var(--spectrum); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }

/* Scena 1: logo-ul apare din lumină. Nu blochează nimic: titlul e deja în pagină. */
.hero__brand { position: relative; display: block; width: min(100%, 21rem); margin-bottom: var(--s5); margin-left: -.4rem; isolation: isolate; }   /* cutia are exact mărimea logo-ului, ca masca luminii să cadă pe el */
.hero__brand { --logo-depth: drop-shadow(0 -1px 0 rgba(255, 255, 255, .3)) drop-shadow(0 3px 0 rgba(36, 14, 92, .9)) drop-shadow(0 14px 24px rgba(87, 37, 255, .3)); perspective: 60rem; }
.hero__brand .hero__logo { margin: 0; width: 100%; filter: var(--logo-depth); transition: transform 1.26s var(--ease), filter 1.26s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .hero__brand:hover .hero__logo { transform: rotateX(4deg) rotateY(-7deg) translateZ(12px);
    filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .4)) drop-shadow(0 4px 0 rgba(36, 14, 92, .9)) drop-shadow(0 20px 32px rgba(87, 37, 255, .42)) drop-shadow(0 0 18px rgba(0, 229, 255, .18)); }
}
.hero__brand::before { content: ""; position: absolute; inset: -18% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 45%, rgba(87, 37, 255, .38), rgba(0, 229, 255, .10) 55%, transparent 72%); filter: blur(10px); }
.hero__brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%) 0 0 / 260% 100% no-repeat;
  -webkit-mask: url(../brand/logo-lockup-640.webp) center / contain no-repeat; mask: url(../brand/logo-lockup-640.webp) center / contain no-repeat;
  mix-blend-mode: overlay; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__logo { animation: logo-in 1.54s var(--ease) backwards; }   /* „backwards”: după intrare, hover-ul poate înclina logo-ul */
  .js .hero__brand::before { animation: halo-in 2.24s ease both, halo-breathe 7s 2.24s ease-in-out infinite alternate; }
  .js .hero__brand::after { animation: sweep 2.1s .77s cubic-bezier(.4, 0, .2, 1) both; }
  .js .hero__title, .js .hero .lede, .js .hero .btn-row { animation: rise 1.12s var(--ease) both; }
  .js .hero__title { animation-delay: .35s; }
  .js .hero .lede { animation-delay: .56s; }
  .js .hero .btn-row { animation-delay: .73s; }
  .js .proof { animation: rise 1.12s .98s var(--ease) both; }
}
@keyframes logo-in { from { opacity: 0; transform: scale(.94); filter: blur(10px) brightness(1.8); } to { opacity: 1; transform: none; filter: var(--logo-depth); } }
@keyframes halo-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes halo-breathe { to { opacity: .65; transform: scale(1.06); } }
@keyframes sweep { 0% { opacity: 1; background-position: 120% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -20% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Profunzime: JavaScript setează --py pe elementele cu data-depth (doar pe ecrane mari). */
[data-depth] { translate: 0 var(--py, 0px); }   /* fără will-change: împreună cu clip-path lăsa ramele nedesenate */

/* Dezvăluire la derulare */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.12s var(--ease), transform 1.12s var(--ease); transition-delay: calc(var(--i, 0) * 100ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* Etichetă de secțiune */
.kicker { display: flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--s3); }
.kicker--sub { margin: var(--s8) 0 var(--s4); color: var(--text-2); }
.kicker--sub .star { background: var(--magenta); }

/* Scena 3: APEXVYRA, două direcții ale aceluiași brand */
.apex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s6); margin-top: var(--s4); }
.apex__intro { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s3) var(--s7); align-items: end; padding-top: var(--s6); border-top: 1px solid var(--line-2); }
.apex__intro .kicker { grid-column: 1 / -1; margin: 0; }
.apex__intro .h-item { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); letter-spacing: -.03em; }
.apex__intro p.muted { font-size: var(--t-sm); max-width: 38em; }
.apex__card { position: relative; display: grid; align-content: start; }
.apex__card:nth-of-type(2) { margin-top: var(--s8); }          /* asimetrie editorială */
.apex__shot { aspect-ratio: 1200 / 683; border-radius: var(--r-xl); box-shadow: var(--sh-3); }
.apex__card--ops .apex__shot:hover { box-shadow: var(--sh-3), 0 0 0 1px rgba(0, 229, 255, .4); }
.apex__card--agents .apex__shot:hover { box-shadow: var(--sh-3), 0 0 0 1px rgba(232, 196, 128, .45); }
.apex__phone { position: absolute; right: -.5rem; top: 50%; width: 21%; z-index: 2; }
.apex__text { margin-top: var(--s6); max-width: 34rem; padding-right: 18%; }
.apex__dir { font-family: var(--f-display); font-size: var(--t-xs); font-weight: 600; color: var(--text-3); margin-bottom: var(--s3); }
.apex__card--ops .apex__dir { color: var(--cyan); }
.apex__card--agents .apex__dir { color: #e8c480; }
.apex__text .h-small { margin-bottom: var(--s2); }
.apex__text .btn-row { margin-top: var(--s5); }
@media (max-width: 56rem) {
  .apex, .apex__intro { grid-template-columns: 1fr; }
  .apex__card:nth-of-type(2) { margin-top: 0; }
  .apex__text { padding-right: 0; }
  .apex__phone { display: none; }
}

/* Imaginile mari se așază pe măsură ce intră în cadru (derulare legată de CSS, unde există) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .apex__shot > img, .feature .frame > img, .duo .frame:first-child > img {
      animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes settle { from { transform: scale(1.14); filter: saturate(.5) brightness(.6); } to { transform: none; filter: none; } }

/* Scena 4: lumi de servicii. Același sistem, câte o culoare din spectru pentru fiecare. */
.svc-row[data-world] { --w: var(--cyan); position: relative; isolation: isolate; }
.svc-row[data-world="copy"] { --w: #8f74ff; }
.svc-row[data-world="data"] { --w: #c07bff; }
.svc-row[data-world="qa"] { --w: var(--magenta); }
.svc-row[data-world]::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 -12% 0 30%;
  background: radial-gradient(45% 60% at 60% 50%, color-mix(in srgb, var(--w) 14%, transparent), transparent 75%); }
.svc-row[data-world]:nth-of-type(even)::before { inset: 0 30% 0 -12%; }
.svc-row__num { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(4.5rem, 3rem + 5vw, 8.5rem); line-height: .8; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--w) 70%, transparent); margin-bottom: var(--s4); user-select: none; }
.svc-row[data-world] .svc-row__idx { color: var(--w); }
.svc-row[data-world] .svc-row__idx .star { background: var(--w); }
.svc-row[data-world] .price-tag { background: color-mix(in srgb, var(--w) 16%, transparent); border-color: color-mix(in srgb, var(--w) 55%, transparent); }
.svc-row[data-world] .go { text-decoration-color: var(--w); }
.svc-row[data-world="copy"] .quote-card::before { background: linear-gradient(180deg, #8f74ff, var(--violet)); }
.svc-row[data-world="data"] .mini-table { box-shadow: 0 0 0 1px color-mix(in srgb, var(--w) 30%, transparent), 0 30px 60px rgba(0, 0, 0, .4); }
.svc-row[data-world="qa"] .ba figure:last-child figcaption { color: var(--ok); }

/* Scena 6: finalul */
.closing__mark { width: clamp(7rem, 5rem + 6vw, 11rem); filter: drop-shadow(0 0 30px rgba(87, 37, 255, .55)); }
@media (prefers-reduced-motion: no-preference) {
  .js .closing__mark { animation: hover-y 8s ease-in-out infinite alternate; }
}
@media (max-width: 52rem) { .closing__mark { width: 7rem; } }

/* Lumina scenei se mișcă lent, doar unde contează: în prima secțiune */
@media (prefers-reduced-motion: no-preference) {
  .js .scene::before { animation: drift 18s ease-in-out infinite alternate; }
}
@keyframes drift { to { transform: translate3d(3%, -2%, 0) scale(1.05); } }

/* ---------- Telefon: rama de dispozitiv pentru toate capturile de mobil ----------
   Raze proporționale (procente), ramă subțire, margine metalică fină și decupajul de sus.
   Captura e aliniată sus, ca prima vedere a paginii să fie întreagă. */
.stage__phone, .duo .phone, .apex__phone, .work-item__shots .phone {
  aspect-ratio: 9 / 18.6; padding: 6px; overflow: hidden;   /* procentele s-ar calcula din lățimea părintelui */
  border-radius: 17% / 8.2%; background: linear-gradient(160deg, #2a2f45, #0b0d18 40%, #151a2c);
  border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(0, 0, 0, .7), 0 30px 70px rgba(0, 0, 0, .6), 0 0 40px rgba(87, 37, 255, .18);
}
.stage__phone::after, .duo .phone::after, .apex__phone::after, .work-item__shots .phone::after {   /* reflexie discretă pe sticlă */
  border-radius: inherit; box-shadow: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .09), transparent 32%);
}
.stage__phone::before, .duo .phone::before, .apex__phone::before, .work-item__shots .phone::before {   /* decupajul de sus */
  content: ""; position: absolute; z-index: 2; left: 50%; top: calc(6px + 2.2%); width: 30%; height: 3.2%; translate: -50% 0;
  border-radius: 999px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
}
.stage__phone > img, .duo .phone > img, .apex__phone > img, .work-item__shots .phone > img {
  border-radius: 13.5% / 6.4%; object-fit: cover; object-position: top center; background: #000;
  padding-top: 14%;   /* bara de stare: pagina începe sub decupaj, ca pe un telefon real */
}

/* ---------- Mișcare fină pe componente ----------
   Tranziții scurte pentru interacțiuni; efectele la derulare pornesc o singură dată (clasa is-in). */
.masthead.is-scrolled { background: rgba(5, 6, 16, .86); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }

/* Meniu: linia de sub link crește din centru */
@media (min-width: 68.01rem) {
  .nav__list a::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -.15rem; height: 2px; border-radius: 2px;
    background: var(--spectrum); transform: scaleX(0); transition: transform var(--t-mid) var(--ease); }
  .nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
}

/* Butonul principal: o trecere de lumină la hover */
.btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%) -150% 0 / 220% 100% no-repeat; }
.btn--primary:hover::after { background-position: 150% 0; transition: background-position 1.12s var(--ease); }

/* Etichetele de pe capturi urcă ușor la hover */
.proof a:hover img { transform: scale(1.06); }
.lang__alt:active { transform: scale(.94); }

@media (prefers-reduced-motion: no-preference) {
  /* Antetul paginilor de serviciu intră ca prima secțiune de pe prima pagină */
  .js .page-head > * { animation: rise 1.12s var(--ease) both; }
  .js .page-head > :nth-child(2) { animation-delay: .11s; }
  .js .page-head > :nth-child(3) { animation-delay: .22s; }
  .js .page-head > :nth-child(4) { animation-delay: .34s; }
  .js .page-head > .head-vis { animation: frame-in 1.26s .28s var(--ease) backwards; }

  /* Titlurile de secțiune primesc o linie de spectru care se desenează */
  .sec-head .h-section::after { content: ""; display: block; width: 3.5rem; height: 3px; margin-top: var(--s4); border-radius: 3px;
    background: var(--spectrum); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s .35s var(--ease); }
  .sec-head.is-in .h-section::after { transform: scaleX(1); }

  /* Numărul fiecărui serviciu se umple cu culoarea lumii lui */
  .svc-row__num { background: linear-gradient(var(--w, var(--cyan)), var(--w, var(--cyan))) 0 100% / 100% 0 no-repeat; -webkit-background-clip: text; background-clip: text;
    transition: background-size 1.96s .28s var(--ease); }
  .svc-row__text.is-in .svc-row__num { background-size: 100% 38%; }

  /* Pașii: linia de sus se desenează de la stânga */
  .steps li::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease); transition-delay: calc(var(--i, 0) * 170ms + .21s); }
  .steps li.is-in::after { transform: scaleX(1); }

  /* Tabelul din curățarea datelor: rândurile apar pe rând */
  .js .mini-table tbody tr { transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .mini-table[data-reveal]:not(.is-in) tbody tr { opacity: 0; transform: translateX(-10px); }
  .mini-table tbody tr:nth-child(2) { transition-delay: .11s; }
  .mini-table tbody tr:nth-child(3) { transition-delay: .22s; }
  .mini-table tbody tr:nth-child(4) { transition-delay: .34s; }
  .mini-table tbody tr:nth-child(5) { transition-delay: .45s; }

  /* Înainte / după: „după” intră puțin mai târziu */
  .ba figure:last-child { transition-delay: .25s; }

  /* Logo-ul din prima secțiune plutește foarte ușor după apariție */
  .js .hero__brand { animation: hover-y 9s 2.24s ease-in-out infinite alternate; }
}
@keyframes hover-y { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.work-item__shots .phone { padding: 4px; }

/* Formular: câmpul-capcană pentru roboți (ascuns vizual și pentru cititoarele de ecran) și stările trimiterii */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.after-send--fail { border-color: rgba(255, 209, 102, .4); }
.after-send--ok { border-color: rgba(62, 230, 168, .45); background: rgba(62, 230, 168, .06); }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---------- Mostrele de text, prezentate ca pagini reale ale mărcilor fictive ----------
   Fiecare mostră are identitatea mărcii ei (culori, tipografie) și o bară de browser cu adresa
   (.example: domeniu rezervat pentru exemple). Textul rămâne exact cel din mostră. */
.copy-sheet[data-brand] { --b-bg: #fff; --b-ink: #14162b; --b-muted: #5b6078; --b-acc: #4f46e5; --b-acc-ink: #fff; --b-line: rgba(20, 22, 43, .12);
  --b-head: var(--f-display); background: var(--b-bg); color: var(--b-ink); border: 0; padding-top: calc(2.6rem + clamp(1.25rem, .8rem + 2.2vw, 2.75rem));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), var(--sh-3); }
.copy-sheet[data-brand]::before { content: attr(data-url); left: 0; right: 0; top: 0; height: 2.6rem; opacity: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-text); font-size: .75rem; font-weight: 600; letter-spacing: .01em; color: rgba(20, 22, 43, .55);
  background: radial-gradient(circle at 1.25rem 50%, #ff5f57 .3rem, transparent .32rem), radial-gradient(circle at 2.15rem 50%, #febc2e .3rem, transparent .32rem),
    radial-gradient(circle at 3.05rem 50%, #28c840 .3rem, transparent .32rem), #e9e9ee; border-bottom: 1px solid rgba(20, 22, 43, .1); }
.copy-sheet[data-brand] h4, .copy-sheet[data-brand] h5, .copy-sheet[data-brand] strong { color: var(--b-ink); font-family: var(--b-head); }
.copy-sheet[data-brand] p, .copy-sheet[data-brand] li { color: var(--b-muted); }
.copy-sheet[data-brand] .k { color: var(--b-acc); }
.copy-sheet[data-brand] .fine { color: var(--b-muted); }   /* fără transparență: rămâne peste 4,5:1 pe fundalurile deschise */
.copy-sheet[data-brand] .cta-line span { border-color: var(--b-line); color: var(--b-ink); }
.copy-sheet[data-brand] .cta-line span:first-child { background: var(--b-acc); border-color: var(--b-acc); color: var(--b-acc-ink); }
.copy-sheet[data-brand] ::selection { background: var(--b-acc); color: var(--b-acc-ink); }

/* Fluxly: produs software, curat și luminos */
.copy-sheet[data-brand="fluxly"] { --b-bg: #ffffff; --b-ink: #121530; --b-muted: #4f5572; --b-acc: #4f46e5; }
/* Bilanț Clar: contabilitate, sobru, bleumarin pe crem */
.copy-sheet[data-brand="bilant-clar"] { --b-bg: #f6f3ec; --b-ink: #1b2a45; --b-muted: #46536b; --b-acc: #1f5c4a; --b-head: Georgia, "Times New Roman", serif; }
.copy-sheet[data-brand="bilant-clar"] h4 { letter-spacing: -.01em; font-weight: 600; }
/* Masă Lungă: bistro, cald, serif */
.copy-sheet[data-brand="masa-lunga"] { --b-bg: #f4ebdf; --b-ink: #3a2418; --b-muted: #6b4f3f; --b-acc: #9e4420; --b-head: Georgia, "Times New Roman", serif; }
.copy-sheet[data-brand="masa-lunga"] h4 { font-style: italic; font-weight: 500; letter-spacing: -.01em; }
/* Strat: cosmetice, minimal și liniștit */
.copy-sheet[data-brand="strat"] { --b-bg: #f2efe9; --b-ink: #24221f; --b-muted: #5e5a53; --b-acc: #24221f; --b-acc-ink: #f2efe9; }
.copy-sheet[data-brand="strat"] h4 { font-weight: 500; letter-spacing: -.035em; }
.copy-sheet[data-brand="strat"] .k { letter-spacing: .14em; text-transform: uppercase; font-size: .6875rem; color: #6a5c48; }

/* Reclamele: brief deasupra, apoi anunțul ca o postare sponsorizată dintr-un flux social */
.copy-sheet[data-brand="ads"] { background: transparent; box-shadow: none; padding: 0; overflow: visible; }
.copy-sheet[data-brand="ads"]::before { display: none; }
.copy-sheet[data-brand="ads"] .ad-variants { align-items: start; }
.copy-sheet[data-brand="ads"] .ad-variant { border-top: 0; padding-top: 0; }
.copy-sheet[data-brand="ads"] .ad-variant > .k { color: var(--cyan); }
.copy-sheet[data-brand="ads"] .ad-variant > .fine { color: var(--text-2); min-height: 4.2em; }
.copy-sheet[data-brand="ads"] .ad-variant > .fine strong { color: var(--text); font-family: var(--f-text); }
.ad { margin-top: var(--s3); background: #fff; color: #1c1e21; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), var(--sh-2);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
.ad:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), var(--sh-3); }
.ad > * + * { margin-top: 0; }
.copy-sheet .ad__who { display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem .5rem; color: #1c1e21; }
.ad__logo { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: #4f46e5; color: #fff; font-family: var(--f-display); font-weight: 700; font-size: .95rem; flex: none; }
.copy-sheet .ad__who b { display: block; font-family: var(--f-text); font-size: .875rem; color: #1c1e21; }
.ad__who small { display: block; font-size: .75rem; color: #65676b; }
.ad__visual { margin: .4rem .9rem .2rem; padding: 1rem; border-radius: 10px; background: linear-gradient(135deg, #eef0ff, #f7f7fb); display: grid; gap: .5rem; }
.ad__visual i { display: block; height: .8rem; border-radius: 4px; background: linear-gradient(90deg, #4f46e5 0 .8rem, transparent .8rem 1.3rem, #d9dcf2 1.3rem); }
.ad__visual i:nth-child(2) { width: 82%; }
.ad__visual i:nth-child(3) { width: 64%; background: linear-gradient(90deg, #c7cbe6 0 .8rem, transparent .8rem 1.3rem, #e3e5f3 1.3rem); }
.copy-sheet .ad h4, .copy-sheet .ad h5 { margin: 0; padding: .7rem .9rem 0; font-family: var(--f-text); font-size: .95rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: #1c1e21; }
.copy-sheet .ad p:not(.ad__who) { padding: .4rem .9rem 0; font-size: .875rem; line-height: 1.5; color: #4b4f56; }
.copy-sheet .ad .cta-line { padding: .8rem .9rem .9rem; margin-top: .3rem; border-top: 1px solid #e4e6eb; display: flex; justify-content: flex-end; }
.copy-sheet[data-brand] .ad .cta-line span { background: #e4e6eb; border: 0; color: #1c1e21; border-radius: 6px; font-family: var(--f-text); font-weight: 600; }
@media (max-width: 52rem) { .copy-sheet[data-brand="ads"] .ad-variant > .fine { min-height: 0; } }

/* ---------- Curățarea datelor: transformările pe scurt și fereastra de tabel ---------- */
.xform { list-style: none; padding: 0; margin: 0 0 var(--s6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.xform__item { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s3); align-items: center;
  padding: var(--s4) var(--s5); border-radius: var(--r-lg); background: var(--sheen), var(--surface); border: 1px solid var(--line);
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.xform__item:hover { border-color: var(--line-2); transform: translateY(-2px); }
.xform__field { grid-column: 1 / -1; font-family: var(--f-display); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s2); }
.xform__was { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8125rem; color: var(--text-3); text-decoration: line-through; text-decoration-color: rgba(255, 107, 139, .7); white-space: pre-wrap; overflow-wrap: break-word; }   /* spațiile duble din sursă rămân vizibile; se rupe între cuvinte, nu în mijlocul lor */
.xform__arrow { color: var(--text-3); }
.xform__now { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8125rem; font-weight: 600; color: var(--ok); overflow-wrap: anywhere; }
.xform__item--flag { border-color: rgba(255, 209, 102, .35); }
.xform__item--flag .xform__now { color: var(--warn); font-family: var(--f-text); }
@media (max-width: 60rem) { .xform { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .xform { grid-template-columns: 1fr; } }

/* Tabelul, într-o fereastră de foaie de calcul: bara cu numele fișierului, apoi filele */
.data-window { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--sh-2); }
.data-window__bar { display: flex; align-items: center; gap: var(--s4); padding: .65rem var(--s4); background: rgba(255, 255, 255, .04); border-bottom: 1px solid var(--line); }
.data-window__dots { width: 3.2rem; height: .7rem; flex: none;
  background: radial-gradient(circle at .35rem 50%, #ff5f57 .3rem, transparent .32rem), radial-gradient(circle at 1.6rem 50%, #febc2e .3rem, transparent .32rem), radial-gradient(circle at 2.85rem 50%, #28c840 .3rem, transparent .32rem); }
.data-window__file { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8125rem; color: var(--text-2); }
.data-window .data-tabs { margin: 0; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.data-window .data-panel { border: 0; border-radius: 0; box-shadow: none; }
.dt tbody tr { transition: background-color var(--t-fast) ease; }
.dt tbody tr:hover { background: rgba(255, 255, 255, .035); }
.dt td:first-child, .dt th:first-child { color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Tabelul are mai multe rânduri decât încap: o estompare discretă jos arată că se poate derula */
.table-scroll { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.5rem), rgba(0, 0, 0, .35)); mask-image: linear-gradient(180deg, #000 calc(100% - 2.5rem), rgba(0, 0, 0, .35)); }

/* =====================================================================
   Sistemul de mișcare WebGenArt
   1. „Orbita”: la hover, o lumină în spectrul logo-ului parcurge marginea cardurilor și a capturilor
      (ideea orbitei din logo, mutată în interfață). Un singur ciclu lent, nu rotire continuă agresivă.
   2. Lumina care urmărește cursorul în interiorul cardurilor (JS setează --mx / --my).
   3. Titlurile apar cu o trecere scurtă de lumină, o singură dată.
   4. Telefoanele reacționează la fel ca capturile de desktop.
   Totul se oprește la prefers-reduced-motion; fără JS, nimic nu e ascuns.
   ===================================================================== */
@property --wga-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* 1. Orbita pe margine */
.card, .work-item, .xform__item, .data-window, .quote-card, .mini-table, .proof a, .frame:not(.stage__phone):not(.phone) { position: relative; }
.card::before, .work-item::before, .xform__item::before, .data-window::before, .frame:not(.stage__phone):not(.phone)::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--wga-angle), transparent 0deg 210deg, rgba(0, 229, 255, .95) 260deg, rgba(87, 37, 255, .95) 300deg, rgba(241, 45, 255, .95) 335deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity var(--t-mid) var(--ease); }
.card:hover::before, .card:focus-within::before, .work-item:hover::before, .xform__item:hover::before, .data-window:hover::before,
a.frame:not(.stage__phone):not(.phone):hover::before, a.frame:not(.stage__phone):not(.phone):focus-visible::before, .stage__item:hover .frame::before { opacity: 1; }
/* lumina se rotește pe margine și la „reducere mișcare”: nu deplasează nimic din pagină */
.card:hover::before, .card:focus-within::before, .work-item:hover::before, .xform__item:hover::before, .data-window:hover::before,
a.frame:hover::before, .stage__item:hover .frame::before { animation: wga-orbit 5s linear infinite; }
@keyframes wga-orbit { to { --wga-angle: 360deg; } }

/* 2. Lumina care urmărește cursorul (doar pe dispozitive cu mouse) */
@media (hover: hover) {
  .card, .work-item, .xform__item, .data-window { background-image: radial-gradient(520px circle at var(--mx, -40%) var(--my, -40%), rgba(87, 37, 255, .13), transparent 42%), var(--sheen); }
  .card { background-color: var(--surface); }
  .xform__item { background-color: var(--surface); }
}

/* 4. Telefoanele: același răspuns ca la capturile de desktop (lumina pe margine, ridicare, zoom fin pe imagine) */
.stage__phone, .duo .phone, .apex__phone, .work-item__shots .phone { transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.stage__phone > img, .duo .phone > img, .apex__phone > img, .work-item__shots .phone > img { transition: transform .84s var(--ease); }
.frame.stage__phone:hover, .duo .frame.phone:hover, .frame.apex__phone:hover, .work-item__shots .frame.phone:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .55), 0 0 0 3px rgba(87, 37, 255, .25), 0 34px 80px rgba(0, 0, 0, .65), 0 0 50px rgba(87, 37, 255, .35); }
.frame.stage__phone:hover > img, .duo .frame.phone:hover > img, .frame.apex__phone:hover > img, .work-item__shots .frame.phone:hover > img { transform: scale(1.04); }
/* capturile mari reacționează puțin mai vizibil, ca telefonul */
a.frame:hover { transform: translateY(-2px); }

/* 3. Titlurile: o trecere de lumină, o singură dată, după ce apar */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title, .js .page-head .h-display, .js .sec-head.is-in .h-section, .js .closing .page > h2.is-in {
    background: linear-gradient(100deg, var(--text) 0 40%, #b9f6ff 47%, #e3d6ff 53%, var(--text) 60% 100%) 100% 0 / 260% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .js .hero__title { animation: rise 1.12s .35s var(--ease) both, text-light 2.24s 1.4s var(--ease) both; }
  .js .page-head .h-display { animation: rise 1.12s var(--ease) both, text-light 2.24s .98s var(--ease) both; }
  .js .sec-head.is-in .h-section, .js .closing .page > h2.is-in { animation: text-light 2.24s .42s var(--ease) both; }
}
@keyframes text-light { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Etichetele de secțiune: linia de dinaintea textului se întinde când secțiunea intră în cadru */
@media (prefers-reduced-motion: no-preference) {
  .js .kicker .star, .js .margin__note strong::before { transform-origin: 0 50%; transition: transform 1.12s .28s var(--ease), width .42s ease; }
}
.kicker:hover .star, .margin__note:hover strong::before { width: 1.8rem; }

/* Butoanele secundare și linkurile-card primesc aceeași lumină de margine, mai discretă */
.btn:not(.btn--primary), .card__cta, .lang { transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease, box-shadow var(--t-mid) var(--ease); }
.btn:not(.btn--primary):hover, .card__cta:hover { box-shadow: 0 0 0 1px rgba(0, 229, 255, .35), 0 0 24px rgba(87, 37, 255, .25); }

/* ---------- Prețul site-urilor ---------- */
/* Prețul de pornire pentru site-uri: un singur preț, explicat, cu acțiunea alături */
.start-price { position: relative; display: grid; gap: var(--s3); justify-items: start; max-width: 40rem; padding: var(--s7) var(--s6) var(--s6); border-radius: var(--r-xl);
  background: radial-gradient(520px circle at var(--mx, -40%) var(--my, -40%), rgba(87, 37, 255, .13), transparent 42%), var(--sheen), var(--surface);
  border: 1px solid var(--line-2); box-shadow: var(--sh-1); }
.start-price::before { content: ""; position: absolute; left: var(--s6); top: 0; width: 3rem; height: 2px; border-radius: 2px; background: var(--spectrum); }
.start-price__label { font-family: var(--f-display); font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.start-price__value { font-family: var(--f-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 650; letter-spacing: -.035em; line-height: 1; color: var(--text); }
.start-price__value span { display: block; font-family: var(--f-text); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0; color: var(--text-3); margin-bottom: .35rem; }
.start-price__text { font-size: var(--t-md); line-height: 1.6; color: var(--text); max-width: 34em; }
.start-price__note { font-size: var(--t-sm); line-height: 1.6; color: var(--text-2); max-width: 36em; padding-top: var(--s3); border-top: 1px solid var(--line); width: 100%; }
.start-price .btn { margin-top: var(--s3); }
@media (max-width: 30rem) { .start-price { padding: var(--s6) var(--s5) var(--s5); } .start-price::before { left: var(--s5); } }
/* Serviciile fără preț public: o singură frază clară spre oferta personalizată */
.closing__quote { color: var(--text) !important; }
.closing__quote strong { font-family: var(--f-display); font-weight: 650; }

/* ---------- Raportul de verificare (exemplu de livrabil) ---------- */
.qa-report { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--sh-2); }
.qa-report__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); align-items: center; padding: .8rem var(--s5); background: rgba(255, 255, 255, .04); border-bottom: 1px solid var(--line); }
.qa-report__title { font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm); color: var(--text); }
.qa-report__meta { font-size: var(--t-xs); font-weight: 600; color: var(--ok); }
.qa-report__scroll { overflow-x: auto; }
.qa-report__table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.45; }
.qa-report__table th { text-align: left; font-family: var(--f-display); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; color: var(--text-3); padding: .7rem var(--s4); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.qa-report__table td { padding: .8rem var(--s4); border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.qa-report__table td:first-child { color: var(--text-3); font-variant-numeric: tabular-nums; }
.qa-report__table td:nth-child(2) { color: var(--text); font-weight: 600; }
.qa-report__table tbody tr { transition: background-color var(--t-fast) ease; }
.qa-report__table tbody tr:hover { background: rgba(255, 255, 255, .03); }
.qa-report__table tbody tr:last-child td { border-bottom: 0; }
.sev, .done { display: inline-block; white-space: nowrap; font-size: .75rem; font-weight: 600; padding: .18rem .55rem; border-radius: var(--r-pill); }
.sev--high { background: rgba(255, 107, 139, .14); color: #ff8fa8; }
.sev--mid { background: rgba(255, 209, 102, .12); color: var(--warn); }
.sev--low { background: rgba(0, 229, 255, .1); color: var(--cyan); }
.done { background: rgba(62, 230, 168, .1); color: var(--ok); }
.qa-report__note { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--text-2); }

/* ---------- Respirație: mai mult spațiu între blocuri, aceeași structură ----------
   Doar distanțe și intensitatea luminilor; componentele și culorile rămân cele de mai sus. */
.hero { padding-block: clamp(3rem, 2rem + 4vw, 6.5rem) var(--s8); }
.hero__brand { margin-bottom: var(--s7); }
.hero .lede { margin-top: var(--s6); }
.hero .btn-row { margin-top: var(--s7); }
.stage::before { opacity: .75; }
.proof { margin-bottom: var(--s9); }
.proof a { padding: var(--s5); }
.sec-head { margin-bottom: var(--s8); gap: var(--s7); }
.sec-head .lede { margin-top: var(--s5); }
.kicker--sub { margin: var(--s9) 0 var(--s5); }
.cards { gap: var(--s6); }
.card__body { padding: var(--s6); gap: var(--s4); }
.svc-row { padding-block: var(--s9); gap: var(--s8); }
.svc-row dl { margin-top: var(--s6); gap: var(--s4); }
.svc-row__foot { margin-top: var(--s6); }
.svc-row[data-world]::before { opacity: .65; }
.steps { gap: var(--s6); }
.facts { gap: 0 var(--s7); }
.facts > div { padding-block: var(--s6); }
.page-head .lede { margin-top: var(--s6); }
.page-head .btn-row { margin-top: var(--s7); }
.closing { padding-block: var(--s9) calc(var(--s9) + var(--s6)); }
@media (max-width: 60rem) {
  .hero__brand { margin-bottom: var(--s6); }
  .sec-head { margin-bottom: var(--s7); gap: var(--s5); }
  .svc-row { padding-block: var(--s8); gap: var(--s6); }
  .kicker--sub { margin-top: var(--s8); }
}
@media (max-width: 30rem) {
  .card__body { padding: var(--s5); }
  .proof a { padding: var(--s4); }
  .hero .btn-row { margin-top: var(--s6); }
}

/* ---------- Comutatorul de temă (antet, lângă limbă) ---------- */
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--r-pill); cursor: pointer;
  color: var(--text-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  transition: color var(--t-fast) ease, background-color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease; }
.theme-toggle:hover { color: var(--text); background: rgba(255, 255, 255, .1); border-color: var(--line-2); }
.theme-toggle:active { transform: scale(.94); }
:root:not(.js) .theme-toggle { display: none; }   /* fără JavaScript butonul n-ar face nimic; site-ul rămâne în tema închisă */
.theme-toggle svg { grid-area: 1 / 1; display: block; }
.theme-toggle__moon { display: none !important; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block !important; }
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle svg { transition: transform var(--t-mid) var(--ease); }
  .theme-toggle:hover svg { transform: rotate(-18deg); }
}
.nav__end .lang { flex: none; }
@media (max-width: 68rem) { .nav__end { flex-wrap: wrap; gap: var(--s3); } .nav__end .btn { margin-left: auto; } }

/* Logo-ul complet: varianta pentru fundal deschis are „WebGen” bleumarin (desenul și „Art” neschimbate) */
.logo--light { display: none !important; }
:root[data-theme="light"] .logo--dark { display: none !important; }
:root[data-theme="light"] .logo--light { display: block !important; }

/* =====================================================================
   Tema deschisă
   Aceeași identitate pe fundal deschis: alb rece și gri-lavandă, text bleumarin,
   accentele din spectru închise la culoare, ca să păstreze contrastul (min. 4,5:1 la text).
   Capturile, telefoanele, mostrele de mărci fictive și demonstrația Atelier Verde rămân ca atare.
   ===================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --void: #f6f7fc;
  --night: #eceffa;
  --night-2: #e4e8f6;
  --text: #12152b;
  --text-2: #3d4466;
  --text-3: #586088;
  --line: rgba(24, 30, 72, .10);
  --line-2: rgba(24, 30, 72, .18);
  --field: #7d84a8;
  --cyan: #006f8a;
  --magenta: #a3129f;
  --spectrum: linear-gradient(100deg, #00a7c4 0%, var(--violet) 52%, #d21fd9 100%);
  --ok: #067a52;
  --bad: #c41f4b;
  --warn: #8a5800;
  --surface: #ffffff;
  --surface-2: #f1f3fb;
  --glass: rgba(255, 255, 255, .82);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 42%);
  --sh-1: 0 1px 2px rgba(18, 21, 43, .06), 0 8px 24px rgba(18, 21, 43, .06);
  --sh-2: 0 2px 6px rgba(18, 21, 43, .06), 0 20px 48px rgba(18, 21, 43, .10);
  --sh-3: 0 30px 80px rgba(18, 21, 43, .16);
  --focus: 0 0 0 2px var(--void), 0 0 0 4px var(--violet);
}
:root[data-theme="light"] :focus-visible { outline-color: var(--violet); }

/* Suprafețe translucide: pe fundal deschis, nuanța vine din bleumarin, nu din alb */
:root[data-theme="light"] .btn:not(.btn--primary),
:root[data-theme="light"] .menu-btn,
:root[data-theme="light"] .card__cta,
:root[data-theme="light"] .status,
:root[data-theme="light"] .lang,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .filter,
:root[data-theme="light"] .seg,
:root[data-theme="light"] .data-tabs button:not([aria-selected="true"]) { background-color: rgba(24, 30, 72, .045); }
:root[data-theme="light"] .btn:not(.btn--primary):hover,
:root[data-theme="light"] .theme-toggle:hover,
:root[data-theme="light"] .lang__alt:hover,
:root[data-theme="light"] .filter button:hover,
:root[data-theme="light"] .data-tabs button:not([aria-selected="true"]):hover { background-color: rgba(24, 30, 72, .08); border-color: rgba(24, 30, 72, .28); }
:root[data-theme="light"] .lang__on { background: var(--surface); box-shadow: 0 1px 3px rgba(18, 21, 43, .14); }
:root[data-theme="light"] .btn:not(.btn--primary):hover, :root[data-theme="light"] .card__cta:hover { box-shadow: 0 0 0 1px rgba(87, 37, 255, .3), 0 8px 20px rgba(87, 37, 255, .12); }
:root[data-theme="light"] .card:hover .card__cta { background: rgba(87, 37, 255, .1); border-color: rgba(87, 37, 255, .45); }
:root[data-theme="light"] .card__cta:hover { color: var(--violet); }
:root[data-theme="light"] .status--real { background: rgba(255, 190, 60, .16); }
:root[data-theme="light"] .status--own { background: rgba(6, 122, 82, .09); }
:root[data-theme="light"] .status--cat { background: rgba(0, 111, 138, .09); }
:root[data-theme="light"] .price-tag { background: rgba(87, 37, 255, .08); border-color: rgba(87, 37, 255, .35); }

/* Antet, meniu, subsol */
:root[data-theme="light"] .masthead { background: rgba(246, 247, 252, .8); }
:root[data-theme="light"] .masthead.is-scrolled { background: rgba(246, 247, 252, .92); box-shadow: 0 8px 26px rgba(18, 21, 43, .08); }
@media (max-width: 68rem) { :root[data-theme="light"] .nav { background: rgba(246, 247, 252, .98); box-shadow: 0 18px 40px rgba(18, 21, 43, .1); } }
:root[data-theme="light"] .colophon { background: linear-gradient(180deg, transparent, rgba(220, 225, 245, .7)); }

/* Logo-ul: pe fundal deschis, profunzimea vine dintr-o umbră violet fină, nu dintr-o margine întunecată */
:root[data-theme="light"] .brand__mark { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 2px 2px rgba(60, 30, 160, .28)) drop-shadow(0 6px 10px rgba(87, 37, 255, .18)); }
:root[data-theme="light"] .brand__name { background-image: linear-gradient(180deg, #2e2a6e 0%, #1a1d40 60%, #12152b 100%);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 2px 4px rgba(87, 37, 255, .16)); }
:root[data-theme="light"] .brand__art { background-image: linear-gradient(100deg, #2f6df0 0%, #6a4dff 30%, #9b2fe0 55%, #d21fd9 75%, #6a4dff 100%); }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="light"] .brand:hover .brand__mark { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 3px 3px rgba(60, 30, 160, .3)) drop-shadow(0 12px 18px rgba(87, 37, 255, .28)); }
  :root[data-theme="light"] .hero__brand:hover .hero__logo { filter: drop-shadow(0 2px 2px rgba(60, 30, 160, .22)) drop-shadow(0 22px 30px rgba(87, 37, 255, .26)); }
}
:root[data-theme="light"] .hero__brand { --logo-depth: drop-shadow(0 2px 2px rgba(60, 30, 160, .2)) drop-shadow(0 14px 22px rgba(87, 37, 255, .18)); }
:root[data-theme="light"] .hero__brand::before { opacity: .45; }
:root[data-theme="light"] .closing__mark { filter: drop-shadow(0 10px 24px rgba(87, 37, 255, .3)); }

/* Luminile de fundal: mai discrete pe deschis */
:root[data-theme="light"] .scene::before, :root[data-theme="light"] .stage::before, :root[data-theme="light"] .head-vis::before,
:root[data-theme="light"] .closing .page::before, :root[data-theme="light"] .svc-row[data-world]::before { opacity: .45; }
:root[data-theme="light"] .qa-stage { background: radial-gradient(70% 90% at 50% 0%, rgba(87, 37, 255, .1), transparent 70%), var(--surface-2); }
:root[data-theme="light"] .proof { background: var(--sheen), var(--surface); }
:root[data-theme="light"] .proof a:hover, :root[data-theme="light"] .dt tbody tr:hover, :root[data-theme="light"] .qa-report__table tbody tr:hover { background: rgba(24, 30, 72, .035); }
:root[data-theme="light"] .data-window__bar, :root[data-theme="light"] .qa-report__bar, :root[data-theme="light"] .qa-report__table th { background: rgba(24, 30, 72, .035); }
:root[data-theme="light"] a.frame:hover, :root[data-theme="light"] .stage__item:hover .stage__thumb { border-color: rgba(87, 37, 255, .35); }
:root[data-theme="light"] .chip { border-color: var(--line-2); }
:root[data-theme="light"] .card__media img { filter: none; }
:root[data-theme="light"] .svc-row[data-world="data"] .mini-table { box-shadow: 0 0 0 1px color-mix(in srgb, var(--w) 30%, transparent), 0 20px 44px rgba(18, 21, 43, .1); }

/* Accentele fixe din spectru: aceleași nuanțe, mai închise, pentru text pe fundal deschis */
:root[data-theme="light"] .svc-row[data-world="copy"] { --w: #5a3fe0; }
:root[data-theme="light"] .svc-row[data-world="data"] { --w: #8a35c9; }
:root[data-theme="light"] .stage__item[data-kind="copy"] .stage__kind { color: #5a3fe0; }
:root[data-theme="light"] .stage__item[data-kind="date"] .stage__kind { color: #8a35c9; }
:root[data-theme="light"] .stage__item:hover .stage__name { color: var(--text); }
:root[data-theme="light"] .data-summary div:nth-child(2) b { color: #5a3fe0; }
:root[data-theme="light"] .data-summary div:nth-child(3) b { color: #8a35c9; }
:root[data-theme="light"] .apex__card--agents .apex__dir { color: #7d5a12; }
:root[data-theme="light"] .spectrum-text { background-image: linear-gradient(100deg, #00849f, #6a4dff 52%, #c21ac9); }
:root[data-theme="light"] .sev--high { background: rgba(196, 31, 75, .1); color: #b4234a; }
:root[data-theme="light"] .sev--mid { background: rgba(255, 190, 60, .18); }
:root[data-theme="light"] .choice input:checked + span { background: rgba(87, 37, 255, .08); border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); }
:root[data-theme="light"] .form input:focus-visible, :root[data-theme="light"] .form textarea:focus-visible, :root[data-theme="light"] .form select:focus-visible { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(87, 37, 255, .18); }
:root[data-theme="light"] .form input, :root[data-theme="light"] .form textarea, :root[data-theme="light"] .form select, :root[data-theme="light"] .choice span { background: var(--surface); }
:root[data-theme="light"] .after-send { background: var(--surface-2); }
:root[data-theme="light"] .copy-sheet[data-brand] { box-shadow: 0 0 0 1px var(--line-2), var(--sh-2); }
:root[data-theme="light"] .ad { box-shadow: 0 0 0 1px var(--line-2), var(--sh-1); }

/* Ce stă peste capturi (legende pe imagini, telefoane) rămâne în tema închisă: fundalul lor e o imagine întunecată */
:root[data-theme="light"] .stage__over { --text: #eef1ff; --cyan: #00e5ff; }
:root[data-theme="light"] .stage__over .stage__kind { color: #7cf3ff; }

/* Titlurile: trecerea de lumină folosește violet și turcoaz, vizibile pe deschis */
:root[data-theme="light"].js .hero__title, :root[data-theme="light"].js .page-head .h-display,
:root[data-theme="light"].js .sec-head.is-in .h-section, :root[data-theme="light"].js .closing .page > h2.is-in {
  background-image: linear-gradient(100deg, var(--text) 0 40%, #5725ff 47%, #00849f 53%, var(--text) 60% 100%); }

/* =====================================================================
   Telefon și tabletă: aceleași animații ca pe desktop
   Fără mouse nu există hover; site.js pune .is-focus pe cardul sau captura din mijlocul ecranului,
   iar efectele de hover se aprind exact ca pe desktop. Atingerea dă și ea răspuns imediat (:active).
   ===================================================================== */
@media (hover: none) {
  .card.is-focus { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
  .card.is-focus .card__media img { transform: scale(1.03); filter: none; }
  .card.is-focus .card__cta { background: rgba(87, 37, 255, .28); border-color: rgba(143, 116, 255, .7); }
  .card.is-focus .card__cta::after { transform: translateX(2px); }
  .card.is-focus, .work-item.is-focus, .xform__item.is-focus, .data-window.is-focus, .start-price.is-focus {
    background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 35%), rgba(87, 37, 255, .16), transparent 45%), var(--sheen); }
  .xform__item.is-focus { border-color: var(--line-2); transform: translateY(-2px); }
  a.frame.is-focus { border-color: rgba(255, 255, 255, .3); box-shadow: var(--sh-2), 0 0 0 1px rgba(0, 229, 255, .12); transform: translateY(-2px); }
  a.frame.is-focus > img { transform: scale(1.025); }
  a.frame.is-focus .chip { border-color: rgba(0, 229, 255, .6); transform: translateY(-3px); }
  .frame.phone.is-focus, .frame.stage__phone.is-focus, .frame.apex__phone.is-focus {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(0, 229, 255, .55), 0 0 0 3px rgba(87, 37, 255, .25), 0 34px 80px rgba(0, 0, 0, .65), 0 0 50px rgba(87, 37, 255, .35); }
  .frame.phone.is-focus > img { transform: scale(1.04); }
  .stage__item.is-focus .stage__thumb > img { transform: scale(1.04); }
  .ad.is-focus { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), var(--sh-3); }
  /* lumina orbitei pe margine */
  .card.is-focus::before, .work-item.is-focus::before, .xform__item.is-focus::before, .data-window.is-focus::before,
  a.frame.is-focus:not(.stage__phone):not(.phone)::before, .stage__item.is-focus .frame::before { opacity: 1; }
  /* atingerea: răspuns imediat, ca un clic */
  .card:active, a.frame:active, .stage__item:active .stage__thumb { transform: translateY(-1px) scale(.99); }
  .btn--primary:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 10px 30px rgba(87, 37, 255, .5), 0 0 0 1px rgba(0, 229, 255, .35); }
  .brand:active .brand__mark { transform: translateY(-1px) scale(1.06); }
  :root[data-theme="light"] .card.is-focus .card__cta { background: rgba(87, 37, 255, .1); border-color: rgba(87, 37, 255, .45); }
  :root[data-theme="light"] a.frame.is-focus, :root[data-theme="light"] .stage__item.is-focus .stage__thumb { border-color: rgba(87, 37, 255, .35); }
}
@media (hover: none) {
  .card.is-focus::before, .work-item.is-focus::before, .xform__item.is-focus::before, .data-window.is-focus::before,
  a.frame.is-focus::before, .stage__item.is-focus .frame::before { animation: wga-orbit 5s linear infinite; }
  /* trecerea de lumină a butonului principal, la atingere */
  .btn--primary:active::after { background-position: 150% 0; transition: background-position 1.12s var(--ease); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  /* logo-ul mare se înclină lent în spațiu, ca la trecerea mouse-ului pe desktop */
  .js .hero__brand .hero__logo { animation: logo-in 1.54s var(--ease) backwards, hero-tilt 8s 1.96s ease-in-out infinite alternate; }
}
@keyframes hero-tilt { from { transform: rotateX(2deg) rotateY(-6deg); } to { transform: rotateX(-1deg) rotateY(6deg); } }

/* Antetul paginii de site-uri: captura APEXVYRA (desktop) cu varianta de telefon alături, ca în prima secțiune */
.duo--head { padding-bottom: 6%; }
.duo--head .frame:first-child { width: 86%; aspect-ratio: 1200 / 683; }
.duo--head .phone { width: 24%; bottom: 0; }

/* ---------- WhatsApp: buton plutitor (apare doar dacă numărul e setat la build) ---------- */
.wa-float { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 25;
  display: inline-flex; align-items: center; gap: .55rem; min-height: 3.25rem; padding: .7rem; border-radius: var(--r-pill);
  background: #0f7f3c; color: #fff;   /* verde WhatsApp închis: textul alb are contrast 5,1:1 */ text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform var(--t-fast) ease, box-shadow var(--t-mid) var(--ease), background-color var(--t-fast) ease; }
.wa-float:hover { color: #fff; background: #0e7a39; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .2); }
.wa-float:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.wa-float svg { flex: none; }
.wa-float__text { padding-right: .35rem; }
@media (max-width: 40rem) { .wa-float__text { display: none; } .wa-float { padding: .75rem; } }
body[data-page="contact"] .wa-float { display: none; }   /* pe pagina de contact, WhatsApp e deja în lista „Sau direct” */
@media (prefers-reduced-motion: no-preference) { .js .wa-float { animation: rise .84s 1.68s var(--ease) backwards; } }
:root[data-theme="light"] .wa-float { box-shadow: 0 10px 26px rgba(18, 21, 43, .22), inset 0 1px 0 rgba(255, 255, 255, .25); }
@media print { .wa-float { display: none; } }

/* Câmp de completat înainte de publicare (ex. identitatea operatorului în politica de confidențialitate) */
mark.todo { background: #ffe066; color: #12152b; padding: .05em .3em; border-radius: 4px; font-weight: 700; }

/* Insigna publică pe care Netlify o injectează pe site (iframe #nl-badge-frame). Politica de securitate (CSP) îi blochează
   conținutul, așa că rămâne un dreptunghi invizibil de 216 × 92 px în colțul din dreapta-jos, care preia clicurile.
   Soluția de bază e oprirea insignei din setările Netlify; regula aceasta doar împiedică blocarea clicurilor până atunci. */
#nl-badge-frame { display: none !important; }

/* =====================================================================
   „Reducere mișcare” (setare de accesibilitate; pe multe telefoane o pornește și economisirea bateriei)
   Site-ul nu devine static: rămân lumina și culoarea (orbita pe margine, trecerea de lumină pe titluri și logo,
   halo-ul care respiră), iar intrările devin estompări pe loc. Dispar doar deplasările, înclinările și profunzimea.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 0; transition: opacity 1.26s ease; transition-delay: calc(var(--i, 0) * 100ms); }
  .js [data-reveal].is-in { opacity: 1; }
  .js .hero__logo { animation: fade-in 1.68s ease backwards; }
  .js .hero__brand::before { animation: fade-in 2.24s ease both, glow-breathe 7s 2.24s ease-in-out infinite alternate; }
  .js .hero__brand::after { animation: sweep 2.1s .77s cubic-bezier(.4, 0, .2, 1) both; }
  .brand__shine::before { animation: logo-shine 10s 2.1s ease-in-out infinite; }
  .js .hero .lede, .js .hero .btn-row, .js .proof, .js .page-head > *, .js .stage__main, .js .stage__phone, .js .stage__item { animation: fade-in 1.26s ease both; }
  .js .hero .lede { animation-delay: .56s; }
  .js .hero .btn-row { animation-delay: .73s; }
  .js .proof { animation-delay: .98s; }
  .js .stage__main { animation-delay: .21s; }
  .js .stage__phone { animation-delay: .49s; }
  .js .stage__item:nth-child(2) { animation-delay: .14s; }
  .js .stage__item:nth-child(3) { animation-delay: .28s; }
  .js .page-head > :nth-child(2) { animation-delay: .11s; }
  .js .page-head > :nth-child(3) { animation-delay: .22s; }
  .js .page-head > :nth-child(4) { animation-delay: .34s; }
  /* titlurile: aceeași trecere de lumină ca fără setare */
  .js .hero__title, .js .page-head .h-display, .js .sec-head.is-in .h-section, .js .closing .page > h2.is-in {
    background: linear-gradient(100deg, var(--text) 0 40%, #b9f6ff 47%, #e3d6ff 53%, var(--text) 60% 100%) 100% 0 / 260% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .js .hero__title { animation: fade-in 1.26s .35s ease both, text-light 2.24s 1.4s var(--ease) both; }
  .js .page-head .h-display { animation: fade-in 1.26s ease both, text-light 2.24s .98s var(--ease) both; }
  .js .sec-head.is-in .h-section, .js .closing .page > h2.is-in { animation: text-light 2.24s .42s var(--ease) both; }
  /* liniile de spectru se desenează (nu deplasează conținutul) */
  .sec-head .h-section::after { content: ""; display: block; width: 3.5rem; height: 3px; margin-top: var(--s4); border-radius: 3px;
    background: var(--spectrum); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s .35s var(--ease); }
  .sec-head.is-in .h-section::after { transform: scaleX(1); }
  .steps li::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease); transition-delay: calc(var(--i, 0) * 170ms + .21s); }
  .steps li.is-in::after { transform: scaleX(1); }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes glow-breathe { to { opacity: .65; } }

/* =====================================================================
   Previzualizarea mare a capturilor de telefon (site.js: „Captura de telefon, mărită”)
   Fundal de cinema, întunecat în ambele teme; telefonul vine din locul lui în centru, iar textul apare după el.
   ===================================================================== */
html.peek-open { overflow: hidden; }
.peek { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: #eef1ff; overflow: hidden; opacity: var(--fade, 1); transition: opacity .2s ease; }
.peek[open] { display: grid; place-items: center; }
.peek::backdrop { background: rgba(3, 4, 12, .9); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); }
.peek[open]::backdrop { animation: peek-in .6s ease both; }
.peek.is-closing::backdrop { animation: peek-out .5s ease both; }
.peek__glow { position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(38% 32% at 50% 40%, rgba(87, 37, 255, .5), rgba(0, 229, 255, .12) 50%, transparent 72%); filter: blur(24px); }
.peek[open] .peek__glow { animation: peek-in 1.2s .1s ease both; }
.peek.is-closing .peek__glow, .peek.is-closing .peek__cap, .peek.is-closing .peek__close { animation: peek-out .35s ease both; }
.peek__stage { position: relative; margin: 0; display: grid; justify-items: center; gap: 1.1rem; padding: 4.25rem 1rem 1.5rem; max-height: 100%; }
.peek__phone { position: relative; width: min(78vw, calc(62vh * 9 / 18.6)); width: min(78vw, calc(62svh * 9 / 18.6), 20rem); aspect-ratio: 9 / 18.6;
  padding: 7px; overflow: hidden; border-radius: 17% / 8.2%; background: linear-gradient(160deg, #2a2f45, #0b0d18 40%, #151a2c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(0, 0, 0, .7), 0 0 0 3px rgba(87, 37, 255, .28),
    0 50px 120px rgba(0, 0, 0, .75), 0 0 90px rgba(87, 37, 255, .45);
  translate: 0 var(--drag, 0px); transition: translate .45s var(--ease); touch-action: none; }
.peek__phone.is-drag { transition: none; }
.peek__phone::before { content: ""; position: absolute; z-index: 2; left: 50%; top: calc(7px + 2.2%); width: 30%; height: 3.2%; translate: -50% 0;
  border-radius: 999px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05); }
.peek__phone::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .1), transparent 32%); }
.peek__phone > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #000;
  border-radius: 13.5% / 6.4%; padding-top: 14%; }
.peek__cap { display: grid; justify-items: center; gap: .45rem; max-width: 22rem; text-align: center; }
.peek[open] .peek__cap { animation: peek-rise .8s .35s var(--ease) both; }
.peek__kind { margin: 0; font-family: var(--f-display); font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7cf3ff; }
.peek__title { margin: 0; font-family: var(--f-display); font-size: clamp(1.15rem, 1rem + 1.2vw, 1.5rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.peek__go { margin-top: .5rem; }
.peek__close { position: absolute; z-index: 4; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right));
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24); transition: background-color var(--t-fast) ease; }
.peek[open] .peek__close { animation: peek-in .6s .3s ease both; }
.peek__close:hover, .peek__close:active { background: rgba(255, 255, 255, .16); }
.peek__close:focus-visible, .peek__go:focus-visible { outline: 2px solid #00e5ff; outline-offset: 3px; }
@media (max-height: 34rem) { .peek__stage { grid-template-columns: auto minmax(0, 18rem); align-items: center; padding-top: 1rem; }
  .peek__phone { width: calc(80vh * 9 / 18.6); width: calc(80svh * 9 / 18.6); } .peek__cap { justify-items: start; text-align: left; } }
@keyframes peek-in { from { opacity: 0; } }
@keyframes peek-out { to { opacity: 0; } }
@keyframes peek-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .peek[open] .peek__cap { animation-name: peek-in; } }

/* Indiciul de pe capturile mici: se pot mări. Doar pe telefon și tabletă, unde site.js activează previzualizarea. */
.peek-hint { position: absolute; z-index: 4; left: 50%; bottom: 8%; translate: -50% 0; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; color: #fff; background: rgba(5, 6, 16, .62); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
@media (hover: none), (max-width: 52rem) { .work-item__shots .phone, .duo .phone { cursor: zoom-in; } }
.work-item__shots .phone[role="button"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }