/* ============================================================
   SILENT PIXEL — Components & Page Modules
   ============================================================ */

/* ---------- LOADER ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: grid;
  place-items: center;
  background: var(--void);
  transition: opacity .9s var(--e-out), visibility .9s;
}
.loader.gone { opacity: 0; visibility: hidden; }
.loader-mk {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 44px;
}
.loader-mk i {
  aspect-ratio: 1;
  background: var(--slate-600);
  border-radius: 1px;
  animation: ld 1.35s var(--e-io) infinite;
}
.loader-mk i:nth-child(1) { animation-delay: 0ms; }
.loader-mk i:nth-child(2) { animation-delay: 90ms; }
.loader-mk i:nth-child(3) { animation-delay: 180ms; }
.loader-mk i:nth-child(4) { animation-delay: 90ms; }
.loader-mk i:nth-child(5) { animation-delay: 180ms; }
.loader-mk i:nth-child(6) { animation-delay: 270ms; }
.loader-mk i:nth-child(7) { animation-delay: 180ms; }
.loader-mk i:nth-child(8) { animation-delay: 270ms; }
.loader-mk i:nth-child(9) { animation-delay: 360ms; }
@keyframes ld {
  0%, 100% { background: var(--slate-700); transform: scale(.7); }
  50%      { background: var(--iri-1); transform: scale(1); }
}

/* ---------- SHADER STAGE ---------- */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.stage canvas {
  width: 100%;
  height: 100%;
  display: block;
}
/* graceful CSS-only fallback if WebGL fails */
canvas.gl-fail {
  background:
    radial-gradient(ellipse 70% 60% at 30% 35%, rgba(var(--crimson-rgb),.45), transparent 62%),
    radial-gradient(ellipse 60% 55% at 72% 62%, rgba(var(--copper-rgb),.34), transparent 62%),
    radial-gradient(ellipse 50% 50% at 55% 20%, rgba(var(--sand-rgb),.24), transparent 65%),
    var(--obsidian);
  animation: fail-pan 18s var(--e-io) infinite alternate;
}
@keyframes fail-pan {
  to { filter: hue-rotate(48deg) saturate(1.25); }
}

/* fade shader into page bg at edges */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--ground-rgb),.55) 0%, transparent 22%, transparent 62%, var(--void) 100%);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}
/* shader occupies the right side only — type stays crisp on the left.
   The left fade exists to blend the canvas into the obsidian ground; in
   light mode the canvas ground IS the page pearl (exact match), so the fade
   is skipped there — it would only smear the oil-black form's edge into a
   gray gradient. The first stop starts at rgba(0,0,0,var(--lift)): fully
   transparent in dark (lift 0), fully opaque in light (lift 1). */
.hero > .stage {
  left: 34%;
  mask-image: linear-gradient(90deg,
    transparent 0%, #000 26%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, #000 26%, #000 100%);
}
.hero > .stage::after {
  /* The heavy uniform light-mode wash (+.2/+.3 lift) protected dark type
     over the old mid-tone crimson render, but it also bleached the form.
     The oil-black render needs the opposite: keep the form dense and shield
     only the TEXT COLUMN, so light mode swaps the wash for a horizontal
     scrim that is opaque under the copy and clears before the blob. */
  background:
    linear-gradient(90deg,
      rgba(var(--ground-rgb), calc(.55 * var(--lift))) 0%,
      rgba(var(--ground-rgb), 0) 22%),
    linear-gradient(to bottom,
      rgba(var(--ground-rgb),calc(.5 + .06 * var(--lift))) 0%,
      rgba(var(--ground-rgb),0) 26%,
      rgba(var(--ground-rgb),0) 66%,
      var(--void) 100%);
}
@media (min-width: 901px) {
  :root[data-theme="light"] .hero > .stage-pixel { left: 42%; }
}
@media (max-width: 900px) {
  .hero > .stage {
    left: 0;
    top: -6%;
    mask-image: radial-gradient(ellipse 92% 62% at 62% 34%, #000 18%, transparent 74%);
    -webkit-mask-image: radial-gradient(ellipse 92% 62% at 62% 34%, #000 18%, transparent 74%);
    opacity: .62;
  }
  .hero > .stage-pixel {
    left: 28%;
    top: -4%;
    bottom: 20%;
    opacity: .48;
    mask-image: radial-gradient(ellipse 100% 72% at 72% 28%, #000 12%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 100% 72% at 72% 28%, #000 12%, transparent 76%);
  }
}

.hero-in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
/* keep hero copy in the left column so it never fights the shader */
.hero-in > * { max-width: min(62ch, 60%); }
@media (max-width: 900px) {
  .hero-in > * { max-width: 100%; }
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem 1.05rem .45rem .8rem;
  border-radius: 100px;
  background: var(--fill-1);
  border: 1px solid var(--glass-brd-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--slate-200);
  margin-bottom: clamp(1.5rem, 3.4vh, 2.6rem);
}

.hero-h1 {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.055em;
  margin-bottom: clamp(1.4rem, 3vh, 2.3rem);
}
.hero-h1 .l {
  display: block;
  overflow: hidden;
}
.hero-h1 .l > span {
  display: block;
  transform: translateY(108%);
  animation: line-up 1.35s var(--e-out) forwards;
}
.hero-h1 .l:nth-child(1) > span { animation-delay: .55s; }
.hero-h1 .l:nth-child(2) > span { animation-delay: .68s; }
.hero-h1 .l:nth-child(3) > span { animation-delay: .81s; }
/* Keep the first two words together as one compact headline line. */
.hero-h1 .l:nth-child(1),
.hero-h1 .l:nth-child(2) { display: inline; overflow: visible; }
.hero-h1 .l:nth-child(1) > span,
.hero-h1 .l:nth-child(2) > span { display: inline-block; }
@keyframes line-up { to { transform: none; } }

.hero-lede {
  max-width: 46ch;
  margin-bottom: clamp(2rem, 4.5vh, 3.2rem);
  opacity: 0;
  animation: fade-up 1.15s var(--e-out) 1.02s forwards;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.hero-cta {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0;
  animation: fade-up 1.15s var(--e-out) 1.18s forwards;
}

/* The homepage hero is intentionally compact on desktop so the service
   overview starts within the first screen instead of being pushed below a
   full-viewport introduction. Mobile keeps the more spacious composition. */
@media (min-width: 901px) {
  .hero {
    min-height: 0;
    padding-bottom: clamp(2.5rem, 5vh, 4rem);
  }
  .hero-in { padding-top: clamp(1.25rem, 3vh, 2.5rem); }
  .hero-tag { margin-bottom: clamp(1rem, 2vh, 1.35rem); }
  .hero-h1 {
    font-size: clamp(3.25rem, 5.2vw, 6.5rem);
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
  }
  .hero-lede { margin-bottom: 1.5rem; }
  #servicii { padding-top: clamp(2rem, 4vh, 3rem); }
}

@media (max-width: 900px) {
  .hero {
    min-height: 0;
    padding-bottom: 2rem;
  }
  .hero-in { padding-top: 1.25rem; }
  .hero-tag { margin-bottom: 1rem; }
  .hero-h1 {
    font-size: clamp(2.75rem, 10vw, 4rem);
    margin-bottom: 1rem;
  }
  .hero-lede { margin-bottom: 1.25rem; }
  #servicii { padding-top: 2rem; }
}
/* ============================================================
   SECTION HEADER
   ============================================================ */
.sec-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
@media (max-width: 820px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; }
}
.sec-head h2 { max-width: 22ch; }
.sec-head .lede { margin-top: 1.3rem; }

/* ============================================================
   PILLAR CARDS (8 service categories)
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.75rem, 1.1vw, 1.1rem);
}
@media (max-width: 1180px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .pillars { grid-template-columns: 1fr; } }

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 288px;
  padding: 1.5rem 1.4rem 1.35rem;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  overflow: hidden;
  isolation: isolate;
  transition: transform .7s var(--e-out), border-color .55s, background .55s;
  transform-style: preserve-3d;
  will-change: transform;
}
.pillar:hover {
  border-color: var(--glass-brd-2);
  background: var(--glass-bg-2);
}

/* inner iridescent wash on hover */
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-iri-soft);
  opacity: 0;
  transition: opacity .65s var(--e-out);
}
.pillar:hover::before { opacity: 1; }

/* big index numeral */
.pillar .num {
  position: absolute;
  top: 1.1rem; right: 1.25rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--slate-500);
  transition: color .5s;
}
.pillar:hover .num { color: var(--iri-1); }

/* glyph */
.pillar .gl {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--fill-2);
  border: 1px solid var(--glass-brd);
  margin-bottom: auto;
  transition: transform .7s var(--e-out), background .55s, border-color .55s;
}
.pillar:hover .gl {
  transform: translateZ(30px) scale(1.06) rotate(-4deg);
  background: rgba(var(--acc-rgb),.12);
  border-color: var(--accent-line);
}
.pillar .gl svg { width: 21px; height: 21px; stroke: var(--bone); fill: none; stroke-width: 1.3; }
.pillar:hover .gl svg { stroke: var(--iri-1); }

.pillar h3 {
  font-size: 1.24rem;
  letter-spacing: -.03em;
  margin-top: 1.5rem;
  margin-bottom: .55rem;
  transition: transform .7s var(--e-out);
}
.pillar:hover h3 { transform: translateZ(18px); }

.pillar p {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--slate-300);
  margin-bottom: 1.15rem;
}

.pillar .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.pillar .meta b { color: var(--bone); font-weight: 500; }
.pillar .meta .go {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-brd-2);
  transition: all .5s var(--e-out);
  flex: none;
}
.pillar:hover .meta .go {
  background: var(--bone);
  border-color: var(--bone);
  transform: rotate(-45deg);
}
.pillar .meta .go svg { width: 11px; height: 11px; stroke: var(--bone); stroke-width: 1.8; fill: none; transition: stroke .4s; }
.pillar:hover .meta .go svg { stroke: var(--void); }

/* featured pillar spans 2 cols with shader */
.pillar-hero {
  grid-column: span 2;
  min-height: 340px;
  padding: 0;
  border: 1px solid var(--glass-brd-2);
}
@media (max-width: 520px) { .pillar-hero { grid-column: span 1; } }
.pillar-hero .stage { z-index: 0; }
.pillar-hero .stage::after {
  /* The heavy light-mode veil (+.46/+.5) muted the old crimson orb; the
     oil-black orb needs to stay visible, so light mode only keeps the
     bottom band that carries the card's title text. */
  background: linear-gradient(to top,
    rgba(var(--ground-rgb),calc(.92 + .06 * var(--lift))) 0%,
    rgba(var(--ground-rgb),calc(.38 + .1 * var(--lift))) 55%,
    rgba(var(--ground-rgb),calc(.12 + .06 * var(--lift))) 100%);
}
.pillar-hero-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.7rem 1.6rem 1.5rem;
}
.pillar-hero h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: auto; }
.pillar-hero p { max-width: 34ch; }

/* ============================================================
   SERVICE ROW LIST (index-style listing)
   ============================================================ */
.srv-list { border-top: 1px solid var(--line); }
.srv-row {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr auto auto 3rem;
  gap: clamp(.8rem, 2vw, 2rem);
  align-items: center;
  padding: clamp(1.1rem, 2.2vh, 1.7rem) 1rem;
  border-bottom: 1px solid var(--line);
  transition: background .5s var(--e-out), padding-left .5s var(--e-out);
  isolation: isolate;
  overflow: hidden;
}
.srv-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-iri-soft);
  opacity: 0;
  transform: translateX(-100%);
  transition: transform .75s var(--e-io), opacity .5s;
}
.srv-row:hover::before { opacity: 1; transform: none; }
.srv-row:hover { padding-left: 1.6rem; }

.srv-row .idx {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .15em;
  color: var(--slate-500);
  transition: color .45s;
}
.srv-row:hover .idx { color: var(--iri-1); }

/* nm and ds must be block: they are <span>s (the row is an <a>, so no <div>
   descendants are allowed) and would otherwise run together on one line. */
.srv-row .nm {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.65vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.15;
  color: var(--bone);
  transition: color .4s;
}
.srv-row:hover .nm { color: var(--white); }
.srv-row .ds {
  display: block;
  font-size: .845rem;
  color: var(--slate-300);
  margin-top: .34rem;
  max-width: 54ch;
  line-height: 1.45;
}

.srv-row .pr {
  display: block;
  font-family: var(--f-mono);
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--bone);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.srv-row .pr small { color: var(--slate-500); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; display: block; }

.srv-row .tm {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-400);
  white-space: nowrap;
}

.srv-row .go {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  transition: all .55s var(--e-out);
  justify-self: end;
  flex: none;
}
.srv-row:hover .go { background: var(--bone); border-color: var(--bone); transform: rotate(-45deg) scale(1.08); }
.srv-row .go svg { width: 13px; height: 13px; stroke: var(--slate-200); stroke-width: 1.7; fill: none; transition: stroke .4s; }
.srv-row:hover .go svg { stroke: var(--void); }

@media (max-width: 900px) {
  .srv-row {
    grid-template-columns: 2.6rem 1fr auto;
    row-gap: .5rem;
  }
  .srv-row .tm { display: none; }
  .srv-row .go { display: none; }
}

/* ============================================================
   PROCESS TIMELINE
   ============================================================ */
.proc { position: relative; }
.proc-line {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--slate-600) 8%, var(--slate-600) 92%, transparent);
}
.proc-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-iri);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
}
@media (max-width: 900px) { .proc-line { left: 14px; } }

.proc-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 5rem 1fr;
  grid-template-rows: auto;
  gap: 1rem;
  align-items: center;
  padding-block: clamp(1rem, 2.2vh, 1.9rem);
}
/* Sides are set explicitly via data-side — never nth-child, because
   .proc-line is also a child and would offset the alternation. */
.proc-step[data-side="l"] .body { grid-column: 1; grid-row: 1; text-align: right; }
.proc-step[data-side="r"] .body { grid-column: 3; grid-row: 1; text-align: left; }
.proc-step[data-side="l"] .body p { margin-left: auto; }
.proc-step[data-side="r"] .body p { margin-right: auto; }
.proc-step .node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--obsidian);
  border: 1px solid var(--slate-600);
  font-family: var(--f-mono);
  font-size: .74rem;
  color: var(--slate-300);
  position: relative;
  z-index: 2;
  transition: all .6s var(--e-out);
}
.proc-step.in .node {
  border-color: var(--accent-line);
  color: var(--iri-1);
  box-shadow: 0 0 0 5px rgba(var(--acc-rgb),.09), 0 0 26px -6px rgba(var(--acc-rgb),.4);
}
.proc-step h4 { margin-bottom: .5rem; }
.proc-step p { font-size: .89rem; color: var(--slate-300); max-width: 40ch; line-height: 1.55; }

@media (max-width: 900px) {
  .proc-step { grid-template-columns: 44px 1fr; gap: 1.3rem; }
  .proc-step[data-side="l"] .body,
  .proc-step[data-side="r"] .body { grid-column: 2; text-align: left; }
  .proc-step[data-side="l"] .body p,
  .proc-step[data-side="r"] .body p { margin-left: 0; margin-right: 0; }
  .proc-step .node { grid-column: 1; justify-self: start; }
}

/* ============================================================
   WORK GRID
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.7rem, 1.2vw, 1.2rem);
}
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work-grid { grid-template-columns: 1fr; } }

.work {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--slate-900);
  border: 1px solid var(--glass-brd);
  aspect-ratio: 4 / 3;
  isolation: isolate;
  transition: border-color .55s, transform .75s var(--e-out);
}
.work:hover { border-color: var(--glass-brd-2); transform: translateY(-4px); }
/* The hero card spans 2 rows so the two sz-md cards stack beside it instead of
   leaving a hole. Explicit rows are required: auto rows sized by aspect-ratio
   would not line the column heights up. */
.work-grid { grid-auto-rows: minmax(0, auto); }
/* Sizes tile the 6-column grid with no holes:
   rows 1-2  lg(4) + md(2) + md(2)     row 3  wide(3) + wide(3)
   row 4     box(2) + box(2) + box(2)  row 5  wide(3) + wide(3)
   sz-md deliberately has no aspect-ratio — it stretches to fill half the
   height of the two-row hero beside it. sz-box is the standalone 2-col card. */
.work.sz-lg { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; min-height: clamp(360px, 34vw, 520px); }
.work.sz-md { grid-column: span 2; aspect-ratio: auto; min-height: clamp(168px, 16vw, 250px); }
.work.sz-box { grid-column: span 2; aspect-ratio: 4 / 3; }
.work.sz-sm { grid-column: span 2; aspect-ratio: 1; }
.work.sz-wide { grid-column: span 3; aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  .work.sz-lg { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .work.sz-md { aspect-ratio: 4 / 3; min-height: 0; }
  .work.sz-md, .work.sz-box, .work.sz-sm, .work.sz-wide { grid-column: span 1; }
}
@media (max-width: 560px) {
  .work.sz-lg, .work.sz-md, .work.sz-box, .work.sz-sm, .work.sz-wide { grid-column: span 1; }
}

/* placeholder plate — procedural, no images needed */
.work-plate {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 26% 30%, var(--p1, rgba(var(--crimson-rgb),.62)), transparent 62%),
    radial-gradient(ellipse 65% 60% at 74% 70%, var(--p2, rgba(var(--copper-rgb),.46)), transparent 62%),
    linear-gradient(140deg, var(--plate-1), var(--plate-2));
  transition: transform 1.1s var(--e-out), filter .7s;
}
.work:hover .work-plate { transform: scale(1.06); filter: saturate(1.4) brightness(1.12); }

/* mesh overlay lines to imply 3D wireframe */
.work-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--media-ink-rgb),.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--media-ink-rgb),.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent 76%);
}
.work-plate.tone-1 { --p1: rgba(var(--crimson-rgb), .72); --p2: rgba(var(--copper-rgb), .5); }
.work-plate.tone-2 { --p1: rgba(var(--sand-rgb), .3); --p2: rgba(var(--copper-rgb), .46); }
.work-plate.tone-3 { --p1: rgba(var(--crimson-rgb), .66); --p2: rgba(var(--sand-rgb), .26); }
.work-plate.tone-4 { --p1: rgba(var(--copper-rgb), .56); --p2: rgba(var(--crimson-rgb), .6); }
.work-plate.tone-5 { --p1: rgba(var(--copper-rgb), .44); --p2: rgba(var(--crimson-rgb), .68); }
.work-plate.tone-6 { --p1: rgba(var(--crimson-rgb), .7); --p2: rgba(var(--sand-rgb), .24); }
.work-plate.tone-7 { --p1: rgba(var(--copper-rgb), .5); --p2: rgba(var(--crimson-rgb), .62); }
.work-plate.tone-8 { --p1: rgba(var(--crimson-rgb), .64); --p2: rgba(var(--copper-rgb), .48); }
.work-plate.tone-9 { --p1: rgba(var(--sand-rgb), .26); --p2: rgba(var(--crimson-rgb), .66); }
.work-plate.tone-10 { --p1: rgba(var(--crimson-rgb), .68); --p2: rgba(var(--copper-rgb), .44); }

.work-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--media-rgb),.9) 0%, rgba(var(--media-rgb),.34) 45%, transparent 78%);
  z-index: 1;
}
.work-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.4rem 1.35rem 1.25rem;
}
.work-body .cat {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: .5rem;
  display: block;
}
.work-body h4 {
  font-size: clamp(1.02rem, 1.5vw, 1.32rem);
  margin-bottom: .3rem;
}
.work-body h4 { color: var(--on-media); }
.work-body p { font-size: .82rem; color: rgba(var(--media-ink-rgb),.74); }

.work-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  padding: .32em .8em;
  border-radius: 100px;
  background: rgba(var(--media-rgb),.62);
  border: 1px solid var(--media-brd-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--on-media);
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* No second `color` here. This badge floats on the work plate, so its ink
     must stay --on-media in BOTH themes; a neutral like --slate-200 inverts
     to near-black in light mode and drops to 1.47:1 on the dark scrim. */
  opacity: 0;
  transform: translateY(-6px);
  transition: all .55s var(--e-out);
}
.work:hover .work-badge { opacity: 1; transform: none; }

/* ============================================================
   ACCORDION / FAQ
   ============================================================ */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.15rem, 2.4vh, 1.6rem) .3rem;
  text-align: left;
  transition: color .4s, padding-left .5s var(--e-out);
}
.acc-btn:hover { color: var(--white); padding-left: 1rem; }
.acc-btn .q {
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.28;
}
.acc-btn .ic {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  position: relative;
  transition: all .5s var(--e-out);
}
.acc-btn .ic::before, .acc-btn .ic::after {
  content: "";
  position: absolute;
  background: var(--slate-200);
  transition: transform .55s var(--e-out), background .4s;
}
.acc-btn .ic::before { width: 11px; height: 1.4px; }
.acc-btn .ic::after  { width: 1.4px; height: 11px; }
.acc-item.on .acc-btn .ic { border-color: var(--accent-line); background: var(--accent-soft); }
.acc-item.on .acc-btn .ic::after { transform: scaleY(0); }
.acc-item.on .acc-btn .ic::before { background: var(--iri-1); }
.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .75s var(--e-io);
}
.acc-panel-in {
  padding: 0 4rem 1.7rem .3rem;
  font-size: .93rem;
  color: var(--slate-300);
  line-height: 1.62;
  max-width: 72ch;
}
@media (max-width: 600px) { .acc-panel-in { padding-right: 1rem; } }

/* ============================================================
   BIG CTA
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-brd-2);
  min-height: clamp(360px, 52vh, 560px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gut);
  isolation: isolate;
}
.cta .stage::after {
  background: radial-gradient(ellipse 80% 70% at 50% 50%,
    rgba(var(--ground-rgb),calc(.5  + .34 * var(--lift))) 0%,
    rgba(var(--ground-rgb),calc(.85 + .12 * var(--lift))) 72%);
}
.cta-in { position: relative; z-index: 2; max-width: 62ch; }
.cta h2 {
  font-size: clamp(2.2rem, 6.4vw, 5.4rem);
  line-height: .88;
  letter-spacing: -.05em;
  margin-bottom: 1.4rem;
}
.cta .lede { margin-inline: auto; margin-bottom: 2.4rem; }
.cta-btns { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   PAGE HERO (subpages)
   ============================================================ */
.phero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 10vh, 7rem));
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  overflow: hidden;
}
.phero .stage { opacity: .8; }
.phero .stage::after {
  background: linear-gradient(to bottom,
    rgba(var(--ground-rgb),calc(.62 + .26 * var(--lift))) 0%,
    rgba(var(--ground-rgb),calc(.78 + .16 * var(--lift))) 45%,
    var(--void) 100%);
}
.phero-in { position: relative; z-index: 2; }
.phero h1 {
  font-size: var(--t-h1);
  line-height: .86;
  letter-spacing: -.05em;
  margin-bottom: 1.4rem;
  max-width: 20ch;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}
.crumbs a { color: var(--slate-300); transition: color .35s; }
/* Breadcrumb text is 11px, so its box is only ~19px tall — half a finger.
   Pad the link itself rather than faking the target with a pseudo-element:
   an invisible pad here would overlap the "/" separator and the sibling
   crumb, and a tap near the edge would follow the wrong link. The row is
   height-driven by its content, so the extra padding just makes the crumb
   bar slightly taller — a change worth the reachability. */
@media (hover: none) {
  .crumbs { gap: .75rem; }
  .crumbs a { padding-block: .7rem; }
}
.crumbs a:hover { color: var(--iri-1); }
.crumbs .sep { color: var(--slate-600); }
.crumbs .cur { color: var(--bone); }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  padding-bottom: clamp(1.6rem, 3.5vh, 2.6rem);
}
.filter-bar .lbl {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-right: .5rem;
}
.filter-bar .cnt {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.filter-bar .cnt b { color: var(--iri-1); font-weight: 400; }

/* ============================================================
   SERVICE DETAIL PAGE
   ============================================================ */
.sd-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 1040px) { .sd-layout { grid-template-columns: 1fr; } }

.sd-body h3 { margin-bottom: 1rem; margin-top: 2.6rem; }
.sd-body h3:first-child { margin-top: 0; }
.sd-body p { color: var(--slate-300); margin-bottom: 1.1rem; max-width: 68ch; }

.sd-list { display: flex; flex-direction: column; gap: .8rem; margin-block: 1.4rem; }
.sd-list li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  font-size: .93rem;
  color: var(--slate-200);
  line-height: 1.55;
}
.sd-list li::before {
  content: "";
  width: 16px; height: 16px;
  flex: none;
  margin-top: .28rem;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  position: relative;
}

/* Sticky order panel */
.sd-panel {
  position: sticky;
  top: calc(var(--nav-h) + 1.4rem);
  padding: 1.7rem 1.6rem;
  border-radius: var(--r-lg);
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-brd-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.sd-price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .3rem;
}
.sd-price .v {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
}
.sd-price .c {
  font-family: var(--f-mono);
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--slate-300);
}
.sd-panel .from {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 1.4rem;
}
.sd-rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.5rem; }
.sd-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .78rem 0;
  border-top: 1px solid var(--line);
  font-size: .875rem;
}
.sd-rows > div span:first-child { color: var(--slate-400); }
.sd-rows > div span:last-child { color: var(--bone); text-align: right; font-weight: 400; }

/* ============================================================
   FORM
   ============================================================ */
.form { display: grid; gap: 1.1rem; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .f-row { grid-template-columns: 1fr; } }

.field { position: relative; }
.field label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: .6rem;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .95rem 1.05rem;
  border-radius: var(--r-md);
  background: var(--fill-1);
  border: 1px solid var(--glass-brd);
  color: var(--bone);
  /* Never below 16px: iOS Safari force-zooms the viewport when a focused
     field's text is smaller, and it does not zoom back out on blur, so the
     user is left scrolled sideways inside a form. max() keeps the intended
     .95rem on any root size where that already clears 16px. */
  font-size: max(.95rem, 16px);
  font-weight: 300;
  transition: border-color .45s var(--e-out), background .45s, box-shadow .45s;
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8378' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}
.field select option { background: var(--slate-800); color: var(--bone); }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-500); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent-line);
  background: rgba(var(--acc-rgb),.05);
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.1);
}

/* Radio card group */
/* 170px min keeps the RON ranges on one line; below that they wrap mid-number. */
.rad-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; }
.rad {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  background: var(--fill-1);
  border: 1px solid var(--glass-brd);
  cursor: pointer;
  transition: all .45s var(--e-out);
  font-size: .875rem;
}
.rad:hover { border-color: var(--glass-brd-2); background: var(--fill-2); }
.rad input { position: absolute; opacity: 0; pointer-events: none; }
.rad .mk {
  width: 16px; height: 16px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--slate-500);
  position: relative;
  transition: all .4s var(--e-out);
}
.rad .mk::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--iri-1);
  transform: scale(0);
  transition: transform .4s var(--e-out);
}
.rad input:checked ~ .mk { border-color: var(--iri-1); box-shadow: 0 0 12px -2px rgba(var(--acc-rgb),.5); }
.rad input:checked ~ .mk::after { transform: scale(1); }
.rad:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }

/* ============================================================
   CONTACT INFO CARDS
   ============================================================ */
.ct-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 1040px) { .ct-layout { grid-template-columns: 1fr; } }

.ct-card {
  padding: 1.35rem 1.4rem;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  transition: all .5s var(--e-out);
}
.ct-card:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateX(4px); }
.ct-card .k {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: .5rem;
}
.ct-card .v { font-size: 1rem; color: var(--bone); }
.ct-card .v a:hover { color: var(--iri-1); }

/* ============================================================
   PRICE TIERS
   ============================================================ */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 1.4vw, 1.3rem); }
@media (max-width: 980px) { .tiers { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.8rem 1.6rem 1.7rem;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: all .6s var(--e-out);
  isolation: isolate;
  overflow: hidden;
}
.tier:hover { border-color: var(--glass-brd-2); transform: translateY(-5px); }
.tier.feat { border-color: var(--accent-line); background: var(--glass-bg-2); }
.tier.feat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-iri-soft);
  opacity: .7;
}
.tier .flag {
  position: absolute;
  top: 1.3rem; right: 1.3rem;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .3em .75em;
  border-radius: 100px;
  background: var(--grad-iri);
  color: var(--void);
  font-weight: 600;
}
.tier h4 { font-size: 1.15rem; margin-bottom: .5rem; }
.tier .sub { font-size: .845rem; color: var(--slate-400); margin-bottom: 1.5rem; min-height: 2.6em; line-height: 1.5; }
.tier .pv {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  margin-bottom: .35rem;
}
.tier .pv small { font-size: .42em; font-weight: 400; color: var(--slate-400); letter-spacing: 0; }
.tier .pn {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 1.6rem;
}
.tier ul { display: flex; flex-direction: column; gap: .68rem; margin-bottom: 1.9rem; flex: 1; }
.tier ul li {
  display: flex;
  gap: .68rem;
  align-items: flex-start;
  font-size: .875rem;
  color: var(--slate-200);
  line-height: 1.45;
}
.tier ul li svg { width: 15px; height: 15px; flex: none; margin-top: .22rem; stroke: var(--iri-1); stroke-width: 2; fill: none; }
.tier:first-child ul li:last-child { display: none; }
.tier-note { margin: -1.25rem 0 1rem; color: var(--slate-500); font-size: .68rem; line-height: 1.4; }
.tier.feat > .sub,
.tier.feat > .pn,
.tier.feat > ul:not(.tier-growth-features) { display: none; }
.tier-growth-sub { font-size: .845rem; color: var(--slate-400); margin: 0 0 1.5rem; min-height: 2.6em; line-height: 1.5; }
.tier-growth-period { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 1.6rem; }
.tier-growth-features { display: flex; flex-direction: column; gap: .68rem; margin-bottom: 1.9rem; flex: 1; padding: 0; list-style: none; }
.tier-growth-features li { display: flex; gap: .68rem; align-items: flex-start; font-size: .875rem; color: var(--slate-200); line-height: 1.45; }
.tier-growth-features li::before { content: "✓"; color: var(--iri-1); flex: none; }
.tier:last-child > .sub,
.tier:last-child > ul:not(.tier-studio-features) { display: none; }
.tiers .tier > .sub,
.tiers .tier > .tier-growth-sub { display: none; }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.quote {
  position: relative;
  padding: clamp(2rem, 4vw, 3.2rem);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.quote blockquote {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.032em;
  color: var(--bone);
  margin-bottom: 1.8rem;
  text-wrap: balance;
}
.quote .who { display: flex; align-items: center; gap: .9rem; }
.quote .av {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex: none;
  background: var(--grad-iri);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--void);
}
.quote .nm { font-size: .93rem; color: var(--bone); }
.quote .rl { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); margin-top: .18rem; }

/* ============================================================
   MISC
   ============================================================ */
/* char-split hover ripple */
.ch {
  display: inline-block;
  transition: transform .5s var(--e-out), color .4s;
  transition-delay: calc(var(--i) * 12ms);
}
[data-split="chars"]:hover .ch { transform: translateY(-6px); color: var(--iri-1); }

/* Panel with iridescent edge lit from top */
.lit {
  position: relative;
  overflow: hidden;
}
.lit::before {
  content: "";
  position: absolute;
  top: -1px; left: 12%;
  width: 76%; height: 1px;
  background: var(--grad-iri);
  opacity: .55;
}
.lit::after {
  content: "";
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 120px;
  background: radial-gradient(ellipse at center, rgba(var(--acc-rgb),.16), transparent 68%);
  pointer-events: none;
}

/* Sticky side label */
.side-label {
  position: absolute;
  left: calc(var(--gut) * -1 + .4rem);
  top: 0;
  writing-mode: vertical-rl;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--slate-600);
}
@media (max-width: 1400px) { .side-label { display: none; } }

/* ============================================================
   SUBPAGE COMPONENTS — added for servicii / serviciu /
   portofoliu / contact
   ============================================================ */

/* `.card` is used as a marker on index.html elements that already carry their
   own surface; it exists only to unify hover elevation. Kept minimal on
   purpose so it cannot fight the component that owns the element. */
.card { position: relative; }

.sec-tight { padding-block: clamp(3rem, 7vh, 5.5rem); }
.sec-cat { padding-block: clamp(3rem, 7vh, 5rem); scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.h3 { font-size: var(--t-h3); }
.sec-head.sm { margin-bottom: clamp(1.6rem, 3.5vh, 2.4rem); }
.sec-head.sm h2 { max-width: 26ch; }

/* ---------- category quick-nav ---------- */
/* Six categories form a balanced 3 × 2 grid on wide screens. */
.catnav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
@media (max-width: 1040px) { .catnav { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .catnav { grid-template-columns: 1fr; } }
.catnav-item {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  transition: border-color .5s var(--e-out), background .5s, transform .5s var(--e-out);
}
.catnav-item:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  transform: translateY(-3px);
}
.catnav-item .ic {
  width: 38px; height: 38px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--glass-brd);
  background: var(--fill-1);
  transition: border-color .5s;
}
.catnav-item:hover .ic { border-color: var(--accent-line); }
.catnav-item .ic svg {
  width: 18px; height: 18px;
  stroke: var(--iri-1);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.catnav-item .tx { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.catnav-item .tx b {
  font-family: var(--f-display);
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--bone);
}
.catnav-item .tx em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-500);
}

/* ---------- fixed category scroll navigator ---------- */
.category-scroll-nav {
  position: fixed;
  z-index: 30;
  top: 50%;
  right: clamp(.75rem, 2vw, 2rem);
  transform: translateY(-50%);
  pointer-events: none;
}
.category-scroll-nav ol {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.category-scroll-nav button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  width: 100%;
  min-height: 48px;
  padding: .25rem .15rem .25rem .55rem;
  border: 0;
  background: transparent;
  color: var(--slate-500);
  cursor: pointer;
  pointer-events: auto;
}
.category-scroll-label {
  max-width: 138px;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: .48rem;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--slate-500);
  opacity: .72;
  transition: max-width .32s var(--e-out), font-size .2s ease, opacity .2s ease, color .2s ease;
}
.category-scroll-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--slate-500);
  transition: transform .32s var(--e-out), background .2s ease, box-shadow .2s ease;
}
.category-scroll-nav button:hover .category-scroll-label,
.category-scroll-nav button[aria-current="true"] .category-scroll-label {
  max-width: 180px;
  font-size: .64rem;
  opacity: 1;
  color: var(--bone);
}
.category-scroll-nav button:hover .category-scroll-dot,
.category-scroll-nav button[aria-current="true"] .category-scroll-dot {
  transform: scale(1.45);
  background: var(--iri-1);
  box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .14);
}
.category-scroll-nav button:focus-visible { outline: 1px solid var(--iri-1); outline-offset: 3px; }

@media (max-width: 1040px) {
  .category-scroll-nav { right: .5rem; }
  .category-scroll-nav button { min-height: 52px; }
  .category-scroll-label { max-width: 118px; font-size: .38rem; }
  .category-scroll-nav button:hover .category-scroll-label,
  .category-scroll-nav button[aria-current="true"] .category-scroll-label { max-width: 150px; font-size: .5rem; }
}

/* ---------- category section header ---------- */
/* The home page no longer promotes selected work; the portfolio remains
   available through the main navigation and dedicated portfolio page. */
body > main > #portofoliu { display: none; }

.cat-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  padding-bottom: clamp(1.4rem, 3vh, 2.2rem);
}
@media (max-width: 860px) { .cat-head { grid-template-columns: 1fr; align-items: start; } }

.cat-head-l { display: grid; grid-template-columns: auto auto 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 560px) { .cat-head-l { grid-template-columns: auto 1fr; } .cat-head-l .cat-ic { display: none; } }
.cat-head-l p { color: var(--slate-400); font-size: .92rem; max-width: 56ch; margin-top: .6rem; line-height: 1.55; }

.cat-n {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  color: var(--slate-600);
  padding-top: .45rem;
}
.cat-ic {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  flex: none;
}
.cat-ic svg {
  width: 22px; height: 22px;
  stroke: var(--iri-1);
  stroke-width: 1.3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cat-head-r { display: flex; gap: 2rem; }
@media (max-width: 620px) {
  .services-page .cat-head-r { display: none; }
}
.cat-stat { display: flex; flex-direction: column; gap: .15rem; }
.cat-stat b {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  background: var(--grad-iri);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cat-stat em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate-500);
}

/* ---------- bundle nudge ---------- */
.bundle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.8rem, 3.6vw, 3rem);
  border-radius: var(--r-lg);
}
@media (max-width: 900px) { .bundle { grid-template-columns: 1fr; } }
.bundle-txt h3 { margin-block: .9rem .8rem; max-width: 24ch; }
.bundle-txt p { color: var(--slate-300); max-width: 60ch; font-size: .95rem; line-height: 1.6; }
.bundle-cta { display: flex; flex-direction: column; gap: .7rem; min-width: 250px; }
@media (max-width: 900px) { .bundle-cta { min-width: 0; } }

/* ---------- service detail: deliverables, steps, panel extras ---------- */
/* sd-list items carry a title + description pair, so the flex row needs the
   inner span to stack. */
.sd-list li > span { display: flex; flex-direction: column; gap: .22rem; }
.sd-list li b {
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--bone);
}
.sd-list li em {
  font-style: normal;
  font-size: .885rem;
  color: var(--slate-400);
  line-height: 1.55;
}

.sd-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
}
@media (max-width: 700px) { .sd-steps { grid-template-columns: 1fr; } }
.sd-step {
  position: relative;
  padding: 1.3rem 1.3rem 1.4rem;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  transition: border-color .5s, background .5s, transform .5s var(--e-out);
}
.sd-step:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-3px); }
.sd-step .n {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  color: var(--iri-1);
  margin-bottom: .8rem;
}
.sd-step h4 { font-size: 1.02rem; margin-bottom: .45rem; }
.sd-step p { font-size: .875rem; color: var(--slate-400); line-height: 1.55; margin: 0; }

.btn-block { width: 100%; }

.sd-note {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.2rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-500);
  line-height: 1.4;
}

/* The detail hero keeps its shader tighter to the right so the title stays
   fully legible over the obsidian, same trick as the homepage hero. */
.sd-hero > .stage {
  left: 46%;
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
}
@media (max-width: 1040px) {
  .sd-hero > .stage {
    left: 0;
    opacity: .5;
    mask-image: radial-gradient(ellipse 90% 60% at 70% 40%, #000 20%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 70% 40%, #000 20%, transparent 76%);
  }
}

/* ---------- portfolio card extras ---------- */
.work-year {
  position: absolute;
  top: 1rem; left: 1.1rem;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  color: var(--slate-400);
}
.work-metric {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .8rem;
}
.work-metric b {
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .35em .8em;
  border-radius: 100px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--iri-1);
}

/* Filter chips hide cards with display:none, which removes them from the grid
   flow — the 2-row span on .sz-lg must not leave a gap when it is hidden. */
.work-grid .work[style*="display: none"] { display: none !important; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.ct-hero { padding-bottom: 0; }
.ct-hero .phero-in > .lede { display: none; }
.ct-hero .phero-in > h1 { margin-bottom: 30px; }
.ct-hero + .sec-tight { padding-top: 0; }
.ct-hero > .stage {
  left: 52%;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
}
@media (max-width: 1040px) {
  .ct-hero > .stage {
    left: 0; opacity: .45;
    mask-image: radial-gradient(ellipse 88% 58% at 72% 38%, #000 18%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 88% 58% at 72% 38%, #000 18%, transparent 76%);
  }
}

.ct-form {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
}
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ct-form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.ct-step {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate-500);
}

/* Budget group has no <label for>, so it needs a visually identical heading. */
.label-as {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: .6rem;
}

.ct-submit { display: flex; flex-direction: column; gap: .9rem; margin-top: .6rem; }
.ct-fine { font-size: .78rem; color: var(--slate-500); line-height: 1.55; max-width: 56ch; }
.ct-form-status { margin: 0; font-size: .88rem; line-height: 1.5; }
.ct-form-status.success { color: #8dd6a4; }
.ct-form-status.error { color: rgb(var(--err-rgb)); }
.ct-form-status[hidden] { display: none; }

/* App-style contact form: bright, compact controls make the enquiry flow
   feel like a focused product experience while keeping the site form logic. */
.ct-form-revolut {
  --ct-ink: var(--bone); --ct-muted: var(--slate-400); --ct-line: var(--glass-brd-2); --ct-soft: var(--slate-900); --ct-surface: var(--slate-800); --ct-field-focus: var(--slate-700); --ct-choice: var(--slate-800); --ct-choice-hover: var(--slate-700); --ct-choice-selected: var(--accent-soft); --ct-label: var(--slate-300); --ct-placeholder: var(--slate-500); --ct-blue: var(--iri-1);
  color: var(--ct-ink); background: var(--ct-surface); border: 1px solid var(--ct-line); box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}
.ct-form-revolut .ct-form-head { align-items: flex-start; border: 0; margin: 0; padding: 0 0 .9rem; }
.ct-form-revolut .h3 { color: var(--ct-ink); font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.045em; }
.ct-form-revolut .ct-step { color: var(--ct-muted); background: var(--ct-soft); border-radius: 999px; letter-spacing: .04em; padding: .48rem .7rem; }
.ct-form-revolut .field label, .ct-form-revolut .label-as { color: var(--ct-ink); font-family: var(--f-body); font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ct-form-revolut .field input, .ct-form-revolut .field textarea, .ct-form-revolut .field select { color: var(--ct-ink); background: var(--ct-soft); border: 1px solid transparent; border-radius: 14px; box-shadow: none; padding: 1rem 1.05rem; }
.ct-form-revolut .field select { background-color: var(--ct-soft); }
.ct-form-revolut .field select option { background: var(--ct-surface); color: var(--ct-ink); }
.ct-form-revolut .field input::placeholder, .ct-form-revolut .field textarea::placeholder { color: var(--ct-placeholder); }
.ct-form-revolut .field input:focus, .ct-form-revolut .field textarea:focus, .ct-form-revolut .field select:focus { background: var(--ct-field-focus); border-color: var(--ct-blue); box-shadow: 0 0 0 4px rgba(var(--acc-rgb),.18); }
.ct-form-revolut .rad-group { gap: .55rem; }
.ct-form-revolut .rad { min-height: 56px; border-radius: 14px; border-color: var(--ct-line); background: var(--ct-choice); color: var(--ct-ink); font-size: .82rem; }
.ct-form-revolut .rad:hover { border-color: var(--accent-line); background: var(--ct-choice-hover); }
.ct-form-revolut .rad:has(input:checked) { border-color: var(--ct-blue); background: var(--ct-choice-selected); box-shadow: inset 0 0 0 1px var(--ct-blue); }
.ct-form-revolut .ct-submit { margin-top: .75rem; }
.ct-form-revolut .btn-1 { width: 100%; background: var(--iri-1); box-shadow: none; border-radius: 14px; }
.ct-form-revolut .btn-1:hover { background: var(--iri-2); box-shadow: none; }
.ct-form-revolut .ct-fine { color: var(--ct-muted); text-align: center; margin: 0 auto; }
.ct-form-revolut .ct-form-status.success { color: #087443; }
.ct-form-revolut .ct-form-status.error { color: #c52938; }
.ct-char-count { position: absolute; top: calc(var(--brief-height, 4rem) + .22rem); right: .15rem; margin: 0; color: var(--ct-muted); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; text-align: right; }
.ct-char-count span { color: var(--ct-ink); }
.ct-select-hint { margin: -.35rem .15rem 0; color: var(--ct-muted); font-size: .76rem; line-height: 1.4; }
.ct-form-revolut .field:has(> select) > label {
  position: absolute; z-index: 1; top: .56rem; left: 1.05rem; margin: 0; padding: 0 .18rem;
  color: var(--ct-blue); font-family: var(--f-body); font-size: .7rem; font-weight: 600; letter-spacing: 0;
  pointer-events: none;
}
.ct-form-revolut .field:has(> select) > select { padding: 1.45rem 1.05rem .58rem; }
.ct-form-revolut .field select[data-service-select] {
  min-height: 15.25rem; padding: 1.55rem .55rem .55rem 1.05rem; line-height: 1.35;
  scrollbar-color: var(--ct-line) transparent;
}
.ct-form-revolut .field select[data-service-select] optgroup { color: var(--ct-muted); font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .07em; }
.ct-form-revolut .field select[data-service-select] option { padding: .5rem .6rem; color: var(--ct-ink); font-family: var(--f-body); font-size: .88rem; }
.ct-form-revolut .field select[data-service-select] option:checked { background: var(--ct-blue); color: var(--bone); }
.ct-service-menu { display: none; }
.service-menu-enabled > select[data-service-select] { display: none; }
.service-menu-enabled .ct-service-menu { display: block; position: relative; }
.single-menu-enabled > select#cand { display: none; }
.single-menu-enabled .ct-single-menu { display: block; position: relative; }
.ct-service-trigger {
  width: 100%; min-height: 3.35rem; padding: 1.45rem 2.8rem .58rem 1.05rem; color: var(--ct-ink);
  background: var(--ct-soft); border: 1px solid transparent; border-radius: 14px; text-align: left;
  font: inherit; line-height: 1.25; cursor: pointer;
}
.ct-service-trigger::after { content: ''; position: absolute; top: 50%; right: 1.1rem; width: .48rem; height: .48rem; border: solid var(--ct-muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-75%) rotate(45deg); transition: transform .18s ease; }
.ct-service-menu.open .ct-service-trigger { border-color: var(--ct-blue); background: var(--ct-field-focus); box-shadow: 0 0 0 4px rgba(var(--acc-rgb),.18); }
.ct-service-menu.open .ct-service-trigger::after { transform: translateY(-25%) rotate(225deg); }
.ct-single-menu.open .ct-service-trigger { border-color: var(--ct-blue); background: var(--ct-field-focus); box-shadow: 0 0 0 4px rgba(var(--acc-rgb),.18); }
.ct-single-menu.open .ct-service-trigger::after { transform: translateY(-25%) rotate(225deg); }
.ct-service-panel {
  display: none; position: absolute; z-index: 12; inset: calc(100% + .5rem) 0 auto; max-height: 20rem; overflow-y: auto;
  padding: .5rem 0; border: 1px solid var(--ct-line); border-radius: 16px; background: var(--ct-surface);
  box-shadow: 0 18px 44px rgba(0,0,0,.28); scrollbar-width: none;
}
.ct-service-panel::-webkit-scrollbar { display: none; }
.ct-service-menu.open .ct-service-panel { display: block; }
.ct-single-menu.open .ct-service-panel { display: block; }
.ct-service-group-title { margin: .7rem 1.05rem .3rem; color: var(--ct-muted); font-family: var(--f-mono); font-size: .65rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.ct-service-group-title:first-child { margin-top: .3rem; }
.ct-service-choice { display: flex !important; flex-flow: row nowrap !important; align-items: center; gap: .58rem; min-height: 2.2rem; padding: .22rem 1.05rem; color: var(--ct-ink); cursor: pointer; font-size: .88rem; line-height: 1.25; }
.ct-service-choice:hover { background: var(--ct-choice-hover); }
.ct-single-choice,
.ct-single-choice span {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-align: left;
}
.ct-single-choice.selected { background: var(--ct-choice-selected); color: var(--ct-ink); }
.ct-form-revolut .ct-service-choice input {
  appearance: none; box-sizing: border-box; display: inline-grid !important; width: .82rem !important; height: .82rem !important; min-height: 0; margin: 0; padding: 0; flex: 0 0 .82rem; align-self: center; z-index: 1;
  border: 1.5px solid var(--ct-line); border-radius: 3px; background: var(--ct-surface); box-shadow: none;
  display: grid; place-items: center; transition: background .16s ease, border-color .16s ease;
}
.ct-service-choice span { display: block; min-width: 0; flex: 1 1 auto; }
.ct-form-revolut .ct-service-choice input::after { content: ''; width: .36rem; height: .19rem; border: solid #fff; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg) translate(.02rem, -.06rem) scale(0); transition: transform .14s ease; }
.ct-form-revolut .ct-service-choice input:checked { border-color: var(--iri-1); background: var(--iri-1); }
.ct-form-revolut .ct-service-choice input:checked::after { transform: rotate(-45deg) translate(.02rem, -.06rem) scale(1); }
.ct-form-revolut .ct-service-choice input:focus-visible { outline: 3px solid rgba(var(--acc-rgb),.28); outline-offset: 2px; }
.field.invalid .ct-service-trigger { border-color: rgba(var(--err-rgb),.6); background: rgba(var(--err-rgb),.08); }
@media (max-width: 700px) {
  .ct-form-revolut .field select[data-service-select] { min-height: 0; padding: 1.45rem 1.05rem .62rem; }
  .ct-form-revolut .field select[data-service-select][data-empty="true"] { color: transparent; }
  .ct-form-revolut .field:has(> select[data-service-select][data-empty="true"]) > label {
    top: 50%; color: var(--ct-label); font-size: .86rem; transform: translateY(-50%);
  }
  .ct-form-revolut .field:has(> select[data-service-select]:focus) > label {
    top: .56rem; color: var(--ct-blue); font-size: .7rem; transform: none;
  }
  .ct-select-hint { margin-top: -.18rem; }
}
.ct-form-revolut .field:has(> input:not([type="radio"]), > textarea) > label { position: absolute; z-index: 1; top: 50%; left: 1.05rem; margin: 0; padding: 0 .18rem; color: var(--ct-label); pointer-events: none; transform: translateY(-50%); transition: top .18s ease, transform .18s ease, color .18s ease, font-size .18s ease; }
.ct-form-revolut .field:has(> textarea) > label { top: 50%; transform: translateY(-50%); }
.ct-form-revolut .field:has(> input:not([type="radio"]), > textarea) > input, .ct-form-revolut .field:has(> textarea) > textarea { padding-top: 1.45rem; padding-bottom: .58rem; }
.ct-form-revolut .field:has(> input:not([type="radio"]):placeholder-shown, > textarea:placeholder-shown) > input::placeholder, .ct-form-revolut .field:has(> input:not([type="radio"]):placeholder-shown, > textarea:placeholder-shown) > textarea::placeholder { color: transparent; }
.ct-form-revolut .field:has(> input:not([type="radio"]):focus, > input:not([type="radio"]):not(:placeholder-shown), > textarea:focus, > textarea:not(:placeholder-shown)) > label { top: .56rem; color: var(--ct-blue); font-size: .7rem; transform: none; }
.ct-form-revolut .field input, .ct-form-revolut .field textarea, .ct-form-revolut .field select, .ct-service-trigger, .ct-service-choice, .ct-form-revolut .field select option { font-size: max(.95rem, 16px); }
.ct-form-revolut .field > textarea { min-height: 4rem !important; height: 4rem; resize: none; overflow: hidden; line-height: 1.25; }
.ct-form-revolut .field > input:not([type="radio"]), .ct-form-revolut .field > select, .ct-service-trigger { box-sizing: border-box; min-height: 4rem; height: 4rem; }
.ct-form-revolut .field:has(> select#cand:invalid) > label { top: 50% !important; color: var(--ct-label); font-size: .86rem; transform: translateY(-50%) !important; }
.ct-form-revolut .field:has(> select[data-service-select][data-empty="true"]) > label { top: 50%; color: var(--ct-label); font-size: .86rem; transform: translateY(-50%); }
.ct-form-revolut .field:has(> select[data-service-select][data-empty="false"]) > label,
.ct-form-revolut .field:has(.ct-service-menu.open) > label { top: .56rem !important; color: var(--ct-blue) !important; font-size: .7rem !important; transform: none !important; }
.ct-form-revolut .field:has(> textarea:focus) > label, .ct-form-revolut .field:has(> select#cand:focus) > label { top: .56rem; color: var(--ct-blue); font-size: .7rem; transform: none; }
.ct-form-revolut .field.brief-focused > label, .ct-form-revolut .field.brief-filled > label { top: .56rem !important; color: var(--ct-blue) !important; font-size: .7rem !important; transform: none !important; }
.ct-form-revolut .field:has(> textarea:placeholder-shown:not(:focus)) > label { top: 2rem !important; transform: translateY(-50%) !important; }

/* Keep every contact-form block aligned in its empty and active states. */
.ct-form-revolut .field > label { transition: top .18s ease, transform .18s ease, color .18s ease, font-size .18s ease; }
.ct-form-revolut .field:has(> select[data-service-select][data-empty="true"]) > label { top: 50%; color: var(--ct-label); font-size: .86rem; transform: translateY(-50%); }
.ct-form-revolut .field:has(> select[data-service-select][data-empty="false"]) > label,
.ct-form-revolut .field:has(.ct-service-menu.open) > label { top: .56rem; color: var(--ct-blue); font-size: .7rem; transform: none; }
.ct-form-revolut .field:has(.ct-single-menu.open) > label { top: .56rem; color: var(--ct-blue); font-size: .7rem; transform: none; }
.ct-form-revolut .field:has(> select[data-service-select][data-empty="true"]) .ct-service-trigger { padding-top: 1rem; padding-bottom: 1rem; }
:root[data-theme="light"] .ct-form-revolut { --ct-ink: var(--bone); --ct-muted: var(--slate-400); --ct-line: var(--glass-brd-2); --ct-soft: var(--slate-900); --ct-surface: var(--slate-800); --ct-field-focus: var(--slate-700); --ct-choice: var(--slate-800); --ct-choice-hover: var(--slate-700); --ct-choice-selected: var(--accent-soft); --ct-label: var(--slate-300); --ct-placeholder: var(--slate-500); --ct-blue: var(--iri-1); box-shadow: 0 24px 70px rgba(15, 23, 42, .14); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ct-form-revolut { --ct-ink: var(--bone); --ct-muted: var(--slate-400); --ct-line: var(--glass-brd-2); --ct-soft: var(--slate-900); --ct-surface: var(--slate-800); --ct-field-focus: var(--slate-700); --ct-choice: var(--slate-800); --ct-choice-hover: var(--slate-700); --ct-choice-selected: var(--accent-soft); --ct-label: var(--slate-300); --ct-placeholder: var(--slate-500); --ct-blue: var(--iri-1); box-shadow: 0 24px 70px rgba(15, 23, 42, .14); } }
@media (max-width: 620px) { .ct-form-revolut { padding: 1.25rem; } .ct-form-revolut .ct-step { margin-top: .25rem; } }

.ct-side { display: flex; flex-direction: column; gap: .6rem; }

.ct-promise { padding: 1.5rem 1.5rem 1.6rem; border-radius: var(--r-lg); margin-top: .5rem; }
.ct-promise h4 { font-size: 1.02rem; margin-bottom: 1.1rem; }
.ct-steps { display: flex; flex-direction: column; gap: .95rem; }
.ct-steps li { display: flex; gap: .85rem; align-items: flex-start; }
.ct-steps li b {
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--iri-1);
  flex: none;
  padding-top: .18rem;
}
.ct-steps li span { font-size: .875rem; color: var(--slate-300); line-height: 1.55; }

/* Prefill highlight — confirms the enquiry arrived already scoped. */
.field.prefilled select,
.field.prefilled input { border-color: var(--accent-line); background: var(--accent-soft); }
.ct-prefill {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.3rem;
  padding: .8rem 1rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: .855rem;
  color: var(--slate-200);
}
.ct-prefill b { color: var(--bone); font-weight: 500; }

/* Invalid field state — only shown after a submit attempt or blur. */
.field.invalid input,
.field.invalid textarea,
.field.invalid select {
  border-color: rgba(var(--err-rgb),.6);
  background: rgba(var(--err-rgb),.08);
}
.btn.is-sent { pointer-events: none; opacity: .85; }

/* ============================================================
   SERVICE RAIL — horizontal swipe carousel
   Replaces the old vertical .srv-list. One rail per category.
   ------------------------------------------------------------
   Scrolling model: native overflow-x scrolling does the work, so
   touch/trackpad swipe and momentum come free from the platform.
   JS only ADDS pointer-drag for mouse users and the arrow buttons;
   it never takes over scrolling itself. That keeps the phone-app
   feel authentic instead of re-implementing inertia badly.
   ============================================================ */

/* Full-bleed: the rail sits OUTSIDE .wrap so cards can run to the
   screen edge, but carries the same gutter as padding so the first
   card still lines up with the section heading above it. */
.rail-wrap { position: relative; margin-top: clamp(1.4rem, 3vh, 2.2rem); }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(224px, 23vw, 310px);
  gap: clamp(.7rem, 1.3vw, 1.1rem);
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: var(--gut);
  padding-block: .5rem clamp(1rem, 2vh, 1.6rem);
  scroll-snap-type: x proximity;
  /* Without this the snapport starts at the padding edge, so the browser
     snaps the first card flush to the viewport and parks scrollLeft at
     one gutter on load — the rail looks pre-scrolled and the prev arrow
     stays lit. Matching scroll-padding to padding-inline puts the snap
     origin back at the true start. */
  scroll-padding-inline: var(--gut);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
/* .dragging is added by JS for the duration of a mouse drag: snap is
   suspended so the card doesn't fight the cursor, and text selection
   is killed so dragging across a title doesn't highlight it. */
.rail.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail.dragging .rcard { pointer-events: none; }

/* ---- card ---- */
.rcard {
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--slate-900);
  border: 1px solid var(--glass-brd);
  isolation: isolate;
  transition: transform .6s var(--e-out), border-color .5s, box-shadow .6s var(--e-out);
  will-change: transform;
}
.rcard:hover {
  transform: translateY(-7px);
  border-color: var(--glass-brd-2);
  box-shadow: 0 26px 60px -22px rgba(var(--shadow-rgb),var(--sh-a)), 0 0 0 1px rgba(var(--ink-rgb),.06);
}
.rcard:focus-visible { outline: 2px solid var(--iri-1); outline-offset: 3px; }

/* ---- photo ---- */
.rcard .ph {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--slate-800);
}
.rcard .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* The source photos are colourful client work; a whisper of desaturation
     at rest lets them sit inside the palette, then they bloom to full
     colour on hover. (The old .82 desat + heavy wash made the 1000px
     sources read as low-res mud — most of the perceived quality is here,
     not in the pixels.) */
  filter: saturate(.94) contrast(1.03) brightness(var(--ph-b));
  transform: scale(1.03);
  transition: transform 1.1s var(--e-out), filter .7s var(--e-out);
}
.rcard:hover .ph img { transform: scale(1.09); filter: saturate(1.06) contrast(1.02) brightness(1); }

/* Iridescent wash over the photo, strongest at the bottom where the
   title sits, so text stays legible on any underlying image. */
.rcard .ph::after {
  content: "";
  position: absolute; inset: 0;
  /* Only the bottom band (under the title) needs a scrim; the previous
     full-height iridescent wash tinted the whole photograph and read as
     a quality problem rather than a treatment. */
  background:
    linear-gradient(to top, var(--slate-900) 2%, rgba(var(--card-rgb),.42) 22%, rgba(var(--card-rgb),0) 48%),
    var(--grad-iri-soft);
  background-blend-mode: normal, soft-light;
  opacity: .55;
  transition: opacity .6s;
}
.rcard:hover .ph::after { opacity: .38; }

/* ---- badges on the photo ---- */
.rcard .tag {
  position: absolute;
  top: .7rem; left: .7rem;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .34rem .6rem;
  border-radius: 100px;
  color: var(--on-media);
  background: rgba(var(--media-rgb),.62);
  border: 1px solid var(--media-brd);
  backdrop-filter: blur(10px);
}
.rcard .tm-badge {
  position: absolute;
  top: .7rem; right: .7rem;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .34rem .6rem;
  border-radius: 100px;
  color: rgba(var(--media-ink-rgb),.82);
  background: rgba(var(--media-rgb),.62);
  border: 1px solid var(--media-brd);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}

/* ---- body ---- */
.rcard .bd {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: clamp(.95rem, 1.5vw, 1.25rem);
  flex: 1;
}
.rcard .nm {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  font-weight: 500;
  letter-spacing: -.024em;
  line-height: 1.2;
  color: var(--bone);
  transition: color .4s;
}
.rcard:hover .nm { color: var(--white); }
.rcard .ds {
  display: block;
  font-size: .795rem;
  line-height: 1.5;
  color: var(--slate-300);
  /* Two lines keeps every card in a rail the same height regardless of
     how long the Romanian description runs. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rcard .ft {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
}
.rcard .pr {
  font-family: var(--f-mono);
  font-size: .875rem;
  letter-spacing: .03em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rcard .pr small {
  display: block;
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: .1rem;
}
.rcard .go {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--slate-600);
  transition: background .45s, border-color .45s, transform .45s var(--e-out);
}
.rcard .go svg { width: 12px; height: 12px; stroke: var(--slate-200); stroke-width: 1.8; fill: none; transition: stroke .4s; }
.rcard:hover .go { background: var(--bone); border-color: var(--bone); transform: rotate(-45deg) scale(1.06); }
.rcard:hover .go svg { stroke: var(--void); }

/* ---- arrows: expand the rail left and right ---- */
.rail-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-brd-2);
  background: rgba(var(--surf-rgb),.84);
  backdrop-filter: blur(16px) saturate(140%);
  color: var(--bone);
  cursor: pointer;
  /* Nudged up by half the bottom padding so the button centres on the
     CARD, not on the scroll box (which includes the scrollbar gutter). */
  transform: translateY(-62%);
  transition: opacity .4s, background .4s, border-color .4s, box-shadow .4s, scale .3s var(--e-out);
}
.rail-nav:hover { background: rgba(var(--surf-rgb),.97); border-color: var(--glass-brd-2); scale: 1.07; box-shadow: 0 0 0 1px var(--accent-line), 0 14px 34px -12px rgba(var(--shadow-rgb),var(--sh-a)); }
.rail-nav:active { scale: .96; }
.rail-nav svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.9; fill: none; }
.rail-nav.prev { left: calc(var(--gut) * .28); }
.rail-nav.next { right: calc(var(--gut) * .28); }
/* Disabled at the ends rather than hidden — a control that vanishes
   makes the user think the rail broke. */
.rail-nav[disabled] { opacity: 0; pointer-events: none; }
@media (hover: none) { .rail-nav { display: none; } }

/* ---- edge fades hint that content continues ---- */
.rail-wrap::before,
.rail-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(2rem, var(--gut), 5rem);
  pointer-events: none;
  z-index: 3;
  transition: opacity .45s;
}
.rail-wrap::before { left: 0;  background: linear-gradient(to right, var(--void) 12%, transparent); }
.rail-wrap::after  { right: 0; background: linear-gradient(to left,  var(--void) 12%, transparent); }
/* JS sets these flags from scroll position. */
.rail-wrap[data-at-start]::before { opacity: 0; }
.rail-wrap[data-at-end]::after    { opacity: 0; }

/* ---- progress bar: the app-like "where am I" indicator ---- */
.rail-bar {
  position: relative;
  height: 2px;
  margin: .2rem var(--gut) 0;
  border-radius: 2px;
  background: rgba(var(--ink-rgb),.1);
  overflow: hidden;
}
.rail-bar i {
  position: absolute;
  inset-block: 0; left: 0;
  width: 20%;
  border-radius: 2px;
  background: var(--grad-iri);
  transform-origin: left;
  transition: transform .18s linear, width .3s;
}
/* One rail fits entirely on screen -> no controls, no progress bar. */
.rail-wrap[data-no-scroll] .rail-nav,
.rail-wrap[data-no-scroll] .rail-bar,
.rail-wrap[data-no-scroll]::before,
.rail-wrap[data-no-scroll]::after { display: none; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .rail { grid-auto-columns: clamp(206px, 54vw, 262px); scroll-snap-type: x mandatory; }
}
@media (max-width: 560px) {
  /* 64vw leaves a clear lane for the fixed category navigator while still
     telling phone users that the rail scrolls. */
  .rail { grid-auto-columns: 64vw; }
  .rcard .ph { aspect-ratio: 5 / 4; }
}

@media (max-width: 620px) {
  .category-scroll-nav { right: .35rem; }
  .category-scroll-nav button { min-height: 46px; padding-inline: .1rem; }
  .category-scroll-label { max-width: 96px; font-size: .34rem; }
  .category-scroll-nav button[aria-current="true"] .category-scroll-label {
    max-width: 108px;
    font-size: .44rem;
  }
  :root[data-theme="light"] .hero > .stage-pixel { left: 42%; opacity: .38; }
}

@media (prefers-reduced-motion: reduce) {
  .rail { scroll-behavior: auto; }
  .rcard, .rcard .ph img, .rcard .go { transition: none; }
  .rcard:hover { transform: none; }
  .rcard:hover .ph img { transform: scale(1.03); }
}

/* Fallback plate for the four services with no photograph yet. A tinted
   iridescent gradient plus the service initials — visibly a placeholder,
   so nobody mistakes it for finished work, but it keeps card height and
   rhythm identical to the photographed cards beside it. */
.rcard .ph.noimg {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(var(--crimson-rgb),.32), transparent 62%),
    radial-gradient(100% 90% at 85% 100%, rgba(var(--copper-rgb),.28), transparent 60%),
    var(--slate-800);
}
.rcard .ph.noimg span {
  font-family: var(--f-display);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -.04em;
  background: var(--grad-iri);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .5;
}

/* ---- detail page hero photograph ----
   Sits below the lede inside the hero, so the visitor sees the actual work
   before reading a single deliverable bullet. Aspect ratio is fixed so the
   page does not reflow when a different service's photo swaps in. */
.sd-shot {
  position: relative;
  margin: clamp(2rem, 4vh, 3rem) 0 0;
  /* The source photographs are 1000px wide. At the previous 780px CSS width
     a retina screen samples them at ~1560px — a visible upscale blur. 620px
     keeps the hidpi render at ~1240px, inside what the sources can carry. */
  max-width: 620px;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  background: var(--slate-800);
  box-shadow: 0 40px 90px -40px rgba(var(--shadow-rgb),var(--sh-a));
}
.sd-shot img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.94) contrast(1.03); }
/* Iridescent sheen so the photograph reads as part of the obsidian palette
   rather than a pasted-in JPEG. */
.sd-shot::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-iri-soft);
  mix-blend-mode: soft-light;
  opacity: .35;
  pointer-events: none;
}
/* Hidden when the service has no photograph — JS sets this. */
.sd-shot[hidden] { display: none; }
@media (max-width: 620px) { .sd-shot { aspect-ratio: 4 / 3; } }

/* Services hero keeps only the breadcrumb trail. */
.services-page .phero-in > .eyebrow,
.services-page .phero-in > h1,
.services-page .phero-in > p,
.services-page .phero-in > .flex { display: none; }
.services-page .phero {
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: 0;
}
.services-page .crumbs { margin-bottom: 0; }
.services-page #catalog + .sec-cat { padding-top: 1rem; }

/* Portfolio hero keeps only the breadcrumb trail. */
.portfolio-page .phero-in > .eyebrow,
.portfolio-page .phero-in > h1,
.portfolio-page .phero-in > p { display: none; }
.portfolio-page .phero {
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: 0;
}
.portfolio-page .crumbs { margin-bottom: 0; }
.portfolio-page #lucrari { padding-top: 1rem; }
.portfolio-page .filter-bar {
  gap: .4rem;
  padding-bottom: 1.4rem;
}
.portfolio-page .filter-bar .chip {
  padding: .34em .8em;
  font-size: .62rem;
}

@media (min-width: 1041px) {
  .ct-side > .ct-faq .sec-head.sm h2 { display: none; }
  .ct-side { gap: .4rem; }
  .ct-side > .ct-card { padding: .85rem 1rem; }
  .ct-side > .ct-promise { padding: 1rem 1rem 1.05rem; }
  .ct-side > .ct-promise h4 { margin-bottom: .65rem; }
  .ct-side > .ct-promise .ct-steps { gap: .55rem; }
  .ct-side > .ct-faq {
    padding-block: 0;
    margin-top: 0;
  }
  .ct-side > .ct-faq > .wrap {
    width: auto;
    padding-inline: 0;
  }
  .ct-side > .ct-faq .sec-head.sm,
  .ct-side > .ct-faq .sec-head.sm > div { margin: 0; }
  .ct-side > .ct-faq .acc { border-top: 0; }
  .ct-side > .ct-faq .acc-btn {
    padding-block: 1rem;
    font-size: .78rem;
  }
  .ct-side > .ct-faq .acc-item:first-child .acc-btn { padding-top: 0; }
  .ct-side > .ct-faq .acc-panel-in {
    padding-block: .85rem 1rem;
    font-size: .82rem;
  }
}

/* Homepage annotations: keep the hero focused and let the service cards
   carry the section without the extra heading block. */
#proces { display: none; }
#pachete .u-section-heading-tight h2 { display: none; }
.hero-lede { display: none; }
.hero-cta .btn-lg {
  --bh: 3.35rem;
  padding-inline: 1.8rem;
  font-size: .92rem;
}
.hero-cta .btn-explore { min-width: 14rem; }
#servicii > .wrap > .sec-head { display: none; }
@media (max-width: 480px) {
  .hero-cta .btn-explore { width: auto; }
}

/* Slightly more compact homepage service cards. */
.pillars .pillar {
  min-height: 260px;
  padding: 1.25rem 1.2rem 1.15rem;
}
.pillars .pillar h3 { margin-top: 1.15rem; }
.pillars .pillar p { margin-bottom: .9rem; }
.pillars .pillar .meta { padding-top: .7rem; }
.pillars .pillar-hero { min-height: 310px; }
.pillars .pillar-hero-in { padding: 1.45rem 1.35rem 1.25rem; }
@media (max-width: 900px) {
  .hero-h1 { font-size: clamp(2.4rem, 8.5vw, 3.5rem); }
}