/* ==========================================================================
   iTailors v3 (October 2026): the site-wide layer.
   Loaded on every page, after styles.css and after any page <style>, so it wins at equal specificity.
   1. tokens (v3) and the styles.css tokens mapped onto them
   2. shared header, footer and buttons (same markup on every page)
   3. the older page components re-dressed in the v3 look (paper, ink, yellow marker)
   The home page adds home.css on top; it does not load styles.css.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  --g: #E9ECE6; --w: #FFFFFF; --ink: #14181C; --ink2: #343B42; --mut: #59626B; --line: rgba(20,24,28,.16);
  --or: #FF5D3A; --ye: #F9A800; --gr: #2E6B45; --bl: #154889;
  --paper2: #F3F1EA;
  --grid: linear-gradient(rgba(20,24,28,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,24,28,.05) 1px, transparent 1px);
  --mark: linear-gradient(transparent 60%, rgba(249,168,0,.85) 60%, rgba(249,168,0,.85) 90%, transparent 90%);
  /* styles.css tokens, re-pointed */
  --bg: #E9ECE6; --bg-white: #FFFFFF; --bg-warm: #F3F1EA; --bg-section: #E1E6DE;
  --border: rgba(20,24,28,.14); --border-hover: rgba(20,24,28,.38);
  --text: #14181C; --text-secondary: #343B42; --text-muted: #59626B;
  --blue: #154889; --blue-light: #E1E9F4; --blue-bg: rgba(21,72,137,.07);
  --purple: #6447F5; --purple-bg: rgba(100,71,245,.07);
  --teal: #0F7D63; --teal-bg: rgba(15,125,99,.07);
  --amber: #8F5A00; --amber-bg: rgba(249,168,0,.14);
  --green: #2E6B45; --green-light: #E2F0E6;
  --red: #C2391F; --red-light: #FDE9E4;
  --font: 'Host Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Host Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow-sm: 0 1px 0 rgba(20,24,28,.08);
  --shadow-md: 0 14px 30px -18px rgba(20,24,28,.35);
  --shadow-lg: 0 22px 40px -22px rgba(20,24,28,.45);
  --shadow-xl: 0 30px 60px -28px rgba(20,24,28,.5);
}
html { scroll-padding-top: 84px; }
body { background: var(--g); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: rgba(249,168,0,.45); color: var(--ink); }
:focus-visible { outline: 3px solid var(--bl); outline-offset: 3px; }
.nw, nw-w { white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- 2a. header ---------- */
.v3-wrap { max-width: 1340px; margin: 0 auto; padding: 0 48px; }
.v3-hdr { position: sticky; top: 0; z-index: 1000; background: var(--g); box-shadow: 0 1px 0 rgba(20,24,28,.08); transition: box-shadow .3s; }
.v3-hdr.scrolled { box-shadow: 0 1px 0 rgba(20,24,28,.1), 0 12px 26px -20px rgba(20,24,28,.4); }
.v3-hdrw { display: flex; align-items: center; gap: 22px; min-height: 72px; }
.v3-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 24px; letter-spacing: -.03em; color: var(--ink); text-decoration: none; margin-right: auto; }
.v3-logo-mark { display: inline-flex; flex: 0 0 auto; width: 34px; height: 34px; }
.v3-logo-mark svg { display: block; width: 100%; height: 100%; }
.v3-nav { display: flex; align-items: center; gap: 22px; font-size: 16px; font-weight: 500; color: var(--ink); }
.v3-nl { color: var(--ink); text-decoration: none; }
.v3-nl:hover { text-decoration: underline; text-underline-offset: 6px; }
.v3-nl[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--ye); text-underline-offset: 7px; }
.v3-tel { font: 700 14px/1 var(--mono); color: var(--ink); text-decoration: none; }
.v3-lang { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.v3-lang-btn { min-width: 42px; min-height: 34px; border: 0; background: transparent; font: 700 13px/1 var(--mono); cursor: pointer; color: var(--ink); }
.v3-lang-btn.active { background: var(--ink); color: #fff; }
.v3-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.v3-burger { display: none; width: 46px; height: 46px; border: 2px solid var(--ink); border-radius: 12px; background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0; }
.v3-burger span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .25s, opacity .2s; }
.v3-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v3-burger.active span:nth-child(2) { opacity: 0; }
.v3-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 2b. buttons ---------- */
.v3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--ink); font: 800 17px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .3s, transform .1s; }
.v3-btn:active { transform: translateY(2px); }
.v3-btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.v3-dark { background: var(--ink); color: #fff; }
.v3-dark:hover { background: #000; color: #fff; }
.v3-ghost { background: transparent; color: var(--ink); }
.v3-ghost:hover { background: var(--ink); color: #fff; }
.v3-yellow { background: var(--ye); color: var(--ink); }
.v3-yellow:hover { background: #FFBC2E; }
.v3-btn[disabled] { opacity: .45; cursor: default; }

/* ---------- 2c. footer ---------- */
.v3-ftr { background: var(--ink); color: #C9CDD2; padding: 64px 0 40px; font-size: 15px; line-height: 1.5; }
.v3-ftr a { color: inherit; text-decoration: none; }
.v3-fbig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: 54px; padding-bottom: 40px; border-bottom: 1px solid #2F353B; }
.v3-fbig span { font: 800 clamp(30px, 3.4vw, 48px)/1.05 var(--font); letter-spacing: -.035em; color: #fff; }
.v3-ftr .v3-fbig a { font: 800 clamp(30px, 3.4vw, 48px)/1.05 var(--font); letter-spacing: -.035em; color: var(--ye); border-bottom: 4px solid var(--ye); }
.v3-ftr .v3-fbig a:hover { color: #fff; border-color: #fff; }
.v3-fgrid { display: flex; flex-wrap: wrap; gap: 32px 56px; justify-content: space-between; }
.v3-fbrand { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; }
.v3-fbrand b { font-size: 26px; color: #fff; letter-spacing: -.03em; }
.v3-fcol { flex: 0 1 200px; display: flex; flex-direction: column; gap: 8px; }
.v3-fcol b { color: #fff; margin-bottom: 4px; }
.v3-fcol a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.v3-flegal { margin-top: 44px; padding-top: 20px; border-top: 1px solid #2F353B; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13.5px; }

/* scroll-to-top (subpages) */
.scroll-top { background: var(--ink) !important; color: #fff; box-shadow: 0 10px 24px -10px rgba(20,24,28,.6) !important; border: 2px solid var(--ink) !important; }
.scroll-top:hover { background: #000 !important; }

/* ---------- 3. older page components in the v3 look ---------- */
/* type */
h1, h2, h3, h4 { color: inherit; }
.section-title, .pf-h2, .post-section-head h2 { font-family: var(--font); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; color: var(--ink); font-size: clamp(32px, 3.4vw, 50px); }
.section-desc { color: var(--ink2); }
.highlight { background: var(--mark) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; padding: 0 .05em; }
.section-tag, .pf-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: 700 12px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.section-tag::before, .pf-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--or); box-shadow: 12px 0 0 var(--ye); margin-right: 12px; }

/* buttons */
.btn { font-family: var(--font); font-weight: 800; border-radius: 999px; letter-spacing: 0; }
.btn-primary { background: var(--ink) !important; color: #fff !important; border: 2px solid var(--ink) !important; box-shadow: none !important; }
.btn-primary:hover { background: #000 !important; box-shadow: none !important; transform: translateY(-1px); }
.btn-glow, .btn-glow:hover { box-shadow: none !important; }
.btn-white { background: transparent !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; backdrop-filter: none !important; }
.btn-white:hover { background: var(--ink) !important; color: #fff !important; box-shadow: none !important; }
.btn-ghost { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }

/* page heroes: paper + grid + ink type instead of the dark indigo gradients */
.inst-hero, .pf-hero, .blog-hero, .post-hero { position: relative; background: var(--g) !important; background-image: var(--grid) !important; background-size: 32px 32px !important; color: var(--ink) !important; padding: 64px 0 60px !important; border-bottom: 1px solid rgba(20,24,28,.1); overflow: hidden; }
.inst-hero .hero-bg, .pf-hero .hero-bg, .pf-hero [class*="orb"]:not(.btn), .pf-hero [class*="glow"]:not(.btn), .inst-hero [class*="orb"]:not(.btn), .blog-hero [class*="orb"]:not(.btn) { display: none !important; }
.inst-hero h1, .pf-hero h1, .blog-hero h1, .post-hero h1 { color: var(--ink) !important; font-family: var(--font); font-weight: 800; letter-spacing: -.045em; line-height: .98; font-size: clamp(40px, 4.8vw, 66px); text-wrap: balance; }
.post-hero h1 { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.02; }
.inst-hero p, .pf-hero p, .blog-hero p, .post-hero .lede { color: var(--ink2) !important; font-size: 19px; line-height: 1.55; }
.inst-hero .section-tag, .pf-hero .section-tag, .blog-hero .section-tag, .pf-hero .pf-kicker { background: #fff !important; color: var(--ink) !important; }
.post-hero .crumbs, .post-hero .crumbs a, .post-hero .post-meta, .pf-hero .pf-dl-note { color: var(--mut) !important; }
.post-hero .crumbs a:hover { color: var(--ink) !important; text-decoration: underline; }
.post-hero .post-byline { color: var(--mut) !important; }
.post-hero .post-byline a { color: var(--ink) !important; text-decoration-color: var(--ye); text-decoration-thickness: 2px; }
.pf-filter-bar { top: 72px !important; background: rgba(233,236,230,.94) !important; }
.pf-filter.active, .pf-filter[aria-pressed="true"] { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.post-hero .post-meta .dot { background: var(--mut); }
.post-hero { --cat: var(--bl); box-shadow: inset 0 10px 0 var(--cat); }
.post-hero.cat-ai { --cat: #6447F5; }
.post-hero.cat-eng { --cat: #14181C; }  /* engineering in ink: amber marks exceptions */
.post-hero.cat-public { --cat: #154889; }
.post-hero.cat-seap { --cat: #2E6B45; }
.post-hero.cat-site { --cat: #0F7D63; }
.inst-badge { background: #fff !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; font-weight: 700; }
.ib-check { background: var(--gr) !important; color: #fff !important; }

/* reading progress + table of contents (articles) */
.read-progress { background: var(--ye) !important; height: 4px; }
.post-toc a:hover, .post-toc a.active { color: var(--ink) !important; }
.post-toc a.active { box-shadow: inset 3px 0 0 var(--ye); padding-left: 10px; }

/* code: ink panels, mono font */
code, pre, kbd, .post-code, .post-code * { font-family: var(--mono) !important; }

/* links inside running text */
.blog-body a, .post-article a:not(.btn), .pf-lead a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ye); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blog-body a:hover, .post-article a:not(.btn):hover { text-decoration-color: var(--ink); }

/* ---------- 3b. what was left of the indigo palette ---------- */
/* produse + institutii */
.svc-card.featured { border: 2px solid var(--ink) !important; box-shadow: 0 6px 0 var(--ink) !important; }
.svc-badge { background: var(--ye) !important; color: var(--ink) !important; box-shadow: none !important; }
.svc-icon, .prod-ico, .step-icon-wrap, .si-blue, .si-purple, .si-teal, .si-green { background: var(--ink) !important; color: #fff !important; box-shadow: none !important; }
.mol-label { background: var(--ink) !important; }
.flow-list::before { background: repeating-linear-gradient(var(--ink) 0 8px, transparent 8px 14px) !important; width: 2px !important; }
.flow-time { background: var(--ink) !important; color: #fff !important; box-shadow: none !important; font-family: var(--mono) !important; }
/* portofoliu: the Agentique block and the before/after timeline */
.ag { background: #fff !important; border: 2px solid var(--ink) !important; box-shadow: 0 6px 0 var(--ink); }
.ag-winwrap::before { background: radial-gradient(58% 58% at 28% 18%, rgba(249,168,0,.35), transparent 70%), radial-gradient(50% 50% at 80% 80%, rgba(255,93,58,.22), transparent 70%) !important; }
.ag-typing i { background: var(--mut) !important; }
.tl { background: #10233F !important; background-image: radial-gradient(900px 420px at 85% -10%, rgba(100,71,245,.35), transparent 60%), radial-gradient(700px 420px at 0% 110%, rgba(37,99,235,.35), transparent 60%) !important; border-color: rgba(255,255,255,.1) !important; }
.tl::after { display: none; }
.tl-steps { background-image: linear-gradient(90deg, var(--ye), var(--or)), linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) !important; }
.tl-node { background: #10233F; }
@keyframes tlNode { from { background: #10233F; box-shadow: 0 0 0 0 rgba(249,168,0,0); } 60% { box-shadow: 0 0 0 8px rgba(249,168,0,.25); } to { background: var(--ye); border-color: transparent; box-shadow: 0 0 0 5px rgba(249,168,0,.18); } }
/* blog */
.blog-highlight { background: #FFF6DC !important; border-color: var(--ye) !important; }
.tile-bar { background: var(--ink) !important; }
.post-tile.cat-ai .tile-bar, .post-card.cat-ai .tile-bar { background: #6447F5 !important; }
.post-tile.cat-eng .tile-bar { background: #14181C !important; }
.post-tile.cat-public .tile-bar { background: #154889 !important; }
.post-tile.cat-seap .tile-bar { background: #2E6B45 !important; }
.post-tile.cat-site .tile-bar { background: #0F7D63 !important; }
.post-end-cta { background: var(--paper2) !important; border: 2px solid var(--ink) !important; box-shadow: 0 6px 0 var(--ink) !important; }
.series-band { background-color: var(--ink) !important; color: #E9ECE6 !important; }

/* ---------- 3c. mobile fixes found in the 10.10 web pass ---------- */
/* portofoliu: the single-column Agentique block let the mock window's one-line width stretch the column past a 360px screen */
@media (max-width: 1024px) { .ag-top { grid-template-columns: minmax(0, 1fr) !important; } .ag-main, .ag-winwrap, .ag-win { min-width: 0; } .ag-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
@media (max-width: 420px) { .ag { padding: 22px 16px !important; } }
/* no running label under 12px (blog meta, contents title, series chip, card labels) */
.toc-title, .series-chip, .post-meta, .post-meta span, .post-byline small, .cc-card-label, .form-note, .flow-time { font-size: 12px !important; }
/* comfortable tap targets for the stacked links on phones */
@media (max-width: 760px) {
  .v3-fcol { gap: 0; }
  .v3-fcol a { display: block; padding: 9px 0; }
  .v3-fcol b { margin-bottom: 2px; }
}

/* ---------- 3d. UX review fixes (10.10.2026) ---------- */
/* subpages: header and footer line up with the page content (.container is 1140px + 24px padding) */
body:not(.v3) .v3-wrap { max-width: 1140px; padding-left: 24px; padding-right: 24px; }
/* /institutii: the catalogue position and CPV are what a procurement officer looks for first */
.svc-code { display: inline-flex !important; align-items: center; padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink) !important; font: 700 13px/1.2 var(--mono) !important; letter-spacing: .02em !important; text-transform: none !important; }
.svc-card p { font-size: 14.5px; }
.svc-card .svc-list li { font-size: 14px; }
@media (min-width: 1025px) { #aplicatii .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: footer link groups in two columns instead of one long column */
@media (max-width: 760px) {
  .v3-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .v3-fbrand { grid-column: 1 / -1; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .v3-nav .v3-tel { display: none; } }
@media (max-width: 1100px) {
  .v3-burger { display: inline-flex; }
  .v3-nav { position: absolute; left: 0; right: 0; top: 72px; display: none; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 24px 22px; background: var(--g); box-shadow: 0 14px 24px -14px rgba(20,24,28,.4); max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; }
  .v3-nav.open { display: flex; }
  .v3-nav .v3-nl, .v3-nav .v3-tel { display: block; padding: 10px 0; font-size: 18px; }
  .v3-nav .v3-lang { margin-top: 8px; }
}
@media (max-width: 760px) {
  .v3-wrap { padding: 0 18px; }
  .v3-hdrw { gap: 10px; }
  .v3-hdr .v3-btn-sm { padding: 0 14px; font-size: 14px; }
  .v3-chip { display: none; }
  .inst-hero, .pf-hero, .blog-hero, .post-hero { padding: 40px 0 44px !important; }
  .inst-hero h1, .pf-hero h1, .blog-hero h1 { font-size: 40px; }
  .post-hero h1 { font-size: 34px; }
  .inst-hero p, .pf-hero p, .blog-hero p, .post-hero .lede { font-size: 17px; }
}
@media (max-width: 420px) {
  .v3-hdr .v3-hcta { display: inline-flex; padding: 0 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-burger span { transition: none; }
  .tl.visible .tl-node { background: var(--ye) !important; }
}


/* ---------- 3e. colour roles after the UI/UX review (10.10.2026) ----------
   yellow = do this (every audit CTA); ink = structure; navy = trust; green = done;
   dark amber = an exception that needs attention; red = real errors only */
:root { --cta: #F9A800; --cta-h: #FFB81F; --warn: #B45309; --warn-ink: #92400E; --warn-bg: #FFF7E6; --err: #B42318; --err-bg: #FEF3F2; }
.v3-hdr .v3-hcta { background: var(--cta); color: var(--ink); border-color: var(--ink); }
.v3-hdr .v3-hcta:hover { background: var(--cta-h); color: var(--ink); }
.btn-primary { background: var(--cta) !important; color: var(--ink) !important; }
.btn-primary:hover { background: var(--cta-h) !important; }
.v3-yellow:hover { background: var(--cta-h); }
.v3-ftr :focus-visible { outline-color: var(--ye); }
.section-tag::before, .pf-kicker::before { background: var(--ye); box-shadow: none; margin-right: 2px; }

/* ---- round 2 (10.10.2026) ---- */
/* "sau contactați-ne direct": line, label, line; the label no longer needs a background box (it showed grey on white) */
.contact-or { display: flex; align-items: center; gap: 16px; }
.contact-or::before, .contact-or::after { position: static; flex: 1 1 0; width: auto; }
.contact-or span { padding: 0; background: none; }
/* subpage section titles: no word alone on the last line */
.section-title { text-wrap: balance; }

/* ==== round-2 UI/UX review (10.10.2026): header and subpages ==== */
/* R2-03 340-374px: keep the new mark AND the name (the CTA label stays whole) */
@media (max-width:374px){
  .v3-logo-mark { display: inline-flex; width: 28px; height: 28px; }
  .v3-logo-mark svg { width: 28px; height: 28px; }
  .v3-logo { gap: 7px; font-size: 21px; }
  .v3-hdrw { gap: 8px; }
  .v3-hdr .v3-hcta { padding: 0 12px; font-size: 13.5px; }
}
/* R2-22 header mark on 1x and 1.25x screens: the 0.7px ruler ticks turn to fuzz, so drop them there */
@media (max-resolution: 1.5dppx) { .v3-logo-mark .itl-tk { display: none; } }
/* R2-25 header with the "Lista de audit" chip on 1101-1366px: nothing wraps or clips (the phone gives way to the chip) */
.v3-nl, .v3-tel, .v3-chip { white-space: nowrap; }
.v3-lang { flex: 0 0 auto; }
@media (min-width: 1101px) {
  .v3-hdrw:has(#v3ListChip:not([hidden])) { gap: 16px; }
  .v3-hdrw:has(#v3ListChip:not([hidden])) .v3-nav { gap: 16px; }
  .v3-hdrw:has(#v3ListChip:not([hidden])) .v3-tel { display: none; }
}
/* the open phone menu ends on a line (a sliver of the hero CTA showed under it) */
.v3-nav.open { border-bottom: 2px solid var(--ink); }
/* /portofoliu: the Agentique button keeps its width; no violet or red glows left from the old palette */
.ag-main .btn { align-self: flex-start; }
.ag-winwrap::before { background: radial-gradient(58% 58% at 28% 18%, rgba(249,168,0,.35), transparent 70%) !important; }
.tl { background-image: none !important; }
.tl-steps { background-image: linear-gradient(90deg, var(--ye), var(--ye)), linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) !important; }
.tl .tl-lbl.before { color: #C5D0E0; }
/* subpages: fewer one-word last lines (the home page has its own rule) */
p, li { text-wrap: pretty; }

/* ==== round-3 design review (11.10.2026): the site's own objects, refined; tested together at 1920-320px, RO and EN ==== */
/* ---------- D4 [home: .v3-h1/.v3-h2 lines | shared: the rest] display type with a touch more air ----------
   At weight 800 the -.045em / -.035em tracking fused letter pairs ("ftw", "rm", "ți"). -.035 / -.028 keeps the
   compact voice and the same line breaks (measured at 1440/1280/1024/390/360, RO and EN), with one change: the 05
   title at 1280 now breaks in two lines, as at 1440. The EN H1 would wrap at 761-1091px, so that range keeps
   the old tracking. */
.inst-hero h1, .pf-hero h1, .blog-hero h1, .post-hero h1 { letter-spacing: -.035em; }
.section-title, .pf-h2, .post-section-head h2 { letter-spacing: -.03em; }
.v3-ftr .v3-fbig span, .v3-ftr .v3-fbig a { letter-spacing: -.03em; }  /* .v3-ftr prefix: beats home.css, which loads later */
body .nf h1 { letter-spacing: -.035em; }
/* ---------- D9 [shared] header: a quiet language switch ----------
   The black-filled "RO" pill was as heavy as the yellow CTA next to it. A paper tab (hairline track, the active
   language on a white chip, the other in muted grey at 5.5:1) keeps the CTA the only loud object in the header.
   Targets 38 x 30px. */
.v3-lang { border: 1.5px solid rgba(20,24,28,.22); padding: 2px; gap: 2px; background: rgba(255,255,255,.35); }
.v3-lang-btn { min-width: 38px; min-height: 30px; border-radius: 999px; color: var(--mut); }
.v3-lang-btn.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20,24,28,.22), 0 0 0 1px rgba(20,24,28,.08); }
.v3-lang-btn:not(.active):hover { color: var(--ink); }
@media (max-width: 1100px) { .v3-nav .v3-lang-btn { min-width: 52px; min-height: 40px; } }  /* thumb targets in the phone menu */
/* ---------- D12 [shared] subpages ---------- */
/* (a) articles: the hero text starts on the article column (it sat 160px to the right of it) */
.post-hero .container { max-width: 1120px; }
.post-hero h1 { max-width: 820px; }
/* (b) /portofoliu kickers: ink like every other kicker (violet / green / teal text were palette leftovers) */
.pf-kicker.purple, .pf-kicker.green, .pf-kicker.teal, .pf-kicker.amber { color: var(--ink); }
/* (c) /produse "before" lines: the strike is ink, not red (red is for real errors) */
.chg-old { text-decoration-color: rgba(20,24,28,.45); }
/* (d) /institutii audience cards: content from the top, so the four titles share one line; ink icon tiles like the
       rest of the site (pale blue tiles were the old palette) */
.aud-card { align-items: flex-start; }
.aud-icon { background: var(--ink) !important; color: #fff !important; }
/* (e) /institutii catalogue code: a tag sized to its text (it stretched across the card and looked like an input) */
.svc-code { align-self: flex-start; }
/* (f) blog "Citește articolul": ink with the yellow underline, like every other text link (was navy) */
.post-more { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ye); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* (g) /produse + /institutii hero chips: hairline pills with a round green check (2px black pills with a tall green
       block read as form checkboxes) */
.inst-badge { border: 1.5px solid rgba(20,24,28,.18) !important; box-shadow: 0 1px 2px rgba(20,24,28,.06); font-weight: 600; }
.inst-badge .ib-check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; }
.inst-badge .ib-check svg { width: 12px; height: 12px; }
/* (h) blog diagrams: the SVGs ask for "Inter", which the site never loads, so they rendered in Arial (blog index
       and three articles); they now use the site face. The featured diagram sits on a white figure (grey on grey
       looked like a pasted screenshot) and gets half the card, so its labels grow. */
svg[font-family^="Inter"] { font-family: 'Host Grotesk', 'Helvetica Neue', Arial, sans-serif; }
.feat-visual { background: #fff; border: 1.5px solid rgba(20,24,28,.12); padding: 18px; }
@media (min-width: 1025px) { .feat-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; } }
/* ---------- D13 [shared] footer ---------- */
/* (a) the brand line carries the mark (the only brand spot without it) */
.v3-fbrand > b { display: inline-flex; align-items: center; gap: 10px; }
.v3-fbrand > b::before { content: ""; flex: 0 0 auto; width: 30px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23252B31'/%3E%3Crect x='12' y='13' width='10' height='10' rx='1.6' fill='%23F9A800'/%3E%3Crect x='12' y='26' width='10' height='25' rx='1.6' fill='%23F3F1EA'/%3E%3Crect x='26' y='13' width='26' height='10' rx='1.6' fill='%23F3F1EA'/%3E%3Crect x='34' y='13' width='10' height='38' rx='1.6' fill='%23F3F1EA'/%3E%3C/svg%3E") center / contain no-repeat; }
/* (b) 761-1180px: brand across, then the three link columns in one row ("Contact direct" fell alone onto a row) */
@media (min-width: 761px) and (max-width: 1180px) {
  .v3-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
  .v3-fbrand { grid-column: 1 / -1; }
}
/* the site's mono everywhere (these three fell back to the system monospace, Consolas on Windows) */
.ag-url, .series-num, .blog-body code { font-family: var(--mono) !important; }
.post-card.cat-eng { border-left-color: var(--ink) !important; }
/* subpage titles: no marker highlight either (it reads as generated) */
.highlight { background: none !important; padding: 0 !important; }
/* eyebrow pills removed (owner 11.10: "that pill over the hero, what is its point?"): they repeated the headline
   under them. The portfolio section labels stay as plain small labels; the sample-data note on /produse stays as text. */
.section-tag { display: none !important; }
.section-tag.is-note, .pf-kicker { display: inline-block !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font: 700 12px/1.3 var(--mono) !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--ink2) !important; }
.section-tag.is-note::before, .pf-kicker::before { content: none !important; }

/* blog tables as cards on phones (12.10): no sideways scroll, no cut column. Labels come from the headers (script.js). */
@media (max-width: 600px) {
    .blog-table-wrap { overflow: visible; }
    .blog-table { min-width: 0 !important; }
    .blog-table thead { display: none; }
    .blog-table, .blog-table tbody, .blog-table tr, .blog-table td { display: block; width: 100%; }
    .blog-table tr { padding: 13px 16px 14px; border-bottom: 1px solid var(--border); }
    .blog-table tr:last-child { border-bottom: 0; }
    .blog-table td { padding: 0 !important; border: 0 !important; }
    .blog-table td:first-child { font-weight: 700; color: var(--ink); }
    .blog-table td + td { margin-top: 8px; }
    .blog-table td + td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
}
/* post hero meta on phones: the date on its own line, no dot left hanging at the end of the first line */
@media (max-width: 480px) {
    .post-hero .post-meta > .dot ~ .dot { display: none; }
    .post-hero .post-meta > .dot ~ .dot + * { flex-basis: 100%; }
}

/* blog index: no pill over the featured title (owner 11.10: "that pill, what is its point"); the meta line below it
   already says "Inginerie". Diagrams asked for Inter, which the site never loads (they fell back to Arial): they use
   the site font like everything else. */
.feat-badge { display: none !important; }
.feat-visual svg text, .post-figure svg text { font-family: 'Host Grotesk', sans-serif; }
.post-figure figcaption { text-wrap: balance; }