/* ===== netITworks — WP theme additions (mobile menu + WP-specific bits) =====
   Layered on top of the design styles.css. Uses the same design tokens. */

/* Burger hidden on desktop */
.nav-burger { display: none; }

/* WP nav-menu rendered as <ul> inside .nav-links — flatten to match design <a> row */
.nav-links .nav-links-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 30px;
}
.nav-links .nav-links-menu li { margin: 0; }

/* ===== Mobile menu (design had no nav ≤1024px — added) ===== */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg-deep, #08111F);
  background: linear-gradient(160deg, #0E1A2C 0%, #08111F 100%);
  padding: 96px 28px 40px;
  opacity: 0; visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms ease;
  overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu[hidden] { display: block; } /* JS controls visibility via .is-open */
.mobile-menu-inner {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 520px; margin: 0 auto;
}
/* :not(.btn) for the same reason as .entry-content a — without it this rule
   (0-1-1) beats .btn-primary (0-1-0) and paints the lime CTA pill white on
   lime, which is exactly what it did until v0.12. */
.mobile-menu-inner a:not(.btn) {
  color: #fff; text-decoration: none;
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-size: 30px; font-weight: 600;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  transition: color 180ms ease;
}
.mobile-menu-inner a:not(.btn):hover { color: var(--brand, #A6CE41); }
/* The mobile list is now the real WP menu (a <ul>) — flatten it back to the
   stacked link column the design expects. */
.mobile-menu-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.mobile-menu-list li { margin: 0; }
.mobile-menu-list a { display: block; }
.mobile-menu-list .current-menu-item > a,
.mobile-menu-list .current_page_item > a,
.mobile-menu-list .current_page_ancestor > a {
  color: var(--brand, #A6CE41);
  border-bottom-color: rgba(166,206,65,0.45);
}
.mobile-menu-inner .btn {
  margin-top: 22px; border-bottom: none;
  justify-content: center; text-align: center;
}
.mobile-menu-inner .mobile-phone {
  margin-top: 18px; border-bottom: none;
  font-family: 'JetBrains Mono', monospace; font-size: 18px;
  color: var(--brand, #A6CE41);
}
/* Language switcher inside the mobile menu. The `a:not(.btn)` rule above sets
   30px/600 on every link in here, so the codes are pulled back to topbar scale
   and stripped of the list divider. */
.mobile-menu-inner .lang-switch-mobile {
  margin-top: 22px; display: flex; gap: 10px;
}
.mobile-menu-inner .lang-switch-mobile a:not(.btn) {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; font-weight: 500; letter-spacing: 0.06em;
  padding: 6px 2px; border-bottom: none;
  color: rgba(255,255,255,0.55);
}
.mobile-menu-inner .lang-switch-mobile a:not(.btn).is-current {
  color: #fff;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--brand, #A6CE41);
}

/* Burger button */
.nav-burger {
  width: 44px; height: 44px; border: none; background: transparent;
  cursor: pointer; padding: 10px; position: relative; z-index: 210;
}
.nav-burger span {
  display: block; width: 100%; height: 2px; margin: 4px 0;
  background: currentColor; border-radius: 2px;
  transition: transform 240ms ease, opacity 200ms ease;
}
body.menu-open { overflow: hidden; }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
}
@media (min-width: 1025px) {
  .mobile-menu { display: none !important; }
}

/* WP admin bar offset for fixed elements (logged-in preview) */
.admin-bar .mobile-menu { padding-top: 128px; }

/* ===== Mobile overflow hardening (design lacked sub-1024 polish) ===== */
/* The Three.js canvas buffer is sized rect.width×pixelRatio with updateStyle=false,
   so without a CSS cap it can paint wider than the viewport and widen the document,
   which stops margin:auto sections from shrinking and makes headings run off-screen. */
/* overflow-x:hidden on html/body disables position:sticky (creates a scroll
   container), so the sticky .nav never stuck. clip clips without doing that;
   hidden stays as fallback for browsers without clip support. */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

/* .nav (z:100) sits under the fixed .mobile-menu overlay (z:200); lift it while
   the menu is open so the burger stays visible and clickable as a close button. */
body.menu-open .nav { z-index: 300; }

#stack-canvas { display: block; width: 100% !important; height: 100% !important; }

@media (max-width: 1024px) {
  .hero-right { width: 100%; }
}

@media (max-width: 600px) {
  .vendors, .services, .profil, .valori, .proces, .promisiune, .contact {
    padding-left: 20px; padding-right: 20px;
  }
  h1, h2, h3, .acc-title, .acc-deck, .promise-quote, .hero-sub { overflow-wrap: anywhere; }
  /* Tame the large display headings so they fit a 390px phone without clipping. */
  .vendors-head h2, .services-intro h2, .profil-head h2, .valori-head h2,
  .proces-head h2, .contact-copy h2 { font-size: clamp(24px, 6vw, 30px) !important; }
  .vendors-head h2 { font-size: clamp(22px, 5.6vw, 28px) !important; }
  .promise-quote { font-size: clamp(22px, 6.5vw, 30px) !important; }
}

/* ============================================================
   INNER PAGES — dark-cohesion redesign (v0.7.0)
   Brings every inner page onto the homepage's dark-navy + glass
   language: dark sections, lime-glass cards, top-edge halos and the
   same gradient throughline. Replaces the earlier light (#F6F8FB +
   white cards) Phase-3 treatment.
   ============================================================ */

/* ---- Page hero (dark) ---- */
.page-hero {
  background: linear-gradient(160deg, #0E1A2C 0%, #08111F 100%);
  color: #fff;
  padding: 130px 32px 84px;
}
.admin-bar .page-hero { padding-top: 150px; }
.page-hero-inner { max-width: 1120px; margin: 0 auto; }
.page-hero h1 {
  font-family: 'Clash Grotesk', sans-serif; font-weight: 500;
  font-size: clamp(38px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -0.03em;
  color: #fff; margin: 0;
}
.page-hero .page-lead {
  margin-top: 22px; max-width: 720px;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: rgba(255,255,255,0.74);
}

/* ---- Generic body sections — now dark navy with a baked-in top halo,
        so the throughline carries without per-template halo markup ---- */
.cards-section, .entry-section {
  background: var(--bg-deep);
  color: rgba(255,255,255,0.8);
  padding: 88px 32px;
  position: relative;
  /* Clips the ::before/::after glows. Must be `clip`, not `hidden`: `hidden`
     makes the section a scroll container, which becomes the nearest scrollport
     for position:sticky descendants — that silently pushed .entry-aside down by
     its own `top: 96px` and stopped it sticking at all. `hidden` stays first as
     the fallback for engines without `clip`. */
  overflow: hidden;
  overflow: clip;
  /* Contains descendant margins. Needed because `overflow: clip` — unlike the
     `overflow: hidden` above that it deliberately overrides — does NOT establish
     a block formatting context. Templates that zero the section padding
     (single-services.php, template-vendor.php pass `padding-top:0`) then had
     nothing left to stop the first child's margin collapsing THROUGH the
     section's top edge: .client-marquee-wrap's `margin-top: 64px` escaped and
     became a 64px gap between sections, exposing the white `--bg-canvas` body
     as a full-width white bar on every /servicii/{slug}/ and vendor page.
     `flow-root` fixes it without re-creating a scrollport, so .entry-aside's
     position:sticky keeps working. */
  display: flow-root;
}
.cards-section::before, .entry-section::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(ellipse 900px 240px at 50% -60px, rgba(107,136,38,0.16), transparent 70%);
}
/* Bottom-corner secondary glow for richer recurrence */
.cards-section::after, .entry-section::after {
  content: ''; position: absolute; bottom: -200px; left: -120px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(107,136,38,0.14) 0%, transparent 65%);
  filter: blur(80px); pointer-events: none; z-index: 0;
}
.cards-section > *, .entry-section > * { position: relative; z-index: 1; }

.entry-wrap {
  max-width: 1180px; margin: 0 auto;
  /* minmax(0, 1fr), not 1fr: a bare 1fr track takes its automatic minimum from
     min-content, so the 700px-wide diagram inside .nd-figure blew the content
     column out to 758px on a 390px phone and .entry-section clipped the prose. */
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; align-items: start;
}
/* And the items need capping too. The 700px-wide diagram inside .nd-figure blew
   the content column out to 758px on a 390px phone, where .entry-section then
   clipped 307px off every paragraph. min-width:0 alone does NOT fix it — the item
   still resolves to max-content — so max-width is what actually holds the column
   to its track, and .nd-figure's own overflow-x:auto then scrolls the figure. */
.entry-wrap > * { min-width: 0; max-width: 100%; }
.entry-wrap-narrow { max-width: 840px; margin: 0 auto; }
/* Case studies match the SERVICE column, not the prose column: 806px is what
   leaves exactly 700px inside the panel, so their diagrams render at 1.0x on
   the same basis as every other one. See inc/diagrams.php. */
.entry-wrap-case { max-width: 806px; margin: 0 auto; }

/* ---- Entry content card — dark glass reading surface ---- */
.entry-content {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(107,136,38,0.05) 0%, rgba(10,20,40,0.5) 100%);
  border: 1px solid rgba(196,221,111,0.20);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 52px);
  color: rgba(255,255,255,0.82);
}
.entry-content::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent 0%, #6B8826 30%, #C4DD6F 50%, #6B8826 70%, transparent 100%);
  opacity: 0.7; pointer-events: none;
}
.entry-content > :first-child { margin-top: 0; }
.entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: 'Clash Grotesk', sans-serif; color: #fff; line-height: 1.15;
  letter-spacing: -0.02em; margin: 1.6em 0 0.5em;
}
.entry-content h2 { font-size: clamp(24px, 2.6vw, 32px); }
.entry-content h3 { font-size: clamp(20px, 2.1vw, 26px); }
.entry-content h4, .entry-content h5 { font-size: 18px; text-transform: none; }
.entry-content p { margin: 0 0 1.1em; line-height: 1.72; color: rgba(255,255,255,0.80); }
.entry-content ul, .entry-content ol { margin: 0 0 1.2em 1.2em; }
.entry-content li { margin: 0.35em 0; line-height: 1.6; color: rgba(255,255,255,0.78); }
.entry-content li::marker { color: var(--brand); }
/* Prose links only — .btn must keep its own colour. Without :not(.btn) this rule
   (0-1-1) beats .btn-primary (0-1-0) and paints lime text on the lime pill. */
.entry-content a:not(.btn) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:not(.btn):hover { color: #C4DD6F; }
.entry-content a.btn { text-decoration: none; }
.entry-content strong { color: #fff; }
.entry-content blockquote {
  margin: 1.5em 0; padding: 14px 22px; border-left: 3px solid var(--brand);
  background: rgba(166,206,65,0.07); border-radius: 0 8px 8px 0; color: #fff;
}
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.entry-content th, .entry-content td { padding: 10px 12px; border: 1px solid rgba(255,255,255,0.14); text-align: left; }
.entry-content th { background: rgba(255,255,255,0.04); color: #fff; }
.entry-content img { border-radius: var(--radius); max-width: 100%; height: auto; }
.entry-cta { margin-top: 2em; }

/* ---- Aside — dark glass cards ---- */
.entry-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.aside-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(107,136,38,0.06) 0%, rgba(10,20,40,0.35) 100%);
  border: 1px solid rgba(196,221,111,0.20);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius); padding: 26px; color: rgba(255,255,255,0.78);
}
.aside-card .kicker { color: var(--cyan); }
.aside-list { list-style: none; margin: 8px 0 0; padding: 0; }
.aside-list li { border-top: 1px solid rgba(255,255,255,0.10); }
.aside-list li:first-child { border-top: none; }
.aside-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 0; color: #fff; text-decoration: none; font-weight: 500;
  transition: color .18s, padding-left .18s;
}
.aside-list a:hover { color: var(--brand); padding-left: 6px; }
.aside-card p { color: rgba(255,255,255,0.72); }
.aside-contact .aside-phone { display: block; font-family: 'Clash Grotesk', sans-serif; font-size: 24px; font-weight: 600; color: #fff; margin-top: 6px; text-decoration: none; }
.aside-contact .aside-email { display: block; margin-top: 8px; color: var(--brand); font-family: 'JetBrains Mono', monospace; font-size: 13px; text-decoration: none; }
.aside-contact .aside-email:hover { color: #C4DD6F; }

/* ---- Cards grid (services / generic) — dark glass ---- */
.cards-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(107,136,38,0.06) 0%, rgba(10,20,40,0.35) 100%);
  border: 1px solid rgba(196,221,111,0.20);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius); padding: 30px 28px; text-decoration: none; color: rgba(255,255,255,0.78);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent 0%, #6B8826 30%, #C4DD6F 50%, #6B8826 70%, transparent 100%);
  opacity: 0.6; pointer-events: none;
}
.svc-card:hover { transform: translateY(-6px); border-color: var(--cyan); box-shadow: 0 18px 44px rgba(107,136,38,0.28), 0 0 0 1px rgba(196,221,111,0.35); }
.svc-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--cyan); position: relative; z-index: 1; }
.svc-card h3 { font-family: 'Clash Grotesk', sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.svc-card p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.65); margin: 0; flex: 1; }
.svc-more { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--cyan); margin-top: 6px; }

/* ---- CTA band (dark) — already on-brand ---- */
.cta-band { background: var(--bg-deep); color: #fff; padding: 90px 32px; text-align: center; }
.cta-band-inner { max-width: 760px; margin: 0 auto; }
.cta-band h2 { font-family: 'Clash Grotesk', sans-serif; font-weight: 500; font-size: clamp(30px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.03em; color: #fff; }
.cta-band p { margin: 18px auto 30px; max-width: 600px; color: rgba(255,255,255,0.72); line-height: 1.6; }
.cta-band-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---- Team grid (Despre noi) ---- */
.team-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team-card { text-align: center; }
.team-avatar {
  width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #A6CE41, #6B8826); color: #08111F;
  font-family: 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 34px;
  overflow: hidden; box-shadow: 0 10px 30px rgba(107,136,38,0.30);
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-family: 'Clash Grotesk', sans-serif; font-size: 18px; font-weight: 600; color: #fff; }
.team-card .role { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 4px; }

/* ---- Footer: Navigare / Info / Date de contact columns (mirrors live footer) ---- */
.footer-grid { grid-template-columns: 1.5fr 0.9fr 1.1fr 1.1fr; gap: 48px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; font-size: 14px; }
.footer-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--cyan); letter-spacing: 0.1em; margin-bottom: 6px;
}
.footer-col a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 200ms; }
.footer-col a:hover { color: var(--cyan); }
.footer-contact address { font-style: normal; color: rgba(255,255,255,0.7); line-height: 1.55; }
.footer-label {
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55); margin-top: 6px;
}
.footer-contact address .footer-label { margin-top: 0; }
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- Certificări (Despre noi) — glass panel + cert-wall photo ---- */
.cert-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.cert-panel {
  background: linear-gradient(180deg, rgba(107,136,38,0.05) 0%, rgba(10,20,40,0.30) 100%);
  border: 1px solid rgba(196,221,111,0.16); border-radius: var(--radius);
  padding: 36px 32px; color: rgba(255,255,255,0.78); line-height: 1.65;
}
.cert-panel strong { color: #fff; }
.cert-list { list-style: none; margin: 18px 0 0; padding: 0; }
.cert-list li { position: relative; padding: 8px 0 8px 30px; color: rgba(255,255,255,0.82); }
.cert-list li::before { content: '✓'; position: absolute; left: 0; top: 8px; color: var(--cyan); font-weight: 700; }
.cert-photo { margin: 0; }
.cert-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.14); }
@media (max-width: 880px) { .cert-grid { grid-template-columns: 1fr; } }

/* ============================================================
   DE CE NETITWORKS — homepage differentiator summary
   Five cards: a figure, a label and one line of substance. The
   figures are deliberately repeats of numbers already published
   elsewhere on the site — this section gathers them, it does not
   introduce a claim. 3-up then 2-up then 1-up; the last row is
   allowed to be short rather than stretching cards to fill it.
   ============================================================ */
/* The dark ground is per-section on this homepage, NOT inherited: body is white
   and .halo-section only paints the glow. Without this the whole block rendered
   white-on-white and was unreadable — caught by sampling the composited colour,
   not by reading the CSS. Matches .valori / .proiecte. */
.dece {
  background: var(--bg-deep);
  color: white;
  padding: 120px 32px;
  position: relative;
  overflow: hidden;
}
.dece .kicker { color: var(--cyan) !important; }
.dece-head { max-width: 1180px; margin: 0 auto 44px; }
.dece-head h2 {
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: white;
  max-width: 820px;
}
.dece-head h2 em.grad { font-style: italic; font-weight: 600; }
.dece-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.dece-card {
  padding: 34px 30px 30px;
  min-width: 0;
}
.dece-fig {
  display: block;
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand);
  margin-bottom: 14px;
}
.dece-fig .plus { font-size: 0.6em; vertical-align: super; margin-left: 1px; }
.dece-card h3 {
  margin: 0 0 8px;
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.dece-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
}
@media (max-width: 980px) { .dece-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .dece-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Staff certifications wall (Despre noi) ----
   People certifications, kept visually distinct from the ISO panel above and
   from the vendor logos on /parteneri/ — the client asked for the three to stop
   reading as one undifferentiated "certificări" blob. Text chips, no logos:
   these are course certifications with no mark to show. */
.staff-certs { max-width: 1180px; margin: 44px auto 0; }
.staff-certs-lead {
  margin: 10px 0 20px;
  max-width: 70ch;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
}
.staff-cert-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.staff-cert-wall li {
  background: linear-gradient(180deg, rgba(107,136,38,0.05) 0%, rgba(10,20,40,0.30) 100%);
  border: 1px solid rgba(196,221,111,0.16);
  border-radius: var(--radius-sm);
  padding: 9px 15px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,0.74);
  transition: border-color .2s, color .2s;
}
.staff-cert-wall li:hover { border-color: var(--cyan); color: #fff; }

/* ---- Competențe — six domains of activity (Despre noi) ---- */
.competente-grid {
  list-style: none;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.competenta {
  position: relative;
  padding: 30px 28px 28px;
  /* min-width:0 belongs on the item, not the track: a 1fr column will not shrink
     below its content's max-content width without it. See reference_wp_layout_traps. */
  min-width: 0;
}
.competenta p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.76);
  position: relative;
  z-index: 2;
}
.comp-num {
  display: block;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--brand);
}
@media (max-width: 980px) { .competente-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .competente-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Vendor wall (Parteneri) — dark glass chips ---- */
.vendor-wall { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.brand-chip {
  background: linear-gradient(180deg, rgba(107,136,38,0.05) 0%, rgba(10,20,40,0.30) 100%);
  border: 1px solid rgba(196,221,111,0.16); border-radius: var(--radius-sm);
  padding: 20px 16px; text-align: center; font-family: 'JetBrains Mono', monospace;
  font-size: 14px; color: rgba(255,255,255,0.72); transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.brand-chip:hover { border-color: var(--cyan); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(107,136,38,0.22); }
.brand-chip.featured { border-color: rgba(196,221,111,0.4); }

/* ---- FAQ — dark ---- */
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.12); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 24px 4px; display: flex; gap: 16px; align-items: baseline;
  font-family: 'Clash Grotesk', sans-serif; font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; color: #fff;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; margin-left: auto; color: var(--cyan); font-size: 24px; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 4px 26px; color: rgba(255,255,255,0.74); line-height: 1.7; max-width: 760px; }

/* ---- Inner-page responsive ---- */
@media (max-width: 1024px) {
  .cards-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
}
/* The aside drops earlier than the card grids do. Below ~1180px the wrap is no
   longer at its 1180px max, so keeping a fixed 330px column would squeeze the
   content below the 700px the diagrams are drawn for. */
@media (max-width: 1180px) {
  .entry-wrap { grid-template-columns: minmax(0, 1fr); }
  .entry-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .entry-aside .aside-card { flex: 1 1 260px; }
}
@media (max-width: 600px) {
  .cards-grid, .team-grid { grid-template-columns: 1fr; }
  .cards-section, .entry-section, .cta-band, .page-hero { padding-left: 20px; padding-right: 20px; }
}

/* ---- Contact page ---- */
.contact-page-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 320px 1fr; gap: 36px; align-items: start; }
/* Form sits on a dark section now — give it the same lime-glass surface as the
   homepage contact form, with a gradient top-edge. */
.contact-page-grid .contact-form {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(107,136,38,0.06) 0%, rgba(10,20,40,0.55) 100%) !important;
  border: 1px solid rgba(196,221,111,0.22) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
  border-radius: var(--radius-lg); padding: 36px; align-self: start;
}
.contact-page-grid .contact-form::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent 0%, #6B8826 30%, #C4DD6F 50%, #6B8826 70%, transparent 100%);
  opacity: 0.7; pointer-events: none;
}
@media (max-width: 900px) { .contact-page-grid { grid-template-columns: 1fr; } }

/* ---- Section titles in dark card sections ---- */
.section-title { font-family: 'Clash Grotesk', sans-serif; font-weight: 500; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.03em; color: #fff; margin-top: 6px; }

/* ---- Ghost button on dark backgrounds (← Toate articolele etc.) ---- */
.btn-ghost-dark {
  background: rgba(255,255,255,0.06); color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.02em;
}
.btn-ghost-dark:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(255,255,255,0.10); }

/* ---- Empty-state text on dark sections ---- */
.cards-section .empty-state, .entry-section .empty-state { text-align: center; color: rgba(255,255,255,0.6); }

/* ============================================================
   BLOG (Phase 4) — dark glass cards
   ============================================================ */
.blog-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card {
  position: relative;
  background: linear-gradient(180deg, rgba(107,136,38,0.06) 0%, rgba(10,20,40,0.35) 100%);
  border: 1px solid rgba(196,221,111,0.18); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: rgba(255,255,255,0.8);
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(107,136,38,0.28); border-color: var(--cyan); }
.post-card-thumb { aspect-ratio: 16/10; background: var(--bg-deep-soft); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-thumb .thumb-fallback { font-family: 'JetBrains Mono', monospace; color: var(--brand); font-size: 14px; }
.post-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card-meta { display: flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(255,255,255,0.55); }
.post-cat { color: var(--cyan); text-transform: uppercase; letter-spacing: 0.06em; }
.post-card h3 { font-family: 'Clash Grotesk', sans-serif; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #fff; }
.post-card p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.62); margin: 0; flex: 1; }
.post-card-more { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--cyan); margin-top: 4px; }

/* Single post */
.single-hero .post-meta-row { margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: rgba(255,255,255,0.6); display: flex; gap: 12px; align-items: center; }
.single-hero .post-meta-row .dot { opacity: 0.5; }
.single-featured { max-width: 980px; margin: -56px auto 0; padding: 0 32px; position: relative; z-index: 2; }
.single-featured img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; box-shadow: 0 30px 70px rgba(8,17,31,0.55); }
.single-featured + .entry-section { padding-top: 56px; }

/* Pagination */
.blog-pagination { max-width: 1180px; margin: 48px auto 0; }
.blog-pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-sm); color: #fff; text-decoration: none;
  font-family: 'JetBrains Mono', monospace; font-size: 14px; transition: all .18s;
}
.blog-pagination .page-numbers:hover { border-color: var(--cyan); color: var(--cyan); }
.blog-pagination .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #08111F; font-weight: 600; }

@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } .single-featured { margin-top: -32px; padding: 0 20px; } }

/* ============================================================
   VENDOR PAGES (template-vendor.php)
   ============================================================ */
/* Link row on the /parteneri/ featured cards */
.v-card .v-more {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.09);
  display: flex;
  align-items: center;
  gap: 8px;
}
.v-card-link:hover .v-more { color: #fff; }
.v-card-link:hover .v-more .arrow { transform: translateX(4px); }
.v-card .v-more .arrow { transition: transform 220ms; }

.vendor-hero-inner { display: flex; flex-direction: column; align-items: flex-start; }
.vh-mark {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  width: 100%;
  max-width: 520px;
}
.vh-mark img {
  height: 42px;
  width: auto;
  max-width: 190px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.vendor-hero .v-tier {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid rgba(196,221,111,0.45);
  border-radius: 999px;
  color: var(--brand);
}
.vendor-hero-inner .proof-link { margin-top: 26px; }

/* ---- solutions grid ---- */
.vsol-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px;
}
.vsol-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 26px;
  transition: transform 240ms cubic-bezier(0.22,0.61,0.36,1);
}
.vsol-card:hover { transform: translateY(-3px); }
.vsol-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(166,206,65,0.65);
  padding-top: 3px;
  flex-shrink: 0;
}
.vsol-card h3 {
  margin: 0;
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
}

/* ---- capability cards ---- */
.vfeat-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius);
  overflow: hidden;
}
.vfeat-card { background: var(--bg-deep); padding: 30px 32px; }
.vfeat-card h3 {
  margin: 0 0 10px;
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #fff;
}
.vfeat-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.66);
}

/* ---- equipment rows ---- */
.vstack-list { max-width: 1180px; margin: 0 auto; }
.vstack-row {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vstack-row:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.vstack-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--brand);
}
.vstack-desc { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.72); }

/* ---- spec band ---- */
.vspec-band { max-width: 1180px; margin: 40px auto 0; padding: 28px 34px; }
.vspec-title {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin-bottom: 20px;
}
.vspec-row { display: flex; flex-wrap: wrap; gap: 48px; }
.vspec strong {
  display: block;
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  background: var(--gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.vspec span {
  display: block;
  margin-top: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* ---- related case ---- */
.vcase {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.vcase-title {
  margin: 10px 0 10px;
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 600;
  color: #fff;
}
.vcase-text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.70);
  max-width: 60ch;
}

@media (max-width: 700px) {
  .vh-mark { flex-wrap: wrap; gap: 14px; }
  .vstack-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vspec-row { gap: 28px; }
}

/* ============================================================
   DESPRE NOI — milestones band
   ============================================================ */
.timeline-band {
  list-style: none;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  position: relative;
}
/* The rail runs behind the nodes at their exact centre line. */
.timeline-band::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 7px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(166,206,65,0.55) 0%,
    rgba(166,206,65,0.30) 60%,
    rgba(166,206,65,0.06) 100%);
}
.tb-step { position: relative; padding-top: 34px; }
.tb-node {
  position: absolute;
  top: 0; left: 0;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(166,206,65,0.55);
  background: var(--bg-deep);
}
.tb-node::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(166,206,65,0.45);
}
.tb-now .tb-node { border-color: var(--brand); }
.tb-now .tb-node::after {
  background: var(--brand);
  box-shadow: 0 0 10px rgba(166,206,65,0.9);
}
.tb-year {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.tb-title {
  margin: 0 0 10px;
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255,255,255,0.94);
}
.tb-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.66);
  max-width: 40ch;
}
@media (max-width: 780px) {
  /* Vertical rail on phones — three columns squeeze the text to shreds. */
  .timeline-band { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-left: 30px; }
  .timeline-band::before {
    left: 7px; right: auto; top: 8px; bottom: 8px;
    width: 1px; height: auto;
    background: linear-gradient(180deg,
      rgba(166,206,65,0.55) 0%,
      rgba(166,206,65,0.30) 60%,
      rgba(166,206,65,0.06) 100%);
  }
  .tb-step { padding-top: 0; }
  .tb-node { top: 2px; left: -30px; }
}

/* ------------------------------------------------------------------
   Repere — vertical variant (.timeline-band--v)
   The 3-up horizontal band holds three short milestones. The client
   supplied the real dated history (2026-08-06), which is six entries of
   actual prose: at 3 columns that wraps to a second row while the rail
   stays pinned to the first, and at 6 columns each is ~180px wide. So
   the vertical rail — already the phone treatment — runs at every width
   here, with year and title beside the prose once there is room.
   ------------------------------------------------------------------ */
.timeline-band--v {
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  padding-left: 30px;
}
.timeline-band--v::before {
  left: 7px; right: auto; top: 8px; bottom: 8px;
  width: 1px; height: auto;
  background: linear-gradient(180deg,
    rgba(166,206,65,0.55) 0%,
    rgba(166,206,65,0.30) 70%,
    rgba(166,206,65,0.06) 100%);
}
.timeline-band--v .tb-step { padding-top: 0; }
.timeline-band--v .tb-node { top: 3px; left: -30px; }
@media (min-width: 781px) {
  .timeline-band--v .tb-step {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: 34px;
    align-items: baseline;
  }
  .timeline-band--v .tb-year { grid-column: 1; grid-row: 1; margin: 0; }
  .timeline-band--v .tb-title { grid-column: 2; grid-row: 1; margin: 0 0 8px; }
  .timeline-band--v .tb-text { grid-column: 2; grid-row: 2; max-width: 68ch; }
}

/* ============================================================
   PROIECTE — full-width case-study rows
   ============================================================ */
.pw-list {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pw-row {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 268px;
  gap: 28px;
  padding: 34px 38px;
  transition: transform 260ms cubic-bezier(0.22,0.61,0.36,1), border-color 260ms;
}
/* Full-row click target: a stretched overlay keeps the markup semantic (one
   link, real heading) instead of wrapping the whole row in an <a>. */
.pw-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pw-row > *:not(.pw-hit) { position: relative; z-index: 2; pointer-events: none; }
.pw-row:hover { transform: translateY(-3px); }
.pw-row:hover .pw-title { color: #fff; }
.pw-row:hover .pw-more { color: #fff; }
.pw-row:hover .pw-more .arrow { transform: translateX(4px); }
.pw-row:focus-within { outline: 3px solid var(--brand); outline-offset: 3px; }

.pw-index { display: flex; align-items: flex-start; }
.pw-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(196,221,111,0.42);
  text-stroke: 1px rgba(196,221,111,0.42);
}

.pw-body { min-width: 0; }
.pw-title {
  margin: 10px 0 12px;
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  color: rgba(255,255,255,0.94);
  transition: color 220ms;
}
.pw-deck {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.70);
  max-width: 62ch;
}
.pw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pw-chips span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: rgba(255,255,255,0.62);
}
.pw-more { margin-top: 0; }
.pw-more .arrow { transition: transform 220ms; }

.pw-aside {
  display: flex;
  flex-direction: column;
  /* Centred, not space-between: the body column is much taller than the mark
     plus the stat, and pinning them to the edges opened a dead gap. */
  justify-content: center;
  gap: 26px;
  padding-left: 28px;
  border-left: 1px solid rgba(255,255,255,0.09);
}
.pw-mark { display: flex; align-items: center; min-height: 42px; }
.pw-mark img {
  max-width: 150px;
  max-height: 40px;
  width: auto; height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.72;
  transition: opacity 240ms;
}
.pw-row:hover .pw-mark img { opacity: 1; }
.pw-wordmark {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.pw-stat strong {
  display: block;
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: var(--gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pw-stat span {
  display: block;
  margin-top: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

@media (max-width: 900px) {
  .pw-row { grid-template-columns: 60px minmax(0, 1fr); padding: 26px 24px; gap: 18px; }
  .pw-num { font-size: 34px; }
  /* The aside drops under the body and turns horizontal so the stat stays
     paired with the client mark rather than stacking into a tall column. */
  .pw-aside {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.09);
  }
}
@media (max-width: 520px) {
  .pw-row { grid-template-columns: minmax(0, 1fr); }
  .pw-index { display: none; }
  .pw-aside { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   SERVICE PAGES — readable measure inside the two-column layout
   The 330px sticky aside stays. Readability comes from the type scale and
   from the diagrams being drawn at the column's real width (see below), not
   from taking the sidebar away.
   ============================================================ */
.entry-content-service { font-size: 18px; }
/* Measure is set in em, not ch: Satoshi's "0" is wide, so 68ch resolved to
   790px which is still ~97 real characters per line. 36em lands at ~75. */
.entry-content-service > p,
.entry-content-service > ul,
.entry-content-service > ol,
.entry-content-service > h2,
.entry-content-service > h3,
.entry-content-service > h4,
.entry-content-service > blockquote {
  max-width: 36em;
}
.entry-content-service > p,
.entry-content-service > li { font-size: 18px; line-height: 1.72; }
.entry-content-service > ul,
.entry-content-service > ol { padding-left: 0; }

/* ============================================================
   TECHNICAL DIAGRAMS (inc/diagrams.php)
   Hairline schematics in the glass-stack vocabulary. All colour lives here,
   so a palette change propagates to every diagram at once.

   Every diagram is drawn on a 700-unit viewBox because that is the measured
   inner width of the service content column, so one user unit renders as one
   CSS pixel and the sizes below are literal on-screen pixels. Change the
   column geometry and you must change NETIT_DIAGRAM_W with it.
   ============================================================ */
.nd-figure {
  margin: 2.6em 0;
  padding: 0;
}
.nd-svg {
  display: block;
  width: 100%;
  /* Single-column layouts (tablet, and pages without an aside) would otherwise
     blow the figures up well past 1:1 and make the labels shout. */
  max-width: 840px;
  height: auto;
  overflow: visible;
  /* Room for the zone label that sits above the drawing area. */
  margin-top: 6px;
}
.nd-caption {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 2px solid rgba(166,206,65,0.45);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.66);
}

/* ---- boxes ---- */
.nd-box {
  fill: rgba(255,255,255,0.028);
  stroke: rgba(255,255,255,0.16);
  stroke-width: 1;
}
.nd-box-strong {
  fill: rgba(166,206,65,0.045);
  stroke: rgba(196,221,111,0.30);
}
.nd-edge { fill: rgba(255,255,255,0.22); }
.nd-key .nd-edge { fill: var(--brand); }
.nd-key .nd-box { stroke: rgba(196,221,111,0.34); }
.nd-out .nd-box {
  fill: none;
  stroke: rgba(255,255,255,0.13);
  stroke-dasharray: 4 4;
}
.nd-out .nd-edge { fill: rgba(255,255,255,0.14); }

/* ---- type ----
   Sizes render 1:1 at the service column's 700px. They are ~12% larger than
   the old landscape set, which was drawn at 960 units and upscaled to 1.12x
   by the full-width layout — this keeps the on-screen size identical. */
.nd-label {
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-size: 18px;
  font-weight: 500;
  fill: rgba(255,255,255,0.92);
}
.nd-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  fill: rgba(255,255,255,0.42);
}
.nd-zone-label,
.nd-ticket-id,
.nd-ticket-sla {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  fill: rgba(166,206,65,0.70);
}
.nd-ticket-sla { fill: rgba(255,255,255,0.34); }

/* ---- structure ---- */
.nd-zone {
  fill: rgba(166,206,65,0.022);
  stroke: rgba(166,206,65,0.28);
  stroke-width: 1;
  stroke-dasharray: 7 6;
}
.nd-link {
  fill: none;
  stroke: rgba(255,255,255,0.20);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.nd-hair { stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.nd-rail { stroke: rgba(255,255,255,0.16); stroke-width: 1.4; }
.nd-dot { fill: rgba(255,255,255,0.22); }
.nd-step.done .nd-dot { fill: rgba(166,206,65,0.55); }
.nd-step.active .nd-dot {
  fill: var(--brand);
  filter: drop-shadow(0 0 6px rgba(166,206,65,0.85));
}
.nd-step.active .nd-label { fill: #fff; }

/* Slow dash drift on the links suggests traffic without becoming a cartoon.
   Paused entirely for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .nd-link {
    stroke-dasharray: 3 7;
    animation: nd-flow 2.6s linear infinite;
  }
  @keyframes nd-flow { to { stroke-dashoffset: -20; } }
}

/* ---- rack elevation ---- */
.nd-rack-frame {
  fill: rgba(255,255,255,0.015);
  stroke: rgba(255,255,255,0.20);
  stroke-width: 1;
}
.nd-ru {
  fill: rgba(255,255,255,0.045);
  stroke: rgba(255,255,255,0.18);
  stroke-width: 1;
}
.nd-ru-key {
  fill: rgba(166,206,65,0.10);
  stroke: rgba(196,221,111,0.42);
}
.nd-vent { stroke: rgba(255,255,255,0.20); stroke-width: 1; }
.nd-u {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  fill: rgba(255,255,255,0.32);
  text-anchor: end;
}
.nd-leader-dot { fill: rgba(255,255,255,0.28); }
.nd-leader {
  fill: none;
  stroke: rgba(255,255,255,0.14);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

/* ---- concentric layers ---- */
.nd-ring { fill: none; stroke-width: 1; }
.nd-ring-0 { stroke: rgba(166,206,65,0.22); fill: rgba(166,206,65,0.018); }
.nd-ring-1 { stroke: rgba(166,206,65,0.30); fill: rgba(166,206,65,0.022); }
.nd-ring-2 { stroke: rgba(166,206,65,0.40); fill: rgba(166,206,65,0.028); }
.nd-ring-3 { stroke: rgba(166,206,65,0.55); fill: rgba(166,206,65,0.036); }
.nd-ring-4 { stroke: rgba(166,206,65,0.75); fill: rgba(166,206,65,0.05); }
.nd-core { fill: var(--brand); filter: drop-shadow(0 0 10px rgba(166,206,65,0.75)); }
.nd-swatch-0 { fill: rgba(166,206,65,0.28); }
.nd-swatch-1 { fill: rgba(166,206,65,0.42); }
.nd-swatch-2 { fill: rgba(166,206,65,0.58); }
.nd-swatch-3 { fill: rgba(166,206,65,0.78); }
.nd-swatch-4 { fill: var(--brand); }

/* ---- wireless coverage ---- */
.nd-venue {
  fill: rgba(255,255,255,0.02);
  stroke: rgba(255,255,255,0.20);
  stroke-width: 1;
}
.nd-court {
  fill: none;
  stroke: rgba(255,255,255,0.20);
  stroke-width: 1;
  stroke-dasharray: 5 6;
}
/* Overlap is the point: soft-light lets the cells build up where they meet,
   which is what a real survey plot shows. */
.nd-cell {
  fill: rgba(166,206,65,0.055);
  stroke: rgba(166,206,65,0.16);
  stroke-width: 1;
}
.nd-ap circle:first-child { fill: var(--brand); }
.nd-ap-r { fill: none; stroke: rgba(166,206,65,0.65); stroke-width: 1; }
.nd-stat-v {
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -0.02em;
  fill: var(--brand);
}

/* ---- maintenance timeline ---- */
.nd-band {
  fill: rgba(166,206,65,0.07);
  stroke: rgba(196,221,111,0.30);
  stroke-width: 1;
}
.nd-band-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  fill: rgba(166,206,65,0.85);
}
.nd-pulse line { stroke: rgba(166,206,65,0.40); stroke-width: 1; }
.nd-axis { stroke: rgba(255,255,255,0.16); stroke-width: 1; }
.nd-evt-tick { stroke: rgba(255,255,255,0.20); stroke-width: 1; }
.nd-evt-dot { fill: var(--brand); }
.nd-bracket {
  fill: none;
  stroke: rgba(255,255,255,0.28);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.nd-rev rect { fill: rgba(255,255,255,0.14); }
.nd-zone-soft {
  fill: rgba(166,206,65,0.07);
  stroke: rgba(196,221,111,0.28);
  stroke-width: 1;
  stroke-dasharray: 6 5;
}

/* ---- building section ---- */
.nd-building {
  fill: rgba(255,255,255,0.018);
  stroke: rgba(255,255,255,0.20);
  stroke-width: 1;
}
.nd-riser { fill: rgba(166,206,65,0.10); stroke: rgba(196,221,111,0.34); stroke-width: 1; }
.nd-slab { stroke: rgba(255,255,255,0.16); stroke-width: 1; }
.nd-outlet { fill: rgba(166,206,65,0.55); }

/* ---- case studies ---- */
.nd-chip {
  fill: rgba(166,206,65,0.20);
  stroke: rgba(196,221,111,0.45);
  stroke-width: 1;
}
/* Access-controlled door: a ring on the partition, not a filled dot, so it
   reads as an opening rather than as a node. */
.nd-access { fill: none; stroke: var(--brand); stroke-width: 2; }

/* ---- coverage matrix ---- */
.nd-col-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  fill: rgba(255,255,255,0.55);
}
.nd-col-us { fill: var(--brand); }
.nd-grid-line { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
/* Uniform on purpose: an opacity ramp across the phases read as "response is
   weaker", which is the opposite of what the matrix claims. */
.nd-mark { fill: var(--brand); }

/* ---- roaming ---- */
.nd-handoff { stroke: rgba(196,221,111,0.40); stroke-width: 1; stroke-dasharray: 4 5; }
.nd-walk {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 6;
}

/* ---- alert threshold / lead time ---- */
.nd-threshold { stroke: rgba(255,255,255,0.30); stroke-width: 1; stroke-dasharray: 5 5; }
/* The measured line is brand — it is the thing we watch. Past the alert the
   same line goes dashed and dimmer: that stretch is where the parameter WOULD
   go unattended, and it must not read as recorded data. */
.nd-metric {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nd-metric.proj { stroke: rgba(196,221,111,0.55); stroke-dasharray: 6 5; }
.nd-fail { fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 2; stroke-linecap: round; }
/* Guides tie the two panels to the same instant. The alert guide is brand
   (our event); the failure guide stays neutral — it is not our doing. */
.nd-guide { stroke: rgba(255,255,255,0.16); stroke-width: 1; stroke-dasharray: 4 5; }
.nd-guide.on { stroke: rgba(196,221,111,0.45); }
/* The reaction window, spanning both panels. Kept very low: it has to register
   as a region without competing with the metric line drawn across it. */
.nd-window { fill: rgba(166,206,65,0.06); }
.nd-window-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  fill: rgba(166,206,65,0.75);
}
.nd-ping { fill: rgba(255,255,255,0.16); }
.nd-ping.no { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.28); stroke-width: 1; }
.nd-alert {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.10em;
  fill: var(--brand);
}

/* ---- comparison table ---- */
.nd-tick {
  fill: none;
  stroke: rgba(255,255,255,0.45);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nd-tick.us { stroke: var(--brand); }
.nd-nope { stroke: rgba(255,255,255,0.22); stroke-width: 2; stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {
  /* The monitoring band breathes; everything else stays still. */
  .nd-pulse line { animation: nd-pulse 2.4s ease-in-out infinite; }
  .nd-pulse line:nth-child(odd) { animation-delay: 0.6s; }
  @keyframes nd-pulse { 0%, 100% { opacity: 0.35 } 50% { opacity: 1 } }
}

@media (max-width: 700px) {
  /* The wide schematics stop being readable below ~700px; let them scroll
     horizontally at a legible size instead of shrinking to illegibility. */
  .nd-figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: -20px;
    padding-inline: 20px;
  }
  .nd-svg { min-width: 700px; max-width: none; }
  .nd-caption { min-width: 0; }
}

/* ============================================================
   PRIMARY NAV — active state, hover craft, dropdowns
   The design's flat text row read plainer than the rest of the site; this
   gives each item a lime underline that wipes in from the left, a persistent
   state for the current section, and glass dropdowns on Servicii/Parteneri.
   ============================================================ */
.nav-links .nav-links-menu { gap: 26px; }
/* Deliberately static: the dropdown resolves against .nav (a sticky, therefore
   positioned, ancestor) so it centres on the header and can never overflow the
   viewport the way an item-anchored panel does near the right-hand edge. */
.nav-links .nav-item { position: static; }
.nav-links .nav-item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 2px;
  color: rgba(255,255,255,0.72);
  transition: color 200ms;
}
/* Underline wipe — scaleX keeps it off the layout and off the paint budget. */
.nav-links .nav-item > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.22,0.61,0.36,1);
}
.nav-links .nav-item > a:hover { color: #fff; }
.nav-links .nav-item > a:hover::after,
.nav-links .nav-item.has-dd:focus-within > a::after { transform: scaleX(1); }

/* Current section — stays lit, with a dimmer rule than the hover wipe. */
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a,
.nav-links .current_page_ancestor > a { color: #fff; }
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after,
.nav-links .current-menu-ancestor > a::after,
.nav-links .current_page_ancestor > a::after {
  transform: scaleX(1);
  background: rgba(166,206,65,0.55);
}
.nav-links .current-menu-item > a:hover::after,
.nav-links .current_page_item > a:hover::after { background: var(--brand); }

/* Caret */
.dd-caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.55;
  transition: transform 240ms, opacity 200ms;
}
.nav-item.has-dd:hover .dd-caret,
.nav-item.has-dd:focus-within .dd-caret {
  transform: rotate(225deg) translateY(-2px);
  opacity: 1;
}

/* ---- Dropdown panel ---- */
.nav-dd {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 120;
  width: min(760px, calc(100vw - 48px));
  padding-top: 14px;          /* hover bridge — keeps the pointer in range */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22,0.61,0.36,1), visibility 220ms;
}
.nav-item.has-dd:hover .nav-dd,
.nav-item.has-dd:focus-within .nav-dd {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-dd-inner {
  background: linear-gradient(180deg, rgba(107,136,38,0.10) 0%, rgba(8,17,31,0.96) 60%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(196,221,111,0.22);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
/* Two columns halves the panel height — six services with decks ran past the
   fold as a single stack. Falls back to one column when there are few items. */
.nav-dd-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
}
.nav-dd-list:has(li:only-child),
.nav-dd-list:has(li:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
.nav-dd-list a {
  display: grid;
  grid-template-columns: 26px 1fr 14px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 200ms;
}
.nav-dd-list a:hover { background: rgba(166,206,65,0.08); }
.dd-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: rgba(166,206,65,0.6);
  letter-spacing: 0.06em;
}
.dd-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd-title { font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,0.92); }
.dd-deck {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.50);
  /* One line per row keeps the two columns on a shared baseline grid. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-arrow {
  font-size: 13px;
  color: var(--brand);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms, transform 220ms;
}
.nav-dd-list a:hover .dd-arrow { opacity: 1; transform: translateX(0); }
.nav-dd-all {
  display: block;
  margin-top: 6px;
  padding: 11px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  text-decoration: none;
}
.nav-dd-all:hover { color: #fff; }

/* The dropdowns are desktop-only; the mobile menu lists everything flat. */
@media (max-width: 1024px) {
  .nav-dd { display: none; }
}

/* ============================================================
   CONTACT — legal data card + locator map
   ============================================================ */
.legal-list { margin: 10px 0 0; }
.legal-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.legal-row:last-child { border-bottom: 0; }
.legal-row dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  padding-top: 2px;
}
.legal-row dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
}
.legal-row dd a { color: var(--brand); text-decoration: none; }
.legal-row dd a:hover { color: #fff; }

/* ---- Locator map band ---- */
.loc-map {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.loc-map-img {
  display: block;
  width: 100%;
  height: auto;
  /* The SVG is drawn on its own dark plate; blending keeps it seated in the
     panel instead of reading as a pasted-in rectangle. */
  opacity: 0.96;
}
.loc-card {
  position: absolute;
  left: 32px;
  bottom: 32px;
  max-width: 330px;
  padding: 24px 26px;
  background: rgba(8,17,31,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(196,221,111,0.24);
  border-radius: var(--radius);
}
.loc-addr {
  margin: 10px 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.86);
}
@media (max-width: 760px) {
  .loc-map { border-radius: var(--radius); }
  /* Below the map on phones — an overlay would cover the pin. */
  .loc-card {
    position: static;
    max-width: none;
    border: 0;
    border-top: 1px solid rgba(196,221,111,0.24);
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .loc-card .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   SECTION FOOTER LINK — "this section has a page of its own"
   ============================================================ */
.section-more {
  max-width: 1180px;
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  justify-content: flex-end;
}
.section-more .proof-link { margin-top: 0; }
/* The contact column's link needs its own top gap — it has no hairline row. */
.contact-copy .proof-link { margin-top: 18px; }
@media (max-width: 600px) {
  .section-more { margin-top: 36px; justify-content: flex-start; }
}

/* ============================================================
   ACCESSIBILITY + PERF (Phase 6)
   ============================================================ */
/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--brand); color: #08111F; padding: 12px 20px;
  font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600;
  border-radius: 0 0 8px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }
#main-content:focus { outline: none; }

/* Visible focus ring for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Decorative kickers on dark inner-page sections read in cyan (was darkened
   for the old light treatment). */
.cards-section .kicker, .entry-section .kicker, .cards-section-head .kicker,
.faq-list ~ * .kicker { color: var(--cyan); }

/* Mobile: the WebGL canvas + legend stay hidden (SKIP_3D), but .hero-right
   now stays visible to host the static HERO V2 poster (see the HERO V2 block
   in styles.css). Reverting HERO V2? Set this back to display: none. */
@media (max-width: 768px) {
  .hero-right { display: block; }
  /* Drop the grid to a plain block on phones — eliminates the grid min-content
     blowout that pushed the column wider than the viewport. */
  .hero-grid { display: block; padding: 64px 20px; }
  .hero, .hero-grid, .hero-left { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .hero-sub { font-size: 15px; }
  .hero-left { min-width: 0; }
  .hero-left h1 { font-size: clamp(30px, 8vw, 50px); overflow-wrap: break-word; }
  .hero-sub { max-width: 100%; }
  .hero-ctas { flex-wrap: wrap; }
  .hero-ctas .btn { flex: 0 1 auto; }
}

/* ============================================================
   COOKIE CONSENT
   Bottom-anchored card, not a full-screen blocker: the client
   asked for accept / refuse / customise, and a modal that traps
   the page is both hostile and unnecessary when refusing is one
   click. Refuse carries the same visual weight as accept —
   a "reject" styled as a whisper is not a free choice.
   ============================================================ */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  padding: 16px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.consent[hidden] { display: none; }
.consent-panel {
  pointer-events: auto;
  width: min(760px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  background: rgba(8, 17, 31, 0.97);
  border: 1px solid rgba(196,221,111,0.28);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  padding: 26px 28px;
  color: rgba(255,255,255,0.82);
}
@supports (backdrop-filter: blur(18px)) {
  .consent-panel { background: rgba(8,17,31,0.88); backdrop-filter: blur(18px); }
}
.consent-title {
  margin: 0 0 8px;
  font-family: 'Clash Grotesk', 'Satoshi', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #fff;
}
.consent-desc {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
}
/* The button-specificity trap: a bare descendant `a` colour rule turns the lime
   CTA pill's label unreadable. Exclude .btn. See feedback_btn_specificity_trap. */
.consent-panel a:not(.btn) { color: var(--brand); text-decoration: underline; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.consent-link {
  background: none;
  border: 0;
  padding: 10px 4px;
  color: rgba(255,255,255,0.75);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.consent-link:hover { color: #fff; }
.consent-prefs { margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 18px; }
.consent-prefs[hidden] { display: none; }
.consent-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
}
.consent-row:last-of-type { border-bottom: 0; }
.consent-row input { margin-top: 3px; accent-color: var(--brand); width: 18px; height: 18px; }
.consent-row-locked { cursor: default; opacity: 0.72; }
.consent-row-body strong { display: block; color: #fff; font-size: 15px; margin-bottom: 3px; }
.consent-row-body span { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.66); }
@media (max-width: 560px) {
  .consent { padding: 10px; }
  .consent-panel { padding: 20px 18px; }
  .consent-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---- Form consent + honeypot ---- */
.form-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 4px 0 18px;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
}
.form-consent input { margin-top: 2px; accent-color: var(--brand); width: 18px; height: 18px; }
/* :not(.btn) — a bare descendant `a` colour rule here would also repaint the
   lime submit pill's label. See feedback_btn_specificity_trap. */
.form-consent a:not(.btn) { color: var(--brand); text-decoration: underline; }
/* Honeypot: off-canvas rather than display:none. Some bots skip fields that are
   display:none precisely because it is the obvious tell; keeping it rendered but
   unreachable (and out of the tab order via tabindex="-1") catches more of them.
   aria-hidden + the negative tabindex keep it away from assistive tech. */
.form-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- Form status panel + field errors ---- */
/* One panel serves both forms and both outcomes. It sits inside the form so the
   answer appears where the visitor is looking, and it is a `role="status"`
   region — the old stub mutated the submit button's label, which a screen
   reader never announces. */
.form-status {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.05);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
}
.form-status[hidden] { display: none; }
.form-status p { margin: 0; grid-column: 2; }
/* The marker is a pseudo-element, not a character in the text: a screen reader
   announcing "check mark Mulțumim" adds nothing, and `content` is not read. */
.form-status::before {
  content: "";
  grid-column: 1;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.form-status.is-ok {
  border-color: rgba(166,206,65,0.45);
  background: rgba(166,206,65,0.10);
}
.form-status.is-ok::before { background: var(--brand); }
.form-status.is-error {
  border-color: rgba(255,120,110,0.45);
  background: rgba(255,120,110,0.10);
}
.form-status.is-error::before { background: #FF786E; }

/* Field-level error. Colour is never the only signal — the panel above names
   the problem in words, and the input also carries aria-invalid. */
.contact-form input.has-error,
.contact-form textarea.has-error,
.newsletter input.has-error {
  border-color: #FF786E;
  background: rgba(255,120,110,0.06);
}

/* In-flight state. The button keeps its label rather than swapping to a
   spinner: the label is what tells you which form you are waiting on. */
form.is-sending button[type="submit"] { opacity: 0.6; cursor: progress; }

/* The newsletter panel is narrow, sits on the deep footer ground and comes
   after the consent line, so it needs its own spacing rather than the contact
   form's flex gap. */
.newsletter .form-status { margin-top: 12px; font-size: 13px; padding: 12px 14px; }

/* The header is `position: sticky` and 81px tall, so anything scrolled to the
   top of the viewport lands UNDERNEATH it. That matters most for exactly the
   element that has to be read: a submission result scrolled into view sat behind
   the header and was invisible at the one moment it mattered. scroll-margin-top
   is what scrollIntoView() and fragment navigation both honour, so it fixes the
   JS path and the no-JS `#netit-form-…` redirect in one place. */
.form-status,
.contact-form,
.newsletter { scroll-margin-top: 110px; }

/* ---- Contact aside links ---- */
/* The phone number and email in the contact sidebar had NO colour rule at all,
   so they fell back to the browser default #0000EE — 2.01:1 against the dark
   ground, on the two links that are the page's whole purpose. The identical
   pair in the "date legale" block below them was already lime at 10.38:1,
   which is why it never looked obviously wrong in a glance at the page.
   `:not(.btn)` is mandatory: a bare descendant `a` colour rule here would also
   repaint the lime CTA pill's label. See feedback_btn_specificity_trap. */
.aside-card a:not(.btn) {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aside-card a:not(.btn):hover { color: var(--primary-light); }