/* digitalcat.ro — shared stylesheet (dark + light via [data-theme]) */

:root, :root[data-theme="dark"] {
  --paper: #0F1116;
  --paper-raised: #1A1E27;
  --ink: #F1F1EC;
  --ink-soft: #9AA0AC;
  --line: #2A2F3B;
  --gold: #F2A93C;
  --gold-ink: #FFD08A;
  --teal: #57C2B8;
  --crit: #E88268;
  --good: #85D19A;
  --shadow: 0 1px 0 rgba(0,0,0,.2);
  --radius: 3px;
  --radius-box: 6px;
  --wrap: 1200px;
  --contrast-ink: #171A1F;
}
:root[data-theme="light"] {
  --paper: #EFF1EC;
  --paper-raised: #FFFFFF;
  --ink: #171A1F;
  --ink-soft: #4B5158;
  --line: #D6DBD3;
  --gold: #C97A1F;
  --gold-ink: #7A4B12;
  --teal: #2E7F79;
  --crit: #B7402F;
  --good: #3C7A4E;
  --shadow: 0 1px 0 rgba(23,26,31,.05);
  --contrast-ink: #171A1F;
}

* { box-sizing: border-box; }
.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: 12px; top: 12px; z-index: 100;
  padding: 12px 18px; border-radius: 6px; min-height: 44px; display: inline-flex; align-items: center;
  background: var(--gold); color: var(--contrast-ink);
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  transform: translateY(calc(-100% - 16px)); transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  margin: 0; position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--contrast-ink); }

html { caret-color: var(--gold); scrollbar-color: color-mix(in srgb, var(--ink-soft) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-soft) 40%, transparent);
  border: 3px solid var(--paper); border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink-soft) 65%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }

h1, h2, h3, .mono, .eyebrow, .stat, .price, nav a, .btn, .field label, .card .tag, .clock, .ticker-track {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
h1, h2, h3, .display {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
  text-wrap: balance;
  line-height: 1.08;
  color: var(--ink);
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

img, svg { max-width: 100%; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
section { position: relative; overflow: hidden; }
section[id] { scroll-margin-top: 84px; }
a { color: inherit; }

/* ---------- section-to-section scan transition ---------- */
.section::before, .hero::before {
  content: ""; position: absolute; top: 0; left: 0; width: 14%; height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 55%, transparent) 45%, color-mix(in srgb, var(--teal) 45%, transparent) 55%, transparent);
  pointer-events: none; z-index: 6; opacity: 0;
}
.section.scanned::before, .hero.scanned::before { animation: sectionscan 1.1s cubic-bezier(.25,.7,.35,1) forwards; }
@keyframes sectionscan {
  0%   { transform: translateX(-100%); opacity: 0; }
  12%  { opacity: .9; }
  88%  { opacity: .9; }
  100% { transform: translateX(743%); opacity: 0; }
}

/* ---------- grain overlay ---------- */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 50; opacity: .045; mix-blend-mode: overlay;
}

/* ---------- cursor glow ---------- */
.cursor-glow {
  position: fixed; width: 320px; height: 320px; border-radius: 50%;
  pointer-events: none; z-index: 1; left: -999px; top: -999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%);
  transform: translate(-50%, -50%);
  transition: left .15s ease-out, top .15s ease-out;
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- header ---------- */
header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 66px;
}
.wm {
  display: inline-flex; align-items: center; gap: 3px;
  text-decoration: none;
  --logo-h: 44px;
  min-height: 44px;
}
.wm-icon-mask, .wm-digital-mask, .wm-catro-mask {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  flex-shrink: 0;
}
.wm-icon-mask { margin-right: 1px; }
.wm-icon-mask {
  height: var(--logo-h); aspect-ratio: 374 / 394;
  -webkit-mask-image: url("images/logo-icon.png");
  mask-image: url("images/logo-icon.png");
}
.wm-digital-mask {
  height: var(--logo-h); aspect-ratio: 764 / 394;
  -webkit-mask-image: url("images/logo-digital.png");
  mask-image: url("images/logo-digital.png");
}
/* the source mask reads "cat.ro"; the box is narrowed to the "cat" glyphs and
   the mask oversized to match, so the ".ro" falls outside and is cropped off.
   531px source, cut at 339px — just past the "t", before the period. */
.wm-catro-mask {
  height: var(--logo-h); aspect-ratio: 339 / 240;
  -webkit-mask-image: url("images/logo-catro.png");
  mask-image: url("images/logo-catro.png");
  -webkit-mask-size: 156.64% 100%; mask-size: 156.64% 100%;
  -webkit-mask-position: left center; mask-position: left center;
}
:root[data-theme="dark"] .wm-icon-mask, :root[data-theme="dark"] .wm-digital-mask { background-color: var(--gold); }
:root[data-theme="dark"] .wm-catro-mask { background-color: var(--ink); }
:root[data-theme="light"] .wm-icon-mask, :root[data-theme="light"] .wm-digital-mask { background-color: var(--ink); }
:root[data-theme="light"] .wm-catro-mask { background-color: var(--gold); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  cursor: pointer; padding: 0; text-decoration: none; opacity: .75;
  transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold); opacity: 1; }
.theme-toggle svg { display: block; width: 15px; height: 15px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
nav.mainnav { display: flex; align-items: center; gap: 22px; }
nav.mainnav a, nav.mainnav .nav-drop-trigger {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-soft); text-decoration: none;
  background: none; border: none; cursor: pointer; padding: 0; font-family: "JetBrains Mono", monospace;
}
nav.mainnav a:hover, nav.mainnav .nav-drop-trigger:hover { color: var(--gold-ink); }
.nav-drop { position: relative; }
.nav-drop-trigger svg { transition: transform .2s ease; }
.nav-drop.open .nav-drop-trigger svg { transform: rotate(180deg); }
.nav-drop-menu {
  display: none; flex-direction: column; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 260px; margin-top: 6px; padding: 8px; background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,.28); z-index: 41;
}
.nav-drop.open .nav-drop-menu { display: flex; }
nav.mainnav .nav-drop-menu a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px;
  padding: 8px 12px; border-radius: 5px; text-decoration: none; color: var(--ink);
  font-family: "Inter", sans-serif; text-transform: none; letter-spacing: 0; font-size: 13.5px; justify-content: center;
}
nav.mainnav .nav-drop-menu a span.hint { font-size: 12px; color: var(--ink-soft); text-transform: none; }
nav.mainnav .nav-drop-menu a:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--gold-ink); }

/* ---------- mobile nav toggle ---------- */
.nav-toggle {
  display: none; position: relative; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%; background: transparent;
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.nav-toggle:hover { border-color: var(--gold); }
.nav-toggle .bar {
  position: absolute; left: 13px; width: 18px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .3s cubic-bezier(.4,0,.2,1);
}
.nav-toggle .bar:nth-child(1) { top: 16px; }
.nav-toggle .bar:nth-child(2) { top: 21px; }
.nav-toggle .bar:nth-child(3) { top: 26px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 39;
  max-height: 0; overflow: hidden auto;
  background: var(--paper); border-bottom: 1px solid transparent;
  box-shadow: 0 18px 32px rgba(0,0,0,.3);
  transition: max-height .38s cubic-bezier(.4,0,.2,1), border-color .38s ease;
}
.mobile-nav.open { max-height: 80vh; border-color: var(--line); }
.mobile-nav .mnav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 14px 28px 22px;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
}
.mobile-nav a.mnav-link {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 4px; font-size: 15px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.mobile-nav a.mnav-link.mnav-sub { padding-left: 16px; font-size: 13.5px; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.mobile-nav .mnav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); margin: 10px 4px 0; }
.mobile-nav a.mnav-link:hover { color: var(--gold-ink); }
.mobile-nav .btn { margin-top: 16px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 14px; text-transform: uppercase; letter-spacing: .07em;
  padding: 12px 22px; border-radius: 999px; white-space: nowrap;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gold); color: var(--contrast-ink); font-weight: 700; }
.btn-primary:hover { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 22%, transparent); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; border-radius: 3px; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-ink); }
.btn-pulse { animation: btn-pulse 2.2s ease-in-out infinite; }
.btn-pulse:hover { animation-play-state: paused; }
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--gold) 0%, transparent); }
}
.btn-block { width: 100%; justify-content: center; }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 12.5px; }

/* ---------- hero ---------- */
.hero { padding: 32px 0 0; }
.hero-inner { position: relative; padding-top: 16px; padding-bottom: 64px; z-index: 2; }
/* Gradientul din hero-ul /audit-ux-gratuit, adus pe homepage doar in jumatatea stanga:
   se stinge spre radar (dreapta) si spre banda de jos, ca titlul sa ramana pe fond inchis la baza. */
.hero-aurora::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 30%, color-mix(in srgb, var(--paper) 70%, transparent) 62%, var(--paper) 92%),
    radial-gradient(34% 56% at 6% 0%, #F2C77E, transparent 70%),
    radial-gradient(30% 50% at 30% 30%, rgba(64, 140, 200, .55), transparent 70%),
    radial-gradient(40% 70% at 22% 0%, #4FB6B0, transparent 75%),
    radial-gradient(30% 56% at 44% 4%, #7CC48A, transparent 70%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 58%);
          mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 58%);
  /* intensitate redusa: eyebrow-ul auriu si em-ul portocaliu stau direct peste gradient */
  opacity: .4;
}
:root[data-theme="light"] .hero-aurora::after { opacity: .2; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold-ink); margin: 0 0 16px; font-weight: 400; line-height: inherit;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent);
}
.hero .hero-title {
  font-size: clamp(34px, 5vw, 66px); margin: 0 0 8px; max-width: 20ch;
}
.hero .hero-title em { font-style: normal; color: var(--gold); }
.hero .lede {
  font-size: 19px; color: var(--ink-soft); max-width: 44ch; margin: 18px 0 22px;
}
.hero .cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero .cta-row .sub { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-soft); }
.hero .cta-row .sub strong { color: var(--gold-ink); }

/* ---------- hero radar ----------
   Continuous scan sweep over an instrument field. The three findings sit as
   steady pulsing markers and flare once as the beam crosses them. Motion is
   keyed to a 6.5s revolution. */
.scan-wrap {
  position: absolute; top: -40px; right: -60px; width: 620px; height: 620px;
  z-index: 1; pointer-events: none;
}
.scan-stage {
  position: absolute; top: 50%; left: 50%; width: 620px; height: 620px;
  transform: translate(-50%, -50%) scale(var(--radar-scale, 1));
}
/* with no step cards over it, the instrument is the right-hand element in its
   own right: whole circle in view, right edge on the page grid. Desktop only —
   below 960px the shared .scan-wrap rules take it behind the copy, and these
   would otherwise outrank them on specificity. */
@media (min-width: 961px) {
  .scan-wrap.scan-solo { top: 50%; right: 0; transform: translateY(-50%); }
  .hero-inner:has(.scan-solo) { min-height: 620px; }
}

/* warm field — static form, slow opacity breath */
.radar-glow {
  position: absolute; inset: 92px; border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--gold) 58%, transparent), transparent 66%),
    radial-gradient(circle at 68% 72%, color-mix(in srgb, var(--teal) 42%, transparent), transparent 64%);
  filter: blur(30px); opacity: .8;
  animation: radar-breathe 9s ease-in-out infinite alternate;
}
@keyframes radar-breathe { from { opacity: .7; } to { opacity: .9; } }

/* instrument grid — static */
.radar-grid { position: absolute; inset: 0; margin: auto; width: 504px; height: 504px; }
.radar-grid .rg-ring {
  position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink-soft) 18%, transparent);
}
.radar-grid .rg-ring.r1 { width: 504px; height: 504px; }
.radar-grid .rg-ring.r2 { width: 344px; height: 344px; border-color: color-mix(in srgb, var(--ink-soft) 13%, transparent); }
.radar-grid .rg-ring.r3 { width: 184px; height: 184px; border-color: color-mix(in srgb, var(--ink-soft) 13%, transparent); }
.radar-grid .rg-cross { position: absolute; background: color-mix(in srgb, var(--ink-soft) 12%, transparent); }
.radar-grid .rg-cross.h { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.radar-grid .rg-cross.v { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }

/* the sweep: bright leading edge near gradient 0deg/360deg, phosphor tail
   trailing counter-clockwise; rotates continuously */
.radar-sweep {
  position: absolute; inset: 0; margin: auto; width: 504px; height: 504px;
  border-radius: 50%; overflow: hidden;
}
.radar-sweep::before {
  content: ""; position: absolute; inset: -30%; will-change: transform;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--gold) 88%, transparent) 0deg,
    color-mix(in srgb, var(--gold) 70%, transparent) 6deg,
    transparent 24deg,
    transparent 336deg,
    color-mix(in srgb, var(--gold) 22%, transparent) 350deg,
    color-mix(in srgb, var(--gold) 62%, transparent) 357deg,
    color-mix(in srgb, var(--gold) 88%, transparent) 360deg);
  animation: spin 6.5s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* origin: steady dot + one ping per revolution */
.radar-core {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--gold) 55%, transparent);
}
.radar-core::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  animation: core-ping 6.5s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes core-ping {
  0% { transform: scale(1); opacity: .7; }
  55%, 100% { transform: scale(11); opacity: 0; }
}

/* targets — steady pulse, plus a flare as the sweep crosses them */
.radar-blip {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--crit);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 24%, transparent);
  animation: blip-pulse 2.6s ease-in-out infinite;
}
.radar-blip::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid var(--crit); opacity: 0;
  animation: blip-flare 6.5s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes blip-pulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.18); opacity: 1; }
}
@keyframes blip-flare {
  0%, 3%   { transform: scale(1); opacity: 0; }
  6%       { opacity: .75; }
  22%      { transform: scale(4.6); opacity: 0; }
  100%     { transform: scale(4.6); opacity: 0; }
}

/* placement + pulse stagger */
.radar-blip.b1 { top: 33%; left: 23%; animation-delay: -0.3s; }
.radar-blip.b2 { top: 70%; left: 62%; animation-delay: -1.2s; }
.radar-blip.b3 { top: 21%; left: 44%; animation-delay: -1.9s; }
.radar-blip.b5 { top: 60%; left: 15%; animation-delay: -0.8s; }
/* flare sync: delay = clock-angle / 360 * 6.5s */
.radar-blip.b1::after { animation-delay: 5.49s; }
.radar-blip.b2::after { animation-delay: 2.39s; }
.radar-blip.b3::after { animation-delay: 6.27s; }
.radar-blip.b5::after { animation-delay: 4.61s; }

.radar-blip.b3 { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 24%, transparent); }
.radar-blip.b3::after { border-color: var(--good); }
.radar-blip.b5 { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent); }
.radar-blip.b5::after { border-color: var(--gold); }

/* a smaller unlabelled contact, so the field does not read as exactly three */
.radar-blip.b4 {
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  top: 34%; left: 18%; animation-delay: -2.2s;
  background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.radar-blip.b4::after { display: none; }

/* readout pills: each contact names what the scan found there. They hang off the
   right of their marker, which is why every blip sits left of centre or has room
   to its right. */
.blip-label {
  --tone: var(--crit);
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  padding: 7px 14px 7px 18px; border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap; line-height: 1;
  /* the pill ground follows the page, not a fixed dark — on light the tokens are
     already the darker variants, so the text keeps its contrast either way */
  color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 52%, transparent);
  background: color-mix(in srgb, var(--tone) 12%, color-mix(in srgb, var(--paper) 78%, transparent));
}
.radar-blip.b3 .blip-label { --tone: var(--good); }
.radar-blip.b5 .blip-label { --tone: var(--gold-ink); }

/* ---------- hero steps: the 4-step process laid over the radar field ----------
   Desktop: a stepped cascade anchored to the radar stage, each card a "detected"
   stage of the engagement. Below 960px the cascade unwinds into a normal list. */
.hero-steps {
  position: absolute; top: -40px; right: -60px; width: 620px; height: 620px;
  margin: 0; padding: 0; list-style: none; z-index: 3;
}
.hstep { --accent: var(--crit); position: absolute; left: 0; top: 0; }
.hstep.s1 { top: 34px;  left: 0; }
.hstep.s2 { top: 174px; left: 34px;  --accent: var(--teal); }
.hstep.s3 { top: 314px; left: 68px;  --accent: var(--gold); }
.hstep.s4 { top: 454px; left: 102px; --accent: var(--good); }

/* stepped connector: drops from one node, jogs right into the next */
.hstep:not(.s4)::after {
  content: ""; position: absolute; left: 14px; top: 30px; width: 34px; height: 110px;
  border-left: 2px solid color-mix(in srgb, var(--teal) 55%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--teal) 55%, transparent);
  border-bottom-left-radius: 12px;
}
.hstep-node {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 700;
  background: var(--teal); color: var(--contrast-ink);
  box-shadow: 0 0 0 4px var(--paper), 0 0 16px color-mix(in srgb, var(--teal) 55%, transparent);
}
.hstep-card {
  margin-left: 46px; width: 330px;
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 15px; border-radius: 12px;
  background: color-mix(in srgb, var(--paper-raised) 88%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
:root[data-theme="light"] .hstep-card { box-shadow: 0 10px 26px rgba(23,26,31,.10); }
.hstep-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.hstep-ic svg { width: 22px; height: 22px; }
.hstep-body { min-width: 0; }
.hstep-body h3 {
  margin: 0 0 3px; font-size: 21px; line-height: 1.1; color: var(--ink);
}
.hstep-body p {
  margin: 0; font-size: 13.5px; line-height: 1.42; color: var(--ink-soft);
}
.hstep-num {
  margin-left: auto; flex: 0 0 auto; align-self: flex-start;
  font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 700;
  color: color-mix(in srgb, var(--ink-soft) 62%, transparent);
}

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper-raised); position: relative; z-index: 2;
  padding-right: 44px; height: 44px; display: flex; align-items: center;
}
.ticker-track {
  display: flex; width: max-content;
  animation: ticker 30s linear infinite;
}
.ticker-track.paused { animation-play-state: paused; }
.ticker-pause {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-left: 1px solid var(--line); background: var(--paper-raised);
  color: var(--ink-soft); cursor: pointer; z-index: 3;
}
.ticker-pause:hover { color: var(--gold-ink); }
.ticker-pause .i-pause { display: block; }
.ticker-pause .i-play { display: none; }
.ticker-pause[aria-pressed="true"] .i-pause { display: none; }
.ticker-pause[aria-pressed="true"] .i-play { display: block; }
.ticker-track span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 22px; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; color: var(--ink-soft);
}
.ticker-track span::after { content: ""; width: 1px; height: 14px; background: var(--line); margin-left: 17px; }
.ticker-track span.tk-price { color: var(--ink-soft); }
.ticker-track span.tk-price b { color: var(--gold-ink); font-weight: 700; }
.ticker-track span.tk-price .tk-ic { color: var(--gold); font-size: 10px; }
.ticker-track span.tk-check { color: var(--ink-soft); }
.ticker-track span.tk-check b { color: var(--teal); font-weight: 700; }
.ticker-track span.tk-check .tk-ic { color: var(--teal); font-weight: 800; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- section shell ---------- */
.section { padding: 96px 0; }
.ghost-num {
  position: absolute; top: -6px; right: 0; z-index: 0;
  font-family: "Big Shoulders Display", sans-serif; font-weight: 900;
  font-size: clamp(120px, 18vw, 260px); line-height: 1; color: var(--ink);
  opacity: .035; pointer-events: none; user-select: none;
}
.section-head { position: relative; z-index: 1; max-width: 64ch; margin-bottom: 48px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 54px); margin: 0 0 16px; }
.section-head p { color: var(--ink-soft); font-size: 16.5px; margin: 0; }
.section-head .btn { margin-top: 24px; }
.section-head .btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* ---------- flux "cum lucram" (3 pasi) ---------- */
.flow-steps {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px;
}
.flow-steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 16px;
  height: 1px; background: var(--line); z-index: 0;
}
.flow-step { position: relative; z-index: 1; }
.flow-badge {
  display: inline-flex; align-items: center;
  padding: 9px 14px; margin: 0 0 18px;
  background: var(--paper); border: 1px solid var(--gold); border-radius: var(--radius-box);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; line-height: 1; letter-spacing: .06em; color: var(--gold-ink); white-space: nowrap;
}
.flow-step h3 {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700; text-transform: none; letter-spacing: -.01em;
  font-size: clamp(20px, 1.9vw, 24px); line-height: 1.25; margin: 0 0 12px;
}
.flow-step p { color: var(--ink-soft); font-size: 16px; line-height: 1.55; margin: 0; }
.flow-cta { margin-top: 48px; }

@media (max-width: 900px) {
  .flow-steps { grid-template-columns: 1fr; gap: 36px; }
  .flow-steps::before { display: none; }
  .flow-cta { margin-top: 36px; }
}

/* ---------- logo-uri clienti ---------- */
/* Logo-urile raman in culorile lor originale: fara grayscale, fara opacitate
   redusa, fara alt filtru. Singura normalizare e inaltimea maxima, ca randul
   sa arate aliniat cand logo-urile vin in proportii diferite. */
.client-logos {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px 32px;
  align-items: stretch;
}
/* toate casutele au acelasi chenar si aceeasi inaltime, cu sau fara logo in ele */
.client-logo {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: 10px 16px;
  border: 1px dashed var(--line); border-radius: var(--radius-box);
}
.client-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 52px; }
/* logo-uri late (raport lung/jos): inaltime mai mica, ca latimea randata sa ramana
   in casuta si greutatea vizuala sa fie comparabila cu a celorlalte logo-uri */
.client-logo.is-wide img { max-height: 39px; }
/* logo livrat doar in varianta alba: varianta cu text inchis pe tema light,
   ca sa ramana lizibil. Culorile de brand (rosu + alb pe rosu) sunt neatinse. */
.client-logo img.logo-on-light { display: none; }
:root[data-theme="light"] .client-logo img.logo-on-dark { display: none; }
:root[data-theme="light"] .client-logo img.logo-on-light { display: block; }
.client-logo.is-placeholder {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); text-align: center;
}
.clients-note { margin-top: 28px; font-size: 13.5px; color: var(--ink-soft); }

@media (max-width: 720px) {
  .client-logos { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .client-logo { min-height: 76px; }
  .client-logo.is-wide img { max-height: 31px; }
}

/* ---------- recenzie Google ---------- */
.review-band {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-box);
  padding: 48px;
}
.review-copy { max-width: 60ch; }
.review-copy h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 0 0 16px; }
.review-copy p { color: var(--ink-soft); font-size: 16.5px; margin: 0; }
.review-action { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* Stele + numarul de recenzii (scris manual; nota reala vine din recenzii-google.php cand e configurat).
   Stelele pline sunt un strat taiat la nota/5 peste conturul celor 5 stele goale. */
.review-score {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 44px; color: var(--ink); text-decoration: none;
}
.review-score-stars {
  position: relative; display: inline-block; color: color-mix(in srgb, var(--gold) 45%, transparent);
  font-size: 26px; letter-spacing: .12em; line-height: 1; white-space: nowrap;
}
.rss-fill { position: absolute; inset: 0 auto 0 0; width: 100%; overflow: hidden; color: var(--gold); }
.review-score-text { font-size: 15px; color: var(--ink-soft); }
.review-score-text b { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 800; font-size: 22px; color: var(--ink); }
.review-score:hover .review-score-text { color: var(--gold-ink); }
.review-score:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 720px) {
  .review-band { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }
  .review-action { align-items: stretch; }
  .review-action .btn { justify-content: center; padding: 12px 16px; letter-spacing: .04em; }
}

/* ---------- demo modal ---------- */
.demo-modal { display: none; }
.demo-modal.open {
  display: flex; position: fixed; inset: 0; z-index: 90; align-items: center; justify-content: center;
}
.demo-modal-inner {
  position: relative; width: 100vw; height: 100vh; background: var(--paper); overflow: hidden;
}
.demo-modal-close {
  position: absolute; top: 76px; right: 20px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold);
  background: var(--gold); color: var(--contrast-ink); display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; transition: background .2s ease, border-color .2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.demo-modal-close:hover { background: var(--gold-ink); border-color: var(--gold-ink); }
.demo-modal-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: var(--paper); }
.demo-modal-cat {
  --logo-h: 90px;
  position: absolute; bottom: 24px; left: 24px; z-index: 1; opacity: .5; pointer-events: none;
}
.mock-copy h3 { font-size: clamp(28px, 3.6vw, 42px); margin: 0 0 18px; }
.mock-copy p { color: var(--ink-soft); font-size: 16px; max-width: 42ch; margin: 0 0 26px; }

/* ---------- ce evaluam: axes accordion ---------- */
.ceval-axes { position: relative; z-index: 1; margin-top: 8px; border-top: 1px solid var(--line); }
details.ceval-axis { position: relative; border-bottom: 1px solid var(--line); transition: background .2s ease; }
/* the hover tint lives on the row's full-width parent, not on the summary — the
   summary is nudged 12px right on hover, so tinting it would leave the strip it
   vacates untinted on the left */
details.ceval-axis:not([open]):hover { background: color-mix(in srgb, var(--gold) 6%, transparent); }
details.ceval-axis::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent 60%);
  opacity: 0; transition: opacity .25s ease;
}
details.ceval-axis[open]::before { opacity: 1; }

summary.ceval-axis-row {
  display: grid; grid-template-columns: 100px minmax(0, 1fr) 220px; align-items: center; gap: 34px;
  padding: 34px 16px 34px 0; cursor: pointer; list-style: none;
  transition: transform .2s ease, background .2s ease;
}
details.ceval-axis:not([open]) summary.ceval-axis-row:hover {
  transform: translateX(12px);
}
/* the row slides 12px right on hover; the arrow sits at its right edge, so it would
   ride out over the tinted area's edge — pull it back so its inset stays constant */
details.ceval-axis:not([open]) summary.ceval-axis-row:hover .ceval-axis-action {
  transform: translateX(-12px);
}
summary.ceval-axis-row::-webkit-details-marker { display: none; }

.ceval-axis-number {
  align-self: start;
  margin-left: 24px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 46px;
  line-height: 1;
  color: var(--gold-ink);
}
.ceval-axis-heading { display: block; margin: 0 0 8px; font-size: 1.5rem; line-height: 1.25; letter-spacing: 0; color: var(--ink); font-weight: 700; }
.ceval-axis-intro { display: block; max-width: 730px; margin: 0; color: var(--ink-soft); font-size: 1rem; }
.ceval-axis-action { justify-self: end; width: 220px; transition: transform .2s ease; }

.ceval-impact-btn {
  display: flex; align-items: center; justify-content: flex-end; gap: 0; min-height: 50px;
  color: var(--ink); background: transparent;
  transition: color .2s ease, transform .2s ease;
}
.ceval-impact-btn .ceval-button-open,
.ceval-impact-btn .ceval-button-close { display: none; }
.ceval-impact-btn .ceval-arrow {
  width: 36px; aspect-ratio: 1; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  color: var(--ink); background: transparent; border: 1px solid var(--line); font-size: 1rem; transition: transform .28s ease, border-color .2s ease, color .2s ease;
}
summary.ceval-axis-row:hover .ceval-impact-btn .ceval-arrow,
summary.ceval-axis-row:focus-visible .ceval-impact-btn .ceval-arrow { border-color: var(--gold); color: var(--gold-ink); }
summary.ceval-axis-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 4px; }

details.ceval-axis[open] .ceval-impact-btn .ceval-arrow { transform: rotate(180deg); }

.ceval-read-more {
  display: inline-block; margin-top: 12px;
  font-family: "JetBrains Mono", monospace; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s ease;
}
summary.ceval-axis-row:hover .ceval-read-more,
summary.ceval-axis-row:focus-visible .ceval-read-more { color: var(--ink); }
details.ceval-axis[open] .ceval-read-more-open { display: none; }
details.ceval-axis:not([open]) .ceval-read-more-close { display: none; }

.ceval-expanded {
  display: flex; flex-direction: column;
  padding: 0 0 38px 134px; animation: ceval-reveal .32s ease both;
}
/* the "01 / title / close" header + its full-screen presentation are a
   mobile-only affordance (see the ≤880px query) — hidden by default so
   they can never leak into the desktop inline-accordion layout unstyled */
.ceval-modal-head { display: none; }
@keyframes ceval-reveal {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.ceval-criterion { padding: 24px 0; background: transparent; border-top: 1px solid var(--line); }
.ceval-criterion:first-child { border-top: none; }
.ceval-criterion:last-child { padding-bottom: 0; }
.ceval-criterion-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ceval-cols {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas: "meaning example" "impact example" "win example";
  column-gap: 28px; row-gap: 14px;
}
.ceval-meaning { grid-area: meaning; padding-top: 24px; }
.ceval-impact { grid-area: impact; }
.ceval-win { grid-area: win; }
.ceval-example { grid-area: example; position: relative; padding-top: 24px; }
.ceval-example-label {
  position: absolute; top: 0; right: 0; margin: 0; color: var(--ink-soft);
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  font-style: italic;
}
.ceval-dot { width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 10%, transparent); }
.ceval-criterion h3 {
  font-family: "Inter", sans-serif;
  text-transform: none;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0 0 8px;
  color: var(--ink);
}
.ceval-term-tag {
  display: inline-flex; align-items: center; flex-shrink: 0;
  margin: 0; padding: 5px 13px; border-radius: 6px;
  color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 14%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  font-family: "JetBrains Mono", monospace; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.ceval-criterion p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.5; }
.ceval-label {
  display: inline; margin: 0; color: var(--gold-ink);
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
}
.ceval-label::after { content: ":"; }
.ceval-example-visual { display: flex; gap: 8px; margin-top: 0; }
.ceval-ba {
  /* the before/after mockups are meant to read as a screenshot of a foreign
     page, not as another panel of the (dark) site chrome around them — so
     they get their own fixed, light "device screen" palette instead of
     inheriting --paper/--ink from the current site theme, which made them
     nearly indistinguishable from the surrounding UI in dark mode */
  /* the frame reads as warm, tinted "browser chrome"; the content canvas
     underneath (--paper) is pushed to a near-white so the mock UI drawn
     inside it — text, icons, the recommended badge — reads with real
     contrast instead of sinking into a same-tone card */
  --paper: #FFFFFF; --paper-raised: #EAE2D4; --ink: #1C1E24; --ink-soft: #6B7280;
  --line: #DED5C2; --crit: #E14B4B; --good: #22A35D; --contrast-ink: #FFFFFF;
  --gold: #3B6FE0; --gold-ink: #2451B8;
  flex: 1 1 0; min-width: 0; max-width: 220px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--paper-raised);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.ceval-ba-tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 8px; padding: 0; border-radius: 0;
  font-family: "JetBrains Mono", monospace; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: none;
}
.ceval-ba-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.ceval-ba-before .ceval-ba-tag { color: #A5372A; }
.ceval-ba-after .ceval-ba-tag { color: #166536; }
.ceval-ba svg { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.ceval-ba { position: relative; }
.ceval-ba-zoom {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink-soft); cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.ceval-ba-zoom:hover { border-color: var(--gold); color: var(--gold-ink); }
.ceval-ba-zoom svg { width: 15px; height: 15px; }

.ba-lightbox { display: none; }
.ba-lightbox.open {
  display: flex; position: fixed; inset: 0; z-index: 95; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.7);
}
.ba-lightbox-inner {
  position: relative; width: min(560px, 100%); max-height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px;
}
.ba-lightbox-scroll { overflow-y: auto; padding: 56px 32px 32px; }
.ba-lightbox-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.ba-lightbox-close:hover { border-color: var(--gold); color: var(--gold-ink); }
.ba-lightbox-content .ceval-ba-tag {
  display: inline-block; margin-bottom: 14px; padding: 4px 11px; border-radius: 999px;
  font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ba-lightbox-content .ceval-ba-tag::before { display: none; }
.ba-lightbox-content .ceval-ba-tag.is-before { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); }
.ba-lightbox-content .ceval-ba-tag.is-after { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.ba-lightbox-content svg { display: block; width: 100%; height: auto; }
.ba-lightbox-pair {
  /* same fixed light mockup palette as .ceval-ba, since the zoomed SVG is a
     clone of that markup dropped into the lightbox, not a descendant of it */
  --paper: #FFFFFF; --ink: #1C1E24; --ink-soft: #6B7280; --line: #DED5C2; --crit: #E14B4B; --good: #22A35D; --contrast-ink: #FFFFFF;
  --gold: #3B6FE0; --gold-ink: #2451B8;
  display: flex; flex-direction: column; gap: 24px;
}
.ba-lightbox-pair > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--paper); }
.ceval-weight {
  display: flex; align-items: center; gap: 9px; max-width: 240px; margin: 0 0 14px; color: var(--ink-soft);
  font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.ceval-weight-track { flex: 1; height: 8px; overflow: hidden; border-radius: 99px; background: var(--line); }
.ceval-weight-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--ink-soft) 60%, transparent), var(--ink-soft)); }

/* ---------- pachete: audit tickets ---------- */
.tickets { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }
.ticket {
  position: relative; background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius-box); padding: 26px 26px 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ticket:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(0,0,0,.35); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.ticket.featured { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 20px 40px rgba(0,0,0,.3); }
.ticket-num { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-soft); letter-spacing: .06em; margin-bottom: 12px; }
.stamp {
  position: absolute; top: 20px; right: 20px; height: 30px; padding: 0 14px; border-radius: 999px;
  border: 2px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; transform: rotate(-6deg); line-height: 1;
}
.ticket h3 { font-family: "Inter", sans-serif; text-transform: none; font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: 0; margin: 0 0 7px; }
.ticket .sub { color: var(--ink-soft); font-size: 13.5px; margin: 0; min-height: 38px; }
.stub-line { position: relative; margin: 20px -26px; border-top: 2px dashed var(--line); }
.stub-line::before, .stub-line::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); }
.stub-line::before { left: -9px; }
.stub-line::after { right: -9px; }
.ticket ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticket li { font-size: 14px; color: var(--ink); padding-left: 19px; position: relative; font-family: "Inter", sans-serif; }
.ticket li::before { content: "\2014"; position: absolute; left: 0; color: var(--gold-ink); }
.ticket-total { display: flex; justify-content: space-between; align-items: baseline; font-family: "JetBrains Mono", monospace; margin-bottom: 4px; }
.ticket-total .lbl { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .07em; }
.ticket-total .amt { font-size: 28px; font-weight: 700; }
.ticket-total .amt small { font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.price-note { font-size: 13px; color: var(--ink-soft); margin-bottom: 20px; }
.ticket-detail-link {
  display: inline-block; margin-top: 14px; font-family: "JetBrains Mono", monospace;
  font-size: 12.5px; letter-spacing: .03em; color: var(--ink-soft); text-decoration: none;
}
.ticket-detail-link:hover { color: var(--gold-ink); }

/* ---------- proces: connected flow ---------- */
.flow { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 10px; }
.flow::before {
  content: ""; position: absolute; top: 17px; left: 0; right: 0;
  height: 2px; background: var(--line); z-index: 0;
}
.flow-step { position: relative; z-index: 1; text-align: left; }
.flow-node {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: 6px; background: var(--paper-raised);
  border: 2px solid var(--gold); color: var(--gold);
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 13px; letter-spacing: .05em;
  margin: 0 0 18px;
}
.flow-step h3 { font-family: "Inter", sans-serif; text-transform: none; font-weight: 600; font-size: 21px; letter-spacing: 0; line-height: 1.3; margin: 0 0 9px; }
.flow-step p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* ---------- parcurs: timeline vizual cu dovadă foto ----------
   Secțiunea rulează pe o bandă proprie de fundal (--band): singura zonă cu
   conținut centrat din pagină, așa că se citește ca bloc separat, nu ca abatere
   de la alinierea la stânga a restului. Toate suprafețele dinăuntru pornesc din
   --band, ca decupajele peste linia punctată să rămână invizibile. */
#parcurs {
  --band: #06070A;
  background: var(--band);
}
/* pe fond deschis, un negru la fel de adânc ar rupe pagina; banda coboară doar
   sub nivelul lui --paper, cât să se decupeze */
:root[data-theme="light"] #parcurs { --band: #DCDFD8; }
.tl-head { max-width: 62ch; margin: 0 auto 56px; text-align: center; }
.tl-head .eyebrow { margin-bottom: 16px; }
.tl-head h2 { font-size: clamp(32px, 4.4vw, 54px); margin: 0 0 16px; }
.tl-head h2 em { font-style: normal; color: var(--gold); }
.tl-head p { color: var(--ink-soft); font-size: 16.5px; margin: 0 auto; max-width: 56ch; }

.timeline { position: relative; z-index: 1; }
.timeline::before {
  content: ""; position: absolute; top: 34px; bottom: 34px; left: 50%;
  width: 0; border-left: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  transform: translateX(-1px); z-index: 0;
}
.tl-step {
  position: relative; z-index: 1; display: flex; align-items: center;
  gap: 96px; padding: 30px 0;
}
.tl-step:nth-child(even) { flex-direction: row-reverse; }
.tl-step > * { flex: 1 1 0; min-width: 0; }
.tl-num {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--band); border: 2px solid var(--gold); color: var(--gold);
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 15px; letter-spacing: .04em;
}
.tl-label {
  display: block; font-family: "JetBrains Mono", monospace;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold-ink); margin: 0 0 14px;
}
.tl-step h3 {
  font-family: "Inter", sans-serif; text-transform: none; font-weight: 600;
  font-size: clamp(22px, 2.4vw, 29px); letter-spacing: -.01em; line-height: 1.25; margin: 0 0 14px;
}
.tl-step p { color: var(--ink-soft); font-size: 16px; line-height: 1.65; margin: 0; max-width: 42ch; }
/* attributes of the step, not actions: no container, no pill, no ring —
   a plain icon + label list so nothing here reads as a button */
.tl-tags { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; }
.tl-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--ink-soft); font-size: 14px; line-height: 1.4;
}
.tl-tag-ic {
  flex: 0 0 auto; width: 18px; height: 18px;
  display: grid; place-items: center; color: var(--gold);
}
.tl-tag-ic svg { width: 18px; height: 18px; }
.tl-cta { display: flex; justify-content: center; margin-top: 48px; }
.tl-media {
  display: block; padding: 2px; border-radius: 16px;
  background: var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
}
.tl-media img { display: block; width: 100%; height: auto; border-radius: 14px; }

@media (max-width: 880px) {
  .tl-head { margin-bottom: 36px; text-align: left; }
  .tl-head p { margin-left: 0; }
  .timeline::before { display: none; }
  .tl-step, .tl-step:nth-child(even) { flex-direction: column; align-items: stretch; gap: 22px; padding: 30px 0; }
  .tl-num { position: static; transform: none; margin-bottom: 2px; width: 48px; height: 48px; }
  .tl-step > * { flex: 0 0 auto; }
  .tl-step p { max-width: none; }
  .tl-media { order: 3; }
}

/* ---------- testimonials ---------- */
.quotes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-top: 8px; }
.quote {
  position: relative; margin: 0; background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: 4px; padding: 28px 26px 24px; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.quote:hover { transform: translateY(-6px); box-shadow: 0 18px 32px rgba(0,0,0,.3); }
.quote::before {
  content: ""; position: absolute; top: -7px; left: 30px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--gold) 60%, transparent);
}
.quote blockquote { margin: 0; }
.quote p.q { font-size: 17px; line-height: 1.55; margin: 0 0 20px; font-style: italic; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .avatar {
  width: 33px; height: 33px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--teal));
  flex-shrink: 0; box-shadow: 0 0 0 3px var(--paper-raised), 0 0 0 4px var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; color: var(--contrast-ink);
}
.quote .name { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; margin: 0; }
.quote .role { font-size: 12px; color: var(--ink-soft); }
.quote .result {
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--teal); font-weight: 700;
}
.quote .result .r-ic { font-size: 14px; }

.verified-badge {
  display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal);
  border: 1px solid var(--teal); border-radius: 999px; padding: 5px 13px; margin: 0 0 16px;
}
.verified-badge::before { content: "\2713"; font-weight: 800; }

/* ---------- manual vs automat comparison ---------- */
.cmp-wrap { position: relative; z-index: 1; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-box); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.cmp-table.cmp-4col { min-width: 980px; table-layout: fixed; }
.cmp-table.cmp-4col thead th:first-child { width: 22%; }
.cmp-table.cmp-4col .cmp-txt { white-space: normal; }
.cmp-table th, .cmp-table td { text-align: left; padding: 16px 20px; font-size: 15px; vertical-align: middle; }
.cmp-table td { border-bottom: 1px solid var(--line); }
.cmp-table thead th {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); border-bottom: 2px solid var(--line); background: var(--paper-raised);
}
.cmp-table thead th.us { color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 10%, var(--paper-raised)); border-bottom-color: var(--gold); }
.cmp-table thead th:first-child {
  background: color-mix(in srgb, var(--ink) 9%, var(--paper-raised));
  border-right: 1px solid var(--line);
}
.cmp-table td.cmp-row-label {
  font-weight: 700; color: var(--ink); font-family: "Inter", sans-serif; font-size: 14.5px; width: 22%;
  background: color-mix(in srgb, var(--ink) 5%, var(--paper-raised));
  border-right: 1px solid var(--line);
}
.cmp-table tbody tr:nth-child(even) td:not(.cmp-us):not(.cmp-row-label) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.cmp-table td.cmp-us { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.cmp-table tbody tr:last-child td { border-bottom: none; }

.cmp-cell { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.cmp-ic {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; line-height: 1;
  font-family: "JetBrains Mono", monospace;
}
.cmp-table td.yes .cmp-ic { color: var(--gold-ink); border: 1.5px solid var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.cmp-table td.partial .cmp-ic { color: var(--ink-soft); border: 1.5px solid var(--ink-soft); background: transparent; }
.cmp-table td.no .cmp-ic { color: var(--crit); border: 1.5px solid var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.cmp-txt { font-size: 13px; line-height: 1.4; color: var(--ink-soft); white-space: nowrap; }
.cmp-table td.yes .cmp-txt { color: var(--ink); }

/* ---------- FAQ ---------- */
.faq { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.faq details {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-box); padding: 6px 22px;
}
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 56px; font-family: "Inter", sans-serif; font-weight: 600; font-size: 17px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: "Big Shoulders Display", sans-serif; font-size: 22px; color: var(--gold-ink); flex-shrink: 0;
}
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-a { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; margin: 0 0 20px; max-width: 68ch; }

.section-head h3 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 16px; }

/* ---------- methodology axes (4-column card grid) ---------- */
.axes {
  position: relative; z-index: 1; margin-top: 8px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.axis-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-box);
  padding: 24px 22px;
}
.axis-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.axis-num { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--ink-soft); }
.axis-pct { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-ink); }
.axis-card h3 { font-size: 20px; margin: 0 0 10px; color: var(--ink); font-weight: 700; }
.axis-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 980px) {
  .axes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .axes { grid-template-columns: 1fr; }
}

.glossary-list {
  position: relative; z-index: 1; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 48px;
}
.glossary-item { border-top: 1px solid var(--line); padding-top: 16px; }
.glossary-item dt { font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.glossary-item dd { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
@media (max-width: 720px) {
  .glossary-list { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- numbered boxes (audit manual vs. audit automat) ---------- */
.axis-boxes {
  position: relative; z-index: 1; margin-top: 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.axis-box {
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius-box); padding: 26px 28px;
}
.axis-box-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.axis-box-num {
  flex: 0 0 auto;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800; font-size: 46px; line-height: 1;
  color: var(--gold-ink);
  /* cap height of the numeral lines up with the eyebrow's cap height at margin 0 */
  margin-top: 0;
}
.axis-box-eyebrow { display: flex; margin: 0 0 6px; }
.axis-box-eyebrow::before { display: none; }
.axis-box-title { display: block; }
.axis-box h3 {
  margin: 0; font-family: inherit; font-size: 1.5rem; line-height: 1.25;
  letter-spacing: 0; text-transform: none;
  color: var(--ink); font-weight: 700;
}
.axis-box p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
@media (max-width: 980px) {
  .axis-boxes { grid-template-columns: 1fr; }
  .axis-box h3 { font-size: 1.25rem; }
  .axis-box-num { font-size: 2.4rem; }
}

/* ---------- pricing page breakdown ---------- */
.pkg-detail { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 56px; margin-top: 16px; }
.pkg-block { scroll-margin-top: 90px; }
.pkg-block { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; }
.pkg-divider { width: 100%; height: 0; border-top: 1px dashed var(--line); margin: 0 0 32px; }
.pkg-block h3 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 10px; }
.pkg-block .pkg-price { font-family: "JetBrains Mono", monospace; font-size: 22px; color: var(--gold-ink); font-weight: 700; margin: 0 0 12px; }
.pkg-block .pkg-sub { color: var(--ink-soft); font-size: 15.5px; max-width: 42ch; margin: 0 0 18px; }
.pkg-features {
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius-box); padding: 26px 28px;
}
.pkg-block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pkg-block li { font-size: 15px; color: var(--ink); padding-left: 22px; position: relative; }
.pkg-block li::before { content: "\2014"; position: absolute; left: 0; color: var(--gold-ink); }

/* ---------- generic content page ---------- */
.copy-block { position: relative; z-index: 1; max-width: 74ch; }
.copy-block p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.65; margin: 0 0 20px; }
.copy-block .lead-answer {
  font-size: 18px; color: var(--ink); line-height: 1.6; margin: 0 0 28px;
  padding: 20px 22px; background: var(--paper-raised); border-left: 3px solid var(--gold); border-radius: 4px;
}
.copy-block .lead-quote {
  font-size: 18px; color: var(--ink); line-height: 1.6; margin: 0 0 28px;
  padding: 2px 0 2px 22px; border-left: 3px solid var(--gold);
}
.copy-block .lead-block {
  margin: 0 0 28px; padding: 2px 0 2px 22px; border-left: 3px solid var(--gold);
}
.copy-block .lead-block p {
  font-size: 18px; color: var(--ink); line-height: 1.6; margin: 0 0 14px;
}
.copy-block .lead-block p:last-child { margin-bottom: 0; }

/* ---------- numbered feature list (audit scope) ---------- */
.feat-list { position: relative; z-index: 1; margin-top: 8px; }
.feat-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start;
  padding: 32px 0; border-top: 1px solid var(--line);
}
.feat-row:last-child { padding-bottom: 0; }
.feat-num { font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: 2rem; color: var(--gold-ink); line-height: 1; }
.feat-row h3 { font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 10px; }
.feat-row p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 62ch; }
@media (max-width: 640px) {
  .feat-row { grid-template-columns: 40px 1fr; gap: 14px; padding: 22px 0; }
  .feat-num { font-size: 1.4rem; }
}

.page-hero { padding: 56px 0 8px; }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { font-size: clamp(30px, 4.4vw, 50px); margin: 0 0 18px; max-width: 22ch; }
.page-hero .lede { font-size: 18px; color: var(--ink-soft); max-width: 60ch; margin: 0; line-height: 1.6; }

/* ---------- page-hero audit-scope demo ---------- */
.page-hero .wrap { position: relative; }
.audit-art { position: absolute; top: 50%; right: 10px; width: 320px; transform: translateY(-50%); pointer-events: none; }
.audit-art svg { width: 100%; height: auto; display: block; overflow: visible; }

.as-blob { opacity: .35; transform-box: fill-box; transform-origin: center; animation: as-drift 16s ease-in-out infinite alternate; }
@keyframes as-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(12px,-10px) scale(1.08); } }

.as-ring-outer {
  fill: none; stroke: color-mix(in srgb, var(--ink-soft) 32%, transparent); stroke-width: 1.5; stroke-dasharray: 2 9;
  transform-box: fill-box; transform-origin: center; animation: as-spin 46s linear infinite;
}
.as-ring-mid { fill: none; stroke: color-mix(in srgb, var(--ink-soft) 20%, transparent); stroke-width: 1; }
@keyframes as-spin { to { transform: rotate(360deg); } }

.as-blade {
  fill: none; stroke: var(--gold-ink); stroke-width: 2.5; stroke-linecap: round; opacity: .55;
}

.as-spoke { stroke: color-mix(in srgb, var(--ink-soft) 26%, transparent); stroke-width: 1; }

.as-tick { stroke: var(--gold-ink); stroke-width: 2; stroke-linecap: round; }

.as-core-ping {
  fill: none; stroke: var(--gold); stroke-width: 1.5; transform-box: fill-box; transform-origin: center;
  animation: as-ping 2.6s cubic-bezier(.25,.6,.4,1) infinite;
}
@keyframes as-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.as-core-dot { fill: var(--gold); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 65%, transparent)); }

.as-node {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: as-nodein .5s ease forwards, as-nodepulse 2.6s ease-in-out infinite;
}
.as-node.n-crit { fill: var(--crit); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--crit) 70%, transparent)); animation-delay: .6s, 1.1s; }
.as-node.n-gold { fill: var(--gold); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 70%, transparent)); animation-delay: 1.9s, 2.4s; }
.as-node.n-good { fill: var(--good); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--good) 70%, transparent)); animation-delay: 3.2s, 3.7s; }
.as-node.n-teal { fill: var(--teal); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--teal) 70%, transparent)); animation-delay: 4.5s, 5s; }
@keyframes as-nodein { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes as-nodepulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }

.as-label { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .06em; fill: color-mix(in srgb, var(--ink-soft) 70%, transparent); opacity: 0; animation: as-nodein .5s ease forwards; }
.as-label.l-crit { animation-delay: .8s; }
.as-label.l-good { animation-delay: 3.4s; }

@media (max-width: 1080px) {
  .audit-art { display: none; }
}
.breadcrumb { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-soft); margin: 0 0 20px; text-transform: uppercase; letter-spacing: .05em; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-ink); }
.dateline { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-soft); margin: -12px 0 20px; letter-spacing: .03em; }
.dateline time { color: inherit; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact-info dl { margin: 30px 0 0; display: flex; flex-direction: column; gap: 18px; }
.contact-info dt { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-bottom: 3px; }
.contact-info dd { margin: 0; font-size: 16px; }
.contact-info > p { color: var(--ink-soft); max-width: 48ch; }
form.card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px;
  padding: 32px; display: flex; flex-direction: column; gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  font-family: "Inter", sans-serif; font-size: 15.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  padding: 11px 13px; outline: none; resize: vertical; min-height: 44px;
}
.field label .req { color: var(--gold-ink); margin-left: 2px; }
.field label .opt { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-size: 11px; margin-left: 4px; }
.field label.label-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.field label.label-row .label-link { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--gold-ink); text-decoration: none; white-space: nowrap; }
.field label.label-row .label-link:hover { text-decoration: underline; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-repeat: no-repeat; background-position: right 13px center; background-size: 14px; padding-right: 36px;
}
:root[data-theme="dark"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2A93C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); }
:root[data-theme="light"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C97A1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); }
.field select:invalid { color: var(--ink-soft); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { font-size: 14px; color: var(--ink-soft); margin-top: 28px; }
.field-check { display: flex; align-items: flex-start; gap: 9px; }
.field-check input[type="checkbox"] {
  flex-shrink: 0; width: 24px; height: 24px; margin-top: 0; accent-color: var(--gold);
}
.field-check label {
  font-size: 14px; color: var(--ink-soft); line-height: 1.5; text-transform: none; letter-spacing: 0;
}
.field-check label a { color: var(--gold-ink); }
.field-check label .req { color: var(--gold-ink); margin-left: 2px; }
.form-consent-note { font-size: 12px; line-height: 1.5; color: var(--ink-soft); margin: 4px 0 0; }
.form-consent-note a { color: var(--gold-ink); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 40px 0 32px; position: relative; z-index: 1; }
footer .wrap { display: flex; flex-direction: column; gap: 14px; }
footer .footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
footer .wm { --logo-h: 24px; }
footer .footer-right { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; }
footer .fsocial { display: flex; align-items: center; gap: 10px; }
footer .fsocial-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  text-decoration: none; opacity: .75;
  transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
footer .fsocial-link svg { width: 16px; height: 16px; fill: currentColor; display: block; }
footer .fsocial-link:hover { border-color: var(--gold); color: var(--gold); opacity: 1; }
footer .fine { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
/* one row, separated by hairlines drawn between adjacent links */
.flinks { display: flex; flex-wrap: wrap; margin: 6px -14px 0; }
.flinks a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: 14px; color: var(--ink-soft); text-decoration: none;
}
.flinks a + a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 12px; background: var(--line);
}
.flinks a:hover { color: var(--gold-ink); }
.footer-trust { font-size: 13.5px; color: var(--ink-soft); margin: -2px 0 0; max-width: none; }
.footer-trust strong { color: var(--ink); }
.footer-trust a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line); transition: color .15s ease, text-decoration-color .15s ease; }
.footer-trust a:hover { color: var(--gold-ink); text-decoration-color: currentColor; }

/* ---------- floating actions ---------- */
.float-actions { position: fixed; right: 22px; bottom: 22px; z-index: 45; display: flex; flex-direction: column; gap: 10px; }
.float-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper-raised); border: 1px solid var(--line); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.3); text-decoration: none;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.float-btn:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.float-btn.hide { opacity: 0; pointer-events: none; transform: translateY(8px); }

@media (max-width: 960px) {
  .hero .hero-title { max-width: 100%; }
  .scan-wrap {
    position: relative; top: auto; right: auto;
    width: calc(100% + 48px); max-width: 200px; aspect-ratio: 1 / 1; height: auto;
    margin: 0 auto; container-type: inline-size;
  }
  .scan-stage { --radar-scale: calc(100cqw / 620px); }
  /* the stage is scaled right down here and sits behind the copy — the readout
     pills would be unreadable and would collide with the headline */
  .blip-label { display: none; }
  /* cascade unwinds: steps become a normal list under the hero copy */
  .hero-steps {
    position: static; top: auto; right: auto; width: auto; height: auto;
    margin: 30px 0 0; display: grid; gap: 12px;
  }
  .hstep, .hstep.s1, .hstep.s2, .hstep.s3, .hstep.s4 {
    position: relative; top: auto; left: auto;
  }
  .hstep:not(.s4)::after { display: none; }
  .hstep-node { top: 12px; }
  .hstep-card { width: auto; max-width: 560px; }
  .contact-grid { grid-template-columns: 1fr; }
  .mock-copy-grid { grid-template-columns: 1fr; }
  .pkg-block { grid-template-columns: 1fr; gap: 16px; }
  nav.mainnav { display: none; }
  .header-actions .btn { display: none; }
  .nav-toggle { display: block; }
  .mobile-nav { display: block; }
  .ghost-num { display: none; }
  .cursor-glow { display: none; }
}
@media (max-width: 880px) {
  .hero-inner { padding-bottom: 32px; }
  .hero-inner .eyebrow, .hero-inner .hero-title, .hero-inner .lede, .hero-inner .cta-row,
  .hero-inner .hero-steps {
    position: relative; z-index: 2;
  }
  .scan-wrap {
    position: absolute; top: 50%; left: 50%; right: auto; margin: 0;
    width: 620px; height: 620px; max-width: none; aspect-ratio: auto;
    transform: translate(-50%, -50%); opacity: .55; container-type: normal;
  }
  .scan-stage { --radar-scale: calc(160vw / 620px); }
  /* radar sits behind the hero copy here — calmer field, dimmer sweep */
  .radar-glow { opacity: .34; }
  .radar-sweep::before { filter: brightness(.7); }
  .desktop-only-copy { display: none; }
  .tickets { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .flow::before { display: none; }
  .ghost-num { display: none; }
  .cursor-glow { display: none; }
  footer .footer-top { gap: 14px 20px; }
  summary.ceval-axis-row {
    grid-template-columns: 58px 1fr auto;
    grid-template-areas:
      "num heading action"
      "num weight   ."
      "num intro    intro"
      "num readmore readmore";
    column-gap: 18px; row-gap: 6px; padding: 22px 12px 22px 0;
  }
  summary.ceval-axis-row > span:not([class]) { display: contents; }
  .ceval-axis-number { grid-area: num; font-size: 2.4rem; margin-left: 0; }
  .ceval-axis-heading { grid-area: heading; margin-bottom: 0; font-size: 1.25rem; }
  .ceval-weight { grid-area: weight; max-width: 130px; margin: 0; align-self: center; }
  .ceval-axis-intro { grid-area: intro; margin-top: 8px; }
  .ceval-read-more { grid-area: readmore; }
  .ceval-axis-action { grid-area: action; justify-self: end; align-self: center; width: auto; }
  .ceval-impact-btn { width: auto; }
  .ceval-expanded { padding-left: 76px; }
  .ceval-cols { grid-template-columns: 1fr; grid-template-areas: "meaning" "example" "impact" "win"; row-gap: 16px; }
  .ceval-col:not(:first-child) { padding-top: 16px; }
  .ceval-meaning { padding-top: 0; }
  .ceval-criterion-top { margin-bottom: 28px; }
  .ceval-term-tag { display: none; }
  details.ceval-axis:not([open]) .ceval-axis-intro,
  details.ceval-axis:not([open]) .ceval-read-more,
  details.ceval-axis:not([open]) .ceval-weight { display: none; }
  details.ceval-axis:not([open]) summary.ceval-axis-row {
    grid-template-areas: "num heading action";
  }

  /* mobile: each axis opens full screen instead of expanding inline */
  .ceval-impact-btn .ceval-arrow,
  details.ceval-axis[open] .ceval-impact-btn .ceval-arrow { transform: rotate(-90deg); }

  /* .ceval-axes carries .reveal(.in), which sets a transform — any transform on an
     ancestor creates a new containing block for position:fixed descendants, so the
     "full screen" modal below would anchor to this box instead of the viewport */
  .ceval-axes.reveal,
  .ceval-axes.reveal.in { transform: none; }
  /* .ceval-axes also sets z-index:1 on a positioned box, which creates its own
     stacking context — trapping the modal's z-index inside it so header (z-index:40,
     outside that context) still painted on top and swallowed the close-button clicks */
  .ceval-axes { z-index: auto; }

  /* fixed header + scrollable body, instead of a sticky header inside the
     scroll container — position:sticky nested in overflow:auto is a known
     hit-testing bug on WebKit/iOS where the sticky bar sits in the right
     place visually but taps on it fall through to the scrolled content
     underneath, which is why the close button looked dead */
  details.ceval-axis[open] .ceval-expanded {
    position: fixed; inset: 0; z-index: 98; isolation: isolate;
    display: flex; flex-direction: column; margin: 0; padding: 0;
    background: var(--paper); overflow: hidden;
    animation: none;
  }
  /* locks the page behind the full-screen panel so a touch that starts on
     the panel never scrolls/drags the document underneath it */
  html.ceval-modal-locked, html.ceval-modal-locked body { overflow: hidden; }
  details.ceval-axis[open] .ceval-modal-head {
    display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
    padding: 18px 20px; cursor: pointer; touch-action: manipulation;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .ceval-modal-num {
    font-family: "Big Shoulders Display", sans-serif; font-weight: 800;
    font-size: 1.7rem; line-height: 1; color: var(--gold-ink);
  }
  .ceval-modal-title { flex: 1; margin: 0; font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; text-transform: none; font-size: 1.3rem; font-weight: 700; color: var(--ink); }
  .ceval-modal-close {
    display: grid; place-items: center; flex: 0 0 auto; pointer-events: none;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--gold); background: var(--gold); color: var(--contrast-ink);
    transition: background .2s ease, border-color .2s ease;
  }
  .ceval-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 0 20px 32px; }

  /* the "Ce înseamnă" label above the first criterion no longer sits first
     in .ceval-expanded (the modal head does) so :first-child/:last-child
     never matched .ceval-criterion any more — switch to :first-of-type /
     :last-of-type, which still match regardless of the head sibling */
  .ceval-criterion:first-of-type { border-top: none; }
  .ceval-criterion:last-of-type { padding-bottom: 0; }
  .ceval-criterion-top { margin-bottom: 10px; }
  .ceval-meaning .ceval-label { display: none; }
  /* separator lines between criteria removed — the extra vertical space
     from ceval-criterion's own padding already separates them */
  .ceval-criterion { border-top: none; }

  /* "Ce rezolvăm" (impact) and "Impact" (win) read before the before/after
     photos, not after */
  .ceval-cols { grid-template-areas: "meaning" "impact" "win" "example"; }

  /* zoom/lightbox stays desktop-only; mobile already opens full screen */
  .ceval-ba-zoom { display: none; }
}
@media (max-width: 480px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  .ceval-example-visual { flex-direction: column; }
  header .wrap { height: 58px; }
  .wm { --logo-h: 34px; }
  .hero { padding-top: 15px; }
  .hero .lede { font-size: 16px; margin: 16px 0 22px; }
  .hero .cta-row { gap: 12px 16px; }
  .scan-wrap { width: 100%; max-width: 400px; }
  .radar-blip { width: 13px; height: 13px; }
  .radar-blip.b1 { top: 16%; left: 20%; }
  .radar-blip.b3 { top: 40%; left: 74%; }
  .radar-blip.b2 { top: 72%; left: 62%; }
  .radar-blip.b5 { top: 56%; left: 14%; }
  .hstep-card { padding: 13px; gap: 11px; }
  .hstep-ic { width: 38px; height: 38px; }
  .hstep-body h3 { font-size: 19px; }
  .hstep-body p { font-size: 13px; }
  .section { padding: 40px 0; }
  .section-head { margin-bottom: 24px; }
  summary.ceval-axis-row { grid-template-columns: 40px 1fr auto; column-gap: 12px; row-gap: 6px; }
  .ceval-weight { max-width: 100px; }
  .ceval-axis-intro { font-size: .95rem; }
  .ceval-expanded { padding-left: 52px; }
  .ceval-criterion { padding: 20px 0; }
  .field-row { grid-template-columns: 1fr; }
  .cmp-table th, .cmp-table td { padding: 12px 14px; font-size: 13.5px; }
}

/* ---------- mobile: 44px minimum tap targets ---------- */
@media (max-width: 640px) {
  .float-btn { width: 44px; height: 44px; }
  .ceval-ba-zoom { width: 44px; height: 44px; top: 6px; right: 6px; }
  .ticket-detail-link { display: inline-flex; align-items: center; min-height: 44px; }
  .field label.label-row .label-link { display: inline-flex; align-items: center; min-height: 44px; }
  /* on phones the row cannot hold, so the links stack and the hairlines go */
  .flinks { flex-direction: column; align-items: flex-start; margin: 6px 0 0; }
  .flinks a { min-height: 44px; padding: 0; }
  .flinks a + a::before { display: none; }
}

/* ---------- reduced motion ---------- */
/* Ambient/decorative motion is switched off; interaction feedback — hover,
   focus, the accordion open/close, theme transition — is intentionally kept
   so state changes and hierarchy remain legible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Kept running under reduced motion:
     - the cursor glow: it tracks the pointer rather than animating on its own,
       and is the site's signature response to the visitor — kept on purpose
     - the hero radar: the site's signature, small, off to the side, aria-hidden
     - the info ticker: it has a visible pause control (WCAG 2.2.2), so the
       visitor stays in charge of it */
  .btn-pulse,
  .as-blob, .as-ring-outer, .as-core-ping, .as-node, .as-label {
    animation: none !important;
  }
  .section::before, .hero::before,
  .section.scanned::before, .hero.scanned::before {
    animation: none !important; opacity: 0 !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ceval-expanded { animation: none !important; }
}

/* ---------- blog: listă de articole + pagină de articol ---------- */
.blog-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px; margin-top: 8px;
}
.bcard {
  display: flex; flex-direction: column;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-box);
  overflow: hidden; transition: border-color .2s ease, transform .2s ease;
}
.bcard:hover { border-color: var(--gold); transform: translateY(-2px); }
.bcard-media { display: block; position: relative; aspect-ratio: 1200 / 630; background: #0F1116; overflow: hidden; }
.bcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the category lives in the meta line; the cover image carries the gold badge */
.bcard-cat { color: var(--gold-ink); font-weight: 700; }
.bcard-body { display: flex; flex-direction: column; flex: 1; padding: 24px; gap: 12px; }
.bcard .bcard-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0;
}
.bcard-meta .sep { opacity: .45; }
.bcard-time { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); }
.bcard h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 0; }
.bcard h2 a { color: var(--ink); text-decoration: none; }
.bcard h2 a:hover { color: var(--gold-ink); }
.bcard p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }
.bcard .bcard-cta { margin-top: auto; padding-top: 8px; }
.bcard .btn { min-height: 44px; }

/* pagina de articol */
.article-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 24px;
}
.article-meta .sep { opacity: .45; }
.article-meta .read-time { color: var(--teal); }
.article-figure { position: relative; z-index: 1; margin: 8px 0 0; }
.article-figure img {
  display: block; width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: var(--radius-box); background: #0F1116;
}
.article-figure figcaption {
  margin-top: 10px; font-family: "JetBrains Mono", monospace; font-size: 12px;
  color: var(--ink-soft); letter-spacing: .04em;
}
.article-body { position: relative; z-index: 1; max-width: 70ch; }
.copy-block.article-intro { max-width: 70ch; }
.copy-block ul, .art-case ul {
  position: relative; z-index: 1; max-width: 70ch;
  margin: 0 0 20px; padding-left: 22px;
  color: var(--ink-soft); font-size: 16.5px; line-height: 1.65;
}
.copy-block li, .art-case li { margin-bottom: 10px; }
.copy-block li:last-child, .art-case li:last-child { margin-bottom: 0; }
.copy-block li::marker, .art-case li::marker { color: var(--gold); }
.copy-block li strong, .art-case li strong { color: var(--ink); }
.article-body h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 18px; }
.article-body h3 { font-size: clamp(19px, 2vw, 23px); margin: 0 0 10px; }
.article-body p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.68; margin: 0 0 20px; }
.article-body ul { color: var(--ink-soft); font-size: 16.5px; line-height: 1.68; padding-left: 20px; margin: 0 0 20px; }
.article-body li { margin-bottom: 8px; }
.article-body a:not(.btn) { color: var(--gold-ink); }

.art-case {
  position: relative; z-index: 1;
  border: 1px solid var(--line); border-radius: var(--radius-box);
  background: var(--paper-raised); padding: 28px 28px 8px; margin-bottom: 28px;
}
.art-case-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.art-case-num {
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700;
  color: var(--gold); letter-spacing: .08em; padding-top: 6px; flex-shrink: 0;
}
.art-case-head h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0; }
.art-case-head h3 { font-size: clamp(19px, 2.2vw, 25px); margin: 0; }
.art-case p.art-label, .art-label {
  display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  margin: 0 0 8px; color: var(--crit);
}
.art-case p.art-label.fix, .art-label.fix { color: var(--good); }
.art-case p.art-label.tip, .art-label.tip { color: var(--teal); }
.art-case p { color: var(--ink-soft); font-size: 16px; line-height: 1.66; margin: 0 0 20px; max-width: 70ch; }


/* dropdown-uri din nav: deschidere la hover (și la focus, pentru tastatură) */
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { display: flex; }
/* punte peste spațiul dintre trigger și meniu, ca hover-ul să nu se rupă */
.nav-drop-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.nav-drop:hover .nav-drop-trigger svg,
.nav-drop:focus-within .nav-drop-trigger svg { transform: rotate(180deg); }

.nowrap { white-space: nowrap; }

/* titlu de pagină pe toată lățimea disponibilă */
.page-hero-wide h1 { max-width: none; font-size: clamp(34px, 6.6vw, 92px); }
.page-hero-wide .copy-block { max-width: 88ch; }

/* dropdown cu link + caret (Blog) */
.nav-drop { display: inline-flex; align-items: center; gap: 2px; }
nav.mainnav .nav-drop-link { letter-spacing: .09em; }
nav.mainnav .nav-drop-caret {
  min-width: 44px; min-height: 44px; justify-content: center; margin-left: -10px;
}
nav.mainnav .nav-drop-menu a.nav-drop-all {
  border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 12px;
  color: var(--gold-ink); font-size: 13px;
}

@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; gap: 22px; }
  .bcard-body { padding: 20px; }
  .art-case { padding: 22px 20px 4px; }
  .art-case-head { gap: 12px; }
}

/* ---------- articol: share, cuprins, takeaways, CTA intermediar, autor, articole similare ---------- */
.share-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0 0 30px; }
.share-label {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-soft); margin-right: 4px;
}
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.share-btn:hover { color: var(--gold-ink); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }

.toc {
  position: relative; z-index: 1; max-width: 70ch; margin: 0 0 32px;
  border: 1px solid var(--line); border-radius: var(--radius-box);
  background: var(--paper-raised); padding: 24px 26px 20px;
}
.toc .eyebrow { margin-bottom: 14px; }
.toc-list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc-list li { counter-increment: toc; margin: 0; border-top: 1px solid var(--line); }
.toc-list li:first-child { border-top: 0; }
.toc-list a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0;
  color: var(--ink); text-decoration: none; font-size: 15.5px; line-height: 1.45;
}
.toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700;
  color: var(--gold); flex-shrink: 0;
}
.toc-list a:hover { color: var(--gold-ink); }

.takeaways {
  position: relative; z-index: 1; max-width: 70ch; margin: 0 0 36px;
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--radius-box);
  background: color-mix(in srgb, var(--gold) 7%, var(--paper-raised));
  padding: 24px 26px;
}
.takeaways .eyebrow { margin-bottom: 12px; }
.takeaways ul { margin: 0; padding-left: 20px; }
.takeaways li { color: var(--ink); font-size: 16px; line-height: 1.6; margin-bottom: 10px; }
.takeaways li::marker { color: var(--gold); }
.takeaways li:last-child { margin-bottom: 0; }

.midcta {
  position: relative; z-index: 1; max-width: 70ch; margin: 8px 0 36px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
  border: 1px solid var(--gold); border-radius: var(--radius-box);
  background: color-mix(in srgb, var(--gold) 9%, var(--paper-raised));
  padding: 26px 28px;
}
.midcta-body { flex: 1 1 320px; }
.midcta .eyebrow { margin-bottom: 10px; }
.midcta-title {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 800;
  text-transform: uppercase; line-height: 1.08; font-size: clamp(22px, 2.4vw, 28px);
  color: var(--ink); margin: 0 0 10px !important;
}
.midcta p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; margin: 0; }
.midcta-actions { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }

.backtotop { margin: 4px 0 0; }
.backtotop a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); text-decoration: none;
}
.backtotop a:hover { color: var(--gold-ink); }

.author-box {
  position: relative; z-index: 1; max-width: var(--article-w); display: flex; gap: 22px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius-box);
  background: var(--paper-raised); padding: 26px 28px;
}
.author-avatar {
  width: 56px; height: 56px; flex-shrink: 0; display: block;
  background-color: var(--gold);
}
.author-box .eyebrow { margin-bottom: 8px; }
.author-name {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 800;
  text-transform: uppercase; font-size: 24px; line-height: 1.1; color: var(--ink); margin: 0 0 8px;
}
.author-box p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.62; margin: 0; max-width: 68ch; }
.author-box a { color: var(--gold-ink); }

.related-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 8px;
}
.rcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-box);
  background: var(--paper-raised); overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.rcard:hover { border-color: var(--gold); transform: translateY(-2px); }
.rcard-media { display: block; aspect-ratio: 1200 / 630; background: #0F1116; overflow: hidden; }
.rcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcard-body { padding: 20px 22px 24px; }
.rcard-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-soft);
}
.rcard-tag { color: var(--gold); }
.rcard-meta .sep { opacity: .45; }
.rcard h3 { font-size: 20px; margin: 0; }
.rcard h3 a { color: var(--ink); text-decoration: none; }
.rcard h3 a:hover { color: var(--gold-ink); }

@media (max-width: 720px) {
  .toc, .takeaways, .midcta { padding: 20px 20px 18px; }
  .midcta-actions { width: 100%; }
  .midcta-actions .btn { width: 100%; justify-content: center; }
  .author-box { flex-direction: column; gap: 16px; padding: 22px 20px; }
}

/* ---------- articol: tot conținutul într-un singur box ---------- */
:root { --article-w: 880px; }

/* ---------- articol: titlu pe toată lățimea, secțiuni mai apropiate ----------
   Se aplică prin class="article" pe <body>, deci doar paginilor de blog; restul
   site-ului păstrează ritmul original. Orice articol nou are nevoie de clasă. */
body.article .section { padding: 48px 0; }
body.article .page-hero h1 { max-width: var(--article-w); }
body.article .page-hero { padding: 48px 0 8px; }
body.article #continut-articol { padding-top: 32px; }
@media (max-width: 640px) {
  body.article .section { padding: 32px 0; }
  body.article .page-hero { padding: 32px 0 8px; }
}

.page-hero .article-figure { max-width: var(--article-w); }

.article-card {
  position: relative; z-index: 1; max-width: var(--article-w);
  border: 1px solid var(--line); border-radius: var(--radius-box);
  background: var(--paper-raised);
  padding: 44px 48px 38px;
}
.article-card > *:first-child { margin-top: 0; }
.article-card .copy-block,
.article-card .article-body,
.article-card .toc,
.article-card .takeaways,
.article-card .midcta,
.article-card .art-case p { max-width: none; }
.article-card .copy-block p:last-child { margin-bottom: 26px; }

/* cuprinsul: inset, nu încă un card peste card */
.article-card .toc { background: transparent; }

/* secțiunile numerotate devin blocuri de text, separate prin linie */
.article-card .art-case {
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; padding: 32px 0 0; margin: 0 0 32px;
}
.article-card .art-case:first-of-type { border-top: 0; padding-top: 8px; }
/* caseta de CTA din mijloc separa deja vizual — fara linie in plus dupa ea */
.article-card .midcta + .art-case { border-top: 0; padding-top: 0; }
.article-card .art-case-head { margin-bottom: 16px; }

/* titlurile de secțiune din interiorul boxului */
.card-head { position: relative; z-index: 1; border-top: 1px solid var(--line); padding-top: 34px; margin: 0 0 26px; }
.card-head .eyebrow { margin-bottom: 12px; }
.card-head h2 { font-size: clamp(24px, 2.9vw, 36px); margin: 0 0 14px; }
.card-head p { color: var(--ink-soft); font-size: 16px; line-height: 1.65; margin: 0; }

/* FAQ în interiorul boxului: rânduri, nu casete */
.article-card .faq { gap: 0; margin-top: 0; }
.article-card .faq details {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 4px 0;
}
.article-card .faq details:last-of-type { border-bottom: 0; }
.article-card .faq .faq-a { max-width: none; }

.article-card .backtotop { margin-bottom: 6px; }

@media (max-width: 720px) {
  .article-card { padding: 26px 20px 22px; }
  .card-head { padding-top: 26px; }
}

/* ---------- iconița de timp de citire ---------- */
.read-time, .bcard-time, .rcard-time { display: inline-flex; align-items: center; gap: 6px; }
.ic-clock { flex-shrink: 0; opacity: .9; }
.rcard-time { color: var(--teal); }