/* ============================================================
   Flou + Gumm — motor de leaduri
   Tokeni din design system-ul Flou, cu accentul corectat la #D43A1A
   (cel din productie, AA-safe), nu #F15533 din skill.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  --background: #fffef5;
  --foreground: #0f0f0f;
  --surface: #fafafa;
  --dark-bg: #0a0a0a;
  --dark-2: #131313;

  --accent: #d43a1a;
  --accent-bright: #f15533;
  --accent-hover: #d94a2a;
  --accent-light: #ffa587;

  --err-text: #b91c1c;
  --err-border: #dc2626;

  --fg-70: rgba(15, 15, 15, 0.7);
  --fg-60: rgba(15, 15, 15, 0.6);
  --fg-40: rgba(15, 15, 15, 0.4);
  --fg-10: rgba(15, 15, 15, 0.1);
  --fg-05: rgba(15, 15, 15, 0.05);

  --on-dark-70: rgba(255, 255, 255, 0.7);
  --on-dark-55: rgba(255, 255, 255, 0.55);
  --on-dark-10: rgba(255, 255, 255, 0.1);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Helvetica, Arial, sans-serif;
  /* Monospace doar pentru etichete si cifre, imprumutat din estetica
     emailmaster.ro. Nu pentru corpul de text. */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 22px;
  --r-pill: 9999px;

  --shadow-card: 0.16px 0.56px 0.41px -0.31px rgba(0, 0, 0, 0.07),
    0.48px 1.69px 1.23px -0.63px rgba(0, 0, 0, 0.08),
    1.28px 4.47px 3.25px -0.94px rgba(0, 0, 0, 0.1),
    4px 14px 10.19px -1.25px rgba(0, 0, 0, 0.19);
  --shadow-lift: 0 24px 48px -18px rgba(0, 0, 0, 0.28);
  --shadow-cinematic: 0 40px 100px -20px rgba(0, 0, 0, 0.8);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1180px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
.narrow { max-width: 800px; }

.section { padding: 76px 0; scroll-margin-top: 84px; }
@media (min-width: 768px) { .section { padding: 108px 0; } }
.section.dark { background: var(--dark-bg); color: #fff; }
.section.surface { background: var(--surface); }
.section.tight { padding-top: 0; }

/* ---------- tipografie ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-60);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex: 0 0 auto;
}
.eyebrow.on-dark { color: var(--on-dark-55); }

h1, h2, h3 {
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  font-weight: 600;
}
h1 { font-size: clamp(36px, 6.4vw, 66px); }
h2 { font-size: clamp(28px, 4.6vw, 46px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); }
.accent { color: var(--accent); }
.dark .accent { color: var(--accent-bright); }

.lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--fg-70);
  line-height: 1.6;
  margin: 20px 0 0;
  max-width: 640px;
}
.dark .lead { color: var(--on-dark-70); }

/* ---------- butoane ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--r-pill);
  padding: 16px 34px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
  white-space: nowrap;
}
.btn.primary { background: var(--foreground); color: #fff; }
.btn.primary:hover { background: #1a1a1a; transform: scale(1.03); }
.btn.coral { background: var(--accent); color: #fff; }
.btn.coral:hover { background: var(--accent-hover); transform: scale(1.03); }
.btn.ghost {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--fg-10);
}
.btn.ghost:hover { background: var(--fg-05); }
.dark .btn.ghost {
  color: #fff;
  border-color: var(--on-dark-10);
  background: rgba(255, 255, 255, 0.04);
}
.dark .btn.ghost:hover { background: rgba(255, 255, 255, 0.09); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.btn.full { width: 100%; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 10px 0;
  background: rgba(255, 254, 245, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fg-05);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}
/* Lockup-ul: cele doua logo-uri la aceeasi inaltime optica, cu un plus discret
   intre ele. Fisierele au fost taiate pe cerneala (logo-flou avea 125px de gol
   la dreapta, care facea plusul sa atarne departe de marca). */
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
}
.marca .lg-flou { height: 27px; width: auto; flex: 0 0 auto; }
.marca .lg-gumm { height: 23px; width: auto; flex: 0 0 auto; }
.marca .sep-plus {
  color: var(--fg-40);
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
}
.marca .de {
  margin-left: 4px;
  padding-left: 11px;
  border-left: 1px solid var(--fg-10);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--fg-40);
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-dr { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.nav .btn { padding: 12px 20px; font-size: 14px; min-height: 44px; }
.nav-dr .pastila {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
}
.nav-dr .cine-e {
  font-size: 14px;
  font-weight: 500;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Pe telefon incap logo-ul si UN buton. Eticheta "analiza video" si linkul
   secundar pica primele: erau exact ce se suprapunea pe 360px. */
@media (max-width: 720px) {
  .marca .de { display: none; }
  .doar-lat { display: none; }
}
@media (max-width: 420px) {
  .nav .btn { padding: 11px 15px; font-size: 13px; }
  .marca .lg-flou { height: 24px; }
  .marca .lg-gumm { height: 20px; }
  .nav-dr .cine-e { max-width: 30vw; }
}

/* ---------- hero ---------- */
.hero { padding: 52px 0 20px; position: relative; }
@media (min-width: 768px) { .hero { padding: 78px 0 28px; } }
.hero h1 { max-width: 16ch; }

/* Caseta de link: intrarea in tot fluxul. Un singur camp, vizibil din prima. */
.lansator { margin-top: 34px; max-width: 620px; }
.lansator-tab {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--fg-05);
  border-radius: var(--r-pill);
  margin-bottom: 12px;
}
.lansator-tab button {
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-60);
  transition: all 0.18s var(--ease-out);
}
.lansator-tab button[aria-pressed="true"] {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-card);
}
.lansator-camp {
  display: flex;
  gap: 8px;
  padding: 7px 7px 7px 20px;
  background: var(--background);
  border: 1px solid var(--fg-10);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s var(--ease-out);
  flex-wrap: wrap;
}
.lansator-camp:focus-within { border-color: var(--accent); }
.lansator-camp input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 46px;
  border: none;
  outline: none;
  background: transparent;
  padding: 13px 0;
  font-size: 15px;
  color: var(--foreground);
}
.lansator-camp input::placeholder { color: var(--fg-40); }
.lansator-camp .btn { padding: 15px 28px; flex: 0 0 auto; }
.lansator-nota {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--fg-60);
  min-height: 20px;
}
.lansator-nota.rau { color: var(--err-text); }

.hero-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 26px;
  font-size: 13px;
  color: var(--fg-60);
}
.hero-sub span { display: inline-flex; align-items: center; gap: 7px; }
.hero-sub span::before {
  content: "";
  width: 15px; height: 15px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* ---------- banda de logo-uri ---------- */
.banda {
  margin-top: 62px;
  border-top: 1px solid var(--fg-10);
  border-bottom: 1px solid var(--fg-10);
  padding: 22px 0;
  overflow: hidden;
  position: relative;
}
.banda::before, .banda::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2;
  pointer-events: none;
}
.banda::before { left: 0; background: linear-gradient(90deg, var(--background), transparent); }
.banda::after { right: 0; background: linear-gradient(270deg, var(--background), transparent); }
.banda-pista {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: gliseaza 38s linear infinite;
}
.banda img {
  height: 30px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.2s, filter 0.2s;
}
.banda img:hover { opacity: 1; filter: none; }
@keyframes gliseaza {
  to { transform: translateX(-50%); }
}

/* ---------- cifre animate ---------- */
.cifre {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
  margin-top: 52px;
}
@media (min-width: 860px) { .cifre { grid-template-columns: repeat(4, 1fr); } }
.cifra { position: relative; padding-top: 22px; border-top: 2px solid var(--fg-10); }
.dark .cifra { border-top-color: var(--on-dark-10); }
.cifra b {
  display: block;
  font-size: clamp(38px, 5.6vw, 62px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.cifra .u { color: var(--accent); font-size: inherit; }
.dark .cifra .u { color: var(--accent-bright); }
.cifra > span {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-60);
  max-width: 24ch;
}
.dark .cifra > span { color: var(--on-dark-55); }

/* ---------- selector industrie ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip {
  border: 1px solid var(--fg-10);
  background: var(--background);
  color: var(--foreground);
  border-radius: var(--r-pill);
  padding: 11px 18px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.18s var(--ease-out);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.panel {
  margin-top: 32px;
  border: 1px solid var(--fg-10);
  border-radius: var(--r-xl);
  background: var(--background);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.panel[hidden] { display: none; }
.panel-head { padding: 24px; border-bottom: 1px solid var(--fg-10); }
.panel-head h3 { margin: 0 0 6px; }
.panel-head p { margin: 0; color: var(--fg-60); font-size: 14px; }

.mini-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--fg-10);
  border-bottom: 1px solid var(--fg-10);
}
@media (min-width: 720px) { .mini-stats { grid-template-columns: repeat(4, 1fr); } }
.mini-stats div { background: var(--background); padding: 18px 20px; }
.mini-stats b {
  display: block; font-size: 22px; font-weight: 600;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.mini-stats span { display: block; margin-top: 4px; font-size: 12px; color: var(--fg-60); }

.panel-body { padding: 24px; }
.panel-body h4 {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-60);
}
.panel-body h4:not(:first-child) { margin-top: 30px; }

.formate { display: flex; flex-direction: column; gap: 10px; }
.format {
  display: grid;
  grid-template-columns: minmax(0, 118px) 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.format .nume-format { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) {
  .format { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .format .nume-format { grid-column: 1 / -1; white-space: normal; }
}
.format .bar { height: 8px; border-radius: var(--r-pill); background: var(--fg-05); overflow: hidden; }
.format .bar i {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: var(--r-pill);
  transition: width 0.9s var(--ease-out);
}
.format .n { color: var(--fg-60); font-variant-numeric: tabular-nums; font-size: 13px; }

.hookuri { display: grid; gap: 10px; }
@media (min-width: 800px) { .hookuri { grid-template-columns: 1fr 1fr; } }
.hook {
  border: 1px solid var(--fg-10);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  background: var(--surface);
}
.hook q { display: block; font-size: 15px; line-height: 1.45; quotes: "\201E" "\201D"; }
.hook .meta {
  margin-top: 10px; font-size: 12px; color: var(--fg-60);
  display: flex; gap: 10px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums; font-family: var(--font-mono);
}
.hook .meta b { color: var(--accent); font-weight: 600; }

/* ---------- ce primesti ---------- */
.livrabile { display: grid; gap: 14px; margin-top: 44px; }
@media (min-width: 560px) { .livrabile { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .livrabile { grid-template-columns: repeat(3, 1fr); } }
.livrabil {
  border: 1px solid var(--fg-10);
  border-radius: var(--r-xl);
  padding: 26px 24px 28px;
  background: var(--background);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.livrabil:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.livrabil b {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--accent); margin-bottom: 14px;
}
.livrabil h3 { margin: 0 0 8px; }
.livrabil p { margin: 0; font-size: 15px; color: var(--fg-70); line-height: 1.55; }

/* ---------- portofoliu ---------- */
.portofoliu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 44px;
}
@media (min-width: 700px) { .portofoliu { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .portofoliu { grid-template-columns: repeat(6, 1fr); } }
.portofoliu figure {
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--fg-05);
  position: relative;
}
.portofoliu img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.portofoliu figure:hover img { transform: scale(1.06); }

/* ---------- echipa ---------- */
.echipa { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.membru { text-align: center; width: 104px; }
.membru img {
  width: 104px; height: 104px;
  border-radius: var(--r-pill);
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.membru:hover img { filter: none; transform: translateY(-3px); }
.membru b { display: block; margin-top: 11px; font-size: 14px; font-weight: 600; }
.membru span { display: block; font-size: 12px; color: var(--fg-60); }
.dark .membru span { color: var(--on-dark-55); }

/* ---------- rezultate ---------- */
.dovezi { display: grid; gap: 14px; margin-top: 44px; }
@media (min-width: 760px) { .dovezi { grid-template-columns: 1fr 1fr; } }
.dovada {
  border: 1px solid var(--on-dark-10);
  border-radius: var(--r-xl);
  padding: 26px 24px;
  background: var(--dark-2);
  transition: transform 0.25s var(--ease-out);
}
.dovada:hover { transform: translateY(-4px); }
.dovada b {
  display: block;
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 600; letter-spacing: -0.04em;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.dovada p { margin: 10px 0 0; font-size: 15px; color: var(--on-dark-70); line-height: 1.55; }
.dovada .cine {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-dark-55);
}

/* ---------- pasi ---------- */
.pasi {
  display: grid; gap: 1px; margin-top: 46px;
  background: var(--on-dark-10);
  border: 1px solid var(--on-dark-10);
  border-radius: var(--r-xl);
  overflow: hidden;
}
@media (min-width: 800px) { .pasi { grid-template-columns: repeat(3, 1fr); } }
.pas { background: var(--dark-bg); padding: 30px 26px 34px; }
.pas b {
  display: block; font-size: 48px; font-weight: 600;
  letter-spacing: -0.05em; color: var(--accent-bright);
  line-height: 1; margin-bottom: 16px;
}
.pas h3 { margin: 0 0 8px; color: #fff; }
.pas p { margin: 0; color: var(--on-dark-70); font-size: 15px; line-height: 1.55; }

/* ---------- banda de CTA ---------- */
.cta-banda {
  margin-top: 52px;
  border-radius: var(--r-2xl);
  background: var(--foreground);
  color: #fff;
  padding: 40px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.cta-banda.pe-crem { background: var(--accent); }
.cta-banda h3 { color: #fff; max-width: 22ch; font-size: clamp(21px, 2.8vw, 28px); }
.cta-banda p { margin: 8px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 15px; max-width: 46ch; }
.cta-banda .btn { background: #fff; color: var(--foreground); }
.cta-banda .btn:hover { background: #f2f2f2; }

/* ---------- faq ---------- */
.faq { margin-top: 38px; border-top: 1px solid var(--fg-10); }
.faq details { border-bottom: 1px solid var(--fg-10); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 22px 44px 22px 0;
  font-size: 17px; font-weight: 500;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 24px; color: var(--accent);
  transition: transform 0.22s var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { margin: 0 0 22px; color: var(--fg-70); font-size: 15px; line-height: 1.62; max-width: 70ch; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark-bg); color: var(--on-dark-55); padding: 46px 0; font-size: 13px; }
.site-footer .row {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: space-between; align-items: center;
}
.site-footer a { color: var(--on-dark-70); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- banda de prototip ---------- */
.proto {
  background: #1a1a1a; color: #fff;
  font-size: 13px; padding: 10px 20px; text-align: center;
}
.proto b { color: var(--accent-bright); }

/* ============================================================
   Pagina de analiza
   ============================================================ */
/* Formularele stau inguste, ca sa se citeasca. Aplicatia (contul) ia tot
   ecranul: exact ce lipsea, contul era o coloana de 760px pe un ecran de 1920. */
.flux-wrap { max-width: 720px; margin: 0 auto; padding: 40px 20px 80px; }
.app-wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 20px 80px;
}
.titlu-flux { font-size: clamp(26px, 4.4vw, 42px); }

.progres { display: flex; gap: 8px; margin-bottom: 34px; }
.progres i {
  flex: 1; height: 4px; border-radius: var(--r-pill);
  background: var(--fg-10);
  transition: background 0.35s var(--ease-out);
}
.progres i.activ { background: var(--accent); }

.etapa[hidden] { display: none; }

.lista-linkuri { display: grid; gap: 10px; margin-top: 22px; }
.rand {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--fg-10);
  border-radius: var(--r-lg);
  background: var(--background);
  padding: 0 6px 0 14px;
  transition: border-color 0.18s var(--ease-out);
}
.rand.ok { border-color: rgba(15, 15, 15, 0.28); }
.rand.rau { border-color: var(--err-border); }
.rand .idx {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--fg-40);
}
.rand input {
  min-width: 0; border: none; outline: none;
  background: transparent; padding: 15px 0; font-size: 15px;
  min-height: 46px;
}
.rand select {
  border: none; outline: none; background: var(--fg-05);
  border-radius: var(--r-pill); padding: 9px 10px;
  font-size: 12px; color: var(--fg-70); cursor: pointer;
  min-height: 44px; max-width: 118px;
}
.rand .sterge {
  border: none; background: transparent; color: var(--fg-40);
  font-size: 22px; line-height: 1;
  width: 44px; height: 44px; border-radius: var(--r-pill);
}
.rand .sterge:hover { color: var(--err-text); background: var(--fg-05); }
/* Pe telefon linkul ia tot randul de sus, iar selectorul si stersul stau
   dedesubt. Inainte se inghesuiau toate trei pe 360px si nu se citea nimic. */
@media (max-width: 560px) {
  .rand {
    grid-template-columns: 22px 1fr auto;
    padding: 4px 6px 8px 12px;
    row-gap: 0;
  }
  .rand input { grid-column: 2 / -1; padding: 12px 0 6px; }
  .rand select { grid-column: 2; justify-self: start; max-width: none; }
  .rand .sterge { grid-column: 3; grid-row: 2; }
}

.adauga {
  margin-top: 12px;
  border: 1px dashed var(--fg-10);
  background: transparent;
  border-radius: var(--r-lg);
  padding: 14px;
  width: 100%;
  color: var(--fg-60);
  font-size: 14px;
  transition: all 0.18s var(--ease-out);
}
.adauga:hover { border-color: var(--accent); color: var(--accent); }
.adauga[disabled] { opacity: 0.4; pointer-events: none; }

.form { display: grid; gap: 15px; margin-top: 24px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-60); margin-bottom: 8px;
}
.field input {
  width: 100%;
  padding: 15px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--fg-10);
  background: var(--background);
  outline: none;
  transition: border-color 0.18s var(--ease-out);
}
.field input:focus { border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--err-border); }
.field .err { display: none; margin-top: 7px; font-size: 12px; color: var(--err-text); }
.field input[aria-invalid="true"] ~ .err { display: block; }

.consent {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13px; color: var(--fg-70); line-height: 1.5;
}
.consent input {
  margin: 2px 0 0; width: 17px; height: 17px;
  accent-color: var(--accent); flex: 0 0 auto;
}

.rezumat {
  border: 1px solid var(--fg-10);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px 18px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--fg-70);
}
.rezumat b { color: var(--foreground); }

.linie-butoane { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.linie-butoane .btn { flex: 1 1 auto; }

.gata-cutie {
  border: 1px solid var(--fg-10);
  border-radius: var(--r-xl);
  padding: 30px 26px;
  background: var(--background);
  box-shadow: var(--shadow-card);
  margin-top: 24px;
}
.gata-cutie code {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--fg-05);
  padding: 13px 15px;
  border-radius: var(--r-lg);
  margin-top: 14px;
  word-break: break-all;
}

/* ============================================================
   Animatii. Fara librarii: IntersectionObserver + CSS, ca pe flou.ro.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.reveal.vazut { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.07s; }
.reveal.d2 { transition-delay: 0.14s; }
.reveal.d3 { transition-delay: 0.21s; }
.reveal.d4 { transition-delay: 0.28s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.rise { animation: rise 0.5s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Pagina de cont: un cont, o firma, maxim 10 clipuri, pe tot ecranul.
   Cardurile de "lot" au dispărut odata cu loturile.
   ============================================================ */
.anunt {
  border: 1px solid rgba(212, 58, 26, 0.3);
  background: rgba(212, 58, 26, 0.06);
  color: var(--accent);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 22px;
}

.cont-cap {
  display: grid;
  gap: 22px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--fg-10);
}
@media (min-width: 860px) {
  .cont-cap { grid-template-columns: 1fr minmax(300px, 380px); }
}
.cont-cap h1 { font-size: clamp(26px, 3.6vw, 40px); }
.cont-cap .c-meta {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-40);
  line-height: 1.7;
  word-break: break-word;
}

.cota-cutie {
  border: 1px solid var(--fg-10);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px 18px;
}
.cota-cutie .bara {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--fg-10);
  overflow: hidden;
}
.cota-cutie .bara i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width 0.7s var(--ease-out);
}
.cota-cutie .bara.plina i { background: var(--err-border); }
.cota-cutie p { margin: 12px 0 0; font-size: 13px; color: var(--fg-60); }
.stari { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.stare {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--fg-05);
  color: var(--fg-70);
  font-variant-numeric: tabular-nums;
}
.stare.gata { background: rgba(212, 58, 26, 0.1); color: var(--accent); }
.stare.lucru { background: var(--foreground); color: #fff; }
.stare.esuata { background: rgba(185, 28, 28, 0.1); color: var(--err-text); }

/* Bara de adaugare: pe telefon se rupe pe doua randuri, nu se inghesuie. */
.adaug-bara {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  margin-top: 24px;
}
.adaug-bara input, .adaug-bara select {
  border: 1px solid var(--fg-10);
  border-radius: var(--r-pill);
  background: var(--background);
  padding: 14px 18px;
  min-height: 48px;
  font-size: 15px;
  outline: none;
  min-width: 0;
}
.adaug-bara select { padding: 14px 12px; color: var(--fg-70); cursor: pointer; }
.adaug-bara input:focus, .adaug-bara select:focus { border-color: var(--accent); }
.adaug-bara input[aria-invalid="true"] { border-color: var(--err-border); }
.adaug-bara .btn { min-height: 48px; }
@media (max-width: 700px) {
  .adaug-bara { grid-template-columns: auto 1fr; }
  .adaug-bara input { grid-column: 1 / -1; }
  .adaug-bara select { grid-column: 1; }
  .adaug-bara .btn { grid-column: 2; }
}
.mesaj { margin: 10px 0 0; font-size: 13px; color: var(--fg-60); }
.mesaj.rau { color: var(--err-text); }
.mesaj.mostra {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--fg-05);
  color: var(--fg-60);
  font-size: 13px;
  line-height: 1.5;
}

.link-partajat {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px dashed var(--fg-10);
  border-radius: var(--r-xl);
  display: grid;
  gap: 14px;
  align-items: center;
}
@media (min-width: 900px) { .link-partajat { grid-template-columns: 1fr 1.2fr; } }
.link-partajat b { font-size: 15px; font-weight: 600; }
.link-partajat > div > p { margin: 5px 0 0; font-size: 13px; color: var(--fg-60); }
.link-rand { display: flex; gap: 8px; flex-wrap: wrap; }
.link-rand input {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid var(--fg-10);
  border-radius: var(--r-pill);
  background: var(--background);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-70);
  outline: none;
}
.link-rand .btn { padding: 12px 20px; font-size: 14px; min-height: 44px; }

/* Clipurile: doua coloane pe ecran mare, ca sa se vada toate zece fara
   sa scrolezi un kilometru. */
.grila-clipuri {
  margin-top: 26px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1100px) {
  .grila-clipuri { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.grila-clipuri .clip { margin-top: 0; }
/* In cont playerul e mai mic: cardul e o privire de ansamblu, nu raportul. */
.grila-clipuri .clip-corp { grid-template-columns: 118px minmax(0, 1fr); gap: 14px; }
.grila-clipuri .clip-stanga { position: static; }
.grila-clipuri .player { max-height: none; }
.grila-clipuri .masura { flex: 1 1 84px; padding: 10px 12px; }
.grila-clipuri .masura b { font-size: 16px; }
.gol-mesaj {
  margin: 26px 0 0;
  padding: 34px 24px;
  text-align: center;
  border: 1px dashed var(--fg-10);
  border-radius: var(--r-xl);
  color: var(--fg-60);
  font-size: 15px;
}

/* ============================================================
   Pagina de raport. Structura imprumutata din Resern (VideoDetailPage):
   player pe stanga, detalii pe dreapta. Culorile raman ale noastre.
   ============================================================ */
.raport-wrap { max-width: 1280px; margin: 0 auto; padding: 40px 20px 80px; }

.progres-raport {
  display: flex; align-items: center; gap: 14px;
  margin-top: 26px; padding: 16px 20px;
  border: 1px solid var(--fg-10); border-radius: var(--r-lg);
  background: var(--surface); font-size: 14px; flex-wrap: wrap;
}
.progres-raport .inel {
  position: relative; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: conic-gradient(var(--accent) var(--p, 0%), var(--fg-10) 0);
  display: grid; place-items: center;
}
.progres-raport .inel::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: var(--r-pill); background: var(--surface);
}
.progres-raport .inel span {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
}
.progres-raport b { font-variant-numeric: tabular-nums; }

.clip {
  border: 1px solid var(--fg-10); border-radius: var(--r-xl);
  background: var(--background); box-shadow: var(--shadow-card);
  padding: 22px; margin-top: 16px;
}
.clip-cap {
  display: flex; gap: 14px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--fg-10);
}
.clip-cap .nr {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--fg-40);
}
.clip-cap h3 { margin: 8px 0 0; }
.clip-cap .url {
  display: block; font-size: 13px; color: var(--fg-60);
  overflow-wrap: anywhere; margin-top: 5px; max-width: 52ch;
}
.clip-cap .eticheta { flex: 0 0 auto; }
.clip-cap .url:hover { color: var(--accent); }

.clip-corp { display: grid; gap: 24px; margin-top: 20px; }
@media (min-width: 900px) {
  .clip-corp { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
}
@media (min-width: 1400px) {
  .raport-wrap .clip-corp { grid-template-columns: 360px minmax(0, 1fr); }
}
.clip-stanga { position: sticky; top: 84px; }
@media (max-width: 899px) { .clip-stanga { position: static; } }

.player {
  aspect-ratio: 9 / 16; width: 100%; max-height: 74vh;
  border-radius: var(--r-lg); overflow: hidden;
  background: #111; position: relative; display: block;
}
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.player.insta img, .player .gol { width: 100%; height: 100%; object-fit: cover; display: block; }
.player .gol { background: #1a1a1a; }
.player .play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.player .play::after {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 19px solid var(--foreground);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.player .afara {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  color: rgba(255, 255, 255, 0.8); font-size: 12px;
}
.link-extern {
  display: inline-block; margin-top: 12px;
  font-size: 13px; color: var(--fg-60);
}
.link-extern::after { content: " \2197"; }
.link-extern:hover { color: var(--accent); }

.eticheta {
  font-size: 12px; font-weight: 500; padding: 6px 13px;
  border-radius: var(--r-pill); background: var(--fg-05);
  color: var(--fg-70); white-space: nowrap;
}
.eticheta.gata { background: rgba(212, 58, 26, 0.1); color: var(--accent); }
.eticheta.esuata { background: rgba(185, 28, 28, 0.1); color: var(--err-text); }
.eticheta.concurent { background: var(--foreground); color: #fff; }

.carlig-cutie {
  padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--foreground); color: #fff;
}
.carlig-cutie .et {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-55);
}
.carlig-cutie q {
  display: block; margin-top: 9px;
  font-size: clamp(16px, 2.2vw, 20px); line-height: 1.35;
  quotes: "\201E" "\201D";
}

.masuri { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.masura {
  flex: 1 1 110px; border: 1px solid var(--fg-10);
  border-radius: var(--r-lg); padding: 13px 15px;
}
.masura b {
  display: block; font-size: 19px; font-weight: 600;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.masura span { display: block; margin-top: 4px; font-size: 12px; color: var(--fg-60); }

.chipuri { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.chip-mic, .eticheta-cadru {
  font-size: 12px; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--fg-05); color: var(--fg-70);
}

.bloc { margin-top: 24px; }
.bloc h4 {
  margin: 0 0 12px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-60);
}
.structura { max-height: 380px; overflow-y: auto; }
.cadru {
  display: grid; grid-template-columns: 84px auto 1fr;
  gap: 10px; align-items: start;
  padding: 9px 0; border-top: 1px solid var(--fg-10);
  font-size: 14px;
}
.cadru:first-child { border-top: none; }
.cadru .t {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--accent); white-space: nowrap; padding-top: 2px;
}
.cadru .eticheta-cadru { text-transform: capitalize; font-size: 11px; padding: 3px 9px; justify-self: start; }
.cadru .d { color: var(--fg-70); line-height: 1.5; }
.cadru-simplu { margin: 6px 0; font-size: 14px; color: var(--fg-70); }
@media (max-width: 560px) {
  .cadru { grid-template-columns: 1fr; gap: 5px; }
}

.analiza p { margin: 0 0 12px; font-size: 15px; line-height: 1.62; color: var(--fg-70); }
.analiza p:last-child { margin-bottom: 0; }

.schelet { margin-top: 18px; }
.schelet i {
  display: block; height: 13px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--fg-05), var(--fg-10), var(--fg-05));
  background-size: 200% 100%; animation: pulsa 1.4s linear infinite;
  margin-bottom: 9px;
}
.schelet i:nth-child(2) { width: 82%; }
.schelet i:nth-child(3) { width: 61%; }
@keyframes pulsa { to { background-position: -200% 0; } }

.mai-adaug {
  margin-top: 26px; padding: 24px;
  border: 1px dashed var(--fg-10); border-radius: var(--r-xl);
  background: var(--surface);
}
.mai-adaug h3 { margin: 0 0 6px; }
.mai-adaug p { margin: 0; font-size: 14px; color: var(--fg-60); }
.mai-adaug .adaug { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.mai-adaug .adaug input {
  flex: 1 1 240px; min-width: 0;
  border: 1px solid var(--fg-10); border-radius: var(--r-lg);
  padding: 13px 15px; outline: none; font-size: 14px;
  background: var(--background);
}
.mai-adaug .adaug input:focus { border-color: var(--accent); }
.mai-adaug .adaug input[aria-invalid="true"] { border-color: var(--err-border); }
.mai-adaug .adaug .btn { padding: 13px 24px; font-size: 14px; }
.mai-adaug .mesaj { margin-top: 10px; font-size: 13px; }
.mai-adaug .mesaj.rau { color: var(--err-text); }

/* Titlurile din analiza AI, in stilul Resern: coral, mici, uppercase. */
.analiza h5 {
  margin: 20px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.analiza h5:first-child { margin-top: 0; }
.analiza strong { color: var(--foreground); font-weight: 600; }

/* Cardul de clip nu trebuie sa aterizeze sub headerul lipicios. */
.clip { scroll-margin-top: 84px; }

/* ============================================================
   Pagini legale
   ============================================================ */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 44px 20px 90px; }
.legal-wrap h1 { font-size: clamp(28px, 4.4vw, 42px); }
.legal-wrap .actualizat {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-40);
}
.legal-wrap h2 {
  font-size: clamp(19px, 2.4vw, 24px);
  margin: 40px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--fg-10);
}
.legal-wrap h3 { font-size: 17px; margin: 24px 0 8px; }
.legal-wrap p, .legal-wrap li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-70);
}
.legal-wrap p { margin: 0 0 14px; }
.legal-wrap ul { margin: 0 0 14px; padding-left: 20px; }
.legal-wrap li { margin-bottom: 7px; }
.legal-wrap strong { color: var(--foreground); font-weight: 600; }
.legal-wrap a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 14px;
}
.legal-wrap th, .legal-wrap td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--fg-10);
  vertical-align: top;
}
.legal-wrap th { font-weight: 600; color: var(--foreground); }
.legal-wrap td { color: var(--fg-70); }
.date-firma {
  border: 1px solid var(--fg-10);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 20px 22px;
  margin: 22px 0;
}
.date-firma p { margin: 0 0 6px; font-size: 14px; }
.date-firma p:last-child { margin: 0; }

/* ---------- subsol extins, cu datele firmei ---------- */
.site-footer .sus {
  display: grid;
  gap: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--on-dark-10);
}
@media (min-width: 760px) {
  .site-footer .sus { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer h4 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-55);
}
.site-footer .sus p { margin: 0 0 6px; line-height: 1.6; }
.site-footer .sus ul { margin: 0; padding: 0; list-style: none; }
.site-footer .sus li { margin-bottom: 7px; }
.site-footer .sus a { text-decoration: none; }
.site-footer .sus a:hover { color: #fff; text-decoration: underline; }
.site-footer .jos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-top: 22px;
}

/* ---------- branduri ---------- */
.branduri { margin-top: 46px; padding-top: 34px; border-top: 1px solid var(--fg-10); }
.branduri h4 {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-60);
}
.lista-branduri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
  gap: 18px 14px;
  align-items: center;
}
@media (min-width: 640px) {
  .lista-branduri { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 26px 20px; }
}
/* Logo-urile reale, aduse de pe flou.ro si gumm.ro. Cine nu are logo ramane
   scris cu litere: mai bine un nume decat un logo inventat.
   Inaltime fixa plus object-fit, nu max-height in procente: intr-un grid
   procentul nu limiteaza, si logo-ul Honda ieşea 88px dintr-o cutie de 66px. */
.brand-logo { display: block; }
.brand-logo img {
  width: 100%;
  height: 38px;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
@media (min-width: 640px) { .brand-logo img { height: 46px; } }
.brand-logo:hover img { filter: none; opacity: 1; }
/* Logo cu fundal alb opac pe cremul nostru: multiply topeste albul. */
.brand-logo.pe-alb img { mix-blend-mode: multiply; }

/* Brandurile fara logo: numele scris, la aceeasi inaltime cu logo-urile. */
.brand {
  display: grid;
  place-items: center;
  height: 38px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  padding: 0 6px;
  border-radius: var(--r-pill);
  color: var(--fg-40);
  transition: color 0.18s var(--ease-out);
}
@media (min-width: 640px) { .brand { height: 46px; font-size: 14px; } }
.brand:hover { color: var(--fg-70); }
/* Brandul care a lucrat cu amandoi e evidentiat, nu dublat. */
.brand.ambii { color: var(--accent); }
.brand-logo.ambii img { opacity: 0.85; }
.nota-branduri { margin: 16px 0 0; font-size: 13px; color: var(--fg-40); }

/* ============================================================
   Blocuri pliabile in cardul de clip. <details> nativ: inchis in cont,
   deschis pe pagina de raport. Fara JS, fara librarie.
   ============================================================ */
details.bloc { margin-top: 20px; border-top: 1px solid var(--fg-10); }
details.bloc > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 34px 14px 0;
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-60);
  min-height: 44px;
  display: flex;
  align-items: center;
}
details.bloc > summary::-webkit-details-marker { display: none; }
details.bloc > summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 20px; color: var(--accent);
  transition: transform 0.22s var(--ease-out);
}
details.bloc[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
details.bloc > summary:hover { color: var(--accent); }
details.bloc > div { padding-bottom: 16px; }

.eticheta.lucru { background: var(--foreground); color: #fff; }

/* Erori si texte mici, folosite in flux si in cont. */
.err-bloc {
  margin: 0;
  font-size: 13px;
  color: var(--err-text);
}
.p-mare { margin: 12px 0 0; font-size: 15px; color: var(--fg-70); line-height: 1.6; }
.p-mic { margin: 14px 0 0; font-size: 13px; color: var(--fg-60); line-height: 1.6; }
.leg { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Tinte de atins cu degetul: minimul de 44px cerut de accesibilitate. */
.faq summary { min-height: 48px; display: flex; align-items: center; }
.lansator-tab button { min-height: 44px; }
.link-extern { min-height: 32px; }
@media (max-width: 480px) {
  .lansator-tab { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .lansator-tab button { padding: 11px 10px; font-size: 13px; }
  .lansator-camp { padding: 6px; }
  .lansator-camp input { padding: 12px 12px; }
  .lansator-camp .btn { width: 100%; }
}

/* Miniatura din cont: acelasi loc ca playerul, dar fara iframe. Click duce
   in raport, la clipul respectiv. */
.player.mini { background: #111; }
.player.mini img { width: 100%; height: 100%; object-fit: cover; }
.player.mini .play { width: 46px; height: 46px; }
.player.mini .play::after {
  border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px;
}
.vezi-analiza { margin-top: 18px; }

/* Capul cardului: eticheta stă in dreapta si nu cade sub titlu, si titlul se
   strange in loc sa impinga. */
.clip-cap { flex-wrap: nowrap; }
.clip-cap > div:first-child { min-width: 0; }
.clip-cap h3 { overflow-wrap: anywhere; }
/* Metricile in cont: doua pe doua, nu trei si una singura pe rand. */
.grila-clipuri .masuri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grila-clipuri .masura { flex: none; }
@media (max-width: 720px) {
  .nav-dr .cine-e { display: none; }
}

/* Nota de pe randul de link: spune de ce e rosu, ca un duplicat nu e acelasi
   lucru cu un link gresit. */
.rand-nota {
  grid-column: 2 / -1;
  font-size: 12px;
  color: var(--err-text);
  padding-bottom: 8px;
}
.rand-nota:empty { display: none; }
@media (max-width: 560px) {
  .rand-nota { grid-column: 2 / -1; padding-bottom: 4px; }
}

/* Scoaterea unui clip care nu a plecat inca la analiza. */
.scoate {
  margin-top: 14px;
  border: 1px solid var(--fg-10);
  background: transparent;
  border-radius: var(--r-pill);
  padding: 9px 16px;
  min-height: 40px;
  font-size: 13px;
  color: var(--fg-60);
  transition: all 0.18s var(--ease-out);
}
.scoate:hover { border-color: var(--err-border); color: var(--err-text); }

/* Selectorul din formular, la fel cu campurile de text. */
.field select {
  width: 100%;
  padding: 15px 16px;
  min-height: 48px;
  border-radius: var(--r-lg);
  border: 1px solid var(--fg-10);
  background: var(--background);
  color: var(--foreground);
  outline: none;
}
.field select:focus { border-color: var(--accent); }

.player.mini .afara { left: 8px; right: 8px; bottom: 8px; font-size: 10px; text-align: center; }
.grila-clipuri .link-extern { font-size: 12px; }