/* GROM, grom.ro. Construit după design-system/GENFLOW-SPEC.md, cu paleta GROM. */

:root {
  --bg: #0a0a0a;
  --bg-raised: #111111;
  --bg-footer: #050505;
  --text: #ffffff;
  --muted: #9a9a9a;        /* 7.1:1 pe --bg */
  --label: #b3b3b3;
  --card-text: #bdbdbd;
  --accent: #f2cb05;
  --accent-ink: #0a0a0a;
  --hair-1: rgba(255, 255, 255, .06);
  --hair-2: rgba(255, 255, 255, .1);
  --hair-3: rgba(255, 255, 255, .2);
  --hair-solid: #1d1d1d;
  --field-line: #6b6b6b;
  --danger: #ff6b5e;
  --ok: #7bd88f;

  /* Scara de colțuri, măsurată pe genflow.com */
  --r-pill: 999px;   /* butoane, etichete */
  --r-xl: 48px;      /* carduri mari (servicii) */
  --r-lg: 25px;      /* carduri cu oameni */
  --r-md: 20px;      /* imagini de lucrări, panouri video */
  --r-sm: 12px;      /* carduri mici, câmpuri, imagini interioare */

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.165, .84, .44, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* Negrul stă pe html, ca să fie și în zona care apare la tras de sus/jos (overscroll), nu griul browserului.
   Body rămâne transparent, altfel ar acoperi luminile de fundal (z -2). */
html { -webkit-text-size-adjust: 100%; background-color: var(--bg); }
/* Derularea lină pornește abia după încărcare (clasa .loaded din main.js). Altfel Safari începe o derulare lină
   spre #secțiune cât pagina încă se încarcă și se oprește la jumătate, pe o zonă încă ascunsă. */
@media (prefers-reduced-motion: no-preference) { html.loaded { scroll-behavior: smooth; } }
/* Pagină deschisă direct cu #secțiune: fără apariții la derulare, totul se vede imediat */
.js.from-hash .reveal { opacity: 1; transform: none; transition: none; }
body {
  margin: 0; background: transparent; color: var(--text);
  font-family: var(--font); font-size: 18px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
/* Fundal care respiră: două lumini fixe, gri și galbenă, care se mișcă încet și se estompează pe rând.
   Ascunse cât ești pe hero (are lumina lui); apar lin după ce îl derulezi (clasa past-hero, din main.js). */
@property --amb { syntax: "<number>"; inherits: true; initial-value: 0; }
html.past-hero { --amb: 1; }
/* Straturi: luminile (z -2) sub granulație (z -1), totul sub conținut */
body::before, body::after {
  content: ""; position: fixed; inset: -12%; z-index: -2; pointer-events: none;
  transition: --amb 1.6s ease; will-change: transform, opacity;
}
/* Fiecare lumină se stinge în curbă (mai multe opriri), nu liniar, ca să nu apară inele */
body::before {
  background:
    radial-gradient(ellipse 48% 40% at 22% 30%, rgba(255, 255, 255, calc(.045 * var(--amb))), rgba(255, 255, 255, calc(.032 * var(--amb))) 25%, rgba(255, 255, 255, calc(.017 * var(--amb))) 50%, rgba(255, 255, 255, calc(.006 * var(--amb))) 75%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 42% 38% at 80% 78%, rgba(242, 203, 5, calc(.05 * var(--amb))), rgba(242, 203, 5, calc(.035 * var(--amb))) 25%, rgba(242, 203, 5, calc(.019 * var(--amb))) 50%, rgba(242, 203, 5, calc(.007 * var(--amb))) 75%, rgba(242, 203, 5, 0) 100%);
  animation: amb-a 23s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(ellipse 50% 42% at 76% 26%, rgba(242, 203, 5, calc(.085 * var(--amb))), rgba(242, 203, 5, calc(.06 * var(--amb))) 25%, rgba(242, 203, 5, calc(.032 * var(--amb))) 50%, rgba(242, 203, 5, calc(.012 * var(--amb))) 75%, rgba(242, 203, 5, 0) 100%),
    radial-gradient(ellipse 40% 36% at 18% 82%, rgba(255, 255, 255, calc(.035 * var(--amb))), rgba(255, 255, 255, calc(.025 * var(--amb))) 25%, rgba(255, 255, 255, calc(.013 * var(--amb))) 50%, rgba(255, 255, 255, calc(.005 * var(--amb))) 75%, rgba(255, 255, 255, 0) 100%);
  animation: amb-b 17s ease-in-out infinite alternate;
}
/* Granulație fină peste toată pagina, ca să nu se vadă trepte (banding) în nicio lumină:
   fundal, hero, conturul videoului, cardurile. Imagine de zgomot la rezoluție retina (256 px afișați la 128),
   amestec normal, maxim ~2,7% opacitate pe pixel: pe poze nu se vede, dar sparge inelele din degradeuri. */
html::before {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  /* main.js generează un dither de 1-2 trepte din 255, câte un punct pe fiecare pixel fizic (--dither, --dither-size).
     Imaginea statică e doar rezerva fără JavaScript. pixelated: punctele nu se întind și nu se încețoșează. */
  background-image: var(--dither, url("/assets/img/grain.png"));
  background-repeat: repeat; background-position: 0 0;
  background-size: var(--dither-size, 128px) var(--dither-size, 128px);
  image-rendering: pixelated;
}
/* Fundalul desenat în WebGL (assets/js/bg.js): fără benzi și fără granulație. Când e activ (html.gl-bg),
   straturile CSS de rezervă și granulația de deasupra se opresc. */
canvas.gl-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; pointer-events: none; }
html.gl-bg::before, html.gl-bg body::before, html.gl-bg body::after, html.gl-bg .hero::before { display: none; }
@keyframes amb-a { from { transform: translate3d(-4%, -3%, 0) scale(1); opacity: .6; } to { transform: translate3d(4%, 3%, 0) scale(1.12); opacity: 1; } }
@keyframes amb-b { from { transform: translate3d(3%, 2%, 0) scale(1.1); opacity: 1; } to { transform: translate3d(-3%, -4%, 0) scale(1); opacity: .3; } }

img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 12px 18px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 16px; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container.wide { max-width: 1280px; }
.container.mid { max-width: 1148px; }

/* Tipografie */
.h1 { font-size: clamp(32px, 4.05vw, 58px); line-height: 1; letter-spacing: -0.02em; }
.h2 { font-size: clamp(30px, 4.45vw, 64px); line-height: 1.05; letter-spacing: -0.02em; }
.eyebrow { font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--accent); }
.lead { font-size: 18px; line-height: 1.4; color: var(--muted); max-width: 650px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* Buton: o singură formă, pastilă de 56px */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; min-width: 280px; padding: 0 28px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); border: 0;
  font-size: 18px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: box-shadow .12s ease, transform .12s ease;
}
.btn:hover { box-shadow: 0 16px 40px rgba(242, 203, 5, .32), 0 33px 80px rgba(242, 203, 5, .2); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--hair-3); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--text), 0 16px 40px rgba(255, 255, 255, .08); }
.btn.small { min-width: 220px; }
/* Buton de sticlă: semi-transparent, estompează ce e în spate, cu o muchie de lumină sus */
.btn.glass {
  background: rgba(255, 255, 255, .08); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 24px -8px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  transition: background-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.btn.glass:hover { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 28px -8px rgba(0, 0, 0, .55); }
.btn[disabled] { opacity: .6; cursor: progress; }
.link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link:hover { color: var(--accent); }

/* Antet de secțiune */
.head { display: grid; gap: 16px; margin-bottom: 56px; }
.head.split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 960px) { .head.split { grid-template-columns: minmax(0, 660px) auto; justify-content: space-between; gap: 48px; } }

/* 1. Hero */
.hero { position: relative; padding: 30px 0 120px; text-align: center; overflow: hidden; }
.hero::before {
  /* Lumina stă în hero și se stinge complet înainte de marginea de jos, fără linie dură spre secțiunea următoare */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: max(1600px, 100%); transform: translateX(-50%); z-index: -2;
  background: radial-gradient(ellipse 42% 75% at 50% 82%, rgba(120, 120, 120, .26), rgba(120, 120, 120, .1) 45%, rgba(120, 120, 120, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  pointer-events: none;
}
.hero .logo { display: inline-flex; min-height: 44px; align-items: center; }
.hero .logo img { width: 150px; height: auto; }
.hero h1 { position: relative; max-width: 1100px; margin: 80px auto 0; }
.hero .lead { position: relative; margin: 14px auto 0; }
.hero .actions { position: relative; margin-top: 40px; display: flex; justify-content: center; }
.js .hero .fade { opacity: 0; animation: fade-in .9s var(--ease) .1s forwards; }
@keyframes fade-in { to { opacity: 1; } }

.block-title { font-size: 26px; margin-bottom: 20px; }

/* 2. Rând de oameni, derulare continuă */
.people { position: relative; margin-top: -40px; }
.people h2 { font-size: 24px; font-weight: 600; text-align: center; margin-bottom: 32px; }
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; gap: 36px; padding: 0 18px; }
.marquee.brands .marquee-track { gap: 72px; }
/* Mișcarea o face main.js (.rolling): copii cât să acopere 2560 px, pauză doar din buton, mouse sau tastatură.
   Fără JS rămâne animația CSS simplă; pauza la hover doar unde există mouse. */
.marquee.rolling:not(.works) .marquee-track { will-change: transform; }
html:not(.js) .marquee:not(.works) .marquee-track { padding: 0 calc(var(--gap, 36px) / 2); animation: marquee 60s linear infinite; }
html:not(.js) .marquee.brands .marquee-track { --gap: 72px; animation-duration: 35s; }
@media (hover: hover) and (pointer: fine) { html:not(.js) .marquee:hover .marquee-track { animation-play-state: paused; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Lucrări alese: rând care merge singur și se poate derula de mână (swipe, trackpad, tras cu mouse-ul) */
.marquee.works { margin-top: 48px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; cursor: grab; }
.marquee.works::-webkit-scrollbar { display: none; }
.marquee.works.dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.marquee.works:focus-visible { outline-offset: -2px; }
.marquee.works .marquee-track { gap: 30px; padding: 0 15px; }
.marquee.works .work-item { flex: 0 0 auto; width: clamp(260px, 28vw, 410px); min-width: 0; }
.marquee.works img { -webkit-user-drag: none; }
.anchor-alias { display: block; height: 0; }
.marquee-ctl { display: flex; justify-content: center; margin-top: 20px; }
.marquee-ctl button { background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; min-height: 44px; padding: 0 12px; text-decoration: underline; text-underline-offset: 4px; }
.marquee-ctl button:hover { color: var(--text); }
.person { position: relative; flex: 0 0 auto; width: 288px; height: 414px; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-raised); }
.person img, .person video { width: 100%; height: 100%; object-fit: cover; }
.person::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .01) 55%, rgba(0, 0, 0, .82)); }
.person .meta { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: grid; gap: 4px; }
.person strong { font-size: 20px; font-weight: 600; line-height: 1.2; }
.person span { font-size: 16px; font-weight: 500; color: var(--label); }

/* 3. Branduri */
.brands-sec { margin: 80px 0 160px; }
.brands-sec h2 { font-size: 24px; font-weight: 600; text-align: center; margin-bottom: 40px; }
/* Logo-uri albe; fiecare are înălțimea lui (--lh), aleasă pe ochi ca banda să pară egală */
.brand-logo { flex: 0 0 auto; display: flex; align-items: center; height: 64px; }
.brand-logo img { display: block; height: var(--lh, 36px); width: auto; max-width: none; opacity: .62; transition: opacity .4s ease; }
.brand-logo:hover img { opacity: 1; }
.marquee.brands { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* 4. Cifre */
.numbers { padding-bottom: 100px; }
.numbers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
@media (min-width: 960px) { .numbers-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.number { display: grid; gap: 8px; }
.number strong {
  font-size: clamp(44px, 4.45vw, 64px); font-weight: 600; line-height: 1.4; letter-spacing: -0.02em;
  background: linear-gradient(270deg, #3a3a3a, #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.number span { font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--label); }
@media (max-width: 959px) { .number span { font-size: 15px; } }

/* 5. Panou video și capabilități */
.section { padding: 120px 0; }
.section.tight-top { padding-top: 40px; }
/* Panoul are raportul bannerului GROM (1920 x 900), ca video-ul să nu fie tăiat sau mărit */
.panel { position: relative; max-width: 1100px; margin: 0 auto; aspect-ratio: 1920 / 900; border-radius: var(--r-md); overflow: hidden; background: var(--bg-raised); }
.panel video, .panel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.panel + .marquee-ctl, .panel-halo + .marquee-ctl { margin-top: 8px; }
/* Videoul principal: margine de sticlă (contur alb translucid, lumină fină pe muchia de sus) și o umbră mică,
   ca să stea puțin deasupra fundalului. Umbra e scurtă: umbrele largi și slabe fac trepte vizibile. */
.panel[data-slot="showcase"] {
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px -10px rgba(0, 0, 0, .6);
}
.panel[data-slot="showcase"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .04);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 28%);
}
.panel-halo { position: relative; max-width: 1100px; margin: 0 auto; }
.caps-title { font-size: 24px; line-height: 1.1; text-align: center; margin: 64px 0 32px; }
.caps { display: grid; gap: 16px; max-width: 1100px; margin: 0 auto; }
@media (min-width: 900px) { .caps { grid-template-columns: 1fr 1fr; } }
.caps li {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 20px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .02); border: 1px solid var(--hair-1); box-shadow: inset 0 -4px 12px rgba(255, 255, 255, .06);
  font-size: 16px; line-height: 1.5;
}
.caps li::before { content: ""; flex: 0 0 auto; width: 10px; height: 6px; margin: 0 4px 3px 2px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* 6. Servicii, carduri mari */
/* minmax(0, 1fr) + min-width: 0: coloana are exact lățimea containerului. Fără ele, Safari lărgește coloana
   după mărimea proprie a video-ului din card (1920 px) și cardul iese din ecran pe iPhone. */
.bento { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.bento > * { min-width: 0; }
@media (min-width: 960px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .svc.big { grid-column: span 2; } .svc.wide { grid-column: 1 / -1; } }
.svc { position: relative; display: flex; flex-direction: column; min-height: 480px; border-radius: var(--r-xl); border: 1px solid var(--hair-2); background: var(--bg-raised); text-decoration: none; color: var(--text); scroll-margin-top: 24px; }
.svc .body { position: relative; z-index: 1; padding: 44px 40px 0; text-align: center; display: grid; gap: 10px; justify-items: center; }
.svc h3 { font-size: 26px; line-height: 1.2; }
.svc p { font-size: 16px; line-height: 1.3; color: var(--card-text); max-width: 46ch; }
/* Imaginea se taie în media (colțurile cardului), nu în card, ca lumina din jurul cardului să nu fie tăiată */
.svc .media { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.svc .media img, .svc .media video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc:hover .media { --h: 1.03; }
.svc .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, .96) 0%, rgba(10, 10, 10, .72) 28%, rgba(10, 10, 10, 0) 58%); }
/* Cardul lat (Branding): textul nu stă peste video. Pe telefon video-ul e sub text, întreg (16:9);
   pe calculator textul e în stânga și video-ul în dreapta. */
.svc .media picture { display: contents; }
/* Card cu imagine care are deja textul ei (bannerul de podcast, varianta albă). Pe ecrane înguste: textul cardului
   deasupra, dedesubt bannerul întreg, necropat (srcMobile, 1000 px). Pe calculator: bannerul umple cardul. */
@media (max-width: 959px) {
  .svc.own-text { min-height: 0; }
  .svc.own-text .body { order: 1; }
  .svc.own-text .media { order: 2; position: relative; inset: auto; aspect-ratio: 1920 / 1080; margin: 24px 16px 16px; border-radius: var(--r-sm); overflow: hidden; }
  .svc.own-text .media::after { display: none; }
}
@media (min-width: 960px) {
  /* Bannerul acoperă cardul, aliniat la stânga (încadrarea x 0%), deci se taie doar gradientul din dreapta, titlul rămâne întreg */
  .svc.own-text { background: #fdfdfd; }
  .svc.own-text .media::after { display: none; }
  .svc.own-text .body { position: static; padding: 0; }
  .svc.own-text .body > * { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Cardurile de servicii: margine de sticlă discretă (lumină fină pe muchia de sus) și o umbră mică, ca la videoul principal.
   Stratul stă peste imagine, deci se vede și pe cardurile cu poză pe tot fundalul. */
.svc { box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 32px -12px rgba(0, 0, 0, .55); }
.svc::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; transition: box-shadow .3s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.svc:hover::before, .svc:focus-visible::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.svc.wide { min-height: 0; }
.svc.wide .body { order: 1; }
.svc.wide .media { order: 2; position: relative; inset: auto; aspect-ratio: 16 / 9; margin: 24px 16px 16px; border-radius: var(--r-sm); overflow: hidden; }
.svc.wide .media::after { display: none; }
@media (min-width: 960px) {
  /* Video-ul rămâne exact 16:9 la orice lățime (853 x 480 în containerul de 1152); textul ia restul, minimum 300 px */
  .bento > .svc.wide { flex-direction: row; min-height: 0; }
  .svc.wide .body { flex: 1 1 auto; align-content: center; justify-items: start; text-align: left; padding: 40px 28px 40px 40px; }
  .svc.wide .media { flex: 0 0 auto; align-self: flex-start; width: min(853px, 100% - 300px); aspect-ratio: 16 / 9; margin: 0; border-radius: 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0; }
}
/* Safari (iPhone): într-un card flex pe coloană, cutia cu aspect-ratio crește până la mărimea proprie a video-ului
   (1920x1080), pentru că min-height/min-width „auto” iau mărimea conținutului. Scoatem imaginea și video-ul din calcul
   (absolute) și punem minimele pe 0, ca mărimea să vină doar din lățimea cardului și din proporție. */
.svc.wide .media, .svc.own-text .media { min-width: 0; min-height: 0; }
@media (max-width: 959px) { .svc.wide .media, .svc.own-text .media { flex: 0 0 auto; } }
.svc.wide .media :is(img, video), .svc.own-text .media :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; }

/* „Mai facem și”: servicii fără portofoliu încă, ca etichete discrete sub cele cinci carduri. Flex cu wrap și min-width 0,
   ca textele lungi să treacă pe rândul următor fără scroll pe orizontală. */
.also { margin: 40px auto 0; max-width: 900px; text-align: center; }
.also-title { font-size: 15px; font-weight: 500; color: var(--muted); margin: 0 0 14px; }
.also-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.also-list li { min-width: 0; max-width: 100%; }
.also-list a { display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--field-line); color: var(--muted); font-size: 14px; line-height: 1.3; text-decoration: none; transition: border-color .18s, color .18s; }
.also-list a:hover, .also-list a:focus-visible { border-color: var(--accent); color: var(--accent); }
.also-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 7. Lucrări alese */
.work-item { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.work-item .media { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hair-3); background: var(--bg-raised); }
.work-item .media img, .work-item .media video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.work-item .media { --dy: 30%; }
.work-item:hover .media { --h: 1.04; }
.work-item strong { font-size: 20px; font-weight: 500; line-height: 1.2; }
.work-item span { font-size: 16px; font-weight: 300; color: #c9cbcf; }
.work-item .meta { display: grid; gap: 4px; }

/* 8. Pachete de social media, fără prețuri: sticlă lejeră, ca la cardurile de servicii */
.plans { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 36px 32px 32px; border-radius: 24px; text-align: center; align-items: center;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 4px rgba(0, 0, 0, .3), 0 14px 32px -12px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.plan.pick { border-color: rgba(242, 203, 5, .4); }
.plan h3 { font-size: 22px; }
.plan .tag { position: absolute; top: 14px; left: 0; right: 0; font-size: 13px; font-weight: 600; color: var(--accent); }
.plan.pick h3 { margin-top: 10px; }
.plan .price { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.plan .price small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid rgba(255, 255, 255, .08); }
.plan li { padding: 12px 0; font-size: 16px; line-height: 1.35; color: rgba(255, 255, 255, .85); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.plan .btn { margin-top: auto; min-width: 0; width: 100%; }
.note { margin-top: 24px; font-size: 16px; color: var(--muted); text-align: center; }

/* 9. Show-uri: video mare */
.film { max-width: 1280px; margin: 48px auto 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--bg-raised); }
.film video, .film img { width: 100%; height: 100%; object-fit: cover; }
.film-cta { display: flex; justify-content: center; margin-top: 40px; }

/* 10. Cum lucrăm */
.steps { display: grid; gap: 16px; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding: 28px 24px; border-radius: 16px; border: 1px solid var(--hair-solid); background: #0c0c0c; display: grid; gap: 10px; align-content: start; text-align: center; }
.step h3 { font-size: 24px; font-weight: 600; line-height: 1.1; }
.step p { font-size: 15px; line-height: 1.45; color: var(--muted); }

/* 11. Contact */
.contact-sec { padding: 80px 0 120px; text-align: center; }
.contact-sec .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.direct { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin-top: 24px; font-size: 16px; }
.direct a { display: inline-flex; align-items: center; min-height: 44px; color: var(--label); text-decoration: underline; text-underline-offset: 4px; }
.direct a:hover { color: var(--text); }

/* Footer */
.footer { background: var(--bg-footer); padding: 72px 0 32px; text-align: center; }
.footer .logo, .page-top .logo { display: inline-flex; align-items: center; min-height: 48px; }
.footer .logo img { width: 130px; height: auto; margin: 0 auto; }
.footer p { font-size: 14px; font-weight: 300; line-height: 1.3; color: rgba(255, 255, 255, .7); max-width: 420px; margin: 18px auto 0; }
.footer h2 { font-size: 18px; font-weight: 600; margin: 40px 0 8px; }
.footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; }
.footer ul a, .footer .link-btn { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 500; color: #8a8a8b; text-decoration: none; transition: color .3s ease; }
.footer ul a:hover, .footer .link-btn:hover { color: var(--text); }
.footer .legal { margin-top: 32px; padding-top: 24px; border-top: 1px solid #161616; font-size: 14px; color: var(--label); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; }

/* Pagini interioare (contact, confidențialitate, 404) */
.page-top { padding: 30px 0 0; text-align: center; }
.page-top .logo img { width: 130px; height: auto; margin: 0 auto; }
.page-head { padding: 72px 0 48px; text-align: center; }
.page-head .lead { margin: 16px auto 0; }
.contact-grid { display: grid; gap: 48px; padding-bottom: 120px; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 72px; } }
.options { display: grid; gap: 12px; align-content: start; }
.option { display: grid; gap: 4px; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--hair-solid); background: #0e0e0e; text-decoration: none; transition: border-color .2s ease; }
a.option:hover { border-color: var(--hair-3); }
.option strong { font-size: 19px; }
.option span { color: var(--muted); font-size: 15px; }
.option.primary { border-color: rgba(242, 203, 5, .55); }
.company { margin-top: 24px; color: var(--muted); font-size: 15px; line-height: 1.7; }

.form { display: grid; gap: 22px; }
.form .row { display: grid; gap: 22px; }
@media (min-width: 640px) { .form .row.two { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-weight: 600; font-size: 16px; padding: 0; }
.field .opt { color: var(--muted); font-weight: 400; }
.field .help { color: var(--muted); font-size: 14px; }
.field .error { color: var(--danger); font-size: 14px; font-weight: 500; }
.field .error:empty { display: none; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: var(--r-sm);
  background: #101010; border: 1px solid var(--field-line); font-size: 17px; transition: border-color .18s;
}
textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
input:hover, select:hover, textarea:hover { border-color: #8a8a8a; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--accent); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--field-line); background: #101010; font-weight: 500; transition: border-color .18s, background-color .18s, color .18s; }
.chip input:hover + span { border-color: #8a8a8a; }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: 16px 18px; border-radius: var(--r-sm); border: 1px solid var(--hair-2); background: #101010; }
.form-status:empty { display: none; }
.form-status.ok { border-color: var(--ok); }
.form-status.err { border-color: var(--danger); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-foot p { color: var(--muted); font-size: 14px; max-width: 46ch; }
.form-foot .btn { min-width: 220px; }

.legal-text { max-width: 72ch; margin: 0 auto; padding-bottom: 120px; }
.legal-text h2 { font-size: 26px; margin: 48px 0 12px; }
.legal-text p, .legal-text li { color: #cfcfcf; }
.legal-text p + p { margin-top: 1em; }
.legal-text ul { list-style: disc; padding-left: 22px; margin: 12px 0; }
.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--hair-2); border-radius: var(--r-sm); }
.legal-text table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 560px; }
.legal-text th, .legal-text td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--hair-2); color: #cfcfcf; }
.legal-text tr:last-child td { border-bottom: 0; }
.legal-text th { color: var(--text); font-weight: 600; }
.notfound { min-height: 60vh; display: grid; align-content: center; justify-items: center; gap: 24px; text-align: center; padding: 48px 0; }

/* Banner cookie */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; max-width: 640px; margin: 0 auto;
  background: #121212; border: 1px solid var(--hair-3); border-radius: 20px; padding: 20px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
}
.consent p { margin: 0; flex: 1 1 280px; font-size: 15px; }
.consent-actions { display: flex; gap: 8px; flex: 1 1 auto; justify-content: flex-end; }
.consent-actions .btn { min-width: 0; min-height: 48px; padding: 0 20px; font-size: 16px; }

/* Apariții la derulare */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.fadeonly { transform: none; }
.js .reveal.in { opacity: 1; transform: none; }

/* Telefon */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-bottom: 96px; }
  .hero .logo img { width: 120px; }
  .hero h1 { margin-top: 56px; }
  .hero .lead, .lead { font-size: 16px; }
  .btn { width: 100%; min-width: 0; min-height: 48px; font-size: 17px; }
  .people { margin-top: -24px; }
  .person { width: 220px; height: 300px; }
  .brand-logo { height: 46px; }
  .brand-logo img { height: calc(var(--lh, 36px) * .72); }
  .marquee.brands .marquee-track { gap: 44px; }
  .section { padding: 88px 0; }
  .head { margin-bottom: 36px; }
  .eyebrow { font-size: 14px; }
  .panel { border-radius: var(--r-sm); }
  .caps-title { font-size: 22px; margin-top: 44px; }
  .svc { min-height: 440px; border-radius: 32px; }
  .svc .body { padding: 32px 24px 0; }
  .film { border-radius: var(--r-sm); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .hero .fade { opacity: 1; transform: none; }
  .marquee { overflow-x: auto; }
  .marquee .dup { display: none !important; }
  .marquee-ctl { display: none; }
}

/* Încadrarea aleasă din admin: poziție (procente) și zoom, separat pentru telefon.
   Valorile vin ca variabile pe imagine: --x --y --z, iar pentru telefon --mx --my --mz. */
.person :is(img, video), .svc .media :is(img, video), .work-item .media :is(img, video), .panel :is(img, video), .film :is(img, video) {
  object-position: var(--x, 50%) var(--y, var(--dy, 50%));
  transform: scale(calc(var(--z, 1) * var(--h, 1)));
  transform-origin: var(--x, 50%) var(--y, var(--dy, 50%));
}
@media (max-width: 640px) {
  .person :is(img, video), .svc .media :is(img, video), .work-item .media :is(img, video), .panel :is(img, video), .film :is(img, video) {
    object-position: var(--mx, var(--x, 50%)) var(--my, var(--y, var(--dy, 50%)));
    transform: scale(calc(var(--mz, var(--z, 1)) * var(--h, 1)));
    transform-origin: var(--mx, var(--x, 50%)) var(--my, var(--y, var(--dy, 50%)));
  }
}

.nowrap { white-space: nowrap; }